HTML-Code verstehen

Grundlagen

Ziele

  • Du erklärst das Prinzip von Tags.
  • Du kennst das Grundgerüst eines HTML-Dokuments mit den Tags <html>, <head>, <title> und <body>.

Jedes Dokument beginnt mit dem Befehl <!DOCTYPE html>.
Dieser sagt dem Browser, welchen Typ das aktuelle Dokument hat. Er muss wissen in welcher Programmier- oder Textbeschreibungssprache deine Seite verfasst ist, um sie richtig lesen zu können.

Der HTML-Quellcode wird von den Tags <html> und </html> eingeklammert. Dadurch weiß der Browser, welchen Teil des Dokumentes er interpretieren soll.

Dabei hast du schon die wichtigste Struktur von HTML-Dokumenten kennen gelernt: die Tags. Ein HTML-Element steht immer zwischen einem Start-Tag und einem Schluss-Tag. Letzterer beinhaltet immer einen Slash (/).

<p>Diese Tags markieren beispielsweise einen Absatz (engl. paragraph)</p>

Im Head-Element ist Information enthalten, die man nicht direkt auf der Seite sehen kann. Dazu gehört zum Beispiel der Titel der Seite. Diesen kannst du im Browser oben auf den Tabs sehen.

Platz für deine Inhalte hast du zwischen den Tags <body> und </body>, dem Body-Element. Hierbei handelt es sich um den später sichtbaren Bereich.

Das Code-Grundgerüst

<html>
	<head>
		<title>Meine erste Seite</title>
	</head>
	<body>
		Hier erscheinen meine Inhalte.
	</body>
</html>

Dabei handelt es sich um die Mindestangaben, die man für ein HTML-Dokument benötigt. Wenn du das Ganze mit KompoZer ausprobierst, sieht es so aus:

Screenshot im WYSIWYG-Modus Screenshot im Quelltext-Modus

Öffne ein neues HTML-Dokument mit KompoZer. Schreibe etwas Text (vorerst unformatiert) im WYSIWYG-Modus. Speichere deine Seite und gebe ihr einen Titel. Dann wechsle in den Quelltextmodus.
Findest du die Tags <title> und <body>?

Computer-Eule