In HTML gibt es - wie wir es aus der Textverarbeitung gewohnt sind - unsortierte und sortierte Listen. Sehen
wir uns ein Beispiel an:
Wir sehen, dass man eine unsortierte Liste mit <ul> </ul> umschließt, eine
sortierte Liste hingegen mit <ol> </ol>. Diese Abkürzungen stehen für unordered
list und ordered list.
Innerhalb einer Liste muss man die einzelnen Einträge mit <li> </li> kennzeichnen.
Das steht für list item.
Übungsaufgabe
Erstelle eine unsortierte Liste, in der Du angibst, was Du alles in Deinem Federmäppchen hast.
Erstelle dann eine sortierte Liste, in der Du kurz zusammenfasst, was Du heute seit dem Aufstehen bis
jetzt getan hast.
Verschachtelte Listen ohne CSS
In HTML kann man Listen auch verschachteln. Das kann dann zum Beispiel so aussehen:
So eine Verschachtelung erreichen wir, indem wir innerhalb einer Liste noch eine weitere Liste erstellen.
Das Prinzip ist uns bereits vom Programmieren bekannt. Dort haben wir ja beispielsweise verschachtelte
Schleifen erstellt.
Übungsaufgabe
Erstelle eine verschachtelte Liste (sortiert oder unsortiert) zu einem Thema Deiner Wahl. (Zum Beispiel
kannst Du Deine Liste zum Federmäppchen verfeinern.)
Listen mit CSS gestalten
In diesem Beispiel wird das Erscheinungsbild von Listen beeinflusst:
Aufgabe
Analysiere die CSS-Datei von oben ganz genau, um im Detail nachzuvollziehen, wie das im Browser
angezeigte Ergebnis entsteht.
Erkläre, welche Bedeutung in der CSS-Datei die Einträge ul und ul ul haben.
Erkläre auch, welche Bedeutung in der CSS-Datei die Einträge ol und ol li
haben.
Leite aus Deinen Beobachtungen her, was man mithilfe von ul ul li beeinflussen kann.
Übungsaufgabe
Erstelle mit HTML und CSS zwei solche Listen. Diese
Übersicht der wichtigsten CSS-Anweisungen kann dabei hilfreich sein.
