HTML Erste Schritte – Lektion 3 – Listen-Tags ul, ol. Attribute von HTML-Tags.
Listen werden auf Websites sehr häufig verwendet: in Menüs oder im Text zur Aufzählung. Beginnen wir mit der beliebtesten Art, der ungeordneten Liste <UL></UL> (unordered list – ungeordnete Liste).
UL-Liste
Die UL-Liste wird für Menüs oder Aufzählungen mit Aufzählungszeichen verwendet. Über HTML kann man auch die Art der Aufzählungszeichen bestimmen.
Ändern wir unseren HTML-Code so:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<ul>
</ul>
</body>
</html>
Im Dokument wird nur die Überschrift angezeigt, da die Liste leer ist. Fügen wir einige Listenelemente hinzu. Für Listenelemente verwendet man die Tags <LI></LI> (list item – Listeneintrag):
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
</body>
</html>
Jetzt wird eine Aufzählung mit Aufzählungszeichen angezeigt. Die Art des Aufzählungszeichens kann über Attribute des <UL>-Tags geändert werden.
Attribute von HTML-Tags
Das UL-Tag hat, wie oben erwähnt, Attribute. Alle HTML-Tags können Attribute haben. Attribute steuern z.B. Farbe, Größe, Form etc. Für UL kann man z.B. den Aufzählungstyp festlegen: Kreis, hohler Kreis, Quadrat.
Attribute werden so geschrieben:
<tag attribut="wert">
Für UL heißt das Attribut type:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<ul type="square">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
</body>
</html>
Wenn Sie die Seite im Browser aktualisieren, sehen Sie, dass die Liste jetzt mit Quadraten als Aufzählungszeichen dargestellt wird (square = Quadrat). Man kann auch hohle Kreise verwenden:
<ul type="circle"> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> </ul>
Sie können unterschiedliche Aufzählungszeichen in einer Liste verwenden, indem Sie auch für einzelne <li>-Tags ein type-Attribut setzen:
<ul type="circle"> <li>Erster Punkt</li> <li type="square">Zweiter Punkt</li> <li>Dritter Punkt</li> </ul>
Standardmäßig verwenden UL und LI das Aufzählungszeichen disc (gefüllter Kreis):
<ul type="disc"> <li>Erster Punkt</li> <li type="square">Zweiter Punkt</li> <li>Dritter Punkt</li> </ul>
Wenn Sie das Attribut type im UL-Tag weglassen, passiert Folgendes:
<ul> <li>Erster Punkt</li> <li type="square">Zweiter Punkt</li> <li>Dritter Punkt</li> </ul>
Jetzt machen wir alle drei Listeneinträge mit unterschiedlichen Aufzählungszeichen:
<ul> <li type="disc">Erster Punkt</li> <li type="square">Zweiter Punkt</li> <li type="circle">Dritter Punkt</li> </ul>
Nun wissen Sie, wo man Attribute schreibt. Weiterhin werden wir noch viele verschiedene Attribute kennenlernen.
OL-Listen
Das OL-Tag (ordered list – geordnete Liste) ist nicht so verbreitet wie UL, wird aber häufig verwendet, wenn eine Reihenfolge wichtig ist, z.B. bei Ablaufbeschreibungen, Chronologien oder nummerierten Listen.
<ol> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> </ol>
Auch OL hat ein type-Attribut, dessen Werte sich von denen bei UL unterscheiden:
- type="A" – Großbuchstaben (A, B, C...)
- type="a" – Kleinbuchstaben (a, b, c...)
- type="I" – Großrömische Zahlen (I, II, III...)
- type="i" – Kleinrömische Zahlen (i, ii, iii...)
- type="1" – Arabische Zahlen (1, 2, 3...), Standardwert
Probieren Sie verschiedene Werte für das type-Attribut bei OL aus. Hier ein Beispiel:
<ol type="i"> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> <li>Vierter Punkt</li> </ol>