Hypertext Markup Language - HTML

1. Wichtige Grundlagen (Elemente, Tags, Verschachtelung, Attribute, Grundgerüst)

Elemente, Tags und deren Verschachtelung

HTML-Dateien bestehen aus reinem Text, wobei einzelne Textstellen speziell ausgezeichnet werden können, wenn man z.B. will, dass sie fett oder kursiv dargestellt werden.
Die so genannten HTML-Elemente werden durch einen einleitenden und einen abschließenden HTML-Tag markiert. Zwischen den Tags gilt das entsprechende Element. Ein Tag steht zwischen spitzen Klammern, ein abschließender Tag wird mit einem "/" gekennzeichnet.

Z.B:

<b>Dieser Text wird im Browser fett erscheinen</b>

In HTML spielt es eigentlich keine Rolle, ob man die Elementnamen in den Tags klein oder groß schreibt. Da man in naher Zukunft im Web allerdings auf die modernere Variante von HTML - XHTML - umsteigen wird, empfiehlt es sich sich gleich die kleingeschriebene Variante, die in XHTML Pflicht ist, anzugewöhnen.

Einige Elemente werden mit so genannten "Standalone-Tags" ausgezeichnet und benötigen in HTML also keinen abschließenden Tag. Solche Elemente sind z.B. <hr> (fügt eine Linie ein) und <br> (fügt einen Zeilenumbruch ein). Auch hier unterscheidet sich XHTML von HTML. In XHTML sind abschließende Tags zwingend erforderlich. Will man die Tags von Anfang an XHTML-konform schreiben so gibt es 2 Möglichkeiten diese Elemente auszuzeichnen:

- Normaler abschließender Tag:

Hier kommt der Zeilenumbruch <br></br> und das steht jetzt in der nächsten Zeile.

- Anfangs- und Endtag in einem:

Hier kommt der Zeilenumbruch <br /> und das steht jetzt in der nächsten Zeile.

In HTML ist es sehr oft erforderlich, Elemente zu verschachteln. Will man z.B. in einem fett geschriebenen Textteil ein einzelnes Wort auch kursiv formatieren, so sieht das so aus:

<b> Dies ist der fette Teil in dem ein <i>Wort</i> kursiv geschrieben ist.</b>

Beim Verschachteln von Elementen ist immer darauf zu achten, dass das zuletzt geöffnete Element auch immer zuerst wieder geschlossen wird.

Attribute

Attribute definieren einen Tag näher. Z.B. zeichnet man mit dem Tag <h1> eine Überschrift aus. Die Auszeichnung bewirkt, dass der eingeschlossene Text relativ groß und fett formatiert wird und danach eine Leerzeile kommt. Will man auch noch, dass die Überschrift zentriert ist, so kann man das über das Attribut "align" festlegen.

Mit

<h1 align="center">Diese Überschrift ist zentriert.</h1>

wird der Text also zusätzlich zur Formatierung als Überschrift auch noch zentriert. Der Wert eines Attributes ist zwischen Anführungszeichen zu stellen.

Es gibt mehrere Arten von Attributen:

- Attribute mit eingeschränkter Wertzuweisung: Bei dieser Art von Attributen sind nur ganz bestimmte Werte erlaubt. Nehmen wir als Beispiel das uns bereits bekannte Attribut "align", so sind als Werte left (linksbündig), center (zentriert), rechts (rechtsbündig) und justify (Blocksatz) erlaubt.

- Attribute mit bedingt freier Wertzuweisung: Bei diesen Attributen gibt es zwar praktisch unendlich viele mögliche Werte, es wird allerdings eine ganz bestimmte Konvention oder ein ganz bestimmer Datentyp erwartet. Bindet man beispielsweise ein Script in die Webseite ein, so könnte das so aussehen:

<script type="text/javascript">

Als Wert für das Attribut "type" muss immer ein Mime-Type stehen, der wie wir aus dem Kapitel Internet/Dienste wissen immer in der Form Typ/Untertyp aufgebaut ist.
Ein anderes Beispiel ist:

<table border="1">

Es sind hier theoretisch Werte von 0 bis unendlich möglich, es müssen allerdings numerische Werte sein.

Attribute mit freier Wertzuweisung: Hier ist der zugewiesen Wert beliebig. Z.B:

<p id="Haupttext">

Attribute ohne Wert: z.B:

<hr noshade>

Solche Attribute gibt es nur in HTML. In XHTML bekommen diese Attribute einen "künstlichen" Wert und werden wie folgt verwendet:

<hr noshade="noshade">

Das Grundgerüst einer HTML-Datei

Eine HTML-Datei besteht aus 3 Teilen:

  • Dokumenttyp-Angabe: Sie gibt an welche HTML-Version verwendet wird.
  • Header: Er enthält die Kopfdaten wie Titel und Meta-Angaben
  • Body: Er enthält das, was im Browser wirklich angezeigt werden soll.

Der gesamte Inhalt des HTML-Dokuments wird von <html> und </html> umschlossen. Man bezeichnet das als Wurzelement.

Das Ganze sieht dann in etwa so aus:

DIE DOKUMENTTYPANGABE

HTML ist nur eine von vielen Sprachen mit denen man Text auszeichnen kann. Von HTML selber gibt es außerdem viele verschiedene Versionen. In der Dokumenttypangabe legt man fest, welche Sprache man in welcher Version verwendet. Moderne Browser interpretieren die verschiedenen Versionen von HTML oft auch unterschiedlich.
Etwas genauer gesagt legt die Dokumenttypdefinition fest, welche Elemente in der HTML-Datei verwendet werden dürfen, wie sie verschachtelt werden bzw. ob sie ineinander verschachtelt werden dürfen und welche Attribute zu ihnen gehören.

Die Dokumenttypangabe wird vor dem <html>-Tag notiert und mit

<!DOCTYPE HTML PUBLIC

"PUBLIC" bedeutet, dass es sich um eine Dokumenttypdefinition handelt, die öffentlich verfügbar ist. Man könnte nämlich auch eigene Dokumenttypdefinitionen verfassen und diese dann angeben.

Als Nächstes folgt eine Angabe wie z.B:

"-//W3C//DTD HTML 4.01 Transitional//EN"

Darin steht gleich am Anfang der Herausgeber der DTD - in unserem Fall also das W3C. Danach ist definiert welche Sprachversion genau verwendet wird. In dieserm Fall HTML 4.01 in der Variante "Transitional". "EN" bezeichnet dann die Sprache in der die Elemente und Attribute definiert werden und nicht die Sprache des Inhaltes der Datei.

Nach dieser Angabe folgt meist noch die Angabe einer Webadresse über die die DTD ausgelesen werden kann.

Gängige Dokumenttypangaben sind:

HTML/Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dies ist die strengste HTML-Variante und verbietet es "veraltete" Elemente d.h. Elemente, die mittlerweile durch andere Technologien wie z.B. CSS ersetzt wurden, zu verwenden. Es ist auch nicht erlaubt zwischen <body> und </body> einfach nur Text anzugeben, sondern alle Inhalte müssen durch Block-Elemente eingeschlossen werden.

HTML/Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Diese Variante benutzt man, wenn man ältere Elemente und Attribute noch weiterhin verwenden möchte. Dies ist meistens dann der Fall, wenn man noch für Browser programmiert, die kein CSS beherrschen.

HTML/Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Diese Variante verwendet man für HTML-Dokumente in denen ein Frameset definiert wird.

... und dann gibt es noch unendlich viele weitere !!!