HTML ist die Abkürzung für „HyperText Markup Language“ – auf Deutsch etwa „Auszeichnungssprache für Hypertext“. Es ist die grundlegende Sprache, mit der Webseiten aufgebaut werden. Alles, was du im Internet siehst – Texte, Überschriften, Bilder oder Links – basiert im Hintergrund auf HTML. Es sagt dem Browser, wie Inhalte strukturiert sind, aber nicht, wie sie genau aussehen (dafür ist später CSS zuständig). In diesem Abschnitt lernst du die absoluten Grundlagen kennen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitentitel</title>
</head>
<body>
<h1>Große Überschrift</h1>
<p>Absatz mit ein bisschen Text und einem <a href="http://rainpearl.de">Link</a></p>
<!-- Kommentar im HTML-code -->
</body>
</html>
Ein einfaches HTML-Dokument besteht aus einer bestimmten Grundstruktur: Ganz oben steht die Angabe, dass es sich um ein HTML-Dokument handelt. Dann folgt der sogenannte „Head“-Bereich, der technische Informationen enthält – zum Beispiel den Titel der Seite. Danach kommt der „Body“-Bereich, also der sichtbare Teil der Webseite. Dort können verschiedene Elemente stehen: zum Beispiel eine große Überschrift, normaler Fließtext in einem Paragraphen <p> und ein anklickbarer Link zu einer anderen Seite.
Mit diesen wenigen Grundbausteinen kannst du bereits deine erste kleine Webseite schreiben.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitentitel</title>
</head>
<body>
<h1>Große Überschrift</h1>
<p>Absatz mit ein bisschen Text und einem <a href="http://rainpearl.de">Link</a></p>
<div> Wir bauen noch einen Container ein. Diesen können wir später mit
CSS definieren. zum Beispiel in Farbe und mit einem Rahmen.
</div>
</body>
</html>
Unterhalb unseres Beispielcodes fügen wir jetzt noch einen sogenannten „Container“ ein. Dafür verwenden wir das HTML-Element <div>. Das Wort „div“ steht für „Division“ und bedeutet so viel wie „Abschnitt“ oder „Bereich“. Es hat keine direkte sichtbare Wirkung, aber es hilft uns, bestimmte Inhalte logisch zu gruppieren.
In unserem Fall legen wir damit einen Bereich an, den wir später mit CSS gestalten können – zum Beispiel, indem wir ihm eine Hintergrundfarbe geben, ihn zentrieren oder mit einem Rahmen versehen. Der Container ist also wie eine leere Box, die wir noch mit Stil füllen werden. Solche Container sind in fast jeder Webseite zu finden und ein wichtiges Werkzeug, um Inhalte übersichtlich zu strukturieren.
Im Abschnitt „CSS Grundlagen“ werden wir genau diesen Container nutzen, um die ersten Gestaltungsmöglichkeiten kennenzulernen.