HTML-Grundlagen

Eigenschaften von HTML

Die Definition von HTML (Hypertext Markup Language) erfolgt über SGML (Standard general Markup Language).
HTML ist eine Auszeichnungssprache, wobei einzelne logische Bestandteile eines Dokuments mit den entsprechenden Formatierungsbefehlen, den so genannten Tags, gekennzeichnet werden.
Wir kennen einen ähnlichen Vorgang auch aus der Textverarbeitung, wo einzelne Elemente besondere Formatierungen und Schriftauszeichnungen erhalten oder durch Überschriften und Unterüberschriften gegliedert werden.
All dies ist auch mit HTML möglich.

Dieses Beschreibungsschema ist hierarchisch aufgebaut. Darunter versteht man, dass es übergeordnete und untergeordnete Elemente gibt. So wie eine Überschrift 2. Ordnung einer Überschrift 1. Ordnung zugehörig, also von ihr "abhängig" ist, genau so kann ein Absatz einem anderen Absatz untergeordnet sein.

Die Tags, also die beschreibenden Befehle, werden von den so genannten Browsern interpretiert und - ähnlich wie bei einer Textverarbeitung - richtig formatiert dargestellt.

Der Einsatz von Verweisen (Hyperlinks) ermöglicht die Verknüpfung von Dokumenten. Die Texte selbst werden im Klartextformat abgelegt, das heißt die Bearbeitung und Speicherung ist in jedem beliebigen Texteditor möglich. Beim Speichern eines Textes muss jedoch darauf geachtet werden, dass die Datei im "Nur-Text-Format" abgelegt wird.

Ein unschätzbarer Vorteil des HTML-Formats und der damit verbundenen Möglichkeit der Verknüpfung von Dokumenten ist aber in erster Linie nicht das Platz sparende reine Textformat der Quelldateien, sondern vor allem die universelle Einsetzbarkeit. Dies gilt keineswegs nur für das Internet, sondern auch für Lokale Dokumentationen, Archive, Informationsaustausch oder Schulung (zum Beispiel in einem Intranet).

HTML-Versionen

HTML gibt es etwa seit Beginn der 90er Jahre. Da es sich um eine "lebendige Sprache" handelt, gab und gibt es laufend Veränderungen, Ergänzungen oder Korrekturen. Immer wieder kamen neue Befehle hinzu, wurden veraltete Befehle entfernt und die Sprache den modernen Bedürfnissen, vor allem aber dem ständig steigenden technischen Fortschritt entsprechend angepasst.

HTML 1.0:
Das war die "erste Generation", deren Spezifikation heute nicht mehr verfügbar ist.
HTML 2.0:
Wurde 1995 freigegeben. Man könnte diese Version als "Kleinsten gemeinsamen Nenner" bezeichnen. Bestimmte Tags sind aber noch immer nicht in die Browser implementiert.
Der Grund für den neuen Standard war vor allem die Aufnahme verschiedener Befehle, welche von Netscape bereits interpretiert wurden, aber noch nicht Standard waren. Es sind jedoch keineswegs alle in Netscape interpretierbaren Befehle aufgenommen worden.
HTML 3.2:
Gibt es seit 1997. Aufgenommen wurden u.a. Tabellen sowie eine Verbesserung der physischen Textauszeichnung
HTML 4.0:
Gibt es seit 1998. Es wurden u.a. Frames, Cascading Style Sheets (CSS) sowie der Einsatz von Scriptsprachen aufgenommen.
HTML 4.x:
Dies ist der momentane Standard, in den weitere Verfeinerungen nach und nach eingeflossen sind und auch weiter einfließen werden.

An den immer dichter aufeinander folgenden Änderungen des Standards ist leicht zu erkennen, dass die Entwicklung immer rascher fortschreitet. Der jeweils aktuelle Standard kann über die Seiten des World Wide Web Consortium (W3C) abgefragt werden.

Trotz intensiver Bemühungen gibt es wohl noch immer keinen Browser, der alle HTML-Befehle absolut korrekt darstellen kann. In manchen Fällen ist die Interpretation nicht nur unterschiedlich, sondern gelegentlich auch fehlerhaft. Nicht jede unkorrekte Darstellung ist daher auf fehlerhaftes HTML zurückzuführen.

Grundlagen

Bevor wir mit dem Erlernen der Sprache HTML beginnen können, müssen wir uns, wie bei jeder Fremdsprache, mit einigen Grundbegriffen vertraut machen:

Das Grundgerüst einer HTML-Datei

Die Datei ist in Kopf- und Rumpfdokument untergliedert.

Im Kopf (Englisch: Head) werden Angaben zum gesamten Dokument gemacht. Hier befinden sich beispielsweise die so genannten Metatags, die in einer eigenen Lektion behandelt werden, aber auch der Titel des Dokuments.

Im Rumpf (Englisch: Body) steht der Text des Dokuments, der mit Tags formatiert wird.

Tag = Steuerbefehl
Tags stehen immer in spitzen Klammern, z.B. (<html>). Mit wenigen Ausnahmen gibt es einen Einleitenden (<html>) und abschließenden Tag (</html>) Dazwischen liegt der Gültigkeitsbereich des Tags.

Groß- oder Kleinschreibung ist bei der Eingabe von Tags nicht wichtig und Ihrem persönlichen Geschmack überlassen. Denken Sie jedoch daran, dass Sie die Befehle editieren, also wieder finden müssen. Es empfiehlt sich daher, ein HTML-Dokument übersichtlich zu strukturieren.

Beispiel für ein einfaches Grundgerüst:

<html>
<head>
<title>Hier wird der Titel eingetragen</title>
</head>

<body>
Hier steht der Dokumenttext.
</body>
</html>

Sie können dieses Grundgerüst einerseits als Dokumentvorlage verwenden, andererseits aber auch im Laufe der weiteren Lektionen sukzessive um weitere Befehlszeilen erweitern.

Beispiel HTML-Grundgerüst

Verschachtelung von Tags

Mehrere Tags können nacheinander geschrieben werden. Ähnlich wie bei Klammerrechnungen in der Mathematik sollte man jedoch streng darauf achten, dass die Tags auch in der richtigen Reihenfolge wieder geschlossen werden:

Beispiel:

<h1><i>Wir lernen HTML</i></h1>

Das Beispiel zeigt uns, dass zuerst die Überschrift der Ebene 1 definiert wird, danach folgt eine Schriftformatierung für "Italic" (kursiv), gefolgt vom Text, auf den diese Formatierungen angewandt werden sollten. Der Regel folgend wird zuerst die Schriftformatierung und erst danach die Überschrift wieder geschlossen.
Über die Befehle im Einzelnen erfahren Sie in einer eigenen Lektion.

Attribute in Tags

Attribute können ausschließlich einleitenden und Standalone-Tags, nicht jedoch ausleitenden Tags, zugewiesen werden. Sie dienen der Spezifikation des Tags.

Beispiel:

<h1 align=center>Wir lernen HTML</h1>

Damit wird einer Überschrift der 1. Ordnung zusätzlich das Attribut "Zentrierung" zugewiesen.

Arten von Attributen

Nicht jedem Tag kann jeder x-beliebige Wert zugewiesen werden. Erlaubte Werte für die Überschriftenausrichtung sind z. B. nur die Attribute:
"center" = zentriert, "left" = linksbündig, "right" = rechtsbündig und "justify" = Blocksatz.

Numerische Wertzuweisungen sind z. B. für eine Trennlinie mit bestimmter Breite möglich. Die Wertzuweisung kann beispielsweise in Pixeln erfolgen:

<hr width=300>

Eine Prozentuale Wertzuweisung ist ebenfalls denkbar, bei der zum Beispiel die Trennlinie immer 10 Prozent des Anzeigefensters einnimmt:

<hr width=10%>

Es gibt auch Attribute mit variablen Namen, z. B. der Dateiname zu einer Grafikreferenz:

<img src="rathaus.jpg">

Maskierung von Umlauten

Viele Sonderzeichen und deutsche Umlaute müssen maskiert werden; sie können nicht eingegeben werden, wie wir sie auf der Tastatur vorfinden. Dies geschieht in erster Linie mit Rücksicht auf anderssprachliche Systeme, die unsere deutschen Umlaute möglicherweise nicht darstellen können, weil diese Zeichen eben nicht verfügbar sind.

Beispiel:

Vermissen Sie das Cent-Zeichen? Eine vollständige Auflistung aller Sonderzeichen und deren Maskierung finden Sie in SELFHTML.

Allgemeine Regeln

Zeilenumbrüche, Leerzeilen oder Tabulatoren im Quelltext dienen vorwiegend der Übersichtlichkeit für den Autor und werden vom Browser ignoriert! Mehrere Leerzeichen hintereinander müssen in HTML gesondert eingegeben werden.
Um einzelne Leerzeichen zu erzwingen, schreibt man &nbsp;.
Sehr bald lernen Sie aber wesentlich elegantere Methoden zur Textstrukturierung kennen.

Dateinamen

Viele Server sind UNIX-Systeme. Das bedeutet, es wird strikt zwischen Groß- und Kleinschreibung unterschieden! Am Einfachsten ist es daher, Dateinamen nur in Kleinbuchstaben zu schreiben.
Es dürfen auch keine Umlaute oder Sonderzeichen in Dateinamen vorkommen; eine Ausnahme ist das Zeichen Underscore (_), welches auf der deutschen Tastatur oberhalb des Bindestriches liegt.

Default-Datei

Fast alle Web-Server sehen eine bestimmte Datei als Einstiegsseite vor. Meist heißt diese Datei index.htm oder index.html, gelegentlich auch welcome.htm oder default.htm.
BesucherInnen brauchen dies jedoch nicht zu wissen, weil durch die Eingabe der Adresse und die Festlegung durch den Web-Anbieter ohnehin auf die richtige Datei zugegriffen wird.

Kommentare

Kommentare können beliebig in der Quelldatei gesetzt werden. Es gibt mehrere Gründe, einen Quellcode mit Kommentar zu versehen. Hier seien nur einige genannt; Sie kennen sicher weitere:

Beispiel:

<!-- Das ist ein Kommentar -->

Ein Kommentar wird in einem HTML-Dokument nicht angezeigt; er dient nicht den BesucherInnen der Seite, sondern dem Autor bzw. den Autoren.
Innerhalb eines Kommentars können Tags unmaskiert verwendet werden.

--> beendet einen einzeiligen Kommentar
//--> beendet einen mehrzeiligen Kommentar