Herausforderung: Dokumentstruktur

Ziel

Erstellen Sie die korrekte Webseite, indem Sie eine grundlegende HTML-Dokumentstruktur erstellen. Diese Struktur bildet das Rückgrat jeder HTML-Seite und besteht aus wesentlichen Elementen, die Browser benötigen, um Ihre Inhalte korrekt darzustellen.

Hinweis

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webdesigns täuschen. Auch wenn es einfach erscheinen mag, ist es von größter Bedeutung, die korrekte Dokumentstruktur beizubehalten. Dies stellt sicher, dass die Website in allen Browsern lesbar und funktional bleibt.

Aufgabe

Erstellen Sie eine grundlegende HTML-Dokumentstruktur. Wenn Sie sich bereits sicher in Ihren Fähigkeiten fühlen, können Sie gerne ohne die Schritt-für-Schritt-Anleitung fortfahren. Wenn Sie jedoch etwas mehr Anleitung wünschen, steht Ihnen eine Schritt-für-Schritt-Anleitung zur Verfügung, die Ihnen weiterhilft.

Schritt-für-Schritt-Anleitung

Schritt 1: Starten Sie das HTML-Dokument

Beginnen Sie mit der Eingabe der HTML-Dokumenttyp-Deklaration, die dem Browser mitteilt, dass das Dokument in HTML geschrieben ist. Die Deklaration sollte die erste Zeile Ihres HTML-Dokuments sein:

index.html

Schritt 2: Fügen Sie die öffnenden und schließenden HTML-Tags hinzu

Nach der Doctype-Deklaration fügen Sie die öffnenden und schließenden HTML-Tags hinzu. Die gesamte HTML-Dokumentstruktur wird innerhalb dieser Tags enthalten sein. Fügen Sie außerdem das lang-Attribut hinzu, um die Sprache des Dokuments anzugeben:

index.html

Schritt 3: Erstellen Sie den Kopfbereich

Fügen Sie die öffnenden und schließenden <head>-Tags innerhalb der HTML-Tags hinzu. Der Kopfbereich enthält Meta-Informationen über das HTML-Dokument, wie den Titel und Links zu externen Stylesheets:

index.html

Schritt 4: Fügen Sie den Titel hinzu

Innerhalb der <head>-Tags fügen Sie die öffnenden und schließenden <title>-Tags hinzu. Der Text, den Sie zwischen diesen Tags eingeben, wird als Titel der Webseite in der Titelleiste oder im Tab des Browsers angezeigt:

index.html

Schritt 5: Erstellen Sie den Body-Bereich

Nach dem <head>-Abschnitt fügen Sie die öffnenden und schließenden <body>-Tags hinzu. Der Body-Bereich enthält den sichtbaren Inhalt der Webseite:

index.html

Schritt 6: Inhalt zum Body hinzufügen

Sie können Elemente innerhalb der <body>-Tags hinzufügen, wie Überschriften, Absätze, Bilder, Links usw. Hier ist ein Beispiel für das Hinzufügen einer Überschrift und eines Absatzes:

index.html

Probieren Sie es selbst aus

index.html

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5