Listenarten
Listen
Grundsätzlich kann zwischen ungeordneten und geordneten Listen unterschieden werden:
| ungeordnete Liste | geordnete Liste |
|
|
| 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.
|
|
|
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:
|
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:
|
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 :
|
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
erster Eintrag- zweiter Eintrag
- dritter 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>