Die erste HTML-Datei

Text

Text wird in HTML-Dateien einfach so geschrieben, wie er ist. Dabei werden folgen von Whitespaces zu einem einzelnen Leerzeichen zusammengefasst. Der Zeilenumbruch erfolgt automatisch und ist von der Breite des Browserfensters und der gewählten Schriftgröße abhängig:

Dies ist ein



Beispiel für die         Zusammenfassung von

Whitspaces

Dies ist ein Beispiel für die Zusammenfassung von Whitspaces

Tags

Formatierungen und Zusatzinformationen werden mit sogenannten Tags angegeben. Tags sind dabei in spitze Klammern eingeschlossen: Das normale Tag <TAG> leitet einen Bereich ein und dasselbe Tag mit einem führenden Schrägstrich (</TAG>) beendet den Bereich. TAG wird dabei immer durch den Namen des jeweiligen Tags ersetzt.

Das minimale HTML-Dokument

Das erste Tag, dem jeder HTML-Autor begegnet, ist <html>. Es umschließt das gesamte HTML-Dokument. Jedes HTML-Dokument besteht aus zwei Bereichen:

  1. Der Kopf des HTML-Dokuments
    Der Kopf ist in <head>-Tags eingeschlossen und beinhaltet Informationen über das Dokument, die sogenannten Meta-Informationen.
  2. Der Rumpf des HTML-Dokuments
    Der Rumpf ist in <body>-Tags eingeschlossen und enthält den eigentlichen Inhalt des HTML-Dokuments.

Daraus folgt dieser grundlegende Aufbau:

<html>
    <head>
    </head>
    <body>
    </body>
<html>

Einrückungen spielen für die Formatierung keine Rolle. Da sie auf einen Zeilenumbruch folgen, werden sie einfach wie alle anderen Whitespaces auch mit dem Zeilenumbruch zu einem Leerzeichen zusammengefasst. Sie köännen jedoch die Lesbarkeit für Menschen stark erhöhen.

Der Kopf beinhaltet mindestens den Titel des Dokuments. Dieser Titel wird bei üblichen Browsern in der Titelzeile des Browserfensters angezeigt und dient außerdem als Name der Seite bei der Speicherung von Lesezeichen. Ein Titel wird in <title>-Tags eingeschlossen.

Der Rumpf braucht natürlich noch etwas Text, damit das Dokument auch Inhalt hat. In Anlehnung an die "Hello, world"-Tradition in der Programmierung hier ein "Hello, world"-Beispiel:

<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        Hello, world!
    </body>
<html>

Dieses Beispiel als Datei hello.html abgespeichert sieht im Browser sieht so aus:

Aufgabe: Die erste eigene HTML-Datei

Erstelle eine einfache HTML-Datei mit dem Titel "Versuch" und dem Text "macht kluch".

Experimentiere ein wenig mit verschiedenen Texten.


Creative Commons License
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.