## Ziel
Erstellung einer korrekten Webseite durch Aufbau einer grundlegenden HTML-Dokumentstruktur. Diese Struktur bildet das Rückgrat jeder HTML-Seite und besteht aus den wesentlichen Elementen, die Browser benötigen, um Inhalte korrekt darzustellen.

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webseiten-Designs täuschen. Auch wenn es unkompliziert wirkt, ist es dennoch entscheidend, **die korrekte Dokumentstruktur beizubehalten**. Dies stellt sicher, dass die Website Lesbarkeit und Funktionalität in allen Browsern gewährleistet.

Hinweis

## Aufgabe
Erstellung einer grundlegenden HTML-Dokumentstruktur. Wer bereits sicher im Umgang ist, kann direkt fortfahren. Für zusätzliche Unterstützung steht eine schrittweise Anleitung zur Verfügung.

### Schritt 1: Beginn des HTML-Dokuments
Start mit der HTML-Doctype-Deklaration, die dem Browser mitteilt, dass das Dokument in HTML verfasst ist. Die Deklaration sollte die erste Zeile des HTML-Dokuments sein:

### Schritt 2: Hinzufügen der öffnenden und schließenden html-Tags
Nach der Doctype-Deklaration die öffnenden und schließenden HTML-Tags einfügen. Die gesamte HTML-Dokumentstruktur befindet sich innerhalb dieser Tags. Zusätzlich das Attribut `lang` einfügen, um die Sprache des Dokuments anzugeben:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj48L2h0bWw+

### Schritt 3: Erstellen des head-Bereichs
Fügen Sie die öffnenden und schließenden `<head>`-Tags innerhalb der HTML-Tags hinzu. Der head-Bereich enthält Metainformationen über das HTML-Dokument, wie zum Beispiel den Titel und Verweise auf externe Stylesheets:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD48L2hlYWQ+CjwvaHRtbD4=

### Schritt 4: Hinzufügen des Titels
Fügen Sie innerhalb der `<head>`-Tags die öffnenden und schließenden `<title>`-Tags hinzu. Der Text, den Sie zwischen diese Tags einfügen, wird als Titel der Webseite in der Titelleiste oder im Tab des Browsers angezeigt:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CjwvaHRtbD4=

### Schritt 5: Erstellen des body-Bereichs
Nach dem `<head>`-Abschnitt die öffnenden und schließenden `<body>`-Tags hinzufügen. Der body-Bereich enthält den sichtbaren Inhalt der Webseite:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+PC9ib2R5Pgo8L2h0bWw+

### Schritt 6: Inhalt zum body hinzufügen
Innerhalb der `<body>`-Tags können Elemente wie Überschriften, Absätze, Bilder, Links usw. eingefügt werden. Hier ein Beispiel für das Hinzufügen einer Überschrift und eines Absatzes:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aDE+VGhlIHdlYnBhZ2UgbWFpbiBoZWFkaW5nPC9oMT4KICAgIDxwPlNvbWUgY29udGVudC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

PCEtLSBDcmVhdGUgdGhlIGJhc2ljIGRvY3VtZW50IHN0cnVjdHVyZSAtLT4K

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.

Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.

Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Challenge: Structure an HTML Document Correctly

Ziel

Aufgabe

Schritt-für-Schritt-Anleitung

Schritt 1: Beginn des HTML-Dokuments

Schritt 2: Hinzufügen der öffnenden und schließenden html-Tags

Schritt 3: Erstellen des head-Bereichs

Schritt 4: Hinzufügen des Titels

Schritt 5: Erstellen des body-Bereichs

Schritt 6: Inhalt zum body hinzufügen

Probiere es selbst aus