Zum Inhalt springen

Aufgabe 02 - Meine erste Webseite

Zu Zen-Modus wechseln

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.
  • Visual Studio Code,
  • ein Browser (Firefox oder Chrome),
  • MDN Web Docs als Nachschlagewerk.
  1. Erstellen Sie einen Ordner aufgabe02 und öffnen Sie ihn in VS Code.
  2. Legen Sie darin die Datei index.html an und erstellen Sie das HTML-Grundgerüst (<!doctype html>, html, head mit title, body).
  1. 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.
  2. Achten Sie auf korrekte Verschachtelung und kontrollieren Sie die Struktur im Elemente-Tab der DevTools.
  1. Öffnen Sie die Konsole der DevTools und führen Sie document.title aus. Notieren Sie das Ergebnis.
  2. 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.