5

Vorwort

Das Gebiet der Web-Technologien also der Sprachen, bertragungsprotokolle und Schnittstellen, die dafr sorgen, dass Web-Seiten ins Browser-Fenster des Anwenders gelangen ist
mittlerweile unbersehbar gro. Einige davon bauen aufeinander auf, andere konkurrieren miteinander. Neueinsteiger stellen deshalb hufig Fragen wie die, womit sie eigentlich anfangen sollen, welche Sprachen zu lernen sich am ehesten lohnt, in welcher Reihenfolge man vorgehen
sollte usw.
Fast ebenso unbersehbar wie das Gebiet der Web-Technologien ist mittlerweile aber auch das
Angebot an Einzelpublikationen zu bestimmten Technologien. Angesichts dieser Situation ist es
wichtig, den berblick zu behalten. Zusammenhnge zwischen den einzelnen Web-Technologien mssen verstanden werden, grundlegende Unterschiede wie der zwischen serverseitiger und
clientseitiger Datenverarbeitung mssen begriffen werden.
Das vorliegende Buch, das in der vollstndigen Ausgabe aus zwei Bnden besteht, ist eine Gesamtschau auf die heutige Situation beim Web Publishing. Der erste Band behandelt die BasisTechnologien HTML, CSS Stylesheets und JavaScript/DHTML sowie einfhrende Abschnitte fr
Einsteiger. Der zweite Band behandelt weiterfhrende Technologien wie das Definieren eigener
Beschreibungssprachen mit XML und serverseitige Datenverarbeitung mit CGI/Perl. Trotz seines
Umfangs kann auch die gesamte zweibndige Ausgabe nicht alles behandeln, was heute verbreitet ist. So werden beispielsweise PHP, die Microsoft-orientierte ASP-Technologie, die neueren
JavaServerPages (JSP) oder proprietre, aber beliebte Themen wie Macromedia Flash ausgeklammert. Dennoch ist das Buch wohl eines der umfassendsten Werke im Bereich der WebTechnologien auf dem Markt. Es richtet sich sowohl an Einsteiger, die Schritt fr Schritt in einer
empfohlenen Reihenfolge an die beschriebenen Technologien herangefhrt werden, als auch an
Profis, die eher etwas zum schnellen Nachschlagen bentigen.
Eine Besonderheit dieses Buches ist, dass sein zugrunde liegender Text im Web bereits berhmt
und tausendfach verlinkt ist. Das Buch basiert nmlich auf der im Web frei erhltlichen Dokumentation SELFHTML. Diese Dokumentation hat im deutschsprachigen Raum eine siebenstellige Leserzahl, gilt als anerkanntes Lehrwerk an Schulen, Berufsschulen und Universitten, und
ist in vielen Intranets, Web-Agenturen und Software-Schmieden lngst zu einer unentbehrlichen
Basishilfe geworden. SELFHTML (auf der CD zu diesem Buch enthalten) ist ein HypertextWerk, das selbst in HTML geschrieben ist und in mehreren Jahren durch Feedback und anhaltendes Autoreninteresse gereift ist. Viel Anwender-Feedback und die Untersttzung durch engagierte, dem Autor nahe stehende Fachleute sind in den Text mit eingeflossen.
Von dieser Praxisnhe profitiert natrlich auch die Print-Ausgabe. Der Buchinhalt ist keine
Auftragsarbeit des herausgebenden Franzis Verlages, sondern eine zeitlich und inhaltlich ungebundene Eigenleistung des Autors und seiner Untersttzer.

Kapitel 1: Vorwort

Der Autor bedankt sich besonders bei folgenden Personen, die zur inhaltlichen Qualittssicherung von SELFHTML und damit auch des Textes der beiden Bnde dieses Buches mit beigetragen haben:
Antje Hofmann (http://www.pc-anfaenger.de/), Thomas J.Sebestyen (http://www.meta-text.net/),
Burkhard Becker (http://www.bubec.de/), Swen Wacker (http://www.mixtura.de/) und Andr
Malo (http://www.o3media.de/).
Der Dank geht ferner an viele andere, die durch Fehlermeldungen, andere Zuarbeiten oder fachlich besonders produktives Engagement im Aktuell-Raum des SELFHTML-Projekts (http://
selfaktuell.teamone.de/) dazu beigetragen haben und weiter dazu beitragen, dass das Projekt
weiterlebt und damit auch die Basis zur Weiterentwicklung der vorliegenden Print-Ausgabe
bilden kann. Genannt werden diese Personen auf den Seiten http://selfaktuell.teamone.de/
people/devs.htm und http://selfaktuell.teamone.de/people/devs.htm.
Dank geht ferner an Wolfgang Nefzger, der die Buchumsetzung von SELFHTML besorgte, sowie
an den Franzis Verlag, bei dem sich der Autor gut aufgehoben fhlt.

Mnchen, im Februar 2002

Stefan Mnz

Verwendete Symbole

Das beschriebene Feature gehrt seit der Version 2.0 zum HTML-Standard.
Das beschriebene Feature gehrt seit der Version 3.2 zum HTML-Standard.
Das beschriebene Feature gehrt seit der Version 4.0 zum HTML-Standard.
Das beschriebene Feature gehrt zur Version 1.0 des XHTML-Standard.
Symbol fr deprecated. Bedeutet, dass das beschriebene Feature noch zum HTMLStandard gehrt, in Zukunft jedoch entfallen soll. In der Regel gibt es andere HTMLElemente oder andere Ergnzungssprachen wie CSS Stylesheets, durch die das
entsprechende Feature in Zukunft realisiert werden soll.
Das beschriebene Feature gehrt seit der Version 1.0 zum CSS-Standard.
Das beschriebene Feature gehrt seit der Version 2.0 zum CSS-Standard.
Das beschriebene Feature gehrt seit der Version 1.0 zum XML-Standard.
Das beschriebene Feature gehrt seit der Version 1.0 zum XSLT-Standard.
Das beschriebene Feature gehrt seit der Version 1.0 zum XPath-Standard.
Das beschriebene Feature gehrt seit der Version 1.0 zum DOM-Standard (Document
Object Model).
Das beschriebene Feature gehrt seit der Version 2.0 zum DOM-Standard (Document
Object Model).
Das beschriebene Feature ist seit der Version 1.0 von JavaScript verfgbar.
Das beschriebene Feature ist seit der Version 1.1 von JavaScript verfgbar.
Das beschriebene Feature ist seit der Version 1.2 von JavaScript verfgbar.
Das beschriebene Feature ist seit der Version 1.3 von JavaScript verfgbar.
Das beschriebene Feature ist seit der Version 1.5 von JavaScript verfgbar.
Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 1.0.

Verwendete Symbole

Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 2.0.

Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 3.0.
Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 4.0.
Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 5.0.
Das beschriebene Feature untersttzt der MS Internet Explorer ab Version 5.0 oder 5.5.
Das beschriebene Feature untersttzt Netscape seit Version 1.0.
Das beschriebene Feature untersttzt Netscape seit Version 1.1.
Das beschriebene Feature untersttzt Netscape seit Version 2.0.
Das beschriebene Feature untersttzt Netscape seit Version 3.0.
Das beschriebene Feature untersttzt Netscape seit Version 4.0.
Das beschriebene Feature untersttzt Netscape seit Version 4.01, 4.5, 4.6, 4.7.
Das beschriebene Feature untersttzt Netscape seit Version 6.0.

Inhaltsverzeichnis

Internet und WWW .......................................................................................... 27

1.1
1.1.1
1.1.2
1.1.3
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.3
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.4
1.4.1
1.4.2
1.4.3
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.6
1.6.1
1.6.2
1.6.3
1.6.4

Entstehung des Internet .............................................................................. 27

Das ARPA-Net ............................................................................................. 27
Wissenschaftliche Einrichtungen .................................................................. 28
Das Netz der Netze ..................................................................................... 28
Basis-Standards im Internet ......................................................................... 29
Das TCP/IP-Protokoll ................................................................................... 29
IP-Adressierung ........................................................................................... 30
Client-Server-Technologie ........................................................................... 31
DNS Domain Name Service ...................................................................... 32
Routing und Gateways ................................................................................ 34
Selbstorganisation im Internet ..................................................................... 34
Dienste im Internet ..................................................................................... 36
E-Mail ......................................................................................................... 36
Telnet und SSH ........................................................................................... 37
File Transfer (FTP)........................................................................................ 38
Gopher ....................................................................................................... 39
Chat (IRC)................................................................................................... 39
Newsgroups (News).................................................................................... 40
World Wide Web (WWW)............................................................................ 41
Entstehung des World Wide Web ................................................................ 41
Tim Berners-Lee und die Anfnge ................................................................ 41
Marc Andreessen, Netscape und der Boom ................................................. 43
Die Arbeit des W3-Konsortiums ................................................................... 44
Hypertext.................................................................................................... 45
Definitionen zu Hypertext ........................................................................ 45
Begriffe rund um Hypertext......................................................................... 49
Geschichte von Hypertext ........................................................................... 54
Hypertext und menschliches Verstehen ....................................................... 57
Hilfsmittel ................................................................................................... 60
Dokumente und Dokumentationen ............................................................. 60
Software ..................................................................................................... 65
Services im Web.......................................................................................... 68
Support ...................................................................................................... 69

10
2

Inhaltsverzeichnis

Web-Technologien ........................................................................................... 73
2.1
2.1.1
2.1.2
2.1.3
2.1.4
2.1.5
2.2
2.2.1
2.2.2
2.3
2.3.1
2.3.2
2.3.3
2.4
2.4.1
2.4.2
2.5
2.5.1
2.5.2
2.6
2.6.1
2.6.2
2.7
2.7.1
2.7.2
2.8
2.8.1
2.8.2
2.9
2.9.1
2.9.2
2.10
2.10.1
2.10.2

HTML ......................................................................................................... 73
HTML als lingua franca des Web .............................................................. 73
HTML als softwareunabhngiges Klartextformat .......................................... 74
HTML als Auszeichnungssprache ................................................................. 74
HTML fr Hypertext .................................................................................... 75
HTML-Versionen ......................................................................................... 75
CSS Stylesheets ........................................................................................... 77
Formatsprache fr HTML-Elemente ............................................................. 77
CSS-Versionen............................................................................................. 78
XML und XML-Derivate............................................................................... 79
XML als Definitionssprache fr Auszeichnungssprachen ............................... 79
XML-Derivate.............................................................................................. 80
XML-Versionen ........................................................................................... 81
JavaScript/DOM .......................................................................................... 81
Web-Seiten als Anwendungen ..................................................................... 81
JavaScript-Informationen ............................................................................. 82
CGI und Perl ............................................................................................... 83
CGI-Schnittstelle und Perl-Interpreter .......................................................... 83
CGI/Perl-Informationen ............................................................................... 84
PHP............................................................................................................. 84
PHP und HTML ........................................................................................... 84
PHP-Informationen...................................................................................... 85
ASP ............................................................................................................. 85
ASP und HTML............................................................................................ 85
ASP-Informationen ...................................................................................... 86
Java............................................................................................................. 86
Java und HTML ........................................................................................... 86
Java-Informationen...................................................................................... 87
ActiveX ....................................................................................................... 88
ActiveX und HTML ...................................................................................... 88
ActiveX-Informationen ................................................................................ 88
Flash ........................................................................................................... 89
Flash und HTML.......................................................................................... 89
Flash-Informationen .................................................................................... 90

Allgemeine Regeln fr HTML ........................................................................ 91

3.1
3.1.1
3.1.2
3.1.3
3.1.4
3.2
3.2.1

Textauszeichnung ....................................................................................... 91
Elemente und Tags in HTML ....................................................................... 91
Verschachtelung von Elementen.................................................................. 92
Attribute in Tags ......................................................................................... 92
HTML-Parser ............................................................................................... 93
Grundgerst einer (X)HTML-Datei............................................................... 93
Grundgerst einer HTML-Datei ................................................................... 94

Inhaltsverzeichnis
3.2.2
3.2.3
3.2.4
3.3
3.4
3.4.1
3.4.2
3.4.3
3.4.4
3.5
3.5.1
3.5.2
3.5.3
3.6
3.6.1
3.6.2
3.7
3.7.1
3.7.2
3.7.3
3.8
3.8.1
3.8.2
3.8.3
3.8.4
3.9
3.9.1
3.9.2
3.10
3.10.1
3.10.2
3.10.3
3.10.4
3.10.5

11

Grundgerst einer XHTML-Datei ................................................................. 94

Dokumenttyp-Angaben............................................................................... 95
Hinweis fr die Praxis .................................................................................. 98
Regeln beim Editieren von HTML ................................................................ 98
Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen............................ 99
Allgemeines zu Zeichen in HTML................................................................. 99
Deutsche Umlaute und scharfes S.............................................................. 100
Das Euro-Zeichen in HTML ........................................................................ 101
HTML-eigene Zeichen maskieren............................................................... 101
Farben definieren in HTML ........................................................................ 101
Hexadezimale Angabe von Farben............................................................. 102
Farbnamen fr die 16 Grundfarben ........................................................... 104
Netscape-Farbnamen ................................................................................ 104
Kommentare und Credits .......................................................................... 107
Nicht angezeigter Text (Kommentar) ........................................................ 107
Credits ...................................................................................................... 108
Referenzieren in HTML .............................................................................. 108
Mit vollstndigen URIs referenzieren .......................................................... 108
Absolute Pfadangaben relativ zum Basis-URI .............................................. 110
Pfadangaben relativ zum Basis-URI ............................................................ 110
Konventionen fr Dateinamen................................................................... 111
Dateinamen im Hinblick auf Server-Rechner .............................................. 111
Dateinamen im Hinblick auf Kompatibilitt................................................ 112
Dateiendungen ......................................................................................... 112
Default-Dateinamen bei Web-Servern........................................................ 112
Informationsverteilung und Dateiorganisation ........................................... 113
Hypertext schreiben Information verteilen .............................................. 113
Dateiorganisation...................................................................................... 113
Guter HTML-Stil ........................................................................................ 114
Nicht fr bestimmten Browser schreiben ................................................... 115
Nicht fr bestimmte Bildschirmauflsung schreiben................................... 116
HTML-Elemente nicht zweckentfremden ................................................... 116
Ehrliche und aussagekrftige Verweistexte verwenden ............................... 117
Grafiken richtig einsetzen .......................................................................... 117

Dateiweite Einstellungen.............................................................................. 119

4.1
4.1.1
4.1.2
4.1.3
4.1.4
4.1.5
4.1.6
4.1.7

HTML-Kopfdaten ...................................................................................... 119

Titel einer HTML-Datei .............................................................................. 119
Meta-Angaben zum Inhalt......................................................................... 119
Angabe zum Default-Zeichensatz .............................................................. 125
Angaben zu Default-Sprachen fr Scripts und Stylesheets .......................... 126
Datei von Originaladresse laden ................................................................ 126
Weiterleitung zu anderer Adresse (Forwarding).......................................... 127
Angaben zu PICS ...................................................................................... 128

12

Inhaltsverzeichnis
4.1.8
4.1.9
4.1.10
4.1.11
4.1.12
4.1.13
4.2
4.2.1
4.2.2
4.2.3
4.2.4

Meta-Angaben in separater Datei (Profil) ................................................... 129

Schema zu einer Meta-Angabe .................................................................. 129
Diverse Meta-Angaben.............................................................................. 130
Adressbasis und Zielfensterbasis ................................................................ 130
Logische Beziehungen............................................................................... 132
Durchsuchbarkeit mit Server-Kommunikation ............................................ 134
Dateiweite Einstellungen ........................................................................... 135
Farben fr Hintergrund, Text und Verweise ............................................... 135
Hintergrundbild (Wallpaper) ..................................................................... 137
Seitenrnder definieren ............................................................................. 138
Hintergrundmusik ..................................................................................... 140

Text strukturieren ........................................................................................... 141

5.1
5.1.1
5.1.2
5.1.3
5.2
5.2.1
5.2.2
5.2.3
5.3.4
5.3.5
5.3.6
5.3.7
5.3.8
5.4
5.4.1
5.4.2
5.4.3
5.4.4
5.4.5
5.4.6
5.5
5.5.1
5.5.2
5.5.3
5.5.4
5.6
5.6.1
5.6.2
5.6.3
5.6.4
5.7
5.7.1

berschriften ............................................................................................ 141

berschriften definieren ............................................................................ 141
berschriften ausrichten............................................................................ 142
berschriften formatieren mit CSS............................................................. 143
Textabstze............................................................................................... 144
Textabstze definieren .............................................................................. 144
Textabstze ausrichten .............................................................................. 145
Textabstze formatieren mit CSS ............................................................... 146
Zeilenumbruch ......................................................................................... 147
Zeilenumbruch erzwingen......................................................................... 147
Automatischen Zeilenumbruch verhindern ................................................ 148
Geschtzte Leerzeichen............................................................................. 149
Zeilenumbruch erlauben ........................................................................... 149
Listen ........................................................................................................ 150
Aufzhlungsliste definieren ........................................................................ 150
Nummerierte Liste definieren .................................................................... 152
Definitionsliste definieren .......................................................................... 153
Verzeichnis- oder Menliste definieren....................................................... 154
HTML-Eigenschaften fr Listen .................................................................. 155
Listen formatieren mit CSS ........................................................................ 157
Zitate und Adressen .................................................................................. 159
Zitate definieren........................................................................................ 159
Zitate mit URI-Quellenangabe ................................................................... 160
Adressen definieren ................................................................................... 160
Zitate und Adressen formatieren mit CSS................................................... 161
Prformatierter Text (wie im Editor eingegeben)........................................ 163
Textabschnitt mit prformatiertem Text definieren .................................... 163
Breite eines Bereichs mit prformatiertem Text .......................................... 164
ltere HTML-Elemente fr prformatierten Text......................................... 165
Prformatierten Text formatieren mit CSS.................................................. 165
Logische Auszeichnungen im Text............................................................. 167
HTML-Elemente fr logische Auszeichnung im Text................................... 167

Inhaltsverzeichnis
5.7.2
5.7.3
5.7.4
5.8
5.8.1
5.8.2
5.9
5.9.1
5.9.2
5.9.3
5.9.4
5.10
5.10.1
5.10.2
5.10.3
5.11
5.11.1
5.11.2
5.12
5.12.1
5.12.2
5.12.3
5.12.4

13

nderungsmarkierungen im Dokument ..................................................... 169

Textrichtung ndern ................................................................................. 170
Logische Elemente fr Textauszeichnung mit CSS formatieren ................... 171
Physische Auszeichnungen im Text............................................................ 171
HTML-Elemente fr physische Auszeichnung im Text................................. 172
Physische Elemente fr Textauszeichnung zustzlich mit CSS formatieren .. 173
Allgemeine Elemente fr Textbereiche....................................................... 174
Allgemeines Block-Element........................................................................ 174
lteres Block-Element fr zentrierte Bereiche ............................................. 175
Allgemeines Inline-Element........................................................................ 176
Allgemeine Elemente formatieren mit CSS................................................. 176
Trennlinien ............................................................................................... 178
Trennlinien definieren ............................................................................... 178
Trennlinien mit HTML gestalten ................................................................ 179
Trennlinien mit CSS gestalten.................................................................... 180
ltere Elemente zur Schriftformatierung .................................................... 181
Schriftart, Schriftge und Schriftfarbe...................................................... 181
CSS-Entsprechungen................................................................................. 183
ltere Browser-proprietre Elemente.......................................................... 184
Lauftext Marquee (Microsoft) ................................................................. 184
Mehrspaltiger Textfluss (Netscape)............................................................ 186
Raumschaffer (Netscape)........................................................................... 187
Blinkender Text (Netscape) ....................................................................... 188

Verweise ............................................................................................................. 189

6.1
6.1.1
6.1.2
6.1.3
6.1.4
6.2
6.2.1
6.2.2
6.3
6.3.1
6.3.2
6.4
6.4.1
6.4.2
6.5
6.5.1
6.5.2
6.5.3
6.6

Verweise definieren und gestalten ............................................................. 189

Allgemeines zu Verweisen ......................................................................... 189
Beispiele fr Verweise ................................................................................ 190
Verweise optisch gestalten mit CSS ........................................................... 191
Zielfenster fr Verweise bestimmen ........................................................... 193
Projektinterne Verweise ............................................................................. 194
Verweise zu Dateien oder Quellen im Projekt ............................................. 194
Anker definieren und Verweise zu Ankern .................................................. 196
Projektexterne Verweise ............................................................................ 198
Allgemeines zu projektexternen Verweisen ................................................ 198
Beispiele fr projektexterne Verweise ......................................................... 198
E-Mail-Verweise......................................................................................... 200
Verweis zu E-Mail-Adresse definieren ......................................................... 200
Optionen bei E-Mail-Verweisen.................................................................. 202
Download-Verweise und Verweise auf beliebige Dateien............................ 205
Download-Verweise .................................................................................. 205
Verweise zu beliebigen Dateien ................................................................. 206
Mime-Type des Verweisziels angeben ........................................................ 207
Typisierte Verweise.................................................................................... 208

14

Inhaltsverzeichnis
6.6.1
6.6.2
6.7
6.7.1
6.7.2

Grafiken .............................................................................................................. 213

7.1
7.1.1
7.1.2
7.1.3
7.1.4
7.1.5
7.1.6
7.2
7.2.1
7.2.2
7.2.3
7.2.4
7.3
7.3.1
7.4
7.4.1
7.4.2

Logische Beziehung zum Verweisziel angeben ........................................... 208

Sprache und Zeichensatz des Verweisziels angeben ................................... 209
Tabulator-Reihenfolge und Tastaturkrzel.................................................. 210
Tabulator-Reihenfolge fr Verweise............................................................ 210
Tastaturkrzel fr Verweise ........................................................................ 211

Grafiken einbinden.................................................................................... 213

Allgemeines zu Grafiken ............................................................................ 213
Grafikreferenz definieren ........................................................................... 213
Breite und Hhe von Grafiken ................................................................... 216
Rahmen um Grafiken ................................................................................ 217
Namen fr Grafiken .................................................................................. 218
Langbeschreibung fr Grafiken.................................................................. 218
Grafiken ausrichten ................................................................................... 219
Grafik zum umgebenden Text ausrichten .................................................. 219
Text um Grafik flieen lassen..................................................................... 221
Grafik und andere Inhalte mit Tabellen ausrichten ....................................... 223
Grafiken ausrichten mit CSS Stylesheets..................................................... 224
Grafiken als Verweise................................................................................. 227
Grafiken anstelle von Verweistext definieren .............................................. 227
Verweissensitive Grafiken (Image Maps) .................................................... 228
Verweissensitive Grafiken definieren .......................................................... 228
Server-seitige verweissensitive Grafiken...................................................... 232

Tabellen .............................................................................................................. 233

8.1
8.1.1
8.1.2
8.1.3
8.2
8.2.1
8.2.2
8.2.3
8.2.4
8.2.5
8.2.6
8.2.7
8.2.8
8.3
8.4
8.4.1
8.4.2
8.4.3

Aufbau einer Tabelle ................................................................................. 233

Tabellen definieren.................................................................................... 233
Spalten vordefinieren ................................................................................ 235
Kopf, Krper und Fu einer Tabelle definieren ........................................... 238
Gestaltung einer Tabelle............................................................................ 240
Zellenabstand und Zelleninnenabstand ..................................................... 240
Regeln fr den Auenrahmen.................................................................... 242
Regeln fr Gitternetzlinien......................................................................... 243
Breiten- und Hhenangaben ..................................................................... 245
Zeilenumbruch in Zellen verhindern.......................................................... 248
Ausrichtung von Zellen ............................................................................. 249
Hintergrundfarben und Hintergrundbilder................................................. 251
Farben fr Rand und Gitternetzlinien (Microsoft) ....................................... 254
Tabellen mit CSS gestalten ........................................................................ 254
Zellen verbinden ....................................................................................... 254
Zellen in einer Zeile spaltenweise verbinden .............................................. 254
Zellen in einer Spalte zeilenweise verbinden .............................................. 255
Zellen zugleich spalten- und zeilenweise verbinden ................................... 256

Inhaltsverzeichnis
8.5
8.5.1
8.5.2
8.5.3
8.6
8.6.1
8.6.2
8.7
8.7.1
8.7.2
8.7.3
8.7.4
8.7.5

15

Tabellenbeschriftung und Tabellenausrichtung .......................................... 257

Tabellenberschrift/-unterschrift definieren................................................ 257
Tabellenausrichtung.................................................................................. 259
Weitere Informationen .............................................................................. 261
Tabellen als Mittel fr Web-Seitenlayouts................................................... 261
Allgemeines zu Tabellen fr Web-Seitenlayouts.......................................... 261
Beispiel eines typischen Tabellen-Layouts................................................... 261
Tabellen und nichtvisuelle Medien............................................................. 265
Allgemeines .............................................................................................. 265
Zusammenfassung des Tabelleninhalts ...................................................... 265
Kurzbeschreibung fr Zellen definieren...................................................... 266
Kopfzellen in Zellen referenzieren .............................................................. 267
Tabellen-Kategorien definieren .................................................................. 269

Frames mehrere Fenster ............................................................................ 271

9.1
9.1.1
9.1.2
9.1.3
9.1.4
9.1.5
9.1.6
9.2
9.2.1
9.2.2
9.2.3
9.2.4
9.2.5
9.3
9.3.1
9.3.2
9.4
9.4.1
9.4.2
9.4.3
9.5
9.5.1
9.5.2

Framesets und Frames definieren............................................................... 271

Allgemeines zu Frames .............................................................................. 271
Grundgerst einer HTML-Datei mit Framesets ........................................... 272
Framesets definieren ................................................................................. 273
Frames zu einem Frameset definieren ........................................................ 276
Noframes-Bereich definieren ..................................................................... 279
Langbeschreibung fr Frame-Fenster ......................................................... 281
Eigenschaften von Frames ......................................................................... 281
Bildlaufleisten erzwingen/verhindern ......................................................... 281
Mindestabstnde zwischen Fensterrand und Fensterinhalt ......................... 282
Unvernderbare Fenstergre ................................................................... 284
Rahmendicke/Unsichtbare Fensterrahmen ................................................. 284
Farbige Fensterrahmen.............................................................................. 287
Verweise bei Frames .................................................................................. 287
Verweise zu anderen Frames...................................................................... 287
Verweise zum Beenden von Framesets....................................................... 288
Eingebettete Frames.................................................................................. 289
Eingebettete Frames definieren ................................................................. 289
Eigenschaften eingebetteter Frames .......................................................... 291
Verweise zu eingebetteten Frames............................................................. 292
Frames als Mittel fr Seitenlayouts............................................................. 294
Sinnvolle Einsatzmglichkeiten fr Frames ................................................. 294
Unfaire Schaufenster-Effekte ...................................................................... 296

10 Formulare........................................................................................................... 297
10.1
10.1.1
10.1.2
10.1.3
10.1.4

Formulare definieren ................................................................................. 297

Allgemeines zu Formularen ....................................................................... 297
Formularbereich definieren........................................................................ 298
Zielfenster fr Server-Antwort.................................................................... 300
Zu verarbeitende Zeichenstze .................................................................. 300

16

Inhaltsverzeichnis
10.1.5
10.2
10.2.1
10.2.2
10.2.3
10.2.4
10.2.5
10.2.6
10.2.7
10.3
10.3.1
10.3.2
10.3.3
10.3.4
10.3.5
10.4
10.4.1
10.4.2
10.5
10.5.1
10.5.2
10.6
10.7
10.7.1
10.8
10.8.1
10.8.2
10.9
10.9.1
10.9.2
10.9.3
10.10
10.10.1
10.10.2
10.10.3
10.11
10.11.1
10.12
10.12.1
10.12.2

Weitere Informationen .............................................................................. 301

Eingabefelder und Eingabebereiche........................................................... 301
Einzeilige Eingabefelder definieren............................................................. 301
Textvorbelegung bei einzeiligen Eingabefeldern ........................................ 303
Eingabefelder fr Passwrter ..................................................................... 304
Mehrzeilige Eingabebereiche definieren..................................................... 305
Textvorbelegung bei mehrzeiligen Eingabebereichen ................................ 306
Zeilenumbruch bei mehrzeiligen Eingabebereichen ................................... 307
Eingabefelder und Eingabebereiche auf nur lesen setzen ........................ 309
Auswahllisten ............................................................................................ 310
Auswahllisten definieren............................................................................ 310
Auswahllisten mit Mehrfachauswahl .......................................................... 312
Eintrge vorselektieren .............................................................................. 313
Absendewert von Eintrgen bestimmen..................................................... 314
Verschachtelte Auswahllisten definieren..................................................... 315
Radiobuttons und Checkboxen ................................................................. 317
Radiobuttons definieren ............................................................................ 317
Checkboxen definieren ............................................................................. 318
Klick-Buttons............................................................................................. 319
Klick-Buttons definieren (herkmmlich) ..................................................... 319
Klick-Buttons definieren (modern) ............................................................. 320
Felder fr Datei-Upload ............................................................................. 322
Versteckte Formularelemente .................................................................... 324
Versteckte Elemente definieren .................................................................. 324
Guppierung von Elementen und Label fr Elemente .................................. 325
Elemente gruppieren................................................................................. 325
Label fr Elemente .................................................................................... 327
Tabulator-Reihenfolge, Tastaturkrzel und Ausgrauen................................ 328
Tabulator-Reihenfolge ............................................................................... 328
Tastaturkrzel ........................................................................................... 329
Elemente ausgrauen.................................................................................. 330
Buttons zum Absenden oder Abbrechen.................................................... 331
Buttons definieren (herkmmlich) ............................................................. 331
Grafische Buttons definieren...................................................................... 333
Buttons zum Absenden oder Abbrechen definieren (modern) .................... 334
Formulare formatieren mit CSS.................................................................. 334
Formulare mit CSS gestalten ..................................................................... 334
Formulare verarbeiten ............................................................................... 338
Formulare als E-Mail .................................................................................. 338
Formulare und CGI ................................................................................... 339

11 Multimedia ........................................................................................................ 341

11.1
11.1.1

Objekte einbinden .................................................................................... 341

Allgemeines zu Objekten in HTML............................................................. 341

Inhaltsverzeichnis
11.1.2
11.1.3
11.1.4
11.1.5
11.1.6
11.1.7
11.1.8
11.2
11.2.1
11.2.2
11.2.3
11.2.4
11.2.5
11.3
11.3.1
11.3.2
11.4
11.4.1
11.4.2
11.4.3

17

Datendateien als Objekt einbinden............................................................ 342

Verweissensitive Grafiken als Objekt einbinden .......................................... 344
Java-Applets als Objekt einbinden.............................................................. 345
ActiveX-Controls als Objekt einbinden....................................................... 347
Flash-Anwendungen als Objekt einbinden ................................................. 348
Rahmen um Objekte ................................................................................. 350
Namen fr Objekte ................................................................................... 352
Eigenschaften von Objekten ...................................................................... 352
Objekt zum umgebenden Text ausrichten ................................................. 352
Text um ein Objekt flieen lassen .............................................................. 353
Meldungstext whrend des Ladevorgangs anzeigen .................................. 355
Objekte nur bei Aufruf durch Anwender anzeigen ..................................... 356
Objekte formatieren mit CSS ..................................................................... 357
Java-Applets einbinden (herkmmlich) ...................................................... 357
Java-Applets einbinden.............................................................................. 357
Java-Applets ausrichten ............................................................................. 360
Multimedia einbinden (Netscape herkmmlich) ........................................ 361
Multimedia-Bereich definieren................................................................... 361
Multimedia-Bereiche ausrichten ................................................................ 363
Alternativer Inhalt fr Browser ................................................................... 363

12 Layer (Netscape) ............................................................................................. 365

12.1
12.1.1
12.1.2
12.1.3
12.1.4
12.1.5
12.1.6
12.1.7
12.1.8
12.2
12.2.1
12.2.2
12.2.3

Layer definieren und positionieren............................................................. 365

Allgemeines zu Layern............................................................................... 365
Layer definieren ........................................................................................ 366
Inline-Layer definieren ............................................................................... 367
Anzeigebereich von Layern beschneiden ................................................... 368
Layer mit Inhalt aus anderer Datei ............................................................. 369
Layer verschachteln................................................................................... 370
Hintergrundfarbe fr Layer ........................................................................ 371
Hintergrundbild (Wallpaper) fr Layer ....................................................... 372
Layer anordnen und kontrollieren.............................................................. 373
Angaben zur Schichtposition mit Layer-Namen ......................................... 373
Angaben zur Schichtposition mit Indexnummern ...................................... 374
Layer verstecken und anzeigen .................................................................. 375

13 Universalattribute und weiterfhrende HTML-Elemente.................. 377

13.1
13.2
13.3
13.3.1
13.4
13.4.1
13.4.2
13.4.3

Allgemeine Universalattribute.................................................................... 377

Event-Handler fr Scripts ........................................................................... 379
Weiterfhrende HTML-Elemente................................................................ 380
Stylesheet-Bereiche definieren ................................................................... 380
Script-Bereiche in HTML............................................................................ 382
Script-Bereich definieren ........................................................................... 382
Noscript-Bereich definieren ....................................................................... 384
Weitere Angaben zum Script ..................................................................... 385

18

Inhaltsverzeichnis

14 XHTML und HTML .......................................................................................... 387

14.1
14.1.1
14.1.2
14.1.3
14.1.4
14.1.5
14.1.6
14.1.7
14.1.8
14.1.9
14.1.10
14.1.11
14.1.12
14.1.13
14.1.14
14.1.15
14.1.16
14.1.17
14.2
14.2.1
14.2.2

Unterschiede zwischen XHTML und HTML ................................................ 387

Allgemeines zu XHTML ............................................................................. 387
Unterschied: Mime-Typen ......................................................................... 388
Unterschied: Dateinamen .......................................................................... 388
Unterschied: Die XML-Deklaration............................................................. 389
Unterschied: Dokumenttyp-Angaben ........................................................ 390
Unterschied: HTML-Wurzelelement mit Namensraumangabe .................... 391
Unterschied: Strengeres Einhalten des HTML-Grundgersts ....................... 391
Unterschied: Kleinschreibung .................................................................... 392
Unterschied: Leere Elemente ..................................................................... 392
Unterschied: Elemente mit optionalem Abschluss-Tag ............................... 393
Unterschied: Allein stehende (leere) Attribute ............................................ 393
Unterschied: Leerraum in Wertzuweisungen .............................................. 394
Unterschied: Verweise zu Ankern ............................................................... 394
Unterschied: Das Universalattribut lang= ................................................... 395
Unterschied: Inhalt von Script- und Style-Bereichen ................................... 395
Unterschied: Ausnahmen von Verschachtelungsregeln............................... 396
Beispiel eines XHTML-gerechten Dokuments ............................................. 396
Modularisierung von XHTML und XHTML 1.1 ........................................... 398
Allgemeines zur Modularisierung von XHTML............................................ 398
Die Module von XHTML 1.1...................................................................... 400

15 CSS Stylesheets ................................................................................................ 403

15.1
15.1.1
15.1.2
15.1.3
15.1.4
15.2
15.2.1
15.2.2
15.2.3
15.2.4
15.2.5
15.2.6
15.2.7
15.3
15.3.1
15.3.2
15.3.3
15.3.4
15.3.5
15.3.6
15.3.7

CSS Stylesheets und HTML........................................................................ 403

Sinn und Zweck von CSS Stylesheets ......................................................... 403
Stylesheet-Sprachen, -Versionen und -Informationen ................................. 403
Stylesheets, Web-Browser und Anwender .................................................. 404
CSS-Formate und CSS-Eigenschaften......................................................... 406
CSS Stylesheets in HTML einbinden........................................................... 406
Formate zentral fr eine HTML-Datei definieren......................................... 406
Formate zentral in separater CSS-Datei definieren...................................... 407
Formate innerhalb eines HTML-Elements definieren..................................... 408
Verschiedene separate Stylesheets fr unterschiedliche Ausgabemedien..... 408
Formatdefinitionen fr unterschiedliche Ausgabemedien ........................... 410
Kommentare innerhalb von Stylesheet-Bereichen ...................................... 411
Stylesheet-Sprache ausdrcklich festlegen ................................................. 412
Zentrale Formate definieren ...................................................................... 412
Aufbau zentraler Formate .......................................................................... 412
Formate fr HTML-Elemente definieren ..................................................... 413
Formate fr verschachtelte HTML-Elemente definieren............................... 415
Attributbedingte Formate definieren ......................................................... 417
Formate fr Klassen definieren................................................................... 419
Klassen in Verbindung mit den Elementen div und span ............................ 420
Individualformate definieren...................................................................... 422

Inhaltsverzeichnis
15.3.8
15.4
15.4.1
15.5
15.5.1
15.5.2
15.5.3
15.5.4

19

Pseudoformate definieren.......................................................................... 424

HTML-Elemente direktformatieren............................................................. 425
Formatdefinitionen mit dem style-Attribut ................................................. 425
Maeinheiten, Farbangaben und Wertzuweisung ...................................... 426
Numerische Angaben................................................................................ 426
Farbangaben............................................................................................. 428
Erlaubte feste Werte und Zeichenkettenangaben ....................................... 430
Numerische Angaben fr Sprachausgabe .................................................. 431

16 CSS-Eigenschaften .......................................................................................... 433

16.1
16.2
16.3
16.4
16.5
16.6
16.7
16.8
16.8.1
16.9
16.10
16.11
16.12
16.13
16.14
16.14.1
16.15

Schriftformatierung ................................................................................... 433

Schriftformatierung mit Schriftartendatei................................................... 444
Ausrichtung und Absatzkontrolle ............................................................... 448
Auenrand und Abstand ........................................................................... 454
Innenabstand............................................................................................ 460
Rahmen .................................................................................................... 463
Hintergrundfarben und -bilder .................................................................. 471
Listenformatierung .................................................................................... 477
list-style-type (Darstellungstyp).................................................................. 478
Tabellenformatierung................................................................................ 483
Pseudoformate.......................................................................................... 489
Positionierung und Anzeige von Elementen ............................................... 494
Layouts fr Printmedien ............................................................................ 511
Sprachausgabe.......................................................................................... 517
Anzeigefenster .......................................................................................... 526
cursor (Mauszeiger)................................................................................... 527
Filter (nur Microsoft) ................................................................................. 530

17 JavaScript und DOM....................................................................................... 543

17.1
17.2
17.3
17.4
17.5
17.6

JavaScript und HTML................................................................................. 543

Standards, Sprachvarianten und Sprachversionen ...................................... 544
Hinweise fr die Praxis............................................................................... 548
JavaScript-Bereiche in HTML definieren...................................................... 549
JavaScript-Anweisungen in HTML-Tags ...................................................... 550
JavaScript in separaten Dateien ................................................................. 551

18 JavaScript: Sprachelemente ......................................................................... 553

18.1
18.1.1
18.1.2
18.1.3
18.1.4
18.2

Allgemeine Regeln fr JavaScript ............................................................... 553

Anweisungen notieren .............................................................................. 553
Anweisungsblcke notieren ....................................................................... 554
Selbst vergebene Namen .......................................................................... 555
Kommentare in JavaScript ......................................................................... 556
Variablen und Werte ................................................................................. 556

20

Inhaltsverzeichnis
18.2.1
18.2.2
18.3
18.3.1
18.3.2
18.3.3
18.3.4
18.3.5
18.3.6
18.3.7
18.3.8
18.4
18.4.1
18.4.2
18.4.3
18.4.4
18.5
18.5.1
18.5.2
18.6
18.6.1
18.6.2
18.6.3
18.6.4
18.6.5
18.6.6
18.6.7
18.6.8
18.6.9
18.6.10
18.7
18.7.1
18.7.2
18.7.3
18.8
18.8.1
18.8.2
18.8.3
18.9
18.9.1
18.10
18.10.1

Variablen definieren .................................................................................. 556

Werte von Variablen ndern ...................................................................... 558
Objekte, Eigenschaften und Methoden...................................................... 559
Vordefinierte JavaScript-Objekte ................................................................ 559
Vordefinierte JavaScript-Objekte verwenden .............................................. 560
Eigene Objekte definieren ......................................................................... 561
Eigenschaften von Objekten ...................................................................... 563
Objekt-Methoden ..................................................................................... 564
Abfragen, ob ein Objekt existiert ............................................................... 564
Mehrere Anweisungen mit einem Objekt ausfhren (with) ........................ 565
Auf aktuelles Objekt Bezug nehmen (this).................................................. 566
Funktionen................................................................................................ 567
Funktion definieren ................................................................................... 567
Funktion aufrufen...................................................................................... 568
Funktion mit Rckgabewert aufrufen ......................................................... 569
Vordefinierte JavaScript-Funktionen ........................................................... 571
Steuerzeichen und besondere Notationen ................................................. 572
Steuerzeichen bei Zeichenketten ............................................................... 572
Notation numerischer Werte ..................................................................... 572
Operatoren ............................................................................................... 573
Zuweisungsoperator ................................................................................. 573
Vergleichsoperatoren ................................................................................ 573
Berechnungsoperatoren ............................................................................ 574
Logische Operatoren................................................................................. 575
Bit-Operatoren .......................................................................................... 576
Operator zur Zeichenkettenverknpfung ................................................... 576
Operatorenrangfolge ................................................................................ 576
Operator zur Typenbestimmung ............................................................... 577
void-Operator ........................................................................................... 578
Operator zum Lschen von Objekten ........................................................ 578
Bedingte Anweisungen (if-else/switch) ...................................................... 578
Wenn-dann-Bedingungen mit "if".............................................................. 578
Einfache Entweder-oder-Abfrage ............................................................... 579
Fallunterscheidung mit switch................................................................ 581
Schleifen (while/for/do-while) ................................................................... 582
Schleifen mit while ................................................................................ 582
Schleifen mit for .................................................................................... 583
Kontrolle innerhalb von Schleifen break und continue............................. 586
Reservierte Wrter..................................................................................... 587
bersicht reservierter Wrter ..................................................................... 587
Event-Handler ........................................................................................... 589
onMouseover (beim berfahren des Elements mit der Maus) .................... 600

Inhaltsverzeichnis

21

19 JavaScript: Beispiele........................................................................................ 605

19.1
19.2
19.3
19.4
19.5
19.6
19.7
19.8
19.9
19.10
19.11
19.12

Zwei Frames gleichzeitig ndern ............................................................... 605

Seitenanzeige in Frames verhindern........................................................... 609
Taschenrechner......................................................................................... 612
Monatskalender ........................................................................................ 617
Persnliche Seitenbesuche zhlen mit Cookies........................................... 622
Formulareingaben berprfen................................................................... 625
Dynamische grafische Buttons................................................................... 628
Aufenthaltsdauer auf Web-Seite anzeigen .................................................. 632
Verweisliste als Auswahlliste....................................................................... 634
Fehlerbehandlung mit onError................................................................... 638
Fehlerbehandlung mit dem Statement try..catch ....................................... 640
nderungen der Fenstergre berwachen ............................................... 642

20 JavaScript: Objekt-Referenz ......................................................................... 647

20.1
20.1.1
20.1.2
20.2
20.3
20.4
20.5
20.6
20.7
20.8
20.9
20.10
20.11
20.12
20.13
20.14
20.15
20.16
20.17
20.18
20.19
20.20
20.21
20.22
20.23
20.24
20.25

Hinweise zur Objekt-Referenz .................................................................... 648

Objekthierarchie ....................................................................................... 648
Objekt-Referenz verwenden ...................................................................... 648
window .................................................................................................... 649
frames....................................................................................................... 677
document ................................................................................................. 681
HTML-Elementobjekte............................................................................... 700
node......................................................................................................... 775
all ............................................................................................................. 796
style.......................................................................................................... 815
anchors..................................................................................................... 821
applets...................................................................................................... 824
forms ........................................................................................................ 826
elements ................................................................................................... 833
options ..................................................................................................... 842
images ...................................................................................................... 850
embeds..................................................................................................... 857
layers ........................................................................................................ 862
links .......................................................................................................... 879
event ........................................................................................................ 883
history ...................................................................................................... 891
location .................................................................................................... 893
Array......................................................................................................... 897
Boolean .................................................................................................... 908
Date ......................................................................................................... 909
Function ................................................................................................... 926
Math ........................................................................................................ 929

22

Inhaltsverzeichnis
20.26
20.27
20.28
20.29
20.30
20.31
20.32
20.33

navigator .................................................................................................. 939

mimeTypes ............................................................................................... 943
plugins...................................................................................................... 946
Number .................................................................................................... 949
RegExp ..................................................................................................... 955
Screen ...................................................................................................... 959
string ........................................................................................................ 962
Objektunabhngige Funktionen ................................................................ 977

21 Dynamisches HTML ........................................................................................ 985

21.1
21.1.1
21.1.2
21.2
21.2.1
21.2.2
21.2.3
21.2.4
21.2.5
21.2.6
21.3
21.3.1
21.3.2
21.3.3
21.3.4
21.3.5
21.3.6
21.3.7
21.4
21.4.1
21.4.2
21.4.3
21.4.4
21.4.5
21.4.6
21.4.7
21.4.8
21.4.9
21.5
21.5.1
21.5.2
21.5.3
21.5.4
21.5.5

Allgemeines zu Dynamischem HTML ......................................................... 985

Das Dynamische am Dynamischen HTML .............................................. 985
Das Problem der inkompatiblen Modelle ................................................... 986
Das Document Object Model (DOM) ........................................................ 986
Allgemeines zum DOM ............................................................................. 986
Elementinhalte dynamisch ndern............................................................. 988
HTML-Attribute dynamisch ndern............................................................ 991
CSS-Eigenschaften dynamisch ndern ....................................................... 993
Neue Knoten erzeugen und in Baumstruktur einhngen ............................ 995
Event-Handling beim DOM ....................................................................... 998
Das ltere DHTML-Modell von Microsoft ................................................. 1001
Allgemeines zum Microsoft-Modell.......................................................... 1001
Script-Sprachen: JavaScript, JScript und VBScript ..................................... 1002
Das all-Objekt ......................................................................................... 1003
CSS Stylesheets und Scripts ..................................................................... 1005
Schreibweise von CSS-Eigenschaften in JavaScript/JScript......................... 1007
Event-Handler und das Event-Objekt ....................................................... 1009
Vererbung bei Events (Event-Bubbling).................................................... 1010
Das ltere DHTML-Modell von Netscape ................................................. 1012
Allgemeines zum DHTML-Modell von Netscape 4.x................................. 1012
Layer-Bereiche dynamisch anzeigen/verstecken ....................................... 1013
Layer-Bereiche dynamisch berlappen..................................................... 1015
Layer-Bereiche dynamisch bewegen ........................................................ 1018
Layer-Bereiche dnyamisch vergrern/verkleinern ................................... 1022
Layer-Inhalte dynamisch austauschen ...................................................... 1025
Layer ohne layer-Element simulieren........................................................ 1027
Das Event-Objekt .................................................................................... 1029
Inline-Scripts bei Layern .......................................................................... 1032
Datenanbindung (nur Microsoft)............................................................. 1034
Allgemeines zur Datenanbindung............................................................ 1034
Beispiel: Datei dynamisch in Tabelle einbinden ........................................ 1035
Beispiel: Daten durchsuchbar machen ..................................................... 1038
HTML-Elemente fr die Anzeige von externen Daten ............................... 1043
Datenmodell: Tabular Data Control (TDC)............................................... 1048

Inhaltsverzeichnis
21.5.6
21.5.7
21.5.8
21.5.9
21.6
21.6.1
21.6.2
21.6.3
21.6.4
21.6.5
21.6.6

23

Datenmodell: Remote Data Service (RDS)................................................ 1050

Datenmodell: JDBC DataSource Applet.................................................... 1051
Datenmodell: XML Data Source .............................................................. 1053
Datenmodell: MSHTML Data Source ....................................................... 1054
Dynamische Filter (nur Microsoft)............................................................ 1054
Allgemeines zu dynamischen Filtern ........................................................ 1054
Einfaches Dynamisches ndern von Filterwerten...................................... 1055
Flieende bergnge mit dem blendTrans-Filter...................................... 1057
Flieende bergnge mit dem revealTrans-Filter ..................................... 1060
Ein-/Ausblend-Effekte .............................................................................. 1062
Flieende Seitenbergnge ..................................................................... 1065

22 DHTML Praxis-Lsungen ......................................................................... 1067

22.1
22.1.1
22.1.2
22.1.3
22.2
22.2.1
22.2.2
22.3
22.3.1
22.3.2
22.4
22.4.1
22.4.2

Allgemeine DHTML-Bibliothek................................................................. 1067

Quelltext mit Erluterungen .................................................................... 1067
Test der DHTML-Bibliothek ..................................................................... 1075
DHTML-Bibliothek erweitern ................................................................... 1078
Dynamische Navigationsleiste ................................................................. 1078
Hinweise zu diesem Beispiel .................................................................... 1078
Quelltext mit Erluterungen .................................................................... 1079
Laufende Datums-/Uhrzeitanzeige........................................................... 1084
Hinweise zu diesem Beispiel .................................................................... 1084
Quelltext mit Erluterungen .................................................................... 1085
Bilderbuch zum Umblttern .................................................................... 1087
Hinweise zu diesem Beispiel .................................................................... 1087
Quelltext mit Erluterungen .................................................................... 1088

23 Internationalisierung ................................................................................... 1093

23.1
23.1.1
23.1.2
23.1.3
23.1.4
23.1.5
23.2
23.2.1
23.2.2
23.2.3
23.3
23.3.1
23.3.2
23.4
23.4.1
23.4.2

Computer und geschriebene Sprache...................................................... 1093

Bits, Bytes und Zeichen ........................................................................... 1093
Beispiel fr Zeichenstze ......................................................................... 1094
Die Grenzen von Bytes und Zeichenstzen sprengen ............................... 1095
Die Bedeutung der Schriftarten ............................................................... 1095
Schriftkulturen mit anderer Schreibrichtung ............................................ 1096
Zeichenstze (ISO-8859-Familie und andere)........................................... 1096
Die ISO-8859-Zeichenstze ..................................................................... 1096
Liste der ISO-8859-Zeichenstze.............................................................. 1098
Alle offiziellen Zeichenstze ..................................................................... 1101
Das Unicode-System ............................................................................... 1102
Allgemeines zu Unicode .......................................................................... 1102
Aufbau des Unicode-Systems................................................................... 1103
Downloadbare Schriftarten...................................................................... 1105
Allgemeines zu downloadbaren Schriftarten ............................................ 1105
TrueDoc (Bitstream) ................................................................................ 1106

24

Inhaltsverzeichnis
23.4.3
23.4.4

Microsoft und das Web Embedding Fonts Tool WEFT .............................. 1107
Downloadbare Schriftarten in HTML einbinden ....................................... 1108

24 Grafik ................................................................................................................. 1111

24.1
24.1.1
24.1.2
24.1.3
24.1.4
24.1.5
24.1.6
24.2
24.2.1
24.2.2
24.2.3
24.2.4
24.2.5
24.2.6
24.2.7
24.2.8
24.2.9
24.2.10
24.3
24.3.1
24.3.2
24.3.3
24.3.4
24.3.5
24.3.6
24.3.7
24.3.8
24.3.9
24.3.10
24.3.11
24.3.12
24.3.13
24.4
24.4.1
24.4.2
24.4.3
24.4.4

Grafikformate fr Web-Seiten .................................................................. 1111

Allgemeines zu Grafikformaten fr Web-Seiten ........................................ 1111
Das GIF-Format ....................................................................................... 1111
Das JPEG-Format ..................................................................................... 1112
Das PNG-Format ..................................................................................... 1113
Das LuraWave-Format ............................................................................. 1114
Das SVG-Format...................................................................................... 1115
Typische Grafiksorten fr Web-Seiten ...................................................... 1116
Buttons (Schaltflchen) ........................................................................... 1116
Dots (Auflistungspunkte) ......................................................................... 1117
Bars (Trennleisten) .................................................................................. 1118
Wallpapers (Hintergrundbilder) ............................................................... 1119
Symbole (Textergnzung oder Textersatz)............................................... 1121
Cliparts (Illustrationen) ............................................................................ 1121
Thumbnails (Vorschaugrafiken) ............................................................... 1123
Fotos....................................................................................................... 1124
Blinde Pixel ............................................................................................. 1124
Grafische Layout-Elemente ...................................................................... 1125
Techniken und Begriffe der Bildbearbeitung ............................................ 1126
Allgemeines zu Raster- bzw. Pixelgrafiken ................................................ 1126
Bildgre, dpi und Pixel .......................................................................... 1127
Farbtiefen, Farbmodelle und Farbkanle .................................................. 1128
Farbpaletten und indizierte Farben .......................................................... 1129
Alphakanal und echte Transparenz .......................................................... 1129
Transparenz einer bestimmten Palettenfarbe ........................................... 1130
Dithering (Error-Diffusion)....................................................................... 1130
Graustufen .............................................................................................. 1132
Helligkeit, Sttigung und Kontrast ........................................................... 1132
Histogramm............................................................................................ 1134
Gammakorrektur..................................................................................... 1135
Filtereffekte ............................................................................................. 1136
Anti-Aliasing............................................................................................ 1139
Animierte GIF-Grafiken ............................................................................ 1140
Allgemeines zu animierten GIF-Grafiken .................................................. 1140
Diashow-Effekte durch animierte GIF-Grafiken ......................................... 1140
Daumenkino-Effekte durch animierte GIF-Grafiken................................... 1141
Vorgehensweise beim Erstellen animierter GIF-Grafiken ........................... 1142

25 Web-Projektverwaltung .............................................................................. 1143

25.1
25.1.1

Web-Projekte planen ............................................................................... 1143

Allgemeines zu Web-Projekten ................................................................ 1143

Inhaltsverzeichnis
25.1.2
25.1.3
25.1.4
25.1.5
25.1.6
25.1.7
25.1.8
25.1.9
25.1.10
25.2
25.2.1
25.2.2
25.2.3
25.2.4
25.2.5
25.2.6
25.2.7
25.2.8
25.3
25.3.1
25.3.2
25.3.3
25.3.4
25.4
25.4.1
25.4.2
25.4.3
25.4.4
25.4.5
25.4.6
25.5
25.5.1
25.5.2
25.6
25.6.1
25.6.2
25.6.3
25.6.4
25.6.5

25

Ziel des Projekts ...................................................................................... 1143

Zielgruppe des Projekts ........................................................................... 1144
Projektumgebung im Web erforschen ..................................................... 1145
Inhalte und Redaktion ............................................................................. 1145
Kostenaufwand ....................................................................................... 1146
Terminierung und Ankndigung ............................................................. 1147
Gliederung und Strukturierung................................................................ 1148
Corporate Design.................................................................................... 1148
Web-Design ............................................................................................ 1149
Web-Projekte publizieren......................................................................... 1150
Allgemeines zum Publizieren von Web-Projekten ..................................... 1150
Homepages bei Online-Diensten ............................................................. 1151
Kostenlose Homepages ........................................................................... 1152
Eigene Domain-Adresse........................................................................... 1152
Virtual Hosting mit eigener Domain ........................................................ 1152
Server-Hosting mit eigener Domain......................................................... 1153
Server-Housing mit eigener Domain ........................................................ 1154
Publizieren mit FTP.................................................................................. 1154
Web-Projekte bekannt machen................................................................ 1155
Allgemeines ............................................................................................ 1155
Projekte bei Suchdiensten und Verzeichnissen anmelden ......................... 1155
Strategien bei der Online-Kommunikation ............................................... 1158
Sonstige Bekanntmachungsstrategien ..................................................... 1158
Web-Projekte kontrollieren ...................................................................... 1159
Allgemeines ............................................................................................ 1159
Log-Dateien des Web-Servers .................................................................. 1160
Statistiken ............................................................................................... 1161
Statistiken auswerten............................................................................... 1162
Begriffe wie Hits, Pageviews und Visits..................................................... 1163
Anwender-Feedback auswerten ............................................................... 1164
Provider wechseln mit Web-Projekten...................................................... 1165
Provider wechseln bei vorhandener Domain-Adresse ............................... 1165
Provider wechseln und neue Domain-Adresse.......................................... 1165
Rechtliche Aspekte von Web-Projekten .................................................... 1166
Allgemeines ............................................................................................ 1166
Hoheit und Verantwortlichkeit................................................................. 1167
Relevante Rechtsbereiche (Deutschland).................................................. 1168
Gesetze fr neue Medien (in Deutschland)........................................... 1169
Autoren-Aussage zur Link-Haftung........................................................... 1171

Technische Ergnzugen .............................................................................. 1173

A.1
A.2
A.3

HTTP-Statuscodes ................................................................................... 1173

Mime-Typen ........................................................................................... 1178
Sprachenkrzel ....................................................................................... 1183

26

Inhaltsverzeichnis
A.4
A.5
A.6
A.7

HTML: Elementreferenz .............................................................................. 1207

B.1
B.2
B.3
B.4
B.5

Allgemeines zur HTML-Attributreferenz ................................................... 1225

#CDATA.................................................................................................. 1225
ID, IDREF oder Name .............................................................................. 1225
Zahl ........................................................................................................ 1226
Universalattribute.................................................................................... 1226
Attributreferenz....................................................................................... 1228

HTML: Zeichenreferenz .............................................................................. 1263

D.1
D.2
D.3
D.4
D.5
D.6
D.7
D.8
D.9

Allgemeines zur HTML-Elementreferenz................................................... 1207

Block-Elemente ....................................................................................... 1207
Inline-Elemente ....................................................................................... 1207
#PCDATA................................................................................................ 1208
Elementreferenz ...................................................................................... 1208

HTML: Attributreferenz .............................................................................. 1225

C.1
C.2
C.3
C.4
C.5
C.6

Client-Identifikationen............................................................................. 1189
Client-Identifikationen anderer Browser ................................................... 1191
robots.txt Robots kontrollieren ............................................................. 1193
.htaccess Server-Reaktionen kontrollieren.............................................. 1195

Allgemeines zur HTML-Zeichenreferenz ................................................... 1263

Benannte Zeichen fr HTML-eigene Zeichen ........................................... 1264
Benannte Zeichen fr den Zeichensatz ISO 8859-1.................................. 1264
Benannte Zeichen fr griechische Buchstaben ......................................... 1266
Benannte Zeichen fr mathematische Symbole ....................................... 1268
Benannte Zeichen fr technische Symbole............................................... 1269
Benannte Zeichen fr Pfeil-Symbole ........................................................ 1269
Benannte Zeichen fr diverse Symbole .................................................... 1270
Benannte Zeichen fr Interpunktion ........................................................ 1270

HTML: Varianten ........................................................................................... 1273

E.1
E.1.1
E.1.2
E.1.3
E.2

Varianten strict, transitional und frameset...................................... 1273

Variante strict ...................................................................................... 1273
Variante transitional............................................................................. 1273
Variante frameset................................................................................. 1274
Nicht erlaubte Elemente und Attribute bei Variante strict ..................... 1274

Stichwortverzeichnis .................................................................................... 1279

27

1.1

Internet und WWW

Entstehung des Internet

1.1.1 Das ARPA-Net

Die Ursprnge des heutigen Internet reichen in die 60er Jahre zurck. Es war die Zeit des Kalten
Krieges zwischen den beiden Weltmchten USA und UdSSR. Neue Impulse in der Elektronischen Datenverarbeitung (EDV) kamen in jener Zeit hauptschlich durch militrische Initiativen
zustande. Mittlerweile gibt es zwar im Internet Proteste gegen die Auffassung, militrische Interessen htten das Internet geboren. Das ist insofern berechtigt, als es keine unmittelbare Ursachen-Wirkungs-Verhltnisse gibt. Doch die technologischen Ideen und Entwicklungen der Vorlufernetze kamen definitiv aus dem militrnahen Umfeld in den USA, und es ist deshalb auch
nicht verkehrt, das so darzustellen.
Im Department of Defense, dem amerikanischen Verteidigungsministerium, wurde seit den frhen 60er Jahren berlegt, wie man wichtige militrische Daten besser schtzen knnte. Selbst bei
einem atomaren Angriff des Gegners sollten die Daten nicht zerstrt werden knnen. Als Lsung
kam nur ein elektronisches Datennetz in Frage. Die gleichen Daten sollten dabei auf mehreren,
weit voneinander entfernten Rechnern abgelegt werden. Bei neuen oder genderten Daten sollten sich alle angeschlossenen Rechner binnen krzester Zeit den aktuellen Datenstand zusenden.
Jeder Rechner sollte dabei ber mehrere Wege mit jedem anderen Rechner kommunizieren knnen. So wrde das Netz auch dann funktionieren, wenn ein einzelner Rechner oder eine bestimmte Leitung durch einen Angriff zerstrt wrde. So gab die US Air Force 1964 bei der RAND
Corporation das so genannte dezentrale Netzwerk in Auftrag. Bei dem, was da entwickelt
werden sollte, handelt es sich noch nicht um den direkten Vorlufer des heutigen Internet. Nach
vielem Hin und Her scheiterte dieses Projekt auch und wurde nie realisiert. Die Idee des dezentralen Netzwerks mit der paketweisen Datenbertragung blieb jedoch in den Kpfen hngen.
Die Advanced Research Projects Agency (ARPA), eine seit 1958 bestehende wissenschaftliche
Einrichtung, deren Forschungsergebnisse in militrische Zwecke einflossen, entschloss sich 1966
zur Vernetzung der ARPA-eigenen Grorechner. Dabei wurde die Idee des dezentralen Netzwerks wieder aufgegriffen. Ende 1969 waren die ersten vier Rechner an das ARPA-Net angeschlossen. Drei Jahre spter waren es bereits 40 Rechner. In dieser Zeit war es jedoch das ARPAeigene Netz. In den ersten Jahren wurde das Netz deshalb auch ARPA-Net genannt. Aus ihm
sollte spter das Internet entwachsen.

28

Kapitel 1: Internet und WWW

Die Geschichte des Internet beginnt also zur Zeit der ersten Mondlandung und in jener Zeit, als
die Hippies das Zeitalter des Wassermanns heraufziehen sahen. Informationen zum ARPA-Net
im WWW:
Defense Advanced Research Projects Agency (DARPA) (www.arpa.mil/)

1.1.2 Wissenschaftliche Einrichtungen

Das Prinzip der vernetzten Rechner war aber nicht nur fr militrische Zwecke interessant. Man
erkannte schnell, dass auch der akademische Betrieb vom ARPA-Net profitieren wrde. Fr
Wissenschaftler war allerdings weniger das Synchronisieren von gleichen Daten auf mehreren
Rechnern interessant als vielmehr die Mglichkeit, Daten von einem anderen Rechner abzurufen. Wegen der offenen Architektur des ARPA-Net stand einer solchen Verwendung nichts im
Wege. Wissenschaftler konnten von den frhen 70er Jahren an Forschungsergebnisse anderer
Institute ber das ARPA-Net abrufen oder anderen angeschlossenen Instituten eigene Daten zur
Verfgung stellen.
Die Anzahl der angeschlossenen Rechner stieg an. Es handelte sich um sehr unterschiedliche
Rechnertypen mit nicht kompatiblen Betriebssystemen und unterschiedlichem Netzzugang.
Grorechner verschiedener Fabrikate, Unix-Rechner und spter auch Personalcomputer drngten ins Netz. Einige hatten eine Standleitung, also eine stndige Internet-Verbindung, andere
whlten sich ber Telefon und Modem ein. Um die unterschiedlichen Voraussetzungen unter
einen Hut zu bringen, entstand die Notwendigkeit, ein neues Datenbertragungsprotokoll fr
das Netz zu entwickeln. Das Protokoll sollte nicht an bestimmte Computersysteme, bertragungswege oder bertragungsgeschwindigkeiten gebunden sein. Aus den Bemhungen um ein
solches Protokoll ging schlielich das TCP/IP-Protokoll hervor. Datenbertragungen im ARPANet liefen nach Einfhrung von TCP/IP nach einem einheitlichen und standardisierten Schema
ab.
Zu den wissenschaftlichen Einrichtungen gehrten natrlich auch Studenten. Die entdeckten das
Netz auf ihre Weise. Eine Art black board war ihr Wunsch, ein Nachrichtenbrett wie in Universitten blich, fr Mitfahrgelegenheiten, Jobs, Wohnmglichkeiten, Reisepartner oder die
Mglichkeit, einfach nur zu diskutieren und zu labern. So entstand das Usenet, die Hauptader
der heutigen Newsgroups. Viele eingefleischte Internetter halten die Newsgroups auch heute
noch fr den spannendsten und lebendigsten Teil des Internet.

1.1.3 Das Netz der Netze

Der Anschluss der akademischen Welt ans Netz erforderte eine Trennung zwischen militrischem und zivilem Teil, da die Militrs ihre eigenen Interessen wahren wollten. So kam es, dass
Anfang der 80er Jahre ein neues militrisches Datennetz, das Milnet, vom ARPA-Net abgekoppelt wurde. Das ARPA-Net selbst wurde dem wissenschaftlichen Betrieb berlassen.
In diesem zivilen Teil des Netzes nahm die Anzahl der angeschlossenen Rechner im Laufe der
80er Jahre sprunghaft zu. Eine wichtige Rolle spielte dabei die amerikanische National Science
Foundation (NSF). Diese Organisation schaffte ein Leitungsverbundsystem, das alle bedeutenden wissenschaftlichen Rechenzentren des Landes miteinander verband. Einzelne Universittsrechner oder kleinere Rechnernetze konnten sich mit einem Rechenzentrum verbinden und da-

1.2 Basis-Standards im Internet

29

rber in andere Netze gelangen. So entstand buchstblich ein Netz der Netze. Alsbald brgerte
sich denn auch der Name Internet dafr ein. Die Bezeichnung ARPA-Net wurde Ende der
80er Jahre verworfen. Das Leitungs-Verbundsystem, ber das die kleineren Einzelnetze zu einem
Gesamtnetz wurden, erhielt die treffende Bezeichnung Backbone (Rckgrat).
In Europa gab es zeitgleich hnliche Entwicklungen. Auf dem alten Kontinent setzte man jedoch
zunchst auf ISO-Normen. Von dem amerikanischen TCP/IP-Modell, das nicht ISO-normiert
war, wollte man deshalb nichts wissen. 1986 wurde die Organisation RARE (Rseaux Associs
pour la Recherche Europenne) gegrndet. Diese Organisation sollte alle Initiativen zur systembergreifenden Rechnervernetzung europaweit koordinieren. RARE rief dazu ein Projekt
namens COSINE (Cooperation for an Open Systems Interconnection Networking in Europe)
ins Leben.
Der Siegeszug des TCP/IP-Protokolls war jedoch nicht mehr aufzuhalten. Unter dem Druck des
Erfolgs in Amerika entstand schlielich ein europisches Datennetz, das multiprotokollfhig war
und unter anderem TCP/IP untersttzte. Dieses Netz lief zunchst unter der Bezeichnung EuropaNET. Verschiedene nationale wissenschaftliche Netzwerke, etwa das Deutsche Forschungsnetz
(DFN), wurden daran angeschlossen.
Mittlerweile sorgen transatlantische Leitungen fr die Anbindung Europas an den Backbone in
den USA. Die Koordination des Internetverkehrs innerhalb Europas wurde der Organisation
RIPE (Rseaux IP Europens) bertragen. Auch in Europa gibt es seit 1992 ein Leitungs-Verbundsystem. Dieses System nennt sich Ebone (Europischer Internet-Backbone). Auf anderen
Kontinenten gab und gibt es vergleichbare Entwicklungen.
Was wir also heute unter Internet verstehen, ist nicht ein einziges homogenes Netz, sondern
ein Verbund aus vielen kleinen, territorial oder organisatorisch begrenzten Netzen. Diese Netze
besitzen eine Anbindung an die Backbones und damit an das Gesamtnetz. Auch kommerzielle
Internet-Provider hngen an entsprechenden Netzen. Und Endanwender, die ihren Internetzugang in Form einer Verbindung zu einem solchen Provider haben, knnen ber diese Brcke das
gesamte Internet nutzen. Ein paar Adressen im WWW zu diesen Themen:
National Science Foundation (NSF, www.nsf.gov/)
Deutsches Forschungsnetz (DFN, www.dfn.de/)
Ebone-Net (www.ebone.com/)
Rseaux IP Europens (RIPE, www.ripe.net/)

1.2

Basis-Standards im Internet

1.2.1 Das TCP/IP-Protokoll

TCP/IP ist der kleinste gemeinsame Nenner des gesamten Datenverkehrs im Internet. Erst durch
dieses Protokoll wurde historisch gesehen aus einem begrenzten Netz ein Netz der Netze. Egal,
ob Sie Web-Seiten aufrufen, E-Mails versenden, mit FTP Dateien downloaden oder mit Telnet
auf einem entfernten Rechner arbeiten: Stets werden die Daten auf gleiche Weise adressiert und

30

Kapitel 1: Internet und WWW

transportiert. TCP bedeutet Transmission Control Protocol (Protokoll fr bertragungskontrolle), IP bedeutet Internet Protocol.
Wenn Sie eine E-Mail verschicken oder eine HTML-Datei im Web aufrufen, werden die Daten
bei der bertragung im Netz in kleine Pakete zerstckelt. Jedes Paket enthlt eine Angabe dazu,
an welche Adresse es geschickt werden soll und das wievielte Paket innerhalb der Sendung es ist.
Die Adressierung besorgt das IP. Dazu gibt es ein Adressierungsschema, die so genannten IPAdressen. Dass die Datenpakete auch wirklich beim Empfnger ankommen, und zwar in der
richtigen Reihenfolge, dafr sorgt das TCP. Das TCP verwendet Sequenznummern fr die einzelnen Pakete einer Sendung. Erst wenn alle Pakete einer Sendung vollstndig beim Empfnger
angekommen sind, gilt die bertragung der Daten als abgeschlossen.
Jeder Rechner, der am Internet teilnimmt, ist mit einer IP-Adresse im Netz angemeldet. Rechner,
die ans Internet angeschlossen sind, werden als Hosts oder Host-Rechner bezeichnet. Wenn Sie
also mit Ihrem PC im Web surfen oder neue E-Mails abholen, sind Sie mit einer IP-Adresse im
Internet angemeldet. Ihr Zugangs-Provider, ber dessen Host-Rechner Sie sich einwhlen, kann
feste IP-Adressen fr Sie einrichten. Groe Zugangs-Provider, etwa Online-Dienste wie TOnline oder AOL, vergeben auch personenunabhngig dynamische IP-Adressen fr jede Internet-Einwahl. Damit ein Rechner am Internet teilnehmen kann, muss er ber eine Software verfgen, die das TCP/IP-Protokoll untersttzt. Unter MS Windows ist das beispielsweise die Datei
winsock.dll im Windows-Verzeichnis.

1.2.2 IP-Adressierung
Eine typische IP-Adresse sieht in Dezimalschreibweise so aus: 149.174.211.5 vier Zahlen
also, getrennt durch Punkte. Die Punkte haben die Aufgabe, ber- und untergeordnete Netze
anzusprechen. So wie zu einer Telefonnummer im weltweiten Telefonnetz eine Landeskennzahl,
eine Ortsnetzkennzahl, eine Teilnehmerrufnummer und manchmal auch noch eine Durchwahlnummer gehrt, gibt es auch im Internet eine Vorwahl die Netzwerknummer, und eine
Durchwahl die Hostnummer.
Der erste Teil einer IP-Adresse ist die Netzwerknummer, der zweite Teil die Hostnummer. Wo
die Grenze zwischen Netzwerknummer und Hostnummer liegt, bestimmt ein Klassifizierungsschema fr Netztypen. Die folgende Tabelle verdeutlicht dieses Schema. In den Spalten fr die
IP-Adressierung und einem typischen Beispiel ist die Netzwerknummer (der Vorwahlteil) fett
dargestellt. Der Rest der IP-Adresse ist die Hostnummer eines Rechners innerhalb dieses Netzes.
Netztyp

Schema

Typische IP-Adresse

Klasse-A-Netz
Klasse-B-Netz
Klasse-C-Netz

xxx.xxx.xxx.xxx
xxx.xxx.xxx.xxx
xxx.xxx.xxx.xxx

103.234.123.87
151.170.102.15
196.23.155.113

Die oberste Hierarchiestufe bilden die so genannten Klasse-A-Netze. Nur die erste Zahl einer IPAdresse ist darin die Netzwerknummer, alle anderen Zahlen sind Hostnummern innerhalb des
Netzwerks. Bei Netzwerknummern solcher Netze sind Zahlen zwischen 1 und 126 mglich, d.h.,
es kann weltweit nur 126 Klasse-A-Netze geben. Eine IP-Adresse, die zu einem Klasse-A-Netz

1.2 Basis-Standards im Internet

31

gehrt, ist also daran erkennbar, dass die erste Zahl zwischen 1 und 126 liegt. Das amerikanische
Militrnetz ist beispielsweise so ein Klasse-A-Netz. Innerhalb eines Klasse-A-Netzes kann der
entsprechende Netzbetreiber die zweite, dritte und vierte Zahl der einzelnen IP-Adressen seiner
Netzteilnehmer frei vergeben. Da alle drei Zahlen Werte von 0 bis 255 haben knnen, kann ein
Klasse-A-Netzbetreiber also bis zu 16,7 Millionen IP-Adressen an Host-Rechner innerhalb seines
Netzes vergeben.
Die zweithchste Hierarchiestufe sind die Klasse-B-Netze. Die Netzwerknummer solcher Netze
erstreckt sich ber die beiden ersten Zahlen der IP-Adresse. Bei der ersten Zahl knnen Klasse-BNetze Werte zwischen 128 und 191 haben. Eine IP-Adresse, die zu einem Klasse-B-Netz gehrt,
ist also daran erkennbar, dass die erste Zahl zwischen 128 und 191 liegt. Bei der zweiten Zahl
sind Werte zwischen 0 und 255 erlaubt. Dadurch sind etwa 16.000 solcher Netze mglich. Da die
Zahlen drei und vier in solchen Netzen ebenfalls Werte zwischen 0 und 255 haben drfen, knnen an jedem Klasse-B-Netz bis zu ca. 65.000 Host-Rechner angeschlossen werden. Klasse-BNetze werden vor allem an groe Firmen, Universitten und Online-Dienste vergeben.
Die unterste Hierarchie stellen die Klasse-C-Netze dar. Die erste Zahl einer IP-Adresse eines
Klasse-C-Netzes liegt zwischen 192 und 223. Die Zahlen zwei und drei gehren ebenfalls noch
zur Netzwerknummer. ber zwei Millionen solcher Netze sind dadurch adressierbar. Vor allem
an kleine und mittlere Unternehmen mit direkter Internet-Verbindung, aber auch an kleinere
Internet-Provider, werden solche Adressen vergeben. Da nur noch eine Zahl mit Werten zwischen 0 und 255 brig bleibt, knnen in einem C-Netz maximal 255 Host-Rechner angeschlossen werden. Eine Zahl davon ist reserviert, also bleiben 254 mgliche Host-Rechner brig.
Durch die Vergabe dynamischer IP-Adressen pro Einwahl knnen Netzbetreiber die Anzahl der
tatschlich internetfhigen Anschlsse deutlich hher halten, als wenn wirklich nur jeder Rechner eine feste Adresse erhalten wrde, egal, ob er online ist oder nicht. Ob dieses Adressierungsschema jedoch den Anforderungen der Zukunft noch gerecht wird, bezweifeln manche. Es gibt
bereits Ideen zu einer Neustrukturierung der Adressierung von Netzen und Host-Rechnern.

1.2.3 Client-Server-Technologie
Fr die einzelnen Internet-Dienste wie World Wide Web, Gopher, E-Mail, FTP usw. muss auf
einem Host-Rechner, der anderen Rechnern diese Dienste anbieten will, eine entsprechende Server-Software laufen. Ein Host-Rechner kann einen Internet-Dienst nur anbieten, wenn eine entsprechende Server-Software auf dem Rechner aktiv ist, wenn der Rechner online ist, und wenn
keine schtzende Software (Firewall) den Zugriff von auen verhindert bzw. einschrnkt.
Server sind Programme, die permanent darauf warten, dass eine Anfrage eintrifft, die ihren
Dienst betreffen. So wartet etwa ein Web-Server darauf, dass Anfragen eintreffen, die Web-Seiten
auf dem Server-Rechner abrufen wollen.
Clients sind dagegen Softwareprogramme, die typischerweise Daten von Servern anfordern. Ihr
Web-Browser ist beispielsweise ein Client. Wenn Sie etwa auf einen Verweis klicken, der zu einer
HTTP-Adresse fhrt, startet der Browser, also der Client, eine Anfrage an den entsprechenden
Server auf dem entfernten Host-Rechner. Der Server wertet die Anfrage aus und sendet die gewnschten Daten. Um die Kommunikation zwischen Clients und Servern zu regeln, gibt es entsprechende Protokolle. Client-Server-Kommunikation im Web etwa regelt das HTTP-Protokoll.
Ein solches Protokoll luft oberhalb des TCP/IP-Protokolls ab.

32

Kapitel 1: Internet und WWW

1.1: Das Internet setzt sich aus Host- und Client-Rechnern zusammen.

Dass ein Client Daten anfordert und ein Server die Daten sendet, ist der Normalfall. Es gibt
jedoch auch Ausnahmen. So kann ein Client nicht nur Daten anfordern, sondern auch Daten an
einen Server schicken zum Beispiel wenn Sie per FTP eine Datei auf den Server-Rechner hochladen, wenn Sie eine E-Mail versenden oder im Web ein Formular ausfllen und abschicken. In
diesen Fllen spricht man auch von Client-Push (Client drngt dem Server Daten auf).
Ein anderer Ausnahmefall liegt vor, wenn der Server zuerst aktiv wird und dem Client etwas
ohne dessen Anforderung zuschickt. Das nennt man Server-Push (Server drngt dem Client
Daten auf). Einige Technologien wollten diesen Ausnahmefall vor einigen Jahren zu einer Regel
erheben mit den so genannten Push-Technologien. Diese Technologien sollten ermglichen,
dass ein Client regelmig Daten empfangen kann, ohne diese eigens anzufordern. Das ermglicht Broadcasting-Dienste wie aktuelle Nachrichten. Netscape und Microsoft Internet Explorer
(beide ab Version 4.0) bauten entsprechende Schnittstellen, um solche Dienste in Anspruch zu
nehmen. Man kann jedoch von Glck sagen, dass sie sich nicht durchgesetzt haben. Das Internet
ist eben nicht Fernsehen, sondern ein Medium, das von der Aktivitt der Anwender lebt, nicht
von deren Konsumbeflissenheit.

1.2.4 DNS Domain Name Service

Computer knnen mit Zahlen besser umgehen, Menschen in der Regel besser mit Namen. Deshalb hat man ein System ersonnen, das die numerischen IP-Adressen fr die Endanwender in
anschauliche Namensadressen bersetzt.
Dieses System ist hnlich wie das der IP-Adressen hierarchisch aufgebaut. Eine Namensadresse
(Domain-Name) in diesem System gehrt zu einer Top-Level-Domain. Die einzelnen Teile solcher Namensadressen sind wie bei IP-Adressen durch Punkte voneinander getrennt. Namensadressen (Domains) sind beispielsweise yahoo.com, mozilla.org oder teamone.de.

1.2 Basis-Standards im Internet

33

Top-Level-Domains stehen in so einem Domain-Namen an letzter Stelle. Es handelt sich um

einigermaen sprechende Abkrzungen. Die Abkrzungen, die solche Top-Level-Domains bezeichnen, sind entweder Landeskennungen oder Typenkennungen. Beispiele sind:
de = Deutschland
at = sterreich
ch = Schweiz
it = Italien
my = Malaysia
com = Kommerziell orientierter Namensinhaber
org = Organisation
net = Allgemeines Netz
edu = Amerikanische Hochschulen
gov = Amerikanische Behrden
mil = Amerikanische Militreinrichtungen
Derzeit (Redaktionszeitpunkt dieses Buches) entstehen neue Top-Level-Domains. Geplant sind:
biz = Unternehmen
pro = Berufsgruppen mit Werbeverbot (Anwlte, Steuerberater, rzte usw.)
name = Privatpersonen
info = Informationsdienste aller Art
museum = Museen
aero = Flugunternehmen, Flughfen, Reiseveranstalter usw.
coop = Genossenschaften, Verbnde, Organisationen
Zum Redaktionszeitpunkt dieses Buches sind info und biz bereits verfgbar, name soll als
Nchstes folgen.
Jede Top-Level-Domain stellt einen Verwaltungsbereich dar, fr den es eine Verwaltungsbehrde gibt, die fr die Namensvergabe von Domains innerhalb ihres Verwaltungsbereichs zustndig ist. Wenn Sie beispielsweise einen Domain-Namen wie MeineFirma.de beantragen
wollen, muss der Antrag an das DENIC (Deutsches Network Information Center) gestellt werden. Kommerzielle Provider erledigen das fr Sie, wenn Sie dort einen entsprechenden Service in
Anspruch nehmen. Ihren Wunschnamen erhalten Sie aber nur, wenn die Namensadresse noch
nicht anderweitig vergeben wurde. Schlaufchse sind daher auf die Idee gekommen, Tausende
Domain-Namen fr sich zu reservieren, um sie dann an Interessenten weiterzuverkaufen. Mittlerweile gibt es um die Domain-Namen leider schon eine ganze Latte von Schauergeschichten
und Rechtsstreitigkeiten. Wenn etwa zwei zufllig gleichnamige Firmen, die sonst nichts miteinander zu tun haben, den gleichen Domain-Namen reservieren lassen wollen, kann nur eine der
Firmen den Zuschlag erhalten. Beliebt geworden sind angesichts der Namensknappheit mittlerweile auch lngere Namensadressen wie heute-geh-ich-ins-kino.de.
Inhaber von Domain-Namen knnen nochmals Sub-Level-Domains vergeben. So gibt es beispielsweise eine Domain namens seite.net. Die Betreiber dieser Domain haben nochmals Sub-

34

Kapitel 1: Internet und WWW

Domains vergeben, wodurch Domain-Adressen wie java.seite.net oder javascript.

seite.net entstanden.

1.2.5 Routing und Gateways

Im Internet als dem Netz der Netze ist es zunchst nur innerhalb des eigenen Sub-Netzes mglich, Daten direkt von einer IP-Adresse zu einer anderen zu schicken. In allen anderen Fllen,
wenn die Daten an eine andere Netzwerknummer geschickt werden sollen, treten Rechner auf
den Plan, die den Verkehr zwischen den Netzen regeln. Solche Rechner werden als Gateways bezeichnet. Diese Rechner leiten Daten von Host-Rechnern aus dem eigenen Sub-Netz an
Gateways in anderen Sub-Netzen weiter und ankommende Daten von Gateways anderer SubNetze an die darin adressierten Host-Rechner im eigenen Sub-Netz. Ohne Gateways gbe es gar
kein Internet.
Das Weiterleiten der Daten zwischen Sub-Netzen wird als Routing bezeichnet. Die Beschreibung
der mglichen Routen vom eigenen Netzwerk zu anderen Netzwerken sind in Routing-Tabellen
auf den Gateway-Rechnern festgehalten.
Zu den Aufgaben eines Gateways gehrt auch, eine Alternativ-Route zu finden, wenn die bliche
Route nicht funktioniert, weil etwa bei der entsprechenden Leitung eine Strung oder ein Datenstau aufgetreten ist. Gateways senden sich stndig Testpakete zu, um das Funktionieren der Verbindung zu testen und fr Datentransfers verkehrsarme Wege zu finden.
Wenn also im Internet ein Datentransfer stattfindet, ist keinesfalls von vorneherein klar, welchen
Weg die Daten nehmen. Sogar einzelne Pakete einer einzigen Sendung knnen vllig unterschiedliche Wege nehmen. Wenn Sie beispielsweise von Deutschland aus eine Web-Seite aufrufen, die auf einem Rechner in den USA liegt, kann es sein, dass die Hlfte der Seite ber den
Atlantik kommt und die andere ber den Pazifik, bevor Ihr Web-Browser sie anzeigen kann.
Weder Sie noch Ihr Browser bekommen davon etwas mit.

1.2.6 Selbstorganisation im Internet

In Anbetracht der Teilnehmerzahl im Internet ist der Verwaltungsaufwand im Netz vergleichsweise klein. Die meisten Endanwender wissen nicht einmal, dass es solche Verwaltungsstellen
berhaupt gibt. Eine gesetzgeberische Institution, wie es sie etwa innerhalb des Verfassungsbereichs eines Staates gibt, gibt es im Internet als weltweitem Verbund nicht. Der Versuch, die
ICANN-Behrde als oberste Vergabestelle fr Domains und IPs zu etablieren, hat viel Staub aufgewirbelt, aber die Befrchtungen, dass da eine zentralistische Internet-Diktatur entsteht, haben
sich bislang nicht besttigt. Viele Bereiche im Internet beruhen faktisch auf Selbstorganisation.
Bei Diensten wie E-Mail gilt beispielsweise das stille Abkommen, dass jeder beteiligte Gateway
alle Mails weiterleitet, auch wenn weder Sender noch Empfnger dem eigenen Sub-Netz angehren. Die Kosten trgt zwar der Netzbetreiber, aber da alle ein Interesse am weltweiten Funktionieren des Netzes haben, ist jeder bereit, die anfallenden Mehrkosten zu tragen.
Die Funktionsfhigkeit des Internet basiert also auf der Bereitschaft der Beteiligten, keine Pfennigfuchserei zu betreiben. Grozgigkeit hat das Internet geschaffen, und Kleingeisterei ist der
grte Feind der Internet-Idee.

1.2 Basis-Standards im Internet

35

Das Usenet, also der grte Teil der Newsgroups, organisiert sich sogar vollstndig selbst, weshalb leidenschaftliche Anhnger dieses System gerne als real existierendes Beispiel fr Herrschaftsfreiheit anfhren. Die Verwaltung findet im Usenet in speziellen Newsgroups statt (solchen, die mit news. beginnen). Dort knnen beispielsweise Vorschlge fr neue Gruppen eingebracht werden, und in Abstimmungen wird darber entschieden, ob eine Gruppe eingerichtet
oder abgeschafft wird.
Offizielle Anlaufstellen gibt es fr die Vergabe von Netzwerkadressen und fr Namensadressen
(DNS). Fr die Vergabe von IP-Adressen innerhalb eines Netzwerks ist der jeweilige Netzbetreiber verantwortlich. Dazu kommen Organisationen, die sich um Standards innerhalb des Internet
kmmern.
Die Kosten fr die Datenbertragungen im Internet tragen die Betreiber der Sub-Netze. Diese
Kosten pflanzen sich nach unten fort zu Providern innerhalb der Sub-Netze bis hin zu Endanwendern, die ber Provider Zugang zum Internet haben oder Internet-Services wie eigene WebSeiten nutzen. Die folgende Liste enthlt einige Verweise zu den wichtigsten internationalen und
nationalen Organisationen im Internet:
Deutsches Network Information Center (DE-NIC, www.denic.de/): Vergabestelle fr DomainNamen unterhalb der Top-Level-Domain .de.
International Network Information Center (InterNIC, www.internic.net/): Kollaboratives
Projekt zwischen AT&T, General Atomics und Network Solutions, Inc. AT&T. Internationale
Vergabestelle fr Domain-Namen.
The Internet Corporation for Assigned Names and Numbers (ICANN, www.icann.org/):
Organisation fr die Schaffung von neuen Top-Level-Domains und fr die Vergabe von Subnetzen und IP-Adressrumen.
Internet Architecture Board (IAB, www.iab.org/): Organisation zur Dokumentation der
Netzstruktur und der grundstzlichen Ablufe im Internet.
Internet Assigned Numbers Authority (IANA, www.iana.org/): Zentrale Koordinationsstelle
fr Internet-Protokolle.
Internet Engineering Task Force (IETF, www.ietf.org/): Internationale Gemeinschaft von
kommerziellen und nichtkommerziellen Aktiven im Internet mit dem Ziel, technische Standards im Internet vorzuschlagen.
Internet Society (www.isoc.org/): Internationale Organisation fr die Kooperation und Koordination von Technologien und Anwendungen im Internet.
W3-Konsortium (W3C, www.w3.org/): Organisation, die speziell die Weiterentwicklung
technischer Standards des World Wide Web koordiniert, etwa HTML oder das HTTP-Protokoll.
Vor allem jene Organisationen, die sich um die technische Weiterentwicklung im Internet
kmmern, werden zunehmend von groen Softwarefirmen wie Microsoft, Netscape oder Sun
bestrmt, da diese Firmen ein Interesse daran haben, ihren Softwareprodukten und hauseigenen
Standards bei Server-Technologien, Programmiersprachen usw. zum Status weltweiter InternetStandards zu verhelfen. Ob und wie weit es gelingt, im Internet angesichts des entstehenden
Milliardenmarkts neue, firmenunabhngige Standards durchzusetzen, die so erfolgreich werden
wie HTML oder HTTP, muss die Zukunft zeigen. Derzeit sieht es gar nicht schlecht aus. Die

36

Kapitel 1: Internet und WWW

meisten Computerkonzerne haben begriffen, dass firmenunabhngige Standards ihnen selber

letztlich auch mehr bringen. Und der Druck aufgeklrter Anwender, die keine Lust mehr haben,
wegen allem und jedem eine neue, proprietre Software kaufen zu mssen, die nach ein paar
Jahren wieder out ist und vom Markt verschwindet, wchst ebenfalls.

1.3

Dienste im Internet

1.3.1 E-Mail
E-Mail (elektronische Post) ist wohl der am meisten genutzte Internet-Dienst. E-Mail erlaubt die
persnliche bermittlung von Nachrichten und Dateien von einem Sender an einen Empfnger.
Wer an diesem Dienst teilnehmen will, braucht eine eigene E-Mail-Adresse. Solche Adressen
sind an dem berhmten @ (sprich: englisch at, also bei das Zeichen wird im deutschen
Sprachraum auch als Klammeraffe bezeichnet) in der Mitte erkennbar. Provider, ber die Sie
Zugang zum Internet haben oder bei denen Sie Ihr Web-Angebot hosten, richten Ihnen normalerweise E-Mail-Adressen auf Wunsch ein.

1.2: E-Mail ist der meistgenutzte Dienst im Internet.

Vor allem im Business-Bereich verdrngt E-Mail nach und nach die herkmmliche Briefpost
(von E-Mail-Anhngern liebevoll oder verchtlich als Schneckenpost oder snail mail bezeichnet). Auch das Fax ist eine durch E-Mail gefhrdete Gattung. Die Vorteile liegen auf der
Hand:
E-Mails brauchen meist nur wenige Minuten vom Sender zum Empfnger, egal, ob einige
wenige oder mehrere tausend Kilometer zwischen ihnen liegen.
E-Mails sind preiswert. Im Vergleich zu Briefen fallen fr einfache E-Mails nur Pfennigbetrge an.
Gegenber einem Telefonat bieten sie den Vorteil, dass Vereinbarungen oder dergleichen
darin schriftlich festgehalten werden.

1.3 Dienste im Internet

37

Moderne E-Mail-Programme knnen E-Mails in einer durchsuchbaren Datenbank speichern,

sodass Sie vor lngerer Zeit gesendete oder empfangene Mails leicht wiederfinden.
Der Mime-Standard, der sich bei E-Mails allmhlich durchsetzt, erlaubt das bequeme Anhngen beliebiger Computerdateien an eine Mail, sodass E-Mail auch fr den individuellen
Austausch von Dateien immer mehr Bedeutung gewinnt.
E-Mail zwingt Sender und Empfnger nicht, gleichzeitig online zu sein. Sie holen sich Ihre EMails ab, wenn Sie gerade Zeit haben.
Neben der Mglichkeit, mit bestimmten anderen Internet-Teilnehmern Nachrichten und
Daten auszutauschen, knnen Sie mit einer eigenen E-Mail-Adresse auch an Mailing-Listen
teilnehmen, die Sie interessieren.
Das heutige E-Mail-System hat aber auch noch mit einigen Problemen zu kmpfen. Eine normale E-Mail ist auf dem Weg vom Sender zum Empfnger etwa so geheim wie eine Ansichtskarte. Fr vertrauliche Mitteilungen oder sensible Daten ist sie ungeeignet. Mittlerweile gibt es
Verschlsselungsverfahren wie PGP (Pretty Good Privacy), die das individuelle Kodieren und
Dekodieren von E-Mails und angehngten Dateien erlauben. Voraussetzung ist dazu jedoch,
dass sowohl Sender als auch Empfnger ber eine entsprechende Zusatzsoftware verfgen und
zuvor ihre ffentlichen Kodierschlssel austauschen.
Ein weiterer Nachteil von E-Mails ist auch noch, dass sie nicht als dokumentenecht gelten.
Zwar wchst allmhlich ihre juristische Akzeptanz, doch unterschriftspflichtige Dokumente sind
durch E-Mail bislang nicht ersetzbar. Deshalb knnen Sie z.B. noch nicht einfach so per EMail einen Wohnsitzwechsel mitteilen oder Ihre Steuererklrung ans Finanzamt schicken.

1.3.2 Telnet und SSH

Telnet ist dazu gedacht, einen fernen Rechner im Internet so zu bedienen, als se man direkt
davor. Telnet ist damit eine einfache Lsung fr Teleworker. Und diese Lsung ist schon wesentlich lter als der Begriff Teleworking.
Telnet ist vor allem fr Unix-Systeme gedacht. Es erlaubt das betriebssystemeigene login
(Anmelden) eines Benutzers an einem ans Internet angeschlossenen Host-Rechner in Form eines
rlogin (remote login). Das Anmelden ist nur mglich, wenn Sie Username und Passwort kennen,
d.h. auf dem angewhlten Host-Rechner als Benutzer eingetragen sind. Nach dem Einwhlen
erhalten Sie eine Unix-Shell (Eingabeaufforderung) und knnen auf dem entfernten Rechner
Betriebssystembefehle eingeben, Programme starten usw.
PC-Anwender, die nicht direkt mit der Verwaltung von Server-Rechnern im Internet zu tun
haben, werden mit Telnet kaum in Berhrung kommen. Es gibt jedoch auch fr PC-Benutzer
von Systemen wie MS Windows oder Macintosh Telnet-Clients. Diese Programme erlauben es,
vom eigenen PC aus auf einem entfernten Host-Rechner zu arbeiten. Ohne Kenntnis der Befehle
des Host-Rechner-Betriebssystems ist ein solches Programm allerdings zwecklos.
SSH (Secure Shell) ist eine Variante von Telnet die bessere Variante, wie allmhlich erkannt
wird. Der Unterschied zu Telnet ist, dass bei SSH die Daten beim Arbeiten verschlsselt bertragen werden. Das ist durchaus wichtig, da gerade beim Arbeiten auf einem entfernten Rechner
hufig sensible Daten editiert werden, wie Konfigurationsdateien oder Passwrter. All diese
Daten werden auch wenn es einem beim Arbeiten kaum bewusst ist ber viele Rechner im

38

Kapitel 1: Internet und WWW

Internet bis zum Zielrechner bertragen und knnen auf den Zwischenstationen mit etwas
bsem Willen abgefangen werden. Manche modernere Telnet-Clients bieten mittlerweile auch
das SSH-Protokoll an.

1.3.3 File Transfer Protocol (FTP)

FTP ist ein Internet-Dienst, der speziell dazu dient, sich auf einem bestimmten Server-Rechner
im Internet einzuwhlen und von dort Dateien auf den eigenen Rechner zu bertragen (Download) oder eigene Dateien an den Server-Rechner zu bertragen (Upload). Ferner bietet das
FTP-Protokoll Befehle an, um auf dem entfernten Rechner Operationen durchzufhren wie Verzeichnisinhalte anzeigen, Verzeichnisse wechseln, Verzeichnisse anlegen oder Dateien lschen.
Beim Einwhlen an einem FTP-Server gilt es, zwei Arten zu unterscheiden: Es gibt normales
FTP und anonymes FTP. Beim normalen FTP haben Sie nur Zugriff auf den Server, wenn Sie
beim Einwhlen einen Usernamen und ein Passwort angeben. Mit diesen Zugangsdaten muss
der FTP-Server-Verwalter Sie am Server als berechtigten Anwender eingetragen haben. Bei anonymem FTP handelt es sich um ffentlich zugngliche Bereiche auf Server-Rechnern. Dazu
brauchen Sie keine Zugangsberechtigung. Sie whlen sich einfach mit dem Usernamen anonymous ein, und als Passwort geben Sie Ihre E-Mail-Adresse an. Es gibt etliche ffentliche FTP-Server im Internet, die umfangreiche Dateibestnde zum Download anbieten. Dort finden Sie Software, Hilfetexte, Grafiksammlungen usw.

1.3: Mit einem FTP-Programm bertragen Sie schnell Dateien ber das Internet.

Fr ffentliche, anonyme FTP-Server gibt es Regeln. Da Sie beim Besuch solcher Server nur Gast
sind, sollten Sie sich auch entsprechend verhalten. Bleiben Sie nicht lnger als ntig. Laden Sie
sich nicht unntig viele Dateien herunter. Lesen Sie zuerst die Readme-Dateien, die es in fast
jedem Verzeichnis gibt, um den Inhalt des Verzeichnisses zu erlutern.

1.3 Dienste im Internet

39

Wenn Sie lediglich hin und wieder ffentlich zugngliche FTP-Server besuchen, um von dort
Dateien downzuloaden, knnen Sie das auch mit modernen WWW-Browsern wie Netscape oder
dem MS Internet Explorer tun. Solche Browser zeigen die Dateilisten auf FTP-Servern als
anklickbare Verweise an. Je nach Dateityp knnen Sie Dateien dann downloaden oder direkt im
Browser-Fenster anzeigen.
Fr anspruchsvollere Arbeiten, vor allem, wenn Sie die Dateien Ihres eigenen Web-Projekts verwalten wollen, brauchen Sie ein FTP-Programm. Solche Programme gibt es fr alle Betriebssysteme, und einige Betriebssysteme, etwa alle Unix-Derivate oder OS/2, haben bereits einen eingebauten FTP-Client.

1.3.4 Gopher
Gopher gilt als der Vorlufer des World Wide Web. Der Name kommt von go for und drckt
damit aus, was der wichtigste Zweck dieses Dienstes ist: nmlich groe Informationsbestnde
leichter durchsuchbar zu machen. Gopher ist eine menbasierte Bedienoberflche zum Auffinden von Information, aber auch zum Nutzen anderer Internet-Dienste wie FTP oder Telnet.
Einem Eintrag in einem Gopher-Men ist nicht anzusehen, wo sich die damit verbundenen
Dateien oder Programme befinden. Anwender mit text- und tastaturorientierten Rechnern knnen aus den Mens, die das Gopher-System am Bildschirm anzeigt, mit Buchstaben- oder
Zifferntasten Eintrge auswhlen. Bei grafischen Benutzeroberflchen sind die Mens mit der
Maus anklickbar. In dieser Hinsicht gleicht Gopher dem World Wide Web, denn auch bei diesem Dienst mssen Sie keine Insider-Befehle kennen, um im Informationsbestand zu navigieren.
Der Nachteil von Gopher gegenber dem WWW ist, dass es keine Standards wie HTML gibt. Es
gibt lediglich die Gopher-Mens und die damit verknpften Dateiaufrufe oder Befehle. Ein guter
Gopher-Client kann zwar diverse Dateiformate anzeigen, doch es gibt kein Mittel, um Bildschirmseiten zu gestalten und dadurch eigenstndige Prsentationen von Information zu schaffen.
Moderne Web-Browser sind auch Gopher-fhig. Das bedeutet, dass Sie mit einem solchen Browser problemlos Gopher-Adressen aufrufen knnen. Die Gopher-Mens erscheinen im Browser
wie Listen mit Verweisen in HTML.

1.3.5 Chat (IRC)

Wer sich einsam fhlt oder einfach in sein will, geht im Internet chatten (ratschen, quatschen).
Am Bildschirm erscheint dann ein zweigeteiltes Fenster. Im einen Teil erscheinen wie von Geisterhand geschrieben allerlei ganze und halbe Stze, Kommentare und solche Dinge wie Emoticons. Das sind Beitrge von Teilnehmern, die gerade an der gleichen Stelle online sind. Im anderen Fenster knnen Sie selbst etwas eintippen. Auf diese Weise knnen Sie an der Unterhaltung
teilnehmen. Es gibt auch grafische Oberflchen, bei denen sich jeder Chat-Teilnehmer eine Figur
aussucht, die dann als Teilnehmer in einer Szenerie erscheint.
Kaum jemand erscheint dort mit seinem wahren Namen, und nicht wenige geben sich als etwas
ganz anderes aus, als sie wirklich sind. Mnner spielen Frau, um herauszufinden, wie es ist, als
Frau von einem Mann angemacht zu werden. Erwachsene spielen Jugendliche, um sich mal wieder richtig pubertr benehmen zu drfen. Hin und wieder kommen interessante Gesprche

40

Kapitel 1: Internet und WWW

zustande, aber oft haben die Chat-Beitrge auch das Niveau von Kindergestammel. ber Chats
entstehen aber auch ernst zu nehmende Kontakte, Freundschaften und Beziehungen.
IRC ist einer der Internet-Dienste, die teuer werden knnen. Denn whrend der ganzen Teilnahmedauer muss man online sein, und viele merken beim Quatschen nicht, wie die Zeit vergeht
(das ist nicht anders als im real life). Es gibt nur wenige, die eine ganze Nacht lang im Web
surfen, aber viele, die eine ganze Nacht lang chatten. Viele der hochgradig Internet-Schtigen
treiben sich vor allem in den Chat-Bereichen herum.

1.3.6 Newsgroups (News)

Eine Newsgroup ist einem Schwarzen Brett vergleichbar, wo Sie Nachrichten posten knnen, die
alle Besucher lesen knnen. Jede Newsgroup behandelt einen Themenbereich. Insgesamt sind
mehrere zigtausend Newsgroups registriert. Es gibt praktisch nichts, zu dem es nicht eine
Newsgroup gibt. Egal, ob Sie sich fr die Konfiguration Ihres PCs interessieren, fr Origami oder
fr vermisste Kinder fr alles finden sich eine oder mehrere Newsgroups. Tglich werden zigtausend Nachrichten in Newsgroups gepostet. Es werden Fragen gestellt und Antworten gegeben,
es wird debattiert und geflachst. Die Newsgroups gelten allgemein als der verrckteste Teil des
Internet. Manchen Leuten sind sie aber auch ein Dorn im Auge, denn es gibt auch etliche
Newsgroups mit pornographischen und extremistischen Inhalten.
Das System der Newsgroups ist auf verschiedene Netze verteilt. Das grte und bekannteste ist
das Usenet. Hier finden Sie Newsgroups mit Adressen wie alt.music.pinkfloyd oder de.soc.
weltanschauung. Die wichtigsten Abkrzungen in solchen Newsgroup-Adressen sind:
alt = alternativ, bunt, verrckt, abgefahren
biz = Kommerzielles, jedoch keine Werbung
comp = Computer
de = deutschsprachig
misc = Sonstiges
news = Newsgroups zum Thema Newsgroups
rec = Freizeit, Hobby und Kunst
sci = Wissenschaften
soc = Soziales, Kultur, Politik
talk = Klatsch und Tratsch
Um Newsgroups lesen und daran teilnehmen zu knnen, brauchen Sie ein Newsreader-Programm. Web-Browser wie Netscape (ab V3.0) oder der MS Internet Explorer (ab V4.0) haben
einen eingebauten News-Client, sodass Sie kein separates Programm mehr bentigen. Um
Newsgroups empfangen zu knnen, mssen Sie in den Einstellungen des verwendeten Programms einen News-Server angeben. Fragen Sie den Provider, ber den Sie Ihren Internet-Zugang haben, ob er auch einen Newsgroup-Server anbietet und mit welchen Daten Sie sich dort
anmelden knnen.

1.4 Entstehung des World Wide Web

41

Es empfiehlt sich, zunchst einmal alle verfgbaren Newsgroups einzulesen. Das kann eine Weile
dauern, aber anschlieend haben Sie eine sortierte Liste aller Gruppen und knnen sich einen
berblick verschaffen. Newsgroups, die Sie interessieren, knnen Sie abonnieren.
Nachrichten in Newsgroups sind hierarchisch organisiert. Irgendjemand postet eine Nachricht
mit einem neuen Subject (Thema). Ein anderer antwortet auf die Nachricht und bezieht sich dadurch auf das gleiche Thema. Ein dritter antwortet ebenfalls, und ein vierter antwortet dem
Dritten. Auf diese Weise entsteht eine Baumstruktur von Nachrichten zu einem einmal begonnenen Thema. Diese Baumstruktur wird auch als Thread bezeichnet. Sie knnen selbst einen
neuen Thread beginnen oder auf eine Nachricht antworten und sich dadurch in den betreffenden Thread einschalten.

1.3.7 World Wide Web (WWW)

Das World Wide Web (WWW) ist der jngste Dienst innerhalb des Internet. Das Web zeichnet
sich dadurch aus, dass es auch ungebteren Anwendern erlaubt, sich im Informationsangebot zu
bewegen. Wer etwa mit einem FTP-Programm einen FTP-Server aufruft, muss sich in komplexen, unbekannten Verzeichnisstrukturen zurechtfinden und sich an Dateinamen orientieren.
Interessante Dateien kann er auf seinen Rechner downloaden, um sie spter zu ffnen. Im
WWW dagegen erscheinen Informationen gleich beim Aufruf am Bildschirm. Wenn Sie mit
einem Browser im Web unterwegs sind, brauchen Sie sich nicht um Dateinamen oder um komplizierte Eingabebefehle zu kmmern. Das bequeme Navigieren mit Hilfe einfacher Mausklicks
kann ein Hochgefhl erzeugen, weshalb sich auch die Redewendung vom Surfen im Netz eingebrgert hat.

1.4

Entstehung des World Wide Web

1.4.1 Tim Berners-Lee und die Anfnge

Der gebrtige Brite Tim Berners-Lee, in den 80er Jahren und bis in die 90er Jahre Informatiker
am Genfer Hochenergieforschungszentrum CERN, beschreibt in seinem Buch Weaving the
Web, wie er dort am CERN in den 80er Jahren ein selbst geschriebenes Programm als Produktivitts-Tool nutzte. Das Programm, von Berners-Lee in Pascal geschrieben, lief auf einem Computersystem mit dem Betriebssystem Norsk Data SYNTRAN III. Die 8-Zoll-Diskette, auf der
die Sourcen gespeichert waren, gingen irgendwann verloren.

1.4: Tim Berners-Lee, der Vater des World Wide Web

42

Kapitel 1: Internet und WWW

Mit heutiger Software hatte das Tool sicher nicht viel zu tun. Grafische Oberflchen gab es nicht,
kommandozeilenorientierte Systeme dominierten, und grne Schrift auf schwarzem Grund beherrschte die Bildschirme. Auf einem solchen System also hatte Tim Berners-Lee sein PascalProgramm zum Laufen gebracht. Er nannte das Programm Enquire, was auf Deutsch so viel
bedeutet wie sich erkundigen.
Enquire war ein Hypertext-Programm. Man konnte Textdateien editieren, die vermutlich
durch irgendwelche Steuerzeichenfolgen markiert in nodes (Knoten) unterteilt waren. Ein
Knoten konnte alles sein, was so an Daten anfiel Adressen, Gesprchsnotizen, spontante Ideen,
Erlebnisse, Arbeitsergebnisse. Zu jedem Knoten gab es eine zugehrige Liste mit Links zu anderen Knoten. Man konnte auf jegliche Art von Querbeziehung linken, die man kannte oder fand.
Links auf Ziele innerhalb einer Datei wurden vom Enquire-Programm automatisch bidirektional
dargestellt das heit, auch wenn der Link nur von A nach B gesetzt war, fand man bei B in der
Liste den Rckverweis auf A.
Ende 1988 entschloss sich Berners-Lee, aus der Weiterentwicklung von Enquire ein computerbergreifendes System zu entwickeln. Fr CERN sollte er zu diesem Zweck einen entsprechenden Projektvorschlag einreichen und darin sein Vorhaben detailliert beschreiben. Das war
die Zeit, als Berners-Lee mit verschiedenen Fachleuten Kontakt aufnahm, um technische Wege
der Realisierung seiner Ideen zu finden. Ben Segal, ein Kollege von Berners-Lee, der sich mit den
Grundlagen des Internet auskannte, berzeugte den Hypertext-Entwickler von den einzigartigen
Mglichkeiten des Netzes der Netze. 1989 reichte er seinen Vorschlag bei CERN ein. Es vergingen jedoch viele Monate, in denen Berners-Lee keine Reaktion auf den Vorschlag erhielt. Robert
Cailliau, ein alter Bekannter, lie sich von den Ideen des Briten begeistern und setzte sich fortan
fr die Forcierung des Projekts am CERN ein. In dieser Zeit es war das Jahr 1990 erhielt das
Projekt auch seinen endgltigen Namen: World Wide Web. Im Herbst des Jahres 1990 schrieb
Berners-Lee eigenhndig die ersten Versionen der drei Sulen seines Konzepts:
Die Spezifikation fr die Kommunikation zwischen Web-Clients und Web-Servern das so
genannte HTTP-Protokoll (HTTP = Hypertext Transfer Protocol).
Die Spezifikation fr die Adressierung beliebiger Dateien und Datenquellen im Web und im
brigen Internet das Schema der so genannten URIs (URI = Universal Resource Identifier,
universeller Quellenbezeichner).
Die Spezifikation einer Auszeichnungssprache fr Web-Dokumente, der Berners-Lee den
Namen HTML gab (HTML = Hypertext Markup Language, Hypertext Auszeichnungssprache).
Berners-Lee schrieb auch die erste Web-Server-Software. Der Rechner, auf dem diese Software
installiert wurde, war unter dem Namen info.cern.ch erreichbar. Dort stellte Berners-Lee an
Weihnachten 1990 die ersten, in HTML geschriebenen Web-Seiten der Welt zur Verfgung.
Seine Ideen wichen dabei ursprnglich durchaus von dem ab, was schlielich aus dem Web
wurde. So setzte sich Berners-Lee immer dafr ein, Web-Seiten online editierbar zu machen,
sodass Web-Seiten-Besucher Texte fortschreiben konnten, sofern der Anbieter entsprechende
ffentliche Schreibrechte fr die Dateien vergab. Doch die Web-Browser, die sich schlielich
durchsetzten, waren reine Lese-Software.
Das Web entwickelte sich zunchst nicht unbedingt von allein. Berners-Lee und seine Projektmitstreiter waren unermdlich bei der Arbeit, das Web bekannt zu machen und zu etablieren.
Auf einer internationalen Hypertext-Konferenz im Jahre 1991 stellten sie das Projekt vor. Kontakte zu Programmierern fr verschiedene Systeme entstanden, und nur so entstanden die ersten

1.4 Entstehung des World Wide Web

43

Web-Browser. Denn erst die Verfgbarkeit solcher Browser ermglichte es anderen Menschen
mit Internet-Zugang, Web-Seiten aufzurufen. Nicola Pellow, eine junge Mitarbeiterin und
Mathematikerin am CERN, schrieb den ersten einigermaen benutzbaren textmodusorientierten
Browser. 1992 entstanden auch die ersten Browser fr grafische Benutzeroberflchen, mit den
Namen Erwise und Viola. Gleichzeitig stieg die Zahl von Web-Servern, ber die Web-Seiten
angeboten wurden. Zunchst waren es vor allem wissenschaftliche Institutionen.

1.4.2 Marc Andreessen, Netscape und der Boom

Fr programmierende Studenten wurde es zunehmend zu einer interessanten Herausforderung,
Browser frs Web zu schreiben. Besonders hervor tat sich dabei ein junger Mann namens Marc
Andreessen. Er entwickelte einen Web-Browser fr grafische Benutzeroberflchen namens
Mosaic. Tim Berners-Lee, der Marc Andreessen auch selber kennen lernte, beschreibt ihn als
jemanden, der nicht wie alle Browser-Entwickler vor ihm eine Software frs Web entwickeln
wollte, sondern als jemanden, der mit dem Anspruch auftrat, das Web berhaupt erst verfgbar
zu machen eben mit seinem Browser.

1.5:

Marc Andreessen, der den ersten brauchbaren grafischen Web-Browser Mosaic

programmierte.

Andreessen und seine angeheuerten Mitprogrammierer hatten mit den philosophischen Ideen
von Berners-Lee nicht sehr viel am Hut. Sie dachten von Beginn an in kommerziellen Kategorien. Bei der Entwicklung des Mosaic-Browsers erfanden die Programmierer nach ihrem Belieben neue Features, die sie in den Web-Browser implementierten, ohne dass diese Features standardisiert waren. Aber auch wenn Berners-Lee durch die Zeilen seines Buches deutlich durchscheinen lsst, wie wenig er von Andreessen hielt durch den Mosaic-Browser kam die Lawine
Web erst richtig ins Rollen. Das Mosaic-Projekt war dem ehrgeizigen Marc Andreessen jedoch
alsbald zu klein geworden. Er wollte mehr, er wollte einen Browser, der die Welt erobert. Andreessen stieg schlielich aus dem Mosaic-Projekt aus und wurde Mitbegrnder einer neuen
Firma fr Web-Software: Netscape. Wer heute den guten Netscape-Browser gegen den bsen
Microsoft-Browser verteidigt, wei also meistens gar nicht, dass Netscape in den Anfangszeiten
genauso unverblmte Markteroberungs- und Monopolgelste hatte wie Microsoft.
Das Konzept von Netscape ging auch zunchst voll auf. Eine vllig neue Zunft entstand: die
Web-Designer. Trumend saen sie in den Jahren 1995 und 1996 vor ihren ersten Web-Seiten,
die dank Netscape bunte Hintergrund- und Schriftfarben, Hintergrundtapeten, Tabellenlayouts,
mehrgeteilte Bildschirmfenster (Frames) und Multimedia-Plug-Ins enthalten konnten. Zigtausende von Privatanwendern begannen, eigene Homepages zu erstellen. Nach und nach drngten
alle Firmen, Organisationen, Regierungen und Behrden mit eigenen Angeboten ins Web
weltweit. Die Wachstumsraten glichen einer Explosion. Es war aber auch die Stunde jener Mar-

44

Kapitel 1: Internet und WWW

keting-Strategen, die am liebsten aus der ganzen Welt eine Plakatwand machen wrden. Mit
Feuereifer und Finanzen strzten sie sich auf das neue, aufstrebende Medium, ohne den
geringsten Schimmer einer Ahnung von dessen wahrem Wesen zu haben. Kein Wunder, dass
viele Versuche, die Sahnetorte Web aufzurollen, klglich scheiterten und schlielich wieder fr
Katerstimmung am Werbemarkt und an der Brse sorgten.
In den Jahren 1995 und 1996 erreichte der Netscape-Browser unter den Web-Benutzern zeitweise einen Marktanteil von 90%. Der Microsoft-Konzern schlief zunchst noch den Schlaf der
Seligen und fra sich an den Umsatzzahlen seiner Betriebssysteme MS DOS und MS Windows
und der Textverarbeitung MS Word satt. Mitte der 90er Jahre, als der Online-Boom allmhlich
breitere Schichten der Bevlkerung der westlichen Lnder erreichte, setzte man bei Microsoft
zunchst auf einen eigenen, proprietren Online-Dienst namens MSN. Vom Internet und dem
Web behauptete Bill Gates, das sei nichts fr Microsoft. Als man jedoch sah, wie Netscape binnen weniger Monate die EDV-Landschaft vernderte, wie die Firma Netscape an der Brse einen
bis dahin noch nie dagewesenen Traumstart hinlegte und die Implementierungen des NetscapeBrowsers sich vermehrten wie ein Computer-Virus, da begann man pltzlich hastig zu reagieren.
Mit einem gewaltigen Aufwand an Manpower wurde Versumtes aufgeholt. Innerhalb von etwas
mehr als einem Jahr erschienen die ersten vier Versionen des MS Internet Explorer, wobei
Microsoft im Frhjahr 1997 mit der 4er-Version ein hnlicher technologischer Durchbruch gelang wie Netscape mit den 1995 erschienenen Versionen 1.1 und 2.0 seines Browsers. Microsoft
war alles andere als zimperlich, was den Kampf gegen Netscape betraf. So erklrte man den eigenen Browser einfach als Teil des Betriebssystems MS Windows und sorgte ber diesen vorhandenen Vertriebskanal fr die gewaltige Verbreitung des Internet Explorer. Nun ist dagegen
eigentlich nichts einzuwenden, denn schlielich gehrt Internet-Client-Software seit jeher zum
Umfang von Betriebssystemen, gerade auch in der Unix-Welt. Die Absichten von Microsoft
waren jedoch nur allzuleicht durchschaubar und sorgten in der Internet-Gemeinde fr eine
Welle des Hasses gegen den Konzern aus Redmond.

1.4.3 Die Arbeit des W3-Konsortiums

Der Browser-Krieg tobt bis heute zumindest berall dort, wo diskutiert wird. In den Logdateien der Web-Server ist er jedoch lngst entschieden. Microsoft steuert heute im Browser-Markt
allmhlich eine hnliche 80-90%-Machtstellung an wie im Bereich der Betriebssysteme. Doch es
gibt auch gute Nachrichten: Das Bewusstsein fr die technischen Grundlagen des Web ist gewachsen, und die Ideen von Tim Berners-Lee werden mittlerweile durch ein vielkpfiges Konsortium vertreten: das W3-Konsortium (W3C). Dieses Konsortium ist trotz der millionenfach
verbreiteten Browser der mchtigste Faktor fr die Weiterentwicklung des Web geworden. Nicht
zuletzt deshalb, weil es nicht gegen die Marktinteressen der Softwarefirmen gerichtet ist, sondern
seine Mitglieder zu groen Teilen aus eben jenen Softwarefirmen rekrutiert.
Ende 1994 traf ein erstes Beratungskomitee zusammen, um die Grundlagen fr eine Institution
zu schaffen, die sich um die technischen Grundlagen und Standards im Web kmmern sollte.
Das CERN war mit dieser Aufgabe, die nicht seinem eigentlichen Beschftigungsgegenstand
entsprach, einfach berfordert.
Im Sommer 1995 traten namhafte Firmen dem W3-Konsortium bei. Gleichzeitig erffnete die
europische Prsenz des Konsortiums ihre Pforten. Mitglieder des W3-Konsortiums sind Firmen
oder Organisationen, keine Einzelpersonen. Sie unterschreiben einen 3-Jahres-Vertrag und zah-

1.5 Hypertext

45

len Mitgliederbeitrge, aus denen sich das Gremium finanziert. Als Gegenleistung erhalten sie
Zugang zu nichtffentlichen Informationen und knnen an der Entwicklung der vom W3C betreuten Standards wie HTML, CSS, XML usw. mitwirken.
Die Arbeit des W3-Konsortiums unterteilt sich in so genannte Aktivitten (Activities). Es gibt
mehrere Dutzend solcher Aktivitten. So gibt es Aktivitten fr HTML, XML, CSS usw. Fr jede
der Aktivitten gibt es Arbeitsgruppen (Working Groups) und Interessensgruppen (Interest
Groups). Whrend die Interessensgruppen eher Einfluss nehmenden Charakter haben, befassen
sich die Arbeitsgruppen mit der eigentlichen Ausarbeitung der Inhalte. Beide Gruppenarten setzen sich aus Mitgliedern des W3C zusammen. In den Arbeitsgruppen sitzen also auch viele Vertreter von Softwareherstellern. Das unabhngige Kern-Team des W3-Konsortiums berwacht
die Aktivitten. Beim Entwickeln von Standards besteht die Ausarbeitung im Erstellen und Publizieren von technischer Referenz-Dokumentation zu dem betreffenden Standard.
ber die Einstiegsseite des W3-Konsortiums (www.w3c.org/) knnen Sie alle Aktivitten der
Organisation mitverfolgen. Mittlerweile gibt es auch ein Deutsches Bro des W3-Konsortiums,
das in deutscher Sprache ber die Arbeit des W3-Konsortiums berichtet (www.w3.org/
Consortium/Offices/Germany/). Fr alle, die sich professionell mit Web-Design beschftigen, sind
regelmige Besuche auf den Web-Seiten des W3-Konsortiums mittlerweile Pflicht.

1.5

Hypertext

1.5.1 Definitionen zu Hypertext

Hypertext und Text
Text wird der Reihe nach geschrieben und gelesen. Diese Linearitt liegt jedoch nicht an der
Natur des Mediums Text, sondern an den bisher blichen Text-Prsentationsmedien. Angefangen von der Papyrus-Rolle bis hin zum modernen Buch: Text wird wie selbstverstndlich als
Buchstabenwurm an einem langen Spie aufgereiht. Frederic Vester beschreibt dies am Ende
seines Buchs Neuland des Denkens folgendermaen: Das Medium Buch mit der linearen
Anordnung eines in diesem Falle ca. 1,9 Kilometer langen Buchstabenwurms ist, wie letztlich die
Sprache berhaupt, nur bedingt geeignet fr das Thema, das ich mir hier vorgenommen habe. Der
Versuch, ein Gesamtbild der vernetzten Wirklichkeit zu geben, die eigentlich nur simultan erfasst
werden kann, muss daher zwangslufig unvollkommen bleiben.
Ohne auf die metaphysische Verzweiflung, die in diesem Zitat zum Ausdruck kommt, nher einzugehen, lsst sich feststellen: Es gibt eine moderne Kritik an der Linearitt. Nicht unbedingt an
der Linearitt auf der Ebene einzelner Stze oder Passagen, sondern auf der Ebene eines greren
Textes, der aus vielen, in sich erkennbaren Teilen besteht und aufgrund seines Prsentationsmediums dazu verdammt ist, von vorne bis hinten wahrgenommen zu werden.
Hypertext ist ein nichtlineares Medium zur Prsentation von solchen Texten. An die Stelle des
Buchstabenwurms treten vernetzte Einheiten von Text. Durch die Untersttzung der Computer
schwindet die Abhngigkeit von der Rolle, vom rein linearen Medium. Bei Weiterdenkern hat
das die Hoffnung ausgelst, man knne das Verfassen und Lesen von Texten dem menschlichen
Denken und Verstehen besser anpassen als bisher.

46

Kapitel 1: Internet und WWW

Hypertext, Hypermedia und Multimedia

Hypertext ist nicht etwas anderes als Text. Hypertext ist nach wie vor Text, nur kein Text mehr,
der dem Leser durch sein reines Erscheinungsbild suggeriert, man msse ihn von vorne bis
hinten lesen. Vermittelt wird auch bei Hypertext Information, Unterhaltung usw. Unter den
Medien geht der Trend allerdings hin zu visuell aufflligeren Medien, also zu Bildern, Videos,
und simulierten, bewegten Welten. Die konsequente Weiterentwicklung von Hypertext ist deshalb Hypermedia. Hypermedia ist jedoch etwas anderes als Multimedia, das in aller Munde
ist. Multimedia heit nichts anderes als: viele Medien zugleich. Hypermedia bedeutet
dagegen: viele Medien, jedoch in einer Weise organisiert, wie es von Hypertext her bekannt ist.
Das Prfix Hyper- steht also fr eine bestimmte Art von Organisation. Diese Art von Organisation zeichnet sich aus durch Fragmentierung einzelner Einheiten einerseits und intelligente
Vernetzung dieser Einheiten andererseits.
Nicht der Unterschied zwischen Hypertext und Hypermedia ist entscheidend, sondern der
Unterschied zwischen Hyper- und Multi-. Alles auf einmal serviert zu bekommen, fhrt
lediglich zu Reizberflutung. Entscheidend ist fr den Rezipienten, alles so serviert zu bekommen, wie er es sich jeweils wnscht. Dieses Versprechen versuchen Hypertext und Hypermedia
einzulsen.

Hypertext, Kapitel, Verzeichnisse und Querverweise

Stark strukturierte Bcher enthalten im Prinzip alles, was Hypertexte auch enthalten: hierarchische Strukturen (Kapitel und Unterkapitel), verbindende Elemente (Querverweise) sowie unterschiedliche Informationszugnge (Inhaltsverzeichnisse, Stichwortverzeichnisse). Der Unterschied
liegt allein in der Prsentation: das Buch empfiehlt sich rein uerlich trotz der nicht-linearen
Angebote letztlich, linear bewltigt zu werden Seite fr Seite. Bei Hypertexten, die am
Bildschirm prsentiert werden, wird diese stillschweigende Recommendation von Bchern
aufgebrochen.
berspitzt kann man es so ausdrcken: Text in Bchern, auch in stark strukturierten Bchern,
liest man; Hypertext dagegen liest man nicht, sondern man navigiert darin. Ob das Lesen dabei
tatschlich zu kurz kommt, ist eine durchaus ernst zu nehmende Frage, der sich das Medium
Hypertext stellen muss.
Es gibt durchaus auch Bcher, die nicht von vorne nach hinten gelesen werden: Lexika beispielsweise, oder auch Fachbcher mit Nachschlage-Charakter. Und genau bei dieser Sorte Literatur hat sich Hypertext bislang auch am erfolgreichsten bewhrt. Kaum vorstellbar ist Hypertext
dagegen bei literarischen Gattungen wie klassischen, aus einem klaren Handlungsstrang bestehenden Romanen. Andererseits besitzen die meisten modernen Romane eben keinen solchen
klaren Handlungsstrang mehr. Seit mindestens hundert Jahren schon bewegt sich auch die
schngeistige Literatur weg von der Linearitt. Damit wird sie ebenfalls relevant fr Hypertext,
auch wenn sich auf diesem Gebiet alles eher noch in der Experimentierphase befindet.

Hypertext, Computer und Computernetze

Hypertext wird heute ausschlielich auf Computern realisiert, weil Computer die spezifischen
Anforderungen von Hypertext hervorragend untersttzen. In der Vergangenheit gab es jedoch
auch Versuche, so etwas wie Hypertext mit herkmmlichen Mitteln zu realisieren. So kam in den

1.5 Hypertext

47

frhen siebziger Jahren ein didaktisches Konzept in Mode, das sich programmierte Unterweisung nannte. Es handelte sich um Bcher, die man nicht sequenziell lesen konnte, sondern die
so aufgebaut waren, dass der Schler kleine Informationshppchen oder Fragen angeboten
bekam und dazu eine Auswahl an Querverweisen zu anderen Stellen im Buch. Auch die Verweisziele waren Informationshppchen oder Kommentare zu der ausgewhlten Antwort mit neuen
Querverweisangeboten zu anderen Stellen.
Es zeigte sich jedoch, dass das viele Blttern in solchen Bchern nicht gerade die Konzentration
auf den Lehrstoff frderte. Hier sind Computer weit berlegen. Ein Klick mit der Maus auf einen
Verweis, und das gewnschte Verweisziel wird angezeigt. Diese Tatsache kann gar nicht unterschtzt werden. Unterbrechungszeiten von mehr als drei Sekunden zerstren nachweislich eine
anhaltende Konzentration. Blttern dauert meist lnger und erfordert auerdem Gehirn-Reserven. Klicken und warten, bis der neue Inhalt da ist, geht in der Regel schneller und verbraucht
keine oder viel weniger Reserven.
Elektronische Prsentation von Text hat allerdings auch Nachteile (es geht hier nicht um die
Zwangsvorstellungen von Leuten, die meinen, nicht ohne Papier leben zu knnen): einem elektronischen Hypertext kann man nicht ansehen, wie gro er ist, d.h. man kann sich keine rechte
Vorstellung davon machen. Das kann bengstigend oder beruhigend wirken, je nachdem, wie
der Anwender gegenber dem Medium eingestellt ist. Es kann angenehm sein, nicht zu wissen,
wie gro das Ganze ist, weil man ja zunchst sowie nicht alles zu berblicken imstande ist. Es
kann aber auch unangenehm sein, so gar keine Vorstellung ber das Ganze zu haben. Hypertextinterne Techniken wie Web-Views versuchen entsprechenden ngsten beim Anwender entgegentreten.
Aber es bleibt nicht bei dem Problem, die Gre eines einzelnen Hypertextes zu erfassen. Hypertexte neigen nmlich ferner dazu, sich untereinander zu vernetzen und dadurch immer grere
Ganzheiten hervorzubringen. Deshalb sind lokal auf einem Computer oder Speichermedium
verfgbare Hypertexte auf die Dauer unbefriedigend. Schon frh (bereits 1965 bei Ted Nelson)
kam deshalb der Wunsch auf, Hypertext-Einzelprojekte weltweit zu vernetzen. Doch erst Ende
der achtziger Jahre, als das Thema Hypertext in weiteren Kreisen diskutiert wurde, wurde die
Idee geboren, das weltweite Internet fr einen Hypertext-orientierten Dienst zu nutzen. Aus
diesen berlegungen entstand Anfang der neunziger Jahre schlielich das World Wide Web.

Grundstzliche Positionen zu Hypertext

Folgende grundstzliche Positionen zu Hypertext lassen sich unterscheiden:
Jene Position, die in Hypertext die konsequente Weiterentwicklung von stark strukturierten
Texten sieht. Zitat Kuhlen: Wir kommen zu dem Ergebnis, dass Hypertext die auch schon in
Texten verwendeten nicht-linearen Gestaltungsmittel zum Prinzip erhebt.... (Rainer Kuhlen:
Hypertext Ein nicht-lineares Medium zwischen Buch und Wissensbank, Berlin, Heidelberg,
New York, 1991)
Jene Position, die in Hypertext eine neue, besonders benutzerfreundliche Recherche in groen Informations- und Datenbestnden sieht. Zitat Schnupp: Hypertext spannt ber Textdokumente eine Hyperstruktur zur Untersttzung von Recherchen auf. (Peter Schnupp: Hypertext; In der Reihe: Handbuch der Informatik, Band 10.1, Mnchen, 1992)

48

Kapitel 1: Internet und WWW

Jene Position, die in Hypertext die Schaffung neuer kreativer Freirume und Dimensionen fr
Autoren und Leser sowie das Verschwimmen der Grenzen zwischen Autor und Leser sieht.
Zitat Joyce: Hypertext narratives become virtual storytellers and narrative is no longer disseminated irreversibly from singer to listener or writer to reader. (Hypertext-Erzhlungen werden
virtuelle Geschichtenerzhler, und Erzhltes wird nicht mehr unumkehrbar nur von Snger
zu Zuhrer oder von Autor zu Leser verbreitet). (Michael Joyce: Interview, Discover, The
World of science, November 1989)
Rainer Kuhlen vertritt die erste Position am deutlichsten. ber die Linearitt von Text schreibt
er: Linearitt beruht aus texttheoretischer Sicht auch auf der richtigen Verwendung mikrotextueller,
Kohsion erzeugender Mittel. Dazu gehren z.B. ausdrckliche Leseanweisungen wie dies ist so
zu verstehen, dass..., oder hinweisende Ausdrcke wie dies wurde ja schon im ersten Kapitel
problematisiert. Die Zusammenhnglichkeit linearer Texte benutzt also immer auch Mittel,
welche die Linearitt sprengen. Diese Linearitt sprengenden Mittel werden in Hypertexten einfach zum Prinzip erhoben. Aus Texten mit textimmanenten, Kohsion erzeugenden Mitteln
werden informationelle Einheiten (Kuhlen), die durch ausfhrbare Verweise untereinander
vernetzt werden. Die Verweise leisten dabei nichts grundstzlich Neues. Es sind keine willkrlichen, sondern semantisch begrndbare, argumentative Verknpfungen, die zur Navigation
oder zum Herstellen von Querbezgen dienen. Neu ist nur deren computeruntersttzte Ausfhrbarkeit.
Im Web gibt es beispielsweise unzhlige kleine, in sich abgeschlossene Projekte, die bewusst die
Mittel von HTML nutzen, um eine Hypertext-Struktur zu realisieren (die Homepage, bestehend
aus ein paar Web-Seiten). Solche Projekte sind jedoch zu klein, um darin umfangreiche DatenRecherchen durchzufhren. Sie sind am ehesten durch die Position zu beschreiben, die Rainer
Kuhlen einnimmt.
P. Schnupp betont dagegen die Recherche-Position am deutlichsten wohl auch deshalb, weil er
kleinen Projekten gar keinen Hypertext-Charakter zubilligt. Seine Einfhrung zum Thema
beginnt mit den Worten: Das Bedrfnis, aus dem Hypertext entstand, ist das gleiche, welches von
der Datei zur Datenbank fhrte. So wie die Datenbank bei strukturierten Daten gegenber der
Einzeldatei neue Mglichkeiten der Datenabfrage erschloss, will Hypertext die interaktive
Recherche in umfangreichen Textbestnden erleichtern und beschleunigen.
Neu sind fr Schnupp bei Hypertext vor allem die intuitiven, kein tieferes EDV-Wissen voraussetzenden Recherche-Techniken: hnlich wie die Spreadsheets dem individuellen Benutzer die
Programmierung numerischer Anwendungsaufgaben zugnglich machten, bringt Hypertext ihm die
selbstndige Erstellung und Pflege umfangreicher Textarchive. Wie bei Daten wird auch bei Texten
erst durch deren Verknpfung ein groer Teil des in ihnen gespeicherten 'Wissens' zugnglich.
Bei Projekten mit groen Textbestnden stt eine Realisierung mit lauter einzelnen, statisch
abgespeicherten und aufrufbaren Texteinheiten in der Tat irgendwann an Grenzen. Bei solchen
Datenbestnden erwartet der Anwender zu Recht eine Suchmglichkeit, die den Datenbestand
nach Ausdrcken oder Kriterien durchforstet und die Suchergebnisse on demand aufbereitet.
Die Auffassung vom kreativen Grundwesen von Hypertext hlt sich ebenfalls noch immer.
Gerade im literarischen Bereich wird zumindest dort, wo die Autoren mit Computern umgehen knnen mittlerweile viel mit Hypertext experimentiert. Dabei steht jedoch nicht unbedingt
die Transparenz bei der Informationsbeschaffung im Vordergrund, sondern im Gegenteil sogar
eher das Locken des Lesers in lauter interessante Teilwelten. Der Rezipient wird dabei bewusst

1.5 Hypertext

49

dem Stress ausgesetzt, an einer anderen Stelle, die er bereits verfolgt, aber per Verweis wieder
verlassen hat, etwas zu verpassen. Ob dieses bewusste Unter-Stress-gesetzt-werden allerdings von
Rezipienten als spannend oder eher als nervig empfunden wird, gehrt zur knstlerischen Kritik.
Hypertext ist jedenfalls in der Lage dazu, solche Dinge mit Lesern zu treiben, und vernetzte
Texte, die fr sich selbst in Anspruch nehmen, ein knstlerischer Ausdruckswille zu sein, lassen
sich nicht mit informationswissenschaftlichen Methoden messen.

1.5.2 Begriffe rund um Hypertext

Nodes, Units, Items, Informationelle Einheiten
Hypertexte sind so konzipiert, dass sie nicht zum sequenziellen Lesen gedacht sind. Was aber soll
das sequenzielle Lesen ersetzen? Die Antwort: Texteinheiten, die in sich abgeschlossen sind und
jeweils einen kleinen Informationshappen anbieten. Durch die intelligente Vernetzung solcher
Texteinheiten entsteht dann jener Informationsraum, den man als Hypertext bezeichnet. Fr die
Texteinheiten hat man in der Vergangenheit viele Namen gefunden. Hier eine Auswahl:
node (beim Datenmodell HAM)
unit oder item
document (beim Softwareprodukt Intermedia)
card (bei den Softwareprodukten NoteCards und HyperCard)
information blocks
frame (beim Softwareprodukt KMS)
statement (beim Softwareprodukt Augment)
message (beim Softwareprodukt KnowledgePRO)
article (beim Softwareprodukt HyperTies)
hyper-molecule (beim Softwareprodukt HyperCOSTOC)
guideline (bei den Softwareprodukten Guide und NaviTextSAM)
Einige der genannten Softwareprodukte sind historisch und nicht mehr auf dem Markt. Die Liste
lsst jedoch erkennen, dass all diese Produkte so etwas wie informationelle Einheiten kennen.
Nur das World Wide Web lsst etwas Derartiges vermissen, und auch in HTML gibt es nichts,
wodurch sich eine informationelle Einheit definieren lsst. Fr diese Zurckhaltung gibt es
allerdings gute Grnde. Das Definieren informationeller Einheiten kann nmlich leicht zu
Einschrnkungen in Bezug auf deren Inhalt fhren. Eine card oder eine message ist im
Grunde kein leerer Behlter, sondern ein Behlter, der schon in seinem Namen, aber auch meist
durch seine technische Umsetzung gewisse Vorstellungen von dem ausdrckt, was er als Inhalt
erwartet. Auf solche Vorgaben wollte man im Web verzichten. In der Regel ist eine HTML-Datei
eine sinnvolle informationelle Einheit. Manchmal sind es aber auch Teile einer HTML-Datei, die
per Anker anspringbar sind. Auch kann ein ganzes, berschaubares und in sich geschlossenes
Projekt, das aus mehreren Dateien besteht, als informationelle Einheit betrachtet werden. Bei
dynamisch erzeugten Inhalten sind die Grenzen einer Einheit wieder andere. Im Web ist auch
Text mglich, der gar nicht wie typischer Hypertext wirkt. Auch die Dokumentation, die Sie
hier lesen, hat zum Teil eher klassisch-sequenziellen Lese-Charakter als das, was man von typi-

50

Kapitel 1: Internet und WWW

schem Hypertext erwartet. Dennoch gibt es auch in dieser Dokumentation und im Web allgemein zweifellos einzelne, erkennbare Topics. Es gibt nur kein vorgegebenes Schema, in das sich
solche Topics einpassen mssen.

n:m-Relation, kohsive Geschlossenheit

Eine Hypertext-Einheit muss dem Anspruch gengen, von ganz verschiedenen Kontexten aus
gesehen ein sinnvolles Verweisziel zu sein. Wenn der Anwender an irgendeiner anderen Stelle
auf einen Verweis klickt, der zu dieser Texteinheit fhrt, muss die Texteinheit so gestaltet sein,
dass sie in jedem Fall den Gedankensprung, den der Anwender mit dem Verweis gewagt hat,
belohnt. Da der Kontext, also der Informationszusammenhang, von dem aus der Anwender zu
dieser Texteinheit springt, ganz verschieden sein kann, muss diese Texteinheit so konzipiert sein,
dass sie alle denkbaren Kontexte befriedigt. Das kann sie nur leisten, indem sie sich gewissermaen einigelt und sich radikal auf ihre eigene Aussage konzentriert. Diese Einigelung
bezeichnet man als kohsive Geschlossenheit. Die Konstellation, dass viele verschiedene andere
Texteinheiten zu ein und derselben Texteinheit verweisen knnen, gilt als n:m-Relation (n =
viele, m = irgendein Ziel, aber ein bestimmtes Ziel).
Mit dem Begriff der informationellen Einheit versucht Kuhlen, einen informationswissenschaftlich diskutierten Begriff fr die Einheiten eines Hypertextes zu etablieren. Dabei geht er
auch auf die Problematik der kohsiven Geschlossenheit solcher Hypertext-Einheiten ein, denn:
Wissen bzw. aktuelle Information ist immer in einen greren semantischen und/oder argumentativen Kontext eingebunden (Kuhlen, S.81). Es gibt kein autonomes Stck Information. Wie
kann dann in Hypertext-Einheiten, die dem Anspruch gengen mssen, kohsiv geschlossen zu
sein, Information angeboten werden? Obgleich die Kunst zweifellos darin besteht, informationelle
Einheiten so festzulegen, dass sie aus sich heraus verstanden werden knnen, mssen sie doch gleichzeitig auf ihren informationellen Kontext verweisen (Kuhlen, S.81).
Eine Hypertext-Einheit muss demzufolge inhaltlich in sich geschlossen sein und gleichzeitig ausdrcklich auf bergeordnete oder verwandte Information verweisen, um dem Leser/Anwender
so ihren Informationskontext zu zeigen. Dies kann durch ausfhrbare Querverweise, durch Verweise auf bergeordnete Ebenen oder durch Verweise auf besondere Navigationshilfen geschehen.

Web-Views
Einem elektronisch gespeicherten Hypertext kann man im Gegensatz zu einem Buch etwa
nicht unmittelbar ansehen, wie umfangreich er ist. Der Leser/Anwender tut sich mit der Navigation im Informationsangebot jedoch leichter, wenn er sich eine plastische Vorstellung des
Informationsangebots machen, sich also einen Informationsraum mit dieser oder jener Gre
und Komplexitt vorstellen kann. Das verringert die Gefahr des Lost in Hyperspace-Gefhls
(siehe den gleichnamigen Abschnitt weiter hinten).
Web-Views sind Gesamtsichten auf einen Hypertext mit der Absicht, den dargebotenen Informationsraum zu visualisieren. Ein Web-View soll dem navigierenden Anwender den gesamten
Hypertext als eine Art Stadtplan zeigen und mglichst in jeder beliebigen Situation ein Sie
befinden sich hier! ausgeben knnen. Dazu bedarf es allerdings ausgereifter grafischer Darstellungsmglichkeiten. Man stelle sich einen Hypertext mit zigtausend Texteinheiten und noch

1.5 Hypertext

51

mehr Verknpfungen vor. Die Visualisierung eines solchen Netzes wirft Probleme auf, und es ist
fraglich, wie gro der Orientierungsgewinn fr den Navigierenden dabei ist. Sinnvoller sind in
der Praxis lokale Web-Views, die den aktuellen Dokumentteil im Zusammenhang darstellen,
oder ferne Web-Views, die vor dem Ausfhren eines Verweises zu einem anderen Dokumentteil
diesen Dokumentteil auf Wunsch in Form einer bersicht prsentieren.

Fish-Eye-Views
Ein Fish-Eye-View ist das Angebot, per Verweis zu nherer Information ber ein angeschnittenes
Thema zu gelangen. Die Mglichkeit, sich in ein beliebiges Thema unverzglich und beliebig
weit vertiefen zu knnen, gehrt zu den Hypertext-Visionen. Kein langes Blttern, kein Griff in
ein anderes Regal, kein Gerenne in eine andere Bibliothek mehr, sondern nur ein Mausklick oder
ein Tastendruck. Verfgbarkeit der Information im Moment der Konzentration und des spontanen Interesses. Das soll den informationellen Mehrwert (Kuhlen) von Hypertext gegenber
herkmmlicher Informationsbeschaffung begrnden.
Voraussetzung sind Hypertext-Netze von gigantische Ausma. Als der groe Vordenker solcher
Netze gilt Ted Nelson. Mit seinem Projekt Xanadu hat er solch ein Netz schaffen wollen. Der
Durchbruch wurde dem Projekt jedoch verwehrt. Stattdessen haben wir heute mit dem World
Wide Web ein Netz, dessen Wachstum selbst die khnsten Trume der Hypertext-Visionre in
den Schatten stellt. Doch gerade das unkontrollierte Wuchern dieses Netzes macht es schwer,
Fish-Eye-Views zu realisieren. Da hier auch die Qualitt der Information so unterschiedlich ist,
ist ein organisiertes System von Fish-Eye-Views allenfalls in Teilen des WWW realisierbar, etwa
zwischen bestimmten wissenschaftlich orientierten Informationsbereitstellern.

Information Retrieval
Information Retrieval ist die Art und Weise, wie ein Anwender in einem groen Datenbestand
letztendlich an konkrete Informationen herankommt. Ein ausgereiftes Hypertext-Projekt
erreicht vom Umfang her leicht vielbndige Werke. Ein solcher Hypertext wird wohl eher zur
gezielten Informationssuche genutzt, nicht zum gemtlichen Schmkern. In klassischen Datenbanken gelangt der Informationssuchende zu seiner gewnschten Information ber entsprechende Suchabfragen. Diese Suchabfragen muss er formulieren, z.B. zeige mir alle Kunden, die
in Monaco wohnen, ledig sind und mehr als 10000 Mark im Monat verdienen. Dabei muss man
jedoch vorher wissen, wonach man sucht. Bei textorientierten Informationsbestnden ist die
Formulierung einer Suchabfrage schwieriger als bei strukturierten Daten. Stichwortsuchen in
einer Volltextdatenbank knnen zumindest ohne Einsatz von knstlicher Intelligenz niemals
so aufschlussreiche und exakte Suchergebnisse liefern wie Suchabfragen in einer feldorientierten
Datenbank.
In textorientierten Informationsbestnden muss der Informationszugang deshalb idealerweise
mehrgleisig organisiert werden. Die programmuntersttzte Stichwortsuche sollte ebenso mglich sein wie der Zugang ber ein fein gegliedertes System von Verweisen.

Orientierung, Navigation, Lost in Hyperspace

Wenn man einen Hypertext aus der Vogelperspektive betrachtet, gibt es darin n:m-Relationen.
Aus Sicht des Lesers eines Hypertextes gibt es jedoch keine n:m-Relationen. In einer gegebenen

52

Kapitel 1: Internet und WWW

Situation gibt es hchstens eine 1:n-Relation, also mehrere Verweise, die von der aktuellen Texteinheit wegfhren. Diese Verweise stellen gemeinsam mit immer verfgbaren HypertextFunktionen wie Backtracking und Lesezeichen das Arsenal an Orientierungsmglichkeiten dar,
die der Anwender nutzen kann, um sich im Informationsangebot sinnvoll zu bewegen.
Was sich aus der Vogelperspektive als freies Bewegen in einem faszinierenden Netz darstellen
mag, ist aus der Sicht eines konkreten Benutzers dieses Netzes die Aufgabe, sich in dem Netz, das
er nicht unmittelbar berschaut, zurechtzufinden, zu orientieren. Sich in einem nicht komplett
bersehbaren Hypertext-Netz bewegen heit, darin zu navigieren. Die Anleihe aus der Welt der
Hochseeschifffahrt ist bewusst gewhlt und hat den Browser-Anbieter Netscape dazu bewegt,
sein berhmtes Programm zunchst Netscape Navigator zu nennen.
Der Navigierende orientiert sich an den angebotenen Verweisen. Wenn die Verweise nicht intelligent sind, keinen kontextuellen Zusammenhang herstellen, droht der Navigierende die Orientierung zu verlieren und in jenen Zustand zu geraten, den man in der Hypertextliteratur als Lost
in Hyperspace verloren im Hyperraum bezeichnet.

Pfade, Trails, Guided Tours

Die meisten Hypertext-Anwender sind noch keine erfahrenden Navigatoren. Sie sind die
Informationsaufnahme von Bchern gewhnt und wnschen sich neben den waschechten
Hypertext-Sprngen auch die Mglichkeit, das Informationsangebot nach einer vorgegebenen
Schrittfolge durchzugehen. Solche Ketten von aneinandergereihten Einheiten eines Hypertextes
bezeichnet man als Pfad engl. trail oder auch als gefhrte Touren engl. guided tours.
Die HTML-Version dieses Buches bietet Ihnen auf Seiten wie dieser hier beispielsweise am
Seitenende Sprnge zur nchsten und vorhergehenden Seite an. Dabei ist es gewiss nicht immer
so, dass das nchstliegende Thema dem aktuellen Thema inhaltlich besonders nah steht. Es handelt sich vielmehr um ein Angebot, das auch in kritischen Situationen zum Weiternavigieren
ermutigen soll also in Situationen von der Art: Ich wei ja gar nicht, was mich als Nchstes
interessiert (das typische Gefhl des Lost in Hyperspace).

Backtracking, Historie, Lesezeichen

Backtracking meint das Rckwrtsverfolgen eines eingeschlagenen Lesepfads. Historie ist das,
was dazu ntig ist: ein Protokoll der bis zu einem Zeitpunkt besuchten Hypertext-Einheiten.
Lesezeichen engl bookmarks sind Marken, die der Leser an fr ihn besonders interessanten
oder zentralen Texteinheiten setzt und zu denen er jederzeit springen kann.
Im Hypertext selbst sind solche Funktionen nicht realisierbar, hchstens ansprechbar (so kann
der Autor einer Web-Seite mit JavaScript beispielsweise die besuchten Web-Seiten des Anwenders abfragen). Zunchst einmal muss jedoch die verwendete Navigations-Software diese Funktionen dem Anwender zur Verfgung stellen, da es sich in beiden Fllen um sessionspezifische
Navigationsdaten bzw. anwenderspezifische Navigationsschwerpunkte handelt.
Bei einigen Softwareprodukten ist die Lebensdauer von Lesezeichen und Historie auf eine Sitzung (Session) begrenzt, d.h., die Daten werden nur im Arbeitsspeicher gehalten und gehen nach
Beenden des Navigationsprogramms verloren, oder sie sind dauerhaft in Dateiform speicherbar.
Die meisten modernen Browser erlauben dem Anwender, selber einzustellen, wie weit die Historie zurckverfolgbar sein soll.

1.5 Hypertext

53

Browsing, Authoring
Browsing bedeutet Herumstbern, und zwar mit kreativem oder informationellem Mehrwert.
Das ist es, was sich begeisterte Hypertext-Anhnger fr den Leser eines Hypertextes erhoffen.
Doch solange es noch keine Hyper-Computer gibt, werden die Verweise, die der Leser entdecken
soll, von Autoren eingerichtet.
Authoring ist der eigentlich unmgliche Versuch, einen Hypertext mit all der Intelligenz auszustatten, die dem Leser den Mehrwert gegenber sequenziellem Text erst vermitteln soll. Eigentlich mssten also hyper-intelligente Autoren fr normal-intelligente Leser schreiben. Doch nicht
nur, dass normal-intelligente Autoren an Hypertexten schreiben nein, auch Leser selbst schreiben Hypertexte fort. Denn auch das Fortschreiben durch Anwender gehrt zum Authoring in
manchen Hypertext-Systemen. Die Trennung zwischen Autor und Rezipient ist im HyptertextBereich zumindest theoretisch flieend und zum Teil aufgehoben, weil printmedienbedingte
Zwnge wie Auflagenhhen, Neuauflagenkalkulationen usw. weitgehend entfallen.
Bei Hypertext-Systemen unterscheidet man generell zwischen reinen Browsern (Nur-Lese-Zugriff) und Systemen, die das Editieren bzw. Fortschreiben erlauben. Ein Fortschreiben von allem
seitens aller ist jedoch in der Praxis nur in geschlossenen Benutzerkreisen mglich, um rechtlichen Missbrauch von geistigem Eigentum zu vermeiden und Qualitt zu wahren. Im Web herrscht deshalb obwohl Grndervater Tim Berners-Lee sich dagegen lange wehrte eine klare
Trennung zwischen Anbietern und Lesern von Web-Seiten. ber technische Umwege wie die
CGI-Schnittstelle ist es allerdings mgich, interaktiv wachsende Web-Projekte, an denen mehrere Personen online arbeiten knnen, zu realisieren. Ein Diskussionsforum ist beispielsweise
eine derartige Anwendung, und Diskussionsforen mit vielen, hochwertigen Beitrgen gehren
deshalb wohl auch zu den spannendsten, modernen Formen von Hypertext.

Sharks, Holy Scrollers, Karteisysteme, Buchmetapher

In der Hypertext-Fachwelt geht ein Streit zwischen jenen, die das Scrollen (Hoch- oder Runterfahren im Text) verboten haben wollen, und solchen, die es erlauben mchten. Sharks (Haie)
nennt man jene, die dafr pldieren, dass eine Texteinheit immer auf einen Blick erfassbar sein
sollte; Holy Scrollers sind jene, die dem Umfang einer Texteinheit keine bildschirmbedingten
Grenzen aufzwingen wollen. Sharks tendieren dazu, Hypertexte als Karteisysteme zu kreieren.
Grundelement ist dabei die Karteikarte mit ihrer unvernderlichen Gre. Holy Scrollers bevorzugen dagegen die Buchmetapher beim Design von Hypertexten. Grundelement sind dabei
Textabschnitte von variabler, den Gegebenheiten angepasster Lnge.
Heute haben sich weitgehend Systeme durchgesetzt, die einer Texteinheit keine Lngenbeschrnkungen auferlegen. Auch Web-Seiten knnen beliebig lang sein. Dennoch wird gerade im
WWW mit Hilfe von Techniken wie Frames hufig auch eine scroll-freie Informationsdarbietung angestrebt, denn das Erfassen eines gesamten Informationszusammenhangs auf einen Blick
hat unbestreitbare Vorteile.

Hypertext Abstract Machines

In vielen Bereichen der Programmierung hat es sich oft als die beste Implementierungsmethode
erwiesen, mit softwaretechnischen Mitteln eine abstrakte oder virtuelle Maschine...fr eine Klasse von

54

Kapitel 1: Internet und WWW

Anwendungsprogrammen zu realisieren, auf der dann die eigentliche Software aufbaut. (Schnupp,
S.85).
Ein Beispiel dafr sind Datenbanken wie dBase, FoxPro u.v.a., die an die Stelle spezieller Einzelsoftware treten, etwa fr Kundenverwaltung, Bibliotheksbestand-Verwaltung usw. Fr Hypertext
gilt das Gleiche: Man kann einen Hypertext fest programmieren, oder man programmiert eine
unabhngige, abstrakte Software, die das Implementieren von Hypertexten untersttzt, indem
sie geeignete Mittel und Funktionen zur Verfgung stellt. Als professionelle Systeme dieser Art
nennt Schnupp z.B. das Produkt HAM (Hypertext Abstract Machine) oder HyperBase.
Noch einen Schritt weiter geht jedoch das Konzept, lediglich ein Hypertext-Datenformat zu
standardisieren, ohne es an eine bestimmte Software zu binden. Das bisher anspruchvollste
Format dieser Art ist SGML (Structured Generalized Markup Language), heute eher in seiner
moderateren Ableitung XML verbreitet. Eine Unterklasse von SGML und neuerdings auch von
XML ist HTML, das Datenformat fr Hypertext im World Wide Web. Hierbei handelt es sich
genau genommen nicht mehr um eine Hypertext Abstract Machine, sondern um eine Hypertext
Abstract Form es ist nicht nur anwendungsungebunden, sondern auch maschinenungebunden.

World Wide Web

Hypertext im Web geht in zwei Punkten ber die an bestimmte Softwareprodukte gebundenen
Hypertext-Realisierungen in der Geschichte von Hypertext (Kapitel 1.5.3) hinaus:
Hypertext im Web setzt auf einer softwareunabhngigen Hypertext-Beschreibungssprache
auf, nmlich auf HTML (Hypertext Markup Language).
Hypertext im Web setzt auf einem weltweiten, bereits vorhandenen und etablierten Computernetzverbund auf, dem Internet.
Lediglich Ted Nelsons Xanadu-Projekt verfolgt einen hnlich weitreichenden und globalen
Ansatz, wurde jedoch von der Entwicklung des Web berholt. Das Web ist eine mglichst allgemein gehaltene Plattform fr weltweiten Hypertext, indem es nur Formalien wie Datenformate,
Adressierung und Software-Kommunikationsprotokolle festlegt.
Die Realitt im heutigen Web sieht allerdings etwas anders aus als in den Trumen der weltweiten Informationsvernetzer. Es dominieren Kommerzialisierung, egozentrische Angebote und
Null-Informationen. Echter Hypertext fhrt im Web eher ein Nischendasein. Doch solange
die echten Hyper-Links ihren Weg durchs Netz finden, ist eine Mehrfachnutzung des Web
nicht unbedingt schdlich. Die Kommerzialisierung inklusive Konkurrenzkampf kann auch dazu
beitragen, dass finanziell problematische Aspekte wie hhere Bandbreiten bei der Datenbertragung in Zukunft leichter lsbar sind.

1.5.3 Geschichte von Hypertext

Vannevar Bush und sein Memex
Bushs 'Memex' ist ein (auf dem Papier entworfenes, nicht experimentell realisiertes) Informationssystem, das auf dem methodischen und technischen Stand dokumentarischen Wissens (Indexieren, kontrollierte Vokabularien, Relationierung und Mikroverfilmung) von 1945 aufsetzte, dieses

1.5 Hypertext

55

allerdings mit der Radikalisierung der Idee der Verknpfung ('association') kritisierte und erweiterte
und damit einen richtungsweisenden Entwurf vorlegte, der bis heute die Ideen von Systemgestaltern
befruchtet. Memex war als eine Maschine konzipiert, welche das menschliche Gedchtnis und sein
Assoziationsvermgen erweitern und untersttzen sollte...Bush stellte sich eine Kamera vor, die an
der Stirn befestigt sein sollte und durch die alles, was im Verlaufe eines Tages das Interesse des Besitzers weckte, sofort aufgenommen und im Memex verfgbar gemacht werden sollte (Kuhlen, S.67).
Vannevar Bushs Memex (1945) gehrt in den Bereich des technisch-wissenschaftlichen Utopismus. Doch die Memex-Utopie gehrt zu jenen Utopien, deren Grundgedanke zu berzeugend
ist, um sie einfach ins Reich der Fabeln zu verbannen:
The human mind...operates by association. With one item in its grasp, it snaps instantly to the next
that is suggested by the association of thoughts, in accordance with some intricate web of trails carried
by the cells of the brain (Bush) der menschliche Geist ... arbeitet mit Hilfe von Verknpfung.
Gerade mal einen Inhalt in seiner Reichweite, schnappt er sich sogleich den nchsten, der von
der Assoziation der Gedanken vorgeschlagen wird, entsprechend einem undurchsichtigen Netz
aus Pfaden, die von den Gehirnzellen getragen werden..
Fr diesen Grundzug menschlichen Denkens und Verstehens stellte sich Bush eine adquate
maschinelle Untersttzung vor. Diese Vorstellung befruchtet bis heute die Begeisterung fr
Hypertext.

Douglas C. Engelbart und sein Augment

Augment ist das Hypertext-System mit der lngsten Vergangenheit. Augment wurde schon ab
1963 am SRI International in Stanford entwickelt, und ab 1978 wurden die kommerziellen
Rechte an Tymshare bertragen.
AUGMENT wurde ursprnglich auf Time-sharing-Grorechnern in einer Netzumgebung entwickelt. Richtungsweisend wurden die eingesetzten Werkzeuge, die den heutigen Standards von Personalcomputern und individuellen Arbeitsplatzrechnern bestimmen: Maus als Eingabemedium,
Mehrfenstertechnik mit 'paralleler' Verarbeitung, ... Verknpfung heterogener Materialien ber Zeiger, intensiver, integrierter Einsatz von Graphik...Engelbart sah die durch AUGMENT zu erzielenden Mehrwerteffekte gegenber linearen Formen wie Bcher in aller Deutlichkeit... AUGMENT war
von Anfang an in eine elektronische Kommunikationsumgebung eingebetttet, die z.B. verteiltes Publizieren und Editieren, elektronische Dokumentauslieferung, elektronische Post, Telekonferenzen
erlauben sollte. (Kuhlen, S.69).
Die meisten Hypertext-Designer der Vergangenheit unterschtzten im Gegensatz zu Engelbart
die Bedeutung des Look and Feel fr den Endanwender. Auch die Entstehung des World Wide
Web hat gezeigt, dass der Durchbruch erst mit den modernen, fr grafische Benutzeroberflchen
verfgbaren Browsern gelang, nicht mit den Ideen und Konzepten allein, so berzeugend diese
auch sein mochten. Engelbart dachte schon an grafische Oberflchen und Muse, als Steve Jobs
und andere, die gemeinhin als die Begrnder der grafischen Benutzeroberflchen gelten, noch
Kinder waren. Doch die Zeit war einfach noch nicht reif fr die grafischen Vorstellungen von
Engelbart. Science-Fiction-Filme aus den 60er Jahren belegen nur allzu deutlich, wie sich die
Menschen die Computer der Zukunft vorstellten: als schrankartige Gebilde, die zwar mhelos
mit Menschen reden knnen, aber ansonsten nur aus Kontrolllmpchen, Knpfchen und
maximal einer Primitivkonsole mit einzeiligem Text-Display bestehen. Engelbarts Bedeutung fr

56

Kapitel 1: Internet und WWW

die Geschichte von Hypertext besteht also vor allem in seiner Erkenntnis, dass Hypertext an
visuell attraktive Darstellungstechniken und ergonomische Interaktionsformen gebunden ist.

Ted Nelson und sein Xanadu

Die Arbeiten von Ted Nelson besser, seine Visionen sind das Fundament heutiger Hypertextforschung und -begeisterung. Nicht nur, dass die beiden Bezeichnungen 'Hypertext' und
'Hypermedia' auf ihn zurckgingen, sondern vor allem seine unkonventionellen und ber Jahrzehnte
verfolgten Ideen eines universalen Wissensverwaltungs- und Informationsbereitstellungssystems,
XANADU, machten ihn zu einem der kreativsten Hypertextforscher. Bemerkenswert an Nelson ist
weiterhin, dass er sich nicht an etablierte Institutionen und kommerzielle Firmen hat binden lassen,
sondern eher immer alternative Wege gegangen ist, verbunden mit einem aufklrerischen Sendungsbewusstsein, das in den letzten Jahren allerdings durchaus die Chance fr konomische Verwertung
gesehen hat (Kuhlen, S.69). Nelsons Xanadu-Idee lsst sich bis ins Jahr 1965 zurckverfolgen.
Seit Ende der 80er und dem Beginn der 90er Jahre wird Xanadu kommerziell vertrieben.
Nelson stellt sich unter Xanadu eine Informationsbank von unbegrenzter Gre vor. Das auch
heute noch utopisch anmutende Endziel ist dabei die Verwaltung des gesamten Weltwissens ber ein
riesiges, computeruntersttztes Begriffsnetz, das den Zugriff auf die entsprechenden informationellen
Einheiten gestattet. Durch die Mglichkeit der simultanen und kollektiven Bearbeitung eines Dokuments soll der tendenzielle Gegensatz zwischen Autor und Leser aufgehoben werden. Die Aufgabe
solcher Systeme beschrnkt sich nicht allein auf die Verwaltung der vielfltigen und komplexen
Beziehungen zwischen einzelnen Hypertexteinheiten. Es sind darber hinaus auch Mechanismen
erforderlich, die bei extensivem Mehrbenutzerbetrieb die Integritt, Aktualitt und auch das Rckverfolgen der Entstehugshistorie eines Dokuments gewhrleisten sowie den Schutz von Urheber-,
Nutzungs- und Vervielfltigungsrechten untersttzen (Kuhlen, S.217). Nelsons Xanadu stellt fr
diese Aufgaben verschiedene Features zur Verfgung.
ber Workstations und leistungsfhige PCs ist der Online-Zugriff auf den Xanadu-Informationsbestand seit 1989/90 mglich. Das System erlaubt neben dem Informationsabruf auch das
Einbinden und Vernetzen eigener Daten in den Informationsbestand. Dabei entscheidet der
Autor, ob es sich um seine privaten Daten (Zugriff nur durch den Autor selbst mglich) oder um
ffentliche Daten (Zugriff fr alle mglich) handelt. Der Online-Zugriff auf den Informationsbestand ist kostenpflichtig. Autoren erhalten computergesteuert Tantiemen, wenn ihre Daten
von anderen Benutzern ber Verweise aufgerufen werden. Auf diese Weise kann jeder Benutzer
zum Autor werden, und jeder Autor ist immer auch Benutzer. Xanadu hlt ferner Werkzeuge
zur Versionenkontrolle von Dokumenten bereit. Es bereitet die gespeicherten Daten fr den
Endbenutzer jedoch nicht selbst auf. Dazu ist eine Front-End-Browsing-Software ntig, die fr
die Bildschirmausgaben sorgt, die Verweise ausfhrt usw.
Damit hat Ted Nelson die Technologie des World Wide Web schon 25 Jahre vor dessen Entstehen vorweggenommen, und seine Konzepte sind zum Teil ausgereifter (z.B. das Tantiemensystem oder die Dokument-Versionenkontrolle). Verstndlicherweise ist Ted Nelson erbost ber
den Siegeszug des Web, der einfach ber ihn hinwegfegte.

Hypertext-Konferenzen
Seit Ende der 80er Jahre ist Hypertext keine Sache einzelner, namhaft zu machender Pioniere
mehr. Die Techniken von Hypertext wurden seit Mitte der 80er Jahre zunehmend in der Praxis

1.5 Hypertext

57

eingesetzt vor allem in der Online-Dokumentation. Hypertext wurde zu einem anerkannten

Gegenstand fr Fachkonferenzen. Die ersten wichtigen Hypertextkonferenzen waren:
1. Hypertext-ACM-Workshop, 1987, University of North Carolina at Chapel Hill
AI (Artificial Intelligence) and Hypertext, 1988
Hypertext I, Aberdeen 1989
Hypertext 89, Pittsburgh, PA
Hypertext II, New York 1990
ECHT (erste europische Hypertext-Konferenz, Paris 1990)
Hypertext/Hypermedia-Fachtagung, Basel 1990

Gegenwart und tiefere Grnde fr Hypertext

Die Ideen von Tim Berners-Lee, aus denen Anfang der 90er Jahre das World Wide Web entstand, sind also nicht im luftleeren Raum entstanden. Hypertext hat eine Tradition. Denn
Hypertext ist eine Konsequenz aus der Vorstellungswelt, die sich im Laufe des 20. Jahrhunderts
herausgebildet und alle Bereiche des modernen Alltags der Industriegesellschaften durchdrungen
hat. Das moderne Leben darin ist gekennzeichnet durch Fragmentierung. Berufsleben, Familienleben, Vereinsleben erfordern verschiedene Rollen von ein und demselben Menschen und
berhren sich nicht oder kaum. Der Broterwerb findet meist woanders statt als dort, wo die
Frchte genossen werden. Auch fr Erholung und Konsum sind Zonen entstanden, die eigens
dafr aufgesucht werden. Der moderne Mensch hat gelernt, Dinge im Leben und im Kopf klar
auseinanderzuhalten. Genau das aber ist das Prinzip der fragmentierten Einheiten, das auch
Hypertext zugrunde liegt. Und Hypertext lsst sich als der Wunsch begreifen, diese fragmentierten Einheiten zumindest wieder sinnvoll zu verknpfen, die Verbindungen zwischen ihnen
sichtbar und ausfhrbar zu machen.
Man kann nur Brcken schlagen zwischen Ufern, die man auseinanderhlt. Schon Friedrich
Nietzsche sah menschliche Strke darin, Gegenstze in sich auszuhalten. Der Mensch hat die
Fragmentierung gewollt, um sich weiterzuentwickeln. Aber ebenso bleibt der Wunsch nach Einheit. Manche versuchen es mit Rckzug in einfache, traditionelle Lebensformen. Und andere
eben damit, dem Gedanken der Vernetzung zu folgen. Sie spinnen das Netz (Weaving the
Web!).

1.5.4 Hypertext und menschliches Verstehen

Vernetzte Texte fr vernetztes Denken
Hypertext scheint unter der Annahme kognitiv plausibel zu sein, dass Wissen im menschlichen
Gehirn in vernetzt topologischen, nichtlinearen Strukturen organisiert sei. Unter dieser Annahme
knnte die Wissensaufnahme ber eine vergleichbare Organisationsform, wie sie durch Hypertext gegeben ist, effizienter sein als eine Aufnahme, die den 'Umweg' ber lineare Prsentationsformen
(Vorlesungen, Texte) nimmt (Kuhlen, S.182).
Wenn der Lernende, so die Argumentation, einen neuen Wissensgegenstand in einer vernetzten
Umgebung kennen lernt, fllt ihm die Einordnung dieses Wissensgegenstandes in sein eigenes,

58

Kapitel 1: Internet und WWW

vernetztes Wissen leichter. Wenn z.B. von dem isolierten Wissensgegenstand Quesenbandwurm Verweise zu Bandwrmer allgemein, Wirte und Zwischenwirte, Bandwrmer bei
Menschen, Drehkrankheit und Krankheiten durch Bandwrmer allgemein fhren, helfen
diese Verweise bei der Einordnung des Quesenbandwurms in das vorhandene Wissen.

Integrationskonflikt bei Netz zu Netz

Gegen die Annahme, dass vernetzte Wissensprsentation die Aufnahme von Wissen erleichtert,
lassen sich zwei Argumente anfhren:
Das erste Gegenargument fhrt ins Feld, dass sich der Hypertext-Leser seine Leselinie erst
selbst bahnen muss, was Zeit und Energie kostet. Wobei die Wissensaufnahme letztlich nicht
anders funktioniert als bei herkmmlichem Text: sie findet..., auch durch die Navigation in
Hypertext, in einer zeitlich sequenziellen Reihenfolge statt, sodass jeder faktische Weg letztlich
doch wieder linear ist (Kuhlen, S.56) siehe hierzu auch das Thema n:m-Relationen und
kohsive Geschlossenheit (Kapitel 1.5.2).
Dem zweiten Gegenargument zufolge ist gerade die Integration von vernetztem Wissen in ein
Wissensnetz problematischer als die Integration einfachen Wissens in das Wissensnetz.
Dahinter steht die Annahme, dass zwei Netze, zumal wenn sie polyhierarchisch strukturiert
sind, schwieriger zu integrieren sind als eine lineare Struktur in ein bestehendes Netz (Kuhlen,
S.56).

Interaktion und Reaktionsspielraum

Fein strukturierte Hypertexte bieten die Mglichkeit, Information nicht nur auf eine Art, sondern auf verschiedene Arten, ber verschiedene Ebenen, in unterschiedlichen Zusammenhngen
zu vermitteln. Der Hypertext-Leser, so die Argumentation, hat also einen Reaktionsspielraum
bei der Informationsaufnahme. Durch Zoomen (Fish-Eye-Views), zwangloses Browsen (Herumstbern), Web-Views usw. kann er in Interaktion mit dem Hypertext-System verschiedene
Strategien ausprobieren, um bei Verstehensprozessen zu den gewnschten Aha-Effekten zu
gelangen.
Denn jeder kennt den Effekt: Man versteht etwas nicht, obwohl man es ausfhrlich erklrt
bekommt. Und pltzlich versteht man es ohne viel Erklrung, einfach, weil man den gesuchten
Bezugspunkt, das vermisste Stichwort, die individuelll richtige Stelle zum Einordnen ins eigene
Gedchtnis gefunden hat.

Unkontrollierte Informationsaufnahme
Gegen Mehrschichtigkeit und Angebotsflle von Hypertexten wird im Zusammenhang mit
Wissenserwerb folgendes Gegenargument angebracht: Der Lernende befindet sich in einem
anomalous state of knowledge (Brooks). In dieser unsicheren Situation ist das Angebot der
freien Navigation gerade das Verkehrte. Gerade in diesem Zustand, in dem der Lernende den
Stoff noch nicht berschaut, noch nicht viel versteht, noch nicht entscheiden kann, welche
Information wichtig und welche unwichtig ist, muss das vermittelnde Medium (Lehrer, Professor, Buch) die Kontrolle bernehmen. Hypertext verlockt zu freiem Navigieren und damit zu
Ablenkung, zu unkontrollierter Informationsaufnahme.

1.5 Hypertext

59

Vom Hundertsten ins Tausendste: Vor- und Nachteile

Vom Hundertsten ins Tausendste kommen ist eine Redewendung mit negativer Bedeutung.
Abstrahiert man diese jedoch, bedeutet die Redewendung einfach, dem freien Fluss der Gedanken
zu folgen, ohne sich rationalen oder sonstigen Beschrnkungen zu unterwerfen. Hypertext
untersttzt diese Art zu denken. Ein Vorteil scheint diese Art zu denken in zwei Situationen zu sein:
Zu Beginn der Beschftigung mit einem neuen Gebiet. In diesem Stadium untersttzt die freie
Navigation das Erwachen von Interesse und damit die geistige Bereitschaft, sich nher auf das
Gebiet einzulassen.
In einem fortgeschrittenen Stadium des Wissens. Wer sich auf einem Gebiet erst einmal auskennt, wird die Mglichkeiten von Hypertext gezielt und souvern nutzen knnen, da er
wei, wonach er sucht, wenn er ein solches System benutzt.
Ein Nachteil ist die von Hypertext favorisierte Art zu denken whrend der konzentrierten Wissensaufnahme, whrend des Lernstadiums, whrend jener Phase, in der sich der Aufnehmende
mentale Modelle vom aufgenommenen Wissen macht. In dieser Phase sind Ablenkung und
Angebotsflle nur hinderlich. Um diese Phase der Informationsaufnahme elektronisch zu untersttzen, kann Hypertext allerdings die Technik der Guided Tours anbieten (Kapitel 1.5.2).

Studien zu Hypertext
Die Schnotz-Studie (1987) untersucht die Wirkung von kontinuierlichen kontra diskontinuierlichen Texten auf den Lernerfolg. Das vermittelte Wissen war in beiden Fllen das gleiche. In den
diskontinuierlichen Texten wurde der Textzusammenhang, d.h. alle argumentativen, verbindenden Strukturen entfernt. Die Studie, die an 34 Studenten durchgefhrt wurde, ergab, dass die
Gesamtinformation durch den kontinuierlichen Text tendenziell besser vermittelt wurde als
durch die diskontinuierliche Version. Eine differenzierte Auswertung ergab: Personen mit hherem Vorwissen ziehen aus diskontinuierlichen Texten greren Nutzen. Personen mit geringerem Vorwissen bevorzugen eindeutig kontinuierliche Texte. Die Schnotz-Studie war jedoch
nicht als Vergleich von Hypertext und Text ausgelegt. Die Kohrenz und Kontinuitt schaffende
Leistung von Verweisen in Hypertexten wurde nicht bercksichtigt. Auf technische Dokumentation bertragen, knnte man sagen, dass die Studie eher den Unterschied zwischen Tutorial und
Referenz untersucht hat. Die Intermedia-Studie (1987) bezieht sich auf zwei Kurse, einen ber
englische Literatur, und einen ber Biomedizin. Zu beiden Kursen wurde das Lehrmaterial mit
dem Softwareprodukt Intermedia als Hypertext organisiert. Die Ergebnisse der Studie waren
keine Messungen des Lernerfolgs, sondern Auswertungen der Einschtzungen befragter Studenten. Die Hypertext-Untersttzung wurde insgesamt als wertvoller angesehen als die Untersttzung durch konventionelle Lehrmaterialien. Die Streuung zeigt allerdings, dass die Bewertungen
von much better bis much worse reichen. Bei den Biomedizinern war die Resonanz positiver
als bei den Literaturstudenten. Nach Aussagen der Dozenten wurden bei den Abschlussprfungen deutlich hhere Leistungen erzielt. Weitere Studien zum Thema:
Gordon u.a. prsentierten 1988 insgesamt 24 Studenten technische Texte am Bildschirm, und
zwar jeweils in einer linearen und einer nicht-linearen Version. Tests zu den behaltenen Fakten ergaben eine Prferenz zugunsten der linearen Darbietung.
McKnight/Dillon/Richardson prsentierten Versuchspersonen einen Text (HYPTEXTduction to wines) in vier Versionen: Zwei linearen (Papier und Texteditor) sowie zwei nicht-

60

Kapitel 1: Internet und WWW

linearen (Hypertext-Softwareprodukte HyperTIES und Hypercard). Tests zu den behaltenen

Fakten ergaben auch hier Prferenzen zugunsten der linearen Textprsentation.
Weitere Studien von Allinson/Hammond (1988/89) und Vickers/Gaines (1988) gehen der Frage
nach, wie eine Hypertext-Basis beschaffen sein muss, um Lernen effektiv zu untersttzen.

Resume: Hypertext und menschliches Verstehen

Naive berhhung des Mediums Hypertext ist sicher unbegrndet. Zu allen Argumenten fr das
neue Medium lassen sich Gegenargumente finden. Empirische Studien ergeben ein uneinheitliches Bild: zum Teil zugunsten von Hypertext, zum Teil zugunsten linearer Wissensdarbietung.
Am erfolgreichsten wird Hypertext derzeit in der technischen Dokumentation eingesetzt. Das ist
nicht weiter verwunderlich, denn technische Dokumentation ist eine Sorte Literatur, die kaum
jemand gerne freiwillig von vorne bis hinten liest. Auch in der HTML-Version dieses Buchs,
werden Sie Kapitel finden, die Sie sicherlich nicht auf die gleiche Weise lesen werden wie Sie es
hier in der Einfhrung vielleicht tun. Hypertext spielt immer dann seine Strken aus, wenn sich
der darzustellende Inhalt sinnvoll fragmentieren lsst. Ein gewaltsames Fragmentieren jeglicher
Inhalte nach dem Motto aber es soll doch Hypertext sein! wird dagegen sein Ziel verfehlen.
HTML, das Basisformat fr Web-Seiten, zwingt Sie nicht zu gewaltsamer Fragmentierung,
erlaubt sie jedoch. Insofern sind Sie bei der Informationsverteilung auf Web-Seiten frei und
knnen selbst entscheiden, in welchem Ausma Sie Inhalte fragmentieren. Die Art der jeweiligen
Inhalte sollte dabei das Ma sein. Wenn sich Inhalte gut fragmentieren lassen, dann sollte das
Web-Design solcher Inhalte die Mglichkeiten von Fragmentierung und Vernetzung auch nutzen. Bei Inhalten, die sich nicht sinnvoll fragmentieren lassen, darf ein Text dagegen ruhig ein
zusammenhngender Text bleiben.

1.6

Hilfsmittel

1.6.1

Dokumente und Dokumentationen

Die Flle der Techniken und Technologien, die im Web und im Internet allgemein kursieren und
eingesetzt werden, ist gewaltig. Kein Mensch ist in der Lage, alles, was dazugehrt, zu kennen und
zu beherrschen. Es ist deshalb essentiell wichtig, dass alle eingesetzten Techniken und Technologien
mglichst gut und vollstndig dokumentiert sind, und dass diese Dokumentationen offen
zugnglich und einsehbar sind. Technische Dokumentation ist im Internet das Salz der Erde. Ohne
Dokumentation gbe es kein Internet denn die Techniken und Technologien allein wrden an
die Kpfe derer gebunden bleiben, die sie beherrschen, sich nicht verbreiten und schnell in
Vergessenheit geraten. Dokumentation ist also die Schriftkultur des Internet und die Basis fr die
Stabilitt des Internet. Die meisten Menschen, die sich wirklich tiefer auf das Internet einlassen,
begreifen das auch frher oder spter. In den Jahrzehnten, die das Netz nun schon an Erfahrung
gewinnen konnte, haben sich gewisse Standards beim Dokumentieren etabliert. Das betrifft sowohl
die Art und Weise der Beschreibungen, als auch den Verbindlichkeits-Charakter.
Als Entwickler von Web-Seiten werden Sie kaum mit einer Dokumentation wie der vorliegenden
alleine auskommen, auch wenn diese noch so umfangreich und ausfhrlich erscheinen mag.
Denn es gibt einerseits Dokumente, die spezielle Themen einfach vollstndig behandeln, was im

1.6 Hilfsmittel

61

Rahmen einer bergreifenden Dokumentation wie der vorliegenden niemals mglich ist. Und
andererseits gibt es Dokumente, die einen hheren Verbindlichkeits-Charakter haben als die
Dokumentation, die Sie hier lesen. Denn nicht, was hier steht, ist beispielsweise der Mastab
dafr, wie HTML auszusehen hat, sondern das, was in dem dafr vorgesehenen offiziellen
Dokument des W3-Konsortiums steht. Die verschiedenen Dokumentationsformen haben alle
ihren Zweck und ihre Daseinsberechtigung. Aber Sie sollten die Unterschiede kennen und wissen, welche Dokumentationsform welche Aufgaben hat. Und schlielich mssen Sie natrlich
auch wissen, wie Sie an die entsprechenden Dokumente herankommen.
Praktisch alle wichtigen Dokumente im Internet liegen in englischer Sprache vor. Viele davon
sind auch nicht in bersetzungen verfgbar, und wenn, dann gelten die englischsprachigen Versionen als die normative Grundlage. Der Einsatz automatischer bersetzungshilfen fhrt bei solchen Texten in der Regel zu erheiternden Momenten, hilft aber beim Verstndnis der Texte
kaum weiter. Gute Kenntnisse der englischen Sprache sind also eine wichtige Voraussetzung, um
die Originaldokumente lesen zu knnen.

Recommendations des W3-Konsortiums

Das W3-Konsortium ist ein unabhngiges, sich selber berwachendes Gremium fr die technischen Standards im Web. Recommendations (Empfehlungen) des W3-Konsortiums sind Dokumente mit dem hchsten im Web verfgbaren Verbindlichkeits-Charakter. Es handelt sich um
technische Beschreibungen einzelner Web-Technologien wie beispielsweise HTML, CSS oder
XML. Die Recommendations haben die Aufgabe, die jeweilige Technologie vollstndig und unmissverstndlich darzustellen. Die Zielgruppen dieser Beschreibungen sind einerseits Web-Autoren, aber auch Software-Hersteller, z.B. von Web-Browsern, die angehalten sind, diese Standards
so genau und vollstndig wie mglich in ihren Produkten zu implementieren. Der Anspruch der
Exaktheit und Vollstndigkeit macht die Recommendations fr Anfnger nicht unbedingt zu
einer leichten Lektre. Denn nicht selten leidet die Allgemeinverstndlichkeit unter den Zwngen der Terminologie. Das W3-Konsortium ist sich aber bewusst, dass diese Dokumente zum
Teil auch von weniger spezialisierten Leuten und Nicht-Informatikern gelesen werden oder
gelesen werden mssen. Die neueren Recommendations sind daher reichhaltiger erluternd als
die frheren. Auch mit erhellenden Beispielen wird nicht mehr so gespart.
Jede Recommendation durchluft ein lngeres Verfahren, in dessen Verlauf das Dokument
mehrmals von verschiedenen Seiten gereviewt wird. Aus losen technischen Notizen entstehen
zunchst Working Drafts (Arbeitsentwrfe), von denen es eine oder mehrere geben kann.
Arbeitsentwrfe lassen das geplante End-Dokument bereits gut erkennen. Verbindlich sind sie
jedoch noch nicht. Nach diversen Reviews innerhalb der Arbeitsgruppe und nach Abstimmung
mit der Interessengruppe erlangt das Dokument schlielich den Status eines Candidate Recommendation (Empfehlungskandidat). In diesem Stadium wird noch Feedback aus der ffentlichkeit erwartet und gegebenenfalls eingearbeitet. Daraus entsteht die Proposed Recommendation
(Empfehlungsvorschlag). Nach einem abschlieenden Review erhlt das Dokument schlielich
den Status einer offiziellen Recommendation.
Die Entwicklung der jeweiligen Technologie ist damit natrlich nicht abgeschlossen. Es handelt sich
lediglich um festgeschriebene Entwicklungsstadien, damit Entwickler Fixpunkte haben, an die sie
sich halten knnen. Die Recommendations erhalten aus diesem Grund Versionsnummern, hnlich
wie bei Software-Produkten blich. So gibt es beispielsweise HTML 4.01, CSS 2.0 oder XML 1.0.
Fr neue Dokumentversionen wird das Review-Verfahren ganz oder teilweise wiederholt. Smt-

62

Kapitel 1: Internet und WWW

liche Recommendations des W3-Konsortiums, auch in ihren vorausgehenden Review-Stufen,

sind ber folgende Web-Adresse erreichbar:
www.w3.org/TR/
Das TR steht dabei fr Technical Reports (technische Berichte). Smtliche Dokumente werden
in englischer Sprache verffentlicht, und die englischsprachige Version ist die normative
Version. Viele der Dokumente sind aber auch bereits in andere Sprachen bersetzt worden,
auch ins Deutsche. ber die folgende Adresse knnen Sie verfgbare bersetzungen aufrufen:
www.w3.org/Consortium/Translation/
Alle wichtigen Recommendations des W3-Konsortiums liegen im HTML-Format vor und
knnen von den Web-Seiten des W3-Konsortiums in gezippter Form downgeloadet werden.
Auf diese Weise kann sich jeder Web-Entwickler lokale Kopien derjenigen Dokumente besorgen, die er fr seine tgliche Arbeit bentigt. Wenn Sie sich ernsthaft mit HTML, CSS,
XML usw. beschftigen wollen, ist es dringend zu empfehlen, sich diese Dokumente zu besorgen und sich damit zu beschftigen.

Requests For Comments (RFCs)

Whrend die Recommendations des W3-Konsortiums speziell fr das World Wide Web gelten,
gibt es auch Dokumente fr technische Standards im Internet allgemein. Das Verfahren fr diese
Standards ist nicht ganz so straff organisiert wie es durch die Organisation des W3-Konsortiums
mglich ist. Doch das Verfahren hat sich bewhrt, und die Dokumente gelten fr Entwickler als
verbindliche Grundlagen.
Die Requests for Comments (RFCs) (wrtlich: Antrag auf Kommentierung) sind der Dokumenttyp fr solche Beschreibungen. Die Sammlung der RFCs wird seit den Anfangstagen des
ARPANET, also seit 1969, gefhrt. Neue RFCs erhalten fortlaufende Nummern. So entstehen
Dokumentnamen wie RFC 959 oder RFC 1867. Einer der RFCs, der RFC mit der Nummer 1543,
beschreibt, wie RFCs auszusehen haben. Denn nur wenn ein einheitliches Schema eingehalten
wird, ist sichergestellt, dass die RFCs eine gleichbleibende Qualitt haben. Verwaltet werden die
RFCs heute von der Organisation Internet Engineering Task Force (IETF, www.ietf.org/).
Jeder Internet-Teilnehmer kann zu neuen RFCs beitragen. Wer einen neuen Standard vorschlagen
mchte, z.B. ein bestimmtes Dateiformat oder ein bestimmtes technisches Ablaufverfahren, der
kann einen so genannten Internet Draft (Internet-Entwurf) verfassen. Dabei hlt er sich bereits an
die in der RFC 1543 festgelegten Regeln, wie die Beschreibung auszusehen hat. Den fertigen Internet-Draft reicht er bei der IETF-Organisation ein. Dort gibt es eine Mailing-Liste, die alle an technischen Standards interessierten Internet-Teilnehmer abonnieren knnen. Neue Internet-Drafts
werden in dieser Mailing-Liste bekannt gemacht und knnen diskutiert werden. Aus den Diskussionen ergeben sich in der Regel noch Korrekturen, Verbesserungsvorschlge usw., die der Verfasser der Internet Draft in sein Dokument einbringt. Nach einer angemessenen Diskussionsphase
entscheidet schlielich die IETF-Organisation darber, ob das Dokument ein offizieller RFC wird.
Wenn ja, erhlt es eine RFC-Nummer und wird in die Sammlung der RFCs aufgenommen.
RFCs enthalten viel Wissen, mitunter aber auch persnliche Ansichten der Autoren oder humorvolle Passagen. Viele wichtige defacto-Standards im Internet, etwa das HTTP-Protokoll oder die
MIME-Technik fr E-Mails, liegen in Gestalt einer oder mehrerer RFCs vor. Aus RFCs sind auch
schon hufig Teile von W3C-Recommendations hervorgegangen. So liegen etwa den heute im

1.6 Hilfsmittel

63

HTML-Standard verankerten Elementen fr Multimedia-Objekte oder Tabellen ursprnglich

RFCs zugrunde.
RFCs sind im Original reine Textdateien und durchgngig in englischer Sprache verfasst. ber
die Web-Adresse rfc.net knnen Sie die aktuelle Sammlung der RFCs aufrufen. Im deutschen
Internetraum werden die RFCs ebenfalls angeboten, z.B. von der FH Kln. Diese bietet die RFCs
im HTML Format an (rfc.fh-koeln.de/rfc.html). Es ist sehr empfehlenswert, sich die Liste der RFCs
mal in Ruhe anzusehen und einzelne RFCs daraus aufzurufen. Als Web-Entwickler sollten Sie den
Dokumenttyp der RFCs kennen und wissen, dass in dieser Sammlung etliche Standards beschrieben sind, die Sie mglicherweise mal brauchen.

Frequently Asked Questions (FAQs)

Frequently asked questions (hufig gestellte Fragen) sind keine offiziellen Dokumente in dem
Sinn, dass sie von einer Organisation herausgegeben und verwaltet werden. Es handelt sich einfach um einen Dokumentationstyp, der sich im Internet etabliert hat und eine lange Tradition
hat. Es gibt FAQs zu allen nur erdenklichen Themen von Tieren ber Politik und Religion bis
hin zu technischen Fragen zum Internet. Im Web gibt es unter der Domain faqs.org eine Sammelstelle fr FAQs. Es handelt sich dabei um eine Sammlung mit Verweisen zu FAQs.
FAQs basieren auf Fragen, die in Mailing-Listen, Newsgroups oder Foren eben berall dort, wo
Internet-Teilnehmer sich gegenseitig austauschen knnen immer wieder auftauchen und gestellt werden. Eine beliebte Frage in Foren fr Web-Seiten-Entwickler lautet beispielsweise: wie
programmiere ich einen Passwortschutz fr meine Seiten?. Anstatt eine Dokumentation zu
schreiben, die sich inhaltlich in Kapitel, Themen, Unterthemen usw. aufgliedert, enthlt eine
FAQ als Unterberschriften genau diese Fragen, als Frage formuliert. Unterhalb davon wird
dann eine ordentliche und zielfhrende Antwort gegeben. In den Diskussionsbereichen, wo solche Fragen immer wieder auftauchen, knnen die alten Hasen dann, bevor sie nervlich explodieren, weil die gleiche Frage schon zum dritten mal innerhalb von zwei Tagen gestellt wurde,
einfach auf die FAQ verweisen. FAQs sind deshalb mittlerweile auch meistens im Web in Form
von Web-Seiten verfgbar denn das ist die bequemste Form, den Fragesteller direkt auf die
Antwort zu seiner Frage zu verweisen.
Gerade wenn Sie im Netz auf der Suche nach Support sind und sich noch nicht sonderlich auskennen, sollten Sie auf jeden Fall folgsam sein, wenn man Sie auf eine FAQ verweist. Denn FAQs
sind aus der Praxis entstanden und tragen dazu bei, dass sich Hilfestellungen auf Probleme konzentrieren knnen, die nicht so alltglich sind.

Anbieter-Dokumentationen
Alle Web-Technologien, die nicht vom W3-Konsortium standardisiert werden, sind trotzdem
irgendwo im Original dokumentiert. Denn hinter solchen Technologien, sei es nun Java, Perl,
PHP usw., stecken Anbieter, die ein Interesse an der Verbreitung ihrer Technologie haben.
Verbreiten kann sich eine Technologie aber nur, wenn sie ordentlich dokumentiert ist. Deshalb
finden Sie normalerweise auf den Web-Seiten der Technologie-Anbieter die verbindlichen Dokumentationen fr die jeweilige Technologie. Wichtig sind fr Web-Entwickler auch die Entwickler-Seiten der groen Browser-Anbieter. Die beiden folgenden Angebote sollte jeder, der
sich mit dem Erstellen von Web-Seiten beschftigt, kennen:

64

Kapitel 1: Internet und WWW

Entwickler-Seiten von Netscape (developer.netscape.com/)

Dort finden Sie beispielsweise die Original-Dokumentationen zu JavaScript, aber auch
Informationen, welche HTML-Elemente von welcher Netscape-Version untersttzt werden.
Zahlreiche technische Notizen und Artikel verraten bestimmte Tricks und Kniffe, wie man so
programmiert, dass der Netscape-Browser es korrekt interpretiert.
Entwickler-Seiten von Microsoft (msdn.microsoft.com/)
Dort finden Sie beispielsweise die Original-Dokumentationen zu JScript, der MicrosoftImplementierung von JavaScript. Ein wenig suchen mssen Sie allerdings, denn dort werden
auch andere Technologien beschrieben, die nichts mit Web-Entwicklung zu tun haben. Der
Informationsbestand ist gewaltig.

Freie Dokumentationen
Freie Dokumentationen sind solche wie die, die Sie gerade lesen. Solche Dokumentationen knnen von jedem Autor, der sich dazu bemigt fhlt, im Netz verffentlicht werden. Es gibt
jedoch keinerlei kontrollierende Instanz dafr, und deshalb gibt es auch keine Garantie dafr,
wie vollstndig und sachlich richtig solche Beschreibungen sind. In der Regel entscheidet allerdings die Netzgemeinde ber den Wert solcher Dokumentationen. Gute Dokumentationen werden von vielen anderen Web-Seiten aus verlinkt, werden dadurch immer bekannter und erreichen auf diese Weise den Status einer anerkannt brauchbaren Informationsquelle.
Eine wichtige Aufgabe der freien Dokumentationen ist es vor allem, das Wissen ber Technologien in die einzelnen Landessprachen zu tragen. Denn gerade Anfnger tun sich nun mal leichter
damit, eine neue, komplizierte Materie erst mal in der eigenen Sprache vermittelt zu bekommen.
Und Menschen, die des Englischen nicht oder kaum mchtig sind, haben gar keine andere Wahl,
als das Wissen ber vermittelnde Quellen der eigenen Sprache zu erwerben. Im Linkverzeichnis
des Online-Angebots von SELFHTML bei selfaktuell.teamone.de aktuell finden Sie aktuelle
Verweise auf freie Dokumentationen in folgenden Seiten.

Bcher
Wenn Sie die EDV-Fachabteilung einer Grostadt-Buchhandlung betreten, knnen Sie so viele
Bcher rund um Themen zum Entwickeln von Web-Seiten mit nach Hause nehmen, dass Sie
mehrere Regalwnde damit fllen knnen. Vorausgesetzt, der Geldbeutel lsst es zu, denn preiswert sind solche Fachbcher fast nie. Dafr sind viele dieser Bcher schlecht. Aber nicht alle,
manche sind auch hervorragend. Der Grund, warum es so viele schlechte Computer-Fachbcher
gibt, liegt darin, dass es einerseits einen riesigen Lesermarkt fr diese Fachliteratur gibt, aber
nicht gengend Autoren mit echtem Tiefenwissen. Es gibt zwar jede Menge gute Programmierer und Fachleute mit dem ntigen Wissen, doch die sind meistens mit Projekten ausgelastet und
auch oft nicht in der Lage, ein Buch zu schreiben. Also suchen die EDV-Verlage, den groen
Absatzmarkt im Auge, oft hnderringend nach Autoren und gehen dabei nicht selten das Risiko
ein, einen Titel zu produzieren, bei dem die Qualitt zu kurz kommt. Meistens haben die Autoren auch nicht mehr als zwei, drei Monate Zeit, um Bcher von mehreren hundert Seiten aus
dem Boden zu stampfen. Das verleitet natrlich dazu, woanders abzukupfern, ohne den Stoff
wirklich zu durchdringen, Inhalte mit Fllmaterial zu strecken, uneinheitliche Terminologie
zu verwenden usw. vor allem dann, wenn der Autor nicht aus einem vorhandenen Praxiswissen schpfen kann, sondern sich whrend der Erstellungsphase die Materie selber erst erarbeiten

1.6 Hilfsmittel

65

muss. Viele Bcher werden auch fr den schnellen Markt produziert, d.h. sie werden ein paar
Monate vom Verlag lang stark beworben, und dann verschwinden sie wieder, weil die Kalkulation des Verlags aufgegangen ist und ein weiteres Bewerben zu aufwendig wre.
Bevor Sie sich Fachbcher anschaffen, sollten Sie daher nach Rezensionen suchen. Ganz hervorragend dazu geeignet sind die groen Internet-Buchanbieter wie Amazon (www.amazon.de/).
Auch wenn Sie lieber in einer realen Buchhandlung kaufen, lohnt es sich, dort Vorab-Informationen einzuholen. Denn Leser knnen dort zu Bchern, die sie gelesen haben, Rezensionen
schreiben. Bei vielen Bchern kommen auf diese Weise mehrere Rezensionen zusammen, die
sehr authentisch sind, weil sie unmittelbare Erfahrungen von Lesern widerspiegeln. Suchen Sie
einfach nach Bchern zu einem gewnschten Thema, z.B. zu Bchern ber HTML oder Perl,
und lesen Sie, was andere darber zu berichten wissen. Das ist zumindest sinnvoller, als sich nur
von den Klappentexten der Bcher leiten zu lassen.
Generell lsst sich sagen, dass Fachbcher um so besser werden, je ausgereifter eine Technologie
ist. Wenn neue, von der Fachszene als bedeutsam eingeschtzte Technologien entstehen, wie es
in den letzten Jahren beispielsweise bei Java oder XML der Fall war, dann berstrzen sich viele
Verlage geradezu, um bei den ersten zu sein, die etwas zu dem betreffenden Thema publizieren.
Was dabei herauskommt, ist aber fast immer Mangelware, da die Technologien meist selber
noch nicht ordentlich dokumentiert und noch in Entwicklung begriffen sind. In solchen Phasen
ist es allemal besser, sich an kostenlose Dokumente im Internet zu halten. Ist eine Technologie
dagegen gut eingefhrt und etabliert, wie es mittlerweile etwa bei HTML der Fall ist, dann gibt es
in der Regel auch ausgereifte Fachbcher dazu.

1.6.2

Software

Allgemeines zu Software fr Web-Entwickler

Das wichtigste, was es zum Thema Software in Bezug auf das Entwickeln von Web-Seiten zu
sagen gibt, ist, dass es die Software nicht gibt und hoffentlich auch nie geben wird. Lediglich
bei proprietren Technologien wie Flash sind Sie auf bestimmte Software-Produkte angewiesen.
Alle internet-genuinen Technologien sind dagegen bewusst software-unabhngig ausgelegt. Das
hat gute Grnde. Im Internet treffen alle nur erdenklichen Betriebssysteme und Rechnertypen
aufeinander, und Technologien, die fr alle verfgbar sein sollen, haben keine groe Chancen,
wenn sie systemspezifisch sind oder spezielle Anforderungen stellen, die Teile der Internet-Nutzer ausschliet.
Die Software-Unabhngigkeit der Technologien fhrt auch dazu, dass Software-Hersteller keine
Kundenbindung mehr ber Dateiformate erzwingen knnen und dem Kunden dafr unflexible
und unpraktische Anwendungsoberflchen zumuten. Software-Produkte knnen sich bei software-unabhngigen Daten nur dadurch gegenber der Konkurrenz profilieren, indem sie den
Anwender durch mehr Effizienz, bessere bersichtlichkeit und eine intelligentere Oberflche
berzeugen. Software-Hersteller werden dadurch gezwungen, sich mehr Gedanken ber Anwender-Ergonomie und intelligentes Oberflchen-Design zu machen.
Immer wieder treten Software-Produkte allerdings mit dem Anspruch an, dem Anwender ein
Rundum-Sorglos-Paket zu anzubieten, das ihm das Erstellen, Verwalten und berwachen der
eigenen Web-Seiten mit dem Zusatz kinderleicht und ohne tiefere Kenntnisse bedienbar
anpreist. Das stimmt aber meistens nicht. Gerade solche Software-Pakete sind meist hoffnungs-

66

Kapitel 1: Internet und WWW

los mit Funktionen, Mens, Assistenten und Dialogen berladen. Der Anwender verbringt dann
erst mal viel Zeit damit, sich den Umgang mit der Software anzueignen. Diese Zeit knnte in
vielen Fllen sinnvoller darin investiert werden, sich direkt mit den dahintersteckenden Technologien zu beschftigen.
Genauso dumm ist jedoch die Behauptung, sauber arbeiten knne man nur mit archaischen
Werkzeugen wie dem Windows-Notepad-Editor oder der FTP-Kommandozeile. Software ist
dazu da, um Aufgaben zu erleichtern, und wo sie das tut, ist sie auch angebracht. Es gibt eine
Menge ausgereifter Tools, die beim Erstellen von Web-Seiten Zeit sparen und Fehler vermeiden
helfen. Es ist jedoch sinnlos, bestimmte Produkte zu empfehlen. Denn der persnliche Arbeitsstil
und die Einschtzung des Look and Feel einer Software sind von Mensch zu Mensch verschieden. Verschiedene Produkte einmal auszuprobieren und zu versuchen, damit warm zu werden,
bleibt Ihnen nicht erspart. Glcklicherweise sind die meisten Produkte, auch wenn sie kostenpflichtig sind, als Ausprobierversion im Internet downloadbar. So knnen Sie ein Produkt
unverbindlich testen, bevor Sie sich entschlieen, es zu erwerben. Von dieser Mglichkeit sollten
Sie unbedingt Gebrauch machen.
Im Linkverzeichnis des Online-Angebots von SELFHTML aktuell bei selfaktuell.teamone.de oder
auf der Buch-CD finden Sie aktuelle Verweise zu Software-Anbietern.

HTML-Editoren
Grundstzlich kann man bei HTML-Editoren zwischen quelltextbasierten Editoren und
WYSIWYG-Editoren unterscheiden (WYSIWYG = What You See Is What You Get Was Sie
sehen ist das was rauskommt). Bei quelltextbasierten Editoren arbeiten Sie direkt mit den HTMLAuszeichnungen. Solche Editoren verfgen in der Regel ber eine Werkzeugleiste und diverse
Menbefehle oder Dialoge, um die HTML-Auszeichnungen in den Text einzufgen. Die HTMLAuszeichnungen erscheinen sichtbar im Text, in der Regel andersfarbig und optisch gut erkennbar dargestellt (Syntax-Highlighting). WYSIWYG-Editoren bieten ebenfalls Werkzeugleisten,
Menbefehle und Dialoge an, um das Setzen der HTML-Auszeichnungen zu untersttzen. Der
Unterschied ist jedoch, dass die Auszeichnungen nicht angezeigt werden (bzw. nur auf Wunsch).
Stattdessen wird der Text bereits so am Bildschirm angezeigt wie spter im Web-Browser. Das
bedeutet aber umgekehrt nicht unbedingt, dass der Text nachher in allen Web-Browsern
genauso erscheint wie im Fenster des Wysiwyg-Editors Wysiwyg ist eigentlich eine gefhrliche Irrefhrung und ein Versprechen, das nur schwer einhaltbar ist angesichts der BrowserVielfalt und der vielen Tcken in den Browsern.
Lassen Sie sich nicht zu sehr von dem hufig anzutreffenden Glaubenskrieg zwischen Anhngern
und Gegnern der WYSIWYG-Editoren beeindrucken. Versuchen Sie herauszufinden, womit Sie
persnlich am besten arbeiten knnen.

Web-Browser
Web-Browser sind Visualisierungsprogramme fr Web-Seiten. Web-Browser beherrschen das
HTTP-Protokoll und knnen mit Web-Servern kommunizieren, um etwa die Daten einer WebAdresse anzufordern. Alle Web-Browser beherrschen mehr oder weniger gut HTML, die meisten
mittlerweile auch die ergnzenden Technologien CSS und JavaScript, allerdings uneinheitlich
vollstndig. Server-seitig dynamische Anwendungen wie CGI-Scripts oder PHP-Anweisungen
sind fr Browser unproblematisch, solange sie HTML-Code fr den Browser erzeugen. Groe

1.6 Hilfsmittel

67

Unterschiede gibt es dagegen noch bei der Untersttzung von Multimedia. Mit Web-Browsern
knnen Sie auch offline HTML-Dateien auf Ihrem Rechner ffnen. Das ist z.B. wichtig, wenn Sie
Web-Seiten lokal und ohne Internetverbindung austesten wollen.
Als Entwickler von Web-Seiten sollten Sie nicht nur einen Browser auf Ihrem Rechner installiert
haben, sondern so viele Produkte wie nur mglich. Mit welchem Browser Sie persnlich am
liebsten surfen, bleibt Ihnen berlassen. Aber die Besucher Ihrer Seiten verwenden nun mal
unterschiedliche Produkte, und deshalb sollten Sie Ihre Seiten stets mit mehreren Produkten
berprfen. Denn leider gibt es immer noch viele rgerliche Unterschiede zwischen den Browsern im Detail. Und Ihr Ehrgeiz sollte sein, attraktive Web-Seiten anzubieten, die aber trotzdem
keine Anwender ausschlieen, nur weil diese nicht den gleichen Browser verwenden wie Sie selbst.

XML-Werkzeuge
Viele HTML-Editoren sind nicht nur fr HTML geeignet, sondern auch gut als Texteditoren fr
andere Sprachen verwendbar. Dennoch gibt es spezielle XML-Editoren, da es beim Bearbeiten
von XML-Daten hufig auf andere Dinge ankommt als beim Bearbeiten von HTML-Daten.
Denn XML hat zunchst mal nichts mit Seiten-Layouts zu tun. Und XML-Daten mssen auch
keine textorientierten Daten sein. Ebensogut lassen sich mit XML auch grafische, akkustische
oder formale Daten beschreiben. Dabei kommt es strker darauf an, die Baumstruktur der Daten
optimal dargestellt zu bekommen, und bei Verwendung von DTDs (Dokumenttyp-Definitionen,
deren Regeln die eingegebenen Daten entsprechen mssen) ist es hilfreich, wenn der Editor gar
keine Eingaben zulsst, die nicht den Regeln entsprechen.

FTP-Programme
Um die Dateien eines Web-Projekts ins Web auf den Server zu laden, wo Sie Speicherplatz zur
Verfgung gestellt bekommen haben, brauchen Sie in der Regel Software, die das File-TransferProtokoll (FTP) untersttzt. Mit solchen Programmen knnen Sie ihre Projektdateien hochladen und auf dem Server-Rechner verwalten (umbenennen, lschen usw.). Die meisten modernen FTP-Programme unterscheiden sich uerlich kaum von allseits bekannten Datei-Commandern oder Explorern. In einem Bereich zeigen sie die lokale Verzeichnisstruktur an, in einem
anderen Bereich die Verzeichnisstruktur des aufgerufenen Server-Rechners. Durch Markieren
und Ziehen mit der Maus lassen sich Dateien uploaden oder downloaden. Ebenso einfach lassen
sich Dateien lschen oder umbenennen. FTP-Programme verfgen in der Regel auch ber eine
Site-Verwaltung. Dort knnen Sie fr jede benutzte FTP-Adresse die Zugangsdaten und
technische Einstellungen speichern.

Grafikprogramme
Grafikprogramme sind eine wichtige Ergnzung zum Erstellen aussagekrftiger Web-Seiten. Es
gibt eine Reihe guter bis hervorragender Shareware-Programme zum Erstellen, Konvertieren
und Nachbearbeiten von Grafiken. Wer professionelle grafische Ansprche hat, wird allerdings
kaum um ein teures Profi-Programm herumkommen, und sei es nur fr Spezialaufgaben. Auf
jeden Fall mssen die eingesetzten Programme die Dateiformate GIF und JPEG untersttzen,
denn das sind die verbreiteten Grafikformate im Web, die praktisch alle Browser direkt anzeigen
knnen. Zum Entstehungsprozess einer Grafik tragen jedoch auch hufig auch andere Programme bei, etwa vektor-orientierte Programme oder Raytraycing-Programme.

68

Kapitel 1: Internet und WWW

Diverse Tools
Es gibt eine Menge anderer Programme und Software-Typen, die Web-Entwickler sinnvoll einsetzen knnen. Dazu gehren auf jeden Fall Standard-Tools wie Pack- und Entpackprogramme
fr Dateiformate wie ZIP, RAR usw. Denn oft werden Sie beispielsweise Daten Ihres Web-Projekts per E-Mail bertragen, sei es an Kunden, Freunde usw. Um dabei die Datenmengen klein
zu halten und statt viele Dateien nur eine an die Mail anhngen zu mssen, sind Packer-Programme wichtig.
Weiterhin sind oft andere Internet-Client-Programme wichtig. So knnen Sie bei vielen Providern auch mit Telnet/SSH auf Ihre Daten auf dem Server zugreifen. Im Linkverzeichnis des
Online-Angebots von SELFHTML aktuell finden Sie aktuelle Verweise zu Programmen fr Telnet und SSH:

1.6.3

Services im Web

Allgemeines zu Web-Services
Was hier unter Web-Services verstanden wird, sind Web-Angebote, die anderen Web-Anbietern
helfen, ihr eigenes Web-Angebot ins Web zu bringen oder um Features zu erweitern, die im
Rahmen des eigenen Web-Angebots aufgrund fehlender Mglichkeiten nicht realisierbar sind.
Solche Web-Services bieten beispielsweise fertige CGI-Scripts an, die Sie von Ihren eigenen Seiten aus aufrufen knnen. Auf diese Weise knnen Sie etwa Foren, Chats, Gstebcher oder
Zugriffszhler in Ihre Web-Seiten integrieren, auch wenn Sie selber keine Mglichkeit haben,
CGI-Scripts zu installieren, oder wenn Sie sich dem Selberprogrammieren nicht gewachsen fhlen. Einige dieser Web-Services sind werbefinanziert, d.h. es werden automatisch Werbe-Banner
eingeblendet, wenn Sie sie verwenden. Andere sind fr eine geringe monatliche oder jhrliche
Gebhr nutzbar, und wieder andere sind vllig frei.
Im Linkverzeichnis des Online-Angebots von SELFHTML aktuell bei selfaktuell.teamone.de finden Sie Verweise zu Web-Seiten, die einen der folgenden Web-Services anbieten.

Provider-bersichten
Die Providerfrage (Provider = Anbieter) steht normalerweise am Beginn jedes Vorhabens, eigene
Seiten ins Web zu bringen. Falls Sie sich ber die grundstzlichen Mglichkeiten und Unterschiede informieren wollen, knnen Sie den Abschnitt Web-Projekte publizieren (Kapitel 25.2)
durchlesen. Bereits fr die Entscheidung, wie Sie Ihr Angebot hosten lassen wollen, wie viel Sie
bereit sind dafr zu zahlen, und welche Leistungen Sie fr welche Kosten erwarten knnen, gibt
es Web-Services nmlich Provider-bersichten. Dort werden aktuelle Preis-/Leistungsinformationen zu etlichen Providern gesammelt und so bereitgestellt, dass Sie Preise und Leistungen
direkt vergleichen knnen.

CGI-Services fr eigene dynamische Web-Seiten

Viele Homepage-Anbieter wnschen sich zumindest ein Gstebuch, in dem sich Benutzer eintragen und ihren Kommentar zu den Seiten abgeben knnen. Die Kommentare sind dann in die
Seiten selbst eingebunden und einsehbar. Dazu ist jedoch ein CGI-Script oder eine CGI ver-

1.6 Hilfsmittel

69

gleichbare Technologie erforderlich. hnlich ist es, wenn Sie einen der mittlerweile allerdings
nicht mehr so beliebten Counter auf Ihre Einstiegsseite einbinden wollen, also einen Zhler,
der anzeigt, wie viele Besucher schon auf der Seite waren. Immer beliebter werden auch eigene,
web-basierte Foren, wo die Besucher untereinander diskutieren knnen. Dazu noch einen Chat,
und schon kann die Homepage als Kommunikationsplattform fr Besucher dienen. Sinn macht
so etwas natrlich erst, wenn Sie gengend Besucher auf Ihren Seiten haben. Eine weitere wichtige, hufig bentigte Anwendung ist ein so genannter Form-Mailer. So etwas knnen Sie gut
gebrauchen, wenn Sie eigene Formulare auf Ihren Web-Seiten anbieten, beispielsweise, um von
den Seitenbesuchern Feedback, Anfragen oder Vorbestellungen einzuholen.
All diese Features erfordern fortgeschrittene Web-Technologien wie CGI/Perl, PHP oder Java. Es
gibt Web-Services, bei denen Sie sich selber und ohne weitere Programmierkenntnisse ein Gstebuch, ein Forum oder dergleichen einrichten knnen. Vom Anbieter erhalten Sie dann normalerweise Informationen, was Sie in Ihre eigenen Web-Seiten einbauen mssen, damit der
Fremd-Service innerhalb Ihres eigenen Angebots funktioniert. In der Regel sind das bestimmte
HTML-Quelltextbausteine, die Sie in Ihre HTML-Dateien an bestimmten Stellen einfgen mssen.
Einige dieser Dienste sind kostenlos, andere knnen Sie nur gegen Gebhr in Anspruch nehmen.
Die Gebhren sind jedoch meist sehr gering (z.B. DM 20.-/Jahr fr Zugriffszhler und Statistik
fr die eigene Homepage).

Services zur Optimierung des eigenen Web-Angebots

Diese Sorte von Web-Services hilft Ihnen beim Optimieren Ihrer Web-Seiten und bei der Fehlersuche. Der bekannteste Service dieser Art ist zweifellos der W3-Validator (validator.w3.org/)
des W3-Konsortiums, mit dessen Hilfe Sie online Ihre Web-Seiten auf fehlerfreie HTML-Syntax
berprfen knnen. Ahnliche Services gibt es auch fr andere Sprachen. Ferner gibt es Services
wie Link-Checker, wo Sie Ihre Seiten daraufhin berprfen knnen, ob alle darin enthaltenen
Verweise funktionieren, aber auch Services, bei denen Sie testen lassen knnen, wie gut oder
schlecht Ihre Web-Seiten fr Besucher erreichbar sind (die Internet-Anbindung kann von Provider zu Provider sehr unterschiedlich sein), oder wie lange die durchschnittlichen Ladezeiten
Ihrer Seiten bei verschiedenen Internet-Zugangsverbindungen sind.

1.6.4

Support

Wo es Support gibt
Wenn Sie sich stundenlang mit Problemen von der Art herumschlagen, dass Netscape eine Tabelle anders darstellt als der Internet Explorer, oder dass Sie bei einem JavaScript Fehlermeldungen erhalten, die Sie nicht verstehen, dann werden Sie sich wahrscheinlich den entscheidenden
Tipp wnschen. Denn oft gengt ja nur ein Hinweis, um einen auf die richtige Fhrte zu bringen und ein Problem zu lsen.
Mit solchen Problemen sind Sie allerdings nicht allein. Zigtausend andere haben gleiche, hnliche oder wieder andere Probleme beim Erstellen ihrer Seiten. Nun gibt es aber gleichzeitig auch
zahlreiche Menschen, die Gefallen daran finden, andere zu untersttzen. Diese Konstellation
fhrt dazu, dass es im Netz sehr gut besuchte Orte gibt, an denen Erfahrungsaustausch ber das
Erstellen von Web-Seiten, ber Programmierung usw. mglich ist.

70

Kapitel 1: Internet und WWW

Das grte und vermutlich auch kompetenteste Know-How-System fr Fragen und Antworten
im Internet ist wohl das Usenet mit seinen Newsgroups. In deutscher Sprache gibt es Newsgroups zu HTML/CSS, zu JavaScript, zu CGI/Perl, zu XML usw.
Die Teilnahme ist kostenlos, jedoch bentigen Sie einen News-Reader (unter Windows gengt
beispielsweise das E-Mail-Programm Outlook Express, das zum erweiterten Lieferumfang des
Internet Explorers gehrt). Auerdem bentigen Sie einen News-Server, von dem Sie die Diskussionsgruppen empfangen knnen. Fragen Sie, wenn Sie keinen solchen News-Server kennen,
Ihren Internet-Zugangsprovider danach, ob er einen solchen Server anbietet. Achten Sie, falls Sie
ohnehin einen neuen Zugangs-Provider suchen, gegebenenfalls darauf, dass dieser auch einen
Newsgroup-Server anbietet. Bei den meisten News-Servern mssen Sie sich mit Kennwort und
Passwort einwhlen. Beides erhalten Sie vom Anbieter des News-Servers, in der Regel also vom
Zugangs-Provider.
Immer wichtiger werden neben den Newsgroups auch web-basierte Diskussionsforen. Es gibt
sogar Web-Angebote, die nichts anderes anbieten als Foren zu bestimmten Themen. Andere
wieder bieten Informationen zu diesen Themen an und haben ein angeschlossenes Forum.
Web-basierte Foren haben meist noch keine so lange Tradition wie die Newsgroups, und die
Anbieter sind hufig unerfahren in der Rolle eines virtuellen Kneipenwirts. Die Qualitt, das
Flair und die Besucherfrequenz solcher Foren kann sehr unterschiedlich sein. Die meisten Foren
sind kostenlos benutzbar, einige erfordern allerdings eine namentliche Anmeldung.
Falls Sie nicht so gerne ffentlich posten, gibt es auch noch die Mglichkeit, Mailing-Listen zu
abonnieren, die sich mit einem Fachgebiet befassen. Um an einer Mailing-Liste teilzunehmen,
gengt ein E-Mail-Programm. Sie abonnieren eine Mailing-Liste, indem Sie eine Mail mit einem
bestimmten Inhalt an eine bestimmte Mail-Adresse senden viele Mailing-Listen erlauben
mittlerweile aber auch das Abonnieren via Web-Formular. Wenn Sie eine Mailing-Liste abonniert haben, erhalten Sie alle E-Mails, die an die Liste gesendet werden. Selber knnen Sie ebenfalls Mails an die Liste senden, die dann an alle anderen Listenteilnehmer versendet werden.
Im Linkverzeichnis des Online-Angebots von SELFHTML aktuell bei selfaktuell.teamone.de finden Sie Verweise zu einschlgigen Newsgroups, web-basierten Foren und Mailing-Listen, die
sich mit Themen rund um das Erstellen von Webseiten befassen.
Alle diese Diskussionsorte im Netz sind vorwiegend fr Probleme mit software-unabhngigen
Technologien wie HTML, CSS, XML usw. oder fr Probleme mit freeware-basierten Technologien wie Perl, PHP usw. gedacht. Wenn Sie Software kuflich erworben haben und Probleme mit
dem Produkt haben, ist immer noch der Produktanbieter die erste Anlaufstelle fr Fragen. So
unterhalten beispielsweise groe Software-Anbieter wie Microsoft, Macromedia oder Adobe
neben den blichen Call-Centern eigene Diskussionsforen auf ihren Web-Seiten oder in Form
von Newsgroups.

Wie freiwillige Hilfeleistung funktioniert

Freiwillige Hilfe, wie sie an den weiter oben genannten Diskussionsorten geleistet wird, basiert
auf Geben und Nehmen. Wenn Sie als Anfnger an einem solchen Diskussionsort mehrfach
Hilfe suchen und auch finden, dann ist es nur fair gegenber den anderen Teilnehmern, wenn
Sie spter auch mal ein paar Fragen anderer beantworten, sofern Sie die Antwort wissen. Solche
Diskussionsorte leben von der Bereitschaft aller Teilnehmer, sich gegenseitig zu helfen. Mit einer

1.6 Hilfsmittel

71

Mentalitt vom Typ Hilfe, aber pltzlich bitte! werden Sie dort schnell anecken, und an den
meisten der genannten Orte werden die Dinge, die Sie dann zu hren bekommen, nicht gerade
zimperlich formuliert. Bei offenen Standards und Technologien wie HTML sind Sie nun mal
kein behteter Verbraucher mit Rechten auf Rckgabe, Funktionsgarantie und Rundum-Service.
Eine Newsgroup oder ein Diskussionsforum ist kein Geschft, wo Sie einen Gert gekauft haben.
Wenn Sie allerdings den richtigen Ton treffen, erhalten Sie an solchen Diskussionsorten hufig
wesentlich umfassendere und engagiertere Hilfe als dort, wo Sie einen vertraglichen SupportAnspruch haben. Den richtigen Ton treffen betrifft allerdings weniger das rhetorische Geschick.
Sprachliche Hchstleistungen werden nicht erwartet, wenn Sie etwas fragen, wohl aber ein paar
andere Dinge:
Versuchen Sie zunchst alles was in Ihrer Macht steht, um ein Problem selber zu lsen. Fr
erfahrene Forenleser ist leicht erkennbar, ob Sie bereits selber nach Lsungen gesucht haben
oder aus Bequemlichkeit fragen.
Whlen Sie einen angemessenen Titel fr Ihren Beitrag. Titel wie JavaScript-Problem! sind
nicht gerade sehr erhellend in einem Forum, in dem es um nichts anderes als um JavaScript
geht. Der Titel sollte den Problembereich erkennen lassen, aber auch nicht zu lang sein. Das
Problem selber gehrt im Text des Beitrags geschildert.
Beschreiben Sie Ihr Problem so exakt wie mglich. Beschreiben Sie, mit welcher Testumgebung das Problem besteht, welche Fehlermeldungen Sie eventuell erhalten, und was Sie
bereits ausprobiert haben, um das Problem zu lsen. Fgen Sie gegebenenfalls auch Ausschnitte aus Quelltexten bei, von denen Sie wissen, dass dort das Problem steckt kopieren
Sie aber andererseits nicht seitenweise Quelltext in einen Diskussionsbeitrag, damit verrgern
Sie die Leser nur. Eine ideale Lsung ist, wenn Sie problematische Seiten an eine sonst unverlinkte Stelle ins Web hochladen und die Adresse dann in der Frage angeben.
Bringen Sie ein wenig Freundlichkeit in die Diskussionsgruppe und etwas Respekt vor der
Tatsache mit, dass Sie es mit anderen Menschen und nicht mit einer anonymen Antwortmaschine zu tun haben. Sparen Sie nicht an einer lockeren, aber netten Anrede wie liebe Leute!
an Diskussionsorten mit jngerem Publikum reicht auch ein schlichtes hi!. Benutzen Sie
Ihren echten Namen und geben Sie, falls Sie z.B. im Formular eines Beitrags zu einem WebForum dazu gezwungen werden, Ihre echte E-Mail-Adresse an. Das schafft Vertrauen und
erhht die Chancen auf brauchbare Antworten. An den meisten Diskussionsorten reden sich
grundstzlich alle mit Du an. Solche Dinge werden Sie allerdings selber schnell feststellen,
wenn Sie ein wenig mitlesen was Sie auf jeden Fall tun sollten, bevor Sie selber etwas beitragen.
Lesen Sie, bevor Sie zum ersten mal etwas beitragen, auch die FAQs, die es zu den meisten
Newsgroups, Foren und Mailing-Listen gibt. Dort steht nmlich genau, was in der jeweiligen
Diskussionsgruppe erwnscht und unerwnscht ist, welche Quellen Sie kennen sollten, bevor
Sie fragen usw. Die tatschlich am hufigsten gestellten Fachfragen werden dort meist ebenfalls genannt und beantwortet.
Eigentlich sollten diese paar Grundregeln selbstverstndlich sein, doch leider wird immer wieder
und massenhaft gegen sie verstoen. In Diskussionsforen und Newsgroups tauchen auch nicht
selten sozial geschdigte, sonst kontaktarme Menschen auf, die zu Extremverhalten neigen, bewusst versuchen die Gruppe zu provozieren oder Gefallen daran finden, Diskussionen durch
einsilbige und unpassende Bemerkungen zu zerstren. Dagegen hilft in der Regel, Ruhe zu bewahren und sich nicht provozieren zu lassen.

73

2.1

Web-Technologien

HTML

2.1.1 HTML als lingua franca des Web

Unter einer lingua franca versteht man eine Brot- und Butter-Sprache, eine Sprache, die
jeder kennt, jeder spricht, jeder leicht erlernen kann und jeder braucht. HTML ist eine solche
Sprache. Vom Web-Grnder Tim Berners-Lee entwickelt, wurde HTML im Zuge des WebBooms zum erfolgreichsten und verbreitetsten Dateiformat der Welt. Immer wieder rmpfen
Entwickler, die gerne alles, was einfach sein knnte, durch tausend Filter und bersetzer jagen,
um es kompliziert zu machen und ihren technischen Durst zu stillen, ber HTML die Nase
eben weil es so einfach ist. Aber erstens ist es bei genauerem Hinsehen gar nicht so einfach fast
kein namhaftes Web-Angebot, egal ob Suchmaschine, Online-Magazin oder Firmenauftritt, ist
bis heute in der Lage, fehlerfreies und standardkonformes HTML auf seinen Web-Seiten zu realisieren. Und zweitens reicht HTML fr die Mehrzahl der Inhalte, die heute im Web angeboten
werden, vollkommen aus. Denn HTML ist eine Sprache zur Strukturierung von Texten, wobei
aber auch die Mglichkeit besteht, Grafiken und multimediale Inhalte in Form einer Referenz
einzubinden und in den Text zu integrieren.
Mit HTML knnen Sie berschriften, Textabstze, Listen und Tabellen erzeugen. Sie knnen
anklickbare Verweise auf beliebige andere Web-Seiten oder Datenquellen im Internet erzeugen.
Nicht-textuelle Inhalte knnen Sie wie bereits erwhnt referenzieren. Sie knnen Formulare in
den Text integrieren. Und last but not least bietet HTML Schnittstellen fr Erweiterungssprachen wie CSS Stylesheets oder JavaScript an, mit deren Hilfe Sie HTML-Elemente nach Wunsch
gestalten und formatieren oder Interaktion mit dem Anwender realisieren knnen.
HTML ist also sehr durchdacht und in ein Gesamtkonzept weiterer Sprachen eingebunden. Wer
behauptet, HTML sei nichts mehr fr professionelles Web-Publishing, outet sich meistens nur
als feuchtugiger Technik-Junkie und behauptet letztlich nur, normale Texte seien nichts mehr
fr professionelles Web-Publishing. Und wer das behauptet, stellt sich selber ins Abseits der
gewachsenen schriftlichen Kultur. Solange es Autoren gibt, die Texte schreiben und dazu die
blichen Mittel zur Textstrukturierung bentigen, wird es aus webtechnischer Sicht Leute geben,
die HTML gut brauchen knnen.
Als lingua franca ist HTML allerdings mit diversen spezielleren Anforderungen schlichtweg
berfordert. HTML allein kann weder Grafik-Designer befriedigen, die jeden Pixel am Bildschirm kontrollieren wollen, noch Daten-Designer, die aus der Welt der relationalen Datenbanken kommen und sich anwendungsspezifische Lsungen wnschen. Deshalb gibt es heute StyleSprachen wie CSS, und es gibt Lsungen wie XML, um anwendungsspezifisches Daten-Design zu
ermglichen.

74

Kapitel 2: Web-Technologien

All das ndert aber nichts daran, dass HTML eine hervorragend geeignete, standardisierte und
wegen der weiten Verbreitung der Web-Browser praktisch berall verfgbare Sprache fr Text
und Hypertext darstellt. Das W3-Konsortium (www.w3c.org/), das fr die Standardisierung von
HTML zustndig ist, ist zwar bemht, HTML von allen Snden der Anfangsjahre zu reinigen
und es als einfache, reine Textstrukturierungssprache zu etablieren. Doch in der Praxis dient
HTML heute auch als Basis zum Erstellen von Web-Seiten-Layouts, und daran wird sich wohl
auch so schnell nichts ndern.

2.1.2 HTML als softwareunabhngiges Klartextformat

HTML ist ein so genanntes Klartextformat. HTML-Dateien knnen Sie mit jedem beliebigen
Texteditor bearbeiten, der Daten als reine Textdateien abspeichern kann. Es gibt also keine bestimmte Software, die man zum Erstellen von HTML-Dateien bentigt. Zwar gibt es lngst
mchtige Programme, die auf das Editieren von HTML spezialisiert sind, doch das ndert nichts
an der entscheidenden Eigenschaft: HTML ist nicht an irgendein bestimmtes, kommerzielles
Softwareprodukt gebunden. Diese wichtige, vielleicht sogar wichtigste Eigenschaft von HTML
sollten Sie immer im Auge behalten, wenn man Ihnen erzhlen will, dass Web Publishing nur
mit bestimmten Softwareprodukten mglich sei.
Da HTML ein Klartextformat ist, lsst es sich auch hervorragend mit Hilfe von Programmen
generieren. Von dieser Mglichkeit machen beispielsweise CGI-Scripts Gebrauch. Wenn Sie im
Web zum Beispiel einen Suchdienst benutzen und nach einer Suchanfrage die Ergebnisse prsentiert bekommen, dann ist das, was Sie am Bildschirm sehen, HTML-Code, der von einem
Script generiert wurde.

2.1.3 HTML als Auszeichnungssprache

HTML bedeutet HyperText Markup Language. Es handelt sich dabei um eine Sprache, die mit
Hilfe von SGML (Standard Generalized Markup Language) definiert wird. SGML ist als ISONorm 8879 festgeschrieben. Mittlerweile gibt es einen Ableger von HTML namens XHTML. In
der Sprachversion 1.0 ist XHTML eine Redefinition von HTML mit Hilfe von XML. XML hat
nmlich hnliche Aufgaben wie SGML.
HTML ist eine so genannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die
logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Mglichkeit an, typische Elemente eines textorientierten Dokuments, wie berschriften, Textabstze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.
Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML
zeichnet Inhalte von Dokumenten aus. Dokumente haben globale Eigenschaften wie zum Beispiel Kopfdaten. Der eigentliche Inhalt besteht aus Elementen, zum Beispiel einer berschrift 1.
Ordnung, Textabstzen, Tabellen und Grafiken. Einige dieser Elemente haben wiederum Unterelemente. So enthlt ein Textabsatz zum Beispiel eine als betont oder fett markierte Textstelle,
eine Aufzhlungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen.

2.1 HTML

75

Die meisten dieser Elemente haben einen fest definierbaren Erstreckungsraum. So geht eine
berschrift vom ersten bis zum letzten Zeichen, eine Aufzhlungsliste vom ersten bis zum letzten Listenpunkt, oder eine Tabelle von der ersten bis zur letzten Zelle. Auszeichnungen markieren Anfang und Ende von Elementen. Um etwa eine berschrift auszuzeichnen, lautet das
Schema:
[berschrift]Text der berschrift [Ende berschrift]

Bei einem Element, das wiederum Unterelemente besitzt, etwa einer Aufzhlungsliste, lsst sich
das gleiche Schema anwenden:
[Liste]
[Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
[Listenpunkt] Text des Listenpunkts [Ende Listenpunkt]
[Ende Liste]

Web-Browser, die HTML-Dateien am Bildschirm anzeigen, lsen die Auszeichnungsmarkierungen auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar.
Dabei ist die Bildschirmdarstellung aber nicht die einzige denkbare Ausgabeform. HTML kann
beispielsweise genauso gut mit Hilfe synthetisch erzeugter Stimmen auf Audio-Systemen ausgegeben werden.

2.1.4 HTML fr Hypertext

Eine der wichtigsten Eigenschaften von HTML ist die Mglichkeit, Verweise zu definieren. Verweise (Hyperlinks) knnen zu anderen Stellen im eigenen Projekt fhren, aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des
Web sind.
Durch diese einfache Grundeigenschaft erffnet HTML vllig neue Welten. Das Bewegen zwischen rumlich weit entfernten Rechnern wird bei modernen grafischen Web-Browsern auf
einen Mausklick reduziert. In Ihren eigenen HTML-Dateien knnen Sie Verweise notieren und
dadurch inhaltliche Verknpfungen zwischen Ihren eigenen Inhalten und denen anderer Anbieter herstellen. Auf dieser Grundidee beruht letztlich das gesamte World Wide Web, und
dieser Grundidee verdankt es seinen Namen.
Im Zeitalter der Kommerzialisierung des Internet sind natrlich auch die Verweise zu einem
kommerziellen Gegenstand geworden. Anklickbare Werbe-Grafiken (Banner) auf hufig
besuchten Seiten fhren zu Anbietern, die fr die Platzierung der Banner Miete bezahlen. Auch
das sind Verweise. Glcklicherweise gibt es daneben aber weiterhin gengend herkmmliche
Verweise im WWW, die einfach nur die Grundidee des Web verfolgen und zur weltweiten Vernetzung von Information beitragen wollen.

2.1.5 HTML-Versionen
Die erste Sprachversion von HTML gilt heute nicht mehr als erwhnenswert. Die Spezifikation
zu dieser HTML-Version ist auf den Seiten des W3-Konsortiums, das fr die Standardisierung
von HTML verantwortlich ist, auch gar nicht mehr verfgbar.

76

Kapitel 2: Web-Technologien

HTML 1.0 enthielt Auszeichnungen fr Standardelemente wie berschriften, Textabstze, fr

Grafikreferenzen und natrlich fr Verweise.
HTML 2.0 wurde im November 1995 offizieller Sprachstandard. Die Spezifikation fr HTML
ist beim W3-Konsortium noch verfgbar (www.w3.org/MarkUp/html-spec/html-pubtext.html).
Die Version 2.0 von HTML gilt heute als der allerkleinste gemeinsame Nenner. Allerdings
enthlt HTML 2.0 durchaus Sprachelemente, die bis auf den heutigen Tag von den groen
Browsern nicht oder nicht vollstndig untersttzt werden, etwa das <link>-Tag.
HTML 2.0 wurde allgemein als Enttuschung empfunden, da gerade Netscape in seiner Entwicklung schon viel weiter war: so war HTML 2.0 Standard, als der Navigator in seiner berwltigenden Produktversion 2.0 auf den Markt kam. Darin waren bereits solche Dinge wie
Frames (Mehrfenstertechnik) und Multimedia-Referenzen implementiert, die meilenweit
ber den offiziellen HTML-Standard hinausgingen. Die meisten Ersteller von Web-Seiten
berauschten sich damals an den neuen Mglichkeiten von Netscape und hatten wenig Verstndnis fr die Restriktionen von HTML 2.0.
HTML 3.2 wurde nach langen Diskussionen am 14.1.1997 offizieller Sprachstandard. Die
Spezifikation zu HTML 3.2 ist auf den Seiten des W3-Konsortiums verfgbar (www.w3.org/
TR/REC-html32.html).
Dass diese Version eine schwere Geburt war, lsst sich schon an der merkwrdigen Versionsnummer erahnen. Das W3-Konsortium, von den Erfolgen eines Netscape-Browsers unbeeindruckt, entwickelte zunchst eine geplante Version 3.0. Die Vorschlge zu HTML 3.0 enthielten zwar etliche interessante Bestandteile. Doch insgesamt liefen die Vorschlge vllig an den
neuen Realitten im Web vorbei. HTML 3.2 ist das Ergebnis einer vlligen Umarbeitung der
Vorschlge zu dem niemals offiziell gewordenen HTML 3.0. Endlich wurden zumindest
Tabellen offizieller Bestandteil von HTML. Daneben aber auch diverse Elemente zur physischen Textauszeichnung. Aus letzterem Grund stellt HTML 3.2 aus heutiger Sicht ein mittleres Unglck fr die Entwicklung von HTML dar. Denn in dieser Version wurde versucht,
HTML als Sprache fr optisches Design zu etablieren, was jedoch nicht dem Wesen der Sprache entsprach und auch nur halbherzig implementiert war. Viele Sprachbestandteile, die in
HTML 3.2 eingefhrt wurden, sind mittlerweile als deprecated (missbilligt) eingestuft und
sollen knftig wieder aus dem HTML-Sprachstandard entfallen, weil sie durch andere, ergnzende Technologien wie CSS realisierbar sind.
HTML 4.0 wurde erstmals am 18.2.1998 als Sprachstandard verabschiedet. Diese Sprachversion wurde jedoch mehrfach berarbeitet und liegt mittlerweile in einer Version 4.01 vor. Die
jeweils aktuelle Version von HTML 4.x finden Sie auf den Seiten des W3-Konsortiums
(www.w3.org/TR/html4).
HTML 4.0 stellt den Versuch dar, sich auf die Kernaufgaben von HTML zurckzubesinnen.
Das Arsenal der Sprachbestandteile dieser Version regelt vor allem die Einbindung von CSS
Style Sheets und von Script-Sprachen wie JavaScript in HTML. Ein weiterer wichtiger Schwerpunkt ist das Thema Internationalisierung. HTML 4.0 setzt im Gegensatz zu seinen Vorlufern voll auf das Unicode-System und erlaubt damit, Texte in allen nur erdenklichen Sprachen der Welt HTML-gerecht zu notieren. Es gibt allerdings auch viel Verwirrendes in HTML
4.0. Dazu gehren vor allem die drei Sprachvarianten, die das W3-Konsortium anbietet:
HTML Strict, HTML Transitional und HTML Frameset. Fr Anfnger ist die Politik,
die hinter dieser Aufteilung steckt, kaum nachvollziehbar, und so ist es kein Wunder, dass
sich die meisten Web-Entwickler bis heute wenig Gedanken machen ber diese Feinheiten.
Das ist zwar schade, weil es sich durchaus lohnt, mit den Bestrebungen des W3-Konsortiums

2.2 CSS Stylesheets

77

eingehender auseinander zu setzen. Andererseits ist es verstndlich, dass jemand, der mal
eben seine Homepage im Web verffentlichen will, keine Lust hat, sich mit konzepttheoretischen Aspekten des Designs von Auszeichnungssprachen zu beschftigen. Mit diesem
Widerspruch lebt HTML 4.0 leider.
Verkompliziert wurde die Sache auerdem noch dadurch, dass HTML im Zuge der Etablierung
von XML in Gestalt von XHTML neu definiert wurde. So existiert heute neben dem SGMLbasierten, klassischen HTML das XML-basierte XHTML. Letzteres ist zwar auch nur HTML,
aber aufgrund XML-bedingter Gegebenheiten gibt es einige Unterschiede zu HTML. Von
XHTML gibt es mittlerweile auch schon zwei Versionen: eine Version 1.0 (www.w3.org/TR/
xhtml1/) und eine Version 1.1 (www.w3.org/TR/xhtml11/).
Angesichts dieser verwirrenden Versionen-Politik, die ein Kompromiss aus den Vorstellungen
verschiedener Seiten und Interessen darstellt, gilt es fr HTML-Anfnger vor allem, Ruhe zu
bewahren und nicht gleich angewidert davonzurennen. Es ist durchaus mglich, HTML-4.0 oder
XHTML-1.0-gerechte Web-Seiten zu erstellen, die richtig gut aussehen. Es gehrt einfach ein
wenig Kenntnis der Sachlage dazu. Innerhalb des HTML-Kapitels der vorliegenden Dokumentation wird versucht, die Philosophie des heutigen HTML so zu vermitteln, dass keine Entmutigungseffekte eintreten.

2.2

CSS Stylesheets

2.2.1 Formatsprache fr HTML-Elemente

Mit HTML definieren Sie den grundstzlichen Aufbau Ihrer Web-Seiten, die Elemente, die
Strukturen, die Verweise, die referenzierten Elemente wie Grafiken, Multimedia usw. Aber
HTML ist eigentlich nicht dazu gedacht, um exakt anzugeben, wie ein Element genau aussehen
soll. So knnen Sie in HTML eine berschrift definieren und dabei angeben, dass es sich um
eine berschrift 1. Ordnung handeln soll. Sie knnen innerhalb von HTML aber nicht bestimmen, wie gro, in welcher Schriftart usw. die berschrift dargestellt werden soll. Das bernimmt
der Web-Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen, die
der Anwender vornehmen kann, und fest programmierten Darstellungen einzelner HTML-Elemente.
An diesem Punkt setzen die Cascading Stylesheets (CSS) ein. Es handelt sich dabei um eine
unmittelbare Ergnzungssprache, die vorwiegend fr HTML entwickelt wurde. Sie klinkt sich
nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit
Hilfe von CSS Stylesheets knnen Sie beispielsweise festlegen, dass alle berschriften 1. Ordnung
24 Punkt gro sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Punkt und mit
einer grnen doppelten Rahmenlinie oberhalb dargestellt werden. Sie knnen aber genauso gut
auch fr einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter gro sein soll und
eine gelbe Hintergrundfarbe erhlt. Daneben enthlt CSS auch Mglichkeiten zum punktgenauen Platzieren von Elementen am Bildschirm und fr andere Ausgabemedien wie Drucker
oder Audio-Systeme.
CSS erlaubt es, zentrale Formate zu definieren, beispielsweise fr alle berschriften erster Ordnung, oder fr alle Textabstze mit einem bestimmten Klassennamen, oder fr kursiv ausge-

78

Kapitel 2: Web-Technologien

zeichneten Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate knnen
sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden,
die Sie dann in allen gewnschten HTML-Dateien einbinden knnen. So werden einheitliche
Formatvorgaben mglich, und der HTML-Code wird von unntigem Ballast befreit.
CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Im
HTML-Kapitel der vorliegenden Dokumentation werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Mglichkeiten hingewiesen, wie Sie diese
Elemente mit Hilfe von CSS gestalten knnen.
CSS ist ebenso wie HTML eine Klartextsprache. Auch fr CSS brauchen Sie keine bestimmte
Software, es gengt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden knnen.
Vom MS Internet Explorer wurde CSS schon recht frh untersttzt, da Microsoft sein Knowhow aus dem Bereich der visuellen Textverarbeitung in den Browser einflieen lassen konnte.
Netscape tat sich dagegen schwer mit der Implementierung. Was die immer noch verbreitete
Version 4.x an CSS beherrscht, ist insgesamt wenig ermutigend, und Web-Designer mssen alle
Augenblicke lang wieder mit bsen berraschungen bei diesem Browser rechnen. Erst in der von
Grund auf neu programmierten 6er-Version des Netscape-Browsers ist CSS sauber umgesetzt.
Aber auch beim Internet Explorer gab es lange Zeit eigenwillige Interpretationen einzelner CSSEigenschaften. Auch hier kann man erst seit der 5er-Version eine ausgereifte Umsetzung erwarten.
Das Verhalten der Browser ist der Grund, warum CSS bis heute eher vorsichtig eingesetzt wird.
Dennoch setzt mittlerweile die Mehrzahl der Angebote im Web CSS mit Erfolg ein, und solange
Sie Ihre Seiten mit verschiedenen Browsern austesten was Sie ohnehin tun sollten , besteht
kein Grund mehr, auf CSS und seine Vorteile zu verzichten.

2.2.2 CSS-Versionen
Das Standardisierungsverfahren bei CSS folgt den gleichen Regeln wie das von HTML. Die erste
CSS-Sprachversion in Form einer offiziellen Empfehlung (Recommendation) stammt bereits vom
17.12.1996, wurde allerdings 1999 noch mal in berarbeiteter Form herausgegeben. Die Spezifikation zu CSS 1.0 ist auf den Seiten des W3-Konsortiums verfgbar (www.w3.org/TR/RECCSS1).
Seitdem wurde CSS fleiig weiterentwickelt. Viele CSS-Eigenschaften, die lngst beliebt geworden sind etwa das absolute Positionieren von Elementen , gehren zum CSS Level 2. Die
Version 2.0 stammt vom 12.05.1998. Auch diese Version knnen Sie aufrufen (www.w3.org/TR/
REC-CSS2/).
Obwohl schon 1998 verffentlicht, ist CSS 2.0 noch immer nicht vollstndig in allen verbreiteten
Browsern umgesetzt. Beim W3-Konsortium wird indessen lngst an der Version 3.0 gearbeitet.
ber die Einstiegsseite zu CSS (www.w3.org/Style/CSS/) beim W3-Konsortium knnen Sie sich
ber die laufende Weiterentwicklung informieren.

2.3 XML und XML-Derivate

2.3

79

XML und XML-Derivate

2.3.1 XML als Definitionssprache fr Auszeichnungssprachen

Stellen Sie sich vor, irgendjemand htte irgendwann fr ein weit verbreitetes Textverarbeitungsprogramm wie MS Word eine bestimmte Dokumentvorlage erstellt. Stellen Sie sich weiter vor,
diese Dokumentvorlage wrde sich irgendwie immer mehr verbreiten, jeder Word-Anwender
htte sie, und jeder Word-Anwender wrde seine Dokumente fortan nur noch mit dieser einen
Dokumentvorlage erstellen.
Genau das ist im Grunde bei HTML der Fall. HTML ist eine Sprache, die mit Hilfe von SGML
definiert wird und eine Reihe von festen Elementen enthlt. Es ist zwar eine Sprache, die eigentlich alle wichtigen Elemente enthlt, die ein Web-Autor heute so braucht, doch es bleiben gengend Wnsche offen. Denn es gibt viele Texte, die anwendungsspezifische Datenstrukturen
haben. Nehmen Sie beispielsweise E-Mails. Eine E-Mail hat bestimmte Kopfdaten wie Absender,
Empfnger, Thema, Absendezeit sowie den eigentlichen Text. Wenn Sie eine solche E-Mail mit
allen Feldern auf einer Web-Seite wiedergeben mchten, knnen Sie natrlich fr die Felder
Absender, Empfnger usw. einfach normale Textabstze verwenden. Sinnvoller wre es
allerdings, Auszeichnungselemente mit Namen wie Absender oder Empfnger zu haben.
Nur so wrde die semantische Datenstruktur der E-Mail erhalten bleiben.
Und genau dies ist der Unterschied zwischen HTML und XML. XML wird auch mit Hilfe von
SGML, der Mutter aller Auszeichnungssprachen, definiert. Doch es ist keine SGML-Anwendung, so wie HTML, sondern ein SGML-Profil. Das ist eine Stufe abstrakter, man spricht
dabei auch von generalized markup, also von verallgemeinerter Auszeichnung.
Im Grunde ist XML auch gar keine Konkurrenz zu HTML, sondern vielmehr zu SGML. Denn
mit Hilfe von XML knnen Sie wie mit SGML eigene, neue Sprachen erfinden. XML selbst ist
also nur dazu da, um Auszeichnungssprachen zu definieren. Eine solche Auszeichnungssprache
muss bestimmte Grundkonventionen einhalten. Die Bestandteile der Auszeichnungssprache
mssen nach einem vorgeschriebenen Schema definiert werden. XML ist dabei das Regelwerk,
das Schema. Beim Definieren eigener Auszeichnungssprachen mit XML knnen Sie eigene
Namen vergeben. So knnen Sie zum Beispiel Elemente definieren, um Bereiche eines Dokuments als Lexikonartikel auszuzeichnen, als Musiknote oder als Bestandteil einer chemischen
Formel. Sie mssen bei der Definition der Elemente jedoch exakt festlegen, welche Eigenschaften
das Element hat, zum Beispiel, innerhalb welcher anderen Elemente es vorkommen kann und
innerhalb welcher nicht. Wenn Sie dann ein XML-Dokument mit der Definition einer eigenen
Sprache erstellt haben, knnen Sie Dateien in dieser Sprache erstellen und im Dateikopf angeben, auf welche XML-Definitionen Sie sich in dieser Datei beziehen.
Auszeichnungssprachen, die Sie mit XML definieren, sind wie HTML logisch/semantische Sprachen. Denn mit XML knnen Sie Elemente und deren grundstzliche Eigenschaften definieren,
aber Sie knnen nicht angeben, wie eine interpretierende Software ein Element bei der Darstellung formatieren soll. Da ein Browser bei selbst erfundenen Elementen nicht mal auf Voreinstellungen zurckgreifen kann, so wie bei HTML, ist eigentlich berhaupt keine sinnvolle
Anzeige mglich. XML ist deshalb noch viel strker als HTML auf die Ergnzung durch eine
Style-Sprache angewiesen. Durch Formatierung von Elementen wird bei XML-Sprachen eine
optisch brauchbare Darstellung berhaupt erst mglich.

80

Kapitel 2: Web-Technologien

Dazu gibt es, genau wie bei HTML, eine ergnzende Stylesheet-Sprache. Diese Sprache heit XSL
(Extensible Stylesheet Language erweiterbare Formatsprache). XSL ist noch leistungsfhiger als
CSS. Denn XSL besteht nicht nur aus Formateigenschaften wie Schriftgre, Farbe, Zeilenabstand usw. XSL bernimmt auch erweiterte Aufgaben der Textverarbeitung wie das sortierte
Ausgeben von listenartigen Daten, automatische Nummerierung usw.
Ein Ableger von XSL namens XSLT (XSL Transformation) erlaubt es sogar, Daten von einer
XML-basierten Auszeichnungssprache in eine andere zu konvertieren. Das Konzept dazu ist
ziemlich genial XSLT knnen Sie sich vorstellen wie einen Universal-Konverter, einen
Babelfish fr Auszeichnungssprachen. Er kann von einer in die andere Sprache bersetzen. So ist
es beispielsweise mglich, Daten in einer XML-basierten eigenen Sprache zu speichern, diese
aber beim Prsentieren im Web auf dem Server, also bevor die Daten zum Browser gelangen, mit
Hilfe von XSLT in HTML zu bersetzen. Beim Browser kommt dann lupenreines HTML an,
und er bekommt gar nichts davon mit, dass die Daten eigentlich in einer fr ihn mglicherweise
unverstndlichen XML-Sprache gespeichert sind.
Fr normales Homepage-Design ist XML bis heute relativ uninteressant. HTML und CSS sind
fr normale Texte und deren Gestaltung am Bildschirm hervorragend geeignet und meistens
ausreichend. Doch im professionellen Bereich gibt es gengend Flle, in denen der Einsatz von
XML seine Berechtigung hat. Eigentlich berall dort, wo anwendungsspezifische Datenstrukturen vorliegen und der Wunsch besteht, diese beim Speichern der Daten nicht aufzugeben (siehe
E-Mail-Beispiel weiter oben).
Der Internet Explorer ist seit Version 5.x in der Lage, Dateien mit XML-basierten Sprachen zu
erkennen und zu verarbeiten. Von XSL und XSLT versteht er allerdings noch recht wenig, gerade
mal genug, um ein paar grobe Aufgaben der Darstellung damit zu lsen. Netscape erkennt XML
seit der Produktversion 6.x. Angesichts dieser Tatsache ist es heute nicht sehr ratsam, XML
direkt auf die Browser loszulassen. In der Praxis wird XML heute vor allem eingesetzt, um Daten
semantisch optimal und frei von allem Layout-Ballast zu speichern. Fr die Prsentation als
Web-Seiten werden die Daten dann serverseitig mit Hilfe von XSLT oder mit Hilfe eines selbst
geschriebenen CGI-Scripts in HTML bersetzt.

2.3.2 XML-Derivate
Auszeichnungssprachen, die mit Hilfe von XML definiert werden, werden auch als XML-Derivate, also als XML-Ableger bezeichnet. XML ist also vorstellbar als Stamm eines Baumes, der sich
in lauter ste entfaltet, wobei alle ste die Gene des Stamms enthalten.
Neben Auszeichnungssprachen, die Sie mit XML fr Ihre eigenen Zwecke definieren knnen,
gibt es aber auch XML-basierte Sprachen, die fr die allgemeine Verwendung vorgesehen sind.
So bietet beispielsweise auch das W3-Konsortium gleich mehrere, mit Hilfe von XML definierte
Auszeichnungssprachen ffentlich an in der Hoffnung, dass diese eine breitere Anwendung finden. Es handelt sich um Sprachen mit ganz unterschiedlichen Aufgaben. So gibt es beispielsweise
ein Dateiformat namens SVG, mit dessen Hilfe sich Vektorgrafiken erzeugen lassen, oder eine
Sprache namens MathML zum exakten Auszeichnen mathematisch-wissenschaftlicher Formeln.
Wenn von XML die Rede ist, dann ist damit meistens nicht nur der Kern von XML gemeint,
sondern auch eine ganze Familie von XML-basierten Sprachen eben die XML-Derivate.

2.4 JavaScript/DOM

81

2.3.3 XML-Versionen
Genau wie HTML und CSS wird XML vom W3-Konsortium standardisiert. Die offizielle
Dokumentation zu XML beschreibt dabei, nach welchen Regeln XML-basierte Auszeichnungssprachen definiert werden. Zum Redaktionsschluss des vorliegenden Dokuments lag die Empfehlung zu XML 1.0 vor, verffentlicht am 10.02.1998. Auf den Seiten des W3-Konsortiums
knnen Sie die jeweils aktuelle Version aufrufen (www.w3.org/TR/REC-xml). Auch XSL und
XSLT werden vom W3-Konsortium standardisiert. Die entsprechenden aktuellen Dokumente
finden Sie ebenfalls im Web:
Aktuelle Spezifikation fr XSL (www.w3.org/TR/xsl/)
Aktuelle Spezifikation fr XSL Transformations (XSLT, www.w3.org/TR/xslt)

2.4

JavaScript/DOM

2.4.1 Web-Seiten als Anwendungen

In HTML knnen Sie unter anderem Formulare definieren. Solche Formulare knnen Eingabefelder, Auswahllisten, Buttons usw. enthalten. Der Anwender kann ein Formular ausfllen und
ber das Web absenden. Das ist fr viele Zwecke eine segensreiche Erfindung. Doch HTML
erlaubt Ihnen als Formularanbieter beispielsweise nicht, die Eingaben des Anwenders vor dem
Absenden des Formulars auf Vollstndigkeit und Plausibilitt zu prfen. Mit JavaScript ist das
jedoch mglich.
Oder ein anderer Fall: Sie knnen in HTML zwar Multimedia-Dateien einbinden, aber wenn
diese HTML-Datei im Web steht, knnen Sie nicht wissen, ob Ihre Seitenbesucher einen Browser
besitzen, der das entsprechende Multimedia-Format anzeigen kann. Da wre es praktisch, das
Einbinden der Multimedia-Datei davon abhngig zu machen, ob der Browser des Anwenders das
entsprechende Format anzeigen kann oder nicht. Auch so etwas ist mit JavaScript mglich.
Fr diese und unzhlige andere ntzliche, allerdings auch weniger ntzliche Zwecke erfand
Netscape eine Programmiersprache namens JavaScript. Durch JavaScript knnen Web-Seiten,
die mit Hilfe von HTML aus strukturiertem Text bestehen und mit CSS gestaltet sind, ihren
reinen Dokument-Charakter aufgeben und eher wie Programme, wie Anwendungen wirken.
JavaScript erlaubt es, Maus- und Tastatureingaben des Anwenders zu verarbeiten und darauf mit
Bildschirmausgaben oder dynamischen nderungen innerhalb der angezeigten Web-Seite zu
reagieren. So lsst sich mit JavaScript beispielsweise ein HTML-Formular zu einem Zinseszinsberechner umfunktionieren. Der Anwender gibt ein paar Werte ein, JavaScript berechnet etwas
und gibt das Ergebnis aus.
All diese Dinge laufen im Web-Browser des Anwenders ab, whrend eine Web-Seite am Bildschirm angezeigt wird. Es ist keine zustzliche Kommunikation zwischen Web-Browser und
Web-Server erforderlich. Wenn die Web-Seite zum Browser bertragen wurde und sich damit
im Arbeitsspeicher des Anwender-Rechners befindet, sind JavaScripts, die in die Web-Seite
integriert sind, lokal ausfhrbar. Damit Programmierer auf dem Rechner des Anwenders keinen
Unfug treiben knnen, ist JavaScript allerdings in seinen Mglichkeiten stark beschrnkt. Es ist
mit JavaScript beispielsweise nicht mglich, mal eben eine Datei auf dem Rechner des Anwen-

82

Kapitel 2: Web-Technologien

ders auszulesen oder diese gar zu lschen. Die Mglichkeiten von JavaScript sind auf das Umfeld
der Web-Seite eingeschrnkt, in die so ein Script eingebettet ist.
JavaScripts knnen Sie ebenso wie CSS Stylesheets direkt innerhalb von HTML-Dateien notieren
oder wahlweise als separate Datei einbinden. Damit bezieht sich ein solches JavaScript auf die
Seite, in die es eingebunden ist, und kann auf das unmittelbare Umfeld und die Elemente dieser
Seite zugreifen. Was den Zugriff auf Elemente einer HTML-Datei betrifft, muss man jedoch
einen wichtigen Unterschied machen: Mit klassischem JavaScript, wie es Netscape zunchst einfhrte, lsst sich nur auf bestimmte Elemente zugreifen, beispielsweise auf Formularelemente.
Mittlerweile setzen sich jedoch Anstze durch, bei denen der Script-Sprachen-Zugriff auf beliebige HTML-Elemente mglich ist, und zwar lesend und schreibend. So wird es beispielsweise
mglich, den Text eines Textabsatzes dynamisch auszutauschen, wenn der Anwender an eine
bestimmte Stelle klickt. Auf diese Weise werden HTML-Dateien zu richtigen interaktiven Anwendungen was sich etwa hervorragend fr didaktische Zwecke nutzen lsst. Fr das dynamische Verndern von am Bildschirm angezeigten Web-Seiten hat sich auch der Begriff Dynamic
HTML eingebrgert.
Den Zugriff auf beliebige Elemente regelt das Document Object Model (DOM). Dabei handelt es
sich nicht um eine Programmiersprache, sondern um ein Schema fr Programmiersprachen, das
beschreibt, wie auf die Elemente von HTML- und auch auf die Elemente von beliebigen XMLbasierten Dokumenten zugegriffen werden kann. Das DOM regelt also beispielsweise, welche
Mglichkeiten eine Sprache wie JavaScript bereitstellen muss, um dem Programmierer zu erlauben, den Text einer berschrift erster Ordnung in einer HTML-Datei zu ermitteln und durch
einen anderen Text zu ersetzen. Das DOM ist im Gegensatz zu JavaScript keine konkrete Programmiersprache. Es ist lediglich eine Vorgabe, die in modernen Script-Sprachen fr WebSeiten umgesetzt werden sollte. Denn das DOM wird wie HTML, CSS und JavaScript vom W3Konsortium standardisiert und hat damit einen normativen Charakter. In den JavaScriptModulen der verbreiteten Browser wird das DOM allmhlich umgesetzt. Der MS Internet
Explorer untersttzt DOM-gerechtes JavaScript seit Version 5.x, Netscape seit Version 6.x.
Die Mehrzahl der heutigen Web-Seiten setzt JavaScript in irgendeiner Form ein die meisten so,
wie es gedacht ist, nmlich als Untersttzung fr bestimmte Aufgaben, die sich mit HTML einfach nicht lsen lassen. Einige Seiten sind aber auch komplett JavaScript-basiert. Anwender, die
in ihrem Browser JavaScript deaktiviert haben (was bei allen Browsern mglich ist), sehen von
solchen Seiten rein gar nichts.

2.4.2 JavaScript-Informationen
JavaScript ist anders als HTML, CSS oder XML keine unabhngige Technologie, sondern eine
von Netscape lizenzierte Programmiersprache. Obwohl JavaScript im MS Internet Explorer
genauso funktioniert wie im Netscape-Browser, steckt in Wirklichkeit beim Internet Explorer
eine andere Sprache namens JScript dahinter. JScript ist die Microsoft-Antwort auf JavaScript,
was den Web-Seiten-Entwickler allerdings nicht kmmern muss, denn der JScript-Interpreter
des Internet Explorers kommt mit JavaScript zurecht. Als Ersteller von Web-Seiten knnen Sie
also in JavaScript programmieren, was sie wollen, ohne sich um Lizenzfragen kmmern zu
mssen. Die Weiterentwicklung von JavaScript liegt jedoch in den Hnden des Lizenzinhabers,
und nicht in denen einer unabhngigen Organisation wie dem W3-Konsortium. In den Hnden
des W3-Konsortiums liegt dagegen die Standardisierung des DOM, das eine wichtige Grundlage

2.5 CGI und Perl

83

fr modernes JavaScript ist. Das Dokument fr das DOM in der Version 1.0 finden Sie auf den
Web-Seiten des W3-Konsortiums.
Document Object Model (DOM) 1.0 Spezifikation (www.w3.org/TR/REC-DOM-Level-1/)

2.5

CGI und Perl

2.5.1 CGI-Schnittstelle und Perl-Interpreter

Die CGI-Schnittstelle (Common Gateway Interface Allgemeine Vermittlungsrechner-Schnittstelle)
ist eine Mglichkeit, Programme oder Scripts im Web bereitzustellen, die von HTML-Dateien
aus aufgerufen werden knnen und selbst HTML-Code erzeugen und an einen Web-Browser
senden knnen. Im Unterschied zu JavaScript werden solche Scripts oder Programme aber nicht
nach dem bertragen einer Web-Seite im Browser des Anwenders ausgefhrt, sondern bevor der
Browser vom Server Daten bertragen bekommt. Deshalb sind CGI-Scripts oder CGI-Programme auch nur ausfhrbar, wenn eine HTTP-basierte Kommunikation zwischen Web-Browser
und Web-Server stattfindet. CGI ist dabei auf der Server-Seite angesiedelt.
Die Datenverarbeitung geschieht ebenfalls auf dem Server-Rechner. CGI-Programme knnen
auf dem Server-Rechner Daten speichern, zum Beispiel, wie oft auf eine Web-Seite zugegriffen
wurde, oder, was ein Anwender in ein Gstebuch geschrieben hat. Ein CGI-Script kann auf dem
Server-Rechner auch installierte Datenbanken abfragen. Bei entsprechendem Aufruf kann ein
CGI-Programm gespeicherte Daten auslesen und daraus HTML-Code generieren. Dieser
dynamisch erzeugte HTML-Code wird an den aufrufenden Web-Browser eines Anwenders
bertragen und kann dort individuelle Daten in HTML-Form anzeigen, zum Beispiel den aktuellen Zugriffszhlerstand einer Web-Seite, die bisherigen Eintrge in einem Gstebuch oder
Ergebnisse einer Datenbanksuche.
Die CGI-Schnittstelle muss von der Web-Server-Software untersttzt werden. Aus Sicht des
Mieters von Speicherplatz auf einem Web-Server steht die CGI-Schnittstelle meistens in Form
eines bestimmten Verzeichnisses mit dem Namen cgi-bin zur Verfgung. In diesem Verzeichnis
knnen Scripts abgelegt werden, die CGI-Aufgaben bernehmen. Falls Sie unsicher sind, fragen
Sie Ihren Provider oder Webmaster, der Ihnen Speicherplatz im Web zur Verfgung stellt, ob er
Ihnen eine CGI-Schnittstelle zur Verfgung stellt. Bei preiswerten oder gar kostenlosen Homepage-Vermittlern steht Ihnen normalerweise keine CGI-Schnittstelle zur Verfgung.
Es gibt keine Vorschriften dafr, in welcher Programmiersprache ein CGI-Programm geschrieben ist. Damit das Programm auf dem Server-Rechner ausfhrbar ist, muss es entweder fr die
Betriebssystemumgebung des Server-Rechners als ausfhrbares Programm kompiliert worden
sein, oder es muss auf dem Server ein Laufzeit-Interpreter vorhanden sein, der das Programm
ausfhrt. Wenn der Server zum Beispiel ein Linux-Rechner ist, fhrt er C-Programme aus, die
mit einem Linux-C-Compiler zu einer ausfhrbaren Datei kompiliert wurden. Wenn der Server
ein Windows NT-Rechner ist, knnen CGI-Scripts auch EXE-Dateien sein, die mit Compilern
fr C, Pascal, Visual Basic usw. erzeugt wurden. Die meisten heutigen CGI-Programme sind
jedoch keine kompilierten Programme, sondern lediglich Scripts, die von einem Interpreter
beim Aufruf ausgefhrt werden. Der bekannteste und beliebteste Interpreter ist dabei der PerlInterpreter.

84

Kapitel 2: Web-Technologien

Perl ist eine Programmiersprache, die eine Mischung aus klassischen Programmiersprachen wie
C und Script-Sprachen wie Unix-Shellscript darstellt. Perl ist extrem leistungsfhig und der PerlInterpreter hochgradig ausgereift. Perl hat deshalb auf zahllosen Gebieten die Herzen der Programmierer erobert. Unter anderem eben auch auf dem Gebiet der CGI-Programmierung. Aus
diesem Grund werden CGI-Programmierung und Perl mittlerweile oft in einem Atemzug genannt und als zusammengehrig dargestellt. Es ist nur wichtig zu wissen, dass die Verbindung
von CGI und Perl nichts Naturgegebenes oder Notwendiges ist. CGI ist lediglich eine Norm fr
eine Programmierschnittstelle, die Web-Server-Software untersttzen sollte, und Perl ist eine
universell einsetzbare Script-Sprache, die sich allerdings auf Grund ihrer Charakteristik hervorragend fr die CGI-Programmierung eignet.

2.5.2 CGI/Perl-Informationen
Fr CGI gibt es keinen Standard, der dem Status von HTML, CSS oder XML vergleichbar wre.
Das W3-Konsortium, bei dem es zwar auch eine Arbeitsgruppe gibt, die sich um das HTTPProtokoll kmmert, klammert die CGI-Schnittstelle aus den HTTP-Dokumenten aus. Die CGISchnittstelle wurde mit einem der ersten und seinerzeit erfolgreichsten Web-Server-Produkte
eingefhrt, nmlich mit dem NCSA-Web-Server (NCSA = National Center for Supercomputing,
eine akademische Institution). Die Originalspezifikation fr die CGI-Schnittstelle von NCSA ist
auf den Web-Seiten von NCSA noch verfgbar.
The CGI Specification (hoohoo.ncsa.uiuc.edu/cgi/interface.html)
Allzu viel gehrt eigentlich gar nicht dazu es muss lediglich vom Web-Server untersttzt werden. Der NCSA-Server spielt mittlerweile keine Rolle mehr, die klare Fhrungsrolle unter den
Web-Server-Produkten hat mittlerweile der frei verfgbare Apache Web-Server bernommen.
Dieser untersttzt die CGI-Schnittstelle selbstverstndlich auch. Perl als Programmiersprache
und der Perl-Interpreter sind lizenzfrei und kostenlos verfgbar. Die Einstiegsseite zu allen
Belangen rund um Perl ist www.perl.com.

2.6

PHP

2.6.1 PHP und HTML

Mit HTML alleine lassen sich keine dynamisch generierten Inhalte erzeugen. Dazu brauchen Sie
irgendeine Form von Script-Sprache. JavaScript ist fr viele kleinere Flle recht praktisch, beispielsweise um an einer bestimmten Stelle im Text immer das jeweils aktuelle Tagesdatum auszugeben. Der Vorteil von JavaScript ist, dass es sich problemlos in HTML-Dateien einbetten
lsst. Mit CGI/Perl ist wesentlich mehr mglich als mit JavaScript vor allem all jene Dinge, die
eine Datenverarbeitung auf dem Server-Rechner erfordern. Die Datenverarbeitung eines Gstebuchs fr ein Web-Projekt beispielsweise muss auf dem Server-Rechner stattfinden. Der Grund
ist, dass Daten zentral gespeichert werden mssen, damit sie allen Seitenbesuchern zur Verfgung stehen im Fall des Gstebuchs die vorhandenen Gstebucheintrge. Der Nachteil von
CGI und Perl ist, dass Perl-Scripts separate Dateien sind, die aufgrund der Charakteristik der
CGI-Schnittstelle meistens in ganz anderen Verzeichnissen abgelegt werden mssen als die
HTML-Dateien des Web-Projekts. Ein weiteres Problem ist, dass Perl als Universalsprache aus-

2.7 ASP

85

gelegt ist und nicht speziell fr dynamische Web-Seiten entwickelt wurde. Manche Dinge, die
sich ein Entwickler von dynamischen Web-Seiten wnscht, sind in Perl nur schwer und ber
Umwege zu erreichen. Gute Perl-Programmierer bekommen zwar jedes Problem in den Griff
aber der Weg zum guten Perl-Programmierer ist weit und lang.
An diesen Problemzonen von Perl setzt PHP an. Die Abkrzung steht fr Hypertext Preprocessor. Das Konzept dahinter ist, dass PHP-Code hnlich wie JavaScript direkt in HTML-Dateien
an einer dafr geeigneten Stelle notiert werden kann. Wenn die HTML-Datei dann im Web abgelegt ist und von einem Web-Browser aufgerufen wird, erkennt der Web-Server, der die Datei
zum Browser bermittelt, aufgrund bestimmter Konventionen, dass es sich nicht um eine gewhnliche HTML-Datei handelt, sondern um eine HTML-Datei mit eingebettetem PHP-Code.
Eine solche Datei lsst er dann zunchst von dem serverseitig installierten PHP-Interpreter verarbeiten. Dieser liest in der HTML-Datei die PHP-Code-Passagen aus, fhrt den Code aus und
erzeugt daraus den endgltigen HTML-Code, der schlielich an den Browser gesendet wird.
PHP kann alles, was mit CGI und Perl auch mglich ist. Und manches ist mit PHP durchaus
einfacher als mit CGI und Perl, weil der PHP-Interpreter viel strker als etwa der Perl-Interpreter
auf aktuelle Belange des Web-Publishing ausgerichtet ist. So ist es beispielsweise mit PHP auch
mglich, PDF-Dateien dynamisch zu generieren, um druckreife Daten an den Browser zu senden. Mit Perl geht so etwas zwar auch, doch dazu muss der Programmierer sich erst mal nach
einem geeigneten Modul umsehen, dieses installieren und sich dann mit der moduleigenen Dokumentation beschftigen. Beim PHP-Interpreter ist dagegen alles inklusive und fest eingebaut.
Allerdings platzt der PHP-Interpreter aufgrund seines Feature-Umfangs allmhlich aus allen
Nhten und wird durch die Alles-inklusive-Philosophie nicht gerade schneller auch wenn er
mittlerweile die gleiche interne Technik wie der Perl-Interpreter verwendet, nmlich Scripts erst
einmal zu kompilieren und sie dann auszufhren. Letztendlich aber bestimmen immer eine
ganze Reihe von Faktoren mit darber, wie performant eine dynamische Web-Seite wirklich ist
unter anderem die Anzahl der Seitenaufrufe, die Leistungsfhigkeit der Server-Hardware, die
Netzanbindung des Servers usw. In der Praxis hat sich PHP jedenfalls bestens bewhrt und wird
von vielen groen Web-Angeboten mit Erfolg eingesetzt.

2.6.2 PHP-Informationen
PHP und der PHP-Interpreter sind frei verfgbar und lizenzfrei benutzbar. Entwickelt werden
Sprache und Interpreter von der so genannten PHP Group, einem Projektzusammenschluss von
Programmierern. Die Einstiegsseite zu allen Belangen rund um PHP ist www.php.net/.

2.7

ASP

2.7.1 ASP und HTML

ASP steht fr Active Server Pages (Aktive Server-Seiten) und stellt hnlich wie PHP eine Alternative zu CGI/Perl dar. Auch bei ASP geht es also darum, serverseitig dynamische Web-Seiten zu
erzeugen, beispielsweise, um Suchtreffer, die sich aufgrund einer Datenbankabfrage ergeben, in
HTML-Form aufgelistet an den aufrufenden Browser zu senden. hnlich wie PHP-Code knnen
Sie Script-Code bei ASP direkt in HTML einbetten es sind also nicht wie bei Perl und CGI

86

Kapitel 2: Web-Technologien

separate Scripts erforderlich, die in speziellen Verzeichnissen abgelegt werden mssen. Im

Unterschied zu PHP ist ASP jedoch strker an die Welt von Microsoft und Windows gekoppelt.
Zwar gibt es ASP durchaus auch fr Linux und andere Unix-basierte Systeme, und neben
Microsoft Web-Servern werden auch der Apache Server und viele andere untersttzt. Doch die
ASP-Integration ist fr Web-Server von Microsoft optimiert und wird daher vorwiegend unter
Windows NT eingesetzt.
ASP ist im Gegensatz zu PHP nur eine Umgebung, keine eigene Script-Sprache. Als ScriptSprachen kommen vor allem die Microsoft-eigenen Sprachen JScript und VBScript (Visual Basic
Script) in Frage. Aber auch der Einsatz von Perl fr ASP ist mglich und hier zeigt sich denn
auch wieder die universelle Verwendbarkeit von Perl, das etwa im Gegensatz zu PHP nicht an
bestimmte Umgebungen gebunden ist. VBScript ist allerdings die Standard-Script-Sprache fr
ASP.
Das ASP-Prinzip ist das gleiche wie bei PHP. Aufgrund bestimmter Konventionen erkennt der
Web-Server, dass eine HTML-Datei eine ASP-Datei ist. Der Server mit integrierter ASP-Umgebung fhrt dann den in der Datei enthaltenen Script-Code aus und sendet am Ende den dadurch
erzeugten, gesamten HTML-Code an den aufrufenden Browser.

2.7.2 ASP-Informationen
Die ASP-Umgebung ist lizenz- und kostenpflichtig. Vertrieben wird ASP von Sun Chili!Soft
(www.chilisoft.com/).

2.8

Java

2.8.1 Java und HTML

Java ist eine von Sun Microsystems entwickelte, vollkommen plattformunabhngige Programmiersprache. Die Sprache lehnt sich in Aufbau und Syntax an C/C++ an. Java wurde zunchst
hauptschlich als Programmiersprache fr Internet-Anwendungen gefeiert. Nach einigen Jahren
zeichnet sich jedoch ab, dass Java zwar fr alle mglichen Zwecke gut geeignet ist, dass es aber im
Web nicht die Dominanz erreicht hat, die von Sun ursprnglich mal erhofft wurde. Im Web
wird Java heute vor allem im Zusammenhang mit Online-Banking, Online-Broking, web-basierten Chats und fr didaktische Zwecke eingesetzt. Im Bereich der Animationen, Effekte, OnlineSpiele usw. wird Java dagegen immer strker von Flash verdrngt.
Java zeichnet sich u.a. durch folgende Eigenschaften aus:
Objekt-Orientierung: Java ist streng objektorientiert und stellt dem Programmierer eine Flle
elementarer und komplexer Objekte bereit.
Sichere Speicherverwaltung: Unter Java ist die Arbeitsspeicherverwaltung aus Programmierersicht wesentlich unkritischer als beispielsweise unter C. Es gibt keine durch Zeiger adressierten Speicherbereiche von unbestimmter Gre, sondern nur Speichervektoren von fest
definierter Lnge. Die fehlerarme Speicherverwaltung ist besonders wichtig, da Java-Programme ohne Portierungsaufwand in verschiedenen Rechnerumgebungen ablaufen sollen.

2.8 Java

87

Plattformunabhngige Programmdateien: Java-Programme werden wie herkmmliche Programme zu Objektcode kompiliert, jedoch nicht in eine bestimmte Prozessor- oder Betriebssystemumgebung eingebunden, also nicht gelinkt. Java-Programme laufen daher auf allen
Plattformen, wenn ein Java-Objektcode-Interpreter installiert ist. Web-Browser, die Java
ausfhren, starten ihre eigene Java-Konsole zu diesem Zweck.
Java-Programme, die fr den Einsatz im Internet gedacht sind, heien Applets. Sie knnen JavaApplets in HTML-Dateien so referenzieren, dass die Anwendung innerhalb der Web-Seite in
einem dazu geeigneten Bereich erscheint. Die Bildschirmausgaben bzw. die Interaktionen zwischen Anwender und Programm finden also im Anzeigefenster des WWW-Browsers statt.
Applets sind eine Sonderform von Java-Programmen, die in ihren Mglichkeiten beschrnkt
sind. Auf diese Weise wird sichergestellt, dass Java-Applets nicht ohne das Einverstndnis des
Anwenders irgendetwas auf dessen Rechner tun knnen, z.B. Dateien verndern oder lschen.
Java-Applets laufen also in einer so genannten Sandbox, einem Sicherheitskfig.
Innerhalb des Client-Server-Modells im Web kann Java auf beiden Seiten vorkommen. Applets,
die im Browser ausgefhrt werden, sind clientseitig, laufen also auf dem Rechner des Anwenders.
Hufig kommunizieren solche Applets aber ber eigene Protokolle online mit entsprechenden,
in Java programmierten Gegenstellen auf einem Server. Bei einer Anwendung wie einem Chat
beispielsweise gibt es einerseits ein Applet, das im Browser luft und dem Anwender die ChatOberflche prsentiert doch damit tatschlich ein Mehrpersonen-Chat mglich ist, muss
natrlich auch auf dem Server irgendetwas laufen, was die Chat-Teilnehmer verwaltet und in
den Client-Anwendungen anzeigt. Hinter Java-Applets verbergen sich deshalb hufig verteilte
Anwendungen, die aus einem Applet und zugehrigen Server-Programmen bestehen.
Um selbst ausfhrbare Java-Applets erstellen zu knnen, brauchen Sie einen Texteditor, um den
Java-Quellcode zu generieren, und das Java Entwickler-Kit von Sun. Das Entwickler-Kit enthlt
alle Klassenbibliotheken der Programmiersprache Java, einen Applet-Viewer und einen Compiler. Neben einem Compiler, der speziell Java-Applets zum Einsatz im WWW erzeugt, gibt es im
Java Developer's Kit aber noch einen Compiler, der Internet-unabhngige Programme fr beliebige PCs oder andere Softwaretrger erzeugt. Dieser Compiler erlaubt alle Mglichkeiten, um
vom Webunabhngige Software zu erstellen. Fr grere Softwareprojekte mit Java gibt es ausgereifte Java-Entwicklungsumgebungen, hnlich wie fr C++, Visual Basic oder Delphi.

2.8.2 Java-Informationen
Das Java-Entwickler-Kit ist frei fr den persnlichen Gebrauch und fr nichtkommerzielle Zwecke. Wenn Sie kommerzielle Anwendungen mit Java erstellen wollen, mssen Sie fr die Compiler-Software eine kostenpflichtige Lizenz erwerben. ber die folgende Seite finden Sie im Web
den Einstieg zu Software und Dokumentation rund um Java:
Java-Entwickler-Seiten (Sun, java.sun.com/)

88
2.9

Kapitel 2: Web-Technologien

ActiveX

2.9.1 ActiveX und HTML

ActiveX ist eine von Microsoft eingefhrte Technologie fr ausfhrbaren Programmcode auf
Web-Seiten mit dem Anspruch einer Alternative oder Konkurrenz zu Java. ActiveX ist dabei ein
berbegriff fr verschiedene Softwarekomponenten. Alle diese Komponenten basieren auf dem
so genannten Component Object Model (COM). ActiveX ist jedoch kein Internet-Standard im
herkmmlichen Sinn, sondern der Versuch, spezifische Eigenschaften des MS-Windows-Betriebssystems fr Web-Seiten nutzbar zu machen. So ist es mit Hilfe von ActiveX beispielsweise
mglich, Eingaben aus HTML-Formularen einer Web-Seite ber die OLE-Schnittstelle von Windows direkt in eine Excel-Tabelle oder eine Access-Datenbank einzulesen (oder umgekehrt).
ActiveX-Controls benutzen nmlich die OLE-Schnittstelle von Windows, um mit ihrer Umgebung zu kommunizieren. Microsoft bemht sich zwar um Lsungen, die sich auch auf
Macintosh- und Unix-Rechner bertragen lassen. Doch letztendlich ist ActiveX fr MS-Windows optimiert, und das mit Absicht.
Ein wesentlicher Bestandteil von ActiveX sind die so genannten ActiveX-Controls. Solche Controls sind Programme oder Programm-Module, die sich in HTML-Dateien als Objekt einbinden
lassen, hnlich wie Java-Applets. Der Programmcode wird im Arbeitsspeicher des Client-Rechners (also des Anwenders, der eine Web-Seite aufruft) ausgefhrt. Normalerweise wird dabei
auch eine so genannte ActiveX-Layout-Datei auf dem Rechner des Anwenders installiert. Mit
ActiveX-Controls lassen sich alle Arten von Anwendungen usw. realisieren.
Es gibt keine festen Vorschriften dafr, in welcher Programmiersprache ActiveX-Code geschrieben ist. Der Compiler muss jedoch das Component Object Model (COM) untersttzen. Um
ActiveX-Controls zu erstellen, brauchen Sie also keine bestimmte Software, aber Sie brauchen
einen COM-fhigen Compiler. Das kann Visual Basic sein, Microsoft C++ usw.
ActiveX wird derzeit nur vom MS Internet Explorer direkt ausgefhrt. Fr Netscape gibt es ein
ActiveX-Plug-In zum Downloaden. Bei Netscape-Anwendern, die das Plug-In installiert haben,
sind ActiveX-Controls dann auch ausfhrbar.
Diskutiert wird hufig ber das Sicherheitskonzept von ActiveX. Wenn Sie als Anwender erlauben, dass ein ActiveX-Control auf Ihren Rechner geladen wird, kann dieses Programm auf dem
Rechner so ziemlich tun und lassen was es will. Es gibt also keine Sandbox-Beschrnkungen
bei ActiveX, sondern nur eine Vertrauensbarriere (nmlich die Abfrage des Web-Browsers, ob
der Anwender mit der Ausfhrung des Programms auf seinem Rechner einverstanden ist oder
nicht). Dadurch ist mit ActiveX aus Programmierersicht zwar viel mehr realisierbar als mit JavaApplets, doch aus Anwendersicht sind ActiveX-Module tendenziell unsicherer als Java-Applets.

2.9.2 ActiveX-Informationen
Auf den Web-Seiten von Microsoft (www.microsoft.com/) knnen Sie nach Informationen zu
ActiveX suchen. Microsoft bietet sie an verschiedenen Stellen an. ber die Domain activex.com
(www.activex.com/) werden Sie auf eine Adresse weitergeleitet, an der Sie geeignete Software und
vorhandene ActiveX-Controls finden. In diesem Buch wird die ActiveX-Technologie nicht weiter
behandelt.

2.10 Flash

89

2.10 Flash
2.10.1 Flash und HTML
Flash bietet die Mglichkeit, Multimedia-Effekte auf Web-Seiten zu bringen, aber auch Anwendungen wie Spiele, Simulationen oder Navigationsuntersttzung fr Web-Seiten.
Flash ist jedoch der jngste Hype und der neueste Vertreter der Gattung ich mach HTML tot
zumindest ist es von jenen so hochstilisiert worden, die sich mit HTML und den offenen Standards noch nie abfinden konnten. Da hinter Flash ein kommerzielles Softwareprodukt steckt, das
in keiner Weise mit den offenen Internet-Standards vergleichbar ist, werden also pfel mit
Birnen verglichen. Genauso knnte man sagen ich brauche kein HTML fr Tabellen, ich habe
schlielich MS Excel. Und es spricht nichts dagegen, eine Excel-Datei als Objekt in HTML einzubinden oder einfach so ins Web zu stellen und die Besucher auf diese Datei zu lenken bei
installiertem Excel oder Excel-Viewer wird der Browser dann brav die Anwendung ffnen und
die Datei darin anzeigen. Nicht anders ist es bei Flash. Es handelt sich um ein Binrformat, das
Sie wahlweise als Multimedia-Objekt in HTML einbinden knnen, oder Sie bieten Flash-Dateien
direkt an die neueren Browser haben ein Plug-In fr Flash und knnen Flash direkt anzeigen.
Mit Internet-Standards hat das alles jedoch nichts zu tun, und wenn Macromedia, dem
Softwarehersteller von Flash, morgen einfllt, dass Flash eingestampft oder vllig umgekrempelt
wird, dann ist das eben so, und niemand kann etwas dagegen tun.
Flash steht vor allem dort hoch im Kurs, wo man der Meinung ist, auf einer Web-Seite msse es
zugehen wie im Fernsehen. Dauernd irgendetwas in Bewegung, schicke berblenden, LichtEffekte, Gerusche, Musik usw. Manche Kreativlinge unterliegen diesem Glauben, aber noch
mehr die Marketing-Abteilungen von Firmen, die bei Agenturen ihren Web-Auftritt gestalten
lassen und dafr am Bildschirm etwas sehen wollen, von dem sie glauben, es sei besonders
schwierig und atemberaubend. Dabei schaden die von der Mehrheit der Seitenbesucher brigens als sehr nervig empfundenen Effekthaschereien, fr die Flash vorwiegend eingesetzt wird,
dieser Technologie mehr als sie ihr nutzen. Denn eigentlich ist Flash durchaus sinnvoll einsetzbar. Flash basiert auf bewegter Vektorgrafik. Beim Erstellen der so genannten Flash-Movies
arbeiten Sie mit der Flash-Autoren-Software, mit der Sie grafische Darstellungen, Text und eingebundene Elemente wie Pixelgrafiken oder Sound an einer Zeitleiste positionieren. Dadurch
bestimmen Sie einen zeitlichen Ablauf. Flash kann bergnge zwischen zwei Zustnden auf der
Zeitleiste berechnen. Angenommen, Sie haben bei 0 Sekunden einen blauen Punkt und bei 1 Sekunde an der gleichen Stelle einen roten Punkt, dann knnen Sie fr den Punkt einen flieenden
Farbbergang von Blau nach Rot definieren, der 1 Sekunde lang dauert. Nicht jedes Movie hat
jedoch Anfang und Ende. Ebenso sind Schleifen-Effekte mglich, durch die sich mit Flash dialogorientierte Anwendungen wie Spiele oder Navigationshilfen realisieren lassen. Flash bietet
auch webspezifische Schnittstellen an. So ist es problemlos mglich, in Flash anklickbare Verweise zu anderen Web-Seiten einzubrauen. Im didaktischen Bereich ist Flash beispielsweise gut
einsetzbar, weil es sich hervorragend zur Visualisierung von Ablufen und Zusammenhngen
eignet. Vereinzelt wird es auch fr solche sinnvollen Zwecke eingesetzt doch im Web dominieren leider vorwiegend die dmmlich daherfliegenden Schriftzge und Blitz-Effekte.
Fr anspruchsvollere Anwendungen reicht die visuelle Oberflche der Flash-Autoren-Software
alleine oft nicht aus. Flash hat deshalb zustzlich eine integrierte Programmiersprache, die es
Entwicklern erlaubt, komplexere Aufgaben zu lsen.

90

Kapitel 2: Web-Technologien

Alles in allem ist Flash also ein mchtiges Werkzeug, um Inhalte zu visualisieren. Nicht unerwhnt bleiben sollte jedoch, dass es auch frei verfgbare, offen dokumentierte und letztlich noch
leistungsfhigere Internet-Standards fr das gibt, was Flash leistet. So werden beim W3-Konsortium zwei XML-basierte Sprachen namens SVG und SMIL standardisiert, die in Verbindung mit
JavaScript und DOM hnliche Mglichkeiten erffnen. Doch leider werden die modernen
Browser mit Flash-Plug-Ins ausgeliefert, sind aber noch nicht ohne weiteres in der Lage, SVG
oder SMIL zu verarbeiten. Und solange es kein Autorenwerkzeug dafr gibt, das auch solche
Web-Entwickler anspricht, die keinen Quelltext am Bildschirm ertragen knnen, werden es diese
Standards gegen Erscheinungen wie Flash schwer haben.

2.10.2 Flash-Informationen
Auf den Web-Seiten von Macromedia (www.macromedia.com/) knnen Sie nach Informationen
zu Flash suchen. In allen groen Suchmaschinen im Web finden Sie zahlreiche Web-Angebote,
die sich mit Flash auseinandersetzen. Die Autoren-Software, die zum Erstellen von Flash-Movies
erforderlich ist, ist kosten- und lizenzpflichtig. Die Flash-Player-Software, die auch als Plug-In
bei vielen Browsern mit ausgeliefert wird, ist dagegen frei verwendbar. In diesem Buch wird
Flash nicht weiter behandelt.

91

Allgemeine Regeln fr HTML

3.1

Textauszeichnung

3.1.1

Elemente und Tags in HTML

HTML-Dateien bestehen aus Text. Zur Textauszeichnung gibt es bestimmte Zeichen aus dem
normalen Zeichenvorrat. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTMLElemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein
einleitendes und ein abschlieendes Tag markiert. Der Inhalt dazwischen ist der Gltigkeitsbereich des entsprechenden Elements. Tags werden in spitzen Klammern notiert. Ein Beispiel:
<h1>HTML die Sprache des Web</h1>

Das Beispiel zeigt eine berschrift 1. Ordnung. Das einleitende Tag <h1> signalisiert, dass eine
berschrift 1. Ordnung folgt (h = heading = berschrift). Das abschlieende Tag </h1> signalisiert das Ende der berschrift. Ein abschlieendes Tag beginnt mit einem Schrgstrich (/).
Beachten Sie: Bei herkmmlichem HTML spielt es keine Rolle, ob die Elementnamen in den
Tags in Klein- oder Grobuchstaben notiert werden. Dort bedeuten z.B. <h1> und <H1> das
Gleiche. In der neueren HTML-Variante, in XHTML, mssen die Elementnamen dagegen klein
geschrieben werden. Das W3-Konsortium empfiehlt zwar fr HTML aus Grnden der Lesbarkeit, Namen von Elementen gro zu schreiben. Im Hinblick auf eine sptere Deklarierung eines
Dokuments als XHTML-Dokument ist diese Idee jedoch nicht unbedingt so gut und es ist besser, von vorneherein alle Elementnamen in Kleinbuchstaben zu schreiben.
Es gibt auch einige Elemente mit Standalone-Tags, d.h. Elemente, die keinen Inhalt haben und
deshalb nur aus einem Tag bestehen statt aus Anfangs- und End-Tag. Ein Beispiel:
Eine Zeile, ein manueller Zeilenumbruch<br>
und die nchste Zeile

Am Ende der ersten Zeile signalisiert <br>, dass ein manueller Zeilenumbruch eingefgt werden
soll (br = break = Umbruch).
Beachten Sie: Wenn Sie XHTML-gerecht schreiben wollen, mssen Sie Elemente mit Standalone-Tags anders notieren: Anstelle von <br> mssen Sie dann <br /> notieren also den Elementnamen mit einem abschlieenden Schrgstrich. Alternativ dazu knnen Sie auch
<br></br> notieren, also ein Element mit Anfangs- und End-Tag, aber ohne Inhalt. Mehr darber erfahren Sie im Kapitel 14 (XHTML und HTML).

92
3.1.2

Kapitel 3: Allgemeine Regeln fr HTML

Verschachtelung von Elementen

Elemente knnen ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische
Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Deshalb sprechen
Fachleute auch von strukturiertem Markup. Ein Beispiel:
<h1><i>HTML</i> die Sprache des Web</h1>

Das i-Element steht fr schrg gestellte Schrift (italic = kursiver Text). Der Text zwischen <i>
und </i> wird als kursiv interpretiert, abhngig von der eingestellten Schriftart und Schriftgre
fr die berschrift 1. Ordnung.

3.1.3

Attribute in Tags

Einleitende Tags und Standalone-Tags knnen zustzliche Angaben enthalten. align="center"

bewirkt, dass der Text zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Ein
Beispiel:
<h1 align="center">HTML die Sprache des Web</h1>

Es gibt folgende Arten von Attributen in HTML-Elementen:

Attribute mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. bei <h1
align="center"> (berschrift 1. Ordnung zentriert ausgerichtet hier sind nur die Werte
left, center, right und justify erlaubt).
Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. <style type="text/css"> (Bereich fr Stylesheets
definieren hier wird ein so genannter Mime-Typ als Wert erwartet, und Mime-Typen haben
immer den Aufbau Typ/Untertyp). Oder <table border="1"> (Tabelle mit Rahmen von 1
Pixel Strke hier wird eine numerische Angabe erwartet.)
Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <p title="Aussage
mit Vorbehalt"> hier kann ein ganzer Text zugewiesen werden.
Allein stehende Attribute, z.B. <hr noshade> (Trennlinie ohne Schatten). Allein stehende
Attribute gibt es allerdings nur in herkmmlichem HTML. Wenn Sie XHTML-gerecht
schreiben wollen, mssen Sie <hr noshade="noshade"> notieren. Mehr darber erfahren
Sie im Kapitel 14.1.9 (XHTML und HTML).
Alle Werte, die Sie Attributen zuweisen, mssen in Anfhrungszeichen stehen. Die meisten
Browser nehmen es zwar nicht bel, wenn die Anfhrungszeichen fehlen, doch seit dem HTMLStandard 4.0 sind die Anfhrungszeichen klipp und klar vorgeschrieben, und wer ordentliches
HTML schreiben will, sollte sich daran halten.
Wie bei Elementnamen, so gilt auch bei Attributnamen: Bei herkmmlichem HTML spielt es
keine Rolle, ob die Attributnamen in Klein- oder Grobuchstaben notiert werden. In der neueren HTML-Variante, in XHTML, mssen die Attributnamen dagegen klein geschrieben werden.
Bei den Wertzuweisungen an Attribute kann Gro- und Kleinschreibung abhngig von der Art
des Wertes unterschieden werden oder auch nicht.

3.2 Grundgerst einer (X)HTML-Datei

93

Neben Attributen, die nur in bestimmten HTML-Elementen vorkommen knnen, gibt es auch
so genannte Universalattribute, die in vielen bzw. fast allen HTML-Elementen erlaubt sind. Ein
Beispiel:
<p id="Einleitung">Text</p>

Das Beispiel definiert einen Textabsatz mit den HTML-Tags <p> und </p>. Im einleitenden <p>Tag wird ein Universalattribut notiert, nmlich das Attribut id=. Damit knnen Sie dokumentweit eindeutige Namen fr einzelne HTML-Elemente vergeben. Einzelheiten ber solche Attribute erfahren Sie im Abschnitt 13.1.

3.1.4

HTML-Parser

Unter einem HTML-Parser versteht man eine Software, die HTML-Auszeichnungen erkennt
und in strukturierten Text umsetzt. Jeder Web-Browser verfgt ber einen HTML-Parser, um
berhaupt mit HTML klarzukommen. Solche HTML-Parser werden nun leider auf den meisten
Web-Seiten mit Syntaxfehlern in der Textauszeichnung konfrontiert. Oft sind es kleinere, nicht
allzu tragische Fehler, doch es gibt auch viele Web-Seiten, deren HTML-Quelltext nur das Prdikat ungengend verdient, weil darin belste Verunstaltungen der HTML-Regeln vorkommen.
Strenge Parser, die genau gegen die HTML-Regeln prfen, mssten die Umsetzung solcher WebSeiten eigentlich abbrechen, und anstelle der Seite wrden die Browser dann nur eine lapidare
Fehlermeldung anzeigen. Da ein solcher Browser am breiten Markt jedoch keine Chance htte,
weil er kaum eine bekannte Web-Seite anzeigen wrde, sind die HTML-Parser der heute verbreiteten Browser ziemlich gutmtige Wesen, die so ziemlich alles fressen, was ihnen vorgesetzt
wird, und irgendetwas daraus machen, meistens sogar durchaus das, was der Autor der WebSeite erreichen wollte. Am weitesten in dieser Kunst hat es der HTML-Parser des MS Internet
Explorer gebracht. Das hat dem Internet Explorer einerseits den Ruf beschert, am besten
HTML zu knnen, aber Fachleute rmpfen aus dem gleichen Grund gerne die Nase ber diesen
Browser mit dem Argument, dass er durch sein Verhalten das schlampige und fehlerhafte Kodieren von HTML nur frdere.
Angesichts der wachsenden Komplexitt der verschiedenen Sprachen, also HTML in Verbindung
mit eingebettetem CSS, JavaScript, PHP usw., wird es immer wichtiger, die Syntaxregeln von
HTML einzuhalten. Diese Regeln finden Sie in der HTML-Referenz im Anhang genauer beschrieben.

3.2

Grundgerst einer (X)HTML-Datei

Eine gewhnliche HTML-Datei besteht grundstzlich aus folgenden Teilen:

Dokumenttyp-Angabe (Angabe zur verwendeten HTML-Version)
Header (Kopfdaten, z.B. Angaben zu Titel u..)
Body (Krper anzuzeigender Inhalt, also Text mit berschriften, Verweisen, Grafikreferenzen usw.)

94

Kapitel 3: Allgemeine Regeln fr HTML

3.2.1

Grundgerst einer HTML-Datei

Das folgende Listing zeigt das Schema einer vollstndigen HTML-Datei mit allen notwendigen
Tags und Angaben, aber ohne Inhalt:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
</body>
</html>

Die erste Zeile sieht fr Anfnger zunchst verwirrend aus. Diese etwas komplizierte Angabe ist
eine Dokumenttyp-Angabe. Einzelheiten dazu weiter unten bei Abschnitt 3.2.3 (DokumenttypAngaben).
Der gesamte brige Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag fr den Kopf <head>. Zwischen
diesem Tag und seinem Gegenstck </head> werden die Kopfdaten einer HTML-Datei notiert.
Die wichtigste dieser Angaben ist der Titel der HTML-Datei, markiert durch <title> bzw.
</title>. Unterhalb davon folgt der Textkrper, markiert durch <body> bzw. </body>.
Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster
des WWW-Browsers angezeigt werden soll.
Beachten Sie: Wenn Sie Frames (mehrere Bildschirmfenster) einsetzen wollen, sieht das Grundgerst von Dateien, in denen ein Frameset definiert wird, anders aus. Dies wird im Abschnitt
9.1.2 Grundgerst einer HTML-Datei mit Framesets beschrieben. Befassen Sie sich mit Frames
aber erst, wenn Sie mit den Grundlagen von HTML schon etwas vertrauter sind.

3.2.2

Grundgerst einer XHTML-Datei

Wenn Sie XHTML-gerechtes HTML schreiben wollen, sieht das Grundgerst hnlich aus. Nur
am Anfang ist einiges anders. Das Schema:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text des Titels</title>
</head>
<body>

3.2 Grundgerst einer (X)HTML-Datei

95

</body>
</html>

Noch vor der Dokumenttyp-Angabe sollte bei XHTML-Dateien der Bezug zu XML hergestellt
werden. Dazu dient die erste Zeile mit den Fragezeichen hinter der ffnenden spitzen Klammer
und der schlieenden spitzen Klammer. Notieren Sie diese Zeile so wie im Beispiel angegeben. Es
handelt sich um eine so genannte XML-Deklaration.
Bei der Dokumenttyp-Angabe muss ein fr XHTML gltiger Dokumenttyp angegeben werden.
Einzelheiten dazu im folgenden Abschnitt 3.2.3 ber Dokumenttyp-Angaben. Im einleitenden
<html>-Tag muss der verwendete XML-Namensraum mit einem Attribut namens xmlns= angegeben werden. Benutzen Sie die Angabe wie im obigen Beispiel.
Damit ist die Datei als XHTML-Datei deklariert. Der weitere Quelltext ist normales HTML.
Allerdings mssen Sie in diesem Fall die Unterschiede zwischen XHTML und HTML beachten
(Kapitel 14). Befassen Sie sich mit diesen Unterschieden aber erst, wenn Sie schon etwas vertrauter mit HTML sind.

3.2.3

Dokumenttyp-Angaben

HTML ist innerhalb der Familie der Auszeichnungssprachen nur eine von vielen, wenn auch die
prominenteste. HTML selbst hat auerdem bereits eine mehrjhrige Geschichte und ist in verschiedenen, recht unterschiedlichen Versionen normiert worden. Mit der Dokumenttyp-Angabe
bestimmen Sie, welche Auszeichnungssprache in welcher Version Sie verwenden. Eine auslesende Software, etwa ein Web-Browser, kann sich an dieser Angabe orientieren.
Die Regeln fr HTML sind mit Hilfe von SGML formuliert, die Regeln fr XHTML mit Hilfe
von XML. Nach den Regeln einer SGML- oder XML-basierten Auszeichnungssprache ist eine
HTML-Datei oder eine XHTML-Datei erst dann eine gltige (valide) Datei, wenn sie einen
bestimmten Dokumenttyp angibt und sich dann innerhalb des restlichen Quelltextes genau an
die Regeln hlt, die in diesem Dokumenttyp definiert sind. Denn hinter jeder DokumenttypAngabe stecken so genannte Dokumenttyp-Definitionen (DTD). Auch fr HTML gibt es solche
Dokumenttyp-Definitionen. Dort ist geregelt, welche Elemente ein Dokument vom Typ HTML
enthalten darf, welche Elemente innerhalb von welchen anderen vorkommen drfen, welche
Attribute zu einem Element gehren, ob die Angabe dieser Attribute Pflicht ist oder freiwillig
usw.
Als HTML-Anfnger mag Ihnen der Aufwand, der da betrieben wird, vielleicht nicht ganz einleuchten. Doch genau diese Dokumenttypen, mit deren Hilfe sich Regeln fr Sprachen wie
HTML genau definieren lassen, sind ein riesiger Fortschritt in der EDV. Denn nur so lsst sich
das Konzept der softwareunabhngigen, aber regelgerechten Dateiformate konsequent durchsetzen. Ohne den Bezug auf die offiziellen Regeln wren Sprachen wie HTML unverbindliche
Konventionen, die schnell in Dialekten verwssern wrden. Das ist genauso wie bei natrlichen
Sprachen: Ohne eine gewisse Regelung der Rechtschreibung wrde sich eine Schriftsprache im
Laufe der Zeit in so verschiedene Richtungen entwickeln, dass am Ende kaum jemand mehr verstehen kann, was der andere meint. Da Software auerdem noch viel dmmer ist als Menschen
und viel genauere Vorgaben bentigt, um zu verstehen, was man ihr mitteilt, ist das Einhalten
von Regeln dort sogar noch wesentlich wichtiger.

96

Kapitel 3: Allgemeine Regeln fr HTML

Beispiel einer Dokumenttyp-Angabe:

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

Notieren Sie die Dokumenttyp-Angabe am Anfang der HTML-Datei vor dem einleitenden
<html>-Tag. Hinter der startenden spitzen Klammer folgt ein Ausrufezeichen. Dahinter folgt die
Angabe DOCTYPE HTML PUBLIC. Das bedeutet, dass Sie sich auf die ffentlich verfgbare HTMLDTD beziehen. Die folgende Angabe, die in Anfhrungszeichen steht, ist wie folgt zu verstehen:
W3C ist der Herausgeber der DTD, also das W3-Konsortium. Eine Angabe wie DTD HTML 4.01
Transitional bedeutet, dass Sie in der Datei den Dokumenttyp HTML verwenden, und zwar
in der Sprachversion 4.01 und deren Variante Transitional. Das EN ist ein Sprachenkrzel und

steht fr die Sprache, in diesem Fall Englisch. Die Angabe bezieht sich darauf, in welcher natrlichen Sprache die Element- und Attributnamen der Tag-Sprache definiert wurden, nicht auf
den Inhalt Ihrer Datei. Benutzen Sie also immer EN, da die Namen von HTML-Elementen und
-Attributen auf der englischen Sprache basieren. Die Schrgstriche notieren Sie so wie im obigen
Beispiel.
Ferner enthlt die Dokumenttyp-Angabe eine Web-Adresse. Die Angabe dieser Adresse ist nicht
zwingend ntig. Eine Angabe wie:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">

ist also ebenfalls erlaubt. ber die angegebene Web-Adresse kann eine auslesende Software die
Dokumenttyp-Definitionen (DTD) aufrufen und in den darin notierten Regeln nachgucken.
Die meisten heutigen Browser tun das bei HTML allerdings nicht, weil sie ohnehin bei vielen
Web-Seiten mit belsten Sprachverunstaltungen rechnen mssen und die Fhigkeit, auch nicht
regelgerechtes HTML ordentlich auf den Bildschirm zu bringen, zugunsten der reinen Lehre
opfern. Das eigentlich gewnschte Verhalten ist allerdings, dass ein Browser dann, wenn eine
HTML-Datei eine Dokumenttyp-Angabe enthlt, auch auf der Einhaltung der Regeln dieses
Dokumenttyps besteht. Bei XML-Dokumenten ist es durchaus blich, dass ein Parser bei einem
Regelversto abbricht anstelle der Web-Seite erscheint dann nur eine trockene Fehlermeldung,
dass das Dokument nicht gltig (valide) sei.
Zum Redaktionszeitpunkt dieses Dokuments ist die HTML-Version 4.01 aktuell. Bei dieser
HTML-Version und auch schon bei der glatten Versionsnummer 4.0 gibt es drei Sprachvarianten. Fr eine davon mssen Sie sich entscheiden und den entsprechenden Dokumenttyp angeben.

Die Variante Strict fr HTML

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

Benutzen Sie diese Angabe, wenn Sie bestimmte Elemente und Attribute nicht mehr verwenden
wollen, die frher mal zum HTML-Standard gehrten, aber mittlerweile durch andere Mglichkeiten (vor allem durch CSS Stylesheets, siehe Kapitel 15) ersetzbar sind und deshalb nicht mehr
zum reinen HTML gehren. Ferner sind die Verschachtelungsregeln fr HTML-Elemente in

3.2 Grundgerst einer (X)HTML-Datei

97

der Strict-Variante enger und im Sinne strukturierter Inhalte sauberer formuliert. So ist es in
dieser Variante beispielsweise nicht erlaubt, zwischen <body> und </body> einfach nur Text zu
notieren. Alle Inhalte mssen in so genannten Block-Elementen stehen, z.B. in berschriften,
Textabstzen, Tabellen usw.

Die Variante Transitional fr HTML

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

Benutzen Sie diese Angabe, wenn Sie auch frher erlaubte Elemente und Attribute noch verwenden wollen. Ein Grund, sich fr diese Variante zu entscheiden, knnte sein, dass Sie Ihr HTML
so schreiben wollen, dass es auch mit Netscape 3.x und anderen lteren Browsern, die noch kein
CSS verstehen, in etwa so aussieht, wie Sie es wnschen. Denn in der Strict-Variante entfallen
praktisch alle Elemente und Attribute, die in HTML frher fr das optische Aufpppeln von
Web-Seiten gesorgt haben. Dazu gehren Angaben zur Textausrichtung, zu Hintergrundfarben
usw. All das knnen Sie auch mit CSS definieren, aber ltere Browser beherrschen noch kein
CSS. In der Variante Transitional sind auch die Regeln fr die Elementverschachtelung etwas
milder. So ist es nach dieser Variante erlaubt, zwischen <body> und <body> nackten Text auerhalb eines weiteren Elements zu notieren.

Die Variante Frameset fr HTML

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

Diese Angabe ist nur fr spezielle HTML-Dateien gedacht, in denen Framesets definiert werden.
Siehe dazu den Abschnitt 9.1, Framesets und Frames definieren.

Dokumenttyp-Angaben fr XHTML
Auch fr XHTML 1.0 gibt es die drei Varianten Strict, Transitional und Frameset. Im
Mittelteil der Dokumenttyp-Angabe muss jedoch bei Version 1.0 von XHTML XHTML 1.0
notiert werden. Auch die Web-Adressen fr den Bezug sind andere als bei HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

98

Kapitel 3: Allgemeine Regeln fr HTML

Dokumenttyp-Angaben fr XHTML 1.1:

Es gibt auch eine Sprachversion 1.1 von XHTML, die intern anders organisiert ist als XHTML
1.0. In XHTML 1.1 gibt es keine Sprachvarianten mehr. XHTML 1.1 entspricht nur noch der
Sprachvariante Strict von XHTML 1.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ltere Dokumenttyp-Angaben
In manchen Ausnahmefllen kann es sinnvoll sein, sich auch auf eine ltere HTML-Version zu
beziehen. Tun Sie dies jedoch nur, wenn irgendwelche technischen Grnde es erfordern. Folgende ltere Angaben gibt es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">

Benutzen Sie diese Dokumenttyp-Angabe, wenn Sie sich auf HTML 2.0 beziehen wollen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Benutzen Sie diese Dokumenttyp-Angabe, wenn Sie sich auf HTML 3.2 beziehen wollen. Dokumenttyp-Angaben anderer HTML-Versionen sind nicht mehr im Gebrauch.

3.2.4

Hinweis fr die Praxis

Wenn Sie nun entmutigt sind durch das ganze Wirrwarr von HTML und XHTML, HTMLSprachvarianten, XML-Deklarationen und Dokumenttyp-Anweisungen lassen Sie sich davon
nicht zu sehr beeindrucken. Das Wirrwarr ist dadurch entstanden, dass es viele Entwicklungen
gibt auf dem Gebiet der Auszeichnungssprachen und dass bei dieser Entwicklung auch nur mit
Wasser gekocht wird. Vieles war zunchst unausgereift. Heute ist man bemht, einen Spagat zu
machen zwischen den frhlichen Anfngen von HTML und den wachsenden Anforderungen,
die professionelle Datenverarbeitung an HTML stellt.
Benutzen Sie fr Ihre ersten Schritte in HTML zunchst einfach mal das oben vorgestellte
Grundgerst einer HTML-Datei, so wie es dort notiert ist. Lernen Sie den Umgang mit weiteren
HTML-Elementen und ihren Attributen sowie den Umgang mit CSS Stylesheets kennen. Wenn
Sie erst einmal vertrauter sind mit diesen Sprachen, werden Sie auch besser verstehen, welchen
Sinn und Zweck die Unterschiede zwischen HTML und XHTML und die Unterschiede zwischen
Sprachvarianten wie Strict, Transitional und Frameset haben.

3.3

Regeln beim Editieren von HTML

Wenn Sie einen Texteditor oder einen quelltextorientierten HTML-Editor zum Bearbeiten Ihrer
HTML-Dateien verwenden, sollten Sie folgende Regeln kennen und beachten:
Notieren Sie in einer neuen Datei immer zuerst das Grundgerst (siehe Kapitel 3.2.2) einer
HTML-Datei.

3.4 Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen

99

Beachten Sie bei der Texteingabe die Maskierungsvorschriften fr Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen (Kapitel 3.4).
Setzen Sie Zeilenumbrche und Leerzeilen so, dass Sie im Quelltext eine optimale bersicht
behalten. Beachten Sie aber auch, dass Zeilenumbrche und Absatzschaltungen im WebBrowser nicht so angezeigt werden, wie sie im Quelltext eingegeben wurden. Fr Zeilenumbrche und Absatzschaltungen, die im WWW-Browser wirksam sein sollen, mssen Sie die
entsprechenden HTML-Elemente verwenden, zum Beispiel diejenigen fr Textabstze
(Absatzschaltungen) oder Zeilenumbrche (Kapitel 5.3). Wenn Sie aus besonderen Grnden
Text im Web-Browser so anzeigen wollen, wie Sie ihn eingeben (mit allen Einrckungen,
Umbrchen usw.), knnen Sie das HTML-Element fr prformatierten Text (Kapitel 5.6)
verwenden.
Beachten Sie, dass es in HTML keine Tabulatoren gibt. Ein im Quelltext eingegebener Tabulator wird bei der Anzeige im Web-Browser in ein Leerzeichen umgewandelt. Zeilenumbruchzeichen, Tabulatorzeichen und einfache Leerzeichen bilden in HTML die Klasse der so
genannten White-Space-Zeichen (white space = weier Raum). Die Browser setzen in der
Regel ein Tabulatorzeichen oder Zeilenumbruchzeichen im Editor als Leerzeichen im HTMLText um. Mehrere solcher White-Space-Zeichen hintereinander werden ignoriert und zu
einem einzigen Leerzeichen zusammengefasst. Um mehrere Leerzeichen hintereinander zu
erzwingen, knnen Sie anstelle der normalen Leerzeicheneingabe die Zeichenfolge &#160;
(geschtztes Leerzeichen) eingeben, und zwar so oft hintereinander wie gewnscht.

3.4

Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen

3.4.1

Allgemeines zu Zeichen in HTML

Wenn Sie Ihre Texte sagen wir in deutscher Sprache einfach in einen HTML-Editor eintippen, den Text mit Hilfe von HTML-Elementen strukturieren und sich das Ganze dann im WebBrowser anzeigen lassen, wird in der Regel der gesamte eingegebene Text korrekt angezeigt. Das
klingt selbstverstndlich ist es aber nicht. In der HTML-Datei stehen nmlich nicht Ihre eingegebenen Buchstaben und Satzzeichen, sondern Byte fr Byte numerische Werte wie 75, 168 oder
32. Der Browser versucht nun herauszubekommen, nach welchem Zeichensatz er diese numerischen Werte interpretieren soll. Ob beispielsweise nach einem westeuropischen, einem kyrillischen oder einem arabischen Zeichensatz. Wenn Sie keinerlei Angaben zum verwendeten
Zeichensatz machen, dann wird der Browser am Ende seiner Bemhungen einfach den Zeichensatz verwenden, der in seinen Einstellungen voreingestellt ist. In Ihrem Browser, der vermutlich eine englische oder deutschsprachige Benutzerfhrung hat, ist vermutlich der Zeichensatz fr westeuropische Sprachen eingestellt, der so genannte Latin-1-Zeichensatz (ISO 8859-1).
Weil der HTML-Editor oder Texteditor, den Sie beim Eintippen benutzen, vermutlich ebenfalls
nach diesem Zeichensatz speichert, klappt alles wunderbar. Wenn Ihre Web-Seiten aber im Web
stehen, kann es passieren, dass Besucher aus Osteuropa, Asien usw. vorbeikommen, die ganz
andere Zeichenstze in ihren Web-Browsern voreingestellt haben. Solche Besucher werden dann
lauter Zeichen ihres eigenen, vertrauten Zeichensatzes sehen aber es wird ein wirrer Zeichensalat sein, dem man beim besten Willen keinen Sinn entnehmen kann.

100

Kapitel 3: Allgemeine Regeln fr HTML

HTML bietet Ihnen deshalb die Mglichkeit an, dem Browser mitzuteilen, welchen Zeichensatz
Sie meinen. Dann liegt es am Browser, die von Ihnen gemeinten Zeichen am Bildschirm
beispielsweise eines Seitenbesuchers aus Fernost so anzuzeigen, wie Sie sie eingetippt haben. Es
gibt folgende Mglichkeiten, dem Browser mitzuteilen, welchen Zeichensatz bzw. welches bestimmte Zeichen aus einem anderen als dem voreingestellten Zeichensatz Sie meinen:
global fr eine Datei: dazu gibt es die Mglichkeit, im Dateikopf einer HTML-Datei in einem
so genannten Meta-Tag eine Angabe zum Default-Zeichensatz zu notieren. Eine solche
Angabe ist sehr zu empfehlen, da Sie dem Browser damit auf jeden Fall die Entscheidung
leichter machen, nach welchem Zeichensatz die Bytes der HTML-Datei zu interpretieren sind.
fr einzelne Zeichen: Das ist vor allem dann sinnvoll, wenn Sie eine globale Angabe zum Zeichensatz gemacht haben, im Text aber einzelne Zeichen verwenden wollen, die in dem angegebenen Zeichensatz nicht vorkommen. Dabei gibt es wiederum zwei Mglichkeiten: Entweder Sie verwenden eine spezielle numerische Notation. Fr hufiger verwendete Sonderzeichen stellt HTML aber auch so genannte benannte Zeichen zur Verfgung. Fr beide Mglichkeiten sollten Sie sich einmal mit der HTML-Zeichenreferenz beschftigen.
Falls Sie das Thema mit den numerischen Bytes und den Zeichenstzen vertiefen mchten,
knnen Sie den Abschnitt Computer und geschriebene Sprache (Kapitel 23.1) lesen.

3.4.2

Deutsche Umlaute und scharfes S

Wenn Sie in Ihrer HTML-Datei sonst keine Angaben zum verwendeten Zeichensatz machen,
sollten Sie im Hinblick auf das Internet und die internationale Verwendung deutsche Umlaute
und scharfes S durch spezielle, dafr vorgesehene benannte Zeichen ersetzen. Das gilt fr den
gesamten Inhalt einer HTML-Datei.
Ersetzen Sie das Zeichen durch die Zeichenfolge &auml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &Auml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &ouml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &Ouml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &uuml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &Uuml;
Ersetzen Sie das Zeichen durch die Zeichenfolge &szlig;
Ein Beispiel:
In M&uuml;nchen steht ein Hofbr&auml;uhaus.
Dort gibt es Bier aus Ma&szlig;kr&uuml;gen.

Ersetzen Sie die deutschen Sonderzeichen wie im obigen Beispiel durch die entsprechenden Zeichenfolgen keine Sorge, die Web-Browser verstehen das und zeigen die Zeichen korrekt an.
Beachten Sie: Es gibt eine Menge weiterer Sonderzeichen, die durch solche Umschreibungen
dargestellt werden sollten. Diese finden Sie in der HTML-Zeichenreferenz im Anhang aufgelistet.

3.5 Farben definieren in HTML

3.4.3

101

Das Euro-Zeichen in HTML

Auch fr das Euro-Zeichen gibt es ein benanntes Zeichen in HTML. Notieren Sie an der Stelle,
wo das Euro-Zeichen stehen soll, die Zeichenfolge &euro;. Ein Beispiel:
Preis: &euro; 199,-

Beachten Sie: Vermeiden Sie unter MS Windows, das Euro-Zeichen ber die Tastatur mit
[AltGr]+[e] in HTML einzutippen. Denn Microsoft hat das Euro-Zeichen intern auf den Zeichenwert 128 gelegt hat, um es ber Tastatur zugnglich zu machen und in vorhandene Schriftarten einzubauen. Das entspricht jedoch nicht dem Unicode/ISO-10646-Standard, auf dem
HTML aufsetzt. Verwenden Sie in HTML deshalb das oben beschriebene &euro; oder als Alternative eine numerische Notation nach dem Unicode/ISO-10646-Standard. Dort hat das EuroZeichen den Hexadezimalwert 20AC oder den Dezimalwert 8364. Nach HTML 4.0 knnen Sie
das Euro-Zeichen demnach numerisch so referenzieren: &#x20AC; oder &#8364;.

3.4.4

HTML-eigene Zeichen maskieren

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben,
mssen Sie diese Zeichen maskieren. Die folgenden Zeichen mssen Sie wie folgt maskieren:
Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt;
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt;
Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp;
Ersetzen Sie das Zeichen " durch die Zeichenfolge &quot;
Ein Beispiel:
Das ist ein &lt;HTML-Tag&gt;
GmbH &amp; Co. KG
&quot;Text steht in Anf&uuml;hrungszeichen&quot;

Beachten Sie: Am gefhrlichsten ist die spitze ffnende Klammer (<). Wenn Sie dieses Zeichen
nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit
durcheinander, weil er glaubt, nun wrde ein HTML-Tag folgen. Die anderen drei zu maskierenden Zeichen fhren zwar meistens nicht zu Anzeigefehlern, doch sollten Sie sie auch stets
maskieren. Besonders bei normalen Anfhrungszeichen, die ja doch sehr oft zum Einsatz kommen, wird die Maskierung im Text oft vergessen.

3.5

Farben definieren in HTML

Farben knnen Sie in HTML in vielen Zusammenhngen definieren, zum Beispiel bei
dateiweiten Hinter- und Vordergrundfarben, bei Schriftfarben fr Textabschnitte oder bei
Hintergrundfarben in Tabellen. Allerdings sind all diese Angaben in HTML vom W3-Konsortium mittlerweile als deprecated (missbilligt) gekennzeichnet, d.h., sie sollen knftig nicht mehr
zum Sprachstandard gehren. Der Grund ist, dass sich all diese Farben auch mit Hilfe von CSS
Stylesheets definieren lassen. Denn CSS ist die Sprache fr die Optik, nicht mehr HTML. Allerdings lohnt es sich trotzdem, sich mit dem Definieren von Farben in HTML zu befassen, weil in

102

Kapitel 3: Allgemeine Regeln fr HTML

CSS die gleichen Farbangaben mglich sind, dort aber darber hinaus noch weitere Mglichkeiten bestehen. Im Abschnitt ber Farbangaben in CSS wird das Thema aus CSS-Sicht behandelt (Kapitel 15.5).
Grundstzlich gibt es zwei Mglichkeiten, Farben in HTML zu definieren:
durch Angabe der RGB-Werte der gewnschten Farbe in Hexadezimalform (RGB = Rot/
Grn/Blau-Wert der Farbe),
durch Angabe eines Farbnamens.
Wenn Sie hexadezimale Werte angeben, arbeiten Sie Browser-unabhngig, und Sie haben die
volle Auswahl unter 16,7 Millionen Farben. Wenn Sie Farbnamen angeben, umgehen Sie die etwas schwierige Definition einer Farbe im Hexadezimalmodus. Derzeit sind jedoch nur 16 Farbnamen offiziell standardisiert. Weitere Farbnamen gibt es, sie sind jedoch Browser-abhngig.

3.5.1

Hexadezimale Angabe von Farben

Wenn Sie Farben direkt im Hexadezimalmodus definieren, mssen Sie die gewnschte Farbe aus
Angaben zu den drei Grundfarben Rot, Grn und Blau (RGB-Werte) zusammenstellen. Ein paar
Beispiele:
<body bgcolor="#808080">
<table bgcolor="#00C0C0">
<hr color="#CC00CC">

Die erste Zeile erzeugt einen dunkelgrauen Hintergrund fr die ganze Web-Seite, die zweite blaugrnen Hintergrund fr eine Tabelle. Die letzte Zeile schlielich zeigt eine violette Trennlinie an.
Jede hexadezimale Farbdefinition ist 6-stellig und hat das Schema: #XXXXXX. Zunchst notieren
Sie also ein Gatter #. Dahinter folgen sechs Stellen fr die Farbdefinition. Die ersten beiden
Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grn-Wert, und die
letzten beiden Stellen den Blau-Wert.

3.1: Die Farbangaben setzen sich aus drei zweistelligen Hexadezimalzahlen zusammen.

Die folgende Tabelle zeigt hexadezimale Ziffern:

Hexadezimale Zahl

Dezimale Zahl

0
1
2
3

0
1
2
3

3.5 Farben definieren in HTML

Hexadezimale Zahl

Dezimale Zahl

4
5
6
7
8
9
A
B
C
D
E
F

4
5
6
7
8
9
10
11
12
13
14
15

103

Eine hexadezimale Ziffer kann also 16 Zustnde haben. Fr jeden Farbwert (Rot, Grn, Blau)
stehen zwei Ziffern zur Verfgung. Das macht 16 x 16 (= 256) mgliche Zustnde pro Farbwert.
Beachten Sie: Es gibt 16 Grundfarben, die von jedem VGA-kompatiblen Bildschirm angezeigt
werden knnen.
Hexwert

HTML-Farbname

Farbe

#000000

black

#800000

maroon

#008000

green

#808000

olive

#000080

navy

#800080

purple

#008080

teal

#C0C0C0

silver

#808080

gray

#FF0000

red

#00FF00

lime

#FFFF00

yellow

#0000FF

blue

#FF00FF

fuchsia

#00FFFF

aqua

#FFFFFF

white

schwarz
rotbraun
dunkelgrn
ocker
dunkelblau
dunkelviolett
blaugrn
hellgrau
dunkelgrau
rot
hellgrn
gelb
blau
violett
hellblau
wei

Es gibt ferner 216 Standardfarben, die Netscape intern und plattformbergreifend zur Verfgung
stellt. Diese Farbpalette hat sich im WWW zu einer Art Quasi-Standard entwickelt. Sie deckt das
ganze Farbspektrum ab. Dabei sind fr die einzelnen Rot-, Grn- und Blauwerte nur die Hexzahlen 00, 33, 66, 99, CC und FF zugelassen. So ergeben sich zum Beispiel Farbwerte wie
#3300FF (hellblau), #CC99FF (blasses violett) oder #FF9900 (orange). Mehr ber diese Paletten
und ihre Bedeutung erfahren Sie im Kapitel 24.3.4 ber Standardfarbpaletten.

104
3.5.2

Kapitel 3: Allgemeine Regeln fr HTML

Farbnamen fr die 16 Grundfarben

Um eine Farbe mit Hilfe eines Farbnamens zu definieren, geben Sie anstelle des hexadezimalen
RGB-Werts einfach den gewnschten Farbnamen an. Die folgenden Farbnamen sind Bestandteil
von HTML seit Version 3.2 und werden von vielen WWW-Browsern verstanden.
<body bgcolor="black">
<table bgcolor="aqua">
<hr color="red">

Die drei Beispiele setzen einen schwarzen Seitenhintergrund, eine hellblaue Hintergrundfarbe
fr eine Tabelle und eine rote Trennlinie. Geben Sie den gewnschten Farbnamen an einer Stelle
an, an der eine Farbangabe erlaubt ist. Um eine bersicht ber alle erlaubten Farben zu erhalten,
rufen Sie das folgende Anzeigebeispiel auf. Dort sind auch die Hexadezimalwerte verzeichnet, die
den Farbnamen entsprechen. Die Tabelle im vohergehenden Abschnitt listet auch die Farbnamen auf.

3.5.3

Netscape-Farbnamen

Um eine Farbe mit Hilfe eines Farbnamens zu definieren, geben Sie anstelle des hexadezimalen
RGB-Werts einfach den gewnschten Farbnamen an. Die spezielleren Farbnamen werden von
Netscape und dem MS Internet Explorer interpretiert.
<body bgcolor="brown">
<table bgcolor="darkblue">
<hr color="pink">

Geben Sie den gewnschten Farbnamen an einer Stelle an, an der eine Farbangabe erlaubt ist.
Eine bersicht aller 120 erlaubten Farben bietet die folgende Tabelle. Dort sind auch die Hexadezimalwerte verzeichnet, die den Farbnamen entsprechen.
aliceblue
antiquewhite
aquamarine
azure
beige
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
darkblue
darkcyan
darkgoldenrod

#F0F8FF
#FAEBD7
#7FFFD4
#F0FFFF
#F5F5DC
#8A2BE2
#A52A2A
#DEB887
#5F9EA0
#7FFF00
#D2691E
#FF7F50
#6495ED
#FFF8DC
#DC143C
#00008B
#008B8B
#B8860B

3.5 Farben definieren in HTML

darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
gainsboro
ghostwhite
gold
goldenrod
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray

#A9A9A9
#006400
#BDB76B
#8B008B
#556B2F
#FF8C00
#9932CC
#8B0000
#E9967A
#8FBC8F
#483D8B
#2F4F4F
#00CED1
#9400D3
#FF1493
#00BFFF
#696969
#1E90FF
#B22222
#FFFAF0
#228B22
#DCDCDC
#F8F8FF
#FFD700
#DAA520
#ADFF2F
#F0FFF0
#FF69B4
#CD5C5C
#4B0082
#FFFFF0
#F0E68C
#E6E6FA
#FFF0F5
#7CFC00
#FFFACD
#ADD8E6
#F08080
#E0FFFF
#FAFAD2
#90EE90
#D3D3D3
#FFB6C1
#FFA07A
#20B2AA
#87CEFA
#778899

105

106

Kapitel 3: Allgemeine Regeln fr HTML

lightsteelblue
lightyellow
limegreen
linen
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
oldlace
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
skyblue
slateblue
slategray
snow
springgreen
steelblue

#B0C4DE
#FFFFE0
#32CD32
#FAF0E6
#66CDAA
#0000CD
#BA55D3
#9370DB
#3CB371
#7B68EE
#00FA9A
#48D1CC
#C71585
#191970
#F5FFFA
#FFE4E1
#FFE4B5
#FFDEAD
#FDF5E6
#6B8E23
#FFA500
#FF4500
#DA70D6
#EEE8AA
#98FB98
#AFEEEE
#DB7093
#FFEFD5
#FFDAB9
#CD853F
#FFC0CB
#DDA0DD
#B0E0E6
#BC8F8F
#4169E1
#8B4513
#FA8072
#F4A460
#2E8B57
#FFF5EE
#A0522D
#87CEEB
#6A5ACD
#708090
#FFFAFA
#00FF7F
#4682B4

3.6 Kommentare und Credits

tan
thistle
tomato
turquoise
violet
wheat
whitesmoke
yellowgreen

107

#D2B48C
#D8BFD8
#FF6347
#40E0D0
#EE82EE
#F5DEB3
#F5F5F5
#9ACD32

3.6

Kommentare und Credits

3.6.1

Nicht angezeigter Text (Kommentar)

HTML bietet die Mglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare
einzufgen. Kommentare werden von Web-Browsern ignoriert, d.h. bei der Prsentation nicht
angezeigt. Kommentare sind z.B. sinnvoll, um interne Angaben zu Autor und Erstelldatum in
einer Datei zu platzieren, um interne Anmerkungen zu bestimmten Textstellen zu machen oder
um verwendete HTML-Befehle intern auszukommentieren. Ein Beispiel:
<h1>Willkommen!</h1>
<!-- Kommentar: das obendrber ist eine berschrift -->
<p>viel Text</p>
<!-- und das ist ein mehrzeiliger Kommentar
zu dem Text mit <p>...</p>
Letzte Zeile des Kommentars -->

Kommentare werden durch die Zeichenfolge <!-- eingeleitet. Dahinter folgt beliebig langer
Kommentartext. Innerhalb des Kommentartextes knnen Sie auch HTML-Elemente notieren.
Alles, was zwischen der einleitenden Zeichenfolge und der beendenden Zeichenfolge --> steht,
wird bei der Anzeige im Browser unterdrckt.
Beachten Sie: Vor allem beim Einbinden von JavaScript wird empfohlen, den Script-Code in
HTML-Kommentare zu setzen, da einige ltere Browser darber nicht hinweglesen, sondern den
enthaltenen Text/Programmcode am Bildschirm ausgeben.
Whrend Sie an Ihren HTML-Dateien basteln, werden Sie hufig Verschiedenes testen und ausprobieren. Dabei ist es hilfreich, bisherige Lsungen vor dem Ausprobieren einer neuen Lsung
nicht einfach zu berschreiben, sondern in einen Kommentar zu setzen. So mssen Sie sich nicht
rgern, wenn Sie etwas berschreiben, das eigentlich doch besser war als das, womit Sie es berschrieben haben.

108
3.6.2

Kapitel 3: Allgemeine Regeln fr HTML

Credits

Folgende Hinweise sollten Sie beachten, wenn Sie beabsichtigen, HTML-Dateien frs Web zu
erstellen:
Weisen Sie sich als Verfasser aus:
Weisen Sie darauf hin, wer die Web-Seiten erstellt hat. Anwender haben ein Recht zu erfahren, wer fr eine Web-Seite verantwortlich ist.
Weisen Sie das Erstelldatum aus:
Schreiben Sie das Erstelldatum an eine geeignete Stelle im Text. Besonders bei schnell veraltenden Informationen ist dies wichtig. Eine Preisliste fr PC-Hardware etwa, die seit zwei Jahren nicht mehr aktualisiert wurde, wird ihren Nutzen fr heutige Anwender dann bereits im
Erstelldatum verraten.
Weisen Sie Autorenrechte aus:
Weisen Sie auf Ihre Urheberrechte hin bzw. nennen Sie ausdrcklich die Bedingungen, was
mit Ihrem Text geschehen darf und was nicht. Das Kopieren des Textes knnen Sie kaum
verbieten, wohl aber die Weitergabe des Textes nach darin vorgenommenen nderungen.
Auch fr Grafiken, z.B. Logos, sollten Sie entsprechende Angaben machen.
Bieten Sie die Mglichkeit zum Feedback an:
Dazu knnen Sie zum Beispiel einen E-Mail-Verweis (Kapitel 6.4) oder ein Formular (Kapitel
10) verwenden.

3.7

Referenzieren in HTML

HTML-Dateien bestehen bekanntlich nur aus Text. Dennoch enthalten viele Web-Seiten Grafiken, Hintergrundgrafiken, Multimedia-Elemente, Java-Applets, Flash-Animationen und dergleichen. Solche Elemente werden in HTML in Form einer Referenz auf eine entsprechende Datenquelle notiert. Auch ein ausfhrbarer Verweis zu einer eigenen oder fremden Web-Seite ist nur
ausfhrbar, wenn er sein Verweisziel benennt. Fr all diese Zwecke wird das Referenzieren in
HTML bentigt. Ebenso gibt es in Ergnzungssprachen wie CSS Stylesheets oder JavaScript Stellen, an denen Sie andere Datenquellen referenzieren mssen.
Die Regeln zum Referenzieren sind dabei immer die gleichen. Der Grund ist das zentrale und
einheitliche Adressierungs-Schema im Web, das unabhngig von der Syntax einzelner Betriebssysteme gilt und die genaue Adressierung beliebiger Quellen im Web erlaubt.

3.7.1

Mit vollstndigen URIs referenzieren

Mit vollstndigen URIs mssen Sie dann referenzieren, wenn sich die gewnschte Datenquelle
grob gesagt nicht im aktuellen eigenen Web-Angebot befindet. Ein URI (Universal Resource
Identifier = universelle Quellenbezeichnung) ist beispielsweise so etwas wie
http://www.teamone.de/ oder
http://selfhtml.teamone.de/html/allgemein/referenzieren.htm

3.7 Referenzieren in HTML

109

Beide Beispieladressen sind aber gleichzeitig auch so genannte URLs (Uniform Resource Locators
einheitliche Quellenorter). Und dann gibt es um die Verwirrung komplett zu machen auch
noch so genannte URNs (Uniform Resource Names einheitliche Quellennamen). Letztere sind
dazu gedacht, um nicht wirklich existierende Datenquellen oder Quellen, die zwar existieren,
aber durch kein bekanntes Internet-Protokoll im Netz abrufbar sind, dennoch eindeutig zu benennen. Ein URI ist also der Oberbegriff fr URL und URN, wobei URI und URL bei typischen
Adressen, hinter denen sich konkrete Dateien oder Datenquellen verbergen, faktisch das Gleiche
sind. Im HTML-Standard wird aber konsequent von URIs geredet. Beispiele fr URIs:
http://www.ihr-guter-name.de/
http://www.ihr-guter-name.de/index.htm
http://www.ihr-guter-name.de/index.htm#impressum
http://www.ihr-guter-name.de/hintergrund.gif
http://www.ihr-guter-name.de/praesentation.pdf
http://www.ihr-guter-name.de/cgi-bin/suche.cgi?ausdruck=Hasenjagd
http://www.google.com/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=
ftp://www.ihr-guter-name.de/praesentation.pdf
http://192.168.78.10/
http://www.ihr-guter-name.de:8082/geheim.htm

Ein vollstndiger URI besteht aus der Angabe eines Internet-Protokolls, z.B. http oder ftp, gefolgt von einem Doppelpunkt. Dahinter kann das ist von Protokoll zu Protokoll verschieden
eine Zusatzangabe zu einem lokalen Netzwerknamen mglich sein. Diese Angabe wird in zwei
Schrgstriche // eingeschlossen. Bei den meisten Adressen gibt es keine solche Angabe, weshalb
die beiden Schrgstriche dort einfach ohne Inhalt nebeneinander stehen.
Hinter diesen Angaben folgt die Adresse des Host-Rechners im Netz, auf dem sich die Datenquelle befindet. Das kann ein Domain-Name oder eine numerische IP-Adresse sein. Der DomainName ist brigens in den obigen Beispielen ihr-guter-name.de. Das www davor ist eine im
Web typische und bei Web-Servern einstellbare Voreinstellung fr Sub-Domains.
Hinter der Adressierung des Host-Rechners kann durch einen Doppelpunkt abgetrennt, eine
so genannte Portnummer folgen, wie im letzten der obigen Beispiele bei :8082. Das ist immer
dann erforderlich, wenn die Datenquelle nicht ber den Standard-Port des angegebenen Protokolls wie etwa http erreichbar ist, sondern ber einen anderen Port. In der Praxis bentigen Sie
die Portangabe eher selten, aber kennen sollten Sie sie.
Dahinter folgt schlielich die lokale Pfadangabe zur gewnschten Datenquelle. Egal, um welches
Betriebssystem es sich dabei handelt Verzeichnispfade werden stets durch einfache Schrgstriche getrennt. Es ist Aufgabe der Server-Software auf dem Rechner, die Pfadangaben korrekt aufzulsen. Auf diese Weise brauchen Sie sich keine Gedanken zu machen, welches System der angesprochene Rechner benutzt.
Auf dem Rechner knnen beliebige Dateien und Datenquellen angesprochen werden. Voraussetzung ist, dass sie ber das angegebene Protokoll wie z.B. http unter der Adressierung erreichbar
sind. Es muss sich nicht unbedingt um Dateien handeln. So kann mit # und einem Namen dahinter etwa ein bestimmter Zielanker in einer HTML-Datei angesprochen werden. Wie solche
Zielanker definiert werden, ist im Abschnitt Anker definieren und Verweise zu Ankern (Kapitel
6.2) beschrieben. Auch Aufrufe von CGI-Scripts mit Parametern sind URIs, wie im obigen
Beispiel suche.cgi?ausdruck=Hasenjagd.

110

Kapitel 3: Allgemeine Regeln fr HTML

Zeichen, die nicht zum ASCII-Zeichensatz (Kapitel 23) gehren oder in URIs Bedeutung haben
(z.B. der Schrgstrich, der Doppelpunkt oder das Prozentzeichen), mssen Sie innerhalb von
URIs maskieren. Das geschieht durch Angabe eines Prozentzeichens % mit anschlieendem
Hexadezimalwert fr das Zeichen. Im obigen Beispiel sehen Sie das z.B. bei M%FCnz, wobei FC die
hexadezimale Angabe der Zahl 252 ist und diese wiederum den Buchstaben bedeutet.
Beachten Sie: Die voranstehenden Beschreibungen richten sich an Praktiker und erheben keinen
Anspruch auf Vollstndigkeit. Das Konzept der URIs ist noch wesentlich differenzierter als hier
dargestellt. Bei Interesse knnen Sie es in der RFC 1630 (www.ietf.org/rfc/rfc1630.txt) nachlesen.
Datenquellen im eigenen Web-Angebot knnen Sie natrlich auch mit vollstndigen URIs referenzieren. Damit schrnken Sie sich jedoch ein (siehe die einleitenden Bemerkungen zum
Abschnitt 3.7.3 Pfadangaben relativ zum Basis-URI).

3.7.2

Absolute Pfadangaben relativ zum Basis-URI

Die Variante mit absoluten Pfadangaben whlen Sie, wenn die gewnschte Datenquelle auf dem
gleichen Host-Rechner liegt und ber das aktuelle Protokoll und den Standard-Port erreichbar
ist. Das klingt komplizierter als es ist. In dem vollstndigen URI http://selfhtml.teamone.de/html/
allgemein/referenzieren.htm ist der Teil /html/allgemein/referenzieren.htm eine absolute Pfadangabe relativ zur Basis-URI http://selfhtml.teamone.de. Innerhalb des eigenen Web-Angebots
und der eigenen Domain oder Sub-Domain knnen Sie also mit solchen Pfadangaben arbeiten.
Einige Beispiele:
/
/index.htm
/index.htm#impressum
/hintergrund.gif
/praesentation.pdf
/cgi-bin/suche.cgi?ausdruck=Hasenjagd
/search?hl=de&safe=off&q=Stefan+M%FCnz&lr=

Der erste Schrgstrich hinter dem Basis-URI steht fr das Wurzelverzeichnis des jeweiligen
Internet-Servers. Es handelt sich meistens nicht um das tatschliche Wurzelverzeichnis des
Rechners oder der Festplatte, auf die Sie damit zugreifen. Bei Web-Servern ist beispielsweise einstellbar, welches tatschliche Verzeichnis dem Web-Wurzelverzeichnis entsprechen soll. Hinter
dem Basis-URI kann alles folgen, was schon im Abschnitt Mit vollstndigen URIs referenzieren
angesprochen wurde.

3.7.3

Pfadangaben relativ zum Basis-URI

Die relativen Pfadangaben whlen Sie, wenn Sie den jeweils aktuellen URI als Bezugs-URI nutzen. Dann knnen Sie von dort aus relativ adressieren. Die HTML-Datei mit dem URI
http://selfhtml.teamone.de/html/allgemein/referenzieren.htm enthlt beispielsweise zum Referenzieren einer Grafik folgende Angabe: ../../src/logo.gif. Das bedeutet: Gehe zwei Verzeichnisse nach
oben, von dort aus ins Unterverzeichnis src und dort findest du die Datei logo.gif. Absolut gesehen, hat diese Datei also den URI http://selfhtml.teamone.de/src/logo.gif.

3.8 Konventionen fr Dateinamen

111

Diese Form der relativen Adressierung ist innerhalb von Web-Projekten sehr zu empfehlen. Der
Grund ist, dass Sie das Web-Projekt auf diese Weise problemlos an eine andere Web-Adresse
verschieben knnen, und trotzdem funktionieren noch alle projektinternen Verweise und Grafikreferenzen. Auch auf der lokalen Festplatte funktionieren dann alle Referenzen. Gerade wenn
Sie Ihr Projekt auch mal auf CD-ROM oder anderen Medien verffentlichen wollen, ist die relative Adressierung ein Muss. Ein paar Beispiele:
./
farben.htm
./farben.htm
bilder/grafik.gif
./bilder/grafik.gif
../
../../../../woanders/datei.htm

Eine Datei im gleichen Verzeichnis wie dem aktuellen knnen Sie einfach durch Angabe des
Dateinamens referenzieren im obigen Beispiel etwa die Datei farben.htm. Das aktuelle Verzeichnis referenzieren Sie durch ./ also einen Punkt, gefolgt von einem Schrgstrich. Die
Adressierung von farben.htm und ./farben.htm im obigen Beispiel hat also den gleichen
Effekt.
Eine Angabe wie bilder/grafik.gif referenziert eine Datei namens grafik.gif im Verzeichnis bilder, das ein Unterverzeichnis des aktuellen Verzeichnisses ist. Die Notation ./bilder/
grafik.gif hat wieder den gleichen Effekt wie bilder/grafik.gif.
Mit ../ referenzieren Sie das Verzeichnis ber dem aktuellen Verzeichnis, egal wie es heit. Mit
../../ referenzieren Sie das Verzeichnis ber dem Verzeichnis ber dem aktuellen Verzeichnis
usw. Von jedem der so adressierten Verzeichnisse knnen Sie wieder auf deren Unterverzeichnisse zugreifen, wie im letzten der obigen Beispiele gezeigt.

3.8

Konventionen fr Dateinamen

3.8.1

Dateinamen im Hinblick auf Server-Rechner

Die meisten Server-Rechner im heutigen Web haben ein Unix- oder von Unix abgeleitetes Betriebssystem. Unix unterscheidet strikt zwischen Gro- und Kleinschreibung bei Dateinamen.
Wer sein Web-Projekt beispielsweise in einer DOS-/Windows-Umgebung erstellt, wo dies keine
Rolle spielt, kann bittere Erfahrungen machen, wenn pltzlich die lokal funktionierenden
Verweise und Grafikreferenzen nach dem Hochladen auf den Server-Rechner nicht mehr funktionieren. Der Grund ist in solchen Fllen, dass beispielsweise in den HTML-Dateien kleingeschriebene Verweisziele oder Grafikdateinamen notiert wurden, whrend das DOS-/WindowsSystem grogeschriebene Dateinamen an den Server bertragen hat.
Wenn Sie mit Windows 3.x oder DOS 6.x und niedriger arbeiten, bleibt Ihnen in einem solchen
Fall kaum eine andere Mglichkeit, als die Dateien auf dem Server-Rechner mit Hilfe von FTPBefehlen so umzubenennen, wie sie in den Verweisen und Grafikreferenzen notiert sind. Wenn
Sie mit einem System arbeiten, das Gro-/Kleinschreibung bei Dateinamen zwar fr die Optik,
aber nicht intern unterscheidet (z.B. Windows seit Version 95), ist es am sichersten, Sie erzeugen

112

Kapitel 3: Allgemeine Regeln fr HTML

Dateinamen, die nur aus Kleinbuchstaben bestehen, und in Verweisen und Grafikreferenzen
notieren Sie ebenfalls alle Dateinamen in Kleinbuchstaben.

3.8.2

Dateinamen im Hinblick auf Kompatibilitt

Wenn Sie Ihr Web-Projekt ausschlielich fr den Einsatz im Web erstellen, mssen Sie nur darauf achten, dass die Dateien vom Server-Rechner akzeptiert werden. Bei modernen Unix-Systemen, wie sie die meisten Web-Server einsetzen, sind Dateinamen bis zu 256 Zeichen Lnge
erlaubt. Vermeiden Sie aber in jedem Fall deutsche Umlaute und scharfes S in den Dateinamen.
Als Sonderzeichen ist in jedem Fall der Unterstrich _ erlaubt. Andere Satzzeichen sollten Sie
vermeiden. Fragezeichen ?, Stern-Zeichen *, Gleichheitszeichen = drfen Sie auf keinen
Fall in Dateinamen verwenden. Auch auf Leerzeichen sollten Sie unbedingt verzichten.
Wenn Sie Ihr Projekt auch anderweitig vertreiben mchten, zum Beispiel als Download zum
Offline-Lesen oder auf CD-ROM, sollten Sie die engen Grenzen von MS-DOS-kompatiblen Dateinamen kennen und in Ihre Entscheidung mit einbeziehen. Unter MS-DOS ist maximal 1
Punkt zur Trennung von Dokumentname und Dateiendung erlaubt. Vor dem Punkt drfen acht
Zeichen stehen, dahinter drei Zeichen (fr die Dateiendung).

3.8.3

Dateiendungen

Hierbei gilt generell: Halten Sie unbedingt die blichen Konventionen fr Dateiendungen ein.
Moderne Web-Browser erkennen HTML-Dateien zwar auch an ihrem Inhalt, aber bei Verwendung im Web sollten Sie immer die blichen Dateiendungen verwenden.
Gewhnliche HTML-Dateien erhalten entweder die Endung .html oder .htm.
HTML-Dateien mit Server Side Includes erhalten die Endung .shtml oder .shtm.
HTML-Dateien mit PHP-Abschnitten erhalten die Endung .php.
HTML-Dateien mit ASP-Abschnitten erhalten die Endung .asp.

3.8.4

Default-Dateinamen bei Web-Servern

Die meisten heutigen Web-Server sehen einen oder mehrere bestimmte Dateinamen als Datei fr
die Einstiegsseite vor. Meistens ist das der Name index.html oder index.htm, manchmal auch
welcome.html bzw. welcome.htm oder default.html bzw. default.htm. Bei einigen Providern
knnen Sie auch selbst einen beliebigen Dateinamen als Default-Dateinamen bestimmen. Und
wenn Sie selbst Zugriff auf die Konfiguration des Web-Servers haben, knnen Sie die DefaultDateinamen dort einstellen.
Default-Dateinamen haben den Vorteil, dass die Web-Adresse keinen HTML-Dateinamen mehr
braucht und krzer wird. Viele Adressen lauten ja einfach http://www.xy.com/ oder http://www.
xy.com/verzeichnis/ ohne weitere Angabe einer bestimmten HTML-Datei. Dass beim Aufruf
einer solchen Adresse dennoch eine bestimmte HTML-Datei geladen wird, liegt eben daran, dass
es eine Datei mit einem Namen gibt, die der Web-Server als Default-Dateiname gespeichert hat.

3.9 Informationsverteilung und Dateiorganisation

113

Erkundigen Sie sich bei Ihrem Provider, ob er einen Default-Dateinamen fr Verzeichnisse anbietet, und wenn ja, welchen. Erstellen Sie Ihr Projekt dann so, dass die Einstiegsseite diesen
Dateinamen hat und untergeordnete Seiten auf diese Datei zurckverweisen.

3.9

Informationsverteilung und Dateiorganisation

3.9.1

Hypertext schreiben Information verteilen

HTML steht fr Hypertext Markup Language. Die Sprache ist ausgelegt fr Hypertext-gerechte
Informationsverteilung. Der Anwender soll zwischen Informationen navigieren, die ihn interessieren. Wenn Sie dieser Themenkomplex nher interessiert, sollten Sie in der Einfhrung das
Unterkapitel 1.5 ber Hypertext lesen.
Bei der Hypertext-Informationsverteilung ist es ntig, dass die angebotene Information auf
kleine, in sich abgeschlossene Informationseinheiten verteilt wird, die untereinander auf eine
nachvollziehbare und einsichtige Weise vernetzt sind.
Wenn Sie beispielsweise Ihren Fuballverein im WWW prsentieren wollen, gehrt dazu die
bliche Einstiegsseite mit Verweisen zu den Unterseiten. Die Unterseiten sollten jeweils an gleicher Stelle einen Rckverweis auf die Einstiegsseite enthalten. Je eine Unterseite knnten Sie in
diesem Beispiel etwa fr die Geschichte, fr die Vereinsberichte, fr die aktuellen Tabellenstnde, und fr die derzeitigen Spieler spendieren. Die Seite fr Spieler knnte nochmals Verweise zu Seiten enthalten, auf denen jeweils ein einzelner der Spieler vorgestellt wird. Bei solchen
Unter-Unter-Seiten ist ein Rckverweis zur nchsthheren Ebene wie auch zur Einstiegsseite
angebracht. Wichtig sind auch die Querverweise. Wenn ein Spieler bereits lange dabei ist, findet
sich bestimmt auch ein Querverweis zu einem wichtigen Ereignis der Vereinsgeschichte. Bei den
Erluterungen zum aktuellen Tabellenstand sind wiederum Querverweise zu den besten Torschtzen usw. denkbar.
So entsteht ein sinnvolles Netz aus Einzelinformationen. Zustzliche Verlinkungen sollten die
Navigationsmglichkeiten ergnzen. So ist es in vielen Fllen sinnvoll, so genannte Guided Tours
anzubieten, also eine Abfolge von Seiten, die der Anwender bequem durchblttern kann.
Egal, welche Art von Projekt Sie in Angriff nehmen: Immer sollten Sie den hier skizzierten Blick
fr die Strukturierung und Vernetzung der Information im Auge behalten.
Was hier als Seite oder Unterseite bezeichnet wird, sollte in einem Web-Projekt jeweils eine
HTML-Datei sein. Schrecken Sie nicht vor der Anzahl der entstehenden Dateien zurck. Die
saubere Strukturierung der Information sollte oberstes Gebot sein. Die Technik der Vernetzung
zwischen Projektdateien mit HTML wird im Abschnitt 6.2 ber Verweise beschrieben. Weitere
Tipps fr die Konzeption Ihres WWW-Projekts erhalten Sie im Kapitel 25.1 Web-Projekte
planen.

3.9.2

Dateiorganisation

Bei jedem etwas greren Projekt werden Sie schnell feststellen, wie viele HTML-, Grafik- und
andere Dateien sich dabei ansammeln. Um den berblick zu behalten, sollten Sie sich entweder

114

Kapitel 3: Allgemeine Regeln fr HTML

ein sinnvolles Dateinamenschema berlegen, oder Sie legen Unterverzeichnisse an, etwa fr
Dateien zu einem Themengebiet oder fr Grafiken usw. Wenn Sie Ihr Projekt im Web verffentlichen wollen, mssen Sie beim Einsatz von Unterverzeichnissen vorher klren, ob Sie auf
dem Web-Server, wo das Projekt einmal abgelegt werden soll, die Berechtigung bzw. Mglichkeit
haben, Unterverzeichnisse anzulegen. Denn Sie werden in diesem Fall auf dem Server-Rechner
die gleiche Verzeichnisstruktur erstellen mssen, die Sie lokal beim Erstellen gewhlt haben,
damit alle Verweise und Referenzen funktionieren.

3.10

Guter HTML-Stil

Definitive Richtlinien fr richtiges HTML gibt es nicht. Wohl aber gibt es Regeln, wie ein gltiges HTML-Dokument auszusehen hat. Auf jeden Fall ist es empfehlenswert, sich so weit wie
mglich an den HTML-Sprachstandards des W3-Konsortiums zu orientieren. Mittlerweile hat
das W3-Konsortium auch erkannt, dass seine Aufgabe nicht nur im Ausarbeiten technischer
Spezifikationen besteht, sondern auch in deren Vermittlung an normalsterbliche Anwender,
die kein abgeschlossenes Informatikstudium haben. Wenn Sie sich intensiv und dauerhaft mit
dem Erstellen eigener Web-Seiten beschftigen, sollten Sie sich deshalb regelmig mal auf den
Web-Seiten des W3-Konsortiums (www.w3.org) nach Neuigkeiten und nach aktuellen Trends
und Richtlinien umsehen. Es gibt auch ein deutsches Bro des W3-Konsortiums (www.w3c.de),
das wichtige Informationen des W3-Konsortiums in deutscher Sprache anbietet.

3.2: Das World Wide Web Consortium W3C hat auch eine deutsche Startseite mit aktuellen News.

3.10 Guter HTML-Stil

115

Fr HTML-Autoren bietet das W3-Konsortium ferner einen Service an, um erstellte Dateien auf
syntaktische Korrektheit zu berprfen: den so genannten Validator (validator.w3.org). Damit
knnen Sie Ihre Seiten, wenn diese im Web ber eine HTTP-Adresse erreichbar sind, berprfen
lassen.
Was die Frage nach gutem HTML-Stil betrifft, ist es eigentlich viel besser zu beschreiben, wie
man es auf keinen Fall machen sollte. Dazu gibt es eine zwar schon etwas betagte, aber immer
noch lesenswerte Anleitung im Web: Die Goldenen Regeln fr schlechtes HTML von Stefan Karzauninkat (www.karzauninkat.com/Goldhtml).

3.3:

Die Goldenen Regeln von Stefan Karzauninkat sind zwar betagt, aber (leider) immer
noch aktuell.

3.10.1 Nicht fr bestimmten Browser schreiben

Wenn Sie Dateien im Web platzieren wollen, sollten Sie zum Testen Ihrer Dateien mehr als
einen Web-Browser verwenden. Verwenden Sie die weit verbreiteten Produkte wie Netscape und
den MS Internet Explorer, wenn es irgendwie geht auch in mehreren Versionen, aber auch mal
ein lteres Produkt wie etwa Mosaic. Wenn Sie die Mglichkeit haben, auf mehreren Plattformen

116

Kapitel 3: Allgemeine Regeln fr HTML

(MS Windows, Macintosh, Sun usw.) zu testen, machen Sie unbedingt Gebrauch davon. Und
vielleicht schauen Sie sich Ihre Seiten auch mal mit einem Handheld-Computer an oder mit
einer Brille, durch die Sie alles undeutlich sehen.
Nun kann Ihnen niemand verbieten, HTML-Dateien zu schreiben, die nur von Netscape oder
nur vom MS Internet Explorer korrekt angezeigt werden. Aber wenn Sie solche Seiten ins Netz
stellen, sollten Sie wissen, dass Sie damit letztlich Ihrem Image schaden.

3.10.2 Nicht fr bestimmte Bildschirmauflsung schreiben

Das Erzwingen von festen Breiten durch Einsatz von verschachtelten Tabellen und blinden
Pixeln ist mittlerweile so verbreitet im Web, dass manche Homepage-Autoren schon gar nicht
mehr wissen, dass einfaches HTML normalen Flietext erzeugt, der sich der Fenstergre des
Browsers anpasst. Nun macht es keinen Sinn, das Erzwingen von Mindestbreiten vllig zu verteufeln. Tabellen mit mehreren Spalten und entsprechendem Inhalt bentigen nun mal eine
gewisse Breite, und HTML ist auch nicht WML (eine Sprache speziell zum Erstellen von WebSeiten fr Handy-Displays). Wenn Sie aber vor der Frage stehen, ob Sie Ihre Web-Seiten fr eine
1024er oder eine 800er Bildschirmauflsung optimieren sollen, dann stehen Sie vor der falschen Frage. Denn viele Anwender surfen mit mehreren Instanzen des Web-Browsers und ffnen Verweise zu anderen Seiten gerne in neuen Browser-Fenstern. Diese Fenster werden oft
nicht im Vollbildmodus angezeigt. Auch haben viele Anwender Programme offen, die grundstzlich einen Teil des Bildschirms einnehmen und immer angezeigt werden z.B. InstantMessaging-Programme wie ICQ. All diese Anwender machen Ihnen also ohnehin nicht die
Freude, das Bowser-Fenster extra wegen Ihren Seiten auf maximale Bildschirmgre zu bringen.
Grbeln Sie daher nicht lange ber anzunehmende Durchschnittswerte von Bildschirmgren.
Ein paar hundert Pixel (also eine sehr unbestimmte Angabe) in der Breite knnen Sie voraussetzen, aber das ist auch alles.
Verwenden Sie bei Tabellen oder Frames tendenziell eher prozentuale Breiten- und Hhenangaben. Absolute Pixelangaben haben nur dort einen Sinn, wo beispielsweise die erste Spalte einer
blinden Tabelle ber einem farblich zweigeteilten Hintergrundbild liegen soll. Ansonsten sollten
Sie sich nicht zu sehr auf solche Vorstellungen wie die versteifen, dass eine Grafik oder ein
Absatz bei jedem Anwender genau 10,8 cm vom linken Rand entfernt beginnt. Wenn das bei
Ihnen gut aussieht, bedeutet das noch lange nicht, dass es bei jemand anderem gut aussieht, und
in einigen Fllen knnte es auch ausgesprochen schlecht aussehen.

3.10.3 HTML-Elemente nicht zweckentfremden

Besonders die logisch-semantischen Elemente von HTML sollten Sie nicht benutzen, um bestimmte Formatier-Effekte zu erzielen. So verwenden einige Leute z.B. das blockquote-Element, um Abstze einzurcken, nur weil die Mehrzahl der Browser den Text, der in <blockquote> ... </blockquote> eingeschlossen ist, als eigenen, eingerckten Absatz darstellen.
Das blockquote-Element ist jedoch fr Zitate gedacht und sollte auch nur dafr verwendet
werden.
Noch hufiger wird mit berschriften Schindluder getrieben. berschriften sind nicht dazu da,
um Text gro und fett zu machen, sondern dazu, logische Hierarchieverhltnisse zwischen Text-

3.10 Guter HTML-Stil

117

abschnitten zu markieren. Wenn Sie Text auffllig formatieren wollen, dann benutzen Sie dazu
CSS Stylesheets.

3.10.4 Ehrliche und aussagekrftige Verweistexte verwenden

Generell gilt: Das Ziel eines Verweises sollte das halten, was der Verweis verspricht. Das bedeutet
beim Setzen des Verweises: Der Verweistext sollte weder zu viel noch zu wenig versprechen.
Wenn Sie beispielsweise Information ber ein Softwareprodukt anbieten, ohne es zum Download anzubieten, ist es unfair, dem Anwender mit einem Verweis auf die Information zu suggerieren, er knne das Produkt auch gleich downloaden.
Verweise knnen in HTML an jeder beliebigen Stelle im Text stehen. Wenn Sie jedoch einmal
Text lesen, in dem jedes zweite Wort ein Verweis ist, werden Sie schnell merken, dass dies den
Lesefluss ungemein strt. Der Grund dafr ist, dass Verweise immer gleich die Aufmerksamkeit
auf sich ziehen und den Leser von seiner eigentlichen Aufgabe, dem geistigen Erfassen des im
Text Gemeinten, ablenken. Um so wichtiger ist es, dass Verweise innerhalb des Flietextes dem
Anwender keine Rtsel aufgeben, sondern sofort erfassbar sind.
Verwenden Sie einen Verweis innerhalb des Flietextes also nur dann, wenn der Verweistext
sinnvoll ist. Formulieren Sie Stze, in denen verweissensitiver Text vorkommt, so, dass der Verweistext aussagekrftig ist. Schreiben Sie z.B. nicht: Fr weitere Information klicken Sie hier,
sondern: Weitere Information ist ebenfalls verfgbar.

3.10.5 Grafiken richtig einsetzen

Wenn Sie nicht gerade eine virtuelle Kunstausstellung in HTML erstellen, sollten Sie sich mit
groen Grafikdateien zurckhalten. Bedenken Sie bei Dateien, die Sie frs Web erstellen, dass
viele Anwender einen volumenabhngigen Internet-Zugang haben, d.h. sie zahlen dafr, wie viel
Daten sie in den Arbeitsspeicher ihres Rechners laden. Zwar erlauben die meisten Browser, das
Laden von Grafiken auszuschalten, aber wenn der Anwender keinen Gebrauch von dieser Funktion macht, heit das noch lange nicht, dass er bereit ist, ohne Ankndigung eine 1-MByte-Grafik zu laden.
Versuchen Sie es daher lieber mit kleinen, wohlplatzierten Grafiken. Oft gengen 16 Farben statt
256 oder gar 16,7 Mio. Das macht die Grafiken deutlich kleiner.
Andererseits sollten Sie keinesfalls auf den Einsatz von Grafiken verzichten. Reiner Text ist am
Bildschirm nmlich wesentlich ermdender zu lesen als in Printmedien. Deshalb sollten Sie lngere Texte mglichst reichhaltig strukturieren und auflockern. Dazu gehrt auch die Verwendung von Grafiken. Ideal sind kleine Grafiken in Icon-Gre. Die sind schnell geladen, und Sie
knnen bedenkenlos mehrere davon pro HTML-Datei referenzieren. Kleine Grafiken knnen
auch bestimmte Corporate-Identity-Funktionen oder Orientierungsfunktionen bernehmen.
Der Vorteil solcher mehrfach verwendeter Grafiken ist, dass die meisten Browser sie nur einmal
laden und dann im Speicher halten.

119

Dateiweite Einstellungen

4.1

HTML-Kopfdaten
Titel einer HTML-Datei

4.1.1

Jede HTML-Datei sollte einen Titel erhalten. Das ist aus folgenden Grnden besonders wichtig:
Der Titel der Datei wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters
angezeigt.
Der Titel der Datei wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks,
Favoriten) auf die Datei verwendet.
Der Titel der Datei wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt.
Der Titel der Datei dient im Web vielen automatischen Suchprogrammen als wichtiger Input.
Wenn die Datei zu den Suchtreffern einer Suche gehrt, bieten viele Suchmaschinen den Titel
der Datei als anklickbaren Verweis an.
Ein Beispiel:
<head>
<title>Ausblick vom Hamburger Michel</title>
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Innerhalb des Grundgersts einer HTML-Datei wird der Titel im Dateikopf notiert. <title>
leitet die Angabe des Titels ein. Dahinter folgt der Text des Titels. Mit </title> wird die Titelangabe abgeschlossen (title = Titel).
Beachten Sie: Der Titeltext sollte nicht zu lang sein. Fr beschreibende Angaben zur Datei gibt es
die Meta-Angaben zum Inhalt (Kapitel 4.2). Fr den Titeltext gelten alle Regeln fr Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

4.1.2

Meta-Angaben zum Inhalt

Allgemeines zu Meta-Angaben

In Meta-Angaben knnen Sie verschiedene ntzliche Anweisungen fr Web-Server, WebBrowser und automatische Suchprogramme im Internet (Robots) notieren. Meta-Angaben
knnen Angaben zum Autor und zum Inhalt der Datei enthalten. Sie knnen aber auch HTTPBefehle absetzen, zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer
anderen Adresse. Meta-Angaben sind nicht fr persnliche Anmerkungen oder Kommentare

120

Kapitel 4: Dateiweite Einstellungen

zum Quelltext der HTML-Datei gedacht. Fr solche Angaben knnen Sie Kommentare (Kapitel
3.6) definieren.
Der HTML-Standard seit Version 4.0 schreibt keine konkreten Meta-Angaben mehr vor, sondern definiert lediglich den grundstzlichen Aufbau einer Meta-Angabe. Zur Standardisierung
von Meta-Angaben arbeitet das W3-Konsortium stattdessen an einer Sprache namens Resource
Description Framework (RDF). Auf den Web-Seiten des W3-Konsortiums finden Sie
Informationen zum Resource Description Framework (www.w3.org/RDF/).
Fr jede Meta-Angabe notieren Sie ein Meta-Tag im HTML-Dateikopf. Es ist also kein Problem,
mehrere Meta-Tags zu notieren. Einige Beispiele:
<head>
<meta name="author" content="Anna Lyse">
<meta http-equiv="expires"
content="Sat, 01 Dec 2001 00:00:00 GMT">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Eine Meta-Angabe steht in einem Standalone-Tag namens meta. Jedes Meta-Tag hat dann in der
Regel zwei Attribute. Das eine Attribut lautet entweder name= oder http-equiv=, und das
andere lautet stets content=. Durch die beiden Attribute lassen sich typische Konfigurationsdaten vom Typ Eigenschaft=Wert erzeugen. Im obigen Beispiel wird auf diese Weise z.B. mit
name= eine Eigenschaft "author" angegeben, der mit content= ein Wert Anna Lyse zugewiesen wird. In der zweiten Meta-Angabe des Beispiels wird einer Eigenschaft namens expires
der Wert Sat, 01 Dec 2001 00:00:00 GMT zugewiesen. In dem zweiten Beispiel wird die
Eigenschaft jedoch mit http-equiv= definiert.
Der Unterschied zwischen name= und http-equiv= ist, dass name= allgemeine, nicht nher spezifizierte Eigenschaften benennen kann, whrend http-equiv= Eigenschaften benennt, die ein
Web-Server auslesen sollte. Eigenschaften, die mit name= definiert werden, richten sich daher
tendenziell eher an auslesende Client-Programme, also an Web-Browser, aber auch an Suchmaschinen-Robots, die Web-Seiten zum Fttern ihrer Suchmaschinendatenbank auslesen.
Eigenschaften, die mit http-equiv= definiert werden, sind dagegen fr den Web-Server gedacht. Die Idee dahinter ist, dass der Web-Server, wenn er von einem aufrufenden Browser die
Anfrage erhlt, diese HTML-Datei zu bermitteln, die Meta-Tags vorher ausliest und Angaben,
die mit http-equiv= definiert wurden, in den HTTP-Header einbaut, den er an den aufrufenden Web-Browser schickt. Als Autor der HTML-Datei knnen Sie auf diese Weise also die
Kommunikation zwischen Web-Server und Web-Browser beeinflussen. Inwieweit Angaben
dieser Art etwas bewirken, hngt also vom Web-Server ab bzw. davon, ob er diese Daten vor dem
bertragen der Datei an den Browser ausliest oder nicht. Fr Wertzuweisungen an content=
gelten alle Regeln fr Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.
Beachten Sie: Mit Meta-Angaben wird leider viel Missbrauch getrieben. Da viele Meta-Angaben
keine unmittelbar nachvollziehbare Wirkung am Bildschirm haben und andererseits mit Suchdiensten zu tun haben, regen sie offenbar magisch die Phantasie mancher Geister an, die meinen,
mit einem Mammutaufgebot irgendwo aufgeschnappter Meta-Angaben wrden sie ber Nacht
zum Superstar, da ihre Homepage dann immer ganz oben bei den Ergebnislisten der Suchmaschinen erscheint. Dazu nur so viel: Homepages werden nicht durch Meta-Angaben erfolgreich,

4.1 HTML-Kopfdaten

121

sondern durch Inhalt. Zu einer sauber gemachten Homepage gehrt aber auch der sinnvolle
Einsatz von Meta-Angaben.

Beschreibung, Autor, Stichwrter, Datum

Die hier beschriebenen Meta-Angaben sind am verbreitetsten, sie werden von fast allen groen
Suchmaschinen im Web erkannt und ausgelesen. Sie knnen fr Suchprogramme Ihre Autorenschaft, eine Kurzbeschreibung des Inhalts, charakteristische Stichwrter und das Publikationsdatum notieren. Hufig werden diese Daten in der Suchmaschine angezeigt, wenn ein
Anwender nach etwas sucht und diese Datei zu den Treffern gehrt. Es ist also sinnvoll, diese
Meta-Angaben in allen inhaltlich relevanten HTML-Dateien zu notieren und dabei redaktionell
genauso sorgfltig zu sein wie bei dem Text, der im Bowser-Fenster angezeigt wird. Ein Beispiel:
<head>
<meta name="description" content="Dieser
Beschreibungstext soll einem Anwender im
Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="author" content="Rainer Wahnsinn">
<meta name="keywords" content="HTML, Meta-Informationen,
Suchprogramme, HTTP-Protokoll">
<meta name="date" content="2001-12-15T08:49:37+00:00">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Mit <meta name="description" content="Beschreibungstext"> bestimmen Sie einen

Beschreibungstext (meta = ber, name = Name, description = Beschreibung, content =
Inhalt).
Mit <meta name="author" content="Autorenname"> teilen Sie den Namen des Autors
(d.h. des inhaltlich Verantwortlichen) fr die HTML-Datei mit (author = Autor).
Mit <meta name="keywords" content="[Wortliste]"> bestimmen Sie Stichwrter fr
ein Suchprogramm. Ein Anwender, der in der Suchdatenbank des Suchprogramms nach
einem dieser Stichwrter sucht, soll die aktuelle HTML-Datei bevorzugt als Suchtreffer
angezeigt bekommen, da das Stichwort in dieser Datei ein zentrales Thema ist (keywords =
Schlsselwrter). Trennen Sie die einzelnen Schlsselwrter durch Kommata. Ein Schlsselwort kann durchaus aus zwei oder mehreren Einzelwrtern bestehen. Halbe oder ganze Stze
gehren hier allerdings nicht hin, denn dafr gibt es den Beschreibungstext, den Sie bei
name="description" notieren knnen.
Mit <meta name="date" content="[Datum/Uhrzeit]"> geben Sie an, wann die Datei
publiziert wurde. Das Schema ist dabei eine UTC-Zeitangabe. Im obigen Beispiel ist 2001 die
Jahreszahl, 12 der Monat (Dezember), 15 der Tag, 08 die Stunden, 49 die Minuten und 37 die
Sekunden. Die Angabe 00:00 hinter dem Pluszeichen ist die Abweichung der Zeit von der
Greenwich-Zeit in Stunden und Minuten, im Beispiel keine Abweichung. Wenn Sie nur das
Datum, aber keine Uhrzeit angeben wollen, notieren Sie nur den Teil der Datumsangabe bis
vor dem groen T (fr Time).

122

Kapitel 4: Dateiweite Einstellungen

Meta-Angaben nach Dublin-Core

Eine internationale Gruppe von Experten, unter dem Namen Dublin Core vereint, hat ein System fr Meta-Angaben verffentlicht. Das System ist einfach zu handhaben und bercksichtigt
alle wichtigen Angaben, die zu einem Dokument gemacht werden knnen. Die Meta-Angaben
von Dublin-Core werden auch vom W3-Konsortium begrt. Einer Verwendung steht also
nichts im Wege. Im Web finden Sie Informationen zur Dublin Core Metadata Initiative
(dublincore.org/).
Zumindest die fhrenden Suchmaschinen im Web erkennen mittlerweile die Meta-Angaben
nach Dublin-Core. Das fhrt bei solchen Suchmaschinen zu einer sehr ordentlichen Suchtrefferanzeige, wenn diese Datei zu den Suchtreffern gehrt. Ein Beispiel:
<head>
<meta name="DC.Title" content="SELFHTML/Meta-Angaben">
<meta name="DC.Creator" content="Stefan M&uuml;nz">
<meta name="DC.Subject" content="Meta-Angaben">
<meta name="DC.Description"
content="Heute bekannte Meta-Angaben in HTML">
<meta name="DC.Publisher" content="TeamOne">
<meta name="DC.Contributor" content="Wolfgang Nefzger">
<meta name="DC.Date" content="2001-12-15">
<meta name="DC.Type" content="Text">
<meta name="DC.Format" content="text/html">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/">
<meta name="DC.Source" content="HTML-Referenz">
<meta name="DC.Language" content="de">
<meta name="DC.Relation" content="Unterkapitel">
<meta name="DC.Coverage" content="Munich">
<meta name="DC.Rights"
content="Alle Rechte liegen beim Autor">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Bei Meta-Angaben, die einem bestimmten ffentlichen System angehren, so wie hier dem
System von Dublin Core, wird dem Namen einer Meta-Angabe eine Kurzbezeichnung fr den
Herausgeber der Meta-Angaben vorangestellt. Bei Dublin Core sind das die Initialen DC. Dahinter folgt, durch einen Punkt getrennt, der Name der Meta-Angabe. Der Zuweisungswert erfolgt
wie blich ber das Attribut content=.
Mit <meta name="DC.Title" content="Titel"> knnen Sie einen Titel fr die Datei angeben, hnlich wie im title-Element von HTML (title = Titel).
Mit <meta name="DC.Creator" content="Name"> weisen Sie den geistigen Urheber des
Inhalts der Datei aus (Creator = Ersteller).
Mit <meta name="DC.Subject" content="Text"> geben Sie das Thema an, das in der
Datei behandelt wird (Subject = Thema).
Mit <meta name="DC.Description" content="Text"> knnen Sie eine Kurzbeschreibung
des Dateiinhalts notieren (Description = Beschreibung).

4.1 HTML-Kopfdaten

123

Mit <meta name="DC.Publisher" content="Name"> knnen Sie angeben, wer fr die

Publikation der Datei verantwortlich ist. Das kann der Autor selbst sein, aber auch etwa ein
Verlag oder der Nachfahre eines verstorbenen Autors (Publisher = Verffentlicher).
Mit <meta name="DC.Contributor" content="Name"> knnen Sie Koautoren oder Personen angeben, die neben dem Hauptautor mageblich am Inhalt beteiligt sind, z.B. Grafiker,
Musiker, bersetzer (Contributor = Beitragender). Falls Sie mehrere Angaben dazu machen,
trennen Sie die Namen durch Kommata.
Mit <meta name="DC.Date" content="Datum"> knnen Sie angeben, wann die Datei publiziert wurde. Im obigen Beispiel ist 2001 die Jahreszahl, 12 der Monat (Dezember) und 15
der Tag.
Mit <meta name="DC.Type" content="Typ"> knnen Sie die Textsorte bzw. den Dokumententyp angeben, dem sich der Inhalt der Datei zuordnen lsst. Die erlaubten Zuweisungen an content= fasst die folgende Tabelle zusammen:
Dokumenttyp

Beschreibung

Wenn die Datei ein Verzeichnis mit Verweisen zu Unterseiten ist.

Wenn die enthaltene Information datensatzartig vorliegt, z.B. in einer Tabelle.
Event
Wenn der Inhalt ein zeitliches Ereignis behandelt, z.B. eine Ausstellung oder eine
Hochzeitsfeier.
Image
Wenn der Inhalt primr eine grafische Darstellung ist oder ein zentrales Foto.
Interactive Resource Wenn der Zweck der Seite in der Interaktion mit dem Anwender liegt, z.B. wenn
ein Java-Applet eingebettet ist, das einen Chat realisiert.
Service
Wenn der Inhalt eine Dienstleistung anbietet.
Software
Wenn der Inhalt Software anbietet, z.B. zum Download.
Sound
Wenn der Inhalt primr akkustisch ist, z.B. ein eingebettetes MP3-Musikstck
zum Abspielen anbietet oder einen laufenden Radiosender ber RealAudio
einbettet.
Text
Wenn der Inhalt textorientiert ist egal, ob es sich um Sachtexte, Literatur, Witze,
Nachrichten oder wissenschaftliche Abhandlungen handelt.
Collection
Dataset

Mit <meta name="DC.Format" content="Typ"> knnen Sie das Datenformat bzw. den
Medientyp angeben, fr den der Inhalt der Datei gedacht ist. Als Wert bei content= knnen
Sie einen Mime-Type (Anhang A.2) angeben. Der Mime-Type fr HTML lautet text/html.
Mit <meta name="DC.Identifier" content="Wert"> knnen Sie eine eindeutige
Nummer oder Bezugsadresse fr die Datei angeben (Identifier = eindeutiger Bezeichner). Bei
Web-Seiten ist das beispielsweise der Original-URI.
Mit <meta name="DC.Source" content="Quelle"> knnen Sie eine Quelle nennen, von
der die aktuelle Datei abgeleitet ist (Source = Quelle). Das kann beispielsweise der Fall sein,
wenn eine HTML-Datei Auszge aus einem Buch beinhaltet. In diesem Fall knnen Sie das
Buch als Quelle angeben.

124

Kapitel 4: Dateiweite Einstellungen

Mit <meta name="DC.Language" content="Sprache"> knnen Sie die Landessprache

angeben, in der der Inhalt der Datei verfasst ist (Language = Sprache). Als Angabe bei content= wird ein Sprachenkrzel (Anhang A.3) erwartet.
Mit <meta name="DC.Relation" content="Quelle"> knnen Sie angeben, welche Beziehung zwischen der aktuellen Datei und einem zugehrigen Editionsprojekt bestehen (Relation
= Bezug). Der Wert bei content= kann z.B. eine verbale Beschreibung der Bezugs-Art sein.
Mit <meta name="DC.Coverage" content="Text"> knnen Sie einen zeitlichen oder geografischen Bezugspunkt fr den Inhalt der Datei angeben (Coverage = Erfassung, Berichterstattung). Das kann bei geografischen Angaben etwa ein Ort, eine Lngen-/Breitengradangabe
oder eine Region sein, bei zeitlichen Angaben ein Datum oder ein Zeitalter.
Mit <meta name="DC.Rights" content="Text"> knnen Sie eine Angabe zum Copyright
des Dateiinhalts machen (Rights = Rechte). Sie knnen dabei aber auch einen URI angeben,
unter dem die genauen Copyright-Angaben genannt werden.
Beachten Sie: Sie mssen nicht alle Meta-Angaben des Dublin-Core-Sets verwenden. Es ist kein
Problem, wenn Sie nur zu denjenigen etwas notieren, wo Sie sinnvolle Angaben machen knnen.

Auslesen erlauben/verbieten
Die folgenden Angaben werden von den meisten Suchmaschinen-Robots beachtet. Wenn Sie
eine HTML-Datei zwar im Web anbieten, aber trotzdem verhindern mchten, dass die Datei
ber ffentliche Suchdienste auffindbar sein soll, knnen Sie eine entsprechende Anweisung als
Meta-Information fr Suchprogramme notieren. Sie knnen solchen Suchprogrammen aber
auch mit einer entsprechenden Eingabe signalisieren, dass Sie ein Auslesen der Datei und aller
Dateien, die darin ber Verweise erreichbar sind, ausdrcklich wnschen. Ein Beispiel:
<head>
<meta name="robots" content="noindex">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Mit <meta name="robots" content="noindex"> verbieten Sie einem Suchprogramm, Inhalte

aus der HTML-Datei an seine Suchdatenbank zu bermitteln (robots = Suchprogramme, content
= Inhalt, noindex = keine Indizierung). Anstelle von noindex knnen Sie auch none notieren
(none = keine).
Daneben sind folgende weitere Angaben mglich:
<meta name="robots" content="index">: Damit erlauben Sie einem Suchprogramm
ausdrcklich, Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu bermitteln
(index = Indizierung).
<meta name="robots" content="nofollow">: Damit erlauben Sie einem Suchprogramm,
Inhalte aus der aktuellen HTML-Datei an seine Suchdatenbank zu bermitteln (nofollow =
nicht folgen). Sie verbieten dem Suchprogramm jedoch, untergeordnete Dateien Ihres Projekts, zu denen Verweise fhren, zu besuchen.
<meta name="robots" content="follow">: Damit erlauben Sie einem Suchprogramm
ausdrcklich, Inhalte aus der aktuellen HTML-Datei und aus untergeordneten Dateien Ihres

4.1 HTML-Kopfdaten

125

Projekts, zu denen Verweise fhren, zu besuchen und an seine Suchdatenbank zu bermitteln

(follow = folgen).
Beachten Sie: Wenn Sie sich fr das Erlauben und Verbieten von Inhalten fr Such-Robots
interessieren, sollten Sie auch den Abschnitt Anhang A.6 robots.txt Robots kontrollieren lesen.

Sprache bei Stichwrtern

Fr Meta-Angaben zu Stichwrtern (bei solchen zur Kurzbeschreibung des Inhalts sollte es auch
funktionieren) knnen Sie mehrere gleichartige Meta-Angaben notieren und dabei zwischen
Landessprachen trennen. Ein Beispiel:
<head>
<meta name="keywords" lang="de"
content="Ferien, Griechenland, Sonnenschein">
<meta name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<meta name="keywords" lang="en"
content="holiday, Greece, sunshine">
<meta name="keywords" lang="fr"
content="vacances, Gr&egrave;ce, soleil">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Im Beispiel werden die gleichen Stichwrter in den Sprachen Deutsch, US-Englisch, BritischEnglisch und Franzsisch definiert. Dabei wird das Attribut lang= benutzt, um die Sprache
anzugeben. Als Angabe ist ein Sprachenkrzel (Anhang A.3) erlaubt, z.B. de fr deutsch, en fr
englisch, fr fr franzsisch, it fr italienisch oder es fr spanisch.
Beachten Sie: Das Attribut lang= gehrt zu den Universalattributen (Kapitel 13.1) in HTML.

4.1.3

Angabe zum Default-Zeichensatz

Sie knnen mit Hilfe einer Meta-Angabe ausdrcklich bestimmen, welchen Zeichensatz Sie
innerhalb der HTML-Datei verwenden. Diese Angabe ist fr den Web-Server und den WebBrowser sehr hilfreich, denn sie teilt beiden Softwaretypen eindeutig mit, nach welchem Zeichensatz die Inhalte der HTML-Datei im Zweifelsfall zu interpretieren sind. Wichtig ist die Zeichensatzangabe vor allem dann, wenn Sie innerhalb der HTML-Datei z.B. deutsche Umlaute
nicht maskieren. Ein Beispiel:
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Die Angabe zum Zeichensatz wird mit http-equiv="content-type" definiert. Daran ist schon
erkennbar, dass sich die Angabe auch an den Web-Server richtet. Bei content= geben Sie
zunchst den Mime-Type an, der fr HTML-Dateien immer text/html lautet. Dahinter folgt,
durch einen Strichpunkt getrennt, die Angabe des Zeichensatzes. Im obigen Beispiel wird der

126

Kapitel 4: Dateiweite Einstellungen

Zeichensatz ISO-8859-1 definiert (das ist der normale Zeichensatz fr westeuropische Sprachen, unter anderem auch fr Deutsch). Erlaubt sind Zeichensatzangaben, wie sie auf der WebAdresse www.iana.org/assignments/character-sets angegeben sind. Weitere Informationen ber
solche Zeichenstze, auch ber andere als diesen Zeichensatz, finden Sie im Abschnitt 23.1
Zeichenstze (ISO-8859-Familie und andere).

4.1.4

Angaben zu Default-Sprachen fr Scripts und Stylesheets

Fr HTML-Ergnzungssprachen wie Stylesheets und Scripts knnen Sie bestimmen, welche

Sprachen Sie innerhalb der HTML-Datei verwenden. Vor allem bei JavaScript ist diese Angabe
wichtig, wenn Sie die HTML-Variante Strict benutzen. Denn das language-Attribut im
script-Tag, mit dem traditionellerweise die verwendete Script-Sprache angegeben wird, ist in
dieser HTML-Variante nicht erlaubt. Ein Beispiel:
<head>
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Die Angaben zum Bestimmen der Default-Script-Sprache und der Default-Stylesprache haben
einen einheitlichen Aufbau. Die Angabe zur bevorzugten Script-Sprache leiten Sie mit <meta
http-equiv="Content-Script-Type" ein, die Angabe zur bevorzugten Stylesprache mit
http-equiv="Content-Style-Type". Bei dem Attribut content= mssen Sie dann den
Mime-Type der gewnschten Sprache angeben. Beispiele sind text/css fr CSS Stylesheets und
text/javascript fr JavaScript.

4.1.5

Datei von Originaladresse laden

Hufig abgerufene Web-Seiten werden im Web auf so genannten Proxy-Servern zwischengespeichert. Das ist dann ein so genannter Proxy-Cache. Auch Browser speichern aufgerufene
Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache.
Die Cache-Speicher sparen in vielen Fllen Leitungswege und Ressourcen. Ein Nachteil ist
jedoch, dass dem Anwender mglicherweise Daten angezeigt werden, die gar nicht mehr aktuell
sind, weil auf der Original-Adresse mittlerweile neue Daten liegen. Sie knnen mit Hilfe einer
Meta-Angabe erzwingen, dass die Daten nicht aus einem Cache-Speicher serviert werden,
sondern vom Original-Server. Zu empfehlen ist diese Angabe, wenn Sie die Daten einer HTMLDatei hufig ndern und neu ins Web hochladen. Ein Beispiel:
<head>
<meta http-equiv="expires" content="0">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

4.1 HTML-Kopfdaten

127

Mit <meta http-equiv="expires" content="0"> veranlassen Sie, dass diese HTML-Datei in

jedem Fall von der Original-Adresse geladen wird (expires = fllig werden).
Bei content= knnen Sie anstelle der 0 in diesem Zusammenhang aber auch ein bestimmtes
Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass die Daten dieser Datei
nach dem angegebenen Zeitpunkt auf jeden Fall vom Original-Server geladen werden sollen.
Datum und Uhrzeit mssen Sie im internationalen Format angeben, zum Beispiel: content="Sat, 15 Dec 2001 12:00:00 GMT". Notieren Sie den Zeitpunkt so wie im Beispiel mit
allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe
GMT am Ende. Als Wochentagsnamen sind erlaubt Mon (Montag), Tue (Dienstag), Wed
(Mittwoch), Thu (Donnerstag), Fri (Freitag), Sat (Samstag) und Sun (Sonntag). Als Monatsnamen sind erlaubt Jan (Januar), Feb (Februar), Mar (Mrz), Apr (April), May (Mai), Jun (Juni),
Jul (Juli), Aug (August), Sep (September), Oct (Oktober), Nov (November) und Dec
(Dezember).
Anstelle der 0 knnen Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der Web-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder
vom Server ldt. Mit content="43200" stellen Sie beispielsweise einen Wert von 12 Stunden
ein.

4.1.6

Weiterleitung zu anderer Adresse (Forwarding)

Diese Angabe ist zwar ziemlich eingebrgert und sehr beliebt, weshalb sie hier auch beschrieben
wird. In der HTML-Spezifikation verteufelt das W3-Konsortium diese Angabe jedoch mit der
Begrndung, dass die Seite dann fr einige Besucher berhaupt nicht mehr anzeigbar sei. Das
mutet zwar etwas seltsam an, da es seit Urzeiten mit praktisch allen Browsern erfolgreich funktioniert. Es sei an dieser Stelle aber auf die Verteufelung hingewiesen. Benutzt wird diese Angabe
in der Praxis oft fr das automatische Weiterleiten eines Seitenbesuchers von einer alten Adresse
Ihres Web-Projekts zu einer neuen Adresse.
Ein Beispiel:
<head>
<meta http-equiv="refresh"
content="5; URL=http://selfhtml.teamone.de/">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Mit <meta http-equiv="refresh" content="..."> veranlassen Sie die Weiterleitung zu

einer anderen Adresse. Mit content="5; bestimmen Sie, nach wie viel Sekunden die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite, nachdem sie geladen
ist, 5 Sekunden lang angezeigt wird. Danach wird die Adresse aufgerufen, die mit url=..."
angegeben wird. Notieren Sie den gesamten Befehl inklusive der etwas ungewohnten Stellung der
Anfhrungszeichen so wie im Beispiel oben angegeben. Setzen Sie Ihre gewnschte Anzeigedauer
und den Namen der aufzurufenden Adresse ein. Bei lokalen Adressen auf dem gleichen Server
knnen Sie absolute oder relative Pfadangaben ohne Angabe von http:// und Domain notieren. Bei Weiterleitung zu Dateien im gleichen Verzeichnis gengt der Dateiname. Bei einem
Timeout von 0 wird die angegebene nchste Datei sofort geladen.

128

Kapitel 4: Dateiweite Einstellungen

Beachten Sie: Verlassen Sie sich nicht darauf, dass diese Angabe funktioniert. Wenn Sie etwa eine
Weiterleitung zu einer neuen Adresse eingeben, notieren Sie am besten auf der gleichen Seite zur
Sicherheit noch einen normalen Verweis zu der neuen Adresse. So finden auch Anwender, bei
denen die Meta-Angabe nicht funktioniert, ber den Verweis den Weg zu Ihrer neuen Heimat.

4.1.7

Angaben zu PICS

PICS steht fr Platform for Internet Content Selection. Es handelt sich dabei um ein standardisiertes Schema zum Bezeichnen von Internet-Inhalten. Das Schema wurde ins Leben gerufen,
um jugendfeie Internet-Inhalte als solche auszuzeichnen. Es gibt so genannte PICS-Labels, also
Auszeichnungen. Anbieter von Web-Seiten knnen ihre Seiten entweder freiwillig und nach
eigenem Ermessen mit einem PICS-Label versehen, oder und das ist wohl eher Sinn der Sache
sie nehmen einen unabhngigen PICS-Service in Anspruch, der PICS-Zertifikate fr Inhalte
ausstellt.
Auf Einzelheiten des PICS-Systems wird hier nicht nher eingegangen. Informationen im Web
finden Sie auf der PICS-Seite des W3-Konsortiums (www.w3.org/PICS/). Moderne Browser
knnen PICS-Inhalte erkennen. Dazu lassen sich softwareseitig Einstellungen vornehmen, zum
Beispiel durch Eltern von surfenden Kindern. So kann der Browser bei Seiten mit PICS-Labeln
durch Vergleichen der Konfiguration mit dem Label erkennen, ob der Inhalt angezeigt werden
darf oder nicht. Ein Beispiel:
<head>
<meta http-equiv="PICS-Label" content=
(PICS-1.1 "http://www.gcf.org/v2.5"
labels on "1994.11.05T08:15-0500"
until "1995.12.31T23:59-0000"
for "http://w3.org/PICS/Overview.html"
ratings (suds 0.5 density 0 color/hue 1))>
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Durch die Meta-Angabe http-equiv="PICS-Label" knnen Sie eine PICS-Auszeichnung fr

eine HTML-Datei notieren. Hinter content= folgt die PICS-Auszeichnung. Die gesamte Auszeichnung wird in einfache Anfhrungszeichen gesetzt. Die Syntax der PICS-Auszeichnung wird
innerhalb davon in runde Klammern eingeschlossen. Innerhalb der runden Klammern stehen
zunchst die Pflichtangabe zur PICS-Version und die Angabe des URI, wo die Inhaltskategorisierung definiert wird, auf die hier Bezug genommen wird. Die Angaben labels on, until und
for sind optional. Entscheidend ist aber auf jeden Fall die Angabe ratings, in der die eigentliche Inhaltskategorisierung notiert wird. Die Kategorisierung wird dabei nochmals in runde
Klammern eingeschlossen. Die einzelnen dort mglichen Angaben und ihre Bedeutung muss der
PICS-Service bereitstellen, der die PICS-Zertifikate verteilt.

4.1 HTML-Kopfdaten

4.1.8

129

Meta-Angaben in separater Datei (Profil)

Sie knnen ein externes Profil fr Meta-Angaben angeben, an das Sie sich halten. Das Profil
richtet sich sowohl an Web-Browser als auch an Suchdienste. Es kann sich dabei um allgemein
bekannte Profile handeln, die bestimmte Internet-Adressen als Heimat haben. Denkbar ist eine
solche Adresse beispielsweise fr Dublin-Core. Ebenso ist es aber auch mglich, eine eigene
Datei mit eigenen Meta-Definitionen anzugeben. Ein Beispiel:
<head profile="http://meine.org/profil.dat">
<meta name="Kategorie" content="A.1.B">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Um ein Profil einzubinden, notieren Sie im einleitenden <head>-Tag das Attribut profile=. Als
Wert weisen Sie einen URI zu, unter dem die Profildatei abgelegt ist. Es gibt keine Angaben
darber, wie diese Profildatei auszusehen hat. Das W3-Konsortium mchte die angegebene
Adresse auch eher als global eindeutigen Namen verstanden wissen. Web-Browser oder
Suchmaschinen, die das entsprechende Profil kennen, brauchen dann gar nichts auslesen, sondern erfahren auf diese Weise einfach, dass die nachfolgenden Meta-Angaben diesem Profil
gem zu interpretieren sind.
Im Beispiel wird ein Profil zugrunde gelegt, das auf der Internet-Adresse http://meine.org/
profil.dat abgelegt ist. Es wird angenommen, dass in dem Profil eine Meta-Eigenschaft mit
dem Namen Kategorie definiert wird. Diese Eigenschaft kann dann mit <meta name=
"Kategorie" ... benutzt werden.

4.1.9

Schema zu einer Meta-Angabe

Dies ist, wenn Sie so wollen, eine Meta-Meta-Angabe. Fr Wertzuweisungen, die Sie beim content-Attribut einer Meta-Angabe notieren, gibt es manchmal ein bekanntes Schema, nach dem
der Wert interpretiert werden kann. Mit Hilfe eines zustzlichen Attributs knnen Sie angeben,
nach welchem Schema die Wertzuweisung zu interpretieren ist. Ein Beispiel:
<head profile="http://meine.org/profil.dat">
<meta name="Typ" scheme="MimeType" content="image/svg+xml">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

In dem Beispiel wird ein Profil zugrunde gelegt, das auf der Internet-Adresse http://meine.
org/profil.dat abgelegt ist. Es wird angenommen, dass in dem Profil eine Eigenschaft mit
dem Namen Typ definiert wird. Diese Eigenschaft kann dann in einer Meta-Angabe mit
name="Typ" bezeichnet werden. Die Angabe zu scheme= im gleichen Tag stellt den Versuch dar,
der auslesenden Software einen Hinweis zu geben, wie die zugehrige Angabe bei content= zu
verstehen ist. Im Beispiel wird mit scheme="MimeType" versucht, der Software mitzuteilen, dass
die Angabe bei content= einen Mime-Type (Anhang A.2) meint.

130

Kapitel 4: Dateiweite Einstellungen

4.1.10 Diverse Meta-Angaben

Die folgenden Meta-Angaben sind verstreute Sammlerstcke. Oft sind es Angaben, die mit
bestimmten Web-Servern oder Browsern oder Suchmaschinen-Robots funktionieren, oder
Angaben, die von Bearbeitungs-Software eingetragen wird. Manchmal sind es aber mglicherweise auch nur Erfindungen von Leuten, die an magische Krfte in ihren HTML-Dateien glauben. Hier eine kleine Auswahl solcher Meta-Angaben:
<meta http-equiv="content-language" content="de">: Sprache des Dateiinhalts
(HTTP 1.0 und RFC1766)
<meta name="generator" content="MS Frontpage 2000">, <meta name="generator"
content="Netscape Composer">: Wird von HTML-Editoren, vor allem von WysiwygEditoren ohne Wissen des Autors eingefgt. Softwarehersteller knnen so prima das Web
durchsuchen und feststellen, wo und wie viel mit ihrer Software gearbeitet wird.
<meta http-equiv="ext-cache" content="name=/some/path/index.db; instructions=
user instructions">: Anweisung an den Netscape-Browser: nicht den normalen lokalen
Browser-Cache benutzen, sondern den angegebenen externen Cache.
<meta http-equiv="cache-control" content="no-cache">: Anweisung an den Browser:
keinen Cache benutzen, sondern von Originalseite laden.
<meta http-equiv="set-cookie" content="cookievalue=xxx;expires=friday, 31dec-99 23:59:59 gmt; path=/;">: Cookie setzen (Netscape).
<meta http-equiv="pragma" content="no-cache">: An Proxy-Agenten: Datei bitte
nicht auf Proxy-Server speichern!
<meta name="revisit-after" content="20 days">: An Such-Robot: bitte nach 20
Tagen erneut vorbeikommen und Datei neu auslesen!

4.1.11 Adressbasis und Zielfensterbasis

Adressbasis
Sie knnen innerhalb einer HTML-Datei, die Sie auf einem WWW-Server ablegen, nochmals
deren internetweit eindeutigen, genauen URI notieren. Ein Web-Browser, der diese Information
ausliest, kann in Fehlersituationen besser auf verknpfte oder referenzierte Dateien zugreifen.
Bei Projektverweisen zu anderen HTML-Dateien und bei Referenzen von Grafiken oder
Multimedia gilt die hier definierbare Basis als Bezug. Ein Beispiel:
<head>
<base href="http://selfaktuell.teamone.de">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Die Angabe der Dateibasis erfolgt im Dateikopf mit <base href= ... > und dem genauen URI
der Datei (base = Basis, href = hyper reference = Hyper(text)-Referenz). Wenn nun in der Datei
beispielsweise die Grafikreferenz <img src="/src/logo.gif"> steht, so ermittelt der WWW-

4.1 HTML-Kopfdaten

131

Browser diese Grafik mit dem absoluten URI <img src="http://selfaktuell.teamone.

de/src/logo.gif">.

Beachten Sie: Wenn es wichtig fr Sie ist, dass Ihre Projekte leicht auf andere Server-Rechner, in
andere Verzeichnisstrukturen usw. bertragbar bleiben, sollten Sie auf die Definition einer
Adressbasis verzichten. Denn mit der Angabe einer absoluten Adressbasis wird der WWWBrowser stets versuchen, Verweisziele und referenzierte Dateien von der hier angegebenen
Adresse zu laden. Dies macht das Austesten der Dateien auf einem lokalen PC unmglich!
Die Angabe der Adressbasis ist dagegen ein gewisser Schutz vor HTML-unkundigen Anwendern,
die sich eine HTML-Datei lokal abspeichern oder das Cache-Verzeichnis ihres WWW-Browsers
durchsuchen. Beim lokalen Aufruf der HTML-Datei wird der WWW-Browser stets eine OnlineVerbindung verlangen und die Datei von der angegebenen Adresse laden wollen.

Zielfensterbasis
Diese Angabe ist z.B. in Verbindung mit Frames sinnvoll. Sie knnen fr eine HTML-Datei, die
innerhalb eines Framesets in einem Frame-Fenster angezeigt wird, festlegen, dass alle Verweise
dieser Datei in einem bestimmten anderen Frame-Fenster angezeigt werden, solange bei einem
Verweis kein anderes Frame-Fenster angegeben wird. Da hufig alle Verweisziele einer Datei, die
in einem Frame-Fenster angezeigt wird, in einem bestimmten anderen Frame-Fenster angezeigt
werden sollen, spart diese einmalige Angabe im Dateikopf viel Tipparbeit und hilft, den
Dateiumfang zu verkleinern. Siehe auch das Kapitel 9.3 Verweise bei Frames. Ein Beispiel:
<head>
<base target="RechtesFenster">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Mit <base target= ... > legen Sie das Default-Fenster fest, in dem Verweisziele angezeigt
werden sollen. Voraussetzung ist im obigen Beispiel, dass Sie ein Frameset mit Frame-Fenstern
definiert haben. Bei dem gewnschten Frame-Fenster mssen Sie mit dem Attribut name= den
Fensternamen vergeben haben, den Sie hier bei <base target= ... > angeben.
Anstelle eines selbst vergebenen Frame-Fensternamens knnen Sie aber auch eine der folgenden
festen Angaben notieren, die auch fr HTML-Dateien auerhalb von Framesets interessant sind:
<base target="_blank"> ffnet jeden Verweis der Datei in einem neuen Browser-Fenster.
<base target="_top"> ffnet jeden Verweis der Datei im gesamten Bowser-Fenster und
befreit die Anzeige aus allen eventuell angezeigten Framesets (z.B. auch aus fremden, feindlichen Framesets siehe Abschnitt 9.5.2 ber Schaufenstereffekte).
<base target="_parent"> ffnet jeden Verweis der Datei im bergeordneten Frameset
und befreit die Anzeige dem inneren Frameset. _parent und _top sind dann verschieden,
wenn ein Frame-Fenster nochmals ein komplettes Frameset enthlt, also eher etwas fr
Mikro-Freaks.

132

Kapitel 4: Dateiweite Einstellungen

4.1.12 Logische Beziehungen

Beziehungen zu anderen Quellen
Hinweis fr HTML-Einsteiger: Das hier beschriebene Element hat nichts mit normalen,
anklickbaren Verweisen innerhalb einer HTML-Datei zu tun. Solche Verweise werden im Kapitel
6 ber Verweise beschrieben.
Die auf den folgenden Seiten beschriebenen Mglichkeiten sind zwar seit Urzeiten Bestandteil
von HTML, werden aber leider von keinem der populren heutigen Web-Browser untersttzt
und sind von daher zunchst einmal wertlos. Sie stellen jedoch eine hervorragende Mglichkeit
dar, um intern die hypertextuellen Abhngigkeiten einer HTML-Datei, etwa die vorherige und
nchste Seite, die bergeordnete Seite usw. explizit anzugeben. Suchdienste oder Softwareprogramme knnen dann beispielsweise ganze Site-Maps Ihres Projekts erstellen, also grafische
Darstellungen der Seitenstruktur. Noch machen zwar kaum Suchmaschinen davon Gebrauch,
doch es ist zu hoffen, dass sich dies noch ndern wird.
Web-Browser sollten, wenn sie solche Tags in einer HTML-Datei vorfinden, eine entsprechende
Button-Leiste oder vergleichbare Bedienelemente anzeigen. Mit dem Anklicken der Buttons
sollte der Anwender dann Sprungverweise zu den verknpften Verweiszielen ausfhren. Weder
Netscape noch der MS Internet Explorer sind bis heute auf diese sinnvollen Vorschlge
eingegangen wenn also einer dieser Hersteller behauptet, sein Browser interpretiere HTML 4.0
vollstndig, dann drfen Sie schmunzelnd darauf hinweisen, dass der Browser nicht mal HTML
2.0 vollstndig interpretiert eben wegen dieser Tags. Sie knnen pro HTML-Datei ein Set
solcher Tags notieren. Sie knnen alle, aber auch nur einzelne, gerade bentigte Tags verwenden.
Ein Beispiel:
<head>
<link rel="contents" href="inhalt.htm" title="Inhaltsverzeichnis">
<link rel="index" href="stichwrt.htm" title="Stichwortverzeichnis">
<link rel="glossary" href="glossar.htm"
title="Begriffs-Glossar">
<link rel="next" href="augsburg.htm"
title="nchste Seite">
<link rel="previous" href="aachen.htm" title="vorherige Seite">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

Mit <link rel= leiten Sie eine logische Dateibeziehung ein. Dahinter folgt der Typ der Dateibeziehung (link = Verweis, rel = relationship = Verwandtschaft). Erlaubte Typen sind:
rel="contents" steht fr: Bezug zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)
rel="chapter" steht fr: Bezug zum Kapitel (chapter = Kapitel)
rel="section" steht fr: Bezug zum Abschnitt (section = Abschnitt)
rel="subsection" steht fr: Bezug zum Unterabschnitt (subsection = Unterabschnitt)
rel="index" steht fr: Bezug zum Stichwortverzeichnis
rel="glossary" steht fr: Bezug zum Glossar
rel="appendix" steht fr: Bezug zum Anhang (appendix = Anhang)

4.1 HTML-Kopfdaten

133

rel="copyright" steht fr: Bezug zur Copyright-Angabe

rel="next" steht fr: Bezug zur nchsten Datei in der Guided tour (next = nchste Seite)
rel="prev" steht fr: Bezug zur vorherigen Datei in der Guided tour (prev = previous =
vorherige Seite)
rel="start" steht fr: Bezug zur ersten Datei in der Guided tour (start = erste Seite)
rel="help" steht fr: Bezug zum Hilfekontext (help = Hilfe)
rel="bookmark" steht fr: Bezug zu einem allgemeinen Orientierungspunkt (bookmark =
Lesezeichen)
rel="stylesheet" steht fr: Bezug zu einer Datei mit Style-Definitionen. Diese eine Angabe
wird von Netscape und dem MS Internet Explorer tatschlich interpretiert, und zwar, um
Stylesheets in HTML einzubinden.
rel="alternate" steht fr: Bezug zu einer Datei mit dem gleichen Inhalt wie der aktuellen,
jedoch in einer anderen Dokumentversion (alternate = alternierend). Von diesem Typ knnen
Sie bei Bedarf auch mehrere Befehle notieren.
Das Attribut href= dient zur Bestimmung, wohin ein Verweis zum Verknpfungsziel fhren
soll. Bei der Wertzuweisung gelten die gleichen Regeln wie bei normalen Verweisen. Mit dem
Attribut title= knnen Sie die Beschriftung definieren, die verwendet wird, wenn der Browser
Verweis-Buttons anzeigt. Die Angabe sollte das Verknpfungsziel bezeichnen. Weitere mgliche
Attribute im <link>-Tag sind:
media= zur Bestimmung des Ausgabemediums (mehr dazu im Abschnitt 15.2.4 Verschiedene
separate Stylesheets fr unterschiedliche Ausgabemedien).
target= zur Angabe des Zielfensters, in dem das Verknpfungsziel ausgegeben werden soll.
Bei Frames kann das eines der definierten Frame-Fenster sein. Es kann aber auch einer der
reservierten Fensternamen angegeben werden: target="_blank" ffnet den Verweis in
einem neuen Browser-Fenster, target="_top" im gesamten Bowser-Fenster und befreit die
Anzeige aus allen eventuell angezeigten Framesets, target="_parent" im bergeordneten
Frameset und befreit die Anzeige aus dem inneren Frameset.
hreflang= erlaubt die Angabe der Landessprache des Verknpfungsziels mit Hilfe eines
Sprachenkrzels.
charset= ermglicht die Angabe des Zeichensatzes, den das Verknpfungsziel verwendet,
z.B. ISO-8859-1 erlaubt sind dabei Zeichensatzangaben, wie sie auf der Web-Adresse
http://www.iana.org/assignments/character-sets angegeben sind.
Ferner kann das link-Element Universalattribute haben.
Beachten Sie: Neben diesen im HTML-Standard verankerten Ausprgungen des link-Elements
gibt es noch einen weitere, die zum Einbinden downloadbarer Schriftarten in HTML dient. Ein
Beispiel:
<link rel="fontdef"
src="http://www.meine.com/fonts/chianti.pfr">

Damit binden Sie eine Schriftart namens chianti.pfr ein. Nheres zu diesem Thema erfahren
Sie im Abschnitt 23.4 Downloadbare Schriftarten.

134

Kapitel 4: Dateiweite Einstellungen

Rckbeziehungen
Rckbeziehungen sind fr bidirektionale Beziehungen zweier HTML-Dateien gedacht. Das ist
der Fall, wenn sowohl Datei A auf Datei B verweist als auch Datei B auf Datei A, wenn also beide
logisch gesehen ein sinnvolles Verweisziel von der jeweils anderen sind.
Ebenso wie logische Beziehungen zu anderen Dateien sollten Rckbeziehungen als Buttons oder
in vergleichbarer Form dargestellt werden (Netscape und der MS Internet Explorer bleiben auch
hierbei stumm). Suchmaschinen knnen aus Rckbeziehungsangaben interessante Schlsse ber
die Hypertextstruktur eines Projekts ziehen.
Beispiel aus datei_1.htm:
<head>
<link rel="alternate" href="datei_2.htm"
title="zweite Lesart">
</head>

Beispiel aus datei_2.htm:

<head>
<link rev="alternate" href="datei_1.htm"
title="erste Lesart">
</head>

Mit <link rev= leiten Sie eine Rckbeziehung ein. Ansonsten ist die Funktionalitt identisch
mit <link rel= fr logische Beziehungen zu anderen Quellen. Es sind auch die gleichen anderen Attribute mglich. Im obigen Beispiel sehen Sie, wie zwei HTML-Dateien, deren angenommener Inhalt zwei verschiedene Betrachtungsweisen ein und derselben Sache behandelt,
durch Rckbeziehungen logisch miteinander verknpft werden.

4.1.13

Durchsuchbarkeit mit Server-Kommunikation

Heute spielt dieses Element in der Praxis keine Rolle mehr, da moderne WWW-Browser
bequemes und schnelles Suchen nach Text in einer angezeigten HTML-Datei erlauben. Das
Element ist mittlerweile auch als deprecated eingestuft und soll knftig aus dem HTML-Standard
entfallen. Die folgenden Informationen haben daher eher historischen Charakter.
Eine HTML-Datei kann eine durchsuchbare Datei sein. Das bedeutet, dass ihr Inhalt auf dem
Server-Rechner nach allen vorkommenden Wrtern indexiert wurde. Es hat jedoch nur einen
Sinn, eine HTML-Datei als durchsuchbar zu definieren, wenn ihr Inhalt tatschlich in indexierter Form, also in einer Suchindexdatei auf dem Server-Rechner vorliegt.
Bei einer als durchsuchbar definierten HTML-Datei erscheint bei der Anzeige im Web-Browser
am Anfang der Datei ein Eingabefeld, das dem Anwender die Eingabe eines Suchbegriffs erlaubt.
Ein Beispiel:
<head>
<isindex prompt="Geben Sie einen Suchbegriff ein: ">
<!-- ... andere Angaben im Dateikopf ... -->
</head>

4.2 Dateiweite Einstellungen

135

Mit isindex deklarieren Sie eine HTML-Datei als durchsuchbar. Mit dem Attribut prompt=
bestimmen Sie einen Eingabeaufforderungstext. Der Text muss in Anfhrungszeichen stehen
(prompt = Aufforderung).

4.2

Dateiweite Einstellungen

4.2.1

Farben fr Hintergrund, Text und Verweise

Farbe fr den Hintergrund

Sie knnen eine Farbe fr den Hintergrund des Anzeigefensters bestimmen. Die gesamte HTMLDatei wird auf dieser Hintergrundfarbe angezeigt.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#CCFFFF">
<h1>Text, Verweise, Grafikreferenzen usw.</h1>
</body>
</html>

Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit
dem Attribut bgcolor= bestimmen Sie die Farbe fr den Bildschirmhintergrund (bgcolor =
background color = Hintergrundfarbe). Die gesamte HTML-Datei wird auf der hier definierten
Hintergrundfabe angezeigt. Fr die Farbauswahl gelten die Regeln zum Definieren von Farben in
HTML.
Beachten Sie: Das Attribut bgcolor= ist als deprecated eingestuft und soll knftig vermieden
werden. Den gleichen Effekt erreichen Sie nmlich auch mit Hilfe von CSS Stylesheets, z.B. so:
<body style="background-color:#CCFFFF">

Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, mssen Sie die Hintergrundfarbe in jeder HTMLDatei neu definieren. Natrlich knnen Sie auch fr jede HTML-Datei andere Farben definieren.
Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende (kontrastierende)
Textvordergrundfarben definieren (siehe hierzu folgender Abschnitt).

Farben fr Text und Verweise

Sie knnen dateiweite Farben definieren:
fr Text (gltig fr alle Elemente wie berschriften, normalen Flietext, Listen usw.),

136

Kapitel 4: Dateiweite Einstellungen

fr Verweise zu noch nicht besuchten Stellen,

fr Verweise zu bereits besuchten Stellen,
fr Verweise, whrend sie angeklickt werden.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#663333" text="#FFCC99"
link="#FF9966" vlink="#FF9900" alink="#FFFFFF">
<h1>Text</h1>
<a href="http://www.yahoo.de/">Verweis zu Yahoo</a>
</body>
</html>

Die Angaben erfolgen im einleitenden <body>-Tag der HTML-Datei. Fr die Farbauswahl gelten
die Regeln zum Definieren von Farben in HTML.
Mit text= definieren Sie eine Farbe fr den Text.
Mit link= definieren Sie eine Farbe fr Verweise zu noch nicht besuchten Dateien (link =
Verweis).
Mit vlink= definieren Sie eine Farbe fr Verweise zu bereits besuchten Dateien (vlink =
visited link = besuchter Verweis).
Mit alink= definieren Sie eine Farbe fr Verweise, die der Anwender gerade anklickt (alink =
activated link = aktivierter Verweis).
Beachten Sie: Alle diese Attribute sind als deprecated eingestuft und sollen knftig vermieden
werden. Den gleichen Effekt erreichen Sie nmlich auch mit Hilfe von CSS Stylesheets, z.B. im
Dateikopf zwischen <head> und </head> mit dem folgenden Quelltext:
<style type="text/css">
body { background-color:#663333; color:#FFCC99; }
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
</style>

Die definierten Textvordergrundfarben sollten mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben whlen (z.B. Wei, Gelb, Hellgrn und Hellblau).

Weitere Mglichkeiten
Bei Verwendung von CSS Stylesheets lesen Sie zunchst in Kapitel 15 nach, wie man CSS-Formate
definieren kann. Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden.

4.2 Dateiweite Einstellungen

137

Mageblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: backgroundcolor, color, Pseudoformate fr Verweise. Das <body>-Tag kann auch Universalattribute enthalten.

4.2.2

Hintergrundbild (Wallpaper)

Sie knnen fr die Anzeige einer HTML-Datei ein Hintergrundbild bestimmen. Dabei wird das
Bild ber das ganze Anzeigefenster hinweg immer wiederholt, sodass ein Tapeteneffekt (Wallpaper) entsteht. Besonders geeignet fr Wallpaper-Effekte sind relativ kleine Grafiken, die
irgendein abstraktes Muster darstellen. Typische Beispiele finden Sie im Kapitel ber Grafiken
im Abschnitt 24.2.4 Wallpapers (Hintergrundbilder). Die Hintergrundgrafik sollte als Grafikdatei
im GIF-Format oder JPEG-Format vorliegen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="background.jpg" text="#990000"
link="#0000CC" vlink="#000066" alink="#000000">
<h1>Text</h1>
<a href="http://www.yahoo.de/"><b>Verweis zu Yahoo</b></a>
</body>
</html>

Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag der
HTML-Datei. Mit dem Attribut background= bestimmen Sie eine Grafikdatei als Hintergrundbild (background = Hintergrund). Die gesamte HTML-Datei wird auf dem hier definierten
Hintergrundbild angezeigt.
Beachten Sie: Das Attribut background= ist als deprecated eingestuft und soll knftig vermieden
werden. Den gleichen Effekt erreichen Sie nmlich auch mit Hilfe von CSS Stylesheets, z.B. so:
<body style="background-image:url(background.jpg)">

4.1: Ein Hintergrundbild sollte so beschaffen sein, dass Text trotzdem gut lesbar bleibt.

138

Kapitel 4: Dateiweite Einstellungen

Bei der Adressierung des Hintergrundbildes gelten die Regeln zum Referenzieren in HTML. Das
Hintergrundbild gilt jeweils fr die HTML-Datei, in der es definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll,
mssen Sie die Angabe in jeder HTML-Datei wiederholen. Wenn Sie ein Hintergrundbild
definieren, sollten Sie auch passende Farben fr Text und Verweise definieren.
Verwenden Sie bei textorientierten WWW-Seiten unauffllige Hintergrundbilder, bei denen die
Lesbarkeit des Textes nicht leidet. Auffllige Hintergrundfarben sollten Sie nur verwenden, wenn
die gesamte WWW-Seite grafisch aufgebaut ist und wenn die Grafiken im Vordergrund zu dem
aufflligen Hintergrund passen. Netscape ab Version 4.x und MS Internet Explorer ab Version
4.x interpretieren auch animierte GIF-Grafiken als Hintergrundbilder.
Der MS Internet Explorer kennt ein zustzliches Attribut bgproperties="fixed" im einleitenden <body>-Tag, mit dem Sie ein unbewegliches Hintergrundbild erzeugen knnen. Dieses
Attribut gehrte jedoch nie zum HTML-Standard und lsst sich auch durch eine CSS-Angabe
ersetzen, z.B. so:
<body style="background-image:url(background.jpg); background-attachment:fixed;">

Weitere Mglichkeiten
Bei Verwendung von CSS Stylesheets lesen Sie zunchst in Kapitel 15 nach, wie man CSSFormate definieren kann. Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden.
Mageblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: background-image, background-repeat, background-attachment, background-position, background,
color, Pseudoformate fr Verweise.

4.2.3

Seitenrnder definieren

Bitte benutzen Sie die hier beschriebenen HTML-Attribute nur in begrndeten Ausnahmefllen
sie werden hier nur der Vollstndigkeit halber erwhnt. Diese Attribute gehrten nie zum
HTML-Standard und sind ein typisches Beispiel dafr, welcher Wirrwarr entsteht, wenn Browser
ihr eigenes Sppchen kochen. Benutzen Sie auf jeden Fall CSS Stylesheets zum Definieren von
Seitenrndern. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body marginwidth="50" marginheight="100"
topmargin="100" leftmargin="50">
<h1>Text</h1>
viel Text usw.
</body>
</html>

Die Angabe fr Seitenrnder erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit leftmargin= bestimmen Sie den Abstand zwischen linkem bzw. rechtem Fensterrand und Inhalt der
Datei (leftmargin = linker Rand) fr den Internet Explorer. Mit topmargin= bestimmen Sie den
Abstand zwischen oberem bzw. unterem Fensterrand und dem Inhalt der Datei (topmargin =

4.2 Dateiweite Einstellungen

139

oberer Rand) fr den Internet Explorer. Mit marginwidth= und marginheight= bestimmen Sie
die entsprechenden Abstnde fr Netscape. Alle Angaben erfolgen in Pixeln. Linke und rechte
Rnder sind immer gleich gro, ebenso obere und untere.

4.2:

Die Seitenrnder lassen sich bei Netscape und Internet Explorer einstellen die Attribute
sind aber nicht HTML-konform.

Beachten Sie: Die definierten Seitenrnder gelten jeweils fr die HTML-Datei, in der sie definiert
werden. Wenn Sie ein Projekt aus mehreren HTML-Dateien erstellen, das einheitliche
Seitenrnder haben soll, mssen Sie die Seitenrnder in jeder HTML-Datei neu definieren.
Natrlich knnen Sie auch fr alle Dateien unterschiedliche Seitenrnder definieren.

Seitenrnder mit CSS Stylesheets

Hier noch ein Beispiel, wie Sie die gleichen Seitenrnder wie im obigen Beispiel auch mit Hilfe
von CSS Stylesheets erreichen knnen:
<head>
<style type="text/css">
body { margin-left:50px; margin-right:50px;
margin-top:100px; margin-bottom:100px }
</style>
</head>

Mit den obigen Angaben im HTML-Dateikopf erreichen Sie die gleiche Wirkung. Diese Angaben
werden von Netscape seit Version 4.0 und vom MS Internet Explorer seit Version 3.0
interpretiert. Auerdem sind diese Angaben vom W3-Konsortium standardisiert.

140
4.2.4

Kapitel 4: Dateiweite Einstellungen

Hintergrundmusik

Sie knnen bestimmen, dass beim Aufruf einer HTML-Datei eine Hintergrundmusik ertnt.
Dazu gibt es zwei Lsungen. Beide der im folgenden beschriebenen Lsungen die eine fr
Microsofts Internet Explorer, die andere fr Netscape sind proprietr. Dazu kommt, dass
Netscape 4.x in einigen Zwischenversionen dabei versagt. Beide Lsungen gehren nicht zum
HTML-Standard.
Ferner sollten Sie sich beim Wunsch, Hintergrundmusik einzubinden, darber im Klaren sein,
dass die Mehrzahl der Anwender im Web genervt ist von dem Gedudel und sehr schnell wieder
von solchen Seiten verschwindet. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
<!-- Microsoft: -->
<bgsound src="background.mid" loop="infinite">
</head>
<body>
<!-- Netscape: -->
<embed src="background.mid" autostart="true"
loop="true" hidden="true" height="0" width="0">
<h1>Inhalt der Seite</h1>
</body>
</html>

Mit <bgsound ...> definieren Sie im Kopf einer HTML-Datei eine Hintergrundmusik nach
Microsoft-Syntax fr die Anzeige der Datei (bgsound = background sound = Hintergrundmusik).
Mit <embed ...> erreichen Sie das Gleiche fr Netscape (embed = einbetten). Hinter der Angabe
src= folgt in beiden Fllen die Angabe der gewnschten Musikdatei (src = source = Quelle). Es
sollte sich mglichst um Dateien der Typen MID, AU oder WAV handeln.
Um eine sichtbare Anzeige des Abspiel-Players zu unterdrcken, sind bei der Netscape-Syntax
die Angaben hidden="true" height="0" width="0" erforderlich (width = Breite, height =
Hhe, hidden = versteckt). Auch den automatischen Start des Abspielvorgangs mssen Sie in der
Netscape-Syntax explizit angeben durch autostart="true". Schlielich knnen Sie noch
bestimmen, ob die Musikdatei nur einmal, mehrmals oder endlos oft (bis zum Aufrufen einer
anderen HTML-Datei) abgespielt wird. Nach der Microsoft-Syntax knnen Sie mit loop=
"infinite" eine Endloswiederholung erzwingen. Wenn Sie die Wiederholungszahl begrenzen
wollen, geben Sie anstelle von infinite einfach die gewnschte Anzahl der Wiederholungen an.
Bei der Netscape-Syntax haben Sie nur die Wahl zwischen Endloswiederholung und keiner
Wiederholung. Um eine Endloswiederholung zu erzwingen, notieren Sie die Angabe loop=
"true". Ansonsten lassen Sie die Angabe einfach weg.
Beachten Sie: Im obigen Beispiel wird vorausgesetzt, dass sich die Musikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Datei in einem anderen Verzeichnis steht,
mssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genauso wie
beim Einbinden von Grafiken. Die Ausgabe einer Hintergrundmusik setzt beim Anwender
natrlich entsprechende Hardware (Soundkarte, Lautsprecher) voraus. Ferner muss der WebBrowser die Mglichkeit haben, die Ausgabe der Musikdatei zu steuern.

141

Text strukturieren

5.1

berschriften
berschriften definieren

5.1.1

HTML unterscheidet sechs berschriftenebenen, um Hierarchieverhltnisse in Dokumenten

abzubilden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<h2>&Uuml;berschrift 2. Ordnung</h2>
<h3>&Uuml;berschrift 3. Ordnung</h3>
<h4>&Uuml;berschrift 4. Ordnung</h4>
<h5>&Uuml;berschrift 5. Ordnung</h5>
<h6>&Uuml;berschrift 6. Ordnung</h6>
</body>
</html>

5.1: HTML untersttzt sechs Hierarchieebenen bei berschriften.

142

Kapitel 5: Text strukturieren

<h[1-6]> (h = heading = berschrift) leitet eine berschrift ein. Die Nummer steht fr die

berschriftenebene. 1 ist die hchste Ebene, 6 die niedrigste. Dahinter folgt der Text der berschrift. </h[1-6]> beendet die berschrift und steht am Ende des berschriftentextes.
Beachten Sie: Die Nummern bei einleitendem und abschlieendem Tag mssen gleich sein. Jede
berschrift ist ein eigener Absatz, d.h. vor und nach berschriften sind keine Absatzschaltungen
ntig. Beim berschriftentext gelten die Aussagen zu Zeichenvorrat, Sonderzeichen und HTMLeigene Zeichen.

5.1.2

berschriften ausrichten

berschriften werden linksbndig ausgerichtet, wenn Sie nichts anderes angeben. Sie knnen
eine berschrift zentriert oder rechtsbndig ausrichten. Auch Blocksatz ist mglich. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1 align="center">&Uuml;berschrift 1. Ordnung zentriert</h1>
<h2 align="center">&Uuml;berschrift 2. Ordnung zentriert</h2>
<h3 align="center">&Uuml;berschrift 3. Ordnung zentriert</h3>
<h1 align="right">
&Uuml;berschrift 1. Ordnung rechtsb&uuml;ndig
</h1>
<h2 align="right">
&Uuml;berschrift 2. Ordnung rechtsb&uuml;ndig
</h2>
<h3 align="right">
&Uuml;berschrift 3. Ordnung rechtsb&uuml;ndig
</h3>
</body>
</html>

Durch die Angabe align="center" im einleitenden berschriften-Tag erreichen Sie, dass die
berschrift zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit der Angabe
align="right" wird die berschrift rechtsbndig ausgerichtet (right = rechts). Mit
align="justify" erzwingen Sie den Blocksatz fr die berschrift (justify = justieren). Mit der
Angabe align="left" knnen Sie die Normaleinstellung (linksbndige Ausrichtung) angeben.

5.1 berschriften

143

5.2: berschriften drfen Sie auch zentriert oder rechtsbndig ausrichten.

Beachten Sie: Nicht alle Browser beherrschen den Blocksatz. Blocksatz ist im Zusammenhang
mit berschriften auch nur bedingt praxistauglich, da Blocksatz erst bei mehrzeiligen Texten
zum Tragen kommt. align ist im HTML-4-Standard als deprecated (missbilligt) eingestuft.
Stattdessen wird empfohlen, CSS Stylesheets zu benutzen, z.B.:
<h1 style="text-align:center">...</h1>

Weitere Hinweise siehe folgender Abschnitt.

5.1.3

berschriften formatieren mit CSS

Wie eine berschrift vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen
Einfluss. Die Browser benutzen Default-Formatierungen, um berschriften darzustellen. Mit
CSS Stylesheets knnen Sie berschriften jedoch nach Wunsch formatieren. Bei Verwendung
von CSS Stylesheets lesen Sie zunchst in Kapitel 15, wie man CSS-Formate definieren kann.
Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im hier
beschriebenen Zusammenhang folgende CSS-Eigenschaften: Schriftformatierung, Ausrichtung
und Absatzkontrolle, Auenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und
-bilder.
Im nachfolgenden Beispiel wird eine berschrift 1. Ordnung definiert, die 36 Punkt Schriftgre
hat und in roter Farbe dargestellt wird:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1 style="font-size:36pt; color:red">

144

Kapitel 5: Text strukturieren

&Uuml;berschrift 1. Ordnung
</h1>
</body>
</html>

5.3:

Mit Style Sheets formatieren Sie berschriften nach Belieben, etwa grer und mit roter
Schrift.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie Angaben darber, wo berschriften vorkommen
drfen, welche anderen Elemente sie enthalten drfen, welche Attribute sie haben knnen und
was bei den einzelnen Attributen zu beachten ist.

5.2

Textabstze

5.2.1

Textabstze definieren

Abstze dienen der optischen Gliederung eines Textes. Beim Erstellen von HTML-Dateien gengt es nicht, im Editor einen harten Umbruch einzufgen. WWW-Browser ignorieren solche
Umbrche (siehe auch Kapitel 3.3, Regeln beim Editieren von HTML). Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Textabs&auml;tze definieren</h1>
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
</body>
</html>

5.2 Textabstze

145

5.4: Ohne explizite Abstze zeigt HTML im Browser nur Flietext an.
<p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht

am Ende des Absatztextes.

Beachten Sie: Allein stehende <p>-Tags, wie sie frher mal zulssig waren, sind mittlerweile nicht
mehr HTML-gerecht. Notieren Sie Textabstze immer mit einleitendem und abschlieendem
Tag. Das <p>-Element darf keine anderen blockerzeugenden Elemente wie z.B. berschriften,
Textabstze, Listen, Zitate oder Adressen enthalten. Beim Absatztext gelten die Aussagen zu
Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen.

5.2.2

Textabstze ausrichten

Textabstze werden linksbndig ausgerichtet, wenn Sie nichts anderes angeben. Sie knnen
einen Textabsatz auch zentriert oder rechtsbndig ausrichten. Auch Blocksatz ist mglich. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Textabs&auml;tze ausrichten</h1>
<p align="center">Dies ist ein zentrierter Absatz.</p>
<p align="right">
Dies ist ein Absatz, der rechts ausgerichtet ist.
</p>
</body>
</html>

Durch die Angabe align="center" im einleitenden <p>-Tag erreichen Sie, dass der Textabsatz
zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit align="right" wird der
Absatz rechtsbndig ausgerichtet (right= rechts). Mit align="justify" erzwingen Sie den
Blocksatz fr den Absatz (justify = justieren). Mit align="left" knnen Sie die Normaleinstellung (linksbndige Ausrichtung) angeben.

146

Kapitel 5: Text strukturieren

5.5: Textabstze richten Sie mit Attributen zentriert oder rechtsbndig aus.

Beachten Sie: Nicht alle Browser beherrschen den Blocksatz. align ist im HTML-4-Standard als
deprecated (missbilligt) eingestuft. Stattdessen wird empfohlen, CSS Stylesheets zu benutzen,
z.B.:
<p style="text-align:center">...</p>

Weitere Hinweise siehe folgender Abschnitt.

5.2.3

Textabstze formatieren mit CSS

Wie der Text eines Absatzes genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss.
Die Browser benutzen Default-Formatierungen, um den Text darzustellen. Mit CSS Stylesheets
knnen Sie Ihre Textabstze jedoch nach Wunsch formatieren. Bei Verwendung von CSS
Stylesheets mssen Sie zunchst wissen, wie man CSS-Formate definieren kann. Anschlieend
sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im hier beschriebenen
Zusammenhang folgende CSS-Eigenschaften: Schriftformatierung, Ausrichtung und Absatzkontrolle, Auenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Textabs&auml;tze formatieren</h1>
<p style="font-family:Arial,sans-serif; font-size:18px; color:blue">
Ein formatierter Absatz.
</p>
<p style="background-color:yellow">
Ein anderer formatierter Absatz.
</p>
</body>
</html>

5.3 Zeilenumbruch

147

5.6: Mit CSS lassen sich Textabstze auf vielfltige Weise formatieren.

Im Beispiel sind zwei Abstze definiert. Fr den ersten wird bestimmt, dass er in Schriftart Arial
oder einer anderen serifenlosen Schrift dargestellt wird, 18 Pixel Schriftgre hat und in blauer
Farbe erscheint. Der zweite Absatz erhlt eine gelbe Hintergrundfarbe.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie Angaben darber, wo Textabstze vorkommen
drfen, welche anderen Elemente sie enthalten drfen, welche Attribute sie haben knnen und
was bei den einzelnen Attributen zu beachten ist.

5.3

Zeilenumbruch

5.3.1

Zeilenumbruch erzwingen

Text innerhalb von normalen Abstzen, Listen sowie in berschriften oder Tabellenzellen wird
vom Web-Browser bei der Anzeige automatisch umbrochen. Sie knnen jedoch an einer gewnschten Stelle einen Zeilenumbruch erzwingen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ottos Brief an die Mutter</h1>
<p>Liebe Mama!</p>
<p>Vor drei Wochen habe ich erfahren<br>
dass Du krank bist<br>
Mach Dir keine Sorgen<br>
Mir geht es gut.</p>
</body>
</html>

148

Kapitel 5: Text strukturieren

5.7: Zeilenumbrche setzen Sie explizit mit dem Tag <br>.

<br> (br = break = Umbruch) fgt an der gewnschten Stelle einen Zeilenumbruch ein. Dabei ist

es egal, ob das allein stehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel) oder in
einer eigenen Zeile, oder am Anfang der folgenden Zeile.
Beachten Sie: Wenn Sie XHTML-konform arbeiten, mssen Sie das br-Element als inhaltsleer
kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <br />. Weitere Informationen dazu im Kapitel 14.1.11 zu XHTML und HTML.

5.3.2

Automatischen Zeilenumbruch verhindern

Sie knnen einen Textbereich bestimmen, in dem kein automatischer Zeilenumbruch erfolgt.
Alles, was innerhalb dieses Bereichs steht, wird in einer langen Zeile angezeigt. Der Anwender
kann dann mit der horizontalen Scroll-Leiste die berlangen Textzeile anzeigen. Diese Mglichkeit gehrt jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>ARD und ZDF</h1>
<nobr>Die vom ZDF sagen die vom ARD senden
st&auml;ndig Wiederholungen, und die vom ARD
sagen die vom ZDF senden st&auml;ndig Wiederholungen,
und so wiederholen sich ARD und ZDF st&auml;ndig
ohne berhaupt etwas zu senden.</nobr>
</body>
</html>

Erluterung: <nobr> bewirkt, dass der auf das Tag folgende Text nicht umbrochen wird (nobr =
no break = kein Umbruch). Am Ende des Textabschnitts, der nicht umbrochen werden soll,
notieren Sie das abschlieende Tag </nobr>.
Beachten Sie: Wenn Sie Textzeilen unabhngig vom Anzeigefenster des Anwenders genau kontrollieren und nach HTML-Standard arbeiten wollen, knnen Sie prformatierten Text (Kapitel
5.6) einsetzen.

5.3 Zeilenumbruch

5.3.3

149

Geschtzte Leerzeichen

Sie knnen verhindern, dass bei einem Leerzeichen ein automatischer Zeilenumbruch erfolgen
darf. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>HTML 2.0 und HTML 4.0</h1>
<p>Es gibt vieles, worin sich HTML&nbsp;2.0
und HTML&nbsp;4.0 unterscheiden.</p>
</body>
</html>

Die Zeichenfolge &nbsp; erzeugt ein geschtztes Leerzeichen (nbsp = nonbreaking space = nicht
umbrechbares Leerzeichen). Es wird ein normales Leerzeichen angezeigt, doch an dieser Stelle
kann kein Zeilenumbruch erfolgen. Notieren Sie die Zeichenfolge inklusive kaufmnnisches Und
am Beginn und Strichpunkt am Ende.
Beachten Sie: Die gleiche Wirkung erzielen Sie durch Notieren der Zeichenfolge &#160;. Zu
dieser Art von Zeichennotation siehe auch benannte Zeichen fr den Zeichensatz ISO 8859-1 im
Anhang D.3. Durch Notieren mehrerer solcher benannter Zeichen hintereinander knnen Sie
auch mehrere Leerzeichen in Folge erzwingen.

5.3.4

Zeilenumbruch erlauben

Web-Browser umbrechen Text normalerweise nur bei Leerzeichen, weil durch Leerzeichen
Wrter voneinander abgegrenzt werden. Sie knnen explizit weitere Stellen markieren, an denen
der Browser den Text umbrechen darf. Dies gilt fr alle Absatzarten in HTML. Diese Mglichkeit
gehrt jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden. Ein
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Langes Wort</h1>
<p>Donaudampfschiffahrts-<wbr>Kapitnsmtze Donaudampfschiffahrts<wbr>Kapitnsmtze ... </p>
</body>
</html>

Mit <wbr> markieren Sie eine Stelle, an der getrennt werden darf, falls diese Stelle bei der Bildschirmanzeige am Ende der Zeile steht (wbr = word break = Umbruch innerhalb eines Wortes).
Sinnvoll ist dies bei langen Wrtern oder aus Bindestrichen bestehenden Ausdrcken. Innerhalb

150

Kapitel 5: Text strukturieren

von Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden
Stelle trotzdem ein Umbruch erfolgen darf.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie genaue Angaben darber, wo Zeilenumbrche
vorkommen drfen, welche Attribute sie haben knnen und was bei den einzelnen Attributen zu
beachten ist.

5.4

Listen

5.4.1

Aufzhlungsliste definieren

Aufzhlungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente fr eine

These bersichtlich darzustellen. Bei einer Aufzhlungsliste werden alle Listeneintrge mit einem
Aufzhlungszeichen (Bullet) versehen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Liste wichtiger Reime</h1>
<ul>
<li>Probieren geht &uuml;ber Studieren</li>
<li>Liebe geht ber Triebe</li>
<li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>
</body>
</html>

5.8:

Aufzhlungslisten zeigen vor den Einzelpunkten nur ein Markierungszeichen wie einen
Punkt an.

5.4 Listen

151

<ul> leitet eine Aufzhlungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein
neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag.
Es ist zwar nach HTML-Standard erlaubt, das abschlieende </li>-Tag wegzulassen, doch
davon ist abzuraten. </ul> beendet die Liste. Wie das Bullet dargestellt wird, bestimmt der Web-

Browser. Das Verschachteln von Listen ist ebenfalls mglich. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Dies und das im Web</h1>
<ul>
<li>Suchmaschinen
<ul>
<li>Google</li>
<li>Altavista</li>
<li>Fireball</li>
</ul>
</li>
<li>Verzeichnisse
<ul>
<li>Yahoo</li>
<li>Web.de</li>
<li>Dino-Online</li>
</ul>
</li>
<li>Was anderes</li>
<li>Noch was anderes</li>
</ul>
</body>
</html>

5.9: Bei verschachtelten Listen wechselt der Browser automatisch das Markierungszeichen.

152

Kapitel 5: Text strukturieren

Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen
sind dabei erlaubt.

5.4.2

Nummerierte Liste definieren

Nummerierte Listen sind z.B. von Bedeutung, um nacheinander auszufhrende Aktionen oder
Rangfolgen bersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneintrge
automatisch durchnummeriert.

5.10: Bei nummerierten Listen setzt der Browser automatisch Zahlen ein.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Todo-Liste</h1>

5.4 Listen

153

<ol>
<li>bei Anette vorbeischauen</li>
<li>bei Bianca vorbeischauen</li>
<li>bei Christine vorbeischauen</li>
<!-- usw. -->
</ol>
</body>
</html>

Erluterung: <ol> leitet eine nummerierte Liste ein (ol = ordered lis = nummerierte Liste). Mit
<li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet
den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschlieende </li>-Tag wegzulassen, doch davon ist abzuraten. </ol> beendet die Liste.
Beachten Sie: Verschachteln von nummerierten Listen ist ebenfalls mglich, bewirkt aber keine
Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind in
HTML nicht automatisch mglich.

5.4.3

Definitionsliste definieren

Definitionslisten sind fr Glossare gedacht. Glossare bestehen aus einer Liste von Eintrgen. Die
Eintrge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und
der zugehrigen Definition.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>DF&Uuml;-Abkrzungen</h1>
<dl>
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AAE</dt>
<dd>Allgemeine Anschalte-Erlaubnis</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
<!-- usw. -->
</dl>
</body>
</html>

154

Kapitel 5: Text strukturieren

5.11: Definitionslisten bestehen aus einem Begriff und der dazugehrigen Erklrung.
<dl> leitet eine Definitionsliste ein (dl = definition list = Definitionsliste). <dt> leitet einen zu
definierenden Ausdruck ein (dt = definition (list) term = Ausdruck in der Definitionsliste). <dd>

leitet eine Definition eines Ausdrucks ein (dd = definition (list) definition = Definition in der
Definitionsliste). </dl> beendet die Liste. Die End-Tags </dt> und </dd> drfen zwar auch
fehlen, doch davon ist abzuraten.
Beachten Sie: Das Verschachteln von Definitionslisten ist ebenfalls mglich. Dadurch knnen Sie
baumartige Strukturen im Text abbilden. Netscape verwendet beispielsweise beim Aufbau seiner
Lesezeichendatei verschachtelte Definitionslisten, um die baumartig strukturierbaren Lesezeichen zu verwalten. Innere Listen mssen dabei innerhalb des dd-Elements notiert werden. Die
Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es drfen
auch mehrere dt- oder dd-Elemente hintereinander folgen.

5.4.4

Verzeichnis- oder Menliste definieren

Verzeichnis- und Menlisten werden in der Praxis kaum verwendet und sind auch mittlerweile
als deprecated gekennzeichnet, sollen also knftig aus dem HTML-Standard entfallen. Sie werden
von den heutigen Browsern entweder nicht mehr oder nicht anders dargestellt als gewhnliche
Aufzhlungslisten. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Verzeichnisse und Men&uuml;s</h1>

5.4 Listen

155

<dir>
<li>/usr/home/</li>
<li>/usr/home/web/</li>
<li>/usr/home/web/data/</li>
</dir>
<menu>
<li>Datei</li>
<li>Bearbeiten</li>
<li>Ansicht</li>
</menu>
</body>
</html>

Eine Verzeichnisliste leiten Sie mit <dir> ein und beenden Sie durch </dir> (dir = directory =
Verzeichnis). <menu> leitet eine Men-Liste ein, </menu> beendet die Men-Liste. Mit <li> beginnt in beiden Listentypen ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).
Das End-Tag </li> am Ende eines Listeneintrags ist nicht zwingend erforderlich, aber zu
empfehlen.
Beachten Sie: Verzeichnis- und Menlisten drfen im Gegensatz zu Aufzhlungslisten keine
absatzerzeugenden Elemente zwischen <li> und </li> enthalten. Sie sind nur fr zeilenartige
Listen gedacht.

5.4.5

HTML-Eigenschaften fr Listen

Es gibt eine Reihe von Attributen, die das Erscheinungsbild von Listen beeinflussen. So lassen
sich beispielsweise nummerierte Listen auch alphabetisch und rmisch nummerieren, und fr
Aufzhlungslisten lsst sich der Typ des Bullet-Zeichens festlegen. Doch all diese HTML-Attribute sind mittlerweile als deprecated gekennzeichnet und sollen knftig aus dem HTML-Standard entfallen. Stattdessen sollten Sie Listen mit CSS formatieren (siehe unten). Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML-Eigenschaften von Listen</title>
</head>
<body>
<h1>Listen mit HTML-Attributen</h1>
<h2>Aufz&auml;hlungsliste</h2>
<ul type="square">
<li>Probieren geht &uuml;ber Studieren</li>
<li>Liebe geht &uuml;ber Triebe</li>
<li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>

156

Kapitel 5: Text strukturieren

<h2>Nummerierte Liste</h2>
<ol type="I">
<li value="10">bei Anette vorbeischauen</li>
<li>bei Bianca vorbeischauen</li>
<li>bei Christine vorbeischauen</li>
</ol>
<h2>Definitionsliste</h2>
<dl compact>
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AAE</dt>
<dd>Allgemeine Anschalte-Erlaubnis</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
</dl>
</body>
</html>

5.12: Mit zustzlichen Attributen modifizieren Sie die Listendarstellung.

5.4 Listen

157

Fr Aufzhlungslisten knnen Sie den Bullet-Typ bestimmen:

Mit <ul type="circle"> bestimmen Sie ein rundes Bullet (circle = Kreis).
Mit <ul type="square"> bestimmen Sie ein eckiges Bullet (square = Rechteck).
Mit <ul type="disc"> bestimmen Sie ein Dateisymbol als Bullet (disc = Datentrger wie
Disketten oder Festplatten).
Fr nummerierte Listen knnen Sie die Art der Nummerierung bestimmen:
Mit <ol type="I"> werden die Listeneintrge mit I., II., III., IV. usw. nummeriert.
Mit <ol type="i"> werden die Listeneintrge mit i., ii., iii., iv. usw. nummeriert.
Mit <ol type="A"> werden die Listeneintrge mit A., B., C. usw. nummeriert.
Mit <ol type="a"> werden die Listeneintrge mit a., b., c. usw. nummeriert.
Mit start= innerhalb des einleitenden Tags von <ol> knnen Sie einen beliebigen Startwert
setzen, z.B. <ol start="7">. Die Nummerierung beginnt dann bei 7.
Mit value= innerhalb des Tags von <li> in einer nummerierten Liste knnen Sie den Startwert
beliebig neu setzen, z.B. auf <li value="15">. Die Nummerierung fhrt dann bei 15 fort.
Mit dem Attribut compact innerhalb des einleitenden Tags einer beliebigen Liste knnen Sie die
kompaktere Darstellung bestimmen. Dies wurde allerdings von den Browsern noch nie oder nur
vorbergehend mal interpretiert.

5.4.6

Listen formatieren mit CSS

Wie eine Liste genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser
benutzen Default-Formatierungen, um Listen darzustellen. Mit CSS Stylesheets knnen Sie
ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren. Bei Verwendung von CSS
Stylesheets lesen Sie zunchst in Kapitel 15, wie man CSS-Formate definieren kann. Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: Listenformatierung, Schriftformatierung,
Ausrichtung und Absatzkontrolle, Auenrand und Abstand. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Listen mit CSS</h1>
<h2>Aufz&auml;hlungsliste</h2>
<ul style="list-style-type:disk; color:red; font-weight:bold;">
<li>Probieren geht &uuml;ber Studieren</li>
<li>Liebe geht &uuml;ber Triebe</li>

158

Kapitel 5: Text strukturieren

<li>Tante f&auml;llt &uuml;ber Kante</li>

</ul>
<h2>Nummerierte Liste</h2>
<ol style="list-style-type:upper-roman; font-weight:bold;">
<li style="color:blue">bei Anette vorbeischauen</li>
<li style="color:maroon">bei Bianca vorbeischauen</li>
<li style="color:olive">bei Christine vorbeischauen</li>
</ol>
<h2>Definitionsliste</h2>
<dl style="font-size:0.7em; font-family:Verdana,Arial,sans-serif">
<dt>AA</dt>
<dd>Auto Answer (Modem)</dd>
<dt>AAE</dt>
<dd>Allgemeine Anschalte-Erlaubnis</dd>
<dt>AARP</dt>
<dd>Appletalk Address Resolution Protocol</dd>
</dl>
</body>
</html>

Im Beispiel wird fr eine Aufzhlungsliste (<ul>...</ul>) bestimmt, dass sie ein Disk-Symbol
als Bullet-Zeichen erhlt, fett und in roter Farbe erscheint. Fr eine nummerierte Liste
(<ul>...</ul>) wird bestimmt, dass sie in rmischen groen Ziffern zhlt und dass ihre Eintrge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen
Farben dargestellt. Fr eine Definitionsliste (<dl>...</dl>) wird eine kleinere Schriftgre als
normal und eine bestimmte Schriftart bestimmt.
Beachten Sie: Netscape 4.x hat noch einige Probleme mit CSS und zeigt das obige Beispiel nicht
ganz so an wie gewnscht.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie Angaben darber, wo die verschiedenen
Listentypen vorkommen drfen, welche anderen Elemente sie enthalten drfen, welche Attribute
sie haben knnen und was bei den einzelnen Attributen zu beachten ist.

5.5 Zitate und Adressen

5.5

159

Zitate und Adressen

5.5.1

Zitate definieren

Sie knnen Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerckten) Absatz hervorheben. Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Abstze genau formatiert werden, bestimmt letztlich der Web-Browser. Die
Vorgabe ist jedoch, solche Abstze auffllig und vom brigen Text unterscheidbar anzuzeigen. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Franz Kafka</h1>
<p>ber die Kr&auml;hen und den Himmel schreibt Franz Kafka:</p>
<blockquote>
Die Kr&auml;hen behaupten, eine einzige Kr&auml;he
k&ouml;nne den Himmel zerst&ouml;ren; das ist zweifellos, beweist aber nichts gegen
den Himmel, denn Himmel bedeutet eben: Unm&ouml;glichkeit von Kr&auml;hen.
</blockquote>
</body>
</html>

5.13: Typischerweise stellen Browser ein Zitat mit eingerckten Rndern dar.
<blockquote> leitet einen eigenen Absatz fr Zitate ein (blockquote = geblocktes Zitat).
</blockquote> beendet den Absatz.

160

Kapitel 5: Text strukturieren

Beachten Sie: Das blockquote-Element wird gerne verwendet, um Einrckungen zu realisieren.

Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der
Formatierung vorschreibt, ist der Einrck-Effekt nicht garantiert.

5.5.2

Zitate mit URI-Quellenangabe

Wenn ein Zitat im Internet verfgbar ist, knnen Sie den URI, also die Internet-Adresse der
Quelle angeben. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Die Energie des Verstehens</h1>
<p>Geben Sie nicht auf, denn Sie haben sie:</p>
<blockquote cite="http://selfhtml.teamone.de/">
Die Energie des Verstehens
</blockquote>
</body>
</html>

Mit dem Attribut cite= im einleitenden <blockquote>-Tag knnen Sie den URI der zitierten
Quelle angeben (cite = Zitat).
Beachten Sie: Netscape 4.x und der MS Internet Explorer 4.x visualisieren diese Angabe nicht.
Netscape 4.x kennt stattdessen eine Angabe namens type="cite", die einen farbigen Querbalken am linken Rand bewirkt. Diese Angabe gehrt allerdings nicht zum HTML-Standard.

5.5.3

Adressen definieren

Sie knnen Internet-Adressen von Personen oder Dateien in einem eigenen, anders formatierten
(zumeist kursiv dargestellten, eingerckten) Absatz hervorheben. Auch dies ist eine logische
Textauszeichnung, fr deren tatschliche Formatierung bei der Ausgabe es keine festen Vorschriften gibt. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Wenn Sie es genau wissen wollen</h1>

5.5 Zitate und Adressen

161

<p>Das HTML-Element f&uuml;r Adressen wird kaum verwendet.

Wenn Sie es genau wissen wollen, wenden Sie sich an:</p>
<address>Dave Raggett, [email protected]</address>
<p>Dave Raggett geh&ouml;rt dem W3-Konsortium an
und gibt viele Publikationen rund um HTML auf dem W3-Server heraus.</p>
</body>
</html>

5.14:

Adressen formatieren Browser blicherweise als kursiven Absatz.

<address> leitet einen eigenen Absatz fr Internet-Adressen ein. </address> beendet den

Absatz.
Beachten Sie: Das <address>-Element darf keine anderen blockerzeugenden Elemente wie z.B.
berschriften, Textabstze, Listen, Zitate oder Adressen enthalten. Das <address>-Element ist
auch in Verbindung mit E-Mail-Verweisen sinnvoll.

5.5.4

Zitate und Adressen formatieren mit CSS

Wie Zitate und Adressen genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss.
Die Browser benutzen Default-Formatierungen. Mit CSS Stylesheets knnen Sie solche Elemente
jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets lesen Sie zunchst in
Kapitel 15, wie man CSS-Formate definieren kann. Anschlieend sind Sie in der Lage, CSSEigenschaften anzuwenden. Mageblich sind im hier beschriebenen Zusammenhang z.B.
folgende CSS-Eigenschaften: Schriftformatierung, Auenrand und Abstand, Innenabstand,
Rahmen, Hintergrundfarben und -bilder.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>

162

Kapitel 5: Text strukturieren

</head>
<body>
<h1>Zitat und Adresse</h1>
<blockquote style="padding:10px; border:thin solid blue;">
Klarheit ist wenn man so will nur die
anschaulichere Variante der Wahrheit.
</blockquote>
<address style="color:blue;">
Stefan M&uuml;nz, [email protected]
</address>
</body>
</html>

Das blockquote-Element im Beispiel erhlt einen dnnen durchgezogenen blauen Rahmen und
der Text darin einen Innenabstand von 10 Pixeln zum Rahmen. Das address-Element erhlt
eine blaue Schriftfarbe.

5.15: Mit CSS lassen sich Zitate und Adressen vielfltig formatieren.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie Angaben darber, wo Zitate und Adressen
vorkommen drfen, welche anderen Elemente sie enthalten drfen, welche Attribute sie haben
knnen und was bei den einzelnen Attributen zu beachten ist.

5.6 Prformatierter Text (wie im Editor eingegeben)

5.6

163

Prformatierter Text (wie im Editor eingegeben)

5.6.1

Textabschnitt mit prformatiertem Text

definieren

Beispielsweise fr Programmlistings ist es wichtig, dass sie in dicktengleicher Schrift dargestellt werden und dass Einrckungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden. Zu diesem Zweck bietet HTML die Mglichkeit der prformatierten Textabschnitte an. Auch wenn Sie tabellarische Daten darstellen mssen und auf Tabellen verzichten wollen, knnen Sie prformatierten Text benutzen. Und dann ist prformatierter Text auch
noch dazu geeignet, um andere Elemente, beispielsweise Grafiken, auszurichten. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ostern mit Pascal</h1>
<pre>
FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
VAR

a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;

BEGIN
a

:=

year MOD 19;

:=

year DIV 100;

:=

year MOD 100;

:=

b DIV 4;

:=

b MOD 4;

:=

( b + 8 ) DIV 25;

:=

( b

:=

( 19 * a + b

:=

c DIV 4;

:=

c MOD 4;

:=

( 32 + 2 * e + 2 * i

:=

( a + 11 * h + 22 * l ) DIV 451;

Easter :=
END{FUNC};
</pre>
</body>
</html>

f + 1 ) DIV 3;

h + l

g + 15 ) MOD 30;

7 * m + 22;

k ) MOD 7;

164

Kapitel 5: Text strukturieren

5.16: Prformatierter Text erscheint im Browser mit allen Umbrchen.

<pre> leitet einen Textabschnitt mit prformatiertem Text ein (pre = preformatted = vorformatiert). </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde, und zwar in dicktengleicher Schrift.

Beachten Sie: Innerhalb von <pre> und </pre> gelten wie in anderen Textabschnitten die
Aussagen zu Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen. HTML-Elemente
innerhalb von <pre> und </pre> werden interpretiert. Das hat den Vorteil, dass Sie innerhalb
von prformatiertem Text beispielsweise an beliebigen Stellen Grafiken einbinden knnen.

5.6.2

Breite eines Bereichs mit prformatiertem Text

Sie knnen eine Breite fr einen Abschnitt mit prformatiertem Text erzwingen. Breite bedeutet dabei: die maximale Anzahl von Zeichen in einer Zeile. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>MIDI-Dateien</h1>
<pre width="80">
YBREEZE

MID

17.845

15.06.97

6:01 ybreeze.mid

YGLADTR

MID

34.552

15.06.97

6:01 ygladtr.mid

YHASTE

MID

27.834

15.06.97

6:01 yhaste.mid

YRAG

MID

18.540

15.06.97

6:01 yrag.mid

5.6 Prformatierter Text (wie im Editor eingegeben)

YRITMO

MID

29.056

5 Datei(en)

15.06.97

165

6:01 yritmo.mid

127.827 Bytes

</pre>
</body>
</html>

Mit dem Attribut width= im einleitenden <pre>-Tag geben Sie eine maximale Breite fr die
Zeilen des Bereichs vor. Im obigen Beispiel kann keine Zeile mehr als 80 Zeichen haben. Bei
lngeren Zeilen kann der Browser entweder eine kleinere Schrift whlen, um die Breite einzuhalten, oder er umbricht berlange Zeilen.
Beachten Sie: Die Angabe zur Breite eines prformatierten Bereichs wird weder von Netscape 4.x
noch vom MS Internet Explorer 4.x interpretiert und ist mittlerweile auch als deprecated gekennzeichnet, soll also knftig aus dem HTML-Standard entfallen.

5.6.3

ltere HTML-Elemente fr prformatierten Text

Der Vollstndigkeit halber sollten einige ltere Elemente erwhnt werden, die allesamt nicht
mehr zum HTML-Standard gehren.
<xmp>...</xmp> (xmp = example = Beispiel) war einmal als logische Auszeichnung fr
Quellcode-Beispiele gedacht.
<plaintext>...</plaintext> (plaintext = nackter Text) war zum Darstellen von reinem
Text gedacht, etwa zum Zitieren aus einer unformatierten Textdatei.
<listing>...</listing> (listing = zeilenorientierter Quelltext) war fr Quelltext von Programmen gedacht.
Beachten Sie: Alle drei Elemente finden in der Praxis praktisch keine Verwendung mehr. Wenn
Sie keine besonderen Grnde haben, sollten Sie <pre> ... </pre> zur Darstellung von prformatiertem Text verwenden. Der Unterschied zwischen <xmp>...</xmp> und <listing>...
</listing> liegt in der Schriftweite. <xmp>...</xmp> bewirkt eine weitere Schrift (ausgehend
von 80 Zeichen/Zeile beim Ausdruck), <listing>...</listing> eine engere Schrift (ausgehend von 132 Zeichen/Zeile beim Ausdruck). <listing>...</listing> wird von Netscape
etwa auch anders dargestellt als <pre>...</pre>. Netscape akzeptiert zu <plaintext> kein
abschlieendes Tag </plaintext>, whrend andere Browser das End-Tag interpretieren.
Netscape stellt alles in dicktengleicher Schrift dar, was Sie bis zum nchsten Block-Element (z.B.
berschrift, Textabsatz, Liste usw.) an Text eingeben.

5.6.4

Prformatierten Text formatieren mit CSS

In welcher Schriftart und Schriftgre prformatierter Text genau dargestellt werden, darauf
haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit CSS
Stylesheets knnen Sie ein solches Element jedoch nach Wunsch formatieren. Bei Verwendung
von CSS Stylesheets lesen Sie zunchst in Kapitel 15 nach, wie man CSS-Formate definieren
kann. Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im
hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Schriftformatierung, Aus-

166

Kapitel 5: Text strukturieren

richtung und Absatzkontrolle, Auenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Software-Entwicklung</h1>
<pre style="background-color:#000099; color:#FFFF00; font-family:Fixedsys,Courier;
padding:10px;">
#include &lt;nonsense.h&gt;
#include &lt;lies.h&gt;
#include &lt;spyware.h&gt; /* Microsoft Network Connectivity library */
#include &lt;process.h&gt; /* For the court of law */
<!-- usw. -->
</pre>
</body>
</html>

5.17: Mit CSS lsst sich die Darstellung von prformatiertem Text umfassend beeinflussen.

5.7 Logische Auszeichnungen im Text

167

Das pre-Element im Beispiel erhlt einen blauen Hintergrund, gelbe Schriftfarbe, und als
Schriftart wird Fixedsys gewnscht, oder, falls nicht verfgbar, eine Courier-Schrift. Damit der
Text nicht so am Rand klebt, wird auerdem ein Innenabstand von 10 Pixeln definiert.

Weitere Informationen
In der HTML-Referenz im Anhang finden Sie Angaben darber, wo prformatierter Text
vorkommen darf, welche anderen Elemente er enthalten darf, welche Attribute das pre-Element
haben kann und was bei den einzelnen Attributen zu beachten ist.

5.7

Logische Auszeichnungen im Text

In HTML gibt es logische und physische Elemente zur Auszeichnung von Text. Logische Textauszeichnungen haben Bedeutungen wie betont oder emphatisch. Bei logischen Elementen
entscheidet der Web-Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder
andersfarbig). In Verbindung mit CSS Stylesheets knnen Sie logische Textauszeichnungen
allerdings nach Wunsch formatieren.
Im Unterschied zu Elementen wie berschriften, Textabstzen, Listen usw., die ja auch der
logischen Strukturierung von Text dienen, sind die hier beschriebenen Elemente jedoch so genannte Inline-Elemente, whrend berschriften, Textabstze, Listen usw. als Block-Elemente bezeichnet werden. Inline-Elemente erzeugen keinen Absatz (genauer: keine neue Zeile) im Textfluss.

5.7.1

HTML-Elemente fr logische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfgung, um Text logisch auszuzeichnen. Ein

Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Alles logisch</h1>
<p>Die Kreter sagen, da&szlig;
<strong>alle Kreter l&uuml;gen</strong>.
Das stimmt aber nicht, weil alle Kreter l&uuml;gen.</p>
</body>
</html>

168

5.18:

Kapitel 5: Text strukturieren

Mit der logischen Textauszeichnung heben Sie zum Beispiel Wrter in einem Satz
besonders hervor.

Inline-Elemente fr Auszeichnungen im Text mssen zumindest in der HTML-Variante

Strict innerhalb anderer Block-Elemente vorkommen. Im obigen Beispiel ist ein Textabsatz
notiert und innerhalb davon eine logische Textauszeichnung. Am Anfang des Textbereichs, der
ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel das Tag <strong>) eingefgt.
Am Ende des gewnschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefgt (im
Beispiel </strong>).
Folgende Elemente dieser Art stehen zur Verfgung:
Element (Notation)
<em>...</em>
<strong>...</strong>
<code>...</code>
<samp>...</samp>
<kbd>...</kbd>
<var>...</var>

<cite>...</cite>
<dfn>...</dfn>
<acronym>...</acronym>
<abbr>...</abbr>

<q cite="Quelle">...</q>

Status

Bedeutung
Zeichnet einen Text aus mit der Bedeutung
emphatisch.
Zeichnet einen Text aus mit der Bedeutung
stark betont.
Zeichnet einen Text aus mit der Bedeutung
dies ist Quelltext
Zeichnet einen Text aus mit der Bedeutung
Dies ist ein Beispiel
Zeichnet einen Text aus mit der Bedeutung
dies stellt eine Tastatureingabe dar
Zeichnet einen Text aus mit der Bedeutung
dies ist eine Variable oder ein variabler
Name
Zeichnet einen Text aus mit der Bedeutung
dies ist ein Zitat von einer anderen Quelle
Zeichnet einen Text aus mit der Bedeutung
dies ist eine Definition.
Zeichnet einen Text aus mit der Bedeutung
dies ist eine Abkrzung (z.B. z.B.)
Zeichnet einen Text aus mit der Bedeutung
dies ist eine abgekrzte Schreibweise (z.B.
WWW)
Zeichnet einen Text aus mit der Bedeutung
dies ist ein Zitat mit Quellenangabe

5.7 Logische Auszeichnungen im Text

5.7.2

169

nderungsmarkierungen im Dokument

Wenn Sie Dokumente in HTML bearbeiten, bei denen es wichtig ist, nderungen zu protokollieren, dann knnen Sie logische Textauszeichnungen fr gelschte und eingefgte Textpassagen
verwenden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Viel falsch</h1>
<p>Goethe wurde im Jahre <del>1768</del><ins>1789</ins>
geboren und war ein begnadeter <del>Sportler</del><ins>Schriftsteller</ins>.</p>
</body>
</html>

5.19: nderungen im Text markieren Sie, damit sie spter nachvollziehbar sind.

Mit <del>...</del> zeichnen Sie Text aus, der nicht mehr gltig ist (del = delete = lschen).
Mit <ins>...</ins> knnen Sie Text auszeichnen, der neu dazugekommen ist (ins = insert =
einfgen). Zur exakteren Auszeichnung sind noch zwei Attribute in beiden einleitenden Tags
erlaubt:
Mit dem Attribut datetime= im einleitenden Tag von <ins> oder <del> knnen Sie den
Zeitpunkt der nderung festhalten. Eine Angabe wie <ins datetime="2001-06-25T10:
59+01:00"> bedeutet: eingefgt am 25.6.2001 um 10 Uhr 59 nach Zeitzone UTC-Zeit plus
1 Stunde. Die Uhrzeit/Zeitzonenangabe knnen Sie auch weglassen, etwa so: <ins
datetime="2001-06-25">. UTC bedeutet Coordinated Universal Time.
Mit dem Attribut cite= knnen Sie einen URI angeben, der als der Grund fr die nderung
gelten kann beispielsweise ein verbindliches Dokument, auf dem Ihr Dokument beruht und
das mittlerweile gendert wurde. Eine Angabe wie <ins cite="http://www.w3.org/
TR/1999/REC-html401-19991224"> bedeutet: Dieser Text wurde aufgrund der HTMLSpezifikation 4.01 vom 24.12.1999 eingefgt (der angegebene URI ist die Adresse, an der die
HTML-Spezifikation zu finden ist).

170

Kapitel 5: Text strukturieren

Beachten Sie: Die beiden Elemente ins und del haben eine Sonderstellung, was ihr Vorkommen
betrifft. Diese beiden Elemente drfen entweder innerhalb von Block-Elementen vorkommen
dann fungieren sie selber als Inline-Elemente. Oder sie werden auerhalb von Block-Elementen
notiert dann fungieren sie selber als Block-Elemente und knnen mehrere andere BlockElemente und deren gesamten Inhalt einschlieen.

5.7.3

Textrichtung ndern

Wenn Sie HTML in Verbindung mit Sprachen benutzen, die eine andere Textrichtung als von
links nach rechts haben, kann es zu Konflikten bei der Textrichtung kommen, vor allem wenn
Sie zwei Sprachen mit unterschiedlicher Textrichtung im Text gemischt verwenden. Wenn Sie
Unicodes in HTML notieren, wird dabei normalerweise automatisch auch die Textrichtung der
Sprache bercksichtigt. Wenn Sie etwa die Unicodes fr ein arabisches Wort von links nach
rechts notieren, sollte die Software die Zeichenkette dennoch so auflsen, dass die Darstellung
von rechts nach links erfolgt, weil das die Textrichtung im Arabischen ist. Sollte das aus irgendwelchen Grnden nicht funktionieren, knnen Sie mit Hilfe eines HTML-Elements nachhelfen.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Umgekehrt</h1>
<p>Hier wird das Wort &quot;umgekehrt&quot; einfach <bdo dir="rtl">umgekehrt</bdo>.
</body>
</html>

5.20:

Je nach den verwendeten Schriftzeichen macht es mehr oder weniger Sinn, die
Schreibrichtung umzukehren.

Mit <bdo dir="rtl"> leiten Sie einen Text ein, der von rechts nach links dargestellt wird, und
mit <bdo dir="ltr"> einen Text, der von links nach rechts dargestellt wird. </bdo> beendet
den Text mit der anderen Schreibrichtung (bdo = bidirectional overwrite = berschreiben der
automatischen Bidirektionalitt). Mit dem Attribut dir= erzwingen Sie die Textrichtung (rtl =
right to left = rechts nach links).

5.8 Physische Auszeichnungen im Text

171

Das Attribut dir= gehrt zu den Universalattributen und darf in allen einleitenden HTML-Tags
stehen, in denen Text vorkommen kann. Das bdo-Element ist fr solche Flle gedacht, in denen
dir= in anderen HTML-Elementen zu Problemen fhrt, beispielsweise bei verschachtelten Tags
mit widersprchlichen Anweisungen zur Textrichtung.

5.7.4

Logische Elemente fr Textauszeichnung mit

CSS formatieren

Wie logische Elemente zur Textauszeichnung genau dargestellt werden, darauf haben Sie mit
HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit CSS Stylesheets
knnen Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets lesen Sie zunchst in Kapitel 15 nach, wie man CSS-Formate definieren kann.
Anschlieend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Mageblich sind im hier
beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Schriftformatierung, Hintergrundfarben und -bilder. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Viele viele bunte Logis</h1>
<p>
Text mit dem <em style="color:blue">em-Element</em><br>
Text mit dem <strong style="color:red">strong-Element</strong><br>
Text mit dem <code style="color:purple">code-Element</code><br>
<!-- usw. -->
</p>
</body>
</html>

Die verschiedenen logischen Elemente im Beispiel erhalten unterschiedliche Schriftfarben.

Formatieren knnen die Browser allerdings nur Elemente, die sie kennen.

5.8

Physische Auszeichnungen im Text

In HTML gibt es physische und logische Elemente zur Auszeichnung von Text. Physische Textauszeichnungen haben Bedeutungen wie fett oder kursiv, stellen also direkte Angaben zur
gewnschten Schriftformatierung dar. Bei physischen Elementen sollte der Web-Browser eine
Mglichkeit finden, den so ausgezeichneten Text entsprechend darzustellen. Ebenso wie die

172

Kapitel 5: Text strukturieren

logischen Elemente zur Auszeichnung von Text gehren die hier beschriebenen Elemente zu den
Inline-Elementen.

5.8.1

HTML-Elemente fr physische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfgung, um Text physisch auszuzeichnen.

Inline-Elemente fr Auszeichnungen im Text mssen zumindest in der HTML-Variante
Strict innerhalb anderer Block-Elemente vorkommen. Im nachfolgenden Beispiel ist ein
Textabsatz notiert und innerhalb davon stehen mehrere physische Textauszeichnungen. Am
Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel
die Tag <b> und <i>) eingefgt. Am Ende des gewnschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefgt (z.B. </b> bzw. </i>).
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Fett und schief</h1>
<p>Das Schwein ist <b>fett</b> und der Turm von Pisa ist <i>schief</i>.<br>
Und was ist <b><i>fett und schief</i></b>?</p>
</body>
</html>

5.21: Physische Textauszeichnungen lassen sich auch kombinieren.

5.8 Physische Auszeichnungen im Text

173

Folgende Elemente dieser Art stehen zur Verfgung:

Element (Notation)

Status

Bedeutung

<b>...</b>

Zeichnet einen Text als fett aus.

<i>...</i>

Zeichnet einen Text als kursiv aus.

<tt>...</tt>
<u>...</u>

Zeichnet einen Text als dicktengleich formatiert

aus (tt = Teletyper = Fernschreiber).
Zeichnet einen Text als unterstrichen aus.

<strike>...</strike>

Zeichnet einen Text als durchgestrichen aus.

<s>...</s>

Zeichnet einen Text als durchgestrichen aus.

<big>...</big>

Zeichnet einen Text grer als normal aus.

<small>...</small>

Zeichnet einen Text kleiner als normal aus.

^...

Zeichnet einen Text als hochgestellt aus.

_...

Zeichnet einen Text als tiefgestellt aus.

Beachten Sie: Sie knnen auch wie im obigen Beispiel Elemente dieser Art verschachteln.
Dadurch sollten sich die Effekte addieren. Ein Text, der also beispielsweise als fett und innerhalb
davon als kursiv ausgezeichnet wird, sollte fettkursiv dargestellt werden.

5.8.2

Physische Elemente fr Textauszeichnung

zustzlich mit CSS formatieren

Mit CSS Stylesheets knnen Sie auch physische Elemente nach weiteren Wnschen formatieren.
Mageblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Schriftformatierung, Hintergrundfarben und -bilder. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Fett und schief mit Stil</h1>
<p>Das Schwein ist <b style="background-color:#FFCCCC">fett</b> und der Turm
von Pisa ist <i style="font-weight:bold; background-color:#FFFF00">schief</i>.</p>
</body>
</html>

174

5.22:

Kapitel 5: Text strukturieren

Mit CSS erweitern Sie die Darstellung von Text um vielfltige Optionen wie etwa eine
farbliche Hinterlegung.

Die beiden Elemente fr fette und kursive Schriftauszeichnung erhalten im Beispiel zustzlich
unterschiedliche Hintergrundfarben. Das i-Element wird auerdem fett ausgezeichnet mit
Hilfe von CSS.

5.9

Allgemeine Elemente fr Textbereiche

5.9.1

Allgemeines Block-Element

Sie knnen mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich
einschlieen. Dieses allgemeine Element bewirkt nichts weiter, als dass es in einer neuen Zeile
des Flietextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe
von CSS formatiert zu werden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<div align="center">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>
<div align="right">
<h1>Alles rechts am Rand</h1>
<ul>

5.9 Allgemeine Elemente fr Textbereiche

175

<li>alles rechts am Rand</li>

<li>alles?</li>
<li>alles!</li>
</ul>
</div>
</body>
</html>

Mit <div> leiten Sie ein allgemeines Blockelement ein, in das Sie mehrere andere Block-Elemente einschlieen knnen (div = division = Bereich). Alles, was zwischen diesem Tag und dem
abschlieenden </div> steht, wird als Teil des Bereichs interpretiert.
Einen solchen Bereich und alle seine enthaltenen Elemente knnen Sie mit dem Attribut align=
im einleitenden <div>-Tag ausrichten. Mit align="center" richten Sie den Bereich mit allen
seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit align="right"
rechtsbndig (right = rechts). Mit align="justify" werden innere Elemente wie freistehender
Text, Textabstze oder berschriften als Blocksatz ausgerichtet. Mit align="left" erzwingen
Sie die linksbndige Ausrichtung von Elementen (Voreinstellung).
Beachten Sie: Das div-Element wird weiterhin zum HTML-Standard gehren. Das Attribut
align= ist jedoch als deprecated eingestuft und soll knftig entfallen. Stattdessen sollten Sie mit
CSS Stylesheets arbeiten.

5.9.2

lteres Block-Element fr zentrierte Bereiche

Sie knnen mehrere Abstze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken,
Tabellen usw., gemeinsam zentriert ausrichten. Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich berflssig und sollte nur noch in begrndeten Ausnahmefllen (z.B. Abwrtskompatibilitt zu Netscape 1.1) benutzt werden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<center>
<h1>Zentrierter Kunsttext</h1>
<pre>
<big>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</big>
</pre>
</center>
</body>
</html>

176

Kapitel 5: Text strukturieren

Mit <center> leiten Sie einen Bereich ein, in dem alles, was folgt, zentriert ausgerichtet wird
(center = zentriert). Das knnen z.B. berschriften, Text, Grafiken oder Tabellen sein. Mit dem
abschieenden Tag </center> beenden Sie die Zentrieranweisung.

5.9.3

Allgemeines Inline-Element

Analog zum div-Element, das andere Block-Elemente enthalten kann, gibt es ein Element, das
Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und
nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>
</body>
</html>

<span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich. Das Bei-

spiel zeigt eine berschrift 1. Ordnung, die selbst bereits mit CSS formatiert ist und dadurch auf
500% Schriftgre gebracht wird. Innerhalb der berschrift sind die drei Buchstaben ABC
notiert. Jeder davon ist in ein span-Element eingeschlossen, und bei jedem span-Element wird
mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.
Beachten Sie: In der Strict-Variante drfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die span-Elemente innerhalb eines
berschriftenelements vorkommen.

5.9.4

Allgemeine Elemente formatieren mit CSS

Allgemeine Elemente fr Textbereiche erwachen durch Formatierung erst zum Leben. Mit CSS
Stylesheets knnen Sie solche Elemente jedoch nach Wunsch formatieren. Mageblich sind im
hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Schriftformatierung, Ausrichtung und Absatzkontrolle, Auenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder, Positionierung und Anzeige von Elementen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

5.9 Allgemeine Elemente fr Textbereiche

177

<head>
<title>Text des Titels</title>
</head>
<body>
<div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:red">alles!</span></li>
</ul>
</div>
<div style="text-align:right; padding:20px; border:thin solid blue; margin:25px">
<h1>Alles rechts am Rand</h1>
<ul>
<li>alles rechts am Rand</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:blue">alles!</span></li>
</ul>
</div>
</body>
</html>

5.23:

ber CSS ziehen Sie zum Beispiel Rahmen um einen Bereich oder ndern die Ausrichtung.

178

Kapitel 5: Text strukturieren

Das Beispiel bewirkt eine hnliche Ausgabe wie das im Abschnitt Allgemeines Block-Element,
diesmal jedoch mit CSS Stylesheets formatiert und damit auch geeignet fr die HTML-Variante
Strict. Beide div-Bereiche erhalten einen dnnen durchgezogenen Rahmen, der erste rot, der
zweite blau. Ein Innenabstand von 20 Pixeln sorgt dafr, dass der Text nicht am Rahmen klebt,
und ein Auenabstand von 25 Pixeln stellt sicher, dass links, rechts ber und unter den Rahmen
Platz entsteht. Der letzte Listenpunkt in beiden Aufzhlungslisten wird jeweils mit dem leeren
Inline-Element span ausgezeichnet und erhlt jeweils eine fette Schrift und eine Schriftfarbe
zugewiesen.

5.10

Trennlinien

5.10.1

Trennlinien definieren

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehrigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr>
<p>Und hier beginnt etwas Neues.</p>
</body>
</html>

5.24: Mit Trennlinien gliedern Sie Texte und andere Elemente in berschaubare Einheiten
<hr> fgt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am

Ende der Zeile des vorherigen Absatzes steht oder in einer eigenen Zeile (wie im Beispiel), oder
am Anfang des folgenden Absatzes.

5.10 Trennlinien

179

Beachten Sie: Wenn Sie XHTML-konform arbeiten, mssen Sie das hr-Element als inhaltsleer
kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <hr />. Weitere Informationen dazu im Kapitel 14.1.11 zu XHTML und HTML.

5.10.2

Trennlinien mit HTML gestalten

Mit Hilfe diverser HTML-Atrribute im <hr>-Tag knnen Sie eine Trennlinie aufflliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen knftig aus dem
HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr noshade width="300" size="3" align="left">
<p>Hier beginnt etwas Neues.</p>
</body>
</html>

Durch das Attribut noshade erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-konform
arbeiten, mssen Sie das Attribut in der Form noshade="noshade" notieren, da XML-basierte
Sprachen keine Attribute ohne Wertzuweisung erlauben.
Durch das Attribut width= (width = Breite) erreichen Sie, dass der Browser die Trennlinie so
breit anzeigt wie angegeben. Sie knnen eine Zahl oder einen Prozentwert angeben. Mit einer
Zahl, z.B. 300, erzwingen Sie, dass die Trennline so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Fr eine prozentuale Angabe notieren Sie hinter der Zahl
einfach ein Prozentzeichen (%).
Durch das Attribut size= (size = Gre) knnen Sie die Hhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung betrgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders
dnne Trennlinie, mit Werten ber 2 knnen Sie dickere als die normalen Trennlinien erzeugen.
Mit align="left" erreichen Sie, dass die Trennlinie linksbndig ausgerichtet wird (align =
Ausrichtung, left = links). Mit align="right" wird die Trennlinie rechtsbndig ausgerichtet
(right = rechts) und mit align="center" zentriert (Voreinstellung). Das Ausrichten von
Trennlinien ist allerdings nur in Verbindung mit dem Attribut width= sinnvoll, da die Trennlinie sonst stets ber die gesamte verfgbare Breite geht.

180

Kapitel 5: Text strukturieren

Der MS Internet Explorer interpretiert darber hinaus noch das Attribut color=. Erlaubt ist
dabei eine HTML-bliche Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard
gehrt.

5.10.3

Trennlinien mit CSS gestalten

Das <hr>-Tag knnen Sie auch mit CSS gestalten. Das ist strikt HTML-konform und Sie haben
noch deutlich mehr Gestaltungsmglichkeiten als mit HTML-Attributen. Leider interpretiert
jedoch der Netscape-Browser CSS-Eigenschaften in Verbindung mit Trennlinien noch nicht
(Stand: Version 6.1), und auch der Internet Explorer noch nicht so lange. Die Verwendung ist
also mit Vorsicht zu genieen. Mageblich sind im hier beschriebenen Zusammenhang z.B.
folgende CSS-Eigenschaften: Ausrichtung und Absatzkontrolle, Auenrand und Abstand,
Rahmen, Positionierung und Anzeige von Elementen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr noshade style="width:300px; color:yellow; height:5px; text-align:left;
border:1px solid blue;">
<p>Hier beginnt etwas Neues.</p>
</body>
</html>

5.25:

Mit CSS lassen sich Trennlinien weitgehend beeinflussen allerdings ist der Effekt nur in
den neusten Browser-Versionen sichtbar.

Das hr-Element erhlt im Beispiel eine Breite von 300 Pixeln, eine Hhe von 5 Pixeln, wird
linksbndig ausgerichtet, wird in gelber Farbe dargestellt und erhlt noch einen dnnen blauen
Rahmen drum herum.

5.11 ltere Elemente zur Schriftformatierung

5.11

181

ltere Elemente zur Schriftformatierung

5.11.1

Schriftart, Schriftge und Schriftfarbe

Die hier beschriebenen HTML-Elemente sind als deprecated eingestuft, das heit, sie sollen in
Zukunft aus dem HTML-Standard entfernt werden. Da es sich bei diesen Elementen um die
schlimmste Verunreinigung von HTML als reiner Struktursprache handelt, die bisher passiert
ist, gibt es richtige Kampfschriften und Hetzkampagnen gegen die weitere Verwendung dieser
Elemente im Web. Diese Elemente stellten eine Notlsung in jener Zeit dar, als HTML noch
keine Formatiersprache wie CSS zur Seite stand.
Im Hinblick auf die Rckwrtskompatibilitt zu Netscape 3.x kann der Gebrauch der hier
beschriebenen Elemente noch nicht grundstzlich verdammt werden. Aber bevor Sie auf StyleAngaben verzichten, verzichten Sie mittlerweile lieber auf die hier beschriebenen Elemente und
benutzen Sie die CSS-Entsprechungen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>
<font size="7">Ziemlich riesiger Text</font><br>
<font size="1">Ziemlich winziger Text</font><br>
<font size="+1">Text etwas gr&ouml;&szlig;er als normal</font><br>
<font size="-2">Text deutlich kleiner als normal</font>
</p>
<p>
<font color="#FF0000">Knallroter Text</font><br>
<font color="#00C000">Gr&uuml;ner Text</font><br>
<font color="#0000FF">Blauer Text</font>
</p>
<p>
<font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
oder, falls Avalon nicht darstellbar, in Wide Latin</font>
</p>
<basefont size="2" color="#CC00CC" face="Verdana">
<h2>Da komme was wolle</h2>
<p>
Alles kleiner als normal, lila und in Schriftart Verdana

182

Kapitel 5: Text strukturieren

</p>
</body>
</html>

5.26: Mit den ausgemusterten Tags zur Schriftformatierung lsst sich eine Menge erreichen.
<font>...</font> definieren Sie einen Bereich fr Schriftformatierung. Das Element darf sel-

ber nur Inline-Elemente enthalten, keine Block-Elemente. Wenn Sie also beispielsweise Textabstze damit auszeichnen wollen, mssen Sie das font-Element jedes Mal innerhalb von
<p>...</p> notieren. Die Browser sehen es zwar nicht so eng, wenn Sie es schlampiger verwenden, aber dann ist es nicht mehr HTML-konform. Durch Attribute im einleitenden <font>Tag knnen Sie Schrift formatieren.
size= bestimmt die Schriftgre (font size = Schriftgre). Sie knnen den Wert in Zahlen
zwischen 1 und 7 angeben, oder relativ im Verhltnis zur Normalschriftgre mit +Zahl bzw.
-Zahl. Die Normalschriftgre ist 3. Mit </font> beenden Sie den Abschnitt mit anderer
Schriftgre. Bei den Angaben zu <font size=...> handelt es sich um relative Werte. Wenn
der Anwender eine 12-Punkt-Schrift eingestellt hat, hat beispielsweise <font size=5> eine
andere Wirkung, als wenn der Anwender eine 9-Punkt-Schrift eingestellt hat. Die
Schriftgre, die Sie mit <font size=...> bestimmen knnen, ist auch relativ zu der
Schriftgre des Absatztyps.
<font color=...> bestimmt die Schriftfarbe (font color = Schriftfarbe). Erlaubt ist eine
HTML-bliche Farbangabe.
<font face=...> bestimmt die Schriftart (font face = Schriftart). Als Wert knnen Sie die
Namen einer oder mehrerer Schriftarten zuweisen. Wenn Sie mehrere Schriftarten angeben,
trennen Sie die Schriftartnamen durch Kommata. Bei mehreren angegebenen Schriftarten
versucht der WWW-Browser zuerst, den Text in der ersten angegebenen Schriftart darzustellen (im Beispiel in Avalon). Wenn diese Schrift beim Anwender nicht installiert ist, wird
versucht, die zweite angegebene Schrift (im Beispiel Wide Latin) zu nehmen. Wenn keine der

5.11 ltere Elemente zur Schriftformatierung

183

angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos, d.h.
der Text wird in der vom Anwender eingestellten Schrift angezeigt. Verwenden Sie exakte
Schriftartnamen. Unter MS-Windows knnen Sie eingestellte Schriftarten und ihre genauen
Namen beispielsweise ber die Systemsteuerung ermitteln.
Das zweite Element zur Schriftformatierung ist das basefont-Element. Es ist ein allein
stehendes Tag und bewirkt, dass die darin definierten Formatierungen fr alle weiteren Elemente in der Datei gelten, solange, bis ein neues basefont-Element notiert ist oder bis zum
Ende des Dokuments. Attribute und Werte sind die gleichen wie beim font-Element.
Beachten Sie: Das font-Element ist HTML 3.2, basefont dagegen HTML 4.0. Im einleitenden
<font>-Tag knnen Sie ebenso wie im <basefont>-Tag mehrere Attribute notieren, also size=,
color= und face= mischen. Netscape 4.x interpretiert <basefont color=> und <basefont
face=> nicht. Wenn Sie XHTML-konform arbeiten, mssen Sie das basefont-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <basefont size="2"
/>. Weitere Informationen dazu im Kapitel 14.1.11 ber XHTML und HTML.

5.11.2

CSS-Entsprechungen

Mit CSS Stylesheets knnen Sie alle Block- und Inline-Elemente nach Wunsch formatieren.
Mageblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften zur Schriftformatierung. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schriftart, Schriftg&ouml;&szlig;e und Schriftfarbe CSSEntsprechungen</title>
</head>
<body>
<p>
<span style="font-size:250%">Ziemlich riesiger Text</span><br>
<span style="font-size:50%">Ziemlich winziger Text</span><br>
<span style="font-size:1.2em">Text etwas gr&ouml;&szlig;er als normal</span><br>
<span style="font-size:0.8em">Text deutlich kleiner als normal</span>
</p>
<p>
<span style="color:#FF0000">Knallroter Text</span><br>
<span style="color:#00C000">Gr&uuml;ner Text</span><br>
<span style="color:#0000FF">Blauer Text</span>
</p>
<p>
<span style="font-family:Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
oder, falls Avalon nicht darstellbar, in Wide Latin</span>

184

Kapitel 5: Text strukturieren

</p>
<div style="font-size:70%; color:#CC00CC; font-family:Verdana">
<h2>Da komme was wolle</h2>
<p>
Alles kleiner als normal, lila und in Schriftart Verdana
</p>
</div>
</body>
</html>

5.27:

Mit CSS lassen sich weitgehend die gleichen Effekte (und noch viel mehr) wie mit den
ausgemusterten Tags erreichen.

Das Beispiel bewirkt in etwa die gleiche Ausgabe wie das Beispiel zuvor, jedoch ohne die Elemente font und basefont. Fr die CSS-Schriftformatierungen innerhalb der Textabstze wird
das allgemeine Inline-Element span eingesetzt. Anstelle des allein stehenden <basefont>-Tags
wird der restliche Abschnitt in ein allgemeines Block-Element div eingeschlossen, das die CSSFormatierungen zugewiesen bekommt.

5.12
5.12.1

ltere Browser-proprietre Elemente

Lauftext Marquee (Microsoft)

Sie knnen erreichen, dass ein Text mitten im brigen Text automatisch horizontal scrollt, so
wie in dem von Windows bekannten Bildschirmschoner Marquee. Diese Angaben gehren
nicht zum HTML-Standard und werden nur vom Internet Explorer interpretiert. Ein Beispiel:

5.12 ltere Browser-proprietre Elemente

185

<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<marquee scrollamount="50" scrolldelay="5">
<b>Dieser Text wird ziemlich schnell bewegt</b>
</marquee>
<marquee behavior="alternate">
<b>Dieser Text wird hin und her bewegt</b>
</marquee>
</body>
</html>

Mit <marquee> leiten Sie den zu scrollenden Inhalt ein. Dahinter folgt der Inhalt, der gescrollt
werden soll. Am Ende notieren Sie ein abschlieendes </marquee>.
Mit direction="right" im einleitenden Tag erzwingen Sie die Laufrichtung von links nach
rechts (direction = Richtung, right = rechts). Mit direction="left" stellen Sie die Laufrichtung auf rechts nach links (Voreinstellung).
Durch das Attribut scrollamount= bestimmen Sie die Pixelanzahl zwischen den ScrollZustnden. Mit scrolldelay= legen Sie die Verzgerung zwischen zwei Scroll-Zustnden in
Millisekunden fest (amount = Zustand, delay = Verzgerung).
Mit behavior="alternate" erzwingen Sie den Wechsel-Effekt (behavior = Verhalten, alternate = wechselnd).
Durch das Atrribut bgcolor= erzwingen Sie, dass der gescrollte Text in einem andersfarbigen
Rahmen erscheint (bgcolor = background color = Hintergrundfarbe). Fr die Farbauswahl
gelten die Regeln zum Definieren von Farben in HTML.
Mit align="top" erreichen Sie, dass der umgebende Text obenbndig zu dem Marquee-Text
ausgerichtet wird. Mit align="middle" wird der umgebende Text mittig ausgerichtet, mit
align="bottom" untenbndig (align = Ausrichtung, top = oben, middle = mittig, bottom =
unten).
Durch height= bestimmen Sie die Hhe des Marquee-Bereichs (height = Hhe). Diese
Angabe ist vor allem interessant, wenn Sie fr den Marquee-Bereich eine eigene Hintergrundfarbe bestimmen. Mit der Hhe des Marquee-Bereichs legen Sie dann die Hhe des
andersfarbigen Kastens fest, in dem der Marquee-Text gescrollt wird. Die Angabe erfolgt
entweder absolut in Pixeln oder in Prozent relativ zur Hhe des Anzeigefensters.
Mit hspace= bestimmen Sie den Abstand zwischen Marquee-Text und dem Text davor bzw.
dahinter (hspace = horizontal space = horizontaler Abstand). Dieses Attribut ist nur von
Bedeutung, wenn Sie den Marquee-Bereich mitten im Text definieren. Der Wert erfolgt in
Pixeln. Der angegebene Abstand gilt sowohl fr den Text davor als auch fr den Text
dahinter.
Beachten Sie: Viele Leute wollen ja unbedingt so einen Lauftext auf ihrer Seite haben und sind
ganz traurig, dass andere Browser das marquee-Element nicht kennen. Es gibt mehrere Alterna-

186

Kapitel 5: Text strukturieren

tiven zum marquee-Element. Eine davon ist, mit Hilfe von Dynamischem HTML einen Lauftext-Effekt zu programmieren (Kapitel 21). Eine andere ist, so etwas mit Java oder Flash zu tun.
Auf der Buch-CD finden Sie ein Beispiel mit einem Java-Applet.

5.12.2

Mehrspaltiger Textfluss (Netscape)

Netscape untersttzt in den Versionen 3.x und 4.x (nicht mehr in 6.x!) eine Methode,
mehrspaltigen Flietext im Zeitungsstil in HTML zu realisieren. Dieses Feature gehrt jedoch
nicht zum HTML-Standard. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<multicol cols="3" gutter="10">
<p>Lesen des folgenden Textes ... usw.</p>
</multicol>
</body>
</html>

5.28: Das Tag fr mehrspaltigen Text funktioniert nur bei Netscape 3.x und 4.x.

Mit <multicol> leiten Sie einen mehrspaltigen Abschnitt ein (multicol = multiple columns =
mehrere Spalten). Zwingend erforderlich ist das Attribut cols=, mit dem Sie die Anzahl der ge-

5.12 ltere Browser-proprietre Elemente

187

wnschten Spalten festlegen. Daran anschlieend knnen beliebige andere Elemente folgen. Mit
</multicol> wird der mehrspaltige Abschnitt beendet.
Alles, was zwischen dem einleitenden Tag <multicol> und dem abschlieenden </multicol>
steht, wird automatisch so verteilt, dass es sich optimal ber die angegebene Anzahl Spalten
erstreckt. Bei Bildern, Java-Applets usw. kann es allerdings zu unschnen Anzeigen kommen.
Denn anders als bei Tabellen richtet sich die Breite einer Spalte nicht nach dem breitesten Inhalt,
sondern nach der rechnerischen Spaltenbreite. Das kann dazu fhren, dass Grafiken, die breiter
sind als die Spalte, in die Nachbarspalte hineinreichen und sich mit dem dort stehenden Inhalt
berlappen.
Durch das Attribut width= knnen Sie die Gesamtbreite der Spalten beeinflussen. Sie knnen
eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 500, erzwingen Sie, dass alle
Spalten zusammengenommen so viel Pixel breit sind wie angegeben. Mit einem Prozentwert
erreichen Sie, dass alle Spalten zusammengenommen maximal so viel Breite des Anzeigefensters
einnehmen wie angegeben. Fr eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein
Prozentzeichen.
Mit dem Attribut gutter= knnen Sie den Abstand zwischen den Spalten vergrern oder
verkleineren. Die Voreinstellung ist ein Abstand von 10 Pixeln. Mit einem hheren Wert erreichen Sie einen greren Spaltenabstand, mit einem niedrigeren Wert einen geringeren Spaltenabstand.
Beachten Sie: Eine Alternative zu diesem HTML-Element gibt es derzeit nicht. In CSS war
mehrspaltiger Textfluss einmal vorgesehen, wurde dann jedoch wieder verworfen. Mehrere
Spalten nebeneinander knnen Sie durch Tabellen ohne sichtbaren Rahmen erzwingen (Kapitel
8.6). Dabei bricht jedoch der Text nicht automatisch zwischen den Spalten um.

5.12.3

Raumschaffer (Netscape)

Ein HTML-Element, das von Netscape 3.x und 4.x (nicht mehr 6.x!) interpretiert wird, erlaubt
es, horizontale und vertikale Leerrume zu schaffen. Dadurch lassen sich beispielsweise Absatzabstnde vergrern. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>Wer nichts wagt, kann nichts verlieren.</p>
<spacer type="vertical" size="50">
<p>Wer sich nicht sicher ist, kann sich nicht irren.</p>
</body>
</html>

Mit <spacer> leiten Sie einen Zwischenraum ein (spacer = Raumschaffer). Notieren Sie das Tag
genau an der Stelle, wo Sie den Zwischenraum wnschen. Mit type="vertical" geben Sie an,
dass es ein vertikaler Zwischenraum sein soll, wie es fr Absatzabstnde erforderlich ist. Mit

188

Kapitel 5: Text strukturieren

type="horizontal" knnen Sie auch horizontale Abstnde erzeugen. Mit dem Attribut size=

bestimmen Sie die Gre des Abstands. Die Angabe erfolgt in Pixeln (size=Gre).
Durch type="block" (block = Rechteck), width= (width=Breite) und height= (height=Hhe)
definieren Sie einen rechteckigen Leerraum. Mit width= bestimmen Sie die Breite des Rechtecks,
mit height= die Hhe. Beide Angaben erfolgen in Pixeln. Wenn Text um das Rechteck flieen
soll, sollten Sie die Ausrichtung festlegen. Mit der Angabe align="left" fliet der folgende
Text rechts um das links ausgerichtete Rechteck, mit der Angabe align="right" fliet er links
um das rechts ausgerichtete Rechteck.
Beachten Sie: Fr das, was dieses Element leistet, benutzt man heute CSS Stylesheets. Mageblich
sind die CSS-Eigenschaften fr Auenrand und Abstand.

5.12.4

Blinkender Text (Netscape)

Netscape fhrte in seinen Frhzeiten die Mglichkeit ein, Text blinken zu lassen. Alles was
zwischen <blink> und </blink> steht, blinkt im Netscape-Browser, aber auch nur dort. Ein
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1><blink>Warnung!</blink></h1>
</body>
</html>

Beachten Sie: Blinkenden Text knnen Sie ganz offiziell mit der CSS-Eigenschaft text-decoration erzeugen. Auch die entsprechende Wertzuweisung fr blinkenden Text wird jedoch nur
von Netscape interpretiert. Fr eine Lsung, die mit beiden Browsern funktioniert, mssen Sie
mit Dynamischem HTML (Kapitel 21) programmieren.

189

6.1

Verweise

Verweise definieren und gestalten

6.1.1 Allgemeines zu Verweisen

Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der intelligente
Mehrwert des World Wide Web. Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt. Wenn
Sie beispielsweise eine HTML-Datei mit einer Projekt-Einstiegsseite und verschiedene HTMLDateien fr Themenseiten planen, brauchen Sie in der Einstiegsseite Verweise zu allen Themenseiten und in jeder Themenseite einen Rcksprungverweis zur Einstiegsseite. Erst dadurch
wird aus der losen Dateisammlung ein zusammenhngendes Web-Projekt, eine Homepage. In
komplexeren Projekten wie dem vorliegenden Dokument finden Sie auch Verweise mit bestimmter Bedeutung Verweise zu bergeordneten oder untergeordneten Ebenen, Verweise
zum Blttern, Verweise zum Wechseln zwischen Beschreibungen und Anzeigebeispielen, Querverweise, Verweise zu anderen Web-Adressen usw.
Alle Verweise in HTML haben den gleichen Aufbau. Das vereinfacht die Syntax, hat aber auch
Nachteile: Es gibt nmlich keine Verweise fr bestimmte Aufgaben. Mittlerweile gibt es zwar
auch Attribute fr solche Zwecke, aber in der Praxis ist es Ihnen berlassen, wie Sie zum Beispiel
Verweise so gestalten, dass dem Anwender klar wird, ob es sich um einen Rckverweis zur
Einstiegsseite, um einen Querverweis zu einem assoziativ verwandten Thema oder etwa um
einen Verweis zu einer ganz anderen Web-Adresse handelt.
Wichtig ist in allen Fllen ein aussagekrftiger Verweistext.
Schlecht ist: zurck (wohin eigentlich?)
Besser ist: zurck zur Einstiegsseite (ah ja!)
Verweise lenken die Aufmerksamkeit des Anwenders sofort auf sich. Wenn Sie Verweise
mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wrter anbieten,
keine Wrter ohne Inhalt.
Schlecht ist: Fr weitere Information klicken Sie hier (worum geht es hier eigentlich?)
Gut ist: Weitere Information knnen Sie ebenfalls aufrufen (ah ja!)
Bei komplexeren Projekten sollten Sie sich berlegen, wie Sie dem Anwender die Vielzahl der
Verweise mit unterschiedlicher Bedeutung intuitiv zugnglich machen. Ein sinnvoller Weg
ist, den Verweisen kleine Symbolgrafiken voranzustellen, so wie es in der HTML-Version
dieses Buches auf der Buch-CD auch der Fall ist (siehe auch Grafiken einbinden, Kapitel 7).
Durch aussagekrftige Symbole knnen Sie dem Anwender sofort signalisieren, um welche
Art von Verweis es sich handelt. Die Symbolgrafiken sollten jedoch in der Hhe nicht grer
sein als normaler Flietext normalerweise etwa 10-12 Pixel. Auch Grafiken als Verweise
(Kapitel 7.3) tragen hufig zu einer besseren Verweiskennzeichnung bei.

190

Kapitel 6: Verweise

Zu wenige Verweise erschweren das Navigieren in einem Projekt und zeugen von wenig
Kreativitt beim Anbieter des Projekts. Zu viele Verweise verwirren den Anwender und
knnen ein Lost-in-Hyperspace-Gefhl erzeugen auch das wirft kein gutes Licht auf den
Projektanbieter. Setzen Sie deshalb alle Verweise, die zum bequemen Navigieren ntig sind,
und denken Sie auch an Querverweise sowie an sinnvolle Verweise zu anderen WWW-Adressen. bertreiben Sie die Querverweistechnik aber nicht.

6.1.2

Beispiele fr Verweise

Alle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in
der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWWAdresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem
eigenen Rechner fhren. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Eine kleine Verweissammlung</h1>
<p>
<a href="http://www.tagesschau.de/">
ARD Tagesschau
</a>
Nachrichten<br>
<a href="http://www.heise.de/newsticker/">
Heise Newsticker
</a>
Computer-Nachrichten<br>
<a href="http://de.news.yahoo.com/">
Yahoo Nachrichtenticker
</a>
Nachrichten<br>
<a href="http://www.oneworld.org/news/today/">
OneWorld News
</a> Nachrichten (en)
</p>
<p>
<a href="/">Wohin der wohl f&uuml;hren mag?</a><br>
<a href="./">Und der hier?</a>
</p>
</body>
</html>

6.1 Verweise definieren und gestalten

191

6.1: Verweise fhren den Besucher einer Web-Seite zu anderen Orten im WWW.

Fr Verweise in HTML gibt es das a-Element (a = anchor = Anker). Damit jedoch ein Verweis
aus diesem Element wird, ist das Attribut href= erforderlich (href = hyper reference =
Hyper(text)-Referenz). Als Wert an das href-Attribut weisen Sie das gewnschte Verweisziel zu.
Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).
Im obigen Beispiel fhren die ersten vier Verweise zu anderen Web-Angeboten. Die letzten
beiden Verweise fhren zu lokalen Zielen. Um die Syntax mglicher Verweisziele zu verstehen,
mssen Sie sich mit dem Referenzieren in HTML (Kapitel 3.7) vertraut machen.
Beachten Sie: Als Inhalt des a-Elements, also bei Verweisen der Verweistext, ist nicht nur reiner
Text erlaubt. Sie knnen im Verweistext auch andere Inline-Elemente notieren. Unter anderem
knnen Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Grafiken als
Verweise fungieren lassen, was in der Praxis des Web-Designs recht hufig vorkommt.

6.1.3

Verweise optisch gestalten mit CSS

Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.B. blau fr Verweise zu noch nicht besuchten Seiten, und violett fr
Verweise zu bereits besuchten Seiten. Um dateiweit eigene Verweisfarben zu bestimmen, knnen
Sie die Attribute verwenden, die im Abschnitt Farben fr Text und Verweise (Kapitel 4.2.1)
beschrieben werden. Darber hinaus gibt es aber die Mglichkeit, Verweise mit Hilfe von CSS
individueller zu gestalten. Unter anderem ist es auch mglich, die meist voreingestellte
Unterstreichung des Verweistextes zu unterdrcken. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!-a:link { text-decoration:none; font-weight:bold; color:#E00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }

192

Kapitel 6: Verweise

a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; }

-->
</style>
<title>Text des Titels</title>
</head>
<body>
<h1>Eine kleine Verweissammlung</h1>
<p>
<a href="http://www.tagesschau.de/">
ARD Tagesschau
</a> Nachrichten<br>
<a href="http://www.heise.de/newsticker/">
Heise Newsticker
</a> Computer-Nachrichten<br>
<a href="http://de.news.yahoo.com/">
Yahoo Nachrichtenticker
</a> Nachrichten<br>
<a href="http://www.oneworld.org/news/today/">
OneWorld News
</a> Nachrichten (en)
</p>
<p>
<a href="/" style="color:green">
Wohin der wohl f&uuml;hren mag?
</a><br>
<a href="./" style="color:green">Und der hier?</a>
</p>
</body>
</html>

6.2: Die Links aus dem vorhergehenden Beispiel, diesmal mal mit Hilfe von CSS formatiert.

6.1 Verweise definieren und gestalten

193

Das Beispiel arbeitet konsequent mit CSS Stylesheets. Dazu ist im Dateikopf der HTML-Datei
ein eigener zentraler Bereich zum Definieren von CSS-Formaten notiert (<style>...</style>).
Nheres dazu finden Sie im CSS-Kapitel im Abschnitt Zentrale Formate definieren (Kapitel 15.3).
Der vielfache Wunsch von Web-Designern, die Unterstreichung des Verweistextes zu
unterdrcken, wird durch die CSS-Angabe text-decoration:none erzielt (text-decoration:
underline wrde brigens die Voreinstellung, also unterstrichenen Verweistext bewirken).
Weitere im Beispiel verwendete Formatdefinitionen sind font-weight:bold; (fette Schrift)
sowie Angaben zur Farbe (color:) und zur Hintergrundfarbe (background-color:). Die
entsprechenden CSS-Eigenschaften werden in den Abschnitten ber Schriftformatierung und
Hintergrundfarben und -bilder beschrieben.
Was im obigen Beispiel auffllt, ist, dass fr insgesamt vier Verweistypen CSS-Formate definiert werden. Mit a:link sind Verweise zu noch nicht besuchten Seiten gemeint, mit
a:visited Verweise zu bereits besuchten Seiten, mit a:hover Verweise, whrend der Anwender
mit der Maus ber den Verweistext fhrt, und mit a:active Verweise, wenn sie angeklickt
werden oder sind. Weitere Einzelheiten dazu werden im Abschnitt Pseudoformate fr Verweise
(Kapitel 15.3.8) beschrieben.
Die beiden letzten Verweise im obigen Beispiel werden individuell formatiert. Sie bernehmen
die zentral definierten CSS-Formate, erhalten aber zustzlich eine eigene Verweistextfarbe
zugewiesen. Dazu wird im einleitenden <a>-Tag das Attribut style= notiert.

6.1.4

Zielfenster fr Verweise bestimmen

Per Voreinstellung werden alle Verweise im aktuellen Fenster geffnet es sei denn, Sie haben in
den Kopfdaten der HTML-Datei eine Zielfensterbasis angegeben und dort etwas anderes
bestimmt. Bei einzelnen Verweisen knnen Sie jedenfalls unabhngig davon entscheiden, ob ein
Verweisziel im aktuellen Browser-Fenster ausgegeben, oder ob ein neues Fenster dafr geffnet
werden soll. Bei Verweisen zu fremden Web-Angeboten kann es beispielsweise sinnvoll sein, das
Verweisziel in einem neuen Fenster zu ffnen. So braucht der Anwender das eigene WebAngebot nicht verlassen, sondern bekommt das andere Angebot einfach in einem neuen Fenster
angezeigt. Die Seite Ihres Angebots mit dem Verweis bleibt in einem Fenster im Hintergrund
erhalten.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>SELFHTML aktuell</h1>
<p>
immer wieder neu: <a href="http://selfaktuell.teamone.de/" target="_blank">SELFHTML
aktuell</a>
</p>

194

Kapitel 6: Verweise

</body>
</html>

Mit dem Attribut target= im einleitenden <a>-Tag knnen Sie ein Zielfenster fr den Verweis
festlegen. Wenn Sie den Verweis in einem neuen Fenster ffnen wollen, weisen Sie bei target
den Wert _blank zu (mit dem Unterstrich am Anfang!).
Weitere mgliche Wertzuweisungen an target= sind:
_self, um den Verweis im aktuellen Fenster zu ffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen,
sowie ein beliebiger Fenstername, der in einem Frameset definiert ist.
Genauere Einzelheiten zu den Angaben im Zusammenhang mit Frames finden Sie im Abschnitt
Verweise zu anderen Frames und zum Sprengen von Framesets (Kapitel 9.3).
Beachten Sie: Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es
einzusetzen, mssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass
dieses Attribut vorwiegend fr Verweise bei Verwendung von Frames gedacht ist und Frames
eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional
entspricht (auf gut Deutsch: nicht der reinen Lehre entspricht). Anstelle von target=
"_blank" knnen Sie auch target="Halligalli" oder sonst irgendeinen Unsinn notieren.
Wenn es kein Fenster mit diesem Namen gibt, ffnen die Web-Browser das Verweisziel in einem
neuen Browser-Fenster.

6.2

Projektinterne Verweise

6.2.1

Verweise zu Dateien oder Quellen im Projekt

Ein Web-Projekt besteht typischerweise aus mehreren bis vielen Einzelseiten, die miteinander
verlinkt sind. Einleitende Bemerkungen dazu finden Sie im Abschnitt Informationsverteilung und
Dateiorganisation (Kapitel 3.9). Um Verweise auf andere Projektdateien zu definieren, empfiehlt
es sich, relative Angaben zum Verweisziel zu machen. Das Projekt bleibt dadurch flexibler, und
die Verweise funktionieren auch in anderen Umgebungen (z.B. solange Sie das Projekt lokal auf
Ihrem PC erstellen und austesten wollen, oder wenn Sie es mal auf CD-ROM prsentieren
mchten).
Beispiel Teil 1 index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

6.2 Projektinterne Verweise

195

<h1>Homepage</h1>
<p>Dies ist eine ganz einfache Homepage mit einem <a href="zweiteseite.htm">Verweis
zu einer anderen Seite des Projekts</a>. Eine <a
href="../../tabellen/anzeige/layout.htm">aufwendigere Homepage mit projekt-internen
Verweisen</a> k&ouml;nnen Sie aber ebenfalls aufrufen.</p>
</body>
</html>

6.3: So sieht die Beispielseite aus: Die Verweise fhren auf zwei weitere Web-Seiten.

Beispiel Teil 2 zweiteseite.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<div style="width:100%; border:thin solid gray; padding:5px">
<a href="index.htm">Homepage</a>
</div>
<h1>Zweite Seite</h1>
<p>Ja, hurra, geschafft!</p>
</body>
</html>

Das Beispiel zeigt zwei kleinere HTML-Dateien. Die erste mit Namen index.htm enthlt einen
Verweis zur zweiten Datei. Der Dateiname der zweiten Datei lautet zweiteseite.htm. Beide
Dateien sind im gleichen Verzeichnis abgelegt. Deshalb gengt bei href= die Angabe des Dateinamens ohne weitere Zustze. Im Beispiel der Datei index.htm wird aber auch noch gezeigt, wie
Verweise zu Dateien in anderen Verzeichnissen definiert werden. Die genaue Syntax solcher
relativen Angaben wird im Abschnitt Mit relativen Pfadangaben relativ zum Basis-URI referenzieren (Kapitel 3.7.3) beschrieben.
Die zweite Datei im Beispiel (zweiteseite.htm) enthlt einen typischen Rckverweis auf die erste
Seite, also auf die Einstiegsseite. Ein Rckverweis ist kein spezieller Verweis, sondern einfach
wieder ein Verweis auf die gewnschte Datei. Da beide Dateien im gleichen Verzeichnis liegen,
gengt auch in diesem Fall wieder die Angabe des Dateinamens, also href="index.htm".

196

Kapitel 6: Verweise

Beachten Sie: Der Rckverweis in der zweiten Datei wird im obigen Beispiel mit Hilfe eines
allgemeinen Bereichs, dem ein paar CSS-Formate zugewiesen sind, optisch etwas aufgewertet. Er
steht am Anfang des sichtbaren Dateikrpers und durch den Rahmen, den er dank CSS erhlt,
wirkt der Bereich wie eine Navigationsleiste. Es ist sehr empfehlenswert, solche typischen
Navigationsverweise immer an der gleichen Stelle einer Seite zu notieren und optisch so zu
gestalten, dass der Navigationszweck ersichtlich ist. HTML bietet keine speziellen Verweise oder
gestalterischen Mglichkeiten fr Navigationsleisten und Navigationsverweise an. Navigationsleisten mssen Sie mit den zur Verfgung stehenden Bordmitteln selbst kreieren. (Genaugenommen ist diese Aussage falsch: HTML bietet sehr wohl so etwas an, nmlich mit der Mglichkeit, logische Beziehungen wie in Kapitel 4.1.12 beschrieben zu definieren. Leider wird dies
jedoch von den Browsern bis heute nicht untersttzt.)

6.2.2

Anker definieren und Verweise zu Ankern

Sie knnen innerhalb einer HTML-Datei Anker definieren. Dann knnen Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb
der angezeigten Seite ausgefhrt. Der Verweis kann aber auch in einer anderen Datei stehen.
Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker
geladen hat, an die entsprechende Stelle innerhalb der Datei. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1><a name="anfang">Lange Seite</a></h1>
<p><a href="#kap02">Kapitel 2</a></p>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->
<h2><a name="kap02">Kapitel 2</a></h2>
<p><a href="#anfang">Seitenanfang</a> oder
<a href="../projektintern.htm#anker">
Anker definieren und Verweise zu Ankern
</a></p>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->
</body>
</html>

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht
darin, dass kein Attribut href= notiert wird, sondern stattdessen ein Attribut name=.

6.2 Projektinterne Verweise

197

Ein kompletter Anker sieht also so aus:

<a name="Ankername">...</a>

Den Ankernamen knnen Sie frei vergeben. Vergeben Sie keine zu langen Namen. Namen
drfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein
Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen
hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Was Sie zwischen <a name="Ankername"> und </a> als Inhalt notieren, ist das Sprungziel fr
Verweise, die zu diesem Anker fhren. Es ist durchaus erlaubt, einen leeren Anker zu notieren,
also <a name="Ankername"></a>. Einige ltere Browser fhren Verweise zu leeren Ankern
jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen.
Beachten Sie dabei aber, dass das a-Element selber ein Inline-Element ist und keine Block-Elemente als Inhalt haben darf. Wenn Sie also beispielsweise eine berschrift als Anker definieren
wollen, was ja durchaus typisch ist, dann notieren Sie die Elementverschachtelung immer in
dieser Form:
<h2><a name="Ankername">Text der berschrift</a></h2>

Um innerhalb einer Datei einen Verweis zu einem in der Datei vorhandenen Anker zu notieren,
gilt folgendes Schema:
<a href="#Ankername">Verweistext</a>

Das Verweisziel beginnt also mit einem Gatterzeichen #, unmittelbar gefolgt vom Ankernamen.
Wenn der Verweis zu einem Anker in einer anderen Datei fhren soll, wird zuerst die Datei
adressiert. Hinter dem Dateinamen folgt das Gatterzeichen # und dahinter der Ankername.
Beachten Sie: Obwohl HTML nicht zwischen Gro- und Kleinschreibung unterscheidet, ist es in
jedem Fall empfehlenswert, Ankernamen bei Ankern und Verweisen dorthin genau gleich zu
schreiben. Einige Browser fhren den Verweis nmlich nicht aus, wenn der Ankername beim
Anker und beim Verweis dorthin unterschiedliche Gro-/Kleinschreibung verwendet. Wenn Sie
XHTML-konform arbeiten wollen, mssen Sie in jedem Fall auf einheitliche Gro-/Kleinschreibung achten, da XHTML im Gegensatz zu HTML Gro-/Kleinschreibung streng unterscheidet.
Bei Verweisen innerhalb einer Datei erzeugt der Web-Browser, wenn die Datei in einer httpUmgebung angezeigt wird, keinen neuen Server-Zugriff, sofern er die Datei so vollstndig in den
Arbeitsspeicher geladen hat, dass er den Sprung ausfhren kann.
Einige Browser, z.B. der Internet Explorer, kennen auch intern reservierte Ankernamen wie
top. Wenn Sie also einen Verweis <a href="#top">...</a> notieren und kein Anker dieses

Namens in der Datei existiert, springt der Browser beim Ausfhren des Verweises an den Anfang
der Seite. Manche Browser haben Schwierigkeiten, zu Ankern zu springen, die innerhalb einer
Tabelle notiert sind.
Es ist durchaus mglich, a-Elemente zu notieren, die sowohl ein href- als auch ein name-Attribut haben! Absichtlich selbstbezgliche Verweise knnen Sie beispielsweise so erzeugen:
<a name="hier" href="#hier">immer sch&ouml;n hierbleiben!</a>

198

Kapitel 6: Verweise

6.3

Projektexterne Verweise

6.3.1 Allgemeines zu projektexternen Verweisen

Aus technischer Sicht stellen projektexterne Verweise kein groes Problem dar. Im Abschnitt
Referenzieren in HTML (3.7) wird beschrieben, welche Mglichkeiten zur Referenzierung
bestehen. Diese Mglichkeiten sind beim href-Attribut des <a>-Tags erlaubt. Dennoch sollten
Sie einiges mehr ber projektexterne Verweise wissen:
Im Normalfall drfen Sie ungefragt Verweise auf fremde Web-Angebote setzen. Sie brauchen
also keine E-Mail an den Anbieter mit Bitte um Genehmigung zu schreiben, wenn Sie auf sein
Angebot einen Link setzen wollen. Jeder Anbieter, der mit seinem Web-Projekt online geht,
muss sich im Klaren darber sein, dass er Teil eines weltweiten Hypertext-Systems ist, in dem
er nicht allein ist. Wenn er das nicht akzeptieren kann, ist er im Web fehl am Platz und hat
das falsche Medium gewhlt. Die Grundregeln des Web werden von den Ideen des Web
bestimmt, nicht von den hermetischen Zwangsvorstellungen einiger Zusptgekommener.
Es gibt jedoch Ausnahmen von der Regel. Wenn Sie beispielsweise selbst ein sehr stark frequentiertes Web-Angebot haben und auf dessen Einstiegsseite einen Verweis auf die Homepage eines kleinen, unbekannten Anbieters setzen, dann sollten Sie ihn vorher fragen. Der
Grund: Durch die vielen zu erwartenden Besucher, die ber Ihren Verweis auf das fremde
Angebot finden, wird dort pltzlich sehr viel Traffic (Besucherverkehr und Datenbertragung) erzeugt. Viele Anbieter haben bei ihrem Provider eine Volumenbegrenzung, und wenn
diese berschritten wird, entstehen den Anbietern unkalkulierbare Kosten. Auch knnte es
sein, dass der fremde Server nicht sehr belastungsfhig ist und durch die vielen pltzlichen
Besucher zusammenbricht.
Eine andere Ausnahme ist, wenn Sie den Verweis in einem negativen Kontext setzen. Wenn
Sie also auf einen Anbieter verweisen, nur weil sie ihn auf Ihren eigenen Seiten heftig kritisieren, dann ist es sicherer, sich dort eine Besttigung einzuholen, dass ein solcher Verweis
gebilligt wird. Juristisch sicher ist eine solche Besttigung aber nur, wenn sie mit Unterschrift
in dokumentenechter Form von einer dafr zustndigen Person geleistet wird.
Eine Sache, gegen die man sich im Sinne der Zivilcourage wehren sollte, ist der Versuch von
Anbietern, juristisch gegen so genannte Deeplinks (Verweise in die Tiefe eines fremden Angebots) vorzugehen. Weltweiter Hypertext im Web bedeutet, dass auf vorhandene URIs verwiesen
werden darf. Schlielich kann sich auch jeder Anwender auf jeden URI ein Lesezeichen
(Bookmark, Favoriten) in seinem Browser setzen. Das kann auch eine Datei tief in einem
fremden Web-Angebot sein. Es gibt von Anbieterseite aus technische Mglichkeiten, Deeplinks
auf eine allgemeinere Seite umzulenken. Wenn er also nicht will, dass Deeplinks auf sein
Angebot gesetzt werden, dann soll er von diesen technischen Mglichkeiten Gebrauch machen.
Weitere Informationen und Bemerkungen zu Diskussionen, die Sie zu diesen Themenkomplexen kennen sollten, finden Sie im Abschnitt Rechtliche Aspekte von Web-Projekten (Kapitel 25.6).

6.3.2

Beispiele fr projektexterne Verweise

Die einzige Bedingung, die beim Anwender erfllt sein muss, damit er projektexterne Verweise
ausfhren kann, ist eine bestehende Internet-Verbindung. Ein Beispiel:

6.3 Projektexterne Verweise

199

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Besuchen Sie doch mal...</h1>
<p>
<a href="http://www.teamone.de/training/">
ein paar Kurse &uuml;ber die hier vermittelten Inhalte
</a><br>
<a href="http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view">
das <i>SELFSpezial</i>-G&auml;stebuch
</a><br>
<a href="http://babelfish.altavista.com/">
den Babelfish
</a><br>
<a href="ftp://ftp.uni-augsburg.de/">
den FTP-Server der Universit&auml;t Augsburg
</a><br>
<a href="gopher://ftp.std.com/1">
die ganze Welt auf einem Gopher-Server
</a><br>
<a href="telnet://locis.loc.gov/">
die &ouml;ffentliche Telnet-Anwendung der Library of Congress
</a><br>
<a href="news:de.comm.infosystems.www.authoring.misc">
die deutschsprachige Newsgroup f&uuml;r HTML/CSS
</a>
</p>
</body>
</html>

Web-Adressen beginnen mit http://, manchmal auch mit https:// (Letzteres sind Server, bei
denen die Datenbertragung von und zum Browser verschlsselt stattfindet, z.B. bei InternetBanking).
Andere Internet-Protokolle knnen Sie ebenfalls adressieren, beispielsweise FTP-Adressen mit
ftp://, Adressen auf Gopher-Servern mit gopher:// oder Telnet-Adressen mit telnet://.
Auch Newsgroups im Usenet knnen Sie adressieren, nmlich mit news: (ohne die beiden sonst

charakteristischen Schrgstriche).
Bei anderen als http-Adressen kommt es darauf an, wie Web-Browser damit umgeht. Die
modernen Browser beherrschen meistens FTP und Gopher und stellen entsprechende Adressen
in ihrem Anzeigefenster dar. Bei Protokollen, die der Browser nicht untersttzt, versucht er, auf
dem Rechner des Anwenders ein Programm auszufhren, das fr das entsprechende InternetProtokoll zustndig ist. Bei Telnet wird beispielsweise ein auf dem Rechner installierter Telnet-

200

Kapitel 6: Verweise

Client aufgerufen, und bei Verweisen auf Newsgroups ein Newsreader oder das NewsreaderModul eines Mailprogramms. Bei Newsgroups muss jedoch ein News-Server im Newsreader des
Anwenders eingerichtet sein, der die adressierte Newsgroup anbietet. Auch E-Mail-Verweise sind
mglich (Kapitel 6.4).
Beachten Sie: Viele Adressen bestehen nur aus dem Namen einer WWW-Domain, etwa
http://www.teamone.de/. Trotzdem fhrt der Verweis auf eine konkrete HTML-Datei. Das
liegt daran, dass es bei vielen Web-Servern einen so genannten Default-Dateinamen gibt
meistens index.htm, index.html oder welcome.htm bzw. welcome.html. Das Projekt muss natrlich
auch eine entsprechende Datei besitzen. Im Verweis braucht die HTML-Datei aber nicht mit
angegeben zu werden.
Viele solcher Adressen werden immer wieder ohne abschlieenden Schrgstrich angegeben, etwa
http://www.teamone.de. Es ist jedoch sauberer, wenn Sie noch den Schrgstrich dahinter
setzen. Nur so kann der Web-Browser bereits am Verweis erkennen, dass es sich um ein Verzeichnis handelt, in dem eine Default-Datei steht, deren Namen der Web-Server zur Verfgung
stellt. Es ist deshalb besser zu notieren: http://www.teamone.de/.
Noch wichtiger ist es, bei Unterverzeichnissen einen abschlieenden Schrgstrich zu notieren.
Zwar klappt es auch, wenn Sie eine Adresse wie http://www.teamone.de/training notieren.
Doch dann findet unntig viel Kommunikation zwischen Browser und Server statt, denn intern
fordert der Browser vom Server im Beispiel erst mal eine Datei namens training, was den Server zunchst zu einer Fehlermeldung veranlasst, da diese Datei nicht existiert. Erst im zweiten
Schritt wird erkannt, dass es sich um den Namen eines Verzeichnisses handelt. Notieren Sie
deshalb immer Angaben wie http://www.teamone.de/training/, also mit abschlieendem
Schrgstrich.
Es gibt neben den angesprochenen Internet-Protokollen auch noch andere, etwas wais oder irc.
Ferner gibt es das Un-Protokoll file, ber das sich lokale Rechner und Netzwerkadressen
absolut adressieren lassen, mit Angaben wie <a href="file://localhost/">...</a>. Dies
wird von moderneren Browsern jedoch aus Sicherheitsgrnden nicht mehr oder nur noch
eingeschrnkt untersttzt und ist auch nicht besonders sinnvoll, da es heute wirklich kein
Problem mehr ist, fr lokale Zwecke einen Web-Server lokal einzurichten.

6.4
6.4.1

E-Mail-Verweise
Verweis zu E-Mail-Adresse definieren

Sie knnen auf jede beliebige E-Mail-Adresse im Internet-Format einen Verweis setzen. Eine
Internet-gerechte E-Mail-Adresse erkennen Sie an dem Zeichen @ in der Mitte der Adresse.
Wenn der Anwender auf den Verweis klickt, kann er eine E-Mail an den betreffenden Empfnger
absetzen. Normalerweise benutzen Anbieter von WWW-Seiten diese Mglichkeit, um Besuchern
die Mglichkeit zu bieten, eine E-Mail an die eigene Adresse senden, zum Beispiel wegen
Feedback zum Angebot. Sie knnen aber auch Verweise zu anderen E-Mail-Adressen anbieten.

6.4 E-Mail-Verweise

6.4:

201

Ein Klick auf den Mailto-Link ffnet das verknpfte E-Mail-Programm (hier Pegasus Mail)
mit einer neuen Nachricht.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>E-Mail-Verweise definieren</title>
</head>
<body>
<h1>Impressum</h1>
<p>Verantwortlich f&uuml;r den Inhalt dieser Seiten ist:<br>
<a href="mailto:[email protected]">Fritz Eierschale,
[email protected]</a>
</p>
</body>
</html>

Verweise auf E-Mail-Adressen funktionieren nach dem gleichen Schema wie alle anderen Verweise. Beim href-Attribut des einleitenden <a>-Tags wird das Verweisziel angegeben. Verweis-

202

Kapitel 6: Verweise

ziele vom Typ E-Mail beginnen immer mit mailto: (ohne // dahinter!). Der Verweis ist bei
Anwendern nur ausfhrbar, wenn der Web-Browser das Erstellen und Absenden von E-Mails
untersttzt (z.B. Netscape) oder wenn bei solchen Verweisen automatisch ein E-Mail-Programm
gestartet wird (dies ist z.B. beim MS Internet Explorer der Fall).
Beachten Sie: Es ist sinnvoll, im Verweistext die E-Mail-Adresse noch einmal explizit zu nennen,
so wie im obigen Beispiel, damit Anwender, bei denen der E-Mail-Verweis nicht ausfhrbar ist,
auf Wunsch separat eine E-Mail senden knnen.

6.4.2

Optionen bei E-Mail-Verweisen

Die hier beschriebenen Optionen sind nicht im HTML-Standard verankert, widersprechen

diesem aber auch nicht unbedingt, solange die Kodierungsregeln fr URIs eingehalten werden.
Da sie von vielen Browsern interpretiert werden, sollen sie hier erwhnt werden. Sie knnen:
E-Mail-Verweise an mehrere Empfnger senden, wahlweise cc (sichtbare Kopienempfnger)
oder bcc (unsichtbare Kopienempfnger),
anstelle einer einfachen Mail-Adresse ein vollstndiges Empfngerschema angeben von der Art:
Fritz Eierschale <[email protected]>

ein Subject vordefinieren, sodass beim ffnen des E-Mail-Editors das Betreff-Feld bereits mit
einem Text Ihrer Wahl ausgefllt ist,
einen Body-Inhalt vordefinieren, sodass beim ffnen des E-Mail-Editors bereits Text im
Nachrichtentext der E-Mail steht, z.B. eine Anrede,
alle Optionen kombinieren.
Es besteht jedoch keinerlei Garantie, dass alle Mglichkeiten in allen Browsern und allen Kombinationen mit E-Mail-Programmen funktionieren. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Tolle Mails</h1>
<p>Mail an einen Hauptempf&auml;nger und einen sichtbaren Kopienempf&auml;nger:<br>
<a href="mailto:[email protected][email protected]">Mail mit
Kopie</a></p>
<p>Mail an einen Hauptempf&auml;nger und einen unsichtbaren
Kopienempf&auml;nger:<br>
<a href="mailto:[email protected][email protected]">Mail mit
Geheimkopie</a></p>
<p>Mail mit vordefiniertem Subject (Betreff):<br>
<a href="mailto:[email protected]?subject=eine Mail%20von%20deinen%20WebSeiten">Mail mit Betreff</a></p>

6.4 E-Mail-Verweise

203

<p>Mail mit vordefiniertem Body (Nachrichtentext):<br>

<a
href="mailto:[email protected]?body=Hallo%20Fritz,%0D%0A%0D%0Aich%20wollte%20nur
%20sagen,%20da%DF ">Mail mit Body</a></p>
<p>Mail mit kombinierten Optionen:<br>
<a
href="mailto:[email protected][email protected]&amp;subject=Hallo%20Fr
itz,%20hallo%20Heidi">cc und Subject</a></p>
<p>Mail an zwei Hauptempf&auml;nger:<br>
<a href="mailto:[email protected],%[email protected]">Mail an
zwei</a></p>
<p>Mail mit vollst&auml;ndigem Adressierungsschema:<br>
<a href="mailto:Fritz%20Eierschale%20&lt;[email protected]&gt;">Mail mit
Adressierungsschema</a></p>
</body>
</html>

6.5: Dieses Beispiel gibt Empfngeradresse und den Betreff der E-Mail vor.

Die Optionen werden in dem Wert notiert, der dem href-Attribut zugewiesen wird. Es gibt also
keine speziellen HTML-Attribute fr diese Optionen, und deshalb ist die Handhabung auch
etwas umstndlich. Zuerst wird wie blich der Empfnger notiert. In den obigen Beispielen (mit
Ausnahme des letzten) geschieht das jeweils durch mailto:[email protected]. Dahinter
wird ein Fragezeichen ? notiert. Das ist in der URI-Syntax das bliche Zeichen, um Parameter an
eine aufgerufene Adresse zu bergeben. Hinter dem Fragezeichen folgen die Parameter. Jede
Option ist so ein Parameter und besteht aus einem Namen, einem Gleichheitszeichen und einem
zugewiesenen Wert. Als Optionsnamen sind erlaubt:

cc (sichtbarer Kopienempfnger),
bcc (unsichtbarer Kopienempfnger),
subject (Betreff) und
body (Nachrichtentext).

Ein Konstrukt wie [email protected] ist also ein vollstndiger Parameter und bedeutet: sichtbare Kopie an [email protected].

204

Kapitel 6: Verweise

Bei den Wertzuweisungen an die Parameter knnen Zeichen vorkommen, die nicht zu einer
gltigen URI gehren. Damit die URI gltig bleibt (andernfalls wre das Dokument auch kein
gltiges HTML mehr), mssen diverse Zeichen maskiert werden. Die Maskierung besteht darin,
ein Prozentzeichen % zu notieren, gefolgt vom hexadezimal ausgedrckten Zeichenwert des
gewnschten Zeichens.
Die folgende Tabelle listet Zeichen auf, die maskiert werden mssen, weil sie innerhalb von URIs
nicht vorkommen drfen oder eine bestimmte Bedeutung haben. Links steht das Zeichen, rechts
die Zeichenkette, mit der Sie das Zeichen maskieren mssen:
Zeichen

Zeichenkette fr Maskierung

[neue Zeile]
[Wagenrcklauf]
[Leerzeichen]
!
#
%
*
/
?

%0A
%0D
%20
%21
%23
%25
%2A
%2F
%3F

Ferner mssen Sie alle Zeichen maskieren, die oberhalb des ASCII-Zeichensatzes liegen, also z.B.
deutsche Umlaute und scharfes S. Die folgende Tabelle listet die wichtigsten Zeichen und ihre
Maskierung auf:
Zeichen

Zeichenkette fr Maskierung

Zeichen

Zeichenkette fr Maskierung

%C4
%D6
%DC
%DF

%E4
%F6
%FC

Zur Ermittlung weiterer Zeichen knnen Sie beispielsweise in der Zeichentabelle des Zeichensatzes ISO-8859-1 den Dezimalwert des gewnschten Zeichens ermitteln, von dieser Dezimalzahl
dann mit dem Dezimal/Hexadezimal-Umrechner (auf der Buch-CD in selfHTML) den Hexadezimalwert ermitteln und noch ein Prozentzeichen davor notieren.
Wenn Sie mehrere Optionen kombinieren wollen, mssen Sie die Optionen durch ein kaufmnnisches Und (&) voneinander trennen. Nun darf ein solches Zeichen in HTML auch nicht
bei einer Wertzuweisung an ein Attribut nicht unmaskiert vorkommen. Deshalb sollten Sie es
wie in HTML blich mit &amp; maskieren. Leider gibt es einige ltere Browser (z.B. Netscape
3.x), die damit nicht klarkommen.
Die folgende Zeichenkette:
[email protected]&amp;subject=Hallo%20Fritz,%20hallo%20Heidi

6.5 Download-Verweise und Verweise auf beliebige Dateien

205

kombiniert im obigen Beispiel also die Optionen fr cc und subject. Um weitere Optionen
hinzufgen, notieren Sie ein weiteres &amp; und dahinter eine weitere Option, bestehend aus
Optionsname, Gleichheitszeichen und zugewiesenem Wert.
Das letzte der obigen Beispiele zeigt, wie Sie ein vollstndiges Adressierungsschema gem
RFC822 als mailto-Adresse angeben. Ein solches Schema, wie Sie es vermutlich aus Ihrer EMail-Korrespondenz kennen, lautet beispielsweise:
Fritz Eierschale <[email protected]>

In einem E-Mail-Verweis muss die Zuweisung an das href-Attribut jedoch so aussehen:

mailto:Fritz%20Eierschale%20&lt;[email protected]&gt;

Auch in diesem Fall mssen Sie also alle weiter oben erwhnten Zeichen maskieren. Auerdem
mssen Sie die beiden Zeichen < und > mit ihren HTML-gerechten Maskierungen &lt; bzw.
&gt; umschreiben.

6.5

Download-Verweise und Verweise auf beliebige Dateien

6.5.1 Download-Verweise
Es gibt keine spezifische Notation in HTML, um Dateien beim Anklicken zum Downloaden
anzubieten. Es gibt lediglich Dateitypen, die (fast) jeder Web-Browser so interpretiert, dass er
dem Anwender anbietet, die Datei downzuloaden. Das bekannteste Dateiformat dafr ist heute
das ZIP-Format (*.zip). ZIP-Dateien sind Archivdateien, die mehrere andere Dateien enthalten
knnen, sogar ganze Verzeichnisstrukturen. Die enthaltenen Dateien werden auerdem komprimiert. Der Anwender muss die ZIP-Datei nach dem Download mit einem geeigneten Programm entpacken (Unzip-Programm). Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Download-Ecke</h1>
<p><a href="wavetext.zip"><b>WaveText</b></a><br>
Ein Java-Applet f&uuml;r Textanimationen (wavetext.zip, 2.106 Bytes)</p>
</body>
</html>

Verweise auf typische Download-Dateien wie ZIP-Dateien unterscheiden sich nicht von anderen
Verweisen. Das Verweisziel ist die Datei, die zum Download angeboten wird. Wenn die Datei
zum eigenen Projekt gehrt, gelten die gleichen Regeln wie bei projektinternen Verweisen, bei
entfernten Dateien die Regeln von projektexternen Verweisen (Kapitel 6.2 und 6.3).

206

6.6:

Kapitel 6: Verweise

Nach dem Anklicken eines Download-Links fragt der Internet Explorer 6.0, was mit der
Datei passieren soll.

Beachten Sie: Wenn Sie Dateien anbieten, die nur fr bestimmte Rechnerumgebungen gedacht
sind, knnen Sie natrlich auch Formate verwenden, die speziell fr diese Umgebungen gedacht
sind. Fr DOS/Windows-Umgebungen knnen das beispielsweise selbstentpackende EXEArchive sein, oder fr Macintosh HQX-Archive. Wenn der Web-Browser mit der Dateiendung
nichts anfangen kann, sollte er den Anwender im Dialog entscheiden lassen, was er mit der Datei
tun mchte dabei sollte auch die Download-Mglichkeit angeboten werden.

6.5.2 Verweise zu beliebigen Dateien

Sie knnen auf jede beliebige Datei einen Verweis setzen. Es kann sich um Audio-Dateien,
Tabellenkalkulationsdateien, CAD-Dateien, Video-Dateien, Grafikdateien, Textverarbeitungsdateien, Programmdateien, Datenbankdateien handeln was Sie wollen. Sie knnen auch jede
beliebige Datei in Ihr eigenes Web-Projekt mit auf den Internet-Server laden und einen Verweis
darauf setzen. Aus Sicht von HTML ist das kein Problem. Das Problem besteht darin, was der
Web-Browser des Anwenders mit den Dateien anfangen kann bzw. wie er ihren Inhalt korrekt
anzeigen oder abspielen lassen kann. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>

6.5 Download-Verweise und Verweise auf beliebige Dateien

207

</head>
<body>
<h1>Stuff</h1>
<p><a href="buch.url"><b>buch.url</b></a><br>
Eine Favoritendatei, wie der Internet Explorer sie anlegt</p>
<p><a href="fritz.vcf"><b>fritz.vcf</b></a><br>
Eine Visitenkartendatei (Adressenaustauschformat)</p>
<p><a href="einsundeins.xls"><b>einsundeins.xls</b></a><br>
Eine Excel-Datei</p>
</body>
</html>

Verweise auf beliebige Dateien unterscheiden sich nicht von anderen Verweisen. Das Verweisziel
ist die gewnschte Datei. Wenn die Datei zum eigenen Projekt gehrt, gelten die gleichen Regeln
wie bei projektinternen Verweisen, bei entfernten Dateien die Regeln von projektexternen Verweisen.
Beachten Sie: Dateitypen wie reine Textdateien (*.txt) kann der Web-Browser selbst anzeigen.
Moderne Web-Browser haben eine Plug-In-Schnittstelle. Wenn der Anwender ein Plug-In zur
Darstellung des Dateityps besitzt, kann der Browser die Datei mit Hilfe des Plug-Ins selbst anzeigen bzw. abspielen. Wenn der Anwender ein Programm besitzt, das den Dateityp verarbeiten
kann, und dem Web-Browser ist die Verknpfung zwischen Dateien mit der Endung des Verweisziels und einem Programm bekannt, das solche Dateien verarbeitet, dann kann der Browser
das Programm starten. Wenn das Betriebssystem, der Web-Browser und das andere Programm
den dynamischen Datenaustausch zwischen Programmen erlauben, kann das Anzeigefenster des
Fremdprogramms in das Browser-Fenster eingebettet werden. Es gibt jedoch keine Mglichkeit,
solche Dinge in irgendeiner Weise als Web-Autor zu beeinflussen. Wenn der Browser mit dem
Dateityp gar nichts anfangen kann, sollte er dem Anwender einen Dialog anbieten, um zu
entscheiden, was mit der Datei geschehen soll. Der Anwender sollte die Datei z.B. downloaden
knnen (siehe Bild 6.6).

6.5.3

Mime-Type des Verweisziels angeben

Um dem Browser die Aufgabe zu erleichtern, zu erkennen, um welche Art von Datei es sich
handelt, knnen Sie den Mime-Type der Datei angeben, auf die Sie verweisen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Stuff mit Typ</h1>
<p><a href="einsundeins.xls" type="application/msexcel"><b>einsundeins.xls</b></a><br>

208

Kapitel 6: Verweise

Eine Excel-Datei</p>
</body>
</html>

Mit dem zustzlichen Attribut type= knnen Sie den Mime-Type der Zieldatei bestimmen, im
obigen Beispiel application/msexcel fr Excel-Dateien.

6.6
6.6.1

Typisierte Verweise
Logische Beziehung zum Verweisziel angeben

Ein Feature, das Hypertext-Enthusiasten an HTML bislang vermisst haben, ist seit HTML 4.0
Bestandteil der Sprache. Sie knnen bei einem Verweis angeben, in welcher logischen Beziehung
er zu seinem Verweisziel steht. Dazu gibt es eine Reihe vorgegebener Beziehungstypen. Ein
Browser knnte beispielsweise beim berfahren des Verweises mit der Maus ein kleines Icon
anzeigen, welches das Verweisziel symbolisiert. Doch weder Netscape noch der Internet Explorer
bieten etwas Derartiges bislang an. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<div style="width:100%; background-color:#EEEEEE; padding:5px">
<a href="../../../index.htm" rev="contents">Inhalt</a> |
<a href="../tastatur.htm" rel="next">weiter</a> |
<a href="../dateitypen.htm" rel="prev">zur&uuml;ck</a> |
<a href="../index.htm" rev="chapter">zum Kapitelanfang</a>
</div>
<h1>Viel Information</h1>
<p>Hoffentlich nicht zu viel...</p>
</body>
</html>

Mit dem Attribut rel= bestimmen Sie eine logische Vorwrtsbeziehung zum Verweisziel, mit
rev= eine logische Rckwrtsbeziehung (rel = relation = Bezug, rev = reverse = Umkehr). Beide
Angaben sind nur in Verbindung mit dem Attribut href= sinnvoll dort geben Sie wie blich
das eigentliche Verweisziel an. Im obigen Beispiel werden diese Attribute auf Verweise einer
typischen Navigationsleiste angewendet. Die Navigationsleiste im Beispiel wird mit Hilfe von
CSS Stylesheets gestaltet. Folgende logische Bezge knnen Sie angeben:

6.6 Typisierte Verweise

209

Schreibweise

Bedeutung

rel="contents"

Verweis zum Inhaltsverzeichnis (contents = Inhaltsverzeichnis)

Rckverweis zum Inhaltsverzeichnis
Verweis zum Kapitel (chapter = Kapitel)
Rckverweis zum Kapitel
Verweis zum Abschnitt (section = Abschnitt)
Rckverweis zum Abschnitt
Verweis zum Unterabschnitt (subsection = Unterabschnitt)
Rckverweis zum Unterabschnitt
Verweis zum Stichwortverzeichnis
Rckverweis zum Stichwortverzeichnis
Verweis zum Glossar
Rckverweis zum Glossar
Verweis zum Anhang (appendix = Anhang)
Rckverweis zum Anhang
Verweis zur Copyright-Angabe
Rckverweis zur Copyright-Angabe
Verweis zur nchsten Datei in der Guided tour (next = nchste Seite)
Rckverweis zur nchsten Datei
Verweis zur vorherigen Datei in der Guided tour (prev = previous = vorherige Seite)
Rckverweis zur vorherigen Datei
Verweis zur ersten Datei in der Guided tour (start = erste Seite)
Rckverweis zur ersten Datei
Verweis zum Hilfekontext (help = Hilfe)
Rckverweis zum Hilfekontext
Verweis zu einem allgemeinen Orientierungspunkt (bookmark = Lesezeichen)
Rckverweis zu einem allgemeinen Orientierungspunkt
Verweis zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in einer
anderen Dokumentversion (alternate = alternierend).
Rckverweis zu einer Datei mit dem gleichen Inhalt wie der aktuellen, jedoch in
einer anderen Dokumentversion

rev="contents"
rel="chapter"
rev="chapter"
rel="section"
rev="section"
rel="subsection"
rev="subsection"
rel="index"
rev="index"
rel="glossary"
rev="glossary"
rel="appendix"
rev="appendix"
rel="copyright"
rev="copyright"
rel="next"
rev="next"
rel="prev"
rev="prev"
rel="start"
rev="start"
rel="help"
rev="help"
rel="bookmark"
rev="bookmark"
rel="alternate"
rev="alternate"

6.6.2

Sprache und Zeichensatz des Verweisziels angeben

Sie knnen auch angeben, in welcher Landessprache das Verweisziel geschrieben ist und welchen
Zeichensatz die Zieldatei benutzt. Die Angabe zur Landessprache kann fr den Anwender ein
ntzlicher Hinweis sein. Die Angabe zum Zeichensatz ist interessant, um den Browser schon mal
innerlich auf die Internationalisierungshrden vorzubereiten, die ihn beim Verweisziel erwarten.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>

210

Kapitel 6: Verweise

</head>
<body>
<h1>Aus der weiten Welt</h1>
<p><a href="http://www.asharqalawsat.com/" hreflang="ar" charset="ISO-88596">Asharq Al-Awsat</a><br>
Saudi-Arabische Zeitung in arabischer Sprache</p>
</body>
</html>

Mit dem Attribut hreflang= knnen Sie die Sprache angeben (hreflang = hyper reference language = Verweiszielsprache), und zwar in Form eines Sprachenkrzels (Anhang A.3). Im obigen
Beispiel wird ar fr arabisch angegeben.
Mit charset= knnen Sie den Zeichensatz angeben, der auf der Zieladresse verwendet wird
(charset = Zeichensatz). Erlaubt sind Zeichensatzangaben, wie sie auf der Web-Adresse
http://www.iana.org/assignments/character-sets angegeben sind. Mehr zu diesem Thema finden
Sie innerhalb dieser Dokumentation bei Zeichenstzen (ISO-8859-Familie und andere) im
Anhang. Im obigen Beispiel wird ISO-8859-6 angegeben das ist der ISO-Zeichensatz fr
arabische Schrift.
Beachten Sie: Ob und wie ein Browser solche Angaben fr den Anwender sichtbar macht, ist
nicht festgelegt. Ein Browser knnte beispielsweise beim berfahren des Verweises mit der Maus
ein kleines Flaggen-Icon anzeigen, das die Landessprache symbolisiert. Bei der Angabe zum
Zeichensatz knnte der Browser beim Anklicken des Verweises beispielsweise eine Warnung
ausgeben, dass der Zeichensatz auf dem Anwender nicht verfgbar ist, und ihn in einem Dialog
fragen, ob er den Verweis wirklich ausfhren will. Weder Netscape noch MS Internet Explorer
bieten etwas Derartiges bislang an.

6.7
6.7.1

Tabulator-Reihenfolge und Tastaturkrzel

Tabulator-Reihenfolge fr Verweise

Modernere Browser erlauben es, mit Hilfe der Tabulator-Taste an der Tastatur nacheinander die
Verweise einer HTML-Datei anzuspringen (mit der Return-Taste ist der Verweis dann ausfhrbar). Normalerweise werden die Verweise dabei in der Reihenfolge angesprungen, in der sie in
der Datei definiert sind. Sie knnen in HTML jedoch eine andere Reihenfolge festlegen, zum
Beispiel, um beim Anspringen von Verweisen zuerst Projektverweise und erst dann Verweise zu
anderen WWW-Seiten anzubieten. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

6.7 Tabulator-Reihenfolge und Tastaturkrzel

211

<h1>Steppen Sie mal mit [Tab] durch</h1>

<p>
<a href="http://german.imdb.com/" tabindex="4">
Movie Database
</a><br>
<a href="http://www.chart-lyrics.com/" tabindex="2">
Chart Lyrics
</a><br>
<a href="http://www.meinestadt.de/" tabindex="1">
Meine Stadt
</a><br>
<a href="http://www.paperball.de/" tabindex="3">
Paperball
</a>
</p>
</body>
</html>

Mit dem Attribut tabindex= im einleitenden Verweis-Tag knnen Sie Angaben zur Tabulatorreihenfolge machen. Notieren Sie die Angabe in allen Verweisen und vergeben Sie bei jeder
Angabe eine Zahl. Beim Anspringen der Verweise mit der Tabulator-Taste wird zuerst der Verweis mit der niedrigsten Tabindex-Nummer angesprungen, dann der mit der zweitniedrigsten
usw. und als Letztes der Verweis mit der hchsten Tabindex-Nummer. Im obigen Beispiel wird
also zuerst der dritte Verweis angesprungen, dann der zweite, dann der vierte und zuletzt der
erste. Es sind Zahlen zwischen 0 und 32767 erlaubt.
Beachten Sie: Die Tabindizes beziehen sich stets auf die gesamte angezeigte Datei. Dabei werden
auch Formulare, Verweisbereiche in verweissensitiven Grafiken und Objekte mit einbezogen.
Wenn Sie auer normalen Verweisen auch solche Elemente in Ihrer Datei haben, sollten Sie die
Tabulator-Reihenfolge fr alle Elemente gemeinsam festlegen. Siehe auch Tabulator-Reihenfolge
bei Formularen in Kapitel 10.9.1.

6.7.2

Tastaturkrzel fr Verweise

Sie knnen dem Anwender anbieten, mit einem Tastendruck zu einem bestimmten Verweis zu
springen. Der Verweis wird damit angesprungen ausgefhrt werden kann er anschlieend
durch Bettigen der Return-Taste. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Greifen Sie in die Tasten!</h1>

212

Kapitel 6: Verweise

<p>
<a href="http://www.teamone.de/" accesskey="t">
TeamOne
</a> [Alt]+[t]<br>
<a href="http://www.polylog.org/" accesskey="p">
Polylog
</a> [Alt]+[p]<br>
<a href="http://www.willy-online.de/" accesskey="w">
Willy online
</a> [Alt]+[w]
</p>
</body>
</html>

6.7:

Wenn Sie Links Tastaturkrzel zuweisen, sollten Sie diese deutlich auf der Web-Seite
notieren.

Mit dem Attribut accesskey= im einleitenden Verweis-Tag knnen Sie ein Zeichen auf der
Tastatur bestimmen, das der Anwender drcken kann, um den Verweis direkt anzuspringen
(accesskey = Zugriffstaste). Bei den meisten Browsern ist es so geregelt, dass Sie bei accesskey=
einen Buchstaben angeben knnen, der dann mit [Alt] und der Taste fr den Buchstaben direkt
anwhlbar ist.
Beachten Sie: Benutzen Sie Tasten, die auf jeder Tastatur zu finden sind. Funktionstasten etwa,
wie es sie auf MF-II-Tastaturen fr MS Windows gibt, knnen Sie mit dieser Angabe gar nicht
ansprechen. Weisen Sie den Anwender im Text auf die Mglichkeit des Tastaturzugriffs hin.
Benutzen Sie dann auch einheitliche Tastaturkrzel, beispielsweise auf jeder Seite ein h fr den
Rckverweis zur Homepage.

213

7.1

Grafiken

Grafiken einbinden

7.1.1 Allgemeines zu Grafiken

Um Grafiken in Ihre Web-Seiten einzubinden, referenzieren Sie die Grafikdateien an gewnschten Stellen im HTML-Quelltext. Geeignete Dateiformate fr webgerechte Grafiken sind
vor allem GIF und JPEG, allmhlich aber auch PNG (Einzelheiten zu diesen Formaten siehe
Grafikformate fr Web-Seiten, Kapitel 24.1).
Wenn Sie HTML-Dateien frs Web erstellen, sollten Sie darauf achten, dass die darin referenzierten Grafiken nicht zu gro sind, denn aufwndige Grafiken verursachen lange Ladezeiten
und Missmut beim Anwender. Reduzieren Sie in Ihren Grafiken gegebenenfalls die Anzahl der
Farben, verringern Sie die Bildgre und stopfen Sie nicht zu viele Grafikreferenzen in eine
einzige HTML-Datei. In jedem Fall sollten Sie Breite und Hhe des Bildes mit angeben.
Grafiken sind aus HTML-Sicht Inline-Elemente. In der Strict-Variante von HTML mssen
solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder
einem allgemeinen Bereich oder auch einer Tabellenzelle. Unter grafischen Benutzeroberflchen
wie MS-Windows, Macintosh, KDE und anderen knnen Web-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Web-Browser fr textorientierte Oberflchen (z.B. DOSTextmodus, Unix-Textmodus) mssen ein separates Grafik-Betrachtungsprogramm aufrufen,
um eine Grafik anzuzeigen.
Wenn Sie wichtige HTML-Dateien Ihres Web-Projekts, etwa die Einstiegsseite, vollstndig grafisch gestalten, also fast keinen Text, dafr nur Grafikreferenzen verwenden, erschweren Sie
automatischen Suchprogrammen, die von vielen Suchdiensten im Web eingesetzt werden, die
Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall mssen Sie abwgen, was Ihnen wichtiger ist: das grafische Erscheinungsbild oder die inhaltliche Identifizierbarkeit. Falls Sie wichtige
HTML-Dateien Ihres Web-Projekts vorwiegend durch Grafikreferenzen gestalten, sollten Sie
zumindest die Mglichkeit der Meta-Angaben zum Inhalt (Kapitel 4.1.2) nutzen.

7.1.2

Grafikreferenz definieren

An einer gewnschten Stelle knnen Sie eine Grafik referenzieren. Referenzieren bedeutet, dass
Sie den Dateinamen in einem Tag eintragen, damit der Browser wei, welche Bilddatei er anzeigen soll. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

214

Kapitel 7: Grafiken

<title>Text des Titels</title>

</head>
<body>
<h1>Tanzmaus</h1>
<p><img src="tanzmaus.gif" alt="Tanzmaus"></p>
</body>
</html>

7.1: Das obige Beispiel referenziert eine Bilddatei und bindet sie damit in eine Web-Seite ein.

Fr Grafikreferenzen gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle).
Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von
Attributen bestimmen Sie nhere Einzelheiten der Grafikreferenz. Zwei Attribute sind Pflicht
und mssen immer angegeben werden:
Mit dem Attribut src= bestimmen Sie die gewnschte Grafikdatei. Dabei gelten die Regeln
zum Referenzieren in HTML (Kapitel 3.7). Wenn sich die Grafikdatei also beispielsweise im
gleichen Verzeichnis wie die HTML-Datei befindet, in der die Grafikreferenz steht, dann
gengt einfach die Angabe des Dateinamens der Grafik so wie im obigen Beispiel. Das
Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso mglich, z.B.:
<img src="verzeichnis/datei.gif" alt="Grafik">
<img src="verzeichnis/unterverz/datei.gif" alt="Grafik">
<img src="../datei.gif alt="Grafik"">
<img src="../../../datei.gif" alt="Grafik">
<img src="../woanders/datei.gif" alt="Grafik">

Auch das Referenzieren von einem vollstndigen URI ist mglich, z.B.:
<img src="http://www.teamone.de/training/taggi01.gif" alt="Taggi">

7.1 Grafiken einbinden

215

Beim Attribut alt= geben Sie einen Alternativtext an fr den Fall, dass die Grafik nicht angezeigt werden kann. Es gibt viele Grnde, warum eine Grafik nicht angezeigt werden kann, z.B.
weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat oder weil der
Anwender das Laden der Seite abgebrochen hat, bevor die Grafik bertragen wurde. Der
Alternativtext kann ein einzelnes Wort sein, aber auch eine Kurzbeschreibung, etwa so:
<img src="luftbild.jpg alt="Luftaufnahme des Grundst&uuml;cks vom 27.05.2001
aus ca. 300m H&ouml;he">
Das alt-Attribut ist nach HTML-Standard Pflicht. Wenn Sie aus irgendwelchen Grnden

keinen Alternativtext notieren wollen, z.B. weil es sich bei der Grafik um einen so genannten
blinden Pixel handelt, dann notieren Sie alt="" also eine leere Zeichenkette als Zuweisung.
Beachten Sie: Sie knnen also ohne weiteres Grafiken von fremden Adressen in Ihre Seiten einbinden. Fragen Sie in diesem Fall jedoch unbedingt den Anbieter der Grafik um Erlaubnis, denn
das Einbinden von Grafiken ist im Gegensatz zu Verweisen auf fremde Inhalte ein Zueigenmachen von fremden Inhalten. Auch besteht keine Garantie, dass die Grafikreferenz jederzeit bis
in alle Zukunft funktioniert, denn wenn der Fremdanbieter die Grafik bei sich entfernt oder
umbenennt, wird auf Ihrer Seite nur noch ein so genanntes broken image angezeigt.

7.2:

Kann der Browser die Bilddatei nicht finden oder anzeigen, so erscheint statt dessen ein
Fehlerbild (hier im Internet Explorer).

Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Gro-/Kleinschreibung
von Dateinamen und Verzeichnisnamen. Die meisten Server-Rechner laufen mit Betriebssystemen, bei denen streng zwischen Gro- und Kleinschreibung unterschieden wird. Am einfachsten und sichersten ist es, wenn Sie alle Datei- und Verzeichnisnamen kleinschreiben sowohl beim Vergeben der Namen als auch beim Referenzieren in der HTML-Datei.
Netscape interpretiert ein proprietres Attribut lowsrc=, das Sie zustzlich zum src-Attribut
notieren knnen und bei dem Sie eine Grafikdatei angeben, die weniger Speicher bentigt als die
bei src= referenzierte Grafik. Die lowsrc-Grafik ldt der Browser dann zuerst und kann sie
schon anzeigen, whrend die andere Grafik noch geladen wird. Dieses Attribut erzeugt jedoch
ungltiges HTML und hat sich in der Praxis auch als berflssig erwiesen.
Wenn Sie XHTML-konform arbeiten, mssen Sie das img-Element als inhaltsleer kennzeichnen.
Dazu notieren Sie das allein stehende Tag in der Form <img... />. Weitere Informationen dazu
im Kapitel 14.1.11 ber XHTML und HTML.

216

Kapitel 7: Grafiken

7.1.3

Breite und Hhe von Grafiken

Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie
stets die Breite und Hhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits
der HTML-Datei, wie gro die Grafik ist, und muss nicht warten, bis er die entsprechende
Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits
am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend
groe Freiflche anzeigen. Wenn Sie Breite und Hhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle ntigen Grenangaben aus eingebundenen
Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr
schn aussieht. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Tanzb&auml;r</h1>
<p><img src="tanzbaer.gif"
width="368" height="383" alt="Tanzb&auml;r"></p>
</body>
</html>

Mit dem Attribut width= [Pixel] geben Sie die Breite der Grafik an, und mit height= [Pixel] die
Hhe (width = Breite, height = Hhe). Um die genaue Breite und Hhe einer Grafik zu ermitteln,
brauchen Sie entweder ein Grafikprogramm, das diese Werte anzeigt, oder einen HTML-Editor,
der beim Einbinden einer Grafik im Dialog auch gleich den Dateikopf der Grafik ausliest und die
entsprechenden Angaben in das <img>-Tag automatisch einfgt.
Beachten Sie: Sie knnen auch Angaben zu Breite und Hhe einer Grafik machen, die absichtlich
von den tatschlichen Abmessungen der Grafik abweichen. Dadurch knnen Sie interessante
Verzerrungseffekte erreichen, wie man sie von Cartoons kennt.
Neben Pixelangaben sind bei width= und height= auch Prozentangaben erlaubt. Solche Angaben beziehen sich auf den zur Verfgung stehenden Raum. Wenn sich die Grafik also beispielsweise in einem normalen Textabsatz befindet, bewirkt die Angabe width="100%", dass die
Grafik ber die gesamte Breite des Anzeigefensters (abzglich der Seitenrnder der angezeigten
Web-Seite) dargestellt wird. Die Grafik wird dabei verzerrt. Sinnvoll ist eine Prozentangabe
beispielsweise bei Grafiken, die eine Linie darstellen (vgl. Bars, Kapitel 24.2.3), um diese ber die
gesamte verfgbare Breite zu strecken. Wenn Sie eine Grafik haben, die Sie an anderer Stelle in
kleinerer Form wiederholen mchten (zum Beispiel ein Logo, das auf der Einstiegsseite gro
angezeigt werden soll und auf den Unterseiten kleiner), brauchen Sie keine zwei Grafiken. Es
gengt, wenn Sie, um eine Grafik kleiner darzustellen, die Angaben zu Breite und Hhe
proportional verkleinern. Wenn Ihr Logo beispielsweise die Aumae 300 Pixel breit und 200
Pixel hoch hat, knnen Sie es halb so gro darstellen, indem Sie beim Einbinden der Grafik

7.1 Grafiken einbinden

217

width=150 height=100 angeben. Sinnvoll ist das aber nur, wenn die groe Grafik bereits angezeigt wurde und sich im Cache-Speicher des WWW-Browsers befindet.

7.1.4

Rahmen um Grafiken

Sie knnen festlegen, dass der Browser einen Rahmen um die Grafik zeichnet. Das entsprechende Attribut ist jedoch als deprecated gekennzeichnet und soll knftig aus dem HTMLStandard entfallen. Umrahmung ist auch mit Hilfe von CSS Stylesheets mglich, und dort mit
viel mehr Mglichkeiten.

7.3: ber das Attribut border= weisen Sie einem Bild einen Rahmen zu.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Baum am Abend</h1>
<p><img src="baum.jpg" width="320" height="400"
border="4" alt="Abendbaum"></p>
</body>
</html>

218

Kapitel 7: Grafiken

Mit dem Attribut border= innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke. Die Rahmenfarbe ist diejenige, die Text an der gleichen Stelle haben wrde.

7.1.5

Namen fr Grafiken

Sie knnen festlegen, dass eine Grafik einen Namen erhlt. Dies ist in Verbindung mit JavaScript
sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt images von
Bedeutung sein (Kapitel 19.7). Ein Beispiel:
<p><img src="baum.jpg" width="320" height="400"
name="Baumbild" alt="Abendbaum"></p>

Mit name= vergeben Sie einen Namen fr die Grafik. Der Name sollte nicht zu lang sein und darf
keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein
Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen
hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (_)
enthalten. Gro- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.

7.1.6

Langbeschreibung fr Grafiken

Wenn Ihnen die Mglichkeit, mit alt= einen gewhnlichen Alternativtext fr eine Grafik zu
notieren, nicht gengt, knnen Sie seit HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nhere Textinformation zu der Grafik befindet. Der Browser knnte beispielsweise nur dann einen Verweis zu dieser Stelle anbieten, wenn die Grafik nicht anzeigbar ist. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Alte Zeiten</h1>
<p>
<img src="altezeiten.jpg" width="271" height="265"
alt="alte Zeiten" longdesc="altezeiten.htm">
</p>
</body>
</html>

7.2 Grafiken ausrichten

219

7.4: Der Verweis auf die lange Beschreibung ist bei Netscape ziemlich kompliziert zu erreichen.

Mit dem Attribut longdesc= knnen Sie auf eine Stelle verweisen, wo die Grafik in Textform
nher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum
Referenzieren in HTML.
Beachten Sie: Lediglich Netscape 6.0 untersttzt dieses Attribut bislang, und auch nur sehr
versteckt: mit der rechten Maustaste ber der Grafik klicken, aus dem Kontextmen die Option
Eigenschaften whlen, und in dem Dialog, der dann erscheint, auf die Adresse zu Beschreibung
klicken.

7.2
7.2.1

Grafiken ausrichten
Grafik zum umgebenden Text ausrichten

Da das img-Element ein Inline-Element ist, knnen Grafiken mitten in einem Text platziert
werden. Wenn nun aber die Grafik hher ist als die Zeilenhhe, dann muss der Text der gleichen
Zeile in irgendeiner Weise zur Grafik ausgerichtet werden. Wenn Sie nichts anderes angeben,
wird der Text untenbndig zur Grafik ausgerichtet. Sie knnen jedoch mit Hilfe eines Attributs
selbst bestimmen, wie der Text zur Grafik ausgerichtet werden soll. Dieses Attribut ist allerdings
als deprecated gekennzeichnet und soll knftig aus dem HTML-Standard entfallen. Die gleiche
Wirkung lsst sich nmlich auch mit CSS Stylesheets erzielen.

220

Kapitel 7: Grafiken

7.5: Der Text kann oben, mittig oder unten an einer Grafik ausgerichtet sein.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Woran der Denker denkt</h1>
<p>Denkt der Denker
<img src="denker.gif" width="70" height="137" align="top" alt="Denker">
an das Oben?</p>
<hr>
<p>Denkt der Denker
<img src="denker.gif" width="70" height="137" align="middle" alt="Denker">
an die Mitte?</p>
<hr>
<p>Denkt der Denker

7.2 Grafiken ausrichten

221

<img src="denker.gif" width="70" height="137" align="bottom" alt="Denker">

an das Unten?</p>
</body>
</html>

Das Beispiel enthlt drei kurze, normalerweise in eine Zeile passende Textabstze, bei denen
jeweils die gleiche Grafik mitten im Text platziert ist. In allen drei Abstzen wird die darin notierte Grafik mit Hilfe von HTML zum Text davor und dahinter ausgerichtet.
Mit dem HTML-Attribut align= im <img>-Tag knnen Sie Text in der gleichen Zeile zur Grafik
ausrichten (align = Ausrichtung):
Mit align="top" wird der Text obenbndig zur Grafik ausgerichtet (top = oben).
Mit align="middle" wird der Text mittig zur Grafik ausgerichtet (middle = mittig).
Mit align="bottom" wird der Text untenbndig zur Grafik ausgerichtet (bottom = unten).
Beachten Sie: Die Browser interpretieren zum Teil noch weitere Angaben. Diese sind jedoch
nicht im HTML-Standard verzeichnet und fhren deshalb zu ungltigem HTML. Erwhnt seien
sie trotzdem:
Mit align="texttop" richten Sie den Text obenbndig zur Grafik aus, und zwar an der
Oberkante des kleinsten Textes in der Zeile (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zur Grafik aus, auch bei unterschiedlichen Textgren (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbndig zur Grafik aus, und zwar an der
Unterkante des kleinsten Textes in der Zeile (absbottom = absolute bottom = in jedem Fall
untenbndig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe
align="bottom". Benutzen Sie deshalb besser die Standardangabe.

7.2.2

Text um Grafik flieen lassen

Grafiken, die Sie mit dem <img>-Tag referenzieren, knnen Sie links oder rechts ausrichten. Der
umgebende Text fliet dabei um die Grafik. Mit zwei weiteren Attributen knnen Sie Abstand
zum umflieenden Text erzeugen, damit der Text nicht direkt an der Grafik klebt. Den
automatischen Textumfluss knnen Sie auch abbrechen und die Textfortsetzung unterhalb der
Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet
und sollen knftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lsst sich nmlich
auch mit CSS Stylesheets erzielen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>

222

Kapitel 7: Grafiken

<body>
<h1><img src="text.gif" width="311" height="194"
align="left" vspace="10" hspace="20" alt="Text?">
Ein Text
</h1>
<p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz.
<!-- usw. -->
Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar, n&auml;mlich um
die
Grafik.<br clear="all"></p>
</body>
</html>

7.6: Der Text fliet rechts um das Bild.

Mit align="left" richten Sie eine Grafik linksbndig aus. Nachfolgend notierter Text fliet rechts
um die Grafik. Mit align="right" knnen Sie die Grafik rechtsbndig ausrichten. Der
nachfolgend notierte Text fliet dann links um die Grafik. Von nachfolgend notiertem Text wird
hier nur der Einfachheit halber gesprochen. Es kann sich um beliebige Elemente handeln, also z.B.
auch andere Grafiken, Tabellen, Multimedia-Referenzen usw. Um Abstand zwischen Grafik und
umflieendem Text zu erzeugen, stehen die Attribute hspace= und vspace= zur Verfgung:
Mit hspace= [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen
links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace= [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen
darber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace= betrifft immer den linken und den rechten Randabstand von der Grafik,
vspace= immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei

7.2 Grafiken ausrichten

223

einer links ausgerichteten Grafik hspace= definieren, wird nicht nur rechts der Grafik zum
nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters
hin. Um dies zu verhindern, knnen Sie exakter arbeiten, indem Sie CSS Stylesheets verwenden.
Sie knnen beide Attribute notieren oder auch nur eines davon. Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb der Grafik angezeigt
wird, knnen Sie einen Zeilenumbruch (Kapitel 5.3) mit dem Attribut clear= notieren:
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nchsten Zeile in jedem Fall
unterhalb der Grafik fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nchsten Zeile unterhalb
einer linksbndig ausgerichteten Grafik fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nchsten Zeile unterhalb
einer rechtsbndig ausgerichteten Grafik fortgesetzt wird.

7.2.3

Grafik und andere Inhalte mit Tabellen ausrichten

In der Praxis kommt es hufig vor, dass Sie Grafiken sauber nebeneinander oder untereinander
platzieren und mit Text beschriften wollen. In solchen Fllen bietet sich das Arbeiten mit blinden, also unsichtbaren Tabellen an. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<div align="center">
<table border="0" cellpadding="4" width="600">
<tr>
<th><h3>Schadenfreude</h3></th>
<th><h3>Erstaunen</h3></th>
<th><h3>Skepsis</h3></th>
<th><h3>Betretenheit</h3></th>
</tr><tr>
<td align="center"><img src="ausdruck_1.gif" width="100" height="100"
alt="Schadenfreude"></td>
<td align="center"><img src="ausdruck_2.gif" width="100" height="100"
alt="Erstaunen"></td>
<td align="center"><img src="ausdruck_3.gif" width="100" height="100"
alt="Skepsis"></td>
<td align="center"><img src="ausdruck_4.gif" width="100" height="100"
alt="Betretenheit"></td>
</tr><tr>
<td align="center" valign="top">ist die sch&ouml;nste Freude, kann aber Feinde
schaffen</td>

224

Kapitel 7: Grafiken

<td align="center" valign="top">gebar die Philosophie und wird von Rechthabern

immer wieder untersch&auml;tzt</td>
<td align="center" valign="top">ist bisweilen angebracht, sollte aber nicht das
weitere Dazulernen behindern</td>
<td align="center" valign="top">ist sehr unangenehm, w&auml;hrt aber nicht
ewig</td>
</tr>
</table>
</div>
</body>
</html>

7.7: Eine unsichtbare Tabelle richtet Bilder und Text sauber neben- und untereinander aus.

Im Beispiel wird eine blinde Tabelle (border="0") mit vier Spalten definiert. In der ersten Zeile
stehen vier berschriften, in der zweiten vier entsprechende Grafiken und in der dritten vier
zugehrige Texte. Die Tabelle ist innerhalb eines allgemeinen Bereichs zentriert ausgerichtet
(<div align="center">...</div>) und hat eine Breite von 600 Pixeln. Mit cellpadding="4"
im einleitenden <table>-Tag wird sichergestellt, dass sich die Zelleninhalte nicht zu nahe
kommen. Mit align="center" werden die Datenzellen zentriert ausgerichtet. Da die Beschriebungstexte unterschiedlich lang sein knnen, wird mit valign="top" in deren Datenzellen
erreicht, dass sie alle obenbndig ausgerichtet werden.

7.2.4

Grafiken ausrichten mit CSS Stylesheets

CSS Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen, Grafik zum
umgebenden Text ausrichten und Text um Grafik flieen lassen, ebenso realisierbar sind wie mit
HTML. Das Fein-Tuning ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS mssen Sie
arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der
HTML-Variante Strict arbeiten wollen. Mageblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: vertical-align (Vertikale Ausrichtung), float (Textumfluss),
clear (Fortsetzung bei Textumfluss), Auenrand und Abstand.

7.2 Grafiken ausrichten

7.8: CSS Stylesheets machen die HTML-Attribute zur Ausrichtung von Grafiken berflssig.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Woran der Denker denkt</h1>
<p>Denkt der Denker
<img src="denker.gif" width="70" height="137" style="vertical-align:text-top"
alt="Denker">
an das Oben?</p>
<hr>

225

226

Kapitel 7: Grafiken

<p>Denkt der Denker

<img src="denker.gif" width="70" height="137" style="vertical-align:middle"
alt="Denker">
an die Mitte?</p>
<hr>
<p>Denkt der Denker
<img src="denker.gif" width="70" height="137" style="vertical-align:text-bottom"
alt="Denker">
an das Unten?</p>
<hr>
<h2><img src="text.gif" width="311" height="194" style="float:left; marginright:20px;
margin-bottom:10px" alt="Text?">Oder denkt er an ...?</h2>
<p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz.
<!-- usw. -->
Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar,
n&auml;mlich um die Grafik.<br style="clear:all"></p>
</body>
</html>

7.9: Netscape 4.x steht mit vielen CSS-Angaben auf Kriegsfu.

7.3 Grafiken als Verweise

227

Mit style="vertical-align:text-top" erreichen Sie in einem <img>-Tag das Gleiche wie

mit align="top", mit style="vertical-align:middle" das Gleiche wie mit align=
"middle", und mit style="vertical-align:text-bottom" das Gleiche wie mit align=
"bottom".
Mit style="float:left; margin-right:20px; margin-bottom:10px" wird erreicht, dass
die Grafik links ausgerichtet wird und nachfolgender Text rechts um die Grafik fliet. Dabei wird
zwischen Grafik und Text ein Abstand von 20 Pixeln gehalten (links von der Grafik wird dagegen, anders als beim HTML-Attribut hspace=, kein Abstand von 20 Pixeln erzeugt). Nach unten
hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.
Beachten Sie: Netscape 4.x zerwrfelt die Anzeige dieses Beispiels aufs belste. Das ist leider ein
typisches Beispiel dafr, wie Netscape 4.x die Entwicklung hin zu standardkonformerem Arbeiten ausbremst.

7.3
7.3.1

Grafiken als Verweise

Grafiken anstelle von Verweistext definieren

Wenn Sie Verweise setzen, mssen Sie immer auch einen Verweistext definieren, also den Text,
der dem Anwender als anklickbar dargestellt wird. Anstelle eines Verweistextes knnen Sie jedoch auch eine Grafikreferenz notieren. Dann ist die gesamte Grafik anklickbar, und beim Anklicken der Grafik wird der Verweis ausgefhrt. Von dieser Mglichkeit wird in der Praxis sehr
oft Gebrauch gemacht, bei Werbebannern zum Beispiel, aber auch bei grafischen Navigationsleisten. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td><a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0"
alt="HOME"></a></td>
<td><a href="seite.htm"><img src="button2.jpg" width="160" height="34" border="0"
alt="ZUR&Uuml;CK"></a></td>
<td><a href="seite.htm"><img src="button3.jpg" width="160" height="34" border="0"
alt="WEITER"></a></td>
<td><a href="thema.htm"><img src="button4.jpg" width="160" height="34" border="0"
alt="THEMA"></a></td>
</tr></table>
<h1>Navigationsleisten</h1>
<p>Was w&auml;re das Web ohne sie!</p>

228

Kapitel 7: Grafiken

</body>
</html>

Das Beispiel zeigt eine horizontale Navigationsleiste. Die vier Buttons der Leiste liegen in Form
der Grafiken button1.jpg bis button4.jpg vor. Alle Grafiken sind gleich gro und haben ein einheitliches Aussehen. Sie unterscheiden sich lediglich durch die Beschriftung. Damit die Buttons
sauber nebeneinanderliegen und nicht umbrochen werden knnen, wird eine blinde Tabelle
(border="0") dafr notiert. Mit cellpadding="0" und cellspacing="0" wird in der Tabelle
dafr gesorgt, dass die Zellen nahtlos aneinanderliegen und keinen Innenabstand haben. So
grenzen die darin enthaltenen Grafiken nahtlos aneinander und erzeugen den Effekt einer Leiste.
Definiert wird eine Zeile mit vier Zellen. In jeder der Zellen wird ein Verweis notiert. Zwischen <a
href=""> und </a> wird jedoch kein Verweistext notiert, sondern die Grafikreferenz fr je einen
der Buttons. Auf diese Weise wird die jeweilige Grafik anklickbar und fhrt beim Anklicken zu dem
Ziel, das bei href= notiert ist. Wichtig ist auch die Angabe border="0" in den Grafikreferenzen
(siehe auch Rahmen um Grafiken, Kapitel 7.1.4). Wrde diese Angabe fehlen, dann wrde der
Browser einen Rahmen um die Grafik anzeigen, und zwar in der Farbe fr Verweise, um diese als
Verweis zu kennzeichnen. Da die Buttons im Beispiel aber fr den Anwender eindeutig als Grafiken
mit Verweisfunktion identifizierbar sind, wird der Rahmen unterdrckt.
Wenn Sie mit border="0" den Rahmen um eine als Verweis dienende Grafik unterdrcken,
kann der Anwender die Grafik nicht mehr unmittelbar als Verweis erkennen. Nur wenn er mit
dem Mauszeiger ber die Grafik fhrt, kann er an dem Mauszeigersymbol erkennen, dass es sich
um einen Verweis handelt. Deshalb sollten Sie den verweiskennzeichnenden Rahmen nur dann
unterdrcken, wenn die Grafik auf den ersten Blick als Verweis erkennbar ist.
Wegen der Angabe border="0" benutzt das obige Beispiel die HTML-Variante Transitional,
denn das border-Attribut ist im HTML-Standard als deprecated gekennzeichnet. Mit einem
zentralen CSS-Format img {border:none} wre dieses Problem allerdings elegant zu umgehen,
und in allen <img>-Tags innerhalb von Verweisen knnte auf das border-Attribut verzichtet
werden. Bei nicht CSS-fhigen Browsern wrde dann aber doch der Rahmen angezeigt.
Nur zum Verstndnis: Am obigen Anzeigebeispiel sind in Wirklichkeit vier Dateien beteiligt, die
alle den gleichen Aufbau und immer an der gleichen Stelle die Navigationsleiste haben. Nur sind
die anklickbaren Grafiken in jeder der Dateien mit unterschiedlichen Verweiszielen verknpft.
Damit zeigt das Beispiel, wie sich mit verschiedenen Dateien, die ein einheitliches Layout und die
Navigationsleiste stets an der gleichen Stelle haben, ein in sich geschlossenes Web-Projekt realisieren lsst.

7.4
7.4.1

Verweissensitive Grafiken (Image Maps)

Verweissensitive Grafiken definieren

Verweissensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail
klicken kann. Daraufhin wird ein Verweis ausgefhrt. Auf diese Weise kann der Anwender in
einigen Fllen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten. Ein Beispiel:

7.4 Verweissensitive Grafiken (Image Maps)

229

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>
<map name="Landkarte">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/"
alt="Koblenz">
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/"
alt="Wiesbaden">
<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz">
<area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/"
alt="Frankfurt">
<area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/"
alt="Mannheim">
<area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/"
alt="Heidelberg">
<area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/"
alt="W&uuml;rzburg">
<area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/"
alt="Bamberg">
<area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/"
alt="N&uuml;rnberg">
<area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/"
alt="Karlsruhe">
<area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/"
alt="Heilbronn">
<area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/"
alt="Stuttgart">
<area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
<area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/"
alt="Augsburg">
<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
href="http://www.baden-aktuell.de/" alt="Baden">
</map>
<p><img src="karte.gif" width="345" height="312" border="0" alt="Karte"
usemap="#Landkarte"></p>
</body>
</html>

Mit <map name="[Name]"> leiten Sie die Definition der verweissensitiven Flchen einer Grafik
ein. Beim name-Attribut vergeben Sie einen Namen fr die verweissensitive Grafik. Dieser Name

230

Kapitel 7: Grafiken

muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen
Ankernamen, der die gleiche Bedeutung hat wie der Name in einem Anker innerhalb einer
HTML-Datei (Kapitel 6.2.2). Vergeben Sie keine zu langen Namen. Namen drfen keine
Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein.
Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen hchstens den
Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Das map-Element kann an einer beliebigen Stelle innerhalb des Krpers einer HTML-Datei (also
zwischen <body> und </body>) stehen. Es erzeugt selbst keine Bildschirmausgabe. Es empfiehlt
sich jedoch, das Element an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren,
z.B. am Anfang oder am Ende des Dateikrpers.
Zwischen dem einleitenden <map...> und dem abschlieenden </map> definieren Sie die
verweissensitiven Flchen. Mit <area...> definieren Sie einzelne verweissensitive Flchen einer
bestimmten Grafik, die Sie an einer anderen Stelle einbinden. Mit shape="rect" bestimmen Sie
eine viereckige Flche, mit shape="circle" einen Kreis, und mit shape="polygon" knnen Sie
ein beliebiges Vieleck als verweissensitiv definieren. Bei coords= geben Sie die Koordinaten der
verweissensitiven Flchen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik,
die verweissensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.

7.10:

ber ausgewhlten Stdten verwandelt sich der Mauszeiger in das typische Hand-Symbol,
das einen Link anzeigt.

Ein Viereck (shape="rect") definieren Sie mit den Koordinaten fr x1,y1,x2,y2, wobei bedeuten:
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben

7.4 Verweissensitive Grafiken (Image Maps)

231

x2 = rechte untere Ecke, Pixel von links

y2 = rechte untere Ecke, Pixel von oben
Einen Kreis (shape="circle") definieren Sie mit den Koordinaten fr x,y,r, wobei bedeuten:
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel
Ein Polygon (shape="polygon", Vieleck) definieren Sie mit den Koordinaten x1,y1,x2,y2 ...
xn,yn, wobei bedeuten:
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Sie knnen so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke mssen
Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schliet das Polygon.
Mit dem Attribut href= bestimmen Sie das Verweisziel, das aufgerufen werden soll, wenn der
Anwender die verweissensitive Flche anklickt. Dabei gelten die Regeln zum Referenzieren in
HTML es kann sich also um beliebige Verweisziele innerhalb oder auerhalb des eigenen WebProjekts handeln. Wenn Sie eine Flche explizit als nicht anklickbar ausweisen wollen, knnen
Sie dies mit dem Attribut nohref tun (ohne Wertzuweisung). Ntig ist dies allerdings nicht,
denn Flchen, die nicht durch href= abgedeckt sind, sind automatisch nicht anklickbar.
Mit dem alt-Attribut notieren Sie Alternativtext fr den Fall, dass die verweissensitive Flche
nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie mssen es notieren,
um gltiges HTML zu erzeugen.
Die Grafik, die verweissensitive Flchen haben soll, referenzieren Sie auf herkmmliche Weise
mit Hilfe des <img>-Tags. Um die Grafik als verweissensitiv zu kennzeichnen, mssen Sie das
Attribut usemap= notieren. Dieses Attribut erwartet als Wertzuweisung einen URI, der zu der
Stelle fhrt, an der das zugehrige map-Element notiert ist. Normalerweise ist dieses Element in
der gleichen Datei notiert. Deshalb besteht die Zuweisung einfach in einem Gatterzeichen # und
dem Namen des Ankers, der bei <map name=> definiert wurde.
Beachten Sie: Um die gewnschten Pixelkoordinaten fr verweissensitive Flchen einer Grafik zu
erhalten, knnen Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in
der angezeigten Grafik herumfahren knnen und dabei die genauen Pixelkoordinaten des
Mauszeigers angezeigt bekommen.
Um beim berfahren einer verweissensitiven Flche mit der Maus ein kleines Fenster (TooltipFenster) anzuzeigen, knnen Sie in den <area>-Tags jeweils das Universalattribut title=
"Mein angezeigter Text" verwenden. Dies wird allerdings nicht von allen Browsern interpretiert.
Innerhalb eines jeden <area>-Tags ist auch das Attribut tabindex= erlaubt. Die Wirkung ist die
gleiche wie bei der Tabulator-Reihenfolge bei Verweisen (Kapitel 6.7) und wird dort nher
beschrieben. Ebenfalls erlaubt ist das Attribut accesskey=. Dies funktioniert genau wie bei
Tastaturkrzeln fr Verweise und wird in Kapitel 6.7 nher beschrieben.
Wenn Sie XHTML-konform arbeiten, mssen Sie das area-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <area.../>. Weitere Informationen
dazu im Kapitel 14.1.11 ber XHTML und HTML.

232

Kapitel 7: Grafiken

Im <area>-Tag kommen hufig auch JavaScript-Event-Handler zum Einsatz. Beim Aufruf von
JavaScript-Funktionen mit Event-Handlern darf jedoch im <area>-Tag das href-Attribut nicht
fehlen, sonst streikt der Netscape Navigator. Um das Problem zu lsen, knnen Sie eine Angabe
notieren wie:
<area shape="rect" coords="1,1,249,49" href="#" onclick="IhreFunktion()" alt="Kurze
Beschreibung">

Durch die Wertzuweisung "#" an das href-Attribut wird ein leerer Verweis erzeugt, und
Netscape fhrt dann auch den Event-Handler (hier: onClick=) aus.

7.4.2

Server-seitige verweissensitive Grafiken

Bei dieser Methode ist zum Verwalten von verweissensitiven Grafiken eine Kommunikation
zwischen Web-Browser und Web-Server erforderlich. Der Nachteil ist, dass solche verweissensitive Grafiken nicht lokal in jeder Umgebung funktionieren, und dass der Server zustzlich belastet wird. Insgesamt kann diese Methode heute als veraltet gelten und wird hier nur noch der
Vollstndigkeit halber erwhnt.
Das Prinzip funktioniert folgendermaen: Aufgrund eines HTML-Attributs wei der WebBrowser, dass es sich bei einer Grafik um eine verweissensitive Grafik handelt. Wenn der Anwender dann irgendwo auf die angezeigte Grafik klickt, bertrgt der Web-Browser die Pixelkoordinaten des Mausklicks (relativ zur oberen linken Ecke der Grafik) an eine spezielle
Imagemap-Software auf dem Server-Rechner. Diese Software ermittelt, ob die Pixelkoordinaten innerhalb einer als verweissensitiv definierten Flche der Grafik liegen. Wenn ja, ermittelt
die Software, welcher Verweis dieser sensitiven Flche zugeordnet ist. Die entsprechende
Verweisadresse wird dem Web-Browser gesendet. Dieser fhrt den Verweis dann aus.
Wenn Sie eine verweissensitive Grafik nach diesem Schema einsetzen mchten, fragen Sie bei
Ihrem Provider nach, welche Software zum Verarbeiten verweissensitiver Grafiken auf diesem
Server im Einsatz ist und was genau Sie brauchen. In der Regel brauchen Sie eine so genannte
Map-Datei und einen Eintrag in einer Konfigurationsdatei. In der Map-Datei ordnen Sie
verweissensitive Flchen und gewnschte Verweise einander zu. In der Konfigurationsdatei ist
ein Eintrag fr die Server-Software ntig.
Bei der Syntax der Map-Dateien gibt es mehrere Varianten. Fragen Sie gegebenenfalls Ihren
Provider nach Beispieldateien und nach einer Dokumentation zu der von ihm angebotenen
Variante. Das folgende Beispiel zeigt den Teil, den Sie in der HTML-Datei notieren mssen.
<a href="MapName"><img src="datei.gif" ismap alt="Grafik"></a>

Es handelt sich also um eine schlichte Grafik als Verweis. Im Beispiel wird die Datei datei.gif
auf diese Weise notiert. Das <img>-Tag muss das zustzliche Attribut ismap enthalten. Hierdurch wird dem Server-Rechner mitgeteilt, dass es sich um eine verweissensitive Grafik handelt.
Das Ziel des Verweises bei href= ist keine Datei, sondern ein symbolischer Name, der zuvor in
der oben angesprochenen Konfigurationsdatei des Server-Rechners vergeben wurde. Im Beispiel
ist das der symbolische Name "MapName".

233

Tabellen

8.1

Aufbau einer Tabelle

8.1.1

Tabellen definieren

Sie knnen in HTML Tabellen definieren, um tabellarische Daten darzustellen oder um Text
und Grafik attraktiver am Bildschirm zu verteilen. Obwohl Tabellen natrlich vornehmlich zur
Darstellung tabellarischer Daten geschaffen wurden, sind sie in der heutigen Praxis des WebDesigns vor allem als Grundgestaltungsmittel fr Seitenlayouts nicht mehr wegzudenken. Mehr
dazu im Abschnitt 8.6 Tabellen als Mittel fr Web-Seitenlayouts. Puristen, die HTML so weit wie
mglich von gestalterischen Aufgaben befreit sehen wollen, rmpfen darber zwar die Nase, aber
so klar sind die Grenzen zwischen Struktur und Gestaltung nicht immer. Die saubere Verteilung
von Information auf einer Web-Seite ist durchaus ein Aspekt der Strukturierung, obwohl sie
zugleich ein Aspekt der Gestaltung ist. Rein optisch lsst sich also grundstzlich unterscheiden
zwischen Tabellen, die Gitternetzlinien haben (fr tabellarische Daten), und Tabellen ohne
sichtbare Gitternetzlinien (so genannte blinde Tabellen fr mehrspaltigen Text oder fr
saubere Verteilung von Inhalten auf einer Web-Seite).

8.1:

Mit Tabellen prsentieren Sie nicht nur Daten, sondern gestalten das Layout von WebSeiten.

234

Kapitel 8: Tabellen

Das zum Bild gehrige Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Aufbau einer Tabelle</title>
</head>
<body>
<h1>Tabelle mit Gitternetzlinien</h1>
<table border="1">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
<h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>
<table border="0">
<tr>
<td><h2>ARQ</h2></td>
<td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung f&uuml;r
Fehlerprotokolle, die &Uuml;bertragungsfehler erkennt und defekte Bl&ouml;cke
selbst&auml;ndig wiederholt</p></td>
</tr><tr>
<td><h2>HDLC</h2></td>
<td><p>High Level Data Link Control. Ein Standard-Protokoll, das von der Kommission
f&uuml;r internationale Standards f&uuml;r Softwareanwendungen in synchronen
Anlagen verwendet wird.</p></td>
</tr>
</table>
</body>
</html>

8.1 Aufbau einer Tabelle

235

8.2: Die Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen.
<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien
enthalten soll, mssen Sie im einleitenden <table>-Tag das Attribut border= notieren und ihm
einen Wert grer 0 zuweisen. Der angegebene Wert ist dann die Breite des Rahmens in Pixeln.

Um eine blinde Tabelle ohne sichtbaren Rahmen und Gitternetzlinien zu erzeugen, lassen Sie die
Angabe zu border= entweder weg oder was sauberer ist Sie notieren border="0".
<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran

werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird
ein abschlieendes Tag </tr> notiert.
Eine Tabelle kann Kopfzellen und gewhnliche Datenzellen enthalten. Text in Kopfzellen wird
hervorgehoben (meist fett und zentriert ausgerichtet). <th> leitet eine Kopfzelle ein, <td> eine
normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der
Inhalt einer Zelle wird jeweils hinter dem Tag notiert. Obwohl die zugehrigen End-Tags </th>
bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu
notieren.
In einer Tabellenzelle knnen beliebige Elemente stehen, d.h. auer normalem Text z.B. auch
andere Block- und Inline-Elemente. Sogar eine weitere Tabelle knnen Sie innerhalb einer Zelle
definieren.
Beachten Sie: Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg
die gleiche Anzahl Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb
durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.
Tabellenzellen drfen auch leer sein. Wenn Sie in einer Zeile fr eine Spalte keine Daten
eingeben wollen, notieren Sie ein einfaches <td></td>. Beachten Sie dabei jedoch, dass viele
Web-Browser die Zelle in diesem Fall als nicht vorhanden darstellt. Probieren Sie deshalb auch
mal die Notation <td>&#160;</td> fr leere Tabellenzellen aus.

8.1.2

Spalten vordefinieren

Die Darstellung einer Tabelle ergibt sich zwar automatisch aus den definierten Zeilen und
Spalten. Doch fr einen Web-Browser ist es nicht ganz einfach, die Darstellung frhzeitig zu
ermitteln. Er muss erst die gesamte Tabelle einlesen, bevor er irgendetwas davon darstellen kann.
Bei groen Tabellen kann das zu unschnen leeren Bildschirminhalten whrend des
Seitenaufbaus fhren.

236

Kapitel 8: Tabellen

HTML 4.0 bietet eine Syntax an, um dem Browser gleich zu Beginn der Tabelle mitzuteilen, wie
viele Spalten die Tabelle hat und wie breit diese sind. Dadurch kann der Browser die Tabelle
schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen
ist. ltere Browser ignorieren diese Angaben allerdings.

8.3: Die Darstellung einer Tabelle fr die drei folgenden Schemata.

Beispielschema 1:
<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>

Beispielschema 2:
<table border="1">
<colgroup width="200" span="3">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>

8.1 Aufbau einer Tabelle

237

Beispielschema 3:
<table border="1" width="100%">
<colgroup>
<col width="4*">
<col width="2*">
<col width="1*">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
<!-- usw. andere Zeilen der Tabelle -->
</table>

Mit <colgroup> leiten Sie hinter dem einleitenden <table>-Tag eine Vorab-Definition der
Tabellenspalten ein (colgroup = column group = Spaltengruppe). Dabei haben Sie zwei
Mglichkeiten: Entweder Sie mchten unterschiedlich breite Tabellenspalten haben. Dann gehen
Sie so vor wie im obigen Beispielschema 1. Oder Sie haben eine Tabelle, in der alle Spalten die
gleiche einheitliche Breite haben sollen. Dann knnen Sie so vorgehen wie im obigen
Beispielschema 2.
Im Beispielschema 1 enthlt das <colgroup>-Tag keine weiteren Attribute. Dafr notieren Sie
im Anschluss an <colgroup> fr jede einzelne gewnschte Tabellenspalte je ein <col>-Tag. Das
erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw. Wenn Sie keine
weiteren Angaben machen, wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts
ermittelt. Mit width= [Pixel/Prozent] knnen Sie jedoch eine Spaltenbreite fr die einzelnen
Spalten vorgeben (width = Breite). Mit width="100" erzwingen Sie beispielsweise eine
Spaltenbreite von 100 Pixeln, und mit width=33% eine Breite von einem Drittel der Breite der
Gesamttabelle.
Im Beispielschema 2 werden keine <col>-Tags notiert. Stattdessen notieren Sie im einleitenden
<colgroup>-Tag das Attribut span= (span = spannen). Als Wert weisen Sie die Anzahl der
Spalten zu, die Sie wnschen. Mit dem Attribut width= knnen Sie in diesem Fall eine
einheitliche Spaltenbreite fr alle Spalten definieren.
Bei width= haben Sie neben der Mglichkeit, Pixel oder Prozentwerte anzugeben, auch noch
eine dritte Mglichkeit: Sie knnen das relative Breitenverhltnis der Spalten untereinander
bestimmen, unabhngig davon, wie breit die Tabelle im Verhltnis zum Anzeigefenster ist. Eine
solche Mglichkeit stellt das obige Beispielschema 3 vor. Bei Breitenangaben dieser Art weisen
Sie width= eine Zahl und dahinter ein Stern-Zeichen zu. Das Stern-Zeichen ist dabei nur ein
Signalzeichen fr den Browser, dass er die Zahlen davor nicht als Pixel interpretieren soll.
Wichtig sind die Zahlen. Im obigen Beispiel 3 werden drei Spalten definiert, bei denen die
relativen Zahlen 4, 2 und 1 in der Summe 7 ergeben. Damit definieren Sie eine Tabelle, bei der
die erste Spalte vier Siebtel der Tabellenbreite einnimmt, die zweite Spalte zwei Siebtel und die
dritte Spalte ein Siebtel.

238

Kapitel 8: Tabellen

Zur Geltung kommt ein relatives Spaltenverhltnis aber erst, wenn Sie auerdem eine Breite fr
die gesamte Tabelle angeben. Im obigen Beispielschema 3 geschieht das durch die Angabe
width="100%" im einleitenden <table>-Tag.
Beachten Sie: <col>-Tags drfen kein Abschluss-Tag haben. Das abschlieende </colgroup>Tag ist dagegen optional. Notieren Sie, wenn Sie XHTML-konform arbeiten wollen, das <col>Tag beispielsweise so: <col width="4*" />.
Auch das <col>-Tag darf das Attribut span= erhalten. Dadurch gruppieren Sie jedoch nicht
mehrere Spalten zu einer, sondern Sie geben lediglich an, dass Attribute dieser Spalte auch fr
die nchsten soundsoviel Spalten gelten sollen. Wenn Sie beispielsweise <col span="3"
width="100"> notieren, erhalten diese und die nchsten zwei Spalten die Breite 100 Pixeln.
Das <colgroup>-Tag darf die Attribute span= und width= auch dann enthalten, wenn
unterhalb davon <col>-Tags definiert werden. Dabei berschreibt die Anzahl der definierten
<col>-Tags jedoch die Angabe, die mit <colgroup span=> gemacht wurde, und das Attribut
width= innerhalb eines <col>-Tags hat Vorrang vor der Angabe width= im <colgroup>-Tag.
Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So knnen Sie beispielsweise mit
<colgroup width="100" span="3"> und <colgroup width="50" span="5"> hintereinander
notiert insgesamt 8 Spalten fr die Tabelle definieren, wobei die ersten drei Spalten eine Breite
von 100 Pixeln erhalten und die nachfolgenden fnf Spalten eine Breite von 50 Pixeln.
Fr die Breite der Tabellenspalten gelten die gleichen Hinweise wie beim Erzwingen von
Spaltenbreiten (Kapitel 8.2.4) auf herkmmliche Weise.

8.1.3

Kopf, Krper und Fu einer Tabelle definieren

Sie knnen eine Tabelle logisch in Bereiche aufteilen: einen Kopfbereich, einen oder mehrere
Datenbereiche und einen Fubereich. Interessant ist dies zum Beispiel in Verbindung mit der
Mglichkeit, Regeln fr Gitternetzlinien (Kapitel 8.2.3) zu bestimmen. Beim Ausdruck langer
Tabellen sollte der Browser Tabellenkopf und Tabellenfu auf jeder Seite wiederholen. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spalten vordefinieren</title>
</head>
<body>
<h1>Betroffene Menschen</h1>
<table border="1" rules="groups">
<thead>
<tr>
<th>Assoziation 1</th>
<th>Assoziation 2</th>
<th>Assoziation 3</th>

8.1 Aufbau einer Tabelle

239

</tr>
</thead>
<tfoot>
<tr>
<td><i>betroffen:<br>4 Mio. Menschen</i></td>
<td><i>betroffen:<br>2 Mio. Menschen</i></td>
<td><i>betroffen:<br>1 Mio. Menschen</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</tbody>
</table>
</body>
</html>

8.4: Der Browser ordnet Kopf und Fu einer Tabelle automatisch an.

Den Tabellenkopf leiten Sie mit <thead> ein (thead = table head = Tabellenkopf). Daran
anschlieend knnen Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich
gehren sollen. Mit </thead> schlieen Sie den Tabellenkopf ab (das End-Tag ist bei allen

240

Kapitel 8: Tabellen

Elementen fr Tabellenkopf, Tabellenfu und Tabellenkrper optional, aber dringend zu

empfehlen).
Bevor Sie einen oder mehrere Tabellenkrper-Elemente notieren, mssen Sie hinter dem
Tabellenkopf den Tabellenfu notieren. Diesen leiten Sie mit <tfoot> ein (tfoot = table foot =
Tabellenfu). Daran anschlieend knnen Sie eine oder mehrere Zeilen der Tabelle notieren, die
zum Fubereich gehren sollen. Mit </tfoot> schlieen Sie den Tabellenfu ab.
Einen Tabellenkrper leiten Sie mit <tbody> ein (tbody = table body = Tabellenkrper). Daran
anschlieend notieren Sie den Datenbereich mit einer oder mehreren Tabellenzeilen. Mit
</tbody> schlieen Sie den Tabellenkrper ab.
Beachten Sie: Wenn Sie mit den Elementen thead, tfoot und tbody arbeiten, mssen Sie
immer alle drei Elemente verwenden, und zwar immer in der Reihenfolge thead -> tfoot ->
tbody. Die Elemente thead und tfoot drfen pro Tabelle nur einmal vorkommen, das tbodyElement einmal oder beliebig oft.

8.2

Gestaltung einer Tabelle

Zellenabstand und Zelleninnenabstand

8.2.1

Sie knnen den Abstand zwischen den Zeilen und Spalten einer Tabelle in Pixeln bestimmen.
Ferner knnen Sie den Abstand zwischen Zellenrand und Zelleninhalt bestimmen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spalten vordefinieren</title>
</head>
<body>
<h1>Weit auseinander</h1>
<table border="8" cellspacing="10" cellpadding="20">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr>
<tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>

8.2 Gestaltung einer Tabelle

241

<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

8.5: Der Abstand zwischen den Zellen und zwischen Zellinhalt und Rand ist einstellbar.

8.6: Die Grafik zeigt die Wirkungsweise der Attribute im einleitenden <table>-Tag.

Mit cellpadding= bestimmen Sie den Innenabstand einer Zelle, also den Abstand zwischen
Zellenrand und Zelleninhalt in Pixeln (cellpadding = Zelleninnenabstand). Mit cellspacing=
bestimmen Sie den Abstand der Zellen untereinander in Pixeln (cellspacing = Zellenabstand).
Wenn Sie mit border= einen sichtbaren Rahmen und sichtbare Gitternetzlinien in der Tabelle
erzeugen, ist die Wirkungsweise von cellpadding= und cellspacing= besser nachvollziehbar.
Bei blinden Tabellen erzeugen beide Attribute optisch gesehen einfach nur Abstand.

242

Kapitel 8: Tabellen

8.2.2

Regeln fr den Auenrahmen

Wenn Sie mit border= einen sichtbaren Tabellenrahmen erzeugen, erhalten automatisch alle
Seiten einen Rahmen. Sie knnen aber auch genau bestimmen, welche Seiten eines Auenrahmens angezeigt werden und welche nicht.

8.7: Eine Tabelle mit ausgeschaltetem Auenrahmen.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Rahmenvereinbarung</h1>
<table border="3" frame="void">
<tr>
<td><b>Assoziation 1</b></td>
<td><b>Assoziation 2</b></td>
<td><b>Assoziation 3</b></td>
</tr><tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>

8.2 Gestaltung einer Tabelle

243

</table>
</body>
</html>

Voraussetzung fr all diese Angaben ist das Attribut border= im einleitenden <table>-Tag.
Dadurch wird ein Auenrahmen angezeigt. Mit dem Attribut frame= knnen Sie dann
bestimmen, an welchen Seiten der Tabellenrahmen gezogen werden soll (frame = Rahmen).
Folgende andere Angaben sind mglich:
Mit frame="box" (box = Rechteck) erreichen Sie, dass der Tabellenrahmen oben, links, rechts
und unten sichtbar dargestellt wird (die Angabe ist identisch mit dem, was die Angabe
border= bewirkt auch frame="border" ist erlaubt und bewirkt das Gleiche).
Mit frame="void" (void = nichts) wird berhaupt kein Tabellenrahmen angezeigt. Wenn Sie
border= angeben, werden jedoch die Gitternetzlinien der Tabelle sichtbar angezeigt. Die
Tabelle sieht dann also aus wie ein an allen Seiten offenes Gitter (das obige Beispiel benutzt
diese Variante).
Mit frame="above" (above = oberhalb) wird nur am oberen Rand der Tabelle eine
Rahmenlinie angezeigt.
Mit frame="below" (below = unterhalb) wird nur am unteren Rand der Tabelle eine
Rahmenlinie angezeigt.
Mit frame="hsides" (hsides = horizontal sides = horizontale Seiten) wird nur am oberen und
am unteren Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="vsides" (vsides = vertical sides = vertikale Seiten) wird nur am linken und am
rechten Rand der Tabelle eine Rahmenlinie angezeigt.
Mit frame="lhs" (lhs = left hand side = links) wird nur am linken Rand der Tabelle eine
Rahmenlinie angezeigt.
Mit frame="rhs" (rhs = right hand side = rechts) wird nur am rechten Rand der Tabelle eine
Rahmenlinie angezeigt.
Beachten Sie: Netscape 4.x interpretiert diese Angaben noch nicht.

8.2.3

Regeln fr Gitternetzlinien

Sie knnen Regeln aufstellen, welche Gitternetzlinien einer Tabelle angezeigt werden sollen und
welche nicht. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Gruppendynamik</h1>

244

Kapitel 8: Tabellen

<table border="1" rules="groups">

<thead>
<tr>
<th>Assoziation 1</th>
<th>Assoziation 2</th>
<th>Assoziation 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td><i>betroffen:<br>4 Mio. Menschen</i></td>
<td><i>betroffen:<br>2 Mio. Menschen</i></td>
<td><i>betroffen:<br>1 Mio. Menschen</i></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</tbody>
</table>
</body>
</html>

8.8: Eine Tabelle ohne senkrechte Trennlinien zwischen den Zellen.

8.2 Gestaltung einer Tabelle

245

Voraussetzung fr all diese Angaben ist das Attribut border= im einleitenden <table>-Tag.
Dadurch werden Gitternetzlinien angezeigt. Mit rules= knnen Sie im einleitenden <table>Tag Regeln fr die Gitternetzlinien bestimmen (rules = Linien). Folgende Angaben sind dabei
mglich:
Mit rules="none" (none = keine) werden berhaupt keine Linien gezogen, der Auenrahmen der Tabelle wird jedoch angezeigt.
Mit rules="rows" (rows = Reihen) werden Linien zwischen allen Tabellenzeilen gezogen,
nicht jedoch zwischen den Spalten der Tabelle.
Mit rules="cols" (cols = columns = Spalten) werden Linien zwischen allen Tabellenspalten
gezogen, nicht jedoch zwischen den Zeilen der Tabelle.
Mit rules="groups" (groups = Gruppen) werden Linien zwischen Kopf, Krper und Fu
einer Tabelle gezogen (siehe Kopf, Krper und Fu einer Tabelle definieren in Kapitel 8.1.3
das obige Beispiel verwendet diese Angabe).
Mit rules="all" (all = alle) werden Linien zwischen allen Tabellenzellen gezogen
(Voreinstellung).
Beachten Sie: Netscape 4.x interpretiert diese Angaben noch nicht.

8.2.4

Breiten- und Hhenangaben

Sie knnen fr die gesamte Tabelle sowie fr einzelne Spalten und Zeilen geeignete Angaben zu
Breite und Hhe notieren. Dadurch schaffen Sie Raum. Breitenangaben werden durch das
Attribut width= notiert, Hhenangaben durch das Attribut height= (width = Breite, height =
Hhe). Bei allen Angaben sind absolute Zahlenangaben erlaubt, die die Breite bzw. Hhe als Anzahl
Pixel bestimmen, sowie prozentuale Angaben, die am Ende ein Prozentzeichen (%) haben.

8.9: Breite und Hhe von Tabellenzellen lassen sich mit Attributen und CSS steuern.

246

Kapitel 8: Tabellen

Die einzige von allen Angaben, die nach der HTML-Variante Strict erlaubt ist, ist die
Gesamtbreite der Tabelle. Andere Angaben sind als deprecated gekennzeichnet und sollen knftig
aus dem HTML-Standard entfallen. Solche Angaben sind auch mit Hilfe von CSS Stylesheets
mglich. Und schlielich gibt es auch noch Angaben, die zwar von einigen Browsern
interpretiert werden, aber nicht mal zum HTML-Standard in der Variante Transitional
gehren. Die folgende Tabelle listet auf, welche Angaben mglich sind, und welchen Status die
Angabe in Bezug auf HTML-Standard und Browser-Kompatibilitt hat.
Angabe (Notation)

Status

<table width=>

<table height=>

<th width=> oder

<td width=>

<th height=> oder

<td height=>

Bedeutung
Bestimmt die Breite der gesamten Tabelle in Bezug
auf den verfgbaren Raum im Elternelement. Das
Elternelement kann das Dokument sein, also das
body-Element, oder auch ein anderes Element, innerhalb dessen eine Tabelle vorkommen kann, z.B. ein
div-Element oder eine Tabellenzelle einer ueren
Tabelle.
Bestimmt die Hhe der gesamten Tabelle in Bezug auf
das Anzeigefenster. Diese Angabe wird zwar von den
Browsern schon lange untersttzt und in der Praxis
hufig benutzt, gehrte jedoch nie zum HTMLStandard.
Bestimmt die Breite einer Tabellenzelle und damit die
Breite aller Zellen der gleichen Spalte. Als deprecated
eingestuft. Ersetzbar durch CSS-Notationen wie <th
style="width:100px">. Solche Angaben werden
allerdings nur von neueren Browsern interpretiert.
Bestimmt die Hhe einer Tabellenzelle und damit die
Hhe aller Zellen der gleichen Tabellenzeile. Als
deprecated eingestuft. Ersetzbar durch CSS-Notationen wie <td style="height:100px">. Solche
Angaben werden allerdings nur von neueren
Browsern interpretiert.

Einige Browser interpretieren darber hinaus weitere Angaben wie <tr height=>. Solche
Angaben sind allesamt nicht HTML-konform und sollten nicht mehr verwendet werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Breit und hoch mit HTML</h1>

8.2 Gestaltung einer Tabelle

247

<table border="1" width="60%">

<tr>
<td width="50%" height="100">Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
<h1>Breit und hoch mit CSS</h1>
<table border="1" style="width:60%">
<tr>
<td style="width:50%; height:100px">Berlin</td>
<td>Hamburg</td>
<td>M&uuml;nchen</td>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

Im Beispiel wird zweimal die gleiche Tabelle notiert im ersten Fall kommen die HTMLAttribute width= und height= an erlaubten Stellen zum Einsatz nach der HTML-Variante
Transitional. Die zweite Tabelle benutzt entsprechende CSS-Eigenschaften zur Angabe von
Breite und Hhe und gengt damit auch den Anforderungen an die HTML-Variante Strict.
Interpretiert wird die zweite Tabelle allerdings erst vom Internet Explorer ab Version 4.x und
von Netscape ab Version 6.x.
Beachten Sie: Die Angaben zu Breite und Hhe sind nur wirksam, wenn der Tabellen- bzw.
Zelleninhalt kleiner ist, sodass leerer Raum entsteht. Wenn der Tabelleninhalt grer ist, werden
die Angaben zu Breite und Hhe auer Kraft gesetzt. Die Tabelle bzw. Zelle (und mit ihr Spalte
und Zeile) werden dann so dimensioniert, dass der gesamte Inhalt angezeigt wird. Einige

248

Kapitel 8: Tabellen

Browser z.B. Netscape bis einschlielich Version 4.x setzen Angaben zu Breite und Hhe
allerdings leider je nach Tabelleninhalt strker auer Kraft als es ntig wre.
Da die Angabe zu width= in einer Tabellenzelle spaltenweit gilt, brauchen Sie sie nur einmal pro
Spalte zu notieren. Am sinnvollsten ist es, die Angabe in der ersten Zeile der Tabelle zu notieren.
Ebenso ist es mit der Angabe zu height= in einer Tabellenzelle. Da diese Angabe fr die ganze
zugehrige Tabellenzeile gilt, ist es am sinnvollsten, sie in der ersten Zelle der Zeile zu notieren.
Im obigen Beispiel wird durch <td width="50%" height="100"> in der ersten Zelle also sowohl
die Breite der ersten Spalte als auch die Hhe der ersten Zeile definiert.
Verwenden Sie Pixelangaben und Prozentangaben immer so, dass keine Konflikte entstehen. Im
obigen Beispiel werden etwa alle Breiten prozentual bestimmt, und nur die Hhe wird mit Pixeln
festgelegt. So kann der Browser im Beispiel fr die gesamte Tabelle eine Breite von 60% Prozent
zum Elternelement ermitteln und fr die erste Spalte wiederum 50% davon. Die Angabe von 100
Pixeln Zeilenhhe kommt damit nicht in Konflikt.
Eine bersichtlichere Lsung, die Breite von Tabellenspalten zu definieren, steht mit der
Mglichkeit zur Verfgung, Spalten vorzudefinieren (Kapitel 8.1.2). Die hier beschriebene
Mglichkeit hat dagegen den Vorteil, auch von lteren Browsern interpretiert zu werden.

8.2.5

Zeilenumbruch in Zellen verhindern

Sie knnen festlegen, dass beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen
darf. Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert. Das entsprechende Attribut ist jedoch als deprecated eingestuft und soll knftig aus dem HTML-Standard
entfallen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Lange N&auml;chte</h1>
<table border="1">
<tr>
<td nowrap>Die langen HTML-N&auml;chte von Berlin sind die l&auml;ngsten
N&auml;chte &uuml;berhaupt</td>
<td style="white-space:nowrap">Die langen CSS-N&auml;chte von Berlin sind
ebenfalls die l&auml;ngsten N&auml;chte &uuml;berhaupt</td>
</tr>
</table>
</body>
</html>

8.2 Gestaltung einer Tabelle

249

8.10: Ohne Umbruch lassen sich breite Tabellenzellen nur mit dem Rollbalken berblicken.

Mit dem Attribut nowrap (ohne weitere Wertzuweisung) in einem einleitenden <th>- oder
<th>-Tag verhindern Sie, dass der Text innerhalb der Zelle automatisch umbrochen wird. Die
Zelle und damit ihre gesamte zugehrige Spalte wird so breit wie erforderlich.
Das obige Beispiel zeigt in der ersten Zelle, wie das HTML-Attribut nowrap eingesetzt wird, und
in der zweiten Zelle die entsprechende Notation in CSS. Letztere ist konform zur HTMLVariante Strict, wird jedoch erst ab Internet Explorer 4.x und Netscape 6.x interpretiert.
Beachten Sie: Wenn Sie XHTML-konform arbeiten, mssen Sie das nowrap-Attribut in der
Form nowrap="nowrap" notieren. Weitere Informationen dazu im Kapitel 14.1.11 zu XHTML
und HTML.

8.2.6

Ausrichtung von Zellen

Zelleninhalte von Tabellen knnen aufgrund unterschiedlicher Inhalte oder duch Angaben zu
Breite und Hhe mehr Raum in Anspruch nehmen, als es ihr Inhalt erfordert. Fr diesen Fall
knnen Sie Zelleninhalte sowohl horizontal (linksbndig, zentriert, rechtsbndig) als auch
vertikal (obenbndig, mittig, untenbndig) am Zellenrand ausrichten. Die entsprechenden
Angaben sind sowohl auf einzelne Zellen (also th- und td-Elemente) anwendbar als auch auf
Tabellenbereiche wie Tabellenzeilen (tr), Tabellenkopf (thead), Tabellenkrper (tbody) und
Tabellenfu (tfoot). In diesem Fall gelten die Angaben fr alle Zellen des jeweiligen Bereichs.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Richtungsweisend</h1>
<table border="1">
<tr>
<th width="200" height="100" align="left" valign="top"> links oben</th>
<th width="200">mittig zentriert</th>
<th width="200" align="right" valign="bottom"> rechts unten</th>
</tr><tr align="center" valign="top">

250

Kapitel 8: Tabellen

<td height="100">oben zentriert</td>

<td>oben zentriert</td>
<td>oben zentriert</td>
</tr><tr align="right" valign="bottom">
<td height="100">rechts unten</td>
<td>rechts unten</td>
<td>rechts unten</td>
</tr>
</table>
<h2>Auch am Dezimalzeichen?</h2>
<table border="1">
<colgroup><col><col align="char" char=","></colgroup>
<tr><th>Element</th><th>Anteil in mg</th></tr>
<tr><td>Nitrat</td><td>0,117126</td></tr>
<tr><td>Hydrogencarbonat</td><td>330,0</td></tr>
</table>
</body>
</html>

8.11: Die Zellinhalte sind mit Attributen waagrecht und senkrecht ausgerichtet.

8.2 Gestaltung einer Tabelle

251

Mit align="left" knnen Sie eine Kopfzelle in ihrem einleitenden <th>-Tag linksbndig
ausrichten, mit align="right" rechtsbndig. Datenzellen knnen Sie in ihrem einleitenden
<td>-Tag mit align="center" zentriert ausrichten und durch align="right" rechtsbndig.
Die Angaben align="center" bei Kopfzellen und align="left" bei Datenzellen sind
natrlich auch erlaubt, bewirken aber lediglich die Voreinstellung und sind deshalb nicht ntig
(align = Ausrichtung, left = links, center = zentriert, right = rechts). Diese Angaben knnen Sie
auch in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden <tbody>-Tags und
<tfoot>-Tags notieren. Dann werden alle Zellen im entsprechenden Bereich so ausgerichtet wie
angegeben. Widersprechende Angaben in einzelnen Zellen haben allerdings Vorrang vor
bereichsweiten Angaben. Ab HTML 4.0 ist auch die Angabe align="justify" erlaubt. Dadurch
erzwingen Sie einen Blocksatz innerhalb der Zelle.
Mit valign="top" knnen Sie eine Zelle in ihrem einleitenden Tag obenbndig ausrichten,
durch die Angabe valign="bottom" untenbndig. Auch die Angabe valign="middle" ist
mglich. Dies ist jedoch die Voreinstellung und deshalb nicht unbedingt ntig (valign = vertical
align = vertikale Ausrichtung, top = oben, bottom = unten, middle = mittig). Auch das valignAttribut knnen Sie in einleitenden <tr>-Tags, einleitenden <thead>-Tags, einleitenden
<tbody>-Tags und <tfoot>-Tags notieren. Ab HTML 4.0 ist auch die Angabe
valign="baseline" erlaubt. Dann werden alle Zellen innerhalb einer Zeile, die diese Angaben
erhalten, an einer gemeinsamen Basislinie ausgerichtet. Und zwar so, dass die erste Textzeile aller
dieser Zellen immer auf gleicher Hhe beginnt.
Ferner ist seit HTML 4.0 die Angabe align="char" in Verbindung mit den Attributen char=
und charoff= erlaubt. Mit align="char" knnen Sie erzwingen, dass die Spalteninhalte an
einem Dezimalzeichen ausgerichtet werden. Auerdem bentigen Sie noch das Attribut char=
(char = character = Zeichen). Diesem weisen Sie als Wert ein Zeichen zu, das Sie als Dezimalzeichen verwenden. Die Ausrichtung erfolgt dann so, dass das Dezimalzeichen immer an der
gleichen Stelle steht. Neben dem Attribut char= zur Bestimmung des Dezimalzeichens knnen
Sie zustzlich noch das Attribut charoff= angeben (charoff = character offset = Zeichenposition).
Damit knnen Sie angeben, an welcher Position das Zeichen frhestens vorkommen kann. Im
obigen Beispiel wird ein Komma als Dezimalzeichen definiert. Die Werte der betreffenden im
Beispiel vordefinierten Spalten werden dann so ausgerichtet, dass das Dezimalzeichen immer
an der gleichen Stelle steht. Die HTML-Spezifikation gibt jedoch an, dass die Untersttzung der
Dezimalzeichenausrichtung durch Browser freiwillig ist. Und tatschlich interpretiert auch
keiner der weit verbreiteten Browser diese Angaben.

8.2.7

Hintergrundfarben und Hintergrundbilder

Sie knnen sowohl fr eine gesamte Tabelle als auch fr einzelne Zeilen oder Zellen eine
Hintergrundfarbe definieren. Die verbreiteten Web-Browser untersttzen auch die Angabe von
Hintergrundbildern mit Wallpaper-Effekt, doch diese Angaben gehrten nie zum HTMLStandard. Auch die Angaben zur Hintergrundfarbe sind als deprecated gekennzeichnet und sollen
knftig aus dem HTML-Standard entfallen. Sowohl das Definieren von Hintergrundfarben als
auch das von Hintergrundbildern ist mit CSS Stylesheets mglich.

252

Kapitel 8: Tabellen

Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body text="#000099">
<h1>Gro&szlig;e Worte mit HTML</h1>
<table border="1" bgcolor="#FFFF00">
<tr>
<td width="200" height="100"><h2>Traum</h2></td>
<td width="200" bgcolor="#00FFFF"><h2>Zeit</h2></td>
<td width="200"><h2>Luft</h2></td>
</tr><tr

bgcolor="#FF00FF">

<td height="100"><h2>Licht</h2></td>
<td><h2>Himmel</h2></td>
<td><h2>Leben</h2></td>
</tr>
</table>
<h1>Gro&szlig;e Worte mit CSS</h1>
<table border="1" style="background-color:#FFFF00">
<tr>
<td width="200" height="100"><h2>Traum</h2></td>
<td width="200" style="background-color:#00FFFF"><h2>Zeit</h2></td>
<td width="200"><h2>Luft</h2></td>
</tr><tr style="background-color:#FF00FF">
<td height="100"><h2>Licht</h2></td>
<td><h2>Himmel</h2></td>
<td style="background-image:url(background.jpg)"><h2>Leben</h2></td>
</tr>
</table>
</body>
</html>

Durch das Attribut bgcolor= im einleitenden Tag der Tabelle knnen Sie eine Hintergrundfarbe
fr die gesamte Tabelle bestimmen (bgcolor = background color = Hintergrundfarbe). Beim
Angeben der Farbe gelten die Regeln zum Definieren von Farben in HTML. Ebenso knnen Sie
das Attribut bgcolor= im einleitenden Tag einer Tabellenzeile (<tr>) notieren, um die
Hintergrundfarbe fr alle Zellen in dieser Zeile zu bestimmen. Wenn Sie bgcolor= im
einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle (<th>) angeben, gilt die Hinter-

8.2 Gestaltung einer Tabelle

253

grundfarbe fr diese eine Zelle. Im Konfliktfall hat die Farbangabe in einzelnen Zellen Vorrang
vor der Angabe fr ganze Zeilen oder Tabellen. Die Angabe fr eine Zeile hat im Konfliktfall
Vorrang vor der Angabe fr die ganze Tabelle.

8.12: Hintergrundfarben und -bilder fr Tabellen mit Attributen und CSS-Angaben.

Das Gleiche ist mit dem Attribut background= mglich, um eine Hintergrundgrafik fr die
Tabelle oder einzelne Zellen einzubinden. Dieses Attribut ist jedoch im Zusammenhang mit
Tabellen nicht HTML-konform und kommt im obigen Beispiel auch nicht vor. Die zweite im
Beispiel notierte Tabelle zeigt, wie es HTML-konform gemacht wird. Dagegen spricht eigentlich
nur noch die Existenz von Netscape 4.x, der keine CSS-Angaben bei Tabellen interpretiert.
Im obigen Beispiel wird angenommen, dass sich die Grafikdatei background.jpg im gleichen Verzeichnis befindet. Sie knnen jedoch auch Grafiken aus anderen Verzeichnissen (z.B. /daten/
grafik/hintergrund/background.gif oder ../gif/back.gif) oder von entfernten URIs (z.B. http://
www.mein-anderer-server.de/grafik/back.jpg) angeben.
Beachten Sie: Wenn Sie eine Hintergrundfarbe definieren oder eine Hintergrundgrafik einbinden, sollten Sie fr den Text eine geeignete Kontrastfarbe definieren.

254

Kapitel 8: Tabellen

8.2.8

Farben fr Rand und Gitternetzlinien (Microsoft)

Sie knnen auch fr Rahmen und Gitternetzlinien Farbangaben machen. Diese Angaben werden
bislang jedoch nur vom MS Internet Explorer interpretiert und gehren nicht zum HTMLStandard. Benutzen Sie stattdessen CSS zur Gestaltung der Rahmen.
Durch das Attribut bordercolor= im einleitenden <table>-Tag der Tabelle knnen Sie eine
einheitliche Farbe fr den Tabellenrahmen und die Gitternetzlinien bestimmen (bordercolor =
Randfarbe). Anstelle der einfachen Rahmenfarbe knnen Sie auch einen Schattier-Effekt in den
Rahmen bringen, indem Sie zwei verschiedene Farben definieren eine dunklere und eine
hellere. Dazu notieren Sie im einleitenden Tag der Tabelle die beiden Attribute bordercolordark= (bordercolordark = dunkle Randfarbe) und bordercolorlight= (bordercolorlight = helle
Randfarbe).

8.3

Tabellen mit CSS gestalten

Gerade bei Tabellen sind CSS Stylesheets eine groe Hilfe zur Gestaltung. Denn mit CSS knnen
Sie alle Elemente einer Tabelle nach Wunsch formatieren sei es einzeln oder gruppenweise.
Dazu kommen ausgereifte CSS-Eigenschaften fr Tabellenrahmen. Mageblich sind im hier
beschriebenen Zusammenhang folgende CSS-Eigenschaften: Tabellenformatierung, Schriftformatierung, Ausrichtung und Absatzkontrolle, Auenrand und Abstand, Innenabstand, Rahmen,
Hintergrundfarben und -bilder, Positionierung und Anzeige von Elementen.

8.4

Zellen verbinden
Zellen in einer Zeile spaltenweise verbinden

8.4.1

Sie knnen mehrere Zellen innerhalb einer Zeile verbinden, sodass sich eine Spalte in dieser Zeile
ber mehrere Spalten hinweg erstreckt. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Zoologie</h1>
<table border="1">
<tr>
<th colspan="2">Die Menschheit besteht aus</th>
</tr><tr>
<td>Eseln</td>

8.4 Zellen verbinden

255

<td>Affen</td>
</tr>
</table>
</body>
</html>

8.13: In der ersten Zeile dieser Tabelle sind zwei Zellen zusammengefasst.

Durch das Attribut colspan= [Anzahl Spalten] erreichen Sie, dass sich eine Zelle ber mehrere
Spalten hinweg erstreckt (colspan = column span = Spalten berspannen). Die Angabe ist nur
wirksam, wenn die Tabelle mindestens so viele Spalten besitzt wie angegeben.
Beachten Sie: Wenn Sie in einer Tabellenzeile eine Zelle beispielsweise ber vier Spalten hinweg
spannen, sollten Sie in den anderen Zeilen der Tabelle anstelle dieser einen Zelle vier eigene
Zellen definieren. Die Summe der Zellen sollte in jeder Zeile der Tabelle gleich sein.

8.4.2

Zellen in einer Spalte zeilenweise verbinden

Sie knnen mehrere Zellen in einer Spalte verbinden, sodass sich eine Zeile in dieser Spalte ber
mehrere Zeilen hinweg erstreckt. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Zoologie (II)</h1>
<table border="1">
<tr>
<th rowspan="2">Die Eselheit besteht aus</th>
<td>echten Eseln</td>
</tr><tr>
<td>verkappten Eseln (Menschen)</td>
</tr><tr>
<th rowspan="2">Die Affenheit besteht aus</th>

256

Kapitel 8: Tabellen

<td>echten Affen</td>
</tr><tr>
<td>verkappten Affen (Menschen)</td>
</tr>
</table>
</body>
</html>

8.14:

Dieses Beispiel fasst in der ersten Spalte jeweils zwei untereinander liegende Zellen
zusammen.

Durch das Attribut rowspan= [Anzahl Zeilen] erreichen Sie, dass sich eine Zelle in einer Spalte
ber mehrere Zeilen hinweg erstreckt (rowspan = Zeilen spannen). Die Angabe ist nur wirksam,
wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben.
Beachten Sie: Wenn Sie in einer Tabellenzeile eine Zelle beispielsweise ber vier Zeilen hinweg
spannen, sollten Sie in der gleichen Zeile den Inhalt der ersten daneben stehenden Zelle definieren. In den drei folgenden Zeilen sollten Sie an gleicher Stelle die drei brigen Zellen definieren, die neben der gestreckten Zelle stehen sollen.

8.4.3

Zellen zugleich spalten- und zeilenweise

verbinden

Sie knnen Zellen definieren, die sich gleichzeitig ber mehrere Zeilen und Spalten hinweg
erstrecken. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Zoologie (III)</h1>
<table border="1">

8.5 Tabellenbeschriftung und Tabellenausrichtung

257

<tr>
<th colspan="2" rowspan="2">Der Mensch ist...</th>
<td>zum einen Teil ein Esel</td>
</tr><tr>
<td>zum anderen Teil ein Affe</td>
</tr><tr>
<td>weder ein richtiger Esel</td>
<td>noch ein richtiger Affe</td>
<td><b>menschlich, allzumenschlich</b></td>
</tr>
</table>
</body>
</html>

8.15: Das Beispiel fasst gleichzeitig Zellen waagrecht und senkrecht zusammen.

Sie knnen die Attribute colspan= [Anzahl Spalten] und rowspan= [Anzahl Zeilen] in einer
Zelle kombinieren. Dadurch erreichen Sie, dass sich die Zelle ber mehrere Spalten und Zeilen
zugleich erstreckt.

8.5
8.5.1

Tabellenbeschriftung und Tabellenausrichtung

Tabellenberschrift/-unterschrift definieren

Sie knnen fr eine Tabelle eine von der Tabelle getrennte, aber ihr zugehrige ber- oder
Unterschrift definieren. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titles</title>
</head>
<body>

258

Kapitel 8: Tabellen

<table border="1">
<caption><big>Assoziationen</big></caption>
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

8.16: Eine Tabelle mit berschrift.

<caption>...</caption> definiert eine Tabellenberschrift. Das Element muss unmittelbar
nach dem einleitenden <table>-Tag notiert werden. Es bewirkt normalen Flietext. Um den
enthaltenen Text auffllig zu gestalten, darf das caption-Element Inline-Elemente als weitere
Elemente enthalten. Eine andere Mglichkeit besteht darin, das caption-Element mit CSS

Stylesheets zu formatieren.
Wenn Sie nichts anderes angeben, bewirkt das caption-Element eine Tabellenberschrift. Um
eine Tabellenunterschrift zu erzwingen, knnen Sie <caption align="bottom"> notieren.
Ferner sind die Angaben align="left" fr seitliche berschrift links und align="right" fr
seitliche berschrift rechts erlaubt. Whrend align="bottom" von den Browsern interpretiert
wird, werden align="left" und align="right" meistens nicht oder nicht korrekt untersttzt.
Das Attribut align= ist darberhinaus als deprecated gekennzeichnet, soll also knftig aus dem
HTML-Standard entfallen. Alternativangaben in CSS werden von den weit verbreiteten
Browsern aber im Zusammenhang mit dem caption-Element bislang nicht untersttzt.

8.5 Tabellenbeschriftung und Tabellenausrichtung

8.5.2

259

Tabellenausrichtung

Sie knnen eine Tabelle links, zentriert oder rechts ausrichten. Die bekannten Browser reagieren
dabei so, dass eine links oder rechts ausgerichtete Tabelle, die nicht die gesamte zur Verfgung
stehende Breite beansprucht, bewirkt, dass nachfolgende Inhalte um die Tabelle herumflieen.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titles</title>
</head>
<body>
<table border="1" align="left">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr>
</table>
<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich nicht alles.
Deshalb sollten Sie die drei St&auml;dte lieber mal selbst besuchen.<br
clear="all"></p>
<p>Keine Zeit, kein Geld? Na, dann tun Sies doch im Web!</p>
<table border="1" style="float:left; margin-right:10px; margin-bottom:6px">
<tr>
<th colspan="2">Menschen</th>
</tr><tr>
<td>Esel</td>
<td>Affen</td>
</tr>
</table>
<p>Die Tabelle sagt zwar schon eine Menge aus, aber nat&uuml;rlich nicht alles.
Deshalb sollten Sie sich selbst von der Richtigkeit ihrer Aussagen
&uuml;berzeugen.</p>
<p style="clear:left">Gehen Sie einfach mal in den Zoo, gucken Sie sich Esel und
Affen an und vergleichen Sie dann selbst!</p>
</body>
</html>

260

Kapitel 8: Tabellen

8.17: Die Position von Tabellen im Fliesstext regeln Sie mit Attributen oder CSS.

Im Beispiel sind zwei Tabellen und unterhalb davon jeweils zwei Textabstze notiert. Die obere
Tabelle ist mit align="left" im einleitenden <table>-Tag linksbndig ausgerichtet. Bei
Netscape und beim Internet Explorer hat das die Wirkung, dass nachfolgender Text rechts um
die Tabelle fliet. Mit align="right" knnen Sie eine Tabelle rechtsbndig ausrichten und mit
align="center" zentriert. Das align-Attribut ist jedoch als deprecated gekennzeichnet und soll
knftig aus dem HTML-Standard entfallen. Die zweite Tabelle im obigen Beispiel zeigt daher,
wie sich der gleiche Effekt mit CSS-Formaten erzielen lsst.
Bei der Variante mit den CSS-Formaten sind auerdem noch Angaben zum Abstand rechts und
unten angegeben, sodass der nachfolgende Text nicht so sehr an der Tabelle klebt. Die Browser
interpretieren auch vergeichbare HTML-Attribute dafr: Mit <table align="center"
hspace="10" vspace="6"> erreichen Sie beispielsweise, dass zwischen Tabelle und umflieendem Text ein Horizontalabstand von 10 Pixeln und ein Vertikalabstand von 6 Pixeln erzwungen
wird. Die Attribute hspace= und vspace= im Zusammenhang mit Tabellen gehrten jedoch nie
zum HTML-Standard.
Die beiden obigen Beispiele zeigen auerdem, wie Sie den Textumfluss abbrechen und die
Textfortsetzung unterhalb der Tabelle erzwingen knnen. In der ersten Tabelle des Beispiels, wo
alles mit HTML realisiert ist, ist dazu das Tag <br clear="all"> notiert also ein Zeilenumbruch mit einem Attribut, das fr die Fortsetzung unterhalb des Umflussbereichs sorgt. Das
clear-Attribut in HTML ist jedoch ebenfalls als deprecated gekennzeichnet. Der Text unterhalb
der zweiten Tabelle im Beispiel zeigt, wie der gleiche Effekt mit CSS-Formaten erreichbar ist.
Beachten Sie: Wenn die Tabelle selbst grere Inhalte hat, mssen Sie eine Gesamtbreite der
Tabelle erzwingen (<table width=>, Kapitel 8.2.4), damit links bzw. rechts noch Platz bleibt fr
den umflieenden Text. Wenn Sie eine Tabelle zwar linksbndig oder rechtsbndig ausrichten,
aber zugleich verhindern wollen, dass nachfolgende Inhalte um die Tabelle flieen, dann
schlieen Sie die gesamte Tabelle in ein allgemeines Blockelement (div) ein und richten dieses
mit align= oder einer entsprechenden CSS-Eigenschaft (style="text-align:") aus.

8.6 Tabellen als Mittel fr Web-Seitenlayouts

8.5.3

261

Weitere Informationen

Das caption-Element kann auch Universalattribute enthalten.

8.6

Tabellen als Mittel fr Web-Seitenlayouts

8.6.1

Allgemeines zu Tabellen fr Web-Seitenlayouts

Wenn Sie bei Web-Seiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meist
farbigen Flchen stoen, wurde in vielen Fllen mit der Technik der blinden Tabellen
gearbeitet. Blinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, dass es sich in Wirklichkeit um eine Tabelle handelt.
Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer Web-Seite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden
vom Web-Browser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in
dem Augenblick, wo der Web-Browser genau wei, wie gro und wie breit die Tabelle angezeigt
werden muss. Das bedeutet bei der Datenbertragung aus dem Web, dass ein Anwender am
Bildschirm lnger wartet, bis berhaupt etwas angezeigt wird es sei denn, Sie benutzen die
Mglichkeit, Spalten vorzudefinieren (Kapitel 8.1.2).
Ein weiteres Problem besteht darin, dass Browser mit gewnschten Breiten- und Hhenangaben
nicht unbedingt so umgehen, wie Sie es wnschen. Inhalte werden dann pltzlich gestaucht,
auseinandergezogen usw. Dies hat zur Erfindung des so genannten blinden Pixels gefhrt,
einer kleinen GIF-Grafik, die nur aus einer einfarbigen Flche besteht, deren Farbe wiederum als
transparent definiert ist. Zusammen mit der Mglichkeit, Breite und Hhe einer Grafik in
HTML (Kapitel 7.1.3) unabhngig von der tatschlichen Gre der Grafik anzugeben, lsst sich
eine solche Grafik scheinbar unsichtbar und unauffllig einbauen. So lassen sich vor allem feste
Mindestbreiten fr einzelne Spalten einer Tabelle erzwingen, und der Browser kann die Inhalte
darin nicht mehr stauchen. Diese Technik gilt einerseits als unsaubere Trickserei, ist aber
andererseits Ausdruck fr fehlende Formatiermglichkeiten. Mittlerweile stellen CSS Stylesheets
solche Mglichkeiten zwar bereit (vgl. die CSS-Eigenschaft min-width), doch das nutzt nicht
viel, solange die weit verbreiteten Browser noch keine Untersttzung dafr anbieten.
In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seitenlayouts mit blinden Tabellen
im Prinzip funktionieren. Auf die Technik des blinden Pixels wird hier verzichtet. Doch eine
andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens
lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von
Tabellen arbeitet.

8.6.2

Beispiel eines typischen Tabellen-Layouts

Das folgende Beispiel zeigt ein Layout, wie man es auf vielen Web-Seiten findet: oben eine
farbige Flche, wo die Seitenberschrift steht und andere Elemente wie Grafiken fr Logos,
Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Flche fr Navigationsverweise innerhalb des Web-Projekts, und rechts
davon eine breite Flche fr den eigentlichen Inhalt der Seite.

262

Kapitel 8: Tabellen

8.18: So sieht das nachfolgende Beispiel-Listing im Internet Explorer aus.

Das Beispiel ist gltiges HTML 4.0, benutzt aber diverse Attribute, die als deprecated gekennzeichnet sind, weshalb als HTML-Variante Transitional gewhlt werden muss.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFF00" vlink="#FFCC00" alink="#FFFFFF"
text="#000000">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A050A0">
<colgroup>
<col width="200">
<col>
</colgroup>
<tr>
<td colspan="2">
<table border="0" cellpadding="10" cellspacing="0">

8.6 Tabellen als Mittel fr Web-Seitenlayouts

<tr>
<td>
<h1 style="color:#FFFFFF">Willkommen</h1>
</td>
</tr>
</table>
</td>
</tr><tr>
<td valign="top" width="200">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<h3 style="color:#FFFFFF">Navigation</h3>
<p><a href="table_tr_th_td.htm"><b>Tabelle</b></a><br>
<a href="bgcolor.htm"><b>Hintergrund</b></a><br>
<a href="colspan.htm"><b>Zellen verbinden</b></a><br>
<a href="width_height.htm">
<b>Breite und H&ouml;he</b>
</a></p>
<h3 style="color:#FFFFFF">News</h3>
<p style="color:#FFFFFF">Die Neuigkeiten stehen
stets an dieser Stelle.
Viel Neues gibt es nicht. Nur so viel: diese
Seite ist neu.
</p>
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF">
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td>
<h2>Worum geht es hier eigentlich?</h2>
<p>Ach, um Web-Design, halt das &Uuml;bliche.
viel Inhalt viel Inhalt viel Inhalt
viel Inhalt viel Inhalt viel Inhalt viel Inhalt.
</p>
<p>viel Inhalt</p><p>viel Inhalt</p>
<p>viel Inhalt</p><p>viel Inhalt</p>
<p>viel Inhalt</p><p>viel Inhalt</p>
<p>viel Inhalt</p><p>viel Inhalt</p>
</td>
</tr>
</table>
</td>
</tr>

263

264

Kapitel 8: Tabellen

</table>
</body>
</html>

Das Beispiel bestimmt im einleitenden <body>-Tag zunchst dateiweite Farben fr Hintergrund,

Text und Verweise (Kapitel 4.2.1). Innerhalb des Dateikrpers wird die bergeordnete Tabelle
definiert. Sie erhlt die Attribute border="0", damit kein Rahmen und keine Gitternetzlinien
angezeigt werden, sowie cellpadding="0" und cellspacing="0", damit sich die einzelnen
Zellen der Tabelle nahtlos aneinander fgen. Das ist wichtig, damit zwischen den Farbflchen
keine sichtbaren Lcken entstehen.
Weil es sich um eine die ganze Seite berspannende Tabelle handelt, werden fr Browser, die das
verstehen, die gewnschten Spalten mit <col>-Tags vordefiniert. Die Tabelle soll zwei Spalten
haben, wobei die erste eine Breite von 200 Pixeln haben soll. Das soll die Spalte fr Navigationsverweise werden. Die zweite Spalte soll den Rest des verfgbaren Platzes in Anspruch nehmen.
Die gesamte Tabelle soll sich ber die volle verfgbare Breite erstrecken angegeben durch
width="100%" im einleitenden <table>-Tag der bergeordneten Tabelle.
Die gesamte bergeordnete Tabelle bekommt ferner mit Hilfe von bgcolor="#A050A0" einen
matt-violetten Hintergrund zugewiesen. Damit erhalten erst mal alle ihre Inhalte diese
Hintergrundfarbe. Um andersfarbige Flchen innerhalb der Tabelle zu erzeugen, sind bei den
einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich, die dann diese globale
Hintergrundfarbe berschreiben.
Die erste Zelle der ersten Zeile der bergeordneten Tabelle ist zugleich die einzige Zelle in dieser
Zeile, da durch das Attribut colspan="2" erreicht wird, dass sich die Zelle ber zwei Spalten
erstreckt. Der Inhalt dieser Zelle steht nun fr den berschriftenteil zur Verfgung. Da mit
cellpadding="0" und cellspacing="0" gearbeitet wird, wrde der Inhalt allerdings ganz am
Auenrand der Tabelle kleben, was unsauber aussieht.
Deshalb kommt bereits bei der berschrift zum ersten Mal die Technik der Tabelle in der
Tabelle zum Einsatz: <table border="0" cellpadding="10" cellspacing="0"> definiert
innerhalb der ber zwei Spalten gestreckten Tabellenzelle eine weitere Tabelle. Auch diese ist
wiederum rahmenlos (border="0"). Durch cellpadding="10" wird jedoch ein Innenabstand
von 10 Pixeln zum Zellenrand erzwungen. Diese Angabe ist der eigentliche Grund, warum die
innere Tabelle definiert wird. Denn die innere Tabelle hat nur eine einzige Zeile mit einer
einzigen Spalte, also nur eine Zelle, und darin ist die h1-berschrift fr die Seite notiert
(Willkommen). Die berschrift erhlt mit Hilfe der CSS-Eigenschaft color: eine weie Farbe,
um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.
In der zweiten Zeile der bergeordneten Tabelle werden fr beide definierten Spalten je eine
Zelle definiert. Die erste (linke) Zelle ist dann der Behlter fr die gesamte linke Spalte also fr
die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behlter fr
den gesamten Inhalt des Hauptbereichs, also des Bereichs fr den eigentlichen Seiteninhalt. Die
zweite Zelle, also die fr den Hauptbereich, erhlt mit bgcolor="#FFFFFF" als Hintergrundfarbe wei zugewiesen. So entsteht letztlich der optische Eindruck, als ob die Seite nur oben und
links einen farbigen Balken enthalten wrde, whrend der gesamte Rest der Seite einen weien
Hintergrund hat.

8.7 Tabellen und nichtvisuelle Medien

265

In beiden Zellen der zweiten Zeile der bergeordneten Tabelle wird auch wieder je eine innere
Tabelle definiert, die mit den gleichen Attributen wie im Fall der berschrift fr saubere
Abstnde zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Hhe ausgerichtet.
Mit valign="top" wird in beiden Zellen dafr gesorgt, dass die Inhalte, die ja unterschiedlich
gro sein knnen, auf jeden Fall obenbndig ausgerichtet werden.
Die Verweise in der linken Spalte heben sich durch ihre dateiweit definierten Farben gut von
dem violetten Hintergrund ab. Normaler Text, der in der linken Spalte steht, also berschriften,
Textabstze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weie Textfarbe, um sich
vom Hintergrund abzuheben.
Beachten Sie: Sie knnen CSS Stylesheets noch wesentlich konsequenter einsetzen, als es im
obigen Beispiel der Fall ist. Mageblich sind im hier beschriebenen Zusammenhang z.B. folgende
CSS-Eigenschaften: Schriftformatierung, Ausrichtung und Absatzkontrolle, Auenrand und
Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder, Positionierung und Anzeige
von Elementen.

8.7

Tabellen und nichtvisuelle Medien

8.7.1

Allgemeines

Die folgenden Beschreibungen sind fr die Ausgabe von Tabellen auf nichtvisuellen Medien
gedacht. Vor allem bei Sprachausgabesystemen, die HTML-Dateien fr Sehbehinderte ausgeben,
stellen Tabellen normalerweise ein Problem dar. Denn die optische Eindeutigkeit einer Tabelle
am Bildschirm oder auf Papier lsst sich in einem Medium, das Daten hintereinander ausgeben
muss, nicht abbilden. Was beispielsweise in der optischen Abbildung einer Tabelle durch
Gitternetzlinien ganz einfach ist, ist bei der Sprachausgabe ein echtes Problem: Wie soll akustisch
verdeutlicht werden, wo eine Zelle beginnt und endet und zu welcher Spalte oder Zeile sie
gehrt? Das W3-Konsortium hat zu diesem Zweck eine Reihe von Attributen in HTML eingefhrt, die speziell solche Probleme lsen helfen sollen.

8.7.2

Zusammenfassung des Tabelleninhalts

Sie knnen einen zusammenfassenden Kurztext fr die Tabelle definieren. Ein Sprachausgabesystem knnte diesen Text als Einleitung zur Tabelle ausgeben. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<table border="1" summary="Die folgende Tabelle ordnet St&auml;dten typische
Begriffe zu.">
<tr>

266

Kapitel 8: Tabellen

<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td>
<td>Kiez</td>
<td>Bierdampf</td>
</tr><tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

Mit dem Attribut summary= knnen Sie im einleitenden <table>-Tag eine Zusammenfassung
der Tabelle definieren (summary = Zusammenfassung).

8.7.3

Kurzbeschreibung fr Zellen definieren

Sie knnen fr einzelne Tabellenzellen eine Kurzbeschreibung im einleitenden Tag der Zelle
definieren. Ein Sprachausgabesystem knnte diesen Kurztext vor dem eigentlichen Inhalt
ausgeben. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<table border="1">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr>
<tr>
<td abbr="Es folgen Infos zu Berlin">
Hier eine Menge Inhalt
</td>
<td abbr="Es folgen Infos zu Hamburg">
Hier eine Menge Inhalt
</td>

8.7 Tabellen und nichtvisuelle Medien

267

<td abbr="Es folgen Infos zu Mnchen">

Hier eine Menge Inhalt
</td>
</tr>
</table>
</body>
</html>

Mit dem Attribut abbr= im einleitenden Tag einer Datenzelle (<td>) oder einer Kopfzelle
(<th>) knnen Sie eine Kurzinformation zu der entsprechenden Zelle voranschicken (abbr =
abbreviated = verkrzt).

8.7.4

Kopfzellen in Zellen referenzieren

Fr nichtvisuelle Ausgabemedien, etwa fr Sprachausgabesysteme, knnen Sie bestimmen, dass

bei der Ausgabe einer Datenzelle ein expliziter Bezug zu einer oder mehreren Kopfzellen hergestellt wird. Das System knnte den Inhalt der Kopfzelle(n) dann bei der Datenzelle wiederholen.
Ansonsten ist es bei der Sprachausgabe sehr schwer, den Bezug zwischen einer Datenzelle und
den zugehrigen Kopfzellen herzustellen, da die optische Eindeutigkeit einer Tabelle dort nicht
vorhanden ist. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<table border="1">
<tr>
<th id="Stadt_1">Berlin</th>
<th id="Stadt_2">Hamburg</th>
<th id="Stadt_3">M&uuml;nchen</th>
</tr>
<tr>
<td headers="Stadt_1">Buletten</td>
<td headers="Stadt_2">Frikadellen</td>
<td headers="Stadt_3">Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

Um Bezge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen,
mssen Sie fr die Kopfzellen mit dem Universalattribut id= individuelle Namen vergeben (im

268

Kapitel 8: Tabellen

obigen Beispiel Stadt_1, Stadt_2 und Stadt_3). Innerhalb einer Datenzelle knnen Sie dann
mit dem Attribut headers= auf Kopfzellen Bezug nehmen (headers = Kopfzellen). Im obigen
Beispiel knnte ein Sprachausgabesystem durch den Bezug also etwa ausgeben: Berlin ist gleich
Bulletten.
Falls Sie eine Kreuztabelle haben, bei der zwei Kopfzellen zu einer Datenzelle gehren, knnen
Sie hinter headers= auch weitere id-Namen von Kopfzellen angeben. Trennen Sie die id-Namen
durch Leerzeichen. Die Angabe hinter headers= sollte in jedem Fall in Anfhrungszeichen
stehen.
Der umgekehrte Weg nmlich das Wiederholen der Kopfzelleninformation in jeder zugehrigen Datenzelle ist ebenfalls mglich. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<table border="1">
<tr>
<th scope="col">Berlin</th>
<th scope="col">Hamburg</th>
<th scope="col">M&uuml;nchen</th>
</tr>
<tr>
<td>Buletten</td>
<td>Frikadellen</td>
<td>Fleischpflanzerl</td>
</tr>
</table>
</body>
</html>

Um Bezge zwischen Datenzellen und Kopfzellen nach dem obigen Beispiel herzustellen,
mssen Sie in den Kopfzellen das Attribut scope= notieren (scope = Geltungsbereich). Dabei sind
folgende Angaben erlaubt:
scope="col" ist fr Spaltenberschriften gedacht und bedeutet, dass der Inhalt der Kopfzelle
bei allen Zellen dieser Spalte wiederholt wird (col = Spalte).
scope="row" ist fr Zeilenberschriften (z.B. links als erste Tabellenspalte) gedacht und
bedeutet, dass der Inhalt der Kopfzelle bei allen Zellen dieser Zeile wiederholt wird (row =
Zeile).
scope="colgroup" ist fr Spaltenberschriften von Spaltengruppen gedacht und bedeutet,
dass der Inhalt der Kopfzelle bei allen Zellen aller Spalten der Spaltengruppe wiederholt wird

8.7 Tabellen und nichtvisuelle Medien

269

(colgroup = Spaltengruppe). Voraussetzung ist, dass Spaltengruppen mit Hilfe von <colgroup>
vordefiniert werden.
scope="rowgroup" ist fr Spaltenberschriften von Zeilengruppen gedacht und bedeutet,
dass der Inhalt der Kopfzelle bei allen Zellen aller Zeilen der Zeilengruppe wiederholt wird
(rowgroup = Zeilengruppe). Voraussetzung ist, dass Zeilengruppen in Form von Kopf, Krper
und Fu definiert werden.

8.7.5

Tabellen-Kategorien definieren

Bei komplexeren Tabellen knnen Sie gemeinsame Kategorienamen fr Zellen vergeben. Dazu
eine Grafik zur Veranschaulichung (das Beispiel stammt ursprnglich vom W3-Konsortium).

8.19: Dieser Beispieltabelle sollen Kategorienamen fr Zellen zugewiesen werden.

In einem interaktiven Sprachausgabe-/Sprachbefehlssystem knnte ein Anwender zu einer

solchen Tabelle etwa Fragen stellen wie:
Wie viel habe ich insgesamt fr Speisen ausgegeben?
Wie viel habe ich am 13.8.1998 fr Speisen ausgegeben?
Wie viel habe ich in Hamburg insgesamt ausgegeben?
Um in etwa zu entscheiden, wie viel am 13.08.1998 fr Speisen ausgegeben wurden, muss der
Computer wissen, welche Zellen zum Typ Datum gehren und welche zum Typ Speisen.
Solche Kategorienamen knnen Sie fr Tabellenzellen in HTML vergeben.
Einige Beispiele (nur Details):
<th id="a4" axis="Datum">12.08.1998</th>
<th id="a5" axis="Datum">13.08.1998</th>
<th id="b1" axis="Ausgaben">Speisen</th>
<th id="b2" axis="Ausgaben">Hotel</th>

Das Beispiel ist keine echte Tabelle. Es zeigt nur die Definition einiger Kopfzellen (vergleiche
Grafik weiter oben). Mit id= erhalten die Zellen unterschiedliche individuelle Namen, im
Beispiel a4 und a5. Das ist fr die sptere Referenzierung wichtig. Ferner erhalten die Zellen aber
auch noch einen gemeinsamen Kategorienamen. Solche Kategorienamen knnen Sie mit dem
Attribut axis= vergeben (axis = Achse).
Durch die Kategorienamen hat ein elektronisches System alle Informationen, um Fragen von der
Art wie viel habe ich am Datum=13.8.1998 fr Ausgaben=Speisen ausgegeben? zu beantworten.

271

Frames mehrere Fenster

9.1

Framesets und Frames definieren

9.1.1

Allgemeines zu Frames

Mit Hilfe von Frames knnen Sie den Anzeigebereich des Browsers in verschiedene, frei
definierbare Segmente aufteilen. Jedes Segment kann eigene Inhalte enthalten. Die einzelnen
Anzeigesegmente (also die Frames) knnen wahlweise einen statischen Inhalt (= non scrolling
regions) oder einen wechselnden Inhalt haben. Verweise in einem Frame knnen Dateien
aufrufen, die dann in einem anderen Frame angezeigt werden.
Frames sind kein weiteres Element, um typische Aufgaben der Textverarbeitung zu bewltigen,
sondern ein Element, das die spezifischen Eigenschaften der Bildschirmanzeige konsequent
nutzt. Frames erffnen vllig neue Mglichkeiten, um Information hypertextuell (d.h. nichtlinear) aufzubereiten.
Frames werden ab Netscape 2.0 und ab MS Internet Explorer 3.0 untersttzt. Seit HTML 4.0
gehren die Frames auch zum HTML-Standard. Dort allerdings nicht zur HTML-Variante
Strict, sondern stattdessen mit einer eigenen Variante Frameset ausgestattet. Die folgende
Abbildung zeigt, wie Frames im Anzeigefenster des Browsers wirken:

9.1: Der typische Aufbau einer Web-Seite mit drei Frames.

Das Bild stellt den Inhalt des gesamten Anzeigefensters des Browsers schematisch dar. Das
Anzeigefenster ist in drei unabhngige Bereiche aufgeteilt. Die Verweise links und unten knnen
beispielsweise immer eingeblendet bleiben, whrend sich der Inhalt des Hauptfensters je nach
ausgewhltem Verweis ndern kann. Dabei werden im Beispiel der Abbildung immer drei
verschiedene HTML-Dateien gleichzeitig angezeigt: links und unten immer die gleiche Datei, im
Hauptfenster jeweils eine wechselnde Datei, je nach ausgewhltem Verweis.
In jedem Frame stehen alle Anzeige-Features zur Verfgung so ist es z.B. denkbar, in einem
Frame Textinformation anzuzeigen, whrend in einem anderen Frame gleichzeitig ein passendes
Video abluft.

272

Kapitel 9: Frames mehrere Fenster

Durch den Einsatz von Frames wachsen die Gestaltungsmglichkeiten auerordentlich. Frames
stellen an das Design von HTML-Seiten aber auch besonders hohe Ansprche und haben einige
nicht zu bestreitende Nachteile. Einige Tipps, die Sie beachten sollten, finden Sie im Abschnitt
9.5 Frames als Mittel fr Seitenlayouts.

9.1.2

Grundgerst einer HTML-Datei mit Framesets

Um Frames zu definieren, brauchen Sie eine spezielle HTML-Datei, in der ein Frameset definiert
wird. Das Frameset bestimmt die Fensteraufteilung. Fr eine solche Datei ist ein anderes
Grundgerst erforderlich als das sonst bliche Grundgerst von HTML-Dateien.
Schema:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset ...>
<frame ...>

<!-- Frameset-Definition -->

<!-- Frame-Fenster-Definition -->

<noframes>
Wird angezeigt, wenn der Browser
keine Frames anzeigen kann
</noframes>
</frameset>
</html>

Die Unterschiede zu anderen HTML-Dateien beginnen bei der Dokumenttyp-Angabe. Bei

Dateien, in denen Sie Framesets und Frames definieren, mssen Sie die oben gezeigte
Dokumenttyp-Angabe zur HTML-Variante Frameset notieren.
Ein weiterer wichtiger Unterschied zu anderen HTML-Dateien ist, dass Dateien mit FramesetDefinitionen kein body-Element besitzen. Anstelle des body-Elements, also nach dem
abschlieenden </head>-Tag fr den Dateikopf, werden die Frames definiert. Dabei knnen Sie:
Framesets definieren
Frames zu einem Frameset definieren
Noframes-Bereich definieren
Mit Framesets bestimmen Sie die Aufteilung der Frame-Fenster, mit Frames die Datenquellen
der einzelnen Frame-Fenster, und der Noframes-Bereich ist fr Browser gedacht, die keine
Frames anzeigen knnen, oder bei denen die Anzeige von Frames deaktivierbar ist und vom
Anwender deaktiviert wurde.
Beachten Sie: Der Titel (<title>...</title>), den Sie in der Datei mit der Frameset-Definition angeben, wird whrend der gesamten Dauer des Framesets angezeigt, auch wenn andere
Dateien innerhalb des Framesets aufgerufen werden. Leider gibt es bislang keine Mglichkeit,

9.1 Framesets und Frames definieren

273

den Titel zu aktualisieren. Whlen Sie in der Datei, die die Frameset-Definitionen enthlt, deshalb einen allgemeinen, aussagekrftigen Titel, der fr das gesamte Projekt Gltigkeit hat.
Der URI der Datei mit der Frameset-Definition, also beispielsweise http://www.ihr-guter-name.de/,
bleibt in der gleichen Form in der Adresszeile des Browsers stehen, auch wenn der Anwender
durch Navigieren innerhalb des Framesets andere Seiten des Projekts in eines der Frame-Fenster
ldt. Mit anderen Worten: Ein Anwender kann immer nur die Startseite als Lesezeichen setzen,
nicht eine bestimmte Seite, die in einem Frame angezeigt wird.

9.1.3

Framesets definieren

Beim Definieren von Framesets bestimmen Sie, wie das Anzeigefenster des Browsers in
verschiedene Frame-Fenster aufgeteilt werden soll. Dabei mssen Sie sich das Anzeigefenster wie
den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, definieren Sie
Reihen und Spalten fr die Frame-Fenster. Ebenso, wie es mglich ist, Tabellen in HTML zu
verschachteln, ist das auch bei Framesets mglich. Anstelle eines Frames knnen Sie auch ein
untergeordnetes Frameset notieren. Auf diese Weise knnen Sie beliebige Fensteraufteilungen
erreichen.

Detailbeispiel 1
<frameset rows="20%,80%">
<!-- Dadurch ergeben sich zwei Frame-Fenster,
deren Inhalt hier bestimmt wird -->
</frameset>

9.2: Detailbeispiel 1: Zwei Frames untereinander mit waagrechter Teilung.

Im einleitenden Tag <frameset...> bestimmen Sie die Aufteilung. Durch rows= teilen Sie das
Anzeigefenster in Reihen auf (rows = Reihen). Dahinter bestimmen Sie, wie die Aufteilung genau
aussehen soll. Im Beispiel wird mit Hilfe von rows="20%,80%" eine Aufteilung in zwei Reihen
erzwungen, wobei die obere Reihe 20% des Anzeigefensters in Anspruch nimmt, die untere 80%.
Trennen Sie die Angaben zur Aufteilung durch Kommata.

Detailbeispiel 2
<frameset rows="100,*,60">
<!-- Dadurch ergeben sich drei Frame-Fenster,
deren Inhalt hier bestimmt wird -->
</frameset>

274

Kapitel 9: Frames mehrere Fenster

9.3: Detailbeispiel 2: Drei Frames untereinander mit waagrechter Teilung.

Mit der Angabe rows="100,*,60" werden drei untereinander liegende Reihen fr FrameFenster erzeugt. Die obere Reihe wird genau 100 Pixel hoch, die untere Reihe genau 60 Pixel
hoch, und die mittlere Reihe erhlt den Rest des Anzeigefensters, abhngig von der Gre des
Anzeigefensters beim Anwender.
Mit Zahlenangaben, die ein Prozentzeichen enthalten, wird die Aufteilung also prozentual
(relativ zur Gre des Anzeigefensters) interpretiert. Bei Zahlenangaben ohne Prozentzeichen
wird die Angabe als absoluter Pixelwert interpretiert. Mit dem Stern-Zeichen * definieren Sie
Bereiche von relativer Gre, abhngig von den brigen Angaben. Sie knnen auch vier oder
mehrere Reihen definieren. So definieren Sie beispielsweise mit rows="10%,25%,30%,25%,10%"
fnf Reihen.

Detailbeispiel 3
<frameset cols="200,*">
<!-- Dadurch ergeben sich zwei Frame-Fenster,
deren Inhalt hier bestimmt wird -->
</frameset>

9.4: Detailbeispiel 3: Zwei Frames nebeneinander mit senkrechter Teilung.

Mit dem Attribut cols= teilen Sie das Anzeigefenster in Spalten auf (cols = columns = Spalten).
Dahinter bestimmen Sie, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von
cols="200,*" eine Aufteilung in zwei Spalten erzwungen, wobei die linke Spalte 200 Pixel des
Anzeigefensters in Anspruch nimmt, die rechte den Rest. Bei cols= sind die gleichen Angaben
mglich wie bei rows=.

Detailbeispiel 4:
<frameset cols="40%,60%">
<!-- Dadurch ergeben sich zwei
Frame-Fenster, deren Inhalt hier bestimmt wird
Das erste Frame-Fenster wird normal definiert,
anstelle des zweiten folgt jedoch das folgende

9.1 Framesets und Frames definieren

275

untergeordnete Frameset: -->

<frameset rows="20%,80%">
<!-- Noch mal zwei Frame-Fenster, deren
Inhalt hier bestimmt wird -->
</frameset>
</frameset>

9.5: Detailbeispiel 4: Drei Frames mit waagrechter und senkrechter Teilung.

In diesem Beispiel werden Reihen und Spalten fr eine komplexere Aufteilung von FrameFenstern definiert. Bei solchen Aufteilungen mssen Sie zunchst das gesamte Fenster im Auge
behalten. Dieses Fenster wird im Beispiel zunchst mit cols="40%,60%" in zwei Spalten
aufgeteilt. Das erste Frame-Fenster fr die linke Spalte (im obigen Beispiel nicht explizit
definiert, dort steht nur der lngere Kommentar) wird ein ganz normales Frame-Fenster mit
Inhalt. Anstelle des zweiten Frame-Fensters fr die rechte Spalte wird jedoch ein neues,
untergeordnetes Frameset definiert. Mit der Angabe rows="20%,80%" erhlt es eine Aufteilung
in zwei Reihen, also fr zwei untereinander liegende Frame-Fenster, wobei das obere 20% der
zur Verfgung stehenden Flche einnimmt und das untere 80%.

Detailbeispiel 5
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<!-- zwei Frames, deren Inhalt hier bestimmt wird -->
</frameset>
<frameset cols="50%,50%">
<!-- noch mal zwei Frames, deren Inhalt
hier bestimmt wird -->
</frameset>
</frameset>

9.6: Detailbeispiel 5: Vier Frames in Schachbrettanordnung.

Das Beispiel zeigt eine komplexere Aufteilung in vier Bereiche. Da in einem solchen Fall alle
Bereiche gleich gro sind, ist es egal, ob Sie mit der Definition der Spalten oder Reihen beginnen.

276

Kapitel 9: Frames mehrere Fenster

Wichtig ist die durchgngige Logik. Wenn Sie wie im Beispiel mit der Definition der Reihen
beginnen, mssen Sie anstelle von Frames untergeordnete Framesets definieren, in denen Sie
jede der beiden Reihen in zwei Spalten aufteilen. Erst innerhalb dieser untergeordneten Framesets werden dann die eigentlichen Frames definiert.
Beachten Sie: Framesets sollten immer so definiert sein, dass das gesamte Anzeigefenster abgedeckt wird. Verwenden Sie dazu Prozentangaben, die in der Summe 100 ergeben, oder das SternZeichen *.
Neben der prozentualen Aufteilung ist noch eine weitere relative Angabe zur Frame-FensterAufteilung erlaubt. Sie knnen das relative Verhltnis bei rows= oder cols= auch durch Zahlen,
gefolgt von einem Stern-Zeichen, bestimmen.
Mit einer Aufteilung wie rows="1*,5*,3*" definieren Sie drei Reihen, also Platz fr drei untereinander liegende Frame-Fenster, wobei das oberste Frame-Fenster ein Neuntel einnimmt, das
zweite fnf Neuntel und das dritte drei Neuntel (also ein Drittel). Die 9 ergibt sich durch
Zusammenzhlen von 1, 3 und 5, wodurch das relative Verhltnis ermittelt wird.

9.1.4

Frames zu einem Frameset definieren

Nachdem Sie durch die Definition von Framesets die gewnschte Aufteilung des Anzeigefensters
bestimmt haben, geben Sie mit der Definition der Frames an, welche Inhalte in den einzelnen
Frame-Fenstern zunchst angezeigt werden sollen.

9.7: So sieht das nachfolgende Beispiel mit drei Dateien und zwei Frames im Browser aus.

Beispiel Teil 1 Datei mit Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation">

9.1 Framesets und Frames definieren

<frame src="startseite.htm" name="Daten">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>

Beispiel Teil 2 Datei verweise.htm fr linkes Frame-Fenster:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#E0C0FF" text="#000000" link="#804080" vlink="#603060"
alink="#804080">
<h1>Navigation</h1>
<p>
<a href="../index.htm" target="Daten">
<b>&Uuml;ber Frames</b>
</a><br>
<a href="../../index.htm" target="Daten">
<b>&Uuml;ber HTML</b>
</a><br>
<a href="../../../index.htm" target="Daten">
<b>Noch viel mehr</b>
</a>
</p>
</body>
</html>

Beispiel Teil 3 Datei startseite.htm fr rechtes Frame-Fenster:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000"
alink="#A00000">
<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!</p>
</body>
</html>

277

278

Kapitel 9: Frames mehrere Fenster

Mit je einem <frame>-Tag definieren Sie innerhalb eines Framesets die zugehrigen Frames
(frame = Rahmen). Theoretisch knnen Sie das <frame>-Tag ohne weitere Attribute notieren. In
diesem Fall zeigt der Browser in dem entsprechenden Frame-Fenster eine leere Flche an. Normalerweise werden Sie jedoch die Frame-Fenster mit Inhalt fllen wollen. Dazu dient das
Attribut src= (src = source = Quelle). Bei der Wertzuweisung an dieses Attribut knnen Sie die
Datei oder Datenquelle angeben, die im entsprechenden Frame-Fenster zunchst angezeigt
werden soll. Dabei gelten die Regeln zum Referenzieren in HTML mit einer Ausnahme: Sie
drfen keine Anker innerhalb der Datei mit Framesets adressieren. Eine Wertzuweisung wie
src="#weiter_unten" ist also nicht erlaubt widerspricht allerdings sowieso jeder Logik.
Sie knnen also andere HTML-Dateien des eigenen Projekts in das Frame-Fenster laden, aber
auch andere Dateitypen wie z.B. Grafiken. Auch Dateien oder Datenquellen von entfernten
Servern knnen Sie mit absoluter http://-Adressierung beispielsweise in ein Frame-Fenster
laden. Doch dabei ist hchste Vorsicht geboten: Damit machen Sie sich fremde Inhalte zu Eigen
und knnen sich schnell juristischen rger einhandeln.
Ferner sollten Sie gleich fr jedes definierte Frame-Fenster mit name= einen Namen vergeben.
Diese Namen brauchen Sie, um Verweise zu definieren, die in diesem Frame-Fenster angezeigt
werden sollen. Ferner sind die Namen wichtig, wenn Sie zustzlich JavaScript einsetzen und
damit auf einzelne Frame-Fenster zugreifen wollen.
Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche
Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern
erlaubt. Benutzen Sie als Sonderzeichen im Namen hchstens den Unterstrich (_), den
Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Im Hinblick auf JavaScript darf der
Name sogar nur Buchstaben, Ziffern und den Unterstrich (_) enthalten. Gro- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.
Definieren Sie fr jede Zelle Ihrer durch das Frameset definierten Tabelle ein Frame-Fenster.
Im obigen Beispiel wird ein Frameset fr zwei Frame-Fenster definiert, mit der Aufteilung, die
durch die Angabe cols="250,*"> bestimmt wird. Ins linke Frame-Fenster, also dem mit 250
Pixeln Breite, soll im Beispiel eine Datei namens verweise.htm geladen werden, und ins rechte
Frame-Fenster eine Datei namens startseite.htm. So wie im Beispiel bei src= notiert, mssen
sich beide Dateien im gleichen Verzeichnis befinden.
Die beiden HTML-Dateien selbst sind gewhnliche HTML-Dateien. An der Datei verweise.
htm knnen Sie bei den darin notierten Verweisen sehen, wozu die Namen der Frame-Fenster
gut sind: Mit target="Daten" wird dort bei den Verweisen bestimmt, dass das Verweisziel in
dem Frame-Fenster angezeigt wird, das bei der Frame-Fenster-Definition mit name="Daten"
den entsprechenden Namen erhalten hat. Weitere Einzelheiten zu diesem Thema finden Sie im
Abschnitt 9.3 Verweise bei Frames.
Beachten Sie: Das frame-Element besteht nur aus dem Standalone-Tag <frame>. Wenn Sie
XHTML-konform arbeiten, mssen Sie das frame-Element als inhaltsleer kennzeichnen. Dazu
notieren Sie das allein stehende Tag in der Form <frame />. Weitere Informationen dazu im
Kapitel 14.1.11 zu XHTML und HTML.

9.1 Framesets und Frames definieren

9.1.5

279

Noframes-Bereich definieren

Fr Anwender, deren Browser keine Frames untersttzen, knnen Sie Ihr Projekt so gestalten,
dass solche Anwender dennoch Daten aufrufen knnen. Noframes-Bereiche haben dabei zwei
Aufgaben: Zum einen knnen sie in der Datei stehen, in der das Frameset definiert ist. Dort
knnen Sie fr Browser, die keine Frames anzeigen knnen oder bei denen der Anwender die
Anzeige von Frames abgeschaltet hat, einen alternativen Inhalt anbieten. Es kann sich um beliebige, mit HTML strukturierte Inhalte handeln.
Darber hinaus knnen Sie Noframes-Bereiche aber auch in HTML-Dateien verwenden, die
innerhalb des Framesets als Inhalte in Frame-Fenstern angezeigt werden sollen. Browser, bei
denen die Frames angezeigt werden, sollten den Inhalt solcher Noframes-Bereiche unterdrcken.
Browser, bei denen die Frames nicht angezeigt werden knnen oder keine Frames angezeigt werden, zeigen den Inhalt an. Auf diese Weise knnen Sie z.B. eine einfache Alternativ-Navigation
fr nicht framefhige Browser anbieten. Das folgende Beispiel zeigt die Verwendungsweisen fr
Noframes-Bereiche.
Beispiel Teil 1 Datei mit Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise2.htm" name="Navigation">
<frame src="startseite2.htm" name="Daten">
<noframes>
<h1>Willkommen!</h1>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
<p>W&auml;hlen Sie einen der Verweise aus:<br>
<a href="startseite2.htm"><b>Startseite</b></a><br>
<!-- weitere Verweise usw. --></p>
</noframes>
</frameset>
</html>

Beispiel Teil 2 Datei startseite2.htm fr rechtes Frame-Fenster:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000"
alink="#A00000">

280

Kapitel 9: Frames mehrere Fenster

<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!</p>
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen werden keine Frames angezeigt:</p>
<p><a href="frames2.htm">zur&uuml;ck zur Startseite</a></p>
</noframes>
</body>
</html>

Das Beispiel zeigt die Datei mit der Frameset-Definition und die Datei, die im rechten FrameFenster angezeigt wird. Die Datei verweise.htm, die ins linke Frame-Fenster geladen wird, ist in
diesem Zusammenhang hier unerheblich und wird deshalb nicht nochmal dargestellt.
Innerhalb von Dateien, die Framesets definieren, sollte ein Noframes-Bereich, markiert durch
<noframes> und </noframes>, am Ende des uersten Framesets vor dem letzten abschlieenden </frameset>-Tag notiert werden. Im obigen Beispiel wird nur ein einfaches Frameset defi-

niert, das aus zwei Frame-Fenstern besteht. In diesem Fall werden also die beiden Frame-Fenster
notiert und unterhalb davon, vor dem abschlieenden </frameset>, der Noframes-Bereich.
Innerhalb des Noframes-Bereichs knnen Sie alles notieren, was Sie sonst auch zwischen <body>
und </body> notieren knnen, also z.B. berschriften, Textabstze, Tabellen, Grafikreferenzen
usw. Da es sich bei Browsern, die keine Frames anzeigen knnen, in der Regel um sehr einfach
gestrickte Browser handelt oder um solche, die unter nichtgrafischen Oberflchen laufen,
brauchen Sie keinen bermigen Aufwand fr die Optik des Inhalts im Noframes-Bereich zu
betreiben. Eine saubere Strukturierung gengt.
Im obigen Beispiel ist innerhalb des Noframes-Bereichs der Datei mit der Frameset-Definition
eine Willkommens-berschrift notiert, ein Hinweis, dass es sich um ein Projekt mit Frames
handelt, und es werden Verweise angeboten. Beispielsweise der Verweis auf die Seite
startseite2.htm, die bei Anzeige von Frames im rechten Frame-Fenster erscheint. Ferner
knnten Sie an dieser Stelle all jene Verweise anbieten, die bei Anzeige von Frames in der links
angezeigten Datei verweise2.htm stehen. Auf diese Weise knnen Anwender ohne framefhigen Browser dennoch alle Verweise ausfhren, die sonst im Frameset angeboten werden.
In der Datei startseite2.htm taucht im obigen Beispiel jedoch auch ein Noframes-Bereich
auf. Fr Browser, die keine Frames anzeigen knnen, knnen Sie in solchen Bereichen Inhalte
anbieten, die sonst ber das Frameset erledigt werden beispielsweise einen Rckverweis auf die
Startseite. Diese Mglichkeit wird auch im Beispiel benutzt: Durch den Rckverweis auf die
Datei mit den Frameset-Definitionen, die ja auch einen Noframes-Bereich enthlt und dort
Verweise auf die brigen Projektseiten anbietet, knnen Sie eine vollstndige, wenn auch etwas
simple Alternativ-Navigation fr Anwender ohne framefhigen Browser realisieren.
Beachten Sie: Noframes-Bereiche in Projektdateien auerhalb der Datei mit Frameset-Definitionen sind allerdings mit Vorsicht zu genieen, denn leider werden sie nicht nur von nicht
framefhigen Browsern angezeigt, sondern auch von lteren framefhigen. So zeigt beispielsweise
Netscape 4.x den Noframes-Bereich in der Datei startseite2.htm des obigen Beispiels
gnadenlos an und verwirrt damit Anwender, bei denen das Frameset angezeigt wird. Internet

9.2 Eigenschaften von Frames

281

Explorer 5.x und Netscape 6.x unterdrcken dagegen Noframes-Bereiche in solchen Projektdateien.
Wenn Sie in Projektdateien, die in einem Frame-Fenster angezeigt werden, Noframes-Bereiche
notieren, mssen Sie fr solche Projektdateien die HTML-Variante Transitional whlen, denn
in der Strict-Variante gibt es keine Frames und auch keine Noframes-Bereiche.

9.1.6

Langbeschreibung fr Frame-Fenster

Sie knnen bei der Definition von Frames angeben, wo eine ausfhrliche Beschreibung des
Inhalts des betreffenden Frame-Fensters zu finden ist. Browser, die zwar Frames erkennen, aber
bei denen die Anzeige von Frames nicht mglich ist, z.B. akustische Ausgabesysteme, knnen
z.B. das bei der Langbeschreibung angegebene Ziel ausgeben. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation">
<frame src="startseite.htm" name="Daten"
longdesc="startseite_extra.htm">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
</html>

Erluterung: Mit dem Attribut longdesc= in einem <frame>-Tag knnen Sie auf eine Stelle
verweisen, wo der Inhalt dieses Frame-Fensters in einer lngeren Beschreibung zusammengefasst
wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Referenzieren in HTML.

9.2
9.2.1

Eigenschaften von Frames

Bildlaufleisten erzwingen/verhindern

Der Web-Browser verwaltet die Scrollbars (Bildlaufleisten) eines jeden Frame-Fensters

normalerweise automatisch. Wenn kein Blttern erforderlich ist, um den gesamten Fensterinhalt
anzuzeigen, erhlt das Fenster keine Scrollbars. Wenn der Inhalt grer ist, werden die FrameFenster automatisch mit Scrollbars ausgestattet. Sie knnen jedoch erzwingen, dass ein FrameFenster in jedem Fall Scrollbars bzw. keine Scrollbars hat. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>

282

Kapitel 9: Frames mehrere Fenster

<title>Text des universellen Titels</title>

</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation" scrolling="no">
<frame src="startseite.htm" name="Daten" scrolling="yes">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei
Ihnen werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

9.8:

Rechts ist eine (im Bild deaktivierte) Bildlaufleiste fr den Frame eingeblendet, egal, ob sie
bentigt wird oder nicht.

Durch die Angabe scrolling="yes" in einem <frame>-Tag erzwingen Sie, dass das
Anzeigefenster dieses Frame-Fensters in jedem Fall Scrollbars besitzt. Durch scrolling="no"
verhindern Sie, dass das Frame-Fenster Scrollbars erhlt, selbst wenn der Inhalt lnger ist.
Ebenfalls mglich ist die Angabe scrolling="auto", die jedoch mit der Voreinstellung
(Scrollbars bei Bedarf anzeigen) identisch ist und daher weggelassen werden kann.
Beachten Sie: Wenn Sie das Scrollen des Fensterinhalts verhindern, knnen Inhalte, die grer
sind als das Fenster, nicht vollstndig angezeigt werden. Verwenden Sie scrolling="no" daher
nur, wenn Sie sicher sind, dass der Fensterinhalt vollstndig in das Frame-Fenster passt. Die
Angabe ist zum Beispiel sinnvoll, wenn in einem Frame-Fenster dauerhaft ein Logo angezeigt
werden soll und sonst nichts. Bei greren Inhalten, vor allem in Frame-Fenstern mit relativer
Gre, sollten Sie mit dem Ausschalten der Scrollbars vorsichtig sein bedenken Sie, dass nicht
alle Anwender die gleiche Bildschirmauflsung haben wie Sie.

9.2.2

Mindestabstnde zwischen Fensterrand und

Fensterinhalt

Sie haben die Mglichkeit, den Abstand zwischen Fensterrand und dem angezeigten Inhalt eines
Frame-Fensters genau zu justieren. Auf diese Weise knnen Sie zum Beispiel breitere Seitenrnder in einem Frame-Fenster erzeugen. Wenn Sie einen festen Inhalt, etwa ein Logo, in einem

9.2 Eigenschaften von Frames

283

Frame-Fenster anzeigen wollen, knnen Sie das Logo durch Justage der Abstnde exakt in einem
Frame-Fenster platzieren. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation"
scrolling="no" marginwidth="3" marginheight="30">
<frame src="startseite.htm" name="Daten"
marginwidth="60" marginheight="30">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

9.9: In beiden Frames sind unterschiedliche Abstnde von Inhalt zum Fensterrand gesetzt.

Durch das Attribut marginwidth= [Pixel] in einem <frame>-Tag bestimmen Sie den Abstand
zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt in diesem Frame-Fenster
(margin = Rand, width = Breite). Durch das Attribut marginheight= [Pixel] bestimmen Sie den
Abstand zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt (height = Hhe).
Linke und rechte Rnder sind immer gleich gro, ebenso obere und untere.
Beachten Sie: Sie knnen zu beiden Werten Angaben machen, aber auch nur zu einem der
beiden. Mit den Angaben marginwidth="0" marginheight="0" sollte der Fensterinhalt exakt
in der linken oberen Ecke beginnen. Leider fgt Netscape 4.x bei der Anzeige doch immer noch
ein Pixel Seitenrand ein. Als Alternative dazu bleibt nur, den Inhalt mit Hilfe von CSS Stylesheets absolut zu positionieren mit top:0px und left:0px.

284

Kapitel 9: Frames mehrere Fenster

9.2.3

Unvernderbare Fenstergre

Normalerweise kann der Anwender in einem angezeigten Frameset die Gre der einzelnen
Frame-Fenster verndern, indem er die Maus auf die Rahmen zwischen Frame-Fenstern positioniert und durch Ziehen die Grenverhltnisse der Frame-Fenster einstellt. In vielen Fllen ist
das auch sinnvoll, und Sie sollten dem Anwender diese Freiheit lassen. Wenn Sie aber beispielsweise ein Frame-Fenster mit einem fixen Inhalt, haben, etwa einem Logo, knnen Sie verhindern, dass der Anwender die Fenstergre verndern kann. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation"
scrolling="no" noresize>
<frame src="startseite.htm" name="Daten">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

Durch das Attribut noresize in einem <frame>-Tag verhindern Sie, dass der Anwender die
Gre des Frame-Fensters verndern kann (noresize = no resize = keine Grenvernderung).
Beachten Sie: Nicht nur das Frame-Fenster, fr das Sie das Attribut notieren, kann dann nicht
mehr in der Gre verndert werden, sondern auch alle benachbarten Frame-Fenster. Im obigen
Beispiel kann der Anwender also weder das linke noch das rechte Frame-Fenster verndern. Das
ist eigentlich logisch, aber Sie sollten diese Folgewirkung bercksichtigen, wenn Sie erwgen, in
einem Frame-Fenster das Verndern der Gre zu verhindern.
Wenn Sie XHTML-konform arbeiten wollen, mssen Sie das hier beschriebene Attribut in der
Form noresize="noresize" notieren. Weitere Informationen dazu im Kapitel 14.1.11 ber
XHTML und HTML.

9.2.4

Rahmendicke/Unsichtbare Fensterrahmen

Sie knnen die normalerweise sichtbaren Rahmen zwischen Frame-Fenstern unterdrcken. Bei
unsichtbaren Fensterrahmen wirken die Frame-Fenster wie nahtlos aneinander gefgte Flchen
am Bildschirm. Leider gibt es hierbei bis auf den heutigen Tag Differenzen zwischen den
Browsern, die dieses Feature seit langem untersttzen, und dem W3-Konsortium, das eine
andere Variante durchsetzen will, an die sich die Browser aber nicht halten. Sie haben also die
Auswahl, HTML-konform zu schreiben, und die weit verbreiteten Browser ignorieren Ihre
Angaben, oder Sie schreiben fr die Browser und verzichten auf die HTML-Konformitt.

9.2 Eigenschaften von Frames

285

Beispiel 1 (HTML-konform):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*">
<frame src="verweise.htm" name="Navigation"
scrolling="no" frameborder="0">
<frame src="startseite.htm" name="Daten">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

9.10: Mit den offiziellen HTML-Attributen bleibt eine Trennlinie zwischen den Frames sichtbar.

Beispiel 2 (Browser-gerecht):
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*" frameborder="0"
framespacing="0" border="0">
<frame src="verweise.htm" name="Navigation" scrolling="no">
<frame src="startseite.htm" name="Daten">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

286

Kapitel 9: Frames mehrere Fenster

9.11: Mit browserspezifischen Attributen verschwindet die Trennlinie zwischen den Frames.

Wenn Sie HTML-konform arbeiten wollen, notieren Sie in einem gewnschten <frame>-Tag
das Attribut frameborder=. Mit frameborder="0" unterdrcken Sie die sichtbaren Rahmen
zwischen dem betroffenen Frame-Fenster und allen seinen Nachbarfenstern, und mit
frameborder="1" zeigen Sie die sichtbaren Rahmen explizit an (Letzteres entspricht allerdings
der Voreinstellung).
Bei der Syntax, die von den Browsern untersttzt wird, werden die dazu ntigen Attribute im
einleitenden <frameset>-Tag desjenigen Framesets notiert, fr das die Angaben dann gelten
sie betreffen dann also alle Rahmen innerhalb des Framesets.
border= [Pixel] ist Netscape-Syntax und bestimmt die Breite der Rahmen in Pixel. Erlaubt
sind Zahlenwerte von 0 (keine Rahmen anzeigen) und grer (border = Rahmen).
frameborder= [1/0 oder yes/no] bedeutet nach Microsoft-Syntax die Angabe, ob 3-D-Rahmen
angezeigt werden sollen oder nicht. Dieses Attribut ist also gleichnamig mit dem HTMLstandardkonformen Attribut, bedeutet jedoch etwas anderes.
framespacing= [Pixel] ist Microsoft-Syntax und bestimmt den Abstand zwischen FrameFenstern, mithin also die Breite der Rahmen in Pixel (spacing = Abstand).
Beachten Sie: Nur mit frameborder="0" framespacing="0" (also mit beiden Angaben)
unterdrcken Sie beim MS Internet Explorer die Rahmen konsequent. Wenn Sie nur
frameborder="0" angeben, zeigt der Internet Explorer sichtbare Abstnde zwischen den FrameFenstern an, allerdings nicht die blichen 3-D-Rahmen, sondern flache Zwischenrume. Um die
Rahmen beim Internet Explorer und bei Netscape zu unterdrcken, mssen Sie alle drei
Angaben frameborder="0" framespacing="0" border="0" notieren (wie im obigen Beispiel
2).
Wenn Sie die Rahmen zwischen den Frame-Fenstern unterdrcken, hat der Anwender keine
Mglichkeit, die Gre der Frame-Fenster zu verndern. Testen Sie Projekte mit rahmenlosen
Frames deshalb mglichst unter mehreren Bildschirmauflsungen und mit unterschiedlich
groem Anzeigefenster.

9.3 Verweise bei Frames

9.2.5

287

Farbige Fensterrahmen

Sie knnen erzwingen, dass Rahmen zwischen den Frame-Fenstern farbig dargestellt werden.
Diese Angaben gehren jedoch nicht zum HTML-Standard und erzeugen ungltiges HTML. Ein
Beispiel:
<html>
<head>
<title>Text des universellen Titels</title>
</head>
<frameset cols="250,*" bordercolor="#FFFF00">
<frame src="verweise.htm" name="Navigation" scrolling="no">
<frame src="startseite.htm" name="Daten">
<noframes>
<p>Dieses Projekt verwendet Frames. Bei Ihnen
werden keine Frames angezeigt.</p>
</noframes>
</frameset>
</html>

Mit den Attribut bordercolor= im obersten <frameset>-Tag knnen Sie eine Rahmenfarbe fr
alle Fensterrahmen bestimmen. Dabei gelten die Regeln zum Definieren von Farben in HTML
(Kapitel 3.5).

9.3

Verweise bei Frames

9.3.1

Verweise zu anderen Frames

Wenn Sie mit Framesets arbeiten, werden Sie hufig in einem Frame-Fenster Verweise anbieten
wollen, bei derem Anklicken das Verweisziel in einem anderen Frame-Fenster angezeigt werden
soll.
Detailbeispiel Teil 1 Frame-Definitionen:
<frameset cols="250,*">
<frame src="verweise.htm" name="links">
<frame src="startseite.htm" name="rechts">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>

Detailbeispiel Teil 2 Verweise in verweise.htm:

<a href="startseite.htm" target="rechts">Startseite</a><br>
<a href="news.htm" target="rechts">News</a><br>
<a href="feedback.htm" target="rechts">Feedback</a><br>
<a href="impressum.htm" target="rechts">Impressum</a><br>

288

Kapitel 9: Frames mehrere Fenster

Voraussetzung fr Verweise zu anderen Frames ist, dass die Frame-Fenster eines Framesets
Namen erhalten. Im obigen Beispiel wird ein Frameset mit zwei Frame-Fenstern definiert, die
mit dem Attribut name= im <frame>-Tag die Namen links und rechts erhalten.
Fr das Setzen eines Verweises zu einem anderen Frame-Fenster gelten beim href-Attribut wie
blich die Regeln zum Referenzieren in HTML. Damit das Verweisziel jedoch in einem anderen
Frame-Fenster angezeigt wird, notieren Sie im einleitenden Verweis-Tag zustzlich das Attribut
target= (target = Ziel). Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel
angezeigt werden soll.
Beachten Sie: Beim Namen, den Sie bei name= und dann bei target= angeben, soll zwar laut
HTML-Standard nicht zwischen Gro- und Kleinschreibung unterschieden werden. Doch
achten Sie in der Praxis unbedingt darauf, bei target= den Namen exakt so zu schreiben wie bei
name= vergeben. Die Browser unterscheiden nmlich sehr wohl zwischen Gro-/Kleinschreibung
allein schon im Hinblick auf JavaScript!
Wenn Sie eine Datei mit Verweisen haben, deren Verweisziele alle in einem bestimmten anderen
Frame-Fenster angezeigt werden sollen, sparen Sie Ressourcen, indem Sie eine Zielfensterbasis
(Kapitel 6.1.4) definieren.
Fr Verweise zu Zielen, die im gleichen Frame-Fenster angezeigt werden sollen wie der Verweis,
bentigen Sie normalerweise keine zustzliche Angabe im Verweis. Nur wenn Sie eine
Zielfensterbasis in der Datei mit dem Verweis definiert haben, mssen Sie explizit angeben, dass
die Datei im gleichen Frame-Fenster angezeigt werden soll. Dies erreichen Sie durch die Angabe
target="_self" im einleitenden Verweis-Tag.

9.3.2

Verweise zum Beenden von Framesets

Wenn Sie mit Framesets arbeiten, werden Sie in einem Frame-Fenster manchmal auch Verweise
anbieten wollen, bei deren Anklicken das Verweisziel nicht mehr in Ihrem Frameset angezeigt
werden soll. Besonders bei Verweisen zu fremden Web-Projekten ist es dringend angebracht, das
eigene Frameset zu beenden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#FFF0C0" text="#000000" link="#A00000" vlink="#600000"
alink="#A00000">
<h1>Willkommen</h1>
<p>W&auml;hlen Sie links einen Verweis aus!
Oder probieren Sie mal diesen hier:<br>
<a href="http://selfaktuell.teamone.de/" target="_parent"><b>SELFHTML
aktuell</b></a></p>
</body>
</html>

9.4 Eingebettete Frames

289

Das Beispiel zeigt eine HTML-Datei, die innerhalb eines Framesets zum Einsatz kommt. Darin
ist ein Verweis notiert, bei dessen Anklicken das Frameset gesprengt werden soll. Zu diesem
Zweck ist im einleitenden Verweis-Tag target="_parent" notiert.
target="_parent" bewirkt, dass das Verweisziel in dem Zustand des Anzeigefensters
angezeigt wird, der vor dem Start Ihres Framesets aktuell war.
target="_top" bewirkt, dass das Verweisziel in jedem Fall im gesamten Anzeigefenster
angezeigt wird, selbst dann, wenn das aktuelle Frameset in ein Frame-Fenster eines bergeordneten Framesets geladen wurde.
Weiterhin gibt es noch target="_blank", wodurch das Verweisziel in einem neuen Instanzfenster des WWW-Browsers angezeigt wird. Das Anzeigefenster mit Ihrem Frameset bleibt im
Hintergrund erhalten. Der Anwender kann wieder zu diesem Fenster wechseln, wenn er
mchte.
Beachten Sie: Anstelle von target="_blank" knnen Sie auch target="Halligalli" oder
sonst irgendeinen Unsinn notieren. Wenn es kein Fenster mit diesem Namen gibt, ffnen die
Web-Browser das Verweisziel in einem neuen Browser-Fenster.
Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es einzusetzen,
mssen Sie in der betreffenden Datei die HTML-Variante Transitional verwenden. Der Grund
ist, dass dieses Attribut fr Verweise bei Verwendung von Frames gedacht ist und Frames eine
eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional entspricht
(auf gut Deutsch: nicht der reinen Lehre entspricht).

9.4

Eingebettete Frames

9.4.1

Eingebettete Frames definieren

Eingebettete Frames werden vom MS Internet-Explorer ab Version 3.x interpretiert, von

Netscape bis einschlielich Version 4.x dagegen nicht. Seit HTML 4.0 gehren sie zum HTMLStandard. Eingebettete Frames sind ein eigenstndiges Gestaltungsmittel zur Informationsaufbereitung, das anders funktioniert als normale Frames. Eingebettete Frames erzeugen keine
Aufteilung des Bildschirms, sondern sind hnlich wie Grafiken Bereiche innerhalb einer HTMLDatei, in denen fremde Quellen, vor allem andere HTML-Dateien angezeigt werden knnen. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Eingebettete Frames definieren</title>
</head>
<body>
<h1>Fenstergucker</h1>

290

Kapitel 9: Frames mehrere Fenster

<p>Gucken Sie mal SELFHTML im Fenster an:</p>

<iframe src="../../../index.htm" width="90%"
height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten
Frames anzeigen: Sie k&ouml;nnen die eingebettete
Seite &uuml;ber den folgenden Verweis aufrufen:
<a href="../../../index.htm">SELFHTML</a></p>
</iframe>
</body>
</html>

9.12: SELFHTML erscheint innerhalb einer Web-Seite in einem eingebetteten Frame.

Fr HTML-Dateien mit eingebetteten Frames gilt das gewhnliche Grundgerst einer HTMLDatei (Kapitel 3.2.1). Eingebettete Frames knnen dann im Textkrper der HTML-Datei an
einer gewnschten Stelle vorkommen. Mit <iframe...> leiten Sie einen eingebetteten Frame
ein (iframe = inline frame = Rahmen im Textfluss). Mit dem Attribut src= bestimmen Sie, was in
dem eingebetteten Frame angezeigt werden soll. Es kann sich um eine andere HTML-Datei oder
eine beliebige andere lokale oder entfernte Datenquelle handeln. Bei der Wertzuweisung gelten
die Regeln zum Referenzieren in HTML.
Ferner sollten Sie fr den eingebetteten Frame mit name= einen Namen vergeben. Diesen Namen
brauchen Sie, um Verweise zu dem eingebetteten Frame zu definieren. Der Name sollte nicht zu
lang sein und darf keine Leerzeichen, Sonderzeichen oder deutschen Umlaute enthalten. Das
erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als
Sonderzeichen im Namen hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt

9.4 Eingebettete Frames

291

(:) oder den Punkt (.). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern
und den Unterstrich (_) enthalten. Gro- und Kleinschreibung werden bei Sprachen wie
JavaScript ebenfalls unterschieden.
Dringend zu empfehlen ist das Bestimmen der gewnschten Breite und Hhe des eingebetteten
Frame-Fensters. Die Breite geben Sie im einleitenden <iframe>-Tag mit dem Attribut width=
an, die Hhe mit height=. Erlaubt sind Pixelangaben oder Prozentwerte, die sich auf die Gre
des verfgbaren Raums beziehen.
Zwischen dem einleitenden <iframe> und dem erforderlichen, abschlieenden </iframe>
knnen Sie Text und andere Elemente notieren, die von Web-Browsern angezeigt werden, die
den eingebetteten Frame nicht interpretieren.
Beachten Sie: Wenn Sie das iframe-Element in einer HTML-Datei notieren, mssen Sie in
dieser Datei die HTML-Variante Transitional whlen. Eingebettete Frames gehren also auch
nicht zur reinen Lehre. Andere Mglichkeiten, um Inhalte aus anderen Dateien innerhalb
einer HTML-Datei anzuzeigen, sind Datendateien als Objekt (Kapitel 11.1.2, ebenfalls HTMLStandard), Layer mit Inhalt aus anderer Datei (Kapitel 12.1.1, Netscape-spezifisch) sowie Server
Side Includes (HTML-Standard-konform, jedoch nur in HTTP-Umgebung ausfhrbar).

9.4.2

Eigenschaften eingebetteter Frames

Sie knnen verschiedene weitere Eigenschaften definieren, um ein eingebettetes Frame-Fenster

zur Umgebung auszurichten. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Bild zum Scrollen</h1>
<iframe src="bild.jpg" name="Bildframe" width="300" height="200" align="left"
scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
<img src="bild.jpg" width="464" height="580" border="0" alt="Bild"></p>
</iframe>
<p>Dieses Bild wurde auf dem Karwendelstein bei Mittenwald
aufgenommen, in ca. 2400 Meter H&ouml;he. Es demonstriert, was einem in
einem Freistaat so alles passieren kann ...</p>
</body>
</html>

292

Kapitel 9: Frames mehrere Fenster

9.13: ber Attribute steuern Sie das Aussehen von eingebetteten Frames.

Das Beispiel zeigt, wie Sie ein eingebettetes Frame-Fenster dazu verwenden knnen, um eine
grere Grafik anzuzeigen und diese mit eigenen Scrollbars auszustatten.
Mit align="left" richten Sie den eingebetteten Frame links aus. Nachfolgende Inhalte flieen
dann rechts um den Frame. Mit align="right" richten Sie den eingebetteten Frame rechts aus
und nachfolgende Inhalte flieen links um den Frame. Dieses Attribut ist jedoch als deprecated
eingestuft und durch die CSS-Eigenschaft text-align ersetzbar (z.B. <iframe style="textalign:left">).
Mit scrolling="yes" knnen Sie Scrollbars (Bildlaufleisten) in dem eingebetteten Frame
erzwingen, mit scrolling="no" unterdrcken. scrolling="auto" knnen Sie ebenfalls
angeben, doch dies entspricht der Voreinstellung. Mit frameborder="0" knnen Sie den sichtbaren Auenrahmen des eingebetteten Frames unterdrcken. frameborder="1" ist die Voreinstellung.
Zwei weitere Attribute, nmlich hspace= und vspace=, werden vom Internet Explorer ebenfalls
interpretiert, sind aber im Zusammenhang mit eingebetteten Frames nicht im HTML-Standard
verzeichnet was etwas inkonsistent ist, da das align-Attribut bei solchen Frame-Fenstern
genauso wirkt wie etwa bei Grafiken oder Objekten. Mit hspace= [Pixel] bestimmen Sie den
Abstand zum Text neben dem eingebetteten Frame, mit vspace= [Pixel] den Abstand zum Text
ber bzw. unter dem Frame (hspace = horizontal space = horizontaler Abstand, vspace = vertical
space = vertikaler Abstand). Beide Angaben erzeugen jedoch ungltiges HTML.
Beachten Sie: Genau wie bei normalen Frames besteht auch bei eingebetteten Frames die
Mglichkeit, mit dem Attribut longdesc= eine Langbeschreibung (Kapitel 9.1.5) zu referenzieren.

9.4.3

Verweise zu eingebetteten Frames

In einer HTML-Datei, in der Sie einen eingebetteten Frame definieren, knnen Sie mit
Verweisen auch den Inhalt des eingebetteten Frames ndern. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

9.4 Eingebettete Frames

<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Fernsteuerung</h1>
<iframe src="startseite.htm" name="Fensterlein"
width="500" height="400" marginheight="10"
marginwidth="10" align="right">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>
<p>
<a href="willkommen.htm" target="Fensterlein">
<b>andere Seite</b>
</a><br>
<a href="startseite.htm" target="Fensterlein">
<b>erste Seite</b>
</a>
</p>
</body>
</html>

9.14: Ein Klick auf die Links zeigt im eingebetteten Frame jeweils eine andere Web-Seite an.

293

294

Kapitel 9: Frames mehrere Fenster

Voraussetzung fr Verweise zu einem eingebetteten Frame ist, dass der eingebettete Frame mit
name= einen Namen erhalten hat. Im obigen Beispiel ist das der Name Fensterlein. Fr das
Setzen eines Verweises zu dem eingebetteten Frame gelten die blichen Regeln zum
Referenzieren in HTML. Damit das Verweisziel in dem Frame angezeigt wird, notieren Sie im
einleitenden Verweis-Tag zustzlich die Angabe target= (target = Ziel). Dahinter folgt der
Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll.

9.5

Frames als Mittel fr Seitenlayouts

9.5.1

Sinnvolle Einsatzmglichkeiten fr Frames

Frames, also sie Informationsverteilung auf mehrere, voneinander unabhngige Fenster sind ein
faszinierendes Werkzeug, aber auch ein Werkzeug, mit dem man viel verkehrt machen kann.
Generell gilt: Jeder Einsatz von Frames muss gerechtfertigt sein. Das bedeutet: Die Verwendung
der Frame-Technik muss dem Anwender als sinnvoll und vorteilhaft erscheinen. Wer Frames aus
purem Selbstzweck einsetzt, muss damit rechnen, als technikverliebter HTML-Novize statt als
souverner Web-Designer betrachtet zu werden.
Der Grund dafr ist, dass Frames nicht wegzudiskutierende Nachteile haben:
Probleme bei nicht framefhigen Web-Browsern: Frames werden nicht von allen WebBrowsern angezeigt. Da die gesamte Struktur eines auf Frames basierenden Projekts von der
Struktur herkmmlicher Projekte entscheidend abweicht, kann ein Anbieter von Frames
solchen Anwendern, die keine Frames anzeigen knnen, entweder gar keine Alternative
anbieten oder eine zweigleisige Alternative, die sehr aufwendig zu realisieren und zu pflegen
ist.
Frames und Bildschirmauflsung: Bei kleineren Bildschirmen, z.B. bei Notebooks oder
Handheld-Computern, sind mehr als zwei Frame-Fenster bereits eine Zumutung frs Auge
und die bersicht.
Ladezeiten: Frames verlangen mehr HTTP-Kommunikation zwischen Browser und Server, da
insgesamt mehr Dateien geladen werden mssen. Im Web kann es unter ungnstigen
Verhltnissen leichter zu lngeren Ladezeiten kommen.
Problematisches Direktansteuern von untergeordneten Seiten: Es ist zwar theoretisch
mglich, aber meistens nicht im Sinne des Anbieters, wenn andere Anwender ein Lesezeichen
oder einen Verweis auf eine HTML-Datei setzen, die Teil eines Framesets ist. Das ist in vielen
Fllen rgerlich. So wird beispielsweise anderen Informationsanbietern die Mglichkeit
genommen, in einem bestimmten Informationszusammenhang auf eine bestimmte Seite in
einem fremden Projekt zu verweisen.
In folgenden Fllen ist der Einsatz von Frames fr den Anwender am ehesten nachvollziehbar:
Zum schnellen Wechseln zwischen Informationseinheiten: In diesem Fall enthlt ein FrameFenster ein umfangreiches Verzeichnis mit anklickbaren Verweisen auf einzelne Informationsseiten, die in einem anderen, festen Frame-Fenster angezeigt werden. Das Inhaltsverzeichnis bleibt also jederzeit eingeblendet, und der Anwender kann zu jedem Zeitpunkt
einen neuen Verweis daraus auswhlen. Das erspart dem Anwender den wiederholten Rck-

9.5 Frames als Mittel fr Seitenlayouts

295

sprung von den einzelnen Informationsseiten auf das bergeordnete Verzeichnis.

Beispiel: Ein Anbieter von Ferienappartements kann alle zur Verfgung stehenden Objekte in
einem Verweis-Verzeichnis auflisten und das jeweils ausgewhlte Objekt in einem festen
anderen Frame-Fenster anzeigen.
Zum stndigen Einblenden projektglobaler Steuerverweise: Bei umfangreichen Projekten, in
denen dem Anwender das Gefhl des lost in hyperspace droht, ist es sinnvoll, in einem
separaten Frame-Fenster immer gltige Steuerverweise anzubieten, z.B. zur Homepage, zur
nchsthheren logischen Ebene, zum Stichwortverzeichnis oder zur Suchdatenbank. Bei
kleinen Projekten, die nur aus einer Handvoll Seiten bestehen, wirkt diese Technik dagegen
bertrieben und vermittelt dem Anwender eine falsche Vorstellung von der Gre des
Projekts. Wenn der Anwender in einem solchen Fall nach wenigen Mausklicks feststellt, dass
er bereits alles gesehen hat, wird er um so enttuschter sein.
Beispiel: Eine Zeitung, die im Web ein groes Archiv mit lteren Artikeln anbietet, knnte mit
Hilfe der Frame-Technik stndige Verweise zu einem thematisch sortierten Zugangsverzeichnis, zu einem Stichwortverzeichnis und einer Volltextsuchdatenbank fr die einzelnen Artikel
anbieten.
Zum gleichzeitigen Anzeigen von zu vergleichenden Informationen: Hypertext bedeutet nicht
nur, dem Anwender per Mausklick weitere Informationen zur Verfgung zu stellen, sondern
auch, dem Anwender die Mglichkeit zu bieten, sich selbst Informationen so zusammenzustellen, dass er sie optimal miteinander vergleichen und daraus Schlsse oder Entscheidungen
ableiten kann. Zu diesem Zweck eignet sich die Frame-Technik hervorragend, da sie es
erlaubt, verschiedene, getrennt voneinander gespeicherte Informationen auf Anwenderwunsch gleichzeitig anzuzeigen.
Beispiel: Eine Verbraucherberatung knnte in einem viergeteilten Frameset in zwei Frames
zwei gleichartig aufgebaute Verweis-Verzeichnisse zu Produkttests anbieten. Im dritten
Frame-Fenster wird der Produkttest angezeigt, den der Anwender im ersten Frame-Fenster
mit Verweisen auswhlt; im vierten Frame-Fenster kann der Anwender einen Produkttest
anzeigen, den er im zweiten Frame-Fenster mit Verweisen auswhlt. Auf diese Weise kann der
Anwender beliebige getestete Produkte direkt miteinander vergleichen. Voraussetzung hierzu
ist natrlich, dass alle Produkttests einen einheitlichen Aufbau und ein einheitliches
Bewertungsschema haben, um direkte Vergleiche zu erlauben.
Bei besonders kunstvoller Seitengestaltung: In diesem Fall muss der Anwender auf den ersten
Blick erkennen knnen, dass die Frame-Technik eine bestimmte knstlerische Aussage untersttzen soll.
Bei Verwendung von Frames besteht auch noch eher als bei einfachen Seiten die Gefahr eines
gestalterischen Overkills. Achten Sie bei Frames unbedingt darauf, dass die Farben der Inhalte in
den verschiedenen Frame-Fenstern insgesamt miteinander harmonieren. Das Gleiche gilt auch
fr andere optische Eigenschaften wie Schriftarten, Schriftgren usw. Ein Navigationsfenster
muss nicht krampfhaft anders aussehen als ein inhaltstragendes Fenster, damit auch ja jeder
Besucher sieht, dass es sich um Frames handelt. Kontraste zwischen Frame-Fenstern drfen
nicht die Regeln einer homogenen Gesamtgestaltung verletzen.

296
9.5.2

Kapitel 9: Frames mehrere Fenster

Unfaire Schaufenster-Effekte

Mit Hilfe von Frames ist es auch mglich, fremde Web-Seiten innerhalb eines Frame-Fensters im
eigenen Web-Projekt darzustellen. Dies ist jedoch sehr problematisch und in den meisten Fllen
unfair. Denn auf diese Weise verkommen fremde Web-Seiten zu Schaufenstern innerhalb des
eigenen Web-Projekts. Das ist eine unfeine Geste gegenber den Fremdanbietern, weil es das
eigene Web-Projekt in den Augen des Anwenders als Mega-Projekt erscheinen lsst. Es ist
auch juristisch bedenklich, da Sie sich leicht eine Klage wegen Urheberrechtsverletzung
einhandeln knnen, wenn Sie Fremdinhalte vereinnahmen.
Ferner kann es auch passieren, dass in einem Frame-Fenster eine Fremdanbieter-Seite angezeigt
wird, die ihrerseits Frames einsetzt. So kommt es zu einem rgerlichen Fraktal-Effekt von
Frame-Fenstern auf dem Bildschirm des Anwenders.
Wenn Sie innerhalb eines Frame-Projekts auf fremde Seiten verweisen, sollten Sie eine der
folgenden Mglichkeiten whlen:
Ursprnglichen Fensterzustand wiederherstellen: Setzen Sie den Verweis so, dass der Anwender Ihr definiertes Frameset verlsst und wieder den Fensterzustand erhlt, den er vor Aufruf
Ihres Projekts hatte. Dies erreichen Sie durch Verweise von der Art:
<a href="http://..." target="_parent">Verweistext</a>

Doppelverweis anbieten: Dadurch berlassen Sie dem Anwender die Entscheidung, wie er die
fremde Seite angezeigt bekommen will. Notieren Sie zwei Verweise direkt unter- oder
nebeneinander, die das gleiche Ziel haben, etwa in der Weise:
<a href="http://..." target="RechtsUnten">Fremde Seite im Frame rechts unten
anzeigen</a><br>
<a href="http://..." target="_parent">Fremde Seite voll anzeigen</a>

Anwender auf Mglichkeit zum Verndern der Frames hinweisen: Wenn Sie keine der beiden
anderen Mglichkeiten anbieten wollen, sollten Sie wenigstens das Verndern der FrameFenstergren durch den Anwender erlauben und den Anwender auf diese Mglichkeit
explizit hinweisen. Um das Verndern der Frame-Fenster durch den Anwender zu erlauben,
verzichten Sie einfach auf das Attribut noresize im <frame>-Tag.
Mit Hilfe von JavaScript ist es mglich, die Seitenanzeige in Frames zu verhindern (Kapitel 19.2).

297

10 Formulare

10.1

Formulare definieren

10.1.1

Allgemeines zu Formularen

HTML stellt die Mglichkeit zur Verfgung, Formulare zu erstellen. In Formularen kann der
Anwender Eingabefelder ausfllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Eintrge auswhlen usw. Wenn das Formular fertig ausgefllt ist, kann der Anwender auf einen Button klicken, um das Formular abzusenden.
Dazu geben Sie beim Erstellen eines Formulars an, was mit den Daten des ausgefllten Formulars passieren soll. Sie knnen sich die ausgefllten Daten beispielsweise per E-Mail zuschicken
lassen oder von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen. Formulare knnen sehr unterschiedliche Aufgaben haben. So werden sie zum Beispiel eingesetzt,
um bestimmte, gleichartig strukturierte Ausknfte von Anwendern einzuholen,
um Anwendern das Suchen in Datenbestnden zu ermglichen,
um Anwendern die Mglichkeit zu geben, selbst Daten fr einen Datenbestand beizusteuern,
um dem Anwender die Mglichkeit individueller Interaktion zu bieten, etwa um aus einer
Produktpalette etwas Bestimmtes zu bestellen.
Ein Softwarehersteller knnte z.B. ein Formular zur Verfgung stellen, in dem der Anwender
angeben kann, welche Produkte der Firma er besitzt, wie er Kenntnis von den Produkten
erhalten hat, welchen Beruf er ausbt, auf welchem Rechnertyp die Software bei ihm luft usw.
Auf diese Weise knnte er gleichartig strukturiertes und daher gut vergleichbares Feedback von
Anwendern einholen.
Viele Suchdienste im Internet bieten dem aufrufenden Web-Browser Eingabeformulare an, in
denen der Anwender seinen Suchwunsch spezifizieren kann. Ohne solche Formulare wre das
Durchsuchen gar nicht mglich. Die meisten Suchdienste bieten darber hinaus auch die
Mglichkeit an, eigene Internet-Adressen in die Datenbank einzuspeisen. Das Einholen der dazu
ntigen Information geschieht ebenfalls mit Hilfe von Formularen.
Immer zahlreicher werden auch die Online-Shops im Internet. Egal ob Tickets, Pizza oder Unterwsche um solche Bestell-Services zu realisieren, sind Formulare erforderlich, in denen der
Anwender seine Bestellwnsche genau angeben kann.
Wenn Sie dem Anwender auf Ihren Web-Seiten einfach nur eine Mglichkeit anbieten wollen,
direkt mit Ihnen in Kontakt zu treten, gengt allerdings auch ein einfacher E-Mail-Verweis an
die eigene E-Mail-Adresse (Kapitel 6.4).

298

Kapitel 10: Formulare

Beachten Sie: Nicht wenige Anbieter versuchen ber Formulare, Anwenderadressen zu sammeln,
um diese dann zu verkaufen oder um Ausknfte einzuholen, zu denen ein Anwender nicht
verpflichtet ist. Dazu wird hufig ein Anwenderbegehren als Kder benutzt beispielsweise ein
Gewinnspiel oder die Download-Mglichkeit der kostenlosen Ausprobierversion einer teueren
Software.
Dieser Missbrauch hat einige selbsternannte Hter des Datenschutzes auf den Plan gerufen, die
aber leider an der falschen Ecke kehren und sich nicht an die rechtlich meist gut abgesicherten
Datenjger wenden, sondern an ahnungslose Homepage-Besitzer, die ein kleines Formular im
Web haben und pltzlich dafr abgemahnt werden. Dabei wird mit dem Prinzip der so genannten Datensparsamkeit argumentiert (siehe auch Hinweise zum Teledienste-Datenschutzgesetz (TDDSG) im Abschnitt Gesetze fr neue Medien (in Deutschland), Kapitel 25.6.4). Versuchen Sie also nicht, den Anwender mit Hilfe von Formularen wie eine Zitrone auszuquetschen.
Beschrnken Sie sich auf solche Formularfelder, die fr den Formularzweck erkennbar ntig
sind.

10.1.2

Formularbereich definieren

Sie knnen an einer beliebigen Stelle innerhalb des Dateikrpers einer HTML-Datei ein Formular definieren.
Beispiel 1:
<form action="http://www.ihr-guter-name.de/cgi-bin/feedback.pl" method="get">
<!-- hier folgen die Formularelemente -->
</form>

Beispiel 2:
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<!-- hier folgen die Formularelemente -->
</form>

Mit <form>...</form> definieren Sie ein Formular (form = Formular). Alles, was zwischen dem
einleitenden <form>-Tag und dem abschlieenden Tag </form> steht, gehrt zum Formular.
Das sind hauptschlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons.
Um die Elemente zu platzieren und zu beschriften, knnen Sie dazwischen aber auch andere
HTML-Elemente notieren. Dabei mssen Sie allerdings Folgendes beachten: Nach der HTMLVariante Strict drfen Sie innerhalb eines Formulars nur Block-Elemente (und ScriptBereiche) notieren, also etwa berschriften, Textabstze, allgemeine Bereiche oder Tabellen. In
der HTML-Variante Transitional ist es dagegen auerdem erlaubt, zwischen <form> und
</form> auch gemischten Inhalt aus Text und Inline-Elementen zu notieren. Um die etwas
lstige und an dieser Stelle nicht ganz nachvollziehbare Restriktion in der Strict-Variante zu
umgehen, knnen Sie sich damit behelfen, dass Sie das Formular folgendermaen strukturieren:
<form><div> <!-- Formularinhalt --> </div></form>

Innerhalb des div-Elements, das da innerhalb des Formulars notiert ist, haben Sie auch in der
Strict-Variante die Freiheiten der Transitional-Variante. Eine andere Mglichkeit besteht
darin, anstelle des div-Elements mit dem fieldset-Element zu arbeiten und Formularinhalte

10.1 Formulare definieren

299

darin einzuschlieen auch innerhalb des fieldset-Elements haben Sie alle Freiheiten (siehe
dazu Abschnitt 10.8, Elemente gruppieren).
Im einleitenden <form>-Tag geben Sie mit dem Pflichtattribut action= an, was mit den
Formulardaten passieren soll, wenn der Anwender das Formular absendet (action = Aktion). Die
Wertzuweisung an action= kann beispielsweise eine E-Mail-Adresse (normalerweise Ihre
eigene) mit vorangestelltem mailto: sein so wie im zweiten der obigen Beispiele (mailto =
sende an). Dann werden die ausgefllten Formulardaten an diese E-Mail-Adresse geschickt,
sofern das mglich ist. Oder Sie rufen ein Programm auf dem Server-Rechner auf, meistens ein
CGI-Script, das die Daten weiterverarbeitet so wie im ersten der obigen Beispiele.
Sie knnen bei action= auch eine HTML-Datei angeben. Diese wird bei Absenden des
Formulars aufgerufen und kann die Formulardaten z.B. mit JavaScript weiterverarbeiten. Das ist
beispielsweise fr mehrseitige Formulare interessant. Bercksichtigen Sie dabei aber, dass
JavaScript nur dann Zugriff auf Daten hat, wenn die Methode get verwendet wurde. Bei einigen
Browsern, z.B. bei Opera, funktioniert das bergeben von Formulardaten zwischen HTMLDateien auch nur in HTTP-Umgebung, also nicht lokal ohne Server-Kommunikation.
Bei der Wertzuweisung an action= gelten die Regeln zum Referenzieren in HTML. Das
Referenzieren mit relativen oder absoluten Pfadangaben ist also ebenso mglich wie das oben in
Beispiel 1 gezeigte Referenzieren mit einem absoluten URI, z.B.:
<form action="/cgi-bin/auswert.pl">
<form action="../../cgi-bin/suche.cgi">

Eine weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut method=. Dabei
bestimmen Sie, nach welcher HTTP-bertragungsmethode die Formulardaten an ihr Ziel
gelangen. Dabei gibt es zwei mgliche Wertzuweisungen:
Wenn Sie method="get" whlen (diese Angabe ist brigens nicht zwingend erforderlich, da
get als Default-Einstellung definiert ist), werden die Daten des ausgefllten Formulars als
Parameter an die Aufrufadresse angehngt. Die Anfrage, die beim Server eintrifft, sieht dann
beispielsweise so aus: http://www.ihr-guter-name.de/cgi-bin/feedback.cgi?
AnwenderName=Stefan+M%FCnz&[email protected]&Text=Das+ist+e
in+kleiner+Text. Das verarbeitende Script kann diese als Parameter bergebene Zeichen-

kette auslesen und fr die Datenverarbeitung auseinander drseln.

Wenn Sie method="post" whlen, werden die Daten des augefllten Formulars vom WebServer ber den Standardeingabekanal zur Verfgung gestellt, und ein auswertendes CGIScript muss die ankommenden Daten behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde (post = verschicken). Bei CGI-Scripts mssen Sie diese Methode
auf jeden Fall dann verwenden, wenn das Script die POST-Methode verarbeitet und wenn die
Formulardaten zu umfangreich fr die GET-Methode sind.
Das W3-Konsortium empfiehlt, die Methode get dann zu whlen, wenn das auswertende
Programm die Daten nur als Input bentigt (z.B. fr eine Suche), whrend die Methode post fr
Flle empfohlen wird, in denen das auswertende Programm Seiteneffekte wie das Einspeisen
der Daten in eine Datenbank ausfhrt.
Wenn Sie sich die Formulardaten per E-Mail zuschicken lassen, wie im zweiten obigen Beispiel
gezeigt, dann benutzen Sie immer method="post". Auerdem sollten Sie bei E-Mail-Empfang
von Formulardaten im einleitenden <form>-Tag enctype="text/plain" mit angeben. Denn

300

Kapitel 10: Formulare

Formulardaten sind normalerweise nach einem Schema kodiert, das fr Menschen keine Freude
zu lesen ist. Mit der genannten Angabe erhalten Sie zumindest von Anwendern, die Ihr Formular
mit einem modernen Web-Browser ausfllen, ordentlich formatierte E-Mails.
Beachten Sie: Bei E-Mail-Formularen besteht keine Garantie auf Erfolg. Es hngt vom Browser
und anderen Einstellungen auf dem Rechner des Anwenders ab, ob der Formularversand klappt.
E-Mail-Formulare gelten deshalb mittlerweile als unsauber, zumal es Alternativen gibt. Mehr
dazu im Abschnitt 10.12 Formulare verarbeiten.

10.1.3

Zielfenster fr Server-Antwort

Wenn Sie mit Frames arbeiten und in einem Frame-Fenster ein Formular haben, nach dessen
Absenden die Server-Antwort bzw. die Antwort eines CGI-Scripts in einem anderen FrameFenster angezeigt werden soll, knnen Sie das gewnschte Zielfenster angeben. Ein Beispiel:
<form action="/cgi-bin/auswert.pl" method="get" target="Daten">
<!-- hier folgen die Formularelemente -->
</form>

Mit dem Attribut target= knnen Sie im einleitenden <form>-Tag den Namen des FrameFensters angeben, in dem die Server-Antwort ausgegeben werden soll. Es muss sich entweder um
einen Fensternamen handeln, der fr ein Frame-Fenster dem name-Attribut im <frame>-Tag
vergeben wurde, oder um einen der folgenden reservierten Fensternamen:
_self, um die Server-Antwort im aktuellen Fenster auszugeben,
_parent, um fr die Server-Antwort bei verschachtelten Framesets das aktuelle Frameset zu
sprengen,
_top, um fr die Server-Antwort bei verschachtelten Framesets alle Framesets zu sprengen.
Beachten Sie: Das target-Attribut ist zwar nicht als deprecated gekennzeichnet, doch um es
einzusetzen, mssen Sie die HTML-Variante Transitional verwenden. Der Grund ist, dass
dieses Attribut vorwiegend fr Verweise bei Verwendung von Frames gedacht ist und Frames
eine eigene HTML-Variante haben, die von der Einstufung her der Variante Transitional
entspricht (auf gut Deutsch: nicht der reinen Lehre entspricht).

10.1.4

Zu verarbeitende Zeichenstze

Sie knnen angeben, nach welchen Zeichenstzen eingegebene Formulardaten interpretiert

werden sollen. Dabei knnen Sie einen oder mehrere Zeichenstze angeben. Ein Beispiel:
<form action="/cgi-bin/auswert.pl" method="get" accept-charset="ISO-8859-1, ISO8859-2">
<!-- hier folgen die Formularelemente -->
</form>

Mit dem Attribut accept-charset= knnen Sie Zeichenstze angeben. Trennen Sie mehrere
Angaben durch Kommata und/oder Leerzeichen. Erlaubt sind Zeichensatzangaben, wie sie auf
der Web-Adresse http://www.iana.org/assignments/character-sets angegeben sind.

10.2 Eingabefelder und Eingabebereiche

10.1.5

301

Weitere Informationen

Zur Datenverarbeitung von Formularen mit Hilfe von CGI-Scripts finden Sie zustzliche Informationen im Kapitel 10.12.

10.2

Eingabefelder und Eingabebereiche

10.2.1

Einzeilige Eingabefelder definieren

Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wrtern oder einer
Zahl. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Formular f&uuml;r Namenseingabe</h1>
<form action="input_text.htm">
<p>Vorname:<br>
<input name="vorname" type="text" size="30" maxlength="30">
</p>
<p>Zuname:<br>
<input name="zuname" type="text" size="30" maxlength="40">
</p>
</form>
</body>
</html>

<input> definiert ein einzeiliges Eingabefeld (input = Eingabe). Der Vollstndigkeit halber
sollten Sie die Angabe type="text" dazusetzen.

Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe
name=. Der vergebene Name wird bei CGI-Scripts bentigt, um auf die Daten des Eingabefeldes

zugreifen zu knnen. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei
dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung. Der Name sollte nicht zu
lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste
Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:)
oder den Punkt (.). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern
und den Unterstrich (_) enthalten. Gro- und Kleinschreibung wird bei den meisten Programmiersprachen ebenfalls unterschieden.

302

Kapitel 10: Formulare

10.1: Zwei einzeilige Eingabefelder mit vorgeschriebener Gre.

Ferner sollten Sie bei einzeiligen Eingabefeldern immer die Anzeigelnge in Zeichen mit size=
sowie die interne Feldlnge in Zeichen maxlength= bestimmen. Beide Angaben bedeuten die
Anzahl Zeichen (size = Gre, maxlength = maximal length = maximale Lnge). Wenn die interne
Feldlnge maxlength= grer ist als die angezeigte Feldlnge size= (wie im zweiten Eingabefeld
des obigen Beispiels), dann wird bei lngeren Eingaben automatisch gescrollt (im Beispiel also ab
dem 31. eingegebenen Zeichen).
Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich brigens der
Einsatz einer blinden Tabelle (Kapitel 8.6). Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Formular f&uuml;r Namenseingabe</h1>
<form action="input_text_tabelle.htm">
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td align="right">Vorname:</td>
<td><input name="vorname" type="text" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Zuname:</td>
<td><input name="zuname" type="text" size="30" maxlength="40"></td>
</tr>
</table>
</form>
</body>
</html>

10.2 Eingabefelder und Eingabebereiche

10.2:

303

Dieselben Eingabefelder wie in Bild 10.1, diesmal mit einer blinden Tabelle und
Beschriftung sauber ausgerichtet.

Das Beispiel zeigt das gleiche Formular wie im Beispiel weiter oben. Diesmal stehen jedoch
Beschriftung und zugehriges Formularfeld in je einer Tabellenzeile sauber nebeneinander. Die
Beschriftungstexte werden dabei rechtsbndig ausgerichtet und erscheinen dadurch bndig zu
den Eingabefeldern hin orientiert. Wichtig ist, dass das form-Element auerhalb der Tabelle
steht, oder andersherum, dass die Tabelle als Element innerhalb des Formulars notiert wird.
Beachten Sie: Das <input>-Tag ist ein so genanntes Standalone-Tag. Wenn Sie XHTML-konform arbeiten, mssen Sie das input-Element als inhaltsleer kennzeichnen. Dazu notieren Sie
das allein stehende Tag in der Form <input... />. Weitere Informationen dazu im Kapitel
14.1.11 zu XHTML und HTML.
Mit Hilfe von JavaScript knnen Sie die Eingaben von Anwendern vor dem Absenden des
Formulars kontrollieren. So knnen Sie zum Beispiel erzwingen, dass in einem Eingabefeld eine
Zahl in einem bestimmten Wertebereich eingegeben wird usw. In Kapitel 19.6 finden Sie ein
Anwendungsbeispiel zum Thema Formulareingaben berprfen.

10.2.2

Textvorbelegung bei einzeiligen

Eingabefeldern

Sie knnen ein einzeiliges Eingabefeld mit einem Inhalt vorbelegen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Einfach &uuml;berschreiben...</h1>
<form action="input_text.htm">
<p>Vorname:<br>
<input name="vorname" type="text" size="30" maxlength="30" value="Michaela">
</p>
<p>Zuname:<br>

304

Kapitel 10: Formulare

<input name="zuname" type="text" size="30" maxlength="40" value="Mustermann">

</p>
</form>
</body>
</html>

Mit dem zustzlichen Attribut value= knnen Sie einen Text bestimmen, mit dem das Feld
vorbelegt wird (value = Wert).

10.2.3

Eingabefelder fr Passwrter

Fr die Eingabe von Geheimnummern, Passwrtern

Eingabefeld. Die eingegebenen Zeichen werden dabei
dargestellt, sodass Personen im Raum des Anwenders
mitlesen knnen. Eingabefelder fr Passwrter werden
definiert. Ein Beispiel:

usw. gibt es einen speziellen Typ von

durch Platzhalter (meistens Sternchen)
nicht zufllig das eingegebene Passwort
mit type="password" im <input>-Tag

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Nur nicht auf die Tastatur gucken lassen ... :-)</h1>
<form action="input_password.htm">
<p>Kennwort:<br>
<input name="kennwort" type="password" size="12" maxlength="12">
</p>
</form>
</body>
</html>

10.3: Eingabefelder fr Passwrter zeigen nur Sternchen statt der eingetippten Zeichen an.

10.2 Eingabefelder und Eingabebereiche

305

Beachten Sie: Passwrter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe
im Klartext ber das Internet bertragen. Weisen Sie Anwender in ernsthaften Zusammenhngen auf diese Tatsache bitte explizit hin. Fr eine verschlsselte Kommunikation zwischen
Browser und Server gibt es das HTTPS-Protokoll, das der Web-Server untersttzen muss. Fragen
Sie gegebenenfalls Ihren Provider oder Webmaster danach. Ein Passwortfeld in HTML ist keine
Abfrage fr geschtzte Web-Seiten. Lesen Sie zu diesem Thema den Anhang A.6 ber das
Therma .htaccess Server-Reaktionen kontrollieren.

10.2.4

Mehrzeilige Eingabebereiche definieren

Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ganz spontan</h1>
<form action="textarea.htm">
<p>Welche HTML-Elemente fallen Ihnen ein,
und was bewirken sie:<br>
<textarea name="user_eingabe" cols="50" rows="10"></textarea>
</p>
</form>
</body>
</html>

<textarea ...> leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Jedes mehrzeilige Eingabefeld sollte ebenso wie ein einzeiliges Eingabefeld einen internen Bezeichnernamen
erhalten, und zwar mit der Angabe name=.

Pflicht ist die Angabe zur Hhe und Breite des Eingabebereichs. Das Attribut rows= bestimmt
die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Hhe, whrend cols= die
Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. Spalten bedeutet dabei die
Anzahl Zeichen (pro Zeile). Mit </textarea> schlieen Sie das mehrzeilige Eingabefeld ab. Das
End-Tag ist ntig und darf nicht weggelassen werden.

306

Kapitel 10: Formulare

10.4: Ein mehrzeiliges Eingabefeld mit 50 Zeichen Breite und zehn Zeichen Hhe.

Beachten Sie: Die Attribute rows= und cols= bestimmen lediglich die Anzeigegre des Eingabebereichs, nicht die Lnge des erlaubten Textes. Die ist theoretisch unbegrenzt. Web-Browser
statten die mehrzeiligen Eingabefelder bei der Anzeige blicherweise mit Scrollbalken aus, sodass
der Anwender bei lngeren Eingaben scrollen kann.

10.2.5

Textvorbelegung bei mehrzeiligen

Eingabebereichen

Sie knnen ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen. Um mehrzeilige Eingabefelder
mit Text vorzubelegen, notieren Sie den gewnschten Text einfach als Elementinhalt zwischen
dem einleitenden <textarea>-Tag und dem abschlieenden </textarea>. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Schreiben Sie eine Geschichte!</h1>
<form action="textarea.htm">
<p>Hier der Anfang der Geschichte:<br>
<textarea name="user_eingabe" cols="50" rows="10">
Es war dunkel, feucht und neblig, ein richtiger Novemberabend. Bernie hatte alles
so weit vergessen, was geschehen war, und stapfte gedankenverloren und irgendwie
leer durch die Stra&szlig;e. Da pl&ouml;tzlich ...
</textarea></p>
</form>

10.2 Eingabefelder und Eingabebereiche

307

</body>
</html>

10.5:

Um es den Surfern leicht zu machen, geben Sie dem Eingabefeld gleich einen
Textvorschlag mit.

10.2.6

Zeilenumbruch bei mehrzeiligen Eingabebereichen

Dies gehrt nicht zum HTML-Standard, weil das W3-Konsortium wohl davon ausgeht, dass
Text innerhalb eines mehrzeiligen Eingabebereichs bei der Eingabe automatisch umbrochen
wird. Nicht so jedoch bei Netscape bis einschlielich Version 4.x. Dort wird automatisch quer
gescrollt, solange der Anwender keine Return-Taste drckt, um eine neue Zeile zu beginnen. Um
die Option des automatischen Zeilenumbruchs zu erlauben, hat Netscape seinerzeit ein Attribut
eingefhrt, um den Zeilenumbruch kontrollierbar zu machen. Der Internet Explorer interpretiert dieses Attribut ebenfalls. Aber wie es bei proprietren Sprachbestandteilen so ist mittlerweile ist ein Wildwuchs an Wertzuweisungen entstanden. Und wenn Sie das Attribut verwenden,
erzeugen Sie in jedem Fall ungltiges HTML. Ein Beispiel:
<html>
<head>
<title>Textumbruch in mehrzeiligen Eingabebereichen</title>
</head>
<body>
<h1>Brechen Sie um, aber nicht ab!</h1>
<form action="textarea_wrap.htm">
<p>einmal soft:<br><textarea name="soft" cols="30" rows="3"
wrap="soft"></textarea></p>
<p>einmal hard:<br><textarea name="hard" cols="30" rows="3"
wrap="hard"></textarea></p>

308

Kapitel 10: Formulare

<p>einmal physical:<br><textarea name="physical" cols="30" rows="3"

wrap="physical"></textarea></p>
<p>einmal virtual:<br><textarea name="virtual" cols="30" rows="3"
wrap="virtual"></textarea></p>
<p>und einmal off:<br><textarea name="off" cols="30" rows="3"
wrap="off"></textarea></p>
</form>
</body>
</html>

10.6: Der Zeilenumbruch in mehrzeiligen Eingabefeldern lsst sich beeinflussen.

Mit dem nichtstandardisierten Attribut wrap= knnen Sie den Zeilenumbruch steuern (wrap =
Umbruch). Die folgenden Angaben sind ohne Gewhr:
wrap="soft" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch
bei der Anzeige. Beim Absenden des Formulars werden an Stellen, wo der Text umbrochen
ist, jedoch keine Zeilenumbruchzeichen bertragen.

10.2 Eingabefelder und Eingabebereiche

309

wrap="hard" wird von Netscape 4.x interpretiert und bewirkt automatischen Zeilenumbruch
bei der Anzeige. Beim Absenden des Formulars werden die Zeilenumbruchzeichen an Stellen,
wo der Text automatisch umbrochen ist, bertragen.
wrap="virtual" wird vom MS Internet Explorer ab Version 4.x und den NetscapeVersionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="soft".
wrap="physical" wird vom MS Internet Explorer ab Version 4.x und den NetscapeVersionen 2.x und 3.x interpretiert und ist gleichbedeutend mit wrap="hard".
wrap="off" wird vom MS Internet Explorer ab Version 4.x und von Netscape interpretiert
und ist gleichbedeutend mit der Voreinstellung von Netscape bis einschlielich Version 4.x
nmlich keinen Text automatisch zu umbrechen.

10.2.7

Eingabefelder und Eingabebereiche auf nur

lesen setzen

Sie knnen erzwingen, dass ein Eingabefeld kein Eingabefeld mehr ist, sondern eigentlich nur ein
Ausgabefeld, und ein Eingabebereich nur ein Ausgabebereich. Das kann beispielsweise interessant sein, wenn Sie JavaScript-ermittelte Werte in einem Formularfeld ausgeben, oder Felder mit
einem Wert vorbelegen mchten, den der Anwender aber nicht ndern knnen soll. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Kein Rabatt und keine Gnade</h1>
<form action="input_text_value.htm">
<p>Preis:<br>
<input name="vorname" type="text" size="8" value="&euro; 699.-" readonly>
</p>
<p>Lizenzvereinbarung:<br>
<textarea name="lizenz" cols="50" rows="10" readonly>
Mit dem Absenden des Formulars stimme ich zu, dass ich diese
Lizenzvereinbarung gelesen habe usw.
</textarea>
</p>
</form>
</body>
</html>

310

Kapitel 10: Formulare

10.7: Die gesperrten Eingabefelder sind grau dargestellt (beim Rollbalken sichtbar).

Mit dem Attribut readonly knnen Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen
Eingabereich auf nur lesen setzen.
Beachten Sie: Bei lteren Browsern funktioniert diese Angabe nicht, und der Feldeintrag ist fr
den Anwender berschreibbar! Wenn Sie XHTML-konform arbeiten wollen, mssen Sie das
Attribut in der Form readonly="readonly" notieren. Weitere Informationen dazu im Kapitel
14.1.11 zu XHTML und HTML.

10.3

Auswahllisten

10.3.1

Auswahllisten definieren

Sie knnen dem Anwender eine Liste mit festen Eintrgen anbieten, aus der er einen Eintrag
auswhlen kann. Der Text des ausgewhlten Eintrags wird bertragen, wenn der Anwender das
Formular abschickt. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>W&auml;hlen Sie Ihren Favoriten!</h1>
<form action="select.htm">
<p>

10.3 Auswahllisten

311

<select name="top5" size="3">

<option>Heino</option>
<option>Michael Jackson</option>
<option>Tom Waits</option>
<option>Nina Hagen</option>
<option>Marianne Rosenberg</option>
</select>
</p>
</form>
</body>
</html>

10.8: Auswahllisten bieten mehrere Optionen bersichtlich und platzsparend an.

<select ...> leitet eine Auswahlliste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name=. Der Name sollte nicht zu lang sein und darf
keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Ansonsten gelten die in
Kapitel 10.2.1 genannten Konventionen fr die Namensgebung.

Mit dem Attribut size= bestimmen Sie die Anzeigegre der Liste, d.h., wie viele Eintrge
angezeigt werden sollen. Wenn die Liste mehr Eintrge enthlt, als angezeigt werden, kann der
Anwender in der Liste scrollen. Wenn Sie size="1" angeben, definieren Sie eine so genannte
Dropdown-Liste.
Mit <option>...</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem
Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste. Hinter <option> muss der
Text des Listeneintrags stehen. Sie knnen so viele Listeneintrge definieren wie Sie wollen. Ein
Abschluss-Tag </option> ist zwar optional, im Hinblick auf verarbeitende Programmiersprachen aber dringend zu empfehlen.
Beachten Sie: Die Breite der Listenanzeige wird automatisch ermittelt, abhngig vom lngsten
Eintrag (es sei denn, Sie wenden das Formatieren mit CSS an). Mit Hilfe von JavaScript knnen
Sie Auswahllisten auch zweckentfremden, um Verweise innerhalb Ihres Projekts zu realisieren.
In Kapitel 19.9 finden Sie ein Beispiel dazu: Verweisliste als Auswahlliste.

312

Kapitel 10: Formulare

10.3.2

Auswahllisten mit Mehrfachauswahl

Wenn Sie nichts anderes angeben, kann der Anwender aus einer Auswahlliste genau einen
Eintrag auswhlen. Sie knnen auch eine Mehrfachauswahl erlauben. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>W&auml;hlen Sie so viele Favoriten wie Sie wollen!</h1>
<form action="select.htm">
<p>
<select name="top5" size="5" multiple>
<option>Heino</option>
<option>Michael Jackson</option>
<option>Tom Waits</option>
<option>Nina Hagen</option>
<option>Marianne Rosenberg</option>
</select>
</p>
</form>
</body>
</html>

10.9:

Die Mehrfachauswahl erlaubt das Selektieren beliebig vieler Listeneintrge (mit Mausklick
plus () oder (Strg)).

Die Mehrfachauswahl einer Auswahlliste erlauben Sie durch das zustzliche Attribut multiple
im einleitenden <select>-Tag.

10.3 Auswahllisten

313

Beachten Sie: Eine Mehrfachauswahl ist fr Anwender nicht unmittelbar erkennbar. Deshalb
sollten Sie darauf hinweisen, wenn mehrere Eintrge auswhlbar sind. Auch ist nicht allen
Anwendern klar, wie sie mehrere Eintrge selektieren knnen. Auf modernen PC-Tastaturen
geschieht das normalerweise durch Halten der (Strg)-Taste bei gleichzeitigem Anklicken der
gewnschten Listeneintrge. Mehrere Eintrge markieren Sie mit gedrckter ()-Taste, indem
Sie zunchst den obersten und dann den untersten gewnschten Eintrag anklicken.
Wenn Sie XHTML-konform arbeiten wollen, mssen Sie das Attribut in der Form multiple=
"multiple" notieren. Weitere Informationen dazu im Kapitel 14.1.11 zu XHTML und HTML.

10.3.3

Eintrge vorselektieren

Wenn Sie nichts anderes angeben, ist zunchst kein Eintrag einer Auswahlliste vorselektiert. Sie
knnen einen Eintrag vorselektieren. In Verbindung mit der Mehrfachauswahl knnen Sie auch
mehrere Eintrge vorselektieren. Vorselektierte Eintrge haben einen sichtbaren Markierungsbalken. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Sie k&ouml;nnen auch einen anderen Favoriten w&auml;hlen!</h1>
<form action="select.htm">
<p>
<select name="top5" size="5">
<option>Heino</option>
<option>Michael Jackson</option>
<option selected>Tom Waits</option>
<option>Nina Hagen</option>
<option>Marianne Rosenberg</option>
</select>
</p>
</form>
</body>
</html>

Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden <option>-Tag

des betreffenden Eintrags das Attribut selected an.
Beachten Sie: Wenn Sie XHTML-konform arbeiten wollen, mssen Sie das Attribut in der Form
selected="selected" notieren. Weitere Informationen dazu im Kapitel 14.1.11 zu XHTML

und HTML.

314

Kapitel 10: Formulare

10.3.4

Absendewert von Eintrgen bestimmen

Normalerweise wird beim Absenden des Formulars der Text eines ausgewhlten Listeneintrags
bertragen, der zwischen <option> und </option> notiert ist. Sie knnen jedoch bestimmen,
dass intern ein anderer Text bertragen wird. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Pizzeria Fantasia</h1>
<form action="select.htm">
<p>Ihre Pizza-Bestellung:</p>
<p>
<select name="Pizza" size="5"
onchange="alert(this.form.Pizza.options[this.form.Pizza.selectedIndex].value)">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Funghi</option>
<option value="P103">Pizza Mare</option>
<option value="P104">Pizza Tonno</option>
<option value="P105">Pizza Mexicana</option>
<option value="P106">Pizza Regina</option>
<option value="P107">Pizza de la Casa</option>
<option value="P108">Pizza Calzone</option>
<option value="P109">Pizza con tutti</option>
</select>
</p>
</form>
</body>
</html>

10.10: Beim Anklicken eines Eintrags zeigt ein Event-Handler den Absendewert des Eintrags an.

10.3 Auswahllisten

315

Um fr einen Eintrag der Auswahlliste einen anderen Absendewert zu bestimmen, geben Sie im
eineitenden <option>-Tag des betreffenden Eintrags das Attribut value= an (value = Wert). Als
Wert weisen Sie den gewnschten Absendewert zu. Beim Absenden des Formulars wird dann der
hier bestimmte Text eines ausgewhlten Eintrags bertragen, nicht der Text, der dem Anwender
beim Listeneintrag angeboten wurde.
Im obigen Beispiel ist im einleitenden <select>-Tag ein so genannter Event-Handler notiert
(Kapitel 18.10). Diesem wird im Beispiel eine JavaScript-Anweisung zugewiesen, die bewirkt,
dass ein Meldungsfenster den internen Absendewert des Eintrags zur Kontrolle ausgibt, sobald
der Anwender einen Eintrag selektiert.

10.3.5

Verschachtelte Auswahllisten definieren

Eine verschachtelte Auswahlliste sollte ein Web-Browser nicht wie blich als einfache Auswahlliste anzeigen, sondern als verschachtelte Menstruktur. Anwender moderner grafischer Oberflchen kennen solche verschachtelten Mens. Das Startmen von Windows 95 ist beispielsweise
ein solches Men. Netscape 6.0 und Internet Explorer 6.0 erkennen als erste Browser diese
HTML-Elemente, stellen sie aber nicht sehr berzeugend dar.

10.11: So sollten die verschachtelten Auswahllisten in etwa aussehen.

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>W&auml;hlen Sie Ihren Lieblingsnamen!</h1>
<form action="select_optgroup.htm">
<p>Zur Auswahl stehen:</p>
<p>
<select name="Namen" size=3>
<optgroup label="Namen mit A">
<option label="Anna">Anna</option>
<option label="Achim">Achim</option>
<option label="August">August</option>
</optgroup>

316

Kapitel 10: Formulare

<optgroup label="Namen mit B">

<option label="Berta">Berta</option>
<option label="Barbara">Barbara</option>
<option label="Bernhard">Bernhard</option>
</optgroup>
<optgroup label="Namen mit C">
<option label="Caesar">Caesar</option>
<option label="Christiane">Christiane</option>
<option label="Christian">Christian</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>

10.12: Netscape 6 und IE 6 zeigen die verschachtelten Auswahllisten als lange Liste mit
Zwischenberschriften an.

Fr eine verschachtelte Menstruktur definieren Sie Untergruppen von Auswahllisten. Dazu

notieren Sie innerhalb von <select> und </select> fr jede gewnschte Untergruppe ein
optgroup-Element. Zwischen dem einleitenden <optgroup>-Tag und dem Abschluss-Tag
</optgroup> notieren Sie jeweils eine Untergruppe von Eintrgen. Im einleitenden <optgroup>Tag vergeben Sie mit dem Attribut label= eine Menbeschriftung fr die Gruppe von Eintrgen. Dieser Eintrag wird beispielsweise als Meneintrag mit Pfeiltaste rechts auen angezeigt,
um dem Anwender zu signalisieren, dass sich hinter dem Meneintrag ein Untermen verbirgt.
Fr die Eintrge innerhalb einer Untergruppe notieren Sie jeweils ein option-Element. Auch
hierbei knnen Sie den anzuzeigenden Meneintrag mit dem Attribut label= bestimmen. Die
Werte, die Sie hinter <option> notieren, sind fr die Mendarstellung ohne Belang. Es ist
jedoch wichtig, sie zu notieren, denn Browser, die die Mendarstellung nicht beherrschen,
zeigen stattdessen eine gewhnliche Auswahlliste mit den Eintrgen an, die Sie hinter den
<option>-Tags angeben.

10.4 Radiobuttons und Checkboxen

317

Beachten Sie: Wenn Sie Unter-Untermens realisieren wollen, notieren Sie einfach innerhalb
von <optgroup>...</optgroup> an der gewnschten Stelle einen weiteren Bereich mit
<optgroup>...</optgroup>.

10.4
10.4.1

Radiobuttons und Checkboxen

Radiobuttons definieren

Radiobuttons sind eine Gruppe von beschrifteten Knpfen, von denen der Anwender einen
auswhlen kann. Es kann immer nur einer der Radiobuttons ausgewhlt sein. Der Wert des
ausgewhlten Radiobutton wird beim Absenden des Formulars mit bertragen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Hier wird abkassiert!</h1>
<form action="input_radio.htm">
<p>Geben Sie Ihre Zahlungsweise an:</p>
<p>
<input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br>
<input type="radio" name="Zahlmethode" value="Visa"> Visa<br>
<input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
</p>
</form>
</body>
</html>

10.13: Bei Radiobuttons kann nur eine der gezeigten Optionen aktiv sein.

318

Kapitel 10: Formulare

Radiobuttons werden durch <input type="radio"> definiert (input = Eingabe). Jeder Radiobutton sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name=. Alle
Radiobuttons, die den gleichen Namen haben, gehren zu einer Gruppe, d.h. von diesen Buttons
kann der Anwender genau einen markieren. Der vergebene Name wird bei CGI-Scripts bentigt,
um auf die Daten des Eingabefeldes zugreifen zu knnen. Bei E-Mail-Formularen taucht der
Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von
Bedeutung. Fr die Namensgebung gelten die in Kapitel 10.2.1 beschriebenen Konventionen.
Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert fr jeden Radiobutton
(value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Button bertragen. Vor oder hinter dem <input>-Tag knnen Sie den Text notieren, der
als Beschriftung der jeweiligen Option erscheint.
Wenn Sie eine der Auswahlmglichkeiten vorselektieren wollen, dann notieren Sie in dem
<input>-Tag des entsprechenden Radiobutton das allein stehende Attribut checked, also z.B.:
<input type="radio" name="Typ" value="Kassenpatient" checked>

Wenn Sie XHTML-konform arbeiten wollen, mssen Sie dieses Attribut in der Form checked=
"checked" notieren. Mehr als eine Auswahlmglichkeit drfen Sie bei Radiobuttons nicht vorselektieren.

10.4.2

Checkboxen definieren

Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine,
eins oder mehrere auswhlen kann. Die Werte von ausgewhlten Checkboxen werden beim
Absenden des Formulars mit bertragen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Pizzabelag nach Wahl!</h1>
<form action="input_checkbox.htm">
<p>Kreuzen Sie die gew&uuml;nschten Zutaten an:</p>
<p>
<input type="checkbox" name="zutat" value="salami"> Salami<br>
<input type="checkbox" name="zutat" value="pilze"> Pilze<br>
<input type="checkbox" name="zutat" value="sardellen"> Sardellen
</p>
</form>
</body>
</html>

10.5 Klick-Buttons

319

10.14: Bei Checkboxen darf der Anwender beliebig viele der angebotenen Optionen ankreuzen.

Checkboxen werden durch <input type="checkbox"> definiert (input = Eingabe). Jede Checkbox muss einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Alle
Checkboxen, die den gleichen Namen haben, gehren zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen. Fr den Namen gelten die
gleichen Bemerkungen wie bei Radiobuttons.
Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert fr jede Checkbox
(value = Wert). Wenn der Anwender das Formular abschickt, werden die Bezeichnerwerte des
oder der angekreuzten Buttons bertragen. Vor oder hinter dem <input>-Tag knnen Sie den
Text notieren, der als Beschriftung der jeweiligen Option erscheint.
Wenn Sie Auswahlmglichkeiten vorselektieren wollen, dann notieren Sie in dem <input>-Tag
der entsprechenden Checkbox das allein stehende Attribut checked, also z.B.:
<input type="checkbox" name="Kenntnisse_in" value="HTML" checked>

Bei Checkboxen drfen Sie mehrere Eintrge vorselektieren. Wenn Sie XHTML-konform arbeiten wollen, mssen Sie dieses Attribut in der Form checked="checked" notieren.

10.5

Klick-Buttons

10.5.1

Klick-Buttons definieren (herkmmlich)

Sie knnen Schaltflchen definieren, die keine spezielle Bedeutung haben. Sinnvoll sind solche
freien Klick-Buttons in Verbindung mit Script-Sprachen wie JavaScript. In der Regel werden sie
dazu verwendet, Verweise oder andere JavaScript-gesteuerte Anweisungen auszufhren. Die hier
beschriebene, herkmmliche Methode hat den Vorteil, dass sie auch von lteren Browsern
(Netscape seit Version 2.x, MS Internet Explorer seit Version 3.x) interpretiert wird. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

320

Kapitel 10: Formulare

<h1>Verweise einmal anders</h1>

<form action="input_button.htm">
<p>
<input type="button" name="Verweis"
value="SELFHTML Portalseite"
onClick="self.location.href=http://selfaktuell.teamone.de/">
</p>
</form>
</body>
</html>

10.15: Ein klassischer Button, der beim Anklicken etwa eine Script startet.

Mit <input type="button"> definieren Sie einen Button (input = Eingabe). Die Beschriftung
des Button bestimmen Sie mit dem Attribut value= (value = Wert). Um anzugeben, was
passieren soll, wenn der Button angeklickt wird, knnen Sie beispielsweise den Event-Handler
onClick= verwenden. Als Wertzuweisung an das Event-Handler-Attribut knnen Sie dann
JavaScript-Code notieren. Im obigen Beispiel wird mit Hilfe der JavaScript-Objekteigenschaft
location.href ein Sprungverweis zu dem angegebenen URI ausgefhrt. Eine andere beliebte,
einfache JavaScript-Anweisung, mit der sich so ein Button belegen lsst, ist onClick=
"history.back()". Damit erhlt der Button die Zurck-Funktion im Browser.
Mit dem Attribut name= knnen Sie einen Namen fr den Button vergeben. Unter diesem
Namen ist der Button beispielsweise in JavaScript ansprechbar. Der Name sollte nicht zu lang
sein und darf keine Leerzeichen, Sonderzeichen oder deutschen Umlaute enthalten. Es gelten die
in Kapitel 10.2.1 beschriebenen Regeln fr die Namensgebung.

10.5.2

Klick-Buttons definieren (modern)

Ab HTML 4.0 drfen anklickbare Buttons endlich so heien wie sie heien: nmlich Button.
Solche Buttons sind flexibler als herkmmliche Buttons, denn sie drfen auch einen definierten
Inhalt haben, etwa eine Grafik. Der Nachteil ist, dass diese Sorte Buttons nur von neueren
Browsern untersttzt wird von Netscape 4.x noch nicht.

10.5 Klick-Buttons

321

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Verweise einmal anders</h1>
<form action="button.htm">
<div>
<button name="Klickmich" type="button" value="SELFHTML"
onClick="self.location.href=http://selfaktuell.teamone.de/">
<p><img src="selfhtml.gif" width="106" height="109"
border="0" alt="SELFHTML Logo"><br>
<b>SELFHTML Portalseite</b></p>
</button>
</div>
</form>
</body>
</html>

10.16: Mit dem <button>-Tag binden Sie auch Bilder in den Klick-Button mit ein.

Die Definition eines solchen Button leiten Sie mit <button> ein. Dieses Element hat ein End-Tag
</button>, mit dem Sie die Definition des Button abschlieen. Zwischen dem einleitenden Tag
und dem End-Tag knnen Inhalte stehen. Alles, was Sie innerhalb von <button>...</button>
notieren, wird als Beschriftung des Button angezeigt. Das drfen durchaus auch eingebundene
Grafiken sein, so wie im obigen Beispiel.
Im einleitenden <button>-Tag notieren Sie verschiedene Angaben zum Button. Etwas seltsam
erscheint die Angabe type="button", wo doch das Element schon so heit. Notieren Sie diese

322

Kapitel 10: Formulare

Angabe jedoch bei allen Buttons, die Sie fr Script-Sprachen verwenden. Denn mit Hilfe des
button-Elements knnen Sie auch zwei andere Button-Typen definieren, nmlich Buttons zum
Absenden und solche zum Abbrechen (Kapitel 10.10).
Mit dem Attribut name= knnen Sie einen Namen fr den Button vergeben. Fr den Namen
gelten die gleichen Anmerkungen wie im vorherigen Abschnitt Klick-Buttons (herkmmlich).
Mit dem Attribut value= knnen Sie eine Beschriftung fr den Button bestimmen, falls Sie
keinen Inhalt innerhalb von <button>...</button> notieren. Beachten Sie jedoch, dass die
Browser dies ignorieren und bei leerem Inhalt einen mickrigen leeren Button anzeigen. Um
anzugeben, was passieren soll, wenn der Button angeklickt wird, knnen Sie beispielsweise den
Event-Handler onClick= verwenden. Als Wertzuweisung an das Event-Handler-Attribut
knnen Sie dann JavaScript-Code notieren.
Beachten Sie: Da der Button bereits anklickbar ist, sind alle HTML-Elemente darin verboten, die
Verweis-Funktionen erzeugen. Es sind also keine Verweise beim Inhalt erlaubt, und Grafiken,
die als Button-Inhalt angezeigt werden, drfen kein Attribut usemap= fr verweissensitive
Flchen enthalten.

10.6

Felder fr Datei-Upload

Diese Sorte Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner
zusammen mit dem Formular zu bertragen. Wenn ein CGI-Script die ankommenden Formulardaten auf dem Server-Rechner verarbeitet, ist es dadurch mglich, dem Anwender das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermglichen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Schicken Sie uns was Schickes!</h1>
<form action="input_file.htm" enctype="multipart/form-data">
<p>
W&auml;hlen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
<input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
</p>
</form>
</body>
</html>

10.6 Felder fr Datei-Upload

323

10.17: Beim Datei-Upload whlt der Anwender mit dem typischen Auswahldialog seines
Betriebssystems die Datei.

Mit <input type="file"> definieren Sie ein Element fr Datei-Upload (input = Eingabe, file =
Datei). Der Web-Browser sollte dann ein Eingabefeld anzeigen, das die Eingabe einer Datei (in
den meisten Fllen mit Pfadnamen) erlaubt. Rechts daneben sollte der Browser einen Button
anzeigen, bei dessen Anklicken ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint. Die
Gre des Eingabefeldes (Anzahl Zeichen) knnen Sie mit size= bestimmen (size = Gre).
Wenn Sie das Attribut maxlength= angeben, sollte der Web-Browser die dahinter notierte Zahl
als maximal erlaubte Dateigre in Byte interpretieren (maxlength = maximal length = maximale
Lnge). Im obigen Beispiel wird auf diese Weise die Bytezahl auf 100000 Byte begrenzt. Wenn Sie
maxlength= weglassen, kann der Anwender beliebig groe Dateien senden. Beachten Sie jedoch,
dass diese Angabe mit Vorsicht zu genieen ist. In der HTML-Version 3.2 wurde es so bestimmt,
in der Version 4.0 wird diese Funktionalitt beim maxlength-Attribut dagegen nicht mehr
erwhnt. Verlassen Sie sich also nicht auf diese Angabe. Sicherer ist es, bei der Weiterverarbeitung mit einem CGI-Script im Script die Dateigre zu ermitteln und das Script davon abhngig
entscheiden zu lassen, ob die Datei akzeptiert oder verworfen wird.
Wenn Sie nur bestimmte Dateitypen zulassen wollen, knnen Sie mit der Angabe accept= die
erlaubten Dateitypen eingrenzen (accept = akzeptieren). Hinter dem Gleichheitszeichen knnen
Sie einen Mime-Type angeben (Anhang A.2). Dabei ist auch das Wildcard-Zeichen (*) bei
Subtypen erlaubt. Im obigen Beispiel werden mit text/* alle Textdateien akzeptiert. Dazu
gehren reine Textdateien (*.txt), aber z.B. auch HTML-Dateien (*.html, *.htm). Verlassen
Sie sich aber auch bei dieser Angabe nicht darauf, dass der Browser vor dem Versenden des
Formulars das tatschlich prft.

324

Kapitel 10: Formulare

Beachten Sie: Wichtig ist, dass Sie im einleitenden <form>-Tag die Angabe enctype="multipart/
form-data" notieren, wenn das Formular ein Element fr Datei-Upload enthlt.
Im Online-Angebot von SELFHTML (selfaktuell.teamone.de/) aktuell finden Sie einen FeatureArtikel, der beschreibt, wie das serverseitige Verarbeiten solcher Datei-Uploads aussehen kann:
Fileupload per Perl/CGI. Um das dort beschriebene CGI-Script zu verstehen, bentigen Sie
allerdings Kenntnisse in CGI/Perl.
Das Attribut value= in Verbindung mit <input type="file">, mit dem das Vorbelegen der
Dateiauswahl mglich wre, wird von moderneren Browsern aus Sicherheitsgrnden nicht mehr
untersttzt.

10.7

Versteckte Formularelemente

10.7.1

Versteckte Elemente definieren

Sie knnen Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden.
Versteckte Felder knnen Daten enthalten. Beim Absenden des Formulars werden die Daten
versteckter Felder mit bertragen. Auf diese Weise knnen Sie beispielsweise zustzliche Informationen an CGI-Scripts bergeben oder erluternden Text einfgen, der bei der E-Mail-bertragung der Formulardaten in der E-Mail mit enthalten ist.
Auch fr JavaScript ist diese Mglichkeit interessant. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ndern kann, ist es auf diese Weise bequem mglich, interne
Daten zu speichern, die nicht am Bildschirm angezeigt werden. So knnte ein JavaScript beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zur
Bildschirmauflsung beim Anwender sammeln (siehe Screen-Objekt) und die Ergebnisse in ein
verstecktes Formularfeld schreiben. Die Daten werden dann, wenn der Anwender das Formular
abschickt, mit bertragen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Feedback</h1>
<form name="Feedback" action="http://www.der-allesrausbekommer.de/cgibin/feedback.cgi">
<p>
<input type="hidden" name="UserBrowser" value="">
Ihr Name:<br>
<input name="UserName" type="text" size="40">
Ihr Kommentar:<br>
<textarea name="UserKommentar" rows="10" cols="40"></textarea>

10.8 Guppierung von Elementen und Label fr Elemente

325

</p>
</form>
<script type="text/javascript">
document.Feedback.UserBrowser.value = navigator.userAgent;
</script>
</form>
</body>
</html>

Mit <input type="hidden"> definieren Sie versteckte Felder in einem Formular (input = Eingabe, hidden = versteckt). Die Daten selbst bestimmen Sie beim Attribut value= (value = Wert).
Im obigen Beispiel erhlt das versteckte Formularfeld zunchst keine Daten (value=""). Unterhalb des Formulars ist jedoch ein JavaScript notiert. Dieses Script ermittelt den Browser-Typ,
den der Anwender verwendet, und schreibt den ermittelten Wert in das versteckte Formularfeld.
Wenn der Anwender das Formular absendet, wird also der verwendete Browser als Formularinhalt mit bertragen.
Auf die JavaScript-Anweisung wird hier nicht weiter eingegangen. In Kapitel 20 finden Sie die
entsprechenden Befehle in der Objektreferenz beschrieben. Mageblich sind das navigatorObjekt und das forms-Objekt mit seinen Unterobjekten.

10.8

Guppierung von Elementen und Label fr Elemente

10.8.1

Elemente gruppieren

Grere Formulare bestehen hufig aus Gruppen von Elementen. Ein typisches Bestellformular
besteht beispielsweise aus Elementgruppen wie Absender, bestellte Produkte und Formular
absenden/abbrechen. Solche Elementgruppen knnen Sie ab HTML 4.0 eigens auszeichnen. Ein
Web-Browser kann Elementgruppen durch Linien oder hnliche Effekte optisch sichtbar
machen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>W&uuml;nschen Sie sich was!</h1>
<form action="fieldset_legend.htm">
<fieldset><legend><b>Absender</b></legend>
<table>
<tr>

326

Kapitel 10: Formulare

<td>Ihr Vorname:</td>
<td><input type="text" size="40" maxlength="40" name="Vorname"></td>
</tr><tr>
<td>Ihr Zuname:</td>
<td><input type="text" size="40" maxlength="40" name="Zuname"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><b>Wunsch</b></legend>
<table>
<tr>
<td>Ihr Hauptwunsch:</td>
<td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
</tr><tr>
<td>Ihr Zusatzwunsch:</td>
<td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

10.18: Gruppierte Elemente umrahmt der Internet Explorer mit einer dnnen Linie.

Eine zusammengehrige Gruppe von Formularelementen schlieen Sie in die Tags <fieldset>
...</fieldset> ein (fieldset = Feldgruppe). Dazwischen knnen Sie beliebige Teile Ihres
Formulars definieren. Unterhalb des einleitenden <fieldset>-Tags und vor den ersten Formularinhalten der Gruppe sollten Sie ferner eine Gruppenberschrift (Legende) fr die Elementgruppe vergeben. Schlieen Sie den Gruppenberschriftentext in die Tags <legend>...
</legend> ein. Den Text innerhalb davon knnen Sie mit Hilfe von HTML/CSS nach Wunsch
formatieren.

10.8 Guppierung von Elementen und Label fr Elemente

10.8.2

327

Label fr Elemente

Fr Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine

logische Beschriftungsmglichkeit. Sie knnen zwar Text vor ein solches Element setzen wie EMail-Adresse:, aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu
dem Element hat, fr das er als Beschriftung dient. Mit Hilfe von Labels knnen Sie jedoch einen
solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Meine Beschriftung geh&ouml;rt zu mir wie mein Name an der T&uuml;r!</h1>
<form action="label.htm">
<table>
<tr>
<td><label for="vorname">Vorname:</label></td>
<td><input type="text" id="vorname" name="Vorname"></td>
</tr><tr>
<td><label for="nachname">Zuname:</label></td>
<td><input type="text" id="nachname" name="Zuname"></td>
</tr>
</table>
</form>
</body>
</html>

Das Beispiel zeigt, wie Sie mit Hilfe einer blinden Tabelle (Kapitel 8.6) Beschriftung und
Eingabefelder eines Formulars ordentlich formatieren knnen. Das Besondere dabei ist, dass ein
logischer Bezug zwischen Beschriftung und Eingabefeld hergestellt wird. Dazu muss das
Formularelement selbst, im obigen Beispiel zwei Eingabefelder, mit Hilfe des Universalattributs
id= einen eindeutigen Namen erhalten. Vergeben Sie keine zu langen Namen. Die Namen
drfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein
Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen
hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Den Beschriftungstext, den Sie einem solchen Formularelement zuordnen, notieren Sie als Inhalt
zwischen <label> und </label>. Der Beschriftungstext kann auch jede Art von HTML/CSSFormatierung enthalten. Das label-Element selbst hat keine sichtbare Wirkung am Bildschirm,
es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen. Diesen
Bezug definieren Sie innerhalb des einleitenden <label>-Tags mit dem Attribut for= (for = fr).

328

Kapitel 10: Formulare

Dahinter geben Sie, in Anfhrungszeichen, exakt den id-Namen des Formularelements an, auf
das sich das Label beziehen soll.
Beachten Sie: Das label-Element ist auch auf andere Formularelemente, zum Beispiel auf
textarea oder select, anwendbar.

10.9

Tabulator-Reihenfolge, Tastaturkrzel und Ausgrauen

10.9.1

Tabulator-Reihenfolge

Modernere Browser erlauben es, mit Hilfe der ()-Taste an der Tastatur nacheinander die Elemente eines Formulars anzuspringen. Normalerweise werden die Formularelemente dabei in der
Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie knnen jedoch eine andere
Reihenfolge festlegen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Steppen Sie mit [Tab] durch!</h1>
<form action="tabindex.htm">
<pre>
Feld 1: <input type="text" size="40" maxlength="40" tabindex="4">
Feld 2: <input type="text" size="40" maxlength="40" tabindex="1">
Feld 3: <input type="text" size="40" maxlength="40" tabindex="3">
<input type="button" tabindex="2" value="Klick mich">
</pre>
</form>
</body>
</html>

Mit dem Attribut tabindex= in einem der Formular-Tags <input>, <textarea>, <select>
oder <button> knnen Sie Angaben zur Tabulator-Reihenfolge machen. Notieren Sie die
Angabe in allen entsprechenden Tags des Formulars und vergeben bei jeder Angabe eine Zahl.
Beim Anspringen der Formularelemente mit der Tabulator-Taste wird zuerst das Formularelement mit der niedrigsten Tabindex-Nummer angesprungen, danach dasjenige mit der zweitniedrigsten usw. und als Letztes dasjenige mit der hchsten Tabindex-Nummer. Im obigen
Beispiel wird also zuerst Feld 2 angesprungen, dann der Button am Ende, dann Feld 3 und
zuletzt Feld 1. Es sind Zahlen zwischen 0 und 32767 erlaubt.
Beachten Sie: Die Tabindizes beziehen sich stets auf die gesamte angezeigte Datei. Dabei werden
auch Verweise, Verweisbereiche in verweissensitiven Grafiken und Objekte mit einbezogen.

10.9 Tabulator-Reihenfolge, Tastaturkrzel und Ausgrauen

329

Wenn Sie solche Elemente neben dem Formular auch noch in Ihrer Datei haben, sollten Sie die
Tabulator-Reihenfolge fr alle Elemente gemeinsam festlegen. Siehe auch in Kapitel 6.7 ber
Tabulator-Reihenfolge bei Verweisen.

10.9.2

Tastaturkrzel

Sie knnen dem Anwender anbieten, mit einem Tastendruck zu einem bestimmten Formularelement zu springen. Das Element wird damit angesprungen ausgefhrt, also zum Beispiel
angeklickt oder angekreuzt wird es dadurch nicht. Ankreuzen von Radiobuttons und Checkboxen funktioniert meist mit der Leertaste, und Anklicken/Ausfhren von Buttons mit der ()Taste. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Greifen Sie in die Tasten!</h1>
<form action="accesskey.htm">
<p>Ein Feld mit [Alt]+f:<br>
<input type="text" size="40" value="Feld" accesskey="f"></p>
<p>Ein Button mit [Alt]+b:<br>
<input type="button" value="Button" accesskey="b"></p>
<p>Ein Texteingabebereich mit [Alt]+t:<br>
<textarea cols="50" rows="5" accesskey="t">Text</textarea></p>
</form>
</body>
</html>

Mit dem Attribut accesskey= knnen Sie ein Zeichen auf der Tastatur bestimmen, das der
Anwender drcken kann, um ein Formularelement direkt anzuspringen (accesskey = Zugriffstaste). Bei den meisten Browsern ist es so geregelt, dass Sie bei accesskey= einen Buchstaben
angeben knnen, der dann mit (Alt) und der Taste fr den Buchstaben direkt anwhlbar ist.
Erlaubt ist das Attribut accesskey= in den Formular-Tags <input>, <textarea>, <label>,
<legend> oder <button>.
Beachten Sie: Benutzen Sie Tasten, die auf jeder Tastatur zu finden sind. Funktionstasten etwa,
wie es sie auf MF-II-Tastaturen fr MS Windows gibt, knnen Sie mit dieser Angabe auch gar
nicht ansprechen. Weisen Sie den Anwender im Text auf die Mglichkeit des Tastaturzugriffs
hin.

330

Kapitel 10: Formulare

10.19: Wenn Sie Formularfelder mit Hotkeys einsetzen, dann sollte die Beschriftung eindeutig
darauf hinweisen.

10.9.3

Elemente ausgrauen

Sie knnen Elemente ausgrauen, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Ausgegraute Elemente werden auch bei Tabulator-Sprngen
bergangen. Sinnvoll ist diese Angabe allerdings vor allem als HTML-Grundlage fr ScriptSprachen, die Elemente je nach Eingaben oder Auswahl in anderen Elementen dynamisch ausgrauen. So wre es beispielsweise sinnvoll, Angaben zum Typ des gefahrenen Autos dynamisch
auszugrauen, wenn der Anwender ankreuzt, dass er gar kein Auto besitzt. Als statische Angabe
hat das Ausgrauen von Elementen dagegen wohl selten Sinn, denn Formularelemente, die man
definiert, definiert man schlielich aus gutem Grund. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ein Formular f&uuml;r sp&auml;ter mal!</h1>
<form action="disabled.htm">
<p>Ihr Name:<br>
<input type="text" size="40" disabled></p>
<p>Ihr Kommentar:<br>
<textarea cols="50" rows="5" disabled></textarea></p>
</form>
</body>
</html>

10.10 Buttons zum Absenden oder Abbrechen

331

10.20: Optisch ist nicht zu erkennen, dass das Eingabefeld deaktiviert (ausgegraut) ist.

Mit dem Attribut disabled grauen Sie ein Element aus. Erlaubt ist das Attribut in den Formular-Tags <input>, <textarea>, <select>, <option>, <optgroup> oder <button>. Beim Internet Explorer und bei Netscape ist der Effekt, dass das Element einfach nicht editierbar bzw.
anklickbar ist. Eine optische Signalisierung gibt es dagegen in beiden Browsern nicht.
Beachten Sie: Wenn Sie XHTML-konform arbeiten wollen, mssen Sie dieses Attribut in der
Form disabled="disabled" notieren. Weitere Hinweise im Kapitel 14.1.11 ber XHTML und
HTML.

10.10
10.10.1

Buttons zum Absenden oder Abbrechen

Buttons definieren (herkmmlich)

Zwei Standardbuttons stellt HTML zur Verfgung, um Formulareingaben zu handhaben: einen

Button zum Absenden und einen zum Abbrechen. Mit dem Absende-Button kann der Anwender
das ausgefllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im
einleitenden <form>-Tag bei action= festgelegt wurde (siehe hierzu Abschnitt 10.1 Formular
definieren). Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das
Formular wird nicht abgeschickt, Eingaben werden gelscht. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Das hier k&ouml;nnen Sie absenden!</h1>
<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

332

Kapitel 10: Formulare

<form action="http://selfhtml.teamone.de/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
<tr>
<td align="right">Vorname:</td>
<td><input name="Vorname" type="text" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Zuname:</td>
<td><input name="Zuname" type="text" size="30" maxlength="40"></td>
</tr><tr>
<td align="right" valign="top">Kommentar:</td>
<td><textarea name="Text" rows="10" cols="50"></textarea></td>
</tr><tr>
<td align="right">Formular:</td>
<td>
<input type="submit" value=" Absenden ">
<input type="reset" value=" Abbrechen">
</td>
</tr>
</table>
</form>
</body>
</html>

10.21: Ein vollstndiges Formular mit den beiden Buttons zum Senden bzw. Abbrechen.

10.10 Buttons zum Absenden oder Abbrechen

333

Mit <input type="submit"> definieren Sie einen Absende-Button (input = Eingabe, submit =
besttigen). Beim Anklicken dieses Button werden die Formulardaten abgeschickt, und es wird
die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action= angegeben ist.
Mit <input type="reset"> definieren Sie einen Abbrechen-Button (reset = zurcksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt. Mit dem Attribut value= bestimmen
Sie die Beschriftung der Buttons (value = Wert).
Beachten Sie: Mit Hilfe von JavaScript knnen Sie die Eingaben von Anwendern vor dem Absenden des Formulars kontrollieren. In Kapitel 19.6 finden Sie das Anwendungsbeispiel Formulareingaben berprfen.

10.10.2

Grafische Buttons definieren

Sie knnen innerhalb von Formularen Grafiken referenzieren und diese als Absende-Button
definieren. Solche grafischen Buttons knnen Sie als Alternative zu Buttons vom Typ <input
type="submit"> verwenden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Absenden mit Komfort!</h1>
<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>
<form action="http://selfhtml.teamone.de/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
<tr>
<td align="right">Ihre Mail-Adresse:</td>
<td><input name="Mail" type="text" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Formular:</td>
<td>
<input type="image" src="absende.gif">
</td>
</tr>
</table>
</form>
</body>
</html>

334

Kapitel 10: Formulare

10.22: Statt des typischen Button kann auch eine Grafik zum Absenden eines Formulars dienen.

Mit <input type="image"> definieren Sie einen grafischen Button (input = Eingabe). Die
gewnschte Grafikdatei bestimmen Sie mit dem Attribut src= (src = source = Quelle). Weisen Sie
eine geeignete Grafik vom Typ GIF, JPEG oder PNG zu. Im obigen Beispiel wird vorausgesetzt,
dass sich die Grafik absende.gif im gleichen Verzeichnis befindet wie die HTML-Datei mit
dem Formular. Fr das Adressieren der Grafik gelten die Regeln zum Referenzieren in HTML.

10.10.3

Buttons zum Absenden oder Abbrechen

definieren (modern)

Dies funktioniert genauso wie in Kapitel 10.5.2 Klick-Buttons definieren (modern). Dort wird
erklrt, wie solche Buttons definiert werden. Um einen Button zum Absende-Button (SubmitButton) zu erklren, mssen Sie im einleitenden <button>-Tag type="submit" notieren. Um
den Button zu einem Abbrechen-Button (Reset-Button) zu erklren, mssen Sie type="reset"
notieren.

10.11
10.11.1

Formulare formatieren mit CSS

Formulare mit CSS gestalten

Mit CSS Stylesheets knnen Sie Formulare und Formularelemente optisch gestalten. Welche
Gestaltungsmglichkeiten funktionieren, ist jedoch noch ein Glcksspiel. Diejenigen Browser,
die das Formatieren von Formularelementen mit CSS untersttzen, untersttzen es noch nicht
konsequent. Ausprobieren ist also angesagt.
Fr das gesamte Formular knnen Sie beispielsweise Angaben zur Schriftformatierung oder zum
Hintergrund bestimmen. Fr einzelne Formularelemente knnen Sie ebenfalls Angaben zur
Schriftformatierung machen oder auch den vorgegebenen Feldrahmen abndern. Interessant
sind zur Gestaltung von Formularen und Formularelementen folgende CSS-Eigenschaften:
Schriftformatierung, Auenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und
-bilder.

10.11 Formulare formatieren mit CSS

335

Das folgende Beispiel zeigt ein vollstndiges, absendbares Formular, das mit CSS Stylesheets
gestaltet wurde:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formulare und Formularelemente gestalten mit CSS</title>
<style type="text/css">
<!-form
{ background-image:url(background.gif); padding:20px; border:6px solid #DDDDDD;
}
td, input, select, textarea
{ font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; }
input, select, textarea
{ color:#0000CC; }
.Bereich, .Feld
{ background-color:#FFFFAA; width:300px; border:6px solid #DDDDDD; }
.Auswahl
{ background-color:#DDFFFF; width:300px; border:6px solid #DDDDDD; }
.Check, .Radio
{ background-color:#DDFFFF; border:1px solid #DDDDDD; }
.Button
{ background-color:#AAAAAA; color:#FFFFFF; width:200px; border:6px solid
#DDDDDD; }
-->
</style>
</head>
<body>
<h1>Das hier k&ouml;nnen Sie absenden!</h1>
<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>
<form action="http://selfhtml.teamone.de/cgi-bin/comments.pl">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td align="right">Vorname:</td>
<td><input name="Vorname" type="text" class="Feld" size="30" maxlength="30"></td>
</tr><tr>
<td align="right">Zuname:</td>
<td><input name="Zuname" type="text" class="Feld" size="30" maxlength="40"></td>
</tr><tr>

336

Kapitel 10: Formulare

<td align="right" valign="top">Geschlecht:</td>

<td>
<input type="radio" class="Radio" name="Geschlecht" value="m"> m&auml;nnlich<br>
<input type="radio" class="Radio" name="Geschlecht" value="w"> weiblich
</td>
</tr><tr>
<td align="right" valign="top">Eigenschaften:</td>
<td>
<input type="checkbox" class="Check" name="Eigenschaft" value="Raucher">
Raucher<br>
<input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer">
Autofahrer<br>
<input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTMLFreak
</td>
</tr><tr>
<td align="right" valign="top">N&auml;chste Gro&szlig;stadt:</td>
<td>
<select name="Grossstadt" class="Auswahl" size="1">
<option value="Hamburg">Hamburg</option>
<option value="Berlin">Berlin</option>
<option value="Frankfurt">Frankfurt</option>
<option value="Muenchen">M&uuml;nchen</option>
</select>
</td>
</tr><tr>
<td align="right" valign="top">Kommentar:</td>
<td><textarea name="Text" class="Bereich" rows="10" cols="50"></textarea></td>
</tr><tr>
<td align="right">Formular:</td>
<td>
<input type="submit" class="Button" value="Absenden">
<input type="reset" class="Button" value="Abbrechen">
</td>
</tr>
</table>
</form>
</body>
</html>

10.11 Formulare formatieren mit CSS

337

10.23: Mit CSS Stylesheets gibt es kaum ein Detail im Formular, das Sie nicht ndern drfen.

Im Beispiel werden die CSS-Formate fr die Formularelemente zentral fr eine HTML-Datei in

einem Style-Bereich im Dateikopf definiert. Fr die einzelnen Formularfeldtypen werden Formate fr Klassen definiert das sind im Beispiel die Eintrge im Style-Bereich, die mit einem
Punkt (.) beginnen.
Das Formular selber, also das form-Element, erhlt im Beispiel eine Hintergrundgrafik zugewiesen, die ein Tapetenmuster bewirkt, sowie einen hellgrauen, 6 Pixel dicken Rahmen. Ein
Innenabstand von 20 Pixeln sorgt fr ein sauberes Aussehen. Fr Tabellenzellen (td) und die
Formularelemente input, select und textarea wird eine Schriftgre von 13 Pixeln, die
bevorzugte Schriftart Verdana und Fettschrift bestimmt. Fr die drei Formularelementtypen
wird ferner eine blaue Textfarbe festgelegt.
Eingabefelder und Eingabebereiche mit der Klasse Eingabe (die einleitenden HTML-Tags haben
dazu das Universalattribut class= notiert) erhalten eine hellgelbe Hintergrundfarbe, eine feste
Breite von 300 Pixeln, und der Rahmen um die Felder erhlt die gleichen Eigenschaften wie der
um das Formular. Auswahlelemente erhalten alle ein helles Zyan-Blau als Hintergrundfarbe,
Auswahllisten der Klasse Auswahl ebenfalls eine feste Breite von 300 Pixeln. Bei den Auswahlelementen dieser Klasse wird versucht, einen hellgrauen Rahmen der Dicke 1 Pixel zuzuweisen.

338

Kapitel 10: Formulare

Buttons schlielich, die im Beispiel fr die beiden Buttons zum Absenden und Abbrechen
bentigt werden, bekommen eine graue Hintergrundfarbe und weie Schrift zugewiesen und
sollen 200 Pixel breit sein. Auch die Buttons erhalten wieder den dicken hellgrauen Rahmen.

10.12

Formulare verarbeiten

10.12.1 Formulare als E-Mail

Viele Anwender, die als Zugabe zu ihrem Internet-Zugang vom Provider Platz von fr eigene
Web-Seiten erhalten, haben keine Mglichkeit, eigene CGI-Scripts zur Datenverarbeitung auf
dem Server-Rechner einzusetzen. Dazu kommt, dass viele Homepage-Besitzer sich nicht in der
Lage fhlen, sich in Programmiersprachen, fremde Betriebssystemumgebungen, Umgebungsvariablen und Datenbertragungsprotokolle einzuarbeiten. Dennoch mchten viele Seitenanbieter die Mglichkeit nutzen, mit Hilfe von HTML-Formularen gezielte und einheitlich strukturierte Daten von Besuchern ihrer Web-Seiten einzuholen. Zu diesem Zweck besteht die Mglichkeit, sich ausgefllte Formulare als E-Mail zuschicken zu lassen.
Ein Problem stellen bei dieser Lsung jedoch Web-Browser dar, die nicht in der Lage sind,
Formulare mit action="mailto:..." zu versenden. Dazu gehren Standalone-Browser, die
kein eigenes E-Mail-Modul besitzen und darauf angewiesen sind, ein anderes E-Mail-Programm
auf dem Rechner des Anwenders zu starten. Dabei klappt aber nicht unbedingt immer die
Kommunikation zwischen Browser und E-Mail-Programm so, dass die Formulardaten
bergeben und vom E-Mail-Programm anstandslos versendet werden. Bei vielen Anwendern
tritt beispielsweise das Problem auf, dass das E-Mail-Programm einfach ein leeres Mail-Fenster
ffnet, statt direkt die vom Browser bergebenen Formulardaten zu versenden. Gegen diese
Probleme knnen Sie als Anbieter von Web-Seiten nichts unternehmen. Es ist also ein
Glcksspiel, ob der Formularversand via E-Mail bei Ihren Seitenbesuchern klappt oder nicht.
Um das Problem zu umgehen, knnen Sie einen ffentlichen CGI-Service fr so genannte FormMailer in Anspruch nehmen. Dort werden die Formulardaten von einem CGI-Programm verarbeitet und Ihnen dann als E-Mail zugeschickt. Im Linkverzeichnis des Online-Angebots von
SELFHTML (selfaktuell.teamone.de/) aktuell finden Sie auf der Seite Homepage-Services
Verweise zu Anbietern solcher Form-Mailer.
Ein anderes Problem bei mailto-Formularen besteht darin, dass die Formulardaten beim
Abschicken per Voreinstellung nach einem bestimmten Mime-Typ kodiert werden, dem MimeTyp application/x-www-form-urlencoded. Dabei werden alle Leerzeichen, verschiedene
Sonderzeichen und Umlaute durch spezielle Zeichenfolgen ersetzt. So lautet beispielsweise der
Satz Danke fr die Hilfe! nach der Umwandlung: Danke+f%FCr+die+Hilfe%21. Fr Menschen ist das ziemlich ungeniebarer Lesestoff. Um die Kodierung zu verhindern, knnen Sie im
einleitenden <form>-Tag zwar die Angabe enctype="text/plain" angeben. Von Anwendern,
deren Web-Browser diese Angabe jedoch nicht interpretiert, werden Sie dennoch kodierte
Formulardaten erhalten.
Benutzen Sie die Mglichkeit, sich Formulare direkt per E-Mail zuschicken zu lassen, also nur im
Notfall und nur dann, wenn es nicht um wirklich wichtige Dinge geht. In allen anderen Fllen ist
auf jeden Fall eine serverseitige Datenverarbeitung ber ein CGI-Script oder vergleichbares

10.12 Formulare verarbeiten

339

Script vorzuziehen. Denken Sie daran, dass die meisten Webspace-Provider bereits vorgefertigte
Form-Mailer-Scripts fr ihre Kunden anbieten.

10.12.2 Formulare und CGI

Viele Anwendungsflle fr Formulare in HTML bentigen eine Datenverarbeitung auf dem
Server-Rechner im Web. Wenn Sie beispielsweise Ihr gesamtes Web-Projekt nach einem Begriff
durchsuchbar machen wollen, knnen Sie dem Anwender ein Formular anbieten, in dem er den
Suchbegriff eingeben kann. Nach dem Abschicken des Formulars muss ein Script oder
Programm auf dem Server-Rechner alle Dateien des Projekts nach dem gewnschten Begriff
oder einen zuvor erzeugten Index oder eine Datenbank absuchen und eine dynamische HTMLDatei erzeugen, in der Verweise auf alle Seiten enthalten sind, die den Suchbegriff enthalten.
Fr solche Flle, aber auch fr Anwendungsflle wie automatische Gstebcher, Diskussionsforen, elektronische Einkaufskrbe usw. bentigen Sie ein Script oder Programm auf dem Server-Rechner, das die in einem Formular eingegebenen oder ausgewhlten Daten sofort verarbeitet und dem Anwender echte Interaktion bietet.
Die Standardprogrammierschnittstelle auf Web-Servern hierfr ist CGI (Common Gateway
Interface). Manche Web-Server haben je nach installierter HTTP-Software auch noch andere
Programmierschnittstellen. Der Provider, bei dem Sie Ihre Web-Seiten speichern, muss Ihnen
Zugriff auf diese Programmierschnittstelle erlauben, damit Sie solche Anwendungen selbst
realisieren knnen. Viele Discount-Provider erlauben ihren Mitgliedern jedoch keinen solchen
Zugriff.
Die meist verwendete Programmiersprache fr CGI-Scripts ist Perl. Fragen Sie jedoch vor dem
Programmieren eines eigenen CGI-Scripts Ihren Provider, welche Art von Programmen auf dem
Server ausfhrbar sind. Wenn Sie in Perl programmieren wollen, fragen Sie den Provider, ob der
Server ber einen Perl-Interpreter verfgt und wo genau der Interpreter auf dem Server liegt.

341

11 Multimedia

11.1

Objekte einbinden

11.1.1 Allgemeines zu Objekten in HTML

Unter Objekt wird hier jede Art von Datei oder Datenquelle verstanden, die sich auerhalb
einer HTML-Datei befindet und in diese HTML-Datei eingebunden werden soll. Es kann sich
um eine Datendatei handeln, also etwa um eine Excel-Tabelle, eine AutoCad-Zeichnung, eine
MIDI-Musikdatei, ein Flash-Movie, eine Streaming-Quelle fr Rundfunkbertragung und vieles
andere mehr. Es kann sich aber auch um eine vom Web-Browser ausfhrbare Datei handeln,
also um ein Programm. Das knnen zum Beispiel Java-Applets oder ActiveX-Controls sein.
Damit nicht fr jede neue Form der Einbindung anderer Ressourcen ein neues HTML-Element
bentigt wird, soll ein einziges, mchtiges HTML-Element fr alle Multimedia- und Fremdprogrammreferenzen gengen: das object-Element. Dieses Element kann zwar nicht das Problem
lsen, wie eine beliebige Datei beim Anwender angezeigt werden kann, aber es bietet zumindest
eine einheitliche Syntax und trgt dadurch zur Vereinfachung von HTML bei.
Das object-Element wird jedoch immer noch nicht vollstndig von den Web-Browsern untersttzt. Das liegt zum Teil allerdings auch an der Vielzahl der proprietren Multimedia-Formate
und ihren unterschiedlichen Schnittstellen. Das object-Element ist jedoch so ausgelegt, dass es
mglichst flexibel auf alle denkbaren Anforderungen reagieren kann und dem Browser gengend
Information liefert, um mit der ausfhrenden Anwendung zu kommunizieren und sie in sein
Anzeigefenster einzubetten.
Objekte sind aus HTML-Sicht Inline-Elemente. In der Strict-Variante von HTML mssen solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder
einem allgemeinen Bereich oder auch einer Tabellenzelle.
Beachten Sie: Wenn Sie mit Versuchen, das object-Element zu verwenden, keinen Erfolg
haben, probieren Sie folgende herkmmlichen Mglichkeiten:
Multimedia einbinden (Netscape, Kapitel 11.4)
Java-Applets einbinden (Kapitel 11.3)
Das object-Element wird vom Internet Explorer seit Version 3.x und von Netscape seit Version
4.x untersttzt. Von einer ernst zu nehmenden Implementierung kann bei diesen Produktversionen aber noch keine Rede sein. Deshalb ist bei den Beispielen auf dieser Seite in der Regel Internet Explorer 5.0 und Netscape 6.0 angegeben. Aber auch das bedeutet noch lange nicht, dass mit
diesen Browsern alles reibungslos funktioniert.
Binden Sie Multimedia-Dateien im Normalfall nicht kommentarlos in Ihre Web-Seiten ein, sondern weisen Sie den Anwender darauf hin, um welche Art von Daten es sich handelt und unter

342

Kapitel 11: Multimedia

welchen Voraussetzungen eine korrekte Anzeige mglich ist. Wenn Sie groe Dateien einbetten,
weisen Sie den Anwender im umgebenden Text auf die Gre der Datei hin.

11.1.2

Datendateien als Objekt einbinden

Sie knnen eine beliebige Datendatei als Objekt in eine HTML-Datei einbinden, also z.B. ein
Video, eine Konstruktionszeichnung, eine als fertige Datei vorliegende 3-D-Welt, eine Musikdatei oder dergleichen. Auch einfache Textdateien und andere HTML-Dateien knnen Sie auf
diese Weise einbinden. Ein Web-Browser kann solche Dateien anzeigen, wenn er entweder selber
in der Lage ist, das Dateiformat anzuzeigen, oder wenn der Anwender ein entsprechendes PlugIn installiert hat. Wenn das Plug-In installiert ist, kann der Web-Browser die Datei so in seinem
Anzeigefenster prsentieren, wie sie von dem Ursprungsprogramm erstellt wurde. Bei Abspielvorgngen, etwa von Videos oder Sound, wird ein entsprechender Player angezeigt je nachdem,
wie das Plug-In beschaffen ist.
Wenn dem Browser eine Verknpfung zwischen dem Datentyp und einem Fremdprogramm bekannt ist, kann er das Fremdprogramm mit der betreffenden Datei starten. Ob die Daten dann
jedoch innerhalb des Bereichs auf der Web-Seite angezeigt werden, der fr das Objekt definiert
ist, hngt davon ab, ob der Browser und das andere Programm entsprechende Kommunikationsmglichkeiten, z.B. vom Betriebssystem bereitgestellte Kommunikationsschnittstellen, nutzen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Analoguhr als SVG-Grafik mit eingebettetem JavaScript</h1>
<p><object data="uhr.svg" type="image/svg+xml" width="200" height="200">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object></p>
</body>
</html>

Mit <object> leiten Sie die Referenz auf die einzubindende Datei ein, mit </object> wird
das Element beendet. Das object-Element hat keine Pflichtattribute. Je nachdem, was Sie damit
einbinden, mssen Sie auf Herstellerhinweise achten oder selbst herausfinden, welche der nach
HTML-Standard mglichen Attribute Sie angeben sollten oder mssen. Zwischen dem einleitenden <object>-Tag und dem abschlieenden </object>-Tag kann beliebiger HTMLQuelltext notiert werden. Im obigen Beispiel ist einfach ein Text notiert, dass der Browser das
Objekt nicht anzeigen kann. Ebensogut knnte an dieser Stelle auch eine alternative Grafik notiert werden oder ein alternativer Versuch, das Objekt einzubinden, beispielsweise nach der
herkmmlichen Netscape-Syntax (Kapitel 11.4). Es ist sogar erlaubt, als Inhalt eines object-

11.1 Objekte einbinden

343

Elements ein anderes object-Element zu notieren, um damit beispielsweise ein alternatives

Objekt in einem anderen Dateiformat einzubinden.

11.1:

Dieses Beispiel wird nur von Internet Explorer ab Version 5 und Netscape 6 angezeigt.

Um eine Datendatei einzubinden, ist das Attribut data= vorgesehen. Damit referenzieren Sie die
gewnschte Datei (data = Daten). Bei der Wertzuweisung an dieses Attribut gelten die Regeln
zum Referenzieren in HTML. Wenn sich die Datei also beispielsweise im gleichen Verzeichnis
wie die HTML-Datei befindet, dann gengt einfach die Angabe des Dateinamens so wie im
obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso
mglich, z.B.:
<object data="verzeichnis/datei.xy">
<object data="../datei.xy">
<object data="../woanders/datei.xy">

Auch das Referenzieren von einem vollstndigen URI ist mglich, z.B.:
<object data="http://www.tolles-projekt.de/datei.xy">

Zustzlich knnen Sie den Mime-Typ der Datei angeben. Bei Datendateien, die mit data= referenziert werden, notieren Sie dazu das Attribut type= so wie im obigen Beispiel. Als Wert
weisen Sie einen gltigen Mime-Type zu. Wenn Sie den Mime-Typ nicht kennen, lassen Sie die
Angabe type= weg. Wenn Sie den Mime-Typ kennen und angeben, helfen Sie durch die Angabe
dem Web-Browser, schneller zu reagieren.
Bei eingebundenen Objekten sollten Sie stets Angaben zu Breite und Hhe notieren. Mit dem
Attribut width= legen Sie die Breite in Pixel oder in Prozent in Bezug auf die verfgbare Breite
fest, und mit height= die Hhe.
Manche Daten, zum Beispiel Videos, haben eine Originalbreite und Originalhhe. Um so ein
Video optimal einzubinden, sollten Sie dessen genaue Breite und Hhe kennen und mit
width= und height= beim Einbinden der Videodatei angeben.
Manche Plug-Ins, zum Beispiel Sound-Player, haben eine bestimmte Gre. Wenn Sie die
genaue Gre kennen, sollten Sie beim Einbinden von Sound-Dateien, die mit dem betreffenden Plug-In wiedergegeben werden sollen, die genaue Hhe und Breite des Players
angeben. So knnen Sie den Player vollstndig und optimal innerhalb der Bildschirmanzeige
der HTML-Datei platzieren. Die Grenangaben sind bei solchen Plug-Ins normalerweise bei
der Software dokumentiert.

344

Kapitel 11: Multimedia

Wenn Sie zunchst nicht wissen, wie viel Breite oder Hhe das Objekt bentigt, mssen Sie
verschiedene Werte ausprobieren.
Mit den Angaben width="0" und height="0" knnen Sie die sichtbare Anzeige auch ganz
unterdrcken. Das kann zum Beispiel bei Hintergrundmusik erwnscht sein.
Beachten Sie: Das object-Element darf auch im Dateikopf einer HTML-Datei, also zwischen
<head> und </head> notiert werden. Das ist dann sinnvoll, wenn die Datendatei nicht angezeigt
werden soll, z.B. wenn einfach eine Hintergrundmusik abgespielt werden soll. In diesem Fall
empfiehlt es sich, die Angaben width="0" und height="0" im einleitenden <object>-Tag zu
notieren. Bei Objekten, die im HTML-Dateikopf eingebunden werden, darf jedoch zwischen
<object> und </object> kein alternativer Inhalt stehen, der visuelle Ausgaben erzeugt.
Das W3-Konsortium sieht im HTML-Standard auch die Mglichkeit vor, das object-Element
innerhalb eines Formulars zu notieren, um beispielsweise in visueller Interaktion mit dem
Anwender Werte zu ermitteln, die dann beispielsweise in versteckten Formularfeldern gespeichert und zusammen mit den Formulardaten bertragen werden. Vorgaben, wie genau die
Kommunikation zwischen Objekt und Formularelementen funktionieren soll, gehren jedoch
nicht zur HTML-Spezifikation.

11.1.3

Verweissensitive Grafiken als Objekt einbinden

Diese Mglichkeit des object-Elements ist vor allem fr Grafiken vorgesehen, die nicht einem
der Standardtypen GIF, JPEG oder PNG entsprechen, die blicherweise mit dem <img>-Tag eingebunden werden. Gedacht ist die Mglichkeit beispielsweise fr vektorgrafische CAD-Zeichnungen oder andere Grafikformate, die Sie mit Hilfe des object-Elements einbinden. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<map name="Verweise">
<area shape="poly" coords="1,90,129,81,202,275,,273,415,202,417,150,311,1,173"
href="http://www.duesseldorf.de/">
</map>
<h1>Eine Stadt am Rhein</h1>
<p>Klicken Sie, falls Sie die Lurawave-Grafik sehen k&ouml;nnen, auf den Rhein.
Falls nichts passiert, unterst&uuml;tzt der Browser zwar die Anzeige des Objekts,
aber nicht das Feature verweissensitiver Grafiken f&uuml;r Objekte.</p>
<p><object data="ddorf.lwf" type="image/x-wavelet" width="413" height="417"
usemap="#Verweise">

11.1 Objekte einbinden

345

Ihr Browser kann das Objekt leider nicht anzeigen!

</object></p>
</body>
</html>

Um eine verweissensitive Grafik als Objekt einzubinden, notieren Sie im einleitenden <object>Tag das Attribut usemap=. Das restliche Verfahren ist dann das gleiche wie bei verweissensitiven
Grafiken (siehe Kapitel 7.4). Das Beispiel benutzt fr die Grafik das stark komprimierende
Format Lurawave (Kapitel 24.1.5).

11.1.4

Java-Applets als Objekt einbinden

Java-Applets sind ausfhrbare Programme, deren Bildschirmausgaben ein Web-Browser innerhalb seines Anzeigefensters darstellen kann. Applets knnen z.B. bewegte Animationen (Tricksequenzen) enthalten, Echtzeitablufe in bewegten Grafiken darstellen (Stichwort: Brsenticker)
oder Interaktionen mit dem Anwender austauschen. So werden Java-Applets etwa hufig beim
Online-Banking eingesetzt.
Java-Applets mssen in kompilierter Form vorliegen, um bei der Referenzierung in einer
HTML-Datei ausgefhrt werden zu knnen. Normalerweise haben kompilierte Java-Applets die
Dateinamenerweiterung .class. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Wagen Sie sich durchs Labyrinth!</h1>
<p><object classid="java:zmaze3d.class" codetyte="application/java-vm" width="600"
height="400"></object></p>
</body>
</html>

Mit dem Attribut classid= im einleitenden <object>-Tag referenzieren Sie die Implementierung des JavaApplets (classid = class identifier = Klassenbezeichner). Erlaubt ist ein spezieller URI:
Die Wertzuweisung besteht aus der festen Zeichenfolge java: gefolgt von dem Namen der
.class-Datei (also der ausfhrbaren Applet-Datei). Im obigen Beispiel wird auf diese Weise die
Datei zmaze3d.class in der Form classid="java:zmaze3d.class" eingebunden.

346

11.2:

Kapitel 11: Multimedia

Komplexe Interaktionen wie dieses Labyrinth sind mit Java-Applets kein Problem.

Wenn sich die Applet-Datei in einem anderen Verzeichnis befindet als die HTML-Datei, in der
sie referenziert wird, oder auf einem anderen Internet-Server, dann mssen Sie den Pfad bzw. die
Adresse des Server-Rechners und das Verzeichnis angeben, wo sich die Programmdatei befindet
(nur das Verzeichnis, nicht mehr den Namen der Programmdatei). Dazu verwenden Sie ebenfalls im einleitenden <object>-Tag das Attribut codebase=. Bei der Wertzuweisung an dieses
Attribut gelten die Regeln zum Referenzieren in HTML. Die Angabe von codebase= kann in
einigen Fllen auch erforderlich sein, um Teile eines Java-Applets von einem bestimmten Internet-Server nachzuladen.
hnlich wie fr Datendateien gibt es auch fr ausfhrbare Programmdateien Mime-Typen. Bei
Java-Applets sind die Angaben codetype="application/java" oder codetype="application/
java-vm" gebruchlich. Zwischen <object> und </object> knnen Sie im Zusammenhang
mit Java-Applets Aufrufparameter notieren.
Viele Java-Applets erwarten einen oder mehrere solche Parameter beim Aufruf. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ein Lauftext mit Java</h1>
<p><object classid="java:zticker.class" codetyte="application/java" width="600"
height="60">
<param name="msg" value="Die Energie des Verstehens">
<param name="href" value="../../../index.htm">

11.1 Objekte einbinden

347

<param name="speed" value="5">

<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</object></p>
</body>
</html>

Jeder Parameter wird durch <param name= value=> angegeben. Beim Attribut name= geben Sie
den Namen des Parameters an. Bei value= geben Sie den gewnschten Wert des Parameters an,
der dem Applet bergeben werden soll.
Beachten Sie: Bei Java-Applets, die aus mehreren class-Dateien bestehen, mssen Sie die Datei
angeben, die den Programmstart enthlt. Nheres dazu entnehmen Sie der Dokumentation, die
solchen Java-Programmen beigefgt sein sollte. Auch die genauen Anweisungen zum Einbinden
eines Java-Applets z.B. zu erwarteten oder erlaubten Parametern finden Sie normalerweise in
der Dokumentation zu dem Java-Applet. Beachten Sie auch die herkmmliche Methode zum
Einbinden von Java-Applets (Kapitel 11.3).

11.1.5

ActiveX-Controls als Objekt einbinden

ActiveX-Controls knnen hnliche Aufgaben wahrnehmen wie Java-Applets. Jedoch sind sie
strker als Java-Applets in der Windows-Welt und der Welt von Microsoft verankert und werden
nur vom Microsoft Internet Explorer interpretiert. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Eine MIDI-Datei</h1>
<object width="267" height="175"
classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="filename" value="ritmo.mid">
</object>
</body>
</html>

Mit dem Attribut classid= referenzieren Sie die Implementierung des gewnschten ActiveXControls (classid = class identifier = Klassenbezeichner). Die Angabe besteht aus der festen Zeichenfolge CLSID: gefolgt von der Bezeichner-ID. Diese ID mssen Sie kennen. Im obigen
Beispiel wird ein recht bekanntes ActiveX-Control referenziert, nmlich dasjenige, das unter

348

Kapitel 11: Multimedia

Windows zum Abspielen von Multimedia-Dateien zustndig ist. Es bindet den Media-Player von
Windows in den Bereich des definierten Objekts ein. Mit classid="CLSID:05589FA1-C35611CE-BF01-00AA0055595A" binden Sie also ein ActiveX-Control ein, das es erlaubt, Soundund Videodateien aller bekannten Formate wie WAV, AU, MID, MP3, AVI, MPEG usw. abzuspielen.

11.3: Per ActiveX-Control spielt der Internet Explorer ein Musikstck aus einer MIDI-Datei ab.

Mit dem Attribut codebase= knnen Sie die Internet-Adresse angeben, von der das ActiveXControl geladen werden kann, falls der WWW-Browser es auf dem Rechner des Anwenders
nicht findet (ActiveX-Controls werden nach dem Laden normalerweise in einem WindowsUnterverzeichnis abgespeichert Dateien .ocx und beim erneuten Aufruf auch wieder von dort
geladen.
ActiveX-Controls knnen genauso wie Java-Applets Parameter bergeben bekommen. Diese
werden auch genauso notiert, nmlich mit <param name= value=> zwischen <object> und
</object>. Das ActiveX-Control im obigen Beispiel erwartet einen Parameter namens filename, der bei value= die Angabe des gewnschten Dateinamens der abzuspielenden Datei
erwartet.

11.1.6

Flash-Anwendungen als Objekt einbinden

Das Einbinden von Flash (Dateien .swf) funktioniert hnlich wie das Einbinden von Java-Applets
oder ActiveX-Controls. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Das gute alte Wurm-Spiel in Flash!</h1>

11.1 Objekte einbinden

349

<p>Erst auf &quot;Start&quot; klicken. Dann Leertaste dr&uuml;cken. Mit dem Wurm
die
angezeigte Zahl ansteuern und treffen. Au&szlig;enr&auml;nder und Hindernisse nicht
ber&uuml;hren!</p>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
</object>
</body>
</html>

11.4: Auch mit Flash lassen sich komplexe Animationen wie etwa ganze Spiele realisieren.

Mit dem Attribut classid= referenzieren Sie die gewnschte Implementierung (classid = class
identifier = Klassenbezeichner). Die Angabe besteht aus der festen Zeichenfolge CLSID: gefolgt

350

Kapitel 11: Multimedia

von der Bezeichner-ID. Fr Flash mssen Sie stets classid="CLSID:D27CDB6E-AE6D-11cf96B8-444553540000" notieren.

Mit dem Attribut codebase= knnen Sie die Internet-Adresse angeben, von der das Flash-PlugIn geladen werden kann, falls es beim Anwender nicht vorhanden ist. Im obigen Beispiel ist die
Adresse fr Flash 4 angegeben. Wenn Sie Flash-Anwendungen einsetzen, die mit Flash 5 erstellt
wurden, geben Sie codebase="http://active.macromedia.com/flash5/cabs/ swflash.
cab#version=5,0,0,0" an.
Flash-Anwendungen knnen genauso wie Java-Applets Parameter bergeben bekommen. Diese
werden auch genauso notiert, nmlich mit <param name= value=> zwischen <object> und
</object>. Der wichtigste Parameter ist der namens movie, bei dem Sie bei value die gewnschte swf-Datei angeben.
In der Praxis ist es oft besser, zustzlich zu dem object-Element auch noch die herkmmliche
Netscape-Syntax mit anzugeben. So kommen auch ltere Netscape-Browser damit zurecht, sofern ein Flash-Plug-In installiert ist. Der Nachteil dabei ist jedoch, dass Sie ein HTML-Element
verwenden mssen, das nicht zum HTML-Standard gehrt. Sie erzeugen damit also ungltiges
HTML. Fr das obige Beispiel lautet dann der Quelltext:
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
<embed src="nibbles.swf" quality="high" scale="exactfit" menu="false"
bgcolor="#000000" width="600" height="400" swLiveConnect="false"
type="application/x-shockwave-flash" pluginspage
="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveF
lash"></embed>
</object>

11.1.7

Rahmen um Objekte

Sie knnen festlegen, dass der Browser einen Rahmen um ein eingebundenes Objekt zeichnet.
Das kann zur Verdeutlichung beitragen, dass es sich um ein eingebettetes Objekt handelt. Das
Attribut dafr ist jedoch als deprecated gekennzeichnet und soll knftig aus dem HTML-Standard entfallen, da es durch die CSS-Eigenschaft border ersetzbar ist. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Objekte</title>

11.1 Objekte einbinden

351

</head>
<body>
<h1>Eine eingerahmte eingebundene Text-Datei!</h1>
<p><object data="html.txt" type="text/plain" width="300" height="400" border="2">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object></p>
</body>
</html>

11.5: Eine Textdatei als Objekt in einer Web-Seite (mit Rahmen).

Durch das Attribut border= innerhalb des einleitenden <object>-Tags wird ein Rahmen um
das Objekt definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.
Beachten Sie: Das obige Beispiel zeigt, wie Sie einfache Textdateien in a box einbinden knnen
ebenso geht es mit HTML-Dateien und dem Mime-Typ text/html. Der Internet Explorer
zeigt die Dateien an, allerdings keinen Rahmen. Netscape kann die Textdatei nicht als Objekt anzeigen.

352

Kapitel 11: Multimedia

11.1.8

Namen fr Objekte

Mit name= vergeben Sie einen Namen fr das Objekt. Der Name sollte nicht zu lang sein und
darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss
ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen
hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (_)
enthalten. Gro- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden. Ein Detailbeispiel:
<object name="MIDI_Datei" width="267" height="175"
classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="filename" value="ritmo.mid">
</object>

11.2

Eigenschaften von Objekten

11.2.1

Objekt zum umgebenden Text ausrichten

Da das object-Element ein Inline-Element ist, knnen Objekte mitten in einem Text platziert
werden. Wenn das Objekt hher ist als die Zeilenhhe, dann muss der Text der gleichen Zeile
vertikal zum Objekt ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text
untenbndig zum Objekt ausgerichtet. Sie knnen jedoch mit Hilfe eines Attributs selbst
bestimmen, wie der Text zum Objekt ausgerichtet werden soll. Dieses Attribut ist allerdings als
deprecated gekennzeichnet und soll knftig aus dem HTML-Standard entfallen. Die gleiche
Wirkung lsst sich nmlich auch mit CSS Stylesheets erzielen. Die Angaben sind jedoch nur von
Bedeutung, wenn die Anzeige mit Hilfe eines Plug-Ins erfolgt und direkt im Anzeigefenster des
WWW-Browsers mglich ist. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>HIER SPIELT&nbsp;&nbsp;<object data="haste.mid" type="audio/x-midi" width="200"
height="100" align="middle">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object>&nbsp;&nbsp;DIE MUSIK</h1>
</body>
</html>

Mit dem Attribut align= knnen Sie umgebenden Text vertikal zum Objekt ausrichten (align =
Ausrichtung).

11.2 Eigenschaften von Objekten

353

Mit align="top" wird der Text obenbndig zum eingebundenen Objekt ausgerichtet (top =
oben).
Mit align="middle" wird der Text mittig zum eingebundenen Objekt ausgerichtet (middle
= mittig).
Mit align="bottom" wird der Text untenbndig zum eingebundenen Objekt ausgerichtet
(bottom = unten).
Beachten Sie: Um Objekte und Texte sauber zueinander auszurichten, knnen Sie auch mit
rahmenlosen (blinden) Tabellen arbeiten.
Netscape interpretiert noch weitere Wertzuweisungen, die jedoch nicht zum HTML-Standard
gehren und ungltiges HTML erzeugen:
Mit align="texttop" richten Sie den Text obenbndig zum Objekt aus, und zwar an der
Oberkante des kleinsten Textes (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zum Objekt aus, auch bei
unterschiedlichen Textgren (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbndig zum Objekt aus, und zwar an der
Unterkante des kleinsten Textes (absbottom = absolute bottom = in jedem Fall untenbndig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe
align="bottom". Benutzen Sie deshalb besser die Standardangabe.

11.2.2

Text um ein Objekt flieen lassen

Objekte knnen Sie links oder rechts ausrichten. Der umgebende Text fliet dabei um das
Objekt. Mit zwei weiteren Attributen knnen Sie Abstand zum umflieenden Text erzeugen,
damit der Text nicht direkt am Objekt klebt. Den automatischen Textumfluss knnen Sie auch
abbrechen und die Textfortsetzung unterhalb des Objekts erzwingen. Alle dazu notwendigen
Attribute sind allerdings als deprecated gekennzeichnet und sollen knftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lsst sich nmlich auch mit CSS Stylesheets erzielen. Ein
Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#333333" text="#FFFFFF">
<h1>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="200" height="200" align="left" hspace="10" vspace="7">
<param name="movie" VALUE="neucler.swf">

354

Kapitel 11: Multimedia

</object>
Animation!
</h1>
<p>Kann sch&ouml;n sein, wenn sie nicht zu aufdringlich ist.
Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Gr&ouml;&szlig;e.
<br clear="all"></p>
<h2>Gratulation!</h2>
<p>Der Text geht unterhalb weiter.</p>
</body>
</html>

11.6: Der Text fliesst rechts um die Animation herum und wird dann unterhalb fortgesetzt.

Mit den Angaben align="left" bzw. align="right" veranlassen Sie den Browser, das Objekt
linksbndig bzw. rechtsbndig auszurichten und den darauffolgenden Flietext rechts bzw. links
neben dem Objekt anzuzeigen und um das Objekt herumflieen zu lassen (align = Ausrichtung,
left = links, right = rechts). Der umgebende Text kann verschiedene Elemente enthalten, zum
Beispiel auch berschriften oder Listen.
Um Abstand zwischen Objekt und umflieendem Text zu erzeugen, stehen die Attribute
hspace= und vspace= zur Verfgung.

Mit hspace= [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen
links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand). Mit vspace=
[Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen darber bzw.
darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace= betrifft immer den linken und den rechten Randabstand vom Objekt,
vspace= immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei
einem links ausgerichteten Objekt hspace= definieren, wird nicht nur rechts vom Objekt zum
nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters

11.2 Eigenschaften von Objekten

355

hin. Um dies zu verhindern, knnen Sie exakter arbeiten, indem Sie CSS Stylesheets verwenden.
Sie knnen beide Attribute notieren oder auch nur eines davon.
Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt
unterhalb des Objekts angezeigt wird, knnen Sie einen Zeilenumbruch mit dem Attribut
clear= notieren.
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nchsten Zeile in jedem Fall
unterhalb des Objekts fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nchsten Zeile unterhalb
eines linksbndig ausgerichteten Objekts fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nchsten Zeile unterhalb
eines rechtsbndig ausgerichteten Objekts fortgesetzt wird.

11.2.3

Meldungstext whrend des Ladevorgangs anzeigen

Multimedia-Objekte oder ausfhrbare Programme wie Java-Applets knnen zum Teil lngere
Ladezeiten verursachen. Auch dann, wenn die Dateien selbst nicht grer als durchschnittliche
HTML- oder Grafikdateien sind, mssen beim Anwender in der Regel Plug-Ins oder Laufzeitinterpreter aktiviert werden. Das kostet Zeit.
Um den Anwender nicht im Unklaren ber die Wartezeit und die Ladevorgnge an seinem
Rechner zu lassen, knnen Sie einen Meldungstext angeben, der dem Anwender bis zur fertigen
Anzeige des eingebundenen Objekts angezeigt wird. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Bauen Sie eine Br&uuml;cke!</h1>
<p><object classid="java:Bridges.class" codetyte="application/java-vm" width="350"
height="420"
standby="Das Spiel wird geladen. Bitte einen Moment Geduld...">
<param name="Color" value="white">
</object></p>
<p>Klicken Sie auf wei&szlig;e Felder. Mit Rot versuchen Sie Ihre Br&uuml;cke
zwischen
oberem und unterem Spielfeldrand zu bauen. Blau versucht Sie daran zu
hindern.</p>
</body>
</html>

356

Kapitel 11: Multimedia

Innerhalb eines einleitenden <object>-Tags knnen Sie mit dem Attribut standby= einen Meldungstext fr den Ladevorgang angeben.

11.2.4

Objekte nur bei Aufruf durch Anwender anzeigen

Sie knnen ein Objekt definieren, das zunchst nur deklariert wird. Damit es angezeigt oder ausgefhrt wird, muss es erst aktiviert werden. Das kann z.B. mit Hilfe eines Verweises auf das
deklarierte Objekt geschehen oder durch ein anderes Objekt, das die Initialisierung anstt.
Browser, die diese Option nicht kennen (darunter auch Netscape, MS Internet Explorer), starten
den Abspielvorgang sofort. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Wollen Sie oder wollen Sie nicht?</h1>
<p><object declare id="Marquee" classid="java:zticker.class"
codetyte="application/java" width="600" height="60">
<param name="msg" value="Sie wissen was Sie wollen!">
<param name="href" value="../../../index.htm">
<param name="speed" value="5">
<param name="bgco" value="255,255,0">
<param name="txtco" value="255,000,000">
<param name="hrefco" value="255,255,255">
</object></p>
<p><a href="#Marquee">Animierten Text anzeigen</a></p>
</body>
</html>

Innerhalb eines einleitenden <object>-Tags knnen Sie mit dem Standalone-Attribut declare
ein Objekt als lediglich deklariert definieren (declare = erklren, angeben).
Mit dem Universalattribut id= knnen Sie einen Zielanker innerhalb des Objekts definieren, im
Beispiel: Marquee (id = identifier = Bezeichner). Der Name sollte nicht zu lang sein und darf
keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein
Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen
hchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Gro- und Kleinschreibung wird unterschieden.
Mit einem Verweis auf den Zielanker (siehe obiges Beispiel) knnen Sie den Anwender das
Objekt aktivieren lassen. Beim href-Attribut notieren Sie das fhrende Gatterzeichen (#) und
dahinter den id-Namen des Objekts.

11.3 Java-Applets einbinden (herkmmlich)

11.2.5

357

Objekte formatieren mit CSS

CSS Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen Objekt zum umgebenden Text ausrichten und Text um Objekt flieen lassen ebenso realisierbar sind wie mit
HTML. Das Fein-Tuning ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS mssen Sie
arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der
HTML-Variante Strict arbeiten wollen. Mageblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: vertical-align (Vertikale Ausrichtung), float (Textumfluss),
clear (Fortsetzung bei Textumfluss), Auenrand und Abstand. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Objekte formatieren mit CSS</title>
</head>
<body>
<h1>HIER SPIELT <object data="breeze.mid" type="audio/x-midi" width="200"
height="100"
style="vertical-align:middle; margin-left:30px; margin-right:30px;">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object> DIE MUSIK</h1>
</body>
</html>

Mit style="vertical-align:middle" erreichen Sie in einem <object>-Tag das Gleiche wie

mit align="middle", mit style="vertical-align:text-top" das Gleiche wie mit
align="top", und mit style="vertical-align:text-bottom" das Gleiche wie mit
align="bottom".
Mit den CSS-Angaben margin-left:30px; und margin-right:30px; wird im obigen Beispiel
rechts und links zum Text hin ein Abstand von 30 Pixeln geschaffen. Wenn Sie Text um ein
Objekt flieen lassen wollen (im obigen Beispiel nicht realisiert), knnen Sie mit einer Angabe
wie style="float:left; margin-right:20px; margin-bottom:10px" erreichen, dass das
Objekt links ausgerichtet wird und nachfolgender Text rechts um das Objekt fliet. Dabei wird
zwischen Objekt und Text ein Abstand von 20 Pixeln gehalten (links vom Objekt wird dagegen,
anders als beim HTML-Attribut hspace=, kein Abstand von 20 Pixeln erzeugt). Nach unten hin,
also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.

11.3
11.3.1

Java-Applets einbinden (herkmmlich)

Java-Applets einbinden

Java hat zumindest im Web nicht ganz das gebracht, was die Marketingstrategen anfangs
prophezeit hatten. Aber eines kann man sagen: Es hat eine Menge Staub aufgewirbelt. Sun, der
Entwickler von Java, hatte in den wilden Anfangsjahren von HTML zunchst eine eigene Syntax
zum Einbinden von Java-Applets in seinen WWW-Browser HotJava integriert. Doch Netscape

358

Kapitel 11: Multimedia

implementierte eine andere Syntax. Diese Syntax wurde dann auch seinerzeit in den HTMLStandard 3.2 bernommen. Angesichts von Flash und all den anderen Nachfolgern von Java
erkannte man aber, dass man eine allgemeinere Media-Syntax bentigte, und so entstand fr
HTML 4.0 das Konzept der Objekte mit dem object-Element, das unter anderem auch das
Einbinden von Java-Applets erlaubt.
Vor allem aber wegen der immer noch nennenswerten Verbreitung von Netscape 4.x, dessen
HTML 4.0-Untersttzung stark zu wnschen brig lsst, ist jedoch bis heute noch die HTML
3.2-Syntax verbreitet und auch nur schwer tot zu kriegen. Bei vielen Dokumentationen zu JavaApplets wird diese Syntax wie selbstverstndlich als die bliche genannt und was die Rckwrtskompatibilitt zu lteren Browsern betrifft, nicht ganz zu Unrecht. Dennoch sollte man als
Web-Designer allmhlich ein gewisses Bauchgrimmen bekommen bei der Verwendung dieser
lteren Syntax. Denn im HTML-Standard ist sie auch lngst als deprecated gekennzeichnet und
soll knftig entfallen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ein HTML-Farbw&auml;hler mit Java</h1>
<p>Schieben Sie einfach mit der Maus die Schieberegler an eine gew&uuml;nschte
Position.</p>
<p>
<applet code="HexColor.class" width="640" height="200" alt="Java-Applets mit HTMLFarbw&auml;hler">
<param name="TestText" value="SELFHTML">
</applet>
</p>
</body>
</html>

Mit <applet> leiten Sie die Referenz eines Java-Programms ein, mit </applet> wird sie abgeschlossen (applet = application snippet = Anwendungsschnipsel). Mit dem Attribut code= referenzieren Sie das ausfhrbare Java-Applet, das normalerweise die Dateinamenerweiterung .class hat.
Bei dieser Angabe drfen Sie nur den Dateinamen notieren, auch wenn sich das Applet in einem
anderen Verzeichnis oder auf einem anderen Server befindet.
Falls sich das Applet in einem anderen Verzeichnis als die einbindende HTML-Datei oder auf
einem anderen Server befindet, knnen Sie mit codebase= den URI des Verzeichnisses angeben.
Mit codebase="../" beispielsweise adressieren Sie das Verzeichnis oberhalb des aktuellen Verzeichnisses usw. Wenn sich Ihr Java-Applet im gleichen Verzeichnis befindet wie die HTMLDatei, dann lassen Sie dieses Attribut weg.

11.3 Java-Applets einbinden (herkmmlich)

11.7:

359

Dieser Farbwhler zeigt die Hex-Notation passend zu den eingestellten RGB-Werten fr

Schrift und Hintergrund.

Fr den Fall, dass das Java-Applet beim Anwender nicht ausfhrbar ist, knnen Sie mit der
Angabe alt= einen Alternativtext definieren. Der Text muss in Anfhrungszeichen stehen. Er
wird nur dann angezeigt, wenn das Applet nicht anzeigbar ist.
Whrend bei Grafiken die Angabe des alt-Attributs im HTML-Standard Pflicht ist und die Angabe von Breite und Hhe zwar empfohlen, aber nicht erzwungen wird, ist es beim applet-Element genau umgekehrt. Dort ist das alt-Attribut freiwillig, aber die Angaben zu Breie und Hhe
sind Pflicht. Mit width= [Pixel/Prozent] bestimmen Sie die Anzeigebreite des Java-Applets, mit
height= die Hhe (width = Breite, height = Hhe). Angegebene Prozentwerte beziehen sich auf
die Breite bzw. Hhe des zur Verfgung stehenden Raums.
Zwischen dem einleitenden <applet>-Tag und dem abschlieenden </applet> notieren Sie in
vielen Fllen Parameter, die dem Applet beim Aufruf bergeben werden. Welche Parameter ein
Java-Applet erwartet, entnehmen Sie der Dokumentation zu dem Applet. Jeder Parameter wird
durch <param name= value=> angegeben (param = parameter = Parameter, value = Wert). Beim
Attribut name= geben Sie den Namen des Parameters an. Bei value= geben Sie den gewnschten
Wert des Parameters an, der dem Programm bergeben werden soll.
Mit dem Attribut archive= (im obigen Beispiel nicht verwendet) knnen Sie eine oder mehrere
Archivdateien (z.B. .zip) als URI angeben. Verwenden Sie dieses Attribut nur, wenn es in der
Dokumentation des Java-Applets verlangt wird.
Mit dem Standalone-Attribut mayscript (im obigen Beispiel nicht verwendet) erlauben Sie
JavaScript, auf den Programmablauf des Java-Applets Einfluss zu nehmen. Mehr zu diesem
Thema finden Sie im JavaScript-Kapitel im Abschnitt 20.10 Zugriff auf Code in Java-Applets.
Dieses Attribut gehrt jedoch nicht zum HTML-Standard.
Fr den Zugriff mit JavaScript ist es auch sinnvoll, dem Java-Applet einen Namen zu geben.
Dazu knnen Sie im einleitenden <applet>-Tag das Attribut name= notieren. Schlielich gibt es
im HTML-Standard noch das Attribut object=, das ebenfalls im einleitenden <applet>-Tag
notiert werden kann. Machen Sie davon jedoch nur Gebrauch, wenn es beim Java-Applet dokumentiert ist. Bei diesem Attribut kann ein Wert zugewiesen werden, der eine Ressource benennt,

360

Kapitel 11: Multimedia

mit deren Hilfe das Applet erst zum Leben erwacht (z.B. Freischalt-Funktion). Dies ist bei
Applets der Fall, deren init()-Methode beim Start nicht ausgefhrt wird und dazu eine externe
Ressource bentigt.

11.3.2

Java-Applets ausrichten

Java-Applets knnen Sie durch weitere Angaben im Verhltnis zum umgebenden Text ausrichten. Dabei knnen Sie den Abstand zum Text festlegen und auch die Textfortsetzung unterhalb
des Applet-Bereichs erzwingen. Ferner knnen Sie auf den Programmablauf des Java-Applets
Einfluss nehmen. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p style="color:#000080; font-size:26px">
<applet width="300" height="433" code="Nature.class" align="left" hspace="20"
vspace="12">
<param name="accumulate" value="yes">
<param name="background" value="FFFFFF">
<param name="backimg" value="pixel.gif">
<param name="DeveloperInfo" value="Michael Chancey Jr.">
<param name="speed" value="75">
<param name="foreground" value="FFFFFF">
<param name="graphic" value="winterbild.jpg">
<param name="randomdir" value="yes">
<param name="season" value="winter">
<param name="fallcount" value="400">
</applet>
Im Internet ist der Winter nett, weil im Hinternet ist das Bett!<br clear="all">
</p>
<p>Das Applet zeigt ein normales JPEG-Bild und l&auml;&szlig;t Schnee dar&uuml;ber
fallen.</p>
</body>
</html>

11.4 Multimedia einbinden (Netscape herkmmlich)

361

11.8: Mit diversen Attributen steuern Sie die Platzierung des Applets und den Textfluss.

Mit dem Attribut align= knnen Sie umgebenden Text vertikal zum Java-Applet ausrichten
(align = Ausrichtung), und zwar mit align="top" obenbndig, mit align="middle" mittig
und mit align="bottom" untenbndig. Ferner knnen Sie mit den Angaben align="left"
bzw. align="right" den Browser veranlassen, das Java-Applet linksbndig bzw. rechtsbndig
auszurichten und den darauffolgenden Flietext rechts bzw. links neben dem Applet anzuzeigen
und um das Objekt herumflieen zu lassen.
Um Abstand zwischen Applet und umflieendem Text zu erzeugen, stehen die Attribute
hspace= und vspace= [Pixel oder Prozent] zur Verfgung. Um den automatischen Textumfluss

zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb des Applets angezeigt wird,
knnen Sie einen Zeilenumbruch mit dem Attribut clear="all" (bei links- oder rechtsbndiger Ausrichtung), clear="left" (bei linksbndiger Ausrichtung) oder clear="right" (bei
rechtsbndiger Ausrichtung) notieren.

11.4
11.4.1

Multimedia einbinden (Netscape herkmmlich)

Multimedia-Bereich definieren

In seiner damals Furore machenden Produktversion 2.0 fhrte Netscape neben anderen bahnbrechenden Neuerungen wie dem font-Element, den Frames und der Mglichkeit, Java-Applets
einzubinden, auch ein Element namens embed ein, um andere Multimedia-Inhalte in HTML zu
referenzieren. Damit einhergehend implementierte Netscape die so genannte Plug-In-Schnitt-

362

Kapitel 11: Multimedia

stelle in seinem Browser. Schnell entstand ein Wildwuchs an Plug-In-Software, mit deren Hilfe
und dem hier beschriebenen Element sich beliebige multimediale oder proprietre Binrformate
in HTML einbinden lieen.
Aus heutiger Sicht gilt fr dieses Element jedoch noch strker als fr das Element zum Einbinden
von Java-Applets: Es ist ein Relikt und sollte allmhlich fallen gelassen werden. Denn im Unterschied zum applet-Element hat das embed-Element nie zum HTML-Standard gehrt. Es wird
hier noch beschrieben, weil es heute leider immer noch sehr verbreitet ist und beispielsweise bei
Netscape 4.x die einzig sinnvolle und halbwegs funktionierende Mglichkeit ist, Multimedia einzubinden. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Da kommt Freude auf!</h1>
<embed src="yippee.wav" width="140" height="60">
</body>
</html>

Mit <embed src=> definieren Sie eine Plug-In-Referenz (embed = einbetten, src = source =
Quelle). Beim src-Attribut notieren Sie die gewnschte Datei. Dabei gelten die Regeln zum Referenzieren in HTML.
Mit den Attributen width= und height= sollten Sie stets die Gre des eingebundenen Bereichs
bestimmen, damit der Browser die Seite schneller aufbauen kann. Beide Attribute erlauben als
Wertzuweisung Pixel (absolut) oder Prozentangaben (relativ in Bezug auf die zur Verfgung stehende Flche). Wenn Sie beide Werte auf 0 setzen, knnen Sie die sichtbare Anzeige des Bereichs
unterdrcken z.B. fr Sounddateien, die automatisch abspielen. Das embed-Element kann mit
oder ohne End-Tag notiert werden.
Ob und wie die Datei letztendlich beim Anwender angezeigt wird, hngt von vielen Faktoren
ab, zum Beispiel von der Art der Datei, von den Hardware-Voraussetzungen des Anwenders, von
den installierten Plug-Ins und von vorhandenen, dem Browser bekannten Fremdprogrammen.
Bei Dateitypen, zu denen der Netscape-Browser ein Plug-In kennt, fragt er den Anwender, falls
dieser das Plug-In nicht hat, ob er das Plug-In haben mchte, und erlaubt das Downloaden des
erforderlichen Plug-Ins. Wenn der Web-Browser die Datei nicht verarbeiten kann, sollte er eine
Fehlermeldung ausgeben und anstelle der Datei ein Symbol fr nicht darstellbare Daten anzeigen.
Mit dem Attribut pluginurl= knnen Sie aber auch einen URI im Internet bestimmen, wo ein
Plug-In zum Anzeigen oder Abspielen der eingebundenen Datei bereitsteht. Es muss sich nach
dem Plug-In-Konzept von Netscape um eine Java-Archivdatei (Dateien *.jar) handeln. Diese
Angabe startet den in Netscape 4.x integrierten JAR-Installationsmanager (JIM). Der Anwender
kann das Plug-In online von der angegebenen Adresse installieren. Netscape fhrt die Installa-

11.4 Multimedia einbinden (Netscape herkmmlich)

363

tion durch und kann anschlieend sofort die eingebundene Multimedia-Datei anzeigen. Das
Attribut pluginurl= ist erst seit Netscape 4.x verfgbar.
Mit pluginspage= knnen Sie einen URI bestimmen, wo Installationshinweise fr ein Plug-In
hinterlegt sind, das die eingebundene Multimedia-Datei anzeigen bzw. abspielen kann. Dies ist
nicht ganz so elegant wie die Technik, die hinter pluginurl= steckt. Aber wenn das Plug-In in
einem anderen Format als dem Java-Archivformat vorliegt, sollten Sie die Angabe pluginspage= whlen, sofern Ihnen eine Internet-Adresse mit einem geeigneten Plug-In bekannt ist.
Es gibt einen phantastischen Wildwuchs an weiteren Attributen fr das embed-Element. Dies
stammt alles aus einer Zeit, wo keinerlei Bewusstsein fr die Notwendigkeit einer Standardisierung von HTML herrschte. Es liegt aber auch am schlecht durchdachten Konzept des embedElements. Um eingebundene Multimedia-Elemente zu steuern, bleibt eigentlich nur der Weg,
dies ber proprietre Attribute zu tun. Eine kleine Auswahl:
Mit hidden="true" knnen Sie die sichtbare Anzeige des eingebundenen Objekts verhindern. Das kann zum Beispiel sinnvoll sein, wenn Sie einen Sound abspielen wollen, aber
keinen Sound-Player anzeigen wollen.
Mit autostart="true" knnen Sie erzwingen, dass eine abspielbare Datei, also etwa ein
Sound oder ein Video, sofort abgespielt werden, ohne dass der Anwender in der AbspielSoftware eine Funktion zum Start der Wiedergabe whlen muss.
Mit loop="true" knnen Sie erzwingen, dass eine abspielbare Datei endlos wiederholt wird.
Mit palette="foreground" knnen Sie erzwingen, dass das Plug-In bei der Anzeige die
Vordergrundfarben des Anwenderrechners benutzt, mit palette="background" erzwingen
Sie, dass das Plug-In die eingestellte Hintergrundfarbe benutzt.
All diese Attribute sind jedoch produktspezifisch und verschwinden genauso schnell wieder, wie
sie entstanden sind.

11.4.2

Multimedia-Bereiche ausrichten

Zum Ausrichten von Multimedia-Bereichen knnen Sie im <embed>-Tag die Attribute align=,
hspace= und vspace= notieren. Die Wirkungsweise ist die gleiche wie im Abschnitt 11.2.1
Objekt zum umgebenden Text ausrichten.

11.4.3

Alternativer Inhalt fr Browser

Sie knnen einen Bereich definieren, der nur von Browsern angezeigt wird, die das <embed>-Tag
nicht kennen. Netscape, der das <embed>-Tag interpretiert, ignoriert einen solchen Bereich. Ein
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

364

Kapitel 11: Multimedia

<h1>Einfach noch mal ne Runde &quot;nibbeln&quot; mit Flash!</h1>

<noembed>
<p>Sie verpassen was!</p>
</noembed>
<embed src="nibbles.swf" quality="high" scale="exactfit"
menu="false" bgcolor="#000080" width="600"
height="400" swLiveConnect="false"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version
=ShockwaveFlash">
</body>
</html>

Mit <noembed>...</noembed> definieren Sie einen Bereich, der von Netscape ab Version 2.0
nicht angezeigt wird, wohl aber von Browsern, die das <embed>-Tag nicht kennen. Diese Browser kennen zwar auch das <noembed>-Tag nicht, aber sie stellen einfach alles dar, was dazwischen
notiert ist. Es kann sich um Text, Grafik, Tabellen usw. handeln.

365

12 Layer (Netscape)

12.1

Layer definieren und positionieren

12.1.1 Allgemeines zu Layern

Layer (Schichten) sind ein Sprachelement von HTML, das Netscape mit der Version 4.0 seines
Browsers einfhrte. Mit Hilfe der beiden HTML-Elemente, die dazugehren, ist es mglich, beliebige Bereiche einer HTML-Datei als exakt positionierte Bereiche auszuzeichnen. So knnen
Sie zum Beispiel eine berschrift, eine Grafik und erklrenden Text dazu als Layer definieren.
Diese definierte Einheit lassen Sie 100 Pixel von links und 50 Pixel von oben gemessen am Anzeigefenster des Browsers beginnen. Fr die gesamte Einheit definieren Sie eine maximale
Breite, zum Beispiel 200 Pixel.
In HTML allein haben die Layer jedoch nicht allzuviel Bedeutung, sieht man einmal von der
Mglichkeit der absoluten Positionierung von Elementen ab. Der eigentliche Zweck der Layer ist
es, die HTML-Grundlage fr Dynamisches HTML nach dem Modell von Netscape zu bilden. Bei
diesem Modell lassen sich Layer-Bereiche mit Hilfe von JavaScript auf vielfltige Weise verndern. So knnen Layer-Bereiche ber den Bildschirm wandern, auf-/zuklappen, anderen Inhalt
annehmen usw.
Sie knnen beliebig viele Layer innerhalb einer HTML-Datei definieren. Layer knnen sich dabei
auch berlappen. Wenn Sie beispielsweise zwei berschriften mit anschlieender Grafik und
erklrendem Text zu je einem Layer zusammenfassen, knnen beide Layer die gleichen Pixelpositionen erhalten. Mit Hilfe von JavaScript knnen Sie dann dynamisch einen der Layer ausschalten und den anderen einschalten. Sie knnen aber auch beide Layer gleichzeitig anzeigen
und bestimmen, welcher ber dem anderen liegen soll.
Layer knnen eigene Hintergrundfarben und sogar eigene Hintergrundbilder (Wallpapers)
haben. Dadurch ergeben sich viele zustzliche Gestaltungsmglichkeiten beim Verteilen von
Farben und Formen am Bildschirm. Wenn Sie eine GIF-Grafik mit transparentem Hintergrund
als eigenen Layer definieren, knnen Sie diese Grafik ber oder unter Texte oder andere Grafiken
legen und dadurch interessante Effekte erzeugen.
Das einzige Problem mit den Layern ist: sie kamen zu spt. Das W3-Konsortium hatte sich bereits darauf eingeschossen, die Mglichkeit des absoluten Positionierens nicht in HTML, sondern in den CSS Stylesheets zu verankern. In den HTML-Sprachstandard 4.0 fanden die hier
vorgestellten Elemente deshalb keinen Einlass. Angesichts der Tatsache, dass die neuen CSSEigenschaften zum Positionieren von Elementen offizieller Standard sind und sowohl von Netscape als auch vom MS Internet Explorer interpretiert werden, ist die Layer-Technik in HTML
ins Abseits geraten. Wegen der starken Verknpfung zwischen Layer-Technik und Dynamischem HTML nach Netscape 4.x werden sie an dieser Stelle jedoch noch beschrieben.

366

Kapitel 12: Layer (Netscape)

Hinweis: Diese HTML-Elemente gehren nicht zum HTML-Standard und funktionieren nur
mit Netscape 4.x, sonst mit keinem Browser auch nicht mehr mit Netscape 6.x.

12.1.2

Layer definieren

Sie knnen innerhalb des Krpers einer HTML-Datei fest positionierte Layer definieren. Solche
Layer haben eine definierte obere linke Ecke im Anzeigefenster. Auerdem knnen Sie eine bestimmte Breite erzwingen. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<layer id="Beispiel_ID" name="Beispielname" top="150" left="250" width="300">
<h1>Irgendwo auf Ihrem Bildschirm ...</h1>
<p>Alles, was Sie hier sehen, ist in einen Layer
integriert. Auch das folgende Bild:</p>
<p><img src="bild.gif" width="68" height="68" border="0"
alt="Was der Mond alles mit ansehen mu&szlig;"></p>
</layer>
</body>
</html>

12.1: Ein Layer lsst sich irgendwo im Bowser-Fenster absolut positionieren.

12.1 Layer definieren und positionieren

367

Mit <layer> leiten Sie die Definition eines Layer-Bereichs innerhalb einer HTML-Datei ein
(layer = Schicht). Mit der Angabe name= knnen Sie einen Namen fr den definierten Bereich
vergeben. Zwischen dem einleitenden <layer>-Tag und dem abschlieenden </layer> knnen
Sie beliebige andere Elemente einer HTML-Datei notieren, also zum Beispiel berschriften,
Textabstze, Tabellen, Grafik- oder Multimedia-Referenzen, Verweise usw. Alle Elemente, die
Sie innerhalb eines Layers definieren, verhalten sich entsprechend den Eigenschaften, die Sie fr
den entsprechenden Layer definieren. Den Layer selbst mssen Sie sich dabei vorstellen wie ein
eigenes Anzeigefenster ohne sichtbare Umrandungen, das in das normale Anzeigefenster des
Web-Browsers eingebettet ist.
Mit dem Attribut left= bestimmen Sie die Anzahl Pixel vom linken Rand des Anzeigefensters,
mit top= die Anzahl Pixel vom oberen Rand des Anzeigefensters (left = links, top = oben). Mit
width= knnen Sie eine Anzeigebreite fr den Layer-Bereich erzwingen, mit height= die Hhe
(width = Breite, height = Hhe). Elemente innerhalb des Layers werden dann so umbrochen, dass
die angegebene Breite eingehalten wird.
Mit id= knnen Sie einen Namen fr den Layer-Bereich vergeben. Unter diesem Namen knnen
Sie den Layer in JavaScript mit Hilfe des Objekts layers ansprechen. Neben id= wird bei Layern
auch die Angabe name= fr diesen Zweck interpretiert.
Beachten Sie: Wenn Sie mit Layern arbeiten und diese absolut im Anzeigebereich positionieren,
wird es in den meisten Fllen sinnvoll sein, innerhalb einer HTML-Datei alle anzuzeigenden
Elemente innerhalb von fest positionierten Layern zu notieren. Denn andernfalls gert Ihnen die
Anzeige leicht auer Kontrolle.
Wenn es der Inhalt erfordert, werden Angaben zur Breite auer Kraft gesetzt. Wenn beispielsweise eine Grafik oder eine Tabelle mehr Platz in Anspruch nimmt als die angegebene Breite,
wird die Grafik bzw. die Tabelle in jedem Fall in voller Breite angezeigt. Dies knnen Sie allerdings verhindern siehe Anzeigebereich von Layern beschneiden in Kapitel 12.1.4
Die Angaben zu linker und oberer Ecke sowie zur Breite sind zwar in den meisten Fllen
erwnscht, jedoch nicht zwingend erforderlich. Wenn Sie keine Angaben dazu machen, beginnt
der Layer einfach oben links, so wie das erste Element im Dateikrper der HTML-Datei.

12.1.3

Inline-Layer definieren

Inline-Layer beginnen relativ zu der Stelle, an der sie innerhalb der HTML-Datei stehen. Solche
Layer erzeugen keinen eigenen Absatz im Flietext. Ansonsten knnen sie aber alle Eigenschaften von Layern haben, also beispielsweise eine eigene Hintergrundfarbe. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>Das ist <ilayer bgcolor="#FFEECC" top="3">Layer-Text</ilayer> mitten im
Text. Das Wort &quot;Layer-Text&quot; ist dabei in einen Inline-Layer
eingebunden. Hintergrundfarbe erhalten. Au&szlig;erdem wurde der Inline-Layer 3
Pixel

368

Kapitel 12: Layer (Netscape)

tiefer dargestellt wird als der normale Text.</p>

</body>
</html>

12.2:

Inline-Layer erscheinen wie Bilder innerhalb des Flietextes an der Stelle, an der sie im
Quelltext notiert sind.

Mit <ilayer> leiten Sie die Definition eines Inline-Layer-Bereichs ein, mit </ilayer> schlieen
Sie sie ab (ilayer = inline layer). Sie knnen auch Attribute wie top= oder left= auf einen
<ilayer>-Bereich anwenden. Die Angaben werden dann jedoch nicht als Werte gemessen vom
Fensterrand interpretiert, sondern als Werte gemessen von der normalen Position des InlineLayers. So knnen Sie beispielsweise mitten in einem Text eine Anweisung notieren wie:
<ilayer top="3">Wort</ilayer>. Dann erscheint dieses eine Wort um genau 3 Pixel tiefer als
der brige Text. Auch die Attribute id= und name= sind bei Inline-Layern erlaubt.

12.1.4

Anzeigebereich von Layern beschneiden

Sie knnen einen Bereich erzwingen, innerhalb dessen der Inhalt eines Layers angezeigt werden
muss. Wenn der Inhalt mehr Platz in Anspruch nimmt (z.B. weil eine Grafik breiter ist), wird er
abgeschnitten. Mit diesem Merkmal knnen Sie den Effekt erzeugen, dass der Inhalt eines Layers
wie durch ein Fenster gesehen erscheint, wobei beim Blick durch das Fenster nur ein Ausschnitt
des Inhalts sichtbar ist. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Halbmond</h1>
<layer top="100" left="150" clip="0,0,68,34">
<img src="bild.gif" width="68" height="68" border="0" alt="Mond">
</layer>
</body>
</html>

12.1 Layer definieren und positionieren

369

12.3: Mit dem Attribut clip beschneiden Sie den Anzeigebereich von Layern.

Mit dem Attribut clip= knnen Sie einen Anzeigebereich erzwingen (clip = Ausschnitt). Als
Wert notieren Sie zwei oder vier Zahlenwerte zum Bestimmen des gewnschten Bereichs. Trennen Sie die Zahlenwerte durch Kommata.
Wenn Sie vier Zahlenwerte angeben, bedeuten die Zahlen die Koordinaten des gewnschten
Rechtecks (in dieser Reihenfolge): clip="Pixel fr links, Pixel fr oben, Pixel fr
rechts, Pixel fr unten", und zwar relativ zur oberen linken Ecke des Layers. Wenn also
im ersten der obigen Beispiele etwa durch left="30" und top="20" eine absolute obere linke
Ecke fr den Layer definiert wird, so bedeutet etwa die erste Angabe bei clip= 20 so viel wie:
Der erzwungene Anzeigebereich beginnt 20 Pixel links vom linken Rand des Layers (der bei 30
Pixeln liegt), absolut gesehen also bei 50 Pixeln.
Wenn Sie zwei Zahlenwerte angeben, bedeuten die Zahlen die Breite und Hhe des gewnschten
Rechtecks (in dieser Reihenfolge): clip="Pixel fr Breite, Pixel fr Hhe", und zwar
beginnend bei der oberen linken Ecke des Layers. Wenn Sie etwa wie im zweiten der obigen
Beispiele mit width= eine bestimmte Breite des Layers erzwingen und sicherstellen wollen, dass
die Breite auch eingehalten wird, wenn der Inhalt des Layers breiter ist, knnen Sie mit
clip="200,[Hhe]" erzwingen, dass die Breite eingehalten wird.

12.1.5

Layer mit Inhalt aus anderer Datei

Es ist mglich, innerhalb eines Layers eine andere HTML-Datei anzuzeigen. Mit dem Attribut
src= knnen Sie eine andere HTML-Datei in einen Layer einbinden. Dabei gelten die Regeln
zum Referenzieren in HTML. Die Datei nimmt dabei den blichen Raum im Anzeigefenster ein,
beginnend bei den angegebenen Positionen zu top= und left=. Angaben zu width= und
height= werden nur eingehalten, wenn der Inhalt der Datei in Breite und Hhe weniger Platz in
Anspruch nimmt. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>SELFHTML im Layer</h1>

370

Kapitel 12: Layer (Netscape)

<layer top="80" left="40" src="../../../index.htm"></layer>

</body>
</html>

12.4: Ein Layer kann den Inhalt einer HTML-Datei anzeigen.

12.1.6

Layer verschachteln

Sie knnen innerhalb von Layer-Bereichen andere Layer definieren. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<layer top="100" left="100" bgcolor="#FF99FF">
<h1>Die Macht</h1>
<layer pagex="80" left="40" bgcolor="#99FFFF">
<h1>kommt aus der Nacht</h1>
</layer>
</layer>
</body>
</html>

12.1 Layer definieren und positionieren

371

12.5: Ein Layer kann weitere Layer enthalten.

Wichtig ist dabei die unterschiedliche Wirkung der Positionsangaben. Im obigen Beispiel erhlt
der innere Layer die gleichen Angaben zu left= und top= wie der uere Layer. Der uere
Layer ist dabei der Bezugspunkt fr die Startposition des inneren Layers, nicht das Anzeigefenster! Der innere Layer beginnt im Beispiel also 100 Pixel von oben und 100 Pixel von links, gemessen an der linken oberen Ecke des ueren Layers.
Es gibt jedoch auch die Mglichkeit, einen inneren Layer absolut zu positionieren. Dazu stehen
die zustzlichen Attribute pagey=100 und pagex=100 (pagex = page x = Seite x-Wert, pagey =
page y = Seite y-Wert). Diese Angaben bewirken, dass als Bezugspunkt das Anzeigefenster und
nicht der bergeordnete Layer verwendet wird.

12.1.7

Hintergrundfarbe fr Layer

Sie knnen fr jeden definierten fest positionierten oder flieenden Layer eine eigene Hintergrundfarbe definieren. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<layer top="0" left="0" width="50" height="40" bgcolor="#000000"></layer>
<layer top="0" left="50" width="50" height="40" bgcolor="#000033"></layer>
<layer top="0" left="100" width="50" height="40" bgcolor="#000066"></layer>
<layer top="0" left="150" width="50" height="40" bgcolor="#000099"></layer>
<layer top="0" left="200" width="50" height="40" bgcolor="#0000CC"></layer>
<layer top="0" left="250" width="50" height="40" bgcolor="#0000FF"></layer>
</body>
</html>

372

Kapitel 12: Layer (Netscape)

Mit dem Attribut bgcolor= im einleitenden Tag von <layer> oder <ilayer> bestimmen Sie
die Hintergrundfarbe (bgcolor = background color = Hintergrundfarbe). Dabei gelten die Regeln
zum Definieren von Farben in HTML.
Beachten Sie: Wenn Sie eine Hintergrundfarbe fr einen Layer definieren, sollten Sie fr Text,
der in den Layern erscheint, eine kontrastierende Schriftfarbe whlen.

12.1.8

Hintergrundbild (Wallpaper) fr Layer

Sie knnen fr jeden definierten fest positionierten oder flieenden Layer ein eigenes Hintergrundmuster (Wallpaper) definieren. Das funktioniert genauso wie bei Hintergrundbildern
(Wallpapers) fr den gesamten Dateikrper. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="back1.jpg">
<layer top="0" left="0" width="400" height="300" background="back2.gif">
<h1>Bunte Zeiten</h1>
</layer>
</body>
</html>

12.6: Ein Layer kann auch ein individuelles Hintergrundbild haben.

Durch die Angabe background= im einleitenden Layer-Tag knnen Sie ein Hintergrundbild fr
den Layer bestimmen (background = Hintergrund). Dabei gelten die Regeln zum Referenzieren in
HTML (Kapitel 3.7).

12.2 Layer anordnen und kontrollieren

373

Beachten Sie: In diesem Buch finden Sie im Abschnitt 24.2 ber typische Grafiksorten fr WebSeiten ein paar typische Hintergrundbilder. Netscape interpretiert auch animierte GIF-Grafiken
als Hintergrundbilder.

12.2
12.2.1

Layer anordnen und kontrollieren

Angaben zur Schichtposition mit Layer-Namen

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich berlappen, werden die Layer normalerweise in der Reihenfolge bereinander angezeigt, in der sie definiert werden. Sie knnen jedoch die Reihenfolge ndern und angeben, welcher andere Layer
unmittelbar ber oder unter dem aktuellen Layer liegen soll. Auf diese Weise knnen Sie das
berdecken von Layern kontrollieren. Voraussetzung ist, dass Sie fr jeden Layer einen Namen
vergeben. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<layer name="erster"
top="0" left="0" width="300" height="200" bgcolor="FFFF99">
<h1>ERSTER</h1>
</layer>
<layer name="zweiter"
top="50" left="100" width="300" height="200" bgcolor="99FF99">
<h1>ZWEITER</h1>
</layer>
<layer name="dritter" above="zweiter"
top="100" left="200" width="300" height="200" bgcolor="9999FF">
<h1>DRITTER</h1>
</layer>
<layer name="vierter" below="erster"
top="150" left="300" width="300" height="200" bgcolor="FF99FF">
<h1>VIERTER</h1>
</layer>
</body>
</html>

374

Kapitel 12: Layer (Netscape)

12.7: Die Reihenfolge der Layer in puncto Sichtbarkeit ist steuerbar.

Mit dem Attribut above= im einleitenden <layer>- oder <ilayer>-Tag knnen Sie bestimmen,
dass ein zuvor definierter, benannter Layer unmittelbar ber dem aktuellen Layer liegt (above =
oberhalb). Das heit, der aktuelle Layer soll bei berschneidung von dem genannten Layer berdeckt werden.
Mit dem Attribut below= im einleitenden <layer>- oder <ilayer>-Tag knnen Sie bestimmen,
dass ein zuvor definierter, benannter Layer unmittelbar unter dem aktuellen Layer liegt (below =
unterhalb). Das heit, der aktuelle Layer soll bei berschneidung den genannten Layer berdecken. Die Layernamen hinter above= und below= sollten in Anfhrungszeichen stehen.
Beachten Sie: Bei above= und below= drfen Sie nur Namen von Layern angeben, die in der
Datei bereits zuvor definiert wurden. Die Angabe von Layern, die erst nach dem aktuellen Layer
definiert werden, kann zu Anzeigefehlern fhren. Im ersten definierten Layer einer HTML-Datei
sollten deshalb keine Angaben zu above= oder below= vorkommen.
Es ist nur je eine Angabe fr above= und below= bei der Definition eines Layers erlaubt. Denn
mit diesen Angaben legen Sie immer nur fest, welcher andere Layer direkt unter oder ber dem
aktuellen Layer.

12.2.2

Angaben zur Schichtposition mit Indexnummern

Wenn Sie mehrere Layer in einer HTML-Datei definieren, deren Anzeigebereiche sich berlappen, werden die Layer normalerweise in der Reihenfolge bereinander angezeigt, in der sie definiert sind. Sie knnen die Reihenfolge ndern, indem Sie fr die einzelnen Layer Nummern
vergeben. Layer mit hherer Nummer berdecken Layer mit niedrigerer Nummer. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

12.2 Layer anordnen und kontrollieren

375

<layer z-index="3"
top="0" left="0" width="300" height="200" bgcolor="FFFF99">
<h1>ERSTER</h1>
</layer>
<layer z-index="1"
top="50" left="100" width="300" height="200" bgcolor="99FF99">
<h1>ZWEITER</h1>
</layer>
<layer z-index="4"
top="100" left="200" width="300" height="200" bgcolor="9999FF">
<h1>DRITTER</h1>
</layer>
<layer z-index="2"
top="150" left="300" width="300" height="200" bgcolor="FF99FF">
<h1>VIERTER</h1>
</layer>
</body>
</html>

Mit dem Attribut z-index= im einleitenden <layer>- oder <ilayer>-Tag bestimmen Sie die
Reihenfolge der Layer bei berlappungen (z-index = Reihenfolge). Geben Sie bei jedem definierten Layer z-index= und dahinter eine Nummer an. Der Layer mit der hchsten Nummer berdeckt alle anderen. Der Layer mit der niedrigsten Nummer wird von allen anderen berdeckt.
Beachten Sie: Bei den Angaben zu z-index= sind auch negative Werte erlaubt. Dadurch bewirken Sie bei Verschachtelungen, dass Layer, die innerhalb eines anderen Layers definiert werden,
von ihren Eltern-Layern berdeckt werden. Bei positiven Zahlen ist dies umgekehrt.

12.2.3

Layer verstecken und anzeigen

Sie knnen bei der Definition von Layern festlegen, ob diese zunchst angezeigt werden sollen
oder nicht. Das ist von Bedeutung, wenn Sie die Anzeige der Layer mit Hilfe von JavaScript
dynamisch ein-/ausschalten wollen. Ein Beispiel:
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!-function hideLayer(nr) {
document.layers[nr].visibility = "hide";
}
function showLayer(nr) {
document.layers[nr].visibility = "show";
}
//-->

376

Kapitel 12: Layer (Netscape)

</script>
</head>
<body>
<layer top="10" left="10" bgcolor="#DDFFDD">
<p><a href="javascript:showLayer(1)"><b>Anderen Layer anzeigen</b></a><br>
(dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>
<layer top="60" left="60" bgcolor="#CCEEFF" visibility="hide">
<p><a href="javascript:hideLayer(1)"><b>Diesen Layer verstecken</b></a><br>
(dazu wird ein einfaches JavaScript eingesetzt)</p>
</layer>
</body>
</html>

12.8: Die Sichtbarkeit von Layern lsst sich per JavaScript manipulieren.

Mit dem Attribut visibility= im einleitenden <layer>- oder <ilayer>-Tag knnen Sie die
Anzeige des Layers explizit erzwingen oder verhindern (visibility = Sichtbarkeit).
Mit visibility="show" legen Sie fest, dass der Layer in jedem Fall angezeigt wird (show =
zeigen).
Mit visibility="hide" legen Sie fest, dass der Layer nicht angezeigt, also versteckt wird
(hide = verstecken).
Mit visibility="inherit" legen Sie fest, dass der Layer nur dann angezeigt wird, wenn
sein Eltern-Element ebenfalls angezeigt wird (inherit = erben). Diese Angabe ist nur bei inneren Layern in verschachtelten Layern von Bedeutung.

377

13 Universalattribute und
weiterfhrende HTML-Elemente

13.1

Allgemeine Universalattribute

Unter allgemeinen Universalattributen werden hier solche Attribute verstanden, die in der
Mehrzahl aller einleitenden HTML-Tags erlaubt sind und dort nicht als individuelle Attribute
behandelt werden. Solche Attribute haben verschiedene Aufgaben. Es gibt beispielsweise Attribute, um einer bestimmten HTML-Auszeichnung einen individuellen Namen zu geben. Andere
Universalattribute enthalten wichtige Angaben zur verwendeten Landessprache. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1 style="color:black" lang="de">Willkommen!</h1>
<h1 style="color:blue" lang="en">Welcome!</h1>
<h1 style="color:red" lang="fr">Bienvenue!</h1>
<h1 style="color:green" lang="it">Benvenuto!</h1>
<h1 style="color:olive" lang="pt">Boa vinda!</h1>
<p title="Der Text steht hier, im Titel!">Und der Text?</p>
</body>
</html>

Universalattribute notieren Sie wie gewhnliche Attribute im einleitenden HTML-Tag. Im Beispiel werden mehrere berschriften notiert. Alle haben ein Attribut style=, das CSS-Formatierungen fr das entsprechende HTML-Element erlaubt. Ferner haben alle berschriften ein
Attribut lang=, das die Sprache des Inhalts bezeichnet. Der Textabsatz unten im Beispiel hat ein
Attribut title=, das fr Meta-Informationen zum Element gedacht ist. Neuere Browser zeigen
solche Informationen in einem kleinen Tooltip-Fenster an, wenn der Anwender mit der Maus
ber den Inhalt des Elements fhrt.

378

Kapitel 13: Universalattribute und weiterfhrende HTML-Elemente

bersicht der Universalattribute

Attribut

Bedeutung

class=

Gibt an, dass das HTML-Element einer bestimmten

Stylesheet-Klasse angehrt. Das Element bernimmt
Formate, die zentral fr diese Klasse definiert wurden.
Einzelheiten dazu im CSS-Kapitel im Abschnitt 15.3.5
Formate fr Klassen definieren.
Gibt die Textrichtung der Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant
beispielsweise bei Sprachen wie Arabisch oder Hebrisch, wo die Textrichtung von rechts nach links geht.
Erlaubt sind die Angaben ltr (links nach rechts) und
rtl (rechts nach links).
Ein dateiweit eindeutiger Bezeichnername fr ein Element wenn Sie Elemente damit auszeichnen, sollten
Sie keinen id-Namen innerhalb einer HTML-Datei
mehr als einmal vergeben. Interessant ist das id-Attribut beispielsweise im Zusammenhang mit neuerem
JavaScript nach DOM-Syntax, wo es die Objektmethode getElementById() gibt. Auch bei CSS Stylesheets
spielt dieses Attribut eine Rolle, nmlich dann, wenn
Sie zentrale Individualformate definieren (Kapitel
15.3.7). Achten Sie beim zugewiesenen Namen auf
Gro-/Kleinschreibung! Fr eine Sprache wie JavaScript sind Namen wie Beispiel und beispiel
unterschiedlich.
Gibt die Landessprache an, die innerhalb des HTMLElements verwendet wird. Interessant bei mehrsprachigen Dateien aber auch fr Suchmaschinen im
Internet. Als Angabe ist ein standardisiertes Sprachenkrzel erlaubt, z.B. de fr deutsch, en fr englisch, fr
fr franzsisch, it fr italienisch oder es fr spanisch.
Einzelheiten dazu und eine vollstndige bersicht
finden Sie im Anhang A.3 Sprachenkrzel.
Erlaubt es, den Inhalt eines Elements individuell mit
CSS Stylesheets bzw. der im Dateikopf angegebenen
Default-Sprache fr Stylesheets zu formatieren. Einzelheiten dazu werden im CSS-Kapitel im Abschnitt
15.4 HTML-Elemente direkt formatieren behandelt.
Erlaubt es, HTML-Elemente mit kommentierendem
Text bzw. Meta-Information auszustatten. Der kommentierende Text sollte vom Browser in einem kleinen
Fenster (Tooltip-Fenster) angezeigt werden, wenn
der Anwender mit der Maus ber den Anzeigebereich
des HTML-Elements fhrt.

dir=

id=

lang=

style=

title=

Beispiel
<h1 class="NeueSeite">

<td dir="rtl">

<div id="Einleitung">

<p lang="it">

<p style="color:red">

<p title="ironisch!">

13.2 Event-Handler fr Scripts

13.2

379

Event-Handler fr Scripts

Event-Handler (Ereignis-Behandler) sind HTML-Attribute, die eine Verknpfung zu einer

Script-Sprache herstellen. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des
Anwenders. Ein Element, das einen Event-Handler enthlt, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler
knnen Sie beispielsweise eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und
reagiert. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!-function Ergebnis() {
document.Formular.Eingabe.value = eval(document.Formular.Eingabe.value);
}
//-->
</script>
</head>
<body>
<form name="Formular">
<p>Geben Sie eine Rechenoperation mit Grundrechenarten ein und klicken Sie dann
auf den Button neben dem Eingabefeld:</p>
<p>
<input type="text" name="Eingabe" size="30">
<input type="button" value=" = " onClick="Ergebnis()">
</p>
</form>
</body>
</html>

13.1: ber Event-Handler verknpfen Sie Seitenelemente wie diesen Button mit einem Script.

380

Kapitel 13: Universalattribute und weiterfhrende HTML-Elemente

Das Beispiel enthlt ein Formular mit einem Eingabefeld und einem Klick-Button. Beim KlickButton ist der Event-Handler onClick= notiert, der beim Anklicken des Buttons die JavaScriptFunktion Ergebnis() aufruft, die im Dateikopf in einem Script-Bereich notiert ist. Diese Funktion holt sich den Inhalt aus dem Eingabefeld, berechnet ihn und schreibt das Ergebnis wieder in
das Eingabefeld.
Beachten Sie: Das obige Beispiel funktioniert auch mit lteren, JavaScript-fhigen Browsern.
Solche Browser interpretieren Event-Handler nur in sehr eingeschrnkter Form, nmlich bei
Formularelementen und einigen wenigen anderen Elementen. Das Konzept der Event-Handler
geht jedoch viel weiter. So kann beispielsweise auch eine Tabellenzelle beim Anklicken ihre Hintergrundfarbe wechseln usw. Solche Dinge funktionieren aber erst mit neueren Browsern (Internet Explorer ab Version 4.x, Netscape ab Version 6.x).

bersicht der universalen Event-Handler

Die folgende Tabelle listet nur solche Event-Handler auf, die im HTML-Standard als weitgehend
universell und fr die meisten HTML-Elemente einsetzbar festgehalten sind. Es gibt noch weitere
Event-Handler, die jedoch nur fr bestimmte Elemente gltig sind. Lesen Sie dazu auch den
Abschnitt im JavaScript-Kapitel 18.10 ber Event-Handler, wo Sie auch Beispiele fr die einzelnen Handler finden.
Attribut

Bedeutung

onclick=

Fr den Fall, dass der Anwender ein Element anklickt.

Fr den Fall, dass der Anwender ein Element doppelt anklickt.
Tritt ein, wenn der Anwender die Maustaste gedrckt hlt.
Tritt ein, wenn der Anwender die Maustaste gedrckt hat und sie nun wieder loslsst.
Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt.
Tritt ein, wenn der Anwender die Maus bewegt, unabhngig davon, ob die Maustaste
gedrckt ist oder nicht.
Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt und dieses dabei
verlsst.
Tritt ein, wenn der Anwender eine Taste drckt und diese gedrckt hlt (siehe JavaScript-Kapitel)
Tritt ein, wenn der Anwender, whrend er ein Element aktiviert hat, eine Taste drckt.
Tritt ein, wenn der Anwender eine Taste gedrckt hat und diese wieder loslsst.

ondblclick=
onmousedown=
onmouseup=
onmouseover=
onmousemove=
onmouseout=
onkeypress=
onkeydown=
onkeyup=

13.3
13.3.1

Weiterfhrende HTML-Elemente
Stylesheet-Bereiche definieren

Um mit Hilfe von Stylesheets zentrale Formate zu definieren, knnen Sie im Kopf einer HTMLDatei einen oder mehrere Stylesheet-Bereiche definieren.

13.3 Weiterfhrende HTML-Elemente

381

Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<style type="text/css" media="screen">
<!-body
{ background-image:url(back.jpg); padding:10px; }
#GrosserText
{ font-size:150px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
#KleinererText
{ font-size:90px; font-family:"Arial Black",Arial,sans-serif; color:#FFFFFF; }
-->
</style>
</head>
<body>
<div id="GrosserText">CSS</div>
<div id="KleinererText">Stylesheets</div>
</body>
</html>

13.2: CSS Stylesheets bieten fast unbegrenzte Mglichkeiten.

Mit <style> leiten Sie innerhalb des HTML-Dateikopfs, also zwischen <head> und </head>,
einen Bereich zum Definieren von Formaten ein (style = Stil), mit </style> beenden Sie den

382

Kapitel 13: Universalattribute und weiterfhrende HTML-Elemente

Abschnitt. Die Formate, die Sie innerhalb des Bereichs nach der Syntax der Stylesheet-Sprache
definieren, gelten dann fr die gesamte Datei.
Innerhalb des einleitenden <style>-Tags mssen Sie mit dem Attribut type= angeben, welche
Stylesheet-Sprache Sie innerhalb des Bereichs zum Definieren der Formate benutzen mchten.
Die Wertzuweisung besteht im Mime-Type der gewnschten Stylesheet-Sprache. Die gngigste
Angabe ist dabei type="text/css". Mit dieser Angabe bestimmen Sie CSS Stylesheets als Sprache fr die Formatdefinitionen. Sie knnen aber auch andere Sprachen benutzen. Falls Sie mehrere Style-Sprachen innerhalb der gleichen HTML-Datei einsetzen mchten, definieren Sie einfach fr jede Sprache einen style-Bereich. Alle Bereiche mssen jedoch im Dateikopf stehen.
Mit dem Attribut media=, das im Gegensatz zu type= kein Pflichtattribut ist, knnen Sie den
Typ des Ausgabemediums bestimmen. Neben der im obigen Beispiel angegebenen Wertzuweisung screen (fr das Medium Bildschirm) gibt es weitere mgliche Angaben siehe hierzu
den Abschnitt 15.2.4 Verschiedene separate Stylesheets fr unterschiedliche Ausgabemedien. Sie
knnen, indem Sie mehrere style-Bereiche definieren, die jeweils unterschiedliche media-Attribute haben, Stylesheets fr verschiedene Ausgabemedien definieren.
Beachten Sie: Es ist empfehlenswert, den Inhalt von Stylesheet-Bereichen in einen Kommentar
(<!-- bis -->) zu setzen, so wie im obigen Beispiel. Dadurch verhindern Sie, dass ltere Browser
die Inhalte irrtmlich als Text anzeigen. Auf die Stylesheet-Angaben wird hier nicht nher eingegangen. Lesen Sie dazu Kapitel 16.

13.4

Script-Bereiche in HTML

13.4.1

Script-Bereich definieren

Sie knnen im Dateikopf, also zwischen <head> und </head>, oder auch innerhalb des Dateikrpers, also zwischen <body> und </body>, einen oder mehrere Script-Bereiche definieren.
Innerhalb von Script-Bereichen knnen Sie Anweisungen der verwendeten Script-Sprache notieren. Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!-function Zeit() {
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if(Jahr < 999) Jahr += 1900;
var Vortag

= ((Tag < 10) ? "0" : "");

var Vormon

= ((Monat < 10) ? ".0" : ".");

var Datum = Vortag + Tag + Vormon + Monat

+ "." + Jahr;

13.4 Script-Bereiche in HTML

383

document.write("<h1>" + Datum + "<\/h1>")

}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-Zeit();
//-->
</script>
<p>Aktuelle Nachrichten ...</p>
</body>
</html>

Mit <script> leiten Sie einen Script-Bereich ein, mit </script> beenden Sie den Bereich. Innerhalb des Bereichs knnen Sie Anweisungen der verwendeten Script-Sprache notieren. Aus
Sicht von HTML wird alles, was innerhalb des Bereichs steht, als nackter Text betrachtet.
Dabei kann es allerdings zu Konflikten zwischen einer Sprache wie JavaScript und einem streng
SGML-konformen HTML-Parser kommen. Ein solcher Parser betrachtet den Script-Bereich als
beendet, sobald er auf die nchste Zeichenfolge </ stt. Wenn Sie innerhalb von JavaScript
diese Zeichenfolge bentigen, wie im obigen Beispiel in der letzten Anweisung, wo mit Hilfe von
document.write eine berschrift erster Ordnung ins Dokument geschrieben wird. Am Ende
des ausgegebenen Textes ist dort <\/h1> notiert statt </h1>. Der Backslash dient in JavaScript
dazu, ein nachfolgendes Zeichen zu maskieren, was im Beispiel an der Stelle aus JavaScript-Sicht
aber keine weitere Bedeutung hat und nichts weiter bewirkt. Der Backslash ist auch nicht fr den
JavaScript-Interpreter gedacht, sondern fr penible HTML-Parser.
Um zu verhindern, dass ltere Browser den Inhalt des Script-Bereichs irrtmlich als Text ausgeben, empfiehlt es sich, den Inhalt in einen Kommentar zu setzen, so wie im obigen Beispiel. In
der letzten Zeile des Script-Bereichs notieren Sie dann am besten einen einzeiligen JavaScriptKommentar, eingeleitet durch //, gefolgt vom schlieenden HTML-Kommentar -->. Der JavaScript-Kommentar ist erforderlich, um Fehlermeldungen in scriptfhigen Browsern zu unterdrcken. Bercksichtigen Sie, dass vor und nach dem HTML-Kommentar ein Zeilenumbruch
zwingend erforderlich ist.
Innerhalb des einleitenden <script>-Tags geben Sie mit dem Pflichtattribut type= an, welche
Script-Sprache Sie innerhalb des Bereichs benutzen mchten. Als Wert weisen Sie den MimeType der Script-Sprache zu. Die gngigste Angabe ist dabei text/javascript fr JavaScript.
Beachten Sie: Das immer noch sehr viel genutzte Attribut language=, mit dem viele Web-Designer im einleitenden <script>-Tag die Script-Sprache angeben (z.B. language="JavaScript"
oder language="JavaScript1.2"), gehrt nicht zum HTML-Standard und erzeugt ungltiges
HTML. Die Browser kennen das language-Attribut zwar und werten es aus, aber fr modernere
Browser reicht auch das Attribut type= zur Erkennung der Sprache aus. Auf die Script-Befehle
wird hier nicht nher eingegangen. Lesen Sie dazu das JavaScript-Kapitel 17 und folgende.

384

Kapitel 13: Universalattribute und weiterfhrende HTML-Elemente

13.4.2

Noscript-Bereich definieren

Sie knnen einen Bereich definieren, der nur angezeigt wird, wenn die verwendete Script-Sprache nicht verfgbar ist, das Script also nicht ausfhrbar ist. Dies ist der Fall, wenn der Browser
die Script-Sprache nicht kennt oder wenn der Anwender das Interpretieren der Script-Sprache in
den Einstellungen seines Browsers ausgeschaltet hat.
Wichtig ist eine solche Angabe beispielsweise, wenn Ihre Seiten intensiv JavaScript benutzen, um
Inhalte anzuzeigen oder Verweise auszufhren. In solchen Fllen ist ein Projekt ohne JavaScript
kaum nutzbar. Mit einem Noscript-Bereich knnen Sie einen entsprechenden Hinweis einbauen.
Ein Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!-function Zeit() {
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if(Jahr < 999) Jahr += 1900;
var Vortag

= ((Tag < 10) ? "0" : "");

var Vormon

= ((Monat < 10) ? ".0" : ".");

var Datum = Vortag + Tag + Vormon + Monat

document.write("<h1>" + Datum + "<\/h1>")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-Zeit();
//-->
</script>
<noscript>
<h1>Guten Tag!</h1>
</noscript>
<p>Aktuelle Nachrichten ...</p>
</body>
</html>

+ "." + Jahr;

13.4 Script-Bereiche in HTML

385

Das Beispiel enthlt genau die gleichen Scripts wie weiter oben bei Script-Bereich definieren beschrieben. Diesmal wurde jedoch zustzlich an Browser gedacht, die kein JavaScript kennen oder
bei denen JavaScript ausgeschaltet ist. Fr solche Browser wird an der Stelle, an der bei scriptfhigen Browsern die scripterzeugte h1-berschrift mit dem aktuellen Datum eingesetzt wird,
einfach eine gewhnliche h1-berschrift mit dem Inhalt Guten Tag! notiert.
Mit <noscript> leiten Sie einen Noscript-Bereich ein, mit </noscript> beenden Sie ihn.
Dazwischen werden Block-Elemente erwartet, also beispielsweise berschriften, Textabstze
oder div-Bereiche.
Web-Browser, die das noscript-Element kennen, zeigen den Inhalt dazwischen nur dann an,
wenn der Anwender die benutzte Script-Sprache, etwa JavaScript, deaktiviert hat. Web-Browser,
die gar keine Script-Sprachen kennen, kennen zwar auch das noscript-Element nicht, aber
einer alten Regel gem ignorieren sie die Auszeichnung einfach und zeigen den Inhalt des
Elements ganz normal an.

13.4.3

Weitere Angaben zum Script

Es gibt in HTML eine Reihe weiterer Optionen fr Script-Bereiche, die als Attribute im einleitenden <script>-Tag notiert werden knnen:
Mit dem Attribut src= knnen Sie ein Script einbinden, das in einer separaten Datei notiert
ist. Das ist von Vorteil, wenn Sie ein Script auf vielen Seiten verwenden wollen. Dann brauchen Sie das Script nur noch zu referenzieren, statt es jedes Mal in der Datei zu notieren. Der
Script-Bereich in der Datei kann in diesem Fall leer bleiben, aber auch noch zustzlich ein
lokales Script enthalten. Ein Beispiel fr das Einbinden externer JavaScript-Dateien und
genauere Hinweise dazu finden Sie im Abschnitt 17.3.3 JavaScript in separaten Dateien.
Wenn Sie mit src= ein externes Script einbinden, knnen Sie zustzlich mit dem Attribut
charset= den Zeichensatz bestimmen, nach dem die externe Quelle behandelt werden soll.
Das ist beispielsweise wichtig, wenn Sie in einem Script deutsche Umlaute und Sonderzeichen
nicht maskieren, z.B. bei HTML-Ausgaben. In diesem Fall knnen Sie charset="ISO-88591" angeben, um dem Browser mitzuteilen, dass er im Zweifelsfall diesen Zeichensatz verwenden soll. Erlaubt sind Zeichensatzangaben, wie sie auf der Web-Adresse http://www.iana.org/
assignments/character-sets angegeben sind.
Ein weiteres Attribut namens defer (Standalone-Attribut) soll verhindern, dass ein Script
dynamisch Text schreibt. Einzelne JavaScript-Anweisungen wie document.write() werden
dadurch unterbunden. Beachten Sie, dass dieses Attribut bislang jedoch nur von neueren
Versionen des MS Internet Explorers interpretiert wird.

387

14 XHTML und HTML

14.1

Unterschiede zwischen XHTML und HTML

14.1.1

Allgemeines zu XHTML

Das Konzept der Auszeichnungssprachen, von denen HTML nur eine unter vielen, allerdings die
bislang weltweit erfolgreichste und bekannteste ist, ist schon lter. Ein Merkmal des Konzepts
solcher Auszeichnungssprachen ist, dass ihre Bestandteile nicht einfach frei erfunden sind,
sondern dass es Meta-Sprachen gibt, mit deren Hilfe die Regeln und Bestandteile solcher Auszeichnungssprachen definiert werden.
Bereits seit 1986 gibt es die als ISO 8879 standardisierte Meta-Sprache SGML (Standard Generalized Markup Language = standardisierte verallgemeinerte Auszeichnungssprache). Diese MetaSprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTDs
(Document Type Definitions = Dokumenttyp-Definitionen). In den DTDs wird festgelegt, welche
Elemente eine Auszeichnungssprache hat, welche zugehrigen Attribute, sowie Regeln, welche
Elemente innerhalb welcher anderen Elemente vorkommen knnen usw. Nun ist SGML sehr
ausgereift, gilt aber gemeinhin als ziemlich sophisticated. So entschloss man sich dazu, eine
reduziertere Variante von SGML zu etablieren, und zwar unter dem Namen XML (Extensible
Markup Language = erweiterbare Auszeichnungssprache). XML erlaubt ebenso wie SGML das Definieren von Auszeichnungssprachen mit Hilfe von DTDs.
HTML, das Anfang der 90er Jahre entstand, wurde mit Hilfe von SGML definiert. Bis einschlielich HTML 4.x ist das auch heute noch der Fall. Im Zuge von XML und seiner wachsenden
Bedeutung fr immer mehr Dateiformate, die auch im Web ihren Einsatz finden, entstand der
Wunsch, auch HTML mit Hilfe von XML zu definieren anstatt wie bisher mit SGML. Damit
kein Versionenwirrwarr entsteht, entschloss man sich dazu, dieses neue, XML-basierte HTML
mit einem neuen Namen und eigener Versionenkontrolle auszustatten. Heraus kam dabei
XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache).
Seit Januar 2000 liegt XHTML 1.0 als Empfehlung des W3-Konsortiums vor und hat damit den
gleichen verbindlichen Stellenwert wie etwa HTML 4.0. XHTML 1.0 ist nichts anderes als der
Versuch, das SGML-basierte HTML 4.0 mit Hilfe von XML nachzubauen. Dahinter steckt
keine Spielerei von Designern knstlicher Sprachen, sondern es gibt gute Grnde dafr:
XHTML ist syntaktisch 100%ig kompatibel zu wichtigen XML-Standardsprachen wie SVG,
WML, SMIL usw.
XHTML kann dadurch als Dateninsel innerhalb anderer Sprachen eingebunden werden, und
ebenso ist es mglich, diese anderen Sprachen wieder als Dateninsel innerhalb von XHTML
einzubinden. So ist es beispielsweise problemlos mglich, eine SVG-Grafik als Dateninsel in

388

Kapitel 14: XHTML und HTML

eine XHTML-Datei einzubetten. Die SVG-Grafik muss dadurch nicht mehr referenziert werden, sondern ist Bestandteil der XHTML-Datei.
Durch die gemeinsame syntaktische Grundlage auf der Basis von XML ist es auch mglich,
Script-Sprachen zu vereinheitlichen. Genau das geschieht beim DOM (Document Object
Model = Dokument-Objektmodell). Das DOM definiert Objekte, Eigenschaften und Methoden
fr den Zugriff auf Elemente XML-basierter Sprachen. Mglich ist eine solche Anwendung
aber nur, weil alle diese Sprachen denselben, XML-bedingten syntaktischen Grundmustern
folgen. Da die syntaktischen Grundmuster von HTML sehr hnlich sind wie die von XHTML,
ist das DOM in der Praxis auch auf HTML anwendbar. Doch der Wunsch ist verstndlich, ein
HTML zu haben, das sich exakt an die Syntax von XML hlt.
Was fr Script-Sprachen gilt, gilt ebenso auch fr Stylesheet-Sprachen. Die selbst XMLbasierte allgemeine Stylesheet-Sprache XSL (Extensible Stylesheet Language = erweiterbare
Formatsprache) ist genau fr diese Zwecke entworfen worden. Sie stellt eine einheitliche
Grundlage fr alle XML-basierten Sprachen zur Verfgung.
XHTML ist also XML-gerechtes HTML. Der Nachbau von HTML 4.0 in XHTML 1.0 ist so
weit gelungen, dass es in XHTML die gleichen Elemente, Attribute und Verschachtelungsregeln
gibt wie in HTML. Systembedingt durch die Syntax von XML gibt es jedoch diverse Unterschiede im Detail, die Sie kennen mssen, wenn Sie Ihre Web-Seiten in XHTML statt in HTML
schreiben wollen.
Was die Browser-Kompatibilitt betrifft, gibt es keine greren Probleme. Browser, die mit
HTML 4.0 zurechtkommen, verarbeiten auch Dokumente, die in XHTML geschrieben sind, und
zeigen sie genauso am Bildschirm an wie HTML. Einzelne Probleme, besonders mit lteren
Browsern, sind dagegen nicht auszuschlieen.

14.1.2

Unterschied: Mime-Typen

Der Mime-Type fr gewhnliche HTML-Dokumente lautet stets text/html. XHTML-Dokumente knnen diesen Mime-Type ebenfalls haben. Gleichzeitig sind fr XHTML-Dokumente
jedoch auch die Mime-Typen text/xml oder application/xml erlaubt. Das W3-Konsortium
ist darber hinaus dabei, den Mime-Type application/xhtml+xml fr XHTML zu etablieren.
Fr das Erstellen von XHTML-Dateien ist dies ohne Bedeutung. Wohl aber fr die Kommunikation zwischen Web-Browser und Web-Server. Falls der Web-Server dem Web-Browser in
einer HTTP-Umgebung die angeforderte XHTML-Datei als Datei des Typs text/xml oder
application/xml anbietet, muss der Browser diesen Mime-Type akzeptieren und sich in der
Lage fhlen, Dateien dieses Typs am Bildschirm anzuzeigen. Andernfalls kann es beispielsweise
passieren, dass der Browser dem Anwender die Datei zum Download anbietet, statt sie ins Anzeigefenster zu laden.

14.1.3

Unterschied: Dateinamen

Neuere, XML-fhige Browser (Internet Explorer ab Version 5.x, Netscape ab Version 6.x)
behandeln Dateien je nach Systemkonfiguration abhngig von der Dateinamenerweiterung unterschiedlich, wenn sie sonst keine Hinweise (Mime-Type) darauf haben, wie die Datei zu
behandeln ist. Wenn Sie in einer Datei zwar alle Regeln von XHTML einhalten, die Datei aber

14.1 Unterschiede zwischen XHTML und HTML

389

mit den typischen Endungen .htm oder .html abspeichern, benutzen diese Browser ihre HTMLParser. Speichern Sie die Datei dagegen mit einer anderen Endung ab, z.B. .xhtml, dann benutzen
die Browser unter Umstnden ihre XML-Parser. Der Unterschied macht sich vor allem dann
bemerkbar, wenn das Dokument syntaktische Fehler enthlt. Die heute blichen HTML-Parser
der Browser lassen syntaktische Fehler im Dokument einfach durchgehen und versuchen das
Dokument irgendwie anzuzeigen. XML-Parser brechen dagegen mit einer Fehlermeldung ab,
sobald sie auf einen syntaktischen Fehler stoen. Im Anzeigefenster des Browsers erscheint dann
nur eine Fehlermeldung anstelle des Dokuments.
Bei der Darstellung XML-geparster, fehlerfreier XHTML-Dokumente ohne CSS oder andere
Stylesheets reagieren die Browser unterschiedlich. Netscape 6.x zeigt das Dokument wie ein
HTML-Dokument an, also mit den voreingestellten Darstellungen etwa fr berschriften, Textabstze, Listen, Tabellen usw. Der Internet Explorer stellt solche Dokumente dagegen als reine
Element-Baumstruktur dar. Erst wenn Sie die verwendeten Elemente mit CSS Stylesheets formatieren, zeigt der Internet Explorer das Dokument in nichtschematischer Form an.
Solange Sie also XHTML-konforme Dateien mit den HTML-typischen Endungen .htm oder
.html abspeichern, erreichen Sie eine normale Darstellung im Browser, verhindern aber auch,
dass die Dateien im Browser auf XML-Basis verarbeitet werden. Speichern Sie die Dateien dagegen unter einer anderen, dem Browser unbekannten oder mit dem Mime-Type text/xml verknpften Dateiendung ab, dann werden die Dateien zwar auf XML-Basis verarbeitet, doch dann
drfen die Dateien tatschlich keine syntaktischen Fehler enthalten, und wenn im Anzeigefenster
des Internet Explorers etwas anderes als ein Strukturbaum erscheinen soll, mssen Sie Stylesheets verwenden, um die Elemente zu formatieren.

14.1.4

Unterschied: Die XML-Deklaration

Das Allererste, was am Anfang einer XHTML-Datei notiert werden sollte, ist eine so genannte
XML-Deklaration. Damit geben Sie an, dass die folgende Datei XML-gerechte Daten enthlt.
Eine solche Deklaration gibt es in HTML 4.0 nicht, ist also XHTML-spezifisch.
Beispiel fr XHTML 1.0:
<?xml version="1.0" encoding="UTF-8"?>

Notieren Sie diese Angabe so, wie in dem Beispiel gezeigt, in der ersten Zeile einer XHTMLDatei, inklusive der Fragezeichen und Gro-/Kleinschreibung. Derzeit ist beim Attribut version=
nur der Wert 1.0 sinnvoll. Beim Attribut encoding= knnen Sie die Zeichenkodierung angeben,
nach der die Daten der Datei zu interpretieren sind.
encoding="UTF-8" bedeutet die internationale Zeichenkodierung auf Basis der ISO/IEC10646-Norm (Unicode), wobei ein Zeichen in der Datei eine variable Breite belegen kann,
z.B. ein Byte, aber auch zwei, drei oder vier Bytes.
encoding="UTF-16" bedeutet ebenfalls die internationale Zeichenkodierung auf Basis der
ISO/IEC-10646-Norm (Unicode), wobei ein Zeichen in der Datei je nach Unicode-Position
entweder zwei oder vier Bytes belegt.

390

Kapitel 14: XHTML und HTML

14.1.5

Unterschied: Dokumenttyp-Angaben

XHTML 1.0 und HTML 4.0 (siehe Kapitel 3.2.3) haben unterschiedliche Dokumenttyp-Angaben. Die Dokumenttyp-Angabe nimmt Bezug auf die DTD und Sprachversion, die Sie in der
Datei verwenden und an die Sie sich halten wollen. Ein strenger Parser kann die Anzeige der
Datei z.B. im Browser verhindern, wenn die Datei syntaktische Fehler ennthlt. Mageblich
dafr, was ein syntaktischer Fehler ist, ist die DTD, auf die Sie mit der Dokumenttyp-Angabe
Bezug nehmen.
Beispiel fr HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Entsprechendes Beispiel fr XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Die Beispiele zeigen, wie Dokumenttypen fr HTML 4.01 und XHTML 1.0 fr die HTML-Variante Strict notiert werden. Auch in XHTML 1.0 gibt es die drei Varianten Strict, Transitional und Frameset, genau wie in HTML 4.0. Die beiden anderen Varianten fr XHTML
lauten:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

und
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Beachten Sie: So wie oben notiert, kann ein strenger XML-Parser eine bestehende Internet-Verbindung erfordern und sich die DTD von der angegebenen Web-Adresse laden, um das Dokument gegen die darin formulierten Regeln zu prfen. Sie knnen die DTDs in Ihr eigenes WebProjekt integrieren. Angenommen, Sie haben eine Startdatei namens index.htm und die xhtml1strict.dtd in einem eigenen Unterverzeichnis namens html-dtd abgelegt, dann knnen Sie in der
index.htm notieren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html-dtd/xhtml1strict.dtd">

Sie finden die erforderlichen DTDs fr XHTML auf der Buch-CD in der HTML-Version dieses
Buches zum Download. Die Zip-Datei (31 KByte) enthlt die DTDs fr alle drei Varianten
Strict, Transitional und Frameset sowei drei zustzliche Dateien mit Definitionen fr
benannte Zeichen.

14.1 Unterschiede zwischen XHTML und HTML

14.1.6

391

Unterschied: HTML-Wurzelelement mit

Namensraumangabe

Das einleitende <html>-Tag hat in HTML normalerweise keine Attribute. In XHTML sollten Sie
jedoch den Namensraum fr XHTML explizit angeben.
Beispiel fr HTML 4.01:
<html>
<!-- Inhalt der Datei -->
</html>

Entsprechendes Beispiel fr XHTML 1.0:

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Inhalt der Datei -->
</html>

Notieren Sie in XHTML im einleitenden <html>-Tag immer das Attribut xmlns=, das einen
XML-Namensraum bezeichnet, und weisen Sie ihm den Wert http://www.w3.org/
1999/xhtml zu. Dies ist ein spezieller URI, der nicht dazu gedacht ist, eine aufrufbare WebAdresse anzugeben, sondern lediglich das Schema der Web-Adressierung nutzt, um einen
weltweit eindeutigen Namen fr den Namensraum zu vergeben. Die Web-Adresse exisistiert
zwar, weil das W3-Konsortium so freundlich war, damit die Hufung unntiger Aufruffehler auf
ihrem Server zu vermeiden doch die Adresse bedeutet nichts anderes, als wenn man als Name
festgelegt htte: Superduper-XHTML-Spezifikation.

14.1.7

Unterschied: Strengeres Einhalten des HTML-Grundgersts

Wenn Sie in HTML die Elemente html, head und body weglassen, jedoch das Element title
und ansonsten gltiges HTML notieren, dann ist es aus Sicht von HTML ein fehlerfreies Dokument. In XHTML besteht diese Freiheit nicht. Hier muss eine HTML-Datei zwingend die Form
des bliche Grundgersts einhalten und ein head- und ein body-Element enthalten.
Ein Beispiel fr HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Titel</title>
<h1>Text</h1>

Entsprechendes Beispiel fr XHTML 1.0:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text</title>
<!-- gegebenenfalls andere Elemente im Kopfbereich -->
</head>
<body>

392

Kapitel 14: XHTML und HTML

<h1>Text</h1>
</body>
</html>

Zwar ist die gezeigte Form, ein HTML-4.0-Dokument zu notieren, fr die Praxis alles andere als
empfehlenswert, aber zumindest ist sie nicht verkehrt. Bei einem XHTML-Dokument muss
dagegen immer das vollstndige Grundgerst notiert werden.

14.1.8

Unterschied: Kleinschreibung

In HTML 4.0 ist es egal, ob Sie <TABLE BORDER="0">, <TABLE border="0"> oder <Table Border="0"> notieren. HTML unterscheidet bei Namen von HTML-Elementen und Attributnamen
nicht zwischen Gro- und Kleinschreibung. Nur bei der Wertzuweisung an manche Attribute
wird Gro-/Kleinschreibung unterschieden aber auch nur im Hinblick etwa auf Script-Sprachen. Bei Attributen mit festen erlaubten Werten, wie etwa align=, ist es egal, ob Sie CENTER
oder center notieren. Nicht so bei XHTML. XML unterscheidet nmlich strikt zwischen Ground Kleinschreibung. Das bedeutet, <TABLE> ist etwas anderes als <table>. Fr XHTML wurde
festgelegt, dass alle Elementnamen und Attributnamen klein geschrieben werden. Das Gleiche
gilt auch fr die festen Wertzuweisungen wie center.
Ein Beispiel fr HTML 4.01:
<OBJECT DATA="Video.mpg" TYPE="video/mpeg" ALIGN="LEFT">
</OBJECT>

Entsprechendes Beispiel fr XHTML 1.0:

<object data="Video.mpg" type="video/mpeg" align="left">
</object>

Schreiben Sie in XHTML immer alle Elementnamen wie object oder Attributnamen wie data
oder type klein. Schreiben Sie Wertzuweisungen im Zweifelsfall ebenfalls immer klein, also
beispielsweise bei align="left". Nur dort, wo in einer Wertzuweisung die Groschreibung von
bestimmten Buchstaben erforderlich ist, wie im Beispiel beim Dateinamen Video.mpg, knnen
Sie den Wert so schreiben, wie es erforderlich ist.

14.1.9

Unterschied: Leere Elemente

In HTML 4.0 gibt es diverse leere Elemente. Das sind Elemente ohne Inhalt. Das Abschluss-Tag
ist deshalb verboten, weil die Elemente als inhaltsleer definiert sind. Beispiele: <img>, <br>,
<input>, <hr>. In XML-basierten Sprachen, also auch in XHTML, mssen solche leeren Elemente gesondert gekennzeichnet werden.
Beispiel fr HTML 4.01:
<p>Text mit<br>Zeilenumbruch</p>
<p><img src="bild.gif" alt="ein Bild"></p>

14.1 Unterschiede zwischen XHTML und HTML

393

Entsprechendes Beispiel fr XHTML 1.0:

<p>Text mit<br />Zeilenumbruch</p>
<p><img src="bild.gif" alt="ein Bild" /></p>

Notieren Sie unmittelbar vor der schlieenden spitzen Klammer des allein stehenden Tags einen
Schrgstrich, sodass am Ende die Zeichenfolge /> steht. Vor dem Schrgstrich sollte ein Leerzeichen stehen. Alternativ dazu knnen Sie auch ein Element mit Anfangs- und End-Tag notieren,
z.B. <br></br>. Dabei darf jedoch nichts, auch kein Leerzeichen und kein Zeilenumbruch, zwischen dem Anfangs- und dem End-Tag stehen, sonst ist es ungltiges XHTML.
Wenn Sie Elemente, die Inhalt haben knnen, ohne Inhalt verwenden, z.B. <p></p>, dann notieren Sie sie in XHTML jedoch stets in dieser Form, und niemals in der Form <p />.

14.1.10 Unterschied: Elemente mit optionalem Abschluss-Tag

In HTML 4.0 gibt es diverse Elemente mit optionalem Abschluss-Tag. Beispiele: <body>, <td>,
<dd>, <dt>, <option>. Notieren Sie solche Elemente in XHTML immer mit Anfangs- und
Abschluss-Tag.
Ein Beispiel fr HTML 4.01:
<select name="Auswahl" size="1">
<option>1. Eintrag
<option>2. Eintrag
<option>3. Eintrag
</select>

Entsprechendes Beispiel fr XHTML 1.0:

<select name="Auswahl" size="1">
<option>1. Eintrag</option>
<option>2. Eintrag</option>
<option>3. Eintrag</option>
</select>

14.1.11 Unterschied: Allein stehende (leere) Attribute

In HTML 4.0 gibt es diverse Attribute, die keine Wertzuweisung erhalten. Beispiele: <hr noshade>, <td nowrap>, <script defer>. In XML-basierten Sprachen dagegen muss allen Attributen explizit ein Wert zugewiesen werden. Als Regel hat man sich darauf verstndigt, als Wert
einfach den Attributnamen zuzuordnen. Bei den meisten bekannten Browsern gibt es damit
keine Probleme.
Ein Beispiel fr HTML 4.01:
<td nowrap>Inhalt</td>
<p>Text mit<hr noshade>Trennlinie</p>

394

Kapitel 14: XHTML und HTML

Entsprechendes Beispiel fr XHTML 1.0:

<td nowrap="nowrap">Inhalt</td>
<p>Text mit<hr noshade="noshade" />Trennlinie</p>

14.1.12 Unterschied: Leerraum in Wertzuweisungen

Bei Wertzuweisungen an Attribute mssen Sie in XHTML besser aufpassen als in HTML. Leerzeichen sind erlaubt wo erforderlich, doch Zeilenumbrche sollten Sie unbedingt vermeiden.
Ein Beispiel fr korrektes XHTML 1.0:
<p title="Anfang der Geschichte">Text Text Text</p>

Beispiel fr problematisches XHTML 1.0:

<p title="Anfang
der
Geschichte">Text Text Text</p>

14.1.13 Unterschied: Verweise zu Ankern

In HTML knnen Sie Verweise zu Ankern notieren, z.B.: <a href="#Anker">Verweis</a>. Der
entsprechende Anker ist dann notiert mit: <a name="Anker">irgendwas</a>. Auch andere
Attribute, wie etwa das usemap-Attribut im <img>-Tag zum Verweis auf ein map-Element, bei
dem wiederum ein entsprechendes name-Attribut notiert ist, verwenden diese Technik.
In XHTML funktionieren solche Verweise nicht. XML bentigt Namen vom Typ ID, also
dokumentweit eindeutige Bezeichner, um solche Beziehungen auflsen zu knnen. In XHTML
knnen Sie das Universalattribut id= verwenden, um solche Verweise zu realisieren. Damit aber
auch nicht XHTML-fhige Browser damit zurechtkommen, sollten Sie beide Attribute notieren.
Ein Beispiel fr HTML 4.01:
<a href="#Anker">Verweis</a>
<p>viel Inhalt</p>
<a name="Anker">irgendwas</a>

Entsprechendes Beispiel fr XHTML 1.0:

<a href="#Anker">Verweis</a>
<p>viel Inhalt</p>
<a id="Anker" name="Anker">irgendwas</a>

Notieren Sie in dem a-Element fr den Anker beide Attribute id= und name=. Weisen Sie beiden
Attributen exakt den gleichen Namen zu. Das gibt keine Probleme, da beide Attribute unterschiedliche Namensrume haben. Ein Browser, der den Verweis nach XHTML-Syntax ausfhren will, bentigt das id-Attribut, whrend ein Browser, der den Verweis nach HTML-Syntax
ausfhrt, das name-Attribut zur Ermittlung des Ankers verwendet.

14.1 Unterschiede zwischen XHTML und HTML

395

14.1.14 Unterschied: Das Universalattribut lang=

XML-basierte Sprachen benutzen normalerweise anstelle von lang= das XML-Universalattribut
xml:lang=. Da das lang-Attribut in XHTML jedoch ebenfalls zur Verfgung steht, existieren
also zwei Attribute fr die gleiche Sache. XHTML-Parser bevorzugen im Zweifelsfall das Attribut
xml:lang=, das aber von reinen HTML-Parsern nicht erkannt wird. Notieren Sie deshalb in der
Praxis stets beide Varianten, falls Sie das Attribut verwenden.
Beispiel fr HTML 4.01:
<p lang="de">viel Inhalt</p>

Entsprechendes Beispiel fr XHTML 1.0:

<p xml:lang="de" lang="de">viel Inhalt</p>

14.1.15 Unterschied: Inhalt von Script- und Style-Bereichen

In HTML 4.0 ist der Inhalt der Elemente script und style als CDATA festgelegt, whrend er
in XHTML als PCDATA behandelt wird. Im Klartext bedeutet das, dass bei HTML 4.0 innerhalb eines Script- oder Style-Bereichs HTML-eigene Zeichen wie <, >, & und " nicht maskiert
werden mssen. Nicht so in XHTML. Wenn Sie beispielsweise innerhalb einer Bedingung vergleichen, ob ein Wert kleiner oder grer ist, als ein anderer Wert mssen Sie die spitzen Klammern auerhalb einer Zeichenkette notieren und knnen sie an der Stelle deshalb auch nicht
maskieren. Um das Problem zu lsen, knnen Sie den Script-Bereich selber als CDATABereich erzwingen. Dazu mssen Sie eine entsprechende XML-typische Notation anwenden.
Damit ist das Problem allerdings nur fr XML-Parser gelst. Normale JavaScript-Interpreter
etwa meinen, es bei dieser Syntax mit JavaScript zu tun zu haben, und erzeugen einen Fehler,
weil es sich nicht um gltiges JavaScript handelt. In diesem Fall bleibt nur, das Script in eine
externe Datei auszulagern.
Beispiel fr HTML 4.01:
<script type="text/javascript">
<!-/* JavaScript-Kommentar: jetzt folgt ein kleines Script */
if(parseInt(navigator.appVersion) < 4)
alert("Oh, ein sehr alter Browser");
/* und damit ist das Script auch schon zu ende */
//-->
</script>

Entsprechendes Beispiel fr XHTML 1.0:

<script type="text/javascript">
<!-<![CDATA[
/* JavaScript-Kommentar: jetzt folgt ein kleines Script */
if(parseInt(navigator.appVersion) < 4)
alert("Oh, ein sehr alter Browser");
/* und damit ist das Script auch schon zu ende */

396

Kapitel 14: XHTML und HTML

]]>
//-->
</script>

Die CDATA-Deklaration beginnt mit <![CDATA[ und endet mit ]]>. Notieren Sie dies bei
XHTML zustzlich innerhalb des HTML-Kommentars, in den Sie Inhalte von Script- und StyleBereiche setzen sollten. Andernfalls wrde ein XML-Parser das <-Zeichen innerhalb des Scripts
als Fehler anmeckern.
Um Fehler bei JavaScript-Interpretern zu vermeiden, bleibt die Mglichkeit, JavaScript in separaten Dateien zu notieren. Auch bei CSS Stylesheets besteht die Mglichkeit, Formate zentral in
separater CSS-Datei zu definieren.

14.1.16 Unterschied: Ausnahmen von Verschachtelungsregeln

In HTML 4.0 sind einige Ausnahmen bei Verschachtelungsregeln fr Elemente definiert. So ist
beispielsweise festgelegt, dass ein a-Element kein anderes a-Element enthalten darf. Mit Hilfe
von SGML ist die Formulierung solcher Ausnahmen mglich. XML bietet dagegen keine Mglichkeit an, solche Ausnahmen zu formulieren. In den XML-basierten DTDs (DokumenttypDefinitionen) von XHTML fehlen solche speziellen Verschachtelungsverbote daher. Da aber eine
mglichst 100%ige Kompatibilitt zwischen HTML und XHTML erreicht werden sollte, blieb
dem W3-Konsortium nur der Ausweg, diese Verschachtelungsverbote verbal als normativen
Anhang zu den DTDs von XHTML zu erklren.
Folgende Verschachtelungsregeln sind betroffen:
a-Elemente drfen keine weiteren a-Elemente enthalten.
pre-Elemente drfen keine Elemente img, object, big, small, sub oder sup enthalten.
button-Elemente drfen keine Elemente input, select, textarea, label, button, form,
fieldset, iframe oder isindex enthalten.
label-Elemente drfen keine weiteren label-Elemente enthalten.
form-Elemente drfen keine weiteren form-Elemente enthalten.

14.1.17

Beispiel eines XHTML-gerechten Dokuments

Das folgende Beispiel zeigt ein vollstndiges XHTML-Dokument, in dem Sie die Unterschiede zu
HTML noch einmal im Zusammenhang sehen knnen. Sie knnen das zugehrige Anzeigebeispiel einmal als Datei mit der Endung .htm, einmal als Datei mit der Endung .xhtml und einmal
als Datei mit der Endung .xml aufrufen, um selber zu testen, was in Ihrem Browser dann passiert.
Es handelt sich um exakt den gleichen Inhalt, nur die Dateinamen sind unterschiedlich. Das
Beispiel:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wenn HTML zu XHTML wird</title>

14.1 Unterschiede zwischen XHTML und HTML

</head>
<body>
<h1><a name="Start" id="Start">Wenn HTML zu XHTML wird</a></h1>
<p>Dann m&uuml;ssen alle Elemente mit Inhalt ein End-Tag haben.</p>
<p>Leere Elemente<br />
m&uuml;ssen einen Schr&auml;gstrich am Ende haben.</p>
<hr noshade="noshade" />
<p>Leere Attribute erhalten ihren eigenen Namen als Wert zugewiesen.</p>
<p><a href="#Start">Verweise zu Ankern</a> springen zum Zielelement
aufgrund des id-Attributs, nicht das name-Attributs.</p>
<script type="text/javascript" src="zeitstempel.js"></script>
<!-- so ist das mit den Scripts am sichersten -->
</body>
</html>

14.1: Die Beispieldatei mit der Erweiterung .htm im Internet Explorer 6.0.

397

398

Kapitel 14: XHTML und HTML

14.2: Dieselbe Datei, nur diesmal mit der Erweiterung .xhtml.

Das Beispiel zeigt ein vollstndiges XHTML-Dokument mit verschiedenen typischen Eigenheiten. Die DTD mit dem Namen xhtml1-strict.dtd liegt im gleichen Verzeichnis wie das
Dokument selber, daher ist bei der Dokumenttyp-Angabe nur xhtml1-strict.dtd als URI
notiert ohne weitere Web-Adresse oder Pfadangabe.

14.2

Modularisierung von XHTML und XHTML 1.1

14.2.1

Allgemeines zur Modularisierung von XHTML

HTML 4.0 und XHTML 1.0 sind auch wenn sie von unwissenden Schwtzern gerne wegen
ihrer Schlichtheit belchelt werden eigentlich sehr umfangreiche Sprachen mit einem nicht
ganz einfachen Regelwerk aus ber 80 Elementen, ihren mglichen Attributen, Verschachte-

14.2 Modularisierung von XHTML und XHTML 1.1

399

lungsregeln und einer ganzen Reihe benannter Zeichen. Beide Sprachen bieten damit ein
brauchbares Arsenal fr Hypertext-Dokumente an. Egal ob einfache Portrt-Homepages oder
wissenschaftliche Abhandlungen der Strukturvorrat von HTML/XHTML ist durchaus reichhaltig und fr die meisten Zwecke ausreichend. Allerdings nicht fr alle Zwecke.
Der Umfang beider Sprachen und ihre nicht ganz trivialen Regeln stellen andererseits hohe
Anforderungen an die auslesende Software und deren Darstellungsfhigkeiten. Von einem modernen Web-Browser, der auf einem modernen PC luft, kann man diese Fhigkeiten verlangen.
Aber von Software, die beispielsweise in einem Handy, einem Pocket-Computer oder einem
simplen Sprachwiedergabegert luft, kann man nicht unbedingt die gleichen Fhigkeiten
erwarten.
HTML/XHTML decken also einerseits trotz ihres betrchtlichen Sprachumfangs nicht alle denkbaren Wnsche ab, und andererseits sind sie fr manche Zwecke schlichtweg berdimensioniert.
Aus diesem Grund gehen die berlegungen des W3-Konsortiums in die Richtung, zumindest bei
XHTML zu ermglichen, dass sowohl abgespecktere als auch erweiterte Sprachvarianten davon
mglich sind. Handy-Software knnte dann beispielsweise eine abgespecktere Sprachvariante
interpretieren, whrend ein Mathematiker, der seine Arbeit publizieren mchte, XHTML um
Elemente aus einer speziellen Auszeichnungssprache fr mathematische Formeln erweitern
kann.
Das Konzept zum Abspecken und Erweitern von XHTML wird als Modularisierung bezeichnet.
Dass es nur bei XHTML und nicht bei HTML angewendet werden soll, liegt daran, dass fr die
Modularisierung XML-typische Techniken angewendet werden sollen. Die Modularisierung
stellt nmlich bestimmte formale Regeln zur Verfgung, die abgespeckte oder erweiterte Varianten von XHTML einhalten mssen.
Das W3-Konsortium bietet Beschreibungen an, wie Sie zum Erstellen regelkonformer eigener
Module vorgehen mssen. ber die W3-Einstiegsseite zu HTML/XHTML (www.w3.org/
MarkUp/) knnen Sie entsprechende aktuelle Beschreibungen aufrufen. Um die Beschreibungen
zu verstehen, bentigen Sie allerdings gute Kenntnisse im Erstellen eigener DTDs.
Neben der Mglichkeit, XHTML fr eigene Zwecke zu modularisieren, macht das W3-Konsortium aber auch selber von dieser Mglichkeit Gebrauch. Dazu hat man zunchst die normativen
Grundlagen zur Modularisierung geschaffen. Das entsprechende Dokument mit dem Titel
Modularization of XHTML (www.w3.org/TR/xhtml-modularization) liegt als Empfehlung
(Recommendation) des W3-Konsortiums vor. Ausgehend davon hat man XHTML 1.1 als modulbasiertes Sprachensystem entworfen. Auch XHTML 1.1 liegt als Empfehlung des W3-Konsortiums vor, unter dem Titel XHTML 1.1 Module-based XHTML (www.w3.org/TR/xhtml11).
XHTML 1.1 trennt sich endgltig von den in XHTML 1.0 und HTML 4.0 als deprecated (missbilligt) eingestuften Elementen und Attributen. Es entspricht nur noch der Sprachvariante
Strict. Damit fallen zugleich auch die Frames wieder aus dem Konzept.
Inwieweit sich das Konzept der Modularisierung durchsetzen wird, bleibt abzuwarten. Denn wer
sich mit dem Design eigener Auszeichnungssprachen befasst, kann schlielich auch direkt die
Mglichkeiten von XML nutzen, um entsprechende Sprachen zu entwerfen. Und einfacher als
XML ist das Konzept der Modularisierung sicher nicht im Gegenteil: Es setzt im Grunde die
Beherrschung von XML voraus und reizt dessen Mglichkeiten aus.

400

Kapitel 14: XHTML und HTML

14.2.2

Die Module von XHTML 1.1

Die folgende Tabelle listet die Module auf, aus denen XHTML 1.1 besteht. Auf die Praxis als
XHTML-Anwender hat diese Modularisierung keinen Einfluss. Sie knnen Ihre XHTMLDokumente schreiben wie gewohnt mit der Einschrnkung, dass Sie nichts mehr verwenden
drfen, was noch aus den HTML-Varianten Transitional und Frameset stammt.
Name des Moduls

Elemente

Erluterung

Structure

body head html title

Text

abbr acronym address

Modul fr die Elemente, die das Grundgerst eines XHTML-Dokuments bilden.

Modul fr alle Block- und Inline-Elemente, die Text enthalten knnen und
logische Auszeichnungen darstellen, also
keinen Hinweis auf ihre visuelle Darstellung enthalten.
Modul fr Anker und Verweise innerhalb
des Dokuments.
Modul fr nummerierte Listen, Aufzhlungslisten und Definitionslisten
(Glossarlisten).
Modul fr Multimedia-Referenzen.
Modul fr Elemente, die Text enthalten
knnen und physische Auszeichnungen
darstellen, also einen Hinweis auf ihre
visuelle Darstellung enthalten.
Modul fr nderungsmarkierungen im
Text.
Modul fr mehrsprachige Dokumente,
die Text in Sprachen mit unterschiedlicher Schreibrichtung enthalten.
Modul fr Formulare und Formularelemente.

blockquote br cite code dfn

div em h1 h2 h3 h4 h5 h6 kbd
p pre q samp span strong var

Hypertext

List

dl dt dd ol ul li

Object
Presentation

object param

Edit

del ins

Bidirectional Text

bdo

Forms

button fieldset form input

b big hr i small sub sup tt

label legend select optgroup

option textarea

Table

caption col colgroup table

tbody td tfoot th thead tr

Image
Client-side Image Map

img

Server-side Image Map

ismap (bei img)

area map

Modul fr Tabellen und Tabellenelemente.

Modul fr Grafikreferenzen.
Modul fr Grafiken mit verweissensitiven
Flchen, vom Browser allein darzustellen.
Modul fr Grafiken mit verweissensitiven
Flchen, vom Browser in Kommunikation mit dem Web-Server darzustellen.

14.2 Modularisierung von XHTML und XHTML 1.1

401

Name des Moduls

Elemente

Erluterung

Intrinsic Events

on* (Event-Handler-Attribute)

Metainformation

meta

Scripting

noscript script

Stylesheet

style (Element)

Style Attribute
Link

style (Attribut)

Base

base

Ruby Annotation

ruby rbc rtc rb rt rp

Modul fr alle Event-Handler, die als

Attribut in Elementen notiert werden
knnen und eine Schnittstelle fr ScriptSprachen bilden.
Modul fr Meta-Daten fr Suchmaschinen und Browser.
Modul fr Script-Bereiche und Bereiche
fr Browser, die keine Scripts ausfhren
knnen.
Modul fr Bereiche, in denen zentrale
Stylesheet-Formate definiert werden.
Modul fr das style-Attribut.
Modul fr logische Beziehungen zu anderen Dateien.
Modul fr Adressbasis und Zielfensterbasis.
Modul fr Ruby-Text. Die entsprechenden Elemente sind neu. Ruby-Text ist
eine Textform, die in fernstlichen
Sprachen verwendet wird, um Silbenoder Wortzeichen mit zustzlichen Bedeutungshinweisen zu versehen.

link

403

15 CSS Stylesheets

15.1

CSS Stylesheets und HTML

15.1.1 Sinn und Zweck von CSS Stylesheets

CSS Stylesheets sind eine unmittelbare Ergnzung zu HTML. Es handelt sich dabei um eine
Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit Hilfe von
Stylesheets knnen Sie beispielsweise bestimmen, dass berschriften 1. Ordnung eine Schriftgre von 18 Punkt haben, in der Schriftart Helvetica, aber nicht fett erscheinen, und mit einem
Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben dieser Art
sind mit reinem HTML nicht mglich.
Das ist aber nur der Anfang. Stylesheets bieten noch viel mehr Mglichkeiten. So knnen Sie
HTML-Elemente egal ob Textabstze, Listen, Tabellenzellen oder Formulare mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen
ausstatten. Sie knnen Elemente pixelgenau im Anzeigefenster des WWW-Browsers positionieren. Fr Print-Layouts stehen Mglichkeiten zur Definition von Seitenlayout und Textflusskontrolle bereit. Fr die akustische Wiedergabe von Web-Seiten gibt es ein ganzes Arsenal an Befehlen, um die knstliche Sprachausgabe feinzusteuern. Einige CSS-Eigenschaften sind auch in der
Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das Aussehen des Cursors. Spezielle Filter schlielich, die allerdings rein Microsoft-spezifisch sind, erlauben Grafikeffekte bei
normalen Texten, die aus Grafikprogrammen wie Photoshop bekannt sind.
Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Mglichkeit, zentrale Formate zu definieren. So knnen Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum
Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei
erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit
und macht die HTML-Dateien kleiner. Sie knnen Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien knnen Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise entwerfen Sie fr groe Projekte einheitliche Layouts. Mit ein paar
kleinen nderungen in einer zentralen Stylesheet-Datei knnen Sie dann fr Hunderte von
HTML-Dateien ein anderes Aussehen bewirken.
CSS Stylesheets untersttzen also erstens die professionelle Gestaltung beim Web-Design, und
zweitens helfen sie beim Corporate Design fr groe Projekte oder fr unternehmensspezifische
Layouts.

15.1.2 Stylesheet-Sprachen, -Versionen und -Informationen

Genau wie HTML wird auch CSS vom W3-Konsortium normiert. Es handelt sich also um einen
firmenunabhngigen, offen dokumentierten und frei verwendbaren Standard. Fr CSS gibt es

404

Kapitel 15: CSS Stylesheets

genau wie fr HTML eine Arbeitsgruppe beim W3-Konsortium, die sich um die Weiterentwicklung der Sprache kmmert und sich dabei dem Regelwerk zur Entstehung der so genannten
Recommendations (Empfehlungen) des W3-Konsortiums unterzieht.
Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und
1999 nochmals berarbeitet. 1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an Version 3.0 gearbeitet. In der vorliegenden Dokumentation werden die beiden
ersten Versionen bercksichtigt. Folgende Symbole werden zur Auszeichnung der Sprachversionen verwendet:
Bestandteil der ersten CSS-Version.
Bestandteil der zweiten CSS-Version.
Es gibt mehrere Sprachen zum Definieren von Stylesheets, CSS ist nur eine davon. Aber es ist
diejenige Sprache, die speziell als Ergnzung fr HTML geschaffen wurde und deshalb fr
HTML-basierte Web-Seiten optimiert ist. CSS steht fr Cascading Style Sheets. Andere StyleSprachen sind die Document Style Semantics and Specification Language (DSSSL), die fr
SGML konzipiert wurde und ebenso wie SGML etwas sophisticated ist, und die mittlerweile
bekanntere Extensible Stylesheet Language (XSL), die als Formatierungssprache fr XML entwickelt wurde.
Im Web knnen Sie die bisherige Entwicklung und die Weiterentwicklung von CSS auf den Seiten des W3-Konsortiums verfolgen:
Einstiegsseite zu Stylesheets beim W3-Konsortium (www.w3.org/Style/): ber diese Seite
gelangen Sie zu Informationen ber CSS, XSL und DSSSL sowie ber Softwareprojekte rund
um Style-Untersttzung.
Einstiegsseite zu CSS Stylesheets beim W3-Konsortium (www.w3.org/Style/CSS/): ber diese
Seite gelangen Sie direkt zu aktuellen Nachrichten und Informationen ber CSS.

15.1.3 Stylesheets, Web-Browser und Anwender

Netscape 4.x interpretiert viele Eigenschaften der CSS-Version 1.0 und einen Teil der Eigenschaften der CSS-Version 2.0. Der MS Internet Explorer kennt weite Teile der CSS-Version 1.0
bereits seit seiner Produktversion 3.0 aus dem Jahr 1996. In der Version 4.0 interpretiert er einen
Teil der CSS-Version 2.0 und einige spezielle, von Microsoft eingefhrte Eigenschaften. Auf dem
Niveau der 4er-Generation beider Browser ist die CSS-Implementierung jedoch noch unvollstndig und recht unterschiedlich, und speziell beim 4er-Netscape gibt es zum Teil noch haarstrubende Fehler. Seit der 5er-Version des Internet Explorers und der 6er-Version von Netscape
ist die Situation etwas besser geworden. Der Opera-Browser befindet sich in Sachen CSS sptestens seit seiner 5er-Version ebenfalls auf hohem Niveau. Rundum vollstndige Implementierungen von CSS 2.0 gibt es in den fhrenden Browser-Produkten jedoch noch immer nicht.
Das alles entbindet Sie beim Entwerfen von Styles fr Ihre Web-Seiten deshalb nicht davon, alle
Formate mit verschiedenen Browsern auszutesten. Die CSS-Implementierungen der Browser
sind einfach noch nicht so einheitlich, dass Sie darauf vertrauen knnen, dass alles in jedem
Browser genauso aussieht wie bei dem, mit dem Sie bevorzugt arbeiten. Ferner sollte Ihnen be-

15.1 CSS Stylesheets und HTML

405

wusst sein, dass die optische Wirkung von Web-Seiten auch stark von der eingesetzten Hardware
abhngig ist. Web-Seiten werden nun mal nicht nur auf High-End-PCs mit 19-Zoll-Bildschirmen und 16,7 Millionen Farben gelesen. Sie werden auch mit Sub-Notebooks und HandheldComputern gelesen und mit veralteten PCs angezeigt. Gerade die unterschiedlichen Technologien, die heute im Bereich der Bildschirme auf dem Markt sind, sorgen fr sehr unterschiedliche
Wirkungen etwa von Farben. Was auf dem einen Bildschirm als beige wirkt, sieht auf dem
nchsten aus wie schweinchenrosa. Zwar lassen sich Bildschirme kalibrieren, doch Sie knnen ja
schlecht vom Anwender verlangen, dass er vor dem Betrachten Ihrer Web-Seiten erst mal seinen
Bildschirm neu einstellt. Immerhin besteht ab CSS 2.0 die Mglichkeit, unterschiedliche CSSFormate fr unterschiedliche Ausgabemedien zu definieren. Doch alle Probleme lassen sich damit auch nicht beseitigen.
Bedauerlich ist weiterhin, dass Schriftgrenangaben in CSS am Bildschirm leider nicht zu einheitlichen Ergebnissen fhren. Whrend im Print-Bereich eine 10-Punkt-Schrift immer gleich
gro ist, weil nun mal definiert ist, wie gro ein Punkt ist, werden solche Angaben am Bildschirm in Pixel umgerechnet. Dabei ist aber wiederum nicht festgelegt, wie gro ein Pixel ist.
Und nicht mal die Umrechnungsfaktoren sind die gleichen. So rechnet etwa Windows Schriftgrenangaben anders in Pixel um als etwa grafische Oberflchen unter Linux oder als das
Macintosh-Betriebssystem. Kurzum vieles in CSS steht nur genau in der Datei, aber die Ergebnisse am Bildschirm knnen doch recht unterschiedlich und nicht selten unbefriedigend sein.
Ein ganz wichtiger Aspekt beim Entwerfen von Styles fr Web-Seiten sind aber auch die Menschen, die diese Web-Seiten als Besucher betrachten sollen. Es gibt nicht wenige Menschen, die
Farben und Formen aufgrund visueller Schwchen nur eingeschrnkt wahrnehmen knnen. Was
Sie beim Designen vielleicht als edel empfinden, empfinden solche Menschen nur noch als
unleserlich. Und unleserlich bedeutet: Sie haben wieder einen Besucher weniger auf Ihren
Seiten. Stylesheets verfhren aufgrund ihrer Mglichkeiten leicht zur Verwendung ungewhnlicher Schriftarten oder zu Dingen wie Ton-in-Ton-Farbgebung. So schn das auch aussehen
mag es kann je nach Anzeigegert und visuellem Auflsungsvermgen beim Betrachter schnell
auf Kosten der Usability, also der Zweckmigkeit gehen. Andererseits knnen Sie Stylesheets
auch explizit dafr nutzen, um Seiten fr sehschwache Menschen zu optimieren. Ordentliche
Farbkontraste, Schriftarten im normalgroen Bereich, bliche Schriftweiten und Zeilenhhen,
Vermeidung von kritischen Farbkombinationen wie rot/grn bei Hintergrund/Vordergrund
das sind Eigenschaften, die gut besuchte Web-Seiten aufweisen sollten.
Wenn Sie Web-Seiten gestalten, mssen Sie daraus Ihre eigenen Konsequenzen ziehen. Stylesheets erlauben Ihnen vllig neue Mglichkeiten beim Web-Seiten-Layout. Je intensiver Sie Ihre
Layouts jedoch von Stylesheet-Effekten abhngig machen, desto problematischer knnen die
Seiten auf schwacher Hardware oder bei sehschwachen Menschen wirken. Zwar gibt es auer
textbasierten Browsern wie Lynx kaum noch Browser mit nennenswerter Verbreitung, die
Stylesheets gar nicht untersttzen. Doch bei frhen Varianten von Netscape 4.x, die durchaus
noch verbreitet sind, ist leider eine verhngnisvolle Abhngigkeit einprogrammiert: Wenn der
Anwender dort JavaScript deaktiviert, zeigt der Browser auch keine CSS Stylesheets an. Der
Grund dafr ist, dass im Netscape-Browser ursprnglich mal CSS direkt vom JavaScript-Interpreter interpretiert wurde, weshalb es in Netscape 4.x auch eine heute veraltete Zwitter-Syntax
namens JSSS gibt, die CSS-Definitionen mittels JavaScript ermglicht. Einen Vorteil hat diese
Spezialitt von Netscape 4.x andererseits: Wenn Sie dort JavaScript deaktivieren, knnen Sie Ihre
CSS-gestylten Web-Seiten mal ohne CSS-Untersttzung testen. Bei jngeren Versionen der 4.x-

406

Kapitel 15: CSS Stylesheets

Serie von Netscape lsst sich CSS auch unabhngig von JavaScript deaktivieren. Zu diesem
Hrtetest sollten Sie sich auf jeden Fall zwingen.

15.1.4 CSS-Formate und CSS-Eigenschaften

CSS Stylesheets bestehen aus Formaten, die Sie fr bestimmte HTML-Elemente oder fr eine
bestimmte Auswahl von HTML-Elementen definieren. Zum Auswhlen einer bestimmten
Gruppe von HTML-Elementen, fr die ein Format gelten soll, gibt es in CSS die Syntax der so
genannten Selektoren. CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements.
CSS-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese
Eigenschaften. So knnen Sie beispielsweise ein Format fr berschriften 3. Ordnung definieren,
bei dem Sie fr Eigenschaften wie Schriftgre, Schriftfarbe und Absatznachabstand entsprechende Werte bestimmen.
Im folgenden Kapitel 15.2 wird beschrieben, an welchen Stellen Sie CSS in HTML einbinden
knnen, wie die Selektion von Gruppen von HTML-Elementen funktioniert und welche generellen Regeln fr Formatdefinitionen gelten. Das Kapitel 16 zu CSS-Eigenschaften beschreibt
dagegen systematisch die einzelnen mglichen Eigenschaften fr die Elementformatierung, die
Sie innerhalb von Formaten notieren knnen, und mgliche Wertzuweisungen fr diese Eigenschaften.

15.2
15.2.1

CSS Stylesheets in HTML einbinden

Formate zentral fr eine HTML-Datei definieren

Sie knnen innerhalb einer HTML-Datei einen Bereich fr CSS-Formate definieren. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-/*

... Hier werden die Formate definiert ... */

-->
</style>
</head>
<body>
</body>
</html>

Mit <style...> ... </style> notieren Sie einen Bereich fr Stylesheet-Formatdefinitionen (style
= Stil, Format). Im einleitenden <style>-Tag mssen Sie den Mime-Type der Stylesheet-Sprache angeben. Fr CSS ist das die Angabe type="text/css". Zwischen dem einleitenden Tag
und dem abschlieenden </style> knnen Sie dann zentrale CSS-Formate definieren. Lesen Sie
dazu den Abschnitt 15.3 Zentrale Formate definieren.

15.2 CSS Stylesheets in HTML einbinden

407

Beachten Sie: Damit ltere Web-Browser, die keine Stylesheets kennen, den Inhalt des styleElements nicht irrtmlich als anzuzeigenden Text interpretieren, knnen Sie den Inhalt in einen
HTML-Kommentar (<!-- ... -->) einbinden, so wie im obigen Beispiel. Formate, die Sie auf
diese Weise definieren, sind fr diese eine HTML-Datei gltig. Es ist durchaus erlaubt, mehrere
style-Bereiche innerhalb des HTML-Dateikopfs zu notieren. Sinnvoll ist das beispielsweise,
wenn Sie mal Style-Definitionen mit unterschiedlichen Style-Sprachen und entsprechend
unterschiedlichem Mime-Type in einer HTML-Datei notieren mchten.

15.2.2

Formate zentral in separater CSS-Datei definieren

In vielen Fllen werden Sie einheitliche Formate fr alle HTML-Dateien Ihres Projekts haben
wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen
knnen Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder
gewnschten HTML-Datei einbinden. Wenn Sie die Angaben in der separaten Datei ndern,
wirken sich die nderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei
eingebunden ist. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!-... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
</body>
</html>

Im Dateikopf einer HTML-Datei knnen Sie mit <link...> eine CSS-Datei referenzieren, die
CSS-Formatdefinitionen enthlt (link = Verweis). Innerhalb des <link>-Tags mssen die
Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = MimeTyp). Beim Attribut href= geben Sie die gewnschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen
Server befindet, mssen Sie an dieser Stelle Pfadangaben oder absolute URIs notieren. Das funktioniert genauso wie etwa beim Einbinden von Grafiken.
Bei der referenzierten Datei muss es sich um eine reine Textdatei handeln, die die Endung .css
haben sollte. Die Datei darf nichts anderes als Definitionen zentraler Formate und Kommentare
enthalten. Eine solche CSS-Datei knnen Sie mit jedem einfachen Texteditor erstellen. In der
HTML-Version dieses Buches (SELFHTML) wird beispielsweise eine separate CSS-Datei fr alle
Dokumentdateien verwendet. Die CSS-Datei heit selfhtml.css.
Beachten Sie: Wenn Sie mit <link...> eine Datei mit CSS-Formatdefinitionen referenzieren,
brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, dass Sie beide Arten, Formate zu definieren, miteinander
kombinieren knnen. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von

408

Kapitel 15: CSS Stylesheets

<style...>...</style> definiert werden, im Konfliktfall Vorrang vor den referenzierten For-

maten. So knnen Sie etwa immer wieder verwendete Formate importieren und einige davon
mit dateispezifischen Formaten ergnzen oder berschreiben.

15.2.3

Formate innerhalb eines HTML-Elements definieren

Unabhngig davon, ob Sie Formate zentral definieren oder aus einer separaten CSS-Datei einbinden, knnen Sie einzelne HTML-Elemente formatieren. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!-... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
<h1 style="[element-spezifische Formate]">...</h1>
</body>
</html>

Mit dem Universalattribut style= im einleitenden Tag eines Elements knnen Sie CSS-Formate
fr dieses eine Element notieren. Weitere Einzelheiten dazu werden im Abschnitt 15.4 HTMLElemente direkt formatieren beschrieben.
Beachten Sie: HTML-Elemente mssen HTML-4.0 konform mit Start- und End-Tag notiert
sein, damit CSS-Formatierungen darin angezeigt werden. Dies gilt vor allem fr Elemente, bei
denen frher mal nur die Notation des Start-Tags gengte, etwa bei p, li, option, td und th.
Das obige Beispiel zeigt, dass Sie parallel zu den Formatdefinitionen im HTML-Element auch die
Methoden zur zentralen Formatdefinition verwenden knnen. Im Konfliktfall haben stets die
inneren Formatdefinitionen Vorrang vor den ueren. Wenn Sie also im einleitenden <h1>Tag eine andere Schriftart angeben, als Sie im zentralen style-Bereich fr h1-Elemente festlegen, dann hat die Definition im einleitenden <h1>-Tag Vorrang vor der zentralen Definition,
wobei, wie diese wiederum Vorrang vor den Definitionen der eingebundenen externen CSSDatei hat.

15.2.4

Verschiedene separate Stylesheets fr

unterschiedliche Ausgabemedien

Bildschirm und Drucker beispielsweise sind sehr unterschiedliche Ausgabemedien fr ansprechend gestaltete Daten. Beide Ausgabemedien haben ihre eigenen Gesetze. Whrend am Bildschirm etwa helle Schriften auf dunklen Hintergrnden attraktiv aussehen, ist das fr die Ausgabe am Drucker keine gute Lsung. Bei der Druckerausgabe sehen dagegen Absatzeinzge von

15.2 CSS Stylesheets in HTML einbinden

409

mindestens 2 cm besser aus, whrend durch entsprechende Angaben am Bildschirm mglicherweise kostbarer Prsentationsraum verschenkt wird. Deshalb knnen Sie fr verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die unterschiedliche Formatdefinitionen enthalten knnen. Die Software muss beim Prsentieren der Seiten entscheiden, welche der
eingebundenen CSS-Dateien mageblich ist. Wenn der Web-Browser also beispielsweise die
Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit fr das Medium
Bildschirm bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie fr das Medium Drucker angeben. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed" href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">
</head>
<body>
</body>
</html>

Zunchst bentigen Sie fr jedes Ausgabemedium eine Textdatei mit der Endung .css, die nichts
anderes als die gewnschten CSS-Formatdefinitionen fr das gewnschte Ausgabemedium enthlt. In einer HTML-Datei knnen Sie alle CSS-Dateien wie im obigen Beispiel einbinden. Das
Einbinden funktioniert genauso wie im Kapitel 15.2.2 Formate zentral in separater CSS-Datei
definieren beschrieben. Neu ist hierbei nur, dass gleich mehrere <link>-Tags zum Einbinden
notiert sind und dass diese zustzlich das Attribut media= enthalten. Mit diesem Attribut
bestimmen Sie, fr welches Ausgabemedium die Datei verwendet werden soll, die Sie dann bei
der Angabe href= einbinden. Sie knnen einen oder mehrere Medientypen bei media= angeben.
Mehrere Angaben werden durch Kommata getrennt. In CSS 2.0 werden folgende mglichen
Angaben genannt:
Angabe

Bedeutung

media="all"

CSS-Datei gilt fr alle Medientypen.

CSS-Datei gilt fr computergesteuerte, synthetische Sprachausgabe. Beachten
Sie in diesem Zusammenhang auch die CSS-Eigenschaften fr Sprachausgabe.
CSS-Datei gilt fr Ausgabegerte mit so genannter Braille-Zeile. Dabei wird
Text eine vernderbare Oberflchenstruktur des Materials der Braille-Zeile
umgewandelt und ber Abtasten mit dem Finger gelesen. Diese Form des
Ausgabemediums ist fr blinde Menschen gedacht.
CSS-Datei gilt fr Braille-Drucker. Dabei wird Text in Form von abtastbaren
Oberflchenstrukturen in Papier oder ein vergleichbares Material gestanzt. Wie
braille ist embossed fr blinde Menschen gedacht.
CSS-Datei gilt fr die Anzeige auf tragbaren Kleinstcomputern. Web-fhige
elektronische Organizer sind typische Vertreter dieser Gattung.
CSS-Datei gilt fr den Ausdruck auf Papier. Web-Browser sollten diese
Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken
mchte. Beachten Sie dazu auch die CSS-Eigenschaften fr Printmedien.

media="aural"
media="braille"

media="embossed"

media="handheld"
media="print"

410

Kapitel 15: CSS Stylesheets

Angabe

Bedeutung

media="projection"

CSS-Datei gilt fr die Datenprojektion mit Beamern und hnlichen Gerten.

CSS-Datei gilt fr die Bildschirmanzeige.
CSS-Datei gilt fr nichtgrafische Ausgabemedien mit fixer Zeichenbreite, beispielsweise Fernschreiber. Aber auch fr textorientierte Browser wie Lynx ist
dieser Medientyp interessant.
CSS-Datei gilt fr TV-hnliche Ausgabegerte, die sich durch grobe Bildschirmauflsung und mangelnde Untersttzung beim Scrollen in Text, dafr aber
durch Sound-Untersttzung auszeichnen.

media="screen"
media="tty"

media="tv"

Beachten Sie: Der MS Internet Explorer interpretiert diese Angaben ab der Version 4.0 zu einem
gewissen Teil. Netscape findet auch in Version 6.0 zwar die richtige Stylesheet-Datei fr die
Bildschirmformate, ignoriert jedoch beispielsweise Stylesheet-Dateien mit Formaten fr den
Druck.
Die Syntax mit <link...> zum Einbinden separater Stylesheet-Dateien fr unterschiedliche
Ausgabemedien ist HTML-Syntax. Daneben gibt es auch noch eine CSS-Syntax, die den gleichen
Zweck hat. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-@import url(druck.css) print, embossed;
@import url(pocketcomputer.css) handheld;
@import url(normal.css) screen;
-->
</style>
</head>
<body>
</body>
</html>

Eine CSS-spezifische Einbindung wird innerhalb eines style-Bereichs im Dateikopf notiert. Mit
@import url starten Sie die Angabe. In Klammern notieren Sie dahinter den Dateinamen bzw.
die Adresse der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie, durch Leerraum
getrennt, das gewnschte Ausgabemedium. Es drfen auch mehrere sein, getrennt durch Kommata. Dabei sind die gleichen Medientypen erlaubt wie im HTML-Attribut media=. Am Ende
der @import-Angabe muss ein Strichpunkt stehen.

15.2.5

Formatdefinitionen fr unterschiedliche
Ausgabemedien

Neben der Mglichkeit, Verschiedene separate Stylesheets fr unterschiedliche Ausgabemedien

(Kapitel 15.2.4) in HTML einzubinden, steht auch die Mglichkeit zur Verfgung, innerhalb
eines style-Bereichs zwischen unterschiedlichen Ausgabemedien zu unterscheiden. Ein Beispiel:

15.2 CSS Stylesheets in HTML einbinden

411

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-@media print
{
/* ... Formatdefinitionen zum Drucken ... */
}
@media screen, handheld
{
/* ... Formatdefinitionen zur Bildschirmausgabe ... */
}
-->
</style>
</head>
<body>
</body>
</html>

Mit @media definieren Sie innerhalb eines style-Bereichs einen Bereich fr Formatdefinitionen
fr ein bestimmtes Ausgabemedium. Fr jede Mediensorte, die Sie unterscheiden wollen, knnen Sie einen solchen Befehl notieren. Hinter dem Befehl @media folgt, durch Leerraum getrennt, das gewnschte Ausgabemedium. Sie knnen auch mehrere Ausgabemedien durch
Kommata getrennt in Folge notieren. Erlaubte Angaben sind die gleichen wie im HTML-Attribut
media= (siehe Kapitel 15.2.4).
Im Anschluss an die @media-Angabe mssen Sie geschweifte Klammern { und } notieren. Alle
Formatdefinitionen, die Sie innerhalb dieser geschweiften Klammern notieren, sind dann nur fr
das oder die angegebenen Medien gltig.

15.2.6

Kommentare innerhalb von Stylesheet-Bereichen

Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfgung. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-p { color:blue; } /* Format fr blauen Text, kreiert am 19.7.2001 */
-->
</style>
</head>
<body>
</body>
</html>

412

Kapitel 15: CSS Stylesheets

Innerhalb von <style...>...</style> knnen Sie mit /* also einem Schrgstrich und einem
Stern-Zeichen in Folge einen Kommentar einleiten. Mit der umgekehrten Zeichenfolge also
mit */ beenden Sie den Kommentar. Anfang und Ende des Kommentars mssen nicht in der
gleichen Zeile stehen. Kommentare drfen jedoch nicht verschachtelt werden.

15.2.7

Stylesheet-Sprache ausdrcklich festlegen

Sie knnen dem Browser in einer HTML-Datei mit Hilfe einer Meta-Angabe ausdrcklich mitteilen, dass diese Datei Stylesheet-Definitionen in einer bestimmten Definitionssprache enthlt.
Die Angabe ist in der gegenwrtigen Praxis und fr die CSS-Sprache nicht zwingend erforderlich. Die Angabe dient dazu, um dem Client (also etwa dem Web-Browser) und aber auch dem
Web-Server einen Befehl zur Verfgung zu stellen, der beiden Seiten helfen soll, sich vor dem
Interpretieren der Datei ber die zu verwendende Stylesheet-Syntax zu einigen. Ein Beispiel:
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>

Mit <meta http-equiv="Content-Style-Type" content="text/css"> im Kopf einer

HTML-Datei erzwingen Sie die CSS-Syntax als verbindlich fr Formatdefinitionen innerhalb
dieser Datei. Wenn Sie eine andere Stylesheet-Sprache als CSS verwenden wollen, mssen Sie
anstelle von "text/css" den Mime-Type der betreffenden Formatdefinitionssprache angeben.

15.3
15.3.1

Zentrale Formate definieren

Aufbau zentraler Formate

Die hier beschriebenen Mglichkeiten gelten, wenn Sie:

Formate zentral fr eine HTML-Datei definieren oder
Formate zentral in separater CSS-Datei definieren.
Zentrale Formate folgen einem bestimmten Grundmuster. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-h1 { color:red; font-size:36pt; }
-->
</style>
</head>
<body>
<h1>36 Punkt und Rot!</h1>
</body>
</html>

15.3 Zentrale Formate definieren

413

Das Beispiel enthlt in einem style-Bereich eine Formatdefinition fr h1-Elemente der Datei,
also fr berschriften 1. Ordnung. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:
Selektor: Als Selektor wird das bezeichnet, was vor den geschweiften Klammern steht. Der
Selektor whlt aus, wofr die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten
die Formate fr alle berschriften 1. Ordnung (h1-Elemente). Es sind jedoch auch komplexere Selektoren mglich.
Definitionen: Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden
und einen Wert erhalten. Im obigen Beispiel werden etwa die CSS-Eigenschaften color
(Schriftfarbe) und font-size (Schriftgre) verwendet. Der Eigenschaft color wird der
Wert red zugewiesen und der Eigenschaft font-size der Wert 36pt. Zwischen Eigenschaft
und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird eine Definition
mit einem Strichpunkt (;). Nur bei der letzten Definition vor der schlieenden geschweiften
Klammer darf der Strichpunkt auch entfallen. Zu den einzelnen Eigenschaften und ihren
mglichen Werten siehe Kapitel 16 ber CSS-Eigenschaften.
Beachten Sie: Zwar sind innerhalb einer Definition durchaus Leerzeichen erlaubt, aber frhe
Versionen von Netscape 4.x haben sich dabei als sehr empfindlich erwiesen und ignorieren solche Definitionen. Obwohl es nicht so gut lesbar ist, ist es deshalb besser, keine Leerzeichen
innerhalb einer Definition zu verwenden. So werden Angaben wie color:red; font-size:36pt;
in jedem Fall akzeptiert, aber color: red; font-size: 36pt; knnen bei einigen lteren
Netscape-Versionen zu Fehlern fhren.

15.3.2

Formate fr HTML-Elemente definieren

In einem style-Bereich oder in einer externen CSS-Datei knnen Sie fr HTML-Elementtypen,

zum Beispiel zu Absatztypen und Textgestaltung oder fr Tabellen-Elementtypen, CSS-Formate
definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden,
werden alle Formate angewendet, die Sie fr den Elementtyp definiert haben. So knnen Sie
beispielsweise fr berschriften 1. Ordnung, definieren, dass diese in der Schriftart Helvetica, 20
Punkt, rot, fett und kursiv mit einem Absatznachabstand von 16 Punkt angezeigt werden. Wenn
Sie dann im Text der HTML-Datei eine berschrift 1. Ordnung wie gewohnt definieren, werden
diese Formateigenschaften bercksichtigt. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-body { background-color:#FFFFCC;
margin-left:100px; }
h1 { font-size:48pt;
color:#FF0000;
font-style:italic;
border-bottom:solid thin black; }
p,li

{ font-size:12pt;

414

Kapitel 15: CSS Stylesheets

line-height:14pt;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.2mm;
word-spacing:0.8mm;
color:blue; }

-->
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>

15.1: Alle berschriften, Listenpunkte und Abstze haben besondere CSS-Formate erhalten.

Um ein zentrales Format fr alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im
obigen Beispiel werden body (Dokument), h1 (berschriften 1. Ordnung), p (Textabstze) und
li (Listeneintrge) auf diese Weise notiert. Wenn Sie ein Format fr mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewnschten Elementtypen an und trennen sie durch
Kommata, so wie im obigen Beispiel p,li.
Es bedeutet also das Gleiche, wenn Sie notieren:
h1 { font-family:Helvetica,sans-serif; }
h2 { font-family:Helvetica,sans-serif; }

oder wenn Sie notieren:

h1, h2 { font-family:Helvetica,sans-serif; }

Dahinter folgen die gewnschten Definitionen. Im obigen Beispiel wird dem body-Element eine
hellgelbe Hintergrundfarbe (background-color:#FFFFCC;) und ein linker Randabstand von
100 Pixeln (margin-left:100px;) zugewiesen. berschriften 1. Ordnung (h1) erhalten eine

15.3 Zentrale Formate definieren

415

Schriftgre von 48 Punkt (font-size:48pt;), die Schriftfarbe rot (color:#FF0000;) und den
Schriftstil kursiv (font-style:italic;). Textabstze (p) und Listenpunkte (li) sollen in 12
Punkt Schriftgre (font-size:12pt;) mit einer Zeilenhhe von 14 Punkt (line-height:
14pt;) in Schriftart Helvetica oder, wenn nicht verfgbar, in Arial, und wenn ebenfalls nicht
verfgbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,
sans-serif;). Auerdem werden auch noch Angaben zum Zeichenabstand (letterspacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.

15.3.3

Formate fr verschachtelte HTML-Elemente

definieren

Wenn Sie nichts anderes angeben, bernimmt ein HTML-Element, das innerhalb eines anderen
HTML-Elements vorkommt, dessen Eigenschaften und fgt seine eigenen Eigenschaften nur
hinzu. Wenn Sie beispielsweise fr berschriften 1. Ordnung die Schriftart Times und die Farbe
Rot definieren, erscheint Text, der innerhalb einer solchen berschrift mit <i>...</i> formatiert wird, ebenfalls rot und in Times, aber zustzlich kursiv.
Sie knnen mit Hilfe von Stylesheets jedoch bestimmen, dass ein HTML-Element bestimmte
Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So knnen Sie etwa bestimmen, dass <i>...</i> innerhalb von berschriften nicht
kursiv, stattdessen aber in blauer Farbe dargestellt wird, whrend das gleiche Element innerhalb
anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-h1 { color:red; }
h1 i { color:blue; font-style:normal; }
-->
</style>
</head>
<body>
<h1>Wir lernen <i>Stylehheets</i></h1>
<p>Wir lernen <i>Stylesheets</i></p>
</body>
</html>

Im Beispiel wird festgelegt, dass Textabschnitte, die mit <i> ... </i> ausgezeichnet sind, nicht
wie sonst blich kursiv, sondern normal (font-style:normal;), stattdessen aber mit blauer
Farbe (color:blue;) dargestellt werden aber nur dann, wenn das i-Element innerhalb einer
berschrift 1. Ordnung (h1) vorkommt. Dazu notieren Sie zuerst den Namen des bergeordneten Elementtyps, im Beispiel h1, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel i.

416

Kapitel 15: CSS Stylesheets

15.2: Ein Format fr verschachtelte HTML-Elemente wirkt nur in der passenden Umgebung.

In der ersten Zeile innerhalb des <body>-Bereichs im obigen Beispiel kommt diese spezielle
Definition zum Tragen. In der zweiten Zeile dagegen, wo <i>...</i> innerhalb eines Textabsatzes vorkommt, hat es die bliche Wirkung.

Weitere Mglichkeiten fr verschachtelte HTML-Elemente bei CSS 2.0

Ab CSS 2.0 gibt es weitere Mglichkeiten fr Selektoren-Angaben zu verschachtelten Elementen.
Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-div i { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
-->
</style>
</head>
<body>
<div align="center">
Text in einem div-Bereich mit <b>nur fettem Text</b> und
<i>kursivem und <b>dazu fettem</b> Text</i>.
<p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem
und <b>dazu fettem</b> Text</i>.</p>
<table border="1"><tr>
<td><p>Textabsatz in einer Tabellenzelle.</p></td>
</tr></table>
</div>
<p>Textabsatz ausserhalb eines div-Bereichs mit <b>nur fettem Text</b>
und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<p>Noch ein Textabsatz.</p>
</body>
</html>

15.3 Zentrale Formate definieren

417

Die Selektoren im Beispiel haben folgende Bedeutung:

div i { color:red; }
Damit wird wie nach CSS 1.0-Syntax bekannt festgelegt, dass i-Elemente, sofern sie innerhalb
eines div-Bereichs vorkommen, rote Textfarbe (color:red;) erhalten. Dabei wird das iElement aber auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt: <div><ul>
<li><i></i></li></ul></div>. Deshalb gibt es ab CSS 2.0 die Mglichkeit, genauer
festzulegen, fr welche Verschachtelung die Formatdefinition gelten soll.
div > p { color:blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb
eines div-Bereichs vorkommen, blaue Textfarbe (color:blue;) erhalten. Aber nur dann,
wenn das p-Element in dieser Form vorkommt: <div><p></p></div>, also eine Ebene unterhalb des div-Elements. Im obigen Beispiel ist innerhalb des div-Bereichs unter anderem
auch eine Tabelle notiert, in der noch mal ein p-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p-Element mehr als eine Verschachtelungsebene unterhalb des div-Elements liegt (die Tabellenelemente sind dazwischen).
div * b { color:violet; }
Mit dem Zeichen * wird in diesem Selektor festgelegt, dass b-Elemente, sofern sie innerhalb
eines div-Bereichs vorkommen, violette Textfarbe (color:violet;) erhalten. Aber nur
dann, wenn das b-Element in dieser oder einer vergleichbaren Form vorkommt: <div><p>
<b></b></p></div>, also mindestens zwei Ebenen unterhalb des div-Elements. Im obigen
Beispiel sind verschiedene Textstellen an verschiedenen Stellen mit <b>...</b> ausgezeichnet. Das erste b-Element in dem Text, der zuerst und direkt innerhalb des div-Bereichs
notiert ist, erhlt noch keine violette Farbe, wohl aber das nchste b-Element im gleichen Satz,
da dieses Element bereits zwei Ebenen unterhalb des div-Elements liegt (das i-Element liegt
dazwischen).
div + p { margin-top:100px; }
Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf
ein div-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (margintop:100px;). Im obigen Beispiel ist das bei dem vorletzten p-Element der Fall. Dieses folgt
unmittelbar hinter dem div-Bereich. Beachten Sie, dass die Syntax mit dem Pluszeichen nur
mit Netscape 6.0 nachvollziehbar war, mit dem Internet Explorer 5.5 dagegen nicht.

15.3.4

Attributbedingte Formate definieren

Mit Hilfe attributbedingter Formate knnen Sie in Selektoren angeben, dass Formatdefinitionen
nur fr Elemente mit bestimmten Attributen oder sogar nur fr Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:14pt; }
p[align] { color:red; }

418

Kapitel 15: CSS Stylesheets

p[align=center] { color:blue; text-align:left; }

td[abbr~=Berlin] { background-color:#FFFF00 }
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
-->
</style>
</head>
<body>
<p>Das ist ein Textabsatz, ein stinknormaler.</p>
<p align="right">Das ist ein Textabsatz, rechts ausgerichtet.</p>
<p align="center">Das ist ein Textabsatz, zentriert? Wirklich zentriert?</p>
<table border="1"><tr>
<th>Berlin</th>
<th>Hamburg</th>
</tr><tr>
<td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>
<td abbr="Es folgen Infos zu Hamburg">Eine Menge Inhalt zu Hamburg</td>
</tr></table>
<p>Ein Textabsatz <span lang="fr">avec</span> Text <span lang="en">about</span>
einen <span lang="en-US">English man in New York</span></p>
</body>
</html>

15.3:

Attributbedingte Formate untersttzt Netscape 6, nicht aber Internet Explorer (zumindest

bis zur Version 6).

In dem Beispiel ist zunchst eine Formatdefinition fr alle p-Elemente notiert. Dann folgen zwei
weitere Formatdefinitionen ebenfalls fr p-Elemente, aber nur fr solche, die ein Attribut
align= haben. Mit der Syntax p[align] werden alle p-Elemente erfasst, die ein align-Attribut
haben. Mit p[align=center] werden alle p-Elemente erfasst, die ein align="center" im
einleitenden Tag haben. Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst,
die ein Attribut abbr= besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort
Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten
Wrtern in Wertzuweisungen an Attribute. Mit *[lang|=en] schlielich werden alle Elemente
(der Stern ist das Platzhalterzeichen fr alle Elemente) erfasst, die ein Universalattribut lang=

15.3 Zentrale Formate definieren

419

mit einem Wert wie en oder auch en-US haben. Diese Syntax findet Teile in Wertzuweisungen
an Attribute, die durch Bindestriche getrennt sind.
Beachten Sie: Netscape 6.0 interpretiert diese Angaben, der Internet Explorer 5.5 und 6.0 noch
nicht.

15.3.5

Formate fr Klassen definieren

Sie knnen Formate fr Klassen definieren. Anwenden knnen Sie solche Klassen in HTML mit
dem Universalattribut class=. So knnen Sie beispielsweise fr berschriften 1. Ordnung zwei
Varianten erzeugen. Dazu vergeben Sie Namen fr die Klassen. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2>H2 ganz normal <span class="hinterlegt">und aber <b class="extra">auch</b>
hinterlegt</span></h2>
</body>
</html>

15.4:

Die CSS-Formate werden nur bei HTML-Elementen mit einem bestimmten Attributwert
bei class wirksam.

420

Kapitel 15: CSS Stylesheets

Es gibt zwei Mglichkeiten, Klassen fr HTML-Elemente zu notieren: entweder fr einen bestimmten HTML-Elementtyp oder fr keinen bestimmten. In jedem Fall bestimmen Sie eine
Formatdefinition fr eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar
dahinter einen Namen fr die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine
Klasse namens hinterlegt angesprochen, die aber nur fr HTML-Elemente vom Typ h1 gilt,
also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt
wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen noch mal allgemein
oder fr andere Elemente verwenden knnen. Der Stern gilt als Platzhalterzeichen und bedeutet
so viel wie fr alle Elemente. Er kann auch ganz entfallen. Im Beispiel .extra knnen Sie das
sehen. Ein h1-Element erhlt im Beispiel also die Formatierungen, die mit dem Selektor
h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhlt
dagegen die Formatierungen, die mit *.hinterlegt bestimmt weden.
Die Namen hinter dem Punkt knnen Sie frei vergeben. Die Namen sollten nicht zu lang sein
und keine Leerzeichen und keine deutschen Umlaute enthalten.

15.3.6

Klassen in Verbindung mit den Elementen div und

span

Die beiden HTML-Elemente div und span haben besondere Bedeutung fr CSS Stylesheets. Der
Grund ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass
das div-Element eine neue Zeile im Textfluss erzwingt, whrend span zur Verwendung innerhalb eines Textes verwendet werden kann und daher berhaupt keine Eigenschaften hat. Wenn
Sie mit diesen Elementen arbeiten, knnen Sie Probleme vermeiden, die sich aus den im Browser
voreingestellten Eigenschaften bestimmter Elemente ergeben. So haben beispielsweise berschriften bei der Darstellung im Browser bestimmte Vor- und Nachabstnde, die von Browser zu
Browser recht verschieden sein knnen. Wenn Sie das Aussehen solcher Elemente kontrollieren
wollen, bentigen Sie CSS-Formatdefinitionen nicht selten dazu, um einfach nur die automatischen Voreinstellungen der Browser fr solche Elemente zu korrigieren. Bei den Elementen div
und span knnen Sie dagegen fast wie auf einer tabula rasa aufsetzen.
Das folgende Beispiel zeigt, wie Sie mit CSS, Klassen und allein mit diesen beiden eigenschaftslosen HTML-Elementen arbeiten knnen:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-.body { background-color:#EEEEFF; }
.chap { font-family:Arial,sans-serif; font-size:20pt; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-bottom:16px; }
.sect { font-family:Arial,sans-serif; font-size:16pt; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-top:24px; margin-bottom:16px; }

15.3 Zentrale Formate definieren

.p

421

{ font-family:Arial,sans-serif; font-size:11pt; color:black; margin-top:6px;

margin-bottom:6px; }
.red

{ color:red }

.blue

{ color:blue }

.bold

{ font-weight:bold }

.big

{ font-size:14pt }

.small { font-size:6pt; font-family:Small Fonts,sans-serif; }

-->
</style>
</head>
<body>
<div class="chap">Eine Kapitelberschrift</div>
<div class="p">Eine Textabsatz, dessen Klasse genau so heit wie ein HTML-Element
:-)</div>
<div class="p">Und damit man auch alles sieht, gleich noch einer davon</div>
<div class="sect">Eine Sektionsberschrift</div>
<div class="p">Absatz mit <span class="red">rotem und <span
class="bold">fettem</span></span> Text</div>
<div class="p">Absatz mit <span class="big">groem</span> und <span
class="small">kleinem</span> Text</div>
</body>
</html>

15.5:

Mit div und span formatieren Sie Bereiche mit bestimmten CSS-Eigenschaften das
Beispiel enthlt auer diesen beiden keinerlei Tags zum Formatieren.

Im style-Bereich des Beispiels werden Klassen fr beliebige Elemente definiert, die diese Klassen mit class="chap", class="sect" usw. verwenden knnen und damit die entsprechenden
Formate annehmen.
Im sichtbaren Bereich der Datei, also zwischen <body> und </body>, sind ausschlielich Elemente der Typen div und span notiert. Durch die Verwendung des class-Attributs simulieren diese Elemente gewissermaen typische Auszeichnungselemente wie Kapitelberschriften,
Textabstze und Formatierungen innerhalb des Textes.

422

Kapitel 15: CSS Stylesheets

Nun kann man darber streiten, ob diese Art zu arbeiten nicht eine Vergewaltigung der Idee von
HTML darstellt, der Idee nmlich, ein Set wichtiger und fr normalen Text typischer Auszeichnungselemente bereitzustellen, damit durch deren einheitliche Verwendung auch eine webweit
einheitliche Semantik bei der Textauszeichnung erreicht wird. Andererseits ist Semantik immer
auch gegeben, wenn man Elemente regelgerecht, aber nach eigenen Vorstellungen fr Bedeutung
auszeichnet. Denn vielleicht will man ja unter der Bedeutung der Klassen chap und sect im
Beispiel etwas anderes verstehen als einfach unter dem, was die HTML-Elemente h1 und h2
bedeuten. Die eigenschaftslosen Elemente div und span eignen sich ja beispielsweise auch hervorragend dazu, in Verbindung mit Klassennamen wie Romeo und Julia Rollentexte eines Theaterstcks zu markieren. Insofern sind div und span in Verbindung mit Klassennamen gar nicht
mehr weit entfernt von den semantischen Konzepten, die mit XML verfolgt werden.

15.3.7

Individualformate definieren

So wie Sie Formate fr Klassen definieren knnen, die in HTML mit dem Universalattribut
class= angesprochen werden, knnen Sie auch Formate definieren, die ber das Universalattribut id= angesprochen werden. Da die Wertzuweisung an ein solches Attribut ein dokumentweit
eindeutiger Name sein sollte, handelt es sich also einfach um eine zentrale Formatdefinition fr
das eine Element mit diesem id-Namen. In CSS werden die id-Namen allerdings nicht nur wie
beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als
elementtypweit eindeutige Bezeichner. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-#roterBereich {
position:absolute;
top:130px;
left:30px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#blauerBereich {
position:absolute;
top:130px;
left:400px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
h1#Titel {
font-family:Arial,sans-serif;

15.3 Zentrale Formate definieren

423

font-size:24pt;
font-weight:normal;
color:green;
}
-->
</style>
</head>
<body>
<h1 id="Titel">Diese &Uuml;berschrift und zwei positionierte Bereiche</h1>
<div id="roterBereich"><h1>Der rote Bereich</h1></div>
<div id="blauerBereich"><h1>Der blaue Bereich</h1></div>
</body>
</html>

15.6: Individualformate gelten fr die HTML-Elemente mit dem passenden Attributwert bei id.

In dem Beispiel werden drei Individualformate definiert. Zunchst einmal sind dies zwei Individualformate mit den Namen #roterBereich und #blauerBereich. Solche Formate beginnen
also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen
als Wertzuweisung an das id-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Das obige Beispiel zeigt einen typischen Anwendungsfall fr Individualformate, nmlich das Definieren von Formaten fr absolut positionierte Bereiche (position:absolute;).
Auerdem wird ein Individualformat mit dem Selektor h1#Titel definiert. Das ist eine Syntax,
die erst seit CSS 2.0 zur Verfgung steht. Dabei wird vor dem Gatterzeichen, das ein Individualformat kennzeichnet, ein HTML-Elementtyp notiert, im Beispiel also h1 fr berschriften erster
Ordnung. Hinter dem Gatterzeichen steht dann wieder der Name des Individualformats. Im
Beispiel wird die Formatdefinition nur dann angewendet, wenn es in der HTML-Datei ein h1Element mit dem Attribut id="Titel" gibt. Wenn es dagegen etwa ein Element div mit id=
"Titel" gbe, wrde die Formatdefinition dort ignoriert.
Beachten Sie: Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer
5.x und Netscape 6.0 erkannt, nicht aber von lteren Versionen.

424

Kapitel 15: CSS Stylesheets

15.3.8

Pseudoformate definieren

Pseudoformate knnen Sie fr HTML-Bestandteile definieren, die sich jedoch nicht durch ein
eindeutiges HTML-Element ausdrcken lassen, z.B. ein noch nicht besuchter Verweis oder der
erste Buchstabe eines Absatzes. Zum Definieren solcher Pseudoformate gibt es eine spezielle
Syntax. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; fontweight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
body { font-family:Arial,sans-serif; font-size:12pt; }
-->
</style>
</head>
<body>
<p>
Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu
CSS</a><br>
Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a
href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XMLDatei</a>?
</p>
</body>
</html>

15.7: Pseudoformate kommen vor allem bei Links zum Einsatz.

Bei Pseudoformaten notieren Sie zuerst das betreffende HTML-Element, im Beispiel das a-Element fr Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link (fr noch nicht besuchte Verweisziele), visited (fr bereits besuchte Verweisziele), hover (fr Verweise, whrend der Anwender mit der Maus darber fhrt) und active

15.4 HTML-Elemente direktformatieren

425

(fr angeklickte Verweise). Beachten Sie, dass dies keine frei whlbaren Namen sind, sondern
feste Schlsselwrter.
Es gibt eine Reihe fester, erlaubter Pseudoformate. Diese werden im Zusammenhang mit den
CSS-Eigenschaften im Abschnitt 16.10 beschrieben.

15.4
15.4.1

HTML-Elemente direktformatieren
Formatdefinitionen mit dem style-Attribut

Sie knnen einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe
von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann genau fr den
Geltungsbereich des betreffenden HTML-Elements und nach den Regeln der natrlichen Formatvererbung auch fr Kindelemente des betreffenden Elements. Sinnvoll ist diese Mglichkeit,
wenn Sie entweder sonst auf CSS verzichten und es nur mal fr ein paar Ausnahmen bentigen,
oder wenn Sie zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten mchten. Ein Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-body { background-color:#000000; color:#E0E0E0 }
-->
</style>
</head>
<body>
<h1>Die Seite mit dem besonderen Element</h1>
<p>Hier sind zwar zentrale Formatdefinitionen vorhanden,
aber das folgende Element soll was besonderes sein:</p>
<p style="background-color:#808040; color:#D8FD02;
font-family:Century Schoolbook,serif; font-size:24pt; letter-spacing:3px;
padding:40px; border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
</p>
</body>
</html>

426

Kapitel 15: CSS Stylesheets

15.8: Mit dem Attribut style formatieren Sie HTML-Tags individuell.

Sie knnen Formate fr ein HTML-Element definieren, indem Sie innerhalb des einleitenden
HTML-Tags das Attribut style= und dahinter die gewnschten Formatdefinitionen notieren.
Innerhalb der Formatdefinitionen sind CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax
wie innherhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus
einem Namen, z.B. color (Schriftfarbe), und einem Wert, z.B. #D8FD02, getrennt durch einen
Doppelpunkt. Schlieen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei
der letzten Formatdefinition vor dem abschlieenden Anfhrungszeichen darf der Strichpunkt
entfallen.
Im obigen Beispiel werden die individuellen Formatangaben auf ein gewhnliches p-Element
angewendet. Es erhlt mit Hilfe der CSS-Eigenschaften fr Hintergrundfarbe (backgroundcolor), Schriftfarbe (color), Schriftart (font-family), Schriftgre (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein
Aussehen, das berhaupt nicht mehr an einen Textabsatz erinnert.

15.5
15.5.1

Maeinheiten, Farbangaben und Wertzuweisung

Numerische Angaben

Bei numerischen Angaben zu CSS-Eigenschaften, also etwa bei Schriftgren, Absatzabstnden

oder Rndern, stehen Ihnen die weit verbreiteten Maeinheiten zur Verfgung. Dabei sind
absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent gegenber normal)
mglich.
Benutzen Sie fr Ihre Angaben die folgenden Abkrzungen:

15.5 Maeinheiten, Farbangaben und Wertzuweisung

Abkrzung

Angabetyp

Bedeutung

Beispiele

pt

absolut

font-size:12pt;

pc

absolut

in

absolut

Steht fr Punkt. Typographische Maeinheit. 1 Punkt entspricht 1/72 Inches.

Steht fr Pica. Typographische Maeinheit. 1 Pica entspricht 12 Punkt.
Steht fr Inch. Allgemeines Lngenma
im angelschsischen Raum. 1 Inch
entspricht 2.54 Zentimetern.
Steht fr Millimeter. Allgemeines Lngenma. 1000. Teil des Urmeters.
Steht fr Zentimeter. Allgemeines Lngenma. 100. Teil des Urmeters.
Steht fr Pixel. Abhngig von der
Pixeldichte des Ausgabegerts, relativ
also von Ausgabegert zu Ausgabegert, absolut dagegen auf ein und das
selbe Ausgabegert bezogen.
Steht fr bezogen auf die Schriftgre
des Elements. Ausnahme: Wenn die
font-size-Eigenschaft (also die Schriftgre) selbst mit dieser Maangabe
gesetzt wird, steht diese fr bezogen auf
die Schriftgre des Elternelements.
Steht fr bezogen auf die Hhe des
Kleinbuchstaben x in diesem Element.
Ausnahme: Wenn die font-size-Eigenschaft (also die Schriftgre) selbst mit
dieser Maangabe gesetzt wird, steht
diese fr bezogen auf die Hhe des
Kleinbuchstaben x im Elternelement.
Steht fr Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen
Gre, oder zu der des Elternelements,
oder zu einem allgemeineren Kontext.
Bei nebenstehendem Beispiel ist die
Angabe zur Zeilenhhe (line-height)
relativ zur Schriftgre (font-size) zu
interpretieren.

mm

absolut

cm

absolut

px

absolut/relativ

em

ex

relativ

relativ

relativ

427

line-height:14pt;
font-size:1pc;
line-height:1.2pc;
border-width:0.1in;
margin-left:1in;
margin-bottom:10mm;
width:70mm;
font-size:1cm;
top:2.54cm;
border-width:3px;
margin-right:60px;

font-size:1.2em;
line-height:1.5em;

text-transform:uppercase;
font-size:1.3ex;

font-size:10pt;
line-height:120%;

Benutzen Sie bei numerischen Bruchzahlen stets den Punkt als Dezimalzeichen, nicht das deutsche Komma, also etwa 0.2cm und nicht 0,2cm. Auch Minuswerte sind bei einigen Wertzuweisungen mglich, markiert wie blich durch das Minuszeichen.
Sie knnen also sehr exakte Angaben notieren, doch Web-Seiten werden in der Regel auf Bildschirmen ausgegeben, und Bildschirme bestehen heutzutage aus Pixeln, wobei die Pixeldichte
der einzelnen Bildschirme sehr unterschiedlich sein kann. Der Computer muss Ihre Angaben fr

428

Kapitel 15: CSS Stylesheets

die Ausgabe am Bildschirm letztlich in Pixel umrechnen. Dabei kann es zu enttuschenden

Ergebnissen kommen. So erscheinen Schriftgren, die am einen Bildschirm gut lesbar sind, in
einer anderen Umgebung zu klein. Leider sind daran auch die unterschiedlichen Basiseinstellungen der Betriebssysteme mit schuld. So wird unter Windows-Systemen eine Berechnungsgrundlage von 96 dpi (Dots per Inch) fr die Darstellung von Schriftarten verwendet (bei der Einstellung groe Schriftarten gar 120 dpi), unter Systemen wie Linux und Macintosh sind es dagegen 72 dpi. Deshalb erscheinen Schriftgren, die unter Windows sauber aussehen, unter den
anderen genannten Systemen oft mickrig, whrend Schriftgren, die dort angenehm aussehen,
unter Windows wiederum klobig wirken. Aber auch direkte Angaben in Pixeln lsen das Problem nicht unbedingt. Ein Pixel auf einem 13-Zoll-Notebook-Bildschirm mit 1024768 Pixeln
Bildschirmauflsung wirkt ganz anders als ein Pixel auf einem 19-Zoll-Desktop-Bildschirm mit
der gleichen Bildschirmauflsung. Andere Angaben wie em oder Prozentwerte umgehen zwar das
Problem der unterschiedlichen Bildschirmdarstellungen aber erstens kann man bei einer Angabe wie 1.2em kaum von Formatierung reden, und zweitens bereiten solche Angaben auch
andere Probleme. So kann es beispielsweise durch das Prinzip der natrlichen Vererbung passieren, dass Schriftarten bei mehrfach verschachtelten Elementen (etwa bei Listen oder Tabellen)
immer kleiner oder grer werden. CSS 2.0 bietet zwar mit den erweiterten Mglichkeiten,
Formate fr verschachtelte Elemente zu definieren, Manahmen zur Abhilfe an, doch das nutzt
vorlufig auch nichts, solange es in vielen noch verbreiteten Browsern nicht funktioniert.
Um die richtigen und falschen Maangaben ist angesichts all dieser Probleme in einigen
Kreisen schon ein richtiger Glaubenskrieg ausgebrochen. Die einen behaupten, man solle sich an
Angaben wie pt halten, weil ein Punkt immer gleich gro zu sein hat, die anderen beschwren
die em-Angabe wie einen Erlsergott. Fakt ist in jedem Fall, dass Sie niemals darauf vertrauen
sollten, dass Gren, die auf Ihrem Bildschirm wunderbar aussehen, woanders genauso wunderbar wirken. Vermeiden Sie deshalb vor allem bei Angaben, die fr die Leserlichkeit von Text
relevant sind, extreme Werte, und reagieren Sie, wenn Sie von vielen Seiten zu hren bekommen, Ihre Seiten seien schwer lesbar.

15.5.2

Farbangaben

Farbangaben in Stylesheets nach CSS-Syntax sind nach den Regeln zum Definieren von Farben
in HTML (Kapitel 3.5) mglich. Sie knnen Farbwerte also hexadezimal nach dem Schema
#XXXXXX angeben, aber auch die verbreiteten Farbnamen verwenden.
Eine weitere Mglichkeit, Farben zu definieren, stellt die CSS-Stylesheet-Sprache jedoch auch
noch zur Verfgung. Das Schema dazu lautet rgb(rrr,ggg,bbb). Der Ausdruck rgb(...) ist
dabei immer gleich. Innerhalb der Klammern mssen drei Dezimalwerte oder drei Prozentwerte
stehen, durch Kommata voneinander getrennt. rrr ist der Rotwert, ggg der Grnwert und bbb
der Blauwert der Farbe. Fr alle drei Werte sind entweder absolute Zahlen zwischen 0 (kein
Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) oder
Prozentwerte von 0% (kein Anteil an der entsprechenden Farbe) bis 100% (maximaler Anteil der
entsprechenden Farbe) erlaubt. Einige Beispiele:
<style type="text/css">
<!-h1 { color:#FFCCDD; background-color:black }
body

{ background-color:rgb(51,0,102); }

15.5 Maeinheiten, Farbangaben und Wertzuweisung

blockquote

429

{ background-color:rgb(60%,90%,75%); }

//-->
</style>

Anwenderrelative Farbwrter
Ab der CSS-Version 2.0 gibt es ferner die Mglichkeit, anwenderrelative Farbwrter zu verwenden, hinter denen sich Farben verbergen, die der Anwender an seinem Rechner als Arbeitsumgebung eingestellt hat. Auf diese Weise knnen Sie zur Gestaltung Ihrer Inhalte Farben verwenden,
die auf die Bildschirmumgebungsfarben des Anwenderrechners abgestimmt sind, ohne dass Sie
diese Farben kennen. Die erlaubten anwenderrelativen Farbwrter werden unterhalb des folgenden Beispiels erlutert.
Abkrzung

Bedeutung

activeborder

Farbe der aktiven Fenstertitelzeile.

Farbe der aktiven Fenstertitelzeile.
Farbe der berschrift in der aktiven Fenstertitelzeile.
Farbe des Hintergrunds der aktiven Anwendung.
Farbe des Desktop-Hintergrunds.
Farbe von Buttons in Dialogfenstern.
Farbe fr 3-D-Schatten von Buttons in Dialogfenstern.
Farbe von Texten beschrifteter Buttons in Dialogfenstern.
Farbe von berschriften in Dialogfenstern.
Farbe von deaktiviertem Text in Dialogfenstern.
Farbe von ausgewhlten Eintrgen in Auswahllisten.
Farbe von selektiertem Text.
Farbe einer nicht aktiven Fenstertitelzeile.
Farbe der berschrift in einer nicht aktiven Fenstertitelzeile.
Farbe fr Tooltips und Hints (kleine Popup-Hilfen).
Textfarbe fr Tooltips und Hints (kleine Popup-Hilfen).
Farbe fr Menleisten.
Farbe fr Meneintrge.
Farbe der Scroll-Leiste in Fenstern.
Dunkle Farbe bei Schatten von 3-D-Elementen.
Farbe von 3-D-Elementen.
Farbe von gerade angeklickten 3-D-Elementen.
Helle Farbe bei Schatten von 3-D-Elementen.
Dunkle Farbe bei Schatten von 3-D-Elementen.
Hintergrundfarbe von Dokumentfenstern.
Farbe von Fensterrahmen.
Farbe von normalem Text in Dokumentfenstern.

activeborder
activecaption
appworkspace
background
buttonface
buttonhighlight
buttontext
captiontext
greytext
highlight
highlighttext
inactiveborder
inactivecaption
infobackground
infotext
menu
menutext
scrollbar
threeddarkshadow
threedface
threedhighlight
threedlightshadow
threedshadow
window
windowframe
windowtext

430

Kapitel 15: CSS Stylesheets

Einige Beispiele:
<style type="text/css">
<!-h1 { color:windowtext; background-color:infobackground; }
body

{ background-color:appworkspace; }

//-->
</style>

15.5.3

Erlaubte feste Werte und Zeichenkettenangaben

Bei vielen CSS-Eigenschaften steht eine Auswahl erlaubter Werte zur Verfgung. Das ist nicht
anders als bei vielen HTML-Attributen. Genau so, wie Sie etwa eine berschrift oder einen Textabsatz in HTML mit den Angaben align="left", align="center" oder align="right" ausrichten knnen, gibt es CSS-Eigenschaften, die bestimmte Schlsselwrter erwarten. So gibt es
etwa die Stylesheet-Angabe text-align zur Ausrichtung von Text, die die gleichen Angaben
erwartet, also left, center oder right.
Manche Stylesheet-Angaben erwarten die Angabe eines Namens oder auch mehrerer Schlsselwrter. So knnen Sie hinter der Stylesheet-Angabe font-family Namen von einer oder mehreren Schriftarten notieren, die Sie fr die Formatierung verwenden mchten. Andere CSSEigenschaften sind Zusammenfassungen von Einzeleigenschaften. So gibt es beispielsweise die
Angabe border (Rahmen), hinter der Sie eine Angabe wie thin solid red notieren knnen.
Trennen Sie solche Angaben zu einer Sammeleigenschaft durch Leerzeichen. Wenn die Angaben
selbst Leerzeichen enthalten knnen, wie etwa bei Namen von Schriftarten, knnen Sie Kommata zum Trennen verwenden. In solchen Fllen sind auch Anfhrungszeichen empfehlenswert.
Bei Namen wie Schriftartangaben oder Angaben wie left, center usw. ist es zumindest bei der
CSS-Anwendung auf HTML-Elemente egal, ob Sie die Angaben gro oder klein schreiben. Das
gilt auch fr die Stylesheet-Eigenschaften selbst. Wenn Sie CSS allerdings auf XHTML oder
gltige XML-Dokumente anwenden, mssen Elementnamen, Attributnamen und Attributzuweisungen so geschrieben werden, wie es in der XML-DTD festgelegt ist. Bei XHTML muss alles
klein geschrieben werden.
Einige Beispiele:
<style type="text/css">
<!-p { font-family:"Comic Sans MS",Arial; text-align:center; }
body

{ border:thin dashed silver; background-color:black; }

DIV.SPEZIAL { BORDER:THICK DOUBLE RGB(0,64,128); }

blockquote[title="Zitat von Goethe"] { color:#000080; }
//-->
</style>

15.5 Maeinheiten, Farbangaben und Wertzuweisung

15.5.4

431

Numerische Angaben fr Sprachausgabe

Fr CSS-Eigenschaften der Sound-Kontrolle fr Sprachausgabe, die von den Browsern jedoch

bislang nicht untersttzt wird, werden die folgenden Maangaben aus dem Bereich der Akustik
und Zeitmessung verwendet:
Abkrzung

Bedeutung

deg

Kreisgrad, wobei der Kreis in 360 Grad aufgeteilt ist. Ein rechter Winkel hat z.B. 90deg.
Gradient, Maangabe fr Steigungen und Geflle.
Radiant, geometrische Maangabe.
Millisekunden, Maangabe fr Zeiteinheit.
Sekunden, Maangabe fr Zeiteinheit.
Hertz, Maangabe fr Frequenzen.
kiloHertz, Maangabe fr Frequenzen.

grad
rad
ms
s
Hz
kHz

433

16 CSS-Eigenschaften

16.1

Schriftformatierung

Allgemeines zur Schriftformatierung

Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgren, Schriftfarben, Schriftgewicht, Zeichen- und Wortabstnden usw. zu verstehen. Sinnvoll sind solche Angaben fr alle
HTML-Elemente, die Text enthalten knnen. Dazu gehren alle Elemente, die im Kapitel 5 Text
strukturieren beschrieben werden, aber auch beispielsweise Elemente fr Tabellen. Auch auf das
body-Element lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden in diesem Fall
gelten die Angaben fr alle Textelemente der HTML-Datei.

font-family (Schriftart)
Unter Schriftarten sind Schriftarten wie etwa Arial, Helvetica, Times Roman usw. zu verstehen.
Auch Schriftfamilien wie Sans Serif usw. gehren dazu.
Bei der hier beschriebenen Eigenschaft knnen Sie Schriftarten angeben, ohne sich darum zu
kmmern, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos. Eine Mglichkeit,
Schriftarten durch Angabe einer bestimmten Schriftarten-Datenquelle zu erzwingen, wird im
Abschnitt 16.2 Schriftformatierung mit Schriftartendatei beschrieben. Ein Beispiel:
<html><head><title>font-family</title>
<body bgcolor="#FFFFFF" text="#000000">
<p><span style="font-family:Times New Roman,Times,serif">
kleiner Beispieltext in Times New Roman</span><br>
<span style="font-family:Times New Roman,Times,serif;font-size:200%">
groer Beispieltext in Times New Roman</span></p>
<p><span style="font-family:Verdana">kleiner Beispieltext
in Verdana</span><br>
<span style="font-family:Verdana;font-size:200%">groer Beispieltext in
Verdana</span></p>
<!--usw.-->
</body></html>

434

Kapitel 16: CSS-Eigenschaften

16.1: Das Bild zeigt eine Reihe von Schriften, die unter Windows standardmig installiert sind.

Mit font-family: knnen Sie eine oder mehrere Schriftarten bestimmen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: Ist die erste angegebene
Schriftart verfgbar, wird diese verwendet. Ist sie nicht verfgbar, wird die zweite Schriftart verwendet, falls diese verfgbar ist, usw.
Trennen Sie mehrere Schriftartennamen durch Kommata. Das W3-Konsortium empfiehlt,
Schriftartnamen, die Leerzeichen enthalten, in Anfhrungszeichen zu setzen, also z.B. font-familiy:"Century Schoolbook",Times. Sie knnen dazu die doppelten oder die einfachen Anfhrungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften wie im obigen Beispiel
innerhalb eines style-Attributs im HTML-Quelltext vorkommen, drfen Sie nicht die gleichen
Anfhrungszeichen verwenden wie bei der HTML-Attributzuweisung. Im obigen Beispiel sehen
Sie, dass die Wertzuweisung an das style-Attribut wie in doppelten Anfhrungszeichen steht.
Innerhalb davon werden fr Times New Roman deshalb einfache Anfhrungszeichen verwendet, um Konflikte zu vermeiden.
Folgende generische Schriftfamilien sind fest vordefiniert diese Angaben knnen Sie also neben
Schriftartnamen benutzen:
serif = eine Schriftart mit Serifen,
sans-serif = eine Schriftart ohne Serifen,
cursive = eine Schriftart fr Schreibschrift,
fantasy = eine Schriftart fr ungewhnliche Schrift,
monospace = eine Schriftart mit dicktengleichen Zeichen.
Es empfiehlt sich, solche generischen Schriftarten als letzte Angabe einer Wertzuweisung an
font-family zu notieren wie im ersten der obigen Beispiele. Damit bieten Sie dem Browser

16.1 Schriftformatierung

435

die Chance, eine Schriftart auszuwhlen, die zumindest vom Typ her der gewnschten entspricht, falls die gewnschte nicht angezeigt werden kann.

font-style (Schriftstil)
Schriftstil bedeutet die Neigung der Schrift. Ein Beispiel:
<html><head><title>font-style</title>
<style type="text/css">
.kursiv { font-style:italic; }
.grosskursiv { font-style:italic; font-size:200%; }
</style>
<body bgcolor="#FFFFFF" text="#000000">
<p><span class="kursiv">
kleiner Beispieltext mit mit Schriftstil italic
</span><br>
<span class="grosskursiv">
gro&szlig;er Beispieltext mit mit Schriftstil italic
</span></p>
</body></html>

Mit font-style: knnen Sie den Schriftstil bestimmen. Folgende Angaben sind mglich:
italic = Schriftstil kursiv
oblique = Schriftstil kursiv
normal = normaler Schriftstil

font-variant (Schriftvariante)
Als besondere Schriftvariante stehen Kapitlchen (kleine Grobuchstaben) zur Verfgung. Ein
Beispiel:
<html><head><title>font-variant</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p><span style="font-variant:normal">kleiner Beispieltext
mit Schriftvariante normal</span><br>
<span style="font-variant:normal; font-size:200%">gro&szlig;er
Beispieltext mit Schriftvariante normal</span></p>
<p><span style="font-variant:small-caps">kleiner Beispieltext
mit Schriftvariante small-caps</span><br>
<span style="font-variant:small-caps; font-size:200%">gro&szlig;er
Beispieltext mit Schriftvariante scmall-caps</span></p>
</body></html>

436

Kapitel 16: CSS-Eigenschaften

16.2: Bei Kapitlchen verwendet der Browser durchgehend Grobuchstaben.

Mit font-variant: knnen Sie die Schriftvariante bestimmen. Folgende Angaben sind mglich:
small-caps = Kapitlchen
normal = normale Schriftvariante

font-size (Schriftgre)
Schriftgre ist die Darstellungsgre der Schrift. Ein Beispiel:
<html><head><title>font-size</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="font-size:6pt">Beispieltext mit Schriftgr&ouml;&szlig;e 6pt</span><br>
<!-- usw. -->
</p></body></html>

Mit font-size: knnen Sie die Schriftgre bestimmen. Erlaubt ist eine numerische Angabe.
Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich auf die Schriftgre des Elternelements. Alternativ zu numerischen Angaben sind auch folgende ungenaue Angaben mglich:
xx-small = winzig
x-small = sehr klein
small = klein
medium = mittel
large = gro
x-large = sehr gro
xx-large = riesig
smaller = sichtbar kleiner als normal
larger = sichtbar grer als normal
Beachten Sie: Sie knnen die Angabe zur Schriftgre mit der Angabe zur Zeilenhhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notieren
(Beispiel): p { font:12pt/14pt }. In dem Beispiel ist 12pt die Schriftgre und 14pt die Zeilen-

16.1 Schriftformatierung

437

hhe. Bei dieser Notationsweise bezeichnet die Zahl vor dem Schrgstrich stets die Schriftgre
und die Zahl hinter dem Schrgstrich stets die Zeilenhhe.

font-weight (Schriftgewicht)
Das Schriftgewicht bezeichnet die Dicke und Strke einer Schrift. Ein Beispiel:
<html><head><title>font-weight</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p><span style="font-weight:bold">
kleiner Beispieltext mit Schriftgewicht bold
</span><br>
<span style="font-weight:bold; font-size:200%">
gro&szlig;er Beispieltext mit Schriftgewicht bold
</span></p>
<!--usw.-->
<p><span style="font-weight:100">
kleiner Beispieltext mit Schriftgewicht 100
</span><br>
<span style="font-weight:100; font-size:200%">
gro&szlig;er Beispieltext mit Schriftgewicht 100
</span></p>
<!--usw.-->
</body></html>

16.3: Die Windows-Standardschrift Times Roman untersttzt nicht alle Schriftgewichte.

438

Kapitel 16: CSS-Eigenschaften

Mit font-weight: knnen Sie das Schriftgewicht bestimmen. Folgende Angaben sind mglich:
bold = fett
bolder = extra-fett
lighter = dnner
100,200,300,400,500,600,700,800,900 = extra-dnn (100) bis extra-fett (900)
normal = normales Schriftgewicht
Bei den numerischen Werten entspricht die Angabe 500 dem im DTP-Bereich blichen Begriff
medium, und die Angabe 700 entspricht dem Begriff bold.
Beachten Sie: Wohl kaum eine installierte Schriftart untersttzt alle erlaubten Angaben zum
Schriftgewicht.

font-stretch (Schriftlaufweite)
Die Schriftlaufweite gibt an, wie schmal oder breit eine Schrift erscheint. Ein Beispiel:
<html><head><title>font-stretch</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="font-stretch:wider">
kleiner Beispieltext mit Laufweite wider
</span><br>
<span style="font-stretch:wider; font-size:200%">
gro&szlig;er Beispieltext mit Laufweite wider
</span></p>
<p>
<span style="font-stretch:narrower">
kleiner Beispieltext mit Laufweite narrower
</span><br>
<span style="font-stretch:narrower; font-size:200%">
gro&szlig;er Beispieltext mit Laufweite narrower
</span></p>
<!--usw.-->
</body></html>

Mit font-stretch: knnen Sie die Laufweite der Schrift bestimmen. Folgende Angaben sind
mglich:
wider = weiter als normal
narrower = enger als normal
condensed = gedrngt
semi-condensed = halb gedrngt

16.1 Schriftformatierung

439

extra-condensed = stark gedrngt

ultra-condensed = extrastark gedrngt
expanded = geweitet
semi-expanded = halb geweitet
extra-expanded = stark geweitet
ultra-expanded = extrastark geweitet
normal = normale Laufweite
Beachten Sie: Diese Eigenschaft wird von den verbreiteten Browsern noch nicht interpretiert.

font (Schrift allgemein)

Diese Eigenschaft ist eine Zusammenfassung der folgenden fakultativen Einzelangaben: fontfamily, font-style, font-variant, font-size, font-weight, line-height. Ein Beispiel:
<html><head><title>font</title>
<style type="text/css">
#Text01 { font:bold 12pt Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 14pt Verdana; }
</style>
<body bgcolor="#FFFFFF" text="#000000">
<p id="Text01">Beispieltext mit Schrift: bold 12pt Times</p>
<p id="Text02">Beispieltext mit Schrift: italic 1cm Helvetica</p>
<p id="Text03">Beispieltext mit Schrift: small-caps 14pt Verdana</p>
</body></html>

16.4: Mit font: kombinieren Sie die verschiedenen Schriftangaben.

Mit font: knnen Sie verschiedene Schriftformatierungen mischen. Erlaubt sind die blichen
Wertangaben zu den erlaubten Eigenschaften, die in font: zusammengefasst sind. Die Reihenfolge der Angaben ist egal.

440

Kapitel 16: CSS-Eigenschaften

word-spacing (Wortabstand)
Mit dieser Eigenschaft knnen Sie den Abstand zwischen Wrtern im Text bestimmen. Ein
Beispiel:
<html><head><title>word-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="word-spacing:6pt">
Beispieltext mit Wortabstand 6pt
</span><br>
<span style="word-spacing:8pt">
Beispieltext mit Wortabstand 8pt
</span><br>
<!--usw.-->
</p>
</body></html>

16.5: Der Abstand zwischen den Wrter ist mit CSS-Angaben variabel.

Mit word-spacing: knnen Sie den Wortabstand bestimmen. Erlaubt ist eine numerische Angabe, jedoch keine Prozentangaben.
Beachten Sie: Diese Angabe wird noch nicht von allen Browsern interpretiert.

letter-spacing (Zeichenabstand)
Mit dieser Eigenschaft knnen Sie den Abstand zwischen den Buchstaben bzw. Zeichen im Text
bestimmen.

16.1 Schriftformatierung

441

Ein Beispiel:
<html><head><title>letter-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="letter-spacing:1pt">
Beispieltext mit Zeichenabstand 1pt
</span><br>
<span style="letter-spacing:2pt">
Beispieltext mit Zeichenabstand 2pt
</span><br>
<!--usw.-->
</p>
</body></html>

16.6: Den Abstand zwischen den einzelnen Buchstaben steuert letter-spacing:.

Mit letter-spacing: knnen Sie die Schriftgre bestimmen. Erlaubt ist eine numerische Angabe, jedoch keine Prozentangabe.
Beachten Sie: Diese Angabe wird von Netscape 4.x noch nicht interpretiert.

text-decoration (Textdekoration)
Mit dieser Eigenschaft knnen Sie zustzliche Textformatierungen wie unterstrichenen oder
durchgestrichenen Text erzwingen. Ein Beispiel:
<html><head><title>text-decoration</title>
<style type="text/css">
a:link { text-decoration:none; }
a:visited { text-decoration:line-through; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
Sie kennen sicher die
<a href="../../../index.htm">
Einstiegsseite zu SELFHTML

442

Kapitel 16: CSS-Eigenschaften

</a><br>
Aber kennen Sie auch die
<a href="../../../cgiperl/module/cpanmodule.htm">
CPAN-Module
</a>?<br>
Oder die
<a href="../../../diverses/sprachenkuerzel.htm">
Sprachenk&uuml;rzel
</a>?
</p>
</body>
</html>

16.7: Durchgestrichene oder blinkende Elemente sind mit CSS-Angaben kein Problem.

Mit text-decoration: knnen Sie die zustzliche Formatierung bestimmen. Folgende Angaben sind mglich:
underline = unterstrichen
overline = berstrichen
line-through = durchgestrichen
blink = blinkend
none = normal (keine Textdekoration)
Beachten Sie: Der MS Internet Explorer interpretiert die Angabe blink nicht. Netscape 4.x
interpretiert die Angabe overline noch nicht, Netscape 6.x jedoch schon.

text-transform (Texttransformation)
Mit dieser Eigenschaft knnen Sie in einem Textbereich Klein- oder Grobuchstaben oder
Kapitlchen erzwingen, unabhngig davon, wie die einzelnen Buchstaben tatschlich in der Datei
stehen. Ein Beispiel:
<html><head><title>text-transform</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="text-transform:capitalize">
kleiner Beispieltext mit Texttransformation capitalize
</span><br>

16.1 Schriftformatierung

443

<span style="text-transform:capitalize; font-size:200%">

gro&szlig;er Beispieltext mit Texttransformation capitalize
</span></p>
<!--usw.-->
</body>
</html>

16.8: Der Internet Explorer untersttzt auch in Version 6 die Angabe capitalize nicht.

Mit text-transform: knnen Sie die Transformation bestimmen. Folgende Angaben sind
mglich:
capitalize = Wortanfnge als Grobuchstaben
uppercase = nur Grobuchstaben
lowercase = nur Kleinbuchstaben
none = normal (keine Texttransformation)
Beachten Sie: Der MS Internet Explorer bis zur Version 6 interpretiert die Angabe capitalize
noch nicht.

color (Textfarbe)
Mit color: knnen Sie die Textfarbe bestimmen. Erlaubt sind CSS-blichen Farbangaben. Ein
Beispiel:
<html><head><title>color</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="color:blue">
kleiner Beispieltext mit Farbe <b>blue</b>
</span><br>

444

Kapitel 16: CSS-Eigenschaften

<span style="color:blue;font-size:200%">
gro&szlig;er Beispieltext mit Farbe <b>blue</b>
</span></p>
<!--usw.-->
</body></html>

text-shadow (Textschatten)
Mit text-shadow: knnen Sie einen Textschatten erzwingen. Erlaubt sind die CSS-blichen
Farbangaben oder der Wert none fr keinen Textschatten. Ein Beispiel:
<html><head><title>text-shadow</title>
<style type="text/css">
#rotschattig

{ text-shadow:black; font-size:36pt; color:red; }

#blauschattig { text-shadow:black; font-size:36pt; color:blue; }

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p id="rotschattig">
Gro&szlig;er roter Text mit schwarzem Schatten
</p>
<p id="blauschattig">
Gro&szlig;er blauer Text mit schwarzem Schatten
</p>
</body></html>

Beachten Sie: Dieser Befehl, der zur Version 2.0 der CSS Stylesheets gehrt, wird bislang von
keinem der verbreiteten Browser interpretiert.

16.2

Schriftformatierung mit Schriftartendatei

@font-face, src, font-family (Schriftformatierung mit Schriftartendatei)

Mit dieser Eigenschaft knnen Sie eine Schriftart definieren und dabei direkt die Datenressourcen der gewnschten Schriftarten ansprechen, also bestimmte Schriftartendateien, oder zumindest mit Hilfe spezieller Befehle die Charakteristika der gewnschten Schriftart exakt beschreiben. Beim Definieren der Schriftart vergeben Sie einen Namen fr die Schriftart. Unter diesem
Namen knnen Sie sie anschlieend mit der Eigenschaft font-family verwenden. Ein Beispiel:
<html><head><title>font-face</title>
<style type="text/css">
@font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }
</style>
</head>
<body>
<p style="font-family:Garamond">Text in Garamond</p>
</body></html>

16.2 Schriftformatierung mit Schriftartendatei

445

Mit @font-face starten Sie die Angabe einer exakten Schriftart in einem style-Bereich.
Dahinter folgen, in geschweiften Klammern, die Daten. Die beiden wichtigsten sind der Schriftartenname font-family und der URI der Schriftartendatei src:url(Datei).
Den Schriftartennamen vergeben Sie mit der Angabe font-family: innerhalb des @font-faceBereichs. Unter diesem Namen knnen Sie die Schriftart in HTML verwenden. Im obigen Beispiel gibt es einen Textabsatz, der mit Hilfe einer Stylesheet-Angabe die zuvor definierte Schriftart erzwingt.
Die Schriftartendatei, die Sie fr die zugehrigen font-family-Angaben bestimmen, geben Sie
mit src:url(Datei) an. Wenn sich die Schriftartendatei im gleichen Verzeichnis befindet wie
die HTML-Datei, gengt die Angabe des Dateinamens. Andernfalls mssen Sie die genaue Lage
der Schriftartendatei entweder durch eine relative Pfadangabe oder durch eine absolute Adressierung vom Typ http://... angeben.
Im obigen Beispiel sehen Sie, dass gleich zwei URI-Angaben notiert sind. Einmal wird eine eotDatei als Schriftartenquelle angegeben, einmal eine pfr-Datei. Beide Formate sind browserspezifisch: eot-Dateien sind Schriftartendateien, die der MS Internet Explorer (ab Version 4.0)
als Web-Schriftarten erkennt; pfr-Dateien sind Schriftartendateien, die Netscape (ab Version
4.0) erkennt. Wenn Sie Ihre gewnschte Schriftart in beiden Formaten anbieten knnen, knnen
Sie beide Formate so einbinden wie im obigen Beispiel.
Einzelheiten zu .eot- und .pfr-Schriftarten und wie Sie diese selbst erstellen knnen, finden Sie im
Kapitel 23.4 ber Internationalisierung im Abschnitt Downloadbare Schriftarten.

Schriftformate eingrenzen
Wenn Sie eine Schriftart mit einer Schriftartendatei definieren, knnen Sie bei der Definition
auch Angaben zu den mglichen Formateigenschaften der Schrift machen, wie z.B. zu Schriftstil
(font-style), Schriftvariante (font-variant), Schriftgre (font-size) oder Schriftgewicht
(font-weight). So knnen Sie dem WWW-Browser bereits in der HTML-Datei mitteilen, welche Formateigenschaften die Schriftartendatei untersttzt. Der Browser bertrgt die Schriftartendatei in diesem Fall nur dann zum Anwender, wenn Formatierungen in der HTML-Datei die
bertragung sinnvoll machen. Ein Beispiel:
<html><head><title>font-face</title>
<style type="text/css">
@font-face { font-family:Garamond; src:url(garamond.eot); fontsize:10pt,12pt,14pt; }
@font-face { font-family:Garamond; src:url(garamond.pfr); fontsize:10pt,12pt,14pt; }
</style>
</head><body>
<p style="font-family:Garamond; font-size:48pt">Text</p>
<!-- Datei wird nicht bertragen -->
</body></html>

Mit den dafr blichen Stylesheet-Befehlen knnen Sie bei der Definition einer Schriftart mit
Schriftartendatei einschrnkende Angaben zur Schrift machen. Folgende Besonderheiten sollten
Sie dabei beachten:

446

Kapitel 16: CSS-Eigenschaften

Bei font-style knnen Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese
Angaben durch Kommata, also beispielsweise: font-style:normal,italic;.
Bei font-variant knnen Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese
Angaben durch Kommata, also beispielsweise: font-style:normal,small-caps;.
Bei font-weight sind die Angaben bolder und lighter nicht zulssig. Auerdem knnen
Sie auch mehrere erlaubte Angaben machen. Trennen Sie diese Angaben durch Kommata,
also beispielsweise: font-weight:normal,bold,900;.
Bei font-size sind nur absolute Grenangaben erlaubt, wie etwa font-size:18pt. Relative Grenangaben wie Prozentangaben oder em-Angaben sind nicht erlaubt. Auerdem
knnen Sie auch mehrere Angaben machen. Trennen Sie diese Angaben durch Kommata, also
beispielsweise: font-size:12pt,14pt,16pt;.

unicode-range (Unicode-Bereich eingrenzen)

Wenn Sie eine Schriftart mit einer Schriftartendatei definieren, knnen Sie bei der Definition
den Zeichenbereich einschrnken. So knnen Sie dem WWW-Browser bereits in der HTMLDatei mitteilen, welchen Zeichenbereich die Schriftart untersttzt. Der Browser bertrgt die
Schriftartendatei in diesem Fall nur dann zum Anwender, wenn alle Zeichen eines Textes, der
mit der Schriftart formatiert wird, innerhalb des definierten Unicode-Bereichs liegen. Dabei gilt
das Unicode-System als Grundlage (siehe Anhang). Ein Beispiel:
<html><head><title>unicode-range</title>
<style type="text/css">
@font-face { font-family:System; src:url(system.eot); unicode-range:U+0000-007F; }
@font-face { font-family:System; src:url(system.pfr); unicode-range:U+0000-007F; }
</style>
</head>
<body>
<tt style="font-family:System">Text mit und </tt>
<!-- Datei wird nicht bertragen -->
</body>
</html>

Mit unicode-range: knnen Sie den Zeichenbereich der Schriftartendatei vor dem Download
bekannt machen. Im obigen Beispiel wird der Bereich U+0000-007F definiert. Das entspricht
dem ASCII-Zeichensatz. Wenn nun in einem Bereich, der diese Schriftart benutzt, beispielsweise
Umlaute oder andere Zeichen vorkommen, die nicht im ASCII-Zeichensatz vorkommen, wird
die Schriftartendatei nicht heruntergeladen.
Unicode-Angaben beginnen immer mit U+. Dahinter folgt eine Angabe des gewnschten Zeichenwerts in hexadezimaler Form. Um einen Bereich zu definieren, der aus mehreren UnicodeZeichen besteht, knnen Sie als Platzhalterzeichen (Wildcard) ein Fragezeichen ? benutzen. Bei
einer Angabe wie unicode-range:U+00?? bewirken die zwei hintereinander stehenden Fragezeichen am Ende der Angabe, dass der gewnschte Unicode-Bereich 16 hoch 2, also 256 Zeichen
ab dem Zeichen U+00 betrgt. Da laut Unicode-System bei U+0000 die Zeichen des so genannten
Western-Latin-1-Zeichensatzes beginnen, der aus 256 Zeichen besteht, deckt die Angabe in dem

16.2 Schriftformatierung mit Schriftartendatei

447

Beispiel genau diesen Zeichensatz ab. Wenn Sie einen beliebigen Unicode-Bereich bestimmen
mchten, knnen Sie dies mit einer Angabe tun wie z.B. U+AC00-D7FF.

Weitere Angaben zur Schriftquelle

Die Version 2.0 der CSS-Sprache stellt einige Stylesheet-Angaben bereit, um Schriftartenquellen
mglichst vielfltig definierbar und auffindbar zu machen. Ein Beispiel:
<style type="text/css">
@font-face { font-family:Kino; src:local(Kino MT), url(kino.ttf) format(TrueType);
}
@font-face { font-family:MeineArt; url(http://www.xy.de/cgi-bin/myfont.pl)
format(intellifont) }
@font-face { font-family:Alabama; url(alab.fon); panose-1: 2 4 5 2 5 4 5 9 3 3; }
</style>

Sie knnen bewirken, dass der WWW-Browser zuerst auf dem Rechner des Anwenders nach der
gewnschten Schriftart sucht und eine auf dem Server bereitliegende Schriftart nur dann herunterldt, wenn die Schriaftart lokal nicht verfgbar ist. Dazu notieren Sie bei der Quellenangabe
der Schriftartendatei (src:) zuerst local und dahinter in Klammern den gewnschten Schriftartennamen. Fr den Fall, dass der Browser diese Schriftart beim Anwender nicht findet, knnen
Sie, durch ein Komma getrennt, dahinter die Schriftartendatei angeben, die Sie auf Ihren
WWW-Seiten mit anbieten im Beispiel url(kino.ttf).
Sie knnen ferner Angaben zum Format der Schriftart machen. Der WWW-Browser ldt die
Schriftartendatei in diesem Fall nur, wenn sie auf dem Rechner des Anwenders ausfhrbar ist.
Dazu notieren Sie, durch ein Leerzeichen getrennt von den Angaben zu src:local() und/oder
src:url(), die Angabe format(). Innerhalb der Klammern knnen Sie das Format der Schriftartendatei angeben. Im obigen Beispiel wird eine TrueType-Schriftart angegeben. Dieses Schriftartenformat ist nur in der Windows-Welt verbreitet. Anwender, die z.B. einen Macintosh oder
einen Amiga-Rechner einsetzen, haben von einer solchen Datei nichts. Ein WWW-Browser, der
diese Angaben kennt, braucht also eine solche Datei nicht downzuloaden.
Es gibt weitere Mglichkeiten, die Schriftart genau einzugrenzen:

Mit

panose-1:, gefolgt von 10 durch Leerzeichen getrennten Zahlen, knnen Sie eine
Schriftart nach dem Panose-1-System bestimmen. Beispiel: panose-1: 2 4 5 2 5 4 5 9 3 3;

Mit stemv: und stemh: knnen Sie die vertikale und horizontale Stammbreite der Glyphen
angeben.
Mit units-per-em: knnen Sie die Anzahl der Einheiten pro em-Maeinheit angeben.
blich sind die Werte 250 (bei Intellifont), 1000 (bei Type-1) oder 2048 (bei TrueType).
Wenn Sie stemv: und/oder stemh: angeben, mssen Sie auch units-per-em: angeben.
Mit slope: knnen Sie den vertikalen Winkel der Glyphen angeben.
Mit cap-height: knnen Sie die Hhe der Grobuchstaben der Glyphen angeben.
Mit x-height: knnen Sie die Hhe der Kleinbuchstaben der Glyphen angeben.
Mit ascent: knnen Sie die maximale Hhe der akzentlosen Glyphen angeben.

448

Kapitel 16: CSS-Eigenschaften

Mit descent: knnen Sie die maximale Tiefe der akzentlosen Glyphen angeben.
Mit definition-src:url() knnen Sie eine Datei mit Schriftartendefinitionen angeben.
Mit definition-src:url() knnen Sie eine Datei mit Schriftartendefinitionen angeben.
Mit baseline: knnen Sie die untere Grundlinie der Glyphen angeben.
Mit centerline: knnen Sie die zentrale Grundlinie der Glyphen angeben.
Mit mathline: knnen Sie die mathematische Grundlinie der Glyphen angeben.
Mit topline: knnen Sie die obere Grundlinie der Glyphen angeben.

16.3

Ausrichtung und Absatzkontrolle

Allgemeines zu Ausrichtung und Absatzkontrolle

Fr Textblcke oder Textabstze gibt es absatztypische Eigenschaften. Abstze knnen beispielsweise links- oder rechtsbndig ausgerichtet sein. Bei Tabellenzellen oder anderen Elementen, die
eine berechnete oder definierte Hhe haben knnen und mehr Platz lassen, als der Text darin
einnimmt, wird hufig vertikale Ausrichtung oben, mittig oder untenbndig erforderlich.
Zu den typischen Eigenschaften der Absatzformatierung gehren ferner die Merkmale Einzug
und Zeilenhhe. Und schlielich auch noch die Angabe, wie der Flietext innerhalb des Absatzes
umgebrochen werden soll: ob gar nicht, automatisch, oder so, wie er im Editor eingegeben
wurde.

text-indent (Texteinrckung)
Sie knnen fr einen mehrzeiligen Flietext bestimmen, dass die erste Zeile eingerckt wird.
Dieses Gestaltungselement ist in Bchern und Zeitschriften sehr verbreitet. Mit text-indent:
knnen Sie eine Einrckung fr die erste Zeile bestimmen. Erlaubt ist eine numerische Angabe.
Ein Beispiel:
<html><head><title>text-indent</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p style="text-indent:0.5cm;">Dieser Textabsatz hat eine Texteinr&uuml;ckung von
0.5cm. Texteinr&uuml;ckungen dieser Art sind an die &Auml;sthetik von B&uuml;chern
oder Zeitungen angelehnt, wo h&auml;ufig mit dieser Formatierung gearbeitet wird.
Damit das auch wirklich sichtbar wird, enth&auml;lt dieser Textabsatz
schlie&szlig;lich noch diesen &uuml;berfl&uuml;ssigen Satz, der sich aber
hoffentlich wenigstens fl&uuml;ssig liest.</p>
<!--usw.-->
</body></html>

16.3 Ausrichtung und Absatzkontrolle

449

16.9: Verschiedene Formen, einen Absatz mit text-indent: einzurcken.

Beachten Sie: Mit einem negativen Wert fr text-indent bewirken Sie eine Textausrckung in
der ersten Flietextzeile.

line-height (Zeilenhhe)
Sie knnen fr Elemente mit viel Flietext die Zeilenhhe bestimmen. Diese Angabe ist vor allem
in Verbindung mit einer Angabe zur Schriftgre interessant. Ein Beispiel:
<html><head><title>line-height</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p style="line-height:10.5pt;font-size:9pt;margin-left:20%;margin-right:20%">
Die Zeilenh&ouml;he ist ein altbekanntes DTP-Feature zur Formatierung von
Abs&auml;tzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in der
typografischen Wirkung von Text hilfreich. ... </p>
</body></html>

Mit line-height: knnen Sie die Zeilenhhe bestimmen. Erlaubt ist eine numerische Angabe.
Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich dabei auf die Schriftgre des
Elements, fr das die Zeilenhhe bestimmt wird.

450

Kapitel 16: CSS-Eigenschaften

16.10: Drei Abstze mit unterschiedlicher Zeilenhhe, aber identischer Schrift.

Beachten Sie: Bei erzwungener Zeilenhhe ist es mglich, dass ein Browser dieser Angabe den
Vorrang einrumt und Elemente abschneidet, die hher sind, beispielsweise eine im Flietext
referenzierte Grafik.

vertical-align (vertikale Ausrichtung)

Sie knnen nebeneinander stehende Elemente mit unterschiedlicher Hhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgre innerhalb
einer Zeile, im Verhltnis zueinander ausrichten. Ein Beispiel:
<html><head><title>vertical-align</title>
<style type="text/css">
.oben

{ vertical-align:top; background-color:#CCCCCC; }

.mittig

{ vertical-align:middle; background-color:#DDDDDD; }

.unten

{ vertical-align:bottom; background-color:#EEEEEE; }

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<table border="1"><tr>
<td height="200" class="oben"><b>Text oben</b></td>
<td height="200" class="mittig"><b>Text mittig</b></td>

16.3 Ausrichtung und Absatzkontrolle

451

<td height="200" class="unten"><b>Text unten</b></td>

</tr></table>
</body></html>

16.11: Der Text in den drei Tabellenzellen ist unterschiedlich ausgerichtet.

Mit vertical align: knnen Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind
mglich:
top = obenbndig ausrichten
middle = mittig ausrichten
bottom = untenbndig ausrichten
baseline = an der Basislinie ausrichten (oder untenbndig, wenn es keine Basislinie gibt)
sub = tieferstellen (ohne die Schriftgre zu reduzieren)
super = hherstellen (ohne die Schriftgre zu reduzieren)
text-top = am oberen Schriftrand ausrichten
text-bottom = am unteren Schriftrand ausrichten
Bei Flietext ist auch eine prozentuale Angabe mglich. Die Ausrichtung orientiert sich dann an
der elementeigenen Zeilenhhe. Das folgende Bild veranschaulicht das Modell der vertikalen
Ausrichtung:

16.12: So wirken sich die verschiedenen text-align-Angaben aus.

452

Kapitel 16: CSS-Eigenschaften

Die grauen Ksten stellen Kindelemente des groen Kastens dar, die frei stehenden schwarzen
Texte stellen Zeicheninhalte des groen Kastens dar.

text-align (horizontale Ausrichtung)

Sie knnen Textabstze mit text-align: und andere Blockelemente mit Flietext, z.B. Tabellenzellen, ausrichten. Ein Beispiel:
<html><head><title>text-align</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p style="text-align:left; margin-left:1.4cm; margin-right:1.4cm">Der Absatz, den
Sie gerade lesen, wurde mit <b>text-align</b> linksb&uuml;ndig ausgerichtet. Ferner
wurde ein Rand von 1.4cm eingestellt, just for fun oder auch, damit Sie sehen, wie
die einzelnen Stylesheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>
<!--usw.-->
</body></html>

16.13: Einige Abstze mit unterschiedlicher horizontaler Ausrichtung

16.3 Ausrichtung und Absatzkontrolle

453

Folgende Angaben sind mglich:

left = linksbndig ausrichten (Voreinstellung)
center = zentriert ausrichten
right = rechtsbndig ausrichten
justify = als Blocksatz ausrichten
Beachten Sie: Eine ehemals eingefhrte CSS-Eigenschaft namens alignment ist mittlerweile aus
dem CSS-Standard verschwunden. Verwenden Sie nur noch text-align.

white-space (Textumbruch)
Sie knnen festlegen, wie der Zeilenumbruch innerhalb von Elementen mit Text erfolgen soll.
Ein Beispiel:
<html><head><title>white-space</title>
<style type="text/css">
#editor

{ white-space:pre; }

#langezeile

{ white-space:nowrap; }

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p id="editor">
Der Absatz, den Sie gerade lesen,
wurde mit CSS als predefiniert definiert.
Zeilenumbr&uuml;che sollten dabei so interpretiert
werden, wie sie im Editor eingegeben wurden.</p>
<p id="langezeile">Der Absatz, den Sie gerade lesen, darf nicht umgebrochen werden.
Es sollte kein automatischer Zeilenumbruch erfolgen. Bei diesem l&auml;ngeren Text
m&uuml;ssen Sie vermutlich quer scrollen, um alles zu lesen.</p>
</body></html>

16.14: Der obere Absatz ist als prformatiert deklariert, der untere als Bereich ohne
Zeilenumbruch.

454

Kapitel 16: CSS-Eigenschaften

Mit white-space: knnen Sie das Verhalten fr den Zeilenumbruch festlegen. Folgende Angaben sind mglich:
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags auer <pre> und
<nowrap>)
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>)
nowrap = Kein automatischer Zeilenumbruch, Umbruch mglich durch entsprechende
HTML-Tags
Beachten Sie: Diese Angabe gehrt zur CSS-Version 2.0. Der MS Internet Explorer interpretiert
nur den Wert nowrap, nicht den Wert pre. Netscape 4.x interpretiert den Wert pre, nicht aber
nowrap. Erst Netscape 6.x beherrscht alle Angaben.

16.4

Auenrand und Abstand

Allgemeines zu Auenrand und Abstand

Auenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element
und seinem Elternelement oder Nachbarelement. Fr ein p-Element, also einen Textabsatz etwa,
der direkt innerhalb des body-Elements notiert ist, markieren Angaben zu linkem und rechten
Auenrand seinen Abstand zu den Elementgrenzen des body-Elements. Wenn mehrere solcher
p-Abstze aufeinander folgen, markieren Angaben zum Aurand oben und unten den Abstand
zwischen den Abstzen. Das folgende Bild veranschaulicht die Mglichkeiten, Auenrnder und
Abstnde zu definieren:

16.15: Das Schema zeigt die verschiedenen Abstnde zwischen Elementen.

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften fr alle HTML-Elemente, die einen
eigenen Absatz erzeugen bzw. einen Block bilden, also etwa fr h[1-6], p, blockquote,
address oder pre. Blockelemente sind aber auch HTML-Elemente wie div, table, tr, th und
td. Auch auf body lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden in diesem
Fall werden Rnder fr den gesamten sichtbaren Krper der HTML-Datei definiert.
Mit negativen Werten, also Angaben wie beispielsweise -18mm, knnen Sie fr besondere gestalterische Zwecke erreichen, dass sich Elemente berlappen.

16.4 Auenrand und Abstand

455

margin-top (Auenrand/Abstand oben)

Sie knnen bestimmen, wie viel Abstand ein Element zu seinem Vorgngerelement oder zu
seinem Elternelement nach oben hin hat. Ein Beispiel:
<html><head><title>margin-top</title>
<style type="text/css">
h1,h2,h3 { margin-top:2.5cm; }
div.beispiel { margin-top:100px; margin-left:200px; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>&Uuml;berschrift erster Ordnung</h1>
<div class="beispiel">
Bereich mit der Beispiel-Klasse.
<h1>&Uuml;berschrift erster Ordnung</h1>
</div>
</body></html>

16.16: Verschiedene Elemente mit individuellen Abstnden.

Mit margin-top: knnen Sie den Rand/Abstand oben bestimmen. Erlaubt ist eine numerische
Angabe. Im obigen Beispiel wird fr berschriften 1., 2. und 3. Ordnung ein vorausgehender
Abstand von 2.5 cm definiert. Ferner wird eine Klasse beispiel fr das div-Element definiert.

456

Kapitel 16: CSS-Eigenschaften

Solche Bereiche haben laut Definition im Beispiel 100 Pixel Abstand zu ihrem vorausgehenden
Element (und 200 Pixel Abstand nach links, definiert mit margin-left).
Wenn das Vorgnger- oder Elternelement eine Angabe zu margin-bottom hat, gilt nur eine der
beiden Angaben fr den Gesamtabstand zwischen den beiden Elementen, und zwar diejenige, die
den grten Abstand definiert. Wenn also ein erster Textabsatz margin-bottom:10px hat und
ein folgender Textabsatz margin-top:15px, dann wird der Abstand zwischen beiden Abstzen
auf 15px berechnet. Wenn eine der beiden Gegenangaben negativ ist, wird der tatschliche Abstand zwischen den beiden Elementen aus dem Wert der positiven abzglich der negativen Angabe berechnet.
Beachten Sie: Bei Verwendung im body-Element bestimmt margin-top: den Abstand zum oberen Fensterrand. Einige frhe Netscape 4.x-Versionen beherrschen das Zusammenrechnen von
Abstandsangaben oben und unten noch nicht und addieren beide Werte.

margin-bottom (Auenrand/Abstand unten)

Sie knnen bestimmen, wie viel Abstand ein Element zu seinem Nachfolgerelement nach unten
hin hat oder, wenn es das letzte Kindelement eines Elements ist wie viel Abstand es zu dessen
unterem Rand hin hat. Ein Beispiel:
<html><head><title>margin-bottom</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p style="margin-bottom:2cm">Dieser Textabsatz hat einen
Abstand von 2cm zum darauffolgenden.</p>
<p style="margin-bottom:18pt">Dieser Textabsatz hat einen
Abstand von 18pt zum darauffolgenden.</p>
<p style="margin-bottom:1in">Dieser Textabsatz hat einen
Abstand von 1in zum darauffolgenden.</p>
<p>Dieser Textabsatz dient nur noch zu Vergleichszwecken und hat keinen
definierten Nachabstand.</p>
</body></html>

Mit margin-bottom: knnen Sie den Rand/Abstand unten stimmen. Erlaubt ist eine
numerische Angabe. Fr Hinweise zu addierenden Angaben fr margin-bottom und margintop bei aufeinander folgenden Elementen siehe margin-top.
Beachten Sie: Bei Verwendung im body-Element bestimmt margin-bottom: den Abstand zum
unteren Fensterrand. Bei Netscape 4.x hat die Angabe margin-top (fr den Abstand oben) in
jedem Fall Vorrang vor der Angabe margin-bottom (fr den Abstand unten), weshalb dort das
intelligente Addieren zwischen Angaben zu beiden Eigenschaften nicht so funktioniert, wie es
sollte.

16.4 Auenrand und Abstand

457

16.17: Mehrere Abstze mit unterschiedlichen Abstnden nach unten.

margin-left (Auenrand/Abstand links)

Sie knnen den linken Abstand/Rand eines Elements festlegen. Wenn das Element einen linken
Nachbarn hat (etwa bei zwei nebeneinander liegenden Grafiken die zweite der beiden), dann
bedeutet die Angabe den Abstand zum links davon liegenden Element. Wenn das Element keinen linken Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand
relativ zum Elternelement (z.B. zum Seitenrand, der fr das body-Element festgelegt ist). Wenn
kein bergeordnetes Elternelement mehr da ist (also beim body-Tag selbst), dann bedeutet die
Angabe den linken Abstand des Dokumentinhalts zum Anzeigefenster. Ein Beispiel:
<html><head><title>margin-left</title>
<style type="text/css">
body { margin-left:100px; }
p,div,table,ul,ol { margin-left:30px; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Eine &Uuml;berschrift erster Ordnung</h1>
<p>Ein Textabsatz, nochmals weiter eingezogen.</p>
<p>Noch einer davon.</p>
<h2>Eine &Uuml;berschrift zweiter Ordnung</h2>
<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>
</body></html>

Mit margin-left: knnen Sie den Rand/Abstand links bestimmen. Erlaubt ist eine numerische
Angabe. Im obigen Beispiel wird zunchst ein globaler linker Seitenrand von 100 Pixeln definiert, indem diese Angabe dem body-Element zugewiesen wird. Fr Flietextabstze, Bereiche,

458

Kapitel 16: CSS-Eigenschaften

Tabellen, und Listen wird zustzlich ein linker Rand von 30 Pixeln definiert, sodass sich bei
diesen Elementen insgesamt ein linker Rand von 135 Pixeln zum linken Fensterrand ergibt.
berschriften etwa, fr die nichts weiter festgelegt ist, erscheinen dann links ausgerckt. Bei
Nachbarelementen oder verschachtelten Elementen, bei denen Angaben zu margin-left und
margin-bottom aufeinander treffen, werden beide Angaben in jedem Fall addiert.
Beachten Sie: Wenn Sie beispielsweise zwei Grafiken nebeneinander referenzieren und dabei mit
Werten fr margin-left oder margin-right arbeiten, reagiert Netscape 4.x zum Teil sehr
unterschiedlich und nicht besonders nachvollziehbar.

margin-right (Auenrand/Abstand rechts)

Sie knnen den rechten Abstand/Rand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinander liegenden Grafiken die erste der beiden), dann
bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element
keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den
Rand relativ zum Elternelement (z.B. zum Seitenrand, der fr das body-Element festgelegt ist.).
Wenn kein bergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bezieht sich die Angabe auf den rechten Abstand des Dokumentinhalts zum Anzeigefenster. Mit
margin-right: knnen Sie den Rand/Abstand rechts bestimmen. Erlaubt ist eine numerische
Angabe. Ein Beispiel:
<html><head><title>margin-right</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p align="right" style="margin-right:1cm">Dieser rechtsb&uuml;ndig ausgerichtete
Textabsatz hat einen Abstand von 1cm zum rechten Rand.</p>
<p align="right" style="margin-right:1.3cm">Dieser rechtsb&uuml;ndig ausgerichtete
Textabsatz hat einen Abstand von 1.3cm zum rechten Rand.</p>
<!--usw.-->
</body></html>

16.18: Abstze mit ansteigendem Abstand zum rechten Rand.

16.4 Auenrand und Abstand

459

Beachten Sie: Netscape 4.x ignoriert margin-right.

margin (Auenrand/Abstand allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben: margin-top,
margin-bottom, margin-left, margin-right. Ein Beispiel:
<html><head><title>margin</title>
<style type="text/css">
.typA { margin: 1cm 2cm;
background-color:#FFFF99; }
.typB { margin: 1cm 2cm 3cm;
background-color:#99FFFF; }
.typC { margin: 1cm 2cm 3cm 4cm;
background-color:#FF99FF; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<div class="typA"><h1>typA mit 1cm margin</h1></div>
<hr noshade="1">
<div class="typB"><h1>typB mit 2cm margin</h1></div>
<hr noshade="1">
<div class="typC"><h1>typC mit 3cm margin</h1></div>
</body></html>

16.19: Abstze mit einer Kombination aus verschiedenen Randabstnden.

460

Kapitel 16: CSS-Eigenschaften

Mit margin: knnen Sie einen einheitlichen Rand/Abstand fr oben, unten, links und rechts
bestimmen. Erlaubt sind ein bis vier numerische Angaben. Eine Angabe bedeutet: Alle vier Rnder des Elements erhalten den gleichen Auenabstand.
Bei mehreren Angaben werden die Angaben intern nach der angenommenen Reihenfolge fr
1=oben, 2=rechts, 3=unten, 4=links interpretiert.
Zwei Angaben: Die erste Angabe bedeutet den Abstand fr oben und unten, die zweite Zahl
den Abstand fr rechts und links.
Drei Angaben: Die erste Angabe bedeutet den Abstand fr oben, die zweite den Abstand fr
rechts und links und die dritte den Abstand fr unten.
Vier Angaben: Die erste Angabe bedeutet den Abstand fr oben, die zweite den Abstand fr
rechts, die dritte den Abstand fr unten und die vierte den Abstand fr links.

16.5

Innenabstand

Allgemeines zum Innenabstand

Innenabstand bedeutet: erzwungener Leerraum zwischen dem Inhalt eines Elements zu seinem
eigenen Elementrand, also z.B. zwischen dem Text eines Elements und dem Rand dieses Elements. Das folgende Bild zeigt, wie Innenabstnde zu verstehen sind (die blauen Pfeile stehen fr
definierte Innenabstnde):

16.20: Das Schema zeigt die verschiedenen Innenabstnde um ein Element.

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften fr alle HTML-Elemente, die einen
eigenen Absatz erzeugen bzw. einen Block bilden, also etwa fr h[1-6], p, blockquote, div,
address oder pre. Sinnvoll sind die Angaben zum Innenabstand ferner, wenn Sie auerdem
CSS-Eigenschaften fr Rahmen (Kapitel 16.6) oder fr Farben oder Grafiken zum Hintergrund
eines Elements (Kapitel 16.7) notieren. Denn erst dann werden die Abstnde zwischen Elementgrenze und Elementinhalt richtig sichtbar. Besonders sinnvoll sind die hier beschriebenen
Eigenschaften daher auch fr HTML-Tabellenelemente, sofern die Tabelle sichtbare Gitternetzlinien hat.

16.5 Innenabstand

461

padding-top (Innenabstand oben)

Mit padding-top: knnen Sie den Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist eine numerische
Angabe. Ein Beispiel:
<html><head><title>padding-top</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p style="padding-top:3cm; border:thin solid black;">Textabsatz mit sichtbarem
Rahmen und
mit Innenabstand 3cm oben</p>
</body></html>

16.21: Ein Absatz mit 3 cm Abstand zwischen Inhalt und oberem Rand.

padding-bottom (Innenabstand unten)

Mit padding-bottom: knnen Sie den Zwischenraum zwischen Elementinhalt und unterer
Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist eine numerische
Angabe. Ein Beispiel:
<html><head><title>padding-bottom</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="padding-bottom:2cm; border:thin solid red;">div-Bereich mit sichtbarem
roten Rahmen und Innenabstand 2cm unten. Das ist in diesem Fall der Abstand
zwischen dem unteren Rahmen des Textabsatzes und dem unteren Rahmen des divBereichs.
<p style="padding-bottom:3cm; border:thin solid black;">Textabsatz mit sichtbarem
Rahmen und mit Innenabstand 3cm unten</p>
</div>
</body></html>

462

Kapitel 16: CSS-Eigenschaften

padding-left (Innenabstand links)

Mit padding-left: knnen Sie den Zwischenraum zwischen Elementinhalt und linker Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist eine numerische
Angabe. Ein Beispiel:
<html><head><title>padding-left</title>
<style type="text/css">
#p1 { padding-left: 100px; background-color:#FFFF99; font-size:14pt; }
#p2 { padding-left: 200px; background-color:#FFFF99; font-size:14pt; }
#p3 { padding-left: 300px; background-color:#FFFF99; font-size:14pt; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p id="p1">der erste Absatz p1</p>
<p id="p2">der zweite Absatz p2</p>
<p id="p3">der dritte Absatz p3</p>
</body></html>

padding-right (Innenabstand rechts)

Mit padding-right: knnen Sie den Zwischenraum zwischen Elementinhalt und rechter Elementgrenze (sichtbar bei Rahmen, Farben usw.) bestimmen. Erlaubt ist eine numerische
Angabe. Ein Beispiel:
<html><head><title>padding-right</title>
<style type="text/css">
#d1 { padding-right: 50px; background-color:#FFFF99; font-size:14pt; }
#d2 { padding-right: 100px; background-color:#99FFFF; font-size:14pt; }
#d3 { padding-right: 150px; background-color:#FF99FF; font-size:14pt; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<div id="d1">der erste Bereich d1
<div id="d2">der zweite Bereich d2
<div id="d3">der dritte Bereich d3
</div></div></div>
</body></html>

padding (Innenabstand allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden fakultativen Einzelangaben: paddingtop, padding-bottom, padding-left, padding-right. Ein Beispiel:
<html><head><title>padding</title>
</head><body bgcolor="#FFFFFF" text="#000000">

16.6 Rahmen

463

<p style="border:2cm solid #DDFFCC; padding:50px; font-size:18pt">Textabsatz mit

dickem Rahmen rundherum mit mit Innenabstand 50px</p>
</body></html>

16.22: padding: fasst verschiedene Angaben zum Innenabstand zusammen.

Mit padding: bestimmen Sie einen einheitlichen Innenabstand zwischen Elementinhalt und den
vier Elementgrenzen oben, links, unten und rechts. Erlaubt ist eine numerische Angabe.

16.6

Rahmen

Allgemeines zu Rahmen
Sinnvoll sind die hier beschriebenen Angaben besonders fr HTML-Elemente, die einen eigenen
Absatz erzeugen bzw. einen Block bilden, also etwa fr h[1-6], p, blockquote, address oder
pre. Blockelemente sind aber auch div, table, tr, th und td. So ist es beispielsweise mglich,
in HTML eine blinde Tabelle (Kapitel 8.6) zu notieren, in der aber doch einzelne Zellen einen
Rahmen nach Wunsch erhalten nmlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf
body lassen sich die hier aufgelisteten Eigenschaften anwenden in diesem Fall wird um den
gesamten sichtbaren Krper einer HTML-Datei ein Rahmen gezeichnet.
Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von
Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck knnen Sie
Innenabstnde (Kapitel 16.5) definieren. Dadurch schaffen Sie einen Abstand zwischen dem
Rahmen und seinem Inhalt.
In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur
eine Rahmendicke anzugeben, sondern auch die gewnschte Rahmenfarbe. Auch verschiedene

464

Kapitel 16: CSS-Eigenschaften

Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften knnen Sie wahlweise auf alle vier
Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.
Beachten Sie: Bei Rahmen macht sich das Blockelement-Modell von Netscape 4.x sehr negativ
bemerkbar. Dieser Browser dehnt Blockelemente in der Breite nur auf die Breite seines Inhalts,
sofern dieser weniger Raum einnimmt als die zur Verfgung stehende Gesamtbreite. Nur mit
unschner Trickserei lsst sich Netscape 4.x dazu berlisten, ein Blockelement auf die durch das
Anzeigefenster, den Dokumentrand oder das Elternelement zur Verfgung gestellte Breite auszudehnen. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen
arbeiten, z.B. mit Angaben wie width:100% oder width:500px. Ein anderer, noch effektiverer
Trick, der den 4er-Netscape das Element tatschlich auf die volle zur Verfgung stehende Breite
ziehen lsst, ist die Angabe margin:0px.

boder[-top, -left, -right, -bottom]-width (Rahmendicke)

Sie knnen fr ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese
Angabe zumindest mit einer zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer
zur Rahmenfarbe. Ein Beispiel:
<html><head><title>border-width</title>
<style type="text/css">
#links {
border-left-width:1cm;
border-left-style:solid;
border-color:red;
padding-left:1cm;
text-align:justify; }
#linksrechts {
border-left-width:1cm;
border-left-style:solid;
border-left-color:red;
padding-left:1cm;
border-right-width:1cm;
border-right-style:solid;
border-right-color:green;
padding-right:1cm;
text-align:justify; }
#rundrum {
border-width:1px;
border-style:solid;
border-color:blue;
padding:1cm;
text-align:justify; }
}
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p id="links">xxxxx xxxxx xxxxx usw.</p>

16.6 Rahmen

465

<p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>

<p id="rundrum">xxxxx xxxxx xxxxx usw.</p>
</body></html>

16.23: Verschiedene Rahmenstrken auf einzelnen Seiten von Abstzen.

Mit border-width: knnen Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist
eine numerische Angabe fr die Rahmendicke oder einer der folgenden Werte: thin = dnn,
medium = mittelstark, thick = dick.
Um fr einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es
zwei Mglichkeiten. Die eine ist, bei border-width mehrere Angaben zu notieren und diese
durch Leerzeichen zu trennen, zum Beispiel: border-width:5px 5px; Dabei gelten folgende
Regeln:
Zwei Angaben: Die erste Angabe bedeutet die Rahmendicke fr oben und unten, die zweite
Angabe die Rahmendicke fr rechts und links.
Drei Angaben: Die erste Angabe bedeutet die Rahmendicke fr oben, die zweite die Rahmendicke fr rechts und links und die dritte die Rahmendicke fr unten.
Vier Angaben: Die erste Angabe bedeutet die Rahmendicke fr oben, die zweite die Rahmendicke fr rechts, die dritte die Rahmendicke fr unten und die vierte die Rahmendicke fr
links.
Die zweite Mglichkeit besteht darin, die Untereigenschaften von border-width zu verwenden:
border-top-width definiert die Rahmendicke fr oben,
border-left-width die Rahmendicke fr links,

466

Kapitel 16: CSS-Eigenschaften

border-right-width die Rahmendicke fr rechts,

border-bottom-width die Rahmendicke fr unten.
Beachten Sie: Der MS Internet Explorer interpretiert die Angabe border-width nur, wenn
auerdem der Rahmentyp (border-style) angegeben wird, also etwa:
<p style="border-style:solid; border-width:thin">

border[-top, -left, -right, -bottom]-color (Rahmenfarbe)

Sie knnen fr ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer
zum Rahmentyp und/oder einer zur Rahmendicke kombinieren. Ein Beispiel:
<html><head><title>border-color</title>
</head><body bgcolor="#000000" text="#E0E0E0">
<p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px">
xxxxx xxxxx xxxxx usw.</p>
<p style="border-top-color:#FF00FF; border-left-color:#00FF00;
border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px;
border-style:solid; padding:8px">
xxxxx xxxxx xxxxx usw.</p>
<p style="border-color:cyan yellow; border-width:8px; border-style:solid;
padding:16px">
xxxxx xxxxx xxxxx usw.</p>
</body></html>

Mit border-color: knnen Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder
der Wert transparent (durchsichtiger Rahmen, interessant bei sich berlappenden Elementen,
wie z.B. durch Positionierung wie in Kapitel 16.11 beschrieben).
Um fr einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es
zwei Mglichkeiten. Die eine ist, bei border-color mehrere Angaben zu notieren und diese
durch Leerzeichen zu trennen, zum Beispiel: border-color:#FFFF00 red; Dabei gelten folgende Regeln:
Zwei Angaben: Die erste Angabe bedeutet die Rahmenfarbe fr oben und unten, die zweite
Angabe die Rahmenfarbe fr rechts und links.
Drei Angaben: Die erste Angabe bedeutet die Rahmenfarbe fr oben, die zweite die Rahmenfarbe fr rechts und links und die dritte die Rahmenfarbe fr unten.
Vier Angaben: Die erste Angabe bedeutet die Rahmenfarbe fr oben, die zweite die Rahmenfarbe fr rechts, die dritte die Rahmenfarbe fr unten und die vierte die Rahmenfarbe fr
links.
Die zweite Mglichkeit besteht darin, die Untereigenschaften von border-color zu verwenden:
border-top-color definiert die Rahmenfarbe fr oben,
border-left-color die Rahmenfarbe fr links,

16.6 Rahmen

467

border-right-color die Rahmenfarbe fr rechts und

border-bottom-color die Rahmenfarbe fr unten.
Die Untereigenschaften von border-color stehen im Gegensatz zu den Untereigenschaften von
border-width jedoch erst seit CSS 2.0 zur Verfgung und werden von lteren Browsern ignoriert.
Beachten Sie: Der MS Internet Explorer interpretiert die Angabe border-width nur, wenn
auerdem der Rahmentyp (border-style) angegeben wird, also etwa: <p style="borderstyle:solid; border-color:red">.
Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert
teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lsst ihn bse straucheln.

border[-top, -left, -right, -bottom]-style (Rahmentyp)

Mit dem Rahmentyp knnen Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur
Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur
Rahmenfarbe. Ein Beispiel:
<html><head><title>border-style</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p style="border-width:medium; border-color:#FF9999;
border-style:dotted; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dotted.</p>
<p style="border-width:medium; border-color:#9999FF;
border-style:dashed; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ dashed.</p>
<p style="border-width:medium; border-color:#66CC66;
border-style:solid; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ solid.</p>
<p style="border-width:medium; border-color:#FF9999;
border-style:double; padding:5px;">
Textabsatz mit Rahmendicke medium und Typ double.</p>
<p style="border-width:12px; border-color:#9999FF;
border-style:groove; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ groove.</p>
<p style="border-width:12px; border-color:#66CC66;
border-style:ridge; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ ridge.</p>
<p style="border-width:12px; border-color:#FF9999;
border-style:inset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ inset.</p>
<p style="border-width:12px; border-color:#9999FF;
border-style:outset; padding:5px;">
Textabsatz mit Rahmendicke 12px und Typ outset.</p>
</body></html>

468

Kapitel 16: CSS-Eigenschaften

16.24: Mit CSS lsst sich eine groe Vielfalt an Rahmentypen erzeugen.

Mit border-style: knnen Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben:
CSS-Angabe

Wirkung

none

kein Rahmen (bzw. unsichtbarer Rahmen)

kein Rahmen (bzw. unsichtbarer Rahmen)
gepunktet
gestrichelt
durchgezogen
doppelt durchgezogen
3-D-Effekt
3-D-Effekt
3-D-Effekt
3-D-Effekt

hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Um fr einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es

zwei Mglichkeiten. Die eine ist, bei border-style mehrere Angaben zu notieren und diese
durch Leerzeichen zu trennen, zum Beispiel: border-style:solid double; dabei gelten folgende Regeln:

16.6 Rahmen

469

Zwei Angaben: Die erste Angabe bedeutet den Rahmentyp fr oben und unten, die zweite
Angabe den Rahmentyp fr rechts und links.
Drei Angaben: Die erste Angabe bedeutet den Rahmentyp fr oben, die zweite den Rahmentyp fr rechts und links und die dritte den Rahmentyp fr unten.
Vier Angaben: Die erste Angabe bedeutet den Rahmentyp fr oben, die zweite den Rahmentyp fr rechts, die dritte den Rahmentyp fr unten und die vierte den Rahmentyp fr links.
Die zweite Mglichkeit besteht darin, die Untereigenschaften von border-style zu verwenden:
border-top-style definiert den Rahmentyp fr oben,
border-left-style den Rahmentyp fr links,
border-right-style den Rahmentyp fr rechts und
border-bottom-style den Rahmentyp fr unten.
Die Untereigenschaften von border-style stehen im Gegensatz zu den Untereigenschaften von
border-width jedoch erst seit CSS 2.0 zur Verfgung und werden von lteren Browsern ignoriert.
Beachten Sie: Die Angabe hidden ist vor allem fr benachbarte Tabellenzellen gedacht. Whrend die Angabe none nur den Rahmen des Elements unterdrckt, fr das sie gilt, bewirkt
hidden, dass auch Rahmen von Nachbarelementen unterdrckt werden, sofern diese Rahmen
besitzen. Voraussetzung dafr ist allerdings, dass fr das zugehrige table-Element die folgende
CSS-Sondereigenschaft notiert ist:
border-collapse:collapse

Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln fr Tabellen erlaubt. Beim Wert collapse fallen alle Rahmen der Zellen sauber bereinander, d.h., eine Zelle mit rechtem Rand von
1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen
Rahmen von 1px. Der gegenteilige mgliche Wert, der allerdings auch der Voreinstellung entspricht, lautet separate. Damit stoen die Rahmen benachbarter Zellen nur aneinander,
berlappen sich aber nicht. Im Beispiel der zwei erwhnten Zellen wrde also optisch ein Zwischenrahmen von 2 px Dicke entstehen.
Die border-collapse-Eigenschaft wird bislang nur vom Internet Explorer 5.x und vom OperaBrowser interpretiert. Netscape 4.x interpretiert border-style nur, wenn auerdem eine
Angabe zur Rahmendicke notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">

Beide Browser interpretieren die Angaben zu border-style nicht vollstndig. Einige der Effekte
(z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.

border[-top, -left, -right, -bottom] (Rahmen)

Diese Angabe ist eine Zusammenfassung der folgenden mglichen Einzelangaben: borderwidth, border-style, border-color.

470

Kapitel 16: CSS-Eigenschaften

Ein Beispiel:
<html><head><title>border</title>
<style type="text/css">
h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
h2 { border-top:1px solid blue; margin:0px; }
p.info { border:1px solid grey; background-color:#E0E0E0; padding:4px; margin:0px;
}
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>&Uuml;berschrift erster Ordnung</h1>
<p>xxxxx xxxxx xxxxx usw.</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>xxxxx xxxxx xxxxx usw.</p>
<p class="info">xxxxx xxxxx xxxxx usw.</p>
</body></html>

16.25: ber eine Kombination verschiedener Rahmenangaben entstehen zum Beispiel doppelt
unterstrichene berschriften.

Mit border: knnen Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie
Angaben zu Linienstrke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den

16.7 Hintergrundfarben und -bilder

471

Beispielen oben. Die Reihenfolge der Einzelangaben ist egal. Daneben knnen Sie zusammenhngende Angaben fr Rahmendicke, Rahmenfarbe und Rahmentyp auch fr einzelne Seiten des
Elements machen. Dazu sind die Untereigenschaften von border gedacht:
border-top definiert eine zusammenhngende Angabe fr oben,
border-left fr links,
border-right fr rechts und
border-bottom fr unten.

16.7

Hintergrundfarben und -bilder

Allgemeines zu Hintergrundfarben und -bildern

Sinnvoll sind die hier beschriebenen CSS-Eigenschaften vor allem fr HTML-Elemente, die
einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa fr h[1-6], p, blockquote,
address oder pre. Blockelemente sind aber auch div, table, tr, th und td. Auch auf <body>
lassen sich die hier aufgelisteten Stylesheet-Angaben anwenden in diesem Fall beziehen sich die
Angaben auf den gesamten sichtbaren Krper der HTML-Datei. Es ist aber ebenso mglich,
einzelne Textpassagen, die durch ein Inline-Element wie span, b, strong usw. markiert sind, mit
einem eigenen Hintergrund zu belegen.
Elementspezifische Hintergrundangaben heben sich von eventuellen HTML-Angaben zur
Hintergrundfarbe der HTML-Datei oder zu einer dateiweiten Hintergrundgrafik ab (Kapitel
4.2). Sehr schne Effekte knnen Sie erzielen, indem Sie Angaben zu Hintergrundfarben bzw.
Hintergrundbildern einzelner Elemente mit Angaben zu Rahmen (Kapitel 16.6) und Innenabstand (Kapitel 16.5) kombinieren.

background-color (Hintergrundfarbe)
Sie knnen mit background-color: fr ein HTML-Element eine eigene Hintergrundfarbe
definieren. Ein Beispiel:
<html><head><title>background-color</title>
<style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; fontsize:120%; }
.rosabox { background-color:#FFDDDD; padding:6px; margin:0px; }
.rosa { background-color:#FFDDDD; }
.gelbbox { background-color:#FFFF66; padding:6px; margin:0px; }
.gelb { background-color:#FFFF66; }
</style>
</head><body>
<h1>Hintergr&uuml;ndig!</h1>
<p class="rosabox">Hinter dem Internet ist das <span
class="gelb">Hinternet</span>.</p>

472

Kapitel 16: CSS-Eigenschaften

<p>Dies hat nichts zu sagen.</p>

<p class="gelbbox">Im Kinderzimmer herrscht das <span
class="rosa">Kindernet</span>.</p>
</body></html>

16.26: CSS erlaubt eigene Hintergrundfarben fr praktisch jedes Element.

Beachten Sie: Netscape 4.x bildet bei mehrzeiligen Textabstzen keinen echten Farbblock, sondern dehnt die Hintergrundfarbe am Zeilenende nur bis zum zuflligen Ende des Textes aus. Um
dies zu verhindern, knnen Sie zustzlich die Angaben border:none; und margin:0px; notieren (in den meisten Fllen kommen Sie auch ohne das margin:0px; aus). Wenn Ihnen der
Abstand zwischen Textgrenzen und dem Farbblock, der durch die Hintergrundfarbe entsteht, zu
klein ist, knnen Sie wie im obigen Beispiel gezeigt mit padding einen Innenabstand definieren.

background-image (Hintergrundbild)
Sie knnen fr einzelne HTML-Elemente ein eigenes Hintergrundbild definieren. Ein Beispiel:
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">
<div style="background-image:url(background2.gif); margin:0px; padding:10px">
<h1 align="center" style="color:#FFFFCC">Willkommen im Reich der Texturen!</h1>
<div style="background-image:url(background3.jpg); margin:30px; padding:10px">
<h2 align="center" style="color:#804000">Willkommen im Reich der Texturen!</h2>
</div></div>
</body></html>

16.7 Hintergrundfarben und -bilder

473

16.27: Auch ein Hintergrundbild ist fr Elemente einer Web-Seite kein Problem.

Mit background-image:url([URI]): knnen Sie eine Hintergrundgrafik bestimmen. Per Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie bei der
Angabe eines Hintergrundbildes im einleitenden HTML-Tag <body>. Text und referenzierte
Grafiken erscheinen ber dieser Hintergrundgrafik. Als Grafikdateitypen sollten Sie wie in
HTML blich GIF- oder JPG-Grafiken benutzen.
Im Beispiel wird vorausgesetzt, dass sich die Grafikdateien im gleichen Verzeichnis befinden wie
die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, mssen Sie den relativen
oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML (Kapitel 7.1).
Beachten Sie: Wenn das Element, fr das die Hintergrundgrafik definiert wird, in der Hhe oder
Breite kleiner ist als die Hintergrundgrafik, wird die Hintergrundgrafik in der Darstellung an den
Grenzen des Elements abgeschnitten.

background-repeat (Wiederholungseffekt)
Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt ber den gesamten zur Verfgung stehenden Raum wiederholt. Sie knnen jedoch ein anderes Verhalten erzwingen. Ein
Beispiel:
<html><head><title>background-repeat</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="background-image:url(background4.jpg); background-repeat:repeat-x;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der erste Bereich.<br>Ein Text, der sehr leicht<br>umbricht...usw.</p>
</div>

474

Kapitel 16: CSS-Eigenschaften

<div style="background-image:url(background4.jpg); background-repeat:repeat-y;

margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der zweite Bereich.<br>Ein Text, auch leicht umbricht....usw.</p>
</div>
<div style="background-image:url(background4.jpg); background-repeat:no-repeat;
margin:30px; border:thin solid #CCCCFF; font-size:150%">
<p>Der dritte Bereich.<br>Ein Text, auch leicht umbricht...usw.</p>
</div>
</body></html>

16.28: Das Hintergrundbild wird nur waagrecht, senkrecht oder gar nicht gekachelt.

Mit background-repeat: knnen Sie das Wiederholungsverhalten einer Hintergrundgrafik, die

Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben:
repeat = wiederholen (Voreinstellung)
repeat-x = nur eine Zeile lang waagerecht wiederholen

16.7 Hintergrundfarben und -bilder

475

repeat-y = nur eine Spalte lang senkrecht wiederholen

no-repeat = nicht wiederholen, nur als Einzelbild anzeigen
Beachten Sie: Netscape 4.x interpretiert diese Eigenschaft zwar, hat aber massive Schwierigkeiten
bei der Darstellung von Elementinhalten.

background-attachment (Wasserzeichen-Effekt)
Bei lngeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit. Sie
knnen jedoch erzwingen, dass das Hintergrund stehen bleibt (Wasserzeichen-Effekt). Ein
Beispiel:
<html><head><title>background-attachment</title>
<style type="text/css">
body {
background-image:url(background5.gif);
background-repeat:no-repeat;
background-attachment:fixed; padding:0px; }
div.mybody {
margin-left:100px; margin-top:20px; margin-right:20px;
margin-bottom:20px; }
</style>
</head><body>
<div class="mybody">
<h1>viel Text<br>viel Text zum Scrollen!<!--usw.--></h1>
</div>
</body></html>

Mit background-attachment: knnen Sie das Scroll-Verhalten einer Hintergrundgrafik, die

Sie mit background-image einbinden, kontrollieren. Erlaubt ist eine der folgenden Angaben:
scroll = mitscrollen (Voreinstellung)
fixed = Hintergrundbild bleibt stehen
Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der
Eigenschaften background-attachment und background-repeat sowie Angaben zum
Auenrand und Innenabstand (Kapitel 16.4 und 16.5). Eine Hintergundrafik wird dem bodyElement zugewiesen und wiederholungslos in der obersten linken Ecke angezeigt. Der gesamte
Inhalt des Dokuments kommt in einen div-Bereich mit der Klasse mybody, der seinen linken
Auenrand so definiert hat, dass der Inhalt des Dokuments beim Scrollen an der Grafik vorbeifliet, die immer angezeigt bleibt. So knnte manches Frameset vermieden werden!
Beachten Sie: Netscape 4.x interpretiert diese Angabe nicht.

background-position (Hintergrundposition)
Diese Angabe ist vor allem dann interessant, wenn Sie mit einer entsprechenden Angabe zu
background-repeat erzwingen, dass eine Hintergrundgrafik nur einmal angezeigt wird. Fr

476

Kapitel 16: CSS-Eigenschaften

diesen Fall knnen Sie mit der Hintergrundposition festlegen, wo genau die Hintergrundgrafik
innerhalb des HTML-Elements platziert werden soll. Ein Beispiel:
<html><head><title>background-position</title>
<style type="text/css">
#Tanz {
background-image:url(background6.gif);
background-repeat:no-repeat;
background-position:30px 20px;
}
</style>
</head><body>
<div id="Tanz">
<h1>Tanz der Bilder!</h1>
<img src="background_foreground.gif" width="321" height="262" border="0" alt="Ein
transparentest Bild &uuml;ber dem Hintergrundbild">
</div>
</body></html>

Mit background-position: knnen Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, fr das die Hintergrundgrafik definiert wird.
Erlaubt sind numerische Angaben und folgende Angaben:
CSS-Angabe

Wirkung

top

vertikal obenbndig
horizontal zentriert
vertikal mittig
vertikal untenbndig
horizontal linksbndig
horizontal rechtsbndig

center
middle
bottom
left
right

Im obigen Beispiel enthlt das div-Element eine GIF-Grafik mit transparentem Hintergrund.
Diese wird im Beispiel ber der Hintergrundgrafik angezeigt. Es sieht aus wie eine Grafik, sind
aber zwei verschiedene.
Beachten Sie: Netscape 4.x interpretiert diese Angabe nicht.

background (Hintergrund allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden mglichen Einzelangaben: backgroundimage (Hintergrundbild), background-repeat (Wiederholungseffekt), background-attachment (Wasserzeichen-Effekt), background-position (Hintergrundposition). Ein Beispiel:
<html><head><title>background</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="background:url(background1.gif) repeat-x;">

16.8 Listenformatierung

477

<h1 style="font-family:Arial,sans-serif; color:maroon; font-size:60pt">NEWS</h1>

<div style="margin-top:45px; font-size:14pt">
<p>Hier folgen die News...</p>
</div></div>
</body></html>

16.29: Eine Kombination der Effekte zum Hintergrundbild erlaubt auffllige Designs.

Mit background: knnen Sie Angaben fr eine Hintergrundgrafik zusammenfassen. Notieren

Sie Angaben zum Hintergrundbild, zu Wiederholungs- und Wasserzeichen-Effekt sowie zur
Position mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Beachten Sie: Netscape 4.x interpretiert diese Angabe zwar, aber was er aus dem obigen Beispiel
macht, spottet leider jeder Beschreibung.

16.8

Listenformatierung

Allgemeines zur Listenformartierung

Die Stylesheet-Angaben fr Listen beziehen sich speziell auf die HTML-Elemente ul
(Aufzhlungslisten, Kapitel 5.4.1) und ol (nummerierte Listen, Kapitel 5.4.2). Sie knnen mit
Hilfe von Stylesheet-Angaben die gleichen Formatierungen erzwingen, wie es in den einleitenden
HTML-Tags <ul> und <ol> mit Hilfe von zustzlichen Attributen mglich ist. Die entsprechenden Attribute sind in HTML 4.0 jedoch alle als deprecated ausgewiesen, also als knftig
unerwnscht. Stattdessen sollen die hier beschriebenen CSS-Eigenschaften verwendet werden,
um solche Listen zu formatieren. Neben den Mglichkeiten, die HTML bietet, stehen auch
erweiterte Mglichkeiten zum Formatieren von Listen zur Verfgung, etwa die Mglichkeit,
Listen aus- statt einzurcken oder eine eigene Grafik als Aufzhlungssymbol zu definieren.

478

Kapitel 16: CSS-Eigenschaften

16.8.1

list-style-type (Darstellungstyp)

Fr Aufzhlungslisten knnen Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Fr

nummerierte Listen knnen Sie die Darstellung der Durchnummerierung beeinflussen.
Ein Beispiel:
<html><head><title>list-style-type</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
<ul style="list-style-type:disc">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
<ul style="list-style-type:circle">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<!--usw.-->
<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
<ol style="list-style-type:decimal">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
<ol style="list-style-type:lower-roman">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<!--usw.-->
</body></html>

Mit list-style-type: knnen Sie das Aussehen von Listenzeichen kontrollieren. Erlaubt ist
eine der folgenden Angaben.
CSS-Angabe
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-latin

Wirkung
fr ol-Listen: Nummerierung 1.,2.,3.,4. usw.
fr ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
fr ol-Listen: Nummerierung I.,II.,III.,IV. usw.
fr ol-Listen: Nummerierung a.,b.,c.,d. usw.
fr ol-Listen: Nummerierung A.,B.,C.,D. usw.
fr ol-Listen: Nummerierung a.,b.,c.,d. usw. inklusive erweitertem Latin-Zeichensatz

16.8 Listenformatierung
CSS-Angabe
upper-latin
disc
circle
square
none

479

Wirkung
fr ol-Listen: Nummerierung A.,B.,C.,D. usw. inklusive erweitertem LatinZeichensatz
fr ul-Listen: Dateisymbol als Bullet-Zeichen
fr ul-Listen: rundes Bullet-Zeichen
fr ul-Listen: rechteckiges Bullet-Zeichen
kein Bullet-Zeichen, keine Nummerierung

16.30: Verschiedene Arten von Nummerierungen und Bullet-Zeichen fr Listen.

Die folgenden, neueren CSS-Angaben sind ebenfalls mglich, werden bislang jedoch
nur von Netscape ab Version 6.1 interpretiert.

480

Kapitel 16: CSS-Eigenschaften

CSS-Angabe

Wirkung

lower-greek

fr ol-Listen: Nummerierung mit den griechischen Buchstaben

fr ol-Listen: Nummerierung mit den hebrischen Buchstaben
fr ol-Listen: Nummerierung mit fhrender 0: 01.,02.,03.,04., ... 98.,99.
usw.
fr ol-Listen: Nummerierung mit ideographischen Zeichen
fr ol-Listen: Nummerierung in Japanisch (a, i, u, e, o, ka, ki, ... )
fr ol-Listen: Nummerierung in Japanisch (A, I, U, E, O, KA, KI, ... )
fr ol-Listen: Nummerierung in Japanisch (i, ro, ha, ni, ho, he, to, ... )
fr ol-Listen: Nummerierung in Japanisch (I, RO, HA, NI, HO, HE,
TO, ... )

hebrew
decimal-leading-zero
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

list-style-position (Listeneinrckung)
Sie knnen bestimmen, wie sich Bullet-Zeichen oder Nummerierung mit dem Inhalt eines
Listenpunktes in Bezug auf Einrckung verhalten. Ein Beispiel:
<html><head><title>list-style-position</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>inside</i></h4>
<ol style="list-style-position:inside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste &lt;ol&gt; mit Listeneinr&uuml;ckung <i>outside</i></h4>
<ol style="list-style-position:outside">
<li>Tagesordnung<br>
zweizeilig</li>
<!--usw.-->
</ol>
</body></html>

Mit list-style-position: knnen Sie das Einrckungsverhalten kontrollieren. Erlaubt ist

eine der folgenden Angaben.
inside = eingerckt
outside = ausgerckt (Voreinstellung)
Beachten Sie: Netscape 4.x interpretiert diese Angabe noch nicht.

16.8 Listenformatierung

481

16.31: Die Einrckung bei Listen lsst sich ein- oder ausschalten.

list-style-image (eigene Bullet-Grafik)

Mit list-style-image:url([Dateiname]) knnen Sie eine Grafik fr das eigene BulletZeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML blich GIF- oder JPG-Grafiken
benutzen. Im Beispiel wird vorausgesetzt, dass sich die Grafikdatei im gleichen Verzeichnis
befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, mssen Sie
den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML (Kapitel 7.1.2). Ein Beispiel:
<html><head><title>list-style-image</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit eigener Bullet-Grafik</h4>
<ul style="list-style-image:url(list_style_image.gif)">
<li>&#160;<a href="../../../html/index.htm"><b>HTML/XHTML</b></a><br>

482

Kapitel 16: CSS-Eigenschaften

Die Sprache des Web</li>

<!--usw.-->
</ul>
</body></html>

16.32: Mit CSS verwenden Sie beliebige Grafiken als Bullet-Zeichen.

Beachten Sie: Netscape 4.x interpretiert diese Angabe noch nicht.

list-style (Listendarstellung allgemein)

Diese Angabe ist eine Zusammenfassung der folgenden mglichen Einzelangaben: list-style-type
(Darstellungstyp), list-style-position (Listeneinrckung), list-style-image (Eigene Bullet-Grafik).
Ein Beispiel:
<html><head><title>list-style</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h4>Nummerierte Liste &lt;ol&gt; mit den Angaben <i>lower-roman inside</i></h4>
<ol style="list-style:lower-roman inside">
<li>bei Anette vorbeischauen<br>
und Gr&uuml;&szlig;e an Gundula ausrichten</li>
<!--usw.-->
</ol>
</body></html>

Mit list-style: knnen Sie zusammenfassende Angaben zum Aussehen von Aufzhlungslisten oder nummerierten Listen machen. Notieren Sie Angaben zum Darstellungstyp, zur Listeneinrckung sowie zur Bullet-Grafik mit Leerzeichen dazwischen, so wie im Beispiel oben. Die
Reihenfolge der Einzelangaben ist egal. Es ist nicht erforderlich, zu allen Angaben etwas zu notieren.
Beachten Sie: Netscape 4.x interpretiert nur einen Teil dieser Angaben.

16.9 Tabellenformatierung

483

16.33: Kombinieren Sie mehrere CSS-Angaben zu Listen mit list-style:

16.9

Tabellenformatierung

Allgemeines zur Tabellenformartierung

Tabellen werden erst seit CSS 2.0 gesondert behandelt und haben eigene CSS-Eigenschaften.
Dennoch gibt es auch eine Menge Eigenschaften von CSS 1.0, die sich auf Tabellen, Spalten und
Zeilen anwenden lassen. Auf die HTML-Elemente table, tr, colgroup, col, thead, tbody,
tfoot, th und td lassen sich Formatierungen anwenden wie:
Schriftformatierung
Ausrichtung und Absatzkontrolle
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Vor allem aber bei Rahmen gengen die dafr blichen CSS-Eigenschaften alleine nicht, um den
Anforderungen an das Gitternetz einer Tabelle gerecht zu werden. Deshalb bietet CSS 2.0 die
Mglichkeit an, zwei verschiedene Rahmenmodelle zu unterscheiden. Dadurch kann dem
Browser mitgeteilt werden, wie er die Auenrahmen zweier angrenzender Tabellenzellen behandeln soll.
Fr Angaben zur Breite und Hhe von Tabellenspalten oder -zeilen sind die CSS-Eigenschaften
width und height zwar geeignet, doch ist es wirklich manchmal wnschenswert, dass vorgege-

bene Breiten und Hhenangaben in jedem Fall und auch mal mit Prioritt vor dem Inhalt der
Zellen behandelt werden. Diese Option ist nun mit CSS 2.0 fr Tabellen einstellbar.
Andere tabellenspezifische Eigenschaften regeln Angaben, die auch in HTML in Form von Attributen mglich sind. Die entsprechenden Attribute sind in HTML 4.0 jedoch als deprecated

484

Kapitel 16: CSS-Eigenschaften

gekennzeichnet, also als knftig unerwnscht. Stattdessen sollen die hier beschriebenen CSSEigenschaften verwendet werden.
Weiterhin wichtig im Zusammenhang mit Tabellen ist seit CSS 2.0 die an anderer Stelle beschriebene CSS-Eigenschaft display (Kapitel 16.11). Damit ist es mglich, Tabelleneigenschaften auf andere Elemente als Tabellenelemente anzuwenden. Das mag sich zwar fr HTML
komisch anhren, aber CSS ist ja auch eine mgliche Style-Sprache zur Darstellung von XMLDaten. Und da es in XML keine Mglichkeit gibt, ein Element mit semantischen Eigenschaften
wie Tabellenzelle oder Tabellenzeile auszuzeichnen, muss das die Style-Sprache bernehmen, die solche Daten anzeigt.

caption-side (Ausrichtung der Tabellenberschrift)

Sie knnen fr Tabellen in HTML mit dem caption-Element eine Tabellenberschrift bestimmen. Mit der hier beschriebenen Stylesheet-Angabe knnen Sie die Position dieser berschrift
festlegen. Beispiel:
<html><head><title>caption-side</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<caption style="caption-side:bottom">Assoziationen</caption>
<tr>
<th>Berlin</th><th>Hamburg</th><th>M&uuml;nchen</th>
</tr><tr>
<td>Milj&ouml;h</td><td>Kiez</td><td>Bierdampf</td>
</tr><tr>
<td>Buletten</td><td>Frikadellen</td><td>Fleischpflanzerl</td>
</tr></table>
</body></html>

Mit caption-side: knnen Sie die Position der Tabellenberschrift bestimmen. Folgende
Angaben sind erlaubt:
CSS-Angabe

Wirkung

top

oberhalb der Tabelle

unterhalb der Tabelle
links neben der Tabelle
rechts neben der Tabelle

bottom
left
right

Beachten Sie: Diese Eigenschaft wird vom Internet Explorer in der Version 5.x noch nicht interpretiert.

16.9 Tabellenformatierung

485

table-layout (fixe/variable Breiten)

Mit dieser Eigenschaft knnen Sie entscheiden, wie der Browser Breitenangaben zur Tabelle und
zu Tabellenspalten behandeln soll, die Sie mit der CSS-Eigenschaft width angeben. Dies hat den
Vorteil, dass groe Tabellen schneller angezeigt werden knnen, da der Browser nicht mehr erst
den gesamten Inhalt der Tabelle einlesen muss, um die tatschliche Anzeigebreite einzulesen. Ein
Beispiel:
<html><head><title>table-layout</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1" style="table-layout:fixed">
<colgroup span="3" style=""></colgroup>
<tr>
<td style="width:100px">
123456789012345678901234567890123456789012345678901234567890
</td>
<td style="width:200px">
123456789012345678901234567890123456789012345678901234567890
</td>
<td style="width:300px">
123456789012345678901234567890123456789012345678901234567890
</td>
</tr>
</table>
</body></html>

Mit table-layout: beeinflussen Sie die Tabellenanzeige bei Breitenangaben. Folgende Angaben
sind erlaubt:
fixed = Breitenangaben haben Vorrang vor dem Zelleninhalt
auto = Zelleninhalt hat Vorrang vor Breitenangaben (Voreinstellung)
Beachten Sie: Netscape 6.x interpretiert diese Eigenschaft wohl, hatte aber Probleme bei der
Darstellung. Eine width-Zuweisung an das table-Element brachte ihn dazu, die Anzeige zu
verhauen, und das obige Beispiel mit der width-Zuweisung an einzelne Zellen, um damit die
Breite der Tabelle festzulegen, ignorierte er.

border-collapse (Rahmenmodell)
Mit dieser Eigenschaft knnen Sie festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht. Ein Beispiel:
<html><head><title>border-collapse</title>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="0"><tr>
<th colspan="3">Normaleinstellung</th>
</tr><tr>

486

Kapitel 16: CSS-Eigenschaften

<td style="border:medium solid blue">Haus</td>

<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr></table>
<table border="0" style="border-collapse:collapse"><tr>
<th colspan="3">Spezialeinstellung (collapse)</th>
</tr><tr>
<td style="border:medium solid blue">Haus</td>
<td style="border:medium dashed blue">Auto</td>
<td style="border:medium dotted blue">Boot</td>
</tr></table>
</body></html>

16.34: Im unteren Beispiel sind die Trennlinien nebeneinander liegender Zellen

zusammengefasst.

Mit border-collapse: beeinflussen Sie die Art, wie Einzelrahmen benachbarter Tabellenzellen
reagieren. Folgende Angaben sind erlaubt:
separate = Zellenrahmen fallen nicht zusammen
collapse = Zellenrahmen fallen zusammen
Bei der Angabe collapse kommt es zu Konflikten zwischen Rahmenformatierungen einzelner
Zellen. Rahmen, die dabei in jedem Fall Vorrang haben sollen und den gemeinsamen Grenzrahmen der Nachbarzelle berlagern sollen, mssen zu diesem Zweck die CSS-Angabe borderstyle:hidden erhalten. Rahmen, die in jedem Fall nachrangig sein sollen und von dem Grenzrahmen der Nachbarzelle berlagert werden sollen, mssen die CSS-Angabe borderstyle:none erhalten. Wenn keine der Zellen die Angabe border-style:hidden enthlt, aber
eine davon die Angabe border-style:none, entscheidet die Breitenangabe (border-width)
zum Rahmen, welche Formatierung beim gemeinsamen Grenzrahmen Vorrang hat. Breitere
Rahmen haben dann den Vorrang. Falls auch die Breitenangabe keine Konfliktlsung bringt, da
die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen
(border-style:): dobuble, solid, dashed, dotted, ridge, outset, groove, inset.

16.9 Tabellenformatierung

487

16.35: Das Schaubild verdeutlicht das Zusammenlegen von angrenzenden Zellenrndern.

Beachten Sie: Netscape 6.(1) interpretiert diese Angabe noch nicht.

border-spacing (Rahmenabstand im Gitternetz)

Mit border-spacing: knnen Sie fr ein table-Element den Abstand der Zellenrahmen voneinander bestimmen. Erlaubt ist eine numerische Angabe. Ein Beispiel:
<html><head><title>border-spacing</title>
<style>
td { border:thin solid blue; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<table style="border:thin solid red; border-spacing:10px">
<tr>
<td>Haus</td>
<td>Auto</td>
<td>Boot</td>
</tr></table>
</body></html>

Beachten Sie: Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.

empty-cells (Anzeige/Nichtanzeige leerer Zellen)

Mit dieser Eigenschaft knnen Sie festlegen, ob Tabellenzellen ohne Inhalt bei sichtbarem
Gitternetz einen Rahmen erhalten sollen oder nicht. Ein Beispiel:
<html><head><title>empty-cells</title>
<style>
td { border:1px solid black; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<h2>Tabelle 1</h2>
<table style="border:1px solid black; empty-cells:show"><tr>
<td>Inhalt</td><td>Inhalt</td><td></td>
</tr></table>

488

Kapitel 16: CSS-Eigenschaften

<h2>Tabelle 2</h2>
<table style="border:1px solid black; empty-cells:hide"><tr>
<td>Inhalt</td><td>Inhalt</td><td></td>
</tr></table>
</body></html>

16.36: In der oberen Tabelle ist die leere Zelle sichtbar, in der unteren nicht.

Mit empty-cells: bestimmen Sie, ob Rahmen leerer Tabellenzellen angezeigt werden oder
nicht. Folgende Angaben sind erlaubt:
show = Zellenrahmen leerer Tabellenzellen werden angezeigt
collapse = Zellenrahmen leerer Tabellenzellen werden unterdrckt (Voreinstellung)
Beachten Sie: Der Internet Explorer 5.x interpretiert diese Angabe noch nicht.

speak-header (Art der Sprachausgabeuntersttzung)

Wenn eine HTML-Tabelle nicht am Bildschirm angezeigt oder ausgedruckt, sondern von einem
Sprecher oder Sprachausgabesystem vorgelesen wird (z.B. fr Sehbehinderte), entsteht das
Problem, dass ein zweidimensionaler Raum eindimensional in der Zeit gelesen werden soll. Mit
der hier beschriebenen Angabe knnen Sie fr diesen Fall entscheiden, ob der Inhalt von Kopfzellen bei jeder ihr untergeordneten Datenzelle erneut wiedergegeben werden soll oder nur einmal. Ein Beispiel:
<table border="1">
<tr>
<th style="speak-header-cell:always">Kopfzelle 1</th>
<th style="speak-header-cell:once">Kopfzelle 2</th>
</tr>
<tr>
<td>Datenzelle 1</td>
<td>Datenzelle 2</td>
</tr>
<tr>
<td>Datenzelle 3</td>
<td>Datenzelle 4</td>
</tr>
</table>

16.10 Pseudoformate

489

Mit speak-header-cell: knnen Sie das Wiedergabeverhalten fr Kopfzelleninhalte bestimmen. Das obige Beispiel bewirkt, dass die Kopfzelle 1 vor den Datenzellen 1 und 3 jeweils
wiederholt wird, whrend die Kopfzelle 2 nur einmal ausgegeben wird. Folgende Angaben sind
erlaubt:
always = Kopfzelleninhalt bei jeder untergeordneten Datenzelle wiederholen
once = Kopfzelleninhalt nur einmal wiedergeben (Normaleinstellung)

16.10 Pseudoformate
Allgemeines zu Pseudoformaten
Was Pseudoformate sind, ist im Abschnitt 15.3.8 Pseudoformate definieren beschrieben.

:link, :visited, :hover, :active, :focus (Pseudoformate fr Verweise)

Sie knnen das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits
besuchten Seiten und zu Verweisen, die gerade mit der Maus berfahren oder angeklickt werden,
bestimmen. Ein Beispiel:
<html><head><title>:link, :visited, :hover, :active</title>
<style type="text/css">
a:link { font-weight:bold; color:#0000E0; text-decoration:none }
a:visited { font-weight:bold; color:#000080; text-decoration:none }
a:hover { font-weight:bold; color:#E00000; text-decoration:none }
a:active { font-weight:bold; color:#E00000; text-decoration:underline }
a:focus { font-weight:bold; color:#00E000; text-decoration:underline }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<h1>Bekannte Suchdienste</h1>
<p>
<a href="http://www.yahoo.de/">Yahoo (Verzeichnis)</a><br>
<a href="http://www.google.de/">Google (Suchmaschine)</a><br>
<a href="http://web.de/">Web.de (Verzeichnis)</a><br>
<a href="http://www.multimeta.de/">Multimeta (Meta-Suchmaschine)</a>
</p>
</body></html>

Pseudoformate werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoformate gelten fr das a-Element in HTML, daher wird vor dem Doppelpunkt das a notiert. In
den Formatdefinitionen fr die einzelnen Pseudoformate knnen Sie beliebige, geeignete CSSEigenschaften zuweisen.

490

Kapitel 16: CSS-Eigenschaften

16.37: Beim berfahren mit der Maus (:hover) erscheinen die Links rot.

Die Pseudoformate bedeuten:

:link

fr Verweise zu noch nicht besuchten Seiten

:visited

fr Verweise zu bereits besuchten Seiten

:hover

fr Verweise, whrend der Anwender mit der Maus darber fhrt

:active

fr gerade angeklickte Verweise

:focus

fr Verweise, die den Fokus erhalten, z.B. durch Durchsteppen mit der Tabulatortaste

Beachten Sie: Um eine korrekte Darstellung dieser Pseudoformate zu erreichen, mssen Sie bei
der Notierung die folgende Reihenfolge einhalten:
:link, :visited, :hover, :active

Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere
reagiert Netscape 4.x noch nicht auf das Pseudoformat a:hover. Der Internet Explorer 5.x kennt
die Angabe a:focus noch nicht.
:focus funktioniert bei anderen Elementen als Verweisen auch. Wenn Sie beispielsweise fr
h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-berschrift klicken,

nimmt diese, solange die Maus geklickt ist, die definierten Eigenschaften an.

:first-line, :first-letter, :first-child (Pseudoformate fr Abstze)

Sie knnen fr Abstze mit lngerem Flietext fr die erste Zeile des Absatzes ein separates
Erscheinungsbild erzwingen. Ferner knnen Sie fr das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schlielich knnen Sie sogar bestimmen, dass ein erstes
Kindelement eines Elements ein besonderes Aussehen erhlt. Dies sind typographische Effekte,
die von Druckschriften her bekannt sind. Ein Beispiel:
<html><head><title>:first-line, :first-letter, :first-child</title>
<style type="text/css">
p:first-line { font-weight:bold }

16.10 Pseudoformate

491

p:first-letter { font-size:300%; color:red }

div { background-color:#E0E0E0 }
div p:first-child { background-color:#C0C0C0; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<p>Man kann nur Br&uuml;cken schlagen zwischen Ufern die man auseinanderh&auml;lt.
Denn wo es keine Gr&auml;ben gibt, da gibt es auch keine Unterschiede, und wo es
keine Unterschiede gibt, da ist kein Leben.</p>
<div>
<p>Und die Moral von der Geschicht:</p>
<p>Traue Philosophen nicht!</p>
</div>
</body></html>

16.38: Pseudoformate fr die erste Textzeile beziehungsweise den ersten Buchstaben.

Pseudoformate werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoformate sind fr typische Absatz- oder berschriftenelemente in HTML gedacht. In den
Formatdefinitionen fr die einzelnen Pseudoformate knnen Sie beliebige, geeignete CSSEigenschaften zuweisen. Die Pseudoformate bedeuten:
:first-line = die erste Textzeile des Elements erhlt die CSS-Eigenschaften.
:first-letter = der erste Buchstabe des Textes erhlt die CSS-Eigenschaften.
:first-child = das erste Kindelement des Elements erhlt die CSS-Eigenschaften.
Beachten Sie: Der Internet Explorer 5.x interpretiert :first-child noch nicht.

:before, :after (Pseudoformate fr automatisch generierten Text)

Sie knnen bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefgt wird. Es
kann sich um statischen Text handeln, aber auch um variable Inhalte. Ein Beispiel:
<html><head><title>:before, :after</title>
<style type="text/css">
td.Preis:before { content:"Preis: "; }
td.Preis:after

{ content:",- EUR"; }

492

Kapitel 16: CSS-Eigenschaften

td.Produkt:before { content:url(list_style_image.gif)" "; }

td.Produkt:after { content:" "attr(title); }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<table border="1">
<tr>
<td class="Produkt" title="(f&uuml;r Kinder und Erwachsene)">Stoffhasen</td>
<td class="Preis">29</td>
</tr>
<tr>
<td class="Produkt">Wahrsager-Kugeln</td>
<td class="Preis">39</td>
</tr>
</table>
</body></html>

16.39: Die CSS-Angaben fgen ein Bildsymbol am Anfang bzw. die Whrungskrzel am Ende ein.

Pseudoformate werden zentral in einem style-Bereich notiert. Die hier beschriebenen Pseudoformate bedeuten:
:before = Inhalt, der vor dem notierten Inhalt des Elements eingefgt werden soll.
:after = Inhalt, der nach dem notierten Inhalt des Elements eingefgt werden soll.
Innerhalb der geschweiften Klammern bestimmen Sie dann mit content:, was vor bzw. nach
dem in HTML notierten Elementinhalt automatisch eingefgt werden soll.
Im obigen Beispiel wird fr td-Elemente mit dem Klassennamen Preis bestimmt, dass vor dem
Elementinhalt der statische Text Preis: ausgegeben werden soll und nach dem Elementinhalt
der Text EUR,-. In HTML gengt es dann, nur die Zahlen zu notieren. Fr Tabellenzellen mit
dem Klassennamen Produkt wird bestimmt, dass vor dem Element eine Grafik eingefgt wird.
Dazu knnen Sie die Syntax url([URI]) zum Referenzieren der Grafik verwenden. Fr die gleiche Tabellenzellenklasse wird festgelegt, dass wenn im einleitenden <td>-Tag ein Attribut
title= notiert wird, dessen Wertzuweisung als Text hinter dem Elementinhalt eingefgt wird.
Fr diese Art von variablem Inhalt knnen Sie die Syntax attr([Attributname]) verwenden,
wie im Beispiel oben gezeigt.
Statischer Text hinter content: muss in Anfhrungszeichen stehen. Im obigen Beispiel knnen
Sie auch sehen, dass es mglich ist, Angaben zu kombinieren. So bedeutet content:url
(list_style_image.gif)" ";, dass hinter der Grafik noch ein statisches Leerzeichen eingefgt
wird.
Beachten Sie: Diese Angaben werden vom Internet Explorer 5.x und 6.0 noch nicht interpretiert.

16.10 Pseudoformate

493

Automatische Nummerierung
Eine erweiterte Syntax der Pseudoformate :before und :after erlaubt auch die automatische
Nummerierung von Elementen, z.B. fr Kapitelberschriften. Ein Beispiel:
<html><head><title>:before, :after</title>
<style type="text/css">
h1:before { content:counter(Ebene01);
counter-increment:Ebene01;
counter-reset:Ebene02;
}
h2:before { content:counter(Ebene01) ". " counter(Ebene02);
counter-increment:Ebene02;
}
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<h1>&Uuml;berschrift erster Ordnung</h1>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>&Uuml;berschrift erster Ordnung</h1>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h2>&Uuml;berschrift zweiter Ordnung</h2>
<p>Text</p>
<h1>&Uuml;berschrift zweiter Ordnung</h1>
<p>Text</p>
</body></html>

In der Regel werden Sie fr die automatische Nummerierung ein berschriftenelement wie h1
oder h2 angeben und die Nummerierung vor dessen Text setzen. Dann mssen Sie im styleBereich Selektoren wie h1:before oder h2:before notieren. In den geschweiften Klammern
folgt dann, wie bei :before und :after blich, die Eigenschaft content:. Dahinter knnen im
Zusammenhang mit automatischer Nummerierung drei Funktionen folgen, die die Nummerierungszhler steuern. Trennen Sie mehrere Funktionsaufrufe durch Strichpunkte (;).
Mit counter([Name]) fgen Sie den Wert des Zhlers mit dem Namen Name an die aktuelle
Stelle ein. Beim ersten Vorkommen hat der Zhler den Wert 1. In den runden Klammern notieren Sie Zhlernamen. Im obigen Beispiel sind das die Namen Ebene01 und Ebene02. Die Namen knnen Sie frei vergeben.

494

Kapitel 16: CSS-Eigenschaften

Mit counter-increment:[Name] zhlen Sie den Zhler mit dem angegebenen Namen um 1
hoch. Normalerweise notieren Sie zuerst counter([Name]) und dann counter-increment:
[Name], um zuerst den aktuellen Zhlerstand einzufgen und dann den Zhler fr das nchste
Vorkommen des betreffenden Elementtyps hochzuzhlen.
Mit counter-reset:[Name] setzen Sie einen Zhler wieder auf seinen Anfangswert (1) zurck.
Dies ist vor allem wichtig, wenn Sie mit Kapitel-Unterkapitel-Nummerierung arbeiten, wie im
obigen Beispiel. Dort wird beim Vorkommen eines neuen h1-Elements der Zhler fr h2-Elemente wieder auf 1 gesetzt.

16.40: Die automatische Nummerierung in Opera 5.

Neben den Funktionen fr die Zhlerkontrolle kann auch statischer Text notiert werden. Im
obigen Beispiel wird hinter dem Aufruf von counter(Ebene01) als statischer Text ein Punkt
notiert. So entsteht im Beispiel durch die Verwaltung der beiden Zhler fr berschriften erster
und zweiter Ordnung ein Nummerierungsschema wie 1, 1.1, 1.2, 2, 2.1, 2.2., 2.3, 3 usw.
Beachten Sie: Die automatische Nummerierung wird bislang weder von Netscape noch vom
Internet Explorer untersttzt, wohl aber vom Opera-Browser.

16.11 Positionierung und Anzeige von Elementen

Allgemeines zur Positionierung und Anzeige von Elementen
Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite
exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen
untereinander genau zu kontrollieren. Dazu gehren Angaben zum absoluten und relativen

16.11 Positionierung und Anzeige von Elementen

495

Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umflieen von Elementen und Angaben zum berlappen und Anzeigen von Elementen.
Absolutes und relatives Positionieren von Elementen bietet Ihnen die Mglichkeit, das Erscheinungsbild von Web-Seiten strker bildschirmorientiert zu gestalten. So knnen Sie fr einzelne
Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche knnen sich berlappen
usw. Im wesentlichen decken diese Stylesheet-Angaben die Mglichkeiten der alten NetscapeLayer ab (Kapitel 12). Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des
W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben
seit ihren 4er-Versionen allerdings noch mit einigen Einschrnkungen bzw. Besonderheiten.
Das Positionieren von Elementen ist eine wichtige Voraussetzung fr viele Anwendungflle von
Dynamischem HTML (Kapitel 21). Mit Hilfe entsprechender Script-Untersttzung knnen Sie
positionierte Elemente bewegen, ein-/ausblenden, anders berlappen usw.

position (Positionsart)
Sie knnen fr einen Bereich bestimmen, wie er positioniert werden soll. Ein Beispiel:
<html><head><title>position</title>
<style type="text/css">
<!-body { }
#box1 { position:absolute; top:10px; left:10px; width:150px; height:150px; zindex:1; }
#box2 { position:absolute; top:40px; left:40px; width:100px; height:100px; zindex:2; }
#box3 { position:absolute; top:80px; left:50px; width:150px; height:150px; zindex:3; }
#box4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1;
}
#box5 { position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2;
}
#box6 { position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:1; }
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<div id="box1" style="background:red; border:solid 2px blue;">box1</div>
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>
<div id="box3" style="background:yellow; border:solid 2px red;">box3
<div id="box4" style="background:gold; border:solid 2px green;">box4</div>
<div id="box5" style="background:lime; border:solid 2px navy;">box5</div>
<div id="box6" style="background:red; border:solid 2px blue;">box6</div>
</div>
</body></html>

496

Kapitel 16: CSS-Eigenschaften

16.41: Das Beispiel erzeugt diese positinierten Bereiche.

Mit position: knnen Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
absolute

Absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.

fixed

Absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim

Scrollen stehen.

relative

Relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.

static

Keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend.
Denn absolute verhlt sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel
zeigen: relativ nmlich zum Rand des Elternelements. Wenn sonst kein Elternelement existiert,
ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die
Normalposition des Elements selbst.
Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe
macht nur Sinn, wenn Sie zugleich die gewnschte Startposition angeben. Dies knnen Sie beispielsweise mit Angaben zur top oder left tun (siehe die folgenden Abschnitte).
Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie fr
das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines Elternelements
beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie fr das Element fest, dass
sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wre.
Beachten Sie: Die Angabe fixed wird weder von Netscape noch vom MS Internet Explorer
interpretiert. Weder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Elementen. Um eine maximale Abwrtskompatibilitt zu
erreichen, ist es am besten, Angaben zur Positionierung auf das div-Element zu beschrnken.
Schlieen Sie andere Elemente, etwa Textabstze, Grafiken, Tabellen, Formulare usw. einfach in
entsprechende div-Elemente ein.
Netscape und der MS Internet Explorer reagieren bei absoluter Positionierung unterschiedlich,
was die automatische Breite von Elementen betrifft. Dieser Fall tritt ein, wenn Sie eine Angabe
fr left: notieren und nicht angeben, wie breit der so definierte Bereich sein soll. Netscape

16.11 Positionierung und Anzeige von Elementen

497

erstreckt das Element maximal bis zum rechten Fensterrand/Seitenrand, whrend der MS Internet Explorer es ber den rechten Rand hinausdehnt (der Anwender muss quer scrollen). Bei
relativer Positionierung reagieren beide Browser so wie der MS Internet Explorer bei der absoluten Positionierung. Um den Effekt zu vermeiden, knnen Sie z.B. Angaben zu width (Breite)
des positionierten Bereichs machen.

top (Startposition von oben)

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie knnen bestimmen,
wo ein absolut oder relativ positioniertes Element von oben beginnt. Mit top: knnen Sie die
Startposition von oben bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto fr
eine automatische Positionierung. Ein Beispiel:
<html><head><title>top</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:4.8cm">
<img src="hund.gif" width="208" height="181" alt="Hund" border="0">
</div>
<div style="position:absolute; top:3.6cm; width:208px; background-color:#FFFFE0;
border:1px solid #804000; padding:10px">Dies ist ein absolut positionierter Text
&uuml;ber einer absolut positionierten Grafik.</div>
</body></html>

16.42: Bild und Bereich haben einen absoluten Abstand zum oberen Fensterrand.

498

Kapitel 16: CSS-Eigenschaften

left (Startposition von links)

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie knnen bestimmen,
wo ein absolut oder relativ positioniertes Element von links beginnt. Mit left: knnen Sie die
Startposition von links bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto fr
eine automatische Positionierung. Ein Beispiel:
<html><head><title>left</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:100px; left:100px;">
<img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div>
<div style="position:absolute; top:140px;
left:350px; width:200px;
background-color:#FFFFE0;
border:1px solid #804000; padding:10px">
Dies ist ein absolut positionierter Text neben einer absolut positionierten
Grafik.</div>
</body></html>

bottom (Startposition von unten)

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie knnen bestimmen,
wo ein absolut oder relativ positioniertes Element von unten beginnt. Mit bottom: knnen Sie
die Startposition von unten bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto
fr eine automatische Positionierung. Ein Beispiel:
<html><head><title>bottom</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; bottom:0px; left:100px;">
Dies ist ein untenb&uuml;ndiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund" border="0">
</div>
</body></html>

Beachten Sie: Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht.

right (Startposition von rechts)

Diese Angabe ist sinnvoll in Verbindung mit einer Angabe zu position. Sie knnen bestimmen,
wo ein absolut oder relativ positioniertes Element von rechts beginnt. Mit right: knnen Sie
die Startposition von rechts bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto
fr eine automatische Positionierung.

16.11 Positionierung und Anzeige von Elementen

499

Ein Beispiel:
<html><head><title>right</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:100px; right:0px;">
Rechtsb&uuml;ndiger Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund" border="0">
</div>
</body></html>

16.43: Der Hund klebt am rechten Fensterrand.

Beachten Sie: Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht.

width (Breite)
Sie knnen bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit
dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, knnen
Sie zustzlich die Eigenschaft overflow verwenden. Mit width: knnen Sie die Breite bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto fr automatische Breite. Ein
Beispiel:
<html><head><title>width</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="width:200px; overflow:hidden; border:1px solid red; padding:10px; fontsize:36pt">
Eine &Uuml;berschrift, die m&ouml;glicherweise breiter ist als erlaubt</h1>
</body></html>

Beachten Sie: Dass im obigen Beispiel wo ntig in der Breite Text abgeschnitten wird, liegt nicht
an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4erGeneration interpretieren diese Angabe jedoch noch nicht.

500

Kapitel 16: CSS-Eigenschaften

16.44: Die Breitenangabe fr die berschrift nimmt keine Rcksicht auf die Breite der Wrter.

min-width (Mindestbreite)
Sie knnen bestimmen, wie breit ein Element oder Bereich auf jeden Fall sein soll, auch wenn der
Inhalt weniger Breite in Anspruch nimmt. Mit min-width: knnen Sie die Mindestbreite
bestimmen. Erlaubt ist eine numerische Angabe. Ein Beispiel:
<html><head><title>min-width</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid
1px blue; padding:10px">
Fasse dich kurz!</div>
</body></html>

16.45: Der Bereich wird so gro wie angegeben, auch wenn der Inhalt den Platz gar nicht bentigt.

16.11 Positionierung und Anzeige von Elementen

501

Beachten Sie: Der Internet Explorer 5.x und 6.0 interpretiert diese Angabe noch nicht.

max-width (Maximalbreite)
Sie knnen bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen,
was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Hhe, knnen Sie zustzlich die Eigenschaft overflow verwenden. Mit max-width: knnen Sie die Maximalbreite bestimmen. Erlaubt ist eine numerische Angabe. Ein Beispiel:
<html><head><title>max-width</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="max-width:250px; overflow:hidden; border:solid 1px green; fontsize:36pt; padding:10px">
Eine &Uuml;berschrift, bei das Wort m&ouml;glicherweise m&ouml;glicherweise zu
breit f&uuml;r 250px ist</h1>
</body></html>

Beachten Sie: Der Internet Explorer 5.x und 6.0 interpretiert diese Angabe noch nicht.

height (Hhe)
Sie knnen bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit
dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene
Hhe, knnen Sie zustzlich die Eigenschaft overflow verwenden. Mit height: knnen Sie die
Hhe bestimmen. Erlaubt ist eine numerische Angabe oder der Wert auto fr automatische
Hhe. Ein Beispiel:
<html><head><title>height</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="height:100px; width:300px; overflow:hidden; border:1px solid red;
padding:10px; font-size:36pt">
Eine &Uuml;berschrift, die m&ouml;glicherweise h&ouml;her ist als erlaubt</h1>
</body></html>

Beachten Sie: Dass im obigen Beispiel wo ntig in der Breite Text abgeschnitten wird, liegt nicht
an der Eigenschaft width, sondern an der Angabe overflow:hidden. Die Browser der 4erGeneration interpretieren diese Angabe jedoch noch nicht.

min-height (Mindesthhe)
Sie knnen bestimmen, wie hoch ein Element oder Bereich auf jeden Fall sein soll. Mit minheight: knnen Sie die Mindesthhe bestimmen. Erlaubt ist eine numerische Angabe. Ein
Beispiel:
<html><head><title>min-height</title>
</head><body bgcolor="FFFFFF" text="#000000">

502

Kapitel 16: CSS-Eigenschaften

<div style="position:absolute; top:100px; left:100px; min-height:200px;

border:solid 1px blue; padding:10px">
Fasse dich kurz!</div>
</body></html>

Beachten Sie: Der Internet Explorer 5.x und 6.0 interpretiert diese Angabe noch nicht.

max-height (Maximalhhe)
Sie knnen bestimmen, wie hoch ein Element oder Bereich auf jeden Fall sein soll. Um zu
bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die
hier angegebene Hhe, knnen Sie zustzlich die Eigenschaft overflow verwenden. Mit maxheight: knnen Sie die Maximalhhe bestimmen. Erlaubt ist eine numerische Angabe. Ein
Beispiel:
<html><head><title>max-height</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px
green; font-size:36pt; padding:10px">
Eine &Uuml;berschrift, die m&ouml;glicherweise zu breit ist
f&uuml;r eine Box von 300 mal 300 Pixeln</h1>
</body></html>

16.46: Netscape 6.2 interpretiert die Maximalhhe korrekt und schneidet den Text unten ab.

Beachten Sie: Der Internet Explorer 5.x und 6.0 interpretiert diese Angabe noch nicht.

overflow (Elementbereich mit bergroem Inhalt)

Diese Angabe kann von Bedeutung sein, wenn Sie fr ein Element oder einen Bereich eine feste
oder maximale gewnschte Breite oder Hhe definieren. Angenommen, Sie definieren einen

16.11 Positionierung und Anzeige von Elementen

503

Bereich mit <div>...</div>, fr den Sie mit Hilfe der Stylesheet-Angabe width eine Mindestbreite von 200 Pixeln erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz
(<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixeln hat, knnen Sie mit der
hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lsen soll. Ein Beispiel:
<html><head><title>overflow</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:100px;
left:100px; width:200px;
height:150px; overflow:hidden;
border:thin solid #804000">
abgeschnittener Hund:<br>
<img src="hund.gif" width="208" height="181" alt="Hund" border="0"></div>
</body></html>

16.47: Mit overflow regeln Sie, was der Browser mit Inhalten macht, die zu gro fr einen
Bereich sind.

Mit overflow: knnen Sie bestimmen, wie bergroe innere Elemente behandelt werden.
Folgende Angaben sind mglich:
CSS-Angabe

Wirkung

visible

Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist.
Element wird abgeschnitten, wenn es die Grenzen berschreitet.
Element wird abgeschnitten, wenn es die Grenzen berschreitet. Der WWW-Browser
sollte jedoch Scroll-Leisten anbieten, hnlich wie in einem eingebetteten FrameFenster.
Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird.
Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.

hidden
scroll

auto

504

Kapitel 16: CSS-Eigenschaften

Beachten Sie: Netscape 4.x kennt diese Eigenschaft nicht. Der Internet Explorer untersttzt die
Angabe overflow:visible nicht.

direction (Richtung)
Mit dieser Angabe knnen Sie die Schreibrichtung bei Elementen erzwingen und abhngig
davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden oder an welcher Seite berbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor
allem fr die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach
links geschrieben wird. Ein Beispiel:
<html><head><title>direction</title>
</head><body bgcolor="FFFFFF" text="#000000" style="direction:rtl">
<h1>Hi Junkie!</h1>
<p>Hier k&ouml;nnte m&ouml;glicherweise alles anders aussehen als normal ...</p>
</body></html>

Mit direction: knnen Sie die Schreibrichtung bestimmen. Folgende Angaben sind mglich:
ltr = von links nach rechts
rtl = von rechts nach links
Beachten Sie: Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.

float (Textumfluss)
Sie knnen fr einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen
Bereich bzw. dieses Element umflieen. Ein Beispiel:
<html><head><title>float</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="width:400px; float:left; color:red">&Uuml;berschrift mal anders</h1>
<p style="font-size:120%">Ein &Uuml;berschrift mu&szlig; nicht immer einen
langweiligen, &uuml;ber die ganze Breite des Anzeigefensters gehenden Block
erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text flie&szlig;t um
die &Uuml;berschrift. Auch so kann man lange Texte mal anders gestalten als sonst
&uuml;blich.</p>
</body></html>

Mit float: knnen Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den
aktuellen Bereich umflieen. Folgende Angaben sind mglich:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).

16.11 Positionierung und Anzeige von Elementen

505

16.48: Der Text fliet rechts um die berschrift.

Beachten Sie: Wenn Sie fr ein Element eine Angabe zu float notieren, mssen Sie auch eine
Angabe zu width definieren.

clear (Fortsetzung bei Textumfluss)

Wenn Sie mit float einen Textumfluss definieren, mchten Sie vielleicht nur zwei oder drei
Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden
Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe. Ein Beispiel:
<html><head><title>clear</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Kapitel<br>
<span style="font-family:Algerian,serif; font-size:72pt; color:red">
&nbsp;1&nbsp;</span></div>
<p style="font-size:120%">In diesem Kapitel geht erst mal um Einf&uuml;hrendes</p>
<p style="clear:left">Dann kommen wir mal zur Sache: ...</p>
</body></html>

16.49: Mit clear: setzen Sie den Textfluss unterhalb eines Elements fort.

506

Kapitel 16: CSS-Eigenschaften

Mit clear: knnen Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind mglich:
CSS-Angabe

Wirkung

left

Erzwingt bei float:left die Fortsetzung unterhalb.

Erzwingt bei float:right die Fortsetzung unterhalb.
Erzwingt in jedem Fall die Fortsetzung unterhalb.
Erzwingt keine Fortsetzung unterhalb (Normaleinstellung).

right
both
none

Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt, eine seitliche,
groe Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in
dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.

z-index (Schichtposition bei berlappung)

Diese Angabe ist sinnvoll in Verbindung mit mehreren Angaben zu position. Wenn Sie mehrere Elemente absolut positionieren, deren Anzeigebereiche sich berlappen, werden die Elemente normalerweise in der Reihenfolge bereinander angezeigt, in der sie definiert werden. Sie
knnen die Reihenfolge ndern, indem Sie fr die einzelnen Elemente Nummern vergeben. Elemente mit hherer Nummer berdecken Elemente mit niedrigerer Nummer. Ein Beispiel:
<html><head><title>z-index</title>
</head><body bgcolor="FFFFFF" text="#000000">
<div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid
#804000;">
<b>1.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div>
<div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid
#804000;">
<b>2.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div>
<div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid
#804000;">
<b>3.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div>
<div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid
#804000;">
<b>4.</b><img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div>
</body></html>

Mit z-index: knnen Sie die Reihenfolge von berlappenden Elementen bestimmen. Notieren
Sie fr jedes Element, fr das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je
hher die Zahl, desto weiter vorne das Element, je niedriger, desto weiter hinten das Element.
Im obigen Beispiel wird vier Mal der gleiche Bereich erzeugt mit einem transparenten GIF-Bild
als Inhalt. Die Bereiche berlappen sich aufgrund ihrer Angaben zur Positionierung und den
Ausmaen des Bildes. Normalerweise berlagert der letzte notierte Bereich alle anderen, da er als

16.11 Positionierung und Anzeige von Elementen

507

letzter notiert ist. Im Beispiel berlagert jedoch der zweite Bereich alle anderen, weil er die
hchste z-index-Nummer erhlt.

display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)

Sie knnen bestimmen, ob ein Element zunchst angezeigt werden soll oder nicht. Ohne Platzhalter bedeutet, dass bei Nichtanzeige des Elements auch kein Raum fr das Element reserviert
wird. In diesem Fall deutet bei der Anzeige also zunchst nichts darauf hin, dass das Element
berhaupt existiert. Mit Hilfe von Dynamischem HTML (Kapitel 21) knnen Sie so ein Element
nachtrglich anzeigen oder wieder verstecken.
Ferner knnen Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt
werden soll. Sie knnen bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden
oder dass es mitten im Text (inline) angezeigt werden soll. So knnen Sie beispielsweise absatzerzeugende Elemente wie berschriften in Elemente umdefinieren, die keinen eigenen Absatz
erzeugen. Ein Beispiel:
<html><head><title>display</title>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 style="display:inline">Ich bin ein inline-Element</h1>
&nbsp;<p style="display:inline">Dieser Text beweist es!</p>
<h1 id="versteckt" style="display:none">Ich bin ein Blockelement, werde aber nicht
angezeigt</h1>
<p>Und dieser Text tut so als ob sonst nichts w&auml;re!</p>
</body></html>

Mit display: knnen Sie die Anzeige von Elementen unterdrcken oder die Art der Anzeige
festlegen. Folgende Angaben sind mglich:
CSS-Angabe

Wirkung

block

Erzwingt einen Block das Element erzeugt eine neue Zeile.

Erzwingt die Anzeige im Text das Element wird im laufenden Textfluss angezeigt.
Wie block, jedoch mit einem Aufzhlungszeichen (Bullet) davor.
Deklariert automatisch generierten Text fr das Element.
Bewirken, dass das Element kontext-abhngig als Blockelement oder als Inline-Element dargestellt wird.
Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

inline
list-item
marker
run-in und
compact
none

Speziell fr die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben
zu display zur Verfgung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher fr die tabellarische
Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache bernehmen, mit deren Hilfe die XML-Daten angezeigt
werden. In CSS hat man die display-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang mglich:

508

Kapitel 16: CSS-Eigenschaften

CSS-Angabe

Wirkung

table

Das Element enthlt tabellarisch angeordnete Kindelemente und erzeugt eine

neue Zeile. Wirkt wie das table-Element in HTML.
Das Element enthlt tabellarisch angeordnete Kindelemente und wird im
laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber
inline.
Das Element enthlt nebeneinander angeordnete Kindelemente. Wirkt wie
das tr-Element in HTML.
Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML.
Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das thead-Element in HTML.
Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tfoot-Element in HTML.
Das Element steht fr eine Gruppe von Elementen, die eine Spalte der Tabelle
bilden. Wirkt wie das col-Element in HTML.
Das Element steht fr eine Gruppe von Elementen mit der Eigenschaft
table-cell. Das Element steht fr eine Tabellenzelle. Wirkt wie das tdElement in HTML (auch fr th-Elemente).
Das Element steht fr eine Tabellenberschrift. Wirkt wie das caption-Element in HTML (auch fr th-Elemente).

inline-table

table-row
table-row-group
table-header-group
table-footer-group
table-column
table-column-group

table-caption

Ein Beispiel:
<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div>
</body></html>

Das Beispiel definiert Klassen fr div-Elemente. Die Klassennamen heien genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich
die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente fr

16.11 Positionierung und Anzeige von Elementen

509

Tabellen verhalten. Innerhalb des Dateikrpers wird dann im Beispiel eine waschechte Tabelle
aus div-Elementen mit class-Attributen zusammengebaut.
Beachten Sie: Netscape 4.0 und der MS Internet Explorer 4.0 interpretieren die Angabe display:none korrekt. Die brigen Angaben werden von den 4er-Versionen der beiden Browser
jedoch nur unvollstndig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer 5.x und 6.0 noch nicht.

visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)

Sie knnen bestimmen, ob ein Element zunchst angezeigt werden soll oder nicht. Mit Platzhalter bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum fr das Element reserviert
wird. Mit Hilfe von Dynamischem HTML (Kapitel 21) knnen Sie so ein Element nachtrglich
anzeigen oder wieder verstecken. Ein Beispiel:
<html><head><title>visibility</title>
<script language="JavaScript" type="text/javascript">
<!-function show() {
if(document.getElementById)
document.getElementById("Ueberschrift").style.visibility = "visible";
}
//-->
</script>
</head><body bgcolor="FFFFFF" text="#000000">
<h1 id="Ueberschrift" style="visibility:hidden">Die &Uuml;berschrift zum Text</h1>
<p>Hier der Text. Aber fehlt da nicht was?</p>
<p><a href="javascript:show()">Anzeigen!</a></p>
</body></html>

16.50: Erst ein Mausklick startet das Script, das die berschrift sichtbar macht.

Mit visibility: knnen Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht.
Folgende Angaben sind mglich:
hidden = Der Inhalt des Element wird zunchst versteckt (nicht angezeigt).
visible = Der Inhalt des Element wird zunchst angezeigt (Normaleinstellung).

510

Kapitel 16: CSS-Eigenschaften

Im obigen Beispiel wird die berschrift zunchst nicht angezeigt. Beim Anklicken des Verweises
wird dies jedoch dynamisch nachgeholt. Auf die dazu erforderlichen JavaScript-Befehle wird an
dieser Stelle nicht nher eingegangen.

clip (Anzeigebereich eingrenzen)

Sie knnen bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhngig davon, welche Angaben sonst zur Gre des Elements gemacht wurden und unabhngig
von der automatischen Gre des Elements. Wenn das Element grer ist als der so definierte
Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit knnen Sie nur ein
Rechteck fr den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw.
Ellipsen mglich sein. Ein Beispiel:
<html><head><title>clip</title>
</head><body>
<div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px
0px);">
Etwas Hund:<br>
<img src="hund.gif" width="208" height="181" border="0" alt="Hund"></div>
</body></html>

Mit clip: knnen Sie einen Ausschnitt fr die sichtbare Anzeige definieren. Dahinter folgt der
Bezeichner rect (fr rectangle = Rechteck) und dahinter, in runde Klammern eingeschlossen,
vier numerische Werte oder das Schlsselwort auto zur Bestimmung des Ausschnitts.
Der erste der vier Werte bezeichnet den Wert fr oben, gemessen an der oberen Elementgrenze.
Der zweite der vier Werte bezeichnet den Wert fr rechts, gemessen an der linken Elementgrenze.
Der dritte der vier Werte bezeichnet den Wert fr unten, gemessen an der oberen Elementgrenze.
Der vierte der vier Werte bezeichnet den Wert fr links, gemessen an der linken Elementgrenze.
Damit berhaupt ein Ausschnitt sichtbar ist, muss der Wert fr unten grer sein als der fr
oben und der Wert fr rechts grer als der fr links. Das Schlsselwort auto bedeutet:
keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu
seiner Elementgrenze angezeigt werden.
Beachten Sie: Sowohl bei Netscape als auch beim Internet Explorer war die clip-Eigenschaft nur
im Zusammenhang mit absolut positionierten Elementen nachvollziehbar.

16.12 Layouts fr Printmedien

511

16.12 Layouts fr Printmedien

Allgemeines zu Seitenlayout und Seitenumbruch
Die hier beschriebenen Stylesheet-Angaben erffnen HTML und seiner Ergnzungssprache CSS
vllig neue Rume, denn mit diesen Angaben wird es mglich, Drucklayouts zu definieren. Die
Mglichkeit des zweigleisigen Editierens wird auch durch die Mglichkeit untersttzt, verschiedene Stylesheets fr unterschiedliche Ausgabemedien zu definieren, wie im Abschnitt 15.2 CSS
Stylesheets in HTML einbinden beschrieben.
Die Stylesheet-Angaben zu Seitenlayout und Seitenumbruch sind jedoch nicht nur fr Druckerzeugnisse interessant. Ein entsprechendes Prsentationswerkzeug bzw. ein entsprechend ausgerichteter Web-Browser knnte diese Angaben auch zur bildschirmseitenorientierten Prsentation benutzen.
Zur Zeit ist das alles jedoch noch Zukunftsmusik. Die Stylesheet-Befehle liegen vor, doch die
Browser untersttzen sie noch nicht. Von den Befehlen interpretiert lediglich der MS Internet
Explorer seit Version 4.x diejenigen fr den Seitenumbruch.

@page (Seitenlayout definieren)

Ein Seitenlayout wird in einem zentralen style-Bereich definiert. Ein Beispiel:
<style type="text/css">
@page { /* Angaben zum Seitenlayout */ }
</style>

Mit @page knnen Sie ein Seitenlayout erstellen. Die Angabe ist ein Behlter fr die einzelnen
Angaben zum Aussehen des Layouts. Dazu gehren Eigenschaften wie size (Seitengre),
margin (Seitenrnder) und bei Bedarf auch Angaben zu marks (Registermarken). Diese Angaben stehen in den geschweiften Klammern im Anschluss an @page.
Beachten Sie: @page stellt sicher, dass sich die Definitionen zum Seitenlayout in den geschweiften Klammern nur auf seitenorientierte Medien beziehen und vom WWW-Browser nicht
irrtmlich als Definitionen fr das normale Erscheinungsbild der HTML-Datei am Bildschirm
interpretiert werden. So knnen Sie mit dieser Angabe z.B. vllig unabhngig von sonstigen
Stylesheet-Angaben im gleichen Bereich ein Seitenlayout fr den Ausdruck Ihrer Web-Seiten
erstellen.

size (Seitengre)
Sie knnen bestimmen, welche Breite und Hhe Ihr Seitenlayout haben soll. Fr Druckdokumente definieren Sie auf diese Weise das gewnschte Papierformat. Fr bildschirmseitenorientierte Prsentationen knnen Sie die Gre aller Bildschirmseiten festlegen. Ein Beispiel:
<html><head><title>size</title>
<style type="text/css">
@page { size:landscape; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

512

Kapitel 16: CSS-Eigenschaften

<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. Wenn Ihr Browser
jedoch die Stylesheet-Angaben zum Seitenlayout kennt, versuchen Sie mal, diese
Datei &uuml;ber den normalen Druckbefehl Ihres Browsers auszudrucken.</p>
</body></html>

Mit size: knnen Sie im Anschluss an @page die Seitengre definieren. Erlaubt sind zwei
numerische Angaben, durch ein Leerzeichen voneinander getrennt. Dabei bedeutet die erste
Angabe die Breite der Seite (z.B. 21.0cm) und die zweite Angabe die Hhe der Seite (z.B.
29.7cm). Ferner sind folgende Angaben erlaubt:
auto = Das normale Format des Ausgabemediums (Normaleinstellung).
landscape = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch
querkant.
portrait = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch
hochkant.

margin (Seitenrnder)
Sie knnen die Abstnde zwischen Seitenrand und Seiteninhalt festlegen. Ein Beispiel:
<html><head><title>margin (page)</title>
<style type="text/css">
@page { size:21.0cm 14.85cm;
margin-top:1.7cm;
margin-bottom:1.4cm;
margin-left:2cm;
margin-right:2cm
}
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. F&uuml;r den
Ausdruck wurden jedoch Abst&auml;nde zwischen Seiteninhalt und Seitenrand
festgelegt.</p>
</body></html>

Um die Seitenrnder einzeln zu definieren, stehen folgende Angaben zur Verfgung:

CSS-Angabe

Wirkung

margin-top

oberer Seitenrand
unterer Seitenrand
linker Seitenrand
rechter Seitenrand

margin-bottom
margin-left
margin-right

16.12 Layouts fr Printmedien

513

Wenn Sie fr alle vier Seitenrnder einen einheitlichen Wert definieren wollen, knnen Sie
anstelle dieser Angaben auch die Angabe margin verwenden. Fr alle Seitenrandangaben ist eine
numerische Angabe erlaubt.
Beachten Sie: Diese Angaben haben keinen Einfluss auf Seitenrnder bei der normalen BrowserPrsentation am Bildschirm, da sie hinter der Seitenlayout-Angabe @page stehen. Fr die normale HTML-Prsentation im WWW-Browser gibt es entsprechende Stylesheet-Angaben zu
Abstand/Rand.

marks (Schnitt- und Passermarken)

Schnittmarken (engl. crop marks) sind Hilfslinien, die bei der Weiterverarbeitung in Belichtung
und Druck zum Zuschneiden von Seiten benutzt werden. Passermarken, auch Registermarken
(engl. cross marks oder register marks), sind Markierungen zum exakten Ausrichten des Satzspiegels bei Belichtung und Druck.
Wenn Sie also beispielsweise ein Seitenformat von 10.8 cm mal 18.2 cm definieren und dieses auf
DIN-A-4-Papier ausdrucken, knnen Sie solche Marken setzen, die sichtbar im Ausdruck
erscheinen und fr die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das
genaue Seitenformat anzeigen. Ein Beispiel:
<html><head><title>marks</title>
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst. F&uuml;r
Printmedienverarbeitung wurden jedoch Passermarken gesetzt.</p>
</body></html>

Mit marks: knnen Sie im Anschluss an @page Schnitt- und Passermarken definieren. Folgende
Angaben sind erlaubt:
none = keine Marken (Normaleinstellung)
crop = Schnittmarken setzen
cross = Passermarken setzen
Die Angaben crop und cross knnen Sie beide angeben, durch Leerzeichen getrennt. Dann
werden beide Markentypen bercksichtigt.

Seiten rechts/links und erste Seite

Sie knnen fr linke und rechte Seiten sowie fr die erste Dokumentseite unterschiedliche Angaben notieren. Dadurch knnen Sie beispielsweise Heft- oder Bindernder ausgleichen.

514

Kapitel 16: CSS-Eigenschaften

Ein Beispiel:
<html><head><title>Seiten rechts/links</title>
<style type="text/css">
@page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm
@page :left { margin-left:1.5cm; margin-right:2cm
@page :right { margin-left:2cm; margin-right:1.5cm

}
}

</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Das hier ist die eine Seite.</p>
<p style="page-break-before:always">Das hier die andere (wegen erwzungenem
Seitenumbruch)</p>
<p>Die beiden Seiten haben unterschiedliche Seitenr&auml;nder.</p>
</body></html>

Unterschiedliche Seiten fr rechts und links erzeugen Sie, indem Sie hinter @page, getrennt
durch ein Leerzeichen, einen Doppelpunkt notieren und sofort dahinter eines der Schlsselwrter left (zur Bezeichnung linker Seiten), right (zur Bezeichnung rechter Seiten) oder first
(zur Bezeichnung der ersten Seite) angeben. Dahinter knnen Sie in geschweiften Klammern
Angaben zu Gre, Seitenrndern und Schnitt-/Passermarken fr die beiden Seitentypen notieren. In der Praxis ist die Unterscheidung vor allem ntzlich, um (wie im obigen Beispiel) spiegelverkehrte Werte zum rechten und linken Seitenrand anzugeben. So lassen sich Heft/Bindernder ausgleichen.

page-break-before (Seitenumbruch vor einem Element)

Sie knnen einen Seitenumbruch vor einem HTML-Element erzwingen oder verhindern.
Ein Beispiel:
<html><head><title>page-break-before</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Die erste Seite</h1>
<p>und ihr Text</p>
<h1 style="page-break-before:always">Und die zweite Seite</h2>
<p>und ihr Text</p>
</body></html>

Mit page-break-before: knnen Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:

16.12 Layouts fr Printmedien

515

CSS-Angabe

Wirkung

always

Immer einen Seitenumbruch vor dem aktuellen Element einfgen.

Nie einen Seitenumbruch vor dem aktuellen Element einfgen.
Bei linken/rechten Seiten Seitenumbruch einfgen, aktuelles Element auf nchste linke
Seite.
Bei linken/rechten Seiten Seitenumbruch einfgen, aktuelles Element auf nchste
rechte Seite.
Angabe zum Seitenumbruch vom Elternelement bernehmen (erben).
Keine Angabe zum Seitenumbruch (Normaleinstellung).

avoid
left
right
inherit
auto

page-break-after (Seitenumbruch nach einem Element)

Sie knnen einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern. Ein
Beispiel:
<html><head><title>page-break-after</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Die erste Seite</h1>
<p style="page-break-after:avoid; height:22cm; border:thin solid black;
padding:0.5cm">Leerraum</p>
<p>Kommentar dazu</p>
<h1>Neue &Uuml;berschrift</h1>
<p>und ihr Text</p>
</body></html>

Mit page-break-after: knnen Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Es sind dieselben Angaben wie bei page-break-before: erlaubt, nur
beziehen sie sich auf das nachfolgende Element.

orphans (allein stehende Zeilen am Seitenende)

Sie knnen verhindern, dass Seitenumbrche innerhalb von Flietext den Text so unglcklich
trennen, dass eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die
nchsten Seite kommen (DTP-Fachjargon hierzulande: Schusterjungen). Mit orphans: bestimmen Sie, wie viele Zeilen eines lngeren Flietextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl fr die Anzahl Zeilen. Voreinstellung ist 2. Ein Beispiel:
<html><head><title>orphans</title>
<style type="text/css">
p,blockqoute { orphans:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Zu dieser Seite</h1>

516

Kapitel 16: CSS-Eigenschaften

<p>Auf dieser Seite gibt es Abs&auml;tze.</p>

<blockquote>und Zitate</blockquote>
<p>Und alle haben gemeinsam: keiner wird ungl&uuml;cklich getrennt!</p>
</body></html>

widows (allein stehende Zeilen am Seitenanfang)

Sie knnen verhindern, dass Seitenumbrche innerhalb von Flietext den Text so unglcklich
trennen, dass eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der
Seite vor dem Seitenumbruch bleiben (DTP-Fachjargon hierzulande: Hurenkinder). Mit widow:
bestimmen Sie, wie viele Zeilen eines lngeren Flietextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen. Erlaubt ist eine Zahl fr die Anzahl Zeilen.
Voreinstellung ist 2. Ein Beispiel:
<html><head><title>widows</title>
<style type="text/css">
p,blockqoute { widows:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Zu dieser Seite</h1>
<p>Auf dieser Seite gibt es Abs&auml;tze.</p>
<blockquote>und Zitate</blockquote>
<p>Und alle haben gemeinsam: keiner wird ungl&uuml;cklich getrennt!</p>
</body></html>

Benannte Seiten
Fr spezielle Seitenformate knnen Sie einzelne, benannte Seitentypen definieren. Ein Beispiel:
<style type="text/css">
@page querformat { size:landscape; }
div.uebersicht { page:querformat; /* andere CSS-Angaben */ }
</style>

Indem Sie hinter @page einen selbst vergebenen Namen notieren im obigen Beispiel ist es der
Name querformat , knnen Sie ein spezielles Seitenlayout erstellen. Innerhalb der geschweiften
Klammern knnen Sie die blichen Angaben zum Seitenlayout notieren. Benannte Seiten werden jedoch nicht automatisch verwendet, sondern nur dann, wenn ein Element vorkommt, fr
das eine CSS-Eigenschaft page: notiert ist. Im Beispiel wird fr div-Elemente mit dem Klassennamen uebersicht bestimmt, dass solche Elemente den Seitentyp querformat erzwingen.
Wenn nun also im HTML-Quelltext steht:
<div class="uebersicht">...</div>

dann wird fr die Darstellung dieses Elements der Seitentyp querformat erzwungen.

16.13 Sprachausgabe

517

16.13 Sprachausgabe
Allgemeines zur Sprachausgabe
Dank dieser CSS-Eigenschaften, die zur Version 2.0 des CSS-Sprachstandards gehren, wird es
mglich, HTML-formatierten Text fr die Sprachausgabe auf Audio-Systemen umzusetzen. Die
CSS-Eigenschaften zur Sound-Kontrolle fr Sprachausgabe erlauben es, Sprecherstimmen auf
vielfltige Weise zu beeinflussen und den Einsatz von begleitenden Geruschen oder Musikpassagen zu kontrollieren.
Die hier vorgestellten Mglichkeiten sind jedoch nicht nur fr Sehbehinderte eine Hoffnung. Sie
sind auch interessant fr schngeistige Autoren, die Texte nicht nur schreiben, sondern auch fr
den Zweck des Vorlesens exakt formatieren wollen. Vor allem als Autorenanweisungen fr Hrund Bhnenstcke knnen diese Angaben sehr interessant sein.
Die computertechnische Umsetzung einer solchen akustischen Feinsteuerung von synthetischen
Stimmen ist jedoch alles andere als trivial. Ich hr ja gar nix wird auch deshalb noch eine
Weile lang das enttuschende Erlebnis beim Anhren der Beispiele auf dieser Seite bleiben,
denn die heute verbreiteten Browser sind rein bildschirmorientiert und besitzen keine Programm-Module fr Sprachausgabe. Zwar gibt es mittlerweile Software zur Sprachausgabe von
Web-Seiten, doch auch bei solchen Produkten ist man in der Regel noch nicht so weit, die hier
vorgestellten CSS-Eigenschaften zu untersttzen.
Ein Problem bei der Sprachausgabe ist auch die Vielzahl der Landessprachen. Eine synthetische
Stimme, die auf Englisch getrimmt ist, wird sich bei der Ausgabe eines deutschen Textes
schauerlich anhren. Es ist deshalb auf jeden Fall empfehlenswert, in Dateien, die CSS-Eigenschaften fr die Sprachausgabe enthalten, die verwendete Landessprache auszuweisen. Dies kann
beispielsweise mit Hilfe des Universalattributs lang= (Kapitel 13.1) in einzelnen HTML-Elementen oder zentral im body-Element geschehen.

volume (Lautstrke)
Sie knnen fr ein HTML-Element oder einen Bereich angeben, in welcher Lautstrke er ausgegeben werden soll. Die Lautstrkeangabe ist eine relative Gre in Bezug auf die Grundlautstrke, die der Anwender eingestellt hat. Ein Beispiel:
<html><head><title>volume</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="volume:silent">Text wird mit der Lautst&auml;rke <b>silent</b>
gesprochen</p>
<p style="volume:x-loud">Text wird mit der Lautst&auml;rke <b>x-loud</b>
gesprochen</p>
<p style="volume:20">Text wird mit der Lautst&auml;rke <b>20</b> gesprochen</p>
<p style="volume:100">Text wird mit der Lautst&auml;rke <b>100</b> gesprochen</p>
</body></html>

Mit volume: knnen Sie die relative Lautstrke bestimmen. Erlaubt sind Werte zwischen 0 (sehr
leise) und 100 (sehr laut) oder einer der folgenden Angaben:

518

Kapitel 16: CSS-Eigenschaften

CSS-Angabe

Wirkung

silent

Ton aus, jedoch eine Sprechpause in der Lnge der Passage

sehr leise, entspricht Wert 0
leise, entspricht Wert 25
mittel, entpricht Wert 50
laut, entpricht Wert 75
laut, entpricht Wert 100

x-soft
soft
medium
loud
x-loud

speak (Aussprache)
Sie knnen bestimmen, wie ein Element oder ein Bereich ausgesprochen wird. Mit speak: beeinflussen Sie die Aussprache. Folgende Angaben sind erlaubt:
none = Ton aus und keine Sprechpause (Element wird quasi bergangen)
normal = normale, sprachabhngige Aussprache
spell-out = buchstabierte Aussprache (sinnvoll z.B. fr Abkrzungen)
Ein Beispiel:
<html><head><title>speak</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speak:normal">Das Wort &quot;Buchstabieren&quot; wird jetzt
buchstabiert:</p>
<p style="speak:spell-out">Buchstabieren</p>
</body></html>

pause-before (Pause vor einem Element)

Sie knnen eine Sprechpause vor einem Element erzwingen. Mit pause-before: knnen Sie
eine vorangehende Sprechpause erzwingen. Erlaubt ist eine Zeitangabe in Sekunden (s) oder
Millisekunden (ms). Alternativ dazu knnen Sie auch Prozentwerte angeben. Dann ist die
Sprechpause abhngig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit. Ein Beispiel:
<html><head><title>pause-before</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause-before:300ms">Text mit 300ms Pause davor</p>
<p style="pause-before:600ms">Text mit 600ms Pause davor</p>
<p style="pause-before:1s">Text mit 1s Pause davor</p>
<p style="pause-before:2s">Text mit 2s Pause davor</p>
</body></html>

16.13 Sprachausgabe

519

pause-after (Pause nach einem Element)

Sie knnen mit pause-after: eine Sprechpause nach einem Element erzwingen. Erlaubt ist eine
Zeitangabe in Sekunden (s) oder Millisekunden (ms). Alternativ dazu knnen Sie auch Prozentwerte angeben. Dann ist die Sprechpause abhngig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit. Ein Beispiel:
<html><head><title>pause-after</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause-after:200ms">Text mit 200ms Pause danach</p>
<p style="pause-after:400ms">Text mit 400ms Pause danach</p>
<p style="pause-after:1s">Text mit 1s Pause danach</p>
<p style="pause-after:3s">Text mit 3s Pause danach</p>
<p>Abschlie&szlig;ender Text</p>
</body></html>

pause (Pause vor/nach einem Element)

Mit pause: knnen Sie ein Element durch Sprechpausen davor und danach abgrenzen. Wenn
Sie einen Wert angeben, bedeutet dieser Wert sowohl die Sprechpause vor dem Element als auch
nach dem Element. Sie knnen auch zwei Werte angeben, durch ein Leerzeichen getrennt. Dann
bedeutet der erste Wert die Sprechpause vor dem Element und der zweite die Sprechpause
danach. Erlaubt sind Zeitangaben in Sekunden (s) oder Millisekunden (ms). Alternativ dazu
knnen Sie auch Prozentwerte angeben. Dann sind die Sprechpausen abhngig von der (ebenfalls einstellbaren) Sprechgeschwindigkeit. Ein Beispiel:
<html><head><title>pause</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<h1>Text mit Pausen</h1>
<p style="pause:500ms">Text mit 500ms Pause davor und danach</p>
<p style="pause:1300ms">Text mit 1300ms Pause davor und danach</p>
<p style="pause:1s 2s">Text mit 1s Pause davor und 2s Pause danach</p>
<p>Abschlie&szlig;ender Text</p>
</body></html>

cue-before (Erkennungssignal vor einem Element)

Mit cue-before:url([Dateiname]) knnen Sie ein Erkennungssignal voranschicken. Wenn
sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, mssen Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen
WAV, AU oder AI in Frage. Ein Beispiel:
<html><head><title>cue-before</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">

520

Kapitel 16: CSS-Eigenschaften

<p style="cue-before:url(cue.wav)">Freuen Sie sich!</p>

</body></html>

cue-after (Erkennungssignal nach einem Element)

Mit cue-after:url([Dateiname]) knnen Sie ein Erkennungssignal an ein Element anschlieen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, mssen Sie
als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate
kommen WAV, AU oder AI in Frage. Ein Beispiel:
<html><head><title>cue-after</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="cue-after:url(cue.wav)">Und jetzt folgt ein:</p>
</body></html>

cue (Erkennungssignal vor/nach einem Element)

Mit cue:url([Dateiname]) knnen Sie ein Element in zwei gleiche Erkennungssignale einschlieen. Wenn sich die Datei in einem anderen als dem aktuellen Verzeichnis befindet, mssen
Sie als [Dateiname] relative Pfadangaben oder absolute URIs verwenden. Als Sound-Dateiformate kommen WAV, AU oder AI in Frage. Ein Beispiel:
<html><head><title>cue</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="cue:url(cue.wav)">oh oh, so ein oh oh!</p>
</body></html>

play-during (Hintergrund-Sound)
Sie knnen fr ein Element oder einen Bereich einen Hintergrund-Sound definieren, der so
lange wiederholt wird, bis die Ausgabe des Elements oder Bereichs abgeschlossen ist. Das kann
etwa eine Geruschkulisse oder eine Melodie sein. Ein Beispiel:
<html><head><title>play-druring</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="play-during:url(play_during.mid) mix">W&auml;hrend dieser Text gesprochen
wird, ert&ouml;nt im Hintergrund ein flotter Ragtime als MIDI-Datei. Damit Sie in
den Genu&szlig; des gesamten St&uuml;cks kommen, m&uuml;&szlig;te ich Ihnen jetzt
eine lange Geschichte erz&auml;hlen. Aber ich denke, Sie gewinnen auch ohne eine
solche Geschichte einen Eindruck davon, wie Hintergrundmusik w&auml;hrend der
Sprachausgabe eines Textes wirkt. Vielen Dank f&uuml;r Ihre Aufmerksamkeit!</p>
</body></html>

16.13 Sprachausgabe

521

Mit play-during:url([Datei]) knnen Sie einen Hintergrund-Sound definieren. Damit ein

echter Hintergrundeffekt zustande kommt, mssen Sie auerdem, durch ein Leerzeichen
getrennt, das Wort mix dahinter notieren. Wenn Sie dieses Wort weglassen, bertnt der Hintergrund-Sound die Ausgabe des Inhalts. Wenn sich die Sound-Datei in einem anderen als dem
aktuellen Verzeichnis befindet, mssen Sie als [Dateiname] relative Pfadangaben oder absolute
URIs verwenden.
Hinter der Angabe der Datei knnen Sie noch eine der folgenden Angaben notieren:
mix = Falls das Elternelement ebenfalls Hintergrund-Sound hat, werden beide Sounds vermischt.
repeat = Wenn die Sound-Datei krzer ist als es dauert, den Text des Elements zu sprechen,
wird der Abspielvorgang so oft wiederholt, bis der Text zu Ende gesprochen ist.
auto = Falls das Elternelement ebenfalls Hintergrund-Sound hat, wird dieser nicht neu abgespielt, sondern spielt weiter ab.
Anstelle einer Sound-Datei knnen Sie auch einfach nur none angeben. Das ist sinnvoll, wenn
das Elternelement Hintergrund-Sound abspielt. Fr die Sprachausgabe des aktuellen Elements
knnen Sie die Ausgabe dann unterbrechen.

azimuth (Raum-Effekt links/rechts/vorne/hinten)

Wenn das Sprachausgabesystem rumliches Hren (mindestens stereophon, mglichst Surround-Sound) untersttzt, knnen Sie die Herkunftsrichtung der Sprechstimme bestimmen.
Ein Beispiel:
<html><head><title>azimuth</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="azimuth:left-side">Diese Stimme hier sollte von links kommen.</p>
<p style="azimuth:left-side behind">Diese Stimme hier sollte von links hinten
kommen.</p>
<p style="azimuth:center">Diese Stimme hier sollte ganz aus der Mitte kommen.</p>
<p style="azimuth:right-side behind">Diese Stimme hier sollte von rechts hinten
kommen.</p>
<p style="azimuth:right-side">Diese Stimme hier sollte von rechts kommen.</p>
</body></html>

Mit azimuth: knnen Sie die rumliche Herkunftsrichtung der Sprechstimme fr ein Element
oder einen Bereich bestimmen. Sie knnen dazu entweder eine Gradangabe fr die gedachte
Richtung notieren oder ein erlaubtes Schlsselwort. Gradangaben haben Werte zwischen 0 und
360 und mssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden, so
wie im zweiten der obigen Beispiele. Folgende Schlsselwrter sind erlaubt:

522

Kapitel 16: CSS-Eigenschaften

CSS-Angabe

Wirkung

left-side

von ganz links (entspricht 270deg)

von ganz links hinten (entspricht 270deg)
von weiter links (entspricht 300deg)
von weiter links hinten (entspricht 240deg)
von links (entspricht 320deg)
von links hinten (entspricht 220deg)
von Mitte links (entspricht 340deg)
von Mitte links hinten (entspricht 200deg)
von der Mitte (entspricht 0deg)
von Mitte hinten (entspricht 180deg)
von Mitte rechts (entspricht 20deg)
von Mitte rechts hinten (entspricht 160deg)
von rechts (entspricht 40deg)
von rechts hinten (entspricht 140deg)
von weiter rechts (entspricht 60deg)
von weiter rechts hinten (entspricht 120deg)
von ganz rechts (entspricht 90deg)
von ganz rechts hinten (entspricht 90deg)

left-side behind
far-left
far-left behind
left
left behind
center-left
center-left behind
center
center behind
center-right
center-right behind
right
right behind
far-left
far-left behind
right-side
right behind

Wenn Sie mit Gradangaben arbeiten, knnen Sie die genannten Angaben als Richtwerte fr die
exakt gewnschte Richtung verwenden. Anstelle des Schlsselwortes behind knnen Sie auch die
Schlsselwrter leftwards und rightwards benutzen. Mit leftwards richten Sie die Stimmherkunft weiter links aus (20deg weniger), mit rightwards weiter rechts (20deg mehr).

elevation (Raum-Effekt oben/unten)

Wenn das Sprachausgabesystem rumliches Hren (mglichst Surround-Sound) untersttzt,
knnen Sie die Herkunftsrichtung der Sprechstimme zwischen oben und unten bestimmen. Ein
Beispiel:
<html><head><title>evelation</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="elevation:below">Diese Stimme sollten von unten kommen.</p>
<p style="elevation:higher">Diese Stimme sollte von weiter oben kommen.</p>
</body></html>

Mit elevation: knnen Sie die vertikale Herkunftsrichtung der Sprechstimme bestimmen. Sie
knnen dazu entweder eine Gradangabe fr die gedachte Richtung notieren oder ein erlaubtes
Schlsselwort. Gradangaben haben Werte zwischen -90 (von ganz unten) und 90 (von ganz
oben) und mssen mit der Einheitenbezeichnung deg (degree = Grad) abgeschlossen werden, so
wie im zweiten der obigen Beispiele. Folgende Schlsselwrter sind erlaubt:

16.13 Sprachausgabe
CSS-Angabe
below
lower
level
above
higher

523

Wirkung
von unten
von weiter unten
von der Mitte
von oben
von weiter oben

speech-rate (Sprechgeschwindigkeit)
Sie knnen die Schnelligkeit der gesprochenen Wiedergabe beeinflussen. Ein Beispiel:
<html><head><title>speech-rate</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speech-rate:fast">Das ist ein ziemlich schnell gesprochener Text.
Hoffentlich verstehen Sie alles, was da gesagt wird, auch wenn es nicht von Belang
ist.</p>
<p style="speech-rate:x-slow">Das ist ein gaaannnz langsam gesprochener Text. Gute
Nacht!</p>
</body></html>

Mit speech-rate: knnen Sie die Sprechgeschwindigkeit bestimmen. Erlaubt sind folgende
Angaben:
CSS-Angabe

Wirkung

x-slow

ganz langsam
langsam
etwas langsamer als normal
normal
etwas schneller als normal
schnell
ganz schnell

slow
slower
medium
faster
fast
x-fast

Anstelle der Schlsselwrter knnen Sie auch numerische Werte angeben. Ein numerischer Wert
bedeutet die mittlere Anzahl Wrter pro Minute. Probieren Sie als Anhaltspunkt Werte um 100.

voice-family (Sprechertyp)
Sie knnen die Art der Stimme beeinflussen. Dies entspricht etwa dem Beeinflussen von Schriftarten bei visueller Darstellung. Ob die Angabe interpretiert werden kann, hngt neben der interpretierenden Software von den Hardwarefhigkeiten des Sprachausgabesystems ab. Ein Beispiel:

524

Kapitel 16: CSS-Eigenschaften

<html><head><title>voice-family</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="voice-family:female">Ich bin die universelle Frau. Mein Herz ist meine
Familie.</p>
<p style="voice-family:male">Ich bin der universelle Mann. Mein Herz ist meine
Frau.</p>
</body></html>

Mit voice-family: knnen Sie die Art der Sprechstimme festlegen. Folgende generische Angaben werden vom W3-Konsortium z.B. vorgeschlagen:
male = Mnnerstimme
female = Frauenstimme
child = Kinderstimme
Daneben knnen Sie auch spezifische Angaben notieren, etwa MeineEhefrau. Die entsprechende Stimme muss dem Sprachausgabesystem in digitaler Form bekannt sein.

pitch (Sprechhhe)
Mit pitch: knnen Sie die Sprechhhe festlegen. Erlaubt ist entweder die Angabe der mittleren
Sprechhhe als Frequenz (in Hz fr Hertz oder kHz fr Kilohertz) oder eine der folgenden
Angaben:
CSS-Angabe
x-low
low
medium
high
x-high

Wirkung
ganz tief
tief
normal
hoch
ganz hoch

Ein Beispiel:
<html><head><title>pitch</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="pitch:x-low">Diese Stimme spricht so tief wie m&ouml;glich zu Ihnen.
Lassen Sie sich trotzdem nicht einsch&uuml;chtern.</p>
<p style="pitch:x-high">Diese Stimme spricht so hoch wie m&ouml;glich zu Ihnen.
Schnatterdischnatterdischnatterdischnatt.</p>
</body></html>

16.13 Sprachausgabe

525

pitch-range (Sprechweise)
Mit pitch-range: knnen Sie die Sprechweise bestimmen. Normale Sprechweise entspricht
einem Wert von 50. Ein tieferer Wert bedeutet eine monotone, modulationsarme Stimme, ein
hoher Wert eine angeregte, modulationsreiche Stimme. Ein Beispiel:
<html><head><title>pitch-range</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="pitch-range:20">Dies ist ein ziemlich &ouml;der Text, deshalb wird der
mit ziemlich monotoner Stimme gesprochen.</p>
<p style="pitch-range:80">Obwohl auch dies ein ziemlich &ouml;der Text ist, wird er
dennoch mit sehr angeregter Stimme vorgetragen.</p>
</body></html>

stress (Sprechhast)
Sie knnen die Emphatik der Stimme beeinflussen. Mit stress: knnen Sie festlegen, wie hastig
die Stimme ist. Ein Wert von 50 ist normal. Ein hherer Wert bedeutet eine hastige, aufgeregte
Stimme, ein niedriger Wert eine in sich ruhende, selbstsichere Stimme. Ein Beispiel:
<html><head><title>stress</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="stress:10">Ich habe alle Zeit der Welt. Deshalb bin ich auch ganz
gelassen und spreche nur mit einem Stress-Wert von 10.</p>
<p style="stress:90">Immerzu ist alles gleich vorbei. Nie kommt man zu etwas. Alles
ist grausam. Deshalb rede ich auch so hastig. Ein Stress-Wert von 90 wurde mir
vorgegeben, stellen Sie sich das mal vor!</p>
</body></html>

richness (Stimmgewalt)
Sie knnen die Gewichtigkeit der Stimme beeinflussen. Mit richness: knnen Sie die Stimmgewalt festlegen. Normalwert ist 50. Ein hherer Wert bedeutet eine gewaltige, beherrschende
Stimme, ein niedriger Wert eine dnne, unsichere Stimme. Ein Beispiel:
<html><head><title>richness</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="richness:85">Ich bin reich. Ich bin sch&ouml;n.
Deshalb rede ich laut und klar, mit einer Stimmgewalt von 85.</p>
<p style="richness:15">Ich bin arm. Ich bin h&auml;&szlig;lich. Deshalb hab ich
auch so eine d&uuml;nne Stimme. Ihre Gewalt hat nur einen Wert von 15.</p>
</body></html>

526

Kapitel 16: CSS-Eigenschaften

speak-punctuation (Satzzeichen explizit mit ausgeben)

Sie knnen bestimmen, dass bei einem Textbereich alle darin vorkommenden Satzzeichen wie
Punkt, Komma, Ausrufezeichen usw. explizit genannt werden, also z.B. Dies ist ein Satz
Punkt. Ein Beispiel:
<html><head><title>speak-punctuation</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p style="speak-punctuation:code">H&ouml;ren Sie mal! - Oder sind Sie
schwerh&ouml;rig? Hier - und nur hier gibts was zus&auml;tzlich auf die Ohren:
n&auml;mlich exklusiv ausgesuchte, explizit ausgesprochene Satzzeichen.</p>
</body></html>

Mit speak-punctuation: haben Sie Einfluss auf die Nennung von Satzzeichen. Folgende Angaben sind erlaubt:
code = Satzzeichen mit aussprechen
none = Satzzeichen nicht mit aussprechen (Normaleinstellung)

speak-numeral (Konvention fr Zahlenausgabe)

Sie knnen bestimmen, in welcher Form grere Zahlen, z.B. 4256, ausgesprochen werden. Ein
Beispiel:
<html><head><title>speak-numeral</title>
</head><body lang="de" bgcolor="#FFFFFF" text="#000000">
<p>Rosis Telefonnummer lautet <b style="speak-numeral:digits">32168</b>.</p>
<p>Mit ihrem Gewerbe hat Rosi schon <b style="speak-numeral:continous">32168</b>
Dollar verdient.</p>
</body></html>

Mit speak-numeral: knnen Sie festlegen, wie Zahlenfolgen ausgesprochen werden. Erlaubt
sind folgende Angaben:
digits = ziffernweise, 456 also etwa als vier fnf-sechs
continous = als Zahl, 456 also etwa vierhundertsechsundfnfzig

16.14 Anzeigefenster
Allgemeines zum Anzeigefenster
Zum Anzeigefenster gibt es zunchst einmal zu sagen, dass es Teil der Arbeitsumgebung des Anwenders ist und deshalb kein Spiel- und Tummelplatz fr Autoren von Web-Seiten. Die einzige
Eigenschaft des Anzeigefensters, auf die das W3-Konsortium in der CSS-Spezifikation den
Zugriff ermglicht, ist das Aussehen des Mauszeigers. Das ist insofern sinnvoll, als es zur Funktionalitt von Web-Seiten untersttzend beitragen kann.

16.14 Anzeigefenster

527

ber den Sinn der CSS-Eigenschaften, die Microsoft in den Internet Explorer seit Version 5.5
eingebaut hat, kann man dagegen geteilter Meinung sein. Im Rahmen stimmiger Web-Designs
kann es sinnvoll sein, dass auch die Scroll-Leisten des Bowser-Fensters oder die von mehrzeiligen
Formulareingabefeldern zu den brigen Farben passen. Andererseits wecken solche Mglichkeiten wieder neue Begehrlichkeiten in jenen Leuten, die ber ihre Web-Seiten am liebsten den
Computer des Anwenders ein- und ausschalten wrden. Denn natrlich wollen die als Nchstes
auch die Men- und Werkzeugleiste des Browsers gestalten knnen.

16.14.1

cursor (Mauszeiger)

Sie knnen fr ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus
ber die Flche fhrt, die das Element einnimmt, nimmt der Mauscursor die angegebene Gestalt
an. Da Mauszeiger immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll,
solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, das
bestimmte Befehle ausfhrt. Ein Beispiel:
<html><head><title>cursor</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="background-color:#F8F8FF; padding:10pt; border:thin solid black;
width:100%; cursor:crosshair;">
<p>Dies ist ein Bereich mit der Angabe <b>cursor:crosshair</b>.
Fahren Sie mit der Maus &uuml;ber diesen Bereich.</p></div>
<!--usw.-->
</body></html>

16.51: Die CSS-Angabe fr den Bereich beeinflusst den Mauszeiger.

528

Kapitel 16: CSS-Eigenschaften

Mit cursor: knnen Sie das Aussehen des Mauszeiger fr den Fall definieren, dass der Anwender mit der Maus ber den entsprechenden Bereich fhrt. Folgende Angaben sind erlaubt:
CSS-Angabe

Wirkung

auto

automatischer Cursor (Normaleinstellung)

plattformunabhngiger Standard-Cursor
Cursor in Form eines einfachen Fadenkreuzes
Cursor in Form eines Zeigers
Cursor in Form eines Kreuzes, das die Fhigkeit zum Bewegen des Elements signalisiert
Cursor in Form eines Pfeils, der nach oben zeigt (n: Norden)
Cursor in Form eines Pfeils, der nach rechts oben zeigt (ne: Nordost)
Cursor in Form eines Pfeils, der nach rechts zeigt (e: Osten)
Cursor in Form eines Pfeils, der nach rechts unten zeigt (se: Sdost)
Cursor in Form eines Pfeils, der nach unten zeigt (s: Sden)
Cursor in Form eines Pfeils, der nach links unten zeigt (sw: Sdwest)
Cursor in Form eines Pfeils, der nach links zeigt (w: Westen)
Cursor in Form eines Pfeils, der nach links oben zeigt (nw: Nordwest)
Cursor in einer Form, die normalen Text symbolisiert
Cursor in Form eines Symbols, das einen Wartezustand signalisiert
Cursor in Form eines Symbols, das Hilfe zu dem Element signalisiert
Beliebiger Cursor, [Datei] sollte eine GIF- oder JPG-Grafik sein

default
crosshair
pointer
move
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
text
wait
help
url([Datei])

Beachten Sie: Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise cursor:move fr ein Element benutzen, sollte dieses Element auch tatschlich beweglich sein (etwa
mit Hilfe von Dynamischem HTML), und wenn Sie cursor:help benutzen, erwartet der
Anwender beim Anklicken des Bereichs, dass am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint. Netscape 6.x und Internet Explorer 5.x interpretieren die Angabe
url([Datei]) nicht.

scrollbar (Microsoft-Eigenschaften fr Scroll-Leiste

Die hier beschriebenen Eigenschaften lassen sich auf HTML-Elemente wie body oder textarea
anwenden. Bei body legen Sie die Farben der Fenster-Scroll-Leisten fest, bei textarea die
Farben der Scroll-Leisten des Eingabebereichs. Ein Beispiel:
<html><head><title>scrollbars</title>
<style type="text/css">
body, textarea {
background-color:#8C8CC6;
color:#FFFFFF;
font-family:"Andale Mono",Arial,sans-serif;
scrollbar-base-color:#8C8CC6;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;

16.14 Anzeigefenster

529

scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}
</style>
</head><body>
<h1 style="text-decoration:underline">Ton in Ton</h1>
<form name="Seite">
<p>Den Text dieser Seite k&ouml;nnen Sie selber schreiben:</p>
<textarea name="Text" cols="80" rows="200"></textarea>
</form>
</body></html>

16.52: Die einheitliche Farbgestaltung umfasst auch die Rollbalken in Eingabefeldern und am
Browser-Rand.

Mit den folgenden Eigenschaften knnen Sie die Einzelteile von Scroll-Leisten bestimmen. Bei all
diesen Eigenschaften ist eine Farbangabe mglich.
CSS-Angabe

Wirkung

scrollbar-base-color

Basisfarbe der Scroll-Leiste

Farbe fr 3-D-Effekte
Farbe fr Verschiebepfeile
Farbe fr Schatten
Farbe fr Oberflche
Farbe fr oberen und linken Rand
Farbe fr unteren und rechten Rand
Farbe fr frei bleibenden Verschiebeweg

scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color

530

Kapitel 16: CSS-Eigenschaften

16.15 Filter (nur Microsoft)

Allgemeines zu Filtern
Die hier vorgestellten CSS-Eigenschaften kommen aus dem Bereich der Bildbearbeitung. Die
Filter berechnen Effekte, die sich auf geeignete Objekte anwenden lassen. Durch diese Filter werden zwar sehr interessante optische Effekte mglich. Auch kunstvolle Textgestaltung ist damit
mglich, was manche Grafik erspart. Dennoch sind all die CSS-Eigenschaften fr Filter kein
CSS-Standard und ein propietres Leistungsmerkmal des Internet Explorers. Andere Browser
interpretieren diese Eigenschaften nicht. Sie knnen fr einzelne Elemente Filter angeben, die
das Element dynamisch verndern. Das Prinzip ist immer das gleiche. Ein Beispiel:
<img src="grafik.gif" style="filter:Blur(strength=50)">
<img src="grafik.gif" style="filter:Blur(strength=50) FlipH();">

Mit filter: knnen Sie einen Effekt-Filter bestimmen. Hinter dem Doppelpunkt folgt der Aufruf eines Filters. Einige Filter erwarten Parameter, andere nicht. Die Parameter und Ihre Wertangaben zu den Filtern notieren Sie in Klammern unmittelbar hinter dem Filternamen, so wie
im obigen Beispiel (strength=50) als Parameter an den Filter Blur() bergeben wird. Wenn
ein Filter keine Parameter erwartet, notieren Sie trotzdem die Klammern, lassen den Inhalt
dazwischen aber leer.
Sie knnen auch mehrere Filter kombinieren. Im zweiten der obigen Beispiele werden etwa die
beiden Filter Blur() und FlipH() kombiniert. Dazu drfen Sie nur einmal das Schlsselwort
filter: notieren. Zwischen diesem Schlsselwort und dem nchsten Semikolon (;) zum
Abschlieen der Stylesheet-Angabe knnen Sie mehrere Filter notieren. Trennen Sie die Filter
durch ein Leerzeichen vor dem Namen des nchsten Filters, so wie im Beispiel vor FlipH(). Die
Filter sind fr die folgenden HTML-Elemente gedacht (bei anderen funktionieren sie nicht):
HTML-Element

Wirkung

body

Effekt betrifft die gesamte angezeigte Seite.

Effekt betrifft die Schaltflche.
Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width:
und/oder height: und/oder position.
Effekt betrifft die referenzierte Grafik.
Effekt betrifft das Eingabefeld.
Effekt betrifft den Lauftext.
Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben width:
und/oder height: und/oder position.
Effekt betrifft die Tabelle.
Effekt betrifft die Datenzelle einer Tabelle.
Effekt betrifft das mehrzeilige Eingabefeld.
Effekt betrifft den Fubereich einer Tabelle.
Effekt betrifft die Kopfzelle einer Tabelle.
Effekt betrifft den Kopfbereich einer Tabelle.
Effekt betrifft die Zeile einer Tabelle.

button
div
img
input
marquee
span
table
td
textarea
tfoot
th
thead
tr

16.15 Filter (nur Microsoft)

531

Beachten Sie: Es gibt noch drei weitere Microsoft-Filter, die jedoch Script-Sprachen-Untersttzung bentigen. berhaupt werden diese Filter erst so richtig interessant, wenn sie dynamisch
verndert werden. Lesen Sie dazu im Kapitel 21 ber Dynamisches HTML den Abschnitt 21.6
Dynamische Filter (nur Microsoft).
Auf dieser Seite werden die Filter beschrieben, die mit dem Internet Explorer 4.0 eingefhrt
wurden. Mit der Version 5.5 seines Browsers hat Microsoft wieder eine neue, erweiterte Syntax
eingefhrt. An die Stelle des Syntax-Schemas
filter:filtername(Eigenschaften)

tritt das neue Syntax-Schema:

filter:progid:DXImageTransform.Microsoft.filtername(Eigenschaften)

filter:Alpha() (Vordergrund/Hintergrund verschmelzen)

Mit diesem Filter knnen Sie Vordergrundelemente mit Hintergrundelementen farblich verschmelzen. Der Filter erlaubt verschiedene Mglichkeiten, wie ein Vordergrundelement aus
seinem Hintergrund heraustreten kann. Ein Beispiel:
<html><head><title>filter:Alpha()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="background-image:url(background3.jpg); padding:20px; textalign:center">
<img src="filter_alpha.gif" style="filter:Alpha(opacity=100, finishopacity=0,
style=2)" width="247" height="383" alt="Grafik" border="0"></div>
</body></html>

16.53: Das Bild und der Bereichshintergrund gehen flieend ineinander ber.

532

Kapitel 16: CSS-Eigenschaften

Mit filter:Alpha() knnen Sie Vordergrundelemente und Hintergrundelemente ineinander

verschmelzen. Geeignet ist der Filter z.B. fr Grafiken, die auf Hintergrundgrafiken erscheinen.
Dieser Filter erwartet folgende Parameter:
opacity= Deckgrad am Urpsrung der Verschmelzung. Erlaubt sind Werte zwischen 0 und
100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100
bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).
finishopacity= Deckgrad am Ende der Verschmelzung. Erlaubt sind Werte zwischen 0 und
100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100
bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).
style= Art, in der der Filter wirkt. Erlaubt sind die Werte 0, 1, 2 und 3.
0 bedeutet: Hintergrund und Vordergrund werden farblich addiert. Das Vordergrundelement
wird farblich entsprechend manipuliert. Keine Verschmelzung. Angaben zu den anderen Parametern sind in diesem Fall nicht erforderlich, d.h. Alpha(style=0) gengt.
1 bedeutet: linearer Verlauf von einem selbst definierbaren Anfangspunkt zu einem selbst definierbaren Endpunkt. Am Anfangspunkt gilt der Wert, der bei opacity= angegeben wird. Ab
dem Endpunkt verliert der Wert fr opacity= seinen Einfluss, und der Wert fr finishopacity= dominiert. Den Anfangspunkt bestimmen Sie durch startx= und starty=, den Endpunkt durch finishx= und finishy=.
2 bedeutet: radialer (elliptischer) Verlauf von innen nach auen. Ganz innen gilt der angegebene Wert fr opacity=, ganz auen der angegebene Wert fr finishopacity=. In diesem
Fall knnen Sie Angaben zu startx=, starty=, finishx= und finishy= weglassen, so wie
im obigen Beispiel.
3 bedeutet: rechteckiger Verlauf von innen nach auen. Ganz innen gilt der angegebene Wert
fr opacity=, ganz auen der angegebene Wert fr finishopacity=. In diesem Fall knnen
Sie Angaben zu startx=, starty=, finishx= und finishy= weglassen, so wie im obigen
Beispiel.
startx= Anfangspunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur
in Verbindung mit style=1 von Bedeutung.
starty= Anfangspunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in
Verbindung mit style=1 von Bedeutung.
finishx= Endpunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur in
Verbindung mit style=1 von Bedeutung.
finishy= Endpunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in
Verbindung mit style=1 von Bedeutung.

filter:Blur() (Verwisch-Effekt)
Dieser Filter erlaubt es, Grafiken in HTML mit Verwisch-Effekt auszustatten. Ein Beispiel:
<html><head><title>filter:Blur()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>links das Bild in seiner normalen Form, rechts mit Blur()-Filter:</p>

16.15 Filter (nur Microsoft)

533

<img src="filter_blur.jpg" width="91" height="177" alt="Bild" border="0">

<img src="filter_blur.jpg" width="91" height="177" alt="Bild" border="0"
style="filter:Blur(direction=45, strength=40)">
<div style="width:100%; padding:20px; font-size:42pt; color:red;
filter:Blur(direction=235, strength=6)">Text mit Blur-Effekt</div>
</body></html>

16.54: Eine Grafik (rechts) und Text mit Verwisch-Effekt.

Mit filter:Blur() knnen Sie einen Verwisch-Effekt definieren. Geeignet ist der Filter fr
Grafiken. Dieser Filter erwartet folgende Parameter:
add= Diesen Parameter brauchen Sie nur anzugeben, wenn Sie add=0 notieren wollen. Dann
erscheinen die Konturen der Grafik gar nicht mehr, und am Bildschirm erscheint nur noch
die Verwisch-Spur. Der Effekt wird dadurch sehr stark, die eigentliche Grafik ist oft nicht
mehr zu erkennen.
direction= Mit diesem Parameter geben Sie die Richtung an, in die die Verwisch-Spur
fhrt. Es wirkt dann so, als ob die Grafik aus dieser Richtung kommt. Erlaubt sind die Werte
0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Die Verwisch-Spur zeigt nach oben.
45 bedeutet: Die Verwisch-Spur zeigt nach oben rechts.
90 bedeutet: Die Verwisch-Spur zeigt nach rechts.
135 bedeutet: Die Verwisch-Spur zeigt nach unten rechts.
180 bedeutet: Die Verwisch-Spur zeigt nach unten.
225 bedeutet: Die Verwisch-Spur zeigt nach unten links.
270 bedeutet: Die Verwisch-Spur zeigt nach links.
315 bedeutet: Die Verwisch-Spur zeigt nach oben links.
strength= Mit diesem Parameter bestimmen Sie, wie stark der Verwisch-Effekt sein soll. 0
bedeutet keinen Verwisch-Effekt, jeder hhere Wert die Verwisch-Spur in Pixeln. Beachten

534

Kapitel 16: CSS-Eigenschaften

Sie jedoch, dass die Grafik innerhalb ihrer normalen Bildgre dargestellt wird. VerwischSpur von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.

filter:Chroma() (Transparenzfarbe)
Mit diesem Filter knnen Sie bei Grafiken eine Farbe als transparent definieren. Anders als bei
transparenten GIF-Grafiken (Kapitel 24.3.6) sind jedoch auch alle anderen Farben der Grafik
betroffen. Mit filter:Chroma() knnen Sie eine Farbe in einer Grafik als transparent definieren. Der Filter erwartet folgenden Parameter: color= Eine Farbangabe. Ein Beispiel:
<html><head><title>filter:Chroma()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>links das Bild in seiner normalen Form, rechts mit Chroma()-Filter:</p>
<img src="filter_chroma.gif" width="106" height="109" alt="Bild" border="0">
<img src="filter_chroma.gif" style="filter:Chroma(color=#DDBB99)" width="106"
height="109" alt="Bild" border="0"></pre>
</body></html>

16.55: Im rechten Bild ist eine Farbe als transparent definiert.

filter:DropShadow() (Schattenwurf)
Dieser Filter bewirkt einen Schatteneffekt fr alle Konturen eines Elements. Bei Text bilden die
Zeichen die Konturen, bei Grafiken sollten Sie nur solche fr den Filter benutzen, die eindeutige
Konturen haben, z.B. Cliparts. Ein Beispiel:
<html><head><title>filter:DropShadow()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="width:100%; font-size:64pt; color:blue;
filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">
Text mit Schattenwurf</div>
</body></html>

16.15 Filter (nur Microsoft)

535

16.56: Eine Schrift mit dem DropShadow-Effekt.

Mit filter:DropShadow() knnen Sie einen Schattenwurf erzwingen. Der Filter erwartet folgende Parameter:
color= Eine Farbe, die als Schatten definiert werden soll (siehe Farbangaben).
offx= Anzahl fr den Schatteneffekt horizontal in Pixeln. Positive Zahlen bewirken einen
Schatteneffekt rechts, negative mit Minuszeichen davor einen Schatteneffekt links.
offy= Anzahl fr den Schatteneffekt vertikal in Pixeln. Positive Zahlen bewirken einen
Schatteneffekt unten, negative mit Minuszeichen davor einen Schatteneffekt oben.
positive= Diesen Parameter sollten Sie nur angeben, wenn Sie nur fr die transparenten
Pixel einer Grafik (siehe transparente GIF-Grafiken, Kapitel 24.3.6) einen Schatteneffekt
erzwingen wollen. Dazu sollte dieser Parameter den Wert 1 erhalten.
Beachten Sie: Fr verlaufende Schatten knnen Sie den Filter fr filter:Shadow() verwenden.

filter:FlipH() (horizontal spiegeln)

Mit filter:FlipH() bewirken Sie die horizontale Spiegelung. Geeignet ist der Filter fr Grafiken in HTML. Dieser Filter erwartet keine Parameter. Ein Beispiel:
<html><head><title>filter:FlipH()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit FlipH()-Filter:</p>
<img src="filter_flip.jpg" width="200" height="140" border="0" alt="Bild">
<img src="filter_flip.jpg" style="filter:FlipH()" width="200" height="140"
border="0" alt="Bild">
</body></html>

536

Kapitel 16: CSS-Eigenschaften

16.57: Der Filter spiegelt die Grafik auf der rechten Seite.

filter:FlipV() (vertikal spiegeln)

Mit filter:FlipV() bewirken Sie die vertikale Spiegelung. Geeignet ist der Filter fr Grafiken
in HTML. Dieser Filter erwartet keine Parameter. Ein Beispiel:
<html><head><title>filter:FlipV()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit FlipV()-Filter:</p>
<img src="filter_flip.jpg" width="200" height="140" border="0" alt="Bild">
<img src="filter_flip.jpg" style="filter:FlipV()" width="200" height="140"
border="0" alt="Bild">
</body></html>

16.58: Der Filter stellt die Grafik auf den Kopf.

filter:Glow() (glhender Rand)

Dieser Filter bewirkt einen Heiligenschein um ein Text- oder Grafikobjekt. Ein Beispiel:
<html><head><title>filter:Glow()</title>
</head><body bgcolor="#FFFFFF" text="#000000">

16.15 Filter (nur Microsoft)

537

<div style="width:100%; font-size:64pt; color:#9999CC;

filter:Glow(color=#000000, strength=12)">Gl&uuml;hender Text</div>
</body></html>

16.59: Der Glheffekt ist ganz nett, reicht aber nicht an die Fhigkeiten von Grafikprogrammen
heran.

Mit filter:Glow() knnen Sie einen glhenden Rand definieren. Dieser Filter erwartet folgende Parameter:
color= Eine Farbe, die als Glhfarbe definiert werden soll.
strength= Strke der Wirkung. Erlaubt sind Werte zwischen 1 und 255, praxisgerecht sind
aber in den meisten Fllen nur Werte zwischen 1 und etwa 20.

filter:Gray() (Graustufen)
Dieser Filter entfernt alle Farbinformationen aus einem Element oder einer Grafik und wandelt
sie in Graustufen um. Mit filter:Gray() knnen Sie Graustufen erzwingen. Geeignet ist der
Filter besonders fr Grafiken. Dieser Filter erwartet keine Parameter. Ein Beispiel:
<html><head><title>filter:Gray()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit Gray()-Filter:</p>
<img src="filter_gray.jpg" width="200" height="240" border="0" alt="Bild">
<img src="filter_gray.jpg" style="filter:Gray()" width="200" height="240"
border="0" alt="Bild">
</body></html>

filter:Invert() (Invertieren)
Mit filter:Invert() knnen Sie invertieren. Alle Farben werden bei der Anzeige in ihre
Komplementrfarben verwandelt. Geeignet ist der Filter besonders fr Grafiken. Dieser Filter
erwartet keine Parameter. Ein Beispiel:
<html><head><title>filter:Invert()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit Invert()-Filter:</p>

538

Kapitel 16: CSS-Eigenschaften

<img src="filter_invert.jpg" width="200" height="200" border="0" alt="Bild">

<img src="filter_invert.jpg" style="filter:Invert()" width="200" height="200"
border="0" alt="Bild">
</body></html>

16.60: Der Filter Invert() wandelt alle Farben in ihre Komplementrfarben um.

filter:Mask() (Transparenzmaske)
Dieser Filter ist fr transparente GIF-Grafiken gedacht. Er ersetzt alle transparenten Pixel der
Grafik durch eine gewnschte Farbe und alle nichttransparenten Pixel der Grafik durch die
Farbe, die in der Grafik als transparent definiert ist. Mit filter:Mask() knnen Sie fr eine
transparente GIF-Grafik eine Transparenzmaske definieren. Der Filter erwartet den Parameter
color=, der die Farbe der Maske angibt. Ein Beispiel:
<html><head><title>filter:Mask()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit Mask()-Filter:</p>
<img src="filter_mask.gif" width="100" height="94" border="0" alt="Bild">
<img src="filter_mask.gif" style="filter:Mask(color=#000066)" width="100"
height="94" border="0" alt="Bild">
</body></html>

16.61: Rechts sehen Sie alle Pixel, die im GIF-Bild als transparent gekennzeichnet sind.

16.15 Filter (nur Microsoft)

539

filter:Shadow() (Schatten)
Dieser Filter bewirkt einen Verlaufsschatten um die Konturen eines Elements. Ein Beispiel:
<html><head><title>filter:Shadow()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="width:100%; font-size:48pt; color:magenta; filter:Shadow(color=#000000,
direction=45)">
Text mit Schatten</div>
</body></html>

16.62: Der Shadow-Filter macht seinem Namen alle Ehre.

Mit filter:Shadow() knnen Sie einen Schatten erzeugen. Dieser Filter erwartet folgende
Parameter:
color= Eine Schattenfarbe
direction= Mit diesem Parameter geben Sie die Richtung an, in die der Schatteneffekt fhrt.
Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Der Schatteneffekt zeigt nach oben.
45 bedeutet: Der Schatteneffekt zeigt nach oben rechts.
90 bedeutet: Der Schatteneffekt zeigt nach rechts.
135 bedeutet: Der Schatteneffekt zeigt nach unten rechts.
180 bedeutet: Der Schatteneffekt zeigt nach unten.
225 bedeutet: Der Schatteneffekt zeigt nach unten links.
270 bedeutet: Der Schatteneffekt zeigt nach links.
315 bedeutet: Der Schatteneffekt zeigt nach oben links.

filter:Wave() (wellenartige Strung)

Dieser Filter bewirkt eine wellenfrmige Verzerrung des betroffenen Text- oder Grafikobjekts.
Ein Beispiel:
<html><head><title>filter:Wave()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<div style="width:100%; font-size:92pt; font-weight:900; color:#FFCCFF;

540

Kapitel 16: CSS-Eigenschaften

filter:Wave(freq=5, light=20, phase=50, strength=6) Shadow(color=#808080,

direction=135);">
Wave-Text</div>
</body></html>

Mit filter:Wave() knnen Sie eine wellenartige Verzerrung definieren. Dieser Filter erwartet
folgende Parameter:
freq= Die Wellenfrequenz. Je hher der Wert, desto kleiner die Wellen, je niedriger, desto
grer die einzelnen Wellen. Praxisnah sind etwa Werte zwischen 5 und 50.
light= Strke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und 100.
phase= Beginn der Sinus-Wellenphase in Prozent. Werte zwischen 0 und 100. Bei 0 beginnt
der Welleneffekt normal, bei 25 etwa beginnt er bei 90.
strength= Strke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und 10.
add= Wenn der Effekt auf eine Grafik angewendet wird, bewirkt add=1, dass die Originalgrafik zu der verzerrten Grafik hinzugefgt wird. Bei add=0 wird die Originalgrafik nicht hinzugefgt.

16.63: Die Wirkung des Wave-Filters hngt unter anderem von der Breite des Browser-Fensters
ab.

filter:XRay() (Foto-Negativ-Effekt)
Dieser Filter konvertiert alle Farben eines Elements oder einer Grafik in Graustufen und bewirkt
einen Effekt wie ein Foto-Negativ. Mit filter:XRay() knnen Sie den Foto-Negativ-Effekt
erzwingen. Dieser Filter erwartet keine Parameter. Ein Beispiel:
<html><head><title>filter:XRay()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>Links die normale Grafik, rechts mit XRay()-Filter:</p>
<img src="filter_x_ray.jpg" width="276" height="189" border="0" alt="">
<img src="filter_x_ray.jpg" style="filter:XRay()" width="276" height="189"
border="0" alt="">
</body></html>

16.15 Filter (nur Microsoft)

16.64: Aus Bildern macht der XRay-Filter ein graues Negativ.

541

543

17 JavaScript und DOM

17.1

JavaScript und HTML

JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache.
Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in
die Hand zu geben, mit dessen Hilfe sich Web-Seiten optimieren lassen.
JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie
werden zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser
entsprechende Interpreter-Software.
Ein paar praktische Beispiele fr die Anwendung von JavaScript knnen Sie in der HTML-Version dieses Buches auf der Buch-CD ausprobieren. So sind beispielsweise die kleinen Helferlein
JavaScript-Anwendungen, ebenso die Quickbar und die Suche. Letztere ist allerdings eine ziemlich anspruchsvolle Anwendung, die schon weit ber das bliche Ma dessen hinausgeht, wie
JavaScript blicherweise eingesetzt wird.

17.1: Die Suchfunktion auf der Buch-CD liefert schnell die gewnschten Ergebnisse.

In einer Programmiersprache wie JavaScript gibt es fr Anfnger viele verwirrende Elemente:

Sonderzeichen, Variablen, Wenn-dann-Anweisungen, Schleifen, Funktionen, Methoden, Parameter, Objekte, Eigenschaften und anderes mehr. Um mit diesen Elementen richtig umgehen zu
knnen, mssen Sie lernen sich vorzustellen, was im Computer passiert, wenn der Programmcode ausgefhrt wird. Das ist ein langwieriger Lernprozess, den Anfnger nur durch viel bung
bewltigen. JavaScript ist dazu allerdings hervorragend geeignet, weil es eine vergleichsweise

544

Kapitel 17: JavaScript und DOM

einfache Sprache ist, bei der viele Aufgabenbereiche einer groen Programmiersprache fehlen,
z.B. Dinge wie Arbeitsspeicherverwaltung oder Dateioperationen. Auerdem setzt JavaScript auf
einer bestimmten Umgebung auf, nmlich auf einer anzuzeigenden oder angezeigten Web-Seite.
JavaScript luft in einer so genannten Sandbox. Das ist eine Art Sicherheitskfig, in dem die
Programmiersprache eingesperrt ist. Sie wird dabei um typische Mglichkeiten anderer Programmiersprachen beschnitten, vor allem um die Mglichkeit, beliebig Daten aus Dateien lesen
und in Dateien schreiben zu knnen. So soll verhindert werden, dass JavaScript-Programmierer
auf den Rechnern von Anwendern, die eine JavaScript-untersttzte Web-Seite aufrufen, Unfug
treiben knnen. Nach einigen Anfangsproblemen der Vergangenheit funktioniert das mittlerweile auch ganz gut. Wer also JavaScript in seinem Browser deaktiviert aus Angst, dass seine
Festplatte damit formatiert werden knnte, sollte sich am besten ganz vom Internet fernhalten,
denn schon beim Abruf von E-Mails lauern Gefahren, die wesentlich grer sind als diejenigen,
die von JavaScript ausgehen. Doch leider gibt es andere gute Grnde, die nicht wenige Anwender
dazu veranlassen, JavaScript in ihrem Browser abzuschalten. Dazu gehren vor allem die Nervereien mancher Programmierhelden, die meinen, eine Web-Seite sei um so toller, je mehr sie
den Anwender gngelt. Da wird dann beispielsweise mit JavaScript die Untersttzung der rechten Maustaste abgewrgt, der Anwender kann die aufgerufene Seite nicht mehr verlassen und
allerlei mehr. Solche Hirngeburten kontrollgeiler Programmierer sind das eigentliche bel und
der Grund, warum JavaScript nicht bei allen Anwendern beliebt ist. Wer JavaScript einsetzt,
sollte sich darber im Klaren sein und die Mglichkeiten der Sprache so einsetzen, dass der
Anwender einen Mehrwert davon hat, und nicht so, dass ihm etwas genommen wird.
Bevor Sie sich also in die Tiefen von JavaScript strzen, sollten Sie sich auch darber bewusst
sein, dass JavaScript wirklich nur als Ergnzug zu normalem HTML gedacht ist, aber nicht als
dessen Ersatz. Es ist zwar durchaus mglich, Web-Seiten ausschlielich in JavaScript zu programmieren, sodass man kaum mehr davon reden kann, dass JavaScript in HTML eingebettet
ist, sondern eher davon, dass der HTML-Code der Seite mit Hilfe von JavaScript dynamisch
erzeugt wird. Doch solche Seiten funktionieren nur dort, wo JavaScript im Browser aktiviert ist
und wo der Browser all das versteht, was Sie programmiert haben (ansonsten endet der Versuch,
die Seite anzuzeigen, sehr schnell in einer nchternen Fehlermeldung). Fr Web-Seiten, bei
denen Information im Vordergrund steht und die auch von Suchmaschinen-Robots und Benutzerrandgruppen wie Sehbehinderten erfasst werden sollen, mssen Sie darauf achten, JavaScript
nur so einzusetzen, dass die Web-Seiten auch ohne eingeschaltetes JavaScript ordentlich angezeigt werden und die Navigation zwischen den Seiten auch ohne JavaScript funktioniert.

17.2

Standards, Sprachvarianten und Sprachversionen

JavaScript ist eine Sprache, die 1995 von Netscape eingefhrt und lizenziert wurde. Es war also
eine firmeneigene, proprietre Angelegenheit, und Netscape diktierte, woraus das offizielle
JavaScript bestand. Mittlerweile ist die Situation aus verschiedenen Grnden unbersichtlicher
geworden aber JavaScript gibt es nach wie vor und erfreut sich bei Web-Seiten-Gestaltern groer Beliebtheit.
Netscape versuchte schon frhzeitig, JavaScript nicht als willkrliche Eigenentwicklung dastehen
zu lassen, sondern der Sprache den Charakter eines Standards zu verleihen. Dazu spannte man
die Organisation ECMA (European Computer Manufacturers Association, www.ecma.ch/) ein.

17.2 Standards, Sprachvarianten und Sprachversionen

545

Unter dem Namen ECMAScript lie sich Netscape von dieser Organisation JavaScript als
Industriestandard deklarieren. In der Spezifikation ECMA-262 wurde dieser Standard festgeschrieben.
Microsoft konterte auf seine Weise. Der MS Internet Explorer interpretiert zwar JavaScript,
daneben aber auch die Microsoft-eigene Sprachvariante JScript. Diese Sprache implementierte
Microsoft nicht zuletzt, um sich aus den Lizenzvorgaben von Netscape herauszuwinden und das,
was bei Netscape unter JavaScript lief, selbststndig erweitern zu knnen. JScript umfasst die
ganze Palette von JavaScript, doch daneben auch noch etliche spezielle Befehle fr den Zugriff
auf das Dateisystem und Betriebssystem Windows (das Ganze bezeichnet Microsoft als Windows Scripting Host). JScript ist insgesamt also viel mchtiger als JavaScript, doch es ist auch
fr andere Aufgaben gedacht. Es hat eine ganz eigene Versionenpolitik, die nichts mit der von
JavaScript gemein hat. Bekannter als die JScript-Versionen sind jedoch nach wie vor die JavaScript-Versionen, und wenn Sie JavaScript verwenden, geben Sie in der Regel auch JavaScript
als Sprache an und nicht JScript. Der Internet Explorer kommt damit klar.
Netscape 2.0 interpretiert den seinerzeit eingefhrten JavaScript-Sprachstandard 1.0 (Ende
1995). Der MS Internet Explorer versteht diesen Sprachstandard weitgehend seit der Version
3.0 (1996).
Netscape interpretiert seit Version 3.0 den JavaScript-Standard 1.1 (ebenfalls 1996). Der MS
Internet Explorer interpretiert diesen Sprachumfang von JavaScript weitgehend seit der Produktversion 4.0 (1997).
Netscape interpretiert seit Version 4.0 den JavaScript-Standard 1.2 (1997). Einige Befehle
dieser Sprachversion werden auch vom MS Internet Explorer seit Version 4.0 interpretiert.
Die JavaScript-Version 1.3 ist in Netscape in den heute am meisten verbreiteten NetscapeVersionen 4.06 bis 4.7 implementiert (1998-2001). Der Internet Explorer versteht diese
Sprachversion weitgehend seit Produktversion 5.0.
In die vllig neu programmierte Netscape-Version 6.0 wurde eine Version 1.5 von JavaScript
integriert (2000-2001), die neben einigen wenigen JavaScript-eigenen Neuerungen vor allem
das Document Object Model (DOM) umsetzt mehr dazu weiter unten.
Beim Internet Explorer gibt es zum Teil nicht ganz unbetrchtliche Unterschiede, was die Editionen fr die einzelnen Plattformen betrifft. So kann es durchaus sein, dass die Windows-Version
eines Internet Explorers mit der Produktversion 5.5 JavaScript-Befehle versteht, die eine Macintosh-Ausgabe mit gleicher Produktversionsnummer nicht versteht. Dazu kommen andere Browser-Produkte, die ebenfalls JavaScript implementiert haben, wie beispielsweise Opera, wobei
auch dort jede Produktversion wieder ein bisschen mehr JavaScript kann als die Vorgngerversion. In der Praxis ist eigentlich nicht mehr wirklich nachvollziehbar, was nun welcher Browser genau kann. Es ist deshalb ratsam, benutzte Sprachbestandteile von JavaScript-Versionen
jenseits der V1.2 besonders sorgfltig zu testen.
Das Gerangel zwischen Netscape und Microsoft um die bessere JavaScript-Untersttzung
bewirkte auf jeden Fall eine Menge Frustation bei Web-Programmierern und Anwendern. Viele
Dinge mussten und mssen immer noch ziemlich umstndlich programmiert werden, weil die
Fhigkeiten und Eigenheiten der verschiedenen JavaScript-Interpreter der verschiedenen Browser und Browser-Versionen lauter Wenns und Abers erfordern, was sich im Quellcode von

546

Kapitel 17: JavaScript und DOM

JavaScript niederschlgt. Vor allem bei komplexeren JavaScript-Anwendungen, etwa bei dynamischem HTML, wurde das Doppeltprogrammieren zur lstigen Pflicht.
Um diesem Missstand auf Dauer abzuhelfen, wurde das W3-Konsortium eingeschaltet, damit fr
eine allgemeine Sprachnorm gesorgt wird. Das W3-Konsortium erarbeitete dabei jedoch keinen
konkreten JavaScript-Standard, sondern ein allgemeines Modell fr Objekte eines Dokuments.
Dieses Modell sollte eine Script-Sprache, die sich als Ergnzungssprache zu Auszeichnungssprachen wie HTML versteht, vollstndig umsetzen. Vom W3-Konsortium erhielt das Modell die Bezeichnung Document Object Model (DOM). Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der Version 1.0, die seit dem 29. September 2000 in
einer zweiten Ausgabe vorliegt. Seit 13. November 2000 ist die Version 2.0 des DOM eine offizielle W3-Empfehlung. Das entsprechende Dokument ist jedoch aufgesplittet in mehrere Einzeldokumente. Version 3.0 ist in Arbeit.
Der MS Internet 5.0 untersttzt einiges von DOM 1.0, die Version 5.5 schon mehr, ebenso wie
Netscape 6.x. Die JavaScript-Version, die DOM erstmals umsetzt, ist die Version 1.5.
Ein wichtiger Aspekt des DOM ist, dass es nicht nur fr HTML- ergnzende Script-Sprachen
konzipiert ist, sondern auch fr Script-Sprachen, die jegliche XML-gerechte Auszeichnungssprache erweitern sollen. Das DOM orientiert sich daher in seinem Kern nicht mehr an bestimmten HTML-Elementen. Stattdessen geht es in abstrakter Weise von einem Dokument aus
(das in XHTML geschrieben sein kann, aber auch in einer anderen XML-basierten Sprache). Es
definiert, wie sich auf die einzelnen Elemente dieses Dokuments zugreifen lsst und welche
Manipulationsmglichkeiten es gibt. Da man aber bei der Entwicklung des DOM auch auf die
Gegebenheiten und die Verbreitung von HTML und JavaScript Rcksicht nehmen wollte, wurde
dem so genannten Kern-DOM ein HTML-Anwendungs-DOM zur Seite gestellt. Letzteres
versucht, Teile des gewachsenen JavaScript und MS-JScript zu sanktionieren und Bestandteile
des Kern-DOM darin zu integrieren.
DOM 1.0 grenzt jedoch noch einige wichtige Aspekte aus, wie etwa das Event-Handling
(Behandlung von Anwenderereignissen wie Mausklicks, Tastatureingaben usw.) oder die Integration von Stylesheets in das, was Programmierer dynamisch verndern knnen. In den Versionen 2.0 und 3.0 behandelt das DOM auch diese Aspekte.
Seit das DOM vorliegt, berbieten sich die Browser-Anbieter gegenseitig mit Versprechungen,
die Vorgaben des DOM in JavaScript umzusetzen. Abgesehen davon, dass es noch immer Uneinheitlichkeiten bei der Umsetzung gibt, hnlich wie in HTML und CSS, haben JavaScript-Programmierer nun ein zustzliches Problem: Wo sie zunchst hufig eine Doppellsung fr die
beiden verbreitetsten Browser-Typen bentigten, mssen sie nun manchmal sogar drei Lsungen programmieren, wenn sie nmlich Rcksicht auf die 4er-Versionen von Netscape und Internet Explorer Rcksicht nehmen und gleichzeitig DOM-gerecht programmieren wollen.
In der Praxis von JavaScript auf HTML-basierten Web-Seiten ist es jedoch so, dass meistens
noch mit den herkmmlichen, von Netscape eingefhrten JavaScript-Objekten gearbeitet wird.
In Zukunft ist allerdings zu hoffen, dass die DOM-gerechte JavaScript-Programmierung das
klassische JavaScript verdrngen wird.

17.2 Standards, Sprachvarianten und Sprachversionen

17.2:

547

ber die W3-Einstiegsseite zum DOM (www.w3.org/DOM/) knnen Sie die aktuelle
Weiterentwicklung des Document Object Models beim W3-Konsortium verfolgen.

Zur Kennzeichnung der Sprachversionen von JavaScript und von DOM werden in der vorliegenden Dokumentation folgende Symbole verwendet:
Symbol

Bedeutung
Bestandteil der ersten JavaScript-Version
Bestandteil der JavaScript-Version 1.1
Bestandteil der JavaScript-Version 1.2
Bestandteil der JavaScript-Version 1.3
Bestandteil der JavaScript-Version 1.5
Von Microsoft eingefhrter Sprachbestandteil. Solche Bestandteile werden in der Regel nur vom
MS Internet Explorer ab V4.x interpretiert; es wurden nur einige wichtige solcher Elemente in
die Objekt-Referenz mit aufgenommen, nmlich solche, die eine Grundlage fr Dynamisches
HTML nach dem Ansatz des MS Internet Explorers ab V4.0 darstellen.
Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Model, Version
1.0. Kommt innerhalb der vorliegenden Dokumentation in der Objekt-Referenz vor, um
Objekte, Eigenschaften und Methoden auszuzeichnen.

548
Symbol

Kapitel 17: JavaScript und DOM

Bedeutung
Objekt, Eigenschaft oder Methode nach den Vorgaben des Document Object Model, Version
2.0. Kommt innerhalb der vorliegenden Dokumentation in der Objekt-Referenz vor, um
Objekte, Eigenschaften und Methoden auszuzeichnen.

17.3

Hinweise fr die Praxis

Bevor Sie daran gehen, neuen, eigenen JavaScript-Code zu programmieren, mssen Sie sich
exakt darber im Klaren sein, welches Problem Sie damit lsen wollen. Dazu mssen Sie erst
einmal wissen, was man mit HTML selbst alles machen kann und wo die Grenzen von HTML
liegen. Von JavaScript mssen Sie dann so viel wissen, dass Sie entscheiden knnen, ob das
Problem mit JavaScript berhaupt lsbar ist. Mit JavaScript knnen Sie z.B. nicht die typischen
Aufgaben von CGI lsen! JavaScripts werden im Browser des Anwenders ausgefhrt, nicht auf
dem Server, wo die Web-Seiten abgelegt sind. Das heit, JavaScript kann vom Browser erst dann
ausgefhrt werden, wenn er eine Web-Seite gerade einliest oder nachdem er sie eingelesen hat
dann z.B. auch ausgelst durch Benutzerereignisse wie Mausklicks usw.
Aus diesem Grund knnen Sie mit JavaScript also keine Anwendungen wie Gstebcher oder
Web-Foren programmieren. Denn solche Anwendungen mssen die Daten aller beitragenden
Anwender zentral auf dem Server speichern. Wohl aber kann JavaScript untersttzend eingesetzt
werden bei solchen Anwendungen. So ist es beispielsweise sinnvoller, Formulareingaben des
Anwenders vor dem Absenden mit Hilfe von JavaScript zu berprfen, als den Server-Rechner
mit dieser Arbeit zustzlich zu belasten.
Wenn Sie etwas mit JavaScript lsen mchten, lohnt es sich durchaus, sich im Web umsehen, ob
es nicht schon frei verfgbare JavaScript-Beispiele gibt, die genau Ihr Problem lsen. Denn es ist
immer besser, auf Code zurckzugreifen, der sich im Einsatz bereits bewhrt hat, als neuen Code
zu erstellen, dessen heimliche Tcken einem noch nicht bekannt sind. In vielen Fllen gengt
es, vorhandene JavaScripts den eigenen Erfordernissen anzupassen. Bei vorhandenen JavaScripts
mssen Sie allerdings so viel von der Sprache verstehen, dass Sie genau wissen, welche Variablen
oder festen Werte Sie verndern oder welche Funktion Sie ergnzen wollen.
Im Linkverzeichnis des Online-Angebots von SELFHTML (selfaktuell.teamone.de) aktuell finden
Sie Links zu Anbietern frei verfgbarer JavaScripts. Wenn Sie JavaScript auf eigenen Web-Seiten
verwenden wollen, sollten Sie auf jeden Fall mehrere Browser zum Testen einsetzen. Denn leider
sind die JavaScript-Interpreter der JavaScript-fhigen WWW-Browser wie schon erwhnt sehr
unterschiedlich in ihrer Leistung.
Stellen Sie keine Web-Seiten mit ungeprftem JavaScript-Code ffentlich zur Verfgung. Fr
einen Anwender ist es sehr rgerlich, wenn er Fehlermeldungen des JavaScript-Interpreters am
Bildschirm erhlt und in schlimmeren Fllen einen Programmabsturz des Web-Browsers oder
gar einen Systemabsturz hat, was bei Online-Sitzungen besonders unangenehm ist. Solche Anwender besuchen Ihre Seiten mit Sicherheit so schnell nicht wieder.

17.4 JavaScript-Bereiche in HTML definieren

17.4

549

JavaScript-Bereiche in HTML definieren

Fr JavaScript-Programmabschnitte knnen Sie in HTML Bereiche definieren. Ein Beispiel:

<html>
<head><title>Test</title>
<script type="text/javascript">
<!-alert("Hallo Welt!");
//-->
</script>
</head>
<body>
</body>
</html>

17.3: Die minimale JavaScript-Anwendung aus dem Beispiel ffnet eine Dialogbox.

Mit <script type="text/javascript"> leiten Sie einen Bereich fr JavaScript innerhalb einer
HTML-Datei ein (script = Quelltext, type = Mime-Type). Die Angabe zum Mime-Type ist seit
HTML 4.0 Pflicht. Mit type="text/javascript" bestimmen Sie den typischen Mime-Type fr
JavaScript-Dateien.
Zustzlich knnen Sie zur Kennzeichnung der JavaScript-Sprachversion das language-Attribut
verwenden (z.B. language="JavaScript" oder language="JavaScript1.2"). Jedoch gehrt
dieses Attribut zu den missbilligten Attributen und wird auch nicht von allen Browsern korrekt
interpretiert.
Dahinter am besten in der nchsten Zeile sollten Sie mit <!-- einen HTML-Kommentar
einleiten. Dadurch erreichen Sie, dass ltere WWW-Browser, die JavaScript nicht kennen, den
folgenden JavaScript-Code ignorieren und nicht irrtmlich als Text innerhalb der HTML-Datei
interpretieren.
Den JavaScript-Bereich schlieen Sie mit einem einzeiligen JavaScript-Kommentar //, gefolgt
vom schlieenden HTML-Kommentar --> und </script> ab. Der JavaScript-Kommentar ist
erforderlich, um Fehlermeldungen in scriptfhigen Browsern zu unterdrcken. Bercksichtigen
Sie, dass vor und nach dem HTML-Kommentar ein Zeilenumbruch zwingend erforderlich ist.
Beachten Sie: Es gibt keine festen Vorschriften dafr, an welcher Stelle einer HTML-Datei ein
JavaScript-Bereich definiert werden muss. Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen solchen Bereich im Kopf der HTML-Datei, also zwischen <head> und
</head> zu definieren. Dadurch ist am ehesten sichergestellt, dass der Code vom WWW-Browser bereits eingelesen ist und zur Verfgung steht, wenn er ausgefhrt werden soll.

550

Kapitel 17: JavaScript und DOM

JavaScript-Code kann automatisch beim Einlesen der HTML-Datei ausgefhrt werden. Das ist
dann der Fall, wenn JavaScript-Befehle in einem JavaScript-Bereich auerhalb jeder selbst definierten Funktion stehen, so wie im obigen Beispiel. In solchen Fllen ist es manchmal auch
erforderlich, den Script-Bereich innerhalb des HTML-Dateikrpers, also innerhalb von
<body>...</body>, zu notieren, zum Beispiel wenn Sie am Ende der Datei mit JavaScript
dynamisch Datum und Uhrzeit der letzten nderung an der Datei schreiben wollen.

17.5

JavaScript-Anweisungen in HTML-Tags

JavaScript kann auch innerhalb herkmmlicher HTML-Tags vorkommen. Das ist dann kein
komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden, Funktionen, Objekte, Eigenschaften. Fr den Aufruf gibt es so genannte Event-Handler (Kapitel 18.10).
Das sind Attribute in HTML-Tags, ber die sich JavaScripts aktivieren lassen. Fr jeden der
mglichen Event-Handler ist festgelegt, in welchen HTML-Tags er vorkommen darf. Das Ergebnis des folgenden Beispiel sehen Sie in Kapitel 17.6 als Bild:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value; alert("Das Quadrat von " +
document.Formular.Eingabe.value + " = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onClick="Quadrat()">
</form>
</body>
</html>

Das obige Beispiel zeigt eine komplette HTML-Datei. Im Dateikopf ist ein JavaScript-Bereich
definiert. Innerhalb dieses Bereichs steht eine selbst definierte Funktion, die Funktion mit dem
Namen Quadrat(). Die Funktion errechnet das Quadrat einer Zahl, die der Anwender in dem
weiter unten notierten Formular im Eingabefeld mit dem Namen Eingabe eingibt. Der JavaScript-Code dieser Funktion wird aber nicht automatisch ausgefhrt, sondern nur dann, wenn
die Funktion explizit aufgerufen wird. Im obigen Beispiel erfolgt der Aufruf mit Hilfe eines
Klick-Buttons. Wenn der Anwender auf den Button klickt, wird das Quadrat zur eingegebenen
Zahl ausgegeben. Dazu ist im HTML-Tag des Klick-Buttons das Attribut onClick= notiert ein
Event-Handler mit der Bedeutung beim Anklicken.

17.6 JavaScript in separaten Dateien

551

Beachten Sie: Im Abschnitt 18.19 Event-Handler wird beschrieben, welche Event-Handler es

auer onClick= noch gibt und in welchen HTML-Tags sie vorkommen drfen.

17.6

JavaScript in separaten Dateien

Seit der Sprachversion 1.1 von JavaScript (und auch seit HTML 4.0) ist es mglich, JavaScriptCode in separaten Dateien zu notieren. Das ist sehr ntzlich, wenn Sie gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwenden wollen. Denn so brauchen Sie den Code nur einmal notieren und knnen ihn in mehreren HTML-Dateien referenzieren.

17.4: Das Beispiel berechnet das Quadrat einer Zahl und zeigt das Ergebnis als Dialogbox an.

Beispiel: JavaScript-Datei quadrat.js

function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value; alert("Das Quadrat von " +
document.Formular.Eingabe.value + " = " + Ergebnis);
}

Beispiel: HTML-Datei
<html>
<head>
<title>JavaScript-Test</title>
<script src="quadrat.js" type="text/javascript">
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen" onClick="Quadrat()">
</form>
</body>
</html>

Hier handelt es sich um das gleiche Beispiel wie im Abschnitt zuvor. Der Unterschied ist lediglich, dass der JavaScript-Code in einer separaten Datei steht. Dazu notieren Sie im einleitenden
<script>-Tag die Angabe src= (src = source = Quelle). Als Wert weisen Sie den URI der sepa-

552

Kapitel 17: JavaScript und DOM

raten Datei mit dem Quellcode zu. Dabei gelten die Regeln zum Referenzieren in HTML. Die
Datei mit dem Quellcode muss eine reine ASCII-Datei sein und sollte die Dateinamenerweiterung .js erhalten. Die Datei darf nichts anderes als JavaScript-Code enthalten.
Beachten Sie: Es kann passieren, dass ein JavaScript, das in einer separaten Datei notiert ist, lokal
wunderbar funktioniert, aber nach dem Hochladen der Dateien auf einen WWW-Server pltzlich nicht mehr. Bitten Sie in diesem Fall den Provider oder Webmaster des Servers, den MimeType text/javascript fr Dateien mit der Endung .js in die Konfiguration des Web-Servers
mit aufzunehmen. Ansonsten knnen Sie im einleitenden <script>-Tag beim type-Attribut
auch mal den Mime-Type application/x-javascript anstelle von text/javascript ausprobieren. Bei einigen Servern funktioniert es dann.

553

18 JavaScript: Sprachelemente

18.1

Allgemeine Regeln fr JavaScript

18.1.1

Anweisungen notieren

JavaScript besteht letztendlich aus einer kontrollierten Anordnung von Anweisungen. Das sind
Befehle, die der JavaScript-Interpreter des WWW-Browsers bewertet und in Maschinencode
umsetzt, der auf dem Rechner des Anwenders ausfhrbar ist. Es gibt einfache und komplexere
Anweisungen.
Beispiel 1:
Zahl = 42;

Beispiel 2:
Quadrat = Zahl * Zahl;

Beispiel 3:
if(Zahl > 1000)
Zahl = 0;

Beispiel 4:
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);

Eine Anweisung in JavaScript besteht immer aus einem Befehl, der mit einem Strichpunkt ; oder
einem Zeilenumbruch abgeschlossen wird. In neueren Netscape-Dokumentationen zu JavaScript
wird der Strichpunkt am Ende von einfachen Anweisungen zwar hufig weggelassen, aber um
unntige Fehler zu vermeiden, ist es ratsam, sich von vorneherein anzugewhnen, alle Anweisungen auf diese Weise abzuschlieen. Eine Anweisung ist zum Beispiel,
wenn Sie einer Variablen einen Wert zuweisen, wie in Beispiel 1;
wenn Sie mit Variablen oder Werten eine Operation durchfhren, wie in Beispiel 2;
wenn Sie einen Befehl nur unter bestimmten Bedingungen ausfhren, wie in Beispiel 3 (siehe
hierzu die Abschnitte ber bedingte Anweisungen und ber Schleifen, Kapitel 18.7 und 18.8);
wenn Sie eine selbst definierte Funktion oder eine Objektmethode aufrufen bzw. wenn Sie
eine Objekteigenschaft auslesen oder ndern (siehe hierzu den Abschnitt 18.3 Objekte, Eigenschaften und Methoden), wie in Beispiel 4.

554

Kapitel 18: JavaScript Sprachelemente

18.1.2

Anweisungsblcke notieren

Ein Anweisungsblock besteht aus einer oder mehreren Anweisungen, die innerhalb einer bergeordneten Anweisung oder innerhalb einer Funktion stehen. So knnen Anweisungsblcke
beispielsweise unterhalb einer bedingten Anweisung oder einer Schleife stehen. Auch alle Anweisungen, die innerhalb einer selbst definierten Funktion stehen, bilden einen Anweisungsblock.
Beispiel 1:
if(Zahl > 1000) {
Zahl = 0;
Neustart();
}

Beispiel 2:
while(i <= 99) {
Quadrat(i);
i = i + 1;
}

Beispiel 3:
function SageQuadrat(x) {
var Ergebnis = x * x;
alert(Ergebnis);
}

Beispiel 4:
function SagEinmaleins(x) {
var Ergebnis = x * x;
if(Ergebnis > 100) {
Ergebnis = 0;
Neustart();
}
alert(Ergebnis);
}

Ein Anweisungsblock wird durch eine ffnende geschweifte Klammer { begonnen und durch
eine schlieende geschweifte Klammer } beendet. Sie knnen die geschweiften Klammern jeweils
in eine eigene Zeile schreiben, so wie in den obigen Beispielen. Es ist aber auch erlaubt, die
Klammern in der gleichen Zeile zu notieren wie die Anweisungen.
Bei bedingten Anweisungen (wie in Beispiel 1) oder bei Schleifen (wie in Beispiel 2) mssen Sie
solche Anweisungsblcke notieren, sobald mehr als eine Anweisung von der Bedingung oder der
Schleifenbedingung abhngig ausgefhrt werden soll. Bei Funktionen (wie in Beispiel 3) mssen
Sie Anfang und Ende der Funktion durch geschweifte Klammern markieren. Alles, was innerhalb
der Funktion steht, ist daher ein Anweisungsblock. Anweisungsblcke knnen auch verschachtelt sein, so wie in Beispiel 4 oben.

18.1 Allgemeine Regeln fr JavaScript

18.1.3

555

Selbst vergebene Namen

An vielen Stellen in JavaScript mssen Sie selbst Namen vergeben, zum Beispiel fr selbst definierte Funktionen, eigene Objekte oder Variablen. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function Schlaue_Frage() {
var i = 1;
var Eingabe = "";
while(Eingabe != "SELFHTML" && i <= 3) {
Eingabe = window.prompt("Wie heit dieses Dokument?","");
i++;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:Schlaue_Frage()">wollen Sie eine Frage beantworten?</a>
</body>
</html>

18.1: Die Dialogbox erfragt eine Zeichenkette vom Benutzer.

Im Beispiel ist in einem JavaScript-Bereich eine Funktion mit Namen Schlaue_Frage notiert.
Darin werden zwei Variablen mit den Namen i und Eingabe deklariert und verwendet. Das
Beispiel ruft beim Anklicken des HTML-Verweises die Funktion Schlaue_Frage auf. Darin
wird ein Dialogfenster ausgegeben, in dem der Anwender bis zu dreimal auf die Frage antworten
kann, wie dieses Dokument heit. Namen vergeben mssen Sie also recht hufig in JavaScript.
Bei selbst vergebenen Namen gelten folgende Regeln:
Sie drfen keine Leerzeichen enthalten.

556

Kapitel 18: JavaScript Sprachelemente

Sie drfen nur aus Buchstaben und Ziffern bestehen das erste Zeichen muss ein Buchstabe
sein; es sind Gro- und Kleinbuchstaben erlaubt. Gro- und Kleinschreibung werden unterschieden!
Sie drfen keine deutschen Umlaute oder scharfes S enthalten.
Sie drfen als einziges Sonderzeichen den Unterstrich _ enthalten.
Sie drfen nicht mit einem reservierten Wort identisch sein (Kapitel 18.9).
Vergeben Sie sprechende Namen, die Ihnen auch ein halbes Jahr, nachdem Sie das Script geschrieben haben, noch signalisieren, welche Bedeutung sie haben. Es drfen ruhig auch
deutschsprachige Wrter sein, solange die genannten Regeln eingehalten werden.

18.1.4

Kommentare in JavaScript

Bei komplexeren Programmteilen knnen Sie Kommentare benutzen, um einzelne Anweisungen

zu erklren. Auch wenn Sie Ihre Copyright-Angaben innerhalb eines selbst geschriebenen JavaScript-Codes unterbringen wollen, knnen Sie dies mit Hilfe eines Kommentars tun. Kommentare werden vom JavaScript-Interpreter des WWW-Browsers ignoriert. Ein Beispiel:
while(i <= 99) {
Quadrat = i * i;
i = i + 1;

/* solange i kleiner gleich 99, Quadrat von i bilden */

// i um eins erhoehen

Einen wahlweise ein- oder mehrzeiligen Kommentar leiten Sie mit /*, also einem Schrgstrich,
gefolgt von einem Stern-Zeichen, ein. Mit der umgekehrten Folge */, also einem Stern-Zeichen,
gefolgt von einem Schrgstrich, beenden Sie den Kommentar. Einen einzeiligen Kommentar
starten Sie mit der Zeichenfolge //. Der Browser ignoriert dann den nachfolgenden Text bis zum
nchsten Zeilenende.

18.2

Variablen und Werte

18.2.1

Variablen definieren

Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer Programmprozeduren bentigen, speichern knnen. Der Inhalt, der in einer Variablen gespeichert ist, wird als
Wert bezeichnet. Sie knnen den Wert einer Variablen jederzeit ndern. Um mit Variablen
arbeiten zu knnen, mssen Sie die bentigten Variablen zuerst definieren. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);

18.2 Variablen und Werte

557

function SchreibeQuadrate() {
var SinnDesLebens = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
for(i=1; i <= SinnDesLebens; ++i) {
x = i * i;
document.write(Satzteil + i + " ist " + x + "<br>");
}
}
//-->
</script>
</head>
<body onLoad="SchreibeQuadrate()">
</body>
</html>

18.2: Das Beispielscript gibt eine Liste mit Quadratzahlen aus.

Das Beispiel gibt beim Aufruf der Seite eine Meldung aus, dass gleich Quadratzahlen ausgegeben
werden. Besttigt der Anwender das Meldungsfenster, werden die Quadrate der Zahlen von 1 bis
42 ausgegeben.
Es gibt globale Variablen und lokale Variablen. Eine lokale Variable erhalten Sie durch die
Deklaration der Variablen mit var innerhalb einer Funktion. Im obigen Beispiel sind die Variablen SinnDesLebens, i, x und Satzteil innerhalb der Funktion SchreibeQuadrate() als
lokale Variablen notiert. Diese Variablen sind deshalb nur innerhalb dieser Funktion gltig. Man
spricht in diesem Zusammenhang auch von der Lebensdauer von Variablen. Parameter, die
einer Funktion bergegeben werden, werden ebenfalls als lokale Variablen behandelt. Die Variable Hinweis ist dagegen eine globale Variable. Sie ist im gesamten Dokument gltig und steht
jederzeit zur Verfgung. Wenn Sie innerhalb von Funktionen Variablen ohne das Schlsselwort
var deklarieren, dann sind diese Variablen global.
Jede Variablendeklaration wird mit einem Strichpunkt abgeschlossen, da sie eine ganz normale
Anweisung darstellt.

558

Kapitel 18: JavaScript Sprachelemente

Variablen knnen mit oder ohne weitere Wertzuweisung deklariert werden. Im obigen Beispiel
wird etwa der Variablen SinnDesLebens bei der Definition gleich ein Wert zugewiesen, nmlich
42. Auch die Variable Satzteil erhlt eine anfngliche Wertzuweisung, nmlich den Wert "Das
Quadrat von ". Die Variablen i und x werden dagegen nicht mit einem Anfangswert versehen.
Beim Zuweisen eines Wertes notieren Sie hinter dem Variablennamen ein Gleichheitszeichen
und dahinter den Wert, den Sie der Variablen zuweisen wollen.
Sie knnen mehrere Variablen auf einmal definieren, so wie die beiden Variablen i und x im
Beispiel. Dazu trennen Sie die Variablennamen durch Kommata. Das ist natrlich auch in Verbindung mit zugewiesenen Anfangswerten mglich.
Es gibt numerische Variablen und Variablen fr Zeichen bzw. Zeichenketten. Im obigen Beispiel
sind die Variablen SinnDesLebens, i und x numerische Variablen. Die Variablen Hinweis und
Satzteil sind dagegen Zeichenkettenvariablen. Dies ist daran erkennbar, dass der ihnen zugewiesene Wert, ein Text, in Anfhrungszeichen gesetzt wird. Sie knnten z.B. eine Variable Nummer
= 1; und eine Variable Zeichen = "1"; definieren. Der Unterschied ist, dass Sie mit der Variablen Nummer Rechenoperationen anstellen knnen, mit der Variablen Zeichen nicht. Dafr
knnen Sie mit Zeichenkettenvariablen Zeichenkettenoperationen durchfhren, etwa das Extrahieren einer Teilzeichenkette, was mit numerischen Variablen nicht mglich ist.
Beachten Sie: Bei der Vergabe von Variablennamen gelten die Regeln fr selbst vergebene
Namen (Kapitel 21.1.3). Variablen in JavaScript sind nicht so streng getypt wie in vielen anderen Programmiersprachen. Einfache Variablentypen, wie Zahlen, Zeichenketten oder Wahrheitswerte, werden lediglich nach numerischen und nichtnumerischen Variablen eingeteilt.
Kommazahlen und Ganzzahlen bentigen keine unterschiedlichen Typen. Der Inhalt von numerischen Variablen kann ohne vorherige Konvertierung in Zeichenketten auf den Bildschirm oder
in Meldungsfenster geschrieben werden. Umgekehrt knnen Sie aber mit Zeichenketten, z.B.
Werten aus Formularfeldern, nicht immer automatisch rechnen, sondern mssen sie vorher
explizit in Zahlen umwandeln. Fr die explizite Typumwandlung gibt es verschiedene objektunabhngige Funktionen (Kapitel 20.33).

18.2.2

Werte von Variablen ndern

Wertnderungen von Variablen sind das A & O bei der Programmierung. Sie werden nur dann
erfolgreich eigene Programme schreiben knnen, wenn Sie jederzeit den berblick haben, was in
einer Variablen an einem bestimmten Punkt des Programmablaufs steht. Besonders, wenn Sie
mit bedingten Anweisungen oder Schleifen arbeiten, werden Sie schnell feststellen, wie leicht der
berblick ber den aktuellen Zustand einer Variablen verloren gehen kann. Ein Beispiel:
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
<script type="text/javascript">
<!-function SchreibeTabelle() {
var SinnDesLebens = 42;
var i, x, y;
var Satzteil = "Das Quadrat von ";
document.close();

18.3 Objekte, Eigenschaften und Methoden

559

document.open("text/html");
document.writeln(<table border="1"><tr>);
document.writeln(<td bgcolor="EEEEEE">Wert<\/td>);
document.writeln(<td bgcolor="EEEEEE">Wert<sup>2<\/sup><\/td>);
document.writeln(<td bgcolor="EEEEEE">Wert<sup>3<\/sup><\/td><\/tr>);
for(i=1; i <= SinnDesLebens; ++i) {
x = i * i;
y = i * i * i;
document.writeln(<tr><td> + i + <\/td>);
document.writeln(<td> + x + <\/td>);
document.writeln(<td> + y + <\/td><\/tr>);
}
document.writeln(<\/table>);
}
//-->
</script>
</head>
<body onLoad="SchreibeTabelle()">
</body>
</html>

Das Beispiel leert das Anzeigefenster des Browsers und erzeugt dynamisch eine Tabelle mit 3
Spalten und 42 Zeilen plus einer Kopfzeile. In die Zellen der Tabelle werden fr die Zahlen von 1
bis 42 der Quadratwert und der Kubikwert geschrieben. Zum dynamischen Schreiben in das
Bowser-Fenster benutzt das Script Methoden des Objekts document.
Die Variablen SinnDesLebens und Satzteil werden whrend des Programmablaufs zwar benutzt, aber ihr Wert wird nicht gendert. Die Variablen i, x und y dagegen ndern ihren Wert
laufend. Das liegt daran, dass sie innerhalb einer for-Schleife bei jedem Schleifendurchlauf neue
Werte zugewiesen bekommen.
Die Wertzuweisung erfolgt, indem Sie den Variablennamen, dahinter ein Gleichheitszeichen und
dahinter den gewnschten Wert notieren. Bei dem Wert, den Sie zuweisen, knnen Sie anstelle
einer bestimmten Zahl oder einer Zeichenkette auch Namen anderer Variablen notieren. So wird
im Beispiel der Variablen x bei jedem Schleifendurchlauf als Wert das Ergebnis der mit sich
selbst multiplizierten Variablen i zugewiesen und y das Ergebnis von i * i * i.

18.3

Objekte, Eigenschaften und Methoden

18.3.1 Vordefinierte JavaScript-Objekte

Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden). Dass JavaScript eine Erweiterung von HTML darstellt, liegt vor
allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfgung stehen. ber diese
vordefinierten Objekte knnen Sie beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ndern.

560

Kapitel 18: JavaScript Sprachelemente

Ein Objekt kann eine Teilmenge eines bergeordneten Objekts sein. Die JavaScript-Objekte sind
deshalb in einer Hierarchie geordnet. Das hierarchiehchste Objekt ist in JavaScript das FensterObjekt (window). Fenster haben Eigenschaften wie einen Namen, eine Gre usw. Der Inhalt
eines Fensters ist das nchstniedrigere Objekt, nmlich das im Fenster angezeigte Dokument (in
JavaScript das Objekt document). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte, durch HTML-Tags definierte Elemente enthalten, wie zum Beispiel
Formulare, Verweise, Grafikreferenzen usw. Fr solche untergeordneten Elemente gibt es wieder
eigene JavaScript-Objekte, zum Beispiel das Objekt forms fr Formulare. Ein Formular besteht
seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder
Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafr ein Objekt elements, mit
dem Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen knnen.
Neben den hierarchisch geordneten JavaScript-Objekten gibt es auch solche, die nicht direkt in
die Hierarchie passen. Das sind zum Beispiel Objekte fr Datums- und Zeitrechnung, fr
mathematische Aufgaben oder fr Zeichenkettenverarbeitung. Eine bersicht der vordefinierten
JavaScript-Objekte finden Sie in Kapitel 20.

18.3.2

Vordefinierte JavaScript-Objekte verwenden

JavaScript-Objekte knnen Sie jederzeit verwenden. Ein Beispiel:

<html><head><title>Test</title>
</head>
<body>
<script type="text/javascript">
<!-var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll

= ((Minuten < 10) ? ":0" : ":");

if (Jahr<2000) Jahr=Jahr+1900;
document.write("<h2>Guten Tag!<\/h2><b>Heute ist der "
+ Tag + "." + Monat + "." + Jahr + ". Es ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr<\/b>");
//-->
</script>
</body></html>

Im Beispiel wird innerhalb eines JavaScript-Bereichs mit Hilfe des vordefinierten JavaScriptObjekts Date das aktuelle Datum und die aktuelle Uhrzeit ermittelt und HTML-formatiert ausgegeben.
Zuerst muss dazu eine neue Variable angelegt werden. Im Beispiel ist das die Variable Jetzt.
Diese Variable soll auf Daten des Date-Objekts zugreifen knnen. Dies geschieht durch ein
Gleichheitszeichen hinter dem Variablennamen. Dahinter folgt das reservierte JavaScript Wort

18.3 Objekte, Eigenschaften und Methoden

561

new, und dahinter, durch ein Leerzeichen getrennt, der Aufruf der von Date() zum Erzeugen
einer neuen Instanz des Objekts Date.

18.3: Datum und Uhrzeit entnimmt der Browser der Systemuhr des jeweiligen PCs.

Um die einzelnen Daten der Objektinstanz von Date, also Tag, Monat, Jahr usw. anzusprechen,
stehen entsprechende Methoden zur Verfgung. Diese Methoden, z.B. getDate() oder
getHours(), haben als Rckgabewert jeweils einen Datums/Uhrzeit-Bestandteil. So liefert getDate() beispielsweise den aktuellen Tag des Monats und getHours() die aktuelle Stundenzahl
des Tages. Im Beispiel wird fr jeden der bentigten Bestandteile eine Variable definiert. In der
Variablen Tag wird beispielsweise durch Aufruf von Jetzt.getDate() der aktuelle Tag des
Monats gespeichert.
Die Anweisung im Beispiel, die mit NachVoll ... beginnt, kann an dieser Stelle nicht nher
erlutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.
Beachten Sie: Die einzelnen Methoden des im Beispiel verwendeten Objekts Date, wie zum Beispiel getDate(), werden bei der Referenz des Objekts Date in Kapitel 23 beschrieben.

18.3.3

Eigene Objekte definieren

Sie knnen eigene Objekte definieren, wenn Sie streng objektorientiert in JavaScript programmieren wollen. Um ein eigenes Objekt anzulegen, sind zwei Schritte ntig. Zuerst mssen Sie das
Objekt selbst und seine Eigenschaften deklarieren. Im zweiten Schritt knnen Sie anschlieend
eine Instanz dieses Objekts definieren. Mit dieser Objekt-Instanz knnen Sie dann Programmprozeduren durchfhren. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Farbe(R, G, B) {
this.R = R;
this.G = G;
this.B = B;
this.hex="#";
}
function HintergrundWechseln() {
var Hintergrund = new Farbe("E0","FF","E0");
document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G +
Hintergrund.B;

562

Kapitel 18: JavaScript Sprachelemente

}
//-->
</script>
</head><body bgcolor="#FFFFFF">
<h1>Das eigene Farb-Objekt mit JavaScript</h1>
<a href="javascript:HintergrundWechseln()"><b>Hintergrundfarbe wechseln</b></a>
</body>
</html>

Um ein neues Objekt und seine Eigenschaften anzulegen, mssen Sie innerhalb eines JavaScriptBereichs oder innerhalb einer separaten JavaScript-Datei eine eigene Funktion definieren, die so
aussehen kann wie im Beispiel die Funktion Farbe(...). Der Name, den Sie der Funktion
geben (im Beispiel der Name Farbe), ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr
Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im
Beispiel sind das die Eigenschaften R, G und B, denn es soll ein Objekt angelegt werden, das Rot-,
Grn- und Blauwert einer Farbe speichern kann. R, G und B sind dabei brigens selbst vergebene
Namen. Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel gezeigt: fr
jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem reservierten JavaScript-Wort this, gefolgt von einem Punkt und dem
Parameternamen. Dahinter notieren Sie ein Gleichheitszeichen, und hinter dem Gleichheitszeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.
Natrlich knnen Sie fr jedes Objekt auch feste (nicht durch Parameter beeinflusste) Eigenschaften definieren. Im Beispiel ist die Eigenschaft hex eine feste Eigenschaft, die fr jede Instanz
des Objektes existiert. Notieren Sie dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der
Eigenschaft.
Nachdem das Objekt angelegt ist, knnen Sie an anderen Stellen innerhalb Ihres JavaScripts
Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer Variablen und dem reservierten
JavaScript Wort new. Im Beispiel wird eine zweite Funktion HintergrundWechseln() definiert.
Darin wird zunchst eine Variable Hintergrund angelegt. Diese Variable soll Daten des angelegten Objekts Farbe enthalten. Dies geschieht durch ein Gleichheitszeichen hinter dem Variablennamen. Dahinter folgt das Wort new und dahinter, durch ein Leerzeichen getrennt, der
Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel Farbe. Als
Parameter werden dieser Funktion irgendwelche brauchbaren Werte bergeben, im Beispiel
"33", "99" und "C0" (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen).
Anschlieend ist die Variable Hintergrund an das Farbobjekt gebunden, und ber sie lassen
sich die Eigenschaften des Objekts setzen oder abfragen. Im Beispiel steht die Anweisung:
document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;

Damit wird die Hintergrundfarbe der aktuell angezeigten Seite verndert. Normalerweise knnte
man document.bgColor so etwas zuweisen wie "#C0C0EE". Auch im Beispiel wird ein Farbwert
dieser Art zugewiesen, jedoch zusammengesetzt aus den Einzeleigenschaften des Farbobjekts, das
in der Instanz Hintergrund gespeichert ist. Die Funktion HintergrundWechseln() wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der HTML-Datei enthalten ist.

18.3 Objekte, Eigenschaften und Methoden

18.3.4

563

Eigenschaften von Objekten

Objekte knnen Eigenschaften haben. Ein selbst definiertes Objekt Mensch knnte zum Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt Math zum Beispiel eine Eigenschaft PI (Math.PI). Auf diese Weise lsst sich mit der mathematischen Konstante PI rechnen,
ohne deren genauen Wert zu kennen.
Eigenschaften von Objekten knnen Sie innerhalb Ihres JavaScript-Codes jederzeit auslesen, und
in vielen Fllen knnen Sie die Werte von Eigenschaften auch ndern. So knnen Sie beispielsweise dem im Browser-Fenster angezeigten Dokument einen neuen, gltigen URI zuweisen.
Dadurch bewirken Sie, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse
ausfhrt, genau so, wie wenn der Anwender auf einen entsprechenden Verweis klicken wrde.
Ein Beispiel:
<html><head><title>Test</title></head><body>
<h1>Die Seite, die Sie genau erkennt</h1>
<script type="text/javascript">
<!-var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
document.write("<p>Ah ja, Sie verwenden also den <b>" + BrowserName +"<\/b>, und
zwar in der Version <b>" + BrowserVersion + "<\/b><\/p>");
//-->
</script>
</body></html>

18.4:

Das Objekt navigator liefert Details ber die Browser-Version und das Betriebssystem des
Computers.

Im Beispiel werden innerhalb eines JavaScript-Bereichs zwei Eigenschaften des vordefinierten

JavaScript-Objekts navigator in zwei entsprechenden Variablen namens BrowserName und
BrowserVersion gespeichert. Das navigator-Objekt stellt Ihnen ber seine Eigenschaften verschiedene Informationen ber den verwendeten WWW-Browser des Anwenders zur Verfgung.
Im obigen Beispiel werden die Eigenschaften des Browser-Namens (gespeichert in der Objekteigenschaft navigator.appName) und der Browser-Version (gespeichert in der Objekteigenschaft
navigator.appVersion) ermittelt. Anschlieend werden die ermittelten Daten mit document.write() dynamisch ins Browser-Fenster geschrieben.

564

Kapitel 18: JavaScript Sprachelemente

Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt.

18.3.5

Objekt-Methoden

Objekte knnen Methoden haben. Das sind Funktionen, die Aktionen ausfhren, aber im Gegensatz zu allein stehenden Funktionen an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScriptObjekt history, in dem die bereits besuchten URIs eines Browser-Fensters gespeichert sind.
Dazu gibt es eine Methode history.back(), mit der Sie in JavaScript einen Rcksprung zu
einer bereits besuchten Adresse erzwingen knnen. Ein Beispiel:
<html>
<head>
<title>Geh wo hin</title>
</head>
<body>
<a href="javascript:history.back();"><b>Geh hin wo Du herkommst</b></a>
</body>
</html>

Das Beispiel enthlt einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt Ihnen, beim
Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode
back() des Objekts history.
Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter
einen Punkt, dahinter den Namen der Methode, und dahinter eine ffnende und eine schlieende Klammer. Dabei sind keine Leerzeichen erlaubt. Einige Methoden knnen auch Parameter beim Aufruf erwarten. Diese Parameter mssen Sie dann zwischen der ffnenden und der
schlieenden Klammer bergeben.
Beachten Sie: Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie in Kapitel 18.10 ber EventHandler.

18.3.6

Abfragen, ob ein Objekt existiert

Es gibt viele JavaScript-Objekte, und es ist oft schwer durchschaubar, welcher Browser in welcher
Version welches Objekt interpretiert. Objekte, die nicht interpretierbar sind, fhren in den
Browsern zu Fehlermeldungen. So kann es vorkommen, dass ein Script, dass mit Netscape 4.7
oder Internet Explorer 5.0 wunderbar funktioniert, bei Netscape 4.0 oder Internet Explorer 4.0
zu Fehlermeldungen fhrt, weil ein Objekt nicht bekannt ist. Deshalb gibt es eine Mglichkeit,
den Aufruf von Eigenschaften und Methoden eines Objekts von einer Abfrage abhngig zu
machen, die herausfindet ob das Objekt dem Browser berhaupt bekannt ist. Ein Beispiel:
<html>
<head><title>Test</title>
</head>
<body>

18.3 Objekte, Eigenschaften und Methoden

565

<h1>Objekt-Abfrage</h1>
<script type="text/javascript">
<!-if(! document.images)
document.write("<p>Schade, Ihr Browser kennt das image-Objekt nicht - Sie
verpassen was!<br>");
else
document.write("<p>Gut, Ihr Browser kennt das image-Objekt!<br>");
if(document.all)
document.write("Ach, und Ihr Browser ist von Microsoft ;-)<\/p>");
else
document.write("Ach, und Ihr Browser ist ja gar nicht von Microsoft ;-)<\/p>");
//-->
</script>
</body>
</html>

Mit einer bedingten Anweisung if(...) knnen Sie berprfen, ob ein Objekt verfgbar ist. Als
Ausdruck fr die Bedingung notieren Sie innerhalb der Klammern hinter if einfach das Objekt,
nach dem Sie fragen. Wenn das Objekt verfgbar ist, wird intern der Wert true (wahr) zurckgegeben. In dem Zweig der if-else-Abfrage, die diesen Fall verarbeitet, knnen Sie dann loslegen
und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der ifelse-Abfrage knnen Sie dann beispielsweise eine eigene Meldung ausgeben, dass dieses JavaScript leider Befehle verwendet, die der Browser des Anwenders nicht interpretiert.
Im obigen Beispiel werden mit document.write unterschiedliche Stze ins Browser-Fenster
geschrieben. Dazu wird zunchst gefragt, ob das Unterobjekt document.images nicht verfgbar
ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt
also nicht verfgbar, dann wird im Beispiel ausgegeben, dass dies sehr schade sei usw. Im anderen Fall, also wenn das Objekt verfgbar ist, wird eine positive Reaktion ausgegeben.
Im zweiten Teil des Beispiels wird die Verfgbarkeit des Unterobjekts document.all abgefragt,
das nur dem MS Internet Explorer bekannt ist. Auch dabei werden im Beispiel wieder je nach
Verfgbarkeit zwei unterschiedliche Stze ausgegeben. An diesem Beispiel ist auch ersichtlich,
dass die Abfrage der Verfgbarkeit von Objekten auch zur Browser-Groberkennung dienen kann
vorausgesetzt, man kennt sich bei den vordefinierten JavaScript-Objekten aus und wei,
welche Objekte nur von bestimmten Browsern interpretiert werden.

18.3.7

Mehrere Anweisungen mit einem Objekt

ausfhren (with)

Hin und wieder kommt es vor, dass Sie mehrere Anweisungen in Folge notieren, die alle mit
dem gleichen Objekt arbeiten. Fr diesen Zweck knnen Sie, wenn Sie wollen, eine verkrzte,
spezielle Schreibweise verwenden. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">

566

Kapitel 18: JavaScript Sprachelemente

<!-with(document) {
open();
write("Diese Seite hat den Titel " + title);
close();
}
//-->
</script>
</body></html>

Mit with(Objektname) leiten Sie eine solche Schreibweise ein (with = mit). Da normalerweise
mehrere Anweisungen folgen, die dieses Objekt verwenden, mssen Sie all diese Anweisungen in
geschweifte Klammern einschlieen.
Im obigen Beispiel wird mit dem document-Objekt gearbeitet. Innerhalb der geschweiften
Klammern werden die Methoden open(), write() und close() sowie die Eigenschaft title
verwendet. Sie alle gehren zum document-Objekt. Normalerweise mssten Sie notieren: document.open() oder document.title. Durch die spezielle Syntax mit with(document) entfllt
dies.
Beachten Sie: Es ist auch mglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:
with(document.MeinFormular.Feld_1)
value = Stefan

Achten Sie darauf, dass die aufgerufene Eigenschaft auch tatschlich existiert. Wenn sie fehlt,
erhalten Sie eine JavaScript-Fehlermeldung.

18.3.8

Auf aktuelles Objekt Bezug nehmen (this)

Es gibt Flle, in denen es eindeutig ist, auf welches Objekt sich ein Befehl bezieht. In solchen
Fllen knnen Sie eine verkrzte Schreibweise benutzen. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Eingabe">
<input type="text" name="Feld">
<input type="button" value="OK" onClick="alert(this.form.Feld.value)">
</form>
</body></html>

18.5: Die Meldungsbox greift ber this auf den Inhalt des Eingabefeldes zu.

18.4 Funktionen

567

Mit dem Schlsselwort this knnen Sie auf ein aktuelles Objekt Bezug nehmen. Im Beispiel
wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf
den Button klickt, tritt der Event-Handler onClick= in Aktion, der als Attribut in dem HTMLTag fr den Button notiert ist. Im Beispiel wird in einem Meldungsfenster der Wert ausgegeben,
den der Anwender in dem Eingabefeld eingegeben hat. Normalerweise wrde der Befehl so
notiert:
alert(document.Eingabe.Feld.value)

Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, drfen Sie auch
schreiben:
alert(this.form.Feld.value)

Das Wort form ist dabei vom forms-Objekt abgeleitet.

18.4

Funktionen

18.4.1

Funktion definieren

Mit Hilfe von Funktionen knnen Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren, die Sie dann ber den Aufruf der Funktion ausfhren knnen. Dabei knnen Sie
bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die
Funktion aufgerufen und ihr Programmcode ausgefhrt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgefhrt.
Eine Funktion ist ein Anweisungsblock. Sie knnen eigene Funktionen innerhalb eines JavaScript-Bereichs oder in einer separaten JavaScript-Datei definieren. An erlaubten Stellen, z.B.
innerhalb der einleitenden HTML-Tags <body...> und <a href...> oder in einem FormularTag wie <input...>, knnen Sie eine solche selbst definierte Funktion dann mit Hilfe eines
Event-Handlers aufrufen. Oder Sie rufen eine Funktion innerhalb einer anderen Funktion auf.
Beispiel einer JavaScript-Funktion:
function PrimzahlCheck(Zahl) {
var Grenzzahl = Zahl / 2;
var Check = 1;
for(var i = 2; i <= Grenzzahl; i++)
if(Zahl % i == 0)
{
alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i);
Check = 0;
}
if(Check == 1)
alert(Zahl + " ist eine Primzahl!");
}

Mit dem Schlsselwort function leiten Sie die Definition einer Funktion ein. Dahinter folgt,
durch ein Leerzeichen getrennt, ein frei whlbarer Funktionsname, im Beispiel: PrimzahlCheck.

568

Kapitel 18: JavaScript Sprachelemente

Vergeben Sie einen Funktionsnamen, der das, was die Funktion leistet, ungefhr beschreibt.
Beachten Sie dabei die Regeln fr selbst vergebene Namen (Kapitel 18.1.3).
Unmittelbar hinter dem Funktionsnamen folgt eine ffnende Klammer. Wenn die Funktion
keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schlieende Klammer.
Wenn die Funktion Parameter bergeben bekommen soll, notieren Sie innerhalb der Klammer
die Namen der Parameter. Die Namen der Parameter sind frei whlbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch
Kommata voneinander getrennt. Im obigen Beispiel erwartet die Funktion PrimzahlCheck
einen Parameter Zahl.
Der gesamte Inhalt der Funktion wird in geschweifte Klammern { } eingeschlossen. Diese Klammern drfen niemals fehlen!
Die Anweisungen innerhalb der Funktion knnen sehr unterschiedlicher Natur sein. Da knnen
Sie z.B. Objekte manipulieren, bergebene Parameter verarbeiten und ndern, Berechnungen
anstellen usw. Sie knnen innerhalb von Funktionen auch andere Funktionen aufrufen. Welche
Anweisungen innerhalb einer Funktion stehen, hngt davon ab, was die Funktion leisten soll. Im
obigen Beispiel wird ermittelt, ob die bergebene Zahl eine Primzahl ist. Wenn es keine ist, wird
fr jede Zahl, durch die sie teilbar ist, eine entsprechende Meldung ausgegeben. Wenn es eine
Primzahl ist, wird am Ende ausgegeben, dass es sich um eine Primzahl handelt.

18.4.2

Funktion aufrufen

Sie knnen eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScript-Code
auszufhren. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function PrimzahlCheck(Zahl) {
var Grenzzahl = Zahl / 2;
var Check = 1;
for(var i = 2; i <= Grenzzahl; i++)
if(Zahl % i == 0)
{
alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i);
Check = 0;
}
if(Check == 1)
alert(Zahl + " ist eine Primzahl!");
}
//-->
</script>
</head>
<body>
<form name="PrimzahlFormular" action="">

18.4 Funktionen

569

<p>Geben Sie eine Zahl ein, die Zahl wird auf Primzahl gecheckt:</p>
<input type="text" name="Eingabezahl">
<input type="button" value="auf Primzahl checken"
onClick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)">
</form>
</body>
</html>

18.6: Die Primzahlenprfung ist in eine Funktion ausgelagert.

Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert,
in dem wiederum die Funktion PrimzahlCheck() definiert ist. Im Dateikrper der HTMLDatei steht ein Formular mit einem Eingabefeld und einem Button. Im Eingabefeld kann der
Anwender eine Zahl eingeben. Wenn er auf den Button klickt, wird die JavaScript-Funktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt. Dazu enthlt der
Button den Event-Handler onClick= (= beim Anklicken). Dahinter wird die JavaScript-Funktion
mit der eingegebenen Zahl aufgerufen.
Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die ffnende Klammer.
Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der ffnenden gleich eine
schlieende Klammer. Wenn die Funktion Parameter erwartet, mssen Sie fr jeden Parameter
einen erlaubten Wert bergeben. Im Beispiel erwartet die Funktion einen Parameter. Wenn Sie
mehrere Parameter bergeben, trennen Sie diese durch Kommata.

18.4.3

Funktion mit Rckgabewert aufrufen

Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurckgeben. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function BruttoBetrag(Netto, Prozente) {

570

Kapitel 18: JavaScript Sprachelemente

var Ergebnis = Netto * (1 + (Prozente / 100));

return Ergebnis;
}
function SchreibeBrutto(Betrag, Prozentsatz) {
var Wert = BruttoBetrag(Betrag, Prozentsatz);
document.BruttoForm.Ergebnisfeld.value = Wert;
}
//-->
</script>
</head>
<body>
<form name="BruttoForm" action="">
<pre>
Nettobetrag: <input type="text" name="NettoEingabe">
Prozentsatz: <input type="text" name="ProzentEingabe"></pre>
<p>Kommabetrag mit Punkt eingeben!</p>
<input type="button" value="Brutto ermitteln"
onClick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,document.BruttoForm.
ProzentEingabe.value)">
<pre>
Ergebnis:

<input type="text" name="Ergebnisfeld"></pre>

</form>
</body>
</html>

18.7: Die Prozentfunktion liefert den Bruttobetrag als Rckgabewert.

Das obige Beispiel zeigt eine HTML-Datei, in deren Dateikopf ein JavaScript-Bereich definiert
ist, in dem wiederum die zwei Funktionen BruttoBetrag(...) und SchreibeBrutto(...)
definiert sind. Im Dateikrper der HTML-Datei steht ein Formular mit je einem Eingabefeld fr
einen Nettobetrag und einen Prozentwert. Wenn der Anwender auf den darunter definierten
Button klickt, wird die Funktion SchreibeBrutto(...) aufgerufen. Diese wiederum ruft die
Funktion BruttoBetrag(...) auf.

18.4 Funktionen

571

Da die Funktion BruttoBetrag(...) Ihr errechnetes Ergebnis an die aufrufende Instanz

zurckgibt, wird in SchreibeBrutto(...) eine Variable mit dem Namen Wert definiert, die
diesen Rckgabewert speichert. Das Ergebnis, das in dieser Variablen gespeichert ist, schreibt die
Funktion schlielich in ein Feld, das innerhalb des Formulars eigens fr diesen Zweck eingerichtet wurde: das Eingabefeld mit dem Namen Ergebnisfeld.

18.4.4

Vordefinierte JavaScript-Funktionen

Es gibt ein paar Funktionen, die bereits in JavaScript integriert sind. Solche Funktionen knnen
Sie aufrufen, ohne sie selbst zu definieren. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-function Rechne(Operation) {
var Ergebnis = eval(Operation);
alert("Ergebnis: " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular">
<p>Geben Sie eine Rechenaufgabe (z.B. 8*5) ein:</p>
<input type="text" name="Eingabe">
<input type="button" value="OK"
onClick="Rechne(document.Formular.Eingabe.value)">
</form>
</body>
</html>

Das obige Beispiel zeigt eine HTML-Datei mit einem JavaScript-Bereich, in dem wiederum eine
Funktion Rechne() definiert ist. Innerhalb des Dateikrpers der HTML-Datei ist ein Formular
mit einem Eingabefeld notiert. In dem Eingabefeld kann der Anwender eine Rechenaufgabe
eingeben, z.B. 1 + 1 oder (28.76 - 0.00001) * 7. Beim Anklicken des Klick-Buttons wird die
Funktion Rechne() aufgerufen. Sie erwartet als Parameter eine Rechenaufgabe. Deshalb wird ihr
der Inhalt des Formulareingabefeldes beim Aufruf bergeben. Die Funktion Rechne bedient sich
zur Berechnung des Ergebnisses der uerst mchtigen vordefinierten Funktion eval() (eval =
evaluate = berechne). Diese kann unter anderem Rechenoperationen als solche erkennen und
ausrechnen. Das Rechenergebnis wird im Beispiel in einem Meldungsfenster ausgegeben.
Beachten Sie: Eine bersicht aller vordefinierten JavaScript-Funktionen finden Sie im Abschnitt
20.33 ber Objektunabhngige Funktionen.

572

Kapitel 18: JavaScript Sprachelemente

18.5

Steuerzeichen und besondere Notationen

18.5.1

Steuerzeichen bei Zeichenketten

Bei Zeichenkettenvariablen gibt es die Mglichkeit, Steuerzeichen in den Variablenwert einzufgen. Ein Beispiel:
<script type="text/javascript">
<!-var Variable1 = "Hier erfolgt ein\nZeilenumbruch";
var Variable2 = "Hier erfolgt ein\fWagenrcklauf";
var Variable3 = "Hier erfolgt ein\bBackspace";
var Variable4 = "Hier erfolgt ein\rDOS-Extra-Zeilenumbruch";
var Variable5 = "Hier erfolgt ein\tTabulator";
var Variable6 = "Hier erfolgt ein\"Anfhrungszeichen";
// -->
</script>

Steuerzeichen dieser Art werden durch das Zeichen \ eingeleitet. Dahinter folgt ein Buchstabe,
der das Steuerzeichen markiert.
Die Zeichenfolge \n ist z.B. in alert-Meldungen sinnvoll, um innerhalb des auszugebenden
Textes einen Zeilenumbruch einzufgen.
Die Zeichenfolge \t ist z.B. sinnvoll, um etwa innerhalb einer alert(...)-Meldung tabellarische Information auszugeben.
Die Zeichenfolge \r sollten Sie zustzlich zu dem Steuerzeichen \n notieren, wenn \n alleine
nicht funktioniert.
Die Zeichenfolge \" mssen Sie notieren, wenn Sie innerhalb einer Zeichenkette ein Anfhrungszeichen verwenden mchten (Maskierung des Zeichens, das die Zeichenkette einschliet).

18.5.2

Notation numerischer Werte

Sie knnen Zahlen ganz normal notieren. Beachten Sie dabei nur, dass bei Kommazahlen
anstelle eines Kommas ein Punkt verwendet werden muss. So wird die Zahl Pi beispielsweise als
3.1415 notiert. Fr sehr hohe und sehr niedrige Zahlen und fr komplexe Kommazahlen gibt es
daneben aber noch andere Notationsmglichkeiten. Ein Beispiel:
<script language="JavaScript">
<!-var a = 1E1;
var b = 1.2345E4;
var c = 2e-3;
// -->
</script>

Mit e oder E bestimmen Sie die Zehnerpotenz bzw. die Anzahl Nullen, die hinter der Zahl vor
dem e bzw. E stehen.

18.6 Operatoren

573

Die erste Zahl im Beispiel, 1E1, ist eine 1 mit einer 0 dahinter, also 10.
Die zweite Zahl im Beispiel, 1.2345E4, ist eine andere Schreibweise fr 12345. Der Dezimalpunkt wird also einfach um so viele Stellen nach rechts verschoben, wie hinter dem E-Zeichen
angegeben.
Die dritte Zahl im Beispiel, 2e-3, ist eine andere Schreibweise fr 0.002. Der Dezimalpunkt
wird also einfach um so viele Stellen nach links verschoben, wie hinter dem E-Zeichen angegeben. Diese umgekehrte Richtung wird durch das Minuszeichen bewirkt, das hinter dem e
folgt.

18.6

Operatoren

18.6.1

Zuweisungsoperator

Sie knnen zum Beispiel einer Variablen einen Wert zuweisen. Der Zuweisungsoperator dafr ist
ein Gleichheitszeichen. Ein Beispiel:
<script type="text/javascript">
<!-var SinnDesLebens = 42;
// -->
</script>

Im Beispiel wird eine Variable namens SinnDesLebens definiert. Der Variablen wird mit dem
Zuweisungsoperator = der Wert 42 (was sonst?) zugewiesen.

18.6.2

Vergleichsoperatoren

Vergleichsoperatoren brauchen Sie, wenn Sie zwei Werte vergleichen wollen, z.B. den aktuellen
Inhalt einer Variablen mit einem fixen Wert. Vor allem bei bedingten Anweisungen und Schleifen kommt das vor. Ein Beispiel:
<script language="JavaScript" type="text/javascript">
<!-var SinnDesLebens=42;
var Alter=8;
if(SinnDesLebens == 42) alert(1);
if(SinnDesLebens != 42) alert(0);
if(SinnDesLebens > 42) alert(0);
if(SinnDesLebens < 42) alert(0);
if(Alter >= 18) alert("SIE duerfen das hier sehen!");
if(Alter <= 17) alert("SIE duerfen das hier NICHT sehen!");
// -->
</script>

574

Kapitel 18: JavaScript Sprachelemente

Um abzufragen, ob zwei Werte gleich sind, notieren Sie zwei Gleichheitszeichen == nebeneinander.
Um abzufragen, ob zwei Werte unterschiedlich sind, notieren Sie zwischen beiden Werten die
Zeichen !=.
Um abzufragen, ob ein Wert grer oder gleich ist als ein anderer, notieren Sie die Zeichen >=.
Um abzufragen, ob ein Wert in jedem Fall grer ist als ein anderer, notieren Sie das Zeichen >.
Um abzufragen, ob ein Wert kleiner oder gleich ist als ein anderer, notieren Sie die Zeichen <=.
Um abzufragen, ob ein Wert in jedem Fall kleiner ist als ein anderer, notieren Sie das Zeichen <.
Nhere Information zu der If-Abfrage erhalten Sie im Abschnitt 18.7 ber bedingte Anweisungen. Ab der JavaScript-Version 1.2 knnen Sie Gleichheit/Ungleichheit nicht nur mit == bzw. !=,
sondern auch mit === bzw. !== abprfen. In diesem Fall werden die Werte zustzlich auf ihren
Variablentyp hin berprft. So wird z.B. die Anweisung if (SinnDesLebens === "42")
alert(1) nicht ausgefhrt. Bercksichtigen Sie bei der Verwendung dieser Operatoren, dass
ltere Browser darauf mit einer Fehlermeldung reagieren.

18.6.3

Berechnungsoperatoren

Um mit numerischen Werten Berechnungen durchzufhren, brauchen Sie Berechnungsoperatoren. Ein Beispiel:
<script type="text/javascript">
<!-var Zwei = 1 + 1;
var GarNix = 1 - 1;
var AuchNix = 81 / 3 - 27;
var WenigerAlsNix = 81 / (3 - 27);
var SinnDesLebens = 6 * 7;
var MachtAuchSinn = 84 / 2;
var x = Jahr % 4;
if(x == 0)
Schaltjahr = true;
/* Besondere Notationen: */
var Zahl;
Zahl+=3;
Zahl++;
Zahl-=2;
Zahl--;
Zahl*=4;
Zahl/=3;
// -->
</script>

18.6 Operatoren

575

Mathematische Operatoren notieren Sie mit den dafr blichen Zeichen. Mit + notieren Sie eine
Addition, mit - eine Subtraktion, mit * eine Multiplikation, mit / eine Division. Eine Besonderheit stellt der Operator % dar. Damit wird eine so genannte Modulo-Division durchgefhrt. Bei
einer Modulo-Division werden zwei Werte dividiert. Das Ergebnis ist jedoch im Gegensatz zur
normalen Division nur der Restwert der Division. Wenn Sie z.B. 13 % 5 notieren, erhalten Sie als
Ergebnis 3, weil 13 geteilt durch 5 gleich 2 Rest 3 ergibt. Diese 3 ist es, die als Ergebnis einer
Modulo-Division herauskommt.
Sie knnen mehrere Operationen in Reihe notieren. Dabei gilt die bliche Punkt-vor-StrichRegel. Wenn Sie eine andere Regel erzwingen wollen, mssen Sie Klammern verwenden, so wie
im vierten der obigen Beispiele.
Die besonderen Notationen, die in den obigen Beispielen vorkommen, knnen Sie verwenden,
wenn Sie Additionen oder Subtraktionen abkrzen wollen:

Zahl+=3; ist eine Abkrzung fr Zahl = Zahl + 3;

Zahl++; ist eine Abkrzung fr Zahl = Zahl + 1;

Zahl-=2; ist eine Abkrzung fr Zahl = Zahl - 2;

Zahl--; ist eine Abkrzung fr Zahl = Zahl - 1;

Der Operator ++ wird auch als Inkrementationsoperator bezeichnet, der Operator -- als Dekrementationsoperator.

18.6.4

Logische Operatoren

Logische Operatoren brauchen Sie, wenn Sie komplexere Bedingungen fr bedingte Anweisungen oder Schleifen formulieren wollen. Ein Beispiel:
<script type="text/javascript">
<!-var PLZ=81000;
var x=20, y=8;
if(PLZ >= 80000 && PLZ <= 82000)
alert("Sie wohnen wohl in Muenchen oder Umgebung!")
if(x > 100 || y == 0)
break;
// -->
</script>

Mit dem logischen Operator && verknpfen Sie zwei oder mehrere Bedingungen durch und,
d.h. beide bzw. alle Bedingungen mssen erfllt sein, damit die gesamte Bedingung erfllt ist.
Mit dem logischen Operator || verknpfen Sie zwei oder mehrere Bedingungen durch oder,
d.h. es gengt, wenn eine der Bedingungen erfllt ist, damit die gesamte Bedingung erfllt ist.

576

Kapitel 18: JavaScript Sprachelemente

18.6.5

Bit-Operatoren

Bit-Operatoren sind nur etwas fr Profis. Um Bit-Operatoren richtig einzusetzen, mssen Sie
viel von computerinternen Speichervorgngen verstehen. Deshalb werden die Bit-Operatoren
hier nur kurz erwhnt.
Operator

Wirkung

>>

verschiebt Bits nach rechts

verschiebt Bits nach links
definiert in einer Bitmaske eine Und-Bedingung
definiert in einer Bitmaske eine inklusive Oder-Bedingung
definiert in einer Bitmaske eine exklusive Oder-Bedingung

<<
&
|
^

18.6.6

Operator zur Zeichenkettenverknpfung

Mit einem einfachen Pluszeichen + knnen Sie eine Zeichenkette an eine andere anhngen. Ein
Beispiel:
<script language="JavaScript" type="text/javascript">
<!-var Vorname = "Stefan "
var Zuname = "Muenz"
var Name = Vorname + Zuname + ", der Autor dieses Dokuments"
// -->
</script>

18.6.7

Operatorenrangfolge

Unter den Operatoren von JavaScript gibt es eine festgelegte Rangordnung. Wenn Sie komplexe
Rechenoperationen durchfhren oder mehrere Bedingungen miteinander verknpfen, gilt bei
der internen Auflsung solcher komplexen Ausdrcke die folgende Rangordnung:
1. Rangstufe

, (Aneinanderreihung)

2. Rangstufe

= += -= <<= >>= &= ^= |=

3. Rangstufe

?: (Entweder-Oder-Bedingung)

4. Rangstufe

||

5. Rangstufe

&&

6. Rangstufe

7. Rangstufe

8. Rangstufe

&

9. Rangstufe

== === != !==

18.6 Operatoren

10. Rangstufe

< <= > >=

11. Rangstufe

<< >> >>>

12. Rangstufe

+-

13. Rangstufe

*/%

14. Rangstufe

! ~ - ++ --

15. Rangstufe

() [] . (Klammerung und Vektoren)

577

Mit Hilfe von Klammern, die absichtlich die unterste Rangstufe in der Priorittshierarchie darstellen, knnen Sie die Rangfolge bei den Operatoren beeinflussen und Ausdrcke so bewerten,
wie Sie es wnschen. Ein Beispiel:
<script type="text/javascript">
<!-var OffizielleStatistik = 3.29 * 3 + 4.71;
var MeineStatistik = 3.29 * (3 + 4.71);
// -->
</script>

Das Beispiel zeigt, wie Sie durch Setzen von Klammern das Ergebnis einer Rechenoperation
beeinflussen knnen.

18.6.8

Operator zur Typenbestimmung

Methoden vordefinierter Objekte sind an feste Variablentypen gebunden. Bevor Sie diese verwenden knnen, sollten Sie im Zweifelsfall den Typ der Variable prfen. Mit dem Operator
typeof steht Ihnen ein Werkzeug zur Typenberprfung zur Verfgung. Ein Beispiel:
<script type="text/javascript">
<!-var Zahl=2505;
alert(typeof Zahl);
// -->
</script>

Der Operator typeof wertet den nachfolgenden Operanden hinsichtlich seines Typs aus. Der
Rckgabewert dieses Operators ist ein String, den Sie abfragen knnen. Anweisungen mssen in
Klammern eingeschlossen werden, z.B. typeof(Zahl=Zahl+2). Mgliche Rckgabewerte sind:
Variablentyp

Beschreibung

boolean

Ja/Nein-Variable
Zeichenkettenvariable
numerische Variable
Funktion
Objekt
unbestimmter Typ

string
number
function
object
undefined

578

Kapitel 18: JavaScript Sprachelemente

18.6.9

void-Operator

Der Operator void wird dann verwendet, wenn eine Anweisung ausgefhrt, aber keine Rckgabewerte erzeugt werden drfen. Das ist z.B. dann der Fall, wenn Sie so genannte Bookmarklets
erzeugen mchten. Ein Beispiel:
<script type="text/javascript">
<!-var Zahl=2505;
void Zahl++;
// -->
</script>

Der Operator void fhrt die nach ihm notierte Anweisung aus. Der Operator ersetzt dabei die
Rckgabewerte der Anweisung stets durch undefined. Sie knnen auch eine Anweisung wie z.B.
Zahl=Zahl+2 als Operand angeben. In diesem Fall schlieen Sie die Anweisung in Klammern
ein, also void(Zahl=Zahl+2).

18.6.10

Operator zum Lschen von Objekten

Nicht mehr bentigte Objekte bzw. Objekteigenschaften werden mit dem Operator delete
gelscht. Sie knnen jedoch keine vordefinierten Objekte und Objekteigenschaften lschen. Der
Operator gibt im Erfolgsfall den Wert true und bei Misserfolg den Wert false zurck. Ein
Beispiel:
<script type="text/javascript">
<!-SinnDesLebens = 42;
delete SinnDesLebens;
alert(typeof SinnDesLebens);
// -->
</script>

Im Beispiel wird der Variablen SinnDesLebens der Wert 42 zugewiesen. Anschlieend wird
diese Variable mit delete wieder gelscht. Mit Hilfe des Operators typeof wird berprft, ob
das Lschen der Variablen erfolgreich ist.
Beachten Sie: In Netscape bis einschlielich Version 6 knnen nur Variablen und Objekte
gelscht werden, die nicht mit dem Schlsselwort var deklariert wurden. Auf vordefinierte
Objekte oder Objeteigenschaften wie z.B. Math.PI knnen Sie diesen Operator nicht anwenden.

18.7
18.7.1

Bedingte Anweisungen (if-else/switch)

Wenn-dann-Bedingungen mit "if"

Sie knnen die Ausfhrung von Anweisungen von Bedingungen abhngig machen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!--

18.7 Bedingte Anweisungen (if-else/switch)

579

function Geheim() {
var Passwort = "Traumtaenzer";
var Eingabe = window.prompt("Bitte geben Sie das Passwort ein","");
if(Eingabe != Passwort) {
alert("Falsches Passwort!");
Geheim();
}
else
document.location.href="geheim.htm";
}
// -->
</script>
</head><body onload="Geheim()">
<h1>Hier kommen Sie nur mit Passwort rein ;-)</h1>
</body></html>

Das Beispiel stellt eine einfache Passwortabfrage dar. Das Script ist in einer Funktion namens
Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollstndig geladen ist. Dazu ist
im einleitenden <body>-Tag der Event-Handler onLoad notiert. Innerhalb der Funktion fordert
ein Dialogfenster (window.prompt()) den Anwender auf, das Passwort einzugeben. Der Rckgabewert von window.prompt(), das eingegebene Passwort, wird in der Variablen Eingabe gespeichert.
Mit if(Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert Traumtaenzer. Ist dies der Fall, sind also beide
Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit alert() eine entsprechende Meldung ausgegeben. Anschlieend wird die Funktion Geheim() erneut aufgerufen, und
der Anwender kann das Passwort versuchen neu einzugeben. Im anderen Fall (else), wenn
Eingabe und Passwort den gleichen Wert haben, wird mit document.location.href eine
andere Seite aufgerufen, nmlich die geschtzte Seite.
Mit if leiten Sie eine Wenn-dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie
Vergleichsoperatoren und in den meisten Fllen auch Variablen. Fr Flle, in denen die Bedingung nicht erfllt ist, knnen Sie einen andernfalls-Zweig definieren. Dies geschieht durch
else (else = sonst).
Der Else-Zweig ist nicht zwingend erforderlich. Wenn Sie mehr als eine Anweisung unterhalb
und abhngig von if oder else notieren wollen, mssen Sie die Anweisungen in geschweifte
Klammern einschlieen (siehe auch den Abschnitt 18.1.2 ber Anweisungsblcke).

18.7.2

Einfache Entweder-oder-Abfrage

Fr einfache Entweder-oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur
if/else-Anweisung verwenden knnen.

580

Kapitel 18: JavaScript Sprachelemente

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Antwort() {
var Ergebnis = (document.Formular.Eingabe.value == "42") ? "RICHTIG!" : "FALSCH!";
document.Formular.Eingabe.value =
"Die Antwort ist " + Ergebnis;
}
// -->
</script>
</head><body>
<h1>Der Sinn des Lebens</h1>
<form name="Formular">
<p>Was ist der Sinn des Lebens?</p>
<input type="text" name="Eingabe" size="40">
<input type="button" value="OK" onClick="Antwort()">
</form>
</body></html>

18.8:

Das Beispiel prft den Inhalt eines Eingabefeldes auf bereinstimmung mit einem
vorgegebenen Wert.

Das Beispiel enthlt eine JavaScript-Funktion namens Antwort(). Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klick-Button
mit der Aufschrift OK klickt, und zwar mit dem Event-Handler onClick. Die Funktion prft, ob
der Wert des Eingabefeldes im Formular (document.Formular.Eingabe.value) den Wert 42
hat. Abhngig davon wird der Variablen Ergebnis entweder die Zeichenkette RICHTIG! oder
FALSCH! zugewiesen. Anschlieend wird in dem Textfeld des Formulars, das zur Eingabe diente,
ein entsprechender Satz zusammengesetzt (siehe dazu auch Operator fr Zeichenkettenverknpfung, Kapitel 18.6.6).
Eine einfache Entweder-oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss
in Klammern stehen, im Beispiel (document.Formular.Eingabe.value == "42"). Dahinter
wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist,
wenn die Bedingung erfllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert fr den
Fall, dass die Bedingung nicht erfllt ist. Da es sich um Werte handelt, die fr die Weiterver-

18.7 Bedingte Anweisungen (if-else/switch)

581

arbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen
Entweder-oder-Abfrage in der Regel eine Variable vorangestellt, im Beispiel die Variable Ergebnis. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-oder-Abfrage zugewiesen.
Um Bedingungen zu formulieren, brauchen Sie die Vergleichsoperatoren aus Kapitel 18.6.2.

18.7.3

Fallunterscheidung mit switch

Mit if und else knnen Sie genau zwei Flle unterscheiden. Wenn Sie feiner differenzieren,
also zwischen mehreren Fllen unterscheiden wollen, knnen Sie zwar mehrere If-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Mglichkeit: die Fallunterscheidung mit
switch. Diese Syntax, die aus der Programmiersprache C entlehnt ist, gibt es in JavaScript aber
erst seit der Sprachversion 1.2 ltere Browser quittieren solche Anweisungen mit einer Fehlermeldung. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:","");
switch(Eingabe) {
case "1":
alert("Sie sind sehr bescheiden");
break;
case "2":
alert("Sie sind ein aufrichtiger Zweibeiner");
break;
case "3":
alert("Sie haben ein Dreirad gewonnen");
break;
case "4":
alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
break;
default:
alert("Sie bleiben leider dumm");
break;
}
// -->
</script>
</body></html>

Mit switch leiten Sie eine Fallunterscheidung ein (switch = Schalter). Dahinter folgt, in runde
Klammern eingeschlossen, eine Variable oder ein Ausdruck, fr dessen aktuellen Wert Sie die
Fallunterscheidung durchfhren. Im Beispiel ist das die Variable mit dem Namen Eingabe.
Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster
(window.prompt()) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und
4 einzugeben. Der eingegebene Wert wird in Eingabe gespeichert.

582

Kapitel 18: JavaScript Sprachelemente

Die einzelnen Flle, die Sie abfragen mchten, werden innerhalb geschweifter Klammern notiert.
Jeden einzelnen Fall leiten Sie mit case ein (case = Fall). Dahinter folgt die Angabe des Wertes,
auf den Sie prfen wollen. Die Anweisung case "1": im obigen Beispiel bedeutet dann so viel
wie: 'wenn die Variable Eingabe den Wert 1 hat'. Im Beispiel wird fr jeden Fall eine individuelle Meldung ausgegeben.
Wichtig ist dabei auch das Wort break am Ende jedes Falls (break = abbrechen). Wenn Sie das
Wort weglassen, werden nmlich alle nachfolgenden Flle auch ausgefhrt, aber das wollen Sie ja
in der Regel nicht.
Fr den Fall, dass keiner der definierten Flle zutrifft, knnen Sie am Ende der Fallunterscheidung den Fall default: definieren. Die darunter stehenden Anweisungen werden ausgefhrt,
wenn keiner der anderen Flle zutrifft.

18.8

Schleifen (while/for/do-while)

18.8.1

Schleifen mit while

Mit Hilfe von while-Schleifen knnen Sie Programmanweisungen so lange wiederholen, wie die
Bedingung, die in der Schleife formuliert wird, erfllt ist. Solche Schleifen eignen sich dann,
wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Eingabe = "";
var Zaehler = 1;
while(Eingabe != "how to make love"

&& Zaehler <= 3) {

Eingabe = window.prompt(Zaehler + ". Versuch: Was bedeutet HTML?","");

Zaehler++;
}
if(Eingabe != "how to make love")
document.write("<big>Lernen Sie erst mal HTML! ...<\/big>");
else
document.write("<big>Fein, Sie haben verstanden worum es geht! ...<\/big>");
// -->
</script>
</body></html>

Das Beispiel bittet den Anwender in einer while-Schleife bis zu dreimal in einem Dialogfenster
(window.prompt()), die Bedeutung der Abkrzung 'HTML' einzugeben. Die Schleife kann aus
zwei Grnden beendet werden: Entweder der Anwender gibt die richtige Bedeutung der Abkrzung ein, oder die Variable Zaehler, die die Anzahl der Versuche mitzhlt, hat einen Wert grer als 3. Wenn die Schleife beendet ist, steht also nicht fest, welche der beiden mglichen
Ursachen sie beendet hat. Um das zu entscheiden, wird im Beispiel deshalb anschlieend mit
Hilfe einer If-Abfrage nochmals berprft, ob die Schleife deshalb beendet wurde, weil die Ein-

18.8 Schleifen (while/for/do-while)

583

gabe falsch war. Je nachdem, ob sie falsch oder richtig war, wird mit document.write ins Anzeigefenster des Browsers ein entsprechender Satz geschrieben.
Eine while-Schleife beginnt mit dem Wort while (while = solange). Dahinter folgt, in Klammern stehend, die Bedingung. Um eine Bedingung zu formulieren, brauchen Sie Vergleichsoperatoren. Der Inhalt der Schleife wird so lange wiederholt, wie die Schleifenbedingung wahr
ist.
In der Regel enthlt eine while-Schleife mehrere Anweisungen, die innerhalb der Schleife
stehen. Notieren Sie alle Anweisungen innerhalb geschweifter Klammern { und }, so wie im
Beispiel (siehe auch den Abschnitt 18.1.2 ber Anweisungsblcke).
Beachten Sie: Achten Sie bei while-Schleifen immer darauf, dass es mindestens eine Mglichkeit gibt, um die Schleife nach einer angemessenen Zeit zu beenden. Andernfalls erzeugen Sie
eine so genannte Endlosschleife, aus der der Anwender nur durch gewaltsames Beenden des
WWW-Browsers herauskommt. Das ist besonders bei Online-Sitzungen im WWW sehr
rgerlich!
Um Endlosschleifen zu vermeiden, brauchen Sie irgendetwas, das irgendwann zu einem Ausweg
aus der Schleife fhrt. Meistens werden zu diesem Zweck so genannte Zhler definiert, im
Beispiel die Variable Zaehler. Diese Variable hat im Beispiel einen Anfangswert von 1 und wird
innerhalb der Schleife bei jedem Durchgang mit der Anweisung Zaehler++; um 1 erhht.
Wenn im Beispiel der Zhlerstand grer als 3 ist, wird abgebrochen. Weitere Mglichkeiten,
um Schleifen abzubrechen, werden im Abschnitt 18.8.4 beschrieben.

18.8.2

Schleifen mit for

Die Schleifenbedingung einer for-Schleife sieht von vorneherein einen Zhler und eine
Abbruchbedingung vor. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Ausgabe = "";
for(var i = 10; i <= 36; i++)
Ausgabe = Ausgabe + "<span style=\"font-size:" + i + "pt\">Schrift mit " + i + "
Punkt<\/span><br>";
document.write(Ausgabe);
// -->
</script>
</body></html>

Das Beispiel definiert eine Variable namens Ausgabe, die im Verlauf einer for-Schleife immer
mehr Inhalt erhlt und am Ende mit document.write ihren ganzen Inhalt ins Browser-Fenster
schreibt. Die for-Schleife wird insgesamt 27-mal durchlaufen, nmlich so oft, wie der Zhler,
der in der Variablen i definiert und mit dem Wert 10 initialisiert wird, kleiner oder gleich 36 ist,
wobei er bei jedem Schleifendurchlauf um 1 erhht wird (i++). Mit jedem Schleifendurchgang
wird die Variable Ausgabe mit ihrem jeweils bisherigen Wert um etwas HTML-Code mit der
CSS-Angabe font-size (Schriftgre) erweitert. Der Wert, der font-size dabei zugewiesen

584

Kapitel 18: JavaScript Sprachelemente

wird, ist jeweils der Wert von i. So entsteht der Effekt, dass CSS-Angaben von font-size:10pt
bis font-size:36pt erzeugt werden. Das Ergebnis wird am Ende ausgegeben. Zum Verstndnis
der zusammengesetzen Teile bei Ausgabe siehe auch Operator fr Zeichenkettenverknpfung.

18.9: Die for-Schleife gibt denselben Text mit immer grer werdender Schrift aus.

Eine for-Schleife beginnt mit dem Wort for. Dahinter wird, in Klammern stehend, die Schleifenbedingung formuliert. Bei der for-Schleife gilt dabei eine feste Syntax. Innerhalb der Schleifenbedingung werden drei Anweisungen notiert. In der ersten Anweisung wird ein Schleifenzhler definiert und initialisiert. Im Beispiel wird ein Zhler i definiert und mit dem Wert 10
initialisiert. Die zweite Anweisung enthlt die Bedingung, ab der die Schleife beendet wird. Dazu
brauchen Sie Vergleichsoperatoren. In der dritten Anweisung wird der Schleifenzhler so verndert, dass er irgendwann die in der zweiten Anweisung notierte Bedingung erfllt. Im Beispiel
wird der Zhler mit i++ bei jedem Schleifendurchgang um 1 erhht. An dieser Stelle knnte aber
auch so etwas stehen wie i=i+10 (bei jedem Schleifendurchgang um 10 erhhen).
Eine spezielle Abart der for-Schleife ist die for-in-Schleife. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Ausgabe = "";
for (var Eigenschaft in document)

18.8 Schleifen (while/for/do-while)

585

Ausgabe = Ausgabe + "document." + Eigenschaft + ": " + document[Eigenschaft] +

"<br>";
document.write("<h1>Eigenschaften des Objekts <i> document <\/i><\/h1>")
document.write(Ausgabe);
// -->
</script>
</body></html>

Das Beispiel zeigt, wie Sie mit Hilfe einer for-in-Schleife einiges ber die JavaScript-Fhigkeiten
Ihres Browsers herausbekommen knnen. Im Beispiel werden die Eigenschaften des Objektes
document ausgegeben. Mit jedem Schleifendurchgang wird die Variable Ausgabe um eine
Objekteigenschaft erweitert. Den aktuellen Wert der Objekteigenschaft knnen Sie sich mit
Objektname[Eigenschaft] ausgeben lassen. Die Schleife luft so lange, wie es verfgbare
Objekteigenschaften gibt dies bedeutet das for in.
Beachten Sie: Wenn Sie mehr als eine Anweisung von einer for-Schleifenbedingung abhngig
machen wollen, mssen Sie die Anweisungen wie blich in geschweifte Klammern einschlieen.
Die for-in-Schleife knnen Sie in Opera nur auf selbst definierte Objekte und Variablen anwenden. Bei vordefinierten Objekten bleibt die Schleife wirkungslos. Der MS Internet Explorer kennt
diese Schleifenart erst ab Version 4.01.

Schleifen mit do-while

Die do-while-Schleife ist eine Variante der normalen while-Schleife. Der Unterschied zwischen
beiden ist, dass bei der normalen while-Schleife vor dem Ausfhren des Codes die Schleifenbedingung berprft wird, whrend bei der do-while-Schleife zuerst der Code ausgefhrt und erst
danach die Schleifenbedingung berprft wird. Auf diese Weise knnen Sie erzwingen, dass
Anweisungen innerhalb der Schleife auf jeden Fall mindestens einmal ausgefhrt werden, auch
wenn sich die Schleifenbedingung gleich am Anfang als unwahr herausstellt. Ein Beispiel:
Einmal so:
<script type="text/javascript">
<!-var x = 10;
do {
document.write("<br>x * x = " + (x * x));
x = x + 1;
}
while(x < 10);
// -->
</script>
Und einmal so:
<script type="text/javascript">
<!-var x = 10;
while(x < 10) {
document.write("<br>x * x = " + (x * x));
x = x + 1;

586

Kapitel 18: JavaScript Sprachelemente

}
// -->
</script>

Im Beispiel werden zwei kleine JavaScript-Bereiche definiert. In beiden Bereichen wird eine
Variable x definiert und mit dem Wert 10 vorbelegt. Im ersten Bereich wird so lange das Quadrat
von x (das bei jedem Schleifendurchlauf um 1 erhht wird) geschrieben, wie x kleiner als 10 ist.
Da x ja schon am Beginn den Wert 10 hat, ist die Abbruchbedingung eigentlich schon von vorneherein erfllt. Trotzdem wird einmal das Quadrat von x ausgegeben, da die berprfung der
Schleifenbedingung erst nach dem Ausfhren der Anweisungen innerhalb der Schleife erfolgt.
Im zweiten Script-Bereich herrschen die gleichen Bedingungen, jedoch wird dort eine normale
while-Schleife notiert. Da x von vorneherein nicht kleiner als 10 ist, werden die Anweisungen
der while-Schleife kein einziges Mal ausgefhrt. Die berprfung der Schleifenbedingung, die

am Anfang stattfindet, verhindert dies.

18.8.3

Kontrolle innerhalb von Schleifen break und

continue

Schleifen sind kritische Faktoren innerhalb eines Scripts. Bei komplizierteren Aufgaben ist es
manchmal nicht einfach, eine Schleife so zu programmieren, dass sie in jedem Fall irgendwann
mal abgebrochen wird. Deshalb gibt es zustzliche Befehle, um innerhalb einer Schleife das
Geschehen zu kontrollieren. Ein Beispiel 1:
<script type="text/javascript">
<!-var i = 0;
while (i < 6) {
if (i == 3) break;
i++;
alert("i = " + i);
}
// -->
</script>

Mit break knnen Sie eine Schleife sofort beenden. Dazu mssen Sie innerhalb des Schleifenkrpers eine if-Abfrage notieren und abhngig davon das Wort break als Anweisung notieren.
Im Beispiel bricht die Schleife bereits ab, wenn i den Wert 3 hat, obwohl laut Schleifenbedingung das Hochzhlen bis 6 erlaubt.
Beispiel 2:
<script type="text/javascript">
<!-var i = 0;
while (i < 6) {
Ende:
if (i == 3) {
alert("Das wars, denn i ist gleich " + i);

18.9 Reservierte Wrter

587

break Ende;
}
i++;
}
// -->
</script>

Dies ist eine besondere Variante von break. Sie knnen vor einer Abfrage, von der Sie eine
break-Anweisung abhngig machen, ein Label notieren. Das ist ein selbst vergebener Name
mit einem Doppelpunkt dahinter, im Beispiel Ende:. Hinter dem Wort break knnen Sie dann
den Namen des Labels angeben. So stellen Sie im Beispiel sicher, dass sich die break-Anweisung
auf jeden Fall auf jene if-Abfrage bezieht, in der abgefragt wird, ob i gleich 3 ist. In einfachen
Fllen wie im obigen Beispiel ist das eigentlich berflssig. Aber behalten Sie die Mglichkeit im
Auge, falls Sie einmal verschachtelte if-Abfragen innerhalb von Schleifen programmieren und
dort auch break-Anweisungen benutzen. Beachten Sie jedoch, dass diese Variante der breakAnweisung JavaScript 1.2 ist und bei lteren Browsern zu einer Fehlermeldung fhrt.
Beispiel 3:
<script type="text/javascript">
<!-var i = 0, j = 0;
while (i < 6) {
i++;
if (i == 3) continue;
j++;
}
alert("i ist gleich " + i + " und j ist gleich " + j);
</script>

Mit continue erzwingen Sie sofort den nchsten Schleifendurchlauf. Nachfolgende Anweisungen innerhalb der Schleife werden bei diesem Schleifendurchlauf nicht mehr ausgefhrt. Im
Beispiel werden zwei Zhler i und j bei jedem Schleifendurchlauf um 1 erhht. Wenn i gleich 6
ist, wird die Schleife abgebrochen. Zwischendurch hat i auch mal den Wert 3. Dieser Fall wird
mit einer if-Abfrage behandelt. Wenn i gleich 3 ist, wird sofort der nchste Schleifendurchgang
gestartet. Die Anweisung j++; wird dadurch in diesem Schleifendurchlauf nicht mehr ausgefhrt. Am Ende hat dadurch i den Wert 6 und j nur den Wert 5.

18.9
18.9.1

Reservierte Wrter
bersicht reservierter Wrter

JavaScript enthlt eine Reihe von Schlsselwrtern mit bestimmter Bedeutung. Diese reservierten Wrter sollten Sie kennen, um nicht versehentlich gleichnamige Variablen oder Funktionen
zu definieren, denn dies ist nicht erlaubt. Einige der reservierten Wrter der folgenden Liste sind
bereits in Gebrauch, andere sind fr den zuknftigen Sprachausbau von JavaScript geplant. Auch
noch nicht benutzte reservierte Wrter drfen Sie nicht als Variablen- oder Funktionsnamen
verwenden.

588

Kapitel 18: JavaScript Sprachelemente

Reserviertes Wort Erluterung

abstract
boolean
break
byte
case
catch
char
class
const
continue
default
delete
do
double
else
export
extends
false
final
finally
float
for
function
goto
if
implements
in
instanceof
int
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this

noch nicht verwendet

noch nicht verwendet
als Anweisung: Abbruch in Schleifen
noch nicht verwendet
fr Fallunterscheidungen
als Anweisung: dient zur Fehlerbehandlung (ab JavaScript-Version 1.4)
noch nicht verwendet
noch nicht verwendet
Dient zur Deklaration von Konstanten (ab JavaScript-Version 1.5)
als Anweisung: Fortsetzung in Schleifen
fr Fallunterscheidungen
Operator: Objekte und Objekteigenschaften lschen
fr Schleifen mit do-while
noch nicht verwendet
sonst-Fall in bedingten Anweisungen mit if
als Anweisung: Objekte oder Funktionen fr fremde Scripts ausfhrbar machen
noch nicht verwendet
rckgabewert von Funktionen: falsch
noch nicht verwendet
noch nicht verwendet
noch nicht verwendet
fr Schleifen mit for
fr Funktionen
noch nicht verwendet
fr bedingte Anweisungen mit if
noch nicht verwendet
fr spezielle Schleifen mit for
prft, ob eine Variable eine Instanz eines Objektes ist (ab JavaScript-Version 1.4)
noch nicht verwendet
noch nicht verwendet
noch nicht verwendet
Dient zum Definieren von Objekten
setzt ein Objekt auf null, ohne das Objekt selbst zu lschen
noch nicht verwendet
noch nicht verwendet
noch nicht verwendet
noch nicht verwendet
fr Rckgabewerte in Funktionen
noch nicht verwendet
noch nicht verwendet
noch nicht verwendet
fr Fallunterscheidungen
noch nicht verwendet
fr Bezug auf das aktuelle Objekt

18.10 Event-Handler

589

Reserviertes Wort Erluterung

throw
throws
transient
true
try
typeof
var
void
while
with

als Anweisung: nutzerdefinierte Ausnahme (ab JavaScript-Version 1.4)

noch nicht verwendet
noch nicht verwendet
Rckgabewert von Funktionen: wahr
als Anweisung: testet eine Anweisung auf Ausfhrbarkeit (ab JavaScript-Version 1.4)
Operator: liefert den Typ eines Elementes
fr Variablendefinitionen
Operator: unterdrckt Rckgabewerte
fr Schleifen mit while
um mehrere Anweisungen mit einem Objekt durchzufhren

18.10 Event-Handler
Allgemeines zu Event-Handlern
Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Da es sich
um Bestandteile handelt, die innerhalb von HTML vorkommen, hat das W3-Konsortium die
Event-Handler mittlerweile auch in den HTML-Sprachstandard mit aufgenommen. Dort wird
auch festgelegt, in welchen HTML-Tags welcher Event-Handler vorkommen darf. Das Problem
dabei ist jedoch, dass die Praxis derzeit noch stark davon abweicht zumindest bei Netscape 4.x.
Der MS Internet Explorer dagegen interpretiert Event-Handler seit seiner Version 4.x weitgehend so universell, wie vom W3-Konsortium vorgesehen. Bei den Beschreibungen der EventHandler auf dieser Seite wird jeweils versucht, auf die Problematik einzugehen. Letztendlich hilft
aber nur: selber im Einzelfall mit mehreren verschiedenen Browsern testen und ausprobieren.
Event-Handler erkennen Sie daran, dass solche HTML-Attribute immer mit on beginnen, zum
Beispiel onClick=. Hinter dem Gleichheitszeichen notieren Sie in Anfhrungszeichen eine
JavaScript-Anweisung. Wenn Sie mehrere Anweisungen ausfhren wollen, dann definieren Sie
sich dazu am besten in einem JavaScript-Bereich eine Funktion und rufen hinter dem Gleichheitszeichen diese Funktion auf, also z.B. onClick="Umrechnen()".
Jeder Event-Handler steht fr ein bestimmtes Anwenderereignis, onClick= etwa fr das Ereignis
Anwender hat mit der Maus geklickt. Der Anzeigebereich des HTML-Elements, in dem der
Event-Handler notiert ist, ist das auslsende Element. Wenn der Event-Handler onClick= beispielsweise in einem Formular-Button notiert wird, wird der damit verknpfte JavaScript-Code
nur dann ausgefhrt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Das mag
Ihnen jetzt selbstverstndlich vorkommen. Ist es auch, solange es beispielsweise um FormularButtons geht. Aber nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTMLBereich, der mit <div>...</div> definiert wird, einen Event-Handler wie onClick= enthalten.
Es wurden nur solche Event-Handler aufgenommen, die auch tatschlich in HTML-Tags vorkommen knnen und im HTML 4.0-Standard erwhnt sind (mit Ausnahme von onAbort= und
onError=). Das sind weniger, als Netscape und der MS Internet Explorer kennen. Bei Netscape

590

Kapitel 18: JavaScript Sprachelemente

kommt verwirrenderweise hinzu, dass einige Event-Handler zwar so bezeichnet werden, aber
eigentlich gar nicht innerhalb von HTML-Tags vorkommen knnen. Es ist zu hoffen, dass es
hierbei in Zukunft mehr bereinstimmungen zwischen Sprachstandards und Browser-Implementierungen geben wird.
Im Folgenden finden Sie diese Event-Handler:
onAbort (bei Abbruch)
onBlur (beim Verlassen)
onChange (bei erfolgter nderung)
onClick (beim Anklicken)
onDblClick (bei doppeltem Anklicken)
onError (im Fehlerfall)
onFocus (beim Aktivieren)
onKeydown (bei gedrckter Taste)
onKeypress (bei gedrckt gehaltener Taste)
onKeyup (bei losgelassener Taste)
onLoad (beim Laden einer Datei)
onMousedown (bei gedrckter Maustaste)
onMousemove (bei weiterbewegter Maus)
onMouseout (beim Verlassen des Elements mit der Maus)
onMouseover (beim berfahren des Elements mit der Maus)
onMouseUp (bei losgelassener Maustaste)
onReset (beim Zurcksetzen des Formulars)
onSelect (beim Selektieren von Text)
onSubmit (beim Absenden des Formulars)
onUnload (beim Verlassen der Datei)
javascript: (bei Verweisen)

onAbort (bei Abbruch)

Ist fr den Fall gedacht, dass ein Anwender im Browser den Stop-Button drckt, obwohl noch
nicht alle Grafiken geladen wurden. Nach JavaScript (Netscape) erlaubt in folgendem HTMLTag: <img>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="onabort.jpg" width="400" height="600" alt="Grafik"
onAbort="alert(Schade, dass Sie das Bild nicht sehen wollen)">
</body></html>

18.10 Event-Handler

591

Im Beispiel wird eine Grafik in HTML referenziert. Fr den Fall, dass der Anwender den StopButton im Browser drckt, bevor die Grafik ganz geladen ist, wird mit alert() eine Meldung
ausgegeben.
Beachten Sie: Dieser Event-Handler gehrt nicht zum HTML-Standard und wird von Netscape 6
und Opera 5 nicht interpretiert.

onBlur (beim Verlassen)

Fr den Fall, dass ein Element zuvor aktiviert war und der Anwender es jetzt verlsst. Nach
JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <body> <frameset> <input> <layer>
<select> <textarea>. Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <area>
<button> <input> <label> <select> <textarea>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
Name: <input type="text" name="Eingabe" onBlur="CheckInhalt(this.value)"><br>
Name oder nichts eingeben und dann woanders hinklicken!
</form>
<script type="text/javascript">
document.Test.Eingabe.focus();
function CheckInhalt(Feld)
{
if(Feld == "") {
alert("Namensfeld muss einen Inhalt haben!");
document.Test.Eingabe.focus();
return false;
}
}
</script>
</body></html>

18.10: Verliert das Eingabefeld den Fokus, prft das Script den Inhalt.

Im Beispiel wird ein Formular definiert, das ein Eingabefeld enthlt. Unterhalb des Formulars ist
ein JavaScript-Bereich notiert. Der Bereich wird deshalb unterhalb des Formulars definiert, weil

592

Kapitel 18: JavaScript Sprachelemente

zu Beginn des Bereichs gleich eine Anweisung ausgefhrt wird, die die Existenz des Formulars
bereits voraussetzt. Diese Anweisung (document.Test.Eingabe.focus();) setzt den Cursor in
das Eingabefeld. Dort soll der Anwender seinen Namen eingeben. Klickt er dann irgendwo
anders hin, wird der Event-Handler onBlur aktiv, der im HTML-Tag des Eingabefeldes notiert
ist. Dabei wird die Funktion CheckInhalt() aufgerufen, die ebenfalls in dem JavaScript-Bereich
notiert ist. Diese Funktion fragt ab, ob die ihr bergebene Zeichenkette, der Inhalt des Namensfeldes, leer ist. Wenn ja, wird ein Meldungsfenster ausgegeben, und der Cursor wird wieder in
das Feld positioniert.
Beachten Sie: Unter Opera 5.02 erzeugt die Verwendung dieses Beispieles eine unendliche
Schleife, da die Besttigung des Meldungsfensters ebenfalls den Event-Handler auslst. Mit
Opera 5.12 wurde dieses Problem behoben.

onChange (bei erfolgter nderung)

Fr den Fall, dass ein Element einen genderten Wert erhalten hat. Nach HTML 4.0 und JavaScript 1.2 (Netscape) erlaubt in folgenden HTML-Tags: <input> <select> <textarea>. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea rows="5" cols="40" onChange="alert(this.value)">Bearbeiten Sie diesen
Text hier und klicken Sie dann woanders hin! Oder lassen Sie ihn unbearbeitet und
klicken dann woanders hin!</textarea>
</body></html>

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert. Wenn der Anwender irgendetwas in das Feld eingibt und anschlieend woanders hin klickt, wird der EventHandler onChange aktiv, der im HTML-Tag des mehrzeiligen Eingabefeldes notiert ist. Im Beispiel wird einfach der aktuelle genderte Inhalt des Feldes in einem Meldungsfenster ausgegeben.

onClick (beim Anklicken)

Fr den Fall, dass der Anwender ein Element anklickt. Nach JavaScript (Netscape) erlaubt in
folgenden HTML-Tags: <a> <area> <input> <textarea>. Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote>
<body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn>
<dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i>
<img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input size="30" name="Ausgabe" readonly><br>
<input type="button" value="Letzter Update"

18.10 Event-Handler

593

onClick="this.form.Ausgabe.value=document.lastModified">
</form>
</body></html>

Im Beispiel wird ein Formular mit einem Eingabefeld (das jedoch auf readonly, also nur Lesen
gesetzt wird) und einem Button definiert. Der Button hat die Aufschrift Letzter Update. Beim
Anklicken des Buttons wird der Event-Handler onClick aktiv, der im HTML-Tag des Buttons
definiert ist. Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten nderung
am Dokument geschrieben.

onDblClick (bei doppeltem Anklicken)

Fr den Fall, dass der Anwender ein Element doppelt anklickt. Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area> <input> <textarea>. Nach HTML 4.0 erlaubt in
folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote>
<body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn>
<dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i>
<img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Rechnen" action="">
Wert: <input size="10" name="Wert">
<input type="button" value="Doppelklick = hoch 2"
onDblClick="document.Rechnen.Wert.value=document.Rechnen.Wert.value*document.Rechne
n.Wert.value">
</form>
</body></html>

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Im Button ist
der Event-Handler onDblClick= notiert. Der Button reagiert daher nur auf Doppelklick. Wenn
der Anwender doppelt auf den Button klickt, wird von dem Wert, den er in dem Eingabefeld
eingegeben hat, das Quadrat errechnet, und das Ergebnis wird wiederum in das Eingabefeld geschrieben.
Beachten Sie: Bei Netscape-Browsern unter Macintosh und bei Opera ist dieser Event-Handler
nicht verfgbar!

onError (im Fehlerfall)

Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch
eigene. Beachten Sie jedoch, dass dadurch nicht die Fehler selbst beseitigt werden! onError ist
vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht. Nach JavaScript erlaubt
in folgendem HTML-Tag: <img>.

594

Kapitel 18: JavaScript Sprachelemente

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="gibtsnicht.gif" onError="alert(an dieser Stelle
sollte eine Grafik stehen,\n doch leider kann sie nicht angezeigt werden!)">
</body></html>

18.11: Weil die Grafik nicht geladen werden kann, erscheint eine Fehlermeldung.

Im Beispiel wird in einer Grafikreferenz der Event-Handler onError= notiert. Er wird dann
aktiv, wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann. Im Beispiel wird
dann ein entsprechendes Meldungsfenster ausgegeben.

onFocus (beim Aktivieren)

Tritt ein, wenn der Anwender ein Element aktiviert. Nach JavaScript (Netscape) erlaubt in
folgenden HTML-Tags: <body> <frame> <input> <layer> <select> <textarea>. Nach
HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <area> <button> <input> <label>
<select> <textarea>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input size="30" onFocus="this.value=Hier Ihren Namen eingeben"><br>
<input size="30" onFocus="this.value=Hier Ihren Wohnort eingeben"><br>
<input size="30" onFocus="this.value=Hier Ihr Alter eingeben"><br>
</form>
</body></html>

In dem Beispiel wird ein Formular definiert, das drei Eingabefelder enthlt. Da die Felder unbeschriftet sind, hat der Anwender keine Ahnung, was er in die einzelnen Felder eingeben kann.
Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder, wird der Event-Handler
onFocus= des jeweiligen Feldes aktiv. Dabei wird in das jeweilige Feld eine Aufforderung
geschrieben, was in dem Feld einzugeben ist.

18.10 Event-Handler

595

onKeyDown (bei gedrckter Taste)

Tritt ein, wenn der Anwender, whrend er ein Element aktiviert hat, eine Taste drckt. Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>. Nach HTML 4.0
erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big>
<blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup>
<dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4>
<h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map>
<menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s>
<samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td>
<textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
function Aktualisieren() {
document.Test.Kontrolle.value = document.Test.Eingabe.value.length + 1;
return true;
}
</script>
</head><body>
<form name="Test" action="">
Kurzbeschreibung Ihrer Homepage (max 50 Zeichen):<br>
<input type="text" name="Eingabe" size="40" onKeyDown="Aktualisieren(this.value)">
<input type="text" value="0" readonly size="3" name="Kontrolle"><br>
<input type="reset">
</form>
</body></html>

18.12: Das rechte Eingabefeld zeigt sofort an, wie viele Zeichen links eingetippt wurden.

Im Beispiel wird ein Formular definiert, in dem der Anwender eine Kurzbeschreibung seiner
Homepage in einem Eingabefeld abliefern kann. Der Text soll maximal 50 Zeichen lang sein.
Damit der Anwender nicht mitzhlen muss, gibt es ein kleines Eingabefeld nebendran, in dem
nach jedem Tastendruck ausgegeben wird, wie viele Zeichen bereits eingegeben wurden. Dazu ist
in dem Eingabefeld mit Namen Eingabe der Event-Handler onKeyDown= notiert. Er bewirkt,
dass, solange der Anwender in dem Formularfeld etwas eingibt, bei jedem Tastendruck die
Funktion Aktualisieren() aufgerufen wird, die im Dateikopf in einem Script-Bereich definiert
ist. Diese Funktion errechnet aus document.Test.Eingabe.value.length + 1, wie viele Zeichen bereits eingegeben wurden, und schreibt eine entsprechende Ausgabe in das dafr vorgesehene Eingabe-Feld.

596

Kapitel 18: JavaScript Sprachelemente

onKeyPress (bei gedrckt gehaltener Taste)

Tritt ein, wenn der Anwender eine Taste drckt und diese gedrckt hlt. Nach JavaScript
(Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>. Nach HTML 4.0 erlaubt in
folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote>
<body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn>
<dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i>
<img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
onKeyPress="alert(this.value)">
</form>
</body></html>

Im Beispiel ist ein Formular mit einem Eingabefeld definiert. Wenn der Anwender in dem Eingabefeld etwas eingibt, wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert
des Formularfeldes ausgegeben. Dazu ist in dem Eingabefeld der Event-Handler onKeypress=
notiert. Er tritt in Aktion, wenn eine Taste gedrckt und gedrckt gehalten wird.
In Netscape 4.x und Opera 5 wird dieser Event-Handler stets nach dem Event-Handler onKeyDown
ausgefhrt. Gibt der Event-Handler onKeyDown den Wert false zurck, so wird unter Netscape
die Ausfhrung des Event-Handlers onKeyPress unterdrckt. Im MS Internet Explorer unterdrckt der Event-Handler onKeyPress den Event-Handler onKeyDown.
Beachten Sie: Im MS Internet Explorer knnen Sie zustzlich die Eigenschaften des eventObjekts abfragen.

onKeyup (bei losgelassener Taste)

Tritt ein, wenn der Anwender eine Taste gedrckt hat und diese wieder loslsst. Nach JavaScript
(Netscape) erlaubt in folgenden HTML-Tags: <input> <textarea>. Nach HTML 4.0 erlaubt in
folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote>
<body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn>
<dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i>
<img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="Eingabe"
onKeyup="this.form.Ausgabe.value=this.value"><br>

18.10 Event-Handler

597

<input type="text" readonly size="30" name="Ausgabe"><br>

<input type="reset">
</form>
</body></html>

Im Beispiel wird ein Formular definiert, das zwei Eingabefelder mit den Namen Eingabe und
Ausgabe enthlt. Wenn der Anwender in dem oberen Feld, also dem, das fr die Eingabe
gedacht ist, etwas eingibt, wird der Wert automatisch Zeichen fr Zeichen in das untere, also das
Ausgabefeld bernommen. Dazu ist im Eingabefeld der Event-Handler onKeyup notiert. Dieser
Event-Handler tritt in Aktion, wenn der Anwender in dem Feld eine Taste gedrckt und wieder
losgelassen hat, was ja bei jedem eingegebenen Zeichen der Fall ist. Mit this.form.
Ausgabe.value=this.value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes
zugewiesen.

onLoad (beim Laden einer Datei)

Tritt ein, wenn eine HTML-Datei geladen wird. Nach JavaScript (Netscape) und HTML 4.0
erlaubt in folgenden HTML-Tags: <frameset> <body>. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function NaviFenster() {
Navigation = window.open("navigat.htm","Navigation","height=100,width=300");
Navigation.focus();
}
// -->
</script>
</head>
<body onLoad="NaviFenster()">
<h1>Seite mit "Fernbedienung"</h1>
</body></html>

Beispiel Datei navigat.htm:

<html><head><title>Test</title>
</head><body>
<a href= "javascript:void(opener.location.href=../../../index.htm);">
SELFHTML</a><br>
<a href= "javascript:void(opener.location.href=../../index.htm);">
JavaScript</a><br>
<a href= "javascript:void(opener.location.href=../index.htm);">
Sprachelemente</a><br>
</body></html>

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites Fenster geffnet, das zum Beispiel
als Fernbedienung des Hauptfensters dienen knnte. Dazu ist im einleitenden <body>-Tag der
Event-Handler onLoad= notiert. Er ruft die Funktion NaviFenster() auf, die in einem JavaScript-Bereich im Dateikopf definiert ist. Innerhalb dieser Funktion steht der Befehl zum ffnen
des Zweitfensters. Das Fenster erhlt auch gleich den Fokus (wird zum aktiven Fenster), sodass

598

Kapitel 18: JavaScript Sprachelemente

es im Vordergrund des Hauptfensters zu sehen ist. Ins Zweitfenster wird die Datei navigat.htm
geladen. Diese enthlt Verweise mit dem Event-Handler javascript:. Beim Ausfhren des
Verweises wird im Elternfenster des Zweitfensters, markiert durch den reservierten Fensternamen opener, mit document.location.href eine Seite geladen. Die Anweisung opener.location.href=../index.htm gibt den URI der zu ladenen Datei zurck. Mit Hilfe des
Operators void wird dieser unterdrckt. Dadurch werden Anzeigefehler vermieden.

18.13: Beim Laden des Beispiels ffnet sich ein zustzliches Fenster mit Navigationslinks.

onMousedown (bei gedrckter Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrckt hlt. Nach JavaScript (Netscape) erlaubt in
folgenden HTML-Tags: <input type="button"> <a>. Nach HTML 4.0 erlaubt in folgenden
HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body>
<button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir>
<div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img>
<input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onMousedown="window.status=Verweis zur Startseite;return true;">Verweis</a>
</body></html>

Das Beispiel enthlt einen Verweis. Bei vollstndig erfolgtem Anklicken des Verweises wird ganz
normal das Verweisziel, im Beispiel also ../../../index.htm, aufgerufen. Vorher jedoch, sobald der Anwender die Maustaste gedrckt und bevor er sie wieder losgelassen hat, tritt der
Event-Handler onMousedown= in Aktion, der im Verweis-Tag notiert ist. Im Beispiel wird dabei
in der Statuszeile des Browsers ausgegeben: Verweis zur Homepage.

onMousemove (bei weiterbewegter Maus)

Tritt ein, wenn der Anwender die Maus bewegt, unabhngig davon, ob die Maustaste gedrckt
ist oder nicht. Nach JavaScript (Netscape) bislang nicht in HTML-Tags mglich, sondern nur im
Zusammenhang mit dem event-Objekt. Nach HTML 4.0 erlaubt in folgenden HTML-Tags: <a>
<abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button>

18.10 Event-Handler

599

<caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div>
<dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img>
<input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes>
<noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select>
<small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea>
<tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript">
function Mauskontrolle(Element) {
var Pos = Element.offsetLeft + "/" + Element.offsetTop;
window.status = Pos;
return true;
}
</script>
</head><body>
<p onMousemove="Mauskontrolle(this)">Hier ein kleiner Text</p>
</body></html>

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das frher
nicht mglich war. In dem Beispiel wird ein Textabsatz definiert. Innerhalb des Textabsatzes ist
der Event-Handler onMousemove= notiert. Der Event-Handler tritt in Aktion, solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt. Dann wird so oft wie mglich die
Funktion Mauskontrolle() aufgerufen, die in einem Scriptbereich im Dateikopf notiert ist.
Dieser Funktion wird als Parameter mittels this das betroffene Element bergeben. Die Funktion bewirkt, dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke
des Elementes angezeigt werden.
Beachten Sie: Im MS Internet Explorer knnen Sie zustzlich die Eigenschaften des eventObjekts abfragen.

onMouseout (beim Verlassen des Elements mit der Maus)

Tritt ein, wenn der Anwender mit der Maus ber ein Element fhrt und dieses dabei verlsst.
Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area>. Nach HTML 4.0
erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big>
<blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup>
<dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4>
<h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map>
<menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s>
<samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td>
<textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="http://selfaktuell.teamone.de/news.htm"
onMouseout="alert(Die News sollten Sie ruhig mal besuchen)"><b>News</b></a>
</body></html>

600

Kapitel 18: JavaScript Sprachelemente

Im Beispiel ist ein Verweis definiert. Wenn der Anwender mit der Maus ber den Verweis fhrt,
ihn dann aber nicht anklickt, sondern die Maus doch wieder von dem Verweis entfernt, tritt der
Event-Handler onMouseout= in Aktion. Im Beispiel wird dann ein Meldungsfenster ausgegeben,
das den Anwender darauf hinweist, dass er die News-Seite ruhig mal aufrufen soll.

18.10.1

onMouseover (beim berfahren des Elements mit

der Maus)

Nach JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <a> <area>. Nach HTML 4.0
erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b> <big>
<blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup>
<dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4>
<h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map>
<menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s>
<samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td>
<textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<h1 id="Test"
onMouseover="this.innerHTML=Sehen Sie?"
onMouseout="this.innerHTML=Ich bin dynamisch">Ich bin dynamisch</h1>
</body></html>

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren, bei denen das bislang
nicht mglich war. Das Beispiel funktioniert mit dem MS Internet Explorer ab Version 4.x und
im Netscape Navigator ab Version 6, welche die Event-Handler nach HTML 4.0 weitgehend
interpretieren. In dem Beispiel wird eine berschrift erster Ordnung definiert. Innerhalb der
berschrift sind die Event-Handler onMouseover= und onMouseout= notiert. Der EventHandler onMouseover= tritt in Aktion, wenn der Anwender die Maus in den Anzeigebereich der
berschrift bewegt, und onMouseout= wird aktiv, wenn er die Maus wieder aus dem Anzeigebereich herausbewegt. Mit Hilfe von this nehmen Sie Bezug auf das objekte.htm this und knnen mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler
den Text der berschrift dynamisch austauschen. Bei onMouseover= wird ein anderer Text angezeigt, bei onMouseout= wieder der ursprngliche Text.
Beachten Sie: Auch Opera ab Version 5 interpretiert den Event-Handler nach HTML 4.0. Er
kennt jedoch nicht die Eigenschaft innerHTML.

onMouseUp (bei losgelassener Maustaste)

Tritt ein, wenn der Anwender die Maustaste gedrckt hat und sie nun wieder loslsst. Nach
JavaScript (Netscape) erlaubt in folgenden HTML-Tags: <input type="button"> <a>. Nach
HTML 4.0 erlaubt in folgenden HTML-Tags: <a> <abbr> <acronym> <address> <area> <b>
<big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col>
<colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2>
<h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link>

18.10 Event-Handler

601

<map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q>
<s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody>
<td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="../../../index.htm"
onMouseup="alert(Die Show beginnt JETZT);
window.location.href=../../../index.htm; return false">Verweis</a>
</body></html>

Im Beispiel ist ein Verweis notiert. Wenn der Anwender den Verweis anklickt und die Maustaste
loslsst, also unmittelbar vor dem Laden der Seite, auf die verwiesen wird, geht ein Meldungsfenster auf, das den Anwender in aller Dramatik noch mal darauf hinweist, dass jetzt die Show
beginnt. Dazu ist im einleitenden Verweis-Tag der Event-Handler onMouseup= notiert. Wenn
der in Aktion tritt, wird zunchst das Meldungsfenster angezeigt. Anschlieend wird die Datei
../../../index.htm geladen. Die Anweisung return false verhindert, dass Browser, die den
Event-Handler onMouseup= interpretieren, den location.href-Verweis nicht ausfhren,
sondern den gewhnlichen Verweis, der beim href-Attribut notiert ist.

onReset (beim Zurcksetzen des Formulars)

Tritt ein, wenn der Anwender Eingaben in einem Formular verwerfen will. Nach JavaScript
(Netscape) erlaubt in folgendem HTML-Tag: <form>. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
function ResetCheck() {
var chk = window.confirm("Wollen Sie alle Eingaben loeschen?");
return(chk);
}
</script>
</head><body>
<form name="Test" onReset="return ResetCheck()" action=""><pre>
Name: <input size="30"><br>
Idee: <input size="30"><br>
<input type="reset">
</pre></form>
</body></html>

Das Beispiel enthlt ein Formular, das unter anderem einen Abbrechen-Button (Reset-Button)
enthlt. Beim Anklicken dieses Buttons werden normalerweise alle Eingaben im Formular gelscht. Im Beispiel ist jedoch im einleitenden <form>-Tag der Event-Handler onReset= notiert.
Dieser tritt in Aktion, wenn der Reset-Button angeklickt wird. Im Beispiel wird dann die Funktion ResetCheck() aufgerufen, die in einem Script-Bereich im Dateikopf steht. Diese Funktion
fragt den Anwender in einem Besttigungsfenster (window.confirm()), ob er wirklich alle Eingaben in dem Formular lschen will. Besttigt er den Lschwunsch, gibt das Besttigungsfenster
den Wert true zurck. Verneint er den Lschwunsch, wird false zurckgegeben. Der Rckgabewert wird in der Variablen chk gespeichert und diese wird wiederum von der Funktion

602

Kapitel 18: JavaScript Sprachelemente

ResetCheck() an den aufrufenden Event-Handler zurckgegeben. Der Effekt ist, dass die Formulareingaben nur gelscht werden, wenn true zurckgegeben wird.

onSelect (beim Selektieren von Text)

Tritt ein, wenn der Anwender Text selektiert. Nach JavaScript (Netscape) und HTML 4.0 erlaubt
in folgenden HTML-Tags: <input> <textarea>. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<textarea cols="40" rows="10" name="Eingabe" onSelect="window.status=Mit der
rechten Maustaste ber dem selektierten Text klicken!'; return true;">Selektieren
Sie einfach irgendwelchen Text aus diesem Text hier!</textarea>
</form>
</body></html>

Im Beispiel wird ein Formular mit einem mehrzeiligen Eingabefeld definiert, das mit Text vorbelegt ist. Wenn der Anwender Text in diesem Feld selektiert, wird mit onSelect erreicht, dass
in der Statuszeile (window.status) ein Hinweis ausgegeben wird, was der Anwender nun tun
kann.
Beachten Sie: Opera 5 und Netscape 4.x interpretieren diesen Event-Handler nicht.

onSubmit (beim Absenden des Formulars)

Tritt ein, wenn der Anwender ein Formular absendet. Nach JavaScript (Netscape) erlaubt in
folgendem HTML-Tag: <form>. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckInput() {
for(i=0; i<document.forms[0].elements.length; ++i)
if(document.forms[0].elements[i].value == "") {
alert("Es wurden nicht alle Felder ausgefuellt!");
document.forms[0].elements[i].focus();
return false;
}
return true;
}
//-->
</script>
</head><body>
<form action="onsubmit.htm" onSubmit="return CheckInput();">
Feld 1: <input size="30"><br>
Feld 2: <input size="30"><br>
Feld 3: <input size="30"><br>
<input type="submit">
</form>
</body></html>

18.10 Event-Handler

603

Das Beispiel enthlt ein Formular mit mehreren Eingabefeldern. Beim Absenden des Formulars,
also beim Klicken auf den Submit-Button, wird jedoch erst mal berprft, ob in allen Feldern
etwas eingegeben wurde. Wenn eines der Felder leer gelassen wurde, wird das Formular nicht abgesendet. Stattdessen wird eine Fehlermeldung ausgegeben, und der Cursor wird in das erste
nicht ausgefllte Eingabefeld positioniert. Dazu ist im einleitenden <form>-Tag der EventHandler onSubmit= notiert. Beim Absenden des Formulars wird dadurch die Funktion CheckInput() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese Funktion prft
in einer for-Schleife alle einzelnen Formularfelder darauf, ob sie einen leeren Inhalt haben
(leere Zeichenkette ""). Ist das der Fall, wird die Fehlermeldung ausgegeben und auf das entsprechende Formularfeld positioniert. An den aufrufenden Event-Handler onSubmit wird der Wert
false zurckgegeben. Nur wenn alle Formularfelder ausgefllt wurden, wird true zurckgegeben. Dadurch wird entschieden, ob das Formular abgeschickt wird oder nicht.

onUnload (beim Verlassen der Datei)

Tritt ein, wenn eine HTML-Datei verlassen wird. Nach JavaScript (Netscape) und HTML 4.0
erlaubt in folgenden HTML-Tags: <frameset> <body>. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
var Start = new Date();
var Startzeit = Start.getTime();
function Aufenthalt() {
var Ende = new Date();
var Endzeit = Ende.getTime();
var Aufenthalt = Math.floor((Endzeit - Startzeit) / 1000);
alert("Sie waren " + Aufenthalt + " Sekunden auf dieser Seite");
}
</script>
</head>
<body onUnload="Aufenthalt()">
<h1>Einen langen Aufenthalt auf dieser Seite!</h1>
<p><a href="../../../index.htm"><b>Und dann aber nix wie weg!</b></a></p>
</body></html>

Im Beispiel ist im Dateikopf ein JavaScript-Bereich definiert. Gleich beim Einlesen der Datei
wird mit Hilfe des Date-Objekts der aktuelle Zeitpunkt ermittelt und in der Variablen Startzeit gespeichert. Im einleitenden <body>-Tag der Datei ist der Event-Handler onUnload=
notiert. Er tritt in Aktion, wenn die Datei zum Beispiel durch Anklicken eines Verweises zu
einer anderen Seite verlassen wird. In diesem Fall wird im Beispiel die Funktion Aufenthalt()
aufgerufen, die ebenfalls in dem Script-Bereich im Dateikopf steht. Diese Funktion ermittelt wieder den aktuellen Zeitpunkt, ermittelt dann aber noch die Differenz zwischen gespeicherter
Startzeit und der jetzt ermittelten Endzeit und gibt das Ergebnis in einem Meldungsfenster
aus.

604

Kapitel 18: JavaScript Sprachelemente

javascript: (bei Verweisen)

Dies ist kein Event-Handler im engeren Sinn. Es handelt sich um eine Syntax, die eingefhrt
wurde, um JavaScript-Code als Verweisziel zu notieren. Nach JavaScript (Netscape) erlaubt in
folgenden HTML-Tags: <a> <area>. Ein Beispiel:
<html><head><title>Test</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)"><b>Letzter Update</b></a>
</body></html>

Das Beispiel gibt bei Anklicken des Verweises ein Meldungsfenster mit dem Zeitpunkt des letzten
Updates der Datei aus. Um einen Verweis dieser Art zu notieren, notieren Sie hinter dem Attribut href= in Anfhrungszeichen das Schlsselwort javascript, gefolgt von einem Doppelpunkt : und dahinter eine oder mehrere JavaScript-Anweisungen. Bei mehreren Anweisungen
ist es jedoch besser, diese in einer Funktion zu notieren und beim Verweis dann diese Funktion
aufzurufen.
Beachten Sie: Diese Form des Aufrufes erfordert zwingend den Rckgabewert undefined. Ist
dies nicht der Fall, wird der jeweilige Rckwert der JavaScript-Anweisung in das Dokument geschrieben und die aktuelle Seite gelscht. Sie knnen gegebenenfalls unter Verwendung des Operators void den Rckgabewert einer Anweisung unterdrcken und auf undefined setzen.

605

19 JavaScript: Beispiele

Am besten lernt man an Hand klarer, praktischer Beispiele. Auf den folgenden Seiten finden Sie
eine Reihe von ausfhrlichen Beispielen:
Zwei Frames gleichzeitig ndern
Seitenanzeige in Frames verhindern
Taschenrechner
Monatskalender
Persnliche Seitenbesuche zhlen mit Cookies
Formulareingaben berprfen
Dynamische grafische Buttons
Aufenthaltsdauer auf Web-Seite anzeigen
Verweisliste als Auswahlliste
Fehlerbehandlung mit dem Event-Handler onError
Fehlerbehandlung mit try..catch
nderungen der Fenstergre berwachen
Weitere Beispiele zu JavaScript enthlt das Kapitel 21 ber Dynamisches HTML.

19.1

Zwei Frames gleichzeitig ndern

Wer schon einmal ein HTML-Projekt mit mehreren Frames erstellt hat, kann nachvollziehen,
dass es manchmal wnschenswert ist, beim Ausfhren eines Verweises nicht nur den Inhalt
eines, sondern zweier oder mehrerer Frame-Fenster gleichzeitig zu ndern. Nun kann man in
solchen Fllen zwar auf eine Datei verweisen, die ein neues, entsprechendes Frameset definiert.
Aber wenn Sie viele solcher Verweise haben, wird dieses Verfahren schnell aufwndig. Als Alternative dazu knnen Sie sich mit einem JavaScript behelfen.
Ein Nachteil von zwei Frames gleichzeitig ndern mit JavaScript ist allerdings, dass dabei die
History-Funktion im Browser nicht mehr so arbeitet wie gewnscht. Denn aus Sicht des Browsers wurden zwei Verweise ausgefhrt, doch ein History-Eintrag springt nur eine Seite zurck.
Der Anwender muss also zweimal auf den Zurck-Button des Browsers klicken, um wieder dahin zu kommen, wo er vor dem Anklicken des Verweises war. Eine Mglichkeit, dieses unerwnschte Verhalten auszuschalten, ist, selber Verweise anzubieten, die das Back und Forward im Browser auslsen, jedoch so, dass sich dabei wie gewnscht ebenfalls zwei Frames

606

Kapitel 19: JavaScript Beispiele

gleichzeitig ndern. Das Beispiel auf dieser Seite zeigt deshalb auch, wie sich so etwas realisieren
lsst.

19.1: Klicken Sie links einen Link an, so ndern sich beide Frame-Inhalte auf der rechten Seite.

Quelltext mit Erluterungen

Das Beispiel zeigt die Datei mit den Frameset-Definitionen und die Datei mit den Verweisen. Die
brigen Dateien, die im Anzeigebeispiel aufgerufen werden, sind fr das Verstndnis ohne
Bedeutung.
Beispiel Datei zweiframes.htm:
<html>
<head>
<title>Zwei Frames gleichzeitig &auml;ndern</title>
</head>
<frameset cols="180,*">
<frame src="zweiframes_links.htm" name="links">
<frameset rows="180,*">
<frame src="zweiframes_to.htm" name="oben">
<frame src="zweiframes_tu.htm" name="unten">
</frameset>
</frameset>
</html>

19.1 Zwei Frames gleichzeitig ndern

607

Beispiel Datei zweiframes_links.htm:

<html>
<head>
<title>ZweiFrames - Verweise</title>
<script type="text/javascript">
<!-function ZweiFrames(URI1,F1,URI2,F2) {
Frame1=eval("parent."+F1);
Frame2=eval("parent."+F2);
Frame1.location.href = URI1;
Frame2.location.href = URI2;
}
function ZweiFramesBack(F1,F2) {
Frame1=eval("parent."+F1);
Frame2=eval("parent."+F2);
Frame1.history.back();
if (!window.opera) window.setTimeout("Frame2.history.back()",10);
}
function ZweiFramesForward(F1,F2) {
Frame1=eval("parent."+F1);
Frame2=eval("parent."+F2);
Frame1.history.forward();
if (!window.opera) window.setTimeout("Frame2.history.forward()",10);
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000" link="#AA5522" vlink="#772200"
alink="#000000">
<div>
<hr noshade size="1">
<a href="javascript:ZweiFramesBack(oben,unten)"><b>zur&uuml;ck</b></a>
<b>|</b>
<a href="javascript:ZweiFramesForward(oben,unten)"><b>vor</b></a>
<hr noshade size="1">
</div>
<h2>Verweise</h2>
<p>
<a
href="javascript:ZweiFrames(zweiframes_to.htm,oben,zweiframes_tu.htm,unten)">
<b>Willkommen</b>
</a>
<br>
<a
href="javascript:ZweiFrames(zweiframes_so.htm,oben,zweiframes_su.htm,unten)">

608

Kapitel 19: JavaScript Beispiele

<b>Susan Sarandon</b>
</a>
<br>
<a
href="javascript:ZweiFrames(zweiframes_jo.htm,oben,zweiframes_ju.htm,unten)">
<b>Jack Nicholson</b>
</a>
</p>
</body>
</html>

Der erste Teil des Beispiels zeigt die Datei zweiframes.htm, die das Frameset fr eine Schauspielerinfothek bereitstellt. Das Frameset ist dreigeteilt: links ein Frame-Fenster mit Namen
links fr Verweise, und rechts zwei Frames mit den Namen oben und unten fr Informationen.
Der zweite Teil des Beispiels zeigt die Datei zweiframes_links.htm, die ja, wie in der Datei
zweiframes.htm ersichtlich, gleich zu Beginn in das linke Frame-Fenster geladen wird. Diese
Datei enthlt die Verweise. Alle Verweise ndern den Inhalt von zwei Frame-Fenstern gleichzeitig, nmlich jeweils den der beiden rechten Frames mit den Namen oben und unten. Deshalb
ist in dieser Datei auch der JavaScript-Code fr das ndern der beiden anderen Frames notiert.
Um die Funktionsweise zu verstehen, ist es sinnvoll, zunchst einmal die HTML-Verweise im
<body>-Bereich der Datei zweiframes_links.htm zu betrachten. Alle Verweise enthalten beim
href-Attribut JavaScript-Code, eingeleitet durch den Pseudo-Event-Handler javascript:. Da-

hinter folgt jeweils der Aufruf einer Funktion. Bei dem Verweis mit dem Verweistext
zur&uuml;ck wird die Funktion ZweiFramesBack() aufgerufen, bei dem Verweis mit dem
Verweistext vor die Funktion ZweiFramesForward(), und bei den brigen Verweisen die
Funktion ZweiFrames(). In allen Fllen werden der jeweils aufgerufenen Funktion die Namen
zweier vorhandener Frames als Parameter bergeben, nmlich oben und unten.

Im Kopf der HTML-Datei, also zwischen <head> und </head>, wird mit <script type="text/
javascript"> .... </script> ein JavaScript-Bereich definiert. Innerhalb dieses Bereichs sind die
drei Funktionen ZweiFrames(), ZweiFramesBack() und ZweiFramesForward() notiert, die
von den Verweisen in der Datei aufgerufen werden.
Die Funktion ZweiFrames() erwartet vier Parameter:
1. den URI des gewnschten Inhalts des ersten Frame-Fensters (URI1),
2. den Namen des gewnschten ersten Frame-Fensters innerhalb des Framesets (F1),
3. den URI des gewnschten Inhalts des zweiten Frame-Fensters (URI2),
4. den Namen des gewnschten zweiten Frame-Fensters innerhalb des Framesets (F2).
Dadurch ist die Funktion allgemein gehalten, d.h. Sie knnen diese Funktion auch in ganz anderen Framesets zum gleichen Zweck verwenden. Innerhalb der Funktion stehen zunchst zwei
Aufrufe der Funktion eval. Dies ist ntig, damit der JavaScript-Interpreter die bergebenen
Namen der Frame-Fenster nicht einfach als beliebige Zeichenkette interpretiert, sondern versucht, als vorhandene Objekte zu erkennen. Die Aufrufe sind so gestaltet, dass in den Variablen

19.2 Seitenanzeige in Frames verhindern

609

Frame1 bzw. Frame2 im Beispiel hinterher die Objekte parent.oben bzw. parent.unten

gespeichert sind. Solchermaen ausgerstet, lassen sich die beiden Variablen anschlieend in den
Aufrufen Frame1.location.href und Frame2.location.href wie die entsprechenden
Objekte verwenden, sodass im Beispiel eigentlich ausgefhrt wird: parent.oben.location.
href bzw. parent.unten.location.href. Die Eigenschaft location.href bewirkt einen
JavaScript-Verweis zu einer anderen Adresse. In der Funktion werden den beiden Aufrufen
dieser Eigenschaft einfach die beiden beim Funktionsaufruf bergebenen Adressen URI1 bzw.
URI2 zugewiesen.
Die Funktionen ZweiFramesBack() und ZweiFramesForward() sind hnlich aufgebaut. Allerdings bentigen sie nur zwei Parameter, nmlich die Namen der betroffenen Frame-Fenster (F1
und F2). Mit Aufrufen der Objektmethoden history.back() bzw. history.forward()
erreichen Sie die Funktionalitt der entsprechenden Buttons Zurck und Vor im Browser.
Dass der jeweils zweite Aufruf der Objektmethoden noch mal in ein setTimeout() mit einer
geringen Verzgerung von 1/100 Sekunde gesetzt ist, hat pragmatische Grnde: manche Versionen des Internet Explorers wrden sonst vergessen, den zweiten Aufruf durchzufhren.
Beachten Sie: Opera 5.12 interpretiert die Methode history.back() auf das _top-Fenster
bezogen und ignoriert die Angabe des Zielfensters beim Aufruf der Methode. Das gilt auch,
wenn Sie die Methode innerhalb eines Frames selbst aufrufen. Der Browser hlt sich strikt an die
Reihenfolge der History-Eintrge im Hauptfenster. Wurden mittels JavaScript zwei Frames
gleichzeitig gendert, betrachtet Opera diese nderung als einen Eintrag und geht in der History
zwei Schritte zurck. Aus diesem Grund gilt es zu verhindern, dass Opera ein zweites Mal ein
history.back() ausfhrt. Dies wird im obigen Beispiel mit if (!window.opera) erreicht. Nur
ein Opera-Browser kennt das Objekt window.opera. In der bedingten Anweisung wird gefragt,
ob der Browser dieses Objekt nicht kennt. Nur in diesem Fall wird die Objektmethode ein zweites Mal aufgerufen.

19.2

Seitenanzeige in Frames verhindern

Wenn Sie eigene WWW-Seiten erstellen, werden Sie kaum wollen, dass Ihr prachtvolles Werk in
einem kleinen Fenster einer fremden Seite angezeigt wird. Dies ist jedoch mit Hilfe von Frames
problemlos mglich, und es gibt einige Web-Guide-Projekte, die unverschmt genug sind,
fremde Projekte als Schaufenster im eigenen Projekt anzuzeigen. Lesen Sie dazu auch den
Abschnitt 9.5.2 ber unfaire Schaufenster-Effekte.
Mit einem kleinen JavaScript knnen Sie erzwingen, dass Ihre eigenen Seiten beim Aufruf in
jedem Fall das gesamte Browser-Fenster ausfllen. Das Script erzwingt die Anzeige einer HTMLDatei im Vollbild, wenn eine andere Seite versucht, die Datei in ein Frame-Fenster zu laden. Auf
normale Verweise und Aufrufe der Datei hat das Script keine Auswirkungen.

Quelltext mit Erluterungen

Das Beispiel zeigt die Datei, die das Geladenwerden in ein Frameset verhindert. Die Dateien, die
im Anzeigebeispiel zum Frameset gehren, sind fr das Verstndnis ohne Bedeutung.

610

Kapitel 19: JavaScript Beispiele

<html>
<head>
<title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
<!-if(top!=self)
top.location=self.location;
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200"
alink="#000000">
<h1>Keine Chance fr Schaufenster-Anbieter!</h1>
</body>
</html>

19.2:

Wird die Beispieldatei in das Frame rechts geladen, so bernimmt sie die Kontrolle und
fllt das ganze Bowser-Fenster.

Das kleine JavaScript im Beispiel sollte im Kopf jeder HTML-Datei stehen, die Sie nicht in fremden Frames sehen mchten. Das Script wird beim Laden der Datei automatisch ausgefhrt, da
der Code nicht in einer Funktion gebunden ist. In dem Code er besteht aus einer einzigen
bedingten Anweisung wird mit top!=self abgefragt, ob die oberste Referenzebene der eigenen
Ebene entspricht. Ist self, also das eigene Fenster, gleichzeitig auch das oberste Fenster (top),
dann ist alles in Ordnung, und die Anweisung, die von der Bedingung abhngt, wird nicht ausgefhrt. Ist dagegen self nicht das gleiche wie top, bedeutet dies, dass irgendwelche Frames
angezeigt werden. In diesem Fall wird die Anweisung top.location=self.location ausgefhrt. Mit dieser Anweisung erzwingen Sie, dass die aktuelle Datei auf jeden Fall im gesamten
Anzeigefenster des Browsers angezeigt wird.

19.2 Seitenanzeige in Frames verhindern

611

Beachten Sie: Bei Opera 5.12 haben Sie keinen Zugriff auf die oberste Fensterebene top, wenn
diese nicht zur eigenen Domain gehrt. Sie knnen jedoch ber einen Umweg auch diesen
Browser dazu veranlassen, das Frameset zu sprengen. Dazu mssen Sie dafr sorgen, dass ein
Verweis mit der Eigenschaft target="_top" angeklickt wird. Ein Beispiel:
<html>
<head>
<title>Seitenanzeige in Frames verhindern</title>
<script type="text/javascript">
<!-if(top!=self)
{
if (window.opera) window.onload=opera_befreien;
else top.location=self.location;
}
function opera_befreien()
{
document.links[befreien].click();
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200"
alink="#000000">
<a name="befreien" href="seitenanzeige_opera.htm" target="_top"></a>
<h1>Keine Chance fr Schaufenster-Anbieter!</h1>
</body>
</html>

Innerhalb der Seite befindet sich ein unsichtbarer Verweis (Verweis ohne Verweistext) namens
befreien. Dieser Verweis besitzt als Zielfenster _top und als Verweisziel die Seite selbst. Wird
nun beim Laden der Seite festgestellt, dass diese sich innerhalb eines fremden Framesets befindet,
so verwenden alle Browser auer Opera das oben beschriebene Script. In Opera dagegen wird
lediglich der Event-Handler onload initialisiert. Der Aufruf window.onload=opera_befreien
hat die Aufgabe, nach dem Laden der Seite die Funktion opera_befreien() aufzurufen. Innerhalb der Funktion passiert nichts weiter, als dass der Verweis mit der Methode click() angeklickt wird. Diese undokumentierte Methode funktioniert mit allen Identifikationseinstellungen
von Opera. Das Verweisziel ldt sich in die oberste Fensterebene und sprengt das Frameset.

612
19.3

Kapitel 19: JavaScript Beispiele

Taschenrechner

Das Beispiel baut mit Hilfe eines HTML-Formulars einen halbwegs echt aussehenden
Taschenrechner auf. Der Anwender kann diesen Taschenrechner wie blich bedienen. Allerdings
bietet dieser Taschenrechner im Gegensatz zu normalen Taschenrechnern auch die Mglichkeit
an, direkt ins Display Daten einzugeben. Auerdem berechnet dieser Taschenrechner auch
Serienrechnungen wie 1+2+3+4+5+6+7+8+9 und Klammerausdrcke wie 3*(2+4).

19.3: Der Taschenrechner erlaubt umfangreiche Rechenoperationen.

Anhand dieses Beispiels knnen Sie studieren, wie man Formulareingaben mit JavaScript zur
direkten Interaktion verwenden kann. Diese Art Einsatz von JavaScript gehrt zu den sinnvollsten Einsatzmglichkeiten.

Quelltext mit Erluterungen

Das Beispiel zeigt die vollstndige HTML-Datei mit dem Taschenrechner.
<html>
<head>
<title>Taschenrechner</title>
<script type="text/javascript">
<!-function Check(Eingabe) {
var nur_das ="0123456789[]()-+*%/";
for (var i = 0; i < Eingabe.length; i++)
if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false;
return true;
}
function Ergebnis() {
var x = 0;

19.3 Taschenrechner
if (Check(window.document.Rechner.Display.value))
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x;
}
function Hinzufuegen(Zeichen) {
window.document.Rechner.Display.value =
window.document.Rechner.Display.value + Zeichen;
}
function Sonderfunktion(Funktion) {
if (Check(window.document.Rechner.Display.value)) {
if(Funktion == "sqrt") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.sqrt(x);
}
if(Funktion == "pow") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x * x;
}
if(Funktion == "log") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.log(x);
}
} else window.document.Rechner.Display.value = 0
}
//-->
</script>
<style type="text/css">
<!-.button {

width:60px; text-align:center;
font-family:System,sans-serif;
font-size:100%; }

.display { width:100%; text-align:right;

font-family:System,sans-serif;
font-size:100%; }
-->
</style>
</head>
<body bgcolor="#FFFFE0" text="#000000">
<form name="Rechner" action="" onSubmit="Ergebnis();return false;">
<table border="5" cellpadding="10" cellspacing="0">
<tr>

613

614

Kapitel 19: JavaScript Beispiele

<td bgcolor="#C0C0C0">
<input type="text" name="Display" align="right" class="display"></td>
</tr><tr>
<td

bgcolor="#E0E0E0">

<table border="0" cellpadding="0" cellspacing="2">

<tr>
<td><input type="button" width="60" class="button" value="

"

"

"

"

"

"

"

"

"

"

"

"

"

"

"

"

onClick="Hinzufuegen(7)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(8)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(9)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(+)"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(4)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(5)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(6)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(-)"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(1)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(2)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(3)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(*)"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="
onClick="Ergebnis()"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(0)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(.)"></td>
<td><input type="button" width="60" class="button" value="
onClick="Hinzufuegen(/)"></td>
</tr>
<tr>

19.3 Taschenrechner

615

<td><input type="button" width="60" class="button" value="sqrt "

onClick="Sonderfunktion(sqrt)"></td>
<td><input type="button" width="60" class="button" value=" pow "
onClick="Sonderfunktion(pow)"></td>
<td><input type="button" width="60" class="button" value=" log "
onClick="Sonderfunktion(log)"></td>
<td><input type="reset"

width="60" class="button" value="

"></td>

</tr>
</table>
</td></tr></table>
</form>
</body>
</html>

Funktion zur Berechnung des Inhalts des Rechenfelds

Im Beispiel werden im Kopf der HTML-Datei mehrere Funktionen notiert, die die Funktionalitt des Taschenrechners ermglichen. Die Funktion Ergebnis() errechnet den aktuellen Inhalt
des Rechenfeldes. Innerhalb der Funktion wird eine Variable x definiert, in der das Ergebnis der
Berechnung gespeichert wird. Um das Ergebnis zu erhalten, wird die Rechenoperation, die in
dem bergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die mchtige
objektunabhngige JavaScript-Funktion eval() bergeben. Diese Funktion bernimmt automatisch die gesamte Berechnung der Rechenoperation. Voraussetzung ist natrlich, dass die
Rechenoperation keine ungltigen Zeichen enthlt. Ansonsten erzeugt JavaScript eine Fehlermeldung.
Aus diesem Grund wird vor jeder Verwendung von eval() die Funktion check() aufgerufen,
welche die Gltigkeit der Eingaben prft. Nur wenn diese Funktion true zurckgibt, wird die
Methode eval() angewendet. Ansonsten wird im Display der Wert 0 angezeigt.
Um das errechnete Ergebnis, das in der Variablen x gespeichert wird, im Rechenfeld des Taschenrechners anzuzeigen, wird dem entsprechenden Formularfeld einfach der Wert von x zugewiesen.

Funktion zur Prfung der Gltigkeit der Eingabe

Die Funktion Check(Eingabe) berprft, ob die Werte von Eingabe nur die vorgegebenen Zeichen enthlt. Diese sind in der Variablen nur_das abgelegt. Mit einer for-Schleife wird die
bergebene Zeichenkette Zeichen fr Zeichen daraufhin berprft, ob dieses Zeichen in dem
Bereich von nur_das vorkommt. Mit der Methode charAt() wird aus der Variablen Eingabe
das Zeichen an der Position i extrahiert und an nur_das.indexOf() als Parameter bergeben.
Die Methode indexOf() prft daraufhin, ob das Zeichen in nur_das enthalten ist. Tritt ein ungltiges Zeichen auf, so wird die Funktion abgebrochen und der Wert false zurckgegeben.
Andernfalls gibt die Funktion true zurck.

616

Kapitel 19: JavaScript Beispiele

Funktion zum Hinzufgen eines Zeichens in das Rechenfeld

Die Funktion Hinzufuegen() im Beispiel wird aufgerufen, wenn der Anwender auf einen der
Buttons im Taschenrechner-Formular klickt. Das knnen Ziffern (0 bis 9) oder Rechenoperatoren (+ - * /) oder ein Dezimalpunkt sein. Um das Zeichen hinzuzufgen, wird dem aktuellen
Wert des Rechenfeldes einfach der bisherige Wert plus das neue Zeichen zugewiesen. Dabei
kommt der Operator zur Zeichenkettenverknpfung (+) zum Einsatz. Das neue Zeichen wird
der Funktion als Parameter bergeben.

Funktion zur Berechnung von Sonderfunktionen

Die Funktion Sonderfunktion() im Beispiel ist fr die Berechnung von drei mathematischen
Funktionen zustndig, fr die es im Taschenrechner entsprechende Buttons gibt: die Funktionen
sqrt (Quadratwurzel), pow (Quadrat) und log (natrlicher Logarithmus ber 10). Die
Funktion erwartet drei Parameter: den Index des Formulars, in dem sich das Rechenfeld befindet, den Index des Feldes innerhalb dieses Formulars, und eine Zeichenkette, die die auszufhrende mathematische Funktion kennzeichnet. Innerhalb der Funktion wird der dritte Parameter
abgefragt. Erlaubt sind die bergabewerte sqrt, pow und log. Falls einer dieser Werte
bergeben wurde, berechnet die Funktion innerhalb des entsprechenden If-Zweigs den gewnschten Wert. Dazu wird die Rechenoperation oder die Zahl, die in dem bergebenen Formularfeld (dem Rechenfeld des Taschenrechners) steht, an die JavaScript-Standardfunktion
eval() bergeben. Diese Funktion bernimmt automatisch die gesamte Berechnung der
Rechenoperation. Das Ergebnis wird in x gespeichert. Falls es sich nur um eine einfache Zahl
handelt, wird diese Zahl in x gespeichert. Mit einer entsprechenden JavaScript-Methode, z.B. der
Methode sqrt() zur Errechnung der Quadratwurzel, wird das Ergebnis der mathematischen
Sonderfunktion berechnet und zugleich dem Rechen-/Ergebnisfeld des Taschenrechner-Formulars zugewiesen.

Button-Klick als Zeichen in Rechenfeld eintragen

Innerhalb des Taschenrechner-Formulars im Beispiel werden die Buttons fr Ziffern, Operatoren usw. definiert. Beim Klicken auf einen solchen Button soll natrlich eine entsprechende
Reaktion erfolgen. Dies geschieht mit Hilfe des Event-Handlers onClick=. Der Event-Handler
wird aktiv, wenn der entsprechende Button angeklickt wird, und ruft dann eine der im Dateikopf
definierten Funktionen auf. Bei einer Ziffer wird beispielsweise die Funktion Hinzufuegen()
aufgerufen. Dazu wird der Funktion der erwartete Parameter bergeben, also das hinzuzufgende Zeichen. Das Taschenrechner-Formular erhlt bei der Definition einen Namen, im Beispiel den Namen Rechner. Auch das Rechen-/Ergebnisfeld, das im JavaScript-Code sehr oft
angesprochen wird, erhlt einen Namen den Namen Display. Das Formular-Objekt und das
Formularelement-Objekt des Rechen-/Ergebnisfeldes kann deshalb mit window.document.
Rechner.Display adressiert werden.

Inhalt des Rechenfelds lschen

Der Button mit der Aufschrift C im Beispiel dient zum Lschen der bisherigen Eingaben. Dazu
braucht man kein JavaScript. Stattdessen gengt es, einen Button vom Typ reset zu definieren.

19.4 Monatskalender

617

Absenden des Formulares verhindern

Da der Taschenrechner ein einzeiliges Formularfeld enthlt, kann dieses Formular jederzeit mit
Bettigung der Eingabetaste abgesendet werden. Ein Absenden ist im Zusammenhang mit dem
Taschenrechner jedoch unerwnscht. Deshalb wird im einleitenden <form>-Tag der EventHandler onSubmit notiert. Dahinter folgt der Aufruf der Funktion Ergebnis() und anschlieend return false. Diese Notation bewirkt, dass wenn der Anwender die Eingabetaste drckt,
die Berechnung des Ergebnisses erfolgt und gleichzeitig ein Abschicken des Formulars verhindert
wird.
Beachten Sie: Im HTML-Standard ist die Verwendung des Attributes width= fr input-Felder
nicht erlaubt. Der Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften fr solche Formularfelder. Im Interesse des Layouts wurden daher trotz der Verletzung des HTML-Standards die
width-Attribute verwendet.

19.4

Monatskalender

Das Beispiel schreibt in eine HTML-Datei an einer gewnschten Stelle einen frei formatierbaren
Kalender des aktuellen Monats. Der aktuelle Tag wird darin hervorgehoben dargestellt. Ein kleines Schmuckstck fr Web-Seiten.
Anhand des Beispiels knnen Sie den praktischen Umgang mit dem Date-Objekt von JavaScript
studieren, aber ebenso, wie sich durch kontrollierte document.write-Ausgaben komplexer
HTML-Code erzeugen lsst.

19.4: Der Monatskalender mit dem aktuellen Tag in besonderer Formatierung.

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei, in der das JavaScript fr den Monatskalender
eingebunden ist.

618

Kapitel 19: JavaScript Beispiele

<html>
<head>
<title>Monatskalender</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1 style="font-family:Verdana,Arial; font-weight:normal">Monatskalender</h1>
<script type="text/javascript">
<!-var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 999) dj+=1900;
Kalender(dm,dj);
function Kalender(Monat,Jahr) {
Monatsname = new Array
("Januar","Februar","M&auml;rz","April","Mai","Juni","Juli",
"August","September","Oktober","November","Dezember");
Tag = new Array ("Mo","Di","Mi","Do","Fr","Sa","So");
var KSchrArt = "Verdana,Arial"; /* Schriftart Kalenderkopf */
var KSchrGroesse = 3;

/* Schriftgroesse 1-7 Kalenderkopf */

var KSchrFarbe = "#FFFF00";

/* Schriftfarbe Kalenderkopf */

var Khgrund = "#000066";

/* Hintergrundfarbe Kalenderkopf */

var TSchrArt = "Verdana,Arial"; /* Schriftart Tagesanzeige */

var TSchrGroesse = 3;

/* Schriftgroesse 1-7 Tagesanzeige */

var TSchrFarbe = "#000000";

/* Schriftfarbe Tagesanzeige */

var Thgrund = "#D0F0F0";

/* Hintergrundfarbe Tagesanzeige */

var SoFarbe = "#E00000";

/* Schriftfarbe f. Sonntage */

var Ahgrund = "#FFFF00";

/* Hintergrundfarbe f. heutigen Tag */

var jetzt = new Date();

var DieserMonat = jetzt.getMonth() + 1;
var DiesesJahr = jetzt.getYear();
if(DiesesJahr < 999) DiesesJahr+=1900;
var DieserTag = jetzt.getDate();
var Zeit = new Date(Jahr,Monat-1,1);
var Start = Zeit.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(Monat==4 ||Monat==6 || Monat==9 || Monat==11 ) --Stop;
if(Monat==2) {
Stop = Stop - 3;
if(Jahr%4==0) Stop++;

19.4 Monatskalender
if(Jahr%100==0) Stop--;
if(Jahr%400==0) Stop++;
}
document.write(<table border="3" cellpadding="1" cellspacing="1">);
var Monatskopf = Monatsname[Monat-1] + " " + Jahr;
SchreibeKopf(Monatskopf,Khgrund,KSchrFarbe,KSchrGroesse,KSchrArt);
var Tageszahl = 1;
for(var i=0;i<=5;i++) {
document.write("<tr>");
for(var j=0;j<=5;j++) {
if((i==0)&&(j < Start))
SchreibeZelle("&#160;",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
else {
if(Tageszahl > Stop)
SchreibeZelle("&#160;",Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
SchreibeZelle(Tageszahl,Ahgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
else
SchreibeZelle(Tageszahl,Thgrund,TSchrFarbe,TSchrGroesse,TSchrArt);
Tageszahl++;
}
}
}
if(Tageszahl > Stop)
SchreibeZelle("&#160;",Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
else {
if((Jahr==DiesesJahr)&&(Monat==DieserMonat)&&(Tageszahl==DieserTag))
SchreibeZelle(Tageszahl,Ahgrund,SoFarbe,TSchrGroesse,TSchrArt);
else
SchreibeZelle(Tageszahl,Thgrund,SoFarbe,TSchrGroesse,TSchrArt);
Tageszahl++;
}
document.write("<\/tr>");
}
document.write("<\/table>");
}
function SchreibeKopf(Monatstitel,HgFarbe,SchrFarbe,SchrGroesse,SchrArt) {
document.write("<tr>");
document.write(<td align="center" colspan="7" valign="middle"
bgcolor="+HgFarbe+">);
document.write(<font size="+SchrGroesse+" color="+SchrFarbe+"
face="+SchrArt+"><b>);
document.write(Monatstitel);
document.write("<\/b><\/font><\/td><\/tr>");
document.write("<tr>");

619

620

Kapitel 19: JavaScript Beispiele

for(var i=0;i<=6;i++)
SchreibeZelle(Tag[i],HgFarbe,SchrFarbe,SchrGroesse,SchrArt);
document.write("<\/tr>");
}
function SchreibeZelle(Inhalt,HgFarbe,SchrFarbe,SchrGroesse,SchrArt) {
document.write(<td align="center" valign="middle" bgcolor="+HgFarbe+">);
document.write(<font size="+SchrGroesse+" color="+SchrFarbe+"
face="+SchrArt+"><b>);
document.write(Inhalt);
document.write("<\/b><\/font><\/td>");
}
//-->
</script>
</body>
</html>

Aktuelles Datum ermitteln

Im Script-Bereich wird zunchst mit d = new Date() ein neues Datumsobjekt mit dem aktuellen
Zeitpunkt erzeugt. In den Variablen dm und dj werden anschlieend aus dem neuen Datumsobjekt d der Monat und das Jahr ermittelt. Mit diesen beiden Variablen wird die Funktion Kalender() aufgerufen.
Die Anweisung if(dj < 999) dj+=1900; ist dabei ntig, um einigen lteren Browsern, die bei
dem Aufruf der getYear-Methode nicht Jahr-2000-kompatibel reagieren, zum Ermitteln des
gewnschten Jahres zu verhelfen.

Funktion Kalender()
Die Funktion Kalender() ist als in sich abgeschlossenes Unterprogramm realisiert, das einen
Monat und ein Jahr als Parameter erwartet und als Monatskalender angezeigt werden soll. Auf
diese Weise lsst sich die Funktion auch noch anderweitig nutzen als zur einmaligen Ausgabe des
aktuellen Kalendermonats.
Zu Beginn der Funktion Kalender() werden erst einmal verschiedene Variablen definiert. Dazu
gehren die gewnschten Monatsnamen und die Wochentage, die jeweils als Array-Objekte angelegt werden. Wenn Sie andere, zum Beispiel landesspezifische Namen wie Jnner wnschen,
ndern Sie den entsprechenden Namen einfach.
Zu den Variablen, die am Beginn von Kalender() definiert werden, gehren auch die Angaben
zu Farben, Schriftarten und Schriftgren fr Kalenderhintergrund und Anzeige der Tage. Die
Variablendefinitionen sind im Beispiel zum besseren Verstndnis auskommentiert. ndern Sie
diese Werte, wenn Sie den Kalender verwenden mchten, nach Ihren Wnschen.

19.4 Monatskalender

621

Ermitteln, ob aktiver Tag im anzuzeigenden Monat liegt

Da die Funktion Kalender() ja als Parameter bergeben bekommt, welchen Monat in welchem
Jahr sie ausgeben soll, kann es sich durchaus um einen anderen als den aktuellen Monat handeln
(nur im obigen Beispiel wird die Funktion mit dem aktuellen Monat/Jahr aufgerufen). Die
Funktion ermittelt deshalb noch einmal separat die Daten des aktuellen Tages (DieserTag), des
aktuellen Monats (DieserMonat) und des aktuellen Jahres (DiesesJahr). Die entsprechenden
Daten werden spter bentigt, um den aktuellen Tag farblich hervorzuheben, sofern er in dem
auszugebenden Monat vorkommt. Auch dabei wird wieder die Anpassung fr das Jahr 2000
durchgefhrt.

Anzeige in Tabelle vorbereiten

Der Monatskalender soll mit Hilfe von document.write()-Anweisungen in eine HTML-Tabelle
geschrieben werden. Zunchst muss jedoch ermittelt werden, wie viele Tage der auszugebende
Monat hat und an welchem Wochentag er beginnt. Davon hngt ab, wie die Tage in die Tabelle
geschrieben werden.
In der Variablen Start wird der Wochentag gespeichert, auf den der erste Tag des auszugebenden Monats fllt. Dazu wird in einer Variablen Zeit ein Datumsobjekt erzeugt, das sich mit
Date(Jahr,Monat-1,1) auf den ersten Tag des auszugebenden Monats bezieht. Mit
Zeit.getDay() wird der Wochentag dieses Tages ermittelt (0 fr Montag bis 6 fr Sonntag).
In der Variablen Stop wird die Anzahl der Tage ermittelt, die der Monat hat. Wenn es einer der
Monate 4, 6, 9 oder 11 ist, hat der Monat 30 Tage. Wenn es der Monat 2 ist, ist etwas Kalenderakrobatik erforderlich. Denn dieser Monat kann 28 oder 29 Tage haben, abhngig einmal davon,
ob es ein Schaltjahr ist (durch 4 teilbar), ob es trotzdem kein Schaltjahr ist (durch 100 teilbar),
oder ob es doch wieder ein Schaltjahr ist (durch 400 teilbar).

Tabelle erzeugen
Nachdem alle Vorbereitungen getroffen sind, kann die Tabelle mit dem Kalendermonat geschrieben werden. Dies geschieht mit Hilfe von document.write()-Befehlen, die dynamisch die
entsprechenden HTML-Konstrukte in die Datei schreiben. Die Funktion Kalender() selbst
schreibt jedoch nur den Anfang und das Ende der Tabelle. Ansonsten bernimmt sie nur die
Kontrolle, was genau in welcher Reihenfolge geschrieben werden soll. Um den Tabellenkopf mit
Monats- und Jahresangabe sowie den Wochentagnamen zu schreiben, ruft sie die Unterfunktion
SchreibeKopf() auf. Um die einzelnen Datenzellen zu schreiben, wird jeweils die Unterfunktion SchreibeZelle() aufgerufen. Um Letztere mit den richtigen Daten zu versorgen, muss die
Kalender()-Funktion die zuvor ermittelten Angaben zum Wochentag des ersten Tages im
Monat sowie das aktuelle Tagesdatum bercksichtigen und die entsprechenden Parameter
korrekt bergeben. Falls eine Zelle leer bleiben soll, wird das erzwungene Leerzeichen &#160;
bergeben, denn nur so wird die Tabellenzelle nachher sichtbar dargestellt, auch wenn sie keinen
Inhalt hat. Wenn die Zelle eine Tageszahl anzeigen soll, wird eine entsprechende Variable bergeben.
Die Funktionen SchreibeKopf() und SchreibeZelle() schreiben die einzelnen Datenzellen
und setzen dabei die Variablen zur Gestaltung des Kalenders ein.

622
19.5

Kapitel 19: JavaScript Beispiele

Persnliche Seitenbesuche zhlen mit Cookies

Cookies (Kekse) sind ein nicht unumstrittenes Feature, das Netscape in JavaScript eingebaut hat.
Cookies erlauben einem JavaScript-Programm, Daten auf der Festplatte des Anwenders zu speichern. Dies geschieht jedoch in kontrollierter Form. Ein Ausspionieren der Anwenderfestplatte
ist dabei ebenso wenig mglich wie das Platzieren von ausfhrbarem Code, also etwa Viren.
Denn wenn Sie in einem JavaScript einen Cookie schreiben, knnen Sie nicht angeben, wohin
der Cookie beim Anwender gespeichert wird. Das kontrolliert der WWW-Browser des Anwenders. Auerdem knnen Cookies keine unkontrollierten Datenmengen auf den Anwenderrechner schreiben, sondern nur eine begrenzte Anzahl von Zeilen. Jede dieser Zeilen definiert eine
Variable und weist dieser Variablen einen Wert zu. Ein Cookie lsst sich also mit einem Eintrag
in einer Konfigurationsdatei vergleichen mit dem Unterschied, dass der Cookie keine Konfigurationsdaten des Anwenderrechners ansprechen kann.
Durch die Mglichkeit, Daten zu speichern, werden jedoch viele neue Anwendungsbereiche fr
JavaScript mglich. So auch das hier beschriebene Beispiel. Denn um zeitlich auseinander liegende Seitenbesuche zu zhlen, muss man die Anzahl der bisherigen Seitenbesuche irgendwo fest
speichern, beim nchsten Seitenbesuch wieder auslesen, den Zhler um 1 erhhen und den
neuen Wert wieder speichern. Genau das tut das hier beschriebene Beispiel.
Beachten Sie: Das Zhlen von persnlichen Seitenbesuchen ist etwas anderes als das Zhlen aller
Seitenbesuche. Um alle Zugriffe auf eine Seite zu verwalten, muss das Programm seine Zhlerstnde auf dem Server-Rechner ablegen. Deshalb funktioniert ein klassischer Counter nur mit
CGI. Das hier beschriebene Script zhlt nur, wie oft ein bestimmter Anwender eine bestimmte
Seite besucht.

19.5: Der Zhler mit einem Cookie zeigt die bisher erfolgten Besuche an.

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei. Der Zhler gilt fr diese eine Datei.
<html>
<head>
<title>Pers&ouml;nliche Seitenbesuche z&auml;hlen mit Cookies</title>
<script type="text/javascript">
<!-function WertHolen() {

19.5 Persnliche Seitenbesuche zhlen mit Cookies

var Wert = "";
if(document.cookie) {
var Wertstart = document.cookie.indexOf("=") + 1;
var Wertende = document.cookie.indexOf(";");
if (Wertende == -1)
Wertende = document.cookie.length;
Wert = document.cookie.substring(Wertstart,Wertende);
}
return Wert;
}
function WertSetzen(Bezeichner, Wert, Verfall) {
var jetzt = new Date();
var Auszeit = new Date(jetzt.getTime() + Verfall);
document.cookie = Bezeichner+"="+Wert+"; expires="+Auszeit.toGMTString()+";";
}
function Zaehlerstand() {
var Verfallszeit = 1000*60*60*24*365;
var Anzahl = WertHolen();
var Zaehler = 0;
if(Anzahl != "") Zaehler = parseInt(Anzahl);
if(document.cookie) {
Zaehler = Zaehler + 1;
WertSetzen("Zaehler",Zaehler,Verfallszeit);
}
else {
Zaehler = 1;
WertSetzen("Zaehler",Zaehler,Verfallszeit);
}
return(Zaehler);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1>Eine Seite, die etwas ber Sie wei&szlig;...</h1>
<script type="text/javascript">
<!-var x = Zaehlerstand();
document.write("<p>Dies ist Ihr <b>" + x + ".<\/b> Besuch auf dieser
Seite!<\/p>");
//-->
</script>

623

624

Kapitel 19: JavaScript Beispiele

<p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p>

</body>
</html>

Cookie lesen und gespeicherten Wert ermitteln

Die Funktion WertHolen(), die im Beispiel definiert ist, ist allgemein geschrieben. Sie knnen
diese Funktion nutzen, um einen Cookie auszulesen. Wenn die Datei schon einmal einen Cookie
geschrieben hat, wird dessen Wert ermittelt und zurckgegeben. Wenn noch kein Cookie existiert, wird eine leere Zeichenkette "" zurckgegeben.
Mit der Abfrage if(document.cookie) ermittelt die Funktion, ob bereits ein Cookie vorhanden ist. Wenn ja, wird dessen Wert ermittelt. Ein Cookie besteht normalerweise aus einem Bezeichner und einem Wert, zum Beispiel: Zaehler=4. Dabei ist Zaehler der Bezeichner und 4
der Wert, der diesem Bezeichner zugewiesen ist. Die Funktion WertHolen() holt sich den Wert,
indem sie mit indexOf()-Befehlen den Anfang und das Ende des Wertes innerhalb des gespeicherten Cookies ermittelt. Diesen Wert weist sie der Variablen Wert zu. Die Variable Wert wird
am Ende der Funktion zurckgegeben.

Cookie schreiben und Wert setzen

Die Funktion WertSetzen(), die im Beispiel definiert ist, ist ebenfalls allgemein geschrieben.
Diese Funktion erwartet drei Parameter:
Bezeichner ist das Element vor dem Gleichheitszeichen, zum Beispiel Zaehler.
Wert ist der Wert, der dem Bezeichner zugewiesen und mit gespeichert werden soll.
Verfall ist eine Zahl, die als Anzahl Millisekunden interpretiert wird. Jeder Cookie, der ber
die aktuelle Browser-Sitzung hinaus gespeichert bleiben soll, muss eine Angabe dazu enthalten, wann der Browser den Cookie lschen soll. Das soll verhindern, dass Cookies ewig gespeichert bleiben. Der Verfallszeitpunkt des Cookies muss in Form des GMT-Zeitformats angegeben werden. Darum brauchen Sie sich aber nicht zu kmmern, da die Funktion WertSetzen() dies automatisch erledigt. Die Funktion ermittelt zu diesem Zweck die aktuelle Zeit
(var jetzt = new Date();). In der Variablen Auszeit errechnet sie einen zuknftigen Zeitpunkt aus dem bergebenen Parameter Verfall und dem ermittelten aktuellen Zeitpunkt.
Mit der Anweisung, die mit document.cookie= beginnt, wird der Cookie geschrieben.

bergeordnete Funktion zum Verwalten des Cookies

Die beiden allgemeinen Funktionen WertHolen() und WertSetzen() bentigen nun noch ein
paar allgemeine Anweisungen, die den Cookie verwalten. Dies geschieht im Beispiel in der
Funktion Zaehlerstand(). Zunchst definiert diese Funktion einen Verfallswert, der spter
beim Schreiben des Cookies an die Funktion WertSetzen() bergeben wird. Mit dem Rechenausdruck 1000*60*60*24*365 wird die Millisekundenzahl eines Jahres ermittelt. Der Cookie
soll also ein Jahr lang gespeichert werden.

19.6 Formulareingaben berprfen

625

Um die persnlichen Seitenbesuche des Anwenders zu verwalten, muss die Funktion Zaehlerstand() Folgendes tun: Sie muss erstens den aktuellen Zhlerstand ermitteln, zweitens den
Zhler um 1 erhhen und drittens den neuen Zhlerstand wieder speichern. Wenn noch kein
Cookie vorhanden ist, d.h. wenn der Anwender die Seite zum ersten Mal besucht, muss der
Zhler auf 1 gesetzt und gespeichert werden.
Zuerst ruft die Funktion Zaehlerstand() deshalb die Funktion WertHolen() auf, um den
aktuellen Zhlerstand zu ermitteln. Der Rckgabewert von WertHolen() wird in der Variablen
Anzahl gespeichert. Wenn noch kein Cookie vorhanden ist, steht in Anzahl anschlieend eine
leere Zeichenkette "". Ist ein Wert vorhanden, enthlt Anzahl den Wert in Form einer Zeichenkette. Da man mit Zeichenketten nicht rechnen kann, zum Hochzhlen des Zhlers jedoch ein
numerischer Wert bentigt wird, wird im Beispiel noch eine numerische Variable namens Zaehler definiert. Mit der parseInt()-Methode wird dieser Variablen der Wert von Anzahl als
Zahl zugewiesen.
Wenn ein Cookie vorhanden ist, wird der Zhler um 1 erhht. Anschlieend wird die Funktion
WertSetzen() aufgerufen, die den Cookie speichert. Als Bezeichner wird das Wort "Zaehler"
bergeben, als Wert der Inhalt der Variablen Zaehler und als Verfallszeitpunkt der Inhalt der
Variablen Verfallszeit.

Wenn kein Cookie vorhanden ist, wird die Funktion WertSetzen() genauso aufgerufen. Vorher
wird jedoch der Inhalt der Variablen Zaehler auf 1 gesetzt.
Am Ende gibt die Funktion Zaehlerstand() mit Hilfe von return() zurck. Damit kann diese
Funktion beispielsweise an anderer Stelle fr eine Ausgabe innerhalb der Seite aufgerufen werden, so wie im Beispiel. Dort ist im body-Bereich ein weiterer JavaScript-Bereich notiert. Innerhalb davon wird die Funktion Zaehlerstand() aufgerufen, und ihr Rckgabewert, also der
aktuelle Zhler, wird in der Variablen x gespeichert. Anschlieend wird mit document.write
HTML-Code ins Anzeigefenster des Browsers geschrieben, wobei die Variable x mit ausgegeben
wird.

19.6

Formulareingaben berprfen

Wenn Sie HTML-basierte Formulare im WWW anbieten, kann jeder Anwender irgendeinen
Unsinn in das Formular schreiben und es dann abschicken. Betroffen davon sind vor allem Eingabefelder. Dadurch erhalten Sie berflssige E-Mails, oder ein CGI-Script, das die Formulareingaben automatisch verarbeitet, speichert leere oder nutzlose Daten ab. Mit Hilfe von JavaScript
knnen Sie Formulareingaben berprfen, bevor das Formular abgeschickt wird. Bei fehlenden
oder offensichtlich fehlerhaften Eingaben knnen Sie das Absenden des Formulars verhindern.
Das Beispiel auf dieser Seite zeigt, wie eine solche berprfung im Prinzip funktioniert. Je nachdem, was Ihr Formular enthlt, mssen Sie das Beispiel natrlich erweitern.

626

Kapitel 19: JavaScript Beispiele

19.6: Das JavaScript bemngelt die eingetippte E-Mail-Adresse.

Quelltext mit Erluterungen

Das Beispiel zeigt die vollstndige HTML-Datei mit dem Formular und dem JavaScript zum
berprfen der Formulareingaben. Das Beispielformular ruft nach erfolgreichem Absenden ein
CGI-Script auf dem Server von teamone.de auf.
<html>
<head>
<title>Formulareingaben &uuml;berpr&uuml;fen</title>
<script type="text/javascript">
<!-function chkFormular()
{
if(document.Formular.User.value == "")

alert("Bitte Ihren Namen eingeben!");

document.Formular.User.focus();
return false;
}
if(document.Formular.Ort.value == "") {
alert("Bitte Ihren Wohnort eingeben!");
document.Formular.Ort.focus();
return false;
}
if(document.Formular.Mail.value == "") {
alert("Bitte Ihre E-Mail-Adresse eingeben!");
document.Formular.Mail.focus();
return false;
}
if(document.Formular.Mail.value.indexOf(@) == -1) {
alert("Keine E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}

19.6 Formulareingaben berprfen

627

if(document.Formular.Alter.value == "") {
alert("Bitte Ihr Alter eingeben!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for(i=0;i<document.Formular.Alter.value.length;++i)
if(document.Formular.Alter.value.charAt(i) < "0"
|| document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if(chkZ == -1) {
alert("Altersangabe keine Zahl!");
document.Formular.Alter.focus();
return false;
}
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000">
<h1>Formular</h1>
<form name="Formular" action="http://selfaktuell.teamone.de/cgi-bin/formview.pl"
method="post" onSubmit="return chkFormular()">
<pre>
Name:

<input type="text" size="40" name="User">

Wohnort:

<input type="text" size="40" name="Ort">

E-Mail:

<input type="text" size="40" name="Mail">

Alter:

<input type="text" size="40" name="Alter">

Formular: <input type="submit" value="Absenden"><input type="reset"

value="Abbrechen">
Zum Absenden muss eine Internet-Verbindung bestehen!
</pre>
</form>
</body>
</html>

Formular definieren
Im Beispiel wird ein gewhnliches HTML-Formular mit einigen Eingabefeldern, einem ResetButton zum Zurcksetzen des Formulars und einem Submit-Button zum Absenden des Formulars definiert. Die einzige Besonderheit ist die Anweisung onSubmit="return chkFormular()"
im einleitenden <form>-Tag. Der Event-Handler onSubmit= wird aktiv, wenn der Anwender auf
den Submit-Button klickt, um das Formular abzusenden. Dann wird die JavaScript-Funktion

628

Kapitel 19: JavaScript Beispiele

chkFormular() aufgerufen, die im Dateikopf in einem JavaScript-Bereich notiert ist. Wenn die
Funktion Fehler bei den Eingaben findet, gibt sie den Wert false (falsch) zurck, andernfalls
den voreingestellten Wert true (wahr). Mit return wird dieser Wert im einleitenden <form>Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte true und false. Im
Zusammenhang mit onSubmit= reagiert er so, dass er das Formular nur dann abschickt, wenn
der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert.

Formular berprfen
Die eigentliche Formularberprfung findet im Beispiel in der Funktion chkFormular() statt,
die in dem Script-Bereich im Dateikopf notiert ist. Im Beispiel soll jedes Eingabefeld daraufhin
berprft werden, ob es einen Inhalt hat, d.h. ob der Anwender es ausgefllt hat. Bei der Angabe
zur E-Mail-Adresse soll zustzlich berprft werden, ob in der Eingabe das Zeichen @ vorkommt. Ist das nicht der Fall, kann man davon ausgehen, dass der Anwender in dem entsprechenden Feld Unsinn eingegeben hat. Bei der Altersangabe schlielich soll zustzlich berprft
werden, ob die Eingabe eine positive ganze Zahl ist. Andernfalls muss man auch hierbei eine
unsinnigen Angabe vermuten.
Mit einer Abfrage wie if(document.Formular.User.value == "") wird ermittelt, ob das entsprechende Formularfeld (im Beispiel also das Feld mit dem Namen User im Formular mit dem
Namen Formular) berhaupt einen Inhalt hat. Es wird also auf die leere Zeichenkette "" hin
geprft.
Mit einer Abfrage wie if(document.Formular.Mail.value.indexOf(@) == -1) wird ermittelt, ob in der Eingabe ein bestimmtes Zeichen fehlt (hier das @-Zeichen, das fr E-Mail-Adressen charakteristisch ist).
Mit einem Ausdruck wie:
for(i=0;i<document.Formular.Alter.value.length;++i)
if(document.Formular.Alter.value.charAt(i) < "0"
|| document.Formular.Alter.value.charAt(i) > "9")

ermitteln Sie Zeichen fr Zeichen, ob ein eingegebener Wert etwas anderes als Ziffern enthlt.
Wenn ja, wird im Beispiel eine Merkvariable namens chkZ auf den Wert -1 gesetzt.
Bei allen Abfragen dieser Art werden jeweils drei Anweisungen ausgefhrt, wenn die Anwendereingaben der Prfung nicht standhalten. Zuerst wird mit alert() jeweils in einem Meldungsfenster ausgegeben, was der Anwender falsch gemacht hat. In der zweiten Anweisung wird mit
der focus()-Methode auf das Formularelement positioniert, auf das sich der Fehler bezieht. Der
Anwender kann seine Feldeingabe also gleich korrigieren. Die dritte Anweisung schlielich gibt
false zurck. Dadurch wird das Absenden des Formulars verhindert.

19.7

Dynamische grafische Buttons

Auf WWW-Seiten kommen hufig grafische Button-Leisten zum Einsatz, die Verweise zu bestimmten Seiten des Projekts enthalten. Wenn der Anwender mit der Maus ber solche Grafiken
fhrt, erkennt er am vernderten Mauszeiger und an den Verweiszielanzeigen in der Statuszeile
des WWW-Browsers, dass es sich um Verweise handelt. Mit Hilfe von JavaScript knnen Sie sol-

19.7 Dynamische grafische Buttons

629

che grafischen Verweise jedoch noch deutlicher kenntlich machen und der Benutzerfhrung
gleichzeitig ein wenig mehr Pep verleihen (Mouseover-Effekt).
Dazu brauchen Sie je zwei gleichartige, farblich unterschiedliche Grafiken fr je einen GrafikButton. Im Anzeigebeispiel zu diesem Abschnitt sind das die beiden folgenden Button-Paare:

19.7: Drei Buttons im normalen Zustand (links) und gedrckten Zustand (rechts).

Mit Hilfe von JavaScript lsst sich nun eine Grafik durch eine andere ersetzen, zum Beispiel
wenn die Grafik als Verweises dient und der Anwender mit der Maus ber die Grafik fhrt. Wie
das im Einzelnen funktioniert, wird im folgenden beschrieben.

19.8: Mit Script ndern die Buttons beim berfahren mit der Maus die Grafik.

Dieses Beispiel funktioniert mit Netscape ab Version 3.x und mit dem MS Internet Explorer ab
Version 4.x. Beachten Sie, dass es bei Verwendung dynamischer Grafiken in Tabellen innerhalb
von Tabellen bei Netscape zu Verschiebungsproblemen kommen kann.

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei mit Button-Leiste und dem JavaScript zum
Steuern der Mousover-Effekte.
<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
<!-Normal1 = new Image();

630

Kapitel 19: JavaScript Beispiele

Normal1.src = "button1.gif";
/* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "button2.gif";
/* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "button3.gif";
/* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
<style type="text/css">
<!-h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
-->
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif" text="#000000">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onMouseOver="Bildwechsel(1,Highlight2)"
onMouseOut="Bildwechsel(1,Normal2)"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onMouseOver="Bildwechsel(2,Highlight3)"
onMouseOut="Bildwechsel(2,Normal3)"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">
<h1>Dynamische grafische Buttons</h1>
<p><b>Fahren Sie mit der Maus ber die Buttons. Sie drfen auch draufdrcken ;)</b></p>

19.7 Dynamische grafische Buttons

631

</td>
</tr>
</table>
</body>
</html>

Neue Grafikobjekte fr Highlight-Grafiken erzeugen

Fr jede Grafik, die Sie dynamisch anzeigen mchten, mssen Sie eine Instanz des imageObjekts erzeugen. Das gilt sowohl fr die Grafiken, die zunchst in der HTML-Datei referenziert
werden, als auch fr diejenigen, die beim berfahren mit der Maus dynamisch angezeigt werden
sollen.
Dazu wird im Beispiel mit Anweisungen wie Normal1 = new Image(); eine Objektinstanz
erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewhlten Objektnamen, im
ersten Fall Normal1, alle Eigenschaften des Objekts ansprechbar. Zunchst enthlt das Objekt
noch gar keine Daten. Mit der Anweisung Normal1.src = "button1.gif"; wird dem neuen
Grafikobjekt eine Grafikdatei zugewiesen.
Wiederholen Sie die beiden beschriebenen Anweisungen fr jede Grafikdatei, die von dynamischen nderungen betroffen sein wird und zwar sowohl fr Grafiken, die im Normalfall angezeigt werden, als auch fr Grafiken, die beim Darberfahren mit der Maus dynamisch angezeigt werden. Vergeben Sie dabei jedes Mal einen neuen Objektnamen. Im obigen Beispiel sind
die entsprechenden Befehle auskommentiert, sodass Sie erkennen knnen, was an welcher Stelle
definiert wird.

Funktion Bildwechsel() zum dynamischen Austauschen von Grafiken

Der bisherige Code im Beispiel wird beim Einlesen der HTML-Datei direkt ausgefhrt, da er
nicht in einer Funktion gebunden ist. Die Ausfhrung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt. Das, was am Bildschirm mit Hilfe
von JavaScript passieren soll, nmlich das dynamische Austauschen eines Bildes, geschieht in der
definierten Funktion Bildwechsel().
Die Funktion soll aufgerufen werden, wenn der Anwender mit der Maus ber einen grafischen
Verweis fhrt und wenn er den Verweisbereich mit der Maus wieder verlsst. Dazu bentigt die
Funktion zwei Parameter: die wievielte Grafik in der Datei ausgetauscht werden soll (Parameter
Bildnr), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Parameter Bildobjekt). Die Funktion kommt dann mit einer einzigen Anweisung aus. Diese Anweisung ersetzt das vorhandene Bild durch das neue. Beachten Sie hier den wichtigen Zusammenhang: das dynamische Ersetzen einer Grafik ist nur mglich, wenn fr die neue Grafik zuvor eine
Instanz des Grafikobjekts erzeugt wurde. Im Beispiel geschah dies ja ganz am Anfang des Scripts.

Grafische Verweise mit Event-Handlern fr Mausbewegungen des Anwenders

Damit der gewnschte Effekt zustande kommt, mssen Sie in der HTML-Datei Grafiken als
Verweise definieren. Im einleitenden Verweis-Tag werden die Event-Handler onMouseOver=
und onMouseOut= notiert. Bei onMouseOver= (wenn der Anwender mit der Maus ber den
verweissensitiven Bereich, hier die Grafik, fhrt) wird die im Script-Bereich definierte Funktion

632

Kapitel 19: JavaScript Beispiele

Bildwechsel() aufgerufen, ebenso bei onMouseOut= (wenn der Mauszeiger den verweissensi-

tiven Bereich wieder verlsst).

Beim Aufruf von Bildwechsel() werden jeweils die beiden bentigten Parameter bergeben.
Zhlen Sie dazu die referenzierten Grafikdateien in der HTML-Datei, aber fangen Sie bei 0 an zu
zhlen, d.h. 0 fr die erste Grafik in der Datei, 1 fr die zweite Grafik usw. bergeben Sie den
Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind in der gesamten
HTML-Datei keine anderen als die dynamisch zu tauschenden Grafiken referenziert. Deshalb
wird im ersten Fall 0 (erste Grafik der Datei) bergeben, im zweiten Fall 1 (zweite Grafik der
Datei).
Beim zweiten Parameter bergeben Sie den Objektnamen fr das gewnschte Grafikobjekt. Das
ist einer der Namen, die Sie am Anfang des Script-Bereichs vergeben haben. Im Beispiel wird im
ersten Fall z.B. Highlight1 bei onMouseover bergeben, und Normal1 bei onMouseout.

19.8

Aufenthaltsdauer auf Web-Seite anzeigen

Das Beispiel auf dieser Seite zeigt in einem kleinen Feld laufend an, wie viele Minuten und
Sekunden seit dem Aufruf der Seite verstrichen sind. Gedacht ist die Anzeige des Feldes vor allem
fr HTML-Dateien, die innerhalb eines Frame-Fensters stndig angezeigt bleiben, etwa in einem
Frame-Fenster mit einem Logo oder mit Verweisen. In solchen Fllen luft die Uhr whrend der
gesamten Besuchszeit, die der Anwender auf den Seiten verbringt. Man mag das als eine
berflssige Spielerei abtun. Aber angenommen, es wird etwas angezeigt, wobei der Anwender
schnell die teure Online-Zeit vergisst, etwa ein Spiel oder ein Chat-Fenster, dann kann eine solche kleine Erinnerung in Form einer laufenden Zeituhr durchaus ntzlich sein.

19.9: Im linken Frame tickt die Uhr und zeigt an, wie lange der Aufenthalt schon dauert.

Quelltext mit Erluterungen

Das Beispiel zeigt die HTML-Datei, in der das JavaScript und die Zeitanzeige stehen. Im Anzeigebeispiel ist diese Datei in ein Frameset eingebunden.

19.8 Aufenthaltsdauer auf Web-Seite anzeigen

633

<html>
<head>
<title>Aufenthaltsdauer auf Web-Seite anzeigen</title>
<script type="text/javascript">
<!-var Jetzt = new Date();
var Start = Jetzt.getTime();
function ZeitAnzeigen() {
var absSekunden = Math.round(ZeitBerechnen());
var relSekunden = absSekunden % 60;
var absMinuten = Math.abs(Math.round(absSekunden-30/60));
var anzSekunden ="" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
var anzMinuten ="" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
window.document.Anzeige.Zeit.value = anzMinuten + ":" + anzSekunden;
window.setTimeout(ZeitAnzeigen(),1000);
}
function ZeitBerechnen() {
var Immernoch = new Date();
return((Immernoch.getTime() - Start)/1000);
}
// -->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000"
onLoad="window.setTimeout(ZeitAnzeigen(),1000)">
<form name="Anzeige" action="">
<input size="7" name="Zeit" value="00:00">
</form>
<p>viel Spa&szlig; im rechten Frame-Fenster!</p>
</body>
</html>

Startzeit ermitteln
Beim Einlesen der Datei wird zunchst der aktuelle Zeitpunkt ermittelt. Dieser Zeitpunkt dient
als Startzeit der Anzeige. Mit Jetzt = new Date() wird ein neues Datumsobjekt mit dem aktuellen Zeitpunkt in der Variablen Jetzt gespeichert. Mit Jetzt.getTime wird eine absolute Zahl
in Millisekunden ermittelt, die in der Variablen Start gespeichert wird.

Funktion zur Zeitanzeige erstmals aufrufen

Im einleitenden <body>-Tag steht im Beispiel der erste Aufruf der Funktion ZeitAnzeigen(),
die die Zeit anzeigt und die Anzeige jede Sekunde aktualisiert. Der erste Aufruf erfolgt nach einer
Sekunde. Dazu wird der Funktionsaufruf in die setTimeout()-Methode mit einer Verzgerungszeit von 1000 Millisekunden (1 Sekunde) eingebettet.

634

Kapitel 19: JavaScript Beispiele

Im Dateikrper steht dann ein Formular, das nur aus einem einzigen kleinen Eingabefeld besteht. Dieses Eingabefeld wird als Ausgabefeld fr die Zeitanzeige zweckentfremdet. Es wird mit
dem Wert 00:00 vorbelegt, damit auch in der ersten Sekunde schon etwas in dem Feld steht.

Zeit anzeigen und Anzeige laufend aktualisieren

Die Funktion ZeitAnzeigen(), die fr die laufende Zeitanzeige verantwortlich ist, ruft zunchst
die Unterfunktion ZeitBerechnen() auf. Diese Funktion erzeugt bei jedem Aufruf ein neues
Datumsobjekt mit dem aktuellen Zeitpunkt. Das Ergebnis wird in der Variablen Immernoch gespeichert. Zurckgegeben wird jedoch nicht der aktuelle Zeitpunkt, sondern die Differenz zwischen dem aktuellen Zeitpunkt und dem Startzeitpunkt, der beim Einlesen der Datei ermittelt
wurde. Der Rckgabewert erfolgt in Sekunden. Da beim Datumsobjekt intern in Millisekunden
gerechnet wird, wird der Wert durch 1000 geteilt, um Sekunden zu erhalten. Dabei knnen
jedoch Bruchzahlen zustande kommen. Um eine glatte Sekundenzahl zu erhalten, wendet die
aufrufende Funktion ZeitAnzeigen() die Methode Math.round() an.
Die absolute Anzahl der vergangenen Sekunden steht dann in der Variablen absSekunden. Von
dem darin gespeicherten Wert werden alle folgenden Werte abgeleitet. Mit Math.round
((absSekunden-30)/60) wird ermittelt, wie viele Minuten die Sekundenzahl bereits impliziert.
Wenn die Sekundenzahl beispielsweise 200 lautet, sind darin 3 Minuten (180 Sekunden)
enthalten. Dieser Wert wird in der Variablen absMinuten gespeichert. Da Opera 5.12 in den
ersten 30 Sekunden als Ergebnis der Operation -0 zurckliefert, wird zur Unterdrckung des
Minuszeichens mit Math.abs der absolute Betrag des Wertes ermittelt. Der Restwert an
Sekunden, also bei 200 und 180 etwa der Wert 20, wird mit der Modulo-Division absSekunden
% 60 in der Variablen relSekunden gespeichert. Im Falle von 200 steht dann also in absMinuten
der Wert 3 und in relSekunden der Wert 20.
Um die Anzeige der Minuten und Sekunden fr die Ausgabe ordentlich zu formatieren, werden
Zeichenketten erzeugt, die in den Variablen anzSekunden und anzMinuten gespeichert werden.
Wenn eine Minuten- oder Sekundenzahl einstellig ist, bekommt sie eine 0 vorangestellt.
Mit der Zuweisung an window.document.Anzeige.Zeit.value wird die ermittelte und formatierte Zeit anschlieend in das Formularfeld geschrieben, das zur Zeitanzeige dient. Damit die
Zeitanzeige weiterluft, ruft sich die Funktion ZeitAnzeigen() am Ende mit einer Verzgerungszeit von 1000 Millisekunden, also einer Sekunde, selbst wieder auf. Dadurch wird der
gesamte Vorgang wiederholt.

19.9

Verweisliste als Auswahlliste

In diesem Beispiel wird beschrieben, wie Sie eine Auswahlliste eines HTML-Formulars als praktische Alternative fr lange Listen mit Verweisen benutzen knnen. Die Auswahlliste wird dabei
in Form einer kleinen Aufklappliste realisiert, die in einem eigenen schmalen Frame-Fenster
platziert ist. Das nimmt kaum Platz in Anspruch, und trotzdem steht dem Anwender in jeder
Situation eine Liste mit Verweisen zur Verfgung.

19.9 Verweisliste als Auswahlliste

635

19.10: Die Auswahl eines Listenpunktes fhrt einen Sprung zur gewhlten Seite aus.

Quelltext mit Erluterungen

Das Beispiel zeigt die HTML-Datei, die das Frameset definiert, und die Datei, die im oberen,
schmalen Frame-Fenster angezeigt wird. In dieser Datei ist die Auswahlliste und das JavaScript
zum Steuern der Auswahlliste enthalten.
Beispiel Datei mit dem Frameset:
<html>
<head>
<title>Verweisliste als Auswahlliste</title>
</head>
<frameset rows="40,*" border="0" frameborder="0" framespacing="0">
<frame src="verweisliste2.htm" name="oben" marginheight="3" marginwidth="10">
<frame src="../verweisliste.htm" name="unten">
</frameset>
</html>

Beispiel Datei verweisliste2.htm:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function Go(x) {
if(x == "nothing") {
document.forms[0].reset();
document.forms[0].elements[0].blur();
return;
}
else if(x == "end")

636

Kapitel 19: JavaScript Beispiele

top.location.href = parent.frames[1].location;
else {
parent.frames[1].location.href = x;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE">
<form action=""><select size=1 name="Auswahl"
onChange="Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].val
ue)"
style="width:250px; background-color:#FFFFE0; font-size:9pt; fontfamily:Arial,sans-serif;"
width="250">
<option value="nothing">[ bitte auswhlen! ]</option>
<option value="nothing">------------------------</option>
<option value="../verweisliste.htm">Verweisliste als Auswahlliste</option>
<option value="nothing">------------------------</option>
<option value="../../../editorial/index.htm">Editorial</option>
<option value="../../../intro/index.htm">Einfhrung</option>
<option value="../../../html/index.htm">HTML</option>
<option value="../../../css/index.htm">CSS Stylesheets</option>
<option value="../../../xml/index.htm">XML/DTDs</option>
<option value="../../../javascript/index.htm">JavaScript/DOM</option>
<option value="../../../dhtml/index.htm">Dynamisches HTML</option>
<option value="../../../cgiperl/index.htm">CGI/Perl</option>
<option value="nothing">------------------------</option>
<option value="end">Beenden
</select></form>
</body>
</html>

Frameset definieren
Da die Auswahlliste im Beispiel whrend der Anzeige der Web-Seite stndig eingeblendet sein
soll, wird ein Frameset definiert. Es besteht aus zwei Fenstern, nmlich einem schmalen Streifen
im oberen Bereich des Browser-Fensters und einem Hauptfenster fr die Anzeige. Das obere
Fenster, in dem die Auswahlliste platziert werden soll, ist 40 Pixel hoch, nimmt also nur wenig
Platz in Anspruch.
Im oberen Frame-Fenster wird beim Aufruf die Datei verweisliste2.htm angezeigt. Diese Datei
wird die Auswahlliste enthalten. Im unteren Fenster wird im Beispiel die Datei ../verweisliste.htm
angezeigt. Das knnte beispielsweise die Titelseite Ihres Web-Projekts sein.

19.9 Verweisliste als Auswahlliste

637

Auswahlliste definieren
In der Datei verweisliste2.htm wird innerhalb des Dateikrpers nichts anderes als ein Formular
mit einer Auswahlliste definiert. Die einzelnen Auswahlmglichkeiten stellen die Verweise dar.
Es gibt im Beispiel drei Formen, wie so eine Auswahlmglichkeit aussieht.
<option value="datei1.htm">Erste Datei
Eine solche Auswahlmglichkeit definiert Daten, die von JavaScript spter als Verweis interpretiert werden. Hinter dem Attribut value= steht das gewnschte Verweisziel. Hinter dem
<option>-Tag steht der Verweistext, der in der Auswahlliste erscheinen soll.
<option value="datei1.htm">Erste Datei oder
<option value="nothing">[ Titel ]

Mit solchen Eintrgen werden Auswahlmglichkeiten definiert, die in der Liste erscheinen,
aber keine Wirkung haben sollen. Das knnen in lngeren Listen zum Beispiel TrennlinienEintrge sein. Auch die erste Auswahlmglichkeit der Liste muss so definiert werden, denn sie
stellt die Listenberschrift dar. Bei solchen Eintrgen notieren Sie einfach hinter dem Attribut value= den Wert nothing.
<option value="end">Beenden
Mit einem solchen Eintrag, der sinnvollerweise die letzte Auswahlmglichkeit darstellt, knnen Sie bewirken, dass die Auswahlliste beendet wird. Notieren Sie dazu hinter dem Attribut
value= den Wert end. Wenn Sie kein Beenden der Auswahlliste ermglichen wollen, lassen
Sie einen solchen Eintrag einfach weg.
Entscheidend zum Verarbeiten der Auswahlliste sind die Angaben im einleitenden <select>Tag. Dort wird der Event-Handler onChange= notiert, der das Ausfhren von JavaScript-Code
ausfhrt, sobald der Anwender einen neuen Eintrag in der Auswahlliste ausgewhlt. Wenn dieses
Ereignis eintritt, wird im Beispiel die Funktion Go() aufgerufen. Dazu wird der Wert (value)
des ausgewhlten Listeneintrags als Parameter bergeben. Es handelt sich um den Wert, der entweder ein Verweisziel oder eines der vereinbarten Schlsselwrter nothing oder end ist.

Auswahl verarbeiten
Im Dateikopf steht die Funktion Go(), die den ausgewhlten Eintrag als Parameter bergeben
bekommt und verarbeitet. Die Funktion unterscheidet die drei Flle nothing, end oder Verweisziel und fhrt abhngig davon entsprechende Anweisungen aus.
Wenn ein Eintrag mit dem Wert nothing ausgewhlt wurde, wird die Auswahlliste zurckgesetzt (reset()). Der erste Eintrag, also der berschrifteneintrag der Liste, wird wieder angezeigt.
Der Auswahlbalken wird aus der Liste bis zur nchsten Auswahl entfernt (blur()).
Lautet der Eintrag end, wird einfach das aktuelle Frame-Fenster, also das mit der Auswahlliste,
beendet. Dazu wird der Inhalt des Hauptframe-Fensters zum Inhalt des gesamten BowserFensters gemacht (top.location.href = parent.frames[1].location).
In allen anderen Fllen wird der bergebene Wert als Verweis interpretiert. Mit der Zuweisung
des bergebenen Werts an parent.frames[1].location.href wird ein Verweis ausgefhrt,
der das ausgewhlte Verweisziel im Hauptframe-Fenster anzeigt. Auch in diesem Fall wird die
Auswahlliste zurckgesetzt (reset()). Der erste Eintrag, also der berschrifteneintrag der Liste,

638

Kapitel 19: JavaScript Beispiele

wird wieder angezeigt. Der Auswahlbalken wird aus der Liste bis zur nchsten Auswahl entfernt
(blur()).
Beachten Sie: Im HTML-Standard ist die Verwendung des Attributes width= fr das <select>Tag nicht erlaubt. Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften fr dieses HTMLElement, akzeptiert dagegen das Attribut width= zur Bestimmung der Breite.
Im HTML-Standard ist auch die Verwendung der Attribute border=, frameborder= und
framespacing= fr das <frameset>-Tag nicht erlaubt. Da die Browser jedoch den Standard
nicht vollstndig interpretieren, wurden diese Attribute im Interesse des Layouts im obigen Beispiel trotzdem verwendet.

19.10 Fehlerbehandlung mit onError

Der Sprachumfang von JavaScript erlaubt es mittlerweile, umfangreiche Anwendungen zu
erstellen. Dynamische Web-Seiten enthalten teilweise umfangreiche Scripts, die in ihren
Ablufen auf etliche Variablen zurckgreifen. Dabei knnen sich leicht unkontrollierbare Werte
und Zustnde im Programmablauf einschleichen, zum Beispiel auch durch nicht einkalkuliertes
Anwenderverhalten. Seit der JavaScript-Version 1.1 steht Ihnen mit dem Event-Handler
onError ein Werkzeug zur zur Verfgung, um innerhalb des Scripts Fehler abzufangen und
gezielt darauf zu reagieren.
Zur Unterdrckung von Fehlermeldungen, die zur Laufzeit eines Scripts entstehen, notieren Sie
im Kopf der Datei window.onerror=. Als Wert weisen Sie den Namen einer Funktion zu, welche die Fehlerbehandlung ausfhrt. Der Rckgabewert der Funktion muss true sein. Damit
haben Sie Ihre eigene Fehlerbehandlung.
Der Fehlerbehandlungs-Funktion knnen Sie bis zu 3 optionale Parameter bergeben:
1. Nachricht: enthlt die Fehlerbeschreibung des Fehlers
2. Datei: enthlt den URI der fehlerverursachenden Datei
3. Zeile: enthlt die Zeile, in der der Fehler auftritt
Diese Art der Fehlerkontrolle knnen Sie fr Netscape 4.x und MS Internet Explorer ab Version
4.x verwenden. Netscape 6 ist leider nicht in der Lage, die Parameter vollstndig zu interpretieren. Er speichert jeweils im ersten Parameter das auslsende Event-Objekt. Opera 5.12 interpretiert den an das Fensterobjekt gebundenen Event-Handler window.onError nicht.
Bercksichtigen Sie, dass Sie nur logische Fehler berwachen und unterdrcken knnen, die
whrend der Laufzeit der Scripts entstehen. Syntaxfehler, wie z.B. fehlende Klammern usw., sind
damit nicht abfangbar.

Quelltext mit Erluterungen

Das Beispiel zeigt eine einfache Variante der Fehlerbehandlung. Am Ende des JavaScript-Blocks
wird eine Funktion aufgerufen, die nicht existiert.

19.10 Fehlerbehandlung mit onError

639

<html><head><title>Test</title>
<script type="text/javascript">
<!-window.onerror = meinFehler;
function meinFehler(Nachricht,Datei,Zeile)
{
Fehler = "Fehlermeldung:\n"+ Nachricht+"\n"+Datei+"\n"+Zeile;
zeigeFehler();
return true;
}
function zeigeFehler()
{
alert(window.Fehler)
}
nichtda();
//-->
</script>
</head><body>
<a href="javascript:zeigeFehler()">Fehler</a><br>
</body></html>

Beim Einlesen der Datei wird mit window.onerror = meinFehler angewiesen, im Fehlerfall die
Funktion meinFehler() aufzurufen. Dieses Ereignis tritt im Beispiel am Ende des ScriptBereichs ein, wo versucht wird, die nichtvorhandene Funktion nichtda() aufzurufen.

Die Funktion meinFehler()

Die Funktion speichert mit Zeichenkettenverknpfung die automatisch bergebenen Parameter
in der Variablen Fehler. Dann ruft sie im Beispiel die Funktion zeigeFehler() auf. Diese
Funktion dient im Beispiel lediglich dazu, den Fehler zu Demonstrationszwecken auszugeben.
Mit return true wird erreicht, dass der Fehler im Browser nicht angezeigt wird. Mit dem Rckgabewert false wrden Sie bewirken, dass der Browser den Fehler anmeckert.
In einer komplexeren Anwendung htte die Funktion meinFehler() also alle Mglichkeiten,
auf den Fehler zu reagieren. Sie knnte beispielsweise die Zeichenkette des bergebenen Parameters Nachricht untersuchen, um herauszufinden, welcher Fehler genau aufgetreten ist. Je
nach Situation knnte eine solche Funktion bewirken, dass das Script zu einem frheren Punkt
im Programmablauf zurckspringt, Variablen zurcksetzt, den Cursor in ein bestimmtes Formularfeld setzt usw.

640

Kapitel 19: JavaScript Beispiele

19.11 Fehlerbehandlung mit dem Statement try..catch

Mit Hilfe der Fehlerbehandlung mit dem Event-Handler onError knnen Sie in einem JavaScript Fehler abfangen, nachdem diese aufgetreten sind. Mit der hier vorgestellten Methode
knnen Sie jedoch bereits im Vorfeld verhindern, dass in kritischen Situationen berhaupt Fehler auftreten. Dazu steht seit der JavaScript-Version 1.5 das try..catch-Statement zur Verfgung. Es erlaubt Ihnen, Variablen und Werte zu berprfen und je nach Ergebnis zu reagieren.
Dieses Statement wird vom MS Internet Explorer ab Version 5.0, von Netscape ab Version 6.0
und von Opera ab Version 5 interpretiert.

Quelltext mit Erluterungen

Das Beispiel ist so konstruiert, dass es auf eine Variable zugreift, die zunchst noch gar nicht
existiert. Das wrde zu einem Fehler fhren. Das Script wei jedoch, dass dieser Fehler auftreten kann, und berprft deshalb mit dem try..catch-Statement laufend, ob die Variable schon
existiert. Erst wenn die Variable existiert, wird die berwachung beendet.
<html><head><title>Test</title>
<script type="text/javascript">
<!-setTimeout("x=3",200);
function zeigeErgebnis(Zaehler,Ergebnis)
{
alert("Nach "+(Zaehler)+ " Durchlufen existierte x.\nDie Zahl x ist
"+Ergebnis+".");
}
function teste_x(Zaehler)
{
try {
if (x==2) throw "richtig";
else if (x==3) throw "falsch";
}
catch (e) {
if (e=="richtig") {zeigeErgebnis(Zaehler,e);return;}
else if (e=="falsch") {zeigeErgebnis(Zaehler,e);return;}
}
finally { Zaehler++; }
setTimeout('teste_x('+(Zaehler)+')',30);
}
teste_x(0)
//-->
</script>
</head><body>
</body></html>

19.11 Fehlerbehandlung mit dem Statement try..catch

641

Im Dateikopf der Datei ist ein Script-Bereich notiert. Darin werden die erste und die letzte
Anweisung sofort beim Einlesen ausgefhrt. Die restlichen Anweisungen stehen in Funktionen.

Die Variable x
Whrend des Ladens der Datei wird eine Variable x zeitverzgert mit dem Wert 3 belegt. Dazu
dient die Methode setTimeout(). Die Variable ist also erst nach 200 Millisekunden verfgbar.
Jeder Versuch, vorher auf diese Variable zuzugreifen, wrde zu einem Fehler fhren. Die nchste
Anweisung, die im Beispiel direkt ausgefhrt wird, ist die letzte im Script-Bereich, nmlich
teste_x(0). Damit wird die Funktion teste_x() aufgerufen, die oberhalb notiert ist.

Die Funktion teste_x()

Diese Funktion versucht, auf die Variable x zuzugreifen. Da zum Zeitpunkt des Aufrufes der
Funktion jedoch noch nicht sicher ist, ob die Variable x bereits existiert, ist innerhalb der Funktion zur Vermeidung von Fehlermeldungen das try..catch-Statement notiert. Beim Aufruf
erhlt die Funktion teste_x() einen Parameter namens Zaehler bergeben. Das dient im
Beispiel zu Kontrollzwecken.

Aufbau des try..catch-Statements

Das try..catch-Statement hat generell folgenden Aufbau: Nach dem Schlsselwort try (try =
versuchen) wird eine ffnende geschweifte Klammer, gefolgt von der zu prfenden Bedingung,
notiert. Je nach Erfordernissen knnen Sie dann mit throw (throw = auswerfen) eigene Fehler
definieren. Die throw-Definition ist jedoch optional. Anschlieend folgt eine schlieende geschweifte Klammer, die den try-Block beendet.
Daran anschlieend notieren Sie das Schlsselwort catch (catch = abfangen). catch hat Funktions-Charakter und erwartet einen Parameter e. Die Variable e ist erforderlich, da Sie ber diese
Variable letztlich die Reaktion des Scripts auf den aktuellen Zustand kontrollieren. Den Namen
der Variablen knnen Sie frei whlen (der Name muss also nicht e sein). Innerhalb des Funktionsblocks von catch(), der wie blich in geschweiften Klammern steht, knnen Sie die mit
throw definierten Fehler auswerten und darauf reagieren.
Zuletzt knnen Sie noch das Schlsselwort finally notieren. In dem davon abhngigen
Anweisungsblock knnen Sie weitere Anweisungen notieren. Diese Anweisungen werden unabhngig von der Fehlerbehandlung in jedem Fall ausgefhrt.

Anwendung des try..catch-Statements im Beispiel

Im ersten Teil der Anweisung wird geprft, ob die Variable x den Wert 2 oder 3 besitzt. Je nach
Ergebnis werden mit throw verschiedene Fehlerwerte definiert. Hat x den Wert 2, so wird der
Fehler mit dem Wert richtig generiert. Hat sie den Wert 3, so erhlt der Fehler den Wert
falsch. Weitere Fehlervarianten werden nicht behandelt.
Im ersten Durchlauf existiert die Variable x im Beispiel noch gar nicht, da sie ja erst nach 200
Millisekunden auftaucht. Sie kann damit weder den Wert 2 noch den Wert 3 besitzen. In der
nachfolgenden Fehlerbehandlungsroutine catch(e) wird geprft, ob einer der definierten Fehler, also richtig oder falsch, aufgetreten ist. Zunchst ist das offensichtlich nicht der Fall. Die

642

Kapitel 19: JavaScript Beispiele

Anweisungen, die von den Fehlerwerten richtig und falsch abhngig sind, werden deshalb
nicht ausgefhrt. Die finally-Anweisung wird dagegen in jedem Fall ausgefhrt. Sie bewirkt im
Beispiel, dass der bergebene Parameter Zaehler um 1 erhht wird.

Gesamtkontrolle
Am Ende ruft sich die Funktion teste_x() mit setTimeout() um 30 Millisekunden zeitverzgert selbst wieder auf. So behlt sie die Kontrolle ber das Geschehen, bis ein definierter Zustand
eintritt. Der Parameter Zaehler wird dabei mit Hilfe einer Zeichenkettenverknpfung bergeben.
Interessant wird es, wenn der Zeitpunkt erreicht ist, zu dem die Variable x existiert. In diesem
Fall tritt einer der vordefinierten Flle ein. Da x den Wert 3 besitzt, wird der throw-Fehler mit
dem Wert falsch generiert (dies soll im Beispiel einfach zeigen, dass throw zur Erzeugung von
Werten gedacht ist, die durchaus und oft auch Fehlerzustnde bezeichnen). Im nachfolgenden
catch(e)-Block fhrt dies dazu, dass die Funktion zeigeErgebnis() aufgerufen wird. Im
Beispiel wird fr beide definierten throw-Werte die gleiche Funktion aufgerufen. Sie knnen an
dieser Stelle jedoch auch vllig verschiedene Anweisungen notieren. Jede dieser Fehlerbehandlungsroutinen bricht gleichzeitig die Funktion teste_x() mit return ab, da x ja nun existiert
und der kritische Zustand beendet ist.

Ausgabe des Ergebnisses

Die Funktion zeigeErgebnis() erhlt als Parameter die Variablen Zaehler und Ergebnis
bergeben. In der Variablen Zaehler ist die Anzahl der Durchlufe bis zur Existienz der Variablen x gespeichert und in der Variablen Ergebnis das Resultat der Fehlerbehandlung. Mit
alert() wird im Beispiel zur Kontrolle ausgegeben, wie viele Durchlufe bentigt wurden und
was fr ein Ergebnis erreicht wurde.
Die Ausgabe zeigt brigens sehr deutlich, wie unterschiedlich die Browser mit setTimeout()
umgehen. Whrend der MS Internet Explorer bei Tests im Schnitt fnf Durchlufe bentigte,
brauchte Netscape 6.x im Schnitt zwei Durchlufe und Opera vier.

Anwendungsflle
Prfungen mit dem try..catch-Statement sind z.B. dann sinnvoll, wenn Sie wie im Beispiel
mit setTimeout() zeitversetzte Aktionen ausfhren und davon abhngige Anweisungen ausfhren wollen. Ebenfalls sinnvoll ist das Statement, wenn Sie z.B. auf Variablen oder Funktionen
zugreifen wollen, die in anderen Frame-Fenstern notiert sind, wobei das Script nicht wissen
kann, ob die Datei im anderen Frame-Fenster, in der das entsprechende Script notiert ist, bereits
eingelesen oder berhaupt die dort aktuell angezeigte Seite ist.

19.12 nderungen der Fenstergre berwachen

Ein Verndern der Fenstergre durch den Anwender hat bei Netscape 4.x gelegentlich die
Folge, dass dieser gesetzte Variablen, dynamische Positionierungen oder Stylesheet-Angaben
vergisst. Es ist jedoch mglich, nderungen der Fenstergre zu berwachen und damit gezielt

19.12 nderungen der Fenstergre berwachen

643

auf die nderung zu reagieren. Auch beim MS Internet Explorer oder bei Netscape 6.x ist es
gelegentlich sinnvoll, auf nderungen reagieren zu knnen.
Fr die berwachung der Fenstergre wird der Event-Handler onResize verwendet. Dieser
Event-Handler tritt ein, wenn der Anwender die Fenstergre ndert. Sie knnen diesem EventHandler eine Funktion zuordnen, die bei Grennderungen ausgefhrt wird.
Beachten Sie, dass Sie mit diesem Beispiel nur den Neuaufbau der Seite erreichen. Eventuell
genderte Variablen und Werte gehen dabei verloren. In Opera 5.12 ist es nicht mglich, die
nderung der Fenstergre mit dem Event-Handler onResize zu berwachen.

19.11: Das Beispielscript gibt die aktuelle Fenstergre bei jeder Grennderung neu aus.

Quelltext mit Erluterungen

Im Beispiel wird die Fenstergre auf nderungen hin berwacht. Sobald sie gendert wird,
erfolgt ein Neuaufbau der Seite und die genderten Gren werden jeweils mit document.write()
zur Kontrolle in das Dokument geschrieben.
<html><head>
<title>Grennderung berwachen</title>
<script type="text/javascript">
<!-function Fensterweite()
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return
document.body.offsetWidth;
else return 0;
}
function Fensterhoehe()
{
if (window.innerHeight) return window.innerHeight;
else if (document.body && document.body.offsetHeight) return
document.body.offsetHeight;
else return 0;
}

644

Kapitel 19: JavaScript Beispiele

function neuAufbau()
{
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
window.history.go(0);
}
/*berwachung von Netscape initialisieren*/
if(!window.Weite && window.innerWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!-/*berwachung von MS Internet Explorer initialisieren*/
if(!window.Weite && document.body && document.body.offsetWidth)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
//-->
</script>
<div id="Beispiel" style="position:absolute;top:100px;left:100px;border:solid 1px
#000000;">
Text
</div>
<script type="text/javascript">
<!-document.write("Weite: "+Weite +" Hhe: "+Hoehe);
//-->
</script>
</body></html>

Die Funktionen Fensterweite() und Fensterhoehe()

Diese beiden Funktionen dienen dazu, die Fenstergre zu ermitteln. Die Funktion Fensterweite() prft, ob der Browser die Eigenschaft window.innerWidth kennt (das ist bei Netscape
der Fall, nicht aber beim Internet Explorer). Ist dies der Fall, so wird der Wert, der in dieser
Eigenschaft gespeichert ist, zurckgegeben. Kennt der Browser diese Eigenschaft nicht, so wird
geprft, ob er das Objekt document.body kennt und ob dieses Objekt die Eigenschaft document.body.offsetWidth kennt (das ist beim Internet Explorer der Fall, nicht aber bei Net-

19.12 nderungen der Fenstergre berwachen

645

scape). Tritt dieser Zustand ein, so wird der Wert der Eigenschaft document.body.
offsetWidth zurckgegeben. Sollte der Browser auch diesen Zweig der Anweisung nicht
verfolgen knnen, wird 0 zurckgegeben.
Die Funktion Fensterhoehe() arbeitet analog und verwendet die Eigenschaften window.
innerHeight bzw. document.body.offsetHeight.

berwachung fr Netscape initialisieren

Beim Laden der Datei existiert die Variable Weite noch nicht. Da eine globale Variable immer
eine Eigenschaft bzw. ein Objekt des Fensterobjektes ist, kann mit window.Weite geprft werden, ob diese existiert. Netscape kennt zudem die Eigenschaft window.innerWidth. Deshalb
arbeitet er die entsprechende Anweisung ab. Zuerst wird die berwachung des Event-Handler
onResize initialisiert (zum Verstndnis siehe auch die allgemeine Verwendung des eventObjekts). onResize wird ausgelst, sobald sich die Fenstergre ndert, und ruft dann die
Handler-Funktion neuAufbau() auf. Anschlieend wird in der Variablen Weite der Rckgabewert der Funktion Fensterweite() und in der Variablen Hoehe der Rckgabewert der Funktion Fensterhoehe() gespeichert. Damit stehen beide Variablen fr weitere Verarbeitungsaufgaben zur Verfgung.

berwachung fr den MS Internet Explorer initialisieren

Die berwachung fr den Internet Explorer gestaltet sich hnlich. Im Unterschied zum Netscape
Navigator bentigt er jedoch das Objekt document.body. Dieses Objekt steht jedoch erst nach
dem Laden des Body-Tags zur Verfgung. Deshalb ist der entsprechende Scriptbereich nicht im
Dateikopf, sondern im body-Bereich des Dokuments notiert. Auch Netscape 6 kennt das Objekt
document.body und dessen Eigenschaften. Er fhrt jedoch diesen Scriptbereich nicht aus, da
dieser Browser zum Laufzeitpunkt die Variable Weite bereits kennt.

Die Handler-Funktion neuAufbau()

Die Funktion neuAufbau() wird aufgerufen, wenn der Event-Handler onResize aktiv wird. Die
Funktion vergleicht den Wert der Variablen window.Weite mit dem Rckgabewert der Funktion Fensterweite() und den Wert der Variablen window.Hoehe mit dem Rckgabewert der
Funktion Fensterhoehe(). Daran erkennt sie, ob sich die Fenstergre verndert hat. In
diesem Fall wird durch die Verwendung der Methode history.go() ein Neuaufbau der Seite
veranlasst, ohne dass diese vom Server erneut geladen werden muss. Wird der Event-Handler
onResize aufgerufen, ohne dass eine reale Vernderung der Fenstergre stattgefunden hat
das kann gelegentlich passieren , geschieht nichts, da die Bedingung zum Neuladen nicht erfllt
ist.

647

20 JavaScript: Objekt-Referenz

Dieses Kapitel stellt die vordefinierten Objekte von JavaScript sowie ihre Eigenschaften und
Methoden vor. Die Nummerierung vor den Verweisen symbolisiert die JavaScript-Objekt-Hierarchie und hat sonst keine weitere Bedeutung.
1
1.1
1.2
1.2.1
1.2.2
1.2.3
1.2.3.1
1.2.4
1.2.5
1.2.6
1.2.6.1
1.2.6.1.1
1.2.7
1.2.8
1.2.9
1.2.10
1.3
1.4
1.5
2
3
4
5
6
7
7.1
7.2
8
9
10
11

window
frames
document

HTML-Elementobjekte
node
all
style
anchors
applets
forms
elements
options
images
embeds
layers
links
event
history
location
Array
Boolean
Date
Function
Math
navigator
mimeTypes
plugins
Number
RegExp
Screen
string

Anzeigefenster
Frame-Fenster
Dokument im Anzeigefenster
alle HTML-Elemente des Dokuments
alle Knoten des Elementbaums
alle HTML-Elemente des Dokuments Microsoft
CSS-Attribute von HTML-Elementen
Verweisanker im Dokument
Java-Applets im Dokument
Formulare im Dokument
Formularelemente eines Formulars
Optionen einer Auswahlliste eines Formulars
Grafikreferenzen im Dokument
Multimedia-Referenzen im Dokument
Layer im Dokument Netscape
Verweise im Dokument
Anwenderereignisse
besuchte Seiten
URIs
Ketten von Variablen
Ja-Nein-Variablen
Datum und Uhrzeit
JavaScript-Funktionen
Berechnungen
Browser-Informationen
MimeType-Informationen
installierte Plug-Ins
numerische Werte
regulre Ausdrcke
Bildschirminformationen
Zeichenketten

648
20.1

Kapitel 20: JavaScript Objekt-Referenz

Hinweise zur Objekt-Referenz

20.1.1 Objekthierarchie
Es gibt zwei Gruppen von vordefinierten Objekten im klassischen JavaScript.
Die eine Gruppe ist diejenige, die das Browser-Fenster markiert durch das window-Objekt
zum Ausgangspunkt hat. Das Browser-Fenster ist der allgemeine Rahmen fr alles, was innerhalb davon angezeigt wird. Das, was innerhalb davon angezeigt wird, gilt als Dokument, markiert durch das document-Objekt. Letzteres ist wiederum fr das Document Object Model
DOM) das oberste Ausgangsobjekt. Und ausgehend vom document-Objekt gibt es leider zwei
verschiedene Objekt-Philosophien, die heute nebeneinander stehen: Im klassischen JavaScript enthlt ein Dokument nmlich bestimmte Elemente, auf die mit JavaScript zugegriffen
werden kann, zum Beispiel Grafiken, markiert durch das images-Objekt, oder Formulare,
markiert durch das forms-Objekt. Formulare wiederum bestehen aus Formularelementen
markiert durch das elements-Objekt. Im neueren Modell des Internet Explorers und auch
des DOM ist dagegen nicht nur der Zugriff auf solche bestimmten Elementtypen mglich,
sondern der Zugriff auf alle Elemente eines Dokuments nach Syntax des Internet Explorers
markiert durch das all-Objekt und nach DOM-Syntax markiert durch bestimmte Zugriffsmethoden des document-Objekts, durch die HTML-Elementobjekte und das node-Objekt.
Diese beiden widerstreitenden Modelle zwischen klassischem JavaScript und den neueren
Modellen sorgen leider fr viel Verwirrung. Die neueren Modelle sind zweifellos durchdachter und bieten dem JavaScript-Programmierer viel mehr Mglichkeiten. Doch die Jugendsnden von Netscapes klassischem JavaScript sind nun mal nicht so leicht aus der Welt zu
schaffen, und so bestehen die Modelle auf unabsehbare Zeit weiter nebeneinander.
Die zweite Gruppe von JavaScript-Objekten haben nichts direkt mit dem Geschehen im
Anzeigefenster zu tun, liefern aber wichtige andere Daten oder ausben Funktionen. Netscape
bezeichnet sie als core objects Kernobjekte). Typische Vertreter dieser zweiten Gruppe sind
etwa das Date-Objekt fr Datums- und Uhrzeitberechnungen, das navigator-Objekt fr
Informationen zum verwendeten Browser, oder das Array-Objekt zum Erzeugen von Serienvariablen. Auch bei dieser Gruppe gibt es ein paar hierarchische Beziehungen. So ist beispielsweise das plugins-Objekt ein Unterobjekt des navigator-Objekts.
Objekthierarchien werden in JavaScript stets dadurch ausgedrckt, dass die Objekte aneinandergereiht und durch Punkt getrennt werden. Typische Notationen sehen so aus wie window.
document.images.length. Dabei steht window fr das Bowser-Fenster, in dem das JavaScript
luft, document fr das in diesem Fenster angezeigte Dokument, images fr die Gesamtheit der
in dem Dokument enthaltenen Grafikreferenzen, und length fr eine Eigenschaft des imagesObjekts.
Abgesehen von dieser einfachen Grundregel haben viele Objekte jedoch ihre Besonderheiten. Bei
den Beschreibungen zu den jeweiligen Objekten wird darauf hingewiesen.

20.1.2 Objekt-Referenz verwenden

Jedes JavaScript-Objekt wird in dieser Referenz nach folgendem Schema beschrieben:

20.2 window

649

Allgemeines zur Verwendung

In diesem Abschnitt wird beschrieben, welche Voraussetzungen erfllt sein mssen, damit Sie
die Eigenschaften und Methoden des Objekts benutzen knnen. Lesen Sie diesen Abschnitt genau, wenn Sie mit dem Objekt noch nie gearbeitet haben.

Eigenschaften
In diesem Abschnitt werden die Eigenschaften eines Objekts beschrieben. Eine Eigenschaft eines
JavaScript-Objekts ist zum Beispiel window.location.href der URI der aktuell angezeigten
HTML-Datei. Die Werte von solchen Objekteigenschaften knnen Sie in jedem Fall auslesen. In
vielen Fllen knnen Sie die Werte auch ndern. In der Objekt-Referenz wird jeweils angegeben,
ob Sie eine gespeicherte Objekteigenschaft nur auslesen oder auch ndern knnen. Dazu werden
in dieser Objekt-Referenz folgende Signalisierungen benutzt:
Symbol

Bedeutung
Sie knnen den Wert der Eigenschaft auslesen, aber nicht ndern. Sie knnen den Wert
zum Beispiel in einer selbst definierten Variablen speichern. So knnen Sie beispielsweise
den URI der angezeigten HTML-Datei durch var Adresse = window.location.href in
einer Variablen namens Adresse speichern. Das heit, Sie weisen einer Variablen den
Wert der Objekteigenschaft zu. Die Variable knnen Sie nach Belieben weiterverarbeiten.
Sie knnen die Objekteigenschaft auslesen, ihr aber auch selbst einen neuen Wert zuweisen. So knnen Sie zum Beispiel den URI der angezeigten HTML-Datei durch window.
location.href = "http://selfhtml.teamone.de/" ndern. Das heit, Sie weisen der
Objekteigenschaft einen Wert zu. Im Beispiel hat das zur Folge, dass der Web-Browser
einen Sprung zu dem angegebenen URI ausfhrt.

Methoden
Methoden eines Objekts sind objektgebundene Funktionen, die eine Aktion ausfhren. So knnen Sie zum Beispiel mit document.write("<b>Ihr Web-Browser: <\/b>" + navigator.userAgent) dynamisch erzeugten, HTML-formatierten Text in das aktuelle Anzeigefenster
des Web-Browsers schreiben. Im Beispiel wird auf diese Weise der vom Anwender verwendete
Web-Browser-Typ ins Anzeigefenster geschrieben.

20.2

window

Eigenschaften
closed
defaultStatus
innerHeight
innerWidth
locationbar
menubar

(geschlossenes Fenster)
(Normalanzeige in der Statuszeile)
(Hhe des Anzeigebereichs)
(Breite des Anzeigebereichs)
(Adresszeile)
(Menleiste)

650

Kapitel 20: JavaScript Objekt-Referenz

name
outerHeight
outerWidth
pageXOffset
pageYOffset
personalbar
scrollbars
statusbar
status
toolbar

(Fenstername)
(Hhe des gesamten Fensters)
(Breite des gesamten Fensters)
(Fensterstartposition von links)
(Fensterstartposition von oben)
(Zeile fr Lieblingsadressen)
(Scroll-Leisten)
(Statuszeile)
(Inhalt der Statuszeile)
(Werkzeugleiste)

Methoden
alert()
back()
blur()
captureEvents()
clearInterval()
clearTimeout()
close()
confirm()
disableExternalCapture()
enableExternalCapture()
find()
focus()
forward()
handleEvent()
home()
moveBy()
moveTo()
open()
print()
prompt()
releaseEvents()
resizeBy()
resizeTo()
routeEvent()
scrollBy()
scrollTo()
setInterval()
setTimeout()
stop()

Unterobjekte
document
event
history
location

(Dialogfenster mit Infos)

(zurck in History)
(Fenster verlassen)
(Ereignisse berwachen)
(zeitliche Anweisungsfolge abbrechen)
(Timeout abbrechen)
(Fenster schlieen)
(Dialogfenster zum Besttigen)
(Fremdberwachung verhindern)
(Fremdberwachung erlauben)
(Text suchen)
(Fenster aktiv machen)
(vorwrts in History)
(Ereignis bergeben)
(Startseite aufrufen)
(Bewegen mit relativen Angaben)
(Bewegen mit absoluten Angaben)
(neues Fenster ffnen)
(ausdrucken)
(Dialogfenster fr Werteingabe)
(Ereignisse abschlieen)
(Gre verndern mit relativen Angaben)
(Gre verndern mit absoluten Angaben)
(Event-Handler-Hierarchie durchlaufen)
(Scrollen um Anzahl Pixel)
(Scrollen zu Position)
(zeitliche Anweisungsfolge setzen)
(Timeout setzen)
(abbrechen)

20.2 window

651

window: Allgemeines zur Verwendung

Das Objekt window (Fenster) ist das oberste Objekt der Objektfamilie fr alles, was im BrowserFenster angezeigt wird. ber das Objekt window knnen Sie das Dokumentfenster abfragen und
kontrollieren. Ferner knnen Sie neue Fenster definieren. Dabei knnen Sie auch die Fenstereigenschaften frei bestimmen.
Das aktuelle Fenster des Web-Browsers knnen Sie ber die Objekte window oder self ansprechen. Auf die Objekte window und self lassen sich alle Eigenschaften und Methoden des window-Objekts anwenden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-window.defaultStatus = "Meine Homepage";
//-->
</script>
</head><body>
</body></html>

Das Beispiel belegt die stndige Anzeige der Statuszeile des aktuellen Anzeigefensters mit dem
Wert "Meine Homepage". Dazu wird die Fenstereigenschaft defaultStatus aufgerufen. window
oder self knnen auch weggelassen werden. So hat window.moveTo(200,100) die gleiche
Wirkung wie moveTo(200,100). Der bersichtlichkeit halber ist es jedoch besser, den vordefinierten Objektnamen mit anzugeben. Auch Frame-Fenster innerhalb eines Framesets stellen aus
Sicht von JavaScript eigene Fenster dar. Lesen Sie dazu jedoch den Abschnitt ber das Objekt
frames. Sie knnen mit Hilfe von JavaScript nicht nur vorhandene Fenster ansprechen, sondern
auch neue Fenster erzeugen und diese mit Hilfe von Variablen ansprechen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function NeuFenster() {
MeinFenster =
window.open("datei2.htm", "Zweitfenster", "width=300,height=200,scrollbars");
MeinFenster.focus();
}
//-->
</script>
</head><body>
<a href="javascript:NeuFenster()">Neues Fenster</a>
</body></html>

Die Beispieldatei enthlt einen Verweis. Beim Anklicken dieses Verweises wird die JavaScriptFunktion NeuFenster() aufgerufen. Diese Funktion ffnet ein neues, kleines Browser-Fenster
und zeigt darin die Datei datei2.htm an. Einzelheiten zum ffnen neuer Fenster werden bei der
Methode open() beschrieben. Ein solches Fenster ist nach dem Erzeugen mit der Variablen ansprechbar, in der die Fensterinstanz gespeichert ist. Im Beispiel ist das die Variable MeinFenster. ber diesen Instanznamen knnen Sie alle Eigenschaften und Methoden des erzeugten
Fensters ansprechen. Ein Beispiel:
<a href="javascript:MeinFenster.close()">Fenster zumachen</a>

652

Kapitel 20: JavaScript Objekt-Referenz

Im Beispiel wird das zuvor geffnete Fenster beim Klicken auf den Verweis wieder geschlossen.
Zustndig dafr ist die Methode close(). Das Fenster wird dabei mit seinem Instanznamen angesprochen, im Beispiel also mit dem Namen der Variablen MeinFenster, mit der es zuvor
erzeugt wurde.
Bei der Variablen MeinFenster handelt es sich um eine globale Variable. Diese wurde erzeugt
durch eine Deklaration der Variablen ohne das Schlsselwort var. Die Deklaration als globale
Variable ermglicht es Ihnen, dieses Fenster auch auerhalb der erzeugenden Funktion anzusprechen.
Genau so, wie Sie vom Hauptfenster auf ein mit open() erzeugtes Zweitfenster zugreifen knnen, knnen Sie von einem solchen Zweitfenster auf das Hauptfenster zugreifen. Dazu gibt es
das Fenster-Objekt opener. Damit wird das Fenster angesprochen, von dem aus das aktuelle
Fenster geffnet wurde. ber das Objekt opener knnen Sie alle Eigenschaften und Methoden
des ffnenden Fensters ansprechen.
Testbeispiel (im Zweitfenster):
<a href="javascript:opener.close()">Hauptfenster zumachen</a>

Notieren Sie nach opener einen Punkt und danach die gewnschte Methode oder Eigenschaft.

closed
Speichert die Information, ob ein Fenster, das zum Beispiel mit open() neu geffnet wurde,
mittlerweile geschlossen wurde. Hat den Wert true, wenn das Fenster geschlossen wurde. Sinnvoll, um die Existenz eines Fensters abzufragen, bevor Anweisungen zum Verndern eines Fensters folgen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var InfoWin = window.open("datei1.htm", "Zweitfenster");
function CheckOpen() {
if(InfoWin.closed == true) alert("Fenster wurde geschlossen");
else alert("Fenster noch offen");
}
//-->
</script>
</head><body>
<a href="javascript:CheckOpen()">Fenster zu?</a>
</body></html>

Das Beispiel ldt beim Einlesen ein Zweitfenster mit einer anderen Datei datei1.htm. Beim Klicken auf den Verweis wird eine Funktion CheckOpen() aufgerufen, die ausgibt, ob das andere
Fenster noch offen ist oder nicht.

defaultStatus
Speichert den Inhalt der Statuszeile, der so lange angezeigt wird, wie kein besonderes Ereignis
eintritt (etwa das berfahren eines Verweises mit der Maus). Das Beispiel belegt beim Einlesen
der Datei die normale Anzeige der Statuszeile mit dem Wert Helmuts Homepage:

20.2 window

653

<html><head><title>Test</title>
<script type="text/javascript">
<!-window.defaultStatus = "Helmuts Homepage";
//-->
</script>
</head><body>
<p>Achten Sie auf die Statuszeile</p>
</body></html>

innerHeight
Speichert die Hhe des Anzeigebereichs eines Fensters. Sehr gut geeignet in Verbindung mit absolutem Positionieren von Elementen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-window.innerHeight = 300;
//-->
</script>
</head><body>
</body></html>

Das Beispiel setzt beim Einlesen der Datei den Anzeigebereich des Fensters auf eine Hhe von
300 Pixel fest. Beachten Sie beim Neufestsetzen der Fensterhhe die Bildschirmgre. Diese
knnen Sie mit dem Screen-Objekt ermitteln. Beachten Sie auch, dass der Anzeigebereich eines
Fensters um einiges kleiner sein muss als das Fenster selbst, da das Fenster in der Regel noch
Elemente wie Titelleiste, Menleiste usw. enthlt. Die absolute Hhe eines Fensters knnen Sie
mit outerHeight auslesen bzw. setzen.
Beachten Sie: Unter Opera 5.12 knnen Sie die Eigenschaft innerHeight nur auslesen, jedoch
nicht setzen. Im MS Internet Explorer knnen Sie mit document.body.offsetHeight die
innere Fensterhhe annhernd bestimmen. Zu diesem Zeitpunkt muss jedoch das Body-Element
bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaft vom Event-Handler
onLoad abhngig zu machen.

innerWidth
Speichert die Breite des Anzeigebereichs eines Fensters. Sehr gut geeignet in Verbindung mit
absolutem Positionieren von Elementen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function BreiteFestlegen() {
window.innerWidth = document.Eingabe.Feld.value;
}
//-->
</script>
</head><body>

654

Kapitel 20: JavaScript Objekt-Referenz

<form name="Eingabe" action="">

<input type="text" name="Feld">
<input type="button" value="Test" onClick="BreiteFestlegen()">
</form>
</body></html>

Das Beispiel erlaubt es, in einem Eingabefeld einen Wert einzugeben. Beim Klicken auf einen
ebenfalls definierten Button wird die Funktion BreiteFestlegen() aufgerufen, die die Fensterbreite auf den eingegebenen Wert setzt. Beachten Sie beim Neufestsetzen der Fensterbreite die
Bildschirmgre. Diese knnen Sie mit dem Screen-Objekt ermitteln. Beachten Sie auch, dass
der Anzeigebereich eines Fensters um einiges kleiner sein muss als das Fenster selbst, da das
Fenster in der Regel noch Elemente wie Titelleiste, Menleiste usw. enthlt. Die absolute Breite
eines Fensters knnen Sie mit outerWidth auslesen bzw. setzen.
Beachten Sie: Unter Opera 5.12 knnen Sie die Eigenschaft innerWidth nur auslesen, jedoch
nicht setzen. Im MS Internet Explorer knnen Sie mit document.body.offsetWidth die innere
Fensterbreite annhernd bestimmen. Zu diesem Zeitpunkt muss jedoch das Body-Element bereits vorhanden sein, d.h. es ist sinnvoll, die Ermittlung dieser Eigenschaft vom Event-Handler
onLoad abhngig zu machen.

locationbar
Speichert die Information, ob ein Fenster eine eigene Adresszeile hat. Stellt selbst ein Objekt dar,
das eine Eigenschaft hat, nmlich die Eigenschaft visible (= sichtbar). Enthlt fr diese Eigenschaft den Wert true, wenn das Fenster eine Adresszeile hat, und den Wert false, wenn es
keine hat. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Fensterchen = window.open("datei.htm", "Zweitfenster", "width=300,height=200");
function Adress_Zeile() {
if(Fensterchen.locationbar && Fensterchen.locationbar.visible == false) {
Fensterchen.close();
Neufenster = window.open("datei.htm", "Zweitfenster",
"width=300,height=200,location");
Neufenster.focus();
}
}
//-->
</script>
</head><body>
<a href="javascript:Adress_Zeile()">Adresszeile?</a>
</body></html>

Das Beispiel ffnet zunchst ein Zweitfenster ohne Adresszeile. Beim Klicken auf den Verweis
wird die Funktion Adress_Zeile() aufgerufen. Diese Funktion prft, ob der Browser das
Objekt locationbar kennt und ob das Fenster keine Adresszeile hat. Wenn es keine hat, wird es
geschlossen. Stattdessen wird ein neues Fenster geffnet, wieder mit den gleichen Werten wie das
alte, jedoch zustzlich mit der Angabe location. Nheres dazu siehe open().

20.2 window

655

menubar
Speichert die Information, ob ein Fenster eine eigene Menleiste mit den Browser-Menbefehlen hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nmlich die Eigenschaft visible (=
sichtbar). Enthlt fr diese Eigenschaft den Wert true, wenn das Fenster eine Adresszeile hat,
und den Wert false, wenn es keine hat. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Hinweis() {
if(window.menubar && window.menubar.visible == true)
alert("Um die Seite zu editieren, aus dem Menue File den Befehl Edit Page
waehlen");
}
//-->
</script>
</head><body>
<a href="javascript:Hinweis()">Diese Seite editieren</a>
</body></html>

Das Beispiel enthlt einen Verweis, das dem Anwender anbietet, die angezeigte Seite zu editieren.
Wenn er den Verweis anklickt, wird eine Funktion Hinweis() aufgerufen. Diese prft, ob der
Browser das Objekt menubar kennt und ob fr das aktuelle Fenster eine Menleiste verfgbar ist.
Wenn ja, wird mit alert() ein Hinweis ausgegeben, was der Anwender tun muss, um die Seite
zu editieren.

name
Speichert den Namen eines Fensters. Bei Netscape 2.0 nur auslesbar, ab spteren Versionen auch
nderbar. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Fenster = window.open("datei.htm","KleinesFenster","width=200,height=200");
function Fenstername() {
alert("Name des kleinen Fensters: " + Fenster.name);
neu = prompt("Vergeben Sie einen neuen Fensternamen","Name");
Fenster.name = neu;
alert("Der Name des Fensters lautet jetzt: " + Fenster.name);
}
//-->
</script>
</head><body>
<a href="javascript:Fenstername()">Name des Fensters</a>
</body></html>

Das Beispiel ldt beim Einlesen der Datei ein zweites kleines Fenster. Der Name dieses Fensters
lautet KleinesFenster. Beachten Sie, dass die Eigenschaft name sich auf diesen Namen bezieht,
nicht etwa auf den Variablennamen, in dem die Fensterinstanz gespeichert wird (im Beispiel die

656

Kapitel 20: JavaScript Objekt-Referenz

Variable Fenster). Beim Klicken auf einen Verweis wird die Funktion Fenstername() aufgerufen. Darin wird dem Anwender zunchst mit alert() der aktuelle Fenstername des kleinen
Fensters ausgegeben. Dann kann er einen neuen Namen eingeben. Abschlieend wird der neue
Name angezeigt.
Beachten Sie: Ein mit JavaScript gesetzter Fenstername bleibt so lange erhalten, wie das Fenster
geffnet ist bzw. bis er erneut gendert wird. Sie knnen aus diesem Grund den Fensternamen
zum Speichern von Variableninhalten verwenden, z.B., um Variablen von einer Datei an eine
spter aufgerufene Datei zu bergeben. Bercksichtigen Sie dabei jedoch, dass der Fenstername
in vielen Browsern lediglich Buchstaben, Zahlen und den Unterstrich enthalten darf. Sonderzeichen und Umlaute dagegen sind nicht erlaubt. Eine Ausnahme bildet Opera 5. Hier bleibt ein
mit JavaScript gesetzter Fenstername nur so lange gltig, wie das ndernde Dokument in diesem
Fenster geladen ist. Lesen Sie zu dem Thema auch im Online-Angebot von SELFHTML (selfhtml.
teamone.de) aktuell den Feature-Artikel Javascript-Wertbergabe zwischen verschiedenen HTMLDokumenten von Hatto von Hatzfeld.

outerHeight
Speichert die Gesamthhe eines Fensters, inklusive Titelleiste, Menleiste, Statuszeile usw. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert("Gesamthoehe dieses Fensters: " + window.outerHeight + "
window.outerHeight = 300;
alert("Gesamthoehe jetzt: " + window.outerHeight + " Pixel");
//-->
</script>
</head><body>
</body></html>

Pixel");

Das Beispiel gibt beim Einlesen zunchst die Hhe des aktuellen Fensters aus. Dann setzt es die
Hhe neu fest, und zwar auf 300 Pixel. Anschlieend wird die neue Fensterhhe zur Kontrolle
mit alert() nochmals ausgegeben.
Beachten Sie: Unter Opera 5.12 knnen Sie die Eigenschaft outerHeight nur auslesen, jedoch
nicht setzen.

outerWidth
Speichert die Gesamtbreite eines Fensters, inklusive Fensterrnder. Das Beispiel fragt beim Einlesen der Datei ab, ob die Breite des aktuellen Fensters mehr als 640 Pixel betrgt. Wenn ja, wird
die Breite auf 640 Pixel festgesetzt.
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(window.outerWidth > 640)
window.outerHeight = 640;
//-->

20.2 window

657

</script>
</head><body>
</body></html>

Beachten Sie: Unter Opera 5.12 knnen Sie die Eigenschaft outerWidth nur auslesen, jedoch
nicht setzen.

pageXOffset
Speichert die aktuelle horizontale Position innerhalb der Seite, gemessen am linken Fensterrand.
So lsst sich ermitteln, wie weit der Anwender bereits nach rechts gescrollt hat. Sinnvoll in Verbindung der Verwendung mit scrollBy() oder scrollTo(). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Set0() {
if(parent.frames[1].pageXOffset > 0)
parent.frames[1].scrollTo(0,parent.frames[1].pageYOffset);
}
//-->
</script>
</head><body>
<a href="javascript:Set0()">nach links</a>
</body></html>

Im Beispiel wird angenommen, es gibt ein anderes Frame-Fenster, das einen berbreiten Inhalt
hat, sodass der Anwender nach rechts scrollen muss, um alles zu sehen. Mit dem Verweis, der in
der aktuellen Datei notiert ist, lsst sich das andere Frame-Fenster wieder ganz nach links scrollen. Dazu wird die aktuelle horizontale Scroll-Position der Eigenschaft pageXOffset abgefragt.
Wenn sie grer 0 ist, hat der Anwender nach rechts gescrollt. In diesem Fall wird die Methode
scrollTo() aufgerufen, um wieder ganz nach links zu scrollen. Die vertikale Position bleibt dabei erhalten, da als Parameter die Eigenschaft pageYOffset bergeben wird. Zur Adressierung
von Frame-Fenstern in JavaScript lesen Sie den Abschnitt 20.3 ber das Objekt frames.
Beachten Sie: Im MS Internet Explorer ab Version 4 ist die horizontale Scroll-Position in der
Eigenschaft document.body.scrollLeft gespeichert.

pageYOffset
Speichert die aktuelle vertikale Position innerhalb der Seite, gemessen am Dokumentanfang. So
lsst sich ermitteln, wie weit der Anwender bereits nach unten gescrollt hat. Sinnvoll ist die
Verwendung in Verbindung mit scrollBy() oder scrollTo(). Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-for(var i=0;i<100;i++)
document.write("Viel Text<br>");
function Position() {

658

Kapitel 20: JavaScript Objekt-Referenz

alert("pageYOffset: " + window.pageYOffset + " Pixel");

}
//-->
</script>
<a href="javascript:Position()">Y-Position</a>
</body></html>

Im Beispiel schreibt ein JavaScript zu Testzwecken 100-mal eine HTML-Zeile mit dem Text Viel
Text in das Dokumentfenster. Das veranlasst den Browser, entsprechend weit nach unten mit zu
scrollen. Am Ende wird ein Verweis notiert. Bei dessen Anklicken wird die Funktion Position() aufgerufen. Sie gibt mit alert() aus, wie weit die aktuelle Scroll-Position vom Dokumentanfang entfernt ist.
Beachten Sie: Im MS Internet Explorer ab Version 4 ist die vertikale Scroll-Position in der
Eigenschaft document.body.scrollTop gespeichert.

personalbar
Speichert die Information, ob ein Fenster eine eigene Personal-Leiste hat. Das ist bei Netscape
4.x die Leiste unterhalb der Adresszeile, die den Direktzugriff auf persnliche Lieblingsadressen
ermglicht. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nmlich die Eigenschaft visible
(= sichtbar). Enthlt fr diese Eigenschaft den Wert true, wenn das Fenster eine Personal-Leiste
hat, und den Wert false, wenn es keine hat. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function PersonalCheck() {
if (window.personalbar)
if(window.personalbar.visible == false)
alert("Haben Sie denn keine Lieblings-Adressen?");
else
alert("Aha, Sie nutzen also die Personal Bar!");
}
//-->
</script>
</head><body>
<a href="javascript:PersonalCheck()">Persoenlichkeitstest</a>
</body></html>

Das Beispiel enthlt einen Verweis. Wenn der Anwender den Verweis anklickt, wird eine Funktion PersonalCheck() aufgerufen. Diese prft, ob der Browser das Objekt personalbar kennt
und ob fr das aktuelle Fenster eine Personal-Leiste verfgbar ist. Je nach Ergebnis wird dem
Anwender mit alert() eine persnliche Meldung ausgegeben.

scrollbars
Speichert die Information, ob ein Fenster Scroll-Leisten hat. Stellt selbst ein Objekt dar, das eine
Eigenschaft hat, nmlich die Eigenschaft visible (= sichtbar). Enthlt fr diese Eigenschaft den
Wert true, wenn das Fenster Scroll-Leisten hat, und den Wert false, wenn es keine hat. Ein
Beispiel:

20.2 window

659

<html><head><title>Test</title>
<script type="text/javascript">
<!-var Neufenster = window.open("datei.htm", "AnderesFenster","width=400,height=250");
function Test() {
if(Neufenster.scrollbars && Neufenster.scrollbars.visible == false)
Neufenster.close();
}
//-->
</script>
</head><body>
<a href="javascript:Test()">Kleiner Scroll-Test</a>
</body></html>

Das Beispiel ldt beim Einlesen der Datei ein zweites, kleineres Fenster, das anschlieend unter
Neufenster ansprechbar ist. Die Datei selbst enthlt einen Verweis. Wenn der Anwender den
Verweis anklickt, wird eine Funktion Test() aufgerufen. Diese prft, ob der Browser das Objekt
scrollbars kennt und ob fr das zweite Fenster Scroll-Leisten verfgbar sind. Wenn nicht,
wird das Fenster mit close() geschlossen.

statusbar
Speichert die Information, ob ein Fenster eine eigene Statuszeile hat. Stellt selbst ein Objekt dar,
das eine Eigenschaft hat, nmlich die Eigenschaft visible (= sichtbar). Enthlt fr diese Eigenschaft den Wert true, wenn das Fenster eine Statuszeile hat, und den Wert false, wenn es keine
hat. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Statustext(Text)
{
if(window.statusbar && window.statusbar.visible == true) window.defaultStatus =
Text;
else alert(Text);
}
//-->
</script>
</head><body>
<form name="Eingabe" action="">
<input type="text" name="Feld">
<input type="button" value="Start"
onClick="Statustext(document.Eingabe.Feld.value)">
</form>
</body></html>

Im Beispiel wird ein Formular definiert. Der Anwender kann einen Text eingeben. Beim Klick
auf den Button wird die Funktion Statustext() aufgerufen. Die Funktion ermittelt, ob der
Browser das Objekt scrollbars kennt und ob das aktuelle Fenster eine Statuszeile hat. Wenn ja,

660

Kapitel 20: JavaScript Objekt-Referenz

wird der im Eingabefeld eingegebene Text als Standardtext der Statuszeile gesetzt. Wenn nein,
wird der eingegebene Text nur mit alert() angezeigt.

status
Speichert oder setzt den aktuellen Inhalt der Statuszeile. Das Beispiel zeigt einen Verweis. Beim
berfahren des Verweistextes mit der Maus erscheint in der Statuszeile der Text: das ist ein
Verweis. Wichtig ist bei solchen Konstrukten die Anweisung return true am Ende.
<html><head><title>Test</title>
</head><body>
<a href="datei.htm" onmouseover="status=Das ist ein Verweis;return
true;">Verweis</a>
</body></html>

toolbar
Speichert die Information, ob ein Fenster eine eigene Button-Leiste (mit Buttons fr Vor,
Zurck usw.) hat. Stellt selbst ein Objekt dar, das eine Eigenschaft hat, nmlich die Eigenschaft
visible (= sichtbar). Enthlt fr diese Eigenschaft den Wert true, wenn das Fenster eine
Button-Leiste hat, und den Wert false, wenn es keine hat. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-if(self.toolbar && self.toolbar.visible == false)
document.write("<a href=javascript:history.back()>Back<\/a>");
//-->
</script>
</body></html>

Das Beispiel enthlt innerhalb des Dateikrpers einen Script-Bereich. Darin wird berprft, ob
das Fenster eine eigene Button-Leiste hat. Wenn nicht, wird mit document.write() ein HTMLKonstrukt an die Stelle im Dokument geschrieben, die den Button Zurck als HTML-Verweis
schreibt (siehe auch history.back).

alert()
Gibt Text in einem Dialogfenster aus. Erwartet eine Zeichenkette, eine Zahl oder ein Objekt als
Parameter. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(Verweisziel noch nicht erreichbar)">Unsere Erfolge</a>
</body></html>

Das Beispiel fhrt beim Anklicken eines Verweises keinen Sprung zu einer anderen Seite aus,
sondern gibt stattdessen eine Dialogbox mit dem Hinweis "Verweisziel noch nicht erreichbar" aus. Sie knnen der alert()-Methode feste Zeichenketten bergeben wie im Beispiel, aber

20.2 window

661

auch Variablen. Dann wird der Inhalt der Variablen ausgegeben. Auch zusammengesetzte Ketten
drfen Sie bergeben, etwa: alert("Ihr Browser" + navigator.userAgent)
Beachten Sie: Intern wandelt die alert()-Methode den bergebenen Parameter in eine Zeichenkette um. So kann es vorkommen, dass sich ein Wert mit alert() ausgeben lsst, jedoch
keine Zeichenkettenoperationen mit dem ausgegebenen Wert ausfhrbar sind, da es sich auerhalb der Ausgabe nicht um eine Zeichenkette handelt. Der Rckgabewert der Methode alert()
ist stets undefined.
Das Aussehen des Mitteilungsfenster ist abhngig vom Betriebssystem und dem verwendeten
Browser. Das bedeutet, Sie knnen die Mitteilungsbox nur mittels Steuerzeichen formatieren
(Kapitel 21.5.1). Weitere Formatierungsmglichkeiten stehen Ihnen nicht zur Verfgung.

back()
Entspricht bei normalen WWW-Seiten einem Klick auf den Zurck-Button im Browser. Bei
Frames wird jedoch die letzte besuchte Seite aufgerufen, die nicht zum Frameset gehrte. Hier
liegt der entscheidene Unterschied zur Methode history.back! Diese Methode erwartet keine
Parameter. Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die zuletzt das gesamte Anzeigefenster ausfllte:
<html><head><title>Test</title>
</head><body>
<a href="javascript:window.back()">Zurck</a>
</body></html>

blur()
Macht ein Fenster inaktiv. Das Gegenteil von focus(). Erwartet keine Parameter. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Neufenster = window.open("datei.htm", "AnderesFenster","width=400,height=250");
//-->
</script>
</head><body>
<a href="javascript:Neufenster.focus()">Fenster nach vorne</a><br>
<a href="javascript:Neufenster.blur()">Fenster nach hinten</a>
</body></html>

Im Beispiel wird beim Einlesen der HTML-Datei ein zweites, kleines Fenster geffnet. Die
HTML-Datei selbst enthlt zwei Verweise. Beim Anklicken des ersten Verweises wird das zweite
Fenster aktiviert focus(). Beim Anklicken des zweiten Verweises wird es deaktiviert und je
nach Fensterkonstellation von dem Hauptfenster berdeckt blur().

captureEvents()
berwacht Anwenderereignisse im angegebenen Fenster. Erwartet als Parameter eine Folge von
Ereignissen, die berwacht werden sollen. Folgende Ereignisse lassen sich berwachen: Event.
ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.

662

Kapitel 20: JavaScript Objekt-Referenz

ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.

MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.
MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD. Es handelt

sich dabei um spezielle Notationsvarianten entsprechender Event-Handler ohne das on davor,

dafr mit dem Ansprechen des Event-Objekts davor. So entspricht etwa Event.MOUSEOVER dem
Event-Handler onMouseover. Sie knnen mehrere Ereignisse berwachen. Trennen Sie die
Event-Namen dabei durch | (Querstriche). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-window.captureEvents(Event.KEYPRESS);
window.onkeypress = Ausgabe;
function Ausgabe(Ereignis) {
alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt");
}
//-->
</script>
</head><body>
Druecken Sie irgendwelche Tasten!
</body></html>

Im Beispiel wird der Event KEYPRESS (Taste gedrckt) berwacht. Wenn der Anwender eine
Taste drckt, wird die Funktion Ausgabe() aufgerufen, die mit alert() ausgibt, welche Taste
gedrckt wurde. Die Syntax beim Funktionsaufruf ist dabei abweichend von der blichen. Ein
zusammenhngendes Beispiel mit Erluterungen hierzu finden Sie im Kapitel 21 Dynamisches
HTML im Abschnitt 21.4.7 ber das Event-Objekt bei Netscape.
Auch Netscape 6 interpretiert das vorliegende Beispiel. Fr diesen Browser ist es jedoch notwendig, nach der Besttigung des Meldefensters dem Fenster mittels Klick erneut den Fokus zu geben.

clearInterval()
Bricht einen Endlosvorgang ab, der mit setInterval() begonnen wurde. Erwartet als Parameter die Variable, in der der Aufruf von setInterval() gespeichert wurde. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var aktiv = window.setInterval("Farbe()",1000);
var i = 0, farbe = 1;
function Farbe() {
if(farbe==1)
{ document.bgColor="yellow"; farbe=2; }
else
{ document.bgColor="aqua"; farbe=1; }
i = i + 1;
if(i >= 10)
window.clearInterval(aktiv);

20.2 window

663

}
//-->
</script>
</body></html>

Das Beispiel definiert mit setInterval(), dass die Funktion Farbe() alle 1000 Millisekunden,
also jede Sekunde einmal aufgerufen wird. Der Aufruf wird in der Variablen aktiv gespeichert.
Im Beispiel wechselt die Funktion Farbe() bei jedem Aufruf die Hintergrundfarbe der Datei
(document.bgColor). Gleichzeitig wird ein Zhler hochgezhlt. Wenn er grer oder gleich 10
ist, wird die Methode clearInterval() aufgerufen, die den Endlosvorgang stoppt. Dabei wird
die zuvor definierte Variable aktiv als Parameter bergeben.

clearTimeout()
Bricht einen Timeout ab, der mit der Methode setTimeout() gestartet wurde. Erwartet als Parameter die Variable, in der der Aufruf von setTimeout() gespeichert wurde. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var i = 0;
function Zaehlen() {
i = i + 1;
aktiv = window.setTimeout("Zaehlen()",1000);
}
function Aufhoeren() {
window.clearTimeout(aktiv);
alert(i + " Sekunden");
}
aktiv = window.setTimeout("Zaehlen()",1000);
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Klick" onClick="Aufhoeren()">
</form>
</body></html>

Das Beispiel startet beim Einlesen der Datei mit setTimeout() einen Zhlvorgang. Dabei wird
alle 1000 Millisekunden, also 1 Mal pro Sekunde, die Funktion Zaehlen() aufgerufen. Diese
zhlt die Variable i hoch. In der Datei wird ein Button definiert. Wenn der Anwender auf den
Button klickt, wird die Funktion Aufhoeren() aufgerufen. Diese Funktion stoppt mit clearTimeout() den Timeout und gibt mit alert() die Anzahl der gezhlten Sekunden aus. Beim Aufruf von clearTimeout() wird die zuvor bei setTimeout() definierte globale Variable aktiv als
Parameter bergeben.

664

Kapitel 20: JavaScript Objekt-Referenz

close()
Schliet ein Fenster. Erwartet keine Parameter. Das Beispiel ffnet beim Einlesen der Datei ein
zweites Fenster namens Info. In der Beispieldatei wird ein Button definiert. Wenn der Anwender auf den Button klickt, wird das zweite Fenster geschlossen.
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Info = window.open("datei.htm", "Zweitfenster");
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Fenster zu" onClick="Info.close()">
</form>
</body></html>

Beachten Sie: Die Methode close() unterliegt der Sicherheitskonzeption von JavaScript. Das
bedeutet, dass sich ein Fenster, sobald es eine History besitzt (weil der Anwender darin mehrere
Seiten aufgerufen hat), nicht mehr ohne eine Browser-Nachfrage schlieen lsst. Ein Unterdrcken dieser Abfrage ist nicht mglich.

confirm()
Blendet ein Dialogfenster mit zwei Buttons fr (OK) und (Abbrechen) ein. Sinnvoll, um vom
Anwender eine Entscheidung zu erzwingen, die im weiteren Programmablauf verarbeitet wird.
Erwartet als Parameter einen Aufforderungstext fr die Ja/Nein-Entscheidung. Liefert als Ergebnis zurck, wie sich der Anwender entschieden hat. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Check = confirm("Wollen Sie diese Seite wirklich sehen?");
if(Check == false) history.back();
//-->
</script>
</head><body>
</body></html>

Im Beispiel wird der Anwender beim Einlesen der Datei gefragt, ob er die Seite wirklich sehen
will. Der Rckgabewert von confirm() wird in der Variablen Check gespeichert. Wenn der
Anwender auf (OK) klickt, enthlt Check den Wert true. Es passiert nichts weiter und die Seite
wird geladen. Wenn er Abbrechen whlt, erhlt Check den Wert false. Fr diesen Fall ist die
Anweisung history.back() notiert, die den Anwender auf die Seite zurckbefrdert, von der er
kam.
Das Aussehen des Auswahlfensters ist abhngig vom Betriebssystem und dem verwendeten
Browser. Das bedeutet, Sie knnen die Auswahl nur mittels Steuerzeichen formatieren (Kapitel
21.5.1). Weitere Formatierungsmglichkeiten stehen Ihnen nicht zur Verfgung.

20.2 window

665

disableExternalCapture()
Verbietet anderen Fenstern, Ereignisse im aktuellen Fenster zu berwachen. Vor allem als Schutz
gedacht, falls fremde Seiten die eigene Seite in ein Frameset laden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-disableExternalCapture();
//-->
</script>
</head><body>
</body></html>

Das Beispiel startet beim Einlesen den Befehl disableExternalCapture(). Dadurch knnen
fremde Seiten keine Anwenderereignisse in dieser Datei berwachen, falls die Datei in ein fremdes Frameset geladen wird.

enableExternalCapture()
Erlaubt anderen Fenstern, Ereignisse im aktuellen Fenster zu berwachen. So lassen sich von
anderen Fenstern eines Framesets aus Anwenderereignisse im aktuellen Fenster berwachen. Ein
Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-enableExternalCapture();
//-->
</script>
</head><body>
</body></html>

Das Beispiel startet beim Einlesen den Befehl enableExternalCapture(). Dadurch knnen
fremde Seiten Anwenderereignisse in dieser Datei berwachen, falls die Datei Teil eines Framesets ist.

find()
Durchsucht den Inhalt eines Fensters nach einem Text. Entspricht in der Funktionalitt dem
Menbefehl Suchen. Die Suche bezieht sich nur auf die aktuelle Seite.
Erwartet folgende Parameter:
1. Text = Text, nach dem gesucht werden soll.
2. Gro-/Kleinschreibung beachten = true fr ja oder false fr nein bergeben.
3. Suchrichtung rckwrts = true fr ja oder false fr nein bergeben.
Die beiden letzten Parameter sind optional. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form action="">
<input type="text" name="SuchNach">

666

Kapitel 20: JavaScript Objekt-Referenz

<input type="button" value="suchen"

onClick="find(this.form.SuchNach.value,false,false)">
<p>Geben Sie einen Suchbegriff ein.</p>
</form>
</body></html>

Im Beispiel steht am Anfang der Datei ein Formular mit einem Eingabefeld zur Eingabe eines
Suchbegriffs. Das Formular enthlt auerdem einen Button. Bei dessen Anklicken wird der weitere Inhalt der Datei nach dem Begriff durchsucht, den der Anwender in dem Eingabefeld eingegeben hat.
Beachten Sie: Netscape 6.1 kennt diese Methode nicht (mehr).

focus()
Macht ein Fenster zum aktiven Fenster. Sinnvoll bei Verwendung von Zweitfenstern, aber auch
bei Frame-Fenstern. Erwartet keine Parameter. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function FrameVerweis(Ziel)
{
parent.frames[1].location.href = Ziel;
parent.frames[1].focus();
}
//-->
</script>
</head><body>
<a href="javascript:FrameVerweis(../location.htm)">Neue Seite</a>
</body></html>

Das Beispiel nimmt an, dass die aktuelle Datei Teil eines Framesets ist. Die Datei enthlt einen
Verweis, dessen Ziel in einem anderen Frame-Fenster angezeigt werden soll. Beim Anklicken
wird aber nicht nur das Verweisziel in das andere Frame-Fenster geladen, sondern dieses wird
zugleich das aktive Fenster. So kann der Anwender beispielsweise gleich mit den Pfeiltasten darin
scrollen. Dazu wird beim Anklicken des Verweises eine Funktion FrameVerweis() aufgerufen.
Diese Funktion ldt im ersten Befehl das als Parameter bergebene Verweisziel in den anderen
Frame ( location.href), und im zweiten Befehl setzt sie mit focus() das Ziel-Frame-Fenster
aktiv. Zur Adressierung von Frame-Fenstern in JavaScript lesen Sie den Abschnitt 20.3 ber das
Objekt frames.

forward()
Entspricht bei normalen WWW-Seiten einem Klick auf den (Vorwrts)-Button im Browser. Bei
Frames wird jedoch die nchste besuchte Seite aufgerufen, die nicht zum Frameset gehrt. Bei
Frames also unterschiedlich zu history.forward()! Erwartet keine Parameter. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:window.forward()">Vor</a>
</body></html>

20.2 window

667

Das Beispiel realisiert einen HTML-Verweis, bei dessen Anklicken die Seite aufgerufen wird, die
beim Vorwrtsgehen in der History als nchste das gesamte Anzeigefenster ausfllt.

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function clickHandler(Ereignis)
{ window.document.links[0].handleEvent(Ereignis); }
window.captureEvents(Event.CLICK);
window.onClick = clickHandler;
//-->
</script>
</head><body>
<a href="datei.htm" onClick="location.href=datei.htm">Verweis</a>
</body></html>

Das Beispiel enthlt einen Verweis, bei dessen Anklicken ganz normal durch die href-Angabe
die Datei datei.htm aufgerufen wird. Im Beispiel ist es jedoch so, dass datei.htm sofort aufgerufen wird, sobald der Anwender irgendwo im Browser-Fenster hinklickt. Dazu wird beim Einlesen
der Datei mit der captureEvents()-Methode das Mausklick-Ereignis berwacht. Wenn das
Ereignis eintritt, wird die Funktion ClickHandler() aufgerufen. Diese bergibt mit handleEvent() das Ereignis an den ersten im Dokument definierten Verweis weiter (document.
links[0]). In dem entsprechenden Verweis ist dazu ein Event-Handler onClick= notiert.
Dieser ist in der Lage, das bergebene Ereignis zu verarbeiten. Als Befehl wird mit location.
href die gleiche Datei aufgerufen wie beim Anklicken des Verweises selbst.
Beachten Sie: Netscape 6.1 kennt diese Methode nicht (mehr).

home()
Entspricht einem Klick auf den (Home)-Button im Browser. Das Beispiel definiert einen Verweis,
bei dessen Anklicken die Seite aufgerufen wird, die der Anwender als Start-Homepage eingestellt
hat.
<html><head><title>Test</title>
</head><body>
<a href="javascript:home()">Nach hause</a>
</body></html>

moveBy()
Verschiebt ein Fenster um so viele Pixel wie angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster nach links/rechts verschoben werden soll. Negative
Werte verschieben nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel das Fenster nach oben/unten verschoben werden soll. Negative
Werte verschieben nach oben, positive nach unten.

668

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Fenster = window.open("datei.htm","Zweitfenster","width=200,height=200");
function Bewege() {
Fenster.moveBy(200,100);
Fenster.focus();
}
//-->
</script>
</head><body>
<a href="javascript:Bewege()">Fenster bewegen</a>
</body></html>

Das Beispiel ldt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das
Hauptfenster enthlt einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege()
aufgerufen, die das kleine Fenster um 200 Pixel nach rechts und um 100 Pixel nach unten verschiebt.

moveTo()
Verschiebt ein Fenster auf die anzugebende Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert fr die neue obere linke Ecke des Fensters.
2. y-Wert = Oben-Wert fr die neue obere linke Ecke des Fensters.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Fenster = window.open("datei.htm","Zweitfenster","width=200,height=200");
function Bewege() {
Fenster.moveTo(screen.width-200,screen.height-200);
Fenster.focus();
}
//-->
</script>
</head><body>
<a href="javascript:Bewege()">Fenster bewegen</a>
</body></html>

Das Beispiel ldt beim Einlesen der Datei ein kleines Zweitfenster mit einer anderen Datei. Das
Zweitfenster hat eine Breite und eine Hhe von 200 Pixeln. Das Hauptfenster enthlt einen Verweis. Beim Anklicken des Verweises wird die Funktion Bewege() aufgerufen, die das kleine
Fenster in die rechte untere Ecke des Bildschirms verschiebt. Die Pixelangaben fr die neue linke
obere Ecke des Fensters werden dabei mit Hilfe des screen-Objekts gewonnen, das mit screen.
width die Bildschirmbreite und mit screen.height die Bildschirmhhe liefert.

20.2 window

669

open()
ffnet ein neues Fenster. Erwartet mindestens zwei, optional auch drei Parameter:
1. URI = Zieladresse einer Datei, die in das neue Fenster geladen werden soll. Wenn sich die
Datei im gleichen Verzeichnis befindet, gengt der Dateiname. Ansonsten relative Pfadnamen
oder absolute http-Adressen angeben. Bei Netscape darf dies auch eine leere Zeichenkette sein
(ffnet ein leeres Fenster), was beim MS Internet Explorer 4 und Opera 5.12 allerdings zu einer
Fehlermeldung fhrt. Anstelle eines URI knnen Sie auch mit about:blank eine leere Datei in
das Fenster laden.
2. Fenstername = Ein Name, der aus Buchstaben, Ziffern und Unterstrich bestehen darf. Unter
diesem Namen knnen beispielsweise Verweise ihre Ziele mit <a href="ziel.htm" target="NameDesFensters"> in das erzeugte Fenster laden. Gltige Fensternamen sind auch
_blank, _parent, _self und _top. Opera 5.12 ffnet jedoch in jedem Fall die Datei im gleichen
Fenster. Netscape 6.x interpretiert die Angabe _parent nicht.
3. (optional) Angaben zum Aussehen des Fensters = Eine Zeichenkette, in der Sie die Gre und
die Eigenschaften des Fensters festlegen knnen. Mehrere Angaben sind durch Kommata zu
trennen. Folgende Angaben sind mglich:
Eigenschaft

Wertzuweisung

dependent=

yes|no

height=

[Pixel]

hotkeys=

yes|no

innerHeight=

[Pixel]

innerWidth=

[Pixel]

left=

[Pixel]

location=

yes|no

Status

Bedeutung
Wenn ja (yes), wird das Fenster geschlossen,
wenn sein Elternfenster geschlossen wird. Wenn
nein (no = Voreinstellung), bleibt das Fenster
erhalten, wenn sein Elternfenster geschlossen
wird.
Hhe des neuen Fensters in Pixeln, z.B.
height=200.
Wenn nein (no), werden Tastaturbefehle zum
Steuern des Browsers in dem Fenster deaktiviert.
Wenn ja (yes = Voreinstellung), bleiben Tastaturbefehle des Browsers in dem Fenster gltig.
Hhe des Anzeigebereichs des neuen Fensters in
Pixeln, z.B. innerHeight=200.
Breite des Anzeigebereichs des neuen Fensters in
Pixeln, z.B. innerWidth=200.
Horizontalwert der linken oberen Ecke des
neuen Fensters in Pixeln, z.B. left=100.
Wenn ja (yes), erhlt das Fenster eine eigene
Adresszeile. Wenn nein (no), erhlt es keine
Adresszeile. Voreinstellung ist no, beim Internet
Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthlt. Netscape 6.1 interpretiert diese Angabe nicht.

670

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Wertzuweisung

menubar=

yes|no

resizable=

yes|no

screenX=

[Pixel]

screenY=

[Pixel]

scrollbars=

yes|no

status=

yes|no

toolbar=

yes|no

top=

[Pixel]

width=

[Pixel]

Status

Bedeutung
Wenn ja (yes), erhlt das Fenster eine eigene
Menleiste mit Browser-Befehlen. Wenn nein
(no), erhlt es keine Menleiste. Voreinstellung
ist no, beim Internet Explorer jedoch nur, wenn
die Optionenzeichenkette mindestens eine Option enthlt.
Wenn ja (yes), kann der Anwender das Fenster
in der Gre verndern. Wenn nein (no), kann
er die Fenstergre nicht ndern. Voreinstellung
ist no, beim Internet Explorer jedoch nur, wenn
die Optionenzeichenkette mindestens eine Option enthlt.
Horizontalwert der linken oberen Ecke des
neuen Fensters in Pixeln, z.B. screenX=100.
Vertikalwert der linken oberen Ecke des neuen
Fensters in Pixeln, z.B. screenY=30.
Wenn ja (yes), erhlt das Fenster Scroll-Leisten.
Wenn nein (no), kann der Anwender in dem
Fenster nicht scrollen. Voreinstellung ist no,
beim Internet Explorer jedoch nur, wenn die
Optionenzeichenkette mindestens eine Option
enthlt.
Wenn ja (yes), erhlt das Fenster eine eigene
Statuszeile. Wenn nein (no), erhlt es keine
Statuszeile. Voreinstellung ist no, beim Internet
Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthlt.
Wenn ja (yes), erhlt das Fenster eine eigene
Werkzeugleiste. Wenn nein (no), erhlt es keine
Werkzeugleiste. Voreinstellung ist no, beim Internet Explorer jedoch nur, wenn die Optionenzeichenkette mindestens eine Option enthlt.
Vertikalwert der linken oberen Ecke des neuen
Fensters in Pixeln, z.B. top=100.
Breite des neuen Fensters in Pixeln, z.B.
width=400.

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-F1 = window.open("datei.htm","Fenster1","width=310,height=400,left=0,top=0");
F2 = window.open("datei.htm","Fenster2","width=310,height=400,left=320,top=0");
self.focus();

20.2 window

671

self.close();
//-->
</script>
</head><body>
</body></html>

Das Beispiel ffnet beim Einlesen der Datei zwei weitere Fenster so, dass sie nebeneinander angeordnet sind. Anschlieend schliet sich das Hauptfenster selbst. Angenommen, in datei.htm
(wird ins erste Fenster geladen) steht ein Verweis, dessen Ziel im zweiten Fenster angezeigt werden soll. Dazu knnen Sie notieren:
<a href="datei.htm" target="Fenster2">Verweistext</a>

Wichtig ist dabei die Angabe target=. Dort mssen Sie den Fensternamen angeben, den Sie bei
der Definition des gewnschten Zielfensters vergeben haben im Beispiel "Fenster2".
Beachten Sie: Die meisten Browser erlauben keine Fensterhhe oder -breite, die kleiner als 100 px
ist. Je nach Betriebssystem und Browser wird bei kleineren Fenstern eine Fehlermeldung (Zugriff
verweigert) ausgegeben bzw. die jeweiligen Minimalwerte verwendet.

print()
Druckt den Inhalt einer Seite aus. Entspricht dem Menbefehl zum Drucken im Browser.
Erwartet keine Parameter. Das Beispiel definiert einen Verweis, mit dessen Hilfe der Anwender
die Seite ausdrucken kann:
<html><head><title>Test</title>
</head><body>
<a href="javascript:window.print()">Diese Seite drucken</a>
</body></html>

Beachten Sie: Der MS Internet Explorer 5 unter Macintosh und Opera 5.12 interpretieren diese
Methode nicht. Fr den Internet Explorer 4.x gibt es einen Workaround, um das Ausdrucken
mit JavaScript anzustoen. Dazu muss ein ActiveX-Control eingebunden werden. Der JavaScript-Code dazu sieht folgendermaen aus (Beispiel):
if(document.all && navigator.appVersion.substring(22,23)==4) {
self.focus();
var OLECMDID_PRINT = 6;
var OLECMDEXECOPT_DONTPROMPTUSER = 2;
var OLECMDEXECOPT_PROMPTUSER = 1;
var WebBrowser = <object id="WebBrowser1" width="0" height="0"
classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>;
document.body.insertAdjacentHTML(beforeEnd,WebBrowser);
WebBrowser1.ExecWB(OLECMDID_PRINT,OLECMDEXECOPT_DONTPROMPTUSER);
WebBrowser1.outerHTML = ;
}

prompt()
Zeigt ein Dialogfenster mit einem Eingabefeld, einem (OK)-Button und einem (Abbrechen)Button an. Der Anwender kann in dem Eingabefeld etwas eingeben. Die Methode prompt() gibt

672

Kapitel 20: JavaScript Objekt-Referenz

diesen eingegebenen Wert zurck. So lassen sich Anwendereingaben im Script weiterverarbeiten. Erwartet zwei Parameter:
1. Aufforderungstext = Text, der beschreibt, was der Anwender eingeben soll.
2. Feldvorbelegung = Text, mit dem das Eingabefeld vorbelegt wird. Wenn Sie ein leeres Eingabefeld wollen, bergeben Sie dafr eine leere Zeichenkette "".
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Check = prompt("Geben Sie Ihr Passwort fuer diese Seite ein","");
if(Check != "Rumpelstielz") history.back();
else alert("Sie haben Zutritt");
//-->
</script>
</head><body>
</body></html>

Das Beispiel bringt vor dem Anzeigen der HTML-Datei mit prompt() ein Dialogfenster auf den
Bildschirm. Darin muss der Anwender ein Passwort eingeben. Die Eingabe wird in der Variablen
Check gespeichert. Wenn der Wert dieser Variablen nach dem Beenden des Dialogfensters nicht
gleich "Rumpelstielz" ist, wird der Anwender mit history.back() zu der Seite zurckgeschickt, von der er kam. Wenn das eingegebene Wort stimmt, erhlt er mit alert() die Meldung, dass er Zutritt hat, und die Seite wird geladen.

releaseEvents()
Beendet die berwachung von Anwenderereignissen. Gegenstck zu captureEvents(). Erwartet als Parameter eine Folge von Ereignissen, die nicht mehr berwacht werden sollen. Gleiche
Syntax wie bei captureEvents(). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var i = 0;
window.captureEvents(Event.KEYPRESS);
window.onkeypress = Ausgabe;
function Ausgabe(Ereignis)
{
alert("Sie haben die Taste mit dem Wert " + Ereignis.which + " gedrueckt");
i = i + 1;
if(i > 2)
window.releaseEvents(Event.KEYPRESS);
}
//-->
</script>
</head><body>
Druecken Sie 3 mal irgendwelche Tasten!
</body></html>

20.2 window

673

Im Beispiel wird der Event KEYPRESS (Taste gedrckt) berwacht. Wenn der Anwender eine
Taste drckt, wird die Funktion Ausgabe() aufgerufen, die mit alert() ausgibt, welche Taste
gedrckt wurde. Die Funktion ruft sich bei Eintritt des Ereignisses selbst wieder auf, jedoch nur,
solange der Zhler i kleiner als 3 ist. Danach wird das berwachen der Tastaturereignisse mit
der Methode releaseEvents(Event.KEYPRESS) beendet. Ein zusammenhngendes Beispiel
mit Erluterungen hierzu finden Sie im Kapitel 21 Dynamisches HTML im Abschnitt 21.4.7 ber
das Event-Objekt bei Netscape.
Beachten Sie: Netscape 6 interpretiert diese Methode nicht (mehr).

resizeBy()
Verndert die Gre eines Fensters um so viele Pixel unten und rechts wie angegeben. Erwartet
folgende Parameter:
1. x-Wert = um wie viele Pixel das Fenster rechts verkleinert/vergrert werden soll. Negative
Werte verkleinern, positive vergrern.
2. y-Wert = um wie viele Pixel das Fenster unten verkleinert/vergrert werden soll. Negative
Werte verkleinern, positive vergrern.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Kleiner() { window.resizeBy(-10,-10); }
//-->
</script>
</head><body>
<a href="javascript:Kleiner()">Mach kleiner</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird die Funktion Kleiner()
aufgerufen. Diese Funktion verkleinert das dateieigene Fenster um 10 Pixel in der Breite und in
der Hhe.

resizeTo()
Verndert die Gre eines Fensters absolut. Erwartet folgende Parameter:
1. x-Wert = neue Breite des Fensters.
2. y-Wert = neue Hhe des Fensters.
Ein Beispiel:
<html><head><title>Test</title>
</head><body onLoad="window.resizeTo(580,420)">
</body></html>

Das Beispiel setzt die Fenstergre beim Einlesen der Datei auf eine Breite von 580 Pixeln und
auf eine Hhe von 420 Pixeln.

674

Kapitel 20: JavaScript Objekt-Referenz

routeEvent()
bergibt ein Anwenderereignis an das oberste Objekt der Objekthierarchie, also an das windowObjekt. Vor dort aus wird das Ereignis immer weiter nach unten durchgereicht, bis sich ein
Event-Handler findet, der das Ereignis verarbeitet. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Click1() {
alert("Sie haben auf den Button geklickt");
}
function Click2(Ereignis)
{
alert("Sie haben ins Fenster geklickt");
window.routeEvent(Ereignis);
}
window.captureEvents(Event.CLICK);
window.onClick = Click2;
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Button" onClick="Click1()">
</form>
</body></html>

Das Beispiel enthlt einen Button, bei dessen Anklicken die Funktion Click1() aufgerufen wird.
Diese Funktion gibt zur Kontrolle mit alert() aus, dass der Button angeklickt wurde. Im Beispiel ist es jedoch so, dass beim Einlesen der Datei mit der captureEvents()-Methode das
Mausklick-Ereignis berwacht wird. Wenn das Ereignis eintritt, wird in jedem Fall die Funktion
Click2() aufgerufen. Diese gibt zur Kontrolle aus, dass in das Fenster geklickt wurde. Anschlieend bergibt sie mit routeEvent() das Ereignis an die Objekthierarchie. Wenn der Klick auf
ein anderes Objekt erfolgt, das ebenfalls das Klick-Ereignis berwacht, wird die entsprechende
Aktion ebenfalls ausgefhrt. Im Beispiel hat dies zur Folge, dass der Anwender beim Klick auf
den Button zwei Meldungen erhlt: nmlich zuerst die, dass ins Fenster geklickt wurde, und danach die, dass auf den Button geklickt wurde. Ohne die routeEvent()-Methode wrde er die
zweite Meldung gar nicht erhalten, da das Klick-Ereignis vorher abgefangen worden wre.
Beachten Sie: Netscape 6 interpretiert diese Methode nicht (mehr).

scrollBy()
Scrollt eine Seite automatisch um so viele Pixel nach oben oder unten oder links oder rechts wie
angegeben. Erwartet folgende Parameter:
1. x-Wert = um wie viele Pixel nach rechts links/rechts gescrollt werden soll. Negative Werte
scrollen nach links, positive nach rechts.
2. y-Wert = um wie viele Pixel nach oben/unten gescrollt werden soll. Negative Werte scrollen
nach oben, positive nach unten.

20.2 window

675

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-for(var i=1; i<=100; i++)
document.write("<br>Zeile " + i);
function NachOben() {
var y=0;
if (window.pageYOffset)
else if (document.body && document.body.scrollTop) y=document.body.scrollTop;
while(y > 0) {
setTimeout("window.scrollBy(0,-10)",10);
y = y - 10;
}
}
//-->
</script>
<a href="javascript:NachOben()">nach oben scrollen</a>
</body></html>

Das Beispiel schreibt zu Testzwecken in einer Schleife mit document.write() 100 Zeilen in die
Datei. Unterhalb davon wird ein HTML-Verweis notiert. Um zu diesem Verweis zu gelangen,
muss der Anwender wegen der 100 voranstehenden Zeilen erst mal nach unten scrollen. Wenn
er auf den Verweis klickt, wird automatisch langsam zum Seitenanfang zurckgescrollt. Dazu
wird die Funktion NachOben() aufgerufen. Diese Funktion ermittelt mit pageYOffset bzw. im
MS Internet Explorer mit document.body.offsetTop zunchst die vertikale Position innerhalb
der Seite. Dann wird innerhalb einer while-Schleife so lange nach oben gescrollt, bis die Scrollposition bei 0 angelangt ist.
In dem Beispiel wird dazu nur der y-Wert jeweils um -10 Pixel verndert. So wird die Seite bei
jedem Scroll-Befehl um 10 Pixel nach oben gescrollt. Der Verzgerungseffekt beim Scrollen
kommt im Beispiel dadurch zustande, dass die Scroll-Befehle in die Methode setTimeout()
eingebunden sind.

scrollTo()
Scrollt zu einer bestimmten Position. Erwartet folgende Parameter:
1. x-Wert = Links-Wert fr Position der linken oberen Ecke des Anzeigefensters.
2. y-Wert = Oben-Wert fr Position der linken oberen Ecke des Anzeigefensters.
Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-function Pos100() { window.scrollTo(100,100) }
var Zeile = "<nobr>Zeile";
for(var i=1; i<=100; i++)
{

676

Kapitel 20: JavaScript Objekt-Referenz

Zeile = Zeile + " Zeile";

document.write("<br>Zeile " + Zeile);
}
document.write("<a href=javascript:Pos100()> Test<\/a><\/nobr>");
//-->
</script>
</body></html>

Das Beispiel schreibt zu Testzwecken in einer Schleife mit document.write() 100 Zeilen, wobei
die Zeilen immer lnger werden. Ganz am Ende wird ein Verweis notiert. Um dort hin zu gelangen, muss der Anwender nach unten und nach rechts scrollen. Wenn er auf den Verweis klickt,
wird die Funktion Pos100() aufgerufen. Diese Funktion setzt die Scroll-Position neu, und zwar
auf 100 Pixel von links und 100 Pixel von oben, bezogen auf den Dokumentanfang.

setInterval()
Fhrt eine Anweisung oder den Aufruf einer Funktion in einem festgelegten Rhythmus immer
wieder aus, solange, bis der Vorgang mit clearInterval() beendet wird. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die wiederholt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum nchsten Ausfhren.
Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var aktiv = window.setInterval("Farbe()",1000);
var i = 0, farbe = 1;
function Farbe() {
if(farbe==1)
{ document.bgColor="yellow"; farbe=2; }
else
{ document.bgColor="aqua"; farbe=1; }
i = i + 1;
if(i >= 10)
window.clearInterval(aktiv);
}
//-->
</script>
</body></html>

Das Beispiel definiert mit setInterval(), dass die Funktion Farbe() alle 1000 Millisekunden,
also jede Sekunde einmal aufgerufen wird. Wichtig ist, dass der Aufruf in einer Variablen gespeichert wird, im Beispiel in der Variablen aktiv. Diese Variable wird bei der Methode clearInterval() bentigt, um den Vorgang zu stoppen. Im Beispiel wechselt die Funktion Farbe() bei
jedem Aufruf die Hintergrundfarbe der Datei (document.bgColor). Gleichzeitig wird ein Zhler
hochgezhlt. Wenn er grer/gleich 10 ist, wird die Methode clearInterval() aufgerufen, die
den Endlosvorgang stoppt. Dabei wird die zuvor definierte Variable aktiv als Parameter bergeben.

20.3 frames

677

setTimeout()
Fhrt eine Anweisung nach einer bestimmten Verzgerungszeit aus. Erwartet zwei Parameter:
1. Code = Eine JavaScript-Anweisung, die wiederholt werden soll. Meistens ein Funktionsaufruf.
2. Pause = Wert in Millisekunden bis zum Ausfhren.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Hinweis() {
var x = confirm("Sie sind jetzt schon 10 Minuten auf dieser Seite. Fortfahren?");
if(x == false) top.close();
}
window.setTimeout("Hinweis()",600000);
//-->
</script>
</head><body>
</body></html>

Das Beispiel ruft nach 600000 Millisekunden, also nach 10 Minuten, eine Funktion Hinweis()
auf, sofern der Anwender nach dieser Zeit immer noch auf der Seite ist. Die Funktion fragt ihn
mit der confirm()-Methode, ob er noch lnger auf der Seite bleiben mchte. Wenn nicht, wird
das Hauptfenster geschlossen. Dazu dient der Befehl top.close(), der die close()-Methode
auf die oberste Fenster-Instanz des Browsers anwendet.
Beachten Sie: An setTimeout() gekoppelte Funktionsaufrufe knnen auch Parameter enthalten. Bercksichtigen Sie dabei, dass lokale Variablen dann nicht mehr zur Verfgung stehen.
Eine bergabe der Werte mittels Zeichenkettenverknpfung ist jedoch jederzeit mglich.

stop()
Entspricht einem Klick auf den (Stop)-Button im Browser. Der Ladevorgang einer Seite wird
dadurch abgebrochen. Das Beispiel definiert einen Verweis, bei dessen Anklicken der Ladevorgang einer Seite abgebrochen wird:
<html><head><title>Test</title>
</head><body>
Diese Seite hat einen Umfang von 300 Kilobyte:<br>
<a href="javascript:stop()">abbrechen</a>
</body></html>

20.3

frames

Eigenschaft
length (Anzahl Frames)

678

Kapitel 20: JavaScript Objekt-Referenz

Unterobjekte
document
event
history
location

frames: Allgemeines zur Verwendung

Mit dem Objekt frames haben Sie Zugriff auf Frames, also auf ein Frameset und seine FrameFenster, die in einer HTML-Datei definiert sind. Da jedes Frame-Fenster aus Sicht des Browsers
ein eigenes Fenster darstellt, ist das frames-Objekt lediglich eine Variante des window-Objekts,
also des allgemeinen Fenster-Objekts. Alle Eigenschaften und Methoden, die zum windowObjekt gehren, lassen sich auch auf das frames-Objekt, also auf einzelne Frame-Fenster anwenden. Das frames-Objekt stellt nur deshalb ein eigenes Objekt dar, weil es eine zustzliche Eigenschaft enthlt und weil bei der Adressierung von Frame-Fenstern in JavaScript ein paar Besonderheiten zu beachten sind:
Schema 1 / Beispiel 1:
parent.frames[#].Eigenschaft/Methode();
parent.frames[1].location.href = "sport.html";

Schema 2 / Beispiel 2:
parent.NameDesFrames.Eigenschaft/Methode();
parent.RechtesFenster.close();

parent ist ein reservierter Fenstername, den Sie zum Ansprechen von Fenstern innerhalb eines
Framesets verwenden knnen. Anstelle von parent knnen Sie auch top verwenden. Mit parent
sprechen Sie das Elternfenster des aktuellen Frame-Fensters an, mit top in jedem Fall das oberste

Anzeigefenster des Browsers.

Frame-Fenster knnen Sie auf zwei Arten ansprechen:
Mit einer Indexnummer (wie in Schema 1 / Beispiel 1):
Bei Verwendung von Indexnummern geben Sie frames an und dahinter in eckigen Klammern, das wievielte Frame-Fenster im Frameset Sie meinen. Beachten Sie, dass der Zhler bei
0 beginnt, d.h. das erste Frame-Fenster sprechen Sie mit frames[0] an, das zweite FrameFenster mit frames[1] usw. Beim Zhlen gilt die Reihenfolge, in der die <frame>-Befehle im
Frameset definiert sind.
Mit dem Namen des Frame-Fensters (wie in Schema 2 / Beispiel 2):
Dabei geben Sie den Namen an, der bei der HTML-Definition des Frame-Fensters bei <frame
...> im Attribut name= definiert worden ist.
Da das frames-Objekt eigentlich eine Variante des window-Objekts ist, knnen Sie nicht nur alle
Eigenschaften und Methoden des window-Objekts auf das frames-Objekt anwenden, sondern
auch alle anderen, die in der Hierarchie unterhalb des window-Objekts stehen. Ebenso, wie Sie
beispielsweise mit window.document.forms[0].elements[0].value = "Stefan" den Inhalt
eines Formular-Eingabefelds in einer gewhnlichen HTML-Datei ndern knnen, knnen Sie

20.3 frames

679

das Gleiche innerhalb eines Framesets etwa mit parent.frames[1].document.forms[0].

elements[0].value = "Stefan" erreichen. Ein typisches Anwendungsbeispiel fr den Einsatz
des Frame-Objekts ist das Beispiel Zwei Frames gleichzeitig ndern in Kapitel 19.1.

Auf JavaScripts in anderen Frames zugreifen

Mit der gleichen Syntax, wie Sie auf HTML-Elemente in anderen Frame-Fenstern zugreifen knnen, knnen Sie auch auf JavaScripts zugreifen, die in einem anderen Frame-Fenster aktuell
notiert sind. So knnen Sie Variablen des anderen Scripts auslesen und Funktionen des anderen
Scripts aufrufen.
Das folgende Beispiel zeigt ein Frameset mit zwei Fenstern oben und unten. Das obere Fenster
hat bei der Frameset-Definition den Namen oberesFenster erhalten. Aus dem unteren FrameFenster wird nun auf ein JavaScript im oberen Frame-Fenster zugegriffen.
Beispieldatei im oberen Frame-Fenster:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var c = 0;
function gibaus_c() {
alert(c);
}
function erhoehe_c() {
c++;
window.setTimeout("erhoehe_c()",100);
}
//-->
</script>
</head><body onLoad="erhoehe_c()">
<p>Hier wird einfach nur 10 mal pro Sekunde die Variable <i>c</i> erh&ouml;ht!</p>
</body></html>

Beispieldatei im unteren Frame-Fenster:

<html><head><title>Test</title>
<script type="text/javascript">
<!-function reset_c() {
parent.oberesFenster.c = 0;
}
//-->
</script>
</head><body>
<p>
<a href="javascript:parent.oberesFenster.gibaus_c()">Variable <i>c</i>
anzeigen!</a><br>
<a href="javascript:reset_c()">Variable <i>c</i> auf 0 setzen!</a>
</p>
</body></html>

680

Kapitel 20: JavaScript Objekt-Referenz

20.1: Im unteren Frame greift ein Script auf Variablen aus dem oberen Frame zu.

Im oberen Fenster ist ein Script mit zwei Funktionen namens gibaus_c() und erhoehe_c()
notiert. Die Funktion erhoehe_c() wird mit dem Event-Handler onLoad im einleitenden
<body>-Tag erstmals gestartet und ruft sich dann mit Hilfe der Methode setTimeout() alle 100
Millisekunden, also 10-mal pro Sekunde selber wieder auf. Dabei erhht sie jedes Mal die
Variable c um 1.
Im unteren Fenster sind zwei Verweise notiert. Der erste gibt den aktuellen Zhlerstand von c
aus. Dazu wird mit parent.oberesFenster.gibaus_c()" auf die Funktion gibaus_c() im
anderen Frame-Fenster zugegriffen. Der zweite Verweis ruft eine Funktion reset_c() auf, die
im Dateikopf des eigenen Dokuments notiert ist. Diese greift jedoch mit parent.oberesFenster.c auf die Variable c im anderen Frame-Fenster zu und setzt diese auf 0 zurck.

length
Speichert, wie viele Frame-Fenster ein bergeordnetes Fenster enthlt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-for(var i=0; i < parent.frames.length; i++)
alert(parent.frames[i].name);
//-->
</script>
</head><body>
</body></html>

Mit parent.frames.length oder top.frames.length knnen Sie die Anzahl der FrameFenster ermitteln. Im Beispiel wird angenommen, dass die HTML-Datei innerhalb eines Framesets aufgerufen wird. Beim Einlesen der Datei gibt die Datei mit der Methode alert() nacheinander die Namen aller Frame-Fenster im Frameset aus. Dazu dient die for-Schleife. Die Eigenschaft parent.frames.length dient als Abbruchbedingung fr die Schleife. Da der Schleifenzhler i bei jedem Schleifendurchlauf um 1 erhht wird, wird mit parent.frames[i] jeweils
das nchste Frame-Fenster angesprochen.

20.4 document

20.4

document

Eigenschaften
alinkColor
bgColor
charset
cookie
defaultCharset
fgColor
lastModified
linkColor
referrer
title
URL
vlinkColor

(Farbe fr Verweise beim Anklicken)

(Hintergrundfarbe)
(verwendeter Zeichensatz)
(beim Anwender speicherbare Zeichenkette)
(normaler Zeichensatz)
(Farbe fr Text)
(letzte nderung am Dokument)
(Farbe fr Verweise)
(zuvor besuchte Seite)
(Titel der Datei)
(URL-Adresse der Datei)
(Farbe fr Verweise zu besuchten Zielen)

Methoden
captureEvents()
close()
createAttribute()
createElement()
createTextNode()
getElementById()
getElementsByName()
getElementsByTagName()
getSelection()
handleEvent()
open()
releaseEvents()
routeEvent()
write()
writeln()

Unterobjekte
HTML-Elemente
node
all
anchors
applets
forms
images
layers
links
plugins

(Ereignisse berwachen)
(schlieen)
(Attributknoten erzeugen)
(Elementknoten erzeugen)
(Textknoten erzeugen)
(HTML-Elementzugriff ber id-Attribut)
(HTML-Elementzugriff ber name-Attribut)
(HTML-Elementzugriff ber Elementliste)
(selektierter Text)
(Ereignisse verarbeiten)
(Dokument ffnen)
(Ereignisse abschlieen)
(Event-Handler-Hierarchie durchlaufen)
(ins Dokumentfenster schreiben)
(zeilenweise schreiben)

681

682

Kapitel 20: JavaScript Objekt-Referenz

document: Allgemeines zur Verwendung

Das document-Objekt bezieht sich auf den Inhalt, der in einem Browser-Fenster angezeigt wird.
In der Objekthierarchie von JavaScript liegt es unterhalb des window-Objekts. Im Document
Object Model (DOM) des W3-Konsortiums ist das document-Objekt das Ausgangsobjekt fr
den Elementbaum. Die Elemente eines HTML-Dokuments stellen dem DOM zufolge also
Unterobjekte des document-Objekts dar. Die einzelnen HTML-Elemente knnen dabei eigene
Eigenschaften und Methoden haben. Diese werden im Abschnitt 20.5 ber HTML-Elementobjekte beschrieben. Entscheidend fr den Zugriff auf den HTML-Elementbaum sind beim document-Objekt die DOM-Methoden getElementById und getElementsByName.
Darber hinaus enthlt das document-Objekt selber eine Reihe wichtiger Eigenschaften und
Methoden, die dokumentglobale Eigenschaften speichern oder Funktionen ausfhren. Die
meisten davon werden auch vom DOM untersttzt. Das Ansprechen dieser Eigenschaften und
Methoden funktioniert wie folgt:
x = document.title;
x = window.document.title;
Zweitfenster = window.open("datei2.htm", "Fenster");
x = Zweitfenster.document.title;
y = parent.frames[2].document.bgColor;
document.write("Hallo Welt");
window.document.write("Hallo Welt");
Zweitfenster.document.close();
parent.frames[2].document.close();

Eigenschaften des document-Objekts, wie etwa der Titel der angezeigten HTML-Datei
(<title>...</title>), knnen Sie mit document ansprechen, den Titel der Datei also document.title. Entsprechend werden Methoden des document-Objekts angesprochen, zum Beispiel die write-Methode mit document.write(). Sie knnen auch window.document.title
oder window.document.write() notieren. Da es sich dabei aber um den Inhalt des aktuellen
Fensters handelt, ist die Angabe des Fensterobjekts nicht zwingend erforderlich. Anders beim
Zugriff auf andere Fenster oder Frame-Fenster. In diesen Fllen mssen Sie das Fenster korrekt
adressieren. Lesen Sie fr zustzliche Fenster den Abschnitt 20.2 zur Verwendung des windowObjekts und fr Frame-Fenster den Abschnitt 20.3 ber die Verwendung des frames-Objekts.

alinkColor
Speichert die Farbe fr Verweise, whrend diese angeklickt werden, wie beim Attribut alink= im
<body>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt ist (siehe auch
Kapitel 4.2.1 Farben fr Hintergrund, Text und Verweise). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var i = 0;
function AndereFarbe() {

20.4 document

683

if(i == 0) document.alinkColor = "#000000";

else if(i == 1) document.alinkColor = "#FF0000";
else if(i == 2) document.alinkColor = "#0000FF";
else if(i == 3) document.alinkColor = "green";
i = i + 1; if(i > 3) i = 0;
}
//-->
</script>
</head><body>
<a href="javascript:AndereFarbe()">Verweisfarbe</a>
</body></html>

Das Beispiel ruft beim Anklicken des Verweises eine Funktion namens AndereFarbe() auf.
Diese Funktion ndert bei jedem ihrer Aufrufe den Wert fr document.alinkColor. Beachten
Sie, dass Farben dabei entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen
(siehe auch Kapitel 3.5 Farben definieren in HTML). Der Wert muss in jedem Fall in Anfhrungszeichen stehen.
Beachten Sie: Diese klassische, im herkmmlichen JavaScript gltige Implementierung von
alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut
DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen. Opera 5.12 interpretiert
die Eigenschaft alinkColor nicht.

bgColor
Speichert die Hintergrundfarbe der HTML-Datei, wie sie beim Attribut bgcolor= im <body>Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar ist (siehe auch Kapitel 4.2.1
Farben fr Hintergrund, Text und Verweise). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var x1 = 0, x2 = 0;
function setColor() {
document.bgColor ="#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
x2 = x2 + 1;
if(x2 % 16 == 0) { x2 = 0; x1 = x1 + 1; }
}
for(var i = 0; i < 255; ++i) {
window.setTimeout("setColor()",20);
}
//-->
</script>
</head><body>
</body></html>

Das Beispiel blendet beim Einlesen die Hintergrundfarbe von Schwarz ber Graustufen nach
Wei auf. Dazu wird ein Array X definiert, in dem die Hexadezimalziffern 0 bis 9 und A bis F
gespeichert werden. In einer for-Schleife wird von 0 bis 255 gezhlt. Der Grund ist, dass 255 der
maximale Wert (dezimal gesehen) eines RGB-Farbwerts sein kann. Innerhalb der Schleife wird

684

Kapitel 20: JavaScript Objekt-Referenz

mit window.setTimeout() nach jeweils 20 Millisekunden Verzgerungszeit die Funktion setColor() aufgerufen. Innerhalb dieser Funktion wird der Eigenschaft document.bgColor jeweils
ein neuer Wert zugewiesen. Dabei wird aus den zuvor definierten Ziffern das Arrays X eine gltige Farbangabe konstruiert.
Beachten Sie, dass Farben entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Kapitel 3.5 Farben definieren in HTML). Der Wert muss in jedem Fall in
Anfhrungszeichen stehen. Im obigen Beispiel tut er das nicht, weil es sich um eine Zeichenkette
handelt, die dynamisch konstruiert wird. Fixe Angaben wren beispielsweise "#0099CC" oder
"blue".
Beachten Sie: Diese klassische, im herkmmlichen JavaScript gltige Implementierung von
bgColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut DOM
soll das HTML-Elementobjekt body diese Eigenschaft besitzen. In vielen Dokumentationen wird
angegeben, dass die hexadezimale Farbangabe ohne das Gatterzeichen (#) zu erfolgen hat. Der
Netscape 6 interpretiert jedoch unter Doctype-Angaben wie z.B. <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
die Farbe nur dann, wenn ein Gatterzeichen (#) notiert wurde. Da die Verwendung des Gatter-

zeichens auch in lteren Browsern keine Probleme verursacht, empfiehlt es sich, dieses stets zu
notieren.
Opera 5.12 interpretiert die Eigenschaft document.bgColor noch nicht. Netscape 6.1 interpretiert das obige Beispiel (im Gegensatz zu Netscape 4.x) nicht.

charset
Speichert den definierten Zeichensatz eines Dokuments. Das Beispiel enthlt im Dateikopf eine
Angabe zur Definition des Zeichensatzes. Dort wird iso-8859-1 definiert (der Standardzeichensatz fr westliche Sprachen, inklusive der deutschen). Ferner enthlt die Datei einen Verweis. Beim Anklicken wird die Funktion iso5() aufgerufen. Diese Funktion ndert den Zeichensatz auf iso-8859-5 (Kyrillisch). Anschlieend werden dynamisch Inhalte in das Dokumentfenster geschrieben. Der MS Internet Explorer schreibt den angegebenen Text in das Dokumentfenster, schaltet dabei jedoch auf eine spezielle Unicode-Schriftart zur Darstellung um.
Beachten Sie, dass zum Schreiben des neuen Inhalts die Methoden open() und close() verwendet werden.
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html;CHARSET=iso-8859-1">
<script type="text/javascript">
<!-function iso5() {
document.charset="iso-8859-5";
document.open();
document.write("Text mit ");
document.close();
}
//-->
</script>
</head><body>
<a href="javascript:iso5()">iso-8859-5</a>
</body></html>

20.4 document

685

Beachten Sie: Der MS Internet Explorer akzeptiert den genderten Zeichensatz oft erst nach dem
Reload der Seite und einer erneuten Ausfhrung der nderung.

cookie
Cookies (cookies = Kekse die Herkunft des Namens ist unbekannt) bieten Ihnen die Mglichkeit,
direkt aus einer HTML-Datei heraus Daten auf dem Rechner des Anwenders zu speichern und
beim erneuten Aufruf der gleichen HTML-Datei wieder auszulesen. So kann eine WWW-Seite
dynamisch auf gespeicherte Daten reagieren. Es ist nur mglich, diejenigen Cookies auszulesen,
die man selbst gesetzt hat. Eine Virenbertragung mit Cookies ist ausgeschlossen. Ein Cookie ist
in etwa das Gleiche wie ein Eintrag in einer ini-Datei unter MS-Windows. Es wird eine Variable
mit einem zugewiesenen Wert abgespeichert, zum Beispiel Datum und Uhrzeit des letzten Besuchs der WWW-Seite. Es knnen keine Rechnerdaten des Anwenders ausgelesen werden.
Angesichts des vorherrschenden Misstrauens bei Anwendern, die nicht wissen, was ein Cookie
ist, sollten Sie Cookies nur verwenden, wenn Sie einen Grund dazu haben.
Netscape verwaltet Cookies in einer Datei namens cookies.txt auf dem Rechner des Anwenders.
Der MS Internet Explorer verwaltet die Cookies in einem Unterverzeichnis des Windows-Verzeichnisses. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var gespeichert = "nichts gespeichert";
if(document.cookie)
gespeichert = document.cookie;
else
document.cookie = "Zeitstempel=" + document.lastModified;
alert(document.lastModified + " - " + gespeichert);
//-->
</script>
</head><body>
</body></html>

Das Lesen eines Cookies funktioniert nach dem Schema x = document.cookie. Das Schreiben
eines Cookies funktioniert nach dem Schema document.cookie = x. Das Beispiel frgt beim
Einlesen der Datei ab, ob diese Datei schon einmal einen Cookie gesetzt hat. Eine solche Abfrage
ist mit if(document.cookie) mglich. Im Beispiel wird die Variable gespeichert mit dem
Wert des gespeicherten Cookies versorgt, falls ein Cookie vorhanden ist. Im else-Zweig des
Beispiels steht der Fall, dass noch kein Cookie gesetzt wurde. In diesem Fall wird als Cookie die
Zeichenkette Zeitstempel= und dahinter der Wert von lastModified geschrieben. Am Ende
werden mit alert() zwei Werte ausgegeben: nmlich der Wert von document.lastModified
und der Wert der Variablen gespeichert. Wenn ein Cookie gesetzt ist (also ab dem zweiten
Aufruf der Datei), wird der Inhalt des Cookies ausgegeben, der sich von document.
lastModified dann unterscheidet, wenn die Datei mittlerweile gendert wurde.
Beim Setzen eines Cookies knnen Sie auerdem einen Verfallszeitpunkt angeben. Wenn der
Verfallszeitpunkt erreicht ist, lscht der Browser den Cookie selbststndig. Notieren Sie dazu
eine Anweisung der Form: document.cookie = "expires=" + Verfallsdatum.

686

Kapitel 20: JavaScript Objekt-Referenz

Damit der Browser diese Eigenschaft interpretiert, muss das Verfallsdatum mit der Methode
toGMTString() des Date-Objektes formatiert werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var ablauf = new Date();
var infuenfTagen = ablauf.getTime() + (5 * 24 * 60 * 60 * 1000);
ablauf.setTime(infuenfTagen);
document.cookie = "Name=SELFHTML; expires=" + ablauf.toGMTString();
alert(document.cookie) ;
//-->
</script>
</head><body>
</body></html>

In der Variablen ablauf wird eine neue Instanz des Date-Objekts angelegt. Diese enthlt das
aktuelle Datum. Das Verfallsdatum ist 5 Tage nach dem Setzen des Cookies. Zur Bestimmung
des Verfallsdatums wird das aktuelle Datum mit der Methode getTime() in Millisekunden umgewandelt. Zu diesem Wert wird die Anzahl der Millisekunden fr 5 Tage addiert. Um den
Millisekundenwert zu ermitteln, knnen Sie wie im Beispiel eine Multiplikationskette bergeben:
1000 Millisekunden sind eine Sekunde, mal 60 macht eine Minute, mal 60 macht eine Stunde,
mal 24 einen Tag, und mal 5 macht fnf Tage.
Um eine gltige Datumszeichenkette zu erhalten, wird mit der Methode setTime() dem Datum
ein neuer Wert zugewiesen. In der Variablen ablauf ist dann das korrekte Ablaufdatum gespeichert. Dem Cookie wird schlielich das mit der Methode toGMTString() formatierte Datum
bergeben.
Beachten Sie: Jede HTML-Datei hat Kenntnis von allen Cookies, die von Dateien aus dem gleichen oder einem hheren Verzeichnis gesetzt wurden. Angenommen, bei einer Domain
http://www.test.de mit dem Unterverzeichnis /A gibt es in diesem Unterverzeichnis sowie im
Wurzelverzeichnis / jeweils eine Datei namens x.htm. Beide Dateien enthalten jeweils ein JavaScript mit der Anweisung:
document.cookie = location.href;

Damit wird der URI der Datei in einem Cookie gespeichert. Ferner gibt es in beiden Verzeichnissen eine Datei y.htm, die jeweils folgende JavaScript-Anweisung enthlt:
document.write(document.cookie);

Damit wird ein vorhandener Cookie dynamisch ins Dokumentfenster geschrieben. Bei der angenommenen Anordnung liefern folgende Dateien folgende Ausgaben:
http://www.test.de/y.htm liefert:
http://www.test.de/x.htm (kann also den Cookie lesen, den x.htm im gleichen Verzeichnis
gesetzt hat)
http://www.test.de/A/y.htm liefert:
http://www.test.de/A/x.htm; http://www.test.de/x.htm (kann also den Cookie lesen,
den x.htm im gleichen Verzeichnis gesetzt hat, sowie den Cookie, den die x.htm im Verzeichnis
oberhalb gesetzt hat)
Im MS Internet Explorer ab Version 5 und im Netscape 6 knnen Sie mittels der Eigenschaft
navigator.cookieEnabled abfragen, ob der Anwender Cookies aktiviert hat. Opera 5.12

20.4 document

687

erlaubt kein Setzen von Cookies im Protokoll file. Mit anderen Worten: Cookies funktionieren
nicht auf der lokalen Festplatte, sondern nur beim Ausfhren von einem Web-Server.

defaultCharset
Speichert den Zeichensatz, den der Anwender als Standard im Browser eingestellt hat. Wenn die
Datei keine Meta-Angabe zum verwendeten Zeichensatz enthlt, wird der Standardzeichensatz
angenommen. Das Beispiel gibt beim Einlesen der Datei mit alert() aus, welchen Zeichensatz
der Anwender als Standardzeichensatz eingestellt hat:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert("Sie haben als Zeichensatz eingestellt: " + document.defaultCharset);
//-->
</script>
</head><body>
</body></html>

fgColor
Speichert die Farbe fr Text, wie beim Attribut text= im <body>-Tag oder vom Anwender in
seinen Browser-Einstellungen festlegbar (siehe auch Kapitel 4.2.1 Farben fr Hintergrund, Text
und Verweise). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(parent.frames[0].document.fgColor == "#000000")
document.fgColor = "#FF0000";
//-->
</script>
</head><body>
Ein kleiner Text
</body></html>

Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Framesets befindet. Beim
Einlesen der Datei wird geprft, ob die Textfarbe eines anderen (des ersten) Frame-Fensters
schwarz ist (if(parent.frames[0].document.fgColor == "#000000")). Wenn dies der Fall
ist, wird die Textfarbe der aktuellen Datei auf rot gesetzt (document.fgColor = "#FF0000";).
Beachten Sie, dass Farbnderungen fr die Textfarbe in Netscape bis einschlielich Version 4 nur
Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde. Ein gegebenenfalls im
<body>-Tag gesetztes Attribut berschreibt die Farbzuweisung, falls diese zuvor im Dateikopf
mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, dass Farben entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Kapitel 3.5, Farben definieren in HTML). Der Wert muss in jedem Fall in Anfhrungszeichen stehen.
Beachten Sie: Diese klassische, im herkmmlichen JavaScript gltige Implementierung von
alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut
DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen. Opera 5.12 interpretiert

diese Eigenschaft noch nicht.

688

Kapitel 20: JavaScript Objekt-Referenz

lastModified
Speichert Datum und Uhrzeit der letzten nderung der Datei, und zwar im internationalen
Format nach GMT (Greenwich-Zeit). Das Beispiel schreibt mit der Methode write() den Zeitpunkt der letzten nderung dynamisch in die HTML-Datei:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("letzter Update: " + document.lastModified);
//-->
</script>
</body></html>

Beachten Sie: Die Formatierung der Zeichenkette ist stark abhngig vom Browser und dem verwendeten Betriebssystem. Bercksichtigen Sie insbesondere bei der Weiterverarbeitung dieser
Eigenschaft mit dem Date-Objekt, dass einige Versionen des Netscape 4 eine zweistellige Jahreszahl an das Date-Objekt bergeben. Dies fhrt unter anderem dazu, dass ein falscher Wochentag
und ein falsches Jahr zurckgegeben werden.

linkColor
Speichert die Farbe fr Verweise, wie beim Attribut link= im <body>-Tag oder vom Anwender
in seinen Browser-Einstellungen festlegbar (siehe auch Kapitel 4.2.1 Farben fr Hintergrund, Text
und Verweise). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-document.linkColor = parent.frames[0].document.linkColor;
//-->
</script>
</head><body>
<a href="#">Ein Verweis</a>
</body></html>

Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Framesets befindet. Beim
Einlesen der Datei wird die Verweisfarbe der aktuellen Datei auf die gleiche Farbe gesetzt wie die
Verweisfarbe der Datei, die sich in einem anderen (dem ersten) Frame-Fenster befindet.
Beachten Sie, dass Farbnderungen fr die Verweisfarbe in Netscape bis einschlielich Version 4
nur Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde. Ein gegebenenfalls im
<body>-Tag gesetztes Attribut berschreibt die Farbzuweisung, falls diese zuvor im Dateikopf
mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, dass Farben entweder hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Kapitel 3.5 Farben definieren in HTML). Der Wert muss in jedem Fall in Anfhrungszeichen stehen.
Beachten Sie: Diese klassische, im herkmmlichen JavaScript gltige Implementierung von
alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut
DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen. Opera 5.12 interpretiert

diese Eigenschaft noch nicht.

20.4 document

689

referrer
Speichert den URI, von dem aus die aktuelle Datei aufgerufen wurde. Voraussetzung ist, dass er
die aktuelle Datei ber einen Verweis aufgerufen hat. Wenn er die Adresse der Datei stattdessen
etwa als Lesezeichen ausgewhlt oder direkt in die Adresszeile des Browsers eingegeben hat, ist in
document.referrer nichts gespeichert. Beim MS Internet Explorer und in Netscape 6 wird in
document.referrer nur dann etwas gespeichert, wenn der Aufruf der aktuellen Datei ber das
HTTP-Protokoll erfolgte, also mit einem Verweis vom Typ http://.... Das Beispiel gibt im
HTML-Text mit der Methode write() aus, von woher der Anwender die aktuelle Datei aufgerufen hat:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("<h1>Lieber Besucher<\/h1>");
document.write("Du hast also von " + document.referrer + " hierher gefunden");
//-->
</script>
</body></html>

Beachten Sie: Opera 5.12 interpretiert diese Eigenschaft noch nicht.

title
Speichert den Titel einer HTML-Datei, wie er bei <title>...</title> vergeben wurde. Das
Beispiel schreibt mit der Methode write() den Titel der HTML-Datei dynamisch als Inhalt in
eine berschrift 1. Ordnung (<h1>...</h1>):
<html><head><title>Test</title>
</head><body>
<h1>
<script type="text/javascript">
<!-document.write(document.title);
//-->
</script>
</h1>
</body></html>

Beachten Sie: Im MS Internet Explorer und im Netscape Navigator knnen Sie diese Eigenschaft
auch ndern.

URL
Speichert den vollstndigen URI des aktuellen Dokuments. Das Beispiel schreibt mit der
Methode write() die eigene vollstndige Adresse in den Text. So etwas kann durchaus Sinn machen, beispielsweise, wenn die Datei Teil eines Framesets ist. Anwender knnen sich dann auf die
genaue Adresse beziehen, wenn Sie zu dem angezeigten Frame-Inhalt etwas mitteilen wollen.

690

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("Diese Datei: " + document.URL);
//-->
</script>
</body></html>

vlinkColor
Speichert die Farbe fr Verweise zu bereits besuchten Seiten, wie beim Attribut vlink= im
<body>-Tag oder vom Anwender in seinen Browser-Einstellungen festlegbar (siehe auch 4.2.1
Farben fr Hintergrund, Text und Verweise). Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-document.vlinkColor = parent.frames[0].document.vlinkColor;
//-->
</script>
</head><body>
<a href="../document.htm">Verweis</a>
</body></html>

Das Beispiel nimmt an, dass sich die aktuelle Datei innerhalb eines Framesets befindet. Beim
Einlesen der Datei wird die Farbe fr Verweise zu besuchten Seiten in der aktuellen Datei auf die
gleiche Farbe gesetzt wie bei der Datei, die sich in einem anderen (dem ersten) Frame-Fenster
befindet. Beachten Sie, dass Farbnderungen fr die Verweisfarbe in Netscape bis einschlielich
Version 4 nur Wirkung haben, bevor irgendwelcher HTML-Text eingelesen wurde. Ein gegebenenfalls im <body>-Tag gesetztes Attribut berschreibt die Farbzuweisung, falls diese zuvor im
Dateikopf mit JavaScript gesetzt wurde. Beachten Sie bei den Farbangaben, dass Farben entweder
hexadezimal notiert werden oder in Form erlaubter Farbnamen (siehe auch Kapitel 3.5 Farben
definieren in HTML). Der Wert muss in jedem Fall in Anfhrungszeichen stehen.
Beachten Sie: Diese klassische, im herkmmlichen JavaScript gltige Implementierung von
alinkColor als direkte Eigenschaft des document-Objekts wird vom DOM missbilligt. Laut
DOM soll das HTML-Elementobjekt body diese Eigenschaft besitzen. Opera 5.12 interpretiert

diese Eigenschaft noch nicht.

captureEvents()
berwacht Anwenderereignisse im aktuellen Dokument. Funktioniert genau so wie captureEvents() beim window-Objekt (nhere Informationen siehe dort). Der einzige Unterschied ist,
dass Sie mit document.captureEvents() nur Ereignisse innerhalb des Dokumentfensters
berwachen knnen, jedoch keine Ereignisse im gesamten Fensterbereich (zu dem beispielsweise
auch Titelleiste, Menleisten usw. gehren).

20.4 document

691

close()
Schliet einen Dokumentinhalt, der mit der open()-Methode geffnet und mit den Methoden
write() oder writeln() beschrieben wurde. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.open();
document.write(document.URL);
document.close();
//-->
</script>
</body></html>

Das Beispiel ffnet den Dokumentinhalt zum Schreiben, dann schreibt es etwas (den aktuellen
URI) mit der Methode write(), und zuletzt schliet es den Vorgang mit document.close()
ab. Mit dem Schlieen des Dokumentes wird dem Browser signalisiert, dass der Aufbau der Seite
abgeschlossen ist. Dies ist besonders beim dynamischen Schreiben von Frames und zum
Beschreiben von Layern erforderlich.

createAttribute()
Erzeugt ein neues Attribut fr den Elementbaum. lsst sich auf HTML-, aber auch auf XMLDokumente anwenden. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<h1>Eine sehr dynamische Seite</h1>
<script type="text/javascript">
<!-var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);
//-->
</script>
</body></html>

Das Beispiel enthlt eine berschrift erster Ordnung ohne weitere Attribute. Unterhalb davon ist
ein JavaScript-Bereich notiert. Dort wird mit document.createAttribute("align") ein neues
Attribut mit Namen align erzeugt, das in diversen HTML-Elementen zum Ausrichten des
Inhalts verwendet werden kann. Das Attribut hat damit aber noch keine Wirkung es hngt weder im Elementbaum des Dokuments, noch hat es einen Wert. Das Attribut ist lediglich als
Objekt erzeugt.
Die Methode createElement() gibt das erzeugte Objekt, also in dem Fall das align-Attribut,
zurck. Der Rckgabewert wird in der Variablen Ausrichtung gespeichert. ber diese Variable
ist das neu erzeugte Attribut von da ab ansprechbar.

692

Kapitel 20: JavaScript Objekt-Referenz

Damit das Attribut einen Inhalt erhlt, wird dem Attributknoten ber die Objekteigenschaft
nodeValue der gewnschte Wert right zugewiesen. Anschlieend mssen das Attribut und sein
Wert noch in den vorhandenen Elementbaum eingehngt werden. Dies geschieht in der Anweisung Element.setAttributeNode(Ausrichtung); (siehe auch setAttributeNode()). Dabei
wurde zuvor in der Variablen Element das h1-Element gespeichert, auf das mit getElementsByTagName() zugegriffen wurde. Somit wird die berschrift dynamisch rechtsbndig ausgerichtet.
Beachten Sie: Mit dem Internet Explorer 5.5 war dieses Beispiel nicht nachvollziehbar, wenngleich Microsoft behauptet, diese Methode im Internet Explorer implementiert zu haben. Im MS
Internet Explorer 6.0 ist das Beispiel dagegen nachvollziehbar.

createElement()
Erzeugt ein neues Element fr den Elementbaum. lsst sich auf HTML-, aber auch auf XMLDokumente anwenden. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="border:1px black solid; padding:10px">
</div>
<script type="text/javascript">
<!-var myH1 = document.createElement("h1");
var myText = document.createTextNode("Eine sehr dynamische Seite");
myH1.appendChild(myText);
var Ausgabebereich = document.getElementById("Bereich");
Ausgabebereich.appendChild(myH1);
//-->
</script>
</body></html>

Das Beispiel enthlt einen div-Bereich, der zunchst leer ist. Unterhalb davon ist ein JavaScriptBereich notiert. Dort wird mit document.createElement("h1") ein neues Element vom Typ
h1 erzeugt, also eine HTML-berschrift erster Ordnung. Die berschrift wird damit aber noch
nicht angezeigt sie hngt noch nicht einmal im Elementbaum des Dokuments. Das Element ist
lediglich als Objekt erzeugt.
Die Methode createElement() gibt das erzeugte Objekt, also in dem Fall das h1-Element
zurck. Der Rckgabewert wird in der Variablen myH1 gespeichert. ber diese Variable ist das
neu erzeugte Element von da ab ansprechbar.
Damit die berschrift einen Inhalt erhlt, wird mit createTextNode() ein Textknoten erzeugt.
Mit appendChild() wird dann der Textknoten als Kindelement der berschrift erster Ordnung
definiert. Anschlieend muss noch die ganze berschrift in den vorhandenen Elementbaum eingehngt werden. Dies geschieht in der Anweisung Ausgabebereich.appendChild(myH1);.
Dabei wurde zuvor in der Variablen Ausgabebereich das leere div-Element gespeichert, auf das
mit getElementById() zugegriffen wurde. Somit wird die berschrift und ihr Text also als
Kindelement dynamisch in den div-Bereich eingefgt.

20.4 document

693

createTextNode()
Erzeugt einen neuen Textknoten fr den Elementbaum. Lsst sich auf HTML-, aber auch auf
XML-Dokumente anwenden. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="Absatz"></p>
<script type="text/javascript">
<!-var Zeitstempeltext = document.createTextNode(document.lastModified);
var TextZuvor = document.createTextNode("Datum des letzten Updates: ");
document.getElementById("Absatz").appendChild(TextZuvor);
document.getElementById("Absatz").appendChild(Zeitstempeltext);
//-->
</script>
</body></html>

Das Beispiel enthlt einen p-Absatz, der zunchst leer ist. Unterhalb davon ist ein JavaScriptBereich notiert. Dort werden mit document.createTextNode() zwei neue Zeichenketten
erzeugt, einmal der gespeicherte Wert von lastModified und einmal ein statischer Text. Die
Texte werden damit aber noch nicht angezeigt sie sind auch noch nicht in den Elementbaum
des Dokuments eingehngt. Die Textknoten sind lediglich als Objekt erzeugt.
Die Methode createTextNode() gibt das erzeugte Objekt zurck. Der Rckgabewert wird in
den beiden Beispielaufrufen in den Variablen Zeitstempeltext und TextZuvor gespeichert.
ber diese Variablen sind die neu erzeugten Textknoten von da ab ansprechbar.
Mit appendChild() werden dann die Textknoten als Kindelemente des ber dem JavaScript
notierten Textabsatzes definiert. Dazu wird mit getElementById() auf das p-Element zugegriffen. Der leere Absatz erhlt somit dynamisch einen Inhalt.

getElementById()
Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein id-Attribut besitzt. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!-function Ausrichten(wie) {
document.getElementById("unentschlossen").align = wie;
}
//-->
</script>
</head><body>

694

Kapitel 20: JavaScript Objekt-Referenz

<h1 id="unentschlossen">Wo gehre ich eigentlich hin?</h1>

<a href="javascript:Ausrichten('left')">links?</a><br>
<a href="javascript:Ausrichten('center')">zentriert?</a><br>
<a href="javascript:Ausrichten('right')">rechts?</a><br>
</body></html>

Das Beispiel enthlt eine berschrift erster Ordnung mit dem Attribut id="unentschlossen".
Unterhalb davon sind drei Verweise notiert. Jeder der Verweise ruft die Funktion Ausrichten()
auf, die im Dateikopf notiert ist, und bergibt ihr jeweils einen anderen Wert. Innerhalb der
Funktion Ausrichten() wird mit document.getElementById("unentschlossen") auf die
berschrift erster Ordnung zugegriffen. Die Funktion weist der Eigenschaft align den jeweils
bergebenen Wert zu. Dadurch wird die Ausrichtung der berschrift dynamisch gendert.
Beachten Sie: Die Methode getElementById() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen berhaupt tun knnen, knnen
Sie sich im Kapitel ber die HTML-Elementobjekte einen berblick verschaffen. Weitere Mglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an.
Sie knnen an diese Methode auch Variablen bergeben. Dazu notieren Sie einfach den Variablennamen ohne Anfhrungszeichen anstatt eines festen Wertes, z.B. getElementById
(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert.
In Opera 5.12 kennt die Methode getElementById() zum Ansprechen von Elementen ebenfalls. Das obige Beispiel funktioniert jedoch in diesem Browser nicht.

getElementsByName()
Greift entsprechend der HTML-Variante des DOM auf ein HTML-Element zu, das ein nameAttribut besitzt. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!-function Ankreuzen() {
document.getElementsByName("Zutat")[0].checked = true;
}
//-->
</script>
</head><body>
<form name="Formular" action="">
<input type="checkbox" name="Zutat" value="Salami"> Salami <br>
<input type="checkbox" name="Zutat" value="Pilze"> Pilze <br>
<input type="checkbox" name="Zutat" value="Oliven"> Oliven <br>
<input type="button" value="Test" onClick="Ankreuzen()">
</form>
</body></html>

20.4 document

695

Im Beispiel wird eine Gruppe von Checkboxen definiert, die alle den gleichen Namen, nmlich
Zutat haben. Darunter ist ein Klick-Button notiert, bei dessen Anklicken die Funktion Ankreuzen() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion kreuzt die erste der drei
Checkboxen an. Durch getElementsByName("Zutat")[0] greift sie auf das erste Element mit
name="Zutat" zu. Auch wenn ein solcher Elementname nur einmal im Dokument vorkommt,
muss stets mit Array-Syntax auf die Elemente zugegriffen werden. So wre im Beispiel das Formularelement etwa ber getElementsByName("Formular")[0] ansprechbar. Die zweite
Checkbox mit dem Namen "Zutat" wre ber getElementsByName("Zutat")[1] ansprechbar usw.
Beachten Sie: Die Methode getElementsByName() regelt lediglich den Zugriff auf HTML-Elemente. Um zu wissen, was Sie mit welchen HTML-Elementen berhaupt tun knnen, knnen
Sie sich im Kapitel ber die HTML-Elementobjekte einen berblick verschaffen. Weitere Mglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an. Sie knnen an diese Methode auch Variablen bergeben. Dazu notieren Sie einfach den Variablennamen ohne Anfhrungszeichen anstatt eines festen Wertes, z.B. getElementsByName(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert. Opera 5.12 kennt
diese Methode zum Ansprechen von Elementen ebenfalls.

getElementsByTagName()
Greift entsprechend der XML-Variante des DOM auf ein beliebiges Element im Elementbaum
des Dokuments zu. Mageblich ist dabei der Elementname, in HTML also beispielsweise Namen
wie h1, blockquote oder img. Fr jeden HTML-Elementtyp wird im Dokument ein Array
erzeugt, ber den die einzelnen Elemente dann ansprechbar sind.
Leider ist diese Methode vom DOM nicht in der HTML-Variante vorgesehen, doch mit den
JavaScript-Interpretern der neueren Browser funktioniert sie trotzdem. Deshalb wird sie hier
anders als die brigen Eigenschaften und Methoden des document-Objekt in der XML-Variante
des DOM beschrieben. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!-function neueTexte() {
document.getElementsByTagName("p")[0].firstChild.data = "neuer erster";
document.getElementsByTagName("p")[1].firstChild.data = "neuer zweiter";
document.getElementsByTagName("p")[2].firstChild.data = "neuer dritter";
document.getElementsByTagName("h1")[0].firstChild.data = "Alles anders";
}
//-->
</script>
</head><body>
<h1>Dynamisch, sehr dynamisch</h1>
<p>Ein erster Absatz</p>

696

Kapitel 20: JavaScript Objekt-Referenz

<p>Ein zweiter Absatz</p>

<p>Ein dritter Absatz</p>
<p><a href="javascript:neueTexte()">neue Texte</a></p>
</body></html>

Im Beispiel werden eine berschrift erster Ordnung und drei Textabstze notiert. Keines dieser
Elemente enthlt irgendein Attribut, ber das es individuell angesprochen werden knnte.
Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Funktion neueTexte() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion ndert dynamisch die Texte aller drei
Textabstze und der berschrift.
ber document.getElementsByTagName("p")[0] greift sie auf den ersten Textabsatz des
Dokuments zu, ber document.getElementsByTagName("p")[1] auf den zweiten, ber document.getElementsByTagName("h1")[0] auf die erste berschrift erster Ordnung usw.
Beachten Sie: Die Methode getElementsByTagName() regelt lediglich den Zugriff auf Elemente.
Um zu wissen, was Sie mit welchen HTML-Elementen berhaupt tun knnen, knnen Sie sich
im Kapitel ber die HTML-Elementobjekte einen berblick verschaffen. Weitere Mglichkeiten,
um HTML-Elemente dynamisch zu beeinflussen, bietet das node-Objekt an. Die Eigenschaft
firstChild.data, die im obigen Beispiel verwendet wird, um den im Element enthaltenen Text
dynamisch zu ndern, gehrt ebenfalls zum Komplex des node-Objekts. Opera Version 5.12
kennt die Methode getElementsByTagName() zum Ansprechen von Elementen. Das obige
Beispiel funktioniert jedoch in diesem Browser nicht.

getSelection()
Ermittelt Text, der vom Anwender im Dokument selektiert wurde. Im Netscape 4 war diese
Methode an das document-Objekt gebunden. Seit Netscape 6 ist sie dem window-Objekt zugeordnet. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function selektierterText()
{
if (window.getSelection) alert(window.getSelection());
else if (document.getSelection) alert(document.getSelection());
else if (document.selection) alert(document.selection.createRange().text);
}
//-->
</script>
</head><body>
viel Text zum Selektieren viel Text zum Selektieren
<form>
<input type="button" value="zeigen" onMouseDown="selektierterText();">
</form>
</body></html>

Das Beispiel ruft beim Klick auf den definierten Button die Funktion selektierterText() auf.
Innerhalb dieser Funktion wird geprft, ob der Browser die Methode window.getSelection()

20.4 document

697

kennt. Tritt dieser Fall ein, so wird sie aufgerufen und der selektierte Text wird ausgegeben.
Kennt der Browser diese Methode nicht, so wird geprft, ob er die Methode document.
getSelection() kennt, und gegebenenfalls der selektierte Text ausgegeben.
Der zweite else-if-Zweig des Beispiels behandelt einen Sonderfall fr den MS Internet Explorer.
Dieser kennt die Methode getSelection() nicht, jedoch ein selection-Objekt. Mit document.selection.createRange().text erhalten Sie hier den selektierten Text. Voraussetzung
ist, dass zuvor Text selektiert wurde. Andernfalls liefert die Funktion selektierterText() eine
leere Zeichenkette ("") als Ergebnis.

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nhere Informationen siehe dort). Der
einzige Unterschied ist, dass document.handleEvent() nur Ereignisse bergeben kann, die mit
document.captureEvents() berwacht werden.

open()
ffnet ein Dokument zum Schreiben. Dabei wird kein Fenster geffnet, sondern der Fensterinhalt zum Neubeschreiben freigegeben. Falls das Dokument vorher einen Inhalt hatte, zum Beispiel eine zunchst geladene HTML-Datei, sollten Sie zuerst die close()-Methode aufrufen.
Kann ohne, mit einem oder mit zwei Parametern aufgerufen werden. Folgende Parameter sind
mglich:
1. Mime-Type = Eine Bezeichnung des Mime-Types fr die Art der Daten, die in das Dokumentfenster geschrieben werden sollen. So knnen Sie das Dokumentfenster beispielsweise
durch Angabe von "x-world/x-vrml" zum Schreiben von VRML-Code ffnen. Mit write()und writeln()-Befehlen knnen Sie dann dynamisch VRML-Code schreiben.
2. replace = mit document.open("text/html","replace") ffnen Sie das Dokument zum
Schreiben von HTML und bewirken, dass der neue Dokumentinhalt die gleiche Stelle in der
History der besuchten Seiten einnimmt wie das Dokument, in dem der open()-Befehl steht.
Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-function Wechsel() {
document.open();
document.write("<a href=\"datei.htm\">Und jetzt steh ich hier</a>");
document.close();
}
document.open();
document.write("<a href=\"javascript:Wechsel()\">Noch steh ich hier</a>");
document.close();
//-->
</script>
</body></html>

698

Kapitel 20: JavaScript Objekt-Referenz

Das Beispielscript fhrt zunchst den unteren Teil des Codes aus, da der obere in die Funktion
Wechsel() eingebunden ist, die erst bei Aufruf ausgefhrt wird. Im unteren Teil wird mit
JavaScript dynamisch ein Verweis in das Dokumentfenster geschrieben. Wenn der Anwender
den Verweis anklickt, wird die Funktion Wechsel() aufgerufen. Diese Funktion ffnet das
Dokumentfenster zum neuen Schreiben und schreibt dynamisch einen Verweis auf die aktuelle
Datei (im Beispiel wird angenommen, dass diese Datei datei.htm heit). Klickt der Anwender auf
den Verweis, wird die Datei erneut geladen, und dadurch wird wieder der erste Verweis geschrieben.
Beachten Sie: Das Beispiel funktioniert erst ab Netscape 3.x so wie beschrieben. Netscape 2.x
kennt die document.open() zwar auch schon, doch leert dabei das Dokumentfenster nicht.
Opera 5.12 kennt laut Dokumentation die Methode open() und wendet sie in vielen Fllen
richtig an. Das vorliegende Beispiel wird jedoch vom Browser nicht abgeschlossen und nur ohne
Verwendung von document.open() richtig ausgefhrt. Als Alternative knnen Sie die Funktion
mit <a href="#" onclick="Wechsel();return false"> aufrufen.

releaseEvents()
Beendet die berwachung von Anwenderereignissen. Funktioniert genau so wie releaseEvents() beim window-Objekt (nhere Informationen siehe dort). Der einzige Unterschied ist,
dass document.releaseEvent() nur Ereignisberwachungen beenden kann, die mit document.
captureEvents() gestartet wurden.
Beachten Sie: Netscape 6 interpretiert diese Methode nicht (mehr).

routeEvent()
bergibt ein Anwenderereignis an das document-Objekt. Von dort aus wird das Ereignis immer
weiter nach unten durchgereicht, bis sich ein Event-Handler findet, der das Ereignis verarbeitet.
Funktioniert genau so wie routeEvent() beim window-Objekt (nhere Informationen siehe
dort). Der einzige Unterschied ist, dass document.routeEvent() nicht auf Fenster-Ebene ansetzt, sondern auf Dokumentebene.
Beachten Sie: Netscape 6 interpretiert diese Methode nicht (mehr).

write()
Gibt Text im Dokument aus. Erwartet eine Zeichenkette oder einen JavaScript-Ausdruck als
Parameter. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-DeinName = prompt("Bitte Deinen Namen angeben:","Name");
document.write("<b>Hallo " + DeinName + "<\/b>");
//-->
</script>
</body></html>

20.4 document

699

Das Beispiel zeigt beim Einlesen der Datei mit prompt() ein Dialogfenster an, in dem der Anwender seinen Namen eingeben soll. Der eingegebene Wert wird in der Variablen DeinName gespeichert. Anschlieend wird mit document.write() das Wort Hallo mit einem Leerzeichen
dahinter geschrieben. An die Zeichenkette angehngt wird die Variable DeinName. Dadurch steht
hinterher beispielsweise Hallo Susi im Text, wenn in dem Dialogfenster Susi als Name angegeben wurde. Damit die Ausgabe in Fettschrift erfolgt, wird sie in das entsprechende HTMLElement gesetzt.
Es ist auch erlaubt, mehrere Zeichenketten oder Ausdrcke durch Kommata getrennt innerhalb
von document.write() zu verwenden, zum Beispiel:
document.write("Sie benutzen ", document.layers ? "Netscape ab V4" : "nicht
Netscape ab V4");

Dieses Beispiel enthlt zunchst eine Zeichenkette und dann, durch ein Komma getrennt, einen
komplexen Ausdruck, in dem ermittelt wird, ob der Anwender einen Browser benutzt, der das
layers-Objekt kennt.
Beachten Sie: Der Schrgstrich / in schlieenden HTML-Tags muss bei der Ausgabe mit dem
Zeichen \ maskiert werden. Das gilt besonders dann, wenn Sie dynamisch weiteren JavaScriptCode in der Form document.write("<script>...</script>") schreiben mchten. Maskiert
<script>...<\/script> geschrieben, wird der dynamisch geschriebene Script-Bereich als
eigenstndiger Block interpretiert, und das aktuelle Script wird unabhngig davon weiter ausgefhrt.

writeln()
Wie write() fgt jedoch am Ende automatisch ein Zeilenumbruchzeichen ein. Dadurch ist
diese Methode vor allem zum Schreiben von Inhalten interessant, bei denen Zeilenumbrche
wichtig sind. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("<pre>kein Umbruch ");
document.writeln("erste Zeile");
document.writeln("zweite Zeile <\/pre>");
document.writeln("dritte Zeile");
document.writeln("vierte Zeile");
//-->
</script>
</body></html>

In der ersten Zeile wird mit document.write() ein prformatierter Text eingeleitet. Dieser dient
im Beispiel dazu, die Zeilenumbrche sichtbar zu machen. Die Methode document.write()
erzeugt keinen Zeilenumbruch. Der Inhalt der nachfolgenden Zeile (erste Zeile) wird deshalb
in der gleichen Zeile ausgegeben. Da diese Zeichenkette jedoch mit document.writeln() ausgegeben wird, entsteht im Quelltext am Ende ein Zeilenumbruch. Die nchste Zeile (zweite
Zeile) wird deshalb in einer neuen Zeile ausgegeben. Zugleich wird im Beispiel in dieser Zeile
der prformatierte Abschnitt beendet. Die dritte und die vierte Zeile werden ebenfalls mit document.writeln() geschrieben. Intern entstehen Zeilenumbrche im Quelltext. Bei der Ausgabe

700

Kapitel 20: JavaScript Objekt-Referenz

im Browser sind diese jedoch nur als Leerzeichens sichtbar, getreu der HTML-Regel, dass
Zeilenumbrche in Leerzeichen umgewandelt werden.

20.5

HTML-Elementobjekte

HTML-Elementobjekte: Allgemeines zur Verwendung

Der HTML-Variante des Document Object Model (DOM) zufolge stellt jedes HTML-Element in
einer HTML-Datei ein Objekt dar. Wichtig ist dabei zu wissen, wie mit einer Script-Sprache wie
JavaScript auf ein solches HTML-Elementobjekt zugegriffen werden kann. Nach Syntax der
HTML-Variante des DOM kann nur auf solche HTML-Elemente zugegriffen werden, die in
ihrem einleitenden Tag entweder ein name-Attribut oder ein id-Attribut enthalten. Nach dem
erweiterten XML-DOM lsst sich jedoch auch auf jedes beliebige HTML-Element zugreifen,
auch wenn dieses kein name- oder id-Attribut hat.
Zugriff ber name-Attribut
Das name-Attribut ist in HTML nur bei bestimmten Elementen erlaubt, etwa bei Formularelementen. Deshalb ist diese Zugriffsmethode auch nur bei den folgenden Elementen mglich, da diese ein name-Attribut erlauben:
a, applet, form, frame, img, input, iframe, map, meta, object, param, select, textarea
Mit der Methode document.getElementsByName() knnen Sie HTML-Elemente ansprechen, die ein name-Attribut haben.
Zugriff ber id-Attribut
Das id-Attribut ist im Gegensatz zum name-Attribut in fast allen HTML-Elementen erlaubt.
Auerdem sollte seine Wertzuweisung ein dokumentweit eindeutiger Name fr das Element
sein. Dadurch eignet sich diese Zugriffsmethode in den meisten Fllen in der Praxis besser als
die ber das name-Attribut. Mit der Methode document.getElementById() knnen Sie
HTML-Elemente ansprechen, die ein id-Attribut haben.
Zugriff ber den Elementbaum
Wenn Sie auf HTML-Elemente zugreifen mchten, bei denen weder ein name-Attribut noch
ein id-Attribut notiert ist, steht Ihnen ein dritter Weg offen: der Zugriff ber den Elementbaum. Dabei knnen Sie dann beispielsweise auf die dritte Tabellenzelle in der zweiten
Tabellenreihe der vierten Tabelle im Dokument zugreifen. Mit der Methode document.
getElementsByTagName() sind solche Zugriffe mglich.
Eigenschaften und Methoden von HTML-Elementobjekten
Jedes HTML-Element hat Eigenschaften. Und zwar stellt jedes erlaubte Attribut eines HTMLElements eine DOM-Eigenschaft dieses Elements dar. So hat beispielsweise das HTML-Element input ein erlaubtes Attribut value=, und das HTML-Element h1 hat ein erlaubtes Attribut align=. Im DOM gibt es demnach also ein input-Elementobjekt mit der Eigenschaft
value, und ein h1-Elementobjekt mit der Eigenschaft align.
Darber hinaus definiert das DOM fr einige der HTML-Elemente auch Methoden. So gibt es
fr das form-Elementobjekt (also das DOM-Objekt des HTML-Elements form) die Methoden submit() (Formular absenden) und reset() (Formulareingaben verwerfen).
Fr alle Eigenschaften und Methoden von HTML-Elementobjekten gelten die zuvor genannten drei Zugriffsmethoden. Wenn Sie beispielsweise folgendes HTML-Element haben: <h1 id
="Seitenkopfueberschrift" align="center">Text</h1>, dann knnen Sie mit do-

20.5 HTML-Elementobjekte

701

cument.getElementById() auf das Element zugreifen und die Objekteigenschaft align abfragen oder ndern z.B.: alert(document.getElementById(Seitenkopfueberschrift).align). Diese JavaScript-Anweisung gibt ein Meldungsfenster aus, in dem
center steht, weil document.getElementById( "Seitenkopfueberschrift").align auf
die Eigenschaft align des Elementobjekts mit der Id Seitenkopfueberschrift zugreift.

In diesem Abschnitt werden fr alle HTML-Elemente die vom DOM erlaubten Eigenschaften
und Methoden beschrieben. Die Eigenschaften ergeben sich dabei zwangslufig aus den
erlaubten Attributen der HTML-Elemente gem HTML 4.0. Die Methoden werden dagegen
nur vom DOM festgelegt.
Beachten Sie: Jedes HTML-Element stellt gem dem DOM auerdem einen Knoten im Elementbaum dar. Deshalb gelten fr jedes HTML-Element auch alle Eigenschaften und Methoden
des node-Objekts. Beachten Sie unbedingt die Gro-/Kleinschreibung der Eigenschaften und
Methoden, die in diesem Abschnitt zu den einzelnen HTML-Elementobjekten aufgelistet sind.
Fehler bei der Gro-/Kleinschreibung fhren zu Fehlern in JavaScript. Da Opera 5.12 das Document Object Model nur sehr unvollstndig implementiert hat, wird in diesem Dokument jeweils
darauf hingewiesen, welche Beispiele auch von diesem Browser interpretiert werden.

Universaleigenschaften
Universaleigenschaften entsprechen den Universalattributen von HTML. Diese Eigenschaften
gelten fr fast jedes HTML-Element.
Eigenschaft

Status

Bedeutung

className

CSS-Klassenname

dir

Schreibrichtung

id

dokumentweit eindeutiger Name

lang

Landessprache (de, en, fr, it usw.)

title

Titel

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="p_italiano" lang="it"
onClick=" alert(document.getElementById(p_italiano).lang)">io senza te</p>
</body></html>

Das Beispiel enthlt einen Textabsatz mit einer id="p_italiano". Gleichzeitig enthlt der Textabsatz einen Event-Handler onClick. Beim Anklicken des Textes gibt ein Meldungsfenster aus,
um welche Sprache es sich bei dem Text handelt ausgegeben wird die Wertzuweisung des
Attributs lang, also der Wert it.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

702

Kapitel 20: JavaScript Objekt-Referenz

a (HTML-Elementobjekt)
HTML-Elemente <a>...</a> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
Eigenschaft

Status

Bedeutung

accessKey

Hotkey fr den Hyperlink

charset

Zeichensatz des Verweisziels

coords

verweissensitive Bereiche bei Objekten

href

Verweisziel

hreflang

Landessprache des Verweisziels

name

Ankername

rel

Verweisziel als Vorwrtsverknpfung

rev

Verweisziel als Rckwrtsverknpfung

shape

verweissensitive Bereiche bei Objekten

tabIndex

Tabulatorreihenfolge fr Hyperlinks

target

Fensternamen des Verweisziels

type

Mime-Type des Verweisziels

Methode

Bedeutung

blur()

entfernt den Fokus von diesem Element

setzt den Fokus auf dieses Feld

focus()

Ein Beispiel:
<html><head><title>Test</title>
<link rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
<!-function AndererLink() {
document.getElementById("selfhtml_link").href = "http://selfaktuell.teamone.de/";
document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML
aktuell";
}
//-->
</script>
</head><body>
<a id="selfhtml_link" href="http://selfhtml.teamone.de/">SELFHTML</a><br>
<a href="javascript:AndererLink()">anderer Link!</a>
</body></html>

20.5 HTML-Elementobjekte

703

Die Beispieldatei enthlt zwei Verweise. Der erste Verweis fhrt auf eine Adresse im Netz, der
zweite ruft die JavaScript-Funktion AndererLink() auf, die im Dateikopf notiert ist. Diese
Funktion weist der Elementeigenschaft href einen neuen Wert zu, nmlich eine andere Internetadresse. Mit getElementById("selfhtml_link") wird dabei auf den Verweis zugegriffen,
der mit id="selfhtml_link" ausgezeichnet ist. Auerdem ndert die Funktion AndererLink() auch noch dynamisch den Verweistext. Auch dafr wird die DOM-Syntax verwendet,
nmlich durch Zuweisung eines neuen Textes an node.nodeValue (firstChild bezeichnet den
ersten Kindknoten eines Knotens).

abbr (HTML-Elementobjekt)
HTML-Elemente <abbr>...</abbr> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.normal { font-weight:normal }
.fett { font-weight:bold }
-->
</style>
<script type="text/javascript">
<!-function wechseln() {
if(document.getElementById("abk").className == "normal")
document.getElementById("abk").className = "fett";
else
document.getElementById("abk").className = "normal";
}
//-->
</script>
</head><body>
<p>Das ist eine <abbr id="abk" class="normal" onMouseOver="wechseln()"
onMouseOut="wechseln()">Abk.</abbr></p>
</body></html>

Das Beispiel enthlt einen Textabsatz mit der Abkrzung Abk., die mit <abbr>...</abbr> ausgezeichnet ist. Das einleitende Tag enthlt eine CSS-Klassenangabe, eine eindeutige Id-Angabe
und die Event-Handler onMouseOver und onMouseOut, die jeweils die JavaScript-Funktion
wechseln() aufrufen, die im Dateikopf notiert ist. Diese Funktion fragt ab, ob der zugewiesene
Klassenname normal lautet. Wenn ja, wird er auf fett gendert, wenn nein, wird er auf normal
gendert. Dadurch ergibt sich der Effekt, dass beim berfahren der Abkrzung mit der Maus der
Text der Abkrzung fett dargestellt wird, ansonsten normal.
Beachten Sie: Beim Internet Explorer war das Beispiel mit dem abbr-Element auer unter dem
Internet Explorer 5.0 der Macintosh Edition nicht nachvollziehbar, mit anderen Elementen
dagegen schon.

704

Kapitel 20: JavaScript Objekt-Referenz

acronym (HTML-Elementobjekt)
Die HTML-Elemente <acronym>...</acronym> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title></head><body>
<p>Das ist ein <acronym id="acr"
onMouseOver="document.getElementById(acr).title=Acronym">Acr.</acronym></p>
</body></html>

Das Beispiel enthlt einen Textabsatz mit dem Akronym Acr., das mit <acronym>...
</acronym> ausgezeichnet ist. Das einleitende Tag enthlt eine eindeutige Id-Angabe und den
Event-Handler onMouseOver. Beim berfahren des Elementtextes mit der Maus wird dadurch
dynamisch ein title-Attribut gesetzt, das aussagt, was die Abkrzung Acr. bedeutet.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

address (HTML-Elementobjekt)
HTML-Elemente <address>...</address> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Namen() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'Stefan Mnz';
}
function Text() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'SELFHTML-Redaktion';
}
//-->
</script>
</head><body>
<div>Dies alles ist von der
<address onMouseOver="Namen()" onMouseOut="Text()">SELFHTMLRedaktion</address><div>
</body></html>

Das Beispiel enthlt einen Textabsatz mit der Adressbezeichnung SELFHTML-Redaktion, die mit
<address>...</address> ausgezeichnet ist. Das einleitende Tag enthlt die Event-Handler
onMouseOver und onMouseOut, die jeweils eine JavaScript-Funktion aufrufen. Die Funktion
Namen(), die bei onMouseOver aufgerufen wird, ersetzt den Inhalt SELFHTML-Redaktion durch
den Wert Stefan Mnz. Die Funktion Text() stellt dagegen den Originalzustand wieder her und
wird bei onMouseOut aufgerufen. Beide Funktionen greifen mit getElementsByTagName
("address")[0] auf das erste address-Element im Dokument zu. Der jeweils neue Textinhalt
des Elements wird mit node.nodeValue gesetzt (firstChild bezeichnet den ersten Kindknoten
eines Knotens).

20.5 HTML-Elementobjekte

705

applet (HTML-Elementobjekt)
HTML-Elemente <applet>...</applet> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung

alt

Alternativtext

archive

kommaseparierte Liste mit Archivdateien

code

Klassendatei des Applets

codeBase

Basis-URI des Applets

height

Anzeigehhe

hspace

horizontaler Abstand zwischen Applet und umflieendem Text

name

Name fr das Applet

object

Objekt-Id des Applets

vspace

vertikaler Abstand zwischen Applet und umflieendem Text

width

Anzeigebreite

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
<param name="msg" value="Die Energie des Verstehens">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</applet>
<form name="Form" action="">
<input type="button" value="40"
onClick="document.getElementById(Ticker).height=40">
<input type="button" value="60"
onClick="document.getElementById(Ticker).height=60">
</form>
</body></html>

Das Beispiel enthlt ein eingebundenes Java-Applet fr einen Lauftext (Ticker). Unterhalb des
Applets ist ein Formular mit einem Eingabefeld notiert. Klickt der Anwender auf die Buttons,
wird dynamisch die Anzeigehhe des Java-Applets gendert, und der Lauftext ndert dabei

706

Kapitel 20: JavaScript Objekt-Referenz

automatisch seine Gre (sofern das Applet so programmiert ist, dass die Gre des Lauftextes
von dem Attribut height= im einleitenden <applet>-Tag abhngig ist). Mit document.
getElementById(Ticker) wird auf das Applet zugegriffen, da es im einleitenden Tag das
Attribut id="Ticker" hat. Gendert wird sein Attribut height.
Beachten Sie: Der Browser Netscape 6.1 interpretiert dieses Beispiel nicht.

area (HTML-Elementobjekt)
HTML-Elemente <area> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

accesskey

Hotkey fr den Hyperlink

alt

Kurzbeschreibung des Verweisziels

coords

Koordinaten des verweissensitiven Bereichs

href

Verweisziel

nohref

aktionsloser Bereich

shape

Typ eines verweissensitiven Bereichs

tabindex

Tabulatorreihenfolge fr Hyperlinks

target

Fensternamen des Verweisziels

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function plus100() {
document.getElementById("Verweis").coords = "101,101,349,149";
}
//-->
</script>
</head><body>
<map name="Testbild">
<area id="Verweis" shape="rect" coords="1,1,249,49"
href="javascript:plus100()" title="Koordinaten" alt="Koordinaten">
</map>
<img src="hypgraf.gif" width="400" height="400"
usemap="#Testbild" alt="verweissensitive Grafik">
</body></html>

20.5 HTML-Elementobjekte

707

Das Beispiel enthlt eine Grafik, die auf einen map-Bereich verweist, in dem ein verweissensitiver
Bereich fr die Grafik notiert wird. Beim Anklicken dieses verweissensitiven Bereichs wird die
JavaScript-Funktion plus100() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ndert
dynamisch die Eigenschaft coords, indem sie ihr neue Werte zuweist. Der Effekt ist, dass der
verweissensitive Bereich anschlieend um 100 Pixel weiter nach rechts unten verlagert wird.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

b (HTML-Elementobjekt)
HTML-Elemente <b>...</b> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
</head><body>
<b id="wichtig">wichtige Aussage!</b><br>
<a href="javascript:document.getElementById(wichtig).id=unwichtig;
alert(document.getElementById(unwichtig).id);">unwichtig machen!</a>
</body></html>

Das Beispiel enthlt eine mit <b>...</b> formatierte wichtige Aussage, bei der im einleitenden
Tag das Attribut id="wichtig" notiert ist. Unterhalb davon ist ein Verweis notiert, bei dessen
Anklicken das id-Attribut des b-Elements auf den Wert unwichtig gesetzt wird. Dazu wird mit
document.getElementById(wichtig).id auf das Attribut zugegriffen. Anschlieend wird
mit document.getElementById(unwichtig).id auf den neuen Id-Wert zugegriffen, um
den neuen Id-Wert zur Kontrolle in einem Meldungsfenster auszugeben.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

base (HTML-Elementobjekt)
HTML-Elemente <base> haben als DOM-Objekte fr den Scriptsprachen-Zugriff die folgenden
eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

href

Basis-URI

target

Default Zielfenster fr Verweise

Ein Beispiel:
<html><head><title>Test</title>
<base target="_self">
<script type="text/javascript">
<!-function blankBase() {
document.getElementsByTagName("base")[0].target="_blank";
}

708

Kapitel 20: JavaScript Objekt-Referenz

//-->
</script>
</head><body>
<a href="news.htm">News</a><br>
<a href="javascript:blankBase()">Links in neues Fenster laden</a>
</body></html>

In der Beispieldatei sind zwei Verweise notiert. Der erste ruft einfach eine andere Datei auf.
Normalerweise wird das Verweisziel dabei ins gleiche Fenster geladen. Im Dateikopf ist dies mit
<base id="Zielfenster" target="_self"> auch explizit besttigt. Der zweite Verweis ruft
bei Anklicken jedoch die JavaScript-Funktion blankBase() auf, die beim base-Element die
Eigenschaft target auf den Wert _blank ndert, was bewirkt, dass Verweisziele dieser Datei in
ein neues Fenster geladen werden.
Beachten Sie: Mit Netscape (6.1) und unter dem MS Internet Explorer 5.0 Macintosh Edition
war das Beispiel mit dem base-Element nicht nachvollziehbar. Opera 5.12 interpretiert das Beispiel dagegen. Die Verwendung von Universaleigenschaften ist im HTML 4.0-Standard fr das
base-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die Methode document.getElementsById() vermeiden.

basefont (HTML-Elementobjekt)
HTML-Elemente <basefont> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

color

Basis-Schriftfarbe

face

Basis-Schriftart

size

Basis-Schriftgre

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function machGross() {
document.getElementById("ab_hier_anders").size="7";
}
//-->
</script>
</head><body>
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<basefont id="ab_hier_anders" color="red" size="">
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
<a href="javascript:machGross()">nicht nur rot, sondern auch gross</a>
</body></html>

20.5 HTML-Elementobjekte

709

Das Beispiel enthlt Text und zwischendrin ein basefont-Element. Am Ende steht ein Verweis,
bei dessen Anklicken die JavaScript-Funktion machGross() aufgerufen wird. Mit getElementById("ab_hier_anders") greift diese Funktion auf das basefont-Element zu und ndert
dessen Eigenschaft size auf den Wert 7.
Beachten Sie: Mit Netscape (6.1) war das Beispiel mit dem basefont-Element nicht nachvollziehbar.

bdo (HTML-Elementobjekt)
HTML-Elemente <bdo>...</bdo> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function abc2cba() {
document.getElementsByTagName("bdo")[0].dir="rtl";
}
//-->
</script>
</head><body>
<bdo dir="ltr">ABCDEFGHIJKLMNOPQRSTUVWXYZ</bdo><br>
<a href="javascript:abc2cba()">umkehren!</a>
</body></html>

Das Beispiel enthlt ein bdo-Element mit dem Attribut dir="ltr" (Schriftrichtung von links
nach rechts), das das Alphabet in Grobuchstaben als Inhalt hat. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript-Funktion abc2cba() aufgerufen.
Diese greift mit getElementsByTagName("bdo")[0] auf das erste bdo-Element im Dokument
zu und ndert die Schriftrichtung auf rtl, also von rechts nach links. Das Grobuchstabenalphabet wird dadurch umgedreht.
Beachten Sie: Unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht
nachvollziehbar.

big (HTML-Elementobjekt)
HTML-Elemente <big>...</big> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.verybig { font-size:300% }
-->
</style>
<script type="text/javascript">
<!-function nochmehr() {
document.getElementById("biggie").className = "verybig";

710

Kapitel 20: JavaScript Objekt-Referenz

}
//-->
</script>
</head><body>
<p><big id="biggie" onClick="nochmehr()">gross und stark!</big></p>
</body></html>

Das Beispiel enthlt in einem Textabsatz Text, der mit <big>...</big> ausgezeichnet ist. Im
einleitenden <big>-Tag ist der Event-Handler onClick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript-Funktion nochmehr() aufgerufen. Diese greift mit document.getElementById("biggie") auf das big-Element zu und weist ihm die im Dateikopf in
einem Style-Bereich definierte Klasse verybig zu. Der Text wird dadurch auf 300% seiner normalen Gre vergrert.

blockquote (HTML-Elementobjekt)
HTML-Elemente <blockquote>...</blockquote> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
cite

Status

Bedeutung
URI der Zitatquelle

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function showCite() {
alert(document.getElementById(w3zitat).cite);
}
//-->
</script>
</head><body>
<p>Das W3-Konsortium schreibt ber das DOM:</p>
<blockquote id="w3zitat"
cite="http://www.w3.org/TR/REC-DOM-Level-1/introduction.html"
onMouseOver="showCite()">
The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents.
</blockquote>
</body></html>

Das Beispiel enthlt ein mit <blockquote>...</blockquote> ausgezeichnetes Zitat, in dessen

einleitendem Tag auch der URI der Quelle mit dem Attribut cite= angegeben ist. Ferner ist dort
der Event-Handler onMouseOver notiert, der bewirkt, dass beim berfahren des Zitats mit der
Maus die JavaScript-Funktion showCite() aufgerufen wird. Diese greift mit document.
getElementById(w3zitat) auf das blockquote-Element zu und gibt in einem Meldungsfenster den Wert des cite-Attributs aus.

20.5 HTML-Elementobjekte

711

Beachten Sie: Opera 5.12 gibt in diesem Beispiel undefined zurck.

body (HTML-Elementobjekt)
HTML-Elemente <body>...</body> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

aLink

dokumentweite Farbe fr aktivierte Links

background

URI einer dokumentweiten Hintergrundgrafik

bgColor

dokumentweite Hintergrundfarbe

link

dokumentweite Farbe fr Links zu noch nicht besuchten Seiten

text

dokumentweite Textfarbe

vLink

dokumentweite Farbe fr Links zu bereits besuchten Seiten

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function WerteSetzen() {
document.getElementsByTagName("body")[0].text = document.Formular.Text.value;
document.getElementsByTagName("body")[0].link = document.Formular.Link.value;
document.getElementsByTagName("body")[0].vLink = document.Formular.VLink.value;
document.getElementsByTagName("body")[0].bgColor =
document.Formular.BgColor.value;
}
//-->
</script>
</head><body>
<h1>Ein dynamisches Dokument</h1>
<a href="news.htm"><b>Ein Link zu den News</b></a>
<form name="Formular" action="">
<pre>
Textfarbe:
<input type="text" size="7" name="Text">
Linkfarbe:
<input type="text" size="7" name="Link">
Linkfarbe (besucht): <input type="text" size="7" name="VLink">
Hintergundfarbe:
<input type="text" size="7" name="BgColor">
Einstellungen:
<input type="button" value="Testen!" onClick="WerteSetzen()">
</pre>
</form>
</body></html>

712

Kapitel 20: JavaScript Objekt-Referenz

Die Beispieldatei enthlt im body-Bereich eine berschrift, einen Link und ein Formular mit
verschiedenen Eingabefeldern. In den Eingabefeldern kann der Anwender neue Basisfarben fr
das Dokument einstellen typische Eingabewerte sind also hexadezimale Angaben wie #FFFFCC
oder Farbwrter wie maroon. Beim Anklicken des Buttons mit der Aufschrift Testen wird die
JavaScript-Funktion WerteSetzen() aufgerufen, die im Dateikopf notiert ist. Diese greift mit
document.getElementsByTagName("body")[0] auf das erste body-Element der Datei zu
und weist den entsprechenden Eigenschaften die eingegebenen Werte aus dem Formular zu. Dadurch verndern sich die Basisfarben des Dokuments.
Beachten Sie: Sie knnen im MS Internet Explorer und im Netscape 6 zustzlich auf die Eigenschaften offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent und innerHTML
zugreifen. Im Netscape 6 stehen diese Eigenschaften jedoch erst nach dem Laden des Dokumentes zur Verfgung.
Beim MS Internet Explorer sind auf das body-Objekt die meisten Eigenschaften des all-Objekts
anwendbar. Der Grund ist, dass body im Internet Explorer schon vor Einfhrung der DOMSyntax als Objektname existierte. Unter dem MS Internet Explorer 5.0 Macintosh Edition war
das Beispiel nicht vollstndig nachvollziehbar und fhrte teilweise zu einem sehr seltsamen Verhalten.

br (HTML-Elementobjekt)
HTML-Elemente <br> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
clear

Status

Bedeutung
Fortsetzungsposition bei Textumfluss

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="../../../src/logo.gif" width="106" height="109" border="0" align="left"
alt="Logo" onClick="document.getElementById(Umbruch).clear=all">
Dieser Text fliesst um das Logo herum,
weil dies im align-Attribut des Logos so angegeben ist.<br id="Umbruch">
Gilt das auch bei diesem Text?
</body></html>

Das Beispiel enthlt eine Grafik, bei der durch die Angabe align="left" festgelegt wird, dass
der nachfolgende Text rechts um die Grafik fliet. Der Text enthlt einen Zeilenumbruch, markiert durch <br>. Die Grafik enthlt einen Event-Handler onClick, der bewirkt, dass beim
Anklicken der Grafik mit document.getElementById(Umbruch) auf das ZeilenumbruchElement zugegriffen wird. Ihm wird die Eigenschaft clear mit dem Wert all zugewiesen. Der
Text unterhalb des Umbruchs rutscht bei einem Klick auf die Grafik unter die Grafik, da <br
clear="all"> die Textfortsetzung unterhalb der Grafik bewirkt.

20.5 HTML-Elementobjekte

713

button (HTML-Elementobjekt)
HTML-Elemente <button>...</button> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

accessKey

Hotkey fr den Tastaturzugriff

disabled

Button kann nicht bettigt werden

form

zugehriges Formularelement

name

Name fr den Button

tabIndex

Tabulatorreihenfolge

type

Typ des Buttons

value

Absendewert des Buttons

Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-function ZeitAufButton() {
var jetzt = new Date();
var Zeit = jetzt.getTime();
document.getElementsByName("Zeitbutton")[0].value = Zeit;
document.getElementsByName("Zeitbutton")[0].firstChild.nodeValue = Zeit;
}
//-->
</script>
</head><body>
<form name="Formular" action="">
<button name="Zeitbutton" value="" onClick="ZeitAufButton()">Zeit!</button>
</form>
</body></html>

Das Beispiel definiert in einem Formular einen Button, der den Event-Handler onClick enthlt.
Beim Anklicken des Buttons wird deshalb die JavaScript-Funktion ZeitAufButton() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt mit Hilfe des Date-Objekts den aktuellen Zeitpunkt in Millisekunden und weist diesen ermittelten Wert sowohl dem Absendewert
des Buttons als auch dessen Aufschrift zu. Dazu wird mit document.getElementsByName
("Zeitbutton")[0] auf das erste Element mit dem Attribut name="Zeitbutton" zugegriffen.
Der Absendewert wird durch Zuweisen des Wertes von Zeit an die Eigenschaft value gendert.
Fr die Button-Aufschrift muss der Wert des ersten Kindknotens (firstChild.nodeValue) des
Buttons gendert werden. Das Beispiel bewirkt, dass bei jedem Anklicken des Buttons die
Millisekundenzeit auf der Button-Aufschrift aktualisiert wird.

714

Kapitel 20: JavaScript Objekt-Referenz

caption (HTML-Elementobjekt)
HTML-Elemente <caption>...</caption> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
align

Status

Bedeutung
Ausrichtung

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Wechseln() {
if(document.getElementById("THeader").align == "left")
document.getElementById("THeader").align = "right";
else
document.getElementById("THeader").align = "left";
}
//-->
</script>
</head><body>
<table border="5" cellspacing="4">
<caption id="THeader" align="left"
onClick="Wechseln()"><b>Spielstand:</b></caption>
<tr>
<td>Hans Moosreiner:</td><td>5 Punkte</td>
</tr><tr>
<td>Lisa Wohlthu:</td><td>3 Punkte</td>
</tr>
</table>
</body></html>

Das Beispiel enthlt eine kleine Tabelle mit einer Tabellenberschrift, die durch <caption>...
</caption> ausgezeichnet ist. Das einleitende Tag enthlt ferner den Event-Handler onClick.
Dadurch wird beim Anklicken der Tabellenberschrift die JavaScript-Funktion Wechseln()
aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("THeader") auf die Tabellenberschrift zu und fragt ab, ob deren align-Eigenschaft den
Wert left hat. Wenn ja, wird er auf right gendert, wenn nein (also wenn er auf right gesetzt
ist), wird er wieder auf left gesetzt. Auf diese Weise springt die Tabellenberschrift bei jedem
Anklicken zur anderen Seite (links bzw. rechts).
Beachten Sie: Mit Netscape (6.1) und dem MS Internet Explorer 5.0 Macintosh Edition war das
Beispiel mit dem caption-Element nicht nachvollziehbar.

20.5 HTML-Elementobjekte

715

center (HTML-Elementobjekt)
HTML-Elemente <center>...</center> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<center id="zentriert" title="Das ist wirklich zentriert!"
onMouseover="alert(document.getElementById(zentriert).title)">
<h1>Das ist zentriert</h1>
<h2>Das ist zentriert</h2>
<h3>Das ist zentriert</h3>
</center>
</body></html>

Das Beispiel enthlt einen mit <center>...</center> ausgezeichneten Bereich, innerhalb

dessen alles zentriert dargestellt wird. Im einleitenden Tag ist der Event-Handler onMouseOver
notiert. Beim berfahren des zentrierten Bereichs wird ein Meldungsfenster ausgegeben, das den
Wert des Attributs title ausgibt. Dazu wird mit document.getElementById(zentriert)
auf das Element zugegriffen.
Beachten Sie: Opera 5.12 interpretiert dieses Beispiel ebenfalls.

cite (HTML-Elementobjekt)
HTML-Elemente <cite>...</cite> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<cite id="Zitat" title="Zitat von Kafka"
onMouseOver="alert(document.getElementById(Zitat).title)">
Die Krhen behaupten, eine einzige Krhe knne den Himmel zerstren.
Das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet
eben:
Unmglichkeit von Krhen.
</cite>
</body></html>

Das Beispiel enthlt einen mit <cite>...</cite> ausgezeichneten Bereich. Im einleitenden Tag
ist der Event-Handler onMouseOver notiert. Beim berfahren des zentrierten Bereichs wird ein
Meldungsfenster ausgegeben, das den Wert des Attributs title ausgibt. Dazu wird mit document.getElementById(Zitat) auf das Element zugegriffen.
Beachten Sie: Opera 5.12 interpretiert dieses Beispiel ebenfalls.

code (HTML-Elementobjekt)
HTML-Elemente <code>...</code> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften.

716

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.farbig { color:blue }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!-function farbig() {
document.getElementById("Perlbeispiel").className = "farbig";
}
//-->
</script>
</head><body>
<p><code id="Perlbeispiel" onClick="farbig()">$Text =~ s/[a-z]| //gi;</code></p>
</body></html>

Das Beispiel enthlt in einem Textabsatz Perl-Code, der mit <code>...</code> ausgezeichnet
ist. Im einleitenden <code>-Tag ist der Event-Handler onClick notiert. Beim Anklicken des
Textes dieses Elements wird die JavaScript-Funktion farbig() aufgerufen. Diese greift mit
document.getElementById("Perlbeispiel") auf das code-Element zu und weist ihm die im
Dateikopf in einem Style-Bereich definierte Klasse farbig zu. Der Text wird dadurch blau dargestellt.

col (HTML-Elementobjekt)
HTML-Elemente <col> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung

ch

Ausrichtungszeichen

chOff

Position des Ausrichtungszeichens

span

Anzahl Spalten, fr die Angaben gelten

vAlign

Tabellenspalten vertikal ausrichten

width

Spaltenbreite

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function gleichbreit() {

20.5 HTML-Elementobjekte

717

for(i = 0; i < document.getElementsByTagName("col").length; i++)

document.getElementsByTagName("col")[i].width = "320";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
<td>1. Zeile, 3. Spalte</td>
</tr>
</table>
<a href="javascript:gleichbreit()">Spalten gleich breit machen!</a>
</body></html>

Das Beispiel enthlt eine Tabelle mit drei Spalten, deren Breiten mit col-Elementen unterschiedlich vordefiniert werden. Unterhalb der Tabelle ist ein Verweis notiert, bei dessen Anklicken die JavaScript-Funktion gleichbreit() aufgerufen wird. Diese greift in einer for-Schleife
der Reihe nach mit document.getElementsByTagName("col") auf die einzelnen col-Elemente zu und weist ihnen jeweils den Wert 320 fr die Eigenschaft width zu. Dadurch wird die
Tabelle dynamisch neu angezeigt, und zwar mit drei gleich breiten Spalten.
Beachten Sie: Unter dem MS Internet Explorer 5.0 Macintosh Edition war das Beispiel nicht
nachvollziehbar.

colgroup (HTML-Elementobjekt)
HTML-Elemente <colgroup>...</colgroup> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung

ch

Ausrichtungszeichen

chOff

Position des Ausrichtungszeichens

span

Anzahl Spalten, fr die Angaben gelten

vAlign

Tabellenspalten vertikal ausrichten

width

Spaltenbreite

718

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function ausrichten() {
document.getElementById("Tabellenspalten").align = "right";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup id="Tabellenspalten">
<col width="200">
</colgroup>
<tr><td>Hansi</td></tr>
<tr><td>Willi</td></tr>
<tr><td>Manni</td></tr>
</table>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>

Das Beispiel enthlt eine Tabelle mit einer colgroup-Definition. Unterhalb der Tabelle ist ein
Verweis notiert, bei dessen Anklicken die JavaScript-Funktion ausrichten() aufgerufen wird.
Diese greift mit document.getElementById("Tabellenspalten") auf das colgroup-Element
zu und weist ihm den Wert right fr die Eigenschaft align zu. Dadurch wird die Tabelle
dynamisch neu angezeigt, und alle Zellen werden rechtsbndig ausgerichtet.
Beachten Sie: Mit Netscape (6.1) und dem MS Internet Explorer 5.0 Macintosh Edition war das
Beispiel nicht nachvollziehbar. Aber auch der Internet Explorer 5.x interpretiert die Eigenschaften von colgroup nur unvollstndig.

dd (HTML-Elementobjekt)
HTML-Elemente <dd>...</dd> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Titel() {
for(var i = 0; i < document.getElementsByTagName("dt").length; i++)
document.getElementsByTagName("dd")[i].title =
document.getElementsByTagName("dt")[i].firstChild.nodeValue;
}
//-->
</script>
</head><body>
<dl>
<dt>*.bmp</dt><dd>Bitmap-Grafiken</dd>
<dt>*.html</dt><dd>Web-Seiten-Dateien</dd>

20.5 HTML-Elementobjekte

719

<dt>*.css</dt><dd>Style-Dateien fr Web-Seiten</dd>
</dl>
<a href="javascript:Titel()">Titel</a>
</body></html>

Das Beispiel enthlt eine Definitionsliste mit drei Eintrgen. Unterhalb davon ist ein Verweis
notiert. Beim Anklicken des Verweises wird die JavaScript-Funktion Titel() aufgerufen, die im
Dateikopf notiert ist. Diese greift in einer for-Schleife der Reihe nach auf alle dt-Elemente zu
und weist den zugehrigen dd-Elementen den Inhalt der dt-Elemente als title-Attribut zu.

del (HTML-Elementobjekt)
HTML-Elemente <del>...</del> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

cite

URI fr Grnde der nderung

dateTime

Datum und Uhrzeit der nderung

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Grund() {
document.getElementById("HTMLVersion").cite = "http://www.w3.org/TR/html401";
}
//-->
</script>
</head><body onLoad="Grund()">
<p><del id="HTMLVersion"
onMouseOver="alert(document.getElementById(HTMLVersion).cite)">
die aktuelle HTML-Version ist 2.0</del></p>
</body></html>

Das Beispiel enthlt eine mit <del>...</del> gelschte nderungsmarkierung. Nachdem die
Datei geladen ist (Event-Handler onLoad im einleitenden <body>-Tag), wird die JavaScriptFunktion Grund() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementById("HTMLVersion") auf das del-Element zu und weist ihm die im HTML-Code
nicht notierte Eigenschaft cite mit einem Wert zu. Das del-Element verfgt zur Kontrolle ber
einen Event-Handler onMouseOver. Beim berfahren des markierten Textes wird dadurch ein
Meldungsfenster angezeigt, das den aktuellen Wert der Eigenschaft cite ausgibt.
Beachten Sie: Opera 5.12 erlaubt nur einen lesenden Zugriff auf diese Eigenschaft.

720

Kapitel 20: JavaScript Objekt-Referenz

dfn (HTML-Elementobjekt)
HTML-Elemente <dfn>...</dfn> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p><dfn id="Definition" title="Dies ist eine Definition!"
onMouseOver="alert(document.getElementById(Definition).title)">
Ein Uhu ist ein Vogel und kein Kleber</dfn></p>
</body></html>

Das Beispiel enthlt eine mit <dfn>...</dfn> ausgezeichnete Definition. Beim berfahren mit
der Maus (onMouseOver) wird ein Meldungsfenster ausgegeben, das den Wert des title-Attributs des dfn-Elements ausgibt. Dazu wird mit document.getElementById(Definition)
auf das Element zugegriffen.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

dir (HTML-Elementobjekt)
HTML-Elemente <dir>...</dir> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
compact

Status

Bedeutung
Darstellung in enger Schrift

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function zeigKompakt() {
document.getElementsByTagName("dir")[0].compact = true;
}
//-->
</script>
</head><body>
<dir onMouseOver="zeigKompakt()">
<li>Eigene Dateien</li>
<li>Programme</li>
<li>Windows</li>
<li>temp</li>
</dir>
</body></html>

Das Beispiel enthlt eine Verzeichnisliste. Beim berfahren der Liste mit der Maus (onMouseOver) wird die JavaScript-Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist.

20.5 HTML-Elementobjekte

721

Die Funktion greift mit document.getElementsByTagName("dir")[0] auf das erste dir-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true (wahr). Dadurch
wird die gesamte Liste in kompakter Schrift dargestellt.
Beachten Sie: Weder Netscape noch Internet Explorer interpretieren das HTML-Attribut compact.

div (HTML-Elementobjekt)
HTML-Elemente <div>...</div> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
align

Status

Bedeutung
Ausrichtung

Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-div { border:solid 3px red; padding:10px; }
-->
</style>
<script type="text/javascript">
<!-function ausrichten() {
document.getElementById("zweiter").align = "center";
document.getElementById("dritter").align = "right";
}
//-->
</script>
</head><body>
<div id="erster"><h1>Erster Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="zweiter"><h1>Zweiter Bereich</h1><p>mit etwas Text</p></div>
<hr>
<div id="dritter"><h1>Dritter Bereich</h1><p>mit etwas Text</p></div>
<a href="javascript:ausrichten()">ausrichten!</a>
</body></html>

Das Beispiel enthlt insgesamt drei div-Bereiche. Unterhalb davon ist ein Verweis notiert. Beim
Anklicken des Verweises wird die JavaScript-Funktion ausrichten() aufgerufen. Diese Funktion ndert fr den zweiten und dritten der Bereiche die Ausrichtung auf zentriert bzw.
rechts. Dazu wird mit document.getElementById("zweiter") auf den zweiten Bereich
zugegriffen und mit document.getElementById("dritter") auf den dritten. Alle Elemente,
die innerhalb der Bereiche notiert sind, werden dynamisch neu ausgerichtet.

722

Kapitel 20: JavaScript Objekt-Referenz

dl (HTML-Elementobjekt)
HTML-Elemente <dl>...</dl> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
compact

Status

Bedeutung
Darstellung in enger Schrift

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function zeigKompakt() {
document.getElementsByTagName("dl")[0].compact = true;
}
//-->
</script>
</head><body>
<dl onMouseOver="zeigKompakt()">
<dt>User Guide</dt><dd>Benutzerhandbuch</dd>
<dt>User Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Das Beispiel enthlt eine Definitionsliste. Beim berfahren der Liste mit der Maus (onMouseOver) wird die JavaScript-Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist.
Die Funktion greift mit document.getElementsByTagName("dl")[0] auf das erste dl-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true (wahr). Dadurch
wird die gesamte Liste in kompakter Schrift dargestellt.
Beachten Sie: Weder Netscape noch Internet Explorer interpretieren das HTML-Attribut compact.

dt (HTML-Elementobjekt)
HTML-Elemente <dt>...</dt> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.hervorgehoben { font-weight:bold; color:red; }
-->
</style>
<script type="text/javascript">
<!-function Wechseln(x) {

20.5 HTML-Elementobjekte

723

if(document.getElementsByTagName("dt")[x].className == "")
document.getElementsByTagName("dt")[x].className = "hervorgehoben";
else
document.getElementsByTagName("dt")[x].className = "";
}
//-->
</script>
</head><body>
<dl>
<dt class="" onClick="Wechseln(0)">User Guide</dt><dd>Benutzerhandbuch</dd>
<dt class="" onClick="Wechseln(1)">User
Instructions</dt><dd>Bedienungsanleitung</dd>
</dl>
</body></html>

Das Beispiel enthlt eine Definitionsliste. Jedes der dt-Elemente enthlt eine leere Style-Klassenzuweisung und den Event-Handler onClick. Beim Anklicken der Elemente wird jeweils die
JavaScript-Funktion Wechseln() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift
mit document.getElementsByTagName("dt")[x] auf das jeweilige Element zu x ist dabei ein
Parameter dafr, das wievielte Element dieses Typs in der Datei gemeint ist. Die dt-Elemente
bergeben der Funktion den entsprechenden Parameter beim Aufruf mit Wechseln(0) bzw.
Wechseln(1). Das Beispiel bewirkt, dass dem betroffenen dt-Element beim ersten Anklicken
der Klassenname hervorgehoben zugewiesen wird und beim nchsten Anklicken wieder eine
leere Klasse. Die Klasse hervorgehoben, die im Dateikopf in einem Style-Bereich definiert ist,
bewirkt, dass das Element fett und rot dargestellt wird.
Beachten Sie: Netscape 6.1 interpretiert dieses Beispiel nicht.

em (HTML-Elementobjekt)
HTML-Elemente <em>...</em> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.mitVielGefuehl { font-family:Lucida Calligraphy; font-size:150%; color:maroon; }
-->
</style>
<script type="text/javascript">
<!-function xem() {
document.getElementById("Herzschmerz").className = "mitVielGefuehl";
}
function em() {
document.getElementById("Herzschmerz").className = "";
}
//-->
</script>
</head><body>

724

Kapitel 20: JavaScript Objekt-Referenz

<p>Das ist Text, der sich

<em id="Herzschmerz" onMouseOver="xem()" onMouseOut="em()">vor Herzschmerz kaum
retten kann</em>.</p>
</body></html>

Das Beispiel enthlt einen Satz, von dem ein Teil mit <em>...</em> ausgezeichnet ist. Das einleitende <em>-Tag enthlt die Event-Handler onMouseOver und onMouseOut. In einem Fall wird
die JavaScript-Funktion xem() aufgerufen, im anderen die Funktion em(). Beide Funktionen
greifen mit document.getElementById("Herzschmerz") auf das em-Element zu und weisen
einmal den Style-Klassennamen mitVielGefuehl und einmal einen leeren Klassennamen zu.
Die CSS-Klasse mitVielGefuehl ist im Dateikopf definiert. Beim berfahren des em-Elements
mit der Maus wird der Text im Element dynamisch stark hervorgehoben.

fieldset (HTML-Elementobjekt)
HTML-Elemente <fieldset>...</fieldset> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
form

Status

Bedeutung
zugehriges Formularelement

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Hinweis() {
if(document.getElementById("Absender").form != null)
alert("Geben Sie Vornamen und Zunamen in jedem Fall an!");
}
//-->
</script>
</head><body bgcolor="#EEEEEE">
<form name="Formular" action="">
<fieldset id="Absender" onMouseOver="Hinweis()">
<legend>Absender</legend>
<table><tr>
<td align="right">Vorname:</td>
<td><input type="text" size="40" maxlength="40"></td>
</tr><tr>
<td align="right">Zuname:</td>
<td><input type="text" size="40" maxlength="40"></td>
</tr></table>
</fieldset>
</form>
</body></html>

20.5 HTML-Elementobjekte

725

Das Beispiel enthlt ein Formular mit einem fieldset-Bereich. Im einleitenden <fieldset>Tag ist der Event-Handler onMouseOver notiert, der die JavaScript-Funktion Hinweis() aufruft,
die im Dateikopf definiert ist. Mit if(document.getElementById("Absender").form !=
null) fragt die Funktion ab, ob die Eigenschaft form einen Wert hat. Wenn der Wert ungleich
null ist, bedeutet dies, dass das fieldset-Element wie vorgeschrieben innerhalb eines Formulars vorkommt. In diesem Fall wird eine Meldung ausgegeben.
Beachten Sie: Der MS Internet Explorer interpretiert die Eigenschaft form erst ab Version 6.0.

font (HTML-Elementobjekt)
HTML-Elemente <font>...</font> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

color

Schriftfarbe

face

Schriftart

size

Schriftgre

Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-var sizes = new Array ("1","2","3","4","5","6","7");
var colors = new Array("#FF0000","#0000FF","#009900","#CC00CC");
var faces = new Array("Arial","Tahoma","Wide Latin");
function Spielen() {
var s = parseInt((Math.random() * 100) % 7);
var c = parseInt((Math.random() * 100) % 4);
var f = parseInt((Math.random() * 100) % 3);
var i = parseInt((Math.random() * 100) % 7);
document.getElementsByTagName("font")[i].size = sizes[s];
document.getElementsByTagName("font")[i].color = colors[c];
document.getElementsByTagName("font")[i].face = faces[f];
window.setTimeout("Spielen()",1000);
}
//-->
</script>
</head><body onLoad="Spielen()">
<p>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>
<font>So viel verspielter Text, o Sophie!</font><br>

726

Kapitel 20: JavaScript Objekt-Referenz

<font>So viel verspielter Text, o Sophie!</font><br>

<font>So viel verspielter Text, o Sophie!</font><br>
</p>
</body></html>

Das Beispiel enthlt insgesamt sieben Texte, die mit font-Elementen ausgezeichnet sind. Keines
der font-Elemente enthlt allerdings in HTML irgendwelche Attribute. Nachdem das Dokument geladen ist (Event-Handler onLoad im einleitenden <body>-Tag), wird die JavaScriptFunktion Spielen() aufgerufen. Zuvor wurden bereits diverse Arrays angelegt. Die Funktion
Spielen ermittelt mittels Math.random() Zufallszahlen und trimmt diese mit Hilfe von Multiplikation mit 100, Modulodivision und Anwendung der Funktion parseInt() so, dass ganzzahlige
Zufallszahlen erzeugt werden. Diese werden als Index fr die zuvor definierten Arrays verwendet.
Solchermaen ausgerstet, greift die Funktion mit document.getElementsByTagName
("font")[i] zufllig auf eines der font-Elemente zu und weist ihm die ebenfalls zufllig ermittelten Werte aus den Arrays fr die Eigenschaften size, color und face zu. Am Ende wartet die
Funktion eine Sekunde (window.setTimeout()) und ruft sich dann selber wieder auf. Dadurch
ergibt sich ein endloses Spiel an zuflligen Textnderungen.

form (HTML-Elementobjekt)
HTML-Elemente <form>...</form> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
Eigenschaft

Status

Bedeutung

acceptCharset

untersttzte Zeichenstze

action

URI fr die Verarbeitung der Formulardaten

elements

Array fr die zugehrigen Formularelemente

enctype

Mime-Type fr Formulardatenbertragung

length

Anzahl Formularelemente

name

Name des Formulars

method

bertragungsmethode fr Formulardaten

target

Fensternamen fr Antwortausgaben

Methode

Bedeutung

reset()

Formular zurcksetzen
Formular absenden

submit()

20.5 HTML-Elementobjekte

727

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Formular" action="datei.htm" method="get">
<p>
<input name="Text" type="text"><br>
[<a
href="javascript:document.getElementsByName(Formular)[0].submit()"><b>Absenden</b
></a>]
[<a
href="javascript:document.getElementsByName(Formular)[0].reset()"><b>Abbrechen</b
></a>]
</p>
</form>
</body></html>

Das Beispiel enthlt ein Formular mit zwei Verweisen anstelle der sonst blichen Submit- und
Reset-Buttons. Der eine Verweis fhrt die submit()-Methode aus, der andere die reset()Methode. Beide Verweise greifen dazu mit document.getElementsByName(Formular)[0]
auf das erste Element mit dem Namen Formular zu.
Beachten Sie: Dieses Beispiel funktioniert auch in Opera 5.12. In lokaler Umgebung auerhalb
des HTTP-Protokolls (file:) wird jedoch nach dem Absenden der Quellcode der Zieldatei angezeigt.

frame (HTML-Elementobjekt)
HTML-Elemente <frame> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

frameBorder

Rahmen sichtbar oder nicht sichtbar

longDesc

URI fr lngere Beschreibung zum Inhalt des Frame-Fensters

marginHeight

name

Anzahl Pixel fr den Abstand des Fensterinhalts zum oberen und unteren Fensterrand
Anzahl Pixel fr den Abstand des Fensterinhalts zum linken und rechten Fensterrand
Name fr das Frame-Fenster

noResize

Gre vernderbar oder nicht vernderbar

scrolling

Scrolleisten oder keine Scrolleisten

src

URI fr den Inhalt des Frame-Fensters

marginWidth

728

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function nullRand() {
document.getElementById("F1").marginHeight = "0";
document.getElementById("F1").marginWidth = "0";
}
-->
</script>
</head>
<frameset cols="50%,50%">
<frame id="F1" src="frame1.htm" onLoad="nullRand()">
<frame id="F2" src="frame2.htm">
</frameset>
</html>

Das Beispiel definiert ein Frameset mit zwei Frames. Beim ersten frame-Element ist der EventHandler onLoad notiert. Nach dem Laden des Frame-Fensters wird die JavaScript-Funktion
nullRand() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("F1") auf das erste frame-Element zu und setzt dessen Eigenschaften
fr marginHeight und marginWidth auf 0.
Beachten Sie: Das Beispiel war weder mit Netscape noch mit dem Internet Explorer nachvollziehbar.

frameset (HTML-Elementobjekt)
HTML-Elemente <frameset>...</frameset> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

cols

Breitenverhltnisse fr spaltenartig angeordnete Frame-Fenster

rows

Hhenverhltnisse fr reihenartig angeordnete Frame-Fenster

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function dreiFenster() {
document.getElementById("Fenster").cols = "33%,34%,33%";
var F3 = document.createElement("frame");
F3.setAttribute("src","frame3.htm");
document.getElementById("Fenster").appendChild(F3);
}
-->

20.5 HTML-Elementobjekte

729

</script>
</head>
<frameset id="Fenster" cols="50%,50%" onLoad="dreiFenster()">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
</head></html>

Das Beispiel definiert ein Frameset mit zwei Frames. Nachdem das Frameset geladen ist (EventHandler onLoad im einleitenden <frameset>-Tag), wird die Funktion dreiFenster() aufgerufen. Diese Funktion greift mit document.getElementById("Fenster") auf das framesetElement zu und setzt dessen Eigenschaft cols neu und zwar so, dass nun drei Spalten definiert
werden. Dann wird mit document.createElement() ein neues Element erzeugt, dem mit
setAttribute() eine anzuzeigende Datei zugewiesen wird. Anschlieend wird der neue Elementknoten mit appendChild() als letztes neues Kindelement in das frameset-Element eingefgt.
Beachten Sie: Das Beispiel war mit dem Internet Explorer 5.0 nur teilweise nachvollziehbar.

h1-h6 (HTML-Elementobjekt)
HTML-Elemente <h1>...</h1> usw. haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
align

Status

Bedeutung
Ausrichtung

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function rechtslinks() {
for(var i = 0; i < document.getElementsByTagName("h1").length; i++ ) {
if(document.getElementsByTagName("h1")[i].align == "left")
document.getElementsByTagName("h1")[i].align = "right";
else
document.getElementsByTagName("h1")[i].align = "left";
}
}
-->
</script></head><body>
<h1 align="left">Kapitel 1</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 2</h1>
<p>viel Text</p>
<h1 align="left">Kapitel 3</h1>
<p>und ein <a href="javascript:rechtslinks()">Ausrichtungsverweis</a></p>
</body></html>

730

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel enthlt insgesamt drei berschriften erster Ordnung. Ganz unten ist ein Verweis
notiert, bei dessen Anklicken die JavaScript-Funktion rechtslinks() aufgerufen wird, die im
Dateikopf steht. Diese greift in einer for-Schleife der Reihe nach mit document.getElementsByTagName("h1")[i] auf alle h1-Elemente des Dokuments zu. Fr jedes dieser Elemente
wird abgefragt, ob seine Eigenschaft align den Wert left hat. Wenn ja, wird er auf right
gesetzt, wenn nein, wird er wieder auf left gesetzt. Bei jedem Anklicken des Verweises ndern
also alle drei berschriften ihre Ausrichtung.
Beachten Sie: Das Beispiel ist im Netscape 6.1 nicht nachvollziehbar.

head (HTML-Elementobjekt)
Das HTML-Element <head>...</head> hat als DOM-Objekt fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
profile

Status

Bedeutung
URI fr Metadaten-Profil

Beispiel:
<html><head profile="http://localhost/profiles/mydocs"><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("Verwendetes Profil: " +
document.getElementsByTagName("head")[0].profile);
//-->
</script>
</body></html>

Das Beispiel enthlt im einleitenden <head>-Tag eine profile-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit
document.getElementsByTagName("head")[0] auf das head-Element zugegriffen.
Beachten Sie: Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML
4.0-Standard fr das head-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die
Methode document.getElementsById() vermeiden.

hr (HTML-Elementobjekt)
HTML-Elemente <hr> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

20.5 HTML-Elementobjekte
Eigenschaft

Status

731

Bedeutung

align

Ausrichtung der Trennlinie

noShade

Trennlinie wird flach und ohne 3-D-Effekt dargestellt

size

Dicke der Trennlinie

width

Lnge der Trennlinie

Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-var Dicke = 3;
function dicker() {
Dicke += Dicke;
document.getElementById("Linie").size = Dicke;
}
-->
</script></head><body>
<hr id="Linie" noshade size="3" onClick="dicker()">
</body></html>

Das Beispiel enthlt eine Trennlinie der Dicke 3 (size="3"). Das hr-Element enthlt einen
Event-Handler onClick. Beim Anklicken der Trennlinie wird die JavaScript-Funktion dicker()
aufgerufen, die im Dateikopf notiert ist. Diese Funktion erhht den Wert der Variablen Dicke
um sich selbst und greift dann mit document.getElementById("Linie") auf das hr-Element
zu, um dessen Eigenschaft size mit dem neuen Wert von Dicke zu belegen. Die Linie wird also
bei jedem Anklicken deutlich dicker.

html (HTML-Elementobjekt)
Das HTML-Element <html>...</html> hat als DOM-Objekt fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
Eigenschaft
version

Status

Bedeutung
HTML-Sprachversion

Ein Beispiel:
<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--

732

Kapitel 20: JavaScript Objekt-Referenz

document.write("Dies ist in HTML " +

document.getElementsByTagName("html")[0].version + " geschrieben!");
//-->
</script>
</body></html>

Das Beispiel enthlt im einleitenden <html>-Tag eine version-Angabe. Innerhalb des Dokuments wird diese Angabe mit document.write() ins Dokument geschrieben. Dabei wird mit
document.getElementsByTagName("html")[0] auf das html-Element zugegriffen.
Beachten Sie: Die Verwendung anderer Universaleigenschaften als dir und lang ist im HTML4.0-Standard fr das html-Element nicht vorgesehen. Deshalb sollten Sie bei diesem Element die
Methode document.getElementsById() vermeiden.

i (HTML-Elementobjekt)
HTML-Elemente <i>...</i> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!-function set_normal() {
document.getElementById("schief").className = "normal";
}
//-->
</script>
</head><body>
<i id="schief">schiefe Aussage!</i><br>
<a href="javascript:set_normal()">gerade machen!</a>
</body></html>

Das Beispiel enthlt einen mit <i>...</i> formatierten Text und darunter einen Verweis. Beim
Anklicken des Verweises wird die JavaScript-Funktion set_normal() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("schief") auf das iElement zu und setzt dessen Universaleigenschaft className neu. Die entsprechende Klasse
normal ist im Dateikopf in einem Style-Bereich definiert.

iframe (HTML-Elementobjekt)
HTML-Elemente <iframe> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

20.5 HTML-Elementobjekte
Eigenschaft

Status

Bedeutung

align

Ausrichtung

frameBorder

Rahmen sichtbar oder nicht sichtbar

height

Anzeigehhe

longDesc

URI fr lngere Beschreibung zum Inhalt des Frame-Fensters

marginHeight

name

Anzahl Pixel fr den Abstand des Fensterinhalts zum oberen und

unteren Fensterrand
Anzahl Pixel fr den Abstand des Fensterinhalts zum linken und
rechten Fensterrand
Name fr das Frame-Fenster

scrolling

Scroll-Leisten oder keine Scroll-Leisten

src

URI fr den Inhalt des Frame-Fensters

width

Anzeigebreite

marginWidth

733

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function groesser() {
document.getElementById("Frame").width = "600";
document.getElementById("Frame").height = "400";
}
//-->
</script></head><body>
<iframe id="Frame" src="frame1.htm" width="400" height="300"></iframe>
<p><a href="javascript:groesser()">Anzeigefenster erweitern</a></p>
</body></html>

Das Beispiel definiert einen eingebetteten Frame. Unterhalb davon ist ein Verweis notiert. Beim
Anklicken des Verweises wird die JavaScript-Funktion groesser() aufgerufen, die im Dateikopf
notiert ist. Diese greift mit document.getElementById("Frame") auf das iframe-Element zu
und ndert dessen Eigenschaften width und height. Das eingebettete Frame-Fenster wird dadurch dynamisch vergrert.

img (HTML-Elementobjekt)
HTML-Elemente <img> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.

734

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Status

Bedeutung

align

Ausrichtung der Grafik

alt

Alternativtext

border

Rahmendicke um Grafik

height

Anzeigehhe

hspace

horizontaler Abstand zwischen Grafik und umflieendem Text

isMap

Grafik benutzt ein serverseitiges Handling fr verweissensitive Flchen

longDesc

URI fr Langbeschreibung zur Grafik

lowSrc

URI einer Vorabgrafik

name

Name der Grafik

src

URI der Grafik

useMap

Verweis zu einem map-Bereich

vspace

vertikaler Abstand zwischen Grafik und umflieendem Text

width

Anzeigebreite

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function neuesBild() {
if(document.getElementById("Bild").src.indexOf("iso8859_1.gif") > -1) {
document.getElementById("Bild").src = "../../../inter/iso8859_2.gif";
document.getElementById("Bild").title = "Bild 2";
return;
}
if(document.getElementById("Bild").src.indexOf("iso8859_2.gif") > -1) {
document.getElementById("Bild").src = "../../../inter/iso8859_3.gif";
document.getElementById("Bild").title = "Bild 3";
return;
}
if(document.getElementById("Bild").src.indexOf("iso8859_3.gif") > -1) {
document.getElementById("Bild").src = "../../../inter/iso8859_1.gif";
document.getElementById("Bild").title = "Bild 1";
return;
}
}
//-->

20.5 HTML-Elementobjekte

735

</script></head><body>
<img id="Bild" src="../../../inter/iso8859_1.gif" width="289" height="302"
alt="Bild 1" title="Bild 1"><br>
<a href="javascript:neuesBild()">neues Bild</a>
</body></html>

Das Beispiel enthlt eine Grafikreferenz fr eine Ressource namens 8859_1.gif. Unterhalb davon ist
ein Verweis notiert. Bei Anklicken des Verweises wird die JavaScript-Funktion neuesBild() aufgerufen, die im Dateikopf notiert ist. Diese Funktion fragt mit document.getElementById
("Bild").src.indexOf(...) ab, welches Bild gerade angezeigt wird (siehe auch indexOf).
Abhngig davon werden die beiden Eigenschaften src und title mit neuen Werten belegt. Das
Beispiel bewirkt, dass bei jedem Anklicken des Verweises ein neues Bild angezeigt wird.
Beachten Sie: In der Eigenschaft src ist der vollstndige URI des Bildes gespeichert, und nicht
die eventuell relative Angabe, die bei <img src=> zugewiesen wurde. Deshalb muss der Inhalt
von src auch mit einer Zeichenkettenmethode wie indexOf() durchsucht werden, um nach
einem Dateinamen zu suchen. In Netscape 6.x sind die Eigenschaften hspace, vspace und border fehlerhaft implementiert. Opera 5.12 interpretiert dieses Beispiel auch.

input (HTML-Elementobjekt)
HTML-Elemente <input> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
Eigenschaft

Status

Bedeutung

accept

bei type="file" erlaubte Mime-Typen fr File-Upload

accessKey

Hotkey fr das Element

align

Ausrichtung

alt

Alternativtext bei type="image"

checked

Auswhlen bei type="radio" oder type="checkbox"

defaultValue

vorbelegter Wert

defaultChecked

per Vorbelegung ausgewhlt oder nicht

disabled

Element kann nicht gendert werden

form

zugehriges Formular

maxLength

maximale Anzahl eingebbarer Zeichen

name

Name des Elements

readOnly

Wert des Elements kann nicht verndert werden

size

Anzeigebreite bei type="text"

736

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Status

Bedeutung

src

URI der Grafik bei type="image"

tabIndex

Tabulatorreihenfolge

type

Typ des Formularelements

useMap

Verweis zu einem map-Bereich bei type="image"

value

Wert des Elements

Methode

Bedeutung

blur()

Fokus vom Element entfernen

Fokus auf Element setzen
Wert selektieren
Element anklicken

focus()
select()
click()

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Breite = 3;
function erweitern() {
Breite += 1;
document.getElementsByName("Eingabe")[0].size = Breite;
}
//-->
</script></head><body>
<form name="Formular">
Geben Sie Text ein:<br>
<input size="3" name="Eingabe" onKeyPress="erweitern()">
</form>
</body></html>

In der Beispieldatei ist ein Formular mit einem zunchst ziemlich kleinen Eingabefeld
(size="3") notiert. Das Eingabefeld enthlt den Event-Handler onKeyPress. Bei jedem Tastendruck, der erfolgt, whrend das Eingabefeld den Fokus hat, wird darum die JavaScript-Funktion
erweitern() aufgerufen, die im Dateikopf notiert ist. Diese greift mit document.getElementsByName("Eingabe")[0] auf das erste Element mit dem Namen Eingabe zu, also das
Eingabefeld, und ndert dessen Eigenschaft size mit dem aktuellen Wert der Variablen Breite.
Diese wird bei jedem Aufruf der Funktion um 1 erhht. Das Beispiel bewirkt, dass das
Eingabefeld um so grer wird, je mehr Text eingegeben wird.

20.5 HTML-Elementobjekte

737

ins (HTML-Elementobjekt)
HTML-Elemente <ins>...</ins> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

cite

URI fr Grnde der Lschung

dateTime

Datum und Uhrzeit der Lschung

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Text <ins id="hinzugekommen"
onMouseOver="document.getElementById(hinzugekommen).title=das ist
hinzugekommener Text">mit weiterem Text</ins></p>
</body></html>

Das Beispiel enthlt einen Absatz, von dessen Text ein Teil mit <ins>...</ins> ausgezeichnet
ist. Beim berfahren dieses Textes mit der Maus (onMouseOver) wird dynamisch die Universaleigenschaft title mit einem Wert belegt. Dazu wird mit document.getElementById
(hinzugekommen) auf das ins-Element zugegriffen.
Beachten Sie: Mit Netscape 6.1 war dieses Beispiel nicht nachvollziehbar. Das Beispiel wird auch
von Opera 5.12 interpretiert.

isindex (HTML-Elementobjekt)
Das HTML-Element <isindex> hat als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

form

zugehriges Formular

prompt

Labeltext

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<isindex title="selten angewendetes HTML-Element" id="Eingabe"
onMouseOver="alert(document.getElementById(Eingabe).title)">
</body></html>

738

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel enthlt ein isindex-Element. Beim berfahren des Elements mit der Maus wird
ein Meldungsfenster ausgegeben, das den Wert des title-Attributs ausgibt, das im Element
notiert ist. Dazu wird mit document.getElementById(Eingabe) auf das Element zugegriffen.
Beachten Sie: Der Event-Handler onMouseOver kann zwar auf dieses Element angewendet werden, ist jedoch kein Bestandteil der Standards. Das vorliegende Beispiel wird auch von Opera
5.12, jedoch nicht vom MS Internet Explorer 5.0 Macintosh Edition interpretiert.

kbd (HTML-Elementobjekt)
HTML-Elemente <kbd>...</kbd> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Hinweis() {
document.getElementById("Keyboard").title = "Sie haben es geschafft!";
alert(document.getElementById("Keyboard").title);
}
//-->
</script></head><body onKeyPress="Hinweis()">
<kbd id="Keyboard">Taste drcken</kbd>:
</body></html>

Das Beispiel enthlt die Aufforderung eine Taste zu drcken, die sinnigerweise in <kbd>...
</kbd> eingeschlossen ist. Das einleitende <body>-Tag der Datei enthlt den Event-Handler
onKeyPress. Wenn das Dokument den Fokus hat und der Anwender irgendeine Taste drckt,
wird die JavaScript-Funktion Hinweis() aufgerufen, die im Dateikopf definiert ist. Diese
Funktion greift mit document.getElementById("Keyboard") auf das kbd-Element zu und
weist dessen Universaleigenschaft title einen Wert zu. Anschlieend wird zur Kontrolle genau
diese Universaleigenschaft in einem Meldungsfenster ausgegeben.
Beachten Sie: Das Beispiel wird auch von Opera 5.12 interpretiert.

label (HTML-Elementobjekt)
HTML-Elemente <label>...</label> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

accessKey

Hotkey fr das zugehrige Element

form

zugehriges Formular

htmlFor

Id des Elements, zu dem das Label gehrt

20.5 HTML-Elementobjekte

739

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<table>
<tr>
<td><label id="VN" for="Vorname">Ihr Vorname:</label></td>
<td><input type="text" id="Vorname"></td>
</tr><tr>
<td><label id="ZN" for="Zuname">Ihr Zuname:</label></td>
<td><input type="text" id="Zuname"></td>
</tr>
</table>
</form>
<script type="text/javascript">
<!-document.getElementById("Vorname").value = document.getElementById("VN").htmlFor;
document.getElementById("Zuname").value = document.getElementById("ZN").htmlFor;
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit zwei Eingabefeldern. Die Beschriftungen der Eingabefelder
sind jeweils mit einem label-Element ausgezeichnet. Unterhalb des Formulars ist ein ScriptBereich notiert. Dort werden die beiden Eingabefelder mit Werten vorbelegt, und zwar mit den
Werten, die den id-Attributen der zugehrigen label-Elemente zugewiesen sind. Dazu wird mit
document.getElementById("VN") und document.getElementById("ZN") auf die labelElemente zugegriffen. Ihre Eigenschaft htmlFor wird den Formularfeldern zugewiesen, auf die
ebenfalls mit getElementById() zugegriffen wird.

legend (HTML-Elementobjekt)
HTML-Elemente <legend>...</legend> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

accessKey

Hotkey fr das Element

align

Ausrichtung

form

zugehriges Formular

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Formular" action="">
<fieldset>
<legend id="L1">Absender</legend>

740

Kapitel 20: JavaScript Objekt-Referenz

<input type="text" size="50" name="Absendername"

onFocus="document.getElementById(L1).align=right"
onBlur="document.getElementById(L1).align=left">
</fieldset>
<fieldset>
<legend id="L2">Mitteilung</legend>
<input type="text" size="50" name="Mitteilungstext"
onFocus="document.getElementById(L2).align=right"
onBlur="document.getElementById(L2).align=left">
</fieldset>
</form>
</body></html>

Das Beispiel enthlt ein Formular, bei dem fr jedes der beiden Eingabefelder ein fieldsetBereich mitsamt legend-Element definiert ist. Sobald eines der Eingabefelder den Fokus erhlt
(onFocus), wird der zugehrige Legendentext rechtsbndig ausgerichtet. Sobald das Eingabefeld
den Fokus wieder verliert (onBlur), wird der Legendentext wieder linksbndig ausgerichtet.
Dazu wird mit document.getElementById(L1) bzw. document.getElementById(L2)
auf die legend-Elemente zugegriffen. Neu gesetzt wird jeweils ihre Eigenschaft align.
Beachten Sie: Im Netscape 6 erfolgt die Ausrichtung ausgehend vom rechten Rand des Eingabefeldes. Im MS Internet Explorer 5.0 war dieses Beispiel nicht nachvollziehbar.

li (HTML-Elementobjekt)
HTML-Elemente <li>...</li> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

type

Aufzhlungszeichen oder der Nummerierungstyp

value

Wert der laufenden Nummerierung neu setzen

Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.hinterlegt { background-color:yellow }
-->
</style>
<script type="text/javascript">
<!-function Aendern() {
for(var i = 0; i < document.getElementsByTagName("li").length; i++)
if(i % 2 != 0) {
document.getElementsByTagName("li")[i].className = "hinterlegt";
document.getElementsByTagName("li")[i].type = "I";
}

20.5 HTML-Elementobjekte

741

}
//-->
</script>
</head><body>
<ol>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
<li>Ein ungerader Listenpunkt</li>
<li>Ein gerader Listenpunkt</li>
</ol>
<a href="javascript:Aendern()">gerade Listenpunkte hinterlegen!</a>
</body></html>

Das Beispiel enthlt eine nummerierte Liste mit einigen Listenpunkten. Unterhalb davon ist ein
Verweis notiert. Bei Anklicken des Verweises wird die JavaScript-Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion geht in einer for-Schleife der Reihe nach alle
li-Elemente durch, wobei sie mit document.getElementsByTagName("li") darauf zugreift.
Bei geraden Listenpunkten werden zwei nderungen durchgefhrt: Erstens erhalten diese Listenpunkte eine oben im Style-Bereich definierte CSS-Klasse zugewiesen, die dem Element eine
andere Hintergrundfarbe zuweist, und zweitens wird der Nummerierungstyp dieser Listenpunkte auf rmisch grogeschrieben gesetzt.

link (HTML-Elementobjekt)
HTML-Elemente <link> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

charset

Zeichensatz des Verweisziels

disabled

als Button anklickbar oder nicht

href

Verweisziel

hreflang

Landessprache des Verweisziels

media

Ausgabemedium

rel

Verweisziel als Vorwrtsverknpfung

rev

Verweisziel als Rckwrtsverknpfung

target

Fensternamen des Verweisziels

type

Mime-Type des Verweisziels

742

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
<!-function CSS_Wechsel() {
document.getElementById("CSS").href = "styles_2.css";
}
//-->
</script>
</head><body>
<h1>Dies und das</h1>
<a href="javascript:CSS_Wechsel()">anderes Stylesheet!</a>
</body></html>

Das Beispiel enthlt im Dateikopf ein HTML-Tag zum Einbinden eines CSS-Stylesheets. Innerhalb des sichtbaren Dokumentbereichs ist ein Verweis notiert, bei dessen Anklicken die JavaScript-Funktion CSS_Wechsel() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion
greift mit document.getElementById("CSS") auf das link-Element zu, das die CSS-Datei
einbindet, und weist der Eigenschaft href einen neuen Wert zu, nmlich die neue CSS-Datei.
Dadurch wird die neue CSS-Datei relevant fr alle Formatierungen innerhalb der HTML-Datei.
Beachten Sie: Mit Netscape 6.1 und dem MS Internet Explorer 5.0 Macintosh Edition war dieses
Beispiel nicht nachvollziehbar.

map (HTML-Elementobjekt)
HTML-Elemente <map>...</map> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

areas

Array der area-Definitionen

name

Ankername des Definitionsbereichs

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function zeigCoords() {
alert(document.getElementsByName("Testbild")[0].areas[0].coords);
}
//-->
</script>
</head><body>
<map name="Testbild">

20.5 HTML-Elementobjekte

743

<area id="Verweis" shape="rect" coords="1,1,249,49"

href="javascript:zeigCoords()" alt="Verweis">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild"
alt="verweissensitive Grafik">
</body></html>

Das Beispiel enthlt eine Grafik, die auf einen ebenfalls enthaltenen verweissensitiven Bereich
verweist. Dort wird ein verweissensitives Rechteck fr die Grafik definiert. Beim Anklicken dieses
Bereichs wird die JavaScript-Funktion zeigCoords() aufgerufen, die im Dateikopf notiert ist.
Die Funktion gibt die Koordinaten des verweissensitiven Bereichs aus, indem sie mit document.
getElementsByName("Testbild")[0].areas[0].coords auf den areas-Array des map-Elements zugreift und die Eigenschaft coords von dessen erstem Element anspricht.

menu (HTML-Elementobjekt)
HTML-Elemente <menu>...</menu> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
compact

Status

Bedeutung
Darstellung in enger Schrift

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function zeigKompakt() {
document.getElementsByTagName("menu")[0].compact = true;
}
//-->
</script>
</head><body>
<menu onMouseOver="zeigKompakt()">
<li>Datei</li>
<li>Bearbeiten</li>
<li>Ansicht</li>
<li>Format</li>
</menu>
</body></html>

Das Beispiel enthlt eine Menliste. Beim berfahren der Liste mit der Maus (onMouseOver)
wird die JavaScript-Funktion zeigKompakt() aufgerufen, die im Dateikopf notiert ist. Die
Funktion greift mit document.getElementsByTagName("menu")[0] auf das erste menu-Element in der Datei zu und setzt seine Eigenschaft compact auf den Wert true (wahr). Dadurch
wird die gesamte Liste in kompakter Schrift dargestellt.

744

Kapitel 20: JavaScript Objekt-Referenz

Beachten Sie: Weder Netscape noch Internet Explorer interpretieren das HTML-Attribut compact.

meta (HTML-Elementobjekt)
HTML-Elemente <meta>...</meta> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

content

Wert/Inhalt der Meta-Angabe

httpEquiv

Eigenschaft fr Meta-Informationen (fr HTTP-Kopfdaten)

name

Eigenschaft fr Meta-Informationen

scheme

Schema fr den Wert der Eigenschaft

Ein Beispiel:
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!-function Arabisch() {
document.getElementsByTagName("meta")[0].content="text/html; charset=iso-8859-6";
}
//-->
</script>
</head><body>
<p style="fontsize:24pt">&#200;&#201;&#202;&#203;&#204;&#205;&#206;&#207;&#208;&#209;</p>
<p><a href="javascript:Arabisch()">Arabisch</a></p>
</body></html>

Das Beispiel enthlt einen Textabsatz, der mit numerischen Entities Zeichenwerte von 200 bis
209 erzeugt. Unterhalb davon ist ein Verweis notiert. Beim Anklicken wird die JavaScriptFunktion Arabisch() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("meta")[0] auf das meta-Tag zu, das ebenfalls im Dateikopf
notiert ist, und ndert dessen Eigenschaft content so, dass der arabische Zeichensatz (iso-88596) angegeben wird.
Beachten Sie: Weder Netscape noch Internet Explorer interpretieren diese Vernderung.

noframes (HTML-Elementobjekt)
HTML-Elemente <noframes>...</noframes> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften.

20.5 HTML-Elementobjekte

745

Ein Beispiel:
<html><head><title>Test</title>
</head>
<frameset cols="50%,50%">
<frame id="F1" src="frame1.htm">
<frame id="F2" src="frame2.htm">
<noframes title="Das ist aber ein doofer Browser!">
Ihr Browser kann keine Frames anzeigen!
<a
href="javascript:alert(document.getElementsByTagName(noframes)[0].title)">weitere
Infos</a>
</noframes>
</frameset>
</html>

Das Beispiel enthlt eine Frameset-Definition und einen alternativen noframes-Bereich. Innerhalb davon ist ein Verweis notiert, bei dessen Anklicken der Wert der Universaleigenschaft
title des einleitenden <noframes>-Tags in einem Meldungsfenster ausgegeben wird.
Beachten Sie: Leider ist dieses Beispiel mit den gngigen Browsern nicht nachvollziehbar, da
diese Frames untersttzen und auch kein Abschalten von Frames ermglichen. Eine Ausnahme
bildet hier Opera, der ein Abschalten von Frames zulsst und das Beispiel auch interpretiert.

noscript (HTML-Elementobjekt)
HTML-Elemente <noscript>...</noscript> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head><body>
<script language="tcl" type="text/tcl">
<!-proc square {i} {
document write "The call passed $i to the function.<BR>"
return [expr $i * $i]
}
document write "The function returned [square 5]."
# -->
</script>
<noscript id="tcl" title="Ich verstehe kein tcl.">
<p onmouseover="alert(document.getElementById(tcl).title)">Ein Browser der kein
tcl kann.</p>
</noscript>
</body></html>

Im Beispiel wurde ein Script-Bereich in der Sprache tcl dargestellt. Browser, die diese Sprache
nicht interpretieren, interpretieren den zugehrigen noscript-Bereich und zeigen den alternativen Text an. Da es sich um eine andere Sprache als JavaScript handelt, knnen Sie auf das Scriptelement mit JavaScript zugreifen. Wenn die Maus ber den Absatz bewegt wird, wird der Titel
des noscript-Elementes angezeigt.

746

Kapitel 20: JavaScript Objekt-Referenz

Beachten Sie: Der MS Internet Explorer und Netscape interpretieren diesen Tag nur bei ausgeschalteten JavaScript. In Opera 5.12 knnen Sie das Beispiel jedoch nachvollziehen.

object (HTML-Elementobjekt)
HTML-Elemente <object>...</object> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung des Objekts

archive

kommaseparierte Liste mit Archivdateien fr das Objekt

border

Rahmendicke um Objekt

code

Klassendatei bei Java-Applets

codeBase

Basis-URI fr Angaben zu data und archive

codeType

Mime-Type der Datenquelle

data

URI der Datenquelle

declare

Objekt wird geladen, aber nicht initialisiert

form

zugehriges Formularelement

height

Anzeigehhe

hspace

horizontaler Abstand zwischen Objekt und umflieendem Text

name

Name der Grafik

standBy

Meldungstext, der angezeigt wird, whrend das Objekt geladen wird

tabIndex

Tabulatorreihenfolge fr Objekte

type

Mime-Type der Datenquelle

useMap

Verweis zu einem map-Bereich

vspace

vertikaler Abstand zwischen Objekt und umflieendem Text

width

Anzeigebreite

Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-function groesser() {

20.5 HTML-Elementobjekte

747

document.getElementById("TXT").width="640";
document.getElementById("TXT").height="480";
}
//-->
</script>
</head><body>
<p><object id="TXT" data="html.txt" type="text/plain" width="320"
height="240"></object></p>
<p><a href="javascript:groesser()">mehr sehen!</a></p>
</body></html>

Das Beispiel enthlt die Objektdefinition einer TXT-Datei. Unterhalb davon ist ein Verweis
notiert. Beim Anklicken des Verweises wird die JavaScript-Funktion groesser() aufgerufen, die
im Dateikopf notiert ist. Die Funktion greift mit document.getElementById("TXT") auf das
object-Element zu und ndert dessen Eigenschaften fr width und height. Das Objekt wird
dadurch dynamisch vergrert.
Beachten Sie: Im Netscape 6.1 war dieses Beispiel nicht nachvollziehbar.

ol (HTML-Elementobjekt)
HTML-Elemente <ol>...</ol> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

compact

Darstellung in enger Schrift

start

Startwert fr die Nummerierung

type

Art der Nummerierung

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function roemisch() {
document.getElementById("Liste").type="I";
}
function normal() {
document.getElementById("Liste").type="1";
}
//-->
</script>
</head><body>
<ol id="Liste">
<li>eins</li>
<li>zwei</li>

748

Kapitel 20: JavaScript Objekt-Referenz

<li>drei</li>
<li>vier</li>
<li>fnf</li>
</ol>
<a href="javascript:roemisch()">rmisch</a><br>
<a href="javascript:normal()">normal</a>
</body></html>

Das Beispiel enthlt eine nummerierte Liste. Unterhalb davon sind zwei Verweise notiert. Der
eine ruft eine JavaScript-Funktion roemisch() auf, der andere eine Funktion normal(). Beide
Funktionen greifen jeweils mit document.getElementById("Liste") auf das Start-Tag der
nummerierten Liste zu und ndern dessen Eigenschaft type. Im einen Fall wird die Nummerierung dynamisch durch rmische Ziffern ersetzt, im andern Fall werden wieder arabische Ziffern
benutzt.

optgroup (HTML-Elementobjekt)
HTML-Elemente <optgroup>...</optgroup> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

disabled

Gruppe von Eintrgen kann nicht ausgewhlt werden

label

Text des Gruppeneintrags

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Namen" size="1" onChange="alert(document.getElementById(A).label)">
<optgroup label="Namen mit A" id="A">
<option label="Anna"> Anna</option>
<option label="Anke"> Anke</option>
</optgroup>
</select>
</form>
</body></html>

Das Beispiel definiert eine Menstruktur. Sobald ein Eintrag ausgewhlt ist (onChange), wird in
einem Meldungsfenster der Wert der Eigenschaft label des optgroup-Elements mit dem idWert A ausgegeben.
Beachten Sie: Weder Netscape noch Internet Explorer interpretieren Menstrukturen bis auf
den heutigen Tag korrekt Netscape 6.x zwar ansatzweise, aber noch nicht so wie es gedacht ist.
Dennoch interpretieren beide Browser das obige JavaScript.

20.5 HTML-Elementobjekte

749

option (HTML-Elementobjekt)
HTML-Elemente <option>...</option> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft
defaultSelect

Status

Bedeutung
vorausgewhlter Auswahllisteneintrag

ed
disabled

Auswahllisteneintrag kann nicht ausgewhlt werden

form

zugehriges Formular

index
label

Indexnummer des Auswahllisteneintrags (erster Eintrag hat

Nummer 0, zweiter Nummer 1 usw.)
Text des Eintrags im Zusammenhang mit Menstrukturen

selected

Auswahllisteneintrag wird ausgewhlt

text

Text des Auswahllisteneintrags

value

Absendewert des Auswahllisteneintrags

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Auswahl" action="">
<select name="Zutaten" size="1">
<option value="Z_101">Salami</option>
<option value="Z_102">Pilze</option>
<option value="Z_103">Schinken</option>
<option value="Z_104">Oliven</option>
<option value="Z_105">Paprika</option>
</select>
</form>
<script language="JavaScript" type="text/javascript">
<!-document.write("<table border=\"1\">");
for(i = 0; i < document.getElementsByTagName("option").length; i++) {
document.write("<tr><td><b>Zutat:<\/b><\/td><td>");
document.write(document.getElementsByTagName("option")[i].text);
document.write("<\/td><td><b>interner Absendewert:<\/b><\/td><td>");
document.write(document.getElementsByTagName("option")[i].value);
document.write("<\/td><\/tr>");
}
document.write("<\/table>");

750

Kapitel 20: JavaScript Objekt-Referenz

//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste. Unterhalb davon ist ein Script notiert,
das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer for-Schleife der Reihe
nach alle option-Elemente durch und greift mit document.getElementsByTagName
("option") auf die einzelnen option-Elemente zu. Fr jedes Element werden der interne
Absendewert (value) und der Auswahltext (text) in die Tabelle geschrieben.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

p (HTML-Elementobjekt)
HTML-Elemente <p>...</p> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.
Eigenschaft
align

Status

Bedeutung
Ausrichtung

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ausrichten(wie) {
for(var i = 0; i < document.getElementsByTagName("p").length; i++) {
document.getElementsByTagName("p")[i].align = wie;
}
}
//-->
</script>
</head><body>
<p>Der erste</p>
<p>Der zweite</p>
<p>Der dritte</p>
<form name="Formular" action="">
<input type="button" value="links" onClick="Ausrichten(left)">
<input type="button" value="zentriert" onClick="Ausrichten(center)">
<input type="button" value="rechts" onClick="Ausrichten(right)">
</form>
</body></html>

Das Beispiel enthlt drei Textabstze. Unterhalb davon ist ein Formular mit drei Klick-Buttons
notiert. Jeder Button ruft beim Anklicken die JavaScript-Funktion Ausrichten() auf, die im
Dateikopf notiert ist, und bergibt ihr einen Wunschwert fr die Ausrichtung (left, center
und right). Die Funktion Ausrichten() geht in einer for-Schleife mit document.getEle-

20.5 HTML-Elementobjekte

751

mentsByTagName("p") der Reihe nach alle p-Elemente des Dokuments durch und weist ihren
Eigenschaften align den bergebenen Parameter fr die Ausrichtung zu. Dadurch bewirkt der

Klick auf einen der Buttons die dynamische Ausrichtung aller Textabstze.

param (HTML-Elementobjekt)
HTML-Elemente <param>...</param> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

name

Name des Parameters

type

Mime-Type des Wertes

value

Initialisierungswert fr den Parameter

valueType

Informationen zum Attribut type

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
<param name="msg" value="Die Energie des Verstehens">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</applet>
<script type="text/javascript">
<!-document.write("<table>");
for(var i = 0; i < document.getElementsByTagName("param").length; i++) {
document.write("<tr><td><b>Parameter:<\/b><\/td><td>");
document.write(document.getElementsByTagName("param")[i].name);
document.write("<\/td><td><b>Wert:<\/b><\/td><td>");
document.write(document.getElementsByTagName("param")[i].value);
document.write("<\/td><\/tr>");
}
document.write("<\/table>");
//-->
</script>
</body></html>

Das Beispiel enthlt ein Java-Applet mit verschiedenen Parametern. Unterhalb davon ist ein
Script notiert, das dynamisch eine Tabelle ins Dokument schreibt. Dazu geht es in einer forSchleife der Reihe nach alle param-Elemente durch und greift mit document.getElements-

752

Kapitel 20: JavaScript Objekt-Referenz

ByTagName("param") auf die einzelnen param-Elemente zu. Fr jedes Element werden der
Parametername (name) und der zugehrige Wert (value) in die Tabelle geschrieben.

Beachten Sie: Im MS Internet Explorer bis Version 5.5 lsst sich dieses Beispiel merkwrdigerweise nur nachvollziehen, wenn sich die param-Elemente nicht innerhalb eines gltigen Elternelementes befinden. Das vorliegende Beispiel wird dagegen auch von Opera 5.12 und dem MS
Internet Explorer 5.0 Macintosh Edition interpretiert.

pre (HTML-Elementobjekt)
HTML-Elemente <pre>...</pre> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft
width

Status

Bedeutung
feste Breite fr Inhalt

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Breite() {
document.getElementById("x").width = "15";
}
//-->
</script>
</head><body>
<pre id="x">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</pre>
<a href="javascript:Breite()">Breite auf 15 setzen</a>
</body></html>

Das Beispiel enthlt einen pre-Bereich mit 30 x-Zeichen pro Zeile. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die JavaScript-Funktion Breite() aufgerufen,
die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("x") auf
das pre-Element zu und weist ihm fr die Eigenschaft width den Wert 15 zu.
Beachten Sie: Weder Netscape noch Internet Explorer interpretieren das Attribut width im Zusammenhang mit pre-Elementen.

q (HTML-Elementobjekt)
HTML-Elemente <q>...</q> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigene Eigenschaft.

20.5 HTML-Elementobjekte
Eigenschaft
cite

Status

753

Bedeutung
URI fr die Quelle des Zitats

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Wie sagte Goethe doch?
<q id="Faustzitat" cite="aus Faust"
onMouseOver="alert(document.getElementById(Faustzitat).cite)">Habe, ach,
Philsosophie studiert ...</q></p>
</body></html>

Das Beispiel enthlt ein Zitat, in dessen einleitendem Tag ein Event-Handler onMouseOver
notiert ist. Beim berfahren mit der Maus wird ein Meldungsfenster ausgegeben, das den Wert
des Attributs cite= ausgibt. Dazu wird mit document.getElementById(Faustzitat).cite
auf die entsprechende Elementeigenschaft zugegriffen.
Beachten Sie: Netscape 6. Opera 5.12 und der MS Internet Explorer 5.0 Macintosh Edition
schlieen das Zitat in "..." ein. Opera 5.12 interpretiert zwar den Event-Handler, gibt aber als
Eigenschaft des Attributes cite= den Wert undefined zurck.

s (HTML-Elementobjekt)
HTML-Elemente <s>...</s> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.rot { color:red }
-->
</style>
<script type="text/javascript">
<!-function deutlicher() {
document.getElementById("schweinisch").className = "rot";
}
//-->
</script>
</head><body>
<h1><s id="schweinisch">Es tut so gut ein Schwein zu sein</s></h1>
<a href="javascript:deutlicher()">deutlicher!</a>
</body></html>

Das Beispiel enthlt eine berschrift mit durchgestrichenem Text. Unterhalb davon steht ein
Verweis, bei dessen Anklicken die JavaScript-Funktion deutlicher() aufgerufen wird. Mit
document.getElementById("schweinisch") greift diese Funktion auf das s-Element zu und
weist ihm fr die Universaleigenschaft className den Klassennamen rot zu, fr den im Datei-

754

Kapitel 20: JavaScript Objekt-Referenz

kopf in einem Style-Bereich CSS-Definitionen exisiteren. Der durchgestrichene Text wird dadurch rot.

samp (HTML-Elementobjekt)
HTML-Elemente <samp>...</samp> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Ich sage zum Beispiel immer <samp id="zumbeispiel"
onMouseOver="alert(document.getElementById(zumbeispiel).id)">zum
Beispiel</samp></p>
</body></html>

Das Beispiel enthlt einen mit <samp>...</samp> ausgezeichneten Text. Im Einleitungs-Tag ist
der Event-Handler onMouseOver notiert. Beim berfahren des Textes mit der Maus wird in
einem Meldungsfenster der Id-Wert des Elements ausgegeben. Dazu wird mit document.
getElementById(zumbeispiel).id auf die entsprechende Eigenschaft zugegriffen.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

script (HTML-Elementobjekt)
HTML-Elemente <script>...</script> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

charset

Zeichensatz der bei src angegebenen Script-Datei

defer

Script kann keine Inhalte im Dokumentfenster ndern oder erzeugen

event

Ereignis fr Script-Ausfhrung

htmlFor

Element, fr das das Script ausgefhrt wird

src

URI einer Script-Datei

text

Inhalt des Scripts

type

Mime-Type der Script-Sprache

Beispiel: JavaScript-Datei hallo_deutsch.js:

function hallo()
{
alert("Hallo Welt");
}

20.5 HTML-Elementobjekte

755

Beispiel: JavaScript-Datei hallo_englisch.js:

function hallo()
{
alert("hello world");
}

Beispiel: HTML-Datei
<html><head><title>Test</title>
<script src="hallo_deutsch.js" type="text/javascript">
</script>
<script type="text/javascript">
<!-function englisch() {
if (document.getElementsByTagName("script")[0].src!="hallo_englisch.js")
document.getElementsByTagName("script")[0].src="hallo_englisch.js";
hallo();
}
function deutsch() {
if (document.getElementsByTagName("script")[0].src!="hallo_deutsch.js")
document.getElementsByTagName("script")[0].src="hallo_deutsch.js";
hallo();
}
//-->
</script>
</head><body>
<a href="javascript:englisch()">englisches Hallo-Welt</a><br>
<a href="javascript:deutsch()">deutsches Hallo-Welt</a>
</body></html>

Fr dieses Beispiel wurden zwei externe JavaScript-Dateien definiert. Beide Dateien enthalten die
gleiche Funktion Hallo(). Sie unterscheiden sich jedoch darin, dass in der Datei hallo_
deutsch.js, die Ausgabe in Deutsch erfolgt und in der Datei hallo_englisch.js in Englisch.
Im Beispiel gibt es zwei Script-Bereiche. Im ersten Bereich wird unter Verwendung der srcEigenschaft das externes JavaScript hallo_deutsch.js geladen. Im zweiten Bereich sind die Funktionen englisch() und deutsch() notiert. Der Verweis englisches Hallo-Welt ruft die Funktion
englisch() auf. Innerhalb der Funktion wird geprft, ob dem ersten script-Element die Datei
hallo_englisch.js als src-Eigenschaft zugewiesen ist. Ist dies nicht der Fall, so erhlt dieses
Element die Datei hallo_englisch.js zugewiesen und die Datei wird geladen. Die Funktion
hallo() gibt jetzt die englische Meldung aus. Wird umgekehrt auf den Verweis deutsches HalloWelt geklickt, so wird geprft, ob die Datei hallo_deutsch.js zugewiesen wurde und die Eigenschaft gegebenenfalls gendert. Die Ausgabe erfolgt dann in deutscher Sprache.
Beachten Sie: In Opera 5.12 und Netscape 6.1 ist dieses Beispiel nicht nachzuvollziehen, da beide
Browser die neu zugewiesene Datei nicht interpretieren. Die Verwendung von Universaleigenschaften ist im HTML-4.0-Standard fr das script-Element nicht vorgesehen. Deshalb sollten
Sie bei diesem Element die Methode document.getElementsById() vermeiden. Der MS Internet Explorer 5.0 Macintosh Edition reagiert mit einer Fehlermeldung bei der Verwendung dieses
Beispieles, da er auf dieses Element offenbar nicht mit document.getelementsByTagName()

756

Kapitel 20: JavaScript Objekt-Referenz

zugreifen kann. Opera 5.12 interpretiert das Attribut type nicht. Mchten Sie zum Beispiel
einen Script-Bereich in VB-Script einfgen, so ist hier das missbilligte language-Attribut zur
Sprachangabe zwingend erforderlich, da der Browser sonst Fehlermeldungen erzeugt, weil er als
Default-Sprache JavaScript verwendet.

select (HTML-Elementobjekt)
HTML-Elemente <select>...</select> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.
Eigenschaft

Status

Bedeutung

disabled

Auswahlliste kann nicht benutzt werden

form

zugehriges Formularelement

length

Anzahl der option-Elemente

multiple

Mehrfachauswahl setzen oder nicht setzen

name

Name der Auswahlliste

options

Array der option-Elemente der Auswahlliste

selectedIndex

Index des ausgewhlten Eintrags

size

Anzahl der sichtbaren Eintrge

tabIndex

Tabulatorenreihenfolge

type

Typ der Auswahlliste: entweder select-multiple oder select-one

value

Aktueller Auswahlwert

Methode

Bedeutung

add()

Eintrag zur Auswahlliste hinzufgen

Fokus aus der Auswahlliste entfernen
Fokus auf die Auswahlliste setzen
Eintrag aus der Auswahlliste lschen

blur()
focus()
remove()

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Wert = 1;
function hinzu() {
var position=null;

20.5 HTML-Elementobjekte

757

if (document.all)
position=position=document.getElementsByName("Auswahl")[0].length;
var Eintrag = document.createElement("option");
Eintrag.text = document.getElementsByName("Eingabe")[0].value;
Eintrag.value = Wert;
Wert += 1;
document.getElementsByName("Auswahl")[0].add(Eintrag,position);
}
//-->
</script>
</head><body>
<form name="Formular" action="">
<select name="Auswahl" size="10">
<option value="0">Liste</option>
</select><br>
Eintrag: <input name="Eingabe" size="30">
<input type="button" value="hinzufgen" onClick="hinzu()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste, einem Eingabefeld und einem KlickButton. Klickt der Anwender auf den Button, wird der im Eingabefeld eingegebene Wert dynamisch der Auswahlliste als Eintrag hinzugefgt. Dazu wird die JavaScript-Funktion hinzu()
aufgerufen, die im Dateikopf notiert ist. Bevor der Eintrag mit der Objektmethode add() hinzugefgt werden kann, muss zunchst mit document.createElement() ein neues option-Element erzeugt werden. Das Element wird in der Variablen Eintrag gespeichert. Seinen sichtbaren Text bekommt es mit Eintrag.text zugewiesen. Dabei wird mit document.getElementsByName("Eingabe")[0].value auf den Wert des Eingabefeldes zugegriffen. Auch einen
Absendewert value erhlt der Eintrag. Dazu wird die Variable Wert zugewiesen, die anschlieend um 1 erhht wird, sodass jeder neue Eintrag eine hhere Nummer als Absendewert erhlt.
Schlielich wird mit document.getElementsByName("Auswahl")[0] auf die Auswahlliste
zugegriffen und der neue Eintrag am Ende der Liste hinzugefgt. Die Methode add() erwartet
als ersten Parameter den Eintrag fr das neue Listenelement und als zweiten Parameter die
Position, vor der das Element eingefgt werden soll.
Beachten Sie: Innerhalb dieses Beispiels ist es erforderlich, zwischen den Browsern zu unterscheiden. Netscape 6.1 interpretiert die Methode add() nur dann, wenn ihr als Position null
bergeben wird. Der Parameter null bedeutet brigens: Eintrag am Ende einfgen.
Im MS Internet Explorer dagegen fhrt dieser Aufruf der Methode zu einem Typenkonflikt.
Diesen knnen Sie vermeiden, indem Sie, wie im Beispiel, als Parameter die Lnge der zu ergnzenden Liste bergeben oder alternativ den Parameter position weglassen.
Netscape 6.1 interpretiert die Angabe zur Position noch nicht wie vorgesehen. Um fr beide
Browser zu programmieren, mssen Sie also eine Browser-Weiche einfgen, z.B. mit Hilfe des
navigator-Objekts.

small (HTML-Elementobjekt)
HTML-Elemente <small>...</small> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:

758

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
<style type="text/css">
<!-.mini { font-family:Small Fonts; font-size:5pt }
-->
</style>
<script type="text/javascript">
<!-function ganzklein() {
document.getElementsByTagName("small")[0].className = "mini";
}
//-->
</script>
</head><body>
<small onClick="ganzklein()">winzigweich!</small>
</body></html>

Das Beispiel enthlt einen Text, der mit <small>...</small> ausgezeichnet ist. Beim Anklicken des Textes (onClick) wird die JavaScript-Funktion ganzklein() aufgerufen, die im
Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("small")
[0] auf das erste small-Element im Dokument zu und weist ihm die className-Eigenschaft
mit dem Wert mini zu. Dahinter verbirgt sich die CSS-Klasse, die im Dateikopf im Style-Bereich
definiert ist.

span (HTML-Elementobjekt)
HTML-Elemente <span>...</span> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-#diesesFormat { font-family:Arial; font-size:18pt }
#anderesFormat { font-family:Algerian; font-size:36pt }
-->
</style>
<script type="text/javascript">
<!-function aendern() {
document.getElementById("diesesFormat").id = "anderesFormat";
}
//-->
</script>
</head><body>
<span id="diesesFormat" onClick="aendern()">Das individuelle Format</span>
</body></html>

Das Beispiel enthlt einen Text, der mit <span>...</span> ausgezeichnet ist. Das span-Element enthlt auerdem eine CSS-Bindung, da es die id mit dem Wert diesesFormat hat, fr
das im Dateikopf ein individuelles Format definiert ist. Beim Anklicken des span-Textes

20.5 HTML-Elementobjekte

759

(onClick) wird die JavaScript-Funktion aendern() aufgerufen, die im Dateikopf notiert ist.
Diese Funktion greift mit document.getElementById("diesesFormat") auf das span-Element zu und weist ihm fr die id-Eigenschaft den neuen Wert anderesFormat zu. Auch fr
diesen Id-Wert ist im Style-Bereich eine CSS-Definition notiert. Das Beispiel bewirkt also ein
einmaliges dynamisches Austauschen der CSS-Eigenschaften beim span-Element.

strike (HTML-Elementobjekt)
HTML-Elemente <strike>...</strike> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<strike id="strike" onMouseOver="alert(document.getElementById(strike).title)"
title="NICHT, weil es deprecated ist">Benutzen Sie dieses Element!</strike>
</body></html>

Das Beispiel enthlt einen Text, der mit <strike>...</strike> ausgezeichnet ist. Im einleitenden Tag ist der Event-Handler onMouseOver notiert. Beim berfahren des durchgestrichenen
Textes mit der Maus wird eine Meldung ausgegeben, und zwar der Text, der beim Element im
title-Attribut notiert ist. Dazu wird mit document.getElementById(strike).title auf
das Element zugegriffen. Der id-Name strike lautet nur zufllig genauso wie der Elementname, um zu demonstrieren, dass dies durchaus erlaubt ist.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

strong (HTML-Elementobjekt)
HTML-Elemente <strong>...</strong> haben als DOM-Objekte fr den ScriptsprachenZugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-.normal { font-size:20pt; color:blue; }
.extra { font-size:20pt; color:red; background-color:yellow; }
-->
</style>
<script type="text/javascript">
<!-function wechseln() {
if(document.getElementById("stark").className == "normal")
document.getElementById("stark").className = "extra";
else
document.getElementById("stark").className = "normal";
}
//-->
</script>
</head><body>
<p><strong id="stark" class="normal" onMouseOver="wechseln()"
onMouseOut="wechseln()">ganz stark!</strong></p>
</body></html>

760

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel enthlt Text, der mit <strong>...</strong> ausgezeichnet ist. Das einleitende
Tag enthlt eine CSS-Klassenangabe, eine eindeutige Id-Angabe und die Event-Handler onMouseOver und onMouseOut, die jeweils die JavaScript-Funktion wechseln() aufgerufen, die im
Dateikopf notiert ist. Diese Funktion fragt ab, ob der zugewiesene Klassenname normal lautet.
Wenn ja, wird er auf extra gendert, wenn nein, wird er auf normal gendert. Dadurch ergibt
sich der Effekt, dass sich beim berfahren des Textes mit der Maus die CSS-Eigenschaften
dynamisch ndern.

style (HTML-Elementobjekt)
HTML-Elemente <style>...</style> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

disabled

Stylesheet verwenden oder nicht verwenden

media

Ausgabemedium fr das Stylesheet

type

Mime-Type der Stylesheet-Sprache

Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-h1 { font-size:36pt; color:red; }
-->
</style>
<script type="text/javascript">
<!-function ohneCSS() {
document.getElementsByTagName("style")[0].disabled = true;
}
//-->
</script>
</head><body>
<h1>Mit CSS!</h1>
<a href="javascript:ohneCSS()"><b>ohne CSS!</b></a>
</body></html>

Das Beispiel enthlt eine berschrift und einen Verweis. Beim Anklicken des Verweises wird die
JavaScript-Funktion ohneCSS() aufgerufen, die im Dateikopf notiert ist. Die Funktion greift mit
document.getElementsByTagName("style")[0] auf das erste style-Element zu und setzt
dessen Eigenschaft disabled auf den booleschen Wert true (wahr). Dadurch werden alle in
dem Style-Bereich definierten Formate fr das Dokument ungltig. Die berschrift verliert
dynamisch ihre CSS-Eigenschaften.

20.5 HTML-Elementobjekte

761

sub (HTML-Elementobjekt)
HTML-Elemente _... haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.getElementsByTagName(sub)[0].title)">Tief</a>
und <sub title="ganz tief">tiefer</sub>
</body></html>

Das Beispiel enthlt ein Wort, das mit _... ausgezeichnet ist, und einen Verweis.
Beim Anklicken des Verweises wird in einem Meldungsfenster der Wert des title-Attributs aus
dem sub-Element ausgegeben. Dazu wird mit document.getElementsByTagName(sub)[0]
auf das erste sub-Element der Datei zugegriffen.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

sup (HTML-Elementobjekt)
HTML-Elemente ^... haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Vertauschen() {
var swap = document.getElementById("Basis").firstChild.nodeValue;
document.getElementById("Basis").firstChild.nodeValue =
document.getElementById("Exponent").firstChild.nodeValue;
document.getElementById("Exponent").firstChild.nodeValue = swap;
}
//-->
</script>
</head><body><span style="font-size:200%">
<a id="Basis" href="javascript:Vertauschen()">x</a><sup id="Exponent">y</sup>
</span></body></html>

Das Beispiel stellt einen Text x hoch y dar. Das x ist dabei in einen Verweis eingeschlossen,
bei dessen Anklicken die JavaScript-Funktion Vertauschen() aufgerufen wird, die im Dateikopf
notiert ist. Diese Funktion greift sowohl auf das Verweis-Element (document.getElementById
("Basis")) als auch auf das sup-Element (document.getElementById("Exponent")) zu und
vertauscht deren Inhalte. Der Zugriff auf die Inhalte erfolgt mit node.nodeValue (firstChild
ist ein bestimmter Knotentyp).

table (HTML-Elementobjekt)
HTML-Elemente <table>...</table> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

762

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Status

Bedeutung

align

Ausrichtung der Tabelle

border

Rahmendicke der Tabelle

bgColor

Hintergrundfarbe der Tabelle

caption

Tabellenberschrift-Element vorhanden oder nicht vorhanden

cellPadding

Abstand zwischen Zellenrand und Zellinhalt

cellSpacing

Abstand zwischen den Zellen untereinander

frame

Angabe, welche Rahmen der Tabelle sichtbar sein sollen

rows

Array aller Tabellenzeilen

rules

tBodies

Angabe, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein

sollen
Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe
erlutert
Array aller tbody-Elemente der Tabelle

tFoot

Tabellenfu-Element oder null

tHead

Tabellenkopf-Element oder null

width

Breite der Tabelle

summary

Methode

Bedeutung

createCaption()

Tabellenberschrift-Element caption erzeugen

Tabellenfu-Element tfoot erzeugen
Tabellenkopf-Element thead erzeugen
Tabellenberschrift-Element caption lschen
Tabellenfu-Element tfoot lschen
Tabellenkopf-Element thead lschen
Tabellenzeile lschen
Tabellenzeile hinzufgen

createTFoot()
createTHead()
deleteCaption()
deleteTFoot()
deleteTHead()
deleteRow()
insertRow()

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zeile = 0;
function ZeileEinfuegen() {
if (Zeile==0) document.getElementById("Tabelle").deleteRow(0);
var TR = document.getElementById("Tabelle").insertRow(Zeile);

20.5 HTML-Elementobjekte

763

Zeile += 1;
var TD1 = document.createElement("td");
var TD1text = document.createTextNode(document.Formular.linkerText.value);
TD1.appendChild(TD1text);
var TD2 = document.createElement("td");
var TD2text = document.createTextNode(document.Formular.rechterText.value);
TD2.appendChild(TD2text);
TR.appendChild(TD1);
TR.appendChild(TD2);
document.Formular.linkerText.value = "";
document.Formular.rechterText.value = "";
}
function Rahmen() {
if(document.getElementsByName("Option")[0].checked == true)
document.getElementById("Tabelle").border = "2";
else
document.getElementById("Tabelle").border = "0";
}
function Farbe() {
if(document.getElementsByName("Option")[1].checked == true)
document.getElementById("Tabelle").bgColor = "#CCCCFF";
else
document.getElementById("Tabelle").bgColor = "";
}
//-->
</script>
</head><body>
<form name="Formular" action="">
<input type="text" name="linkerText">
<input type="text" name="rechterText">
<input type="button" value=" OK " onClick="ZeileEinfuegen()"><br>
<input type="checkbox" name="Option" onClick="Rahmen()"> Rahmen
<input type="checkbox" name="Option" onClick="Farbe()"> Hintergrund
</form>
<table id="Tabelle">
<tr><td>Eine Tabelle</td></tr>
</table>
</body></html>

Das Beispiel enthlt ein Formular und unterhalb davon eine einzeilige Tabelle. Das Formular besteht aus zwei Eingabefeldern, einem Klick-Button und zwei Checkboxen. Die beiden Eingabefelder
dienen dazu, um die Tabelle mit neuem Inhalt zu fllen. Gibt der Anwender in beiden Feldern
etwas ein und klickt dann auf den Klick-Button, wird die JavaScript-Funktion ZeileEinfuegen() aufgerufen, die im Dateikopf notiert ist. Beim ersten Aufruf der Funktion die Variable Zeile ist hier noch 0 wird mit document.getElementById("Tabelle").deleteRow(0)
die vorhandene Tabellenzeile gelscht.
Mit document.getElementById("Tabelle").insertRow(Zeile) greift die Funktion auf die
Tabelle zu und fgt ihr mit insertRow() eine neue Zeile ein. Der bergebene Wert Zeile
bestimmt, an welcher Stelle der Tabelle die neue Zeile eingefgt werden soll. Da die Variable

764

Kapitel 20: JavaScript Objekt-Referenz

Zeile anschlieend um 1 erhht wird, wird beim nchsten Aufruf der Funktion die Zeile unter-

halb der letzten Zeile hinzugefgt.

Der Rckgabewert von insertRow() ist das neu erzeugte tr-Element fr die Tabellenzeile. Das
Element wird in der Variablen TR gespeichert. Um die Tabellenzeile mit Inhalt zu fllen, werden
zwei Tabellenzellen erzeugt. Die Elemente werden mit document.createElement() erzeugt.
Fr die Inhalte der Tabellenzellen werden mit document.createTextNode() zwei Textknoten
erzeugt, die als Wert die Inhalte der beiden Eingabefelder des Formulars zugewiesen bekommen.
Mit der Methode node.appendChild() werden die Textknoten als Kindknoten zu den Tabellenzellen hinzugefgt, und anschlieend wird mit der gleichen Methode die Tabellenzelle als
Kindknoten zu der Tabellenzeile hinzugefgt.
Die beiden Checkboxen rufen beim Anklicken (onClick) die Funktionen Rahmen() bzw.
Farbe() auf. Dort wird jeweils berprft, ob die Checkboxen angekreuzt sind (checked) oder
nicht. Dann wird mit document.getElementById("Tabelle") auf die Tabelle zugegriffen und
abhngig davon, ob die Checkbox angekreuzt ist oder nicht, werden deren Eigenschaften fr
border bzw. bgColor dynamisch gendert.

tbody (HTML-Elementobjekt)
HTML-Elemente <tbody>...</tbody> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung der Zellen des Tabellenbereichs

ch

Ausrichtungszeichen fr Zellen des Tabellenbereichs

chOff

Position des Ausrichtungszeichens in Zellen des Tabellenbereichs

rows

Array aller Tabellenzeilen des Tabellenbereichs

vAlign

vertikale Ausrichtung der Zellen im Tabellenbereich

Methode

Bedeutung

deleteRow()

Tabellenzeile aus Tabellenbereich lschen

Tabellenzeile im Tabellenbereich hinzufgen

insertRow()

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function rechts() {
document.getElementById("Tabellendaten").align = "right";
}

20.5 HTML-Elementobjekte

765

//-->
</script>
</head><body>
<table border="1">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
<tbody id="Tabellendaten">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</tbody>
</table>
<a href="javascript:rechts()">rechts ausrichten</a>
</body></html>

Das Beispiel enthlt eine Tabelle mit ausgewiesenem tbody-Bereich. Unterhalb der Tabelle ist
ein Verweis notiert, bei dessen Anklicken die JavaScript-Funktion rechts() aufgerufen wird, die
im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("Tabellendaten") auf das tbody-Element zu und ndert dessen Eigenschaft align auf den Wert right.
Dadurch werden alle Tabellenzellen im tbody-Bereich rechtsbndig ausgerichtet.
Beachten Sie: Mit Netscape 6.1 und dem MS Internet Explorer 5.0 Macintosh Edition war dieses
Beispiel nicht nachvollziehbar.

td (HTML-Elementobjekt)
HTML-Elemente <td>...</td> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Hinweistext fr die Zuordnung der Tabellenzelle, die z.B. bei der

Sprachausgabe dem Zelleninhalt vorangesprochen wird
Ausrichtung

axis

Liste von Kategorien, zu der die Zelle gehrt

bgColor

Hintergrundfarbe

cellIndex

Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)

ch

Ausrichtungszeichen

chOff

Position des Ausrichtungszeichens

colSpan

Anzahl Spalten, ber die sich die Zelle erstreckt

headers

Liste von ID-Namen von Zeilen- oder Spaltenberschriften, zu denen

die Zelle gehrt
Zellenhhe (Zeilenhhe)

abbr

height

766

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Status

Bedeutung

noWrap

Automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch

rowSpan

Anzahl Tabellenzeilen, ber die sich die Zelle erstreckt

scope
vAlign

restliche Zeilen oder Spalten, fr die aktuelle Zelle berschriftencharakter

hat
vertikale Ausrichtung

width

Zellenbreite (Spaltenbreite)

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table cellspacing="2" border="2">
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!-var Farben = new Array("#CCFFCC","#CCCCFF","FFCCCC","FFCCFF","FFFFCC");
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
var index = parseInt((Math.random() * 100) % (Farben.length - 1));
document.getElementsByTagName("td")[i].bgColor = Farben[index];
}
//-->
</script>
</body></html>

Das Beispiel enthlt eine Tabelle. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird
in einer for-Schleife der Reihe nach mit document.getElementsByTagName("td") auf alle
td-Elemente der Datei zugegriffen. Durch Aufruf von Math.random() werden Zufallszahlen
ermittelt, die mit Hilfe von Multiplikation mit 100, Modulodivision und Anwendung der
Funktion parseInt() so getrimmt werden, dass es ganzzahlige Zufallszahlen werden, die sich als
Index fr den zuvor definierten Array Farben eignen. Mit document.getElementsByTagName
("td")[i].bgColor wird schlielich die Hintergrundfarbe der jeweils aktuellen Tabellenzelle
auf einen zufllig ermittelten Farbwert gesetzt. Die Tabelle wird auf diese Weise schn bunt, und
jede Zelle erhlt eine per Zufall ausgesuchte Hintergrundfarbe.

textarea (HTML-Elementobjekt)
HTML-Elemente <textarea>...</textarea> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

20.5 HTML-Elementobjekte
Eigenschaft

Status

Bedeutung

accessKey

Hotkey fr das Element

cols

Zeichen pro Zeile (Anzeigebreite)

defaultValue

vorbelegter Wert

disabled

Element kann nicht gendert werden

form

zugehriges Formular

name

Name des Elements

readOnly

Wert des Elements kann nicht verndert werden

rows

Zeilen (Anzeigehhe)

tabIndex

Tabulatorreihenfolge

type

Typ des Formularelements

value

Wert des Elements

Methode

Bedeutung

blur()
focus()
select()

Fokus vom Element entfernen

Fokus auf Element setzen
Inhalt selektieren

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function setText() {
document.getElementById("Text").firstChild.nodeValue =
document.getElementById("Eingabe").value;
}
//-->
</script>
</head><body>
<form name="Formular" action="">
Text:<br>
<textarea id="Eingabe" rows="10" cols="50"
onKeyPress="setText()"></textarea>
</form>
<div id="Text" style="font-size:16pt; background-color:#FFFFCC; padding:10px;
border:solid 1px red">&nbsp;</div>
</body></html>

767

768

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel enthlt ein Formular mit einem textarea-Eingabebereich. Unterhalb des Formulars ist ein schick formatierter div-Bereich notiert, der als Inhalt aber zunchst nur ein erzwungenes Leerzeichen &nbsp; enthlt. Im einleitenden <textarea>-Tag ist der Event-Handler onKeyPress notiert. Wenn der Anwender in dem Feld etwas eingibt, wird bei jedem Loslassen
eines Tastendrucks die JavaScript-Funktion setText() aufgerufen, die im Dateikopf notiert ist.
Diese Funktion greift mit document.getElementById("Text").firstChild.nodeValue auf
den Inhalt des div-Elements zu und weist diesem den Wert des Eingabefeldes (document.
getElementById("Eingabe").value) zu. Somit wird in den div-Bereich dynamisch der Text
geschrieben, den der Anwender im Textfeld eingibt.

tfoot (HTML-Elementobjekt)
HTML-Elemente <tfoot>...</tfoot> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung der Zellen des Tabellenbereichs

ch

Ausrichtungszeichen fr Zellen des Tabellenbereichs

chOff

Position des Ausrichtungszeichens in Zellen des Tabellenbereichs

rows

Array aller Tabellenzeilen des Tabellenbereichs

vAlign

vertikale Ausrichtung der Zellen im Tabellenbereich

Methode

Bedeutung

deleteRow()

Tabellenzeile aus Tabellenbereich lschen

Tabellenzeile im Tabellenbereich hinzufgen

insertRow()

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table border="1">
<tfoot id="Fuss" valign="top">
<tr><td colspan="2" height="40">
Angaben ohne Gewhr!
</td></tr></tfoot>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!-var Ausrichtung = document.getElementById("Fuss").vAlign;
document.write("Angaben ohne Gewhr haben die Ausrichtung: " + Ausrichtung);

20.5 HTML-Elementobjekte

769

//-->
</script>
</body></html>

Das Beispiel enthlt eine Tabelle mit einem ausgewiesenen tfoot-Bereich. Unterhalb der Tabelle
ist ein JavaScript-Bereich notiert. Darin wird mit document.getElementById("Fuss").vAlign
auf das tfoot-Element zugegriffen und der Wert von dessen Eigenschaft vAlign ausgelesen.
Anschlieend wird das Ergebnis ins Dokument geschrieben.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

th (HTML-Elementobjekt)
HTML-Elemente <th>...</th> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Hinweistext fr die Zuordnung der Tabellenzelle, die z.B. bei der

Sprachausgabe dem Zelleninhalt vorangesprochen wird
Ausrichtung

axis

Liste von Kategorien, zu der die Zelle gehrt

bgColor

Hintergrundfarbe

cellIndex

Indexnummer der Zelle innerhalb der Tabellenzeile (Start bei 0)

ch

Ausrichtungszeichen

chOff

Position des Ausrichtungszeichens

colSpan

Anzahl Spalten, ber die sich die Zelle erstreckt

headers
height

Liste von ID-Namen von Zeilen- oder Spaltenberschriften, zu denen

die Zelle gehrt
Zellenhhe (Zeilenhhe)

noWrap

automatischer Zeilenumbruch oder kein automatischer Zeilenumbruch

rowSpan

Anzahl Tabellenzeilen, ber die sich die Zelle erstreckt

scope
vAlign

restliche Zeilen oder Spalten, fr die aktuelle Zelle berschriftencharakter hat

vertikale Ausrichtung

width

Zellenbreite (Spaltenbreite)

abbr

770

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table border="1">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!-for(var i = 0; i < document.getElementsByTagName("th").length; i++)
document.getElementsByTagName("th")[i].align = "left";
//-->
</script>
</body></html>

Das Beispiel enthlt eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort werden in
einer for-Schleife der Reihe nach alle th-Elemente des Dokuments ermittelt. Ihnen wird fr die
Eigenschaft align der Wert left zugewiesen.
Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

thead (HTML-Elementobjekt)
HTML-Elemente <thead>...</thead> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

align

Ausrichtung der Zellen des Tabellenbereichs

ch

Ausrichtungszeichen fr Zellen des Tabellenbereichs

chOff

Position des Ausrichtungszeichens in Zellen des Tabellenbereichs

rows

Array aller Tabellenzeilen des Tabellenbereichs

vAlign

vertikale Ausrichtung der Zellen im Tabellenbereich

Methode

Bedeutung

deleteRow()

Tabellenzeile aus Tabellenbereich lschen

Tabellenzeile im Tabellenbereich hinzufgen

insertRow()

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table border="1">

20.5 HTML-Elementobjekte

771

<thead id="Kopf">
<tr><th width="200">Name</th><th width="200">Alter</th></tr>
</thead>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!-var Zeilen = document.getElementById("Kopf").rows.length;
document.write("Tabellenkopf hat " + Zeilen + " Zeilen");
//-->
</script>
</body></html>

Das Beispiel enthlt eine Tabelle und unterhalb davon einen JavaScript-Bereich. Dort wird mit
document.getElementById("Kopf").rows.length die Anzahl der Tabellenzeilen im Bereich
des thead-Elements ermittelt und anschlieend ins Dokument geschrieben.

title (HTML-Elementobjekt)
HTML-Elemente <title>...</title> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgende eigenen Eigenschaft.
Eigenschaft
text

Status

Bedeutung
Inhalt des Titels

Ein Beispiel:
<html><head><title>Ein ganz besonderer Tag</title>
</head><body>
<script type="text/javascript">
<!-document.write("<h1>" + document.getElementsByTagName(title)[0].text +
"<\/h1>");
//-->
</script>
</body></html>

Das Beispiel enthlt einen JavaScript-Bereich, in dem dynamisch eine berschrift erster Ordnung ins Dokument geschrieben wird. Als berschriftentext wird der Inhalt des title-Elements
geschrieben. Dazu wird mit document.getElementsByTagName(title)[0] auf das titleElement zugegriffen.

tr (HTML-Elementobjekt)
HTML-Elemente <tr>...</tr> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften und Methoden.

772

Kapitel 20: JavaScript Objekt-Referenz

Eigenschaft

Status

Bedeutung

align

Ausrichtung der Zellen der Tabellenzeile

bgColor

Hintergrundfarbe der Zellen der Tabellenzeile

cells

Array der Tabellenzellen dieser Tabellenzeile

ch

Ausrichtungszeichen fr Zellen der Tabellenzeile

chOff

Position des Ausrichtungszeichens in Zellen der Tabellenzeile

rowIndex

Indexnummer der Tabellenzeile (startend bei 0) relativ zur Tabelle

sectionRowIndex

Indexnummer der Tabellenzeile (startend bei 0) relativ zum Tabellenbereich (thead, tbody oder tfoot)
vertikale Ausrichtung der Zellen im Tabellenbereich

vAlign

Methode

Bedeutung

deleteCell()

Tabellenzelle aus Tabellenzeile lschen

Tabellenzelle in Tabellenzeile hinzufgen

insertCell()

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zelle = 0;
function neueZelle() {
if (Zelle==0) document.getElementById("Zeile").deleteCell(0);
var Text = document.createTextNode(document.Formular.Eingabe.value);
var TD = document.getElementById("Zeile").insertCell(Zelle);
Zelle += 1;
TD.appendChild(Text);
document.Formular.Eingabe.value = "";
}
//-->
</script>
</head><body>
<table border="1">
<tr id="Zeile"><td>Zelle</td></tr>
</table>
<form name="Formular" action="">
<input type="text" name="Eingabe">
<input type="button" value=" OK " onClick="neueZelle()">
</form>
</body></html>

20.5 HTML-Elementobjekte

773

Das Beispiel enthlt eine Tabelle mit einer einspaltigen Tabellenzeile und unterhalb der Tabelle
ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird
die JavaScript-Funktion neueZelle() aufgerufen, die im Dateikopf notiert ist. Beim ersten
Aufruf der Funktion die Variable Zelle ist hier noch 0 wird mit document.getElementById("Zeile").deleteCell(0) die vorhandene Tabellenzelle gelscht. Die Funktion erzeugt
zunchst mit document.createTextNode() einen Textknoten, der als Wert den Inhalt des Formular-Eingabefeldes erhlt. Anschlieend wird mit document.getElementById("Zeile") auf
die Tabellenzeile zugegriffen und mit der Methode insertCell() eine neue Tabellenzelle eingefgt. Der bergebene Parameter bestimmt, an wievielter Stelle die Zelle in der Zeile eingefgt
wird. Im Beispiel wird dazu die Variable Zelle benutzt, die bei jedem Funktionsaufruf um 1
erhht wird. So ist sichergestellt, dass neue Zellen immer ans Ende der Zeile angehngt werden.
Der Rckgabewert von insertCell() ist das neu erzeugte td-Element. Es wird in der Variablen
TD gespeichert. Mit der Methode node.appendChild() wird der zuvor erzeugte Textknoten in
das td-Element als Kindknoten hinzugefgt. Die Tabellenzeile ist damit dynamisch um das neue
Zellenelement erweitert worden.

tt (HTML-Elementobjekt)
HTML-Elemente <tt>...</tt> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<tt title="ein Teletyper!"
onMouseover="alert(document.getElementsByTagName(tt)[0].title)">Was bin ich?</tt>
</body></html>

Das Beispiel enthlt mit <tt>...</tt> ausgezeichneten Text, der den Event-Handler onMouseOver enthlt. Beim berfahren des Textes mit der Maus wird in einem Meldungsfenster der
Wert des title-Attributs des Elements ausgegeben. Dazu wird mit document.getElementsByTagName(tt)[0] auf das Element zugegriffen.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

u (HTML-Elementobjekt)
HTML-Elemente <u>...</u> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften. Ein Beispiel:
<html><head><title>Ein ganz besonderer Tag</title>
<style type="text/css">
<!-.so { text-decoration:overline; }
-->
</style>
<script type="text/javascript">
<!-function anders() {
document.getElementById("uText").className = "so";

774

Kapitel 20: JavaScript Objekt-Referenz

}
//-->
</script>
</head><body>
<u id="uText" onClick="anders()">das ist der Text</u>
</body></html>

Das Beispiel enthlt unterstrichenen Text. Im einleitenden <u>-Tag ist der Event-Handler
onClick notiert. Beim Anklicken des Textes dieses Elements wird die JavaScript-Funktion
anders() aufgerufen. Diese greift mit document.getElementById("uText") auf das u-Element zu und weist ihm die im Dateikopf in einem Style-Bereich definierte Klasse so zu. Der Text
wird dadurch berstrichen statt unterstrichen dargestellt.
Beachten Sie: Im MS Internet Explorer 5.0 wird als Ergebnis des Funktionsaufrufes der Text
sowohl unterstrichen als auch berstrichen dargestellt. Netscape 6.1 und der MS Internet Explorer 5.5 verhalten sich dagegen wie im Beispiel beschrieben.

ul (HTML-Elementobjekt)
HTML-Elemente <ul>...</ul> haben als DOM-Objekte fr den Scriptsprachen-Zugriff Universaleigenschaften sowie die folgenden eigenen Eigenschaften.
Eigenschaft

Status

Bedeutung

compact

Darstellung in enger Schrift

type

Art des Aufzhlungszeichens

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Bullet(Symbol) {
document.getElementById("Liste").type = Symbol;
}
//-->
</script>
</head><body>
<ul id="Liste">
<li>ein Punkt</li>
<li>und noch ein Punkt</li>
</ul>
<a href="javascript:Bullet(disc)">Disc-Symbol</a>
<a href="javascript:Bullet(square)">Square-Symbol</a>
</body></html>

Das Beispiel enthlt eine Aufzhlungsliste. Unterhalb davon sind zwei Verweise notiert. Bei
Anklicken der Verweise wird jeweils die JavaScript-Funktion Bullet() aufgerufen, die im Datei-

20.6 node

775

kopf notiert ist. Diese Funktion greift mit document.getElementById("Liste") auf das ulElement der Liste zu und weist seiner Eigenschaft type den Wert zu, den die Funktion beim
Aufruf von den Verweisen bergeben bekommen hat.

var (HTML-Elementobjekt)
HTML-Elemente <var>...</var> haben als DOM-Objekte fr den Scriptsprachen-Zugriff
Universaleigenschaften. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
Datei: <var id="datei"
title="/usr/docs/web/projekte/dateiname.html">dateiname.html</var><br>
genauer:
<script type="text/javascript">
<!-document.write("<var>" + document.getElementById(datei).title + "<\/var>");
-->
</script>
</body></html>

Das Beispiel enthlt einen mit <var>...</var> ausgezeichneten Text. Unterhalb ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById(datei) auf das var-Element zugegriffen und der Wert von dessen Eigenschaft title dynamisch ins Dokument geschrieben.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

20.6

node

Eigenschaften
attributes
childNodes
data
firstChild
lastChild
nextSibling
nodeName
nodeType
nodeValue
parentNode
previousSibling

(Attribute)
(Kindknoten)
(Zeichendaten)
(erster Kindknoten)
(letzter Kindknoten)
(nchster Knoten eines Typs)
(Name des Knotens)
(Knotentyp)
(Wert/Inhalt des Knotens)
(Elternknoten)
(vorheriger Knoten eines Typs)

Methoden
appendChild()
appendData()
cloneNode()
deleteData()

(Kindknoten hinzufgen)
(Zeichendaten hinzufgen)
(Knoten kopieren)
(Zeichendaten lschen)

776

Kapitel 20: JavaScript Objekt-Referenz

getAttribute()
getAttributeNode()
hasChildNodes()
insertBefore()
insertData()
removeAttribute()
removeAttributeNode()
removeChild()
replaceChild()
replaceData()
setAttribute()
setAttributeNode()

(Wert eines Attributknotens ermitteln)

(Attributknoten ermitteln)
(auf Kindknoten prfen)
(Knoten einfgen)
(Zeichendaten einfgen)
(Wert eines Attributknotens lschen)
(Attributknoten lschen)
(Knoten lschen)
(Kindknoten ersetzen)
(Zeichendaten ersetzen)
(Wert eines Attributknotens setzen)
(Attributknoten erzeugen)

node: Allgemeines zur Verwendung

Das node-Objekt ist das zentrale Objekt des Document Object Model (DOM) (node = Knoten).
Hintergrund ist das Modell, dass ein Auszeichnungssprachen-Dokument, egal ob in HTML oder
einer anderen XML-basierten Auszeichnungssprache geschrieben, aus einem Baum von Knoten
besteht.
Jedes Element, jedes Attribut und alle Zeichendaten stellen eigene Knoten dar. Diese Knoten bilden die Baumstruktur. Das node-Objekt stellt Eigenschaften und Methoden bereit, um auf die
einzelnen Knoten zuzugreifen, egal, wie tief diese Knoten in der Baumstruktur liegen.
Das node-Objekt stellt damit die allgemeinere und fr alle XML-gerechten Sprachen gltige
Variante dessen dar, was die HTML-Elementobjekte speziell fr HTML darstellen. Sie knnen in
JavaScripts, die in HTML-Dateien notiert oder eingebunden sind, sowohl mit den HTML-Elementobjekten als auch mit dem node-Objekt arbeiten. Manches ist ber die HTML-Elementobjekte bequemer zu lsen, fr andere Aufgaben eignet sich wiederum das node-Objekt besser. Das
node-Objekt gilt unter Puristen allerdings als das reinere DOM, eben weil es nicht auf HTML
beschrnkt ist.
Um auf die Eigenschaften und Methoden des node-Objekts zugreifen zu knnen, bentigen Sie
einen Knoten. Um auf vorhandene Knoten im Dokument zuzugreifen, werden die Methoden
des document-Objekts getElementById, getElementsByName und getElementsByTagName
verwendet. Ausgehend davon knnen Sie die Attributknoten, Textknoten und weitere ElementKindknoten eines Elements ansprechen. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<h1 id="Ueberschrift" align="center">Knoten in der <i>Baumstruktur</i></h1>
<script type="text/javascript">
<!-Elementknoten = document.getElementById("Ueberschrift");
WertErsterKindknoten = Elementknoten.firstChild.nodeValue;
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" +
WertErsterKindknoten + "<\/b>");
//-->
</script>
</body></html>

20.6 node

777

Die Beispieldatei enthlt eine berschrift erster Ordnung mit Text, von dem ein Teil wiederum
als kursiv ausgezeichnet ist. In dem JavaScript, das unterhalb davon notiert ist, wird zunchst mit
document.getElementById("Ueberschrift") (ohne weitere Eigenschaft oder Methode
dahinter) auf das h1-Element der berschrift zugegriffen. Der Rckgabewert von getElementById() ist das Knotenobjekt der berschrift. Der Rckgabewert wird im Beispiel in der Variablen Elementknoten gespeichert. Diese Variable speichert also einen gltigen Knoten des Dokuments, und auf die Variable sind daher die Eigenschaften und Methoden des node-Objekts
anwendbar. Im Beispiel wird mit Elementknoten.firstChild.nodeValue der Wert des ersten
Kindknotens der berschrift ermittelt. Dessen Wert wird schlielich mit document.write() ins
Dokument geschrieben.
Die Verwendung von Variablen ist nicht zwingend erforderlich. Das obige Beispiel funktioniert
genauso, wenn Sie notieren:
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" +
document.getElementById("Ueberschrift").firstChild.nodeValue + "<\/b>");

Der geschriebene Wert lautet im Beispiel: Knoten in der ..., der erste Kindknoten der berschrift ist also ihr Zeicheninhalt. Das Wort Baumstruktur gehrt nicht dazu, da es ja durch ein
i-Element ausgezeichnet ist, das selbst wieder einen eigenen, weiteren Kindknoten der berschrift darstellt.
Die beiden Attribute, die im einleitenden berschriften-Tag notiert sind, zhlen brigens nicht
als Kindknoten. Das W3-Konsortium ist der Auffassung, dass Attribute hierarchisch gesehen
keine Unterobjekte von Elementen sind, sondern assoziierte Objekte. Um auf Attributknoten zuzugreifen, bietet das node-Objekt eigene Eigenschaften und Methoden an. Zum Verstndnis ist es jedoch wichtig, dass die Attribute eines Elements nicht als dessen Kindknoten betrachtet
werden, weshalb etwa eine Objekteigenschaft wie firstChild die Attribute bergeht.

attributes
Speichert einen Array aus verfgbaren Attributen eines Elements. Ein Beispiel:
<html><head><title>Test</title>
</head><body bgcolor="#FFFFCC" text="#000099">
<script type="text/javascript">
<!-document.write("Das body-Element hat <b>" +
document.getElementsByTagName(body)[0].attributes.length + "<\/b> Attribute");
//-->
</script>
</body></html>

Das Beispiel greift mit document.getElementsByTagName(body)[0] auf das body-Element

der Datei zu und ermittelt ber die Array-Grundeigenschaft length des attributes-Arrays die
Anzahl der Attribute, die in dem Element definiert sind. Zur Kontrolle wird das Ergebnis mit
document.write ins Dokument geschrieben. Im Beispiel ist 2 der Wert von attributes.length, da im einleitenden <body>-Tag zwei Attribute notiert sind.
ber den attributes-Array knnen Sie auch auf Attribute zugreifen. So liefert beispielsweise
document.getElementsByTagName(body)[0].attributes[0].nodeValue den Wert #FFFFCC,

778

Kapitel 20: JavaScript Objekt-Referenz

da attributes[0] das erste Attribut bezeichnet, und nodeValue den zugehrigen Wert speichert.
Beachten Sie: Der MS Internet Explorer ermittelt zwar einen Wert, jedoch nicht den richtigen.
Im Beispiel wurde mit der Produktversion 5.5 statt 2 der Wert 94 ermittelt vermutlich die Anzahl insgesamt verfgbarer Attribute fr das body-Element, inklusive Event-Handler usw. Dies
ist jedoch unbrauchbar.

childNodes
Speichert einen Array aus verfgbaren Kindknoten eines Knotens. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="derText">Text mit <b>fettem Text</b> und <u>unterstrichenem Text</u></p>
<script type="text/javascript">
<!-var Anzahl = document.getElementById("derText").childNodes.length;
var Erster = document.getElementById("derText").childNodes[0].nodeValue;
document.write("Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
document.write("Wert des ersten Kindknotens: <b>" + Erster +"<\/b><br>");
//-->
</script>
</body></html>

Das Beispiel enthlt einen Textabsatz mit Zeicheninhalt und weiteren Elementen zur Formatierung. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("derText") auf das p-Element zugegriffen. ber die Array-Grundeigenschaft
length des childNodes-Arrays wird die Anzahl der Kindelemente ermittelt, die das p-Element
hat. Der Rckgabewert wird in der Variablen Anzahl gespeichert. ber childNodes[0] wird
auf das erste Kindelement zugegriffen. Dessen Inhalt wird mit nodeValue ermittelt. Zur
Kontrolle schreibt das Script die Ergebnisse mit document.write() ins Dokument.
Die Anzahl der Kindelemente des p-Elements betrgt brigens 4:

Das erste Kindelement ist der Zeicheninhalt Text mit ,

das zweite Kindelement das b-Element,
das dritte Kindelement der Zeicheninhalt und ,
und das vierte Kindelement das u-Element.

Wenn ein Knoten keine Kindknoten enthlt, hat childNodes den Wert null.
Beachten Sie: Der Netscape 6.1 und der MS Internet Explorer 5.0 Macintosh Edition interpretieren im body-Element und in allen untergeordneten Knoten bereits einen Zeilenumbruch oder
ein Leerzeichen im Quelltext zwischen Elementknoten als einen eigenen Kindknoten mit dem
Namen #text. Auch HTML-Kommentare bilden eigene Knoten und werden als Knoten mit
dem Namen #comment behandelt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<ul id="ersteListe"><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">

20.6 node

779

<!-var Anzahl = document.getElementById("ersteListe").childNodes.length;

document.write("Erste Liste: Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
//-->
</script>
<ul id="zweiteListe">
<li>erster Punkt</li> <li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
<!-var Anzahl = document.getElementById("zweiteListe").childNodes.length;
document.write("Zweite Liste: Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
//-->
</script>
</body></html>

Im Beispiel sind zwei Listen definiert. Beide unterscheiden sich nur dahingehend, dass sich zwischen den einzelnen Elementen der ersten Liste keine Leerzeichen oder Zeilenumbrche befinden. In der zweiten Liste dagegen wurden Leerzeichen und Zeilenumbrche verwendet. Der Netscape 6.1 gibt fr die erste Liste als Anzahl der Kindknoten 2 aus und fr die zweite Liste 5. Die
jeweiligen Leerzeichen und Zeilenumbrche werden als eigene Kindknoten betrachtet.
Der MS Internet Explorer unter Windows ignoriert diese und erkennt erst dann einen Kindknoten mit dem Namen #text, wenn dieser ein entsprechendes Textzeichen oder ein erzwungenes Leerzeichen &nbsp; enthlt.

data
Speichert Zeichendaten eines Knotens, sofern es sich um einen Textknoten handelt. Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-function Ausgeben() {
alert(document.getElementById("Dokumentinhalt").firstChild.data);
}
//-->
</script>
</head><body id="Dokumentinhalt" onLoad="Ausgeben()">
Das ist Text, der einfach so im Dokument steht.
</body></html>

Das Beispiel enthlt zwischen <body> und </body> nichts als reinen Text, also Zeichendaten.
Nachdem das Dokument geladen ist (onLoad), wird die JavaScript-Funktion Ausgeben() aufgerufen. Diese greift mit document.getElementById("Dokumentinhalt") auf das body-Element
zu. Mit firstChild wird auf das erste Kindelement zugegriffen, und mit data auf dessen Inhalt.
Das erste (und einzige) Kindelement des body-Elements ist im Beispiel der Text. Dieser wird
denn auch in dem Meldungsfenster angezeigt, das die Funktion Ausgeben() ausgibt.

780

Kapitel 20: JavaScript Objekt-Referenz

Wenn Sie den Wert der Eigenschaft data ndern, wird der Zeicheninhalt des Elements einfach
durch den neuen Inhalt ersetzt. Wenn Sie im obigen Beispiel also notieren wrden:
document.getElementById("Dokumentinhalt").firstChild.data = "neuer Text";

dann wrde anschlieend der bisherige Text zwischen <body> und </body> dynamisch durch
den neuen ersetzt.

firstChild
Speichert das Objekt des ersten Kindknotens eines Knotens. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
<!-var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;
document.write(ErsterPunkt.firstChild.data);
//-->
</script>
</body></html>

Das Beispiel enthlt eine Aufzhlungsliste mit zwei Listenpunkten. Unterhalb davon ist ein
JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf
das erste ul-Element im Dokument zugegriffen. mit firstChild wird dessen erster Kindknoten
angesprochen. Im Beispiel ist dies das erste li-Element. In der Variablen ErsterPunkt ist also
anschlieend das Knotenobjekt des ersten li-Elements gespeichert, aber nicht sein Textinhalt.
Dieser wird jedoch anschlieend mit document.write() ausgegeben. Da der Textinhalt aus
Sicht des li-Elementknotens wieder einen Unterknoten darstellt, kann mit ErsterPunkt.
firstChild.data auf den Text des ersten Listenpunktes zugegriffen werden.
Bercksichtigen Sie beim Nachvollziehen dieses Beispiels die Besonderheit des Netscape 6.1 und
des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten (siehe Abschnitt
childNodes).

lastChild
Speichert das Objekt des letzten Kindknotens eines Knotens. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
<!-var LetzterPunkt = document.getElementsByTagName("ul")[0].lastChild;
document.write(LetzterPunkt.firstChild.data + " und ");
document.write(LetzterPunkt.lastChild.data);
//-->
</script>
</body></html>

20.6 node

781

Das Beispiel enthlt eine Aufzhlungsliste mit zwei Listenpunkten. Unterhalb davon ist ein
JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf
das erste ul-Element im Dokument zugegriffen. mit lastChild wird dessen letzter Kindknoten
angesprochen. Im Beispiel ist dies das zweite und letzte li-Element. In der Variablen LetzterPunkt ist also anschlieend das Knotenobjekt des zweiten li-Elements gespeichert, aber nicht
sein Textinhalt. Dieser wird jedoch anschlieend mit document.write() ausgegeben, und zwar
gleich zweimal. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten
darstellt, und zwar den einzigen, kann er mit LetzterPunkt.firstChild.data, aber ebenso
gut mit LetzterPunkt.lastChild.data angesprochen werden.
Bercksichtigen Sie beim Nachvollziehen dieses Beispiels die Besonderheit des Netscape 6.1 und
des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten (siehe childNodes).

nextSibling
Speichert aus Sicht eines Knotens den unmittelbar nchstfolgenden Knoten im Strukturbaum.
Wenn kein Knoten mehr folgt, wird null gespeichert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
<!-document.write("Das ul-Element hat folgende Knoten unter sich:<br>");
var Knoten = document.getElementsByTagName("ul")[0].firstChild;
while (Knoten!=null) {
document.write("Einen Knoten mit dem Namen <b>" + Knoten.nodeName + "<\/b><br>");
Knoten = Knoten.nextSibling;
}
//-->
</script>
</body></html>

Das Beispiel enthlt eine Aufzhlungsliste mit zwei Listenpunkten. Unterhalb davon ist ein
JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0].
firstChild auf das erste ul-Element im Dokument zugegriffen. In der nachfolgenden whileSchleife wird geprft, ob der Knoten verschieden von null ist, und der nodeName des Knotens
wird ausgegeben. Anschlieend ist die Variable Knoten mit dem nachfolgenden Knoten (Knoten
= Knoten.nextSibling;) belegt. Wenn der Strukturbaum durchlaufen ist, ist in der Eigenschaft
nextSilbing der Wert null gespeichert, was zum Abbruch der Schleife fhrt.
Die Eigenschaft nextSibling arbeitet jeweils den nchsten Knoten eines Strukturbaumes ab. Sie
verfolgt jedoch nicht die Kindknoten, die in einem Knoten enthalten sein knnen.

782

Kapitel 20: JavaScript Objekt-Referenz

nodeName
Speichert den Namen eines Knotens. Ein Beispiel:
<html><head><title>Test</title>
</head><body><script id="dasScript" type="text/javascript">
<!-Knoten = document.getElementById("dasScript");
var Knoten = document.getElementsByTagName("body")[0].firstChild;
document.write("Dieses Script-Element hat folgende Knotennamen: <b>" +
Knoten.nodeName + "</b>")
//-->
</script>
</body></html>

Das Beispiel enthlt im sichtbaren Dokumentbereich nichts weiter als ein JavaScript, das den
Knotennamen des eigenen script-Elements ausgibt, also SCRIPT. Dazu greift das Script mit document.getElementsByTagName("body")[0].firstChild auf das script-Element zu. Dessen Knoten wird in der Variablen Knoten gespeichert. Mit Knoten.nodeName wird dann der
Name dieses Knotens ermittelt. Elementknoten und Attributknoten haben Namen, Textknoten
jedoch nicht. Beim Versuch, den Namen eines Textknotens zu ermitteln, wird der Wert #text
gespeichert.
Bercksichtigen Sie beim Nachvollziehen dieses Beispiels die Besonderheit des Netscape 6.1 im
Umgang mit Kindknoten (siehe childNodes).

nodeType
Speichert den Typ eines Knotens in Form einer Nummer. Das W3-Konsortium hat dazu folgende Zuordnungen festgelegt einige davon sind XML-spezifisch:
Nummer

Knotentyp

Elementknoten
Attributknoten
Textknoten
Knoten fr CDATA-Bereich
Knoten fr Entity-Referenz
Knoten fr Entity
Knoten fr Verarbeitungsanweisung
Knoten fr Kommentar
Dokumentknoten
Dokumenttyp-Knoten
Dokumentfragment-Knoten
Knoten fr Notation

2
3
4
5
6
7
8
9
10
11
12

20.6 node

783

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p align="center">ein kleiner Text</p>
<script type="text/javascript">
<!-var Element = document.getElementsByTagName("p")[0];
var Ausrichtung = Element.getAttributeNode("align");
alert(Ausrichtung.nodeType);
//-->
</script>
</body></html>

Das Beispiel enthlt einen Textabsatz mit einem Attribut align= zur Ausrichtung. Unterhalb des
Textabsatzes ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("p")[0] auf das p-Element zugegriffen. Mit Element.getAttributeNode("align")
wird auf dessen Attributknoten zugegriffen. In der Variablen Ausrichtung steht anschlieend
das Objekt des Attributknotens. Ein Meldungsfenster gibt dann im Beispiel den Knotentyp dieses
Knotens mit Ausrichtung.nodeType aus. Der Wert betrgt 2, da es sich um einen Attributknoten handelt.
Beachten Sie: Der MS Internet Explorer 5.x interpretiert die Eigenschaft nodeType zwar, in Version 5.5 aber nicht das obige Beispiel. Grund ist, dass er die Methode getAttibuteNode() nicht
untersttzt. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition ist das Beispiel dagegen nachvollziehbar.

nodeValue
Speichert den Wert oder Inhalt eines Knotens. Bei Textknoten ist dies der Text, bei Attributknoten der zugewiesene Attributwert. Bei Elementknoten hat diese Eigenschaft den Wert null.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function TextAendern() {
document.getElementById("derText").firstChild.nodeValue =
document.Formular.neuerText.value;
}
//-->
</script>
</head><body>
<p id="derText">Hier steht ein Text</p>
<form name="Formular" action="">
<input type="text" size="40" name="neuerText">
<input type="button" value=" OK " onClick="TextAendern()">
</form>
</body></html>

784

Kapitel 20: JavaScript Objekt-Referenz

In dem Beispiel ist ein Textabsatz notiert und unterhalb davon ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird die Funktion TextAendern()
aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById
("derText") auf das p-Element zu, weiterhin mit firstChild auf den ersten Kindknoten
dieses Elements, also den Textinhalt, und weist dessen Eigenschaft nodeValue den Inhalt aus
dem Eingabefeld des Formulars zu.
Beachten Sie: Das Beispiel zeigt, dass nodeValue eine hnliche Funktionalitt hat wie die Eigenschaft all.innerText beim klassischen DHTML nach Microsoft-Syntax. Dennoch gibt es
Unterschiede: Wenn beispielsweise notiert wre:
<p>Text mit <b>fettem Text</b></p>

dann wrde firstChild.nodeValue aus Sicht des p-Elements nur den Wert Text mit liefern
und auch nur diesen Teil ndern knnen, da dahinter durch das innere b-Element ein neuer
Knoten beginnt.
Eine direkte Entsprechung zu all.innerHTML gibt es erst recht nicht im DOM. Inneres
HTML muss im DOM mit Hilfe geeigneter Methoden wie document.createElement(),
document.createAttribute() und document.createTextNode() erzeugt werden.

parentNode
Speichert den Elternknoten eines Knotens. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<ul>
<li>ein Punkt</li>
<li>ein zweiter</li>
</ul>
<script type="text/javascript">
<!-alert(document.getElementsByTagName("li")[0].parentNode.parentNode.tagName);
//-->
</script>
</body></html>

Das Beispiel enthlt eine Aufzhlungsliste. Unterhalb davon ist ein JavaScript-Bereich notiert.
Dort wird der Name des Groelternelements des ersten li-Elements in einem Meldungsfenster
ausgegeben. Dazu wird mit document.getElementsByTagName("li")[0] auf das erste liElement zugegriffen. Das erste parentNode dahinter greift auf dessen Elternelement zu, und das
zweite parentNode auf das Elternelement des Elternelements. Von diesem Element wird mit
tagName der Name des Elementes ermittelt und ausgegeben. Das Attribut tagName kennen alle
Knoten der Art Element. Ausgegeben wird im Beispiel BODY.
Beachten Sie: Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.

previousSibling
Speichert aus Sicht eines Knotens den unmittelbar vorhergehenden Knoten im Strukturbaum.
Wenn kein Knoten vorausgeht, wird null gespeichert. Ein Beispiel:

20.6 node

785

<html><head><title>Test</title></head>
<body id="Dokumentinhalt"
onLoad="alert(document.getElementById(Dokumentinhalt).previousSibling.nodeName)">
</body></html>

Das Beispiel gibt, nachdem das Dokument geladen ist (onLoad), in einem Meldungsfenster den
Knotennamen des Vorgngerknotens vom body-Element aus. Dazu wird mit document.getElementById(Dokumentinhalt) auf das body-Element zugegriffen. Ausgegeben
wird dann HEAD, da das head-Element im Sinne des Strukturbaums das unmittelbare Vorgngerelement des body-Elements ist.
Bercksichtigen Sie bei der Verwendung dieser Eigenschaft die Besonderheit des Netscape 6.1
und des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten (siehe childNodes).

appendChild()
Hngt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein, und zwar so,
dass er als letztes Kindelement eines anzugebenden Knotens eingefgt wird. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<ol id="Liste">
<li>Element</li>
</ol>
<script language="JavaScript" type="text/javascript">
<!-document.getElementById("Liste").removeChild(document.getElementById("Liste").first
Child);
for(var i = 0; i < 10; i++) {
var newLI = document.createElement("li");
var liNummer = i + 1;
var newLIText = document.createTextNode("Das ist Listeneintrag Nummer " +
liNummer);
document.getElementById("Liste").appendChild(newLI);
document.getElementsByTagName("li")[i].appendChild(newLIText);
}
//-->
</script>
</body></html>

Das Beispiel fllt eine nummerierte Liste automatisch mit Daten. Unmittelbar nach dem Einlesen der nummerierten Liste folgt ein JavaScript-Bereich. Zuerst wird mit der Methode
removeChild() das vorhandene Listenelement entfernt. Anschlieend ist eine for-Schleife
notiert, die 10-mal durchlaufen wird. Bei jedem Schleifendurchgang wird zunchst mit
document.createElement() ein neues Element vom Typ li erzeugt. Dann wird eine Variable
liNummer auf einen Wert gesetzt, der um 1 hher ist als der des Schleifenzhlers i. Diese Variable wird in der nachfolgenden Anweisung benutzt, bei der mit document.createTextNode()
ein neuer Textknoten erzeugt wird. Anschlieend folgen immer noch innerhalb der forSchleife zwei appendChild()-Aufrufe. Die erste der Anweisungen greift mit document.

786

Kapitel 20: JavaScript Objekt-Referenz

getElementById("Liste") auf das ol-Element zu und fhrt dazu, dass diesem ein neues

Kindelement am Ende hinzugefgt wird. Angehngt wird der zuvor neu erzeugte Elementknoten
newLI, der ja ein neues li-Element speichert. Beim zweiten Aufruf wird der Schleifenzhler i
benutzt, um mit document.getElementsByTagName("li")[i] auf das gerade neu erzeugte liElement zuzugreifen. Ihm wird mit appendChild() der zuvor erzeugte Textknoten als Kind-

element hinzugefgt. Auf diese Weise fllt sich die Liste bei jedem Schleifendurchlauf um ein
neues li-Element mitsamt Zeicheninhalt.

appendData()
Fgt einem Textknoten oder dem Wert eines Attributknotens am Ende Daten hinzu, ohne die
bestehenden Daten zu berschreiben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function ergaenzen() {
var Rest = document.createTextNode("vollkommen!");
document.getElementById("Absatz").firstChild.appendData(Rest.nodeValue);
}
//-->
</script>
</head>
<body>
<p id="Absatz">Ich bin ja so un</p>
<p><a href="javascript:ergaenzen()">un - was?</a></p>
</body></html>

Das Beispiel enthlt einen Absatz mit nicht ganz sinnigem Text und unterhalb davon einen Verweis. Beim Anklicken des Verweises wird die Funktion ergaenzen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunchst mit document.createTextNode() einen
neuen Textknoten. Anschlieend greift sie mit document.getElementById("Absatz").
firstChild auf den Knoten zu, der den Zeicheninhalt des Textabsates mit dem unfertigen Text
darstellt, und fgt dort mit appendData() den Wert des neu erzeugten Textknotens (Rest.
nodeValue) hinzu. Aus dem Text ich bin ja so un wird also ich bin ja so unvollkommen!
Beachten Sie: Der Internet Explorer 5.x untersttzt diese Methode noch nicht. Sie knnen sich
damit behelfen, auf den Inhalt eines Textknotens zuzugreifen und dann mit nodeValue +=
"Text" Daten hinzuzufgen. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0
Macintosh Edition wird die Methode dagegen untersttzt.

cloneNode()
Erstellt eine identische Kopie eines Knotens, je nach Wunsch mit oder ohne zugehrige Unterknotenstruktur. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<span id="Dolly">Dolly </span>
<script type="text/javascript">
<!--

20.6 node

787

Dolly2 = document.getElementById("Dolly").cloneNode(true);
document.getElementById("Dolly").firstChild.nodeValue +=
Dolly2.firstChild.nodeValue;
//-->
</script>
</body></html>

Das Beispiel enthlt einen in einem span-Element notierten Text Dolly. Unterhalb davon ist ein
JavaScript-Bereich notiert. Dort wird mit document.getElementById("Dolly") auf das spanElement zugegriffen. Dieses wird mit cloneNode() kopiert, und der Rckgabewert wird in der
Variablen Dolly2 gespeichert. Der Rckgabewert ist eine identische Kopie des Elementknotens
des span-Elements. Als Parameter wird der Methode im Beispiel true bergeben. Das bedeutet,
dass auch der Textinhalt des Elements mitkopiert wird. Um nur das Element ohne den Inhalt zu
klonen, mssen Sie false bergeben.
Im Beispiel wird anschlieend mit document.getElementById("Dolly").firstChild.
nodeValue der Inhalt des span-Elements angesprochen und mittels Zeichenkettenoperation um
den Wert des Kindelements des Klons erweitert, auf den mit Dolly2.firstChild.nodeValue
zugegriffen wird. Am Ende steht also Dolly Dolly als Inhalt in dem span-Element.

deleteData()
Lscht Daten eines Textknotens oder den Wert eines Attributknotens. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function loeschen() {
var AnzahlZeichen =
document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
document.getElementsByTagName("p")[0].firstChild.deleteData(0,AnzahlZeichen);
}
//-->
</script>
</head>
<body>
<p>Die Beredtsamkeit an sich ist die Tugend des Redens
und die Lust des Schweigens an seinem Gegenteil.
Die Beredtsamkeit ist also ...
<a href="javascript:loeschen()">och nee, besser nicht!</a></p>
</body></html>

Das Beispiel enthlt einen Textabsatz mit Text und einem Verweis. Beim Anklicken des Verweises wird die Funktion loeschen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion
ermittelt zunchst durch Zugriff auf den Zeicheninhalt des Absatzes (document.getElementsByTagName("p")[0].firstChild.nodeValue) mit der Methode string.length dessen
Zeichenanzahl. Der Wert wird fr die folgende Anweisung bentigt. Dort wird wieder mit
document.getElementsByTagName("p")[0].firstChild auf den Zeicheninhalt des Absatzes
zugegriffen. Mit deleteData() wird der Inhalt gelscht. Die Methode deleteData() erwartet
zwei Parameter:

788

Kapitel 20: JavaScript Objekt-Referenz

das Zeichen, ab dem gelscht werden soll (0 steht fr ab dem ersten Zeichen),
Anzahl Zeichen, die gelscht werden sollen (im Beispiel wird dazu die Variable AnzahlZeichen
bergeben, in der die zuvor ermittelte Anzahl der Zeichen im Textknoten gespeichert ist).
Der Verweis im Beispiel bleibt brigens nach dem Lschen stehen, weil das a-Element des Verweises schon wieder einen neuen Kindknoten darstellt.
Beachten Sie: Der Internet Explorer 5.x untersttzt diese Methode noch nicht. Um die gesamten
Zeichendaten eines Textknotens zu lschen, knnen Sie sich damit behelfen, auf den Knoten zuzugreifen und der Eigenschaft nodeValue den Wert "" (leere Zeichenkette) zuzuweisen. Im MS
Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode
dagegen untersttzt.

getAttribute()
Ermittelt den Wert eines bestimmten Attributs in einem Element. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Anzeigen(attr) {
alert(document.getElementsByTagName("body")[0].getAttribute(attr));
}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000" link="#0000E0" alink="#000080"
vlink="#000000">
<a href="javascript:Anzeigen(bgcolor)">Hintergrundfarbe?</a><br>
<a href="javascript:Anzeigen(text)">Textfarbe?</a><br>
<a href="javascript:Anzeigen(link)">Linkfarbe noch nicht besuchte Seiten?</a><br>
<a href="javascript:Anzeigen(vlink)">Linkfarbe besuchte Seiten?</a><br>
<a href="javascript:Anzeigen(alink)">Linkfarbe aktivierte Links?</a>
</body></html>

Das Beispiel enthlt mehrere Verweise. Alle Verweise rufen beim Anklicken die Funktion Anzeigen() auf, die im Dateikopf notiert ist. bergeben wird der Funktion der gewnschte Attributname. Die Funktion greift mit document.getElementsByTagName("body")[0] auf das bodyElement zu. Mit getAttribute() lassen sich dann Atrributwerte des einleitenden <body>-Tags
ermitteln. Die Methode erwartet den Namen des gewnschten Attributs und liefert dessen Wert
zurck. Im Beispiel bekommt sie jeweils den der Funktion bergebenen Parameter attr weitergereicht.
Beachten Sie: Das obige Beispiel wird auch von Opera 5.12 interpretiert.

getAttributeNode()
Holt einen Attributknoten. Liefert das Knotenobjekt des gewnschten Attributs zurck. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">

20.6 node

789

<!-function anpassen() {
var CSSKnoten = document.getElementsByTagName("h1")[0].getAttributeNode("style");
for(i = 0; i < document.getElementsByTagName("p").length; i++)
document.getElementsByTagName("p")[i].setAttributeNode(CSSKnoten);
}
//-->
</script></head>
<body>
<h1 style="font-family:Tahoma; font-size:200%; color:red">Rot und Gro!</h1>
<p>ein Absatz</p>
<p>und noch einer</p>
<p>und einer mit einem <a href="javascript:anpassen()">Link zum Anpassen</a></p>
</body></html>

Das Beispiel enthlt eine berschrift mit einem style-Attribut sowie drei Textabstze. Der
letzte davon enthlt einen Verweis, bei dessen Anklicken die Funktion anpassen() aufgerufen
wird, die im Dateikopf notiert ist. Diese Funktion holt sich mit document.getElementsByTagName("h1")[0].getAttributeNode("style") das Knotenobjekt des style-Elements aus
der berschrift. Der Rckgabewert, also das Attributknoten-Objekt, wird in der Variablen
CSSKnoten gespeichert. Anschlieend wird in einer for-Schleife auf alle p-Elemente des Dokuments zugegriffen. Mit setattributeNode() wird dem jeweils aktuellen p-Element der gespeicherte style-Attributknoten hinzugefgt. Die p-Elemente erben auf diese Weise die CSSEigenschaften der berschrift.
Beachten Sie: Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Die Version
6.0 kennt diese Methode, jedoch wird sie nicht vollstndig interpretiert.

hasChildNodes()
Ermittelt, ob ein Knoten Kindknoten unter sich hat. Gibt den booleschen Wert true zurck,
wenn ja, und false, wenn nein. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<p></p>
<p>mit Inhalt</p>
<p></p>
<p>mit Inhalt</p>
<script type="text/javascript">
<!-for(i = 0; i < document.getElementsByTagName("p").length; i++)
if(document.getElementsByTagName("p")[i].hasChildNodes())
document.write((i+1) + ". p-Element hat einen Inhalt!<br>");
//-->
</script>
</body></html>

Das Beispiel enthlt vier Textabstze. Zwei davon haben einen Zeicheninhalt, zwei andere sind
leer. Unterhalb der Textabstze ist ein JavaScript notiert. Dieses greift in einer for-Schleife der
Reihe nach mit document.getElementsByTagName("p") auf alle p-Elemente des Dokuments

790

Kapitel 20: JavaScript Objekt-Referenz

zu. Dabei wird mit if(document.getElementsByTagName("p")[i].hasChildNodes()) abgefragt, ob das jeweils aktuell in der Schleife behandelte p-Element Kindknoten hat. Wenn ja,
wird mit document.write() ins Dokument geschrieben, beim wievielten Element ein Kindknoten gefunden wurde. Im Beispiel ist das beim zweiten und vierten Element der Fall, da diese
beiden Elemente Textknoten enthalten.

insertBefore()
Fgt innerhalb eines Knotens einen Kindknoten vor einem anderen Kindknoten ein. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<p id="derText">Text <i id="derKursiveText">und mit kursivem Text</i></p>
<script type="text/javascript">
<!-var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB,
document.getElementById("derKursiveText"));
//-->
</script>
</body></html>

Das Beispiel enthlt einen Textabsatz mit Text und einem Kindelement <i>...</i>. Unterhalb
des Absatzes ist ein JavaScript-Bereich notiert. Darin wird zunchst mit document.createElement() ein neues Element des Typs b fr fetten Text erzeugt. Anschlieend wird mit
document.createTextNode() ein Textknoten erzeugt, der dann mit appendChild() als Inhalt
des neu erzeugten b-Elements eingefgt wird. Der ganze Komplex aus b-Element mit Inhalt ist
dann in der Variablen neuB gespeichert. Mit document.getElementById("derText") greift
das Script sodann auf das p-Element zu und fgt mit insertBefore() das neue Element vor
dem anderen Kindelement ein, das die Id "derKursiveText" hat. Am Ende lautet der
komplette Inhalt des p-Elements dann:
Text <b>mit fettem Text </b><i>und mit kursivem Text</i>

Die Methode insertBefore() erwartet also zwei Parameter:

das neu einzufgende Kindelement,
ein Kindelement, vor dem das neue Kindelement eingefgt werden soll.

insertData()
Fgt Zeichendaten in einem Textknoten ab einer bestimmten Zeichenposition ein. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function italiano() {
document.getElementsByTagName("h1")[0].firstChild.insertData(7, "duemilauno");

20.6 node

791

}
//-->
</script></head>
<body>
<h1>2001 = oder zweitausendeins</h1>
<a href="javascript:italiano()">sag es in italienisch!</a>
</body></html>

Das Beispiel enthlt eine berschrift erster Ordnung, in der noch irgendetwas fehlt an Text.
Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Funktkion italiano() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("h1")[0].firstChild auf den Textknoten der berschrift zu und fgt mit
insertData() ab dem 8. Zeichen (Zeichenposition 7, zu zhlen begonnen wird bei 0) die
Zeichenkette duemilauno ein. Der dahinter stehende Text oder zweitausendeins wird wie
beim Einfgemodus in der Textverarbeitung einfach nach hinten geschoben.
Beachten Sie: Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS
Internet Explorer 6.0 und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen untersttzt.

removeAttribute()
Lscht aus einem Element die Wertzuweisung an ein Attribut. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function wegMitAusrichtung() {
document.getElementById("rechts").removeAttribute("align");
}
//-->
</script></head>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der
Ausrichtung!</a></p>
</body></html>

Das Beispiel enthlt einen mit align="right" rechtsbndig ausgerichteten Textabsatz, der einen Verweis enthlt. Beim Anklicken des Verweises wird die Funktion wegMitAusrichtung()
aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById
("rechts") auf das p-Element zu und lscht mit removeAttribute("align") den Wert des
align-Attributs. Der Absatz wird dadurch dynamisch neu ausgerichtet (per Voreinstellung
linksbndig).
Wichtig ist aber, dass nicht das Attribut gelscht wird, sondern nur dessen Wert. Im Beispiel ist
der Effekt so, als wenn in HTML notiert wre: <p id="rechts" align="">...</p>
Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

792

Kapitel 20: JavaScript Objekt-Referenz

removeAttributeNode()
Lscht aus einem Element einen Attributknoten mitsamt Wertzuweisung. Ein Beispiel:
<html><head><title>Test</title></head>
<script language="JavaScript" type="text/javascript">
<!-function wegMitAusrichtung() {
document.getElementById("rechts").removeAttributeNode(document.getElementById("rech
ts").attributes[1]);
}
//-->
</script>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der
Ausrichtung!</a></p>
</body></html>

Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu removeAttribute(). Der
Unterschied ist nur, dass mit removeAttributeNode() das komplette Attribut gelscht wird
und nicht nur dessen Wertzuweisung. Als Parameter erwartet diese Methode das Objekt des gewnschten Attributknotens. Im Beispiel wird document.getElementById("rechts").
attributes[1] bergeben, da das align-Attribut, das es zu entfernen gilt, das 2. Attribut im
attributes-Array des p-Elements ist.
Beachten Sie: Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht.

removeChild()
Lscht aus einem Element einen Kindknoten. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function wegMitEintrag() {
var Knoten=document.getElementsByTagName("ol")[0].firstChild;
verschwunden = document.getElementsByTagName("ol")[0].removeChild(Knoten);
alert(verschwunden.firstChild.nodeValue)
}
//-->
</script></head>
<body>
<ol start="1" type="I"><li>Element 1</li><li>Element 2</li><li>Element 3</li></ol>
<p><a href="javascript:wegMitEintrag()">Lsche das erste Element</a></p>
</body></html>

Das Beispiel enthlt eine nummerierte Liste. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion wegMitEintrag() aufgerufen, die im Dateikopf notiert
ist. In dieser Funktion wird auf den ersten Kindknoten mit document.getElementsByTagName
("ol")[0].firstChild zugegriffen. Der Wert wird in der Variablen Knoten gespeichert. Mit

20.6 node

793

removeChild(Knoten) wird der Listenpunkt gelscht. Dabei wird der Methode als Parameter
der zu lschende Knoten bergeben. Die Methode removeChild() gibt als Rckgabewert das
gelschte Element zurck. Dieser Wert ist im Beispiel in der globalen Variablen verschwunden

gespeichert. ber diese Variable knnen Sie weiterhin auf die Eigenschaften des Knotens
zugreifen. So wird im Beispiel noch einmal der Inhalt des ersten Kindknotens des gelschten
Elements ausgegeben.
Bercksichtigen Sie beim Nachvollziehen dieses Beispiels die Besonderheit des Netscape 6.1 und
des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten (siehe childNodes).

replaceChild()
Ersetzt aus Sicht eines Knotens einen seiner Kindknoten durch einen anderen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function andereAntwort() {
var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("z2").replaceChild(Textknoten,
document.getElementById("z2").firstChild);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>

Das Beispiel enthlt eine Tabelle mit zwei Zellen. Unterhalb der Tabelle ist ein Verweis notiert.
Beim Anklicken des Verweises wird die Funktion andereAntwort() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunchst mit document.createTextNode() einen
neuen Textknoten fr die Antwort. Die Antwort wird in Form eines Knotenobjekts bentigt,
weil die Methode replaceChild() sowohl den neuen Knoten als auch den zu ersetzenden in
Form eines Knotenobjekts erwartet. Im Beispiel wird mit document.getElementById("z2")
auf die zweite Tabellenzelle zugegriffen, um deren Inhalt, also den Textknoten, der ihren Kindknoten darstellt, durch den neu erzeugten Textknoten zu ersetzen. Dazu wird replaceChild()
angewendet. Als erster Parameter wird der neue Knoten bergeben, als zweiter der zu ersetzende.
Der neue Knoten ist im Beispiel in der Variablen Textknoten gespeichert. Auf den zu ersetzenden Knoten wird mit document.getElementById("z2").firstChild zugegriffen.

replaceData()
Ersetzt Zeichendaten im Inhalt eines Elements oder in der Wertzuweisung an ein Attribut. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">

794

Kapitel 20: JavaScript Objekt-Referenz

<!-function andereAntwort() {
var Text = "Du darfst!";
var rd_Start = 0;
var rd_Laenge = document.getElementById("z2").firstChild.nodeValue.length;
document.getElementById("z2").firstChild.replaceData(rd_Start,rd_Laenge,Text);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>

Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu replaceChild(). Der
Unterschied ist nur, dass mit replaceData() auf Textebene gearbeitet wird und dass diese
Methode auch gezieltes Ersetzen ab einer bestimmten Zeichenposition und fr eine bestimmte
Lnge erlaubt. Als Parameter erwartet replaceData() zuerst die Startposition in der Zeichenkette, ab der ersetzt werden soll. Im Beispiel wird dazu die Variable rd_Start bergeben, der
zuvor 0 zugewiesen wurde. Damit wird ab dem ersten Zeichen ersetzt. Als zweiter Parameter
wird bergeben, wieviele Zeichen ersetzt werden sollen. Im Beispiel wird die Variable rd_Laenge
bergeben. Dieser wurde zuvor mit document.getElementById("z2").firstChild.
nodeValue.length die Zeichenanzahl des gesamten Textknotens der zweiten Tabellenzelle
zugewiesen. Im Beispiel wird auf diese Weise der komplette Inhalt der zweiten Tabellenzelle
ersetzt. Mit einer Angabe wie 0,1 wrden Sie beispielsweise nur das erste Zeichen ersetzen.
Als dritten Parameter erwartet replaceData() eine Zeichenkette, mit der die zuvor im Textknoten markierte Zeichenkette ersetzt werden soll. Im Beispiel wird die Variable Text bergeben, der zuvor ein Wert zugewiesen wurde.
Beachten Sie: Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS
Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode
dagegen untersttzt.

setAttribute()
Setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter
Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem
neuen Wert belegt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function setzen() {
document.getElementsByTagName("body")[0].setAttribute("bgColor",
document.Formular.bgcolor.value);
document.getElementsByTagName("body")[0].setAttribute("text",
document.Formular.text.value);

20.6 node

795

}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000">
<form name="Formular" action=""><pre>
Hintergrundfarbe:
<input type="text" name="bgcolor">
Textfarbe:
<input type="text" name="text">
Werte:
<input type="button" value="setzen" onClick="setzen()">
</pre></form>
</body></html>

Das Beispiel enthlt ein Formular mit zwei Eingabefeldern, in denen der Anwender neue Werte
fr die beiden Attribute bgcolor und text des body-Elements eingeben kann. Beim Anklicken
des Buttons unterhalb davon wird die Funktion setzen() aufgerufen, die im Dateikopf notiert
ist. Diese Funktion greift mit document.getElementsByTagName("body")[0] auf das bodyElement zu und weist ihm mit setAttribute() die neuen Attribute zu. Als erster Parameter
wird der Name des zu erzeugenden oder zu ersetzenden Attributs bergeben, als zweiter Parameter der gewnschte Wert. Im Beispiel wird als zweiter Parameter jeweils der Wert aus den
Formulareingabefeldern bergeben.
Beachten Sie: Der MS Internet Explorer ist empfindlich, was den ersten Parameter, also den gewnschten Attributnamen betrifft. Mit bgColor funktionierte das obige Beispiel, mit bgcolor
dagegen nicht. Offenbar vermengt der Internet Explorer die erforderliche Syntax fr das HTMLElementobjekt body mit dem hier geforderten Wert. Im MS Internet Explorer 5.0 Macintosh
Edition ist das Beispiel zwar nachvollziehbar, jedoch mit sehr seltsamen Ergebnissen.

setAttributeNode()
Fgt in ein Element einen neuen Attributknoten ein. Ist der Attributknoten bereits vorhanden,
wird der alte Knoten durch den neuen ersetzt. Ist er noch nicht vorhanden, wird er neu angelegt.
Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<h1>Element ohne Eigenschaften?</h1>
<script type="text/javascript">
<!-var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "center";
document.getElementsByTagName("h1")[0].setAttributeNode(Ausrichtung);
//-->
</script>
</body></html>

Das Beispiel enthlt eine berschrift erster Ordnung ohne Attribute. Unterhalb davon ist ein
JavaScript notiert. Dort wird zunchst mit document.createAttribute() ein neuer Attributknoten fr ein Attribut namens align erzeugt. Der Knoten wird in der Variablen Ausrichtung gespeichert. Durch Ausrichtung.nodeValue lsst sich dem erzeugten Knoten dann ein
Wert zuweisen. Mit document.getElementsByTagName("h1")[0] greift das Script schlielich
auf das berschriftenelement zu und weist ihm mit setAttributeNode(Ausrichtung) den
zuvor erzeugten und in Ausrichtung gespeicherten Attributknoten zu.

796

Kapitel 20: JavaScript Objekt-Referenz

Beachten Sie: Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS
Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode
dagegen untersttzt.

20.7

all

Eigenschaften
className
dataFld
dataFormatAs
dataPageSize
dataSrc
id
innerHTML
innerText
isTextEdit
lang
language
length
offsetHeight
offsetLeft
offsetParent
offsetTop
offsetWidth
outerHTML
outerText
parentElement
parentTextEdit
recordNumber
sourceIndex
tagName
title

(Stylesheet-Klassenname eines Elements)

(Datenfeld bei Datenanbindung)
(Datentyp bei Datenanbindung)
(Anzahl Datenstze bei Datenanbindung)
(Datenquelle bei Datenanbindung)
(id-Name eines Elements)
(Inhalt eines Elements als HTML)
(Inhalt eines Elements als Text)
(Editierbarkeit eines Elements)
(Sprache eines Elements)
(Script-Sprache fr ein Element)
(Anzahl Elemente)
(Hhe eines Elements)
(Linkswert der linken oberen Elementecke)
(Elternelement-Position)
(Obenwert der linken oberen Elementecke)
(Breite eines Elements)
(Elementinhalt plus ueres HTML)
(Elementinhalt plus uerem Text)
(Elternelement)
(Editierbarkeit des Elternelements)
(Datensatznummer bei Datenanbindung)
(wie vieltes Element)
(HTML-Tag des Elements)
(Titel des Elements)

Methoden
click()
contains()
getAttribute()
insertAdjacentHTML()
insertAdjacentText()
removeAttribute()
scrollIntoView()
setAttribute()

(Element anklicken)
(Zeichenkette in Element enthalten)
(Attribut in einem Element ermitteln)
(Element einfgen)
(Text einfgen)
(Attribut aus Element entfernen)
(zu Element scrollen)
(Attribut eines Elements einfgen)

20.7 all

797

all: Allgemeines zur Verwendung

Das Objekt all, das in der JavaScript-Objekthierarchie unterhalb des document-Objekts liegt, ist
der Schlssel zu Dynamischem HTML nach dem Ansatz des MS Internet Explorer ab Version 4.0.
Mit Hilfe des all-Objekts haben Sie Script-Zugriff auf alle einzelnen Elemente und Inhalte einer
HTML-Datei. Die meisten Eigenschaften knnen Sie lesen und ndern. Methoden des allObjekts erlauben unter anderem das Einfgen oder Entfernen von HTML-Tags und von Angaben innerhalb eines HTML-Tags. Auf diese Weise ist der dynamische Zugriff auf alle Bestandteile einer Datei mglich.
Das all-Objekt gehrt nicht zum offiziellen JavaScript-Sprachstandard. Es wurde von Microsoft
fr den MS Internet Explorer 4.0 implementiert. Das all-Objekt funktioniert zwar auch prima
innerhalb von Script-Bereichen, die mit JavaScript ausgezeichnet sind, doch es ist bislang
eigentlich nur Bestandteil von JScript, dem Microsoft-Derivat von JavaScript.
Mit den neuen Browser-Generationen und dem Document Object Model (DOM) wird das allObjekt durch die neuen HTML-Elementobjekte und das node-Objekt verdrngt. Es hat also
keine Zukunft mehr und sollte allenfalls noch aus Grnden der Rckwrtskompatibilitt eingesetzt werden.
Eine zusammenhngende Einfhrung in das Arbeiten mit dem all-Objekt finden Sie im Kapitel
21.3, Das ltere DHTML-Modell von Microsoft.

HTML-Elemente ansprechen
Das all-Objekt behandelt alle HTML-Tags, die in einer HTML-Datei notiert sind, als Kette von
Elementen. Sie knnen jedes einzelne HTML-Tag in einer Datei ansprechen. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function Aendern() {
document.all.tags("h1")[0].innerText = "Anderer Inhalt";
}
//-->
</script>
</head>
<body>
<h1>eine berschrift</h1>
<a href="javascript:Aendern()">Aendern</a>
</body></html>

Das Beispiel enthlt eine berschrift und einen Verweis. Beim Anklicken des Verweises wird die
Funktion Aendern() aufgerufen. Diese Funktion ndert den Text der berschrift dynamisch in
"Anderer Inhalt".
Um ein bestimmtes HTML-Tag anzusprechen, notieren Sie document.all.tags. Dahinter
folgt, in runden Klammern und in Anfhrungszeichen, der Name des HTML-Tags, auf das Sie
zugreifen mchten. Im Beispiel soll auf ein <h1>-Tag zugegriffen werden, also muss ("h1")
notiert werden. Damit haben Sie eine Art Zwischenobjekt, nmlich eine Kette aus allen <h1>-

798

Kapitel 20: JavaScript Objekt-Referenz

Elementen der Datei. Nun mssen Sie noch angeben, welches Sie meinen. Im Beispiel gibt es
zwar nur eine <h1>-berschrift, aber es knnte ja auch mehrere davon geben. Dazu notieren Sie
in eckigen Klammern, das wievielte HTML-Tag vom angegebenen Typ Sie meinen. Beachten Sie,
dass der Zhler bei 0 beginnt, d.h., das erste Element sprechen Sie mit [0] an, das zweite mit [1]
usw. Beim Zhlen gilt die Reihenfolge, in der die HTML-Tags des ausgewhlten Typs in der
Datei notiert sind.
Nachdem Sie ein bestimmtes, eindeutiges HTML-Tag angesprochen haben, knnen Sie dahinter
eine der Eigenschaften oder Methoden des all-Objekts auf dieses HTML-Tag anwenden.

HTML-Elemente mit Namen ansprechen

Sie knnen jedes HTML-Element in einem Script auch mit einem Namen ansprechen. Voraussetzung ist, dass das HTML-Element einen Namen durch die Attribute id= bzw. name= erhalten
hat. Ein Beispiel:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!-function MachPzuH() {
document.all.MeinElement.outerHTML = "<h1>" +
document.all["MeinElement"].innerText + "<\/h1>";
}
//-->
</script>
</head>
<body>
<p id="MeinElement">Ein Element mit Text</p>
<a href="javascript:MachPzuH()">Mach P zu H</a>
</body></html>

Das Beispiel enthlt einen Absatz und einen Verweis. Beim Anklicken des Verweises wird die
Funktion MachPzuH() aufgerufen. Diese Funktion verwandelt den Absatz dynamisch in eine
berschrift 1. Ordnung.
Um ein HTML-Element mit seinem Namen anzusprechen, mssen Sie im einleitenden Tag des
Elements das Attribut id= notieren und dahinter einen Namen vergeben. Im Beispiel ist das der
Name "MeinElement". Dann knnen Sie dieses Element mit document.all.ElementName, im
Beispiel also mit document.all.MeinElement, ansprechen.
Alternativ knnen Sie, wie im zweiten Teil des Beispieles, das Element mit document.all
["MeinElement"] angesprechen. ber diese Art des Ansprechens eines Elementes knnen Sie
auch Variablen bergeben. Dazu notieren Sie einfach den Variablennamen ohne Anfhrungszeichen anstatt eines festen Wertes, z.B. document.all[Variablenname]. Voraussetzung ist
jedoch, dass die Variable auch existiert.

20.7 all

799

className
Speichert die Stylesheet-Klasse, zu der ein Element gehrt. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-p.normal { color:black }
p.spezial { color:red }
-->
</style>
</head><body>
<p class="normal" id="derAbsatz">Text</p>
<script type="text/javascript">
<!-document.write("<br>Klasse davor: " + document.all.derAbsatz.className);
document.all.derAbsatz.className = "spezial";
document.write("<br>Klasse danach: " + document.all.derAbsatz.className);
//-->
</script>
</body></html>

Im Beispiel werden im Dateikopf mit Hilfe von CSS Stylesheets zwei Klassen fr das HTML-Tag
<p> definiert: eine Klasse normal und eine Klasse spezial. Im Dateikrper wird ein Absatz
definiert, der zunchst die Klasse normal zugewiesen bekommt. In einem Script wird der Klassenname des Absatzes zunchst mit document.write() zur Kontrolle in die Datei geschrieben.
Dann wird dem Absatz die andere definierte Klasse zugewiesen. Dabei bernimmt der Absatz
auch dynamisch alle Stylesheet-Eigenschaften der neuen Klasse. Anschlieend wird der neue
Klassenname zur Kontrolle auch noch mal in die Datei geschrieben.

dataFld
Speichert den Namen eines Datenfeldes, das zur Ausgabe eines Datensatzes gehrt. Dies bezieht
sich auf das Konzept der Datenanbindung. Zur Einfhrung in das Thema lesen Sie das Kapitel
21.5 ber Datenanbindung (Microsoft). Ein Beispiel:
<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname">
</span><input type="button" value="Test"
onClick="alert(document.all.Test.dataFld)">
</td>
</tr>

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (die brigen
Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefgt, bei dessen
Anklicken der Name des Datenfeldes mit alert() ausgegeben wird. Es ist der Feldname, der in
der HTML-Angabe datafld= steht. Wenn Sie den Wert dynamisch ndern, knnen Sie in der
gleichen Tabellenzelle beispielsweise ein anderes Feld ausgeben.

800

Kapitel 20: JavaScript Objekt-Referenz

dataFormatAs
Speichert den Ausgabetyp eines Datenfeldes, das zur Ausgabe eines Datensatzes gehrt. Dies
bezieht sich auf das Konzept der Datenanbindung. Zur Einfhrung in das Thema lesen Sie das
Kapitel 21.5 ber Datenanbindung (Microsoft). Ein Beispiel:
<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname" dataformatas="HTML">
</span><input type="button" value="Test"
onClick="alert(document.all.Test.dataFormatAs)">
</td>
</tr>

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (die brigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefgt, bei dessen Anklicken der Ausgabetyp des Datenfeldes mit alert() angezeigt wird. Da dieser im Ausgabebereich mit HTML festgelegt wurde, wird dieser Wert ausgegeben.

dataPageSize
Speichert, wie viele Datenstze gleichzeitig ausgegeben werden sollen. Dies bezieht sich auf das
Konzept der Datenanbindung. Zur Einfhrung in das Thema lesen Sie das Kapitel 21.5 ber
Datenanbindung (Microsoft). Ein Beispiel:
<input type="button" value="Test"
onClick="document.all.Anzeigetabelle.dataPageSize = 5">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1">
...usw. Daten ...
</table>

Das Beispiel deutet eine Tabelle an, die zur Ausgabe von Daten aus einer Datenanbindung
gedacht ist (die brigen Befehle zur Datenanbindung fehlen hier). Da im einleitenden <table>Tag die Angabe datapagesize="1" steht, wird in der Tabelle immer nur ein Datensatz gleichzeitig ausgegeben. Zu Testzwecken ist ein Button eingefgt, bei dessen Anklicken sich der Wert
auf 5 ndert. Danach werden immer 5 Datenstze gleichzeitig angezeigt.

dataSrc
Speichert den Verweis auf das <object>-Tag, in dem eine Datenanbindung definiert wird. Dies
bezieht sich auf das Konzept der Datenanbindung. Zur Einfhrung in das Thema lesen Sie das
Kapitel 21.5 ber Datenanbindung (Microsoft). Ein Beispiel:
<input type="button" value="Test"
onClick="alert(document.all.Anzeigetabelle.dataSrc)">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1">
...usw. Daten ...
</table>

Das Beispiel deutet eine Tabelle an, die zur Ausgabe von Daten aus einer Datenanbindung
gedacht ist (die brigen Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button
eingefgt, bei dessen Anklicken der Verweis auf die Datenquelle ausgegeben wird. Da dieser im

20.7 all

801

Ausgabebereich mit "#Adressen" festgelegt wurde, wird dieser Wert ausgegeben. Durch ndern
dieser Objekteigenschaft knnen Sie dynamisch die Datenquelle wechseln. Voraussetzung ist,
dass fr den neuen Verweis auf die Datenquelle ein entsprechendes <object>-Tag fr die
Datenquelle definiert ist.

id
Speichert den Namen eines Elements. Im Beispiel wird ein Absatz definiert, der mit id= den
Namen "meinAbsatz" zugewiesen bekommt. In einem Script wird der vergebene Name mit
document.write() zur Kontrolle in die Datei geschrieben:
<html><head><title>Test</title>
</head><body>
<p id="meinAbsatz">Text</p>
<script type="text/javascript">
<!-document.write("<br>Name des Absatzes: " + document.all.meinAbsatz.id);
//-->
</script>
</body></html>

innerHTML
Speichert den Inhalt eines HTML-Elements. Wenn Sie beim dynamischen ndern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts
interpretiert. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Neu = "neuer <b>fetter<\/b> Text";
function Aendern() { document.all.meinAbsatz.innerHTML = Neu; }
//-->
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body></html>

Das Beispiel enthlt einen Textabsatz und einen Verweis. Beim Anklicken des Verweises wird die
Funktion Aendern() aufgerufen. Diese Funktion weist dem Absatz mit der id="meinAbsatz"
fr die Eigenschaft innerHTML den Wert der zuvor definierten Variablen Neu zu. Der Inhalt des
Absatzes ndert sich dann dynamisch und bercksichtigt dabei auch die HTML-Formatierung
<b>...</b> beim neuen Inhalt des Elements.
Die Eigenschaft innerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden,
sondern immer erst abhngig von Aktionen wie Verweisklicks oder Button-Klicks oder mit
einem setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der
Datei meldet der MS Internet Explorer 4.0 einen Laufzeitfehler.

802

Kapitel 20: JavaScript Objekt-Referenz

innerText
Speichert den Textinhalt eines HTML-Elements. Sie knnen den Inhalt dynamisch ndern. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Neu = "neuer Text";
function Aendern() { document.all.meinAbsatz.innerText = Neu; }
//-->
</script>
</head><body>
<p id="meinAbsatz">Text</p>
<a href="javascript:Aendern()">Anderer Text</a>
</body></html>

Das Beispiel enthlt einen Textabsatz und einen Verweis. Beim Anklicken des Verweises wird die
Funktion Aendern() aufgerufen. Diese Funktion weist dem Absatz mit der id="meinAbsatz"
fr die Eigenschaft innerText den Wert der zuvor definierten Variablen Neu zu. Der Inhalt des
Absatzes ndert sich dann dynamisch.
Die Eigenschaft innerText sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden,
sondern immer erst abhngig von Aktionen wie Verweisklicks oder Button-Klicks oder mit
einem setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der
Datei meldet der MS Internet Explorer 4.0 einen Laufzeitfehler.

isTextEdit
Speichert die Information, ob ein Element editierbar ist oder nicht. Wenn editierbar, hat die
Eigenschaft den Wert true, wenn nicht editierbar, hat sie den Wert false. Derzeit sind nur
bestimmte Formularelemente editierbar. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ausgabe() {
var Ausgabetext = "";
for(var i=0;i<document.Testform.length;++i)
Ausgabetext = Ausgabetext + "<br>" + document.all.tags("input")[i].isTextEdit;
document.all.Ausgabe.innerHTML = Ausgabetext;
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<input type="text" size="30"><br>
<input type="radio"><br>
<input type="button" value="Test" onClick="Ausgabe()">
</form>
<p id="Ausgabe"></p>
</body></html>

20.7 all

803

Das Beispiel definiert ein Formular mit einigen verschiedenen Elementen. Das letzte Element ist
ein Button. Beim Anklicken des Buttons wird die Funktion Ausgabe() aufgerufen. Diese Funktion ermittelt in einer Schleife fr jedes Element des Formulars, ob es editierbar ist oder nicht.
Die Werte werden in einer Variablen Ausgabetext gesammelt und HTML-formatiert. Am Ende
wird dem Textabsatz, der in der Datei am Ende definiert ist, mit der Eigenschaft innerHTML der
gespeicherte Wert von Ausgabetext zugewiesen. Auf diese Weise steht hinterher in der Datei,
welche der Formularfelder als editierbar gelten und welche nicht.

lang
Speichert die Sprache eines HTML-Tags, wie sie im Attribut lang= definierbar ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="Absatz" lang="it">mi chiamo Stefan</p>
<script type="text/javascript">
<!-alert(document.all.Absatz.lang);
//-->
</script>
</body></html>

Im Beispiel wird ein Textabsatz definiert, dem mit lang= die Sprache Italienisch (it) zugewiesen
wird. Unterhalb davon steht ein kleines JavaScript, das mit alert() den vergebenen Wert fr die
Sprache ausgibt.

language
Speichert, welche Script-Sprache in einem aktuellen Script verwendet wird. Ein Beispiel:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-alert(alert(document.all.tags("script")[0].language);
//-->
</script>
</head><body>
</body></html>

Das Beispiel gibt mit alert() aus, welche Script-Sprache fr die Ausgabe bewirkt hat. Das ist
derjenige Wert, der im <script>-Tag beim Attribut language= vergeben wurde. Da der MS
Internet Explorer mehrere Script-Sprachen beherrscht, kann dieser Befehl in manchen Fllen fr
Gewissheit sorgen, etwa wenn man ihn in eine If-Abfrage einbettet.

length
Speichert die Anzahl HTML-Tags einer HTML-Datei. Tags, die aus einem einleitenden und
einem abschlieenden Tag bestehen, werden als ein Tag gezhlt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Ein Absatz</p>

804

Kapitel 20: JavaScript Objekt-Referenz

<p>Noch ein Absatz</p>

<script type="text/javascript">
<!-alert("Diese Datei hat " + document.all.length + " HTML-Tags");
//-->
</script>
</body></html>

Das Beispiel zeigt eine vollstndige HTML-Datei mit Grundgerst, zwei Textabstzen und einem
Script. Innerhalb des Scripts wird mit alert() ausgegeben, wie viele HTML-Tags die Datei enthlt.

offsetHeight
Speichert die Hhe eines Elements. Das Beispiel gibt mit alert() die reale Hhe des <body>Tags der Datei aus. Das Ergebnis ist die tatschliche Anzeigehhe des Fensters, in dem das Dokument angezeigt wird. Die Eigenschaft lsst sich aber ebenso gut auf HTML-Elemente innerhalb
der angezeigten Inhalte anwenden:
<html><head><title>Test</title>
</head><body id="DieseDatei">
<script type="text/javascript">
<!-alert(document.all.DieseDatei.offsetHeight);
//-->
</script>
</body></html>

offsetLeft
Speichert den Abstand eines Elementes zum linken Rand des in der Eigenschaft offsetParent
gespeicherten Offset-Elternelementes. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="padding:20px">
<p id="Absatz">Hier etwas Text</p>
</div>
<script language="JavaScript" type="text/javascript">
<!-alert(document.all.Bereich.offsetLeft);
alert(document.all.Absatz.offsetLeft);
//-->
</script>
</body></html>

Im Beispiel wird ein <div>-Tag mit einem <p>-Tag innerhalb davon definiert. Damit ein wenig
innerer Abstand in die Sache kommt, wird beim <div>-Tag mit Hilfe einer Stylesheet-Angabe
ein Innenabstand definiert. Unterhalb dieser Befehle steht ein JavaScript, das die Abstnde der
beiden Elemente zum jeweiligen linken Rand des Offset-Elternelementes mit alert() ausgibt.
Das Offset-Elternelement des Elementes Bereich ist das Body-Element. Fr dieses Element wird

20.7 all

805

der Abstand zwischen Body und Bereich in der Eigenschaft offsetLeft gespeichert. Das OffsetElternelement des Elementes Absatz ist das Element Bereich selbst. In der Eigenschaft offsetLeft ist jetzt der Abstand vom linken Rand vom Element Bereich bis zum Element gespeichert.
Beachten Sie: Besitzt ein Element einen Innenabstand (padding), so ist im MS Internet Explorer
5.0 die Eigenschaft offsetLeft fehlerhaft, da der gesetzte Innenabstand in die Angabe mit einfliet. Das gilt auch fr Padding-Angaben, die in einem inneren Element definiert sind.

offsetParent
Speichert dasjenige Elternelement eines Elements, von dessen Positionierung die Positionierung
des Elements abhngt. offsetParent ist dabei eine Art Zeiger auf das bergeordnete Element.
Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des all-Objekts
notieren. Diese gelten dann fr das Element, auf das der Zeiger zeigt. Existiert kein OffsetElternelement, so hat die Eigenschaft offsetParent den Wert null. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="Fett">Hier etwas Text</b></a>
</div></td></tr></table>
<script type="text/javascript">
<!-var Eltern=document.all.Fett.offsetParent;
while (Eltern) {
document.write(Eltern.tagName+"<br>");
Eltern=Eltern.offsetParent;
}
//-->
</script>
</body></html>

Im Beispiel ist eine Tabelle notiert, in deren einziger Zelle weitere Elemente enthalten sind. Das
innerste Element ist das Element <b>..</b> mit dem id-Namen Fett. Im nachfolgenden
JavaScript-Bereich wird der Variablen Eltern das Offset-Elternelement des Elementes Fett mit
Hilfe von offsetParent zugewiesen. Die nachfolgende while-Schleife gibt zu jedem OffsetElternelement den Namen des Tags aus. Anschlieend wird der Variablen Eltern das OffsetElternelement des gerade angesprochenen Elementes zugewiesen. Die Schleife bricht ab, wenn
kein Offset-Elternelement mehr existiert. So wie im Beispiel die all-Objekteigenschaft tagName
auf offsetParent angewendet wird, lassen sich auch alle anderen Eigenschaften und Methoden
des all-Objekts auf das Element anwenden.
Im Unterschied zur Eigenschaft parentElement wird in der Eigenschaft offsetParent immer
dasjenige Element gespeichert, das die Position des Elements im Fenster festlegt.
Beachten Sie: Im MS Internet Explorer 4.0 ist das Offset-Elternelement von einer Tabellenzelle
immer die Tabellenzeile. Ab dem MS Internet Explorer 5.0 wird die Tabelle selbst als OffsetElternelement einer Zelle angesehen.

806

Kapitel 20: JavaScript Objekt-Referenz

offsetTop
Speichert den Abstand eines Elements zum oberen Rand des in der Eigenschaft offsetParent
gespeicherten Offset-Elternelements. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<div id="Bereich" style="padding:20px">
<p id="Absatz">Hier etwas Text</p>
</div>
<script type="text/javascript">
<!-alert(document.all.Bereich.offsetTop);
alert(document.all.Absatz.offsetTop);
//-->
</script>
</body></html>

Im Beispiel wird ein <div>-Tag mit einem <p>-Tag innerhalb davon definiert. Damit ein wenig
innerer Abstand in die Sache kommt, wird beim <div>-Tag mit Hilfe einer Stylesheet-Angabe
ein Innenabstand definiert. Unterhalb dieser Elemente ist ein JavaScript notiert, das mit alert()
die Abstnde der beiden Elemente zum oberen Rand des Offset-Elternelementes ausgibt.
Beachten Sie: Im MS Internet Explorer 5.0 wird in einem untergeordneten Element eine bestehende Padding-Angabe des bergeordneten Elementes nicht bercksichtigt, sofern sich kein Element vor dem abgefragten Element befindet.

offsetWidth
Speichert die Breite eines Elements. Das Beispiel gibt mit alert() die reale Breite des <body>Tags der Datei aus. Das Ergebnis ist die tatschliche Anzeigebreite des Fensters, in dem das
Dokument angezeigt wird. Die Eigenschaft lsst sich aber ebenso gut auf HTML-Elemente innerhalb der angezeigten Inhalte anwenden.
<html><head><title>Test</title>
</head><body id="DieseDatei">
<script type="text/javascript">
<!-alert(document.all.DieseDatei.offsetWidth);
//-->
</script>
</body></html>

outerHTML
Speichert den Inhalt eines HTML-Tags plus das Anfangs- und End-Tag mit allen Angaben. Ein
Beispiel:
<html>
<head>
<title>Test</title>

20.7 all

807

</head>
<body>
<a id="Verweis" href="javascript:alert(this.Verweis.outerHTML)">Verweis</a>
</body></html>

Das Beispiel enthlt einen Verweis, der beim Anklicken seinen eigenen vollstndigen HTMLKonstrukt mit alert() ausgibt. Die Eigenschaft outerHTML sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden, sondern immer erst abhngig von Aktionen wie Verweisklicks
oder Button-Klicks oder mit einem setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der Datei meldet der MS Internet Explorer 4.0 einen Laufzeitfehler.

outerText
Speichert den gleichen Wert wie innerText, kann jedoch beim ndern umgebende HTML-Tags
entfernen und durch Text ersetzen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
document.all.fett.outerText = document.all.fett.innerText;
}
//-->
</script>
</head><body>
<p>Text mit <b id="fett" onclick="Test()">fetter Schrift</b></p>
</body></html>

Das Beispiel enthlt einen Text mit einem als fett markierten Teil. Beim Anklicken des fetten
Teils wird die Funktion Test() aufgerufen. Diese Funktion ersetzt den Wert von outerText des
fetten Elements durch den Wert von innerText des gleichen Elements. Der Effekt ist, dass die
Formatierung mit <b>...</b> verloren geht, weil outerText intern die umgebende HTMLFormatierung mit speichert, innerText aber nicht.
Die Eigenschaft outerText sollten Sie nicht direkt beim Einlesen der HTML-Datei anwenden,
sondern immer erst abhngig von Aktionen wie Verweisklicks oder Button-Klicks oder mit
einem setTimeout() von einigen Sekunden davor. Bei Anwendung direkt beim Einlesen der
Datei meldet der MS Internet Explorer 4.0 einen Laufzeitfehler.

parentElement
Speichert das Elternelement eines Elements. parentElement ist dabei eine Art Zeiger auf das
bergeordnete Element. Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und
Methoden des all-Objekts notieren. Diese gelten dann fr das Element, auf das der Zeiger zeigt.
Existiert kein Elternelement, so hat die Eigenschaft parentElement den Wert null. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="Fett">Hier etwas Text</b></a>
</div></td></tr></table>

808

Kapitel 20: JavaScript Objekt-Referenz

<script type="text/javascript">
<!-var Eltern=document.all.Fett.parentElement;
while (Eltern) {
document.write(Eltern.tagName+"<br>");
Eltern=Eltern.parentElement;
}
//-->
</script>
</body></html>

Im Beispiel ist eine Tabelle notiert, in deren einziger Zelle weitere Elemente enthalten sind. Das
innerste Element ist das Element <b>..</b> mit dem Namen Fett. Im JavaScript-Bereich wird
der Variablen Eltern das Elternelement des Elementes Fett mit der Eigenschaft parentElement zugewiesen. Die nachfolgende while-Schleife gibt von jedem Elternelement den Namen
des Tags aus. Anschlieend wird der Variablen Eltern das Elternelement des gerade angesprochenen Elementes zugewiesen. Die Schleife bricht ab, wenn kein Elternelement mehr existiert. So
wie im Beispiel die all-Objekteigenschaft tagName auf parentElement angewendet wird, lassen
sich auch alle anderen Eigenschaften und Methoden des all-Objekts auf das Element anwenden.
Im Unterschied zur Eigenschaft offsetParent wird in der Eigenschaft parentElement immer
das unmittelbar bergeordnete Element gespeichert.

parentTextEdit
Speichert das nchsthhere Element in der Elementhierarchie, das Editieren von Text erlaubt.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
alert(document.all.Verweis.parentTextEdit.tagName);
}
//-->
</script>
</head><body>
<a id="Verweis" href="javascript:Test()">Editieren?</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird die Funktion Test()
aufgerufen. Diese Funktion gibt mit alert() den Namen desjenigen HTML-Tags aus, das aus
Sicht des Verweises das nchsthhere Element darstellt, das Editieren von Text erlaubt. Im Beispiel ist dies das <body>-Tag. Der Inhalt dieses Tags ist zwar nicht editierbar, aber es ist dasjenige
nchsthhere Tag, unterhalb dessen eidierbare Elemente wie Formular-Eingabefelder notiert
werden knnen.
Beachten Sie: MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

20.7 all

809

recordNumber
Speichert die Information, der wievielte Datensatz angezeigt wird. Dies bezieht sich auf das
Konzept der Datenanbindung. Zur Einfhrung in das Thema lesen Sie das Kapitel 21.5 ber
Datenanbindung (Microsoft). Ein Beispiel:
<tr>
<td><b>Vorname:</b></td>
<td><span id="Test" datafld="vorname">
</span><input type="button" value="Test"
onClick="alert(document.all.Test.recordNumber)">
</td>
</tr>

Das Beispiel stellt eine Tabellenzeile dar, in der ein Datenfeld ausgegeben wird (die brigen
Befehle zur Datenanbindung fehlen hier). Zu Testzwecken ist ein Button eingefgt, bei dessen
Anklicken die Datensatznummer des aktuell angezeigten Datensatzes ausgegeben wird.

sourceIndex
Speichert die Information, das wievielte HTML-Element ein Element innerhalb einer HTMLDatei ist. Das Beispiel enthlt verschiedene Elemente, unter anderem einen Absatz mit dem idNamen "Absatz". Auerdem enthlt das Beispiel einen Verweis. Beim Anklicken des Verweises
wird mit alert() ausgegeben, das wievielte Element der Absatz mit besagtem Namen innerhalb
der HTML-Datei ist. Im Beispiel ist es das 7. Element, denn es werden alle einleitenden und
allein stehenden HTML-Tags der gesamten HTML-Datei gezhlt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Etwas Text mit<br>Zeilenumbruch</p>
<p id="Absatz">HTML-Element, aber das wie vielte?</p>
<a href="javascript:alert(document.all.Absatz.sourceIndex)">Test</a>
</body></html>

tagName
Speichert den HTML-Tagnamen eines Elements. Das Beispiel enthlt einen Verweis. Beim
Anklicken des Verweises wird mit alert() der HTML-Tagname desjenigen Elements ausgegeben, das den id-Namen "DieseDatei" hat. Im Beispiel ist es das <body>-Tag. Ein Beispiel:
<html><head><title>Test</title>
</head><body id="DieseDatei">
<a href="javascript:alert(document.all.DieseDatei.tagName)">Test</a>
</body></html>

title
Speichert den Wert, der im Attribut title= eines Elements vergeben wurde. Dieses Attribut ist
beim MS Internet Explorer bei allen sichtbaren Elementen erlaubt und bewirkt beim Darberfahren mit der Maus, dass eine Art Tooltip (Hilfetext-Popup) zu dem Element angezeigt wird.
Ein Beispiel:

810

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
</head><body>
<p id="Absatz" title="Hilfe zum Text"
onClick="alert(document.all.Absatz.title)">Text</p>
</body></html>

Das Beispiel enthlt einen Textabsatz. Dieser Textabsatz erhlt mit dem Attribut title= einen
Tooltip-Text. Beim Darberfahren mit der Maus erscheint der Tooltip als kleines Popup-Fenster. Beim Anklicken des Absatzes wird der gleiche Text mit alert() ausgegeben.

click()
Bewirkt, dass ein Element angeklickt wird, so wie wenn der Anwender mit der Maus auf das
Element klickt. Erwartet keine Parameter. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a id="V1" href="javascript:alert(Verweis 1 geklickt)">Verweis 1</a><br>
<a href="javascript:document.all.V1.click()">Verweis 2</a><br>
</body></html>

Das Beispiel enthlt zwei Verweise. Beim Klicken auf den ersten Verweis wird mit alert() die
Meldung Verweis 1 geklickt ausgegeben. Beim Klicken auf den zweiten Verweis wird die
Methode click() auf den ersten Verweis angewendet. Dadurch wird dieser scriptgesteuert
angeklickt, und es wird trotz Klickens auf den zweiten Verweis die Meldung Verweis 1 geklickt
ausgegeben.

contains()
Ermittelt, ob ein Element ein bestimmtes anderes Element enthlt. Erwartet als Parameter den
id-Namen des gesuchten inneren Elements. Das Beispiel enthlt einen Verweis. Beim Anklicken
des Verweises wird die Funktion Test() aufgerufen. Diese Funktion berprft, ob das <body>Tag, das den id-Namen dieseDatei hat, ein Element enthlt, das den id-Namen Absatz hat.
Wenn ja, wird der innere Text dieses Elements mit alert() ausgegeben:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
if(document.all.dieseDatei.contains(Absatz))
alert(document.all.Absatz.innerText);
}
//-->
</script>
</head><body id="dieseDatei">
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

20.7 all

811

getAttribute()
Ermittelt, ob ein Element in seinem HTML-Tag ein bestimmtes Attribut enthlt oder nicht. Gibt
den Wert zurck, den das Attribut hat, falls das Attribut gefunden wird, ansonsten die leere
Zeichenkette "". Erwartet folgende Parameter:
Attribut = Name des gesuchten Attributs im HTML-Tag.
Gro-/Kleinschreibung = true bergeben, wenn bei dem Attribut Gro-/Kleinschreibung
unterschieden werden soll, oder false, wenn es egal ist, wie das Attribut geschrieben ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
if(document.all.Absatz.getAttribute("align","false") == "center")
document.all.Absatz.setAttribute("align","right","false");
}
//-->
</script>
</head><body>
<p id="Absatz" align=center>Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen
Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion
ermittelt mit getAttribute(), ob das Element mit dem Namen Absatz ein Attribut align
enthlt. Auerdem wird abgefragt, ob der Wert dieser Angabe gleich center ist. Da dies im Beispiel der Fall ist, wird die abhngige Anweisung ausgefhrt. Darin wird das Attribut align= mit
Hilfe von setAttribute() dynamisch gendert, sodass der Absatz hinterher rechtsbndig ausgerichtet ist.

insertAdjacentHTML()
Fgt zustzlichen HTML-Code vor oder nach einem Element ein. Erwartet folgende Parameter:
Position = Angabe, wo genau der HTML-Code hinzugefgt werden soll. bergeben Sie BeforeBegin, wenn der Code vor dem einleitenden HTML-Tag des Elements eingefgt werden
soll, AfterBegin, wenn der Code nach dem einleitenden Tag vor dem Inhalt eingefgt werden soll, BeforeEnd, wenn der Code am Ende des Inhalts vor dem abschlieenden Tag eingefgt werden soll, oder AfterEnd, wenn der Code hinter dem abschlieenden HTML-Tag
eingefgt werden soll.
Code = HTML-Code, der eingefgt werden soll.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!--

812

Kapitel 20: JavaScript Objekt-Referenz

var i = 0;
var Nummerierung = "";
function Nummerieren() {
Nummerierung = "<b>" + (i+1) + ".<\/b> ";
if(i < document.all.tags("p").length)
document.all.tags("p")[i].insertAdjacentHTML("AfterBegin",Nummerierung);
i = i + 1;
}
//-->
</script>
</head><body>
<p>Ein Absatz</p>
<p>Ein anderer Absatz</p>
<p>Noch ein Absatz</p>
<a href="javascript:Nummerieren()">Nummerieren</a>
</body></html>

Das Beispiel enthlt drei Abstze und einen Verweis. Bei jedem Klick auf den Verweis wird der
jeweils nchste Absatz dynamisch durchnummeriert. Dazu wird beim Klick auf den Verweis die
Funktion Nummerieren() aufgerufen. Diese Funktion verwaltet die beiden global definierten
Variablen i (Zhler fr die Nummerierung) und Nummerierung (HTML-formatierte Zeichenkette, die die Nummerierung hinzufgt). Solange der Zhler fr die Nummerierung kleiner ist
als die Anzahl der verfgbaren Abstze, wird im jeweils nchsten Absatz mit insertAdjacentHTML() hinter dem einleitenden <p>-Tag dynamisch der aktuelle Wert der Variablen Nummerierung eingefgt.

insertAdjacentText()
Fgt zustzlichen Text vor oder nach einem Element ein. Erwartet folgende Parameter:
Position = Angabe, wo genau der Text hinzugefgt werden soll. bergeben Sie BeforeBegin,
wenn der Text vor dem einleitenden HTML-Tag des Elements eingefgt werden soll, AfterBegin, wenn der Text nach dem einleitenden Tag vor dem Inhalt eingefgt werden soll,
BeforeEnd, wenn der Text am Ende des Inhalts vor dem abschlieenden Tag eingefgt werden soll, oder AfterEnd, wenn der Text hinter dem abschlieenden HTML-Tag eingefgt
werden soll.
Text = Text, der eingefgt werden soll.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ergaenzen() {
document.all.DynText.insertAdjacentText("BeforeEnd"," wird dynamisch!");
}
//-->
</script>
</head><body>
<p id="DynText">HTML</p>
<a href="javascript:Ergaenzen()">Ergaenzen</a>
</body></html>

20.7 all

813

Das Beispiel enthlt einen Absatz mit dem id-Namen DynText, der nur das Wort HTML enthlt. Beim Anklicken des Verweises unterhalb wird die Funktion Ergaenzen() aufgerufen. Diese
Funktion fgt vor dem abschlieenden Tag den Text wird dynamisch ein.

removeAttribute()
Entfernt ein bestimmtes Attribut aus einem bestimmten HTML-Tag. Erwartet folgende Parameter:
Attribut = Name des gesuchte Attributs im HTML-Tag.
Gro-/Kleinschreibung = true bergeben, wenn bei dem Attribut Gro-/Kleinschreibung
unterschieden werden soll, oder false, wenn es egal ist, wie das Attribut geschrieben ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
document.all.Absatz.removeAttribute("align","false");
}
//-->
</script>
</head><body>
<p id="Absatz" align=center>Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen
Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion
entfernt aus dem Absatz das Attribut align, sodass der Absatz hinterher linksbndig ausgerichtet ist, weil das die Normaleinstellung fr das <p>-Tag ist.
Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

scrollIntoView()
Positioniert den Inhalt im Anzeigefenster des Browsers so, dass ein bestimmtes Element angezeigt wird. Erwartet einen Parameter. bergeben Sie true, wenn der Inhalt so positioniert werden soll, dass das Element oben im Anzeigefenster erscheint, oder false, wenn das Element
unten im Anzeigefenster platziert sein soll. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
document.all.Absatz.scrollIntoView("true");
}
//-->
</script>
</head><body>

814

Kapitel 20: JavaScript Objekt-Referenz

<p id="Absatz">Ein Text</p>

<script type="text/javascript">
<!-for(i=1;i<100;i++)
document.write("<br>Zeile " + i);
//-->
</script>
<p><a href="javascript:Test()">Test</a></p>
</body></html>

Das Beispiel enthlt einen Textabsatz mit dem id-Namen Absatz. Dann schreibt das Beispiel in
einem Script-Bereich mit der write()-Methode 100 Zeilen in die Datei, damit die Datei zu Testzwecken schn lang ist. Unterhalb davon ist dann ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion positioniert den Inhalt des Anzeigefensters neu, und zwar so, dass der Textabsatz Absatz am oberen Fensterrand angezeigt wird.

setAttribute()
Fgt in einem bestimmten HTML-Tag ein bestimmtes Attribut hinzu. Erwartet folgende Parameter:
Attribut = Name des gewnschten Attributs.
Wert = die gewnschte Wertzuweisung fr die Zusatzangabe.
Gro-/Kleinschreibung = true bergeben, wenn bei dem Attribut Gro-/Kleinschreibung
unterschieden werden soll, oder false, wenn es egal ist, wie das Attribut geschrieben wird.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
document.all.Absatz.setAttribute("align","center","false");
}
//-->
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen zentriert ausgerichteten Absatz mit dem id-Namen Absatz und einen
Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion
fgt in dem Absatz das Attribut align hinzu, und zwar mit der Wertzuweisung center. Dadurch wird der Absatz hinterher zentriert ausgerichtet.

20.8 style

20.8

815

style

Methoden
getAttribute()
removeAttribute()
setAttribute()

(Stylesheet-Angabe ermitteln)
(Stylesheet-Angabe entfernen)
(Stylesheet-Angabe einfgen)

style: Allgemeines zur Verwendung

Das Objekt style liegt in der JavaScript-Objekthierarchie nach dem Objektmodell des MS
Internet Explorers ab Version 4.0 unterhalb des all-Objekts und regelt den Zugriff auf Stylesheet-Angaben, die fr ein HTML-Element definiert sind. Sie knnen alle Sheet-Angaben auslesen und dynamisch ndern. So knnen Sie HTML-Elemente mit Hilfe von Scripts nach Belieben
umformatieren.
Der Zugriff auf HTML-Elemente erfolgt dabei genau so wie beim all-Objekt (lesen Sie dazu
beim all-Objekt vor allem die Passagen HTML-Elemente ansprechen und HTML-Elemente mit
Namen ansprechen, Kapitel 23.7). Beim style-Objekt wird lediglich zustzlich style notiert
und dahinter die gewnschte Stylesheet-Angabe.
Auch im Document Object Model (DOM) der Version 2.0 gibt es das style-Objekt. Um auf die
Eigenschaften und Methoden des style-Objekts nach DOM-Syntax zugreifen zu knnen,
bentigen Sie einen Elementknoten. Um auf vorhandene Elementknoten im Dokument zuzugreifen, werden die Methoden des document-Objekts getElementById, getElementsByName
und getElementsByTagName verwendet. Ausgehend davon knnen Sie angesprochene Elemente
mit Hilfe von Scripts umformatieren.

Beispiel fr ltere Microsoft-Syntax (all):

<html><head><title>Test</title>
<script type="text/javascript">
<!-function MachGelb() {
document.all.DynText.style.backgroundColor = "yellow";
document.all.DynText.style.fontSize = "24pt";
document.all.DynText.style.padding = "5mm";
}
//-->
</script>
</head><body>
<p id="DynText">Das ist der Text</p>
<a href="javascript:MachGelb()">gelb</a>
</body></html>

Das Beispiel enthlt einen Textabsatz mit dem id-Namen DynText. Beim Anklicken des Verweises unterhalb wird die Funktion MachGelb() aufgerufen. Diese Funktion weist dem Textabsatz verschiedende Stylesheet-Angaben zu, zum Beispiel die Angabe fr die Hintergrundfarbe
(backgroundColor), und dabei den Wert fr gelb (yellow). Der Textabsatz erhlt dadurch
beim Anklicken des Verweises dynamisch eine gelbe Hintergrundfarbe und die brigen Atribute.

816

Kapitel 20: JavaScript Objekt-Referenz

Es ist egal, ob das betreffende HTML-Element vorher bereits Stylesheet-Angaben enthlt oder
nicht. Im Beispiel enthlt es keine.
Nach dem gleichen Schema knnen Sie alle CSS Stylesheet-Angaben behandeln, die der MS
Internet Explorer kennt. Die Tabelle Style-Eigenschaften listet Stylesheet-Angaben auf. Beachten
Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in JavaScript.

Beispiel fr DOM-Syntax:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function setCSS() {
for(var i = 0; i < document.getElementsByTagName("p").length; i++) {
document.getElementsByTagName("p")[i].style.border = "solid red 10px";
document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
document.getElementsByTagName("p")[i].style.color = "#FFFFFF";
document.getElementsByTagName("p")[i].style.fontSize = "36pt";
}
}
//-->
</script>
</head><body>
<p>Absatz</p>
<p>zweiter Absatz</p>
<p>dritter Absatz</p>
<p><a href="javascript:setCSS()">Stylesheet-Power!</a></p>
</body></html>

Das Beispiel enthlt vier Textabstze. Im letzten davon ist ein Verweis notiert, bei dessen Anklicken die Funktion setCSS() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift
in einer for-Schleife der Reihe nach mit document.getElementsByTagName("p")[i] auf alle
p-Elemente im Dokument zu. Mit style dahinter wird auf die CSS-Eigenschaften des Elements
zugegriffen. Dahinter folgt die gewnschte CSS-Eigenschaft. Dieser wird jeweils ein gltiger Wert
zugewiesen. Es ist egal, ob das betreffende HTML-Element vorher bereits Stylesheet-Angaben
enthlt oder nicht. Im Beispiel enthlt es keine.
Nach dem gleichen Schema knnen Sie alle CSS Stylesheet-Angaben behandeln, die CSS 2.0
kennt. Die Tabelle zu Style-Eigenschaften listet im folgenden Abschnitt Stylesheet-Angaben auf.
Beachten Sie dabei die Hinweise zur besonderen Schreibweise der Stylesheet-Angaben in
JavaScript.

Style-Eigenschaften
Eine wichtige Regel mssen Sie kennen: Wenn in einem Script eine CSS-Stylesheet-Angabe
ausgelesen oder verndert werden soll, entfllt der Bindestrich, und der erste Buchstabe des
Wortes hinter dem Bindestrich wird grogeschrieben. Die CSS-Stylesheet-Angabe backgroundcolor wird innerhalb eines JavaScripts also zu backgroundColor.

20.8 style

817

Die folgende Tabelle listet Style-Eigenschaften auf. Die Tabelle enthlt links die StylesheetAngabe, wie Sie sie in JavaScript im Zusammenhang mit dem Style-Objekt notieren mssen. In
der mittleren Spalte steht eine Kurzbeschreibung, was die Angabe bewirkt.
JavaScript-Angabe

Kurzbeschreibung

background

Hintergrundbild
Wasserzeichen-Effekt
Hintergrundfarbe
Hintergrundbild
Position des Hintergrundbilds
Wallpaper-Effekt
Rahmen
Rahmen unten
Rahmenfarbe unten
Rahmenart unten
Rahmendicke unten
Rahmenfarbe unten
Rahmen links
Rahmenfarbe links
Rahmenart links
Rahmendicke links
Rahmen rechts
Rahmenfarbe rechts
Rahmenart rechts
Rahmendicke rechts
Rahmenart
Rahmen oben
Rahmenfarbe oben
Rahmenart oben
Rahmendicke oben
Rahmendicke
Position von unten
Tabellenbeschriftung
Fortsetzung bei Textumfluss
Anzeigebereich eingrenzen
Textfarbe
Mauscursor
Schreibrichtung
Sichtbarkeit (ohne Platzhalter)
Darstellung leerer Tabellenzellen
Textumfluss
Schrift
Schriftart

backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
border
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
bottom
captionSide
clear
clip
color
cursor
direction
display
emptyCells
float
font
fontFamily

818

Kapitel 20: JavaScript Objekt-Referenz

JavaScript-Angabe

Kurzbeschreibung

fontSize

Schriftgre
Schriftlaufweite
Schriftstil
Schriftvariante
Schriftgewicht
Hhe eines Elements
Position von links
Zeichenabstand
Zeilenhhe
Listendarstellung
Grafik fr Aufzhlungslisten
Listeneinrckung
Darstellungstyp der Liste
Abstand/Rand
Abstand/Rand unten
Abstand/Rand links
Abstand/Rand rechts
Abstand/Rand oben
Maximalhhe
Maximalbreite
Mindexthhe
Mindestbreite
bergroer Inhalt- CSS-Beschreibung
Innenabstand
Innenabstand unten
Innenabstand links
Innenabstand rechts
Innenabstand oben
Seitenumbruch danach
Seitenumbruch davor
Positionsart
Position von rechts
Farbe fr 3-D-Effekte (Scrollbars)
Farbe fr Verschiebepfeile (Scrollbars)
Basisfarbe der Scroll-Leiste (Scrollbars)
Farbe fr Schatten (Scrollbars)
Farbe fr Oberflche (Scrollbars)
Farbe fr oberen und linken Rand (Scrollbars)
Farbe fr unteren und rechten Rand (Scrollbars)
Farbe fr freibleibenden Verschiebeweg (Scrollbars)
Tabellentyp
Ausrichtung
Textdekoration
Texteinrckung

fontStretch
fontStyle
fontVariant
fontWeight
height
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
overflow
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
position
right
scrollbar3dLightColor
scrollbarArrowColor
scrollbarBaseColor
scrollbarDarkshadowColor
scrollbarFaceColor
scrollbarHighlightColor
scrollbarShadowColor
scrollbarTrackColor
tableLayout
textAlign
textDecoration
textIndent

20.8 style
JavaScript-Angabe

Kurzbeschreibung

textTransform

Texttransformation
Position von oben
vertikale Ausrichtung
Sichtbarkeit (mit Platzhalter)
Breite eines Elements
Wortabstand
Schichtposition bei berlappung

top
verticalAlign
visibility
width
wordSpacing
zIndex

819

getAttribute()
Ermittelt, ob ein HTML-Element eine bestimmte Stylesheet-Angabe enthlt bzw. welchen Wert.
Gibt den Wert zurck, den die Stylesheet-Angabe hat, falls sie gefunden wird, ansonsten die leere
Zeichenkette "". Erwartet folgende Parameter:
Style-Angabe = die gesuchte Stylesheet-Angabe.
Gro-/Kleinschreibung = true bergeben, wenn bei der Style-Angabe Gro-/Kleinschreibung
unterschieden werden soll, oder false, wenn es egal ist, wie die Style-Angabe geschrieben ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
var x
if (document.all)
x = document.all.Absatz.style.getAttribute("fontSize","false");
else x=document.getElementById("Absatz").style.fontSize;
alert(x);
}
//-->
</script>
</head><body>
<p id="Absatz" style="font-size:18pt">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion ermittelt mit getAttribute(), ob das Element mit dem Namen Absatz eine Stylesheet-Angabe font-size
(CSS-Syntax) bzw. fontSize (JavaScript-Syntax) enthlt. Da dies der Fall ist, wird der zugewiesene Wert (18pt) ermittelt. Dieser Wert wird in einem Meldungsfenster ausgegeben.
Beachten Sie: Wenn Sie nach DOM-Syntax programmieren, gengt es wie im else-Zweig des
Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung abzufragen:
x = document.getElementById("Absatz").style.fontSize

820

Kapitel 20: JavaScript Objekt-Referenz

Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

removeAttribute()
Entfernt ein bestimmtes Attribut aus Stylesheet-Angaben. Erwartet folgende Parameter:
Attribut = die gewnschte Stylesheet-Angabe im HTML-Tag.
Gro-/Kleinschreibung = true bergeben, wenn bei der Stylesheet-Angabe Gro-/Kleinschreibung unterschieden werden soll, oder false, wenn es egal ist, wie die Stylesheet-Angabe
geschrieben ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
if (document.all)
document.all.Absatz.style.removeAttribute("color","false");
else document.getElementById("Absatz").style.color = "";
}
//-->
</script>
</head><body>
<p id="Absatz" style="color:red">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion entfernt aus dem
Absatz die Stylesheet-Angabe color, sodass der Absatz hinterher die rote Farbe verliert und die
Standardfarbe fr Text erhlt.
Beachten Sie: Wenn Sie nach DOM-Syntax programmieren, gengt es wie im else-Zweig des
Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu entfernen:
document.getElementById("Absatz").style.color = ""

Durch Zuweisung einer leeren Zeichenkette wird die Style-Eigenschaft dynamisch entfernt. Der
MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

setAttribute()
Fgt in einem bestimmten HTML-Tag eine bestimmte Stylesheet-Angabe hinzu. Erwartet folgende Parameter:
Style-Angabe = die gewnschte Stylesheet-Angabe.
Wert = die gewnschte Wertzuweisung fr die Stylesheet-Angabe.
Gro-/Kleinschreibung = true bergeben, wenn bei der Stylesheet-Angabe Gro-/Kleinschreibung unterschieden werden soll, oder false, wenn es egal ist, wie die Stylesheet-Angabe
geschrieben wird.

20.9 anchors

821

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
if (document.all)
document.all.Absatz.style.setAttribute("border","thin solid red","false");
else document.getElementById("Absatz").style.border = "thin solid red";
}
//-->
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<a href="javascript:Test()">Test</a>
</body></html>

Das Beispiel enthlt einen Absatz mit dem id-Namen Absatz und einen Verweis. Beim Anklicken des Verweises wird die Funktion Test() aufgerufen. Diese Funktion fgt in dem Absatz die
Stylesheet-Angabe border hinzu, und zwar mit der Wertzuweisung thin solid red. Dadurch
erhlt der Absatz einen dnnen roten Rahmen.
Beachten Sie: Wenn Sie nach DOM-Syntax programmieren, gengt es wie im else-Zweig des
Beispieles, die CSS-Eigenschaft des obigen Absatzes mit folgender Anweisung zu setzen:
document.getElementById("Absatz").style.border = "thin solid red"

Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

20.9

anchors

Eigenschaft
name
length
text
x
y

(Name des Verweisankers)

(Anzahl der Verweisanker)
(Text des Verweisankers)
(horizontale Position des Verweisankers)
(vertikale Position des Verweisankers)

anchors: Allgemeines zur Verwendung

Mit dem Objekt anchors, das in der JavaScript-Objekthierarchie unterhalb des documentObjekts liegt, haben Sie Zugriff auf Verweisanker, die in einer HTML-Datei definiert sind. Ein
Verweisanker in HTML ist beispielsweise:
<a name="top">Hier beginnt die Seite</a>

In JavaScript 1.0 ist es lediglich mglich, die Anzahl der Verweisanker in einer Datei auszulesen.
In JavaScript 1.2 sind jedoch weitere Eigenschaften implementiert worden. Es stehen folgende
Arten zur Verfgung, mit JavaScript einen bestimmten Verweisanker anzusprechen:

822

Kapitel 20: JavaScript Objekt-Referenz

Schema 1 / Beispiel 1:
document.anchors[#].Eigenschaft
document.anchors[0].name

Schema 2 / Beispiel 2:
document.anchors["Ankername"].Eigenschaft
document.anchors["oben"].text

Verweisanker knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1). Bei Verwendung von Indexnummern
geben Sie document.anchors an und dahinter in eckigen Klammern, den wievielten Anker in
der Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. den ersten Verweisanker sprechen Sie mit anchors[0] an, den zweiten Verweisanker mit anchors[1] usw.
Beim Zhlen gilt die Reihenfolge, in der die Verweisanker in der Datei notiert sind.
Mit Namen des Ankers als Indexnamen (wie in Schema 2 / Beispiel 2). Dabei notieren Sie wie
beim Ansprechen mit Indexnummer hinter document.anchors eckige Klammern. Innerhalb
der eckigen Klammern notieren Sie in Anfhrungszeichen den Namen, den Sie bei der Definition des Verweisankers im einleitenden <a>-Tag im Attribut name= angegeben haben.
Beachten Sie: Im MS Internet Explorer ist es nicht mglich, mit dem Schema 2 auf einen Verweisanker zuzugreifen. Sie knnen aber jeden Anker ber das all-Objekt und dessen Eigenschaften ansprechen.

name
Speichert den Namen eines Verweisankers. Mit document.anchors[0].name knnen Sie den
Namen eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthlt zunchst
HTML-Text mit einem Anker und einen Verweis. Beim Anklicken wird mit alert() der Name
des Verweises ausgegeben.
<html><head><title>Test</title>
</head><body>
<h1><a name="goethe">Meine Wahl</a></h1>
<pre>Ich liebe mir den heiteren Mann
Am meisten unter meinen Gsten:
Wer sich nicht selbst zum besten haben kann,
der ist gewiss nicht von den Besten.</pre>
<p><a href="javascript:alert(document.anchors[0].name)">Der Ankername</a></p>
</body></html>

Beachten Sie: Gegenwrtig ist es nur im Netscape 6.1 mglich, den Namen eines Ankers zu ndern.

20.9 anchors

823

length
Speichert die Information, wie viele Verweisanker eine HTML-Datei enthlt. Mit document.
anchors.length knnen Sie die Anzahl der Verweisanker in einer HTML-Datei ermitteln. Das
Beispiel enthlt zunchst HTML-Text mit einigen Ankern und schreibt am Ende mit
document.write() dazu, wie viele Anker in der Datei gefunden wurden.
<html><head><title>Test</title>
</head><body>
<h1><a name="oben">Anfang</a></h1>
Am Anfang war, naja, seien wir ehrlich, wir wissen es nicht.
<h2><a name="mitte">Weisheit</a></h2>
Wem das Wasser bis zum Halse steht, der darf den Kopf nicht haengen lassen.
<h2><a name="unten">Ende</a></h2>
<script type="text/javascript">
<!-document.write("Gefunden wurden " + document.anchors.length + " Anker")
//-->
</script>
</body></html>

text
Speichert den Text eines Verweisankers. Mit document.anchors[mitte].text knnen Sie
den Text eines Verweisankers zwischen <a> und </a> ermitteln. Das Beispiel enthlt zunchst
HTML-Text mit einigen Ankern und einen Verweis. Beim Anklicken des Verweises wird mit
alert() der Text des Ankers ausgegeben.
<html><head><title>Test</title>
</head><body>
<h1><a name="oben">Steuer</a></h1>
Der Mensch im gesellschaftlichen Leben kann sein Gut nicht genieen,
ohne es mit dem Staat zu teilen.
<h2><a name="mitte">Einsicht</a></h2>
Das Werk eines Philosophen ist viel leichter zu verbrennen, als zu widerlegen.
<h2><a name="unten">Ende</a></h2>
<p><a href="javascript:alert(document.anchors['mitte'].text)">mittlerer
Ankertext</a></p>
</body></html>

x
Mit document.anchors[0].x knnen Sie die horizontale Position eines Verweisankers in einer
HTML-Datei ermitteln. Das Beispiel enthlt einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom linken Fensterrand aus gesehen ausgegeben.
<html><head><title>Test</title>
</head><body>
<a name="oben">ein Anker</a>

824

Kapitel 20: JavaScript Objekt-Referenz

<p><a href="javascript:alert(document.anchors[0].x)">Position von links</a></p>

</body></html>

y
Mit document.anchors[0].y knnen Sie die vertikale Position eines Verweisankers in einer
HTML-Datei ermitteln. Das Beispiel enthlt einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom oberen Fensterrand aus gesehen ausgegeben.
<html><head><title>Test</title>
</head><body>
<a name="oben">ein Anker</a>
<p><a href="javascript:alert(document.anchors[0].y)">Position von oben</a></p>
</body></html>

20.10 applets
Eigenschaft
length

(Anzahl Java-Applets)

applets: Allgemeines zur Verwendung

Mit dem Objekt applets, das in der JavaScript-Objekthierarchie unterhalb des documentObjekts liegt, haben Sie Zugriff auf Java-Applets, die in einer HTML-Datei definiert sind. Die
einzige gewhnliche JavaScript-Objekteigenschaft des applet-Objekts ist die Anzahl der JavaApplets in einer Datei.
ber das applets-Objekts haben Sie jedoch auch Zugriff auf Code in Java-Applets. Dazu
mssen Sie das gewnschte Java-Applet ansprechen. Es stehen drei Arten zur Verfgung, mit
JavaScript ein bestimmtes Java-Applet anzusprechen:
Schema 1:
document.applets[#].Code();

Schema 2:
document.applets["AppletName"].Code();

Schema 3:
document.AppletName.Code();

Java-Applets knnen Sie auf drei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1): Bei Verwendung von Indexnummern geben Sie
document.applets an und dahinter in eckigen Klammern, das wievielte Java-Applet in der
Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. das erste Java-Applet sprechen Sie mit applets[0] an, das zweite Java-Applet mit applets[1] usw. Beim Zhlen gilt
die Reihenfolge, in der die <applet>-Befehle in der Datei notiert sind.

20.10 applets

825

Mit Namen des Java-Applets als Indexnamen (wie in Schema 2): Dabei notieren Sie wie beim
Ansprechen mit Indexnummer hinter document.applets eckige Klammern. Innerhalb der
eckigen Klammern notieren Sie in Anfhrungszeichen den Namen, den Sie bei der Definition
des Java-Applets im einleitenden <applet>-Tag im Attribut name= angegeben haben.
Mit dem Namen des Java-Applets direkt (wie in Schema 3): Dabei geben Sie mit document.AppletName den Namen an, den Sie bei der Definition des Java-Applets im einleitenden <applet>-Tag im Attribut name= angegeben haben.

Zugriff auf Code in Java-Applets

Sie knnen direkt auf den Code eines laufenden Java-Applets zugreifen. Dazu mssen Sie jedoch
den Quellcode des Java-Applets kennen (Dateien *.java vor dem Kompilieren mit dem JavaCompiler).
Das folgende Beispiel zeigt das Prinzip. Nhere Informationen zur Vorgehensweise und zum
Konzept des lebendigen Drahts (LiveWire) zwischen JavaScript und Java finden Sie auf den
Entwicklerseiten von Netscape (developer.netscape.com/).
Beispiel Teil 1 Quellcode eines Java-Applets:
import java.awt.Graphics;
import java.applet.Applet;
public class HelloWorld extends Applet
{
String myString ="Das ist mein Hallo-Text";
public void paint(Graphics g)
{
g.drawString(myString, 25, 20);
}
public void setString(String aString)
{
myString = aString;
repaint();
}
}

Beispiel Teil 2 HTML-Datei mit Java-Applet und JavaScript-Zugriff:

<html><head><title>Test</title>
</head><body>
<applet code="HelloWorld" name="Hallo" width=150 height=25>
</applet><br>
<form name="Eingabe" action="">
<input name="Text">
<input type="button" value="Test"
onclick="document.Hallo.setString(document.Eingabe.Text.value)">
</form>
</body></html>

826

Kapitel 20: JavaScript Objekt-Referenz

Im ersten Teil des Beispiels finden Sie den Quellcode eines Java-Applets, das einen Text am
Bildschirm ausgibt. Auf den Quellcode wird hier nicht nher eingegangen. Achten Sie lediglich
auf die letzte Methode, die in dem Quelltext definiert wird:
public void setString(String aString)

Damit wird der definierte Text letztendlich am Bildschirm ausgegeben. Im zweiten Teil des Beispiels wird angenommen, dass der Quellcode aus dem ersten Teil des Beispiels mit dem JavaCompiler zu einem Java-Applet mit dem Namen HelloWorld.class kompiliert wurde. Dieses
Java-Applet wird in der HTML-Datei mit dem <applet>-Tag eingebunden. Dabei erhlt das
Applet mit name= den Namen "Hallo".
Unterhalb davon wird ein Formular mit einem Eingabefeld und einem Button definiert. In dem
Eingabefeld lsst sich ein Text eingeben. Beim Klick auf den Button wird der eingegebene Text
an das Java-Applet gesendet, und zwar so, dass der Text, den das Applet anzeigt, durch den
eingegebenen Text ersetzt wird.
Dazu wird das Applet mit document.Hallo angesprochen. Dahinter wird keine JavaScriptMethode notiert, sondern direkt eine Methode aus dem Quellcode des Java-Applets, nmlich die
Methode setString(). Diese Methode erwartet als Parameter eine Zeichenkette (siehe Quellcode des Java-Applets). Das JavaScript bergibt als Zeichenkette den Wert aus dem Eingabefeld
des Formulars. Der Umgang mit Formularen in JavaScript wird beim forms-Objekt und seinen
Unterobjekten nher beschrieben (Kapitel 20.11).
Beachten Sie: Opera 5.12 und der MS Internet Explorer 5.0 Macintosh Edition interpretierten
dieses Beispiel nicht.

length
Speichert die Information, wie viele Java-Applets eine HTML-Datei enthlt. Mit document.
applets.length knnen Sie die Anzahl der Java-Applets in einer HTML-Datei ermitteln. Das
Beispiel enthlt zunchst HTML-Text mit einem Java-Applet und schreibt am Ende mit
document.write() dazu, wie viele Applets in der Datei gefunden wurden.
<html><head><title>Test</title>
</head><body>
<applet code="HelloWorld.class" name="Hallo" width="150" height="25">
</applet>
<script type="text/javascript">
<!-document.write("Gefunden wurden " + document.applets.length + " Java-Applets")
//-->
</script>
</body></html>

20.11 forms
Eigenschaften
action
encoding

(Empfngeradresse bei Absenden)

(Kodierungstyp)

20.11 forms
length
method
name
target

827

(Anzahl Formulare in Datei)

(bertragungsmethode)
(Formularname)
(Zielfenster fr CGI-Antworten)

Methoden
handleEvent()
reset()
submit()

(Ereignis verarbeiten)
(Formulareingaben lschen)
(Formular abschicken)

Unterobjekte
elements

forms: Allgemeines zur Verwendung

Mit dem Objekt forms, das in der JavaScript-Objekthierarchie unterhalb des document-Objekts
liegt, haben Sie Zugriff auf Formulare, die in einer HTML-Datei definiert sind. Es stehen folgende Arten zur Verfgung, mit JavaScript ein bestimmtes Formular anzusprechen:
Schema 1 / Beispiel 1:
document.forms[#].Eigenschaft
document.forms[#].Methode()
Ziel = document.forms[0].action;
document.forms[0].reset();

Schema 2 / Beispiel 2:
document.forms["FormularName"].Eigenschaft
document.forms["FormularName"].Methode
Ziel = document.forms["Testformular"].action;
document.forms["Testformular"].reset();

Schema 3 / Beispiel 3:
document.FormularName.Eigenschaft
document.FormularName.Methode()
Ziel = document.Testformular.action;
document.Testformular.reset();

Formulare knnen Sie auf drei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in
der Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h., das erste Formular
sprechen Sie mit forms[0] an, das zweite Formular mit forms[1] usw. Beim Zhlen gilt die
Reihenfolge, in der die <form>-Tags in der Datei notiert sind.

828

Kapitel 20: JavaScript Objekt-Referenz

Mit Namen des Formulars als Indexnamen (wie in Schema 2 / Beispiel 2): Dabei notieren Sie
wie beim Ansprechen mit Indexnummer hinter document.forms eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anfhrungszeichen den Namen, den Sie bei der
Definition des Formulars im einleitenden <form>-Tag im Attribut name= angegeben haben.
Mit dem Namen des Formulars direkt (wie in Schema 3 / Beispiel 3): Dabei geben Sie mit
document.FormularName den Namen an, den Sie bei der Definition des Formulars im einleitenden <form>-Tag im Attribut name= angegeben haben.
Die Eigenschaften und Methoden des forms-Objekts betreffen nur Bestandteile des gesamten
Formulars, etwa die Kodiermethode. Um auf einzelne Eingabefelder, Buttons usw. zuzugreifen,
steht das elements-Objekts mit seinen Unterobjekten zur Verfgung.

action
Speichert den Wert, der bei der Definition des Formulars im Attribut action= steht, also etwa
eine mailto-Angabe oder ein Server-Programm, das die Formulardaten verarbeitet. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Bestaetigung() {
var x = window.confirm("Dieses Formular geht an " + document.Testform.action);
return x;
}
//-->
</script>
</head><body>
<form name="Testform" action="mailto:[email protected]"
onSubmit="return Bestaetigung()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das
(Submit)-Buttons abschickt, wird die Funktion Bestaetigung() aufgerufen, weil im einleitenden <form>-Tag der Event-Handler onSubmit= notiert ist. Dieser ermittelt den Rckgabewert
der Funktion Bestaetigung(). Ist der Rckgabewert true, wird das Formular abgeschickt, ist
er false, wird es nicht abgeschickt.
Innerhalb der Funktion Bestaetigung() erhlt der Anwender mit der confirm-Methode ein
Dialogfenster, in dem ihm der Wert der Formularangabe action angezeigt wird. ConfirmFenster haben stets zwei Buttons, einen zum Besttigen und einen zum Abbrechen. Der Button
zum Besttigen gibt bei Anklicken true zurck, der Abbrechen-Button false. Der Rckgabewert wird im Beispiel in der Variablen x gespeichert. Diese wird wiederum von der Funktion
Bestaetigung() selbst zurckgegeben, denn der aufrufende Event-Handler erwartet ja einen
solchen Rckgabewert.
Beachten Sie: Die Verwendung von mailto: als Zieladresse eines Formulars verursacht hufig
Probleme. Mehr dazu im Kapitel 10.12.1 Formulare als E-Mail.

20.11 forms

829

Sie knnen als Zieladresse eines Formulars auch eine HTML-Datei angeben und Formulardaten
mittels JavaScript verarbeiten. Bercksichtigen Sie dabei, dass JavaScript nur dann Zugriff auf
Daten hat, wenn die Methode get verwendet wurde. Opera 5.12 zeigt im Protokoll file den
Quelltext der Zieldatei an.

encoding
Speichert den Wert, der bei der Definition des Formulars im Attribut encoding= steht, also zum
Beispiel text/plain. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CodeTyp() {
if(document.Testform.action.indexOf("@") > 0)
document.Testform.encoding = "text/plain";
else
document.Testform.encoding = "x-application/x-www-form-urlencoded";
return true;
}
//-->
</script>
</head><body>
<form name="Testform" action="mailto:[email protected]"
onSubmit="return CodeTyp()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das
(Submit)-Buttons abschickt, wird die Funktion CodeTyp() aufgerufen. Innerhalb der Funktion
CodeTyp() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt,
das eine E-Mail-Adresse verrt. Wenn ja, wird der Kodierungstyp auf text/plain gesetzt,
ansonsten auf den fr CGI-Programme blichen Kodiertyp x-application/x-www-formurlencoded. Die Funktion CodeTyp() gibt true zurck, denn der aufrufende Event-Handler
onSubmit im einleitenden <form>-Tag erwartet einen solchen Rckgabewert. Das Formular
wird nur abgeschickt, wenn der Rckgabewert true ist.
Um in einer Zeichenkette nach einem oder mehreren Zeichen zu suchen wie im Beispiel mit der
Methode indexOf(), lesen Sie den Abschnitt ber das string-Objekt.
Beachten Sie: Die Verwendung von mailto: als Zieladresse eines Formulars verursacht hufig
Probleme. Mehr dazu im Kapitel 10.12.1 Formulare als E-Mail.

length
Speichert die Anzahl der Formulare, die in einer Datei definiert sind. Im Beispiel werden zwei
kleine Formulare definiert. Am Ende wird mit Hilfe von document.write() zum Testen in die
Datei geschrieben, wie viele Formulare darin definiert sind.

830

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:[email protected]">
<input type="hidden" value="Guildo">
<input type="submit" value="Guildo">
</form>
<form name="Testform" action="mailto:[email protected]">
<input type="hidden" value="Heino">
<input type="submit" value="Heino">
</form>
<script type="text/javascript">
<!-document.write(document.forms.length + " Formulare");
//-->
</script>
</body></html>

method
Speichert den Wert, der bei der Definition des Formulars im Attribut method= steht, normalerweise get oder post. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Methode() {
if(document.Testform.action.indexOf("@") > 0)
document.Testform.method = "post";
else
document.Testform.method = "get";
return true;
}
//-->
</script>
</head><body>
<form name="Testform" action="mailto:[email protected]"
onSubmit="return Methode()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

Das Beispiel enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das
(Submit)-Buttons abschickt, wird die Funktion Methode() aufgerufen. Innerhalb der Funktion
Methode() wird ermittelt, ob in der action-Angabe des Formulars das Zeichen @ vorkommt,
das eine E-Mail-Adresse verrt. Wenn ja, wird die Versandmethode auf post gesetzt, ansonsten
auf get. Die Funktion Methode() gibt true zurck, denn der aufrufende Event-Handler onSubmit im einleitenden <form>-Tag erwartet einen solchen Rckgabewert. Das Formular wird nur
abgeschickt, wenn der Rckgabewert true ist. Um in einer Zeichenkette nach einem oder

20.11 forms

831

mehreren Zeichen zu suchen wie im Beispiel mit der Methode indexOf(), lesen Sie den Abschnitt 20.32 ber das string-Objekt.
Beachten Sie: Die Verwendung von mailto: als Zieladresse eines Formulares verursacht hufig
Probleme. Lesen Sie hierzu das Kapitel 10.12.1 Formulare als E-Mail.

name
Speichert den Namen eines Formulars. Das Beispiel enthlt ein Formular mit einem Eingabefeld.
Unterhalb des Formulars steht ein Script, das in das Eingabefeld zur Kontrolle den Namen des
Formulars schreibt. Im Beispiel ist das der Name Testform.
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="mailto:[email protected]">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
<script type="text/javascript">
<!-document.Testform.Eingabe.value = document.Testform.name;
//-->
</script>
</body></html>

target
Speichert, welches Fenster im Falle eines Framesets nach dem Absenden aktiv werden soll. Das
kann etwa bei Frame-Fenstern oder bei separaten Zweitfenstern interessant sein. Falls ein CGIProgramm HTML-Code an den Browser zurckschickt, zum Beispiel mit einem Danke fr das
Absenden des Formulars, dann erscheint die Ausgabe in dem Fenster mit dem angegebenen
Namen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ziel() {
document.Testform.target = "unten";
return true;
}
//-->
</script>
</head><body>
<form name="Testform" action="datei.htm"
onSubmit="return Ziel()">
<input type="text" size="40" name="Eingabe">
<input type="submit" value="Absenden">
</form>
</body></html>

832

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel nimmt an, dass sich die Datei mit dem Formular in einem Frameset befindet, in
dem es noch ein anderes Frame-Fenster gibt, und zwar eines mit dem Namen unten. Die Beispieldatei enthlt ein Formular. Wenn der Anwender das Formular durch Anklicken das SubmitButtons abschickt, wird die Funktion Ziel() aufgerufen. Innerhalb der Funktion Ziel() wird
bestimmt, dass die HTML-Ausgabe das action-Ziels im Frame-Fenster unten erfolgt.

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genauso wie handleEvent() beim window-Objekt (nhere Informationen siehe Kapitel
20.2).

reset()
Lscht alle Eingaben in einem Formular und hat die gleiche Wirkung wie ein Button, der in
HTML mit type="reset" definiert wurde. Das Beispiel enhlt ein Formular mit zwei Eingabefeldern. Unterhalb des Formulars steht ein Verweis. Beim Anklicken des Verweises werden alle
Eingaben in dem Formular gelscht.
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<a href="javascript:document.Testform.reset()">Formular leeren</a>
</body></html>

submit()
Sendet ein Formular ab und hat die gleiche Wirkung wie ein Button, der in HTML mit
type="submit" definiert wurde. Die JavaScript-Methode funktioniert seit Netscape 3.0 jedoch
nur noch, wenn das Formular von einem Programm weiterverarbeitet wird, d.h. wenn im einleitenden <form>-Tag bei der Angabe action= zum Beispiel ein CGI-Programm aufgerufen
wird. Wenn bei action= eine E-Mail-Adresse oder eine Newsgroup angegeben wird, funktioniert sie nicht. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="/cgi-bin/auswert.pl" method="get">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
</form>
<script type="text/javascript">
<!-function AbGehts()
{
document.Testform.submit();
}
window.setTimeout("AbGehts()",60000);

20.12 elements

833

//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit Eingabefeldern. Unterhalb davon steht ein JavaScript.
Darin wird mit der setTimeout()-Methode ein Countdown gestartet. Nach 60000 Millisekunden, also nach einer Minute, wird die Funktion AbGehts() aufgerufen. Diese schickt das Formular mit submit() ab.

20.12 elements
Eigenschaften
checked
defaultChecked
defaultValue
form
name
type
value

(angekreuzt)
(vorangekreuzt)
(voreingegebener Wert)
(Name des zugehrigen Formulars)
(Elementname)
(Elementtyp)
(Elementwert/-inhalt)

Methoden
blur()
click()
focus()
handleEvent()
select()

(Element verlassen)
(Element anklicken)
(auf Element positionieren)
(Ereignis verarbeiten)
(Text selektieren)

Unterobjekte
options

elements: Allgemeines zur Verwendung

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des forms-Objekts
liegt, haben Sie Zugriff auf Elemente eines Formulars. Es stehen folgende Arten zur Verfgung,
mit JavaScript ein bestimmtes Formularelement anzusprechen:
Schema 1 / Beispiel 1:
document.forms[#].elements[#].Eigenschaft
document.forms[#].elements[#].Methode()
document.forms[0].elements[0].value = "Unsinn";
document.forms[0].elements[0].blur();

834

Kapitel 20: JavaScript Objekt-Referenz

Schema 2 / Beispiel 2:
document.FormularName.Elementname.Eigenschaft
document.FormularName.Elementname.Methode()
document.Testformular.Eingabe.value = "Unsinn";
document.Testformular.Eingabe.blur();

Formularelemente knnen Sie auf folgende Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in
der Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h., das erste Formular
sprechen Sie mit forms[0] an, das zweite Formular mit forms[1] usw. Beim Zhlen gilt die
Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe elements. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Auch
dabei wird wieder bei 0 zu zhlen begonnen, d.h. das erste Element innerhalb eines Formulars
hat die Indexnummer 0, das zweite die Indexnummer 1 usw.
Mit Namen (wie in Schema 2 / Beispiel 2): Dabei geben Sie mit document.FormularName.ElementName den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars und des Elements in den entsprechenden HTML-Tags im Attribut name=
angegeben haben.
Beachten Sie: Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in
Wirklichkeit mehrere, allerdings sehr hnliche JavaScript-Objekte. So gibt es Objekte fr Eingabefelder, Auswahllisten, verschiedene Arten von Buttons. Alle diese Objekte werden jedoch im so
genannten elements-Array zusammengefasst. Alle diese Objekte werden auf die gleiche Art
und Weise angesprochen. Sie unterscheiden sich lediglich in ihren Eigenschaften und Methoden.
Bei den Eigenschaften und Methoden in diesem Abschnitt ist daher immer vermerkt, fr welche
Objekte sie gelten. Folgende Angaben werden dabei unterschieden:
Klick-Buttons, Checkboxen, Felder fr Datei-Upload, versteckte Elemente, Passwort-Felder, Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder.
Bei den Eigenschaften und Methoden des elements-Objekts wird jeweils angegeben, auf welche
dieser Elementtypen die Eigenschaft bzw. Methode anwendbar ist.
Gruppenelemente: Checkboxen und Radiobuttons bilden normalerweise Gruppen mehrerer
zusammengehriger Elemente, die eine gleiche Angabe zu name= haben und sich nur durch die
Angabe value= unterscheiden. Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Formular" action="" method="get">
<input type="radio" name="Favoriten" value="Heino">
<input type="radio" name="Favoriten" value="Gildo">
<input type="radio" name="Favoriten" value="Marianne">
</form>
<script type="text/javascript">
<!--

20.12 elements

835

document.Formular.Favoriten[2].checked = true;
//-->
</script>
</body></html>

Im Beispiel ist ein Formular mit mehreren Radiobuttons definiert. Die Gruppe zusammengehriger Radiobuttons hat den gleichen Namen. In JavaScript knnen Sie einzelne solcher Buttons
ansprechen, indem Sie das Element (als Gruppe) ansprechen. Hinter dem Elementnamen notieren Sie dann in eckigen Klammern die Indexnummer des gewnschten Elements. Im Beispiel
wird Favoriten[2] angesprochen. Das ist das dritte Element der Gruppe.
Beachten Sie: Auswahllisten kommen hier nicht vor. Um mit JavaScript auf solche Listen zuzugreifen, steht das Unterobjekt options zur Verfgung.

checked
Speichert, ob bzw. dass ein Radio- oder Checkbutton aktiviert ist oder nicht. Mgliche Werte
sind true bzw. 1 oder false bzw. 0. Anwendbar auf: Klick-Buttons, Checkboxen, Radiobuttons.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Weiter() {
if(document.Testform.Art[0].checked == true)
window.location.href="frmdatei.htm"
else if(document.Testform.Art[1].checked == true)
window.location.href="datei.htm"
else
alert("Bitte eine Auswahl treffen");
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit Frames
<input type="radio" name="Art" value="ohne"> ohne Frames
<br><input type="button" value="Starten" onClick="Weiter()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit zwei Radiobuttons. Der Anwender kann dabei auswhlen,
ob er die folgenden Seiten des Projekts mit Frames oder ohne Frames sehen will. Beim Klick auf
den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prft, ob einer der
beiden Radiobuttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen (location.href). Wenn keiner der beiden Radiobuttons aktiviert
ist, wird eine Fehlermeldung ausgegeben.
Beachten Sie: Sie knnen in Opera 5.12 unter Windows die Eigenschaft checked fr Radioboxen
erst dann ndern, wenn der Aufbau der Seite abgeschlossen ist.

836

Kapitel 20: JavaScript Objekt-Referenz

defaultChecked
Speichert, ob bzw. dass ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht.
Mgliche Werte sind true bzw. 1 oder false bzw. 0. Anwendbar auf: Checkboxen, Radiobuttons. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Weiter() {
if(document.Testform.Art[0].checked == true)
window.location.href="frminhalt.htm"
else
window.location.href="inhalt.htm"
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit DHTML
<input type="radio" name="Art" value="ohne"> ohne DHTML
<br><input type="button" value="Starten" onClick="Weiter()">
</form>
<script language="JavaScript" type="text/javascript">
<!-dhtml = false;
if(document.layers || document.all || document.getElementById) dhtml = true;
if(dhtml == true && document.Testform.Art[0].defaultChecked == false)
document.Testform.Art[0].checked = true;
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit zwei Radiobuttons. Der Anwender kann dabei auswhlen,
ob er die folgenden Seiten des Projekts mit Dynamischem HTML oder ohne sehen will. Beim
Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prft, ob
einer der beiden Radiobuttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird
eine unterschiedliche Datei aufgerufen (location.href).
Unterhalb des Formulars ist jedoch noch ein weiterer Script-Bereich notiert. Der Script-Bereich
steht unterhalb, weil der darin enthaltene Code sofort ausgefhrt und die Existenz des Formulars
aber bereits vorausgesetzt wird. Es wird abgefragt, ob eines der fr Dynamisches HTML
typischen Objekte document.layers oder document.all bzw. die typische Methode document.
getElementById verfgbar sind. Wenn ja, wird eine Variable dhtml auf true gesetzt. In einer
weiteren Abfrage wird mit defaultChecked berprft, ob die Auswahlmglichkeit, DHTML zu
nutzen, im Formular als Vorauswahl aktiviert ist oder nicht. Wenn nicht, und wenn DHTML
aber verfgbar ist (also wenn dhtml auf true gesetzt ist), wird die Auswahlmglichkeit fr
DHTML nachtrglich angekreuzt.
Beachten Sie: Opera 5.12 unter Windows interpretiert zwar die Eigenschaft defaultChecked,
fhrt das obige Beispiel jedoch nicht aus, da die nderung des Zustandes der Radiobox vor dem

20.12 elements

837

Abschluss des Ladens der Seite erfolgt. Opera 5.02 kennt die Eigenschaft defaultChecked noch
nicht.

defaultValue
Speichert den voreingestellten Text eines Eingabefeldes. Anwendbar auf: einzeilige Eingabefelder,
mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
URI: <input size="40" name="uri" value="http://www.xy.de/">
<input type="button" value="Gehe zu"
onClick="window.location.href=document.Testform.uri.value">
</form>
<script type="text/javascript">
<!-if(navigator.userAgent.indexOf("en") > 0)
{
document.Testform.url.defaultValue = "http://www.xy.com/";
document.Testform.url.value = document.Testform.url.defaultValue;
}
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit einem Eingabefeld und einem Button. Das Eingabefeld
wird mit http://www.xy.de/ vorbelegt. Beim Klick auf den Button wird der Wert aus dem
Eingabefeld an window.location.href zugewiesen. Dadurch wird die entsprechende Adresse
aufgerufen.
Bevor der Anwender jedoch berhaupt das Feld editieren kann, wird gleich beim Einlesen der Datei
unterhalb des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der
darin enthaltene Code sofort ausgefhrt und die Existenz des Formulars aber bereits vorausgesetzt
wird. Es wird abgefragt, ob in der Ausweisung des Browsers (navigator.userAgent) der
Bestandteil en vorkommt (indexOf()). Wenn ja, ist es ein englischsprachiger Browser. In diesem
Fall wird der defaultValue des Eingabefeldes auf http://www.xy.com/ gendert. Der genderte
Wert wird jedoch erst sichtbar, wenn er der Eigenschaft value zugewiesen wird. Dies geschieht in
der zweiten Anweisung. Das Eingabefeld des Formulars ist dann abhngig von der Sprache des
Browsers mit http://www.xy.de/ oder http://www.xy.com/ vorbelegt.
Beachten Sie: Opera 5.02 kennt die Eigenschaft defaultValue noch nicht. Trotzdem interpretiert auch dieser Browser das Beispiel. Das liegt daran, dass mit der Zuweisung defaultValue="http://www.xy.com/" der Wert der Eigenschaft manuell eingegeben wird. Sobald Sie
jedoch ein JavaScript vom Originalwert abhngig machen mchten, mssen Sie bercksichtigen,
dass diese Eigenschaft nicht existiert.

form
Speichert das Formular, innerhalb dessen sich das Element befindet. Hinter der Eigenschaft form
knnen Sie nochmals alle Eigenschaften und Methoden des forms-Objekts notieren. Anwendbar

838

Kapitel 20: JavaScript Objekt-Referenz

auf: Klick-Buttons, Checkboxen, Felder fr Datei-Upload, versteckte Elemente, Passwort-Felder,

Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Das Beispiel enthlt ein Formular mit einem Button. Beim Anklicken des Buttons
wird der Name des Formulars ausgegeben:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onClick="alert(document.Testform.derButton.form.name)">
</form>
</body></html>

name
Speichert den Namen des Formularelements, wie er in HTML bei der Definition des Elements
mit dem Attribut name= zugewiesen wurde. Anwendbar auf: Klick-Buttons, Checkboxen, Felder
fr Datei-Upload, versteckte Elemente, Passwort-Felder, Radiobuttons, Abbrechen-Buttons,
Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Das Beispiel enthlt ein
Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Buttons ausgegeben:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onClick="alert(document.Testform.derButton.name)">
</form>
</body></html>

type
Speichert den Elementtyp eines Formularelements. Anwendbar auf: Klick-Buttons, Checkboxen,
Felder fr Datei-Upload, versteckte Elemente, Passwort-Felder, Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Auto" value="Porsche"> Porsche<br>
<input type="radio" name="Auto" value="Mercedes"> Mercedes<br>
Name: <input size="30" name="Name"><br>
<input type="submit" name="Absendebutton" value="Absenden">
</form>
<script type="text/javascript">
<!-for(var i=0;i<document.Testform.length;++i)
{
document.write("<br>Elementname: " + document.forms[0].elements[i].name);
document.write(", Elementtyp: " + document.forms[0].elements[i].type);

20.12 elements

839

}
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit verschiedenen Elementen. Zu Testzwecken ist unterhalb
des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgefhrt und die Existenz des Formulars aber bereits vorausgesetzt wird.
In dem Script wird fr alle Elemente des Formulars mit document.write() der Elementname
und der Elementtyp in die Datei geschrieben.

value
Speichert den Wert, der in einem Formularelement eingegeben wurde bzw. diesem zugewiesen
ist. Anwendbar auf: Klick-Buttons, Checkboxen, Felder fr Datei-Upload, versteckte Elemente,
Passwort-Felder, Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Name: <input size="30" name="Name">
<input type="submit" name="Absendebutton" value="Absenden">
<input type="hidden" name="Browser" value="">
</form>
<script type="text/javascript">
<!-document.Testform.Browser.value = navigator.userAgent;
document.write(document.Testform.Browser.value);
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular, unter anderem mit einem versteckten Feld (<input type=
"hidden">). Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht
unterhalb, weil der darin enthaltene Code sofort ausgefhrt und die Existenz des Formulars aber
bereits voraussetzt. In dem Script wird dem Wert des versteckten Formularfeldes (document.
Testform.Browser.value) der Browser-Typ des Anwenders (navigator.userAgent) zugewiesen. Dieser dynamisch erzeugte Formularinhalt wird mit bertragen, wenn der Anwender das
Formular abschickt. In obigen Beispiel wird zur Demonstration der Wert des versteckten Feldes
mit der Methode document.write() in das Dokument geschrieben.

blur()
Entfernt den Cursor bzw. den Fokus von dem betreffenden Element. Erwartet keine Parameter.
Anwendbar auf: Klick-Buttons, Checkboxen, Felder fr Datei-Upload, versteckte Elemente,
Passwort-Felder, Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
</head><body>

840

Kapitel 20: JavaScript Objekt-Referenz

<form name="Testform" action="">

<input name="Feld" size="30" onFocus="this.blur()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einem Feld. Wenn der Anwender den Cursor in das Feld
setzen will, wird der Cursor mit this.blur() sofort wieder aus dem Feld entfernt. Durch das
Schlsselwort this wird der Bezug zum aktuellen Objekt hergestellt, in diesem Fall das Element
Feld, und die Methode auf das dieses Objekt angewendet. Eine solche Manahme kann beispielsweise sinnvoll sein, wenn Sie ein Feld ausschlielich als Ausgabefeld nutzen wollen, in dem
der Anwender nichts editieren knnen soll.
Beachten Sie: Nicht immer wird der Cursor aus dem Eingabefeld entfernt. Eine Eingabe von
Inhalt wird jedoch unterbunden. Opera 5.12 kennt zwar die Methode blur(), jedoch bleibt
diese ohne Wirkung. Unter Opera 5.02 erzeugt die Anwendung der Methode einen JavaScriptFehler.

click()
Erzeugt einen automatischen Klick auf den betreffenden Button. Erwartet keine Parameter. Anwendbar auf: Klick-Buttons, Checkboxen, Felder fr Datei-Upload, Abbrechen-Buttons, Absenden-Buttons. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input size="6" name="Todesjahr">
<input type="button" name="derButton" value="Weiter" onClick="Check()">
</form>
<script type="text/javascript">
<!-function Check() {
if(document.Testform.Todesjahr.value != "1832")
window.location.href = "nichts.htm";
else
window.location.href = "erfolg.htm";
}
window.setTimeout("document.Testform.derButton.click()",10000);
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll.
Wenn der Anwender nicht innerhalb von 10 Sekunden auf den Button (Weiter) klickt, geschieht
dies von alleine. Dafr sorgt die letzte Anweisung in dem Script, das unterhalb des Formulars
notiert ist. Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht
unterhalb, weil der darin enthaltene Code sofort ausgefhrt und die Existenz des Formulars aber
bereits vorausgesetzt wird. Mit document.Testform.derButton.click() wird dort das Klicken
des Buttons ohne Anwendereinwirkung bewerkstelligt. Der Aufruf der Methode ist in window.
setTimeout() mit einer Verzgerungszeit von 10000 Millisekunden, also 10 Sekunden, eingebettet.

20.12 elements

841

Beim Klick auf den Button, egal ob durch den Anwender oder automatisch, wird die Funktion
Check() aufgerufen. Diese Funktion berprft, ob in dem Eingabefeld fr das Todesjahr der
korrekte Wert steht. Abhngig davon wird eine andere Seite aufgerufen (location.href).

focus()
Setzt den Cursor bzw. den Fokus auf das betreffende Element. Erwartet keine Parameter.
Anwendbar auf: Klick-Buttons, Checkboxen, Felder fr Datei-Upload, versteckte Elemente,
Passwort-Felder, Radiobuttons, Abbrechen-Buttons, Absenden-Buttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Check() {
if(document.Testform.Todesjahr.value != "1832")
{
alert("Sie wissen es einfach nicht!");
document.Testform.Todesjahr.focus();
}
else
{
alert("Bravo!");
window.location.href = "erfolg.htm";
}
}
//-->
</script>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input size="6" name="Todesjahr">
<input type="button" value="Weiter" onClick="Check()">
</form>
</body></html>

Das Beispiel enthlt ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben
soll. Wenn der Anwender auf den Button (Weiter) klickt, wird die Funktion Check() aufgerufen. Diese Funktion berprft, ob in dem Eingabefeld fr das Todesjahr der korrekte Wert steht.
Abhngig davon wird entweder mit alert() eine bissige Meldung ausgegeben, oder es wird
Bravo ausgegeben und eine andere Seite aufgerufen (location.href). Wenn der Anwender
auf der Seite bleibt, weil die Eingabe fehlte oder falsch war, wird mit document.Testform.
Todesjahr.focus() auf das Eingabefeld fr das Todesjahr positioniert.

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nhere Informationen siehe dort
Kapitel 20.2).

842

Kapitel 20: JavaScript Objekt-Referenz

select()
Selektiert den gesamten in dem Feld enthaltenen Text. Erwartet keine Parameter. Anwendbar
auf: Passwort-Felder, einzeilige Eingabefelder, mehrzeilige Eingabefelder. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Kopieren Sie den folgenden Code in die Adresszeile Ihres Browsers:<br>
<input type="text" size="40" name="Code" value="javascript:top.close()">
</form>
<script type="text/javascript">
<!-document.Testform.Code.focus();
document.Testform.Code.select();
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit einem einzigen Feld. Das Feld wird mit dem Wert
"javascript:top.close()" vorbelegt (wohlgemerkt: das ist keine JavaScript-Anweisung, sondern nur ein Feldinhalt). Unterhalb des Formulars ist ein Script-Bereich notiert. Der ScriptBereich steht unterhalb, weil der darin enthaltene Code sofort ausgefhrt und die Existenz des
Formulars aber bereits vorausgesetzt wird. Dort wird zunchst mit document.Testform.Code.
focus() auf das Formularfeld positioniert. Denn das Selektieren von Text ist nur mglich, wenn
das Feld den Fokus hat. Der vorbelegte Text des Formularfeldes wird dann mit document.
Testform.Code.select() selektiert.

20.13 options
Eigenschaften
defaultSelected
length
selected
selectedIndex
text
value

(voreingestellte Auswahl)
(Anzahl der Auswahlmglichkeiten)
(aktuelle Auswahl)
(Index der aktuellen Auswahl)
(Auswahltext)
(Auswahlwert)

option: Allgemeines zur Verwendung

Mit dem Objekt options, das in der JavaScript-Objekthierarchie unterhalb des elementsObjekts liegt, haben Sie Zugriff auf Auswahllisten innerhalb eines Formulars. Sie knnen dabei
auf jede einzelne Auswahlmglichkeit der Auswahlliste zugreifen. Es stehen folgende Arten zur
Verfgung, mit JavaScript auf die Optionen einer Auswahlliste zuzugreifen:

20.13 options

843

Schema 1 / Beispiel 1:
document.forms[#].elements[#].options[#].Eigenschaft
document.forms[#].elements[#].Eigenschaft
document.forms[0].elements[0].options[4].text = "Unsinn";
document.forms[0].elements[0].selectedIndex = 2;

Schema 2 / Beispiel 2:
document.FormularName.Elementname.options[#].Eigenschaft
document.FormularName.Elementname.options.Eigenschaft
document.Testformular.Auswahl.options[4].text = "Unsinn";
document.Testformular.Auswahl.selectedIndex = 2;

Auswahllisten sind ganz normale Formularelemente. Auswahllisten sprechen Sie also an wie
andere Formularelemente auch:
Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in
der Datei Sie meinen. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. das erste Formular
sprechen Sie mit forms[0] an, das zweite Formular mit forms[1] usw. Beim Zhlen gilt die
Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe elements. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Auch
dabei wird wieder bei 0 zu zhlen begonnen, d.h. das erste Element innerhalb eines Formulars
hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie mssen dabei die Indexnummer der gewnschten Auswahlliste ermitteln.
Mit Namen (wie in Schema 2 / Beispiel 2): Dabei geben Sie mit document.FormularName.ElementName den Namen des Formulars und der Auswahlliste an, den Sie in HTML
mit <form name=> und <select name=> vergeben.
Hinzu kommt bei Auswahllisten in einigen Fllen die Angabe options fr einzelne Auswahlmglichkeiten der Auswahlliste. Es gibt Objekteigenschaften von options, bei denen Sie diese
Angabe, gefolgt von einer Indexnummer der gewnschten Auswahloption, angeben mssen. Die
erste Auswahlmglichkeit der Liste hat die Indexnummer 0, die zweite die Indexnummer 1 usw.
Andere Objekteigenschaften bentigen keine Angabe von options. Bei den Beispielen auf dieser
Seite wird jeweils gezeigt, wie Sie eine Eigenschaft des options-Objekts genau ansprechen.

Neue Elemente in Auswahlliste einfgen

Sie knnen innerhalb eines JavaScripts neue Elemente zu einer Auswahlliste hinzufgen oder
vorhandene Eintrge durch neue ersetzen. Dazu mssen Sie mit Hilfe von JavaScript ein neues
option-Objekt erzeugen und es einer Auswahlliste zuordnen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Hinzufuegen() {
NeuerEintrag = new
Option(document.Testform.neu.value,document.Testform.neu.value,false,true);

844

Kapitel 20: JavaScript Objekt-Referenz

document.Testform.Auswahl.options[document.Testform.Auswahl.length] =
NeuerEintrag;
document.Testform.neu.value = "";
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Ein Eintrag</option>
</select>
<br>
<input type="text" name="neu">
<input type="button" value="Hinzu" onClick="Hinzufuegen()">
</form>
</body></html>

Im Beispiel wird ein Formular definiert, das eine Auswahlliste mit einem Eintrag, ein Eingabefeld
und einen Button enthlt. In dem Eingabefeld kann der Anwender Eintrge eingeben, die er der
Auswahlliste hinzufgen mchte. Beim Klick auf den Button wird der eingegebene Wert als Eintrag in die Auswahlliste bernommen.
Dazu wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf notiert ist. Mit der ersten
Anweisung in dieser Funktion wird mit new Option ein neues option-Objekt erzeugt. Als Parameter wird unter anderem der Text bergeben, der bei dem neuen Listeneintrag angezeigt werden soll. Im Beispiel ist das der Wert des Eingabefeldes, das der Anwender ausgefllt hat (document.Testform.neu.value). Anschlieend mssen Sie angeben, an welcher Stelle in der Auswahlliste der neu erzeugte Eintrag eingefgt werden soll. Im obigen Beispiel soll der neue Eintrag
jeweils ans Ende der Liste angehngt werden. Dazu wird der neue Eintrag einer Indexnummer
der Auswahlliste zugeordnet, die mit der Eigenschaft length ermittelt wird. Diese Syntax knnen Sie stets benutzen, um Listeneintrge ans Ende einer Liste einzufgen. Doch wenn Sie, im
obigen Beispiel den ersten Eintrag der Liste mit dem neuen Eintrag berschreiben wollten, dann
msste innerhalb der Funktion Hinzufuegen() dieser Befehl:
document.Testform.Auswahl.options[document.Testform.Auswahl.length] = NeuerEintrag;

wie folgt lauten:

document.Testform.Auswahl.options[0] = NeuerEintrag;

Durch Angabe einer Indexnummer, die in der Liste schon vorkommt, berschreiben Sie also
einen Eintrag. new Option() kennt vier Parameter, von denen die drei letzten Parameter optional sind.
text = angezeigter Text in der Liste.
value = zu bertragender Wert der Liste (optional).
defaultSelected = true bergeben, wenn der Eintrag der defaultmig vorselektierte Eintrag
sein soll, sonst false (optional).
selected = true bergeben, wenn der Eintrag selektiert werden soll (optional). Opera 5.12
interpretiert die beiden letzten Parameter und Netscape 6.1 den letzten Parameter nicht.

20.13 options

845

Beachten Sie: Im Internet Explorer 5.0 knnen Sie nicht fensterbergreifend eine Auswahlliste
ndern. Der Browser reagiert darauf mit einer Fehlermeldung bzw. mit einem Absturz. Notieren
Sie deshalb die ndernde Funktion immer im gleichen Dokument wie die Liste und rufen Sie die
Funktion gegebenenfalls fensterbergreifend auf.

Elemente aus Auswahlliste lschen

Elemente knnen Sie lschen, indem Sie ihnen den Wert null zuordnen. Alternativ ist es auch
mglich, dem Option-Array eine neue Lnge zuzuweisen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Loeschen() {
document.Testform.Auswahl.options[document.Testform.Auswahl.length-1] = null;
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
<option>Auswahl 4</option>
<option>Auswahl 5</option>
</select>
<br>
<input type="button" value="Loeschen" onClick="Loeschen()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste mit einem Button. Beim Anklicken des
Buttons wird der jeweils letzte Eintrag aus der Auswahlliste gelscht. Dazu wird die Funktion
Loeschen() aufgerufen. Die erste Anweisung in der Funktion lscht einen Listeneintrag. Zum
Lschen eines Eintrags geben Sie die Indexnummer des zu lschenden Eintrags an. Im Beispiel
wird dabei document.Testform.Auswahl.length-1 angegeben das ist die Indexnummer des
jeweils letzten Eintrags. Genauso gut knnen Sie aber auch 0 angeben, um den ersten Listeneintrag zu lschen, 1, um den zweiten zu lschen usw. Der Lschvorgang kommt zustande, indem
Sie dem Listeneintrag den Wert null zuweisen.

defaultSelected
Speichert, ob bzw. dass eine Auswahlmglichkeit vorausgewhlt ist. Mgliche Werte sind true
oder false. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function AuswahlReset() {

846

Kapitel 20: JavaScript Objekt-Referenz

for(i=0; i<document.Testform.Auswahl.length; i++)

if(document.Testform.Auswahl.options[i].defaultSelected == true)
document.Testform.Auswahl.options[i].selected=true;
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>
<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option selected>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
<br>
<input type="button" value="Auswahl Reset" onClick="AuswahlReset()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste und einem Button. Bei der Auswahlliste
wird bei der HTML-Definition ein Eintrag mit selected als Vorauswahl eingestellt. Der
Anwender kann natrlich einen anderen Eintrag auswhlen. Wenn er jedoch auf den Button mit
der Aufschrift Auswahl Reset klickt, wird der Originalzustand wiederhergestellt. Dazu wird
beim Anklicken des Buttons die Funktion AuswahlReset() aufgerufen. Diese Funktion ermittelt in einer for-Schleife fr alle Auswahlmglichkeiten der Auswahlliste, ob es sich um die Vorauswahl handelt:
(if(document.Testform.Auswahl.options[i].defaultSelected==true))

Denn die Vorauswahl ist zu diesem Zeitpunkt durchaus noch gespeichert, auch wenn der
Anwender mittlerweile einen anderen Eintrag ausgewhlt hat. Wenn die voreingestellte Auswahl
gefunden ist, wird die aktuelle Auswahl auf den Indexwert der Vorauswahl gesetzt (document.Testform.Auswahl.options[i].selected=true). Dadurch wird der Originalzustand
wiederhergestellt.

length
Speichert die Anzahl der Eintrge einer Auswahlliste. Sie knnen die Anzahl der Eintrge sowohl
mit document.Formularname.Listenname.length als auch mit document.Formularname.
Listenname.options.length bestimmen. Beide Angaben enthalten die gleichen Werte. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Augsburg</option>

20.13 options

847

<option>Berlin</option>
<option>Chemnitz</option>
<option>Dortmund</option>
<option>Essen</option>
<option>Frankfurt</option>
<option>Giessen</option>
<option>Hamburg</option>
</select>
</form>
<script type="text/javascript">
<!-document.write("Waehlen Sie einen der " + document.Testform.Auswahl.length + "
Eintraege aus");
//-->
</script>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste. Unterhalb des Formulars ist ein ScriptBereich notiert. Unterhalb deshalb, weil die Anweisung in diesem Bereich sofort beim Einlesen
der Datei ausgefhrt wird und das Formular zu diesem Zeitpunkt bereits bekannt sein muss. Mit
document.write() wird dynamisch die Anzahl der Auswahlmglichkeiten der Auswahlliste in
die Datei geschrieben.

selected
Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckAuswahl() {
if(document.Testform.Auswahl.options[2].selected == true)
{
alert("Diese Auswahl gilt nicht");
return false;
}
return true;
}
//-->
</script>
</head><body>
<form name="Testform" onSubmit="return CheckAuswahl()" action="">
<select name="Auswahl" size="5">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
<br>

848

Kapitel 20: JavaScript Objekt-Referenz

<input type="submit">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste und einem Submit-Button zum Absenden des Formulars. Beim Absenden wird jedoch ber den Event-Handler onSubmit= im einleitenden <form>-Tag die Funktion CheckAuswahl() aufgerufen. Das Formular wird nur abgeschickt, wenn diese Funktion den Wert true zurckgibt. Die Funktion berprft, ob der
Anwender etwa auf die Idee gekommen ist, den Eintrag mit der Indexnummer 2 (Guildo Horn)
auszuwhlen. In diesem Fall wird eine Meldung ausgegeben und es wird false zurckgegeben,
wodurch das Formular nicht abgeschickt wird. Der Anwender kann eine neue Auswahl treffen.
Beachten Sie: Die Eigenschaft selected unterscheidet sich von selectedIndex durch die
Adressierung des gewnschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche
Aufgabe.

selectedIndex
Speichert, ob oder dass ein bestimmter Eintrag einer Auswahlliste selektiert ist. Wenn nichts ausgewhlt ist, dann ist in der Eigenschaft der Wert -1 gespeichert. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckAuswahl() {
if(document.Testform.Auswahl.selectedIndex == 2)
document.Testform.Auswahl.selectedIndex = 0;
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onChange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der
Event-Handler onChange= notiert. Dadurch wird jedes Mal, wenn der Anwender eine Auswahl
in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion berprft, ob
der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewhlt hat (Guildo Horn). Wenn
ja, whlt die Funktion selbststndig den Eintrag mit der Indexnummer 0 aus (Goethe). Das
heit, hinterher steht der Auswahlbalken auf diesem Eintrag. Der Anwender kann natrlich eine
neue Auswahl treffen.

20.13 options

849

Beachten Sie: Die Eigenschaft selectedIndex unterscheidet sich von selected durch die
Adressierung des gewnschten Listeneintrags. Ansonsten haben beide Eigenschaften die gleiche
Aufgabe.

text
Speichert den angezeigten Text eines Eintrags in einer Auswahlliste. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckAuswahl() {
if(document.Testform.Auswahl.selectedIndex == 2)
document.Testform.Auswahl.options[2].text = "Thomas Mann";
}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onChange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste. Im einleitenden <select>-Tag ist der
Event-Handler onChange= notiert. Dadurch wird jedes Mal, wenn der Anwender eine Auswahl
in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion berprft, ob
der Anwender etwa den Eintrag mit der Indexnummer 2 ausgewhlt hat (Guildo Horn). Wenn
ja, ndert die Funktion den angezeigten Text dieses Eintrags gemeinerweise auf Thomas
Mann. Die Auswahlmglichkeit bleibt selektiert.
Beachten Sie: Das ndern der Objekteigenschaft text so wie im obigen Beispiel ist erst seit
JavaScript 1.1 mglich (Netscape 3.x, MS Internet Explorer 4.x), das Auslesen dagegen wie ausgezeichnet seit JavaScript 1.0.

value
Speichert den internen Absendewert eines Eintrags in einer Auswahlliste. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckAuswahl() {
for(i=0;i<document.Testform.Auswahl.length;++i)
if(document.Testform.Auswahl.options[i].selected == true)
alert(document.Testform.Auswahl.options[i].value);

850

Kapitel 20: JavaScript Objekt-Referenz

}
//-->
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onChange="CheckAuswahl()">
<option value="Idiot!">Blindauswahl 1</option>
<option value="Dummkopf!">Blindauswahl 2</option>
<option value="Bratze!">Blindauswahl 3</option>
<option value="Schlampe!">Blindauswahl 4</option>
<option value="Bingo - gewonnen!">Blindauswahl 5</option>
</select>
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einer Auswahlliste. In den einzelnen <option>-Tags sind
mit value= interne Absendewerte notiert. Im einleitenden <select>-Tag ist auerdem der
Event-Handler onChange= notiert. Dadurch wird jedes Mal, wenn der Anwender eine Auswahl
in der Auswahlliste trifft, die Funktion CheckAuswahl() aufgerufen. Die Funktion ermittelt in
einer for-Schleife fr alle Auswahlmglichkeiten der Auswahlliste, ob die jeweilige Auswahl
selektiert wurde. Wenn ja, wird der interne Absendewert der Auswahlmglichkeit in einem Meldungsfenster ausgegeben.

20.14 images
Eigenschaften
border
complete
height
hspace
length
lowsrc
name
src
vspace
width

(Rahmen)
(Ladezustand)
(Hhe)
(horizontaler Abstand)
(Anzahl Grafiken)
(Vorschaugrafik)
(Name)
(Grafikdatei)
(vertikaler Abstand)
(Breite)

Methode
handleEvent()

(Ereignis verarbeiten)

images: Allgemeines zur Verwendung

Mit dem Objekt images, das in der JavaScript-Objekthierarchie unterhalb des documentObjekts liegt, haben Sie Zugriff auf alle Grafiken, die in einer HTML-Datei definiert sind. Dabei
knnen Sie auch vorhandene Grafiken dynamisch durch andere ersetzen. Ein neues GrafikObjekt wird automatisch erzeugt, wenn der Web-Browser eine Grafik in der HTML-Datei vor-

20.14 images

851

findet. Es stehen folgende Arten zur Verfgung, mit JavaScript eine bestimmte Grafik anzusprechen:
Schema 1 / Beispiel 1:
document.images[#].Eigenschaft
document.images[#].Methode()
Hoehe = document.images[0].height;

Schema 2 / Beispiel 2:
document.BildName.Eigenschaft
document.BildName.Methode()
Hoehe = document.Portrait.height;

Grafikobjekte knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.images an und dahinter in eckigen Klammern, die wievielte Grafik in
der Datei Sie meinen. Jede Grafik, die in HTML mit dem <img>-Tag notiert wurde, zhlt.
Beachten Sie, dass der Zhler bei 0 beginnt, d.h., die erste Grafik sprechen Sie mit images[0]
an, die zweite Grafik mit images[1] usw. Beim Zhlen gilt die Reihenfolge, in der die <img>Tags in der Datei notiert sind.
Mit dem Namen der Grafik (wie in Schema 2 / Beispiel 2): Dabei geben Sie mit document.BildName den Namen an, den Sie bei der Definition der Grafik im einleitenden <img>Tag im Attribut name= angegeben haben.
Fr Grafiken, die Sie nachtrglich mit JavaScript anzeigen mchten, mssen Sie jedoch eigene
neue Grafikobjekte in JavaScript erzeugen. Das ist besonders dann wichtig, wenn Sie Grafiken
dynamisch durch andere Grafiken ersetzen wollen. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-Zweitbild =new Image(104,102)
Zweitbild.src="cow2.gif";
document.write(<img src="+Zweitbild.src+" border="0" alt="Kuh">);
alert("Weite: "+Zweitbild.width+"\nHoehe: "+Zweitbild.height);
//-->
</script>
</body></html>

Ein neues Grafik-Objekt speichern Sie in einem selbst vergebenen Objektnamen, im obigen
Beispiel in dem Namen Zweitbild. Hinter dem Namen folgt ein Gleichheitszeichen. Dahinter
folgt das reservierte Wort new und der Aufruf der Objektfunktion Image() (erster Buchstabe
grogeschrieben!).
Anschlieend knnen Sie mit der neu erzeugten Instanz arbeiten. So knnen Sie der Instanz
ber die Objekteigenschaft src eine Grafikdatei zuordnen, im Beispiel die Datei blau.gif. Die
dritte Zeile im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik

852

Kapitel 20: JavaScript Objekt-Referenz

ersetzen knnen. Angenommen, in der HTML-Datei wurde als erste Grafik in der Datei mit
<img src="rot.gif"> ein rotes Bild eingebunden. Mit Hilfe von JavaScript knnen Sie nun,
beispielsweise in Abhngigkeit vom Klicken auf einen Verweis, dieses rote Bild durch ein anderes, blaues Bild ersetzen.
Die Objektfunktion Image() kennt die zwei optionalen Parameter.
width = Breite des Bildes
height = Hhe des Bildes
Diese Parameter knnen Sie beim Erzeugen des image-Objektes mit angeben. Zur Demonstration wird im Beispiel die Hhe und die Breite der Grafik mit ausgegeben. Netscape 6.1 und
Opera 5.12 interpretieren diese optionalen Parameter nicht und speichern jeweils den Wert 0 fr
die Hhe und Breite der Grafik.
Beachten Sie: Ein Anwendungsbeispiel fr den Einsatz dynamisch austauschbarer Grafiken finden Sie in Kapitel 19.7, Dynamische grafische Buttons.

border
Speichert die Angabe zum Rahmen um eine Grafik, wie sie mit der Angabe border= im <img>Tag mglich ist. Netscape speichert auch dann einen Wert, wenn die Angabe im HTML-Tag
fehlt. Der MS Internet Explorer speichert nur dann einen Wert, wenn im HTML-Tag ein Wert
angegeben ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Anna.border)">
<img src="anna.jpg" border="3" alt="Anna" name="Anna">
</a>
</body></html>

Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des
Verweises wird mit alert() der Wert ausgegeben, der in der Angabe border= gespeichert ist.
Beachten Sie: Im Netscape 6.1 ist diese Angabe fehlerhaft und enthlt als Rckgabewert -1. Das
ndern der Eigenschaft border ist bislang nur im MS Internet Explorer mglich. Im Netscape
6.1 wird der bestehende Rahmen bei einer nderung entfernt.

complete
Speichert die Information, ob eine Grafik vollstndig geladen ist oder nicht. Enthlt den Wert
true, wenn die Grafik geladen ist, und den Wert false, wenn die Grafik nicht oder nicht vollstndig geladen ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function BildCheck() {
var Status = "";
for(i = 0; i < document.images.length; ++i)
{

20.14 images

853

if(document.images[i].complete == true)
Status = Status + "Grafik " + (i+1) + " geladen\n";
else
Status = Status + "Grafik " + (i+1) + " nicht geladen\n";
}
Status = Status + document.images.length + " Grafiken im Dokument";
alert(Status);
}
//-->
</script>
</head><body>
<img src="berthold.gif" alt="Berthold"><br>
<img src="boris.gif" alt="Boris"><br>
<img src="bernd.gif" alt="Bernd"><br>
<a href="javascript:BildCheck()">Grafiken checken</a>
</body></html>

Das Beispiel enthlt mehrere Grafiken und einen Verweis. Beim Anklicken des Verweises wird
die Funktion BildCheck() aufgerufen, die im Dateikopf in einem Script-Bereich definiert ist.
Diese Funktion ermittelt in einer for-Schleife fr jede einzelne Grafik in der Datei (ermittelbar
mit document.images.length), ob diese geladen ist (if(document.images[i].complete ==
true)) oder nicht. Das Ergebnis wird in einer Variablen Status gesammelt. Am Ende wird der
Inhalt von Status mit alert() ausgegeben.
Beachten Sie: Die Eigenschaft complete wird von den Netscape-Browsern nicht mit den richtigen Werten belegt. Obwohl im vorliegenden Beispiel 2 Grafiken nicht geladen werden knnen,
wird im Netscape 6.1 fr alle Grafiken fr die Eigenschaft complete der Wert "true" angegeben. Die lteren Netscape-Browser bis zur Version 4 dagegen geben fr alle Grafiken in der
Eigenschaft complete den Wert "false" an. Opera 5.12 und der MS Internet Explorer interpretieren diese Eigenschaft richtig.

height
Speichert die Angabe zur Hhe einer Grafik, wie sie mit der Angabe height= im <img>-Tag
mglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="christa.gif" name="Christa" alt="Christa">
<script type="text/javascript">
<!-document.write(document.Christa.name + "<br>");
document.write(document.Christa.width + " x " + document.Christa.height + "
Pixel");
//-->
</script>
</body></html>

Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit
document.write() der Bildname und die Angaben zu Breite und Hhe der Grafik geschrieben.

854

Kapitel 20: JavaScript Objekt-Referenz

Beachten Sie: Im Netscape 6.1 wird in der Eigenschaft height der Wert 0 gespeichert, wenn das
height-Attribut im HTML-Tag fehlt. Das ndern der Eigenschaft height ist bislang nur im MS
Internet Explorer und im Netscape 6.1 mglich.

hspace
Speichert die Angabe zum horizontalen Abstand zwischen einer Grafik und ihren nebenliegenden Elementen, wie sie mit der Angabe hspace= im <img>-Tag mglich ist. Wenn die Angabe
im HTML-Tag fehlt, hat die Objekteigenschaft hspace den Wert 0. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Dorian.hspace)">
<img src="dorian.jpg" hspace="30" name="Dorian" alt="Dorian">
</a>
</body></html>

Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des
Verweises wird mit alert() der Wert ausgegeben, der in der Angabe hspace= gespeichert ist.
Beachten Sie: Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape
6.1 ist stets -1 und in Opera 5.12 0 gespeichert. Das ndern der Eigenschaft hspace ist bislang
nur im MS Internet Explorer mglich. Im Netscape 6.1 wird der horizontale Abstand entfernt.

length
Speichert die Anzahl der Grafiken in einer Datei. Das Beispiel enthlt mehrere Grafiken. Am
Ende steht ein Script-Bereich. Darin wird mit document.write() die Anzahl der Grafiken in die
Datei geschrieben:
<html><head><title>Test</title>
</head><body>
<img src="anna.jpg" alt="Anna"><br>
<img src="dorian.gif" alt="Dorian"><br>
<img src="christa.gif" alt="Christa"><br>
<script type="text/javascript">
<!-document.write("<hr>Seite enthlt " + document.images.length + " Grafiken");
//-->
</script>
</body></html>

lowsrc
Speichert die Angabe zur Vorab-Grafik, wie sie mit der Angabe lowsrc= im <img>-Tag mglich
ist. Wenn die Angabe im HTML-Tag fehlt, enthlt die Objekteigenschaft lowsrc keinen Wert.
Wenn eine Angabe zu lowsrc= vorhanden ist, enthlt die Objekteigenschaft bei Netscape den
vollstndigen URI, beim MS Internet Explorer, Netscape 6 und Opera 5.12 dageben genau die
Angabe, die in der Wertzuweisung an das HTML-Attribut steht.

20.14 images

855

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.images[0].lowsrc)">
<img src="franz.jpg" lowsrc="fraenzchen.jpg" alt="Fraenzschen und Franz">
</a>
</body></html>

Das Beispiel enthlt eine Grafik, die mit lowsrc= eine vorab anzuzeigende Grafik definiert und
in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit alert() der Wert
ausgegeben, der in der Angabe lowsrc= gespeichert ist.

name
Speichert den Namen einer Grafik, wie er mit der Angabe name= im <img>-Tag mglich ist.
Wenn die Angabe im HTML-Tag fehlt, enthlt die Objekteigenschaft name keinen Wert. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<img name="Anna" src="anna.jpg" width="271" height="265" border="0" alt="">
<script type="text/javascript">
<!-document.write("<br>" + document.images[0].name);
//-->
</script>
</body></html>

Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit
document.write() der Bildname der Grafik in die Datei geschrieben.
Beachten Sie: Im Netscape 6.1 knnen Sie die Eigenschaft name auch ndern.

src
Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit der Angabe src= im <img>Tag mglich ist. Diese Eigenschaft lsst sich ndern. Dadurch knnen Sie Grafiken dynamisch
durch andere ersetzen. Beachten Sie jedoch, dass Breite und Hhe ursprnglich in HTMLnotierten Grafiken fr alle dynamisch folgenden Grafiken bernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die
gleiche Hhe und Breite haben. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="hans.gif" width="400"
<script type="text/javascript">
<!-var b = new Array();
b[0] = new Image(); b[0].src =
b[1] = new Image(); b[1].src =
b[2] = new Image(); b[2].src =

height="300" alt="Hans">

"holger.gif";
"hilmar.gif";
"heiner.gif";

856

Kapitel 20: JavaScript Objekt-Referenz

b[3] = new Image(); b[3].src = "hans.gif";

var i = 0;
function Animation()
{
if(i > 3) i = 0;
document.images[0].src = b[i].src;
i = i + 1;
window.setTimeout("Animation()",1000);
}
window.setTimeout("Animation()",1000);
//-->
</script>
</body></html>

Das Beispiel enthlt eine Grafik namens ingo.gif. Unterhalb davon ist ein Script-Bereich notiert,
der dafr sorgt, dass die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt.
Dazu wird zunchst ein Array namens b notiert. Danach werden vier Elemente des Arrays b bestimmt. In allen vier Fllen handelt es sich um neue Grafikobjekte. Jedem der neuen Grafikobjekte wird mit der Eigenschaft src eine Grafikdatei zugewiesen. Beachten Sie, dass auch die Datei
hans.gif wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert
werden soll, muss fr sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.
Innerhalb der Funktion Animation(), die unterhalb der Funktion zum ersten Mal aufgerufen
wird. wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisng von
b[i].src an document.images[0].src. Da b[i] abhngig von der Variablen i ist, die bei
jedem Funktionsaufruf verndert wird, wird jedes Mal ein anderes der vier Bilder angezeigt. Am
Ende ruft sich die Funktion Animation() selbst wieder auf. So entsteht der Endlos-Effekt. Der
Aufruf ist in einen setTimeout()-Aufruf eingebunden, der den nchsten Aufruf jeweils um
1000 Millisekunden, also um eine Sekunde, verzgert.
Beachten Sie: Im Internet Explorer und im Netscape 6 knnen Sie auch unterschiedlich groe
Grafiken verwenden. In diesem Fall sollten Sie die Angaben zur Gre der Grafik weglassen bzw.
fr die Hhe die Eigenschaft height und fr die Weite die Eigenschaft width dynamisch
ndern.

vspace
Speichert die Angabe zum vertikalen Abstand zwischen einer Grafik und den Elementen oberhalb und unterhalb davon, wie sie mit der Angabe vspace= im <img>-Tag mglich ist. Wenn die
Angabe im HTML-Tag fehlt, hat die Objekteigenschaft vspace den Wert 0. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.Ina.vspace)">
<img src="ina.jpg" vspace="8" name="Ina" alt="Ina">
</a>
</body></html>

Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des
Verweises wird mit alert() der Wert ausgegeben, der in der Angabe vspace= gespeichert ist.

20.15 embeds

857

Beachten Sie: Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape
6.1 ist stets -1 und in Opera 5.12 0 gespeichert. Das ndern der Eigenschaft vspace ist bislang
nur im MS Internet Explorer mglich. Im Netscape 6.1 wird der vertikale Abstand entfernt.

width
Speichert die Angabe zur Breite einer Grafik, wie sie mit der Angabe width= im <img>-Tag mglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<img src="jochen.jpg" name="Jochen" alt="Jochen">
<script language="JavaScript" type="text/javascript">
<!-document.write(document.Jochen.name + "<br>");
document.write(document.Jochen.width + " x " + document.Jochen.height + " Pixel");
//-->
</script>
</body></html>

Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit
document.write() der Bildname und die Angaben zu Breite und Hhe der Grafik geschrieben.
Beachten Sie: Im Netscape 6.1 wird in der Eigenschaft width der Wert 0 gespeichert, wenn diese
Angabe im HTML-Tag fehlt. Das ndern der Eigenschaft width ist bislang nur im MS Internet
Explorer und im Netscape 6.1 mglich.

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie handleEvent() beim window-Objekt (nhere Informationen siehe Kapitel
20.2).

20.15 embeds
Eigenschaften
height
hspace
length
name
src
width
type
vspace

(Hhe des eingebetteten Objekts)

(horizontaler Abstand des eingebetteten Objekts)
(Anzahl eingebetteter Objekte)
(Name des eingebetteten Objekts)
(Quelle des eingebetteten Objekts)
(Breite des eingebetteten Objekts)
(Mime-Type des eingebetteten Objekts)
(vertikaler Abstand des eingebetteten Objekts)

858

Kapitel 20: JavaScript Objekt-Referenz

Methoden
play()
stop()

embeds: Allgemeines zur Verwendung

Mit dem Objekt embeds, das in der JavaScript-Objekthierarchie unterhalb des documentObjekts liegt, haben Sie Zugriff auf alle Multimedia-Elemente, die in einer HTML-Datei mit dem
Netscape-Element <embed>...</embed> definiert sind. Dabei knnen Sie z.B. den Abspielvorgang von Sound-Dateien oder Videos dynamisch starten. Ein neues Objekt dieser Art wird automatisch erzeugt, wenn der Web-Browser eine Multimedia-Referenz nach Netscape-Syntax in
der HTML-Datei vorfindet. Es stehen folgende Arten zur Verfgung, mit JavaScript eine
bestimmte Multimedia-Referenz anzusprechen:
Schema 1 / Beispiel 1:
document.embeds[#].Eigenschaft
document.embeds[#].Methode()
Breite = document.embeds[0].width;

Schema 2 / Beispiel 2:
document.embeds.["ObjektName"].Eigenschaft
document.["ObjektName"].Methode()
Breite = document.embeds["Demovideo"].width;

Solche Objekte knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.embeds an und dahinter in eckigen Klammern, das wievielte embedElement in der Datei Sie meinen. Jedes Objekt, das in HTML mit dem <embed>-Tag notiert
wurde, zhlt. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. die erste Multimedia-Referenz
sprechen Sie mit embeds[0] an, die zweite mit embeds[1] usw. Beim Zhlen gilt die Reihenfolge, in der die <embed>-Tags in der Datei notiert sind.
Mit dem Namen der Referenz (wie in Schema 2 / Beispiel 2): Dabei geben Sie mit document.embeds["ObjektName"] den Namen an, den Sie bei der Definition der MultimediaReferenz im einleitenden <embed>-Tag im Attribut name= angegeben haben.
Beachten Sie: Ob Sie ber das embeds-Objekt eine Multimedia-Referenz tatschlich mit JavaScript ansprechen knnen, hngt zumindest bei Netscape davon ab, wie das Plug-In beschaffen
ist, das diese Multimedia-Referenz anzeigt oder abspielt. Das Plug-In, also das Zusatzprogramm
oder Programm-Modul, das etwa fr das Abspielen eines Videos oder einer Sound-Datei im
Browser zustndig ist, muss ber eine Java-Schnittstelle verfgen. Andernfalls erhalten Sie bei
Netscape JavaScript-Fehlermeldungen von der Sorte Java object has no field or method named ....

height
Speichert die Hhe eines eingebundenen Multimedia-Objekts. Das Beispiel enthlt eine Multimedia-Referenz einer MIDI-Datei. Nachdem die HTML-Datei vollstndig geladen ist, wird in

20.15 embeds

859

einem Meldungsfenster die Hhe des referenzierten Objekts ausgegeben. Dazu ist im <body>Tag der Event-Handler onLoad notiert:
<html><head><title>Test</title></head>
<body onLoad="alert('Objekthhe: ' + document.embeds[0].height + ' Pixel')">
<embed src="breeze.mid" width="300" height="200"></embed><br>
</body></html>

hspace
Speichert die Angabe zum horizontalen Abstand zwischen einer Multimedia-Referenz und ihren
nebenliegenden Elementen, wie sie mit der Angabe hspace= im <embed>-Tag mglich ist. Ein
Beispiel:
<html><head><title>Test</title></head><body>
<embed src="yippee.wav" width="200" height="100" hspace="30"
align="left"></embed><br>
<a href="javascript:alert(document.embeds[0].hspace)">hspace anzeigen!</a>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz und einen Verweis. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe hspace= gespeichert ist.

length
Speichert die Anzahl der eingebetteten Objekte im Dokument. Das Beispiel enthlt eine Multimedia-Referenz. Nach dem Laden des Dokumentes wird mit alert() die Anzahl der Multimedia-Elemente ausgegeben.
<html><head><title>Test</title></head>
<body onLoad="alert(document.embeds.length)">
<embed src="breeze.mid" width="300" height="200" type="audio/x-midi"></embed>
</body></html>

name
Speichert den Namen eines eingebetteten Objektes, wie er mit der Angabe name= im einleitenden
<embed>-Tag vergeben worden ist. Wenn die Angabe im HTML-Tag fehlt, enthlt die Objekteigenschaft name keinen Wert. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<embed autostart="false" name="Musik" src="breeze.mid" width="300"
height="200"></embed>
<a href="javascript:document.embeds[Musik].play()">Starten</a>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds[Musik] das Multimedia-Element angesprochen und unter
Verwendung der Methode play() der Abspielvorgang gestartet.

860

Kapitel 20: JavaScript Objekt-Referenz

src
Datenquelle des Multimedia-Objektes. Im Beispiel ist eine Multimedia-Referenz definiert. Im
nachfolgenden JavaScript-Bereich wird mit der Methode link() ein Verweis ins Dokument geschrieben. Der Methode wird dabei als Verweisziel die Quelldatei der Multimedia-Referenz
durch Auslesen der src-Eigenschaft mit document.embeds["Musik"].src bergeben.
<html><head><title>Test</title></head>
<body>
<embed src="breeze.mid" autostart="true" name="Musik" width="300"
height="200"></embed> <br>
<script type="text/javascript">
<!-document.write("Download".link(document.embeds["Musik"].src));
//-->
</script>
</body></html>

width
Speichert die Breite eines eingebundenen Multimedia-Objekts. Das Beispiel enthlt eine Multimedia-Referenz einer MIDI-Datei. Nachdem die HTML-Datei vollstndig geladen ist, wird in
einem Meldungsfenster die Breite des referenzierten Objekts ausgegeben. Dazu ist im <body>Tag der Event-Handler onLoad notiert.
<html><head><title>Test</title></head>
<body onLoad="alert(Objektbreite: + document.embeds[0].width + Pixel)">
<embed src="breeze.mid" width="300" height="200"></embed><br>
</body></html>

type
Gibt den Mime-Type der Multimedia-Referenz an, so wie er im Attribut type= definiert wurde.
Wurde diese Eigenschaft nicht definiert, so enthlt die Eigenschaft null bzw. undefinied im
MS Internet Explorer. Ein Beispiel:
<html><head><title>Test</title></head>
<body onLoad="alert(Objekttyp: + document.embeds[0].type)">
<embed src="breeze.mid" width="300" height="200" type="audio/x-midi"></embed><br>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz einer MIDI-Datei. Nachdem die HTML-Datei
vollstndig geladen ist, wird in einem Meldungsfenster der Typ des referenzierten Objekts ausgegeben. Dazu ist im <body>-Tag der Event-Handler onLoad notiert.

vspace
Speichert die Angabe zum vertikalen Abstand zwischen einer Multimedia-Referenz und ihren
darber bzw. darunter liegenden Elementen, wie sie mit der Angabe vspace= im <embed>-Tag
mglich ist. Ein Beispiel:

20.15 embeds

861

<html><head><title>Test</title></head><body>
Eine Multimedia-Element<br>
<embed type="audio/x-wav" src="yippee.wav" width="200" height="100" vspace="30"
align="left"></embed><br>
<a href="javascript:alert(document.embeds[0].vspace)">Vertikalen Abstand
anzeigen!</a>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz und einen Verweis. Beim Anklicken des Verweises wird mit alert() der Wert ausgegeben, der in der Angabe vspace= gespeichert ist.

play()
Startet das Abspielen einer Multimedia-Referenz. Der Befehl spricht eine Schnittstelle des Abspielgertes an. Seine Wirkungsweise ist deshalb immer abhngig vom verwendeten Plug-In und
steht nicht in jedem Fall zur Verfgung. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<embed type="audio/x-midi" autostart="false" src="breeze.mid" width="300"
height="200"></embed><br>
<a href="javascript:document.embeds[0].play()">Starten</a>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds[0].play() das Multimedia-Element angesprochen und der
Abspielvorgang gestartet.

stop()
Beendet das Abspielen einer Multimedia-Referenz. Der Befehl spricht eine Schnittstelle des
Abspielgertes an. Seine Wirkungsweise ist deshalb immer abhngig vom verwendeten Plug-In
und steht nicht in jedem Fall zur Verfgung. Ein Beispiel:
<html><head><title>Test</title></head>
<body>
<embed type="audio/x-midi" autostart="true" src="breeze.mid" width="300"
height="200"></embed><br>
<a href="javascript:document.embeds[0].stop()">Stoppen</a>
</body></html>

Das Beispiel enthlt eine Multimedia-Referenz und einen Verweis. Nach Anklicken des Verweises wird mit document.embeds[0].stop() das Multimedia-Element angesprochen und der
Abspielvorgang beendet.

862

Kapitel 20: JavaScript Objekt-Referenz

20.16 layers
Eigenschaften
above
background
bgColor
below
clip
document
left
length
name
pageX
pageY
parentLayer
siblingAbove
siblingBelow
src
top
visibility
zIndex

(oberhalb liegender Layer)

(Hintergrundbild eines Layers)
(Hintergrundfarbe eines Layers)
(unterhalb liegender Layer)
(Anzeigebereich eines Layers)
(document-Objekt eines Layers)
(Links-Wert der linken oberen Ecke relativ)
(Anzahl Layer)
(Name eines Layers)
(Links-Wert der linken oberen Ecke absolut)
(Oben-Wert der linken oberen Ecke absolut)
(Objekt des Eltern-Layers)
(Objekt des oberhalb liegenden Layers)
(Objekt des unterhalb liegenden Layers)
(externe Datei eines Layers)
(Oben-Wert der linken oberen Ecke relativ)
(Sichtbarkeit eines Layers)
(Schichtposition eines Layers)

Methoden
captureEvents()
handleEvent()
load()
moveAbove()
moveBelow()
moveBy()
moveTo()
moveToAbsolute()
releaseEvents()
resizeBy()
resizeTo()
routeEvent()

(Ereignisse berwachen)
(Ereignisse behandeln)
(externe Datei laden)
(ber einen anderen Layer legen)
(unter einen anderen Layer legen)
(Bewegen um Anzahl Pixel)
(Bewegen zu Position relaitv)
(Bewegen zu Position absolut)
(Ereignisberwachung beenden)
(Breite und Hhe verndern um Anzahl Pixel)
(Breite und Hhe auf Anzahl Pixel setzen)
(Event-Handler-Hierarchie durchlaufen)

layers: Allgemeines zur Verwendung

Mit dem Objekt layers, das in der JavaScript-Objekthierarchie unterhalb des documentObjekts liegt, haben Sie Zugriff auf alle Layer, die in einer HTML-Datei definiert sind. Dieses
Objekt ist ebenso wie die entsprechenden HTML-Tags Netscape 4-spezifisch. Es ist die
Grundlage fr Dynamisches Positionieren bei Netscape 4.x (in Kapitel 21.4 finden Sie auch
weitere Beispiele).
Wichtig: Das layers-Objekt wird von Netscape ab Version 6.0 nicht mehr untersttzt. Es sollte
also nur noch aus Grnden der Rckwrtskompatibilitt zu Netscape 4.x Verwendung finden.

20.16 layers

863

Mit dem layers-Objekt arbeiten

Ein neues Layer-Objekt wird automatisch erzeugt, wenn der Web-Browser einen Layer in der
HTML-Datei vorfindet. Es stehen folgende Arten zur Verfgung, mit JavaScript einen bestimmten Layer anzusprechen:
Schema 1 / Beispiel 1:
document.layers[#].Eigenschaft
document.layers[#].Methode()
Farbe = document.layers[0].bgColor;

Schema 2 / Beispiel 2:
document.LayerName.Eigenschaft
document.LayerName.Methode()
Farbe = document.Kopfbereich.bgColor;

Layer knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1 / Beispiel 1): Bei Verwendung von Indexnummern
geben Sie document.layers an und dahinter in eckigen Klammern, den wievielten Layer in
der Datei Sie meinen. Jeder Layer, der in HTML mit dem <layer>-Tag oder mit dem
<ilayer>-Tag notiert wurde, zhlt. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. den ersten Layer sprechen Sie mit layers[0] an, den zweiten mit layers[1] usw. Beim Zhlen gilt
die Reihenfolge, in der die <layer>/<ilayer>-Tags in der Datei notiert sind.
Mit dem Namen des Layers (wie in Schema 2 / Beispiel 2): Dabei geben Sie mit document.LayerName den Namen an, den Sie bei der Definition der Grafik im einleitenden
<layer>/<ilayer>-Tag im Attribut name= angegeben haben.

above
Speichert die Information, welcher andere Layer ber einem Layer liegt. Die Eigenschaft above
liefert das Layer-Objekt des darber liegenden Layers zurck. Sie mssen also noch eine Eigenschaft wie name anhngen, um mehr ber den Layer zu erfahren. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="100" left="50" height="200" bgcolor="#FFFFE0">
Inhalt des gelben Layers
</layer>
<layer top="150" name="LilaLayer" left="100" height="200" bgcolor="#FFE0FF">
Inhalt des lila Layers
</layer>
<a href="javascript:alert(document.GelberLayer.above.name)">
Wer liegt ueber dem gelben Layer?</a><br>
<a href="javascript:alert(document.GelberLayer.above.top)">
Und wo beginnt er?</a><br>
</body></html>

864

Kapitel 20: JavaScript Objekt-Referenz

Im Beispiel werden zwei Layer mit den Namen GelberLayer und LilaLayer definiert. Auerdem sind zwei Verweise notiert. Der eine Verweis meldet beim Anklicken den Namen des Layers,
der ber dem gelben Layer liegt (document.GelberLayer.above.name), der andere Verweis
dessen Position von oben (document.GelberLayer.above.top). ber dem gelben Layer liegt
der lila Layer, da dieser in der Datei nach dem gelben Layer definiert wird.

background
Speichert das Hintergrundbild (Wallpaper) eines Layers. Das folgende Beispiel zeigt, wie Sie ein
solches Hintergrundbild dynamisch ndern knnen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Neubild = new Image();
Neubild.src = "back02.gif";
function Hintergrund() {
document.TestLayer.background.src="back02.gif";
}
//-->
</script>
</head><body>
<layer background="back03.gif" top="150" name="TestLayer"
left="100" height="200" bgcolor="#FFE0FF">
Inhalt des Layers
</layer>
<a href="javascript:Hintergrund()">Anderer Hintergrund</a>
</body></html>

Im Beispiel wird ein Layer mit einem Hintergrundbild definiert. Beim Klick auf den Verweis
wird das Hintergrundbild dynamisch durch ein anderes ersetzt. Beachten Sie, dass dazu in dem
Script-Bereich im Dateikopf bereits beim Einlesen der Datei mit Hilfe des images-Objekts die
Hintergrundgrafik registriert wird, die die andere dynamisch ersetzen soll.
Beim Klick auf den Verweis wird die Funktion Hintergrund() aufgerufen, die das Hintergrundbild dynamisch ndert. Hinter der Adressierung des Layers mssen Sie dabei background.src notieren und diesem Ausdruck die zuvor registrierte Grafik zuweisen.

bgColor
Speichert die Hintergrundfarbe eines Layers. Im Beispiel wird ein Layer definiert. Beim Klick auf
den Verweis wird die Funktion Hintergrund() aufgerufen, die im Dateikopf in einem ScriptBereich notiert ist. Diese Funktion fragt ab, welche Hintergrundfarbe der Layer gerade hat, und
weist dementsprechend eine andere zu.
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Farbe="aqua";
function Hintergrund() {
if(document.TestLayer.bgColorFarbe=="aqua")

20.16 layers

865

{ document.TestLayer.bgColor="yellow"; return; }
else
{ document.TestLayer.bgColor="aqua"; return; }
}
//-->
</script>
</head><body>
<layer top="150" name="TestLayer" left="100" height="200" bgcolor="aqua">
Inhalt des Layers
</layer>
<a href="javascript:Hintergrund()">Anderer Hintergrund</a>
</body></html>

Beachten Sie: Sie knnen die Hintergrundfarbe eines Layers nicht abfragen, da Netscape 4
merkwrdige bgColor-Werte zurckliefert, die nicht in das von Netscape dokumentierte
Schema (hexadezimale Angabe oder Farbname) passen.

below
Speichert die Information, welcher andere Layer unter einem Layer liegt. Die Eigenschaft below
liefert das Layer-Objekt des darunter liegenden Layers zurck. Sie mssen also noch eine Eigenschaft wie name anhngen, um mehr ber den Layer zu erfahren. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="100" left="50" height="200" bgcolor="#FFFFE0">
Inhalt des gelben Layers
</layer>
<layer top="150" name="LilaLayer" left="100"
height="200" bgcolor="#FFE0FF">
Inhalt des lila Layers
</layer>
<a href="javascript:alert(document.LilaLayer.below.name)">Wer liegt unter dem lila
Layer?</a><br>
<a href="javascript:alert(document.LilaLayer.below.left)">Und wo beginnt
er?</a><br>
</body></html>

Im Beispiel werden zwei Layer mit den Namen GelberLayer und LilaLayer definiert. Auerdem sind zwei Verweise notiert. Der eine Verweis meldet beim Anklicken den Namen des Layers,
der unter dem lila Layer liegt (document.LilaLayer.below.name), der andere Verweis dessen
Position von links (document.GelberLayer.below.left). Unter dem lila Layer liegt der gelbe
Layer, da in der Datei zuerst der gelbe und danach der lila Layer definiert wird.

clip
Speichert die Information, welcher Ausschnitt eines Layers angezeigt wird. Dabei gibt es folgende
Untereigenschaften:
clip.top speichert den Pixelwert oben der linken oberen Ecke des sichtbaren Layer-Bereichs,

866

Kapitel 20: JavaScript Objekt-Referenz

clip.left speichert den Pixelwert links der linken oberen Ecke des sichtbaren LayerBereichs,
clip.bottom speichert den Pixelwert unten der rechten unteren Ecke des sichtbaren LayerBereichs,
clip.right speichert den Pixelwert rechts der rechten unteren Ecke des sichtbaren LayerBereichs,
clip.width speichert die Breite des sichtbaren Layer-Bereichs (alternative Angabe zur Angabe einer rechten unteren Ecke),
clip.height speichert die Hhe des sichtbaren Layer-Bereichs (alternative Angabe zur Angabe einer rechten unteren Ecke).
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function MachKleiner()
{
with(document.MeinLayer)
{
if(clip.height > 0 && clip.width > 0)
{ clip.height-=10; clip.width-=10; }
}
}
function MachGroesser()
{
with(document.MeinLayer)
{
if(clip.height < 200 && clip.width < 200)
{ clip.height+=10; clip.width+=10; }
}
}
//-->
</script>
</head><body>
<layer name="MeinLayer" top="80" left="80" height="200" width="200"
bgcolor="#FFFFE0">
Inhalt des Layers
</layer>
<a href="javascript:MachKleiner()">Kleiner</a><br>
<a href="javascript:MachGroesser()">Groesser</a>
</body></html>

Im Beispiel ist ein Layer definiert. Da innerhalb der HTML-Definition keine Angaben zum clipBereich des Layers gemacht werden, wird der gesamte Layer angezeigt. Seine clip-Werte
ergeben sich aus der Gre des Layers. Intern sind also clip.top und clip.left gleich 0, und
clip.width, clip.height, clip.bottom und clip.right haben alle den Wert 200, weil sich
dies aus den Angaben height=200, width=200 in der HTML-Definition des Layers ergibt.

20.16 layers

867

Mit Hilfe von zwei Verweisen lsst sich im Beispiel der sichtbare Anzeigebereich des Layers verkleinern und wieder vergrern. Die Verweise rufen die Funktionen MachKleiner() bzw.
MachGroesser() auf, die in einem Script-Bereich im Dateikopf notiert sind. Die Funktion
MachKleiner() fragt ab, ob clip.width und clip.height grer 0 sind. Wenn ja, werden
beide Werte um 10 verringert, wodurch der Anzeigebereich des Layers von rechts unten um 10
Pixel beschnitten wird. Die Funktion MachGroesser() tut einfach das Umgekehrte.

document
Jeder Layer wird von Netscape wie ein eigenes kleines Dokument behandelt. Deshalb gibt es fr
Layer auch ein document-Objekt, das genauso funktioniert wie das globale document-Objekt.
Dadurch haben Sie Zugriff auf Dokument-Unterobjekte wie Grafiken, Formulare usw. Um solche Elemente innerhalb eines Layers anzusprechen, mssen Sie die Elemente ber das Layereigene document-Objekt ansprechen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function AndererInhalt()
{
document.MeinLayer.document.open();
document.MeinLayer.document.write("Jetzt ist der Verweis weg!");
document.MeinLayer.document.close();
}
//-->
</script>
</head><body>
<layer name="MeinLayer" bgcolor="#FFFFE0">
<a href="javascript:AndererInhalt()">Diesen Verweis ueberschreiben</a>
</layer>
</body></html>

Im Beispiel wird ein Layer definiert, der einen Verweis enthlt. Beim Anklicken wird die Funktion AndererInhalt() aufgerufen, die in einem Script-Bereich im Dateikopf notiert ist. Diese
Funktion benutzt typische Methoden des document-Objekts wie open(), write() und
close(). Das Besondere ist, dass es sich nicht um das globale Dokument handelt, sondern um
das Dokument, das der Layer darstellt. Dies wird durch eine Adressierung wie document.
MeinLayer.document erreicht.
Beachten Sie: Das Dokumentenmodell der Layer im Netscape hat auch Auswirkungen auf im
HTML-Dokument definierte Formulare, Grafiken oder Verweise. Bercksichtigen Sie hier, dass
alle Elemente, die sich in einem Layer befinden, zum Dokument des Layers gehren und nicht
zum HTML-Dokument. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="MeinLayer" bgcolor="#FFFFE0" left="300">
<img src="blau.gif" width="104" height="102" border="0" alt="">
</layer>
<script type="text/javascript">
<!--

868

Kapitel 20: JavaScript Objekt-Referenz

document.write("Anzahl der Bilder im HTML-Dokument: " + document.images.length);

document.write("<br>Anzahl der Bilder im Layer: " +
document.MeinLayer.document.images.length);
//-->
</script>
</body></html>

Im Beispiel wurde ein Layer definiert, der eine Grafik enthlt. Weitere Bilder enthlt die Datei
nicht. Danach folgt ein JavaScript-Bereich, der mit der Methode document.write die Anzahl
der Bilder im Dokument und im Layer ausgibt. Anhand des Beispieles sehen Sie, dass nur das
Dokument des Layers eine Grafik enthlt. Mit einer Adressierung wie document.MeinLayer.
document knnen Sie diese Grafik ansprechen und z.B. deren Eigenschaft src ndern.

left
Speichert den Pixelwert fr links von der linken oberen Ecke eines Layers. Bezug ist dabei das
bergeordnete Dokument. Das kann entweder das globale Dokument sein oder ein Layer,
innerhalb dessen der aktuelle Layer definiert ist. Fr absoluten Bezug siehe pageX. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer" left="100">
<layer name="Layerchen" left="200" width="300" bgcolor="#FFFFE0">
<a href="javascript:alert(document.SuperLayer.document.Layerchen.left)">LinksWert?</a>
</layer>
</layer>
</body></html>

Das Beispiel enthlt einen Layer innerhalb eines anderen Layers, beginnend bei Pixelposition 200
von links, mit einem Verweis. Beim Anklicken des Verweises wird der Linkswert des inneren
Layers ausgegeben. Der betrgt 200, obwohl der Layer optisch gesehen bei Position 300 beginnt,
weil der bergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu
addiert werden.

length
Speichert die Anzahl der Layer in einer Datei. Das Beispiel enthlt ein paar Layer zu Testzwecken
und schreibt dann mit document.write() die Anzahl der definierten Layer in die Datei.
<html><head><title>Test</title>
</head><body>
<layer></layer>
<layer></layer>
<layer></layer>
<layer></layer>
<script type="text/javascript">
<!-document.write("Auf dieser Seite gibt es " + document.layers.length + " Layer");
//-->
</script>
</body></html>

20.16 layers

869

name
Speichert den Namen eines Layers. Das Beispiel enthlt einen Layer mit einem Verweis. Beim
Anklicken des Verweises wird der Name des Layers in einem Meldungsfenster ausgegeben. Es ist
derjenige Name, der in HTML bei dem Attribut name= angegeben ist.
<html><head><title>Test</title>
</head><body>
<layer name="Layerchen" bgcolor="#FFFFE0">
<a href="javascript:alert(document.Layerchen.name)">Wie heisse ich denn?</a>
</layer>
</body></html>

pageX
Speichert den Pixelwert fr links von der linken oberen Ecke eines Layers. Bezug ist dabei das
globale Dokument, auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function NachLinks()
{
document.Layerchen.pageX = 0;
}
//-->
</script>
</head><body>
<layer name="Layerchen" left="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:NachLinks()">Nach links mit diesem Layer</a>
</layer>
</body></html>

Das Beispiel enthlt einen Layer, beginnend bei Pixelposition 300 von links, mit einem Verweis.
Beim Anklicken des Verweises wird die Funktion NachLinks() aufgerufen, die im Dateikopf in
einem Script-Bereich notiert ist. Diese Funktion ndert den Links-Wert des Layers auf 0, sodass
der Layer anschlieend ganz links beginnt.

pageY
Speichert den Pixelwert fr oberhalb der linken oberen Ecke eines Layers. Bezug ist dabei das
globale Dokument, auch wenn der aktuelle Layer innerhalb eines anderen Layers definiert ist.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function NachOben()
{
document.Layerchen.pageY = 0;

870

Kapitel 20: JavaScript Objekt-Referenz

}
//-->
</script>
</head><body>
<layer name="Layerchen" top="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:NachOben()">Nach oben mit diesem Layer</a>
</layer>
</body></html>

Das Beispiel enthlt einen Layer, beginnend bei Pixelposition 300 von oben, mit einem Verweis.
Beim Anklicken des Verweises wird die Funktion NachOben() aufgerufen, die im Dateikopf in
einem Script-Bereich notiert ist. Diese Funktion ndert den Links-Wert des Layers auf 0, sodass
der Layer anschlieend ganz links beginnt.

parentLayer
Speichert das Eltern-Objekt eines Layers. Das kann entweder das window-Objekt sein, oder, falls
der Layer innerhalb eines anderen Layers definiert ist, dieser bergeordnete Layer. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer">
<layer name="Layerchen" bgcolor="#FFFFE0">
<a
href="javascript:alert(document.SuperLayer.document.Layerchen.parentLayer.name)">
Super-Name?</a>
</layer>
</layer>
</body></html>

Das Beispiel enthlt einen Layer innerhalb eines anderen Layers. Beim Anklicken des Verweises
im inneren Layer wird der Name des Eltern-Objekts ausgegeben. Da das Elternobjekt in diesem
Fall der bergeordnete Layer ist, wird dessen Name, also SuperLayer, ausgegeben.

siblingAbove
Speichert denjenigen Layer, der aufgrund der Schichtposition, die z.B. mit z-index= in HTML
festgelegt wird, ber dem angesprochenen Layer liegt. Es handelt sich dabei um ein LayerObjekt, fr das seinerseits alle verfgbaren Eigenschaften und Methoden gelten. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="L1" left="100" top="100" z-index="3"
L1</layer>
<layer name="L2" left="120" top="120" z-index="1"
L2</layer>
<layer name="L3" left="140" top="140" z-index="4"
L3</layer>
<layer name="L4" left="140" top="140" z-index="2"
L4</layer>
<layer name="L5" left="100" top="180">

bgcolor="#FFFFE0">Layerinhalt
bgcolor="#FFFFD0">Layerinhalt
bgcolor="#FFFFC0">Layerinhalt
bgcolor="#FFFFB0">Layerinhalt

20.16 layers
<a href="javascript:alert(document.L1.siblingAbove.name)">L1
<a href="javascript:alert(document.L2.siblingAbove.name)">L2
<a href="javascript:alert(document.L3.siblingAbove.name)">L3
<a href="javascript:alert(document.L4.siblingAbove.name)">L4
</layer>
</body></html>

871

siblingAbove</a><br>
siblingAbove</a><br>
siblingAbove</a><br>
siblingAbove</a><br>

Das Beispiel definiert insgesamt fnf Layer. Der zuletzt definierte Layer enthlt vier Verweise.
Jeder Verweis gibt fr einen der ersten vier Layer den Namen desjenigen Layers aus, der aufgrund der z-index-Ordnung ber dem angesprochenen Layer liegt. Klickt man beispielsweise
auf den ersten Verweis, wird fr den Layer mit dem Namen L1 der Name des Layers ausgegeben,
der darber liegt. Das ist in dem Fall der Layer mit dem Namen L3, da der Layer L1 den zindex-Wert 3 hat und der Layer L3 den nchsthheren z-index-Wert, nmlich 4.

siblingBelow
Speichert denjenigen Layer, der aufgrund der Schichtposition, die z.B. mit z-index= in HTML
festgelegt wird, unter dem angesprochenen Layer liegt. Es handelt sich dabei um ein LayerObjekt, fr das seinerseits alle verfgbaren Eigenschaften und Methoden gelten. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="L1" left="100" top="180">
<a href="javascript:alert(document.L2.siblingBelow.name)">L2 siblingBelow</a><br>
<a href="javascript:alert(document.L3.siblingBelow.name)">L3 siblingBelow</a><br>
<a href="javascript:alert(document.L4.siblingBelow.name)">L4 siblingBelow</a><br>
<a href="javascript:alert(document.L5.siblingBelow.name)">L5 siblingBelow</a><br>
</layer>
<layer name="L2" left="100" top="100" z-index="3" bgcolor="#FFFFE0">Layerinhalt
L2</layer>
<layer name="L3" left="120" top="120" z-index="1" bgcolor="#FFFFD0">Layerinhalt
L3</layer>
<layer name="L4" left="140" top="140" z-index="4" bgcolor="#FFFFC0">Layerinhalt
L4</layer>
<layer name="L5" left="140" top="140" z-index="2" bgcolor="#FFFFB0">Layerinhalt
L5</layer>
</body></html>

Das Beispiel definiert insgesamt fnf Layer. Der erste Layer enthlt vier Verweise. Jeder Verweis
gibt fr einen der folgenden vier Layer den Namen desjenigen Layers aus, der aufgrund der zindex-Ordnung unter dem angesprochenen Layer liegt. Klickt man beispielsweise auf den ersten
Verweis, wird fr den Layer mit dem Namen L2 der Name des Layers ausgegeben, der darunter
liegt. Das ist in dem Fall der Layer mit dem Namen L5, da der Layer L1 den z-index-Wert 3 hat
und der Layer L2 den nchstniedrigeren z-index-Wert, nmlich 2.

src
Speichert die externe Datei, die in einen Layer eingebunden ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="extern" left="50" top="30" width="600" height="200" src="news.htm">

872

Kapitel 20: JavaScript Objekt-Referenz

</layer>
<layer left="50" top="250">
<script type="text/javascript">
<!-document.write("<hr><b>Eingebunden wurde die Datei: <\/b>" +
window.document.extern.src);
//-->
</script>
</layer>
</body></html>

Das Beispiel enthlt zwei positionierte Layer. Der Inhalt des ersten Layers ist eine externe Datei
namens news.htm. Im zweiten Layer wird mit Hilfe von document.write() die genaue Adresse
der externen Datei in den Layerbereich geschrieben. Beachten Sie, dass in diesem Fall window.document.extern.src zur Adressierung des anderen Layers verwendet werden muss, da
document.extern.src sich sonst nur auf den aktuellen Layer beziehen wrde und dieser kein
Element namens extern enthlt.

top
Speichert den Pixelwert fr oberhalb der linken oberen Ecke eines Layers. Bezug ist dabei das
bergeordnete Dokument. Das kann entweder das globale Dokument sein oder ein Layer,
innerhalb dessen der aktuelle Layer definiert ist. Fr absoluten Bezug siehe pageY. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="SuperLayer" top="100">
<layer name="Layerchen" top="200" width="300" bgcolor="#FFFFE0">
<a href="javascript:alert(document.SuperLayer.document.Layerchen.top)">Oben-Wert?</a>
</layer>
</layer>
</body></html>

Das Beispiel enthlt einen Layer innerhalb eines anderen Layers, beginnend bei Pixelposition 200
von oben, mit einem Verweis. Beim Anklicken des Verweises wird der Oben-Wert des inneren
Layers ausgegeben. Der betrgt 200, obwohl der Layer optisch gesehen bei Position 300 beginnt,
weil der bergeordnete Layer ja schon bei 100 beginnt und die 200 des inneren Layers dazu
addiert werden.

visibility
Speichert die Information, ob bzw. dass ein Layer sichtbar ist oder nicht. Im Beispiel werden
zwei positionierte Layer definiert. Jeder der beiden Layer enthlt einen Verweis, bei dessen
Anklicken der jeweils andere Layer aus- und wieder eingeblendet wird. Dazu wird jeweils die
Funktion EinAus() aufgerufen, die im Dateikopf notiert ist. Als Parameter wird die Indexnummer des jeweils anderen Layers bergeben. Die Eigenschaft visibility kann die drei Werte hide
(verstecken), show (anzeigen) und inherit (wie vom Eltern-Layer vererbt) haben.
<html><head><title>Test</title>
<script type="text/javascript">
<!--

20.16 layers

873

function EinAus(Nummer)
{
if(window.document.layers[Nummer].visibility == "show")
{ window.document.layers[Nummer].visibility = "hide"; return; }
if(window.document.layers[Nummer].visibility == "hide")
{ window.document.layers[Nummer].visibility = "show"; return; }
}
//-->
</script>
</head><body>
<layer name="GelberLayer" left="50" top="30" width="200" height="200"
visibility="show" bgcolor="#FFFFE0">
<a href="javascript:EinAus(1)">anderer Layer ein/aus</a>
</layer>
<layer name="LilaLayer" left="250" top="30" width="200" height="200"
visibility="show" bgcolor="#FFE0FF">
<a href="javascript:EinAus(0)">anderer Layer ein/aus</a>
</layer>
</body></html>

zIndex
Speichert die Schichtposition eines Layers. Im Beispiel wird ein Layer definiert, der per HTMLAttribut einen z-index-Wert von 527 erhlt. Innerhalb des Layers ist ein Verweis notiert. Beim
Anklicken des Verweises wird der z-Index-Wert des Layers in einem Meldungsfenster ausgegeben.
<html><head><title>Test</title>
</head><body>
<layer z-index="527" name="EinLayer">
<a href="javascript:alert(window.document.EinLayer.zIndex)">z-index?</a>
</layer>
</body></html>

captureEvents()
berwacht Anwenderereignisse in einem Layer. Funktioniert genau so wie captureEvents()
beim window-Objekt (nhere Informationen siehe Kapitel 20.3). Der einzige Unterschied ist,
dass Sie mit window.document.Layername.caputeEvents() nur Ereignisse innerhalb des
Layerbereichs berwachen knnen, keine Ereignisse im gesamten Fensterbereich (zu dem beispielsweise auch Titelleiste, Menleisten usw. gehren).

handleEvent()
bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genauso wie handleEvent() beim window-Objekt (nhere Informationen siehe Kapitel
20.3). Der einzige Unterschied ist, dass window.document.Layername.handleEvent() nur
Ereignisse bergeben kann, die mit window.document.Layername.captureEvents() berwacht werden.

874

Kapitel 20: JavaScript Objekt-Referenz

load()
Ldt eine externe Datei in einen Layer. Erwartet zwei Parameter:
Quelle = (HTML)-Datei, die geladen werden soll.
Breite = Anzeigebreite des Layers.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Laden()
{
document.EinLayer.load("news.htm",600);
}
//-->
</script>
</head><body>
<a href="javascript:Laden()">News laden</a>
<layer name="EinLayer" top="50" left="20">
</layer>
</body></html>

Das Beispiel enthlt einen leeren Layer und einen Verweis. Beim Anklicken des Verweises wird
die Funktion Laden() aufgerufen, die im Dateikopf notiert ist. Die Anweisung innerhalb der
Funktion wendet die Methode load() auf den bis dahin leeren Layer an. Die angegebene Datei
news.htm wird in den Layer geladen, und der Layer erhlt eine Anzeigebreite von 600 Pixeln.

moveAbove()
Legt einen Layer ber einen anderen Layer. Erwartet als Parameter den Layer, der berdeckt
werden soll. Die Schichtposition des vernderten Layers ndert sich dabei abhngig von der des
Layers, der berdeckt werden soll. Diese Methode hat nichts mit dem Bewegen von Layern zu
tun. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="150" left="100" width="200" height="200"
bgColor="#FFFFE0">
Gelber Layer<br>
<a href="javascript:window.document.GelberLayer.moveAbove(window.document.LilaLayer)">
nach vorne</a>
</layer>
<layer name="LilaLayer" top="50" left="250" width="200" height="200"
bgColor="#FFE0FF">
Lila Layer<br>
<a href="javascript:window.document.LilaLayer.moveAbove(window.document.GelberLayer)">
nach vorne</a>
</layer>
</body></html>

20.16 layers

875

Im Beispiel werden zwei positionierte Layer definiert, die sich zum Teil berlappen. Beide enthalten jeweils einen Verweis, um den eigenen Layer ber den anderen zu legen.

moveBelow()
Legt einen Layer unter einen anderen Layer. Erwartet als Parameter den Layer, der den aktuellen
berdecken soll. Die Schichtposition des vernderten Layers ndert sich dabei abhngig von der
des Layers, der den aktuellen Layer berdecken soll. Diese Methode hat nichts mit dem Bewegen
von Layern zu tun. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<layer name="GelberLayer" top="150" left="100" width="200" height="200"
bgColor="#FFFFE0">
Gelber Layer<br>
<a href="javascript:window.document.GelberLayer.moveBelow(window.document.LilaLayer)">
nach hinten</a>
</layer>
<layer name="LilaLayer" top="50" left="250" width="200" height="200"
bgColor="#FFE0FF">
Lila Layer<br>
<a href="javascript:window.document.LilaLayer.moveBelow(window.document.GelberLayer)">
nach hinten</a>
</layer>
</body></html>

Im Beispiel werden zwei positionierte Layer definiert, die sich zum Teil berlappen. Beide enthalten jeweils einen Verweis, um den eigenen Layer von dem jeweils anderen berdecken zu lassen.

moveBy()
Verschiebt einen Layer um so viele Pixel wie angegeben. Erwartet folgende Parameter:
x-Wert = Anzahl Pixel, um die der Layer nach links/rechts verschoben werden soll. Negative
Werte verschieben nach links, positive nach rechts.
y-Wert = Anzahl Pixel, um die der Layer nach oben/unten verschoben werden soll. Negative
Werte verschieben nach oben, positive nach unten.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Springen()
{
var x = parseInt(document.Springer.document.Eingabe.hr.value);
var y = parseInt(document.Springer.document.Eingabe.vr.value);
document.Springer.moveBy(x,y);
}
//-->

876

Kapitel 20: JavaScript Objekt-Referenz

</script>
</head><body>
<layer name="Springer" top="150" left="100" width="200" height="200"
bgColor="#FFFFE0">
<form name="Eingabe" action="">
Springe um <input size="5" name="hr"> Pixel horizontal<br>
Springe um <input size="5" name="vr"> Pixel vertikal<br>
<input type="button" value="Springe" onClick="Springen()">
</form>
</body></html>

Im Beispiel wird ein Layer definiert, der ein Formular enthlt. Das Formular stellt zwei kleine
Eingabefelder bereit, in denen der Anwender eingeben kann, um wie viele Pixel der Layer horizontal und vertikal verschoben werden soll. Beim Anklicken des Buttons, der auch zu dem Formular gehrt, wird die Funktion Springen() aufgerufen, die im Dateikopf notiert ist. Diese
Funktion ermittelt zunchst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die
Methode moveBy() aber Zahlen erwartet, wird die Funktion parseInt() zum Umwandeln der
Formulareingaben in eine Zahl angewendet. Anschlieend wendet die Funktion die Methode
moveBy() mit den ermittelten Werten auf den Layer an.

moveTo()
Verschiebt einen Layer auf die anzugebende Position. Erwartet folgende Parameter:
x-Wert = Links-Wert fr die neue obere linke Ecke des Fensters.
y-Wert = Oben-Wert fr die neue obere linke Ecke des Fensters.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Springen()
{
var x = parseInt(document.Springer.document.Eingabe.hr.value);
var y = parseInt(document.Springer.document.Eingabe.vr.value);
document.Springer.moveTo(x,y);
}
//-->
</script>
</head><body>
<layer name="Springer" top="150" left="100" width="200" height="200"
bgColor="#FFFFE0">
<form name="Eingabe" action="">
links oben neu: <input size="5" name="hr"> (von links)<br>
links oben neu: <input size="5" name="vr"> (von oben)<br>
<input type="button" value="Springe" onClick="Springen()">
</form>
</body></html>

20.16 layers

877

Im Beispiel wird ein Layer definiert, der ein Formular enthlt. Das Formular stellt zwei kleine
Eingabefelder bereit, in denen der Anwender die x- und y-Werte der neuen gewnschten oberen
linken Ecke des Layers eingeben kann. Beim Anklicken des Buttons, der auch zu dem Formular
gehrt, wird die Funktion Springen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion
ermittelt zunchst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die Methode
moveTo() aber Zahlen erwartet, wird die Funktion parseInt() zum Umwandeln der Formulareingaben in eine Zahl angewendet. Anschlieend wendet die Funktion die Methode moveTo()
mit den ermittelten Werten auf den Layer an.
Beachten Sie: Wenn sich der Layer, auf den Sie die moveTo()-Methode anwenden, innerhalb
eines anderen Layers befindet, beziehen sich die Angaben relativ zu dem ueren Layer. Eine
Angabe wie moveTo(0,0) springt also zur linken oberen Ecke des ueren Layers.

moveToAbsolute()
Funktioniert genauso wie moveTo(), mit dem Unterschied, dass die x- und y-Werte absolut zum
Anzeigefenster interpretiert werden, falls sich der Layer innerhalb eines anderen Layers befindet.

releaseEvents()
Beendet die berwachung von Anwenderereignissen. Funktioniert genau so wie releaseEvents() beim window-Objekt (nhere Informationen siehe dort). Der einzige Unterschied ist,
dass document.Layername.releaseEvents() nur Ereignisberwachungen beenden kann, die
mit document.Layername.captureEvents() gestartet wurden.

resizeBy()
Verndert die Gre eines Layers um so viele Pixel unten und rechts wie angegeben. Erwartet
folgende Parameter:
x-Wert = Anzahl Pixel, um die der Layer rechts verkleinert/vergrert werden soll. Negative
Werte verkleinern, positive vergrern.
y-Wert = Anzahl Pixel, um die der Layer unten verkleinert/vergrert werden soll. Negative
Werte verkleinern, positive vergrern.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function MachKleiner() {
document.MeinLayer.resizeBy(-20,-10);
}
function MachGroesser() {
document.MeinLayer.resizeBy(20,10);
}
//-->
</script>
</head><body>

878

Kapitel 20: JavaScript Objekt-Referenz

<layer name="MeinLayer" top="50" left="50" width="200" height="100"

bgColor="#FFFFE0">
<a href="javascript:MachKleiner()">Kleiner</a><br>
<a href="javascript:MachGroesser()">Groesser</a><br>
</layer>
</body></html>

Im Beispiel ist ein Layer definiert. Mit Hilfe von zwei Verweisen lsst sich im Beispiel der sichtbare Anzeigebereich des Layers verkleinern und wieder vergrern. Die Verweise rufen die
Funktionen MachKleiner() bzw. MachGroesser() auf, die in einem Script-Bereich im Dateikopf notiert sind. Die Funktion MachKleiner() verringert die Breite des Layers um 20 Pixel
und die Hhe um 10 Pixel, die Funktion MachGroesser() tut das Umgekehrte.

resizeTo()
Legt die Breite und Hhe eines Layers neu fest. Erwartet folgende Parameter:
x-Wert = neue Breite des Layers.
y-Wert = neue Hhe des Layers.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Aendern()
{
var x = parseInt(document.L.document.Eingabe.hr.value);
var y = parseInt(document.L.document.Eingabe.vr.value);
document.L.resizeTo(x,y);
}
//-->
</script>
</head><body>
<layer name="L" top="50" left="50" width="200" height="200" bgColor="#FFFFE0">
<form name="Eingabe" action="">
neue <input size="5" name="hr"> Breite<br>
neue <input size="5" name="vr"> Hoehe<br>
<input type="button" value="Aendern" onClick="Aendern()">
</form>
</body></html>

Im Beispiel wird ein Layer definiert, der ein Formular enthlt. Das Formular stellt zwei kleine
Eingabefelder bereit, in denen der Anwender die x- und y-Werte der neuen gewnschten Breite
und Hhe des Layers eingeben kann. Beim Anklicken des Buttons, der auch zu dem Formular
gehrt, wird die Funktion Aendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion
ermittelt zunchst die eingegebenen Werte. Da es sich um Zeichenketten handelt, die Methode
resizeTo() aber Zahlen erwartet, wird die Funktion parseInt() zum Umwandeln der Formulareingaben in eine Zahl angewendet. Anschlieend wendet die Funktion die Methode resizeTo() mit den ermittelten Werten auf den Layer an.

20.17 links

879

routeEvent()
bergibt ein Anwenderereignis an das document-Objekt. Von dort aus wird das Ereignis immer
weiter nach unten durchgereicht, bis sich ein Event-Handler findet, der das Ereignis verarbeitet.
Funktioniert genauso wie routeEvent() beim window-Objekt (nhere Informationen siehe
dort). Der einzige Unterschied ist, dass document.Layername.routeEvent() nicht auf Fensterebene ansetzt, sondern auf Layerebene.

20.17 links
Eigenschaft
name
length
target
text
x
y

(Name des Verweises)

(Anzahl Verweise)
(Zielfenster des Verweises)
(Text des Verweises)
(horizontale Position des Verweises)
(vertikale Position des Verweises)

links: Allgemeines zur Verwendung

Mit dem Objekt links, das in der JavaScript-Objekthierarchie unterhalb des document-Objekts
liegt, haben Sie Zugriff auf Verweise, die in einer HTML-Datei definiert sind. In JavaScript 1.0 ist
es lediglich mglich, die Anzahl der Verweise in einer Datei auszulesen. Seit JavaScript 1.2 stehen
jedoch weitere Eigenschaften zur Verfgung.

Zugriff auf Verweisziele

Sie knnen mit JavaScript die Verweisziele von Verweisen in HTML ermitteln. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="http://www.yahoo.de/">Yahoo</a><br>
<a href="http://www.google.de/">Google</a><br>
<a href="http://www.teamone.de/">TeamOne</a><br>
<script type="text/javascript">
<!-for(var i=0; i < document.links.length; ++i)
document.write("<br>" + document.links[i]);
//-->
</script>
</body></html>

Im Beispiel werden ein paar Verweise notiert. Unterhalb davon steht ein JavaScript, das mit
document.write() in einer for-Schleife fr jeden Verweis das Verweisziel in die Datei schreibt.
Es handelt sich um denjenigen Wert, der bei den Verweisen hinter href= notiert ist.
Der Zugriff auf die Verweise erfolgt mit Indexnummern. Dabei geben Sie document.links an
und dahinter in eckigen Klammern, den wievielten Verweis in der Datei Sie meinen. Beachten

880

Kapitel 20: JavaScript Objekt-Referenz

Sie, dass der Zhler bei 0 beginnt, d.h., den ersten Verweis sprechen Sie mit links[0] an, den
zweiten Verweis mit links[1] usw. Beim Zhlen gilt die Reihenfolge, in der die Verweise in der
Datei notiert sind. Dabei werden auch Verweise innerhalb von verweissensitiven Grafiken
(<area>-Tag) bercksichtigt.

location-Eigenschaften von Verweisen

Neben den verweisspezifischen Eigenschaften kennt das Links-Objekt auch alle Eigenschaften
des location-Objekts. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a target="_top" href="http://www.teamone.de/">TeamOne</a><br>
<script type="text/javascript">
<!-document.links[0].port="8081";
//-->
</script>
</body></html>

ber das Objekt location haben Sie Zugriff auf den vollstndigen URI eines angezeigten Verweises. Sie knnen den URI oder Teile davon zur Weiterverarbeitung abfragen und ndern.
Notieren Sie dazu das Links-Objekt, also z.B. document.links[0], dahinter einen Punkt und
anschlieend die gewnschte Eigenschaft des locaction-Objekts. Im Beispiel ist ein Verweis
definiert. Mit document.links[0].port= wird die Eigenschaft port gendert.
Beachten Sie: Im Netscape 6.1 und in Opera 5.12 knnen Sie die Eigenschaften des locationObjekts (mit Ausnahme der href-Eigenschaft) nur lesen, jedoch nicht ndern.

name
Speichert den Namen eines Verweises. Durch Verwendung des Attributes name= wird der Verweis gleichzeitig zu einem Bestandteil des anchors-Objektes. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a name="katalog" href="http://www.yahoo.de/">Yahoo</a><br>
<a name="suchmaschine" href="http://www.google.de/">Google</a><br>
<a name="redaktion" href="http://www.teamone.de/">TeamOne</a><br>
<script type="text/javascript">
<!-for(var i=0; i < document.links.length; ++i)
document.write("<br>" + document.links[i].name);
//-->
</script>
</body></html>

Mit document.links[0].name knnen Sie den Namen eines Verweises in einer HTML-Datei
ermitteln. Das Beispiel enthlt zunchst HTML-Text mit diversen Verweisen und schreibt am
Ende mit document.write() die Namen der Verweise ins Dokument.

20.17 links

881

Beachten Sie: Gegenwrtig ist es nur im Netscape 6.1 mglich, den Namen eines Verweises zu
ndern.

length
Speichert, wie viele Verweise eine HTML-Datei enthlt. Mit document.links.length knnen
Sie die Anzahl der Verweise in einer HTML-Datei ermitteln. Das Beispiel enthlt zunchst
HTML-Text mit diversen Verweisen und schreibt am Ende mit document.write() dazu, wie
viele Verweise in der Datei gefunden wurden. Beachten Sie, dass dabei (seit Netscape 3.0) auch
Verweise bercksichtigt werden, die in verweissensitiven Grafiken mit Hilfe des <area>-Tags
definiert werden.
<html><head><title>Test</title>
</head><body>
<a href="http://www.yahoo.de/">Yahoo</a><br>
<a href="http://www.lycos.de/">Lycos</a><br>
<map name="Testbild">
<area shape="rect" coords="1,1,249,49" href="#Ziel_1" alt="">
<area shape="rect" coords="1,51,149,299" href="#Ziel_2" alt="">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild" alt="">
<script type="text/javascript">
<!-document.write("<p>Die Datei hat " + document.links.length + " Verweise<\/p>");
//-->
</script>
</body></html>

target
Speichert das Zielfenster eines Verweises. Mit document.links[0].target knnen Sie das
Zielfenster eines Verweises ermitteln. Das Beispiel enthlt einen Verweis, der sein Verweisziel im
obersten Fenster ffnet. Im nachfolgenden JavaScript-Bereich wird diesem Verweis mit document.links[0].target="_blank" ein anderes Zielfenster zugewiesen. Das fhrt dazu, dass
sich das Ziel des Verweises in einem neuen Fenster ffnet.
<html><head><title>Test</title>
</head><body>
<a href="http://www.teamone.de/" target="_top">TeamOne</a><br>
<script type="text/javascript">
<!-document.links[0].target="_blank";
//-->
</script>
</body></html>

Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.

882

Kapitel 20: JavaScript Objekt-Referenz

text
Speichert den Text eines Verweises. Mit document.anchors[0].text knnen Sie den Text
eines Verweises zwischen <a> und </a> ermitteln. Das Beispiel enthlt zunchst einige Verweise.
Unterhalb davon steht ein JavaScript, das mit document.write() in einer for-Schleife fr jeden
Verweis den Verweistext in die Datei schreibt.
<html><head><title>Test</title>
</head><body>
<a href="http://www.yahoo.de/">Yahoo</a><br>
<a href="http://www.google.de/">Google</a><br>
<a href="http://www.teamone.de/">TeamOne</a><br>
<script type="text/javascript">
<!-for(var i=0; i < document.links.length; ++i)
document.write("<br>" + document.links[i].text);
//-->
</script>
</body></html>

x
Speichert die horizontale Position eines Verweises gemessen vom Fensterrand. Mit document.links[0].x knnen Sie die horizontale Position eines Verweises in einer HTML-Datei
ermitteln. Das Beispiel enthlt einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit alert() die Position des Verweises vom linken Fensterrand aus
gesehen ausgegeben.
<html><head><title>Test</title>
</head><body>
Hier ein Text und dann ein <a
href="javascript:alert(document.links[0].x)">Verweis</a><br>
</body></html>

y
Speichert die vertikale Position eines Verweises gemessen vom Fensterrand. Mit document.links[0].y knnen Sie die horizontale Position eines Verweises in einer HTML-Datei
ermitteln. Das Beispiel enthlt einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit alert() die Position des Verweises vom oberen Fensterrand aus
gesehen ausgegeben.
<html><head><title>Test</title>
</head><body>
Hier ein Text und dann ein <a
href="javascript:alert(document.links[0].x)">Verweis</a><br>
</body></html>

20.18 event

883

20.18 event
Eigenschaften
altKey, ctrlKey, shiftKey
clientX, clientY
keyCode
layerX, layerY
modifiers
offsetX, offsetY
pageX, pageY
screenX, screenY
which
type
x, y

(Sondertasten/Microsoft)
(Bildschirmkoordinaten/Microsoft)
(Tastaturcode/Microsoft)
(Objekt-relative Koordinaten/Netscape)
(Sondertasten/Netscape)
(Objekt-relative Koordinaten/Microsoft)
(Fenster-relative Koordinaten/Netscape)
(Bildschirmkoordinaten/Netscape)
(Tastatur-/Maustastencode/Netscape)
(Art des Ereignisses/Netscape)
(Elternelement-relative Koordinaten/Microsoft)

event: Allgemeines zur Verwendung

Mit dem Objekt event knnen Sie Einzelinformationen zu Anwenderereignissen wie Mausklicks
oder Tasteneingaben ermitteln und weiterverarbeiten. So knnen Sie bei einem Mausklick beispielsweise die genaue Position ermitteln, wo der Mausklick erfolgte, oder bei einem Tastendruck die gedrckte Taste abfragen.
Anwenderereignisse knnen Sie entweder berwachen, indem Sie in einem erlaubten HTMLTag einen Event-Handler notieren, oder, indem Sie direkt mit Hilfe von JavaScript eine Ereignisberwachung programmieren. Fr den Fall, dass das berwachte Ereignis eintritt, knnen Sie
eine Handler-Funktion schreiben, die das Ereignis behandelt, also verarbeitet. Die HandlerFunktion wird automatisch aufgerufen, wenn das Ereignis eintritt. Innerhalb einer HandlerFunktion besteht auch die Mglichkeit, Eigenschaften des eingetretenen Ereignisses abzufragen.
Solche Eigenschaften werden auf dieser Seite hier beschrieben.
Sowohl Netscape 4.x als auch der MS Internet Explorer 4.x kennen das event-Objekt. Leider ist
die Implementierung jedoch vllig unterschiedlich gelst und fhrt zu einer ziemlich chaotischen Situation in diesem Bereich. Die Eigenschaften des event-Objekts, die auf dieser Seite
beschrieben werden, bercksichtigen beide Browser. In der Regel ist eine Eigenschaft jedoch
entweder nur bei Netscape oder nur beim MS Internet Explorer verfgbar. Auch in der Syntax
zur berwachung von Ereignissen unterscheiden sich beide Browser. Das gilt sowohl bei der
Ereignisberwachung per Event-Handler in HTML als auch fr die direkte Ereignisberwachung
in JavaScript. Die Unterschiede bei den Event-Handlern werden im Abschnitt ber EventHandler nher beschrieben. Hier wird zur allgemeinen Verwendung des event-Objekts
beschrieben, wie Sie mit Hilfe von JavaScript eine direkte Ereignisberwachung programmieren.
Das Beispiel zeigt auch, wie Sie eine solche Ereignisberwachung fr beide Browser getrennt
programmieren knnen, ohne dass es zu Fehlermeldungen kommt.
Beispiel (Ereignisberwachung direkt mit JavaScript programmieren):
<html><head><title>Test</title>
<script language="JavaScript1.2" type="text/javascript">
<!--

884

Kapitel 20: JavaScript Objekt-Referenz

var Netscape = new Boolean();

if(navigator.appName == "Netscape")

Netscape = true;

function TasteGedrueckt(Ereignis)
{
if(Netscape)
{ window.status = "Taste mit Dezimalwert " + Ereignis.which + " gedrueckt";
return true; }
}
function TasteLosgelassen(Ereignis)
{
if(Netscape)
{ window.status = "Taste mit Dezimalwert " + Ereignis.which + " losgelassen";
return true; }
}
document.onkeydown = TasteGedrueckt;
document.onkeyup = TasteLosgelassen;
//-->
</script>
<!-- JScript-Bereiche fuer MS Internet Explorer -->
<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
<!-{ window.status = "Taste mit Dezimalwert " + window.event.keyCode + " gedrueckt";
return true; }
//-->
</script>
<script for="document" event="onkeyup()" language="JScript" type="text/jscript">
<!-{ window.status = "Taste mit Dezimalwert " + window.event.keyCode + "
losgelassen"; return true; }
//-->
</script>
</head><body>
</body></html>

Das Beispiel berwacht Tastaturereignisse auf Dokumentebene. Das heit, wenn der Anwender
in den Anzeigebereich der angezeigten HTML-Datei klickt (Dokument erhlt den Fokus) und
dann irgendeine Taste drckt, wird das Ereignis von der programmierten Ereignisberwachung
abgefangen und verarbeitet. Im Beispiel wird bei jedem Tastendruck in der Statuszeile des
Browsers der dezimale Tastaturcode der gedrckten Taste ausgegeben.
Um so etwas fr Netscape 4.x und MS Internet Explorer 4.x zu realisieren, werden im Beispiel
ein JavaScript-Bereich und zwei spezielle JScript-Bereiche definiert. Die JScript-Bereiche werden
nur vom MS Internet Explorer ausgelesen, da Netscape Scripts, die mit language="JScript"
ausgezeichnet sind, ignoriert. Der JavaScript-Bereich ist mit language="JavaScript1.2" ausgezeichnet. So wird verhindert, dass ltere Browser (z.B. Netscape 3) diesen Bereich interpretieren. Der Bereich wird jedoch von Netscape 4 und vom MS Internet Explorer 4 interpretiert.
Gedacht ist er jedoch nur fr Netscape 4. Deshalb werden alle Anweisungen innerhalb des
Bereichs von der Abfrage abhngig gemacht, ob Netscape am Werk ist.

20.18 event

885

Es werden zwei Funktionen definiert: Die Funktion TasteGedrueckt(Ereignis) ist die so genannte Handler-Funktion fr den Fall, dass der Anwender eine Taste drckt. Die Funktion TasteLosgelassen(Ereignis) behandelt den Fall, dass der Anwender die gedrckte Taste wieder
lolsst. Beide Funktionen erwarten einen Parameter namens Ereignis. ber diesen Parameter
knnen die Funktionen auf Eigenschaften des event-Objekts zugreifen. In den beiden Funktionen im Beispiel wird die Objekteigenschaft which ausgewertet, die nach Netscape-Syntax den
dezimalen Tastaturcode einer gedrckten Taste speichert.
Das allein gengt jedoch noch nicht zur Ereignisberwachung. Damit die Handler-Funktionen
bei Eintritt des Ereignisses automatisch aufgerufen werden, muss die Ereignisberwachung gestartet werden. Dazu dienen die beiden Anweisungen am Ende des JavaScript-Bereichs.
Mit document.onkeydown = TasteGedrueckt; wird das Ereignis Taste gedrckt (onkeydown) berwacht. Hinter dem Gleichheitszeichen folgt der Name der Handler-Funktion, die
dieses Ereignis verarbeiten soll (TasteGedrueckt). Beachten Sie, dass hier nur der Funktionsname stehen darf, kein Funktionsaufruf mit runden Klammern dahinter.
Mit document.onkeyup = TasteLosgelassen; wird das Ereignis Taste losgelassen (onkeyup)
berwacht, und zur Ereignisbehandlung wird die Handler-Funktion TasteLosgelassen angegeben. Nach dem gleichen Schema knnen Sie auch andere Ereignisse berwachen die Handler-Funktionen definieren Sie selber, und anstelle von onkeydown und onkeyup knnen Sie alle
anderen blichen Event-Handler notieren.
Bei den beiden Script-Bereichen fr den MS Internet Explorer wird fr jedes zu berwachende
Ereignis ein Script-Bereich notiert. Mit einer Angabe wie for="document" event="onkeydown()"
im einleitenden <script>-Tag geben Sie an, welches Ereignis Sie berwachen wollen (z.B.
onkeydown), und fr welches Objekt (z.B. document). Es sind alle blichen Event-Handler
erlaubt.
Innerhalb des Scripts knnen Sie dann auf Eigenschaften des event-Objekts zugreifen, die der
MS Internet Explorer kennt. Mit window.event.keyCode wird beispielsweise der dezimale
Tastaturcode einer gedrckten Taste ermittelt.
Beachten Sie: Das vorliegende Beispiel wird auch vom Netscape 6 entsprechend der Netscapespezifischen Syntax interpretiert.

altKey, ctrlKey, shiftKey

Microsoft-Syntax. Speichert, ob Zusatztasten wie die (Alt)-Taste oder die ()-Taste gemeinsam
mit einer anderen Taste oder einem Mausklick gedrckt wurden. Ein Beispiel:
<html><head><title>Test</title>
<script for="document" event="onkeypress()" language="JScript" type="text/jscript">
<!-{
if(window.event.shiftKey)
alert("eine Taste plus Umschalttaste gedrueckt!");
}
//-->
</script>
</head><body>
</body></html>

886

Kapitel 20: JavaScript Objekt-Referenz

Im Beispiel wird berwacht, ob der Anwender eine Taste drckt (onkeypress). Wenn ja, wird
abgefragt, ob zustzlich die Umschalttaste gedrckt wurde. In diesem Fall wird eine entsprechende Meldung ausgegeben.

clientX, clientY
Microsoft-Syntax. Speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY)
der Cursor-Position relativ zur oberen linken Ecke des Anzeigefensters, wenn z.B. Mausereignisse berwacht werden. Ein Beispiel:
<html><head><title>Test</title>
<script for="document" event="onmousedown()" language="JScript"
type="text/jscript">
<!-{
document.all.Springer.style.left = window.event.clientX;
document.all.Springer.style.top = window.event.clientY;
}
//-->
</script>
</head><body>
<div id="Springer" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>

Das Beispiel enthlt einen <div>-Bereich, der mit Hilfe von Stylesheet-Angaben absolut positioniert wird. Wenn der Anwender mit der Maus in das Fenster klickt, wird der Bereich an die
Position verschoben, an der der Mausklick erfolgt.

keyCode
Microsoft-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert)
der gedrckten Taste. Das Beispiel berwacht, ob bei aktivem Dokument eine Taste gedrckt
wurde. Wenn ja, wird deren Wert in einem Meldungsfenster ausgegeben.
<html><head><title>Test</title>
<script for="document" event="onmousedown()" language="JScript"
type="text/jscript">
<!-{
alert(window.event.keyCode);
}
//-->
</script>
</head><body>
</body></html>

20.18 event

887

layerX, layerY
Netscape-Syntax. Speichert die aktuelle Breite (layerX) und Hhe (layerY) eines Objekts, wenn
das Ereignis onresize berwacht wird, oder die horizontalen Pixel (layerX) und die vertikalen
Pixel (layerY) der Cursor-Position relativ zur oberen linken Ecke eines Layer-Bereichs, wenn
z.B. Mausereignisse berwacht werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function wResize(Ereignis)
{
window.status = Ereignis.layerX + "x" + Ereignis.layerY; return true;
}
window.onresize = wResize;
//-->
</script>
</head><body>
</body></html>

Das Beispiel berwacht, ob der Anwender das Anzeigefenster des Browsers verndert. Beim Verndern der Gre des Anzeigefensters wird so oft wie mglich die Handler-Funktion wResize
aufgerufen. Diese schreibt in die Statuszeile des Browsers die aktuelle Fenstergre.
Beachten Sie: Netscape 6.1 interpretiert zwar den Event-Handler, jedoch ist in den Eigenschaften
layerX und layerY jeweils der Wert 0 gespeichert.

modifiers
Netscape-Syntax. Speichert, ob Zusatztasten wie die (Alt)-Taste oder die ()-Taste gemeinsam
mit einer anderen Taste oder einem Mausklick gedrckt wurden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function ALT_Wert(Ereignis)
{
if(Ereignis.modifiers & Event.ALT_MASK)
alert("Maus geklickt und ALT-Taste gedrueckt!")
}
document.onmouseup = ALT_Wert;
//-->
</script>
</head><body>
</body></html>

Im Beispiel wird das Meldungsfenster dann angezeigt, wenn der Anwender mit der Maus in das
Dokument geklickt hat und gleichzeitig die (Alt)-Taste gedrckt hlt. Die verwendete Syntax
benutzt Bit-Operatoren. Fragen Sie einfach so ab wie in dem Beispiel. Folgende Ausdrcke sind
erlaubt:
Ereignis.modifiers & Event.ALT_MASK, um die (Alt)-Taste abzufragen;

888

Kapitel 20: JavaScript Objekt-Referenz

Ereignis.modifiers & Event.CONTROL_MASK, um die (Ctrl)-Taste ((Strg)-Taste) abzufragen;

Ereignis.modifiers & Event.SHIFT_MASK, um die ()-Taste (Groschreibung) abzufragen;
Ereignis.modifiers & Event.META_MASK, um die (AltGr)-Taste abzufragen.
Diese Angaben sind natrlich abhngig davon, ob die verwendete Tastatur eine solche Taste
berhaupt enthlt.
Beachten Sie: Netscape 6.1 interpretiert dieses Beispiel nicht.

offsetX, offsetY
Microsoft-Syntax. Speichert die horizontalen Pixel (clientX) und die vertikalen Pixel (clientY)
der Cursor-Position relativ zur oberen linken Ecke des Elements, das ein Ereignis ausgelst hat.
Ein Beispiel:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-function Coords()
{
alert("Stelle im Button: " + window.event.offsetX + "/" + window.event.offsetY);
}
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Klick doch mal auf mich drauf" onClick="Coords()">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einem Button. Beim Anklicken des Buttons wird die
Funktion Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks relativ zur oberen linken Ecke des Elements, also des Buttons, aus.

pageX, pageY
Netscape-Syntax. Speichert die horizontalen Pixel (pageX) und die vertikalen Pixel (pageY) der
Cursor-Position relativ zur oberen linken Ecke der Seite, wenn z.B. Mausereignisse berwacht
werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function LayerPos(Ereignis)
{
if (document.layers) {
document.layers[0].left = Ereignis.pageX;
document.layers[0].top = Ereignis.pageY;
}

20.18 event

889

else if (window.netscape) {
document.getElementsByTagName("div")[0].style.left = Ereignis.pageX;
document.getElementsByTagName("div")[0].style.top = Ereignis.pageY;
}
}
document.onmouseup = LayerPos;
//-->
</script>
</head><body>
<div style="position:absolute;top:50px;left:50px;width:100px;height:100px;
background-color:#FFE0FF;border:solid 1px #000000;">
Ein Layer<br><br>
</div>
</body></html>

Das Beispiel enthlt einen simulierten Layer. Wenn der Anwender mit der Maus in das Fenster
klickt und die Maustaste dann wieder loslsst, wird der Layer an die Position verschoben, an der
die Maus losgelassen wurde.
Da die Eigenschaften pageX und pageY auch von Netscape 6 interpretiert werden, wurde das
Beispiel entsprechend kompatibel gestaltet. Statt eines Layers (Netscape 6 kennt keine Layer
mehr) wird mit einem absolut positionierten div-Bereich ein Layer ohne layer-Element simuliert. Wenn die Maustaste gedrckt und wieder losgelassen wird, wird die Funktion LayerPos()
aufgerufen. Innerhalb dieser Funktion wird geprft, ob der Browser das Objekt layer kennt. Ist
das der Fall, erfolgt die Zuweisung des Wertes ber das layer-Objekt. Diesem Zweig der Anweisung folgt Netscape 4.x. Kennt der Browser das Objekt dagegen nicht, dann wird im else-Zweig
geprft, ob er das Objekt window.netscape kennt. Da dieses Objekt nur einem Netscapebasierten Browser bekannt ist, werden der MS Internet Explorer und Opera ausgeschlossen.
Anschlieend erfolgt die Zuweisung der Eigenschaft an das Element entsprechend der DOMSyntax. Beide Zweige der if/-else-Anweisung verwenden jedoch die gleichen Event-Eigenschaften.

screenX, screenY
Netscape-Syntax. Speichert die horizontalen Pixel (layerX) und die vertikalen Pixel (layerY)
der Cursor-Position absolut gesehen zum Bildschirm, wenn z.B. Mausereignisse berwacht werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Position(Ereignis)
{
alert("x-Wert: " + Ereignis.screenX + " / y-Wert: " + Ereignis.screenY);
}
document.onmousedown = Position;
//-->
</script>
</head><body>
</body></html>

890

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel berwacht, ob der Anwender die Maustaste drckt. Wenn ja, werden in einem Meldungsfester die absoluten Bildschirmkoordinaten ausgegeben, an denen die Maustaste gedrckt
wurde.
Beachten Sie: Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

which
Netscape-Syntax. Speichert bei Tastaturereignissen den dezimalen Code (ASCII/ANSI-Wert) der
gedrckten Taste und bei Mausereignissen, welche Maustaste gedrckt wurde. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Position(Ereignis)
{
alert("Maustaste: " + Ereignis.which);
}
document.onmousedown = Position;
//-->
</script>
</head><body>
</body></html>

Das Beispiel berwacht, ob der Anwender die Maustaste drckt. Wenn ja, wird in einem Meldungsfester ausgegeben, welche Maustaste gedrckt wurde. Die linke Maustaste hat den Wert 1,
die mittlere (sofern vorhanden) den Wert 2 und die rechte (sofern vorhanden) den Wert 3.
Beachten Sie: Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

type
Netscape-Syntax. Speichert die Information, welches Ereignis eingetreten ist. Der gespeicherte
Wert ist der Name des Events ohne das Prfix on, also beispielsweise mouseup oder keypress
oder select. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Auswertung(Ereignis)
{
alert("Ereignis: " + Ereignis.type);
}
document.onmouseup = Auswertung;
document.onkeyup = Auswertung;
//-->
</script>
</head><body>
</body></html>

Das Beispiel berwacht zwei Ereignisse, nmlich, ob der Anwender die Maustaste drckt und ob
er eine Taste drckt. In beiden Fllen wird die gleiche Handler-Funktion Auswertung aufgerufen. Sie gibt in einem Meldungsfester aus, welches der Ereignisse eingetreten ist.

20.19 history

891

Beachten Sie: Das vorliegende Beispiel wird auch vom Netscape 6 interpretiert.

x, y
Speichert die horizontalen Pixel (x) und die vertikalen Pixel (y) der Cursor-Position relativ zur
oberen linken Ecke des Eltern-Elements von dem Element, das ein Ereignis ausgelst hat. Wenn
ein absolut positionierter Bereich das Eltern-Element ist, ist dessen obere linke Ecke der Bezugspunkt. Wenn das auslsende Element sonst kein Eltern-Element hat, gilt die linke obere Ecke des
Dokuments als Bezug. Ein Beispiel:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-function Coords()
{
alert("x = " + window.event.x + "/ y = " + window.event.y);
}
//-->
</script>
</head><body>
<div style="position:relative; left:50px; top:140px;
background-color:#FFFFE0; width:100px">
<p onClick="Coords()">Klick mich</p>
</div>
</body></html>

Das Beispiel enthlt einen absolut positionierten Bereich (<div>...</div>) und innerhalb
davon einen gewhnlichen Textabsatz. Beim Anklicken des Absatzes wird die Funktion
Coords() aufgerufen. Diese gibt die Pixelkoordinaten des Mausklicks aus. Eigentlich sollten sich
die Werte dabei auf die linke obere Ecke des <div>-Bereichs beziehen.
Beachten Sie: Versionen des MS Internet Explorer vor der Version 5 speichern in diesen Eigenschaften die Position relativ zum Fenster. Ab dem MS Internet Explorer 5.0 ist in dieser Eigenschaft die Position zu einem relativ positionierten Elternelement (z.B. Tabellenzellen) gespeichert. Fr absolut positionierte Elternelemente dagegen enthlt die Eigenschaft wieder die Position relativ zum Fenster.

20.19 history
Eigenschaften
length

(Anzahl besuchter Seiten)

Methoden
back()
forward()
go()

(zurckspringen)
(vorwrtsspringen)
(zu URI in History springen)

892

Kapitel 20: JavaScript Objekt-Referenz

history: Allgemeines zur Verwendung

ber das Objekt history, das in der JavaScript-Objekthierarchie unterhalb des window-Objekts
liegt, haben Sie Zugriff auf die besuchten WWW-Seiten des Anwenders. Mageblich ist dabei die
Liste, wie sie in der History-Liste des Web-Browsers gespeichert ist. Mit diesem Objekt knnen
Sie z.B. Verweise vom Typ springe zur zuletzt besuchten Seite konstruieren. Einige Beispiele:
history.back();
window.history.back();
Zweitfenster.history.back();
parent.frames[2].history.back();

Methoden des history-Objekts knnen Sie mit history aufrufen, die zuletzt besuchte Seite
beispielsweise mit history.back(). Sie knnen auch window.history.back() notieren. Da es
sich dabei aber um den Inhalt des aktuellen Fensters handelt, ist die Angabe des Fensternamens
nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster oder Frame-Fenster. In
diesen Fllen mssen Sie das Fenster korrekt adressieren. Lesen Sie fr zustzliche Fenster den
Abschnitt 20.2 zur Verwendung des window-Objekts und fr Frame-Fenster den Abschnitt 20.3
ber die Verwendung des frames-Objekts.
Beachten Sie: JavaScript erlaubt zum Schutz der Seitenbesucher nur einen begrenzten Zugriff auf
das history-Objekt. Das bedeutet, Sie erhalten keinen Zugriff auf die URIs der besuchten
Seitenadressen, und Sie knnen die History auch nicht lschen. Neben der Bewegung in der
History ist es lediglich erlaubt, mit der Methode location.replace() den history-Eintrag der
zuletzt besuchten Seite zu berschreiben.

length
Speichert die Anzahl der Eintrge in der History fr ein Fenster. Das Beispiel definiert einen
Verweis, bei dessen Anklicken die Anzahl der besuchten Seiten mit alert() ausgegeben wird.:
<a href="javascript:alert(history.length)">Anzahl besuchter Seiten;</a>

back()
Ldt die WWW-Seite, die zuletzt besucht wurde. Erwartet keine Parameter. Das Beispiel definiert einen Verweis, bei dessen Anklicken die zuletzt besuchte Seite wieder aufgerufen wird.
<a href="javascript:history.back()">zur&uuml;ck</a>

forward()
Ldt die WWW-Seite, die als nchste besucht wurde, sofern zuvor ein Back-Vorgang stattfand.
Erwartet keine Parameter. Das Beispiel definiert einen Verweis, bei dessen Anklicken die Seite
aufgerufen wird, die aktiv war, bevor der Anwender einen Back-Vorgang auslste.
<a href="javascript:history.forward()">wieder vor</a>

go()
Springt so viele Seiten in der gespeicherten History vor oder zurck wie gewnscht. Erwartet als
Parameter die Anzahl der zu springenden Seiten. Ein negativer Wert springt rckwrts (so viele

20.20 location

893

Back-Vorgnge wie angegeben), ein positiver Wert springt vorwrts (so viele Forward-Vorgnge
wie angegeben). Das Beispiel definiert einen Verweis, bei dessen Anklicken drei Seiten in der
gespeicherten History der besuchten Seiten zurckgesprungen wird:
<a href="javascript:history.go(-3)">3 Seiten zur&uuml;ck</a>

20.20 location
Eigenschaften
(Ankername innerhalb eines URI)
(Domain-Name innerhalb eines URI)
(Domain-Name innerhalb eines URI)
(URI / Verweis zu URI)
(Pfadname innerhalb eines URI)
(Portangabe innerhalb eines URI)
(Protokollangabe innerhalb eines URI)
(Parameter innerhalb eines URI)

hash
host
hostname
href
pathname
port
protocol
search

Methoden
(neu laden)
(History-Eintrag berschreiben)

reload()
replace()

location: Allgemeines zur Verwendung

ber das Objekt location, das in der JavaScript-Objekthierarchie unterhalb des windowObjekts liegt, haben Sie Zugriff auf den vollstndigen URI der aktuell angezeigten Web-Seite. Sie
knnen den URI oder Teile davon zur Weiterverarbeitung abfragen und ndern. Beim ndern
fhrt der Web-Browser einen Sprung zu einem neuen URI aus, genauso wie bei einem Verweis.
Einige Beispiele:
window.location.href = "datei2.htm";
MeineDomain = location.host;
parent.frames[1].location.href = "datei2.htm";
Zweitfenster.host = "www.teamone.de";

Methoden des location-Objekts knnen Sie mit location aufrufen. Sie knnen auch window.
davor notieren. Da es sich dabei aber um die Adresse des aktuellen Fensters handelt, ist die
Angabe des Fensternamens nicht zwingend erforderlich. Anders beim Zugriff auf andere Fenster
oder Frame-Fenster. In diesen Fllen mssen Sie das Fenster korrekt adressieren. Lesen Sie fr
zustzliche Fenster den Abschnitt 20.2 zur Verwendung des window-Objekts und fr FrameFenster den Abschnitt 20.3 ber die Verwendung des frames-Objekts.

hash
Speichert den Anker (Verweisziel) innerhalb des URI. Das Beispiel definiert zwei Verweise. Beim
Anklicken des ersten Verweises wird zu dem Ziel a2 innerhalb der Datei gesprungen. Dies ist

894

Kapitel 20: JavaScript Objekt-Referenz

selbst wieder ein Verweis. Beim Anklicken dieses zweiten Verweises wird die Funktion Zeige()
aufgerufen, die den Ankernamen ausgibt. Beachten Sie, dass das Gatterzeichen # mit zu dem
Wert gehrt, den hash liefert. Wenn Sie diese Angabe ndern, bewirken Sie einen Verweis
innerhalb der Datei zu dem angegebenen Anker. Auch dabei mssen Sie das Gatterzeichen vor
dem Ankernamen hinzufgen.
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Zeigen() { alert(window.location.hash); }
//-->
</script>
</head><body>
<a href="#a2">Gehe zu a2. Bitte zuerst klicken</a>
<p>
<a name="a2" href="javascript:Zeigen()">Hier a2 - bitte dann klicken</a>
</body></html>

Beachten Sie: Das vorliegende Beispiel wird von Opera 5.12 nicht interpretiert.

host
Speichert den Namen des Server-Rechners innerhalb des aktuellen oder fensterspezifischen URI.
Das Beispiel gibt beim Einlesen der Datei aus, auf welchem Host-Rechner sich der Anwender
befindet. Wenn es eine Namensadresse wie etwa www.teamone.de ist, wird diese ausgegeben.
Wenn es eine numerische IP-Adresse wie etwa 195.201.34.18 ist, wird diese ausgegeben. Sie
knnen die Eigenschaft ndern. Sicherer ist es in diesem Fall jedoch, mit der Eigenschaft href zu
arbeiten.
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert("Sie befinden sich auf dem Host " + window.location.host);
//-->
</script>
</head><body>
</body></html>

hostname
Speichert den Namen des Server-Rechners innerhalb des aktuellen oder fensterspezifischen URI,
im Unterschied zu host auch Sub-Domains und Portnummern. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert("Sie befinden sich auf dem Host " + window.location.hostname);
//-->
</script>
</head><body>
</body></html>

20.20 location

895

Das Beispiel gibt beim Einlesen der Datei aus, auf welchem Host-Rechner sich der Anwender befindet. Wenn es eine Namensadresse wie etwa www.teamone.de ist, wird diese ausgegeben. Wenn
es eine numerische IP-Adresse wie etwa 195.201.34.18 ist, wird diese ausgegeben. Wenn beispielsweise eine Portnummer dazugehrt, wie www.xy.de:5080, wird auch diese gespeichert. Sie
knnen die Eigenschaft ndern. Sicherer ist es in diesem Fall jedoch, mit der Eigenschaft href zu
arbeiten.

href
Speichert den vollstndigen URI des aktuellen oder eines anderen Fensters. Das Beispiel enthlt
einen Verweis. Beim Anklicken des Verweises wird die Funktion Wunsch() aufgerufen. Diese
Funktion blendet ein Dialogfenster ein, in dem der Anwender einen URI seiner Wahl eingeben
kann. Der eingegebene Wert wird in der Variablen Ziel gespeichert. Anschlieend wird durch
Zuweisung von Ziel an window.location.href ein Verweis zu diesem URI ausgefhrt. Es
muss sich dabei nicht um einen vollstndigen URI handeln. Ein Dateiname gengt, wenn der
Sprung einfach nur zu einer anderen Projektdatei im gleichen Verzeichnis fhren soll.
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Wunsch() {
var Ziel = window.prompt("Ihr Wunsch-URI:","");
window.location.href = Ziel;
}
//-->
</script>
</head><body>
<a href="javascript:Wunsch()">Wunschverweis</a>
</body></html>

pathname
Speichert den Pfadnamen innerhalb des aktuellen oder fensterspezifischen URI. Bei lokaler Verwendung (ohne HTTP-Protokoll) wird die vollstndige lokale Adresse gespeichert. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert("Aktueller Pfad: " + window.location.pathname);
//-->
</script>
</head><body>
</body></html>

Das Beispiel gibt beim Einlesen der Datei in einem Meldungsfenster den Pfadnamen des URI der
Datei aus. Sie knnen die Eigenschaft ndern. Sicherer ist es in diesem Fall jedoch, mit der
Eigenschaft href zu arbeiten.

896

Kapitel 20: JavaScript Objekt-Referenz

port
Speichert den Port innerhalb des aktuellen oder fensterspezifischen URI. Eine Adresse mit Ports
ist etwa http://www.xy.de:5080/ die Eigenschaft port enthlt nur dann einen Wert, wenn im
aktuellen URI tatschlich eine Portangabe enthalten ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(window.location.port != "")
alert(window.location.port);
//-->
</script>
</head><body>
</body></html>

Das Beispiel ermittelt beim Einlesen der Datei, ob eine Portangabe vorhanden ist. Wenn ja, wird
sie in einem Meldungsfenster ausgegeben. Sie knnen die Eigenschaft ndern. Dies kann jedoch
zu Fehlermeldungen fhren, wenn der Server den Port nicht kennt. Der Normal-Port fr
HTTP-Adressen ist 80.

protocol
Speichert das verwendete Protokoll innerhalb des aktuellen oder fensterspezifischen URI. Bei
HTTP-Adressen wird http: gespeichert. Bei lokaler Verwendung (ohne HTTP-Protokoll) wird
file: gespeichert. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert(window.location.protocol);
//-->
</script>
</head><body>
</body></html>

Das Beispiel gibt beim Einlesen der Datei das Protokoll aus, das zum aktuellen URI gehrt. Sie
knnen die Eigenschaft ndern. Dies kann jedoch zu Fehlermeldungen fhren, wenn das angegebene Protokoll mit der gleichen sonstigen Adresse nicht untersttzt wird.

search
Speichert eine Zeichenkette, die, durch ein Fragezeichen getrennt, zum aktuellen URI gehrt,
zum Beispiel: http://www.xy.de/index.htm?Browser=Netscape. In diesem Fall enthlt die Eigenschaft den Wert ?Browser=Netscape. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(window.location.search != "")
alert(window.location.search);

20.21 Array

897

//-->
</script>
</head><body>
</body></html>

Das Beispiel ermittelt beim Einlesen der Datei, ob der URI einen Teil hinter einem Fragzeichen
enthlt. Wenn ja, wird sie in einem Meldungsfenster ausgegeben. Sie knnen (funktioniert nur
mit Netscape) mit href eine andere Datei aufrufen und an den URI, durch ein Fragezeichen getrennt, Informationen anhngen, zum Beispiel solche, die Sie mit JavaScript ermittelt haben
Formulareingaben oder dergleichen. Die aufgerufene Datei kann solche Informationen auslesen
und weiterverarbeiten. Auf diese Weise ist Kommunikation zwischen Dateien mglich.
Beachten Sie: Opera 5.12 zeigt im Protokoll file: den HTML-Quelltext einer Datei an, sobald
diese einen Parameter erhlt.

reload()
Ldt eine WWW-Seite neu. Hat den gleichen Effekt wie der Reload-Button im Browser. Das
Beispiel definiert einen Verweis, bei dessen Anklicken die aktuelle Seite noch einmal neu geladen
wird:
<html><head><title>Test</title>
</head><body>
<a href="javascript:location.reload()">Reload</a>
</body></html>

replace()
Ldt einen anderen URI ber den aktuellen Eintrag in der Liste der besuchten Seiten (History).
Hat dadurch einen hnlichen Effekt wie die Eigenschaft href. Der Unterschied ist, dass der aktuelle URI anschlieend in der Liste der besuchten Seiten nicht mehr vorkommt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<a href="javascript:location.replace(datei2.htm)">Datei 2</a>
</body></html>

Das Beispiel definiert einen Verweis, bei dessen Anklicken datei2.htm geladen wird. Der aktuelle
URI verschwindet dabei aus der Liste der besuchten Seiten.

20.21 Array
Eigenschaften
Assoziative Arrays
length

(Arrays mit Zeichenketten als Schlssel)

(Anzahl Elemente)

898

Kapitel 20: JavaScript Objekt-Referenz

Methoden
concat()
join()
pop()
push()
reverse()
shift()
slice()
splice()
sort()
unshift()

(Arrays verketten)
(Array in Zeichenkette umwandeln)
(letztes Array-Element lschen)
(neue Array-Elemente anhngen)
(Elementreihenfolge umkehren)
(Erstes Array-Element entfernen)
(Teil-Array extrahieren)
(Elemente lschen und hinzufgen)
(Array sortieren)
(Elemente am Array-Anfang einfgen)

Array: Allgemeines zur Verwendung

Das Objekt Array ist als Container fr Ketten gleichartiger Variablen gedacht. In der Programmierersprache spricht man auch von einem Vektor. Wenn Sie beispielsweise die 16
Grundfarben speichern wollen, brauchen Sie keine 16 Variablen, sondern ein Array-Objekt, in
dem Sie 16 gleichartige Werte (im Beispiel: Farbwerte) speichern knnen.
Schema 1 / Beispiel 1:
Objektname = new Array();
MeineFrauen = new Array();

Schema 2 / Beispiel 2:
Objektname = new Array(Zahl);
MeineFrauen = new Array(100);

Schema 3 / Beispiel 3:
Objektname = new Array(Element0, Element1, ..., element_n);
MeineFrauen = new Array("Anita","Bettina","Christa","Doris");

Eine Objektinstanz von Array speichern Sie in einem selbst vergebenen Objektnamen. Hinter
dem Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort new und der Aufruf
der Objektfunktion Array().
Benutzen Sie Schema 1, wenn Sie zum Zeitpunkt der Definition noch nicht wissen, wie viele
Elemente in dem Variablenvektor gespeichert werden sollen. Benutzen Sie Schema 2, wenn Sie
zum Zeitpunkt der Definition bereits wissen, wie viele Elemente in dem Variablenvektor gespeichert werden sollen. Die Anzahl knnen Sie der Objektfunktion als Parameter bergeben.
Benutzen Sie Schema 3, um den Variablenvektor gleich mit Anfangswerten vorzubelegen. Bei
den Varianten 1 und 2 bleiben die einzelnen Variablen des Variablenvektors leer, bis ihnen im
Programmverlauf ein Wert zugewiesen wird. Nachdem Sie eine Instanz des Array-Objekts
erzeugt haben, knnen Sie es in Ihrem JavaScript-Code verwenden.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Zahlen = new Array(34,86,167,413);

20.21 Array

899

var x = Zahlen[1];
alert(x);
//-->
</script>
</head><body>
</body></html>

Nachdem Sie eine Instanz des Array-Objekts in einem Namen gespeichert haben (im Beispiel der
Name Zahlen), knnen Sie wie in der zweiten Zeile gezeigt einzelne Werte innerhalb des Variablenvektors ansprechen. Im Beispiel wird eine gewhnliche Variable x definiert. In dieser Variablen wird der Wert der zweiten Variablen des Zahlen-Vektors gespeichert, also 86. Beachten Sie,
dass der Zhler bei 0 beginnt, d.h. den ersten Wert im Vektor sprechen Sie im Beispiel mit Zahlen[0] an, den zweiten mit Zahlen[1] usw.
Beachten Sie: Sie knnen auch mehrdimensionale Arrays erzeugen.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var a = new Array(4)
for (var i=0; i < a.length; ++i)
a[i] = new Array(10);
a[3][1] = "Hallo";
alert(a[3][1]);
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert zunchst einen Array a mit 4 Elementen. Dann wird in einer for-Schleife
fr jedes dieser Elemente ein neuer Array definiert, wobei fr jeden Array 10 leere Elemente
erzeugt werden. Anschlieend knnen Sie durch eine Angabe wie a[3][1] das zweite Element
(1) im vierten Array (3) ansprechen. Im Beispiel wird dieses Element mit dem Wert Hallo
belegt. Zur Kontrolle wird der Wert in einem Meldungsfenster ausgegeben.

Assoziative Arrays
Assoziative Arrays sind solche, bei denen der Zugriff auf einzelne Elemente mit Hilfe einer Zeichenkette erfolgt. Die Zeichenkette wird als Schlssel fr den Zugriff bezeichnet. Alle JavaScriptObjekte, die eine Eigenschaft name oder id besitzen, wie zum Beispiel die Objekte forms oder
elements, stellen aus Sicht von JavaScript assoziative Arrays dar.
Assoziative Arrays sind besonders in Verbindung mit mehrdimensionalen Arrays sinnvoll. Sie
ermglichen es unabhngig von der Position, den Wert eines Elements zu ermitteln. Nachteil ist,
dass die Methoden des Array-Objekts nicht anwendbar sind. Auch kennen assoziative Arrays
keine Eigenschaft length. Elemente eines assoziativen Arrays knnen stets nur mit dem Namen
oder ber eine for-in-Schleife angesprochen werden. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">

900

Kapitel 20: JavaScript Objekt-Referenz

<!-var Mitarbeiter=new Array();

Mitarbeiter[0] = new Array();
Mitarbeiter[0]["Name"] = "Mller";
Mitarbeiter[0]["Vorname"] = "Hans";
Mitarbeiter[0]["Wohnort"]= "Dresden";
Mitarbeiter[1]=new Array()
Mitarbeiter[1]["Name"] = "Schulze";
Mitarbeiter[1]["Vorname"] = "Frauke";
Mitarbeiter[1]["Wohnort"]= "Berlin";
for (var i=0;i<Mitarbeiter.length;i++)
{
document.write("<dl><dt>Mitarbeiter "+(i+1)+"<\/dt>");
for (var Eigenschaft in Mitarbeiter[i])
document.write("<dd>"+ Eigenschaft + ":
"+Mitarbeiter[i][Eigenschaft]+"<\/dd>");
document.write("<\/dl>");
}
//-->
</script>
</body></html>

Das Beispiel definiert einen Array Mitarbeiter. Dieser Array besitzt zwei Elemente. Jedes dieser
Elemente stellt selbst wieder einen Array dar. Dabei handelt es sich jedoch um assoziative Arrays,
denn als Schlssel werden die Begriffe Name, Vorname und Wohnort verwendet. Jedem dieser
Elemente wird ein entsprechender Wert zugeordnet.
Die nachfolgende for-Schleife dient dazu, die Elemente des Arrays Mitarbeiter und die jeweiligen Eigenschaften auszugeben. Nach Beginn der for-Schleife wird zuerst mit der writeMethode der Beginn einer Definitionsliste in das Dokument geschrieben und dabei die laufende
Nummer des Mitarbeiters angegeben. Dies entspricht der um 1 erhhten Position im Array, da
bei Array-Elementen die Zhlung bei 0 beginnt. Anschlieend wird eine weitere, innere Schleife
aufgerufen. Da hierbei auf einen assoziativen Array zugegriffen wird, wird eine for-in-Schleife
verwendet. Diese Schleife durchluft jeden Index des angesprochenen assoziativen Arrays und
schreibt dessen Eigenschaft und den zugehrigen Wert ins Dokument. Ist die for-in-Schleife
beendet, so wird auch die Definitionsliste geschlossen und das nchste Element im Array
Mitarbeiter durchlaufen.

length
Speichert die Anzahl der Elemente in einem Array. Beachten Sie, dass alle JavaScript-Objekte, die
eine Eigenschaft length besitzen, wie zum Beispiel die Objekte forms oder elements, aus Sicht
von JavaScript Arrays darstellen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,4,8,16,32,64,128,256);
alert(Zahlen.length + " Zahlen sind definiert");

20.21 Array

901

//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert einen Array, bestehend aus 9 Zahlen. Anschlieend wird zur Kontrolle
ausgegeben, wie viele Elemente der Array enthlt.

concat()
Hngt einen Array an einen anderen an. Erwartet als Parameter den Namen des anzuhngenden
Arrays. Gibt den zusammengefgten Array als Array zurck. Sie knnen auch mehrere Arrays als
Parameter an die Methode bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,3);
var AndereZahlen = new Array(10,20,30);
ZahlenGesamt = Zahlen.concat(AndereZahlen);
alert(ZahlenGesamt.length);
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert zunchst zwei Arrays Zahlen und AndereZahlen mit je drei Zahlen. In der
Variablen Zahlengesamt wird anschlieend der Rckgabewert von concat() gespeichert, wobei die Methode auf den ersten definierten Array Zahlen angewendet wird und den zweiten
Array AndereZahlen an diesen Array anhngt. Zur Kontrolle wird nach der Operation die
Gesamtzahl der Elemente von ZahlenGesamt ausgegeben. Dieser Array enthlt nun die Werte
1,2,3,10,20,30 und hat deshalb also 6 Elemente.
Beachten Sie: Die Methode concat() erzeugt unterschiedliche Referenzen auf die ihr bergebenen Arrays. Ist in den miteinander zu verknpfenden Arrays ein Objekt gespeichert, so ist in
dem neu erzeugten Array eine Art Zeiger auf dieses Objekt gespeichert. Das bedeutet: Wird das
Objekt gendert, so ndert sich auch das von der Methode concat() erzeugte Array. Sind in den
verknpften Arrays jedoch Zahlen und Zeichenketten enthalten, so wird von diesen Werten eine
Kopie erzeugt. Nachtrgliche nderungen haben dann keinen Einfluss auf das von der Methode
concat() erzeugte Array. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen=new Array(1,2);
var mehrZahlen = new Array(Zahlen,3,4);
var AndereZahlen = new Array(5,6,7);
ZahlenGesamt = mehrZahlen.concat(AndereZahlen);
alert(ZahlenGesamt);
Zahlen[0]=70;

902

Kapitel 20: JavaScript Objekt-Referenz

alert("Zahlen: " +Zahlen);

AndereZahlen[0]=70;
alert("AndereZahlen: " +AndereZahlen);
alert("ZahlenGesamt: " +ZahlenGesamt);
//-->
</script>
</head><body>
</body></html>

Im Beispiel wurden drei Arrays angelegt. Das erste Element im Array mehrZahlen ist dabei der
Array Zahlen. Damit ist im Array mehrZahlen ein Objekt vom Typ Array gespeichert. Mit der
Methode concat() wird an den Array mehrZahlen der Array AndereZahlen angehngt. In der
Variablen ZahlenGesamt ist dann ein Array mit den Elementen 1,2,3,4,5,6,7 gespeichert.
Im nachfolgenden Script-Teil erhalten die ersten Elemente der Arrays Zahlen und AndereZahlen jeweils den Wert 70. Beide Arrays werden auch richtig gendert, wie die Kontrollausgabe
mittels eines Meldungsfensters zeigt. Im von der Methode concat() erzeugten Array ZahlenGesamt sind jetzt die Werte 70,2,3,4,5,6,7 gespeichert. Das letzte Meldungsfenster zeigt dies an.
Die nderung des Arrays Zahlen wurde also bernommen, die nderung im Array AndereZahlen dagegen nicht. Der Grund ist, dass der Array Zahlen als Objekt im Array mehrZahlen
enthalten war und deshalb jede nderung bernommen wird. Die Werte des Arrays AndereZahlen waren dagegen vom Typ Zahl, und es wurde lediglich eine Kopie angelegt. Nachtrgliche nderungen bleiben damit wirkungslos.

join()
Verwandelt einen Array in eine Zeichenkette. Erwartet als Parameter ein oder mehrere Trennzeichen, durch das/die die Array-Eintrge in der Zeichenkette voneinander getrennt sein sollen. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,4,8,16,32,64,128,256);
var Zahlenkette = Zahlen.join(" ");
alert(Zahlenkette);
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert einen Array mit 9 Zahlen. Dann wird die Methode join auf die Variable
Zahlen angewendet, in der der Array gespeichert ist. Dabei wird im Beispiel ein Leerzeichen als
Parameter bergeben. Der Rckgabewert der Prozedur wird in der Variablen Zahlenkette gespeichert. Der Effekt ist, dass in Zahlenkette alle definierten Zahlen stehen, und zwar durch
Leerzeichen voneinander getrennt. Zur Kontrolle wird das Ergebnis als Meldungsfenster ausgegeben.

20.21 Array

903

pop()
Entfernt das letzte Element aus einem Array und ndert dadurch die Anzahl der Elemente im
Array. Der Rckgabewert der Methode ist der Inhalt des gelschten Elementes. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,3,4,5);
alert(Zahlen.length + " Zahlen im Array");
function Entfernen()
{
Zahlen.pop();
alert(Zahlen.length + " Zahlen im Array");
}
//-->
</script>
</head><body>
<a href="javascript:Entfernen()">Zahl entfernen</a>
</body></html>

Das Beispiel definiert beim Einlesen der Datei einen Array Zahlen mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster die Elementanzahl ausgegeben. Im Dateikrper enthlt das
Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die Funktion Entfernen() aufgerufen, die mit der pop()-Methode jeweils das letzte Element aus dem Zahlen-Array entfernt.
Zur Kontrolle wird die neue Lnge des Arrays ausgegeben.
Beachten Sie: Bei Browsern, die pop() nicht kennen, knnen Sie das letzte Element entfernen,
indem Sie dem Array eine neue Lnge zuweisen, z.B. mit Zahlen.length=Zahlen.length-1.

push()
Hngt ein oder mehrere Elemente an das Ende eines Arrays an. Erwartet als Parameter ein oder
mehrere anzuhngende Elemente. Gibt in der JavaScript-Version 1.2 das letzte (neueste) Element zurck, in neueren JavaScript-Versionen dagegen die Lnge des Arrays. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Orte = new Array("Augsburg");
document.write(Orte.join(",") + <p>);
var NeuestesElement = Orte.push("Berlin");
document.write(Orte.join(",") + <br>);
document.write(Neu dabei: + NeuestesElement + <p>);
var NeuestesElement = Orte.push("Chemnitz","Dortmund","Essen","Frankfurt");
document.write(Orte.join(",") + <br>);
document.write(Neuestes Element: + NeuestesElement);
//-->
</script>
</body></html>

904

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel erzeugt in einem JavaScript, das im Dateikrper steht, einen Array Orte, in dem
zunchst nur ein Wert, nmlich Augsburg, gespeichert wird. Zur Kontrolle wird der Inhalt mit
der write()-Methode in die Datei geschrieben. Anschlieend wird dem Array mit der push()Methode ein Element angehngt, nmlich Berlin. Der Rckgabewert der Operation wird in der
Variablen NeuestesElement gespeichert. Zur Kontrolle wird dann der erweiterte Array und der
Rckgabewert in die Datei geschrieben. Der Array besteht jetzt aus den Elementen Augsburg
und Berlin. Das neueste Element ist Berlin. Dann werden nach dem gleichen Schema gleich
vier neue Elemente an den Array angehngt. Der Array besteht hinterher aus den zwei bisherigen
Stdten plus den vier neuen. In der Variablen NeuestesElement wird jedoch nur das letzte,
neueste Element gespeichert. Im Beispiel ist das Frankfurt. Zur Kontrolle werden auch diese
Vorgnge in die Datei geschrieben.
Beachten Sie: Bei Browsern, welche die Methode push() nicht kennen, knnen Sie ein neues
Element anhngen, indem Sie z.B. mit Zahlen[Zahlen.length]="Wert" das Array erweitern.

reverse()
Kehrt die Elementreihenfolge innerhalb eines Arrays um. Das erste Element ist hinterher das
letzte, das letzte das erste. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Name = new Array("S","T","E","F","A","N");
Name.reverse();
document.write(Name.join(""));
//-->
</script>
</body></html>

Das Beispiel definiert einen Array Name, dessen Elemente aus den einzelnen Buchstaben des
Namens Stefan bestehen. Anschlieend wird auf diesen Array die Methode reverse() angewendet. Mit Hilfe der join()-Methode wird der Array mit seiner neuen Elementreihenfolge
anschlieend so in die Datei geschrieben, dass keine Zeichen zwischen den Elementen stehen
(das wird durch die leere Zeichenkette "" bei join() erreicht). Als Effekt erscheint der Name
Stefan rckwrts geschrieben in der Datei.

shift()
Entfernt das erste Element aus einem Array. Die nachfolgenden Elemente rcken entsprechend
nach vorne. Das bisher zweite Element wird das neue erste usw. Gibt das entfernte Element zurck. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,3,4,5);
alert("Erste Zahl im Array: " + Zahlen[0]);
function Entfernen()
{

20.21 Array

905

var geloeschtesElement = Zahlen.shift();

alert("Erste Zahl im Array: " + Zahlen[0]);
}
//-->
</script>
</head><body>
<a href="javascript:Entfernen()">Zahl entfernen</a>
</body></html>

Das Beispiel definiert beim Einlesen der Datei einen Array Zahlen mit 5 Elementen. Zur Kontrolle wird in einem Meldungsfenster der Wert des ersten Elements ausgegeben, im Beispiel 1.
Im Dateikrper enthlt das Beispiel einen Verweis. Bei jedem Anklicken des Verweises wird die
Funktion Entfernen() aufgerufen, die mit der shift()-Methode jeweils das erste Element aus
dem Zahlen-Array entfernt. Zur Kontrolle wird das neue erste Element ausgegeben.

slice()
Extrahiert einen Teil aus einem Array. Erwartet als Parameter die Indexnummer des ersten und
des letzten zu extrahierenden Elements. Als Indexnummer fr das letzte Element kann auch ein
negativer Wert bergeben werden. Dies bedeutet so viel wie das soundsovielte Element von
hinten, wobei auch dort bei 0 zu zhlen begonnen wird. Ein Wert von -1 bedeutet also das vorletzte Element. Die Methode gibt die extrahierten Elemente als neuen Array zurck. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,3,4,5);
for(var i = 0; i < Zahlen.length; ++i)
{
var NeueZahlen = Zahlen.slice(i,Zahlen.length);
alert(NeueZahlen.join(","));
}
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert einen Array Zahlen mit 5 Elementen. Anschlieend ist eine for-Schleife
notiert. Die Schleife zhlt von 0 bis 4. Innerhalb der Schleife wird bei jedem Schleifendurchgang
das Ergebnis von Zahlen.slice(i,Zahlen.length) in einem neuen Array namens NeueZahlen gespeichert. Der Schleifenzhler i ist dabei die Indexnummer des ersten zu extrahierenden
Elements. Das letzte zu extrahierende Element wird im Beispiel durch Zahlen.length angegeben (was allerdings eigentlich nicht ganz korrekt ist, da die Anzahl der Elemente 1 hher ist als
der Index des letzten Elements Netscape interpretiert es jedoch auf diese Weise korrekt, der MS
Internet Explorer 4 interpretiert es dagegen eher wie erwartet. Dort muss man mit Zahlen.length-1 arbeiten). Durch die Angaben werden alle Elemente von Element i bis zum letzten Element extrahiert. Da i bei jedem Schleifendurchgang hher wird, werden im Beispiel
immer weniger Zahlen extrahiert, und zwar immer die hinteren des Arrays.
Beachten Sie: Die Methode slice() erzeugt unterschiedliche Referenzen auf die ihr bergebenen Arrays. Ist in den miteinander zu verknpfenden Arrays ein Objekt gespeichert, so ist in

906

Kapitel 20: JavaScript Objekt-Referenz

dem neu erzeugten Array eine Art Zeiger auf dieses Objekt gespeichert. Das bedeutet: Wird das
Objekt gendert, so ndert sich auch der von der Methode slice() erzeugte Array. Sind in den
verknpften Arrays dagegen Zahlen und Zeichenketten enthalten, so wird eine Kopie erzeugt.
Nachtrgliche nderungen haben dann keinen Einfluss auf den von slice() erzeugten Array.
In ihrer Referenzierung verhlt sich die Methode slice() genauso wie die Methode concat().

splice()
Fgt ein oder mehrere neue Elemente in einen Array ein, und zwar an einer bestimmten gewnschten Stelle. berschreibt dabei vorhandene Elemente. Erwartet folgende Parameter:
Startindex = Indexnummer im Array, an der das oder die neuen Elemente eingefgt werden
sollen.
Anzahl = Anzahl der einzufgenden Elemente.
... Element[e] = neue Elemente.
Der 3. und die folgenden Parameter sind optional. Wenn Sie nur die ersten beiden Parameter
angeben, werden leere Elemente eingefgt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(1,2,3);
Zahlen.splice(1,3,4,5,6);
alert(Zahlen.join(","));
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert einen Array Zahlen, bestehend aus 5 Elementen mit den Zahlen 1 bis 3.
Anschlieend wird auf diesen Array die splice()-Methode angewendet, und zwar so: An
Indexnummer 1, also bei der 2. Zahl im Array, werden 3 neue Elemente eingefgt, nmlich die
Elemente mit den Werten 4, 5 und 6. Die ehemaligen Elemente mit den Werten 2 und 3 werden
dabei mit den Werten 4 und 5 berschrieben. Das Element mit dem Wert 6 kommt neu hinzu.
Hinterher enthlt der Array also 4 Elemente mit folgenden Werten: 1,4,5,6.

sort()
Sortiert die Elemente eines Arrays. Wenn Sie keinen Parameter bergeben, wird lexikalisch sortiert, numerische Werte werden also intern in Zeichenketten verwandelt und wie Zeichenketten
sortiert. Dabei kommt beispielsweise die Zahl 13 vor der Zahl 7, weil 13 als Zeichenkette lexikalisch vor 7 kommt. Wenn Sie numerische Werte sortieren wollen, knnen Sie eine Vergleichsfunktion definieren und deren Namen als Parameter bergeben. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-function Numsort(a,b)
{ return a-b; }

20.21 Array

907

var Namen = new Array("Ina","Bettina","Tina","Martina");

Namen.sort();
var Zahlen = new Array(27,2,10,4);
Zahlen.sort(Numsort);
var Namenausgabe = Namen.join(",");
var Zahlenausgabe = Zahlen.join(",");
document.write("sortierte Namen: " + Namenausgabe + "<br>");
document.write("sortierte Zahlen: " + Zahlenausgabe);
//-->
</script>
</body></html>

Das Beispiel zeigt, wie Sie Zeichenketten und numerische Werte sortieren knnen. Im Beispiel
wird ein Array Namen definiert, dessen Elemente Zeichenketten darstellen. Um einen solchen
Array zu sortieren, gengt es, die Methode sort() einfach auf den Array anzuwenden. Die Elemente des Arrays werden dann neu angeordnet, nmlich lexikalisch aufsteigend sortiert. Um
Zahlen zu sortieren, brauchen Sie eine einfache Vergleichsfunktion. Sie knnen dazu die im Beispiel definierte Funktion Numsort() verwenden. Das Beispiel definiert einen Array Zahlen und
wendet die sort()-Methode auf diesen Array so an, dass der Funktionsname Numsort als Parameter bergeben wird. Dadurch werden die Elemente des Arrays numerisch sortiert.
Die Funktion Numsort() regelt, wie zwei Elemente sortiert werden. Sie besitzt die Parameter a
und b. Whrend des Sortiervorganges wird die Funktion mit jeweils 2 Array-Elementen aufgerufen. Ein erwarteter Rckgabewert ist eine Zahl, die entweder kleiner, gleich oder grer als 0
ist. Eine solche Zahl entsteht durch die Differenz der beiden Parameter. Ist der Rckgabewert
von Numsort() grer als 0, so bedeutet das, der Parameter a hat einen hheren Index als der
Parameter b. In der Sortierreihenfolge kommt damit b vor a. Ist der Rckgabewert von Numsort() kleiner als 0, so bedeutet das, der Parameter a hat einen niedrigeren Index als der Parameter b. In der Sortierreihenfolge kommt damit a vor b. Tritt der Rckgabewert 0 ein, so sind
beide Elemente gleich und brauchen in ihrer Reihenfolge nicht verndert werden.
Wenn Sie eine umgekehrte Sortierreihenfolge wnschen, wenden Sie nach der sort()-Methode
die reverse()-Methode an.

unshift()
Fgt am Anfang eines Arrays ein oder mehrere neue Elemente ein. Erwartet als Parameter die
einzufgenden Elemente. Gibt die neue Elementzahl des Arrays zurck. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahlen = new Array(5,6,7,8,9);
var NeueAnzahl = Zahlen.unshift(1,2,3,4);
alert(NeueAnzahl);
alert(Zahlen.join(","));
//-->
</script>
</head><body>
</body></html>

908

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel definiert einen Array Zahlen mit 5 Elementen, nmlich den Zahlen von 5 bis 9.
Anschlieend werden dem Array mit Hilfe der unshift()-Methode am Anfang 4 neue Zahlen
hinzugefgt, nmlich die Zahlen von 1 bis 4. Der Rckgabewert der Operation wird in der Variablen NeueAnzahl gespeichert. Zur Kontrolle wird anschlieend zunchst der Wert von NeueAnzahl ausgegeben und danach der komplette neue Array. Die Anzahl der Elemente ist nun 9,
und der Array besteht aus den Elementen 1,2,3,4,5,6,7,8,9.

20.22 Boolean
Boolean: Allgemeines zur Verwendung
Das Objekt Boolean ist zum Erzeugen von JavaScript-Standardwerten true (wahr) und false
(falsch) gedacht. Solche Werte sind vor allem als Rckgabewerte fr Funktionen gedacht.
Boolesche Objekte werden bei der Definition immer mit einem der beiden mglichen Werte
initialisiert und behalten diesen Wert auch. Die Variablen, in denen der Initialisierungswert gespeichert wird, stellen also Konstanten dar.
Beispiele fr Initialisierung mit true:
wahr = new Boolean(true);
ja = new Boolean("irgendwas");

Beispiele fr Initialisierung mit false:

falsch = new Boolean();
unwahr = new Boolean(0);
nix = new Boolean(null);
leer = new Boolean("");
Fehler = new Boolean(false);

Um eine Boolesche Konstante mit dem Wert true zu initialisieren, notieren Sie hinter dem frei
vergebbaren Namen der Konstante die Objektfunktion new Boolean(). Als Parameter bergeben Sie der Funktion entweder den Wert true (ohne Anfhrungszeichen) oder eine beliebige
Zeichenkette.
Um die Boolesche Konstante mit dem Wert false zu initialisieren, bergeben Sie entweder gar
nichts, oder den Wert 0, oder den Wert null (ohne Anfhrungszeichen), oder den Wert false
(ohne Anfhrungszeichen) oder eine leere Zeichenkette.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function LayerCheck() {
var wahr = new Boolean(true);
var falsch = new Boolean(false);
if(document.layers) return wahr;
else return falsch;
}
//-->

20.23 Date

909

</script>
</head><body>
<a href="javascript:alert(LayerCheck())">auf Layer checken</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird der Rckgabewert der
Funktion LayerCheck() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist.
Wenn der Browser das layers-Objekt kennt, wird die zuvor definierte Konstante wahr zurckgegeben, wenn nicht, dann die Konstante falsch. Der Rckgabewert ist jedoch nicht der Name
der Konstante, sondern der voreingestellte Wert in JavaScript. Es wird also entweder true oder
false augegeben, je nachdem, ob der Browser Layer kennt oder nicht.

20.23 Date
Methoden
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
getYear()
parse()
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCDay()
setUTCFullYear()
setUTCHours()

(Monatstag ermitteln)
(Wochentag ermitteln)
(volles Jahr ermitteln)
(Stundenteil der Uhrzeit ermitteln)
(Millisekunden ermitteln)
(Minutenteil der Uhrzeit ermitteln)
(Monat ermitteln)
(Sekundenteil der Uhrzeit ermitteln)
(Zeitpunkt ermitteln)
(Zeitzonenabweichung der Lokalzeit ermitteln)
(Monatstag von UTC-Zeit ermitteln)
(Wochentag von UTC-Zeit ermitteln)
(volles Jahr von UTC-Zeit ermitteln)
(Stundenteil der UTC-Uhrzeit ermitteln)
(Millisekundenteil der UTC-Uhrzeit ermitteln)
(Minutenteil der UTC-Uhrzeit ermitteln)
(Monat von UTC-Uhrzeit ermitteln)
(Sekundenteil der UTC-Uhrzeit ermitteln)
(Jahr ermitteln)
(Millisekunden seit dem 1.1.1970 ermitteln)
(Monatstag setzen)
(volles Jahr setzen)
(Stunden der Uhrzeit setzen)
(Millisekunden setzen)
(Minuten der Uhrzeit setzen)
(Monat setzen)
(Sekunden der Uhrzeit setzen)
(Datum und Uhrzeit setzen)
(Monatstag fr UTC-Zeit setzen)
(Wochentag fr UTC-Zeit setzen)
(volles Jahr fr UTC-Zeit setzen)
(Stunden der UTC-Zeit setzen)

910

Kapitel 20: JavaScript Objekt-Referenz

setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
setYear()
toGMTString()
toLocaleString()
UTC()

(Millisekunden der UTC-Zeit setzen)

(Minuten der UTC-Zeit setzen)
(Monat fr UTC-Zeit setzen)
(Sekunden der UTC-Zeit setzen)
(Datum und Uhrzeit setzen)
(Zeitpunkt in GMT-Format konvertieren)
(Zeitpunkt in lokales Format konvertieren)
(GMT-Zeit seit dem 1.1.1970 ermitteln)

Date: Allgemeines zur Verwendung

Das Objekt Date ist fr alle Berechnungen mit Datum und Zeit zustndig. Dabei gibt es, wie in
der EDV blich, einen fixen historischen Zeitpunkt, der intern als Speicherungs- und Berechnungsbasis dient. In JavaScript ist dies wie in der C- und Unix-Welt der 1. Januar 1970, 0.00
Uhr. Die Einheit, in der in JavaScript intern Zeit berechnet wird, ist eine Millisekunde. Bevor Sie
ber JavaScript Zugriff auf die eingebauten Datums- und Uhrzeitfunktionen haben, mssen Sie
ein neues Date-Objekt erzeugen. Dabei gibt es mehrere Varianten.
Variante 1:
Objektname = new Date();

Variante 2:
Objektname = new Date("Monat Tag, Jahr Stunden:Minuten:Sekunden");

Variante 3:
Objektname = new Date(Jahr,Monat,Tag);

Variante 4:
Objektname = new Date(Jahr,Monat,Tag,Stunden,Minuten,Sekunden);

Eine neues Date-Objekts speichern Sie in einem selbst vergebenen Objektnamen. Hinter dem
Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort new und der Aufruf der
Objektfunktion Date().
Benutzen Sie die Variante 1, wenn Sie eine Objektinstanz erzeugen wollen, in der das zum Zeitpunkt der Programmausfhrung aktuelle Datum und die aktuelle Uhrzeit gespeichert werden
sollen. Benutzen Sie eine der Varianten 2 bis 4, wenn Sie das neue Datum-Objekt mit bestimmten
Werten (also einem bestimmten Datum und einer bestimmten Uhrzeit) initialisieren wollen.
Alle Initialisierungswerte wie Monat oder Minuten mssen Sie in Zahlenform angeben, also etwa
9 fr Monat Oktober. Ausnahme: Bei Variante (2) bergeben Sie die Initialisierungsdaten als
Zeichenkette. Dabei wird der Monat in englischer Schreibweise angegeben, also beispielsweise
october. Wenn Sie einen Monat als Zahlenwert bergeben, so wie in den Varianten 3 und 4,
mssen Sie bei 0 zu zhlen beginnen. Fr Januar mssen Sie also 0 bergeben, fr Februar 1, und
fr Dezember 11. Dies ist auch der Grund, warum fr den Monat Oktober nicht 10, sondern 9
bergeben wird. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function bis2020() {

20.23 Date

911

var jetzt = new Date();

var Zeit = jetzt.getTime() / 1000;
var Jahr2020 = new Date(2020,0,1,0,0,0);
var Endzeit = Jahr2020.getTime() / 1000;
var Rest = Math.floor(Endzeit - Zeit);
alert("Noch " + Rest + " Sekunden bis zum Jahr 2020");
}
//-->
</script>
</head><body>
<a href="javascript:bis2020()">Wie lange noch?</a>
</body></html>

Das Beispiel zeigt eine vollstndige JavaScript-Funktion. Die Funktion ermittelt die Anzahl
Sekunden zwischen aktuellem Zeitpunkt und dem Jahr 2020. Dazu wird in jetzt eine neue
Instanz von Date mit der aktuellen Zeit erzeugt. Fr den Zeitpunkt, an dem das Jahr 2020
beginnt, wird eine zweite Objektinstanz von Date erzeugt, nmlich in Jahr2020. Dazu werden
der Objektfunktion Date() entprechende Parameter bergeben. ber die beiden Objektnamen
jetzt bzw. Jahr2020 wird dann die Methode Objektname.getTime() aufgerufen. getTime()
liefert die Anzahl Millisekunden seit dem 1.1.1970 zurck. In der Variablen Zeit wird auf diese
Weise die Anzahl Sekunden zwischen dem 1.1.1970 und dem aktuellen Zeitpunkt gespeichert,
und in der Variablen Endzeit die Anzahl Sekunden zwischen dem 1.1.1970 und dem 1.1.2020.
Die Differenz der beiden Werte wird in der Variablen Rest gespeichert und mit alert() in
einem Meldungsfenster am Bildschirm ausgegeben.
Beachten Sie: Alle Methoden, mit denen Sie einen aktuellen Zeitpunkt oder einen Teil davon,
etwa den Wochentag oder den Monat, ermitteln knnen, beziehen sich auf die Zeit, die auf der
Systemzeit des Anwenderrechners basiert. Denn JavaScript wird beim Anwender von dessen
Browser ausgefhrt. Die aktuelle Systemzeit des Server-Rechners knnen Sie mit JavaScript nicht
ermitteln das geht beispielsweise mit einem CGI-Script.

getDate()
Liefert den Monatstag des Objekts Objektname als Zahl zurck, beispielsweise 2, wenn in
Objektname der 2.10.1991, 23:59:00 gespeichert ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var jetzt = new Date();
var Tag = jetzt.getDate();
document.write(<table border bgcolor="#CCFFFF"><tr><td><font size="7">);
document.write(Tag + "<\/font><\/td><\/tr><\/table>");
//-->
</script>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getDate() wird das aktuelle Tagesdatum innerhalb des Monats ermittelt.
Der Rckgabewert des Aufrufs wird in der Variablen Tag gespeichert. Anschlieend wird mit

912

Kapitel 20: JavaScript Objekt-Referenz

Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei geschrieben, in der das
aktuelle Tagesdatum formatiert ausgegeben wird. Damit ein Maskieren der " entfllt, wurde als
Textbegrenzerzeichen das gewhlt.

getDay()
Liefert den Wochentag des Objekts Objektname als Zahl zurck, und zwar in Form von Zahlen
zwischen 0 (fr Sonntag), 1 (fr Montag) usw. bis 6 (fr Samstag), also beispielsweise 3, wenn in
Objektname der 2.10.1991, 23:59:00, gespeichert ist, da der 2.10.1991 ein Mittwoch war. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var jetzt = new Date();
var TagInWoche = jetzt.getDay();
var Wochentag = new
Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
document.write(<table border bgcolor="#CCFFFF"><tr><td><b>);
document.write(Wochentag[TagInWoche] + "<\/b><\/td><\/tr><\/table>");
//-->
</script>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getDay() wird der numerische Wert des aktuellen Wochentags ermittelt.
Der Rckgabewert des Aufrufs wird in der Variablen TagInWoche gespeichert. Es soll jedoch ein
richtiger Wochentagsname ausgegeben werden. Deshalb wird im Beispiel ein Array-Objekt mit
deutschen Wochentagnamen erzeugt. Das erste Element ist dabei der Sonntag, da der Rckgabewert von getDay() ebenfalls intern mit Sonntag als erstem Wochentag rechnet.
Anschlieend wird mit Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei
geschrieben, in der das aktuelle Tagesdatum formatiert ausgegeben wird. Beachten Sie, dass die
Variable TagInWoche dabei als Index fr die Ausgabe des richtigen Elements aus dem Array
Wochentag benutzt wird.

getFullYear()
Liefert im Gegensatz zu getYear() beim Netscape-Browser das volle Jahr zurck. Beim Internet
Explorer liefern beide Methoden den gleichen Wert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var jetzt = new Date();
var Jahr = jetzt.getFullYear();
document.write("Wir befinden uns im Jahr " + Jahr);
//-->
</script>
</body></html>

20.23 Date

913

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getFullYear() wird das volle aktuelle Jahr ermittelt. Der Rckgabewert des
Aufrufs wird in der Variablen Jahr gespeichert. Anschlieend wird zur Kontrolle ein Text mit
der Ausgabe dieser Variablen ins Dokumentfenster geschrieben.

getHours()
Liefert die Stunden der Uhrzeit des Objekts Objektname als Zahl zurck, beispielsweise 23, wenn
in Objektname der 2.10.1991, 23:59:00, gespeichert ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var jetzt = new Date();
var Std = jetzt.getHours();
if(Std >= 5 && Std < 12) alert("Guten Morgen!");
else if(Std >= 12 && Std < 18) alert("Guten Tag!");
else if(Std >= 18 && Std <= 23) alert("Guten Abend!");
else if(Std >= 0 && Std < 5) alert("Zeit, ins Bett zu gehen!");
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getHours() wird die Stunde des Tages ermittelt. Der Rckgabewert des Aufrufs wird in der Variablen Std gespeichert. Anschlieend wird ein Meldungsfenster mit einem
tageszeitabhngigen Text ausgegeben, je nachdem, in welchem Bereich der Wert von Std liegt.

getMilliseconds()
Ermittelt die Anzahl der Millisekunden seit der letzten vollen Sekunde. Das Beispiel enthlt ein
Formular mit einem Eingabefeld und einem Klick-Button. Beim Anklicken des Buttons wird die
Funktion aktualisieren() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt ein
neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen zeit. Mit zeit.getMilliseconds() werden die Millisekunden seit der letzten vollen Sekunde ermittelt. Der
Rckgabewert des Aufrufs wird in der Variablen ms gespeichert. Anschlieend wird der Wert des
Formulareingabefeldes mit dem ermittelten Wert belegt, um das Ergebnis anzuzeigen.
<html><head><title>Test</title>
<script type="text/javascript">
<!-function aktualisieren() {
var zeit = new Date();
var ms = zeit.getMilliseconds();
document.Formular.Ausgabe.value = ms;
}
//-->
</script>
</head><body onLoad="document.Formular.Ausgabe.value=0">
<form name="Formular" action="">

914

Kapitel 20: JavaScript Objekt-Referenz

<input name="Ausgabe" type="text">

<input type="button" value="aktualisieren" onClick="aktualisieren()">
</form>
</body></html>

getMinutes()
Liefert die Minuten der Uhrzeit des Objekts Objektname als Zahl zurck, beispielsweise 59,
wenn in Objektname der 2.10.1991, 23:59:00 gespeichert ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var jetzt = new Date();
var Std = jetzt.getHours();
var Min = jetzt.getMinutes();
var StdAusgabe = ((Std < 10) ? "0" + Std : Std);
var MinAusgabe = ((Min < 10) ? "0" + Min : Min);
alert("Bei Ihnen ist es jetzt " + StdAusgabe + "." + MinAusgabe + " Uhr");
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getHours() wird die Stunde des Tages ermittelt, mit jetzt.getMinutes()
die Minutenzahl. Der Rckgabewert der Aufrufe wird in den Variablen Std und Min gespeichert.
Dann wird die Stundenzahl und die Minutenzahl fr die Ausgabe formatiert. Wenn die Anzahl
der Stunden oder Minuten kleiner 10 ist, wird eine 0 davorgesetzt. Schlielich wird ein Meldungsfenster mit der aktuellen Uhrzeit ausgegeben.

getMonth()
Liefert den Monat des Objekts Objektname als Zahl zurck, beispielsweise 9, wenn in Objektname der 2.10.1991, 23:59:00, gespeichert ist. Beachten Sie, dass die Monatszhlung bei 0 beginnt. 0 ist also Januar, 1 ist Februar usw. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var jetzt = new Date();
var Jahresmonat = jetzt.getMonth();
var Monat = new
Array("Januar","Februar","M&auml;rz","April","Mai","Juni",
"Juli","August","September","Oktober","November","Dezember");
document.write(<table border bgcolor="#CCFFFF"><tr><td><b>);
document.write(Monat[Jahresmonat] + "<\/b><\/td><\/tr><\/table>");
//-->
</script>
</body></html>

20.23 Date

915

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getMonth() wird der numerische Wert des aktuellen Monats ermittelt. Der
Rckgabewert des Aufrufs wird in der Variablen Jahresmonat gespeichert. Es soll jedoch ein
richtiger Monatsname ausgegeben werden. Deshalb wird im Beispiel ein Array-Objekt mit
deutschen Monatsnamen erzeugt.
Anschlieend wird mit Hilfe von document.write() dynamisch eine kleine Tabelle in die Datei
geschrieben, in der der aktuelle Monat formatiert ausgegeben wird. Beachten Sie, dass die Variable Jahresmonat dabei als Index fr die Ausgabe des richtigen Elements aus dem Array Monat
benutzt wird. Da auch bei Arrays bei 0 zu zhlen begonnen wird, wird beispielsweise Januar
geschrieben, wenn in Jahresmonat der Wert 0 gespeichert ist, oder Februar, wenn in Jahresmonat 1 gespeichert ist.

getSeconds()
Liefert die Sekunden der Uhrzeit des Objekts Objektname als Zahl zurck, beispielsweise 0,
wenn in Objektname der 2.10.1991, 23:59:00, gespeichert ist. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zaehler = 0;
function Anzeige() {
var jetzt = new Date();
var Sekunden = jetzt.getSeconds();
alert(Sekunden);
Zaehler = Zaehler + 1;
if(Zaehler < 3) Anzeige();
}
Anzeige();
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert eine Funktion Anzeige(). Darin wird ein neues Datumobjekt mit dem
aktuellen Zeitpunkt in dem Objektnamen jetzt erzeugt. Mit jetzt.getSeconds() wird die
Sekundenzahl innerhalb der aktuellen Minute der Uhrzeit ermittelt. Der Rckgabewert des Aufrufs wird in der Variablen Sekunden gespeichert. Dann wird die Sekundenzahl ausgegeben.
Nachdem der Anwender das Meldungsfenster mit der Anzeige besttigt hat, wird die Variable
Zaehler um 1 erhht. Solange diese Variable kleiner 3 ist, wird die Funktion Anzeige() erneut
aufgerufen. Dabei werden alle Anweisungen innerhalb der Funktion wiederholt.

getTime()
Liefert die Anzahl Millisekunden als Zahl zurck, die seit dem 1. Januar 1970, 0:00:00, bis zu
dem in Objektname gespeicherten Zeitpunkt vergangen sind. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!--

916

Kapitel 20: JavaScript Objekt-Referenz

var jetzt = new Date();

alert(jetzt.getTime());
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit alert(jetzt.getTime()) wird die aktuelle Anzahl von Millisekunden, die seit dem
1.1.1970 vergangen sind, in einem Meldungsfenster ausgegeben. Probieren Sie das ruhig mal aus,
um ein Gefhl fr die Grenordnung der Werte zu bekommen, die getTime() liefert.

getTimezoneOffset()
Liefert den Unterschied zwischen lokaler Rechnerzeit und Greenwich Mean Time (GMT) in
Anzahl Minuten zurck. Je nach lokaler Zeitzone, die in der Systemzeit des Anwenderrechners
definiert ist, ist der Rckgabewert positiv oder negativ. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var jetzt = new Date();
var Unterschied = jetzt.getTimezoneOffset() / 60;
alert("Unterschied zu Greenwich: " + Unterschied + " Stunde(n)");
//-->
</script>
</head><body>
</body></html>

Das Beispiel mchte den Unterschied zwischen Greenwich-Zeit und lokaler Zeit in Stunden ausgeben. Dazu erzeugt es ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen jetzt. Dann wird die Methode getTimezoneOffset() fr dieses Datumobjekt aufgerufen. Um keine Minutenzahlen, sondern Stundenzahlen zu erhalten, wird der Rckgabewert
gleich durch 60 geteilt. Das Ergebnis wird in der Variablen Unterschied gespeichert. In einem
Meldungsfenster wird das Ergebnis anschlieend ausgegeben.
Beachten Sie: Die Sommerzeit wird von dieser Methode nicht bercksichtigt.

getUTCDate()
Diese Methode ist funktional identisch mit getDate(), liefert ihren Wert jedoch nicht fr die
lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

getUTCDay()
Diese Methode ist funktional identisch mit getDay(), liefert ihren Wert jedoch nicht fr die
lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

20.23 Date

917

getUTCFullYear()
Diese Methode ist funktional identisch mit getFullYear(), liefert ihren Wert jedoch nicht fr
die lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

getUTCHours()
Diese Methode ist funktional identisch mit getHours(), liefert ihren Wert jedoch nicht fr die
lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

getUTCMilliseconds()
Diese Methode ist funktional identisch mit getMilliseconds(), liefert ihren Wert jedoch nicht
fr die lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

getUTCMinutes()
Diese Methode ist funktional identisch mit getMinutes(), liefert ihren Wert jedoch nicht fr
die lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

getUTCMonth()
Diese Methode ist funktional identisch mit getMonth(), liefert ihren Wert jedoch nicht fr die
lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

getUTCSeconds()
Diese Methode ist funktional identisch mit getSeconds(), liefert ihren Wert jedoch nicht fr
die lokale Zeit, sondern fr die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

getYear()
Liefert das Jahr des Objekts Objektname als Zahl zurck, beispielsweise 1991, wenn in Objektname der 2.10.1991, 23:59:00, gespeichert ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var jetzt = new Date();
var Jahr = jetzt.getYear();
if(Jahr < 999) Jahr+=1900;
document.write("<h1>" + Jahr + "<\/h1>");

918

Kapitel 20: JavaScript Objekt-Referenz

//-->
</script>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt mit dem aktuellen Zeitpunkt in dem Objektnamen
jetzt. Mit jetzt.getYear() wird das aktuelle Jahr ermittelt. Der Rckgabewert des Aufrufs
wird in der Variablen Jahr gespeichert. Manche Browser geben die Jahreszahl noch zweistellig
aus. Fr diesen Fall wird die Jahreszahl um 1900 erhht. Anschlieend wird mit Hilfe von document.write() dynamisch eine Zeile in die Datei geschrieben, in der das aktuelle Jahr formatiert
ausgegeben wird.

parse()
Ermittelt aus einer als Parameter zu bergebenden Zeichenkette Zeitpunkt die Anzahl Millisekunden, die zwischen dem 1.1.1970 0:00:00, und dem bergebenen Zeitpunkt verstrichen sind.
Beachten Sie, dass Sie zum Aufrufen dieser Methode kein neues Date-Objekt erzeugen mssen,
sondern direkt mit Date arbeiten knnen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var DreissigJahre = Date.parse("Tue, 1 Jan 2000 00:00:00 GMT");
alert(DreissigJahre);
//-->
</script>
</head><body>
</body></html>

Das Beispiel ermittelt die Anzahl Millisekunden zwischen dem 1.1.1970 und dem 1.1.2000. Das
Ergebnis wird in der Variablen DreissigJahre gespeichert. Zur Kontrolle wird die Zahl in
einem Meldungsfenster ausgegeben.

setDate()
ndert den Monatstag, der in Objektname gespeichert ist. Der neue Monatstag ist als Parameter
zu bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 1 und 31 bergeben. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zeit = new Date("March 10, 1998 22:48:00");
var Tag = Zeit.getDate();
alert(Tag);
Zeit.setDate(1);
Tag = Zeit.getDate();
alert(Tag);
//-->
</script>
</head><body>
</body></html>

20.23 Date

919

Das Beispiel erzeugt ein neues Datumobjekt Zeit mit einem bestimmten Zeitpunkt, der im
GMT-Format angegeben wird. Zur Kontrolle ermittelt das Beispiel den aktuellen Tag im Monat
aus dem definierten Zeitpunkt und gibt ihn in einem Meldungsfenster aus. Dann wird die
Methode setDate() auf den Objektnamen Zeit angewendet. Im Beispiel wird der Tag des
Monats auf 1 gesetzt. Anschlieend wird zur Kontrolle der neue Tag im Monat ermittelt und
anschlieend ausgegeben.

setFullYear()
ndert die Jahreszahl, die in Objektname gespeichert ist. Das neue Jahr ist als Parameter zu
bergeben. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var zeit = new Date();
var zukunft = zeit.setFullYear(2037);
document.write("irgendwann schreiben wir das Jahr " + zeit.getUTCFullYear());
//-->
</script>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt zeit. Dann wird die Methode setFullYear() auf
den Objektnamen zeit angewendet. Im Beispiel wird das Jahr auf 2037 gesetzt. Anschlieend
wird das Ergebnis zur Kontrolle ins Dokument geschrieben.

setHours()
ndert die Stunden der Uhrzeit, die in Objektname gespeichert sind. Die Stundenzahl ist als
Parameter zu bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 23 bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zeit = new Date();
var Std = Zeit.getHours();
alert(Std);
Zeit.setHours(23);
Std = Zeit.getHours();
alert(Std);
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt. Zur Kontrolle
ermittelt das Beispiel die Stundenzahl aus der Tageszeit und gibt sie in einem Meldungsfenster
aus. Dann wird die Methode setHours() auf den Objektnamen Zeit angewendet. Im Beispiel

920

Kapitel 20: JavaScript Objekt-Referenz

wird die Stundenzahl der Uhrzeit auf 23 gesetzt. Anschlieend wird zur Kontrolle der neue
Stundenanteil an der Uhrzeit ermittelt und anschlieend ausgegeben.

setMilliseconds()
ndert die Millisekunden des Zeitpunkts, der in Objektname gespeichert ist. Die Millisekundenzahl ist als Parameter zu bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und
999 bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function set0() {
zeit = new Date();
zeit.setMilliseconds(0);
}
function getNow() {
zeit = new Date();
alert(zeit.getMilliseconds() + " ms sind zwischen den Klicks vergangen");
}
//-->
</script>
</head><body>
<p>Klicken Sie auf den ersten Verweis und dann ganz schnell auf den zweiten!</p>
<p><a href="javascript:set0()">erster</a>
<a href="javascript:getNow()">zweiter</a></p>
</body></html>

Das Beispiel enthlt zwei Verweise. Der Anwender soll zunchst den ersten anklicken und dann
innerhalb einer Sekunde den zweiten. Beide Verweise rufen jeweils eine Funktion auf, die im
Dateikopf notiert ist. Der erste Verweis ruft set0() auf. Darin wird ein neues Datumobjekt zeit
mit dem aktuellen Zeitpunkt erzeugt. Anschlieend wird mit zeit.setMilliseconds(0) die
Anzahl der Millisekunden auf 0 gesetzt. Die Funktion getNow(), die der andere Verweis aufruft,
erzeugt ebenfalls ein Datumobjekt mit dem aktuellen Zeitpunkt, gibt dann aber mit
zeit.getMilliseconds() die verstrichenen Millisekunden seit dem Setzen auf 0 aus.

setMinutes()
ndert die Minuten der Uhrzeit, die in Objektname gespeichert sind. Die Minutenzahl ist als
Parameter zu bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 59 bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Andersrum() {
var Zeit = new Date();
var Min = Zeit.getMinutes();
var MinNeu = Zeit.setMinutes(60-Min);
var Min = Zeit.getMinutes();

20.23 Date

921

return(Min);
}
//-->
</script>
</head><body>
<a href="javascript:alert(Andersrum())">Test</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird der Rckgabewert der
Funktion Andersrum() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Dort
wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Aus dem Zeitpunkt
wird die Minutenzahl aus der Uhrzeit ermittelt. Mit der Methode setMinutes() wird die Minutenzahl innerhalb der Stunde umgekehrt. War es vorher beispielsweise 18.12 Uhr, ist es anschlieend 18.48 Uhr. Der neue Minutenanteil an der Uhrzeit wird noch mal ermittelt und anschlieend zurckgegeben. Eine solche Funktion knnte etwa als Teil einer rckwrts gehenden Uhr
Sinn machen.

setMonth()
ndert den Monat, der in Objektname gespeichert ist. Der gewnschte Wert ist als Parameter zu
bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 11 bergeben. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function andererMonat() {
var Zeit = new Date();
var Tag = Zeit.getDate();
Zeit.setMonth(Math.round(Math.random() * 11));
var Monat = Zeit.getMonth();
return(Tag + "." + (Monat+1) + ".");
}
//-->
</script>
</head><body>
<a href="javascript:alert(andererMonat())">Test</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird der Rckgabewert der
Funktion andererMonat() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist.
Dort wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Mit der Methode
setMonth() wird ein neuer Monat gesetzt und zwar per Zufall. Dazu wird mit Hilfe von
Math.round() und Math.random() eine zufllige Ganzzahl zwischen 0 und 11 ermittelt. Diese
Zahl wird der setMonth()-Methode als Parameter bergeben. Die neue Monatszahl wird noch
mal ermittelt und anschlieend so formatiert zurckgegeben, dass ein sinnvolles Tagesdatum
angezeigt wird.

922

Kapitel 20: JavaScript Objekt-Referenz

setSeconds()
ndert die Sekunden der Uhrzeit, die in Objektname gespeichert sind. Die Sekundenzahl ist als
Parameter zu bergeben. Achten Sie darauf, dass Sie sinnvolle Werte zwischen 0 und 59 bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Uhrzeit() {
var Zeit = new Date();
var Std = Zeit.getHours();
var Min = Zeit.getMinutes();
var Sek = Zeit.getSeconds();
var SekNeu = Zeit.setSeconds(Math.floor(Sek / 10));
Sek = Zeit.getSeconds();
return(Std + ":" + Min + ":" + Sek + "0");
}
//-->
</script>
</head><body>
<a href="javascript:alert(Uhrzeit())">Uhrzeit</a>
</body></html>

Das Beispiel enthlt einen Verweis. Beim Anklicken des Verweises wird der Rckgabewert der
Funktion Uhrzeit() ausgegeben, die in einem Script-Bereich im Dateikopf notiert ist. Das ist
die aktuelle Uhrzeit, jedoch so ausgegeben, dass Sekunden immer nur in 10er-Scrhitten ausgegeben werden. Eine Ausgabe wie 18.10:37 ist also nicht mglich, die Funktion macht 18:10:30
daraus. Zu diesem Zweck wird in der Funktion ein neues Datumobjekt Zeit mit dem aktuellen
Zeitpunkt erzeugt. Aus dem Zeitpunkt werden die Bestandteile der Uhrzeit ermittelt. Mit der
Methode setSeconds() wird die Sekundenzahl behandelt. Durch eine kleine mathematische
Operation wird aus der mglichen Sekundenzahl zwischen 0 und 59 eine Zahl zwischen 0 und 5.
Der neue Sekundenanteil an der Uhrzeit wird noch mal ermittelt. Beim Zurckgeben der Uhrzeit
wird an die einstellige Sekundenzahl eine 0 angehngt, denn in Wirklichkeit stellt die einstellige Zahl ja den Zehneranteil an den Sekunden dar.

setTime()
ndert den kompetten Inhalt von Objektname auf einmal, erlaubt also das Setzen eines beliebigen neuen Zeitpunkts in Objektname. Erwartet als Parameter eine Zahl, die den neuen Zeitpunkt markiert. Die Zahl wird als Anzahl Millisekunden seit dem 1.1.1970 0:00:00 interpretiert.
Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zeit = new Date();
var AbsolutJetzt = Zeit.getTime();
var AbsolutDann = AbsolutJetzt + (100*24*60*60*1000);
Zeit.setTime(AbsolutDann);

20.23 Date

923

var Jahr = Zeit.getYear();

var Monat = Zeit.getMonth() + 1;
var Tag = Zeit.getDate();
alert("in 100 Tagen ist der " + Tag + "." + Monat + "." + Jahr);
//-->
</script>
</head><body>
</body></html>

Das Beispiel gibt aus, welches Datum von jetzt an in 100 Tagen aktuell sein wird. Zu diesem
Zweck wird ein neues Datumobjekt Zeit mit dem aktuellen Zeitpunkt erzeugt. Mit getTime()
wird zunchst die absolute Anzahl Millisekunden seit dem 1.1.1970 fr den aktuellen Zeitpunkt
ermittelt und in der Variablen AbsolutJetzt gespeichert. Anschlieend wird zu dieser gespeicherten Zahl das Produkt aus 100*24*60*60*1000 hinzuaddiert. Das ist die Anzahl Millisekunden fr 100 Tage. Das Ergebnis wird in der Variablen AbsolutDann gespeichert. Dieser Wert
wird der Methode setTime() bergeben. Dadurch wird die Zeit auf einen Zeitpunkt in 100
Tagen gesetzt. Mit Hilfe entsprechender Befehle werden dann aus dem neu gesetzten Zeitpunkt
die Werte fr den Monatstag, den Monat und das Jahr ermittelt. Das Ergebnis wird in einem
Meldungsfenster ausgegeben.

setUTCDate()
Diese Methode ist funktional identisch mit setDate(). Der gesetzte Wert bedeutet jedoch nicht
die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

setUTCDay()
Diese Methode ist funktional identisch mit setDay(). Der gesetzte Wert bedeutet jedoch nicht
die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean Time
(GMT) genannt.

setUTCFullYear()
Diese Methode ist funktional identisch mit setFullYear(). Der gesetzte Wert bedeutet jedoch
nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

setUTCHours()
Diese Methode ist funktional identisch mit setHours(). Der gesetzte Wert bedeutet jedoch
nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

setUTCMilliseconds()
Diese Methode ist funktional identisch mit setMilliseconds(). Der gesetzte Wert bedeutet
jedoch nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich
Mean Time (GMT) genannt.

924

Kapitel 20: JavaScript Objekt-Referenz

setUTCMinutes()
Diese Methode ist funktional identisch mit setMinutes(). Der gesetzte Wert bedeutet jedoch
nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

setUTCMonth()
Diese Methode ist funktional identisch mit setMonth(). Der gesetzte Wert bedeutet jedoch
nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

setUTCSeconds()
Diese Methode ist funktional identisch mit setSeconds(). Der gesetzte Wert bedeutet jedoch
nicht die lokale Zeit, sondern die Universal Coordinated Time (UTC), auch Greenwich Mean
Time (GMT) genannt.

setYear()
ndert das Jahr, das in Objektname gespeichert ist. Die Jahreszahl ist als Parameter zu bergeben. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zeit = new Date();
var AbsolutJetzt = Zeit.getTime();
var Jahr = Zeit.getYear();
Zeit.setYear(Jahr+1);
var AbsolutDann = Zeit.getTime();
var Differenz = AbsolutDann - AbsolutJetzt;
alert("bis zur gleichen Zeit in einem Jahr sind es " + Differenz + "ms");
//-->
</script>
</head><body>
</body></html>

Das Beispiel gibt die Anzahl der Millisekunden vom aktuellen Zeitpunkt bis zum gleichen Zeitpunkt in einem Jahr aus. Zu diesem Zweck wird ein neues Datumobjekt Zeit mit dem aktuellen
Zeitpunkt erzeugt. Der Absolutzeitpunkt in Millisekunden wird mit getTime() ermittelt und in
der Variablen AbsolutJetzt gespeichert. Mit getYear() wird das aktuelle Jahr ermittelt. Dann
wird der Zeitpunkt mit setYear() um ein Jahr in die Zukunft verschoben. Der neue Zeitpunkt
in Millisekunden wird wieder mit getTime() ermittelt. Das Ergebnis wird in der Variablen
AbsolutDann gespeichert. Durch die Differenz zwischen den gespeicherten Werten von AbsolutDann und AbsolutJetzt wird die Anzahl der Millisekunden bis zum gleichen Zeitpunkt in
einem Jahr ermittelt. Das Ergebnis wird in einem Meldungsfenster ausgegeben.

20.23 Date

925

toGMTString()
Wandelt die in Objektname gespeicherten Daten in eine Zeichenkette nach dem IETF-Standard
um. Wenn beispielsweise in Objektname der 2.10.1991 23:59:00 gespeichert ist, liefert diese
Methode zurck: Wed, 2 Oct 1991 23:59:00 GMT, sofern sich der Benutzer in der entsprechenden Zeitzone befindet. Andernfalls wird die Zeitzonenverschiebung bercksichtigt. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Jetzt = new Date();
alert(Jetzt.toGMTString());
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt Jetzt mit dem aktuellen Zeitpunkt. Dann gibt es
das Ergebnis der Methode Jetzt.toGMTString() als Meldungsfenster aus. Beispiel einer Ausgabe:
Wed, 11 Mar 1998 18:17:28 GMT (Netscape)
Wed, 11 Mar 1998 18:17:28 UTC (MS Internet Explorer)
Beachten Sie: Die Sommerzeit wird von dieser Methode nicht bercksichtigt.

toLocaleString()
Wandelt die in Objektname gespeicherten Daten in eine Zeichenkette um. Die zurckgegebene
Zeichenkette bercksichtigt die lokale Uhrzeit. Wenn beispielsweise in Objektname der
2.10.1991 23:59:00 gespeichert ist, liefert diese Methode zurck: 10/2/91 23:59. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Jetzt = new Date();
alert(Jetzt.toLocaleString());
//-->
</script>
</head><body>
</body></html>

Das Beispiel erzeugt ein neues Datumobjekt Jetzt mit dem aktuellen Zeitpunkt. Dann gibt es
das Ergebnis der Methode Jetzt.toLocaleString() als Meldungsfenster aus. Beispiel einer
Ausgabe: 03/11/1998 19:21:22

UTC()
Liefert die Anzahl Millisekunden zurck, die zwischen dem 1.1.1970 und einem gewnschten
Zeitpunkt verstrichen sind. Der Zeitpunkt ist in Form von Parametern zu bergeben. Alle Para-

926

Kapitel 20: JavaScript Objekt-Referenz

meter sind als Zahlenwerte zu bergeben. Die Angabe der Datumswerte ist zwingend, die der
Uhrzeitwerte optional. Die Parameter im Einzelnen:

Jahr = Jahreszahl
Monat = Monatszahl zwischen 0 und 11
Tag = Tageszahl zwischen 1 und 31
Stunden = (optional) Stunde der Uhrzeit zwischen 0 und 23
Minuten = (optional) Minuten der Uhrzeit zwischen 0 und 59
Sekunden = (optional) Sekunden der Uhrzeit zwischen 0 und 59

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Date.UTC(1998,2,11,19,26,00));
//-->
</script>
</body></html>

Das Beispiel schreibt mit document.write() die Anzahl der Millisekunden in die Datei, die
zwischen dem 1.1.1970, 0.00 Uhr, und dem 11.3.1998, 19.26 Uhr vergangen sind.

20.24 Function
Eigenschaften
arguments
arity
caller

(Argumentnamen-Array)
(Anzahl Argumente)
(Namen der aufrufenden Funktion)

Function: Allgemeines zur Verwendung

ber das Objekt Function haben Sie Zugriff auf Eigenschaften einer JavaScript-Funktion.
JavaScript-Funktionen werden dadurch also selbst Gegenstand von JavaScript-Anweisungen.
Sinnvoll ist das Arbeiten mit dem Function-Objekt beispielsweise im Zusammenhang mit einer
variablen Anzahl von Parametern in einer Funktion. Ein neues Objekt Function knnen Sie
extra erzeugen. Ein Beispiel:
Farbe = new Function("NeueFarbe","document.bgColor=NeueFarbe;");

Beispielentsprechung in normaler Schreibweise:

function Farbe(NeueFarbe) {
document.bgColor=NeueFarbe;
}

Beispielaufruf fr beide Flle:

<a href="javascript:Farbe(#FFCC99)">Neue Hintergrundfarbe</a>

20.24 Function

927

Betrachten Sie in dem Beispiel zunchst den mittleren Teil (Beispielentsprechung in normaler
Schreibweise). Das ist die normale Definition einer Funktion. Im Teil darber wird die gleiche
Funktion definiert, jedoch in Form eines Funktionsobjekts. Das Funktionsobjekt wird mit new
Function(...) erzeugt. Der Rckgabewert wird in einer Variablen gespeichert, im Beispiel in
der Variablen Farbe. Als Parameter erwartet die Function-Funktion eine beliebige Anzahl
Parameter, die bis zum vorletzten als Parameter interpretiert werden, die die Funktion erwarten
soll. Im Beispiel gibt es einen solchen Parameter, nmlich den Parameter NeueFarbe. Der letzte
Parameter, der der Function-Funktion bergeben wird, ist eine Zeichenkette, die den gesamten
Funktionsinhalt darstellt, also die JavaScript-Anweisungen innerhalb der Funktion.
Eine Variable, in der eine Funktion gespeichert ist, wie im Beispiel die Variable Farbe, knnen
Sie genauso aufrufen wie eine Funktion. Der dritte Teil (Beispielaufruf fr beide Flle) gilt
tatschlich fr beide Flle, denn im einen Fall wird die Variable Farbe aufgerufen, in der eine
ganze Funktion gespeichert ist, und im anderen Fall wird eine Funktion namens Farbe() aufgerufen.
Sie mssen jedoch kein neues Funktionsobjekt erzeugen, sondern knnen auch direkt Eigenschaften des Funktionsobjekts auf eine Funktion anwenden.
Beispiel fr direktes Verwenden von Funktionseigenschaften:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-function HTMLListe(Typ) {
document.write("<" + Typ + "l>");
for (var i=1; i<HTMLListe.arguments.length; i++)
document.write("<li>" + HTMLListe.arguments[i]+"</li>");
document.write("</" + Typ + "l>");
}
HTMLListe("U","eins","zwei","drei");
//-->
</script>
</body></html>

Das Beispiel schreibt dynamisch eine HTML-Liste, entweder als Aufzhlungsliste oder als nummerierte Liste, in die Datei. Dies geschieht in einer Funktion namens HTMLListe(). Unterhalb
der Funktion steht der Aufruf der Funktion. Dabei werden vier Parameter bergeben. Erwarten
tut die Funktion HTMLListe() jedoch nur einen Parameter, nmlich den Parameter Typ. Dabei
sollte man ein U oder ein O bergeben. Abhngig davon erzeugt die Funktion eine <ul>-Liste
(Aufzhlungsliste) oder eine <ol>-Liste (nummerierte Liste).
Innerhalb der Funktion wird jedoch mit HTMLListe.arguments.length die tatschliche
Anzahl der bergebenen Elemente abgefragt. Die Funktion nimmt an, dass alle Parameter ab
dem zweiten Elemente der gewnschten Liste sind. Die Funktion schreibt mit document.write()-Befehlen die enstprechenden Listenpunkte und setzt dabei reihenweise die bergebenen Parameter ein, da diese Aktion innerhalb einer for-Schleife erfolgt.

928

Kapitel 20: JavaScript Objekt-Referenz

arguments
Speichert die Argumente, die einer Funktion bergeben wurden, in einem Array, also einer Kette
von Elementen. Jedes Element stellt ein Argument dar. Die Eigenschaft ist nur innerhalb der
Funktion verfgbar, auf die sie sich bezieht. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script language="JavaScript" type="text/javascript">
<!-function Test(Name,Vorname) {
document.write("Funktion bekam " + Test.arguments.length + " Argumente");
for (var i=0; i<Test.arguments.length; ++i)
document.write("<BR>" + Test.arguments[i]);
}
Test("Muenz", "Stefan");
//-->
</script>
</body></html>

Das Beispiel definiert eine Funktion Test(), die zwei Parameter bergeben bekommt. Die
Funktion schreibt dynamisch in die HTML-Datei, wie viele Parameter sie erwartet, und danach
in einer for-Schleife, welche Werte bergeben wurden.
Mit Funktionsname.arguments.length ermitteln Sie die Anzahl der tatschlich bergebenen
Parameter (nicht die Anzahl der erwarteten Parameter). Mit Funktionsname.arguments[0]
sprechen Sie den Wert des ersten bergebenen Parameters an, mit Funktionsname.arguments
[1] den des zweiten Parameters usw.

arity
Speichert die Anzahl Argumente, die eine Funktion erwartet. Die Eigenschaft ist nur auerhalb
der Funktion verfgbar, auf die sie sich bezieht. Der Script-Bereich, in dem die Anweisung vorkommt, muss mit JavaScript1.2 ausgezeichnet sein. Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript1.2" type="text/javascript">
<!-function Test(Name,Vorname) {
return(Vorname + " " + Name);
}
alert("Funktion erwartet " + Test.arity + " Argumente");
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert eine Funktion Test(), die zwei Parameter erwartet. Die Funktion wird im
Beispiel gar nicht aufgerufen, dafr wird in einem Meldungsfenster ausgegeben, wie viele Argumente die Funktion Test() erwartet. Dazu wird die Eigenschaft arity auf die gewnschte
Funktion angewendet.

20.25 Math

929

caller
Speichert die gesamte Funktion, von der aus die aktuelle Funktion aufgerufen wird. Hat den
Wert null, falls der Aufruf direkt von einem Event-Handler oder beim Einlesen der Datei von
auerhalb einer anderen Funktion erfolgte. Die Eigenschaft ist nur innerhalb der Funktion verfgbar, auf die sie sich bezieht. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Test() {
alert(Test.caller);
}
function Aufruf() {
Test();
}
//-->
</script>
</head><body>
<a href="javascript:Aufruf()">Wer ruft Test()?</a>
</body></html>

Das Beispiel definiert im Dateikopf zwei Funktionen, eine Funktion Test() und eine Funktion
Aufruf(). Die Funktion Test() tut nichts anderes als auszugeben, von wo sie aufgerufen
wurde, die Funktion Aufruf() nichts anderes, als Test() aufzurufen. In der Datei ist ferner ein
Verweis notiert. Beim Anklicken des Verweises wird die Funktion Aufruf() aufgerufen, die
wiederum Test() aufruft, woraufhin Test() den gesamten Code der Funktion Aufruf() ausgibt.
Beachten Sie: Opera 5.12 interpretiert diese Eigenschaft nicht.

20.25 Math
Eigenschaften
E
LN2
LN10
LOG2E
LOG10E
PI
SQRT1_2
SQRT2

(Eulersche Konstante)
(natrlicher Logarithmus von 2)
(natrlicher Logarithmus von 10)
(konstanter Logarithmus von 2)
(konstanter Logarithmus von 10)
(Konstante PI)
(Konstante fr Quadratwurzel aus 0,5)
(Konstante fr Quadratwurzel aus 2)

Methoden
abs()
acos()
asin()

(positiver Wert)
(Arcus Cosinus)
(Arcus Sinus)

930

Kapitel 20: JavaScript Objekt-Referenz

(Arcus Tangens)
(nchsthhere ganze Zahl)
(Cosinus)
(Exponentialwert)
(nchstniedrigere ganze Zahl)
(Anwendung des natrlichen Logarithmus)
(grere von zwei Zahlen)
(kleinere von zwei Zahlen)
(Zahl hoch Exponent)
(0 oder 1 per Zufall)
(kaufmnnische Rundung einer Zahl)
(Sinus)
(Quadratwurzel)
(Tangens)

atan()
ceil()
cos()
exp()
floor()
log()
max()
min()
pow()
random()
round()
sin()
sqrt()
tan()

Math: Allgemeines zur Verwendung

Mit dem Objekt Math knnen Sie Berechnungen, auch komplexe wissenschaftlicher oder kaufmnnischer Art, durchfhren. Dazu stehen Ihnen verschiedene mchtige Methoden und Funktionen sowie einige Eigenschaften zur Verfgung. Eine Instanz von Math brauchen Sie nicht eigens
erzeugen. Sie knnen Eigenschaften und Methoden von Math direkt verwenden.
Schema:
x = Math.Eigenschaft;
x = Math.Methode(Parameter);

Mit Zahl = 10 * Math.PI beispielsweise steht in der Variablen Zahl hinterher das Produkt aus
der Zahl PI und 10. Mit Wurzel = Math.sqrt(10) steht in der Variablen Wurzel hinterher das
Ergebnis der Quadratwurzel aus 10. Notieren Sie vor jedem Aufruf einer Eigenschaft oder
Methode des Math-Objekts Math (grogeschrieben).
Bei jedem Zahlenparameter, den Sie einer Methode von Math bergeben, kann es sich um eine
feste Zahl (z.B. 25 oder 0.123) handeln, um eine numerische Variable (z.B. x) oder um einen
Rechenausdruck (z.B. 7 * 5+ 0.3). Auch Rechenausdrcke mit Variablen sind erlaubt (z.B. x * i
+ 1).
Beachten Sie, dass die Anzahl der Nachkommastellen in Programmiersprachen wie JavaScript
systembedingt beschrnkt ist (auf den heutigen Systemen haben solche Zahlen normalerweise 32
Bit Lnge). JavaScript unterscheidet nicht wie manche andere Programmiersprachen zwischen
verschiedenen Typen numerischer Werte (Integer, Float usw.). Eventuell erforderliche Typumwandlungen erfolgen automatisch.

E
Die Eulersche Konstante Wert ca. 2,718. Das Beispiel schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">

20.25 Math

931

<!-document.write(Math.E);
//-->
</script>
</body></html>

LN2
Der natrliche Logarithmus von 2 Konstante mit einem Wert von ca. 0,693. Das Beispiel
schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.LN2);
//-->
</script>
</body></html>

LN10
Der natrliche Logarithmus von 10 Konstante mit einem Wert von ca. 2,302. Das Beispiel
schreibt dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.LN10);
//-->
</script>
</body></html>

LOG2E
Logarithmus von 2 Konstante mit einem Wert von ca. 1,442. Das Beispiel schreibt dynamisch
den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.LOG2E);
//-->
</script>
</body></html>

932

Kapitel 20: JavaScript Objekt-Referenz

LOG10E
Logarithmus von 10 Konstante mit einem Wert von ca. 0,434. Das Beispiel schreibt dynamisch
den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.LOG10E);
//-->
</script>
</body></html>

PI
Konstante Pi fr Kreisberechnungen mit einem Wert von ca. 3,14159. Das Beispiel schreibt
dynamisch den Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.PI);
//-->
</script>
</body></html>

SQRT1_2
Konstante fr Quadratwurzel aus 0,5 Wert von ca. 0,707. Das Beispiel schreibt dynamisch den
Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write(Math.SQRT1_2);
//-->
</script>
</body></html>

SQRT2
Konstante fr Quadratwurzel aus 2 Wert von ca. 1,414. Das Beispiel schreibt dynamisch den
Wert der Eigenschaft an die aktuelle Stelle der HTML-Datei.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--

20.25 Math

933

document.write(Math.SQRT2);
//-->
</script>
</body></html>

abs()
Erwartet als Parameter eine Zahl. Liefert in jedem Fall den positiven Wert der Zahl zurck. War
dieser vorher negativ, wird er positiv. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.abs(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von abs() auf den Wert aus dem ersten
Eingabefeld. Wird im ersten Feld eine negative Zahl eingegeben, erscheint im zweiten Feld die
gleiche Zahl, allerdings positiv.

acos()
Erwartet als Parameter eine Zahl. Liefert den Arcus Cosinus dieser Zahl zurck. Achten Sie darauf, dass Sie sinnvolle Werte zwischen -1 und +1 bergeben. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.acos(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von acos() auf den Wert aus dem ersten
Eingabefeld.
Beachten Sie: Diese Methode erwartet Zahlen mit der Einheit Radiant (rad) als Parameter.

asin()
Erwartet als Parameter eine Zahl. Liefert den Arcus Sinus dieser Zahl zurck. Achten Sie darauf,
dass Sie sinnvolle Werte zwischen -1 und +1 bergeben. Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.asin(Test.Ein.value)">
</form>
</body></html>

934

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von asin() auf den Wert aus dem ersten
Eingabefeld.
Beachten Sie: Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

atan()
Erwartet als Parameter eine Zahl. Liefert den Arcus Tangens dieser Zahl zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.atan(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von atan() auf den Wert aus dem ersten
Eingabefeld.
Beachten Sie: Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

ceil()
Erwartet als Parameter eine Zahl. Liefert die nchsthhere Ganzzahl dieser Zahl zurck (Aufrundung). Wenn die bergebene Zahl eine Ganzzahl ist, bleibt sie unverndert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.ceil(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von ceil() auf den Wert aus dem ersten
Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschlieend die nchsthhere Ganzzahl.

cos()
Erwartet als Parameter eine Zahl. Liefert den Cosinus dieser Zahl zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.cos(Test.Ein.value)">
</form>
</body></html>

20.25 Math

935

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von cos() auf den Wert aus dem ersten
Eingabefeld.
Beachten Sie: Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

exp()
Erwartet als Parameter eine Zahl. Liefert den Exponentialwert dieser Zahl auf Basis der Eulerschen Konstanten zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.exp(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von exp() auf den Wert aus dem ersten
Eingabefeld.
Beachten Sie: Sobald Sie eine Zahl verwenden, die grer als 709 ist, liefert diese Methode infinity (Zahl ist zu gro) zurck. Ist die Zahl kleiner als -744, liefert die Methode 0 zurck.

floor()
Erwartet als Parameter eine Zahl. Liefert die nchstniedrigere Ganzzahl dieser Zahl zurck
(Abrundung). Wenn die bergebene Zahl eine Ganzzahl ist, bleibt sie unverndert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.floor(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von floor() auf den Wert aus dem ersten
Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschlieend die nchstniedrigere Ganzzahl. Bei positiven Zahlen ist dies die Zahl ohne Nachkommastellen.

log()
Erwartet als Parameter eine Zahl. Liefert die Anwendung des natrlichen Logarithmus auf diese
Zahl zurck. Achten Sie darauf, dass Sie sinnvolle Werte grer als 0 bergeben.

936

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.log(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von log() auf den Wert aus dem ersten
Eingabefeld.

max()
Erwartet zwei Zahlen als Parameter. Gibt die grere der beiden Zahlen zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input name="z1"><input name="z2"><input name="Aus">
<input type="button" value="="
onClick="Test.Aus.value=Math.max(Test.z1.value,Test.z2.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je
einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von max() auf die Werte aus
den beiden ersten Eingabefeldern.

min()
Erwartet zwei Zahlen als Parameter. Gibt die kleinere der beiden Zahlen zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input name="z1"><input name="z2"><input name="Aus">
<input type="button" value="="
onClick="Test.Aus.value=Math.min(Test.z1.value,Test.z2.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je
einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von min() auf die Werte aus
den beiden ersten Eingabefeldern.

20.25 Math

937

pow()
Erwartet zwei Zahlen als Parameter. Die erste Zahl wird als Basis interpretiert, die zweite als
Exponent. Liefert den Wert von Zahl hoch Exponent zurck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action="">
<input name="z1"><input name="z2"><input name="Aus">
<input type="button" value="="
onClick="Test.Aus.value=Math.pow(Test.z1.value,Test.z2.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit drei Eingabefeldern und einem Button. Nach Eingabe je
einer Zahl im ersten und im zweiten Eingabefeld und Klick auf den Button wird im dritten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von pow() auf die Werte aus
den beiden ersten Eingabefeldern. Wird im ersten Eingabefeld beispielsweise 2 (Basis) und im
zweiten Eingabefeld 3 (Exponent) eingegeben, erscheint im dritten Feld als Ausgabe 8.

random()
Gibt eine Zufallszahl zwischen 0 und 1 zurck. Es handelt sich um eine Bruchzahl, z.B.
0.3834417857195922. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form action="">
<input type="button" value="Button" onClick="alert(Math.random())">
</form>
</body></html>

Das Beispiel definiert ein Formular mit einem Button. Beim Klicken auf den Button wird eine
Zufallszahl zwischen 0 und 1 ausgegeben. Es handelt sich dabei um eine Pseudo-Zufallszahl, wie
sie auf heute blichen EDV-Systemen realisierbar ist. Erst seit Netscape 3.x auf allen Plattformen
verfgbar. Bei Netscape 2.x nur unter Unix.

round()
Erwartet als Parameter eine Zahl. Liefert die kaufmnnisch gerundete Ganzzahl dieser Zahl
zurck. Wenn die bergebene Zahl eine Ganzzahl ist, bleibt sie unverndert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.round(Test.Ein.value)">
</form>
</body></html>

Das Beispiel definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe
einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das
Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von round() auf den Wert aus dem ers-

938

Kapitel 20: JavaScript Objekt-Referenz

ten Eingabefeld. Bei Eingabe von Bruchzahlen im ersten Eingabefeld steht im zweiten Feld anschlieend die kaufmnnisch gerundete Ganzzahl.

sin()
Erwartet als Parameter eine Zahl. Liefert den Sinus dieser Zahl zurck. Das Beispiel definiert ein
Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das
Ergebnis ist die Anwendung von sin() auf den Wert aus dem ersten Eingabefeld:
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.sin(Test.Ein.value)">
</form>
</body></html>

Beachten Sie: Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

sqrt()
Erwartet als Parameter eine Zahl. Liefert die Quadratwurzel dieser Zahl zurck. Das Beispiel
definiert ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im
ersten Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das Ergebnis ist die Anwendung von sqrt() auf den Wert aus dem ersten Eingabefeld.
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.sqrt(Test.Ein.value)">
</form>
</body></html>

tan()
Erwartet als Parameter eine Zahl. Liefert den Tangens dieser Zahl zurck. Das Beispiel definiert
ein Formular mit zwei Eingabefeldern und einem Button. Nach Eingabe einer Zahl im ersten
Eingabefeld und Klick auf den Button wird im zweiten Eingabefeld das Ergebnis ausgegeben. Das
Ergebnis ist die Anwendung von tan() auf den Wert aus dem ersten Eingabefeld.
<html><head><title>Test</title>
</head><body>
<form name="Test" action=""><input name="Ein"><input name="Aus">
<input type="button" value="=" onClick="Test.Aus.value=Math.tan(Test.Ein.value)">
</form>
</body></html>

Beachten Sie: Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

20.26 navigator

939

20.26 navigator
Eigenschaften
appCodeName
appName
appVersion
cookieEnabled
language
platform
userAgent

(Spitzname des Browsers)

(offizieller Name des Browsers)
(Browser-Version)
(Cookies erlaubt)
(Browser-Sprache)
(Plattform, auf der der Browser luft)
(HTTP-Identifikation des Browsers)

Methoden
javaEnabled()

(Java-Verfgbarkeit berprfen)

Unterobjekte
mimeTypes
plugins

navigator: Allgemeines zur Verwendung

ber das Objekt navigator knnen Sie in einem JavaScript Informationen darber ermitteln,
welchen Web-Browser der Anwender verwendet, sowie einige nhere Spezifikationen dazu. Das
kann zum Beispiel interessant sein, um die Ausfhrung von JavaScript-Anweisungen davon
abhngig zu machen, welchen Browser der Anwender benutzt. So lassen sich Fehlermeldungen
bei Anwendern vermeiden, die einen Browser verwenden, der bestimmte JavaScript-Befehle
nicht kennt. Eigenschaften und Methoden von navigator knnen Sie direkt ansprechen. Beispiel: navigator.appName.

appCodeName
Speichert den Spitznamen des Browsers. Dieses Feature wurde von Netscape deshalb erfunden,
weil der Netscape-Browser den Spitznamen Mozilla trgt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(navigator.appCodeName == "Mozilla")
alert("So ein drachenstarker Browser!");
//-->
</script>
</head><body>
</body></html>

Das Beispiel ermittelt beim Einlesen der Datei, ob der vom Anwender benutzte Browser auf den
Spitznamen Mozilla hrt. Wenn ja, wird die Meldung So ein affenartiger Browser! ausgegeben. Sowohl Netscape als auch der MS Internet Explorer wie auch Opera 5.12 speichern in dieser
Eigenschaft den Wert Mozilla.

940

Kapitel 20: JavaScript Objekt-Referenz

appName
Speichert den Namen des Browsers, den der Anwender verwendet. Netscape speichert in dieser
Eigenschaft beispielsweise den Wert Netscape, der MS Internet Explorer den Wert Microsoft
Internet Explorer. Das Beispiel schreibt mit der write()-Methode in die HTML-Datei, welchen
Browser der Anwender verwendet:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.write("So, so, Sie verwenden also " + navigator.appName);
//-->
</script>
</body></html>

Beachten Sie: Unter Opera kann der Anwender frei whlen, wie sich der Browser identifiziert.

appVersion
Speichert die Version des Browsers, den der Anwender verwendet. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(navigator.appVersion.substring(0,1) == "4")
alert("Oh, ein Browser der 4. Generation!");
//-->
</script>
</head><body>
</body></html>

Das Beispiel fragt ab, ob das erste Zeichen aus dem Wert, der in navigator.appVersion gespeichert ist, eine 4 ist. Wenn ja, wird eine Meldung ausgegeben. Der Wert von navigator.appVersion umfasst mehr als nur die reine Produktversion. Netscape 4.01 liefert z.B. folgenden Wert: "4.01 [en] (Win95; I)", der MS Internet Explorer 4.0 liefert z.B.: "4.0 (compatible; MSIE 4.0; Windows 95)". Um Teile aus einer solchen Zeichenkette zu extrahieren wie
im Beispiel mit der Methode substring(), lesen Sie den Abschnitt ber das string-Objekt.
Beachten Sie: Unter Opera kann der Anwender frei whlen, wie sich der Browser identifiziert.
Damit knnen je nach Nutzereinstellung auch in dieser Eigenschaft beliebige und eventuell
unrealistische Werte gespeichert sein.

cookieEnabled
Speichert, ob der Nutzer das Setzen von Cookies erlaubt. Sind diese erlaubt, so enthlt die
Eigenschaft true, sonst false. Nicht geprft werden kann mit dieser Eigenschaft, ob der Nutzer
vor dem Speichern eine Warnmeldung erhlt. In diesem Fall ist in der Eigenschaft ebenfalls true
gespeichert. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">

20.26 navigator

941

<!-if(navigator.cookieEnabled == true)
document.write("Cookies erlaubt");
else if(navigator.cookieEnabled == false) document.write("Cookies verboten.");
else document.write("Verrate ich nicht.");
//-->
</script>
</body></html>

Im Beispiel wird gefragt, ob der Nutzer Cookies erlaubt. Ist das der Fall, wird mit der write()Methode eine entsprechende Information ausgegeben. Sind keine Cookies verfgbar, wird
gefragt, ob Cookies verboten sind. Browser, die cookieEnabled kennen und keine Cookies
erlauben, folgen dem if-Zweig der Anweisung. Browser, die diese Eigenschaft nicht kennen,
geben den Text "Verrate ich nicht." aus.

language
Speichert die Sprache der Benutzerfhrung des Browsers, den der Anwender verwendet. Die
Sprache wird dabei mit den international blichen Abkrzungen gespeichert, z.B. en fr englisch
oder de fr deutsch. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-if(navigator.language.indexOf("en")>-1)
document.write("dear vistor, welcome on our pages");
if(navigator.language.indexOf("de")>-1)
document.write("Sehr geehrter Besucher, willkommen auf unseren Seiten");
//-->
</script>
</body></html>

Das Beispiel ermittelt, welche Benutzersprache der Browser des Anwenders verwendet. Wenn es
englisch ist, wird mit der write()-Methode ein englischer Begrungstext in die HTML-Datei
geschrieben, wenn es deutsch ist, ein deutscher Begrungstext.
Beachten Sie: Im MS Internet Explorer heit diese Eigenschaft navigator.userLanguage.

platform
Speichert, auf welchem Betriebssystemtyp der Browser luft, den der Anwender verwendet. Das
Beispiel gibt beim Einlesen der Datei in einem Meldungsfenster aus, auf welcher Plattform der
Browser beim Anwender luft. Bei Windows 95 gibt Netscape beispielsweise Win32 aus.
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert(navigator.platform);
//-->

942

Kapitel 20: JavaScript Objekt-Referenz

</script>
</head><body>
</body></html>

userAgent
Speichert alle wichtigen Informationen ber den Browser, den der Anwender verwendet, und
zwar in der Form, die der Browser auch bei jeder HTTP-Anforderung einer Datei im WWW
sendet. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
Diese Daten sendet Ihr Browser, wenn er Dateien im WWW anfordert:<br>
<script type="text/javascript">
<!-document.write(navigator.userAgent);
//-->
</script>
</body></html>

Das Beispiel schreibt in die HTML-Datei, mit welchen Daten sich der verwendete Browser im
WWW ausgibt. Im Anhang A.4 Client-Identifikationen finden Sie eine bersicht bekannter
Ausgaben, die in dieser Eigenschaft enthalten sein knnen. Die bersicht kann helfen, wenn Sie
Abfragen nach bestimmten Browsern, Versionen oder Plattformen durchfhren wollen.
Beachten Sie: Unter Opera kann der Anwender frei whlen, wie sich der Browser identifiziert.
Damit sind je nach Nutzereinstellung in dieser Eigenschaft verschiedene Werte gespeichert.
Unabhngig von den Nutzereinstellungen ist jedoch in dieser Eigenschaft immer das Wort
Opera enthalten, wenn auch an verschiedenen Positionen.

javaEnabled()
Testet, ob Java auf dem Browser des Anwenders verfgbar ist oder nicht. Liefert true zurck,
wenn Java verfgbar ist, und false, wenn nicht. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-if(navigator.javaEnabled())
{
document.write("<applet code=\"zticker.class\" width=\"150\" height=\"25\">");
document.write("<\/applet>");
}
//-->
</script>
</body></html>

Das Beispiel fragt mit if(navigator.javaEnabled()) ab, ob Java verfgbar ist. Wenn ja, wird
mit der write()-Methode der HTML-Code fr die Platzierung eines Java-Applets geschrieben.

20.27 mimeTypes

943

20.27 mimeTypes
Eigenschaften
description
enabledPlug-In
length
suffixes
type

(Beschreibung eines Mime-Types)

(Plug-In vorhanden)
(Anzahl Mime-Typen)
(Dateiendungen)
(Mime-Type)

mimeTypes: Allgemeines zur Verwendung

ber das Objekt mimeTpyes, das in der JavaScript-Objekthierarchie unterhalb des navigatorObjekts liegt, knnen Sie ermitteln, welche Dateitypen der Browser des Anwenders kennt, und
ob ein Plug-In zum Anzeigen oder Abspielen eines Dateityps vorhanden ist. Lesen Sie zum besseren Verstndnis von Mime-Typen gegebenenfalls den Anhang A.2. Um einen Mime-Type
anzusprechen, stehen folgende Mglichkeiten zur Verfgung:
Schema 1:
navigator.mimeTypes[#].Eigenschaft

Schema 2:
navigator.mimeTypes["MimeType"].Eigenschaft

Mime-Typen knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1): Bei Verwendung von Indexnummern geben Sie
navigator.mimeTypes an und dahinter in eckigen Klammern eine Zahl. Sie knnen allerdings nicht wissen, welche Mime-Typen an welcher Stelle gespeichert sind. Die Verwendung
von Indexnummern ist deshalb nur sinnvoll, wenn Sie beispielsweise in einer Schleife alle
verfgbaren Mime-Typen ermitteln.
Mit dem Namen eines Mime-Typen als Indexnamen (wie in Schema 2): Dabei notieren Sie
wie beim Ansprechen mit Indexnummer hinter navigator.mimeTypes eckige Klammern.
Innerhalb der eckigen Klammern notieren Sie in Anfhrungszeichen den Mime-TypeNamen. Dabei gilt die bliche Notation fr Mime-Typen, also die Form Kategorie/Unterkategorie. Als Indexnamen sind zum Beispiel Werte mglich, die Sie mit der Objekteigenschaft type ermitteln knnen.
Beispiel fr das Objekt insgesamt:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.writeln("<table border=\"1\">");
for(var i=0; i<navigator.mimeTypes.length; i++)
{
document.writeln("<tr>");
document.writeln("<td>" + navigator.mimeTypes[i].type + "<\/td>");
document.writeln("<td>" + navigator.mimeTypes[i].suffixes + "<\/td>");

944

Kapitel 20: JavaScript Objekt-Referenz

document.writeln("<td>" + navigator.mimeTypes[i].description + "<\/td>");

if (navigator.mimeTypes[i].enabledPlug-In)
document.writeln("<td>" + navigator.mimeTypes[i].enabledPlug-In + "<\/td>");
else document.writeln("<td>kein Plug-In<\/td>");
document.writeln("<\/tr>");
}
document.writeln("<\/table>");
//-->
</script>
</body></html>

Das Beispiel schreibt mit Hilfe der Methode writeln() dynamisch eine Tabelle in die HTMLDatei. In der Tabelle werden alle verfgbaren Plug-Ins aufgelistet. In der linken Spalte steht der
Mime-Type Typ, also die Kategorie/Unterkategorie, wie Sie sie auch zur Mime-Type-Adressierung mit Hilfe von Indexnamen verwenden knnen. In der Spalte daneben stehen die zugehrigen Dateiendungen. Daneben steht eine Kurzbeschreibung des Mime-Type, und in der letzten
Spalte steht, ob der Browser ein Plug-In besitzt, um Dateien des entsprechenden Typs zu verarbeiten.
Beachten Sie: Welche Eigenschaften im Objekt mimeTypes gespeichert sind, ist stark abhngig
vom verwendeten Browser. So speichert der Netscape 6 nur tatschlich vorhandene Plug-Ins als
eigene Objekteigenschaft, whrend Opera 5.12 und Netscape 4 z.B. auch den Type image/jpeg
mit angeben. Im MS Internet Explorer existiert dieses Objekt nur aus Kompatibilittsgrnden
und enthlt keinen Inhalt.

description
Speichert die Kurzbeschreibung eines Mime-Typs. Das Beispiel prft zuerst, ob der Mime-Type
application/pdf existiert. Wenn ja, wird in einem Meldungsfenster die Kurzbeschreibung zum
Mime-Type application/pdf ausgegeben. Netscape 4.x gibt dabei freilich nicht viel mehr
bekannt als Acrobat, in Opera 5.12 und Netscape 6 wird Acrobat (*.pdf) ausgegeben.
<html><head><title>Test</title>
<script type="text/javascript">
<!-if (navigator.mimeTypes["application/pdf"])
alert(navigator.mimeTypes["application/pdf"].description);
//-->
</script>
</head><body>
</body></html>

Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

enabledPlug-In
Speichert, ob fr einen Mime-Type ein Plug-In installiert ist. Wenn kein Plug-In verfgbar ist,
der Browser jedoch den Mime-Type kennt, wird der Wert null gespeichert. Die Eigenschaft
stellt selbst ein Objekt dar. Sie ist dabei eine Art Zeiger auf das entsprechende plugins-Objekt.
Hinter der Eigenschaft lassen sich wiederum alle Eigenschaften und Methoden des pluginsObjekts notieren. Ein Beispiel:

20.27 mimeTypes

945

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-if (navigator.mimeTypes["x-world/x-vrml"])
if(navigator.mimeTypes["x-world/x-vrml"].enabledPlug-In != null)
document.write("<object data=\"yzeplin.wrl\" width=\"400\"
height=\"300\"></object>");
//-->
</script>
</body></html>

Das Beispiel ermittelt, ob der Browser den Mime-Type kennt und ob er ein Plug-In fr VRMLDateien verfgbar hat. Wenn ja, wird mit Hilfe der write()-Methode dynamisch das HTMLKonstrukt zum Einbinden einer VRML-Datei geschrieben. Anwender, die kein VRML-Plug-In
haben, bekommen dadurch keine Fehlermeldungen, sondern ein leeres Objektfenster. Solche
Anwender bekommen einfach gar nicht mit, dass in der Datei eigentlich eine VRML-Datei
referenziert ist.

length
Speichert die Anzahl der Mime-Type-Eintrge, die der Browser kennt. Das Beispiel fragt in einer
for-Schleife ab, ob fr den jeweils aktuellen Mime-Type ein Plug-In installiert ist. Wenn ja, wird
eine Zeile mit der Kurzbeschreibung des Mime-Types geschrieben. So werden am Ende alle
installierten Plug-Ins mit sprechenden Beschreibungen aufgelistet. Bei der Definition der forSchleife dient die Eigenschaft navigator.mimeTypes.length als Abbruchbedingung.
<html><head><title>Test</title>
</head><body>
<b>Folgende Plug-Ins sind installiert:</b>
<script type="text/javascript">
<!-for(var i=0; i<navigator.mimeTypes.length; ++i)
if(navigator.mimeTypes[i].enabledPlug-In != null)
document.write("<br>" + navigator.mimeTypes[i].description);
//-->
</script>
</body></html>

Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

suffixes
Speichert die typischen Dateiendungen, die zu einem Mime-Type gehren. Das Beispiel prft, ob
der Browser den Mime-Type kennt, und gibt in einem Meldungsfenster aus, welche Dateiendungen unter den Mime-Type image/jpeg fallen.
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-if (navigator.mimeTypes["image/jpeg"])
alert(navigator.mimeTypes["image/jpeg"].suffixes);

946

Kapitel 20: JavaScript Objekt-Referenz

//-->
</script>
</head><body>
</body></html>

Beachten Sie: Im Netscape 6 ist dieses Beispiel nicht nachvollziehbar, da dieser nur die MimeTypen als eigene Objekteigenschaft speichert, zu denen tatschlich ein Plug-In vorliegt. Der MS
Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

type
Speichert die eigentliche Mime-Type-Bezeichnung nach dem Schema Kategorie/Unterkategorie. Das Beispiel klappert in einer for-Schleife alle dem Browser bekannten Mime-Typen ab
und schreibt jeweils eine Zeile mit der Mime-Type-Bezeichnung. So werden am Ende alle dem
Browser bekannten Mime-Types aufgelistet.
<html><head><title>Test</title>
</head><body>
<b>Folgende Mime-Typen sind dem Browser bekannt:</b>
<script type="text/javascript">
<!-for(var i=0; i<navigator.mimeTypes.length; ++i)
document.write("<br>" + navigator.mimeTypes[i].type);
//-->
</script>
</body></html>

Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

20.28 plugins
Eigenschaften
description
filename
length
name

(Beschreibung eines Plug-In)

(Dateiname eines Plug-In)
(Anzahl Plug-In)
(Produktname eines Plug-In)

plugins: Allgemeines zur Verwendung

ber das Objekt plugins, das in der JavaScript-Objekthierarchie unterhalb des navigatorObjekts liegt, knnen Sie ermitteln, welche Plug-Ins im Sinne der Netscape-Plug-In-Technik des
Anwenders installiert hat. Um ein Plug-In anzusprechen, stehen folgende Mglichkeiten zur
Verfgung:
Schema 1:
navigator.plugins[#].Eigenschaft

20.28 plugins

947

Schema 2:
navigator.plugins["Name"].Eigenschaft

Plug-Ins knnen Sie auf zwei Arten ansprechen:

Mit einer Indexnummer (wie in Schema 1): Bei Verwendung von Indexnummern geben Sie
navigator.plugins an und dahinter in eckigen Klammern eine Zahl. Sie knnen allerdings
nicht wissen, welche Plug-Ins an welcher Stelle gespeichert sind. Die Verwendung in Verbindung mit Indexnummern ist deshalb nur sinnvoll, wenn Sie beispielsweise in einer Schleife
alle verfgbaren Plug-Ins ermitteln.
Mit dem Namen eines Plug-In als Indexnamen (wie in Schema 2): Dabei notieren Sie wie
beim Ansprechen mit Indexnummer hinter navigator.plugins eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anfhrungszeichen den Namen des Plug-In. Als
Namen sind zum Beispiel Werte mglich, die Sie mit der Objekteigenschaft name ermitteln
knnen.
Beispiel fr das Objekt insgesamt:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-document.writeln("<table border=\"1\">");
for(var i=0; i<navigator.plugins.length; i++)
{
document.writeln("<tr>");
document.writeln("<td>" + navigator.plugins[i].name + "<\/td>");
document.writeln("<td>" + navigator.plugins[i].description + "<\/td>");
document.writeln("<td>" + navigator.plugins[i].filename + "<\/td>");
document.writeln("<\/tr>");
}
document.writeln("<\/table>");
//-->
</script>
</body></html>

Das Beispiel schreibt mit Hilfe der Methode writeln() dynamisch eine Tabelle in die HTMLDatei. In der Tabelle werden alle verfgbaren Plug-Ins aufgelistet. In der linken Spalte steht der
Name des Plug-In, wie Sie ihn auch bei Plug-In-Adressierungen mit Indexnamen benutzen
knnen. In der Spalte daneben steht eine Kurzbeschreibung, und in der letzten Spalte steht, welche Datei auf dem Rechner des Anwenders das Plug-In reprsentiert.
Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

description
Speichert die Kurzbeschreibung eines Plug-In. Das Beispiel fragt ab, ob ein Plug-In mit dem
Namen Java Plug-in beim Anwender installiert ist (das Beispiel nimmt an, dass der Autor dieses Plug-In besitzt und testen mchte, ob er seine Daten zu diesem Plug-In einem Anwender
zumuten kann). Das Beispiel beschrnkt sich darauf, in einem Meldungsfenster die Kurzbeschreibung des Plug-In auszugeben, wenn dieses Plug-In installiert ist.

948

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
<script type="text/javascript">
<!-if(navigator.plugins["Java Plug-in"])
alert(navigator.plugins[Java Plug-in].description);
//-->
</script>
</head><body>
</body></html>

filename
Speichert den Namen der Programmdatei eines Plug-In. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(navigator.plugins["VDOLive small plugin"].filename.indexOf("npsmlvdo.dll"))
alert("Plug-In ist eine Nummer zu klein");
//-->
</script>
</head><body>
</body></html>

Das Beispiel nimmt an, dass zuvor ermittelt wurde, dass ein Plug-In mit dem Namen "VDOLive
small plugin" beim Anwender installiert ist. Nun fragt das Beispiel ab, ob in dem Eintrag, der
den Dateinamen des Plug-In speichert, der Wert "npsmlvdo.dll" vorkommt. Wenn ja, wird im
Beispiel die Meldung ausgegeben, dass das Plug-In eine Nummer zu klein ist. In der Objekteigenschaft filename speichert Netscape den vollstndigen Pfadnamen der Datei. Um den eigentlichen Dateinamen abzufragen, wird im Beispiel eine Methode des string-Objekts bemht,
nmlich indexOf().

length
Speichert die Anzahl der Plug-Ins, die der Anwender zu seinem Browser installiert hat. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<b>Folgende Plug-In-Dateien sind auf dem Rechner:</b>
<script type="text/javascript">
<!-for(var i=0; i<navigator.plugins.length; ++i)
document.write("<br>" + navigator.plugins[i].filename);
//-->
</script>
</body></html>

Das Beispiel klappert in einer for-Schleife alle installierten Plug-Ins ab und schreibt fr jedes
Plug-In eine Zeile mit dem Dateinamen des Plug-In. So werden am Ende die verantwortlichen

20.29 Number

949

Dateien aller installierten Plug-Ins aufgelistet. Bei der Definition der for-Schleife dient die
Eigenschaft navigator.plugins.length als Abbruchbedingung.
Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

name
Speichert den Produktnamen eines Plug-In. Das Beispiel klappert in einer for-Schleife alle
installierten Plug-Ins ab und schreibt fr jedes Plug-In eine Zeile mit dem Namen des Plug-In.
So werden am Ende alle installierten Plug-Ins aufgelistet.
<html><head><title>Test</title>
</head><body>
<b>Folgende Plug-Ins sind installiert:</b>
<script type="text/javascript">
<!-for(i=0; i<navigator.plugins.length; ++i)
document.write("<br>" + navigator.plugins[i].name);
//-->
</script>
</body></html>

Beachten Sie: Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel auch.

20.29 Number
Eigenschaften
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY

(grte speicherbare Zahl)

(kleinste speicherbare Zahl)
(keine gltige Zahl)
(Zahl zu klein)
(Zahl zu gro)

Methoden
toExponential()
toFixed()
toPrecision()
toString()

(Typkonvertierung)
(Typkonvertierung)
(Typkonvertierung)
(Typkonvertierung)

Number: Allgemeines zur Verwendung

ber das Objekt Number haben Sie Zugriff auf Eigenschaften numerischer Werte. So knnen Sie
ermitteln, ob ein Wert eine gltige Zahl ist oder welches die maximale positive oder negative
Zahl ist, die in einer numerischen Variablen gespeichert werden kann. Eigenschaften des Number-Objekts knnen Sie direkt ansprechen, indem Sie Number davor notieren.

950

Kapitel 20: JavaScript Objekt-Referenz

Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var groessteZahl = Number.MAX_VALUE;
alert(groessteZahl);
var Monat = 13;
if (Monat < 1 || Monat > 12)
{
Monat = Number.NaN;
alert(Monat);
}
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert zunchst eine Variable namens groessteZahl. Dieser Variablen wird die
Eigenschaft Number.MAX_VALUE zugewiesen. Anschlieend steht in groessteZahl die grte
Zahl, die JavaScript verarbeiten kann. Die Zahl wird zur Kontrolle ausgegeben. Da die Zahl viel
zu gro ist, um sie direkt darzustellen, wird sie von JavaScript automatisch in Exponentialschreibweise dargestellt.
Dann definiert das Beispiel eine Variable namens Monat und weist dieser Variablen den Wert 13
zu. Danach wird abgefragt, ob der Wert von Monat, wie es sich fr Monate gehrt, zwischen 1
und 12 liegt. Wenn nicht (und das ist im Beispiel ja der Fall), wird der Variablen Monat die
Eigenschaft Number.NaN zugewiesen. Der Wert von Monat ist danach NaN. Das bedeutet so viel
wie: auf jeden Fall keine bzw. eine ungltige Zahl. Zur Kontrolle wird der neue Wert von Monat
ausgegeben.

MAX_VALUE
Speichert die grte erlaubte Zahl. Das Beispiel definiert eine Variable namens groessteZahl.
Dieser Variablen wird die Eigenschaft Number.MAX_VALUE zugewiesen. Anschlieend steht in
groessteZahl die grte Zahl, die JavaScript verarbeiten kann. Das Ergebnis wird zur Kontrolle
ausgegeben.
<html><head><title>Test</title>
<script type="text/javascript">
<!-var groessteZahl = Number.MAX_VALUE;
alert(groessteZahl);
//-->
</script>
</head><body>
</body></html>

20.29 Number

951

MIN_VALUE
Speichert die kleinste (negative) erlaubte Zahl. Das Beispiel definiert eine Variable namens
kleinsteZahl. Dieser Variablen wird die Eigenschaft Number.MIN_VALUE zugewiesen. Anschlieend steht in kleinsteZahl die grte negative Zahl, die JavaScript verarbeiten kann. Das
Ergebnis wird zur Kontrolle ausgegeben.
<html><head><title>Test</title>
<script type="text/javascript">
<!-var kleinsteZahl = Number.MIN_VALUE;
alert(kleinsteZahl);
//-->
</script>
</head><body>
</body></html>

NaN
NaN ist ein vordefinierter Wert (keine gltige Zahl). Dieser Wert kann z.B. als Rckgabewert fr

ungltige Zahlen verwendet werden. Ein Beispiel:

<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahl_1 = "3a";
var Zahl_2 = "3";
if(Zahl_1 != 3) Zahl_1 = Number.NaN;
if(Zahl_2 != 3) Zahl_2 = Number.NaN;
alert(Zahl_1);
alert(Zahl_2);
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert zwei Variablen Zahl_1 und Zahl_2. Dabei wird Zahl_1 mit dem Wert 3a
vorbelegt, Zahl_2 mit dem Wert 3. Anschlieend wird fr beide Variablen abgefragt, ob die
Variable ungleich der Zahl 3 ist. Wenn ja, also wenn der Wert nicht 3 ist, wird der entsprechenden Variablen die Eigenschaft Number.NaN (keine gltige Zahl) zugewiesen. Abschlieend
werden beide Variableninhalte ausgegeben. Zahl_1 hat nun den Wert NaN, weil es ungleich 3
war und deshalb die Eigenschaft NaN zugewiesen bekam. Zahl_2 dagegen speichert den Wert 3,
da es als gltige Zahl 3 anerkannt wurde obwohl sie bei der Initialisierung die 3 als Zeichenkette zugewiesen bekam: Hier greift die interne automatische Typumwandlung in JavaScript.
Beachten Sie: Mit der Eigenschaft Number.NaN knnen Sie nicht die Gltigkeit einer Zahl prfen, sondern ihr nur die Eigenschaft keine gltige Zahl zuweisen. Die Gltigkeit einer Zahl knnen Sie mit der Methode isNaN() prfen.

952

Kapitel 20: JavaScript Objekt-Referenz

NEGATIVE_INFINITY
Dies ist ein vordefinierter Wert (Ausgabewert: -Infinity). Er gibt an, ob eine (negative) Zahl
zu klein ist fr JavaScript, also auerhalb des Bereichs liegt, dessen Grenze durch MIN_VALUE
markiert ist. Der Wert kann z.B. als Rckgabewert fr zu kleine Zahlen verwendet werden. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahl = Number.MAX_VALUE * -2;
alert(Zahl);
var Monat=-1;
if (Monat<1) Monat=Number.NEGATIVE_INFINITY;
alert(Monat);
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert eine Variable Zahl, der als Wert das Produkt aus Number.MAX_VALUE, also
der grten mglichen Zahl, und -2 zugewiesen wird. Die Multiplikation erzeugt eine negative
Zahl, die kleiner ist als die kleinste erlaubte Zahl. Dadurch erhlt die Variable Zahl den Wert Infinity. Dieser bedeutet, dass der erlaubte Wertebereich unterschritten wurde. Im ersten Teil
des Beispiels weist JavaScript automatisch dem Ergebnis den Wert von Number.NEGATIVE_
INFINITY zu. Im zweiten Teil wird eine Variable Monat deklariert. Diese erhlt den ungltigen
Wert -1. In der nachfolgenden Abfrage wird geprft, ob Monat kleiner als 1 ist, und ihr wird in
diesem Fall die Eigenschaft Number.NEGATIVE_INFINITY zugewiesen.
Beachten Sie: Mit der Eigenschaft Number.NEGATIVE_INFINITY knnen Sie nicht prfen, ob
eine Zahl zu klein fr JavaScript ist. Die Gltigkeit einer Zahl knnen Sie mit der Methode
isFinite() prfen.

POSITIVE_INFINITY
Dies ist ein vordefinierter Wert (Ausgabewert: Infinity). Er gibt an, ob eine Zahl zu gro ist fr
JavaScript, also auerhalb des Bereichs liegt, dessen Grenze durch MAX_VALUE markiert ist. Der
Wert kann z.B. als Rckgabewert fr zu groe Zahlen verwendet werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-Zahl = Number.MAX_VALUE * 2;
alert(Zahl);
var Monat=13;
if (Monat>12) Monat=Number.POSITIVE_INFINITY;
alert(Monat);
//-->
</script>
</head><body>
</body></html>

20.29 Number

953

Das Beispiel definiert eine Variable Zahl, der als Wert das Produkt aus Number.MAX_VALUE, also
der grten mglichen Zahl, und 2 zugewiesen wird. Die Multiplikation erzeugt eine Zahl, die
grer ist als die grte erlaubte Zahl. Dadurch erhlt die Variable Zahl den Wert Infinity.
Dieser bedeutet, dass der erlaubte Wertebereich berschritten wurde. Im ersten Teil des Beispieles weist JavaScript dem Ergebnis den Wert von Number.NEGATIVE_INFINITY zu. Im zweiten
Teil wird eine Variable Monat deklariert. Diese erhlt den ungltigen Wert 13. In der nachfolgenden Abfrage wird geprft, ob Monat grer als 12 ist. In diesem Fall wird ihr die Eigenschaft
Number.POSITIVE_INFINITY zugewiesen.
Beachten Sie: Mit der Eigenschaft Number.POSITIVE_INFINITY knnen Sie nicht prfen, ob
eine Zahl zu gro fr JavaScript ist. Die Gltigkeit einer Zahl knnen Sie mit der Methode
isFinite() prfen.

toExponential()
Erzwingt die Exponentialschreibweise einer Zahl. Das Beispiel definiert einen Wert und schreibt
das Ergebnis der Anwendung von toExponential() auf diesen Wert ins Dokument. Geschrieben wird 1.3000012345e+1.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Wert = 13.000012345;
document.write(Wert.toExponential());
//-->
</script>
</body></html>

toFixed()
Erzwingt eine bestimmte Anzahl Nachkommastellen. Das Beispiel definiert einen Wert und
schreibt das Ergebnis der Anwendung von toFixed(2) auf diesen Wert ins Dokument.
Geschrieben wird 7123.20, weil der an die Methode im Beispiel bergebene Wert 2 so viel bedeutet wie: schneide nach 2 Nachkommastellen ab.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Wert = 7123.203848;
document.write(Wert.toFixed(2));
//-->
</script>
</body></html>

Beachten Sie: Diese Methode rundet automatisch kaufmnnisch. Wrde der Wert im Beispiel
7123.209848 lauten, dann wrde 7123.21 ermittelt. Um diese Automatik zu verhindern, knnen Sie toPrecision() verwenden.

954

Kapitel 20: JavaScript Objekt-Referenz

toPrecision()
Erzwingt eine bestimmte Genauigkeit bei der Darstellung einer Zahl. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-Wert = 7123.209;
document.write("precision(1) = "
document.write("precision(2) = "
document.write("precision(3) = "
document.write("precision(4) = "
document.write("precision(5) = "
document.write("precision(6) = "
document.write("precision(7) = "
document.write("precision(8) = "
//-->
</script>
</body></html>

+
+
+
+
+
+
+
+

Wert.toPrecision(1)
Wert.toPrecision(2)
Wert.toPrecision(3)
Wert.toPrecision(4)
Wert.toPrecision(5)
Wert.toPrecision(6)
Wert.toPrecision(7)
Wert.toPrecision(8)

+
+
+
+
+
+
+
+

"<br>");
"<br>");
"<br>");
"<br>");
"<br>");
"<br>");
"<br>");
"<br>");

Das Beispiel definiert einen Wert und schreibt dann mehrfach das Ergebnis der unterschiedlichen Anwendung von toPrecision(x) auf diesen Wert ins Dokument. Geschrieben wird:
precision(1) = 7e+3
precision(2) = 7.1e+3
precision(3) = 7.12e+3
precision(4) = 7123
precision(5) = 7123.2
precision(6) = 7123.21
precision(7) = 7123.209
precision(8) = 7123.2090

to string()
Wandelt eine Zahl in eine Zeichenkette (String) um. Diese Methode ist dann notwendig, wenn
Sie Methoden des String-Objekts auf eine Zahl anwenden wollen. Die Methode toString()
besitzt einen optionalen Parameter. Der Parameter gibt die Basis des gewnschten Zahlensystems an (z.B. 10 fr das Dezimalsystem, oder 16 fr das Hexadezimalsystem). Der optionale
Parameter kann Werte zwischen 2 und 36 annehmen. Wird kein Parameter angegeben, so wird
die Zahl als Dezimalzahl behandelt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Dezimalzahl = 15.5;
var Dualzahl=Dezimalzahl.toString(2);
alert(Dualzahl);
//-->
</script>
</body></html>

20.30 RegExp

955

Das Beispiel definiert eine Variable namens Dezimalzahl. Diese Variable enthlt die Dezimalzahl 15.5. Anschlieend wird der Variablen Dualzahl der Rckgabewert der Methode
toString() mit dem Parameter 2 zugewiesen. In der Variablen Dualzahl ist jetzt die Zahl 15.5
als Dualzahl-Zeichenkette gespeichert. Im Beispiel wird im Meldungsfenster 1111.1 ausgegeben.
Damit fungiert die Methode toString() gleichzeitig als Umrechner von Zahlen des dezimalen
Zahlensystems in Zahlen anderer Zahlensysteme. Mit der Methode parseInt() knnen Sie umgekehrt Zeichenketten von Zahlen anderer Zahlensysteme in das dezimale Zahlensystem konvertieren.

20.30 RegExp
Eigenschaften
$[1..9]

(geklammerte Unterausdrcke)

Methoden
exec()
test()

(regulren Ausdruck anwenden)

(regulren Ausdruck probehalber anwenden)

RegExp: Allgemeines zur Verwendung

Regulre Ausdrcke dienen dazu, Suchausdrcke zu formulieren, um in Zeichenketten danach
zu suchen und um gefundene Stellen durch andere zu ersetzen. Regulre Ausdrcke knnen Sie
in JavaScript direkt innerhalb entsprechender Methoden des string-Objekts anwenden, nmlich in den Methoden:

match()

replace()

search()
Dort wird beschrieben, wie und wo Sie den regulren Ausdruck genau verwenden knnen, um
Zeichenketten zu durchsuchen und Teile darin zu ersetzen. Das RegExp-Objekt von JavaScript
brauchen Sie dagegen nur, wenn Sie regulre Ausdrcke zur Laufzeit des Scripts dynamisch
erzeugen und ndern wollen. Dazu knnen Sie eine Instanz eines RegExp-Objekts definieren.
Auf diese Instanz knnen Sie anschlieend die Eigenschaften und Methoden des RegExp-Objekts
anwenden, die hier beschrieben werden. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ausgabe(Wert)
{
var Ausdruck = /(\w.+)\s(\w.+)/;
Ausdruck.exec(Wert);
alert(RegExp.$2 + ", " + RegExp.$1);
}
//-->

956

Kapitel 20: JavaScript Objekt-Referenz

</script>
</head><body>
<form action="">
<input name="User" value="Vorname Zuname">
<input type="button" value="Ausgabe" onClick="Ausgabe(this.form.User.value)">
</form>
</body></html>

Das Beispiel zeigt, wie sich ein Name des Schemas Vorname Name unter Verwendung eines
regulren Ausdrucks in das Schema Name, Vorname verwandeln lsst. Das Beispiel enthlt ein
Formular mit einem Eingabefeld und einem Button. In dem Eingabefeld soll der Anwender
seinen Namen in der Form Vorname Name eingeben. Deshalb ist das Feld auch schon so vorbelegt. Beim Anklicken des Buttons wird die Funktion Ausgabe() aufgerufen, die im Dateikopf
definiert ist. Als Parameter bekommt die Funktion den Inhalt des Eingabefeldes bergeben.
Innerhalb der Funktion wird ein regulrer Ausdruck (Suchausdruck) definiert, der in der Variablen Ausdruck gespeichert wird. Solche regulren Ausdrcke werden in einfache Schrgstriche
/.../ eingeschlossen. Der regulre Ausdruck im obigen Beispiel ist so zu lesen: Suche nach einer
beliebigen Anzahl von aneinander gereihten Buchstaben ohne Ziffern und Satzzeichen und
merke dir das Ergebnis = (\w.+). Suche dann nach einem einzelnen Leerzeichen = \s. Suche
dann noch mal nach einer beliebigen Buchstabenreihenfolge und merke dir das Ergebnis =
(\w.+). Auf diese Weise wird das Schema Vorname Name gefunden. Die beiden Klammern
um das (\w.+) fhren dazu, dass die beiden einzelnen Buchstabenreihenfolgen als einzelne Teile
intern gemerkt werden. Spter sind diese einzelnen gemerkten Teile separat ansprechbar.
Im Beispiel wird mit dem nchsten Befehl die eine wichtige Methode des RegExp-Objekts auf
den zuvor definierten regulren Ausdruck angewendet, nmlich die Methode exec(). Dadurch
wird der Ausdruck ausgefhrt und direkt dem RegExp-Objekt zugewiesen. Im Beispiel wird
mit RegExp.$2 direkt auf den zweiten, zuvor intern gemerkten Klammerausdruck zugegriffen,
und mit RegExp.$1 auf den ersten dieser Ausdrcke. Durch die Anordnung mit dem Komma
dazwischen bei der Ausgabe mit alert() erscheint der zuvor eingegebene Vorname, Name
dann in dem anderen Schema Name, Vorname. Die folgende bersicht zeigt, aus welchen
Bestandteilen Sie einen regulren Ausdruck zusammensetzen knnen.
Bestandteil

Beispiel

Beschreibung

/aus/
^

/^aus/

/aus$/

/aus*/

/aus+/

/.aus/

Findet aus, und zwar in aus, Haus, auserlesen und Banause.

Findet aus am Anfang des zu durchsuchenden Wertes, also in aus und
auserlesen, sofern das die ersten Wrter im Wert sind.
Findet aus am Ende des zu durchsuchenden Wertes, also in aus und
Haus, sofern das die letzten Wrter im Wert sind.
Findet aus, auss und aussssss, also das letzte Zeichen vor dem Stern 0
oder beliebig oft hintereinander wiederholt.
Findet auss und aussssss, also das letzte Zeichen vor dem Stern
mindestens einmal oder beliebig oft hintereinander wiederholt.
Findet Haus und Maus, also ein beliebiges Zeichen an einer bestimmten
Stelle.

20.30 RegExp

957

Bestandteil

Beispiel

Beschreibung

.+

/.+aus/

\b

/\baus\b/

\B

/\Baus\B/

\d

/\d.+\B/

\D

/\D.+/

\f

/\f/

\n

/\n/

\r

/\r/

\t

/\t/

\v

/\v/

\s

/\s/

\S

/\S.+/

\w

/\w.+/

\W

/\W/

\()

/(aus)/

/.../g

/aus/g

Findet Haus und Kehraus, also eine beliebige Zeichenfolge an einer

bestimmten Stelle. Zusammensetzung aus beliebiges Zeichen und beliebig
viele davon.
Findet aus als einzelnes Wort. \b bedeutet eine Wortgrenze.
Findet aus nur innerhalb von Wrtern, z.B. in hausen oder Totalausfall. \B bedeutet keine Wortgrenze.
Findet eine beliebige ganze Zahl. \d bedeutet eine Ziffer (0 bis 9).
Findet -fach in 3-fach, also keine Ziffer.
Findet ein Seitenvorschubzeichen.
Findet ein Zeilenvorschubzeichen.
Findet ein Wagenrcklaufzeichen.
Findet ein Tabulatorzeichen.
Findet ein vertikales Tabulatorzeichen.
Findet jede Art von white space, also \f\n\t\v und Leerzeichen.
Findet ein beliebiges einzelnes Zeichen, das kein white space ist, also kein
\f\n\t\v und kein Leerzeichen.
Findet alle alphanumerischen Zeichen und den Unterstrich (typische
Bedingung etwa fr programmiersprachengerechte selbst vergebene Namen).
Findet ein Zeichen, das nicht alphanumerisch und auch kein Unterstrich ist
(typisch zum Suchen nach illegalen Zeichen bei programmiersprachengerechten selbst vergebenen Namen).
Findet aus und merkt es sich intern. Bis zu 9 solcher Klammern
(Merkpltze) sind in einem regulren Ausdruck erlaubt.
Findet aus so oft, wie es in dem gesamten zu durchsuchenden Bereich
vorkommt. Die Fundstellen werden intern in einem Array gespeichert.
Findet aus, Aus und AUS, also unabhngig von Gro-/Kleinschreibung.
Findet aus, so oft, wie es in dem gesamten zu durchsuchenden Bereich
vorkommt (g) und unabhngig von Gro-/Kleinschreibung (i).

/.../i

/aus/i

/.../gi

/aus/gi

$[1..9]
Speichert gemerkte Bestandteile eines regulren Ausdrucks, also geklammerte Teile. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Vollversion = /(\d)/;
Vollversion.exec(navigator.userAgent);
document.write("Volle Versionsnummer Ihres Browsers: " + RegExp.$1);
//-->
</script>
</body></html>

Das Beispiel definiert einen regulren Ausdruck namens Vollversion, der nach dem ersten
Vorkommen einer Ziffer sucht und sich die Fundstelle durch eine Klammer = (\d) merkt.

958

Kapitel 20: JavaScript Objekt-Referenz

Dieser regulre Ausdruck wird dann auf die Objekteigenschaft navigator.userAgent angewendet, die Angaben zum Browser des Anwenders speichert. Da dieser Wert einem bestimmten
Schema folgt, ist klar, dass die erste darin vorkommende Ziffer die Vollversion des Browsers
darstellt (sofern sie einstellig ist). Im Beispiel wird die gefundene Versionsnummer dynamisch in
die Datei geschrieben. Dabei wird direkt ber das RegExp-Objekt auf die Eigenschaft $1 zugegriffen. Das ist der erste in einer Klammer gemerkte Teilausdruck des aktuellen regulren Ausdrucks, im Beispiel die Versionsziffer.

exec()
Wendet einen regulren Ausdruck auf eine Zeichenkette an. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var derSatz = "Auf der Mauer";
var Suche = /(au)/g;
var Ergebnis = Suche.exec(derSatz);
document.write(Ergebnis.length + " Suchtreffer");
//-->
</script>
</body></html>

Das Beispiel demonstriert den Zusammenhang: Ein regulrer Ausdruck wird definiert, im Beispiel ein regulrer Ausdruck mit dem Namen Suche. Mit einer Anweisung wie Suche.exec()
knnen Sie dann die Suche starten. Als Parameter wird der Methode in der Regel der zu durchsuchende Ausdruck bergeben. Die Methode gibt die gefundenen Suchtreffer zurck. Die Variable, in der der Rckgabewert gespeichert wird (im Beispiel die Variable Ergebnis), wird automatisch zu einem Array, wenn mehr als ein Suchtreffer gefunden wurde. Im Beispiel werden
zwei Treffer gefunden. Deshalb lsst sich auch die Array-Eigenschaft length auf die Variable
Ergebnis anwenden.

test()
Testet vorab, ob ein regulrer Ausdruck zu Suchtreffern fhrt oder nicht. Gibt true zurck,
wenn etwas gefunden wurde, und false, wenn nichts gefunden wurde. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var derSatz = "Auf der Mauer";
var Suche = /(sonstwas)/g;
var Ergebnis = Suche.test(derSatz);
if(Ergebnis == false)
document.write("nichts gefunden");
//-->
</script>
</body></html>

20.31 Screen

959

Das Beispiel definiert einen regulren Ausdruck namens Suche und wendet ihn mit Hilfe der
Methode test() auf die Variable derSatz an. Der Rckgabewert wird in der Variablen Ergebnis gespeichert. Wenn nichts gefunden wird, wird ein entsprechender Hinweis geschrieben. Im
Beispiel ist das der Fall.

20.31 Screen
Eigenschaften
availHeight
availWidth
colorDepth
height
pixelDepth
width

(verfgbare Hhe)
(verfgbare Breite)
(Farbtiefe)
(Hhe)
(Farbauflsung)
(Breite)

screen: Allgemeines zur Verwendung

Mit dem Objekt screen knnen Sie Angaben zum Bildschirm des Anwenders ermitteln. Diese
Angaben zu kennen ist wichtig, wenn Sie professionelles Screendesign mit HTML und JavaScript betreiben wollen. Das screen-Objekt ist bei Netscape und beim MS Internet Explorer ab
den 4er Versionen verfgbar. Eigenschaften des screen-Objekts knnen Sie direkt ansprechen,
indem Sie screen davor notieren. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert(screen.width + "x" + screen.height);
//-->
</script>
</head><body>
</body>
</html>

Das Beispiel gibt beim Einlesen der Datei Breite (screen.width) mal Hhe (screen.height)
des Anwenderbildschirms aus. Es handelt sich dabei um die Angabe in Pixeln, Ergebnisse sind
also etwa 800x600 oder 1024x768.

availHeight
Speichert die maximal verfgbare Bildschirmhhe in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von screen.height, wenn feste Bildschirmelemente wie immer eingeblendete Taskleisten usw. einen Teil des Bildschirms oben oder unten
einnehmen. Whrend height dann beispielsweise 768 liefert, gibt availHeight z.B. nur 712
aus, weil eine Taskleiste 56 Pixel Hhe einnimmt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!--

960

Kapitel 20: JavaScript Objekt-Referenz

if(screen.availHeight != screen.height)
alert("Sie sehen mehr von dieser Seite, wenn Sie die Taskleiste ausblenden");
//-->
</script>
</head><body>
</body></html>

Das Beispiel vergleicht die beiden Eigenschaften screen.availHeight und screen.height.

Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste
immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

availWidth
Speichert die maximal verfgbare Bildschirmbreite in Pixeln, die eine Anwendung im Vollbildmodus einnehmen kann. Unterscheidet sich von screen.width, wenn feste Bildschirmelemente
wie immer eingeblendete Taskleisten usw. links oder rechts einen Teil des Bildschirms einnehmen. Whrend width dann beispielsweise 1024 liefert, gibt availWidth z.B. nur 940 aus, weil an
einer Seite eine Taskleiste 84 Pixel Breite einnimmt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(screen.availWidth != screen.width)
alert("Sie haben wohl seitlich eine Taskbar!");
//-->
</script>
</head><body>
</body></html>

Das Beispiel vergleicht die beiden Eigenschaften screen.availWidth und screen.width.

Wenn beide nicht den gleichen Wert speichern, hat der Anwender vermutlich seine Taskleiste
immer im Vordergrund. Das Beispiel gibt in diesem Fall einen entsprechenden Hinweis aus.

colorDepth
Speichert die Anzahl Bits, die der Anwenderbildschirm zur Darstellung einer Farbe an jedem
Pixelpunkt des Bildschirms verwendet. Ein Wert von 16 bedeutet beispielsweise: Der Bildschirm
kann 2 hoch 16, also 65536 Farben darstellen. Diese Eigenschaft hat dann einen Wert, wenn der
Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird undefined (Netscape)
oder null (MS Internet Explorer) gespeichert. Bei Netscape knnen Sie dann die Eigenschaft
pixelDepth abfragen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-alert(Math.pow(2,screen.colorDepth));
//-->
</script>
</head><body>
</body></html>

20.31 Screen

961

Das Beispiel ermittelt die Anzahl Farben, die der Anwenderbildschirm darstellen kann, durch
Anwendung der Math-Mthode pow(). Mit Math.pow(2,screen.colorDepth) wird der Wert,
den screen.colorDepth speichert, als Exponent zur Basis 2 benutzt. Das Ergebnis ist also 2
hoch screen.colorDepth.

height
Speichert die absolut verfgbare Hhe des Anwenderbildschirms in Pixeln, besser bekannt als
Hhe der Bildschirmauflsung. Typische Werte sind 480, 600 und 768. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(screen.height >= 768)
window.location.href = "datei1.htm"
else
window.location.href = "datei2.htm"
//-->
</script>
</head><body>
</body></html>

Das Beispiel fragt ab, ob die verfgbare Bildschirmhhe grer oder gleich 768 ist. Wenn ja, wird
automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmhhe kleiner ist), wird
datei2.htm geladen.

pixelDepth
Speichert die Farbtiefe des Anwenderbildschirms in Bit pro Pixel. Diese Eigenschaft hat dann
einen Wert, wenn der Anwenderbildschirm intern eine Farbpalette benutzt. Andernfalls wird
undefined (Netscape) oder null (MS Internet Explorer) gespeichert, und Sie mssen die
Eigenschaft colorDepth abfragen. Ein Beispiel:
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!-if(screen.pixelDepth)
alert(screen.pixelDepth);
//-->
</script>
</head><body>
</body></html>

Das Beispiel ermittelt, ob fr screen.pixelDepth ein Wert verfgbar ist. Wenn ja, wird der
Wert in einem Meldungsfenster ausgegeben.

962

Kapitel 20: JavaScript Objekt-Referenz

width
Speichert die absolut verfgbare Breite des Anwenderbildschirms in Pixeln, besser bekannt als
Breite der Bildschirmauflsung. Typische Werte sind 640, 800 und 1024. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-if(screen.width >= 1024)
window.location.href = "datei1.htm"
else
window.location.href = "datei2.htm"
//-->
</script>
</head><body>
</body></html>

Das Beispiel fragt ab, ob die verfgbare Bildschirmbreite grer oder gleich 1024 ist. Wenn ja,
wird automatisch datei1.htm geladen, wenn nicht (also wenn die Bildschirmbreite kleiner ist),
wird datei2.htm geladen.

20.32 string
Eigenschaften
length

(Anzahl Zeichen)

Methoden
anchor()
big()
blink()
bold()
charAt()
charCodeAt()
concat()
fixed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
match()
replace()
search()
slice()

(Verweisanker erzeugen)
(groen Text erzeugen)
(blinkenden Text erzeugen)
(fetten Text erzeugen)
(Zeichen an einer Position ermitteln)
(Latin-1-Codewert an einer Position)
(Zeichenketten zusammenfgen)
(Teletyper-Text erzeugen)
(Schriftfarbe erzeugen)
(Schriftgre erzeugen)
(Latin-1-Zeichenkette erzeugen)
(Position eines Zeichens ermitteln)
(kursiven Text erzeugen)
(letzte Position eines Zeichens ermitteln)
(Verweis erzeugen)
(regulren Ausdruck anwenden)
(regulren Ausdruck anwenden und ersetzen)
(Suchen mit regulrem Ausdruck)
(Teil aus Zeichenkette extrahieren)

20.32 string
small()
split()
strike()
sub()
substr()
substring()
sup()
toLowerCase()
toUpperCase()

963

(kleinen Text erzeugen)

(Zeichenkette aufsplitten)
(durchgestrichenen Text erzeugen)
(tiefgestellten Text erzeugen)
(Teilzeichenkette ab Position ermitteln)
(Teilzeichenkette ermitteln)
(hochgestellten Text erzeugen)
(alles klein schreiben)
(alles gro schreiben)

Allgemeines zur Verwendung

Die Eigenschaften und Methoden des Objektes string knnen Sie auf alle Zeichenketten anwenden. So knnen Sie in einer Zeichenkette z.B. alle darin enthaltenen Kleinbuchstaben in
Grobuchstaben umwandeln oder HTML-Formatierungen auf die Zeichenkette anwenden. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Ort = "Friedrichshafen"
alert(Ort + " hat " + Ort.length + " Buchstaben")
//-->
</script>
</head>
<body>
</body></html>

Im Beispiel wird eine Variable Ort definiert, der ein Wert zugewiesen wird, nmlich der Wert
Friedrichshafen. Anschlieend wird in einem Meldungsfenster ausgegeben: Friedrichshafen hat 15 Buchstaben. Dies geschieht durch einen Aufruf der Objekteigenschaft length. Vor
dem Punkt kann also eine Variable oder auch irgendeine andere JavaScript-Objekteigenschaft
stehen, in der eine Zeichenkette gespeichert ist. Hinter dem Punkt folgt die gewnschte Eigenschaft oder Methode des string-Objekts. Zeichenketten in JavaScript werden als eine Kette von
Einzelzeichen betrachtet. Jedes Einzelzeichen hat seine Position in der Zeichenkette. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Name = "Hans";
alert(Name[0] + Name[1] + Name[2] + Name[3]);
//-->
</script>
</head>
<body>
</body></html>

Das Beispiel, das in dieser Form allerdings nur mit Netscape, nicht mit dem MS Internet Explorer und Opera 5.12 funktioniert, definiert eine Variable mit dem Namen Name. Diese Variable
erhlt den Wert "Hans". In einem Meldungsfenster wird anschlieend zeichenweise dieser Wert
der Variablen Name ausgegeben. Das Ergebnis ist das gleiche, wie wenn einfach alert(Name)

964

Kapitel 20: JavaScript Objekt-Referenz

notiert wrde. Aber an dieser Notationsform knnen Sie erkennen, wie Zeichenketten funktionieren: Name[0] ist das H, Name[1] das a, Name[2] das n und Name[3] das s. Es wird also immer
bei 0 zu zhlen begonnen.

length
Speichert die Anzahl Zeichen einer Zeichenkette, bei der Zeichenkette Guten Abend beispielsweise 11. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Eingabe = window.prompt("Irgendetwas eingeben","");
alert("Eingegebene Zeichen: " + Eingabe.length);
//-->
</script></body></html>

Das Beispiel blendet ein Dialogfenster ein, in dem der Anwender irgendetwas eingeben kann.
Der eingegebene Wert wird in der Variablen Eingabe gespeichert. Nach Beenden des Dialogfensters wird ein Meldungsfenster ausgegeben, das mit Eingabe.length ausgibt, wie viele Zeichen eingegeben wurden.

anchor()
Formatiert eine Zeichenkette als Verweisanker, der mit Hilfe eines HTML-Verweises angesprungen werden kann. Hat also die gleiche Wirkung wie das HTML-Konstrukt <a name=>...</a>.
Als Parameter erwartet die Methode den gewnschten Ankernamen. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Anker = "Inhaltsverzeichnis";
document.write(Anker.anchor("a1"));
for(var i=1;i<100;++i)
document.write("<br>Zeile " + i);
document.write("<br><a href=\"#Anker\">Testverweis<\;/a>");
//-->
</script></body></html>

Das Beispiel definiert eine Variable Anker mit dem Wert Inhaltsverzeichnis. Mit Hilfe von
document.write() wird daraus ein Verweisanker geschrieben. Die Konstruktion Anker.
anchor("a1") bewirkt dabei das Gleiche wie das HTML-Konstrukt <a name="a1">
Inhaltsverzeichnis</a>. Zu Testzwecken werden im Beispiel anschlieend 100 Zeilen in die
Datei geschrieben und dahinter ein Verweis. Beim Klicken auf den Verweis wird der mit
JavaScript erzeugte Verweisanker angesprungen.
Beachten Sie: Das Beispiel funktioniert nur eingeschrnkt. Opera 5.12 und Netscape 4.x springen
nach dem Klick auf den Verweis an den Anfang des Dokumentes. Netscape 6 und der MS Internet Explorer ignorieren den Anker vollstndig. Tests ergaben jedoch, dass alle Browser den
String erzeugen und auch einen Eintrag im Objekt anchors anlegen.

20.32 string

965

big()
Formatiert eine Zeichenkette mit grerer Schrift, genau wie die HTML-Formatierung <big>...
</big>. Erwartet als Parameter eine Zeichenkette. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var update = document.lastModified;
document.write(update.big());
//-->
</script></body></html>

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei
zuletzt gendert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette.
Mit Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die
Formatierung dabei entspricht der HTML-Formatierung <big>...</big>.

blink()
Formatiert eine Zeichenkette als blinkenden Text, genau wie die HTML-Formatierung
<blink>...</blink>. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Ausgabe = "Best view only with your " + navigator.appName";
document.write(Ausgabe.blink());
//-->
</script></body></html>

Im Beispiel wird eine Variable namens Ausgabe mit einem Wert belegt. Mit Hilfe von document.write() wird der Wert von Ausgabe in die Datei geschrieben. Die Formatierung dabei
entspricht der HTML-Formatierung <blink>...</blink>.
Beachten Sie: Obwohl weder Opera 5.12, Netscape 6 noch der MS Internet Explorer die HTMLNotation <blink>...</blink> untersttzen, interpretieren diese Browser jedoch die Methode
und erzeugen den entsprechenden HTML-Code.

bold()
Formatiert eine Zeichenkette als fetten Text, genau wie die HTML-Formatierung <b>...</b>.
Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var DieseSeite = window.location.href;
document.write("Adresse: " + DieseSeite.bold());
//-->
</script></body></html>

966

Kapitel 20: JavaScript Objekt-Referenz

Im Beispiel ermittelt ein JavaScript mit Hilfe von window.location.href den URI der aktuellen Datei. In der Variablen DieseSeite steht dann eine entsprechende Zeichenkette. Mit Hilfe
von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung
dabei entspricht der HTML-Formatierung <b>...</b>.

charAt()
Liefert dasjenige Zeichen zurck, das in einer Zeichenkette an einer bestimmten Position steht.
Erwartet als Parameter die gewnschte Position. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Vollversion = navigator.appVersion.charAt(0);
alert(Vollversion);
//-->
</script></body></html>

Im Beispiel ermittelt ein JavaScript mit Hilfe von navigator.appVersion, welche Version seines Browsers der Anwender benutzt. Auf navigator.appVersion wird jedoch zustzlich die
Methode chatAt() angewendet. Als Parameter wird 0 bergeben, denn es soll das erste Zeichen
des Wertes ermittelt werden, der in navigator.appVersion steht (dies ist immer die Nummer
der Vollversion, also bei Netscape 4.01 etwa die 4). Das Ergebnis der Konstruktion wird in der
Variablen Vollversion gespeichert. Zur Kontrolle wird der Wert dieser Variablen anschlieend
in einem Meldungsfenster ausgegeben.

charCodeAt()
Liefert den Latin-1-Zeichensatzwert eines Zeichens zurck, das in einer Zeichenkette an einer
bestimmten Position steht. Erwartet als Parameter die gewnschte Position. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Name = "Hans";
alert(Name.charCodeAt(1));
//-->
</script></body></html>

Im Beispiel wird eine Variable Name mit dem Wert Hans belegt. In einem Meldungsfenster wird
anschlieend ausgegeben, welchen Zeichensatzwert das zweite Zeichen dieser Variablen hat, also
das a in Hans. Dazu wird charCodeAt als Parameter 1 bergeben, denn in JavaScript hat das
erste Zeichen einer Zeichenkette immer die Position 0, das zweite die Position 1 usw. Als Ergebnis wird 97 angezeigt. Dies ist der Zeichensatzwert des kleinen a.

concat()
Hngt eine Zeichenkette an eine andere Zeichenkette an. Erwartet als Parameter die Zeichenkette, die an die erste angehngt werden soll. Ein Beispiel:

20.32 string

967

<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Vorname = "Hans ";
var Zuname = "Hansen";
var Name = Vorname.concat(Zuname);
alert(Name);
//-->
</script></body></html>

Im Beispiel werden zwei Variablen Vorname und Zuname mit entsprechenden Werten belegt.
Dann wird die Methode concat() auf die Variable Vorname angewendet. Als Parameter wird
der Methode die Variable Zuname bergeben. Auf diese Weise wird Zuname an Vorname angehngt. Die Methode concat() gibt die zusammengefgte Zeichenkette zurck. Im Beispiel wird
dieser Rckgabewert in der Variablen Name gespeichert. Zur Kontrolle wird diese Variable
anschlieend in einem Meldungsfenster ausgegeben.

fixed()
Formatiert eine Zeichenkette als Teletyper-Text, genau wie die HTML-Formatierung <tt>...
</tt>. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var update = document.lastModified;
document.write("zuletzt aktualisiert: " + update.fixed());
//-->
</script></body></html>

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei zuletzt gendert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette. Mit
Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <tt>...</tt>.

fontcolor()
Formatiert eine Zeichenkette in farbiger Schrift, genau wie die HTML-Formatierung <font
color=>...</font>. Erwartet als Parameter die gewnschte Farbe. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Zeit = new Date;
var Datum = Zeit.getDate()+"."+(Zeit.getMonth()+1)+"."+Zeit.getFullYear();
document.write(Datum.fontcolor("#FF0000"));
//-->
</script></body></html>

Das Beispiel erzeugt mit Hilfe des Date-Objekts das aktuelle Tagesdatum und speichert dieses in
der Variablen Datum. Mit Hilfe von document.write() wird der Wert von Datum in die Datei

968

Kapitel 20: JavaScript Objekt-Referenz

geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <font color=

"#FF0000">...</font>. Als Werte sind hexadezimale Werte oder Farbnamen erlaubt (siehe
Kapitel 3.5, Farben definieren in HTML).

fontsize()
Formatiert eine Zeichenkette in einer relativen Schriftgre zwischen 1 und 7, wobei 3 die Normalschriftgre ist. Hat die gleiche Wirkung wie die HTML-Formatierung <font size=>...
</font>. Erwartet als Parameter die gewnschte Gre der Schrift. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Ausgabe = "Meine Homepage";
document.write(Ausgabe.fontsize(7));
//-->
</script></body></html>

Im Beispiel wird eine Variable namens Ausgabe mit einem Wert belegt. Mit Hilfe von document.write() wird der Wert von Ausgabe in die Datei geschrieben. Die Formatierung dabei
entspricht der HTML-Formatierung <font size="7">...</font>.

fromCharCode()
Interpretiert eine Reihe von numerischen Parametern, die als Parameter bergeben werden, als
Latin-1-Zeichensatzwerte. Erzeugt eine entsprechende Zeichenkette daraus. Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Test = String.fromCharCode(65,66,67);
alert(Test);
//-->
</script></body></html>

Im Beispiel wird mit String.fromCharCode() die Zeichenkette ABC erzeugt und in der
Variablen Test gespeichert. Die Zeichenkette kommt dadurch zustande, dass 66 der dezimale
Zeichensatzwert fr A ist, 67 derjenige fr B und 68 der fr C. Im Beispiel wird das Ergebnis zur
Kontrolle in einem Meldungsfenster ausgegeben. Wichtig ist, vor der Methode fromCharCode()
immer das feste Schlsselwort String (grogeschrieben) zu notieren.

indexOf()
Ermittelt das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer Zeichenkette und gibt zurck, an wievielter Stelle das Zeichen in der Zeichenkette steht. Die Zhlung
beginnt bei 0. Wenn die Suche erfolglos ist, wird -1 zurckgegeben. Optional ist es mglich, die
Funktion in einem zweiten Parameter anzuweisen, ab der wievielten Stelle in der Zeichenkette
sie mit der Suche beginnen soll. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!--

20.32 string

969

var Aussage = "Der Mensch ist dem Mensch sein Feind";

var Suche = Aussage.indexOf("Mensch");
alert("gefunden bei Position: " + Suche);
//-->
</script></body></html>

Das Beispiel belegt eine Variable Aussage mit einem Wert. Anschlieend wird der Wert dieser
Variablen mit indexOf() nach dem ersten Vorkommen von Mensch innerhalb der Zeichenkette
gesucht. In der Variablen Suche wird der Rckgabewert von indexOf() gespeichert. Im Beispiel
wird 4 zurckgegeben, da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum ersten
Mal an 5. Stelle der Zeichenkette beginnt. Vergleiche auch: lastIndexOf().

italics()
Formatiert eine Zeichenkette kursiv, genau wie die HTML-Formatierung <i>...</i>. Ein
Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Zeit = new Date;
var Uhrzeit = Zeit.getHours()+":"+Zeit.getMinutes();
document.write(Uhrzeit.italics());
//-->
</script></body></html>

Das Beispiel erzeugt mit Hilfe des Date-Objekts die aktuelle Uhrzeit und speichert diese in der
Variablen Uhrzeit. Mit Hilfe von document.write() wird der Wert von Uhrzeit in die Datei
geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <i>...</i>.

lastIndexOf()
Ermittelt das letzte Vorkommen eines Zeichens oder einer Zeichenkette innerhalb einer
Zeichenkette und gibt zurck, an wievielter Stelle das Zeichen in der Zeichenkette steht. Die
Zhlung beginnt bei 0. Wenn die Suche erfolglos ist, wird -1 zurckgegeben. Optional ist es
mglich, die Funktion in einem zweiten Parameter anzuweisen, ab der wievielten Stelle in der
Zeichenkette sie mit der Suche beginnen soll. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Aussage = "Der Mensch ist dem Mensch sein Feind";
var Suche = Aussage.lastIndexOf("Mensch");
alert("gefunden bei Position: " + Suche);
//-->
</script></body></html>

Das Beispiel belegt eine Variable Aussage mit einem Wert. Anschlieend wird der Wert dieser
Variablen mit lastIndexOf() nach dem letzten Vorkommen von Mensch innerhalb der Zeichenkette gesucht. In der Variablen Suche wird der Rckgabewert von lastIndexOf() gespei-

970

Kapitel 20: JavaScript Objekt-Referenz

chert. Im Beispiel wird 19 zurckgegeben, da die Zeichenfolge Mensch in der durchsuchten Zeichenkette zum letzten Mal an 20. Stelle der Zeichenkette beginnt. Vergleiche auch: indexOf().

link()
Formatiert eine Zeichenkette als Verweis. Hat den gleichen Effekt wie die HTML-Formatierung
<a href=>...</a>. Erwartet als Parameter einen URI fr das Verweisziel. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Homepage = "zu meiner Homepage";
document.write(Homepage.link("home.htm"))
//-->
</script>
<br>
<script type="text/javascript">
<!-var document.write(document.referrer.link(document.referrer));
//-->
</script></body></html>

Das Beispiel im ersten Script belegt zunchst eine Variable Homepage mit einem Wert. Daran
anschlieend wird mit document.write() ein Verweis geschrieben. Dazu wird die Methode
link() auf die Variable Homepage angewendet. Der Wert von Homepage wird dabei der Verweistext. Als Parameter wird das gewnschte Verweisziel bergeben, im Beispiel die Datei
home.htm.
Das Beispiel im zweiten Script erzeugt dynamisch einen Verweis zu der Adressse, von wo aus der
Anwender die aktuelle Seite aufgerufen hat. Dabei liefert die Eigenschaft document.
referrer die Adresse der Herkunftsseite. Das Beispiel ist so konstruiert, dass hinterher die
Adresse von document.referrer sowohl das Verweisziel als auch der Verweistext ist.

match()
Durchsucht eine Zeichenkette mit Hilfe eines regulren Ausdrucks. Liefert Zeichenfolgen
zurck, auf die der regulre Ausdruck passt. Erwartet als Parameter den regulren Ausdruck. Ein
Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Aussage = "Der Mensch ist des Menschen sein Feind";
var Ergebnis = Aussage.match(/ Mensch.[+^\S] /);
alert(Ergebnis);
//-->
</script>
<script type="text/javascript">
<!-Aussage = "Der Mensch ist des Menschen sein Feind";
Ergebnis = Aussage.match(/ \bMensch\b|\bMenschen\b /g);

20.32 string

971

if(Ergebnis)
for(i=0;i<Ergebnis.length;++i)
alert(Ergebnis[i]);
//-->
</script>
<script type="text/javascript">
<!-Aussage = "Wir wollen weisse Waesche waschen";
Ergebnis = Aussage.match(/w/gi);
if(Ergebnis)
alert(Ergebnis.length + " gefunden");
//-->
</script>
</body></html>

Das erste Script im Beispiel belegt eine Variable Aussage mit einem Wert. Auf den gespeicherten
Wert dieser Variablen wird mit match() ein regulrer Ausdruck angewendet. Dieser findet die
Zeichenfolge Mensch, wenn noch zwei weitere Zeichen folgen, aber nicht, wenn ein Leerzeichen dabei ist. Auf diese Weise wird nur das hintere Wort Menschen gefunden. Das Ergebnis
wird in einem Meldungsfenster ausgegeben.
Das zweite Script im Beispiel wendet auf den gespeicherten Wert der Variablen Aussage mit
match() ein anderen regulren Ausdruck an. Dieser findet die Zeichenfolge Mensch, aber
auch die Zeichenfolge Mensch. Hinter dem Ausdruck ist auerdem mit g markiert, dass global
gesucht werden soll. Dadurch werden alle Fundstellen zurckgegeben. Da es sich um mehrere
Fundstellen handeln kann, ist der zurckgegebene Wert kein einfacher Wert, sondern ein Array
aus Werten. Die Variable Ergebnis, in der der Rckgabewert im Beispiel gespeichert wird, muss
deshalb anschlieend als Array behandelt werden. Das Array-Objekt wird jedoch nur erzeugt,
wenn es Suchtreffer gibt. Deshalb ist es sicherer, folgende Anweisungen von der Abfrage abhngig zu machen, ob das Objekt existiert. Mit if(Ergebnis) ist eine solche Abfrage mglich. Im
Beispiel werden dann in einer for-Schleife alle Suchtreffer ausgegeben. Dieses Script wird von
Opera 5.12 nicht interpretiert.
Das dritte Script im Beispiel belegt die Variable Aussage mit einem neuen Wert, in dem der
Buchstabe w oft vorkommt, mal klein- und mal grogeschrieben. Auf den gespeicherten Wert
dieser Variablen wird mit match() ein regulrer Ausdruck angewendet. Dieser sucht nach dem
Vorkommen von w, und zwar wieder, wie im zweiten Script, global. Es werden also alle Fundstellen als Array zurckgegeben. Im Beispiel sollen jedoch sowohl klein- als auch grogeschriebene w gefunden werden. Deshalb wird hinter dem regulren Ausdruck noch zustzlich ein kleines i notiert. Dies bewirkt, dass Gro-/Kleinschreibung nicht beachtet wird. Zur Kontrolle wird
im Beispiel die Anzahl der Fundstellen ausgegeben.
Nheres ber regulre Ausdrcke finden Sie beim RegExp-Objekt (Kapitel 23.30). Nheres ber
Arrays wird beim Array-Objekt beschrieben (Kapitel 23.21). Um nicht gefundene Zeichenfolgen, sondern nur Positionen gefundener Ausdrcke zu ermitteln, knnen Sie die Methode
search() verwenden.

replace()
Durchsucht eine Zeichenkette mit Hilfe eines regulren Ausdrucks. Ersetzt Zeichenfolgen, auf
die der regulre Ausdruck passt. Erwartet folgende Parameter:

972

Kapitel 20: JavaScript Objekt-Referenz

reg. Ausdruck = Ein regulrer Ausdruck, der Suchtreffer liefern kann.

Ersetzen durch = Eine Zeichenkette, durch die gefundene Stellen ersetzt werden sollen.
Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var vormals = "Elke Hinz";
var jetzt = vormals.replace(/Hinz/,"Kunz, geb. Hinz");
document.write(jetzt);
//-->
</script></body></html>

Das Script im Beispiel belegt eine Variable vormals mit einem Namen. Auf den gespeicherten
Namen wird mit replace() ein Suche-Ersetze-Vorgang angewendet. Der erste Parameter, der
replace() bergeben wird, ist ein regulrer Ausdruck. Dieser findet die Zeichenfolge Hinz.
Ein Suchtreffer bewirkt das Ersetzen dieser Zeichenfolge durch Kunz, geb. Hinz. Das Ergebnis
wird zur Kontrolle in die Datei geschrieben. Nheres ber regulre Ausdrcke und weitere Beispiele fr diese Methode finden Sie beim RegExp-Objekt (Kapitel 20.30).

search()
Durchsucht eine Zeichenkette mit Hilfe eines regulren Ausdrucks. Liefert -1 zurck, wenn der
regulre Ausdruck nicht passt. Wenn er passt, wird die Position des ersten Vorkommens zurckgeliefert. Erwartet als Parameter den regulren Ausdruck. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Aussage = "Wir wollen weisse Waesche waschen";
var Ergebnis = Aussage.search(/weiss.+/);
if(Ergebnis != -1)
alert("gefunden");
//-->
</script>
</body></html>

Das Beispiel belegt die Variable Aussage mit einem Wert. Auf den gespeicherten Wert dieser Variablen wird mit search() ein regulrer Ausdruck angewendet. Dieser sucht nach dem Vorkommen von weiss, gefolgt von einem beliebigen Inhalt. Der Rckgabewert von search()
wird in der Variablen Ergebnis gespeichert. Wenn diese am Ende ungleich -1 ist, gab es zu dem
regulren Ausdruck Suchtreffer. Im Beispiel wird in diesem Fall einfach eine entsprechende Meldung ausgegeben. Nheres ber regulre Ausdrcke finden Sie beim RegExp-Objekt (Kapitel
23.30). Um nicht Positionen gefundener Ausdrcke als Rckgabewerte zu erhalten, sondern die
Ausdrcke selbst, knnen Sie die Methode match() verwenden.

20.32 string

973

slice()
Extrahiert aus einer Zeichenkette eine Teilzeichenkette. Gibt die extrahierte Zeichenkette zurck.
Erwartet folgende Parameter:
Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei
0 zu zhlen begonnen wird.
Index Ende = Position des ersten nicht mehr zu extrahierenden Zeichens in der Zeichenkette,
wobei bei 0 zu zhlen begonnen wird.
Sie knnen den zweiten Parameter auch weglassen. Dann wird bis zum Ende der Zeichenkette
extrahiert. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Begriff = "Garnele";
var Extrakt = Begriff.slice(0,4);
alert(Extrakt);
//-->
</script></body></html>

Das Beispiel belegt die Variable Aussage mit einem Wert. Aus dem Wert dieser Variablen werden mit slice() die ersten vier Zeichen, also die Zeichen mit den Positionswerten 0, 1, 2 und 3,
extrahiert. Der Rckgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der
Variablen Extrakt gespeichert. Diese wird zur Kontrolle als Meldung ausgegeben.

small()
Formatiert eine Zeichenkette als kleingeschriebenen Text, genau wie die HTML-Formatierung
<small>...</small>. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var update = document.lastModified;
document.write(update.small());
//-->
</script></body></html>

Im Beispiel ermittelt ein JavaScript mit Hilfe von document.lastModified, wann die Datei zuletzt gendert wurde. In der Variablen update steht dann eine entsprechende Zeichenkette. Mit
Hilfe von document.write() wird der Wert von update in die Datei geschrieben. Die Formatierung dabei entspricht der HTML-Formatierung <small>...</small>.

split()
Zerlegt Zeichenketten in mehrere Teilzeichenketten. Die erzeugten Teilzeichenketten werden in
einem Array gespeichert. Erwartet als Parameter ein Begrenzerzeichen oder eine Begrenzerzeichenfolge, die als Trennmerkmal fr die Teilzeichenketten verwendet werden soll. Optional kann

974

Kapitel 20: JavaScript Objekt-Referenz

als zweiter Parameter noch bergeben werden, wie viele Split-Vorgnge maximal erzeugt werden
sollen. Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Satz = "Wer nicht vom rechten Weg abkommt bleibt auf der Strecke";
var Woerter = Satz.split(" ");
document.write("Ein Satz mit " + Woerter.length + " W&ouml;rtern.<br>");
document.write("Das 5. Wort ist " + Woerter[4]);
//-->
</script></body></html>

Das Beispiel belegt die Variable Satz mit einem Wert. Aus dem Wert dieser Variablen werden
mit split() die einzelnen Wrter extrahiert. Dazu wird der Methode als Parameter ein Leerzeichen bergeben. Bei jedem Leerzeichen im Satz wird dadurch eine neue Teilzeichenkette erzeugt.
Der Rckgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der Variablen
Woerter gespeichert. Dies ist keine gewhnliche Variable, sondern ein Array. Zu Testzwecken
schreibt das Beispiel in die Datei, wie viele Elemente der Array hat (Woerter.length) und welches das 5. Wort ist. Dies ist das Wort mit dem Array-Index 4, da auch in diesem Fall bei 0 zu
zhlen begonnen wird. Nheres ber Arrays finden Sie beim Array-Objekt (Kapitel 23.30).

strike()
Formatiert eine Zeichenkette als durchgestrichenen Text, genau wie die HTML-Formatierung
<strike>...</strike>. Im Beispiel schreibt ein JavaScript mit document.write() den URI
der aktuellen Datei. Die Formatierung dabei entspricht der HTML-Formatierung <strike>...
</strike>.
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-document.write(window.location.href.strike());
//-->
</script></body></html>

sub()
Formatiert eine Zeichenkette als tiefgestellten Text, genau wie die HTML-Formatierung _.... Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Tief0 = "0";
document.write("ISDN und S" + Tief0.sub() + "-Bus");
//-->
</script></body></html>

20.32 string

975

Im Beispiel wird eine Variable Tief0 definiert, die das Zeichen 0 speichert. Mit Hilfe von document.write() wird dann ein Text in die Datei geschrieben. Die Formatierung der 0 entspricht
dabei der HTML-Formatierung _....

substr()
Extrahiert aus einer Zeichenkette eine Teilzeichenkette ab einer bestimmten Zeichenposition
und mit einer bestimmten Lnge. Gibt die extrahierte Zeichenkette zurck. Erwartet folgende
Parameter:
Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei
0 zu zhlen begonnen wird.
Anzahl Zeichen = Anzahl Zeichen, die extrahiert werden sollen.
Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Begriff = "Donaudampfschifffahrt";
var Teil = Begriff.substr(5,11);
alert(Teil);
//-->
</script></body></html>

Das Beispiel belegt die Variable Begriff mit einem Wert. Aus dem Wert dieser Variablen wird
mit substr() ein Teil extrahiert, nmlich ab Zeichen 6 (Index 5), und dann die folgenden 11
Zeichen. Der Rckgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der
Variablen Teil gespeichert. Zur Kontrolle wird diese Variable als Meldungsfenster ausgegeben.
Sie enthlt den Wert dampfschiff.

substring()
Extrahiert aus einer Zeichenkette eine Teilzeichenkette ab einer bestimmten Zeichenposition
und bis zu einer bestimmten Zeichenposition. Gibt die extrahierte Zeichenkette zurck. Erwartet
folgende Parameter:
Index Anfang = Position des ersten zu extrahierenden Zeichens in der Zeichenkette, wobei bei
0 zu zhlen begonnen wird.
Index Ende = Position des ersten nicht mehr zu extrahierenden Zeichens in der Zeichenkette,
wobei bei 0 zu zhlen begonnen wird.
Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Begriff = "Donaudampfschifffahrt";
var Teil = Begriff.substring(5,16);
alert(Teil);
//-->
</script></body></html>

976

Kapitel 20: JavaScript Objekt-Referenz

Das Beispiel belegt die Variable Begriff mit einem Wert. Aus dem Wert dieser Variablen wird
mit substring() ein Teil extrahiert, nmlich ab Zeichen 6 (Index 5), und bis vor Zeichen 17
(Index 16). Der Rckgabewert der Funktion, die extrahierte Zeichenkette, wird im Beispiel in der
Variablen Teil gespeichert. Zur Kontrolle wird diese Variable als Meldungsfenster ausgegeben.
Sie enthlt den Wert dampfschiff.

sup()
Formatiert eine Zeichenkette als hochgestellten Text, genau wie die HTML-Formatierung
^.... Ein Beispiel:
<html><head><title>Test</title></head><body>
<script type="text/javascript">
<!-var Hoch2 = "2";
document.write("10" + Hoch2.sup() + " = " + Math.pow(10,2));
//-->
</script></body></html>

Im Beispiel wird eine Variable Hoch2 definiert, die das Zeichen 2 speichert. Mit Hilfe von document.write() wird dann ein Text in die Datei geschrieben. Die Formatierung der 2 entspricht
dabei der HTML-Formatierung ^....

toLowerCase()
Wandelt alle Grobuchstaben, die in einer Zeichenkette enthalten sind, in Kleinbuchstaben um.
Erwartet die Zeichenkette, die so behandelt werden soll, als Parameter. Gibt die neue Zeichenkette zurck. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function MachKlein() {
var neu = document.Test.Eingabe.value.toLowerCase();
document.Test.Eingabe.value = neu;
}
//-->
</script>
</head><body>
<form name="Test" action="">
<input name="Eingabe">
<input type="button" value="klein machen" onClick="MachKlein()">
</form>
</body></html>

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der
Anwender auf den Button klickt, wird die Funktion MachKlein() aufgerufen. Diese Funktion
wendet die Methode toLowerCase() auf das Eingabefeld des Formulars an. Das Ergebnis wird
in der Variablen neu gespeichert. Anschlieend wird dem Formulareingabefeld der Wert von
neu zugewiesen. Dadurch werden alle eventuell eingegebenen Grobuchstaben in dem Eingabefeld zu Kleinbuchstaben.

20.33 Objektunabhngige Funktionen

977

toUpperCase()
Wandelt alle Kleinbuchstaben, die in einer Zeichenkette enthalten sind, in Grobuchstaben um.
Erwartet die Zeichenkette, die so behandelt werden soll, als Parameter. Gibt die neue Zeichenkette zurck. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function MachGross() {
neu = document.Test.Eingabe.value.toUpperCase();
document.Test.Eingabe.value = neu;
}
//-->
</script>
</head><body>
<form name="Test" action="">
<input name="Eingabe">
<input type="button" value="gross machen" onClick="MachGross()">
</form>
</body></html>

Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der
Anwender auf den Button klickt, wird die Funktion MachGross() aufgerufen. Diese Funktion
wendet die Methode toUpperCase() auf das Eingabefeld des Formulars an. Das Ergebnis wird
in der Variablen neu gespeichert. Anschlieend wird dem Formulareingabefeld der Wert von
neu zugewiesen. Dadurch werden alle eventuell eingegebenen Kleinbuchstaben in dem Eingabefeld zu Grobuchstaben.

20.33 Objektunabhngige Funktionen

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
eval()
escape()
isFinite()
isNaN()
parseFloat()
parseInt()
Number()
String()
unescape()

(kodierten URI dekodieren)

(kodierten URI dekodieren II)
(URI kodieren)
(URI kodieren II)
(Ausdruck interpretieren)
(ASCII-Zeichen in Zahlen umwandeln)
(auf numerischen Wertebereich prfen)
(auf numerischen Wert prfen)
(in Kommazahl umwandeln)
(in Ganzzahl umwandeln)
(auf numerischen Wert prfen)
(in Zeichenkette umwandeln)
(Zahlen in ASCII-Zeichen umwandeln)

978

Kapitel 20: JavaScript Objekt-Referenz

Allgemeines zu objektunabhngigen Funktionen

Objektunabhngige Funktionen sind im Gegensatz zu selbst definierten Funktionen in JavaScript
bereits vordefiniert. Das heit, Sie knnen diese Funktionen jederzeit aufrufen. Es handelt sich
um bestimmte, zum Teil mchtige JavaScript-Befehle, die in keines der JavaScript-Objekte passen und deshalb nicht der objektorientierten Richtung von JavaScript folgen.

decodeURI()
Dekodiert einen URI, der mit encodeURI() kodiert wurde. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-Adresse = "http://www.my.de/cgi-bin/script.pl?Text=der bergebene Text&Name=Stefan
Mnz";
document.write("<b>Adresse unkodiert:<\/b> " + Adresse + "<br>");
Adresse = encodeURI(Adresse);
document.write("<b>Adresse kodiert:<\/b> " + Adresse + "<br>");
Adresse = decodeURI(Adresse);
document.write("<b>Adresse wieder dekodiert:<\/b> " + Adresse + "<br>");
//-->
</script>
</body></html>

Das Beispiel definiert eine typische Adresse mit bergabeparametern an ein Script. Zunchst
schreibt es die Adresse wie sie ist ins Dokument. Dann wird die Adresse mit encodeURI()
behandelt und zur Kontrolle ausgegeben. Schlielich wird nach dem gleichen Schema decodeURI() angewendet und die Adresse nochmals ausgegeben.
Beachten Sie: Opera 5.12 interpretiert dieses Methode nicht.

decodeURIComponent()
Wie decodeURI(). Sollte aber nur auf Adressen oder Adressteile angewendet werden, die mit
mit encodeURIComponent() kodiert wurden.

encodeURI()
Verschlsselt einen URI so, dass alle Sonderzeichen in ASCII-Zeichensequenzen umgewandelt
werden. Besonders wichtig ist dies fr Aufrufe von CGI-Scripts mit Parametern. Denn HTML
4.0 verlangt beispielsweise, im href-Attribut von Verweisen enkodierte Zeichenketten zu verwenden, sofern die Adressen Sonderzeichen enthalten.
Kodiert alle auer den folgenden Zeichen:
A bis Z
a bis z
-_.!~*()
,/?:@&=+$

20.33 Objektunabhngige Funktionen

979

Kodiert werden also beispielsweise deutsche Umlaute und Sonderzeichen, auch Leerzeichen,
eckige und geschweifte Klammern usw. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Adresse = encodeURI("http://www.my.de/cgi-bin/script.pl?Text=der bergebene
Text&Name=Stefan Mnz");
document.write("<a href=\"" + Adresse + "\">Verweis<\/a>");
//-->
</script>
</body></html>

Das Beispiel ruft die Funktion encodeURI() auf und bergibt ihr einen typischen URI mit Parametern. Der Rckgabewert der Funktion wird in der Variablen Adresse gespeichert. Anschlieend wird dynamisch ein Verweis in die Datei geschrieben, wobei die zuvor enkodierte Adresse
ins href-Attribut eingefgt wird.
Beachten Sie: Opera 5.12 interpretiert dieses Methode nicht.

encodeURIComponent()
Wie encodeURI(), aber mit dem Unterschied, dass auch folgende Zeichen kodiert werden: , / ?
:@&=+$

escape()
Wandelt Steuersequenzen (Steuerzeichen mit den ASCII-Werten 0 bis 31) und Sonderzeichen
wie z.B. deutsche Umlaute in ihre ASCII-Zahlenwerte um, und zwar in hexadezimaler Form.
Setzt vor jeden Wert das Trennzeichen % und gibt die so erzeugte Zeichenkette zurck. Bei
anderen Zeichen als Steuer- und Sonderzeichen gibt escape() die Zeichen unverndert zurck.
Es handelt sich also um eine Funktion, die Steuer- und Sonderzeichen aus Werten entfernt und
in Zeichenfolgen bersetzt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Beispiel = "\n\r\t";
document.write(escape(Beispiel));
//-->
</script></body></html>

Das Beispiel definiert eine Variable Beispiel, der verschiedene Steuerzeichen zugewiesen werden (siehe dazu den Abschnitt 18.5 ber Steuerzeichen). Diese Variable wird der Funktion
escape() als Parameter bergeben. Das Ergebnis wird zur Kontrolle ins Dokumentfenster geschrieben.
Beachten Sie: Diese Funktion wird in Zukunft durch encodeURI() ersetzt!

980

Kapitel 20: JavaScript Objekt-Referenz

eval()
Interpretiert ein zu bergebendes Argument und gibt das Ergebnis zurck. Wenn das bergebene Argument als Rechenoperation interpretierbar ist, wird die Operation berechnet und das
Ergebnis zurckgegeben. Dabei sind auch komplexe Rechenausdrcke mit Klammerung mglich. Diese Funktionalitt ist sehr praktisch, um als Zeichenketten notierte Rechenausdrcke mit
einem einzigen Befehl errechnen zu lassen.
Wenn das bergebene Argument als Objekt oder Objekteigenschaft interpretiert werden kann,
wird das Objekt bzw. die Objekteigenschaft zurckgegeben. Dies ist wichtig, wenn eine Zeichenkette (z.B. ein Formularfeldinhalt oder ein einer Funktion bergebener Parameter) als Objekt
interpretiert werden soll. Erzeugt eine Fehlermeldung, wenn der bergebene Ausdruck nicht
interpretierbar ist. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<form action="">
<input size="30" name="Eingabe">
<input type="button" value="Berechnen"
onClick="alert(eval(this.form.Eingabe.value))">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einem Eingabefeld und einem Button. In dem Eingabefeld
kann der Anwender eine Rechenoperation eingeben, zum Beispiel 1+2+3+4+5+6+7+8+9 oder
12.78*5.13. Beim Klick auf den Button wird der Wert aus dem Formular mit eval() berechnet
und in einem Meldungsfenster ausgegeben.

isFinite()
Ermittelt, ob ein Wert sich innerhalb des Zahlenbereichs befindet, den JavaScript verarbeiten
kann, also aus Sicht von JavaScript eine gltige Zahl darstellt. Gibt true zurck, wenn der Wert
eine gltige Zahl ist, und false, wenn es keine Zahl ist bzw. die Zahl sich auerhalb des Wertebereiches von JavaScript befindet. Sowohl ganze Zahlen als auch Kommazahlen werden als gltige Zahlen erkannt. Bei Kommazahlen muss das Dezimalzeichen ein Punkt sein. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var Zahl=Number.MAX_VALUE;
if (!isFinite(Zahl*2)) alert("Die Zahl ist nicht zu verarbeiten.");
//-->
</script>
</head><body>
</body></html>

Das Beispiel definiert eine Variable Zahl, der als Wert Number.MAX_VALUE die grte mgliche
Zahl zugewiesen wird. In der anschlieenden Abfrage wird geprft, ob das Produkt dieser Zahl
mit 2 sich innerhalb des verarbeitbaren Zahlenbereiches befindet. Ist dies nicht der Fall, so wird
eine entsprechende Warnmeldung ausgegeben.

20.33 Objektunabhngige Funktionen

981

isNaN()
Ermittelt, ob ein zu bergebender Wert eine ungltige Zahl ist (NaN = Not a Number). Gibt
true zurck, wenn der Wert keine Zahl ist, und false, wenn es eine Zahl ist. Sowohl ganze
Zahlen als auch Kommazahlen werden als gltige Zahlen anerkannt. Bei Kommazahlen muss das
Dezimalzeichen ein Punkt sein. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function CheckZahl(Wert)
{
if(isNaN(Wert) == true)
{
alert(Wert + " ist keine Zahl!");
return false;
}
else return true;
}
//-->
</script>
</head><body>
<form action="">
<input size="30" name="Eingabe">
<input type="button" value="Check"
onClick="CheckZahl(this.form.Eingabe.value)">
</form>
</body></html>

Das Beispiel enthlt ein Formular mit einem Eingabefeld und einem Button. Beim Klick auf den
Button wird die Funktion CheckZahl() aufgerufen. Der Funktion wird der Wert aus dem Eingabefeld des Formulars als Parameter bergeben. CheckZahl() prft, ob der bergebene Wert
eine Zahl ist. Dazu wird isNaN() auf den bergebenen Wert angewendet. Wenn es keine Zahl
ist, wird eine Fehlermeldung ausgegeben.
Beachten Sie: Fr diese Methode sind auch Zahlen, die auerhalb des Zahlenbereichs von
JavaScript liegen, gltige Zahlen. Zur berprfung der Gre von Zahlen mssen Sie die Methode isFinite() verwenden.

parseFloat()
Wandelt eine zu bergebende Zeichenkette in eine Zahl um und gibt diese als numerischen Wert
zurck. Wenn sich die Zahl als Kommazahl interpretieren lsst, wird dies bercksichtigt. Als Dezimalzeichen wird jedoch nur der Punkt interpretiert. Sinnvoll, um z.B. Anwendereingaben in
Zahlen umzuwandeln, mit denen man anschlieend rechnen kann.
Gibt NaN (Not a Number) zurck, wenn die Zeichenkette mit Zeichen beginnt, die sich nicht als
Teil einer Zahl interpretieren lassen. Wenn die Zeichenkette weiter hinten ungltige Zeichen
enthlt, wird die Zahl bis zum ersten ungltigen Zeichen interpretiert und der interpretierte Teil
zurckgegeben. Ein Beispiel:

982

Kapitel 20: JavaScript Objekt-Referenz

<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var Elemente = new Array("18","18.1","18,9","abc","1a");
document.write("<h1>Anwendung von <i>parseFloat()<\/i><\/h1>");
for(var i=0;i<Elemente.length;++i)
document.write(Elemente[i] + " = <b> " + parseFloat(Elemente[i]) + "<\/b><br>");
//-->
</script></body></html>

Das Beispiel definiert einen Array mit verschiedenen Elementen, die teils ganze, teils Kommazahlen, teils gar keine Zahlen darstellen. Dann werden in einer for-Schleife alle Elemente des
Arrays mit der write()-Methode dynamisch in die Datei geschrieben. Dabei wird jedoch die
Funktion parseFloat() auf das jeweilige Array-Element angewendet.

parseInt()
Wandelt eine zu bergebende Zeichenkette in eine Ganzzahl um und gibt diese als Ergebnis
zurck. Sinnvoll, um z.B. Anwendereingaben in Zahlen umzuwandeln, mit denen man anschlieend rechnen kann. Gibt NaN (Not a Number) zurck, wenn die Zeichenkette mit Zeichen
beginnt, die sich nicht als Teil einer Zahl interpretieren lassen. Wenn die Zeichenkette weiter
hinten ungltige Zeichen enthlt, wird die Zahl bis zum ersten ungltigen Zeichen interpretiert
und der interpretierte Teil zurckgegeben. Das gilt bei parseInt() auch fr den Punkt. Ein
Beispiel:
<html><head><title>Test</title>
</head><body>
<script language="JavaScript" type="text/javascript">
<!-var Elemente = new Array("18","18.1","18.9","abc","1a");
document.write("<h1>Anwendung von <i>parseInt()<\/i><\/h1>");
for(var i=0;i<Elemente.length;++i)
document.write(Elemente[i] + " = <b> " + parseInt(Elemente[i]) + "<\/b><br>");
//-->
</script></body></html>

Das Beispiel definiert einen Array mit verschiedenen Elementen, die teils ganze, teils Kommazahlen, teils gar keine Zahlen darstellen. Dann werden in einer for-Schleife alle Elemente des
Arrays mit der write()-Methode dynamisch in die Datei geschrieben. Dabei wird jedoch die
Funktion parseInt() auf das jeweilige Array-Element angewendet.
Beachten Sie: Die Methode parseInt() erlaubt einen zweiten, optionalen Parameter radix.
Dieser Parameter enthlt die Basis des verwendeten Zahlensystems. Der Aufruf parseInt
(string,radix) ermittelt aus dem String, der eine Zahl eines anderen Zahlensystems darstellt,
die dazugehrige Dezimalzahl. Die Methode parseInt() kann damit gleichzeitig als Umrechner
von Zahlen anderer Zahlensysteme in das dezimale Zahlensystem verwendet werden. So ergibt
z.B. der Aufruf parseInt("11111",2) die Zahl 31. Der optionale Parameter kann Werte
zwischen 2 und 36 annehmen. Mit der Methode toString() des Number-Objektes knnen Sie
umgekehrt Dezimalzahlen in Zeichenketten von Zahlen anderer Zahlensysteme konvertieren.

20.33 Objektunabhngige Funktionen

983

Dabei ist im Gegensatz zur Methode parseInt() auch das Umwandeln von Kommazahlen
mglich.
Besonders im Bereich der Datumsberechnung werden hufig Zahlen mit fhrender Null benutzt.
Einfache Aufgaben wie alert(08*60) liefern dann scheinbar falsche Ergebnisse oder gar Fehlermeldungen. Des Rtsels Lsung dafr ist, dass JavaScript Zahlen mit fhrender 0 als Oktalzahlen interpretiert, nicht als Dezimalzahlen. Mit einer Anweisung wie alert(parseInt
("08",10)*60) knnen Sie das Problem vermeiden und erzwingen, dass der Wert dezimal
interpretiert wird.

Number()
Konvertiert den Inhalt eines Objekts in eine Zahl und gibt die Zahl zurck. Erwartet den
Objektinhalt als Parameter. Wenn sich der bergebene Parameter nicht als Zahl interpretieren
lsst, wird NaN (Not a Number) zurckgegeben. Vor allem brauchbar in Verbindung mit dem
Date-Objekt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var d = new Date ("March 15, 1998 08:27:00");
document.write(Number(d));
//-->
</script></body></html>

Das Beispiel definiert ein neues Datumobjekt und initialisiert es mit einem Wert im GMT-Format. Das Datumobjekt wird in der Variablen d gespeichert. Anschlieend wird diese Variable der
Funktion Number() als Parameter bergeben. Die Funktion Number() hat dabei die gleiche
Wirkung wie die Objektmethode d.getTime(), d.h. es wird die Anzahl Millisekunden zwischen
dem 1.1.1970 und dem in d gespeicherten Zeitpunkt errechnet. Im Beispiel wird das Ergebnis zur
Kontrolle in die Datei geschrieben.

String()
Konvertiert den Inhalt eines Objekts in eine Zeichenkette und gibt die Zeichenkette zurck. Vor
allem brauchbar in Verbindung mit dem Date-Objekt. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!-var d = new Date ();
document.write(String(d));
//-->
</script></body></html>

Das Beispiel definiert ein neues Datumobjekt mit dem aktuellen Zeitpunkt. Das Datumobjekt
wird in der Variablen d gespeichert. Anschlieend wird diese Variable der Funktion String()
als Parameter bergeben. Die Funktion erzeugt daraus eine Zeichenkette, die den gespeicherten

984

Kapitel 20: JavaScript Objekt-Referenz

Zeitpunkt im GMT-Format darstellt. Im Beispiel wird das Ergebnis zur Kontrolle in die Datei
geschrieben.

unescape()
Wandelt alle Zeichen der zu bergebenden Zeichenkette in normale ASCII-Zeichen um und gibt
die so erzeugte Zeichenkette zurck. Die zu bergebende Zeichenkette muss fr jedes umzuwandelnde Zeichen ein Prozentzeichen (%) und den Hexadezimalwert des Zeichens in der ASCIIZeichentabelle enthalten. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<script language="JavaScript" type="text/javascript">
<!-var Beispiel = "%53%74%65%66%61%6E";
document.write(unescape(Beispiel));
//-->
</script></body></html>

Das Beispiel definiert eine Variable namens Beispiel und weist ihr eine Zeichenkette zu. Die
Zeichenkette besteht aus einer Reihenfolge von hexadezimal kodierten Zeichen. Jedes Zeichen
beginnt mit einem Prozentzeichen, dahinter folgt der Hexadezimalwert des Zeichens. Diese
Variable wird der Funktion unescape() als Parameter bergeben. Das Ergebnis wird zur Kontrolle in die Datei geschrieben. Im Beispiel wird das Wort Stefan erzeugt.
Beachten Sie: Diese Funktion wird in Zukunft durch decodeURI() ersetzt!

985

21 Dynamisches HTML

21.1

Allgemeines zu Dynamischem HTML

21.1.1 Das Dynamische am Dynamischen HTML

Dynamisches HTML (engl. Dynamic HTML oder abgekrzt DHTML) ist eine Erfindung
von Marktstrategen, sagen Kritiker. In der Tat ist Dynamisches HTML keine klassische HTMLErweiterung in Gestalt neuer HTML-Elemente. Es ist auch keine neue Sprache. Dynamisches
HTML ist vielmehr der Sammelbegriff fr verschiedene Lsungen, um dem Autor einer WebSeite zu ermglichen, Elemente der Web-Seite whrend der Anzeige dynamisch zu ndern, sei es
automatisch oder durch Einwirken des Anwenders. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p id="Absatz"
onClick="document.getElementById(Absatz).firstChild.nodeValue=Sehen Sie!">
Ich bin dynamisch</p>
</body></html>

Das kleine Beispiel zeigt Dynamisches HTML nach dem Document Object Model (DOM) in seiner JavaScript-Umsetzung, das in dieser Form allerdings nur mit neueren Browsern (Internet
Explorer ab V5.x und Netscape ab V6.x) funktioniert. Es dient hier nur dem Zweck, das Typische an Dynamischem HTML zu verdeutlichen. In dem Beispiel wird mit <p>...</p> ein gewhnlicher HTML-Textabsatz definiert. Am Bildschirm steht dann: Ich bin dynamisch. Damit
der Textabsatz sein Versprechen auch halten kann, enthlt er im einleitenden <p>-Tag einen so
genannten Event-Handler, im Beispiel den Event-Handler onClick=. Dieser Event-Handler tritt
in Aktion, wenn der Anwender mit der Maus auf den angezeigten Text klickt. Im Beispiel verwandelt sich nach dem Anklicken des Textes dessen Inhalt in: Sehen Sie!.
Wie Sie an dem Beispiel erkennen, knnen Sie also bestimmte angezeigte Inhalte austauschen,
ohne dafr jedes Mal vollstndige neue Seiten laden zu mssen. Das ist eine charakteristische
Eigenschaft von Dynamischem HTML. Eine Web-Seite verhlt sich also pltzlich wie eine Anwendung, die einmal in den Arbeitsspeicher geladen wird und dann z.B. durch Interaktion mit
dem Anwender das Geschehen am Bildschirm bestimmt.
Dynamisches HTML bietet Gestaltern anspruchsvoller Web-Seiten schier unerschpfliche Mglichkeiten bei der Kontrolle ber das Geschehen am Bildschirm. Es fngt mit Kleinigkeiten wie
dem obigen Beispiel an. Es geht weiter mit animierten Grafiken, die ber den angezeigten Inhalt
gleiten oder hpfen manche Web-Seiten versuchen, ganze Aquarien abzubilden. Und es geht
hin bis zu der Mglichkeit, mit Hilfe von Grafiken und anderen Elementen komplexe, interaktive Spiele, Lernsituationen oder auch selbst ablaufende Animationen zu programmieren. Der
Phantasie sind kaum Grenzen gesetzt. Der Anwender kann beim Anzeigen einer dynamischen
HTML-Datei auch mit viel mehr Reaktionen konfrontiert werden als beim Betrachten einer

986

Kapitel 21: Dynamisches HTML

normalen, statischen Web-Seite. Das hat Vor- und Nachteile. Es kommt immer darauf an, wie
man die Features nutzt, ob zur bloen Selbstdarstellung und Angeberei oder zum Nutzen des
Anwenders. Auerdem sollte sich jeder Entwickler darber im Klaren sein, dass dynamische
Web-Seiten nicht unbedingt fr Suchmaschinen-Robots und erst recht nicht fr sehbehinderte
Anwender geeignet sind.
Programmieren ist auf jeden Fall bei allem angesagt, was mit Dynamischem HTML zu tun hat:
fortgeschrittene Programmierkenntnisse in JavaScript sind Voraussetzung. Im Web finden Sie
zwar fertige Lsungen zum Abkupfern, aber wer sich ernsthaft mit der Materie beschftigen will,
um eigene kreative Lsungen zu entwickeln, kommt um die Programmierung nicht herum. Das
soll jedoch keine Entmutigung sein. Es gibt durchaus ntzliche Anwendungsmglichkeiten von
Dynamischem HTML, die ohne allzugroen Programmieraufwand auskommen.

21.1.2 Das Problem der inkompatiblen Modelle

Dynamisches HTML wird von Netscape ab Version 4.0 und vom MS Internet Explorer ab Version 4.0 interpretiert. Leider ist das Thema Dynamic HTML bei diesen beiden Browser-Versionen jedoch zu einem Schauplatz im Browser-Krieg verkommen. Denn die Realisierungen sind
in beiden Browsern grundverschieden. Vieles muss fr das 4er-Level der beiden Browser getrennt kodiert werden (mit doppeltem Kenntnisaufwand), sofern man fr beide Browser schreiben will. Vieles funktioniert berhaupt nur mit dem einen oder mit dem anderen Browser. Vor
allem kann sich das echte dynamische HTML (beliebiger Zugriff auf alle HTML-Elemente
einer Web-Seite), wie es der Internet Explorer ab Version 4.0 bereits beherrscht, auf dem 4erLevel der Browser noch nicht richtig durchsetzen, da dort stets auf das wesentlich primitivere,
Layer-orientierte Modell von Netscape Rcksicht genommen werden muss.
Mittlerweile zeichnet sich jedoch ein einheitlicher Standard ab. Zu verdanken ist dieser Standard
dem W3-Konsortium, das auch HTML und CSS normiert. Fr den Script-Sprachen-Zugriff auf
Elemente einer Web-Seite hat das W3-Konsortium das Document Object Model (DOM) entworfen. Die neueren Versionen der fhrenden Browser setzen das DOM wenn auch noch mit
deutlichen Schwchen im Detail in JavaScript um, sodass es in absehbarer Zeit wohl einfacher
werden wird, Dynamisches HTML zu programmieren.
Dieses Buch stellt in den nchsten Abschnitten zunchst alle drei Modelle (Microsoft 4er-Level,
Netscape 4er-Level und DOM) getrennt vor. Denn nur wenn Sie die Konzepte klar unterscheiden knnen, sind Sie in der Lage, Dynamisches HTML so zu schreiben, dass es mit verschiedenen Browsern funktioniert. Im zweiten Schritt knnen Sie dann sehen, wie sich Dynamisches
HTML browserbergreifend realisieren lsst (Kapitel 22, DHTML-Praxis-Lsungen).

21.2

Das Document Object Model (DOM)

21.2.1 Allgemeines zum DOM

Das Document Object Model (DOM) ist eine vom W3-Konsortium verabschiedete Norm, die
zunchst einmal den Script-Sprachen-Zugriff auf beliebige Elemente eines Auszeichnungssprachen-Dokuments beschreibt. Das DOM ist also weder selber eine eigene Script-Sprache noch ist
es auf HTML beschrnkt. Es definiert lediglich Objekte, Eigenschaften und Methoden, die eine

21.2 Das Document Object Model (DOM)

987

Script-Sprache umsetzen sollte, wenn sie sich DOM-fhig bezeichnen will. Anwendbar sollen
diese Objekte, Eigenschaften und Methoden auf alle Dokumente sein, die in einer XMLgerechten Auszeichnungssprache geschrieben sind. Das W3-Konsortium betont ausdrcklich,
dass das DOM nicht einfach nur eine Norm fr Dynamic HTML sein soll. Das DOM ist auch
nicht auf die Client-Seite, also etwa den Web-Browser beschrnkt. Ebenso gut lsst es sich in
serverseitigen Scripts, z.B. in CGI-Scripts einsetzen, um Dokumente dynamisch zu erzeugen.
Wie auch immer das DOM ist die willkommene Lsung auch fr das, was hier unter dynamischem HTML verstanden wird, also das nachtrgliche dynamische Verndern von Inhalten einer
im Browser-Fenster angezeigten Web-Seite. 1998 erstmals als offizielle W3-Empfehlung herausgegeben, wurde es im MS Internet Explorer 5.0 und in dem von der Mozilla-Entwicklergemeinde
vllig neu programmierten Netscape-Browser, den Netscape selber unter der Version 6.0 anbot,
implementiert (JavaScript-Version 1.5). Die Implementierung ist in den heutigen Browsern
noch nicht vollstndig. Immer wieder wird man als Programmierer auf rtselhafte Verhaltensweisen im einen oder anderen Browser stoen. Dennoch ist die Richtung damit vorgegeben, wie
Dynamisches HTML in Zukunft programmiert werden wird.
Eine Auszeichnungssprache wie HTML oder auch jede andere, XML-basierte Sprache ist als hierarchische Baumstruktur abbildbar. Die einzelnen Bestandteile einer solchen Baumstruktur werden als Knoten bezeichnet. Das zentrale Objekt des DOM ist deshalb das Objekt node (node =
Knoten). Es gibt verschiedene Knotentypen. Innerhalb eines gewhnlichen HTML-Dokuments
gibt es auf jeden Fall drei wichtige Knotentypen, die Sie unterscheiden mssen: Elementknoten,
Attributknoten und Textknoten.
Betrachten Sie zum Verstndnis das folgende einfache HTML-Konstrukt:
<h1 align="center">Hallo Welt</h1>

In diesem Konstrukt gibt es einen Elementknoten, namlich den Elementknoten des h1-Elements.
Ferner gibt es einen Attributknoten, nmlich den des align-Attributs. Und schlielich gibt es so
genannte Zeichendaten, die an zwei Stellen vorkommen: nmlich einmal als Inhalt des h1Elements und einmal bei der Wertzuweisung an das align-Attribut. Diese Zeichendaten stellen
selbst Knoten dar, nmlich Textknoten.
Ein weiteres Beispielkonstrukt soll das Verstndnis vertiefen:
<h1 align="center">Hallo <i>Welt</i></h1>

In diesem Beispiel ist die Kursiv-Auszeichnung um das Wort Welt hinzugekommen. Wichtig ist
dabei nun zu verstehen, wie die Knotenhierarchie aussieht: Das h1-Element ist in diesem kleinen
Strukturbaum-Ausschnitt der Ausgangsknoten. Dieser Knoten hat nach den Regeln des DOM
zwei Kindknoten und einen assoziierten Knoten: Die Kindknoten sind zum einen der Textknoten mit dem Wort Hallo und dem Leerzeichen dahinter, sowie der Elementknoten des i-Elements. Das align-Attribut im einleitenden <h1>-Tag ist dagegen kein Kindknoten, sondern ein
assoziierter Knoten. Der Attributknoten hat jedoch selbst wiederum einen Kindknoten, nmlich
den zugewiesenen Wert (center). Auch der Elementknoten des i-Elements hat wieder einen
Kindknoten, nmlich den Textknoten seines Zeicheninhalts, also das Wort Welt.
Die Baumstruktur einer komplexen Web-Seite kann, wie sich aus diesen einfachen Beispielen
erschliet, sehr umfangreich und tief verschachtelt sein. In einer Script-Sprache muss es aber
mglich sein, mglichst schnell und effizient auf einzelne Knoten zugreifen zu knnen. Im DOM

988

Kapitel 21: Dynamisches HTML

gibt es daher drei wichtige Methoden des document-Objekts, um zumindest auf jeden beliebigen
Elementknoten direkt zugreifen zu knnen:
getElementById() kann auf Elemente zugreifen, die ein dokumentweit eindeutiges idAttribut enthalten, z.B. <p id="derAbsatz">hier steht der Text</p>.
getElementsByName() kann auf Elemente zugreifen, die einen Namen besitzen (er muss
nicht unbedingt eindeutig sein), z.B. <input name="Eingabefeld" type="text" size=
"40">.
getElementsByTagName() kann auf alle Elemente zugreifen in der Form: liefere mit das 27.
td-Element im Dokument.
Ausgehend von einem ermittelten Elementknoten lsst sich dann schnell auf dessen Attribute
und Inhalt zugreifen. Auch dafr stellt das DOM Eigenschaften und Methoden bereit. Dabei gibt
es jedoch bei HTML-basierten Web-Seiten zwei Varianten. Einmal knnen Sie die Eigenschaften
und Methoden des node-Objekts dazu verwenden, um auf Kindknoten und assoziierte Knoten
eines Elements zuzugreifen. Zum anderen knnen Sie aber auch die HTML-Elementobjekte
(Kapitel 20.5) benutzen. Vor allem fr den Zugriff auf einzelne Attribute eines Elements sind die
HTML-Elementobjekte gut geeignet.
Dynamisches HTML kann aber auch darin bestehen, neue Elemente mit Inhalten und Formatierungen zur Anzeigezeit einer Web-Seite neu zu erzeugen. Fr diesen Zweck hlt das DOM
ebenfalls Methoden bereit.
In der Version 1.0 des DOM wurde nur der Zugriff auf Knoten geregelt. Der Zugriff auf zugewiesene Style-Eigenschaften und von Event-Handling ist dort noch ausgespart. In der DOMVersion 2.0 vom November 2000 sind jedoch auch diese fr dynamische Web-Seiten wichtigen
Gebiete behandelt. Es ist deshalb auf jeden Fall empfehlenswert, bei neu zu erstellenden dynamischen Web-Seiten von den im DOM geregelten Techniken auszugehen. Die lteren Modelle
von Microsoft (Kapitel 21.3) und Netscape (Kapitel 21.4) sollten derzeit noch aus Grnden der
Rckwrtskompatibilitt eingesetzt werden, auf die Dauer jedoch langsam aus der Welt verschwinden, damit endlich ein einheitlicher Sprachenstandard das Programmieren dynamischer
Web-Seiten erleichtert.

21.2.2

Elementinhalte dynamisch ndern

Es gibt viele sinnvolle Anwendungsflle zum dynamischen ndern von zunchst angezeigten
HTML-Elementen. Das folgende Beispiel zeigt einen davon. In dem Beispiel wird eine nummerierte Liste von Grostdten zunchst alphabetisch sortiert ausgegeben. Unterhalb der Liste kann
der Anwender jedoch mit Hilfe zweier Formular-Buttons zwischen alphabetischer Sortierung
oder geographischer Sortierung wechseln. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var geoArray = new Array(6,7,0,1,4,3,8,9,2,5,11,12,10);
function ABC() {
var Staedte = new Array();

21.2 Das Document Object Model (DOM)

989

for(var i = 0; i < document.getElementsByTagName("li").length; i++)

Staedte.push(document.getElementsByTagName("li")[i].firstChild.nodeValue);
Staedte.sort();
for(i = 0; i < document.getElementsByTagName("li").length; i++)
document.getElementsByTagName("li")[i].firstChild.nodeValue = Staedte[i];
document.getElementById("Art").firstChild.nodeValue = "alphabetisch von A bis Z";
}
function GEO() {
var Staedte = new Array();
for(var i = 0; i < document.getElementsByTagName("li").length; i++)
Staedte.push(document.getElementsByTagName("li")[i].firstChild.nodeValue);
for(i = 0; i < document.getElementsByTagName("li").length; i++)
document.getElementsByTagName("li")[i].firstChild.nodeValue =
Staedte[geoArray[i]];
document.getElementById("Art").firstChild.nodeValue = "geographisch von Nord nach
Sd";
}
//-->
</script>
</head><body>
<h1>Groe Stdte <span id="Art">alphabetisch von A bis Z</span></h1>
<ol>
<li>Berlin</li>
<li>Dortmund</li>
<li>Dresden</li>
<li>Dsseldorf</li>
<li>Essen</li>
<li>Frankfurt</li>
<li>Hamburg</li>
<li>Hannover</li>
<li>Kln</li>
<li>Leipzig</li>
<li>Mnchen</li>
<li>Nrnberg</li>
<li>Stuttgart</li>
</ol>
<form name="Formular" action="">
<input type="button" name="abc" value="alphabetisch" onClick="ABC()">
<input type="button" name="geo" value="geographisch" onClick="GEO()">
</form>
</body></html>

Im Beispiel ist die nummerierte Liste zunchst mit den Stdtenamen in alphabetischer Sortierfolge notiert. In dem Formular unterhalb der Liste sind zwei Klick-Buttons notiert. Der eine ruft
die Funktion ABC() auf, der andere die Funktion GEO(). Ein Klick auf ABC() bringt natrlich
nichts, da die Liste ohnehin alphabetisch sortiert ist. Also empfiehlt sich zunchst der Klick auf
den Button mit der Aufschrift geographisch. Die Funktion GEO(), die er aufruft, definiert

990

Kapitel 21: Dynamisches HTML

zunchst mit var Staedte = new Array(); einen neuen, leeren Array. Das Vorhaben ist, diesen
Array mit den Stdtenamen aus der Liste zu fllen. Dazu greift die Funktion der Reihe nach in
einer for-Schleife alle Elemente vom Typ li ab, die in dem Dokument vorkommen.

21.1: Ein Klick auf die Buttons sortiert die Liste entsprechend um.

Der Zugriff erfolgt mit document.getElementsByTagName("li"). ber document.getElementsByTagName("li").length kann die Anzahl der li-Elemente im Dokument ermittelt
werden. Diese Information benutzt die Funktion als Abbruchbedingung fr die for-Schleife.
Innerhalb der Schleife wird dem Array mit der push-Methode der Inhalt des jeweils aktuellen
li-Elements hinzugefgt.
Mit document.getElementsByTagName("li ")[i].firstChild.nodeValue wird dabei auf
den Inhalt des jeweiligen li-Elements zugegriffen. Aus DOM-Sicht ist document.getElementsByTagName("li")[i] ein Knoten, nmlich der i.te li-Elementknoten im Dokument.
firstChild ist eine Eigenschaft des node-Objekts. ber diese Eigenschaft knnen Sie auf den
ersten Kindknoten eines Knotens zugreifen. Der erste Kindknoten aller li-Elemente im Dokument ist deren Textinhalt, also jeweils ein Stdtenamen. Die Eigenschaft firstChild liefert aber
noch nicht den Inhalt des Elements, sondern nur das Objekt des Inhalts. Um tatschlich an den
Inhalt heranzukommen, also an den konkreten Stdtenamen, muss eine weitere Eigenschaft des
node-Objekts bemht werden, nmlich die Eigenschaft nodeValue. Die Kombination firstChild.nodeValue knnen Sie sich ruhig merken. Diese Kombination werden Sie hufig verwenden, um an den Inhalt eines Elements zu kommen.
Nachdem der Array mit den Stdtenamen gefllt ist, tut die Funktion GEO() einfach das Umgekehrte und schreibt den Array wieder zurck in die Liste ebenfalls in einer for-Schleife. Der
Ausdruck document.getElementsByTagName("li ")[i].firstChild.nodeValue steht diesmal links von der Zuweisung. Dadurch wird dem Inhalt des Listenelements dynamisch ein neuer
Wert zugewiesen. Im Beispiel ist das der etwas vertrackst aussehende Wert Staedte[geoArray
[i]]. Die Stdte sollen ja geographisch ausgegeben werden. Nun gibt es keinen Alghorithmus,

21.2 Das Document Object Model (DOM)

991

der die Geographie kennt. Ganz oben im Script-Bereich ist daher ein Array namens geoArray
notiert. Die Zahlen, mit denen er initialisiert wird, sind einfach die Indexnummern der alphabetisch sortierten Stdte. So hat geoArray[0] beispielsweise den Wert 6. Dank dieser Information wei die Funktion GEO(), dass die nrdlichste der Stdte diejenige ist, die in der alphabetischen Sortierung die Indexnummer 6 hat (Hamburg). Mit Staedte[geoArray[i]] benutzt
die Funktion als aktuellen Index fr die Stadt, die in die Liste geschrieben werden soll, also
einfach den Zugriff auf geoArray.
Die Funktion ABC() geht ganz genauso vor wie die Funktion GEO(). Sie unterscheidet sich nur
dadurch von Letzterer, dass sie nach dem Einlesen des Staedte-Arrays die Objekt-Methode
sort() auf den Array anwendet, um die Eintrge zu sortieren. Dann schreibt sie den sortierten
Array einfach zurck in die nummerierte Liste.
Ein weiteres Element wird von beiden Funktionen ebenfalls noch gendert: nmlich das spanElement innerhalb der berschrift. Da fr dieses Element im HTML-Code mit id="Art" ein IdWert notiert ist, lsst sich mit document.getElementById("Art") bequem darauf zugreifen.
Mit der blichen Syntax firstChild.nodeValue wird der Text des Elements angesprochen und
dynamisch gendert.

21.2.3

HTML-Attribute dynamisch ndern

Durch das dynamische Hinzufgen, ndern oder Lschen von HTML-Attributen lassen sich
interessante Effekte, aber auch ntzliche Zwecke erreichen. Das folgende Beispiel zeigt, wie Sie
Verweise dynamisch ndern knnen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var TopLinks = new Array(
"http://www.spiegel.de/",
"http://www.heise.de/newsticker/",
"http://www.encarta.msn.de/",
"http://paperball.fireball.de/",
"http://kochbuch.unix-ag.uni-kl.de/"
)
var aktuellerLink = 0;
function TopLink() {
document.getElementsByName("Ziel")[0].href = TopLinks[aktuellerLink];
document.getElementsByName("Ziel")[0].firstChild.firstChild.nodeValue =
TopLinks[aktuellerLink];
aktuellerLink += 1;
if(aktuellerLink >= TopLinks.length)
aktuellerLink = 0;
}
function TopLinksFenster(Fenster) {
document.getElementsByName("Ziel")[0].target = Fenster;

992

Kapitel 21: Dynamisches HTML

}
//-->
</script>
</head><body>
<p><a name="Ziel" href="#Ziel"><b>Top-Link?</b></a><br>
<a href="javascript:TopLink()">Nchster Top-Link!</a><br>
TopLinks: <a href="javascript:TopLinksFenster('_blank')">in neues Fenster
laden!</a> oder
<a href="javascript:TopLinksFenster('_self')">ins aktuelle Fenster laden!</a></p>
</body></html>

Das Beispiel enthlt im sichtbaren Bereich einen Top-Link, der zunchst auf sich selbst verweist (name="Ziel" href="#Ziel"). Unterhalb davon sind drei weitere Verweise notiert. Der
erste verspricht den jeweils nchsten Top-Link zu prsentieren, und die beiden darunter erlauben es dem Anwender festzulegen, wie er die Links ffnen will ob im gleichen oder in einem
neuen Fenster. Alle diese drei Verweise rufen JavaScript-Funktionen auf, die im Dateikopf
notiert sind. Der Verweis, der den nchsten Top-Link verspricht, ruft die Funktion TopLink()
auf.

21.2: Per Mausklick verndert sich der in der ersten Zeile angezeigte Link.

Diese Funktion greift mit document.getElementsByName("Ziel")[0] auf das erste Element

im Dokument zu, bei dem als Attribut name="Ziel" notiert ist. Das ist im Beispiel bei dem
Verweis der Fall, der die Top-Links anzeigen soll, aber bislang auf sich selbst verweist. Gendert
werden sollen bei diesem Verweis sowohl sein href-Attribut als auch sein sichtbarer Verweistext. Der Zugriff auf das href-Attribut ist ganz einfach, weil nach der DOM-Syntax der HTMLElementobjekte jedes denkbare Attribut eines HTML-Elements einfach eine Eigenschaft des
entsprechenden HTML-Objekts darstellt. Um auf HTML-Attribute zuzugreifen, brauchen Sie
also nur auf das gewnschte Element zuzugreifen und dahinter, durch Punkt getrennt, den Attributnamen als Eigenschaft notieren. Beachten Sie dabei aber die besondere Gro-/Kleinschreibung bei verschiedenen Attributen wie bgColor, vSpace oder cellPadding.
Mit document.getElementsByName("Ziel")[0].href wird im Beispiel also direkt auf den
Wert des href-Attributs des gewnschten Verweises zugegriffen. Durch Zuweisung eines Wertes
wird das Attribut dynamisch gendert. Im Beispiel wird jeweils ein neuer Wert aus dem weiter
oben im Script notierten Array namens TopLinks zugewiesen. Als Indexzhler wird die ebenfalls zuvor schon definierte Variable aktuellerLink verwendet. Diese wird anschlieend um 1
erhht, damit beim nchsten Aufruf der Funktion der nchste Top-Link aus dem Array gesetzt
wird. Wenn der Wert von aktuellerLink zu hoch wird, um noch einen Eintrag in dem Array

21.2 Das Document Object Model (DOM)

993

zu finden, wird die Variable wieder auf 0 gesetzt, und beim nchsten Klick wird wieder der erste
Eintrag aus dem Array serviert.
Der Zugriff auf den Verweistext erfolgt wieder ber firstChild.value. Allerdings ist im Beispiel firstChild.firstChild.nodeValue notiert. Der Grund ist, dass der Verweistext nicht
direkt zwischen <a> und </a> steht, sondern nochmal in ein b-Element zur Fett-Auszeichnung
eingeschlossen ist. Aus Sicht des a-Elements ist also das b-Element das firstChild, und erst
dessen firstChild ist der sichtbare Verweistext.
Die Verweise, die regeln, in welchem Fenster die Top-Links geffnet werden sollen, rufen jeweils
die Funktion TopLinksFenster() auf und bergeben ihr als Parameter den gewnschten Zielfensternamen. bergeben werden die reservierten Fensternamen _self (ffnen im eigenen
Fenster) bzw. _blank (ffnen in neuem Fenster). Die Funktion TopLinksFenster() benutzt
wieder den bequemen Weg ber die HTML-Elementobjekte, um direkt auf die target-Eigenschaft des a-Elements zuzugreifen und das entsprechende Attribut zu setzen. Es ist also kein
Problem, Attribute zu setzen, die im HTML-Quelltext eines Elements nicht notiert sind.
Falls Sie mal ein Attribut lschen wollen, haben Sie zwei Mglichkeiten: Entweder Sie setzen
seinen Wert auf "" (leere Zeichenkette), oder und das ist sauberer Sie arbeiten mit der
Methode removeAttribute() des node-Objekts.

21.2.4

CSS-Eigenschaften dynamisch ndern

Seit der DOM-Version 2.0 wird auch geregelt, wie auf Stylesheet-Angaben zugegriffen wird.
Dabei hat man sich weitgehend an das seinerzeit von Microsoft eingefhrte style-Objekt angelehnt. Das folgende Beispiel zeigt, wie Sie mit Hilfe der DOM-Technik typisches, klassisches
dynamisches HTML mit Bewegung positionierter Elemente schreiben. Dazu dient die Mglichkeit, Elemente mit Hilfe von CSS-Eigenschaften absolut zu positionieren. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var rp, bp, ich;
var rpGeschw = 10, bpGeschw = 20;
var rpGrad = 0, bpGrad = 0;
var rpX = 170, rpY = 170, bpX = 170, bpY = 170;
var rpRadius = 150, bpRadius = 150;
function Init() {
rp = eval(document.getElementById("roterPunkt"));
bp = eval(document.getElementById("blauerPunkt"));
ich = eval(document.getElementById("ich"));
rp.style.position = "absolute";
rp.style.top = 20;
rp.style.left = 320;
bp.style.position = "absolute";
bp.style.top = 320;
bp.style.left = 320;
ich.style.position = "absolute";

994

Kapitel 21: Dynamisches HTML

ich.style.top = 110;
ich.style.left = 90;
ich.style.fontFamily = "Courier New,Courier";
ich.style.fontSize = "72pt";
ich.style.fontWeight = "bold";
ich.style.color = "#009900";
rpKreis();
bpKreis();
}
function rpKreis() {
rpGrad += rpGeschw/1000;
if(rpGrad > 360) rpGrad = 0;
rp.style.top

= Math.round(rpY + (rpRadius * Math.cos(rpGrad)));

rp.style.left = Math.round(rpX + (rpRadius * Math.sin(rpGrad)));

window.setTimeout("rpKreis()",100/rpGeschw);
}
function bpKreis() {
bpGrad += bpGeschw/1000;
if(bpGrad > 360) bpGrad = 0;
bp.style.top

= Math.round(bpY + (bpRadius * Math.cos(bpGrad)));

bp.style.left = Math.round(bpX + (bpRadius * Math.sin(bpGrad)));

window.setTimeout("bpKreis()",100/bpGeschw);
}
//-->
</script>
</head><body onLoad="Init()">
<div id="roterPunkt"><img src="ichkreis1.gif" width="20" height="20" border="0"
alt="roter Pbunkt"></div>
<div id="blauerPunkt"><img src="ichkreis2.gif" width="20" height="20" border="0"
alt="blauer Pbunkt"></div>
<div id="ich">ICH</div>
</body></html>

Innerhalb des body-Bereichs werden im Beispiel einfach nur drei div-Bereiche ohne weitere
Formatierungen notiert. Die ersten beiden enthalten jeweils eine kleine Grafik ichkreis1.gif ist
ein roter Punkt, ichkreis2.gif ein blauer Punkt. Beide Grafiken haben einen transparenten Hintergrund, was wichtig ist, da sich die Punkte im spteren Verlauf des Geschehens fter berlagern
werden.
Im einleitenden <body>-Tag ist der Event-Handler onLoad= notiert. Dieser tritt in Aktion, sobald die Datei vollstndig im Browser geladen ist. Dann wird die Funktion Init() aufgerufen,
die im Dateikopf notiert ist. Diese Funktion setzt zunchst einmal die JavaScript-Funktion
eval() ein, um den Zugriff auf die div-Bereiche zu verkrzen. Da alle drei div-Bereiche ein idAttribut haben, ist der Zugriff auf den entsprechenden Elementknoten mit getElement-

21.2 Das Document Object Model (DOM)

995

ById("roterPunkt") usw. mglich. Durch Anwendung von eval auf einen solchen Ausdruck
wird in einer Variablen wie rp quasi die Bedeutung von getElementById("roterPunkt")
gespeichert, und anschlieend lsst sich mit rp genauso arbeiten, als wenn man jedes Mal wieder
getElementById("roterPunkt") notieren wrde.

21.3: Das Ich umkreisen ein roter und ein blauer Punkt mit unterschiedlicher Geschwindigkeit.

ber die Variablen rp, bp und ich ist dann auch das style-Objekt ansprechbar. Die Funktion
Init() stattet die drei div-Bereiche erst einmal mit anfnglichen CSS-Eigenschaften aus. Alle
drei Bereiche werden mit style.position = "absolute" absolut positioniert. Die linke obere
Ecke jedes Bereichs wird mit style.left und style.top bestimmt. Der Inhalt des ichBereichs, also das Wort ICH, wird gro und auffllig formatiert.
Am Ende ruft die Funktion Init() die beiden anderen Funktionen rpKreis() und bpKreis()
auf. Jede dieser beiden Funktionen kontrolliert die Kreisbewegung jeweils eines der beiden
Punkte, indem sie letztlich die linke obere Ecke des div-Bereichs, der die jeweilige Grafik enthlt,
neu berechnet. Dabei kommen die Kreisfunktionen fr Sinus (Math.sin()) und Cosinus
(Math.cos()) zum Einsatz. Am Ende ruft jede der beiden Funktionen sich selber rekursiv mit
window.setTimeout() wieder auf, um die nchste Position des div-Bereichs mit der Grafik zu
setzen. Die Variablen wie bpGrad, bpGeschw usw., mit denen diese Funktionen arbeiten, wurden
zuvor im globalen Bereich des Scripts initialisiert.

21.2.5

Neue Knoten erzeugen und in Baumstruktur

einhngen

Dynamisches HTML nach DOM bedeutet nicht nur, auf bereits in HTML vorhandene Elemente
zuzugreifen, sondern auch neue zu erzeugen und in den Strukturbaum einzuhngen. Wie das
funktioniert, zeigt das folgende Beispiel. Es stellt einen primitiven HTML-Editor dar. Ein
Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!--

996

Kapitel 21: Dynamisches HTML

h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; borderbottom:2px solid red; }

h2 { font-family:Arial,sans-serif; font-size:20pt; font-weight:normal; borderbottom:1px solid red; }
h3 { font-family:Arial,sans-serif; font-size:12pt; font-weight:bold; }
p { font-family:Arial,sans-serif; font-size:11pt; }
-->
</style>
<script type="text/javascript">
<!-function Hinzufuegen() {
var Typ =
document.Formular.Elementtyp.options[document.Formular.Elementtyp.selectedIndex].va
lue;
var Elementknoten = document.createElement(Typ);
if(Typ == "hr")
document.getElementById("User").appendChild(Elementknoten);
else {
var Textknoten =
document.createTextNode(document.Formular.Elementinhalt.value);
Elementknoten.appendChild(Textknoten);
document.getElementById("User").appendChild(Elementknoten);
}
}
//-->
</script>
</head><body>
<form name="Formular" style="background-color:#EEEEEE; padding:10px" action="">
<select name="Elementtyp" size="1">
<option value="h1">berschrift 1</option>
<option value="h2">berschrift 2</option>
<option value="h3">berschrift 3</option>
<option value="p">Textabsatz</option>
<option value="hr">Trennlinie</option>
</select>
<input type="text" name="Elementinhalt" size="50">
<input type="button" value="Hinzufgen" onClick="Hinzufuegen()">
</form>
<div id="User" style="background-color:#FFFFC0; padding:10px">
</div>
</body></html>

Das Beispiel enthlt im sichtbaren HTML-Bereich ein Formular mit einer Auswahlliste, einem
Eingabefeld und einem Klick-Button. Unterhalb ist noch ein div-Bereich notiert, der jedoch
noch keinen konkreten Inhalt hat. In der Auswahlliste des Formulars kann der Anwender einen

21.2 Das Document Object Model (DOM)

997

HTML-Elementtyp auswhlen in den value-Attributen der option-Elemente sind die tatschlichen HTML-Elementnamen der jeweiligen Auswahl gespeichert. Im Eingabefeld des Formulars kann der Anwender den Textinhalt fr das ausgewhlte Element eingeben. Wenn er dann
auf den Button klickt, wird die Funktion Hinzufuegen() aufgerufen, die im Dateikopf in einem
JavaScript-Bereich notiert ist.
Dort wird erst einmal der lange, umstndliche Ausdruck document.Formular.Elementtyp.
options[document.Formular.Elementtyp.selectedIndex].value in der Variablen Typ
gespeichert. Der lange Ausdruck bzw. die Variable speichert den vom Anwender im Formular
ausgewhlten HTML-Elementtyp, also z.B. h1 oder p.

21.4: Auf Mausklick ergnzt das Script die Web-Seite um zustzliche Elemente.

Mit document.createElement(Typ) wird dann ein leeres, neues Element vom Typ Typ
erzeugt, also je nach Wert der Variablen Typ z.B. ein h1-Element oder ein p-Element. Damit
wird das Element aber noch nicht angezeigt. document.createElement() erzeugt lediglich den
Elementknoten, hngt ihn aber noch nicht in den Strukturbaum des Dokuments ein. Ebenso ist
es mit document.createTextNode(). Diese Methode erzeugt einen Textknoten, aber legt in
keiner Weise fest, wohin dieser Textknoten gehrt. Im Beispiel wird aus dem, was der Anwender
im Eingabefeld des Formulars eingegeben hat, mit document.createTextNode(document.
Formular.Elementinhalt.value) ein solcher Textknoten erzeugt. Das Einhngen in den
Strukturbaum ist die nchste Aufgabe des Scripts.
Dazu muss das Script jedoch zwischen Elementen unterscheiden, die einen Textinhalt haben,
und solchen, die keinen haben. Das hr-Element, das der Anwender ebenfalls auswhlen kann,
also das HTML-Element fr Trennlinien, kann keinen Textinhalt haben. Alle anderen auswhlbaren Elemente dagegen knnen Textinhalt haben. Deshalb unterscheidet das Script mit if und
else zwischen Typ == "hr" und allen brigen mglichen Werten von Typ. Wenn der Anwender
das hr-Element ausgewhlt hat, wird einfach nur das neu erzeugte und in der Variablen Elementknoten gespeicherte hr-Element in den Dokumentbaum eingehngt. Der Textknoten wird
dagegen verworfen. In allen anderen Fllen (else-Zweig) muss zunchst der Textknoten in den
Elementknoten eingehngt werden, damit das Element den Text als Inhalt erhlt. Anschlieend
muss das Element in den Dokumentbaum eingehngt werden.

998

Kapitel 21: Dynamisches HTML

Fr alle Einhng-Vorgnge wird die Methode appendChild() des node-Objekts verwendet.

Anwendbar ist die Methode auf ein Knotenobjekt, das Kindknoten haben darf, also beispielsweise Elementknoten. Als Parameter erwartet die Methode einen Knoten, der als Kindknoten
eingehngt werden soll. Wenn im Beispiel also steht:
Elementknoten.appendChild(Textknoten);

dann ist Elementknoten eine Variable, in der zuvor durch createElement() ein Elementobjekt
erzeugt wurde, und Textknoten ist eine Variable, die zuvor durch Aufruf von createTextNode() einen Textknoten gespeichert hat. Mit der Anweisung document.getElementById
("User").appendChild(Elementknoten) wird auf den zunchst leeren div-Bereich im
Dokument zugegriffen. Diesem Element wird der neu erzeugte Elementknoten hinzugefgt.

21.2.6

Event-Handling beim DOM

Die Normierung des Event-Handling im DOM war zum Redaktionszeitpunkt dieses Dokuments
noch nicht abgeschlossen so fehlte beispielsweise noch die Implementierung von Tastaturereignissen. Der Internet Explorer 5.x interpretiert auch noch keine Events nach DOM-Syntax,
Netscape 6.x dagegen schon. Das folgende Beispiel zeigt das Prinzip, nach dem Event-Handling
nach DOM-Syntax funktioniert. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Ausgeben(Text) {
LogEintrag = document.createElement("li");
neuerText = document.createTextNode(Text);
LogEintrag.appendChild(neuerText);
document.getElementById("Log").appendChild(LogEintrag);
}
function handleEingabefeldClick(ev) {
Event = ev;
Text = "Sie haben in das Eingabefeld geklickt. ";
Text = Text + "Event-Typ = " + Event.type + ", ";
Text = Text + "Event-Target-Elementname = " + Event.target.nodeName + ".";
Ausgeben(Text);
}
function handleBereichMove(ev) {
Event = ev;
Text = "Sie haben die Maus im Bereich bewegt. ";
Text = Text + "X-Position = " + Event.clientX + ", ";
Text = Text + "Y-Position = " + Event.clientY + ".";
Ausgeben(Text);
}
function handleBereichClick(ev) {

21.2 Das Document Object Model (DOM)

999

Event = ev;
Text = "Sie haben in den Bereich geklickt. ";
Text = Text + "X-Position = " + Event.clientX + ", ";
Text = Text + "Y-Position = " + Event.clientY + ".";
Ausgeben(Text);
}
function Init() {
document.getElementsByName("Eingabe")[0].addEventListener("click",
handleEingabefeldClick, true);
document.getElementById("Bereich").addEventListener("mousemove",
handleBereichMove, true);
document.getElementById("Bereich").addEventListener("click", handleBereichClick,
true);
}
//-->
</script>
</head><body onLoad="Init()">
<form name="Formular" style="background-color:#EEEEEE; padding:10px" action="">
<input type="text" name="Eingabe" size="50">
</form>
<div id="Bereich" style="background-color:#FF0000; color:#FFFFFF; font-weight:bold;
width:100px">Ein Bereich</div>
<ol id="Log" style="font-family:Arial,sans-serif; fontsize:10pt"><li>Ereignisliste</li></ol>
</body></html>

Im sichtbaren Bereich der HTML-Datei ist ein Formular mit einem Eingabefeld notiert, ferner
ein div-Bereich, und schlielich eine leere, nummerierte Liste. Im einleitenden <body>-Tag ist
der Event-Handler onLoad notiert, der jedoch noch nichts mit Event-Handling nach DOMSyntax zu tun hat. Dort wird einfach erst mal die Funktion Init() aufgerufen, die im Dateikopf
notiert ist.
Innerhalb der Funktion Init() geht es jedoch in Sachen DOM-Event-Handling zur Sache.
Event-Handling besteht beim DOM zunchst einmal darin, fr einen beliebigen Knoten im
Dokument eine Ereignisberwachung zu registrieren. Dazu gibt es die Methode addEventListener(). Mit dem Teil davor, im Beispiel etwa document.getElementsByName("Eingabe")
[0], wird derjenige Knoten im Dokument angesprochen, fr den eine Ereignisberwachung
registriert werden soll. Im Beispiel der Funktion Init() werden insgesamt drei Ereignisberwachungen angestoen: eine fr das Eingabefeld des Formulars, und zwei fr den div-Bereich.

1000

Kapitel 21: Dynamisches HTML

21.5: Die Liste im unteren Bereich zeigt in Netscape 6 die ausgelsten Ereignisse.

Die Methode addEventListener() erwartet drei Parameter. Der erste Parameter gibt an, welcher Ereignistyp berwacht werden soll. Bei Mausereignissen sind das weitgehend die aus dem
JavaScript-Objekt event bekannten Ereignistypen wie click, mouseover, mousedown, mouseup,
mousemove. Dazu kommen im DOM Event-Typen wie DOMFocusIn (Knoten erhlt den Fokus),
DOMFocusOut (Knoten verliert den Fokus), DOMActivate (Knoten wird durch Mausklick oder
Tastendruck aktiviert), sowie anwenderunabhngige Ereignisse wie DOMSubtreeModified
(Strukturbaum gendert), DOMNodeInserted (Knoten in Strukturbaum eingefgt) oder DOMNodeRemoved (Knoten aus Strukturbaum entfernt). Der Name des gewnschten Ereignistyps muss
bei der Parameterangabe in Anfhrungszeichen stehen.
Der zweite Parameter, den addEventListener() erwartet, ist der Name einer Funktion, die
beim Eintreten des Events aufgerufen werden soll. Der Name der Funktion wird ohne Anfhrungszeichen angegeben. Die angegebene Funktion bekommt automatisch ein Ereignisobjekt
bergeben und kann dann damit anfangen, was sie will. Dazu weiter unten.
Als dritter Parameter muss addEventListener() entweder true oder false bergeben werden. Mit true schalten Sie die Event-berwachung ein, mit false noch nicht.
Fr jedes Ereignis, das Sie berwachen wollen, bentigen Sie eine Funktion, die auf das Ereignis
reagiert. Es ist die Funktion mit dem Namen, der bei addEventListener() als zweiter Parameter angegeben wird. Im obigen Beispiel sollen drei Ereignisse berwacht werden. Deshalb gibt es
drei hnliche Funktionen mit den Namen handleEingabefeldClick(), handleBereichMove() und handleBereichClick(). Alle drei Funktionen bekommen beim automatischen
Aufruf, der beim Eintritt des Ereignisses passiert, das Ereignis als Objekt bergeben. Die Funktionen im Beispiel erwarten deshalb einen Parameter ev, den sie in ihrer jeweils ersten Anweisung
der Variablen Event zuweisen. Danach knnen die Funktionen ber die Event-Variable auf

21.3 Das ltere DHTML-Modell von Microsoft

1001

Eigenschaften und Methoden des Ereignisobjekts zugreifen. Bei Mausereignissen gibt es beispielsweise Eigenschaften wie clientX (Anzahl Pixel vom linken Rand des sichtbaren Knotenbereichs), clientY (Anzahl Pixel vom oberen Rand des sichtbaren Knotenbereichs), screenX
(Anzahl Pixel vom linken Bildschirmrand) oder screenY (Anzahl Pixel vom oberen Bildschirmrand).
Im Beispiel stellen die Funktionen, die ein Ereignis berwachen, einfach nur einen Text zusammen und rufen dann die Funktion Ausgeben() mit dem zusammengestellten Text auf. Die
Funktion Ausgeben() erzeugt zuerst mit document.createElement("li") ein neues HTMLElement vom Typ li. Dann erzeugt sie mit document.createTextNode(Text) einen neuen
Textknoten mit dem bergebenen Text. Schlielich hngt sie den Textknoten mit appendChild() als Kindknoten in den erzeugten li-Elementknoten ein, und diesen in die im Dokument notierte nummerierte Liste. Auf diese Weise fllt sich die nummerierte Liste dynamisch
mit jedem Ereignis, das erkannt wurde.

21.3

Das ltere DHTML-Modell von Microsoft

21.3.1 Allgemeines zum Microsoft-Modell

Als der MS Internet Explorer 4.0 im Jahr 1997 ein vllig neues Konzept mit ganz neuen Mglichkeiten des dynamischen Zugriffs auf eine Web-Seite einfhrte, waren die meisten Web-Entwickler noch gnzlich in dem klassischen JavaScript-Ansatz von Netscape befangen und begriffen gar nicht so recht die Tragweite des neuen Modells. Das Modell erlaubte nichts Geringeres,
als beliebige HTML-Elemente inklusive deren CSS-Eigenschaften zu ndern, auszutauschen, neu
zu erzeugen, zu lschen usw. Der Browser reagierte dabei wie eine Textverarbeitungssoftware
whrend der Bearbeitung. Wenn Inhalte dynamisch eingefgt wurden, wurde alles, was dahinter
stand, automatisch neu positioniert. Obwohl diese Fhigkeit eben im Hinblick auf moderne
Textverarbeitungssoftware im Grunde genommen von einer professionellen Software zu
erwarten ist, war dem zu jener Zeit nicht so. Der 1997 noch dominante Netscape-Browser war
genau dazu nicht in der Lage: eine Seite aufgrund dynamischer nderungen wirklich neu aufzubauen. Auch die Web-Entwickler begriffen lange Zeit nicht, dass es doch viel einfacher und
konsequenter ist, beliebige HTML-Elemente, deren Eigenschaften und Inhalte dynamisch zu
ndern, anstatt mit der umstndlichen Layer-Technik von Netscape zu hantieren.
Das Microsoft-Modell war also richtungsweisend. Aber es war proprietr, ein firmeneigener
Vorsto in neue Welten ohne Absprache mit einem unabhngigen Normierungs-Gremium.
Microsoft benahm sich in jener Zeit in der Tat unglaublich aggressiv und versuchte, die verpennte Zeit der Jahre davor aufzuholen. Immerhin hatte Bill Gates noch ganze zwei Jahre zuvor
das Internet als unwichtig und fr Microsoft bedeutungslos erklrt. Der Versuch, die Sahnetorte Internet mit aggressiver Marketing-Politik alleine aufzufressen, gelang jedoch glcklicherweise nur zum Teil. Zwar eroberte der Internet Explorer Monat um Monat mehr Anteile am
Browser-Markt und ist mittlerweile lngst der am weitesten verbreitete Browser. Doch Microsofts Versuch, eigene Sprachen, Formate und Programmiertechniken zu etablieren, ist fehlgeschlagen. In diesem Punkt reagierte die Web-Gemeinde empfindlich. Man hatte erkannt, dass
Software vor allem dann von sich abhngig macht, wenn sie Dateiformate diktiert.

1002

Kapitel 21: Dynamisches HTML

Das DHTML-Modell von Microsoft war also ein wichtiger Meilenstein auf dem Weg zum heute
zu empfehlenden DOM. Das DOM weicht aber insofern von dem Microsoft-Ansatz ab, als es
nicht auf HTML fixiert ist, sondern gleich alle XML-kompatiblen Tag-Sprachen abdeckt. Der
Microsoft-Ansatz ist aus heutiger Sicht nur noch von Bedeutung, wenn Sie dynamische WebSeiten erstellen wollen, die auch mit dem Internet Explorer 4.x darstellbar sein sollen. Zwar verschwindet dessen Anteil am Browser-Markt immer weiter gegenber den neueren Versionen, die
seit der 5er-Version DOM-fhig sind, doch Web-Design sollte wann immer es mglich ist auch
auf ltere Browser-Versionen Rcksicht nehmen.

21.3.2

Script-Sprachen: JavaScript, JScript und VBScript

Es gibt letztlich keine Vorschriften dafr, welche Script-Sprache fr Dynamisches HTML verwendet werden soll. Deshalb herrscht hierbei noch etwas Verwirrung.
JavaScript ist jedoch eindeutig die meist verwendete und bekannteste Script-Sprache. Sie wurde
durch Netscape eingefhrt. Der MS Internet Explorer interpretiert JavaScript ebenfalls. Dabei
hinkt er Netscape jedoch immer etwas hinterher, da Netscape die Lizenzen fr JavaScript besitzt
und es Microsoft nicht erlaubt ist, den Sprachumfang von JavaScript selbststndig zu erweitern.
Mit einem kleinen Kniff hat sich Microsoft aus dieser misslichen Lage befreit: die Sprache wurde
einfach in JScript umbenannt. JScript ist JavaScript plus MS-eigene Spracherweiterungen. JScript
enthlt etliche Objekte, Methoden und Eigenschaften, die in JavaScript nicht vorkommen. Die
meisten dieser Befehle sind fr die lokalen Betriebssystemerweiterungen gedacht, die der MS
Internet Explorer 4.x unter MS Windows bentigt. Aber auch das all-Objekt, das in Netscapes
JavaScript nicht vorkommt, gehrt dazu. Und dieses Objekt ist ganz entscheidend fr Dynamisches HTML im MS Internet Explorer.
Neben JavaScript und JScript beherrscht der MS Internet Explorer auch noch VBScript. Diese
Sprache ist von Visual Basic (VB) abgeleitet. Sie konnte sich bislang jedoch nicht durchsetzen im
WWW. VBScript hat eine andere Syntax als JavaScript und JScript. Die Objekte, Eigenschaften
und Methoden sind jedoch im Wesentlichen die gleichen. Mit VBScript knnen Sie also ebenfalls
Dynamisches HTML schreiben. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<p>Ihr WWW-Browser beherrscht folgende Script-Sprachen:<br>
<script language="JavaScript" type="text/javascript">
<!-document.write(<br>JavaScript");
//-->
</script>
<script language="JScript" type="text/jscript">
<!-document.write(<br>JScript");
//-->
</script>
<script language="VBScript" type="text/vbscript">
<!-document.write "<br>VBScript"

21.3 Das ltere DHTML-Modell von Microsoft

1003

//-->
</script>
</p>
</body></html>

Das obige Beispiel ist kein Dynamisches HTML im engeren Sinn. Es soll lediglich demonstrieren,
wie Sie unterschiedliche Script-Sprachen einsetzen knnen, und welche Wirkung dies auf
WWW-Browser hat. In dem Beispiel werden drei Script-Bereiche definiert: einer mit JavaScript
(<script language="JavaScript" type="text/javascript">), einer mit JScript (<script
language="JScript" type="text/jscript">) und einer mit VBScript <script language="VBScript" type="text/vbscript">. Jeder der drei Bereiche schreibt mit Hilfe eines
document.write-Befehls (dieser Befehl ist in allen drei Sprachen gleich) eine Zeile in das
Dokument. Da ein WWW-Browser nur diejenigen Script-Bereiche ausfhrt, deren Sprachen er
kennt, stehen am Ende genau diejenigen Script-Sprachen auf der Seite, die der benutzte WWWBrowser kennt.

21.6: Wenig berraschend: IE6 untersttzt die drei genannten Script-Sprachen.

Sie sollten einen Script-Bereich einfach dann mit JScript auszeichnen, wenn Sie verhindern
wollen, dass Netscape den Bereich interpretiert. Der MS Internet Explorer 4.x selbst nimmt es
andererseits nicht bel, wenn Sie einen Script-Bereich mit JavaScript auszeichnen und darin
Objekte, Methoden und Eigenschaften verwenden, die eigentlich nur in JScript vorkommen.
Wenn Sie einen Script-Bereich mit JavaScript auszeichnen und darin Microsoft-spezifische
JScript-Erweiterungen wie das all-Objekt verwenden, sollten Sie die Ausfhrung entsprechender Anweisungen von einer Abfrage abhngig machen. Lesen Sie dazu das Thema Abfragen ob ein
Objekt existiert in JavaScript (Kapitel 18.3.6).
Beachten Sie: In modernen Browsern ist es normalerweise ausreichend, die Eigenschaft type=
anzugeben. ltere Browser und Opera 5.12 bentigen jedoch zwingend das Attribut language=,
um den Script-Bereich von der Bearbeitung auszuschlieen.

21.3.3

Das all-Objekt

Das all-Objekt ist beim DHTML-Ansatz von Microsoft der entscheidende Schlssel. Wie der
Name schon verspricht, ist ber dieses Objekt jedes einzelne HTML-Element einer HTML-Datei
ansprechbar. Das all-Objekt hat etliche Eigenschaften und Methoden, die das dynamische Verndern eines HTML-Elements erlauben. Alle Methoden und Eigenschaften knnen an dieser
Stelle nicht behandelt werden. Blttern Sie dazu die JavaScript-Objektreferenz in Kapitel 20.7 auf
und verschaffen Sie sich einen berblick ber die Eigenschaften und Methoden des Objekts all.

1004

Kapitel 21: Dynamisches HTML

Hier soll lediglich ein weiteres Beispiel die Wirkungsweise dieses Objekts verdeutlichen. Ein
Beispiel:
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-var Wochentagname =
new
Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
function ZeitAnzeigen()
{
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Sekunden = Jetzt.getSeconds();
var WoTag = Jetzt.getDay();
var Vortag

= ((Tag < 10) ? "0" : "");

var Vormon

= ((Monat < 10) ? ".0" : ".");

var Vorstd

= ((Stunden < 10) ? "0" : "");

var Vormin

= ((Minuten < 10) ? ":0" : ":");

var Vorsek

= ((Sekunden < 10) ? ":0" : ":");

var Datum = Vortag + Tag + Vormon + Monat

+ "." + Jahr;

var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;

document.all.Uhr.innerHTML = Datum + " (" + Wochentagname[WoTag] + ")<br>" +
Uhrzeit;
window.setTimeout("ZeitAnzeigen()",1000);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<p id="Uhr" style="font-family:Verdana; font-size:24pt;
font-weight:bold; color:#CC00CC"></p>
<script language="JScript" type="text/jscript">
<!-window.setTimeout("ZeitAnzeigen()",1000);
//-->
</script>
</body>
</html>

21.3 Das ltere DHTML-Modell von Microsoft

1005

21.7: Die Uhr tickt mit Hilfe des all-Objekts.

Das Beispiel stellt eine vollstndige, laufende Uhr mit Datum dar. Dazu wird ein leerer Textabsatz mit <p>...</p> definiert. Stylesheet-Angaben dienen dazu, den Textabsatz nach Wunsch
zu formatieren. Obwohl der Absatz zunchst keinen Text enthlt, dient er im Verlauf des Scripts
als Container (Behlter) fr den angezeigten Text mit Datum und Uhrzeit.
Das obere Script ermittelt Datum und Uhrzeit und formatiert es fr eine ordentliche, hierzulande bliche Schreibweise. Die Zeichenkette, die ausgegeben werden soll, wird schlielich der
Objekteigenschaft document.all.Uhr.innerHTML zugewiesen. Uhr ist dabei der Bezug auf den
Namen, der bei der Definition des Textabsatzes mit id= definiert wird. Mit der Objekteigenschaft innerHTML knnen Sie den gesamten Inhalt eines Elements, hier den des benannten
<p>...</p>-Elements, dynamisch ersetzen. Da sich die Funktion zur Ausgabe der Zeit jede
Sekunde selbst von neuem aufruft, wird jede Sekunde ein neuer Inhalt in das <p>-Tag mit der
id="Uhr" geschrieben. Auf diese Weise entsteht der Effekt einer laufenden Uhr.
Es gibt weitere, mchtige Mglichkeiten des all-Objekts. Diese werden in der JavaScriptObjektreferenz beim Objekt all beschrieben. Hier nur noch einige typische Befehlsfolgen:
Angenommen, Sie haben folgendes HTML-Element, ein gewhnlicher Textabsatz:
<p id="derText">Das ist Text in einem Textabsatz</p>

Dann knnen Sie beispielsweise folgende dynamische Vernderungen bewirken:

Mit document.all.derText.innerHTML = "<b>neuer Text<\/b> im gleichen Textabsatz"; ndern Sie den Inhalt des Textabsatzes und knnen dabei auch HTML-Tags zur
Formatierung benutzen.
Mit document.all.derText.outerHTML = "<h1>" + document.all.derText.innerHTML
+ "<\/h1>"; verwandeln Sie den Textabsatz in eine berschrift 1. Ordnung.
Mit document.all.derText.className = "Wichtig"; weisen Sie dem Absatz eine Stylesheet-Klasse namens Wichtig zu. Wenn Sie eine solche Klasse definiert haben, bernimmt
der Absatz alle in der Klasse definierten Stylesheet-Angaben (lesen Sie dazu auch den
Abschnitt 15.3.5 Formate fr Klassen definieren).

21.3.4

CSS Stylesheets und Scripts

Sie knnen mit Dynamischem HTML nach Microsoft-Syntax dynamisch auf alle CSS-Eigenschaften einzelner HTML-Elemente zugreifen. Dadurch knnen Sie angezeigte Elemente optisch
stark verndern. Wenn etwa eine berschrift 2. Ordnung anfangs eine Schriftgre von 14

1006

Kapitel 21: Dynamisches HTML

Punkt hat, knnen Sie diese dynamisch auf 42 Punkt ndern. Dynamisch bedeutet dabei: bei
einem Anwenderereignis wie einem Mausklick auf die berschrift oder automatisch zeitgesteuert, etwa nach drei Sekunden.
Neben der Schriftgre knnen Sie auch dynamisch eine Hintergrundfarbe unterlegen, Rahmen
um ein Element ziehen, das Element ber den Bildschirm wandern lassen und vieles mehr. Die
Voraussetzung fr diese Effekte sind CSS Stylesheets. Die Syntax der CSS-Stylesheets und die
Mglichkeiten der Stylesheet-Angaben sollten Sie kennen. Die Style-Definitionen eines HTMLElements ndern Sie dynamisch, indem Sie mit Hilfe einer Script-Sprache auf das Element zugreifen und mit neuen Stylesheet-Angaben das Aussehen des Elements ndern. Ein Beispiel:
<html><head><title>Test</title></head><body>
<h1 id="Wechseltext" style="font-size:14pt">Wichtigtuer</h1>
<script language="JScript" type="text/jscript">
<!-function MachKlein()
{
document.all.Wechseltext.style.fontSize = "14pt";
window.setTimeout("MachGross()",1000);
}
function MachGross()
{
document.all.Wechseltext.style.fontSize = "42pt";
window.setTimeout("MachKlein()",1000);
}
MachKlein();
//-->
</script>
</body></html>

Das Beispiel zeigt zunchst eine berschrift 1. Ordnung (<h1>...</h1>). Mit Hilfe des Attributs style= bekommt die berschrift CSS-Eigenschaften zugewiesen. Im Beispiel wird die
Schriftgre auf 14 Punkt gesetzt (font-size:14pt).
Das gesamte Beispiel bewirkt, dass die Gre der berschrift einmal pro Sekunde von 14 auf 42
Punkt wechselt und wieder umgekehrt. Fr dieses dynamische Verndern ist ein Script erforderlich. Im obigen Beispiel wird deshalb ein Script-Bereich mit <script language="JScript"
type="text/jscript">...</script> definiert. Innerhalb des Script-Bereichs werden zwei
Funktionen definiert. Die eine Funktion, MachKlein(), ndert die Schriftgre der berschrift
auf 14 Punkt, die andere Funktion, MachGross(), auf 42 Punkt. Nach jeweils einer Sekunde
(1000 Millisekunden) ruft jede der beiden Funktionen die jeweils andere wieder auf. Dadurch
entsteht der Wechsel-Effekt.
Um das dynamische Verndern der Schriftgre zu verstehen, mssen Sie folgende Zusammenhnge beachten: Im berschriften-Tag <h1> wird mit dem Attribut id= ein Name, nmlich
Wechseltext, zugewiesen. Diesen Namen knnen Sie frei vergeben. Er darf nur aus Buchstaben,
Ziffern und Unterstrichen _ bestehen und darf keine Leerzeichen oder deutschen Umlaute
enthalten. Das Script im Beispiel greift mit den Anweisungen, in denen document.all.
Wechseltext vorkommt, auf genau dieses Element zu. Mit dem all-Objekt (document.all)
werden alle Elemente einer HTML-Datei angesprochen. Durch den Namen dahinter wird genau

21.3 Das ltere DHTML-Modell von Microsoft

1007

das Element angesprochen, das diesen Namen hat im Beispiel Wechseltext. Dahinter folgt das
Style-Objekt (style), das dem all-Objekt untergeordnet ist (Einzelheiten zu diesem Objekt
erfahren Sie in der JavaScript-Objektreferenz bei style). ber das Style-Objekt knnen Sie als
Eigenschaft eine erlaubte CSS-Stylesheet-Angabe notieren. Dabei gelten besondere Schreibweisen in JavaScript/JScript, die im Folgenden behandelt werden.

21.3.5

Schreibweise von CSS-Eigenschaften in

JavaScript/JScript

Wenn Sie Stylesheet-Angaben innerhalb von Script-Sprachen verwenden, mssen Sie die Syntax
der Script-Sprache bercksichtigen. Ein Problem beim Mischen von CSS Stylesheets und JavaScript oder JScript ist es, dass viele Stylesheet-Angaben Bindestriche im Namen haben, wie etwa
font-size, margin-top oder background-color. Wenn Sie aus solchen Namen in JavaScript
oder JScript einen Befehl wie:
document.all.MeinText.style.font-size = "24pt";

erzeugen, erhalten Sie eine Fehlermeldung. Der Grund ist, dass Bindestriche keine zulssigen
Zeichen in Namen sind (der Bindestrich ist in diesen Sprachen ja der Operator fr Subtraktionen).
Um dieses Problem zu umgehen, hat Microsoft eine einfache Regel aufgestellt. Wenn in einem
Script eine Stylesheet-Angabe ausgelesen oder verndert werden soll, entfllt der Bindestrich,
und der erste Buchstabe des Wortes hinter dem Bindestrich wird grogeschrieben. Ein Beispiel:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-var modus = 1;
function Textspiel() {
if(modus == 1) {
document.all.MeinText.style.fontSize = "24pt";
modus = 2;
return;
}
if(modus == 2) {
document.all.MeinText.style.padding = "8pt";
document.all.MeinText.style.backgroundColor = "#FFFF00";
modus = 3;
return;
}
if(modus == 3) {
document.all.MeinText.style.border = "8pt groove #FFCC33";
document.all.MeinText.style.backgroundImage = "url(back.gif)";
modus = 0;
return;
}
if(modus == 0) {

1008

Kapitel 21: Dynamisches HTML

document.all.MeinText.style.fontSize = "12pt";
document.all.MeinText.style.padding = "0pt";
document.all.MeinText.style.backgroundColor = "#FFFFFF";
document.all.MeinText.style.border = "none";
document.all.MeinText.style.backgroundImage = "none";
modus = 1;
return;
}
}
//-->
</script>
</head><body>
<p id="MeinText" style="font-size:12pt; background-color:#FFFFFF; padding:0pt;
border:none; background-image:none; cursor:hand" onClick="Textspiel()">Klicken Sie
auf diesen Text</p>
</body></html>

In dem Beispiel wird am Ende ein Textabsatz mit diversen Stylesheet-Angaben definiert. Einige
dieser Stylesheet-Angaben enthalten Bindestriche, nmlich font-size, background-color und
background-image. Innerhalb des Scripts, das ber dem Textabsatz notiert ist, werden diese
und andere Stylesheet-Angaben dynamisch verndert. Sie knnen erkennen, dass font-size zu
fontSize wird, background-color zu backgroundColor und background-image zu
backgroundImage getreu der Regel.

21.8: Der Absatz ndert mit jedem Mausklick seine Gestalt.

Wenn Sie innerhalb eines Scripts einer Stylesheet-Eigenschaft einen neuen Wert zuweisen wollen, mssen Sie zuerst das gewnschte HTML-Objekt mit der style-Eigenschaft notieren, im
obigen Beispiel etwa document.all.MeinText.style.fontSize. Dahinter folgt ein Gleichheitszeichen fr die Zuweisung, und dahinter der Wert, den Sie zuweisen wollen, also etwa
"24pt". Dieser Wert muss bei JavaScript und JScript immer in Anfhrungszeichen stehen.
Diese Art der Wertzuweisung an eine Stylesheet-Angabe unterscheidet sich von der Art, wie
Werte zu Stylesheet-Angaben bei normalen Stylesheet-Definitionen zugewiesen werden. Dort
notieren Sie anstelle eines Gleichheitszeichens einen Doppelpunkt, so wie in den Stylesheet-Definitionen im Textabsatz des obigen Beispiels. Anfhrungszeichen sind dabei nicht ntig.
Das Script im Beispiel verndert die Formatierung des Textes innerhalb des Textabsatzes, wenn
der Anwender mit der Maus auf den Text klickt. Immer, wenn dieses Ereignis eintritt, wird mit
Hilfe des Event-Handlers onClick= die Funktion Textspiel() innerhalb des Scripts aufgeru-

21.3 Das ltere DHTML-Modell von Microsoft

1009

fen. Das Script verwaltet eine global definierte Variable namens modus. Abhngig davon, welchen Wert diese Variable hat, werden dem Text diverse neue Stylesheet-Angaben zugewiesen.
Das dynamische Verndern des Textabsatzes im Script wird durch die Angabe id="MeinText"
im Textabsatz und Befehlen des Typs document.all.MeinText.style bewerkstelligt.

21.3.6

Event-Handler und das Event-Objekt

Eine wichtige Voraussetzung fr Dynamisches HTML ist in vielen Fllen die Interaktion zwischen Anwender und angezeigter HTML-Datei. Die angezeigte Datei kann auf Anwenderereignisse wie Mausklicks oder gedrckte Tasten an der Tastatur reagieren und Elemente daraufhin
dynamisch verndern. Dazu gibt es Event-Handler und auch ein event-Objekt. Alle Methoden
und Eigenschaften des Event-Objekts und alle einzelnen Event-Handler knnen an dieser Stelle
nicht behandelt werden. Blttern Sie das Kapitel 21.2.10 ber Event-Handler sowie die Referenz
des Objekts event (Kapitel 23.18) auf und verschaffen Sie sich einen berblick ber die Mglichkeiten. Hier soll lediglich ein Beispiel die Wirkungsweise verdeutlichen. Ein Beispiel:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-function SetPos()
{
document.all.Springer.style.left = window.event.x;
document.all.Springer.style.top = window.event.y;
}
//-->
</script>
</head><body bgcolor="#FFFFFF" onClick="SetPos()">
<div id="Springer" style="position:absolute; top:100px; left:100px; width:200px;
height:100px; font-size:16pt; background-color:#000066; color:#FFFF00;
padding:1cm;">
Klicken Sie mit der Maus irgendwohin!
</div>
</body>
</html>

Das obige Beispiel definiert einen Bereich mit <div>...</div>. Verschiedene StylesheetAngaben im einleitenden <div>-Tag sorgen dafr, dass der Bereich gut sichtbar ist und absolut
am Bildschirm positioniert wird. Wenn der Anwender whrend der Anzeige irgendwo im Anzeigefenster des Browsers mit der Maus hinklickt, wird der definierte <div>-Bereich neu positioniert, und zwar so, dass die linke obere Ecke genau an der Stelle beginnt, wo der Anwender hingeklickt hat.
Damit dies mglich ist, muss das gesamte Dokument sofort reagieren, wenn der Anwender mit
der Maus irgendwohin klickt. Zu diesem Zweck wird im einleitenden <body>-Tag der EventHandler onClick= notiert. Beim jedem Mausklick im Anzeigefenster wird dann die Funktion
SetPos() aufgerufen, die innerhalb des Script-Bereichs definiert ist. Diese Funktion setzt die
Werte fr die linke obere Ecke des <div>-Bereichs neu. Bezug ist dabei der Name (Springer),
der im <div>-Tag mit id= vergeben wurde. Mit dem Befehl document.all.Springer.style.

1010

Kapitel 21: Dynamisches HTML

left wird die neue Anfangsposition links gesetzt, mit document.all.Springer.style.top die
neue Anfangsposition oben. Den neuen Wert fr links liefert die Eigenschaft x des window.
event-Objekts, den Wert fr oben die Eigenschaft y dieses Objekts. Der <div>-Bereich wird

dadurch neu positioniert.

Das Event-Objekt hlt stndig alle relevanten Anwenderttigkeiten wie Mausposition, Tastaturereignisse, Mausklicks, gedrckte Maustasten usw. in seinen Objekteigenschaften fest. Durch
einfaches Abrufen der Eigenschaften vom Typ window.event.[Eigenschaft] knnen Sie
jederzeit aktuelle Ereignisse abfangen. Das Abfangen geschieht durch Notieren von EventHandlern. Wichtig ist dabei auch, an welcher Stelle Sie ein Ereignis abfangen, also wo Sie den
Event-Handler notieren. So knnten Sie im obigen Beispiel den Event-Handler onClick= auch
im einleitenden <div>-Tag notieren. Dann wrden Script-Befehle nur dann ausgefhrt, wenn
der Mausklick innerhalb dieses <div>-Bereichs vorkommt.
Ein wichtiges Unterobjekt des Event-Objekts ist das Objekt fr das angeklickte Element
(srcElement). So knnen Sie etwa mit window.event.srcElement.tagName ermitteln, welches HTML-Tag von einem aktuellen Anwenderereignis betroffen ist. In Ihren Scripts knnen
Sie dann entsprechend reagieren.
Es gibt nicht nur den Event-Handler onClick=, sondern viele weitere. Wenn Sie beispielsweise
im einleitenden <body>-Tag die Anweisung onkeydown="alert(window.event.keyCode)"
notieren, wird bei jedem Drcken einer Taste deren Zeichenwert in dezimaler Form ausgegeben.
Denn in der Eigenschaft keyCode des event-Objekts wird der Tastaturwert festgehalten, sobald
der Anwender eine Taste drckt.
Beachten Sie: Microsoft stellt zum event-abhngigen Ausfhren von Scripts noch eine spezielle
Syntax bereit, die Sie ebenfalls verwenden knnen:
<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
if(event.keyCode == 32) window.location.href="datei2.htm";
</script>

Mit einer solchen Anweisung im einleitenden Script-Tag wird das Script nur dann ausgefhrt,
wenn das angegebene Ereignis (Event) eintritt. In dem Beispiel wird bewirkt, dass der Browser
beim Drcken der Leertaste (sie hat den Tastaturcode 32) zu einer anderen Datei springt.

21.3.7

Vererbung bei Events (Event-Bubbling)

Anwenderereignisse (Events) whrend der Anzeige einer WWW-Seite werden im MS Internet

Explorer von innen nach auen vererbt. Wenn der Anwender beispielsweise auf einen mit
<b>...</b> als fett ausgezeichneten Text innerhalb eines mit <p>...</p> definierten Textabsatzes klickt, betrifft der Mausklick zunchst nur den fetten Text. Angenommen, der Textabsatz
enthlt im einleitenden <p>-Tag einen Event-Handler onClick=, so wrde dieser nicht aktiv, da
der Mausklick ja nur den als fett markierten Text innerhalb des Absatzes betrifft. Da das <b>-Tag
keinen Event-Handler enthlt, wrde der Mausklick unbemerkt bleiben, obwohl er innerhalb
des Textabsatzes stattfand, der fr den Fall eines Mausklicks einen Event-Handler enthlt. Der
Bubble-Effekt (wrtlich: Blaseneffekt) bewirkt, dass das Ereignis (der Mausklick) zum jeweils
nchsthheren Element im Elementenbaum der HTML-Datei weitergegeben wird. Auf diese
Weise gelangt das Ereignis zu dem <p>-Tag, das den Event verarbeitet. Wrde das <p>-Tag auch
keinen Event-Handler onClick= enthalten, so wrde der Bubble-Effekt das Ereignis an das

21.3 Das ltere DHTML-Modell von Microsoft

1011

nchsthhere Element weitergeben, also z.B. an ein <div>-Tag, innerhalb dessen sich der Textabsatz befindet, oder an das <body>-Tag. Wenn nirgendwo ein Event-Handler notiert ist, der auf
den Mausklick reagiert, passiert einfach nichts. Ein Beispiel:
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-function Handle_Click() {
document.all.Info.innerHTML = "Der Bereich, auf den Sie geklickt
haben, ist mit <" + window.event.srcElement.tagName + ">
ausgezeichnet und hat die id <i>" +
window.event.srcElement.id + "<\/i>. Der Event wurde jedoch
bis ans body-Tag durchgereicht.";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onClick="Handle_Click()">
<div id="Inhalt">
<p id="Text_1">Ein <i id="i_Text">Textabsatz</i>. Klicken Sie hinein</p>
<p id="Text_2">Ein <u id="u_Text">anderer Textabsatz</u>. Klicken Sie hinein</p>
<p id="Text_3">Noch ein <b id="b_Text">Textabsatz</b>. Klicken Sie hinein</p>
<p id="Text_4">Ein letzter <tt id="tt_Text">Textabsatz</tt>. Klicken Sie hinein</p>
</div>
<p id="Info">Hier erscheinen Infos zum Klick</p>
</body>
</html>

21.9: Das Beispiel zeigt nach einem Mausklick, dass das Event weitergereicht wurde.

Im Beispiel werden diverse Texte in verschiedenen HTML-Auszeichnungen definiert. Jedes

HTML-Element erhlt dabei auch einen Namen (id=). Der unterste Textabsatz mit id="Info"
dient dazu, dynamisch Informationen darber auszugeben, welches Element der Anwender

1012

Kapitel 21: Dynamisches HTML

angeklickt hat. Jedes Mal, wenn der Anwender ein Element anklickt, wird die Funktion Handle_
Click() aufgerufen, die in einem JavaScript-Bereich im Dateikopf definiert ist. Jedes Mal wird
in dem Textabsatz Info ausgegeben, welches HTML-Tag angeklickt wurde, und welche id es
hat. Eigentlich betrifft der Mausklick dabei ja nur das jeweilige Element. Keines dieser Elemente
hat jedoch einen Event-Handler onClick=, der einen Mausklick abfngt und Script-Code
ausfhrt. Dass der Script-Code trotzdem bei jedem Mausklick ausgefhrt wird, liegt am EventBubbling. Der Mausklick-Event wird immer weiter nach auen gegeben und landet schlielich
beim <body>-Tag, das einen Event-Handler onClick= enthlt.
Der Bubble-Effekt lsst sich auch ausschalten, falls er nicht erwnscht ist. Dazu mssen Sie in
einem JScript/JavaScript-Bereich die Anweisung notieren: window.event.cancelBubble =
true;

21.4

Das ltere DHTML-Modell von Netscape

21.4.1 Allgemeines zum DHTML-Modell von Netscape 4.x

Die hier vorgestellte Layer-Technik funktioniert nur mit Netscape in der Version 4.x. In der
vllig neu programmierten Version 6.0 und den Mozilla-Quellen dazu ist die gesamte LayerTechnik nicht mehr implementiert und funktioniert nicht mehr. Der Grund ist, dass das W3Konsortium die Layer-Technik abgelehnt hat. Stattdessen wird das Document Object Model
(DOM) empfohlen, das auch in Netscape ab Version 6.0 implementiert ist. Die Layer-Technik,
wie sie hier beschrieben wird, ist also nur noch im Hinblick auf die Rckwrtskompatibilitt zur
4er-Serie der Netscape-Browser von Bedeutung (siehe Kapitel 12).
Dynamisches HTML das ist bei Netscape 4.x nicht wie im DOM oder beim lteren Modell
des MS Internet Explorer der beliebige nachtrgliche Zugriff auf alle Elemente einer HTMLDatei. Sie knnen mit Netscape 4.x also nicht einfach nachtrglich einen Textabsatz, der mit
<p>...</p> definiert ist, vllig anders formatieren oder in eine berschrift 1. Ordnung verwandeln.
Dynamisches HTML gibt es bei Netscape 4.x nur im Zusammenhang mit positionierten Elementen. Bei Netscape ist Dynamisches HTML die Mglichkeit, positionierte Layer dynamisch zu
behandeln, also ein- und auszublenden, zu verschieben usw.
Die Layer-Technologie von Netscape ist allerdings sehr mchtig. Voraussetzung dabei ist das
Definieren von Layern in HTML. Es besteht zwar auch die Mglichkeit, ohne das layer-Element
Dynamisches HTML fr Netscape zu schreiben, doch das ganze Konzept, das Netscape seinem
Browser in der Version 4.x als Dynamisches HTML eingebaut hat, basiert auf dem layer-Element. Wenn man auf das layer-Element verzichten will, bleibt einem nur, die Layer zu simulieren.
Die Beispiele auf dieser Seite konzentrieren sich deshalb im Wesentlichen auf die Layer-Technologie. Denn nur so wird der Ansatz deutlich, den Netscape mit seiner Implementierung von
Dynamischem HTML verfolgt. Um die Beispiele auf dieser Seite zu verstehen, mssen Sie vor
allem die Layer in HTML kennen sowie Vorkenntnisse in JavaScript mitbringen. Fr die LayerTechnik ist vor allem das JavaScript-Objekt layers entscheidend. Dort werden die einzelnen

21.4 Das ltere DHTML-Modell von Netscape

1013

Eigenschaften und Methoden systematisch beschrieben, die hier in den Beispielen verwendet
werden.

21.4.2

Layer-Bereiche dynamisch anzeigen/verstecken

Sie knnen Layer mit Hilfe von JavaScript dynamisch anzeigen und verstecken. Je nachdem, wie
Sie Ihre Layer definieren, knnen Sie dadurch die verschiedensten Effekte erzielen. Das folgende
Beispiel demonstriert, wie Sie eine Diashow aus kurzen Texten definieren knnen. Der
Anwender braucht nicht mehr scrollen, sondern klickt sich von einem Text zum nchsten. Die
Texte werden in einer Box angezeigt. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-var AktuellerText = 0;
var Texte = 3;
function NextText() {
++AktuellerText;
if(AktuellerText >= Texte) AktuellerText = 0;
for(var i=0;i<Texte;i++)
document.layers[i].visibility = "hide";
document.layers[AktuellerText].visibility = "show";
}
//-->
</script>
</head><body>
<layer visibility="show" top="150" left="50" width="400" height="125"
bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt;
font-weight:bold;"><span style="color:#000000; font-family:Arial,Helvetica,SanSerif; font-size:24pt; font-weight:bold;">1.</span><br>
Man kann nur Brcken schlagen zwischen Ufern, die man auseinanderhlt.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125"
bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt;
font-weight:bold; "><span style="color:#000000; font-family:Arial,Helvetica,SanSerif; font-size:24pt; font-weight:bold;">2.</span><br>
Je grer die Erwartung, desto unmglicher die Erfllung.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125"
bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt;
font-weight:bold; "><span style="color:#000000; font-family:Arial,Helvetica,SanSerif; font-size:24pt; font-weight:bold;">3.</span><br>
Wer sich aufgibt, liebt nicht, weil er sich nicht liebt; nur wer

1014

Kapitel 21: Dynamisches HTML

sich verschenkt, liebt, weil er sich liebt.</p>

</layer>
<layer top="275" left="50" width="400" bgcolor="#DDFFDD">
<center><form name="Formular" action=""><input type="button" value=" weiter >> "
onClick="NextText()"></form></center>
</layer>
</body></html>

Im Krper der Beispiel-HTML-Datei werden insgesamt vier Layer definiert. Die ersten drei Layer
enthalten Texte, die dynamisch wechseln sollen. Der vierte Layer enthlt einen Button. Wenn der
Anwender auf den Button klickt, wird eine JavaScript-Funktion mit Namen NextText() aufgerufen. Diese Funktion wird im Kopf der HTML-Datei in einem JavaScript-Bereich definiert. Die
Funktion sorgt dafr, dass der jeweils nchste Text angezeigt wird.

21.10: Ein Klick auf den Button zeigt nacheinander die verschiedenen Layer an.

Beachten Sie, dass die ersten drei Layer identische Angaben zur Position enthalten. Die Angaben
top="150" (linke obere Ecke beginnt 150 Pixel von oben), left="50" (linke obere Ecke beginnt
50 Pixel von links), width="400" (Breite des Layers: 400 Pixel), und height="125" (Hhe des
Layers: 125 Pixel), sind in allen Layern die gleichen. Die drei Layer unterscheiden sich lediglich
durch die Angabe von visibility=. Der erste Layer wird mit visibility="show" auf sichtbar gesetzt, die beiden anderen mit visibility="hide" auf unsichtbar. Dadurch wird
erreicht, dass zunchst nur der erste Layer am Bildschirm angezeigt wird.
Der vierte Layer, also der mit dem Kontroll-Button, enthlt ebenfalls Angaben zur Position. Er
hat die gleiche Breite wie die beiden ersten Layer und beginnt auch links an der gleichen Position. In der Hhe beginnt er genau 125 Pixel tiefer als die beiden ersten Layer. Da diese eine
Hhe von 125 Pixeln haben, schliet der Kontroll-Button-Layer also nahtlos an die oberen
Layer an. Er enthlt keine Angabe zur Sichtbarkeit. Das bedeutet, er ist sichtbar, und das wird
sich auch im Verlauf des JavaScripts nicht ndern. Denn der Inhalt dieses Layers steuert ja das
Geschehen.

21.4 Das ltere DHTML-Modell von Netscape

1015

In dem JavaScript-Bereich im Kopf der Datei werden zunchst zwei globale Variablen definiert.
Da sie auerhalb jeder Funktion stehen, behlt ihr aktueller Wert so lange Gltigkeit, wie die
HTML-Datei angezeigt wird. In der Variablen AktuellerText wird die Indexnummer des aktuellen Textlayers gespeichert. In Texte wird die Anzahl der dynamisch austauschbaren Texte bzw.
Layer gespeichert. Sie knnten anstelle der drei Layer mit Texten auch 10 oder 100 solcher Layer
definieren. Entsprechend der Anzahl der definierten Layer mssten Sie nur den Anfangswert von
Texten anders zuweisen.
Innerhalb der Funktion NextText() wird zunchst die Nummer von AktuellerText erhht,
denn es soll ja der jeweils nchste Text angezeigt werden. Anschlieend werden in einer forSchleife alle Layer mit Texten auf unsichtbar gesetzt. Am Ende wird der Layer desjenigen Textes, der angezeigt werden soll (AktuellerText) auf sichtbar gesetzt. Dadurch entsteht der
Diashow-Effekt.
Beachten Sie: Netscape dehnt die Layer entsprechend ihres Inhalts aus. Wenn der Inhalt eines
Textes im obigen Beispiel grer ist als der definierte Layer-Bereich, berschneidet er sich mit
dem Layer des Kontoll-Buttons, jedoch so, dass der Layer mit dem Kontroll-Button ber dem
unteren Teil des Layers mit dem Text liegt. Der Grund dafr ist, dass der Layer mit dem Kontroll-Button hinter dem Layer mit dem Text definiert wird und daher im Stack (Stapel) weiter
oben liegt. Wenn Sie die Gre eines Layers unabhngig vom Inhalt fest machen wollen, mssen
Sie das Attribut clip= benutzen (siehe auch Kapitel 12.1.4) Anzeigebereich von Layern beschneiden).

21.4.3

Layer-Bereiche dynamisch berlappen

Sie knnen Layer so positionieren, dass sie sich berlappen. Das macht ohne JavaScript meistens
allerdings wenig Sinn, denn der Anwender soll die Inhalte der Layer ja sehen knnen. Mit Hilfe
von JavaScript knnen Sie jedoch bewirken, dass der Anwender sich einen einzelnen Layer in
den Vordergrund holen kann, um dessen Inhalt anzuzeigen. Auf diese Weise knnen Sie auf
einer WWW-Seite durchaus verschiedene Inhalte unterbringen, fr die normalerweise mehrere
Seiten angebracht wren. Im folgenden Beispiel sind die Layer wie in einem Karteikastenstapel
aufgereiht. Der Anwender kann einen Layer herausgreifen. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-layer.Text { padding:5px; font-size:9pt; font-family:Arial,Helvetica,Sans-Serif; }
layer.Kopf { font-size:9pt; font-family:Arial,Helvetica,Sans-Serif; fontweight:bold; text-align:right; }
a:link, a:visited, a:active { color:white; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
-->
</style>
<script type="text/javascript">
<!-var aktiv = "Home";

1016

Kapitel 21: Dynamisches HTML

function Hervorheben(neu_aktiv)
{
document.layers[Feedback].zIndex = 1;
document.layers[Support].zIndex = 2;
document.layers[Produkte].zIndex = 3;
document.layers[Home].zIndex = 4;
document.layers[aktiv].bgColor = "#CCCCCC";
document.layers[aktiv].layers[0].bgColor = "#666666";
document.layers[aktiv].layers[1].visibility = "hide";
document.layers[neu_aktiv].zIndex = 5;
document.layers[neu_aktiv].bgColor = "#FFCCFF";
document.layers[neu_aktiv].layers[0].bgColor = "#000000";
document.layers[neu_aktiv].layers[1].visibility = "show";
aktiv = neu_aktiv;
}
//-->
</script>
</head><body>
<layer id="Feedback" top="130" left="10" width="360" height="230"
bgcolor="#CCCCCC">
<layer class="Kopf" width="360" height="25" bgcolor="#666666">
<a href="javascript:Hervorheben(Feedback)">Feedback</a>
</layer>
<layer class="Text" top="25" visibility="hide">
Hier Ihr Feedback:
<form name="Formular" action=""><textarea rows="5" cols="25">Bla
Bla</textarea></form>
</layer>
</layer>
<layer id="Support" top="155" left="70" width="360" height="230" bgcolor="#CCCCCC">
<layer class="Kopf" width="360" height="25" bgcolor="#666666">
<a href="javascript:Hervorheben(Support)">Support</a>
</layer>
<layer class="Text" top="25" visibility="hide">
Unser Suport ist wirklich Bla Bla
</layer>
</layer>
<layer id="Produkte" top="180" left="130" width="360" height="230"
bgcolor="#CCCCCC">
<layer class="Kopf" width="360" height="25" bgcolor="#666666">
<a href="javascript:Hervorheben(Produkte)">Produkte</a>
</layer>
<layer class="Text" top=25 visibility=hide>
Unsere Produkte sind ja so wahnsinnig Bla Bla
</layer>
</layer>
<layer id="Home" top="205" left="190" width="360" height="230" bgcolor="#FFCCFF">

21.4 Das ltere DHTML-Modell von Netscape

1017

<layer class="Kopf" width="360" height="25" bgcolor="#000000">

<a href="javascript:Hervorheben(Home)">HOME</a>
</layer>
<layer class="Text" top="25" visibility="show">
Unser Home ist unser Bla Bla
</layer>
</layer>
</body></html>

Im Beispiel werden vier groe Layer definiert: einer fr Feedback, einer fr Support, einer
fr Produkte und einer fr Home, was bedeuten soll, dass dieser Layer eine Art Homepage,
einen Home-Layer darstellt. Dieser Layer wird auch zuerst im Vordergrund angezeigt. Und zwar
deshalb, weil er als letzter definiert wird. Wenn Sie bei Layern kein Attribut z-index= notieren,
liegt immer derjenige Layer ganz oben, der als Letzter definiert wird.

21.11: Ein Mausklick auf den Link holt den jeweiligen Layer nach vorne.

Dem Beispiel knnen Sie auch entnehmen, dass innerhalb der vier groen Layer jeweils zwei
innere Layer definiert werden. Layer, die innerhalb anderer Layer definiert werden, werden
relativ zu ihrem Eltern-Layer positioniert. Dazu mssen Sie sich einen Layer vorstellen wie einen
neuen kleinen Dateikrper. Alles, was innerhalb davon notiert wird, wird relativ dazu positioniert.
Die Angaben zu top=, left=, height= und width= in den Layern im obigen Beispiel sind alle
genau ermittelt, und zwar so, dass die Layer optisch einen sauber sortierten Karteikastenstapel
darstellen. Versuchen Sie, die Abhngigkeiten der Positionierungsangaben im Beispiel zu ermitteln. So knnen Sie erkennen, wie Sie vorgehen mssen, um mehrere Layer nach einem von
Ihnen gewnschten Kriterium ordentlich verteilt im Anzeigefenster zu platzieren.

1018

Kapitel 21: Dynamisches HTML

Jeder der groen Layer enthlt im obigen Beispiel zwei innere Layer: einen Layer, der wie eine
Titelleiste wirkt und einen Verweis enthlt, und einen Layer, der den eigentlichen Inhalt enthlt.
Die Verweise in den Titelleisten-Layern rufen eine JavaScript-Funktion namens Hervorheben()
auf. Diese Funktion bewirkt das dynamische Hervorholen des groen Layers, der zu dem angeklickten Verweis gehrt (also des Eltern-Layers von dem Layer, in dem der Verweis steht).
In dem Script-Bereich, in dem die Funktion Hervorheben() steht, wird vor der Funktion eine
Variable aktuell definiert. Sie bekommt zu Beginn den Namen des vorne liegenden Layers
zugewiesen. Das ist derjenige Name, der beim entsprechenden Layer im Attribut id= vergeben
wurde. Die Funktion Hervorheben() erwartet einen Parameter, nmlich den Namen desjenigen
Layers, der anstelle des bisher vorne liegenden Layers hervorgeholt werden soll. Bei den Verweisen, die die Funktion aufrufen, wird denn auch wieder der Name bergeben, der im entsprechenden Layer bei id= vergeben ist.
Innerhalb der Funktion Hervorheben() wird zunchst die normale Layer-Reihenfolge hergestellt. Das geschieht durch Zuweisen einer Zahl an die Layer-Objekteigenschaft zIndex. Je hher
die Zahl, desto weiter vorne im Stapel liegt der Layer. Das Wiederherstellen der normalen LayerReihenfolge bewirkt, dass der Karteikastenstapel, den das Beispiel darstellt, immer aufgerumt
erscheint.
Anschlieend wird der bisher aktive Layer, bezeichnet durch document.layers[aktiv], mit
mehreren Anweisungen behandelt. Die Angabe aktiv in den eckigen Klammern zeigt zunchst
auf den Layer "Home". Am Ende der Funktion wird der Wert der Variablen aktiv jedoch gendert. Dort wird ihr der Name des neuen hervorgehobenen Layers zugewiesen. Dadurch ist beim
nchsten Aufruf der Funktion dieser Layer derjenige, der von document.layers[aktiv]
betroffen ist. Die Anweisungen, die den bisher aktiven Layer betreffen, weisen diesem Atrribute
zu, die ihn optisch zu einem unten liegenden Layer im Karteikastenstapel machen.
Derjenige Layer mit dem Namen, der mit dem Parameter neu_aktiv bergeben wurde, erhlt
dagegen diejenigen optischen Attribute, die ihn als hervorgehobenen Layer auszeichnen. Er
bekommt auch die hchste Zahl fr zIndex. Dadurch wird er als oberster Layer angezeigt.
Beachten Sie: Im Layer Feedback ist ein Formular definiert. Dieses Formular wird im Netscape
4 mit document.layers.Feedback.document.Formular angesprochen, da es Bestandteil des
Layers Feedback ist. Ein Layer stellt aus Sicht von Netscape ein Dokument im Dokument dar
und hat ein eigenes document-Objekt.

21.4.4

Layer-Bereiche dynamisch bewegen

Sie knnen Layer mit beliebigen Inhalten ber das Anzeigefenster springen oder wandern lassen.
Das Springen zu einer Stelle ist dabei nur ein einziger Befehl, da dies als Methode im Layer-Objekt von JavaScript zur Verfgung steht. Wenn Sie dagegen zeitgesteuerte Bewegungseffekte
wollen, mssen Sie die Positionsberechung vom Startpunkt bis zum Endpunkt des Bewegungsvorgangs zu Fu programmieren. Das folgende Beispiel zeigt, wie so etwas im Prinzip funktioniert.
<html><head><title>Test</title>
<style type="text/css">
<!-p.Nav { font-size:9pt; font-weight:bold }

21.4 Das ltere DHTML-Modell von Netscape

1019

a.Navlink:link { color:#FF0000 }
a.Navlink:visited { color:#FF0000 }
a.Navlink:active { color:#000000 }
-->
</style>
<script type="text/javascript">
<!-function hBeweg(LayerNum,bis_links,Pixel,Pause) {
var Restpixel = bis_links - document.layers[LayerNum].left;
if(bis_links < document.layers[LayerNum].left) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[LayerNum].moveBy(Pixel,0);
else
document.layers[LayerNum].moveBy(Restpixel,0);
if(document.layers[LayerNum].left != bis_links)
window.setTimeout(hBeweg(+LayerNum+,+bis_links+,+Math.abs(Pixel)+),+Pause+
);
}
function vBeweg(LayerNum,bis_oben,Pixel,Pause) {
var Restpixel = bis_oben - document.layers[LayerNum].top;
if(bis_oben < document.layers[LayerNum].top) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[LayerNum].moveBy(0,Pixel);
else
document.layers[LayerNum].moveBy(0,Restpixel);
if(document.layers[LayerNum].top != bis_oben)
window.setTimeout(vBeweg(+LayerNum+,+bis_oben+,+Math.abs(Pixel)+),+Pause+
);
}
//-->
</script>
</head><body>
<layer left="10" top="10" width="450" height="250" bgcolor="#FFFF66">
<h1>Einen springen lassen...</h1>
<p>Springe nach:
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,10)">links
oben</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,10)">rechts
oben</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,260)">links
unten</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,260)">rechts
unten</a><br></p>
<p>Bewege nach:
<a class="Navlink" href="javascript:hBeweg(0,10,4,2)">links</a> |
<a class="Navlink" href="javascript:hBeweg(0,260,4,2)">rechts</a> |

1020

Kapitel 21: Dynamisches HTML

<a class="Navlink" href="javascript:vBeweg(0,10,4,2)">oben</a> |

<a class="Navlink" href="javascript:vBeweg(0,260,4,2)">unten</a></p>
</layer>
</body></html>

21.12: Das Layer springt per Script im Bowser-Fenster hin und her.

Innerhalb des Dateikrpers der HTML-Datei im obigen Beispiel wird ein Layer definiert. Dieser
Layer enthlt insgesamt acht Verweise. Bei jedem Verweis wird JavaScript-Code ausgefhrt.
Dabei wird der Befehl, den der Verweis dem Anwender anbietet, in die Tat umgesetzt. Alle Verweise sorgen fr eine Neupositionierung des Layers, in dem sie sich selber befinden. Das muss
nicht so sein es ist im obigen Beispiel einfach zu Demo-Zwecken so gelst. Der Layer, den es
dynamisch zu positionieren gilt, knnte auch etwas ganz anderes enthalten, etwa Grafiken,
Tabellen usw.
Die ersten vier Verweise fhren lediglich Sprnge aus, d.h. beim Klicken auf einen dieser Verweise wird der Layerinhalt einfach sofort an einer anderen Stelle im Anzeigefenster angezeigt.
Fr diese Aufgabe stellt das Layer-Objekt von JavaScript die Methode moveTo() zur Verfgung.
Mit einer Anweisung wie document.layers[0].moveTo(...) positionieren Sie den ersten
Layer der Datei (der den Index 0 hat) an einer neuen Position. Die Methode moveTo() setzt die
neue Position der linken oberen Ecke des Layers. Dazu erwartet die Methode zwei Parameter,
und zwar zuerst den Wert fr links, und dann den Wert fr oben. Mit einer Anweisung wie
document.layers[0].moveTo(260,10) wird also die linke obere Ecke des Layers auf 260 Pixel
von links und 10 Pixel von oben gesetzt. Die Angaben beziehen sich auf das jeweilige Elternelement des Layers. Da der Layer im obigen Beispiel kein Layer innerhalb eines anderen Layers ist,
ist das normale Anzeigefenster das Elternelement.
Whrend das einfache Neupositionieren mit einer einzigen JavaScript-Anweisung mglich ist,
die im obigen Beispiel direkt in den entsprechenden Verweisen steht, muss zum dynamischen
Bewegen von Layern eine eigene Funktion aufgerufen werden, die den Bewegungsablauf be-

21.4 Das ltere DHTML-Modell von Netscape

1021

stimmt. Im obigen Beispiel gibt es zwei solcher Funktionen. Die Funktion hBeweg() kann Layer
horizontal nach links oder rechts verschieben, die Funktion vBeweg() leistet das Gleiche, nur
vertikal nach oben oder unten. Entsprechend werden die Funktionen aufgerufen. Wenn der
Anwender einen der Verweise zum Bewegen nach rechts oder links angeklickt, wird hBeweg()
aufgerufen, und bei den Verweisen zum Bewegen nach unten oder oben wird vBeweg() aufgerufen.
Beide Funktionen sind allgemein geschrieben. Deshalb erwarten sie als Input auch verschiedene
Parameter, die beim Funktionsaufruf zu bergeben sind:
LayerNum ist die Indexnummer des Layers, der bewegt werden soll. Da im Beispiel immer der
gleiche und einzige vorhandene Layer bewegt werden soll, wird beim Aufruf der Funktionen
immer dessen Indexnummer 0 bergeben.
bis_links (bei hBeweg()) bzw. bis_oben (bei vBeweg()) ist der neue Endwert, bei dem die
Bewegung gestoppt werden soll. Je nachdem, ob der Wert, den Sie dabei bergeben, grer
oder kleiner ist als die aktuelle Position des Layers, ergibt sich automatisch die Bewegungsrichtung.
Pixel ist die Anzahl der Pixel, um die pro Bewegungsschritt weiter gesprungen wird. Je hher
der Wert ist, den Sie dafr bergeben, desto schneller und ruckartiger die Bewegung. Im obigen Beispiel wird in allen Fllen 4 bergeben.
Pause ist ein weiterer Parameter zur Beeinflussung der Geschwindigkeit. Je hher der Wert,
desto langsamer die Bewegung.
Ein Bewegen von Layern besteht in nichts anderem als einem schrittweise neuen Positionieren
des Layers. In den Funktionenen hBeweg() und vBeweg() stehen jeweils etwa in der Mitte zwei
Anweisungen der Art document.layers[LayerNum].moveBy(...), von denen immer nur eine
ausgefhrt wird. Das ist diejenige Anweisung, mit der der Layer jeweils neu positioniert wird. Es
handelt sich einfach um den Aufruf der Methode moveBy() des Layer-Objekts. Diese Methode
funktioniert genauso wie moveTo(), nur mit relativen Angaben statt mit absoluten.
Damit der Layer nicht nur einmal, sondern weiter bewegt wird, rufen sich die beiden Funktionen
hBeweg() und vBeweg() am Ende jeweils selbst wieder auf. Der Schleifen-Effekt, der dadurch

entsteht, wird erst abgebrochen, wenn der gewnschte Endwert erreicht ist. Der Selbstaufruf der
Funktion ist in die JavaScript-Methode window.setTimeout() eingebunden. Dadurch kann die
Verzgerung bercksichtigt werden, die mit dem Parameter Pause bergeben wurde. Der
Selbstaufruf der Funktion wirkt etwas kompliziert. Das liegt daran, dass die Funktion sich auch
wieder mit den von ihr erwarteten Parametern aufrufen muss. Leider ist es nicht mglich, dazu
einen normalen Funktionsaufruf zu notieren und einfach die bergeben bekommenen Parameter wieder zu bergeben. Stattdessen wird eine Zeichenkette zusammengebaut, die die Funktion
beim Neuaufruf mit tatschlichen Werten versorgt.
Die brigen Anweisungen in den beiden Funktionen dienen zur Kontrolle des Bewegungsablaufs, vor allem dazu, dass trotz unterschiedlicher Aufrufparameter am Ende tatschlich die
gewnschte Endposition erreicht wird. So ist Restpixel eine Hilfsvariable, die ermittelt, wie
viele Pixel noch zwischen aktueller Layerposition und dem gewnschten Endwert liegen. Wichtig
ist auch die korrekte Bestimmung der Bewegungsrichtung. Wenn der gewnschte Endwert der
Bewegung kleiner ist als die Position des Layers beim Start der Bewegung, dann muss der
Schrittwert, der mit dem Parameter Pixel bergeben wird, als negative Zahl interpretiert wer-

1022

Kapitel 21: Dynamisches HTML

den. Denn nur so kann es rckwrts gehen, also nach links oder nach oben. Mit dem Ausdruck
Pixel=0-Pixel wird der Schrittwert bei Bedarf auf eine negative Zahl umgepolt.
Beachten Sie: Komplexere Bewegungsablufe bentigen entsprechend komplexere Programmierung. Bei diagonalen Bewegungen ist es nur einfach, solange die Anzahl der Pixel, um die pro
Bewegungsschritt weiter positioniert wird, horizontal und vertikal immer proportional ist.
Sobald Sie aber krumme Aufgaben lsen wollen, etwa die, von oben 10 links 10 nach oben 86
links 623 auf mglichst geradem Weg zu kommen, drfen Sie in die Tiefen der Arithmetik eintauchen. Und wenn Sie gar Kreis- oder Ellipsenbewegungen wollen, mssen Sie entsprechende
geometrische Formeln kennen und die dafr vorgesehenen Methoden des Math-Objekts von
JavaScript benutzen.

21.4.5

Layer-Bereiche dnyamisch vergrern/verkleinern

Durch dynamisches Verndern des angezeigten Bereichs eines Layers lassen sich unzhlige interessante Effekte erzielen, zum Beispiel zum dynamischen Aufklappen und Zuklappen von Teilen
einer WWW-Seite. Das folgende Beispiel bewirkt drei Blcke, von denen zunchst nur Titelzeilen sichtbar sind. Jede Titelzeile enthlt einen Verweis. Beim Anklicken des Verweises wird
unterhalb der Titelzeile ein Bereich mit Inhalt nach unten aufgerollt. Beim nchsten Anklicken
des Verweises wird er wieder zugerollt. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-layer.Text { padding:5px; font-size:14pt; font-family:Arial,Helvetica,Sans-Serif;
color:#FFFFFF }
layer.Kopf { padding:5px; font-size:10pt; font-family:Arial,Helvetica,Sans-Serif;
font-weight:bold; }
a:link, a:visited, a:active { color:#FFFFE0; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
-->
</style>
<script type="text/javascript">
<!-var Status = new Array("zu","zu","zu");
function AufUndZu(LayerNum) {
var i;
if(Status[LayerNum] == "zu") {
for(i=2;i<250;++i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "auf";
}
else {
for(i=250;i>2;--i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "zu";

21.4 Das ltere DHTML-Modell von Netscape

1023

}
}
//-->
</script>
</head><body>
<layer class="Text" left="10" top="70" width="198" height="250" bgcolor="#000099"
clip="0,0,198,2">
HTML ist die Sprache fr die Strukturierung von Hypertext-Projekten. Logos und
Godfather aller
Web-Seiten. Vermutlich das erfolgreichste Dateiformat der EDV-Geschichte.
</layer>
<layer class="Text" left="210" top="70" width="198" height="250" bgcolor="#994000"
clip="0,0,198,2">
CSS ist die Sprache fr die Formatierung von Web-Seiten. Physis und Sohnprinzip.
Klinkt sich
nahtlos in HTML ein und sorgt dafr, das Strukturen zu Farben und Formen werden.
</layer>
<layer class="Text" left="410" top="70" width="198" height="250" bgcolor="#008000"
clip="0,0,198,2">
JavaScript ist die Sprache fr Dynamische Web-Seiten. Kinesis und Geistprinzip.
Klinkt sich nahtlos
in HTML ein und zunehmend auch in CSS. Ist allerdings am schwersten zu verstehen.
</layer>
<layer class="Kopf" left="10" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(0)">HTML</a>
</layer>
<layer class="Kopf" left="210" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(1)">CSS</a>
</layer>
<layer class="Kopf" left="410" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:AufUndZu(2)">JavaScript</a>
</layer>
</body></html>

In dem Beispiel werden insgesamt sechs Layer definiert. Die ersten drei Layer sind diejenigen, die
auf- und zuklappbar sind. Zunchst sind diese Layer zugeklappt. Das wird durch das Attribut
clip= erreicht. Durch diese Angabe lsst sich der angezeigte Bereich eines Layers beliebig einschrnken. Die auf-/zuklappbaren Layer im obigen Beispiel etwa haben durch die Angaben
width="198" height="250" eine Breite von 198 und eine Hhe von 250 Pixeln. Durch die
Angabe clip="0,0,198,2" wird Folgendes erreicht: Trotz der definierten Breite und Hhe ist
nur der Bereich von links 0 oben 0 bis links 198 oben 2 sichtbar. Das ist nur ein ganz dnner
Streifen, der aus optischen Grnden zugelassen wird. Mit 0,0,198,0 wre von den Layern
berhaupt nichts zu sehen.

1024

Kapitel 21: Dynamisches HTML

21.13: Ein Klick auf den Link klappt das Layer auf und zeigt den Text.

Die drei unteren Layer sind mit Hilfe der Angaben zu top=, left=, width= und height= so
positioniert, dass sie genau ber den auf-/zuklappbaren Layern stehen. Diese Kopf-Layer enthalten Verweise. Bei jedem Klick auf einen Verweis in einem der Kopf-Layer wird der Layer
unterhalb davon auf- oder wieder zugeklappt. Dazu wird bei jedem Klick auf einen der Verweise
eine JavaScript-Funktion aufgerufen: die Funktion AufUndZu(), die im Kopf der Datei in einem
JavaScript-Bereich definiert ist.
In dem JavaScript-Bereich wird vor der Funktion AufUndZu() bereits ein Array, bestehend aus
drei Werten, definiert: der Array Status. Alle seine drei Werte erhalten den Anfangszustand
"zu". Da dieser Array auerhalb jeder Funktion definiert ist, stehen seine Daten jederzeit zur
Verfgung.
Innerhalb der Funktion AufUndZu() wird geprft, ob ein Layer derzeit auf- oder zugeklappt ist.
Dazu bekommt die Funktion beim Aufruf einen Parameter LayNum bergeben. Das ist die
Indexnummer des Layers, der auf- oder zugeklappt werden soll. Da im Beispiel die ersten drei
definierten Layer davon betroffen sein sollen, kommen also nur die Indexnummern 0, 1 und 2 in
Frage. Beim Aufruf der Funktion in den unteren drei Layern werden denn auch genau diese drei
Werte bergeben. Mit der Abfrage if(Status[LayerNum] == "zu") vergleicht die Funktion
AufUndZu(), was im Array Status als Wert fr die bergebene Indexnummer steht. Wenn dort
"zu" steht, wird der Layer aufgeklappt. Wenn er aufgeklappt wird, wird der Wert im Array am
Ende auf den Wert "auf" gesetzt. Dadurch gelangt die Funktion bei der nchsten Abfrage fr
den gleichen Layer in den else-Zweig, wo sie genau die umgekehrten Arbeiten durchfhrt.
Das eigentliche Auf- und Zuklappen geschieht innerhalb der for-Schleife. Dort wird beim Aufklappen von 2 bis 250 gezhlt und beim Zuklappen von 250 zurck auf 2. Abhngig vom aktuellen Schleifenwert wird die Unterseite des Clip-Bereichs des Layers mit document.layers
[LayerNum].clip.bottom= dynamisch verndert. Die Grenzwerte von 2 und 250 hngen mit
den definierten Layern zusammen: Die 2 ist jener Wert, der bei den Angaben clip="0,0,198,2"

21.4 Das ltere DHTML-Modell von Netscape

1025

vorkommt, und 250 ist die Hhe der definierten Layer (height="250"). Beim Aufklappen wird
also der Clip-Bereich im Script dynamisch auf 0,0,198,250 verndert. Das bedeutet: Der Layer ist
vollstndig sichtbar. Beim Zuklappen wird dagegen der Clip-Anfangszustand von 0,0,198,2
wieder hergestellt.

21.4.6

Layer-Inhalte dynamisch austauschen

Einen der groen Vorteile des Microsoft-Ansatzes fr Dynamisches HTML, nmlich das beliebige Austauschenknnen von HTML-Elementinhalten, knnen Sie mit Hilfe von NetscapeLayern zumindest nachstellen. Der Grund ist, dass Netscape einen Layer wie ein eigenes kleines neues Dokument innerhalb des Elterndokuments behandelt. So sind auch alle JavaScriptObjekte darauf anwendbar, die unterhalb des document-Objekts liegen. Das folgende Beispiel
verdeutlicht, wie dies bei Layern im Einzelnen funktioniert, und welche Mglichkeiten sich dabei
erffnen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function DatenSchreiben() {
var Text = document.Input.document.Eingabe.Feld.value;
var Laenge = document.Input.document.Eingabe.Feld.value.length;
document.Output.document.clear();
document.Output.document.write("<p>Sie haben folgenden Text eingegeben:<br>");
document.Output.document.write("<b>" + Text +"<\/b><\/p>");
document.Output.document.write("<p>Der Text hat eine Laenge von ");
document.Output.document.write("<b>" + Laenge + " Zeichen<\/b><\/p>");
document.Output.document.close();
}
//-->
</script>
</head><body>
<layer id="Input" bgcolor="#E4EEFF" style="padding:5mm" left="10" top="100"
width="280" height="280">
<p>Geben Sie in dem Feld Text ein und klicken Sie dann auf "Interaktion"</p>
<form name="Eingabe" action="">
<textarea name="Feld" cols="25" rows="6" wrap="virtual"></textarea><br>
<input type="button" value="Interaktion" width="220" onClick="DatenSchreiben()">
</form>
</layer>
<layer id="Output" style="padding:5mm" left="310"
top="100" width="280" height="280">
</layer>
</body></html>

Im Beispiel werden zwei Layer definiert: einer mit dem Namen (id) Input und einer mit dem
Namen Output. Beide Layer sind so positioniert, dass der Layer fr den Output neben dem
Layer fr den Input erscheint. Der Layer fr den Output erhlt jedoch zunchst keinen Inhalt.

1026

Kapitel 21: Dynamisches HTML

Im Layer fr den Input wird dagegen ein Formular definiert. Das Formular besteht aus einem
mehrzeiligen Eingabefeld und einem Button. Wenn der Anwender auf den Button klickt, wird
die JavaScript-Funktion SchreibeDaten() aufgerufen, die im Kopf der Datei innerhalb eines
JavaScript-Bereichs definiert ist.

21.14: Das Script beschreibt den rechten Bereich dynamisch, whrend die Seite bereits angezeigt
wird.

Die Funktion ermittelt zunchst den eingegebenen Text und dessen Lnge. Anschlieend
schreibt sie diese Daten zur Kontrolle in den Layer mit dem Namen Output. Wichtig ist, dass vor
dem dynamischen Schreiben des Inhalts die Methode clear() aufgerufen wird, die den aktuellen Inhalt des Layers lscht, und nach dem Schreiben die Methode close(), die den Vorgang
abschliet, sodass beim nchsten Mal ein neuer Schreibzugriff mglich ist. Dazwischen werden
die eigentlichen Daten geschrieben, und zwar mit der Methode write().
Alle drei Methoden sind altbekannte Methoden des document-Objekts von JavaScript. Das besondere im Fall der Layer ist, dass das document-Objekt bei den Anweisungen gleich doppelt
verwendet wird. Ein Beispiel ist die Anweisung: document.Output.document.clear();. Auch
zu Beginn der Funktion, beim Ermitteln des Formularfeldinhalts, kommt diese doppelte Verwendung von document vor. Solche Konstruktionen mssen Sie so verstehen: ber das vorne
notierte document sind Layer-Objekte ansprechbar, da diese unterhalb des document-Objekts
liegen. Output ist im Beispiel der Name eines Layers. Dadurch wird dieser Layer angesprochen.
Ein Layer gilt nun aber selbst wieder als Dokument. Deshalb mssen Sie dahinter nochmals
document und dahinter erlaubte Eigenschaften und Methoden des document-Objekts notieren.
Die Anweisungen beziehen sich dann auf die Elemente innerhalb des entsprechenden Layers. Im
obigen Beispiel etwa kommen Sie an den Formularfeldinhalt nur mit document.Input.
document.Eingabe.Feld.value (document.Eingabe.Feld.value wrde dagegen eine Fehlermeldung erzeugen).
Beachten Sie: Der Phantasie sind hierbei kaum Grenzen gesetzt. Alles, was Sie beispielsweise
durch Interaktion mit dem Anwender mit Hilfe eines Formulars in JavaScript ermitteln und

21.4 Das ltere DHTML-Modell von Netscape

1027

berechnen knnen, knnen Sie auf diese Weise dynamisch ausgeben. Mit Methoden wie window.setTimeout() knnen Sie auch zeitgesteuert Inhalte in Layer schreiben.

21.4.7

Layer ohne layer-Element simulieren

Unter dem Druck von Microsoft und angesichts der Tatsache, dass das W3-Konsortium keine
Anstalten machte, das layer-Element und damit die Grundlage fr Dynamisches HTML nach
dem Netscape-Ansatz in den HTML-Standard zu bernehmen, hat Netscape die Fhigkeit zum
dynamischen Positionieren auch auf die beiden abstrakten HTML-Elemente <div>...</div>
und <span>...</span> ausgedehnt. Wenn Sie innerhalb solcher HTML-Tags mit Hilfe von
Stylesheet-Angaben zur Positionierung des Elements notieren, knnen Sie mit JavaScript auf
solche Angaben zugreifen. Netscape interpretiert die Angaben dann genau so wie bei Layern. Ein
Beispiel:
<html><head><title>Test</title>
<script type="text/javascript">
<!-function Zeigen() {
document.BildAnzeige.visibility = "visible";
document.ZeigenVerweis.visibility = "hidden";
document.VersteckenVerweis.visibility = "visible";
}
function Verstecken() {
document.BildAnzeige.visibility = "hidden";
document.VersteckenVerweis.visibility = "hidden";
document.ZeigenVerweis.visibility = "visible";
}
//-->
</script>
<style type="text/css">
<!-#ZeigenVerweis {
position:absolute; left:100; top:140; width:400; height:30; visibility:visible; }
#VersteckenVerweis {
position:absolute; left:100; top:140; width:400; height:30; visibility:hidden; }
#BildAnzeige {
position:absolute; left:100; top:170; width:400; height:230; visibility:hidden; }
-->
</style>
</head><body>
<div id="ZeigenVerweis">
<a href="javascript:Zeigen()"><b>Zeig das Bild an</b></a>
</div>
<div id="VersteckenVerweis">
<a href="javascript:Verstecken()"><b>Versteck das Bild</b></a>
</div>
<div id="BildAnzeige">

1028

Kapitel 21: Dynamisches HTML

<img src="denker.jpg" width="91" height="177" border="0" alt="Denker">

</div>
</body></html>

Das Beispiel bewirkt, dass beim Anklicken eines Verweises ein Bild angezeigt wird, das zunchst
nicht sichtbar ist. Gleichzeitig erscheint ein neuer Verweis, der das Ausblenden des Bildes
erlaubt. Auf diese Weise lsst sich das Bild immer wieder ein- und ausblenden.

21.15: Simulierte Layer: Ein Mausklick zeigt das Bild im div-Bereich an, der nchste lsst es
verschwinden.

In dem Beispiel werden dazu innerhalb des Dateikrpers drei Bereiche mit <div>...</div>
definiert. Alle div-Bereiche erhalten CSS-Eigenschaften zur Positionierung, und zwar im Dateikopf in dem style-Bereich. Ohne solche Angaben ist bei Netscape kein dynamischer Zugriff auf
das entsprechende Element mglich. Dass die CSS-Angaben zentral definiert werden, hat seine
Ursache darin, dass einige Netscape 4-Versionen mit Angaben direkt im einleitenden <div>-Tag
Probleme haben.
Die beiden ersten <div>-Bereiche im Beispiel haben die gleichen Angaben zur Positionierung.
Sie unterscheiden sich lediglich durch die Wertzuweisung bei der Angabe visibility=.
Dadurch wird bewirkt, dass beide Bereiche an der gleichen Stelle angezeigt werden, der eine
Bereich zunchst jedoch ausgeblendet bleibt, whrend der andere angzeigt wird. Der dritte
<div>-Bereich ist der Behlter fr das anzuzeigende Bild. Er ist zunchst auch nicht sichtbar.
Die beiden ersten Bereiche enthalten jeweils einen Verweis. Beim Anklicken des Verweises wird
jeweils eine JavaScript-Funktion aufgerufen, die im Kopf der Datei in einem JavaScript-Bereich
definiert ist. Der Bereich, der zunchst angezeigt wird, enthlt einen Verweis, bei dessen Anklicken die Funktion Zeigen() aufgerufen wird.

21.4 Das ltere DHTML-Modell von Netscape

1029

Die Funktion Zeigen() tut nichts anderes, als die Anzeigeverhltnisse unter den drei <div>Bereichen zu ndern. Der erste Bereich, ber dessen Verweis die Funktion aufgerufen wurde,
wird mit document.ZeigenVerweis.visibility="hidden" auf unsichtbar gesetzt. Der zweite
Bereich, der mit dem anderen Verweis, wird dagegen auf sichtbar gesetzt. Auch der Bereich mit
dem Bild wird sichtbar. Nun werden der zweite Verweis (Versteck das Bild) und das Bild selbst
angezeigt. Beim Klicken auf den Verweis wird die andere JavaScript-Funktion Verstecken()
aufgerufen. Diese Funktion arbeitet so wie die Funktion Zeigen(), nur umgekehrt.
Der Zugriff auf die <div>-Bereiche wird dadurch mglich, dass bei der Definition der <div>Bereiche mit id= ein Name vergeben wird. ber document.BereichName ist dann der Zugriff
auf Eigenschaften wie visibility, top, left, width, height oder clip mglich. So lassen sich
praktisch alle Aufgaben lsen, ohne das <layer>-Tag einzusetzen.
Beachten Sie: Ein layer-Element lsst sich nur simulieren, wenn der div-Bereich absolut positioniert ist. Sie knnen, wie im Beispiel, statt der visibility-Eigenschaften hide und show die
Eigenschaften hidden und visible verwenden, da Netscape 4 diese Angaben ebenfalls korrekt
interpretiert.

21.4.8

Das Event-Objekt

Das event-Objekt von JavaScript erlaubt es, auf Anwendereignisse zu reagieren. Es stellt eine
Erweiterung der klassischen Event-Handler dar. Das folgende Beispiel demonstriert die Mglichkeiten des event-Objekts. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-layer { font-size:10pt; font-family:Arial }
layer.Kopf { color:#FFFFFF; padding:1mm; cursor:hand; }
layer.Text { color:#000000; padding-top:30px; padding-left:1mm; padding-right:1mm }
-->
</style>
</head><body>
<layer id="Gruen" class="Text" bgcolor="#99FF99" top="170" left="10" width="200"
height="180">
<layer id="Gruenkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="200"
height="25">
Titelleiste des grnen Layers
</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrckt und ziehen Sie dann die Maus an eine andere
Stelle.
</layer>
<layer id="Gelb" class="Text" bgcolor="#FFFF66" top="10" left="310" width="300"
height="120">
<layer id="Gelbkopf" class="Kopf" bgcolor="#000000" top="0" left="0" width="300"
height="25">

1030

Kapitel 21: Dynamisches HTML

Titelleiste des gelben Layers

</layer>
Klicken Sie mal mit der Maus in die Titelleiste dieses Layers,
halten Sie die Maustaste gedrckt und ziehen Sie dann die Maus an eine andere
Stelle.
</layer>
<script type="text/javascript">
<!-Gruen = document.layers['Gruen'];
Gruentitel = document.layers['Gruen'].document.layers['Gruenkopf'].document;
Gelb = document.layers['Gelb'];
Gelbtitel = document.layers['Gelb'].document.layers['Gelbkopf'].document;
Gruentitel.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
Gruentitel.onmousedown=StartGruen;
Gruentitel.onmouseup=EndGruen;
document.layers['Gruen'].document.layers['Gruenkopf'].onload=GruenReset;
Gelbtitel.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
Gelbtitel.onmousedown=StartGelb;
Gelbtitel.onmouseup=EndGelb;
document.layers['Gelb'].document.layers['Gelbkopf'].onload=GelbReset;
function GruenReset()
{ Gruentitel.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function GelbReset()
{ Gelbtitel.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function StartGruen()
{ Gruentitel.captureEvents(Event.MOUSEMOVE); Gruentitel.onmousemove=ZiehGruen; }
function StartGelb()
{ Gelbtitel.captureEvents(Event.MOUSEMOVE); Gelbtitel.onmousemove=ZiehGelb; }
function ZiehGruen(Ereignis)
{ Gruen.left = Ereignis.pageX; Gruen.top = Ereignis.pageY; }
function ZiehGelb(Ereignis)
{ Gelb.left = Ereignis.pageX; Gelb.top = Ereignis.pageY; }
function EndGruen()
{ Gruentitel.onmousemove=0; Gruentitel.releaseEvents(Event.MOUSEMOVE); }
function EndGelb()
{ Gelbtitel.onmousemove=0; Gelbtitel.releaseEvents(Event.MOUSEMOVE); }
//-->
</script>
</body></html>

21.4 Das ltere DHTML-Modell von Netscape

1031

Im Beispiel werden insgesamt vier Layer definiert, davon zwei uere (mit id="Gruen" bzw.
id="Gelb") und zu jedem jeweils ein innerer (mit id="Gruenkopf" bzw. id="Gelbkopf").
Die inneren Layer sind so gestaltet, dass sie wie Titelleisten zu den jeweils ueren Layern wirken, daher auch die id-Namen.

21.16: Mit gedrckter Maustaste verschieben Sie die Layer an eine neue Position.

Wie Sie erkennen knnen, steht nirgendwo bei der Layer-Definition oder innerhalb eines der
Layer ein JavaScript-Aufruf. Dennoch sind die beiden Titelleisten sensitiv: Wenn der Anwender mit der Maus darauf klickt, die Maustaste gedrckt hlt und die Maus bewegt, bewegt sich
der gesamte zugehrige uere Layer mit. Der Grund dafr ist das Konzept des event-Objekts.
Es bentigt keine Event-Handler innerhalb von HTML, um JavaScript-Aktionen anzustoen.
Der JavaScript-Bereich des obigen Beispiels enthlt dafr einige ungewohnte Dinge. Er wird
unterhalb der Layer definiert, weil gleich bei seinem Einlesen Code ausgefhrt wird, der sich auf
die definierten Layer bezieht. Die Layer mssen zu diesem Zeitpunkt bereits eingelesen sein,
sonst gibt es eine Fehlermeldung.
Die ersten vier Zeilen des JavaScript-Codes im Beispiel speichern einfach nur ziemlich lange
Objekt-Eigenschaften-Ketten in Variablen, da diese im weiteren Verlauf hufig notiert werden
mssen. Danach folgen jeweils vier Anweisungen, und zwar je fr den grnen Layer und fr den
gelben. Die Methode captureEvents() bewirkt, dass Anwenderaktionen berwacht und bei
Eintritt gemeldet werden. Die Methode captureEvents() erwartet als Parameter einen Wert.
Notieren Sie dazu nach dem Prinzip Event.WELCHER die Events, die berwacht werden sollen.
Die gewnschten Events sind durch bitweises Oder (einfacher Vertikalstrich) zu trennen. Welche
Events es neben denen im obigen Beispiel gibt, erfahren Sie in der JavaScript Objekt-Referenz
beim Objekt event (Kapitel 20.18).

1032

Kapitel 21: Dynamisches HTML

Beim Eintritt von berwachten Ereignissen werden Funktionen aufgerufen. Beachten Sie dabei
die etwas merkwrdige Syntax: Mit einer Anweisung wie Gruentitel.onmousedown=StartGruen
wird die selbst geschriebene Funktion StartGruen() aufgerufen, die weiter unten im Script
definiert ist. Beim Aufruf drfen Sie in diesem Fall jedoch keine Klammern hinter dem Funktionsnamen notieren!
Verfolgen Sie nun mal im Beispiel den Fall, dass der Anwender auf die Titelleiste des grnen
Layers klickt. Dann wird das Ereignis MOUSEDOWN fr Gruentitel gemeldet. Fr diesen Fall
(onmousedown) wird die Funktion StartGruen aufgerufen. Innerhalb dieser Funktion wird wiederum berwacht, ob der Anwender die Maus bei gedrckter Maustaste bewegt. Wenn ja, wird
dort nach dem gleichen Schema die Funktion ZiehGruen aufgerufen. Obwohl die Funktion
keinen Parameter bergeben bekommt, erwartet sie einen auch das gegen alle sonstige Regeln.
Der erwartete Parameter ist aber kein Wert wie sonst blich, sondern einfach ein Name fr
den aktuellen Event. Im Beispiel wurde der Name Ereignis gewhlt. Unter dem vergebenen
Namen lassen sich Eigenschaften des event-Objekts ansprechen. Da innerhalb der Funktion
ZiehGruen davon Gebrauch gemacht wird, ist ein solcher Name erforderlich. Aktiv ist die
Funktion ZiehGruen so lange, wie der Anwender die Maustaste bewegt und nicht loslsst. Whrend dieser Zeit werden so oft wie mglich die Eigenschaften PageX (aktuelle Mausposition
von links) und PageY (aktuelle Mausposition von oben) von Ereignis abgefragt. Diese Werte
werden dem betroffenen Layer dynamisch als neue Werte fr die linke obere Ecke zugewiesen.
So entsteht der Bewegungseffekt.
Wenn der Anwender die Maustaste loslsst, wird die Funktion ZiehGruen sofort verlassen. Da
die Event-berwachung ja noch aktiv ist, wird jetzt das Ereginis MOUSEUP gemeldet. Fr diesen
Fall wird die Funktion EndGruen aufgerufen. Diese Funktion enthlt zwei Befehle zum Aufrumen.
Wenn Sie sonst nichts weiter unternehmen wrden, wre der Layer nach dem ersten Bewegen
nicht mehr bewegungsfhig. Damit er immer wieder bewegbar ist, tritt automatisch ein LoadEreignis ein. Dieses wird mit onload abgefangen. Dabei wird die Funktion GruenReset aufgerufen. Diese Funktion startet die erneute berwachung der Ereignisse. Analog zu dem Handling
fr den grnen Layer wird mit dem Handling fr den gelben Layer verfahren.

21.4.9

Inline-Scripts bei Layern

Netscape bietet eine vereinfachte JavaScript-Syntax an, um Layer-Eigenschaften innerhalb eines

Layers dynamisch zu ndern. Ein Beispiel:
<html><head><title>Test</title>
<style type="text/css">
<!-layer { padding:1mm; }
p.Verweis { font-size:10pt; font-weight:bold; font-family:Arial; color:yellow; }
p.Text { font-size:10pt; font-family:Arial; color:white; }
-->
</style>
</head><body>
<layer class="Kopf" bgcolor=#000000 top="175" left="50" width="500" height="200"
clip="0,0,500,25" onMouseover="Zeigen()" onMouseout="Verstecken()">

21.4 Das ltere DHTML-Modell von Netscape

1033

<p class="Verweis">Was Sie schon immer wissen wollten ber ...</p>

<p class="Text"><span style="color:red; font-size:48pt">SECHS</span><br>
Es handelt sich dabei einfach um eine Zahl, die exakt ein halbes Dutzend
bezeichnet.</p>
<script type="text/javascript">
<!-function Zeigen() { clip.bottom = 200; }
function Verstecken() { clip.bottom = 25; }
//-->
</script>
</layer>
</body></html>

Im Beispiel wird ein Layer definiert. Mit einer Angabe zu clip= wird der Anzeigebereich des
Layers jedoch zunchst beschnitten, und zwar so, dass gerade der erste Textabsatz sichtbar ist.
Wenn der Anwender mit der Maus ber den sichtbaren Layer-Bereich fhrt, wird die JavaScriptFunktion Zeigen() aufgerufen. Diese Funktion verndert den Clip-Bereich des Layers so, dass
er in ganzer Gre angezeigt wird. Wenn die Maus den Layer-Bereich wieder verlsst, wird die
Funktion Verstecken() aufgerufen. Diese Funktion ndert den Clip-Bereich wieder auf den
Anfangswert.

21.17: Beim berfahren mit der Maus klappt das Layer auf.

Wichtig ist bei dieser Form, dass der JavaScript-Bereich innerhalb des Layers definiert wird.
Dann brauchen Sie sich nicht um die korrekte Adressierung des Layers mit Indexnummern oder
Namen zu kmmern. Sie knnen einfach Anweisungen wie clip.bottom=[Wert] (wie im Beispiel) oder Anweisungen wie top=, left= oder bgColor= notieren, um Wirkungsweise und

1034

Kapitel 21: Dynamisches HTML

Aussehen des Layers zu verndern. Welche Eigenschaften Sie ndern knnen, entnehmen Sie der
Referenz zum Objekt layers (Kapitel 20.16).

21.5
21.5.1

Datenanbindung (nur Microsoft)

Allgemeines zur Datenanbindung

Der MS Internet Explorer ab Version 4.x erlaubt es, in kontrollierter Form Daten aus einer
externen Datenquelle zu holen und in HTML-Elementen dynamisch anzuzeigen. So ist beispielsweise eine Tabelle denkbar, in der sich der Anwender bei jedem Klick auf einen entsprechenden Button die Bundesliga-Endtabellen der Spielsaisons von 1960 bis heute anzeigen lassen
kann. Bei jedem Klick werden aus einer externen Datei eine Reihe von Daten ausgelesen und
dynamisch in die Anzeigetabelle bernommen.
Microsoft hat das Konzept der Datenanbindung sehr flexibel ausgelegt. Es gibt diverse Mglichkeiten, auf externe Datenquellen zuzugreifen. Der Zugriff auf eine einfache Textdatei ist nur eine
davon. Es besteht ebenso die Mglichkeit, etwa ber die Datenbankabfragesprache SQL auf eine
Datenbank zuzugreifen, die SQL-Befehle verarbeiten kann. Fr die verschiedenen Mglichkeiten
der Datenanbindung gibt es verschiedene Datenmodelle. Fr jedes der Datenmodelle gibt es ein
bestimmtes ActiveX-Control oder ein Java-Applet, das Sie in Ihrer HTML-Datei ansprechen
mssen, um die Datenanbindung damit zu realisieren. Die Datenmodelle und deren Einbindung
in HTML werden auf dieser Seite vorgestellt.
Die Vorteile der Datenanbindung liegen auf der Hand: Daten knnen mit einer dafr geeigneten
Anwendung gepflegt und gespeichert werden. Eine HTML-Datei kann auf immer aktuelle Daten
zugreifen, ohne selbst gendert werden zu mssen. Fr das Holen der Daten gibt es kein vorgeschriebenes Protokoll. Die Datenanbindung funktioniert also auf allen Umgebungen, ob auf
einem WWW-Server, lokal auf einer PC-Festplatte oder auf einer CD-ROM (zumindest auf das
einfachste Datenmodell trifft dies zu). Es ist kein zustzliches CGI-Script erforderlich, das als
Vermittler zwischen HTML-Datei und Datenbestand fr jede Interaktion zwischen Anwender
und Datenbank immer wieder aufgerufen werden muss. Das Know-how hat der Browser, und
die Steuerung der Datenanbindung wird direkt in der HTML-Datei notiert. Durch dynamisches
Austauschen der Inhalte von HTML-Elementen, in denen die Daten angezeigt werden, ist kein
neuer Aufbau der WWW-Seite erforderlich.
Aus heutiger Sicht muss das Modell der clientseitigen Datenanbindung, das Microsoft mit dem
Internet Explorer 4.0 eingefhrt hat, jedoch kritisch betrachtet werden. Der Grund ist einerseits,
dass es auf extrem proprietren Konzepten beruht, vor allem was die Einbindung der allgemein
unbeliebten ActiveX-Controls betrifft. Und andererseits haben sich Web-Server mittlerweile so
stark durchgesetzt, dass es in in den meisten Fllen auch lokal sinnvoller ist, serverseitige
CGI-Scripts zum Handling der Datenverarbeitung einzusetzen.
Hinweis: Die Erluterungen zu den Datenmodellen weiter hinten in diesem Kapitel sind zum
Teil sehr technisch. Das ist leider nicht zu ndern, da die Materie ziemlich komplex ist. Die
Erluterungen zu den Datenmodellen richten sich auch nur an Spezialisten, die wissen, was mit
den entsprechenden Begriffen anzufangen ist.

21.5 Datenanbindung (nur Microsoft)

21.5.2

1035

Beispiel: Datei dynamisch in Tabelle einbinden

Die hier beschriebene Vorgehensweise erlutert, wie Sie in einer Tabelle einzelne Datenstze aus
einer externen Textdatei anzeigen knnen. Dabei wird das Datenmodell Tabular Data Control
(TDC) verwendet. Mit Hilfe von Buttons kann der Anwender den nchsten oder vorhergehenden Datensatz in die Tabelle laden.

21.18: Die Web-Seite im Beispiel greift auf eine externe Adressdatei im Textformat zu.

Beispiel Teil 1 externe Datei adressen.txt mit Daten:

Name|Vorname|Strasse|PLZ|Ort|Tel|EMail
Berger|Hans|Pfisterstr.11|38487|Grubenhausen|04987-4445631|[email protected]
Heidenfroh|Martina|Mittelweg 123|43985|Hatzenau|04583-2398474|[email protected]
Rauhbein|Eberhard|Traumstr.13|56097|Hllenbachhausen|068347-582374|Truthahn|Gerlinde|Aufplatz 1|93722|Sndenstadt|032987-385750|[email protected]

Die externe Datei ist in diesem Beispiel eine einfache Textdatei, z.B. eine Datei mit dem Namen
adressen.txt. Die Datei ist so aufgebaut, dass jede Zeile einen Datensatz darstellt. Die einzelnen
Felder eines Datensatzes werden in diesem Beispiel durch das Zeichen | getrennt. Es knnte
auch ein anderes Zeichen sein. Das Zeichen | wurde hier gewhlt, weil es sehr selten ist und in
den Daten selbst nicht vorkommt. In der ersten Zeile der Datei stehen keine Daten, sondern
Feldnamen. Der dritte Feldname lautet beispielsweise Strasse. In den eigentlichen Datenzeilen
darunter stehen dann in entsprechender Reihenfolge die Daten. So hat das dritte Feld der ersten
Datenzeile den Wert Pfisterstr.11. Dies ist also ein Wert fr den in der ersten Zeile an dritter
Stelle vergebenen Feldnamen Strasse.
Textdateien dieser Art sind nicht besonders komfortabel, wenn man sie selbst in einem Texteditor bearbeiten will. Doch solche Textdateien lassen sich mit fast allen Tabellenkalkulations- und
Datenbankprogrammen erzeugen. Meist ist dafr der Datentyp kommabegrenzt (comma
delimited) mit der Standard-Dateiendung .csv vorgesehen. Bessere Programme erlauben es
dabei auch, ein selbst definierbares Feldbegrenzerzeichen zu vergeben.

1036

Kapitel 21: Dynamisches HTML

Beispiel Teil 2 HTML-Datei mit Datenzugriff:

<html><head><title>Test</title></head>
<body>
<object id="Adressen" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="adressen.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value="|">
</object>
<form action="">
<table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1" width="100%"
border="1">
<colgroup><col width="200"><col></colgroup>
<tr>
<td bgcolor="#EEEEEE"><b>Adressen</b></td>
<td bgcolor="#EEEEEE" align="right">
<input type="button" value=" &lt; "
onclick="document.all.Anzeigetabelle.previousPage();">
<input type="button" value=" &gt; "
onclick="document.all.Anzeigetabelle.nextPage();">
</td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Name:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Name"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Vorname:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Vorname"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Strae:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Strasse"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Postleitzahl:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="PLZ"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Wohnort:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Ort"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>Telefon:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="Tel"></span></td>
</tr><tr>
<td bgcolor="#EEEEEE" valign="top"><b>E-Mail:</b></td>
<td bgcolor="#FFFFE0" valign="top"><span datafld="EMail"></span></td>
</tr></table></form>
</body>
</html>

Um eine externe Datenquelle in einer HTML-Datei nutzen zu knnen, mssen Sie zunchst die
Quelle und diverse Angaben zu deren Aufbau notieren. Dazu brauchen Sie das <object>-Tag.

21.5 Datenanbindung (nur Microsoft)

1037

In dem einleitenden <object>-Tag sind zwei Attribute erforderlich: Mit der Angabe id= vergeben Sie einen Namen, unter dem Sie spter auf die Daten zugreifen knnen. Der Name sollte
passend sein, im obigen Beispiel etwa "Adressen". Als zweiten Parameter mssen Sie das ActiveX-Control referenzieren, das den gesamten Zugriff auf die externe Datei abwickelt. Bei einfachen Textdateien mit zeilenweisen Datenstzen mssen Sie dabei immer die Angabe classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" notieren. Das ActiveX-Control mit
dieser Identifikationsnummer ist im Lieferumfang des MS Internet Explorers ab Version 4.x enthalten Sie brauchen sich um nichts weiter zu kmmern. Genau dabei liegt allerdings der
Knackpunkt des gesamten Konzepts: Ohne solche ActiveX-Controls luft nichts.
Innerhalb des <object>-Tags notieren Sie Angaben zu Ort und Beschaffenheit der externen
Datei.
Mit <param name="DataURL" knnen Sie die gewnschte Datei ansprechen. Hinter value=
notieren Sie den Dateinamen. Wenn sich die Datei im gleichen Verzeichnis befindet, gengt
der einfache Dateiname. Ansonsten gelten die gleichen Regeln wie bei Verweisen in HTML.
Mit <param name="UseHeader" value="true"> weisen Sie den Browser an, die erste Zeile
der externen Datei nicht als Datenzeile zu interpretieren, sondern als Zeile fr die Definition
der Feldnamen.
Mit <param name="FieldDelim" geben Sie an, welches das Feldtrennzeichen sein soll. Im
Beispiel ist dies das Zeichen "|".
Damit sind alle Voraussetzungen geschaffen, um die Daten aus der externen Datei dynamisch in
HTML anzuzeigen. Die Anzeige der Daten erfolgt in einer Tabelle. Das einleitende <table>-Tag
schafft die ntigen Voraussetzungen, um die Daten in kontrollierter Form anzuzeigen. Zunchst
wird in der Tabelle mit id= ein Name vergeben (im Beispiel: Anzeigetabelle). Dieser Name
wird bei den Buttons bentigt, die innerhalb der Tabelle das Blttern innerhalb der Datenstze
ermglichen.
Die nchste Angabe im <table>-Tag ist datasrc= (data source, Datenquelle). Damit nehmen Sie
Bezug auf die externe Datendatei. An dieser Stelle drfen Sie jedoch nicht die Datendatei selbst
angeben, sondern Sie mssen denjenigen Namen angeben, den Sie zuvor im <object>-Tag bei
id= vergeben haben. Und zwar mit einem vorangestellten Gatterzeichen #. Dadurch stellen Sie
den Bezug zwischen Tabelle und Datenquelle her. Es werden dann alle Parameter bercksichtigt,
die Sie innerhalb des <object>-Tags angegeben haben.
Ebenfalls wichtig ist die Angabe datapagesize= (Datenseitengre) im <table>-Tag. Damit
geben Sie an, wie viele Datenstze aus der externen Datei gleichzeitig angezeigt werden sollen.
Wenn Sie diese Angabe weglassen, macht der MS Internet Explorer die Tabelle automatisch so
lang, dass alle Datenstze auf einmal darin dargestellt werden. Im obigen Beispiel wird datapagesize="1" angegeben. Dadurch wird immer genau ein Datensatz angezeigt.
Innerhalb der Tabelle knnen Sie erkennen, wie ein Datensatz aus der externen Datenquelle
darin angezeigt wird. Die Tabelle selbst knnen Sie nach Ihren Wnschen frei gestalten. Wichtig
ist nur zu wissen, wie der Bezug zu einem Datensatz der externen Datei hergestellt wird. Im obigen Beispiel geschieht dies innerhalb entsprechender Tabellenzellen mit Hilfe des <span>-Tags.
Mit einem Befehl wie <span datafld="PLZ"></span> weisen Sie den Browser an, in der betreffenden Tabellenzelle den aktuellen Inhalt des Feldes "PLZ" aus der externen Datenquelle anzuzeigen (datafld = data field = Datenfeld). Dabei muss der Wert, den Sie hinter der Angabe

1038

Kapitel 21: Dynamisches HTML

datafld= notieren, mit dem Feldnamen bereinstimmen, den Sie in der ersten Zeile der exter-

nen Datendatei vergeben haben. Beachten Sie dabei auch die exakte Schreibweise.
Neben der Angabe datafld= knnen Sie in so einem Datenanzeigebereich auch noch die
Angabe dataformatas= (formatiere Daten als) notieren. Im obigen Beispiel wird davon kein
Gebrauch gemacht. Benutzen Sie dataformatas=, wenn die Daten in der externen Datei selbst
HTML-Tags enthalten. Mit dataformatas="html" erzwingen Sie dann, dass die Tags aus der
externen Datei als HTML-Tags interpretiert werden.
Da im obigen Beispiel mit datapagesize="1" festgelegt wurde, dass immer nur ein Datensatz
angezeigt wird, erscheint in der Tabelle zunchst der Inhalt der ersten Datenzeile der externen
Datei. Natrlich soll der Anwender nun in den Datenstzen blttern knnen. Dazu werden Buttons zum Vor- und Zurckblttern definiert. Im Beispiel befinden sich diese Buttons in der ersten Tabellenzeile. Sie knnten aber auch an einer anderen Stelle stehen.
Mit <input type=button value=" &lt; " onclick="document.all.Anzeigetabelle.
previousPage();"> wird ein Button definiert, bei dessen Anklicken der vorhergehende
Datensatz aufgerufen wird. Mit document.all.Anzeigetabelle greifen Sie dabei auf die
Tabelle zu, in der die Daten angezeigt werden (Anzeigetabelle ist dabei der Name, der in der
Tabelle mit id= vergeben wurde). Mit <input type=button value=" &gt; " onclick=
"document.all.Anzeigetabelle.nextPage();"> wird der Button definiert, der zum
nchsten Datensatz springt. Beachten Sie, dass Sie nicht kontrollieren mssen, ob der Anwender
gerade den ersten oder letzten Datensatz anzeigt. Es gibt keine Fehlermeldungen, wenn der
Anwender versucht, einen nicht vorhandenen Datensatz aufzurufen. Der Button hat dann
einfach keine Wirkung.

21.5.3

Beispiel: Daten durchsuchbar machen

In diesem Beispiel wird gezeigt, wie Sie dem Anwender ermglichen knnen, mit Hilfe eines
Suchbegriffes nur diejenigen Datenstze anzuzeigen, in denen der gesuchte Begriff vorkommt.
Das Beispiel zeigt auch, wie Sie mit Hilfe von Scripts auf die HTML-Elemente zur Datenanbindung zugreifen knnen.
Beispiel Teil 1 externe Datei woerterbuch.txt mit Daten:
Deutsch;Englisch;Franzoesisch;Italienisch;Spanisch
Rechner;computer;ordinateur;computer, calcolatore;ordenador
Maschine;machine (s);machine;macchina;mquina
Personalcomputer;personal computer;ordinateur personnel (m);computer
personale;ordenador personal
arbeitender Rechner;active computer;ordinateur active;computer attivo;ordenador
activado
... usw. ...

Die Datendatei dieses Beispiels zeigt ein mehrsprachiges Fachwrterbuch. In der ersten Zeile
werden die Sprachen definiert. Unterhalb davon stehen die Wrter in den jeweiligen Sprachen.
Die Eintrge zu den Sprachen sind durch Semikola (;) getrennt. Wenn in einer Sprache mehrere
Wrter in Frage kommen, werden diese durch Kommata getrennt, so wie in der zweiten Zeile
beim italienischen Wort fr Rechner: computer, calcolatore.

21.5 Datenanbindung (nur Microsoft)

1039

21.19: Der Internet Explorer sucht in der Textdatenbank.

Beispiel Teil 2 HTML-Datei mit Datenzugriff:

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-function Suchen() {
var Datensaetze = 1000;
document.all.Anzeigetabelle.style.display = "none";
var Suchausdruck = "";
var Suchbegriffe = 0;
if(document.Eingabe.SuchDeu.value != "") {
Suchausdruck = Suchausdruck + "Deutsch = " + document.Eingabe.SuchDeu.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchEng.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Englisch = " +
document.Eingabe.SuchEng.value;
else
Suchausdruck = Suchausdruck + "Englisch = " + document.Eingabe.SuchEng.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchFra.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Franzoesisch = " +
document.Eingabe.SuchFra.value;

1040

Kapitel 21: Dynamisches HTML

else
Suchausdruck = Suchausdruck + "Franzoesisch = " +
document.Eingabe.SuchFra.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchIta.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Italienisch = " +
document.Eingabe.SuchIta.value;
else
Suchausdruck = Suchausdruck + "Italienisch = " +
document.Eingabe.SuchIta.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchSpa.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Spanisch = " +
document.Eingabe.SuchSpa.value;
else
Suchausdruck = Suchausdruck + "Spanisch = " + document.Eingabe.SuchSpa.value;
Suchbegriffe++;
}
document.all.Begriffe.object.Filter = Suchausdruck;
document.all.Begriffe.Reset();
document.all.Anzeigetabelle.dataSrc = "#Begriffe";
if(document.all.Begriffe.recordset.recordCount < Datensaetze) {
document.all.Anzeigetabelle.dataPageSize = Begriffe.recordset.recordCount;
document.all.Treffer.innerText = Begriffe.recordset.recordCount + "
Suchtreffer!";
document.all.Anzeigetabelle.style.display = "block";
}
else
document.all.Treffer.innerText = "0 Suchtreffer!";
}
//-->
</script>
</head>
<body>
<object id="Begriffe" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="woerterbuch.txt">
<param name="UseHeader" value="true">
<param name="Filter" value="">
<param name="FieldDelim" value=";">
</object>
<p>Die durchsuchbare Datenbank enthlt 1000 Eintrge. Suchen Sie nach
Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen
werden die Eingaben logisch durch UND verknpft. Sie drfen auch das
Wildcardzeichen <b>*</b> fr Teilausdrcke verwenden. Suchen Sie z.B. mal im Feld

21.5 Datenanbindung (nur Microsoft)

1041

(Deutsch) nach <b>Arbeits*</b> oder im Feld (Italienisch) nach

<b>*ore</b> oder im Feld (Englisch) nach <b>*computer</b>.</p>
<form name="Eingabe" action="">
Suche nach:<br>
<input name="SuchDeu" type="text" width="40"> (Deutsch)<br>
<input name="SuchEng" type="text" width="40"> (Englisch)<br>
<input name="SuchFra" type="text" width="40"> (Franzoesisch)<br>
<input name="SuchIta" type="text" width="40"> (Italienisch)<br>
<input name="SuchSpa" type="text" width="40"> (Spanisch)<br>
<input type="button" style="width:150px; height:25px;" value="Suche starten"
onClick="Suchen()">
</form>
<table border="1" cellpadding="1" cellspacing="0"><tr><td>
<table width="100%">
<tr>
<td valign="top" colspan="5">
<span id="Treffer" style="color:#0000CC; font-weight:bold;"> </span>
</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Deutsch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Englisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Franzsisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Italienisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Spanisch:</b></td>
</tr>
</table>
<table id="Anzeigetabelle" style="display:none" width="100%">
<tr>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Deutsch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span
datafld="Englisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span
datafld="Franzoesisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span
datafld="Italienisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span
datafld="Spanisch"></span></td>
</tr>
</table>
</td></tr></table>
</body>
</html>

Das Beispiel zeigt die vollstndige HTML-Datei zur Realisierung einer durchsuchbaren Datenbank. Innerhalb der HTML-Datei wird wie im Beispiel Datei dynamisch in Tabelle einbinden
(Kapitel 21.5.2) wieder das <object>-Tag notiert, um die Verbindung zu der externen Datendatei herzustellen. Es wird jedoch ein neuer Parameter angegeben: <param name="Filter"

1042

Kapitel 21: Dynamisches HTML

value=""> Mit dem Parameter Filter knnen Sie die Datenstze, die aus der Datendatei
geholt werden, begrenzen. Dazu knnen Sie bei value= Einschrnkungskriterien angeben. Bei
der Objektdefinition im obigen Beispiel wird value="" notiert. Das bedeutet, es gibt keine

Einschrnkungen. Alle Datenstze werden gefunden.

In dem lngeren Script, das im Kopf der HTML-Datei steht, wird der Wert fr Filter dynamisch verndert. Dadurch wird die Anzeige auf bestimmte Datenstze eingeschrnkt, nmlich
solche, die den Filterkriterien entsprechen. Die Kriterien fr den Filter soll der Anwender durch
seine Suchanfrage selbst bestimmen knnen. Im obigen Beispiel wird dazu unterhalb des
<object>-Tags ein Formular definiert (<form name="Eingabe" action="">). Das Formular
hat fnf Eingabefelder, eines fr jede der fnf Sprachen des mehrsprachigen Wrterbuchs. Mit
einem anklickbaren Button kann der Anwender die Suche abschicken. Beim Anklicken des Buttons wird die Funktion Suchen() aufgerufen, die in dem JScript-Bereich im Dateikopf definiert
ist (onClick="Suchen()").
Innerhalb der Funktion Suchen() wird zunchst eine Variable Datensaetze mit einem Wert
vorbelegt (1000). Das empfiehlt sich bei greren Datenbestnden. Denn per Voreinstellung
liefert der MS Internet Explorer, wenn er keine Datenstze findet, die dem Suchkriterium entsprechen, alle Datenstze zurck. Angenommen, Sie haben 5000 Datenstze. Dann wrde eine
Tabelle mit 5000 Zeilen angezeigt. Da dies im Aufbau ziemlich lange dauert, ist eine Begrenzung
sinnvoll.
Die Variable Suchausdruck soll die Anwenderkriterien zum Durchsuchen des Datenbestandes
aufnehmen. Dabei ist es erforderlich, die Angaben aus den Formularfeldern in eine Zeichenkette
zu konvertieren, die den Regeln fr den Parameter Filter entsprechen.
Folgende wichtige Regeln gelten fr Werte, die bei Filter erlaubt sind (diese Regeln gelten
sowohl bei Wertzuweisungen innerhalb des <object>-Tags als auch bei dynamischen Wertzuweisungen innerhalb von Scripts):
Mit Feldname = Wert werden nur Datenstze gefunden, bei denen das Feld Feldname exakt
den Wert Wert enthlt und nicht mehr und nicht weniger. Bei Name = Meyer werden also nur
Meyers gefunden, keine Meyerbohms.
Mit Feldname <> Wert werden Datenstze gefunden, bei denen der Wert Wert im Feld Feldname vorkommt er kann auch exakt damit bereinstimmen. Bei Name <> Meyer werden also
Meyers und Meyerbohms gefunden.
Mit Feldname > Wert werden Datenstze gefunden, bei denen der Wert von Feldname grer
ist als Wert. Bei Name > Y werden also nur Namen gefunden, die mit Z anfangen.
Mit Feldname >= Wert werden Datenstze gefunden, bei denen der Wert von Feldname grer oder gleich ist im Vergleich zu Wert. Bei Name >= Y werden also nur Namen gefunden, die
mit Y oder Z anfangen.
Mit Feldname < Wert werden Datenstze gefunden, bei denen der Wert von Feldname kleiner ist als Wert. Bei Name < D werden also nur Namen gefunden, die mit A,B oder C anfangen.
Mit Feldname <= Wert werden Datenstze gefunden, bei denen der Wert von Feldname
kleiner oder gleich ist im Vergleich zu Wert. Bei Name <= D werden also Namen gefunden, die
mit A,B,C oder D anfangen.

21.5 Datenanbindung (nur Microsoft)

1043

An jeder Stelle ist ein Platzhalterzeichen erlaubt. Dies ist ein Stern-Zeichen (*). Es steht fr
kein, ein oder beliebig viele Zeichen.
Sie knnen auch zwei oder mehrere solcher einfachen Ausdrcke mit den Zeichen & (fr
UND) oder | (fr inklusives ODER) logisch verknpfen. Wenn Sie mehrere Ausdrcke verknpfen und dabei sowohl UND also auch ODER verwenden, mssen Sie Klammern verwenden, um eine eindeutige Bewertung des gesamten Kriteriums sicherzustellen. Ein komplexer Ausdruck dieser Art ist etwa Name > M & PLZ = 8*.
Im obigen Script wird mit diversen if-Abfragen aus den Eingabefeldern des Formulars ein gltiger Zuweisungswert fr Filter konstruiert. Dabei wird nur die einfachste Bedingung mit dem
Gleichheitszeichen eingesetzt. Da der Anwender auch selbst das Stern-Zeichen als Platzhalterzeichen in einem Eingabefeld eingeben kann, gengt diese einfache Suche fr viele Flle. Wenn
Sie dem Anwender komplexere Suchabfragen ermglichen wollen, mssen Sie diesen Teil des
Scripts entsprechend aufwndiger gestalten.
Im unteren Teil der Funktion Suchen() steht dann der Befehl:
document.all.Begriffe.object.Filter = Suchausdruck;

Damit wird dem Parameter Filter des <object>-Tags der Suchausdruck zugewiesen, der zuvor
ermittelt und in der Variablen Suchausdruck gespeichert wurde. Der nchste Befehl ist ebenfalls
von entscheidender Bedeutung:
document.all.Begriffe.Reset();

Damit veranlassen Sie den Browser, die Anzahl der anzuzeigenden Datenstze neu zu ermitteln.
Da mittlerweile ein Filter bestimmt wurde, findet der Browser nun nur noch Datenstze, die den
Bedingungen des Filters entsprechen. Auf die brigen Anweisungen des Scripts und die Elemente
in der HTML-Datei wird hier nicht nher eingegangen. Es handelt sich dabei um einfaches
dynamisches HTML nach den Regeln des MS Internet Explorers 4.x.

21.5.4

HTML-Elemente fr die Anzeige von externen Daten

Im Beispiel Datei dynamisch in Tabelle einbinden in Kapitel 21.5.2 werden die externen Daten
jeweils in einem span-Element angezeigt. Es gibt eine Reihe weiterer HTML-Elemente, in denen
Sie Daten aus Datenfeldern externer Datenquellen anzeigen knnen. In anderen als diesen Elementen ist die Anzeige externer Daten nicht mglich. Folgende HTML-Elemente sind erlaubt:

Verweise mit <a>...</a>

Angenommen, Sie haben eine externe Textdatei verweis.txt mit folgenden Zeilen:
URL,Verweistext
http://www.yahoo.de/,Yahoo Suchdienst

Diese Datei knnen Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Verweis" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="verweis.txt">
<param name="UseHeader" value="true">

1044

Kapitel 21: Dynamisches HTML

<param name="FieldDelim" value=",">

</object>

Danach knnen Sie folgenden Verweis konstruieren:

<a datasrc="#Verweis" datafld="URL"><span datafld="Verweistext"
datasrc="#Verweis"></span></a>

Indem Sie <a datafld=> notieren, wird der Inhalt, den das Datenfeld liefert, als Angabe fr
href= bewertet (im Beispiel liefert das Feld "URL" diese Angaben). Innerhalb des Verweises wird
dann mit Hilfe des span-Elements das andere Feld geholt, nmlich der Verweistext. Solche
Verweise machen beispielsweise Sinn, wenn Sie den gleichen Verweis an vielen verschiedenen
Stellen auf Ihren Web-Seiten nutzen. Verweisziel und Verweistext sind dann zentral gespeichert
und brauchen bei nderungen nur in der kleinen Textdatei einmal gendert werden. Alle entsprechenden HTML-Verweise sind damit automatisch aktualisiert.

Buttons mit <button>...</button>

Angenommen, Sie haben eine externe Textdatei daten.txt mit folgendem Aufbau und Beispieleintrgen:
Zeile,Text
1,Das ist ein Test
2,mit einem Button
3,spannend - was?

Diese Datei knnen Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>

Danach knnen Sie beispielsweise folgende Tabelle konstruieren:

<table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr><td>
<form action=""><button datafld="Text"
onClick="document.all.Anzeige.nextPage()"></button></form>
</td></tr></table>

Damit springt der Anwender bei jedem Klick auf den Button einen Datensatz weiter, und die
Buttonbeschriftung nimmt den aktuellen Wert des Datenfeldes Text an.

Bereiche mit <div>...</div>

Mit diesem HTML-Tag knnen Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel Datei dynamisch in Tabelle einbinden (Kapitel 21.5.2) mit dem
span-Element gemacht wird. Der Unterschied zwischen <div>...</div> und <span>...
</span> ist, dass das div-Element einen eigenen Anzeigeblock erzeugt, das span-Element dagegen nicht.

21.5 Datenanbindung (nur Microsoft)

1045

Grafiken mit <img>

Angenommen, Sie wollen eine kleine Diashow programmieren. Dazu knnen Sie eine Textdatei
daten.txt anlegen, die etwa folgenden Aufbau hat:
Nummer,Bild
1,meinhaus.gif
2,meinboot.gif
3,meinauto.gif
4,undich.gif

Diese Datei knnen Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>

Danach knnen Sie beispielsweise folgende Tabelle konstruieren:

<table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr>
<td>
Bild <span datafld="Nummer"></span><br> <input type=button value=" &lt; "
onclick="document.all.Anzeige.previousPage();">
<input type=button value=" &gt; " onclick="document.all.Anzeige.nextPage();">
</td><td>
<img datafld="Bild">
</td></tr></table>

Damit kann der Anwender mit den Bltter-Buttons die Bilder durchblttern.

Frames mit <frame>

Angenommen, Sie haben eine externe Textdatei besteseite.txt mit folgenden Zeilen:
BesteSeite
http://selfhtml.teamone.de/

Nun knnen Sie folgende HTML-Datei mit einem Frameset konstruieren:

<html><head>
<object id="UrlDerWoche" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="besteseite.txt">
<param name="UseHeader" value="true">
</object></head>
<frameset rows="100,*">
<frame src="meine.htm">
<frame datasrc="#UrlDerWoche" datafld="BesteSeite">
</frameset>
</html>

1046

Kapitel 21: Dynamisches HTML

Auf diese Weise knnen Sie in einem Frame-Fenster eine Seite anzeigen, deren Zieladresse Sie in
der separaten Textdatei pflegen. Wichtig ist, dass Sie das object-Element genau an der Stelle
platzieren wie im Beispiel.

Eingebettete Frames mit <iframe>

Siehe das Beispiel bei Frames. Der Unterschied ist, dass Sie das object-Element in einer normalen HTML-Datei platzieren. Mit einem Befehl wie:
<iframe datasrc="#UrlDerWoche" datafld="BesteSeite"></iframe>

knnen Sie dann in der gleichen HTML-Datei in einer eingebetteten Fensterbox den Inhalt der
Seite anzeigen, die in der Textdatei angegeben ist.

Labels mit <label>...</label>

Das label-Element, das neu ist in HTML 4.0, erlaubt die Beschriftung eines Formularfeldes. Im
Rahmen der Datenanbindung knnen Sie dieses HTML-Tag benutzen, wenn Sie die externen
Daten in Formularfeldern ausgeben. Sie knnen dann dem label-Element, das Sie etwa einem
Eingabefeld zuordnen, dynamisch den Feldnamen zuweisen, der in der externen Datendatei fr
dieses Feld definiert ist. Wenn sich der Feldname in der Datendatei dann ndert, wird er bei der
Anzeige in der HTML-Datei automatisch aktualisiert. Beispiel:
<label for="Vorname" datafld="prename"></label>

Dadurch wird dem Inhalt des label-Elements eines Formularfeldes der Feldname prename
zugewiesen, der in der Datenbank definiert ist.

Lauftexte mit <marquee>...</marquee>

Mit diesem HTML-Element, das mittlerweile allerdings als Musterbeispiel proprietrer HTMLErweiterungen verschrieen ist, knnen Sie beispielsweise innerhalb einer Tabelle externe Daten
ausgeben, genau so, wie es im Beispiel Datei dynamisch in Tabelle einbinden (Kapitel 21.5.2) mit
dem span-Element gemacht wird. Der Unterschied zwischen <marquee>...</marquee> und
<span>...</span> ist, dass das marquee-Element einen Lauftext erzeugt, das span-Element
dagegen nicht.

Bereiche mit <span>...</span>

Mit diesem HTML-Tag knnen Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so, wie es im Beispiel Datei dynamisch in Tabelle einbinden (Kapitel 21.5.2)

Formularfelder mit <input>

Mit diesem HTML-Element knnen Sie beispielsweise innerhalb einer Tabelle externe Daten in
editierbaren Formularfeldern ausgeben. Das ist besonders dann interessant, wenn genderte
Daten auch tatschlich in die Datenquelle zurckgeschrieben werden knnen. Bei einfachen
Textdateien ist das derzeit nicht mglich, wohl aber beim Datenmodell Remote Data Service
(RDS) und beim Datenmodell JDBC DataSource Applet.

21.5 Datenanbindung (nur Microsoft)

1047

Die Einbindung in HTML erfolgt hnlich wie im Beispiel Datei dynamisch in Tabelle einbinden
(Kapitel 21.5.2), mit dem Unterschied, dass Sie die Regeln zum Einbinden des gewnschten
Datenmodells beachten mssen. Notieren Sie im einleitenden <table>-Tag der Tabelle, in der
Sie die Datenstze anzeigen, mglichst die Angabe datapagesize="1". Innerhalb der Tabellenzelle, in der Sie externe Daten auf diese Weise anzeigen wollen, knnen Sie dann notieren (angenommene Beispiele):
<input type="text" datafld="Vorname">

oder:
<input type="radio" name="Kunde" value="Bereits Kunde" datafld="BereitsKunde">

oder:
<input type="checkbox" name="Zahlweise" value="Mastercard" datafld="Zahlungsweise">

Datenfelder, die in Eingabefeldern vom Typ <input type="text"> angezeigt werden, knnen
normale Texte sein, wie etwa ein Name. Radiobuttons und Checkboxen stellen dagegen andere
Anforderungen. Ein Radiobutton wird bei der Anzeige dann aktiviert, wenn der aktuelle Feldinhalt in der Datenbank mit dem Wert bereinstimmt, der hinter der Angabe value= steht. Eine
Checkbox wird dann markiert, wenn der betreffende Feldinhalt in der Datenbank 1, true oder
einen beliebigen Inhalt mit mehr als einem Zeichen enthlt. Wenn der Inhalt 0, false oder leer ist,
wird die Checkbox nicht markiert.

Formularfelder mit <select>

Dabei gelten die gleichen Bedingungen wie bei Formularfeldern vom Typ input. Wenn der Wert
eines aktuellen Eintrags in der Datenbank mit einem der Werte bereinstimmt, die in der
value-Angabe bei einem option-Element innerhalb der Auswahlliste definiert sind, ist diese
Auswahl selektiert. Interessant ist diese Ausgabemglichkeit von externen Daten wie bei anderen
Formularfeldern nur, wenn auch ein Zurckschreiben genderter Daten mglich ist. Bei Auswahllisten etwa kann ein neuer ausgewhlter Wert als neuer Feldinhalt gespeichert werden. Der
MS Internet Explorer untersttzt dabei nur die einfache Auswahl, Mehrfachauswahl nicht.

Andere Objekte mit <object>...</object>

Mit dem object-Element knnen Sie genauso arbeiten wie mit dem img-Element. Der Unterschied ist, dass Sie beim img-Element auf Grafiken beschrnkt sind, whrend Sie mit dem
object-Element beliebige Multimedia-Dateien oder ActiveX-Controls einbinden knnen. So
knnen Sie, analog zu dem Beispiel beim img-Element, anstelle einer Diashow eine Musikshow programmieren, die zum Beispiel aus MIDI-Dateien besteht.
In der externen Textdatei notieren Sie die gewnschten MIDI-Dateien, und bei der Einbindung
in HTML knnen Sie dann anstelle der Datenanbindung mit img so etwas notieren wie:
<object datafld="Musik" width="0" height="0"></object>

(wobei Musik in der Textdatei mit den Daten als Feldberschrift notiert sein muss).

1048

Kapitel 21: Dynamisches HTML

Java-Applets mit <applet>...</applet>

Sie knnen das Feature der Datenanbindung nutzen, um einen Parameter eines Java-Applets aus
einer externen Datenquelle zu versorgen. Beispiel:
<applet code="verzerr.class">
<param name="bild" datasrc="#aktuell" datafld="b_gates_bild">
</applet>

21.5.5

Datenmodell: Tabular Data Control (TDC)

Dies ist das Datenmodell fr den Fall, dass die externe Datenquelle eine einfache Textdatei ist,
die in jeder Zeile einen Datensatz enthlt, und bei der die einzelnen Datenfelder der Datenstze
durch ein Begrenzerzeichen, zum Beispiel ein Komma, markiert sind. Geeignet ist dieses Datenmodell fr kleinere Datenbestnde mit bis zu ein paar tausend Datenstzen. Ein vollstndiges
Beispiel dafr finden Sie weiter oben im Abschnitt Beispiel Datei dynamisch in Tabelle einbinden
(Kapitel 21.5.2). Um eine solche Datenquelle an eine HTML-Datei anzubinden, mssen Sie
folgendes Objekt in der HTML-Datei notieren.
Schema zur Einbindung in HTML:
<object id="Objektname" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name= value=>
<!-- usw. weitere Parameter -->
</object>

Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveXControl mit der ID 333C7BC4-460F-11D0-BC04-0080C7055A83. Innerhalb des <object>-Tags
notieren Sie verschiedene Parameter, die fr die Datenprsentation wichtig sind. Folgende Parameter sind erlaubt:
Notation

Bedeutung

<param name=

Mit diesem Parameter knnen Sie angeben, ob in der Ausgabetabelle beim

Blttern fr jedes neue Datensatz-Set (entsprechend der Gre von datapagesize=) die vorhandenen Tabellenzellen berschrieben werden sollen oder
ob neue Tabellenzellen angehngt werden sollen. Mit value=true erzwingen
Sie das Anhngen von Daten. Per Voreinstellung werden die vorhandenen
Tabellenzellen berschrieben.
Mit diesem Parameter knnen Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Gro-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten
mit Scripts. Per Voreinstellung wird Gro-/Kleinschreibung unterschieden.
Mit value="false" knnen Sie die Fallunterscheidung ausschalten.

"AppendData" value=>

<param name=
"CaseSensitive"
value=>

21.5 Datenanbindung (nur Microsoft)

1049

Notation

Bedeutung

<param name="CharSet"

Mit diesem Parameter knnen Sie den Zeichensatz angeben, der fr die Daten
in der Datendatei mageblich ist. Per Voreinstellung ist das der Zeichensatz
Western Latin-1 (iso-8859-1). Verwenden Sie diesen Parameter nur, wenn die
Daten einen anderen Zeichensatz benutzen, z.B. iso-8859-5 fr Kyrillisch. Bei
value= knnen Sie den Zeichensatz angeben. Nhere Informationen im
Abschnitt 23.2 ber Zeichenstze.
Dieser Parameter ist unbedingt erforderlich. Bei value= geben Sie die Datei
an, in der sich die Daten befinden.
Diesen Parameter sollten Sie angeben, wenn in Ihrer Datendatei ein Zeichen
als Maskierungszeichen verwendet wird. Das ist z.B. der Fall, wenn Sie in
einer kommabegrenzten Datei Kommata innerhalb von Feldern mit einem
vorangestellten Backslash \ maskieren. Geben Sie in diesem Fall bei value=
das Maskierungszeichen an.
Mit diesem Parameter geben Sie an, welches Zeichen als Trennzeichen fr
Datenfelder innerhalb einer Zeile der externen Textdatei interpretiert werden
soll. Bei value= knnen Sie das Zeichen angeben.
Mit diesem Parameter knnen Sie die Datenauswahl einschrnken. Per Voreinstellung werden alle Daten aus der externen Datei angezeigt. Interessant ist
dieser Parameter vor allem, wenn der Anwender in einem Eingabeformular
die Suche selbst definieren kann und die Eingaben dann mit Hilfe eines
Scripts dynamisch diesem Parameter des <object>-Tags zugewiesen werden.
Bei value= knnen Sie den Filter angeben. Beispiele:
value="Telefon <> 089*" findet in einem Feld Telefon nur Nummern,
die mit 089 beginnen.
value="PLZ > 50000" findet in einem Feld PLZ fr Postleitzahlen nur
Werte, die grer als 50000 sind.
Mit diesem Parameter knnen Sie die Sprache angeben, in der die Daten der
exterenen Datendatei vorliegen. Mageblich sind dafr die Sprachennamen,
wie sie in ISO 369 definiert sind. Bei value= knnen Sie die Sprache angeben.
Wenn Ihre externe Datendatei so aufgebaut ist, dass am Ende eines Datensatzes ein Datensatzbegrenzerzeichen steht, mssen Sie dieses Zeichen mit
diesem Parameter angeben. Notieren Sie hinter value= das Zeichen.
Mit diesem Parameter knnen Sie veranlassen, dass bei gleichzeitiger Ausgabe
mehrerer Datenstze (also bei datapagesize= grer 1) die angezeigten
Datenstze nach einem bestimmten Feld sortiert werden. Beispiele:
value="PLZ" sortiert auszugebende Daten nach einem Feld namens PLZ.
value="-PLZ" sortiert auszugebende Daten nach einem Feld namens PLZ,
und zwar absteigend (Minuszeichen davor).
value="Name; PLZ" sortiert auszugebende Daten erstens nach Name und
zweitens nach Postleitzahlen.

value=>

<param name="DataURL"
value=>
<param
name="EscapeChar"
value=>

<param
name="FieldDelim"
value=>
<param name="Filter"
value=>

<param name="Language"
value=>
<param name="RowDelim"
value=>
<param name="Sort"
value=>

1050

Kapitel 21: Dynamisches HTML

Notation

Bedeutung

<param

Wenn Ihre externe Datendatei so aufgebaut ist, dass alle Datenfelder in

bestimmte Zeichen eingeschlossen sind, zum Beispiel in Anfhrungszeichen,
dann sollten Sie mit diesem Parameter das betreffende Zeichen angeben. Mit
value=""" etwa bestimmen Sie das Anfhrungszeichen als Zeichen fr
Feldanfang und Feldende.
Diesen Parameter mssen Sie dann angeben, wenn die erste Zeile der
externen Datendatei keine Daten enthlt, sondern die zugehrigen
Feldnamen. Mit value="true" wird die Datendatei so interpretiert, dass die
erste Zeile Feldnamen enthlt. Mit value="false" wird sie so interpretiert,
dass gleich in der ersten Zeile die Daten beginnen.

name="TextQualifier"
value=>

<param
name="UseHeader"
value=>

21.5.6

Datenmodell: Remote Data Service (RDS)

ber das Datenmodell Remote Data Service (RDS) knnen Sie die Anbindung einer HTMLDatei an Daten aus einer Datenbank realisieren. Geeignet ist dieses Modell fr Datenbanken, die
ber die Datenbankschnittstellen OLE-DB oder ODBC (DBMS) verfgen. Das sind beispielsweise MS Access, Oracle oder SQL-Server wie msql. ber die entsprechenden Produkte und den
Aufbau von Datenbanken damit informieren Sie sich bitte bei den betreffenden Herstellern. Um
eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem
Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider. Um eine solche
Datenquelle an eine HTML-Datei anzubinden, mssen Sie folgendes Objekt in der HTML-Datei
notieren.
Schema zur Einbindung in HTML:
<object id="Objektname" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33">
<param name= value=>
<!-- usw. weitere Parameter -->
</object>

Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveXControl mit der ID BD96C556-65A3-11D0-983A-00C04FC29E33. Innerhalb des <object>-Tags
notieren Sie verschiedene Parameter, die fr die Datenprsentation wichtig sind. Folgende Parameter sind mglich:
Notation

Bedeutung

<param name=

Mit diesem Parameter knnen Sie angeben, ob in der Ausgabetabelle beim

Blttern fr jedes neue Datensatz-Set (entsprechend der Gre von
datapagesize=) die vorhandenen Tabellenzellen berschrieben werden
sollen oder ob neue Tabellenzellen angehngt werden sollen. Mit value=
true erzwingen Sie das Anhngen von Daten. Per Voreinstellung werden die
vorhandenen Tabellenzellen berschrieben.

"AppendData" value=>

21.5 Datenanbindung (nur Microsoft)

1051

Notation

Bedeutung

<param name=

Mit diesem Parameter knnen Sie angeben, ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Gro-/Kleinschreibung unterschieden werden soll. Nur interessant bei der Weiterverarbeitung von Daten
mit Scripts. Per Voreinstellung wird Gro-/Kleinschreibung unterschieden.
Mit value=false knnen Sie die Fallunterscheidung ausschalten.
Mit diesem Parameter knnen Sie den Zeichensatz angeben, der fr die Daten
in der Datendatei mageblich ist. Per Voreinstellung ist das der Zeichensatz
Western Latin-1 (iso-8859-1). Verwenden Sie diesen Parameter nur, wenn die
Daten einen anderen Zeichensatz benutzen, z.B. iso-8859-5 fr Kyrillisch. Bei
value= knnen Sie den Zeichensatz angeben. Nhere Informationen im
Abschnitt 23.2 ber Zeichenstze.

"CaseSensitive"
value=>

<param name="CharSet"
value=>

Beachten Sie: Solche Datenanbindungen sind nur sinnvoll, wenn Sie dem Anwender ein HTMLFormular zur Verfgung stellen, in dem er seine Angaben zum Durchsuchen der Datenbank
machen kann. Mit Hilfe eines JavaScripts knnen Sie dann die Anwendereingaben in einen gltigen SQL-Befehl umwandeln, den Sie im Script dem Parameter SQL des object-Tags zuweisen.
So knnen Sie beispielsweise mit der JavaScript-Anweisung:
document.all.Datenbank.SQL = Abfrage;

eine SQL-Abfrage zuordnen. In diesem Beispiel ist "Datenbank" der Name, der beim objectTag als id= vergeben wird, und Abfrage ist eine Variable, die zuvor aus Formulareingaben des
Anwenders einen SQL-Befehl kreiert hat. Bei solchen Datenbanken ist es auch mglich, SQLBefehle zum Schreiben von genderten Datenstzen in die Datenbank zurckzuschreiben. Voraussetzung ist, dass die Daten in der HTML-Datei in editierbaren HTML-Eingabefeldern (z.B.
<input...>) angezeigt werden.
Ausfhrliche Informationen zum Einrichten und Realisieren einer Datenbank mit Scripts finden
Sie auf den Entwicklerseiten von Microsoft (msdn.microsoft.com/). Suchen Sie dort nach Microsoft Internet Client SDK.

21.5.7

Datenmodell: JDBC DataSource Applet

Das Datenmodell JDBC DataSource Applet greift ebenso wie das Datenmodell Remote Data Service (RDS) auf Datenbanken zu, die ber die Datenbankschnittstellen OLE-DB oder ODBC
(DBMS) verfgen, zum Beispiel MS Access, Oracle oder SQL-Server wie msql. Der Unterschied
zwischen dem JDBC DataSource Applet und dem Remote Data Service (RDS) ist, dass Letzterer
in der HTML-Datei als ActiveX-Control eingebunden wird, whrend das JDBC DataSource
Applet ein Java-Applet ist. Damit will Microsoft seine Datenanbindungstechnologie anderen
Browsern zur Verfgung stellen, die kein ActiveX untersttzen, wohl aber Java. Das tun zwar
Netscape und einige andere Browser, doch solange diese das Konzept der Datenanbindung mit
Dynamischem HTML nicht untersttzen, macht das Ganze eigentlich wenig Sinn.
Das Java-Applet, das diese Form der Datenanbindung steuert, gehrt nicht zum Lieferumfang
des MS Internet Explorers. Auf den Web-Seiten von Microsoft (www.microsoft.com/) knnen Sie
das JDBC DataSource Applet downloaden. Suchen Sie dort auf den Seiten nach JDBC Data-

1052

Kapitel 21: Dynamisches HTML

Source Applet. Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider. Um eine solche Datenquelle an eine HTML-Datei anzubinden, mssen Sie das JDBC DataSource Java-Applet in der HTML-Datei notieren.
Schema zur Einbindung in HTML:
<applet code="JDC.class" name="DSA1" id="DSA1" width="0" height="0">
<param name= value=>
<!-- usw. weitere Parameter -->
</applet>

Das Java-Applet wird wie in HTML blich mit dem <applet>-Tag eingebunden. Mit dem Attribut code= geben Sie die ausfhrbare Java-Datei an. Dies ist die Datei JDC.class, die Sie mit dem
Download des JDBC DataSource Java-Applets erhalten. Innerhalb des Applets notieren Sie
verschiedene Parameter, die das Applet bentigt, um korrekt zu arbeiten. Weiterfhrende Infos
zu den Parametern entnehmen Sie der Originaldokumentation zu dem Applet. Folgende Parameter erwartet das Applet:
Notation

Bedeutung

<param name="cabbase"

Mit diesem Parameter geben Sie die Datei an, in der der Quellcode des
Applets steht. Es handelt sich um eine CAB-Datei. Relative Pfadnamen oder
auch absolute Adressen sind dabei erlaubt.
Mit diesem Parameter geben Sie bei value= die Datei an, in der die
Datenbank gespeichert ist. Relative Pfadnamen oder auch absolute Adressen
sind dabei erlaubt.
Mit diesem Parameter geben Sie an, ob das Applet innerhalb der HTML-Datei
seine eigene Benutzeroberflche anzeigen soll oder nicht. Mit value="true"
wird das Applet angezeigt, mit value="false" nicht. Der Parameter ist
optional.
Mit diesem Parameter mssen Sie einen Befehl angeben, den Sie zum
Ansprechen der Datenbank absetzen wollen. Dies kann ein beliebiger gltiger
SQL-Befehl sein. SQL (Structured Query Language) ist eine standardisierte
Datenbankabfragesprache. Diese Sprache und ihre Befehle mssen Sie
kennen, um den Parameter mit korrekten Werten zu versorgen.
Mit diesem Parameter geben Sie an, ob der Anwender Datenstze durch
Ausfllen entsprechender Eingabefelder neue Datenstze in die Datenbank
schreiben darf. Mit value="true" erlauben Sie das Hinzufgen von Daten,
mit value="false" verbieten sie es.
Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datenstze
mit Hilfe entsprechender Befehls-Buttons aus der Datenbank lschen darf.
Mit value="true" erlauben Sie das Lschen von Daten, mit value="false"
verbieten sie es.

value=>
<param name="dbURL"
value=>
<param name="showUI"
value=>

<param
name="sqlStatement"
value=>

<param
name="allowInsert"
value=>
<param
name="allowDelete"
value=>

21.5 Datenanbindung (nur Microsoft)

1053

Notation

Bedeutung

<param

Mit diesem Parameter geben Sie an, ob der Anwender angezeigte Datenstze
in entsprechenden Eingabefeldern editieren und genderte Daten mit Hilfe
entsprechender Befehls-Buttons in die Datenbank zurckschreiben darf. Mit
value="true" erlauben Sie das ndern von Daten, mit value="false"
verbieten sie es.

name="allowUpdate"
value=>

Mit diesem Parameter knnen Sie der Datenbank bei value= den Namen
eines angemeldeten Users bergeben, sofern die Datenbank dies verlangt. Der
Parameter ist optional.

<param name="user"
value=>

<param name="password"
value=>

Mit diesem Parameter knnen Sie der Datenbank bei value= das Passwort des
Users bergeben, sofern die Datenbank dies verlangt. Der Parameter ist
optional.

Beachten Sie: Beim Datenmodell JDBC DataSource Applet gelten die Anmerkungen zum
Datenmodell Remote Data Service (RDS) in Kapitel 21.5.6.

21.5.8

Datenmodell: XML Data Source

Das Datenmodell XML Data Source knnte in Zukunft sehr interessant werden, da es die vom
W3-Konsortium standardisierte Sprache XML zur Definition von Daten benutzt. Bei diesem
Datenmodell werden die Daten in einer XML-Datei gespeichert. Fr Datenstze und Datenfelder
knnen Sie innerhalb der XML-Datei eigene Tags und deren Verschachtelung erfinden. Ein
denkbares Schema fr eine Adressendatei wre etwa:
<adresse>
<name>Meyer</name>
<vorname>Hubert</vorname>
<ort>Hamburg</ort>
<telefon>040-598487374</telefon>
</adresse>

Im Lieferumfang des MS Internet Explorers 4.x ist ein Java-Applet enthalten, das solche TagStrukturen aus XML-Dateien interpretiert und die Datenstruktur daraus ermittelt. Um diese Art
von Datenquelle an eine HTML-Datei anzubinden, mssen Sie das zugehrige Java-Applet in
der HTML-Datei notieren.
Schema zur Einbindung in HTML:
<applet class=com.ms.xml.dso.xmldso.class id="xmldso" width="0" height="0"
mayscript=true>
<param name="url" value=>
</applet>

Das Java-Applet wird wie in HTML blich mit dem <applet>-Tag eingebunden. Notieren Sie
das einleitende <applet>-Tag genau so wie im obigen Schema. Der Grund fr die etwas unge-

1054

Kapitel 21: Dynamisches HTML

whnliche Angabe bei class= ist, dass dieses Java-Applet eine interne Ressource des MS Internet
Explorers ist und keine separat vorliegende Datei.
Das Applet erwartet genau einen Parameter:
Mit <param name="url" value=> geben Sie bei value= den Dateinamen der XML-Datei an.
Dabei sind natrlich auch relative Pfadangaben oder absolute Adressen erlaubt.

21.5.9

Datenmodell: MSHTML Data Source

Was Sie mit XML besonders elegant lsen knnen, geht etwas weniger elegant auch mit HTML
selbst: Hinter dem Datenmodell MSHTML Data Source verbirgt sich nichts anderes als eine
Konvention, nach der die Daten in einer HTML-Datei gehalten werden diese HTML-Datei
dient dann als externe Quelle fr eine andere HTML-Datei, in der die Daten angezeigt werden.
Ein Schema fr den Datensatz einer Adressendatei wre etwa:
<div id="Adresse">
<span id="Name">Meyer</span><br>
<span id="Vorname">Hubert</span><br>
<span id="Ort">Hamburg</span><br>
<span id="Telefon">040-598487374</span><br>
</div>

Um diese Art von Datenquelle an eine HTML-Datei anzubinden, mssen Sie ein einfaches
Objekt dafr notieren.
Schema zur Einbindung in HTML:
<object id="Daten" data="daten.htm" width="0" height="0">
</object>

Innerhalb des <object>-Tags vergeben Sie mit id= wie blich einen Namen, unter dem Sie das
Objekt ansprechen und die Daten aus der anderen Datei in einer Tabelle dynamisch anzeigen
knnen. Das Zugreifen auf die Datenstze funktioniert dabei genau so wie im Beispiel Datei
dynamisch in Tabelle einbinden (Kapitel 21.5.2). Bei datafld= geben Sie den Namen an, den Sie
in der externen HTML-Datei bei id= fr jedes gleiche Feld eines Datensatzes vergeben haben,
z.B. "Vorname".

21.6
21.6.1

Dynamische Filter (nur Microsoft)

Allgemeines zu dynamischen Filtern

Der MS Internet Explorer untersttzt ab der Version 4.x spezielle CSS-Eigenschaften, die so genannten Filter. Mit Hilfe solcher Filter sind grafische Effekte mglich, wie sie aus professionellen
Grafikprogrammen bekannt sind: Schatteneffekte fr Texte oder auch Transparenzdefinitionen
fr Grafiken, die auf einer WWW-Seite angezeigt werden, gehren zum Repertoire der mglichen Angaben. Als reine CSS-Eigenschaften sind diese Filter statisch. Mit Hilfe von Scripts knnen Sie die entsprechenden Angaben zu den Filtern jedoch dynamisch beeinflussen. Ferner gibt
es zwei Spezialfilter fr Blend- und diverse bergangseffekte. Mit etwas Programmierkenntnis-

21.6 Dynamische Filter (nur Microsoft)

1055

sen und sthetischem Gefhl knnen dabei so ziemlich alle Trume wahr werden, die WebDesigner heimlich immer schon getrumt haben: Grafiken, die sich wie von Geisterhand
langsam ein- und ausblenden, flieende bergnge zwischen Elementen, Texte, die verschwimmen usw.
Der Script-Zugriff auf definierte Filter erfolgt ber das filter-Objekt in JScript/JavaScript. Die
Beispiele hier knnen nicht alle Mglichkeiten des filter-Objekts behandeln. Sie dienen nur
zur Veranschaulichung, wie Filter sich durch ein Script dynamisch verndern lassen. Die FilterTechnik von Microsoft ist jedoch nie ein Standard geworden, und es ist fraglich, ob sie je zum
Standard gehren werden.

21.6.2

Einfaches Dynamisches ndern von Filterwerten

Durch zeitgesteuertes ndern der CSS-Filtereigenschaften knnen Sie interessante Effekte erzielen. Ein Beispiel:
<html><head><title>Test</title>
</head><body>
<div id="Zittertext" style="width:100%; font-size:72pt; font-weight:bold;
color:#FF6666;
filter:Wave(freq=5, light=0, phase=80, strength=1);">Leicht gest&ouml;rt</div>
<script language="JScript" type="text/jscript">
<!-function DynWave() {
if(document.all.Zittertext.filters[0].freq > 30)
document.all.Zittertext.filters[0].freq = 5;
document.all.Zittertext.filters[0].freq += 1;
if(document.all.Zittertext.filters[0].phase > 100)
document.all.Zittertext.filters[0].phase = 0;
document.all.Zittertext.filters[0].phase += 10;
if(document.all.Zittertext.filters[0].strength > 10)
document.all.Zittertext.filters[0].strength = 1;
document.all.Zittertext.filters[0].strength += 1;
window.setTimeout("DynWave()",100);
}
DynWave();
//-->
</script>
</body>
</html>

Im Beispiel wird in einem <div>-Bereich der zugehrige Text (leicht gest&ouml;rt) mit Hilfe
von CSS-Eigenschaften formatiert. Zu den Formatierungen gehrt auch die Anwendung des
Filters Wave(). Damit wird der Effekt des Filters zwar bereits angezeigt, aber es bewegt sich noch
nichts. In einem Script unterhalb des so definierten <div>-Bereichs werden die Angaben dieses
Filters dynamisch verndert. Da ein Endlos-Effekt mit immer neuen Werten und Kombinationen eingebaut ist, entsteht ein Zitter-Effekt.

1056

Kapitel 21: Dynamisches HTML

21.20: Der Filter lsst die Buchstaben erzittern.

Die JavaScript-Funktion wird im obigen Beispiel unterhalb des Bereichs, auf den sie sich bezieht,
definiert. Der Grund ist, dass die JavaScript-Anweisungen sofort ausgefhrt werden. Der <div>Bereich, auf dessen Daten die Anweisungen dynamisch zugreifen, sollte zu diesem Zeitpunkt
bereits eingelesen und dem Browser bekannt sein. Deshalb steht das Script unterhalb des <div>Bereichs. Andernfalls knnte es zu Fehlermeldungen kommen.
Innerhalb des Script-Bereichs wird zunchst eine Funktion mit dem Namen DynWave() definiert. Diese Funktion ndert die Parameter freq, phase und strength des Wave-Filters, der bei
dem <div>-Bereich definiert wurde. Am Ende ruft sich die Funktion selbst wieder auf. Dadurch
entsteht ein Endlos-Effekt. Der Aufruf erfolgt zeitverzgert um 100 Millisekunden. Das ist wichtig, da der Selbstaufruf der Funktion sonst unendlich schnell wre und ein Problem im
Arbeitsspeicher verursachen wrde (Selbstaufrufe von Funktionen sind nmlich nicht ganz
unkritisch, da fr jeden Funktionsaufruf neuer Arbeitsspeicherplatz reserviert werden muss). Da
die Funktion zu Beginn berhaupt erst einmal aufgerufen werden muss (sonst wrde gar nichts
passieren), steht am Ende des Script-Bereichs auerhalb der Funktion DynWave() der einmalige Funktionsaufruf DynWave();.
Innerhalb der Funktion im Beispiel knnen Sie erkennen, wie auf Filter dynamisch zugegriffen
wird. Der Zugriff geschieht mit Hilfe des all-Objekts. Bezug ist die Angabe id="Zittertext",
die im <div>-Tag vergeben wird. Mit document.all.Zittertext ist dann der Zugriff auf
dieses HTML-Element mglich.
Zwei Besonderheiten sind bei Filtern jedoch zu beachten:
Mit einem Ausdruck wie document.all.Zittertext.filters[0].strength greifen Sie
auf den Wert zu, der beim ersten definierten Filter des HTML-Elements bei der Angabe
strength= als Parameter notiert ist. Da die Filter zu den Stylesheet-Angaben gehren, msste
eigentlich document.all.Zittertext.style.filters[0].strength notiert werden. Dies
fhrt beim MS Internet Explorer jedoch zu Fehlermeldungen. Lassen Sie die Angabe style in
der Mitte also weg.
Da ein Element mehrere Filter haben kann, mssen Sie genau angeben, welchen Filter Sie
dynamisch ansprechen wollen. Im obigen Beispiel wird mit filters[0] der erste definierte
Filter angesprochen. Falls im gleichen <div>-Tag noch ein zweiter Filter definiert wre,

21.6 Dynamische Filter (nur Microsoft)

1057

knnten Sie diesen mit filters[1] ansprechen, also einfach bei 0 zu zhlen beginnen.
Microsoft erlaubt auch weitere Notationsmglichkeiten, fr das obige Beispiel etwa document.all.Zittertext.filters["wave"].strength oder document.all.Zittertext.
filters.wave.strength.
Das hier beschriebene Schema zum Zugreifen auf Filterwerte knnen Sie auf alle anderen Filter
ebenso anwenden. Auch auf solche, die vor allem in Verbindung mit Grafiken sinnvoll sind.

21.6.3

Flieende bergnge mit dem blendTrans-Filter

Der blendTrans-Filter ist ein spezieller Filter, der nur in Verbindung mit Scripts sinnvoll ist. Er
erlaubt es, einen flieenden bergang von einer Grafik zu einer anderen Grafik oder von einem
Textinhalt zu einem anderen Textinhalt zu definieren. Dadurch werden Effekte wie bei professionellen Diashows oder wie bei Fernsehbildern auf WWW-Seiten mglich. Ein Beispiel fr
Grafiken:
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.jpg";
var Bild = 1;
function Bildwechsel() {
if (Bild == 1) {
Bild = 2;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild2.src;
document.all.Madrid.filters.blendTrans.Play();
}
else {
Bild = 1;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild1.src;
document.all.Madrid.filters.blendTrans.Play();
}
}
//-->
</script>
</head><body>
<p>Klicken Sie auf das Bild, nachdem es vollstndig angezeigt ist.</p>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand;
filter:blendTrans(Duration=4, Transition=16)" onClick="Bildwechsel()" width="433"
height="278" border="0" alt="Das ist Madrid">
</body>
</html>

1058

Kapitel 21: Dynamisches HTML

21.21: Der Filter blendet sanft von einem Bild zu nchsten.

Das Beispiel bewirkt, dass beim Klicken auf ein Bild dieses Bild langsam in ein anderes bergeht.
Wird das andere Bild dann angeklickt, geht es langsam wieder in das erste ber. Dazu wird zunchst bei der Definition des Bildes mit <img...> eine spezielle Stylesheet-Angabe notiert: der
Filter blendTrans(...). Dieser Filter erwartet einen Parameter, nmlich die Angabe zu Duration=. Damit knnen Sie angeben, wie lange der bergang von dem Bild zu seinem Nachfolger
dauern soll. Im Beispiel wird 4 angegeben das steht fr 4 Sekunden. Sie knnen auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein Punkt!).
Damit ist der bergangseffekt jedoch nur registriert. Um ihn tatschlich auszufhren, ist ein
Script erforderlich. Im obigen Beispiel wird im Dateikopf ein JavaScript-Bereich definiert. Dort
werden zunchst mit Hilfe des Bildobjekts image beide betroffenen Bilder als Objekte (Bild1
und Bild2) definiert. Der Eigenschaft src der Bildobjekte werden die gewnschten Grafikdateien zugewiesen. Diese Vorarbeit mit dem image-Objekt ist zwar nicht zwingend notwendig,
hat aber den Vorteil, dass alle betroffenen Bilder bereits in den Arbeitsspeicher geladen sind,
wenn der bergang angestoen wird.
Innerhalb der Funktion Bildwechsel() findet dann der eigentliche bergang statt. Diese
Funktion wird aufgerufen, wenn der Anwender auf das Bild klickt. Dazu ist im <img>-Tag der
Event-Handler onClick= notiert.
In der Funktion Bildwechsel() wird zunchst die Methode Apply() des blendTrans-Filters
aufgerufen. Dieser Aufruf ist notwendig, um dasjenige Objekt zu identifizieren, das in ein anderes bergehen soll. Im Beispiel ist das die Grafik, angesprochen ber das all-Objekt und den
vergebenen id-Namen DynBild. Als nchster Befehl wird der Grafik diejenige neue Grafik zugeordnet, durch die sie ersetzt werden soll. Erst dann sind alle Voraussetzungen erfllt, um den
eigentlichen bergang zu starten. Dazu wird die Methode Play() des filter-Objekts benutzt.
Die Variable Bild und der else-Zweig in der Beispielfunktion dienen dazu, den Wechseleffekt
sicherzustellen. Mit den beschriebenen Befehlen findet der bergang ansonsten genau einmal
statt. Der bergangseffekt ist nicht nur bei Grafiken mglich, sondern auch bei Text. Ein Beispiel
fr Text:

21.6 Dynamische Filter (nur Microsoft)

1059

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!-var NormalText = "Wer HTML nicht ehrt";
var AndererText = "ist des Dynamischen nicht wert";
var Text = 1;
function Wechsel() {
if (Text == 1) {
Text = 2;
document.all.MeinText.filters.blendTrans.Apply();
document.all.MeinText.innerText = AndererText;
document.all.MeinText.filters.blendTrans.Play();
}
else {
Text = 1;
document.all.MeinText.filters.blendTrans.Apply();
document.all.MeinText.innerText = NormalText;
document.all.MeinText.filters.blendTrans.Play();
}
}
//-->
</script>
</head><body>
<p>Klicken Sie auf den folgenden Text:</p>
<div id="MeinText" style="cursor:hand; font-size:32pt; color:red; width:600;
height:200; filter:blendTrans(Duration=0.5)" onClick="Wechsel()">
Wer HTML nicht ehrt</div>
</body>
</html>

Anwendbar ist der blendTrans-Filter bei Text auf die HTML-Elemente

<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>

sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> mssen Sie
Stylesheet-Angaben zu Breite und/oder Hhe des Elements notieren, sonst funktioniert es nicht.
Das obige Beispiel ist im Wesentlichen das gleiche wie bei den Grafiken. Im Unterschied dazu
wird jedoch ein bergang zwischen zwei Texten definiert. Der erste Text ist im Dateikrper der
HTML-Datei mit <div>...</div> entsprechend den Regeln definiert. Die Realisierung des

1060

Kapitel 21: Dynamisches HTML

bergangs zwischen den beiden Texten ist hnlich wie bei Grafiken. Anstelle der Objekteigenschaft src (bei Grafiken) mssen Sie bei Texten jedoch die Eigenschaft innerText (wie im Beispiel) oder innerHTML verwenden. Diese Eigenschaften erlauben das dynamische Austauschen
des Inhalts, den das angesprochene HTML-Element enthlt.

21.6.4

Flieende bergnge mit dem revealTrans-Filter

Der revealTrans-Filter ist ganz hnlich zu handhaben wie der blendTrans-Filter. Whrend der
blendTrans-Filter jedoch nur einfache Blenden von einem Inhalt zum anderen erlaubt, stellt der
revealTrans-Filter ein ganzes Arsenal grafischer berblend-Effekte bereit. Ein Beispiel (fr
Grafik):
<html><head><title>Test</title>
</head><body>
<img id="DynBild" src="rain.gif"
style="filter:revealTrans(Duration=2,Transition=12)" width="150"
height="145" alt="Sonnenschein?">
<script language="JScript" type="text/jscript">
<!-window.setTimeout("Wechsel()",5000);
function Wechsel()
{
document.all.DynBild.filters.revealTrans.Apply();
document.all.DynBild.src = "sun.gif";
document.all.DynBild.filters.revealTrans.Play();
}
//-->
</script>
</body></html>

Das Beispiel bewirkt, dass innerhalb von 5 Sekunden (5000 Millisekunden) das angezeigte Bild
rain.gif zerbrselt und durch das Bild "sun.gif" ersetzt wird.
Beispiel (fr Text):
<html><head><title>Test</title>
</head><body>
<div id="MeinText" style="width:600px; height:100px; font-size:24pt;
filter:revealTrans(Duration=1,Transition=7)">
Wer HTML nicht ehrt
</div>
<script language="JScript" type="text/jscript">
<!-window.setTimeout("Wechsel()",2500);
function Wechsel()
{
document.all.MeinText.filters.revealTrans.Apply();
document.all.MeinText.innerText = "ist des Dynamischen nicht wert";
document.all.MeinText.filters.revealTrans.Play();

21.6 Dynamische Filter (nur Microsoft)

1061

}
//-->
</script>
</body></html>

Das Beispiel bewirkt, dass der Text Wer HTML nicht ehrt nach 2,5 Sekunden durch den Text ist
des Dynamischen nicht wert ersetzt wird, und zwar so, dass der neue Text den zunchst angezeigten Text von rechts her berrollt. Dazu wird zunchst der Text Wer HTML nicht ehrt innerhalb eines <div>-Bereichs notiert. Denn der revealTrans-Filter ist im Zusammenhang mit Text
auf die folgenden HTML-Elemente anwendbar:

<body>...</body>
<div>...</div>
<span>...</span>
<input>
<button>
<textarea>...</textarea>
<marquee>...</marquee>

sowie auf alle Tabellenelemente. Bei <div>...</div> und bei <span>...</span> mssen Sie
Stylesheet-Angaben zu Breite und/oder Hhe des Elements notieren, sonst funktioniert es nicht.
Im obigen Beispiel werden Breite und Hhe des <div>-Bereichs mit width: und height: festgelegt.
Ferner wird eine spezielle Stylesheet-Angabe notiert: der Filter revealTrans(...). Dieser Filter
erwartet zwei Parameter, nmlich die Angabe zu Duration= und eine Angabe zu Transition=.
Mit Duration= knnen Sie angeben, wie lange der bergang von dem Text zu seinem
Nachfolger dauern soll. Im Beispiel wird 1 angegeben das steht fr eine Sekunde. Sie knnen
auch Bruchwerte bis zu tausendstel Sekunden angeben, etwa 2.450 (Dezimalzeichen ist ein
Punkt!). Bei Transition= geben Sie die Art an, wie der Filter wirken soll. Die erlaubten Werte
beim revealTrans-Filter listet die folgende Tabelle auf.
Notation

Bedeutung

Transition=0

Box-Effekt: auen nach innen

Box-Effekt: innen nach auen
Kreis-Effekt: von auen nach innen
Kreis-Effekt: von innen nach auen
Aufroll-Effekt: von unten nach oben
Aufroll-Effekt: von oben nach unten
Aufroll-Effekt: von links nach rechts
Aufroll-Effekt: von rechts nach links
Streifen-Effekt: von links nach rechts
Streifen-Effekt: von oben nach unten

Transition=1
Transition=2
Transition=3
Transition=4
Transition=5
Transition=6
Transition=7
Transition=8
Transition=9

1062

Kapitel 21: Dynamisches HTML

Notation

Bedeutung

Transition=10

Rechteck-Effekt: von links nach rechts

Rechteck-Effekt: von oben nach unten
Zerbrselungseffekt: in alle Richtungen
Aufroll-Effekt: beidseitig von auen nach innen
Aufroll-Effekt: beidseitig von innen nach auen
Zuklapp-Effekt: von oben und unten
Aufklapp-Effekt: nach oben und unten
Aufroll-Effekt: von rechts oben nach links unten
Aufroll-Effekt: von rechts unten nach links oben
Aufroll-Effekt: von links oben nach rechts unten
Aufroll-Effekt: von links unten nach rechts oben
Jalousie-Effekt: waagerecht
Jalousie-Effekt: senkrecht
Zufallseffekt: aus Effekten 0-22

Transition=11
Transition=12
Transition=13
Transition=14
Transition=15
Transition=16
Transition=17
Transition=18
Transition=19
Transition=20
Transition=21
Transition=22
Transition=23

21.6.5

Ein-/Ausblend-Effekte

Sie knnen die beiden Filter blendTrans und revealTrans auch dazu nutzen, um Texte oder
Grafiken aus dem Nichts heraus einzublenden oder auszublenden. Dies ist in Verbindung mit
der Stylesheet-Angabe zur Anzeige bzw. Nichtanzeige mit Platzhalter (visibility) mglich.

Ein Beispiel fr Text:

<html><head><title>Test</title>
</head><body>
<div id="KommText" style="width:400px; height:100px; font-size:24pt; fontweight:bold; color:#0000FF; visibility:hidden; filter:blendTrans(Duration=4)">
Hier kommt der Text
</div>
<script language="JScript" type="text/jscript">
<!-document.all.KommText.filters.blendTrans.Apply();
document.all.KommText.style.visibility = "visible";
document.all.KommText.filters.blendTrans.Play();
//-->
</script>
<div id="GehText" style="width:400px; height:100px; font-size:24pt; fontweight:bold; color:#0000FF;
visibility:visible; filter:blendTrans(Duration=4)">
Hier geht der Text
</div>
<script language="JScript" type="text/jscript">
<!--

21.6 Dynamische Filter (nur Microsoft)

1063

document.all.GehText.filters.blendTrans.Apply();
document.all.GehText.style.visibility = "hidden";
document.all.GehText.filters.blendTrans.Play();
//-->
</script>
</body></html>

21.22: Oben erscheint der Text, unten verschwindet er langsam.

Im obigen Beispiel werden zwei <div>-Bereiche mit Text definiert. Beide Bereiche erhalten mit
der id-Angabe jeweils einen Namen, damit sie per Script ansprechbar sind. Der eine Bereich
erhlt den Namen KommText, der andere den Namen GehText. Beide Bereiche erhalten auch mit
Hilfe der Stylesheet-Angabe visibility eine Angabe dazu, ob sie zunchst angezeigt werden
sollen oder nicht. Die Angabe visibility:hidden im ersten der beiden <div>-Bereiche sorgt
dafr, dass dieser Bereich zunchst nicht angezeigt wird. Im zweiten Bereich steht dagegen die
Angabe visibility:visible. Dadurch wird der entsprechende Text zunchst angezeigt. In
beiden <div>-Bereichen wird auerdem der blendTrans-Filter notiert.
Unterhalb jedes der beiden <div>-Bereiche ist ein Script notiert, das den jeweiligen blendTransFilter ausfhrt. Das funktioniert genauso wie bei flieenden bergngen mit dem blendTransFilter. Der Unterschied ist lediglich, dass dem jeweiligen <div>-Bereich zwischen dem Aufruf
der Methoden Apply() und Play() kein anderer Text zugewiesen wird, sondern ein neuer Wert
fr visibility. Der Bereich, der zunchst visibility:hidden zugewiesen bekam, wird
innerhalb des Scripts mit der Anweisung document.all.KommText.style.visibility =
"visible" sichtbar. Da der Wechsel zwischen unsichtbar und sichtbar jedoch in den
blendTrans-Filter eingebunden ist, wird der Text nicht sofort sichtbar, sondern erst durch das
Ausfhren des blendTrans-Filters. Mit dem zweiten Text passiert das Gleiche, nur umgekehrt.

Ein Beispiel fr Grafik

<html><head><title>Test</title>
</head><body>
<p><a id="ein" style="display:inline" href="javascript:Einblenden()">Grafik
einblenden</a><br>
<a id="aus" style="display:none" href="javascript:Ausblenden()">Grafik
ausblenden</a></p>

1064

Kapitel 21: Dynamisches HTML

<img id="Bild" src="madrid1.jpg" style="visibility:hidden;

filter:revealTrans(Duration=4, Transition=1)" width="433" height="278"
alt="Madrid">
<script language="JScript" type="text/jscript">
<!-function Einblenden()
{
document.all.Bild.filters.revealTrans.Transition = 1;
document.all.Bild.filters.revealTrans.Apply();
document.all.Bild.style.visibility = "visible";
document.all.Bild.filters.revealTrans.Play();
document.all.ein.style.display = "none";
document.all.aus.style.display = "inline";
}
function Ausblenden()
{
document.all.Bild.filters.revealTrans.Transition = 0;
document.all.Bild.filters.revealTrans.Apply();
document.all.Bild.style.visibility = "hidden";
document.all.Bild.filters.revealTrans.Play();
document.all.ein.style.display = "inline";
document.all.aus.style.display = "none";
}
//-->
</script>
</body></html>

Das voranstehende Beispiel enthlt zunchst zwei Verweise. Die beiden Verweise rufen JavaScript-Funktionen auf. Einer der Verweise ruft die Funktion Einblenden() zum Einblenden
einer Grafik auf, der andere die Funktion Ausblenden() zum Ausblenden derselben Grafik.
Beide Verweise enthalten auch Stylesheet-Angaben zur Anzeige bzw. Nichtanzeige ohne Platzhalter (display). Der erste Verweis wird zunchst angezeigt, der zweite nicht. Die Angaben
werden in den beiden Script-Funktionen Einblenden() und Ausblenden() dynamisch verndert.
So wird ermglicht, dass der Verweis Grafik einblenden angezeigt wird, wenn die Grafik nicht
angezeigt wird, und der Verweis Grafik ausblenden, wenn die Grafik angezeigt wird.
Unterhalb der Verweise wird die Grafik notiert, die ein- und ausblendbar sein soll. Durch die
Stylesheet-Angabe visibility:hidden wird die Anzeige der Grafik zunchst verhindert.
Auerdem erhlt die Grafik eine Angabe zum revealTrans-Filter. Wenn der Anwender nun auf
den zunchst angezeigten Verweis Grafik einblenden klickt, wird die Script-Funktion
Einblenden() aufgerufen. Diese Funktion ndert zwischen dem Aufruf von Apply() und
Play() des revealTrans()-Filters die Anzeige der einzublendenden Grafik auf visible. Der
Filter wird ausgefhrt, und die Grafik wird in der vorgeschriebenen Form (transition = 1)
eingeblendet. Ferner tauscht die Funktion Einblenden() noch die Anzeige-Attribute der beiden
Verweise aus, sodass nun der Verweis zum Ausblenden der Grafik angezeigt wird. Die Funktion
Ausblenden() leistet das Gleiche, nur umgekehrt. Dabei wird auch die Art des revealTransFilters umgekehrt, und zwar durch transition = 0.

21.6 Dynamische Filter (nur Microsoft)

21.6.6

1065

Flieende Seitenbergnge

Als besonderes Bonbon hat sich Microsoft schlielich noch einfallen lassen, die beiden Filter
blendTrans und revealTrans im Zusammenhang mit Meta-Angaben zu interpretieren. Auf
diese Weise werden flieende bergnge zwischen zwei Web-Seiten mglich.

21.23: Von einer Web-Seite zur nchsten blendet der Internet Explorer mit einem Filter weiter.

Beispiel Datei uebergang1.htm:

<html><head><title>Test</title>
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66"
alink="#FFFFFF">
<h1>Hier ist Seite 1</h1>
<p><img src="madrid1.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang2.htm">und ein Link zu Seite 2</a></p>
</body></html>

Beispiel Datei uebergang2.htm:

<html><head><title>Test</title>
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3,Transition=12)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)">
</head><body bgcolor="#000000" text="#FFFFFF" link="#FFFF66" vlink="#FFFF66"
alink="#FFFFFF">
<h1>Und das hier ist Seite 2</h1>
<p>Sie sieht ein klein wenig anders aus, aber nicht viel.</p>
<p><img src="madrid2.jpg" width="433" height="278" border="0" alt="ein Bild"></p>
<p><a href="uebergang1.htm">und das ist ein Link, der wieder zu Seite 1
geht</a></p>
</body></html>

1066

Kapitel 21: Dynamisches HTML

Mit <meta http-equiv="Page-Exit"... bestimmen Sie einen Filter, der beim Verlassen der
Seite angewendet wird, und mit <meta http-equiv="Page-Enter"... einen Filter, der beim
Laden der Seite angewendet wird. Bei content= notieren Sie RevealTrans oder BlendTrans
und dahinter in Klammern die gewnschten Angaben zu Duration= und beim RevealTransFilter Transition=. Im obigen Beispiel wird fr alle Flle in beiden Dateien der RevealTransFilter mit Transition=12 eingesetzt.
Beachten Sie: Im MS Internet Explorer 5.0 war das obige Beispiel nicht nachvollziehbar.

1067

22 DHTML Praxis-Lsungen

22.1

Allgemeine DHTML-Bibliothek

Angesichts der vielen verschiedenen DHTML-Modelle, die derzeit noch kursieren, ist es fr Programmierer oft nicht einfach, sich die ganzen unterschiedlichen Befehle und Zugriffsmglichkeiten zu merken. Auerdem werden Dateien bei greren Scripts ganz schn aufgeblht, wenn
man immer wieder die gleichen Browser-Abfragen und Konstrukte fr den Elementzugriff
notiert. Besser ist es deshalb, einmal eine Bibliothek an allgemein geschriebenen DHTML-Funktionen zu schreiben, diese in eine externe JavaScript-Datei auszulagern, und die JavaScript-Datei
dann in denjenigen Dateien mit einzubinden, wo der Code der DHTML-Funktionen bentigt
wird.
Das Beispiel in diesem Kapitel stellt eine solche Bibliothek fr DHTML-Funktionen vor. Die einzelnen Funktionen werden dabei auch genau erklrt. In den anderen Beispielen in diesem Kapitel kommt die hier erstellte Bibliothek dann zum praktischen Einsatz.
Selbstverstndlich knnen Sie die Funktionenbibliothek fr Ihre Zwecke beliebig erweitern. So
ist es z.B. denkbar, allgemein geschriebene Funktionen zur CSS-Formatierung oder -Positionierung von Elementen hinzuzufgen. Der hier vorgestellte Grundstock an Funktionen soll vor
allem den Zugriff auf Elemente erleichtern und Browser-Abfragen reduzieren.

22.1.1

Quelltext mit Erluterungen

Der folgende Quelltext zeigt die vollstndige DHTML-Bibliothek. Sie finden den kompletten
Quelltext auf der Buch-CD in der HTML-Version des Buches. Dann haben Sie die externe
JavaScript-Datei mit den DHTML-Funktionen.
Beispiel Datei dhtml.js:
/* DHTML-Bibliothek */
var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;
function DHTML_init() {
if (window.opera) {
OP = 1;
}
if(document.getElementById) {
DHTML = 1;
DOM = 1;
}

1068

Kapitel 22: DHTML Praxis-Lsungen

if(document.all && !OP) {

DHTML = 1;
MS = 1;
}
if (window.netscape && window.screen && !DOM && !OP){
DHTML = 1;
NS = 1;
}
}
function getElem(p1,p2,p3) {
var Elem;
if(DOM) {
if(p1.toLowerCase()=="id") {
if (typeof document.getElementById(p2) == "object")
Elem = document.getElementById(p2);
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="name") {
if (typeof document.getElementsByName(p2) == "object")
Elem = document.getElementsByName(p2)[p3];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="tagname") {
if (typeof document.getElementsByTagName(p2) == "object" ||
(OP && typeof document.getElementsByTagName(p2) == "function"))
Elem = document.getElementsByTagName(p2)[p3];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
else if(MS) {
if(p1.toLowerCase()=="id") {
if (typeof document.all[p2] == "object")
Elem = document.all[p2];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="tagname") {
if (typeof document.all.tags(p2) == "object")
Elem = document.all.tags(p2)[p3];
else Elem = void(0);
return(Elem);
}

22.1 Allgemeine DHTML-Bibliothek

else if(p1.toLowerCase()=="name") {
if (typeof document[p2] == "object")
Elem = document[p2];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
else if(NS) {
if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") {
if (typeof document[p2] == "object")
Elem = document[p2];
else Elem = void(0);
return(Elem);
}
else if(p1.toLowerCase()=="index") {
if (typeof document.layers[p2] == "object")
Elem = document.layers[p2];
else Elem = void(0);
return(Elem);
}
else return void(0);
}
}
function getCont(p1,p2,p3) {
var Cont;
if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) {
if(getElem(p1,p2,p3).firstChild.nodeType == 3)
Cont = getElem(p1,p2,p3).firstChild.nodeValue;
else
Cont = "";
return(Cont);
}
else if(MS && getElem(p1,p2,p3)) {
Cont = getElem(p1,p2,p3).innerText;
return(Cont);
}
else return void(0);
}
function getAttr(p1,p2,p3,p4) {
var Attr;
if((DOM || MS) && getElem(p1,p2,p3)) {
Attr = getElem(p1,p2,p3).getAttribute(p4);
return(Attr);
}

1069

1070

Kapitel 22: DHTML Praxis-Lsungen

else if (NS && getElem(p1,p2)) {

if (typeof getElem(p1,p2)[p3] == "object")
Attr=getElem(p1,p2)[p3][p4]
else
Attr=getElem(p1,p2)[p4]
return Attr;
}
else return void(0);
}
function setCont(p1,p2,p3,p4) {
if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild)
getElem(p1,p2,p3).firstChild.nodeValue = p4;
else if(MS && getElem(p1,p2,p3))
getElem(p1,p2,p3).innerText = p4;
else if(NS && getElem(p1,p2,p3)) {
getElem(p1,p2,p3).document.open();
getElem(p1,p2,p3).document.write(p4);
getElem(p1,p2,p3).document.close();
}
}
DHTML_init();

Die externe JavaScript-Datei darf nichts anderes als JavaScript-Code enthalten, so wie im Beispiel
gezeigt. Im Folgenden werden die globalen Variablen und die Funktionen beschrieben. Denn mit
diesen Variablen und Funktionen knnen Sie arbeiten, wenn Sie die Bibliothek verwenden wollen.

Globale Variable DHTML

Diese Variable speichert, ob Dynamisches HTML bei dem vom Anwender eingesetzten Browser
verfgbar ist oder nicht. Innerhalb der Funktion DHTML_init() wird diese Variable mit einem
Wert versorgt, der anschlieend nicht mehr gendert werden sollte. Wenn Dynamisches HTML
nach irgendeinem der bekannten DHTML-Modelle verfgbar ist, dann erhlt die Variable den
Wert 1, wenn nicht, dann den Wert 0. Mit der ganz simplen und eleganten Abfrage if(DHTML)
knnen Sie dann im Verlauf eines eigenen Scripts berprfen, ob berhaupt Dynamisches
HTML mglich ist.

Globale Variable DOM

Diese Variable speichert, ob Dynamisches HTML nach DOM-Syntax mglich ist oder nicht
(Wert 1 oder Wert 0). Innerhalb der Funktion DHTML_init() wird diese Variable mit einem
entsprechenden Wert versorgt, der anschlieend nicht mehr gendert werden sollte. Mit
if(DOM) knnen Sie anschlieend abfragen, ob ein neuerer Browser am Werk ist, der das DOM
bereits in seiner JavaScript-Implementierung untersttzt.

22.1 Allgemeine DHTML-Bibliothek

1071

Globale Variable MS
Auch diese Variable wird innerhalb der Funktion DHTML_init() mit einem Wert versorgt.
Wenn ihr Wert anschlieend 1 ist, dann luft Ihr Script mit ziemlicher Sicherheit auf einem MS
Internet Explorer. Handelt es sich um einen Browser der 4er-Generation, ist in der Variablen
DOM der Wert 0 gespeichert, bei neueren Browsern dagegen 1. Mit if(MS && !DOM) knnen Sie
also in Ihrem Script abfragen, ob mit der DHTML-Syntax des Internet Explorers 4.x gearbeitet
werden muss.

Globale Variable NS
Wie MS wird auch diese Variable innerhalb der Funktion DHTML_init() mit einem Wert versorgt. Wenn ihr Wert anschlieend 1 ist, dann luft Ihr Script mit ziemlicher Sicherheit auf
einem Netscape-Browser der 4er-Generation. Denn wenn ein 6er-Netscape oder ein anderer
Abkmmling des neu programmierten Mozilla-Browsers eingesetzt wird, ist stattdessen die Variable DOM gleich 1, whrend NS gleich 0 ist. Mit if(NS) knnen Sie also in Ihrem Script abfragen,
ob mit der DHTML-Syntax des alten 4er-Netscape gearbeitet werden muss.

Globale Variable OP
Wie MS wird auch diese Variable innerhalb der Funktion DHTML_init() mit einem Wert versorgt. Wenn ihr Wert anschlieend 1 ist, dann luft Ihr Script mit ziemlicher Sicherheit auf
einem Opera-Browser. Mit if(OP) knnen Sie also in Ihrem Script abfragen, ob ein OperaBrowser am Werk ist. Handelt es sich auerdem um einen neueren Opera-Browser, ist in den
Variablen DOM und in DHTML der Wert 1 gespeichert.

Funktion DHTML_init() Bibliothek initialisieren

Aufruf: DHTML_init();
Diese Funktion wird automatisch aufgerufen, wenn Sie die hier vorgestellte Bibliothek verwenden wollen. Dazu ist am Ende der Bibliotheksdatei der Aufruf DHTML_init() notiert. Anschlieend sind die wichtigen globalen Variablen mit ihren Werten versorgt. Wenn DHTML_init()
nicht vor allen anderen Aufrufen von Funktionen dieser Bibliothek aufgerufen wird, passiert
nicht das Gewnschte, da dann eine veraltete Browser-Bersion angenommen wird. Die Wirkungsweise der brigen Funktionen ist davon abhngig, dass die globalen Variablen mit korrekten Werten versorgt sind. Durch die Notation am Ende der Datei ist dies jedoch sichergestellt
und die globalen Variablen sind in allen Dokumenten verfgbar, die diese Bibliothek einbinden.
Die Funktion DHTML_init() bedient sich der Mglichkeit, abzufragen, ob ein Objekt existiert.
Bereits in der ersten Abfrage wird getestet, ob ein Opera-Browser vorliegt. Das ist notwendig, da
Opera je nach Nutzereinstellung auch angibt, document.all oder document.layers zu kennen. Zum Testen auf DOM-Verfgbarkeit eignet sich die Frage, ob document.getElementById
verfgbar ist, denn das ist eine wichtige DOM-Methode, die in allen DOM-Implementierungen
existieren sollte.
Zum Testen auf die ltere Microsoft- und Netscape-Syntax wird auf deren zentrale DHTMLObjekte hin abgefragt. Wenn document.all verfgbar ist, ist Syntax nach dem lteren Microsoft-Modell angesagt. Wenn document.layers verfgbar ist, Syntax nach dem lteren Net-

1072

Kapitel 22: DHTML Praxis-Lsungen

scape-Modell. In beiden Fllen wird mit !OP der Opera-Browser ausgeschlossen fr den Fall,
dass die Nutzereinstellungen die Kenntnis dieser Objekte ermglichen.

Funktion getElem() Elementobjekt ermitteln

Beispielaufrufe:
Elementobjekt = getElem("id","Hinweis",null);
Elementobjekt = getElem("name","Eingabefeld",0);
Elementobjekt = getElem("tagname","p",8);
Layerobjekt = getElem("index",2,null,null);

Diese Funktion ist eigentlich die zentrale Funktion der hier vorgestellten Biblothek. Sie greift auf
ein bestimmtes Element im Dokument zu und gibt das Objekt dieses Elements zurck. Das
funktioniert mit DOM-fhigen Browsern ebenso wie mit dem lteren Internet Explorer 4.x und
in eingeschrnkter Form (nur im Zusammenhang mit layer- oder div-Elementen) auch mit
Netscape 4.x.
In den meisten Fllen mssen Sie diese Funktion nicht selber aufrufen. Es handelt sich vielmehr
um eine Basisfunktion, die von den brigen Funktionen der Bibliothek benutzt wird. Dennoch
gibt es auch Flle, in denen ein Direktaufruf dieser Funktion Sinn macht. Die Funktion erwartet
folgende Parameter:
p1 ist die Art und Weise, wie auf ein Element zugegriffen werden soll. Es gibt vier erlaubte
Werte fr diesen Parameter: "id", "name", "tagname" und "index". bergeben Sie "id",
wenn Sie auf ein Element zugreifen wollen, das ein id-Attribut hat, z.B. <div id="Bereich">.
bergeben Sie "name", wenn das Element, auf das Sie zugreifen wollen, kein id-Attribut, aber
dafr ein name-Attribut hat, z.B. <a name="Anker">. bergeben Sie "tagname", wenn das
Element, auf das Sie zugreifen wollen, weder ein id- noch ein name-Attribut hat. bergeben
Sie "index" nur dann, wenn es sich um Netscape-Layer handelt, die ber das layers-Objekt
mit Hilfe von Indexnummern angesprochen werden sollen.
p2 ist die nhere Angabe zu dem, was Sie bei p1 festgelegt haben: Wenn Sie bei p1 den Wert
"id" bergeben, dann erwartet die Funktion bei p2 den Wert des id-Attributs. Wenn Sie bei
p1 den Wert "name" bergeben, dann erwartet p2 den Wert des name-Attributs. Wenn Sie bei
p1 den Wert tagname bergeben haben, dann erwartet p2 den gewnschten Elementnamen,
also z.B. h1 oder div. Wenn Sie bei p1 den Wert "index" bergeben haben, erwartet p2 die
Indexnummer fr den gewnschten Netscape-Layer.
p3 wird nur dann bentigt, wenn bei p1 einer der beiden Werte "name" oder "tagname"
angegeben wurde. In diesem Fall mssen Sie bei p3 eine Indexnummer angeben, mit der Sie
festlegen, das wievielte Element im Dokument mit dem entsprechenden Namen oder Elementnamen Sie meinen. Das erste Element hat die Indexnummer 0, das zweite Nummer 1
usw.
bergeben Sie bei Parametern, fr die Sie keinen Wert angeben, einfach das Wort null (ohne
Anfhrungszeichen!).
Die Funktion getElem() geht der Reihe nach die mglichen DHTML-Modelle durch und fragt
zuerst mit if(DOM) die globale Variable DOM daraufhin ab, ob DOM-Syntax verfgbar ist. Wenn
ja, dann wird abhngig von den bergebenen Parametern das gewnschte Element nach DOM-

22.1 Allgemeine DHTML-Bibliothek

1073

Syntax ermittelt und zurckgegeben. Nur wenn keine DOM-Syntax verfgbar ist, wird versucht,
die lteren DHTML-Modelle anzuwenden. Zunchst wird mit if(MS) geprft, ob das ltere
DHTML-Modell von Microsoft verfgbar ist. Wenn ja, wird das Element nach dessen Syntax
ber das document.all-Objekt ermittelt. Wenn auch die Microsoft-Syntax nicht greift, bleibt
noch die ltere Netscape-Syntax, die mit if(NS) abgefragt wird. In diesem Fall wird aus den
bergebenen Parametern der Zugriff auf ein Layer-Objekt konstruiert.
Gleichzeitig erfolgt in der Funktion eine Fehlerbehandlung. In jedem Zweig der Funktion wird
mit dem typeof-Operator geprft, ob das gewnschte Element berhaupt existiert und ob
dieses ein Objekt darstellt. Tritt dieser Fall ein, wird das Element erzeugt und zurckgegeben.
Andernfalls wird mit Hilfe des void-Operators undefined zurckgegeben.

Funktion getCont() Elementinhalt ermitteln

Beispielaufrufe:
if(! NS) Elementinhalt = getCont("id","Hinweis",null);
if(! NS) Elementinhalt = getCont("name","Verweis",3);
if(! NS) Elementinhalt = getCont("tagname","p",8);

ber diese Funktion, die ihrerseits auf die Funktion getElem() zurckgreift, knnen Sie auf
bequeme Weise den Inhalt eines Elements ermitteln zumindest wenn das DOM-Modell oder
das ltere Microsoft-Modell fr DHTML verfgbar sind. Das ltere Netscape-Modell kennt kein
Auslesen von Elementinhalten. In den Beispielaufrufen ist der Funktionsaufruf deshalb davon
abhngig gemacht, dass nicht nach lterer Netscape-Syntax gearbeitet wird (if(!NS)).
Die Funktion liefert bei Verwendung des DOM-Modells eine leere Zeichenkette zurck, falls der
Inhalt des Elements kein Text ist, sondern ein weiteres Element. Wenn also beispielsweise notiert
ist:
<p>der Text</p>

dann liefert die Funktion den Wert der Text zurck. Wenn aber notiert ist:
<p><b>der Text</b></p>

dann liefert die Funktion bei Anwendung des DOM-Modells eine leere Zeichenkette zurck, da
es keinen Text als Elementinhalt von p gibt, sondern der Inhalt ein anderes Element, nmlich ein
b-Element ist.
Die Parameter sind bei getCont() die gleichen wie bei getElem(). Nur der Wert "index" bei
Parameter p1 wird von dieser Funktion nicht verarbeitet. bergeben Sie bei Parametern, fr die
Sie keinen Wert angeben, das Wort null.
Die Funktion getCont() bedient sich also der Basisfunktion getElem() und reicht ihre drei
bergebenen Parameter einfach an jene durch. Bei DOM-Syntax versucht sie, an den Textinhalt
des Elements mit firstChild.nodeValue zu kommen, bei Microsoft-Syntax ber die Eigenschaft innerText des all-Objekts. An der Art, wie die Funktion getCont() die Funktion
getElem() aufruft, knnen Sie auch sehen, wie Sie die Basisfunktion getElem() anderweitig
direkt aufrufen knnen. Da diese Funktion ein Elementobjekt zurckgibt, knnen Sie direkt
Eigenschaften und Methoden eines solchen Objekts an den Funktionsaufruf hngen. Allerdings
mssen Sie dazu selber abfragen, nach welchem Modell gearbeitet wird. Wenn nach DOM-

1074

Kapitel 22: DHTML Praxis-Lsungen

Modell gearbeitet wird (abfragbar mit if(DOM)), drfen beim Aufruf von getElem() Methoden
und Eigenschaften der HTML-Elementobjekte angehngt werden oder auch solche des nodeObjekts.
Die Funktion getCont() kmmert sich auch um Browser wie Opera, die Inhalte noch nicht
dynamisch lesen knnen, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch
unternommen wird, Inhalte zu lesen, fragt sie mit if (DOM && getElem(p1,p2,p3) &&
getElem(p1,p2,p3).firstChild)) ab, ob das gewnschte Objekt existiert und ob auch das
Objekt firstChild vorhanden ist. Erst wenn diese Bedingung erfllt ist, wird versucht, den
Inhalt zu lesen. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

Funktion getAttr() Attributinhalt ermitteln

Beispielaufrufe:
Attribut=getAttr("name","Bildname",0,"height");
Attribut=getAttr("id","Bereich",null,"id");
if (!NS) Attribut=getAttr("name","Anker",0,"href")
if (NS) Attribut=getAttr("name","links",0,"href")

ber diese Funktion, die ihrerseits auf die Funktion getElem() zurckgreift, knnen Sie auf
bequeme Weise den Wert eines Attributs in einem Element ermitteln zumindest wenn das
DOM-Modell oder das ltere Microsoft-Modell fr DHTML verfgbar sind. Fr einige Objekte
ist es auch im Netscape 4 mglich. Neben den drei bereits bekannten ersten Parametern erwartet
diese Funktion einen vierten Parameter p4. Bei diesem mssen Sie den Namen des gewnschten
Attributs bergeben. bergeben Sie bei Parametern, fr die Sie keinen Wert angeben, das Wort
null.
Die Funktion getAttr() benutzt die Objektmethoden getAttribute(), die sowohl im DOMModell als auch im lteren Microsoft-Modell verfgbar sind.
Bei Netscape 4 dagegen wird die gewnschte Eigenschaft direkt abgefragt. Bei diesem Browser ist
es in einigen Fllen nur mglich, ber Unterobjekte auf die gewnschte Eigenschaft zuzugreifen,
z.B. bei Verweisen und Ankern. Sie knnen darauf zugreifen, indem Sie im Parameter p2 den
Namen des Unterobjektes (z.B. links oder elements) und im Parameter p3 den Namen bzw.
die Indexnummer des Objektes notieren.
Die Auswahl des richtigen Objekts bernimmt die Basisfunktion getElem(). Natrlich erfolgt
auch in jedem Fall die berprfung, ob das gewnschte Objekt berhaupt existiert.

Funktion setCont() Elementinhalt neu dynamisch ndern:

Beispielaufrufe:
setCont("id","Hinweis",null,"neuer Hinweistext");
setCont("name","Verweis",3,"neuer Verweistext");
setCont("tagname","p",8,"neuer Textinhalt des Elements");
if(NS) setCont("index","2",null,"neuer Inhalt des Layers");

Mit dieser Funktion knnen Sie den Inhalt eines Elements dynamisch ndern. Die Funktion
setCont() bedient sich fr den Zugriff auf das gewnschte Element der Basisfunktion

22.1 Allgemeine DHTML-Bibliothek

1075

getElem(). Die ersten drei Parameter, die bei dieser Funktion die gleichen sind wie bei den
brigen Funktionen, werden dazu an getElem() weitergereicht. Als vierten Parameter p4
erwartet die Funktion setCont() den gewnschten Textinhalt. Beachten Sie, dass dieser Text

zumindest beim DOM-Modell und beim lteren Microsoft-Modell nur als reiner Text interpretiert wird. HTML-Formatierungen im Text werden dabei als Klartext interpretiert.
bergeben Sie bei Parametern, fr die Sie keinen Wert angeben, das Wort null. Bei NetscapeLayern benutzt die Funktion setCont() automatisch die blichen Befehle zum ffnen des
Layer-Dokuments (document.Layer.document.open()), zum Schreiben (document.Layer.
document.write()) und zum Schlieen (document.Layer.document.close()).
Die Funktion setCont() kmmert sich auch um Browser wie Opera, die Inhalte noch nicht
dynamisch ndern knnen, jedoch andere Teile der Bibliothek interpretieren. Bevor der Versuch
unternommen wird, Inhalte zu ndern, fragt sie mit if (DOM && getElem(p1,p2,p3) &&
getElem(p1,p2,p3).firstChild)) ab, ob das gewnschte Objekt existiert und ob auch das
Objekt firstChild existiert. Erst wenn diese Bedingung erfllt ist, versucht sie den Inhalt zu
ndern. Dadurch wird in jedem Fall eine Fehlermeldung vermieden.

22.1.2

Test der DHTML-Bibliothek

Das folgende Beispiel zeigt, wie Sie die DHTML-Bibliothek verwenden knnen. Die einzelnen
Funktionen werden in dieser Beispieldatei mit konkreten Beispielen aufgerufen. Am besten
knnen Sie die Funktionsweise testen, wenn Sie das Anzeigebeispiel mal mit verschiedenen
Browsern aufrufen. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!-function Testen() {
var Ausgabetext = "";
if(DHTML) Ausgabetext += "DHTML ist aktiviert!\n"
else

Ausgabetext += "DHTML ist nicht aktiviert!\n";

if(DOM)

Ausgabetext += "DOM wird untersttzt!\n";

else

Ausgabetext += "DOM wird nicht untersttzt!\n";

if(MS)

Ausgabetext += "Alte Microsoft-Technologie ohne DOM!\n";

if(NS)

Ausgabetext += "Alte Netscape-Technologie ohne DOM!\n";

h1_Inhalt = getCont("tagname","h1",0);
if(h1_Inhalt)

Ausgabetext += "Inhalt des h1-Elements: " + h1_Inhalt + "!\n";

else

Ausgabetext += "Inhalt des h1-Elements konnte nicht ermittelt

werden!\n";
p_Inhalt = getCont("id","Hinweisabsatz",null);
if(p_Inhalt)

Ausgabetext += "Inhalt des p-Elements: " + p_Inhalt + "!\n";

else

Ausgabetext += "Inhalt des p-Elements konnte nicht ermittelt

werden!\n";

1076

Kapitel 22: DHTML Praxis-Lsungen

if (NS)

Verweis = getAttr("name","anchors","Anker","text");

else Verweis = getCont("name","Anker",0);

if(Verweis)

Ausgabetext += "Verweistext: " + Verweis + "!\n";

else

Ausgabetext += "Verweistext konnte nicht ermittelt werden!\n";

h1_align = getAttr("tagname","h1",0,"align");
if(h1_align)

Ausgabetext += "Ausrichtung des h1-Elements: " + h1_align +

"!\n";
else

Ausgabetext += "Ausrichtung des h1-Elements konnte nicht

ermittelt werden!\n";
Bild_hoehe= getAttr("name","auge",0,"height");
if(Bild_hoehe) Ausgabetext += "Bildhhe: " + Bild_hoehe + "px.\n";
else

Ausgabetext += "Die Bildhhe konnte nicht ermittelt werden!\n";

Bereich_id = getAttr("id","Bereich",null,"id");
if(Bereich_id) Ausgabetext += "id-Name des Bereichs: " + Bereich_id + "!\n";
else

Ausgabetext += "id-Name des Bereichs konnte nicht ermittelt

werden!\n";
setCont("id","Bereich",null,"Tests sind fertig!");
alert(Ausgabetext);
}
//-->
</script>
<style type="text/css">
<!-#Bereich {position:absolute; top:200px; left:10px; width:500px; height:100px; }
-->
</style>
</head><body>
<h1 align="left">Test der dhtml.js</h1>
<hr noshade size="1">
<p id="Hinweisabsatz">Die Tests testen die Funktionen der DHTML-Bibliothek</p>
<p><img name="auge" src="../../../src/auge.gif" width="24" height="16"
border="0" alt="Testbild">
<a name="Anker" href="javascript:Testen()">Test starten</a></p>
<div id="Bereich">&nbsp;</div>
</body></html>

Das Beispiel enthlt im sichtbaren Bereich der HTML-Datei eine berschrift erster Ordnung,
einen Textabsatz, einen weiteren Textabsatz mit einem Verweis, vor dem auerdem eine Grafik
eingebunden ist, und schlielich einen div-Bereich, der mit Hilfe von CSS absolut positioniert
ist. Die entsprechenden CSS-Angaben zur Positionierung stehen im Dateikopf in einem styleBereich, wo die Formate fr #Bereich notiert sind. Generell ist es wegen einiger Schwchen von
Netscape 4.x besser, die CSS-Formatierungen der simulierten Layer in einem zentralen Stylesheet
gleich im Dateikopf zu notieren und nicht im einleitenden <div>-Tag.

22.1 Allgemeine DHTML-Bibliothek

1077

22.1: Das Ergebnis der Testroutine bei Netscape 6.2.

Im Dateikopf sind ferner zwei JavaScript-Bereiche definiert. Der erste ist leer und bindet lediglich die DHTML-Bibliothek ein, die in der externen JavaScript-Datei dhtml.js gespeichert ist. Der
zweite Script-Bereich enthlt den JavaScript-Code, der die Testaufrufe durchfhrt.
Das JavaScript innerhalb des Dateikopfes wird aufgerufen, wenn der Anwender auf den Verweis
klickt, der in der Datei notiert ist. Dann wird die Funktion Testen() aufgerufen. Diese Funktion
wie auch das gesamte JavaScript kann ohne weitere Umwege auf alle globalen Variablen und die
Funktionen der DHTML-Bibliothek zugreifen. Zunchst greift die Funktion Testen() auf die
initialisierten globalen Variablen der DHTML-Bibliothek zu und prft, welches DHTML-Modell
verfgbar ist. Abhngig davon, was verfgbar ist, wird die Variable Ausgabetext um einen Text
erweitert.
Als Nchstes wird mit der Funktion getCont() aus der DHTML-Bibliothek gespielt. Mit
getCont("tagname","h1",0) wird via Elementname auf das erste h1-Element (Indexzhler 0)
zugegriffen. Der Rckgabewert von getCont() wird in der Variablen h1_Inhalt gespeichert.
Abhngig davon, ob diese nach dem Funktionsaufruf eine Zeichenkette mit einer Lnge grer 0
enthlt (if(h1_Inhalt)), wird die Variable Ausgabetext wieder um einen weiteren Text
erweitert.
Zwei weitere Aufrufe von getCont() folgen, die andere Varianten der Parameterversorgung
ausprobieren. Mit getCont("id","Hinweisabsatz",null) wird auf das Element mit dem
Attribut id="Hinweisabsatz" zugegriffen. Mit getCont("name","Anker",0) wird auf das
erste Element im Dokument zugegriffen, bei dem das Attribut name="Anker" notiert ist. Da
auch mit Netscape 4 auf den Text eines Verweises zugriffen werden kann, wird fr diesen Browser nicht die Funktion getCont() aufgerufen, sondern getAttr(). Bercksichtigt wurde

1078

Kapitel 22: DHTML Praxis-Lsungen

zudem, dass sobald ein Verweis gleichzeitig ein Anker ist, der Verweistext nur ber das Anchorobjekt ausgelesen werden kann.
Daran anschlieend probiert die Funktion Testen() die Bibliotheksfunktion getAttr() mit
drei Aufrufen aus, einmal ber den Elementnamen, einmal ber den Tag-Namen und einmal
ber das id-Attribut. Schlielich wird auch noch setCont() aufgerufen. Damit es in allen
Browsern inklusive Netscape 4.x funktioniert, wird der Inhalt des absolut positionierten divBereichs neu gesetzt, den Netscape als Layer erkennt. Am Ende gibt die Funktion Testen() die
gesammelten Einzelergebnisse, die sie in der Variablen Ausgabetext zusammengetragen hat, in
einem Meldungsfenster aus.

22.1.3 DHTML-Bibliothek erweitern

Die hier vorgestellte DHTML-Bibliothek leistet nur einige wenige Grundfunktionen, erleichtert
den Zugriff auf Elemente etwas und macht in vielen Fllen den JavaScriptCode etwas bersichtlicher und besser lesbar. Es gibt aber noch vieles, was sie nicht leistet. Wenn Sie hufig mit Dynamischem HTML arbeiten, empfiehlt es sich, die DHTML-Bibliothek um eigene, andere Funktionen zu erweitern. Wichtig ist bei so einer Funktionen-Bibliothek, dass alle Funktionen allgemein geschrieben sind. Deshalb erwarten die Funktionen in der Regel mehrere Parameter, um
ihren Input fr die zu verarbeitenden Daten zu erhalten.
Denkbar wren beispielsweise noch Funktionen, die direkt auf CSS-Eigenschaften von Elementen zugreifen, oder Funktionen, die in der Lage sind, ein Element dynamisch neu zu positionieren. Ausgegend davon sind auch Funktionen mglich, die bestimmte Bewegungsablufe wie
Kreisbahnen usw. berechnen und Elemente entsprechend positionieren. Andere denkbare Funktionen knnten sich dem leider noch ziemlich komplizierten, weil sehr unterschiedlich implementierten Event-Handling widmen und dort einiges vereinfachen.
Eine Funktionen-Bibliothek sollte andererseits jedoch nicht zu gro werden. Denn wenn Sie am
Ende zig Kilobyte externes JavaScript einbinden, um drei triviale Anweisungen zu notieren, dann
ist eine Funktionen-Bibliothek nicht angemessen. In solchen Fllen ist es besser, die paar Befehle
ohne Zuhilfenahme einer Funktionen-Bibliothek zu notieren. Achten Sie stets darauf, dass Ihre
Bibliotheken eine Fehlerhandlung durchfhren und jeweils die Verfgbarkeit der angesprochenen Objekte berprft.

22.2

Dynamische Navigationsleiste

22.2.1 Hinweise zu diesem Beispiel

Auf vielen Web-Seiten nimmt die Navigation eigentlich viel zu viel Platz weg. Da wird oft ein
Drittel des Anzeigefensters geopfert, um eine oder zwei Handvoll Links zu anderen Projektseiten
anzubieten. Mit diesen Platzproblemen macht das Beispiel auf dieser Seite Schluss. Bei dieser
Lsung gehrt die Web-Seite der freien inhaltlichen Gestaltung und dem Text. Die Navigation
blendet sich nur dann ein, wenn der Anwender es will. Dazu muss er auch nicht extra irgendwo
hinklicken. Er bewegt einfach die Maus Richtung linken Fensterrand, und schon blendet sich
dort die Navigationsleiste ein. Bewegt er die Maus wieder weg vom linken Fensterrand, blendet

22.2 Dynamische Navigationsleiste

1079

sich die Navigationsleiste automatisch wieder aus. Diesen Effekt kennen viele Anwender in hnlicher Form von der Windows-Taskleiste und sind deshalb damit vertraut.
Das Beispiel funktioniert mit den Browsern ab der 4er-Generation. Das Beispiel zeigt vor allem,
wie man das Problem der unterschiedlichen Event-Handling-Modelle bei den Browsern in den
Griff bekommen kann. Das Beispiel benutzt ferner die DHTML-Bibliothek, um auf Elemente
zuzugreifen.

22.2.2

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei mit der dynamischen Navigation. Wenn Sie die
Navigation auf mehreren Seiten haben wollen, mssen Sie den JavaScript-Code entweder in alle
Seiten einbauen, oder Sie lagern ihn in eine externe JavaScript-Datei aus und binden diese einfach nur ein.
Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

22.2:

Die Navigationsleiste klappt erst auf, wenn der Mauszeiger in den linken Fensterbereich
kommt.

Das Beispiel:
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!-function Menue() {
if(DOM) {
if(MS)

1080

Kapitel 22: DHTML Praxis-Lsungen

getElem("id","Nav",null).style.top = document.body.scrollTop + 50;

else
getElem("id","Nav",null).style.top = window.pageYOffset + 50;
}
if(DOM || MS) {
if (!DOM) getElem("id","Nav",null).style.top = document.body.scrollTop + 50;
if (OP) getElem("id","NavLinks",null).style.pixelTop = NavLinksPos;
getElem("id","Nav",null).style.visibility = "visible";
}
else if(NS) {
getElem("id","Nav",null).visibility = "show";
getElem("id","Nav",null).top = window.pageYOffset + 50;
}
}
function noMenue() {
if(DOM || MS)
getElem("id","Nav",null).style.visibility = "hidden";
if(NS)
getElem("id","Nav",null).visibility = "hide";
}
function handleMove(ev) {
if(!MS) {
Event = ev;
if(Event.screenX < 270)
Menue();
else if(Event.screenX > 420)
noMenue();
}
}
function MShandleMove() {
if(MS) {
if(window.event.clientX < 270)
Menue();
else if(window.event.clientX > 420)
noMenue();
}
}
function Event_init() {
if(DOM && !MS && !OP) {
getElem("tagname","body",0).addEventListener("mousemove", handleMove, true);
}
if(NS) {
document.captureEvents(Event.MOUSEMOVE);

22.2 Dynamische Navigationsleiste

1081

document.onmousemove=handleMove;
}
if (DOM && OP) {
document.onmousemove=handleMove;
NavLinksPos=42; //Position des Bereiches NavLinks
getElem("id","NavLinks",null).style.pixelTop=NavLinksPos;
}
if (MS) getElem("tagname","body",0).onmousemove=MShandleMove;
}
//-->
</script>
<style type="text/css">
<!-body { margin-left:50px; margin-top:20px; margin-right:50px; }
#Nav { position:absolute; top:50px; left:0px; padding:0px; visibility:hidden;
margin:0px; }
#NavLinks { position:absolute; top:42px; left:42px; padding:0px; }
a.nav:link

{ color:#000080;

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }

a.nav:visited { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }
a.nav:hover

{ color:#FFFFFF; background-color:#000080;

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }

a.nav:active

{ color:#000080;

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }

-->
</style>
</head>
<body onLoad="Event_init()" background="navigation_back.gif" bgcolor="#FFFFFF">
<div id="Nav">
<img src="navigation.gif" width="250" height="450" border="0" alt="">
<div id="NavLinks">
<style type="text/css">
<!-a.nav:link

{ color:#000080;

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }

a.nav:visited { color:#000080;
font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }
a.nav:hover

{ color:#FFFFFF; background-color:#000080;

1082

Kapitel 22: DHTML Praxis-Lsungen

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-

decoration:none; }
a.nav:active

{ color:#000080;

font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; textdecoration:none; }

-->
</style>
<a class="nav" href="http://selfhtml.teamone.de/"><b>SELFHTML</b></a><br>
<a class="nav" href="http://selfaktuell.teamone.de/"><b>SELFHTML
aktuell</b></a><br>
<a class="nav" href="http://selfforum.teamone.de/"><b>SELFHTML Forum</b></a><br>
<a class="nav" href="http://selfaktuell.teamone.de/artikel/"><b>Feature
Artikel</b></a><br>
</div>
</div>
<h1>Die Seite mit der pfiffigen Navigation</h1>
<p>Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Men&uuml; wieder wegzubekommen, Maus wieder zum rechten Fensterrand
bewegen.</p>
<p>Und jetzt kommen noch etliche leere Abs&auml;tze, damit auch sichtbar wird,
da&szlig; das Men&uuml; immer an der gleichen Stelle angezeigt wird, egal wie weit
man
scrollt.</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>Na, das d&uuml;rfte reichen :-)</p>
</body></html>

Im sichtbaren HTML-Bereich der Datei ist zunchst ein grerer div-Bereich notiert, der mit
Hilfe von CSS-Eigenschaften absolut positioniert ist (die Angaben dazu stehen im style-Bereich
im Dateikopf) und dabei auch die Angabe visibility:hidden enthlt. Das bedeutet, alles, was
sich in diesem Bereich befindet, wird zunchst einmal gar nicht angezeigt. Innerhalb dieses
Bereichs mit dem id-Namen Nav ist zunchst eine Grafik notiert (navigation.gif) und anschlieend ein weiterer, absolut positionierter div-Bereich, wobei aber dort CSS-Zuweisungen wie
top:42px oder left:42px als relativ zur oberen linken Ecke des Eltern-div-Bereichs zu inter-

22.2 Dynamische Navigationsleiste

1083

pretieren sind. Die Grafik navigation.gif ist einfach eine optische Unterlage fr den nachfolgenden div-Bereich, der die eigentlichen Verweise der Navigationsleiste enthlt.
Der Rest des in der Datei notierten statischen HTML-Codes ist fr das Beispiel irrelevant. Die
vielen Textabstze mit dem erzwungenen Leerzeichen &nbsp; dazwischen dienen nur dazu, viel
Dokumenthhe zu erzeugen, sodass man in der Datei scrollen kann. Denn es soll demonstriert
werden, dass die dynamische Navigationsleiste immer an der gleichen Stelle erscheint, auch
wenn im Dokument gescrollt wird.
Im einleitenden <body>-Tag der Datei ist der Event-Handler onLoad notiert. Wenn das Dokument vollstndig geladen ist, wird die Funktion Event_init() aufgerufen. Event_init() stt
die berwachung der Mausbewegungen im Dokument an. Denn nur wenn eine solche berwachung stattfindet, kann die Navigationsleiste dynamisch eingeblendet werden.
Event-Handling ist leider ein schwieriges Kaptiel, da die Implementierungen bislang doch noch
recht unterschiedlich sind. Das Beispiel versucht es erst mal nach der neueren DOM-Syntax. Die
Abfrage if(DOM && !MS && !OP) stellt sicher, dass der Internet Explorer und Opera 5.12 in diesen
Ausfhrungszweig noch nicht gelangen, da beide in der Version 5.x zwar DOM-Elementzugriffe,
aber noch kein Event-Handling nach DOM-Syntax interpretieren. In den entsprechenden Zweig
gelangt aber Netscape 6.x, der die Methode addEventListener() versteht, mit der nach DOMSyntax ein Funktion bestimmt wird, die aufgerufen wird, wenn ein bestimmtes Ereignis eintritt.
Im Beispiel wird das Ereignis mousemove berwacht. Whrend der Anwender im Dokumentbereich die Maus bewegt, bewirkt diese Registrierungs-Anweisung, dass dann so oft es geht die
Funktion handleMove() aufgerufen wird. Zur Bestimmung des zu berwachenden Elementes
wird die Funktion getElem() der DHTML-Bibliothek aufgerufen.
Mit if(NS) fragt die Funktion Event_init() ab, ob ein Netscape-Browser der 4er-Generation
am Werk ist. Dort gibt es ebenfalls eine Registrierung fr Ereignisse. Mit document.captureEvents(Event.MOUSEMOVE) wird das Ereignis Mausbewegung registriert, und mit document.
onmousemove=handleMove wird die Funktion handleMove() aufgerufen, wenn das Ereignis
eintritt.
Der Anweisung if (DOM && OP) folgen DHTML-fhige Opera-Browser. Hier erfolgt die Initialisierung der Event-berwachung mit document.onmousemove=handleMove. Da Opera 5 unter
Windows offensichtlich die Position des div-Bereich NavLinks vergisst, wird die im StylessheetBereich festgelegte Position in der Variablen NavLinksPos gespeichert. Anschlieend wird der
Bereich NavLinks neu positioniert. Damit auch ltere Versionen von Opera 5 damit zurecht
kommen, wird die Eigenschaft pixelTop verwendet. Zur Bestimmung des Elementes wird die
Funktion getElem() der DHTML-Bibliothek aufgerufen.
Beim Internet Explorer gestaltet sich die Ereignisbehandlung leider etwas anders. Mit if (MS)
wird in der Funktion Event_init() der fr den MS Internet Explorer gltige Bereich abgearbeitet. Auch hier wird wieder die Funktion getElem() der DHTML-Bibliothek verwendet. Im
Gegensatz zu den anderen Browsern wird hier die Funktion MShandleMove() aufgerufen, wenn
das Ereignis eintritt. Dort wird mit if(MS) sichergestellt, dass kein anderer Browser als ein
Internet Explorer am Werk ist. Abhngig davon wird mit window.event.clientX der Abstand
des Mauszeigers vom linken Fensterrand ermittelt. Wenn er geringer ist als 270 Pixel, wird die
Funktion Menue() aufgerufen. Wenn er hher als 420 Pixel ist, die Funktion noMenue(). Genau
das Gleiche passiert auch in der Funktion handleMove(), in die die Netscape-Browser gelangen.
Dort wird der Abstand des Mauszeigers vom linken Fensterrand allerdings mit der screenX-

1084

Kapitel 22: DHTML Praxis-Lsungen

Eigenschaft abgefragt. Das sind die tausend kleinen Unterschiede zwischen den Browsern, die
Programmierer zum Wahnsinn treiben knnen. Immerhin wird irgendwann diese ganze ifWeiche entfallen und alle Browser werden die DOM-Syntax verstehen.
Die Funktion Menue() blendet die Navigationsleiste ein, und die Funktion noMenue() sorgt
dafr, dass die Navigationsleiste nicht oder nicht mehr sichtbar ist. Beide Funktionen fhren zu
diesem Zweck wieder diverse if-Abfragen zur DHTML-Modellunterscheidung durch und ndern letztendlich hauptschlich die CSS-Eigenschaft visibility (Sichtbarkeit) des groen divBereichs mit dem Id-Namen Nav. Die Funktion Menue() sorgt allerdings auerdem dafr, dass
der von ihr auf sichtbar geschaltete Navigationsbereich auch immer schn im sichtbaren Bereich
des Dokuments angezeigt wird, egal, wohin der Anwender im Dokument gescrollt hat. Dazu
muss die Funktion die aktuelle Pixelposition der Klopapierrolle ermitteln, die ein langes
Dokument darstellt. Auch dabei ist die Syntax leider wieder vllig unterschiedlich bei den
Browsern. Beim Internet Explorer kommt die Funktion ber die Eigenschaft document.body.
scrollTop an den gewnschten Wert, und bei Netscape-Browsern und Opera ber window.
pageYOffset. Zu dem ermittelten Wert werden noch mal 50 Pixel dazugezhlt, denn in dem
div-Bereich mit dem Id-Namen Nav ist ja als top-Angabe, also als Startposition von oben
gesehen, ebenfalls der Wert 50 angegeben.
Da Opera 5 beim ndern der Fenstergre mit JavaScript gesetzte Positionen vergisst, wird
vor jedem Einblenden des Mens dem Bereich NavLinks die in der Variablen NavLinksTop
gespeicherte Position zugewiesen.
Vielleicht fragen Sie sich jetzt noch, woher die Werte 270 und 420 fr die Mausposition vom
linken Fensterrand kommen, die ber den Aufruf von Menue() und noMenue() entscheiden.
Dazu kann man nicht viel mehr sagen, als dass es mit verschiedenen Browsern ausgetestete
Erfahrungswerte sind. In der Regel funktioniert es beispielsweise nicht mehr, wenn der kleinere
Wert kleiner als 250 ist. Warum, bleibt rtselhaft. Aber diese Rtselhaftigkeiten gehren leider
zum Alltag der DHTML-Programmierung, solange die JavaScript-Interpreter der Browser
immer noch nicht ausgereift sind.
Beachten Sie: Erklren Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation
verwenden, kurz mit einem Satz das Handling der Navigation. Seien Sie sich auch im Klaren
darber, dass Anwender mit nicht DHTML-fhigen Browsern oder deaktiviertem JavaScript so
wie das Beispiel oben notiert ist berhaupt keine Mglichkeit zur Navigation haben. Um zumindest Anwendern, die JavaScript deaktiviert haben, ein Navigieren zu ermglichen, knnten Sie
beispielsweise an einer geeigneten Stelle im normalen Text einen noscript-Bereich notieren, in
dem Sie die Navigationsverweise noch mal notieren.

22.3

Laufende Datums-/Uhrzeitanzeige

22.3.1 Hinweise zu diesem Beispiel

Dieses Beispiel zeigt, wie Sie eine laufende Uhr, die Sie beliebig formatieren knnen, so realisieren knnen, dass sie ab Internet Explorer V4.x und Netscape V4.x funktioniert. In der Praxis
eignet sich eine solche laufende Uhr z.B. fr Seiten, die dauerhaft eingeblendet werden, z.B. in
einem Frame-Fenster, dessen Inhalt sich beim Surfen nicht ndert, oder auf Seiten, die Multimedia-Spiele oder einen eingebetteten Chat enthalten also auf Seiten, die der Anwender lange

22.3 Laufende Datums-/Uhrzeitanzeige

1085

anzeigt, ohne darin weiterzuscrollen oder die Seite zu verlassen. Das Beispiel benutzt die
DHTML-Bibliothek, um das zu leisten, was in dem Beispiel an dynamischem HTML erforderlich
ist.

22.3: Hier kommt die Uhr: Whrend der Surfer die Web-Seite durchliest, luft die Uhrzeit weiter.

22.3.2

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei, in der die laufende Datums-/Uhrzeitanzeige
eingebettet ist. Die Datei dhtml.js, in der die Funktionen der DHTML-Bibliothek enthalten sind,
muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei. Ein Beispiel:
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!-function ZeitAnzeigen() {
var Wochentagname =

new

Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if(Jahr < 999) Jahr += 1900;
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Sekunden = Jetzt.getSeconds();
var WoTag = Jetzt.getDay();
var Vortag

= ((Tag < 10) ? "0" : "");

var Vormon

= ((Monat < 10) ? ".0" : ".");

var Vorstd

= ((Stunden < 10) ? "0" : "");

var Vormin

= ((Minuten < 10) ? ":0" : ":");

var Vorsek

= ((Sekunden < 10) ? ":0" : ":");

var Datum = Vortag + Tag + Vormon + Monat

+ "." + Jahr;

var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;

var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit;

1086

Kapitel 22: DHTML Praxis-Lsungen

if(DHTML) {
if(NS) setCont("id","Uhr",null,"<span class=\"Uhr\">" + Gesamt + "<\/span>");
else

setCont("id","Uhr",null,Gesamt);

}
else return;
window.setTimeout("ZeitAnzeigen()",1000);
}
//-->
</script>
<style type="text/css">
<!-#Uhr { position:absolute; top:10px; left:10px; }
#RestDerSeite { position:absolute; top:50px; left:10px; }
.Uhr { font-family:Arial; font-size:24px; color:blue; }
.RestDerSeite { font-family:Arial; color:black; }
-->
</style>
</head>
<body onLoad="window.setTimeout(ZeitAnzeigen(),1000)">
<div id="Uhr" class="Uhr">&nbsp;</div>
<div id="RestDerSeite" class="RestDerSeite">
<h1>Willkommen auf dieser Seite</h1>
<p>hier gehts ganz normal weiter</p>
</div>
</body></html>

Im Krper der HTML-Datei im Beispiel werden insgesamt zwei div-Bereiche definiert. Beide
Bereiche erhalten einen id-Namen und ber den jeweiligen id-Namen im style-Bereich im
Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste
Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthlt den gesamten
restlichen Inhalt der Datei, weshalb er auch den Namen RestDerSeite trgt.
Der erste Bereich enthlt zunchst nur ein geschtztes Leerzeichen. So sieht man zunchst noch
nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat.
Ansonsten wrde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fhigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.
Die Beispieldatei enthlt ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion ZeitAnzeigen(), die fr die Zeitanzeige verantwortlich ist. Im einleitenden <body>-Tag ist der
Event-Handler onLoad, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen

22.4 Bilderbuch zum Umblttern

1087

vollstndig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet
die Funktion ZeitAnzeigen(), jedoch eingebettet in eine setTimeout-Anweisung, die den
Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzgert. In der ersten Sekunde wird also noch
nichts angezeigt.
Innerhalb der Funktion ZeitAnzeigen() wird zunchst ein Array fr die deutschen Wochentage definiert. Anschlieend ermittelt die Funktion mit Hilfe des Date-Objekts die aktuelle Zeit.
Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche
Datums-/Uhrzeitdarstellung nach deutscher Konvention enthlt. Diese Zeichenkette wird in der
Variablen mit dem Namen Gesamt gespeichert. All diese Dinge haben noch nichts mit der
Anzeige zu tun.
Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein groes
Problem. Mit if(DHTML) wird zunchst abgefragt, ob berhaupt Dynamisches HTML verfgbar
ist. Der gesamte Code zum dynamischen Schreiben in den div-Bereich wird davon abhngig
gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein
Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem lteren Netscape-Modell
gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den div-Bereich ein klein wenig
anders aus als in den brigen Fllen. Der Grund ist eine weitere Schwche des Netscape 4Browsers. Er wrde die CSS-Klasse Uhr im einleitenden div-Tag ignorieren, wenn man sie ihm
nicht noch mal in Form eines span-Elements mit in den dynamischen Bereich schreiben wrde.
Nur so erhlt die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im styleBereich fr die Uhr-Klasse festgelegt werden. Das dynamische ndern des div-Inhalts geschieht
durch Aufruf der Bibliotheksfunktion setCont(), die sich um alle weiteren Einzelheiten kmmert.
In der letzten Anweisung innerhalb der Funktion ZeitAnzeigen() ruft sich die Funktion selber
wieder auf, und zwar wieder mit einer durch window.setTimeout() bewirkten Zeitverzgerung
von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und
dann wird die Zeit erneut geschrieben.

22.4

Bilderbuch zum Umblttern

22.4.1 Hinweise zu diesem Beispiel

Es gibt Seiten, auf denen Ihre Besucher Bilder sehen wollen. Wenn Sie beispielsweise ber eine
Stadt oder ein Land berichten oder ber ein Treffen mit Freunden, mgen die Besucher gerne
Bilder davon sehen. Das hier vorgestellte Beispiel zeigt, wie man solche Bilder einmal anders
prsentieren kann. Ohne viel scrollen oder andere Seiten aufrufen zu mssen, kann der Anwender in den vorhandenen Bildern vor- und zurckblttern. Damit der Bildaufbau auch mal etwas
anders aussieht als sonst, ist eine Art Vorhang-Auf-Effekt eingebaut. Die Bilder werden nicht
einfach angezeigt, sondern enthllt.

1088

Kapitel 22: DHTML Praxis-Lsungen

22.4: Das Bilderbuch benutzt berblendeffekte zwischen den einzelnen Darstellungen.

22.4.2

Quelltext mit Erluterungen

Das Beispiel zeigt eine vollstndige HTML-Datei mit dem Bilderbuch. Die Datei dhtml.js, in der
die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei. Das Beispiel:
<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!-var Bild = new Array();
Bild[0] = new Image(); Bild[0].src="bilderbuch01.gif";
Bild[1] = new Image(); Bild[1].src="bilderbuch02.gif";
Bild[2] = new Image(); Bild[2].src="bilderbuch03.gif";
Bild[3] = new Image(); Bild[3].src="bilderbuch04.gif";
Bild[4] = new Image(); Bild[4].src="bilderbuch05.gif";
var zeige = 0;
var Breite = 300;
var aktuelleBreite = 0;
var Schrittweite = 6;
var Schrittverzoegerung = 1;
function Blaettern(Richtung) {
zeige = zeige + Richtung;
if(zeige > Bild.length - 1) zeige = 0;
else if(zeige < 0) zeige = Bild.length - 1;
if(DOM || MS)

22.4 Bilderbuch zum Umblttern

1089

getElem("id","Bildbereich",null).style.clip="rect(0 0 225 0)";

if(DOM && !MS && !OP) {
var img = document.createElement("img");
var src = document.createAttribute("src");
src.nodeValue = Bild[zeige].src;
img.setAttributeNode(src);
getElem("id","Bildbereich",null).replaceChild(img,
getElem("id","Bildbereich",null).firstChild);
}
else if(MS) {
document.all.Bildbereich.innerHTML = "<img src=\"" + Bild[zeige].src + "\">";
}
else if(NS) {
getElem("index",0,null).visibility = "hide";
setCont("index",0,null,"<img src=\"" + Bild[zeige].src + "\">");
getElem("index",0,null).clip.right = 0;
getElem("index",0,null).visibility = "show";
}
BildAufbauen();
}
function BildAufbauen() {
if(aktuelleBreite <= Breite) {
if(DOM || MS && !OP)
getElem("id","Bildbereich",null).style.clip="rect(0 "+ aktuelleBreite +" 225
0)";
else if(NS)
getElem("index",0,null).clip.right = aktuelleBreite;
aktuelleBreite = aktuelleBreite + Schrittweite;
window.setTimeout("BildAufbauen()", Schrittverzoegerung);
}
else {
aktuelleBreite = 0;
if(DOM || MS)
getElem("id","Bildbereich",null).style.clip="rect(0 "+ Breite +" 225 0)";
else if(document.layers)
getElem("index",0,null).clip.right = Breite;
}
}
function SEITE_init() {
if(DOM && !MS && !OP) {
img = document.createElement("img");
var src = document.createAttribute("src");
src.nodeValue = Bild[0].src;
img.setAttributeNode(src);
getElem("id","Bildbereich",null).appendChild(img);

1090

Kapitel 22: DHTML Praxis-Lsungen

}
else if(document.all)
document.all.Bildbereich.innerHTML = "<img src=\"" + Bild[0].src + "\">";
else if(NS)
setCont("index",0,null,"<img src=\"" + Bild[0].src + "\">");
}
//-->
</script>
<style type="text/css">
<!-#Bildbereich {
position:absolute; left:10px; top:140px; padding:0px; clip:rect(0 300 225 0);
visibility:show; }
#Navigationsbereich {
position:absolute; left:320; top:140; width:100; font-size:18pt; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" onLoad="SEITE_init()">
<div id="Bildbereich">
</div>
<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)"><b><<</b></a>]
[<a href="javascript:Blaettern(1)"><b>>></b></a>]
</div>
</body>
</html>

Im Krper der HTML-Datei des Beispiels werden zwei div-Bereiche definiert. Der erste <div>Bereich ist zum Anzeigen der jeweils aktuellen Grafik gedacht. Der zweite Bereich enthlt Verweise, mit deren Hilfe der Anwender vorwrts und rckwrts zwischen den Grafiken blttern
kann. Beide Bereiche werden mit Hilfe entsprechender CSS-Eigenschaften absolut positioniert.
Die entsprechenden CSS-Definitionen stehen im Dateikopf im style-Bereich und beziehen sich
auf die id-Namen der Bereiche.
Die Beispieldatei enthlt ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden. Im einleitenden <body>-Tag wird wie
blich die Funktion DHTML_init() aus der eingebundenen DHTML-Bibliothek aufgerufen, um
diese zu initialisieren. Ferner wird aber auch die Funktion SEITE_init() aufgerufen, die im
JavaScript im Dateikopf notiert ist. Diese Funktion sorgt dafr, dass das erste Bild angezeigt
wird.
Damit das Beispiel des Bilderbuches zum Umblttern sauber funktioniert, passiert jedoch schon
vorher etwas. Gleich beim Einlesen der Datei, also auerhalb jeder Funktion, wird der JavaScript-Code ausgefhrt, der zu Beginn des zweiten JavaScript-Bereichs notiert ist. Dort werden

22.4 Bilderbuch zum Umblttern

1091

erst mal alle Grafiken eingelesen, die im Verlauf des Umbltterns angezeigt werden sollen. Denn
nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind, gibt es keine Synchronisationsprobleme. Dazu kommt das images-Objekt von JavaScript zum Einsatz. Zuerst
wird ein neuer, leerer Array angelegt. Dann wird der Array mit Grafikobjekten gefllt. Dem
jeweiligen Image-Objekt, das zu diesem Zweck erzeugt wird, wird ber die src-Eigenschaft eine
gewnschte Grafikdatei zugewiesen. Anschlieend werden noch ein paar globale Variablen definiert, die spter bentigt werden.
Die Funktion SEITE_init() zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an. Dabei ist mal wieder viel Unterscheidungsarbeit ntig, um die
verschiedenen Browser und ihre DHTML-Modelle zu bedienen. Das DOM-Modell ist in diesem
Fall fr den Internet Explorer vorlufig noch nicht anwendbar, da dieser zumindest in der Version 5.x das Erzeugen von Attributknoten nach DOM-Syntax noch nicht untersttzt. Mit der
Abfrage if(DOM && !MS && !OP) werden der Internet-Explorer und auch Opera von der Bearbeitung nach dem DOM-Modell ausgeklammert. Nur Netscape 6.x gelangt in diesen Bereich.
Dort wird mit den Funktionen createElement() und createAttribute() des documentObjekts der HTML-Code fr das neue Bild erzeugt und dann zusammengebastelt. Der Internet
Explorer gelangt dagegen in den Zweig, der mit else if(MS) beginnt. Dort wird sich der
praktischen Methode innerHTML des all-Objekts bedient, um den gewnschten HTML-Code
zusammenzubasteln. Schlielich bleibt noch Netscape 4.x brig, der in den Zweig else if(NS)
gelangt und die Grafik mit der Funktion setCont() aus der DHTML-Bibliothek zusammengesetzt bekommt. An diesem Beispiel sehen Sie deutlich, wie mhsam das Unterscheiden
zwischen Browsern und DHTML-Modellen oft ist. Auerdem knnen Sie sehen, dass das DOMModell bei allen Vorteilen manchmal auch sehr umstndlich zu handhaben ist. Eine Methode
wie innerHTML beim all-Objekt gibt es im DOM nicht, weil dort neue Knoten streng nach den
Regeln der Auszeichnungssprachen-Syntax erstellt und zusammengestellt werden mssen. Opera
ist gegenwrtig noch nicht in der Lage, Inhalte dynamisch zu ndern, und wird komplett ausgeschlossen.
Das Blttern zwischen einzelnen Grafiken wird durch die beiden Verweise im zweiten divBereich angestoen. Beide Verweise rufen die gleiche Funktion namens Blaettern() auf,
jedoch mit unterschiedlicher Parameterbergabe. Der Vorwrtsverweis bergibt 1, der Rckwrtsverweis -1. Dadurch kann die Funktion Blaettern() diesen Parameter gleich zur Verwaltung benutzen.
Die Funktion Blaettern() fragt zunchst ab, ob entweder das erste oder das letzte Bild der
Serie erreicht ist, und legt im entsprechenden Fall wieder das letzte bzw. erste Bild als das anzuzeigende fest. So entsteht ein Endlos-Effekt fr den Anwender beim Blttern. Anschlieend wird
der Inhalt des Anzeigebereichs fr das Bild neu geschrieben, und zwar mit dem neuen Bild.
Dabei muss wieder genauso mhsam zwischen den Fhigkeiten der Browser unterschieden werden wie in der Funktion SEITE_init(). Am Ende wird dann noch die Funktion BildAufbauen() aufgerufen.
Die Funktion BildAufbauen() ist fr den dynamischen Aufroll-Effekt beim Anzeigen der
neuen Grafik zustndig. Dazu wird von der CSS-Eigenschaft clip Gebrauch gemacht. Um sie zu
setzen, kann die Basisfunktion getElem() aus der DHTML-Bibliothek fr den Elementzugriff
verwendet werden. Allerdings ist der Aufruf fr Netscape 4.x anders als bei den anderen Browsern, weshalb wieder eine if-else-Weiche ntig ist. Nach Durchlaufen der Wertvernderung
des rechten Clip-Rands ruft sich die Funktion BildAufbauen() selbst wieder auf, und zwar

1092

Kapitel 22: DHTML Praxis-Lsungen

innerhalb von window.setTimeout(). Dabei kommen die Variablen Schrittweite und

Schrittverzoegerung zum Einsatz, die zu Beginn des Script-Bereichs notiert sind. Probieren
Sie dort bei der anfnglichen Wertzuweisung ruhig auch mal andere Werte aus.
Am Ende, wenn die oberste if-Bedingung der Funktion BildAufbauen() erfllt ist, nmlich dass
die aktuelle Breite grer als die Anzeigebreite der Grafik ist, gelangt die Funktion in den elseZweig. Dort wird der clip-Wert fr rechts auf den Endwert gesetzt, und die Prozedur des
Umbltterns ist abgeschlossen.

1093

23 Internationalisierung

23.1

Computer und geschriebene Sprache

23.1.1 Bits, Bytes und Zeichen

Die beiden Grundeinheiten in jedem heutigen Computer sind die Einheiten Bit und Byte. Ein
Byte ist bei den heute blichen Systemen als Folge von 8 Bit definiert (man spricht auch von
Octets). Da jedes Bit zwei Zustnde haben kann, nmlich 0 oder 1 bzw. ja oder nein, lassen sich
8
mit einer Folge von 8 Bit genau 256 (= 2 ) unterschiedliche Zustnde realisieren. Ein Byte kann
also 256 unterschiedliche Werte haben. Da im Computer immer auch die 0 dazugehrt, knnen
in einem Byte dezimal ausgedrckt Werte zwischen 0 und 255 stehen.
Wenn ein laufendes Programm im Computer eine Datei zeichenweise in den Arbeitsspeicher
einliest, stehen im Arbeitsspeicher anschlieend nur Byte-Werte. Von Zeichen unseres Alphabets
ist auf dieser Ebene noch keine Rede. Damit aus den Byte-Werten lesbare Zeichen werden, die
sich am Bildschirm darstellen lassen, braucht es eine Konvention, die festlegt, welcher Byte-Wert
als welches Zeichen dargestellt werden soll. Diese Aufgabe haben die so genannten Zeichenstze.
Zeichenstze sind Tabellen, die einem Byte-Wert ein Zeichen zuordnen, das in unseren Schriftkulturen eine Bedeutung hat.
Die Zeichenstze sind EDV-historisch gewachsene Gebilde. Bis zum Aufkommen der Personalcomputer benutzten viele Rechner noch 7 Bit lange Grundeinheiten, mit denen sich nur 128
unterschiedliche Zustnde darstellen lassen. Noch frher waren es auch mal 6 und 5 Bit lange
Grundeinheiten. Auf der 7 Bit langen Grundeinheit beruhten die ersten Zeichenstze, die historisch den Durchbruch schafften: der ASCII-Zeichensatz und der EBCDIC-Zeichensatz. Dabei
setzte sich vor allem der ASCII-Zeichensatz durch, weil er im erfolgreichen Unix-Betriebssystem
und in den aufkommenden Personalcomputern zum Einsatz kam.
Beim ASCII-Zeichensatz sind die ersten 32 Zeichen fr Steuerzeichen reserviert, etwa fr Tastatur-Impulse wie Zeilenumbruch. Die Zeichen zwischen 32 und 127 sind darstellbare Zeichen,
darunter alle Ziffern, Satzzeichen und Buchstaben, die ein Amerikaner so braucht (denn der
ASCII-Zeichensatz kommt natrlich aus den USA).
Lange Zeit war ASCII der einzige verbreitete Standard. Da die neueren Computer aber 256 lange
Bytes hatten, war es folgerichtig, fr die Werte zwischen 128 und 255 neue Verwendungszwecke
zu finden. Dabei entwickelten sich jedoch proprietre Lsungen. MS DOS beispielsweise benutzt
einen erweiterten ASCII-Zeichensatz, der aber nicht viel mehr ist als eine schne Umschreibung fr die Microsoft-eigene Belegung der Zeichen 128 bis 255 speziell fr die Bedrfnisse von
MS-DOS.
Um auch hierfr einen Standard zu schaffen, ersann die amerikanische Standardisierungs-Organisation den ANSI-Zeichensatz. Dieser Zeichensatz bernimmt fr die Zeichen 0 bis 127 den
ASCII-Zeichensatz und definiert fr die Werte zwischen 128 und 255 etliche Sonderzeichen,

1094

Kapitel 23: Internationalisierung

darunter wichtige Alphabetzeichen verbreiteter Sprachen, etwa deutsche Umlaute, franzsische

Accent-Zeichen oder spanische Zeichen mit Tilde. Dazu kamen diverse verbreitete kaufmnnisch-wissenschaftliche Zeichen.
Der Bedarf an international gltigen Zeichenstzen wird jedoch immer grer. Ein Versuch, ein
solches Set von Zeichenstzen zu etablieren, stellt die iso-8859-Familie dar (siehe Kapitel 23.2).

23.1.2 Beispiel fr Zeichenstze

Ein Beispiel soll das Prinzip der Zeichenstze verdeutlichen. Die folgende Abbildung zeigt zwei
Zeichenstze: den MS-DOS-Zeichensatz und den ANSI-Zeichensatz, den z.B. MS Windows als
Voreinstellung verwendet.

23.1: DOS- und ANSI-Zeichensatz im Vergleich

Der Abbildung knnen Sie entnehmen, dass die oberen Teile (dunkler) beider Zeichenstze
identisch sind, da beide Zeichenstze den ASCII-Zeichensatz fr die ersten 128 Zeichen bernehmen (die ersten 32 Zeichen fehlen in der Abbildung, da es sich bei diesen Zeichen um Steuerzeichen handelt, die nicht abbildbar sind). Die unteren Teile (heller) sind dagegen unterschiedlich. Wo im ANSI-Zeichensatz beispielsweise ein kleines deutsches liegt, bietet der erweiterte
DOS-Zeichensatz eine hochgestellte 3 an.
Wenn Sie mit MS Windows arbeiten, knnen Sie das selbst ausprobieren: Erzeugen Sie unter MS
Windows mit einem ANSI-Texteditor (z.B. Notepad) eine leere Datei: tippen Sie einfach so
etwas wie ein. Die Eingaben speichern Sie unter einem Dateinamen ab.
Anschlieend rufen Sie die DOS-Eingabeaufforderung auf und geben edit ein. Dann ffnet sich
der DOS-Editor. Damit ffnen Sie die zuvor unter Windows abgespeicherte Datei. Nun knnen
Sie sehen, was der Zusammenhang zwischen Byte und Zeichensatz ist: Es werden zwar genauso

23.1 Computer und geschriebene Sprache

1095

viele Zeichen angezeigt wie unter MS Windows, aber es sind andere Zeichen. Der Grund ist, dass
im Arbeitsspeicher immer nur Byte-Werte stehen. Was ein Programm jedoch daraus macht,
hngt davon ab, welchen Zeichensatz es benutzt.
Das Beispiel zwischen dem MS-DOS-Zeichensatz und dem ANSI-Zeichensatz wurde hier bewusst ausgewhlt, da es sich an ein und demselben Rechner testen lsst. Das Beispiel soll aber vor
allem auch dazu ermuntern, tiefer in die Geheimnisse der Zeichenstze einzusteigen und sich
darber bewusst zu werden, dass nichts von dem, was im Anzeigefenster eines Web-Browsers zu
sehen ist, selbstverstndlich ist, sondern dass alles auf Konventionen beruht, die computertechnisch gesehen zum Teil auf wesentlich tieferen Ebenen aufsetzen als HTML und andere standardisierte Web-Sprachen.

23.1.3 Die Grenzen von Bytes und Zeichenstzen sprengen

Zeichenstze decken einzelne Schriftkulturen und damit verbundene Sprachen oder Sprachfamilien ab. Problematisch wird es, wenn mehrsprachige Dokumente erstellt werden sollen, die
Schriften ganz unterschiedlicher Zeichenstze enthalten. Auch fr nichtalphabetische Schriftkulturen sind Zeichenstze ungeeignet. In unseren Zeiten der Globalisierung wird es jedoch
immer wichtiger, fr solche Probleme eine standardisierte EDV-technische Lsung zu finden, die
sich auf den verschiedensten Computersystemen durchsetzt. Eine solche Lsung gibt es auch
schon: das Unicode-System (Kapitel 23.3). Unicode soll mittelfristig das heute bliche System
der Zeichenstze ablsen. Derzeit geschieht auch schon viel in dieser Richtung. Neuere Betriebssysteme bieten meist schon Schriftarten an, die nicht mehr auf einen Zeichensatz beschrnkt sind, sondern das komplette Unicode-Zeichensystem oder zumindest groe Teile davon abdecken. Auch die meisten modernen Anwendungen speichern Texte nicht mehr mit
einem Byte pro Zeichen, sondern mit zwei Byte pro Zeichen. Damit ist die Grundlage zur
Untersttzung des Unicode-Systems gegeben.

23.1.4 Die Bedeutung der Schriftarten

Schriftarten sind Beschreibungsmodelle, um auf Ausgabemedien wie Bildschirm oder Drucker
Zeichen abzubilden. Jedes heute bliche Betriebssystem enthlt so genannte Systemschriften.
Das sind Schriftarten, die auf jeden Fall genau die Zeichen enthalten, die in dem Zeichensatz definiert sind, auf dem das Betriebssystem per Voreinstellung basiert. Unter MS Windows gibt es
beispielsweise eine solche Schriftart namens System. Daneben gibt es auf modernen Rechnern
definierte Schnittstellen fr beliebige Schriftarten. Verbreitet ist z.B. die Adobe-Schnittstelle fr
Schriftarten (PostScript). Unter MS Windows kommt eine eigene Schnittstelle hinzu (TrueType).
Solche Schriftarten knnen auf die zur Verfgung stehenden Byte-Werte beliebige Darstellungsmuster legen. So gibt es auch Schriftarten wie WingDings oder ZapfDingbats, die fast nur
Symbole und Icons enthalten. Wichtig sind jedoch vor allem auch Schriftarten, die zwar ansprechend aussehen, aber gleichzeitig einen bestimmten Zeichensatz untersttzen, d.h. alle Zeichen
dieses Zeichensatzes darstellen, und zwar genau auf den Byte-Werten, die im Zeichensatz dafr
vorgesehen sind. Nur durch solche Schriftarten wird es mglich, festgelegte Zeichenstze in eine
grafisch darstellbare Form zu bringen. Die folgende Abbildung zeigt ein Beispiel fr diesen
Zusammenhang.

1096

Kapitel 23: Internationalisierung

23.2: Zusammenhang zwischen Schriftart und Zeichensatz.

Bei modernen Schriftarten, die das ganze Unicode-System abdecken, ist das Prinzip das gleiche.
Nur mit dem Unterschied, dass dort nicht nur 256 Zeichen adressiert werden knnen, sondern
derzeit bis zu 65536 Zeichen, knftig noch viel mehr, aus dem Grund, weil dort zwei oder gar
vier Bytes fr Zeichenwerte verwendet werden, wodurch viel hhere Werte als 256 mglich sind.

23.1.5 Schriftkulturen mit anderer Schreibrichtung

Da die Computerindustrie historisch gesehen in den USA und Europa entstand, bauen die heutigen Hardwaresysteme und Betriebssysteme auf Prinzipien auf, die zunchst als selbstverstndlich
galten. Wenn Sie in einem Textverarbeitungsprogramm einen Text tippen, wandert der Cursor
beim Schreiben von links nach rechts. Automatische Zeilenumbrche erfolgen nach typischen
Begrenzerzeichen westlicher Sprachen wie Leerzeichen oder Silbentrennstrich.
Es gibt jedoch etliche Schriftkulturen, die eine andere Schreibrichtung als die unsrige haben.
Dazu gehren etwa die arabische Schrift, die hebrische Schrift oder die fernstlichen Schriftkulturen. Um solche Schriftkulturen auf Computern abzubilden, sind zustzliche Fhigkeiten
der Software erforderlich. Denn es gilt nicht nur, die Schriftelemente abzubilden, sondern auch
die Editierrichtung bei der Texteingabe und die Ausgaberichtung auf Medien wie Bildschirm
oder Drucker an die Schreibrichtung der entsprechenden Schriftkultur anzupassen.
In HTML gibt es deswegen Sprachbestandteile wie das Universalattribut dir= oder das Element
bdo, mit deren Hilfe Web-Autoren Angaben zur Schreibrichtung machen knnen. Die softwareseitige Umsetzung on the fly ohne das Erfordernis, zustzliche Spezialsoftware installieren zu
mssen, funktioniert bei neueren Browsern auch schon zum Teil.

23.2

Zeichenstze (ISO-8859-Familie und andere)

23.2.1 Die ISO-8859-Zeichenstze

Die ISO-8859-Familie wurde vom European Computer Manufacturers Association (ECMA)
entwickelt. Es handelt sich um ein Set von standardisierten Zeichenstzen fr alphabetische
Schriften. Dazu gehren die lateinischen Schriften, auf denen die meisten Sprachen Westeuropas
und Amerikas beruhen, oder etwa die kyrillischen Schriften.

23.2 Zeichenstze (ISO-8859-Familie und andere)

1097

Alle Zeichenstze dieser Familie basieren auf der 1-Byte-Abbildung eines Zeichens. Das heit,
alle Zeichenstze enthalten 256 mgliche Zeichen. Bei allen Zeichenstzen sind die ersten 128
Zeichen, also die Zeichen mit den Werten 0 bis 127, identisch mit dem ASCII-Zeichensatz. Das
hat den Vorteil, dass die blichen lateinischen Gro- und Kleinbuchstaben, die arabischen
Ziffern und die blichen Sonderzeichen wie Satzzeichen oder kaufmnnische Zeichen in all
diesen Zeichenstzen immer zur Verfgung stehen.

23.3: ASCII-Zeichensatz

Oben ist der ASCII-Zeichensatz abgebildet. Die darstellbaren Zeichen dieses Zeichensatzes haben
die Werte zwischen 32 und 127. Wert 32 ist das Leerzeichen. Alle ISO-8859-Zeichenstze enthalten diesen Zeichensatz.

Zur Lesart dieser und der folgenden Zeichensatz-Tabellen

Den Wert eines Zeichens ermitteln Sie, indem Sie die Werte aus Spalten- und Zeilenberschrift
des Zeichens addieren. Ein groes K hat in dieser Tabelle beispielsweise den Zeilenwert 70 und
den Spaltenwert 5. Daraus ergibt sich der Wert 75 fr dieses Zeichen. Zeichenwerte knnen bei
der Verwendung von Zeichenstzen und Unicodes in HTML eine Rolle spielen. Falls Sie nicht
den Dezimalwert eines Zeichens bentigen, sondern den Hexadezimalwert, knnen Sie den
Dezimal-Hexadezimal-Umrechner auf der Buch-CD benutzen (als Teil von SELFHTML).
So wie im ASCII-Zeichensatz die ersten 32 Zeichen (Zeichenwerte 0 bis 31) fr Steuerzeichen
reserviert sind, sparen auch die erweiterten Zeichenstze der ISO-8859-Familie einen Bereich
von Zeichen aus. Es handelt sich um die ersten 32 Zeichen oberhalb des ASCII-Bereichs, also um
die Zeichenwerte 128 bis 159. Die Tabellen zu den einzelnen Zeichenstzen weiter unten bilden
daher die verbleibenden Zeichenwerte 160 bis 255 ab. Das Zeichen mit dem Wert 160 ist in all
diesen Zeichenstzen ein erzwungenes Leerzeichen.
Viele der Zeichenstze der ISO-8859-Familie berlappen sich. Das ist Absicht. Die Zeichenstze
sind so optimiert, dass sich mit je einem Zeichensatz mglichst viele Schriften mglichst vollstndig abdecken lassen. Zeichen, die in mehreren Zeichenstzen der ISO-8859-Familie vorkommen, haben in der Regel immer den gleichen Wert, d.h. sie befinden sich in den unterschiedlichen Zeichenstzen an der gleichen Stelle.

1098

Kapitel 23: Internationalisierung

Sechs der ISO-8859-Zeichenstze beziehen sich auf Schriften, die im Kern auf der lateinischen
Schrift basieren. Diese Zeichenstze haben daher noch die Beinamen Latin-1 bis Latin-6.

23.2.2 Liste der ISO-8859-Zeichenstze

Die folgenden Tabellen zeigen die einzelnen Zeichenstze der ISO-8859-Familie. Wie Sie diese
Zeichenstze in HTML einsetzen knnen, wird im Abschnitt 4.1.3 Zeichensatzangabe als MetaAngabe beschrieben. Die blau dargestellten Namen sind jene Bezeichnungen, die Sie in HTML
angeben knnen.
ISO-8859-1 (Latin-1)
Dieser Zeichensatz enthlt die schriftspezifischen
Zeichen fr westeuropische und amerikanische
Sprachen. Der Zeichensatz deckt die Sprachen
Albanisch, Dnisch, Deutsch, Englisch, Farrisch,
Finnisch, Franzsisch, Galizisch, Irisch, Islndisch, Italienisch, Katalanisch, Niederlndisch,
Norwegisch, Portugiesisch, Schwedisch und
Spanisch ab. Lediglich einzelne Zeichen wie das
niederlndische ij oder die deutschen Anfhrungszeichen unten fehlen.

ISO-8859-2 (Latin-2)
Dieser Zeichensatz enthlt die schriftspezifischen
Zeichen fr die meisten mitteleuropischen und
slawischen Sprachen. Der Zeichensatz deckt die
Sprachen Kroatisch, Polnisch, Rumnisch, Slowakisch, Slowenisch, Tschechisch und Ungarisch ab.

23.2 Zeichenstze (ISO-8859-Familie und andere)

ISO-8859-3 (Latin-3)
Dieser Zeichensatz deckt die Sprachen Esperanto,
Galizisch, Maltesisch und Trkisch ab.

ISO-8859-4 (Latin-4)
Dieser Zeichensatz enthlt einige Zeichen der
Sprachen Estnisch, Lettisch und Litauisch. Vergleichen Sie diesen Zeichensatz auch mit ISO
8859-10, der sehr hnlich ist.

ISO-8859-5
Dieser Zeichensatz enthlt kyrillische Zeichen. Er
deckt weitgehend die Sprachen Bulgarisch, Mazedonisch, Russisch, Serbisch und Ukrainisch ab.

1099

1100

Kapitel 23: Internationalisierung

ISO-8859-6
Dieser Zeichensatz enthlt Zeichen arabischer
Schrift. Die Darstellung der Zeichen in der folgenden Tabelle ist jedoch abstrakt, da die Zeichen
in der Schriftpraxis variieren, je nachdem, ob sie
am Anfang, in der Mitte oder am Ende eines
Wortes oder einzeln stehen. Arabisch zeichnet
sich weiterhin dadurch aus, dass die Schriftrichtung von rechts nach links ist.

ISO-8859-7
Dieser Zeichensatz enthlt die Zeichen der neugriechischen Schrift.

ISO-8859-8
Dieser Zeichensatz enthlt die Zeichen der hebrischen Schrift. Wie bei der arabischen Schrift ist
dabei die Schriftrichtung von rechts nach links.

23.2 Zeichenstze (ISO-8859-Familie und andere)

1101

ISO-8859-9 (Latin-5)
Dieser Zeichensatz ist speziell fr Trkisch gedacht. Er basiert auf ISO 8859-1, enthlt jedoch
anstelle der islndischen Sonderzeichen trkische
Zeichen.

ISO-8859-10 (Latin-6)
Dieser Zeichensatz enthlt speziell Zeichen fr die
Sprachen Grnlndisch (Inuit) und Lappisch
(Sami).

23.2.3 Alle offiziellen Zeichenstze

Es gibt etliche andere, zum Teil schon ltere Zeichenstze, die Konventionen fr einzelne
Schriften oder Schriftfamilien definieren, hufig landesspezifisch. Auf der folgenden InternetAdresse werden die Namen dieser Zeichenstze gesammelt:

www.iana.org/assignments/character-sets
Diejenigen Zeichensatznamen, die dort in der Liste jeweils hinter Name: oder Alias: aufgelistet
sind, knnen Sie in HTML angeben, wenn Sie einen bestimmten Zeichensatz erzwingen wollen
(bevorzugt sollten jene Namen verwendet werden, die in der Liste mit dem Zusatz preferred
MIME name ausgezeichnet sind). Mglich ist das z.B. dokumentweit mit der Meta-Angabe fr den
Default-Zeichensatz (Kapitel 4.1.3).

1102

Kapitel 23: Internationalisierung

23.3

Das Unicode-System

23.3.1 Allgemeines zu Unicode

Unicode ist ein System, in dem die Zeichen oder Elemente aller bekannten Schriftkulturen und
Zeichensysteme festgehalten werden. Durch dieses System wird es mglich, einem Computer
weltweit zu sagen, welches Zeichen man dargestellt bekommen will. Voraussetzung ist natrlich, dass der Computer bzw. das ausgefhrte Programm das Unicode-System untersttzt.
Unicode strebt die mglichst vollstndige Erfassung aller bekannten Zeichen aus gegenwrtigen
und vergangenen Schriftkulturen an. Die Zeichen werden nach Klassen katalogisiert und erhalten einen Zeichenwert. Alle nur erdenklichen Zeichen und Zeichensorten werden erfasst. Fr
Steuerzeichen wie Silbentrennzeichen, erzwungene Leerzeichen oder Tabulatorzeichen gibt es
Unicodes. Die Zeichen mathematischer Formeln fehlen ebenso wenig wie die Silben- oder Wortzeichen fernstlicher Schriftkulturen. Auch Einzelteile von Zeichen, wie etwa die Doppelpunkte
ber den deutschen Umlauten, haben einen eigenen Unicode. Zeichen lassen sich auch dynamisch kombinieren so gibt es zwar natrlich auch ein deutsches , aber der gleiche Buchstabe lsst sich auch aus a und dem Element fr Doppelpunkt ber dem Zeichen erzeugen.
Neben der bloen Adressierung eines Zeichens oder Elements ist im Unicode-System fr jedes
Zeichen auch ein Set von Eigenschaften definiert. Zur Eigenschaft eines Zeichens gehrt z.B. die
Schreibrichtung (bei arabischen Zeichen etwa ist die Schreibrichtung von rechts nach links). Insgesamt stecken hinter dem Unicode-System unzhlige Forschungsergebnisse der weltweiten
Sprachwissenschaft.
Das Unicode-Konsortium, das 1991 gegrndet wurde und aus Linguisten und anderen Fachleuten besteht, ermittelt die aufzunehmenden Zeichen. Die vergebenen Zeichenwerte haben verbindlichen Charakter. Seit Version 2.0 ist das Unicode-System auch mit der internationalen
Norm ISO/IEC 10646 synchronisiert. Das ist insofern wichtig, als HTML seit Version 4.0 und
auch XML ab Version 1.0 auf der Norm ISO/IEC 10646 aufsetzen. Wenn Sie also wissen wollen,
wie man ein bestimmtes Zeichen in HTML oder XML notieren soll, mssen Sie in den UnicodeZeichentabellen nachsehen, welchen Zeichenwert das gewnschte Zeichen hat. Anschlieend
knnen Sie das gewnschte Zeichen durch eine numerische Notation wie z.B. &#9871; (dezimale Schreibweise) oder &#x268F; (hexadezimale Schreibweise mit x) im Quelltext der HTMLoder XML-Datei notieren.
Die Zeichenwerte der von Unicode erfassten Zeichen wurden bis vor kurzem noch ausschlielich
durch eine zwei Byte lange Zahl ausgedrckt. Auf diese Weise lassen sich bis zu 65536 verschie16
dene Zeichen in dem System unterbringen (2 Byte = 16 Bit = 2 Kombinationsmglichkeiten).
In der Unicode-Vollversion 3.0 vom September 1999 wurden bereits 49.194 Zeichen aus aller
Welt aufgelistet die Grenze von 65536 war also schon zum Greifen nah. In der Version 3.1 vom
Mrz 2001 wurden dann nochmals 44.946 Zeichen neu aufgenommen, z.B. Zeichen aus historischen Schriften. Und so kennt die Version 3.1 also bereits 94.140 Zeichen, weshalb die ZweiByte-Grenze durchbrochen werden musste. Das Zwei-Byte-Schema, im Unicode-System als
Basic Multilingual Plane (BMP) bezeichnet, wird deshalb von einem Vier-Byte-Schema abgelst,
32
wodurch sich die beruhigende Anzahl von 4.294.967.296 Zeichen (2 Kombinationsmglichkeiten fr Bits) adressieren lsst.
Informationen zum Unicode-Konsortium finden Sie im Web auf der Homepage des UnicodeKonsortiums (www.unicode.org/).

23.3 Das Unicode-System

1103

Das groe Problem mit Unicode ist eigentlich nur, wie all die vielen Zeichen an einem Computer
dargestellt werden sollen. Denn Unicode definiert nur Zeichenwerte und Eigenschaften von Zeichen, aber es enthlt ebenso wenig wie herkmmliche Zeichenstze Angaben darber, wie das
Zeichen darzustellen ist. Dazu sind am Computer Schnittstellen wie Schriftarten erforderlich.
Die klassischen Computerschriftarten sind dazu jedoch nicht geeignet, da sie sich weitgehend an
bestimmten Zeichenstzen orientieren. Neue, Unicode-orientierte Schriftarten verbreiten sich
allmhlich. In Verbindung mit modernen Betriebssystemen und Anwendungen untersttzen
solche Schriftarten zumindest die zwei-byte-breite Adressierung, also den BMP-Anteil des Unicode-Systems.

23.3.2 Aufbau des Unicode-Systems

Bei neuen Unicode-Versionen wird das Buch The Unicode Standard, herausgegeben vom Unicode-Konsortium, neu aufgelegt. Im internationalen Buchhandel ist dieses Buch erhltlich.
Darin sind alle Zeichen, Zeichenwerte, Zeichenklassen usw. genau aufgeschlsselt und dargestellt. Dieses Buch ist das verbindliche Normwerk. Auf den Web-Seiten des Unicode-Konsortiums finden sich zum schnellen Nachschlagen aber immerhin PDF-Dateien mit den einzelnen
Zeichenwert-Tabellen. Die Verweise in der Tabelle weiter unten fhren direkt zu den entsprechenden PDF-Dateien. Um diese Dateien betrachten zu knnen, bentigen Sie den Acrobat
Reader von Adobe (der Web-Browser allein reicht nicht).
Das Unicode-System ist in Zahlenbereiche aufgeteilt. Die Zahlen selbst werden in der Form
U+XXXX notiert. Das U steht fr Unicode, und das X fr je eine hexadezimale Ziffer. Zeichenwerte sind in diesen Tabellen also hexadezimal dargestellt. Falls Sie fr die Notation eines oder
meherer Zeichen aus dem Unicode-Bereich in HTML oder XML eine dezimale Darstellung verwenden wollen, knnen Sie den Dezimal-Hexadezimal-Umrechner auf der Buch-CD benutzen
(in SELFHTML).
Die einzelnen Zeichen im Unicode-System sind nicht wahllos angeordnet. Das gesamte System
ist in Zeichenbereiche aufgeteilt. Die Zeichenbereiche spiegeln jeweils eine bestimmte Schriftkultur oder ein Set von Sonderzeichen wider.
Im Folgenden werden die einzelnen Unicode-Zeichenbereiche aufgelistet. Bei jedem Zeichenbereich finden Sie einen Verweis. Der Verweis fhrt jeweils zu einer PDF-Datei auf der Homepage
des Unicode-Konsortiums. Darauf finden Sie zu dem betreffenden Zeichenbereich Hinweise
sowie eine grafische Tabelle mit Abbildungen der einzelnen Zeichen des Bereichs und der zugehrigen Unicode-Zeichenwerte (hexadezimal).
Eine grafische Darstellung zu den folgenden Teilen des Unicode-Systems in Form von PDFDateien finden Sie unter der Adresse www.unicode.org/charts/.
Zeichensatz

Zeichenbereich (hexadezimal)

Basic Latin (ASCII-Zeichensatz)

Latin-1
Latin Extended-A
Latin Extended-B
IPA Extensions

U+0000 to U+007F
U+0080 to U+00FF
U+0100 to U+017F
U+0180 to U+024F
U+0250 to U+02AF

1104

Kapitel 23: Internationalisierung

Zeichensatz

Zeichenbereich (hexadezimal)

Spacing Modifier Letters

Combining Diacritical Marks
Greek
Cyrillic
Armenian
Hebrew
Arabic
Devanagari
Bengali
Gurmukhi
Gujarati
Oriya
Tamil
Telugu
Kannada
Malayalam
Thai
Lao
Tibetan
Georgian
Hangul Jamo
Latin Extended Additional
Greek Extended
General Punctuation
Superscripts and Subscripts
Currency Symbols (Hier ist auch das Euro-Zeichen-Symbol mit dabei es
hat den Wert U+20AC. In HTML dezimal otiert: &#8364; oder einfacher:

U+02B0 to U+02FF
U+0300 to U+036F
U+0370 to U+03FF
U+0400 to U+04FF
U+0530 to U+058F
U+0590 to U+05FF
U+0600 to U+06FF
U+0900 to U+097F
U+0980 to U+09FF
U+0A00 to U+0A7F
U+0A80 to U+0AFF
U+0B00 to U+0B7F
U+0B80 to U+0BFF
U+0C00 to U+0C7F
U+0C80 to U+0CFF
U+0D00 to U+0D7F
U+0E00 to U+0E7F
U+0E80 to U+0EFF
U+0F00 to U+0FBF
U+10A0 to U+10FF
U+1100 to U+11FF
U+1E00 to U+1EFF
U+1F00 to U+1FFF
U+2000 to U+206F
U+2070 to U+209F
U+20A0 to U+20CF

&euro;

Combining Diacritical Marks for Symbols

Letterlike Symbols
Number Forms
Arrows
Mathematical Operators
Miscellaneous Technical
Control Pictures
Optical Character Recognition
Enclosed Alphanumerics
Box Drawing
Block Elements
Geometric Shapes
Miscellaneous Symbols
Dingbats
CJK Symbols and Punctuation
Hiragana

U+20D0 to U+20FF
U+2100 to U+214F
U+2150 to U+218F
U+2190 to U+21FF
U+2200 to U+22FF
U+2300 to U+23FF
U+2400 to U+243F
U+2440 to U+245F
U+2460 to U+24FF
U+2500 to U+257F
U+2580 to U+259F
U+25A0 to U+25FF
U+2600 to U+26FF
U+2700 to U+27BF
U+3000 to U+303F
U+3040 to U+309F

23.4 Downloadbare Schriftarten

1105

Zeichensatz

Zeichenbereich (hexadezimal)

Katakana
Bopomofo
Hangul Compatibility Jamo
Kanbun
Enclosed CJK Letters and Months
CJK Compatibility
CJK Unified Ideographs
Hangul Syllables
High Surrogates
Private Use High Surrogates
Low Surrogates
Private Use Area
CJK Compatibility Ideographs
Alphabetic Presentation Forms
Arabic Presentation Forms-A
Combining Half Marks
CJK Compatibility Forms
Small Form Variants
Arabic Presentation Forms-B
Halfwidth and Fullwidth Forms
Specials
Erweiterter Bereich des Unicode-Systems (mit vier Byte breiten Zeichen
darstellbar)
Old Italic
Gothic
Deseret
Byzantine Musical Symbols
Mathematical Alphanumeric Symbols
CJK Unified Ideographs Extension B

U+30A0 to U+30FF

23.4

U+3100 to U+312F
U+3130 to U+318F
U+3190 to U+319F
U+3200 to U+32FF
U+3300 to U+33FF
U+4E00 to U+9FA5
U+AC00 to U+D7A3
U+D800 to U+DB7F
U+DB80 to U+DBFF
U+DC00 to U+DFFF
U+E000 to U+F8FF
U+F900 to U+FAFF
U+FB00 to U+FB4F
U+FB50 to U+FDFF
U+FE20 to U+FE2F
U+FE30 to U+FE4F
U+FE50 to U+FE6F
U+FE70 to U+FEFF
U+FF00 to U+FFEF
U+FFF0 to U+FFFF

U+10300 to U+1032F
U+10330 to U+1034F
U+10400 to U+1044F
U+1D000 to U+1D0FF
U+1D400 to U+1D7FF
U+20000 to U+2A6D6

Downloadbare Schriftarten

23.4.1 Allgemeines zu downloadbaren Schriftarten

Downloadbare Schriftarten werden in Web-Seiten als Referenz auf eine Schriftartendatei mit
eingebunden. Web-Browser, die downloadbare Schriftarten interpretieren, erkennen solche
Schriftarten und laden sie zusammen mit den HTML- und sonstigen Ressourcendateien einer
Web-Seite herunter. Nach derzeitigem Stand der Dinge wird die Schriftart dabei jedoch nicht auf
dem Anwenderrechner installiert, sondern ist nur verfgbar, wenn die betreffende Web-Seite
vom Originalserver angezeigt wird. Der Browser kann die Schriftartendaten interpretieren und
stellt Texte, die in HTML/CSS mit dieser Schriftart formatiert sind, entsprechend dar. Voraussetzung dafr ist natrlich eine grafische Benutzeroberflche.

1106

Kapitel 23: Internationalisierung

Leider gibt es im Fall der downloadbaren Schriftarten keinen Standard, sondern zwei inkompatible, letztlich proprietre Lsungen: die eine stammt von Bitstream (diese Lsung wird vom
Netscape-Browser untersttzt), und die andere von Microsoft (vom Internet Explorer untersttzt). Fr beide Lsungen gibt es je eine spezielle Software. Beide Softwareprogramme erlauben
es unter anderem, vorhandene herkmmliche Schriftarten wie TrueType- oder Adobe-Schriftarten in das neue Dateiformat zu konvertieren oder einzelne, bentigte Zeichen in die zu
erstellende Download-Schriftart zu importieren. Um fr beide Browser zu schreiben, gibt es zwei
Lsungen: Entweder Sie erstellen beide Typen von downloadbaren Schriftarten, arbeiten also mit
beiden Programmen parallel, oder Sie beschrnken sich auf die Bitstream/Truedoc-Technik,
denn fr den MS Internet Explorer gibt es ein ActiveX-Control, das diesen Browser befhigt,
ebenfalls die Bitstream/Truedoc-Technik zu nutzen.
Im Bereich des Web-Designs haben sich die downloadbaren Schriftarten nach mehreren Jahren
ihres Existierens nicht sonderlich durchgesetzt. Der Grund ist wohl einerseits das etwas ungewohnte Handling mit dem Kopierschutz bei solchen Schriftarten (die Schriftarten werden nur
interpretiert, wenn sie von einer frei whlbaren, aber bestimmten Domain-Adresse geladen werden). Andererseits hat man aber auch eingesehen, dass die meisten kunstvollen Schriftarten auf
pixelorientierten Bildschirm sowieso nicht so gut aussehen wie auf Papier. Whrend also nur
wenige Web-Seiten aus Design-Grnden auf downloadbare Schriftarten setzen, knnen diese
dagegen eine durchaus sinnvolle Lsung fr das Problem der Internationalisierung sein. WebSeiten, die in z.B. kyrillische Zeichen enthalten, knnten downloadbare Schriftarten benutzen,
um sicherzustellen, dass die Seiten auch auf westeuropischen und amerikanischen Computern
korrekt angezeigt werden. Freilich ist auch fr diese Flle durch das Unicode-System und
modernere Schriftarten, die groe Teile des Unicode-Systems abdecken, eine gewisse Verbesserung eingetreten.

23.4.2 TrueDoc (Bitstream)

Bitstream ist ein Unternehmen, das Lsungen fr die Schriftdarstellung in elektronischen
Dokumenten entwickelt (www.bitstream.com/). Zu den Technologien, die dort entwickelt werden, gehrt auch diejenige mit dem Namen TrueDoc. Auf den Web-Seiten zu TrueDoc finden
Sie alle weiteren ntigen Originalinformationen zur TrueDoc-Technologie.
Hinter TrueDoc verbirgt sich ein Schriftartenkonzept fr plattformbergreifendes elektronisches
Publizieren speziell auch fr den Einsatz im World Wide Web. TrueDoc-Schriftarten werden
nicht wie herkmmliche Schriftarten beim Anwender installiert und sind dann dort verfgbar,
sondern sie werden direkt in elektronische Dokumente mit eingebunden oder darin referenziert.
Software, die TrueDoc interpretiert, erkennt solche Schriftarten und ldt sie zusammen mit den
anzuzeigenden Daten eines Dokuments. Dokumentdaten, die mit TureDoc-Schriftarten formatiert sind, werden dann am Anwenderbildschirm entsprechend dargestellt.
Beim Einsatz im Web sind zum Funktionieren der TrueDoc-Technologie folgende Voraussetzungen erforderlich:
Als Web-Autor bentigen Sie die kostenpflichtige Entwicklersoftware fr True-Doc-Schriftarten von Bitstream. ber die Web-Seiten von TrueDoc knnen Sie diese Software erwerben.
Die Schriftarten nach dem TrueDoc-Modell mssen nach einer bestimmten Konvention in
Web-Seiten eingebunden werden. Der Einsatz ist serverabhngig. Das heit, beim Erstellen

23.4 Downloadbare Schriftarten

1107

der Schriftarten bestimmen Sie, von welchen URIs aus die Schriftarten heruntergeladen werden drfen. Funktionieren tun sie dann nur, wenn die Web-Seite ber entsprechende Adressen aufgerufen wird. Auf diese Weise wird Missbrauch und Raubkopieren der Schriftarten
unterbunden. Das entsprechende Sicherheitskonzept nennt sich bei TrueDoc DocLock. Wie
das DocLock-Konzept im Einzelnen funktioniert, gehrt zur Softwaredokumentation der
TrueDoc-Entwicklersoftware.
Der Web-Browser des Anwenders muss die TrueDoc-Technologie untersttzen. Netscape hat
die TrueDoc-Technologie seit Version 4.01 seines Web-Browsers adoptiert. Microsoft kontert
mit der Konkurrenz-Software WEFT. Andererseits ermglicht Bitstream den Entwicklern von
TrueDoc-Schriften, ein nicht sehr groes ActiveX-Control mit anzubieten, das den MS Internet Explorer 4.0 oder hher ebenfalls befhigt, Web-Seiten mit eingebundenen TrueDocSchriftarten zu interpretieren.
Schriftartendateien der TrueDoc-Technologie haben die Dateiendung .pfr (Portable Font
Resource).

23.4.3 Microsoft und das Web Embedding Fonts Tool WEFT

Als Technologie fr downloadbare Schriftarten hat Microsoft das Programm WEFT (Web
Embedding Fonts Tool) entwickelt. Der MS Internet Explorer untersttzt ab der Version 4.0
seines Browsers diese Technologie. Sie knnen das Programm WEFT auf der Microsoft WEFT
Homepage downloaden (www.microsoft.com/typography/web/embedding/weft/). An der gleichen
Stelle finden Sie auch eine Einfhrung in die WEFT-Technologie.
Um WEFT sinnvoll nutzen zu knnen, erstellen Sie zuerst Ihr Web-Projekt und verwenden
innerhalb Ihrer HTML-Dateien mit den dafr blichen Mglichkeiten in HTML- bzw. CSS
gewnschte Schriftartennamen. Anschlieend knnen Sie den WEFT Wizard starten (Teil von
WEFT). Mit diesem Software-Assistenten knnen Sie das Projekt analysieren lassen. Der WEFT
Wizard ermittelt die verwendeten Schriftartennamen. Sie knnen auswhlen, fr welche der
Schriftarten Sie ein Font Object, sprich eine Schriftartendatei, erstellen mchten.
Schriftartendateien, die mit WEFT erzeugt werden, haben die Dateiendung .eot. Beim Erzeugen
dieser Schriftarten gibt es diverse Optionen, etwa die, ob Sie fr jede HTML-Datei eine eigene
Schriftart oder eine gemeinsame Schriftart fr alle HTML-Dateien wnschen. WEFT greift auch
auf Ihre erstellten HTML-Dateien zu und ndert den Quelltext an Stellen, an denen es fr die
korrekte Anzeige der erstellten Schriftart erforderlich ist.
Beim Erzeugen der eot-Dateien mssen Sie auerdem deren geplanten Ablageort im Web angeben. Das kann fr Web-Projekte beispielsweise eine FTP-Adresse sein, auf der Sie Dateien ablegen knnen. Ferner geben Sie an, welche URIs diese Schriftartendateien benutzen drfen. Dies
ist eine Manahme, die verhindern soll, dass jeder, der will, Ihre Schriftartendateien per Referenz
in seinen eigenen Projekten verwendet. Die WEFT-Technologie funktioniert so weit, ist jedoch
auf den Internet Explorer beschrnkt d.h. Anwender mit anderen Browsern haben nichts
davon.

1108

Kapitel 23: Internationalisierung

23.4.4 Downloadbare Schriftarten in HTML einbinden

Um innerhalb einer HTML-Datei downloadbare Schriftarten zu verwenden, mssen Sie die
Schriftarten nach einem der folgenden Beispiele referenzieren.
Beispiel 1 pfr-Dateien (TrueDoc) nach HTML-Syntax einbinden:
<html><head><title>Test</title>
<link rel="fontdef" src="http://www.meine.com/fonts/chianti.pfr">
</head><body>
<font face="Chianti">Text in Beispielschriftart</font>
</body></html>

Beispiel 2 pfr-Dateien (TrueDoc) nach CSS-Syntax einbinden:

<html><head><title>Test</title>
<style type="text/css">
@font-face { font-family:Chianti XBd BT;
src:url(http://www.meine.com/fonts/chianti.pfr); }
</style>
</head><body>
<p style="font-family:Chianti XBd BT">Text in Beispielschriftart</p>
</body></html>

Beispiel 3 eot-Dateien (Microsoft WEFT) nach CSS-Syntax einbinden:

<html><head><title>Test</title>
<style type="text/css">
@font-face { font-family:Chianti XBd BT;
src:url(http://www.meine.com/fonts/chianti.eot); }
</style>
</head><body>
<p style="font-family:Chianti XBd BT">Text in Beispielschriftart</p>
</body></html>

Downloadbare Schriftarten werden im Kopf einer HTML-Datei eingebunden, die solche Schriftarten verwendet. Eine downloadbare Schriftart nach Bitstream-Technologie (PFR-Datei) knnen
Sie entweder mit einem <link>-Tag (wie in Beispiel 1) oder mit einer CSS Stylesheet-Definition
(wie in Beispiel 2) einbinden. Benutzen Sie das <link>-Tag, wenn Sie in HTML mit <font
face=> arbeiten. Davon ist aus heutiger Sicht allerdings abzuraten. Besser ist es, wenn Sie mit
CSS arbeiten wie in Beispiel 2 gezeigt. Wenn Sie beide Formen benutzen, binden Sie die Schriftart nach beiden Mustern ein.
Das Einbinden von eot-Dateien nach der Microsoft-WEFT-Technologie brauchen Sie nicht
selbst durchzufhren. Eintrge von der Art, wie sie im obigen Beispiel 3 notiert sind, nimmt das
Programm WEFT selbststndig in den betroffenen HTML-Dateien vor. Es ist dann egal, ob Sie
die Schriftart innerhalb der HTML-Datei als CSS Stylesheet-Angabe oder traditionell mit <font
face=> verwenden. Der MS Internet Explorer 4 erkennt in jedem Fall den Bezug und bertrgt
die erforderliche Schriftart mit auf den Rechner des Anwenders.
Beachten Sie: Allgemeine Beschreibungen zu den oben gezeigten HTML- und CSS-Notationen
finden Sie innerhalb dieser Dokumentation an folgenden Stellen:

23.4 Downloadbare Schriftarten

1109

Schriftarten mit Schriftartendatei in CSS Stylesheets (CSS-Syntax zum Einbinden von

Schriftartdateien, Kapitel 16.2).
Logische Beziehungen einer HTML-Datei (HTML-Syntax fr logische Verknpfung zu anderen Dateien, Kapitel 4.1.12).
Die Bitstream TrueDoc-Schriftarten werden von Web-Servern nur dann korrekt an den aufrufenden Browser bertragen, wenn in der Konfiguration des Web-Servers ein Mime-Type fr den
entsprechenden Dateityp eingetragen ist. Bitten Sie gegebenenfalls Ihren Webmaster/Provider/
Administrator, den erforderlichen Eintrag application/font-tdpfr fr Dateien mit der
Endung .pfr in der Konfiguration des Web-Servers fr Sie vorzunehmen, oder tragen Sie diesen
Mime-Type selber ein, sofern Sie Zugriff auf die Web-Server-Konfiguration haben.

1111

24 Grafik

24.1

Grafikformate fr Web-Seiten

24.1.1 Allgemeines zu Grafikformaten fr Web-Seiten

Im Web haben sich zwei Dateiformate fr Grafiken auf breiter Front durchgesetzt, die von allen,
auch den nicht so modernen Browsern inline, also im eigenen Fenster angezeigt werden knnen: die Formate GIF und JPEG. Die Strken beider Formate liegen jedoch auf unterschiedlichen
Gebieten. Dazu kommt ein neues, viel versprechendes Format, das viele Vorteile von GIF und
JPEG in sich vereint: das PNG-Format. Dieses Format wird von moderneren Browsern ebenfalls
untersttzt, wenn auch noch uneinheitlich und oft nicht vollstndig. Daneben existieren noch
andere, beachtenswerte Lsungen, die aber nur einen kleinen Benutzerkreis haben, weil sie bei
Browsern ein Plug-In bentigen z.B. das Format von LuraWave. Eines aber haben all diese Formate gemeinsam: Es sind pixelorientierte Formate. Vektorgrafik ist im Web dagegen noch eine
Seltenheit. Das dafr viel versprechendste Format, das auf XML basierende SVG-Format, entwickelt sich leider nur zgerlich. Es bleibt die Hoffnung, dass es dennoch angenommen wird. In
diesem Abschnitt werden die genannten Grafikformate kurz vorgestellt.

24.1.2 Das GIF-Format

Dateien des GIF-Formats haben die bliche Dateinamen-Endung .gif und den Mime-Type
image/gif. In HTML lassen sich GIF-Grafiken mit Hilfe des img-Elements einbinden.
GIF steht fr Graphics Interchange Format und wurde schon vor vielen Jahren vom Online-Anbieter CompuServe eingefhrt. Es zeichnet sich durch eine hohe Kompression aus. Deshalb hat
es sich im Online-Bereich, wo die bertragung von Daten Geld und Zeit kostet, schnell durchgesetzt. Der heute weit verbreitete Standard des GIF-Formats ist das so genannte 89er-Format.
Dieses Format bietet drei Mglichkeiten an, die das GIF-Format fr den Einsatz im Web besonders interessant machen:
Interlaced: Eine Grafik, die mit der Option interlaced abgespeichert ist, wird beim Laden
nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Gerade beim Laden von
Web-Seiten aus dem Netz ist das sehr hilfreich. Denn so erscheint die Grundstruktur der
Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Ladevorgang wird die Grafik dann immer deutlicher und feiner aufgelst am Bildschirm angezeigt.
Animation: Das GIF-Format bietet die Mglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur zeitlichen Steuerung der Einzelgrafiken.
Dadurch werden animierte GIF-Grafiken mglich, siehe Kapitel 24.4.
Transparente Farbe: Das GIF-Format arbeitet mit Farbpaletten, also mit einer begrenzten
Anzahl indizierter Farben. Dabei besteht die Mglichkeit, eine dieser Farben als transpa-

1112

Kapitel 24: Grafik

rent zu definieren. Bei der Anzeige scheinen dann Elemente, die unterhalb der Grafik liegen,
an den Stellen durch, wo die Grafik transparent ist. Einzelheiten zu den damit verbundenen
Mglichkeiten werden im Kapitel 24.3.6 Transparenz einer bestimmten Palettenfarbe beschrieben.
Ein Nachteil des GIF-Formats ist, dass es maximal 256 Farben pro Datei speichern kann. Ein
Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren. Aufgrund dieser Charakteristika ist das GIF-Format fr hochauflsende Grafiken wie Fotos nicht so sehr geeignet. Ideal ist
das GIF-Format dagegen fr typische Web-Grafiksorten wie Buttons, Dots, Bars, Symbole und
Cliparts.
Leider ist auch das GIF-Format nicht mehr ganz frei vom Schmutz der Abzockversuche im
Internet. Die Firma Unisys, die ursprnglich den LZW-Algorithmus patentierte, den das GIFFormat benutzt, wirbelte Ende 1999 viel Staub auf, als sie bekannt gab, juristisch gegen nicht
lizenzierte GIF-Grafiken im Web vorzugehen. Angesichts der Tatsache, dass es wohl in etwa so
viele GIF-Grafiken im Web gibt wie Menschen auf der Erde, war dieses Vorhaben allerdings
nicht besonders realistisch. Anbieter von Grafiksoftware, die das GIF-Format untersttzt, sind
allerdings lizenzpflichtig und werden auch kontrolliert. Deshalb gibt es vor allem in FreewareKreisen noch mancherorts Proteste und Aufrufe, das GIF-Format nicht mehr zu verwenden.

24.1.3 Das JPEG-Format

Dateien des JPEG-Formats haben die bliche Dateinamen-Endung .jpg, .jpeg oder .jpe und den
MimeType image/jpeg. In HTML lassen sich JPEG-Grafiken mit Hilfe des img-Elements einbinden.
JPEG steht fr Joint Photographic Expert Group, also nicht der Name des Grafikformats, sondern der Name der Firma, die das Format entwickelt hat. Das JPEG-Verfahren ist ein Kompressionsalgorithmus fr Datenstrme, der auf dem Algorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Das gleichnamige Dateiformat
fr Grafiken ist einfach eine Anwendung dieses Algorithmus auf Pixelgrafiken. Mittlerweile wird
der JPEG-Algorithmus auch auf Videos angewendet und hat das beliebte Videoformat MPEG
hervorgebracht.
Das JPEG-Grafikformat komprimiert wie das GIF-Format ebenfalls sehr gut und hat gegenber
dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Es
arbeitet deshalb nicht wie das GIF-Format mit Farbpaletten bestimmter Farben, sondern mit
dem gesamten Farbspektrum. Der Nachteil bei JPEG ist, dass es mit Verlust komprimiert. Je
hher der Kompressionsfaktor, desto schlechter die Qualitt der Grafik.
Beim JPEG-Format knnen Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen:
DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie nur fr
die Anzeige in Web-Seiten bentigen, gengt ein Wert zwischen 70 und 100 dpi. Falls Sie die
Grafik ausdrucken wollen, bentigen Sie allerdings deutlich mehr dpi.
Kompressionsfaktor: Je hher der Kompressionsfaktor, desto schlechter die Bildqualitt. Je
geringer der Kompressionsfaktor, desto grer die Datei.

24.1 Grafikformate fr Web-Seiten

1113

Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farbbergngen im Bild, also bei Ecken und Kanten von abgebildeten Gegenstnden (Rnder fransen aus).
Fr Bilder mit wenigen Farben, aber klaren Konturen, also z.B. fr einfache Zeichnungen,
scharfe Schriftzge usw. ist das JPEG-Format deshalb nicht geeignet. Seine Strke zeigt das Format dagegen beim Abspeichern von Fotos und anderen Grafiken, in denen sehr feine Farbverlufe vorkommen. Selbst bei geringer Kompression sind die Dateigren schon um ein Vielfaches kleiner als etwa bei Bitmap-Grafiken. Sogar den Bildschirm fllende Fotos lassen sich mit
JPEG bei brauchbarer Qualitt auf Dateigren bringen, die im Web als akzeptabel gelten knnen.
Es gibt eine Variante von JPEG-Grafiken, so genannte progressive JPEG-Grafiken. Dabei wird,
hnlich wie beim GIF-Format in der Variante interlaced, zuerst eine vollstndige, aber noch
undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche
Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den
aufrufenden Web-Browser bertragen wurden.

24.1.4 Das PNG-Format

Dateien des PNG-Formats haben die bliche Dateinamen-Endung .png und den MimeType
image/png. In HTML lassen sich PNG-Grafiken mit Hilfe des img-Elements einbinden, wahlweise aber auch mit den Elementen embed oder object.
PNG bedeutet Portable Network Graphic (ausgesprochen: PING). Es handelt sich um ein Grafikformat, das eigens fr den Einsatz im Web konzipiert wurde und dessen Normierung wie diejenige von HTML, CSS, XML und andere Web-Technologien vom W3-Konsortium besorgt
wird. Die Empfehlung (Recommendation) des W3-Konsortiums zu PNG stammt aus dem Jahr
1996. Das entsprechende Dokument ist unter dem Titel PNG (Portable Network Graphics) Specification auf den Seiten des W3-Konsortiums zu finden (www.w3.org/TR/REC-png).
PNG soll die Vorteile von GIF und JPEG in sich vereinen und zeichnet sich durch folgende
Charakteristika aus:
Verlustfreie Kompression: PNG komprimiert verlustfrei wie das GIF-Format. Der eingesetzte
Kompressionsalgorithmus arbeitet dabei hnlich wie der des ZIP-Formats. Wiederholungen
von Pixelmustern im Bild werden durch Meta-Informationen ber diese Muster ersetzt, was
vor allem bei Grafiken wie Cliparts, Schriftzgen usw. zu hohen Kompressionsdichten fhrt.
Weniger stark greift dieser Algorithmus dagegen bei Fotos und Grafiken mit vielen feinen
Farbbergngen. Das ist ganz hnlich wie beim Komprimieren von Daten zu ZIP-Dateien, wo
sich Binrdateien mit wenigen erkennbaren Byte-Mustern weniger stark komprimieren lassen
als z.B. Textdateien.
Farbtiefe plus Transparenz: PNG untersttzt wie das JPEG-Format 16,7 Mio. Farben, wahlweise aber auch das Abspeichern mit indizierten Farben, also mit einer begrenzten Farbpalette. So bleibt das Format flexibel und ist fr alle Arten von Grafiken nutzbar. Neben den drei
Farbwerten fr Rot, Grn und Blau kann das PNG-Format zustzlich noch einen vierten
Wert pro Pixel speichern, nmlich den Alpha-Kanal. Der Alphawert speichert den Transparenzgrad des Pixels. Auf diese Weise werden deutlich feiner abgestufte Transparenz-Effekte
mglich, als es mit dem GIF-Format mglich ist.

1114

Kapitel 24: Grafik

Interlaced-Funktion: Wie das GIF-Format und auch das JPEG-Format in der Variante progressive untersttzt PNG das schichtweise Aufbauen der Grafik (Interlaced-Funktion). Bei
PNG gengen bereits 1-2% bertragene Daten, um das Bild schemenhaft anzeigen zu knnen.
Informationen zur Gammakorrektur: Das PNG-Format erlaubt das Abspeichern einer Reihe
von Zusatzinformationen zum Bild, darunter den Gamma-Wert, der z.B. bei der Aufnahme
eines Fotos mageblich war. Web-Browser, die das Bild anzeigen, knnten diese Information
beispielsweise dazu nutzen, um bei der Anzeige des Bildes eine automatische Gammakorrektur abhngig vom eingesetzten Bildschirm und Betriebssystem vorzunehmen. Dieses Feature
kann vermeiden helfen, dass ein und dieselbe Grafik auf verschiedenen Bildschirmen und
unter verschiedenen Betriebssystemen oft so unterschiedlich aussieht.
Informationen zu Bildherkunft und Copyright: Das PNG-Format erlaubt das Abspeichern
von Textfeldern zu Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum,
Erstellungs-Software, Datenquelle sowie zu rechtlichen und sittlichen Absicherungshinweisen.
Animierte Grafiken wie beim GIF-Format sind mit dem PNG-Format allerdings nicht mglich.
Es gibt also insgesamt viele Grnde, die fr das PNG-Format sprechen. Weniger als Konkurrenz
zum JPEG-Format (JPEG komprimiert bei Fotos doch deutlich strker als PNG die PNGDateigren hoch auflsender Fotos sind nicht sonderlich webfreundlich), aber als Konkurrenz
zum GIF-Format, das seit dem lizenzrechtlichen Hahn-im-Korb-Gebaren von Unisys etwas ins
Zwielicht geraten ist. Das grte Problem von PNG ist eigentlich nur die zgerliche Untersttzung bei der Software. Zwar untersttzt Netscape das PNG-Format seit der Produktversion 4.04,
und auch der Internet Explorer kann PNG-Grafiken seit Version 4.0 anzeigen. Auch immer
mehr Grafikprogramme beherrschen das PNG-Format. Doch gab es dann bei einzelnen Zwischenversionen der Browser wieder Ausflle bei der PNG-Untersttzung. Auch wurde das Format nicht vollstndig untersttzt usw. Deshalb und natrlich auch aus der Gewohnheit heraus
tut sich das PNG-Format noch schwer gegen das GIF-Format.

24.1.5 Das LuraWave-Format

Dateien des LuraWave-Formats haben die bliche Dateinamen-Endung .lwf und den Mime-Type
image/x-wavelet. In HTML lassen sich LuraWave-Grafiken mit Hilfe der Elemente embed oder
object einbinden.
LuraWave ist ein Dateiformat der Firma LuraTech fr Pixelgrafiken. Es eignet sich vor allem fr
hochauflsende Grafiken, also Fotos und Bilder mit feinen Farbbergngen. Bei solchen Grafiken macht sich der besondere Kompressionsalgorithmus bemerkbar, den das LuraWave-Format
verwendet, und der den Algorithmen von JPEG und PNG berlegen ist. Der Lura-Algorithmus,
der mit so genannter Wavelet-Kompression arbeitet, bewahrt im direkten Vergleich mit JPEG
bei einer gleichen Dateigrenreduktion eines Originalbildes eine deutlich bessere Bildqualitt
als das JPEG-Format. Neben der besonders guten Kompression verfgt das LuraWave-Format
ber weitere Besonderheiten:
Skalierbare Gre: Aufgrund des Wavelet-Kompressionsalgorithmus ist es mglich, hnlich
wie bei einem Hologramm das Gesamtbild aus einem kleinen Teil davon zu rekonstruieren.
Das erlaubt es, eine LuraWave-Grafik zu zoomen, also zu vergrern, ohne dass die Grafik
dadurch gleich unansehnlich pixelig wird.

24.1 Grafikformate fr Web-Seiten

1115

Passwortschutz: LuraWave-Grafiken lassen sich in der Weise mit einem Passwort schtzen,
dass eine qualitativ minderwertigere Bildvariante ffentlich betrachtbar ist, whrend eine
qualitativ hochwertigere Variante nur gegen Eingabe eines Passworts anzeigbar und bearbeitbar ist.
Zum Erstellen von LuraWave-Grafiken ist LuraWave-Software erforderlich. Die Software gibt es
in Form von Plug-Ins fr bekannte Produkte wie Photoshop, Cumulus oder Paintshop Pro. Solche Programme knnen dann Grafiken als lwf-Dateien abspeichern. Es gibt auch ein separates
Tool von LuraWave, das andere Grafikformate wie JPEG, BMP, TIFF usw. einlesen und die Grafiken dann im lwf-Format abspeichern kann. Die Plug-Ins fr die Profiprogramme und die
Profiversion des separaten Grafiktools sind kostenpflichtig, eine Light-Version des separaten
Tools ist kostenlos. Kostenlos sind ferner die leider erforderlichen Browser-Plug-Ins. Infos zu
den Produkten und Download-Mglichkeiten gibt es auf den Web-Seiten von LuraTech
(www.luratech.com/).
Das LuraWave-Format ist also eine technisch interessante Alternative vor allem zum JPEG-Format. Nachteil ist, dass es kein offener Standard ist, von bestimmter Software abhngig ist und
von Web-Browsern nicht von Haus aus, sondern nur nach der Installation des Plug-Ins untersttzt wird.

24.1.6 Das SVG-Format

Dateien des SVG-Formats haben die bliche Dateinamenendung .svg oder .svgz und den MimeType image/svg+xml. In HTML lassen sich SVG-Grafiken mit Hilfe der Elemente embed oder
object einbinden.
SVG bedeutet Scalable Vector Graphics. Es ist das einzige vektorgrafische der hier vorgestellten
Formate. Im Gegensatz zu klassischen Formaten dieser Art, die in der Regel an kommerzielle
Software gebunden sind, ist das SVG-Format eine Entwicklung des W3-Konsortiums und
genauso wie andere dort normierte Sprachen, also wie HTML, CSS, XML und auch PNG, plattformbergreifend, offen dokumentiert und frei verwendbar. Aktuelle Informationen und die
Spezifikation von SVG finden Sie auf den Seiten des W3-Konsortiums ber die Einstiegsseite
Scalable Vector Graphics (SVG, www.w3.org/Graphics/SVG/).
Vektorgrafische Formate beschreiben nicht, welche Farbanteile ein Pixel im Bild hat, sondern sie
beschreiben Objekte. Es gibt Objekte wie gerade und nach einem Algorithmus gekrmmte
Linien, runde und winklige Flchen, Text usw. All diese Objekte haben im Bild eine bestimmte
Position und bestimmte Ausmae, Farben und andere Eigenschaften. Flchen knnen einfach,
mit einem Farbverlauf oder mit einem Bitmap-Muster gefllt sein, 3-D-Effekte und Farbfilter
zugewiesen haben. Objekte knnen auch zu Objektgruppen zusammengefasst sein. In der Datei
stehen dann nur die Beschreibungen der Objekte. Die anzuzeigende Grafik wird zur Laufzeit aus
den beschreibenden Daten erzeugt.
Ideal ist diese Grafikform fr das Web insofern, als die Beschreibungsdaten fr vektorgrafische
Objekte in der Regel viel weniger Speicherplatz bentigen als pixelorientierte Grafiken. Gerade
fr Grafiken, die Symbole enthalten, Logos oder Cliparts, wre das SVG-Format eine sinnvolle
Alternative zum GIF-Format. Ideal geeignet ist es fr jede Art von technischer Grafik, fr
Illustrations- und Konstruktionsgrafik. Das SVG-Format zeichnet sich durch folgende besonderen Eigenschaften aus:

1116

Kapitel 24: Grafik

XML-basiert: SVG ist eine XML-basierte Sprache. Das Format ist dadurch jederzeit gegen
eine DTD validierbar, und, was ganz wichtig ist es ist ein Klartextformat. SVG-Grafiken sind
daher z.B. fr Suchmaschinen nach Textinhalten durchsuchbar. Ferner ist es problemlos
mglich, SVG-Grafiken dynamisch mit Scripts zu erzeugen, sei es serverseitig mit CGIScripts, oder clientseitig mit einer Sprache wie JavaScript. Mit Hilfe des Document Object
Model (DOM) ist sogar der direkte dynamische Zugriff auf jedes Beschreibungsdatum einer
SVG-Datei mglich. SVG eignen sich deshalb z.B. hervorragend fr interaktive Grafiken, bei
denen ein Anwender in einem HTML-Formular Parameter eingibt, aus denen die Grafik
dann zusammengestellt wird, oder fr dynamisch erzeugte Balken- und Tortendiagramme zu
Server-Statistiken.
XLink-Untersttzung: XLink ist ein Schema zum Beschreiben von Verweisen (Hyperlinks) in
XML. Auch auf SVG ist dieses Schema anwendbar. Dadurch ist es mglich, verweissensitive
SVG-Grafiken zu erstellen. Die Verweise knnen zu beliebigen lokalen oder weltweiten Zielen
fhren.
Zoom- und Schwenkfhigkeit: Vektorgrafiken lassen sich verlustfrei zoomen. So knnen
kleine Grafiken fr sehschwache Menschen problemlos vergrert werden. Ebenso lassen sich
solche Grafiken leicht drehen (schwenken).
SMIL-Schnittstelle: SMIL ist ebenfalls eine vom W3-Konsortirum normierte Sprache. Sie
beschreibt Zeitschienen fr multimediale Ablufe. Zusammen mit SMIL lassen sich dynamische SVG-Grafiken mit anderen Elementen wie Sound kombinieren.
Neuere Versionen bekannter vektorgrafischer Softwareprodukte untersttzen das SVG-Format,
so etwa CorelDraw ab Version 10. Andere, als erschwingliche Sharewareprogramme vertriebene
Produkte wie das Programm WebDraw des Herstellers Jasc, von dem auch das beliebte Pixelprogramm Paintshop Pro stammt, helfen ebenfalls beim Erstellen von SVG-Grafiken. Theoretisch
gengt allerdings auch ein beliebiger Texteditor so wie bei allen Klartextformaten der XMLFamilie. Wer bereit ist, sich auf die SVG-Sprache einzulassen, kann tatschlich mit Texteditor
und SVG-Viewer ausgerstet SVG-Grafiken erstellen. Und SVG-Viewer gibt es kostenlos. Der
bekannteste ist von Adobe. Der Adobe-Viewer lsst sich auch als Browser-Plug-In installieren.
Auf diese Weise sind Browser wie Netscape oder der Internet Explorer in der Lage, SVG-Grafiken im Web anzuzeigen. Leider fehlt jedoch noch die native Untersttzung von SVG durch die
Browser. Alles, wofr der Anwender ein Plug-In braucht, entwickelt sich nur zgerlich. Eine im
Browser eingebaute SVG-Untersttzung so wie fr GIF und JPEG wre daher dringend wnschenswert. Denn das SVG-Format ist vermutlich die spannendste Entwicklung im Bereich Grafik, die derzeit berhaupt stattfindet, und es eignet sich wie kaum ein anderes fr etliche statische
und dynamische Grafiksorten im Web.

24.2

Typische Grafiksorten fr Web-Seiten

24.2.1 Buttons (Schaltflchen)

Buttons werden auf Web-Seiten gerne verwendet, um Verweise grafisch und attraktiv darzustellen. Achten Sie dabei jedoch immer auf die gesamte zu ladende Datenmenge. Bei einem halben
Dutzend Verweisen sind kleine grafische Buttons durchaus akzeptabel, nicht aber bei Dutzenden
von Verweisen auf einer Seite.

24.2 Typische Grafiksorten fr Web-Seiten

1117

Nheres zum Einbinden in HTML wird in Kapitel 7.3 Grafiken als Verweise beschrieben. Verwenden Sie bei mehreren Buttons auf einer Web-Seite mglichst eine einheitliche Farbpalette!
Das typische HTML-Konstrukt fr anklickbare Verweis-Buttons lautet:
<a href="datei.html">
<img src="button.gif" width="100" height="25" alt="Button" border="0">
</a>

24.1: Buttons finden vor allem als Links Verwendung.

24.2.2 Dots (Auflistungspunkte)

Nur Text am Bildschirm ist langweilig und ermdend. Das Auge sucht nach Augenweiden. Mit
kleinen, farbigen Punkten, Quadraten, Dreiecken und informellen Flecken, die aufgrund ihrer
Gre nur wenig Speicher brauchen, knnen Sie textlastige Information augenfreundlich untersttzen. Wichtig ist hierbei zu beachten, dass der Leser dazu neigt, den Dots irgendeine Bedeutung zuzuordnen, z.B. wo dieser blaue Punkt steht, folgt ein Produktname. Verwenden Sie
Dots daher so, dass diese eine nachvollziehbare Bedeutung haben. Verwenden Sie nicht lauter
unterschiedliche Dots auf einer Web-Seite, sondern wiederholen Sie die gleichen Dots mehrmals

1118

Kapitel 24: Grafik

pro Web-Seite. Das ist nicht langweilig, sondern sorgt fr ein sauberes Erscheinungsbild und
spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal geladen werden muss.

24.2: Die Aufzhlungspunkte sind auch als Dots oder Bullets bekannt.

Dots sind zum Beispiel in Aufzhlungslisten sinnvoll und lassen sich mit Hilfe der CSS-Eigenschaft list-style-image sogar ganz elegant einbinden. Ein typisches HTML-Konstrukt sieht
dann etwa so aus:
<ul style="list-style-image:url(dot.gif)">
<li>Listenpunkt</li>
<li>anderer Listenpunkt</li>
</ul>

24.2.3 Bars (Trennleisten)

HTML bietet zwar die Mglichkeit an, Trennlinien in den Text einzufgen, um Information
bersichtlicher zu strukturieren. Wer auf seinen Web-Seiten jedoch etwas Besonderes bieten will,
verwendet grafische Linien. hnlich wie Dots bentigen Bars wenig Speicher. Auch bei Bars gilt:
Verwenden Sie nicht lauter unterschiedliche Bars auf einer Web-Seite, sondern wiederholen Sie
die gleichen Bars mehrmals pro Web-Seite. Das ist nicht langweilig, sondern sorgt fr ein sauberes Erscheinungsbild und spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal
geladen werden muss.
Bei sauber kodiertem HTML sollten Grafiken innerhalb anderer Block-Elemente notiert werden.
Ein typisches HTML-Konstrukt zum Notieren einer Bar, das mit den CSS-Eigenschaften margintop und margin-bottom auch gleich Abstnde zum vorhergehenden und nachfolgenden Inhalt
definiert, knnte etwa so aussehen:
<div style="margin-top:20px; margin-bottom:20px;">
<img src="bar.gif" width="600" height="5" border="0" alt="Trennlinie">
</div>

24.2 Typische Grafiksorten fr Web-Seiten

1119

24.3: Trennlinien helfen bei einer optisch ansprechenden Gliederung

24.2.4 Wallpapers (Hintergrundbilder)

Hintergrundbilder (Wallpapers) sind seit ihrer Einfhrung durch Netscape zu einem Dauerrenner im Web geworden. Wenn Sie nichts anderes angeben, wird ein Hintergrundbild so oft aneinander gereiht dargestellt, wie es erforderlich ist (Tapetenmuster- oder Kacheleffekt). Wenn
die verwendete Grafik an den Seiten nicht einheitlich aussieht, entstehen sichtbare Kacheln. Das
kann in manchen Fllen gewollt sein, in anderen aber zeugt es auch von Dilettantismus.
Es gibt mehrere Typen von Hintergrundbildern. Die klassischen und meistverwendeten stellen
irgendeine informelle Struktur dar und bewirken auf diese Weise z.B. den visuellen Effekt einer
faserigen, hlzernen, metallenen oder papiernen Oberflche. Andere Hintergrundbilder stellen
durch klare Farbflchen sichtbare Kacheln dar und bewirken dann im Kacheleffekt geometrische
Muster. Und dann gibt es noch Hintergrundbilder vom Typ Browser-berlistung. Das sind
Grafiken, die extrem breit sind (z.B. 3000 Pixel), also bei blichen Fensterbreiten im Browser
nicht mehrmals nebeneinander angezeigt werden. In der Hhe haben sie dagegen oft nur 1 bis 5
Pixel. Die ersten 200 Pixel dieses langen Streifens enthalten dann beispielsweise ein Rechteck in
einer bestimmten Farbe, whrend der gesamte Rest der Grafik eine andere Farbe hat. Im BrowserFenster entsteht dann links ein Farbstreifen, ber den sich beispielsweise Buttons zur Navigation
platzieren lassen.
So pfiffig die Idee der Hintergrundbilder ist, so viel kann man dabei auch verkehrt machen. Bei
allzu aufflligen Hintergrundbildern wird der Anwender zu sehr vom Vordergrund, dem eigentlichen Inhalt, abgelenkt. In vielen Negativbeispielen im Web leidet auch die Lesbarkeit der
Textinformation unter dem Hintergrundbild. Generell gilt: Wenn Sie auf einer Web-Seite
wichtigen Text anbieten wollen, sollte ein Hintergrund-Wallpaper angenehm, aber unauffllig

1120

Kapitel 24: Grafik

sein. Nur bei besonderen grafischen Effekten ist der Einsatz einer aufregenden Hintergrundgrafik gerechtfertigt.

24.4: Hintergrundmuster sollten nicht zu aufdringlich sein, damit der Text lesbar bleibt.

Um den gesamten Inhalt des Browser-Anzeigefensters mit einer Hintergrundgrafik zu unterlegen, wird die Hintergrundgrafik im einleitenden <body>-Tag der HTML-Datei eingebunden:
<body background="hintergrund.jpg" text="#000000">

Mit Hilfe der CSS-Eigenschaft background-image ist es auerdem mglich, auch anderen,
untergeordneten HTML-Elementen einen Wallpaper-Effekt zuzuordnen.

24.2 Typische Grafiksorten fr Web-Seiten

1121

Im Beispiel eines Textabsatzes knnte das so aussehen:

<p style="background-image:url(hintergrund.jpg)">Text<p>

24.2.5 Symbole (Textergnzung oder Textersatz)

Von allen Grafiksorten ist dies wohl die inhaltlich wichtigste. Vor allem bei Textarten wie technischer Dokumentation oder wissenschaftlichen Texten ist es dem Autor schon fast als Faulheit
oder Ignoranz anzukreiden, wenn er auf Symbole verzichtet. Denn gerade beim Online-Lesen
von Texten lesen die meisten Anwender quer, d.h. sie lesen nicht gemtlich Satz fr Satz, sondern suchen stndig nach Orientierungsmglichkeiten, um schnell zu der gewnschten Information zu gelangen. Hierbei sind Symbole eine hervorragende Orientierungshilfe.

24.5: Symbole sollen dem Besucher einer Web-Seite bei der Orientierung helfen.

Symbole sollten sich an geltenden Standards orientieren. Das ist kein Ausdruck von Phantasielosigkeit, sondern erleichtert die intuitive Orientierung. Eine Grafik beispielsweise, die eine
kunstvolle Ziffer 8 enthlt und dahinter die drei Buchstaben ung, erschliet sich eben nicht
so schnell wie ein Warndreieck mit Ausrufezeichen oder ein erhobener Zeigefinger. Symbole
sollten auf den Anwender so wirken, dass er keinen Augenblick ber die Bedeutung der Grafik
im Zweifel ist.
Symbolgrafiken knnen in HTML an ganz verschiedenen Stellen vorkommen, beispielsweise vor
Verweisen, um Art und Verzweisziel zu charakterisieren, oder vor Abstzen, die Text eines bestimmten Typs enthalten, z.B. eine Warnung, eine Zusatzinfo, ein Hinweis auf andere Information oder dergleichen.

24.2.6 Cliparts (Illustrationen)

Cliparts sind aussagekrftige, oft humorvolle Grafiken, die grere Texte ansprechend auflockern knnen. Wichtig ist es, Cliparts so einzusetzen, dass sie zu der umgebenden Textinformation eine sinnvolle Ergnzung bilden. Idealerweise bringt eine Clipart-Grafik genau das auf den
Punkt, was tausend Worte nicht zu sagen vermgen.

1122

Kapitel 24: Grafik

24.6: Cliparts lockern textlastige Web-Seiten auf.

Manche Web-Seiten sind vollgepfropft mit irgendwo wahllos besorgten, fertigen Cliparts.
Dabei werden meist zwei schwere Fehler begangen: Erstens sind zu viele verschiedene Grafiken
an allen Ecken und Enden schlecht, weil jede einzelne Aufmerksamkeit erzwingt und beim
Betrachter daher ein spontanes Gefhl von Stress, berforderung und Orientierungslosigkeit
entsteht. Und zweitens passen die Grafiken oft in Farbe, Gre und Stil nicht zueinander. Alles
deutet darauf hin, dass da jemand wahllos eine der zahlreichen auf dem Markt erhltlichen CDROMs mit Clipart-Sammlungen ausgeschlachtet hat, aber ohne jedes Gespr fr grafische
Harmonie. Cliparts machen sich dann gut, wenn sie ein Gegengewicht zu vorhandenen Texten
darstellen und einen nachvollziehbaren Bezug zum Text herstellen. Ideal sind Clipart-Serien, wo
beispielsweise eine lustige Figur verschiedene Posen einnimmt und damit einen Textbezug herstellt.
Um Cliparts in HTML neben Text anzuordnen, bieten sich zwei Mglichkeiten an. Die eine ist,
den Text um die Grafik flieen zu lassen (Kapitel 7.2). Das folgende typische Beispiel richtet eine
Grafik rechts neben dem Text eines Absatzes aus, und der Text fliet um die Grafik:
<p><img src="clipart.gif" width="200"
height="250" alt="Clipart" border="0"
align="right" hspace="10" vspace="5">
Text des Absatzes</p>

Die andere Mglichkeit besteht darin, Text und Grafik mit Hilfe einer blinden Tabelle zu positionieren (Kapitel 8.6). Das folgende Beispiel zeigt das Prinzip:
<table border="0" cellspacing="10">
<tr><td valign="top">
<img src="clipart.gif" width="200" height="250" alt="Clipart" border="0">

24.2 Typische Grafiksorten fr Web-Seiten

1123

</td><td valign="top">
Text links neben der Grafik
</td></tr></table>

24.2.7 Thumbnails (Vorschaugrafiken)

Leider stehen nicht allen Besuchern von Web-Seiten solche Bandbreiten der Datenbertragung
zur Verfgung, die es erlauben, mal eben eine wunderschne, aber speicherfressende Grafik
am Bildschirm anzuzeigen. Wenn Sie groformatige Fotos oder Landkarten auf Ihren Web-Seiten anbieten, sollten Sie diese nicht ohne Vorwarnung in Seiten einbinden. Stattdessen sollten
Sie eine stark verkleinerte Version der betreffenden Grafik einbinden. Die verkleinerte Version
sollte gerade so gro sein, dass der Anwender entscheiden kann, ob er die Grafik in voller Gre
betrachten mchte oder nicht. Die verkleinerte Grafik sollte anklickbar sein und beim Anklicken
die groe Grafik aufrufen, z.B. in einem neuen Anzeigefenster. Ein typisches HTML-Konstrukt
dafr ist:
<a href="bild.jpg" target="_blank">
<img src="minibild.jpg" width="100" height="80" alt="Vorschau" border="1">
</a>

24.7:

Beim Anklicken eines Thumbnails zeigt in diesem Beispiel ein zustzliches Bowser-Fenster
das groe Bild an.

1124

Kapitel 24: Grafik

24.2.8 Fotos
Viel zu viele Web-Seiten bieten viel zu wenig Fotos an. Dabei sind Menschen, also Besucher von
Web-Seiten, doch von Natur aus so neugierig und freuen sich immer, wenn sie Fotos zu sehen
bekommen. Im Zeitalter der preiswert gewordenen Digitalkameras und Scanner ist es auch
wirklich kein groes Problem mehr, eigene Aufnahmen als Pixelgrafiken in den Computer zu
bekommen. Was Sie dann nur noch brauchen, ist ein Grafikprogramm, mit dem Sie die Bilder
gegebenenfalls auf eine webgerechte Gre bringen und in einem geeigneten Grafik-Format wie
JPEG abspeichern knnen. Bei den meisten Scannern und Digitalkameras gehren solche Programm als Zugabe zum Produkt.
Fotos auf Web-Seiten brauchen auch gar nicht sonderlich groformatig sein. Im Gegenteil das
bricht meistens nur das Seitenlayout auf, sorgt fr lange Ladezeiten beim Anwender und sieht
meistens nicht mal besonders gut aus. Bilder von Digitalkameras, die mehrere Megapixel Auflsung anbieten, sollten also erst mal in der Gre reduziert werden. Wichtig ist dabei, dass volle
16,7 Mio. Farben eingestellt sind. Gute Grafikprogramme besitzen ausgereifte Algorithmen,
sodass eine Grenreduzierung dem Erscheinungsbild des Fotos keine groe Gewalt antut.
Wichtig ist bei Fotos, dass die Grenreduktion ber die Angabe von gewnschten Pixeln fr
Breite und Hhe erfolgt, nicht ber Angaben aus dem Print-Bereich, wie Zentimeter oder Zoll.
Fr ansprechende Bilder auf Web-Seiten reichen meist 200 bis 400 Pixel fr die krzere Seite
und 300 bis 600 Pixel fr die breitere Seite. Dabei entstehen bei JPEG und mittlerer Kompression
auch akzeptable Dateigren, die in der Regel unter 100 Kilobyte liegen.

24.2.9 Blinde Pixel

HTML-Puristen bekommen einen nervsen Hautausschlag, wenn sie von blinden Pixeln
hren. Aber besser als diesen Trick totzuschweigen ist es, ihn zu verraten und darauf hinzuweisen, warum und wieso er nicht selten eingesetzt wird und welche Probleme damit verbunden
sein knnen.
Der blinde Pixel ist eine Erfindung von David Siegel, einem der frhen Gurus des Web-Designs.
Verrgert ber das Verhalten bei Web-Browsern, Tabellen nicht mit den in HTML notierten
Attributwerten fr width= und height= darzustellen, wenn der Zelleninhalt schmaler ist und
Nachbarzellen relativ viel Inhalt haben, erzwang er den gewnschten Raum einfach mit Hilfe
einer unsichtbaren Grafik.
Der Trick besteht aus zwei Teilen. Im ersten Teil wird eine sehr kleine GIF-Grafik erzeugt, die
berhaupt nichts darstellt, sondern nur aus einer einfarbigen Flche besteht. Es ist besser, wenn
die Grafik nicht wirklich nur 1 mal 1 Pixel gro ist, sondern ca. 5 mal 5 Pixel. So werden Probleme bei einigen Browsern vermieden. Die eine Farbe, aus der die GIF-Grafik besteht, wird sodann als transparent definiert. Der Effekt ist, dass die Grafik Raum beansprucht, aber nicht
sichtbar ist. Darunter liegende Farben, etwa definierte Hintergrundfarben von Tabellenzellen, in
denen die unsichtbare Grafik eingebunden wird, scheinen durch.
Der zweite Teil des Tricks besteht in der Mglichkeit, beim Einbinden der unsichtbaren Grafik
die Attribute width= und height= im <img>-Tag auf beliebige gewnschte Werte zu setzen. Die
Grafik wird dann zwar vom Browser verzerrt, aber da sie ja unsichtbar ist, sieht man auch nichts
von der Verzerrung. So lassen sich mit der einen Grafik, die nur ein paar Dutzend Byte gro ist,
beliebige horizontale und vertikale Rume und Abstnde erzwingen.

24.2 Typische Grafiksorten fr Web-Seiten

1125

Der folgende HTML-Ausschnitt zeigt eine typische Anwendung. Die Grafik wird in zwei nebeneinander liegenden Tabellenzellen gleich zu Beginn referenziert. Ihre Hhe wird in beiden Referenzen auf 1 Pixel verzerrt, und ihre Breite auf den jeweils gewnschten Wert. Auf diese Weise
erhlt die Tabelle zwei Spalten mit unumstlichen Mindestbreiten:
<table border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<img src="pixel.gif" width="200" height="1" alt="" border="0">
Hier folgt der Inhalt der ersten Spalte, die mindestens 200 Pixel breit ist.
</td><td valign="top">
<img src="pixel.gif" width="400" height="1" alt="" border="0">
Hier folgt der Inhalt der zweiten Spalte, die mindestens 400 Pixel breit ist.
</td></tr></table>

Unsauber ist die Methode mit dem blinden Pixel insofern, als hssliche broken-image-Symbole angezeigt werden, wenn die Grafik beim bertragen der Web-Seite an den Browser nicht
bertragen wird, z.B. weil der Anwender den Ladevorgang abbricht oder das Anzeigen von Grafiken abgeschaltet hat. Darber hinaus wird es von Puristen als Zweckentfremdung von Grafik
und HTML-Eigenschaften empfunden, solche Mittel einzusetzen. Und schlielich ist das
Erzwingen fester Breiten ohnehin zweifelhaft, da der Anwender dann beispielsweise bei der Anzeige in nicht gengend groen Bowser-Fenstern gezwungen ist, quer zu scrollen, was nicht besonders anwenderfreundlich ist. Andererseits ist der blinde Pixel ein Notbehelf, um fehlende
Mglichkeiten in HTML und CSS auszugleichen. Mittlerweile sind zwar bestimmte CSS-Eigenschaften zur Positionierung von Elementen, die den Zweck des blinden Pixels ebenfalls erfllen,
verfgbar, aber nur in neueren Browsern.

24.2.10 Grafische Layout-Elemente

Grafiken dienen beim Web-Design nicht selten dazu, Dinge zu realisieren, die mit HTML und
CSS (noch) nicht mglich sind. Dazu gehren beispielsweise Rundbgen. Solche grafischen Elemente empfindet der unbedarfte Betrachter einer Web-Seite nicht als Grafiken auf der WebSeite, sondern als Basisbestandteile der Formgebung. hnlich wie bei blinden Pixeln fallen solche Grafiken dann negativ auf, wenn sie beim Laden der Seite nicht bertragen werden und ein
broken-image in der Anzeige erzeugen.
Eingesetzt werden solche grafischen Bestandteile meistens in blinden Tabellen oder absolut positionierten Elementen. Durch nahtloses Aneinanderfgen von Tabellenzellen oder positionierten
Elementen, die als Inhalt eine entsprechende Grafik haben, lassen sich solche Layout-Effekte wie
die im Anzeigebeispiel erzielen. Bei Verwendung von blinden Tabellen fr solche Effekte ist es
wichtig, dass die Werte fr die Attribute border=, cellspacing= und cellpadding= explizit
auf 0 gesetzt werden. Ein typisches HTML-Konstrukt sieht etwa so aus:
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td><img src="rundbogen.gif" width="100" height="100" alt="" border="0"></td>
<td><img src="balken_oben.gif" width="500" height="100" alt="" border="0"></td>
</tr><tr>
<td><img src="balken_links.gif" width="100" height="500" alt="" border="0"></td>
<td><!-- Inhalt wie Text, andere Grafiken - oft auch "innere Tabellen" usw. --></td>
</tr></table>

1126

Kapitel 24: Grafik

24.8: Viele einzelne Grafikelemente bilden dieses Layout einer Reise-Site.

24.3

Techniken und Begriffe der Bildbearbeitung

24.3.1 Allgemeines zu Raster- bzw. Pixelgrafiken

Bildbearbeitung ist eine Welt fr sich und kann im Rahmen der vorliegenden Dokumentation
nur gestreift werden. Die Bearbeitung von Grafiken ist auch immer noch stark an die Fhigkeiten
einzelner Softwareprodukte gebunden. Wenn Sie Grafiken fr Web-Seiten selbst erstellen oder
bearbeiten wollen, brauchen Sie deshalb auf jeden Fall ein professionelles oder zumindest semiprofessionelles Grafikprogramm fr Pixelgrafik. Betriebssystem-Bordmittel wie Paint unter
Windows reichen dazu nicht aus. Das fhrende Produkt zur Bildbearbeitung ist wohl nach wie
vor Photoshop. Andere Programme, die deutlich preiswerter oder sogar Freeware sind und sich
im Vergleich zu Photoshop aber nicht verstecken brauchen, sind ebenfalls erhltlich. Im LinkVerzeichnis des Online-Angebots von SELFHTML (selfaktuell.teamone.de) aktuell finden Sie eine
Softwarebersicht.

24.3 Techniken und Begriffe der Bildbearbeitung

1127

Um die Funktionen solcher Grafikprogramme richtig einzusetzen, bentigen Sie Kenntnisse.

Ebenfalls im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise
zu Grafik-Tutorials im Web.
Einige wichtige Begriffe und Funktionen der Bildbearbeitung behandelt auch dieser Abschnitt.
Dabei geht es um die Technik der Rasterbilder. Rasterbilder sind einfach alle Bilder, deren Inhalt
nicht durch vektorielle Angaben beschrieben sind, sondern durch Raster von Bildpunkten. Ein
fr Bildschirmgrafiken optimales Raster sind Bildschirmpixel. Pixelgrafiken sind also eine Form
von Rasterbildern. Die beiden heute verbreitesten Formate fr Web-Grafiken, das GIF-Format
und das JPEG-Format, sind beide auf das Abspeichern solcher Pixelgrafiken spezialisiert.

24.3.2 Bildgre, dpi und Pixel

Wenn Sie eine Pixelgrafik neu erstellen, mssen Sie zunchst die Bildgre durch Angabe von
Breite und Hhe der Grafik festlegen. Eine Pixelgrafik (oder Rastergrafik) besteht im Gegensatz
zu einer Vektorgrafik aus einer Anzahl von Bildpunkten, genannt Pixel. Die Breite einer solchen Grafik ergibt sich dann aus der Anzahl der Pixel, die horizontal in einer Reihe liegen, und
die Hhe aus der Anzahl der Pixel, die vertikal in einer Reihe liegen. Solange alles am Bildschirm
bleibt, geht diese einfache Rechnung auf. Und solange Sie Pixelgrafiken nur fr den Einsatz auf
Web-Seiten bentigen, die am Bildschirm angezeigt werden, brauchen Sie sich ber andere
Probleme der Bildgre auch keine Gedanken machen.
Die Probleme entstehen erst, wenn eine Pixelgrafik auf einem anderen, nicht pixelorientierten
Medium ausgegeben werden soll. Bei der Ausgabe auf Papier etwa, also beim Drucken, muss
festgelegt werden, wie gro ein Pixel auf dem Papier sein soll, denn im Gegensatz zum Bildschirm gibt es auf Papier keine vorgegebenen Pixel. Beim Druck gibt es druckbare Punkte. Je
dichter sie zusammen liegen, desto feiner die Auflsung des ausgedruckten Bildes. Diese Dichte
wird in Dots per Inch (dpi) gemessen.
Da nun viele Pixelgrafiken fr den Druck gedacht sind, bieten die meisten Grafikprogramme
beim Festlegen der Bildgre zwei oder mehrere Varianten an. Die eine besteht darin, Breite und
Hhe des Bildes in Pixeln anzugeben, die andere darin, eine dpi-Dichte zu whlen oder die
Gre des Bildes in Maeinheiten wie Zentimetern oder Zoll bzw. Inch zu bestimmen. Die
zweite Variante ist auf jeden Fall nur fr die Weiterverarbeitung der Grafik fr den Druck interessant. Um die Gre eines Bildes fr die Bildschirmanzeige zu bestimmen, sollten Sie stets die
Variante whlen, die Bildgre ber die Angabe von Pixeln fr Breite und Hhe zu bestimmen.
Bereits vorhandene Pixelgrafiken haben entweder schon die Gre am Bildschirm, in der Sie sie
fr den Einbau in Ihre Web-Seiten brauchen knnen, oder die vorhandenen Grafiken sind am
Bildschirm zu gro oder zu klein.
Wenn das Bild zunchst viel grer ist, als Sie es fr die Bildschirmanzeige bentigen, mssen
Sie es durch Festlegen von geringeren Pixelwerten fr Breite und Hhe verkleinern. Erforderlich
ist das beispielsweise bei Fotos von Digitalkameras, die oft mehrere Megapixel gro sind und am
Bildschirm bei 1:1-Betrachtung riesig wirken. Auch Grafiken, die durch Einscannen bei hoher
dpi-Zahl entstanden sind, sind so gro. Zum Herunterrechnen der Gre eines Bildes besitzen
moderne Grafikprogramme ausgereifte Algorithmen. Einige bieten zum so genannten Resample,
also zum Neuberechnen des Bildinhaltes fr eine andere Bildgre, auch mehrere Algorithmen
zur Auswahl an. Zwei Faktoren sind zum Resample auf jeden Fall wichtig: Es sollte die volle

1128

Kapitel 24: Grafik

Farbtiefe (z.B. 16,7 Millionen Farben) eingestellt sein, und es sollte proportional verkleinert
werden, d.h. die Seitenverhltnisse sollten beibehalten werden, damit das Grafikprogramm die
Grafik beim Verkleinern nicht auch noch zustzlich verzerren muss.
Wenn das Bild am Bildschirm kleiner ist, als Sie es haben mchten, sieht die Sache schlecht aus.
Durch Resample knnen Sie eine Grafik zwar nicht nur verkleinern, sondern auch vergrern.
Doch die Ergebnisse sind dabei oft unbefriedigend. Denn es ist leichter, aus viel Information
weniger zu machen (wie beim Verkleinern), als aus wenig Information mehr (wie beim Vergrern). In solchen Fllen ist es meist besser, sich mit der zu kleinen Bildgre abzufinden.

24.3.3 Farbtiefen, Farbmodelle und Farbkanle

Die Farbtiefe einer Grafik definiert, wie viele verschiedene Farbtne in der Grafikdatei gespeichert werden knnen. Bei Pixelformaten gibt es folgende typischen Farbtiefen:
2 Farben (schwarz/wei)
16 Farben
256 Farben
16,7 Mio. Farben
Das GIF-Format untersttzt 2, 16 und 256 Farben, das JPEG-Format 16,7 Mio. Farben, ebenso
wie das PNG-Format. Dass in einer Datei so viele Farben gespeichert werden knnen, bedeutet
aber noch lange nicht, dass Anwender tatschlich so viele Farben sehen. Denn wie viele Farben
beim Anwender angezeigt werden knnen, hngt von der eingesetzten Hardware (Grafikkarte,
Bildschirm) ab. Nur die wenigsten Anwender verfgen ber Hardware, mit deren Hilfe volle 16,7
Mio. Farben angezeigt werden knnen. Viele heutige Standard-PCs bieten Farbtiefen zwischen
16.000, 32.000 oder 64.000 Farben an.
Bei Pixelgrafiken wird fr jeden Pixel dessen Farbe gespeichert. Um die Farben in ein computergerechte Darstellungsform zu bringen, mssen sie als Zahlenwerte dargestellt werden. Das ist
ganz hnlich wie bei der Umsetzung von Zeichen in Bits und Bytes. Bei der numerischen
Reprsentation von Farben im Computer gibt es verschiedene Modelle. Die beiden bekanntesten
Modelle sind:

Das RGB-Modell: Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grn und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grnwert und
einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der
Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet:
maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema
z.B. die Farbwerte 0,0,153. (0 rot, 0 grn, 153 blau). Mit diesem Schema knnen bis zu 16,7
Millionen unterschiedliche Farben definiert werden. Eine schematische Darstellung der Farbmischung finden Sie auf der Farbtafel im Anhang.

Das HSB-Modell: Auch bei diesem Modell gibt es drei definierende Zahlenwerte. H steht fr
Hue (Farbton), S fr Saturation (Sttigung), und B fr Brightness (Helligkeit). Farbtne knnen Werte zwischen 0 und 359 annehmen, Sttigung und Helligkeit Werte zwischen 0 und
255. Auf diese Weise lassen sich ca. 23,6 Mio. Farben definieren. Eine typische Dialogbox

24.3 Techniken und Begriffe der Bildbearbeitung

1129

eines Grafikprogramms fr das Definieren von HSB-Farbtnen finden Sie auf der Farbtafel
im Anhang.
Fr Web-Grafiken ist das RGB-Modell mageblich. Wenn Sie zum Erstellen von Web-Grafiken
mit einem Grafikprogramm arbeiten, das mehrere Farbmodelle kennt, halten Sie sich an das
RGB-Modell.

24.3.4 Farbpaletten und indizierte Farben

Im GIF-Format knnen Sie pro GIF-Datei aus den 16,7 Mio. mglichen Farben des RGB-Farbmodells maximal 256 Farben aussuchen und abspeichern. Bei einer solchen Farbauswahl
spricht man von einer Farbpalette.
Jede der 256 Farben kann beliebige RGB-Werte haben, d.h. es sind auch krumme Farbwerte
wie 71,217,34 mglich. Fr webgerechte GIF-Grafiken steht jedoch ein Standardschema zur
Verfgung, das von Netscape eingefhrt wurde und auf diesem Browser plattformbergreifend
optimal interpretiert wird. Nach dem Netscape-Schema sind alle Farben erlaubt, deren RGBWerte durch 51 dividierbar sind. R(ot), G(rn) und B(lau) sollten danach also einen der Werte
0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben. Ein erlaubter
Wert ist danach z.B. 255,51,204 (hexadezimal: FF,33,CC). Auf diese Weise ergeben sich 6 x 6 x 6
mgliche Farben, also 216. Die verbleibenden 40 Farben knnen Sie als eiserne Reserve
betrachten. Wenn Sie fr einzelne Grafiken bestimmte, fehlende Farbtne brauchen, knnen Sie
unbenutzte Farben der Palette mit der gewnschten Farbe definieren. Eine Darstellung der Farbpalette finden Sie im Anhang.
Wenn Sie Ihre Ansprche an die Hardware des Endanwenders noch weiter zurckschrauben
wollen, knnen Sie sich auch auf Grafiken beschrnken, die eine 16-Farben-Palette enthalten.
Auch dabei gilt: Theoretisch kann jede der 16 Farben einer solchen Farbpalette beliebige Farbwerte haben. Es gibt jedoch 16 Farben, die von jedem VGA-kompatiblen Bildschirm angezeigt
werden knnen. In MS Windows sind das deshalb auch die 16 Grundfarben. Bei einer Beschrnkung auf 16 Farben ist es sinnvoll, mit diesen 16 Grundfarben zu arbeiten.

24.3.5 Alphakanal und echte Transparenz

Der Alphakanal ist eine Erweiterung der Farbmodelle. Dabei wird fr jeden Bildpunkt (Pixel)
neben dessen Farbwert ein Alphawert gespeichert. Beim RGB-Modell spricht man daher auch
vom erweiterten RGBA-Modell (Rot-Grn-Blau-Alpha). ber den Alphakanal wird die Transparenz der Farbe beschrieben.
Sinnvoll ist das Arbeiten mit dem Alphakanal, wenn man mit der so genannten Layer-Technik
arbeitet. Dabei wird eine Grafik durch bereinanderlegen mehrerer Ebenen komponiert, wobei
jede Ebene ein oder mehrere bestimmte Bestandteile der Grafik enthlt. Wenn Sie nichts anderes
angeben, berdecken sich die Ebenen dabei. Mit Hilfe diverser Filtereffekte, die im Alphakanal
gespeichert werden, lsst sich jedoch bestimmen, dass und wie eine unterhalb angeordnete
Deckfarbe durch eine oberhalb angeordnete Deckfarbe hindurchschimmert.

1130

24.9:

Kapitel 24: Grafik

Die beiden Abbildungen zeigen zwei typische Filtereffekte, die durch Arbeit mit mehreren
Ebenen und Alphakanal entstanden (farbige Darstellung am Buchende).

In diesem Fall wurde ein Foto als erster Layer (erste Ebene) definiert, und ein Schriftzug NATUR
als zweiter Layer. Der zweite Layer enthlt nur den Schriftzug und ist ansonsten vollstndig
transparent. Damit der untere Layer aber auch durch den Schriftzug hindurchschimmern kann,
ist der Alphakanal erforderlich. Bei aktiviertem Alphakanal lassen sich die gewnschten Filtereffekte einstellen.
Gute Grafikprogramme untersttzen Sie bei der Arbeit mit mehreren Layern und mit dem
Alphakanal. Bei den Transparenz-Effekten, wie sie mit Hilfe des Alphakanals mglich sind,
spricht man auch von echter Transparenz. Im Gegensatz dazu steht die im folgenden beschriebene Transparenz einer bestimmten Palettenfarbe.

24.3.6 Transparenz einer bestimmten Palettenfarbe

Die meisten Web-Browser bieten dem Anwender per Voreinstellung einen hellgrauen oder weien Hintergrund fr das Anzeigefenster an, sehen jedoch die Mglichkeit vor, die Hintergrundfarbe dem eigenen Geschmack anzupassen. Wenn Sie nun eine Grafik mit hellgrauem Hintergrund haben, wirkt diese Grafik auf einem weien oder bunten Fensterhintergrund wie ein
hsslicher grauer Fleck. Ideal ist da eine Grafik, die einen unsichtbaren (transparenten)
Hintergrund hat, sodass sie auf jedem Fensterhintergrund wirkt. Auch in Verbindung mit selbst
definierten Hintergrundfarben und Hintergrundbildern (Wallpapers) ist der Einsatz von Grafiken mit transparentem Hintergrund sinnvoll.
Das GIF-Format sieht die Mglichkeit vor, eine bestimmte Palettenfarbe als unsichtbar zu definieren. Dies ist jedoch erst mit dem neuen 89er-Format von GIF mglich, im lteren, 87er-Format noch nicht. Sinnvoll ist die Anwendung bei Grafiken, die einen klaren, einfarbigen Hintergrund haben. Moderne Grafikprogramme untersttzen beim Auswhlen und Testen der transparenten Palettenfarbe.

24.3.7 Dithering (Error-Diffusion)

Wenn Sie mit Farbpaletten und indizierten Farben arbeiten und so ein begrenztes Farbschema
auf Bilder mit feinen bergngen und zahlreichen Zwischentnen anwenden, dann muss der
Computer eine Lsung fr das Problem finden, dass weniger Farbwerte zur Verfgung stehen,

24.3 Techniken und Begriffe der Bildbearbeitung

1131

als das Bild erfordert. Dazu gibt es verschiedene Algorithmen. Die folgende Abbildung zeigt zwei
Mglichkeiten, darunter diejenige mit dem Algorithmus fr Dithering:
Farbverlauf mit 16,7 Millionen Farben (am Buchende
finden Sie eine Farbdarstellung der vier Bilder)

24.10:

Bild auf Farbpalette mit 16 optimierten Indexfarben

reduziert ohne Dithering!

24.11:

Bild auf Farbpalette mit 16 optimierten Indexfarben

reduziert mit Dithering!

24.12:

Ausschnittvergrerung, die den Dithering-Effekt deutlich macht.

24.13:

Beim Dithering werden Farbverlufe in Punktmuster aufgelst, die mit Hilfe der vorhandenen
Palettenfarben darstellbar sind. Das Prinzip wird auch als Error-Diffusion bezeichnet. Der bekannteste Algorithmus dafr ist der Floyd-Steinberg-Algorithmus, der in den meisten Grafikprogrammen zum Einsatz kommt. Beachten Sie, dass GIF-Grafiken mit intensivem Dithering
schnell sehr gro werden knnen. Meistens ist es besser, solche Grafiken gleich als JPEG-Grafi-

1132

Kapitel 24: Grafik

ken abzuspeichern. Dann muss allerdings der Web-Browser des Anwenders das Dithering besorgen, falls die Grafikumgebung, auf der er luft, nur eine begrenzte Anzahl von Farben zulsst.

24.3.8 Graustufen
Bei Graustufenbildern wird typischerweise mit einer Farbpalette von 256 Farben gearbeitet. Es
handelt sich jedoch um eine ganz bestimmte Palette. Rot- Grn- und Blau-Anteile sind bei allen
256 definierten Werten jeweils gleich, was in der Addition zu einem Ton zwischen Schwarz und
Wei fhrt. Wenn R, G und B den Wert 0 haben, ist die damit definierte Farbe ein reines
Schwarz. Wenn alle drei Farbanteile den Wert 255 haben, wird damit ein reines Wei definiert.
Ein Zwischenwert, etwa 192,192,192, definiert eine graue Farbe von bestimmter Helligkeit. Die
Palette eines Graustufenbildes besteht nun darin, dass darin alle 256 Farben zwischen 0,0,0 und
255,255,255 gespeichert sind also 256 Grautne.

24.14: Die Abbildung zeigt links die typische Graustufentabelle, bestehend aus 256 Grautnen von
Schwarz bis Wei, und rechts die Anwendung einer solchen Graustufentabelle auf ein Foto.

In der Beispielabbildung wurde allerdings das Foto nach der Reduzierung auf Graustufen wieder
auf volle Farbtiefe gesetzt und dann im JPEG-Format, nicht im GIF-Format abgespeichert. Die
Grafik wird dadurch deutlich kleiner. Denn auch bei der Reduzierung eines Farbfotos mit voller
Farbtiefe auf Graustufen wird krftig mit Dithering gearbeitet, was die Dateigren bei Fotos
schnell in die Hhe treibt.

24.3.9 Helligkeit, Sttigung und Kontrast

Helligkeit, Sttigung und Kontrast sind typische Funktionen der Bildbearbeitung, die sich auf ein
ganzes Bild oder auf zuvor markierte Ausschnitte anwenden lassen.

24.3 Techniken und Begriffe der Bildbearbeitung

1133

Helligkeit
Farben knnen den gleichen Farbton haben, aber unterschiedlich hell wirken. Die folgenden
Farbvergleiche zeigen jeweils links eine Farbe und rechts eine hellere Variante davon. Sie finden
eine farbige Variante der folgenden Bilder auf der Farbtafel im Anhang.

24.15: Helligkeit

Fr die Farben der rechten Seite wurden ca. 25% mehr Helligkeit gebenber den Farben der
linken Seite eingestellt. Durch Helligkeit werden Farben nicht leuchtender! Krftige Farben bleiben krftig, Pastellfarben bleiben pastell.

Sttigung
Im Gegensatz zur Helligkeit beeinflusst die Sttigung die subjektiv empfundene Leuchtkraft
einer Farbe. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links
davon eine Variante mit geringerer Sttigung, und rechts davon eine Variante mit hherer Sttigung.

24.16: Sttigung

Was die Helligkeit betrifft, werden die Farbtne jeweils als etwa gleich hell eingestuft. Farben mit
geringerer oder hherer Sttigung wirken zwar beim ersten Hinsehen oft heller oder dunkler,
aber das stellt sich als Trugschluss heraus.

Kontrast
Eine Erhhung des Kontrasts bewirkt, dass dunkle Farben noch dunkler und helle Farben noch
heller werden. Die Unterschiede zwischen hellen und dunklen Farben werden also betont.
Besonders bemerkbar macht sich das bei Fotos beispielsweise an scharfen Farbbergngen, etwa
bei Huserecken, wo eine Seite von der Sonne beschienen wird und die andere im Halbschatten
liegt. Wird der Kontrast dagegen verringert, werden helle Farben dunkler und dunkle heller. Die

1134

Kapitel 24: Grafik

Farben des Bildes gleichen sich also strker an. Harte Farbbergnge erscheinen weicher, das Bild
wirkt insgesamt grautniger. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links davon eine Variante mit niedrigerem Kontrast und rechts davon eine Variante
mit hherem Kontrast.

24.17: Kontrast

24.18: Stark erhhter Kontrast

Bei stark erhhtem Kontrast gehen Feinheiten im Farbverlauf verloren, es kommt zum Schlagschatten-Effekt. Bei stark reduziertem Kontrast entsteht ein Grauschleier-Effekt. Die folgenden
drei Bilder zeigen in der Mitte ein Ausgangsbild, links reduzierten Kontrast (Grauschleier) und
rechts erhhten Kontrast (Schlagschatten).
Zustzlich zur einfachen Kontrastkorrektur bieten die meisten besseren Grafikprogramme eine
farblich abgestufte Tonwertkorrektur an, mit deren Hilfe sich Grobheiten, wie sie bei starker
Kontrastvernderung entstehen, vermeiden lassen.

24.3.10 Histogramm
Fr jede Pixelgrafik lsst sich ein Histogramm erstellen. Das ist die grafische Darstellung der
Farb- und Helligkeitsverteilung in der Grafik. Zur Darstellung dient dabei ein Koordinatensys-

24.3 Techniken und Begriffe der Bildbearbeitung

1135

tem mit einer X-Achse (horizontal) und einer Y-Achse (vertikal). Die X-Achse bedeutet die Helligkeit. Der Achsenursprung steht fr maximale Dunkelheit. Je weiter die Achse reicht, desto
mehr Helligkeit bedeutet dies. Die Y-Achse steht fr die Anzahl der Pixel im Bild. Im Koordinatensystem lsst sich nun ablesen, wie viele Pixel welchen Farbwert bzw. welche Helligkeit haben.

24.19: Ein Foto und sein Histogramm.

Das Histogramm zeigt in diesem Beispiel zweierlei: erstens zwei auffllige Spitzen, eine im sehr
dunklen Bereich und eine im sehr hellen Bereich; zweitens zeigt es, dass die Rot-, Grn- und
Blau-Kurven des Bildes vergleichsweise parallel verlaufen. Letzteres ist ein Indiz dafr, dass die
Farbverteilung einigermaen in Ordnung ist und das Bild keinen Farbstich in eine bestimmte
Richtung hat. Die beiden Spitzen im unteren und im obersten Helligkeitsbereich deuten jedoch
auf eine starke Dominanz sehr heller und sehr dunkler Farben hin, was ja auch ersichtlich ist.
Gute Grafikprogramme erlauben das Bearbeiten der grafischen Histogrammkurven. Auf diese
Weise lsst sich die Farbverteilung im Bild korrigieren. Im obigen Beispiel wre es ein Versuch
wert, die Spitze im unteren Bereich zu reduzieren, also die RGB-Werte dort nher an den
Ursprung der Y-Achse zu bekommen. Natrlich macht das nur Sinn, wenn die damit verbundene Bildaufhellung bei den dunklen Tnen keine hsslichen Verflschungen bewirkt. Bildkorrekturen auf Histogramm-Ebene erfordern deshalb viel Geduld und Ausprobieren.

24.3.11 Gammakorrektur
Bei der Gammakorrektur ist es zunchst wichtig zu wissen, was ein Gammawert ist. Ein Gammawert ist bei Computergrafiken das Verhltnis zwischen den Farbwerten, die in der Grafik gespeichert sind, und den Farbwerten, die ein Gert wie Bildschirm oder Drucker daraus macht.
Idealerweise wre das ein 1:1-Verhltnis, sprich, es werden genau die Farben ausgegeben, die in
der Grafikdatei gespeichert sind. Das ist aber nicht der Fall. Bildschirme beispielsweise sind leider
nicht geeicht. Die Darstellung von Farben schwankt von Bildschirm zu Bildschirm und von
Betriebssystem zu Betriebssystem sogar gewaltig. Wenn Sie also an Ihrem Bildschirm eine Grafik
bearbeiten und mit Funktionen wie Helligkeit, Sttigung, Histogramm usw. deren optische Wirkung beeinflussen, dann gilt das Ergebnis zunchst mal nur fr Ihren Bildschirm. Wenn Sie die
Grafik im Web prsentieren wollen, wird sie jedoch auf sehr vielen und sehr unterschiedlichen
Bildschirmen angezeigt.
Gute Grafikprogramme bieten die Gammakorrektur deshalb auf zwei Ebenen an: auf der Ebene
des eigenen Monitors und auf der Ebene konkreter Grafiken. Die Gammakorrektur fr den
Monitor leistet eine Anpassung zwischen numerischen Farbwerten, etwa nach dem RGB-Modell,

1136

Kapitel 24: Grafik

und deren Darstellung im Grafikprogramm an Ihrem Bildschirm. Die Bildschirmgrundeinstellungen selber werden dabei nicht verndert. Die Korrektur betrifft lediglich die Richtigstellung
der Farbanzeige im Grafikprogramm. Eine grafische Darstellung erlaubt bei solchen Grafikprogrammen die Angleichung zwischen gespeicherten und am Bildschirm dargestellten Farbwerten.
Bei den meisten Computerbildschirmen mssen Sie einen Gammawert von 1,5 oder hher einstellen, um eine realistische Farbdarstellung im Grafikprogramm zu erhalten. Wenn jeder, der
Grafiken bearbeitet, das tun wrde, wre insgesamt schon viel gewonnen.
Nachdem die Gammakorrektur fr den Monitor erfolgt ist, lassen sich mit Hilfe der Gammakorrektur fr konkrete Grafiken Farbprobleme ausgleichen, die durch die Herkunftsquelle der
Grafik bedingt sind. So nehmen beispielsweise viele Digitalkameras Bilder scheinbar zu dunkel
auf. Das liegt daran, dass auch bei der Umrechnung von Lichtstrke in RGB-Werte, die eine
Digitalkamera bei einer Aufnahme vornehmen muss, Ungleichheiten vorkommen, die von
Kamera zu Kamera schwanken knnen. Durch eine Gammakorrektur lassen sich solche Probleme meistens gut lsen.

24.20: Das linke der beiden (folgenden) Bilder zeigt ein Ausgangsbild, das rechte das Ergebnis
nach einer Gammakorrektur (Gammawert 1,8).

Bei einem Gammawert grer als 1,0 werden vor allem die mittleren Farbtne gegenber den
sehr dunklen und sehr hellen Farbtnen aufgehellt. Bei einem Gammawert kleiner als 1,0 werden
diese Farbtne abgedunkelt. Der Effekt ist dabei ein anderer, als wenn Sie etwa versuchen, durch
Erhhen der Helligkeit eine Grafik aufzuhellen.

24.3.12 Filtereffekte
Jede Form der Manipulation einer Pixelgrafik, z.B. Helligkeit, Kontrast, Sttigung oder Gammakorrektur, ist ein Filter. Denn auf Rechnerebene ist das ndern von Helligkeit, Kontrast usw. mit
einem bestimmten mathematischen Algorithmus verbunden, der auf die gespeicherten RGBWerte in der Grafik angewendet wird. Diese werden durch die Anwendung des Algorithmus neu
berechnet. Das Ergebnis ist dann das genderte Aussehen des Bildes aufgrund der neuen RGBWerte der einzelnen Pixel.

24.3 Techniken und Begriffe der Bildbearbeitung

1137

Solange Sie mit den Standardfunktionen der Bildmanipulation arbeiten, brauchen Sie deren
Filter-Algorithmen nicht kennen. In den Dialogen, die das Grafikprogramm anbietet, verndern
Sie lediglich Parameter, aber nicht den zugrunde liegenden Algorithmus. So stellen Sie beispielsweise den gewnschten Wert fr Sttigung ein, aber Sie wissen nicht, wie das Grafikprogramm
eigentlich rechnet, um aus dem eingestellten Wert die RGB-Werte der einzelnen Pixel neu zu berechnen.
Gute Grafikprogramme bieten eine ganze Reihe von weiteren Filtern im Dialog an. Dazu gehren Standards wie Relief-Effekte, Rausch- und Verwisch-Effekte usw. Daneben bieten einige Programme auch eine so genannte Plug-In-Schnittstelle fr Filter an. Diese erlaubt es, sich beliebige
eigene Filter schreiben, die einen Algorithmus auf die RGB-Werte einer Grafik bewirken. Ein
Algorithmus knnte beispielsweise lauten: Ziehe von allen Rot-Werten, die ber 200 liegen, 50
ab, von allen Grn-Werten, die ber 200 liegen, 100, und von allen Blau-Werten, die ber 200
liegen, 150. Oder: Setze bei allen Pixeln, bei denen der Rot-Wert, der Grn-Wert und der BlauWert ber 200 liegen, den Wert auf reines Wei, also 255,255,255.
Filter knnen ganz verschiedene Aufgaben wahrnehmen, z.B.:
Fehlerkorrekturen in Bildern durchfhren (z.B. Farbkorrekturen)
Interessante Effekte einbauen (z.B. Puzzle-Effekt oder Verwisch-Effekte)
Optische Standardeffekte nachempfinden (z.B. Lichteinfall von einer Seite oder Mondscheinlicht)
Erzeugung vllig neuer Phantasiegrafiken (dabei wird die Ausgangsgrafik nur als zuflliger
Input benutzt)
Die folgenden Bilder zeigen die Anwendung einiger Filter auf eine Ausgangsgrafik.

24.21: Ausgangsgrafik

1138

Kapitel 24: Grafik

24.22: Filter, der einen Verzerrungseffekt

bewirkt

24.23: Filter, der einen Kohlezeichnungs-Effekt

bewirkt

24.24: Filter, der einen Spot-Effekt bewirkt

24.3 Techniken und Begriffe der Bildbearbeitung

1139

24.25: Filter, der die Grafik zum Erzeugen eines

Musters benutzt

24.3.13 Anti-Aliasing
Anti-Aliasing ist ein Algorithmus fr Pixelgrafiken, um sichtbare Treppeneffekte an harten
Kanten oder Farbbergngen in Grafiken auszugleichen. An den folgenden Grafiken knnen Sie
den Effekt gut beobachten.

24.26: Anti-Aliasing

Die Ausschnittvergrerungen zeigen das Prinzip des Anti-Aliasing. Mit Anti-Aliasing werden
bei schrgen Strichen oder Rundungen die Treppeneffekte abgeschwcht, indem abgeschwchte
Farbtne hinzugefgt werden.
Besonders bei Schriftzgen innerhalb von Grafiken ist Anti-Aliasing ein Mittel fr mehr Professionalitt. Aber auch bei anderen Objekten mit Schrgen oder Kurven bietet sich Anti-Aliasing
an, um die Rnder weich zu zeichnen und sichtbare Pixeltreppen zu vermeiden.
Gute Grafikprogramme untersttzen den Anti-Aliasing-Effekt. Das Problem dabei ist normalerweise, dass Pixelgrafiken keine Objekte enthalten, die man einfach markieren kann, um ihnen
Eigenschaften wie zum Beispiel den Anti-Aliasing-Effekt zuzuweisen. Einige Programme

1140

Kapitel 24: Grafik

bieten jedoch die Mglichkeit an, Pixelbereiche, die ein erkennbar zusammenhngendes Muster
darstellen, als Objekt zu markieren (Hilfsmittel dazu ist der meist so genannte Zauberstab).
Markierten Objekten knnen Sie dann die Eigenschaft des Anti-Aliasing zuweisen. Beim Neuerstellen von Elementen wie Schriftzgen oder geometrischen Figuren knnen Sie dagegen von
vorneherein den Anti-Aliasing-Effekt einstellen.

24.4

Animierte GIF-Grafiken

24.4.1 Allgemeines zu animierten GIF-Grafiken

Das GIF-Format untersttzt in der neueren 89er-Version die Mglichkeit, mehrere Grafiken in
ein und derselben Grafikdatei zusammenzufassen. Die Einzelgrafiken der Datei werden nacheinander abgespult und angezeigt. Dabei ist es auch mglich, Kontrollbefehle mit abzuspeichern,
z.B. Verzgerungszeiten zwischen den einzelnen Bildern. Dieses Feature bietet Ihnen zwei interessante Einsatzmglichkeiten:
Sie knnen eine automatisch ablaufende Diashow mehrerer verschiedener Bilder programmieren.
Sie knnen eine Sequenz hnlicher und aufeinander aufbauender Bilder in einer GIF-Datei
speichern. Dadurch ergibt sich ein Daumenkino-Effekt, d.h. eine einfache Video-Animation.
Mit Hilfe von animierten GIF-Grafiken knnen Sie also bewegte Elemente auf Ihre Web-Seiten
bringen, ohne in Programmiersprachen wie Java einsteigen zu mssen. Beachten Sie aber auch,
dass animierte GIF-Grafiken schnell eine kritische Gre erreichen. Denn mehrere Einzelgrafiken in einer Grafikdatei bentigen zwangslufig mehr Speicher. Animationen sollten Sie daher
nur aus kleinen Grafiken erzeugen. Ferner ist im Hinblick aufs Web-Design darauf hinzuweisen,
dass animierte Elemente unwillkrlich die Aufmerksamkeit des Betrachters auf sich lenken und
dadurch aber von vielleicht wichtigeren Inhalten einer Seite, wie Navigation oder Information,
ablenken. Setzen Sie animierte GIFs daher vorsichtig und mit Bedacht ein. Das sprichwrtliche
Gezappel auf manchen Web-Seiten fr berflssiges Gimmicks ist mittlerweile verpnt und gilt
als stmperhaft.
Das Erstellen animierter GIF-Grafiken wird von vielen professionellen Grafikprogrammen
untersttzt. Daneben gibt es Spezialprogramme, mit deren Hilfe Sie bereits vorhandene Grafiken
zu animierten Grafiken zusammenstellen knnen.

24.4.2 Diashow-Effekte durch animierte GIF-Grafiken

Diashow-Effekte knnen Sie z.B. verwenden, um in schneller Abfolge die typischen Produkte
Ihrer Firma anzuzeigen oder um in einem interaktiven Lernprojekt zum Erlernen einer Fremdsprache neue Vokabeln kurz einzublenden (unterbewusst lernen). Sie knnen auch mehrere
mit einer Gesamtbedeutung assoziierten Bilder in Reihe schalten und auf diese Weise animierte
Symbole oder animierte Cliparts prsentieren. Wichtig ist, dass die Einzelbilder fr den Anwender einen nachvollziehbaren Zusammenhang ergeben. Die Anzeigedauer der Einzelbilder knnen Sie frei einstellen.

24.4 Animierte GIF-Grafiken

1141

24.27: Typische Diashow-Effekte

24.4.3 Daumenkino-Effekte durch animierte GIF-Grafiken

Daumenkino-Effekte knnen sie z.B. verwenden, um Cliparts zu einfachen Trickfilmsequenzen
zu erweitern, um wissenschaftliche Ablaufprozesse zu visualisieren oder um in der technischen

1142

Kapitel 24: Grafik

Dokumentation Handgriffe und andere zeitliche Ablufe zu verdeutlichen. Die Geschwindigkeit

der Bildsequenzen und damit die Ablaufgeschwindigkeit knnen Sie frei einstellen.

24.28: Typische Daumenkino-Effekte

24.4.4 Vorgehensweise beim Erstellen animierter GIF-Grafiken

Bevor Sie eine animierte Grafik erstellen knnen, mssen Sie folgende Vorbereitungen treffen:
Sie mssen die Einzelbilder mit Hilfe eines geeigneten Grafikprogramms erstellen bzw. auswhlen.
Sie sollten alle Bilder in neue Grafikdateien mit einheitlicher Bildgre und einheitlicher
Farbpalette kopieren.
Speichern Sie alle auf diese Weise erzeugten Bilder als GIF-Grafiken ab. Vergeben Sie dabei
am besten durchnummerierte Dateinamen wie bild1.gif, bild2.gif usw., und zwar in der Reihenfolge, in der Sie die Bilder spter als Einzelbilder in der animierten Grafik ablegen wollen.
Nachdem Sie diese Vorbereitungen getroffen haben, knnen Sie die Software zum Erstellen der
animierten GIF-Grafik aufrufen. Da die Bedienung solcher Programme sehr unterschiedlich ist,
wird hier nicht nher auf einzelne Bedienschritte eingegangen. In jedem Fall stehen Ihnen folgende Mglichkeiten zur Verfgung:
Bild (image): Indem Sie eine GIF-Grafik einfgen, wird diese Grafik als Einzelbild in die animierte Grafik bernommen.
Schleife (loop): Indem Sie eine Schleife einfgen, knnen Sie bestimmen, wie oft die gesamte
Bildsequenz wiederholt werden soll. Sie knnen einen Zahlenwert editieren, der die Anzahl
der Abspielwiederholungen angibt.
Kontrollelement (control): Indem Sie ein Kontrollelement einfgen, knnen Sie den Ablauf
zwischen zwei Einzelbildern kontrollieren. Sie knnen z.B. die Verzgerung bis zur Anzeige
des nchsten Einzelbilds einstellen. Ferner knnen Sie Angaben zum transparenten Hintergrund der Einzelbilder machen.
Text (plain text):: Indem Sie Text einfgen, knnen Sie den Ablauf der animierten Grafik
zustzlich durch eingeblendete Textteile ergnzen. Dabei knnen Sie den Text formatieren.
Kommentare (comments): Indem Sie Kommentare einfgen, knnen Sie Ihre Arbeiten intern
auskommentieren. Solche Kommentare werden nicht mit angezeigt.
Um das fertige Ergebnis zu betrachten, brauchen Sie natrlich ein geeignetes Anzeigeprogramm.
Einige Editierprogramme fr animierte GIF-Grafiken bieten selbst die Mglichkeit des Betrachtens an. Wenn nicht, knnen Sie die Grafik auch mit Ihrem Web-Browser lokal ffnen und betrachten.

1143

25 Web-Projektverwaltung

25.1

Web-Projekte planen

25.1.1 Allgemeines zu Web-Projekten

Projekte im Web sollten stets zwei Anforderungen gengen: Sie sollten zum einen in sich geschlossen sein, d.h. dem Anwender im Web-Browser als ein erkennbar geschlossenes Ganzes erscheinen; zum anderen sollten sie aber auch der Tatsache Rechnung tragen, dass sie Teil einer
weltweiten Plattform sind, in der es auch andere Projekte gibt, und vor allem die Mglichkeit zu
thematisch sinnvollen Verweisen auf andere Projekte anbieten.
Nicht wenige Leute suchen mit ihren Homepages im Netz den schnellen Erfolg oder zumindest
die tiefe Bewunderung der Seitenbesucher vor ihren Programmierheldentaten. Nachdem sie dabei in tagelanger Qual irgendwelches Zeug fr Layout und Effekte zusammengeklaut haben,
ohne sich um Inhalte zu kmmern, berfallen sie schlielich einschlgige Foren mit der Frage,
wie sie ihren Quelltext vor den Augen der Besucher schtzen knnen. Aber so funktioniert das
Web nun mal nicht, und glcklicherweise bestraft sich dort jeder selbst, der nur profitieren will,
ohne etwas zu geben.
Es gibt zwar kein Patentrezept fr gelungene und erfolgreiche Web-Projekte, aber es gibt mittlerweile durchaus Erfahrungswerte und Empfehlungen fr benutzerfreundliches und nutzbringendes Publizieren im Web. Der Erfolg muss auch nicht immer im direkten Geldfluss liegen. Ein,
zwei interessante neue Kontakte, die sich im Lauf der Zeit ber ein Web-Projekt ergeben, knnen viel mehr einbringen als mit Werbebannern zugekleisterte Seiten, deren Anbieter nur in
Klickraten denkt. Und schlielich kann eine Homepage auch einfach nur Spa machen.
Im Web prsent sein, heit in sein. Aber belanglose Werbung oder Allerweltsinformation
bringen weder dem Web noch Ihrem Geldbeutel etwas. Das Web braucht Juwelen, um eine
Sensation zu bleiben. Und Juwelen sind teuer. Eigentlich knnen nur Besessene so viel aufbringen. Das Kapitel 25.1 fasst die berlegungen zusammen, die Sie im Vorfeld eines Projekts anstellen sollten. Denn klare Konzepte und berlegtes Vorgehen sind schon mal der erste Schritt
fr ein gutes Projekt.

25.1.2 Ziel des Projekts

Beispiele fr mgliche Ziele eines Projekts:
Wir als Firma stellen uns und unsere Produkte/Dienstleistungen vor (Kommunikation).
Wir als Firma bieten eine Dienstleistung direkt ber diese Web-Seiten an (Transaktion, Interaktion, Partizipation).
Ich als Einzelperson stelle meine Aktivitten in meinem Fachgebiet/Hobby vor.

1144

Kapitel 25: Web-Projektverwaltung

Ich als Einzelperson veranstalte auf diesen Web-Seiten ein persnliches Happening.
Wir als Institution/Organisation/Verband/Verein stellen unsere Ziele und Aktivitten vor.
Wir als Institution/Organisation/Verband/Verein bieten Ihnen die Mglichkeit, ber diese
Web-Seiten an einer bestimmten Aktion teilzunehmen.
Ich/Wir stelle(n) auf diesen Web-Seiten einen groen Datenbestand aus einem bestimmten
Sachgebiet zur allgemeinen Verfgung.
Ich/Wir sammeln auf diesen Web-Seiten in loser Weise alles, was zu einem bestimmten Sachgebiet gehrt.
Diese Liste mit Beispielen will zeigen, dass es erstens sehr unterschiedliche Ziele eines WebAuftritts geben kann, und dass auch ein und derselbe Anbieter von Web-Seiten unterschiedliche
Ziele verfolgen kann. Wichtig ist, dass Sie sich in der Konzeptphase eines Web-Projekts ber das
oder die Ziele des Projekts im Klaren sind, und dass Sie dem Anwender, der Ihre Seiten aufruft,
gleich zu Beginn (auf der Einstiegsseite) klar machen, welches Ihre Ziele sind. Das kann explizit
geschehen durch Stze wie: XY begrt Sie. Auf diesen Seiten stellen wir uns und unsere
innovative Technik vor usw., oder Light your fire and feel free to loose yourself into this hyperspace. Es kann aber auch durch die Aufmachung der Startseite geschehen. So vermittelt eine
neutral aufgebaute Startseite (ohne Hintergrundbilder, animierte Grafiken, JavaScript usw.)
wissenschaftliche Seriositt; eine gestylte, aber berlegen statische Seite suggeriert beim Anwender hufig eine groe, etablierte Firma oder Institution oder ein Projekt von monumentalen
Ausmaen. Eine poppige, nach Aufmerksamkeit schreiende Seite dagegen verrt eine kleine,
werbende Firma oder ein freakiges, nicht ganz so ernst zu nehmendes Projekt.

25.1.3 Zielgruppe des Projekts

Genauso wichtig wie eine Zielsetzung ist es, die Zielgruppe zu bestimmen, die durch das Projekt
angesprochen werden soll. Mgliche Zielgruppen sind z.B.:
Potenzielle Kunden/Kufer
Hobbyisten/Liebhaberkreise
Wissenschaftler/Experten
Kinder und Jugendliche
Familien
Computerfreaks/Hacker
Vergngungsschtige
Neugierige
Sinnsuchende
Natrlich knnen Sie versuchen, alle Besucher Ihrer Web-Seiten zufrieden zu stellen. Das wird
allerdings ziemlich schwer, und es besteht die Gefahr, dass Sie niemanden so richtig zufrieden
stellen. Besser ist es, sich vorzustellen, wie bestimmte Leute, die auf Ihre Web-Seiten stoen, sofort ein Lesezeichen darauf setzen, weil sie gleich erkennen, dass dies Seiten sind, die mit ihren

25.1 Web-Projekte planen

1145

eigenen Interessen, ihrem Wissensdurst, ihrer Lebensart oder ihren Wnschen, Gedanken und
Hoffnungen zu tun haben. Es gibt beispielsweise Web-Seiten, auf denen Betroffene ber eine
nicht alltgliche Krankheit berichten, unter der sie leiden. Wer nun selbst von dieser Krankheit
betroffen ist, im Web nach Informationen darber sucht und auf diese Seiten stt, wird sie
verschlingen, und sie werden ihm viel bedeuten. Solche Seiten haben eine ziemlich eingeschrnkte Zielgruppe, aber dafr sind sie fr ihre Zielgruppe Gold wert.
Ebenso wie die Zielvorgabe Ihres Projekts sollte dem Anwender auch die adressierte Zielgruppe
klargemacht werden. Dazu eignen sich explizite Stze wie: Allen Fahrradschtigen bieten wir auf
diesen Seiten technische Neuigkeiten und Tourenvorschlge. Aber auch die Aufmachung der
Startseite selektiert das Publikum. Dabei hngt allerdings viel vom Zusammenspiel der Elemente
ab. Ein dunkler Sternenhimmel als Hintergrundbild spricht joystickverliebte Cybernauten ebenso an wie entrckte Esoteriker. Erst die Vordergrundsymbolik (z.B. grelle Strahlen aus Laserwaffen, die ein Monster treffen, oder wehender weier Schleier, der auf eine Pyramide zufliegt)
sorgt in solchen Fllen fr intuitiv klare Verhltnisse.

25.1.4 Projektumgebung im Web erforschen

Vor allem, wenn Sie im Web etwas verkaufen oder mit einer Idee erfolgreich sein wollen, sollten
Sie bereits in der ersten Planungsphase herausfinden, ob es zu dieser Idee schon etwas gibt im
Web, und wenn ja, was und mit welchem Erfolg. berlegen Sie sich zu diesem Zweck ein paar
einschlgige Stichwrter, die Ihr Projekt charakterisieren. Suchen Sie nach diesen Stichwrtern
in groen Suchmaschinen.
Werten Sie die Suchergebnisse nach folgenden Kriterien aus:
Gibt es gar nichts zu diesen Suchbegriffen? Das kann bedeuten, dass die Welt auf genau das
wartet, was Sie anbieten wollen. Es kann aber auch bedeuten, dass das niemanden in der Welt
interessiert. In diesem Fall ist es angebracht, mit einer kleinen, nicht so aufwendigen Projektversion zu beginnen und Feedback abzuwarten.
Gibt es uferlos viel zu den Suchbegriffen? Das kann bedeuten, dass Ihre Plne voll im Trend
liegen, aber auch, dass Sie hier nicht mehr viel Neues werden bieten knnen. Folgen Sie den
Verweisen der Suchergebnisse und analysieren Sie sorgfltig, was es bereits gibt und wie Sie
sich von bestehenden Angeboten nachvollziehbar abgrenzen knnen (z.B. erstes Angebot
dieser Art im sdpflzischen Raum).

25.1.5 Inhalte und Redaktion

Anfnger unterliegen hufig dem Irrglauben, ein geiles Layout oder ein paar tolle Gimmicks
wrden ein Web-Projekt interessant machen. Die Erfahrung zeigt das Gegenteil: Anwender besuchen neue, fremde Web-Projekte normalerweise nicht, weil sie ganz besoffen sind aus lauter
Vorfreude auf viel buntes Zeug am Bildschirm, sondern weil sie etwas ganz Bestimmtes suchen
und das aufgesuchte Projekt als aussichtsreichen Kandidaten fr ihr Anliegen auserkoren haben.
Solche Besucher erwarten zwar durchaus ein ansprechendes Layout, aber in erster Linie wollen
sie mglichst schnell ihr Ziel erreichen. Das Ziel aber ist nicht das Betrachten und Verweilen
auf Ihren Seiten, sondern meistens ein inhaltliches. Die Besucher wollen Informationen. Auch
wenn es ein elektronischer Shop ist, wollen die meisten Besucher mehr ber Produkte erfahren

1146

Kapitel 25: Web-Projektverwaltung

als nur Artikelnamen und Preise. Und selbst wenn es einfach eine private Homepage ist, wollen
die Besucher etwas ber Sie, Ihre Gedanken usw. erfahren. Das Web ist in erster Linie ein Informationen vermittelndes Medium, und dem sollten Web-Projekte Rechnung tragen.
Doch Inhalte zu erstellen ist aufwndig, Inhalte zu pflegen und zu aktualisieren nicht minder.
Dazu ist redaktionelle Arbeit erforderlich. Viele, die im Web publizieren, sind zuvor noch nie
oder nur am Rande mit redaktionellen Ttigkeiten in Berhrung gekommen. Der anfngliche
Leitspruch des W3-Konsortiums Everyone's a publisher! beinhaltet eben nicht nur die verlockenden neuen technischen Mglichkeiten, ein Publikum zu erreichen, sondern auch die ganze
Arbeit eines Publishers, die damit verbunden ist. Die Textarbeit wird viel zu hufig gegenber
dem Programmieraufwand eines Web-Projekts unterschtzt. Und genau aus diesem Grund
scheitern viele sehr gut programmierte Web-Projekte.
Im Planungsstadium eines Web-Projekts mssen Sie sich deshalb unbedingt Gedanken machen
ber folgende Punkte:
Startinhalte: Woher sollen die ersten Inhalte kommen? Gibt es vorhandene, geeignete Texte?
Gibt es beispielsweise ein Firmenprospekt, wissenschaftliche Aufstze, Dokumentarchive,
Datenbanken? Sind diese Quellen wirklich geeignet enthalten sie beispielsweise keine vertraulichen, nicht fr die ffentlichkeit geeigneten Daten? Mssen die Quellen also noch ausgewertet werden? Und wenn gar keine Quellen vorhanden sind wer erstellt dann die
Inhalte? Sind dazu Recherchen erforderlich? Wer liest Korrektur?
Laufende neue Inhalte: Woher sollen laufende neue Inhalte kommen? Besucher von WebProjekten werden nur dann zu Stammbesuchern, wenn es regelmig etwas Neues auf den
Seiten zu entdecken gibt. Sorgen Redakteure oder Zulieferer fr neue Inhalte? Oder sollen
neue Inhalte von den Besuchern selbst beigetragen werden, beispielsweise durch Anbieten
eines Diskussionsforums?
Aktualitt: Wer berwacht die Aktualitt und Richtigkeit der Inhalte? Wer ndert im WebDatenbestand genderte Fakten, z.B. Informationen zu Produkten, die vom Markt genommen wurden, Nachrichten von gestern usw.? Wer repariert nicht mehr funktionierende
Verweise zu anderen Projektseiten oder zu nicht mehr existierenden anderen Web-Adressen?

25.1.6 Kostenaufwand
Der Kostenaufwand eines Web-Projekts verteilt sich auf folgende Bereiche:
Konzept- und Planung
Realisierung
Pflege
In allen Fllen handelt es sich um Zeitaufwand, der nicht zu unterschtzen ist. Wenn Sie aus Begeisterung oder als Hobbyist arbeiten, werden Sie die Formel Zeit=Geld nicht so sehr empfinden,
aber wenn Sie kommerziell arbeiten, mssen Sie fr alle drei genannten Bereiche Kalkulationen
anstellen.
Wenn Sie Geld fr das Projekt investieren mssen, sind folgende Abwgungen wichtig:

25.1 Web-Projekte planen

1147

Selbst- oder Fremdarbeit: Ist es gnstiger, sich selbst die Zeit (Geld) zu nehmen, um sich in
Konzept und Realisierung (fachlich/technisches Know-how) einzuarbeiten, oder ist es besser,
jemanden zu beauftragen (ebenfalls Geld), der sich damit auskennt und dies bernimmt?
Rentabilitt: Wie empfindlich treffen Sie die anfallenden Kosten? Knnen Sie sich leisten,
dass das Projekt ein Flop wird? Wenn ein Flop Ihren Untergang bedeutet, sollten Sie es vielleicht erst mal mit risikoloseren Investitionen versuchen.
Bei kommerziellen Web-Projekten ist es mittlerweile meist so, dass die erste Erstellung als Auftragsarbeit an Web-Agenturen vergeben wird. Die laufende Pflege der Inhalte einer solchen
Web-Agentur zu berlassen hat sich dagegen als unrentabel erwiesen. Das bedeutet: Bei der Auftragsvergabe mssen bereits Regelungen getroffen werden, wie Sie als Auftraggeber anschlieend
das Projekt inhaltlich pflegen knnen. Immer hufiger verlangen Auftraggeber von den WebAgenturen deshalb die Implementierung eines so genannten Content Management Systems
(CMS). Ein solches System erlaubt webtechnisch unerfahrenen, aber inhaltlich kompetenten und
redaktionell verantwortlichen Mitarbeitern des Auftraggebers, ber eine anwenderfreundliche
Internet-Schnittstelle (hufig webbasierte Lsungen) neue Inhalte in das Projekt einzuarbeiten.
Es gibt fertige Softwarelsungen fr CMS, aber oft werden auch individuelle Lsungen programmiert. Professionelle CMS-Software beinhaltet gegenber einfachen Lsungen Features wie
Redaktionsvorstufe und endgltiges Freischalten durch die Redaktionsleitung usw.
Im Linkverzeichnis des Online-Angebots von SELFHTML unter selfaktuell.teamone.de finden Sie
Verweise zum Thema Content Management Systeme.

25.1.7 Terminierung und Ankndigung

Egal, ob Sie ein privates oder ein professionelles Web-Projekt planen eines sollten Sie in jedem
Fall tun: sich Termine setzen. Denn ohne selbst gesetzte Termine wird ein Projekt nie fertig. Die
Termine sollten allerdings realistisch sein. Ein Termin, der nicht zu halten ist, ist nicht mehr wert
als kein Termin. Fr einfache Projekte reicht eine schlichte Deadline. Bei komplexeren Projekten, an deren Realisierung mehrere Hnde oder unabhngige Parteien arbeiten, ist mglicherweise Terminkoordinierung mit Hilfe von Projektplanungssoftware erforderlich, hnlich wie
bei Produktrealisierungen oder Bauprojekten.
Gleichzeitig stellt sich die Frage nach einer Vorankndigung. Hufig wird ein Domain-Name
reserviert, sobald eine Projektidee geboren ist. Dagegen ist auch nichts einzuwenden. Aber nach
kurzer Weile steht dann der angemietete Speicherplatz im Web zur Verfgung, und die Adresse
ist ffentlich aufrufbar. In dieser Phase neigen viele Heisporne dazu, irgendwelche prahlerischen Vorankndigungen zu verffentlichen, mit lustigen animierten Baustellenschildern oder
moderneren Flash-Trailern versehen, und das Ganze wird dann sogleich in allen bekannten
Suchmaschinen angemeldet.
Vorankndigungen knnen unter bestimmten Umstnden sinnvoll sein, so etwa, um auf eine
neu reservierte Marke schon mal vorab hinzuweisen. In den meisten Fllen aber sind Vorankndigungen ein rgernis. Die Suchmaschinen werden auf solchen Seiten mit unntzem Mll gefuttert, und Besucher, die den Anbieter nicht kennen, werden sich kaum von dessen grospurigen Ankndigungen beeindrucken lassen. Stattdessen klicken sie genervt weg, sobald sie begriffen haben, dass da nur wieder einer dieser Prahlheinis am Werk ist.

1148

Kapitel 25: Web-Projektverwaltung

Vorankndigungen sollten so sein wie das geplante Web-Projekt: fundiert, informationsorientiert und benutzerfreundlich. Also keine sinnlosen Animationen, die Ladezeit verursachen,
sondern stattdessen ein paar oder mehr Stze ber das geplante Projekt.

25.1.8 Gliederung und Strukturierung

Ein Web-Projekt besteht aus wenigstens einigen, oft aus vielen, manchmal aus unzhligen WebSeiten. Je mehr Seiten und zugehrige Dateien das Projekt enthlt, desto wichtiger wird eine
schriftliche Fixierung der Datei- bzw. Verweisstruktur. Aber auch bei kleinen Projekten, die nur
aus wenigen Seiten bestehen, sollten Sie sich vorher berlegen, was auf welche Seite gehrt und
wie die Seiten vernetzt werden sollen.
Denken Sie stets daran, dass das Web ein Hypertext-Medium ist. Hypertext zwingt Sie nicht zu
bestimmten Formen. Hypertext ist ein nichtlineares Medium. Der Anwender soll nicht der Reihe
nach lesen, sondern auswhlen, was ihn interessiert. Das ist eine groe Freiheit, birgt jedoch
zugleich die Gefahr des lost in hyperspace-Gefhls.
Die meisten Anwender im Web sind keine erfahrenen Hypertext-Piloten. Bei Projekten, die aus
mehr als einer Handvoll Seiten bestehen, sollten Sie deshalb versuchen, dem Anwender eine
Metapher zu bieten, an die er sich halten kann. Mgliche Metaphern:
Buchmetapher: Das Projekt hat Dokumentcharakter, besitzt ein Inhaltsverzeichnis und evtl.
ein Stichwortverzeichnis, Dateien entsprechen Kapiteln usw. Diese Metapher eignet sich besonders fr begrenzte Information zu bestimmten Themen, wobei die Daten selten aktualisiert werden.
Verzeichnis- oder Baummetapher: Das Projekt wirkt auf den Anwender wie ein Dateimanager. Es gibt Dateien mit Verweislisten, die durch ein Ordnersymbol gekennzeichnet werden,
und Dateien mit Information, die durch Dokumentsymbole gekennzeichnet werden. Diese
Metapher eignet sich besonders fr groe Datenbestnde mit hufigen Neuzugngen, wobei
jedoch der Informationsbereich, der abgedeckt wird, von vorneherein bekannt ist.
Indexmetapher: Ein groes, alphabetisch oder nach anderen Kriterien (z.B. Datum, Zeit) sortiertes Verweisverzeichnis bildet den Zugang zur Information. Diese Metapher eignet sich
besonders fr Projekte, deren Informationsbereich nicht genau eingrenzbar ist und bei denen
hufig neue Daten hinzukommen.
Sobald der Anwender Ihre beabsichtigte Metapher erkennt, kann er sich eine rumliche Vorstellung Ihres Projekts machen. Das ist eine ganz wichtige Sache, die Sympathie des Anwenders
gegenber dem Projekt hngt tatschlich zum groen Teil davon ab, ob er diesen Aha-Effekt hat
oder nicht.

25.1.9 Corporate Design

Genauso wichtig wie ein Gliederungskonzept ist ein Corporate-Design-Konzept. Das bedeutet,
dass alle Dateien, die zu einem Projekt gehren, ein optisch einheitliches Bild bieten, damit der
Anwender intuitiv erkennt, dass er sich noch im gleichen Projekt befindet. Corporate Design
stellen Sie her, indem Sie bestimmte Gestaltungselemente bei jeder Datei des Projekts wieder
verwenden. Das knnen sein:

25.1 Web-Projekte planen

1149

Logo: Es sollte an immer gleicher Stelle auf der Seite stehen, zum Beispiel immer links oben
am Seitenanfang. Wenn Sie mit der Frame-Technik arbeiten, knnen Sie das Logo auch in
einem fixen Bildschirmbereich platzieren.
Grafische Symbole: Das sind kleine Grafiken, die an bestimmten Stellen stehen und eine fr
den Anwender sofort erkennbare bzw. nachvollziehbare Bedeutung haben. Symbole knnen
z.B. bedeuten: dies ist ein Beispiel, oder dies ist eines unserer Produkte oder dies ist ein
Verweis, mit dem der Anwender das Projekt verlsst.
Textformate: Dazu gehrt z.B., Beispiele immer in diktengleicher Schrift darzustellen.
Corporate Design suggeriert Geschlossenheit. Besonders bei kommerziellen Projekten, also bei
Firmen, die sich vorstellen oder direkt etwas anbieten, vermittelt Corporate Design dem Anwender das Gefhl, es mit erfahrenen Profis zu tun zu haben.
Corporate Design ist etwas anderes als Web-Design. Aber Web-Design muss die Faktoren, die
das Corporate Design vorgibt, im Design von Layout, Navigation, Textformatierung usw. bercksichtigen. Gerade wenn Sie eine Fremdbeauftragung anstreben, ist es wichtig, dem Auftragnehmer genaue Vorgaben zum Corporate Design zu machen. Hren Sie aber andererseits auch
auf mgliche Einwnde. Corporate Design darf nicht die Ergonomie beim Anwenden der Seiten beeintrchtigen.

25.1.10 Web-Design
ber gutes und schlechtes, richtiges und falsches Web-Design wird in Fachkreisen endlos diskutiert. Die folgenden Regeln fassen wichtige Punkte zusammen:
Form ohne Inhalt ist leer: Ohne vermittelnde Information, ohne echte Unterhaltung kann
eine Web-Seite optisch noch so perfekt sein sie ist dennoch eine Zumutung, und niemand,
der sie besucht hat, kommt ein zweites mal wieder. Wer nichts zu bieten hat auer ein paar
schicken Bildschirmfllungen, wird im Web keine dauerhaften Freunde gewinnen.
Inhalt ohne Form ist langweilig: Ohne sinnvolle Strukturierung in kleine Informationseinheiten und ohne Auflockerung durch Grafiken oder multimediale Elemente mit Signal-,
Symbol- oder Illustrationswirkung ist Informationsaufnahme am Bildschirm ermdend und
nervttend. Bildschirmseiten lassen sich nicht mit Buchseiten vergleichen.
Navigation ist angesagt: Ein Web-Projekt mit viel Informationsgehalt ist zunchst einmal ein
Hypertext-Projekt, und der Eindruck, den es beim Anwender hinterlsst, hat viel damit zu
tun, ob es einfach ist, darin die gewnschten Informationen zu finden, ob es Spa macht,
seine eigenen Spuren darin zu verfolgen, und ob es leicht ist, jederzeit und schnell zu anderen
wichtigen Stellen des Projekts zu verzweigen. Web-Design ist also mindestens ebenso viel Hypertext-Design wie Grafik-Design.
Plattformunabhngigkeit ist angesagt: Whrend ein herkmmlicher Designer vorher wei,
ob sein Entwurf auf einem Bierdeckel oder auf einer Plakatwand landet, kann der Web-Designer nicht wissen, auf welchen Anzeigegerten seine Web-Seiten letztendlich ihre Wirkung
entfalten sollen. In den meisten Fllen sind unproblematische Designs besser, die mit klaren,
einfachen Formen aufwarten, gute farbliche Kontraste besitzen und keine ppigen Breiten
und Hhen erzwingen. Auch an so genannte Benutzerrandgruppen wie Sehbehinderte sollte
gedacht werden, in welcher Form auch immer.

1150

Kapitel 25: Web-Projektverwaltung

Das Web gehrt zum Internet: Eine Web-Seite hat nicht nur mglichst gut auszusehen, sie
sollte auch mglichst wenig Bytes haben. Dass die Bandbreiten fr die Datenbertragung
beim Durchschnittsanwender allmhlich besser werden, bedeutet nicht, hier und jetzt zu
Klotzen, ohne Rcksicht auf den Netzverkehr zu nehmen. Auch andere Dinge sind zu bercksichtigen. Gute, aussagekrftige Stichworte und Kurzbeschreibungen in den Meta-Angaben sind ebenso wichtig fr den Erfolg einer Web-Seite wie ihre optische Wirkung. Denn eine
Web-Seite wird nicht nur von Menschen besucht, sondern auch von Programmen, die sie fr
Suchmaschinen im Internet indizieren.

25.2

Web-Projekte publizieren

25.2.1 Allgemeines zum Publizieren von Web-Projekten

Um eigene Projekte im WWW zu publizieren, brauchen Sie:
Einen Internet-Zugang: Wenn Sie noch keinen Internet-Zugang haben, mssen Sie sich einen
Anbieter (Provider) suchen, der Ihnen einen Zugang vermittelt. Bei der Auswahl eines geeigneten Zugangs-Providers spielen verschiedene Faktoren eine Rolle, zum Beispiel die Tarife
der Provider, Sonderkonditionen, Volumen- oder Zeitbeschrnkungen usw. Nachdem Sie
sich bei einem Provider angemeldet haben (bei Call-by-Call-Providern ist mittlerweile auch
keine Anmeldung mehr erforderlich), erhalten Sie eine User-ID und ein Passwort. Mit diesen
Daten knnen Sie dann die Internet-Verbindung aufbauen, sei es ber Telefonleitung, TVKabel, Stromnetz, Satellit, Handy oder eine andere Trgertechnik. Voraussetzung ist allerdings, dass Ihr Rechner internetfhig ist. Dazu gehrt eine so genannte Internet-Socket-Software (unter Windows z.B. die Datei winsock.dll) sowie geeignete Internet-Client-Programme
(etwa ein Web-Browser und ein E-Mail-Programm).
Festspeicherplatz auf einem Server-Rechner:. Das sollte ein Rechner sein, der eine permanente und sehr schnelle Internet-Anbindung hat, mindestens die Internet-Protokolle HTTP
und FTP untersttzt und von seiner Hard- und Software-Grundausstattung so ausgelegt ist,
dass er viele Besucher gleichzeitig verkraftet. In der Regel werden Sie den entsprechenden
Speicherplatz im Web bei einem Hosting-Provider anmieten, der ber entsprechende Technik verfgt. Es gibt eine Flle von Anbietern, die Speicherplatz im Web vermieten. Die Leistungen und Preise sind sehr unterschiedlich. Sie mssen herausfinden, welche Leistungen Sie
brauchen und wo Sie diese Leistungen am gnstigsten bekommen. In vielen Fllen knnen
Sie bei dem Provider, bei dem Sie Ihren Internet-Zugang haben, auch Speicherplatz fr eigene
Web-Projekte mieten.
Eine Web-Adresse: Dabei gibt es unterschiedliche Typen. Bei Online-Diensten oder BilligAngeboten erhalten Sie beispielsweise hufig Adressen vom Typ http://www.IhrProvider.
com/IhrVerzeichnis/. Den Verzeichnisnamen drfen Sie sich bei der Anmeldung normalerweise selbst aussuchen. Wenn Sie eine eigene Domain-Adresse wollen, also beispielsweise eine
Web-Adresse vom Typ http://www.IhrName.com/, muss diese bei einer Vergabebehrde im
Internet beantragt werden. Provider, ber die Sie Speicherplatz mieten knnen, bernehmen
die entsprechende Anmeldung fr Sie.

25.2 Web-Projekte publizieren

1151

Einen Zugang zu dem gemieteten Speicherplatz: Dazu erhalten Sie von dem Provider, bei
dem Sie den Speicherplatz mieten, eine Kennung. Die besteht normalerweise aus einer UserID und einem Passwort. In den meisten Fllen knnen Sie Ihr Passwort jederzeit selbst ndern.
Software zum Hochladen und Verwalten der eigenen Daten auf dem Server-Rechner: Der
klassische Internet-Dienst zum bertragen von Dateien und zum Ausfhren einfacher Dateioperationen auf dem Server-Rechner (Lschen, Kopieren, Verschieben, Zugriffsschutz festlegen usw.) ist das File Transfer Protocol (FTP). Dazu gibt es FTP-Programme, die Sie auf
Ihrem Rechner installieren mssen. Bei manchen Anbietern knnen oder mssen Sie spezielle
Software verwenden, die Ihnen der Provider zur Verfgung stellt.
Speicherplatz im Web, der so genannte Webspace, will mit Bedacht ausgewhlt sein. Welches
Angebot Sie whlen sollten, hngt einerseits von der Art und den technischen Ansprchen des
Projekts ab, andererseits von den Kosten, die Sie bereit zu tragen sind. Generell gilt: Sparen Sie
nicht am falschen Ende! Viele Leute meinen, sie knnten kostenlos Speicherplatz bekommen
und dabei all die tollen Sachen haben, die sie woanders sehen. Dem ist aber nicht so. Fr den
Preis, den das Monats-Abo einer Tageszeitschrift kostet, bekommen Sie bereits ordentliche Angebote, die fr die Mehrzahl der Web-Projekte ausreicht. Doch leider gibt es auf dem ProviderMarkt immer noch manche Stmper, die zwar erfolgreich mit Versprechungen locken, aber
technisch vllig inkompetent sind. Vor allem am Support hapert es bei vielen Providern. Suchen
und vergleichen Sie also lieber ein wenig lnger, fragen Sie nach Erfahrungen anderer ProjektBetreiber und entscheiden Sie sich nicht unbedingt fr das erstbeste Angebot, das mit den aufflligsten Schriftgren und den kernigsten Sprchen wirbt.
Im Linkverzeichnis des Online-Angebots von SELFHTML bei selfaktuell.teamone.de aktuell
finden Sie Verweise zu Web-Seiten, auf denen Provider-Angebote aller hier vorgestellten Typen
aufgelistet und verglichen werden.

25.2.2 Homepages bei Online-Diensten

Diese Lsung knnen Sie anvisieren, wenn Sie bereits einen Internet-Zugang ber einen OnlineDienst (T-Online, CompuServe, AOL usw.) haben und einfach nur eine private oder interessensorientierte Homepage im Internet publizieren wollen. Der Vorteil ist dabei, dass Sie keine
Zusatzkosten haben, weil das Angebot in den Kosten fr den Internet-Zugang bereits enthalten
ist.
Bei den genannten Online-Diensten erhalten Sie in der Regel mehrere Megabyte Speicherplatz
auf einem Server-Rechner des Online-Dienstes. Dorthin knnen Sie HTML-Dateien, Grafiken
und meistens auch Multimedia-Dateien hochladen, die dann als Web-Seiten ffentlich zugnglich sind. Es gibt jedoch auch Beschrnkungen. So bieten die Online-Dienste in der Regel nicht
die Mglichkeit einer eigenen CGI-Schnittstelle an, wo Sie eigene Scripts ablegen knnen. Wenn
Sie solche Dinge wie Zugriffszhler, Gstebcher oder Nachrichtenforen nutzen wollen, sind Sie
auf ffentliche CGI-Services angewiesen. Auch weiterfhrende Zusatzleistungen wie Statistik, die
Mglichkeit geschtzter Verzeichnisse usw., sind in diesen Angeboten normalerweise nicht enthalten.
Wenn Sie bereits einen Zugang zu einem Online-Dienst haben und erwgen, ber diesen
Anbieter Ihre Homepage zu publizieren, erkundigen Sie sich bitte innerhalb des Online-Dienstes

1152

Kapitel 25: Web-Projektverwaltung

danach, was Sie brauchen und wie alles im Einzelnen funktioniert. Bei CompuServe, AOL oder
T-Online gibt es entsprechende Foren, in denen Sie diese Fragen stellen knnen.

25.2.3 Kostenlose Homepages

Diese Lsung ist sinnvoll, wenn Sie bereits einen Internet-Zugang haben, Ihr Zugangs-Provider
aber keine Mglichkeit anbietet, Ihre eigene Homepage ins Web zu stellen. Ernsthaft in Erwgung ziehen sollten Sie diese Mglichkeit jedoch nur fr private Homepages ohne Anspruch
sowie fr reine Spaprojekte. Denn bei fast allen Anbietern von kostenlosem Webspace wird
beim Aufruf der Web-Seiten automatisch Werbung eingeblendet. Die meisten Besucher der Seiten empfinden diese Werbung als lstig und halten sich kaum freiwillig lnger auf solchen Seiten
auf. Dagegen knnen Sie auch nichts weiter unternehmen, da die Web-Seiten, bevor sie zum
Anwender in den Browser gelangen, durch ein Script auf dem Server-Rechner gelotst werden,
das die automatisch aufpoppende oder in ein Frameset integrierte Werbung einbaut.
Bei den kostenlosen Anbietern erhalten Sie in der Regel mehrere Megabyte Speicherplatz, was fr
die meisten Privatprojekte durchaus ausreicht. Die Beschrnkungen sind hnlich wie bei den
Online-Diensten. Eine bersicht solcher Anbieter finden Sie beispielsweise bei www.kostenlos.de.

25.2.4 Eigene Domain-Adresse

Wenn Sie eine eigene Domain-Adresse fr Ihr Projekt haben mchten, mssen Sie sich einen
geeigneten Namen ausdenken. Bei den Domain-Namen der Top-Level-Typen .de (deutsche
Adressen), .at (sterreichische Adressen), .ch (schweizer Adressen), .com (kommerzielle Adressen), .net (internetbezogene Adressen) oder .org (Organisationen) brauchen Sie mittlerweile viel Phantasie, denn fast alle einfachen Namen und Wrter sind lngst vergeben. Beliebt
sind daher zusammengesetzte Namen mit Bindestrichen geworden, wie beispielsweise heutegeh-ich-ins-kino.de. Oder Sie weichen auf die neuen Top-Level-Typen wie .info oder
.name aus. Fragen Sie dazu gegebenenfalls den Provider Ihrer Wahl.
Der Provider bernimmt in den meisten Fllen die Anmeldung Ihres Domain-Namens. Hufig
bieten Provider auch die Mglichkeit an, Sub-Domains einzurichten. Wenn Sie beispielsweise
eine Domain namens moecht-ich-gern.de haben, dann knnen Sie Subdomains wie
das.moecht-ich-gern.de oder liebe.moecht-ich-gern.de einrichten lassen. Die entsprechenden Web-Seiten wren dann beispielsweise aufrufbar unter http://das.moecht-ich-gern.de/.
Gerade bei Subdomain-Namen kann man mit etwas Phantasie mehrere attraktive, kurze und gut
zu merkende Namensadressen haben. Subdomains sind fr Provider technisch problemlos einrichtbar und erfordern keine weiteren Anmeldungen. Fragen Sie den Provider Ihrer Wahl nach
Sub-Domains!

25.2.5 Virtual Hosting mit eigener Domain

Beim Virtual Hosting mieten Sie eine bestimmte Menge Speicherplatz. Den Rechner, der normalerweise beim Provider steht und auf den Sie dann Ihre Web-Seiten hochladen knnen, teilen
Sie sich dabei normalerweise mit anderen Kunden des Providers, die ebenfalls ein solches Angebot gewhlt haben. Virtual heit diese Form deshalb, weil es bei solchen Web-Angeboten kein

25.2 Web-Projekte publizieren

1153

1:1-Verhltnis zwischen der IP-Adresse des Rechners und dem Domain-Namen gibt, eben weil
meistens mehrere Web-Angebote, alle mit eigenen Domain-Namen, auf dem gleichen Rechner
liegen.
Virtual Hosting ist fr einfache bis umfangreichere, werbefreie Homepages mit eigener DomainAdresse, also elektronische Visitenkarten und Firmenportraits, aber auch serise Fachpublikationen oder Feature-Seiten zu einem bestimmten Thema meistens ausreichend und gut geeignet.
Bei Angeboten dieser Art erhalten Sie neben dem Speicherplatz in der Regel auch ein eigenes
CGI-Verzeichnis, um serverseitig dynamische Web-Seiten zu erzeugen, sowie Zusatzleistungen
wie Statistiken ber Besucher Ihrer Seiten, oder einen Service-Bereich, in dem Sie meist webbasiert und ohne zustzliche Kenntnisse Ihre persnlichen Kenndaten ndern knnen, Verzeichnisse schtzen knnen, Online-Hilfen erhalten usw. Auerdem beinhalten diese Angebote
in der Regel auch den Anspruch auf Support, wenn es mal technische Probleme gibt (Ihre
HTML- und JavaScript-Probleme lst ein solcher Support allerdings nicht). Zusatzleistungen
dieser Art haben Sie bei Online-Diensten und kostenlosen Webspace-Angeboten normalerweise
nicht.

25.2.6 Server-Hosting mit eigener Domain

Beim Server-Hosting stellt Ihnen der Provider einen kompletten Rechner zur Verfgung, auf
dem kein anderes Web-Angebot abgelegt ist. Beim Server-Hosting erhalten Sie in der Regel auch
den vollen Betriebssystemzugang zum Server-Rechner, knnen selbst Benutzer einrichten, neue
Software installieren usw. ber Internet-Dienste wie Telnet oder SSH knnen Sie sich dann auf
dem Rechner einloggen und dort arbeiten. Dazu bentigen Sie entsprechende Telnet- oder SSHProgramme. Um sinnvoll auf einem Server-Rechner arbeiten zu knnen, sind gute Kenntnisse
des dort eingesetzten Betriebssystems erforderlich. Wenn der Server-Rechner beispielsweise ein
Linux-Betriebssystem hat, mssen Sie sich mit Linux gut auskennen, um die Mglichkeiten zu
nutzen, die Ihnen ein eigener Server-Rechner bietet.
Server-Hosting ist fr Web-Angebote erforderlich, die sehr umfangreich sind und/oder sehr
hohe Besucherfrequenzen haben und/oder technisch nicht triviale Mittel einsetzten, fr die beispielsweise spezielle Software auf dem Server erforderlich ist. Das knnen spezielle Server-Typen
sein, etwa fr Chats oder Multimedia, oder auch spezielle Datenbanksoftware.
Da bei solchen Web-Projekten meistens mehrere Personen Zugang und Kompetenzen haben,
muss vieles organisiert werden. So sollte es einen Webmaster geben, also einen Betreuer, der
den Server-Rechner, seine Software, seine gespeicherten Inhalte, Konfigurationen usw. kennt
und beurteilen kann, ob und welche Hard-/Softwareerweiterungen angesichts der Server-Belastung ntig sind. Konfigurationsdaten und Konzepte zur Datenstruktur usw. sollten ausreichend
dokumentiert werden.
Beim Server-Hosting sollten Sie noch strker als beim Virtual Hosting auf ordentlichen Support
achten. Es gibt Provider, die zwar fr einen guten Preis eigene Server-Rechner anbieten, aber
nicht zur Stelle sind, wenn es brennt.

1154

Kapitel 25: Web-Projektverwaltung

25.2.7 Server-Housing mit eigener Domain

Beim Server-Housing stellen Sie selbst den Server-Rechner zur Verfgung, und der Provider
stellt ihn lediglich bei sich unter. Der Grund ist, dass Sie selber normalerweise nicht ber so
leistungsstarke und teuere Internet-Anbindungen verfgen wie der Provider.
Der Vorteil beim Server-Housing ist gegenber dem Server-Hosting, dass Sie die Hardware des
Rechners vllig nach Ihren Wnschen zusammenstellen knnen. Ein Nachteil ist, dass der Provider normalerweise keinen Support fr Probleme bernimmt, die nichts mit der InternetAnbindung zu tun haben. Beim Server-Hosting, wo der Provider die Hardware stellt, ist dies
noch eher der Fall. Ansonsten gelten fr das Server-Housing die gleichen Bemerkungen wie fr
das Server-Hosting.

25.2.8 Publizieren mit FTP

Wenn Sie nicht gerade selbst an der Bedienkonsole eines Server-Rechners sitzen, mssen Sie die
Datenverwaltung (Dateien hoch laden, lschen usw.) auf dem Server von einem beliebigen
Rechner mit einfachem Internet-Zugang aus erledigen. Das heute bliche Internet-Protokoll
dazu ist FTP (File Transfer Protocol). Zur reinen Datenverwaltung (ohne Datei-Upload und
-Download) sind die Internet-Dienste Telnet oder SSH noch besser geeignet, da sie praktisch
eine Konsolensimulation leisten, also das Arbeiten auf dem fernen Server-Rechner erlauben,
so als se man vor dessen Bildschirm.
Von Ihrem Provider erhalten Sie alle erforderlichen Daten, die Sie brauchen, um Ihre Daten auf
dem Server verwalten zu knnen. Was Sie zum Hochladen noch brauchen, ist ein leistungsfhiges FTP-Programm. Im Link-Verzeichnis des Online-Angebots von SELFHTML bei selfaktuell.
teamone.de aktuell finden Sie Verweise FTP-Programmen.
Die meisten modernen FTP-Programme haben grafische Oberflchen, die bekannten Dateimanagern oder Datei-Commandern hneln. Sie bentigen dabei keine tiefer reichenden Kenntnisse.
Zum Zugriff auf den Server-Rechner brauchen Sie die FTP-Adresse Ihres Speicherbereichs, eine
User-ID und ein Passwort. Diese Daten teilt Ihnen der Provider mit. Die Daten knnen Sie bei
den meisten modernen FTP-Programmen in einer integrierten FTP-Site-Verwaltung fest speichern.
Einige Tipps noch:
Wenn Ihr Projekt aus Unterverzeichnissen besteht, benennen Sie die Verzeichnisse auf dem
lokalen Rechner, wo Sie das Projekt erstellen, genau so wie auf dem Server-Rechner. So knnen Sie besser kontrollieren, was wo steht. Auerdem sollten die Verweise und Referenzen
innerhalb des Projekts lokal genau so funktionieren wie auf dem Server. Achten Sie auf Ground Kleinschreibung bei Datei- und Verzeichnisnamen. Die meisten Server-Rechner laufen
unter Betriebssystemen, die Gro-/Kleinschreibung (im Gegensatz zu Windows) unterscheiden. Am einfachsten vermeiden Sie Probleme, indem Sie alle Datei- und Verzeichnisnamen
durchweg klein schreiben.
Wenn Sie einzelne Dateien lokal auf Ihrem Rechner aktualisiert oder hinzugefgt haben, lassen Sie sich die Dateiliste vor dem Hochladen der Dateien auf den Server-Rechner nach
Datum sortiert anzeigen. So sehen Sie besser, welche Dateien neu oder erneuert sind, und
vergessen nichts beim Hochladen.

25.3 Web-Projekte bekannt machen

1155

Kontrollieren Sie nach jedem Hochladen von Dateien das Vorgangsprotokoll, das Ihr FTPProgramm aufzeichnet. Wenn dort bei der bertragung von Dateien irgendwelche Fehler
aufgezeichnet sind, laden Sie diese Dateien noch einmal hoch.
Lassen Sie sich nach jedem Hochladevorgang den aktualisierten Inhalt auf dem Server-Rechner anzeigen und berprfen Sie, ob die neuen Dateien angezeigt werden. Beachten Sie, dass
die Anzeige von Datum und Uhrzeit auf dem Server-Rechner nicht unbedingt Ihrer lokalen
Zeit entsprechen muss. Viele Server-Rechner stehen in den USA und benutzen als Systemzeit
die dort aktuelle Lokalzeit. Auch bei Dateigren knnen Unterschiede zwischen lokaler
Version und Server-Version einer Datei angezeigt werden. Das muss nicht bedeuten, dass die
Datei bei der bertragung beschdigt wurde.
Rufen Sie die neuen Dateien anschlieend mit einem Web-Browser auf, um zu kontrollieren, ob
alles so funktioniert, wie es soll.

25.3

Web-Projekte bekannt machen

25.3.1 Allgemeines
Nachdem Sie ein neues Projekt im Web publiziert haben, wei niemand auer Ihnen und Personen, denen Sie die Adresse persnlich mitteilen, etwas von der Existenz des Projekts. Damit Ihr
Projekt tatschlich auffindbar, und besser noch, bekannt wird, mssen Sie es bekannt machen.
Dazu gibt es verschiedene Mglichkeiten, die in diesem Abschnitt beschrieben werden. Bitte beherzigen Sie folgende allgemeine Regeln:
Seien Sie nicht marktschreierisch. Das mag niemand und erreicht eher das Gegenteil von
dem, was Sie sich wnschen.
Trachten Sie nicht so sehr danach, dass mglichst viele Leute Ihre Seiten besuchen, sondern
eher danach, dass die Besucher begeistert sind, sich freiwillig lngere Zeit in Ihrem Projekt
aufhalten und gerne wiederkommen. Bekanntheit und ein guter Name sind nmlich zweierlei,
und es ist besser fr das Internet, wenn es Ihnen vor allem auf den guten Namen ankommt.
Bleiben Sie auf dem Boden, wenn Ihr Projekt tatschlich bekannter wird. Das Web ist nicht
Hollywood. berheblichkeit und Star-Gehabe werden mit Nichtachtung und Abwendung
gestraft.

25.3.2 Projekte bei Suchdiensten und Verzeichnissen anmelden

Alle groen Suchmaschinen im Web bieten die Mglichkeit an, neue Seiten anzumelden. Dann
bekommen Ihre Seiten nach einer Weile (es kann bei manchen Suchmaschinen wegen notorischer berlastung leider sehr lange dauern) Besuch von einem Softwareprogramm, einem so
genannten Robot. Dieser benimmt sich wie ein eifriger Web-User und folgt allen Links, die er
auf der angemeldeten Adresse findet. Alles, was er abgrast, merkt er sich und speichert die Texte
der Seiten in der groen Datenbank der Suchmaschine. Von da an sind Ihre Seiten in der Suchmaschine auffindbar. Der Robot kommt dann von Zeit zu Zeit wieder und erfasst neue und
genderte Daten auf Ihren Seiten.

1156

Kapitel 25: Web-Projektverwaltung

25.1: Google ist eine der am hufigsten genutzten Suchmaschinen.

Daneben gibt es auch Web-Verzeichnisse, die redaktionell basiert sind. Melden Sie Ihre Seiten
bei einem solchen Verzeichnis an, dann werden die Seiten nach einer Weile von einem Redakteur besucht, der darber entscheidet, ob die Seiten in das Verzeichnis aufgenommen werden.
Bei folgenden Suchmaschinen und Web-Verzeichnissen sollten Sie deutschsprachige Angebote
auf jeden Fall anmelden:
www.google.de/
www.fireball.de/
www.altavista.de/
www.yahoo.de/
web.de/
www.dino-online.de/

25.3 Web-Projekte bekannt machen

1157

25.2: Web-Verzeichnisse wie Dino-Online sortieren Seiten nach Kategorien.

Wenn Sie in einer Suchmaschine angemeldet sind, bedeutet das allerdings noch nicht, dass nun
sofort die Besuchermassen auf Ihre Seiten strmen. Denn erst einmal mssen die Anwender des
Suchdienstes ja nach Begriffen suchen, bei denen Ihre Seiten zu den Suchtreffern gehren, und
dann mssen sie unter den angebotenen Suchtreffern Ihre Seiten als besonders aussichtsreich
einschtzen. Deshalb sind ja auch ordentliche Meta-Angaben in HTML so wichtig.
Je nach Projekt ist es auch sinnvoll, das Projekt bei kleineren, spezielleren Suchmaschinen und/
oder Verzeichnissen anzumelden. So sind beispielsweise fast alle bekannten Branchenverzeichnisse auch im Web vertreten. Wenn Sie einen Firmenauftritt im Web bekannt machen wollen, ist

1158

Kapitel 25: Web-Projektverwaltung

eine Anmeldung dort durchaus sinnvoll, wenngleich Sie auch dabei nicht zu viel erwarten
sollten, zumal die Anmeldung im Gegensatz zu der Anmeldung bei Suchmaschinen Geld kostet.
Bei Fach-Projekten lohnt auf jeden Fall die Anmeldung bei Katalogen und fachbezogenen
Suchdiensten. Dazu mssen Sie allerdings erst mal wissen, welche Spezialsuchdienste und -Verzeichnisse es berhaupt gibt. Fr diesen Zweck gibt es eine Suchmaschine fr Suchmaschinen,
www.suchlexikon.de/
Es kann auch sinnvoll sein, Betreiber bekannter anderer Web-Angebote anzuschreiben und hflich anzufragen, ob es dort mglich ist, einen Link auf das eigene Angebot zu setzen. Treten Sie
aber nicht so auf, als ob darauf irgendein Anspruch bestnde. Es bleibt dem Ermessen des
Anbieters berlassen, ob er einen Link auf Ihre Seiten setzt oder nicht.

25.3.3 Strategien bei der Online-Kommunikation

Vermutlich werden Sie das Internet ja auch fr E-Mail-Korrespondenz nutzen. Legen Sie sich in
Ihrem Mail-Programm eine Signatur an, die automatisch am Ende aller Mails eingefgt wird, die
Sie schreiben. Die Signatur sollte auch Ihre Web-Adresse enthalten, ansonsten aber unaufdringlich wirken. Ein Beispiel:
------------------------------------------Rudolf Rabenstein, Hamburg, Tel. 0173-308934023
http://www.rudolf-rabenstein-online.de/
-------------------------------------------

Wenn Sie Seiten zu bestimmten Fachgebieten oder Themen haben, empfiehlt es sich auch, an
Internet-Diskussionen zu den entsprechenden Themen teilzunehmen. So gibt es fr fast alle Gebiete Newsgroups, Mailing-Listen oder webbasierte Foren. Gute bersichts- und Einstiegsadressen dafr sind:
www.mailinglisten.de/
www.usenet.de/
www.wer-weiss-was.de/
berzeugen Sie in Diskussionen durch fachliche und kommunikative Kompetenz. Benutzen Sie
auch in solchen Diskussionsbeitrgen eine Signatur, hnlich wie in privaten E-Mails. Aber achten
Sie dabei erst recht darauf, eine unauffllige Signatur zu verwenden. Alles andere wird als lstige
Werbung empfunden. Durch berzeugendes Auftreten in Fachkreisen spricht sich dann auch
Ihre Web-Adresse herum.

25.3.4 Sonstige Bekanntmachungsstrategien

Bei neuen, professionellen Projekten sind auch Pressemitteilungen angebracht. Wenn es sich um
computerorientierte Projekte handelt, sind PC-Fachzeitschriften zum Beispiel eine gute Adresse.
Wenn es sich um ein Hobby anderer Art handelt (Radfahren, Angeln, Tauchen, Reisen usw.),
knnen Sie eine Pressemitteilung an entsprechende Fachmagazine verfassen. Bei elektronischen
Magazinen knnen Mitteilungen an Life-Style-Magazine erfolgen. Die Pressemitteilung kann per
Post, per Fax oder per E-Mail erfolgen. Bei den meisten Medien (Print wie Hrfunk) sind die

25.4 Web-Projekte kontrollieren

1159

Internet-Redaktionen Anhngsel zu den althergebrachten Redaktionen. Es lohnt sich deshalb

eher, sich an die traditionellen Redaktionen zu wenden. Bei online-spezifischen Angeboten kann
das anders sein. Adressen erfahren Sie aus dem Impressum des jeweiligen Publikationsorgans.
Bitte schreiben Sie aber nicht wegen Ihrer neuen Goldhamster-Homepage an die Frankfurter
Allgemeine.
Wenn Sie als Unternehmen ohnehin Anzeigen in Zeitungen, Zeitschriften, Fachpublikationen
oder audiovisuellen Massenmedien schalten, platzieren Sie dort auch die Homepage-Adresse.
Oft gengt es, die Web-Adresse ohne jeden Kommentar an einer geeigneten Stelle zu platzieren.
Wer wei, was eine solche Adresse ist, wei sofort, was gemeint ist, und den anderen knnen Sie
es an der Stelle ohnehin nicht erklren.
Wenn Sie viel Kundenverkehr haben, legen Sie Handzettel mit einer Kurzvorstellung Ihrer
Homepage aus. Achten Sie auch darauf, die Adresse auf Ihrer Visitenkarte, auf Ihren Briefbgen,
Ihren Faxvordrucken usw. mit abzudrucken.
Machen Sie sich im Web schlau, welche weiteren Mglichkeiten es gibt. So gibt es beispielsweise
so genannte Web-Ringe zu allen nur erdenklichen Themen. Bei einem Web-Ring verlinken sich
mehrere Web-Projekte zum gleichen Thema ringartig, sodass ein Besucher ber eines der Projekte auch zu den anderen gelangt.
Kaum noch zu empfehlen ist das Schalten eigener Werbe-Banner auf fremden Web-Seiten. Die
Klickraten bei Werbe-Bannern sind mittlerweile so niedrig, dass aus Anwendersicht die Hoffnung besteht, irgendwann von diesen scheulichen und jedes Web-Design zerstrenden Dingern
befreit zu sein. Die Kosten fr das Schalten solcher Banner stehen normalerweise in keinem Verhltnis zu dem tatschlichen Nutzen.

25.4

Web-Projekte kontrollieren

25.4.1 Allgemeines
Wenn Sie ein Projekt im Web publiziert haben, werden Sie sicher auch interessiert sein zu erfahren, wie hufig darauf zugegriffen wird. Um richtig einschtzen zu knnen, wie gut Ihr Projekt
ankommt und was Sie daran verbessern sollten, reichen allerdings reine Zugriffszahlen nicht aus.
Um aussagekrftige Ergebnisse ber die Abrufe Ihrer Web-Seiten zu erhalten, sind Statistiken
ntig, die Ihnen die Zugriffe nach bestimmten Kriterien aufschlsseln. So gibt es Statistiken, die
auflisten, welche Dateien am hufigsten abgerufen wurden, zu welchen Tageszeiten die meisten
Besucher zu verzeichnen sind oder welche Web-Browser am hufigsten verwendet werden.
Bei besseren Providern gehrt es zum Service, dass Sie Zugriff auf Log-Dateien haben, die Ihren
Speicherbereich betreffen. Die meisten Provider bieten auch Statistiken an, mit deren Hilfe Sie
die Besucherzahlen nach verschiedenen Kriterien aufbereitet bekommen.
Wenn Sie Ihre Homepage bei Discount-Providern wie Compuserve, T-Online usw. oder bei
Anbietern von kostenlosem Webspace haben, stehen Ihnen solche Dienste meist nicht zur Verfgung. Um in solchen Fllen an genaue Zugriffsstatistiken zu kommen, knnen Sie einen
ffentlichen CGI-Service in Anspruch nehmen. Dort bekommen Sie fr eine geringe Jahresgebhr einen Zugriffszhler sowie ordentlich aufbereitete Statistiken fr Ihre Homepage, egal wie

1160

Kapitel 25: Web-Projektverwaltung

deren Adresse lautet. Ein Nachteil bei dieser Lsung ist allerdings, dass bei jedem Zugriff auf Ihre
Homepage zustzlich auf den fremden Server des Zhler-Anbieters zugegriffen werden muss.

25.4.2 Log-Dateien des Web-Servers

Grundlage aller Zugriffsstatistiken sind Log-Dateien des Web-Servers. Jeder Web-Server fhrt
solche Log-Dateien, in denen er alle Zugriffe protokolliert. Dazu gibt es ein allgemeines Modell,
wie Eintrge in einer Log-Datei auszusehen haben. Ein Eintrag nach diesem Modell hat folgendes
Aussehen:
ad25-175.compuserve.com - - [02/Oct/2001:23:03:49 -0500] "GET /selfhtml/index.htm
HTTP/1.1" 200 1788

Jede Zeile in der Log-Datei dokumentiert einen Zugriff auf eine Datei. Das Beispiel zeigt eine
solche Zeile. Log-Dateien viel besuchter Projekte enthalten Zigtausende solcher Zeilen und knnen sehr schnell sehr gro werden. Meistens sorgen regelmig automatisch startende ServerProzesse, so genannte Cron-Jobs, dafr, dass die Log-Dateien regelmig archiviert und wieder
geleert werden. Die Log-Dateien haben meistens Namen wie access.log. Wo diese Dateien abgelegt sind, hngt von der Server-Konfiguration ab. Fragen Sie Ihren Provider danach, sofern er
Ihnen von sich aus keine Angaben dazu macht!
Am Beginn jeder Zeile steht, wer zugegriffen hat. Bei den meisten Zugangs-Providern erhalten
die Anwender beim Einwhlen ins Internet eine dynamische IP- und Namensadresse, unter der
sie dann in den Log-Dateien der Web-Server auftauchen, die sie besucht haben. Im obigen Beispieleintrag ist erkennbar, dass sich der Anwender ber CompuServe ins Internet eingewhlt hat.
Die Angabe ad25-175 ist eine dynamisch vergebene Adresse.
Anstelle der beiden Bindestriche im obigen Beispiel knnen von Fall zu Fall noch Daten stehen.
Anstelle des ersten Bindestriches kann der Anwender-Logname stehen (entsprechend der Spezifikation RFC931). Anstelle des zweiten Bindestriches kann ein Anwendername stehen, den der
Anwender sich selbst gegeben hat.
Als Nchstes zeigt der Eintrag, wann genau der Zugriff erfolgte. Im Beispiel ist das der 2. Oktober
2001 um 23.03 Uhr (und 49 Sekunden), und zwar minus 5 Stunden gerechnet gegenber GMT
(Greenwich Meridian Time) aus Sicht der Systemzeit des Server-Rechners.
Dahinter folgt ein Kurzprotokoll des HTTP-Headers, mit dem der WWW-Browser des Anwenders die Datei angefordert hat. GET ist dabei die bliche Methode. Dahinter wird die Datei angegeben, auf die der Zugriff erfolgte. Im Beispiel ist das die Datei /selfhtml/index.htm. Es wird
der Pfadname relativ zur Domain-Adresse angezeigt. Schlielich zeigt die HTTP-Anforderung
noch die verwendete HTTP-Protokollversion an. Das war zur Auswertungszeit die Version 1.1.
Dahinter folgt eine Codenummer, die darber Aufschluss gibt, ob die Anforderung erfolgreich
war, und wenn nicht, welches der Fehler war. Dabei sind folgende Nummern wichtig:
200 = Die Anforderung war erfolgreich.
4xx, 5xx = Es traten Fehler auf. Zum Beispiel war die angeforderte Datei nicht vorhanden.
Lesen Sie dazu auch die bersicht der HTTP-Statusmeldungen in Anhang A.1.
Die letzte Zahl in der Zeile schlielich gibt an, wie viele Bytes von der Datei an den aufrufenden
WWW-Browser bertragen wurden. Wenn Sie die Bytezahl mit der tatschlichen Dateigre

25.4 Web-Projekte kontrollieren

1161

vergleichen, knnen Sie feststellen, ob die Datei vollstndig bertragen, oder ob die bertragung
vorzeitig abgebrochen wurde. So kommt es zum Beispiel oft vor, dass Grafiken nicht vollstndig
bertragen werden, weil der Anwender bereits vorher auf einen Verweis zu einer anderen Seite
klickt.
Neben den reinen Zugriffs-Log-Dateien fhren Web-Server auch Log-Dateien ber aufgetretene
Fehler. Solche Log-Dateien haben Namen wie error.log. Die Dateien sind hnlich aufgebaut wie
Zugriffs-Log-Dateien. Das folgende Beispiel zeigt eine typische Zeile aus der Error-Log-Datei des
Web-Servers Apache:
[Tue Oct 02 23:04:34 2001] [error] [client ad25-175.compuserve.com] File does not
exist: /selfhtml/tc.htm

Zu Begin steht ein Zeitstempel im UTC-Format. Im Beispiel ist Dienstag (Tue = Tuesday =
Dienstag), der 2. Oktober 2001, 23.04 Uhr und 34 Sekunden gemeint. Dahinter wird das Vorkommnis genannt (error) und dahinter der verursachende Client (z.B. der Browser eines Seitenbesuchers). Die Fehlermeldung wird in englischem Klartext genannt. Im Beispiel hat der
Anwender versucht, auf eine Datei zuzugreifen, die nicht existiert. Schuld daran kann beispielsweise ein Link von einer fremden Seite sein, der zu dieser Adresse fhrt, die aber nicht oder nicht
mehr existiert.

25.4.3 Statistiken
Log-Dateien sind normalerweise sehr gro und etwa so spannend wie ein Telefonbuch. Um eine
aussagekrftige bersicht ber die Zugriffe auf Ihre Seiten zu erhalten, sollte Ihr Provider Statistiken anbieten. Dazu bietet Ihnen der Provider bei Virtual Hosting in der Regel einen ber WebBrowser aufrufbaren Service-Bereich an, zu dem Sie nur mittels eines Benutzernamens und
Passworts Zugang haben. Bei Server Hosting oder Server Housing kann es auch sein, dass Sie
sich selber um die Installation geeigneter Statistik-Software kmmern mssen.
Statistiken bestehen einerseits aus Software, die aus den Log-Dateien regelmig ihre eigene
Datenbank pflegt, und einem oder mehreren CGI-Scripts, die Sie aufrufen knnen, um die Statistik im Browser in HTML-Form aufbereitet ansehen zu knnen. Es gibt rein textorientierte
Statistiken, die Daten in Listen oder Tabellen prsentieren, aber auch grafische Statistiken, bei
denen die Daten in Form von Balken- und Tortendiagrammen prsentiert werden.
Statistiken stellen Ihnen die Zugriffe nach einem bestimmten Kriterium sortiert dar. Folgende
Kriterien sind typisch:
Auflistung nach Dateien (auf welche Dateien wurde am hufigsten zugegriffen?)
Auflistung nach Zeit (zu welcher Tageszeit, an welchen Wochentagen wurden die meisten
Zugriffe verzeichnet?)
Auflistung nach Herkunft (ber welche Domain-Adressen haben sich die meisten Anwender
ins Internet eingewhlt?)
Auflistung nach Erfolg (welche Dateien wurden vollstndig bertragen, bei welchen wurde bei
der bertragung vorzeitig abgebrochen?)
Auflistung nach Anwendersoftware (welche WWW-Browser in welchen Versionen wurden
am hufigsten verwendet?)

1162

Kapitel 25: Web-Projektverwaltung

Statistiken bleiben allerdings stets nur relativ genau. Absolute Genauigkeit ist deshalb nicht mglich, weil Statistiken letztlich nur auf den Log-Dateien des Web-Servers basieren, es aber viele
andere Faktoren gibt, die das Abrufen von Web-Seiten mit beeinflussen. So zum Beispiel der
Cache-Speicher eines jeden Web-Browsers. Je nachdem, was der Anwender dort eingestellt hat,
wird die Web-Seite, obwohl vom Anwender aufgerufen, gar nicht vom Web-Server geholt, sondern aus dem Browser-Cache, ohne dass der Browser wenigstens noch mal beim Server nachfragt, ob es von der Web-Seite mittlerweile eine neuere Version gibt als die in seinem Cache. Der
Web-Server bekommt folglich gar nichts davon mit. Ebenso ist es mit den zahlreichen ProxyServern im Netz. Viele Anwender haben im Browser freiwillig oder auf Anforderung ihres Providers hin Proxy-Server eingestellt. Proxy-Server sind fr den Internet-Zugang des Anwenders
besonders leicht und ohne viele Umwege erreichbar, und das bertragen der Daten von dort aus
zum Browser geht merklich schneller, als wenn die Daten vom Original-Server bertragen
werden. Wenn Ihr Web-Projekt auf einem solchen Proxy-Server verfgbar ist (jawohl, ihr WebProjekt wird von solchen Proxy-Servern automatisch komplett geklaut und zur Verfgung
gestellt das ist ganz normal im Internet), ist der Effekt der gleiche wie beim Browser-Cache:
Der Web-Server Ihres Projekts bekommt gar nichts davon mit. Andererseits werden in der LogDatei des Web-Servers aber auch viele Eintrge erzeugt, die gar nicht von menschlichen
Besuchern stammen. Such-Robots von Suchmaschinen, die Ihre Seiten indizieren, oder Software-Agenten von Proxy-Servern, die Ihre Seiten an den Proxy-Server bertragen sie alle
erzeugen Traffic, also Verkehr auf Ihren Seiten, ohne dass ein Mensch daran beteiligt ist.

25.4.4 Statistiken auswerten

Die folgende Checkliste soll Ihnen helfen, Statistiken zu interpretieren und Schlsse daraus zu
ziehen:
Haben Sie so gut wie keine Zugriffe? Wenn Ihr Projekt erst seit wenigen Tagen im Netz steht,
ist das normal. Wenn es allerdings schon seit Monaten online ist, haben Sie zu wenig unternommen, um das Projekt bekannt zu machen. Die Zugriffszahlen hngen natrlich auch von
den angebotenen Themen ab. Ein Projekt ber die neuesten Computerspiele hat nun einmal
mehr Zugriffe als ein Projekt ber seltene Orchideensorten.
Haben Sie viele Zugriffe auf die Einstiegsdatei, jedoch so gut wie keine auf die Unterseiten?
Es ist ganz normal, dass die Einstiegsseite mit Abstand die meisten Zugriffe zu verzeichnen
hat. Wenn aber die Unterseiten so gut wie gar nicht besucht werden, deutet das darauf hin,
dass vielen Besuchern Ihre Einstiegsseite nicht gefllt, dass bei der Einstiegsseite zu viele Daten
(z.B. aufwendige Grafiken, Flash-Intros usw.) bertragen werden, oder dass die Einstiegsseite
so unbersichtlich ist, dass die Besucher die Verweise zu den Unterseiten nicht finden. In
diesem Fall sollten Sie Ihre Einstiegsseite neu, einfacher und bersichtlicher gestalten und
berprfen, ob das Verhltnis anschlieend gnstiger wird.
Werden groe Grafiken hufig genug vollstndig bertragen? Das gilt besonders fr Einstiegsseiten. Wenn eine solche Seite ihren Blickfang beispielsweise aus einer 50 Kilobyte groen Grafik bezieht und von dieser Grafik im Schnitt nur die Hlfte bertragen wird, bedeutet
das, dass kaum ein Besucher darauf wartet, bis die Seite ihre ganze Pracht entfaltet hat. In
diesem Fall sollten Sie die Seite dringend neu gestalten.
Wie lange halten sich Besucher auf Ihren Seiten auf? Das knnen Sie am besten direkt an den
Logdateien erkennen. Wenn Sie 50 Seiten haben und die Besucher im Schnitt unter einer

25.4 Web-Projekte kontrollieren

1163

Minute verweilen, ist das Projekt einfach nicht attraktiv genug. Ausgenommen davon sind
Projekte mit dem Charakter von Nachschlagewerken, in denen niemand stbert, sondern nur
eine gezielte Auskunft sucht. Sie knnen nicht erwarten, dass die Besucher stundenlang bleiben und alles von vorne bis hinten studieren. Aber mehrere Minuten im Schnitt deuten darauf hin, dass die Besucher sich auch mal verfhren lassen.
Wo kommen Ihre Besucher her? Achten Sie dabei darauf, von welchen fremden Adressen aus
auf Ihr Projekt zugegriffen wird. So knnen Sie beispielsweise erkennen, ob Sie hufig ber
Themensuchen in Suchdiensten gefunden werden oder ob eine anklickbare Anzeige, die Sie
bei einem Kataloganbieter gegen Gebhr geschaltet haben, sich rentiert. Auch auf die Lnderherkunft sollten Sie achten. Wenn Sie viele Besucher aus dem fremdsprachigen Ausland
haben, aber kein mehrsprachiges Angebot, dann ist zu berlegen, ob ein mehrsprachiges
Angebot die Attraktivitt des Projekts nicht vervielfachen knnte.

25.4.5 Begriffe wie Hits, Pageviews und Visits

Statistiken sind bekanntlich dehnbar. Es kommt immer darauf an, was eigentlich gezhlt wird.
Deshalb ist es wichtig, dass Konventionen darber bestehen, welche typischen Begriffe welche
Bedeutung haben. Denn wann ist ein Zugriff ein Zugriff? Sobald der Web-Server die GET-Anfrage des Clients erhalten hat? Oder nachdem die angeforderte Web-Seite vollstndig an den aufrufenden Client, also beispielsweise den Browser des Anwenders, bertragen hat? Mit oder ohne
referenzierte Dateien wie Grafiken, Sound usw.?
Jede Zeile im Access-Log des Web-Servers erzeugt einen so genannten Hit. Wenn eine Web-Seite
also beispielsweise aus einer HTML-Datei und 10 darin referenzierten Grafiken besteht, dann
erzeugt diese Web-Seite, wenn ein Anwender sie anfordert, 11 Hits. Dabei ist es egal, ob die
Dateien vollstndig bertragen wurden oder nicht. Sogar nicht gefundene Dateien (404-Errors)
werden als Hits gezhlt. Hits liefern also hohe, beeindruckende Zahlen, die sich aber schnell
relativieren, wenn man sich klar macht, dass viele typische Web-Seiten etliche kleine, referenzierte Grafiken enthalten. Auerdem geht aus den Hits nicht hervor, ob der Besucher die Seite je
zu Gesicht bekommen hat. Lassen Sie sich also nicht beeindrucken von Leuten, die mit ihren
Hits prahlen. Fr die Einschtzung des tatschlichen Erfolgs einer Web-Seite sind Hits nicht
geeignet. Interessant sind die Hits eigentlich nur im relativen Vergleich, z.B. um herauszufinden,
wie sich der Gesamtverkehr auf den Web-Seiten ber die Monate hinweg entwickelt.
Pageviews neuerdings auch Page-Impressions, bei eingedeutschten Statistiken auch HTMLSeiten oder Seiten-Anfragen genannt sind dagegen Sichtkontakte eines Anwenders mit
inhaltstragenden Dateien. Zugriffe von Anwendern, die in ihrem Browser die Anzeige von Grafiken abgeschaltet haben, sowie Zugriffe von Such-Robots und anderen Software-Agenten werden dabei, falls erkennbar, nicht mitgezhlt. Bei Verwendung von Frames wird beim Erstaufruf
nur die Datei als Pageview gezhlt, in der die Frameset-Definitionen stehen. Danach wird davon
ausgegangen, dass nur eines der Frame-Fenster den Inhalt beherbergt, whrend die brigen zur
Navigation oder fr Werbung und hnliches dienen. Die so definierte statistische Messeinheit ist
die Kenngre der Informationsgemeinschaft zur Festlegung der Verbreitung von Werbetrgern
e.V. (IVW siehe www.ivw.de/). Pageviews oder Page-Impressions sind daher die Basis, wenn Sie
z.B. Bannerwerbung auf Ihren Seiten anbieten und Geld dafr bekommen. Vllig unproblematisch ist diese Maeinheit jedoch auch nicht. Denn zunchst mal ist variabel, welche Dateitypen
als inhaltstragend deklariert werden. Das knnen je nach Einstellungen statische HTML-Dateien,

1164

Kapitel 25: Web-Projektverwaltung

PHP- oder ASP-Dateien, Textdateien, XML-Dateien oder auch CGI-Scripts sein. Eine HTMLDatei kann inhaltstragend sein, sie kann aber auch nicht inhaltstragend sein (z.B. weil sie nur
Links zu Unterseiten enthlt, nur eine Weiterleitung darstellt oder nur ein eingebettetes FlashIntro enthlt). HTML-Dateien mit Includes (SSI, PHP, ASP) knnen Inhalte aus mehreren
Inhaltsquellen in einer Seite zusammenfassen. Andere Lsungen bentigen zur Anzeige des gleichen Inhalts mehrere HTML-Dateien oder Scripts.
Visits auch Sessions oder in deutschsprachigen Statistiken Besuche oder Sitzungen genannt
zhlen nicht aufgerufene Seiten, sondern die IP-Adressen aufrufender Clients. Ein Anwender,
der sich eine Stunde lang munter durch das Angebot Ihrer Web-Seiten klickt und dabei ununterbrochen mit der gleichen Internet-Verbindung unterwegs ist, erzeugt demnach genau einen
Visit. Ebenso aber auch ein Anwender, der nur mal die Startseite aufruft und dann gleich wieder
verschwindet. Per Konvention der deutschen Werbeindustrie gilt ein Visit als beendet, wenn 30
Minuten lang kein neuer Zugriff erfolgt. Wenn der Anwender also whrend Ihre Seiten auf
seinem Browser angezeigt werden eine lngere Mittagspause einlegt oder einschlft und erst nach
zwei Stunden auf den nchsten Verweis in Ihrem Angebot klickt, dann gilt das als neuer Visit.

25.4.6 Anwender-Feedback auswerten

Wie Ihre Web-Seiten bei den Besuchern ankommen, erfahren Sie nicht nur aus Statistiken, sondern beispielsweise auch aus E-Mails, die Sie von Anwendern erhalten, oder aus den Eintrgen
eines Gstebuchs, das Sie auf Ihren Web-Seiten anbieten. Es ist ratsam, alles erhaltene Feedback
in irgendeiner Form zu sammeln und sinnvolle Verbesserungsvorschlge, Korrekturen usw. ins
Angebot zu integrieren.
Wenig Anwender-Feedback trotz guter Zugriffszahlen muss nichts Negatives bedeuten. Ein
ordentlich gestaltetes, den Anwendererwartungen entsprechendes Angebot wird dankbar genutzt, ohne dass die Anwender deswegen auf die Idee kommen, Ihnen begeisterte Mails zu
schreiben. Explizites Feedback erhalten Sie eher, wenn Ihr Angebot in welcher Form auch immer
aus dem Rahmen fllt: Der Grund kann sein, dass Anwender enttuscht sind, weil das Angebot
nicht ihren Erwartungen entspricht, oder dass Anwender hin und weg sind, weil das Angebot
ihre Erwartungen bei weitem bertrifft und ihnen ganz neue Perspektiven erffnet.
Ein mglicher Grund fr erhhtes Anwender-Feedback sind technische Besonderheiten Ihrer
Seiten. Wenn Ihre Navigation beispielsweise nur mit eingeschaltetem JavaScript und nur mit
dem neuesten Internet Explorer funktioniert, dann werden Sie zu Recht einige erboste Reaktionen von Anwendern erhalten, bei denen diese Voraussetzungen nicht gegeben sind. Ebenso ist es
mit Seiten, die bestimmte Bildschirmauflsungen erzwingen, den Anwender durch Features
wie Sperren der rechten Maustaste nerven und dergleichen. Umgekehrt kann es aber auch passieren, dass Anwender sich melden, weil Ihr Seiten-Layout ungewhnlich gut ist oder weil
bestimmte technische Features, die sie sonst noch nirgends gesehen haben, ihr Interesse geweckt
hat. Negatives Feedback zur Technik Ihrer Seiten sollten Sie auf jeden Fall ernst nehmen, zumindest dann, wenn es von mehreren Seiten und immer wieder geuert wird.
Wenn Sie echte Informationen vermitteln, werden Sie auch Fachfragen von Anwendern erhalten.
Wie Sie damit umgehen, ist Ihre Sache. Jedenfalls knnen Sie solches Feedback als Indiz dafr
betrachten, dass Ihr Angebot genutzt wird, dass die Informationen gelesen werden und dass die
Anwender Sie fr fachkompetent halten.

25.5 Provider wechseln mit Web-Projekten

1165

Sptestens wenn Sie regelmiges Feedback von den gleichen Anwendern erhalten, haben Sie
Fans. Wenn Sie bis dahin nur ein reines Informationsangebot auf Ihren Seiten haben, sollten
Sie darber nachdenken, ob das Angebot durch Anbieten von Kommunikationsmglichkeiten
wie Web-Forum oder Chat-Raum nicht noch viel attraktiver werden knnte. Mit etwas persnlichem Engagement knnen Sie es dann schaffen, dass ber Ihr Web-Projekt eine richtige
Online-Community entsteht was wohl der Traum vieler Web-Anbieter ist.

25.5

Provider wechseln mit Web-Projekten

25.5.1 Provider wechseln bei vorhandener Domain-Adresse

Ein mittlerweile hufiger Fall ist, dass Sie bereits eine eigene Domain-Adresse haben, also z.B.
eine Adresse vom Typ IhrName.com oder IhrName.de, und nun den Provider wechseln mchten.
Die Adresse mchten Sie aber behalten. Das ist normalerweise kein Problem, und eine vorhandene Domain-Adresse knnen Sie bei einem Wechsel zu einem anderen Provider einfach mitbringen. Die numerische Rechneradresse, auf die Ihre Seitenbesucher fortan geroutet werden,
muss dann gendert werden, aber die Namensadresse, unter der Ihr Projekt bekannt ist, bleibt
die gleiche.
Fr den Wechsel mssen Sie zumindest bei de-Domains einen so genannten KK-Antrag
ausfllen, in dem Sie schriftlich und mit Unterschrift als verantwortlicher Domain-Inhaber
(admin-c) den nderungswunsch bekunden (KK steht fr Konnektivitts-Koordination).
Bei anderen Top-Level-Domains (.com, .net usw.) gelten andere Regeln. Fragen Sie am besten
den neuen Provider danach! Dieser startet die Umkonnektierung. Dabei werden die RoutingTabellen auf allen Gateway-Rechnern im Internet gendert, die dafr sorgen, dass weltweit alle
Aufrufe mit Ihrem Domain-Namen auf den Rechner geroutet werden, auf dem Ihre Daten nun
abgelegt sind. In einem gewissen bergangszeitraum nach der Umkonnektierung kann es zu
technischen Problemen kommen, an denen weder der alte noch der neue Provider Schuld sind.
Denn ein Teil der Seitenbesucher wird dann noch zu dem alten Server-Rechner geroutet, ein
anderer Teil bereits zu dem neuen. Diese Probleme mssen Sie einfach in Kauf nehmen sie
erledigen sich nach einer Weile von alleine.

25.5.2 Provider wechseln und neue Domain-Adresse

Dieser Fall tritt ein, wenn Sie bereits ein Web-Projekt haben, aber bislang keine eigene DomainAdresse, z.B. weil Sie das Projekt bei einem Online-Dienst oder einem kostenlosen Anbieter
gehostet haben und nun aber Ngel mit Kpfen machen wollen. In diesem Fall mssen Sie erst
mal eine eigene Domain-Adresse reservieren. Ihr neuer Provider hilft Ihnen dabei und kann fr
Sie herausfinden, ob der gewnschte Name noch frei ist.
Nach der Konnektierung ist die neue Adresse dann weltweit erreichbar, und Sie knnen Ihre
Projektdateien auf den neuen Rechner hoch laden. Damit nun aber die Besucher auch zu der
neuen Adresse finden, mssen Sie jedoch noch ein paar Dinge regeln:
Fragen Sie Ihren alten Provider, ob es mglich ist, Ihre Daten wenigstens noch ein paar Wochen lang unter der alten Adresse zu stehen zu lassen. Dort knnen Sie dann anstelle der
ehemaligen Einstiegsseite eine einfache Seite platzieren, die einen Verweis auf die neue

1166

Kapitel 25: Web-Projektverwaltung

Adresse enthlt. Dazu brauchen Sie keine opulenten Grafiken. Es gengt ein einfacher Hinweis auf den Umzug und ein gut sichtbarer, anklickbarer Verweis oder eine automatische
Weiterleitung auf die neue Adresse.
Wiederholen Sie alle Aktivitten zum Bekanntmachen Ihres Projekts. Melden Sie Ihre neue
Adresse wieder bei allen wichtigen Suchdiensten und Web-Verzeichnissen an. Falls die Suchdienste eine Option zum Lschen von Eintrgen anbieten, machen Sie davon Gebrauch und
lschen Sie den Eintrag, der zu der alten Adresse fhrt. ndern Sie Visitenkarten, Brief- und
Faxvordrucke ab, damit nur noch Ihre neue Adresse in Umlauf gert.
Informieren Sie andere Seitenanbieter, von denen Sie wissen, dass deren Projekte Verweise
auf Ihr Projekt enthalten. Bitten Sie die Anbieter, die Verweise bei Gelegenheit zu aktualisieren. Drngeln Sie aber nicht und schimpfen Sie nicht gleich auf den fremden Anbieter, wenn
der Verweis nicht nach zwei Tagen aktualisiert ist.
Diese Manahmen gelten auch, wenn Sie nicht den Provider wechseln, aber ein separates Projekt
in einem Unterverzeichnis Ihrer eigenen Domain-Adresse haben und das Verzeichnis umbenennen oder das Projekt an einer ganz anderen Stelle publizieren.

25.6

Rechtliche Aspekte von Web-Projekten

25.6.1 Allgemeines
Zuerst kamen die Idealisten, dann die Prokuristen, und zuletzt die Juristen ins Web. Was zuerst
ein Paradies fr Freaks war, wurde dann ein Paradies fr Investoren, und schlielich ein Paradies
fr freiherrliche Serienbriefe. Abgesahnt durch Abgemahnt war das Motto, und der deutsche
Staat und sein Rechtssystem sahen dem munteren Gelderpressen tatenlos zu oder fanden es
sogar prima. Zugegeben das ist natrlich nur ein sehr spezieller Blick auf das Thema Recht im
Internet, ausgelst durch jene SELFHTML-eigene Geschichte, die Sie bei selfaktuell.teamone.de
im Online-Angebot von SELFHTML aktuell unter dem Titel Recht+Links nachlesen knnen.
Je enger es jedenfalls im Netz wird, desto hufiger streiten sich zwei. Und je mehr Anwender das
Web fr sich entdecken, desto mehr Anstliches wird darin gefunden. Fr Web-Anbieter ist es
mittlerweile leider ratsam, vor dem Publizieren eines Web-Projekts eine Rechtsschutz-Versicherung abzuschlieen und sich schon mal nach guten, auf Internet-Recht spezialisierten Anwlten
umzusehen, die im Ernstfall schnell eingeschaltet werden knnen. Allzumal in Deutschland, wo
die so genannte Erkundigungspflicht des Rechtssubjekts als sehr hoch eingeschtzt wird. Je
mehr Anwender andererseits in der Lage sind, eigene Web-Seiten zu erstellen, desto mehr
extreme Inhalte gelangen ins Netz. Nazischund und Rufmord, Kinderpornos und die sprichwrtlichen Anleitungen zum Bombenbau auch Menschen mit solchen Absichten lernen
HTML, und meistens noch einiges mehr, denn sie sind kommunikativ bestens organisiert und
verstehen sich auf blitzschnelle Server-Wechsel und andere Dinge, die Fahndern das Leben
schwer machen.
Juristische Aspekte gehren also mittlerweile zum Web Publishing genauso dazu wie Aspekte des
Web-Designs oder die Wahl des richtigen Providers. Derzeit ist noch Manches unklar, umstritten und gesetzlich ungeregelt. Noch urteilen Richter ber Netzstreitigkeiten, die selber nie eine
Computermaus in der Hand hatten, und Politiker, denen es genauso geht, nehmen keinen

25.6 Rechtliche Aspekte von Web-Projekten

1167

Ansto daran. Aber neue Generationen rcken nach, zum Teil schon geschaffene oder noch zu
schaffende Reglements werden sich durchsetzen, und die Rechtssicherheit wird wachsen. Das
wird aber zur Folge haben, dass man zum Publizieren im Web ein gewisses juristisches Grundwissen bentigen wird, genauso wie man zum Autofahren die Verkehrsregeln lernen muss.
Dieses Kapitel kann nur einen sehr groben berblick ber das Thema aus Sicht eines Nichtjuristen bieten. Der Blickwinkel ist dabei der des Web-Autors.

25.6.2 Hoheit und Verantwortlichkeit

Das Web ist ein weltweites Medium, aber es gibt keine weltweiten Gesetze dafr. Eine Web-Seite
ist unter ein und demselben URI in Deutschland, in den USA und in China erreichbar. Was im
einen Land als Kapitalverbrechen gilt, ist im anderen Land ein Kavaliersdelikt. Worauf im einen
Land die Todesstrafe steht, das wird im anderen Land mit Bewhrungsstrafen geahndet. Ganz
unterschiedliche Moralvorstellungen und religise Gebruche haben ganz unterschiedliche
juristische Auswirkungen. Was im einen Land als lahmer Stammtischwitz empfunden wird,
kostet im anderen Land ein paar Jahre Freiheitsentzug wegen Volksverhetzung. Da erhebt sich
zwangslufig die Frage: darf jeder alles ahnden, was nach seinem Recht nicht rechtens ist? Wenn
es so wre, dann wre praktisch jedes Web-Angebot aus Sicht irgendeines Blickwinkels der Welt
strafrechtlich oder sittenrechtlich belangbar. Das Web wre sofort tot. Aber wenn das nicht
akzeptabel ist, ist es denn umgekehrt? Kann ein Web-Angebot juristisch nicht belangbar sein,
nur weil das, was ihm zum Vorwurf gemacht wird, an irgendeinem anderen Ort der Welt, wo
das Angebot aufrufbar ist, juristisch nicht geahndet wird? Wohl auch nicht. Also wird ein WebAngebot nach dem Recht eines bestimmten Landes beurteilt, nmlich nach dem Recht des Landes, dessen Staatsbrger der Verantwortliche des Web-Angebots ist, und bei nicht natrlichen
juristischen Personen nach dem Recht des Landes, in dem diese juristische Person ihren Erfllungsort hat. Das klingt vernnftig, lst aber nicht unbedingt alle Probleme. Ein Amerikaner, der
in deutscher Sprache Nazi-Schund ins Web bringt, erreicht vor allem ein deutsches Publikum, ist
aber von Deutschland aus nicht belangbar. Also gengt es fr die deutsche Nazi-Szene, ein paar
willige Amerikaner zu finden, die ihre Inhalte ins Web bringen, und schon steht jeder in
Deutschland als noch so sittenwidrig empfundene Inhalt ganz legal im Web. Nun kann man fr
solche, eine ganze Volksseele zum Kochen bringen Flle noch zwischenstaatliche Abkommen
schaffen. Aber bei weniger spektakulren, zum Beispiel zivilrechtlichen oder wirtschaftsrechtlichen Angelegenheiten, bestehen ja die gleichen Probleme, und so viele zwischenstaatliche Abkommen, wie dazu ntig wren, kann es niemals geben. Kurzum: Es bleiben Grauzonen, hnlich
wie bei der Hochseeschifffahrt, und im Vorteil ist, wer diese Grauzonen zu nutzen wei.
Ebenso wie die Frage der Hoheit stellt sich die Frage der Verantwortlichkeit. Wenn eine WebSeite von einem Server-Rechner im Internet zum Browser eines Anwenders bertragen wird,
sind daran letztendlich mehrere juristische Personen beteiligt: einmal der Autor der Web-Seite,
dann der verantwortlich Publizierende (bei greren Web-Projekten knnen das durchaus verschiedene Personen sein), dann der Provider, der den Server zur Verfgung stellt, dann die
Backbone-Provider und Netzbetreiber, ber deren Leitungen die Daten transportiert werden,
und schlielich der Anwender, der die Seite willentlich aufgerufen hat.
In den Anfangszeiten des Web war die Verteilung der Verantwortlichkeit auf diese verschiedenen
juristischen Personen noch nicht klar geregelt. So gab es Flle, in denen Provider fr rechtswidrige Inhalte verklagt wurden, von denen sie gar nichts wussten. Mittlerweile gibt es in Deutschland Gesetze, in denen die Rechte und Pflichten der beteiligten juristischen Personen geregelt

1168

Kapitel 25: Web-Projektverwaltung

werden. Doch diese Gesetze sind nach Ansicht mancher Fachleute noch nicht optimal aufeinander abgestimmt und lassen daher noch viele Fragen offen.

25.6.3 Relevante Rechtsbereiche (Deutschland)

Folgende Rechtsbereiche knnen fr Publikationen im Web relevant sein. Die Angaben beziehen
sich auf deutsches Recht.

Strafrecht
Inhaltsverantwortliche Anbieter von Web-Seiten sind in Deutschland Verbreiter von Schriften.
Daher knnen Web-Autoren und Redaktionsverantwortliche strafrechtlich belangt werden
durch Verletzung der ffentlichen Ordnung, insbesondere Volksverhetzung (130 StGB) und
Anleitung zu Straftaten ( 130a StGB),
durch Versto gegen Pornographiegesetze ( 184 StGB),
durch Beleidigung, ble Nachrede und Verleumdung ( 185-188 StGB),
durch Anwendung von Nebenstrafrecht, das sich aus dem Urhebergesetz, dem Markengesetz,
dem Patentgesetz, dem Gesetz des unlauteren Wettbewerbs und dem Datenschutzgesetz ergeben kann.
Abstufungen wie vorstzlich, fahrlssig usw. gelten dabei wie blich und werden von Fall zu
Fall bewertet. Es sind zwar im Grunde nur wenige typische strafrechtliche Verste, die relevant
sind, doch die entsprechenden Gesetze haben ein relativ weites Anwendungsfeld. Hinter der
Anleitung zu Straftaten verbirgt sich letztlich das halbe Strafgesetzbuch unvorsichtige
Bemerkungen aus Zorn und Emprung, in Dateiform gespeichert und im Web verffentlicht,
knnen also schnell gefhrlich werden. Auch der in 184 definierte Jugendschutz kann schnell
zum Problem werden. Solange es dazu keine anderen oder einschrnkenden Bestimmungen fr
Web-Anbieter gibt, ist er anwendbar, und jedes Web-Angebot, das nicht nachweisen kann, effiziente Abschirmungsmittel einzusetzen, ist bei Nacktdarstellungen oder obsznen Texten
selbst wenn sie knstlerischer Natur sind potenziell angreifbar.

Zivilrecht
Das Zivilrecht umfasst Brgerliches Recht, Handels-, Wettbewerbs- und Urheberrecht. Wer im
Web publiziert, verteilt im Sinne des Zivilrechts Information. Damit werden vor allem folgende
typische Unterbereiche des Zivilrechts auf Inhalte von Web-Seiten anwendbar:
das Urheberrecht (Verste gegen fremdes geistiges Eigentum),
das Marken- und Patentrecht (Verletzungshandlungen gegen registrierte Marken und
Patente),
das Wettbewerbsrecht (Verste gegen Regelungen zur vergleichenden Werbung, gegen
berufsspezifische Werbeverbote, gegen Preisbindungsregelungen usw.),
das Vertragsrecht (relevant bei Verkaufsabschlssen, Mietabschlssen usw. via Internet),

25.6 Rechtliche Aspekte von Web-Projekten

1169

das Persnlichkeitsrecht (Verste wie Rufschdigung, Verffentlichung privater Schriften,

darunter auch E-Mails),
das Produkthaftungsrecht (Haftung bei Falschinformationen, die nachweislich Schden verursachen).
Gefhrlich fr Web-Anbieter sind im Bereich des Zivilrechts vor allem die Rechte kommerzieller
Unternehmen. Grere Firmen unterhalten Rechtsabteilungen, die immer hufiger auch im
Internet nach Verletzungshandlungen gegen Schutzansprche dieses Unternehmens schnffeln,
zumal in unserem Medienzeitalter der wirtschaftliche Erfolg vieler Unternehmen auch immer
strker an deren Image und Marken hngt. Es gibt jedoch groe Unterschiede. Whrend einige
Unternehmen viel erdulden nach dem Motto Hauptsache man redet ber uns, gehen andere
vehement gegen Verletzungshandlungen vor, die man ebenso gut als kostenlose Werbung fr
Produkte des Unternehmens interpretieren knnte. Die Spielrume sind da leider sehr gro, und
deshalb ist der Web-Anbieter gerade in diesem Rechtsbereich einer Art Willkr ausgesetzt, der
nur mit Rechtsschutzversicherung und guten Kontakten zu kompetenten Anwlten zu begegnen
ist.

ffentliches Recht
Das ffentliche Recht umfasst in Deutschland das Verfassungsrecht und das Verwaltungsrecht.
Fr Web-Anbieter gibt es in diesem Bereich weniger typische Anwendungsflle. Zwar enthlt das
Grundgesetz Passagen, die sich in Rechtsstreitigkeiten ber Web-Inhalte auswirken knnen.
Doch in der Regel sind die Artikel des Grundgesetzes zu allgemein, um in einem konkreten
Rechtsstreit entscheidende Anwendungsschlagkraft zu besitzen. Vorwrfe gegen Web-Inhalte
knnen sich theoretisch auf den Angriff auf die Menschenwrde (Art.1 GG) oder auf die Behinderung der freien Entfaltung der Persnlichkeit (Art.2 GG) berufen. Doch meistens nur im
Zusammenhang mit anderen, konkreteren strafrechtlichen oder zivilrechtlichen Vorwrfen.
Beachten Sie: Im Link-Verzeichnis des Online-Angebots von SELFHTML bei selfaktuell.teamone.de
aktuell finden Sie Verweise zu den relevanten Gesetzestexten.

25.6.4 Gesetze fr neue Medien (in Deutschland)

In Deutschland gibt es mittlerweile Gesetze, die im Hinblick auf die neuen Realitten des Internet geschaffen wurden. Diese Gesetze sollten Sie als Web-Autor kennen:

Informations- und Kommunikationsdienstegesetz (IuKDG)

Dieses Gesetz ist mageblich fr elektronische Angebote zur Information oder Kommunikation,
soweit nicht die redaktionelle Gestaltung zur Meinungsbildung fr die Allgemeinheit im Vordergrund steht (Datendienste, zum Beispiel Verkehrs-, Wetter-, Umwelt- und Brsendaten, Verbreitung
von Informationen ber Waren und Dienstleistungsangebote) und fr Angebote von Waren und
Dienstleistungen in elektronisch abrufbaren Datenbanken mit interaktivem Zugriff und unmittelbarer Bestellmglichkeit (Zitat aus Art.1, 2 Geltungsbereich).
Obwohl durchaus diskutiert wird, ob etwa private Homepages in diesen Geltungsbereich fallen,
ist das Gesetz aus derzeitiger Sicht durchaus fr Homepage-Betreiber mageblich.

1170

Kapitel 25: Web-Projektverwaltung

Teledienstegesetz (TDG)
Dieses Gesetz ist ein Auszug aus dem IuKDG und enthlt den Artikel 1 daraus. Das Gesetz regelt
aus inhaltlicher Anbietersicht die beiden folgenden wichtigen Punkte:
Verantwortlichkeit (TDG, 5)
Anbieterkennzeichnung (TDG, 6)
Wichtig ist dabei vor allem Absatz 2 aus 5. Denn viele Web-Angebote halten fremde Inhalte
zur Benutzung bereit, z.B. wenn Anwender selber Daten beitragen knnen, etwa bei Gstebchern, Diskussionsforen usw. Als Anbieter solcher Services sind Sie fr Inhalte ab dem
Moment verantwortlich, wo Sie Kenntnis von den Inhalten erhalten.

Teledienste-Datenschutzgesetz (TDDSG)
Dieses Gesetz ist ein Auszug aus dem IuKDG und enthlt den Artikel 2 daraus. Das Gesetz ist vor
allem fr Anbieter von Online-Shops wichtig, betrifft aber auch alle Anbieter, die aus anderen
Grnden Benutzerdaten sammeln, z.B. um fr ein Forum nur registrierte Benutzer zuzulassen.
Folgende Punkte sind wichtig:
Grundstze fr die Verarbeitung personenbezogener Daten (TDDSG, 3)
Datenschutzrechtliche Pflichten des Diensteanbieters (TDDSG, 4)
Bestandsdaten (TDDSG, 5)
Nutzungs- und Abrechnungsdaten (TDDSG, 6)
Auskunftsrecht des Nutzers (TDDSG, 7)
Datenschutzkontrolle (TDDSG, 8)
Hervorzuheben ist dabei Absatz 4 des 3, wo das Prinzip der so genannten Datensparsamkeit
formuliert wird. Denn nicht wenige Anbieter von ganz normalen HTML-Formularen im Web
haben bereits juristischen rger bekommen, weil sie mehr Pflichteingabefelder anboten, als es
aus Grnden der Datensparsamkeit notwendig wre. Die genannten Paragraphen enthalten auch
verschiedene Regelung fr die Speicherung personenbezogener Daten von Anwendern, die beispielsweise bei der Realisierung von CGI- und Datenbankanwendungen im Web zu bercksichtigen sind.

Mediendienstestaatsvertrag (MdStV)
Um einen Staatsvertrag und nicht um ein Bundesgesetz handelt es sich dabei deshalb, weil er die
kulturelle Lnderhoheit betrifft und deshalb ein von den Lndern einzeln unterzeichnetes
Dokument darstellt. Die darin formulierten Paragraphen sind in vielen Fllen hnlich wie Paragraphen aus TDG und TDDSG. Der MdStV enthlt aber darber hinaus noch einige weiterreichende Regelungen:
Bei der Anbieterkennzeichnung (MdStV, 6) wird fr journalistisch-redaktionell gestaltete
Angebote die so genannte Impressumpflicht formuliert.
Es wird im Gegensatz zum TDG die Verpflichtung zu wahrheitsgemen Wiedergabe von
Information zur Sorgfaltspflicht bei der Recherche postuliert (MdStV, 7).

25.6 Rechtliche Aspekte von Web-Projekten

1171

Es werden ausdrcklich die strafrechtlichen Folgen im Falle von Volksverhetzung und

jugendgefhrdenden Inhalten betont (MdStV, 8).
Fr Werbung wird festgelegt, dass diese als solche kenntlich gemacht werden muss (MdStV, 9).
Das Prinzip der Gegendarstellung wird verlangt (MdStV, 10). Dies verpflichtet den Anbieter, Widerspruch von Lesern/Anwendern gegen eine Tatsachenbehauptung der eigenen
Redaktion zu verffentlichen.
Interessant ist vor allem, inwiefern der MdStV fr Web-Angebote anstelle von TDG und TDDSG
relevant werden kann. Die Definitionen zum Geltungsbereich sind leider nicht ganz klar. Stark
redaktionell orientierte Web-Angebote, die auch meinungsbildenden Charakter haben (E-Zines,
Portale, viel besuchte und fhrende Angebote zu bestimmten Themen und Fachgebieten), sollten daher auch die erweiterten Bestimmungen des MdStV kennen und bercksichtigen.
Beachten Sie: Im Link-Verzeichnis des Online-Angebots von SELFHTML bei selfaktuell.teamone.de
aktuell finden Sie Verweise zu den relevanten Gesetzestexten.

25.6.5 Autoren-Aussage zur Link-Haftung

Die wohl prominenteste und fr den Fortbestand des Web in der Tat gefhrlichste rechtliche
Problemzone ist die Frage der Link-Haftung. Obwohl Tim Berners Lee, der Grndervater des
WWW, klar und deutlich Stellung dazu bezogen hat, was ein Link ist im Gegensatz etwa zu eingebetteten Fremdinhalten, tut sich die Rechtssprechung noch schwer damit. Immer noch wird
vor Gericht die Zeigerfunktion eines Verweises mit dem Zueigenmachen fremder Inhalte verwechselt. Deshalb soll auch an dieser Stelle noch mal aus Sicht des Autors von SELFHTML (und
damit aus Sicht technisch informierter Fachkreise) dargestellt werden, was ein Link (Synonym
fr Verweis) im Web ist.
Ein Verweis besteht aus zwei Teilen:
1. der Erwhnung des anderen Inhalts sie ist im Verweistext formuliert, und
2. einer Meta-Information, nmlich zum Fundort des anderen Inhalts im Internet (URI).
Das gilt sowohl fr Verweise innerhalb des eigenen Angebots als auch fr Verweise zu fremden
Angeboten. Verweise haben immer den gleichen Aufbau. In Bezug auf fremde Inhalte ist ein
Verweis nichts anderes, als wenn ein fremder Inhalt vom Typ Buch erwhnt wird und dabei
die Meta-Informationen fr Erscheinungsdatum, Verlag und ISBN-Nummer hinzugefgt werden.
Den Zugang zum fremden Inhalt stellt aus technischer Sicht nicht der Anbieter des Verweises
her, sondern der Anwender. Und zwar nicht zwangslufig, sondern willentlich und nur dann,
wenn er auf den Verweis klickt und damit die verlinkte Internet-Adresse aufruft. Das ist nichts
anderes, wie wenn der Anwender sich entschliet, das erwhnte Buch zu erwerben, dazu Titel,
Verlag und ISBN-Nummer auf einem Zettel notiert, sich in eine Buchhandlung oder Bibliothek
begibt und das Buch dort erwirbt oder bestellt. Das Anklicken des Verweises fhrt nur zeitlich
schneller zum Ziel, stellt aber qualitativ keinen Unterschied zum Gang in die Buchhandlung oder
Bibliothek dar.
Wenn ein Angebot sich durch einen Link auf ein fremdes Angebot tatschlich den fremden
Inhalt zu eigen machen wrde, dann htte dies unter anderem folgende wichtige Konsequenzen:

1172

Kapitel 25: Web-Projektverwaltung

Eine groe Suchmaschine, die das Suchen nach beliebigen Begriffen erlaubt und die Suchtreffer in Form von Links zu Fundorten auflistet, wrde sich mehr oder weniger das gesamte
Web zu eigen machen. Und selbst wenn man Suchmaschinen ausnehmen wrde, weil sie
weitgehend automatisiert arbeiten, wrde die Aussage zumindest auf alle groen redaktionell
gepflegten Web-Verzeichnisse zutreffen.
Wer einen Link auf ein fremdes Angebot anbietet, das wieder auf ein anderes fremdes Angebot linkt, das wieder auf ein fremdes anderes Angebot linkt, wrde sich im Sinne der infiniten
teleologischen Reduktion alle weiteren Inhalte zu eigen machen.

Persnliches Fazit
Die einzig vernnftige Konsequenz fr Inhaltsanbieter daraus wre, keine Links mehr auf fremde
Inhalte zu setzen, um die unkontrollierbare Verantwortung, die damit verbunden wre, zu vermeiden. Vermutlich wrden die Anwender dann auf auslndische Angebote ausweichen, deren
Anbieter keine Angst beim Setzen von Links auf fremde Inhalte haben mssen. Web-Angebote
des eigenen Landes wrden dadurch einen gravierenden Wettbewerbsnachteil erleiden und vermutlich reihenweise aufgeben. Der Schaden fr die Fortentwicklung neuer Medien im eigenen
Land wre unabsehbar.

1173

Technische Ergnzugen

A.1

HTTP-Statuscodes

Allgemeines zu HTTP-Statuscodes
Wenn ein Web-Browser ber das HTTP-Protokoll einen URI aufruft, erhlt der Web-Server, der
fr die aufgerufene Domain oder IP-Adresse zustndig ist, die Anfrage. Er ermittelt die gewnschten Daten auf dem Server-Rechner und sendet diese wieder ber das HTTP-Protokoll
an den wartenden Web-Browser. Je nachdem, wie die Anforderung des Web-Browsers lautete
und welches Ergebnis beim Ermitteln der Daten auf dem Server-Rechner herauskommt, bermittelt der Server in den HTTP-Kopfdaten der Antwort an den Browser eine Zahl. Diese Zahl
stellt einen Statuscode dar und gibt Auskunft darber, in welchem Verhltnis das, was der Server
an Daten ausliefert, zu der gewnschten Anforderung steht. Auf diese Weise werden beispielsweise Fehlermeldungen bermittelt, aber auch Hinweise wie die angeforderten Daten sind
zugangsgeschtzt. Der Browser kann den Statuscode auswerten und entsprechend reagieren.
Der Web-Server schreibt den HTTP-Statuscode der Anfrage auerdem in seine Log-Dateien.
HTTP-Statuscodes sind fr Sie als Web-Anbieter an folgenden Stellen interessant:
In den Log-Dateien des Web-Servers knnen Sie sich einen Eindruck davon machen, welche
Fehler und Probleme in letzter Zeit auffllig oft auftauchten. Auch die meisten Statistiken zu
Web-Projekten schlsseln die Gesamtzahlen unter anderem nach HTTP-Statuscodes auf.
Dabei ist es hilfreich, die einzelnen Statuscodes, ihre Bedeutung und mgliche Ursachen fr
ihr Vorkommen zu kennen.
CGI-Scripts knnen selber HTTP-Header erzeugen. Dabei knnen Sie auch HTTP-Statuscodes notieren, die als Antwort an den aufrufenden Browser gesendet werden sollen. Der
Web-Server reicht die Angaben dann an den Browser durch. Wie so etwas in einem CGIScript mit Perl funktioniert, wird in Teil 2 des HTML & Web-Publishing Handbuchs im
Abschnitt Erweiterte Angaben fr HTTP-Header und HTML-Dateikopf (im Zusammenhang
mit dem CGI-Modul von Perl) beschrieben.
Die HTTP-Statuscodes gehren zur Spezifikation des HTTP-Protokolls. Zustndig fr die Spezifikation ist das W3-Konsortium. Die Spezifikation erfolgt in Form von Requests for Comments
(RFCs). ber die folgende Seite des W3-Konsortiums knnen Sie alle relevanten und aktuelle
Informationen rund um die Normierung des HTTP-Protokolls aufrufen (www.w3.org/
Protocols/).

1174

Anhang A: Technische Ergnzugen

bersicht der HTTP-Statuscodes

Statuscode

Zugehrige Meldung

Bedeutung

100
101
200

Continue

201

Created

202

Accepted

203

Non-Authoritative

Fortfahren. Wird derzeit noch nicht verwendet.

Protokoll wechseln. Wird derzeit noch nicht verwendet.
Der Server kann die angeforderten Daten wie gewnscht
versenden. Dies ist der Normalfall, wenn keine Probleme auftauchen. Der grere Anteil aller Anfragen an den Web-Server
sollte mit diesem Statuscode enden ansonsten stimmt etwas
nicht.
Ein Objekt (z.B. eine Datei oder ein Verzeichnis) wurde auf
dem Server erfolgreich angelegt. Das kann vorkommen, wenn
die Anfrage des Browsers an den Server mit einer der HTTPbertragungsmethoden post oder put erfolgte und eine Anweisung zum Erstellen des entsprechenden Objekts enthielt.
Der Server hat die Anfrage des Browsers akzeptiert, liefert aber
keine Daten als Antwort. Der Server schreibt die Daten statt
sie zu senden in eine Datei und teilt in der Meldung mit, wo
die Daten spter zu finden sein werden. Diese Meldung sagt
nichts darber aus, ob der Server die Anfrage erfolgreich behandeln kann. Er hat sie einfach nur akzeptiert und die Abarbeitung auf einen spteren Zeitpunkt verschoben.
Dieser Statuscode sollte von einem Server anstelle von 200 zurckgegeben werden, wenn es sich nicht um den Original-Server handelt, sondern beispielsweise um einen Proxy-Server.
Der Web-Browser erfhrt auf diese Weise, dass die Daten erfolgreich gesendet werden konnten, aber nicht vom OriginalServer kommen und daher keine Garantie auf deren Aktualitt besteht.
Der Server hat die Anfrage erhalten, sendet jedoch keine Daten zurck. Gut verwendbar ist dieser Statuscode bei Verwendung in CGI-Scripts, die zwar etwas auf dem Server erledigen,
aber keinen neuen HTML-Code an den aufrufenden Browser
senden wollen. Aus Sicht des Anwenders bleibt der alte Bildschirminhalt bestehen.
Der angegebene Server existiert nicht bzw. der Server, der
diese Antwort gibt, ist nicht der angefragte Server und kann
den angefragten Server nicht finden. Die angeforderten Daten
knnen deshalb nicht versendet werden.
Die angeforderten Daten werden in mehreren Portionen versendet (das hat aber nichts mit TCP/IP-Paketen zu tun, sondern
passiert auf HTTP-Protokollebene). Mit Angaben zu contentlength (z.B.: 1024) und content-range (z.B.: bytes 0-1023/1024)
wird angegeben, wie viele Bytes von dem angeforderten Inhalt
und welcher Teil der Gesamtdaten geliefert werden.

Switching Protocols
OK

Information

204

No Content

205

Reset Content

206

Partial Content

A.1 HTTP-Statuscodes

1175

Statuscode

Zugehrige Meldung

Bedeutung

300

Multiple Choices

301

Moved Permanently

302

Moved Temporarily

303

See Other

304

Not Modified

305

Use Proxy

306
307

[Unused]

400

Bad Request

Die angeforderten Daten sind unter mehreren verschiedenen

URIs vorhanden (Mirror). Anstelle der Daten werden die
verfgbaren URIs als Liste bertragen. Der Web-Browser
kann den Anwender anschlieend in einem Dialog einen URI
auswhlen lassen.
Die angeforderten Daten befinden sich nicht mehr unter dem
URI, sie wurden dauerhaft auf eine andere Adresse verschoben. In der Statusmeldung wird angegeben, unter welchem
URI sich die Daten jetzt befinden. Ein Web-Browser, der diese
Antwort vom Server erhlt, kann beispielsweise gleich die
neue Adresse anfordern.
Die angeforderten Daten wurden vorbergehend zu einem
anderen URI verschoben. In der Statusmeldung wird angegeben, unter welcher Adresse sich die Daten derzeit befinden.
Ein Web-Browser, der diese Antwort erhlt, kann beispielsweise gleich die temporr gltige Adresse anfordern.
Die angeforderten Daten sind unter einem angegebenen URI
verfgbar und sollten von dort mit Hilfe der get-Methode angefordert werden. Dieser Statuscode ist fr CGI-Scripts gedacht, die mit der post-Methode aufgerufen wurden und den
Browser auf eine andere Ressource lenken wollen, die mit der
get-Methode angefordert werden soll.
Die angeforderten Daten haben sich seit dem angegebenen
Zeitpunkt nicht gendert und werden deshalb nicht gesendet.
Dieser Statuscode ist neben dem Code 200 einer der hufigsten in der Praxis. Er wird verursacht durch Web-Browser, die
aufgrund ihrer Cache-Einstellungen Daten erst wieder nach
einer bestimmten Zeit vom Original-Server laden. Davor fragen sie nur mit dem Zeitpunkt, zu dem die Daten zuletzt geladen wurden, an, ob die Daten auf dem Server seitdem gendert wurden.
Die angeforderten Daten sollen statt von diesem Server von
dem in der Statusmeldung angegebenen Proxy-Server angefordert werden.
Reserviert. Wird derzeit aber nicht verwendet.
Wie Statuscode 302. Gedacht fr Fehlreaktionen einiger
Browser auf 302.
Die Anfrage enthlt Syntaxfehler. Der Server kann die Anfrage
deshalb nicht bearbeiten. Das kann beispielsweise vorkommen, wenn die Anfrage dadurch zustande kam, dass ein Anwender versuchte, einen URI hndisch in die Adresszeile des
Browsers einzugeben und dabei ungltige Zeichen verwendete.

Temporary Redirect

1176

Anhang A: Technische Ergnzugen

Statuscode

Zugehrige Meldung

Bedeutung

401

Unauthorized

402

Payment Required

403

Forbidden

404

Not Found

405

Method Not Allowed

406

Not Acceptable

Die angeforderten Daten sind zugangsgeschtzt. Der Server

kann die Daten nur senden, wenn eine gltige Zugangskennung, bestehend aus Benutzername und Passwort, bei der
Anfrage mit gesendet wird. Das passiert in der Praxis immer
dann, wenn eine Adresse aufgerufen wird, die z.B.
durch htacess zugangsgeschtzt ist. Der Web-Browser zeigt
dann, nachdem er diesen Statuscode erhalten hat, einen Dialog zum Eingeben von Benutzername und Kennwort an. Mit
den eingegebenen Daten startet er dann eine neue Anfrage an
den Server.
Die angeforderten Daten sind kostenpflichtig. Der Server
kann die Daten nur senden, wenn eine Besttigung der Zahlung fr die Daten bei der Anfrage mitgesendet wird. Derzeit
wird dies aufgrund fehlender einheitlicher technischer
Grundlagen fr Micropayment noch nicht verwendet.
Die angeforderten Daten sind zugangsgeschtzt. Die angegebenen Daten, mit denen der Zugang erlaubt werden soll, sind
ungltig. Das kann z.B. vorkommen, wenn zuvor der Statuscode 401 zurckgeliefert worden war und der Browser nun die
nchste Anfrage mit den Zugangsdaten gestartet hat, die er
vom Anwender im Dialog abgefragt hat, und diese Daten aber
ungltig sind. Manche Web-Browser wiederholen den Dialog
zum Eingeben der Zugangsdaten dann noch zweimal, und
nach der dritten Falscheingabe wird dem Anwender die Fehlermeldung Forbidden ausgegeben.
Der angeforderte URI existiert nicht. Dies ist neben den Statuscodes 200 und 304 einer der hufigsten Flle in der Praxis.
Er tritt immer dann ein, wenn ein Verweis auf eine nicht oder
nicht mehr existierende Adresse auf dem Server fhrt oder
wenn der Anwender versucht hat, eine Adresse auf dem Server
durch hndisches Eintippen in der Adresszeile des Browsers
aufzurufen, und diese Adresse aber nicht existiert.
Die angegebene bertragungsmethode ist auf dem Server
nicht erlaubt. Die Daten werden deshalb nicht bertragen.
Das kann beispielsweise vorkommen, wenn in der Konfiguration des Web-Servers auer der get-Methode keine weitere
Methode erlaubt ist, ein HTML-Formular aber einen CGIAufruf mit der post-Methode enthlt.
Die Anfrage ist in dieser Form nicht akzeptabel. Die Daten
werden deshalb nicht bertragen.

A.1 HTTP-Statuscodes
Statuscode

Zugehrige Meldung

407

Proxy Authentication

409

410

411

412

413

414

415

Bedeutung

Der anfragende Client ist ein Proxy-Server. Die Daten werden

an diesen Server nur bertragen, wenn er sich als gltiger
Proxy-Server ausweist. Dieser Statuscode findet derzeit noch
keine Verwendung. Damit soll auf die Dauer ein hnliches
Handling wie mit dem Statuscode 401 etabliert werden, jedoch nicht fr anfragende Browser, sondern fr anfragende
Proxy-Server. Auf diese Weise knnte es Web-Anbietern
mglich werden, in der Serverkonfiguration unerwnschte
Proxy-Server vom Zwischenspeichern der eigenen Daten auszusperren.
Request Timeout
Der Server hat eine erwartete Anfrage nicht innerhalb des dafr festgelegten Maximalzeitraums erhalten. Die Verbindung
zum anfragenden Browser wird deshalb abgebaut. Angeforderte Daten werden nicht bertragen.
Conflict
Der Server kann die angeforderten Daten nicht senden, weil
ein Konflikt mit einem anderen Prozess aufgetaucht ist. Das
kann beispielsweise passieren, wenn ein anderer Prozess eine
angeforderte Datei gerade mit einem exklusiven File-Locking
(keinerlei Dateizugriff fr andere Prozesse nicht erlaubt) versehen hat.
Gone
Die angeforderten Daten wurden zu einem anderen URI verschoben. Dem Server ist aber nicht bekannt, wohin. Deshalb
kann er sie nicht senden andernfalls wre ein Statuscode 301
oder 302 gesendet worden.
Length Required
Die Daten werden nicht gesendet. Sie knnen nur gesendet
werden, wenn die Anfrage eine Angabe zu content-length enthlt. Der Browser kann versuchen, die Anfrage neu zu formulieren und dabei die Lnge der an den Server gesendeten Anfragedaten mit zu bermitteln.
Precondition Failed
Eine oder mehrere Bedingungen, die bei der Anfrage gestellt
wurden, treffen nicht zu. Die angeforderten Daten werden
deshalb nicht bertragen.
Request Entity Too
Der Server kann die Anfrage nicht bearbeiten, weil diese zu
Large
viele Zeichen enthlt. Die angeforderten Daten werden deshalb nicht bertragen.
Request-URL Too Long
Der Server kann die Anfrage nicht bearbeiten, weil die angeforderte Adresse zu viele Zeichen enthlt. Die angeforderten
Daten werden deshalb nicht bertragen.
Unsupported Media Type Der Server kann die Anfrage nicht bearbeiten, weil er keinen Mime-Type fr den angeforderten Datentyp kennt. Die
angeforderten Daten werden deshalb nicht bertragen.
Required

408

1177

1178

Anhang A: Technische Ergnzugen

Statuscode

Zugehrige Meldung

Bedeutung

416

Requested Range Not

Die Anfrage enthlt Angaben, welcher Byte-Bereich von dem

angeforderten URI bertragen werden soll. Sowohl der Anfangswert als auch der Endwert des angegebenen Bereichs liegen auerhalb des verfgbaren Byte-Bereichs, z.B. wenn ein
Byte-Bereich von 1000 bis 2000 angegeben wird, die Ressource
aber nur 500 Byte hat. Die angeforderten Daten werden deshalb nicht bertragen.
Die Anfrage enthlt im expect-Feld bestimmte Wnsche, die
der Server nicht erfllen kann. Die angeforderten Daten werden deshalb nicht bertragen.
Der Server kann die angeforderten Daten nicht senden, weil
auf dem Server ein Fehler aufgetreten ist. Beispielsweise
konnte das aufgerufene CGI-Script nicht gestartet werden.
Die Anfrage enthlt Anforderungen, die der Server nicht bearbeiten kann, weil die Voraussetzunen dazu nicht implementiert sind. Die angeforderten Daten knnen deshalb nicht gesendet werden.
Zum Bearbeiten der Anfrage musste der Server einen anderen
Server aufrufen, erhielt dabei jedoch eine Fehlermeldung. Die
angeforderten Daten knnen deshalb nicht gesendet werden.
Der Server kann die Anfrage wegen berlastung nicht bearbeiten. Die angeforderten Daten knnen deshalb nicht gesendet werden. In der Statusmeldung kann stehen, wann die Anfrage frhestens wieder bearbeitet werden kann. Im Gegensatz
zum Statuscode 202 verarbeitet der Server die Daten nicht,
sobald er wieder Kapazitten hat.
Zum Bearbeiten der Anfrage musste der Server einen anderen
Server aufrufen, erhielt dabei jedoch nach einem festgelegten
Maximalzeitraum keine Antwort. Die angeforderten Daten
knnen deshalb nicht gesendet werden.
Der Server untersttzt die im HTTP-Header der Anfrage angegebene HTTP-Version nicht. Die angeforderten Daten werden deshalb nicht gesendet.

Satisfiable

417

Expectation Failed

500

Internal Server Error

501

Not Implemented

502

Bad Gateway

503

Service Unavailable

504

Gateway Timeout

505

HTTP Version Not

Supported

A.2

Mime-Typen

Allgemeines zu Mime-Typen
Mime steht fr Multipurpose Internet Mail Extensions. Aus dem Namen geht hervor, dass das,
was da spezifiert wird, ursprnglich fr E-Mails gedacht war und zwar fr E-Mails mit
Attachments (englisch fr Anhang). Solche so genannten Multipart-Mails enthalten die gesamten zu bertragenden Daten in einer Datei. Innerhalb der Datei musste eine Konvention gefunden werden, wie die einzelnen Teile (z.B. Text der Mail und angehngte ZIP-Datei) voneinander
zu trennen seien. Dabei wurde auch ein Schema entwickelt, das der interpretierenden Software

A.2 Mime-Typen

1179

mitteilt, um welchen Datentyp es sich bei dem jeweils nchsten Teil der Mail handelt. Das
Schema erwies sich nicht nur fr E-Mails als ntzlich. Fast immer, wenn entfernte Programme
(z.B. Web-Browser und Web-Server) wegen einer bevorstehenden Datenbertragung miteinander kommunizieren, geht es auch um die Art der zu bertragenden Daten. Dabei hat sich im
gesamten Internet das Schema der Mime-Typen durchgesetzt. Auch im Web stt man an
verschiedenen Stellen auf Mime-Typen:
Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe eines
Mime-Typen erwarten, nmlich a (type=), form (accept= und enctype=), input (accept=),
link (type=), object (codetype= und type=), param (type=), script (type=) und style
(type=)
Wenn ein CGI-Script an den aufrufenden Browser einen HTTP-Header sendet, muss es den
Mime-Type der nachfolgenden Daten senden.
In JavaScript gibt es ein eigenes Objekt MimeTypes, das es erlaubt, in JavaScript die verfgbaren Mime-Typen des Browsers zu ermitteln.
Sowohl jeder Web-Browser als auch jeder Web-Server fhren eine Liste mit ihnen bekannten
Mime-Typen. Bei der Kommunikation mssen sie sich darauf einigen, ob der Empfnger den
Mime-Type akzeptiert, den der Sender senden will. Moderne Browser akzeptieren zwar in der
Regel jeden Mime-Type und bieten dem Anwender einfach an, falls sie den Mime-Type nicht
kennen, die zu empfangenden Daten als Download-Datei abzuspeichern. Web-Server sind dagegen meist empfindlicher. Mime-Typen, die sie nicht kennen, verarbeiten sie nicht. Gerade wenn
auf dem Server-Rechner nicht alltgliche Dateiformate bereitgestellt werden, ist es wichtig, den
Mime-Type dafr in der Konfiguration des Web-Servers zu notieren.
Bei Standard-Dateiformaten sollten Sie unbedingt die Mime-Type-Angaben verwenden, die dafr etabliert sind. Die bersicht auf dieser Seite weiter unten listet viele bekannte Mime-Typen
auf. Wenn Sie trotz Recherchen, zum Beispiel im IANA-Verzeichnis der Media-Typen (www.isi.
edu/in-notes/iana/assignments/media-types/) keinerlei Anhaltspunkte dafr finden, ob es zu
einem Dateiformat einen bereits etablierten Mime-Type gibt, knnen Sie selber einen festlegen.
Gleiches gilt fr vllig eigene Dateiformate.
Dazu mssen Sie das Schema der Mime-Typen kennen. Ein Mime-Type besteht aus zwei Teilen:
der Angabe eines Medientyps und der Angabe eines Subtyps. Beide Angaben werden durch einfachen Schrgstrich voneinander getrennt. Beispiele: text/html, image/gif.
Bei den Medientypen gibt es folgende:
Medientyp

Bedeutung

text

fr Textdateien
fr Grafikdateien
fr Videodateien
fr Sound-Dateien
fr Dateien, die an ein bestimmtes Programm gebunden sind
fr mehrteilige Daten
fr Nachrichten
fr Dateien, die mehrdimensionale Strukturen reprsentieren

image
video
audio
application
multipart
message
model

1180

Anhang A: Technische Ergnzugen

Subtypen fr servereigene Dateiformate, d.h. Dateitypen, die auf dem Server ausgefhrt werden
knnen, werden meist mit x- eingeleitet. Das Schema der Mime-Types wird in den Requests for
Comments (RFCs) mit den Nummern 2045, 2046 und 2077 festgelegt.

bersicht von Mime-Typen

Die Auswahl ist alphabetisch sortiert und erhebt keinen Anspruch auf Vollstndigkeit.
Mime-Typ
application/acad

Dateiendung(en)
*.dwg

application/applefile

*.asd *.asn
*.tsp
application/dxf
*.dxf
application/futuresplash
*.spl
application/gzip
*.gz
application/listenup
*.ptlk
application/mac-binhex40
*.hqx
application/mbedlet
*.mbd
application/mif
*.mif
application/msexcel
*.xls *.xla
application/mshelp
*.hlp *.chm
application/mspowerpoint
*.ppt *.ppz *.pps *.pot
application/msword
*.doc *.dot
application/octet-stream
*.bin *.exe *.com *.dll
*.class
application/oda
*.oda
application/pdf
*.pdf
application/postscript
*.ai *.eps *.ps
application/rtc
*.rtc
application/rtf
*.rtf
application/studiom
*.smp
application/toolbook
*.tbk
application/vocaltec-media-desc *.vmd
application/vocaltec-media-file *.vmf
application/x-bcpio
*.bcpio
application/x-compress
*.z
application/x-cpio
*.cpio
application/x-csh
*.csh
application/x-director
*.dcr *.dir *.dxr
application/x-dvi
*.dvi
application/x-envoy
*.evy
application/x-gtar
*.gtar
application/astound
application/dsptype

Bedeutung
AutoCAD-Dateien (nach NCSA)
AppleFile-Dateien
Astound-Dateien
TSP-Dateien
AutoCAD-Dateien (nach CERN)
Flash Futuresplash-Dateien
GNU Zip-Dateien
Listenup-Dateien
Macintosh Binr-Dateien
Mbedlet-Dateien
FrameMaker Interchange Format-Dateien
Microsoft Excel-Dateien
Microsoft Windows Hilfe-Dateien
Microsoft Powerpoint-Dateien
Microsoft Word-Dateien
Ausfhrbare Dateien
Oda-Dateien
Adobe PDF-Dateien
Adobe Postscript-Dateien
RTC-Dateien
Microsoft RTF-Dateien
Studiom-Dateien
Toolbook-Dateien
Vocaltec Mediadesc-Dateien
Vocaltec Media-Dateien
BCPIO-Dateien
Z-Dateien
CPIO-Dateien
C-Shellscript-Dateien
X-Director-Dateien
DVI-Dateien
Envoy-Dateien
GNU tar-Archiv-Dateien

A.2 Mime-Typen
Mime-Typ

Dateiendung(en)

1181

Bedeutung

application/x-hdf-*.hdf-HDFDateien
application/x-httpd-php
application/x-javascript
application/x-latex
application/x-macbinary
application/x-mif
application/x-netcdf
application/x-nschat
application/x-sh
application/x-shar
application/x-shockwave-flash
application/x-sprite
application/x-stuffit
application/x-supercard
application/x-sv4cpio
application/x-sv4crc
application/x-tar
application/x-tcl
application/x-tex
application/x-texinfo
application/x-troff
application/x-troff-man
application/x-troff-me
application/x-troff-ms
application/x-ustar
application/x-wais-source

*.php *.phtml
*.js
*.latex
*.bin
*.mif
*.nc *.cdf
*.nsc
*.sh
*.shar
*.swf *.cab
*.spr *.sprite
*.sit
*.sca
*.sv4cpio
*.sv4crc
*.tar
*.tcl
*.tex
*.texinfo *.texi
*.t *.tr *.roff
*.man *.troff
*.me *.troff
*.me *.troff
*.ustar
*.src

PHP-Dateien
serverseitige JavaScript-Dateien
Latex-Quelldateien
Macintosh Binrdateien
FrameMaker Interchange Format-Dateien
Unidata CDF-Dateien
NS Chat-Dateien
Bourne Shellscript-Dateien
Shell-Archiv-Dateien
Flash Shockwave-Dateien
Sprite-Dateien
Stuffit-Dateien
Supercard-Dateien
CPIO-Dateien
CPIO-Dateien mit CRC
tar-Archivdateien
TCL Scriptdateien
TEX-Dateien
TEXinfo-Dateien
TROFF-Dateien (Unix)
TROFF-Dateien mit MAN-Makros (Unix)
TROFF-Dateien mit ME-Makros (Unix)
TROFF-Dateien mit MS-Makros (Unix)
tar-Archivdateien (Posix)
WAIS Quelldateien
HTML-Formulardaten an CGI

*.zip
*.au *.snd
*.es
*.tsi
*.vox
*.aif *.aiff *.aifc
*.dus *.cht
*.mid *.midi
*.mp2
*.ram *.ra
*.rpm
*.stream
*.wav
*.dwf
*.cod

ZIP-Archivdateien
Sound-Dateien
Echospeed-Dateien
TS-Player-Dateien
Vox-Dateien
AIFF-Sound-Dateien
Sprachdateien
MIDI-Dateien
MPEG-Dateien
RealAudio-Dateien
RealAudio-Plug-In-Dateien
QuickTime-Dateien
Wav-Dateien
Drawing-Dateien
CIS-Cod-Dateien

application/x-www-formurlencoded
application/zip
audio/basic
audio/echospeech
audio/tsplayer
audio/voxware
audio/x-aiff
audio/x-dspeeh
audio/x-midi
audio/x-mpeg
audio/x-pn-realaudio
audio/x-pn-realaudio-plugin
audio/x-qt-stream
audio/x-wav
drawing/x-dwf
image/cis-cod

1182

Anhang A: Technische Ergnzugen

Mime-Typ
image/cmu-raster
image/fif
image/gif
image/ief
image/jpeg
image/tiff
image/vasa
image/vnd.wap.wbmp
image/x-freehand
image/x-portable-anymap
image/x-portable-bitmap
image/x-portable-graymap
image/x-portable-pixmap
image/x-rgb
image/x-windowdump
image/x-xbitmap
image/x-xpixmap

Dateiendung(en)
*.ras
*.fif
*.gif
*.ief
*.jpeg *.jpg *.jpe
*.tiff *.tif
*.mcf
*.wbmp
*.fh4 *.fh5 *.fhc
*.pnm
*.pbm
*.pgm
*.ppm
*.rgb
*.xwd
*.xbm
*.xpm

message/external-body
message/http
message/news
message/partial
message/rfc822
model/vrml

*.wrl

multipart/alternative
multipart/byteranges
multipart/digest
multipart/encrypted
multipart/form-data
multipart/mixed
multipart/parallel
multipart/related
multipart/report
multipart/signed
multipart/voice-message
text/comma-separated-values
text/css
text/html
text/javascript
text/plain
text/richtext
text/rtf
text/tab-separated-values
text/vnd.wap.wml

*.csv
*.css
*.htm *.html *.shtml
*.js
*.txt
*.rtx
*.rtf
*.tsv
*.wml

Bedeutung
CMU-Raster-Dateien
FIF-Dateien
GIF-Dateien
IEF-Dateien
JPEG-Dateien
TIFF-Dateien
Vasa-Dateien
Bitmap-Dateien (WAP)
Freehand-Dateien
PBM Anymap-Dateien
PBM Bitmap-Dateien
PBM Graymap-Dateien
PBM Pixmap-Dateien
RGB-Dateien
X-Windows Dump
XBM-Dateien
XPM-Dateien
Nachricht mit externem Inhalt
HTTP-Headernachricht
Newsgroup-Nachricht
Nachricht mit Teilinhalt
Nachricht nach RFC 1822
Visualisierung virtueller Welten
mehrteilige Daten gemischt
mehrteilige Daten mit Byte-Angaben
mehrteilige Daten / Auswahl
mehrteilige Daten verschlsselt
mehrteilige Daten aus HTML-Formular
(z.B. File-Upload)
mehrteilige Daten gemischt
mehrteilige Daten parallel
mehrteilige Daten / verbunden
mehrteilige Daten / Bericht
mehrteilige Daten / bezeichnet
mehrteilige Daten / Sprachnachricht
kommaseparierte Datendateien
CSS Stylesheet-Dateien
HTML-Dateien
JavaScript-Dateien
reine Textdateien
Richtext-Dateien
Microsoft RTF-Dateien
tabulatorseparierte Datendateien
WML-Dateien (WAP)

A.3 Sprachenkrzel
Mime-Typ

Dateiendung(en)

application/vnd.wap.wmlc
text/vnd.wap.wmlscript
application/vnd.wap.wmlscriptc

*.wmlc
*.wmls
*.wmlsc

text/xml-external-parsed-entity
text/x-setext
text/x-sgml
text/x-speech
video/mpeg
video/quicktime
video/vnd.vivo
video/x-msvideo
video/x-sgi-movie
workbook/formulaone
x-world/x-3dmf
x-world/x-vrml

A.3

*.etx
*.sgm *.sgml
*.talk *.spc
*.mpeg *.mpg *.mpe
*.qt *.mov
*viv *.vivo
*.avi
*.movie
*.vts *.vtts
*.3dmf *.3dm *.qd3d
*.qd3
*.wrl

1183

Bedeutung
WMLC-Dateien (WAP)
WML-Scriptdateien (WAP)
WML-Script-C-Dateien (WAP)
extern geparste XML-Dateien
SeText-Dateien
SGML-Dateien
Speech-Dateien
MPEG-Dateien
Quicktime-Dateien
Vivo-Dateien
Microsoft AVI-Dateien
Movie-Dateien
FormulaOne-Dateien
3DMF-Dateien
VRML-Dateien

Sprachenkrzel

Sprachenkrzel nach RFC 1766

Die in den W3-Spezifikationen immer wieder erwhnte Angabe von Sprachenkrzeln wird in
der RFC 1766 definiert. Diese Sprachenkrzel basieren auf den Normen ISO 639-1 zur Kurzbezeichnung von Sprachen und ISO 3166-1 zur Kurzbezeichnung von Lnder. Diese von den beiden ISO-Normen vordefinierten Krzel erlauben solche Angaben wie de fr Deutsch, en fr
Englisch oder en-US fr US-Englisch. Die RFC 1766 erlaubt darber hinaus, feinere Abstufungen fr schriftkulturelle, dialektale oder andere lokale Ausprgungen der gleichen Sprache registrieren zu lassen, so z.B. die beiden norwegischen Schriftsprachenvarianten, notiert durch no-nyn
und no-bok (wobei diese in Langform no-nynorsk und no-bokmaal in der RFC 1766 beispielhaft aufgezhlten Krzel zwischenzeitlich veraltet sind, da es mittlerweile die zweibuchstabigen Krzel nn und nb gibt). Fr Sprachen, die in mehreren Lndern oder von bestimmten
Gruppen gesprochen werden, und bei denen die Lnderzuordnung deshalb problematisch ist,
wird das einbuchstabige Startkrzel i reserviert. Die Reservierung erfolgt durch die InternetBehrde IANA (www.iana.org/). So werden Bezeichnungen wie i-mingo (eine Sprache der Irokesen) mglich. Bei der Reservierung beweist IANA Humor: Auch das Sprachkrzel x-klingon
(fr Klingonisch aus dem Kultserie Startrek) wurde registriert. Auerdem wird ein Startkrzel x fr den privaten Gebrauch reserviert, wodurch Sprachenkrzel wie x-selfhtml (fr
SELFHTMLisch) bezeichnet werden knnen.
Mittlerweile gibt es die RFC 3066, nach der auch dreibuchstabige Sprachenkrzel nach der Norm
ISO 639-2 erlaubt sind, etwa nds fr Niederdeutsch. Die HTML- und CSS-Spezifikationen des
W3-Konsortiums beziehen sich an den relevanten Stellen jedoch noch auf die ltere RFC 1766.
Fr XML gilt die RFC 3066. Ebenso gibt es eine neuere Norm ISO 3166-2, die mehrbuchstabige

1184

Anhang A: Technische Ergnzugen

Lndercodes enthlt. Mageblich fr Internet-Belange sind aber in den meisten Fllen noch die
lteren, zweibuchstabigen Krzel.
Fr Web-Autoren haben die Sprachenkrzel an folgenden Stellen Bedeutung:
Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe einer
Sprache erwarten. So gibt es das Universalattribut lang=, und ebenfalls erwartet wird eine
Sprachangabe bei den Elementen (Attributen) a (hreflang=) und link (hreflang=).
In JavaScript haben die Sprachenkrzel beispielsweise bei der Eigenschaft navigator.
language Bedeutung.
Im Zusammenhang mit der CGI-Schnittstelle gibt es die Umgebungsvariable HTTP_ACCEPT_
LANGUAGE, in der solche Sprachenkrzel verwendet werden.
Lnderkrzel nach ISO 3166 werden auch noch an anderen Stellen eingesetzt, so etwa bei den
landesspezifischen Top-Level-Domains, wie sie beispielsweise in den Statistiken zu einem WebProjekt auftauchen knnen.

bersicht zu Sprachenkrzeln nach ISO 639-1

Die folgenden Sprachenkrzel knnen Sie auch berall dort verwenden, wo Angaben nach RFC
1766 gefordert sind. In den meisten Fllen reichen die Original-Sprachenkrzel nach ISO 639-1
zur Bezeichnung der Sprache auch vollkommen aus. Die Tabelle ist nach Krzeln alphabetisch
sortiert und erhebt keinen Anspruch auf aktuelle Vollstndigkeit. Streichungen, Ergnzungen,
Neueintrge von Sprachenkrzeln notiert die Library of Congress (dokumentiert auf der
SeiteISO 639-2/RA Change Notice, lcweb.loc.gov/standards/iso639-2/codechanges.html).
Krzel

Bedeutung

Krzel

Bedeutung

Krzel

Bedeutung

aa

Afar
Amharisch
Aymara
Belorussisch
Bislamisch
Bretonisch
Tschechisch
Deutsch
Englisch
Estnisch
Finnisch
Franzsisch
Schottisches Glisch
Gujaratisch
Hindi
Armenisch
Interlingue

ab

Abchasisch
Arabisch
Aserbaidschanisch
Bulgarisch
Bengalisch
Katalanisch
Walisisch
Dzongkha, Bhutani
Esperanto
Baskisch
Fiji
Friesisch
Galizisch
Haussa
Kroatisch
Interlingua
Inupiak

af

Afrikaans
Assamesisch
Baschkirisch
Biharisch
Tibetanisch
Korsisch
Dnisch
Griechisch
Spanisch
Persisch
Farisch
Irisch
Guarani
Hebrisch
Ungarisch
Indonesisch
Islndisch

am
ay
be
bi
br
cs
de
en
et
fi
fr
gd
gu
hi
hy
ie

ar
az
bg
bn
ca
cy
dz
eo
eu
fj
fy
gl
ha
hr
ia
ik

as
ba
bh
bo
co
da
el
es
fa
fo
ga
gn
he
hu
id
is

A.3 Sprachenkrzel

1185

Krzel

Bedeutung

Krzel

Bedeutung

Krzel

Bedeutung

it

Italienisch

iu

Inuktitut (Eskimo)

iw

ja

Japanisch

ji

jv

ka

Georgisch

kk

Jiddish (veraltet, nun:

yi)
Kasachisch

Hebrisch (veraltet, nun: he)

Javanisch

km

Kambodschanisch
Kaschmirisch
Lateinisch
Litauisch
Maorisch
Mongolisch
Malaysisch
Nauruisch
Norwegisch
Orija
Paschtu
Rtoromanisch
Russisch
Zinti

kn

Kannada
Kurdisch
Lingala
Lettisch
Mazedonisch
Moldavisch
Maltesisch
Nepalisch
Okzitanisch
Pundjabisch
Portugiesisch
Kirundisch
Kijarwanda
Sango

ko

Singhalesisch
Samoanisch
Albanisch
Sesothisch
Suaheli
Tadschikisch
Turkmenisch
Tongaisch
Tatarisch
Ukrainisch
Vietnamesisch
Xhosa
Zhuang

sk

Slowakisch
Schonisch
Serbisch
Sudanesisch
Tamilisch
Thai
Tagalog
Trkisch
Twi
Urdu
Volapk
Jiddish
Chinesisch

sl

ks
la
lt
mi
mn
ms
na
no
or
ps
rm
ru
sd
si
sm
sq
st
sw
tg
tk
to
tt
uk
vi
xh
za

ku
ln
lv
mk
mo
mt
ne
oc
pa
pt
rn
rw
sg

sn
sr
su
ta
th
tl
tr
tw
ur
vo
yi
zh

kl

ky
lo
mg
ml
mr
my
nl
om
pl
qu
ro
sa
sh

so
ss
sv
te
ti
tn
ts
ug
uz
wo
yo
zu

Kalaallisut
(Grnlndisch)
Koreanisch
Kirgisisch
Laotisch
Malagasisch
Malajalam
Marathi
Burmesisch
Hollndisch
Oromo
Polnisch
Quechua
Rumnisch
Sanskrit
Serbokroatisch
(veraltet)
Slowenisch
Somalisch
Swasilndisch
Schwedisch
Tegulu
Tigrinja
Sezuan
Tsongaisch
Uigur
Usbekisch
Wolof
Joruba
Zulu

bersicht zu Lnderkrzeln nach ISO 3166

Falls Sie solche Lnderkrzel fr zusammengesetzte Sprachenkrzel benutzen, um Lndervarianten von Sprachen zu bezeichnen, also etwa en-US oder de-CH, dann notieren Sie das Lnderkrzel in Grobuchstaben. In anderen Zusammenhngen, etwa bei Toplevel-Domains, werden
die Lnderkrzel dagegen klein geschrieben.
Die Tabelle ist nach Krzeln alphabetisch sortiert und erhebt keinen Anspruch auf aktuelle
Vollstndigkeit. Das Sekretariat dieser ISO-Norm hat das Deutsche Institut fr Normung e.V.

1186

Anhang A: Technische Ergnzugen

(DIN) bernommen. Dort finden Sie auch eine aktuelle Liste mit English country names and code
elements (www.din.de/gremien/nas/nabd/iso3166ma/codlstp1/en_listp1.html).
Krzel

Bedeutung

Krzel

Bedeutung

Krzel

Bedeutung

AD

Andorra

AE

AF

Afghanistan

AG

Antigua und Barbuda

Armenien

AI

AL

Albanien
Angola

Antarktis
sterreich
Aserbaidschan
Bangladesh
Bulgarien
Benin
Bolivien
Bhutan
Weiruland
Kokosinseln

AR

Schweiz
Chile
Kolumbien

CI

Vereinigte Arabische
Emirate
Anguilla
Niederlndische
Antillen
Argentinien
Australien
Bosnien-Herzegowina
Belgien
Bahrain
Bermudas
Brasilien
Bouvet Inseln
Belize
Zentralafrikanische
Republik
Elfenbeinkste
Kamerun
Costa Rica

Kuba
Zypern
Djibuti
Dominikanische
Republik
Estland
Eritrea
Finnland
Mikronesien
Frankreich (nur
Europa)
Grenada
Ghana
Gambia
quatorial Guinea

CV

Kap Verde
Tschechische Republik
Dnemark
Algerien

CX

gypten
Spanien
Fidschi Inseln
Frer Inseln
Gabun

EH

Georgien
Gibraltar
Guinea
Griechenland

GF

Guatemala
Guyana

GU

Guam
Hong Kong

GW

AM
AQ
AT
AZ
BD
BG
BJ
BO
BT
BY
CC
CH
CL
CO
CU
CY
DJ
DO
EE
ER
FI
FM
FX
GD
GH
GM
GQ

GT
GY

AN

AU
BA
BE
BH
BM
BR
BV
BZ
CF

CM
CR

CZ
DK
DZ
EG
ES
FJ
FO
GA
GE
GI
GN
GR

HK

AO
AS
AW
BB
BF
BI
BN
BS
BW
CA
CG
CK
CN
CS

DE
DM
EC

ET
FK
FR
GB

GL
GP
GS

HM

Samoa
Aruba
Barbados
Burkina Faso
Burundi
Brunei
Bahamas
Botswana
Kanada
Kongo
Cook Inseln
China
Tschechoslowakei
(obsolet)
Christmas Island
Deutschland
Dominika
Ecuador
Westsahara
thiopien
Falkland Inseln
Frankreich
Grobritannien (UK)
franzsisch Guyana
Grnland
Guadeloupe
South Georgia und
South Sandwich
Islands
Guinea Bissau
Heard und
McDonald Islands

A.3 Sprachenkrzel

1187

Krzel

Bedeutung

Krzel

Bedeutung

Krzel

Bedeutung

HN

Honduras
Ungarn
Israel

HR

Kroatien
Indonesien
Indien

HT

Irak
Italien
Japan
Kambodscha
St. Kitts Nevis
Anguilla
Kuwait
Laos
Liechtenstein
Lesotho
Lettland
Monaco
Marshall Inseln
Birma
Marianen
Montserrat
Malediven
Malaysia
Neukaledonien
Nigeria
Norwegen
Niue
Panama

IR

Iran
Jamaika
Kenia
Kiribati
Nord Korea

IS

Haiti
Irland
Britisch-Indischer
Ozean
Island
Jordanien
Kirgisistan
Komoren
Sd Korea

Kaiman Inseln
Libanon
Sri Lanka
Litauen
Libyen
Moldavien
Mazedonien
Mongolei
Martinique
Malta
Malawi
Mocambique
Niger
Nicaragua
Nepal
Neuseeland
Peru

KZ

Papua Neuguinea
Polen

PH

PK

Puerto Rico
Paraguay
Rumnien
Saudi Arabien
Sudan
St. Helena

PT

SI

Philippinen
St. Pierre und
Miquelon
Portugal
Qatar
Russland
Solomon Inseln
Schweden
Slowenien

Slowakei (slowakische
Republik)
Senegal
Sao Tome

SL

Sierra Leone

SM

SO

Somalia
Sowjet- Union
(obsolet)

SR

HU
IL
IQ
IT
JP
KH
KN
KW
LA
LI
LS
LV
MC
MH
MM
MP
MS
MV
MY
NC
NG
NO
NU
PA
PG
PL
PR
PY
RO
SA
SD
SH
SK
SN
ST

ID
IN

JM
KE
KI
KP
KY
LB
LK
LT
LY
MD
MK
MN
MQ
MT
MW
MZ
NE
NI
NP
NZ
PE

PM

QA
RU
SB
SE

SU

IE
IO

JO
KG
KM
KR

LC
LR
LU
MA
MG
ML
MO
MR
MU
MX
NA
NF
NL
NR
OM
PF

PN
PW
RE
RW
SC
SG
SJ

SV

Kasachstan
Saint Lucia
Liberia
Luxemburg
Marokko
Madagaskar
Mali
Macao
Mauretanien
Mauritius
Mexiko
Namibia
Norfolk Inseln
Niederlande
Nauru
Oman
franzsisch
Polynesien
Pakistan
Pitcairn
Palau
Reunion
Ruanda
Seychellen
Singapur
Svalbard und Jan
Mayen Islands
San Marino
Surinam
El Salvador

1188

Anhang A: Technische Ergnzugen

Krzel

Bedeutung

Krzel

Bedeutung

Krzel

Bedeutung

SY

Syrien

SZ

Swasiland

TC

TD

Tschad

TF

TG

TH

Thailand
Turkmenistan
Timor
Tuvalu
Ukraine
US kleinere Inseln
auerhalb
Usbekistan
Venezuela
Vietnam
Samoa
Jugoslawien (obsolete)
Zaire

TJ

Franzsisches Sd
Territorium
Tadschikistan
Tunesien
Trkei
Taiwan
Uganda
Vereinigte Staaten von
Amerika
Vatikan
Virgin Island (Brit.)
Vanuatu
Jemen
Sdafrika
Zimbabwe

Turks und Kaikos

Inseln
Togo

TM
TP
TV
UA
UM
UZ
VE
VN
WS
YU
ZR

TN
TR
TW
UG
US
VA
VG
VU
YE
ZA
ZW

TK
TO
TT
TZ
UK
UY
VC
VI
WF
YT
ZM

Tokelau
Tonga
Trinidad Tobago
Tansania
Grobritannien
Uruguay
St. Vincent
Virgin Island (USA)
Wallis et Futuna
Mayotte
Sambia

Beispiele fr zusammengesetzte Sprachenkrzel

Die folgenden Beispiele zeigen ein paar Beispiele fr zusammengesetzte Sprachenkrzel, wie sie
nach RFC 1766 erlaubt sind:
Krzel

Bedeutung

de-CH

Schweizerdeutsch
sterreichisches Deutsch
amerikanisches Englisch
kanadisches Englisch
australisches Englisch
britisches Englisch
kniglich-britisches Englisch
Gallisch
kanadisches Franzsisch
Taiwan-Chinesisch
Mandarin-Chinesisch
Min-Nan-Chinesisch
Xiang-Chinesisch

de-AT
en-US
en-CA
en-AU
en-GB
en-UK
cel-gaulish
fr-CA
zh-TW
zh-guoyu
zh-min-nan
zh-xiang

A.4 Client-Identifikationen

A.4

1189

Client-Identifikationen

Allgemeines zu Client-Identifikationen
Wenn ein Web-Browser oder ein Suchrobot oder der Agent eines Proxy-Servers bei einem WebServer Daten anfordert, schickt er immer auch eine Zeichenkette mit, mit der er sich dem WebServer gegenber namentlich vorstellt. Ein einheitliches oder standardisiertes Schema dafr ist
in der Spezifikation zu HTTP 1.1 definiert worden. Nach der Ankndigung der Vorstellung eines
User-Agents (das ist der Oberbegriff fr die anfangs genannten Programme, die Daten anfordern knnen) wird wenigstens ein Hinweis auf das Produkt oder ein Kommentar bersandt.
Nicht definiert ist die fr die Praxis notwendige Unterscheidung zwischen verschiedenen Produktversionen oder -typen. Das ist bedauerlich. In der Praxis hat sich eine gewisse Regel herausgeschlt: Produktname und Produktversion werden in dieser Reihenfolge und durch Schrgstrich getrennt dargestellt. Es halten sich allerdings nicht alle Browser an dieses Schema. Einige
Browser-Typen geben sich als andere aus, und wieder andere erlauben es auch dem Anwender an
der Programmoberflche, eine beliebige Identifikation einzustellen. Wenn der Anwender dann
seinen Namen oder irgendeinen Unsinn eingibt, meldet sich der Browser damit beim Server an.
Dennoch wird die Client-Identifikation an verschiedenen Stellen gespeichert und kann in manchen Situationen zu ntzlichen Zwecken dienen:
In JavaScript gibt es das navigator-Objekt, das es beispielsweise erlaubt, so genannte Browser-Weichen zu programmieren, um bestimmte JavaScript-Anweisungen nur auszufhren,
wenn bestimmte Browser-Typen am Werk sind.
Ein CGI-Script kann die CGI-Umgebungsvariable HTTP_USER_AGENT auslesen, um herauszufinden, von welcher Client-Software es aufgerufen wurde. Auch dabei kann die Information
dazu genutzt werden, um bestimmte Anweisungen abhngig auszufhren oder nicht auszufhren.
Bei Statistiken zu einem Web-Projekt gibt es in der Regel auch eine Statistiksorte, die
Zugriffszahlen nach Browser-Typen sortiert aufschlsselt. Grundlage dafr sind ebenfalls die
Client-Identifikationen, die der Web-Server bei den Aufrufen erhalten hat.

Client-Identifikationen von Netscape-Browsern

Netscape gibt sich seit jeher mit dem Namen Mozilla aus. Eindeutig erkennbar ist er daran
allerdings berhaupt nicht, denn der Internet Explorer gibt sich beispielsweise ebenfalls als
Mozilla aus. Die folgenden Beispiele zeigen einige typische Identifikationen, die jedoch nur fr
Netscape typisch sind.
Mozilla/2.0(Macintosh;I;PPC)
Mozilla/2.0(Win16;I)
Mozilla/3.01Gold[de](Win16;I)
Mozilla/4.03 [en] (X11; I; Linux 2.0.30 i686)
Mozilla/4.01 [en] (Win95; I)
Mozilla/4.01 [en]C-CCK-MCD (WinNT; I)

1190

Anhang A: Technische Ergnzugen

Mozilla/4.01 [en]C-FedExIntl (Win95; I)

Mozilla/4.5 [en] (X11; I; SunOS 5.6 sun4d)
Mozilla/4.6 [en] (X11; I; FreeBSD 3.2-RELEASE i386)
Mozilla/5.0 [en] (WinNT; I)
Mozilla/5.0b1 [en] (X11; N; Linux 2.2.0 alpha; Nav)
Das grundstzliche Schema fr Produktname und Version wird also eingehalten die Identifikation startet immer mit Mozilla/[Versionsangabe]. Damit ist er allerdings noch nicht von
vielen anderen Browsern unterscheidbar! Die Versionsangabe kann auch Zusatzangaben enthalten wie 5.0b1 (was eigentlich fr Version 6.0 steht, da Version 5.0 bersprungen wurde, und
b1 steht fr Betaversion 1). Auch andere Zustze wie 3.01Gold knnen vorkommen (Gold
stand seinerzeit fr die erste Variante des Netscape-Browsers, die zugleich Wysiwyg-Editieren
erlaubte, also ein Vorlufer des Netscape Composer).
Hinter der Versionsangabe kann in eckigen Klammern ein Sprachenkrzel folgen, das die Sprache der Browser-Bedienelemente angibt. Das Sprachenkrzel ist bei neueren Versionen zwar
Standard, aber es kann auch mal fehlen. In runden Klammern folgen anschieend weitere
Informationen. Mehrere davon werden durch Semikolon voneinander getrennt. Zunchst wird
die verwendete Plattform genannt. Dabei sind Abkrzungen wie Win95, Win98 oder WinNT fr
entsprechende Windows-Versionen mglich. Bei allen Unix-basierten Systemen wird an der
Stelle meistens X11 angegeben, was fr X-Windows steht, und bei Mac-Rechnern Macintosh.
An zweiter Stelle innerhalb der runden Klammern folgt ein Grobuchstabe, der das SicherheitsLevel des Browsers bezeichnet (Lnge von Schlsseln). Ein U steht fr US-konform, ein I fr
international. Wofr das N im letzten der obigen Beispiele steht, war nicht zu ermitteln. Hinter
dem Sicherheitskennzeichen folgen dann noch beschreibende Informationen zum verwendeten
Prozessortyp und/oder nhere Angaben zum Betriebssystem. Alle Teile knnen Leerzeichen dazwischen haben, aber zwingend ist dies nicht.

Client-Identifikationen des MS Internet Explorers

Der Internet Explorer gibt sich in seiner Browser-Identifikation deutlich weniger selbstbewusst
als sonst. Er versteckt sich stets hinter dem gleichen Codenamen wie die Netscape-Browser, gibt
zunchst eine Versionsnummer an, die sich auf Netscape bezieht, und rckt dann, durch das
Schlsselwort compatible eingeleitet, mit den Informationen ber sich selber heraus. Die folgenden Beispiele zeigen einige typische Identifikationen des Internet Explorers.
Mozilla/1.22(compatible;MSIE2.01;WindowsNT)
Mozilla/2.0(compatible;MSIE3.0;AK;Windows95)
Mozilla/2.0(compatible;MSIE3.02;Updatea;AK;AOL3.0;Windows95)
Mozilla/4.0 (compatible; MSIE 4.0; Windows 95;BPH01)
Mozilla/4.0 (compatible; MSIE 4.0; Mac_68000)
Mozilla/4.0 (compatible; MSIE 4.0; Mac_PowerPC; e412354MCICDV4.0)
Mozilla/4.0 (compatible; MSIE 4.0b2; Windows 95)

A.5 Client-Identifikationen anderer Browser

1191

Mozilla/4.0 (compatible; MSIE 5.0; AOL 4.0; Windows 95)

Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98)

Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

Das grundstzliche Schema fr Produktname und Version folgt dem von Netscape und wird also
eingehalten die Identifikation startet immer mit Mozilla/[Versionsangabe]. Die Versionsangabe dahinter bedeutet, zu welcher Netscape-Browser-Version sich der ausgewiesene Internet
Explorer fr voll kompatibel hlt. Das ist natrlich immer mit gewissen Vorbehalten zu
genieen, denn ein Internet Explorer hat beispielsweise zu keinem Zeitpunkt je das layerElement in HTML interpretiert, also ist die Behauptung der Kompatibilitt zu Netscape 4.0 nicht
unbedingt haltbar. Von daher bringt die Versionsangabe hinter dem Mozilla/ beim Internet
Explorer keine wirkliche Erkenntnis.
Seine eigentliche Identitt verrt der Internet Explorer erst in den runden Klammern. Diese enthalten normalerweise mehrere Angaben, durch Semikolon getrennt. Der erste Teil ist stets das
Schlsselwort compatible. Dahinter folgen die vier Grobuchstaben MSIE, die eigentlich den
Bezug zum Internet Explorer herstellen. Dahinter folgt die genaue Versionsangabe.
Alle weiteren Angaben knnen differieren und eine unterschiedliche Reihenfolge haben. Bei
Betriebssystembezeichnungen fllt auf, dass Windows durchweg ausgeschrieben ist, whrend
Macintosh-Versionen des Internet Explorers sich blicherweise mit Mac plus Unterstrich plus
nhere Bezeichnung ausgeben. Wenn es sich um eine Browser-Distribution eines Online-Dienstes wie AOL oder MSN handelt, wird dies in einem Zusatzeintrag wie AOL 4.0 verzeichnet. Alle
Teile knnen Leerzeichen dazwischen haben, aber zwingend ist dies nicht, besonders bei lteren
Versionen nicht.

A.5

Client-Identifikationen anderer Browser

Die folgenden Beispiele zeigen typische Identifikationen einiger anderer Browser-Typen.

Mozilla/1.2 (Opera/2.02)
Mozilla/3.0 (compatible; Opera/3.0; Windows 95) 3.51
Mozilla/3.0 (Windows 4.10;US) Opera 3.60 [en]
DosLynx/0.8a
Lynx 2.4-FM
Lynx 2.5 libwww-FM/2.14
Lynx 2.9 (compatible Interactive Tcl/Tk News Ticker v0.06)
Lynx/2-4-2 MU-MODS
Lynx_ALynx/2.4 AmigaPort/1.29
amaya/V2.0a libwww/5.2.1
AIR_Mosaic(16bit)/v3.10.198.18

1192

Anhang A: Technische Ergnzugen

IBM WebExplorer DLL /v1.1

IBrowse/1.2 (AmigaOS 3.1)
iCab/Pre1.4 (Macintosh; I; PPC)
Die Beispiele zeigen, wie uneinheitlich die unterschiedlichen Browser-Typen sich identifizieren,
was die Auswertung nicht gerade erleichtert. In der Regel hilft beim Analysieren beispielsweise
mit einem Script nur, im ersten Schritt nach einschlgigen Schlsselwrtern wie Opera, Mosaic,
amaya, Lynx oder ICab zu suchen. Im zweiten Schritt knnen Sie dann versuchen, durch Suchen
nach Teilausdrcken wie Win, Mac, Amiga usw. das Betriebssystem herauszufinden.

Client-Identifikationen von Such-Robots und Proxy-Agenten

Es gibt kein Patentrezept, um menschliche Seitenbesucher von Softwareprogrammen zu
unterscheiden, die beim Aufrufen der Web-Seiten im Batchbetrieb arbeiten und beispielsweise
die Daten fr ihre Suchmaschine indizieren oder Dateien an einen Proxy-Rechner bertragen.
Die folgenden Beispiele zeigen ein paar typische Identifikationen solcher Programme.
Eule Robot v3.00 (www.eule.de)
FAST-WebCrawler/0.3 ([email protected])
Googlebot/1.0 ([email protected] http://googlebot.com/)
JCrawler/0.3 (robot; [email protected])
Netscape-Proxy/3.52 (Batch update)
Openfind Robot/1.1A2
W3CRobot/4.0D
WebCrawler/2.0
Lycos_Spider_(T-Rex)/3.0
Aladin/3.324
taz.northernlight.com Gulliver/1.3
Openfind Robot/1.1A2
KIT-Fireball/2.0
URL-Minder/2.4.5
Bei Suchmaschinen-Robots gibt es zumindest einige Anhaltspunkte, nach denen sich eine Identifikationszeichenkette durchsuchen lsst. Solche Robots identifizieren sich oft mit Schlsselwrtern wie Robot, Spider oder Crawler. Viele von ihnen tragen im Namen auch den Namen
des zugehrigen Suchdienstes. In den obigen Beispielen sind etwa Google, Fireball, Lycos,
Eule, Northernlight und Aladin erkennbar. Generell sind Robots und auch Agenten von
Proxy-Servern hufig daran erkennbar, dass sie bei der Identifikation einen Domain-Namen,
einen URI oder eine E-Mail-Adresse angeben.

A.6 robots.txt Robots kontrollieren

A.6

1193

robots.txt Robots kontrollieren

Allgemeines zur robots.txt

Es gibt De-facto-Standards im Internet, die einfach gewachsen sind, ohne es je zu einer RFC gebracht zu haben. Dazu gehrt auch der Status, den die Datei robots.txt im Web hat. In einer
Datei dieses Namens knnen Betreiber von Web-Projekten angeben, welcher Suchrobot welche
Projektverzeichnisse auslesen darf und welcher was nicht lesen darf. Die Datei enthlt also
Anweisungen fr Robots von Suchmaschinen. Die berwiegende Mehrheit der Robots moderner
Suchmaschinen bercksichtigen das Vorhandensein einer robots.txt, lesen sie aus und befolgen
die Anweisungen.
Zwar lsst sich auch in einzelnen HTML-Dateien mit Hilfe eines Meta-Tags fr Suchprogramme
das Auslesen erlauben bzw. verbieten (Kapitel 4.1.2). Doch das betrifft nur die jeweilige HTMLDatei und maximal alle weiteren, durch Verweise erreichbaren Dateien. In einer zentralen robots.txt
knnen Sie dagegen unabhngig von der Datei- und Verweisstruktur Ihres Web-Projekts festlegen,
welche Verzeichnisse und Verzeichnisbume ausgelesen werden drfen und welche nicht.

Speicherort und Aufbau einer robots.txt

Die robots.txt muss unter diesem Namen (alle Buchstaben klein geschrieben) im Wurzelverzeichnis der Web-Dateien der Domain abgelegt werden. Wenn Sie also einen Domain-Namen
mein-name.de haben, dann muss die robots.txt in dem Verzeichnis abgelegt werden, in dem
auch die oberste Einstiegsdatei von www.mein-name.de liegt. Der URI wre also http://
www.mein-name.de/robots.txt. Nur so kann sie von Suchmaschinen-Robots, die das Projekt
aufsuchen, gefunden werden. Das bedeutet, dass Sie die Technik der robots.txt nur nutzen
knnen, wenn Sie eine eigene Domain haben, nicht aber bei Webspace-Angeboten, wo Sie
lediglich ein Homepage-Verzeichnis auf einem Server erhalten, ohne an das Wurzelverzeichnis
der Domain zu kommen. Die robots.txt ist eine reine Textdatei und muss mit einem Texteditor
bearbeitet werden.
Beispiel: robots.txt:
# robots.txt zu http://www.mein-name.de/
User-agent: UniservalRobot/1.0
User-agent: mein-Robot
Disallow: /quellen/dtd/
Allow: /quellen/dtd/index.html
User-agent: *
Disallow: /unsinn/
Disallow: /temp/
Disallow: /newsticker.shtml

Die erste Zeile ist lediglich eine Kommentarzeile. Kommentarzeilen werden durch ein Gatterzeichen # eingeleitet. Ansonsten besteht eine robots.txt aus Datenstzen (records). Im obigen Beispiel sind zwei solcher Datenstze notiert. Ein Datensatz besteht grundstzlich aus zwei Teilen.
Im ersten Teil wird angegeben, fr welche Robots (User-agent) die nachfolgenden Anweisun-

1194

Anhang A: Technische Ergnzugen

gen gelten. Im zweiten Teil werden die Anweisungen selbst notiert. Die Anweisungen bestehen
darin, den zuvor bestimmten Robots etwas zu verbieten (Disallow) oder zu erlauben (Allow).
Jede Zeile eines Datensatzes beginnt mit einem der drei erlaubten Schlsselwrter User-agent,
Disallow oder Allow. Dahinter folgt, durch ein Doppelpunkt und Leerzeichen getrennt, die
zugehrige Angabe. Zwischen den Datenstzen wird eine Leerzeile notiert. Innerhalb eines Datensatzes muss zunchst mindestens eine Zeile mit User-agent: beginnen. Dahinter ist immer
nur eine Angabe mglich. Wenn Sie mehr als einen bestimmten Robot ansprechen mchten,
mssen Sie mehrere Zeilen untereinander notieren, die mit User-agent: beginnen so wie im
ersten Datensatz des obigen Beispiels. Unterhalb der Zeilen, die mit User-agent: beginnen,
werden die Zeilen notiert, die mit Disallow: oder Allow: beginnen. Die Angaben dazu werden
dann von den Robots beachtet, die im gleichen Datensatz mit User-agent spezifiziert wurden.
Bei User-agent: ist entweder die Angabe * (Stern-Zeichen) erlaubt, was so viel bedeutet wie
alle Robots, oder der Name eines bestimmten Robots. Diesen Namen mssen Sie allerdings
kennen. Wenn Sie * angeben, sollte in dem gleichen Datensatz keine weitere Angabe zu Useragent folgen, da dies dem Platzhalter fr alle widersprechen wrde.
Hinter jeder Zeile, die mit Disallow: oder Allow: beginnt, knnen Sie jeweils eine Pfadangabe
notieren. Benutzen Sie im Zweifelsfall so viel wie mglich die Angabe Disallow: und so wenig
wie mglich die Angabe Allow:. Der Grund ist, dass Disallow: frher in die Spezifikation der
robots.txt aufgenommen wurde und von mehr Robots verstanden wird als Allow:.
Bei den Angaben zu Disallow: und Allow: knnen Sie Verzeichnispfade und einzelne Dateien
mit Pfadangabe angeben. Wildcards wie * oder *.* sind dabei nicht erlaubt. Achten Sie darauf,
bei Verzeichnispfaden einen abschlieenden Schrgstrich / zu notieren. Wenn Sie nmlich beispielsweise /index notieren, wre auch die Datei /index.html betroffen, und nicht nur das
Unterverzeichnis /index/.
Im ersten der obigen Beispieldatenstze wird angenommen, dass ein superschlauer Robot
namens UniversalRobot/1.0 sowie ein selbst gestrickter Robot namens mein-Robot Daten aus
dem Verzeichnis /quellen/dtd/ in ihre Suchmaschinen einspeisen. Das ist aber nicht erwnscht,
weil in diesem Verzeichnis beispielsweise DTDs fr XML-Dateien abgespeichert sind. Deshalb
wird speziell diesen beiden Robots der Zugriff auf dieses Verzeichnis (und alle Unterverzeichnisse davon) verboten. Nur die Datei index.html, die im Verzeichnis fr die DTDs ebenfalls
abgelegt ist, drfen die beiden Robots trotzdem auslesen.
Im zweiten Datensatz wird allen Robots verboten, die beiden Unterverzeichnisse /unsinn/ und
/temp/ auszulesen. Die Verzeichnisnamen sprechen ja fr sich, und es ist leicht ersichtlich, wozu
dieses Verbot gut ist: nmlich um berflssigen Datenmll in den groen Suchmaschinen zu
vermeiden. Ferner wird der Zugriff auf die Datei newsticker.shtml verboten. Der Grund
knnte sein, dass diese Datei von einem ber Server Side Includes eingebundenen CGI-Script
laufend aktuelle Daten erhlt, weswegen es keinen Sinn macht, diese Datei in Suchmaschinen
aufzunehmen.
Beachten Sie: Mit der folgenden Syntax erlauben Sie keinem Suchmaschinen-Robot, auch nur
irgendetwas von Ihren Daten auszulesen. Mit / bestimmen Sie alle Daten dieses Verzeichnisses
und aller Unterverzeichnisse:
User-agent: *
Disallow: /

A.7 .htaccess Server-Reaktionen kontrollieren

1195

Mit der folgenden Syntax nehmen Sie einen bestimmten Robot namens mein-Robot von allen
anderen Verboten aus:
User-agent: mein-Robot
Disallow:

Durch eine fehlende Angabe hinter Disallow: wird alles erlaubt! Web-Browser ignorieren die
robots.txt. Es ist also nicht mglich, damit Daten vor Anwendern zu schtzen. Lesen Sie zu
diesem Zweck den folgenden Abschnitt .htaccess Server-Reaktionen kontrollieren.

A.7

.htaccess Server-Reaktionen kontrollieren

Allgemeines zu .htaccess-Dateien
.htaccess-Dateien sind Konfigurationsdateien fr Verzeichnisse, die zum Web-Angebot gehren.
So ist die .htaccess-Technik beispielsweise der bliche Weg, um nur bestimmten Benutzern den
Zugriff auf bestimmte Daten zu erlauben. .htaccess ist also die Antwort auf die immer wieder
gestellte Frage nach einem richtigen Passwortschutz. Doch mit .htaccess-Dateien knnen Sie
noch viel mehr anstellen, als Daten mit Passwrtern zu schtzen. So knnen Sie auch ganze
Benutzerkreise automatisch (ohne Passwortzugang) aussperren oder alle bis auf bestimmte aussperren. Sie knnen Optionen zum so genannten Verzeichnis-Browsing (Web-Browser ruft ein
Verzeichnis auf, in dem keine Default-Datei wie z.B. index.htm liegt) einstellen. Sie knnen
automatische Weiterleitungen einstellen oder eigene Regelungen fr den Fall von HTTP-Fehlermeldungen schaffen. Sie knnen sogar abhngig von bestimmten Bedingungen alternative
Inhalte servieren, beispielsweise Web-Seiten mit unterschiedlichen Landessprachen abhngig von
der Sprache des benutzten Web-Browsers ohne CGI, ohne JavaScript. Und schlielich knnen
Sie sogar einstellen, dass Daten komprimiert an den aufrufenden Browser bertragen werden.
Web-Server, die zum NCSA-Server kompatibel sind, kennen das Konzept der .htaccess-Dateien.
Heutzutage trifft das vor allem auf den immer dominanter werdenden und die De-facto-Standards im Web setzenden Web-Server Apache zu. Wenn auf Ihrem Server-Rechner also ein Apache Web-Server luft, dann knnen Sie die Technik der .htaccess-Dateien einsetzen. Falls Sie
nicht wissen, welche Web-Server-Software auf dem Rechner luft, wo Sie Ihr Web-Projekt
hosten, dann knnen Sie im Online-Angabot von SELFHTML bei selfhtml.teamone.de aktuell
den SELFHTML Server Watch benutzen, um es herauszufinden. Fragen Sie im Zweifelsfall Ihren
Provider oder Webmaster!
Dateien mit dem Namen .htaccess (das erste Zeichen ist ein Punkt) sind im Grunde Teil der
Konfiguration des Web-Servers. Der Web-Server verfgt zwar auch ber zentrale Konfigurationsdateien. Doch diese liegen normalerweise unterhalb des Programmverzeichnisses des WebServers und sind nicht unbedingt den Benutzern zugnglich, die ein Web-Projekt verwalten.
.htaccess-Dateien werden dagegen in dem Verzeichnisbereich abgelegt, in dem das Web-Angebot
liegt. Also dort, wo Sie Ihre HTML-Dateien, Grafikdateien usw. haben, knnen Sie also auch
.htaccess-Dateien ablegen.
Dass der Name .htaccess mit einem Punkt beginnt, ist eine Tradition aus der Unix-Welt. Dort
beginnen viele verzeichnisspezifische Konfigurationsdateien mit einem Punkt. Bekannt ist beispielsweise die Datei .profile. In der zentralen Konfiguration des Apache Web-Servers lsst sich

1196

Anhang A: Technische Ergnzugen

allerdings auch ein anderer Dateiname als .htaccess einstellen. .htaccess-Dateien sind reine
Textdateien, die mit einem Texteditor bearbeitet werden mssen. Wenn Sie Telnet- oder SSHZugang zu dem Server-Rechner haben, auf dem Ihr Web-Angebot liegt, knnen Sie solche
Dateien direkt auf dem Server erstellen und bearbeiten, indem Sie dort einen geeigneten
Texteditor aufrufen (auf Unix-Systemen z.B. den vi-Editor). Wenn Sie nur FTP-Zugang zu dem
Server-Rechner haben, knnen Sie eine solche Datei auf Ihrem lokalen PC mit einem Texteditor
erstellen und dann hochladen.
Sie knnen alle in diesem Abschnitt einzeln vorgestellten Mglichkeiten auch in einer .htaccessDatei kombinieren. So knnen Sie also beispielsweise zugleich einen Passwortschutz einrichten
und gleichzeitig Optionen zum Verzeichnis-Browsing oder fr das Senden alternativer Inhalte
notieren.
.htaccess-Dateien gelten stets fr das Verzeichnis, in dem Sie abgespeichert werden, sowie fr alle
Unterverzeichnisse davon und fr deren Unterverzeichnisse. Wenn Sie in einem der Unterverzeichnisse andere Regelungen wnschen, mssen Sie dort wiederum eine .htaccess-Datei abliegen. Die Angaben der jeweils aktuellen Datei berschreiben die Angaben aus den Verzeichnissen
oberhalb.

Verzeichnisse und Dateien mit Passwort schtzen

.htaccess-Dateien sind verzeichnisspezifisch. Speichern Sie die .htaccess-Datei also in dem Verzeichnis ab, in dem die geschtzten Daten liegen. Sie knnen wahlweise das ganze Verzeichnis
mit all seinen Unterverzeichnissen oder nur bestimmte Dateien oder Dateitypen schtzen. Sie
knnen den Passwortschutz auerdem wahlweise fr einzelne Benutzer oder fr ganze Benutzergruppen einrichten. Auch Kombinationen beider Formen sind mglich. Damit der Verzeichnisschutz mit Passwort funktioniert, gengt die .htaccess-Datei alleine allerdings nicht. Sie brauchen
zustzlich eine Datei, in der die Benutzer und ihre Passwrter stehen. Falls Sie mit Benutzergruppen arbeiten, bentigen Sie auerdem noch eine Datei, in der die Benutzergruppen definiert
werden. Auch diese beiden anderen Dateien werden mit einem Texteditor erstellt.
Beispiel: .htaccess-Datei
# .htaccess-Datei fuer Web-Verzeichnis /service
AuthType Basic
AuthName "Service-Bereich"
AuthUserFile /usr/verwaltung/web/.htusers
AuthGroupFile /usr/verwaltung/web/.htgroups
require user

Werner Dieter Heidi

require group Servicetechniker

Die erste Zeile der Beispieldatei ist lediglich ein Kommentar. Solche Kommentarzeilen mssen
mit dem Gatterzeichen # eingeleitet werden. Alle anderen Zeilen haben einen einheitlichen Aufbau: Sie beginnen mit Schlsselwrtern, und dahinter folgen, durch ein oder mehrere Leerzeichen getrennt, Angaben dazu. Leerzeilen sind erlaubt. Zeilen mit Angaben, die der Web-Server
nicht interpretieren kann, fhren jedoch mglicherweise zu einem Internal Server Error
(HTTP-Statuscode 500).
Um einen Passwortschutz einzurichten, brauchen Sie die Schlsselwrter AuthType, AuthName,
AuthUserFile, und wenn Sie mit Benutzergruppen arbeiten, auch AuthGroupFile. Ferner

A.7 .htaccess Server-Reaktionen kontrollieren

1197

bentigen Sie eine oder mehrere Angaben zu dem Schlsselwort require. Mit AuthType wird
die Art der Authentifizierung bezeichnet. Die bliche Angabe ist Basic dabei stehen die Benutzer und Passwrter in einer noch anzugebenden Datei. Ein anderer denkbarer Authentifizierungstyp wre PGP (Pretty good privacy).
Bei AuthUserFile wird die Datei angegeben, in der die autorisierten Benutzer und ihre Passwrter stehen. Es muss der vollstndige absolute Pfadname angegeben werden, also nicht der
Pfad ab dem Wurzelverzeichnis Ihres Web-Projekts, sondern ab dem Wurzelverzeichnis des Server-Rechners. Fragen Sie dazu gegebenenfalls Ihren Provider oder Webmaster! Im Interesse der
Sicherheit ist es auch besser, die Datei mit den Benutzern und Passwrtern auerhalb des WebProjekts auf dem Server abzulegen. Aber nicht bei allen Hosting-Angeboten knnen Sie auf den
Server-Rechner auerhalb des eigenen Web-Projekts zugreifen. In diesem Fall sollten Sie fr die
Datei auf jeden Fall einen Dateinamen whlen, der mit .ht beginnt. Denn im Apache-Server werden solche Dateien per Voreinstellung vor Besuchern verborgen. Das Gleiche gilt fr die Gruppendatei, falls Sie mit Benutzergruppen arbeiten. Diese wird mit AuthGroupFile angegeben.
Bei require geben Sie als zweites Schlsselwort entweder user oder group an, je nachdem, ob
Sie einzelne Benutzer oder Benutzergruppen meinen. Dahinter knnen ein oder mehrere Namen
von Benutzern oder Benutzergruppen folgen. Im obigen Beispiel werden die drei Benutzer Werner Dieter Heidi sowie alle Benutzer der Gruppe Servicetechniker angegeben. Damit der
Passwortschutz funktioniert, mssen nun die angegebenen Dateien mit den Benutzern und den
Gruppen angelegt werden.
Beispiel: .htusers-Datei unter Unix
# Benutzerdatei fuer Web-Projekt
Werner:INY8//m5KMwIc
Manfred:Dionysos
Janine:INw2mPEH.owe2
Anke:INh6DHvyejvf2
Bernd:INboWuvjjwQ7E
Karin:INwOXOz96UQOU
Christina:INXo9kh0M.anc
Andreas:INeRD/cUQIFP6
Dieter:INUnlKdkNZ6RQ
Heidi:IN20ffIEEV1H6

Beispiel: .htusers-Datei z.B. unter Windows

# Benutzerdatei fuer Web-Projekt
Werner:Herakles
Manfred:Dionysos
Janine:Olympia
Anke:Hydra
Bernd:Poseidon
Karin:Hera
Christina:Athena
Andreas:Apollon
Dieter:Archilles
Heidi:Diana

1198

Anhang A: Technische Ergnzugen

Auch in solchen Dateien sind Kommentarzeilen erlaubt, eingeleitet durch #. Ansonsten enthlt
jede Zeile der Benutzerdatei einen Benutzernamen, und gleich dahinter, durch einen Doppelpunkt getrennt, das Passwort. Bei Unix-Systemen sind das aber nicht die Passwrter selbst, sondern die verschlsselten Passwrter. Dazu mssen Sie die Passwrter mit Hilfe des cryptMechanismus verschlsseln.
Beispiel: .htgroups-Datei
# Gruppendatei fuer Web-Projekt
Servicetechniker: Andreas Karin Janine

Gruppendateien bestehen aus Eintrgen, bei denen zunchst ein Gruppenname notiert wird und
dahinter, nach einem Doppelpunkt, die Namen von Benutzern, die zu dieser Gruppe gehren. Es
mssen Benutzernamen sein, fr die in der Benutzerdatei ein Eintrag angelegt wurde.
Die Gruppendatei wird im Beispiel nur bentigt, weil in der .htaccess-Datei eine Benutzergruppe
angegeben wurde. Whrend Sie die Benutzerdatei in jedem Fall brauchen, ist die Gruppendatei
nur erforderlich, wenn Sie Gruppennamen benutzen.
Effekt: Alle Besucher des Web-Projekts, die nun versuchen, auf das Verzeichnis mit der .htaccessDatei zuzugreifen, bekommen von ihrem Browser einen Dialog angeboten, in dem sie Benutzernamen und Passwort eingeben mssen. Nur Besucher, die sich mit einer gltigen Kombination
aus Benutzernamen und Passwort anmelden, haben Zugriff auf das Verzeichnis.
Erweiterte Mglichkeiten: So wie im obigen Beispiel gezeigt, gilt der Zugangsschutz fr das Verzeichnis, in dem die .htaccess-Datei liegt, und fr alle Verzeichnisse unterhalb davon. Sie knnen
den Schutz aber auch auf bestimmte Dateien, Dateitypen oder Zugriffsmethoden einschrnken.
Beispiel: .htaccess-Datei
# .htaccess-Datei fuer Web-Verzeichnis /service
AuthType Basic
AuthName "Service-Bereich"
AuthUserFile /usr/verwaltung/web/.htusers
AuthGroupFile /usr/verwaltung/web/.htgroups
<Files *.htm>
require user

Werner Dieter Heidi

require group Servicetechniker

</Files>

Um den Schutz einzuschrnken, benutzen Sie hnlich wie in HTML oder XML Tags mit spitzen
Klammern. Im einleitenden Tag kann hinter der ffnenden spitzen Klammer entweder Files
stehen, wie im obigen Beispiel, oder Limit. Dahinter knnen Sie genau eine einschrnkende
Angabe machen. Mit *.htm wie im Beispiel beschrnken Sie den Schutz auf HTML-Dateien. Mit
einer Angabe wie geheim.htm wrde nur diese eine Datei geschtzt. Bei Limit knnen Sie die
Zugriffsmethode z.B. auf GET oder POST einschrnken.
Beachten Sie: Falls es bei Ihnen einfach nicht klappen will mit dem Schtzen von Verzeichnissen,
dann knnte der Grund sein, dass in der zentralen Konfiguration des Apache Web-Servers beim
Eintrag AllowOverride zu wenig erlaubt ist. Falls Sie selber Zugriff auf die Web-Server-Konfiguration haben, suchen Sie dort nach diesem Eintrag und ndern Sie ihn. Weisen Sie z.B. All als
Wert zu. Fragen Sie ansonsten Ihren Provider oder Webmaster!

A.7 .htaccess Server-Reaktionen kontrollieren

1199

Schutzmechanismen, die Sie mit Hilfe von .htaccess-Dateien erstellen, sind auf HTTP-Ebene
wesentlich sicherer als solche, die mit Hilfe von CGI-Scripts oder gar mit Hilfe von JavaScript
erstellt werden. Dennoch sollten Sie wissen, dass .htaccess keinen Generalschutz bietet. Der
Schutz gilt nur, wenn Web-Browser oder andere Web-Clients ber den Web-Server geschtzte
Daten anfordern. Er gilt nicht, wenn der Zugriff z.B. mit einem anderen Internet-Protokoll wie
FTP erfolgt.

IPs, IP-Bereiche oder Namensadressen zulassen/ausschlieen

Sie knnen bestimmte IP-Adressen oder IP-Bereiche davon ausschlieen, auf Web-Seiten zuzugreifen. Ebenso knnen Sie alle IP-Adressen ausschlieen und nur ganz bestimmten den
Zugriff erlauben. Anwender, die ber eine nicht autorisierte IP-Adresse zugreifen, erhalten dann
eine HTTP-Fehlermeldung (den HTTP-Statuscode 403), und der Zugriff wird ihnen verweigert.
Sinnvoll ist das beispielsweise, wenn Ihr Web-Angebot nur den Mitarbeitern Ihrer Firma zugnglich sein soll oder wenn Sie bestimmte Anwender, die mit festen IP-Adressen unterwegs
sind, wegen Fehlverhaltens etwa in einem von Ihnen angebotenen, webbasierten Forum oder
Chat ausschlieen mchten.
Beispiel: .htaccess-Datei
# Datei zum Regeln von IP-Bereichen
Order deny,allow
Deny from .aol.com
Deny from 192.168
Allow from 192.168.220.102

Zunchst legen Sie mit Order die logische Interpretationsreihenfolge der nachfolgenden Angaben fest. Mglich ist die Angabe deny,allow wie im Beispiel, oder auch die umgekehrte
Reihenfolge.
In Zeilen, die mit Deny from oder Allow from beginnen, geben Sie eine konkrete IP-Adresse,
einen Teil davon, eine Namensadresse oder einen Teil davon an. Mit Deny from verbieten Sie
den Zugriff fr den oder die angegebenen Benutzer, und mit Allow from erlauben Sie den
Zugriff. Per zentraler Voreinstellung ist normalerweise der Zugriff fr alle Benutzer erlaubt. In
.htaccess-Dateien ist es deshalb sinnvoll, vor allem einschrnkende Verbote zu formulieren. Im
obigen Beispiel werden alle Benutzer ausgesperrt, die mit einer AOL-Kennung surfen, (.aol.com),
sowie alle Benutzer mit numerischer IP des Bereichs 192.168. Um aber einem bestimmten
Benutzer aus diesem Bereich doch den Zugriff zu erlauben, wird im Beispiel anschlieend noch
mit Allow from dessen IP-Adresse angegeben.
Die Angabe wird einfach als Teilzeichenkette interpretiert. Wenn ein Client eine Web-Seite in
dem Verzeichnis mit der .htaccess-Datei aufruft, vergleicht der Web-Server, ob eine der notierten
Zeichenketten in der Zeichenkette vorkommt, die der aufrufende Client dem Server bermittelt.
Um mehr ber die mglichen Zeichenketten zu erfahren, die in der Praxis bermittelt werden,
empfiehlt sich ein Blick in die Log-Dateien des Web-Servers.
Beachten Sie: Anstelle einer bestimmten Zeichenkette knnen Sie auch Allow from all bzw.
Deny from all notieren, um eine generelle Erlaubnis bzw. ein generelles Verbot zu formulieren. Beim Aussperren und Einschlieen bestimmter IPs, IP-Bereiche oder Namensadressen sind
die gleichen erweiterten Mglichkeiten erlaubt wie beim Passwortschutz. Die Anweisungen mit

1200

Anhang A: Technische Ergnzugen

Deny from und Allow from knnen dabei in entsprechende Tags eingeschlossen werden. So

lsst sich z.B. das Aussperren bestimmter Benutzer oder Benutzerkreise auf bestimmte Dateien
oder Zugriffsmethoden beschrnken.

Verzeichnis-Optionen einstellen
Mit Hilfe einer .htaccess-Datei knnen Sie alle zentralen Verzeichnisoptionen, die in der Konfiguration des Web-Servers eingestellt sind, fr das entsprechende Verzeichnis und seine Unterverzeichnisse ndern. Voraussetzung ist allerdings, dass in der zentralen Web-Server-Konfiguration AllowOverride All eingetragen ist. Wenn nicht, dann werden Angaben fr andere Verzeichnisoptionen ignoriert.
Beispiel: .htaccess-Datei:
# Datei fuer Verzeichnis /bilder
Options +ExecCGI -Indexes
DirectoryIndex erste.htm start.htm
ErrorDocument 403 "Auf dieses Verzeichnis ist der Zugriff verboten".
ErrorDocument 404 /spezial/404.html
ErrorDocument 500 http://www.mein-anderer-server.de/spezial/500.html

Mit Options knnen Sie verschiedene wichtige Grundeinstellungen ndern, die der Web-Server
fr Verzeichnisse verwendet. Hinter Options knnen Sie eine oder mehrere der folgenden
Angaben notieren:
+ExecCGI erlaubt das Ausfhren von CGI-Scripts im Verzeichnis, falls es zentral nur im definierten CGI-Verzeichnis erlaubt ist, und -ExecCGI verhindert es, sofern es zentral in allen
Verzeichnissen erlaubt ist.
+Includes erlaubt das Ausfhren von Server Side Includes im Verzeichnis, falls es zentral
verboten ist, und -Includes verhindert es, sofern es zentral erlaubt ist.
+IncludesNOEXEC erlaubt das Ausfhren von Server Side Includes, die kein CGI-Script ausfhren, -IncludesNOEXEC verbietet solche Server Side Includes.
+Indexes erlaubt Verzeichnis-Browsing, falls es zentral verboten ist, und -Indexes verhindert es, sofern es zentral erlaubt ist. Beim Verzeichnis-Browsing wird der Inhalt des Verzeichnisses im Browser aufgelistet, falls nur das Verzeichnis aufgerufen wird (z.B. http://www.
ihr-name.de/bilder/) und dort keine Datei mit einem Namen zu finden ist, der IndexFunktion hat. Mit +MultiViews erlauben Sie das Definieren alternativer Inhalte, mit
-MultiViews schalten Sie es aus.
Im Normalfall ist der Web-Server so konfiguriert, dass er das Stbern im Verzeichnis zulsst,
falls dort keine Datei mit Index-Funktion existiert. Das sind in der Einstellung der meisten
Web-Server Dateien mit Namen wie index.htm oder index.html. Mit DirectoryIndex knnen
Sie andere Dateinamen bestimmen, die in diesem Verzeichnis und seinen Unterverzeichnissen
als Dateien mit Index-Funktion gelten. Sie knnen beliebig viele Dateinamen angeben.
Per Voreinstellung zeigt der Web-Server eine in seinen Konfigurationen enthaltene HTML-Datei
an, wenn ein Zugriffsfehler passiert, z.B. wenn eine angeforderte Datei nicht existiert. Auch dies
knnen Sie ndern: Mit ErrorDocument definieren Sie eine eigene Meldung oder Datei, die im
Fehlerfall angezeigt wird. Hinter dem Schlsselwort notieren Sie den gewnschten HTTP-Status-

A.7 .htaccess Server-Reaktionen kontrollieren

1201

code typische Fehler, die auftreten knnen, sind jene mit den Nummern 403, 404 und 500.
Hinter der Nummer mit dem Statuscode knnen Sie entweder in Anfhrungszeichen eine eigene
Fehlermeldung notieren, oder Sie geben die Adresse einer Web-Seite an, die im Fehlerfall angezeigt werden soll. Bei Adressen auf der eigenen Domain knnen Sie mit absoluten Pfadnamen
arbeiten, wobei das Wurzelverzeichnis des Web-Projekts der Ausgangspunkt ist. Falls Sie nur
eine Fehlermeldung notieren, wird diese bei Eintreten des Fehlers als reiner Text im Browser
angezeigt. Angegebene Web-Seiten knnen Sie nach Lust und Laune gestalten. Es ist beispielsweise fr Besucher angenehm und weniger erschreckend, wenn im Fall eines Fehlers eine Seite
angezeigt wird, die das gleiche Layout hat wie die brigen Projektseiten.

Verzeichnis-Browsing einstellen
Wenn Sie Verzeichnis-Browsing erlauben, sodass also bei einem Aufruf wie http://www.ihrname.de/bilder/ der Verzeichnisinhalt aufgelistet wird, knnen Sie die Optik beeinflussen, mit
der die Verzeichnislisten im Browser angezeigt werden. Leichter verstndlich wird das, wenn Sie
sich klarmachen, dass der Web-Browser beim Anzeigen eines Verzeichnis-Listings einfach dynamisch HTML-Code generiert, um den eingelesenen Verzeichnisinhalt anzuzeigen. Mit den hier
beschriebenen Optionen knnen Sie die HTML-Ausgabe des Web-Servers beeinflussen.

A.1:

Die Abbildung zeigt, wie ein Browser ein Verzeichnis-Listing anzeigen knnte, bei dem
eigene Dateibeschreibungen und Symbolgrafiken zum Einsatz kommen.

Beispiel: .htaccess-Datei
# Datei fuer Verzeichnis /bilder
FancyIndexing On
AddDescription "HTML-Datei, anzeigbar" *.htm *.html
AddDescription "GIF-Grafik, anzeigbar" *.gif
AddDescription "JPEG-Grafik, anzeigbar" *.jpg
AddDescription "ZIP-Archiv, downloadbar" *.zip
AddIcon /src/blau.gif html htm
AddIcon /src/gelb.gif gif jpg

1202

Anhang A: Technische Ergnzugen

AddIcon /src/gruen.gif ^^DIRECTORY^^

AddIcon /src/blau.gif ^^BLANKICON^^

Mit FancyIndexing On schalten Sie eigene Optionen zur Darstellung des Verzeichnis-Listings
ein. Die Eintrge der brigen Zeilen im obigen Beispiel definieren solche Anzeigeoptionen. Mit
AddDescription knnen Sie einen kurzen Beschreibungstext notieren, der hinter einer oder
mehreren bestimmten Dateien stehen soll. Zuerst notieren Sie in Anfhrungszeichen den gewnschten Text, und dahinter geben Sie an, fr welche Datei oder Dateien der Text gelten soll.
Dabei knnen Sie wie im Beispiel oben Wildcards benutzen.
Mit AddIcon knnen Sie fr eine oder mehrere bestimmte Dateien eine eigene Symbolgrafik
bestimmen. Dabei geben Sie den URI der Symbolgrafik an. Bei Adressen auf der eigenen Domain
knnen Sie mit absoluten Pfadnamen arbeiten, wobei das Wurzelverzeichnis des Web-Projekts
der Ausgangspunkt ist. Hinter der Angabe zur gewnschten Grafikdatei knnen Sie eine oder
mehrere Dateiendungen notieren. Dateien mit dieser Endung erhalten dann bei der Anzeige die
entsprechende Symbolgrafik. Anstelle von Dateiendungen knnen Sie auch reservierte Ausdrcke wie ^^DIRECTORY^^ (Verzeichnisse erhalten diese Symbolgrafik) oder ^^BLANKICON^^
(Dateien ohne Dateiendung oder nicht zuzuordnende Dateien erhalten diese Symbolgrafik)
notieren.
Weitere Optionen sind ebenfalls mglich, aber im obigen Beispiel nicht notiert:
Mit AddType knnen Sie einem Mime-Typ eine oder mehrere Dateiendungen zuordnen: Mit
AddType text/xml adr ordnen Sie beispielsweise Dateien mit *.adr dem Mime-Type
text/xml zu.
Mit AddEncoding knnen Sie dem Sub-Typ eines Mime-Typs eine oder mehrere Dateiendungen zuordnen: Mit AddEncoding javascript jscr ordnen Sie beispielsweise Dateien
mit *.jscr dem Mime-Type text/javascript zu.
Mit AddIconByType knnen Sie einem Mime-Typ eine Symbolgrafik zuordnen. Alle Dateien
dieses Mime-Types werden dann mit dieser Symbolgrafik angezeigt. Mit AddIconByType
text/xml /src/struktur.gif ordnen Sie beispielsweise Dateien mit dem Mime-Type
text/xml eine Grafik mit der Adresse /src/struktur.gif zu.
Mit AddIconByEncoding knnen Sie dem Sub-Typ eines Mime-Typs eine Symbolgrafik
zuordnen: Mit AddIconByEncoding javascript /src/action.gif ordnen Sie beispielsweise Dateien mit dem Mime-Subtyp javascript eine Grafik mit der Adresse /src/
action.gif zu.
Mit DefaultIcon bestimmen Sie eine Symbolgrafik fr alle Flle, die nicht durch speziellere
Angaben abgedeckt sind: Mit DefaultIcon /src/punkt.gif bestimmen Sie beispielsweise,
dass alle Verzeichniseintrge, die sich nicht anderweitig zu Symbolgrafiken zuordnen lassen,
die Grafik mit der Adresse /src/punkt.gif erhalten.
Mit HeaderName bestimmen Sie eine eigene Datei fr die Anzeige der Kopfinformation zum
Verzeichnis: Mit HeaderName kopf.htm bestimmen Sie beispielsweise, dass die Anzeige der
Kopfinformationen aus der Datei kopf.htm im gleichen Verzeichnis geholt werden.
Mit ReadmeName bestimmen Sie eine Datei, in der zustzliche Informationen zum Verzeichnis
stehen, z.B. Copyright-Hinweise. Diese Datei wird unterhalb der Verzeichnisliste eingebun-

A.7 .htaccess Server-Reaktionen kontrollieren

1203

den. Mit HeaderName fuss.htm bestimmen Sie beispielsweise, dass die Anzeige der Liesmich-Informationen aus der Datei fuss.htm im gleichen Verzeichnis geholt wird.
Mit IndexIgnore knnen Sie Dateien angeben, die nicht im Verzeichnis-Listing auftauchen
sollen: Mit IndexIgnore kopf.htm fuss.htm nacktbild.jpg *.bmp bestimmen Sie
beispielsweise, dass die Dateien kopf.htm, fuss.htm, nacktbild.jpg sowie alle Dateien
mit der Endung .bmp nicht angezeigt werden.
Mit IndexOrderDefault wird die Sortierung bestimmt. Per Voreinstellung werden die Verzeichniseintrge alphabetisch aufsteigend nach Dateinamen angezeigt. Mit IndexOrderDefault Descending Name knnen Sie beispielsweise nach Dateinamen absteigend sortieren,
mit IndexOrderDefault Ascending Date aufsteigend nach Zeitstempel, mit IndexOrderDefault Descending Size absteigend nach Dateigre und mit IndexOrderDefault
Ascending Description aufsteigend nach Dateikurzbeschreibung.
Mit AddAlt knnen Sie einer verwendeten Symbolgrafik einen HTML-Alternativtext zuordnen, falls die Grafik nicht angezeigt werden kann: Mit AddAlt "das ist eine Grafikdatei" gelb.gif bestimmen Sie beispielsweise den Alternativtext das ist eine Grafikdatei fr die Symbolgrafik gelb.gif.
Mit AddAltByType knnen Sie allen Symbolgrafiken vor Dateien eines bestimmten MimeTyps einen gemeinsamen HTML-Alternativtext zuordnen. Mit AddAltByType "Das ist
eine XML-basierte Datei" text/xml ordnen Sie beispielsweise allen Symbolgrafiken, die
vor einer Datei mit dem Mime-Type text/xml stehen, den angegebenen Alternativtext zu.
Mit AddAltByEncoding knnen Sie allen Symbolgrafiken vor Dateien eines bestimmten
Mime-Subtyps einen gemeinsamen HTML-Alternativtext zuordnen.
Mit AddAltByEncoding "Das ist eine XML-basierte Datei" javascript ordnen Sie
beispielsweise allen Symbolgrafiken, die vor einer Datei mit dem Mime-Subtyp javascript
stehen, den angegebenen Alternativtext zu.
Mit IndexOptions knnen Sie schlielich weitere Einzeloptionen festlegen: Mit IndexOptions IconHeight=12 IconWidth=14 IconsAreLinks ScanHTMLTitles legen Sie beispielsweise fest, dass Icon-Grafiken in der fixen Hhe von 12 Pixeln und der fixen Breite von
14 Pixeln angezeigt werden. Die Icons sind auerdem als Links anklickbar und rufen die
dahinter angezeigte Datei oder das Verzeichnis auf. In der Spalte fr Dateibeschreibungen
werden im Fall von HTML-Dateien die Inhalte der darin definierten title-Elemente
ausgelesen und als Kurzbeschreibung zur Datei angezeigt.
Weitere Optionen sind:
Mit SuppressColumnSorting werden die Verzeichniseintrge unsortiert angezeigt. Mit
SuppressDescription werden keine Kurzbeschreibungen anzeigt. Mit SuppressLastModified werden keine Zeitstempel bei den Eintrgen angezeigt. Mit SuppressSize werden keine
Dateigren angezeigt.

Alternative Inhalte senden

Sie knnen die Kommunikation zwischen Web-Server und aufrufendem Client beeinflussen und
dafr sorgen, dass je nach Client-Typ verschiedene Inhalte gesendet werden. Auf diese Weise
knnen Sie beispielsweise eine deutschsprachige oder englischsprachige Index-Seite senden,
abhngig davon, ob der Anwender einen Browser mit deutschsprachiger oder englischsprachiger
Bedienoberflche benutzt. Oder Sie knnen alternativ eine HTML-Datei oder eine WML-Datei

1204

Anhang A: Technische Ergnzugen

senden, abhngig davon, ob der aufrufende Client ein normaler Web-Client ist oder ein Handy,
das WAP/WML-basierte Inhalte haben mchte.
Um alternative Inhalte anzubieten, sind ein paar Einstellungen in der .htacess ntig (sofern nicht
schon in der zentralen Web-Server-Konfiguration eingestellt). Auerdem bentigen Sie eine
Verteilerdatei.
Beispiel: .htaccess-Datei
# Einstellungen fuer alternative Inhalte
AddType application/x-type-map var
Options +MultiViews
DirectoryIndex index

Beispiel: Datei index.var

URI: index; vary="type,language"
URI: english.htm
Content-type: text/html; qs=1.0
Content-language: en
URI: deutsch.htm
Content-type: text/html; qs=0.8
Content-language: de

In der .htacess stehen folgende Eintrge: AddType application/x-type-map var fgt einen
Mime-Type hinzu, den der Web-Server (zumindest Apache) kennt. Es ist der Mime-Type fr
Dateien mit Angaben zu alternativen Inhalten. Als Dateiendung fr solche Dateien wird im Beispiel var definiert. Dateien *.var werden also als Anweisungsdateien fr alternative Inhalte
erkannt. Options +MultiViews schaltet die MultiView-Funktion ein. Fr alternative Inhalte
muss diese Option explizit eingeschaltet sein. DirectoryIndex index nennt Dateien, in deren
Namen index vorkommt, als Dateien fr die Index-Funktion.
Als Nchstes bentigen Sie im Beispiel eine Datei namens index.var im gleichen Verzeichnis wie
die .htaccess. Die Datei index.var enthlt im Beispiel in der ersten Zeile die folgende Angabe:
URI: index; vary="type,language"

Damit drcken Sie aus, dass die folgenden Definitionen fr alternativen Inhalt dann bercksichtigt werden sollen, wenn Anfragen kommen, die auf den festgelegten DirectoryIndex (im Beispiel zuvor als index definiert) zutreffen. Die Alternativen knnen Angaben zum Dateityp
(type) und zur Sprache (language) betreffen.
Diese erste Anweisung und die mglichen Alternativen werden jeweils durch eine Leerzeile getrennt. Jede Alternative beginnt mit URI:. Dahinter folgt der gewnschte URI, der bei der jeweiligen Alternative aufgerufen werden soll. Im obigen Beispiel handelt es sich jeweils um Dateien
im gleichen Verzeichnis, nmlich einmal english.htm und einmal deutsch.htm.
Mit Content-type: bestimmen Sie den Mime-Type des bei URI: angegebenen URIs, im obigen
Beispiel text/html. Falls Sie z.B. alternative Inhalte fr Web-Browser und WAP-Handys senden
wollen, knnen Sie bei dieser Angabe in der einen Alternative beispielsweise eine WML-Datei
anbieten mit dem Mime-Type text/vnd.wap.wml, und im anderen Fall eine HTML-Datei mit

A.7 .htaccess Server-Reaktionen kontrollieren

1205

dem blichen Mime-Type text/html. Die Angabe Content-type: ist in jedem Fall Pflicht,
auch dann, wenn Sie dort keine unterschiedlichen Angaben zu machen haben.
Bei Content-type knnen Sie am Ende, durch Semikolon getrennt, noch eine Angabe zu qs
notieren. Hinter diesem Schlsselwort und einem Gleichheitszeichen knnen Sie numerische
Werte fr die Alternativen vergeben. Alternativen mit hheren Werten werden in dem Fall, dass
sonst nicht entscheidbar ist, welche Alternative gewhlt werden soll, bevorzugt.
Mit Content-language: knnen Sie Sprachen unterscheiden, indem Sie ein Sprachenkrzel
angeben. Abhngig davon, welche Sprache der aufrufende Client benutzt oder bevorzugt, wird
die entsprechende Alternative ausgewhlt. Fr alternative Inhalte bentigen Sie natrlich auch
alternative Dateien. Im obigen Beispiel wren das die Dateien english.htm und deutsch.htm,
die den gleichen Inhalt haben, nur in verschiedenen Sprachen.
Wenn Sie eine solche .htaccess und index.var ins Startverzeichnis einer Domain legen, z.B.
ins Startverzeichnis von http://www.ihr-name.de/, dann werden Besucher, die nur die
Domain aufrufen (ohne bestimmte Dateinamen), automatisch auf die softwareseitig erkennbare
Landessprachenseite geleitet. Von dort aus knnen entsprechend unterschiedliche Verlinkungen
so durch das restliche Angebot fhren, dass die Landessprache die gleiche bleibt. Gehen Sie mit
dieser Mglichkeit der Lenkung jedoch bedchtig um. Bedenken Sie, dass nicht jeder Besucher
Ihres Web-Projekts frei in der Wahl seines Browsers ist. Ein deutschsprachiger Besucher in
einem englischen Internet-Cafe hat auch bei besuchten spanischen Seiten eigene Vorstellungen
bei der Wahl der Sprache. Sehen Sie gegebenenfalls eine clientseitige Auswahl der Sprache vor.

1207

HTML: Elementreferenz

B.1

Allgemeines zur HTML-Elementreferenz

Ein HTML-Element besteht meistens aus einem Anfangs- und einem End-Tag. So besteht z.B.
das Element body aus einem Anfangs-Tag <body> und einem End-Tag </body>. Der Bereich
zwischen Anfangs- und End-Tag nimmt den Inhalt des Elements auf. Er kann weitere HTMLElemente enthalten.
Die HTML-Elementreferenz listet fr jedes HTML-Element auf, in welchen anderen HTMLElementen es vorkommen kann und welche anderen HTML-Elemente es enthalten kann. Bei
jedem aufgefhrten Element fhrt ein Verweis zu den jeweiligen Attributen des Elements, die in
der Attributreferenz behandelt werden.
In der HTML-Elementreferenz wird nur der HTML-Standard nach Version 4.01 bercksichtigt.
Browser-eigene Abweichungen sowie Browser-spezifische HTML-Elemente, die im Standard
nicht vorkommen, sind in der Referenz nicht bercksichtigt.

B.2

Block-Elemente

Block-Elemente erzeugen eine neue Zeile im Textfluss. Je nach Elementtyp kann der Browser
dabei automatisch einen greren Abstand zum vorangehenden Inhalt einfgen. So erzeugen die
Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung
vom einfachen Zeilenumbruch unterscheidbar ist. Beim div-Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.
Block-Elemente knnen in der Regel normalen Text und Inline-Elemente enthalten. Einige
Block-Elemente knnen auch andere Block-Elemente enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den einzelnen Elementen behandelt.
Folgende Elemente gehren zu den Block-Elementen: address, blockquote, center, dl, dir,
div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul. Nur
bei HTML transitional gibt es center, dir, menu, noframes und isindex.

B.3

Inline-Elemente

Inline-Elemente erzeugen keine neue Zeile im Textfluss. Inline-Elemente sind als untergeordnete, innere Elemente fr Block-Elemente gedacht. Sie knnen in den meisten Fllen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente. Ausnahmen oder
Einschrnkungen werden bei den Beschreibungen zu den einzelnen Elementen behandelt.

1208

Anhang B: HTML Elementreferenz

Folgende Elemente gehren zu den Inline-Elementen: a, abbr, acronym, applet, b, basefont,

bdo, big, br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map,
object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var. Nur bei
HTML transitional gibt es applet, basefont, font, iframe, u, s und strike.

B.4

#PCDATA

#PCDATA steht fr parsed character data, zu deutsch: vom HTML-Parser analysierte Zeichenda-

ten. Es handelt sich in HTML normalerweise um Text, der innerhalb eines Elements, also zwischen Anfangs- und End-Tag notiert werden kann. Solcher Text kann aus Zeichen bestehen, die
in der Zeichenreferenz genannt sind. Benannte Zeichen wie &uuml; sind also ebenso erlaubt wie
numerische Notationen von der Art &#x20AC; oder &#8364;. Solche Notationen werden
erkannt und umgesetzt. Im Unterschied zu #CDATA-Bereichen werden HTML-Auszeichnungen
in #PCDATA-Bereichen erkannt und interpretiert.

B.5

Elementreferenz

a
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert einen Anker oder einen Hyperlink.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer a, button), body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente] (auer a).

abbr
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Abkrzung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

acronym
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Abkrzung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

B.5 Elementreferenz

1209

address
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine Adresse.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th .
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente], p (p nur bei HTML transitional).

applet
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Fgt ein Java-Applet ein.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf folgende anderen HTML-Elemente enthalten: [Block-Elemente], [InlineElemente], param.

area
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert einen Ausschnitt fr eine verweissensitive Grafik.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: map.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

b
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert fett gedruckten Text.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

base
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert dokumentweit gltige Angaben fr Zielfenster und Basis-URIs von

Verweisen.
Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: head.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

1210

Anhang B: HTML Elementreferenz

basefont
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Bestimmt Basis-Schriftmerkmale fr nachfolgenden Text.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

bdo
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine nderung der Textrichtung bei Sprachen mit anderer Schreibrichtung.
Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

big
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text, der grer dargestellt werden soll als normal.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

blockquote
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert ein Zitat.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf #PCDATA und folgende andere HTML-Elemente enthalten:
1. nach HTML strict: [Block-Elemente], script
2. nach HTML transitional: [Block-Elemente], [Inline-Elemente].

body
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert den Dokumentkrper und damit den Bereich der darzustellenden

Daten.
Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: html, noframes
(noframes nur bei HTML frameset).
Darf enthalten:
1. nach HTML strict: [Block-Elemente], script
2. nach HTML transitional: #PCDATA und [Block-Elemente], [Inline-Elemente].

B.5 Elementreferenz

1211

br
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Erzeugt einen Zeilenumbruch.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

button
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Erzeugt einen Klick-Button.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: abbr, acronym,
address, applet, b, basefont, bdo, big, blockquote, br, center, cite, code,
dfn, dl, dir, div, em, font, h1-6, hr, i, img, kbd, map, menu, noframes,
noscript, object, ol, p, pre, q, samp, script, small, span, strong, sub, sup,
table, tt, ul, var.

caption
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Setzt eine Tabellenberschrift/Tabellenunterschrift.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: table.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

center
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert einen Bereich, der zentriert dargestellt wird.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

cite
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert ein Zitat.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

1212

Anhang B: HTML Elementreferenz

code
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als Quelltext einer Computersprache.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

col
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert Daten fr eine Tabellenspalte.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: colgroup, table.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

colgroup
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert eine Gruppe von Tabellenspalten.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: table.
Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten: col.

dd
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert in einer Definitionsliste eine Definition zu einem Term.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: dl.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

del
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als gelscht im Sinne von nderungsmarkierung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

dfn
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Definition.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

B.5 Elementreferenz

1213

dir
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine Verzeichnisliste.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf folgendes andere HTML-Element enthalten (ein- oder mehrmals): li (Hinweis: li darf in diesem Zusammenhang keine Block-Elemente enthalten).

div
Bedeutung
Elternelemente

Kindelemente

Markiert einen allgemeinen Bereich.

Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

dl
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine Definitionsliste.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th
Darf folgende andere HTML-Elemente enthalten: dd, dt.

dt
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert in einer Definitionsliste einen zu definierenden Term.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: dl.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

em
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als emphatisch.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional) .
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

1214

Anhang B: HTML Elementreferenz

fieldset
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine Gruppe von Formularelementen.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf neben #PCDATA folgende HTML-Elemente enthalten: legend, gefolgt von:
[Block-Elemente], [Inline-Elemente].

font
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text mit Schriftgre, Schriftfarbe und Schriftart.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

form
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Definiert ein Formular.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, iframe, ins, li,
map, noframes, noscript, object, td, th.
1. nach HTML strict: [Block-Elemente] (auer form), script
2. nach HTML transitional: [Block-Elemente] (auer form), [Inline-Elemente].

frame
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert ein Frame-Fenster.

Erlaubt in der Variante frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: frameset.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

frameset
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert ein Formular.

Erlaubt in der Variante frameset.
Darf innerhalb des folgenden HTML-Elements vorkommen: html.
Darf folgende HTML-Elemente enthalten: frame, frameset, noframes.

B.5 Elementreferenz

1215

h1-h6
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine berschrift 1. bis 6. Ordnung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

head
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert den Kopfbereich einer HTML-Datei.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb des folgenden HTML-Elements vorkommen: html.
Muss folgendes HTML-Element enthalten: title
Kann darber hinaus folgende HTML-Elemente enthalten: base, isindex, link,
meta, object, script, style.

hr
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Erzeugt eine horizontale Trennlinie.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

html
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Wurzelelement einer HTML-Datei.

Erlaubt in den Varianten strict, transitional, frameset.
Hat keine mglichen Elternelemente.
1. nach HTML strict und HTML transitional folgende HTML-Elemente: head,
gefolgt von body
2. nach HTML frameset folgende HTML-Elemente: head, gefolgt von frameset.

Bedeutung
HTML-Varianten
Elternelemente

Markiert kursiv gedruckten Text siehe Beschreibung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

Kindelemente

1216

Anhang B: HTML Elementreferenz

iframe
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert ein eingebettetes Fenster.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button), body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

img
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Referenziert eine Grafik.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

input
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button), body (body nur bei HTML transitional).
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

ins
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als eingefgt im Sinne von nderungsmarkierung.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

isindex
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Erzeugt ein einzeiliges Eingabefeld.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, center, dd, del, div, fieldset, form, head, iframe, ins, li,
map, noframes, noscript, object, td, th.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

B.5 Elementreferenz

1217

kbd
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als Tastatureingabe.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

label
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Ordnet Text einem bestimmten Formularfeld zu.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button), body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente] (auer label).

legend
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert eine berschrift fr eine Gruppe von Formularelementen.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb der folgenden HTML-Elements vorkommen: fieldset.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

li
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Listeneintrag.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: dir, menu, ol, ul.
Darf #PCDATA und folgende andere HTML-Elemente enthalten:
1. bei dir und menu: [Inline-Elemente]
2. bei ol und ul: [Block-Elemente], [Inline-Elemente].

link
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert logische Beziehungen zu anderen Dateien.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: head.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

1218

Anhang B: HTML Elementreferenz

map
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Definitionsbereich fr verweissensitive Grafiken.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente].
Darf folgende anderen HTML-Elemente enthalten: [Block-Elemente], area.

menu
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert eine Menliste.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.
Darf folgendes andere HTML-Element enthalten (ein- oder mehrmals): li (Hinweis: li darf in diesem Zusammenhang keine Block-Elemente enthalten).

meta
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert Meta-Daten wie Kurzbeschreibung und Stichwrter fr eine Datei.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: head.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

noframes
Bedeutung
HTML-Varianten
Elternelemente

Kindelemente

Markiert einen Bereich fr den Fall, dass keine Frames angezeigt werden knnen.
Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noscript, object, td, th.
Darf #PCDATA und folgende andere HTML-Elemente enthalten:
1. nach HTML frameset: body
2. nach HTML transitional: [Block-Elemente], [Inline-Elemente].

noscript
Bedeutung
HTML-Varianten
Elternelemente

Markiert einen Bereich fr den Fall, dass ein Script nicht ausgefhrt werden kann.
Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,

Kindelemente

Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente].

li, map, noframes, noscript, object, td, th.

B.5 Elementreferenz

1219

object
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert ein Multimedia-Objekt.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], head.
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Block-Elemente], [Inline-Elemente], param.

ol
Bedeutung
HTML-Varianten
Elternelemente

Markiert eine nummerierte Liste.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins,
li, map, noframes, noscript, object, td, th.

Kindelemente

Darf folgendes andere HTML-Element enthalten (ein- oder mehrmals): li.

optgroup
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Gruppe von Eintrgen in einer Menstruktur.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: select.
Darf folgendes andere HTML-Element enthalten (ein- oder mehrmals): option.

option
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Eintrag in einer Auswahlliste.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: select, optgroup.
Darf nichts als #PCDATA enthalten.

p
Bedeutung
HTML-Varianten
Elternelemente

Markiert einen Textabsatz.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: address, applet,
blockquote, body, button, center, dd, del, div, fieldset, form,
iframe, ins, li, map, noframes, noscript, object, td, th.

Kindelemente

Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

param
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert Parameter eines Multimedia-Objekts oder Java-Applets.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet, object.
Leeres Element (Standalone-Tag), darf keinen Inhalt haben.

1220

Anhang B: HTML Elementreferenz

pre
Bedeutung
HTML-Varianten
Elternelemente

Formatiert einen Bereich wie im Editor eingegeben (prformatierter Text).

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form,
iframe, ins, li, map, noframes, noscript, object, td, th.

Kindelemente

Darf #PCDATA und folgende andere HTML-Elemente enthalten: a, abbr,

acronym, applet, b, bdo, br, button, cite, code, dfn, em, i, input,
iframe, kbd, label, map, q, samp, script, select, span, strong,
textarea, tt, var.

q
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert ein Zitat.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

s
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als durchgestrichen.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

samp
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text als Beispiel.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

script
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert einen Bereich fr Scripts (z.B. JavaScript).

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], head, body (body nur bei HTML transitional).
Darf nichts als #PCDATA enthalten, die als Script-Code zu interpretieren sind.

B.5 Elementreferenz

1221

select
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert eine Auswahlliste.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button), body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: optgroup,
option.

small
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert Text, der kleiner dargestellt wird als normal.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

span
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen inline-Bereich zur Formatierung, z.B. mit CSS-Stylesheets.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

strike
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als durchgestrichen.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

strong
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als betont.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

1222

Anhang B: HTML Elementreferenz

style
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Bereich fr Stylesheet-Definitionen, z.B. in CSS.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: head.
Darf nichts als #PCDATA enthalten, die als Style-Definitionen interpretiert werden.

sub
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als tiefgestellt.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

sup
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als hochgestellt.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente]
(auer pre), [Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

table
Bedeutung
HTML-Varianten
Elternelemente

Erzeugt eine Tabelle.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form,
iframe, ins, li, map, noframes, noscript, object, td, th.

Kindelemente

Darf folgende anderen HTML-Elemente (in dieser Reihenfolge) enthalten:

caption (optional), col oder colgroup (optional), thead (optional), tfoot

(optional), tbody (ein oder mehrere wenn nur einmal bentigt, darf tbody
auch entfallen, weshalb die herkmmliche Konstruktion, wonach table direkt
aus tr-Elementen besteht, ebenfalls zulssig ist).

tbody
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Bestimmt in einer Tabelle den Tabellenkrper.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: table.
Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten:
tr.

B.5 Elementreferenz

1223

td
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Tabellenzelle.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: tr.
Darf folgende andere HTML-Elemente enthalten: [Block-Elemente], [InlineElemente].

textarea
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert ein mehrzeiliges Eingabefeld.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente] (auer button), body (body nur bei HTML transitional).
Darf nichts als #PCDATA enthalten.

tfoot
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Bestimmt in einer Tabelle den Tabellenfu.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: table.
Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten:
tr.

th
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert eine Tabellenkopfzelle.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: tr.
Darf folgende andere HTML-Elemente enthalten: [Block-Elemente], [InlineElemente].

thead
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Bestimmt in einer Tabelle den Tabellenkopf.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: table.
Darf nur folgendes andere HTML-Element (einfach oder mehrfach) enthalten:
tr.

title
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert den Titel einer HTML-Datei.

Erlaubt in den Varianten strict, transitional, frameset.
Darf nur innerhalb des folgenden HTML-Elements vorkommen: head.
Darf nichts als #PCDATA enthalten.

1224

Anhang B: HTML Elementreferenz

tr
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Definiert eine Tabellenzeile.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: table, tbody,
tfoot, thead.
Darf folgende anderen HTML-Elemente enthalten: td, th.

tt
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text, der im Schreibmaschinenstil dargestellt wird.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

u
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als unterstrichen.

Erlaubt in den Varianten transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

ul
Bedeutung
HTML-Varianten
Elternelemente

Markiert eine Aufzhlungsliste.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: applet,
blockquote, body, button, center, dd, del, div, fieldset, form,
iframe, ins, li, map, noframes, noscript, object, td, th.

Kindelemente

Darf folgendes andere HTML-Element enthalten (ein- oder mehrmals): li.

var
Bedeutung
HTML-Varianten
Elternelemente
Kindelemente

Markiert einen Text als Variable.

Erlaubt in den Varianten strict, transitional, frameset.
Darf innerhalb der folgenden HTML-Elemente vorkommen: [Block-Elemente],
[Inline-Elemente], body (body nur bei HTML transitional).
Darf #PCDATA und folgende andere HTML-Elemente enthalten: [Inline-Elemente].

1225

HTML: Attributreferenz

C.1

Allgemeines zur HTML-Attributreferenz

Die meisten Attribute in HTML sind implied (optional), nur einige wenige sind required (im
einleitenden HTML-Tag erforderlich). Bei den erforderlichen Attributen gibt es logisch notwendige (das img-Element wrde beispielsweise ohne das src-Attribut wenig Sinn machen), aber
auch politische (dass das W3-Konsortium etwa das alt-Attribut beim img-Element als notwendig einstuft, ist eindeutig ein erzieherischer Akt). Nicht wenige HTML-Attribute haben die
Aufgabe, Elemente zu formatieren, z.B. Attribute wie align= (Ausrichtung) oder bgcolor=
(Hintergrundfarbe). Solche Attribute sind jedoch als deprecated (missbilligt) eingestuft und nur
noch in der HTML-Variante transitional erlaubt. Sie sollen allmhlich aus dem HTML-Standard verschwinden, da solche Aufgaben durch CSS Stylesheets besser zu lsen sind.

C.2

#CDATA

#CDATA steht fr character data, zu deutsch: Zeichendaten. Es handelt sich um Text, der keine

weiteren HTML-Elemente enthalten kann. In HTML ist das typischerweise Text, der bei einer
Wertzuweisung an ein Attribut vorkommt. Solcher Text darf bei HTML 4.0 aus allen Zeichen
bestehen, die in der Zeichenreferenz in Anhang D genannt sind. Benannte Zeichen wie &uuml;
sind also ebenso erlaubt wie numerische Notationen von der Art &#x20AC; oder &#8364;. Solche Notationen werden erkannt und umgesetzt. HTML-Auszeichnungen, also die Notation von
HTML-Elementen, wird in CDATA-Bereichen dagegen nicht erkannt. Das einzige, wonach gesucht wird und was erkannt wird, ist die Zeichenfolge </. Deshalb mssen Sie das Zeichen < in
Wertzuweisungen an Attribute unbedingt wie blich durch &lt; maskieren. Leerzeichen am
Beginn oder Ende eines #CDATA-Textbereichs wird normalerweise abgeschnitten.
#CDATA schrnkt zwar in keiner Weise ein, welcher Text einem Attribut als Wert zugewiesen

wird. Dennoch sind in vielen Fllen nur bestimmte typische Angaben blich. So fallen
Sprachenkrzel beispielsweise auch unter #CDATA, aber erwnscht ist an der entsprechenden
Stelle eine Angabe nach einem bestimmten Schema. Meistens werden solche Schemata durch
RFCs geregelt. In dieser Attribut-Referenz wird auf solche RFCs hingewiesen.

C.3

ID, IDREF oder Name

Der Wert eines solchen Attributs muss mit einem Buchstaben A-Z oder a-z beginnen und darf
in der weiteren Zeichenkette ebenfalls nur Buchstaben A-Z und a-z, Ziffern 0-9, Bindestriche (-),
Unterstriche (_), Doppelpunkte (:) und Punkte (.) enthalten. Nicht erlaubt sind Sonderzeichen,

1226

Anhang C: HTML: Attributreferenz

Leerzeichen oder andere Interpunktionszeichen. Werte vom Typ IDREF mssen als Wert den
identisch geschriebenen Namen erhalten, der in einem anderen Element, auf das mit dem
IDREF-Attribut Bezug genommen wird, mit dem Attribut id= vergeben wurde.

C.4

Zahl

Als Wert eines solchen Attributs sind nur einfache ganzzahlige Werte erlaubt, die aus mindestens
einer Ziffer 0-9 bestehen.

C.5

Universalattribute

Universalattribute sind Attribute, die in der Mehrzahl aller HTML-Elemente vorkommen drfen. Weitere Einzelheiten dazu bei den Beschreibungen zu Universalattributen in Kapitel 13.

Allgemeine Universalattribute
Attribut

Wert

erforderlich?

Bedeutung

class

#CDATA

nein

ordnet dem Element eine Stylesheet-Klasse zu, verwendbar in allen Elementen auer: base, basefont, head,

id

[ID]

nein

style

#CDATA

nein

title

#CDATA

nein

html, meta, param, script, style, title

ordnet dem Element einen individuellen Namen zu, verwendbar in allen Elementen auer: base, head, html,
meta, script, style, title

definiert CSS-Angaben zur Formatierung des Elements,

verwendbar in allen Elementen auer: base, basefont,
head, html, meta, script, style, title

definiert einen Titel fr das Element, verwendbar in allen

Elementen auer: base, basefont, head, html,
meta, script, style, title

Universalattribute zur Internationalisierung

Attribut

Wert

erforderlich?

Bedeutung

dir

ltr | rtl

nein

gibt die Schreibrichtung der im Element verwendeten

Landessprache an, verwendbar in allen Elementen auer:
applet, base, basefont, br, frame, frameset,
hr, iframe, param, script

lang

#CDATA

nein

gibt die im Element verwendete Landessprache (nach RFC

1766) an, verwendbar in allen Elementen auer: applet,
base, basefont, br, frame, frameset, hr,
iframe, meta, param, script

C.5 Universalattribute

1227

Universalattribute fr Event-Handler
Attribut

Wert

erforderlich?

Bedeutung

onclick

#CDATA

nein

beim Anklicken des Elements,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

ondblclick

#CDATA

nein

beim doppelten Anklicken des Elements,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onmousedown

#CDATA

nein

bei gedrckter Maustaste ber dem Element,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onmouseup

#CDATA

nein

bei Loslassen der Maustaste ber dem Element,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onmouseover

#CDATA

nein

beim berfahren des Elements mit der Maus,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onmousemove

#CDATA

nein-

beim Ziehen des Elements mit der Maus,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onmouseout

#CDATA

nein

beim Verlassen des Elements mit der Maus,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onkeypress

#CDATA

nein

beim Drcken und wieder Loslassen einer Taste,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

1228

Anhang C: HTML: Attributreferenz

Attribut

Wert

erforderlich?

Bedeutung

onkeydown

#CDATA

nein

beim Drcken einer Taste,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

onkeyup

nein

#CDATA

beim Loslassen einer Taste,

verwendbar in allen Elementen auer: applet,
base, basefont, bdo, br, font, frame,
frameset, head, html, iframe, isindex,
param, script style, title

C.6

Attributreferenz

a
Bedeutung

Definiert einen Anker oder einen Hyperlink

Attribut

Wert

accesskey

#CDATA

charset

#CDATA

coords

#CDATA

href

#CDATA

hreflang

#CDATA

name

#CDATA

rel

#CDATA

rev

#CDATA

shape

rect
circle

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

nein
nein
ja (bei Hyperlinks)
nein
ja (bei Ankern)
nein
nein
nein (Default:
rect)

Bedeutung
bestimmt ein einzelnes Zeichen als
Hotkey fr den Hyperlink
gibt den Zeichensatz des Verweisziels (laut RFC 2045) an
verweissensitive Bereiche bei Objekten
gibt das Verweisziel (nach RFC
2396) an
gibt die Landessprache des Verweisziels (nach RFC 1766) an
bestimmt den Ankernamen
bestimmt das Verweisziel als
Vorwrtsverknpfung
bestimmt das Verweisziel als
Rckwrtsverknpfung
verweissensitive Bereiche bei Objekten

poly
default
tabindex

[Zahl]

bestimmt die Tabulatorreihenfolge

fr Hyperlinks durch Angabe einer
Zahl

C.6 Attributreferenz
Bedeutung
target

1229

Definiert einen Anker oder einen Hyperlink

#CDATA
_blank

strict, transitional,
frameset

nein

bestimmt den Fensternamen des

Verweisziels

strict, transitional,
frameset

nein

bestimmt den Mime-Type des

Verweisziels (laut RFC 2045)

_parent
_self
_top
type

#CDATA

[Universalattribute]

abbr
Bedeutung

Markiert eine Abkrzung

[Universalattribute]

acronym
Bedeutung

Markiert eine Abkrzung

[Universalattribute]

address
Bedeutung

Markiert eine Abkrzung

[Universalattribute]

applet
Bedeutung

Fgt ein Java-Applet ein

Attribut

Wert

align

top

HTML-Varianten
transitional, frameset

erforderlich?
nein

Bedeutung
richtet das Applet aus

transitional, frameset

nein

bestimmt einen Alternativtext, falls

das Applet nicht anzeigbar ist

middle
bottom
left
center
right
alt

#CDATA

1230

Anhang C: HTML: Attributreferenz

Bedeutung

Fgt ein Java-Applet ein

#CDATA

transitional, frameset

nein

code

#CDATA

height

#CDATA

transitional, frameset
transitional, frameset

nein
ja

hspace

#CDATA

transitional, frameset

nein

name

#CDATA

vspace

#CDATA

transitional, frameset
transitional, frameset

nein
nein

width

#CDATA

transitional, frameset

ja

archive

gibt eine kommaseparierte Liste mit

Archivdateien fr das Applet an
gibt die Klassendatei des Applets an
gibt die Anzeigehhe des Applets in
Pixeln oder Prozent an
bestimmt den horizontalen Abstand
zwischen Applet und umflieendem
Text in Pixeln oder Prozent
gibt einen Namen fr das Applet an
bestimmt den horizontalen Abstand
zwischen Applet und umflieendem
Text in Pixeln oder Prozent
gibt die Anzeigebreite des Applets in
Pixeln oder Prozent an

[Universalattribute]

area
Bedeutung Definiert einen Ausschnitt fr eine verweissensitive Grafik
Attribut

Wert

alt

#CDATA

accesskey

#CDATA

coords

#CDATA

href

#CDATA

nohref

(nohref)

onblur

#CDATA

onfocus

#CDATA

shape

rect
circle

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
ja

Bedeutung
Kurzbeschreibung des Verzeisziels

nein

strict, transitional,
frameset
strict, transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

bestimmt ein einzelnes Zeichen als

Hotkey fr den Hyperlink
bestimmt die Koordinaten des
verweissensitiven Bereichs, abhngig von shape
gibt das Verweisziel (nach RFC
2396) an
bestimmt fr einen verweissensitiven Bereich, dass keine Aktion
damit verbunden ist
beim Verlassen des verweissensitiven Bereichs... (Script-Code)
wenn verweissensitiver Bereich den
Fokus hat... (Script-Code)
bestimmt den Typ eines verweissensitiven Bereichs

strict, transitional,
frameset

nein

nein

nein

nein
nein (Default:
rect)

poly
default
tabindex

[Zahl]

bestimmt die Tabulatorreihenfolge

fr Hyperlinks

C.6 Attributreferenz

1231

Bedeutung Definiert einen Ausschnitt fr eine verweissensitive Grafik

target

strict, transitional,
frameset

#CDATA
_blank

nein

bestimmt den Fensternamen des

Verweisziels

_parent
_self
_top
[Universalattribute]

b
Bedeutung

Markiert fett gedruckten Text

[Universalattribute]

base
Bedeutung

Definiert einen Ausschnitt fr eine verweissensitive Grafik

Attribut

Wert

href

#CDATA

target

#CDATA

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
gibt den Basis-URI an

nein

gibt das Default-Zielfenster fr

Verweise an

basefont
Bedeutung

Bestimmt Basis-Schriftmerkmale fr nachfolgenden Text

Attribut

Wert

color

#CDATA

face

#CDATA

size

#CDATA

[Universalattribute]

HTML-Varianten
transitional,
frameset
transitional,
frameset
transitional,
frameset

erforderlich?
nein
nein
ja

Bedeutung
gibt die Basisschriftfarbe hexadezimal oder als Farbwort an
gibt die Basisschriftart an
gibt die Basisschriftgre als Zahl als
Zahl absolut oder relativ mit Vorzeichen an

1232

Anhang C: HTML: Attributreferenz

bdo
Bedeutung

Markiert eine nderung der Textrichtung bei Sprachen mit anderer Schreibrichtung

Attribut

Wert

dir

ltr

HTMLVarianten
strict,
transitional,
frameset

rtl

erforderlich?

Bedeutung

ja

gibt die Schreibrichtung an

Universalattribute: id class style title

big
Bedeutung

Markiert Text, der grer dargestellt werden soll als normal

[Universalattribute]

blockquote
Bedeutung

Markiert ein Zitat

Attribut

Wert

cite

#CDATA

HTMLVarianten
strict,
transitional,
frameset

erforderlich?

Bedeutung

nein

gibt den URI der Zitatquelle (nach

RFC 2396) an

[Universalattribute]

body
Bedeutung

Markiert den Dokumentkrper und damit den Bereich der darzustellenden Daten

Attribut

Wert

HTMLVarianten
transitional,
frameset

erforderlich?

Bedeutung

alink

#CDATA

nein

#CDATA

transitional,
frameset

nein

#CDATA

transitional,
frameset

nein

gibt die dokumentweite Farbe fr

aktivierte Links hexadezimal (in der
Form #XXXXXX) oder als Farbwert
an
gibt den URI einer dokumentweiten
Hintergrundgrafik (nach RFC 2396)
an
gibt die dokumentweite Hintergrundfarbe hexadezimal (in der Form
#XXXXXX) oder als Farbwert an

background

bgcolor

C.6 Attributreferenz
Bedeutung

1233

Markiert den Dokumentkrper und damit den Bereich der darzustellenden Daten

link

#CDATA

transitional,
frameset

nein

onload

#CDATA

nein

onunload

#CDATA

text

#CDATA

strict,
transitional,
frameset
strict,
transitional,
frameset
transitional,
frameset

vlink

#CDATA

transitional,
frameset

gibt die dokumentweite Farbe fr

Links zu noch nicht besuchten Seiten
hexadezimal (in der Form
#XXXXXX) oder als Farbwert an
wenn die Datei geladen ist... (ScriptCode)

nein

wenn die Datei verlassen wird...

(Script-Code)

nein

nein

gibt die dokumentweite Textfarbe

hexadezimal (in der Form
#XXXXXX) oder als Farbwert an
gibt die dokumentweite Farbe fr
Links zu bereits besuchten Seiten hexadezimal (in der Form #XXXXXX)
oder als Farbwert an

erforderlich?
nein
(Default:
none)

Bedeutung
bestimmt bei Text, der um eine Grafik oder ein Objekt fliet, die Fortsetzungsposition

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

Bedeutung
bestimmt ein einzelnes Zeichen als
Hotkey fr den Tastaturzugriff auf
den Button
gibt den Namen eines Datenfeldes
des aktuellen Datensatzes der mit
datasrc= bestimmten Datenquelle
an

[Universalattribute]

br
Bedeutung

Erzeugt einen Zeilenumbruch

Attribut

Wert

clear

left
all

HTML-Varianten
transitional,
frameset

right
none
[Universalattribute]

button
Bedeutung

Erzeugt einen Klick-Button

Attribut

Wert

accesskey

#CDATA

datafld

#CDATA

1234

Anhang C: HTML: Attributreferenz

Bedeutung

Erzeugt einen Klick-Button

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plaintext

strict, transitional,
frameset

nein
(Default:

| html

plaintext)
disabled

disabled
(leeres

strict, transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

gibt den URI einer Datenquelle

(nach RFC 2396) an, die mit dem
Button verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld= ermittelt werden, zu interpretieren sind
bestimmt, dass der Button nicht bettigt werden kann

Attribut)
name

#CDATA

onblur

#CDATA

onfocus

#CDATA

tabindex

[Zahl]

type

button |
submit |
reset

value

#CDATA

strict, transitional,
frameset

nein
nein
nein
nein
(Default:
submit)
nein

bestimmt einen Namen fr den

Button
beim Verlassen des verweissensitiven
Bereichs... (Script-Code)
wenn verweissensitiver Bereich den
Fokus hat... (Script-Code)
bestimmt die Tabulatorreihenfolge
fr Buttons durch Angabe einer Zahl
bestimmt den Typ des Buttons

bestimmt den Absendewert des Buttons

[Universalattribute]

caption
Bedeutung

Setzt eine Tabellenberschrift/Tabellenunterschrift

Attribut

Wert

align

top
bottom

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabellenberschrift aus

left
right
[Universalattribute]

center
Bedeutung

Markiert einen Bereich, der zentriert dargestellt wird

[Universalattribute]

C.6 Attributreferenz

1235

cite
Bedeutung

Markiert ein Zitat

[Universalattribute]

code
Bedeutung

Markiert Text als Quelltext einer Computersprache

[Universalattribute]

col
Bedeutung

Bestimmt Eigenschaften fr eine oder mehrere Tabellenspalten

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
richtet Tabellenspalten horizontal
aus

right
justify
char
char

#CDATA

strict, transitional,
frameset

nein

charoff

#CDATA

strict, transitional,
frameset

nein

span

#CDATA

nein

valign

top

strict, transitional,
frameset
strict, transitional,
frameset

nein

bestimmt in Verbindung mit

align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des
Ausrichtungszeichens
gibt an, fr wie viele Spalten die
Angaben gelten
richtet Tabellenspalten vertikal aus

strict, transitional,
frameset

nein

bestimmt die Spaltenbreite

middle
bottom
baseline
width

#CDATA

[Universalattribute]

1236

Anhang C: HTML: Attributreferenz

colgroup
Bedeutung

Bestimmt Default-Eigenschaften fr eine Gruppe von Tabellenspalten

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
gibt einen Wert fr die horizontale
Ausrichtung der Tabellenspalten vor

gibt einen Wert fr das Ausrichtungszeichen in Verbindung mit

align="char" vor
gibt einen Wert fr die Position des
Ausrichtungszeichens in Verbindung
mit align="char" vor
gibt an, fr wie viele Spalten die Angaben per Default gelten
gibt einen Wert fr die vertikale Ausrichtung der Tabellenspalten vor

right
justify
char
char

#CDATA

strict, transitional,
frameset

nein

charoff

#CDATA

strict, transitional,
frameset

nein

span

[Zahl]

nein

valign

top

strict, transitional,
frameset
strict, transitional,
frameset

strict, transitional,
frameset

nein

middle

nein

bottom
baseline
width

#CDATA

gibt einen Wert fr die Breite der

Tabellenspalten vor

[Universalattribute]

dd
Bedeutung

Markiert in einer Definitionsliste eine Definition zu einem Term

[Universalattribute]

del
Bedeutung

Markiert Text als gelscht im Sinne von nderungsmarkierung

Attribut

Wert

cite

#CDATA

datetime

#CDATA

[Universalattribute]

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

Bedeutung
gibt den URI (nach RFC 2396) an, wo
Grnde fr die nderung angegeben
sind
gibt Datum und Uhrzeit der nderung
nach ISO-Format an

C.6 Attributreferenz

1237

dfn
Bedeutung

Markiert eine Definition

[Universalattribute]

dir
Bedeutung

Markiert eine Verzeichnisliste

Attribut

Wert

compact

compact

(leeres
Attribut)

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass die Liste in engerer
Schrift dargestellt wird

[Universalattribute]

div
Bedeutung

Markiert einen allgemeinen Bereich

Attribut

Wert

align

left
center

HTML-Varianten
transitional,
frameset

erforderlich?
nein
(Default:
left)

Bedeutung
richtet den Inhalt des Bereichs aus

gibt den Namen eines Datenfeldes des

aktuellen Datensatzes der mit datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit dem Bereich
verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind

right
justify
datafld

#CDATA

strict, transitional,
frameset

nein

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plain-

strict, transitional,
frameset

nein
(Default:

text

plaintext)

html
[Universalattribute]

dl
Bedeutung

Markiert eine Definitionsliste

Attribut

Wert

compact

compact

(leeres
Attribut)
[Universalattribute]

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass die Liste in engerer
Schrift dargestellt wird

1238

Anhang C: HTML: Attributreferenz

dt
Bedeutung

Markiert in einer Definitionsliste einen zu definierenden Term

[Universalattribute]

em
Bedeutung

Markiert Text als emphatisch

[Universalattribute]

fieldset
Bedeutung

Markiert eine Gruppe von Formularelementen

[Universalattribute]

font
Bedeutung

Markiert Text mit Schriftgre, Schriftfarbe und Schriftart

Attribut

Wert

color

#CDATA

face

#CDATA

size

#CDATA

HTML-Varianten
transitional,
frameset
transitional,
frameset
transitional,
frameset

erforderlich?
nein
nein

Bedeutung
gibt die Schriftfarbe hexadezimal
(#XXXXXX) oder als Farbwert an
gibt die Schriftart an

ja

gibt die Schriftgre als Zahl als Zahl

absolut oder relativ mit Vorzeichen an

erforderlich?
ja

Bedeutung
gibt einen URI (nach RFC 2396) fr die
Verarbeitung der Formulardaten an
listet erlaubte Mime-Typen fr FileUpload (nach RFC 2045) auf
listet untersttzte Zeichenstze (nach
RFC 2045) auf

[Universalattribute]

form
Bedeutung

Definiert ein Formular

Attribut

Wert

action

#CDATA

accept

#CDATA

accept-

#CDATA

charset

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein
nein

C.6 Attributreferenz
Bedeutung
enctype

1239

Definiert ein Formular

#CDATA

strict, transitional,
frameset

nein
(Default:
application

gibt den Mime-Type (nach RFC 2045)

an, mit dem das Formular bertragen
wird

/x-wwwformmethod

get
post

name

#CDATA

onreset

#CDATA

onsubmit

#CDATA

target

#CDATA
_blank

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

urlencoded)
nein
(Default: get)
nein

nein
nein
nein

bestimmt, wie Formulardaten auf dem

Server zur Verfgung stehen
bestimmt einen Namen fr das Formular
beim Zurcksetzen des Formulars
(Script-Code)
beim Absenden des Formulars (ScriptCode)
bestimmt den Fensternamen fr Antwortausgaben

_parent
_self
_top
[Universalattribute]

frame
Bedeutung

Definiert ein Frame-Fenster

Attribut

Wert

frameborder

1
0

HTML-Varianten
transitional,
frameset

erforderlich?
nein (Default:
1)

longdesc

#CDATA

transitional,
frameset

nein

marginwidth

#CDATA

transitional,
frameset

nein

marginheight

#CDATA

transitional,
frameset

nein

name

#CDATA

nein

noresize

noresize

transitional,
frameset
transitional,
frameset

(leeres
Attribut)

nein

Bedeutung
gibt an, ob das Frame-Fenster einen
sichtbaren Rahmen haben soll oder
nicht
gibt einen URI (nach RFC 2396) an, wo
eine lngere Beschreibung zum Inhalt
des Frame-Fensters zu finden ist
gibt die Anzahl Pixel fr den Abstand
des Fensterinhalts zum linken und
rechten Fensterrand an
gibt die Anzahl Pixel fr den Abstand
des Fensterinhalts zum oberen und
unteren Fensterrand an
bestimmt einen Namen fr das FrameFenster
wenn angegeben, kann der Anwender
die Gre des Frame-Fensters nicht
verndern

1240

Anhang C: HTML: Attributreferenz

Bedeutung
scrolling

Definiert ein Frame-Fenster

yes
no

transitional,
frameset

nein (Default:
auto)

bestimmt, ob das Frame-Fenster Scrollbars erhlt

transitional,
frameset

nein

bestimmt einen URI (nach RFC 2396), die

in dem Frame-Fenster angezeigt wird

auto
src

#CDATA

[Universalattribute]

frameset
Bedeutung

Definiert ein Frame-Fenster

Attribut

Wert

cols

#CDATA

onload

#CDATA

onunload

#CDATA

rows

#CDATA

HTML-Varianten
transitional,
frameset

erforderlich?
nein (Default:
100%)

transitional,
frameset
transitional,
frameset
transitional,
frameset

nein
nein
nein

Bedeutung
bestimmt fr ein oder mehrere spaltenartig angeordnete Frame-Fenster die
Breitenverhltnisse
wenn das Frameset geladen ist...
(Script-Code)
wenn das Frameset verlassen wird...
(Script-Code)
bestimmt fr ein oder mehrere reihenartig angeordnete Frame-Fenster die
Hhenverhltnisse

[Universalattribute]

h1-h6
Bedeutung

Markiert eine berschrift 1. bis 6. Ordnung

Attribut

Wert

align

left
center

HTML-Varianten
transitional,
frameset

right

erforderlich?
nein
(Default:
left)

Bedeutung
richtet den Inhalt der berschrift aus

justify
[Universalattribute]

head
Bedeutung

Markiert den Kopfbereich einer HTML-Datei

Attribut

Wert

profile

#CDATA

HTML-Varianten
strict, transitional,
frameset

Universalattribute: dir lang

erforderlich?
nein

Bedeutung
gibt ein Verzeichnis fr Meta-Informationen als URI (nach RFC 2396) an

C.6 Attributreferenz

1241

hr
Bedeutung

Erzeugt eine horizontale Trennlinie

Attribut

Wert

align

left
center

HTML-Varianten
transitional,
frameset

right
noshade

noshade

(leeres
Attribut)
size

#CDATA

width

#CDATA

transitional,
frameset
transitional,
frameset
transitional,
frameset

erforderlich?
nein
(Default:
left)
nein

nein
nein

Bedeutung
richtet die Trennlinie aus

bestimmt, dass die Trennlinie flach

und ohne 3-D-Effekt dargestellt wird
bestimmt die Dicke der Trennlinie in
Pixeln
bestimmt die Lnge der Trennlinie in
Pixeln oder Prozent

[Universalattribute]

html
Bedeutung

Wurzelelement einer HTML-Datei

Attribut

Wert

version

#CDATA

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
gibt die verwendete HTML-Version an

erforderlich?
nein

Bedeutung
richtet die Grafik aus

Universalattribute: dir lang

i
Bedeutung

Markiert kursiv gedruckten Text

[Universalattribute]

iframe
Bedeutung

Definiert ein eingebettetes Fenster

Attribut

Wert

align

top
middle
bottom
left
center
right

HTML-Varianten
transitional,
frameset

1242

Anhang C: HTML: Attributreferenz

Bedeutung
frameborder

Definiert ein eingebettetes Fenster

1
0

transitional,
frameset

nein
(Default: 1)

transitional,
frameset
transitional,
frameset

nein

height

#CDATA

longdesc

#CDATA

marginwidth

#CDATA

transitional,
frameset

nein

marginheight

#CDATA

transitional,
frameset

nein

name

#CDATA

nein

scrolling

yes

transitional,
frameset
transitional,
frameset

no
auto
src

#CDATA

transitional,
frameset

width

#CDATA

transitional,
frameset

nein

nein
(Default:
auto)
nein

nein

gibt an, ob das Frame-Fenster einen

sichtbaren Rahmen haben soll oder
nicht
bestimmt die Hhe des Frame-Fensters
in Pixeln oder Prozent
gibt einen URI (nach RFC 2396) an, wo
eine lngere Beschreibung zum Inhalt
des Frame-Fensters zu finden ist
gibt die Anzahl Pixel fr den Abstand
des Fensterinhalts zum linken und
rechten Fensterrand an
gibt die Anzahl Pixel fr den Abstand
des Fensterinhalts zum oberen und
unteren Fensterrand an
bestimmt einen Namen fr das FrameFenster
bestimmt, ob das Frame-Fenster Scrollbars erhlt
bestimmt einen URI (nach RFC 2396),
die in dem Frame-Fenster angezeigt
wird
bestimmt die Breite des Frame-Fensters
in Pixeln oder Prozent

[Universalattribute]

img
Bedeutung

Referenziert eine Grafik

Attribut

Wert

align

top
middle

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Grafik aus

strict, transitional,
frameset
transitional,
frameset
strict, transitional,
frameset

ja

bestimmt einen Alternativtext, falls die

Grafik nicht anzeigbar ist
bewirkt einen Rahmen um die Grafik
Dicke in Pixeln oder Prozent
gibt die Anzeigehhe der Grafik in
Pixeln oder Prozent an

bottom
left
center
right
alt

#CDATA

border

#CDATA

height

#CDATA

nein
nein

C.6 Attributreferenz
Bedeutung

1243

Referenziert eine Grafik

hspace

#CDATA

transitional,
frameset

nein

ismap

ismap

strict, transitional,
frameset

nein

(leeres
Attribut)

bestimmt den horizontalen Abstand

zwischen Grafik und umflieendem
Text in Pixeln oder Prozent
Grafik benutzt ein serverseitiges Handling fr verweissensitive Flchen

longdesc

#CDATA

strict, transitional,
frameset

nein

name

#CDATA

nein

src

#CDATA

ja

gibt die Quelldatei der Grafik an

usemap

#CDATA

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
transitional,
frameset

gibt einen URI (nach RFC 2396) an, wo

eine Langbeschreibung der Grafik zu
finden ist
bestimmt einen Namen fr die Grafik

strict, transitional,
frameset

nein

vspace

#CDATA

width

#CDATA

nein

gibt den URI/den Ankernamen eines

map-Elements an

nein

bestimmt den horizontalen Abstand

zwischen Grafik und umflieendem
Text in Pixeln oder Prozent
gibt die Anzeigebreite der Grafik an

[Universalattribute]

input
Bedeutung

Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt

Attribut

Wert

accept

#CDATA

accesskey

#CDATA

align

top
middle

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset
transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset

nein

nein

Bedeutung
Listet bei input type="file" erlaubte
Mime-Typen fr File-Upload (nach
RFC 2045) auf
bestimmt ein einzelnes Zeichen als
Hotkey fr das Element
richtet das Element aus

bottom
left
center
right
alt

#CDATA

checked

checked

(leeres
Attribut)

nein

bestimmt einen Alternativtext, falls das

Element nicht anzeigbar ist
bestimmt bei type="radio" oder
type="checkbox", dass das Element
ausgewhlt ist

1244

Anhang C: HTML: Attributreferenz

Bedeutung

Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt

datafld

#CDATA

strict, transitional,
frameset

nein

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plain-

strict, transitional,
frameset

nein (Default:
plaintext)

strict, transitional,
frameset

nein

strict, transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

text
html
disabled

disabled

(leeres
Attribut)
ismap

ismap

(leeres
Attribut)
maxlength

[Zahl]

name

#CDATA

onblur

#CDATA

onchange

#CDATA

onfocus

#CDATA

onselect

#CDATA

readonly

readonly

(leeres
Attribut)
size

#CDATA

src

#CDATA

tabindex

[Zahl]

type

text
password
checkbox
radio
submit
reset
file
hidden
image
button

nein
nein
nein
nein
nein
nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

strict, transitional,
frameset

nein
(Default:
text)

nein
nein

gibt den Namen eines Datenfeldes des

aktuellen Datensatzes der mit
datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit dem Formularelement verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind
bestimmt, dass das Element nicht verndert werden kann
Grafik bei input type="image"
benutzt ein serverseitiges Handling fr
verweissensitive Flchen
bestimmt die maximale Anzahl erlaubter Zeichen im Element
bestimmt einen Namen fr das Element
beim Verlassen des Elements... (ScriptCode)
wenn das Element gendert wurde...
(Script-Code)
wenn das Element den Fokus hat...
(Script-Code)
wenn das Element ausgewhlt ist...
(Script-Code)
bestimmt, dass der Wert des Elements
nicht verndert werden kann
bestimmt die Anzeigebreite des Elements
gibt bei input type="image" die
Quelldatei der Grafik an
bestimmt die Tabulatorreihenfolge fr
Formularelemente durch Angabe einer
Zahl
bestimmt den Typ des Formularelements

C.6 Attributreferenz
Bedeutung

1245

Erzeugt ein Formularelement, Typ wird durch Attribut bestimmt

usemap

#CDATA

strict, transitional,
frameset

nein

value

#CDATA

strict, transitional,
frameset

nein

gibt bei input type="image" den

URI/den Ankernamen eines map-Elements an
bestimmt den Wert des Elements

[Universalattribute]

ins
Bedeutung

Markiert Text als eingefgt im Sinne von nderungsmarkierung

Attribut

Wert

cite

#CDATA

datetime

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

Bedeutung
gibt den URI (nach RFC 2396) an, wo
Grnde fr die nderung angegeben
sind
gibt Datum und Uhrzeit der nderung
nach ISO-Format an

[Universalattribute]

isindex
Bedeutung

Erzeugt ein einzeiliges Eingabefeld

Attribut

Wert

prompt

#CDATA

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Universalattribute: id class style title dir lang

kbd
Bedeutung

Markiert Text als Tastatureingabe

[Universalattribute]

Bedeutung
bestimmt den Labeltext des Elements

1246

Anhang C: HTML: Attributreferenz

label
Bedeutung

Ordnet Text einem bestimmten Formularfeld zu

Attribut

Wert

accesskey

#CDATA

for

[IDREF]

onblur

#CDATA

onfocus

#CDATA

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein
nein
nein
nein

Bedeutung
bestimmt ein einzelnes Zeichen als
Hotkey fr das zugehrige Element
gibt die ID des Elements an, zu dem
das Label gehrt
beim Verlassen des zugehrigen Elements... (Script-Code)
wenn das zugehrige Element den Fokus hat... (Script-Code)

[Universalattribute]

legend
Bedeutung

Definiert eine berschrift fr eine Gruppe von Formularelementen

Attribut

Wert

accesskey

#CDATA

align

left
top

HTML-Varianten
strict, transitional,
frameset
transitional,
frameset

erforderlich?
nein
nein

Bedeutung
bestimmt ein einzelnes Zeichen als
Hotkey fr die Elementgruppe
richtet den Inhalt der berschrift aus

right
bottom
[Universalattribute]

li
Bedeutung

Markiert einen Listeneintrag

Attribut

Wert

type

disc
square

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt das Aufzhlungszeichen oder
den Nummerierungstyp des Listeneintrags

transitional,
frameset

nein

setzt den Wert der laufenden Nummerierung neu

circle
1
a
A
i
I
value

[Zahl]

[Universalattribute]

C.6 Attributreferenz

1247

link
Bedeutung

Definiert logische Beziehungen zu anderen Dateien

Attribut

Wert

charset

#CDATA

href

#CDATA

hreflang

#CDATA

media

#CDATA

rel

#CDATA

rev

#CDATA

target

#CDATA
_blank

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein
nein
nein
nein
(Default:
screen)
nein
nein
nein

Bedeutung
gibt den Zeichensatz der Verknpfung
(laut RFC 2045) an
gibt den URI der Verknpfung (nach
RFC 2396) an
gibt die Landessprache der Verknpfung (nach RFC 1766) an
bestimmt das Ausgabemedium

bestimmt die Verknpfung als Vorwrtsverknpfung

bestimmt die Verknpfung als Rckwrtsverknpfung
bestimmt den Fensternamen zur Ausgabe des Verknpfungsziels

_parent
_self
_top
type

#CDATA

strict, transitional,
frameset

nein

bestimmt den Mime-Type des Verknpfungsziels (laut RFC 2045)

[Universalattribute]

map
Bedeutung

Markiert einen Definitionsbereich fr verweissensitive Grafiken

Attribut

Wert

name

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
ja

Bedeutung
bestimmt einen Ankernamen fr den
Bereich

erforderlich?
nein

Bedeutung
bestimmt, dass die Liste in engerer
Schrift dargestellt wird

[Universalattribute]

menu
Bedeutung

Markiert eine Menliste

Attribut

Wert

compact

compact

(leeres
Attribut)
[Universalattribute]

HTML-Varianten
transitional,
frameset

1248

Anhang C: HTML: Attributreferenz

meta
Bedeutung

Definiert Meta-Daten wie Kurzbeschreibung und Stichwrter fr eine Datei

Attribut

Wert

name

[Name]

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein

content

#CDATA

http-equiv

[Name]

strict, transitional,
frameset

nein

scheme

[Name]

strict, transitional,
frameset

nein

ja

Bedeutung
benennt eine bestimmte Eigenschaft
fr Meta-Informationen
definiert den Wert fr die Eigenschaft,
die bei http-equiv= oder name= definiert wird
benennt eine bestimmte Eigenschaft
fr Meta-Informationen (fr HTTPKopfdaten)
bestimmt ein Schema fr den Wert der
Eigenschaft

Universalattribute: dir | lang

noframes
Bedeutung

Markiert einen Bereich fr den Fall, dass keine Frames angezeigt werden knnen

[Universalattribute]

noscript
Bedeutung

Markiert einen Bereich fr den Fall, dass ein Script nicht ausgefhrt werden kann

[Universalattribute]

object
Bedeutung

Definiert ein Multimedia-Objekt

Attribut

Wert

align

top
middle

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
richtet das Objekt aus

strict, transitional,
frameset

nein

gibt eine kommaseparierte Liste mit

Archivdateien fr das Objekt an

bottom
left
center
right
archive

#CDATA

C.6 Attributreferenz
Bedeutung

Definiert ein Multimedia-Objekt

transitional,
frameset
strict, transitional,
frameset

nein

#CDATA

strict, transitional,
frameset

nein

codetype

#CDATA

nein

data

#CDATA

datafld

#CDATA

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plaintext

strict, transitional,
frameset

nein
(Default:

strict, transitional,
frameset

nein

strict, transitional,
frameset
transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

border

#CDATA

classid

#CDATA

codebase

html

nein

nein
nein

plaintext)
declare

1249

declare

(leeres
Attribut)
height

#CDATA

hspace

#CDATA

name

#CDATA

standby

#CDATA

tabindex

[Zahl]

type

#CDATA

usemap

#CDATA

vspace

#CDATA

transitional,
frameset

nein

width

#CDATA

strict, transitional,
frameset

nein

[Universalattribute]

nein

nein

nein
nein

bewirkt einen Rahmen um das Objekt

Dicke in Pixeln oder Prozent
gibt einen URI (nach RFC 2396) oder
eine eindeutige Bezeichnung fr das
Objekt an
gibt den Basis-URI fr Angaben zu
classid=, data= und archive= (nach
RFC 2396) an
gibt den Mime-Type des Quelltextes
der Datenquelle (nach RFC 2045) an
gibt den URI der Datenquelle (nach
RFC 2396) an
gibt den Namen eines Datenfeldes des
aktuellen Datensatzes der mit
datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit dem Objekt verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind
bewirkt, dass das Objekt zwar geladen,
aber nicht initialisiert (z.B. nicht abgespielt) wird
gibt die Anzeigehhe des Objekts in Pixeln oder Prozent an
bestimmt den horizontalen Abstand
zwischen Objekt und umflieendem
Text in Pixeln oder Prozent
gibt einen Namen fr das Objekt an
definiert einen Meldungstext, der angezeigt wird, whrend das Objekt geladen wird
bestimmt die Tabulatorreihenfolge fr
Objekte durch Angabe einer Zahl
gibt den Mime-Type der Datenquelle
(nach RFC 2045) an
gibt bei Objekten, die verweissensitive
Grafiken behandeln, den URI/den Ankernamen eines map-Elements an
bestimmt den horizontalen Abstand
zwischen Objekt und umflieendem
Text in Pixeln oder Prozent
gibt die Anzeigebreite des Objekts in
Pixeln oder Prozent an

1250

Anhang C: HTML: Attributreferenz

ol
Bedeutung

Markiert eine nummerierte Liste

Attribut

Wert

compact

compact

(leeres
Attribut)
start

[Zahl]

type

1
a

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass die Liste in engerer
Schrift dargestellt wird

transitional,
frameset
transitional,
frameset

nein

bestimmt einen Startwert fr die

Nummerierung (Dezimalwert)
bestimmt die Art der Nummerierung

nein

A
i
I
[Universalattribute]

optgroup
Bedeutung

Markiert eine Gruppe von Eintrgen in einer Menstruktur

Attribut

Wert

disabled

disabled

(leeres
Attribut)
label

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass die Gruppe von Eintrgen nicht ausgewhlt werden kann

strict, transitional,
frameset

ja

bestimmt den Text des Gruppeneintrags

[Universalattribute]

option
Bedeutung

Markiert einen Eintrag in einer Auswahlliste

Attribut

Wert

disabled

disabled

(leeres
Attribut)
label

#CDATA

selected

selected

(leeres
Attribut)
value

#CDATA

[Universalattribute]

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass der Eintrag nicht ausgewhlt werden kann

strict, transitional,
frameset
strict, transitional,
frameset

nein

bestimmt den Text des Eintrags im

Zusammenhang mit Menstrukturen
bestimmt, dass vorausgewhlt ist

strict, transitional,
frameset

nein

nein

bestimmt den Absendewert des Eintrags

C.6 Attributreferenz

1251

p
Bedeutung

Markiert einen Textabsatz

Attribut

Wert

align

left
center

HTML-Varianten
transitional,
frameset

right

erforderlich?
nein
(Default:
left)

Bedeutung
richtet den Inhalt des Textabsatzes aus

justify
[Universalattribute]

param
Bedeutung

Definiert Parameter eines Multimedia-Objekts oder Java-Applets

Attribut

Wert

id

[ID]

name

#CDATA

value

#CDATA

valuetype

data
ref

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

object
type

#CDATA

strict, transitional,
frameset

erforderlich?
nein
ja
nein
nein
(Deafault:
data)
nein

Bedeutung
gibt eine eindeutige Bezeichnung fr
den Parameter an
gibt einen Namen fr den Parameter
an
gibt einen Initialisierungswert fr den
Parameter an
gibt an, wie der Initialisierungswert
von value= zu interpretieren ist
gibt den Mime-Type des Wertes (nach
RFC 2045) im Fall von
valuetype="ref" an

pre
Bedeutung

Formatiert einen Bereich wie im Editor eingegeben (prformatierter Text)

Attribut

Wert

width

[Zahl]

[Universalattribute]

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
gibt eine Anzahl Zeichen pro Zeile an

1252

Anhang C: HTML: Attributreferenz

q
Bedeutung

Markiert ein Zitat

Attribut

Wert

cite

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
gibt den URI der Zitatquelle (nach RFC
2396) an

[Universalattribute]

s
Bedeutung

Markiert Text als durchgestrichen

[Universalattribute]

samp
Bedeutung

Markiert Text als Beispiel

[Universalattribute]

script
Bedeutung

Definiert einen Bereich fr Scripts (z.B. JavaScript)

Attribut

Wert

charset

#CDATA

defer

defer

(leeres
Attribut)
event

#CDATA

language

#CDATA

for

[IDREF]

src

#CDATA

type

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

strict, transitional,
frameset
transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein
nein
nein
nein
ja

Bedeutung
gibt den Zeichensatz einer mit src=
angegebenen externen Scriptdatei (laut
RFC 2045) an
verhindert, dass das Script irgendwelche Inhalte im Dokumentfenster erzeugen kann
fhrt das Script abhngig davon aus, ob
ein bestimmtes Ereignis eingetreten ist
gibt die verwendete Script-Sprache an
gibt die ID des Elements an, fr das das
Script gelten soll
bestimmt einen URI (nach RFC 2396),
der den Script-Code enthlt
bestimmt den Mime-Type des Scripts
(laut RFC 2045)

C.6 Attributreferenz

1253

select
Bedeutung

Definiert eine Auswahlliste

Attribut

Wert

datafld

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

datasrc

dataformatas

#CDATA

strict, transitional,
frameset

nein

plain-

strict, transitional,
frameset

nein
(Default:

strict, transitional,
frameset

nein

strict, transitional,
frameset

nein

erlaubt es, mehrere Eintrge zu selektieren

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

bestimmt einen Namen fr die Auswahlliste

beim Verlassen der Auswahlliste...
(Script-Code)
wenn ein (anderer) Eintrag ausgewhlt
wurde... (Script-Code)
wenn die Auswahlliste den Fokus hat...
(Script-Code)
bestimmt die Anzahl der gleichzeitig
sichtbaren Eintrge
bestimmt die Tabulatorreihenfolge fr
Formularelemente durch Angabe einer
Zahl

text

plaintext)

html
disabled

disabled

(leeres
Attribut)
multiple

multiple

(leeres
Attribut)
name

#CDATA

onblur

#CDATA

onchange

#CDATA

onfocus

#CDATA

size

#CDATA

tabindex

[Zahl]

nein
nein
nein
nein
nein

Bedeutung
gibt den Namen eines Datenfeldes des
aktuellen Datensatzes der mit
datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit der Auswahlliste
verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind
bestimmt, dass die Auswahlliste nicht
benutzt werden kann

[Universalattribute]

small
Bedeutung

Markiert Text, der kleiner dargestellt wird als normal

[Universalattribute]

1254

Anhang C: HTML: Attributreferenz

span
Bedeutung

Markiert einen inline-Bereich zur Formatierung, z.B. mit CSS-Stylesheets

Attribut

Wert

datafld

#CDATA

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plaintext

strict, transitional,
frameset

nein
(Default:

html

plaintext)

Bedeutung
gibt den Namen eines Datenfeldes des
aktuellen Datensatzes der mit
datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit dem Bereich
verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind

[Universalattribute]

strike
Bedeutung

Markiert einen Text als durchgestrichen

[Universalattribute]

strong
Bedeutung

Markiert einen Text als betont

[Universalattribute]

style
Bedeutung

Markiert einen Bereich fr Stylesheet-Definitionen, z.B. in CSS

Attribut

Wert

media

#CDATA

title

#CDATA

type

#CDATA

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

Universalattribute: dir lang

erforderlich?
nein
(Default:
screen)
nein
ja

Bedeutung
bestimmt das Ausgabemedium

bestimmt einen Titel fr den Style-Bereich

bestimmt den Mime-Type der StyleSprache (laut RFC 2045)

C.6 Attributreferenz

1255

sub
Bedeutung

Markiert einen Text als tiefgestellt

[Universalattribute]

sup
Bedeutung

Markiert einen Text als hochgestellt

[Universalattribute]

table
Bedeutung

Erzeugt eine Tabelle

Attribut

Wert

align

left
center

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabelle aus

strict, transitional,
frameset
transitional,
frameset

nein

bewirkt einen sichtbaren Rahmen um

die Tabelle Dicke in Pixeln
gibt die tabellenweite Hintergrundfarbe
hexadezimal (in der Form #XXXXXX)
oder als Farbwort an
bestimmt den Innenabstand zwischen
Zellenrand und Zelleninhalt in Pixeln
oder Prozent
bestimmt den Abstand zwischen den
Zellen untereinander in Pixeln oder
Prozent
gibt den Namen eines Datenfeldes des
aktuellen Datensatzes der mit datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit der Tabelle verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind

right
border

#CDATA

bgcolor

#CDATA

cellpadding

#CDATA

strict, transitional,
frameset

nein

cellspacing

#CDATA

strict, transitional,
frameset

nein

datafld

#CDATA

strict, transitional,
frameset

nein

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plaint

strict, transitional,
frameset

nein
(Default:

ext
html

nein

plaintext)

1256

Anhang C: HTML: Attributreferenz

Bedeutung
frame

Erzeugt eine Tabelle

void
above

strict, transitional,
frameset

nein

gibt an, welche Rahmen der Tabelle

sichtbar sein sollen

strict, transitional,
frameset

nein

gibt an, welche Gitternetzlinien innerhalb der Tabelle sichtbar sein sollen

definiert einen Text, der Sehbehinderten die Tabelle im Fall von Sprachausgabe erlutert
gibt die Anzeigebreite der Tabelle in
Pixeln oder Prozent an

below
hsides
lhs
rhs
vsides
box
border
rules

none
groups
rows
cols
all

summary

#CDATA

strict, transitional,
frameset

nein

width

#CDATA

strict, transitional,
frameset

nein

[Universalattribute]

tbody
Bedeutung

Bestimmt in einer Tabelle den Tabellenkrper

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabellenzellen des Bereichs
horizontal aus

bestimmt in Verbindung mit

align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des Ausrichtungszeichens
richtet Tabellenzellen des Bereichs vertikal aus

right
justify
char
char

#CDATA

strict, transitional,
frameset

nein

charoff

#CDATA

strict, transitional,
frameset

nein

valign

top

strict, transitional,
frameset

nein

middle
bottom
baseline
[Universalattribute]

C.6 Attributreferenz

1257

td
Bedeutung

Markiert eine Tabellenzelle

Attribut

Wert

abbr

#CDATA

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

strict, transitional,
frameset

nein

Bedeutung
definiert einen kurzen Hinweistext fr
die Zuordnung der Tabellenzelle, die
z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
richtet die Tabellenzelle horizontal aus

right
justify
char
axis

#CDATA

strict, transitional,
frameset

nein

bgcolor

#CDATA

transitional,
frameset

nein

char

#CDATA

strict, transitional,
frameset

nein

charoff

#CDATA

strict, transitional,
frameset

nein

colspan

[Zahl]

headers

[IDREFS]

strict, transitional,
frameset
strict, transitional,
frameset

nein
(Default: 1)
nein

height

#CDATA

nein

nowrap

nowrap

transitional,
frameset
transitional,
frameset

(leeres
Attribut)
rowspan

[Zahl]

scope -

row
col
rowgroup
colgroup

strict, transitional,
frameset
strict, transitional,
frameset

nein

nein
(Default: 1)
nein

definiert eine Liste von Kategorien, zu

der die Zelle gehrt, und die z.B. bei
der Sprachausgabe dem Zelleninhalt
vorangesprochen werden
gibt die Hintergrundfarbe der Zelle hexadezimal (in der Form #XXXXXX)
oder als Farbwert an
bestimmt in Verbindung mit
align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des Ausrichtungszeichens
bestimmt, ber wie viele Spalten sich
die aktuelle Zelle erstrecken soll
definiert eine Liste von ID-Namen von
Zeilen- oder Spaltenberschriften, zu
denen die Zelle gehrt, was z.B. fr
Sprachausgabe der Tabelle von Bedeutung ist
gibt die Anzeigehhe der Zelle in
Pixeln oder Prozent an
verhindert automatischen Zeilenumbruch innerhalb der Zelle
bestimmt, ber wie viele Zeilen sich die
aktuelle Zelle erstrecken soll
definiert, fr welche restlichen Zeilen
oder Spalten die aktuelle Zelle berschriftencharakter hat, was z.B. fr
Sprachausgabe der Tabelle von Bedeutung ist

1258

Anhang C: HTML: Attributreferenz

Bedeutung
valign

Markiert eine Tabellenzelle

top
middle

transitional,
frameset

nein

richtet Tabellenzelle vertikal aus

transitional,
frameset

nein

gibt die Anzeigebreite der Zelle in

Pixeln oder Prozent an

bottom
baseline
width

#CDATA

[Universalattribute]

textarea
Bedeutung

Definiert ein mehrzeiliges Eingabefeld

Attribut

Wert

accesskey

#CDATA

HTML-Varianten
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

erforderlich?
nein

cols

[Zahl]

datafld

#CDATA

datasrc

#CDATA

strict, transitional,
frameset

nein

dataformatas

plaintex

strict, transitional,
frameset

nein
(Default:

strict, transitional,
frameset

nein

strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset
strict, transitional,
frameset

nein

t
disabled

(leeres
Attribut)
name

#CDATA

onblur

#CDATA

onchange

#CDATA

onfocus

#CDATA

onselect

#CDATA

readonly

readonly

(leeres
Attribut)

nein

plaintext)

html
disabled

ja

nein
nein
nein
nein
nein

Bedeutung
bestimmt ein einzelnes Zeichen als
Hotkey fr das Element
bestimmt die Anzahl Zeichen pro Zeile
gibt den Namen eines Datenfeldes des
aktuellen Datensatzes der mit datasrc= bestimmten Datenquelle an
gibt den URI einer Datenquelle (nach
RFC 2396) an, die mit dem
Formularelement verknpft ist
gibt an, wie die Daten, die aufgrund
der Angaben datasrc= und datafld=
ermittelt werden, zu interpretieren sind
bestimmt, dass das Element nicht
verndert werden kann
bestimmt einen Namen fr das Element
beim Verlassen des Elements... (ScriptCode)
wenn das Element gendert wurde...
(Script-Code)
wenn das Element den Fokus hat...
(Script-Code)
wenn das Element ausgewhlt ist...
(Script-Code)
bestimmt, dass der Wert des Elements
nicht verndert werden kann

C.6 Attributreferenz
Bedeutung

1259

Definiert ein mehrzeiliges Eingabefeld

rows

[Zahl]

tabindex

[Zahl]

strict, transitional,
frameset
strict, transitional,
frameset

ja

bestimmt die Anzahl sichtbarer Zeilen

nein

bestimmt die Tabulatorreihenfolge fr

Formularelemente durch Angabe einer
Zahl

[Universalattribute]

tfoot
Bedeutung

Bestimmt in einer Tabelle den Tabellenfu

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabellenzellen des Bereichs
horizontal aus

bestimmt in Verbindung mit

align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des Ausrichtungszeichens
richtet Tabellenzellen des Bereichs vertikal aus

right
justify
char
char

#CDATA

strict, transitional,
frameset

nein

charoff

#CDATA

strict, transitional,
frameset

nein

valign

top

strict, transitional,
frameset

nein

middle
bottom
baseline
[Universalattribute]

th
Bedeutung

Markiert eine Tabellenkopfzelle

Attribut

Wert

abbr

#CDATA

align

left
center
right
justify
char

HTML-Variante erforderlich?
nein
strict,
transitional,
frameset
strict,
transitional,
frameset

nein

Bedeutung
definiert einen kurzen Hinweistext fr
die Zuordnung der Tabellenzelle, die
z.B. bei der Sprachausgabe dem Zelleninhalt vorangesprochen wird
richtet die Tabellenkopfzelle horizontal
aus

1260

Anhang C: HTML: Attributreferenz

Bedeutung

Markiert eine Tabellenkopfzelle

axis

#CDATA

strict,
transitional,
frameset

nein

bgcolor

#CDATA

transitional,
frameset

nein

char

#CDATA

nein

charoff

#CDATA

colspan

[Zahl]

headers

[IDREFS]

strict,
transitional,
frameset
strict,
transitional,
frameset
strict,
transitional,
frameset
strict,
transitional,
frameset

height

#CDATA

nein

nowrap

nowrap

transitional,
frameset
transitional,
frameset

(leeres
Attribut)
rowspan

[Zahl]

scope

row
col
rowgroup

nein

nein (Default:
1)
nein

nein

top
middle
bottom

definiert eine Liste von ID-Namen von

Zeilen- oder Spaltenberschriften, zu
denen die Zelle gehrt, was z.B. fr
Sprachausgabe der Tabelle von Bedeutung ist
gibt die Anzeigehhe der Zelle in Pixeln oder Prozent an
verhindert automatischen Zeilenumbruch innerhalb der Zelle

strict,
transitional,
frameset
strict,
transitional,
frameset

nein (Default:
1)

bestimmt, ber wie viele Zeilen sich die

aktuelle Zelle erstrecken soll

nein

strict,
transitional,
frameset

nein

definiert, fr welche restlichen Zeilen

oder Spalten die aktuelle Zelle berschriftencharakter hat, was z.B. fr
Sprachausgabe der Tabelle von Bedeutung ist
richtet Tabellenkopfzelle vertikal aus

transitional,
frameset

nein

colgroup
valign

definiert eine Liste von Kategorien, zu

der die Zelle gehrt und die z.B. bei der
Sprachausgabe dem Zelleninhalt
vorangesprochen werden
gibt die Hintergrundfarbe der Zelle hexadezimal (in der Form #XXXXXX)
oder als Farbwert an
bestimmt in Verbindung mit
align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des Ausrichtungszeichens
bestimmt, ber wie viele Spalten sich
die aktuelle Zelle erstrecken soll

baseline
width

#CDATA

[Universalattribute]

gibt die Anzeigebreite der Zelle in Pixeln oder Prozent an

C.6 Attributreferenz

1261

thead
Bedeutung

Bestimmt in einer Tabelle den Tabellenkopf

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabellenzellen des Bereichs
horizontal aus

strict, transitional,
frameset
strict, transitional,
frameset

nein

strict, transitional,
frameset

nein

bestimmt in Verbindung mit

align="char" das Ausrichtungszeichen
bestimmt in Verbindung mit
align="char" die Position des Ausrichtungszeichens
richtet Tabellenzellen des Bereichs vertikal aus

right
justify
char
char

#CDATA

charoff

#CDATA

valign

top
middle

nein

bottom
baseline
[Universalattribute]

title
Bedeutung

Definiert den Titel einer HTML-Datei

[Universalattribute]

tr
Bedeutung

Definiert eine Tabellenzeile

Attribut

Wert

align

left
center

HTML-Varianten
strict, transitional,
frameset

erforderlich?
nein

Bedeutung
richtet die Tabellenzellen der Zeile horizontal aus

gibt die Hintergrundfarbe der Tabellenzeile hexadezimal (in der Form

#XXXXXX) oder als Farbwert an
bestimmt in Verbindung mit
align="char" das Ausrichtungszeichen

right
justify
char
bgcolor

#CDATA

transitional,
frameset

nein

char

#CDATA

strict, transitional,
frameset

nein

1262

Anhang C: HTML: Attributreferenz

Bedeutung

Definiert eine Tabellenzeile

charoff

#CDATA

strict, transitional,
frameset

nein

valign

top

strict, transitional,
frameset

nein

middle

bestimmt in Verbindung mit

align="char" die Position des Ausrichtungszeichens
richtet Tabellenzellen der Zeile vertikal
aus

bottom
baseline
[Universalattribute]

tt
Bedeutung

Markiert einen Text, der im Schreibmaschinenstil dargestellt wird

[Universalattribute]

u
Bedeutung

Markiert einen Text als unterstrichen

[Universalattribute]

ul
Bedeutung

Markiert eine Aufzhlungsliste

Attribut

Wert

compact

compact

(leeres
Attribut)
type

disc
sqare

HTML-Varianten
transitional,
frameset

erforderlich?
nein

Bedeutung
bestimmt, dass die Liste in engerer
Schrift dargestellt wird

transitional,
frameset

nein

bestimmt die Art des Aufzhlungszeichens

circle
[Universalattribute]

var
Bedeutung

Markiert einen Text als Variable

[Universalattribute]

1263

HTML: Zeichenreferenz

D.1

Allgemeines zur HTML-Zeichenreferenz

In der Zeichenreferenz geht es um Zeichen, die zwischen dem Anfangs- und dem End-Tag eines
HTML-Elements als Text stehen knnen (siehe auch #PCDATA, Anhang B.4), sowie um Zeichen,
die bei Wertzuweisungen an viele Attribute notiert werden knnen (siehe auch #CDATA, Anhang
C.2). Bei einem HTML-Konstrukt wie <p class="Aussage">Zeichen knnen viel
bedeuten</p> ist zum einen die Zeichenfolge Zeichen knnen viel bedeuten relevant und
zum anderen die Zeichenfolge Aussage.
Seit HTML 4.0 kann jedes Zeichen aus dem Zeichenvorrat nach ISO 10646 (deckungsgleich mit
dem Unicode-Standard) notiert werden. Beliebige Zeichen aus diesem gewaltigen Zeichenvorrat
knnen durch eine spezielle numerische Notation erzeugt werden. Das Notations-Schema fr
solche numerischen Notationen lautet:
&#[x][Nummer];

Beispiele einer Notation in HTML:

&#945;
&#x3B1;

Das x notieren Sie dann, wenn Sie die Nummer hexadezimal angeben. Bei dezimaler Angabe
lassen Sie das x weg. Die Nummer eines gewnschten Zeichens knnen Sie aus den so genannten
Unicode-Charts ermitteln (siehe Abschnitt 23.3 ber das Unicode-System).
Neben der numerischen Unicode-Notation gibt es in HTML fr hufiger verwendete
Sonderzeichen auch so genannte named entities, benannte Zeichen. Alle benannten Zeichen
werden nach dem folgenden Schema notiert:
&[Name];

Beispiel einer Notation in HTML:

&alpha;

Die verfgbaren benannten Zeichen knnen Sie den folgenen Tabellen entnehmen. In der jeweils
ersten Spalte der Tabellen wird versucht, das Zeichen mit Hilfe des HTML-Namens darzustellen.
Ein WWW-Browser muss jedoch HTML 4.0 interpretieren, und auch dann kann er nur solche
Zeichen darstellen, fr die er eine geeignete Schriftart vorfindet. In den Tabellen sind Zeichen,
die im Buch aus technischen Grnden nicht gedruckt werden knnen, als nicht darstellbar markiert.

1264

Anhang D: HTML Zeichenreferenz

D.2

Benannte Zeichen fr HTML-eigene Zeichen

Zeichen

Beschreibung

Name in HTML

Unicode in HTML

"

&quot;

&#34;

&amp;

&#38;

&lt;

&#60;

>

Anfhrungszeichen oben
Ampersand-Zeichen, kaufmnnisches
Und
ffnende spitze Klammer
schlieende spitze Klammer

&gt;

&#62;

D.3

Benannte Zeichen fr den Zeichensatz ISO 8859-1

&
<

Die HTML-Namen dieser Zeichen sind seit HTML 3.2 verfgbar.

Zeichen

Beschreibung

Name in HTML

Unicode in HTML

erzwungenes Leerzeichen
umgekehrtes Ausrufezeichen
Cent-Zeichen
Pfund-Zeichen
Whrungs-Zeichen
Yen-Zeichen
durchbrochener Strich
Paragraph-Zeichen
Pnktchen oben
Copyright-Zeichen
Ordinal-Zeichen weiblich
angewinkelte Anfhrungszeichen links
Verneinungs-Zeichen (nicht darstellbar)
kurzer Trennstrich (nicht darstellbar)
Registrierte Marke
berstrich
Grad-Zeichen
Plusminus-Zeichen
Hoch-2-Zeichen
Hoch-3-Zeichen
Acute-Zeichen
Mikro-Zeichen
Absatz-Zeichen
Mittelpunkt
Hkchen unten
Hoch-1-Zeichen

&nbsp;

&#160;

&iexcl;

&#161;

&cent;

&#162;

&pound;

&#163;

&curren;

&#164;

&yen;

&#165;

&brvbar;

&#166;

&sect;

&#167;

&uml;

&#168;

&copy;

&#169;

&ordf;

&#170;

&laquo;

&#171;

&not;

&#172;

&shy;

&#173;

&reg;

&#174;

&macr;

&#175;

&deg;

&#176;

&plusmn;

&#177;

&sup2;

&#178;

&sup3;

&#179;

&acute;

&#180;

&micro;

&#181;

&para;

&#182;

&middot;

&#183;

&cedil;

&#184;

&sup1;

&#185;

D.3 Benannte Zeichen fr den Zeichensatz ISO 8859-1

Zeichen

Beschreibung

Name in HTML

Ordinal-Zeichen mnnlich
angewinkelte Anfhrungszeichen rechts
ein Viertel
ein Halb
drei Viertel
umgekehrtes Fragezeichen
A mit Accent grave
A mit Accent acute
A mit Circumflex
A mit Tilde
A Umlaut
A mit Ring
A mit legiertem E
C mit Hkchen
E mit Accent grave
E mit Accent acute
E mit Circumflex
E Umlaut
I mit Accent grave
I mit Accent acute
I mit Circumflex
I Umlaut
Eth (islndisch)
N mit Tilde
O mit Accent grave
O mit Accent acute
O mit Circumflex
O mit Tilde
O Umlaut
Mal- Zeichen
O mit Schrgstrich
U mit Accent grave
U mit Accent acute
U mit Circumflex
U Umlaut
Y mit Accent acute
THORN (islndisch)
scharfes S
a mit Accent grave
a mit Accent acute
a mit Circumflex
a mit Tilde
a Umlaut
a mit Ring

&ordm;

&#186;

&raquo;

&#187;

&frac14;

&#188;

&frac12;

&#189;

&frac34;

&#190;

&iquest;

&#191;

&Agrave;

&#192;

1265

Unicode in HTML

&Aacute;

&#193;

&Acirc;

&#194;

&Atilde;

&#195;

&Auml;

&#196;

&Aring;

&#197;

&AElig;

&#198;

&Ccedil;

&#199;

&Egrave;

&#200;

&Eacute;

&#201;

&Ecirc;

&#202;

&Euml;

&#203;

&Igrave;

&#204;

&Iacute;

&#205;

&Icirc;

&#206;

&Iuml;

&#207;

&ETH;

&#208;

&Ntilde;

&#209;

&Ograve;

&#210;

&Oacute;

&#211;

&Ocirc;

&#212;

&Otilde;

&#213;

&Ouml;

&#214;

&times;

&#215;

&Oslash;

&#216;

&Ugrave;

&#217;

&Uacute;

&#218;

&Ucirc;

&#219;

&Uuml;

&#220;

&Yacute;

&#221;

&THORN;

&#222;

&szlig;

&#223;

&agrave;

&#224;

&aacute;

&#225;

&acirc;

&#226;

&atilde;

&#227;

&auml;

&#228;

&aring;

&#229;

1266

Anhang D: HTML Zeichenreferenz

Zeichen

Beschreibung

Name in HTML

Unicode in HTML

a mit legiertem e
c mit Hkchen
e mit Accent grave
e mit Accent acute
e mit Circumflex
e Umlaut
i mit Accent grave
i mit Accent acute
i mit Circumflex
i Umlaut
eth (islndisch)
n mit Tilde
o mit Accent grave
o mit Accent acute
o mit Circumflex
o mit Tilde
o Umlaut
Divisions-Zeichen
o mit Schrgstrich
u mit Accent grave
u mit Accent acute
u mit Circumflex
u Umlaut
y mit Accent acute
thorn (islndisch)
y Umlaut

&aelig;

&#230;

&ccedil;

&#231;

&egrave;

&#232;

D.4

Benannte Zeichen fr griechische Buchstaben

&eacute;

&#233;

&ecirc;

&#234;

&euml;

&#235;

&igrave;

&#236;

&iacute;

&#237;

&icirc;

&#238;

&iuml;

&#239;

&eth;

&#240;

&ntilde;

&#241;

&ograve;

&#242;

&oacute;

&#243;

&ocirc;

&#244;

&otilde;

&#245;

&ouml;

&#246;

&divide;

&#247;

&oslash;

&#248;

&ugrave;

&#249;

&uacute;

&#250;

&ucirc;

&#251;

&uuml;

&#252;

&yacute;

&#253;

&thorn;

&#254;

&yuml;

&#255;

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Beschreibung

Name in HTML

Unicode in HTML

Alpha gro
alpha klein
Beta gro
beta klein
Gamma gro
gamma klein
Delta gro
delta klein

&Alpha;

&#913;

&alpha;

&#945;

&Beta;

&#914;

&beta;

&#946;

&Gamma;

&#915;

&gamma;

&#947;

&Delta;

&#916;

&delta;

&#948;

D.4 Benannte Zeichen fr griechische Buchstaben

Beschreibung

Name in HTML

Unicode in HTML

Epsilon gro
epsilon klein
Zeta gro
zeta klein
Eta gro
eta klein
Theta gro
theta klein
Iota gro
iota klein
Kappa gro
kappa klein
Lambda gro
lambda klein
Mu gro
mu klein
Nu gro
nu klein
Xi gro
xi klein
Omicron gro
omicron klein
Pi gro
pi klein
Rho gro
rho klein
Sigma gro
sigmaf klein
sigma klein
Tau gro
tau klein
Upsilon gro
upsilon klein
Phi gro
phi klein
Chi gro
chi klein
Psi gro
psi klein
Omega gro
omega klein
theta Symbol (nicht darstellbar)
upsilon mit Haken (nicht darstellbar)
pi Symbol (nicht darstellbar)

&Epsilon;

&#917;

&epsilon;

&#949;

&Zeta;

&#918;

&zeta;

&#950;

&Eta;

&#919;

&eta;

&#951;

&Theta;

&#920;

&theta;

&#952;

&Iota;

&#921;

&iota;

&#953;

&Kappa;

&#922;

&kappa;

&#954;

&Lambda;

&#923;

&lambda;

&#955;

&Mu;

&#924;

&mu;

&#956;

&Nu;

&#925;

&nu;

&#957;

&Xi;

&#926;

&xi;

&#958;

&Omicron;

&#927;

&omicron;

&#959;

&Pi;

&#928;

&pi;

&#960;

&Rho;

&#929;

&rho;

&#961;

&Sigma;

&#931;

&sigmaf;

&#962;

&sigma;

&#963;

&Tau;

&#932;

&tau;

&#964;

&Upsilon;

&#933;

&upsilon;

&#965;

&Phi;

&#934;

&phi;

&#966;

&Chi;

&#935;

&chi;

&#967;

&Psi;

&#936;

&psi;

&#968;

&Omega;

&#937;

&omega;

&#969;

&thetasym;

&#977;

&upsih;

&#978;

&piv;

&#982;

1267

1268
D.5

Anhang D: HTML Zeichenreferenz

Benannte Zeichen fr mathematische Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Beschreibung

Name in HTML

Unicode in HTML

fr alle (nicht darstellbar)

teilweise
existiert (nicht darstellbar)
leer (nicht darstellbar)
nabla (nicht darstellbar)
Element von (nicht darstellbar)
kein Element von (nicht darstellbar)
enthlt als Element (nicht darstellbar)
Produkt
Summe
minus
Asterisk (nicht darstellbar)
Quadratwurzel
proportional zu (nicht darstellbar)
unendlich
Winkel (nicht darstellbar)
und (nicht darstellbar)
oder (nicht darstellbar)
Schnittpunkt
Einheit (nicht darstellbar)
Integral
deshalb (nicht darstellbar)
hnlich wie (nicht darstellbar)
annhernd gleich (nicht darstellbar)
beinahe gleich
ungleich
identisch mit
kleiner gleich
grer gleich
Untermenge von (nicht darstellbar)
Obermenge von (nicht darstellbar)
keine Untermenge von (nicht darstellbar)
Untermenge von oder gleich mit (nicht
darstellbar)
Obermenge von oder gleich mit (nicht
darstellbar)
Direktsumme (nicht darstellbar)
Vektorprodukt (nicht darstellbar)
senkrecht zu (nicht darstellbar)

&forall;

&#8704;

&part;

&#8706;

&exist;

&#8707;

&empty;

&#8709;

&nabla;

&#8711;

&isin;

&#8712;

&notin;

&#8713;

&ni;

&#8715;

&prod;

&#8719;

&sum;

&#8721;

&minus;

&#8722;

&lowast;

&#8727;

&radic;

&#8730;

&prop;

&#8733;

&infin;

&#8734;

&ang;

&#8736;

&and;

&#8869;

&or;

&#8870;

&cap;

&#8745;

&cup;

&#8746;

&int;

&#8747;

&there4;

&#8756;

&sim;

&#8764;

&cong;

&#8773;

&asymp;

&#8776;

&ne;

&#8800;

&equiv;

&#8801;

&le;

&#8804;

&ge;

&#8805;

&sub;

&#8834;

&sup;

&#8835;

&nsub;

&#8836;

&sube;

&#8838;

&supe;

&#8839;

&oplus;

&#8853;

&otimes;

&#8855;

&perp;

&#8869;

D.6 Benannte Zeichen fr technische Symbole

Beschreibung

Name in HTML

Unicode in HTML

Punkt-Operator (nicht darstellbar)

Raute

&sdot;

&#8901;

&loz;

&#9674;

D.6

Benannte Zeichen fr technische Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Beschreibung

Name in HTML

Unicode in HTML

links oben (nicht darstellbar)

rechts oben (nicht darstellbar)
links unten (nicht darstellbar)
rechts unten (nicht darstellbar)
spitze Klammer links (nicht darstellbar)
spitze Klammer rechts (nicht darstellbar)

&lceil;

&#8968;

&rceil;

&#8969;

&lfloor;

&#8970;

&rfloor;

&#8971;

&lang;

&#9001;

&rang;

&#9002;

D.7

Benannte Zeichen fr Pfeil-Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Beschreibung

Name in HTML

Unicode in HTML

Pfeil links
Pfeil oben
Pfeil rechts
Pfeil unten
Pfeil links/rechts
Pfeil unten-Knick-links (nicht darstellbar)
Doppelpfeil links (nicht darstellbar)
Doppelpfeil oben (nicht darstellbar)
Doppelpfeil rechts (nicht darstellbar)
Doppelpfeil unten (nicht darstellbar)
Doppelpfeil links/rechts (nicht darstellbar)

&larr;

&#8592;

&uarr;

&#8593;

&rarr;

&#8594;

&darr;

&#8595;

&harr;

&#8596;

&crarr;

&#8629;

&lArr;

&#8656;

&uArr;

&#8657;

&rArr;

&#8658;

&dArr;

&#8659;

&hArr;

&#8660;

1269

1270
D.8

Anhang D: HTML Zeichenreferenz

Benannte Zeichen fr diverse Symbole

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Beschreibung

Name in HTML

Bullet-Zeichen
horizontale Ellipse (nicht darstellbar)
Minutenzeichen
berstrich
Bruchstrich
Weierstrass p (nicht darstellbar)
Zeichen fr "imaginr" (nicht darstellbar)
Zeichen fr "real" (nicht darstellbar)
Trademark-Zeichen
Euro-Zeichen
Alef-Symbol (nicht darstellbar)
Pik-Zeichen
Kreuz-Zeichen
Herz-Zeichen
Karo-Zeichen

&bull;

&#8226;

&hellip;

&#8230;

&prime;

&#8242;

&oline;

&#8254;

&frasl;

&#8260;

&weierp;

&#8472;

&image;

&#8465;

D.9

Unicode in HTML

&real;

&#8476;

&trade;

&#8482;

&euro;

&#8364;

&alefsym;

&#8501;

&spades;

&#9824;

&clubs;

&#9827;

&hearts;

&#9829;

&diams;

&#9830;

Benannte Zeichen fr Interpunktion

Die HTML-Namen dieser Zeichen sind seit HTML 4.0 verfgbar.

Zeichen

Beschreibung

Name in HTML

Unicode in HTML

&ensp;

&#8194;

Leerzeichen Breite n (nicht darstellbar)

Leerzeichen Breite m (nicht darstellbar)
schmales Leerzeichen (nicht darstellbar)
null breiter Nichtverbinder(nicht darstellbar)
null breiter Verbinder (nicht darstellbar)
Links-nach-rechts-Zeichen (nicht darstellbar)
Rechts-nach-links-Zeichen (nicht darstellbar)
Gedankenstrich Breite n
Gedankenstrich Breite m
einfaches Anfhrungszeichen links
einfaches Anfhrungszeichen rechts
einfaches low-9-Zeichen
doppeltes Anfhrungszeichen links
doppeltes Anfhrungszeichen rechts

&emsp;

&#8195;

&thinsp;

&#8201;

&zwnj;

&#8204;

&zwj;

&#8205;

&lrm;

&#8206;

&rlm;

&#8207;

&ndash;

&#8211;

&mdash;

&#8212;

&lsquo;

&#8216;

&rsquo;

&#8217;

&sbquo;

&#8218;

&ldquo;

&#8220;

&rdquo;

&#8221;

D.9 Benannte Zeichen fr Interpunktion

1271

Zeichen

Beschreibung

Name in HTML

Unicode in HTML

doppeltes low-9-Zeichen rechts

Kreuz
Doppelkreuz
zu tausend
angewinkeltes einzelnes Anf.zeichen links
angewinkeltes einzelnes Anf.zeichen
rechts

&bdquo;

&#8222;

&dagger;

&#8224;

&Dagger;

&#8225;

&permil;

&#8240;

&lsaquo;

&#8249;

&rsaquo;

&#8250;

1273

HTML: Varianten

E.1

Varianten strict, transitional und frameset

Damit eine HTML-Datei gltig ist, muss sie vollstndig den Regeln entsprechen, die in der
HTML-DTD (DTD = document type definition) festgelegt sind. Diese Regeln legen fest, welche
Elemente verwendet werden drfen, wie diese Elemente verschachtelt sein drfen, welche Attribute zu welchen Elementen erlaubt sind und welche Wertzuweisungen an diese Attribute erlaubt
sind. Nun gibt es in HTML 4.0 und auch in HTML 4.01 gleich drei HTML-DTDs. Es handelt
sich um verschiedene Varianten.

E.1.1

Variante strict

Die Variante strict ist die vom W3-Konsortium empfohlene und prferierte Variante. Sie
zeichnet sich dadurch aus, dass sie nur sehr schlankes HTML erlaubt. Viele Elemente und Attribute zur Formatierung und Visualisierung von Texten fehlen in dieser Variante. Stattdessen sollen Web-Seiten-Autoren CSS Stylesheets zur Formatierung verwenden.
Eine weitere Besonderheit der strict-Variante ist, dass innerhalb von <body> und </body> alle
Inhalte in Block-Elementen stehen mssen. Die Variante strict eignet sich vor allem fr neu zu
erstellende Web-Seiten, bei denen zur Formatierung konsequent auf CSS gesetzt wird. Einzelheiten finden Sie unter Anhang E.2 in der bersicht der nicht erlaubten Elemente und Attribute bei
Variante strict.
Um die Variante strict mit HTML 4.01 explizit zu verwenden, ist ganz zu Beginn einer HTMLDatei folgende Notation erforderlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

E.1.2

Variante transitional

Die Variante transitional ist ein Kompromiss, den das W3-Konsortium angesichts eigener
Fehler der Vergangenheit (Definitionen aus der HTML-Version 3.2) und angesichts der hohen
Verbreitung von Web-Seiten, die jene Features nutzen, anbietet. Die Variante transitional erlaubt die Verwendung diverser Elemente und Attribute, die als deprecated (missbilligt) gekennzeichnet sind und die in der strict-Variante nicht mehr vorkommen. Darunter fallen so
beliebte HTML-Elemente wie font oder hufig verwendete Attribute wie align= oder bgclor=.
Bei der transitional-Variante ist es auch erlaubt, direkt innerhalb von <body> und </body>
einfach nur Text oder Inline-Elemente zu notieren. Die Variante transitional ist daher vor

1274

Anhang E: HTML Varianten

allem fr bereits bestehende Web-Seiten zu empfehlen, die ohne allzu groen nderungsaufwand auf einen Stand gebracht werden sollen, der gltiges HTML 4.0 oder 4.01 darstellt.
Um die Variante transitional in HTML 4.01 explizit zu verwenden, ist ganz zu Beginn einer
HTML-Datei folgende Notation erforderlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Hinweis: Da sich in dieser Variante der Name der Variante und der Name der DTD unterscheiden, ist mitunter auch von einer loose-Variante die Rede. Damit ist die transitional-Variante
gemeint.

E.1.3

Variante frameset

Die Variante frameset ist in HTML 4.01 identisch mit der Variante transitional, mit dem
einzigen Unterschied, dass die erforderliche Elementverschachtelung unterhalb des Wurzelelements html eine andere ist. Anstelle eines body-Elements ist in dieser Variante ein framesetElement erforderlich.
Um die Variante frameset explizit zu verwenden, ist ganz zu Beginn einer HTML-Datei folgende Notation erforderlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

E.2

Nicht erlaubte Elemente und Attribute bei Variante strict

Die folgende Tabelle listet auf, welche Elemente und Attribute in der strict-Variante nicht vorkommen drfen, weil sie entweder als deprecated (missbilligt) gekennzeichnet sind oder weil sie
zum Thema Frames gehren. Nur in der tranisitional-Variante drfen Elemente und Attribute verwendet werden, die deprecated sind. Frame-Definitionen drfen nur in der framesetVariante verwendet werden.
Element

Attribut

applet
basefont

body

alink

Bemerkung
Element ist deprecated. Java-Applets sollen stattdessen mit dem
object-Element eingebunden werden.
Element ist deprecated. Die Standardschriftgre kann stattdessen mit CSS Stylesheets definiert werden. Mehrere aufeinander
folgende HTML-Elemente knnen in ein div-Element eingeschlossen werden, dem sich CSS-Definitionen zuweisen lassen.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.

E.2 Nicht erlaubte Elemente und Attribute bei Variante strict

1275

Element

Attribut

Bemerkung

body

background

body

bgcolor

body

link

body

text

body

vlink

br

clear

caption

align

Attribut ist deprecated. Die Hintergrundfarbe kann stattdessen

mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Angabe zur Textflussfortsetzung
kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Element ist deprecated. Als Alternative wird das div-Element
empfohlen. Die Ausrichtung kann mit CSS Stylesheets definiert
werden.
Element ist deprecated. Als Alternative wird das ul-Element
empfohlen.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Schriftweite kann stattdessen mit CSS
Stylesheets definiert werden.
Element ist deprecated. Schriftgre, Schriftfarbe und Schriftart
knnen stattdessen mit CSS Stylesheets definiert werden.
Element gehrt zum Themenbereich Frames.
Element gehrt zum Themenbereich Frames.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Hhe kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Gestaltung kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Breite kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die HTML-Versionsangabe geht aus einer DTD-Deklaration (<!DOCTYPE...>) hervor.
Element kommt in der strict-Variante nicht vor.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Abstand kann stattdessen mit CSS
Stylesheets definiert werden.

center

dir
div

align

dl

compact

font
frame
frameset
h1-h6

align

hr

align

hr

size

hr

noshade

hr

width

html

version

iframe
img

align

img

hspace

1276

Anhang E: HTML Varianten

Element

Attribut

Bemerkung

img

vspace

img

border

input

align

Attribut ist deprecated. Der Abstand kann stattdessen mit CSS

Stylesheets definiert werden.
Attribut ist deprecated. Der Rahmen kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Element ist deprecated. Als Alternative wird das input-Element
mit dem Attribut type="text" empfohlen.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Listentyp kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Sequenznummer in einer nummerierten Liste kann stattdessen mit CSS Stylesheets gendert werden.
Element ist deprecated. Als Alternative wird das ul-Element
empfohlen.
Element kommt in der strict-Variante nicht vor.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Rahmen kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Der Abstand kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Der Abstand kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Schriftweite kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Startnummer kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Listentyp kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Elementbreite kann stattdessen mit
CSS Stylesheets definiert werden.
Element ist deprecated. Durchgestrichener Text kann stattdessen
mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Stattdessen wird das Attribut type=
empfohlen.
Element ist deprecated. Durchgestrichener Text kann stattdessen
mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Ausrichtung kann stattdessen mit
CSS Stylesheets definiert werden.

isindex
legend

align

li

type

li

value

menu
noframes
object

align

object

border

object

hspace

object

vspace

ol

compact

ol

start

ol

type

align

pre

width

s
script

language

strike
table

align

E.2 Nicht erlaubte Elemente und Attribute bei Variante strict

1277

Element

Attribut

Bemerkung

table

bgcolor

td

bgcolor

td

height

td

nowrap

td

width

th

bgcolor

th

height

th

nowrap

th

width

tr

bgcolor

Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Elementhhe kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Umbruch kann stattdessen mit CSS
Stylesheets kontrolliert werden.
Attribut ist deprecated. Die Elementbreite kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Elementhhe kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Der Umbruch kann stattdessen mit CSS
Stylesheets kontrolliert werden.
Attribut ist deprecated. Die Elementbreite kann stattdessen mit
CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Farbe kann stattdessen mit CSS Stylesheets definiert werden.
Element ist deprecated. Unterstrichener Text kann stattdessen
mit CSS Stylesheets definiert werden.
Attribut ist deprecated. Die Schriftweite kann stattdessen mit CSS
Stylesheets definiert werden.
Attribut ist deprecated. Der Listentyp kann stattdessen mit CSS
Stylesheets definiert werden.

u
ul

compact

ul

type

1279

Stichwortverzeichnis

XE 380
# 197, 423
#CDATA 1225
$[1..9] 957
% 204, 427
& 204, 395
&#160; 149
&nbsp; 149
* 274, 417
.asp 112
.class 345, 358
.css 407, 409
.csv 1035
.eot 445, 1107
.gif 1111
.htaccess 1195
.htgroups 1198
.htm 112, 389
.html 112, 389
.htusers 1197
.java 825
.jpe 1112
.jpeg 1112
.jpg 1112
.lwf 1114
.ocx 348
.pfr 445, 1107
.php 112
.png 1113
.profile 1195
.shtm 112
.shtml 112
.svg 1115
.svgz 1115
.swf 348
.xhtml 389
.zip 359

// 109
:active 489
:after 491
:before 491
:first-child 490
:first-letter 490
:first-line 490
:focus 489
:hover 489
:link 489
:visited 489
@ 36, 200
@font-face 444
@import 410
@media 411
@page 511
_blank 131, 194, 289
_parent 131, 194, 289, 300
_self 194, 288, 300
_top 131, 194, 300
< 395
<!-- 107
<!-- ... --> 407
<![CDATA[...]]> 396
<?xml?> 389
encoding 389
version 389
<a> 191, 394, 702
accesskey 212
charset 210
href 191
hreflang 210
id 394
name 197, 394
rel 208
rev 208
tabindex 211

1280

Stichwortverzeichnis

target 194, 278, 288

type 208
<abbr> 168, 703
<acronym> 168, 704
<address> 161, 704
<applet> 358, 705
align 361
alt 359
archive 359
code 358
codebase 358
height 359
mayscript 359
name 359
object 359
width 359
<area> 230, 706
accesskey 231
alt 231
coords 230
href 231
nohref 231
shape 230
tabindex 231
title 231
<b> 173, 707
<base target=> 131
<base> 707
href 130
target 131
<basefont> 183, 708
<bdo> 170, 709
dir 170
<bgsound> 140
loop 140
src 140
<big> 173, 709
<blink> 188
<blockquote> 159, 710
cite 160
type 160
<body> 94, 711
alink 136
background 137
bgcolor 135

bgproperties 138
leftmargin 138
link 136
marginheight 139
marginwidth 139
text 136
topmargin 138
vlink 136
<br> 148, 355, 712
clear 223, 260, 355, 361
<button> 321, 713
accesskey 329
disabled 331
tabindex 328
type 321
type= 334
value 322
<caption> 258, 714
align 258
<center> 175, 715
<cite> 168, 715
<code> 168, 715
<col> 237, 716
span 238
width 237
<colgroup> 237, 717
span 237
width 237
<dd> 154, 718
<del> 169, 719
datetime 169
<dfn> 168, 720
<dir> 155, 720
<div> 175, 420, 721
align 175
<dl> 154, 722
compact 157
<dt> 154, 722
<em> 168, 723
<embed> 140, 362
align 363
autostart 140, 363
height 140, 362
hidden 140, 363
hspace 363

Stichwortverzeichnis
loop 140, 363
palette 363
pluginspage 363
pluginurl 362
src 140, 362
vspace 363
width 140, 362
<fieldset> 326, 724
<font> 182, 725
color 182
face 182
size 182
<form> 298, 726
accept-charset 300
action 299
enctype 299, 324
method 299
target 300
<frame> 727
frameborder 286
longdesc 281
marginwidth 283
name 278, 288, 678
noresize 284
scrolling 282
src 278
<frameset> 273, 728
border 286
bordercolor 287
cols 274
frameborder 286
framespacing 286
rows 273
<h?> 142
align 142
<h1> 729
<head> 730
profile 129
<hr> 178, 730
align 179
color 180
noshade 179
size 179
width 179

<html> 94, 731

xmlns 391
<i> 173, 732
<iframe> 290, 732
align 292
height 291
hspace 292
longdesc 292
name 290
src 290
vspace 292
width 291
<ilayer> 368
above 374
background 372
below 374
bgcolor 372
id 368
left 368
name 368
top 368
visibility 376
z-index 375
<img> 214, 733
align 221, 222
alt 215
border 218
height 216
hspace 222
ismap 232
longdesc 219
lowsrc 215
name 218
src 214
usemap 231
vspace 222
widht 216
<input> 301, 735
accept 323
accesskey 329
checked 318, 319
disabled 331
maxlenght 323
maxlength 302

1281

1282

Stichwortverzeichnis

name 301
readonly 310
size 302
src 334
tabindex 328
type= 301, 304, 318, 319, 320, 323, 325, 333,
334
value 304, 318, 319, 325
<ins> 169, 737
cite 169
datetime 169
<isindex> 135, 737
prompt 135
<kbd> 168, 738
<label> 327, 738
accesskey 329
<layer> 367, 1012
above 374
background 372
below 374
bgcolor 372
clip 369
height 367
id 367
left 367
name 367
pagex 371
pagey 371
src 369
top 367
visibility 376
width 367
z-index 375
<legend> 326, 739
accesskey 329
<li> 151, 740
value 157
<link> 132, 407, 409, 741, 1108
charset 133
href 133, 407
hreflang 133
media 133, 409
rel 132, 407
rev 134
target 133

title 133
type 407
<listing> 165
<map> 229, 742
name 229
<marquee> 185
align 185
behavior 185
bgcolor 185
direction 185
height 185
hspace 185
scrollamount 185
scrolldelay 185
<menu> 155, 743
<meta> 120, 744
content 120
http-equiv 120
lang 125
name 120
scheme 129
<multicol> 186
cols 186
gutter 187
width 187
<nobr> 148
<noembed> 364
<noframes> 279, 744
<noscript> 385, 745
<object> 341, 342, 746
align 352
border 351
classid 345, 347, 349
codebase 346, 348, 350
codetype 346
data 343
declare 356
height 343
hspace 354
id 356
standby 356
type 343
usemap 345
vspace 354
width 343

Stichwortverzeichnis
<ol> 153, 747
compact 157
start 157
type 157
<optgroup> 316, 748
disabled 331
label 316
<option> 311, 749
disabled 331
selected 313
value 315
<p> 145, 750
align 145
<param> 347, 348, 359, 751
name 347, 348, 350, 359
value 347, 348, 350
<plaintext> 165
<pre> 164, 752
width 165
<q> 168, 752
<s> 173, 753
<samp> 168, 754
<script> 383, 754
charset 385
defer 385
language! 383
src 385
type 383
<select> 311, 756
disabled 331
multiple 312
name 311
size 311
tabindex 328
<small> 173, 757
<spacer> 187
align 188
height 188
size 188
type 187
width 188
<span> 176, 420, 758
<strike> 173, 759
<strong> 168, 759
<style> 381, 406, 760

media 382
type 382
<sub> 173, 761
<sup> 173, 761
<table> 235, 761
align 260
background 253
bgcolor 252
border 235
bordercolor 254
bordercolordark 254
bordercolorlight 254
cellpadding 241
cellspacing 241
datapagesize 1037
frame 243
height 245
hspace 260
rules 245
summary 266
vspace 260
width 245
<tbody> 240, 764
align 251
background 253
char, charoff 251
valign 251
<td> 235, 765
abbr 267
align 251
background 253
bgcolor 252
char, charoff 251
colspan 255
headers 268
nowrap 249
rowspan 256
valign 251
<textarea> 305, 766
accesskey 329
cols 305
disabled 331
name 305
readonly 310
rows 305

1283

1284

Stichwortverzeichnis

tabindex 328
wrap 308
<tfoot> 240, 768
align 251
background 253
char, charoff 251
valign 251
<th> 235, 769
abbr 267
align 251
axis 269
background 253
bgcolor 252
char, charoff 251
colspan 255
id 267
nowrap 249
rowspan 256
scope 268
valign 251
<thead> 239, 770
align 251
background 253
char, charoff 251
valign 251
<title> 94, 119, 771
<tr> 235, 771
align 251
background 253
bgcolor 252
char, charoff 251
valign 251
<tt> 173, 773
<u> 173, 773
<ul> 151, 774
compact 157
type 157
<var> 168, 775
<wbr> 149
<xmp> 165
> 395, 417
--> 107
border-top-color: 466
404-Error 1163

A
a 702
active 193
hover 193
link 193
visited 193
abbr 267, 703
Abmahnung, Datensparsamkeit 298
about, blank 669
above 243, 374, 523, 863
abs() 933
Absatzkontrolle 448
absbottom 221, 353
absmiddle 221, 353
absolute 496
Absolute Pfadangaben 110
Abstand 454
accept 323
accept-charset 300
access.log 1160
accesskey 212, 231, 329
acos() 933
acronym 704
action 299, 828
Active Server Pages 85
activeborder 429
activecaption 429
ActiveX 88
ActiveX-Controls 347
AddAlt 1203
AddAltByType 1203
AddDescription 1202
AddEncoding 1202
addEventListener() 1000, 1083
AddIcon 1202
AddIconByEncoding 1202
AddIconByType 1202
address 704
Adressbasis 130
Adressen 160
formatieren mit CSS 161
Adresszeile 654
Advanced Research Projects Agency 27
Aladin 1192

Stichwortverzeichnis
alert() 660
align 145, 221, 251, 292, 352, 354, 361, 363
alignment: 453
alink 136
alinkColor 682
all 223, 245, 361, 796, 1003
className 799
click() 810
contains() 810
dataFld 799
dataFormatAs 800
dataPageSize 800
dataSrc 800
getAttribute() 811
id 801
innerHTML 801
innerText 802
insertAdjacentHTML() 811
insertAdjacentText() 812
isTextEdit 802
lang 803
language 803
length 803
offsetHeight 804
offsetLeft 804
offsetParent 805
offsetTop 806
offsetWidth 806
outerHTML 806
outerText 807
parentElement 807
parentTextEdit 808
recordNumber 809
removeAttribute() 813
scrollIntoView() 813
setAttribute() 814
sourceIndex 809
tagName 809
title 809
Allow 1194
Allow from 1199
allowDelete 1052
allowInsert 1052
allowUpdate 1053
Alphakanal 1129

alt 215, 231, 359

altavista 1156
altKey 885
always 489, 515
amaya 1192
anchor() 964
anchors 821
length 823
name 822
text 823
x 823
y 824
nderungsmarkierungen 169
Andreessen, Marc 43
Anfhrungszeichen 101
Animierte GIF-Grafik 1140
Animiertes GIF, Hintergrundbild 138
Anker 196
Referenzieren 109
reservierte Namen 197
anonymous 38
ANSI-Zeichensatz 1093
Anti-Aliasing 1139
AOL 1151
Apache 1195
appCodeName 939
appendChild() 729, 764, 785, 790, 998
AppendData 1048, 1050
appendData() 786
applet 705
Applet 87
applets 824
length 826
application 1179
application/font-tdpfr 1109
application/xhtml+xml 388
application/xml 388
appName 940
appVersion 940
appworkspace 429
aqua 103
archive 359
Arcus Cosinus 933
Arcus Sinus 933
Arcus Tangens 934

1285

1286

Stichwortverzeichnis

area 706
arguments 928
arity 928
ARPA-Net 27
Array 683, 897
concat() 901
join() 902
length 900
pop() 903
push() 903
reverse() 904
shift() 904
slice() 905
sort() 906
splice() 906
unshift() 907
ascent: 447
ASCII-Zeichensatz 110, 1093, 1097
asin() 933
ASP 85, 112
Assoziierter Knoten 987
atan() 934
Attribut
in HTML-Tags 92
Universalattribut 93
Attribute
deprecated 1225
implied 1225
required 1225
attributes 777
Attributknoten 987
AU 140
audio 1179
Aufzhlungslisten 150
Augment 55
Ausrichten, am Dezimalzeichen 251
Ausrichtung 448
Auenrand 454
Aussprache 518
Auswahlliste
Mehrfachauswahl 312
verschachtelte Struktur 315
Auswahllisten 310, 842
AuthGroupFile 1196
AuthName 1196

author 121
AuthType 1196
AuthUserFile 1196
auto 485, 497, 498, 499, 501, 503, 510, 512, 515,
521
Autor 108
Meta-Angabe 121
Autorenrechte 108
autostart 140, 363
availHeight 959
availWidth 960
avoid 515
axis 269
azimuth: 521

B
b 707
back() 661, 892
Backbone 29
background 137, 253, 363, 372, 429, 476, 864
background-attachment: 475
background-color 193, 471
background-image: 472
background-position: 475
background-repeat: 473
Backtracking 52
base 707
basefont 708
baseline 221, 251, 353, 448, 451
Basic Multilingual Plane 1102
Baummetapher 1148
Baumstruktur 987
bcc 202
bdo 709
behavior 185
below 243, 374, 523, 865
Benannte Seiten 516
Benannte Zeichen 100
Benutzereingabe 671
Berechnungen 930
Berners-Lee, Tim 41
bgcolor 135, 185, 252, 372, 683, 864
bgproperties 138
big 709
big() 965

Stichwortverzeichnis
Bild, siehe Grafik 213
Bildbearbeitung 1126
Bilddatei, Gro-/Kleinschreibung 215
Bilder 850
Bildlaufleisten 281
Bitstream 1106
black 103
blendTrans() 1057
Blinde Pixel 1124
Blinde Tabelle 223
blink 442
blink() 965
Blinkender Text 188
block 507
Block-Element 167, 174
blockquote 116, 710
Blocksatz 142, 145
blue 103
blur() 661, 839
BMP 1102
Body 93, 203, 711
bold 438
bold() 965
bolder 438
Bookmarks 52
Boolean 908
Boole'sches Objekt 908
border 218, 235, 286, 351, 469, 852
border-bottom: 471
border-bottom-color: 467
border-bottom-style: 469
border-bottom-width: 466
border-collapse: 469, 485
border-color: 254, 287, 466
bordercolordark 254
bordercolorlight 254
border-left: 471
border-left-color: 466
border-left-style: 469
border-left-width: 465
border-right: 471
border-right-color: 467
border-right-style: 469
border-right-width: 466
border-spacing: 487

border-style: 468
border-top: 471
border-top-style: 469
border-top-width: 465
border-width: 465
both 506
bottom 221, 353, 361, 451
box 243
br 712
broken image 215
Bubble-Effekt 1010
Buchmetapher 1148
Bullet 1117
Bush, Vannevar 54
Button 319, 320, 321, 713, 1116
buttonface 429
buttonhighlight 429
Buttonleiste 660
buttontext 429

C
cabbase 1052
Cailliau, Robert 42
caller 929
Candidate Recommendation 61
cap-height: 447
capitalize 443
caption 714
caption-side: 484
captiontext 429
captureEvents() 661, 690, 873, 1031
CaseSensitive 1048, 1051
cc 202
ceil() 934
cellpadding 228, 241
cellspacing 228, 241
center 145, 453, 522, 715
center behind 522
center-left 522
center-left behind 522
centerline: 448
center-right 522
center-right behind 522
CERN 41
CGI 83, 339

1287

1288

Stichwortverzeichnis

cgi-bin 83
CGI-Script 68, 109
CGI-Services 68
char 251
character data 1225
charAt() 966
charCodeAt() 966
charoff 251
CharSet 210, 385, 684, 1049, 1051
Chat 39
checkbox 318, 319
checked 318, 319, 835
child 524
childNodes 778
circle 157, 230, 479
cite 160, 169, 715
cjk-ideographic 480
class 419, 421
classid 345, 347, 349
className 799
clear 223, 260, 355, 361, 505
clearInterval() 662
clearTimeout() 663
click() 810, 840
Client-Identifikation 1189
Client-Push 32
Client-Server-Technologie 31
clientX 886
clientY 886
clip 369, 510, 865
Cliparts 1121
cloneNode() 786
close() 652, 664, 691
closed 652
CLSID: 347, 349
cm 427
code 358, 526, 715
codebase 346, 348, 350, 358
col 268, 716
colgroup 268, 717
collapse 469, 486, 488
color 182, 193, 443
colorDepth 960
cols 186, 245, 274
colspan 255

COM 88
Common Gateway Interface 83, 339
compact 157, 507
compatible 1190
complete 852
Component Object Model 88
CompuServe 1151
concat() 901, 966
condensed 438
confirm() 664, 677
contains() 810
content 120, 492
Content-Script-Type 126
Content-Style-Type 126
content-type 125
continous 526
cookie 685
cookieEnabled 686, 940
Cookies 685, 940
cookies.txt 685
Cooperation for an Open Systems
Interconnection Networking in Europe 29
Coordinated Universal Time 169
coords 230
Corporate Design 1148
cos() 934, 995
COSINE 29
Cosinus 934
Counter 69, 493
counter-increment: 494
counter-reset: 494
Crawler 1192
createAttribute() 691, 784
createElement() 692, 729, 764, 784, 790, 998
createTextNode() 693, 784, 790, 998
Credits 108
crop 513
cross 513
crosshair 528
CSS
Attribut-bedingte Formate 417
Drucklayout 511
Elemente positionieren 494
Farbangaben 428
Filter 530

Stichwortverzeichnis
Formate fr HTML-Elemente 413
Formate fr Klassen 419
Individualformate 422
Kommentare 411
Leerzeichen beachten 413
Pseudoformate 424, 489
Sprachausgabe 517
Stylesheets 77, 403
zentrale Formate 380, 412
CSS-Datei 407
CSS-Versionen 78
ctrlKey 885
cue: 520
cue-after: 520
cue-before: 519
cursive 434
cursor: 527

D
Danksagung 108
dashed 468
data 343, 779
dataFld 799, 1038
dataFormatAs 800, 1038
dataPageSize 800
dataSrc 800
DataURL 1049
date 121
Date 909, 983
getDate() 911
getDay() 912
getFullYear() 912
getHours() 913
getMilliseconds() 913
getMinutes() 914
getMonth() 914
getSeconds() 915
getTime() 915
getTimezoneOffset() 916
getUTCDate() 916
getUTCDay() 916
getUTCFullYear() 917
getUTCHours() 917
getUTCMilliseconds() 917
getUTCMinutes() 917

getUTCMonth() 917
getUTCSeconds() 917
getYear() 917
parse() 918
setDate() 918
setFullYear() 919
setHours() 919
setMilliseconds() 920
setMinutes() 920
setMonth() 921
setSeconds() 922
setTime() 922
setUTCDate() 923
setUTCDay() 923
setUTCFullYear() 923
setUTCHours() 923
setUTCMilliseconds() 923
setUTCMinutes() 924
setUTCMonth() 924
setUTCSeconds() 924
setYear() 924
toGMTString() 925
toLocaleString() 925
UTC() 925
Dateiendungen 112
Dateiname
Dateiendungen 112
Default-Dateinamen 112
Default-Startseite 200
Erlaubte Zeichen 112
Gro-/Kleinschreibung 215
Kompatibilitt 112
Konventionen von Unix 111
Dateiorganisation 113
Datei-Upload 322
Datenanbindung 1034
Datenbank durchsuchen 1038
Datendatei als Objekt 342
Datenmodell
JDBC DataSource Applet 1051
MSHTML Data Source 1054
RDS, Remote Data Service 1050
TDC, Tabular Data Control 1048
XML Data Source 1053
Datenpaket 30

1289

1290

Stichwortverzeichnis

Datenschutz 1170
Datenzelle 235
datetime 169
Datum 910
dbURL 1052
DC.Contributor 123
DC.Coverage 124
DC.Creator 122
DC.Date 123
DC.Description 122
DC.Format 123
DC.Identifier 123
DC.Language 124
DC.Publisher 123
DC.Relation 124
DC.Rights 124
DC.Source 123
DC.Subject 122
DC.Title 122
DC.Type 123
DCT 1112
dd 718
decimal 478
decimal-leading-zero 480
declare 356
decodeURI() 978, 984
decodeURIComponent() 978
default.htm 112
default.html 112
defaultCharset 687
defaultChecked 836
DefaultIcon 1202
defaultSelected 845
Default-Startseite 200
defaultStatus 651, 652
defaultValue 837
defer 385
Definitionen 413
Definitionslisten 153
definition-src, url() 448
deg 431, 521, 522
del 719
deleteData() 787
DENIC 33
DE-NIC 35

Deny from 1199

deprecated 101, 1225
descent: 448
description 121, 944, 947
Deutsches Forschungsnetz 29
Deutsches Network Information Center 33, 35
Dezimalzeichen, ausrichten am 251
dfn 720
DFN 29
DHTML 985
Beispiel, Bilderbuch 1087
Beispiel, Laufende Uhr 1084
Beispiel, Navigationsleiste 1078
Datenanbindung bei Microsoft 1034
DOM-Modell 986
Funktionsbibliothek 1067
Microsoft-Modell 1001
Netscape-4-Modell 1012
Dialogfenster 664, 671
Dicktengleiche Schrift 163
digits 526
dino-online 1156
dir 170, 378, 720
direction 185
direction: 504
DirectoryIndex 1200
disabled 331
disableExternalCapture() 665
Disallow 1194
disc 157, 479
Diskrete Cosinus Transformation 1112
Diskussionsforen 70
display: 507
Dithering 1130
div 721
dl 722
DNS 32
DOCTYPE 96
document 681, 867
alinkColor 682
bgColor 683
captureEvents() 690
charset 684
close() 691
cookie 685

Stichwortverzeichnis
createAttribute() 691
createElement() 692
createTextNode() 693
defaultCharset 687
fgColor 687
getElementById() 693
getElementsByName() 694
getElementsByTagName() 695
getSelection() 696
handleEvent() 697
lastModified 688
linkColor 688
open() 697
referrer 689
releaseEvents() 698
routeEvent() 698
title 689
URL 689
vlinkColor 690
write() 698
writeln() 699
Document Object Model 81, 388, 986
Document Type Definition 387
Dokumenttyp
Frames 272
Frameset 97
Strict 96
Transitional 97
Dokumenttyp-Angabe 95
Dokumenttyp-Definitionen 95
DOM 81, 388, 986
DOMActivate 1000
Domain 32, 1150, 1152
Domain Name Service 32
Domain-Grabbing 33
DOMFocusIn 1000
DOMFocusOut 1000
DOMNodeInserted 1000
DOMNodeRemoved 1000
DOMSubtreeModified 1000
Dot 1117
Dots per Inch 1127
dotted 468
double 468
Download 38

Downloadbare Schriftarten 1105

Download-Verweise 205
dpi 1127
Dropdown-Liste 311
Drucken 671
Drucklayout 511
DSSSL 404
dt 722
DTD 95, 387
Dublin Core 122
Dynamic HTML 82, 985
Dynamische Filter 1054
Dynamisches HTML 797, 985

E
E 930
EBCDIC-Zeichensatz 1093
Ebone 29
ECMA 1096
Eingabefelder 301
Zeilenumbruch 307
Eingebettete Frames 289
Elementbaum 691, 692, 700
Elemente 91
Elementknoten 987
elements 833
blur() 839
checked 835
click() 840
defaultChecked 836
defaultValue 837
handleEvent() 841
name 838
select() 842
type 838
value 839
elevation: 522
em 427, 723
E-Mail 36
Verschlsselung 37
E-Mail-Verweis 161, 200
Sonderzeichen 204
zustzliche Angaben 202
embeds 857
height 858

1291

1292

Stichwortverzeichnis

hspace 859
length 859
name 859
play() 861
src 860
stop() 861
type 860
vspace 860
width 860
empty-cells: 487
enabledPlugin 944
enableExternalCapture() 665
encodeURI() 978
encodeURIComponent() 979
encoding 389, 829
enctype 299, 324
Engelbart, Douglas C. 55
Enquire 42
Ereignisberwachung 883
e-resize 528
Erkennungssignal 519
ErrorDocument 1200
escape() 979
EscapeChar 1049
Eule 1192
Eulersche Konstante 930
EuropaNET 29
European Computer Manufacturer's Association
1096
Eurozeichen 101
eval() 980, 994
event 883
altKey 885
clientX 886
clientY 886
ctrlKey 885
keyCode 886
layerX 887
layerY 887
modifiers 887
offsetX 888
offsetY 888
pageX 888
pageY 888
screenX 889

screenY 889
shiftKey 885
type 890
which 890
x 891
y 891
Event-Handler 232, 379, 674, 690, 883, 1009
berwachen 661
Vererbung bei Microsoft 1010
Event-Handling im DOM 998
ex 427
exec() 958
ExecCGI 1200
exp() 935
expanded 439
expires 127
Extensible HyperText Markup Language 387
Extensible Markup Language 387
Extensible Stylesheet Language 80, 388
Extensions 112
extra-condensed 439
extra-expanded 439

F
face 182
false 908
FancyIndexing 1202
fantasy 434
FAQ 63
Farbangaben 428
Farbe
Hintergrund 135
Text 135
Verweise 135
Farbe fr Text 687
Farben
Definieren in HTML 101
Hexadezimal-Modus 102
RGB-Wert 102
Farbnamen
16 Grundfarben 104
Netscape-Farbnamen 104
Farbpaletten 1111
Farbtiefe 1128
far-left 522

Stichwortverzeichnis
far-left behind 522
fast 523
faster 523
Feedback 108, 1164
Fehlermeldung (HTTP) 1173
female 524
Fenster ffnen 669
Fenster schlieen 664
Fenster verschieben 667, 668
Fenstergre ndern 673
fgColor 687
FieldDelim 1049
fieldset 724
file 200, 323
File Transfer Protocol 38, 1154
filename 948
filter
Alpha() 531
Blur() 532
Chroma() 534
DropShadow() 534
FlipH() 535
FlipV() 536
Glow() 536
Gray() 537
Invert() 537
Mask() 538
Shadow() 539
Wave() 539
XRay() 540
Filter 530, 1042, 1049, 1054
find() 665
finishopacity 532
finishx 532
finishy 532
fireball 1156
Fireball 1192
firstChild 696, 703, 780, 990
Fish-Eye-Views 51
fixed 475, 485, 496
fixed() 967
Flash 89
als Objekt einbinden 348
float 227, 504
floor() 935

focus() 666, 841

font 439, 725
fontcolor() 967
font-family: 434, 445
fontsize() 968
font-size: 436, 446
font-stretch: 438
font-style: 435, 446
font-variant: 436
font-weight 193, 438, 446
foreground 363
form 726, 837
Formatierung
logisch 167
physisch 167, 171
forms 826
action 828
encoding 829
focus() 841
form 837
handleEvent() 832
length 829
method 830
name 831
reset() 832
submit() 832
target 831
Formular
Auswahllisten 842
Formularbereich definieren 298
Formulare 297, 827
Abbrechen-Button 331
Auswahllisten 310
Beschriftung 327
Button 319
Eingabefelder 301
Elemente gruppieren 325
grafische Buttons 333
Label fr Elemente 327
mehrzeilige Eingabefelder 305
Passwort-Eingabefelder 304
Sende-Button 331
Tabulatorsteuerung 328
Tastaturkrzel 329
verarbeiten mit CGI 339

1293

1294

Stichwortverzeichnis

verarbeiten per E-Mail 338

Versteckte Elemente 324
Zeichensatz 300
Zielfenster fr Server-Antwort 300
Formularelemente 833
Forum 69
forward() 666, 892
Forwarding 127
Fotos 1124
frame 243, 727
Frame, Innenabstnde 282
frameborder 286
frames 677
length 680
Frames 271, 678
eingebettete Frames 289
Farbige Rahmen 287
Frameset definieren 273
Langbeschreibung fr Framefenster 281
Nachteile 294
Noframes-Bereich 279
Ohne Rahmen 284
Rahmendicke 284
Unvernderbare Fenstergre 284
Verweise in Frames 287
Zielfensterbasis 131
frameset 728, 1274
Frameset 97
HTML-Grundgerst 272
siehe Frames 272
framespacing 286
Frequently Asked Questions 63
fromCharCode() 968
ftp 109
// 199
FTP 38, 1154
FTP 199
FTP-Programme 67, 1151, 1154
fuchsia 103
Function 926
arguments 928
arity 928
caller 929

G
Gammakorrektur 1135
Gstebuch 68
Gateway 34
Gatterzeichen 197
Geschtzte Leerzeichen 149
get 299
getAttribute() 788, 811, 819, 1074
getAttributeNode() 788
getDate() 911
getDay() 912
getElementById() 378, 693, 988
getElementsByName() 694, 988
getElementsByTagName() 695, 988
getFullYear() 912
getHours() 913
getMilliseconds() 913
getMinutes() 914
getMonth() 914
getSeconds() 915
getSelection() 696
getTime() 686, 915
getTimezoneOffset() 916
getUTCDate() 916
getUTCDay( 916
getUTCFullYear() 917
getUTCHours() 917
getUTCMilliseconds() 917
getUTCMinutes() 917
getUTCMonth() 917
getUTCSeconds() 917
getYear() 917
GIF 213
GIF-Format 1111
Animation 1140
Gitternetzlinien 243
Gliederung 1148
GMT 688, 909
go() 892
google 1156
Google 1192
gopher // 199
Gopher 39, 199

Stichwortverzeichnis
grad 431
Grafik 850
als Verweis nutzen 227
ausrichten 219
ausrichten mit Tabellen 223
Breite 216
Hhe 216
Langer Beschreibungstext 218
Name zuweisen 218
Rahmen 217
Textfluss steuern 221
Verweis-sensitiv 228
Grafik einbinden 213
Grafik-Effekte
Dynamische Filter 1054
Grafikformate 1111
Graphics Interchange Format 1111
Graustufen 537, 1132
gray 103
green 103
Greenwich Mean Time 909
Greenwich-Zeit 688
greytext 429
groove 468
Grer-Als-Zeichen 101
groups 245
Guided tours 52
gutter 187

H
h1-h6 729
HAM 54
handleEvent() 667, 697, 832, 841, 857, 873
hard 309
hasChildNodes() 789
hash 893
head 730
Header 93
HeaderName 1202
headers 268
hebrew 480
height 362, 501, 853, 858, 961
Helligkeit 1133
help 528
hidden 140, 325, 363, 468, 503, 509

1295

hide 376
higher 523
highlight 429
highlighttext 429
Hintergrundbild 137, 251, 1119
Hintergrundbilder 471
Hintergrundfarbe 135, 251
Hintergrundfarben 471
Hintergrundmusik 140
Hintergrund-Sound 520
hiragana 480
hiragana-iroha 480
Histogramm 1134
history 891
back() 892
forward() 892
go() 892
length 892
Hit 1163
Holy Scrollers 53
home() 667
Homepage, Dateiname 112, 200
host 894
Host 30
Hosting-Provider 1150
hostname 894
Hostnummer 30
Hotkeys 211, 329
hr 730
href 231, 407, 895
hreflang 210
hsides 243
hspace 222, 260, 292, 354, 361, 363, 854, 859
htaccess 1195
html 731
HTML 42, 54, 73
Dokumenttyp-Angabe 95
Parser 93
Relen zur Texteingabe 98
Syntax-Prfung online 69
HTML 1.0 76
HTML 2.0 76
HTML 3.2 76
HTML 4.0 76
HTML 4.01 Transitional 96

1296

Stichwortverzeichnis

HTML frameset 1273

HTML loose 1273
HTML prfen, Online-Validator 115
HTML strict 1273
HTML transitional 1273
HTML-Datei
Grundgerst 94
Titel 119
HTML-DTD 1273
HTML-Editoren 66
HTML-eigene Zeichen, Maskieren 101
HTML-Elemente 91
HTML-Elementobjekte 700
HTML-Parser 93, 389
HTML-Varianten 1273
HTML-Versionen 75
http// 109, 199
HTTP_USER_AGENT 1189
http-equiv 120
HTTP-Protokoll 42
https// 199
HTTP-Statuscodes 1173
Hurenkinder 516
HyperBase 54
Hyperlinkfarbe 682, 688
besuchte Seiten 690
Hyperlinks 75, 189
Hypertext 45, 113
Hypertext Abstract Machine 54
Hypertext Markup Language 42, 73
Hypertext Preprocessor 85
Hypertext Transfer Protocol 42
Hz 431

I
i 732
IAB 35
IANA 35, 1183
ICab 1192
ICANN 34, 35
id 267, 378, 422, 801
IDREF 1226
IETF 35, 62
iframe 732
image 334, 1179

Image Map 228

image/gif 1111
image/jpeg 1112
image/png 1113
image/svg+xml 1115
image/x-wavelet 1114
images 850
border 852
complete 852
handleEvent() 857
height 853
hspace 854
length 854
lowsrc 854
name 855
src 855
vspace 856
width 857
img 219, 733
implied 1225
in 427
inactiveborder 429
inactivecaption 429
Includes 1200
IncludesNOEXEC 1200
index.htm 112, 200, 390
index.html 112, 200
Indexes 1200
Indexmetapher 1148
indexOf() 968
IndexOptions 1203
IndexOrderDefault 1203
infinite 140
infobackground 429
Informations- und
Kommunikationsdienstegesetz 1169
Informationsgemeinschaft zur Festlegung der
Verbreitung von Werbetrgern e.V 1163
Informationsverteilung 113
infotext 429
inherit 376, 515
inline 507
Inline-Element 176
Inline-Elemente 167, 172
Inline-Layer 367

Stichwortverzeichnis
inline-table 508
Innenabstand 460
innerHeight 653
innerHTML 801
innerText 784, 802
innerWidth 653
input 735
ins 737
insertAdjacentHTML() 811
insertAdjacentText() 812
insertBefore() 790
insertData() 790
inset 468
inside 480
Interlaced 1111
Intermedia-Studie 59
International Network Information Center 35
Internet Architecture Board 35
Internet Assigned Numbers Authority 35
Internet Draft 62
Internet Engineering Task Force 35, 62
Internet Explorer, Identifikation 1190
Internet Protocol 30
Internet Society 35
Internet-Protokoll 109
Internet-Zugang 1150
InterNIC 35
Intervall
abbrechen 662
einrichten 676
IP 30
IP-Adresse 30
dynamische Zuteilung 30
IP-Adressen aussperren 1199
irc 200
IRC 39
isFinite() 980
isindex 737
ismap 232
isNaN() 981
ISO 3166-1 1183
ISO 639-1 1183
ISO 639-2 1183
ISO 8859-1 99
ISO/IEC 10646 1102

ISO-8859 1096
ISO-8859-1 1098
ISO-8859-10 1101
ISO-8859-2 1098
ISO-8859-3 1099
ISO-8859-4 1099
ISO-8859-5 1099
ISO-8859-6 1100
ISO-8859-7 1100
ISO-8859-8 1100
ISO-8859-9 1101
ISO-Norm 8879 74
isTextEdit 802
italic 435
italics() 969
IuKDG 1169
IVW 1163

J
Java 86
java: 345
Java-Applet, Parameter 346
Java-Applets 345
einbinden nach HTML 3.2 357
javaEnabled() 942
JavaScript 81, 1002
Event-Handler 379
Funktion 926
Mathematik 930
Sprachversion festlegen 126
JDBC DataSource Applet 1051
join() 902
Joint Photographic Expert Group 1112
Joyce, Michael 48
JPEG 213
JPEG-Format 1112
progressive JPEG 1113
JScript 82, 86, 884, 1002
justify 145, 453

K
katakana 480
katakana-iroha 480
Kaufmnnisches Und 101
kbd 738

1297

1298

Stichwortverzeichnis

keyCode 886
keywords 121
kHz 431
Kindknoten 987
KK-Antrag 1165
Klasse-A-Netz 30
Klasse-B-Netz 31
Klasse-C-Netz 31
Kleiner-Als-Zeichen 101
Klickbutton 319
Knoten 987
Kohsive Geschlossenheit 50
Kommentar 107
Konnektierung 1165
Kontrast 1133
Kopfzelle 235
Kuhlen, Rainer 47

L
label 316, 738
Label 327
landscape 512
lang 125, 377, 378, 395, 803
language 383, 803, 941
Language 1049
large 436
larger 436
lastChild 780
lastIndexOf() 969
lastModified 685, 688, 693
Latin-1 99, 1098
Latin-2 1098
Latin-3 1099
Latin-4 1099
Latin-5 1101
Latin-6 1101
Lauftext 184
Lautstrke 517
Layer 365, 862, 1012
Anzeigebereich beschneiden 368
Hintergrundbild 372
Hintergrundfarbe 371
Inline-Layer 367
Schichtposition 373
Sichtbarkeit 375

verschachteln 370
layers 367, 862, 1012
above 863
background 864
below 865
bgColor 864
captureEvents() 873
clip 865
document 867
handleEvent() 873
left 868
length 868
load() 874
moveAbove() 874
moveBelow() 875
moveBy() 875
moveTo() 876
moveToAbsolute() 877
name 869
pageX 869
pageY 869
parentLayer 870
releaseEvents() 877
resizeBy() 877
resizeTo() 878
routeEvent() 879
siblingAbove 870
siblingBelow 871
src 871
top 872
visibility 872
zIndex 873
layerX 887
layerY 887
Layout 261
Leerzeichen 99
geschtzt 149
Geschtztes Leerzeichen 99
mehrere Leerzeichen erzwingen 149
left 145, 222, 361, 367, 453, 504, 506, 515, 522,
868
left behind 522
left: 496, 498
leftmargin 138
left-side 522

Stichwortverzeichnis
left-side behind 522
leftwards 522
legend 739
length 680, 803, 823, 824, 826, 829, 846, 854,
859, 868, 881, 892, 900, 945, 948, 964
Lesezeichen 52
letter-spacing: 441
level 523
lhs 243
li 740
lighter 438
lime 103
line-height: 449
line-through 442
Linie 178
link 136, 741
link() 970
linkColor 688
links 879
length 881
location 880
name 880
target^ 881
text 882
x 882
y 882
Links 189
Listen 150
Definitionsliste 153
formatieren mit CSS 157, 477
HTML-Eigenschaften 155
Mens und Verzeichnisse 154
Nummeriert 152
list-item 507
list-style: 482
list-style-image: 481
list-style-position: 480
list-style-type: 478
LiveWire 825
LN10 931
LN2 931
load() 874
location 880, 893
hash 893
host 894

hostname 894
href 895
pathname 895
port 896
protocol 896
reload() 897
replace() 897
search 896
location.href 320
locationbar 654
log() 935
LOG10E 932
LOG2E 931
Logarithmus 931, 932
Log-Dateien 1159
Logische Beziehungen 132
Logische Textauszeichnung 167
longdesc 219, 281, 292
loop 140, 363
loose 1274
Lost in Hyperspace 51
lower 523
lower-alpha 478
lowercase 443
lower-greek 480
lower-latin 478
lower-roman 478
lowsrc 215, 854
ltr 170, 378, 504
LuraWave-Format 1114
Lycos 1192
Lynx 1192

M
Mailing-Listen 70
mailto
zustzliche Angaben 202
Sonderzeichen 204
mailto: 202, 828
male 524
map 742
margin: 459, 512
margin-bottom 227
margin-bottom: 456
marginheight 139, 283

1299

1300

Stichwortverzeichnis

margin-left: 457
margin-right 227
margin-right: 458
margin-top: 455
marginwidth 139, 283
Markenrecht 1168
marker 507
marks: 513
maroon 103
Marquee 184
match() 970
Math 929
abs() 933
acos() 933
asin() 933
atan() 934
ceil() 934
cos() 934
E 930
exp() 935
floor() 935
LN10 931
LN2 931
log() 935
LOG10E 932
LOG2E 931
max() 936
min() 936
PI 932
pow() 937
random() 937
round() 937
sin() 938
sqrt() 938
SQRT1_2 932
SQRT2 932
tan() 938
mathline: 448
MathML 80
Mauszeiger 527
max() 936
MAX_VALUE 950
max-height: 502
maxlength 302, 323
max-width: 501

mayscript 359
MdStV 1170
media 382, 409
Mediendienstestaatsvertrag 1170
Medientyp 1179
medium 436, 465, 523
Mehrspaltiger Text 186
Mehrzeilige Eingabefelder 305
Memex 54
menu 429, 743
menubar 655
Menleiste 655
Menlisten 154
menutext 429
message 1179
meta 744
Meta-Angaben 1065
Automatische Weiterleitung 127
Autor 121
Datum 121
Dublin Core 122
Grundlagen 119
Originaladresse 126
PICS-Rating 128
Profil 129
Schema 129
Scriptsprache 126
Sprache bei Stichwrtern 125
Stichworte 121
Style Sheets 126
Zeichensatz festlegen 125
method 299, 830
method= 299
Microsoft, Entwickler-Infos 64
MID 140
middle 221, 353, 361, 451
Milnet 28
Mime 37, 1178
Mime-Typ 343
Mime-Type 207, 388
Mime-Typen 1178
mimeTypes 943
description 944
enabledPlugin 944
length 945

Stichwortverzeichnis
suffixes 945
type 946
min() 936
MIN_VALUE 951
min-width: 500
mix 521
mm 427
model 1179
modifiers 887
monospace 434
Mosaic 43, 1192
move 528
moveAbove() 874
moveBelow() 875
moveBy() 667, 875
moveTo() 668, 876
moveToAbsolute() 877
movie 350
Mozilla 1189
ms 431
MSHTML Data Source 1054
MSIE 1191
Multimedia 341
Multimedia-Objekt 858
multipart 1179
multiple 312
Multipurpose Internet Mail Extensions 1178
MultiViews 1200

N
n, m-Relation 50
name 196, 278, 288, 290, 301, 318, 319, 320, 322,
347, 352, 359, 367, 655, 822, 831, 838, 855,
859, 869, 880, 949
named entities 1263
Namensraum 391
NaN 951
narrower 438
National Center for Supercomputing 84
National Science Foundation 28
navigator 939, 1189
appCodeName 939
appName 940
appVersion 940
cookieEnabled 940

javaEnabled() 942
language 941
platform 941
userAgent 942
navy 103
NCSA 84
NCSA-Server 1195
NEGATIVE_INFINITY 952
Negativ-Effekt 540
Nelson, Ted 47, 56
ne-resize 528
Netscape 43
Entwickler-Infos 64
Netscape-Farbpalette 1129
Netzwerknummer 30
news: 199
Newsgroup 28, 35, 40
Newsgroups 70, 199
Newsreader 40
nextSibling 781
Nicht-proportionale Schrift 163
node 775, 987
appendChild() 785
appendData() 786
attributes 777
childNodes 778
cloneNode() 786
data 779
deleteData() 787
firstChild 780
getAttribute() 788
getAttributeNode() 788
hasChildNodes() 789
insertBefore() 790
insertData() 790
lastChild 780
nextSibling 781
nodeName 782
nodeType 782
nodeValue 783
parentNode 784
previousSibling 784
removeAttribute() 791
removeAttributeNode() 792
removeChild() 792

1301

1302

Stichwortverzeichnis

replaceChild() 793
replaceData() 793
setAttribute() 794
setAttributeNode() 795
nodeName 782
nodeType 782
nodeValue 692, 703, 704, 783
noframes 744
Noframes-Bereich 272
nohref 231
noindex 124
none 245, 479, 504, 506, 513
no-repeat 475
noresize 284
normal 435, 454, 518
Northernlight 1192
noscript 745
Noscript-Bereich 384
noshade 179
nowrap 249, 454
n-resize 528
NSF 28
Number 949
MAX_VALUE 950
MIN_VALUE 951
NaN 951
NEGATIVE_INFINITY 952
POSITIVE_INFINITY 952
to_string() 954
toExponential() 953
toFixed() 953
toPrecision() 954
Number() 983
Nummerierte Liste 152
Nummerierung, automatisch 493
nw-resize 528

O
object 359, 746
Objekte 341
Rahmen 350
oblique 435
off 309
ffentliches Recht 1169
offsetHeight 804

offsetLeft 804
offsetParent 805
offsetTop 806
offsetWidth 806
offsetX 888
offsetY 888
ol 747
olive 103
once 489
onclick 380
onClick 320, 380
ondblclick 380
onkeydown 380
onkeypress 380
onKeyPress 736
onkeyup 380
Online-Dienst 1151
onmousedown 380
onmousemove 380
onmouseout 380
onmouseover 380
onmouseup 380
opacity 532
open() 651, 669, 697
opener 652
Opera 1192
optgroup 748
option 749
options 842
defaultSelected 845
length 846
selected 847
selectedIndex 848
text 849
value 849
Organisation 113
orphans: 515
outerHeight 656
outerHTML 806
outerText 807
outerWidth 656
outset 468
outside 480
overflow: 499, 502
overline 442

Stichwortverzeichnis

P
p 750
Packer 68
padding: 462
padding-bottom: 461
padding-left: 462
padding-right: 462
padding-top: 461
page-break-after: 515
page-break-before: 514
Page-Impressions 1163
Pageviews 1163
pagex 371
pageX 869, 888
pageXOffset 657
pagey 371
pageY 869, 888
pageYOffset 657
palette 363
panose-1: 447
param 751
parentElement 805, 807
parentLayer 870
parentNode 784
parentTextEdit 808
parse() 918
parseFloat() 981
parseInt() 726, 982
Parser 93
Passermarken 513
password 1053
Passwort, Eingabefeld 304
Passwortschutz 1195
Patentrecht 1168
pathname 895
Pause 518, 519
pause: 519
pause-after: 519
pause-before: 518
pc 427
Pellow, Nicola 43
Perl 83
Perl-Interpreter 83
personalbar 658
Persnlichkeitsrecht 1169

1303

Pfad 52
PGP 37, 1197
PHP 84, 112
physical 309
PI 932
PICS 128
PICS-Label 128
pitch: 524
pitch-range: 525
pixelDepth 961
Pixelgrafik 1127
platform 941
Platform for Internet Content Selection 128
Platzierung 261
play() 861
play-during: 520
Plugin 207, 342
plugins 946
description 947
filename 948
length 948
name 949
pluginspage 363
pluginurl 362
PNG 213
PNG-Format 1113
pointer 528
polygon 230
pop() 903
port 896
Portable Network Graphic 1113
Portnummer 109
portrait 512
position: 495
Positionierung von Elementen 494
POSITIVE_INFINITY 952
post 299
PostScript 1095
pow() 937
Prformatierter Text 163
CSS 165
pre 454, 752
Pretty Good Privacy 37
previousSibling 784
print() 671

1304

Stichwortverzeichnis

Printmedien 511
Produkthaftungsrecht 1169
Produktname 1190
profile 129
Progressive JPEG 1113
Projektverwaltung 1143
prompt() 671, 699
Proposed Recommendation 61
protocol 896
Provider, Wechsel 1165
Proxy-Agent 1192
Pseudoformate 424, 489
pt 427
purple 103
push() 903
Push-Technologien 32
px 427

Q
q 752
Quadratwurzel 932, 938
Quelle angeben 160

R
rad 431
Radiant 933
radio 318
Radiobuttons 317
Rahmen 463
Rahmendicke 464
Rahmenfarbe 466
Rahmentyp 467
random() 726, 766, 937
RARE 29
Rastergrafik 1127
RDF 120
RDS 1050
ReadmeName 1202
readonly 310
Rechtliche Aspekte 1166
Recommendations 61
recordNumber 809
rect 230, 510
red 103

Referenzieren 108
Absolute Pfadangaben 110
Relative Pfadangaben 110
bergeordnetetes Verzeichnis 111
referrer 689, 970
refresh 127
RegExp 955
$[1..9] 957
exec() 958
test() 958
Regulre Ausdrcke 955
rel 208
rel= 132, 133
relative 496
Relative Pfadangaben 110
releaseEvents() 672, 698, 877
reload() 897
Remote Data Service 1050
removeAttribute() 791, 813, 820, 993
removeAttributeNode() 792
removeChild() 792
repeat 474, 521
repeat-x 474
repeat-y 475
replace() 897, 971
replaceChild() 793, 794
replaceData() 793
Request For Comment 62
require 1197
required 1225
Rseaux Associs pour la Recherche Europenne
29
Rseaux IP Europens 29
reset 333
reset() 832
resizeBy() 673, 877
resizeTo() 673, 878
Resource Description Framework 120
rev 208
revealTrans() 1060
reverse() 904
RFC 62
RFC822 205
rgb(...) 428

Stichwortverzeichnis
RGBA-Modell 1129
RGB-Wert 102
rhs 243
richness: 525
ridge 468
right 145, 222, 361, 453, 504, 506, 515, 522
right behind 522
right: 498
right-side 522
rightwards 522
RIPE 29
Robot 1192
Indexierung verhindern 124
robots 124
robots.txt 1193
Rollbalken 658
round() 937
routeEvent() 674, 698, 879
Routing 34
Routing-Tabellen 34
row 268
RowDelim 1049
rowgroup 269
rows 245, 273, 305
rowspan 256
rtl 170, 378, 504
Rckbeziehungen 134
rules 245
Rundung 937
run-in 507

S
s 431, 753
samp 754
Sandbox 87
sans-serif 434
Sttigung 1133
Scalable Vector Graphics 1115
Scharfes S 100
Schatten 539
Schattenwurf 534
scheme 129
Schnittmarken 513
Schnotz-Studie 59
Schnupp, Peter 47

Schrift
dicktengleich 163
nicht-proportional 163
Schriftart 181
downloadbar 1105
Schriftartendatei 444
Schriften, Downloadbare Schriften 133
Schriftfarbe 135, 181
Schriftformatierung 433
Schriftge 181
Schusterjungen 515
scope 268
screen 382
Screen 959
availHeight 959
availWidth 960
colorDepth 960
height 961
pixelDepth 961
width 962
screenX 889
screenY 889
script 754
Script-Bereiche 382
scroll 475, 503
scrollamount 185
scrollbar 429
scrollbar: 528
scrollbar-3dlight-color 529
scrollbar-arrow-color 529
scrollbar-base-color 529
scrollbar-darkshadow-color 529
scrollbar-face-color 529
scrollbar-highlight-color 529
scrollbars 658
Scrollbars 281
scrollbar-shadow-color 529
scrollbar-track-color 529
scrollBy() 674
scrolldelay 185
scrolling 282
scrollIntoView() 813
scrollTo() 675
search 896
search() 972

1305

1306

Stichwortverzeichnis

Secure Shell 37
Segal, Ben 42
Seitengre 511
Seitenlayout 261, 511
Seitenleiste 658
Seitenrnder 138, 512
Seitenumbruch 514, 515
select 756
select() 842
selected 313, 847
selectedIndex 848
Selektor 413
semi-condensed 438
semi-expanded 439
separate 469, 486
se-resize 528
serif 434
Server Side Includes 112
Server-Hosting 1153
Server-Push 32
Server-seitige verweis-sensitive Grafik 232
Server-Software 31
Sessions 1164
setAttribute() 729, 794, 811, 814, 820
setAttributeNode() 795
setDate() 918
setFullYear() 919
setHours() 919
setInterval() 676
setMilliseconds() 920
setMinutes() 920
setMonth() 921
setSeconds() 922
setText() 768
setTime() 686, 922
setTimeout() 677, 680, 684, 802, 1087
setUTCDate() 923
setUTCDay() 923
setUTCFullYear() 923
setUTCHours() 923
setUTCMilliseconds() 923
setUTCMinutes() 924
setUTCMonth() 924
setUTCSeconds() 924
setYear() 924

SGML 54, 74, 387

shape 230
Sharks 53
shift() 904
shiftKey 885
show 376, 488
showUI 1052
siblingAbove 870
siblingBelow 871
silver 103
sin() 938, 995
Sinus 938
size 182, 302, 311, 323
size: 511
slice() 905, 973
slow 523
slower 523
small 436, 757
small() 973
small-caps 436
smaller 436
SMIL 90, 1116
soft 308
solid 468
Sondertasten 883
Sonderzeichen 100
Sort 1049
sort() 906, 991
Sound einbinden 140
sourceIndex 809
Spacer 187
Spaltensatz 186
span 237, 758
speak: 518
speak-header: 488
speak-numeral: 526
speak-punctuation: 526
speech-rate: 523
spell-out 518
Spider 1192
splice() 906
split() 973
Sprachausgabe 517
Sprachenkrzel 1183
Sprechertyp 523

Stichwortverzeichnis
Sprechgeschwindigkeit 523
Sprechhast 525
Sprechhhe 524
Sprechweise 525
SQL 1051
sqlStatement 1052
sqrt() 938
SQRT1_2 932
SQRT2 932
square 157, 479
src 214, 278, 290, 334, 362, 369, 385, 855, 860,
871
url(Datei) 445
src: 447
s-resize 528
SSH 37, 68, 1153
Standard Generalized Markup Language 74, 387
standby 356
start 157
startx 532
starty 532
static 496
Statistik 1189
Statistiken 1161
status 660
statusbar 659
Statuszeile 659
stemh: 447
stemv: 447
Stichworte 121
Sprache festlegen 125
Stimmgewalt 525
stop() 677, 861
Strafrecht 1168
stress: 525
strict 1273
Strict 96
strike 759
strike() 974
string 962
anchor() 964
big() 965
blink() 965
bold() 965
charAt() 966

1307

charCodeAt() 966
concat() 966
fixed() 967
fontcolor() 967
fontsize() 968
fromCharCode() 968
indexOf() 968
italics() 969
lastIndexOf() 969
length 964
link() 970
match() 970
replace() 971
search() 972
slice() 973
small() 973
split() 973
strike() 974
sub() 974
substr() 975
substring() 975
sup() 976
toLowerCase() 976
toUpperCase() 977
String() 983
Structured Generalized Markup Language 54
style 378, 408, 426, 532, 760, 815
getAttribute() 819
removeAttribute() 820
setAttribute() 820
style=1 532
Stylesheets 77, 403
sub 451, 761
sub() 974
Subdomain 1152
subject 203
submit 333
submit() 832
substr() 975
substring() 975
Subtyp 1179
Suchfunktion 665
Suchmaschine 1155, 1192
Indexierung verhindern 124
steuern mit robots.txt 1193

1308

Stichwortverzeichnis

Stichwort angeben 121

suffixes 945
summary 266
sup 761
sup() 976
super 451
Support 69
SVG 80, 90
SVG-Format 1115
sw-resize 528
Symbolleiste 660
Syntax prfen, HTML-Validator 115

T
Tabelle
Ausrichtung 259
Auenrahmen 242
Breite angeben 245
definieren 233
dicktengleiche Schrift 163
Farbige Trennlinien 254
formatieren mit CSS 483
Fu definieren 238
Gitternetzlinien steuern 243
Grafik ausrichten 223
Hhe angeben 245
Inhalt zusammenfassen 265
Kategorie definieren 269
Kopf definieren 238
Krper definieren 238
leere Zelle 235
Seitenlayout 261
Textfluss steuern 260
berschrift 257
Unterschrift 257
Zellenabstand 240
Zellenbeschreibung 266
tabindex 211, 231, 328
table 508, 761
table-caption 508
table-column 508
table-column-group 508
table-footer-group 508
table-header-group 508
table-layout: 485

table-row 508
table-row-group 508
Tabular Data Control 1048
Tabulator 99, 210, 328
Tag, Grundlagen 91
tagName 808, 809
tan() 938
Tangens 938
target 194, 278, 288, 300, 831, 881
Tastaturkrzel 211, 329
Tastaturberwachung 883
tbody 764
TCP 30
TCP/IP-Protokoll 28, 29
td 765
TDC 1048
TDDSG 298, 1170
TDG 1170
teal 103
Technical Reports 62
Teledienste-Datenschutzgesetz 298, 1170
Teledienstegesetz 1170
telnet // 199
Telnet 37, 68, 199, 1153
test() 958
text 136, 528, 823, 849, 882, 1179
text/css 126, 382
text/html 388
text/javascript 126
text/xml 388
Textabstze 144
ausrichten 145
formatieren mit CSS 146
text-align: 452
textarea 766
Textauszeichnung
logisch 167
physisch 167, 171
text-bottom 451
text-decoration 193
text-decoration: 442
Textfarbe 687
text-indent: 448
Textknoten 987
TextQualifier 1050

Stichwortverzeichnis
Textrichtung ndern 170
text-shadow: 444
texttop 221, 353
text-top 451
Textumbruch 453
tfoot 768
th 769
The Internet Corporation for Assigned Names
and Numbers 35
thead 770
thick 465
thin 465
Thread 41
threeddarkshadow 429
threedface 429
threedhighlight 429
threedlightshadow 429
threedshadow 429
Thumbnails 1123
Tim Berners-Lee 41
Timeout
abbrechen 663
einrichten 677
Titel 119, 689
title 231, 377, 378, 689, 771, 809
to_string() 954
toExponential() 953
toFixed() 953
toGMTString() 686, 925
toLocaleString() 925
toLowerCase() 976
T-Online 1151
toolbar 660
top 197, 221, 353, 361, 367, 451, 872
top.close() 677
top: 497
Top-Level-Domain 32
topline: 448
topmargin 138
toPrecision() 954
toString() 982
toUpperCase() 977
transitional 1273
Transitional 97
Transmission Control Protocol 30

1309

transparent 466
Transparente Farbe 1111
Transparenz 1130
Transparenz-Effekt 1130
Transparenzfarbe 534
Transparenzmaske 538
Trennlinie 178
true 908
TrueDoc 1106
TrueType 1095
tt 773
type 208, 301, 343, 382, 383, 838, 860, 890, 946
Typisierte Verweise 208

U
u 773
berblendeffekt 531
berschriften 141
ausrichten 142
formatieren mit CSS 143
Uhrzeit 910
ul 774
ultra-condensed 439
ultra-expanded 439
Umkonnektierung 1165
Umlaute 100
undefined 661
underline 442
unescape() 984
Unicode 1095, 1102
unicode-range: 446
Uniform Resource Locator 109
Uniform Resource Name 109
units-per-em: 447
Universal Coordinated Time 909
Universal Resource Identifier 108
Universalattribut 93, 377
Universaleigenschaften 701
Unix-Dateinamen 111
unshift() 907
Upload 38, 322
upper-alpha 478
uppercase 443
upper-latin 479
upper-roman 478

1310

Stichwortverzeichnis

Urheberrecht 108, 1168

URI 42, 108
zuletzt besuchte Seite 689
URL 109, 689
url([Datei]) 528
URN 109
UseHeader 1050
usemap 231, 345
Usenet 35, 40, 70, 199
user 1053
userAgent 839, 942
User-agent 1193
User-Agents 1189
userLanguage 941
UTC 169, 909
UTC() 925
UTC-Zeitangabe 121

V
Validator 69, 115
valign 251
value 157, 304, 318, 319, 320, 322, 324, 325, 347,
359, 839, 849
value= 315
var 775
VBScript 86, 1002
Vektorgrafik 80
Verfasser 108
version 389
Version 1190
Versteckte Formularelemente 324
vertical-align 227
vertical-align: 450
Vertragsrecht 1168
Verweis
Grafik als V. 227
typisiert 208
Verweise 75, 189
Anker 196
auf beliebige Dateien 206
auf Frames verweisen 287
projekt-extern 198
projekt-intern 194
Tabulatorreihenfolge 210

Tastaturkrzel 211
Zielfenster 193
Verweis-sensitive Grafik 228
Verwisch-Effekt 532
Verzeichnis, Referenzieren 111
Verzeichnislisten 154
Verzeichnismetapher 1148
Vester, Frederic 45
video 1179
virtual 309
Virtual Hosting 1152
visibility 376, 872, 1014
visibility: 509
visible 503, 509
Visits 1164
Visual Basic 1002
vlink 136
vlinkColor 690
voice-family: 523
void 243
volume: 517
vsides 243
vspace 222, 260, 292, 354, 361, 363, 856, 860

W
W3C 35, 44, 60
W3-Konsortium 35, 44, 60
wais 200
wait 528
Wallpaper 137, 471, 1119
Wasserzeichen-Effekt 475
WAV 140
Wave() 1055
Wavelet-Kompression 1114
Web Embedding Fonts Tool 1107
web.de 1156
Web-Browser 66
Webseite, Titel 119
Webseite drucken 671
Web-Services 68
Webspace 1151
Web-Verzeichnis 1156
Web-Views 50
WEFT 1107

Stichwortverzeichnis
Weiterleitung 127
welcome.htm 112, 200
welcome.html 112, 200
Werbung 1155
Wettbewerbsrecht 1168
which 890
white 103
white-space: 453
White-Space-Zeichen 99
wider 438
widows: 516
width 237, 362, 367, 857, 860, 962
width: 499
window 429, 649
alert() 660
back() 661
blur() 661
captureEvents() 661
clearInterval() 662
clearTimeout() 663
close() 664
closed 652
confirm() 664
defaultStatus 652
disableExternalCapture() 665
enableExternalCapture() 665
find() 665
focus() 661, 666
forward() 666
handleEvent() 667
home() 667
innerHeight 653
innerWidth 653
locationbar 654
menubar 655
moveBy() 667
moveTo() 668
name 655
open() 669
outerHeight 656
outerWidth 656
pageXOffset 657
pageYOffset 657
personalbar 658
print() 671

prompt() 671
releaseEvents() 672
resizeBy() 673
resizeTo() 673
routeEvent() 674
scrollbars 658
scrollBy() 674
scrollTo() 675
setInterval() 676
setTimeout() 677
status 660
statusbar 659
stop() 677
toolbar 660
windowframe 429
windowtext 429
WingDings 1095
winsock.dll 30, 1150
word-spacing: 440
Working Drafts 61
World Wide Web 41
wrap 308
w-resize 528
write() 698
writeln() 699
Wurzel 932
Wurzelelement 94
WWW 41
WYSIWYG-Editor 66

X
x 823, 882, 891
Xanadu 51, 56
x-fast 523
x-height: 447
XHTML 74, 387
Dateinamen 388
Dokumenttyp-Angaben 97
Gro-/Kleinschreibung 392
Leerraum in Wertzuweisungen 394
Mime-Type 388
Modularisierung 398
Namensraum 391
Script-Bereich 395
Style-Bereich 395

1311

1312

Stichwortverzeichnis

Verschachtelungsregeln 396
Verweise zu Ankern 394
XHTML 1.1 398
Dokumenttyp-Angabe 98
xhtml1-strict.dtd 390
XHTML-Datei
Grundgerst 94
x-large 436
xml, lang= 395
XML 54, 74, 79, 387
XML Data Source 1053
XML-Deklaration 95, 389
XML-Editor 67
XML-Namensraum 95
xmlns 391
xmlns= 95
XML-Parser 389
XSL 80, 388, 404
XSL Transformation 80
x-slow 523
XSLT 80
x-small 436
xx-large 436
xx-small 436

Y
y 824, 882, 891
yahoo 1156
yellow 103

Z
Zhler 69
ZapfDingbats 1095

Zechensatz, Zeichenweise festlegen 100

Zeichenketten 962
Zeichenreferenz 1263
Zeichensatz 99, 684, 687, 1093
Festlegen mit Meta-Angabe 125
Global festlegen 100
ISO 8859-1 99
Latin-1 99
Zeilenhhe 449
Zeilenumbruch 99, 147
mehrzeilige Eingabefelder 307
verhindern 148
Zeilenumbruch erlauben 149
Zelle
Inhalt ausrichten 249
spaltenweise verbinden 254
zeilenweise verbinden 255
Zellenabstand 240
Zelleninnenabstand 240
Zentrieren 175
Zielfenster 193
Zielfensterbasis 131
Zielgruppe 1144
z-index 375
zIndex 873
z-index: 506
ZIP-Format 205
Zitat 159
Quellenangabe 160
Zitate, formatieren mit CSS 161
Zivilrecht 1168
Zugriffsstatistik 1160