Einfache HTML-Struktur und -Tags erstellen

Einführung

In diesem Lab werden die Schüler die grundlegenden Fähigkeiten zum Erstellen einer einfachen HTML-Dokumentstruktur und das Verständnis wichtiger HTML-Tags lernen. Das Lab führt die Teilnehmer durch das Einrichten eines HTML-Dokuments mit einer korrekten DOCTYPE-Deklaration, das Hinzufügen des HTML-Wurzel-Tags, die Konfiguration des Kopfbereichs und die Erkundung verschiedener Arten von HTML-Tags.

Die Teilnehmer beginnen damit, ein HTML5-Dokument zu erstellen, lernen, wie man den Dokumenttyp deklariert, das grundlegende Seitenlayout strukturiert und den Zweck wichtiger Elemente wie <html>, <head> und <body> versteht. Am Ende des Labs werden die Schüler ein umfassendes Verständnis davon haben, wie man ein korrekt strukturiertes HTML-Dokument erstellt und verschiedene HTML-Tags verwendet, um den Inhalt einer Webseite zu strukturieren.

HTML-Dokument mit DOCTYPE-Deklaration einrichten

In diesem Schritt lernen Sie, wie Sie die Grundstruktur eines HTML-Dokuments einrichten, indem Sie die DOCTYPE-Deklaration hinzufügen. Die DOCTYPE-Deklaration ist von entscheidender Bedeutung, da sie Webbrowsern mitteilt, welche Version von HTML Ihr Dokument verwendet, und so eine korrekte Darstellung und Kompatibilität gewährleistet.

Öffnen Sie zunächst die WebIDE und erstellen Sie eine neue Datei namens index.html im Verzeichnis ~/project.

Die DOCTYPE-Deklaration für HTML5 ist einfach und unkompliziert. Sie fügen sie als erste Zeile Ihres HTML-Dokuments hinzu:

<!doctype html>

Diese Deklaration teilt den Browsern mit, dass Sie HTML5, die neueste Version von HTML, verwenden. Die Groß- und Kleinschreibung spielt keine Rolle, aber die Kleinbuchstabenversion wird aus Gründen der Konsistenz und Lesbarkeit empfohlen.

Erstellen wir nun eine vollständige Grundstruktur für ein HTML-Dokument mit der DOCTYPE-Deklaration:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>

Anmerkung: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut.

Das Beispielausgabe im Browser würde folgendermaßen aussehen:

Welcome to HTML!

Wichtige Punkte, die Sie sich merken sollten:

Die DOCTYPE-Deklaration muss die erste Zeile in Ihrem HTML-Dokument sein.
Sie hilft den Browsern zu verstehen, welche Version von HTML Sie verwenden.
Für die moderne Webentwicklung verwenden Sie <!DOCTYPE html> für HTML5.
Die Deklaration ist kein HTML-Tag; es ist eine Anweisung an den Browser.

HTML-Wurzel-Tag und Grundstruktur hinzufügen

In diesem Schritt lernen Sie die Grundstruktur eines HTML-Dokuments kennen, wobei der Schwerpunkt auf dem HTML-Wurzel-Tag und der grundlegenden Dokumentstruktur liegt. Das <html>-Tag ist der Container für alle anderen HTML-Elemente und dient als Wurzelelement einer HTML-Seite.

Öffnen Sie die index.html-Datei, die Sie im vorherigen Schritt erstellt haben, in der WebIDE. Wir erweitern nun die vorherige HTML-Struktur, indem wir das vollständige Wurzel-Tag und seine wesentlichen Bestandteile hinzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

Lassen Sie uns die wichtigsten Bestandteile analysieren:

<html>-Tag: Das Wurzelelement, das alle anderen HTML-Inhalte umschließt
lang="en"-Attribut: Gibt die Sprache des Dokuments an (in diesem Fall Englisch)
Zwei Hauptunterelemente:
- <head>: Enthält Metadaten über das Dokument
- <body>: Enthält den sichtbaren Inhalt der Webseite

Das Beispielausgabe in einem Webbrowser würde folgendermaßen aussehen:

Welcome to HTML Structure
This is the basic structure of an HTML document.

Wichtige Punkte, die Sie sich merken sollten:

Jedes HTML-Dokument muss ein <html>-Wurzel-Tag haben.
Das lang-Attribut hilft bei der Barrierefreiheit und der Suchmaschinenoptimierung.
Das Dokument ist in <head>- und <body>-Abschnitte unterteilt.
Die korrekte Verschachtelung von Tags ist für gültiges HTML von entscheidender Bedeutung.

Kopfabschnitt mit Meta- und Titel-Tags konfigurieren

In diesem Schritt lernen Sie den <head>-Bereich eines HTML-Dokuments kennen und erfahren, wie Sie Meta-Tags und Titel-Tags verwenden, um wichtige Informationen über Ihre Webseite bereitzustellen.

Öffnen Sie die index.html-Datei in der WebIDE und aktualisieren Sie den <head>-Bereich mit folgendem Beispiel:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A simple HTML learning page" />
    <title>My HTML Learning Journey</title>
  </head>
  <body>
    <h1>Welcome to HTML Metadata</h1>
    <p>This page demonstrates head section configuration.</p>
  </body>
</html>

Lassen Sie uns die wichtigsten Meta-Tags und ihre Zwecke analysieren:

<meta charset="UTF-8">: Gibt die Zeichensatzkodierung für das Dokument an.
<meta name="viewport">: Stellt sicher, dass die Seite auf verschiedenen Geräten richtig gerendert wird.
<meta name="description">: Liefert eine kurze Seitenbeschreibung für Suchmaschinen.
<title>: Legt den Seitentitel fest, der in der Browser-Symbolleiste angezeigt wird.

Beispielausgabe in einer Browser-Symbolleiste:

My HTML Learning Journey

Wichtige Punkte, die Sie sich merken sollten:

Der <head>-Bereich enthält Metadaten über das HTML-Dokument.
Meta-Tags liefern zusätzliche Informationen an Browser und Suchmaschinen.
Das <title>-Tag ist für die Seitenidentifizierung und die Suchmaschinenoptimierung (SEO) von entscheidender Bedeutung.
Fügen Sie immer Zeichensatzkodierung und Viewport-Meta-Tags hinzu.

Einfache und doppelte HTML-Tags verstehen

In diesem Schritt lernen Sie die beiden Arten von HTML-Tags kennen: einzelne (selbstschließende) Tags und doppelte Tags. Das Verständnis des Unterschieds zwischen diesen Tags ist von entscheidender Bedeutung für die Erstellung gut strukturierter HTML-Dokumente.

Öffnen Sie die index.html-Datei in der WebIDE und aktualisieren Sie den Körperbereich mit folgendem Beispiel:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Tags Exploration</title>
  </head>
  <body>
    <!-- Double Tags (Opening and Closing) -->
    <h1>Welcome to HTML Tags</h1>
    <p>This is a paragraph with <strong>bold text</strong>.</p>

    <!-- Single (Self-Closing) Tags -->
    <img src="example.jpg" alt="Example Image" />
    <br />
    <input type="text" placeholder="Enter your name" />
  </body>
</html>

Lassen Sie uns die verschiedenen Arten von Tags analysieren:

Doppelte Tags (gepaarte Tags):

Haben ein öffnendes Tag <tag> und ein schließendes Tag </tag>.
Der Inhalt wird zwischen dem öffnenden und dem schließenden Tag platziert.
Beispiele: <h1>, <p>, <strong>, <div>

Einzelne Tags (selbstschließende Tags):

Haben kein separates schließendes Tag.
Schließen sich selbst innerhalb des Tags.
Beispiele: <img>, <br>, <input>

Das Beispielausgabe in einem Browser würde folgendermaßen aussehen:

Welcome to HTML Tags
This is a paragraph with bold text.
[An image would be displayed here]
[A text input field would be shown]

Wichtige Punkte, die Sie sich merken sollten:

Doppelte Tags umschließen Inhalte und erfordern sowohl ein öffnendes als auch ein schließendes Tag.
Einzelne Tags sind eigenständig und umschließen keinen Inhalt.
Schließen Sie immer doppelte Tags, um eine korrekte HTML-Struktur aufrechtzuerhalten.
Einige einzelne Tags können Attribute haben, um zusätzliche Informationen bereitzustellen.

Den Body-Tag und die Platzierung von Seiteninhalten erkunden

In diesem Schritt lernen Sie den <body>-Tag kennen und erfahren, wie Sie Inhalte in einem HTML-Dokument strukturieren können. Der Body-Tag ist der Ort, an dem der gesamte sichtbare Inhalt einer Webseite platziert wird.

Öffnen Sie die index.html-Datei in der WebIDE und aktualisieren Sie den Body-Bereich mit folgendem Beispiel:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Content Placement Example</title>
  </head>
  <body>
    <!-- Headings -->
    <h1>Welcome to HTML Content Placement</h1>
    <h2>Subheading Level 2</h2>
    <h3>Subheading Level 3</h3>

    <!-- Paragraphs -->
    <p>This is a paragraph explaining the importance of content structure.</p>

    <!-- Lists -->
    <h4>Key HTML Elements:</h4>
    <ul>
      <li>Headings</li>
      <li>Paragraphs</li>
      <li>Lists</li>
    </ul>

    <!-- Div for grouping content -->
    <div>
      <p>This paragraph is inside a div container.</p>
    </div>

    <!-- Links and Images -->
    <a href="https://example.com">Visit Example Website</a>
    <img src="example.jpg" alt="Example Image" width="300" />
  </body>
</html>

Das Beispielausgabe in einem Browser würde folgendermaßen aussehen:

Wichtige Punkte, die Sie sich merken sollten:

Der <body>-Tag enthält den gesamten sichtbaren Seiteninhalt.
Verwenden Sie Überschrift-Tags (<h1> bis <h6>), um eine Inhalts-Hierarchie zu erstellen.
Absätze, Listen und andere Elemente helfen bei der Organisation von Informationen.
<div>-Tags können Inhalte gruppieren und strukturieren.
Fügen Sie Links und Bilder hinzu, um die Interaktivität der Seite zu verbessern.

Zusammenfassung

In diesem Lab haben die Teilnehmer die grundlegenden Schritte zum Erstellen einer einfachen HTML-Dokumentstruktur gelernt. Der Prozess begann mit der Einrichtung der DOCTYPE-Deklaration, die für die korrekte Darstellung im Browser und die Kompatibilität mit HTML5 von entscheidender Bedeutung ist. Die Lernenden haben die wichtigsten HTML-Tags untersucht, darunter das Wurzel-<html>-Tag, die <head>- und <body>-Abschnitte, und deren spezifische Rolle bei der Organisation des Dokuments verstanden.

Das Lab hat die Schüler durch die Erstellung eines vollständigen HTML-Dokuments geführt und gezeigt, wie man Meta-Tags hinzufügt, die Zeichensatzkodierung festlegt, einen Seitentitel definiert und Inhalte innerhalb des Body-Tags platziert. Die Teilnehmer haben praktische Erfahrungen in der Erstellung einer gut strukturierten HTML-Seite gesammelt und wichtige Konzepte wie einzelne und doppelte HTML-Tags, die korrekte Verschachtelung von Tags und die Bedeutung von semantischem Markup in der Webentwicklung gelernt.