Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Eine HTML-Datei Korrekt Strukturieren | HTML-Dokumentstruktur
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Ultimatives HTML

bookHerausforderung: Eine HTML-Datei Korrekt Strukturieren

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.

Note
Hinweis

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webseitendesigns täuschen. Auch wenn es unkompliziert wirkt, ist es dennoch von größter Bedeutung, die korrekte Dokumentstruktur beizubehalten. Nur so bleiben Lesbarkeit und Funktionalität der Website in allen Browsern gewährleistet.

Aufgabe

Erstellung einer grundlegenden HTML-Dokumentstruktur. Wer sich bereits sicher fühlt, kann ohne Schritt-für-Schritt-Anleitung fortfahren. Für zusätzliche Unterstützung steht jedoch eine schrittweise Anleitung zur Verfügung.

Schritt-für-Schritt-Anleitung

Schritt 1: HTML-Dokument beginnen

Mit der Eingabe der HTML-Doctype-Deklaration starten, die dem Browser mitteilt, dass das Dokument in HTML geschrieben ist. Die Deklaration sollte die erste Zeile des HTML-Dokuments sein:

index.html

index.html

copy

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 Struktur des HTML-Dokuments befindet sich innerhalb dieser Tags. Zusätzlich das Attribut lang einfügen, um die Sprache des Dokuments anzugeben:

index.html

index.html

copy

Schritt 3: Erstellen des head-Bereichs

Die öffnenden und schließenden <head>-Tags innerhalb der HTML-Tags hinzufügen. Der head-Bereich enthält Meta-Informationen über das HTML-Dokument, wie zum Beispiel den Titel und Verweise auf externe Stylesheets:

index.html

index.html

copy

Schritt 4: Titel hinzufügen

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:

index.html

index.html

copy

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:

index.html

index.html

copy

Schritt 6: Hinzufügen von Inhalt zum body

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:

index.html

index.html

copy

Probiere es selbst aus

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me an example of a complete basic HTML document?

What should I put as the title of the webpage?

Can you explain the purpose of each section in the HTML structure?

bookHerausforderung: Eine HTML-Datei Korrekt Strukturieren

Swipe um das Menü anzuzeigen

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.

Note
Hinweis

Lassen Sie sich nicht von der scheinbaren Einfachheit des Webseitendesigns täuschen. Auch wenn es unkompliziert wirkt, ist es dennoch von größter Bedeutung, die korrekte Dokumentstruktur beizubehalten. Nur so bleiben Lesbarkeit und Funktionalität der Website in allen Browsern gewährleistet.

Aufgabe

Erstellung einer grundlegenden HTML-Dokumentstruktur. Wer sich bereits sicher fühlt, kann ohne Schritt-für-Schritt-Anleitung fortfahren. Für zusätzliche Unterstützung steht jedoch eine schrittweise Anleitung zur Verfügung.

Schritt-für-Schritt-Anleitung

Schritt 1: HTML-Dokument beginnen

Mit der Eingabe der HTML-Doctype-Deklaration starten, die dem Browser mitteilt, dass das Dokument in HTML geschrieben ist. Die Deklaration sollte die erste Zeile des HTML-Dokuments sein:

index.html

index.html

copy

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 Struktur des HTML-Dokuments befindet sich innerhalb dieser Tags. Zusätzlich das Attribut lang einfügen, um die Sprache des Dokuments anzugeben:

index.html

index.html

copy

Schritt 3: Erstellen des head-Bereichs

Die öffnenden und schließenden <head>-Tags innerhalb der HTML-Tags hinzufügen. Der head-Bereich enthält Meta-Informationen über das HTML-Dokument, wie zum Beispiel den Titel und Verweise auf externe Stylesheets:

index.html

index.html

copy

Schritt 4: Titel hinzufügen

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:

index.html

index.html

copy

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:

index.html

index.html

copy

Schritt 6: Hinzufügen von Inhalt zum body

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:

index.html

index.html

copy

Probiere es selbst aus

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
some-alt