Th. Feuerstack et al.: Die kleine HTML

Transcription

Universitätsrechenzentrum
Thomas Feuerstack
Jens Vieler
Abt. Wiss. Anwendungen
Die kleine HTML-Schule
A/005/9601
© FernUniversität, Januar 1996
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 grundsätzliches Problem austauschbarer Dokumente : : : : : : : : : : : : : : :
4
1.3
Marken statt Formate : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
4
1.4
Standards oder Chaos? : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
6
1.5
Die Wahl des richtigen Editors : : : : : : : : : : : : : : : : : : : : : : : : : : : :
6
2 Formatelemente
9
2.1
Das Prinzip der Klammerung : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
9
2.2
Ein komplettes HTML-File : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
11
2.3
Die Bedeutung der Marken : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
11
2.4
Darstellung von Sonderzeichen
: : : : : : : : : : : : : : : : : : : : : : : : : : :
14
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
23
4.1
Blockquote : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
23
4.2
Pre : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
23
4.3
Horizontale Linien : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
24
4.4
Address : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
25
5 Listen
5.1
Numeriert : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
27
27
iv
INHALTSVERZEICHNIS
5.2
Unnumeriert : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
27
5.3
Beschreibend : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
28
5.4
Verschachtelt : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
28
6 Inline Images
33
7 Externe Anwendungen
37
II Erweiterungen und Zusätze
39
1 Clickable Images
41
1.1
Die Einbindung : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
41
1.2
Das Map-File : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
42
1.3
Das Resultat : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
43
2 Formulare
2.1
2.2
2.3
45
Eingabefelder : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
45
2.1.1
Normale Eingabefelder
: : : : : : : : : : : : : : : : : : : : : : : : : : :
45
2.1.2
Geheime Eingabefelder : : : : : : : : : : : : : : : : : : : : : : : : : : :
46
2.1.3
2-dimensionale Eingabefelder : : : : : : : : : : : : : : : : : : : : : : : :
46
Auswahl : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
48
2.2.1
Mehrfache Auswahl : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
48
2.2.2
Einfach ankreuzen : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
48
2.2.3
Auswahl mit Pull-Down-Menu : : : : : : : : : : : : : : : : : : : : : : : :
49
Aktions-Knöpfe : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
49
3 Tabellen
53
4 Counter in HTML-Dokumenten
57
5 Fließtext um Grafiken
59
6 Backgrounds – Hintergrundbilder und -farben
61
INHALTSVERZEICHNIS
v
III Anhang
63
A Konverter und Editoren
65
A.1 LaTeX2HTML : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
66
A.2 SoftQuad HoTMetaL : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
71
A.3 The Ant : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
73
A.4 Xemacs : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
75
B Farbskala
77
C Elemente von HTML 2.0
79
D Liste der Sonderzeichen
81
E Index
83
vi
ABBILDUNGSVERZEICHNIS
Abbildungsverzeichnis
1
Der ursprü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 führen zum gleichen Layout. : : : : : : : : : : :
10
7
Das vervollständigte Beispiel und seine Darstellung in Netscape. : : : : : : : : : :
11
8
Das obligatorische HTML-Gerüst. : : : : : : : : : : : : : : : : : : : : : : : : : :
12
9
Laden einer HTML-Datei. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
15
10
So sieht der Hyperlink mit dem WWW-Browser aus. : : : : : : : : : : : : : : : :
18
11
Ein hervorgehobener Absatz. : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
23
12
Vorformatierter Text : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
24
13
Horizontale Trennlinien : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
24
14
Am Ende jedes Dokumentes sollte der Autor stehen. : : : : : : : : : : : : : : : : :
25
15
Numerierte, unnumerierte und beschreibende Liste. : : : : : : : : : : : : : : : : :
29
16
Verschachtelte und gemischte Listen. : : : : : : : : : : : : : : : : : : : : : : : :
30
17
Inline Image. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
34
18
Inline Images ausgerichtet. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
35
19
Ein „Klick“ auf den Hyperlink, und ein MPEG-Browser zeigt die Videosquenz. : : :
37
20
Source-Code des Map-Files zum Häwelmann-Bild, und das Tool mapedit zur Generierung von Map-Files. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
42
21
Das Clickable Image fertig eingebunden. : : : : : : : : : : : : : : : : : : : : : : :
44
22
Einfaches Texteingabefeld : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
46
23
Geheime Eingaben : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
47
24
Mehrzeilige Eingaben : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
47
25
Mehrfach ankreuzen mit CHECKBOX : : : : : : : : : : : : : : : : : : : : : : : :
48
26
Nur einmal ankreuzen mit RADIO : : : : : : : : : : : : : : : : : : : : : : : : : :
49
27
Auswählen mit SELECT : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
50
vii
28
Abschicken des Formulares bzw. Eingaben löschen. : : : : : : : : : : : : : : : : :
51
29
Einfache Tabelle einmal ohne, einmal mit Rahmen, einmal mit 50% Breite des BrowserFensters, und einmal mit Spaltenüberschriften. : : : : : : : : : : : : : : : : : : : :
54
30
Spalten- und zeilenübergreifende Zellen. : : : : : : : : : : : : : : : : : : : : : : :
55
31
Der nph-count - Zähler im HTML-Dokument. : : : : : : : : : : : : : : : : : : : :
57
32
Fließtext um Grafiken. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
59
33
Neuer Absatz unter dem Bild mit Fließtext. : : : : : : : : : : : : : : : : : : : : :
60
34
Hintergrundbilder : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
61
35
Hintergrundfarbe schwarz. : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
62
36
(a) Das LATEX-Original: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
68
37
(b) : : : LaTeX2HTML bei der Arbeit: : : : : : : : : : : : : : : : : : : : : : : : : :
69
38
(c) : : : und das HTML-Dokument nach der Konvertierung. : : : : : : : : : : : : : :
70
39
Eine HTML-Datei, erstellt mit HoTMetaL. : : : : : : : : : : : : : : : : : : : : :
72
40
Nochmal die HTML-Datei, diesmal mit The Ant. : : : : : : : : : : : : : : : : : :
73
41
Konfiguration des Xemacs-Popup-Menues und seine anschließende Darstellung. : :
76
viii
Teil I
Basics
1 Willkommen bei HTML – aber was ist das?
Nun, ich denke eine gewisse Vorstellung von HTML werden Sie schon besitzen, anderenfalls hätten
Sie nicht zur vorliegenden Broschüre gegriffen. Bevor wir uns aber jetzt gemeinsam in die hochschlagenden Wellen des Internets stürzen, sollten wir uns auf ein gemeinsames Vokabular einigen, damit wir
im weiteren Verlauf dieses Skriptes keine Verständnisprobleme erzeugen. Lassen Sie mich deshalb vor
dem Beginn einige wenige(!) Worte vorausschicken.
1.1 Die pure Definiton?
HTML ist grundsätzlich von oben herab betrachtet nichts weiter als die Abkürzung von H yperT ext
M arkup L anguage. Sollten Sie durch die vollständige Schreibweise etwas verunsichert sein, so lassen
Sie sich beruhigen – die Erklä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 für ein bestimmtes Medium bequem aufbereitet werden können. In der Tat wollen Sie
ja Informationen über das World Wide Web (WWW) anbieten; HTML ist hierzu der Schlüssel.
HyperText ist der Ausdruck für eine bestimmte Darstellung von Text. Informationen die Sie über das
World Wide Web verbreiten, werden in aller Regel über Bildschirme oder Monitore angezeigt.
Im Gegensatz zur „klassischen“ Papierform müssen Sie jedoch hier mit einigen Einschränkungen leben. So ist es z.B. auf dem Bildschirm bedeutend umständlicher einen Text sequentiell, d.h.
in einer Linie von vorn nach hinten zu lesen, da der Bildschirm aufgrund seines originären Querformates nur begrenzt Informationen des ursprünglich „hochformatigen“ Dokuments anzeigen
kann. Ebenso sind Techniken wie das Anbringen von Lesezeichen (z.B. durch einen simplen
Kniff am Blattrand) sind elektronisch nur schwer realisierbar.
Abhilfe schafft hier der HyperText, der ein Prinzip vorsieht, welches die primäre Informationsmenge stark eingrenzt. So wird z.B. ein neuer Begriff nur über seinen Namen eingeführt, weitergehende Erläuterungen können dann bei Bedarf von der AnwenderIn 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 für Windows), wissen Sie bereits was mit dem Begriff Formate gemeint ist, die Heraushebung bzw. Auszeichnung
bestimmter Textteile. Selbstverständlich bietet Ihnen auch HTML die Möglichkeit der Formatierung, sie 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 grundsä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 Häwelmann
Es war einmal ein kleiner Junge, der hieß Häwelmann. Des Nachts schlief er in einem Rollenbett und auch
des Nachmittags, wenn er müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in der
Stube umherfahren: : :
Abbildung 1: Der ursprünglich erfasste Text.
Wahrscheinlich werden Sie jetzt bemängeln, daß der roh erfasste Text ein etwas dürftiges Aussehen
besitzt – und Sie haben Recht! Deshalb werden Sie folgerichtig hingehen und das Layout etwas aufpeppen wollen. So soll u.a. die Überschrift vom restlichen Text durch eine Fettformatierung und eine
größere Schriftart abgesetzt werden, der einleitende Nebensatz will ebenfalls herausgehoben sein, und
die Begriffe „Hä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 verändern, erweitern oder einfach nur elektronisch lesen zu lassen.
Was Sie in Ihrem Text nämlich bislang verwendet haben, sind sogenannte feste Formatierungen, d.h.
Sie verwenden für Ihren Text einen festeingestellten Font, zusätzlich werden Überschriften fett, Heraushebungen innerhalb des Textes jedoch kursiv dargestellt. Was aber, wenn die von Ihnen verwendeten Ressourcen2 für den Endanwender, aus welchen Gründen auch immer, nicht verfügbar sind?
1.3 Marken statt Formate
Grundsätzlich bieten sich Ihnen zwei Wege, dem oben skizzierten Dilemma zu entrinnen.
Sie versenden Ihren Text zusammen mit allen verwendeten Ressourcen. Dies ist zwar prinzipiell
möglich, hat aber den Nachteil, daß Ihr Textfile unnötig aufgeplustert wird; Ressourcen wie z.B.
2
Ressourcen sind in diesem Sinn alle Elemente, die benötigt werden um Ihren Text korrekt darzustellen. Neben den im
Dokument verwendeten Schrifttypen (Fonts) gehören dazu u.a. auch Farben.
1.3 Marken statt Formate
5
Fonts kosten in der Regel viel Platz.3
Sie verwenden anstelle der festen Formate logische Marken, die der Endanwender nach eigenem
Geschmack und Möglichkeit mit Formaten besetzt. Auch dies wollen wir am obigen Beispiel
vertiefen.
<Überschrift> Der kleine Häwelmann <Überschrift>
<Absatz>
<Ü2>Es war einmal ein kleiner Junge,<Ü2> der hieß <Hervorhebung>Häwelmann.<Hervorhebung> Des
Nachts schlief er in einem <Hervorhebung>Rollenbett<Hervorhebung> und auch des Nachmittags, wenn er
müde war; wenn er aber nicht mü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
Überschrift
Hervorhebung
Ü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 können. Andererseits können Sie durch eine einfache Umbesetzung der eingeführten
Marken Ihr Layout abändern. Nehmen wir aber einmal an, Sie verknüpfen Ihre Marken wie folgt:
Überschrift
Hervorhebung
Ü2
großer Schrifttyp, serifenlos
normaler Schrifttyp, italic
normaler Schrifttyp, kursiv
:::
so können Sie, und damit natürlich auch jeder andere Anwender, das Layout Ihres Dokuments ändern
ohne auf den Inhalt zugreifen zu müssen.
Abbildung 4: Der formatierte Text mit neuer Markenzuweisung.
Nach genau dem gleichen Prinzip arbeitet auch HTML, da über das WWW publizierte Dokumente auf
den unterschiedlichsten Rechnern mit den diversesten Ressourcen dargestellt werden können müssen.
Einer genaueren Beschreibung der unter HTML vorhandenen Markenelemente werden wir uns im folgenden Kapitel 2 auf Seite 9 widmen.
3
Von der rechtlichen Problematik, d.h. ob es Ihnen überhaupt erlaubt ist z.B. einen bestimmten Font zu verschicken, will
ich gar nicht erst reden.
6
1 WILLKOMMEN BEI HTML – ABER WAS IST DAS?
1.4 Standards oder Chaos?
Damit Ihr erstelltes HTML-Dokument frei über das Internet ausgetauscht werden kann, dürfen Sie natürlich nur solche Markenelemente verwenden, die auf den diversen Browsern erkannt und dargestellt
werden können. Um die daraus folgenden Probleme zu umgehen, ist HTML standardisiert worden, d.h.
Browser die HTML-Dokumente darstellen wollen, müssen eine abgestimmte Liste von Forderungen
erfüllen.
HTML wird jedoch auch weiterentwickelt, d.h. es werden Markierungselemente geschaffen, die bislang noch nicht Teil des verabschiedeten Standards sind. Jetzt hängt es natürlich von Ihrem Browser
ab, welchen Standard er unterstützt – und damit welche Elemente er letztendlich darstellen kann.4
Ich will es im folgenden so halten, daß ich mich auf die Formatierungselemente beschränke, die Teil
des ursprünglich verabschiedeten HTML-Standards sind. Darüberhinaus stelle ich jedoch auch Möglichkeiten vor, die Inhalt eines jüngeren Standards sind bzw. erst zukünftig Standard werden sollen;
ich werde an den entsprechenden Stellen explizit darauf hinweisen.
Neben dem zur Zeit gültigen Standard sind folgende Normierungen in Vorbereitung bzw. z.Zt. der Veröffentlichung dieser Broschüre bereits verabschiedet worden.
HTML 2.0 Unterstützung von Formularen.
HTML 3.0 Einführung von Tabellen.
HTML 3.1 Darstellung von mathematischem Formelsatz.
Um das Chaos zu komplettieren, kreieren einige Hersteller eigene, sogenannte Industriestandards. So
unterstützt z.B. Netscape eigene Erweiterungen des in HTML 3.0 normierten Tabellenformats.
1.5 Die Wahl des richtigen Editors
Um etwas so komplexes wie eine HTML-Seite aufzubauen, brauchen Sie natürlich auch entsprechendes Werkzeug; in diesem Fall einen Editor. Obwohl einige spezielle Editoren zur Erstellung von HTMLDateien existieren, ist die Erfassung generell mit jedem Produkt möglich, das in der Lage ist Dateien
im ASCII-Format abzulegen.5
Im weiteren Verlauf dieses Skripts werden wir diesem Umstand Rechnung tragen und alle Beispiele
so darstellen, daß Sie sie direkt mit einem ASCII-Editor übernehmen können.
Beispiele für die Benutzung spezieller HTML-Editoren, bzw. Konvertierer finden Sie übrigens im Anhang.
4
Unbekannte Markierungselemente werden von den Browsern defaultmäßig ignoriert – was gelegentlich zu sehr unschönen Effekten führt.
5
unter DOS z.B. der edit, unter UNIX vi
1.5 Die Wahl des richtigen Editors
Checkliste
Versuchen Sie, möglichst ohne Zuhilfenahme der Broschüre, die folgenden Fragen zu beantworten:
Worin bestehen die Unterschiede zwischen einem auf Papier vorliegendem Dokument,
und einem welches über das World Wide Web publiziert wird?
Mit welchen Schwierigkeiten müssen Sie rechnen, wenn Sie einen Text veröffentlichen, der
auf mehreren unterschiedlichen Rechnern gelesen werden soll?
Wie können Sie diese Schwierigkeiten umgehen?
7
2 Formatelemente
Wie Sie im letzten Kapitel gesehen haben, ist es bei der Erstellung auszutauschender Dokumente von
Vorteil, dem Text Formate über Markenelemente zuzuweisen. HTML trägt diesem Umstand selbstverständlich Rechnung; um einem Dokument jedoch Formate zu verleihen, müssen Sie natürlich wissen,
welche Markenelemente HTML unterstützt.
Einige wenige dieser Markenelemente will ich im folgenden bekanntmachen – schließlich sollen Sie so
schnell wie möglich selbst HTML-Seiten verfassen. Bevor es jedoch soweit ist, mö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 für Windows gearbeitet haben, wissen Sie bereits
wie einzelne Textteile formatiert werden; der ausgewählte Text wird zuerst markiert, bevor der Markierung ein Format zugewiesen wird.
Da HTML aufgrund seines ASCII-Formates die Möglichkeit einer Markierung von Textelementen,
z.B. durch Ziehen mit der Maus, prinzipiell nicht kennt, muß dieses Problem auf andere Art und Weise gelö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 ausgewä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.6
<H2>
</H2>
<P>
<EM>Es war einmal ein kleiner Junge,</EM> der hieß <I>Häwelmann.</I> Des
Nachts schlief er in einem <I>Rollenbett</I> und auch des Nachmittags, wenn
er müde war; wenn er aber nicht müde war, so mußte seine Mutter ihn darin in
der Stube umherfahren: : :
</P>
Abbildung 5: Unser Beispieltext in „echter“ HTML-Notierung.
Wie Sie sehen, sind die Unterschiede zum ursprünglichen Beispiel nicht sonderlich gravierend. Den
Findigen unter Ihnen wird aber (außer den geänderten Tag-Namen) der ein oder andere Unterschied
6
Tag (engl.) = Schildchen, Etikett
10
2 FORMATELEMENTE
aufgefallen sein. Folgende Regeln sollten Sie sich für die Erstellung von HTML-Dateien merken oder
zumindest griffbereit haben.
Die Tags sind jeweils mit einer ö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.7
Zu jeder Klammerung gehört jeweils ein öffnender und ein schließender Tag. Zur Unterscheidung wird dem schließenden Tag ein Schrägstrich vorangestellt.
Beispiel: <P>: : : </P>
Öffnende Tags können neben dem Tag-Namen weitere, optionale Parameter enthalten.
Beispiel: <P ALIGN=CENTER>
Tags dürfen gruppiert werden, d.h. innerhalb einer vorhandenen Klammerung dürfen weitere
Tags verwendet werden. Es ist jedoch darauf zu achten, daß der zuletzt geöffnete Tag als erster
wieder geschlossen wird, um die Gruppenhierarchie nicht zu verletzen.
Beispiel: <P><EM>: : : </EM></P>
HTML kennt prinzipiell keine Zeilenumbrüche, da diese vom lesenden Browser selbst erzeugt
werden. Aus diesem Grund dient die Positionierung der Tags nur einer besseren Übersicht, und
hat keinerlei Einfluß auf das Layout (s.a. Abbildung 6).
<H2>
</H2>
<P>
</P>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<H2> Der kleine Häwelmann </H2>
<P> <EM>Es war einmal ein kleiner Junge,</EM> der hieß <I>Häwelmann.</I> Des
der Stube umherfahren: : : </P>
Abbildung 6: Unterschiedliche Markenposition führen zum gleichen Layout.
7
Die Beispiele dieser Broschüre wurden nur der besseren Übersicht halber ausschließlich groß gesetzt.
2.2 Ein komplettes HTML-File
11
2.2 Ein komplettes HTML-File
Sofern Sie das obige Beispiel bereits abgeschrieben und in einer HTML-Datei abgelegt haben, brennen Sie wahrscheinlich darauf, es ü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 Häwelmann</TITLE>
</HEAD>
<BODY>
<H2> Der kleine Häwelmann </H2>
<P>
</P>
</BODY>
</HTML>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 7: Das vervollstä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 möchte ich zu diesen und einigen weiteren Marken ein paar Anmerkungen machen.
<HTML> – Dieser Tag wird grundsätzlich bei der Erstellung von HTML-Dateien gesetzt und umschließt das komplette File.
<HEAD> – eröffnet fü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
Übertitelung der aufgebauten Seite benutzt. Netscape stellt ihn z.B. im Titelbalken des eigenen
Fensters dar (s.a. Beispiel 7 auf der vorherigen Seite).
<BODY> – kennzeichnet den Beginn des eigentlichen HTML-Files. Alle in Body enthaltenen Informationen werden auf der HTML-Seite umgesetzt.
Ich mö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 müssen, können
Sie sich Schreibarbeit sparen, wenn Sie die folgenden Anweisungen quasi als Gerüst abspeichern.
<HTML>
<HEAD>
<TITLE>
</HEAD>
<BODY>
</TITLE>
</BODY>
</HTML>
Abbildung 8: Das obligatorische HTML-Gerüst.
Innerhalb der <BODY>-Umgebung können Sie dann die folgenden Tags für das Layout verwenden.
<H2> – definiert eine Überschrift der zweiten Hierarchiestufe. Generell dürfen Sie Ü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 können Sie innerhalb des Absatzes auch keine tabellarischen Funktionen durch
Ausrichtung über Leerzeichen vornehmen, sondern müssen diese über ein spezielles Tabellenformat (s.a. Kapitel 3 auf Seite 53) durchführen, bzw. den automatischen Umbruch mit Hilfe des
<PRE>-Tags abschalten.
<EM> – sorgt für eine Hervorhebung des umklammerten Textbereichs. Diese Marke fü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> – fü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 öffnenden Form
existiert.
2.3 Die Bedeutung der Marken
13
Neben den im Beispiel verwendeten Tags existieren weitere Markierungen, die für bestimmte Hervorhebungen benutzt werden sollten. Grundsätzlich wird dabei zwischen logischen, d.h. der Browser
wählt das darzustellende Format selbst, und festen (die festgelegte Auszeichnung wird auf alle Fälle
durchgeführt) Markierungen unterschieden.8
Zusätzlich sollen die Tags durch ihren Namen einen Bezug zu ihrem Verwendungszweck herstellen
(<DFN> = Definition, <KBD> = Keyboard, usw.), Sie können sie jedoch selbstverständlich nach Belieben verwenden.
<DFN> – (logisch) für Definitionen innerhalb des Textes.
Beispiel: Rollenbett = Häwelmanns Nachtquartier
<CITE> – (logisch) für Buch- und Filmzitate etc.pp.
Beispiel: s.a. Th. Storm, Der kleine Häwelmann
<CODE> – (logisch) für die Darstellung von Computer-Code.
Beispiel: Häwelmanns Lieblingsprogramm begann wie folgt.
haewel: proc options(main);
DCL Rollbett FIXED;
<KBD> – (logisch) Tastatur-Eingabe einer BenutzerIn.
Beispiel: Login: Häwelmann
<SAMP> – (logisch) u.a. für Statusmeldungen eines Computers.
Beispiel: Login Häwelmann ignored
<STRONG> – (logisch) für besonders starke Hervorhebungen innerhalb eines Textes.
Beispiel: „Junge“, sagte der Mond, „Hast Du noch nicht genug?“
<VAR> – (logisch) stellt eine metasyntaktische Variable dar. Sofern Ihnen das Wort „metasyntaktisch“
Schwierigkeiten bereitet;9 es bedeutet lediglich daß die Variable einen allgemeinen Platzhalter
für mehrere verschiedenartige Inhalte darstellt.
Beispiel: Ein schließendes Formatelement hat die Form </TAG>. Sie können diese Marke der
besseren Verständlichkeit halber auch mit den Werten KBD oder DFN besetzen, </TAG> stellt
die metasyntaktische Variable dar.
<B> – (fest) der umklammerte Text wird fett ausgezeichnet.
Beispiel: „Nein“, schrie Häwelmann, „mehr, mehr!“
<TT> – (fest) ein Schreibmaschinentyp mit fester Buchstabenbreite.
Beispiel: Neben seinem Rollenbett besaß Häwelmann auch eine Schreibmaschine.
8
In den folgenden Beispielen habe ich versucht den Schrifttyp zu verwenden, den auch der Browser anzeigen würde.
Speziell bei den logischen Auszeichnungen kann ich jedoch für das Schriftbild nicht garantieren.
9
Ich für meinen Teil mußte länger drüber nachgrübeln.
14
2 FORMATELEMENTE
2.4 Darstellung von Sonderzeichen
Einige wenige Zeichen haben in HTML eine besondere Bedeutung und können aus diesem Grund nicht
„so wie sie sind“ eingegeben werden. Das klingt Ihnen zu ungenau? Nun, in diesem Fall werden Sie
spätestens dann mit dem Problem konfrontiert werden, wenn Sie innerhalb Ihres Textes eine spitze
Klammer (<,>) darstellen wollen. Warum? Wie Sie sich erinnern wird durch die spitzen Klammern
ein Tag bekanntgemacht; und aus diesem Grunde benötigen Sie innerhalb Ihres HTML-Dokuments
eine Ersatzdarstellung.
Neben den spitzen Klammern sind von dieser Regelung auch noch der Ampersand (&), die Anführungsstriche (”) und, Sie ahnen es wahrscheinlich schon, nationale Sonderzeichen (ä,ß,È,ñ, u.v.a.m)
betroffen.
Da eine komplette Auflistung aller Sonderzeichen den Rahmen dieses Kapitels sprengen würde, will
ich Ihnen neben den oben erwähnten Symbolen in der folgenden Tabelle ein paar Beispiele für Akzentuierung geben. Eine komplette Aufstellung aller nationaler Sonderzeichen finden Sie im Anhang.
&
<, >
"
ß
ä, Ä
ñ
È, è
&
<, >
”
ß
ä, Ä
ñ
È, è
Tabelle 1: Ersatzdarstellung von Sonderzeichen
Tip !
Hinweis: Bei der Ersatzkodierung von Sonderzeichen unterscheidet HTML ausnahmsweise die Groß/Kleinschreibung. Wä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
über einen Browser wie Netscape probeweise betrachten können.
1. Klicken Sie innerhalb der Netscape-Menüleiste auf das Feld File.
2. Wählen Sie aus dem erscheinenden Menü die Option Open File: : : .
3. Suchen Sie in der nun erscheinenden Dialogbox Ihr HTML-File, markieren Sie es, und klicken
Sie auf OK.
Tip !
Für den Fall, daß Sie mit Browser und Editor parallel arbeiten, müssen Sie nicht nach jeder Änderung
den Editor verlassen und Netscape neu starten. Speichern Sie einfach Ihre Änderungen ohne den Editor
2.5 Ansichtssachen
15
zu verlassen, und klicken Sie im Netscape-Fenster auf den Button Reload – der Fensterinhalt wird
Ihren Änderungen automatisch angepaßt.10
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 lö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 Änderungen durchgeführt worden sind.
Erklären Sie den Unterschied zwischen den Markierungen <TT> und <SAMP>.
10
Dies ist eine Arbeitsweise die unter UNIX vorzüglich funktioniert. Sollten Sie DOS als Betriebssystemgrundlage gewählt haben, wundern Sie sich nicht über eventuell auftretende Schwierigkeiten.
3 Hyperlinks
Sicherlich einer der wichtigsten Gründe für die große Akzeptanz und die rasche Verbreitung des WorldWideWeb, 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 verknüpft. Fü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 können.
Eine Schlüsselrolle bei den Hypertext-Referenzen spielt dabei der URL (Uniform Recource Locator),
der den genauen Standort eine Dokumentes im Internet spezifiziert. Ein URL setzt sich zusammen aus
Internetdienst://Rechnername/Verzeichnisname/Dokumentenname
Internetdienst
Rechnername
evtl. Verzeichnisname
Dokumentenname
HTTP (WorldWideWeb), FTP,
Gopher, Telnet, News, Mail.
Rechneradresse, bzw -name im Internet.
Verzeichnispfad des Dokumentes.
Das Dokument selbst.
Im HTML werden Hyperlinkanfang und -ende mit <A>- und </A>-Tag gebildet. Dabei wird im <A>Tag zusätzlich das Attribut HREF fü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 Häwelmann“ mit dem Mauszeiger angeklickt wird:
18
3
HYPERLINKS
Hier entlang zum Buch
<A HREF=“http://www.irgendwo.de/haewel.html“>
Der kleine Häwelmann </A>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 10: So sieht der Hyperlink mit dem WWW-Browser aus.
Dies bedeutet 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.11
Der Dokumentenname.
Der hervorgehobene Text, der angeklickt wird.
Ende des Hyperlinks.
Entfällt die Angabe eines Dokumentennamens, so werden Standard-Dokumente mit den Bezeichnern
welcome.html oder index.html 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 der Dokumentenname aus:
11
Auch wenn das Internet z.Zt. mehrere tausend Rechner umfaßt: Der Name www.irgendwo.de ist als Beispielrechner
ganz willkürlich gewählt worden und bietet keinen Bezug zur Realitä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. Zunächst muß die „anzuspringende“ Stelle im Dokument markiert werden mit dem <A>Tag und dem Attribut NAME :12
<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 Häwelmann die Sonne trifft. </A>
3.3 ...zu bestimmten Stellen in anderen HTML-Dokumenten
Hierbei handelt es sich um die Kombination der letzten beiden Fälle:
<A HREF=“http://www.irgendwo.de/geschichten/haewel.html#sonne“>
Wo der Kleine Häwelmann die Sonne trifft. </A>
3.4 ...zu anderen Informationsdiensten
Anstelle der Hypertext-Referenz http:// (für das WWW) können auch andere Internetdienste eingesetzt
werden.
FTP Überträgt eine Datei auf den Rechner, auf dem der WWW-Browser läuft.
<A HREF=“ftp://ftp.irgendwo.de/pub/geschichten/buch.zip“>
Ein Buch </A>
12
Der schließende Tag </A> darf hier ausnahmsweise mal wegfallen.
20
3
HYPERLINKS
GOPHER Zeigt die im Gopher befindlichen Infoseiten an.
<A HREF=“gopher://gopher.irgendwo.de/geschichten/buch“>
Ein Buch </A>
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 der Seite 37).
<A HREF=“telnet://irgendein_rechner.irgendwo.de“>
Zum Rechner </A>
NEWS Stellt die Verbindung zur angegebenen Newsgruppe13 her. Der Bezug auf einen NNTP-Server
(News-Server) entfällt an dieser Stelle, da diese Einstellung in den Optionen des WWW-Browsers vorgenommen wird (siehe Hilfeseiten des WWW-Browsers).
<A HREF=“news:de.geschichten.haewelmann“>
Alles Rund um den Häwelmann </A>
MAILTO Der Benutzer erhält ein Formular zur Generierung einer Mail an die angegebene Adresse.
Bei MAILTO und NEWS wird auf die „//“ verzichtet.
<A HREF=“mailto:[email protected]“>
Dem schreib ich </A>
13
News: Diskussionsgruppen zu bestimmten Themen; wird über das Internet verteilt.
3.4 ...zu anderen Informationsdiensten
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?
21
4 Weitere Formatelemente
4.1 Blockquote
Der <BLOCKQUOTE>-Tag wird verwendet, wenn Absätze hervorgehoben werden sollen. Dazu wird
der betreffende Absatz an beiden Rändern eingerückt. Diese Technik wird oft fü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 Hä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
Die automatische Textformatierung bzgl. Zeilenbreite und Ausrichtung kann mit dem <PRE>-Tag (für
preformated) ausgeschaltet werden. Dies findet hä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.
24
4 WEITERE FORMATELEMENTE
<PRE>
Der
kleine
Häwelmann
</PRE>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 12: Vorformatierter Text
4.3 Horizontale Linien
Um Absätze noch deutlicher voneinander zu trennen als es mit dem <P>-Tag geht, kann eine horizontale Trennlinie eingefü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 13: Horizontale Trennlinien
4.4 Address
25
4.4 Address
Der <ADDRESS>-Tag dient der Benennung des Autors eines HTML-Dokumentes, und beinhaltet häufig dessen Name, E-Mailadresse, sowie das Datum der Erstellung.
...
<HR>
<ADDRESS>
Der kleine Häwelmann - Theodor Storm / Ingeborg Meyer-Rey<BR>
3. Auflage 1986
</ADDRESS>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 14: Am Ende jedes Dokumentes sollte der Autor stehen.
Checkliste
Welche Form der Hervorhebung wird mit dem <BLOCKQUOTE>-Tag erzielt?
In welchen Fällen kann es sinnvoll sein die automatische Textformatierung auszuschalten?
5 Listen
Für Aufzä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 Listeneinträ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 Listeneinträgen wird ein <LI> vorangestellt (siehe auch Abbildung 15 auf Seite 29).
<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. Zweitens werden sie mit dem
<UL> (UL für „unordered list“) gebildet.
28
5 LISTEN
<UL>
<LI> Listeneintrag
<LI> noch ein Listeneintrag
...
<LI> vorläufig letzter Listeneintrag
</UL>
5.3 Beschreibend
Im Gegensatz zu den bereits genannten Listentypen verwenden beschreibende (deskriptive) Listen keine Punkte oder Ordinalzahlen vor jedem Listeneintrage. Sie verwenden 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 dem <DL> umrahmt.
<DL>
<DT>
<DD>
<DT>
<DD>
...
<DT>
<DD>
</DL>
erste Eintragsüberschrift
erster Listeneintrag
zweite Eintragsüberschrift
zweiter Listeneintrag
n-te Eintragsüberschrift
n-ter Listeneintrag
5.4 Verschachtelt
Die einzelnen Listentypen lassen sich auch ineinander verschachteln. Dabei sollte (erfahrungsgemäß)
eine dreistufige Verschachtelungstiefe nicht überschritten werden.14
Eine Verschachtelung erzielt man, indem innerhalb einer Liste anstelle eines Listeneintrages eine weitere Liste eingefügt wird (siehe auch Abbildung 16 auf Seite 30).
Zwei zusammenfassende Beispiele finden Sie auf den folgenden Seiten.
14
Die hier erwähnten Erfahrungen beruhen sowohl auf organisatorischen als auch auf technischen Hintergründen. So werden Listenverschachtelungen ab einer bestimmten Schachtelungstiefe unübersichtlich, zusätzlich verweigern jedoch auch
einige Browser ihre Mitarbeit.
5.4 Verschachtelt
29
<OL>
<LI> Der Häwelmann liegt im Bett.
<LI> Der Mond steht am Himmel.
<LI> Die Sonne kommt aus dem Meere herauf.
</OL>
<UL>
</UL>
<DL>
<DT>
<DD>
<DT>
<DD>
<DT>
<DD>
</DL>
Der Häwelmann
liegt im Bett.
Der Mond
steht am Himmel.
Die Sonne
kommt aus dem Meere herauf.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 15: Numerierte, unnumerierte und beschreibende Liste.
30
5 LISTEN
<UL>
<UL>
<LI> Er ist nicht müde..
<LI> Er will in der Stube umherfahren.
</UL>
</UL>
<OL>
<OL>
</OL>
</OL>
<OL>
<UL>
</UL>
</OL>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 16: Verschachtelte und gemischte Listen.
5.4 Verschachtelt
Checkliste
Welche unterschiedlichen Listentypen gibt es im HTML?
Wie werden verschachtelte Listen konstruiert und was ist dabei zu beachten?
31
6 Inline Images
Text – schön und gut. Aber wie sieht es mit Grafiken, Bildern und Ikonen aus? Gerade diese Blickfänger runden das Erscheinungsbild eines HTML-Dokumentes ab und steigern seinen Wiedererkennungswert.
Im Prinzip könnte ein Bild in jedem beliebigen Grafikformat vorliegen, um in eine HTML-Seite eingebunden, und im WorldWideWeb übertragen zu werden. Leider kann jedoch nicht jeder WWW-Browser
jedes Grafikformat umsetzen und darstellen. Als kleinster gemeinsamer Nenner empfielt sich daher die
Benutzung von GIF-Bildern, die von NCSA Mosaic, Netscape, Arena, etc. verarbeitet werden können.
Der Softwaremarkt bietet eine Reihe von Konvertierungsprogrammen, die Ihre Bilder in GIF-Bilder
überführen können. Wenn möglich wählen sie dabei das GIF89 interlaced-Format. Das Bild wird dann
während der Übertragungsphase nicht von oben nach unten auf dem Bildschirm aufgebaut, sondern
sofort im Ganzen gezeigt und nach und nach klarer aufgelöst. Übertragungsbedingte Leerlaufzeiten
erscheinen dem Betrachter so kü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 Häwelmann sieht das so aus wie in Abbildung 17 auf der nächsten Seite.
Darü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 18 auf Seite 35).
34
6 INLINE IMAGES
<IMG SRC=“haewel1.gif“></P>
<P> Hier entlang zum Buch
<A HREF=“haewel.html“> Der kleine Häwelmann </A>
</P>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 17: Inline Image.
Und noch etwas, was häufig vergessen wird: Es gibt immer noch WWW-Browser die prinzipiell keine
Grafiken anzeigen, weil sie z.B. ohne grafische Bedienungsoberflächen arbeiten. Geben Sie deshalb
dem <IMG>-Tag zusä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 wäre.
<IMG SRC=haewel1.gif ALT=“Der kleine Häwelmann im Bett“>
35
<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 für Text <IMG ALIGN=TOP SRC=haewel4.gif>
am Bildkopf.</P>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 18: Inline Images ausgerichtet.
Checkliste
Welches Grafikformat sollte für Inline Images verwendet werden? Nennen Sie Gründe.
Wie werden Inline Images ausgerichtet?
7 Externe Anwendungen
Bisher habe ich Verweise auf HTML-Dokumente, Grafiken und die bereits aufgezä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 übertragen werden, z.B. Sound, Videosequenzen, etc. Stellt ein Browser fest, daß die zu verarbeitenden Daten nicht von ihm selbst aufbereitet
bzw. dargestellt werden können, so wird eine Anwendung (ein Programm) fü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 fü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.15 Viele WWW-Browser bieten dem Bediener Optionenmenues zur Erweiterung einer solchen Entscheidungstabelle an.
Hier entlang zum <A HREF=“dschungelbuch.mpg“>
Dschungelbuch</A>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 19: Ein „Klick“ auf den Hyperlink, und ein MPEG-Browser zeigt die Videosquenz.
Findet der WWW-Browser kein geeignetes Programm für die Anzeige der Daten, so können diese Daten in den meisten Fällen immerhin als Datei abgespeichert werden.
15
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 Zusätze
1 Clickable Images
Clickable Images sind eine besondere Form von Bildern in HTML-Dokumenten. Mit ihrer Hilfe ist es
möglich, bestimmte Hypertext-Referenzen mit Teilen eines Bildes zu verknüpfen.
Eine Vielzahl von WWW-Browsern (Netscape, Mosaic,: : : ) kann die Position des Mauszeigers auf einem Clickable Image an den WWW-Server übermitteln, sobald die linke Maustaste betä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 Koordinaten innerhalb des Bildes erfolgt ist.
1.1 Die Einbindung
Zunächst benötigen Sie ein Bild im GIF-Format, das als Hyperlink in Ihre HTML-Seite eingefügt wird.
Der URL des Hyperlinks setzt sich zusammen aus dem Aufruf eines WWW-Grafikprogramms htimage16 , das der WWW-Server zur Verfügung stellt, und (direkt dahinter) dem Pfad ihres Map-Files, das
die Verknüpfungen mit Hypertext-Referenzen beinhaltet. Hierbei wird der Pfad des Map-Files relativ,
ab dem Standard-Dokumentenpfad des WWW-Servers angegeben. In diesem Beispiel:
http://www.irgendwo.de/cgi-bin/htimage/haewel.map
Hinzu kommt dann der Befehl zur Einbindung des eigentlichen GIF-Bildes. Wichtig ist hierbei der
Zusatz ISMAP.
<IMG src=“http://www.irgendwo.de/haewel.gif“ ismap>
Also zusammen:
<A HREF=“http://www.irgendwo.de/cgi-bin/htimage/haewel.map“>
<IMG src=“http://www.irgendwo.de/haewel.gif“ ismap> </A>
16
Im Falle des überwiegend eingesetzten CERN-Servers handelt es sich um das Programm htimage. In anderen Fällen
fragen Sie den Webmaster.
42
1
CLICKABLE IMAGES
1.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 wieder auf Konventionen des CERN-Servers.
default http://www.irgendwo.de/meer.html
circle (89,171) 36 http://www.irgendwo.de/kissen.html
rect (240,218) (355,267) http://www.irgendwo.de/decke.html
rect (139,320) (185,354) http://www.irgendwo.de/schuh.html
poly (83,80) (142,159) (221,145) (287,123) (253,44) (187,70)
(177,55) http://www.irgendwo.de/haewelmann.html
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 20: Source-Code des Map-Files zum Häwelmann-Bild, und das Tool mapedit zur Generierung von Map-Files.
1.3 Das Resultat
43
Damit werden beim Anklicken verschiedener Bildbereiche folgende Hypertext-Referenzen geladen:
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
Der restlichen Fläche, das Meer. – http://www.irgendwo.de/meer.html
Die Bildkoordinaten (die Werte in den Klammern) können mit netscape ermittelt werden, indem man
die rechte Maustaste auf einem Bildpunkt gedrückt hält (Wert in “Open this Link“). Eleganter arbeitet das in der Abbildung 20 auf der vorherigen Seite gezeigte Programm mapedit (unter UNIX/X11),
welches die Erstellung eines Map-Files erheblich vereinfacht. Mögliche Einträge:
default: URL wird als Standardfall angegeben, und sollte immer vorhanden sein.
circle: (x,y) r URL Kreis mit der Kreismitte bei (x,y) und einem Radius r.
rectangle: (x1,y1) (x2,y2) URL Rechteck mit zwei gegenüber liegenden Ecken (x1,y1) und (x2,y2).
polygon: (x1,y1) (x2,y2) ... (xn,yn) URL Vieleck mit den jeweiligen Koordinaten (xi,yi) Wenn das
letzte Koordinatenpaar nicht gleich dem ersten ist, wird dies automatisch durch das Server-Programm htimage erledigt.
1.3 Das Resultat
Von all dem bekommt der Betrachter der Seite jedoch nur wenig mit. Die geometrischen Figuren sieht
man dem Bild nicht an – den Beweis sehen Sie in Bild 21 auf der nächsten Seite.
44
1
CLICKABLE IMAGES
Abbildung 21: Das Clickable Image fertig eingebunden.
Checkliste
Wo könnten Clickable Images Anwendung finden?
Welche Schritte sind zur Erstellung eines Clickable Images nötig?
Woher beziehen Sie die Bildkoordinaten?
2 Formulare
Im WWW können auch Benutzereingaben am Bildschirm gemacht werden, die anschließend durch den
WWW-Server weiterverarbeitet werden. HTML bietet hierfür die Möglichkeit Formulare in HTMLSeiten zu gestalten.
Was HTML nicht kann, ist die Auswertung der Eingabedaten. Dies ist Sache sogenannter „CGI-BIN“Programme des WWW-Servers, die völlig abgekoppelt vom Formular arbeiten. Zur Auswertung von
Formulareingaben muß daher der WWW-Administrator kontaktiert werden.
Formulare sind ab HTML 2.0 definiert, und werden von den meisten WWW-Browsern unterstützt.
Beginn und Ende eines Formulares werden im HTML-Dokument mit <FORM> bzw. </FORM> beschrieben. Der <FORM>-Tag erhält zusätzlich die Argumente METHOD=POST17, sowie ACTION,
mit dem der URL des Auswertungsprogrammes fü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 dazugehörige Auswertungsprogramm nicht durcheinander kommt, erhält jedes dieser Felder einen eigenen, eindeutigen und vom HTML-Programmierer
selbst gewählten Namen, der als Zusatz NAME in den HTML-Tags angegeben wird (siehe unten).
2.1 Eingabefelder
Mit dem <INPUT>-Tag werden Eingaben des Benutzers im Formular entgegengenommen. Durch die
folgenden Tags werden verschiedene Eingabefelder definiert.
2.1.1 Normale Eingabefelder
Mit <INPUT TYPE=TEXT> erzeugt man ein einfaches Eingabefeld fü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.
17
Alternativ zu POST kann dem Parameter METHOD auch der Wert GET zugewiesen werden. Beide haben die gleiche
Aufgabe, nämlich das „Durchreichen“ des Formulares an den Server. Obwohl die Unterschiede lediglich technisch bedingt
sind, empfehle ich die Verwendung von POST.
46
2
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=“Häwelmann“>
</FORM>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 22: Einfaches Texteingabefeld
2.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 über die Schulter hinweg mitlesen kann. Ansonsten sind die gleichen Attribute gültig.
2.1.3 2-dimensionale Eingabefelder
<TEXTAREA> bzw. </TEXTAREA> erzeugt ein größeres, 2-dimensionales Eingabefeld, in dem sich
Eingaben auch über mehrere Zeilen erstrecken können. Die Zusätze ROWS für die Anzahl der Zeilen,
sowie COLS für die Spalten-Breite definieren die Größe. Auch hier muß (wie bei allen Eingabefeldern)
wieder ein Name für die spätere Weiterverarbeitung des Feldinhaltes angegeben werden. Textpassagen
zwischen den beiden <TEXTAREA>-Tags werden als Vorgabe angezeigt.
2.1 Eingabefelder
47
Geben Sie bitte Ihr Lieblingsbuch ein:
<INPUT TYPE=PASSWORD NAME=“buch“ SIZE=30>
(Wir verraten auch nichts)
</FORM>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 23: Geheime Eingaben
Geben Sie eine kurze Inhaltsangabe des Buches ein:<BR>
<TEXTAREA NAME=“zusammenfassung“ ROWS=8 COLS=60>
</TEXTAREA>
</FORM>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 24: Mehrzeilige Eingaben
48
2
FORMULARE
2.2 Auswahl
Formulare können auch wie Multiple-Choice-Aufgaben aussehen: Dem Betrachter werden in einer Liste eine Reihe von Alternativen angeboten, aus denen er mittels Mausklick auswählen darf.
2.2.1 Mehrfache Auswahl
<INPUT TYPE=CHECKBOX> ermöglicht die Auswahl eines oder mehrerer Werte aus einer Liste.
Dazu befinden sich kleine Kästchen vor jedem Listenelement, die mittels Mausklick sukzessiv angekreuzt werden können. Das Attribut VALUE beinhaltet den Wert, den das Auswertprogramm im Falle
der Auswahl ü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>
Häwelmann <BR>
<INPUT TYPE=CHECKBOX NAME=“buch“ VALUE=“pippi“>
Pippi Langstrumpf <BR>
<INPUT TYPE=CHECKBOX NAME=“buch“ VALUE=“dschungel“>
Dschungelbuch <BR>
</FORM>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 25: Mehrfach ankreuzen mit CHECKBOX
2.2.2 Einfach ankreuzen
<INPUT TYPE=RADIO> funktioniert wie CHECKBOX mit der Einschränkung, daß hier aus mehreren Werten nur einer ausgewählt werden kann.
2.3 Aktions-Knöpfe
49
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“haewel“>
Häwelmann <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“pippi“>
Pippi Langstrumpf <BR>
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“dschungel“>
Dschungelbuch <BR>
</FORM>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 26: Nur einmal ankreuzen mit RADIO
2.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 Wö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
Beispiel 27 auf der nächsten Seite).
Durch die folgenden beiden Elemente kann der Benutzer Schaltflächen zum Anklicken generieren, die
Wirkung auf das gesamte Formular haben (das Beispiel hierzu finden Sie in Abbildung 28 auf Seite 51).
<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 anstößt.
<INPUT TYPE=RESET> löscht den Inhalt aller Eingabefelder. Es findet keine Verarbeitung der Daten statt.
50
2
FORMULARE
Wählen Sie bitte Ihr Lieblingsbuch aus:
<SELECT NAME=“buch“>
<OPTION SELECTED> Häwelmann
<OPTION VALUE=“pippi“> Pippi Langstrumpf
<OPTION> Dschungelbuch
</SELECT>
</FORM>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 27: Auswählen mit SELECT
<INPUT TYPE=RADIO NAME=“buch“ VALUE=“haewel“> Hä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 28: Abschicken des Formulares bzw. Eingaben löschen.
Checkliste
Welche Eingabemö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?
51
3 Tabellen
Tabellen sind Teil des neuen Standards HTML 3.0, und werden noch nicht von allen Browsern unterstützt. Der Aufbau einer Tabelle wird wie folgt vorgenommen:
Tabellenanfang
Spaltenüberschriften ...
1. Zeile: 1.Zelle 2.Zelle 3.Zelle ... n.Zelle
2. Zeile: 1.Zelle 2.Zelle 3.Zelle ... n.Zelle
...
n. Zeile: 1.Zelle 2.Zelle 3.Zelle ... n.Zelle
Tabellenende
Diese Elemente werden in HTML so dargestellt:
Tabellenanfang/-ende Tabellen werden immer von den beiden <TABLE> und </TABLE>-Tags umrahmt. Dem <TABLE>-Tag können Attribute übergeben werden:
BORDER verleiht der Tabelle Rahmen und Begrenzunglinien zwischen den einzelnen Tabellenelementen.
WIDTH=xx% um die Breite einer Tabelle in prozentualer Abhängigkeit zur Browser-Fensterbreite
anzugeben.
ALIGN= bestimmt die horizontale Ausrichtung der Tabelle (nicht die des Tabelleninhalts!).
Anstelle der Standardwerte LEFT, CENTER und RIGHT, deren Bedeutung wohl nicht
näher erklärt zu werden braucht, können Sie auch JUSTIFY setzen. In diesem Fall wird
der Browser versuchen die Tabelle über die komplette Seitenbreite zu spannen.
Zeile Eine Tabellenzeile wird mit dem <TR>-Tag eingeleitet, und mit </TR> beendet.
Zelle Innerhalb einer Zeile wird die Unterteilung in Spalten vorgenommen. Kreuzung aus Zeile und
Spalte ist das kleinste Tabellenelement - die Zelle. Sie wird von <TD> und </TD> umrahmt.
Spaltenüberschriften können mit dem <TH>-Tag eingefügt werden.
54
3 TABELLEN
<TABLE>
<TR>
<TD> Häwelmann </TD> <TD> liegt </TD>
</TR>
</TABLE>
<P>
<TABLE BORDER>
<TR>
</TR>
</TABLE>
<P>
<TABLE BORDER WIDTH=50%>
<TR>
</TR>
</TABLE>
<P>
<TR>
<TH> Wer <TH> Was <TH> Wo
</TR>
<TR>
</TR>
<TR>
<TD> Mond </TD> <TD> steht </TD> <TD>
</TR>
</TABLE>
<TD> im Rollbett </TD>
am Himmel </TD>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 29: Einfache Tabelle einmal ohne, einmal mit Rahmen, einmal mit 50% Breite des BrowserFensters, und einmal mit Spaltenüberschriften.
55
Einzelne Zellen können aber auch zeilen- und spaltenübergreifend dargestellt werden. Dazu werden
dem <TD>-Tag bzw. dem <TH>-Tag folgende Attrubute übergeben:
ROWSPAN gibt die Anzahl der Zeilen an, die eine Zellen/Spaltenüberschrift überspannen soll.
COLSPAN gibt die Anzahl der Spalten an, die eine Zellen/Spaltenüberschrift überspannen soll.
<TR>
<TH COLSPAN=2> Wer macht Was <TH> Wo
</TR>
<TR>
<TD> Häwelmann </TD> <TD> liegt </TD> <TD> im Rollbett </TD>
</TR>
<TR>
<TD> Mond </TD> <TD ROWSPAN=2> stehen </TD> <TD> am Himmel
</TD>
</TR>
<TR>
<TD> Sonne </TD>
<TD> am Himmel </TD>
</TR>
</TABLE>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 30: Spalten- und zeilenübergreifende Zellen.
Checkliste
Warum unterstützen nicht alle Browser Tabellen?
Erstellen Sie selbst eine Tabelle. Können Sie eine 2x2 Matrix bilden?
4 Counter in HTML-Dokumenten
Counter oder Zähler sollen die Zugriffshäufigkeit auf eine bestimmte HTML-Seite erfassen und diese
nach Möglichkeit auch darstellen. Counter gehö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 Kilometerzähler im Auto aussieht.
Hier gleich ein komplettes Beispiel für diesen Counter:
...
Die Hä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 31: Der nph-count - Zähler im HTML-Dokument.
58
4 COUNTER IN HTML-DOKUMENTEN
Der Counter wird als normale Grafik eingebunden, wobei das Programm nph-count zur Generierung
des Bildes aufgerufen wird. Der im Folgenden dargestellte Teil des Beispiels beinhaltet den eigentlichen Programmaufruf:
http://www.irgendwo-hagen.de/cgi-bin/nph-count
Diesem werden jedoch zwei zusätzliche Parameter übergeben. Mit dem ersten Parameter width wird
die Breite des Zä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 angehängt, und durch ein & voneinander
getrennt.
Checkliste
Versuchen Sie, möglichst ohne Zuhilfenahme der Broschüre, die folgende Frage zu beantworten:
Warum kann es sein, daß nph-count auf Ihrem WWW-Server nicht funktioniert?
5 Fließtext um Grafiken
Sollen Grafiken von Text umflossen werden, so wird dem <IMG>-Tag das Attribut ALIGN mit den
Werten LEFT bzw. RIGHT 18 mitgegeben.
<IMG ALIGN=LEFT SRC=haewel3.gif>
“Nein“, schrie der kleine Häwelmann, “mehr, mehr. Leuchte, alter
...
<IMG ALIGN=RIGHT SRC=haewel4.gif>
hielten sie still.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 32: Fließtext um Grafiken.
18
LEFT und RIGHT sind Bestandteil von HTML 3.0, und werden (noch) nicht von allen WWW-Browsern berücksichtigt.
60
5 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>19 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 33: Neuer Absatz unter dem Bild mit Fließtext.
19
Das Attribut CLEAR im <BR>-Tag ist erst Bestandteil von HTML3.0.
6 Backgrounds – Hintergrundbilder und -farben
Damit HTML-Seiten nicht ausschließlich in ansprechendem Alltagsgrau erscheinen, unterstützt eine
Reihe von WWW-Browsern (z.B. Netscape ab Version 1.1) Bilder und Farben als Hintergrund einer
Seite20 .
Um Bilder als Hintergrund zu verwenden wird dem <BODY>-Tag das Attribut BACKGROUND hinzugefügt. Diesem Attribut folgt der URL des gewünschten Bildes. Ist das Bild kleiner als die Hintergrundfläche wird es mehrfach neben- und untereinander verwendet.
<HTML>
<BODY BACKGROUND=http://www.irgendwo.de/haewel7.gif>
...
</BODY>
</HTML>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 34: Hintergrundbilder
20
Einige der hier vorgestellten Möglichkeiten sind Netscape spezifisch. Siehe hierzu auch Kapitel 1.4 Standards oder
Chaos?
62
6
BACKGROUNDS – HINTERGRUNDBILDER UND -FARBEN
Um Farben als Hintergrund zu verwenden wird dem BODY-Tag das Attribut BGCOLOR hinzugefügt.
Diesem Attribut folgt ein Farbcode in hexadezimaler rot-grün-blau (RGB) Notation. Eine Liste der
möglichen Farbcodes finden Sie im Anhang. Ein Beispiel um den Hintergrund schwarz zu fä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 können die Attribute TEXT für normalen Text, LINK für Hyperlinks,
ALINK für Hyperlinks die gerade geladen werden, und VLINK für bereits besuchte Hyperlinks im
BODY-Tag benutzt werden, um ebenfalls Farbwerte zu übergeben.
<HTML>
<BODY BGCOLOR=“#000000“ TEXT=“#FFFFFF“ LINK=“#ffee30“
ALINK=“#FF5500“ VLINK=“#ff6666“>
...
</BODY>
</HTML>
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 35: Hintergrundfarbe schwarz.
Teil III
Anhang
A Konverter und Editoren
Wie Sie bei der Lektüre dieser Broschüre vielleicht schon festgestellt haben, ist die Verteilung von
Informationen über das WWW via HTML-Dateien zwar eine sehr schöne, dafür aber auch eine sehr
mühselige Angelegenheit.
Dies liegt nicht nur an der reinen ASCII-Darstellung von HTML-Dateien, wofür Sie den Preis eines
erhöhten Erstellungsaufwands zahlen, da Sie sämtliche benötigten Formatelemente miterfassen müssen. Richtig problematisch wird es, wenn Sie ein Dokument zweifach, nämlich sowohl für das Internet
als auch für die traditionelle Papierveröffentlichung layoutieren müssen.
Während Sie im Fall einer reinen Datenerfassung den entstehenden Aufwand wahrscheinlich durch
den Einsatz eines speziellen HTML-Editors reduzieren können, hat ein Konvertierer, d.h. ein Tool
welches eine schon bestehende „Papierform“ in HTML überträgt wesentlich mehr Aufgaben zu bewältigen.
Dieser Umstand ist im Wesentlichen in der unterschiedlichen Lesart von HTML- und herkö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 nämlich auch Werke an welche die Herangehensweise eine durchaus andere ist;
stellvertretend sei hier die Gruppe der Nachschlagewerke oder Lexika erwähnt. Der wesentliche Unterschied zu dem erwähnten Krimi besteht nämlich darin, daß Sie ein Lexikon eher selten in seiner
Gesamtheit erfassen wollen, dafür aber nach einer bestimmten Information Ausschau halten. Hierbei
bedienen Sie sich dann spezieller Hilfsmittel, wie z.B. Inhaltsverzeichnis oder Index um die gewünschten Stellen zu finden, der Aufbau ist also hierarchisch, von oben nach unten.
Da sich sequentielles Lesen am Bildschirm als äußerst ermüdend gestaltet, sollten gut gestaltete HTMLDokumente einen hierarchischen Aufbau besitzen. Vorstellbar wäre z.B. eine Art Inhaltsverzeichnis in
führender Position mit zugeordneten Hyperlinks zu den einzelnen Kapiteln.
Für den HTML-Konvertierer stellt sich dabei das Problem, daß er nicht nur eine technische Umsetzung
von dem, im ursprünglich verwendeten Textverarbeitungssystem benutzten Metaformat in die HTMLSprache vorzunehmen hat, im Regelfall muß er darüberhinaus noch eine vollkommen veränderte Dokumentenstruktur erzeugen. Diese Umsetzung bereitet jedoch häufig Probleme, und das Resultat sind
oft ü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 berücksichtigen.
21
Es sei denn, Sie gehören zu der Leserschaft, die auf der letzten Seite eines Krimis beginnen.
66
A KONVERTER UND EDITOREN
A.1 LaTeX2HTML
LaTeX2HTML22 gehö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 überführen.
LaTeX2HTML löst das gezeigte Problem der Dokumentumstrukturierung durch den Aufbau einer hierarchischen Struktur, deren Spitze das Inhaltsverzeichnis des Ausgangsdokuments darstellt, und dessen
Einträge ü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 36 auf Seite 68 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 enthält.
Laden Sie die Datei mit Netscape oder einem beliebigen anderen HTML-Browser, und Sie erhalten
ein HTML-Dokument, wie Sie es in Abbildung 38 auf Seite 70 sehen.
Dies ist aber bei weitem noch nicht alles was LaTeX2HTML für Sie tun kann.
Diverse Navigations-Knöpfe werden automatisch am Beginn einer jeden HTML-Seite eingefügt.
Außer Graphiken werden auch mathematische Formeln automatisch in HTML-Inline-Graphics
umgesetzt.
Inhalts-, Tabellen- und Abbildungsverzeichnisse werden zusammen mit Bibliographien, Fußnoten und LATEX-Querverweisen in HTML-Hyperlinks überführt.
Es kö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 möchte ich jedoch auch ein paar Schwä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 für unser Beispiel erzeugte Protokoll finden Sie in Abbildung 37 auf Seite 69.
25
Auf dem bonsai im Verzeichnis /var/tex/latex2html/docs/manual.tex
23
A.1 LaTeX2HTML
67
LaTeX2HTML kann sehr penibel sein, wenn es sich um den syntaktischen Aufbau des LATEXQuellfiles handelt. So wurden z.B. aus der folgenden LATEX 2" -Präambel
\usepackage{times}
\usepackage{moreverb}
\usepackage{german}
die beiden letzten \usepackage-Anweisungen ignoriert, während die für das Auge verwirrendere Zusammenfassung
\usepackage{times,moreverb,german}
ohne Probleme angenommen wurde.
Eingebundene Graphiken sind immer fü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 gerütteltes Maß an nachträglicher Aufarbeitung.
Je weniger zusä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ß: Fü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 üblich, nicht als Bug sondern als Feature.
68
Inhaltsverzeichnis
1
1
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 Mut
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 nicht
es war rein vorbei.
2 Die Reise mit dem Mond
3 Abenteuer mit der Sonne
2
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̈r
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 mi
offenen Augen in seinem Rollenbett und hielt das ei
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 bei
den Backen an zu blasen. Und allmählich, leise, lei
se, fing es an zu rollen, über den Fußboden, dann die Wand hinauf, dann kopf
über die Decke entlang und dann die andere Wand wieder hinunter. „Mehr, mehr!
schrie Häwelmann,
2
1
3
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 aufgegangen
„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 36: (a) Das LATEX-Original: : :
A.1 LaTeX2HTML
69
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>]
(-> 6421_image002) <texc.pro><special.pro>[2<haw02.eps>]
>>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 37: (b) : : : LaTeX2HTML bei der Arbeit: : :
70
Abbildung 38: (c) : : : und das HTML-Dokument nach der Konvertierung.
A.2 SoftQuad HoTMetaL
71
A.2 SoftQuad HoTMetaL
HoTMetaL ist eine Applikation, die dem Bereich der Editoren zuzuordnen ist, d.h. er ist als reine Unterstützung bei der Erstellung von HTML-Dokumenten vorgesehen.
Die Art und Weise wie HoTMetaL Ihnen Hilfestellung gewährt kann kurz als eine Art „konsequente Führung“ beschrieben werden. Innerhalb eines X11-Fensters,26 fügt er Tags und andere FormatElemente in einer prägnant/übersichtlichen Darstellung in Ihr Dokument ein. Er wacht dabei penibel
darüber, ob Sie ein syntaktisch korrektes Dokument erstellen. Die Hilfsmittel, derer er sich hierfür bedient, können wie folgt skizziert werden.
HoTMetaL fügt jeweils einen öffnenden und schließenden Tag in Ihr Dokument ein, d.h. die Fehlerquelle der falschen Gruppierung entfällt. Alternativ dazu kö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 Abhä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 durchgeführt. Dokumente die HoTMetaL als syntaktisch falsch erkennt, können weder bearbeitet noch gespeichert werden.
Sonderzeichen werden automatisch erkannt und in die HTML-Ersatzdarstellung überführt.
HoTMetaL gestattet das Anlegen von sogenannten Style-Files, ähnlich dem Rahmen oder Gerüst
welches ich in Kapitel 2.3 auf Seite 11 vorgestellt habe.
Meine Beurteilung ist in diesem Fall sehr subjektiv. Nachdem HoTMetaL in meiner persönlichen
Gunst sehr lange ein Schattendasein geführt hat,27 habe ich ihn in den letzten Wochen und Monaten
aufgrund der oben zitierten Stärken immer mehr schätzen gelernt. Es gibt jedoch auch Punkte, welche
die Arbeit mit ihm erheblich erschweren können.
Ähnlich wie Netscape, wird HoTMetaL als lizensiertes Produkt im Binär-Format vertrieben.
Auch wenn diese Lizenz für Hochschulen sehr weit gefasst ist, sollte nicht vergessen werden,
daß die Herstellerfirma SoftQuad jederzeit diese Bedingungen ändern kann.
Einer der größ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 Fällen ausgesprochen früh anfangen, z.B. bei der Verwendung
von Formularen.
26
also unter Unix. Mittlerweile existieren auch Versionen fü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
72
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 39: Eine HTML-Datei, erstellt mit HoTMetaL.
A.3 The Ant
73
A.3 The Ant
The Ant ist ein Tool, das auf der Betriebssystembasis MS-DOS beheimatet ist. Es ist jedoch kein eigentständiger Editor, sondern einer Erweiterung zum bekannten Word für Windows – es ist also keine
größere Einarbeitungs- oder Gewöhnungszeit zu erwarten.
Ä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 zusätzliche Button-Reihen auf dem Bildschrim, über die sämtliche HTML-Funktionen abrufbar sind, Abbildung 40 zeigt ein Beispiel dafür.
Abbildung 40: Nochmal die HTML-Datei, diesmal mit The Ant.
Die Auszeichnung bestimmter Passagen wird dann, wie unter WinWord gewohnt, durchgeführt. Textteile werden per Mausziehen markiert und mit Mausklick auf den gewünschten Button mit dem zugeordneten Format ausgezeichnet.
Beim Abspeichern wird ein zweigleisiger Weg eingeschlagen: Neben dem gewohnten WinWord-DOCFile, wird eine gleichnamige HTML-Datei erstellt.28 Der Vorteil dieses Verfahrens ist schnell ersichtlich; soll ein HTML-File überarbeitet werden, muß lediglich die parallele DOC-Datei geändert werden.
Weitere Highlights vom Ant:
Jedes vorhandene Word-Dokument kann in das Ant-Template übernommen werden, d.h. Word28
Dabei ist aufgrund der DOS-Dateinamenskonventionen zu beachten, daß die HTML-Datei die Erweiterung .htm erhält
– was sie in ihrer Funktionalität aber keineswegs beeinträchtigt.
74
Texte werden mit einem Schlag HTML-Dokumente. Die benötigte Hierarchiestruktur sowie Hyperlinks müssen jedoch (noch) mit der Hand nachbearbeitet werden.
Die Nachbearbeitung von HTML-Dokumenten ist mö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 häufig benötigte, eigene Funktionalitäten erweitert werden.
Obwohl es im Zusammenhang mit den deutschen WinWord-Versionen einige Kompatibilitä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 überzeugen.
Im Gegensatz zu den beiden anderen Produkten ist The Ant Shareware. Eine eingeschränkte DemoVersion ist jedoch über den URL
http://mcia.com/ant
erhältlich. Über den gleichen URL können auch weitere Informationen, sowie die aktuelle Preisliste
abgerufen werden.
A.4 Xemacs
75
A.4 Xemacs
Selbstverständlich wäre eine Liste von Editoren unvollständig, wenn das Multifunktionstalent Xemacs
unerwä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 für Mail, News, TEX und
diverse Programmiersprachen auch ein speziell für die Erstellung von HTML-Dateien abgestimmter
Makrosatz erhältlich ist.
Xemacs glänzt denn auch schon beim Anlegen eines HTML-Files mit der Möglichkeit Gerüst-Dateien
einzufügen, die einer Standardbibliothek entnommen werden, alternativ dazu aber auch auf persönliche Wünsche zugeschnitten sein können.
Danach kann die Auszeichnung einzelner Textelemente auf zwei verschiedene Arten menügeführt vorgenommen werden.
Sie wählen aus dem Menü zuerst das gewünschte Format. In diesem Fall setzt Xemacs für Sie
die entsprechenden Tags und stellt den Textcursor in deren Mitte. Fügen Sie nun Ihren Text ein.
Sie markieren den Text wie üblich mit der Maus und wählen danach das gewünschte Format
aus dem entsprechenden Menü. Xemacs wird nun den markierten Text mit den relevanten Tags
umgeben.
Sofern der ausgewählte Tag weitere obligatorische Parameter verlangt, werden Sie von Xemacs
interaktiv danach gepromptet.29
Selbstverstä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 gewünschten HTML-File. Beispiel: xemacs foo.html
Durch die Dateinamenserweiterung .html lädt der Editor automatisch die benötigten Makros.
Wählen Sie unter dem Menüpunkt HTML die Option SET POPUP MENU und hieraus wiederum den Eintrag EXPERT MENU.
Alle gewünschten Tags und Optionen sind ab sofort innerhalb des Textfeldes durch Klick auf
die rechte Maustaste erhältlich (Abbildung 41 auf der nächsten Seite).
Meine subjektive Bewertung: Sofern Sie noch nicht ein Fan von Xemacs sind, hat der Editor mit Hilfe
seiner HTML-Sequenzen alle Möglichkeiten Sie zu überzeugen.
29
Auf diese Weise habe ich mit Hilfe von Xemacs meine ersten HTML-Tabellen erstellt, bevor ich das Tabellenformat
richtig verstanden hatte.
Tip
76
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Abbildung 41: Konfiguration des Xemacs-Popup-Menues und seine anschließende Darstellung.
B Farbskala
Eine Übersicht der Farbwerte, die für Hintergründe und Texte verwendet werden kö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 2.0
Dies ist eine kurze Zusammenfassung der Elemente, die im HTML 2.0 Standard definiert sind. Nähere
Informationen erhalten Sie beim World Wide Web Consotium (W3C) unter dem URL:
http://www.w3.org/pub/WWW/
a
b
blockquote
br
code
dir
dt
form
h2
h4
h6
hr
i
input
kbd
link
menu
nextid
option
plaintext
samp
strong
title
ul
xmp
Anchor; source and (or) destination of a link
address
Bold text
Quoted passage
Line break
Source code phrase
Directory list
Term in definition list
Fill-out or data-entry form
Heading, level 2
Heading, level 4
Heading, level 6
Horizontal rule
Italic text
Form input datum
Keyboard phrase, e.g. user input
Link from this document
Menu list
Next ID to use for link name
A selection option
Plain text passage
Sample text or characters
Strong emphasis
Title of document
Unordered list
Example section
base
body
cite
dd
dl
em
h1
h3
h5
head
html
img
isindex
li
listing
meta
ol
p
pre
select
textarea
tt
var
Address, signature,
or byline for document or passage
Base context document
Document body
Name or title of cited work
Definition of term
Definition list, or glossary
Emphasized phrase
Heading, level 1
Heading, level 3
Heading, level 5
Document head
HyperText Markup Language Document
Image; icon, glyph or illustration
Document is a searchable index
List item
Computer listing
Generic meta-information
Ordered, or numbered list
Paragraph
Preformatted text
Selection of option(s)
An area for text input
Typewriter text
Variable phrase or substitutable
D Liste der Sonderzeichen
Die folgende Tabelle, gibt Ihnen einen Überblick der in HTML verfü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
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
ÿ
Þ
ß
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
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
&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
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ı̀
ı́
ı̂
ı̈
ð
82
D LISTE DER SONDERZEICHEN
E Index
Ä, 14
È, 14
&, 14
ä, 14
è, 14
>, 14
<, 14
ñ, 14
", 14
ß, 14
<ADDRESS>, 25
Autor, 25
<A>, 17
#, 19
HREF, 17
NAME, 19
<BLOCKQUOTE>, 23
<BODY>, 12
BACKGROUND, 61
BGCOLOR, 62
<BR>, 12
CLEAR=LEFT, 60
CLEAR=RIGHT, 60
<B>, 13
<CITE>, 13
<CODE>, 13
<DD>, 28
<DFN>, 13
<DL>, 28
<DT>, 28
<EM>, 12
<FORM>, 45
ACTION=, 45
METHOD=GET, 45
METHOD=POST, 45
<H1> - <H6>, 12
<H2>, 12
<HEAD>, 11
<HR>, 24
<HTML>, 11
<IMG>, 33
ALIGN=LEFT, 59
ALIGN=RIGHT, 59
ALIGN, 33
ALT, 34
ISMAP, 41
SRC, 33
<INPUT>, 45
CHECKED, 48
MAXLENGTH, 46
NAME, 45
SIZE, 46
TYPE=CHECKBOX, 48
TYPE=PASSWORD, 46
TYPE=RADIO, 48
TYPE=RESET, 49
TYPE=SUBMIT, 49
TYPE=TEXT, 45
VALUE, 46, 48
<I>, 12
<KBD>, 13
<LI>, 27
<OL>, 27
<OPTION>, 49
<PRE>, 12, 23
<P>, 12
<SAMP>, 13
<SELECT>, 49
<STRONG>, 13
<TABLE>, 53
ALIGN=, 53
BORDER, 53
WIDTH=, 53
<TD>, 53
<TEXTAREA>, 46
COLS, 46
ROWS, 46
<TH>, 53
<TITLE>, 12
<TR>, 53
<TT>, 13
<UL>, 27
84
<VAR>, 13
The Ant, 73
Anwendungen, 37
externe, 37
Browser, 14, 41
external, 37
CGI-BIN (Programme), 45
Counter, 57
MAILTO, 20
Map-File, 41, 42
circle, 43
default, 43
polygon, 43
rectangle, 43
mapedit, 43
Marken, 4, 9
logische, 5
Markup, 3
Multiple-Choice-Aufgaben, 48
Editoren, 6, 65
Farbcode, 62
Farbskala, 77
Farbwerte, 77
Fließtext, 59
Formatelemente, 9
Klammerung, 9
Formatierungen, 4
Formulare, 45
FTP, 19
GOPHER, 20
Grafiken, 33
Fließtext um, 59
Hintergrundbilder und -farben, 61
HoTMetaL, 71
htimage, 41, 43
HTML, 3
Definition von, 3
Standards von, 6, 53
http://, 18
Hyperlinks, 17
HyperText, 3
Images, 33
clickable, 41
inline, 33
Konverter, 65
LaTeX2HTML, 66
Listen, 27
beschreibende (deskriptive), 28
numerierte, 27
unnumerierte, 27
verschachtelte, 28
NEWS, 20
nph-count, 57
Querverweise, 17
Ressourcen, 4
Schaltflächen, 49
Sonderzeichen, 14, 81
Sound, 37
Tabellen, 53
Tags, 9, 10
TELNET, 20
URL, 17, 33, 41, 43
Videosequenzen, 37
Xemacs, 75

Th. Feuerstack et al.: Die kleine HTML

Transcription

Similar documents

Artikel als PDF

V02-Elementare numerische Datentypen

PDF (30 Seiten, 193 kB)

Normative Anforderungen an Alarmsysteme - Teil - E-HEALTH-COM

PDF, 1,2 MB - (TU) Berlin

Vom Dokument zum PDF-File - Rechenzentrum

Studienarbeit Oliver Buschjost

1 Einleitung Frühkindlicher Autismus, Asperger

Informationen zur neuen Entgeltordnung ab 2017

Text und Welt: Referenz und Textweltmodelle

Computerorientierte Mathematik II

Ausgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO

- Antiquariat Querido Düsseldorf

H.264 Netzwerk DVR Bedienungsanleitung

HTML Color Codes

Kopiervorlage-3

Migration von Sites aus älteren Versionen in Fusion 9

Seminararbeit als PDF - Institut für Informatik

Benutzerhandbuch - NetObjects Webdesign

Eingebettete Systeme

Theo Klauß: Lebensgeschichte von Menschen mit geistiger

Übersicht Computerbegriffe