Eine durchschnittliche Webseite besteht aus einer oder mehreren HTML-Dateien. HTML steht für Hyper Text Markup Language. 'Hyper Text' meint die jedem Websurfer vertrauten Links: Text auf der Webseite kann auf andere Webseiten verweisen, und mit Hilfe eines Mausklicks kann man diesen Verweisen folgen. 'Markup Language' ist die Bezeichnung für den «Sprachtyp» von HTML. markup heißt soviel wie «Auszeichnung», im Sinne von etwa «Beschriftung». Das bedeutet, eine HTML-Datei enthält den Text Eurer Webseite, zusammen mit Anweisungen (eben den Auszeichungen), wie der Browser diesen Text darstellen soll.

Solche Auszeichnungen nennt man Tags. Es gibt (normalerweise) einen öffnenden und einen schließenden Tag. Die Wirkung des Tags erstreckt sich auf den Text dazwischen. Wie das aussieht, zeigt folgender Ausschnitt

Ein Teil dieses Texts ist <b>fett gedruckt</b>.

Im Browser sieht das dann so aus

Ein Teil dieses Texts ist fett gedruckt.

Dieses Beispiel zeigt bereits einige grundlegende Regeln: Der Name des Tags ist in spitzen Klammern (< und >) eingeschlossen. Das schließende Tag entspricht dem dazugehörigen öffnenden Tag, hat aber zusätzlich einen Slash (/) vor dem Tagnamen. In unserem Fall ist '<b>' das öffnende Tag und '</b>' das schließende. Es gibt auch Tags ohne schließende Tags, sogenannte leere Tags.

Ihr könnt Tags auch verschachteln. Das bedeutet, im «Wirkungsbereich» eines Tags befinden sich weitere Tags. Dabei müßt Ihr allerdings darauf achten, daß sich die Tags nicht überlappen. Möglich ist also

<b>Dieser Tag enthält einen <i>weiteren</i> Tag</b>

aber nicht

<b>Dieser Tag enthält einen <i>weiteren</b> Tag</i>

Ihr müßt also den Tag zuerst schließen, den ihr zuletzt geöffnet habt.

Vielen Tags könnt Ihr auch Attribute mitgeben. Das kann zum Beispiel bei einem <a>-Tag (der einen Link erzeugt) die Adresse sein, wo der Link hinführen soll

<a href="http://ein.server.test/index.html">Dies ist ein Link</a>

Die Syntax ist also einfach

<tagname attributname="attributwert"/>

Einige Attribute sind sogenannte boolsche Attribute. Ihnen wird kein besonderer Wert zugewiesen; sie sind nur entweder vorhanden oder nicht vorhanden. Ihr braucht einfach nur den Attributnamen anzugeben

<tagname attributname>

Ihr könnt auch den Namen des boolschen Attributs als Wert verwenden

<tagname attributname="attributname">

Den meisten Browsern ist es egal, ob Ihr die Tagnamen groß oder klein schreibt. Ich empfehle jedoch, die Tagnamen durchgehend klein zu schreiben, da der wahrscheinliche HTML-Nachfolger XHTML (dazu viel später mehr) das verlangt. Gleiches gilt für die Frage, ob die Attributwerte in Anführungszeichen gefaßt werden. Die meisten Browser tun's auch ohne ", aber in XHTML sind sie Pflicht. Also solltet Ihr sie Euch von Anfang an angewöhnen. Ebenfalls aus XHTML stammt die zweite oben gezeigt Methode für boolsche Attribute (der Attributname als Wert). Auch das solltet Ihr schon in «normalem» HTML so halten.

Ihr könnt in Euren HTML-Dateien auch Kommentare einfügen. Das sind Notizen und Anmerkungen, die vom Browser ignoriert werden. Ein Kommentar hat folgende Form

<!-- Dies ist eine Anmerkung zum HTML-Code
     und wird vom Browser ignoriert -->

Wie ihr seht, kann sich ein Kommentar auch über mehrere Zeilen erstrecken. Kommentare sind nicht die einzige Möglichkeit, Euren HTML-Code lesbarer zu gestalten: Zeilenumbrüche werden vom Browser ignoriert, mehrfache Leerzeichen werden zu einem «zusammengestrichen».

Es gibt in gewissem Sinne zwei Gruppen von Tags im Sprachumfang von HTML. Einerseits gibt es die physikalischen Tags, mit denen Ihr das konkrete Aussehen Eurer Seite bestimmen könnt (Fettdruck, Kursiv, ...). Wichtiger sind die logischen Tags. Ein logischer Tag sagt etwas über die Funktion im Dokument aus und weniger darüber, wie das Element konkret formatiert wird. Ihr bezeichnet also beispielsweise einen Text als 'Überschrift erster Ordnung'; für die konkrete Formatierung dieser Überschrift erster Ordnung ist der Browser zuständig. Diese logischen Tags haben den Vorteil, daß verschiedene Browser auf verschiedenen Plattformen die Möglichkeit haben, die Elemente Eurer Webseite verschieden zu formatieren (beispielsweise auf einem normalen Desktop-Computer einerseits und einem kleinen Handheld-Display andererseits).

Übersicht

Gerüstbau
Jedes HTML-Dokument hat eine bestimmte Grundstruktur, die Ihr in diesem Abschnitt kennenlernt.

Zeichen und Wunder
Vor der Vorstellung der einzelnen Tags, mit denen Ihr Eure Webseite aufbauen könnt, noch ein paar Worte zu Zeichensätzen, Umlauten und anderen Sonderzeichen.

Meine ersten Tags
Nach der langen Vorrede geht es in diesem Abschnitt endlich in medias res: Ihr lernt die ersten Tags kennen, um den Text auf Eurer Webseite zu strukturieren.

Bildchen
Heute findet Ihr auf den meisten Webseiten nicht nur reinen Text, sondern auch Zeichnungen, Fotos, etc. Dieser Abschnitt erklärt, wie Ihr Grafiken in Eure Webseiten einbauen könnt.

Weg weisen
Einer der Gründe für den rasanten Erfolg des WWW und von HTML ist wohl die Möglichkeit, Links zu setzen. Hier lernt Ihr, wie das geht.

Un-Logisches
Wie bereits mehrfach angeklungen ist, solltet Ihr in Euren Seiten möglichst nur logische Tags verwenden und die Formatierung mit CSS erledigen. Da aber in vielen Codes noch die alten, physikalischen Tags vorkommen (und sie in bestimmten Situationen auch heute noch ganz praktisch sein können), werden sie in diesem Abschnitt kurz vorgestellt.

Zeilen, Spalten, Zellen
Tabellen werden nicht nur benutzt, um «richtige» Tabellen auf Eurer Webseite darzustellen. Häfig sind auch sogenannte blinde Tabellen, mit denen Ihr die Elemente Eurer Webseite (Texte, Grafiken, ...) anordnen könnt.

Formularkram
Auf vielen Webseiten könnt Ihr Formulare ausfüllen und damit Informationen an die Seite schicken. Dieser Abschnitt zeigt, wie Ihr solche Formulare mit HTML realisiert.

Immer schön im Rahmen
Hier geht es darum, wie Ihr mehrere HTML-Dateien auf einmal in den Browser bringt. Das ist beispielsweise dann hilfreich, wenn der User zum Lesen eines längeren Texts zwar einerseits scrollen soll, das Menu aber andererseits immer erreichbar bleiben muß. Dann kommen Frames ins Spiel.

Multi-Medien
Zu Beginn war HTML rein textorientiert gedacht, mit den img-Tags als einzige Ausnahme. Heute aber sollen Webseiten multimedial sein, mit Flash-Filmen, Hintergrundmusik, eingebetteten Streaming-Quellen und vielem mehr. Wie Ihr solche Dinge (mehr oder weniger gut) realisieren könnt, seht Ihr in diesem Abschnitt.

(Fast) immer und überall
Es gibt eine Reihe von sogenannten Universalattributen, die ihr in fast jedem Element einsetzen könnt. Hier lernt Ihr die wichtigsten dieser Universalattribute kennen.

Kopflastig
Bisher haben wir uns nur mit dem Body beschäftigt und den zweiten Teil jeder HTML-Datei fast vergessen: Den Head. Und von genau dem handelt der letzte Abschnitt des HTML-Teils.