Ein bisschen mehr Ordnung: Listen

In diesem Kapitel soll es darum gehen, wie man durch Einsatz von nummerierten und nicht nummerierten Listen mehr Ordnung in Internetseiten bringen kann. Listen bieten die Möglichkeit, die Informationen auf der Seite zu strukturieren, die Informationen können so vom Leser schneller überblickt werden.

Themen in diesem Kapitel:

Nummerierte Listen
Aufzählungslisten
Definitionslisten
Verschachtelte Listen
Verwendung von Bildern als Aufzählungszeichen
Fragen und Aufgaben

1. Nummerierte Listen

Nummerierte Listen werden mit <OL> eingeleitet und mit </OL> beendet (engl. "ordered list" = geordnete Liste). Die einzelnen Listeneinträge, d.h. die Aufzählungspunkte, werden mit <LI> begonnen und mit </LI> abgeschlossen, jedes wird vom Browser automatisch mit einer Zahl versehen (1., 2., 3., usw.).
Der Quellcode sieht dann insgesamt so aus:

<OL>

              <LI> Listeneintrag 1 </LI>

              <LI> Listeneintrag 2 </LI>

              <LI> Listeneintrag 3 </LI>

              </OL>

Parameter für nummerierte Listen

Die Nummerierung ist nicht auf arabische Ziffern beschränkt, möglich sind auch Buchstaben und römische Zahlen. Außerdem kann man festlegen, mit welcher Zahl bzw. welchem Buchstaben die Liste beginnen soll.
Hierfür gibt es folgende Parameter:

<OL TYPE="a">: Nummerierung in Kleinbuchstaben
<OL TYPE="A">: Nummerierung in Großbuchstaben
<OL TYPE="i">: Nummerierung in kleinen römischen Zahlen
<OL TYPE="I">: Nummerierung in großen römischen Zahlen
<OL START="x">: Nummerierung beginnend mit "x"

Weiterhin kann die Art der Nummerierung auch innerhalb einer Liste variiert werden, denn auch für die Listenelemente <LI> gibt es Parameter:
<LI TYPE="a/A/i/I">: Nummerierung des einzelnen Elements in Kleinbuchstaben usw.

Außerdem kann man auch mitten in der Liste von einem anderen Wert an weitergezählt werden, z.B. 1, 2, 3, 10, 11, 12... Der Quelltext hierfür lautet:
<LI VALUE="x">, wobei für x der neue Wert (z.B. 10) eingesetzt wird.

2. Aufzählungslisten

Der einzige Unterschied zu den nummerierten Listen besteht darin, dass Aufzählungslisten ("unordered lists") mit dem Tag <UL> begonnen und mit </UL> beendet werden. Die einzelnen Listeneinträge werden wie gehabt mit <LI> gekennzeichnet.

Bei Aufzählungslisten sind folgende Parameter möglich:

<UL TYPE="disc">: ausgefüllter Punkt als Aufzählungszeichen
<UL TYPE="square">: ausgefülltes oder leeres Quadrat als Aufzählungszeichen
<UL TYPE="circle">: Kringel (leerer Punkt) als Aufzählungszeichen

Diese Modifizierung funktioniert auch bei einzelnen Listenelementen:
<LI TYPE="disc/square/circle"> bewirkt bestimmte Aufzählungszeichen bei einem Listeneintrag (IE) oder bei allen folgenden Listeneinträgen (Netscape).

3. Definitionslisten

Definitionslisten dienen z.B. zur Erstellung eines Glossars. Sie werden mit <DL> begonnen und mit </DL> beendet. Die einzelnen Listeneinträgen bestehen aus zwei Teilen:
<DT> leitet den zu erklärenden Begriff ("definition term") ein, <DD> die Erklärung ("definition definition") dazu.

Insgesamt sieht der Quelltext so aus:
<DL> <DT> Begriff 1 <DD> Erklärung zu Begriff 1 <DT> Begriff 2 <DD> Erklärung zu Begriff 2 </DL>

Normalerweise stehen im Browser-Fenster Begriff und Erklärung in zwei Zeilen, wobei die Erklärung eingerückt ist (siehe hierzu folgendes Beispiel). Dies lässt sich mit dem Tag <DL COMPACT> so ändern, dass Begriff und Erklärung in einer Zeile stehen (funktioniert nur für kurze Begriffe und nicht bei allen Browsern).

4. Verschachtelte Listen

Listen können auch ineinander verschachtelt werden (Liste in der Liste in der Liste...). Hierfür setzt man in der ersten Liste hinter einen Listeneintrag eine weitere Liste ein (mit <OL>, <UL> oder <DL>).Der Browser wechselt hier bei Aufzählungslisten das Aufzählungszeichen.

Beispiel:
<UL> <LI> Listeneintrag 1 </LI> <LI> Listeneintrag 2 </LI> <OL> <LI> Erster Eintrag in Liste 2 </LI> <LI> Zweiter Eintrag in Liste 2 </LI> </OL> <LI> Listeneintrag 3 </LI> </UL>

Und hier gibt es eine verschachtelte Liste zum Anschauen

5. Verwendung von Bildern als Aufzählungszeichen

Für farbenfrohere Listen kann man auch Bilder als Aufzählungszeichen verwenden. Hierfür gibt es zwei Möglichkeiten, von denen die eine hier besprochen werden soll und die andere bei den Style Sheet-Anweisungen im Rahmen des Kapitels Cascading Style Sheets.
Bei der hier besprochenen Variante handelt es sich strenggenommen um keine richtige Liste. Zwar wird sie mit <UL> eingeleitet und dementsprechend mit </UL> beendet, die einzelnen Listeneinträge werden jedoch nicht mit <LI> gekennzeichnet, sondern bestehen aus dem gewünschten Bild, dem Text des Eintrags und einem Zeilenumbruch <BR> (das Tag <UL> bewirkt in diesem Falle nur, dass die Liste wie üblich eingerückt wird). Insgesamt sieht das Ganze im Quelltext so aus:

<UL>

        <IMG SRC="blueball.gif"> Listeneintrag 1 <BR>

        <IMG SRC="blueball.gif"> Listeneintrag 2 <BR>

        <IMG SRC="blueball.gif"> Listeneintrag 3 <BR>

    </UL>

Und hier gibt es die Liste zum Anschauen

6. Fragen und Aufgaben

Welche Arten von Listen gibt es in HTML?
Dieses Rezept für Marmorkuchen ist ein bisschen durcheinander geraten. Ordne die einzelnen Schritte und gestalte das Rezept mit Hilfe von Listen neu (dazu das Dokument im Editor laden und ändern).

So, zum Abschluss unserer ersten Seite fehlen uns noch immer Links, denn was für einen Sinn hat eine Seite, von der man nicht mehr wegkommt. Mehr dazu im folgenden Kapitel: Wie komme ich wieder weg von der Seite? - Verweise