Aufzählungen

Für Aufzählungen und nummerierte Listen gibt es in HTML mehrere Befehle. Wenden wir uns zunächst den einfachen Listen zu. Aufzählungen können Sie in Form von Listen darstellen, deren einzelne Einträge durch Punkte markiert sind. Dabei kann zwischen verschiedenen Punktformen gewählt werden. Solche Listen zeigen wir Ihnen in dem folgenden Beispiel.

Sehen Sie sich zunächst den Quellcode an.

<h2>Einfache Listen durch Punkte markiert</h2>
<p>
Folgende Punkte sind wichtig:
</p>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
<li>Vierter Punkt</li>
</ul>
<p>
Weitere Möglichkeit:
</p>
<ul type=circle>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
<p>
Nächstes Beispiel:
</p>
<ul type=square> <li>Punkt eins</li>
<li>Punkt zwei</li>
<li>Punkt drei</li>
</ul>
<p>
Letztes Beispiel:
</p>
<ul type=disc>
<li>Punkt eins</li>
<li>Punkt zwei</li>
<li>Punkt drei</li>
</ul>

Und nun sehen Sie sich die Beispiele als HTML-Seite an. Wenn Sie eine der Aufzählungen übernehmen wollen, müssen Sie sich nur den Quellcode kopieren und in Ihre Seite einfügen. Doch sehen Sie sich zuerst die Listen an.

Einfache Listen durch Punkte markiert

Folgende Punkte sind wichtig:

Erster Punkt
Zweiter Punkt
Dritter Punkt
Vierter Punkt

Weitere Möglichkeit:

Erster Punkt
Zweiter Punkt
Dritter Punkt

Nächstes Beispiel:

Punkt eins
Punkt zwei
Punkt drei

Letztes Beispiel:

Punkt eins
Punkt zwei
Punkt drei

Wenn Sie sich die Seite genau angesehen haben werden Sie merken, dass sich das erste und das letzte Beispiel gleichen. Im ersten Beispiel haben wir keine genaue Auflistungsart bestimmt und im letzten Beispiel haben wir als Auflistung ausgefüllte Kreise gewählt.
Wenn Sie in HTML keine genaue Auflistungsart aussuchen, wählt der Browser eine Art aus. Wenn Sie es also nicht auf den Zufall verlassen wollen, legen Sie die Auflistungsart vorher fest.

Die Art wird dem <ul> mit dem Befehl "type" zugeordnet wie im vorangegangen Beispiel. Wie gesehen haben Sie folgende Möglichkeiten.

circle (offener Kreis)
square (geschlossenes Quadrat)
disc (geschlossener Kreis [Standard])

Natürlich kann es notwendig werden eine Reihe oder Rangfolge darzustellen. Hierzu verwenden Sie die Befehle zur Nummerierung von Listen.

Für nummerierte Listen , müssen Sie nur den Befehl <ul> mit dem Befehl <ol> vertauschen. Ansonsten machen Sie alles wie im ersten Beispiel.
Sehen Sie sich nun folgenden Quelltext an.

<h2>Nummerierte Listen</h2>
<p>
Erste Nummerierung
</p>
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
<li value=99>etc.</li>
</ol>
<p>
Zweite Nummerierung
</p>
<ol type="a">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ol>
<p>
Letzte Nummerierung in römischen Zahlen
</p>
<ol start="1994" type="I">
<li>1994</li>
<li>1995</li>
<li>1996</li>
</ol>

Sehen Sie sich nun die Webseite zum Quelltext an:

Nummerierte Listen

Erste Nummerierung

Erster Punkt
Zweiter Punkt
Dritter Punkt
etc.

Zweite Nummerierung

Erster Punkt
Zweiter Punkt
Dritter Punkt

Letzte Nummerierung in römischen Zahlen

2000
2001
2002

Es gibt bei nummerierten Listen weitere Möglichkeiten der Formatierung.

Die laufende Nummer kann durch das Attribut value jederzeit neu definiert werden. Die Nummer wird hinter dem Befehl <ol> mit dem Attribut start="Hier steht die Zahl bei der Sie beginnen wollen" festgelegt.
Sie können die Nummerierung natürlich auch alphabetisch durchführen. Geben Sie dazu hinter <ol> type="a" ein. Dann lautet die Nummerierung a, b, c, ..., wenn Sie "A" eingeben lautet die Nummerierung A, B, C, ... .
Es können auch hier mehrere Attribute miteinander kombiniert werden. Wenn Sie beispielsweise type="I" einsetzen, so nummeriert der Browser in römischen Zahlen, angefangen bei der Zahl die Sie bei start="..." festgelegt haben. Erwarten Sie jedoch keine Wunder, wenn Sie in römischen Zahlen verwenden wollen, funktioniert das ab der Zahl 1 noch ganz gut. Wenn Sie jedoch höhere Zahlen wie z.B. 1994 nehmen, bekommen Sie ein kleines Platzproblem.

Eine weitere Möglichkeit für Auflistungen bietet der Befehl <DL> (Definition List). Hier zunächst der Quelltext:

<h2>Erklärungen</h2>
<DL>
<DT>HTML</DT>
<DD>Hypertext Markup Language<DD>
<DT>WWW</DT>
<DD>World Wide Web<DD>
<DT>FTP</DT>
<DD>File transfer protocol<DD>
</DL>
<DL COMPACT>
<DT>-b</DT>
<DD>Macht den Text fettgedruckt</DD>
<DT>-i</DT>
<DD>Der Text wird kursiv dargestellt.</DD>
<DT>-u</DT>
<DD>Der Text wird unterstrichen gezeigt</DD>
</DL>

Und so sieht die dazugehörige HTML-Seite dazu aus:

Erklärungen

HTML: Hypertext Markup Language
WWW: World Wide Web
FTP: File transfer protocol

-b: Macht den Text fettgedruckt
-i: Der Text wird kursiv dargestellt.
-u: Der Text wird unterstrichen gezeigt

In der ersten Liste sind die zu erklärenden Begriffe so lang, dass die Erklärungen dazu eingerückt in der nächsten Zeile stehen. In der zweiten Liste sind die Begriffe so kurz, dass Sie in einer Zeile Platz finden.
Die Befehle für solche Definitionslisten fangen mit <DL> an und enden mit </DL>. Vor jeden Begriff wird <DD> und nach jeden Begriff </DD> gesetzt.
Allgemein ist noch wichtig, dass Listen jederzeit auch verschachtelt werden können. Dazu müssen einfach die entsprechenden Befehle mehrfach verwendet werden. Hierzu das letzte Beispiel:

<h3>Geschachtelte Listen</h3>
<ul>
<li>Liste 1</li>
   <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
   </ul>
</li>
<li>Liste 2</li>
   <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
   </ul>
</li>
<li>Liste 3</li>
   <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
   </ul>
</li>
</ul>

Und nun sehen Sie sich die Webseite dazu an:

Geschachtelte Listen

Liste 1

Punkt 1
Punkt 2

Liste 2

Punkt 1
Punkt 2

Liste 3

Punkt 1
Punkt 2

Die abschließend folgenden farbigen Punkte werden durch eine Definition in "font" erzeut: Quelltext Beispiel:

<p>
<font face="verdana,arial,helvetica" size=3>
<font color="#009900">  <font color="#000000">Eintrag 1<br>
<font color="#BB0000">  <font color="#000000">Eintrag 2<br>
<font color="#000099">  <font color="#000000">Eintrag 3<br>
<p><hr><p>

Es folgen nun noch Beispiele zu farbigen Aufzälungspunkten.

Aufzählung mit farbigen Listenbullets:

• Eintrag 1
• Eintrag 2
• Eintrag 3

Aufzählung mit farbigen Listenbullets:

• Eintrag 1
• Eintrag 2
• Eintrag 3

Aufzählung mit farbigen Listenbullets:

• Eintrag 1
• Eintrag 1
• Eintrag 1

Mit mehreren   erzwingen Sie Leerzeichen für größere Abstände. Hier waren es fünf  .