In HTML gibt es - wie wir es aus der Textverarbeitung gewohnt sind - unsortierte und sortierte Listen. Sehen wir uns ein Beispiel an:
Der Quelltext zu diesen Listen sieht so aus:
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.
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Ü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.
Der Quelltext zu dem Beispiel von oben sieht so aus:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Ü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 dieser CSS-Datei wird das Erscheinungsbild von Listen beeinflusst:
Die zugehörige HTML-Datei sieht so aus:
Zusammen liefern sie dieses Ergebnis:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
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.
