Vytvoření seznamu v html příkladu. Seznam s odrážkami

Seznamy definic spojují konkrétní objekty a jejich definice v seznamu. Pokud například chcete přidat definice k položkám v nákupním seznamu, můžete to udělat takto:

mléko Bílý tekutý mléčný výrobek. chléb Potravinářský výrobek vyrobený z mouky. máslo je žlutý tuhý mléčný výrobek. kávová zrna Semena plodů některých kávovníků.

Každá definice a termín je definiční skupina (nebo skupina název-hodnota). Můžete mít tolik definičních skupin, kolik chcete, ale každá skupina musí mít alespoň jeden termín a alespoň jednu definici. Nemůžete mít termín bez definice nebo definici bez termínu.

K jedné definici je možné přiřadit více termínů nebo naopak. Například výraz „káva“ může mít několik významů a můžete je zobrazit jeden po druhém:

káva nápoj z pražených, mletých kávových zrn šálek kávy setkání, při kterém se pije středně až tmavě hnědá káva

Alternativně je možné mít více než jeden termín se stejnou definicí. Používá se k zobrazení variant výrazu, které mají všechny stejný význam:

soda pop soda cola Sladký, sycený nápoj

Seznamy definic se liší od ostatních typů seznamů, protože místo objektů seznamu používají definované termíny a popisy definic.

Definiční seznamy proto používají jeden pár prvků

Jednoduchý seznam definic pro jeden termín s jednou definicí by vypadal takto:

Období

Definice pojmu

Období

Definice pojmu

Období

Definice pojmu

Což je výstup takto:

Termín Definice termínu Termín Definice termínu Termín Definice termínu

V tomto příkladu spojujeme více než jeden termín s definicí a naopak:

Období

Definice pojmu

Období

Období

Definice, která platí pro oba předchozí pojmy

Termín, který může mít obě následující definice

Jedna definice pojmu

Další definice pojmu

Která bude prezentována následovně:

Termín Definice termínu Termín Termín Definice, která se vztahuje na oba předchozí termíny Termín, který může mít obě následující definice Jedna definice termínu Jiná definice termínu

Není běžnou praxí spojovat více termínů s jednou definicí, ale je dobré vědět, že v případě potřeby je to možné.

Výběr typu seznamu

Při rozhodování o použití určitého typu seznamu se obvykle můžete rozhodnout položením dvou jednoduchých otázek:

1. Jsou pojmy definovány (nebo jiné dvojice název/hodnota zřetězené)?
   • Pokud ano, použijte seznam definic.
   • Pokud ne, nepoužívejte seznam definic – přejděte k další otázce.
2. Záleží na pořadí prvků seznamu?
   • Pokud ano, použijte seřazený seznam.
   • Pokud ne, použijte neuspořádaný seznam.

Rozdíl mezi seznamy HTML a textem

Někdo by se mohl divit, jaký je rozdíl mezi HTML seznamem a nějakým textem s odrážkami nebo ručně psanými čísly. Použití seznamu HTML má několik výhod:

• Pokud potřebujete změnit pořadí položek seznamu v seřazeném seznamu, jednoduše je přesunete v HTML kódu. Pokud jsou čísla psána ručně, budete muset projít všechno a změnit číslo každého prvku, abyste opravili pořadí - což je přinejmenším docela nuda!
• Použití seznamu HTML vám umožní správně stylovat seznam. Pokud použijete pouze velký text, bude mnohem obtížnější stylizovat jednotlivé prvky nějakým více či méně užitečným způsobem.
• Použití seznamu HTML dává obsahu správnou sémantickou strukturu, spíše než aby byl „jako seznam“ vizuální efekt. To má důležité výhody, protože umožňuje čtečkám obrazovky sdělit uživatelům se zrakovým postižením, že čtou seznam, spíše než jen číst matoucí směs textu a čísel.

Na druhou stranu: text a seznamy nejsou totéž. Použití textu místo seznamu vyžaduje více práce a může způsobit problémy čtenářům dokumentů. Pokud tedy dokument vyžaduje seznam, musí být použit správný HTML seznam.

Vnořené seznamy

Prvek seznamu může obsahovat další celý seznam – tomu se říká „vnořený“ seznam. To může být užitečné pro věci, jako je obsah, jako je ten na začátku přednášky:

1. Kapitola jedna 1. Část jedna 2. Část druhá 3. Část třetí 2. Kapitola druhá 3. Kapitola třetí

Klíčovým bodem k zapamatování je, že vnořený seznam musí odkazovat na jeden konkrétní prvek seznamu. Aby se to projevilo v kódu, je do tohoto prvku seznamu umístěn vnořený seznam. Kód pro výše uvedený seznam vypadá takto:

1. Kapitola jedna
   1. Sekce jedna
   2. Část dva
   3. Oddíl třetí
2. Kapitola dvě
3. Kapitola třetí

Všimněte si, že vnořený seznam začíná za prvkem

Teoreticky můžete vnořit libovolný počet seznamů, i když v praxi to může být matoucí, pokud jsou seznamy vnořeny příliš hluboko. U velmi velkých seznamů může být lepší rozdělit obsah do více seznamů s nadpisy nebo dokonce na samostatné stránky.

Příklad krok za krokem

uvažujme příklad krok za krokem dát to všechno dohromady. Zvažte následující scénář:

Vytváříme malé webové stránky pro kuchařskou školu. Na hlavní stránce zobrazíme seznam klasifikovaných receptů propojených se stránkami receptů. Na každé stránce receptu jsou uvedeny požadované přísady, poznámky k těmto přísadám a způsob přípravy. Tyto tři kategorie jsou „Dorty“ (včetně receptů na „Plain Sponge“, „Chocolate Cake“ a „Apple Tea Cake“); "Sušenky" (včetně receptů na "ANZAC Sušenky", "Jam Drops" a "Melting Moments"); a "Rychlé chleby" (včetně receptů na "Damper" a "Scones"). Klienta nezajímá, v jakém pořadí jsou kategorie a recepty zobrazeny, chce jen, aby lidé pochopili, které položky jsou kategorie a které recepty.

Pojďme si projít proces tvorby tohoto webu. V této části vytvoříme označení a také přidáme styly do seznamů. Stylingu se budeme podrobně věnovat až v přednášce o stylování seznamů později v seriálu.

Rozložení hlavní stránky

Vytvořte dobře vytvořenou stránku HTML, včetně prvků doctype html, hlavu a tělo a uložte jej jako stepbystep-main.html . Přidejte hlavní nadpis (h1) „Škola vaření HTML“ a podnadpis (h2) „Recepty“:

HTML škola vaření

Recepty

Recepty

• Dorty
• Sušenky
• Rychlé chleby

Odsazení pro prvky li usnadňuje čtení kódu, ale není vyžadováno.

Nyní je třeba přidat recepty jako podpoložky, například "Obyčejný piškot", "Čokoládový dort" a "Jablečný čajový dort" jsou součástí kategorie "Dorty". Chcete-li to provést, musíte na každé pozici seznamu vytvořit vnořený seznam. Vzhledem k tomu, že pořadí není důležité, opět to sedí neuspořádaný seznam. Pro zjednodušení výukového materiálu lze všechny recepty propojit na jednu stránku receptů:

Recepty

• Dorty
  • Obyčejná houba
  • Čokoládový dort
  • Jablečný čajový koláč
• Sušenky
  • ANZAC sušenky
  • Jam Drops
  • Okamžiky tání
• Chleby/rychlovky
  • Tlumič
  • Koláčky

Dobrý den!

V tomto článku se dozvíte o všech možnostech seznamů, pochopíte, jak vytvořit číslovaný seznam, a osvojíte si hlavní značky, které vám pomohou proměnit jednoduchý seznam s odrážkami na zajímavější a nápadnější s libovolnými odrážkami. Po dokončení lekce budete rozumět tomu, kde se seznamy používají a za jakých okolností je lze použít.

Tento článek je třetím v tomto krátkém kurzu základy HTML. Před přečtením této lekce doporučuji projít si předchozí dvě:

Článek právě začal a už si můžete všimnout použití standardního seznamu s odrážkami. Na mém webu to vypadá docela jednoduše: vlevo je malá odrážka s čárou a čtvercovou značkou. Později v článku se podrobně podíváme na to, jaké typy fixů existují, jak vyrobit čísla a také jak si vyrobit vlastní fix.

V každé části článku bude provázena tvorba určitých seznamů podrobná vysvětlení vložením konkrétního seznamu.

1. Seznamy s odrážkami v HTML

Tento typ seznamu se používá k vypsání množiny prvků s podobným významem v textu. Může to být seznam odkazů, které souvisejí se stejným tématem, podrobné vysvětlení pro jednotlivé části textu. Ale podívejme se, jak vypadají seznamy s odrážkami v kódu:

A takhle to vypadá v prohlížeči:

1.1 Standardní odrážky pro seznamy s odrážkami

Na obrázku výše (obrázek 1.1.) můžete vidět kroužky na začátku každé položky nabídky. Toto je značka. Ve výchozím nastavení se v prohlížeči zobrazuje jako vyplněný kruh. V HTML existuje několik typů značek: vyplněný kruh, prázdný kruh a čtverec. Nevyžadují žádné CSS ani obrázky třetích stran:

1.2 Seznam značek ve formě prázdného kruhu

Znáte hodnoty atributů, ale nyní se podívejme, jak vytvořit HTML seznam s odrážkami v kódu. Z výše uvedené tabulky jsme pro atribut type vybrali druhou hodnotu „circle“ a nastavili ji na náš seznam s odrážkami:

Okamžitě se podívejme, jak bude tento kód vypadat v prohlížeči:

1.3 Seznam značek ve tvaru čtverce

Podívejme se také na poslední příklad se čtvercovou značkou pro seznam HTML:

Věnujte pozornost značce, stala se čtvercovou:

Důležitá poznámka: Tato metoda se již nepoužívá k vytváření stylů pro seznamy s odrážkami. Mezi CSS (přečtěte si, co je CSS) a HTML existuje jasné oddělení. HTML je pro značkování a CSS pro jeho zatraktivnění. vzhled.

Kód, který obsahuje tento atribut při specifikaci aktuálního typu dokumentu jako HTML5 (""), zobrazí při ověřování chybu. Pokud jste ještě neslyšeli, co je ověření, pak je toto místo pro vás.

Chyba bude následující:

Seřadili jsme seznamy s odrážkami. Nyní přejděme k číslovaným seznamům a poté zvažte vnořené seznamy a několik hotových příkladů, které se nejčastěji používají na skutečných webech.

2. Číslované seznamy v HTML

Na rozdíl od předchozího typu seznamů mají číslované seznamy jednu důležitou vlastnost: jsou automaticky číslovány. To je užitečné, když potřebujete očíslovat velký seznam. Ruční provedení zabere spoustu času a stále se můžete zmást. Číslovaný seznam je určen pomocí značky. Jak to vypadá v praxi:

Příklad číslovaného seznamu:

Takto vypadá číslovaný seznam: standardní nastavení v prohlížeči:

Stejně jako jeho předchůdce (seznam odrážek) má vlastní styly zobrazování čísel. Běžné číslování není jediným typem odrážky pro číslovaný seznam v HTML.

2.1 Standardní odrážky pro číslované seznamy

Zde máme na výběr nikoli ze tří typů značek, ale z pěti:

2.2 Vlastní číslování v HTML seznamu

Kromě běžného výstupu číslovaného seznamu můžeme naše číslování začít také z libovolného čísla. Chcete-li to provést, musíte nastavit další atribut "start" . Toto číslování funguje na všech typech značek pro číslované seznamy. Jak to vypadá v praxi:

Na skutečném webu se zobrazí takto:

Na obrázku výše jsme očíslovali seznam od dvanácti, přičemž jsme vytvořili značky ve formě malých latinských písmen. Nyní je, myslím, jasné, jak tyto atributy používat ve svých projektech.

Nyní přejdeme k vnořeným seznamům HTML.

3. Jak vytvořit víceúrovňový (vnořený) seznam v HTML

Víceúrovňové seznamy se na webu používají k vytváření nabídek. Tato nabídka se nejčastěji jeví jako rozbalovací nabídka směrem dolů (na lekci) nebo jako rozbalovací nabídka vlevo nebo vpravo. Takové nabídky umožňují uložit další prvky nabídky v kompaktní podobě.

Na příkladu modelů aut vytvoříme víceúrovňový seznam v HTML:

Všimněte si, jak vypadá víceúrovňový seznam v prohlížeči:

Vytvořili jsme víceúrovňový seznam pomocí odrážek (tag

). U dalších značek se objevil víceúrovňový seznam s modely Citroen. Hlavní seznam má plné odrážky a seznam 2. úrovně má prázdné kruhy. Ale jak si pamatujete, pomocí atributu „type“ můžeme značky předefinovat (je lepší nastavit ).

Můžeme však kombinovat víceúrovňové seznamy s číslovanými seznamy a seznamy s odrážkami takto:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <hlava > <titul >Číslované, odrážkové a víceúrovňové seznamy v HTML</title> </hlava> <tělo > <ul > <li > První skupina tulipánů<ol > <li > První stupeň<ul > <li > Jednoduché rané tulipány</li> </ul> </li> <li > Druhá třída<ul > <li > Froté tulipány</li> </ul> </li> </ol> </li> </ul> </body> </html>

Ve výše uvedeném příkladu máme dvojité vnoření (2 úrovně). Nejprve je uveden seznam dvou tříd tulipánů, máme to očíslované. Potom je do každé položky v číslovaném seznamu vnořen seznam s odrážkami.

Podívejme se, jak to vypadá v prohlížeči:

Rýže. 3.2. Příklad víceúrovňového číslovaného seznamu na seznam s odrážkami v prohlížeči

4. Užitečné materiály na seznamech HTML

Toto jsou informace, které vyžadují pochopení vlastností CSS. K tomu doporučuji prostudovat si následující lekce: . Všechny příklady budou okamžitě s zdrojový kód a jsou rozděleny na záložky HTML (struktura), CSS (styly) a Výsledek (výsledek).

4.1 Jak udělat ze seznamu HTML řetězec

Při vytváření horizontální nabídky může být nutný převod seznamu HTML na řetězec. Je to velmi snadné:

4.2 Jak vytvořit HTML seznam bez ikony

Za to je zodpovědná vlastnost list-style-type v CSS (další podrobnosti):

4.3 Jak vycentrovat seznam v HTML

Položka seznamu je blokový prvek, takže je třeba ji vycentrovat pomocí okraje. Ale je tu jeden důležitý bod – musíme výslovně specifikovat šířku, aby zarovnání fungovalo:

4.4 Jak vytvořit seznam v HTML s obrázky

Stačí jen jeden Vlastnosti CSS list-style-image . Uvnitř adresy URL zadejte adresu před ikonou. Chci jen poznamenat, že je lepší okamžitě vybrat malý obrázek, protože na něm závisí výška řádku seznamu:

4.5 Seznam s odrážkami HTML vaši odrážku

V tomto případě je třeba předem propojit ikony písem (například FontAwesome ). Pak můžete místo standardní značky vytvořit libovolnou ikonu:

4.6 Jak vytvořit seznam v HTML v několika sloupcích

Pro vytvoření seznamu v několika sloupcích použijeme vlastnost CSS column-count (vlastnost je podporována pouze v následujících prohlížečích: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Musíte také nastavit výšku seznamu, abyste viděli rozdělení do více sloupců:

5. Procvičte si práci se seznamy

Ve videu níže můžete vidět veškerou práci s HTML seznamy v praxi:

Pro konsolidaci obdržených informací doporučuji provést všechny kroky ručně. Vyzkoušejte různé odrážky pro seznamy, vytvořte číslované seznamy a poté přejděte na víceúrovňové (vnořené) seznamy a experimentujte s nimi.

Zde končíme se seznamy a přejdeme k další lekci o obrázcích.

Cvičte více!

Lekce 3. Jak vytvořit seznam v HTML 4.91 /5 (98.26%) 23 hlasů

Seznam s odrážkami je definován přidáním malé odrážky, obvykle ve formě vyplněného kruhu, před každou položku seznamu. Samotný seznam se tvoří pomocí kontejneru

a každá položka seznamu začíná značkou
• Jak je ukázáno níže.
  • První bod
  • Druhý bod
  • Třetí bod

  Seznam musí obsahovat uzavírací značku

, jinak dojde k chybě. Uzavírací štítek Ačkoli to není povinné, vždy jej doporučujeme přidat do jasně oddělených položek seznamu.

Příklad 11.1 ukazuje HTML kód pro přidání seznamu s odrážkami na webovou stránku.

Příklad 11.1. Vytvořte seznam s odrážkami

---

• Cheburashka
• Krokodýl Gena
• Shapoklyak
• Krysa Larisa

---

Výsledek tento příklad znázorněno na Obr. 11.1.

Rýže. 11.1. Zobrazení seznamu s odrážkami

Věnujte pozornost odsazení v horní, dolní a levé části seznamu. Takové odrážky se přidávají automaticky.

Značky mohou mít jednu ze tří forem: kruh (výchozí), kruh a čtverec. Chcete-li vybrat styl značky, použijte atribut type značky

. Přijatelné hodnoty jsou uvedeny v tabulce. 11.1
Stůl 11.1. Seznam stylů odrážek

Typ seznamu	HTML kód	Příklad
Seznam s kruhovými značkami		První Druhý Třetí
Seznam s kruhovými odrážkami		První Druhý Třetí
Seznam se čtvercovými odrážkami		První Druhý Třetí

Vzhled značek se může v různých prohlížečích mírně lišit, stejně jako při změně písma a velikosti textu.

Vytvoření seznamu se čtvercovými odrážkami je znázorněno v příkladu 11.2.

Příklad 11.2. Typ značek

Změna přesvědčení

• změna náboženské víry (volitelné: buddhismus, konfucianismus, hinduismus). Speciální nabídka - judaismus a islám dohromady;
• změna víry v neomylnost oblíbené strany;
• přesvědčení, že mimozemšťané existují;
• preference politického systému jako nejlepšího svého druhu (na výběr: feudalismus, socialismus, komunismus, kapitalismus).

Výsledek tohoto příkladu je znázorněn na Obr. 11.2.

Seznamy s odrážkami umožňují rozdělit velký text na samostatné bloky, z nichž každý začíná odrážkou – obvykle malou tečkou. To přitahuje pozornost čtenáře k textu a zvyšuje jeho čitelnost.

S prvkem

Jsou spojeny následující funkce:
• v místě, kde se vyskytuje
  , prohlížeč automaticky přidá zalomení řádku;
  • seznam má odsazení nahoře a dole;
  • Ve výchozím nastavení jsou značky zobrazeny jako vyplněný kruh;
  • Každý prvek seznamu je posunut doprava vzhledem k hlavnímu textu.

  Obrázek 1 ukazuje výsledek příkladu ilustrující výše uvedené vlastnosti seznamu s odrážkami.

  Rýže. 1. Zobrazení seznamu odrážek

  Typ značky

  Značky mohou mít jednu ze tří forem: vyplněný kruh (výchozí), otevřený kruh a čtverec. Chcete-li vybrat typ značky, použijte vlastnost list-style-type nebo univerzální vlastnost list-style (příklad 1). Platí následující hodnoty:

  • kotouč - značky ve formě vyplněného kruhu;
  • kruh - značky ve formě otevřeného kruhu;
  • čtverec - čtvercové značky.

  Příklad 1: Změna vzhledu značky

  • Sepulki
  • Sepulcaria
  • Sepulenace

  Příklad ukazuje, jak vytvořit seznam s odrážkami pomocí malého jednobarevného čtverečku jako ikony odrážky. I když je počet hodnot omezen na tři, neznamená to, že máme k dispozici pouze tři typy markerů. Existuje mnoho speciálních znaků, které mohou úspěšně fungovat jako ikona značky. Přišroubujte je přímo k

• Nebude to fungovat, takže to budete muset obejít. Chcete-li to provést, skryjte značky seznamu pomocí vlastnosti list-style s hodnotou none a v textu před obsahem
• Vlastní znak přidáme pomocí pseudoprvku ::before. V příkladu 2 je takovou značkou trojúhelník.

  Příklad 2: Použití::before

  • Sepulki
  • Sepulcaria
  • Sepulenace

  Výsledek tohoto příkladu je znázorněn na Obr. 2. Protože použití vlastnosti list-style s hodnotou none neodstraní značky vůbec, ale pouze je skryje ze zobrazení, seznam se zobrazí posunutý doprava. Chcete-li se této funkce zbavit, příklad přidá vlastnost text-indent se zápornou hodnotou. Jeho úkolem je posunout text o jeden znak doleva.

  

  Rýže. 2. Libovolné značky v seznamu

  Znak nemusí být v hexadecimálním formátu, lze jej vložit přímo do textu. Hlavní je uložit dokument v kódování UTF-8 a aby to editor podporoval. Samotné postavy a jejich kódy lze převzít např. z LibreOffice Writer(obr. 3).

  

  Rýže. 3. Výběr symbolu v LibreOffice

  Seznam s ručně kreslenými značkami

  Styly vám umožňují nastavit jakýkoli vhodný obrázek jako značku pomocí vlastnost list-style-image. Hodnota je relativní nebo absolutní cesta ke grafickému souboru, jak je znázorněno v příkladu 3.

  Příklad 3: Použití obrázku jako značky

  • Sepulki
  • Sepulcaria
  • Sepulenace

  Nejlepší je zvolit malou kresbu, abyste nezměnili prvky seznamu na popisky. Na Obr. Obrázek 4 ukazuje výsledek příkladu použití malých obrázků jako značek.

  

  Rýže. 4. Kresba jako fix

  Použití obrázku ve stylu seznamu má některé nevýhody:

  • vzor nelze posunout nahoru ani dolů;
  • Poloha obrázku vzhledem k textu se může v různých prohlížečích lišit.

  Těmto nedostatkům se lze vyhnout pomocí vlastnosti background, ta nastavuje obrázek na pozadí. Pro každý prvek seznamu

• odstraníme původní značky a nastavíme obrázek na pozadí bez opakování. A aby se text neobjevil nad obrázkem, posuneme jej doprava pomocí padding-left (příklad 4).

  Příklad 4: Použití pozadí

  Ul ( margin-left: -1em; ) li (list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

  Pozice textu a odrážky

  Existují dva způsoby, jak umístit značku vzhledem k textu: značku přesunete mimo okraj prvků seznamu nebo ji obalíte kolem textu (obr. 5).

  uvnitř	mimo

  Rýže. 5. Umístění značek vzhledem k textu

  Chcete-li ovládat polohu značek, použijte vlastnost list-style-position. Má dva významy: vně - odrážky jsou umístěny mimo textový blok (toto je výchozí hodnota) a uvnitř - odrážky jsou součástí textového bloku a zobrazují se v položce seznamu (příklad 5).

  Příklad 5: Změna pozice značek

  • Než začnete, zkontrolujte, zda je součástí sady 3BM vybavení.
  • Při absenci jednoho nebo více příslušenství Měli byste okamžitě kontaktovat technický personál VT.
  • Po vizuální kontrole vašeho pracovního prostoru můžete opatrně zapnout napájení 3BM.

  Výsledek tohoto příkladu je znázorněn na Obr. 6.

  

  HTML podporuje seznamy tří odlišné typy, z nichž každý má své vlastní parametry:

  • – číslovaný (pomocí čísel nebo písmen) seznam, jehož každý prvek má pořadové číslo (písmeno);
    1. – seznam s odrážkami (nečíslovaný), vedle každého prvku je umístěna značka (spíše než číselné nebo abecední znaky označující pořadové číslo);

       • – seznam definic se skládá z párů název/hodnota, včetně termínů a definic.

       Číslované seznamy

       Do číslovaného seznamu prohlížeč automaticky vkládá čísla prvků v pořadí, počínaje určitou hodnotou (obvykle 1). To vám umožní vkládat a mazat položky seznamu bez narušení číslování, protože zbývající čísla budou automaticky přepočítána.
       Číslované seznamy se vytvářejí pomocí prvku bloku

       (z anglického Ordered List - číslovaný seznam). Vedle kontejneru
       pro každou položku seznamu je umístěn prvek
       1. (z anglického List Item - položka seznamu). Výchozí je číslovaný seznam s arabskými čísly.
          Štítek
          má následující syntaxi:
          1. prvek 1
          2. prvek 2
          3. prvek 3

          Položky číslovaného seznamu musí obsahovat více položek seznamu, jak ukazuje následující příklad:

          Příklad: Číslovaný seznam

          • Zkus to sám "

          Návod krok za krokem

          1. Získejte klíč
          2. Vložte klíč do zámku
          3. Otočte klíčem o dvě otáčky
          4. Vytáhněte klíč ze zámku
          5. Otevřít dveře

          Návod krok za krokem

          1. Získejte klíč
          2. Vložte klíč do zámku
          3. Otočte klíčem o dvě otáčky
          4. Vytáhněte klíč ze zámku
          5. Otevřít dveře

          Někdy při pohledu na existující HTML kódy narazíte na argument typ v prvku

          , který se používá k označení typu číslování (písmena, římské a Arabské číslice a tak dále.). Syntax:

          Zde: typ – seznam symbolů:

          • A - velká písmena písmena(A, B, C...);
          • a - malá písmena latinky (a, b, c...);
          • I - velké římské číslice (I, II, III...);
          • i - malé římské číslice (i, ii, iii...);
          • 1 - Arabské číslice (1, 2, 3 . . .) (ve výchozím nastavení).

          Pokud chcete, aby seznam začínal číslem jiným než 1, měli byste to zadat pomocí atributu Startštítek

          .
          Následující příklad ukazuje číslovaný seznam s velkými římskými číslicemi a počáteční hodnotou XLIX:

          Číslování lze také spustit pomocí atributu hodnota, který se přidá k prvku

          1. následujícím způsobem:

          7. V tomto případě bude sekvenční číslování seznamu přerušeno a od tohoto okamžiku začne číslování znovu, v tomto případě od sedmi.

             Příklad použití atributu hodnotaštítek

          8. , který umožňuje změnit číslo daného prvku seznamu:

             V tomto příkladu by "První položka seznamu" měla číslo 1, "Druhá položka seznamu" by měla číslo 7 a "Třetí položka seznamu" by měla číslo 8.

             Formátování číslovaných seznamů pomocí CSS

             Chcete-li změnit čísla seznamu, měli byste použít vlastnost list-style-type CSS styly:

             Styly číslovaného seznamu

             Příklad	Význam	Popis
             a, b, c	nižší-alfa	Malá písmena
             A, B, C	horní alfa	Velká písmena
             i, ii, iii	nižší římský	Římské číslice malými písmeny
             I, II, III	horní římský	Římské číslice velkými písmeny

             Příklad: Použití vlastnosti CSS list-style-type

             Seznamy s odrážkami

             Seznamy s odrážkami jsou v podstatě podobné číslovaným seznamům, pouze neobsahují postupné číslování položek. Seznamy s odrážkami se vytvářejí pomocí prvku bloku

             (z anglického Unordered List - nečíslovaný seznam). Každý prvek seznamu, stejně jako v číslovaných seznamech, začíná značkou
             • . Prohlížeč odsadí každou položku seznamu a automaticky zobrazí odrážky.
               Štítek
               má následující syntaxi:
               • První bod
               • Druhý bod
               • Třetí bod

               V následujícím příkladu můžete vidět, že ve výchozím nastavení je před každou položku seznamu přidána malá značka ve formě vyplněného kruhu:

               Uvnitř štítku

               • Není nutné umístit pouze text, je přijatelné umístit jakýkoli prvek streamovaného obsahu (odkazy, odstavce, obrázky atd.)

                 Vnořené seznamy

                 Jakýkoli seznam může být vnořen do jiného. Uvnitř prvku
               • Je přípustné vytvořit vnořený seznam nebo seznam druhé úrovně. Chcete-li vnořit seznam, popište nový seznam vnitřní prvek
               • již existující seznam. Když vnoříte jeden seznam s odrážkami do druhého, prohlížeč automaticky změní styl odrážek pro seznam druhé úrovně. Jakýkoli seznam může být vnořen do jiného. Následující příklad ukazuje strukturu seznamu s odrážkami vnořeného do druhé položky číslovaného seznamu.

                 Příklad: Vnořené seznamy

                 • Zkus to sám "
                 • pondělí
                   1. Poslat mail
                   2. Návštěva v redakci
                      • Výběr motivu
                      • Dekorativní design
                      • Konečná zpráva
                   3. Večerní prohlížení zpráv
                 • úterý
                   1. Upravit rozvrh
                   2. Posílejte obrázky
                 • Středa...
                 • pondělí
                   1. Poslat mail
                   2. Návštěva v redakci
                      • Výběr motivu
                      • Dekorativní design
                      • Konečná zpráva
                   3. Večerní prohlížení zpráv
                 • úterý
                   1. Upravit rozvrh
                   2. Posílejte obrázky
                 • Středa...

                 Formátování seznamů s odrážkami

                 Chcete-li změnit vzhled značky seznamu, měli byste použít vlastnost list-style-type CSS styly:

                 Následující příklad ukazuje různé styly seznamů s odrážkami:

                 Příklad: Styly seznamu odrážek

                 • Zkus to sám "
                 • Káva
                 • Káva
                 • Káva
                 • Káva

                 Disk:

                 • Káva
                 • Mléko

                 Kruh:

                 • Káva
                 • Mléko

                 Náměstí:

                 • Káva
                 • Mléko

                 Žádný:

                 • Káva
                 • Mléko

                 Grafické značky.

                 V HTML je možné vytvořit seznam s grafickými značkami. Jedna věc je, když jsou značkami seznamu standardní kruhy nebo čtverce, a něco úplně jiného, ​​když vývojář sám vybere značku v souladu s designem stránky. Aby byly položky seznamu krásné, často se používají malé obrázky.
                 Chcete-li nahradit běžnou značku grafickou, nahraďte vlastnost list-style-type za nemovitost list-style-image a uveďte adresu URL obrázku:

                 Příklad: Grafické značky

                 • Zkus to sám "

                 znamení zvěrokruhu

                 • Býk
                 • Blíženci

                 znamení zvěrokruhu

                 • Beran
                 • Býk
                 • Blíženci

                 Seznamy definic (popisy)

                 Seznamy definic jsou velmi užitečné pro vytvoření například vašeho osobního slovníku pojmů. Každá položka seznamu definice má dvě části: termín a jeho definici.
                 Celý seznam vložíte do prvku

                 (z anglického Definition List - seznam definic). Obsahuje značky

                 (z anglického Definition Term - definované slovo, termín) a

                 (z anglického Definition Description - popis definovaného pojmu).
                 Seznamy definic se často používají ve vědeckých, technických a vzdělávacích publikacích a používají je k sestavování glosářů, slovníků, referenčních knih atd.

                 Obecná struktura seznamu popisů je následující:

                 První termín

                 Popis prvního termínu

                 Druhé období

                 Popis druhého termínu

                 Následující příklad ukazuje jedno možné použití seznamu definic:

                 Příklad: Seznam definic

                 • Zkus to sám "

                 World Wide Web – z angličtiny. Svět Široká síť(WWW) je distribuovaný systém, který poskytuje přístup k propojeným dokumentům umístěným na různých počítačích připojených k internetu. Internet je sada sítí, které k přenosu informací používají jeden protokol výměny. Web je soubor jednotlivých webových stránek, které jsou vzájemně propojeny odkazy a jednotným designem.

                 Celosvětový web

                 - z angličtiny World Wide Web (WWW) je distribuovaný systém, který poskytuje přístup k souvisejícím dokumentům umístěným na různých počítačích připojených k internetu.

                 Internet

                 — soubor sítí, které k přenosu informací používají jediný protokol výměny.

                 webová stránka

                 - soubor jednotlivých webových stránek, které jsou vzájemně propojeny odkazy a jednotným designem.

                 Ve výchozím nastavení je text termínu přitlačen k levému okraji okna prohlížeče a popis termínu je umístěn níže a posunut doprava.