Aufgabe 02 - Meine erste Webseite
Aufgabe 02 - Meine erste Webseite
Abschnitt betitelt „Aufgabe 02 - Meine erste Webseite“Worum geht es?
Abschnitt betitelt „Worum geht es?“Sie richten Ihr Arbeitswerkzeug ein und erstellen Ihre erste eigene HTML-Seite: einen Steckbrief über ein frei gewähltes Thema (Hobby, Band, Spiel, Verein; es muss nicht um Sie selbst gehen). Siehe Kapitel Werkzeuge der Entwicklung und HTML-Grundlagen.
In dieser Übung üben Sie:
- Einrichten: ein Projekt als Ordner in VS Code anlegen.
- Strukturieren: eine gültige HTML-Seite mit Grundgerüst erstellen.
- Anwenden: Überschriften, Absätze, Listen, Links und Bilder einsetzen.
- Kontrollieren: die Seite im Browser öffnen und mit den DevTools betrachten.
Benötigte Unterlagen
Abschnitt betitelt „Benötigte Unterlagen“- Visual Studio Code,
- ein Browser (Firefox oder Chrome),
- MDN Web Docs als Nachschlagewerk.
Arbeitsaufträge
Abschnitt betitelt „Arbeitsaufträge“Teil A - Projekt anlegen
Abschnitt betitelt „Teil A - Projekt anlegen“- Erstellen Sie einen Ordner
aufgabe02und öffnen Sie ihn in VS Code. - Legen Sie darin die Datei
index.htmlan und erstellen Sie das HTML-Grundgerüst (<!doctype html>,html,headmittitle,body).
Teil B - Steckbrief bauen
Abschnitt betitelt „Teil B - Steckbrief bauen“- Ihr Steckbrief enthält mindestens:
- eine Hauptüberschrift (
h1) und zwei Zwischenüberschriften (h2), - drei Absätze Text,
- eine ungeordnete und eine geordnete Liste,
- ein Bild mit sinnvollem
alt-Text, - einen Link auf eine externe Seite, der in einem neuen Tab öffnet.
- eine Hauptüberschrift (
- Achten Sie auf korrekte Verschachtelung und kontrollieren Sie die Struktur im Elemente-Tab der DevTools.
Teil C - Ausprobieren
Abschnitt betitelt „Teil C - Ausprobieren“- Öffnen Sie die Konsole der DevTools und führen Sie
document.titleaus. Notieren Sie das Ergebnis. - Bauen Sie absichtlich einen Fehler ein (z. B. ein nicht geschlossenes Tag), betrachten Sie die Auswirkung und beheben Sie ihn wieder.
Geben Sie den vollständigen Projektordner ab (ohne Fremddateien). Die Seite muss beim Öffnen von index.html fehlerfrei angezeigt werden.