Aufzählungen und Listen
Um Aufzählungen und Listen zu erstellen gibt es die Elemente <dl>
für unnummerierte
Listen, <ul>
für Listenpunkte und <ol>
für nummerierte Listen
<dl> Unnummerierte Listen </dl>
Die Elemente <dl>...</dl>
(dl = definition list = Definitionsliste)
geben an, wo die Liste beginnt, und wo aufhört. Mit
<dt>...</dt>
(dt = definition (list) term = Ausdruck in der Definitionsliste) kann eine Überschrift zur Liste eingegeben werden. Die Elemente
<dd>...</dd>
(dd = definition (list) definition = Definition in der Definitionsliste) geben die Listenpunkte an.
Code | Ausgabe |
<dl>
<dt>Überschrift der Liste</dt>
<dd>Listenpunkt 1</dd>
<dd>Listenpunkt 2</dd>
</dl>
|
- Überschrift der Liste
- Listenpunkt 1
- Listenpunkt 2
|
<ul> Listenpunkte </ul>
Die Elemente <ul>...</ul>
(ul = unordered list = unsortierte Liste)
geben an, wo die Liste beginnt, und wo aufhört. Die Elemente <li>...</li>
(li = list item = Listeneintrag) geben die Listenpunkte an.
Code | Ausgabe |
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
|
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
CSS-Listen
Mit CSS-Stylesheets können Listenpunkte in verschiedenen Formen dargestellt werden.
Code | Ausgabe |
<ul style="list-style-type:disc">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
|
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
<ul style="list-style-type:circle">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
|
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
<ul style="list-style-type:square">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
|
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
<ul style="list-style-type:none">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
|
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Aufzählungen
Auch nummerische Listen können Dargestellt werden:
Code | Ausgabe |
Nummerische Liste
<ol style="list-style-type:decimal">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Nummerische Liste
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Kleine Römische Zahlen
<ol style="list-style-type:lower-roman">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Kleine Römische Zahlen
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Große Römische Zahlen
<ol style="list-style-type:upper-roman">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Große Römische Zahlen
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Liste mit kleinen Buchstaben
<ol style="list-style-type:lower-alpha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Liste mit kleinen Buchstaben
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Liste mit großen Buchstaben
<ol style="list-style-type:upper-alpha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Liste mit großen Buchstaben
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Des weiteren gibt es neuere Listenpunkte, die jedoch zur Zeit nur von Netscape ab Version 6.1 unterstützt wird:
Code | Ausgabe |
Griechische Buchstaben
<ol style="list-style-type:lower-greek">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Griechische Buchstaben
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Hebräischen Buchstaben
<ol style="list-style-type:hebrew">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Hebräischen Buchstaben
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
mit führender 0
<ol style="list-style-type:decimal-leading-zero">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
mit führender 0
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
ideographischen Zeichen
<ol style="list-style-type:cjk-ideographic">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
ideographischen Zeichen
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Japanisch
<ol style="list-style-type:hiragana">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Japanisch
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Japanisch
<ol style="list-style-type:katakana">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Japanisch
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Japanisch
<ol style="list-style-type:hiragana-iroha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Japanisch
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Japanisch
<ol style="list-style-type:katakana-iroha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>
|
Japanisch
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
|
Listeneinrückung
Um zu bestimmen, um mehrzeilige Listen einzurücken, benutze den Stylesheet list-style-position
Code | Ausgabe |
<ol style="list-style-type:decimal;
list-style-position:inside">
<li>Listenpunkt 1<br>
zweite Zeile</li>
<li>Listenpunkt 2<br>
zweite Zeile</li>
<li>Listenpunkt 3<br>
zweite Zeile</li>
</ol>
|
- Listenpunkt 1
zweite Zeile
- Listenpunkt 2
zweite Zeile
- Listenpunkt 3
zweite Zeile
|
<ol style="list-style-type:decimal;
list-style-position:outside">
<li>Listenpunkt 1<br>
zweite Zeile</li>
<li>Listenpunkt 2<br>
zweite Zeile</li>
<li>Listenpunkt 3<br>
zweite Zeile</li>
</ol>
|
- Listenpunkt 1
zweite Zeile
- Listenpunkt 2
zweite Zeile
- Listenpunkt 3
zweite Zeile
|
Eigene Bullet-Grafik
Man kann auch eigene Bullet-Grafik für Aufzählungslisten bestimmen
Code | Ausgabe |
<ul style="list-style-image:url(bilder/ordner.gif)">
<li> <a href="index.html">Startseite</a></li>
<li> <a href="listen.html">Listen</a></li>
<li> <a href="tabelle.html">Tabellen</a></li>
</ul>
|
|