Meilenstein I – HTML und CSS

Milestone Two Column Final
Eine Beispiel-Umsetzung der Meilenstein-Aufgaben.

Aufgabe 1 – Metainformationen

Ergänzen Sie Ihre Website um Metainformationen (Autor, Beschreibung, Schlüsselwörter).

Aufgabe 2 – Seitenhintergrund

Verwenden Sie eine Rastergraphik (*.jpg, *.png) als Hintergrund Ihrer Website.

Aufgabe 3 – Logo

Erstellen Sie ein eigenes Logo. Lassen Sie Ihr Logo im Kopfbereich Ihrer Website darstellen. Geben Sie dem Kopfbereich eine Hintergrundfarbe.

Horizontale Navigationsleiste

Aufgabe 4 – Navigationsleiste

Erstellen Sie eine horizontale Navigationsleiste im Kopfbereich Ihrer Website. Verlinken Sie fünf Ihrer Lieblingswebseiten in der Navigationsleiste.

Aufgabe 5 – Navigationsleiste: Interaktion

Implementieren Sie folgendes Verhalten: Befindet sich der Mousezeiger über einem Element der Navigationsleiste, dann ändert sich die Hintergrundfarbe des Navigationselementes (oder das Element wird andersfarbig unterstrichen, oder…).

Hervorgehobenes Navigationselement

Aufgabe 6 – Teaserbereich

Binden Sie ein Bild in dem Teaserbereich ein und füllen Sie die Bildbeschreibung („imagedescription“) mit Inhalt.

Teaserbereich

Aufgabe 7 – Rechte Seitenleiste

Betten (Tipp: „embed“) Sie zwei Videos, z.B. von youtube oder vimeo, in der rechten Seitenleiste ein. Oberhalb der Videos befindet sich jeweils eine kurze erläuternde Überschrift. Lassen Sie die Überschriften in einer beliebigen Farbe darstellen:

Rechte Seitenleiste mit Videos

Aufgabe 8 – Inhaltsbereich

Erstellen Sie drei Vorschaubeiträge (Tipp: „article‘) im Inhaltsbereich Ihrer Website. Jeder Vorschaubeitrag besteht aus einer Überschrift, einem Bild und einem kurzen beschreibenden Text. Richten Sie die Bilder links vom erläuternden Text aus.

Inhaltsbereich mit drei Vorschaubeiträgen

Aufgabe 9 – Detailseiten

Verlinken Sie jedes Bild jedes Vorschaubeitrages auf eine Detailseite zu dem entsprechenden Beitrag. Auf der Detailseite wird als Teaserbild das Vorschaubild der Startseite gezeigt. Die Beschreibung des Teaserbildes („imagedescription“) folgt der entsprechenden Überschrift auf der Startseite.

Jede Detailseite besteht aus mindestens drei Überschriften, Bildern und erläuternden Texten:

Detailseite

Aufgabe 10 – Fußbereich

Vergeben Sie eine Hintergrundfarbe für den Fußbereich („footer“) Ihrer Website. Geben Sie Ihren Namen im Fußbereich an.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.