Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

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
  1. 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>

  2. 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:

Abbildung 3.5: Ungeordnete Liste im Browserfenster
Abb. 3.5: Ungeordnete Liste im Browserfenster

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:

Abbildung 3.6: Nummerierung im Browserfenster
Abb. 3.6: Nummerierung im Browserfenster