Listen

In diesem Kapitel lernt Ihr
Der Unterschied zwischen Auflistungen und Aufzählungen

Auflistungen und Aufzählungen sind einfache Mittel Unterteilungen zu erzeugen. Dabei ist die Struktur klar geordnet. Hier mal zwei Beispiele:

  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
Das obere Beispiel ist eine Auflistung. Das erkennt man daran, dass nur ein Punkt vor den Listenpunkten steht als Untergliederungsmittel. In HTML bezeichent man solche Listen als Unordered List. Darunter ist nicht die Unordnung zu verstehen, sondern das Fehlen einer Nummerierung. Das Tag dafür ist: <ul></ul>

Das untere Beispiel zeigt eine Aufzählung. Da sind die Listenpunkte nummeriert. In HTML nennt man diese Art der Liste Ordered List, da eine Nummerierung vorhanden ist. Das Tag dafür ist: <ol></ol>

Die Listenpunkte selbst werden mit dem Tag <li></li> gekennzeichnet. LI steht für List Item, also Listen-Gegenstand.

Man kann auch die verschiedenen Textformatierungen für die einzelnen Listenpunkte verwenden, ebenso wie Hyperlinks und Grafiken.

Wie erstellt man Auflistungen?

Die Auflistung steht zwischen den Tags <ul></ul>. Die Listenpunkte selbst werden mit dem Tag <li></li> gekennzeichnet.

Beispiel:
<ul>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
 Das Ganze sieht im Browser dann so aus:

Um einer Liste eine Überschrift zu geben benutzt man die Überschriftentags und erstellt darunter die Liste.

Man kann auch die Art der vorangestellten Punkte ändern, indem man das Attribut type verwendet. Man kann die folgenden Aufzählungszeichen verwenden:
<ul type="square">
<ul type="circle">
<ul type="disc">
Beispiel:
<ul type="square">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Sieht im Browser so aus:
<ul type="circle">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Sieht im Browser so aus:
<ul type="disc">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ul>
Sieht im Browser so aus:

Wie erstellt man Aufzählungen?

Für die Aufzählungen gilt dasselbe wie für die Auflistungen. Nur dass hier die Listenpunkte zwischen den Tags <ol></ol> stehen.

Auch hier kann man mit dem Attribut type die Art der Aufzählung verändern. Man kann numerisch mit 1.2.3., aber auch mit Groß- oder Kleinbuchstaben durchnummerieren. Mit römischen Zahlen in Groß- und Kleinschreibung geht´s natürlich auch.

Beispiel:
<ol type="a">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:

  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
<ol type="A">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
<ol type="I">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
<ol type="i">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt

Es besteht außerdem die Möglichkeit einen Startpunkt für die Liste festzulegen, so dass sie z.B. erst bei 4 losgeht. Dazu benutzt man das Attribut start="..."

Beispiel:

<ol type="i" start="4">
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
Man kann auch Nummern auslassen. Das ist gar kein Problem. Dazu erweitert man das <li>-Tag um das Attribut value="..."

Beispiel:
<ol>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li value="8">Listenpunkt 3-7 fehlt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt 3-7 fehlt
  4. Listenpunkt
Wie verschachtelt man Listen?

Man kann auch in bereits vorhandene Listen noch Unterlisten einfügen. Man muss nur in das entsprechende <li>-Tag noch eine andere Liste einbauen. Dabei ist es egal welcher Art diese Liste ist.

Beispiel:
<ol type="I">
<li>Listenpunkt</li>
<li>Listenpunkt
</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>
Sieht im Browser so aus:
  1. Listenpunkt
  2. Listenpunkt
    1. Unter-Listenpunkt
    2. Unter-Listenpunkt
    3. Unter-Listenpunkt
    4. Unter-Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
Was sind Definitionslisten und wie erstellt man sie?

Definitionslisten sind dazu da, um Glossare zu erstellen. Ein Glossar ist eine Auflistung von Begriffen, welche in den Einträgen der Liste erörtert werden. Das Tag für eine Definitionsliste ist <dl></dl>. Das Tag für den zu erklärenden Begriff ist <dt></dt>. Das Tag für die Erklärung selbst ist <dd></dd>.

Beispiel:
<dl>HTML-Tags
<dt>img</dt>
<dd>Einbinden von Grafiken</dd>
<dt>src</dt>
<dd>Angabe der Quelle der Datei, die angezeigt werden soll. Die Pfadangabe kann relativ oder absolut erfolgen</dd>
<dt>font</dt>
<dd>Formatierungsangaben zu Schriftart, Größe und Farbe</dd> 
</dl>

Sieht im Browser so aus:
HTML-Tags
img
Einbinden von Grafiken
src
Angabe der Quelle der Datei, die angezeigt werden soll. Die Pfadangabe kann relativ oder absolut erfolgen
font
Formatierungsangaben zu Schriftart, Größe und Farbe



© by Benjamin Hofmann