Helmut Herold: Das HTML/XHTML-Buch

Transcrição

Helmut Herold: Das HTML/XHTML-Buch
Dr. Helmut Herold
Das HTML/XHTML-Buch
mit Cascading Style Sheets und einer
Einführung in XML
Alle in diesem Buch enthaltenen Programme, Darstellungen und Informationen wurden
nach bestem Wissen erstellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund ist das in dem vorliegenden Buch enthaltene ProgrammMaterial mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autoren und
die SuSE Linux AG übernehmen infolgedessen keine Verantwortung und werden keine
daraus folgende Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieses
Programm-Materials, oder Teilen davon, oder durch Rechtsverletzungen Dritter entsteht.
Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Buch berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme, dass
solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu
betrachten wären und daher von jedermann verwendet werden dürften.
Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und
sind möglicherweise eingetragene Warenzeichen. Die SuSE Linux AG richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Andere hier genannte Produkte können
Warenzeichen des jeweiligen Herstellers sein.
Dieses Werk ist urheberrechtlich geschützt.
Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des
Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Druck, Fotokopie, Microfilm oder einem
anderen Verfahren), auch nicht für Zwecke der Unterrichtsgestaltung, reproduziert oder
unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden.
Die Deutsche Bibliothek – CIP-Einheitsaufnahme
Herold, Helmut:
Das HTML/XHTML-Buch : mit cascading style sheets und einer Einführung in
XML / Helmut Herold. – Nürnberg : SuSE-PRESS, 2002
ISBN 3-935922-52-3
© 2002 SuSE Linux AG, Nürnberg (http://www.suse.de)
Umschlaggestaltung: Fritz Design GmbH, Erlangen
Gesamtlektorat: Nicolaus Millin
Fachlektorat: Uwe Boris, Michael Eicks, Klaas Freitag, Bjoern Lotz, Arno Seidel, Steve Tomlin, Peter Varkoly
Satz: LATEX
Druck: Kösel, Kempten
Printed in Germany on acid free paper.
Inhaltsverzeichnis
1
2
Einleitung
1.1 Die Entstehung von HTML
1.2 Die Browser-Problematik
1.3 Das W3-Konsortium (W3C)
1.4 Cascading Style Sheets (CSS)
1.5 XML und XHTML
.
.
1.6 Einige Internet-Adressen .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
HTML und einige weitere wichtige Begriffe vorweg
2.1 HTML – Die Layoutsprache für WWW-Dokumente
2.2 Das Client-Server Konzept im WWW
.
.
.
2.2.1 Web-Server
.
.
.
.
.
.
.
2.2.2 Web-Clients (Web-Browser) .
.
.
.
2.2.3 HTTP – Das Kommunikationsprotokoll
.
2.2.4 URI – Die einheitliche Adressierung im Internet
.
.
.
.
.
.
.
.
.
.
.
.
1
1
2
3
3
3
4
.
.
.
.
.
.
.
.
.
.
.
7
7
7
8
8
8
9
3
Grundlegendes zu HTML-Dokumenten
3.1 Struktur von HTML-Dokumenten .
.
.
.
.
.
3.2 Struktur von HTML-Befehlen .
.
.
.
.
.
.
3.3 Grundlegende HTML-Tags
.
.
.
.
.
.
.
3.3.1 Das Tag <html>
.
.
.
.
.
.
.
.
3.3.2 Das Tag <head>
.
.
.
.
.
.
.
.
3.3.3 Das Tag <body>
.
.
.
.
.
.
.
.
3.4 Ein erstes Beispiel und weitere grundlegende HTML-Konzepte
3.5 Sonderzeichen in HTML-Dokumenten
.
.
.
.
.
3.6 Farben in HTML-Dokumenten
.
.
.
.
.
.
3.6.1 RGB-Farben und vordefinierte Farbnamen
.
.
3.6.2 Standard-Farben
.
.
.
.
.
.
.
.
3.7 Kommentare
.
.
.
.
.
.
.
.
.
.
3.8 Übung
.
.
.
.
.
.
.
.
.
.
.
11
11
11
12
12
12
12
13
16
17
17
19
19
19
4
Formatieren und Gestalten von Texten
4.1 Überschriften
.
.
.
.
4.2 Zeilenumbrüche
.
.
.
21
21
23
.
.
.
.
.
.
.
.
.
.
.
.
V
Inhaltsverzeichnis
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
Absätze
.
.
.
.
Zentrieren mehrerer Absätze
Texthervorhebungen
.
Zitate .
.
.
.
.
Darstellung von Code
.
Darstellung von Adressen
Schriftgrößen und -farben
Zeilenumbruch verhindern
Übung
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
24
25
27
30
32
34
36
40
41
5
Aufzählungen
5.1 Einfache Aufzählungen
.
.
.
.
.
.
.
.
5.1.1 Die Tags <ul> und <li>
.
.
.
.
.
.
5.1.2 Geschachtelte Aufzählungen
.
.
.
.
.
5.1.3 Alternative Aufzählungssymbole
.
.
.
.
5.1.4 Graphische Aufzählungssymbole
.
.
.
.
5.1.5 Aufzählungen mit eingerückten und abgesetzten Absätzen
5.2 Numerierte Aufzählungen
.
.
.
.
.
.
.
5.2.1 Die Tags <ol> und <li>
.
.
.
.
.
.
5.2.2 Geschachtelte numerierte Aufzählungen
.
.
.
5.2.3 Hervorheben der Numerierungssymbole
.
.
.
5.2.4 Alternative Numerierungssymbole
.
.
.
.
5.2.5 Explizites Setzen des Startwerts bei Numerierungen
5.2.6 Numerierungen mit eingerückten und abgesetzten Absätzen
5.3 Glossare, Verzeichnis- und Menülisten
.
.
.
.
.
5.4 Übung
.
.
.
.
.
.
.
.
.
.
.
43
43
43
44
45
46
47
49
49
50
50
51
53
55
57
58
6
Trennlinien
6.1 Einfache Trennlinien
6.2 Linienlänge
.
6.3 Linienbreite
.
6.4 Linienausrichtung
6.5 Linienschattierung
6.6 Übung
.
.
7
VI
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Tabellen
7.1 Tags zum Erstellen einer Tabelle
.
7.2 Tabellen mit Rahmen
.
.
.
7.3 Randabstand in Tabellenzellen
.
7.4 Tabellenrahmen in HTML-4
.
.
7.5 Tabellenbreite und -höhe .
.
.
7.6 Zellenbreite und -höhe
.
.
.
7.7 Kopfzeile und Beschriftung von Tabellen
7.8 Mehrspaltige und mehrzeilige Zellen
7.9 Ausrichten der Tabelleninhalte
.
7.10 Ausrichten von Tabellen .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
61
61
62
63
64
65
66
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
67
67
68
69
72
73
77
78
79
81
83
.
.
.
Inhaltsverzeichnis
7.11
7.12
7.13
7.14
7.15
7.16
8
9
Hintergrundfarbe für eine Tabelle .
.
.
.
Hintergrundfarbe für eine Tabellenzelle .
.
.
Hintergrundbilder in einer Tabelle .
.
.
.
Farbe für Rahmen und Gitternetzlinien .
.
.
Bilder in Tabellenzellen
.
.
.
.
.
.
HTML-4-Erweiterungen .
.
.
.
.
.
7.16.1 Die Tags <thead>, <tbody> und <tfoot>
7.16.2 Die Tags <colgroup> und <col>
.
.
7.17 Übung
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
86
87
88
89
90
92
92
96
99
Graphiken in HTML-Dokumenten
8.1 Graphiken einbinden
.
.
.
.
8.2 Alternativer Text
.
.
.
.
.
8.3 Skalieren von Graphiken .
.
.
.
8.4 Ausrichten von Graphiken
.
.
.
8.5 Beschriften von Graphiken
.
.
.
8.6 Abstand zwischen Graphik und Umgebung
8.7 Rahmen bei Graphiken
.
.
.
.
8.8 Graphiken als Hintergrundbilder
.
.
8.9 Graphiken in Überschriften
.
.
.
8.10 Übung
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
101
101
103
104
107
108
109
111
112
113
113
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Hyperlinks (Verweise)
9.1 Lokale Verweise innerhalb einer HTML-Datei
.
.
.
9.1.1 Verweisziel markieren .
.
.
.
.
.
.
9.1.2 Verweise definieren
.
.
.
.
.
.
.
9.1.3 Markieren von Verweiszielen mit dem Attribut id= .
9.2 Verweise auf andere lokale Dokumente .
.
.
.
.
9.3 Verweise ins Web zu nicht lokalen Dokumenten
.
.
.
9.4 Farben von Hyperlinks
.
.
.
.
.
.
.
.
9.5 Graphiken als Hyperlinks
.
.
.
.
.
.
.
9.6 Hyperlinks auf Graphiken
.
.
.
.
.
.
.
9.7 Graphische Hyperlinks auf Graphiken
.
.
.
.
.
9.8 Hyperlinks in einem Text
.
.
.
.
.
.
.
9.9 Die unterschiedlichen Protokolltypen
.
.
.
.
.
9.9.1 http: – Zugriff auf Webseiten
.
.
.
.
.
9.9.2 file: – Zugriff auf Dateien am lokalen Rechner
.
9.9.3 ftp: – Zugriff auf Filetransfer-Service
.
.
.
9.9.4 news: – Zugriff auf Nachrichten von Newsgroups .
9.9.5 mailto: – Verschicken von Mails an vordefinierte Adressen
9.9.6 telnet: – Aufbau einer Verbindung zu einem Telnet-Server
9.9.7 gopher: – Zugriff auf einen gopher-Server
.
.
9.9.8 javascript: – JavaScript-Aufrufe
.
.
.
.
9.10 Übung
.
.
.
.
.
.
.
.
.
.
.
10 Frames
115
115
115
115
118
118
119
121
122
123
125
126
127
127
128
129
130
131
132
132
132
133
137
VII
Inhaltsverzeichnis
10.1
10.2
10.3
10.4
10.5
10.6
Tags zum Erzeugen von Frames
.
.
.
.
.
.
Vertikal angeordnete Frames
.
.
.
.
.
.
.
Horizontal angeordnete Frames
.
.
.
.
.
.
Geschachtelte Frames
.
.
.
.
.
.
.
.
Bildlaufleisten bei Frames
.
.
.
.
.
.
.
Frames und Hyperlinks
.
.
.
.
.
.
.
.
10.6.1 Hyperlinks auf bestimmte Frames
.
.
.
.
10.6.2 Voreingestellte Hyperlinks auf ein Frame
(<base target=>)
.
.
.
.
.
.
.
10.6.3 Hyperlinks auf unterschiedliche Frames in einem
HTML-Dokument
.
.
.
.
.
.
.
10.6.4 Vordefinierte Namen für Frames .
.
.
.
.
10.6.5 Umschalten zwischen verschiedenen Frame-Konfigurationen
10.6.6 Hyperlinks auf mehrere Frames .
.
.
.
.
10.7 Abstände und Rahmen in Frames
.
.
.
.
.
.
10.7.1 Mindestabstände vom Rand eines Frames .
.
.
10.7.2 Rahmen um Frames
.
.
.
.
.
.
.
10.7.3 Farbige Framerahmen .
.
.
.
.
.
.
10.8 Unveränderbare Frames mit fester Größe
.
.
.
.
10.9 Browser, die keine Frames unterstützen .
.
.
.
.
10.10Eingebettete Frames .
.
.
.
.
.
.
.
.
10.10.1 Definieren von eingebetteten Frames .
.
.
.
10.10.2 Hyperlinks und eingebettete Frames .
.
.
.
10.11Übung
.
.
.
.
.
.
.
.
.
.
.
11 Formulare
11.1 Allgemeines zu Formularen
.
.
.
.
.
.
.
11.1.1 Formulardefinition (Tag <form>)
.
.
.
.
11.1.2 Festlegen der Versandadresse (Attribut action=)
.
11.1.3 Festlegen der Übertragungsmethode
(Attribut method=)
.
.
.
.
.
.
.
11.2 Eingabefelder
.
.
.
.
.
.
.
.
.
.
11.2.1 Einzeilige Eingabefelder
.
.
.
.
.
.
11.2.2 Mehrzeilige Eingabefelder .
.
.
.
.
.
11.3 Auswahllisten .
.
.
.
.
.
.
.
.
.
11.3.1 Das Tag <select>
.
.
.
.
.
.
.
11.3.2 Das Tag <option>
.
.
.
.
.
.
.
11.4 Radio- und Checkbuttons
.
.
.
.
.
.
.
11.4.1 Radiobuttons
.
.
.
.
.
.
.
.
11.4.2 Checkbuttons
.
.
.
.
.
.
.
.
11.5 SUBMIT- und RESET-Buttons .
.
.
.
.
.
.
11.5.1 SUBMIT-Buttons .
.
.
.
.
.
.
.
11.5.2 Angabe mehrerer SUBMIT-Buttons in einem Formular
11.5.3 RESET-Buttons
.
.
.
.
.
.
.
.
11.5.4 Graphiken als SUBMIT-Button
.
.
.
.
.
11.6 Allgemeine Pushbuttons .
.
.
.
.
.
.
.
VIII
137
138
140
142
145
146
146
149
150
153
158
162
165
165
167
169
171
172
177
177
180
182
185
185
185
186
186
186
187
188
189
189
190
191
191
192
193
193
196
200
201
202
Inhaltsverzeichnis
11.6.1 Das Tag <input type=button>
.
.
.
11.6.2 Das Tag <button>
.
.
.
.
.
.
11.7 Schicken von Dateien mit dem FILE-Button
.
.
.
11.8 Unsichtbare Formularelemente
.
.
.
.
.
11.9 Beschriften und Gruppieren von Formularelementen
.
11.9.1 Beschriften einzelner Formularelemente (<label>)
11.9.2 Gruppieren von Formularelementen
(<fieldset>, <legend>) .
.
.
.
.
11.10Übung
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
202
202
202
204
205
206
.
.
206
207
.
.
.
.
209
209
210
214
215
13 Angaben im und vor dem Kopfteil
13.1 Festlegen des Dokumententyps
.
.
.
.
.
.
13.2 Zusatzinformationen zum HTML-Dokument
.
.
.
13.2.1 Allgemeines zum Tag <meta...>
.
.
.
.
13.2.2 Die Attribute name= und content= .
.
.
.
13.2.3 Das Attribut http-equiv=
.
.
.
.
.
13.2.4 Client-Pull-Dokumente mit http-equiv="refresh"
13.3 Default-Werte für ein HTML-Dokument
.
.
.
.
13.4 Bezüge zu anderen Dokumenten
.
.
.
.
.
.
13.5 Suchfunktion für ein HTML-Dokument .
.
.
.
.
217
217
218
218
220
222
224
228
228
229
14 Multimedia-Objekte, Sound und Laufschriften
14.1 Das Plugin-Konzept von Netscape .
.
.
.
.
.
14.2 Objekte in HTML
.
.
.
.
.
.
.
.
.
14.2.1 Datendateien als Objekt einbinden
.
.
.
.
14.2.2 Verweissensitive Graphiken als Objekt einbinden
.
14.2.3 Java-Applets als Objekt einbinden
.
.
.
.
14.2.4 Flash-Dateien als Objekt einbinden
.
.
.
.
14.2.5 ActiveX-Controls als Objekt einbinden
.
.
.
14.2.6 Objekte deklarieren und über Hyperlinks aktivieren
14.3 Java-Applets mit Tag <applet> einbinden (veraltet)
.
.
14.4 Multimedia in Netscape (veraltet) .
.
.
.
.
.
14.5 Spezielle Multimedia-Tags und -Attribute im Internet-Explorer
14.5.1 Spezielle <img>-Attribute zum Abspielen von Videodateien
14.5.2 Hintergrund-Sound mit dem Tag <bgsound> .
.
14.5.3 Laufschriften mit dem Tag <marquee>
.
.
.
14.6 Übung
.
.
.
.
.
.
.
.
.
.
.
231
231
232
232
234
235
238
240
241
242
244
246
246
247
247
249
15 Skript-Bereiche und Event-Handler für Skripte
15.1 Skript-Bereiche in HTML .
.
.
.
15.1.1 Definition von Skript-Bereichen .
251
251
251
12 Graphiken mit mehreren Hyperlinks (Image Maps)
12.1 Image Maps
.
.
.
.
.
.
.
12.2 Client-seitige Image Maps
.
.
.
.
12.3 Server-seitige Image Maps
.
.
.
.
12.4 Übung
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
IX
Inhaltsverzeichnis
15.1.2 Definition von Noscript-Bereichen
15.2 Event-Handler in HTML .
.
.
.
.
.
.
.
.
.
.
.
256
257
16 Veraltete Layout-Erweiterungen von Netscape
16.1 Spacer (Freiräume)
.
.
.
.
.
.
16.2 Mehrspaltige Anzeige
.
.
.
.
.
16.3 Layer .
.
.
.
.
.
.
.
.
16.3.1 Definieren von Layer
.
.
.
.
16.3.2 Hintergrundfarbe und -bild für Layer
16.3.3 Andere HTML-Dateien in einem Layer
16.3.4 Geschachtelte Layer
.
.
.
.
16.3.5 Maximale Größe für Layer .
.
.
16.3.6 Schichten von Layer
.
.
.
.
16.3.7 Sichtbare und unsichtbare Layer .
.
16.3.8 Inline-Layer .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
263
263
265
267
267
269
270
271
272
273
276
278
17 Cascading Style Sheets
17.1 Allgemeines zu Style-Sheets
.
.
.
.
.
.
.
17.1.1 Definieren von Style-Sheets für eine HTML-Datei
.
17.1.2 Globale Style-Sheets für mehrere Dateien .
.
.
17.1.3 Kaskadieren bei gleichen Style-Sheet-Angaben .
.
17.1.4 Kommentare innerhalb von Style-Sheets
.
.
.
17.1.5 Style-Sheet-Sprache festlegen
.
.
.
.
.
17.1.6 Style-Sheets für unterschiedliche Ausgabemedien
(CSS 2.0)
.
.
.
.
.
.
.
.
.
17.2 Definieren von Formaten (Style-Sheets) .
.
.
.
.
17.2.1 Eigene Formate für HTML-Tags .
.
.
.
.
17.2.2 Format-Unterklassen
.
.
.
.
.
.
.
17.2.3 Formate für geschachtelte HTML-Tags
.
.
.
17.2.4 Attribut-orientierte Formate
.
.
.
.
.
17.2.5 Unabhängige Formate .
.
.
.
.
.
.
17.2.6 Pseudo-Formate
.
.
.
.
.
.
.
.
17.2.7 Formatieren einzelner Textabschnitte mit dem Tag <span>
17.3 Direktes Formatieren
.
.
.
.
.
.
.
.
17.3.1 Formatieren von einzelnen HTML-Tags
.
.
.
17.3.2 Formatieren einzelner Textabschnitte mit dem Tag <span>
17.4 Maß- und Farbangaben
.
.
.
.
.
.
.
.
17.4.1 Maßangaben .
.
.
.
.
.
.
.
.
17.4.2 Farbangaben .
.
.
.
.
.
.
.
.
17.4.3 Angaben zur Sound-Kontrolle
.
.
.
.
.
17.5 CSS-Eigenschaften
.
.
.
.
.
.
.
.
.
17.5.1 Angaben zur Schrift
.
.
.
.
.
.
.
17.5.2 Angaben zur Zeilenhöhe, Abständen, Rändern und Ausrichtung
.
.
.
.
.
.
.
.
.
.
17.5.3 Angaben zu Rahmen und Innenabstände .
.
.
17.5.4 Angaben zu Hintergrundfarben und -bildern
.
.
X
279
279
279
280
282
283
283
283
285
285
287
289
295
297
299
301
303
303
304
305
305
307
309
310
310
321
332
347
Inhaltsverzeichnis
17.5.5
17.5.6
17.5.7
17.5.8
Angaben zu Listen
.
.
.
.
.
.
.
Angaben zu Tabellen
.
.
.
.
.
.
.
Pseudo-Formate
.
.
.
.
.
.
.
.
Positionen, Größen und sonstige Spezifikationen für Elemente; neu in CSS 2.0 .
.
.
.
.
.
.
.
17.5.9 Seitenlayout und Seitenumbruch; neu in CSS 2.0
.
17.5.10 Angaben zum Aussehen von Mauscursor und Bildlaufleisten
17.5.11 Angaben zur Sprachausgabe; neu in CSS 2.0
.
.
17.5.12 Definition von HTML 4.0 mit Style-Sheet-Angaben .
359
366
374
18 Eine kurze Einführung in XML
18.1 Allgemeines zu XML
.
.
.
.
.
.
.
.
18.1.1 Die Metasprache XML .
.
.
.
.
.
.
18.1.2 Dokumenttyp-Definitionen (DTDs)
.
.
.
.
18.1.3 Formatierung für XML-Elemente mit Style-Sprachen
18.2 Aufbau und Inhalt von XML-Dateien
.
.
.
.
.
18.2.1 Typischer Aufbau von XML-Dateien .
.
.
.
18.2.2 Dokumenttyp-Deklaration .
.
.
.
.
.
18.2.3 CDATA-Abschnitte
.
.
.
.
.
.
.
18.2.4 Allgemeine Regeln für Tags, Attribute und Wertzuweisungen
.
.
.
.
.
.
.
.
.
.
18.2.5 Wohlgeformte und gültige XML-Dokumente
.
.
18.2.6 Baumstruktur und Knoten einer XML-Datei
.
.
18.2.7 XML-Namensräume
.
.
.
.
.
.
.
18.2.8 Sonderzeichen und Interpretation von Leer- bzw. Neuezeilezeichen .
.
.
.
.
.
.
.
.
.
18.2.9 Konventionen für XML-Dateinamen .
.
.
.
18.3 Dokumenttyp-Definitionen (DTDs)
.
.
.
.
.
18.3.1 Die Schlüsselwörter INCLUDE und IGNORE
.
.
18.3.2 Definition von Elementen
.
.
.
.
.
.
18.3.3 Attribute und Wertzuweisungen
.
.
.
.
18.3.4 Entities .
.
.
.
.
.
.
.
.
.
18.3.5 Notationen
.
.
.
.
.
.
.
.
.
18.4 XML-Darstellung mit Cascading Style Sheets (CSS)
.
.
411
412
412
413
414
414
414
415
417
19 XHTML – das neue, XML-basierte HTML
19.1 Tag- und Attributnamen werden in XHTML klein geschrieben
19.2 Tags <head>, <title> und <body> müssen in XHTML angegeben
sein
.
.
.
.
.
.
.
.
.
.
.
.
19.3 Endtags sind in XHTML immer anzugeben
.
.
.
.
19.4 Allen Attributen muss in XHTML ein Wert zugewiesen werden
19.5 Alle Attributwerte müssen in XHTML mit "..." umgeben sein
19.6 Weitere MIME-Typen für XHMTL-Dokumente
.
.
.
19.7 Neue Dateiendungen für XHMTL-Dokumente
.
.
.
19.8 XML-Deklaration am Anfang einer XHTML-Datei
.
.
19.9 Unterschiedliche Dokumenttyp-Angaben
.
.
.
.
380
395
398
402
409
417
419
420
422
424
424
425
425
425
432
440
445
446
451
451
452
452
453
454
454
454
455
455
XI
Inhaltsverzeichnis
19.10Namensraum-Angabe in XHTML .
.
.
19.11Hyperlinks nur auf id=-Namen in XHTML .
19.12Attribut xml:lang= statt lang= in XHTML .
19.13Skript- und Style-Angaben müssen in XHTML im
stehen
.
.
.
.
.
.
.
.
19.14Neue Verschachtelungsregeln in XHTML
.
20 HTML/XHTML-Kurzreferenz
20.1 Alphabetische Übersicht der HTML-Tags
20.2 Struktur von HTML-Dokumenten .
.
20.3 Kommentare in HTML-Dokumenten
.
20.4 Tags und Attribute in HTML/XHTML
.
.
.
20.6 Unterschiede zwischen XHTML und HTML
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
CDATA-Bereich
.
.
.
.
.
.
457
457
.
.
.
.
.
.
459
460
463
463
463
484
486
.
.
.
.
.
.
.
.
.
.
.
.
455
456
456
21 CSS-Kurzreferenz
21.1 Allgemeines zu Cascading Style Sheets .
.
.
.
.
21.2 Definieren von Formaten (Style-Sheets) .
.
.
.
.
21.3 Direktes Formatieren
.
.
.
.
.
.
.
.
21.4 Maß- und Farbangaben
.
.
.
.
.
.
.
.
21.5 CSS-Eigenschaften
.
.
.
.
.
.
.
.
.
21.5.1 Schriftformatierung
.
.
.
.
.
.
.
21.5.2 Zeilenhöhe, Abstände, Ränder und Ausrichtung
.
21.5.3 Listen
.
.
.
.
.
.
.
.
.
.
21.5.4 Rahmen und Innenabstände
.
.
.
.
.
21.5.5 Hintergrundfarben und -bilder
.
.
.
.
.
21.5.6 Tabellen
.
.
.
.
.
.
.
.
.
21.5.7 Position und Größe von Elemente; neu in CSS 2.0
.
21.5.8 Textfluß um Elemente; neu in CSS 2.0 .
.
.
.
21.5.9 Eingrenzen des Anzeigebereichs und übergroße Elemente;
neu in CSS 2.0
.
.
.
.
.
.
.
.
21.5.10 Richtung und Anzeige von Elementen; neu in CSS 2.0
21.5.11 Aussehen von Mauscursor und Bildlaufleisten .
.
21.5.12 Seitenlayout und Seitenumbruch; neu in CSS 2.0
.
21.5.13 Sprachausgabe; neu in CSS 2.0
.
.
.
.
.
489
490
492
496
496
498
498
500
501
502
503
504
505
505
22 Tabellen
22.1 Sonderzeichen in HTML-Dokumenten
.
.
.
.
22.1.1 Sonderzeichen in HTML 3.2
.
.
.
.
22.1.2 Griechische Buchstaben (HTML 4.0)
.
.
.
22.1.3 Mathematische Symbole (HTML 4.0) .
.
.
22.1.4 Pfeilsymbole und technische Symbole (HTML 4.0)
22.1.5 Sonstige Sonderzeichen (HTML 4.0)
.
.
.
22.2 MIME-Typen
.
.
.
.
.
.
.
.
.
22.3 Dezimal-/Hexadezimal-Umrechnungstabelle
.
.
513
513
513
516
517
518
519
520
522
XII
.
.
.
.
.
.
.
.
506
506
507
508
510
Kapitel 1
Einleitung
Hier wird zunächst kurz auf die Historie von HTML und seine Standardisierung
sowie auf einige andere Aspekte eingegangen, die im Hinblick auf HTML zum
Grundverständnis gehören. Zudem werden einige wichtige Webadressen vorgestellt, an denen sich weitere Informationen zu HTML und den hier vorgestellten
Aspekten befinden.
1.1
Die Entstehung von HTML
Nachfolgend werden die Meilensteine der verschiedenen HTML-Versionen kurz
vorgestellt:
HTML 1.0
Die erste Version von HTML entstand Anfang der 1990er Jahre und war im
Vergleich zu den heutigen Versionen noch sehr spartanisch ausgelegt.
HTML 2.0
Ende des Jahres 1995 wurde HTML 2.0 als offizieller Sprachstandard verabschiedet. Da der zu dieser Zeit weit verbreitete Netscape Navigator (Version 2) bereits neue Techniken anbot, wie z. B. einfache Multimedia-Unterstützung oder Mehrfenstertechnik, die in diesem HTML-Standard nicht vorhanden waren, nahm man kaum Rücksicht auf diesen Standard. Statt dessen orientierte man sich mehr an die vom Netscape Navigator unterstützten HTMLSprachelemente.
HTML 3.2
Diese Version wurde Anfang 1997 zum offiziellen HTML-Standard und war
aus heutiger Sicht ein kleines Fiasko, da man sich zu diesem Zeitpunkt nicht
klar war, welchen Weg HTML gehen sollte. Mit dieser Version wurde versucht, HTML als Design-Sprache zu etablieren, was sich als Fehlschlag entpuppte. Viele Sprachelemente, die in HTML 3.2 eingeführt wurden, gelten
mittlerweile wieder als veraltet und werden sehr wahrscheinlich in neueren
HTML-Versionen auch wieder entfernt werden, da sie mittlerweile durch an-
1
1 Einleitung
dere und bessere Ansätze verwirklicht wurden, wie z. B. Cascading Style Sheets
(siehe Kapitel 17 auf Seite 279).
HTML 4.0 und HTML 4.01
HTML 4.0 wurde Anfang 1998 als offizieller HTML-Standard verabschiedet.
Zwischenzeitlich gilt HTML 4.01, eine etwas überarbeitete Version zu HTML
4.0, als offizieller HTML-Standard. Diese beiden Versionen standardisierten
das Einbinden von Cascading Style Sheets und Skript-Sprachen (wie z. B. JavaScript) in HTML-Dokumente. Zudem konzentrierten sich diese beiden Versionen auf die Internationalisierung von HTML, um HTML-Dokumente in allen möglichen Sprachen für die unterschiedlichsten Kulturkreise dieser Welt
zu entwerfen.
1.2
Die Browser-Problematik
Browser sind Programme, wie z. B. der Netscape Navigator, der Internet-Explorer
usw. Solche Browser sind für eine entsprechende Darstellung der vorgelegten
HTML-Dokumente am lokalen Rechner zuständig. Die Darstellung von HTMLDokumenten liegt ausschließlich in der Verantwortung des eingesetzten Browsers.
Nun könnte man denken, dass mit der Existenz von HTML-Standards jeder Browser sich bei Vorlage des gleichen HTML-Dokuments gleich verhält. Leider ist das
nicht so. Wie bereits im vorherigen Abschnitt erwähnt, war der Netscape Navigator in seiner Version 2 dem damaligen HTML-Standard 2.0 technisch weit voraus,
was dazu führte, dass HTML-Dokumente entworfen wurden, die zwar vom Netscape Navigator 2.0 dargestellt werden konnten, aber nicht dem damaligen HTMLStandard 2.0 entsprachen.
Nun, diese Situation hat sich bis heute noch nicht grundlegend geändert. Gerade mit dem Aufkommen des Internet-Explorers der Firma Microsoft erwuchs dem
Netscape Navigator ein ernst zu nehmender Konkurrent. Diese beiden Browser
bekriegen sich bis heute, wobei jeder dieser beiden immer wieder neue HTMLKonstrukte einführte, die er dann nachträglich als HTML-Standard durchzusetzen
versuchte.
Man sollte also grundsätzlich niemals Browser-spezifische HTML-Konstrukte verwenden, wenn man sicherstellen will, dass ein HTML-Dokument von jedem Browser so dargestellt wird, wie man sich das vorstellt. Da nicht alle im heutigen HTMLStandard enthaltenen Konstrukte und Vorgaben auch von jedem Browser unterstützt werden, liegt die Problematik sogar noch tiefer. Um sicherzustellen, dass
eigene HTML-Dokumente auch wirklich in der gewünschten Darstellung bei der
Vielzahl von Internet-Benutzern angezeigt werden, ist es empfehlenswert, sich eigene HTML-Dokumente mit mehreren Browsern anzeigen zu lassen, bevor man sie
ins Internet stellt.
Diese Situation war und ist absolut unbefiedigend, weshalb man schon sehr früh
erkannte, dass diesem Wildwuchs von Browser-spezifischen HTML-Konstrukten
Einhalt geboten werden musste. Aus diesem Grund gründete man bereits Mitte
der 1990er Jahre ein Standardisierungs-Komitee, dass diese Browser-Problematik
2
1.3 Das W3-Konsortium (W3C)
zumindest schon etwas gelindert hat und für die Zukunft doch eine Besserung erhoffen lässt.
1.3
Das W3-Konsortium (W3C)
Tim Berners-Lee, der geistige Vater von HTTP und HTML, erkannte schon sehr früh,
dass ein HTML-Standard geschaffen werden musste. Dazu schuf er im Jahre 1994
mit dem W3-Konsortium (W3C) ein offenes Forum für Entwickler aus den unterschiedlichsten Branchen. Im Jahre 1995 traten namhafte Firmen diesem Komitee
bei, die dieses Komitee auch finanzieren. Die Aufgabe des W3-Konsortiums (W3C)
ist die Standardisierung von Sprachen, wie z. B. HTML, CSS, XML usw.
Während die Standards und Vorgaben dieses Konsortium am Anfang von den Browser-Herstellern nicht allzu ernst genommen wurden, scheint die Bedeutung dieses
Komitees in den letzten Jahren doch zu wachsen, und es bleibt zu hoffen, dass die
Browser-Hersteller endlich ihre Alleingänge einstellen und sich stattdessen an die
vom W3-Konsortium (W3C) vorgegebenen Standards halten.
1.4
Cascading Style Sheets (CSS)
Cascading Style Sheets sind eine unmittelbare Ergänzung zu HTML. Mit StyleSheets kann man die Formateigenschaften von HTML-Befehlen festlegen. So kann
man z. B. mit Hilfe von Style-Sheets vorgeben, dass Überschriften der zweiten Stufe
immer eingerückt und mit einer Schriftgröße von 16 Punkt in der Schriftart TimesRoman anzuzeigen sind. Wie wir in Kapitel 17 auf Seite 279 sehen werden, bieten
Style-Sheets aber noch eine Vielzahl anderer Möglichkeiten,
Es existieren mehrere Sprachen zum Definieren von Style-Sheets. Die bekannteste Sprache ist CSS (Cascading Style Sheets), die vom W3-Konsortium, das auch für
die Normierung von HTML zuständig ist, vorgeschlagen wird. Zu CSS existieren
zwischenzeitlich mehrere Versionen: Version 1.0 (von 1996) und Version 2.0 (1998).
Derzeit wird an der dritten Version von CSS beim W3C gearbeitet.
Leider unterstützen nicht alle Browser CSS vollständig. Netscape 4.x interpretiert
fast den vollen Sprachumfang von CSS 1.0 und einen Teil der Befehle von CSS 2.0.
Netscape 6.0 unterstützt CSS 1.0 und CSS 2.0 nahezu vollständig.
Der Microsoft Internet-Explorer unterstützt CSS 1.0 ab Priogramm-Version 3.0. In
der Version 4.0 unterstützt er einen Teil von CSS 2.0 und einige spezielle, von Microsoft eingeführte Style-Sheet-Angaben. Ab Version 5.5 unterstützt der Microsoft
Internet-Explorer CSS 1.0 vollständig und größtenteils auch CSS 2.0
Andere Browser unterstützen meist nur CSS 1.0 oder nur Teile von CSS 1.0 und/oder
CSS 2.0.
1.5
XML und XHTML
XML (Extensible Markup Language) ist nicht nur einfach eine weitere Sprache, sondern ein neues Konzept für die Datenspeicherung und deshalb nicht nur auf das
3
1 Einleitung
Internet zugeschnitten. Die Idee zu XML hatte ebenfalls Tim Berners-Leein den Anfangsjahren der Internet-Euphorie, als er erkannte, dass HTML alleine nicht ausreichen würde, die ständig steigenden Ansprüche zu erfüllen. Es wurde offensichtlich,
dass ein Standard geschaffen werden musste, in den HTML, das zwischenzeitlich
weitverbreitet war, integriert werden konnte.
Im Februar 1998 brachte das W3-Konsortium die erste Empfehlung zu XML (siehe
Kapitel 18 auf Seite 411) heraus. Danach bemühte sich das W3-Konsortium, andere
vorhandene Metasprachen mit Hilfe von XML zu standardisieren.
Eine der wichtigste Sprachen war dabei natürlich HTML, das man mit Hilfe von
XML umdefinieren musste. Daraus resultierte das neue auf XML basierende HTML
mit dem Namen XHTML 1.0 (Extensible HyperText Markup Language). Seit dem Jahre 2000 liegt XHTML 1.0 als Empfehlung des W3-Konsortiums vor und hat damit den gleichen verbindlichen Stellenwert wie der HTML 4.0-Standard. Browser,
die HTML-4.0-Dokumente darstellen können, können meist auch ohne Probleme
XHTML-Dokumente richtig darstellen.
XHTML entspricht weitgehend dem HTML 4.0-Standard. Allerdings gibt es auch –
bedingt durch die XML-Vorschriften – kleinere Unterschiede, die im Kapitel 19 auf
Seite 451 vorgestellt werden.
1.6
Einige Internet-Adressen
Internet-Adressen zu HTML
http://www.w3.org/TR/REC-html32.html
HTML 3.2-Spezifikation des W3-Konsortiums
http://www.w3.org/TR/html4
HTML 4.x-Spezifikation des W3-Konsortiums
http://selfhtml.teamone.de/
SELFHTML von Stefan Münz. Diese hervorrragende deutschsprachige Online-Dokumentation zu HTML ist mehr als empfehlenswert.
Internet-Adressen zu Browsern
Internet-Adressen des W3-Konsortiums (W3C)
http://www.w3.org/
Offizielle Startseite (Homepage) des W3-Konsortiums
http://www.w3.org/Consortium/Offices/Germany/
Deutschsprachige Startseite (Homepage) des W3-Konsortiums
Internet-Adressen zu Cascading Style Sheets (CSS)
http://www.w3.org/TR/REC-CSS1
CSS 1.0-Spezifikation des W3-Konsortiums
4
1.6 Einige Internet-Adressen
http://www.w3.org/TR/REC-CSS2
CSS 2.0-Spezifikation des W3-Konsortiums
Internet-Adressen zu Cascading (CSS)
http://www.w3.org/TR/REC-xml
Aktuelle XML-Spezifikation des W3-Konsortiums
http://www.w3.org/TR/REC-xhtml1
XHTML 1.0-Spezifikation des W3-Konsortiums
http://www.w3.org/TR/REC-xhtml11
XHTML 1.1-Spezifikation des W3-Konsortiums
Internet-Adresse zum Buch
http://www.susepress.de/de/download/index.html
Material zum Download für dieses Buch
5
Kapitel 3
Grundlegendes zu
HTML-Dokumenten
3.1
Struktur von HTML-Dokumenten
HTML-Dokumente haben einen ganz klar definierten Aufbau. Sie unterteilen sich
in:
❏ Head (Dokumentenkopf)
Hier befinden sich Anweisungen, die für das ganze Dokument gelten, wie z. B.
der Titel des Dokuments.
❏ Body (eigentlicher Inhalt)
Hier befindet sich die eigentliche Information in Form von HTML-Anweisungen, die der jeweilige Browser interpretieren und entsprechend darstellen
muss.
3.2
Struktur von HTML-Befehlen
HTML-Befehle (auch HTML-Tags genannt) haben meist die folgende Syntax:
❏ Sie bestehen – bis auf wenige Ausnahmen – immer aus einem Starttag und
einem Endtag.
❏ Die Schlüsselwörter von HTML-Befehlen werden in spitzen Klammern (<>)
angegeben. Starttags stehen nur mit Befehlswort in den spitzen Klammern,
während man den entsprechenden Endtags einen Slash (/) voranstellt. Ein
HTML-Tag wird also üblicherweise – wie nachfolgend gezeigt – angegeben:
<tagname> ... Text ... </tagname>
Das Start- und Endtag schließen also immer den betreffenden Text ein. Bei
einigen Tags kann auf die Angabe des Endtags verzichtet werden, da es aus
dem Kontext ersichtlich wird, dass hier das Ende des betreffenden Tags vorliegt. Im folgenden wird auf Tags, die keine Angabe eines Endtags erfordern,
gesondert hingewiesen.
11
3 Grundlegendes zu HTML-Dokumenten
❏ Bei HTML-Tags wird nicht zwischen Groß- und Kleinschreibung unterschie-
den, wobei es jedoch im Hinblick auf XHTML (auf XML basierendes HTML)
empfehlenswert ist, die HTML-Tags immer klein zu scheiben.
3.3
Grundlegende HTML-Tags
Einige Tags sind in jedem Dokument von Notwendigkeit, da sie die entsprechenden Abschnitte (Kopf und Inhalt) kennzeichnen.
3.3.1
Das Tag <html>
Das Tag <html>...</html> umrahmt das gesamte Dokument und kennzeichnet
es somit als HTML-Datei:
<html>
.... HTML-Dokument
</html>
3.3.2
Das Tag <head>
Das Tag <head>...</head> markiert den Dokumentenkopf mit seinem Startund Endtag:
<html>
<head>
.... Dokumentenkopf
</head>
.... Rest der HTML-Datei
</html>
Die Anweisungen innerhalb des Dokumentenkopfes beziehen sich immer auf das
gesamte Dokument. Im Dokumentenkopf kann man z. B. den Dokumenttitel und
allgemeine Information zum Dokument angeben, wie z. B. Name des Autors. Der
Dokumententitel muss dabei mit den Tags <title>...</title> angegeben werden.
3.3.3
Das Tag <body>
Das Tag <body>...</body> umrahmt den eigentlichen Inhalt des Dokuments:
<html>
<head>
.... Dokumentenkopf
</head>
<body>
.... Eigentlicher Inhalt des Dokuments
12
</body>
</html>
Im Tag <body>...</body> werden der Inhalt des Dokuments und die Tags zur
Formatierung und Gestaltung dieses Dokuments angegeben.
3.4
Ein erstes Beispiel und weitere grundlegende
HTML-Konzepte
Hier wollen wir nun ein erstes HTML-Dokument erstellen, wie es nachfolgend gezeigt ist:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
Dies ist ein einfacher Text, der sich im
Dokumentenkoerper befindet.
1. Dateiname endet mit ’.txt’
Wenn ich dieser Datei, in der sich dieser Text befindet,
einen Namen gebe, der mit .txt endet, so wird der gesamte Inhalt
dieser Datei ohne jegliche Interpretation einfach vom Browser angezeigt.
2. Dateiname endet mit ’.htm’ oder ’.html’
Wenn ich dieser Datei, in der sich dieser Text befindet,
einen Namen gebe, der mit .htm oder .html endet, so wird nur
der Dokumentenkoerper angezeigt, wobei der Browser oben auch einen
Titel anzeigt.
</body>
</html>
Wenn wir diese Datei unter dem Namen htmlerst.txt speichern und diese Datei
dann im Browser laden, erhalten wir ein Erscheinungsbild, wie es in Abbildung 3.1
gezeigt ist. Interessant ist an Abbildung 3.1, dass der Browser den gesamten Inhalt
der Datei htmlerst.txt – ohne jegliche Interpretation der HTML-Anweisungen
– einfach anzeigt. Das liegt daran, dass wir der Datei einen Namen gegeben haben, der mit .txt endet. Dateien, die mit der Endung .txt enden, werden vom
Browser als Textdateien identifiziert, deren Inhalt er nicht auswertet, sondern nur
einfach anzeigt.
Wollen wir, dass der Browser eine Datei als HTML-Datei behandelt und die enthaltenen HTML-Anweisungen auswertet, müssen wir einer solchen Datei immer
die Endung .htm bzw. .html geben. Benennen wir also die obige Datei in htmlerst.htm bzw. htmlerst.html um und laden sie dann im Browser, erhalten wir
13
Abbildung 3.1: Browser-Anzeige für Datei htmlerst.txt
ein Erscheinungsbild, wie es in Abbildung 3.2 (beim Browser Netscape Navigator)
bzw. in Abbildung 3.3 (beim Browser Internet-Explorer) gezeigt ist.
Nun interpretiert der Browser zwar die HTML-Anweisungen und zeigt wirklich
nur den Dokumentenkörper (aus <body>...</body>) sowie den Titel (aus <title>...</title>) in der obersten Leiste des Browserfensters an. Trotzdem läßt
die Formatierung des Textes sehr zu wünschen übrig. Warum das so ist, erklären
die folgenden Punkte:
Abbildung 3.2: Netscape-Anzeige für Datei htmlerst.htm bzw. htmlerst.html
14
Abbildung 3.3: Internet-Explorer-Anzeige für Datei htmlerst.htm bzw. htmlerst.html
❏ HTML-Anzeigen haben – wenn dies nicht explizit angegeben wird –, keine
festen Seitenlängen und Zeilenbreiten. Der Browser bestimmt selbst, wie lang
eine Zeile sein darf, und bricht den Text entsprechend um. Ändert man z. B.
die Größe des Fensters aus Abbildung 3.2, paßt der Browser den Text automatisch an die neue Fensterbreite an, wie dies in Abbildung 3.4 gezeigt ist.
Abbildung 3.4: Browser-Anzeige für Datei htmlerst.htm, nachdem Fenstergröße geändert wurde (links: Netscape; rechts: Internet-Explorer)
15
❏ In einer HTML-Datei angegebene Leerzeilen, Leerzeichen und Zeilenumbrü-
che werden vom Browser einfach ignoriert; sie werden jeweils vom Browser
durch ein Leerzeichen ersetzt.
3.5
Sonderzeichen in HTML-Dokumenten
Da HTML ursprünglich nur für das englischsprachige Alphabet ausgelegt wurde,
mussten für Sonderzeichen, wie z. B. die deutschen Umlaute oder aber für HTML
reservierte Zeichen (wie z. B. die spitzen Klammern), eigene Kodierungen eingeführt werden. Für die Kodierung solcher Sonderzeichen gelten die folgenden Konventionen:
❏ Die Sonderzeichen sind entweder als ASCII-Code (z. B. ) oder als Name (z. B. ö) im HTML-Dokument anzugeben.
❏ Ein solcher „Sonderzeichen-Ausdruck“ muss immer mit einem &-Zeichen be-
ginnen und mit einem Semikolon abgeschlossen werden.
Tabelle 3.1 zeigt die Kodierungen der wichtigsten Sonderzeichen in HTML.
Lädt man die HTML-Datei 3.1 in einem Browser, wird das in Abbildung 3.5 gezeigte Fenster angezeigt.
HTML-Datei 3.1 – sonderzeich.htm:
Beispiel zu Sonderzeichen in HTML
<html>
<head>
<title>Sonderzeichen</title>
</head>
<body>
Ä=&Auml;
Ö=&Ouml;
Ü=&Uuml;
ä=&auml;
Tabelle 3.1: Darstellung von Sonderzeichen in HTML-Dokumenten
Zeichen
Code
Ä
Ö
Ü
ä
ö
ü
ß
“
<
>
Leerzeichen
Ä
Ö
Ü
ä
ö
ü
ß
"
<
>
  (non-breakable space)
16
Kapitel 10
Frames
Mit Frames läßt sich der Anzeigebereich des Browsers in mehrere Fenster unterteilen, in denen sich jeweils unterschiedliche HTML-Dokumente anzeigen lassen.
10.1
Tags zum Erzeugen von Frames
Um Frames zu erzeugen, werden die beiden folgenden Tags zur Verfügung gestellt:
❏ <frameset>...</frameset>
legt die Aufteilung des Browserfensters in einzelne Frames fest. Die einzelnen Frames können dann mit dem folgenden Tag darin eingebettet angegeben
werden.
❏ <frame>
spezifiziert jeweils einen einzelnen Frame; so wird hier z. B. über das Attribut
src= der Pfadname des HTML-Dokuments festgelegt, das hier anzuzeigen
ist.
Die typische Angabe für Frames sieht somit wie folgt aus:
<frameset ...>
<frame src="HTML-Datei1">
...
</frameset>
Es ist erkennbar, dass die üblichen Tags <html>, <head>, <title> und <body>
fehlen. Diese Tags (bis auf <body>) können zwar, müssen aber nicht angegeben
werden. Es wäre z. B. auch die folgende Angabe erlaubt:
<html>
<head>
<title>Frames</title>
</head>
<frameset ...>
137
10 Frames
...
</frameset>
</html>
Hier würde zusätzlich noch ein Titel in der Kopfzeile des Browsers angezeigt. Auf
keinen Fall darf nach dem Tag </head> das Tag <body> angegeben werden, um
die mit <frameset>...</frameset> definierten Frames als Dokumentenkörper zu kennzeichnen. Das Tag <body> darf in einer Frame-Datei nur innerhalb des
Tags <noframes>...</noframes> (siehe auch Kapitel 10.9 auf Seite 172) angegeben werden.
10.2
Vertikal angeordnete Frames
Zur vertikalen Aufteilung des Browserfensters in Frames steht das Attribut rows=
im Tag <frameset> zur Verfügung. Nach rows= muss dabei in Anführungszeichen für jedes Frame festgelegt werden, wie hoch es sein soll. Die gewünschte Höhe
eines Frames kann dabei als Pixel- oder als Prozentwert angegeben werden. Die Angabe eines Sternchens (*) legt fest, dass dieser Frame den Rest des Browserfensters
vertikal ausfüllen soll. Wird * mehrmals angegeben, wird der restliche vertikale
Abbildung 10.1: Browser-Anzeige (Internet-Explorer) für Datei 10.1 (frame1.htm)
138
10.2 Vertikal angeordnete Frames
Platz gleich unter den Sternchen verteilt. Alle Höhenangaben sind mit Kommas
voneinander zu trennen.
Beispiele für rows-Angaben sind nachfolgend gezeigt:
❏ <frameset rows="30%,70%">
legt fest, dass das erste Frame 30 Prozent und das zweite Frame 70 Prozent der
Höhe des Browserfensters belegen soll.
❏ <frameset rows="150,200,80">
legt fest, dass das erste Frame 150 Pixel, das zweite 200 Pixel und das dritte 80
Pixel hoch sein soll.
❏ <frameset rows="20%,40%,*">
legt fest, dass das erste Frame 20 Prozent, das zweite 40 Prozent und das dritte
den Rest des Browserfensters (in der Höhe) belegen soll.
❏ <frameset rows="*,40%,*">
legt fest, dass das zweite Frame 40 Prozent, das erste und das dritte Frame
jeweils 30 Prozent des Browserfensters (in der Höhe) belegen soll.
Abbildung 10.2: Browser-Anzeige (Internet-Explorer) für Datei 10.1 (frame1.htm), nachdem Benutzer in den Frames geblättert und Größe der einzelnen Frames verändert hat
139
10 Frames
❏ <frameset rows="3*,10%,*,2*">
legt fest, dass das zweite Frame 10 Prozent, das erste Frame 45 Prozent, das
dritte Frame 15 Prozent und das vierte Frame 30 Prozent des Browserfensters
(in der Höhe) belegen soll.
Lädt man im Browser die HTML-Datei 10.1, wird z. B. das in Abbildung 10.1 gezeigte Fenster eingeblendet, in dem der Benutzer zum einen mit den eingeblendeten Bildlaufleisten in den Inhalten der einzelnen Frames vor- und zurückblättern
kann, und zum anderen auch die Höhe der einzelnen Frames durch Verschieben
der Fensterteiler mit der Maus verändern kann; siehe dazu auch Abbildung 10.2.
HTML-Datei 10.1 – frame1.htm:
Beispiel zu vertikalen Frames
<frameset rows="50%,30%,*">
<frame src="aufzaehl5.htm">
<frame src="table10.htm">
</frameset>
Die in der HTML-Datei 10.1 (frame1.htm) als Frames eingeblendeten HTML-Dokumente finden Sie auf folgenden Seiten: aufzaehl5.htm (auf Seite 47), aufzaehl11.htm (auf Seite 54) und table10.htm (auf Seite 83).
Ist bei einem <frame>-Tag kein src= angegeben, zeigt der Browser hierfür einen
leeren Frame an. Sind weniger <frame>-Tags vorhanden als im <frameset>-Tag
vorgegeben, zeigt der Browser für die fehlenden Angaben leere Frames an.
10.3
Horizontal angeordnete Frames
Zur horizontalen Aufteilung des Browserfensters in Frames steht das Attribut
cols= im Tag <frameset> zur Verfügung. Nach cols= muss dabei in Anführungszeichen für jedes Frame festgelegt werden, wie breit es sein soll. Die gewünschte Breite eines Frames kann dabei als Pixel- oder als Prozentwert angegeben
werden. Die Angabe eines Sternchens (*) legt fest, dass dieses Frame den Rest des
Browserfensters horizontal ausfüllen soll. Wird * mehrmals angegeben, wird der
restliche horizontale Platz gleich unter den Sternchen verteilt. Alle Breiteangaben
sind mit Kommas voneinander zu trennen.
Lädt man im Browser die HTML-Datei 10.2, wird z. B. das in Abbildung 10.3 gezeigte Fenster eingeblendet, in dem der Benutzer zum einen mit den eingeblendeten
Bildlaufleisten in den Inhalten der einzelnen Frames blättern kann, und zum anderen auch die Breite der einzelnen Frames durch Verschieben der Fensterteiler mit
der Maus verändern kann; siehe dazu auch Abbildung 10.4. In dieser HTML-Datei
frame2.htm ist erkennbar, dass man auch das gleiche HTML-Dokument (hier table12.htm) in unterschiedlichen Frames anzeigen lassen kann. Ebenso zeigt diese
Datei, dass man nicht nur HTML-Dokumente in Frames anzeigen lassen kann, sondern z. B. auch Graphikbilder (hier lausbub.jpg).
140
10.3 Horizontal angeordnete Frames
Abbildung 10.3: Browser-Anzeige (Netscape) für Datei 10.2 (frame2.htm)
Abbildung 10.4: Browser-Anzeige (Netscape) für Datei 10.2 (frame2.htm), nachdem Benutzer in den Frames geblättert und die Breite der einzelnen Frames verändert hat
141
10 Frames
Beispiel zu horizontalen Frames
<html>
<frameset cols="50%,*,200">
<frame src="lausbub.jpg">
</frameset>
</html>
Das in der HTML-Datei 10.2 (frame2.htm) als Frame eingeblendete HTML-Dokument table12.htm finden Sie auf Seite 86.
10.4
Geschachtelte Frames
Frames lassen sich auch beliebig schachteln. Lädt man im Browser die HTMLDatei 10.3, wird z. B. das in Abbildung 10.5 gezeigte Fenster eingeblendet.
Beispiel zu geschachtelten Frames
<html>
<head>
<title>Geschachtelte Frames</title>
</head>
<frameset cols="300,*,40%">
<frameset rows="40%,*">
</frameset>
<frameset rows="*,200,20%">
</frameset>
<frameset>
</frameset>
</frameset>
</html>
Die beiden Attribute rows= und cols= können auch gleichzeitig im Tag <frameset> angegeben werden. Fehlt – wie in den vorherigen Beispielen – eines der
beiden Attribute, nimmt der Browser jeweils rows="100%" bzw. cols="100%"
an.
Mit einer gleichzeitigen Angabe der beiden Attribute rows= und cols= ist ein
entsprechendes Layout mit verschieden großen Frames möglich, wie dies in der
HTML-Datei 10.4 gezeigt ist. Lädt man diese Datei im Browser, wird z. B. das in
Abbildung 10.6 gezeigte Fenster eingeblendet. Verkleinert man dieses Browserfenster, werden die Frames auch entsprechend verkleinert, wie dies in Abbildung 10.7
gezeigt ist.
142
10.4 Geschachtelte Frames
Abbildung 10.6: Browser-Anzeige (Netscape) für Datei 10.4 (frame4.htm)
143
10 Frames
Abbildung 10.7: Browser-Anzeige (Netscape) für Datei 10.4 (frame4.htm), nachdem
Browserfenster verkleinert wurde
Weiteres Beispiel zu geschachtelten Frames
<html>
<head>
<title>Gleichzeitige Angabe der Attribute COLS= und ROWS=</title>
</head>
<frameset rows="70%,*" COLS="25%,33%,*"> 

<frameset rows="33%,33%,*"> 
<frame src="dat1.htm">
</frameset>

</frameset>

</frameset>

<frameset cols="50%,*">
</frameset>
144

10.5 Bildlaufleisten bei Frames
<frameset cols=33%,33%,*>

</frameset>

</frameset>
</html>
In den Frames der Datei 10.4 (frame4.htm) werden HTML-Dateien mit dem Namen datx.htm eingeblendet. Diese Dateien haben alle den folgenden Inhalt, wobei
jeweils nur eine andere Farbe und eine andere Nummer angegeben ist:
<html>
<body bgcolor=green>
<h1 align=center>Frame 1</h1>
</body>
</html>
10.5
Bildlaufleisten bei Frames
Mit dem Attribut scrolling= kann im Tag <frame> festgelegt werden, ob bei
einem Frame eine Scrollbar (Bildlaufleiste) einzublenden ist oder nicht. Tabelle 10.1
zeigt die möglichen Werte für das Attribut scrolling=.
Tabelle 10.1: Werte für das Attribut scrolling= beim Tag <frame>
scrolling=
Auswirkung
auto
yes
Browser entscheidet selbst, ob Scrollbars notwendig sind oder nicht
Es werden immer – unabhängig von der Größe des Inhalts – Scrollbars
angezeigt
Es werden keine Scrollbars angezeigt, selbst wenn der Inhalt zu groß
für den Frame ist
no
Lädt man im Browser die HTML-Datei 10.5, wird z. B. das in Abbildung 10.8 gezeigte Fenster eingeblendet.
Beispiel zu Bildlaufleisten in Frames
<html>
<head>
<title>Scrollbars bei Frames</title>
</head>
<frameset cols="33%,33%,*">
<frame scrolling=auto src="lausbub.jpg">
<frame scrolling=auto src="bubclown.gif">
</frameset>
<frame scrolling=yes src="lausbub.jpg">
145
10 Frames
<frame scrolling=yes src="bubclown.gif">
</frameset>
<frame scrolling=no src="lausbub.jpg">
<frame scrolling=no src="bubclown.gif">
</frameset>
</frameset>
</html>
10.6
Frames und Hyperlinks
10.6.1
Hyperlinks auf bestimmte Frames
Um HTML-Dateien oder Graphikbilder über Hyperlinks in Frames einblenden zu
lassen, müssen den entsprechenden Frames Namen gegeben werden. Dies ist mit
den Attributen name= oder id= im Tag <frame> möglich:
<frame src="datei" name="NameDesFrames">
<frame src="datei" id="NameDesFrames">
oder
Um einen Hyperlink auf eine HTML-Datei oder ein Graphikbild zu erzeugen, muss
im Tag <a> beim Attribut href= der Name der entsprechenden HTML- bzw. Graphikdatei angegeben werden. In welchem Frame die betreffende HTML-Datei bzw
das Graphikbild anzuzeigen ist, muss mit dem Attribut target= festgelegt wer-
146
10.6 Frames und Hyperlinks
den, wobei hier als Wert der Name des entsprechenden Frames anzugeben ist, der
mit dem Attribut name= bzw. id= im Tag <frame> festgelegt wurde.
Ein Hyperlink für das Einblenden einer HTML-Datei bzw. einer Graphik aus einer
Datei in einem bestimmten Frame sieht somit wie folgt aus:
<a href="nameDerDatei target=nameDesFrames">Text des Hyperlinks</a>
Die HTML-Datei 10.6 erzeugt z. B. zwei horizontal angeordnete Frames, wobei sie
dem linken Frame den Namen links und dem rechten Frame den Namen rechts
gibt.
Beispiel zu Hyperlinks und Frames
<html>
<head>
<title>Hyperlinks und Frames</title>
</head>
<frameset cols="30%,*">
<frame src="verweise.htm" name="links">
<frame src="splogo.gif" name="rechts">
</frameset>
</html>
Im linken Frame soll der Inhalt der HTML-Datei 10.7 (verweise.htm) und im
rechten ein Graphikbild (Logo von SuSE PRESS) angezeigt werden.
HTML-Datei 10.7 – verweise.htm:
HTML-Datei mit Verweisen
<html>
<head>
<title>Verweise</title>
</head>
<body>
<b>Inhaltsverzeichnis</b><br><br>
<a href="table12.htm" target="rechts">Tabelle mit Hintergrundfarbe</a><br><br>
<a href="aufzaehl5.htm" target="rechts">Ein Gedicht von Eugen Roth</a><br><br>
<a href="lausbub.jpg" target="rechts">Ein Bild von einem Lausbub</a>
</body>
</html>
Die in der HTML-Datei 10.7 (verweise.htm) angegebenen HTML-Dokumente
finden Sie auf folgenden Seiten: table12.htm auf Seite 86 und aufzaehl5.htm
auf Seite 47.
Lädt man im Browser nun die HTML-Datei 10.6 (frame6.htm), wird das in Abbildung 10.9 gezeigte Fenster eingeblendet.
Klickt der Benutzer nun z. B. im linken Frame auf den Hyperlink „Ein Gedicht
von Eugen Roth“, blendet der Browser ihm im rechten Frame die HTML-Datei 10.5 (aufzaehl5.htm) ein; siehe auch Abbildung 10.10.
Klickt der Benutzer nun z. B. im linken Frame auf den Hyperlink „Ein Bild von
einem Lausbub“, blendet der Browser ihm das Graphikbild aus der Datei lausbub.jpg ein; siehe auch Abbildung 10.11.
147
Kapitel 11
Formulare
HTML bietet auch die Möglichkeit, so genannte Formulare zu erstellen. Formulare
enthalten Elemente wie Eingabefelder, Auswahllisten usw., in denen der Benutzer
Eingaben vornehmen kann oder bestimmte Auswahlmöglichkeiten hat. Die eingegebenen bzw. ausgewählten Daten können dann natürlich auch über das Internet
verschickt werden.
11.1
Allgemeines zu Formularen
11.1.1
Formulardefinition (Tag <form>)
Formulare müssen immer mit dem Tag <form>...</form> geklammert sein:
<form>
... Formularanweisungen, die das Layout des Formulars festlegen ...
</form>
Allgemein gilt folgendes für ein Formular:
❏ In einem Formular können neben Steuerelementen (Eingabefelder, Auswahl-
listen usw.), die wir in diesem Kapitel noch kennenlernen werden, auch einfache Texte (zur Beschriftung von Elementen) enthalten sein.
❏ Ein Formular kann auch Tags wie z. B. <p>, <b>, <img>, <br> usw. zur For-
mulargestaltung enthalten.
❏ Ein HTML-Dokument kann mehrere <form>-Abschnitte enthalten.
❏ Eine Schachtelung von <form>-Tags ist nicht erlaubt.
Zur vollständigen Formulardefinition müssen dem Server nun noch weitere Informationen gegeben werden. Diese sind zum einen die Internetadresse (URL), an
welche die vom Benutzer eingegebenen Daten gesendet werden sollen, zum anderen muss auch die Übertragungsart definiert werden.
185
11 Formulare
11.1.2
Festlegen der Versandadresse (Attribut action=)
Die Versandadresse legt den Ort fest, an den die Benutzereingaben im Formular zu
schicken sind. Das Festlegen der Versandadresse ist mit dem Attribut action= im
Tag <form> möglich. Es sind verschiedene Arten von Versandadressen möglich,
die durch das entsprechende Protokoll festgelegt werden:
❏ http:
Der URL adressiert hierbei ein so genanntes CGI-Skript, dem die eingegebenen Benutzerdaten zur Verarbeitung geschickt werden. CGI (Common Gateway
Interface) ist ein Standard für CGI-Skripte, die in Sprachen wie PHP, Perl, JavaScript usw. geschrieben sind, um Informationen von HTTP-Servern zu verarbeiten. Später wird dazu in Kapitel 11.5.2 auf Seite 196 ein Beispiel gegeben.
❏ mailto:
Hier wird eine E-Mail-Adresse angegeben, an die die eingegebenen Benutzerdaten geschickt werden.
11.1.3
Festlegen der Übertragungsmethode
(Attribut method=)
Die Übertragungsmethode beschreibt die Art und Weise, wie die Daten zum Server
übertragen werden. Das Festlegen der Übertragungsmethode ist mit dem Attribut
method= im Tag <form> möglich. Man unterscheidet zwischen zwei verschiedenen Übertragungsmethoden:
❏ method=post
Bei dieser Übertragungsmethode werden die Formulardaten in die HTTPAnforderung eingebettet, die dem Server geschickt wird. Dadurch werden die
Daten versteckt und nicht für jedermann lesbar im Internet übertragen. Diese
Übertragungsmethode wird vom W3C-Standard bevorzugt. Bei Benutzereingaben, die über E-Mail übertragen werden, sollte man diese Methode wählen.
❏ method=get
Bei dieser Übertragungsmethode werden die Formulardaten getrennt durch
ein Fragezeichen an den URL (von action=) angehängt, bevor der so erweiterte URL an den Server geschickt wird.
Eine Formulardefinition könnte z. B. folgendermaßen aussehen:
<form action=mailto:[email protected] method=post>
... Formularanweisungen ...
</form>
Diese Anweisungen definieren ein Formular, das die eingegebenen Benutzerdaten
mittels E-Mail an die Adresse [email protected] schickt.
11.2
Eingabefelder
Eingabefelder sind Formularfelder, in die der Benutzer Text eingeben kann. Man
unterscheidet zwischen einzeiligen und mehrzeiligen Eingabefeldern.
186
11.2 Eingabefelder
11.2.1
Einzeilige Eingabefelder
Einzeilige Eingabefelder werden durch das Tag <input> definiert. Dieses Tag kann
ausschliesslich innerhalb einer Formulardefinition angegeben werden und besitzt
unter anderem die folgenden Attribute:
❏ type=text
legt fest, dass ein Eingabefeld einzublenden ist, in dem jeder vom Benutzer
eingegebener Text anzuzeigen ist.
❏ type=password
legt fest, dass ein Eingabefeld einzublenden ist, in dem der vom Benutzer eingegebene Text nicht anzuzeigen ist. Jedes eingegebene Zeichen wird hier z. B.
als Sternchen (*) angezeigt. Diese Form von Eingabefelder dient zur Eingabe
von Paßwörtern.
❏ name=
legt den Namen des entsprechenden Eingabefelds fest.
❏ size=x
legt die Länge des Eingabefelds fest; x gibt dabei die Länge des Eingabefelds
in Zeichen an. Ist die Eingabe länger, so wird der bereits eingegebene Text
kann
links im Eingabefeld weggeschoben. Mit dem Cursor-Steuerzeichen
man den weggeschobenen Text wieder im Eingabefeld sichtbar machen.
❏ maxlength=x
legt die maximale Länge fest, die ein Text im Eingabefeld haben kann; x gibt
dabei die maximale Anzahl von Zeichen an, die im Eingabefeld eingegeben
werden können.
❏ VALUE=
legt einen Vorgabewert fest, der beim Einblenden des Formulars im Eingabefeld oder bei einem Klick auf den RESET-Button (siehe Kapitel 11.5 auf Seite 200) anzuzeigen ist.
Lädt man im Browser die HTML-Datei 11.1, wird das in Abbildung 11.1 gezeigte
Fenster eingeblendet, in dem schon einige Eingaben vorgenommen wurden.
Abbildung 11.1: Browser-Anzeige für Datei 11.1 (formular1.htm) (links: Netscape,
rechts: Internet-Explorer)
187
11 Formulare
HTML-Datei 11.1 – formular1.htm:
Beispiel zu einem Formular mit einzeiligen Eingabefeldern
<html>
<head>
<title>Formular mit einzeiligen Eingabefeldern</title>
</head>
<body>
<h1>Formular mit einzeiligen Eingabefeldern</h1>
<form method=post action="mailto:[email protected]">
Kennwort: <input type=text name="loginname"><br>
Passwort: <input type=password name="geheimwort" SIZE=6><br>
Alter:
<input type=text name="alter" maxlength=2><br>
Land:
<input type=text name="country" value="Deutschland"><br>
Farbe:
<input type=text name="farbe" size=8 maxlength=9><br>
</form>
</body>
</html>
11.2.2
Mehrzeilige Eingabefelder
Mehrzeilige Eingabefelder (oft auch mehrzeilige Textfelder genannt) kann man mit
dem Tag <textarea>...</textarea> einblenden lassen. Sie können zur Eingabe von Bemerkungen oder sonstigem beliebigen Text dienen. Mit dem Attribut
name= wird wieder dem mehrzeiligen Textfeld ein Name zugewiesen. Des weiteren muss natürlich auch noch die Größe des Textfeldes festgelegt werden. Dazu
stehen die beiden folgende Attribute zur Verfügung:
❏ cols=x: x legt die Breite des Textfelds (in Zeichen) fest.
❏ rows=x: x legt die Höhe des Textfelds (in Zeilen) fest.
Lädt man im Browser die HTML-Datei 11.2, wird z. B. das in Abbildung 11.2 gezeigte Fenster eingeblendet, in dem der vorgegebene Text schon angezeigt wird,
aber der Benutzer nun noch weiteren Text eintragen kann.
Abbildung 11.2: Browser-Anzeige für Datei 11.2 (formular2.htm) (links: Netscape,
rechts: Internet-Explorer)
188
Kapitel 17
Cascading Style Sheets
Cascading Style Sheets sind eine unmittelbare Ergänzung zu HTML. Mit StyleSheets kann man die Formateigenschaften von HTML-Befehlen festlegen. So kann
man z. B. mit Hilfe von Style-Sheets vorgeben, dass Überschriften der zweiten Stufe
immer eingerückt und mit einer Schriftgröße von 16 Punkt in der Schriftart TimesRoman anzuzeigen sind. Wie wir in diesem Kapitel sehen werden, bieten StyleSheets aber noch eine Vielzahl von anderen Möglichkeiten,
Es existieren mehrere Sprachen zum Definieren von Style-Sheets. Die bekannteste
Sprache ist CSS (Cascading Style Sheets), die vom W3-Konsortium, das auch für die
Normierung von HTML zuständig ist, vorgeschlagen wird. Diese Sprache CSS wird
hier vorgestellt. Zu CSS existieren zwischenzeitlich mehrere Versionen:
❏ Version 1.0 (von 1996) und
❏ Version 2.0 (1998).
An den entsprechenden Stellen wird auf Versions-Spezifika hingewiesen. Derzeit
wird an der 3. Version von CSS beim W3C gearbeitet.
Leider unterstützen nicht alle Browser CSS vollständig. Netscape 4.x interpretiert
fast den vollen Sprachumfang von CSS 1.0 und einen Teil der Befehle von CSS 2.0.
Netscape 6.0 unterstützt CSS 1.0 und CSS 2.0 nahezu vollständig.
Der Microsoft Internet-Explorer unterstützt CSS 1.0 ab seiner Version 3.0. In der
Version 4.0 unterstützt er einen Teil von CSS 2.0 und einige spezielle, von Microsoft
eingeführte Style-Sheet-Angaben. Ab Version 5.5 unterstützt der Microsoft Internet-Explorer CSS 1.0 vollständig und größtenteils auch CSS 2.0
Andere Browser unterstützen meist nur CSS 1.0 oder nur Teile von CSS 1.0 und/oder
CSS 2.0.
17.1
Allgemeines zu Style-Sheets
17.1.1 Definieren von Style-Sheets für eine HTML-Datei
Innerhalb eines HTML-Dokuments kann man sich einen Bereich für Style-SheetAngaben definieren. Dazu steht das Tag <style...>...</style> zur Verfügung, das man in den Kopfteil des HTML-Dokuments einbetten muss:
279
<html>
<head>
..........
<style type="text/css">
<!-... Style-Sheet-Angaben ...
//-->
</style>
..........
</head>
<body>
..........
</body>
</html>
Im Tag <style...> muss man dabei den Typ der Formatdefinition angeben,
was bei allen hier beschriebenen Formatiermöglichkeiten mit der Angabe type="text/css" möglich ist. Damit Browser, die keine Style-Sheets unterstützen, die Style-Sheet-Angaben nicht als Text ausgeben, gibt man den Bereich der
eigentlichen Style-Sheet-Angaben üblicherweise in einem mehrzeiligen HTMLKommentar  an. Style-Sheet-Angaben, die im Kopf einer HTMLDatei definiert werden, gelten nur für diese eine HTML-Datei.
In XHTML müssen Style-Sheets in einen CDATA-Abschnitt eingebettet werden; siehe auch Kapitel 19.13 auf Seite 457.
17.1.2
Globale Style-Sheets für mehrere Dateien
Möchte man einmal definierte Style-Sheets nicht nur in einer Datei benutzen, muss
man die betreffenden Style-Sheets in einer eigenen Datei definieren. Jede HTMLDatei, die diese Style-Sheets benötigt, muss dann nur diese „Style-Sheet-Datei“
(CSS-Datei) einbinden. Ändert man in diesem Fall die Angaben in der „Style-SheetDatei“, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen diese
CSS-Datei eingebunden ist.
Die CSS-Datei muss eine reine Textdatei sein, deren Name die Endung .css haben
sollte. Diese Datei sollte nur Formatdefinitionen und keine HTML-Befehle enthalten.
Um eine CSS-Datei in ein HTML-Dokument einzubinden, muss folgende Zeile im
Kopfteil angegeben werden:
<link rel=stylesheet type="text/css" href="css-datei">
Befindet sich die CSS-Datei in einem anderen Directory bzw. auf einem anderen
Server, muss man für css-datei den relativen Pfad bzw. die entsprechende URLAdresse angeben.
Nach der <link>-Zeile können noch weitere Style-Sheets definiert werden:
<head>
.......
<link rel=stylesheet type="text/css" href="css-datei">

</style>
.......
</head>
Definiert man in einer HTML-Datei Style-Sheet-Formate, die auch in der eingebundenen CSS-Datei definiert sind, hat die Formatdefinition in der HTML-Datei höhere Priorität als die gleichnamige in der CSS-Datei. So kann man immer wieder
verwendete Formate importieren und einige davon mit dateispezifischen Formaten überschreiben.
Neben der HTML-Syntax zum Einbinden von CSS-Dateien gibt es auch noch die
folgende CSS-Syntax, die das gleiche bewirkt:
<html>
<head>
.......
<!-@import url(css-datei);
oder auch:
@import "css-datei";
.....
... Weitere Style-Sheet-Angaben ...
//-->
</style>
.......
</head>
Es gibt also zwei Möglichkeiten, CSS-Dateien in einer HTML-Datei einzubinden,
entweder über das Tag <link> oder mit @import. CSS 2 legt fest, dass die Browser die eingebundenen Style-Sheets – abhängig von der Art der Einbindung – unterschiedlich behandeln:
1. Bei mehreren mit dem Tag <link> eingebundenen CSS-Dateien sollte der
Browser den Benutzer wählen lassen, welche der CSS-Dateien für die Anzeige
zu verwenden ist. Bei einer Angabe, wie z. B.:
<link rel=stylesheet type="text/css" href=farbig.css title="Anzeige farbig">
<link rel=stylesheet type="text/css" href=sw.css title="Anzeige schwarzweiss">
könnte der Browser z. B. zuerst ein Fenster einblenden, in dem der Benutzer zwischen den beiden Alternativen „Anzeige farbig“ oder „Anzeige
schwarzweiss“ auswählen kann, bevor dann die entsprechende CSS-Datei
(farbig.css oder sw.css) zur Darstellung des HTML-Dokuments verwendet wird.
2. Bei mehreren mit @import eingebundenen Dateien sollte der Browser ohne Rückfrage beim Benutzer alle angegebenen Style-Sheet-Angaben aus den
unterschiedlichen CSS-Dateien zusammenmischen und dann auf das HTMLDokument anwenden. Sind in den CSS-Dateien Style-Sheet-Angaben enthalten, die für eine Eigenschaft unterschiedliche Formatierungen festlegen, überschreibt die zuletzt importierte Formatierungs-Angabe eine zuvor importierte.
281
Es ist jedoch zu erwähnen, dass viele Browser sich zwar an den Punkt 2 halten, aber
CSS-Dateien, die mit dem Tag <link> eingebunden werden, genauso behandeln,
als ob dies mit @import geschehen sei.
17.1.3
Kaskadieren bei gleichen Style-Sheet-Angaben
Cascading Style Sheets sind kaskadierend. Dies bedeutet, dass bei unterschiedlichen
Style-Sheet-Angaben für ein und dasselbe Tag die unterschiedlichen Eigenschaften sich ergänzen, während bei gleichen Eigenschaften die zuletzt definierte Eigenschaft eine zuvor definierte Eigenschaft überschreibt.
Hat man z. B. die beiden folgenden CSS-Dateien:
❏ CSS-Datei ueber1.htm:
h1 { background-color:red; color:white; font-style:bold; font-size:36pt; }
❏ CSS-Datei ueber2.htm:
h1 { font-style:italic; }
und man lädt die HTML-Datei 17.1 im Browser, wird z. B. das in Abbildung 17.1
gezeigte Fenster eingeblendet, in dem eine Überschrift erster Ordnung kursiv und
unterstrichen in weisser Schrift der Größe 36 auf blauem Hintergrund angezeigt
wird.
HTML-Datei 17.1 – cascad1.htm:
Beispiel zur Kaskadierung von CSS-Formaten
<html>
<head><title>Cascading Style Sheets</title>
<!-@import url(ueber1.css);
@import url(ueber2.css);
h1 { background-color:yellow; text-decoration:underline; }
//-->
</style>
</head>
<body>
<h1 style="background-color:blue;">Überschrift 1. Ordnung</h1>
</body>
</html>
Abbildung 17.1: Browser-Anzeige für HTML-Datei 17.1 (cascad1.htm)
282
17.1.4
Kommentare innerhalb von Style-Sheets
Um einen Kommentar in einen Style-Sheet einzufügen, steht eine spezielle an die
Programmiersprache C angelehnte Syntax zur Verfügung:
/* Kommentar */
Der Kommentar erstreckt sich dabei vom ersten /* bis zum nächsten */, so dass
sich ein Kommentar auch über mehrere Zeilen erstrecken kann, wie z. B.:
p
{ color:yellow; } /* Format für gelben Text; neu definiert: 24.7.2002 */
/* Nachfolgend etwas größere Überschrift in weiss auf blauem Hintergrund;
sieht ganz nett aus, aber sollte nochmals von unserem
Designer begutachtet werden;
neu definiert: 12.8.2002
*/
h1 { background-color:blue; color:white; font-style:bold; font-size:36pt; }
Eine Schachtelung von Kommentaren ist nicht erlaubt. So wäre z. B. die folgende
Angabe nicht erlaubt:
/* Nachfolgend etwas größere Überschrift in weiss auf blauem Hintergrund;
/* neu definiert: 12.8.2002 */ <-- Schachtelung nicht möglich
*/
h1 { background-color:blue; color:white; font-style:bold; font-size:36pt; }
17.1.5
Style-Sheet-Sprache festlegen
Man kann in einer HTML-Datei im Tag <meta...> angeben, welche Definitionssprache bei den Style-Sheet-Definitionen verwendet wird, wie z. B.:
<head>
.....
<meta http-equiv="Content-Style-Type" content="text/css">
.....
</head>
Diese Angabe ist z. Z. bei Verwendung der CSS-Sprache nicht unbedingt erforderlich. Mit der Angabe <meta http-equiv="Content-Style-Type" content="text/css"> legt man fest, dass die CSS-Syntax bei den Style-SheetDefinitionen in dieser Datei verwendet wird. Verwendet man eine andere StyleSheet-Sprache, muss man anstelle von "text/css" den MIME-Typ der entsprechenden Definitionssprache angeben.
17.1.6
Style-Sheets für unterschiedliche Ausgabemedien
(CSS 2.0)
Einbinden der CSS-Dateien (CSS 2.0)
Hier wird vorgestellt, wie man unterschiedliche Style-Sheets für verschiedene Ausgabemedien benutzen kann, indem man für die jeweiligen Ausgabemedien eigene
CSS-Dateien erstellt, die man dann einbindet. CSS hat für die unterschiedlichen
Ausgabemedien eigene Kennwörter eingeführt, die man beim Attribut media= im
Tag <link...> angeben muss, wie z. B.:
283
Tabelle 17.1: Angaben für das Attribut media=
media=
Style-Sheets, die zu verwenden sind für die Ausgabe
screen
print
aural
projection
tv
handheld
braille
all
am Bildschirm (Voreinstellung)
am Drucker
am Lautsprecher
am Overhead-Projektor
am Fernseher
an Handys, Palmtops oder ähnliche Geräte mit kleinem Display
an taktilen Braille-Medien
an allen Medientypen
<head>
.......
<link rel=stylesheet media="screen" href="bildschirm.css">
<link rel=stylesheet media="print"
href="drucker.css">
<link rel=stylesheet media="tv"
href="fernseher.css">
.......
</head>
Tabelle 17.1 zeigt mögliche Angaben beim Attribut media=.
Die Syntax zum Einbinden eigener CSS-Dateien für unterschiedliche Ausgabemedien mit dem Tag <link...> ist HTML-Syntax.
Daneben gibt es auch noch eine CSS-Syntax, die das gleiche bewirkt, wie z. B.:
<head>
.......
<!-@import url(drucker.css) print;
@import url(multimedia.css) tv, projection;
oder auch:
@import "drucker.css" print;
@import "multimedia.css" tv, projection;
//-->
</style>
.......
</head>
Eine CSS-spezifische Einbindung muss also innerhalb des Tags <style>...</style> folgendermassen angegeben werden:
....
@import url(css-datei) medium1, medium2, ...;
oder auch:
....
@import "css-datei" medium1, medium2, ...;
CSS-Definitionen in der HTML-Datei (CSS 2.0)
Neben der Möglichkeit, Style-Sheet-Dateien für unterschiedliche Ausgabemedien in HTML einzubinden, kann man auch direkt innerhalb des Tags <sty-
284
17.2 Definieren von Formaten (Style-Sheets)
le>...</style> Style-Sheets für die unterschiedlichen Ausgabemedien definieren, wie z. B.:
<head>
.......
<!-@media print
{
... Style-Sheet-Angaben zum Drucken ...
}
@media screen, tv
{
... Style-Sheet-Angaben zur Ausgabe am Bildschirm und Fernseher ...
}
//-->
</style>
.......
</head>
Die folgende Angabe würde z. B. bewirken, dass am Bildschirm für das HTMLDokument ein weisser Hintergrund gewählt wird, während bei einer Anzeige dieses HTML-Dokuments auf einem Fernseher oder einem Overhead-Projektor ein
blauer Hintergrund verwendet wird:
<!-body
{ background-color:white; }
@media tv, projection {
body
{ background-color:blue; }
}
//-->
</style>
17.2
Definieren von Formaten (Style-Sheets)
17.2.1
Eigene Formate für HTML-Tags
Man kann für HTML-Tags, wie z. B. für <h1>, <h2>, <td>, <p> usw. mit Hilfe von
Style-Sheet-Angaben eigene Formate definieren. Verwendet man dann das entsprechende HTML-Tag, werden die selbstdefinierten Formate hierfür verwendet.
Lädt man die HTML-Datei 17.2 im Browser, wird z. B. das in Abbildung 17.2 gezeigte Fenster eingeblendet, in dem nun alle Überschriften erster Ordnung kursiv
in weisser Schrift der Größe 36 auf blauem Hintergrund angezeigt werden. Absätze und Tabellenzellen werden bei diesem HTML-Dokument in gelber Schrift der
Größe 24 auf schwarzem Hintergrund angezeigt.
285
Kapitel 18
Eine kurze Einführung in XML
Hier wird eine kurze Einführung in XML gegeben. XML (Extensible Markup Language) ist nicht nur einfach eine weitere Sprache, sondern ein neues Konzept für die
Datenspeicherung und deshalb nicht nur auf das Internet zugeschnitten. Die Idee
zu XML hatte Tim Berners-Lee, der Vater von HTTP und HTML, in den Anfangsjahren der Internet-Euphorie, als er erkannte, dass HTML alleine nicht ausreichen
würde, die ständig steigenden Ansprüche zu erfüllen. Es wurde offensichtlich, dass
ein Standard geschaffen werden musste, in den HTML, das zwischenzeitlich weitverbreitet war, integriert werden konnte. Dazu schuf er im Jahre 1994 ein offenes
Forum für Entwickler aus den unterschiedlichsten Branchen, in dem dann auch die
verschiedensten Ansätze diskutiert wurden.
Im Jahre 1996 wurde dann der erste Entwurf zu XML präsentiert. Die Standardisierung von XML unterliegt nun – wie auch bei HTML – dem W3-Konsortium.
Im Februar 1998 brachte das W3-Konsortium schließlich die erste Empfehlung zu
XML heraus. Danach bemühte sich das W3-Konsortium, andere vorhandene Metasprachen mit Hilfe von XML zu standardisieren. Eine der wichtigste Sprachen war
dabei natürlich HTML, das dann auch mit Hilfe von XML zu dem neuen Standard
XHTML (siehe Kapitel 19) umdefiniert wurde und auf dieser Basis weiterentwickelt
wird. Auch andere Sprachen wie z. B. SVG (Vektorgrafikformat), MathML (Mathematical Markup Language, RDF (Resource Description Framework) und WML (Wireless Markup Language) für Handys wurden mit Hilfe von XML umdefiniert, um
sie als software-unabhängige Beschreibungssprachen einsetzen zu können.
XML ist ein völlig neuer Ansatz, der die ganze Software-Industrie revolutionieren
könnte. Das Ziel von XML ist es nämlich, unabhängige Dateiformate bereitzustellen, so dass sie beliebig zwischen den unterschiedlichen Programmen austauschbar
sind. Setzt sich XML z. B. als Dateiformat für Office-Pakete durch, kann ein auf XML
basierender Brief mit jedem beliebigen Office-Programm, ob nun mit MicrosoftWord oder mit StarOffice gelesen und editiert werden. Das einzige, was sich dabei
noch unterscheiden wird, ist die Bedienoberfläche, die sehr wahrscheinlich auch
weiterhin in den unterschiedlichen Programmen verschieden sein wird. Da XML
von Anfang universell entworfen wurde, könnte es sich als Standard für die unterschiedlichsten Anwendungen durchsetzen, so dass man je nach Anwendungstyp,
411
wie z. B. Graphik, Datenbanken, Computerspiele, CAD usw., jeweils nur noch ein
unabhängiges Dateiformat kennt, das auf XML basiert.
Entscheidend bei XML ist, dass Daten und Layout grundsätzlich voneinander getrennt sind. Das gleiche XML-Dokument kann sowohl von einem Browser als Webseite eingeblendet werden, oder aber an einem Drucker ausgegeben werden, da die
Daten selbst vom Layout getrennt sind. Die Darstellung der Daten, also das Layout, erfolgt mit Hilfe von Konvertern, die XML-Daten in andere medienabhängige
Formate (wie z. B. in HTML oder in Postscript) übersetzen.
18.1
Allgemeines zu XML
18.1.1
Die Metasprache XML
XML (Extensible Markup Language) ist eine Metasprache, mit der man Dokumenttypen definieren kann. XML gibt allerdings nur die Regeln vor, die beim Definieren von Dokumenttypen einzuhalten sind. Anders als HTML schreibt XML keine
bestimmten Schlüsselwörter mit einer zugeordneten Funktionsweise vor, sondern
legt lediglich den Aufbau und die Struktur fest, an die sich jedes XML-Dokument
halten muss.
Nachfolgend ist ein mögliches Aussehen eines XML-Dokuments gezeigt:
<adresse nr="1">
<titel />
<name>Hans Meier</name>
<postfach>352</postfach>
<wohnort>12345 Musterstadt</wohnort>
</adresse>
An diesem Beispiel kann man schon die grundsätzliche Struktur von XML-Dokumenten sowie die dahinterliegende XML-Philosophie erkennen:
❏ In XML existieren so genannte Tags (Elemente). Diese Tags in spitzen Klammern (wie z. B. <adresse>) treten immer paarweise auf, wobei das Endtag
(wie z. B. </adresse>) den jeweiligen Block beendet.
❏ Tags können beliebig geschachtelt werden. Die Schachtelung entspricht dabei
einer Klammerung wie man sie z. B. von der Mathematik her kennt. Dies bedeutet, dass jedes Element auf der Ebene abgeschlossen werden muss, auf der
es auch geöffnet wurde.
❏ Leere Elemente können das Endtag gleich mitenthalten (<titel />).
❏ Ein Tag kann Attribute besitzen, wie z. B. eine Kennzeichnung (<adresse
nr="1">).
❏ Die Information selbst steht innerhalb des Start- und Endtags, wie z. B. inner-
halb von <wohnort>...</wohnort>.
Optional kann auch ein Kopfteil angegeben werden, der die XML-Version und den
Zeichensatz festlegt, wie das nachfolgend gezeigt ist:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<adressen>
<adresse>
412
18.1 Allgemeines zu XML
<name>Hans Meier</name>
<postfach>352</postfach>
<wohnort>12345 Musterstadt</wohnort>
</adresse>
<adresse>
<title>Dr.</title>
<name>Kati Wilhelm</name>
<strasse>Waldstr. 17</strasse>
<wohnort>54342 Hallenfurt</wohnort>
</adresse>
</adressen>
18.1.2
Dokumenttyp-Definitionen (DTDs)
Die Regeln für erlaubte Elemente, Attribute und Verschachtelungsmöglichkeiten
einer XML-Metasprache werden unabhängig von den eigentlichen Daten definiert.
Die Vorgabe dieser Regeln nennt man Dokumenttyp-Definition (document type definition, Abkürzung DTD). Ein Dokument, das alle Vorgaben einer DTD erfüllt, bezeichnet man als ein gültiges Dokument. Das Verfahren, um zu überprüfen, ob eine
XML-Datei nach den Regeln ihrer zugehörigen DTD fehlerfrei ist, heißt Validierung.
Für das vorherige Beispiel könnte eine DTD wie folgt aussehen:
<!ELEMENT adressen (adresse)*>

<!ELEMENT adresse (titel?, name, (postfach | strasse), wohnort)>
<!ELEMENT titel (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT postfach (#PCDATA)>
<!ELEMENT strasse (#PCDATA)>
<!ELEMENT wohnort (#PCDATA)>
Die Angabe
legt fest, dass das Tag <adresse> nur innerhalb von <adressen>...</adressen> angegeben werden darf. Der Stern (*) legt dabei fest, dass
innerhalb von <adressen>...</adressen> das Tag <adresse> entweder gar
nicht angegeben sein muss, oder aber auch einmal oder mehrmals vorkommen
darf.
Die Regel
legt fest, dass die Tags <titel>, <name>, <postfach>, <strasse> und <wohnort> nur innerhalb von <adresse>...</adresse> angegeben werden dürfen.
Der Titel wird in diesem Beispiel als optional festgelegt, was man mit der Angabe des Fragezeichens ? hinter titel erreicht. Die anderen Tags <name>,
413
<postfach>, <strasse> und <wohnort> dagegen müssen immer innerhalb von
<adresse>...</adresse> vorhanden sein, wobei allerdings nur eines der beiden Tags <postfach> oder <strasse> angegeben sein darf. Dazu wurden diese beiden alternativen Elementtypen geklammert und mit einem Senkrechtstrich |
voneinander getrennt.
Eine Definition wie z. B.
legt fest, dass es ein Element name gibt, das mit den Tags <name>...</name>
eingegrenzt und dessen Inhalt als normaler Text interpretiert wird.
Kommentare lassen sich mit <!- -...- -> in der DTD einfügen.
18.1.3
Formatierung für XML-Elemente mit Style-Sprachen
XML-Dokumente enthalten lediglich so genannte semantische Markierungen. Eine Markierung wie z. B. <cite>...</cite> legt dabei nicht fest, wie der darin
enthaltene Text anzuzeigen ist. In HTML dagegen würde der Browser bei einer
Angabe wie <cite>...</cite> den darin angegebenen Text entsprechend hervorgehoben, wie z. B. kursiv, darstellen. In XML dagegen muss man mit Hilfe einer
Style-Sprache festlegen, wie die Daten in den entsprechenden Tags zu formatieren
sind.
Dazu stehen heute zwei Style-Sprachen zur Verfügung: CSS und XSL. CSS (Cascading Style-Sheets), die in Kapitel 17 ausführlich behandelt wurden, dienen lediglich
dazu, festzulegen, wie der Browser die Elemente einer XML-Datei darstellen soll.
XSL (Extensible Stylesheet Language) auf der anderen Seite ist dagegen wesentlich
mächtiger und direkt auf XML zugeschnitten.
18.2
Aufbau und Inhalt von XML-Dateien
In diesem Abschnitt wird der typische Aufbau von XML-Dateien gezeigt, und es
werden wichtige Regeln vorgestellt, die in XML-Dateien einzuhalten sind.
18.2.1
Typischer Aufbau von XML-Dateien
Angaben am Anfang einer XML-Datei
Jede XML-Datei sollte sich am Anfang als XML-Datei identifizieren. Dies ist mit
folgender einfacher XML-Deklaration am Beginn der Datei möglich:
<?xml version="1.0"?>
.....
Neben der Versionsangabe kann eine solche XML-Deklaration zwei weitere Attribute enthalten:
❏ encoding=
legt verwendeten Zeichensatz fest.
❏ standalone=
legt fest, ob die zugehörige DTD sich in dieser ("yes") oder aber in einer
anderen Datei ("no") befindet
414
Tabelle 18.1: Angaben für das Attribut encoding=
encoding=
Zeichensatz
UTF-8
internationaler Zeichensatz auf Basis der ISO/IEC-10646-Norm mit 8
Bit Zeichenbreite
internationaler Zeichensatz auf Basis der ISO/IEC-10646-Norm mit 16
Bit Zeichenbreite (Voreinstellung)
ISO-Zeichensatz für westeuropäische Sprachen
ISO-Zeichensatz für osteuropäische Sprachen
ISO-Zeichensatz für südeuropäische Sprachen
ISO-Zeichensatz für nordeuropäische Sprachen
ISO-Zeichensatz für kyrillische Sprachen
ISO-Zeichensatz für arabische Sprachen
ISO-Zeichensatz für griechische Sprache
ISO-Zeichensatz für hebräische Sprache
ISO-Zeichensatz für türkische Sprache
ISO-Zeichensatz für nordische Sprache
UTF-16
ISO-8859-1
ISO-8859-2
ISO-8859-3
ISO-8859-4
ISO-8859-5
ISO-8859-6
ISO-8859-7
ISO-8859-8
ISO-8859-9
ISO-8859-10
Nachfolgend ist eine XML-Deklaration gezeigt, in der diese beiden Attribute angegeben sind:
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
.....
Tabelle 18.1 zeigt mögliche Angaben beim Attribut encoding=.
Die beiden Attribute standalone= und encoding= sind zwar optional, müssen
aber, wenn sie vorhanden sind, in folgender Reihenfolge angegeben werden:
version= encoding= standalone=
Verarbeitungsanweisungen in einer XML-Datei
Manchmal benötigt man innerhalb einer XML-Datei so genannte Verarbeitungsanweisungen (processing instructions) für die Programme, die die XML-Datei verarbeiten, wie z. B.:
....
<?xml-stylesheet type="text/css" href="meinstil.css"?>
....
18.2.2
Dokumenttyp-Deklaration
Mit einer Dokumenttyp-Deklaration kann man zu einer DTD (Document Type Definition) den Bezug herstellen. Dabei gibt es zwei Möglichkeiten, die hier vorgestellt
werden.
415
Dokumenttyp-Deklaration mit interner DTD
In diesem Fall befinden sich die DTD-Definitionen innerhalb der DokumenttypDeklaration, wie z. B.:
<!DOCTYPE adressen [
<!ELEMENT titel (#PCDATA)>
<!ELEMENT postfach (#PCDATA)>
<!ELEMENT strasse (#PCDATA)>
<!ELEMENT wohnort (#PCDATA)>
]>
Die Dokumenttyp-Deklaration beginnt mit <!DOCTYPE.... Danach folgt, durch
ein Leerzeichen getrennt, der Name des Dokumenttyps (hier adressen). Der Name des Dokumenttyps muss dabei mit dem Namen des Dokument-Elements, also
dem obersten Tag in der XML-Datei, identisch sein. Die eigentlichen DTD-Definitionen müssen dann nach dem Namen des Dokumenttyps in eckigen Klammern
angegeben werden. Am Ende muss eine schließende eckige Klammer gefolgt von
der abschließenden spitzen Klammer > der Dokumenttyp-Deklaration angegeben
werden. Danach können dann die Daten entsprechend der DTD-Definitionen angegeben werden. Definitionen in der DTD werden in Kapitel 18.3 auf Seite 425 näher
erläutert.
Dokumenttyp-Deklaration mit externer DTD
In diesem Fall befinden sich die DTD-Definitionen in einer anderen Datei, deren
Pfadnamen (lokal oder im Web) man hier angeben muss, wie z. B.:
<!DOCTYPE adressen SYSTEM "../src/adressen.dtd">
....
oder
<!DOCTYPE adressen SYSTEM "http://www.xxx.de/meinxml/adressen.dtd">
....
oder
<!DOCTYPE adressen PUBLIC "-//Vorlagen Uni//DTD adressen V 1.0//DE"
"http://www.xxx.de/vorlage/adressen.dtd">
....
DTD-Dateien haben üblicherweise die Endung .dtd.
Die Dokumenttyp-Deklaration beginnt mit <!DOCTYPE.... Danach folgt, durch
ein Leerzeichen getrennt, der Name des Dokumenttyps (hier adressen). Die nächste Angabe muss dabei entweder SYSTEM oder PUBLIC sein. Das Wort SYSTEM
416
muss man angeben, wenn man den Pfadnamen der DTD explizit angibt. Das Wort
PUBLIC muss man angeben, wenn man den Pfadnamen der DTD nicht explizit,
sondern durch einen so genannten öffentlichen Bezeichner (public identifier) angibt.
Solche Angaben zu einem öffentlichen Bezeichner bestehen aus drei Teilen:
1. Angabe der veröffentlichenden Person oder Institution
2. Bezeichnung der DTD, beginnend mit DTD, gefolgt vom Namen der DTD und
einer Versionsangabe
3. Sprache, in der die Namen der Elemente, Attribute usw. in der DTD definiert
sind.
Hinter der Angabe zum öffentlichen Bezeichner kann man zusätzlich noch – wie
im vorherigen Beispiel – die echte Webadresse der DTD angeben.
Kommentare
Kommentare lassen sich in DTDs – genauso wie in HTML-Dateien – mit <!- -...-> angeben. Ein Kommentartext wird also mit der Zeichenkombination <!- - eingeleitet und mit - -> beendet. Ein Kommentartext darf sich dabei auch über mehrere Zeilen erstrecken, wie z. B.:

Nach  muss sich jeweils mindestens ein Leerzeichen oder ein
Zeilenumbruch befinden. Innerhalb von Kommentaren sollte man nicht zwei Bindestriche -- hintereinander angeben.
18.2.3
CDATA-Abschnitte
XML-Dokumente dürfen so genannte CDATA-Abschnitte enthalten, die nicht als
eine XML-Angabe interpretiert werden. Anders als Kommentare werden solche Bereiche jedoch als eine normale Zeichenfolge ausgegeben. So würden z. B. die beiden
folgenden Angaben:
<![CDATA[Dieser Text wird einfach als normale Zeichenfolge ausgegeben]]>
<![CDATA[<cite>Tags werden <b>nicht</b> ausgewertet]]>
zu folgender Ausgabe führen:
Dieser Text wird einfach als normale Zeichenfolge ausgegeben
<cite>Tags werden <b>nicht</b> ausgewertet
18.2.4
Allgemeine Regeln für Tags, Attribute und
Wertzuweisungen
Für Tags, Attribute und ihre Wertzuweisungen gelten in XML folgende Regeln:
❏ Namen dürfen nur bestimmte Zeichen enthalten
Namen für Tags, Attribute und Entities (siehe Kapitel 18.3.4 auf Seite 440) dürfen folgende Zeichen enthalten:
417
➢ Groß- und Kleinbuchstaben
➢ Ziffern von 0 bis 9
➢ Unterstriche (_)
➢ Bindestriche (-)
➢ Punkte (.)
➢ Doppelpunkt (:); der Doppelpunkt ist jedoch auch für Namensräume
(siehe Kapitel 18.2.7 auf Seite 422) reserviert.
Weitere Regeln für Namen sind:
➢ Das erste Zeichen eines Namens darf keine Ziffer sein, sondern muss ein
Buchstabe, ein Unterstrich oder eines der erlaubten Interpunktionszeichen sein. Grundsätzlich empfiehlt es sich aber, dass das erste Zeichen
möglichst immer ein Buchstabe, eventuell auch ein Unterstrich ist.
➢ Namen dürfen keine Leerzeichen enthalten.
➢ Namen dürfen nicht mit der Zeichenfolge xml oder XML beginnen, da
diese Zeichenfolgen für spätere XML-Versionen reserviert ist.
➢ Namen müssen mindestens einen Buchstaben bzw. Unterstrich enthalten.
➢ Die Länge von Namen ist praktisch unbegrenzt.
Nachfolgend sind einige erlaubte und einige unerlaubte Namen gezeigt:
<name2-xml> 
<z1>

<haus-hof>

<neu-zaehl> 
<neu zaehl> 
<vor=nach>

<1horn>

<xml-name>

❏ XML unterscheidet zwischen Groß-/Kleinschreibung
Anders als HTML unterscheidet XML zwischen Groß- und Kleinschreibung.
So handelt es sich z. B. bei den beiden folgenden Angaben um zwei verschiedene Tags:
<!ELEMENT zitat (#PCDATA)>
<!ELEMENT Zitat (#PCDATA)>
Dasselbe gilt auch für Attribute, wo man ebenso genau darauf achten muss,
wie der Attributname geschrieben ist. So spricht man z. B. bei <adresse
land="de"> ein anderes Attribut an als bei <adresse Land="de">. Ebenso wird bei Wertzuweisungen zwischen Groß- und Kleinschreibung unterschieden. So handelt es sich z. B. bei <adresse groesse="riesig"> um
eine andere Wertzuweisung als bei <adresse groesse="Riesig">.
❏ Werte müssen bei Zuweisungen immer in ". . . " angegeben sein
Bei XML gilt grundsätzlich, dass alle Werte bei Zuweisungen an Attribute in
Anführungszeichen stehen müssen, wie z. B.:
<adresse groesse="klein"> 
<adresse groesse=klein>
418

Benötigt man innerhalb einer Wertzuweisung an ein Attribut den Apostroph
oder das Anführungszeichen, so müssen diese entsprechend kodiert angegeben werden, wie z. B. ' für Apostroph und " für Anführungszeichen (siehe auch Tabelle 18.2 auf Seite 424).
❏ Endtags dürfen niemals weggelassen werden
In XML darf niemals, wie z. B. bei den Tags <div> oder <td> in HTML, das
zugehörige Endtag weggelassen werden.
Ausnahmen sind so genannte leere Tags ohne Inhalt. Solche Elemente können
ohne zugehöriges Endtag angegeben werden, müssen jedoch explizit als leer
gekennzeichnet werden, wie z. B.:
<hr/>
oder aber:
<hr />
oder aber auch:
<hr></hr>

Eine alleinige Angabe wie
<hr>
ist nicht erlaubt.
18.2.5
Wohlgeformte und gültige XML-Dokumente
Wohlgeformtheit eines XML-Dokuments
„Wohlgeformtheit“ ist ein wichtiger Begriff in XML. Ein XML-Dokument ist wohlgeformt, wenn es die Regeln von XML genau einhält. So ist z. B. das folgende XMLDokument wohlgeformt, da für es folgendes gilt:
❏ Es enthält am Anfang eine XML-Deklaration, die den Bezug zu XML herstellt.
❏ Es gibt ein äußerstes Element (auch als Dokument-Element bezeichnet), das
alle anderen Datenelemente enthält (<Maerchen>...</Maerchen>).
❏ Es gibt mindestens ein Datenelement (im Beispiel sind es drei:
<Maerchen>...</Maerchen>,
<Rotkappe>...</Rotkappe>
und
<Wolf>...</Wolf>)
<Maerchen>
<Rotkappe stimme="hoch">Warum hast du einen so grossen Mund</Rotkappe>
<Wolf stimme="tief">Damit ich dich bessser fressen kann</Wolf>
</Maerchen>
Dieses XML-Dokument ist zwar wohlgeformt, aber ungültig, da es keine DTD selbst
enthält und auch keinen Bezug auf eine Datei angibt, in der sich eine DTD befindet.
Gültigkeit und Vollständigkeit eines XML-Dokuments
Das folgende XML-Dokument ist gültig:
<!DOCTYPE adresse [
419
Kapitel 20
HTML/XHTML-Kurzreferenz
Alphabetische Übersicht der HTML-Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Struktur von HTML-Dokumenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Kommentare in HTML-Dokumenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Tags und Attribute in HTML/XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Nomenklatur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Tags für die Struktur eines HTML-Dokuments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Tags für den Kopfteil eines HTML-Dokuments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
Tags zur Dokumentgestaltung und -formatierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Absätze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Formatieren einzelner Textabschnitte (fest, logisch und benutzerdefiniert) . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Zeilenumbrüche und Trennlinien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Unformatierter Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Zitate und Adressen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Zentrieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Schriftgrößen und -farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Kennzeichnen von Änderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Aufzählungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Einfache und numerierte Aufzählungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Glossare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Grundlegende Tabellen-Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
Tabellenbeschriftung und HTML-4-Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Multimedia-Objekte, Sound und Laufschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Objekte und Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Multimedia-Tags in Netscape und Internet-Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Graphiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475
Graphikbilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476
Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Zentrales Formular-Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Auswahllisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Radio- und Checkbuttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Pushbuttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Unsichtbare Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Beschriften und Gruppieren von Formularelementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Skript-Bereiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
Layout-Erweiterungen von Netscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Allgemeine Attribute und ihre möglichen Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Event-Handler-Attribute in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Farben in HTML-Dokumenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Unterschiede zwischen XHTML und HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
459
20.1
Alphabetische Übersicht der HTML-Tags
<a>. . . </a>
1
– Hyperlinks (anchors) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
<abbr>. . . </abbr> – Abkürzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<acronym>. . . </acronym> – Akronym . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<address>. . . </address> – Adressen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
<applet>. . . </applet> – Java-Applets einbinden (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
<area>. . . <area/> – Angaben zu verweissensitiven Bereichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
<b>. . . </b> – Fetter Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<basefont>. . . </basefont> – Basisschrift (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
<base>. . . <base/> – Voreingestellte Pfad- und Framenamen für Dokument . . . . . . . . . . . . . . . . . . . . . . . 464
<bdo>. . . </bdo> – Andere Sprache oder Schreibrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
<bgsound> – Hintergrund-Sound (I). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
<big>. . . </big> – Größerer Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<blink>. . . </blink> – Blinkender Text (N) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<blockquote>. . . </blockqoute> – Zitat als eigener abgesetzter Absatz . . . . . . . . . . . . . . . . . . . . . . . . 466
<body>. . . </body> – beinhaltet den Dokumenteninhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
<br>. . . <br/> – Zeilenumbruch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<button>. . . </button> – Allgemeiner Pushbutton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
<caption>. . . </caption> – Tabellenbeschriftung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<center>. . . </center> – Zentrieren von HTML-Elementen (Veraltet). . . . . . . . . . . . . . . . . . . . . . . . . . .466
<cite>. . . </cite> – Zitat innerhalb einer Textpassage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<code>. . . </code> – Darstellung von Code (nicht proportionale Schrift) . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<col>. . . <col/> – Angaben für die einzelnen Spalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<colgroup>. . . </colgroup> – umrahmt eine Spaltengruppe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<dd>. . . </dd> – Erklärung zum Glossar-Begriff (define definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<del>. . . </del> – Kennzeichnen gelöschter Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
<dfn>. . . </dfn> – Begriffe (definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<dir>. . . </dir> – Verzeichnislisten (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<div>. . . </div> – Absatz (division); Schachtelung möglich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<dl>. . . </dl> – Glossar (definition list) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<dt>. . . </dt> – Glossar-Begriff, der erläutert wird (define term). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<em>. . . </em> – Einfache Betonung (emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<embed> – Multimedia-Dateien einbetten (N; veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
<fieldset>. . . </fieldset> – Gruppieren mehrerer Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . 480
<font>. . . </font> – Schriftgröße und -farbe (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
<form>. . . </form> – umrahmt ein Formular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
<frame>. . . </frame> – definiert einen Frame innerhalb von <frameset> . . . . . . . . . . . . . . . . . . . . . . . 471
<frameset>. . . </frameset> – umrahmt und definiert Layout für Frames . . . . . . . . . . . . . . . . . . . . . . . 471
<head>. . . </head> – umrahmt den Kopfteil eines HTML-Dokuments . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
<hr>. . . <hr/> – Horizontale Trennlinie (horizontal rule) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
<html>. . . </html> – umrahmt ein HTML-Dokument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
1 Zur
460
Erklärung der Nomenklatur siehe Kapitel 20.4 auf Seite 463
20.1 Alphabetische Übersicht der HTML-Tags
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>. . . </h1>,</h2>,</h3>,</h4>,</h5>,</h6>
– Überschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<i>. . . </i> – Kursiver Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<iframe>. . . </iframe> – Eingebettete Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
<ilayer>. . . </ilayer> – Inline-Layer; Netscape 4.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
<img>. . . <img/> – Einfügen von Graphikbildern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
<input type=button>. . . <input/> – Einfacher Pushbutton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
<input type=checkbox>. . . <input/> – Checkbuttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
<input type=file>. . . <input/> – Pushbutton zum Versenden von Dateien . . . . . . . . . . . . . . . . . . . 479
<input type=hidden>. . . <input/> – Unsichtbare Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . 480
<input type=image>. . . <input/> – Graphik als SUBMIT-Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
<input type=password>. . . <input/> – Einzeilige Eingabefelder (Texteingabe unsichtbar) . . . . . 478
<input type=radio>. . . <input/> – Radiobuttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
<input type=reset>. . . <input/> – RESET-Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
<input type=submit>. . . <input/> – SUBMIT-Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
<input type=text>. . . <input/> – Einzeilige Eingabefelder (Texteingabe sichtbar) . . . . . . . . . . . . . . 478
<ins>. . . </ins> – Kennzeichnen neu hinzugefügter Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
<isindex>. . . <isindex/> – Suchfunktion für ein Dokument (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . 464
<kbd>. . . </kbd> – Tastatureingaben (keyboard) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<label>. . . </label> – Beschriften einzelner Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
<layer>. . . </layer> – Layer; Netscape 4.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
<legend>. . . </legend> – Beschriften einer Gruppe von Formularelementen . . . . . . . . . . . . . . . . . . . . . 480
<li>. . . </li> – Aufzählungpunkte für <ul>, <ol>, <dir> und <menu> (list entry) . . . . . . . . . . 468
<link>. . . <link/> – Bezüge zu anderen Dokumenten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
<listing>. . . </listing>
– wie <pre width=132> ohne Interpretation von HTML-Code (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
<map>. . . </map> – umrahmt die Angaben zu verweissensitiven Bereichen . . . . . . . . . . . . . . . . . . . . . . . . . . 476
<marquee>. . . </marquee> – Horizontaler Lauftext (I) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
<menu>. . . </menu> – Menülisten (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<meta>. . . <meta/> – Zusatzinformationen zum HTML-Dokument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
<multicol>. . . </multicol> – Mehrspaltige Anzeige; Netscape 4.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
<nobr>. . . </nobr> – Zeilenumbruch verhindern (I,N) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<noembed>. . . </noembed>
– Alternative Anzeige für Browser, die Tag <embed> nicht kennen (N) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
<noscript>. . . </noscript> – Alternative Bereiche, wenn Skript nicht ausgeführt werden kann . . . 480
<noframes>. . . </noframes> – Anzeige für Browser, die keine Frames unterstützen . . . . . . . . . . . . . . 471
<object>. . . </object> – Objekte einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
<ol>. . . </ol> – Numerierte Aufzählungen (ordered list). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<optgroup>. . . </optgroup>
– Gruppierung von <option>-Tags in <select>...</select> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
<option>. . . </option> – Listeneintrag in eine Auswahlliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
<p>. . . </p> – Absatz (paragraph) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<param>. . . <param/> – Parameter für Objekte oder Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
461
<pre>. . . </pre>
– Nicht proportionale Schrift und Beibehalten von Zeilenumbrüchen und Leerzeichen . . . . . . . . . . . . . . . . . . . 466
<q>. . . </q> – Zitat innerhalb eines Satzes (nicht von allen Browsern unterstützt . . . . . . . . . . . . . . . . . . . 466)
<s>. . . </s> – Durchgestrichener Text (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<samp>. . . </samp> – Darstellung von Code (nicht proportionale Schrift) . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<script>. . . </script> – Definieren von Skript-Bereichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480
<select>. . . </select> – umrahmt Auswahllisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
<small>. . . </small> – Kleinerer Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<spacer> – Spacer (Freiräume); Netscape 4.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
<span>. . . </span> – Benutzerdefiniertes Formatieren von Textabschnitten . . . . . . . . . . . . . . . . . . . . . . . . 465
<strike>. . . </strike> – Durchgestrichener Text (Veraltet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<strong>. . . </strong> – Starke Betonung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<style>. . . </style> – definiert Style-Sheets für Dokument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464
<sub>. . . </sub> – Tiefer gestellter Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<sup>. . . </sup> – Höher gestellter Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<table>. . . </table> – umrahmt eine Tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
<tbody>. . . </tbody> – Tabelleninhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<td>. . . </td> – Normale Tabellenzelle (table data) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
<textarea>. . . </textarea> – Mehrzeilige Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
<tfoot>. . . </tfoot> – Tabellenfuß . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<thead>. . . </thead> – Tabellenkopf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
<th>. . . </th> – Tabellen-Kopfzelle (table header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
<title>. . . </title> – Titel eines Dokuments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .464
<tr>. . . </tr> – Tabellenzeile (table row) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
<tt>. . . </tt> – Nicht proportionaler Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<u>. . . </u> – Unterstrichener Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<ul>. . . </ul> – Einfache Aufzählungen (unordered list) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468
<var>. . . </var> – Variablennamen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<wbr>. . . <wbr/> – Zeilenumbruch nur bei überlangen Zeilen (I,N) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
<xmp>. . . </xmp> – wie <pre width=80>; aber keine Interpretation von HTML-Code (Veraltet) . . . 466
462
20.2 Struktur von HTML-Dokumenten
20.2
Struktur von HTML-Dokumenten
<html>
<head>
.... Dokumentenkopf
</head>
<body>
.... Eigentlicher Inhalt des Dokuments
</body>
</html>
20.3
Kommentare in HTML-Dokumenten

Nach  muss sich mindestens ein Leerzeichen oder ein Zeilenumbruch befinden. Der
Kommentartext kann sich über mehrere Zeilen erstrecken. Der Internet-Explorer kennt noch das Tag
<comment>...</comment>, um Kommentare in einem HTML-Dokument anzugeben.
20.4
Tags und Attribute in HTML/XHTML
Nomenklatur
In dieser Kurzreferenz wurde die folgende Nomenklatur gewählt:
(I)
bedeutet, dass dieses Konstrukt nur im Internet-Explorer verfügbar ist
(N)
bedeutet, dass dieses Konstrukt nur im Netscape Navigator verfügbar ist
(I,N)
bedeutet, dass Konstrukt im Internet-Explorer und Netscape Navigator verfügbar ist
<tag>. . . </tag>
zeigt an, dass hier das Endtag </tag> in HTML nicht angegeben werden muss
<tag>. . . </tag>
zeigt an, dass hier das Endtag </tag> angegeben werden muss bzw. sollte
zeigt an, dass hier in HTML kein Endtag existiert; in XHTML ist hier entweder
</tag> oder <tag ... /> anzugeben
Bei Verweisen auf nähere Beschreibungen zu bestimmten Attributen ist die entsprechende Seitenzahl, auf der sich
die genauere Beschreibung befindet, in Klammern angegeben.
<tag>. . . <tag/>
Tags für die Struktur eines HTML-Dokuments
<html>. . . </html> umrahmt ein HTML-Dokument:
dir=
<head>. . . </head> umrahmt den Kopfteil eines HTML-Dokuments:
lang=
dir=
version=
lang=
(482)
profile=
(482)
<body>. . . </body> beinhaltet den Dokumenteninhalt
Farben (484):
bgcolor= (Hintergrundfarbe), text= (Farbe für Text)
Farben für Links (484):
link= (nicht besucht), alink= (aktiv), vlink= (besucht)
Hintergrundbild:
background=url
bgproperties="fixed" (I)
Feststehender Hintergrund beim Scrollen
Rand links bzw. oben in Pixel
leftmargin=n (I), topmargin=n (I)
class=
style=
id=
title=
dir=
lang=
(482)
onClick=
onDblClick=
onKeyDown=
onKeyPress=
onKeyUp=
onMouseDown=
onMouseMove=
onMouseOut=
onMouseOver=
onMouseUp=
onload
onUnload=
(483)
<bdo>. . . </bdo> Andere Sprache oder Schreibrichtung:
class=
style=
id=
title=
dir=
lang=
(482)
<bdo dir=rtl>Von rechts nach links.</bdo> Ab hier wieder von links nach rechts
würde bei einem Browser, der das Tag <bdo> unterstützt, wie folgt ausgegeben:
.sknil hcan sthcer onV Ab hier wieder von links nach rechts
463
Tags für den Kopfteil eines HTML-Dokuments (in <head>...</head>)
<title>. . . </title> Titel eines Dokuments: dir=, lang= (482)
<base>. . . <base/> Voreingestellte Pfad- und Framenamen für Dokument
Basis-URL für alle relativen URLs im HTML-Dokument
href=url
Bei Hyperlinks/Formularen, bei denen Attribut frame= fehlt, wird Zieldokument
target=string
bzw. Formular automatsch im Frame mit den hier angegebenen Namen angezeigt
<style>. . . </style> definiert Style-Sheets für Dokument: dir=, lang=, title= (482)
type=
media=
text/css (Cascading Style Sheet-Angaben)
text/javascript (Javascript Style Sheet-Angaben)
Style-Sheets für unterschiedliche Ausgabemedien: screen (Bildschirm), print (Drucker),
aural (Lautsprecher) projection (Overhead-Projektor), tv (Fernseher), handheld (Handys, Palmtops usw.), braille (taktile Braille-Medien) oder all (alle Medientypen)
<meta>. . . <meta/> Zusatzinformationen zum HTML-Dokument: dir=, lang= (482)
name=string
Typ der Information; Typische Namen hier sind z. B.:
author, copyright
keywords
description
date, language
generator
classification
expires
Name des Autors der HTML-Datei bzw. Copyright-Hinweise
Stichworte (mit Komma getrennt bei content=) für Suchmaschinen
Kurze Beschreibung des Dokuments; von Suchmaschinen angezeigt
Datum/Zeit der Erstellung des Dokuments bzw. verwendete Sprache
Information zu dem Tool, mit dem Dokument erstellt wurde
Klassifikation des Dokuments; auch als Kommentar interpretiert
Angabe eines Datums, an dem Dokument ungültig wird
Informationen, die Server im HTTP-Kopfteil beim Versenden einfügt
eigentliche Information zu name= bzw. http-equiv=
wählt Vorgabe von <meta>-Angaben aus. Diese Vorgabe sollte sich in
Profile-Datei von <head profile=...> (siehe Seite 482) befinden
Zeichensatz für Dokument; besser ist es, den Zeichensatz mit
charset=string (I)
http-equiv= und content= festzulegen
<meta http-equiv="refresh" content="5">: aktuelle Dokument alle 5 Sekunden neu laden
<meta http-equiv="refresh" content="10; url=webpage">: nach 10 Sek. webpage laden
http-equiv=string
content=string
scheme=string
<link>. . . <link/> Bezüge zu anderen Dokumenten
href=
legt Bezugsdokument fest
rel=, rev=
rel= legt Beziehung zwischen aktuellen Dokument und Zieldokument fest.
rev= legt Beziehung zwischen Zieldokument und aktuellen Dokument fest.
next, prev
nächstes bzw. vorheriges Dokument in einer Dokumentsammlung
head, toc
oberstes Dokument bzw. Inhaltsverzeichnis
parent, child
über- bzw. untergeordnetes Dokument
index, glossar
Stichwortverzeichnis bzw. Glossar dieses Dokuments
Beschriftung, die Browser im entspr. Button anzeigen soll
title=string
MIME-Typ des Zieldokuments; z. B. bei Bezügen auf Style-Dateien:
type=string
<link href=meinstil.css rel=stylesheet type=text/css>
Name des Fensters bzw. Frames, in dem Zieldokument anzuzeigen ist. Neben eitarget=name
genen Namen existieren vordefinierte Namen, um Zieldokument anzuzeigen. . .
_self
im selben Fenster bzw. Frame (Voreinstellung)
_blank
in neuem, unbenamten Fenster
_parent
im übergeordneten Frame; entspricht _self, wenn Frame nicht geschachtelt
_top
im obersten Fenster und dort alten Inhalt ersetzen
Zeichensatzcode (z. B. iso-8859-1) des Zieldokuments
charset=code
hreflang=
Sprache des Zieldokuments (482)
Darstellung (mit Kommas getrennt) für Zieldokument: screen Bildschirm
media=liste
(Voreinst.), print (Drucker), aural (Lautsprecher) projection (OverheadProjektor), tv (Fernseher), handheld (Handys, Palmtops oder ähnliche Geräte mit
kleinem Display), braille (taktile Braille-Medien), all (alle Medientypen)
class=
style=
id=
title=
dir=
lang=
(482)
onClick=
onDblClick=
onKeyDown=
onKeyPress=
onKeyUp=
onMouseDown=
onMouseMove=
onMouseOut=
onMouseOver=
onMouseUp=
(483)
❏
Bei <link>-Angaben, die im Kopfteil stehen müssen, sollte Browser Buttons einblenden, die Benutzer leicht in der Dokumentensammlung blättern lassen; in vielen Browsern nicht realisiert.
<isindex>. . . <isindex/> Suchfunktion für ein Dokument (Veraltet)
prompt=string
action=url (I)
class=
style=
464
Text vor Eingabefeld für Suchbegriffe statt „...Enter search keywords:“
URL für Suchindex; besser <base href=url> im Kopfteil
id=
title=
dir=
lang=
(482)
20.4 Tags und Attribute in HTML/XHTML
Tags zur Dokumentgestaltung und -formatierung
Absätze
<div>. . . </div>
division (Schachtelung möglich)
<p>. . . </p>
paragraph
Text ausrichten: left (linksbündig; Voreinst.); right (rechtsbündig);
center (zentriert); justify (justiert); von vielen Browsern nicht unterstützt
class=
style=
id=
title=
dir=
lang=
(482)
onClick=
onDblClick=
onKeyDown=
onKeyPress=
onKeyUp=
onMouseDown=
onMouseMove=
onMouseOut=
onMouseOver=
onMouseUp=
align=
❏
❏
❏
(483)
Eine Schachtelung von <div>-Tags ist erlaubt.
Internet-Explorer kennt noch Attribut <nowrap>. Bei <div nowrap> finden nur dort Zeilenumbrüche statt, wo auch im HTML-Dokument Zeilenvorschübe (Carriage Return) angegeben sind.
Innerhalb von <p>...</p> sind folgende Tags erlaubt: Verweise (<a>), Bilder (<img>), Zeilenvorschübe (<br>) und Texthervorhebungen (<b>, <i>, <cite>, <var> usw.; siehe Texthervorhebungen). Werden andere Tags angegeben, beendet der Browser den Absatz.
Überschriften
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>. . . </h1>,</h2>,</h3>,</h4>,</h5>,</h6>
Überschrift ausrichten: left (linksbündig; Voreinst.); right (rechtsbündig);
center (zentriert); justify (justiert); von vielen Browsern nicht unterstützt
class=
style=
id=
title=
dir=
lang=
(482)
onClick=
onDblClick=
onKeyDown=
onKeyPress=
onKeyUp=
onMouseDown=
onMouseMove=
onMouseOut=
onMouseOver=
onMouseUp=
align=
❏
(483)
In Überschriften können u.a. folgende Tags angegeben werden: Verweisziele (<a>), Bilder (<img>),
Zeilenvorschübe (<br>) und Texthervorhebungen (<b>, <i>, <cite>, <var> usw.
Formatieren einzelner Textabschnitte
❏
❏
❏
Feste Formatierung (Endtags müssen immer angegeben werden)
<b>, <i>, <u>
Fetter, kursiver bzw. unterstrichener Text
</b>, </i>, </u>
<big>, <small>, <tt>
Größerer, kleinerer bzw. nicht proport. Text
</big>, </small>, </tt>
<sub>, <sup>
Tiefer bzw. höher gestellter Text
</sub>, </sup>
<blink> (N)
Blinkender Text
</blink>
<s>, <strike>
Durchgestrichener Text (Veraltet)
</s>, </strike>
Logische Formatierung (überlassen Browser die Darstellung; Endtags müssen immer angegeben werden)
<abbr>, <acronym>
Abkürzung bzw. Akronym
</abbr>, </acronym>
<cite>
Zitat innerhalb einer Textpassage
</cite>
<code>, <samp>
Darstellung von Code (nicht proportionale Schrift)
</code>, </samp>
<dfn>, <kbd>
Begriffe (definition) bzw. Tastatureingaben (keyboard)
</dfn>, </kbd>
<em>, <strong>
Einfache (emphasis) bzw. starke Betonung
</em>, </strong>
<var>
Variablennamen
</var>
Benutzerdefinierte Formatierung
<span>. . . </span>
Benutzerdefinierte Formatierung
class=
style=
id=
title=
dir=
lang=
(482)
onClick=
onDblClick=
onKeyDown=
onKeyPress=
onMouseDown=
onMouseMove=
onMouseOut=
onMouseOver=
onKeyUp=
onMouseUp=
(483)
Zeilenumbrüche
<br>. . . <br/> Zeilenumbruch: class=, style=, id=, title= (482)
clear=richtung
[left|right|all] (482)
<nobr>. . . </nobr> Zeilenumbruch verhindern (I, N)
Bei Text, der sich in <nobr>...</nobr> befindet, findet kein automatischer Zeilenumbruch statt.
<wbr>. . . <wbr/> Zeilenumbruch nur bei überlangen Zeilen (I, N)
❏
Bei Texten in <nobr>...</nobr> können Zeilenumbrüche immer mit Tag <br> veranlaßt werden.
<wbr> bewirkt – anders als <br> – in <nobr>...</nobr> nicht unbedingt einen Zeilenumbruch,
sondern nur, wenn die Zeile länger als die Breite des Browserfensters ist.
465
20.5
Farben in HTML-Dokumenten
Farben können in HTML-Dokumenten auf zwei verschiedene Arten angegeben werden:
als Farbname (wie z. B. red, yellow, green usw.) oder als sechsstellige Hexadezimalzahl,
die den so genannten RGB-Wert festlegt.
RGB-Farben
Um eine Farbe in einem HTML-Dokument anzugeben, kann man statt eines vordefinierten Farbnamens (wie z. B. red, blue oder white) auch den Wert der Mischfarbe explizit
angeben. Ein solcher Farbwert ist als Hexadezimalzahl #rrggbb (mit sechs Hexadezimalziffern für den 24-Bit Wert) anzugeben. Für die beiden Ziffern rr ist also der Beitrag der
Farbe rot zur Mischfarbe im Bereich von 0 bis 255 (entspricht 00 bis FF im Hexadezimalsystem) anzugeben. Dasselbe gilt für gg (Beitrag von Grün) und bb (Beitrag von Blau). So
legt z. B. der Wert #00FF00 die Farbe Grün und der Wert #0000FF die Farbe Blau fest.
Vordefinierte Farbnamen
Abbildung 20.1 zeigt die 16 in HTML/XHTML vordefinierten Farbennamen.
Abbildung 20.1: Vordefinierte Farbnamen mit ihren RGB-Werten
Standard-Farben
Auf Systemen, die nur 256 Farben anzeigen können, werden Farben, die nicht darstellbar
sind, entweder in eine auf dem System darstellbare Farbe konvertiert oder es wird ein Verfahren namens dithering angewendet, bei dem die angeforderte Farbe durch nebeneinanderliegende Pixeln mit vorhandenen Farben versucht wird, nachzubilden. Beim dithering
muss man natürlich Qualitätsverluste in Kauf nehmen. Bei der Konvertierung dagegen
wird eine existierende Farbe genommen, die der angeforderten Farbe am nächsten liegt.
484
Die Standard-Farbpalette umfasst 216 Farben, wobei jeweils sechs Varianten für Rot, Grün
und Blau angeboten werden, die beliebig kombiniert werden können, so dass sich die Zahl
216 (6 x 6 x 6) ergibt. Abbildung 20.2 zeigt die Standard-Farbpalette der 216 Farben. Die
sechs Varianten jeder RGB-Komponente haben dabei die hexadezimalen Werte 00, 33,
66, 99, CC und FF, was den dezimalen Werten 0, 51, 102, 153, 204 und 255 entspricht.
Farben wie 006666 (dunkelgrün) und FF66FF (lila) existieren direkt in der StandardFarbpalette und müssen weder konvertiert noch mit dem dithering-Verfahren nachgebildet
werden. Es ist also empfehlenswert, Farben aus dieser Standard-Farbpalette zu benutzen.
Abbildung 20.2: Standard-Farbpalette der 216 Farben
485
Index
Symbole
<"
doctype> Tag . . . . . . 217
<a> Tag . . . . 115, 146, 472
<abbr> Tag . . . . . . . . . . 465
<acronym> Tag . . . . . . 465
<address> Tag . . . 34, 466
<applet> Tag . . . . 242, 474
<area> Tag . . . . . . 211, 476
<b> Tag . . . . . . . . . . 27, 465
<base> Tag . . . . . 228, 464
<basefont> Tag . . . 36, 467
<bdo> Tag . . . . . . . . . . . 463
<bgsound> Tag . 247, 474
<big> Tag . . . . . . . . 28, 465
<blink> Tag . . . . . . 29, 465
<blockquote> Tag 30, 466
<body> Tag . . . . . . 12, 463
<br> Tag . . . . . . . . . 23, 465
<button> Tag . . . 202, 479
<caption> Tag . . . . 78, 470
<center> Tag . 25, 83, 466
<cite> Tag . . . . . . . . 30, 465
<code> Tag . . . . . . 32, 465
<col> Tag . . . . . . . . 96, 470
<colgroup> Tag . . 96, 470
<comment> Tag . . . . . 463
<dd> Tag . . . . . . . . 57, 468
<del> Tag . . . . . . . . . . . 467
<dfn> Tag . . . . . . . . . . . 465
<dir> Tag . . . . . . . . 57, 468
<div> Tag . . . . . . . . . . . 289
<div> Tag . . . 24, 465, 492
<dl> Tag . . . . . . . . . 57, 468
<dt> Tag . . . . . . . . . 57, 468
<em> Tag . . . . . . . . 27, 465
<embed> Tag . . . 244, 474
<fieldset> Tag . . . 206, 480
<font> Tag . . . . 36, 37, 467
<form> Tag . . . . . 185, 477
<frame> Tag . . . . 137, 471
<frameset> Tag . 137, 471
<h1> Tag . . . . . . . . . 21, 465
<h2> Tag . . . . . . . . . 21, 465
<h3> Tag . . . . . . . . . 21, 465
<h4> Tag . . . . . . . . . 21, 465
<h5> Tag . . . . . . . . . 21, 465
<h6> Tag . . . . . . . . . 21, 465
<head> Tag . . . . . . 12, 463
<hr> Tag . . . . . . . . . 61, 466
<html> Tag . . . . . . 12, 463
<i> Tag . . . . . . . . . . 27, 465
<iframe> Tag . . . 177, 471
<ilayer> Tag . . . . 278, 481
<img> Tag . . . . . . . . . . . 101
<img> Tag . . . 46, 90, 210,
246, 475
<input> Tag . . . . . . . . 187,
191–193, 196, 200–202,
204, 478–480
<ins> Tag . . . . . . . . . . . . 467
<isindex> Tag . . . 229, 464
<kbd> Tag . . . . . . . 32, 465
<label> Tag . . . . . 206, 480
<layer> Tag . . . . . 267, 481
<legend> Tag . . . 206, 480
<li> Tag . . . . . . 43, 49, 468
<link> Tag . 228, 280, 283,
464, 490, 491
<listing> Tag . . . . . . . . 466
<map> Tag . 210, 211, 476
<marquee> Tag . 247, 475
<menu> Tag . . . . . 57, 468
<meta> Tag 218, 283, 464,
491
<multicol> Tag . . 265, 481
<nobr> Tag . . . . . . 40, 465
<noembed> Tag . 245, 474
<noframes> Tag 172, 471
<noscript> Tag . . 256, 480
<object> Tag . . . . 232, 473
<ol> Tag . . . . . . . . . 49, 468
<optgroup> Tag . . . . . 477
<option> Tag . . . 190, 477
<p> Tag . . . . . . . . . . 24, 465
<param> Tag . . . 236, 474
<pre> Tag . . . . . . . . 32, 466
<q> Tag . . . . . . . . . . . . . 466
<s> Tag . . . . . . . . . . . . . 465
<samp> Tag . . . . . . 32, 465
<script> Tag . . . . 251, 480
<select> Tag . . . . 189, 477
<small> Tag . . . . . . 28, 465
<spacer> Tag . . . 263, 481
<span> Tag 301, 304, 465,
495, 496
<strike> Tag . . . . . 29, 465
<strong> Tag . . . . . 27, 465
<style> Tag 279, 280, 464,
490
<sub> Tag . . . . . . . 29, 465
<sup> Tag . . . . . . . 29, 465
<table> Tag . . . . . . 67, 469
<tbody> Tag . . . . . 92, 470
<td> Tag . . . . . . . . . 67, 469
523
Index
<textarea> Tag . . 188, 478
<tfoot> Tag . . . . . . 92, 470
<th> Tag . . . . . . . . . 78, 469
<thead> Tag . . . . . 92, 470
<title> Tag . . . . . . . 12, 464
<tr> Tag . . . . . . . . . 67, 469
<tt> Tag . . . . . . . . . . 32, 465
<u> Tag . . . . . . . . . . 27, 465
<ul> Tag . . . . . . . . . 43, 468
<var> Tag . . . . . . . . 32, 465
<wbr> Tag . . . . . . . 40, 465
<xmp> Tag . . . . . . . . . . 466
Überschriften . . . . 21, 465
Ausrichtung . . . . . . . . 22
Größe . . . . . . . . . . . . . . 21
Graphik . . . . . . . . . . . 113
Stufe . . . . . . . . . . . . . . . 21
Übung
homepage1.htm . . . 20
homepage10.htm 215
homepage6.htm . 113
homepage7.htm . 133
homepage8.htm . 207
homepage9.htm . 182
media3.htm . . . . . . 249
A
Abkürzung . . . . . . . . . . 465
Absatz . . . . . . . . . . . 24, 465
Ausrichten . . . . . 24, 465
Zentrieren . . . . . 25, 466
ActiveX-Controls . . . . 240
Adress-Darstellung . . 34,
466
Adresse . . . . . . . . . . 34, 466
Akronym . . . . . . . . . . . . 465
Applets 235, 242, 473, 474
Aufzählung . . . . . . 43, 468
Einfach . . . . . . . . 43, 468
Glossar . . . . . . . . 57, 468
Menülisten . . . . 57, 468
Numeriert . . . . . 49, 468
Verzeichnislisten . . . 57,
468
Auswahllisten . . 189, 477
524
B
Bilder
siehe Graphik . . . . . . 90
Blinkende Schrift . 29, 465
Button
Check- . . . . . . . . 192, 478
Graphik- . . . . . . 201, 479
Pushbutton . . . 202, 479
Radio- . . . . . . . . 191, 478
RESET- . . . . . . . 200, 479
SUBMIT- . 193, 196, 479
C
Cascading Style-Sheets
siehe CSS . . . . . . . . . . 279
Checkbutton . . . . 192, 478
Client-Pull-Dokument . . .
224
Client-Server . . . . . . . . . . 7
Code . . . . . . . . 32, 465, 466
Code-Darstellung 32, 465
Courier-Schrift . . . 32, 466
CSS . . . . . . . . . . . . . 279, 489
<div> Tag . . . . 289, 492
<link> Tag . . . . 280, 490
<meta> Tag . . . 283, 491
<span> Tag . . 301, 304,
495, 496
<style> Tag . . 279, 280,
490
Übergroße Elemente . . .
388, 506
Abstand (innen) . . 346,
503
Anzeigebereich
eingrenzen . 387, 506
Attribut-orientierte
Formate . . . . 295, 494
Ausgabemedium . 283,
491
Bildlaufleiste . 400, 507
Breite . . . . . . . . . 383, 505
Definieren (global) 280,
490
Definieren (lokal) . 279,
490
Direkte Formate . . 303,
496
Eigenschaften . 310, 498
Farbangaben . . 307, 497
Format . . . . . . . 285, 492
-Unterklassen . . 287, 492
Attribut-orientiert . 295,
494
Direkt . . . . . . . . . 303, 496
einzelne Tags . . 303, 496
geschachtelt . . . 289, 493
Pseudo- . . . 299, 374, 495
Text . . . . . . . . . . . . 304, 496
unabhängig . . . . 297, 494
geschachtelte Formate .
289, 493
Groß-/Kleinschreibung
319, 499
Höhe . . . . . . . . . 383, 505
Hintergrund
Bild . . . . . . . . . . . . 349, 503
Farbe . . . . . . . . . . 347, 503
Innenabstand . 346, 503
Klein-/Großschreibung
319, 499
Kommentar . . . 283, 490
Layout . . . . . . . . 395, 508
Listen . . . . . . . . . 359, 501
Aufzählungssymbol . . . .
359, 365, 501
Numerierungsart . . 359,
501
Maßangaben . . 305, 496
Mausform . . . . 398, 507
Platzhalter . . . . 390, 506
Positionieren . 380, 505
Pseudoformate . . . 299,
374, 495
Rahmen . . . . . . 332, 502
Dicke . . . . . . . . . . 333, 502
Farbe . . . . . . . . . . 340, 502
Typ . . . . . . . . . . . . 336, 502
Randabstand . 322, 500
Schichten . . . . . 384, 505
Schrift . . . . . . . . 310, 498
Art . . . . . . . . . . . . 314, 498
Dehnung . . . . . . 316, 499
Gewicht . . . . . . . 311, 498
Größe . . . . . . . . . . 312, 498
Laufweite . . . . . . 316, 499
Stil . . . . . . . . . . . . 310, 498
Variante . . . . . . . 311, 498
Index
Scrollbar . . . . . . 400, 507
Seite
Größe . . . . . . . . . . 395, 508
Layout . . . . . . . . . 395, 508
Ränder . . . . . . . . 395, 508
Umbruch . . . . . . 395, 508
Sound . . . . . . . . 402, 510
Sprachausgabe 402, 510
Sprache festlegen . 283,
491
Style-Sheets . . . 310, 498
Tabellen . . . . . . 366, 504
Text
-umbruch . . . . . . 331, 500
ausrücken . . . . . 327, 500
ausrichten (horizontal) .
330, 500
ausrichten (vertikal) . . . .
328, 500
Dekoration . . . . 318, 499
einrücken . . . . . . 327, 500
Farbe . . . . . . . . . . 320, 499
Fluß . . . . . . . . . . . 385, 505
Formatierung . . 304, 496
Schatten . . . . . . . 321, 499
Unabhängige Formate .
297, 494
Wortabstand . . 317, 499
Zeichenabstand . . . 316,
499
Zeilenhöhe . . . 321, 500
D
Dokument
Client-Pull . . . . . . . . 224
Header . . . . . . . . . . . . 217
Inhalt . . . . . . . . . . . . . 220
Kopfteil . . . . . . . . . . . 217
Name . . . . . . . . . . . . . 220
Server-Push . . . . . . . 226
Stichwörter . . . . . . . . 221
Suchinfos . . . . . . . . . 221
Suchprogramme . . 221
Typ . . . . . . . . . . . . . . . 217
Zusatzinformationen . .
218
Durchgestrichene Schrift
29, 465
E
Event-Handler . . 257, 483
F
Farben . . . . . . . . . . . 17, 484
Standard . . . . . . . 19, 484
Farbige Schrift . . . 36, 467
Fette Schrift . . . . . . 27, 465
file-Protokoll . . . . . . . . 128
Flash-Dateien . . . . . . . 238
Formular . . . . . . . 185, 477
Übertragungsmethode
186, 477
Auswahllisten 189, 477
Beschriftung . . 206, 480
Checkbutton . . 192, 478
Dateiauswahl-Box 202,
479
Definition . . . . . 185, 477
Eingabefelder
(einzeilig) . . 187, 478
Eingabefelder
(mehrzeilig) 188, 478
Filedialog-Box 202, 479
Graphikbutton 201, 479
Gruppierung . 206, 480
Pushbutton . . . 202, 479
Radiobutton . . 191, 478
RESET-Button 200, 479
Senden von Dateien . . .
202, 479
SUBMIT-Button . . . 193,
196, 479
Unsichtbare Elemente .
204, 480
Versandadresse . . . 186,
477
Frames . . . . . . . . . 137, 471
<noframes> Tag . . 172,
471
_blank . . . . . . . . . . . . 153
_parent . . . . . . . . . . . . 153
_self . . . . . . . . . . . . . . . 153
_top . . . . . . . . . . . . . . . 154
Abstände . . . . . . . . . . 165
Bildlaufleiste . . . . . . 145
Eingebettet . . . 177, 471
feste Größe . . . . . . . . 171
Geschachtelt . . . . . . 142
Horizontal . . . . . . . . 140
Hyperlinks . . . . . . . . 146
Konfiguration . . . . . 158
Rahmen . . . . . . . . . . . 167
Rahmen (farbig) . . . 169
Scrollbars . . . . . . . . . 145
Vertikal . . . . . . . . . . . 138
vordefinierte Namen . .
153
ftp-Protokoll . . . . . . . . 129
G
Glossar . . . . . . . . . . 57, 468
gopher-Protokoll . . . . 132
Größere Schrift . . . 28, 465
Graphik . . . . . . . . 101, 475
Überschrift . . . . . . . . 113
Abstände . . . . . . . . . . 109
Alternativer Text . . 103
Ausrichten . . . . . . . . 107
Beschriften . . . . . . . . 108
Hintergrundbild . . 112
Hyperlinks . . . 122, 123,
125
Image Maps . . 209, 476
Rahmen . . . . . . . . . . . 111
Skalieren . . . . . . . . . . 104
Tabellenzellen . . . . . . 90
Verweissensitiv . . . 209,
234, 476
Graphikbutton . . 201, 479
H
Header . . . . . . . . . . . . . . 217
Hochgestellte Schrift . 29,
465
HTML . . . . . . . . . . . . . . . . . 7
HTML-Befehl
Struktur . . . . . . . . . . . . 11
HTML-Datei
absatz.htm . . . . . . . 24
absatz2.htm . . . . . 25
absatz3.htm . . . . . 26
address.htm . . . . . 35
aufzaehl1.htm . . . 44
aufzaehl10.htm . 53
aufzaehl11.htm . 54
aufzaehl12.htm . 55
aufzaehl13.htm . 57
525
Index
bdo.htm . . . . . . . . . . 463
beforeafter.htm . . .
378
bestell.htm . . . . 254
cascad1.htm . . . . 282
code.htm . . . . . . . . . 34
colgroup.htm . . . . 96
colgroup2.htm . . . 97
collapse.htm . . . 371
css1.htm . . . . . . . . 286
css10.htm . . . . . . . 308
css11.htm . . . . . . . 311
css12.htm . . . . . . . 314
css13.htm . . . . . . . 315
css14.htm . . . . . . . 316
css15.htm . . . . . . . 318
css16.htm . . . . . . . 318
css17.htm . . . . . . . 320
css18.htm . . . . . . . 320
css19.htm . . . . . . . 322
css2.htm . . . . . . . . 287
css20.htm . . . . . . . 324
css21.htm . . . . . . . 325
css22.htm . . . . . . . 327
css23.htm . . . . . . . 329
css24.htm . . . . . . . 330
css25.htm . . . . . . . 331
css26.htm . . . . . . . 334
css26a.htm . . . . . . 335
css27.htm . . . . . . . 337
css28.htm . . . . . . . 338
css28a.htm . . . . . . 339
css29.htm . . . . . . . 341
css29a.htm . . . . . . 342
css29b.htm . . . . . . 343
css3.htm . . . . . . . . 289
css30.htm . . . . . . . 344
css31.htm . . . . . . . 346
css32.htm . . . . . . . 348
css33.htm . . . . . . . 350
css34.htm . . . . . . . 352
526
css35.htm . . . . . . . 354
css35a.htm . . . . . . 356
css36.htm . . . . . . . 357
css36a.htm . . . . . . 358
css37.htm . . . . . . . 361
css37a.htm . . . . . . 362
css38.htm . . . . . . . 364
css39.htm . . . . . . . 365
css4.htm . . . . . . . . 290
css40.htm . . . . . . . 366
css41.htm . . . . . . . 368
css42.htm . . . . . . . 377
css43.htm . . . . . . . 381
css44.htm . . . . . . . 382
css45.htm . . . . . . . 383
css46.htm . . . . . . . 384
css47.htm . . . . . . . 386
css48.htm . . . . . . . 388
css4a.htm . . . . . . . 292
css4b.htm . . . . . . . 293
css5.htm . . . . . . . . 297
css5a.htm . . . . . . . 299
css6.htm . . . . . . . . 299
css6a.htm . . . . . . . 302
css7.htm . . . . . . . . 303
css8.htm . . . . . . . . 304
css9.htm . . . . . . . . 306
cssattrib.htm . 295
cursor.htm . . . . . . 398
display1.htm . . . 393
display2.htm . . . 394
emptycell.htm . 373
events.htm . . . . . . 258
farbbalk.htm . . . 107
flagliste.htm . 151
font1.htm . . . . . . . . 36
font2.htm . . . . . . . . 38
font3.htm . . . . . . . . 38
font4.htm . . . . . . . . 39
formular1.htm . 188
formular2.htm . 189
formular3.htm . 190
formular4.htm . 193
formular5.htm . 194
formular6.htm . 202
formular6.php . 197
formular7.htm . 203
formular8.htm . 205
frame1.htm . . . . . . 140
frame10.htm . . . . 160
frame11.htm . . . . 166
frame12.htm . . . . 168
frame13.htm . . . . 168
frame14.htm . . . . 170
frame15.htm . . . . 171
frame16.htm . . . . 172
frame17.htm . . . . 179
frame18.htm . . . . 180
frame2.htm . . . . . . 142
frame3.htm . . . . . . 142
frame4.htm . . . . . . 144
frame5.htm . . . . . . 145
frame6.htm . . . . . . 147
frame7.htm . . . . . . 150
frame8.htm . . . . . . 154
frame9.htm . . . . . . 158
graphik1.htm . . . 102
graphik10.htm . 113
homepage10.htm 215
homepage6.htm . 113
homepage7.htm . 133
homepage8.htm . 207
homepage9.htm . 182
htmlerst.htm . . . . 13
htmlerst2.htm . . . 23
htmlfarbe.htm . . . 18
hyper1.htm . . . . . . 116
hyper2.htm . . . . . . 119
hyper3.htm . . . . . . 121
hyper4.htm . . . . . . 122
hyper5.htm . . . . . . 123
hyper6.htm . . . . . . 124
hyper7.htm . . . . . . 128
hyper8.htm . . . . . . 130
hyper9.htm . . . . . . 132
Index
hyperinline.htm . . .
127
hypmehrframes.htm
162
imagmap1.htm . . . 211
insdel.htm . . . . . . 467
label.htm . . . . . . . 206
layer1.htm . . . . . . 268
layer2.htm . . . . . . 270
layer3.htm . . . . . . 270
layer4.htm . . . . . . 271
layer5.htm . . . . . . 273
layer6.htm . . . . . . 274
layer7.htm . . . . . . 275
layer8.htm . . . . . . 276
layer9.htm . . . . . . 278
linie1.htm . . . . . . . 61
linie2.htm . . . . . . . 62
linie3.htm . . . . . . . 64
linie4.htm . . . . . . . 65
linie5.htm . . . . . . . 65
margin.htm . . . . . . 323
media1.htm . . . . . . 245
media2.htm . . . . . . 245
media3.htm . . . . . . 249
mehrspalt.htm . . . 71
meta1.htm . . . . . . . 219
meta2.htm . . . . . . . 222
meta3.htm . . . . . . . 224
meta4.htm . . . . . . . 225
meta5.htm . . . . . . . 226
meta5a.htm . . . . . . 226
meta5b.htm . . . . . . 226
multicol.htm . . . 266
mwst.htm . . . . . . . . 253
nobr.htm . . . . . . . . . 40
noscript.htm . . . 256
object1.htm . . . . 232
object2.htm . . . . 234
object3.htm . . . . 236
object4.htm . . . . 236
object4a.htm . . . 237
object5.htm . . . . 238
object6.htm . . . . 240
object7.htm . . . . 241
overflow.htm . . . 390
pseudo.htm . . . . . . 375
rechner.htm . . . . 259
rechner2.htm . . . 261
rgbapplet.htm . 243
scrollbar.htm . 401
sonderzeich.htm 16
spacer.htm . . . . . . 264
tablayout.htm . 369
table1.htm . . . . . . . 67
table10.htm . . . . . 83
table11.htm . . . . . 85
table12.htm . . . . . 86
table13.htm . . . . . 88
table14.htm . . . . . 88
table15.htm . . . . . 90
table16.htm . . . . . 90
table17.htm . . . . . 91
table2.htm . . . . . . . 69
table3.htm . . . . . . . 69
table4.htm . . . . . . . 75
table5.htm . . . . . . . 75
table6.htm . . . . . . . 77
table7.htm . . . . . . . 78
table8.htm . . . . . . . 79
table9.htm . . . . . . . 83
tbody.htm . . . . . . . . 93
texthervor.htm . 29
ueberschrift.htm .
22
ueberschrift2.htm
22
urlaub.htm . . . . . . 126
verweise.htm . . . 147
visibility.htm 391
zitat.htm . . . . . . . . 30
HTML-Dokument
Struktur . . . . . . . . . . . . 11
HTML-Tag
Struktur . . . . . . . . . . . . 11
HTTP . . . . . . . . . . . . . . . . . . 8
http-Protokoll . . . . . . . 127
Hyperlinks . . . . . 115, 472
als Graphiken . . . . . 122
auf Graphiken . . . . . 123
Farben . . . . . . . . . . . . 121
Frames . . . . . . . . . . . . 146
Graphisch auf
Graphiken . . . . . . 125
in andere Dokumente .
118
ins Web . . . . . . . . . . . 119
Lokal . . . . . . . . . . . . . . 115
nicht-lokal . . . . . . . . 119
I
Image Maps . . . . 209, 476
Client-seitig . . . . . . . 210
Server-seitig . . . . . . . 214
Inline-Layer . . . . 278, 481
J
Java-Applets . . . 235, 242,
473, 474
JavaScript . . . . . . . 251, 390
javascript-Protokoll . . 132
K
Kleinere Schrift . . 28, 465
Kommentar . . . . . . . . . . 19
Kopfteil . . . . . . . . . . . . . 217
Kursive Schrift . . . 27, 465
L
Layer . . . . . . . . . . . 278, 481
Inline . . . . . . . . . 278, 481
M
mailto-Protokoll . . . . . 131
Menülisten . . . . . . . 57, 468
MIME-Typen . . . . . . . . 520
Multimedia 231, 244, 473
N
news-Protokoll . . . . . . 130
Nichtproportionale
Schrift . . . . . . . 32, 465
P
Plugin-Konzept . . . . .
Protokoll
file . . . . . . . . . . . . . . . .
ftp . . . . . . . . . . . . . . . .
gopher . . . . . . . . . . . .
http . . . . . . . . . . . . . . .
javascript . . . . . . . . .
mailto . . . . . . . . . . . . .
news . . . . . . . . . . . . . .
telnet . . . . . . . . . . . . . .
Typen . . . . . . . . . . . . .
231
128
129
132
127
132
131
130
132
127
R
Radiobutton . . . . 191, 478
527
Index
RESET-Button . . 200, 479
RGB-Farben . . . . . . 17, 484
S
Schrift
Betonung . . . . . . 27, 465
Blinkend . . . . . . . 29, 465
Code . . . . . . . . . . 32, 465
Courier . . . . . . . . 32, 466
Durchgestrichen . . . 29,
465
Farbe . . . . . . . . . . 36, 467
Fett . . . . . . . . . . . . 27, 465
Größe . . . . . . . . . . 36, 467
größer . . . . . . . . . 28, 465
Hochgestellt . . . 29, 465
kleiner . . . . . . . . . 28, 465
Kursiv . . . . . . . . . 27, 465
Nichtproportional . 32,
465
Tastatureingaben . . . 32,
465
Tiefgestellt . . . . . 29, 465
Unformatiert . . . 32, 466
Unterstrichen . . 27, 465
Variablenname . 32, 465
Scripts . . . . . . . . . . . . . . . 251
Server-Push-Dokument . .
226
Skripte . . . . . . . . . . . . . . 251
Sonderzeichen . . . 16, 513
Griech. Buchstaben 516
HTML 3.2 . . . . . . . . . 513
Mathematische
Symbole . . . . . . . . 517
Pfeilsymbole . . . . . . 518
Sonstige . . . . . . . . . . . 519
Technische Symbole . . .
518
Standard-Farben . 19, 484
Stichwörter . . . . . . . . . . 221
Style Sheets
siehe CSS . . . . . . . . . . 279
SUBMIT-Button 193, 196,
479
Suchinformationen . . 221
T
Tabellen . . . . . . . . . . 67, 469
528
Ausrichten . . . . . 83, 469
Beschriftung . . . 78, 470
Breite . . . . . . . . . . 73, 469
Fuß . . . . . . . . . . . . 92, 470
Gitternetzlinien 89, 469
Höhe . . . . . . . . . . 75, 469
Hintergrundbild . . . 88,
469
Hintergrundfarbe . . 86,
469
HTML-4 Erweiterungen
92, 96, 470
Kopf . . . . . . . . . . . 92, 470
Kopfzeile . . . . . . 78, 469
Rahmen . . . . 68, 72, 469
Rahmenfarbe . . 89, 469
Randabstand . . . 69, 469
Seitengestaltung . . . . 91
Spaltengruppe . . . . 470
Zeile . . . . . . . . . . . 67, 469
Zelle . . . . . . . 67, 77, 469
Zellenbreite . . . . 77, 469
Zellenhöhe . . . . . 77, 469
Tabellenzellen
Ausrichten . . . . . 81, 469
Bilder . . . . . . . . . . 90, 469
Graphiken . . . . . 90, 469
Hintergrundbild . . . 88,
469
Hintergrundfarbe . . 87,
469
Mehrspaltig . . . . 79, 469
Mehrzeilig . . . . . 79, 469
TCP/IP . . . . . . . . . . . . . . . . 8
telnet-Protokoll . . . . . . 132
Text
Abkürzung . . . . . . . . 465
Akronym . . . . . . . . . . 465
Betonung . . . . . . 27, 465
Blinkend . . . . . . . 29, 465
Code . . . . . . 32, 465, 466
Courier . . . . . . . . 32, 466
Definition . . . . . . . . . 465
465
Farbe . . . . . . . . . . 36, 467
Fett . . . . . . . . . . . . 27, 465
Größe . . . . . . . . . . 36, 467
größer . . . . . . . . . 28, 465
Hervorheben . . . . . . . 27
kleiner . . . . . . . . . 28, 465
Kursiv . . . . . . . . . 27, 465
465
465
Tiefgestellte Schrift . . . 29,
465
Trennlinie . . . . . . . . 61, 466
U
Umlaute . . . . . . . . . . . . . . 16
Unterstrichene Schrift 27,
465
URI . . . . . . . . . . . . . . . . . . . . 9
URL . . . . . . . . . . . . . . . . . . . 9
URN . . . . . . . . . . . . . . . . . . 9
V
Verweise
siehe Hyperlinks . . 115
Verzeichnislisten . 57, 468
Video . . . . . . . . . . . . . . . 246
W
W3C . . . . . . . . . . . . . . . . . . .
Web . . . . . . . . . . . . . . . . . . .
Web-Browser . . . . . . . . . .
Web-Client . . . . . . . . . . . .
Web-Server . . . . . . . . . . . .
WWW . . . . . . . . . . . . . . . . .
3
7
8
8
8
7
X
XHTML . . . . . . . . 451, 486
XML . . . . . . . . . . . . . . . . 411
#PCDATA . . . . . . . . . 426
Attribute . . . . . . . . . . 432
Baumstruktur . . . . . 420
CDATA . . . . . . . . . . . 417
CSS . . . . . . . . . . . . . . . 446
Dateinamen . . . . . . . 424
Dokumenttyp-Definition
413, 425
Index
Dokumenttyp-Deklaration
415
DTD . . . . . . . . . . 413, 425
Element-Definition 425
Elementtypen . . . . . 425
Entities . . . . . . . . . . . . 440
Gültigkeit . . . . . . . . . 419
IGNORE . . . . . . . . . . 425
INCLUDE . . . . . . . . . 425
Kommentar . . . . . . . 417
Namensräume . . . . 422
Namensregeln . . . . . 417
Notationen . . . . . . . . 445
Regeln . . . . . . . . . . . . 417
Sonderzeichen . . . . 424
Validierung . . . . . . . 419
Wohlgeformtheit . . 419
XML-Datei (Aufbau) . .
414
Z
Zeichen
Betonung . . . . . . 27, 465
Blinkend . . . . . . . 29, 465
Code . . . . . . . . . . 32, 465
Courier . . . . . . . . 32, 466
465
Farbe . . . . . . . . . . 36, 467
Fett . . . . . . . . . . . . 27, 465
Größe . . . . . . . . . . 36, 467
größer . . . . . . . . . 28, 465
kleiner . . . . . . . . . 28, 465
Kursiv . . . . . . . . . 27, 465
465
465
Zeilenumbrüche . 23, 465
Zitate . . . . . . . . 30, 465, 466
Zusatzinformationen 218
529

Helmut Herold: Das HTML/XHTML-Buch

Transcrição

Documentos relacionados

Modernes Webdesign

HTML5 IN DER PRAXIS: RELAUNCH FÜR UNIVERSAL MUSIC

Blatt 5 – Digitale Medien - Medieninformatik

WIR SUCHEN CSS-CRACK (m/w) AB JANUAR 2013

Presse Roddy Frame Tour 2015 PDF

AviStack - Sternfreunde Breisgau eV

java script xsl zaehler

Küchenbox / Kitchen cabinet 715150 / 715260 / 728660

Webseitengestaltung mit (X)HTML und CSS

Reha-Zentrum Todtmoos Todtmoos