Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
3.7 Listen: Aufzählungen und Nummerierungen
Geordnete und ungeordnete Listen sind ein wichtiges Stilmittel zur Strukturierung von Text auf Webseiten.
Aufzählungen: ungeordnete Listen mit ul und li
Eine Aufzählung besteht in HTML aus zwei Elementen:
- <ul> und </ul> kennzeichnen Beginn und Ende der Aufzählung.
- <li> und </li> markieren jedes Listenelement innerhalb der Aufzählung.
ul steht übrigens für »unordered list«, zu Deutsch »ungeordnete Liste«.
ToDo: Eine Aufzählung (ungeordnete Liste) erstellen
- Erstellen Sie folgende ungeordnete Liste unterhalb der (im Buch auf Seite 63 eingefügten) zwei Absätze und innerhalb von #textbereich:
<ul>
<li>So funktioniert HTML</li>
<li>Wichtige HTML-Elemente</li>
<li>Gestalten mit CSS</li>
</ul> - Speichern Sie die Seite und betrachten Sie sie in einem Browser.
<ul> sagt dem Browser: »Hier beginnt eine ungeordnete Liste.« Zwischen <li> und </li> stehen dann die einzelnen Listenelemente, bevor die Liste mit </ul> beendet wird.
Und so sieht die Aufzählung im Browserfenster aus:
Beachten Sie, dass im HTML nichts über das zu verwendende Aufzählungszeichen steht. Der Quelltext sagt, dass der Text eine Aufzählung ist, aber nicht, wie sie aussieht. Das wird momentan dem eingebauten Stylesheet des Browsers überlassen.
Ungeordnete Listen als Grundlage für die Navigation
Ungeordnete Listen bilden oft die Grundlage für die Navigation. Im Buch erstellen Sie auf Seite 77 eine HTML-Navigationsliste für die Beispielseiten, die Sie per CSS zuerst horizontal (Seite 175) und dann später vertikal (ab Seite 302) gestalten.
Nummerierungen: geordnete Listen mit ol und li
Geordnete Listen (»Ordered lists«) sind besser bekannt als Nummerierungen. Der Aufbau ist identisch mit ungeordneten Listen, lediglich das ul wird durch ol ersetzt:
<ol>
<li>So funktioniert HTML</li>
<li>Wichtige HTML-Elemente</li>
<li>Gestalten mit CSS</li>
</ol>
Zwei Buchstaben geändert, und schon ist eine Aufzählung eine Nummerierung:
