Die kleine HTML

Transcrição

Die kleine HTML

Universitätsrechenzentrum
Thomas Feuerstack
Jens Vieler
Abt. Wiss. Anwendungen
Die kleine HTML-Schule
A/005/9802
© FernUniversität, Februar 1998
Titelbild aus: Le petit Nicolas, Edition Denoël, Paris
INHALTSVERZEICHNIS
iii
Inhaltsverzeichnis
I Basics
1
1 Willkommen bei HTML – aber was ist das?
3
1.1
Die pure Definiton? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
1.2
Ein grundsätzliches Problem austauschbarer Dokumente . . . . . . . . . . . . . . .
4
1.3
Marken statt Formate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
1.4
Standards oder Chaos? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
1.4.1
Die Vorteile der Standardisierung. . . . . . . . . . . . . . . . . . . . . . . . .
6
1.4.2
. . . und das daraus resultierende Chaos . . . . . . . . . . . . . . . . . . . . .
6
Die Wahl des richtigen Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
1.5
2 Formatelemente
9
2.1
Das Prinzip der Klammerung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
2.2
Ein komplettes HTML-Dokument . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
2.3
Die Bedeutung der Marken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
2.4
Darstellung von Sonderzeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
2.5
Ansichtssachen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3 Hyperlinks
17
3.1
...zu anderen HTML-Dokumenten . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
3.2
...zu bestimmten Stellen im gleichen HTML-Dokument . . . . . . . . . . . . . . . .
19
3.3
...zu bestimmten Stellen in anderen HTML-Dokumenten . . . . . . . . . . . . . . .
19
3.4
...zu anderen Informationsdiensten . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
4 Weitere Formatelemente
21
4.1
Blockquote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
4.2
Pre und Samp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
4.3
Hoch- und Tiefstellung von Zeichen . . . . . . . . . . . . . . . . . . . . . . . . . .
22
4.4
Horizontale Linien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
iv
INHALTSVERZEICHNIS
4.5
Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
4.6
Bestimmung von Fonts und Schriftgrößen . . . . . . . . . . . . . . . . . . . . . . .
24
4.7
Einfügen von Zitierungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
4.8
Erstellen eigener Formatierungsmarken . . . . . . . . . . . . . . . . . . . . . . . .
26
5 Listen
29
5.1
Numeriert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
5.2
Unnumeriert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
5.3
Listenüberschriften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
5.4
Beschreibend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
5.5
Verschachtelt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
6 Inline Images
35
7 Externe Anwendungen
39
II Erweiterungen und Zusätze
41
8 Clickable Images
43
8.1
Die Einbindung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
8.2
Das Map-File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
8.3
Das Resultat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
9 Formulare
9.1
9.2
47
Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
9.1.1
Normale Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
9.1.2
Geheime Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
48
9.1.3
2-dimensionale Eingabefelder . . . . . . . . . . . . . . . . . . . . . . . . .
48
Auswahl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
9.2.1
Mehrfache Auswahl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
9.2.2
Einfach ankreuzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
9.2.3
Auswahl mit Pull-Down-Menu . . . . . . . . . . . . . . . . . . . . . . . . .
51
INHALTSVERZEICHNIS
9.3
Aktions-Knöpfe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10 Tabellen
v
51
55
10.1 „Klassische“ Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
55
10.1.1 Das „Grundmodell“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
10.1.2 Formatierung der Zellen und Erstellen der Überschrift . . . . . . . . . . . .
57
10.1.3 Allgemeine Tabellenformatierungen . . . . . . . . . . . . . . . . . . . . . .
58
10.2 Tabellen als „ordnende“ Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
10.3 Kompatibilitätsprobleme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
11 Counter in HTML-Dokumenten
63
12 Fließtext um Grafiken
65
13 Backgrounds – Hintergrundbilder und -farben
67
14 Frames
69
14.1 Soll ich oder soll ich nicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
14.2 Ein neues HTML-Gerüst: <FRAMESET> ersetzt <BODY> . . . . . . . . . . . . . .
70
14.3 Fensterkreuze: Zeilen und Spalten gemischt . . . . . . . . . . . . . . . . . . . . . .
73
14.4 Größenangaben: fest und variabel . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
14.5 Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
14.6 Was wird aus den Fensterlosen? . . . . . . . . . . . . . . . . . . . . . . . . . . . .
79
III Anhang
81
A Konverter und Editoren
83
A.1 LaTeX2HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
84
A.2 SoftQuad HoTMetaL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
A.3 The Ant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
91
A.4 Xemacs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
A.5 Netscapes Composer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
95
vi
INHALTSVERZEICHNIS
B Farbskala
97
C Elemente von HTML
99
D Liste der Sonderzeichen
101
E Index
103
ABBILDUNGSVERZEICHNIS
vii
Abbildungsverzeichnis
1
Der ursprünglich erfasste Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
2
Der frisch formatierte Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
3
Der mit Marken versehene Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
4
Der formatierte Text mit neuer Markenzuweisung. . . . . . . . . . . . . . . . . . . .
5
5
Unser Beispieltext in „echter“ HTML-Notierung. . . . . . . . . . . . . . . . . . . .
9
6
Unterschiedliche Markenposition führen zum gleichen Layout. . . . . . . . . . . . .
10
7
Das vervollständigte Beispiel und seine Darstellung in Netscape. . . . . . . . . . . .
11
8
Das obligatorische HTML-Gerüst. . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
9
Laden einer HTML-Datei. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
10
So sieht der Hyperlink mit dem WWW-Browser aus. . . . . . . . . . . . . . . . . .
18
11
Ein hervorgehobener Absatz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
12
Vorformatierter Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
13
Hoch- und Tiefstellung von Zeichen . . . . . . . . . . . . . . . . . . . . . . . . . .
22
14
Horizontale Trennlinien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
15
Am Ende jedes Dokumentes sollte der Autor stehen. . . . . . . . . . . . . . . . . .
24
16
Veränderung von Schrifttyp und -größe . . . . . . . . . . . . . . . . . . . . . . . . .
25
17
Zitieren international leichtgemacht . . . . . . . . . . . . . . . . . . . . . . . . . .
25
18
Kombinieren von Formatmarken . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
19
Numerierte, unnumerierte und beschreibende Listen. . . . . . . . . . . . . . . . . .
31
20
Verschachtelte und gemischte Listen. . . . . . . . . . . . . . . . . . . . . . . . . . .
32
21
Inline Image. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
22
Inline Images ausgerichtet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
37
23
Ein „Klick“ auf den Hyperlink, und ein MPEG-Browser zeigt die Videosquenz. . . .
39
24
Source-Code des Map-Files zum Häwelmann-Bild . . . . . . . . . . . . . . . . . .
44
25
Das Clickable Image fertig eingebunden. . . . . . . . . . . . . . . . . . . . . . . . .
45
26
Einfaches Texteingabefeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
48
27
Geheime Eingaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
28
Mehrzeilige Eingaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
viii
29
Mehrfach ankreuzen mit CHECKBOX . . . . . . . . . . . . . . . . . . . . . . . . .
50
30
Nur einmal ankreuzen mit RADIO . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
31
Auswählen mit SELECT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
32
Abschicken des Formulares bzw. Eingaben löschen. . . . . . . . . . . . . . . . . . .
53
33
Die Besetzungsliste des Häwelmann, eine „klassische“ Tabelle. . . . . . . . . . . . .
56
34
Die Besetzungsliste – ein erster Versuch. . . . . . . . . . . . . . . . . . . . . . . . .
57
35
Die Besetzungsliste – Formatierung der Zellen. . . . . . . . . . . . . . . . . . . . .
58
36
Der originale HTML-Code zur Besetzungsliste des Häwelmann. . . . . . . . . . . .
59
37
Ein komplexeres Beispiel zur Verwendung von Tabellen. . . . . . . . . . . . . . . .
60
38
Der nph-count - Zähler im HTML-Dokument. . . . . . . . . . . . . . . . . . . . . .
63
39
Fließtext um Grafiken. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
40
Neuer Absatz unter dem Bild mit Fließtext. . . . . . . . . . . . . . . . . . . . . . .
66
41
Hintergrundbilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
42
Hintergrundfarbe schwarz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
43
Fenstertechnik mit HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
44
<FRAMESET> ersetzt das bekannte <BODY> . . . . . . . . . . . . . . . . . . . .
70
45
steuerdatei.html: Aufteilung in Zeilen mit ROWS. . . . . . . . . . . . . . . .
71
46
Aufteilung in Spalten mit COLS. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
47
ROWS und COLS kombiniert . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
48
<FRAMESET>s geschachtelt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
49
Feste und variable Größenangaben im <FRAMESET> . . . . . . . . . . . . . . . .
75
50
Das rechte Fenster ist doppelt so breit wie das linke. . . . . . . . . . . . . . . . . . .
76
51
Der Einsatz von Frames als Navigationsleisten . . . . . . . . . . . . . . . . . . . . .
77
52
Querverbindungen: Im linken Fenster wird bestimmt, was rechts geladen wird. . . .
78
53
Aus Gründen der Fairness: Hinweis für Fensterlose. . . . . . . . . . . . . . . . . . .
79
54
(a) Das LATEX-Original. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
86
55
(b) . . . LaTeX2HTML bei der Arbeit. . .
. . . . . . . . . . . . . . . . . . . . . . . .
87
56
(c) . . . und das HTML-Dokument nach der Konvertierung. . . . . . . . . . . . . . . .
88
57
Eine HTML-Datei, erstellt mit HoTMetaL. . . . . . . . . . . . . . . . . . . . . . .
90
ix
58
Nochmal die HTML-Datei, diesmal mit The Ant. . . . . . . . . . . . . . . . . . . .
91
59
Konfiguration des Xemacs-Popup-Menues und seine anschließende Darstellung. . . .
94
60
Netscapes Editor Composer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
95
x
Teil I
Basics
1 Willkommen bei HTML – aber was ist das?
Nun, ich denke eine gewisse Vorstellung von HTML werden Sie schon besitzen, anderenfalls hätten
Sie nicht zur vorliegenden Broschüre gegriffen. Bevor wir uns aber jetzt gemeinsam in die hochschlagenden Wellen des Internets stürzen, sollten wir uns auf ein gemeinsames Vokabular einigen, damit
wir im weiteren Verlauf dieses Skriptes keine Verständnisprobleme erzeugen. Lassen Sie mich deshalb
vor dem Beginn einige wenige(!) Worte vorausschicken.
1.1
Die pure Definiton?
HTML ist grundsätzlich von oben herab betrachtet nichts weiter als die Abkürzung von H yperT ext
M arkup L anguage. Sollten Sie durch die vollständige Schreibweise etwas verunsichert sein, so lassen
Sie sich beruhigen – die Erklärung dieses Terms ist simpler als es im ersten Moment den Anschein
hat. Sehen wir deshalb einmal etwas genauer hin.
Language bedeutet lediglich, daß HTML ein beschreibendes Hilfsmittel ist, mit dessen Hilfe Informationen für ein bestimmtes Medium bequem aufbereitet werden können. In der Tat wollen Sie
ja Informationen über das World Wide Web (WWW) anbieten; HTML ist hierzu der Schlüssel.
HyperText ist der Ausdruck für eine bestimmte Darstellung von Text. Informationen die Sie über das
World Wide Web verbreiten, werden in aller Regel über Bildschirme oder Monitore angezeigt.
Im Gegensatz zur „klassischen“ Papierform müssen Sie jedoch hier mit einigen Einschränkungen leben. So ist es z.B. auf dem Bildschirm bedeutend umständlicher einen Text sequentiell,
d.h. in einer Linie von vorn nach hinten zu lesen, da der Bildschirm aufgrund seines originären
Querformates nur begrenzt Informationen des ursprünglich „hochformatigen“ Dokuments anzeigen kann. Ebenso sind Techniken wie das Anbringen von Lesezeichen (z.B. durch einen
simplen Kniff am Blattrand) elektronisch nur schwer realisierbar.
Abhilfe schafft hier der HyperText, der ein Prinzip vorsieht, welches die am Bildschirm angezeigte Textmenge stark eingrenzt. So wird z.B. ein neuer Begriff nur über seinen Namen
eingeführt, weitergehende Erläuterungen können dann bei Bedarf vom Anwender direkt (z.B.
durch Mausklick) abgerufen werden.
Markup bezeichnet die Art und Weise, wie Sie Ihr Dokument formatieren. Sofern Sie schon einmal
einen Text elektronisch verfasst haben (z.B. mit einem Programm wie Word für Windows), wissen Sie bereits was mit dem Begriff Formate gemeint ist, die Heraushebung bzw. Auszeichnung
bestimmter Textteile. Selbstverständlich bietet Ihnen auch HTML die Möglichkeit der Formatierung, es muß dabei jedoch mit Problemen ganz eigener Art fertig werden. Dies wollen wir
uns an einem Beispiel verdeutlichen.
4
1 WILLKOMMEN BEI HTML – ABER WAS IST DAS?
1.2
Ein grundsätzliches Problem austauschbarer Dokumente
Nehmen wir einmal an, Sie wollen einen belletristischen Text von Weltformat erzeugen. „Kein Problem“, werden Sie jetzt antworten, und nach ein paar ordnenden Gedanken vielleicht die folgenden
Zeilen erfassen:
Der kleine Häwelmann
Es war einmal ein kleiner Junge, der hieß Häwelmann. Des Nachts schlief er in einem Rollenbett und auch
des Nachmittags, wenn er müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in der
Stube umherfahren. . .
Abbildung 1: Der ursprünglich erfasste Text.
Wahrscheinlich werden Sie jetzt bemängeln, daß der roh erfasste Text ein etwas dürftiges Aussehen
besitzt – und Sie haben Recht! Deshalb werden Sie folgerichtig hingehen und das Layout etwas aufpeppen wollen. So soll u.a. die Überschrift vom restlichen Text durch eine Fettformatierung und eine
größere Schriftart abgesetzt werden, der einleitende Nebensatz will ebenfalls herausgehoben sein, und
die Begriffe „Häwelmann“ und „Rollenbett“ wollen Sie auch gesondert behandelt wissen.
Der daraufhin mit Formatierungen versehene Text hat jetzt das folgende Aussehen:
Abbildung 2: Der frisch formatierte Text.
„Wo ist das Problem?“, werden Sie an dieser Stelle fragen? Nun, solange Sie Ihren Text auf dem
heimischen PC layoutieren und drucken gibt es keins. Schwierig wird es jedoch, sofern Sie planen
Ihren Text von anderer Seite verändern, erweitern oder einfach nur elektronisch lesen zu lassen.
Was Sie in Ihrem Text nämlich bislang verwendet haben, sind sogenannte feste Formatierungen, d.h.
Sie verwenden für Ihren Text einen festeingestellten Font, zusätzlich werden Überschriften fett, Hervorhebungen innerhalb des Textes jedoch kursiv dargestellt. Was aber, wenn die von Ihnen verwendeten Ressourcen1 für den Endanwender, aus welchen Gründen auch immer, nicht verfügbar sind?
1.3
Marken statt Formate
Grundsätzlich bieten sich Ihnen zwei Wege, dem oben skizzierten Dilemma zu entrinnen.
1
Ressourcen sind in diesem Sinn alle Elemente, die benötigt werden um Ihren Text korrekt darzustellen. Neben den im
Dokument verwendeten Schrifttypen (Fonts) gehören dazu u.a. auch Farben.
1.3 Marken statt Formate
5
Sie versenden Ihren Text zusammen mit allen verwendeten Ressourcen. Dies ist zwar prinzipiell
möglich, hat aber den Nachteil, daß Ihr Textfile unnötig aufgeplustert wird; Ressourcen wie z.B.
Fonts kosten in der Regel viel Platz.2
Sie verwenden anstelle der festen Formate logische Marken, die der Endanwender nach eigenem
Geschmack und Möglichkeit mit Formaten besetzt. Auch dies wollen wir am obigen Beispiel
demonstrieren.
<Überschrift> Der kleine Häwelmann <Überschrift>
<Absatz>
<Ü2>Es war einmal ein kleiner Junge,<Ü2> der hieß <Hervorhebung>Häwelmann.<Hervorhebung> Des
Nachts schlief er in einem <Hervorhebung>Rollenbett<Hervorhebung> und auch des Nachmittags, wenn er
müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in der Stube umherfahren. . .
<Absatz>
Abbildung 3: Der mit Marken versehene Text.
Sofern Sie nun eine Tabelle definieren, in der Sie Zuordnungen der Art
Überschrift
Hervorhebung
Ü2
...
großer Schrifttyp, fett
normaler Schrifttyp, kursiv
normaler Schrifttyp, fett
treffen, werden Sie ohne Schwierigkeiten das in Abbildung 2 auf der vorherigen Seite erzielte Layout
wiederherstellen können. Andererseits können Sie durch eine einfache Umbesetzung der eingeführten
Marken Ihr Layout abändern. Nehmen wir aber einmal an, Sie verknüpfen Ihre Marken wie folgt:
Überschrift
Hervorhebung
Ü2
...
großer Schrifttyp, serifenlos
normaler Schrifttyp, italic
normaler Schrifttyp, kursiv
so können Sie, und damit natürlich auch jeder andere Anwender, das Layout Ihres Dokuments ändern
ohne auf den Inhalt zugreifen zu müssen.
Abbildung 4: Der formatierte Text mit neuer Markenzuweisung.
2
Von der rechtlichen Problematik, d.h. ob es Ihnen überhaupt erlaubt ist z.B. einen bestimmten Font zu verschicken, will
ich gar nicht erst reden.
6
Nach genau dem gleichen Prinzip arbeitet auch HTML, da über das WWW publizierte Dokumente
auf den unterschiedlichsten Rechnern mit den diversesten Ressourcen dargestellt werden müssen.
Einer genaueren Beschreibung der unter HTML vorhandenen Markenelemente werden wir uns im
folgenden Kapitel 2 auf Seite 9, Formatelemente, widmen.
1.4
Standards oder Chaos?
So raise the open standard high
Within its codes we’ll live or die
Though cowards flinch and Bill Gates sneers
We’ll keep the net flag flying here.
(Aus dem Lied: The Net Flag )
Treffender als in dem oben zitierten Liedstück läßt sich der wohl bestechendste Grundgedanke von
HTML kaum beschreiben – die Implementierung als offener Standard. Kein Autor, der ein Dokument
zum Thema HTML verfasst, wird an der mit der Sprache verbundenen Standardisierung, und darüberhinaus an den damit verknüpften Problemen vorbeikommen; aus diesem Grund kann auch ich Ihnen
den Ausflug in dieses Politikum nicht ersparen. Woran liegt es also, daß das Thema Standardisierung
in Bezug auf HTML, bzw. die Verletzung desselben immer wieder hervorgeholt wird?
1.4.1 Die Vorteile der Standardisierung. . .
Zum besseren Verständnis des restlichen Kapitelinhalts sollten wir uns vorab die Bedeutung des Wortes Standard klar machen. Im Bereich von HTML bedeutet dies, daß eine bestimmte Anzahl der schon
angesprochenen HTML-Markenelemente festgeschrieben wird, d.h. irgend jemand legt bindend fest
welche HTML-Marken zur Sprache HTML dazugehören.
Wer ist nun dieser irgend jemand ? Oberster Hüter der HTML-Standardisierung ist das W3-Konsortium,
eine Reihe von Leuten, die wesentliche Beiträge zum World Wide Web geleistet haben. Da HTML
jedoch offen standardisiert ist, kann prinzipiell jeder im WWW Tätige eigene Vorschläge zu zukünftigen Standards beim W3-Konsortium einreichen.3
Der Vorteil einer solchen Standardisierung ist schnell ersichtlich. Jede Firma und jede Einzelperson,
die einen WWW-Browser entwickeln und vertreiben möchte, muß sich bei der Implementierung lediglich an den gerade aktuellen Standard halten um im Geschäft zu sein. Für den Benutzer bzw. Kunden
bedeutet dies jedoch aus einer Vielzahl von angebotenen Produkten, das für den eigenen Geschmack
(und natürlich für das eigene Betriebssystem!) zutreffende auswählen zu können, ohne irgendeinen
Funktionalitätsverlust befürchten zu müssen.
1.4.2 . . . und das daraus resultierende Chaos
Leider ist die oben beschriebene schöne heile Standardisierungswelt jedoch mit einem ziemlich heftigen Makel behaftet. Da die Anfrage nach neuen HTML-Funktionalitäten in aller Regel erheblich
3
Für diejenigen unter Ihnen, die wirklich mit diesem Gedanken liebäugeln: das W3-Konsortium ist unter
http://www.w3.org erreichbar.
1.5 Die Wahl des richtigen Editors
7
schneller vonstatten geht, als das W3-Konsortium mit der Standardisierung nachkommt beginnen einige Hersteller damit HTML nach eigenen Vorstellungen „marktorientiert“ zu erweitern, bzw. Teile
des aktuellen Standards zu ignorieren. Beispiele aus der Entwicklungsgeschichte:
1994: Das W3-Konsortium legt „auf Basis der damals üblichen Praxis“ den Umfang von HTML 2
fest. Schon bald wird der Wunsch nach (in HTML 2 nicht enthaltenen) Tabellen laut. Netscape
und Microsoft beginnen unabhängig voneinander mit der Implementierung eigener Tabellenmodelle, die untereinander natürlich inkompatibel sind.
1995: Die vorläufige Spezifikation für HTML 3 wird als Internet-Draft veröffentlicht. Sie enthält ein
auf den Entwicklungen von Microsoft und Netscape basierendes, abgespecktes Tabellenmodell, sowie einen Vorschlag zur Darstellung mathematischer Formeln. Microsoft und Netscape
übernehmen die standardisierte Tabellierung, entwickeln ihr eigenes Modell jedoch unabhängig
davon weiter.
1996: Die Spezifikation von HTML 3, wird als Standardvorschlag HTML 3.2 verabschiedet. Das
Tabellenmodell ist nochmals stark vereinfacht worden, die Darstellung des mathematischen
Formelsatzes wird von den meisten Herstellern nicht implementiert.
Netscape veröffentlicht seinen Vorschlag zur Darstellung von Steuerrahmen (Frames, nicht
standardisiert), Microsoft beginnt mit der Entwicklung zur Darstellung fester Fonttypen und
-größen.
1997: Netscape und Microsoft bekämpfen sich bei der Implementierung der Skriptsprache Javascript,
die interaktiv in bestehende HTML-Seiten eingebunden werden kann. Obwohl beide Entwicklungen den gleichen Namen tragen, sind sie überwiegend inkompatibel zueinander.
An welcher Stelle diese auseinanderdriftende Entwicklung letzendlich enden wird, ist zum jetzigen Zeitpunkt noch nicht abzusehen. Es ist jedoch zu befürchten, daß durch die teilweise agressive
Marktpolitik der einzelnen Hersteller, z.B. die standardmässige Auslieferung des hauseigenen Internet Explorers zusammen mit dem Betriebssystem Windows95 durch Microsoft, ein firmenabhängiger „Industriestandard“ zum Gewohnheitsrecht wird. Viele HTML-Autoren müssen bereits heute bei
der Erstellung Ihrer WWW-Seiten, die Fähigkeiten des durch Ihre Kundschaft verwendeten WWWBrowsers berücksichtigen – und schliessen damit die übrigbleibende Restleserschaft aus.
Im weiteren Verlauf dieser Broschüre wollen wir uns daher auf die HTML-Formatmarken beschränken, die nach unserem Wissensstand bei jedem WWW-Browser implementiert sind.
1.5
Die Wahl des richtigen Editors
Um etwas so komplexes wie eine HTML-Seite aufzubauen, brauchen Sie natürlich auch entsprechendes Werkzeug; in diesem Fall einen Editor. Obwohl eine Vielzahl spezieller Editoren zur Erstellung
von HTML-Dateien existiert, ist die Dokumenterfassung generell mit jedem Editor möglich, der in
der Lage ist Dateien im ASCII-Format abzulegen.4
4
unter DOS z.B. der edit, unter UNIX vi
8
Im weiteren Verlauf dieses Skripts werden wir diesem Umstand Rechnung tragen und alle Beispiele
so darstellen, daß Sie sie direkt mit einem ASCII-Editor übernehmen können.
Beispiele für die Benutzung spezieller HTML-Editoren, bzw. Konverter finden Sie übrigens im Anhang.
Checkliste
Versuchen Sie, möglichst ohne Zuhilfenahme der Broschüre, die folgenden Fragen zu beantworten:
Worin bestehen die Unterschiede zwischen einem auf Papier vorliegendem Dokument,
und einem welches über das World Wide Web publiziert wird?
Mit welchen Schwierigkeiten müssen Sie rechnen, wenn Sie einen Text veröffentlichen,
der auf mehreren unterschiedlichen Rechnern gelesen werden soll?
Wie können Sie diese Schwierigkeiten umgehen?
2 Formatelemente
Wie Sie im letzten Kapitel gesehen haben, ist es bei der Erstellung auszutauschender Dokumente von
Vorteil, dem Text Formate über Markenelemente zuzuweisen. HTML trägt diesem Umstand selbstverständlich Rechnung; um einem Dokument jedoch Formate zu verleihen, müssen Sie natürlich wissen,
welche Markenelemente HTML unterstützt.
Einige wenige dieser Markenelemente will ich im folgenden bekannt machen – schließlich sollen Sie
so schnell wie möglich selbst HTML-Seiten verfassen. Bevor es jedoch soweit ist, möchte ich Sie
vorab mit ein paar Formalia vertraut machen, deren Einhaltung Sie unbedingt beachten sollten um
Schwierigkeiten zu vermeiden.
2.1
Das Prinzip der Klammerung
Sofern Sie schon einmal mit einem Tool wie Word für Windows gearbeitet haben, wissen Sie bereits wie einzelne Textteile formatiert werden; der ausgewählte Text wird zuerst markiert, bevor der
Markierung ein Format zugewiesen wird.
Da HTML aufgrund seines ASCII-Formates die Möglichkeit einer Markierung von Textelementen,
z.B. durch Ziehen mit der Maus, prinzipiell nicht kennt, muß dieses Problem auf andere Art und Weise gelöst werden. HTML bedient sich hierbei einzelner Marken in der Art, daß am Beginn des zu
formatierenden Textteils eine Start-Marke, am Ende demnach eine Stop-Marke gesetzt wird, wobei
beide Marken den ausgewählten Text umklammern. Da ich diese Technik implizit bereits in Abbildung 3 auf Seite 5 vorgestellt habe, gehe ich jetzt schon einen Schritt weiter und ersetze die im Beispiel
verwendeten erfundenen Marken durch echte HTML-Tags.5
<H2>
</H2>
<P>
<EM>Es war einmal ein kleiner Junge,</EM> der hieß <I>Häwelmann.</I> Des
Nachts schlief er in einem <I>Rollenbett</I> und auch des Nachmittags, wenn
er müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in
der Stube umherfahren...
</P>
Abbildung 5: Unser Beispieltext in „echter“ HTML-Notierung.
5
Tag (engl.) = Schildchen, Etikett
10
2 FORMATELEMENTE
Wie Sie sehen, sind die Unterschiede zum ursprünglichen Beispiel nicht sonderlich gravierend. Den
Findigen unter Ihnen wird aber (außer den geänderten Tag-Namen) der ein oder andere Unterschied
aufgefallen sein. Folgende Regeln sollten Sie sich für die Erstellung von HTML-Dateien merken oder
zumindest griffbereit haben.
Die Tags sind jeweils mit einer öffnenden und schließenden spitzen Klammer versehen worden,
damit der HTML-Interpreter sie vom „normalen“ Text unterscheiden kann.
Beispiel: <EM>
HTML unterscheidet bei Tag-Namen nicht zwischen Groß-/Kleinschreibung; es macht also keinen Unterschied ob Sie eine Marke <EM>, <em> oder gar <eM> benutzen.6
Zu jeder Klammerung gehört jeweils ein öffnender und ein schließender Tag. Zur Unterscheidung wird dem schließenden Tag ein Schrägstrich vorangestellt.
Beispiel: <P>...</P>
Öffnende Tags können neben dem Tag-Namen weitere, optionale Parameter enthalten.
Beispiel: <P ALIGN=CENTER>
Tags dürfen gruppiert werden, d.h. innerhalb einer vorhandenen Klammerung dürfen weitere
Tags verwendet werden. Es ist jedoch darauf zu achten, daß der zuletzt geöffnete Tag als erster
wieder geschlossen wird, um die Gruppenhierarchie nicht zu verletzen.
Beispiel: <P><EM>...</EM></P>
HTML kennt prinzipiell keine Zeilenumbrüche, da diese vom lesenden Browser selbst erzeugt
werden. Aus diesem Grund dient die Positionierung der Tags nur einer besseren Übersicht, und
hat keinerlei Einfluß auf das Layout (s.a. Abbildung 6).
Und last, not least: Fehlerhafte und unbekannte Tags werden vom Browser ignoriert! Dies führt
speziell bei der Verwendung von firmenspezifischen Eigenentwicklungen (s.a. Kapitel 1.4 auf
Seite 6, Standards oder Chaos? ) immer wieder zu umfassenden Schwierigkeiten.
<H2>
</H2>
<P>
</P>
...........................................................................................
<H2> Der kleine Häwelmann </H2>
<P> <EM>Es war einmal ein kleiner Junge,</EM> der hieß <I>Häwelmann.</I> Des
der Stube umherfahren...</P>
Abbildung 6: Unterschiedliche Markenposition führen zum gleichen Layout.
6
Die Beispiele dieser Broschüre wurden nur der besseren Übersicht halber ausschließlich groß gesetzt.
2.2 Ein komplettes HTML-Dokument
2.2
11
Ein komplettes HTML-Dokument
Sofern Sie das obige Beispiel bereits abgeschrieben und in einer HTML-Datei abgelegt haben, brennen Sie wahrscheinlich darauf, es über einen HTML-Browser auf dem Bildschirm anzeigen zu lassen.
Haben Sie aber bitte noch einen Augenblick Geduld und komplettieren Sie Ihre Datei wie folgt:
<HTML>
<HEAD>
<TITLE>Der kleine Häwelmann</TITLE>
</HEAD>
<BODY>
<H2> Der kleine Häwelmann </H2>
<P>
</P>
</BODY>
</HTML>
...........................................................................................
Abbildung 7: Das vervollständigte Beispiel und seine Darstellung in Netscape.
2.3
Die Bedeutung der Marken
Die Bedeutung der meisten in Abbildung 7 verwendeten Tags haben Sie bestimmt schon intuitiv
erkannt. Trotzdem möchte ich zu diesen und einigen weiteren Marken ein paar Anmerkungen machen.
<HTML> – Dieser Tag wird grundsätzlich bei der Erstellung von HTML-Dateien gesetzt und umschließt das komplette Dokument.
<HEAD> – eröffnet für HTML-Dateien eine Vorspann-Umgebung, deren Inhalt in der Regel nicht auf
die Layoutierung des Textes sondern auf die Gestaltung des Browsers Einfluß nimmt. Sie sollte
mindestens den Tag
12
2 FORMATELEMENTE
<TITLE> – enthalten. Der in <TITLE> benutzte Textstring wird normalerweise vom Browser zur
Übertitelung der aufgebauten Seite benutzt. Netscape stellt ihn z.B. im Titelbalken des eigenen
Fensters dar (s.a. Abbildung 7 auf der vorherigen Seite).
<BODY> – kennzeichnet den Beginn des im WWW-Browser sichtbaren Bereichs. Alle in Body enthaltenen Informationen werden auf der HTML-Seite umgesetzt.
Ich möchte an dieser Stelle ein kleine Pause einlegen, um die inhaltliche Abgrenzung der bislang
vorgestellten Tags zu den gleich folgenden zu untermauern. <HTML>, <HEAD>, <TITLE> und
<BODY> sind noch keine Marken, die sich auf das Aussehen des Dokuments beziehen, sondern geben
diesem einen formalen Rahmen.
Tip !
Da die oben vorgestellten Tags in jedem Fall in einer HTML-Datei vorhanden sein müssen, können
Sie sich Schreibarbeit sparen, wenn Sie die folgenden Anweisungen quasi als Gerüst abspeichern.
<HTML>
<HEAD>
<TITLE>
</HEAD>
<BODY>
</TITLE>
</BODY>
</HTML>
Abbildung 8: Das obligatorische HTML-Gerüst.
Innerhalb der <BODY>-Umgebung können Sie dann die folgenden Tags für das Layout verwenden.
<H2> – definiert eine Überschrift der zweiten Hierarchiestufe. Generell dürfen Sie Überschriften in
den Kategorien <H1> - <H6> verwenden, die je nach verwendetem Browser unterschiedlich
dargestellt werden.
<P> – umklammert einen einzelnen Absatz. Diese Markierung ist deshalb notwendig, da der Zeilenumbruch innerhalb des Absatzes normalerweise durch den Browser vorgenommen wird. Aus
diesem Grund können Sie innerhalb des Absatzes auch keine tabellarischen Funktionen durch
Ausrichtung über Leerzeichen vornehmen, sondern müssen diese über ein spezielles Tabellenformat (Kapitel 10 auf Seite 55) durchführen, bzw. den automatischen Umbruch mit Hilfe des
<PRE>-Tags abschalten.
<EM> – sorgt für eine Hervorhebung des umklammerten Textbereichs. Diese Marke führt eine logische Formatierung durch, d.h. der Text wird je nach verwendetem Browser unterschiedlich
aufbereitet. Im Normalfall sollte eine Italic-Darstellung erfolgen.
<I> – stellt den umklammerten Textteil italic dar. Im Gegensatz zur <EM>-Markierung ist diese
Formatierung jedoch fest, d.h. sie kann nicht vom Browser substituiert werden.
<BR> – führt einen expliziten Zeilenumbruch zwischen zwei Zeilen durch. Das Besondere an diesem
Tag ist, daß er das vorgestellte Prinzip der Klammerung verletzt, da er nur in der öffnenden Form
existiert.
2.4 Darstellung von Sonderzeichen
13
Neben den im Beispiel verwendeten Tags existieren weitere Markierungen, die für bestimmte Hervorhebungen benutzt werden sollten. Grundsätzlich wird dabei zwischen logischen, d.h. der Browser
wählt das darzustellende Format selbst, und festen – die festgelegte Auszeichnung wird auf alle Fälle
durchgeführt – Markierungen unterschieden.7
Zusätzlich sollen die Tags durch ihren Namen einen Bezug zu ihrem Verwendungszweck herstellen
(<DFN> = Definition, <KBD> = Keyboard, usw.), Sie können sie jedoch selbstverständlich nach Belieben verwenden.
<DFN> – (logisch) für Definitionen innerhalb des Textes.
Beispiel: Rollenbett = Häwelmanns Nachtquartier
<CITE> – (logisch) für Buch- und Filmzitate etc.pp.
Beispiel: s.a. Th. Storm, Der kleine Häwelmann
<CODE> – (logisch) für die Darstellung von Computer-Code.
Beispiel: Häwelmanns Lieblingsprogramm begann wie folgt.
haewel: proc options(main);
DCL Rollbett FIXED;
<KBD> – (logisch) Tastatur-Eingabe eines Benutzers.
Beispiel: Login: Häwelmann
<STRONG> – (logisch) für besonders starke Hervorhebungen innerhalb eines Textes.
Beispiel: „Junge“, sagte der Mond, „Hast Du noch nicht genug?“
<BIG> – (logisch) legt fest, daß für den von den Tags eingeschlossenen Text eine größere Schrift
verwendet werden soll.
Beispiel: Höher und immer höher flog der kleine Häwelmann. . .
<SMALL> – (logisch) legt fest, daß für den von den Tags eingeschlossenen Text eine kleinere Schrift
verwendet werden soll.
Beispiel: . . . sein Mut hingegen schwand immer mehr.
<B> – (fest) der umklammerte Text wird fett ausgezeichnet.
Beispiel: „Nein“, schrie Häwelmann, „mehr, mehr!“
<TT> – (fest) ein Schreibmaschinentyp mit fester Buchstabenbreite.
Beispiel: Neben seinem Rollenbett besaß Häwelmann auch eine Schreibmaschine.
2.4
Darstellung von Sonderzeichen
Einige wenige Zeichen haben in HTML eine besondere Bedeutung und können aus diesem Grund
nicht „so wie sie sind“ eingegeben werden. Das klingt Ihnen zu ungenau? Nun, in diesem Fall werden
Sie spätestens dann mit dem Problem konfrontiert werden, wenn Sie innerhalb Ihres Textes eine spitze
7
In den folgenden Beispielen habe ich versucht den Schrifttyp zu verwenden, den auch der überwiegende Teil aller
Browser anzeigen würde. Speziell bei den logischen Auszeichnungen kann ich jedoch für das Schriftbild nicht garantieren.
14
2 FORMATELEMENTE
Klammer (<,>) darstellen wollen. Warum? Wie Sie sich erinnern wird durch die spitzen Klammern
ein Tag bekanntgemacht; und aus diesem Grunde benötigen Sie innerhalb Ihres HTML-Dokuments
eine Ersatzdarstellung.
Neben den spitzen Klammern sind von dieser Regelung auch noch der Ampersand (&), die Anführungsstriche (”) und, Sie ahnen es wahrscheinlich schon, nationale Sonderzeichen (ä,ß,È,ñ, u.v.a.m)
betroffen.
Da eine komplette Auflistung aller Sonderzeichen den Rahmen dieses Kapitels sprengen würde, will
ich Ihnen neben den oben erwähnten Symbolen in der folgenden Tabelle ein paar Beispiele für Akzentuierung geben. Eine komplette Aufstellung aller nationaler Sonderzeichen finden Sie im Anhang.
&
<, >
"
ß
ä, Ä
ñ
È, è
&
<, >
”
ß
ä, Ä
ñ
È, è
Tabelle 1: Ersatzdarstellung von Sonderzeichen
!!
Hinweis: Bei der Ersatzkodierung von Sonderzeichen unterscheidet HTML ausnahmsweise die Groß/Kleinschreibung. Während Sie beispielsweise bei der Verwendung von ä anstelle von Ä
noch mit einem blauen Auge davonkommen, erzeugt die Verwendung von &QUOT; statt "
einen HTML-Fehler.
2.5
Ansichtssachen
Zum Abschluß des Kapitels sollen Sie nun auch noch erfahren, wie Sie den aufgebauten HTML-File
über einen Browser wie Netscape probeweise betrachten können.
Beispiel für Netscape 3.x:
1. Klicken Sie innerhalb der Netscape-Menüleiste auf das Feld File.
2. Wählen Sie aus dem erscheinenden Menü die Option Open File. . . .
3. Suchen Sie in der nun erscheinenden Dialogbox Ihr HTML-File, markieren Sie es, und klicken
Sie auf OK.
Unter der neuen Version des Netscape Communicators (Version 4.x) liegt diese Funktion etwas versteckter.
1. Klicken Sie innerhalb der Netscape-Menüleiste auf das Feld File.
2. Wählen Sie nun die Option Open Page.
2.5 Ansichtssachen
15
3. Tragen Sie in der daraufhin erscheinenden Dialogbox den Namen Ihrer HTML-Datei ein, oder
wählen Sie sie über den Button Choose File. . . aus.
4. Klicken Sie auf den Button Open In Navigator.
Für den Fall, daß Sie mit Browser und Editor parallel arbeiten, müssen Sie nicht nach jeder Änderung
den Editor verlassen und Netscape neu starten. Speichern Sie einfach Ihre Änderungen ohne den
Editor zu verlassen, und klicken Sie im Netscape-Fenster auf den Button Reload – der Fensterinhalt
wird Ihren Änderungen automatisch angepaßt.8
Abbildung 9: Laden einer HTML-Datei.
Checkliste
Sofern Sie das vorgestellte Beispiel noch nicht erfaßt haben, sollten Sie das jetzt tun und
versuchen die folgenden Aufgaben zu lösen.
Starten Sie Ihren WWW-Browser, und lassen Sie sich Ihre Datei durch den Browser anzeigen.
Ersetzen Sie den im Beispiel benutzten Tag <I> durch <STRONG> , und kontrollieren Sie
ob die Änderungen durchgeführt worden sind.
Erklären Sie den Unterschied zwischen den Markierungen <TT> und <CODE> .
8
Dies ist eine Arbeitsweise die unter UNIX vorzüglich funktioniert. Sollten Sie DOS als Betriebssystemgrundlage gewählt haben, wundern Sie sich nicht über eventuell auftretende Schwierigkeiten.
Tip
3
Hyperlinks
Sicherlich einer der wichtigsten Gründe für die große Akzeptanz und die rasche Verbreitung des World
Wide Web, ist die einfache Handhabung von Querverweisen zwischen den einzelnen HTML-Seiten,
den sogenannten Hyperlinks. Dabei werden bestimmte Textteile hervorgehoben und durch sogenannte
Hypertext-Referenzen (Verweise) mit anderen Dokumenten verknüpft. Für den Anwender reicht ein
Mausklick auf einen derartigen Textteil aus, um zu anderen HTML-Dokumenten zu gelangen, die
dazu noch auf ganz anderen Rechnern liegen können.
Eine Schlüsselrolle bei den Hypertext-Referenzen spielt dabei der URL (Uniform Recource Locator),
der den genauen Standort eines Dokuments im Internet spezifiziert. Ein URL setzt sich zusammen aus
Internetdienst://Rechnername/Verzeichnisname/Dokumentenname
Internetdienst
Rechnername
evtl. Verzeichnisname
Dokumentenname
HTTP (World Wide Web), FTP,
Gopher, Telnet, News, Mail.
Rechneradresse, bzw -name im Internet.
Verzeichnispfad des Dokumentes.
Das Dokument selbst.
Im HTML werden Hyperlinkanfang und -ende mit Hilfe der Tags <A>- und </A> gebildet. Dabei
wird im <A>-Tag zusätzlich das Attribut HREF für die Benennung von Verweisen verwendet.
<A HREF=Verweis>
Text, den man “anklicken“ kann
</A>
3.1
...zu anderen HTML-Dokumenten
Eine Hypertext-Referenz zu einem anderen HTML-Dokument sehen wir uns am besten an einem Beispiel an. In diesem Fall soll das Dokument haewel.html geladen werden, sobald die Textpassage
„Der kleine Häwelmann“ mit dem Mauszeiger angeklickt wird:
18
3 HYPERLINKS
Hier entlang zum Buch
<A HREF=“http://www.irgendwo.de/haewel.html“>
Der kleine Häwelmann </A>
.................................................................................................
Abbildung 10: So sieht der Hyperlink mit dem WWW-Browser aus.
Die Anweisung in Abbildung 10 enthält im einzelnen:
<A HREF=“....“>
http://
www.irgendwo.de
haewel.html
</A>
Beginn des Hyperlinks.
Hypertext-Referenz auf den Internetdienst WorldWideWeb.
Hypertext-Referenz auf einen ganz bestimmten Rechner im Internet.9
Der Dokumentenname.
Der hervorgehobene Text, der angeklickt wird.
Ende des Hyperlinks.
Entfällt die Angabe eines Dokumentennamens, so werden Standard-Dokumente mit den Bezeichnern
welcome.html oder welcome.htm gesucht.
Ist das HTML-Dokument in einem bestimmten Unterverzeichnis, so muß dieses mitangegeben werden.
<A HREF=“http://www.irgendwo.de/geschichten/haewel.html“>
Befindet sich das Ziel-Dokument in dem gleichen Verzeichnis und auf dem gleichen Rechner wie das
Dokument von dem der Hyperlink ausgeht, so reicht die Angabe des Dokumentennamens aus.
9
Auch wenn das Internet z.Zt. mehrere tausend Rechner umfaßt: Der Name www.irgendwo.de ist als Beispielrechner
willkürlich gewählt worden und bietet keinen Bezug zur Realität.
3.2 ...zu bestimmten Stellen im gleichen HTML-Dokument
19
<A HREF=“haewel.html“>
3.2
...zu bestimmten Stellen im gleichen HTML-Dokument
Eine Hypertext-Referenz zu einer bestimmten Stelle im gleichen HTML-Dokument wird in zwei
Schritten realisiert. Zunächst muß die „anzuspringende“ Stelle im Dokument mit dem <A>-Tag und
dem Attribut NAME 10 markiert werden.
<A NAME=“sonne“>
Auf diese markierte Stelle kann nun mit dem bereits bekannten Attribut HREF im <A>-Tag Bezug
genommen werden. Allerdings wird dem Namen der markierten Stelle eine Raute (# ) vorangestellt:
<A HREF=“#sonne“> Wo der Kleine Häwelmann die Sonne trifft. </A>
3.3
...zu bestimmten Stellen in anderen HTML-Dokumenten
Hierbei handelt es sich um die Kombination der letzten beiden Fälle:
<A HREF=“http://www.irgendwo.de/geschichten/haewel.html#sonne“>
Wo der Kleine Häwelmann die Sonne trifft. </A>
3.4
...zu anderen Informationsdiensten
Anstelle der Hypertext-Referenz http:// (für das WWW) können auch andere Internetdienste eingesetzt werden.
FTP Überträgt eine Datei auf den Rechner, auf dem der WWW-Browser läuft.
<A HREF=“ftp://ftp.irgendwo.de/pub/geschichten/buch.zip“>
Ein Buch </A>
10
Der schließende Tag </A> darf hier ausnahmsweise mal wegfallen.
20
3 HYPERLINKS
TELNET Baut eine Telnet-Verbindung zum angegebenen Rechner auf. Da bei den meisten WWWBrowsern dieser Dienst nicht implementiert ist, muß der Benutzer in diesem Fall ein externes Telnetprogramm installiert haben (siehe Kapitel 7 auf Seite 39, Externe Anwendungen ).
<A HREF=“telnet://irgendein_rechner.irgendwo.de“>
Zum Rechner </A>
NEWS
Stellt die Verbindung zur angegebenen Newsgruppe11 her.
<A HREF=“news://news.irgendwo.de/de.geschichten.haewelmann“>
Alles Rund um den Häwelmann </A>
MAILTO Der Benutzer erhält ein Formular zur Generierung einer Mail an die angegebene Adresse.
Bei MAILTO wird auf die „//“ verzichtet.
<A HREF=“mailto:[email protected]“>
Dem schreib ich </A>
Checkliste
Wozu dienen Hyperlinks?
Welche Rolle spielt in diesem Zusammenhang der URL, und aus welchen Komponenten
besteht er?
Welche Vorteile entstehen dem Benutzer von WWW-Browsern durch Hyperlinks zu anderen Internetdiensten?
11
News: Diskussionsgruppen zu bestimmten Themen; wird über das Internet verteilt.
4 Weitere Formatelemente
4.1
Blockquote
Der <BLOCKQUOTE>-Tag wird verwendet, wenn Absätze hervorgehoben werden sollen. Dazu wird
der betreffende Absatz an beiden Rändern eingerückt. Diese Technik wird oft für Zitate oder Gedichte
benutzt, um ihre besondere Stellung im Fließtext zu untermauern.
...ins Gesicht, “was machst du hier in meinem Himmel?“<BR>
<BLOCKQUOTE>
Und - eins, zwei, drei! nahm sie den keinen Häwelmann und warf
ihn mitten in das große Wasser. Da konnte er schwimmen
lernen.
</BLOCKQUOTE>
Und dann?
.................................................................................................
Abbildung 11: Ein hervorgehobener Absatz.
4.2
Pre und Samp
Die automatische Textformatierung bzgl. Zeilenbreite und Ausrichtung kann mit dem <PRE>-Tag
(für preformated) ausgeschaltet werden. Dies findet häufig Anwendung bei der Darstellung von Programmtextbeispielen. Der von <PRE> und </PRE> umrahmte Textteil wird dann so angezeigt, wie er
im HTML-Dokument eingegeben wurde.
22
4 WEITERE FORMATELEMENTE
Sollen hingegen z.B. nationale, oder für HTML reservierte Sonderzeichen direkt in den Text eingefügt
werden empfiehlt sich der Tag <SAMP>.
<PRE>
Der
kleine
Häwelmann
</PRE>
<P>"<SAMP> {$%&/#+˜*=?@</SAMP>" rief der Mond. "Schon wieder
die gleiche Geschichte?"</P>
.................................................................................................
Abbildung 12: Vorformatierter Text
4.3
Hoch- und Tiefstellung von Zeichen
Hoch- bzw. tiefgestellte Zeichen finden unter anderem in der Mathematik eine häufige Anwendung.
HTML stellt hierfür die Tags <SUP> (Hochstellung) und <SUB> (Tiefstellung) bereit.
<BLOCKQUOTE>
Und - eins, zwei, drei! (bei wiederholtem Lesen der Geschichte sogar
3<SUP>3</SUP> auf Basis von <I>log<SUB>10</SUB></I>) nahm sie den kleinen
Häwelmann und warf ihn mitten in das große Wasser. Da konnte er schwimmen
lernen.
</BLOCKQUOTE>
.................................................................................................
Abbildung 13: Hoch- und Tiefstellung von Zeichen
4.4 Horizontale Linien
23
Mathematischer Formelsatz kann mit diesen beiden Elementen natürlich noch nicht dargestellt werden. In HTML 3 ist die Darstellung von Formeln zwar vorgesehen, sie ist bislang jedoch in keinem
handelsüblichen WWW-Browser implementiert worden (s.a. Kapitel 1.4 auf Seite 6, Standards oder
Chaos? ).
4.4
Horizontale Linien
Um Absätze noch deutlicher voneinander zu trennen als es mit dem <P>-Tag geht, kann eine horizontale Trennlinie eingefügt werden, die sich stets der Fensterbreite des Browsers anpaßt. Dies geschieht
mit dem <HR>-Tag.
ihn mitten in das große Wasser. Da konnte er schwimmen lernen.
Und dann?</P>
<HR>
<P>Ja und dann? Weißt du nicht mehr? Wenn ich und du nicht gekommen...
.................................................................................................
Abbildung 14: Horizontale Trennlinien
4.5
Address
Der <ADDRESS>-Tag dient der Benennung des Autors eines HTML-Dokumentes, und beinhaltet
häufig dessen Name, E-Mailadresse, sowie das Datum der Erstellung.
!
24
...
<HR>
<ADDRESS>
Der kleine Häwelmann - Theodor Storm / Ingeborg Meyer-Rey<BR>
3. Auflage 1986
</ADDRESS>
.................................................................................................
Abbildung 15: Am Ende jedes Dokumentes sollte der Autor stehen.
4.6
Bestimmung von Fonts und Schriftgrößen
Sollen bestimmte Textteile durch eine andere Größe hervorgehoben werden, so dürfen Sie den Tag
<FONT> verwenden. Zur Angabe der Größe wird der Subparameter SIZE= hinzugefügt, der folgende
Formen annehmen kann.
SIZE=n : wobei n eine Zahl zwischen 1 und 7 annehmen kann. 1 bedeutet dabei die kleinste verfügbare Schrift, 7 die größte. Alternativ dazu kann die Form
SIZE=n : benutzt werden. In diesem Fall wird die Schriftgröße relativ zur momentan benutzten
Standardschrift erhöht bzw. erniedrigt.
!!
Auch wenn es der Philosophie von HTML widerspricht, hat sich Microsoft der zahlreichen Anwenderwünsche erbarmt und dem <FONT>-Tag den Subparameter FACE= hinzugefügt, mit dessen Hilfe
sich ein festgelegter Schriftfont „verdrahten“ läßt.
Wer’s also nicht lassen kann, sollte zumindest darauf achten, daß in der angegebenen Fontliste Schrifttypen, wenn schon nicht für alle, dann doch für die häufiger eingesetzten Betriebssysteme vorhanden
sind. Das heißt, anstelle einer Sequenz <FONT FACE=“Arial“>, sollte zumindest
<FONT FACE=“Arial,Helvetica“> stehen. In diesem Fall würde der WWW-Browser immerhin noch
nach der Schrift Helvetica suchen, für den Fall, daß Arial auf dem Rechner nicht zu finden ist.
4.7 Einfügen von Zitierungen
25
Können beide Schriftarten nicht lokalisiert werden, ersetzt der Browser sie an den betroffenen Textstellen durch eine (meist sehr häßliche) Standardschrift. Die Beispiele:
<P>Der Wind blies heftig durch das offene Fenster. So heftig, daß
sich Häwelmanns Bettdecke <FONT SIZE=+1>hoch</FONT> und immer
<FONT SIZE=+2>höher</FONT> wie ein Segel über das gesamte Bett wölbte.</P>
<P>Häwelmann war so <FONT FACE=“Arial,Helvetica“> erschrocken, daß er
sämtliche Serifen verlor</FONT>.</P>
.................................................................................................
Abbildung 16: Veränderung von Schrifttyp und -größe
4.7
Einfügen von Zitierungen
Für Zitate stellt HTML das <Q>-Element bereit. Das besondere an <Q> ist, daß es, in Abhängigkeit vom mitübergebenen Subparameter, die korrekten Zitat-Anführungsstriche, also „ “ in deutsch,
« und » in französisch, etc. setzt. Das folgende Beispiel sollte dies etwas klarer machen.
<P>Um den kleinen Häwelmann etwas zu beruhigen, stimmte der alte Mond sein
Lieblingslied an: <Q LANG=“fr“>Claire, de la lune...</Q></P>
.................................................................................................
Abbildung 17: Zitieren international leichtgemacht
!
26
Sofern durch den gesamten Text hindurch sprachlich einheitlich zitiert werden soll, kann die gewünschte Landessprache mit Hilfe des Tags <LANG> voreingestellt werden.
!!
Der <Q>-Tag wird vom Netscape Navigator bislang (noch) nicht unterstützt!
4.8
Erstellen eigener Formatierungsmarken
Gelegentlich kommt es vor, daß man einzelne Textteile mit kombinierten Formatelementen auszeichnen möchte, z.B. durch eine kursiv gesetzte Fettschrift oder Ähnlichem. Dies können Sie natürlich
durch eine geschickte Schachtelung der HTML-Tags erreichen; um beim oben aufgeführten Beispiel
zu bleiben durch <B><I>mein Text</I></B>.
Sofern Sie jedoch häufiger eine solche zusammengesetzte Formatierung verwenden wollen, wird dies
auf Dauer natürlich unbequem. In HTML 3 wurde daher der Tag <RENDER> eingeführt, der eine
dauerhafte Zusammensetzung einzelner Formatelemente ermöglicht.
<RENDER> wird dazu um die beiden folgenden Subparameter erweitert.
TAG= definiert den Namen des neueingerichteten Tags.
STYLE= enthält eine Liste der zu kombinierenden Tags. Kombiniert werden dürfen die Elemente
<I>, <B>, <U>, <SUP>, <SUB>, <TT>, sowie die Absatzmarke <P>.
Auch hierzu möchte ich Ihnen ein Beispiel nicht vorenthalten.
<BODY>
<RENDER TAG=“HAEWEL“ STYLE=“I,B“>
<P>...</P>
<P>"Mehr, mehr", schrie der kleine
<HAEWEL>Häwelmann</HAEWEL></P>
.................................................................................................
Abbildung 18: Kombinieren von Formatmarken
!!
<RENDER> wird vom Netscape Navigator bislang (noch) nicht unterstützt!
4.8 Erstellen eigener Formatierungsmarken
Checkliste
Welche Form der Hervorhebung wird mit dem <BLOCKQUOTE>-Tag erzielt?
In welchen Fällen kann es sinnvoll sein die automatische Textformatierung auszuschalten?
Nennen Sie mindestens zwei Gründe, warum von der Verwendung des <FONT>-Tags
abzuraten ist.
27
5 Listen
Für Aufzählungen bietet HTML Listen an, die es in den drei Varianten: numeriert, unnumeriert und
beschreibend gibt. Eine Liste besteht immer aus dem Beginn- und End-Tag des jeweiligen Listentyps,
die die einzelnen Listeneinträge umrahmen:
Listenanfang
1. Listeneintrag
2. Listeneintrag
...
n. Listeneintrag
Listenende
5.1
Numeriert
In numerierten Listen wird in aufsteigender Reihenfolge jedem Listeneintrag eine Ordinalzahl vorangestellt. Eine Liste wird mit dem <OL>-Tag (OL von „ordered list“) definiert; den einzelnen Listeneinträgen wird ein <LI> vorangestellt (siehe auch Abbildung 19 auf Seite 31).
<OL>
<LI> erster Listeneintrag
<LI> zweiter Listeneintrag
...
<LI> n-ter Listeneintrag
</OL>
5.2
Unnumeriert
Unnumerierte Listen unterscheiden sich nur in zwei Punkten von den numerierten. Erstens wird bei
ihnen je Listeneintrag ein Punkt vorangestellt, anstatt einer Ordinalzahl.12 Zweitens werden sie mit
dem <UL> (UL für „unordered list“) gebildet.
12
Das Aufzählungszeichen wird nach der Logik von HTML als logisches Formatelement natürlich vom WWW-Browser
eingefügt und kann (zumindest theoretisch) variieren.
30
5
LISTEN
<UL>
<LI> Listeneintrag
<LI> noch ein Listeneintrag
...
<LI> vorläufig letzter Listeneintrag
</UL>
5.3
Listenüberschriften
Eine allgemeine Überschrift kann jeder Liste durch den Tag <LH> (LH für „list header“) hinzugefügt
werden. Die Listenüberschrift erhält je nach Gutdünken des Browsers eine andere Formatierung; das
durch die Liste definierte Aufzählungszeichen entfällt.
<UL>
<LH>
<LI>
<LI>
...
<LI>
</UL>
5.4
Listenüberschrift
Listeneintrag
noch ein Listeneintrag
vorläufig letzter Listeneintrag
Beschreibend
Im Gegensatz zu den bereits genannten Listentypen verwenden beschreibende (deskriptive) Listen
keine Punkte oder Ordinalzahlen vor jedem Listeneintrage. Sie benutzen dazu normalen Text, der
jedoch hervorgehoben wird. Je Listeneintrag wird eine Einleitung mit <DT>, und der anschließende
Text mit <DD> angegeben. Die ganze Liste wird mit <DL> umrahmt.
<DL>
<DT>
<DD>
<DT>
<DD>
...
<DT>
<DD>
</DL>
erste Eintragsüberschrift
erster Listeneintrag
zweite Eintragsüberschrift
zweiter Listeneintrag
n-te Eintragsüberschrift
n-ter Listeneintrag
5.5 Verschachtelt
5.5
31
Verschachtelt
Die einzelnen Listentypen lassen sich auch ineinander verschachteln. Dabei sollte (erfahrungsgemäß)
eine dreistufige Verschachtelungstiefe nicht überschritten werden.13
Eine Verschachtelung erzielt man, indem innerhalb einer Liste anstelle eines Listeneintrages eine
weitere Liste eingefügt wird. Das zusammenfassende Beispiel folgt auf der nächsten Seite in Abbildung 20.
<OL>
<LH>
<LI>
<LI>
<LI>
</OL>
Als
Der
Der
Die
erstes eine Überschrift
Häwelmann liegt im Bett.
Mond steht am Himmel.
Sonne kommt aus dem Meere herauf.
<UL>
<LI> Der Häwelmann liegt im Bett.
<LI> Der Mond steht am Himmel.
<LI> Die Sonne kommt aus dem Meere herauf.
</UL>
<DL>
<DT>
<DD>
<DT>
<DD>
<DT>
<DD>
</DL>
Der Häwelmann
liegt im Bett.
Der Mond
steht am Himmel.
Die Sonne
kommt aus dem Meere herauf.
.................................................................................................
Abbildung 19: Numerierte, unnumerierte und beschreibende Listen.
13
Die hier erwähnten Erfahrungen beruhen sowohl auf organisatorischen als auch auf technischen Hintergründen. So werden Listenverschachtelungen ab einer bestimmten Schachtelungstiefe unübersichtlich, zusätzlich verweigern jedoch auch
einige Browser ihre Mitarbeit.
32
5
LISTEN
<UL>
<UL>
<LI> Er ist nicht müde..
<LI> Er will in der Stube umherfahren.
</UL>
</UL>
<OL>
<OL>
</OL>
</OL>
<OL>
<UL>
</UL>
</OL>
.................................................................................................
Abbildung 20: Verschachtelte und gemischte Listen.
5.5 Verschachtelt
Checkliste
Welche unterschiedlichen Listentypen gibt es im HTML?
Wie werden verschachtelte Listen konstruiert und was ist dabei zu beachten?
33
6
Inline Images
Text – schön und gut. Aber wie sieht es mit Grafiken, Bildern und Ikonen aus? Gerade diese Blickfänger runden das Erscheinungsbild eines HTML-Dokumentes ab und steigern seinen Wiedererkennungswert.
Im Prinzip könnte ein Bild in jedem beliebigen Grafikformat vorliegen, um in eine HTML-Seite eingebunden, und im World Wide Web übertragen zu werden. Leider kann jedoch nicht jeder WWWBrowser jedes Grafikformat umsetzen und darstellen. Als kleinster gemeinsamer Nenner empfielt sich
daher die Benutzung von GIF- oder JPEG-Bildern, die von so ziemlich allen bekannteren Browsern
verarbeitet werden können. Der Softwaremarkt bietet eine Reihe von Konvertierungsprogrammen, die
Ihre Bilder in eines dieser beiden Formate überführen können. Wenn möglich wählen sie dabei das
GIF89 interlaced-Format. Das Bild wird dann während der Übertragungsphase nicht von oben nach
unten auf dem Bildschirm aufgebaut, sondern sofort im Ganzen gezeigt und nach und nach klarer
aufgelöst; übertragungsbedingte Leerlaufzeiten erscheinen dem Betrachter so kürzer.
Die Einbindung von Inline Images wird mit dem <IMG>-Tag realisiert. Dabei wird mit dem Attribut
SRC der URL des Bildes angegeben.
<IMG SRC=Image_URL>
Handelt es sich um ein GIF-Bild, so muß der Dateiname hierbei mit .gif enden. Bei unserm Häwelmann sieht das so aus wie in Abbildung 21 auf der nächsten Seite.
Darüber hinaus kann mit einem weiteren Attribut die Position des Bildes innerhalb einer Textzeile
bestimmt werden. Mit ALIGN=BOTTOM, ALIGN=MIDDLE und ALIGN=TOP werden Bildfuß,
Bildmitte bzw. Bildkopf am Text ausgerichtet. Wird das Attribut ALIGN nicht verwendet, so gilt der
Standardwert BOTTOM (Abbildung 22 auf Seite 37).
36
6 INLINE IMAGES
<IMG SRC=“haewel1.gif“></P>
<P> Hier entlang zum Buch
<A HREF=“haewel.html“> Der kleine Häwelmann </A>
</P>
.................................................................................................
Abbildung 21: Inline Image.
Und noch etwas, was häufig vergessen wird: Es gibt immer noch WWW-Browser die prinzipiell keine
Grafiken anzeigen, weil sie z.B. ohne grafische Bedienungsoberflächen arbeiten. Geben Sie deshalb
dem <IMG>-Tag zusätzlich das Attribut ALT, um mit einem kurzen Text den Bildinhalt zu beschreiben. Diesen Text zeigen solche Browser dann an der Stelle, an der sonst das Bild zu sehen wäre.
<IMG SRC=haewel1.gif ALT=“Der kleine Häwelmann im Bett“>
37
<P>Erst mit BOTTOM <IMG ALIGN=BOTTOM SRC=haewel4.gif>
am unteren Bildrand.</P>
<P>Dann mit MIDDLE <IMG ALIGN=MIDDLE SRC=haewel4.gif>
in der Mitte.</P>
<P>Zuletzt TOP für Text <IMG ALIGN=TOP SRC=haewel4.gif>
am Bildkopf.</P>
.................................................................................................
Abbildung 22: Inline Images ausgerichtet.
Sofern das Inline Image als Hyperlink benutzt werden soll, also <IMG> mit dem <A>-Tag verküpft
wird, läßt sich die, durch den Hyperlink erzeugte Umrandung mit der Option BORDER=“0“ abschalten.
Checkliste
Welches Grafikformat sollte für Inline Images verwendet werden? Nennen Sie Gründe.
Wie werden Inline Images ausgerichtet?
Tip
7
Externe Anwendungen
Bisher habe ich Verweise auf HTML-Dokumente, Grafiken und die bereits aufgezählten sonstigen
Internetdienste vorgestellt. Gemeinsam war ihnen allen, daß die WWW-Browser diese selbst verarbeiten konnten. Prinzipiell kann aber jede Form von Daten im WWW übertragen werden, z.B. Sound,
Videosequenzen, etc. Stellt ein Browser fest, daß die zu verarbeitenden Daten nicht von ihm selbst
aufbereitet bzw. dargestellt werden können, so wird eine Anwendung (ein Programm) für die Weiterverarbeitung eben dieser Daten gestartet. Diese Programme werden „external Viewer“ oder „external
Browser“ genannt. Ein Verweis auf solche Daten wird wie gehabt als Hyperlink im HTML-Dokument
eingebaut.
Nehmen wir als Besipiel eine Videosequenz, die im MPEG-Format vorliegt. Da kein (zumindest kein
bislang bekannter) WWW-Browser MPEG-Videos abspielen kann, benutzt der Browser eine eingebaute Tabelle, anhand welcher er entscheidet, welches Programm für welche Daten verwendet wird.
In unserem Fall wird das Progamm mpeg_play auf dem lokalen Rechner gesucht und, sofern die
Suche erfolgreich war, gestartet.14 Viele WWW-Browser bieten dem Bediener Optionenmenüs zur
Erweiterung einer solchen Anwendungstabelle an.
Hier entlang zum <A HREF=“dschungelbuch.mpg“>
Dschungelbuch</A>
.................................................................................................
Abbildung 23: Ein „Klick“ auf den Hyperlink, und ein MPEG-Browser zeigt die Videosquenz.
Findet der WWW-Browser kein geeignetes Programm für die Anzeige der Daten, so können diese in
den meisten Fällen immerhin als externe Datei abgespeichert werden.
14
D.h. unter DOS/Windows muß ein entsprechendes .EXE-File vorhanden sein und im Zugriffspfad liegen, unter
UNIX/X11 eine entsprechende X11-Applikation.
Teil II
Erweiterungen und Zusätze
8
Clickable Images
Clickable Images sind eine besondere Form von Bildern in HTML-Dokumenten. Mit ihrer Hilfe ist
es möglich, bestimmte Hypertext-Referenzen mit Teilen eines Bildes zu verknüpfen.
Eine Vielzahl von WWW-Browsern (Netscape Navigator, Microsoft Internet Explorer,. . . ) kann die
Position des Mauszeigers auf einem Clickable Image an den WWW-Server übermitteln, sobald die
linke Maustaste betätigt wird. Ein Programm auf der Serverseite entscheidet dann anhand einer Aktionstabelle (im folgenden Map-File genannt) welcher URL angesprochen werden soll, wenn der
Mausklick innerhalb bestimmter Bild-Koordinaten erfolgt ist.
Clickable Images werden häufig als Navigationselement verwendet. Überlegen Sie sich jedoch ob Sie
die gleiche Funktionalität nicht durch die Verwendung von Tabellen (Kapitel 10 auf Seite 55) oder
Frames (Kapitel 14 auf Seite 69) erreichen können, da diese wesentlich einfacher zu erstellen sind.
8.1
Die Einbindung
Zunächst benötigen Sie ein Bild im GIF-Format, das als Hyperlink in Ihre HTML-Seite eingefügt
wird. Der URL des Hyperlinks zeigt auf das Map-File, das die Verknüpfungen beinhaltet. Ein Beispiel:
<A HREF=“http://www.irgendwo.de/cgi-bin/htimage/haewel.map“>
<IMG src=“http://www.irgendwo.de/haewel.gif“ ismap> </A>
Beachten Sie hierbei den <IMG>-Zusatz ISMAP.
8.2
Das Map-File
Das Map-File ist im Prinzip eine Tabelle, welche geometrischen Formen im Bild bestimmte Lokationen (URLs) zuordnet. Die in diesem Abschnitt vorgestellte Syntax bezieht sich auf Konventionen des
Netscape Enterprise-Servers.
!
44
8 CLICKABLE IMAGES
default http://www.irgendwo.de/meer.html
circle http://www.irgendwo.de/kissen.html 90,170 126,170
rect http://www.irgendwo.de/decke.html 240,218 355,267
rect http://www.irgendwo.de/schuh.html 139,320 185,354
poly http://www.irgendwo.de/haewelmann.html 83,80 142,159 221,145 287,123
253,44 187,70 177,55
.................................................................................................
Abbildung 24: Source-Code des Map-Files zum Häwelmann-Bild, und das Tool mapedit zur Generierung von Map-Files.
Damit werden beim Anklicken verschiedener Bildbereiche folgende Hypertext-Referenzen geladen:
Als Standard, das Meer. – http://www.irgendwo.de/meer.html
Ein Kreis rund um das Kissen – http://www.irgendwo.de/kissen.html
Ein Rechteck um die Decke – http://www.irgendwo.de/decke.html
Ein Rechteck um den Schuh – http://www.irgendwo.de/schuh.html
Ein Polygon um den Haewelmann im Bett –
http://www.irgendwo.de/haewelmann.html
8.3 Das Resultat
45
Die Bildkoordinaten können mit einer Vielzahl von Graphikprogammen, wie zum Beispiel PaintShop
Pro, ermittelt werden. Eleganter arbeitet das in der Abbildung 24 auf der vorherigen Seite gezeigte
Programm mapedit (unter UNIX/X11), welches die Erstellung eines Map-Files erheblich vereinfacht.
Mögliche Einträge innerhalb des Map-Files
default URL - wird als Standardfall angegeben, und sollte immer vorhanden sein.
circle URL x1,y1 x2,y2 - Kreis mit der Kreismitte bei x1,y1 und einem beliebigen Punkt auf der
Kreisbahn x2,y2.
rectangle URL x1,y1 x2,y2 - Rechteck mit zwei gegenüber liegenden Ecken x1,y1 und x2,y2.
polygon URL x1,y1 x2,y2 ... xn,yn - Vieleck mit den jeweiligen Koordinaten xi,yi. Maximal 100 Koordinatenpaare sind zulässig. Wenn das letzte Koordinatenpaar nicht gleich dem ersten ist, wird
diese Verbindung automatisch geschlossen.
8.3
Das Resultat
Von all dem bekommt der Betrachter der Seite nur wenig mit. Die geometrischen Figuren sieht man
dem Bild nicht an – den Beweis sehen Sie in Bild 25.
Abbildung 25: Das Clickable Image fertig eingebunden.
46
8 CLICKABLE IMAGES
Checkliste
Wo könnten Clickable Images Anwendung finden?
Welche Schritte sind zur Erstellung eines Clickable Images nötig?
Woher beziehen Sie die Bildkoordinaten?
9 Formulare
Im WWW können auch Benutzereingaben am Bildschirm gemacht werden, die anschließend durch
den WWW-Server weiterverarbeitet werden. HTML bietet hierfür die Möglichkeit Formulare in HTMLSeiten zu gestalten.
Was HTML hingegen nicht kann, ist die Auswertung der Eingabedaten. Dies ist Sache sogenannter „CGI-BIN“-Programme des WWW-Servers, die völlig abgekoppelt vom Formular arbeiten. Zur
Auswertung von Formulareingaben muß daher der WWW-Administrator kontaktiert werden.
Formulare sind seit HTML 2 definiert, und werden von den meisten WWW-Browsern unterstützt.
Beginn und Ende eines Formulares werden im HTML-Dokument mit <FORM> bzw. </FORM> beschrieben. Der <FORM>-Tag erhält zusätzlich die Argumente METHOD=POST15, sowie ACTION,
mit dem der URL des Auswertungsprogrammes für die Eingabedaten festgelegt wird.
<FORM METHOD=POST ACTION=Programm_URL>
Formular
</FORM>
Innerhalb eines Formulares werden neben den bisher vorgestellten Gestaltungselementen spezielle
Eingabe- und Auswahlfelder benutzt. Damit das dazugehörige Auswertungsprogramm nicht durcheinander kommt, erhält jedes dieser Felder einen eigenen, eindeutigen und vom HTML-Programmierer
selbst gewählten Namen, der als Zusatz NAME in den HTML-Tags angegeben wird (siehe unten).
9.1
Eingabefelder
Mit dem <INPUT>-Tag werden Eingaben des Benutzers im Formular entgegengenommen. Durch die
folgenden Tags werden verschiedene Eingabefelder definiert.
9.1.1 Normale Eingabefelder
<INPUT TYPE=TEXT> erzeugt ein einfaches Eingabefeld für alphanumerische Zeichen. Nicht fehlen sollten hier außerdem die folgenden Attribute:
NAME um dem Eingabefeld einen Namen zu geben. Dieser Feldname muß eindeutig sein und dient
dem weiterverarbeitenden Programm zur Unterscheidung aller Felder im Formular.
15
Alternativ zu POST kann dem Parameter METHOD auch der Wert GET zugewiesen werden. Beide haben die gleiche
Aufgabe, nämlich das „Durchreichen“ des Formulares an den Server. Obwohl die Unterschiede lediglich technisch bedingt
sind, empfehle ich die Verwendung von POST.
48
9 FORMULARE
SIZE gibt die Breite des Eingabefensters in Buchstaben an.
MAXLENGTH gibt die maximale Anzahl einzugebender Zeichen in diesem Feld an.
VALUE kann einen Default-Wert vorgeben.
<FORM METHOD=POST ACTION=“http://www.irgendwo.de/cgi-bin/formular“>
Geben Sie bitte Ihr Lieblingsbuch ein:
<INPUT TYPE=TEXT NAME=“buch“ SIZE=30 VALUE=“Häwelmann“>
</FORM>
.................................................................................................
Abbildung 26: Einfaches Texteingabefeld
9.1.2 Geheime Eingabefelder
<INPUT TYPE=PASSWORD> erzeugt ebenfalls ein Eingabefeld, im Eingabefenster sind aber stets
nur Sternchen zu sehen. Damit wird verhindert, daß bei geheimen Eingabedaten jemand über die
Schulter hinweg mitlesen kann. Ansonsten sind die gleichen Attribute gültig.
9.1.3 2-dimensionale Eingabefelder
<TEXTAREA> bzw. </TEXTAREA> erzeugt ein größeres, 2-dimensionales Eingabefeld, in dem sich
Eingaben auch über mehrere Zeilen erstrecken können. Die Zusätze ROWS für die Anzahl der Zeilen, sowie COLS für die Spalten-Breite definieren die Größe. Auch hier muß (wie bei allen Eingabefeldern) wieder ein Name für die spätere Weiterverarbeitung des Feldinhaltes angegeben werden.
Textpassagen zwischen den beiden <TEXTAREA>-Tags werden als Vorgabe angezeigt.
9.1 Eingabefelder
49
Geben Sie bitte Ihr Lieblingsbuch ein:
<INPUT TYPE=PASSWORD NAME=“buch“ SIZE=30>
(Wir verraten auch nichts)
</FORM>
.................................................................................................
Abbildung 27: Geheime Eingaben
Geben Sie eine kurze Inhaltsangabe des Buches ein:<BR>
<TEXTAREA NAME=“zusammenfassung“ ROWS=8 COLS=60>
</TEXTAREA>
</FORM>
.................................................................................................
Abbildung 28: Mehrzeilige Eingaben
50
9.2
9 FORMULARE
Auswahl
Formulare können auch wie Multiple-Choice-Aufgaben aussehen: Dem Betrachter werden in einer
Liste eine Reihe von Alternativen angeboten, aus denen er mittels Mausklick auswählen darf.
9.2.1 Mehrfache Auswahl
<INPUT TYPE=CHECKBOX> ermöglicht die Auswahl eines oder mehrerer Werte aus einer Liste.
Dazu befinden sich kleine Kästchen vor jedem Listenelement, die mittels Mausklick sukzessiv angekreuzt werden können. Das Attribut VALUE beinhaltet den Wert, den das Auswertprogramm im Falle
der Auswahl übergeben bekommt. Das Attribut CHECKED definiert einen Default-Wert als Vorgabe.
Kreuzen Sie bitte Ihr Lieblingsbuch an:<BR>
<INPUT TYPE=CHECKBOX NAME=“buch“ VALUE=“haewel“ CHECKED>
Häwelmann <BR>
<INPUT TYPE=CHECKBOX NAME=“buch“ VALUE=“pippi“>
Pippi Langstrumpf <BR>
<INPUT TYPE=CHECKBOX NAME=“buch“ VALUE=“dschungel“>
Dschungelbuch <BR>
</FORM>
.................................................................................................
Abbildung 29: Mehrfach ankreuzen mit CHECKBOX
9.2.2 Einfach ankreuzen
<INPUT TYPE=RADIO> funktioniert wie CHECKBOX mit der Einschränkung, daß hier aus mehreren Werten nur einer ausgewählt werden kann.
9.3 Aktions-Knöpfe
51
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“haewel“>
Häwelmann <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“pippi“>
Pippi Langstrumpf <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“dschungel“>
Dschungelbuch <BR>
</FORM>
.................................................................................................
Abbildung 30: Nur einmal ankreuzen mit RADIO
9.2.3 Auswahl mit Pull-Down-Menu
<SELECT> bzw. </SELECT> erzeugt ein „Pull-Down-Menu“ zur Auswahl eines bestimmten Wertes.
Jedes Werte-Element wird mit <OPTION> in die Werteliste eingebaut. Besteht ein solches Element
aus mehreren Wörtern, so ist die Angabe des Zusatzes <OPTION VALUE=“...“> sinnvoll, da das
weiterverarbeitende Programm nur ein Wort als Auswahl aus dem „Pull-Down-Menu“ erhalten darf
(siehe Abbildung 31 auf der nächsten Seite).
9.3
Aktions-Knöpfe
Durch die folgenden beiden Elemente kann der Benutzer Schaltflächen zum Anklicken generieren,
die Wirkung auf das gesamte Formular haben (das Beispiel hierzu finden Sie in Abbildung 32 auf
Seite 53).
<INPUT TYPE=SUBMIT> reicht den Inhalt der Eingabefelder im Formular an den WWW-Server
weiter, der daraufhin das in <FORM ACTION=...> angegebene Programm zur Weiterverarbeitung anstößt.
52
9 FORMULARE
<INPUT TYPE=RESET> löscht den Inhalt aller Eingabefelder. Es findet keine Verarbeitung der
Daten statt.
Wählen Sie bitte Ihr Lieblingsbuch aus:
<SELECT NAME=“buch“>
<OPTION SELECTED> Häwelmann
<OPTION VALUE=“pippi“> Pippi Langstrumpf
<OPTION> Dschungelbuch
</SELECT>
</FORM>
...................................................................................................
...................................................................................................
...................................................................................................
Abbildung 31: Auswählen mit SELECT
9.3 Aktions-Knöpfe
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“haewel“> Häwelmann <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“pippi“> Pippi Langstrumpf <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“dschungel“> Dschungelbuch <BR>
<INPUT TYPE=SUBMIT VALUE=“Abschicken“>
<INPUT TYPE=RESET VALUE=“Neue Eingaben“>
</FORM>
...................................................................................................
Abbildung 32: Abschicken des Formulares bzw. Eingaben löschen.
Checkliste
Welche Eingabemöglichkeiten kann ein Formular dem Benutzer bieten?
Wie lassen sich Multiple-Choice-Tests umsetzen?
Wo werden die Eingabedaten aus einem Formular weiterverarbeitet?
Warum ist es mit der Erstellung der reinen HTML-Seite als Formular noch nicht getan?
53
10 Tabellen
Tabellen sind wahrscheinlich das am häufigsten innerhalb von HTML benutzte Formatierungselement
überhaupt. Der Grund hierfür liegt in einem schon häufig angesprochenen Widerspruch zwischen dem
Formatierungsanspruch von HTML und der eigenen „formatorientierten“ Denkweise.
Der Autor eines wie immer zu publizierenden Dokuments denkt klassischerweise in festen Dimensionen, basierend auf einem Dokumentenmedium fester Größe, z.B. „Ich habe eine Papierseite (das
Dokumentenmedium), auf der ich ein Bild, sowie einen begleitenden Text positionieren möchte. Das
Bild soll rechts vom Text erscheinen, die Seitenaufteilung zwischen Text und Bild soll dabei das
Verhältnis 2/3 betragen, zwischen beiden Elementen soll ein Leerraum von 2mm sein, usw.“
HTML hat bei der o.a. Denkweise das Problem, daß das verwendete Dokumentenmedium (der WWWBrowser) keine feste Größe besitzt, d.h. in Abhängigkeit von der verwendeten Bildschirmauflösung
und dem persönlichen Geschmack des Benutzers kann die Größe des zur Darstellung des Dokuments
verwendeten Fensters erheblich schwanken.
Da HTML nun streng darauf achtet, daß Ihnen keine Informationen verloren gehen, erzeugt es bei
Veränderung der Fenstergröße ständig neue Positionen der im Fenster benutzten Elemente, was bei
der Betrachtung den Eindruck erweckt, daß das gesamte Dokument mehr oder minder „fließt“. Wer’s
nicht glaubt, lade sich bei der nächsten Gelegenheit eine beliebige HTML-Seite und schiebe den
Fensterrahmen einfach nach Gutdünken zusammen.
Tabellen bieten dem Autor, durch Ihre bekannte Unterteilung in Spalten und Zeilen die Möglichkeit
zumindest mit halbwegs vertrauten Begriffen, wie oben, unten, rechts und links zu layoutieren – daher
wird dieser Effekt gern dazu benutzt, nicht nur die klassische Texttabelle zu verwenden, sondern die
Tabellenfunktion generell als ordnendes Element auf einer HTML-Seite einzusetzen. Mehr darüber
erfahren Sie später in diesem Kapitel.
10.1
„Klassische“ Tabellen
Um einen Einstieg in die Tabellenfunktion zu schaffen, beginnen wir mit einer Tabellendarstellung
die uns von vielen Dokumenten her bekannt sein dürfte.
56
10 TABELLEN
Abbildung 33: Die Besetzungsliste des Häwelmann, eine „klassische“ Tabelle.
Bevor Sie nun mit den dazugehörigen HTML-Sourcen konfrontiert werden, sollten wir noch kurz auf
die Struktur der gezeigten Tabelle eingehen.
Die Tabelle besitzt drei Zeilen mit jeweils zwei Spalten,
es existiert eine spaltenübergreifende Tabellenüberschrift,
die Tabelle wird durch eine Tabellenunterschrift abgeschlossen,
das Gesamtprodukt ist umrahmt.
10.1.1 Das „Grundmodell“
Ein Grundmodell der gezeigten Tabelle kann nun mit Hilfe der folgenden Tags erstellt werden:
<TABLE> – bestimmt Anfang und Ende der Tabelle,
<TR> – eröffnet jeweils eine neue Tabellenzeile,
<TD> – erstellt jeweils ein Spaltenelement (Zelle) innerhalb von <TR>
Ein erster Ansatz zur Erstellung des o.a. Beispiels sieht danach wie folgt aus.
10.1 „Klassische“ Tabellen
57
<TABLE>
<TR>
<TD> Häwelmann </TD> <TD> Leonardo di Caprio </TD>
</TR>
<TR>
<TD> Mutter </TD> <TD> Sigourney Weaver </TD>
</TR>
<TR>
<TD> Der Mond </TD> <TD> Armin Müller-Stahl </TD>
</TR>
</TABLE>
.................................................................................................
Abbildung 34: Die Besetzungsliste – ein erster Versuch.
10.1.2 Formatierung der Zellen und Erstellen der Überschrift
Zugegebenermassen ist der bisherige Anblick der Tabelle noch nichts, was den Betrachter direkt vom
Hocker haut; mit einigen wenigen Handgriffen läßt sich die Tabelle jedoch so umbauen, daß uns das
Format schon etwas angenehmer erscheint. Benötigt werden hierzu die folgenden Tags.
<TH> – erstellt innerhalb des <TR>-Tags eine Tabellenüberschrift. Da die Überschrift über zwei
Zellen „gespannt“ werden soll, wird zusätzlich der optionale Parameter COLSPAN= benötigt.
Natürlich können noch weitere optionale Parameter für die Tags <TH> und <TD> verwendet werden.
ALIGN= bestimmt die Ausrichtung des Textes innerhalb der Zelle. Mögliche Werte sind LEFT,
RIGHT sowie CENTER. Defaultmässig sind LEFT für <TD> und CENTER für <TH> eingestellt.
ROWSPAN= analog zu COLSPAN=, überspannt jedoch Zeilen, anstelle der Spalten.
NOWRAP unterdrückt einen evtl. durchzuführenden Zeilenumbruch innerhalb der Tabelle.
Zur Formatierung des Zellentextes können sämtliche, bislang in dieser Broschüre vorgestellten Tags
benutzt werden.
58
10 TABELLEN
<TABLE>
<TR>
<TH COLSPAN=2 ALIGN=LEFT> Der kleine Häwelmann - Besetzungsliste </TH>
</TR>
<TR>
<TD> Häwelmann </TD> <TD ALIGN=RIGHT> <I>Leonardo di Caprio</I> </TD>
</TR>
<TR>
<TD> Mutter </TD> <TD ALIGN=RIGHT> <I>Sigourney Weaver</I> </TD>
</TR>
<TR>
<TD> Der Mond </TD> <TD ALIGN=RIGHT> <I>Armin Müller-Stahl</I> </TD>
</TR>
</TABLE>
.................................................................................................
Abbildung 35: Die Besetzungsliste – Formatierung der Zellen.
10.1.3 Allgemeine Tabellenformatierungen
Zum Abschluß müssen noch einige allgemeine Tabellenformatierungen vorgenommen werden, damit
das endgültige Layout der Tabelle dem Aussehen der Abbildung 33 auf Seite 56 entspricht.
Für das Einfügen der Bildunterschrift wird hierzu ein allerletzter Tag benötigt:
<CAPTION> – erstellt eine Bildunterschrift. Die Positionierung der Bildunterschrift wird über den
Parameter ALIGN= geregelt. ALIGN= kann im Bereich des <CAPTION>-Tags die Werte
TOP oder BOTTOM besitzen. (Default: TOP !)
Darüberhinaus wird der <TABLE>-Tag um die folgenden, optionalen Parameter erweitert:
BORDER erstellt einen Rahmen um die Tabelle. Durch die Variante BORDER=n kann die Strichstärke des Rahmens festgelegt werden, wobei n eine ganze numerische Zahl darstellt.
WIDTH=n% legt die horizontale Ausdehnung der Tabelle in Abhängigkeit von der gewählten Fensterbreite fest.
10.2 Tabellen als „ordnende“ Elemente
59
ALIGN= bestimmt diesmal die Position der Tabelle im Fenster. Neben den schon bekannten Werten
LEFT, RIGHT und CENTER existiert noch JUSTIFY, welches eine Ausdehnung der Tabelle
über die gesamte Seitenbreite bewirkt.
Durch die Angabe von LEFT oder RIGHT wird die Tabelle durch den umgebenden Text umflossen (s.a. Kapitel 12 auf Seite 65, Fließtext um Grafiken ).
CELLPADDING= erzeugt einen zusätzlichen Abstand zwischen dem Zelleninhalt und der Zellenumrandung.
CELLSPACING= definiert hingegen die Breite (Strichstärke), der jeweiligen Zellenumrandung.
<TABLE BORDER WIDTH=50% ALIGN=CENTER CELLPADDING=10>
<CAPTION ALIGN=BOTTOM> Tab.1: Copyright by <I>ThF/JV</I>
Casting Enterprises
<TR>
<TH COLSPAN=2 ALIGN=LEFT> Der kleine Häwelmann - Besetzungsliste </TH>
</TR>
<TR>
<TD> Häwelmann </TD> <TD ALIGN=RIGHT> <I>Leonardo di Caprio</I> </TD>
</TR>
<TR>
<TD> Mutter </TD> <TD ALIGN=RIGHT> <I>Sigourney Weaver</I> </TD>
</TR>
<TR>
<TD> Der Mond </TD> <TD ALIGN=RIGHT> <I>Armin Müller-Stahl</I> </TD>
</TR>
</TABLE>
Abbildung 36: Der originale HTML-Code zu der auf Seite 56 gezeigten Tabelle (Besetzungsliste des
Häwelmann ).
10.2
Tabellen als „ordnende“ Elemente
Nachdem Sie nun (hoffentlich) einen ersten Eindruck über die Vorteile und die Leistungsfähigkeit
des <TABLE>-Tags gewonnen haben, möchte ich Ihnen nun ein Einsatzgebiet zeigen, in welchem
Tabellen besonders gern genutzt werden, nämlich als einfach zu bedienendes Strukturelement beim
Aufbau einer HTML-Seite.
Diese Aussage bekommt sofort einen Sinn, sofern man sich vergegenwärtigt, daß in einer Tabellenzelle nicht nur Text, sondern jedes bekannte HTML-Element, z.B. Graphiken, Hyperlinks, externe
Anwendungen – und nicht zuletzt eine weitere Tabelle, untergebracht werden kann. Selbstverständlich sind auch Kombinationen, z.B. ein als Hyperlink funktionierendes Bild erlaubt.
Sollten Sie daher auf einer HTML-Seite Funktionen wie sauber aufeinander ausgerichtete Funktionsknöpfe, bündig abgeschlossene Texte und Bilder, oder ähnliches sehen, so verbirgt sich dahinter mit
Sicherheit eine Tabelle.16
16
Eine weitere Möglichkeit zur Erzeugung solcher Layouts ist die Verwendung von Rahmen, Kapitel 14 auf Seite 69,
Frames.
Tip
60
10 TABELLEN
Als Beispiel für die Verwendung einer Tabelle als „ordnendes“ Element sei hier kommentarlos, das
folgende Beispiel gezeigt, dessen Aufbau Sie sich anhand Ihrer bis jetzt erworbenen HTML-Kenntnisse
bestimmt leicht erarbeiten können.
<TABLE ALIGN=“CENTER“ CELLPADDING=“5“ WIDTH=“75%“>
<TR>
<TD></TD>
<TD><IMG SRC=“leo2i.jpg“></TD>
<TD>Klicken Sie auf eines der Bilder um mehr Informationen zu
erhalten...</TD>
</TR>
<TR>
<TD ROWSPAN=“2“><IMG SRC=“sigres2.gif“ HEIGHT=“300“></TD>
<TD COLSPAN=“2“ ALIGN=“RIGHT“><H1><I>Der kleine Häwelmann</I></H1><BR>
<H3>...ein Märchen von Theodor Fontane</H3></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD><IMG SRC=“stahl.gif“></TD>
</TR>
</TABLE>
.................................................................................................
Abbildung 37: Ein komplexeres Beispiel zur Verwendung von Tabellen.
10.3 Kompatibilitätsprobleme
61
Bei der Erstellung von komplexeren Tabellenstrukturen, empfiehlt es sich, innerhalb des
<TABLE>-Tags den Parameter BORDER zu benutzen, da hierdurch die Position der einzelnen Tabellenzellen besser deutlich wird.
10.3
Tip
Kompatibilitätsprobleme
Gerade das Tabellenelement hat unter den schon in Kapitel 1.4, Standards oder Chaos, angedeuteten
Kompatibilitätsproblemen arg zu leiden gehabt. Ich habe mich daher im vorangegangenen Kapitel auf
die Tabellen-Parameter beschränkt, die definitiv mit jedem Browser zusammenarbeiten.
Darüber hinaus existieren jedoch noch eine Unmenge weiterer Tabellenfunktionen, die gerade von
den Firmen Microsoft und Netscape verstärkt implementiert worden sind – und natürlich nur von
WWW-Browsern der entsprechenden Firma berücksichtigt werden.
Checkliste
Zu welchen Zwecken werden in HTML Tabellen benutzt?
Was für Schwierigkeiten können Sie bei der Benutzung von Tabellen bekommen?
Erstellen Sie selbst eine Tabelle. Können Sie eine 2x2 Matrix bilden?
!
11 Counter in HTML-Dokumenten
Counter oder Zähler sollen die Zugriffshäufigkeit auf eine bestimmte HTML-Seite erfassen und diese
nach Möglichkeit auch darstellen. Counter gehören nicht zum HTML-Standard, sondern sind vielmehr Programme, die auf einem WWW-Server installiert werden, und aus den HTML-Seiten heraus
aufgerufen werden.
Da es eine Vielzahl von Countern gibt, will ich Ihnen an dieser Stelle einen einzelnen exemplarisch
vorstellen, den „WWW-page Access Counter“ des W4 Consultancy in den Niederlanden. Das Programm heißt nph-count und erstellt eine kleine Grafik, die wie ein Kilometerzähler im Auto aussieht.
Hier gleich ein komplettes Beispiel für diesen Counter:
...
Die Häwelmann-Seiten haben bisher
<IMG
SRC=“http://www.irgendwo.de/cgi-bin/nph-count?width=4&link=
http://www.irgendwo.de/haewel.html“>
Leute gesehen.
...
.................................................................................................
Abbildung 38: Der nph-count - Zähler im HTML-Dokument.
Der Counter wird als normale Grafik eingebunden, wobei das Programm nph-count zur Generierung
64
11 COUNTER IN HTML-DOKUMENTEN
des Bildes aufgerufen wird. Der im Folgenden dargestellte Teil des Beispiels beinhaltet den eigentlichen Programmaufruf:
http://www.irgendwo.de/cgi-bin/nph-count
Diesem werden jedoch zwei zusätzliche Parameter übergeben. Mit dem ersten Parameter width wird
die Breite des Zählers bestimmt. In diesem Beispiel besteht der Counter aus 4 Ziffern:
width=4
Als zweiter Parameter wird der URL des Dokumentes angegeben, in dem der Counter eingebunden
ist.
link=http://www.irgendwo.de/haewel.html
Die Parameter werden mit dem ? an den Programmaufruf angehängt, und durch ein & voneinander
getrennt.
!!
Counter bieten zwar auf den ersten Blick eine bequeme Möglichkeit die Kontrolle über die Häufigkeit
der Seitenfrequentierung zu behalten, doch kann die damit verbundene Information häufig trügerisch
sein.
So laden z.B. viele WWW-Server eine häufig angeforderte Seite nicht von dem angegebenen externen
Rechner, sondern aus einem, speziell für solche Zwecke, eingerichteten Proxy-Cache – der Counter
wird in so einem Fall jedoch nicht aktualisiert!
Checkliste
Versuchen Sie, möglichst ohne Zuhilfenahme der Broschüre, die folgende Frage zu beantworten:
Warum kann es sein, daß nph-count auf Ihrem WWW-Server nicht funktioniert?
12 Fließtext um Grafiken
Sollen Grafiken von Text umflossen werden, so wird dem <IMG>-Tag das Attribut ALIGN mit den
Werten LEFT bzw. RIGHT 17 mitgegeben.
<IMG ALIGN=LEFT SRC=haewel3.gif>
“Nein“, schrie der kleine Häwelmann, “mehr, mehr. Leuchte, alter
...
<IMG ALIGN=RIGHT SRC=haewel4.gif>
hielten sie still.
.................................................................................................
Abbildung 39: Fließtext um Grafiken.
17
LEFT und RIGHT sind Bestandteil von HTML 3, und werden (noch) nicht von allen WWW-Browsern berücksichtigt.
66
12 FLIESSTEXT UM GRAFIKEN
Es empfiehlt sich bei einem neuen Absatz, der definitiv unter dem letzen Bild beginnen soll, zuvor
ein <BR CLEAR=LEFT> bzw. ein <BR CLEAR=RIGHT>18 voranzustellen. Damit ist sichergestellt,
daß neben der Grafik ein Freiraum zwischen letztem Absatz und Grafikboden bestehen bleibt. Darum:
...
Katze saß ober in einem Eichbaum und funkelte mit den Augen.
<BR CLEAR=left>
...
Da hielten sie...
.................................................................................................
Abbildung 40: Neuer Absatz unter dem Bild mit Fließtext.
18
Das Attribut CLEAR im <BR>-Tag ist erst Bestandteil von HTML 3.
13 Backgrounds – Hintergrundbilder und -farben
Damit HTML-Seiten nicht ausschließlich in ansprechendem Alltagsgrau erscheinen, unterstützt eine Reihe von WWW-Browsern (z.B. Netscape Navigator, Internet Explorer) Bilder und Farben als
Hintergrund einer Seite19.
Um Bilder als Hintergrund zu verwenden wird dem <BODY>-Tag das Attribut BACKGROUND hinzugefügt. Diesem Attribut folgt der URL des gewünschten Bildes. Ist das Bild kleiner als die Hintergrundfläche wird es mehrfach neben- und untereinander verwendet.
<HTML>
<BODY BACKGROUND=http://www.irgendwo.de/haewel7.gif>
...
</BODY>
</HTML>
.................................................................................................
Abbildung 41: Hintergrundbilder
19
Einige der hier vorgestellten Möglichkeiten sind Netscape spezifisch. Siehe hierzu auch Kapitel 1.4, Standards oder
Chaos?
68
13 BACKGROUNDS – HINTERGRUNDBILDER UND -FARBEN
Um Farben als Hintergrund zu verwenden wird dem BODY-Tag das Attribut BGCOLOR hinzugefügt.
Diesem Attribut folgt ein Farbcode in hexadezimaler rot-grün-blau (RGB) Notation. Eine Liste der
möglichen Farbcodes finden Sie im Anhang. Ein Beispiel um den Hintergrund schwarz zu färben:
<HTML>
<BODY BGCOLOR=“#000000“>
...
</BODY>
</HTML>
Leider kann man mit schwarzem Hintergrund keine Schrift mehr erkennen, da diese meist ebenfalls in
schwarz dargestellt wird. Darum können die Attribute TEXT für normalen Text, LINK für Hyperlinks,
ALINK für Hyperlinks die gerade geladen werden, und VLINK für bereits besuchte Hyperlinks im
BODY-Tag benutzt werden, um ebenfalls Farbwerte zu übergeben.
<HTML>
<BODY BGCOLOR=“#000000“ TEXT=“#FFFFFF“ LINK=“#ffee30“
ALINK=“#FF5500“ VLINK=“#ff6666“>
...
</BODY>
</HTML>
.................................................................................................
Abbildung 42: Hintergrundfarbe schwarz.
14 Frames
14.1
Soll ich oder soll ich nicht
Häufig trifft man im Web auf HTML-Seiten, die in mehrere Segmente unterteilt sind. Nach einem
Mausklick bleiben bestimmte Seitenteile bestehen, andere wiederum werden durch neue Informationen überlagert. Dieses Phänomen bezeichnet man als Frame- oder Fenstertechnik.
Abbildung 43: Fenstertechnik mit HTML
Um den Einsatz von Frames hat es unter den HTML-Experten lange Zeit Streit gegeben, da sie
noch vor wenigen Jahren nicht von allen Browsern20 angezeigt werden konnten. Desweiteren litten die ersten framefähigen Browser unter verwirrenden Effekten bzgl. der Navigation durch „Back“-,
„Forward“- und „History“-Funktionen.
All dies gehört inzwischen der Vergangenheit an. Trotzdem sollte der HTML-Autor nur dort Frames
20
Von einigen Browsern können Frames heute noch nicht dargestellt werden.
70
14 FRAMES
einsetzen, wo es sinnvoll ist. Eine zu verschachtelte Seitenaufteilung kann den Inhalt unleserlich machen.
14.2
Ein neues HTML-Gerüst: <FRAMESET> ersetzt <BODY>
Anstelle eines einzelnen HTML-Dokumentes wird im Browser nun ein ganzer Satz von Seiten geladen
und angezeigt. Mit dem Browser wird eine Steuerdatei geladen (natürlich auch in HTML verfaßt),
die die Aufteilung in einzelne Fensterbereiche definiert und jedem Fenster ein HTML-Dokument
zuordnet. Teilt man also im einfachsten Fall den WWW-Browser in zwei Fensterbereiche auf, so
benötigt man eine Steuerdatei und zwei weitere, „normale“ HTML-Seiten - für jedes Fenster eines.
Eine Steuerdatei enthält statt des bisher üblichen <BODY>-Tags einen Satz von Fenstern mit
<FRAMESET> und mehreren <FRAME>-Tags.
<HTML>
<HEAD> <TITLE> Mein Fenster </TITLE> </HEAD>
<FRAMESET ...>
<FRAME ...>
<FRAME ...>
...
<FRAME ...>
</FRAMESET ...>
</HTML>
Abbildung 44: <FRAMESET> ersetzt das bekannte <BODY>
Im <FRAMESET>-Tag wird mit verschiedenen Optionen die Fensterunterteilung festgelegt. So wird
zum Beispiel mit dem Zusatz ROWS Anzahl und Größe in horizontaler Ausrichtung vorgegeben.
Durch Kommata voneinander getrennt, wird je Fenster eine Größenangabe gemacht. Dabei sind feste
Pixelwerte und prozentuale Angaben (bezogen auf die aktuelle Browsergröße) möglich, doch mehr
dazu gleich.
Durch <FRAME SRC=> werden die Fenster dann mit gewöhnlichen HTML-Dokumenten gefüllt.
Eine Unterteilung in zwei gleich große Hälften und die Einbindung der nun bekannten Seiten
haewelmann.html und dschungel.html, zeigt die erste Beispiel-Steuerdatei:
14.2 Ein neues HTML-Gerüst: <FRAMESET> ersetzt <BODY>
<HTML>
<FRAMESET ROWS=“50%,50%“>
<FRAME SRC=“haewelmann.html“>
<FRAME SRC=“dschungel.html“>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 45: steuerdatei.html: Aufteilung in Zeilen mit ROWS.
71
72
14 FRAMES
Entsprechendes gilt in vertikaler Richtung mit der <FRAMESET>-Option COLS :
<HTML>
<FRAMESET COLS=“50%,50%“>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 46: Aufteilung in Spalten mit COLS.
14.3 Fensterkreuze: Zeilen und Spalten gemischt
14.3
73
Fensterkreuze: Zeilen und Spalten gemischt
ROWS und COLS können auch gemeinsam im <FRAMESET> stehen. Entsprechend viele <FRAME>Tags werden benötigt um die entstehenden Abschnitte auszufüllen.
<HTML>
<FRAMESET ROWS=“50%,50%“ COLS=“30%,70%“>
<FRAME SRC=“langstrumpf.html“>
<FRAME SRC=“mond.html“>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 47: ROWS und COLS kombiniert
An Stelle eines einzelnen <FRAME> kann auch ein ganzer <FRAMESET> stehen. So können einzelne Fenster nochmals unterteilt werden. In unserem Beispiel in Abbildung 48 auf der nächsten Seite
wird der Browser zunächst in drei gleich große Zeilen aufgeteilt. Im mittleren Fenster entstehen dann
nochmals zwei gleich große Spalten.
74
14 FRAMES
<HTML>
<FRAMESET ROWS=“33%,33%,33%“>
<FRAMESET COLS=“50%,50%“>
</FRAMESET>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 48: <FRAMESET>s geschachtelt.
Übrigens: Wird die Steuerdatei selbst nochmal im <FRAME>-Tag benutzt, so wird dies von den
meisten Browsern als Rekursion erkannt und ignoriert.
14.4 Größenangaben: fest und variabel
14.4
75
Größenangaben: fest und variabel
Die Größenangaben für ROWS und COLS können sowohl mit absoluten Pixeln als auch relativ mit
Prozentwerten angegeben werden. Erstere eignen sich, wenn einzelne Fenster an darin befindlichen
Bildern ausgerichtet werden. Da WWW-Browser jedoch in unterschiedlichen Dimensionierungen und
Auflösungen benutzt werden, sollten einige Fensterbereiche stets variable Größen besitzen.
Im Beispiel bleiben der linke und rechte Rand stets 100 Pixel groß. Den mittleren Bereich teilen sich
die beiden restlichen Fenster zu je 50%, egal wie breit der Browser am Bildschirm ist.
<HTML>
<!- FRAMESET COLS=“100,300,250,100“ ist unschön ->
<FRAMESET COLS=“100,50%,50%,100“>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 49: Feste und variable Größenangaben im <FRAMESET>
76
14 FRAMES
Anstelle von Prozentangaben kann auch ein „*“ für „nimm soviel du bekommen kannst“ stehen.
Multiplikatoren vor dem „*“ sind erlaubt, und führen, wie in Abbildung 50, rechts zu einem Fenster
doppelter Größe.
<HTML>
<FRAMESET COLS=“*,2*“>
</FRAMESET>
</HTML>
.................................................................................................
Abbildung 50: Das rechte Fenster ist doppelt so breit wie das linke.
14.5
Navigationsleisten
Der sinnvollste Einsatz für Frames ist zweifelsfrei die Navigationsleiste. Hierbei unterteilt der HTMLAutor das Browserfenster in einen feststehenden Teil (i.a.R. am linken oder oberen Rand) mit einem
Inhaltsverzeichnis, und einem variablen Teil, in den einzelne HTML-Dokumente nach Bedarf hineingeladen werden. So läßt sich per Klick im Inhaltsverzeichnis bequem zwischen einzelnen Kapiteln
hin- und herspringen ohne ständig die „Back“- und „Forward“-Funktionen des Browsers zu benutzen.
14.5 Navigationsleisten
77
Abbildung 51: Der Einsatz von Frames als Navigationsleisten
In unserem Beispiel wollen wir die drei, uns nun vertrauten, Geschichten anbieten. Links im Browser
soll ständig eine Übersicht (geschichten.html) stehen bleiben, rechts soll die jeweils ausgewählte Geschichte (haewelmann.html, langstrumpf.html und dschungel.html ) angezeigt
werden. Dazu verwendet man wie bisher ein <FRAMESET> mit zwei <FRAME>s, fügt jedoch jedem
<FRAME> die Option NAME= hinzu um die Fenster später anhand ihres Namens auseinanderhalten
zu können.
<HTML>
<FRAMESET COLS=“200,*“>
<FRAME NAME=“linkes_fenster“ SRC=“geschichten.html“>
<FRAME NAME=“rechtes_fenster“ SRC=“haewelmann.html“>
</FRAMESET>
</HTML>
78
14 FRAMES
Der Einfachheit halber hat der feste Navigationsbereich den Namen „linkes_fenster“, und der
eigentliche Geschichten-Teil den Namen „rechtes_fenster“ bekommen. Nun werden in dem
HTML-Dokument, das als Navigationsteil dient, die <A>-Tags um die Option TARGET= erweitert.
TARGET beschreibt das Zielfenster, in welches das zum Link passende Dokument hineingeladen
werden soll.
<HTML>
<HEAD> <TITLE>Geschichten</TITLE> </HEAD>
<BODY bgcolor=white>
<H1>Geschichten</H1>
<A HREF=“haewelmann.html“ TARGET=“rechtes_fenster“>Häwelmann</A><P>
<A HREF=“langstrumpf.html“ TARGET=“rechtes_fenster“>Pippi Langstrumpf</A><P>
<A HREF=“dschungel.html“ TARGET=“rechtes_fenster“>Dschungelbuch</A><P>
</BODY>
</HTML>
.................................................................................................
Abbildung 52: Querverbindungen: Im linken Fenster wird bestimmt, was rechts geladen wird.
Es gibt auch vordefinierte TARGET s, die alle mit einem Unterstrich beginnen und spezielle Aufgaben
erfüllen:
14.6 Was wird aus den Fensterlosen?
79
TARGET=“_blank“ Der Web-Browser öffnet ein neues Fenster und lädt das Dokument dort hinein.
Das neue Fenster besitzt keinen Namen.
TARGET=“_top“ Alle aktuellen Frames verschwinden, im Browser wird das angegebene Dokument geladen.
TARGET=“_parent“ Ist nur interessant, wenn mehrere <FRAMESET>s ineinander geschachtelt
werden. TARGET=“_parent“ lädt das angegebene Dokument anstelle des <FRAMESET>, zu
dem das aktuelle Dokument gehört. Existiert nur ein <FRAMESET>, oder ist das „oberste“
<FRAMESET> in eine Schachtelung betroffen, so wirkt dies wie TARGET=“_top“.
Es gehört übrigens zum „guten Ton“ Dokumente anderer Autoren bzw. Anbieter nicht in eigene
Frames einzubinden, da sonst der Eindruck entsteht sich mit fremden Federn schmücken zu wollen.
Verwenden Sie in solchen Fällen daher stets TARGET=“_top“.
14.6
Was wird aus den Fensterlosen?
Betrachten wir am Ende des Kapitels noch einmal die Sichtweise der Browser ohne Frameanzeige,
und wie wir als Autoren mit ihnen umgehen können:
Wenn <FRAMESET> das <BODY> ersetzt, was geschieht mit Betrachtern deren WWW-Browser
keine Frames verstehen? Richtig - in Kapitel 2, Formatelemente steht: Browser übergehen Tags, die
sie nicht verstehen. Kein <FRAMESET> und kein <FRAME> erscheint – der Browser bleibt leer.
Um diesen Kunden wenigstens einen Hinweis zu geben, daß hier sehr wohl Informationen angeboten
werden, diese jedoch nur mit „framefähigen“ Browsern betrachtet werden, gibt es den <NOFRAME>Tag. So kann ein kurzer Hinweis wie im Beispiel erfolgen:
<HTML>
<FRAMESET ...>
<NOFRAMES>
Leider benutzen Sie keine Frames.
</NOFRAMES>
<FRAME ...>
<FRAME ...>
...
<FRAME ...>
</FRAMESET>
</HTML>
Abbildung 53: Aus Gründen der Fairness: Hinweis für Fensterlose.
Praktischerweise ignorieren „framefähige“ Browser das <NOFRAME> womit sich beide Lager (Pro
und Contra Fenster) nicht ins Gehege kommen.
Tip
80
14 FRAMES
Checkliste
Wieviele HTML-Dateien benötigt man um eine Web-Seite mit zwei Fenstern darzustellen,
und warum?
Wie lassen sich Fenster verschachteln?
Wozu dient der <A>-Tag Zusatz TARGET?
Teil III
Anhang
A Konverter und Editoren
Wie Sie bei der Lektüre dieser Broschüre vielleicht schon festgestellt haben, ist die Verteilung von
Informationen über das WWW via HTML-Dateien zwar eine sehr schöne, dafür aber auch eine sehr
mühselige Angelegenheit.
Dies liegt nicht nur an der reinen ASCII-Darstellung von HTML-Dateien, wofür Sie den Preis eines
erhöhten Erstellungsaufwands zahlen, da Sie sämtliche benötigten Formatelemente miterfassen müssen. Richtig problematisch wird es, wenn Sie ein Dokument zweifach, nämlich sowohl für das Internet
als auch für die traditionelle Papierveröffentlichung layoutieren müssen.
Während Sie im Fall einer reinen Datenerfassung den entstehenden Aufwand wahrscheinlich durch
den Einsatz eines speziellen HTML-Editors reduzieren können, hat ein Konverter, d.h. ein Tool welches eine schon bestehende „Papierform“ in HTML überträgt wesentlich mehr Aufgaben zu bewältigen.
Dieser Umstand ist im Wesentlichen in der unterschiedlichen Lesart von HTML- und herkömmlichen
Dokumenten zu suchen; der entstehende Lapsus ist schnell aufgezeigt.
Sie werden mir beipflichten wenn ich die Behauptung aufstelle, daß ein normales Buch von vorn nach
hinten gelesen wird21 und damit einen eher sequentiellen Aufbau besitzt. Aber ist diese Annahme
auch in jedem Fall richtig?
Sofern Sie nach ein paar Sekunden des Nachdenkens auf die Antwort Nein gekommen sind, liegen
Sie richtig – es gibt nämlich auch Werke an welche die Herangehensweise eine durchaus andere
ist; stellvertretend sei hier die Gruppe der Nachschlagewerke oder Lexika erwähnt. Der wesentliche Unterschied zu dem erwähnten Krimi besteht nämlich darin, daß Sie ein Lexikon eher selten in
seiner Gesamtheit erfassen wollen, dafür aber nach einer bestimmten Information Ausschau halten.
Hierbei bedienen Sie sich dann spezieller Hilfsmittel, wie z.B. Inhaltsverzeichnis oder Index um die
gewünschten Stellen zu finden, der Aufbau ist also hierarchisch, von oben nach unten.
Da sich sequentielles Lesen am Bildschirm als äußerst ermüdend gestaltet, sollten gut gestaltete
HTML-Dokumente einen hierarchischen Aufbau besitzen. Vorstellbar wäre z.B. eine Art Inhaltsverzeichnis in führender Position mit zugeordneten Hyperlinks zu den einzelnen Kapiteln.
Für den HTML-Konverter stellt sich dabei das Problem, daß er nicht nur eine technische Umsetzung von dem, im ursprünglich verwendeten Textverarbeitungssystem benutzten Metaformat in die
HTML-Sprache vorzunehmen hat, im Regelfall muß er darüberhinaus noch eine vollkommen veränderte Dokumentenstruktur erzeugen. Diese Umsetzung bereitet jedoch häufig Probleme, und das
Resultat sind oft überlange und damit schlecht lesbare HTML-Seiten.
Im Folgenden will ich einige in diesem Umfeld eingesetzte Produkte vorstellen und dabei sowohl
Editoren als auch Konverter berücksichtigen.
21
Es sei denn, Sie gehören zu der Leserschaft, die auf der letzten Seite eines Krimis beginnen.
84
A
A.1
KONVERTER UND EDITOREN
LaTeX2HTML
LaTeX2HTML22 gehört zu der Gruppe von Konvertern, d.h. ausgehend von einem fertigen LATEXDokument ist es Aufgabe von LaTeX2HTML, dieses komplett in ein HTML-File zu überführen.
LaTeX2HTML löst das gezeigte Problem der Dokumentumstrukturierung durch den Aufbau einer
hierarchischen Struktur, deren Spitze das Inhaltsverzeichnis des Ausgangsdokuments darstellt, und
dessen Einträge über Hyperlinks mit den zugeordneten Textteilen verbunden sind.
Als Beispiel soll hier ein LATEX-Quellfile haw001.tex dienen, dessen Inhalt ein dreiseitiges Dokument erzeugt, welches in Abbildung 54 auf Seite 86 dargestellt ist.
Nach dem Aufruf23
latex2html haw001.tex
erhalten Sie eine Reihe von mehr oder weniger informativen Meldungen24 und schließlich ein Unterverzeichnis haw001, welches wiederum die Datei haw001.html enthält.
Laden Sie die Datei mit Netscape oder einem beliebigen anderen HTML-Browser, und Sie erhalten
ein HTML-Dokument, wie Sie es in Abbildung 56 auf Seite 88 sehen.
Dies ist aber bei weitem noch nicht alles was LaTeX2HTML für Sie tun kann.
Diverse Navigations-Knöpfe werden automatisch am Beginn einer jeden HTML-Seite eingefügt.
Außer Graphiken werden auch mathematische Formeln automatisch in HTML-Inline-Images
umgesetzt.
Inhalts-, Tabellen- und Abbildungsverzeichnisse werden zusammen mit Bibliographien, Fußnoten und LATEX-Querverweisen in HTML-Hyperlinks überführt.
Es können wahlweise Anweisungen abgesetzt werden, die sich ausschließlich auf die Papieroder die HTML-Version beziehen (conditional text ), u.v.a.m.
Eine komplette Beschreibung zu LaTeX2HTML finden Sie in der Originaldokumentation25 oder, als
HTML-Dokument unter dem URL
http://cbl.leeds.ac.uk/nikos/tex2html/doc/latex2html/latex2html.html
Nicht verschweigen möchte ich jedoch auch ein paar Schwächen, die das Programm meiner Meinung
nach im praktischen Einsatz gezeigt hat.
22
Die Schreibweise LaTeX anstelle von LATEX ist in diesem Fall korrekt.
Der Konverter ist auf dem Rechner bonsai installiert. Sofern Sie an einer lokalen Installation interessiert sind, nehmen
Sie bitte Kontakt mit einem der Autoren auf.
24
Das für unser Beispiel erzeugte Protokoll finden Sie in Abbildung 55 auf Seite 87.
25
Auf dem bonsai im Verzeichnis /usr/local/tex/latex2html.v96.1/docs/manual.tex
23
A.1 LaTeX2HTML
85
LaTeX2HTML kann sehr penibel sein, wenn es sich um den syntaktischen Aufbau des LATEXQuellfiles handelt. So wurden z.B. aus der folgenden LATEX 2" -Präambel
\usepackage{times}
\usepackage{moreverb}
\usepackage{german}
die beiden letzten \usepackage-Anweisungen ignoriert, während die für das Auge verwirrendere Zusammenfassung
\usepackage{times,moreverb,german}
ohne Probleme angenommen wurde.
Eingebundene Graphiken sind immer für ein Fehlverhalten gut. Die besten, in diesem Sinne
unproblematischsten, Erfahrungen habe ich mit dem Konstrukt
\begin{figure}[...]
\epsffile{foo.eps}
\end{figure}
gemacht. Modernere, insbesondere die LATEX 2" -Graphikumgebungen, wie z.B. \epsfig verlangen in der Regel ein gerütteltes Maß an nachträglicher Aufarbeitung.
Je weniger zusätzliche Pakete in den LATEX-File eingebunden werden umso besser. So ist die
Verwendung von Paketen wie z.B. multicolumn, twoside, fancyheadings u.v.a.m. bei
der Erstellung eines HTML-Dokuments sinnlos, da die Seitengestaltung vom HTML-Browser
vorgenommen wird.
Und, das Traurigste zum Schluß: Für LaTeX2HTML gibt es leider keine Wartung mehr, da der Autor
Nikos Drakos sein Geld mittlerweile durch ehrliche Arbeit verdienen muß. Alle auftretenden Fehler
gelten deshalb, wie in der TEX-Gemeinde üblich, nicht als Bug sondern als Feature.
86
A
Inhaltsverzeichnis
1
1 Der kleine Häwelmann
Es war einmal ein kleiner Junge, der hieß Häwelmann. Des Nachts schlief er i
einem Rollenbett und auch des Nachmittags, wenn er müde war; wenn er aber nich
müde war, so mußte seine Mutter ihn darin in der Stube umherfahren, und davo
konnte er nie genug bekommen.
Nun lag der kleine Häwelmann eines Nachts in seinem Rollenbett und konnt
nicht einschlafen; die Mutter aber schlief schon lange neben ihm in ihrem große
Himmelbett. „Mutter“, rief der kleine Häwelmann, „ich will fahren!“ Und die Mu
ter langte im Schlaf mit dem Arm ,aus dem Bett und rollte die kleine Bettstelle hi
und her, und wenn ihr der Arm müde werden wollte, so rief der kleine Häwelmann
„Mehr, mehr!“, und dann ging das Rollen wieder von vorne an. Endlich aber schlie
sie gänzlich ein; und soviel Häwelmann auch schreien mochte, sie hörte es nich
es war rein vorbei.
2 Die Reise mit dem Mond
3 Abenteuer mit der Sonne
2
Der kleine Häwelmann
Die Reise mit dem Mond
Da dauerte es nicht lange, so sah der Mond in die Fen
sterscheiben, der gute alte Mond, und was er da sah
war so possierlich, daß er sich erst mit seinem Pelzä
mel über das Gesicht fuhr, um sich die Augen auszu
wischen; so etwas hatte der alte Mond all sein Lebta
ge nicht gesehen. Da lag der kleine Häwelmann m
offenen Augen in seinem Rollenbett und hielt das e
ne Beinchen wie einen Mastbaum in die Höhe. Sei
kleines Hemd hatte er ausgezogen und hing es wi
ein Segel an seiner kleinen Zehe auf; dann nahm e
ein Hemdzipfelchen in jede Hand und fing mit be
den Backen an zu blasen. Und allmählich, leise, le
se, fing es an zu rollen, über den Fußboden, dann die Wand hinauf, dann kop
über die Decke entlang und dann die andere Wand wieder hinunter. „Mehr, mehr
schrie Häwelmann,
1
3
2
Abenteuer mit der Sonne
Da guckte endlich unten, ganz unten am Himmelsrande ein rotes rundes Gesicht z
ihm herauf, und der kleine Häwelmann meinte, der Mond sei wieder aufgegange
„Leuchte, alter Mond, leuchte!“ rief er.
Und dann blies er wieder die Backen auf und fuhr
quer durch den ganzen Himmel und gerade drauflos.
Es war aber die Sonne, die gerade aus dem Meere
heraufkam. „Junge“, rief sie und sah ihm mit ihren
glühenden Augen ins Gesicht, „was machst du hier
in meinem Himmel?“ Und eins, zwei, drei! nahm sie
den kleinen Häwelmann und warf ihn mitten in das
große Wasser. Da konnte er schwimmen lernen.
Und dann?
Ja und dann? Weißt du nicht mehr? Wenn ich und
du nicht gekommen wären und den kleinen Häwelmann in unser Boot genommen hätten, so hätte er doch
leicht ertrinken können!
3
Abbildung 54: (a) Das LATEX-Original. . .
A.1 LaTeX2HTML
87
This is LaTeX2HTML Version 95 (Thu Jan 19 1995) by Nikos Drakos,
Computer Based Learning Unit, University of Leeds.
OPENING /export/home/nativusr/work/broschueren/HTML/haw001.tex
Loading /var/tex/latex2html/styles/german.perl...
Reading ...
Processing macros ...
Translating ...0/4......1/4.....2/4....3/4........4/4.....
Writing image file ...
This is TeX, Version 3.141 (C version d)
(images.tex
LaTeX2e 1994/06/01 patch level 2
<
>
Generating postscript images using dvips ...
This is dvipsk 5.521a Copyright 1986, 1993 Radical Eye Software
’ TeX output 1995.11.07:1112’ - 6421_image
(- 6421_image001) texc.pro
special.pro [1<haw01.eps>]
special.pro [2<haw02.eps>]
(- 6421_image002) texc.pro
showpage, press return to continue
GS Writing img1.gif
showpage, press return to continue
GS Writing img2.gif
>
>
>>
>
>>
>
<
<
<
>
<
>
>
><
><
<<
>
>
<<
Doing section links .....
Doing table of contents ......
Done.
Abbildung 55: (b) . . . LaTeX2HTML bei der Arbeit. . .
88
A
Abbildung 56: (c) . . . und das HTML-Dokument nach der Konvertierung.
A.2 SoftQuad HoTMetaL
A.2
89
SoftQuad HoTMetaL
HoTMetaL ist eine Applikation, die dem Bereich der Editoren zuzuordnen ist, d.h. er ist als reine
Unterstützung bei der Erstellung von HTML-Dokumenten vorgesehen.
Die Art und Weise wie HoTMetaL Ihnen Hilfestellung gewährt kann kurz als eine Art „konsequente Führung“ beschrieben werden. Innerhalb eines X11-Fensters,26 fügt er Tags und andere FormatElemente in einer prägnant/übersichtlichen Darstellung in Ihr Dokument ein. Er wacht dabei penibel
darüber, ob Sie ein syntaktisch korrektes Dokument erstellen. Die Hilfsmittel, derer er sich hierfür
bedient, können wie folgt skizziert werden.
HoTMetaL fügt jeweils einen öffnenden und schließenden Tag in Ihr Dokument ein, d.h. die
Fehlerquelle der falschen Gruppierung entfällt. Alternativ dazu können ausgezeichnete Textstellen mit Tags umgeben werden.
Der Editor erkennt automatisch in welcher Tag-Umgebung Sie sich innerhalb Ihres Dokuments
befinden und erlaubt Ihnen in Abhängigkeit davon nur die Verwendung von solchen Tags, die
in der entsprechenden Umgebung gestattet sind.
Beim Laden und Speichern von HTML-Dokumenten wird ein Syntax-Check durchgeführt. Dokumente die HoTMetaL als syntaktisch falsch erkennt, können weder bearbeitet noch gespeichert werden.
Sonderzeichen werden automatisch erkannt und in die HTML-Ersatzdarstellung überführt.
HoTMetaL gestattet das Anlegen von sogenannten Style-Files, ähnlich dem Rahmen oder Gerüst welches ich in Kapitel 2.3 auf Seite 11, Formatelemente, vorgestellt habe.
Meine Beurteilung ist in diesem Fall sehr subjektiv. Nachdem HoTMetaL in meiner persönlichen
Gunst sehr lange ein Schattendasein geführt hat,27 habe ich ihn in den letzten Wochen und Monaten
aufgrund der oben zitierten Stärken immer mehr schätzen gelernt. Es gibt jedoch auch Punkte, welche
die Arbeit mit ihm erheblich erschweren können.
26
Ähnlich wie Netscape, wird HoTMetaL als lizensiertes Produkt im Binär-Format vertrieben.
Auch wenn diese Lizenz für Hochschulen sehr weit gefasst ist, sollte nicht vergessen werden,
daß die Herstellerfirma SoftQuad jederzeit diese Bedingungen ändern kann.
Einer der größten Vorteile von HoTMetaL ist auch gleichzeitig eines der gravierendsten Handicaps. HoTMetaL ist nicht in der Lage HTML-Code zu verarbeiten, den er nicht kennt. Das
Nichterkennen kann in manchen Fällen ausgesprochen früh anfangen, z.B. bei der Verwendung
von Formularen.
also unter Unix. Mittlerweile existieren auch Versionen für DOS/Windows, momentan liegen aber noch keine Erfahrungen damit vor.
27
Hierzu ein Auszug einer Anfrage in der Newsgroup comp.unix.solaris: „I’m looking for a good HTML-Editor
which runs under Solaris.“ – „Try /usr/bin/vi.“
Tip
90
A
.................................................................................................
Abbildung 57: Eine HTML-Datei, erstellt mit HoTMetaL.
A.3 The Ant
A.3
91
The Ant
The Ant ist ein Tool, das auf der Betriebssystembasis MS-DOS beheimatet ist. Es ist jedoch kein
eigentständiger Editor, sondern einer Erweiterung zum bekannten Word für Windows – es ist also
keine größere Einarbeitungs- oder Gewöhnungszeit zu erwarten.
Ähnlich wie beim Anlegen von Briefen oder Fax-Vorlagen, wird The Ant beim Aufruf eines neuen WinWord-Dokuments als Template geladen. Als Erweiterung erhalten Sie dadurch zwei zusätzliche Button-Reihen auf dem Bildschrim, über die sämtliche HTML-Funktionen abrufbar sind, Abbildung 58 zeigt ein Beispiel dafür.
Abbildung 58: Nochmal die HTML-Datei, diesmal mit The Ant.
Die Auszeichnung bestimmter Passagen wird dann, wie unter WinWord gewohnt, durchgeführt. Textteile werden per Mausziehen markiert und mit Mausklick auf den gewünschten Button mit dem zugeordneten Format ausgezeichnet.
Beim Abspeichern wird ein zweigleisiger Weg eingeschlagen: Neben dem gewohnten WinWordDOC-File, wird eine gleichnamige HTML-Datei erstellt.28 Der Vorteil dieses Verfahrens ist schnell
ersichtlich; soll ein HTML-File überarbeitet werden, muß lediglich die parallele DOC-Datei geändert
werden.
Weitere Highlights vom Ant:
28
Dabei ist aufgrund der DOS-Dateinamenskonventionen zu beachten, daß die HTML-Datei die Erweiterung .htm erhält
– was sie in ihrer Funktionalität aber keineswegs beeinträchtigt.
92
A
Jedes vorhandene Word-Dokument kann in das Ant-Template übernommen werden, d.h. WordTexte werden mit einem Schlag HTML-Dokumente. Die benötigte Hierarchiestruktur sowie
Hyperlinks müssen jedoch (noch) mit der Hand nachbearbeitet werden.
Die Nachbearbeitung von HTML-Dokumenten ist möglich.
Das Ant-Template kann in einen erweiterten Mode umgeschaltet werden, so daß verwendete
HTML-Tags graphisch dargestellt werden.
Die vorhandene Button-Leiste kann um häufig benötigte, eigene Funktionalitäten erweitert werden.
Obwohl es im Zusammenhang mit den deutschen WinWord-Versionen einige Kompatibilitätsprobleme gab, die nach Aussage der Autorin Jill Swift jedoch in naher Zukunft beseitigt sein sollen, wußte
The Ant bei den lokalen Tests durchaus zu überzeugen.
Im Gegensatz zu den beiden anderen Produkten ist The Ant Shareware. Eine eingeschränkte DemoVersion ist jedoch über den URL
http://telacommunications.com/ant
erhältlich. Über den gleichen URL können auch weitere Informationen, sowie die aktuelle Preisliste
abgerufen werden.
A.4 Xemacs
A.4
93
Xemacs
Selbstverständlich wäre eine Liste von Editoren unvollständig, wenn das Multifunktionstalent Xemacs
unerwähnt bliebe.
So wird es diejenigen unter Ihnen, die sich schon einmal mit Editoren – speziell unter UNIX – befaßt
haben, nicht verwundern, daß neben den gewohnten Benutzungsumgebungen für Mail, News, TEX und
diverse Programmiersprachen auch ein speziell für die Erstellung von HTML-Dateien abgestimmter
Makrosatz erhältlich ist.
Xemacs glänzt denn auch schon beim Anlegen eines HTML-Files mit der Möglichkeit Gerüst-Dateien
einzufügen, die einer Standardbibliothek entnommen werden, alternativ dazu aber auch auf persönliche Wünsche zugeschnitten sein können.
Danach kann die Auszeichnung einzelner Textelemente auf zwei verschiedene Arten menügeführt
vorgenommen werden.
Sie wählen aus dem Menü zuerst das gewünschte Format. In diesem Fall setzt Xemacs für Sie
die entsprechenden Tags und stellt den Textcursor in deren Mitte. Fügen Sie nun Ihren Text ein.
Sie markieren den Text wie üblich mit der Maus und wählen danach das gewünschte Format
aus dem entsprechenden Menü. Xemacs wird nun den markierten Text mit den relevanten Tags
umgeben.
Sofern der ausgewählte Tag weitere obligatorische Parameter verlangt, werden Sie von Xemacs
interaktiv danach gepromptet.29
Selbstverständlich werden auch Steuersequenzen und nationale Sonderzeichen richtig umgesetzt.
Ein einziges kleines Handicap gilt es jedoch zu umgehen, bevor Sie in den vollen Genuß aller XemacsVorteile kommen.
Starten Sie Xemacs durch Aufruf mit dem gewünschten HTML-File. Beispiel: xemacs foo.html
Durch die Dateinamenserweiterung .html lädt der Editor automatisch die benötigten Makros.
Wählen Sie unter dem Menüpunkt HTML die Option SET POPUP MENU und hieraus wiederum den Eintrag EXPERT MENU.
Alle gewünschten Tags und Optionen sind ab sofort innerhalb des Textfeldes durch Klick auf
die rechte Maustaste erhältlich (Abbildung 59 auf der nächsten Seite).
Meine subjektive Bewertung: Sofern Sie noch nicht ein Fan von Xemacs sind, hat der Editor mit
Hilfe seiner HTML-Sequenzen alle Möglichkeiten Sie zu überzeugen.
29
Auf diese Weise habe ich mit Hilfe von Xemacs meine ersten HTML-Tabellen erstellt, bevor ich das Tabellenformat
richtig verstanden hatte.
Tip
94
A
.................................................................................................
Abbildung 59: Konfiguration des Xemacs-Popup-Menues und seine anschließende Darstellung.
A.5 Netscapes Composer
A.5
95
Netscapes Composer
Seit dem Release Netscape Navigator Gold beinhaltet das Netscape-Paket neben dem WWW-Browser,
dem Mailtool und einem News-Reader auch einen HTML-Editor.
Vorläufiger Endpunkt der Entwicklung ist der Editor Composer als Bestandteil des Netscape Communicator. Der Composer kann über die Menüfunktion Communicator gestartet werden.
Abbildung 60: Netscapes Editor Composer.
Vorteile des Composers
„Einfache“, überwiegend textorienterte HTML-Seiten können schnell erstellt werden,
Innerhalb des World Wide Web vorhandene Seiten können direkt in den Editor übernommen
werden,
Die Textformatierung ist durch eine Winword-ähnliche Buttonstruktur simpel durchzuführen,
Die Definiton von Hintergrundfarben, etc. wird über Subfenster möglich gemacht,
Inline-Images, Tabellen und Hyperlinks können über Knöpfe, bzw. Menüs relativ simpel in das
HTML-Dokument eingefügt werden,
Der File-Transfer zwischen lokalem Rechner und dem WWW-Server kann unproblematisch
durchgeführt werden.
96
A
Nachteile des Composers
Bei der Übernahme von WWW-Seiten werden Inline-Images oft zerrissen, bzw. falsch dargestellt,
HTML-Tags die nicht im Composer-Menü vorhanden sind, können nur sehr umständlich in
die HTML-Seite eingebunden werden. Es besteht auch keine mir bekannte Möglichkeit das
Composer-Menü um häufig benötigte Tags zu erweitern oder entsprechende Buttons zu konfigurieren.
B Farbskala
Eine Übersicht der Farbwerte, die für Hintergründe und Texte verwendet werden können:
White
Blue
Yellow
Baker’s Chocolate
Bright Gold
Bronze II
Copper
Dark Brown
Dark Olive Green
Dark Slate Blue
Dark Turquoise
Dusty Rose
Forest Green
Grey
Hunter Green
Light Blue
Light Wood
Maroon
Medium Forest Green
Medium Sea Green
Medium Turquoise
Midnight Blue
Neon Pink
Old Gold
Orchid
Plum
Salmon
Semi-Sweet Chocolate
Sky Blue
Spring Green
Tan
Very Dark Brown
Violet Red
rgb=#FFFFFF
rgb=#0000FF
rgb=#FFFF00
rgb=#5C3317
rgb=#D9D919
rgb=#A67D3D
rgb=#B87333
rgb=#5C4033
rgb=#4F4F2F
rgb=#6B238E
rgb=#7093DB
rgb=#856363
rgb=#238E23
rgb=#C0C0C0
rgb=#215E21
rgb=#C0D9D9
rgb=#E9C2A6
rgb=#8E236B
rgb=#6B8E23
rgb=#426F42
rgb=#70DBDB
rgb=#2F2F4F
rgb=#FF6EC7
rgb=#CFB53B
rgb=#DB70DB
rgb=#EAADEA
rgb=#6F4242
rgb=#6B4226
rgb=#3299CC
rgb=#00FF7F
rgb=#DB9370
rgb=#5C4033
rgb=#CC3299
Red
Magenta
Black
Blue Violet
Brown
Cadet Blue
Coral
Dark Green
Dark Orchid
Dark Slate Grey
Dark Wood
Feldspar
Gold
Green Copper
Indian Red
Light Grey
Lime Green
Medium Aquamarine
Medium Goldenrod
Medium Slate Blue
Medium Violet Red
Navy Blue
New Midnight Blue
Orange
Pale Green
Quartz
Scarlet
Sienna
Slate Blue
Steel Blue
Thistle
Very Light Grey
Wheat
rgb=#FF0000
rgb=#FF00FF
rgb=#000000
rgb=#9F5F9F
rgb=#A62A2A
rgb=#5F9F9F
rgb=#FF7F00
rgb=#2F4F2F
rgb=#9932CD
rgb=#2F4F4F
rgb=#855E42
rgb=#D19275
rgb=#CD7F32
rgb=#527F76
rgb=#4E2F2F
rgb=#A8A8A8
rgb=#32CD32
rgb=#32CD99
rgb=#EAEAAE
rgb=#7F00FF
rgb=#DB7093
rgb=#23238E
rgb=#00009C
rgb=#FF7F00
rgb=#8FBC8F
rgb=#D9D9F3
rgb=#8C1717
rgb=#8E6B23
rgb=#007FFF
rgb=#236B8E
rgb=#D8BFD8
rgb=#CDCDCD
rgb=#D8D8BF
Green
Cyan
Aquamarine
Brass
Bronze
Cool Copper
Corn Flower Blue
Dark Green Copper
Dark Purple
Dark Tan
Dim Grey
Firebrick
Goldenrod
Green Yellow
Khaki
Light Steel Blue
Mandarian Orange
Medium Blue
Medium Orchid
Medium Spring Green
Medium Wood
Neon Blue
New Tan
Orange Red
Pink
Rich Blue
Sea Green
Silver
Spicy Pink
Summer Sky
Turquoise
Violet
Yellow Green
rgb=#00FF00
rgb=#00FFFF
rgb=#70DB93
rgb=#B5A642
rgb=#8C7853
rgb=#D98719
rgb=#42426F
rgb=#4A766E
rgb=#871F78
rgb=#97694F
rgb=#545454
rgb=#8E2323
rgb=#DBDB70
rgb=#93DB70
rgb=#9F9F5F
rgb=#8F8FBD
rgb=#E47833
rgb=#3232CD
rgb=#9370DB
rgb=#7FFF00
rgb=#A68064
rgb=#4D4DFF
rgb=#EBC79E
rgb=#FF2400
rgb=#BC8F8F
rgb=#5959AB
rgb=#238E68
rgb=#E6E8FA
rgb=#FF1CAE
rgb=#38B0DE
rgb=#ADEAEA
rgb=#4F2F4F
rgb=#99CC32
C Elemente von HTML
Dies ist eine kurze Zusammenfassung häufig benutzter Elemente, die im HTML 3 Standard definiert
sind. Nähere Informationen erhalten Sie beim World Wide Web Consotium (W3C) unter dem URL:
http://www.w3.org/pub/WWW/
a
applet
base
blockquote
br
cite
dd
dl
em
frame
h1
h2
h4
h6
hr
i
input
kbd
li
listing
menu
nextid
ol
p
pre
samp
render
strong
sup
title
ul
xmp
Anchor; source and (or) destination of a link
includes an (Java) applet
Base context document
Quoted passage
Line break
Name or title of cited work
Definition of term
Definition list, or glossary
Emphasized phrase
frame
Heading, level 1
Heading, level 2
Heading, level 4
Heading, level 6
Horizontal rule
Italic text
Form input datum
Keyboard phrase, e.g. user input
List item
Computer listing
Menu list
Next ID to use for link name
Ordered, or numbered list
Paragraph
Preformatted text
Sample text or characters
combine tags
Strong emphasis
supplement
Title of document
Unordered list
Example section
address
b
big
body
caption
code
dir
dt
form
frameset
Address, signature,
or byline for document or passage
Bold text
bigger fontsize
Document body
inserts a (table’s) caption
Source code phrase
Directory list
Term in definition list
Fill-out or data-entry form
defines a set of frames
h3
h5
head
html
img
isindex
lang
link
lh
meta
object
option
plaintext
q
select
small
sub
textarea
tt
var
Heading, level 3
Heading, level 5
Document head
HyperText Markup Language Document
Image; icon, glyph or illustration
Document is a searchable index
default language
Link from this document
List header
Generic meta-information
inserts a multimedia object
A selection option
Plain text passage
citation
Selection of option(s)
smaller fontsize
sublimation
An area for text input
Typewriter text
Variable phrase or substitutable
D Liste der Sonderzeichen
Die folgende Tabelle, gibt Ihnen einen Überblick der in HTML verfügbaren nationalen Sonderzeichen
bzw. ihrer Ersatzdarstellung. Bitte beachten Sie, daß in diesem Fall die angegebene Groß-/Kleinschreibweise zwingend ist. So wird beispielsweise durch die Verwendung von Ä ein anderes
Ergebnis erzeugt wird als durch ä.
Char
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
ÿ
Þ
ß
HTML
 
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
ÿ
Þ
ß
Description
nonbreaking space
capital A, grave accent
capital A, acute accent
capital A, circumflex accent
capital A, tilde
capital A, dieresis or umlaut
capital A, ring
capital AE diphtong (ligature)
capital C, cedilla
capital E, grave accent
capital E, acute accent
capital E, circumflex accent
capital E, dieresis or umlaut
capital I, grave accent
capital I, acute accent
capital I, circumflex accent
capital I, dieresis or umlaut
capital Eth, icelandic
capital N, tilde
capital O, grave accent
capital O, acute accent
capital O, circumflex accent
capital O, tilde
capital O, dieresis or umlaut
capital O, slash
capital U, grave accent
capital U, acute accent
capital U, circumflex accent
capital U, dieresis or umlaut
capital Y, acute accent
small y, dieresis or umlaut mark
capital THORN, icelandic
small sharp s, german sz ligature
Char
HTML
Description
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
&oslash
ù
ú
û
ü
ý
small a, grave accent
small a, acute accent
small a, circumflex accent
small a, tilde
small a, dieresis or umlaut mark
small a, ring
small ae diphtong (ligature)
small c, cedilla
small e, grave accent
small e, acute accent
small e, circumflex accent
small e, dieresis or umlaut mark
small i, grave accent
small i, acute accent
small i, circumflex accent
small i, dieresis or umlaut mark
small eth, icelandic
small n, tilde
small o, grave accent
small o, acute accent
small o, circumflex accent
small o, tilde
small o, dieresis or umlaut mark
small o, slash
small u, grave accent
small u, acute accent
small u, circumflex accent
small u, dieresis or umlaut mark
small y, acute accent
þ
þ
small thorn, icelandic
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
102
D
LISTE DER SONDERZEICHEN
E Index
Ä, 14
È, 14
&, 14
ä, 14
è, 14
>, 14
<, 14
ñ, 14
", 14
ß, 14
<ADDRESS>, 23
Autor, 23
<A>, 17
TARGET=, 78
_blank, 79
_parent, 79
_top, 79
#, 19
HREF, 17
NAME, 19
<BIG>, 13
<BLOCKQUOTE>, 21
<BODY>, 12
ALINK, 68
BACKGROUND, 67
BGCOLOR, 68
LINK, 68
TEXT, 68
VLINK, 68
<BR>, 12
CLEAR=
LEFT, 66
RIGHT, 66
<B>, 13
<CAPTION>, 58
ALIGN=, 58
<CITE>, 13
<CODE>, 13
<DD>, 30
<DFN>, 13
<DL>, 30
<DT>, 30
<EM>, 12
<FONT>, 24
FACE=, 24
SIZE=, 24
<FORM>, 47
ACTION=, 47
METHOD=
GET, 47
POST, 47
<FRAMESET>, 70
COLS=, 72
ROWS=, 70
<FRAME>, 70
NAME=, 77
SRC=, 70
<H1> - <H6>, 12
<H2>, 12
<HEAD>, 11
<HR>, 23
<HTML>, 11
<IMG>, 35, 43, 65
ALIGN=, 35
BOTTOM, 35
LEFT, 65
MIDDLE, 35
RIGHT, 65
TOP, 35
ALT, 36
BORDER=, 37
ISMAP, 43
SRC, 35
<INPUT>, 47
CHECKED, 50
MAXLENGTH, 48
NAME, 47
SIZE, 48
TYPE=
CHECKBOX, 50
PASSWORD, 48
RADIO, 50
104
RESET, 52
SUBMIT, 51
TEXT, 47
VALUE, 48, 50
<I>, 12
<KBD>, 13
<LANG>, 26
<LH>, 30
<LI>, 29
<NOFRAME>, 79
<OL>, 29
<OPTION>, 51
<PRE>, 12, 21
<P>, 12
<Q>, 25
LANG=, 25
<RENDER>, 26
STYLE=, 26
TAG=, 26
<SAMP>, 22
<SELECT>, 51
<SMALL>, 13
<STRONG>, 13
<SUB>, 22
<SUP>, 22
<TABLE>, 56
ALIGN=, 59
BORDER, 58
CELLPADDING=, 59
CELLSPACING=, 59
WIDTH=, 58
<TD>, 56
ALIGN=, 57
COLSPAN=, 57
NOWRAP, 57
ROWSPAN=, 57
<TEXTAREA>, 48
COLS, 48
ROWS, 48
<TH>, 57
<TITLE>, 12
<TR>, 56
<TT>, 13
<UL>, 29
The Ant, 91
Anwendungen, 39
externe, 39
Browser, 14, 43
external, 39
CGI-BIN (Programme), 47
Counter, 63
Editoren, 7, 83
Farbcode, 68
Farbskala, 97
Farbwerte, 97
Fließtext, 65
Formatelemente, 9
Klammerung, 9
Formatierungen, 4
Formeln
mathematische, 7, 23
Formulare, 47
Frames, 7, 69
FTP, 19
Grafiken, 35
Fließtext um, 65
Hintergrundbilder und -farben, 67
HoTMetaL, 89
HTML, 3, 99
Definition von, 3
Elemente von, 99
Standards von, 6, 61
http://, 18
Hyperlinks, 17
HyperText, 3
Images, 35
clickable, 43
inline, 35, 84
Javascript, 7
Konverter, 83
LaTeX2HTML, 84
Listen, 29
beschreibende (deskriptive), 30
Listenüberschriften, 30
numerierte, 29
unnumerierte, 29
105
verschachtelte, 31
MAILTO, 20
Map-File, 43
circle, 45
default, 45
polygon, 45
rectangle, 45
mapedit, 45
Marken, 4, 9
logische, 5
Markup, 3
Microsoft, 7, 24, 61
Internet Explorer, 43, 67
Multiple-Choice-Aufgaben, 50
Netscape, 7, 61, 95
Composer, 95
Enterprise-Server, 43
Navigator, 26, 43, 67
NEWS, 20
nph-count, 63
Proxy, 64
Querverweise, 17
Ressourcen, 4
Schaltflächen, 51
Sonderzeichen, 13, 14, 101
Sound, 39
Standard
offener, 6
Tabellen, 7, 55
-zellen, 56, 59
als Layouthilfen, 59
klassische, 55
Kompatibilitätsprobleme, 61
Tags, 9, 10
TELNET, 20
URL, 17, 35, 43, 45
Videosequenzen, 39
W3-Konsortium, 6
Xemacs, 93

Die kleine HTML

Transcrição

Documentos relacionados

Ferienhaus für 4 Personen in Regen

LCD4000 - Geier

Downloads und weitere Informationen finden Sie unter www

Hersteller Loewe Modell Individual 46 Compose 3D Preis ab 5.400

Anforderungen an Bildzusendungen

LED Strip Komplettset RGB

showcase - Traxon Technologies

Anforderungen von Picture Press an Bilddaten

showcase - Traxon Technologies

LED RGB Bulb E27 10W-DE