Rozličné typy zoznamov v HTML existujú. V prvom rade sú tu odrážkové zoznamy. Pri tomto type zoznamu sú jednotlivé položky zoznamu vybavené odrážkovým znamienkom, tzv. bodkou.
Odrážkové zoznamy sa zavádzajú pomocou elementu ul. Jednotlivé položky zoznamu sú označené pomocou elementu li.
<p>Aktuálne témy z fóra</p> <ul> <li>CSS sa neprehráva ďalej</li> <li>Showroom v štýle Hollywood z 40-tych rokov</li> <li>Drop-down zoznam CSS</li> <li>PHP pripojenie/odpojenie</li> <li>Môj malý showroom - Začiatočník prosiaci o tipy!</li> </ul>
Podívajte sa na výsledok v prehliadači:
Pred každým príspevkom bude vložené odrážkové znamienko. Ako to základne vyzerá, určuje prehliadač. Existujú síce atribúty, ktoré ovplyvňujú zobrazenie zoznamov, tieto by sa však už nemali používať. Naopak by sa mali použiť vlastnosti CSS.
Odrážkové zoznamy sa dajú tiež vnárať. Najprv sa pozrite na nasledujúci obrázok:
Tým sa jasne ukazuje, aký je zmysel takéhoto vnárania zoznamov.
Syntax na to vyzerá nasledovne:
<ul>
<li>Tutoriály
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotréninky
<ul>
<li>3D</li>
<li>Tvorba médií</li>
<li>Web</li>
</ul>
</li>
<li>Tipy</li>
<li>Obchody</li>
</ul>
V rámci jednej položky zoznamu môže byť ďalší zoznam. V tomto prípade to však nemusí nutne byť odrážkový zoznam. Skutočne sa dajú vložiť aj iné typy zoznamov – ktoré budú v tomto návode ešte predstavené.
Mimochodom, v HTML5 nie je nevyhnutné používať uzatváraciu značku </li>. Kvôli lepšej čitateľnosti by som ju však vždy uzatváral. Syntakticky správne by však bolo aj toto:
<p>Aktuálne témy z fóra</p> <ul> <li>CSS sa neprehráva ďalej <li>Showroom v štýle Hollywood z 40-tych rokov <li>Drop-down zoznam CSS <li>PHP pripojenie/odpojenie <li>Môj malý showroom - Začiatočník prosiaci o tipy! </ul>
Číslované zoznamy
Okrem odrážkovej zoznamov sa dajú definovať aj číslované zoznamy. Aj tu najprv obrázok, ktorý ukazuje, aký je zmysel takýchto číslovaných zoznamov.
Pred položkami zoznamu bude postupne postavené číselné označenie. Číslované zoznamy sa zavádzajú pomocou elementu ol.
Nasledujúci príklad ukazuje, ako použiť tento element.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Ako pri odrážkových zoznamoch, aj tu sú jednotlivé položky označené pomocou elementu li.
Teoreticky je možné vnárať aj odrážkové zoznamy.
<ol>
<li>Tutoriály
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotréninky
<ol>
<li>3D</li>
<li>Tvorba médií</li>
<li>Web</li>
</ol>
</li>
<li>Tipy</li>
<li>Obchody</li>
</ol>Výsledok v prehliadači je však sklamajúci.
Číslovanie podľa tohto schémy sa tým totiž nedosiahne:
1. Tutoriály 2D
1.1 3D
1.2 Web
- Videotréninky 3D
2.1 Tvorba médií
2.2 Web - Tipy
- Obchody
S niečím takým nie je možné v čistom HTML manipulovať. Skutočne je potrebné použiť CSS na to, aby sa obsah automaticky označil podľa takejto schémy.
Definičné zoznamy
Ďalší typ zoznamov sú takzvané definičné zoznamy. Aj pre ne najprv príklad, ako takýto zoznam nakoniec vyzerá v prehliadači:
Oblasti použitia definičných zoznamov sú najmä glosáre. Tu je syntax, ktorá viedla k uvedenej výpise:
<dl>
<dt>AM</dt>
<dd>AM - Pošta vzdušnou poštou</dd>
<dd>AM - Vzdušný maršál</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americium</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - nad menované</dd>
<dd>AN - Prístupový bod</dd>
<dd>AN - Ancona</dd>
</dl>Bei Definitionslisten hat man es immer mit drei Elementen zu tun. Eingeleitet werden die Listen durch das dl-Element. Das ist also die äußere Struktur. Der zu definierende Ausdruck wird durch ein dt-Element gekennzeichnet. Das ist im Endeffekt der Definitionsbegriff. Die Definitionsbeschreibung wiederum wird über das dd-Element angegeben.
Eine Verschachtelung von Definitionslisten ist übrigens ebenfalls möglich. Das funktioniert dann genauso, wie das bei den anderen Listenvarianten gezeigt wurde.
Wie die Definitionslisten standardmäßig aussehen, wird wieder durch die Browser bestimmt. Letztendlich könnt ihr dann aber über CSS das gewünschte Layout selbst festlegen.
In früheren HTML-Versionen gab es übrigens noch Menü- und Verzeichnislisten. Verwendet wurden dafür die beiden Elemente menu und dir. Das dir-Element ist in HTML5 nicht mehr enthalten. Anders sieht es mit menu aus. Dieses Element wurde neu implementiert und soll künftig für Kontextmenüs und Toolbars verwendet werden können. Hier ein Beispiel dafür, wie sich das W3C eine typische menu-Anwendung vorstellt:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
Momentan wird das in dieser Form allerdings noch von keinem Browser unterstützt.
Daher sollte menu zum jetzigen Zeitpunkt auch noch nicht eingesetzt werden.
Listen gestalten
Ein Hinweis noch zu den Listen. Auf vielen Webseiten wird für die Gestaltung von Listen auf entsprechende HTML-Attribute gesetzt. So kann man beispielsweise über <ul type="square"> dafür sorgen, dass vor den Einträgen der Aufzählungslisten Rechtecke angezeigt werden.
Ebenso lässt sich für nummerierte Listen die Art der Nummerierung festlegen.
<ol type="A">
Hier gilt aber, dass man eben nicht alles einsetzen sollte, was angeboten wird. Besser geeignet sind die entsprechenden CSS-Eigenschaften. Ihr solltet diese also tatsächlich nutzen, um die Listen euren Wünschen gemäß anzupassen. Ausführliche Informationen zu CSS folgen im Rahmen dieser Reihe.
