HTML-Dokumentstruktur: Erstellen einer einfachen Webseite

Einführung

Willkommen in der Welt von HTML! Jede Webseite, die Sie im Internet sehen, basiert auf einer grundlegenden Struktur. Das Verständnis dieser Struktur ist der erste und wichtigste Schritt in der Webentwicklung.

In diesem Lab lernen Sie, wie Sie das grundlegende Skelett eines HTML-Dokuments erstellen. Wir werden die wesentlichen Komponenten behandeln, die jede HTML-Seite haben muss:

Die <!DOCTYPE html> Deklaration
Das Wurzel-<html> Element
Das <head> Element für Metadaten
Das <body> Element für sichtbare Inhalte

Am Ende dieses Labs werden Sie eine vollständige, gültige und einfache HTML-Seite von Grund auf neu erstellt haben.

Erstellen Sie die DOCTYPE-Deklaration

In diesem Schritt fügen Sie die DOCTYPE-Deklaration hinzu, die das Allerwichtigste in Ihrem HTML-Dokument ist. Diese Deklaration teilt dem Webbrowser mit, dass die Seite in HTML5 geschrieben ist. Dies ist eine Standardpraxis und stellt sicher, dass der Browser die Seite korrekt rendert.

Suchen Sie zuerst die Datei index.html im Dateiexplorer auf der linken Seite Ihrer WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Die Datei ist derzeit leer. Fügen Sie die folgende Codezeile ganz oben in die Datei index.html ein:

<!DOCTYPE html>

Ihre Datei index.html sollte nun wie folgt aussehen:

<!DOCTYPE html>

Diese einzelne Zeile ist der Ausgangspunkt für jede moderne Webseite.

Fügen Sie das html-Root-Element mit dem lang-Attribut hinzu

In diesem Schritt fügen Sie das <html>-Element hinzu. Dieses Element ist der Wurzelcontainer für alle anderen HTML-Elemente auf der Seite (mit Ausnahme der <!DOCTYPE>-Deklaration).

Es ist auch eine bewährte Methode, das lang-Attribut innerhalb des öffnenden <html>-Tags einzufügen. Dieses Attribut gibt die Sprache des Inhalts des Dokuments an, was Suchmaschinen und Screenreadern hilft. Für Englisch verwenden wir lang="en".

Fügen Sie in Ihrer index.html-Datei die <html>- und </html>-Tags direkt nach der <!DOCTYPE html>-Deklaration hinzu.

<!DOCTYPE html>
<html lang="en"></html>

Alle anderen Elemente Ihrer Webseite werden zwischen diesen beiden Tags platziert.

Fügen Sie das head-Element mit dem title-Tag ein

In diesem Schritt fügen Sie das <head>-Element hinzu. Der <head>-Abschnitt enthält Metadaten über das HTML-Dokument, wie z. B. seinen Titel, Zeichensatz, Stile und Skripte. Diese Informationen werden nicht auf der Webseite selbst angezeigt, sondern vom Browser verwendet.

Das wichtigste Metadatum für Anfänger ist der <title>-Tag. Der Text innerhalb des <title>-Tags erscheint auf dem Browser-Tab oder in der Titelleiste des Fensters.

Fügen Sie innerhalb Ihres <html>-Elements einen <head>-Abschnitt hinzu. Fügen Sie innerhalb des <head>-Abschnitts einen <title>-Tag mit dem Text "My First Web Page" ein.

Aktualisieren Sie Ihre index.html-Datei, sodass sie wie folgt aussieht:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

Fügen Sie das body-Element für Inhalte hinzu

In diesem Schritt fügen Sie das <body>-Element hinzu. Hier kommen alle sichtbaren Inhalte Ihrer Webseite hin, wie z. B. Überschriften, Absätze, Bilder, Links und mehr. Das <body>-Element sollte nach dem <head>-Element platziert werden, aber immer noch innerhalb des <html>-Elements.

Fügen wir unserer Seite eine Hauptüberschrift hinzu, damit sie im Browser sichtbar ist. Wir verwenden den <h1>-Tag, der für "Heading 1" steht.

Fügen Sie in Ihrer index.html-Datei einen <body>-Abschnitt hinzu. Fügen Sie innerhalb des <body> ein <h1>-Element mit dem Text "Hello, World!" ein.

Ihre vollständige index.html-Datei sollte nun wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Dies ist eine vollständige und gültige HTML-Dokumentstruktur.

Speichern und öffnen Sie die HTML-Datei im Browser

In diesem Schritt sehen Sie die gerade erstellte Webseite. Die WebIDE speichert Ihre Änderungen automatisch, sodass Sie die Datei nicht manuell speichern müssen.

Ein einfacher Webserver läuft bereits im Hintergrund für Sie. Um Ihre Seite anzuzeigen, müssen Sie nur den richtigen Tab in der LabEx-Oberfläche öffnen.

Klicken Sie auf den Tab Web 8080, der sich oben links auf Ihrem Bildschirm befindet, neben dem Tab "Terminal".

Wenn Sie zum Tab Web 8080 wechseln, sollten Sie Ihre Webseite sehen. Sie wird Folgendes anzeigen:

Den Text "Hello, World!" als große Überschrift im Hauptinhaltsbereich.
Der Browser-Tab zeigt den Titel "My First Web Page".

Wenn Sie dies nicht sehen, gehen Sie bitte zu den vorherigen Schritten zurück und stellen Sie sicher, dass Ihr index.html-Code exakt mit dem Beispiel übereinstimmt.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich Ihr erstes gültiges HTML-Dokument erstellt. Sie haben die grundlegenden Bausteine kennengelernt, die das Skelett jeder Webseite bilden.

In diesem Lab haben Sie gelernt:

<!DOCTYPE html>: Die Deklaration, die das Dokument als HTML5 definiert.
<html>: Das Wurzelelement, das den gesamten Inhalt der Seite umschließt.
<head>: Der Container für Metadaten, wie den Seitentitel, der auf der Seite selbst nicht sichtbar ist.
<title>: Der Tag, der den Titel des Browser-Tabs festlegt.
<body>: Der Container für alle sichtbaren Inhalte, wie Überschriften und Absätze.

Diese grundlegende Struktur ist das Fundament, auf dem Sie alle zukünftigen Webprojekte aufbauen werden.