Ako na tvorbu webu v HTML (6.) - zoznamy

V dnešnom pokračovaní seriálu o tvorbe webu Vám ukážem ako fungujú zoznamy v HTML. Na začiatok Vám popíšem klasický zoznam z odrážkami, ktorý vyzerá asi takto: * Položka zoznamu * Položka zoznamu * Položka zoznamu Zdrojový kód tohto zoznamu je: <ul> <li>Položka zoznamu <li>Položka zoznamu <li>Položka zoznamu </ul>

V dnešnom pokračovaní seriálu o tvorbe webu Vám ukážem ako fungujú zoznamy v HTML.

Na začiatok Vám popíšem klasický zoznam z odrážkami, ktorý vyzerá asi takto:

* Položka zoznamu * Položka zoznamu * Položka zoznamu

Zdrojový kód tohto zoznamu je: <ul> <li>Položka zoznamu <li>Položka zoznamu <li>Položka zoznamu </ul> V zdrojovom kóde vidíte , že v značke <ul> sa nachádzajú značky <li>. Značka <ul>je značka, ktorá určuje aký bude štýl zoznamu, v prípade značky <ul> to sú odrážky. Značky <li>nachádzajúce sa v párovom tágu <ul> sú jednotlivé odrážky s textom. Značka <ul> môže obsahovať hodnotu type, v ktorej nastavíte typ odrážky. Hodnota type sa môže rovnať hodnotám disc,circle,square. Disc zobrazí čiernu vyplnenú odrážku (do hodnoty type hodnotu disc nemusíte zadávať, pretože je to defaultná hodnota). Circle zobrazí odrážku s bielou výplňou a s čiernym rámom. Square zobrazí čierny vyplnený štvorec. Zoznam s čislami

Ďalší typ zoznamu v html je zoznam s číslami. Bude vyzerať asi takto:

1. Položka zoznamu 2. Položka zoznamu 3. Položka zoznamu

A zdrojový kód: <ol> <li>Položka zoznamu <li>Položka zoznamu <li>Položka zoznamu </ol> Zápis ako je už zrejme z príkladu je zhodný z odrážkovaným zoznamom, len bola zmenená značka ul na ol. Okrem tejto zmeny už nemôžeme použiť v hodnote type hodnoty circle,square a disc, pretože tu sa už nebudú zobrazovať odrážky, ale číslice. Namiesto toho môžeme použiť v hodnote type hodnoty 1,a,A,i,I. Hodnota 1 nám zobrazí odrážky s arabskými číslicami. Hodnota a zobrazí malé písmená a,b,c. Hodnota A zobrazí veľké písmená A,B,C. Hodnota i zobrazí malé rímske číslice. A posledná hodnota I zobrazí veľké rímske číslice. Ďalšou hodnotou, ktorá môže byť použitá v tágu <ol> je start. Táto hodnota určuje od koľko bude začínať číslovanie. Napr. bude hodnota obsahovať číslo 30, tak číslovanie začne od čísla 30. Príklad nájdete nižšie.

30. list item 31. list item 32. list item <ol start="30"> <li> list item <li> list item <li> list item </ol> Vnorené zoznamy

Pri tvorbe zoznamov v html môžete tiež použiť vnorené zoznamy. Tie sa zapisujú nejako takto: <ul> <li>Položka <li>Položka <li>Položka <ul> <li>Položka <li>Položka <li>Položka </ul> <ol> <li>Položka <li>Položka <li>Položka </ol> <li>Položka <li>Položka <li>Položka </ul> Výsledný efekt:

* Položka * Položka * Položka o Položka o Položka o Položka 1. Položka 2. Položka 3. Položka * Položka * Položka * Položka

Z príkladu vidíe, že vnorené zoznamy niesu ničím iným ako viac zoznamov v sebe. Napríklad v značke ul sa nachádza ešte jedna značka <ul> resp. <ol> a v tej sa nachádzajú ďalšie značky. Takto to môže pokračovať stále do hlbšieho zanorenia. Zoznam Definícii

Posledný typ zoznamu môže byť zoznam definícii, ktorý v hml bude vyzerať nejako takto:

Definícia Význam definície Definícia Význam definície Definícia Význam definície

Zdrojový kód príkladu je: <dl> <dt>Definícia <dd>Význam definície <dt>Definícia <dd>Význam definície <dt>Definícia <dd>Význam definície </dl>

Zo zdrojového kódu je jasné, že zoznam definícii bude uzatvorený v značke <dl>. V značke <dl> sa budú nachádzať značky <dt> a <dd>. Do značky <dt> uvedieme definíciu. A v značke <dd> uvedieme jej význam.

Záver

Z článku o zoznamoch je to všetko. V ďalšej a zároveň poslednej časti si niečo povieme o formulároch.

Související články

• Ako na tvorbu webu v HTML (4.) - tabuľky (14. červenece 08, 11:07)
• Ako na tvorbu webu v HTML (5.) - odkazy (14. červenece 08, 11:07)
• Ako na Tvorbu webu v HTML (2.) - upravovanie textu (14. červenece 08, 11:07)
• Ako na Tvorbu webu v HTML (3.) - vkladanie obrázkov (14. červenece 08, 11:07)
• Firefox: Pridaná podpora zabudovaného videa z HTML 5 (31. červenece 08, 12:07)
• Ako obísť ban na všetky miestnosti na azete. (21. červenece 08, 05:07)
• Ako na flashové video tutorialy (19. červenece 08, 20:07)