Listenarten

Listen

Grundsätzlich kann zwischen ungeordneten und geordneten Listen unterschieden werden:

ungeordnete Liste geordnete Liste
  • Dies ist eine ziemlich
  • ungeordnete Liste.
  1. Dies ist eine geordnete Liste.
  2. Die einzelnen Listenpunkte
  3. werden durchnummeriert.
Q U E L L C O D E
<ul>
<li> Dies ist eine ziemlich</li>
<li> ungeordnete Liste.</li>
</ul>		 <ol>
<li> Dies ist eine geordnete Liste.</li>
<li> Die einzelnen Listenpunkte</li>
<li> werden durchnummeriert.</li>
</ol>

Erläuterung :

  • Die ganze Liste wird innerhalb des <ul> </ul> - bzw. <ol> </ol> - Tags definiert (ul=unordered list , ol=ordered list).
  • jeder einzelne Listenpunkt wird innerhalb eines <li> </li> - Tags definiert (li=list item).

Im Folgenden wird noch auf die Darstellung der Listenpunkte eingegangen:

ungeordnete Listen

Die Gestalt der Listenpunkte lässt sich durch geeignete Attribute noch verändern. Dabei spielt vor allem das Attribut type= eine Rolle. Bei ungeordneten Listen sind neben dem voreingestellten Wert disc noch circle und square zugelassen.

  • [disc]
  • [circle]
  • [square]

Das type- Attribut lässt sich auf beide Tags (<ul> und <li>) anwenden:

Beispiel:

<ul type="circle">
<li> Eine Liste</li>
<li> mit type="circle" im <ul>- Tag .</li>
</ul>
<ul>
<li type="circle">Noch eine Liste .</li>
<li type="disc">Diesmal mit individuelleren</li>
<li type="square"> Bezeichnern.</li>
</ul>
ergibt:
  • Eine Liste
  • mit type="circle" im <ul>- Tag.
  • Noch eine Liste.
  • Diesmal mit individuelleren
  • Bezeichnern.

geordnete Listen

Auf geordnete Listen lässt sich ebenfalls das type - Attribut anwenden. Erlaubte Werte sind hier a, A , i und I.

a: Liste wird alphabetisch numeriert, mit Kleinbuchstaben.
A: Liste wird alphabetisch numeriert, mit Grossbuchstaben.
i & I: analog wie a und A, aber mit römischer Numerierung.

Beispiel:

<ol type=i>
<li>Eine Liste mit römischer Numerierung.</li>
<li> Zweiter Listenpunkt.</li>
</ol>
ergibt:
  1. Eine Liste mit römischer Numerierung.
  2. Zweiter Listenpunkt.

Mit dem Attribut start wird mit der Numerierung von einem bestimmten Punkt aus begonnen:

Beispiel :

<ol start=120>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
</ol>
ergibt :
  1. Erster Eintrag
  2. Zweiter Eintrag

Liste in der Liste
  • erster Eintrag
  • zweiter Eintrag
    • dritter Eintrag
    • vierter Eintag
  • fünfter Eintrag

Liste in der Liste
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<ul>
<li>dritter Eintrag</li>
<li>vierter Eintag</li>
</ul>
<li>fünfter Eintrag</li>
</ul>

Es gibt darüber hinaus die Möglichkeit eigene Bilder als Bullets zu verwenden

bullet.jpgerster Eintrag
bullet.jpgzweiter Eintrag
bullet.jpgdritter Eintrag

Quelltext:

<dl>
<dd><img src="/bilder/bullet.jpg" alt="bullet.jpg" hspace="10">erster Eintrag</dd>
<dd><img src="/bilder/bullet.jpg" alt="bullet.jpg" hspace="10">zweiter Eintrag</dd>
<dd><img src="/bilder/bullet.jpg" alt="bullet.jpg" hspace="10">dritter Eintrag</dd>
</dl>