Listen
Listen sind eine häufig verwendete Struktur auf einer Web-Seite. Dabei
werden sie nicht nur zur Darstellung von Auflistungen eingesetzt, sondern
z.B. auch Navigationsmenues basieren häufig auf Listen (siehe Lektion 6).
Grundstruktur einer Liste
Die Struktur einer Liste ist sehr einfach. Sie wird durch die Tags
<ul> ... </ul> bei einer nicht nummerierten Liste
(engl. unordered list) bzw. die Tags <ol> ... </ol>
bei einer nummerierten Liste (engl. ordered list) begonnen bzw. beendet.
Innerhalb der Liste wird jeder Listeneintrag durch die Tags
<li> ... </li> (engl. list item)
eingeschlossen.
Damit ergibt sich für eine ungeordnete Liste mit fünf Listenpunkten
folgende Struktur:
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
- Listeneintrag 1
- Listeneintrag 2
- Listeneintrag 3
- Listeneintrag 4
- Listeneintrag 5
Erstellt in eurem Projektverzeichnis eine neue HTML-Datei mit dem Namen
"listen.htm"
und erzeugt hierin eine Liste wie oben dargestellt.
Erstellt zur Übung auch
die folgenden Listen in eurer Datei listen.htm.
Alle dazu notwendigen Informationen stehen jeweils im Text der Listen.
Verschiedene Listenstile
Wir werden jetzt die Grundform etwas variieren.
Übung 1: Eine Liste mit anderem "Bullet" und
farbigen Einträgen
-
Bei ungeordneten bzw. nicht nummerierten Listen kann zwischen
verschiedenen "Bullet"-Typen gewählt werden.
-
Kleine Rechtecke erhält man z.B. durch Angabe von
<ul type="square">
-
Auch Farbe ins Spiel zu bringen ist über das style-Attribut
kein Problem.
-
Zum Färben einzelner Listeneinträge das <li>-Tag einfach
um ein entsprechendes style-Attribut erweitern,
z.B.: <li style="color:green">
-
Zum Färben der ganzen Tabelle das <ul>-Tag entsprechend
erweitern,
z.B.: <ul style="list-style-type:circle;
color:red">
Übung 2: Eine nummerierte Liste in blauer Farbe
- Listenanfang und Listenende werden durch die Tags
<ol> ... </ol> angegeben.
- Jeder Listenpunkt wird wie bei ungeordneten Listen durch <li>-Tags
erzeugt.
- Auch bei diesem Listentyp ist der Inhalt eines Listenpunktes frei
wählbar (hier z.B. dieser Text...).
Übung 3: Eine alphabetisch geordnete Liste
- Um eine alphabetische Aufzählung zu erhalten
- muss nur das <ol>-Tag um eine geeignete type-Angabe
- erweitert werden: <ol type="A">
(I für Römische Ziffern)
Zum guten Schluss: verschachtelte (Mehrfach-)Listen
-
- Listen können auch ineinander geschachtelt
werden.
- Dies bedeutet, daß einzelne Listenpunkte (also das
was zwischen den <li>-Tags steht...) einer
"äußeren Liste" wiederum
vollständige Listen beinhalten können.
- Um die Übersichtlichkeit und Lesbarkeit zu erhalten,
sollte hier unbedingt auf eine entsprechende Einrückung
im HTML-Quelltext geachtet werden !!!
-
- zweiter Listenpunkt der alphabetischen Liste, erster Eintrag
der zweiten Unterliste
- zweiter Eintrag der zweiten Unterliste
- ...
- Im letzten Punkt der alphabetischen Liste steht nur dieser Text...