Einfache Listen


Schritt 1: Liste korrigieren
Sortierte Liste im Browser
Aussehen der sortierten Liste nach Fertigstellung der Aufgabe.

Kopieren Sie die Datei sortierteListe.html in Ihr eigenes Verzeichnis:


Korrigieren Sie die HTML-Datei so, dass die Liste im Browser aussieht wie in der Abbildung.

Schritt 2: Liste einfärben
Sortierte Liste im Browser
Aussehen der sortierten Liste mit Hintergrundfarben.

Ergänzen Sie die bisherige Lösung so, dass der Hintergrund des Elements ol hellblau und der Hintergrund aller Elemente li hellrot eingefärbt werden. Vergleichen Sie Ihre Lösung mit der Abbildung und stellen Sie sicher, dass sie identisch aussehen.

Hinweise zum Einfärben des Hintergrunds: Sie brauchen eine CSS-Datei mit den folgenden Angaben:
  1. Einfärben der Liste selbst mit einem hellblauen Hintergrund:
    ol {background-color:aqua}
  2. Einfärben der Listenelemente mit einem hellroten Hintergrund:
    li {background-color:tomato}

Hinweis: um Farben in Ihre HTML-Datei einzubinden, müssen Sie folgende Schritte ausführen:

  1. Erzeugen Sie im selben Verzeichnis eine Datei layout.css.
  2. Hinterlegen Sie in dieser Datei die folgenden Inhalte:
    ol {background-color:aqua}
    li {background-color:tomato}
  3. Verlinken Sie die CSS-Datei in Ihrer HTML-Datei. Dazu müssen Sie in den head-Bereich die folgende Zeile hinzufügen:
    <link rel="stylesheet" href="layout.css"> 
Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.
Schritt 3: Unsortierte Liste
Unsortierte Liste im Browser
Aussehen der unsortierten Liste nach Fertigstellung der Aufgabe.

Ändern Sie die bisherige Liste so, dass sie im Browser als eine Aufzählung dargestellt wird (Abbildung). Sie können die Hintergrundfarben behalten oder auch wieder weglassen.

Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Fangen Sie mit dem nächsten Schritt erst an, wenn Sie in diesem Schritt keine Fehler haben.
Schritt 4: Beschreibungsliste
Beispiel eines Glossars
Beispiel eines Glossars.

Erstellen Sie ein Glossar, in dem Sie die Begriffe URL, HTML und HTTP erläutern. Benutzen Sie dafür eine Beschreibungsliste (<dl>).

Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit dieser Aufgabe erst fertig, wenn die Tests keine Fehler zeigen.