HTML paßgerecht

Von: Ulrich Schmitz, Thomas Salvador

Die Handhabung eines durchschnittlichen grafischen HTML-Editors erfordert fast schon mehr Aufwand als die Sprache HTML selbst. Eigentlich einfache Aufgaben arten nicht selten in regelrechte Klickorgien aus oder lassen sich gar nicht erledigen, weil der Editor gerade den gewünschten Effekt nicht unterstützt. Wer schließlich nach ausgiebiger Drag-and-drop-Arbeit den erzeugten HTML-Code der fertigen Seite analysiert, wundert sich häufig über nutzlose und sogar problemträchtige Passagen, die vom Editierwerkzeug eigenmächtig eingebaut worden sind.

Die Qualifikation von HTML als "Language" macht klar, daß es sich bei HTML um eine Sprache - genauer gesagt um eine Interpreter-orientierte Programmiersprache - handelt. Wie bei jeder anderen Sprache gibt es auch hier eine Syntax. Zahlreiche Regeln legen fest, wie etwas ausgedrückt werden muß. Der Quellcode wird vom Browser interpretiert; so kommt schließlich die Darstellung zustande. Das Ergebnis der Übersetzung ist plattformabhängig, nicht aber der eigentliche Code. So müssen beispielsweise Systeme, die bestimmte Darstellungsarten nicht beherrschen, die entsprechenden Tags ignorieren oder alternativ umsetzen. Das gilt etwa bei rein textorientierten Terminals mit Browsern wie "Lynx".

HTML ist also eine Seitenbeschreibungssprache, in der die Struktur eines Dokuments codiert wird. Sie ist als Sprache grundsätzlich plattformunabhängig. Das Dokument kann auf den verschiedensten Rechnern unter Betriebssystemen aller Art verarbeitet werden. Es muß eben nur ein HTML-Browser zur Verfügung stehen. Der Code legt vom Grundsatz her nicht fest, wie der jeweilige Inhalt konkret dargestellt werden soll. Nur so läßt sich erreichen, daß die Dokumente selbst plattformunabhängig sind, also auf Rechnern jeder Art so weit wie möglich ohne Informationsverlust dargestellt werden können. Plattformabhängig sind natürlich die darstellenden Programme. Und genau daran muß ein HTML-Autor auch denken, wenn er sicherstellen will, daß seine Dokumente tatsächlich auch von allen gelesen werden können.

Plattformunabhängigkeit gefragt

Die Leser eines Dokuments benutzen vielleicht ganz unterschiedliche Zeichensätze und Schriften - sei es, weil es nicht anders geht, etwa bei Browsern, die im Textmodus arbeiten, oder weil jeder seinen Browser mehr oder weniger nach seinen persönlichen Vorlieben konfiguriert hat. Im Textmodus arbeitende Browser verwenden Ersatzdarstellungen für Grafiken, Links oder andere Gestaltungselemente, weshalb solche Dinge nur entsprechend ihrer logischen Bedeutung eingesetzt werden sollten. Beispielsweise steht es den Browsern frei, wie sie Überschriften darstellen.

HTML ist nicht dafür vorgesehen, Informationen zur exakten Darstellungsweise zu transportieren. Bei der Darstellung ist eine punktgenaue Replikation der Dokumente nicht garantiert. Die Beliebigkeit der Darstellung fängt bei unterschiedlichen Auflösungen, Fensterbreiten und Schriften an, geht weiter bei der Problematik von je nach lokalem System unterschiedlich eingestellten Farbpaletten und Farbtiefen, verschiedenen Hintergrundfarben sowie Desktop-Einstellungen und hört bei der Unterstützung von Grafiken verschiedener Typen sowie anderen eingebetteten Objekten noch lange nicht auf.

Tags und Attribute

Die Tags sind bei HTML so etwas wie die Vokabeln, mit denen die Beschreibung der Dokumentstruktur vorgenommen wird. Tags können geschachtelt werden, solange die Blockeigenschaft beachtet wird. Weiter innen liegende Tags müssen also geschlossen werden, bevor ein äußeres geschlossen werden kann. Erlaubt wäre beispielsweise folgendes:

<tag1> ...

<tag2> ... </tag2> ...

</tag1>

Nicht erlaubt ist dies:

<tag1> ...

<tag2> ... </tag1> ...

</tag2>

Im zweiten Beispiel ist das innere Tag bei Schließung des äußeren noch offen. Nicht bekannte Tags werden vom Browser normalerweise einfach ignoriert. Das hat den Sinn, daß von einem Browser nicht unterstützte Formatierungselemente nicht zu einem vollen Verlust der gekapselten Daten führen, sondern nur zu einem Verlust der betreffenden Formatierung. Gleiches gilt auch für nicht unterstützte Attribute.

Manche davon dienen als Flag und schalten einen Zustand an oder aus. Andere fungieren als Variablen, die Werte enthalten. Die folgenden beiden Tags sind beispielsweise äquivalent:

<TAG

attrA attrB=wertB attrC=wertC>

<TAG

attrC=wertC attrA attrB=wertB>

Dabei ist attrA ein Flag, die beiden anderen sind Variablen. Die Werte müssen in Anführungsstriche eingeschlossen sein, es sei denn, der betreffende Wert besteht nur aus Buchstaben und Ziffern, wobei als Sonderzeichen Bindestrich und Punkt erlaubt sind.

Grundstruktur von Dokumenten

Der Kopf einer HTML-Datei bietet Informationen zum Dokument, jedoch keinen Inhalt. Ein Beispiel für eine solche Information ist der Titel des Dokuments. In höheren HTML-Versionen wird die optionale Angabe weiterer Informationen erlaubt, die insbesondere der automatischen Verarbeitung durch Suchmaschinen dienen. Solche sogenannten Meta-Informationen sind beispielsweise Angaben zu Autor, erzeugendem Programm, aber auch Zusammenfassungen des Inhalts und Stichworte, unter denen die betreffende Seite in den Datenbanken von Suchmaschinen erfaßt werden soll. Diese Informationen werden in sogenannte meta-Elemente verpackt. Als Syntax für den Dateikopf ergibt sich folgender Aufbau:

<head>

<title> Titel des Dokus </title>

<meta Metatyp="Metaname1"

content="Metawert1">

<meta Metatyp="Metaname2"

content="Metawert2">

...

<meta Metatyp="MetanameN"

content="MetawertN">

</head>

Dabei ist die Angabe des title Pflicht. Die Syntax der meta-Elemente lautet folgendermaßen:

<meta Metatyp="Metaname"

content="Metawert">

Metatyp kennzeichnet den Typ des Eintrags. Setzten Sie anstelle von "Metatyp" etwa http-equiv, wenn der Eintrag im Rahmen des HTTP-Protokolls übertragen werden soll, und name, wenn es private Angaben sind. Metaname ist die Kennung des Eintrags. Er ist bei meta name frei wählbar. Metawert ist der Inhalt des Eintrags. Dabei ist unbedingt darauf zu achten, daß der gesamte Inhalt in Anführungszeichen eingeschlossen ist:

<html><head>

<title>Hallo WWW!</title>

<meta name="author"

content="Thomas Salvador">

<meta name="description"

content="Ein Beispieldokument">

<meta name="keywords"

content="Beispiel Test">

</head><body>

Ein HTML-Dokument.

</body></html>

Die einzelnen Schlüsselworte werden üblicherweise durch ein Leerzeichen oder durch ein Komma voneinander getrennt.

Meta-Typen und Funktionen

Einige Metas sind weitgehend unbekannt, auch wenn sie inzwischen von den meisten Browsern interpretiert und daher auch genutzt werden sollten.

http-equiv="Expires" content="datum"

gibt beispielsweise an, wann das Dokument seine Gültigkeit verliert. Dieses Meta zwingt Browser und Proxy-Server dazu, die aktuelle Version über das Netz zu holen. Alternativ kann anstelle des Datums ein Wert in Sekunden angegeben werden.

http-equiv="Refresh" content="sec,

URL=..."

weist den Browser an, nach einer Pause von sec Sekunden (0 = sofort: "Redirection"-Effekt) die angegebene Datei zu laden.

name="author" content="..."

nennt den Namen des Autors/der Autoren.

name="description" content="..."

enthält eine Kurzbeschreibung der Datei.

name="keywords" content="..."

nennt Schlüsselworte für diese Datei.

name="copyright" content="..."

nennt Copyright-Informationen.

name="publisher" content="..."

nennt den Herausgeber.

name="robots" content="index"

weist Robots und Suchmaschinen ausdrücklich an, die Datei in ihren Datenbestand aufzunehmen.

name="robots" content="noindex"

verbietet Robots die Aufnahme der entsprechend markierten Schlagwörter. Allerdings richten sich nicht alle Robots nach dieser Anweisung. Einen garantierten Schutz bietet dieses Meta daher nicht.

name="robots" content="follow"

weist Robots ausdrücklich an, den Verweisen in der Datei zu folgen, und

name="robots" content="nofollow"

bewirkt entsprechend das Gegenteil. Die Werte für Robots sind dabei kombinierbar:

name="robots"

content="index, nofollow"

heißt: Verarbeite diese Datei, aber folge den Verweisen nicht. Das gesamte, eigentliche Dokument wird durch das Tag body gekapselt.

Benutzerfreundliche Standards setzen

Viele Browser werten die Attribute background, bgcolor, text, link, vlink und alink aus.

Mit background läßt sich ein Hintergrundbild setzen und ein URL an die Adresse des Bildes knüpfen. Mit den anderen Attributen kann die farbliche Gestaltung vorgenommen werden. Dabei wird mit bgcolor die Hintergrundfarbe eingestellt. Mit text legt man die Textfarbe fest, mit link die Farbe unbenutzter Verweise und mit vlink (visited Link) die Farbe derjenigen Verweise, die bereits angeklickt worden sind. Schließlich wird mit alink (active Link) noch die Farbe für einen Verweis bestimmt, der schon angeklickt wurde.

<body bgcolor="#ffffff"

text="#000000" vlink="#ff0000"

link="#0000ff" alink="#000000">

Hintergrundbild und Farbe lassen sich kombinieren. Das ist auch notwendig, da beispielsweise Text per Voreinstellung meist schwarz dargestellt wird. Bei einem Hintergrundbild mit schwarzen Flächen ist das ungünstig. Auch kann der Benutzer an seinem Browser das Laden von Hintergrund-Grafiken abschalten, wobei dann völlig unbrauchbare Ergebnisse erscheinen. Hätte der Autor einer solchen Seite nun die Hintergrundfarbe auf schwarz oder wenigstens dunkelblau gesetzt, wären die Texte von vornherein lesbar. Es ist gute Praxis, dem Besucher selbst zu überlassen, ob er Grafiken laden lassen möchte oder nicht.

Bei HTML gibt es zwei Möglichkeiten, Farben festzulegen. Die erste besteht in der Angabe als RGB-Tupel (zusammengefaßter Hexadezimalwert aus drei Bytewerten):

"#rrggbb"

Dabei werden die Anteile der Farben rot (rr), grün (gg) und blau (bb) in hexadezimaler Schreibweise angegeben. Die zweite Möglichkeit besteht darin, die Farbe zu benennen. So erreicht man das Ergebnis aus dem obigen Beispiel etwa auch mit folgendem Code:

<body

bcolor=black text=white

link=blue vlink=red

alink=black>

Die 16 Standardfarben gliedern sich dabei wie folgt auf:

black #000000 white #FFFFFF

teal #008080 aqua #00FFFF

navy #000080 blue #0000FF

purple #800080 fuchsia #FF00FF

gray #808080 silver #C0C0C0

green #808000 lime #00FF00

olive #808000 yellow #FFFF00

maroon #800000 red #FF0000

Kommentare dienen wie bei den klassischen Programmiersprachen dazu, eine Dokumentation des Quelltexts im Code zu ermöglichen. Was klassischen HTML-Code angeht, so sind die Kommentare für die Darstellung des Seiteninhalts grundsätzlich uninteressant, sie werden im Browser nicht angezeigt.

Eine besondere Rolle spielen HTML-Kommentare allerdings bei fortgeschritteneren Web-Technologien wie etwa Javascript. Beim Einsatz von Kommentaren ist auf jeden Fall daran zu denken, daß diese mit im Code stehen bleiben. Der Benutzer kann sie sehen, wenn er in seinem Browser die Quellcode-Anzeige wählt. Sie stellen also keine geeignete Stelle dar, an der man "geheime" Informationen unterbringen könnte.

Darstellung von Sonderzeichen

HTML baut auf dem standardisierten ISO-8859-1-Zeichensatz, der oft als "ISO-Latin-1" bezeichnet ist, auf. Dieser Zeichensatz besteht aus 256 Zeichen, wobei die ersten 128 denen des 7-Bit-Ascii-Zeichensatzes entsprechen. Einige Zeichen daraus haben in HTML eine besondere Bedeutung, weshalb sie im Fließtext nicht auftreten können. Sie kennen bereits zwei: die spitzen Klammern "<>", die in HTML verwendet werden, um Tags zu begrenzen.

Um Zeichen darstellen zu lassen, die man nicht direkt in den Fließtext setzen kann, bedient man sich eines Umwegs: Man benutzt die sogenannten Ersatzdarstellungen. Jede davon beginnt mit einem Ampersand ("&"), an das der Name des jeweiligen Zeichens angehängt wird, und schließt mit einem Semikolon. Wichtig ist, daß man bei Ersatzdarstellungen anders als bei Tags die Groß- und Kleinschreibung beachten muß.

Da die Darstellungen mit dem Ampersand beginnen, hat dieses Zeichen selbst eine besondere Bedeutung. Die Ersatzdarstellungen für diese Zeichen sind im Textkasten "Sonderzeichen" aufgelistet.

Formatiertricks und Leerzeichen

HTML bricht Zeilen automatisch um, wobei dies üblicherweise an einem Leerzeichen geschieht. Mit   läßt sich ein Leerzeichen erzwingen, an dem nicht umbrochen wird. Schließlich werden im Fließtext normalerweise nicht mehrere Leerzeichen hintereinander ausgegeben; nach dem ersten wird also jedes weitere angehängte Leerzeichen ignoriert. Durch   ist es möglich, auch mehrfache Leerzeichen zu erzwingen. Wie bereits beschrieben, arbeitet HTML nach dem "Free-Form-Prinzip": Der Browser fügt Zeilenumbrüche im Ergebnis selbständig ein. Der Zeilenumbruch innerhalb des Quelltexts fällt also höchstens zufällig einmal mit dem Zeilenende der Ausgabe Mehrfache oder auch führende Leerzeichen haben keine Wirkung. Wir brauchen also zusätzlich die Möglichkeit, einen abgeschlossenen Absatz zu definieren. Dies geschieht mit Hilfe des p-Tags ("p" für Paragraph), der den Absatz kapselt.

Die meisten Browser akzeptieren es auch, wenn die Endmarke </p> weggelassen wird. Bei ihnen gilt beim Beginn eines neuen Absatzes der vorherige logischerweise als beendet. Durch das Attribut align mit den Werten left, center und right können Sie die Ausrichtung des Absatzes vorschlagen. Bei aktuellen Browserversionen (Internet Explorer und Netscape Communicator ab Version 4) wird auch Blocksatz (align=justify) unterstützt.

Verweise und Protokolle

Verweise oder auch Links sind wesentliche Bestandteile von Hypertext-Dokumenten und somit auch von HTML-Seiten. Wenn man einmal ganz von der computergestützten Hypertext-Anwendung absieht und Verweise etwa im Buchbereich betrachtet, so lassen diese sich leicht auf eine allgemeine Form bringen. Sie nennen jeweils eine Beschaffungsinstanz (beispielsweise Bibliothek), einen Standort (etwa ein Regal), Name und Art des Verweisobjekts ("XYZ" von Autor ABC) sowie die Fundstelle, aus der das Verweisziel im engeren Sinne (beispielsweise Seite "X") hervorgeht.

Auf die Verhältnisse des Internet übertragen, paßt dieses Muster erstaunlich gut. Aus der Bibliothek wird ein Internet-Dienst; das Regal entspricht der Kombination aus Rechnernamen und Verzeichnispfad, das Verweisobjekt kann ein HTML-Dokument, eine Bilddatei, ein ASCII-Text oder eine andere Art von Datei sein. Die Fundstelle könnte im Falle einer HTML-Datei etwa eine Sprungmarke im Quelltext sein. Diese Struktur muß nur noch syntaktisch korrekt eingebaut werden:

Dienst://Rechner/Verz/Name.Art#S

Damit läßt sich jedes Dokument, jedes Bild, jeder Text, jedes Irgendwas im Netz eindeutig identifizieren. Sofern es um Texte geht, läßt sich das Sprungziel sogar bis auf ein einzelnes Zeichen genau eingrenzen. Die Beschaffung des gewünschten Dokuments erledigt der zuständige Internet-Dienst für Sie. Der Browser wiederum übernimmt das Heraussuchen und Anzeigen beziehungsweise, allgemeiner gesprochen, die Verarbeitung. Bei Verzeichnissen wird immer der gewöhnliche Schrägstrich (Slash) benutzt, auch wenn sich die HTML-Dateien etwa auf DOS-Systemen befinden, bei denen normalerweise der Backslash ("\") verwendet wird. In HTML werden mögliche Ziele durch das Tag a name gekapselt:

<a name="body">Bodyinformation</a>

Der eigentliche Name (hier: body) ist in Anführungsstriche einzuschließen.

Skalierung und alternative Seitendarstellungen

Zum Stichwort Plattformunabhängigkeit wurde bereits angemerkt, daß es auch nichtgrafische Browser gibt. Ähnliche Umstände liegen dann vor, wenn der Benutzer bei einem eigentlich grafikfähigen Browser die Grafikdarstellung abgeschaltet hat. Für solche Fälle ist also eine Ersatzdarstellung unbedingt erforderlich:

<img src="einbild.jpg"

alt="Ein Bild">

Die alternative Darstellung wird im Attribut alt untergebracht. Grafiken können erst dann geladen werden, wenn die aufrufende HTML-Datei bereits geladen ist, da sonst die Referenzen noch nicht bekannt sind. Üblicherweise stellen Browser die HTML-Seite sofort beim Empfang dar, damit der Benutzer so schnell wie möglich mit der Betrachtung anfangen kann. Die Grafiken werden dabei durch einen kleinen Platzhalter repräsentiert. Sofern eine Beschreibung vorliegt, wird diese angezeigt. Wenn nun eine Grafikdatei übertragen worden ist, wird das komplette Browserfenster neu gezeichnet. Das liegt daran, daß die Maße der Grafik normalerweise nicht mit denen der vorläufigen Ersatzdarstellung übereinstimmen. Daher muß auch der Text meistens neu umbrochen werden. Praktischerweise besteht die Möglichkeit, dem Browser im HTML-Quelltext Breite und Höhe der jeweiligen Grafik über die Attribute width und height mitzuteilen. Ein Browser, der diese Attribute auswertet, wird also die Maße des Platzhalters sofort entsprechend einrichten. Das Laden der Grafikdaten erfolgt dann in diese Bereiche, und das Fenster muß nicht neu gezeichnet werden.

<img src="einbild.jpg"

alt="Ein Bild" width=80 height=60>

Die Attribute können auch dazu verwendet werden, um Bilder zu vergrößern oder zu verkleinern. Das wird allerdings nicht von jedem Browser vernünftig realisiert.

<img src="einbild.jpg"

alt="Ein Bild" width=40 height=30>

Die naheliegende Idee, diese Funktion auszunutzen, um Übersichten verfügbarer Bilder zu liefern, erweist sich schnell als untauglich. Man mache sich klar, daß der Browser die Grafiken zwar in der Darstellung skaliert, dafür aber doch jedesmal die vollständigen Bilddateien laden muß. Daher ist zumindest im Hinblick auf Übertragungszeit und -kosten der übliche Weg benutzerfreundlicher, bei dem zu den Original-Bilddateien von vornherein zusätzlich kleine Bildchen zur Verfügung gestellt werden. Diese dienen in der Regel als Icons, bei deren Anklicken dann die eigentlichen größeren Grafiken geladen werden.

Icons und grafische Links

Gibt man einem Verweis statt einer Textbezeichnung eine grafische Fassade, entsteht ein Icon. In HTML werden solche Icons völlig analog zu textorientierten Verweisen gesetzt:

<a href="ziel">

<img src="einbild.jpg" alt="Ziel"

width=80 height=60>

</a>

Zur Verdeutlichung, daß es sich um einen Verweis handelt, zeichnet der Browser üblicherweise noch einen Rahmen um die Grafik. Dabei werden dieselben Farben wie für Links benutzt. Die Dicke dieses Rahmens ist über das border-Attribut einstellbar:

<a href="ziel">

<img src="einbild.jpg" alt="Ziel"

width=80 height=60 border=3>

</a>

Wünscht der HTML-Autor keinen Rahmen, so ist border sinnvollerweise auf 0 zu setzen.

Maps und Shapes

Bei einer Map handelt es sich um eine Grafik, bei der verschiedene Teile unterschiedliche Ziele repräsentieren können. Die Definition ist entsprechend komplexer als bei einem Icon. Es gibt allerdings Tools, die die Konstruktion von Maps entscheidend erleichtern. Die wesentliche Arbeit fließt in die Erstellung der Bereichsdaten, die durch das map-Tag gekapselt sind. Die einzelnen Bereiche werden in area-Elementen beschrieben.

<map name="einemap">

<area shape=shapeTyp

coords=Koordinaten

href="zielURL">

...

<area shape=shapeTyp

coords=Koordinaten

href="zielURL">

</map>

Die Shape-Typen sind also bestimmte geometrische Objekte, die über die Koordinaten eines Grafikbereichs beschrieben werden. Die jeweils zugewiesene URL wird dann angesprungen, wenn der Benutzer in den betreffenden Bereich geklickt hat. Die URLs können, müssen aber nicht verschieden sein. Ist für einen Bereich kein Ziel vorgesehen, so wird anstelle von href="zielURL" die Angabe nohref gesetzt.

Formatieren von Grafik

Grafiken werden, wenn es nicht speziell anders festgelegt wird, als Bestandteile des Fließtexts aufgefaßt. Mit der Ausrichtung kann beschrieben werden, wo die Grafik vertikal an die entsprechende Zeile des Fließtexts angelegt wird. Hierfür ist das align-Attribut zuständig. Gültige Werte sind top, middle und bottom.

Soll eine Grafik aus dem Fließtext herausgenommen werden, so ist dies über das Attribut align mit den möglichen Werten left und right anzugeben. Die Grafik wird dann entsprechend an den linken beziehungsweise rechten Rand gesetzt. In dieser Form ist die Kontrolle unvollständig, das heißt, der Browser wählt eine geeignete Position für die Grafik. Dabei kann es auch vorkommen, daß Grafiken direkt nebeneinander plaziert werden. Dies läßt sich durch einen erzwungenen Zeilenumbruch umgehen. Dabei wird dem br-Tag das Attribut clear mit den möglichen Werten left, right und all mitgegeben.

<br clear=left> oder <br clear=right> führen dazu, daß die jeweils nächste Zeile frühestens nach dem Bild am linken bzw. rechten Rand beginnt. <br clear=all> führt dazu, daß die nächste Zeile frühestens dort beginnt, wo sich weder am linken noch am rechten Seitenrand ein Bild befindet. Liegt an der angegeben Stelle kein Bild - dies ist der Fall, wenn der Fließtext höher ist als das Bild - dann wirkt der Zeilenumbruch wie der nicht attributierte <br>-Umbruch.

Abstand zum Fließtext

Fließtext liegt überlicherweise eng an einer Grafik an beziehungsweise umfließt diese. Mit den Attributen hspace beziehungsweise vspace gibt man den horizontalen beziehungsweise vertikalen Mindestabstand zwischen Grafik und Text an:

<img src="einbild.jpg" align=right

alt="Ein Bild" width=120 height=90

hspace=40 vspace=30>

Mit den in diesem Beitrag vorgestellten Elementen von HTML lassen sich die meisten Darstellungsprobleme browserunabhängig und elegant lösen, auch ohne auf die noch nicht von allen Browsern unterstützten Neuerungen von HTML 4.0 zurückgreifen zu müssen.