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 <!DOCTYPE html>. Es ist immer sinnvoll dem Browser mit <html lang="de"> mitzuteilen, dass es sich, in dem Fall, um ein deutschsprachiges Dokument handelt, da man mit modernen Browsern einfach Seiten übersetzen lassen kann.
Dann folgt der sogenannte „Head“-Bereich, der technische Informationen enthält – zum Beispiel den Titel der Seite. <meta charset="UTF-8"> sagt dem Browser, in welchem Zeichensatz die HTML-Datei kodiert ist. UTF-8 kennt praktisch alle Zeichen der Welt – also auch deutsche Umlaute wie ä, ö, ü. Ohne diese Angabe rät der Browser und liegt manchmal falsch, dann werden Umlaute als kryptische Zeichen wie ä dargestellt.
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. Einen Conatiner 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 einen Container nutzen, um die ersten Gestaltungsmöglichkeiten kennenzulernen.