Listen und Aufzählungen kommen laufend vor: ToDo-Listen, Telefonlisten etc.
Listen mit Spiegelstrichen
Für Listen werden 2 verschiedene TAGs benötigt. Der ...
- TAG, <ul>, um dem Browser mitzuteilen, um was für eine Liste es sich handelt und wo diese anfängt und aufhört
- TAG, <li>, um die einzelnen Listenpunkte festzulegen
Und voila - schon haben wir eine Liste (und der Absatz oben mit 1. und 2. ist auch eine Liste).
Am Beispiel wird es deutlich, wie diese zusammenspielen und welche Tags wie geschachtelt sein sollten.
<html>
<head>
</head>
<body>
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
<li>...</li>
<li>x-ter Listenpunkt</li>
</ul>
</body>
</html>
- erster Listenpunkt
- zweiter Listenpunkt
- ...
- x-ter Listenpunkt
Dabei steht <ul> für das engl. unsortet list = unsortierte Liste. Dieser TAG hat zur Folge, dass für jedes <li> ein Spiegelstrich in Form eines Kugel gesetzt wird. Dabei steht <li> für engl. list=Liste
Listen mit automatischer Nummerierung
Wenn jetzt eine sortierte Liste (durchnummerierte) benötigt wird, wird das <ul> durch <ol> ersetzt. <ol> steht für engl. orderd liste=sortierte Liste
Aufgabe:
Erstelle wie im obigen Beispiel ein Liste mit diesem Aussehen. Allerdings
darfst Du nicht von Hand 1. 2. oder 3. eintippen!!
Das Ergebnis sollte so aussehen:
- erster Listenpunkt
- zweiter Listenpunkt
- x-ter Listenpunkt
Art der Nummerierung bestimmen
Der TAG <ol> kann ergänzt werden durch <ol type=X>. Dabei gibt es für das X verschiedene Ausprägungen.
Praktisch an dieser Konstruktion ist, dass allein durch Auswechseln von <ul type=> eine ganz andere Anzeige möglich ist, z. B. mit 1. ,2. , 3. ... oder mit A, B, C, ... oder römischen Ziffern
- type=1 dadurch kommt die normale Aufzählung (arabische Ziffern) zustande, also 1, 2, 3 ...
- type=A Aufzählung mit Großbuchstaben, also A,B,C, ..., Z
- type=a Aufzählung mit Kleinbuchstaben, also a,b,c, ..., z
- type=i Aufzählung mit römischen Ziffern in klein, also i,ii,iii,iv,v, ...
- type=I Aufzählung mit römischen Ziffern in groß, also I,II,III,IV,V, ...
Aufgabe:
Erzeuge folgendes Aussehen. Dabei siehst Du, dass sortierte und unsortierte
Listen gemischt werden können.
|