☯ HTML als Markierungssprache

HTML-Primer: Was in HTML-Büchern fehlt

HTML als Markup-Language

Was heißt ..ML?

Die beiden letzten Buchstaben in „HTML” sagen uns, dass es sich bei HTML um eine Markup-Language, also eine Sprache zur Markierung (nämlich von Seiten-Objekten, z.B. Text-Elementen, Bildern, etc.) handelt. Solche gab es bereits lange bevor es das Web gab. Verlassen wir also jetzt einmal das Thema Internet/Web und gehen in einen Zeitungsverlag. Dort hielt die Seitenmarkierung schon vor dem Web Einzug.

Chaotische Dokumenten-Formatierung

Vereinfachen wir die komplexen Abläufe bei einer Zeitung und stellen uns vor, die Reporter schickten ihre Nachrichten immer direkt zu dem Drucker. Im folgenden nehmen wir zwei Nachrichten von verschiedenen Reportern:

Artikel 1

Olmuth, 1. Mai 2010: Traktortank explodiert. Von Alwin Emmes.
Bei der Ölstandsmessung hat sich der 28jährige Traktorfahrer Ludwin B. leicht verletzt, als er den stark überhitzten Ölstab aus Versehen in den Tank statt in die zur Ölmessung vorgesehene Öffnung im Motorblock einführte. Weitere Personen kamen nicht zu schaden.

Artikel 2

Am 23. Juni 2010 befand sich ein Bus auf dem Weg zu den Feierlichkeiten in Luxemburg. Der Busfahrer, ein früherer Lockführer, wollte dabei die Eisenbahngleise als Fahrspur benutzen und verließ daher in Wasserbillig die Straße, um auf die Schienen aufzufahren. Da der Radstand von Bussen viel weiter ist, als der von Zügen, funktionierte das nicht und der Bus endete auf den Bahnschwellen. Reporter: Rudi Raser. Datum: 25.06.2010.

Ordnung

Der Drucker hat eine Idee, wie die Zeitung aussehen soll. Um den Leser nicht zu verwirren, sollen die Artikel ja ähnlich aussehen, wenn sie gedruckt sind. Außerdem will der Drucker die Artikel nicht erst lesen müssen, um Überschrift, Datum, Autor (Reporter) und vielleicht auch noch Unterüberschriften oder fettgedruckte Wörter festzulegen.

Also erfindet der Drucker ein Format für seine Reporter. Sie sollen die Dokumente immer in folgendem Format schicken:

Überschrift: ...
Ort: ...
Datum: ...
Text: ...
Autor: ...

Wenn sich die Reporter daran halten, wird die Arbeit des Druckers sehr erleichtert. Er wird die Dokumente z.B. so bekommen:

Artikel 1:

Überschrift: Traktortank explodiert
Ort: Olmuth
Datum: 01.05.2010
Text: Bei der Ölstandsmessung hat sich der 28jährige Traktorfahrer Ludwin B. leicht verletzt, als er den stark überhitzten Ölstab aus Versehen in den Tank statt in die zur Ölmessung vorgesehene Öffnung im Motorblock einführte. Weitere Personen kamen nicht zu schaden.
Autor: Alwin Emmes

Artikel 2:

Überschrift: Bus entgleist
Ort: Wasserbillig
Datum: 23.06.2010
Text: Heute befand sich ein Bus auf dem Weg zu den Feierlichkeiten in Luxemburg. Der Busfahrer, ein früherer Lockführer, wollte dabei die Eisenbahngleise als Fahrspur benutzen und verließ daher in Wasserbillig die Straße, um auf die Schienen aufzufahren. Da der Radstand von Bussen viel weiter ist, als der von Zügen, funktionierte das nicht und der Bus endete auf den Bahnschwellen.
Autor: Rudi Raser

Damit kann der Drucker viel besser Arbeiten. Er kann nun für alle Artikel festlegen, dass z.B. die Überschrift in großen, fettgedruckten Buchstaben an den Anfang kommt, dann darunter Ort und Datum gefolgt von dem Nachrichtentext. Den Autor (Namen des Reporters) kann er z.B. in kleiner Schriftgröße an Anfang oder Ende des Textes setzen.

Maschinenlesbare Markierung

Wenn Computerprogramme den Drucksatz erzeugen sollen, könnte man das Format etwas sicherer machen: Bei der oben verwendeten Vorlage kann eine Software vielleicht nicht immer erkennen, wann ein Teil zu Ende ist und der andere aufhört. Wenn z.B. im Nachrichtentext selbst ein Text wie „Datum:” vorkommt, kann eine Software nicht wissen, ob das jetzt der Anfang der Datumsangabe ist, oder ob er immer noch im normalen Text ist.

Also verbessern wir das Format: Der Anfang und das Ende von jeder Information wird separat angezeigt. Wir vereinbaren folgende Zeichen:

Zeichen	Bedeutung
<Überschrift>	Beginn der Überschrift
</Überschrift>	Ende der Überschrift
<Ort>	Beginn der Ortsangabe
</Ort>	Ende der Ortsangabe
<Datum>	Beginn der Datumsangabe
</Datum>	Ende der Datumsangabe
<Autor>	Beginn des Reporter-Namens
</Autor>	Ende des Reporter-Namens
<Text>	Beginn des eigentlichen Nachrichtentextes
</Text>	Ende des eigentlichen Nachrichtentextes

Jetzt sieht z.B. Nachricht 1 so aus:

<Überschrift>Traktortank explodiert</Überschrift>
<Ort>Olmuth</Ort><Datum>01.05.2010</Datum>
<Text>Bei der Ölstandsmessung hat sich der 28jährige Traktorfahrer Ludwin B. leicht verletzt, als er den stark überhitzten Ölstab aus Versehen in den Tank statt in die zur Ölmessung vorgesehene Öffnung im Motorblock einführte. Weitere Personen kamen nicht zu schaden.</Text>
<Autor>Alwin Emmes</Autor>

Man kann sich gut vorstellen, dass ein automatisches Drucksystem dieses Format verarbeiten kann. Es könnte so eingestellt sein, dass es die Überschrift immer auf der Mitte des Blattes in großer, fetter, schwarzen Buchstaben druckt. Ort und Datum würden vielleicht darunter in Blau erscheinen und der Name des Autors linksbündig vor dem eigentlichen Artikel.

Ein Format für alle

Individuelle Formate wie das oben beschriebene gibt es in der Tat auch. Auch das sind Markierungssprachen (englisch: Markup Languages), jedoch fällt das in den Bereich SGML oder XML und soll uns jetzt noch nicht weiter ablenken.

Für uns hat Format oben noch einen entscheidenden Nachteil: Man kann es nur für Nachrichten oder ähnliche Dokumente verwenden. Für Dokumente also die die Elemente Überschrift, Ort, Datum, Autor und Text besitzen.

Wollte man zum Beispiel nicht Nachrichten, sondern eine CD-Sammlung oder einen Online-Katalog darstellen, dann bräuchte man ganz andere Elemente wie z.B. Erscheinungsjahr, Interpret, Preis, ...

Wir wollen unsere Dokumente auch nicht drucken, sondern ins Web stellen. Unsere Leser (bzw. deren Browser-Software) kann jetzt unser Format ja nicht kennen. Wir suchen daher ein Format, mit dem jeder Leser bzw. jeder Browser etwas anfangen kann.

Und genau so ein allgemeines Format (Markup) ist HTML, die Hypertext Markup Language.

Dort gibt es festgelegte Elemente und wer einen Webseite schreiben will, der darf eben nur diese Benutzen. Die Browser (Firefox, Internet Explorer, Opera) sind so programmiert, dass sie diese festgelegten Elemente verarbeiten können. Die Markierungs-Zeichen, mit denen man z.B. Anfang und Ende eines Elementes angibt, werden im Web übrigens HTML-Tags genannt.

Da die Neugierde jetzt sicher geweckt ist, hier ein sehr kleiner Auszug aus den Standard-HTML-Elementen:

Zeichen („Tag”)	Bedeutung
<h1>	Beginn der Haupt-Überschrift (h1 = Header 1st level)
</h1>	Ende der Haupt-Überschrift
<h2>	Beginn einer Kapitel-Überschrift (h2 = Header 2nd level)
</h2>	Ende der Kapitel-Überschrift
<p>	Beginn eines Absatzes (p = Paragraph)
</p>	Ende eines Absatzes
<ul>	Beginn einer un-nummerierten Liste (ul = Unordered List)
</ul>	Ende einer unnummerierten Liste
<li>	Beginn eines Listen-Elementes (li = List Item)
</li>	Ende eines Listen-Elementes

Diese Tabelle soll nicht verwirren. Wir erlernen alle wichtigen Elemente nach und nach. Auf der nächsten Seite geht es schon los.

Und was heißt HT?

Als Hyper-Text bezeichnet man Text, in dem Links zu anderen Dokumenten vorkommen. Das Web basiert auf Hypertext: Alle Seiten im World-Wide-Web sind irgendwie miteinander verlinkt. Wie man solche Links erzeugt? Na mit der Hypertext Markup Language, HTML. Darum geht es auf diesen Seiten.

Fachbegriffe

(Web-) Browser: Computer-Programm mit dem man sich Webseiten anschauen kann. Die Aufgabe des Browsers ist es, die maschinenlesbaren Datenformate (z.B. HTML) zu verarbeiten und sie dann so auf einem Computer-Bildschirm darzustellen, dass ein Mensch sie gut lesen kann. Diesen Vorgang nennt man übrigens Rendering. Das Wort Browser kommt aus dem Englischen: To browse heißt soviel wie „herumschmökern” oder „durchblättern”, womit das herumsurfen im Web gemeint ist.
HTML: Hypertext Markup Language: Eine Seiten-Markierungssprache (keine Programmiersprache), mit der die einzelnen Teile einer Webseite (z.B. Überschrift, Abschnitte, Listen, Tabellen, Bilder, Videos, Links) festgelegt werden. Diese Markierungen, auch Tags genannt, werden vom Web-Browser in ein Design umgesetzt und dargestellt.
HTML-Tag: Zeichen, welches für die Seitenmarkierung benutzt wird (s. HTML). Am Anfang und am Ende jedes Bestandteils (Objekts) einer Webseite steht ein HTML-Start-Tag. Dieses besteht hauptsächlich aus dem Elementnamen (z.B. ”p„ für Paragraph (Abschnitt), der in spitze Klammern gesetzt wird. Beispiel: <p>. Beendet wird ein HTML-Objekt durch ein HTML-End-Tag. Das HTML-End-Tag sieht so ähnlich aus wie das Start-Tag, wobei lediglich ein Schrägstrich (Slash) vor den Elementnamen gesetzt wird. Beispiel: </p>.

Im Folgenden erstellen wir eine erste HTML-Seite.