4. HTML-Kurs - Mit Listen arbeiten (1)
Listen sind in der Website-Gestaltung mit CSS ein wichtiges Gestaltungsmittel (Stichwort Box-Modell), aber auch in reinem HTML sind sie wichtig, um Aufzählungen einfach zu formatieren. Unterschieden wird dabei zwischen nummerierten Listen, Aufzählungslisten und Definitionslisten, wobei nummerierte Listen auch geordnete Listen und Aufzählungslisten ungeordnete Listen genannt werden.
4.1 Nummerierte Listen
Der HTML-Code für eine Liste besteht generell aus einem Listenkopf und einem Listenkörper. Im Listenkopf wird definiert, welche Listenart genutzt werden soll (also nummerierte Liste, Aufzählungsliste oder Definitionsliste). Der Listenkörper wird immer gleich definiert.
Der Code für den Listenkopf einer nummerierten Liste ist: <ol> </ol>. Zwischen dem öffnenden Tag und dem abschließenden Tag werden die einzelnen Listenpunkte des Listenkörpers eingefügt, welche mit <li> Inhalt </li> definiert werden
Zusammenhängend sieht der Code wie folgt aus:
<html> <head> <title>Nummerierte Listen</title> </head> <body> <ol> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> </body> </html>
Und in der Ausgabe sieht es wie in dieser Datei aus: klick!
Nur was macht man, wenn man die nummerierte Liste nicht mit 1 starten lassen möchte, sondern z.B. mit 4? Auch dafür gibt es in HTML eine Lösung: man gibt im Listenkopf die gewünschte Startnummer mit dem zugehörigen "start"-Befehl ein. Der Quellcode dafür sieht so aus:
<html> <head> <title>Nummerierte Listen</title> </head> <body> <ol start=4> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> </body> </html>
Und in der Ausgabe sieht es wie in dieser Datei aus: klick!
Möchte man die Aufzählung nun nicht mit Ziffern, sondern mit Buchstaben fortlaufend gestalten oder aber mit römischen Ziffern, kommt das Attribut type ins Spiel. Beispiel:
<html> <head> <title>Nummerierte Listen</title> </head> <body> <p>Alphanumerische Listen in Kleinbuchstaben</p> <ol type=a> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> <p>Alphanumerische Listen in Großbuchstaben</p> <ol type=A> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> <p>Römische Nummerierung in Kleinbuchstaben</p> <ol type=i> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> <p>Römische Nummerierung in Großbuchstaben</p> <ol type=I> <li>Dies ist Listenpunkt eins</li> <li>Dies ist Listenpunkt zwei</li> <li>Dies ist Listenpunkt drei</li> </ol> </body> </html>
Und so sieht es in der Ausgabe aus: klick!