Einführung: HTML

Stark gekürzter Auszug aus: Martin Goldmann/ Gabriele Hooffacker: Online publizieren, Reinbek (rororo) 2001

Dieses Seminar ist kein Programmier-Seminar. Der vorliegende Text bietet einen Schnell-Einstieg in die Seitenbeschreibungssprache HTML. 

Die Komplexität von HTML wird meist überschätzt, besteht die Sprache doch nur aus einer Handvoll Tags, Markierungen, die sich auf den nachfolgenden Text beziehen und dessen Aussehen manipulieren. Hinzu kommen Anweisungen zum Erzeugen von Querverbindungen zu anderen WWW-Seiten und zum Einbinden von Grafiken.
Das Handwerkszeug
Um einfache WWW-Seiten zu programmieren, sind lediglich zwei Programme notwendig: Ein Texteditor wie der „Editor“ (auf Ihrem Windows-PC unter „Zubehör“) und ein WWW-Browser zum Ansehen der Ergebnisse. Sie können auch „Word“ verwenden - wichtig ist lediglich, dass der Editor Texte im ASCII-Format speichern kann und dass Sie das auch tun. Denn nur dann können Sie die Seite anschließend auch in Ihrem Browser anschauen. 

Alle HTML-Dateien beginnen mit <html> und enden mit </html>. Zudem nimmt der <head> die wichtigsten Informationen zur Seite auf, der <body> birgt alle Daten die im Fenster des Browsers erscheinen. Auf keinen Fall sollten Sie auf <title> verzichten. Denn diesem Befehl folgt die Titelangabe einer WWW-Seite.
Im Prinzip müssen alle Anweisungen durch die Wiederholung des Befehlswortes mit einem vorangestellten / wieder deaktiviert werden. Setzen Sie also nach der Titelzeile wieder den Befehl </title>. Ein Grundgerüst für eine HTML-Seite sieht so aus:

<html>
<head>
<title>Meine Homepage</title>
</head>
<body>
Hallo Leserin!
</body>
</html>

Bitte speichern Sie diesen wertvollen Text in einem Ordner Ihrer Wahl, beispielsweise in „Eigene Dateien“. Dabei geben Sie ihm den Namen testindex.htm. Wenn Sie genau hinschauen, merken Sie, dass wir im Dateinamen (natürlich nicht im Text) alle Buchstaben klein geschrieben haben und dass hier keine Leertaste erscheint. Das ist Absicht: Auf Groß- und Kleinschreibung bzw. Leertasten reagieren Web-Server nämlich recht empfindlich. Wenn Sie alles klein schreiben und keine Leertasten verwenden, sind Sie auf der sicheren Seite. 

Diese rudimentäre WWW-Seite enthält bereits erste Textinformationen, die im Fenster des Browsers erscheinen. Starten Sie den Internet Explorer oder den Netscape Navigator und sehen Sie sich die Seite an. Das erreichen Sie mit „Datei“ – „Öffnen“ bzw. „Seite öffnen“. Dann müssen Sie ein wenig suchen, bis Sie textindex.htm auf dem Bildschirm haben. 

Den Text formatieren
Viel Text ist das ja noch nicht. Weil das aber bald anders wird, müssen Sie sich wohl doch um übersichtliche Gliederung des Textes kümmern. Ähnlich wie eine Textverarbeitung brechen WWW-Browser empfangene Texte automatisch um. Sie können also ohne Zeilenumbruch oder Absatzmarke drauflos schreiben. Wenn Sie dennoch einen neuen Absatz einfügen wollen, verwenden Sie die Absatzmarke <p>. Die müssen Sie am Beginn des Absatzes anfangen und am Ende des Absatzes aufhören lassen. <p> ist damit ein sogenanntes „Container Tag“: Es enthält etwas. <head> und <body> sind weitere Beispiele für Container Tags. Soll es nur eine neue Zeile sein und kein größerer Absatz, verwenden Sie <br>.

<body>
<p>
Hallo Leserin!
</p>
<p>Ein klarer Aufbau von Texten<br>
erleichtert die Lesbarkeit enorm.</p>
<p>Dabei helfen Absatzmarken und Zeilen-<br>
umbr&uuml;che enorm.</p>
</body>

Hier wird klar: <p> muss am Anfang stehen und am Ende mit </p> geschlossen werden. Sie wollen die Änderungen betrachten? Dann speichern Sie testindex.htm und wechseln Sie in den Browser, den Sie hoffentlich offengelassen haben. In der Zwischenzeit hat sich die Datei verändert, aber das weiß der Browser noch nicht. Klicken Sie bitte deshalb auf „Aktualisieren“ bzw. „Neu laden“ in der Symbolleiste.
Für eine noch klarere Trennung von Absätzen sorgt eine horizontale Linie. <hr> bringt dieses Ergebnis. Gehen Sie mit diesem Bildelement jedoch sparsam um. <hr> und <br> müssen Sie nicht durch entsprechende /-Anweisungen deaktivieren.
Den letzten Schliff beim Text-Design bringen Überschriften. Die Container-Tags <h1> bis <h6> erzeugen unterschiedlich große Überschriften, <h1> steht für das größte Format.

<h1>Dies ist eine gro&szlig;e &Uuml;berschrift</h1>
<h6>Und dies ist die kleinste Headline</h6>

Abgerundet wird die Palette an grundlegenden Textformatierungen mit den Listen. Das Tag <ul> erzeugt eine unsortierte Liste, <ol> dagegen eine durchnumerierte Aufzählung. Jedes Element in einer Liste erhält die Markierung <li>:

<ul>
<li>Punkt
<li>Ein anderer Punkt
<li>und noch ein Punkt
</ul>

<ol>
<li>Punkt 1
<li>Punkt 2
<li>Punkt 3
</ol>

Sämtliche Tags lassen sich ineinander verschachteln. So ist es kein Problem, innerhalb einer sortierten Liste eine unsortierte Aufzählung einzufügen:
<ol>
<li>Punkt 1
<ul>
<li>Punkt
<li>Ein anderer Punkt
</ul>
<li>Punkt 2
</ol>

Hier gilt es darauf zu achten, dass die Anweisungen sauber nach dem Schema <ol><ul>...</ul></ol> verschachtelt sind. Wer bereits einmal Schleifenkonstruktionen in Basic, Pascal oder C programmiert hat, kennt dieses Prinzip – wer eine Matrioschka, ein russisches Holzpüppchen besitzt, in dem weitere Holzfiguren stecken, ebenfalls.

Verbindungen schaffen
Querverweise sind das wohl wichtigste Grundelement des World Wide Web. Sie einzubinden bereitet keine Mühe. Ein Beispiel für eine Querverbindung ist

<a href=„http://www.yahoo.de“>Ein hilfreicher Katalog: Yahoo</a>

Anstelle von www.yahoo.de können Sie natürlich jede beliebige WWW-Site einbinden. Im WWW-Dokument erscheint „Ein hilfreicher Katalog“ als anklickbare Hyperlink. Dieses anklickbare Element bitte nicht vergessen – es ist das einzige, was vom ganzen Befehl beim Surfer am Bildschirm erscheint!
Statt einer externen WWW-Adresse nimmt das Hyperlink-Tag auch andere Elemente auf. Wer etwa auf eine andere WWW-Seite auf dem eigenen Server verweisen will, verwendet diese Anweisung

<a href=„daten.html“>Die technischen Daten</a>

Das grafische Element
Endlich: die Grafiken. In WWW-Seiten lassen sich die Grafikformate GIF und Jpeg einbinden (mehr über Bildformate steht im dritten Kapitel). Und hier hilft die Anweisung „image src, kurz „img src“ (bitte nicht „scr“ – dann geht‘s nicht). Beispiel:

<img src=„bild.jpg“>

Damit wird anstelle des Tags die Grafik „bild.jpg“ im Dokument plaziert. Manche Leute haben an ihrem Browser die Grafik-Funktion abgeschaltet, damit die Web-Seiten schneller geladen werden. Barrierefreies Webdesign setzt voraus, dass zu allen Grafiken eine Erklärung gegeben wird. Deshalb sollten Sie noch eine kurze Beschreibung des Bildes eingeben.

<img src=„bild.jpg“ alt=„Firmenlogo Meier GmbH“>

Der Text hinter „alt“ erscheint dann, wenn ein Browser nicht in der Lage ist, Grafiken darzustellen. Wenn doch, wird dieser Text im Browser als Erläuterung oder Bild-Beschriftung angezeigt. Zudem haben Sie Einfluß auf die Ausrichtung einer Grafik. Hierzu dient das Attribut „align“ zum Befehl „img“:

<img align= „top“ src=„bild.jpg“ alt=„Firmenlogo“>

Align kann drei Werte annehmen: „top“, „middle“ und „bottom“. Diese beziehen sich auf die Zeile, in der das Bild auftaucht. „top“ etwa plaziert das Bild so, dass dessen oberer Bildrand auf einer Ebene mit dem höchsten Element der Zeile steht, „bottom“ plaziert den unteren Bildrand auf Höhe der Grundline einer Zeile. „middle“ schließlich setzt die Mittelinie des Bildes auf eine Höhe mit der Grundlinie der Zeile. Das klingt kompliziert—probieren Sie es einfach einmal aus.
Achten Sie bei der Herstellung der Bilder darauf, dass große Grafiken nur unnötigen Datenverkehr und Wartezeiten auf dem Netz verursachen. Wie das mit einem Bildbearbeitungsprogramm zu bewekstelligen ist, haben wir im dritten Kapitel gezeigt.

Das img-Tag kann auf Querverbindungen zu anderen Servern zugreifen – vorausgesetzt, das Bild liegt auch dort. Die Anweisung <img src=„http://www.journalistenakademie.de/images/gabi.jpg“ alt=„Gabriele Hooffacker“> etwa holt ein Foto der Autorin vom Server www.journalistenakademie.de. 

Interessante Kombinationen
Richtig attraktiv werden Hyperlinks, wenn Sie diese mit Bildern versehen. 

<a href=„http://www.journalistenakademie.de“> <img src=„http://www.journalistenakademie.de/images/mmja.jpg“ alt=Journalistenakademie“></a>

Diese komplex wirkende Anweisung zeigt die Grafik mmja.jpg, eine Wegbeschreibung, umgeben von einem blauen Rahmen. Ein Klick auf diese Grafik ruft dann die Querverbindung zum Server www.journalistenakademie.de auf. 

Wenn Sie das Prinzip verstanden haben, können Sie jetzt auch eine kleine Grafik dazu verwenden, auf eine große Grafik zu verweisen. Wenn nicht, spicken Sie bitte im dritten Kapitel – dort steht, wie‘s geht. 

Die Umlaute
Zwar sind die meisten Web-Browser in der Lage, Umlaute korrekt zu erkennen. Doch was, wenn Ihr Surfer zufällig aus China oder auch nur aus Griechenland auf Ihre Seite stolpert? Und was, wenn es sich einfach nicht um einen Windows-PC handelt (so was soll‘s geben)? Alle Sonderzeichen, auch skandinavische, spanische oder tschechische müssen durch HTML-Codes dargestellt werden. Diese Codes werden immer von einem kaufmännischen Und (&) eingeleitet und mit einem Semikolon abgeschlossen. 

Die Anweisung &auml; etwa steht für ein ä, mit &Auml; erzeugen Sie den entsprechenden Großbuchstaben. Entsprechend funktioniert das mit den anderen Umlauten: ä wird zu &auml;, ö zu &ouml;. Auch das sz und das & sind im HTML-Wortschatz vorhanden: &szlig; erzeugt ein ß, &amp; ein &-Zeichen:

&auml; = ä
&Auml; = Ä
&ouml; = ö
&Ouml; = Ö
&uuml; = ü
&Uuml; = Ü
&szlig;=ß
&amp;=&

Table-Dance
Tabellen sind die Schwerarbeiter in HTML. Zwei Einsatzzwecke prägen das Dasein des <table>-Tags in HTML. Einerseits lassen sich in Tabellen prima lange Listen unterbringen, andererseits sind Tabellen das bislang beste Hilfsmittel, um Seiteninhalte exakt zu plazieren. In diesem Aufgabenbereich kommen zwar langsam Cascading Stylesheets auf. Doch haben Tabellen nach wie vor den Vorteil, dass sie auch auf älteren Browsern der 3er-Generation brauchbare Ergebnisse liefern. Viele Web-Editoren machen denn auch ausführlich Gebrauch von den Tabellen. Dazu gehört etwa Net Objects Fusion, der auf Wunsch sein komplettes Layout mit Tabellen aufbaut.

Tabellen sind fast so alt wie HTML selbst. Fast alle Browser-Generationen verstehen den Befehl. Weitergehende Anweisungen allerdings, welche die Farben und Ausrichtungen in Tabellen bestimmen, gehen an den Browser-Oldies vorbei.
Tabellen in HTML folgen einem einfachen Schema. Jede Liste wird mit <table> eingeleitet und endet mit </table>. Die Zeilen einer Tabelle starten mit einem <tr> für „Table Row“ und enden mit </tr>. Schließlich folgen die Daten mit <td> und </td> für Table Data. Diese Tags sind ineinander verschachtelt. Auf oberster Ebene steht die Tabellendefinition, dann folgen die Zeilen und darin wiederum befinden sich die Zellen. Ein einfaches Tabellengrundgerüst sieht so aus:

<table>
<tr><td>Spalte 1, Zeile 1</td><td>Spalte2, Zeile 1</td></tr>
<tr><td>Spalte 1, Zeile 2</td><td>Spalte2, Zeile 2</td></tr>
</table>

Browser zeichnen Tabellen von Haus aus ohne Linien zwischen den Zellen. Erst mit <table border=1> sehen Sie klar. Dann erscheinen zwischen den Zellen dünne Trennlinien.

Wichtig zu wissen: Diese Trennlininen sind nur eine Nebenwirkung des border-Befehls. Denn der bestimmt eigentlich den äußeren Rand der Tabelle. Wenn Sie border auf einen Wert größer als 1 setzen, bleiben die Trennlinien immer noch gleich dick. Nur der äußere Rand gewinnt an Umfang. 

Seine Stärken spielt border als Layout-Helfer aus. Wenn Sie knifflige Seiten-Layouts mit Tabellen basteln, sollten Sie in der Design-Phase border auf 1 stellen. Dann sehen Sie die Abgrenzungen und können besser die Inhalte positionieren und Dimensionen abschätzen. Erst wenn das Layout fertig ist, stellen Sie border wieder auf 0.

((bis hierhin tabelle1.htm))

Zwei Tags stehen für Überschriften in Tabellen bereit. Nummer eins ist caption, das Tag für die Tabellenüberschrift selbst. Mit dieser Anweisung plazieren Sie eine Headline, die sich genau der Tabellenbreite anpaßt:
<table border=1>
<caption>Tabellen&uuml;berschrift &uuml;ber die Gesamtbreite der Tabelle</caption>
[..]
</table>

Der Text im caption-Tag erscheint zentriert über der Liste. Wenn Sie eine Tabellenunterschrift benötigen, schreiben Sie <caption align=bottom>. Der naheliegenede Gedanke, es mit einer Tabellenüber- und Unterschrift gleichzeitig zu versuchen scheitert am Netscape Navigator. Der versteht nur ein caption-Tag pro Tabelle. Das andere behandelt er wie normalen Text.

Überhaupt gehen die Browser recht lieblos mit caption um: Die Headline bekommt nicht einmal ein besonderes Format. Das müssen Sie von Hand einstellen, etwa mit 
<caption><h3>Tabellen&uuml;berschrift</h3></caption>.

Wenn es um Überschriften für die einzelnen Tabellenspalten geht, ist <th> das Tag der Wahl. Es wird genauso angewendet wie <td>, formatiert aber den Zellinhalt fett und zentriert ihn über der Spalte.
<table>
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Spalte 1, Zeile 1</td><td>Spalte2, Zeile 1</td></tr>
[..]
</table>

Eine Tabelle ist grundsätzlich so breit wie die freie Fläche im Browser. Das sieht nicht immer gut aus. Deshalb ersann man den width-Parameter. Der regelt die Breite der Tabelle und verträgt relative und absolute Werte. Mit <table width=50%> nimmt die Tabelle genau die Hälfte des Browser-Fensters ein. Exakt 300 Pixel breit wird die Liste, wenn Sie <table width=300> eingeben—ideal für das Seiten-Layout.

Auch die Tags <td> und <th> vertragen den width-Parameter. <td width=100> legt die Breite der gesamten Spalte auf 100 Bildpunkte fest. Verwenden Sie immer nur einen Parameter, sonst kommt Ihre Tabelle durcheinander. Auch in den Zellen verträgt width Prozentwerte oder absolute Angaben in Pixel. Wichtig: Wenn eine Zelle etwa wegen einer eingebundenen Grafik breiter ist als in width festgelegt, wirft der Browser diese Angaben über Bord und zeigt die Grafik in voller Breite. Sollten sich die Breitenangaben in den Zellen und der gesamten Tabelle widersprechen, geht die Gesamtbreite der Tabelle vor. Zu breite Zellen werden dann gestutzt. Analog zur Breite bestimmt height die Höhe einer Zelle und gesamten Datenzeile. 

Von Haus aus unterteilt HTML Tabellen in gleichmäßige Raster. Um Zellen zu programmieren, die mehrere Zeilen oder spalten umfassen, benötigen Sie die Parameter colspan und rowspan. Sie werden dem td-Tag beigefügt und tragen als Wert die Anzahl der Spalten oder Zeilen, über die sich die Zelle erstrecken soll.

<tr><td rowspan=4>Eine Zelle, die sich &uuml;ber vier Zeilen erstreckt</td></tr>
[..]
<tr><td colspan=2>Eine Zelle, die sich &uuml;ber zwei Spalten erstreckt</td></tr>

Liegt der Wert von colspan oder rowspan höher als die tatsächliche Anzahl der Spalten und Zeilen, so erscheint im Netscape Navigator ein kleiner Rand rechts oder oben in der Tabelle. Der Internet Explorer bügelt den Fehler aus, ohne die Tabellenoptik zu stören. Wichtig: rowspan bezieht sich immer auf die nachfolgenden Zeilen. Sie müssen also rowspan in der Zeile plazieren, in der die Zelle beginnen soll. Nachträglich ans Ende einer Tabelle eingefügte rowspan-Zellen haben keinerlei Effekt. 

Abstände, Ränder, Farben
Mit cellpadding bestimmen Sie den Abstand eines Tabelleninhaltes zum Zellenrand. Je höher Sie cellpadding setzen, desto weiter rückt der Rand weg vom Inhalt. Ideal ist dieser Parameter, um umfangreichen Datentabellen ein lockeres Aussehen zu geben—die Werte stehen dann nicht so eng beieinander. Wenn Sie Datentabellen einsetzen, sollten Sie grundsätzlich cellpadding auf 5 setzen. Der Parameter gilt für die gesamte Tabelle, muss also beim Table-Tag stehen: <table cellpadding=5>. Wichtig zu wissen: Von Haus aus stellt ein Browser cellpadding immer auf eins. Wenn Sie Layoutaufgaben mit Tabellen erfüllen wollen, sollten Sie grundsätzlich <table cellpadding=0> einsetzen.

cellspacing steht für den Abstand zwischen den Zellen. Mit <table cellspacing=10> rücken alle Zellen zehn Bildpunkte auseinander. Wenn Sie nichts eingeben, legt der Browser diesen Wert auf 2 fest. Dieser Abstand gilt auch ober- und unterhalb von Zellen. cellspacing sollten Sie mit Bedacht verwenden. Zu hohe Werte über 5 bringen häßliche Resultate, besonders wenn zusätzlich border eingeschaltet ist. Dann erscheinen als Abgrenzungen zwischen den Zellen dicke Balken. Bei eingeschalteter border sollten Sie cellspacing maximal auf 3 setzen. Einen positiven Aspekt hat cellspacing für HTML-Designer: Wenn Sie cellspacing auf 0 setzen, erhalten Sie ein exaktes Tabellen-Layout.

Tabellen, die sich immer nur an den linken Browser-Rand quetschen, sind langweilig. Probieren Sie alternativ den Parameter align und seine Werte right und center. Die plazieren die Liste rechts oder in der Mitte des Browserfensters:

<table align=center>

Analog dazu richtet HTML auch die Inhalte in Zellen aus. Hier stehen Parameter für die horizontale und vertikale Plazierung zur Verfügung. Jeder Zelleninhalt lässt sich mit <td align=center> mittig und mit <td align=right> rechts ausrichten. Die Einstellung align=left entspricht der Voreinstellung des Browsers. für die vertikale Ausrichtung sorgt valign. Hier gelten die Werte top, middle und bottom für Oben, Mitte und Unten. middle ist die Voreinstellung des Browsers. Lohnenswert ist <td valign=top> bei mehrzeiligen Tabelleneinträgen. Denn es sieht nicht gut aus, wenn diese neben Einzeilern mittig stehen. Packen Sie lieber alle Einträge an das obere Zellenende. Wenn Sie ganze Zeilen auf einen Rutsch ausrichten wollen, dann setzen Sie align und valign einfach im <tr>-Tag.

In Tabellen geht es bunt zu. Am einfachsten ist es, die Tabelle komplett mit einer Hintergrundfarbe zu versehen. Dazu verwenden Sie den bgcolor-Parameter:

<table bgcolor=orange>

Der Browser färbt dann alle Zellen orange ein. Allerdings machen der Internet Explorer und der Netscape Navigator einen Unterschied im Zellzwischenraum. Ist mit border ein Rand gezogen, färbt der Explorer auch diesen Rand in der Hintergrundfarbe, der Netscape Navigator lässt hingegen die Abgrenzungen weiß—das kann manch schönen Layout-Ansatz durcheinanderbringen.

bgcolor lässt sich auch in einer Zelle einsetzen. Dabei überschreibt diese Angabe den Grundwert aus der Tabellendefinition. Die Anweisung <td bgcolor=lightblue> koloriert den Zellhintergrung in Hellblau—der Rest der Tabelle bleibt in diesem Beispiel Orange.

Um ganze Tabellenzeilen einzufärben, muss man nicht in jeder Zelle einzeln die Farbe eingeben. Es reicht, wenn Sie dem tr-Tag einen bgcolor-Parameter mit auf den Weg geben. Der sorgt dann dafür, dass alle Zellen dieser Zeile in der entsprechenden Farbe erscheinen:

<tr bgcolor=orange>
<td>gefrorener Orangensaft</td>
<td>Otternasen</td>
</tr>

Wenn Sie leere Zellen in eine Tabelle einbauen, werden Sie auf Ungereimtheiten stoßen. Denn der Internet Explorer und der Netscape Navigator interpretieren das Leerzeichen in <td> </td> unterschiedlich. Während der Internet Explorer die leere Zelle in der Farbe des Tabellenhintergrundes formatiert, zeigt der Netscape Navigator nichts. Nur die Farbe des Dokumenthintergrundes scheint durch. Noch schlimmer wird es, wenn man mit Linien zwischen den Tabellen arbeitet. Dann zeigt auch der Internet Explorer keine Linien um die Leerzelle. Das sieht nicht gut aus. Alle Probleme lassen sich mit einem kleinen Trick lösen: Bauen Sie mit <td>&nbsp;</td> ein geschütztes Leerzeichen ein. Beide Browser zeigen dann eine leere Zelle in der korrekten Farbe und mit Tabellenlinien.

Schnell Tabellen laden
Tabellen stellen den Web-Browser vor ein Timing-Problem: Wie will er die Tabelle zeigen, wenn er noch nicht weiß, wie breit alle Zellen sind? Denn an der breitesten Zelle orientiert sich die Dimension der gesamten Spalte. Die Folge: Der Browser wartet immer, bis die komplette Tabelle von der Webseite übertragen ist, bevor er sie aufbaut. Das passiert selbst dann, wenn Sie mit width eine feste Spaltenbreite vorgegeben haben. Behalten Sie deshalb die Länge Ihrer Tabelle im Auge. Notfalls teilen Sie die Liste in mehrere Einzeltabellen auf. Dabei entstehen kleine Lücken zwischen den Einzeltabellen, wenn Sie mit border=1 arbeiten. Doch diese kleine Macke ist zu verschmerzen, wenn die Daten nun schneller auf den Bildschirm kommen. Bei Tabellen ohne Abgrenzer fällt der Split ohnehin kaum auf. 

Die Aufteilung löst noch ein zweites Problem: Denn inmitten einer langen Tabelle weiß kein Leser mehr, welcher Inhalt zu welcher Spalte gehört. Bei unterteilten Tabellen können Sie immer wieder einmal Spaltentitel einfügen.

Tabellen erscheinen erst dann, wenn sich der Browser über die Ausmaße aller Zellen im Klaren ist. Wenn Sie nun ein Bild von einem anderen Server in eine Tabelle laden und diese Grafik eine Weile unterwegs ist, stoppt der Ladevorgang den gesamten Bildaufbau, bis sich die Grafik durch das Netz gequält hat. Wenn Sie externe Bilder oder beispielsweise auch Web-Counter einbinden, erledigen Sie das außerhalb von Tabellen, am besten ganz unten auf der Seite.

Übersichtlich programmieren
So ordentlich eine Tabelle im Browser aussehen mag, so chaotisch sieht meist der Quelltext aus. Bei automatisch generierten Tabellen mag das egal sein. Wer aber von Hand programmiert, sollte strukturiert vorgehen. Sonst hat er schnell ein Quelltextkuddelmuddel beieinander, das niemand mehr durchblickt. Der beste Weg ist, jeder Zelle eine eigene Zeile zuzuweisen und alle Zellen innerhalb einer Reihe einzurücken: 

<tr>
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 <td>Zelle 3</td>
</tr>

In dieses Schema lassen sich nachträglich einfach Formatierungsanweisungen einbauen und Modifikationen vornehmen. Außerdem erzieht diese Art Programmierung dazu, immer die Schlusstags zu verwenden, also </td> und </tr>. Denn eigentlich kann man auf diese Schlussanweisungen verzichten. Das birgt jedoch Fehlerquellen. Und spätestens dann, wenn man nachträglich Cascading Stylesheet-Anweisungen einbauen will, muss man diese Abschlussanweisungen nachtragen.

Natürlich lassen sich innerhalb von Zellen Formatparameter wie <b> für Fettdruck oder <h1> bis <h6> für Überschriften verwenden. Diese Tags für Headlines bekommen Konkurrenz durch das <font>-Tag. Damit lässt sich für jeden Buchstaben einzeln die Größe festlegen:

<font size=6>H</font><font size=3>ALLO</font>

etwa ergibt eine nette Vergrößerung des Anfangsbuchstabens H gegenüber dem Rest eines Wortes. Gerade für Überschriften oder als Initial für einen Absatz eignet sich das Font Tag. 

Und auch die Schriftarten lassen sich damit etwas besser definieren. So erhalten Sie Text in der Schriftart Arial:
<font face= »Arial »>Text </font>

Das funktioniert allerdings unter der Voraussetzung, dass die genannte Schriftart auch beim Surfer auf dem PC vorhanden ist. Deshalb sollte man möglichst nur bekannte, verbreitete Schriften einsetzen. Aber mehr als zwei Schriftarten pro Seite sind ohnehin Gift fürs Auge.

Hintergrund und Farbe
Auch für ein gesamtes WWW-Dokument lässt sich per bgcolor eine Hintergrundfarbe einstellen: Schwarzer Text auf rotem Grund entspricht dieser Anweisung 

<body bgcolor=“FF0000“>

Nicht vergessen darf der Textfärber die Parameter link, vlink und alink. Link definiert die Farbe einer Hyptertext-Verbindung. Vlink färbt die bereits einmal verfolgten Querweise während alink die Farbe bezeichnet, welche ein Querverweis beim Klicken annimmt.

Auch im font-Tag dürfen Sie mit dem Parameter color eine Farbe wählen. Dies geschieht nach dem RGB-Verfahren mit drei hexadezimalen Ziffernpaaren, die nacheinander die Farbwerte für Rot, Grün und Blau, also <font color=RRGGBB>. Ein Beispiel

<font size=8 color=FF0000>N</font><font size=4 color=00FF00>NETSCAPE-2.0-</font><font size=8 color=FF0000>in</font><font size=4 color=000000>FARBE</font>

Wie bei allen Farbspielereien auf dem World Wide Web sollten Sie aufpassen. Schwarzer Text auf blauem Hintergrund ist ebenso schwer lesbar wie gelb auf weiß. Setzen Sie dieses und alle anderen hier vorgestellten Elemente sparsam und bewußt ein. 

So reizvoll eine farbige Gestaltung der WWW-Seiten auch sein mag, so viel Vorsicht sollte man walten lassen. Denn viele Farbkombinationen hemmen die Lesbarkeit. Man stelle sich eine gelbe Schrift auf hellblauem Grund vor oder Grün auf Rot. Deshalb gilt: Die Lesbarkeit steht im Vordergrund – lieber eine Farbe weniger und dafür einen Abruf der WWW-Seite mehr.

Auch Hintergrundgrafiken dürfen nicht stören. Sie sollten eher einen dezenten Hintergrund und optischen Anreiz bieten. Geeignet zum Herstellen solcher Backgrounds ist praktisch jedes pixelorientierte Grafikprogramm, das Helligkeit und Kontrast eines Bildes manipulieren kann sowie über einige Effekte verfügt. Als Hintergrundmotiv kann eine beliebige einfache Grafik dienen, etwa das Firmenlogo. 

Damit der Hintergrund nicht stört, sollte er aufgehellt werden, bis nur noch Schemen erkennbar sind. Alles andere mindert die Lesbarkeit einer Seite. Ist das Bild fertig, muss es nur noch als JPG- oder GIF-Grafik gespeichert werden und kann seinen Dienst aufnehmen. Doch auch bei Hintergrundbildern gilt: Je kleiner desto feiner. Wer auf seinem PC WWW-Seiten editiert, sollte immer daran denken, dass die Ladezeiten für Grafiken über das Netz erheblich länger sind als auf dem lokalen System.

Wer mehr über das Arbeiten mit Grafiken fürs Web wissen will, findet das im dritten Kapitel. 

Feedback einbauen
Wenn jemand bei Ihnen ein Produkt bestellen oder einfach nur eine Anfrage loswerden möchte, gibt es mehrere Möglichkeiten, ihm diesen Schritt so einfach wie nur möglich zu machen. Die einfachste haben Sie bereits in Kapitel 2 kennengelernt: Lassen Sie sich eine E-Mail schicken!

Dazu verfassen Sie als erstes einen Text, der später zum anklickbaren Hyperlink werden soll. Beispiel:

Wir freuen uns über Ihre E-Mail an die Adresse g.hooffacker@link-m.de!

Was soll anklickbar sein: der ganze Text, lediglich das Wort „E-Mail“ oder die Adresse selbst, also „g.hooffacker@link-m.de“? Die Entscheidung bleibt Ihnen überlassen. In unserem Beispiel wählen wir die Adresse als Hyperlink – das kann man machen, muss man aber nicht. Der komplette Befehl lautet dann

Wir freuen uns über Ihre E-Mail an die Adresse 
<a href=“mailto:g.hooffacker@link-m.de“>g.hooffacker@link-m.de</a>!

Wenn Sie diesen Text im Browser betrachten, sollte die E-Mail-Adresse auf Mausklick hin das E-Mail-Fester öffnen. 

Möchten Sie auf Ihrer Homepage Auswahllisten, Pull-Down-Menüs, Multiple-Choice-Wahlmöglichkeiten anlegen? Sollen Besucher Ihrer Homepage unter Hinterlassen ihrer Adresse bei Ihnen Produkte bestellen können? Dabei helfen Eingabe-Formulare. Sie haben die Wahl zwischen 
•	Texteingabefeld oder mehrzeiligem Texteingabebereich
•	Optionsschaltfläche (Radiobutton)
•	Pull-Down-Menü oder Listenfeld.

Das Formular wird geklammert durch die Befehle

<form>
(...)
</form>

Dazwischen steht der eigentliche Text des Formulars, etwa die Aufforderung: Bitte geben Sie Ihre Adresse ein. Bevor es so weit ist, müssen Sie allerdings noch sagen, wo erstens die Daten, die die User eingeben, hingehören, zweitens, wie sie dorhin gelangen. Dies teilen Sie dem Formular mit zwei Attributen des Form-Befehls mit. Wenn Sie wollen, dass Ihnen das Formular per E-Mail an Ihre Adresse zugestellt wird, lautet der Befehl

<form action=“mailto:g.hooffacker@link-m.de“ method=“post“>

Anstelle von g.hooffacker@link-m.de geben Sie bitte Ihre eigene E-Mail-Adresse ein. 

Als Alternative zum Abholen per E-Mail ist denkbar, dass die Formulardaten auf dem Server abgelegt werden und von dort abgeholt werden. Hinter form action steht in diesem Fall der Servername, als Methode können Sie „get“ einsetzen. 
Ein einfaches Eingabeformular sollte zumindest Namen, Adresse, Telefonnummer und E-Mail-Adresse abfragen. Dazu ist Texteingabe nötig, etwa so:

Vorname:
Name:
Straße:
Ort:
Telefon:
E-Mail:

Jeweils darunter soll nun ein Eingabefeld stehen, das 30 Zeichen lang ist. Der Befehl dazu lautet „input type=“text““, ergänzt um das Attribut „size“. Falls ein Name oder ein Adresse länger ist, erlauben Sie mit dem Befehl „maxlength“ eine Eingabe über die Feldbegrenzung hinaus. Das Gesamtwerk lautet jetzt im HTML-Code:

<form action=“mailto:g.hooffacker@link-m.de“ method=“post“>
<h3>Bitte geben Sie Ihre Adresse ein:</h3>
Vorname:<br> <input type=text name=“Ort“ size=30 maxlength=40><br>
(...)
</form>

Bitte ergänzen Sie das Formular selbständig um Eingabefelder für Name, Straße, Ort, Telefon und E-Mail-Adresse.

Jetzt möchten Sie erreichen, dass Ihr Kunde wählen kann, auf welchem Weg er die bestellten Produkte bezahlt. „Radiobuttons“ heißen solche Auswahlfelder, bei denen jeweils nur eine Wahlmöglichkeit besteht – nach dem guten alten Radioapparat, bei dem immer nur eine Taste gedrückt sein durfte. So lautet der Befehl, um einen Radiobutton zu erzeugen:

<input type=radio>

Damit Sie hinterher wissen, was der Surfer angekreuzt hat, ergänzen Sie den Befehl um hilfreiche Angaben für sich selbst:

<input type=radio name=”zahlen” value=”scheck”>

Vergessen Sie nicht, rechts neben den Radiobutton Text einzugeben, der für den Surfer ist, etwa: „per Verrechnungsscheck zahlen“.

Ein Auswahlliste zwischen mehreren Zahlungsformen sieht im HTML-Code so aus:

<h3>Wie wollen Sie zahlen?</h3>
<input type=radio name=”zahlen” value=”scheck”>per Verrechnungsscheck<br>
<input type=radio name=”zahlen” value=”rechnung“> per Rechnung<br>
<input type=radio name=”zahlen” value=”nachnahme“>per Nachnahme<br>

Sie bieten mehrere Produkte an, sagen wir zehn Stück. Natürlich soll der Surfer aus einem Menü die gewünschten Produkte auswählen können – auch mehrere gleichzeitig. Der Befehl lautet

<select name=“auswahl“ size=10>
(...)
</select>

Jetzt ergänzen Sie das Auswahlmenü um die Produkte. Angenommen, Sie bieten Zubehör für Vogelhalter an, könnte das so aussehen:

<select name=“auswahl“ size=10>
<option>Käfig, 500 x 300 x 400mm
<option>Käfig, 800 x 450 x 600mm
<option>Sittichfutter
<option>Vogelsand
<option>Sitzstange
<option>Futternapf
<option>Futterautomat
<option>Wasserautomat
<option>Spiegel
<option>Kolbenhirse
</select>

Der Befehl „size“ bestimmt, wie viele Einträge angezeigt werden. Die Breite des Fensters richtet sich nach dem breitesten Eintrag. Sollten Sie beim Darstellen des Codes unter Netscape Schwierigkeiten haben, öffnen Sie bitte die Datei einfach noch einmal – dann geht es meist. 

Weil Sie wissen, dass die meisten Surfer über Ihre Homepage das leckere Sittichfutter bestellen, können Sie diesen Artikel vorbelegen. Der einzelne Befehl sieht dann so aus:

<option selected>Sittichfutter

“Sittichfutter” wird dann beim Aufruf des Menüs bereits dunkel unterlegt.

Manchmal möchte man seinen Kunden und Interessenten die Möglichkeit geben, einen kurzen Brief zu schreiben. Trotzdem ist das Formular besser geeignet als die einfache E-Mail-Maske, weil es die kompletten Adress-Angaben eines Surfers abfragt. Ein Textfeld mit festgelegter Größe, in unserem Fall sieben Zeilen hoch und 40 Zeichen breit, erzeugen Sie so:

<textarea name=“Meinung“ rows=7 cols=40>Platz für Ihre Meinung:
</textarea>

Wenn jemand hier mehrere Zeilen eingibt, wird es rasch unübersichtlich, weil es keinen automatischen Zeilenumbruch gibt. Entweder geben die User jetzt von Hand eine Zeilenschaltung ein – dann haben Sie hinterher die Umbrüche im Text. Oder Sie ergänzen den Befehl um einen automatischen „virtuellen“ Umbruch, der nicht stört: 

<textarea name=“Meinung“ rows=7 cols=40 wrap=virtual>Platz für Ihre Meinung:
</textarea>

Zum Schluss brauchen Sie noch einen Button, der die „action“ auslöst und einen, der dem Besucher erlaubt, seine Eingabe zu löschen. Diese beiden Möglichkeiten sollten Sie auf Formularen Ihren Besuchern immer einräumen. Die Aufschrift auf den Buttons können Sie selbst festlegen:

<input type=submit value=“Absenden“>
<input type=reset value=“Korrigieren“>

Jetzt müsste Ihr Formular funktionieren.

Frames & Co
Frameset heißt die Anweisung, mit der man das Browser-Fenster in mehrere Bereiche unterteilen kann. Diese lassen sich je nach Bedarf statisch oder variabel gestalten.

Doch bevor Sie Frames einsetzen, müssen Sie sich ein wenig umgewöhnen. Denn was der Web-Surfer in einem mit Frames unterteilten Browser-Fenster sieht, steht nicht mehr in einem, sondern in mehreren Teildokumenten. Das HTML-Dokument, welches die Rahmen definiert, enthält keine weiteren Anweisungen. Vielmehr ruft es seinerseits weitere HTML-Seiten auf und weist diese den Frames zu.

Diese Zuweisung geschieht innerhalb eines Framesets, das anstelle des BODY-Tags steht, mit <FRAMESET> beginnt und durch </FRAMESET> beendet wird. Wichtig sind die beiden Parameter ROWS und COLS.Mit ROWS teilen Sie das Browser-Fenster horizontal ein, mit COLS vertikal in Spalten. Die Anzahl der Bereiche hängt allein von der Anzahl der eingegebenen Werte nach dem Parameter.

<FRAMESET COLS=“33%,33%,33%“>

teilt das Browserfenster in drei gleichgroße Spalten ein. Für solche Einteilungen eignen sich Prozentangaben hervorragend. Doch Sie dürfen als Größenmaß auch Bildpunkte eingeben: 

<FRAMESET COLS=“300,200,140“>

Allerdings müssen Sie hierbei darauf achten, dass die Summe der in Pixel angegebenen Spaltenbreiten auch auf kleinere Bildschirme paßt. Sollte dies nicht der Fall sein, kümmert sich der Browser selbst um eine halbwegs passende Aufteilung.
Sie dürfen dem Navigator auch größte Handlungsfreiheit geben, indem Sie nur relative Größen eintragen:

<FRAMESET COLS=“*,3*“>

Damit teilen Sie das Fenster vertikal in zwei Bereiche auf. Die rechte Spalte ist dreimal so groß wie die linke, nimmt also drei Viertel des Browserfensters ein. Ihre ganze Stärke spielen die Parameter aus, wenn man sie mischt:

<FRAMESET COLS=“80,70%,*“>

Diese Anweisung teilt den Browser in drei Frames auf. Der linke ist exakt 80 Bildpunkte breit. Eine solch fixe Angabe ist etwa dann sinnvoll, wenn Sie ein kleines grafisches Logo einbinden wollen. Die zweite Spalte nimmt 70 Prozent des Gesamtbildschirms ein, während sich die dritte Spalte mit dem kläglichen Rest zufrieden gibt.

Nach den hier beschriebenen Verfahren lassen sich auch horizontale Bereiche anlegen, indem Sie statt COLS den Parameter ROWS benutzen.
Jetzt fehlen nur noch die Inhalte. Diese geben Sie mit der Anweisung <FRAME SRC=“seite.html“> an. 

Ein komplettes Frameset könnte so aussehen:

<html>
<head>
<title>Redaktionsbüro Goldmann</title>
</head>
<FRAMESET COLS=”30%,70%” > 
<FRAME SRC=”storinh.html” noresize> 
<FRAME SRC=”sto2.html” name=”story” noresize>
</FRAMESET> 
</html>

Damit nicht genug, lassen sich Framesets auch noch ineinander verschachteln. Wenn Sie den Bildschirm in zwei horizontale und drei vertikale Bereiche aufteilen möchten, verwenden Sie folgenden Code:

<FRAMESET ROWS=”50%,50%” > 
<FRAME SRC=”text1.html” noresize> 
<FRAMESET COLS=”33%,33%,33%”>
<FRAME SRC=”text2.html”> 
<FRAME SRC=”text3.html”> 
<FRAME SRC=”text4.html”> 
</FRAMESET>
</FRAMESET> 

Das Frame-Tag bringt eine Reihe Parameter mit, die den Seitenaufbau und den Umgang des Users mit den Bereichen beeinflussen. Per src für „source“ (Quelle) bestimmen Sie, welches Dokument im Frame erscheinen soll. Um zu vermeiden, dass der Surfer Frames per Maus vergrößert und verkleinert, geben Sie noresize ein. Mit scrolling=yes erlauben Sie, innerhalb eines Frames den Bildschirminhalt zu rollen. Entsprechend verbieten Sie es mit scrolling=no. Der Wert auto überlässt dem Browser die Entscheidung, ob gescrollt wird oder nicht. Dieser Wert ist zugleich die Standardeinstellung.

Wie weit der Fensterinhalt von einem Frame-Rahmen entfernt ist, legen HTML-Profis per marginheight für den linken und rechten Abstand oder marginwidth für den oberen und unteren Abstand fest. Beide Parameter vertragen nur Pixelangaben als Werte.

Ein Frame, dessen Größe nicht verändert werden darf, bei dem das Scrolling verboten ist und der oben, unten sowie seitlich 20 Pixel Rand frei lässt, sieht so aus:
<FRAME src=“doku.html“ noresize scrolling=no marginheight=20 marginwidth=20>

Sag’ mir Deinen Namen
So richtig interessant werden Frames erst, wenn man sie mit Hyperlinks kombiniert. Häufig ist folgende Methode: Links findet sich ein „Navigations-Frame“ mit anklickbaren Menüpunkten. Im rechten, weitaus größeren Rahmen erscheint, was links angeklickt wird. Dazu ist notwendig, dass die einzelnen Bildschirm-Rahmen Namen bekommen. 

Dafür gibt es das Attribut name. Es gibt dem Frame einen Namen und erlaubt damit, diesen Rahmen direkt anzusteuern. Das ist dann interessant, wenn von einem Rahmen aus auf Daten in einem anderen zugegriffen werden soll. 

<FRAME src=“doku.html“ name=“otto“>

Wichtig ist es, zu verstehen, dass der Name nichts mit dem Dokument zu tun hat, das in einem Rahmen gezeigt wird, sondern den Frame bezeichnet. Eine bessere Bezeichnungsmöglichkeit als „otto“ ist vielleicht
name=“rechts“

Damit können Sie sich besser merken, dass damit der rechte Bildschirmausschnitt genannt ist. 

Zuständig für den Zugriff auf einen Rahmen ist das Attribut target:

<a href=“neudok.html“ target=“otto“>...</a>

lädt neudok.html in den Frame otto. Wenn Sie den Rahmen „rechts“ genannt haben, muss natürlich dieser Name statt „Otto“ neben dem Target-Befehl stehen. 

Auf diesem Weg können Sie raffinierte Inhaltsverzeichnisse oder Verzweigungen auf Ihrem WWW-Server anlegen. Ein Frame enthält dabei die Steuerelemente und füllt je nach Mausklick einen oder mehrere andere Frames mit Inhalten. 

Auch für die Orientierung in langen Dokumenten eignet sich target. Anstelle eines Inhaltsverzeichnisses am Anfang des Dokuments, das auf mehrere anchors verweist, übernimmt nun ein eigener Frame diese Augabe. Damit bleibt das Verzeichnis immer im Blick. Ein Beispiel:

<html>
<head>
<title>Redaktionsbuero Goldmann</title>
</head>
<body background=”back.jpg” bgcolor=”FFFFFF”>
<base target=”story”>
<a href=“sto2.html#geschichte“>Die Geschichte der Textbausteine</a><p>
<a href=“sto2.html#volksmusik“>Die Wahrheit &uuml;ber Volksmusik</a><p>
<a href=“sto2.html#kater“>Der Kater <tt>(mit autobiographischen Elementen)</tt></a><p>
<br>
Zur&uuml;ck zum <a href=“welcome.html“ target=“_parent“>Redaktionsb&uuml;ro Goldmann</a>
</body>
</html>

Dieses Beispiel zeigt einen weiteren Anwendungsbereich des target-Parameters. Statt hier in jedem Hyperlink als target den Rahmen story anzugeben, dürfen Sie im base-Tag ein globales Sprungziel festlegen. Ein Klick auf eines der Hyperlinks verzweigt im Fenster story direkt zum angegebenen Anchor. Natürlich lassen sich nach diesem Verfahren auch andere Dokumente laden oder weitere Frames ansteuern. Namen und Rahmen müssen vorher in einem Frameset definiert werden.

Wenn Sie trotz base in ein anderes Fenster verzweigen möchten, geben Sie dieses als target in einem Hyperlink an. Eine solche Definition setzt das Default-Sprungziel außer Kraft.

Ebenfalls im Beispiel finden Sie einen von vier reservierten Namen für target. Diese beginnen alle mit einem Unterstrich. Mit _parent laden Sie das neue Dokument in das Fenster, in dem das Frameset vorher definiert wurde. Bei ineinander verschachtelten Rahmenkonstrukten kommen Sie so eine Ebene höher, wenn Sie sich auf der obersten Ebene befinden, verschwinden die Rahmen und Sie haben wieder nur ein Browser-Fenster vor sich.

Direkt in die Frame-Freiheit bringt Sie _top. Das angegebene Hyperlink verzweigt dann direkt in den framelosen Browser. Wenn Sie sich in endlosen Frame-Konstruktionen verstrickt haben, ist dies das Mittel der Wahl, wieder an die Oberfläche zu kommen.

Mit <a href=“docneu2.html“ target=“_self“>...</a> lädt der Netscape Navigator docneu.html in das Fenster, von dem aus das Hyperlink aufgerufen wurde. Auf diesem Weg lassen sich beispielweise Verzweigungen innerhalb eines Verzeichnisses definieren.

Wenn ein Dokument in ein eigenes neues Browser-Fenster geladen werden soll, verwenden Sie _blank. Setzen Sie dieses Werkzeug aber mit Bedacht ein. Nicht jeder Web-Surfer schätzt es, wenn eine WWW-Site immer neue Instanzen des Web-Browsers eröffnet – gerade auf speicherschwachen Systemen machen sich dann die Ladezeiten unangenehm bemerkbar.

Denken Sie bei der Arbeit mit Frames auch daran, dass nicht alle User mit Bildschirmauflösungen von 1280 x 1024 Bildpunkten unterwegs sind. Teilen Sie ein Browser-Fenster maximal in drei Frames ein, damit auch mit 640 x 480 Pixeln noch eine Orientierung möglich ist. Nur der sparsame Einsatz von Frames bringt Nutzen. Wer seine Web-Site mit -zig Frames zukleistert, wird mit dem wirren Layout niemanden begeistern können.

Etwas mehr Layout mit <div>
Erstaunliche Ergebnisse im Seitendesign lassen sich mit dem Tag <div> erzielen. Wie alle anderen Formatierungstags umfaßt <div>...</div> einen Absatz oder Text. Der Parameter align bestimmt, wie der Text ausgerichtet ist:

<div align=left>Mit div können Sie, <br>Text linksbündig</div><br>
<div align=center>zentiert</div><br>
<div align=right>oder rechtsbündig auf den Bildschirm bringen.</div><p>