Listen

Listen sind ein wichtiges Gestaltungsmittel zur Strukturierung von Text.

Ungeordnete Listen <ul>

Eine Liste besteht aus zwei Elementen:

Geordnete Listen <ol>

Geordnete Listen ("Ordered Lists"), besser bekannt als nummerierte Listen, sind fast identisch. Sie bestehen ebenfalls aus zwei Elementen:

  1. <ol> und </ol> markieren die Liste selbst
  2. <li> und </li> kennzeichnen die einzelnen Listenelemente

Verschachtelte Listen

Listen können, wie alle HTML-Elemente, ineinander verschachtelt werden:

Sehen Sie sich zu den Listen am besten den Quellcode an.

Häufig werden Navigationsmenüs auf der Basis einer ungeordneten Liste erstellt, denn letztendlich sind sie nicht mehr als eine Liste von Hyperlinks.

Fügen Sie in Ihrem HTML-Dokument folgendes in den NAVI-Bereich:

<ul>
  <li><a href="index.htm">Home</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
</ul>

... und schon haben Sie eine Navigation. Die sieht natürlich noch nicht besonders schön aus, aber sie funktioniert. Sie würde jedenfalls funktionieren, wenn es die Kontaktseite schon gäbe. Und um das Aussehen kümmert sich später CSS.

... und noch 'ne Kopf- und Fußzeile

NAVI und CONTENT haben ihren Inhalt, HEADER und FOOTER fehlen noch.

Fügen Sie in den HEADER eine Überschrift ein (nicht in den <head>!)

<div id="header">
  <h1>csskiste.de</h1>
  <h2>Webseiten gestalten mit CSS</h2>
</div>

... und in den FOOTER z.B. einen Copyrighthinweis oder Ihre Adresse.

<div id="footer">
  <p>&copy; 2008 csskiste</p>
</div>

Öffnen Sie Ihr Dokument in einem Browser. So sollte Ihre Seite nun aussehen.