Titel

Beschreibung 01.01.1977

Überblick

Bestandteile einer korrekten HTML Datei

Das Skelett

Jedes HTML Dokument besteht aus den zwei großen, sehr unterschiedlichen Teilen: "Kopf" und "Körper". Zusätzlich gibt es ein paar Formalitäten, die man braucht, aber nicht unbedingt verstehen muss.

Eine leere, korrekte HTML Datei. ex-html-mini-correct.html.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ein Titel</title>
</head>

<body>
</body>
</html>

Bei diesem HTML Dokument sind folgende Dinge bemerkenswert:

  1. Es ist syntaktisch korrekt.
  2. Es ist absolut leer.
  3. Im Tab des Browsers erscheint der Text "Ein Titel".

Erklärung

<!doctype html>
Die spezielle Zeile mit dem Schlüsselwort !doctype muss als erstes in einer HTML Datei stehen. Damit wird der Browser darüber informiert, um welche Art Dokument es sich eigentlich handelt. Früher war es wichtig, dort die HTML Spielart oder Version zu bestimmen, z.B. "html 4.01" oder "xhtml". Heute gibt es nur noch "html".
<html lang="de">
Mit der Marke (englisch: "tag") <html> wird das Dokument eröffnet. Die Marke <html> ist gleichzeitig die Wurzel (engl. "root") des DOM (Document Object Model). Das DOM repräsentiert das Dokument in einer Baumstruktur.
Das Attribut lang in der Marke <html> ermöglicht es, die Sprache bekannt zu geben, in der das Dokument verfasst ist. lang kann als Attribut in nahezu jedem Element verwendet werden. An dieser Stelle hat es eine Bedeutung für das ganze Dokument.
Die Werte von lang sind Kürzel wie "de" für deutsch, "en" für englisch, "fr" für französisch, etc.
<head>
Diese Marke leitet den Kopfteil einer HTML Datei ein. Im Kopf befinden sich Informationen, die vom Browser ausgewertet werden.
<meta charset="utf-8">
Hier wird das Element meta, das nur im "head" auftreten kann, benutzt und über das Attribut charset="utf-8" der Zeichensatz des Dokuments festgelegt. Diese Zuweisung ist wichtig, weil der Browser sonst "irgend etwas" als Zeichensatz annimmt und dann sehr merkwürdige Sachen auf dem Bildschirm erscheinen können.
Warum? Im WWW wird heutzutage UTF-8 als internationaler Zeichensatz benutzt. Das war nicht immer so und auch heute verwenden manche Betriebssysteme und Textprogramme noch immer einen der vielen anderen Zeichensätze. Welcher Zeichensatz vom Browser ohne diese Angabe verwendet wird, ist deshalb unklar und hängt von Standort, Browser, Betriebssystem, etc. ab. (Ohne die Anweisung würde in meinem Fall laut W3C Validator der Zeichensatz "windows-1252" benutzt, was unter Umständen zu lustigen Ausgaben auf dem Bildschirm führen könnte.)
<title>
Der Titel im "head" wird im Browser Fenster nicht angezeigt und ist etwas anderes als die Hauptüberschrift (<h1>). Der Titel im "head" dient zur lesbaren Identifikation eines Dokumentes. Er erscheint als Text des Reiters, in dem das Dokument geöffnet ist und er wird von Suchmaschinen ausgewertet.
Das Element "title" ist laut W3C obligatorisch.
<body>
Hier spielt die HTML-Musik. Im Körper steht der eigentliche Inhalt der HTML Datei. Hier stehen die Dinge, die ein Mensch zu sehen bekommt: Text, Bilder, Videos, etc.
In unserem Fall steht hier gar nichts.
</head>, </body> und </html>
Mit einem "/" hinter dem "<" beenden diese Marken einen Abschnitt. Sie schließen das Element, das sie vorher ohne den "/" geöffnet haben.

Exkurs: Kaputtes Skelett

Eine leere HTML Datei. Noch nicht mal korrekt. ex-html-mini-incorrect.html

<!doctype html>
<html>
<head>
</head>

<body>
</body>
</html>

Gleich zu Anfang der Arbeit mit HTML ist eine Warnung angebracht.

Diese Datei ist formal nicht korrekt, aber kein Browser wird einem das sagen.

Browser sind so geschrieben, dass sie Fehler verstecken und sogar aus dem letzten Schrott stillschweigend irgendetwas Sinnvolles machen.

Aufgabe
  1. Die Webseite W3C Markup Validation Service aufrufen.
  2. Den Knopf Browse drücken.
  3. Die nicht korrekte Datei auswählen.
  4. Den Knopf Check drücken.
  5. Das Ergebnis ansehen.

Der Körper (body)

Der inhaltliche Körper einer HTML Seite mit den Informationen für den Menschen

Im "body" der HTML Datei spielt die Musik. Hier werden Bilder, Texte, Multimedia, Grafiken und was auch immer eingetragen. Einfach alles, was ein Besucher der Seite zu sehen bekommt.

Im Body wird auch die Strukturierung der Seite vorgenommen. Dazu gibt es Elemente, die Text, Objekte und Bilder aufnehmen können.

Es gibt wirklich eine ganze Menge Elemente. Das folgende Beispiel benutzt ein paar davon, um zu zeigen, wie es geht.

Der Körper. tpl-html-mini.html

<body>
<!-- Hauptüberschrift der Seite. Einmalig. -->
<h1>Thema XXX</h1>

<!-- Sektions-, Artikel-, Abschnittsüberschrift. -->
<h2>Abschnitt XXX</h2>

<!-- Der Text. -->
<p>Text XXX</p>

<!-- Erste Untergliederung im Abschnitt. -->
<h3>Unterabschnitt XXX</h3>
<p>Text XXX</p>

<!-- Zweite Untergliederung im Abschnitt. -->
<h4>Nochmal untergliedert XXX</h4>
<p>Text XXX</p>

<h2>2. Abschnitt XXX</h2>
<p>Text XXX</p>
</body>

Das Beispiel ist als strukturelle Vorlage eines sehr einfachen und wenig strukturierten HTML Dokuments gedacht.

Um es zu wiederholen: HTML ist eine formale Sprache, mit der man Inhalte strukturieren kann und soll.

"Strukturieren" heißt aber nicht: "bunt machen", Struktur und Layout sind zwei verschiedene Sachen

In diesem Beispiel werden nur Überschriften zur Strukturierung benutzt. Auch wenn mit HTML5 weitere, wichtige Elemente dazugekommen sind, werden die Überschriften von "h1" bis "h6" immer noch als wesentliche Strukturelemente angesehen.

Erklärung
<h1>
Die Überschrift der Ebene 1. Auf dieser Ebene soll es je Seite nur eine Überschrift geben, die als Hauptüberschrift für die Seite gilt.
<h2>
Überschriften der Ebene 2 übernehmen die Grobgliederung der Seite.
<h3> und <h4>
Überschriften der Ebene 3 und 4 untergliedern große Abschnitte. (Überschriften der Ebenen 5 und 6 werden selten gebraucht und sind ohne Modifikation des CSS auch nicht als Überschrift erkennbar.)
<p>
Das <p> steht für "Paragraph" oder auch Absatz. Text innerhalb des p-Klammerpaares wird einfach hintereinander weg geschrieben, wie in einer Textverarbeitung. Zeilen werden beim Anzeigen durch den Browser umgebrochen.

Manuell eingegebene Zeilenumbrüche werden vom Browser ignoriert, genau wie mehrfache Leerzeichen, Tabulatoren etc.

Aufgaben
  1. Nehmen Sie wieder die Datei html-mini-correct.html und schreiben Sie statt der XXX irgendwas sinnvolles in die Datei. Sehen Sie sich das Ergebnis im Browser an.
  2. Erweitern Sie einen der mit <h2> gekennzeichneten Abschnitte und unterteilen Sie ihn mit weiteren Überschriften bis <h6>
  3. Probieren Sie die Überschrift der Ebene 7. Schreiben sie Text in die Überschrift und sehen Sie, was der Browser damit macht.
  4. Schreiben Sie langen Text mit Zeilenumbrüchen in die Paragraphen.
  5. Schreiben Sie Text außerhalb der Paragraphen und prüfen Sie im Browser, was dabei herauskommt.

Vorlagen

Unterschiedliche Vorlagen für ein neues HTML Dokument

Es ist hilfreich, ein paar Vorlagen für leere HTML Dokumente zu haben, auf die man in unterschiedlichen Situationen zurückgreifen kann.

Hier sind drei Beispiele:

tpl-html-mini.html
Kann man gebrauchen, wenn man ganz schnell etwas in HTML dokumentieren möchte und wenig Wert auf umfangreiche Weiterverarbeitung legt. Es ist syntaktisch korrekt, beinhaltet alles Wesentliche, muss aber komplett aufgebaut werden.
tpl-html-standard.html
Die Vorlage für alle Fälle, in denen man noch nicht weiß, wie kompliziert das Ganze werden wird. Beinhaltet eine rudimentäre Einteilung mit semantischen Elementen, ein paar Kommentare und Einschübe für JavaScript und CSS.
tpl-html-full.html
Eine Vorlage für den Fall, dass man weiß, dass alles etwas umfangreicher werden und länger dauern wird. Die Vorlage ist ausführlich kommentiert und durch semantische Elemente strukturiert.

Die Vorlagen haben an Stellen, an denen man Anpassungen vornehmen muss, ein "XXX" stehen. Ansonsten muss man einfach alles entfernen, was man nicht braucht.