Seznamy

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ě:

  1. celý seznam zahájíme tagem <ul>;

  2. napíšeme potřebný počet položek seznamu, každou položku uzavřeme mezi tagy <li> a </li>;

  3. 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ý:

  1. seznam zahájíme tagem <dl>;

  2. definovaný termín zapíšeme mezi tagy <dt> a </dt>;

  3. definici termínu umístíme mezi tagy <dd> a </dd>;

  4. opakujeme kroky 2 a 3 pro každý termín v seznamu;

  5. 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).

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus