RootRifs
Zurück zu Kapitel 1: HTML-Grundlagen

HTML & CSS | Beginner

Das Grundgerüst eines HTML-Dokuments

Aufbau einer vollständigen HTML-Datei mit doctype, head und body.

Lernziel

Du kennst die wichtigsten Bestandteile eines HTML-Dokuments und verstehst, wofuer jeder Bereich benoetigt wird.

Worum es geht

Fast jede HTML-Datei folgt demselben Grundaufbau. Dieses Geruest hilft dem Browser, die Seite korrekt zu interpretieren und sauber darzustellen. Auch wenn eine Datei am Anfang gross und unuebersichtlich aussieht, folgt sie fast immer dieser Grundordnung.

So kannst du dir das merken

Eine gute Denkweise fuer Einsteiger ist: Ein HTML-Dokument hat einen Rahmen, Informationen ueber die Seite und den sichtbaren Inhalt. Wenn du diese drei Bereiche erkennst, liest du HTML-Dateien deutlich ruhiger und sicherer.

Grundgeruest

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
</head>
<body>
    <h1>Hallo Welt</h1>
</body>
</html>

Drag-Aufgabe

Baue die wichtigsten Teile des Grundgeruests einmal selbst zusammen. So verinnerlichst du, welche Zeilen in fast jeder HTML-Datei immer wieder vorkommen.

Bausteine

Baustein ziehen oder anklicken, dann in eine Luecke setzen.

Live-Beispiel

Browser-Tab: Meine Seite

Hallo Welt

Was bewirkt der Code?

DOCTYPE teilt dem Browser mit, dass es sich um modernes HTML handelt. Im html Element steht die Sprache. Der head enthaelt unsichtbare Informationen wie Zeichensatz und Seitentitel. Im body liegt alles, was Besucher direkt sehen. Wenn du spaeter CSS-Dateien, Meta-Angaben oder Skripte einbindest, begegnen dir diese Bereiche immer wieder.

Merke dir

Im head stehen Metadaten. Im body stehen Inhalte wie Texte, Bilder, Listen oder Formulare. Wenn du dieses Grundgeruest sicher erkennst, verstehst du spaeter auch groessere HTML-Dateien viel schneller.

Weiter →