HTML bylo vytvořeno pro psaní strukturovaných dokumentů. Typickým strukturním prvkem, objevujícím se ve většině dokumentů, jsou různé seznamy. V HTML nalezneme podporu hned pro tři druhy seznamů – nečíslované, číslované a definiční. Při vytváření nečíslovaného seznamu postupujeme následovně:
-
celý seznam zahájíme tagem
<ul>; -
napíšeme potřebný počet položek seznamu, každou položku uzavřeme mezi tagy
<li>a</li>; -
seznam ukončíme tagem
</ul>.
Malá ukázka jednoduchého seznamu:
Nabízené druhy ovoce: <ul> <li>Jablka</li> <li>Hrušky</li> <li>Švestky</li> <li>Banány</li> </ul>
Pod jednou položkou seznamu může být skryto i více
odstavců. Stačí je uzavřít do elementu p.
U číslovaných seznamů je před každou položku seznamu
automaticky umisťováno pořadové číslo. Vytváření těchto seznamů je
zcela identické s vytvářením nečíslovaných seznamů. Jednotlivé
položky se opět uzavírají do elementu li.
Pro seznam však místo elementu ul
použijeme ol:[4]
Pořadí ovoce podle prodejnosti: <ol> <li>Jablka</li> <li>Hrušky</li> <li>Švestky</li> <li>Banány</li> </ol>
Poznámka
Jazyk HTML nevyžaduje ukončování položek seznamu pomocí </li>. Předchozí ukázku proto můžeme zapsat i trošku
úspornějším způsobem:
Pořadí ovoce podle prodejnosti: <ol> <li>Jablka <li>Hrušky <li>Švestky <li>Banány </ol>
Jazyk XHTML však striktně vyžaduje uzavírání elementů, a proto je lepší si na trošku výřečnější způsob zvykat rovnou.
Definiční seznamy se od předchozích dvou liší. S výhodou je
lze použít např. pro vytvoření slovníčku pojmů, který obsahuje
termíny a jejich vysvětlení. K vytvoření seznamu slouží
element dl (Definition List – definiční
seznam). Postup vytvoření definičního seznamu je následovný:
-
seznam zahájíme tagem
<dl>; -
definovaný termín zapíšeme mezi tagy
<dt>a</dt>; -
definici termínu umístíme mezi tagy
<dd>a</dd>; -
opakujeme kroky 2 a 3 pro každý termín v seznamu;
-
seznam ukončíme tagem
</dl>.
Vytvořit takto slovníček protokolů používaných v Internetu není žádný problém:
<dl> <dt>HTTP</dt> <dd>Transportní protokol využívaný k přenosu souborů obsahujících popis WWW-stránek v jazyce HTML.</dd> <dt>FTP</dt> <dd>Transportní protokol používaný k přenosu souborů.</dd> <dt>NNTP</dt> <dd>Transportní protokol používaný k přenosu news.</dd> </dl>
Tip
Vidíme, že definované termíny
nejsou příliš výrazné. Mnohem lépe vypadá definiční seznam, ve kterém
termíny zvýrazníme např. pomocí elementu
strong.
<dl> <dt><strong>HTTP</strong></dt> <dd>Transportní protokol využívaný k přenosu souborů obsahujících popis WWW-stránek v jazyce HTML.</dd> <dt><strong>FTP</strong></dt> <dd>Transportní protokol používaný k přenosu souborů.</dd> <dt><strong>NNTP</strong></dt> <dd>Transportní protokol používaný k přenosu news.</dd> </dl>
Poznámka
Ještě efektivnější řešení zvýraznění termínů v definičním souboru nabízejí kaskádové styly (viz ???).
Seznamy mohou být do sebe libovolně vnořovány. To znamená, že součástí položky jednoho seznamu může být celý další seznam.
Pro tvorbu stránek v jazyce HTML můžeme použít: <ol> <li>Obyčejné textové editory <ul> <li>Notepad</li> <li>Programmer's File Editor</li> <li>HTML-Kit</li> <li>HomeSite</li> <li>vim</li> </ul> </li> <li>Textové editory podporující vytváření struktury HTML dokumentu <ul> <li>HotMetal Pro</li> <li>asWedit</li> <li>Emacs+PSGML</li> </ul> </li> <li>WYSIWYG editory HTML stránek <ul> <li>FrontPage</li> <li>Netscape Composer</li> <li>WebMagic Pro</li> </ul> </li> </ol>
[4] Zkratka UL pochází z anglického Unordered List (neuspořádaný seznam) a OL z Ordered List (uspořádaný seznam).
