Tag 1: Einführung & Grundstruktur

Ziel

Das Ziel von heute ist es zu verstehen, was HTML ist und wie man das Grundgerüst einer Webseite erstellt.

Was ist HTML?

HTML steht für HyperText Markup Language. Es ist die Standardsprache zur Erstellung von Webseiten. HTML verwendet Tags, um die Struktur und den Inhalt einer Seite zu beschreiben.

Browser lesen HTML, um Inhalte darzustellen.
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache.
Es sagt dem Browser, was die einzelnen Teile der Seite sind (Überschrift, Absatz, Bild, Link usw.).

Grundlegende HTML-Struktur

Jede HTML-Seite hat eine Grundstruktur. Hier ist ein Beispiel mit Kommentaren zur Erklärung:

<!DOCTYPE html>        <!-- Deklariert den HTML5-Dokumenttyp -->
<html>                  <!-- Wurzelelement der Seite -->
  <head>                <!-- Enthält Metadaten und Seiteninfos -->
    <meta charset="UTF-8">  <!-- Zeichencodierung festlegen -->
    <title>Meine erste Seite</title>  <!-- Titel im Browser-Tab -->
  </head>
  <body>                <!-- Sichtbarer Inhalt beginnt hier -->
    <h1>Hallo Welt</h1>   <!-- Überschrift Ebene 1 -->
    <p>Dies ist meine erste HTML-Seite.</p>  <!-- Absatztext -->
  </body>
</html>

Elemente erklärt

<!DOCTYPE html>: Sagt dem Browser, dass es ein HTML5-Dokument ist.
<html>: Wurzelelement der HTML-Seite.
<head>: Enthält Metadaten wie Titel, Zeichencodierung und Stylesheets.
<meta charset="UTF-8">: Sorgt für die richtige Darstellung von Textzeichen.
<title>: Wird im Browser-Tab angezeigt.
<body>: Hier kommt der sichtbare Inhalt rein.
<h1>: Hauptüberschrift.
<p>: Textabsatz.

Übung

Versuche, deine eigene HTML-Seite zu erstellen:

Schreibe deinen Namen in ein <h1>-Element.
Füge eine kurze Beschreibung über dich in ein <p>-Element ein.
Speichere die Datei als index.html und öffne sie im Browser.

Beispiellösung

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Meine erste HTML-Seite</title>
  </head>
  <body>
    <h1>Max Mustermann</h1>
    <p>Ich lerne HTML, um Webseiten zu erstellen. Ich mag Programmieren und Webdesign.</p>
  </body>
</html>

Extra Tipps

Verwende sinnvolle Titel – sie erscheinen im Browser und in Suchmaschinen.
Speichere Dateien mit der Endung .html.
Öffne deine Datei immer im Browser, um das Ergebnis zu sehen.
Rücke deinen Code richtig ein, damit er gut lesbar ist.