Das eigene Web mit HTML, CSS und JavaScript

Das eigene Web mit HTML, CSS und JavaScript

Christian Wenz, Tobias Hauser

Das eigene Web mit HTML, CSS und Ja vaScript 15 Workshops

Markt+Technik Verlag

Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich.

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.

10 9 8 7 6 5 4 3 2 1

05 04 03 02

ISBN 3-8272-6306-9

© 2002 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Umschlaggrafik: WEBWO-Graphics, Marco Lindenbeck, München Lektorat: Jürgen Bergmoser, [email protected] Herstellung: Philipp Burkart, [email protected] Satz: mediaService, Siegen Druck und Verarbeitung: Media-Print, Paderborn Printed in Germany

Inhaltsverzeichnis

Inhaltsverzeichnis Die CD-ROM zum Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Über die Autoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Einleitung

15

Editoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hoster finden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit dem Buch arbeiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 1: Text verschönern 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9

15 20 24 27 29 31 32

35

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Überschrift. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Absätze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Horizontale Linie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Farben in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hervorhebungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Schrift ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sonderzeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36 38 40 44 46 48 50 53 56

5

Inhaltsverzeichnis

Workshop 2: Text verschönern mit Stylesheets 2.1 2.2 2.3 2.4 2.5 2.6 2.7

57

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grundlagen von Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Schrift verändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hervorhebungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Weitere Textformatierungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58 59 62 64 71 73 77

Workshop 3: Mit Bildern und Links arbeiten 79 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14

6

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Bildgröße . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Bildnamen und Alternativtext . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Text am Bild ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Grundlagen zu Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Link in einem neuen Fenster öffnen . . . . . . . . . . . . . . . . . . . . . . 95 Verschiedene Farben für verschiedene Zustände. . . . . . . . . . . . 96 Grafik als Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 E-Mail-Adressen und Dateien verlinken . . . . . . . . . . . . . . . . . . 99 Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Hintergrundbild anordnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Inhaltsverzeichnis

Workshop 4: Text strukturieren 4.1 4.2

Absätze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Workshop 5: Tabellen 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10

121

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Prinzipieller Aufbau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tabellenrahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tabellengröße . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zellen ausrichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zellen zusammenfassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hintergrundfarbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zellen formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fehlersuche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 6: Seitenlayout 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8

109

122 122 123 126 129 132 134 137 139 141

143

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rahmen und Abstände von Tabellen entfernen. . . . . . . . . . . . Abstand zum Rand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tricks zur Positionierung mit Tabellen . . . . . . . . . . . . . . . . . . Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Positionierung ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Elemente überlappen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

143 145 148 151 151 153 154 155

7

Inhaltsverzeichnis

Workshop 7: Frames 7.1 7.2 7.3 7.4 7.5 7.6 7.7

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames füllen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames verschachteln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 8: Feedback-Formular 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9 8.10 8.11 8.12

8

158 159 160 162 164 165 168

169

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Textfelder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Passwortfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pull-down-Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Radiobuttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checkboxen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mehrfach-Pull-down-Menüs. . . . . . . . . . . . . . . . . . . . . . . . . . . Mehrzeilige Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Versende-Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wohin mit den Daten? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Welcher Feldtyp?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 9: Formulare formatieren 9.1 9.2 9.3 9.4 9.5

157

170 172 176 178 181 183 184 185 188 190 195 198

201

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mit Tabellen ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formatieren mit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formatieren mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

204 204 210 213 216

Inhaltsverzeichnis

Workshop 10: Sound und Video einbauen

217

10.1 Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 10.2 Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Workshop 11: Browserunterscheidung 11.1 11.2 11.3 11.4

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape 4.x unterscheiden – auf der CD-ROM ... . . . . . . . . . Browserunterscheidung – auf der CD-ROM ... . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 12: Mouseover und andere Effekte 12.1 12.2 12.3 12.4

227 230 233 237

239

Mouseover – auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . Ausgelagertes Mouseover – auf der CD-ROM ... . . . . . . . . . . . Das Datum ausgeben – auf der CD-ROM ... . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 13: Formulardaten überprüfen 13.1 13.2 13.3 13.4 13.5 13.6 13.7 13.8 13.9

227

239 244 248 252

253

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pflichtfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vorüberlegungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formularfelder überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . Überprüfung fertigstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fehlerbehandlung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . E-Mail-Adressen überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . Alternative: serverseitige Überprüfung . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

254 256 257 258 267 269 271 272 275

9

Inhaltsverzeichnis

Workshop 14: Navigation 14.1 14.2 14.3 14.4 14.5

Neues Fenster öffnen – auf der CD-ROM ... . . . . . . . . . . . . . . Fenster wieder schließen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fenster in den Vordergrund holen . . . . . . . . . . . . . . . . . . . . . . Pull-down-Menü – Auf der CD-ROM ... . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Workshop 15: Warenkorb 15.1 15.2 15.3 15.4 15.5 15.6 15.7

277 277 282 284 285 289

291

Auf der CD-ROM ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Artikelseiten anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eigene Artikelseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . Der Warenkorb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alternativen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Fazit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

292 292 293 297 298 301 302

Glossar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Stichwortverzeichnis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

10

Die CD-ROM zum Buch

Das finden Sie a u f d e r C D - R O M: Die dem Buch beiliegende CD-ROM enthält neben den Beispielsdateien für alle Kapitel auch noch interessante und nützliche Zusatzsoftware, die Sie aus der folgenden Tabelle entnehmen können:

\buchdaten\code

Alle Beispielsdateien, nach Lektionen aufgeteilt

\browser \ie5.5sp2-win \ie6-win \netscape4.79

Internet Explorer 5.5 SP2 für Windows 95/98/ME/NT4/2000

\netscape6.2.1

Netscape 6.2.1 für Windows (deutsch), Linux und Macintosh (beide englisch)

\opera6-win

Opera 6.0 für Windows

Internet Explorer 6.0 für Windows 98/ME/NT4/2000/XP Netscape Navigator 4.79 englisch für Windows (dort auch 4.78 deutsch), Linux und Macintosh

\buchdaten\software\editoren \bbedit-light-mac

BBEdit Lite 6.1.2 (kostenloser Texteditor für Macintosh)

\bbedit-mac

BBEdit 6.5.2 Testversion (kann 24 Mal gestartet werden)

\notetab-free-win

NoteTab Light 4.86c (kostenloser Texteditor für Windows)

\notetab-pro-win

NoteTab Pro 4.86c (zeitlich beschränkte Testversion)

\textpad-win \ultraedit-win

TextPad 4.5 Testversion (Texteditor für Windows)

\winzip

WinZip Testversion 8.0 deutsch und 8.1 englisch (Pack- und Entpackprogramm insbesondere für ZIP-Dateien)

UltraEdit 9.0 Testversion (Texteditor für Windows, zeitlich beschränkt)

Beachten Sie jeweils die Installationshinweise und die Lizenzvereinbarungen bei der jeweiligen Software!

Über die Autoren Chrístian Wenz (links) ist als Verfasser zahlreicher Bücher mit dem Schwerpunkt Internetprogrammierung und Webdesign in Erscheinung getreten. Im Markt+Technik-Verlag erschienen unter anderem die erfolgreichen Titel "Homepages bauen" und (zusammen mit Tobias Hauser) das "Web Publishing Kompendium". Auch publiziert er regelmäßig in Fachzeitschriften rund um das Thema Internet. Neben seiner Beratertätigkeit tritt er häufig als Referent auf Konferenzen im In- und Ausland auf und hält regelmäßig Anwenderschulungen. In seiner Freizeit geht er gerne essen und versucht das durch Hockey (selten) und Schwimmen (nicht so selten) zu kompensieren. Tobias Hauser (rechts) ist ebenfalls erfahrener Buchautor von Markt+Technik sowie Autor von Fachartikeln. Neben dem Thema Webdesign ist er auf Grafiksoftware spezialisiert und ist immer darum bemüht, dass ein Webauftritt nicht nur perfekt programmiert ist, sondern auch optisch ansprechend ist. Dieses Wissen gibt er an kleine und große Kunden weiter, sei es durch Beratertätigkeiten oder durch Schulungen.

erstellt von ciando

Zu seinen Hobbys zählen Badminton (gar nicht so unerfolgreich) sowie die Beschäftigung mit der Geschichte Roms zu Asterix' Zeiten, allerdings bevorzugt mit Sekundärliteratur ohne Cartoons. Als Autorenteam versuchen sie, ihre Stärken zu kombinieren und ein Thema auch aus mehreren Blickwinkeln zu betrachten. Dabei versuchen sie ihre Erfahrungen, die sie aus den Rückmeldungen bei Schulungen und Vorträgen erhalten haben, in das didaktische Buchkonzept einzubringen.

Vorwort

Das World Wide Web – sind Sie auch schon „drin“? Galt es vor einiger Zeit schon als chic, eine eigene E-Mail-Adresse zu besitzen, locken Sie damit heute keinen müden Hund mehr hinterm Ofen hervor. Da müssen Sie schon etwas mehr bieten, beispielsweise einen eigenen Web-Auftritt. Vielleicht sagen Sie: „Aber ich kann doch nicht programmieren, das ist doch alles so kompliziert!“ Nun ja, immerhin haben Sie schon den ersten Schritt getan und dieses Buch gekauft, oder Sie stehen gerade in der Buchhandlung und blättern es durch. Wir möchten Ihnen zwei Dinge sagen: ■ So kompliziert wie es scheint ist das Erstellen der eigenen Website gar nicht. ■ Wir werden in diesem Buch die Programmierung in einem möglichst geringen Umfang behandeln, dennoch kein wichtiges Thema auslassen. Das Programmieren ist eine Geschmackssache – entweder man hat ein Faible dafür oder nicht. Aus diesem Grund wollen wir mit diesem Buch (und der gesamten Werkstatt-Reihe) einen etwas anderen Weg beschreiten: Einen Großteil der Programmierung haben wir Ihnen bereits abgenommen. Sie legen die diesem Buch beiliegende CD-ROM in das Laufwerk und haben so Zugriff auf alle Beispiele, die in diesem Buch verwendet werden. Ganz ohne Programmierung geht es natürlich nicht. Schließlich wollen Sie ja auf Ihrer Website sicher eigene Inhalte anbieten und nicht das, was wir Ihnen hier vorsetzen. Aus diesem Grund laden wir Sie in jedem der folgenden Kapitel wieder aufs Neue ein, die Daten auf der CD Schritt für Schritt anzupassen, zu ändern und dabei eine ganze Menge zu lernen. Nach der Lektüre dieses Buches sind Sie – so hoffen wir – Ihrer eigenen Website einen Riesenschritt näher gekommen. In der Speisekarte eines nahe gelegenen Restaurants steht: „Wenn es Ihnen gefallen hat, erzählen Sie es weiter. Wenn es Ihnen nicht gefallen hat, sagen Sie es uns.“ Wir sind da nicht so wählerisch und freuen uns über jede Zuschrift, egal ob Lob oder (konstruktive) Kritik. Sie erreichen uns unter den E-Mail-Adressen christian,[email protected]/ tobias,[email protected]. Wir können nicht immer schnell und auch nicht auf jede (über

13

Vorwort

den Buchinhalt hinausgehende) Frage antworten, aber wir lesen jede Mail und bemühen uns, möglichst schnell darauf zu reagieren. Zusätzlich stellt Markt+Technik unter www.mut.de/service/support.asp ein umfangreiches Support-Angebot zur Verfügung, in dem Sie ebenfalls Hilfe erhalten. Abschließend sei noch gesagt, dass bei der Erstellung eines Buches weitaus mehr Personen mitwirken als nur die Autoren. Für dieses Werk verdienen die folgenden Personen besondere Erwähnung: ■ Jürgen Bergmoser hat dieses Projekt als Lektor betreut. ■ Philipp Burkart war von Herstellerseite aus für das Buch verantwortlich. ■ Marcus Beck hat das Reihenkonzept erstellt. Bleibt uns nur noch, viel Spaß bei der Lektüre und beim Durcharbeiten der folgenden Kapitel zu wünschen – und natürlich viel Erfolg mit dem eigenen Web! Christian Wenz, Tobias Hauser März 2002

14

Bevor wir Ihnen nun in mehreren Workshops zeigen, wie Sie Ihre Website erstellen können, ist zuvor ein wenig theoretisches Fundament nötig. Aber keine Sorge, wir haben uns bei der Erstellung des Buches nicht zum Ziel gesetzt, Vollständigkeit in Sachen Theorie zu erreichen, sondern vielmehr das Ergebnis in den Vordergrund zu rücken und die Inhalte unterhaltsam und verständlich zu vermitteln. Einleitung

Editoren Beim Erstellen einer Website haben Sie prinzipiell zwei Möglichkeiten. Die erste besteht darin, einen so genannten WYSIWYG-Editor zu verwenden. Dieses Akronym steht für „What You See Is What You Get“, zu Deutsch etwa „Was man (im Editor, auf dem Bildschirm) sieht, ist das, was man (im Browser angezeigt) bekommt“. Anders ausgedrückt: Im Editor sieht die Website schon ziemlich genauso aus wie später im Browser. In Abbildung 0.1 sehen Sie einen solchen Editor. Solche Editoren sind sehr praktisch und für den fortgeschrittenen Anwender eine echte Arbeitserleichterung, sie haben jedoch auch ein paar Nachteile: ■ Das WYSIWYG ist oft nur Theorie, insbesondere wenn es darum geht, dass die Website auch in unterschiedlichen Browsern gleich aussieht. ■ Mit WYSIWYG können schnell ansehnliche Ergebnisse erzielt werden, aber wenn es hakt, kommen Sie ohne Hintergrundwissen nicht weiter. ■ Das dritte Problem ist eher didaktischer Natur: Gerade die besseren Editoren stehen oft nur für die Windows- und ggf. Macintosh-Plattform zur Verfügung. Obwohl Linux zurzeit nur einen geringen Marktanteil hat, wäre es doch eine gewisse Beschränkung für Linux-Anwender, einen Windows- oder Mac-Editor zu verwenden. ■ Gute WYSIWYG-Editoren sind kostenpflichtig und stehen, wenn überhaupt, gratis nur als 30-Tage-Testversion zur Verfügung.

Einleitung

AUF DER

CD-ROM

Die Homepage von Markt+Technik in einem WYSIWYG-Editor

Auf der CD-ROM, die diesem Buch beiliegt, finden Sie Testversionen von einer Reihe von Editoren, sodass Sie – am besten nach der Lektüre des Buches, wenn Sie über die wichtigsten theoretischen Grundlagen verfügen, auch ausprobieren können, wie Sie mit einem solchen Programm zurechtkommen.

Aus diesem Grund werden Sie im weiteren Verlauf dieses Buchs direkt am Quellcode arbeiten, das heißt, Sie werden die Webseiten „von Hand“ erstellen und weiterverarbeiten. Webseiten sind eigentlich Textdateien. Sie benötigen zum Erstellen und Editieren von Webseiten also nur einen Texteditor.

Windows Beim Windows-Betriebssystem beispielsweise steht mit Notepad ein funktionsarmer Editor zur Verfügung, der für erste Schritte aber schon vollständig ausreicht. Sie finden ihn über den Menübefehl Start/Programme/Zubehör/Editor (oder Start/Programme/Zubehör/Notepad).

16

Editoren

VORSICHT!

Der Windows-Editor

Wenn Ihre Notepad-Version eine deutlich kleinere Schrift als in der oberen Abbildung verwendet, wundern Sie sich nicht. Wir haben für die (wenigen) Notepad-Bildschirmfotos in diesem Buch die Schriftgröße vergrößert, um eine bessere Lesbarkeit zu ermöglichen.

Beim Abspeichern müssen Sie jedoch aufpassen. Bei bestimmten Windows-Konfigurationen wird an Dateinamen automatisch die Endung .txt angehängt. Webseiten haben jedoch grundsätzlich die Endung .htm oder .html. Mit den folgenden Schritten können Sie sicherstellen, dass die Dateiendung nicht automatisch um .txt erweitert wird:

1

Wählen Sie zum ersten Speichern den Menübefehl Datei/Speichern oder Datei/ Speichern unter. Es öffnet sich das für Windows typische Dialogfenster zum Speichern.

Das Dialogfenster Speichern unter

17

Einleitung

2

Wählen Sie im Pull-down-Menü Dateityp den Eintrag Alle Dateien (*.*).

Wählen Sie Alle Dateien (*.*).

3

Geben Sie den Dateinamen samt Endung .html an, und setzen Sie den Dateinamen in Anführungszeichen. Bestätigen Sie mit OK.

Der Dateiname sollte in Anführungszeichen stehen.

PROFITIPP

Der Editor speichert nun die Datei ohne die Erweiterung .txt.

18

Bei der Standardeinstellung von Windows werden Dateiendungen erst gar nicht angezeigt. Sie können dies ändern, indem Sie den Windows Explorer öffnen, Extras/Ordneroptionen aufrufen und auf der Registerkarte Ansicht die Option Dateinamenerweiterung bei bekannten Dateitypen ausblenden deaktivieren.

Editoren

So blenden Sie Dateiendungen wieder ein.

Natürlich gibt es für Windows auch komfortablere Texteditoren, die mehr Funktionalität anbieten. Ein recht bekannter ist der kostenlose Notetab Light (www.notetab.ch), der viel Funktionalität bietet. Der heimliche Favorit der Autoren dieses Buches ist Ultraedit (Testversion unter www.ultraedit.com), der zwar etwas kostet, aber dafür viele praktische Funktionen bietet.

Der Shareware-Editor UltraEdit

19

Einleitung

Linux Unter Linux werden ebenfalls mehrere Texteditoren mitgeliefert. Recht bequem zu bedienen sind beispielsweise XEmacs und KEdit. Je nach Distribution und Fenstermanager können andere Produkte mitinstalliert sein. In der Abbildung sehen Sie XEmacs im Einsatz.

Der Editor XEmacs mit einer HTML-Datei

Browser Bevor Sie Webseiten erstellen, sollten Sie zunächst sicherstellen, dass Sie überhaupt eine entsprechende Testumgebung zur Verfügung haben. Zum Anzeigen einer Website benötigen Sie einen Webbrowser. Bei den meisten Betriebssystemen und Fenstermanagern ist ein Browser enthalten, beispielsweise der Internet Explorer bei Windows oder der Konqueror beim KDE. Dennoch sollten Sie darauf achten, Ihre Seiten auf möglichst vielen Browsern zu testen, zumindest auf den meistverbreiteten. Klare Nummer Eins auf dem Browsermarkt ist der Microsoft Internet Explorer, den Sie unter www.microsoft.com/windows/ie_intl/de/ herunterladen können. Er steht allerdings nur für Windows- und Macintosh-Plattformen zur Verfügung. Die zum Zeitpunkt der Manuskriptfertigstellung (Dezember 2001) aktuellste Version ist 6.0.

20

Browser

Der Internet Explorer 6

Der zweitgrößte Browser ist der Netscape-Browser, den es in zwei Versionen gibt. Zum einen gibt es die Versionen 4.x (gerade aktuell: Version 4.79), die als relativ ausgereift angesehen wird. Versionsnummer 5 wurde übersprungen, sodass die neuesten Versionen mit einer 6 beginnen (gerade aktuell: Version 6.2.1). Die neue Version enthält noch eine Reihe von Fehlern und scheint auch noch nicht so schnell wie die Vorgängerversionen zu sein. Es besteht aber begründete Hoffnung, dass sich dies in Zukunft ändern wird. Im Gegensatz zur Vorgängerversion wird der Kern von Version 6 Open Source entwickelt, das heißt, dass der Quellcode des Browsers öffentlich verfügbar ist und sich theoretisch jeder an der Entwicklung beteiligen kann. Beide Browserversionen können für viele verschiedene Betriebssysteme unter home.netscape.com/download heruntergeladen werden.

21

Einleitung

Der Netscape Navigator 4.x

Der Netscape 6.x

22

Browser

Nummer Drei auf dem Browsermarkt ist der norwegische Opera-Browser. In früheren Versionen machte er Furore, weil er auf eine einzige Diskette passte. Mittlerweile ist das nicht mehr so, aber der Browser ist sehr schnell und damit eine echte Alternative zu den beiden „Branchengrößen“. Sie erhalten ihn unter www.opera.com. Die momentan aktuellste Version ist 6.0.

Der Opera-Browser

Der letzte Browser, der hier erwähnt werden soll, ist Konqueror. Dieser steht ausschließlich unter Linux zur Verfügung, und auch nur dann, wenn KDE als Fenstermanager verwendet wird. Konqueror ist ein relativ neuer Browser, beherrscht aber HTML, CSS und JavaScript. Noch ist er nicht so stark verbreitet, als dass er zu einer ernstzunehmenden Gefahr für die „großen Drei“ geworden ist, dies kann sich jedoch schnell ändern. Aus diesem Grund sollten Sie die Entwicklung dieses Browsers verfolgen und ihn möglichst früh in Ihr Testprogramm mit aufnehmen.

23

Einleitung

Der Linux-Browser Konqueror

Versuchen Sie, auf Ihrem Testsystem möglichst viele der hier vorgestellten Browser zu installieren. Nur so können Sie feststellen, ob Ihre Seite auch bei allen Browsern gleich gut aussieht. Auch wenn Sie glühender Verfechter eines dieser Browser sein sollten, Ihre Besucher sind das womöglich nicht und verlassen Ihre Seiten schleunigst wieder, wenn die Seiten nicht so funktionieren wie gewünscht. Testen Sie also ausführlich auf verschiedenen Systemen.

HTML Die Programmiersprache, in der Webseiten erstellt werden, heißt HTML, kurz für Hypertext Markup Language, zu Deutsch Hypertext-Auszeichnungssprache. Der Terminus Hypertext ist recht schnell erklärt. Es handelt sich dabei um Text, der mittels Hyperlinks (Verweisen) mit anderen Bereichen oder Texten (Seiten) verbunden ist. Das Wort Auszeichnungssprache ist jedoch das eigentlich Entscheidende. In HTML werden Texte ausgezeichnet. Sie kennen das vermutlich von Ihrer Textverarbeitung. Dort schreiben Sie auch Text und zeichnen einzelne Zeichen, Wörter oder Absätze aus, indem Sie sie beispielsweise kursiv stellen.

24

HTML

Worin besteht nun der Unterschied zwischen einer Textverarbeitung und HTML? In einer Textverarbeitung ist klar, wie der Text danach aussieht. In HTML geben Sie nur Anweisungen wie „Stelle kursiv“, „Mache Text größer“, „Verwende Blocksatz“. Die Interpretation dieser Anweisungen liegt jedoch beim Webbrowser. Sie sind also innerhalb gewisser Grenzen vom Browser abhängig. Eine der größten Herausforderungen beim Erstellen von Webseiten ist es, möglichst viele Browser „zufrieden zu stellen“ und Seiten zu erstellen, die in den meistverbreiteten Browsern annähernd gleich aussehen.

Tags Die Auszeichnungen werden innerhalb von HTML mit so genannten Tags erledigt. Ein Tag ist in spitze Klammern eingebettet. Beispielsweise beginnt jede HTML-Seite mit . Groß- und Kleinschreibung spielen dabei keine Rolle. Somit funktionieren auch die folgenden Schreibweisen: ■ ■ ■ Für meisten Tags gibt es auch ein zugehöriges Abschluss-Tag, das (richtig – es heißt „das Tag“, gesprochen „Täg“) durch einen Schrägstrich eingeleitet wird. Ein Tag ohne Schrägstrich wie etwa leitet einen Bereich ein, der durch das Tag ausgezeichnet wird. Das Ende dieses Bereichs wird durch ein End-Tag mit einem vorangestellten Schrägstrich gekennzeichnet. Das End-Tag zu ist . Diese Vorstellung der Bereiche, die ausgezeichnet werden, soll an einem weiteren Beispiel illustriert werden. Durch das Tag beispielsweise wird Text kursiv gestellt (i ist die Abkürzung von italics, englisch für kursiv). Also leitet einen Bereich ein, der kursiv dargestellt wird. Natürlich muss dieser Bereich auch beendet werden, schließlich wollen Sie nicht den gesamten Text kursiv setzen. Mit beenden Sie diesen Bereich, der folgende Text wird somit nicht mehr kursiv dargestellt. Darüber hinaus gibt es noch ganz spezielle Tags, so genannte Kommentar-Tags. Diese beginnen mit

Im Browser sehen Sie anschließend den Text „Werkstatt“ in der Titelleiste.

Der Titel ist in der Titelleiste sichtbar.

Der Inhaltsbereich enthält dann den eigentlichen, sichtbaren Inhalt der HTML-Seite. Das meiste, was Sie in den nächsten Kapiteln finden werden, spielt sich zwischen und ab. Zum Test wollen wir einfach mal einen einfachen Text ausgeben: Werkstatt Willkommen in der Werkstatt!

26

AUF DER

CD-ROM

CSS

Sie finden dieses Beispiel auf der CD-ROM zum Buch im Verzeichnis code\kap00 unter dem Dateinamen html.html.

Der Text wird im Browser ausgegeben.

Wie in obiger Abbildung zu sehen ist, wird der Text im Browser angezeigt. Die Einrückung durch die Leerzeichen und die Zeilensprünge werden jedoch offensichtlich ignoriert. Dies ist eine Besonderheit von HTML: Sie können den HTML-Code durch Einrückungen und Zeilensprünge sehr übersichtlich gestalten. Auch uns als Autoren ermöglicht dies, die Codestücke in diesem Buch recht ansehnlich zu formatieren, sodass Sie auf einen Blick sehen können, worauf es ankommt.

CSS Die Grundidee von HTML bestand darin, Text eine logische Struktur zu geben, beispielsweise um Überschriften und Absätze zu kennzeichnen. Wie genau diese Struktur vom Browser dargestellt wird, war zunächst unwichtig. Mit der zunehmenden Kommerzialisierung des World Wide Web kam es jedoch darauf an, das Aussehen einer Seite möglichst genau festzulegen. Schließlich sollte das Corporate Design des Auftraggebers möglichst einheitlich umgesetzt werden. Ein exaktes Layout war gefragt. Dadurch stiegen jedoch auch die Anforderungen an den Webdesigner. Wir werden in diesem Buch beide Seiten beleuchten. Für die komplizierteren Gestaltungseffekte bedienen wir uns einer Technik, die unter dem Begriff CSS bekannt ist. Das Kürzel steht für Cascading Style Sheets, also etwa kaskadierende Stilseiten. Dahin-

27

Einleitung

ter verbirgt sich eine Methode zur Auszeichnung einzelner Bereiche einer Website, die sogar pixelgenaues Positionieren ermöglicht. Stil-Vorgaben werden in der Regel im -Abschnitt angegeben. Als Tag wird <style> ... verwendet. Hier ein Beispiel:

VORSICHT!

Werkstatt <style type="text/css"> Willkommen in der Werkstatt!

Die Angabe type="text/css" im <style>-Tag nennt man Attribut oder Parameter des Tags. Damit lassen sich viele Tags erweitern und dadurch näher bestimmen.

Wenn Sie dieses Beispiel im Browser aufrufen, sehen Sie dieselbe Ausgabe wie zuvor, mit einem kleinen (aber feinen) Unterschied: Der Text wird in der Schriftart Arial angezeigt, und nicht mehr in Times New Roman wie zuvor.

Der Text erscheint jetzt in Arial.

28

AUF DER

CD-ROM

JavaScript

Sie finden dieses Beispiel auf der CD-ROM zum Buch im Ordner code\kap00 unter dem Dateinamen css.html.

CSS bietet noch viele weitere Funktionen, mehr dazu erfahren Sie in den nächsten Kapiteln.

JavaScript

VORSICHT!

Die Firma Netscape, einer der Pioniere auf dem Browsermarkt, hat mit Version 2 ihres Browsers die Möglichkeit geschaffen, die Seitenbeschreibungssprache HTML um eine Programmiersprache zu erweitern. Diese entstand in Anlehnung an die Sprache Java und wurde deswegen JavaScript getauft.

Lassen Sie sich von vermeintlichen „Experten“ und anders lautenden Aussagen nicht verwirren: Java und JavaScript sind zwei völlig verschiedene Dinge!

Mit dieser Sprache können Sie Dynamik in Ihre Webseiten bringen und Effekte erzielen, die mit reinem HTML nicht möglich sind. Beispielsweise können Sie das Aussehen einer Grafik beim Darüberfahren mit der Maus verändern, wie wir Ihnen in einem der späteren Kapitel zeigen. Da solche Effekte teilweise relativ kompliziert zu programmieren sind, haben wir Ihnen den Löwenanteil der Arbeit schon abgenommen: Sie brauchen die vorgefertigten Programmteile nur noch in Ihre Seiten einzusetzen. Wir zeigen Ihnen später, wie Sie dabei vorgehen. JavaScript-Code wird durch das <script>-Tag eingebunden. Das Attribut language wird auf „JavaScript“ gesetzt (denn einige Browser unterstützen außer JavaScript auch andere Sprachen): <script language="JavaScript">

29

Einleitung

Die Kommentarzeichen brauchen Sie nicht weiter zu interessieren. Dies hat historische Gründe, denn ganz alte Browser unterstützen kein JavaScript, weshalb Sie früher den Code mithilfe von Kommentaren vor ihnen „verstecken“ mussten. Heutzutage ist das nicht mehr nötig, wenn auch nach wie vor üblich. Zur Illustration noch ein kleines Beispiel. Das folgende JavaScript-Programm öffnet beim Laden der Seite ein kleines Informationsfenster:

AUF DER

CD-ROM

Werkstatt <script language="JavaScript"> Willkommen in der Werkstatt!

Sie finden dieses Listing auf der CD-ROM zum Buch unter dem Dateinamen code\kap00\javascript.html.

Ein mit JavaScript erzeugtes Dialogfenster

JavaScript-Code wird normalerweise im -Abschnitt einer Seite abgelegt. Es ist auch möglich, JavaScript-Code in externe Dateien zu verlagern. Diese bekommen dann die Endung .js und können folgendermaßen in eine HTML-Seite eingebaut werden:

30

Hoster finden

<script language="JavaScript" src="datei.js">

Wir werden von dieser Möglichkeit später noch öfter Gebrauch machen.

Hoster finden Wenn Sie Ihre Website schließlich erstellt haben, müssen Sie sie noch irgendwie in das World Wide Web bringen. Dazu brauchen Sie einen Anbieter, der Ihnen Speicherplatz im World Wide Web und eine zugehörige Webadresse (auch URL genannt) zur Verfügung stellt. Ein solcher Anbieter wird Hoster genannt. Es gibt auf dem deutschen Markt viele verschiedene Hoster, einige davon gratis, der Großteil ist jedoch kostenpflichtig. Ihr Einwahl-Provider, also die Firma, über die Sie ins Internet gehen (bei den meisten Nutzern in Deutschland ist das T-Online oder AOL), bietet Ihnen in den meisten Fällen WWW-Speicherplatz an und kann somit als Hoster fungieren. Sie erhalten dann eine URL der Art home.t-online.de/Ihrname oder user.aol.com/IhrName. Wenn Sie eine eigene Domain haben möchten, also beispielsweise www.ihrname.de, kommen Sie um einen kostenpflichtigen Hoster nicht herum. Auf dem deutschen Markt sind 1&1 Puretec (www.puretec.de) und Strato (www.strato.de) sehr weit verbreitet. Bei diesen Anbietern erhalten Sie schon für relativ wenig Geld Ihren Platz im World Wide Web. Wenn Sie sich nun für einen Dienstleister entschieden haben und dort angemeldet sind, können Sie mit einem speziellen Programm (FTP-Programm; FTP = File Transfer Protocol) Ihre HTML-Seiten (und Grafiken, JavaScript-Dateien usw.) dorthin übertragen. Daraufhin kann jeder Internetbenutzer, der die URL kennt, Ihre Seiten abrufen. Genauere Informationen, wie Sie die Daten übertragen, erhalten Sie von Ihrem Hoster. In unten stehender Abbildung sehen Sie ein solches FTP-Programm im Einsatz.

Das FTP-Programm WS_FTP

31

Einleitung

Mit dem Buch arbeiten Dieses Buch geht an vielen Stellen didaktisch vor und verwendet Aufzählungen und Arbeitsschritte, wie beispielsweise:

1 2 3 4

Lesen Sie das Vorwort.

5

Legen Sie auf Ihrer Festplatte ein Arbeitsverzeichnis an, z.B. c:\werkstatt.

Lesen Sie die Einleitung. Lesen Sie alle Kapitel. Teilen Sie den Autoren mit, wie Ihnen das Buch gefallen hat. Einige dieser Arbeitsanleitungen sind zum besseren Verständnis zusätzlich bebildert, wie die folgenden Beispiele zeigen:

Das Verzeichnis wird angelegt.

6

Wechseln Sie auf der CD-ROM zum Buch in das Verzeichnis code\kap00.

Das Verzeichnis auf der CD-ROM

7

32

Kopieren Sie die Datei test.html in Ihr Arbeitsverzeichnis auf der Festplatte.

Mit dem Buch arbeiten

Die Datei wurde auf die Festplatte kopiert.

8

Entfernen Sie den Schreibschutz von der Datei. Unter Windows klicken Sie mit der rechten Maustaste auf die Datei, wählen im aufklappenden Kontextmenü den Befehl Eigenschaften und deaktivieren dann die Option Schreibgeschützt.

Die Option wurde deaktiviert.

33

Einleitung

PROFITIPP VORSICHT!

Mit diesem Icon warnen wir Sie vor möglichen Stolperfallen oder Fehlerquellen wie dieser: Nach dem Kopieren einer Datei von CDROM ist diese auf der Festplatte zumeist automatisch schreibgeschützt. Wenn Sie den Schreibschutz vorher nicht entfernen, schlägt das Speichern fehl. Auch wenn Sie danach den Schreibschutz entfernen, verlangen manche Editoren ein Neuladen der Datei, bevor das Speichern zugelassen wird.

An vielen Stellen verweisen wir auf Beispiele oder Software auf der CDROM zum Buch. Sie erkennen das an diesem Icon. Im Unterverzeichnis code befinden sich alle Beispiele aus diesem Buch. Für jedes Kapitel existiert dort ein Ordner kapXX, wobei XX für die Kapitelnummer steht.

AUF DER

Dieses Icon gibt besondere Tipps für die Erstellung der Website, beispielsweise den Hinweis, dass Sie die zuvor gezeigten Arbeitsschritte zum Kopieren von Dateien von der CD-ROM zum Buch und zum Entfernen des Schreibschutzes verinnerlichen sollten, da dies in jedem Kapitel auf Sie zukommt.

CD-ROM

Ebenso finden Sie mehrere Arten von Icons, die Sie auf Besonderheiten aufmerksam machen:

Des Weiteren verwenden wir in diesem Buch verschiedene Formatierungen: ■ Dateinamen: datei.html ■ Menübefehle, Dialogfenster und Optionen: Datei/Speichern ■ Web-Adressen/URLs: www.mut.de ■ Code/Listings: ■ Hervorhebungen: ganz wichtig Und nun, Ende der langen Vorrede; Sie sind nun gewappnet für die folgenden Kapitel.

34

17.0Text verschönern Keine Webseite kommt ohne Text aus. Egal ob ganze Absätze, Überschriften oder Beschriftungen, für jede Gelegenheit ist Text notwendig. Die einfachste Art, Text einzugeben, ist, ihn innerhalb des -Tagpaares zu schreiben. Beliebiger Text

Dieser Text erscheint vollkommen unformatiert im Browser. Der Browser nimmt als Schrift seine Standardschriftart, meist eine Times New Roman in der Standardgröße. Dies wirft mehrere Probleme auf: Zum einen sieht es nicht besonders gut aus, zum anderen kann jeder Nutzer die Standardschriftart und -größe in seinem Browser individuell wählen.

Die Schriftart in Netscape 6 einstellen

Text verschönern

Um diesen Problemen zu begegnen, müssen Sie in HTML Angaben zum Aussehen Ihrer Texte machen. Sie müssen sie formatieren. Es gibt hierfür zwei Wege: ■ Texte und Absätze werden mit Tags, also HTML-Befehlen formatiert. Hierzu stehen eine Reihe unterschiedlicher Tags mit verschiedenen Attributen zur Verfügung. Dies ist der herkömmliche Weg, dem dieses Kapitel gewidmet ist. Er hat den Vorteil, dass die Formatierungs-Tags auch von älteren Browsern unterstützt werden. Außerdem arbeiten viele HTML-Editoren noch nach diesem Prinzip. ■ Der zweite Weg ist die Formatierung mit Style Sheets. Wir behandeln diesen neueren Weg im nächsten Kapitel. Er bietet mehr Möglichkeiten und erlaubt Ihnen beispielsweise, mehrere Webseiten mit nur einem Style Sheet zu formatieren.

1.1 Auf der CD-ROM ... Jedes Kapitel der Werkstatt beginnt mit einem fertigen Arbeitsbeispiel. In diesem Kapitel liefern wir Ihnen einen einfachen Text, der bereits formatiert ist. Der Text selbst ist natürlich völlig beliebig. Aber auch die Formatierungen können variieren. Deshalb zeigen wir Ihnen im folgenden, wie sie das Codebeispiel verändern können, um es Ihren Anforderungen anzupassen. Zuerst benötigen Sie aber die Datei. Dazu müssen Sie sie, wie in den folgenden Schritten beschrieben, von der CD-ROM auf Ihre Festplatte kopieren:

36

1 2

Wählen Sie auf der CD-ROM das Verzeichnis code\kap01 an.

3

Entfernen Sie den Schreibschutz von der Datei (siehe vorhergehendes Kapitel, die Einleitung), damit Sie die Datei ändern können.

4

Öffnen Sie die Datei in einem Browser Ihrer Wahl und begutachten Sie das Dokument.

Kopieren Sie die Datei text_formatieren.html in Ihr Beispielverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt) und benennen Sie sie in text_formatieren_geaendert.html um, damit sie das Original von der Arbeitsdatei unterscheiden können.

Auf der CD-ROM ...

Text formatieren

Wenn Sie die HTML-Seite im Browser betrachten, sehen Sie folgende Elemente: ■ Eine Überschrift, die fett und wesentlich größer als der normale Text dargestellt ist. ■ Einen normalen Absatz. ■ Einen rechts ausgerichteten Absatz mit einer fetten Hervorhebung. ■ Einen Absatz mit Zeilenumbruch und einer kursiven Hervorhebung. ■ Eine horizontale Trennlinie. ■ Einen kleinen Absatz in rot mit anderer Schrift und Sonderzeichen (CopyrightZeichen). Wenn Sie nun die Datei in Ihrem Lieblingseditor öffnen, sehen Sie, wie die Seite gemacht wurde. Text formatieren HTML-Werkstatt

In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS

Achten Sie vor allem auf die beigelegte CD-ROM.

Die wichtigsten Fakten,
und Informationen werden ausführlich behandelt

37

Text verschönern

© Hauser/Wenz, München, Winter 2001/2002

text_formatieren.htm

Im folgenden werden wir Ihnen die einzelnen Elemente erklären und zeigen, wie Sie die Formatierungen variieren und auf Ihre Erfordernisse anpassen können.

1.2 Überschrift Die Überschrift ist sehr groß und fett dargestellt. Dies alles wird von einem einzigen Tagpaar und bewerkstelligt. Das h steht für heading (engl. für Überschrift ☺). Die 1 deutet an, dass es sich um eine Überschrift erster Ordnung handelt. Dies impliziert natürlich, dass es in HTML auch Überschriften tieferer Ordnung gibt. Das ist richtig, es gibt insgesamt sechs Überschriftenebenen, die sich jeweils durch die Nummer im Tag unterscheiden. Ausgehend von der Überschrift in unserem Beispiel können Sie recht einfach die anderen fünf Ebenen dazusetzen:

1

Löschen Sie alles außer der Überschrift aus der Beispieldatei und speichern Sie sie unter einem anderen Namen. Vergeben Sie auch einen anderen Titel. Sie sollten die Ausgangsdatei behalten, da Sie sie noch benötigen werden.

2 3

Kopieren Sie die Zeile mit der Überschrift und fügen Sie sie fünfmal darunter ein.

4

Ändern Sie den Text der Überschriften in „Überschrift Nr“.

Ändern Sie die Tags, indem Sie die Nummern für die Überschriften von 1 bis 6 in absteigender Reihenfolge vergeben.

Ihr Code müsste nun in etwa so aussehen: Überschriften Überschrift 1 Überschrift 2 Überschrift 3

38

Überschrift

Überschrift 4 Überschrift 5 Überschrift 6 ueberschriften.htm

Wenn Sie das Ergebnis im Browser betrachten, sehen Sie die sechs Überschriftenebenen untereinander angeordnet. Alle Überschriftebenen sind eigene Absätze mit Abstand nach allen Seiten. Außerdem sind Überschriften immer automatisch fett. Die verschiedenen Ebenen unterscheiden sich in der Schriftgröße, wobei die kleineren Ebenen auch kleiner als die Standardschrift werden.

PROFITIPP

Verschiedene Überschriftebenen

Eine siebte Überschriftenebene gibt es in keinem Browser. Wenn Sie das Tag verwenden, wird es vom Browser ignoriert. Der darin enthaltene Text wird in Standardschrift nicht fett und ohne Absatz dargestellt.

Problematisch ist bei Überschriften, dass deren Schriftgröße und Aussehen von den Nutzereinstellungen im Browser abhängt. Man kann allerdings innerhalb der -Tags andere Tags für die Formatierung verwenden, aber dazu später mehr.

39

Text verschönern

Leider ist es in HTML nicht möglich, Überschriften zu nummerieren. Deshalb ist die Überschriftenordnung für ein Dokument nicht wirklich wichtig. Sie können also für alle Überschriften der zweiten Ebene auch das -Tag nehmen, wenn es von der Schriftgröße her besser passt. Für eine Ebene sollten Sie allerdings immer auf einheitliche Überschriften achten.

1.3 Absätze In unserer Ausgangsdatei folgt nach der Überschrift ein Absatz, der von den Tags

und

begrenzt wird.

steht für paragraph (engl. für – *Trommelwirbel* - Absatz). Text, der sich im Körper einer HTML-Seite, also zwischen den -Tags befindet, sollte laut Standard immer in einem Absatz stehen, es sei denn er wird in eine Tabelle oder neben ein Bild geschrieben, aber dazu später mehr. Ein Absatz bewirkt folgendes: Am Ende des Absatzes wird ein Zeilenumbruch eingefügt und der darin enthaltene Text erhält einen Abstand zu vorigem und nachfolgendem Text. Neben dieser einfachen Formatierung kann ein Absatz noch wesentlich mehr. Er ist im Prinzip ein eigenständiger Textcontainer. Jeder Absatz kann beispielsweise mit Style Sheet-Befehlen angesprochen und formatiert werden.

Ausrichten Sie haben im letzten Abschnitt schon gelesen, dass Absätze eigene Einheiten sind. Deshalb können sie mit dem Attribut align im

-Tag auch einzeln ausgerichtet werden. In unserer Ausgangsdatei haben wir den zweiten Absatz mit align="right" rechtsbündig ausgerichtet. In der folgenden Tabelle finden Sie die vier möglichen Werte für align. Anschließend wollen wir mit diesem Wissen die Ausgangsdatei ein wenig verändern. Wert

Beschreibung

center

Zentriert den Absatz. Die Umbrüche im Browser sehen hier oft nicht besonders schön aus.

justify

Blocksatz. Ältere Browser, beispielsweise Netscape 3, unterstützen diesen Wert noch nicht.

left

Richtet den Absatz linksbündig aus. Dies ist die Standardeinstellung, die auch ohne Angabe von align verwendet wird.

right

Richtet den Absatz rechtsbündig aus.

Werte für das Attribut align

40

Absätze

In der Ausgangsdatei wurde nur der zweite Absatz ausgerichtet. Wir wollen nun zusätzlich den ersten Absatz zentrieren. Bisher sah der Code für den ersten Absatz folgendermaßen aus:

In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.

Nun sind folgende Schritte notwendig:

1 2

Fügen Sie in das

-Tag das Attribut align ein. Vergeben Sie für das Attribut den Wert center.

In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.

Nun wird der Text des Absatzes im Browser zentriert.

PROFITIPP

Der Text im Absatz wurde zentriert

Sie können nicht nur Absätze sondern beispielsweise auch Überschriften ausrichten. Mit folgendem Code zentrieren Sie die Überschrift in unserem Beispiel: Werkstatt-Konzept

Sie sehen die Auswirkung in der Abbildung.

41

Text verschönern

PROFITIPP

Die Überschrift wurde ebenfalls zentriert

Eine, vom Standard nicht mehr empfohlene Methode, Objekte, also auch Absätze zu zentrieren, ist das Tagpaar und . Alles, was von diesen Tags umschlossen wird, wird zentriert. Sie sollten dieses Tag allerdings nicht mehr verwenden, da unter Umständen die Unterstützung seitens zukünftiger Browsergenerationen eingestellt wird.

Zeilenumbrüche In Word oder irgendeiner anderen Textverarbeitung fügen Sie mit (¢) einen Absatzwechsel und mit (ª)+(¢) einen Zeilenumbruch ein. In HTML haben Sie, wie schon gehört, das

-Tag für Absätze. Zeilenumbrüche im HTML-Quellcode mit (¢) werden vom Browser schlichtweg ignoriert. Einen normalen Zeilenumbruch erzeugt man stattdessen mit dem
-Tag. Dieses Tag gehört zu den wenigen, die kein Tagpaar bilden. Stattdessen wird das Tag sofort wieder mit dem Schrägstrich geschlossen. Sie könnten zwar theoretisch auch folgendes schreiben:



In der Praxis macht dies aber keinen Sinn, da Sie nichts dazwischen einfügen können und der Tippaufwand höher ist. Zu guter Letzt: Praktisch alle Browser akzeptieren auch einfach nur
, ohne End-Tag.

42

PROFITIPP

Absätze

HTML-Editoren wie Frontpage, Dreamweaver oder HotMetal verwenden meist wieder die aus der Textverarbeitung bekannten Tastenkürzel (¢) für einen Absatzwechsel und (ª)+(¢) für einen Zeilenumbruch und setzen diese dann in die entsprechenden Tags um.

Die Höhe des Zeilenumbruchs hängt immer von der verwendeten Schriftart ab. Das heißt, sollte der Text, in dem das
-Tag steht, besonders groß sein, so wird auch der Zeilenumbruch entsprechend.

Text einrücken Mit dem Tag können Sie einen ganzen Absatz von links und rechts einrücken. Als Versuchskaninchen muss der erste, jetzt zentrierte, Absatz herhalten. Folgende Schritte sind notwendig:

1 2

Fügen Sie das Tag vor dem Absatz ein. Ergänzen Sie nach dem Ende des Absatzes (nach

) das Tag .

Der Code sieht nun folgendermaßen aus:

In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.

VORSICHT!

Im Browser sehen Sie die starke Einrückung um den Absatz. In der Praxis verwendet man diesen Effekt beispielsweise, wenn man Absätze hierarchisch anordnen möchte, ohne eine Liste zu verwenden. Ein weiteres Einsatzgebiet sind Zitate, die vom übrigen Text abgehoben werden sollen. Eigentlich ist das Tag als logische Textauszeichnung für Zitate und Textblöcke konzipiert worden. Das heißt, ein Browser muss laut Spezifikation mit diesem Tag ausgezeichnete Bereiche nicht unbedingt einrücken. In der Praxis tun das allerdings alle gängigen Browser, weswegen wir Ihnen dieses Tag auch zum Einrücken von Text vorgestellt haben.

43

Text verschönern

PROFITIPP

Der erste Absatz wurde eingerückt.

Wenn man zur Hervorhebung von Zitaten verwendet, kann es auch alleine ohne

-Tags stehen. Man wird dann in Stylesheets unter Umständen auch eine eigene Formatierung für dieses Tag bereithalten. Für Zitate gibt es außerdem das Tag . Es fügt automatisch Anführungszeichen zu einem Zitat hinzu, nimmt aber keine Einrückung vor und stellt auch keinen eigenen Absatz dar.

1.4 Horizontale Linie In unserer Ausgangsdatei haben wir zwischen den drei Absätzen mit der Standardschriftart und dem anders formatierten Absatz mit Copyright-Hinweisen mit dem Tag eine Trennlinie eingefügt. Dieses Tag wird wie das
-Tag für den Zeilenumbruch sofort geschlossen. Noch sieht die Linie aus unserem Ausgangsbeispiel relativ langweilig aus. Im folgenden wollen wir sie ein wenig verändern:

44

1

Mit dem Attribut size im -Tag ändern Sie die Dicke der horizontalen Linie. Die Angabe erfolgt in Pixeln.

2

Vergeben Sie für size einen Wert von 5.

Horizontale Linie

3

Fügen Sie nun das Attribut width hinzu. Es ändert die Breite der horizontalen Linie und kann in Pixeln oder Prozent der Fenstergröße angegeben werden.

4

Vergeben Sie einen Wert von 50% für width, um die Linie genau halb so breit zu machen, wie das Fenster.

5

Wenn die Größe der Linie reduziert ist, lässt sich natürlich auch die Ausrichtung ändern. Fügen Sie dazu das Attribut align hinzu und vergeben Sie den Wert right.

Mit dem Attribut noshade schalten Sie den Schatten der Linie aus, der vom Browser automatisch hinzugefügt wird. Dieses Attribut ändert allerdings nichts daran, das die Linie in verschiedenen Browsern unterschiedlich aussieht.

PROFITIPP

6

Wenn Sie XHTML-konform programmieren möchten, müssen Sie für noshade den Wert noshade vergeben, da kein Attribut in XHTML ohne Wert stehen darf.

7

Um die Farbe der Linie zu variieren, sollten Sie normalerweise einen Style SheetBefehl verwenden. Für den Internet Explorer gibt es allerdings das Attribut color. Es funktioniert allerdings weder mit Netscape noch mit Opera.

8

Vergeben Sie für das Attribut color den Wert blue.

PROFITIPP



In HTML können Sie 16 Standardfarben und eine ganze Anzahl weiterer Farben direkt mit dem Farbnamen angeben. Eine Tabelle mit den Standardfarben finden Sie im folgenden Abschnitt „Farben in HTML“. Eine komplette Liste findet sich im Anhang.

Rufen Sie die Datei nun im Browser auf. Wenn Sie die neue Linie betrachten, sehen Sie die Änderungen, die wir mit wenigen Attributen erreicht haben.

45

Text verschönern

PROFITIPP

Die Linie wurde umformatiert.

Das Tag ist in der HTML-Spezifikation keine Empfehlung mehr, sondern wird als veraltet eingestuft. Stattdessen wird vorgeschlagen, Trennlinien mit CSS-Style-Sheet-Befehlen zu realisieren. Die gängigen Browser unterstützen allerdings und werden das vermutlich noch für einige Generationen beibehalten.

1.5 Farben in HTML Im letzten Abschnitt haben wir eine Linie mit Farbe versehen. In den folgendne Abschnitten werden wir noch öfter mit Farben arbeiten. Deshalb folgt an dieser Stelle ein kurzer Exkurs zu Farben in HTML. Es gibt einige Farben, die sich über die Farbnamen aufrufen lassen. Die 16 Standardfarben finden Sie in der folgenden Tabelle. Eine Liste mit den übrigen Farben hat im Anhang Platz gefunden.

46

Name

Deutsche Bezeichnung

Farbcode

Aqua Black Blue Fuchsia Gray Green

Aquamarin Schwarz Blau Fuchsie Grau Grün

#00FFFF #000000 #0000FF #FF00FF #808080 #008000

Farben in HTML

Name

Deutsche Bezeichnung

Farbcode

Lime Maroon Navy Olive Purple Red Silver Teal White Yellow

Limonengrün Dunkles Rot Dunkles Blau Olivgrün Lila Rot Silbergrau Dunkle Grün/Blau-Mischung Weiß Gelb

#00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00

Die Standardfarben von HTML

Die zweite Art, eine Farbe anzugeben, ist der Farbcode. Er ist in hexadezimaler Schreibweise geschrieben und gibt den RGB-Farbwert einer Farbe an. Um dies näher zu erklären, müssen wir ein wenig ausholen: Computerbildschirme verwenden das RGB-Farbschema, das all seien Farben aus den drei Grundfarben Rot, Grün und Blau zusammensetzt. Deshalb nennt man dieses Farbschema auch additiv. Jede Farbe besteht also aus Anteilen von Rot, Grün und Blau. Diese Anteile variieren von 0 (nicht vorhanden) bis 255 (vollständig vorhanden). Reines Rot besteht also aus 255 Anteilen Rot, 0 Anteilen Grün und 0 Anteilen Blau. Nun könnte man diese Farbwerte direkt angeben. Das funktioniert auch, allerdings nur in Style Sheets (siehe Kapitel 2). In HTML müssen die RGB-Farben in das hexadezimale System übertragen werden. Ein hexadezimaler Farbcode beginnt mit einem Doppelkreuz #. Dann folgen zwei Stellen für den Farbanteil von Rot, anschließend zwei für Grün und abschließend zwei für Blau. Wenn Sie eine beliebige RGB-Farbe mit den Anteilen 0 Rot, 153 Grün und 51 Blau haben, müssen Sie die einzelnen Farbwerte in hexadezimale Schreibweise umwandeln. Bevor wir dazu kommen, zeigen wir Ihnen allerdings zuerst den umgekehrten Weg, da er das Hexadezimalsystem gut erklärt. Das Hexadezimalsystem enthält 16 Ziffern, wobei A bis F die Ziffern 10 bis 15 ersetzen. Um nun beispielsweise A2 in das Dezimalsystem umzuwandeln, müssen Sie die erste Ziffer A (=10) mit 16 multiplizieren und die zweite Ziffer addieren. Die gesamte Rechnung: 10 * 16 + 2 ergibt einen Farbwert von 162. Nun können wir auch in die andere Richtung umrechnen. Ziel war es, die RGB-Farbe 0, 153, 51 umzurechnen. Ein Rotanteil von 0 ist im Hexadezimalsystem 00. Der Grünwert von 153 errechnet sich folgendermaßen: 153 : 16 ergibt als ganze Zahl 9, das heißt die erste Zahl im hexadezimalen System ist die 9. Die zweite Zahl ist der Rest, der bei der Divi-

47

Text verschönern

sion herauskam, natürlich multipliziert mit 16. In unserem Beispiel ist das Ergebnis der Division 9,5625, der Rest also 0,5625. Dieser multipliziert mit 16 ergibt 9, die zweite Zahl ist also ebenfalls 9. Der richtige hexadezimale Wert für den Grünwert 153 ist also 99.

PROFITIPP

Das selbe Spielchen müssen Sie nun noch für den Blauwert durchführen: 51:16=3,1875; die erste Zahl ist also 3. Nun zur zweiten Zahl: 0,1875*16 ergibt 3. Die gesamte Farbe hat also den Wert #009933. Farben, die bei allen Farbanteilen nur aus den RGB-Farbwerten 0, 51, 102, 153, 204, 255 bestehen (hexadezimal: 00, 33, 66, 99, CC, FF), nennt man web-sichere Farben. Das sind Standardfarben, die – in der Theorie – auf allen Betriebssystemen und Oberflächen dargestellt werden können. Die Verwendung der web-sicheren Farben ist in der Praxis allerdings nur für die Standardfarben von Text und Links, weniger aber für Bilder von Interesse, da der Browser Bilder selbst auf die vom System darstellbaren Farben bringen kann, und auf der anderen Seite die Beschränkung auf websichere Farben eine erhebliche Design-Einschränkung bedeutet, die bei der Güte heutiger Monitore und Grafikkarten nicht mehr erforderlich ist.

1.6 Hervorhebungen In unserer Ausgangsdatei haben wir an zwei Stellen Hervorhebungen (synonym: Textauszeichnungen) verwendet. Einmal haben wir „CD-ROM“ fett dargestellt, zum anderen „Fakten“ und „Informationen“ kursiv. Beide Hervorhebungen sind sogenannte physikalische Textauszeichnungen, das heißt, dem Browser wird exakt gesagt, was er mit der entsprechenden Textstelle zu tun hat. Das Gegenstück zu den physikalischen sind die logischen Textauszeichnungen. Sie schreiben dem Browser nicht vor, wie er auszeichnen soll, sondern besagen nur, was das auszuzeichnende ist. Ein Beispiel ist das Tag <strong>. Es sagt nicht, wie ein Text hervorgehoben werden soll, sondern nur dass er das muss. Ob die Hervorhebung dann eine größere Schrift, fett oder kursiv ist, bleibt dem Browser überlassen. Welche Auszeichnung sollte man also wann verwenden? Befragen wir die offizielle HTML-Spezifikation des W3C dazu, so ergibt sich kein eindeutiges Urteil. Die gebräuchlichsten physikalischen Textauszeichnungen wie und sind nicht auf der „schwarzen Liste“ (Status: deprecated), aber es wird betont, dass man besser Style Sheets dafür verwenden sollte. Die wichtigsten logischen Textauszeichnungen <em>, und <strong> können im Prinzip verwendet werden. Hier ist allerdings dem Browser überlassen, wie er hervorhebt. Eine klare Empfehlung geht, wenn überhaupt, in Richtung Verwendung von Style Sheets.

48

Hervorhebungen

Was lehrt die Praxis? Die physikalischen Textauszeichnungen haben den großen Vorteil, dass sie auch auf den ältesten Browsern dargestellt werden und immer gleich aussehen. Auf der anderen Seite ergeben logische Textauszeichnungen in Verbindung mit Style Sheets ein mächtiges Werkzeug, da sich das Aussehen beispielsweise einer Hervorhebungen global für eine ganze Webseite oder sogar für mehrere Seiten ändern lässt.

Physikalische Textauszeichnungen In der folgenden Tabelle haben wir Ihnen die wichtigsten physikalischen Textauszeichnungen auf einen Blick zusammengefasst. Tag

Beschreibung

<small> <sub>

Fetter Text Große Schrift Kursiver Text Kleine Schrift Tiefgestellter Text. Wird beispielsweise für die Indexierung verwendet. Hochgestellter Text. Ist beispielsweise für Fußnoten oder Potenzen geeignet. Diktengleiche Schrift (Schrift, bei der alle Buchstaben und Abstände gleich sind; meist Courier)

<sup>

Physikalische Textauszeichnungen

Logische Textauszeichnungen Die folgende Tabelle enthält eine Übersicht über die wichtigsten logischen Textauszeichnungen: Tag

Beschreibung



Abkürzung. Wird von den gängigen Browsern wie gewöhnlicher Text formatiert. Akronym. Wird ebenfalls wie normaler Text formatiert. Zitat. Wird kursiv formatiert. Quellcode. Wird in diktengleicher Schrift (Schrift, bei der Buchstabenbreiten und Abstände gleich sind; meist Courier) angezeigt. Definition. Wird von den gängigen Browsern kursiv dargestellt. <em> Hervorhebung. Meist kursiv. Tastatureingabe. Meist in Courier. <samp> Beispiel. Ebenfalls meist in Courier.

49

Text verschönern

Tag

Beschreibung

<strong>

Starke Hervorhebung. Meist fett. Variable. Meist kursiv.

Logische Textauszeichnungen

1.7 Schrift ändern In unserer Ausgangsdatei haben wir dem letzten Absatz unter der horizontalen Trennlinie eine andere Schriftart, -größe und -farbe zugewiesen. Dazu dient der Tag . Im folgenden wollen wir die verschiedenen Formatierungen für den Text der Reihe nach ändern. Betrachten Sie zuerst die Codezeile mit der Formatierung im Editor. Das -Tag wird innerhalb eines Absatzes eingesetzt. Alle Formatierungen erfolgen innerhalb des Tags mit verschiedenen Attributen.

Die Formatierung wird mit Attributen in erledigt.

Im nächsten Schritt ändern wir die Schriftart. Für sie ist das Attribut face zuständig. Die Schriftart tragen Sie einfach als Wert für dieses Attribut ein. Wir ändern die Schriftart hier in Courier.

Die Schriftart wurde in Courier geändert

50

VORSICHT!

Schrift ändern

HTML greift auf die Schriftarten zu, die bei dem Betrachter der Seiten installiert sind. Das heißt, Exoten, die Sie auf ihrem Rechner haben, funktionieren unter Umständen an anderen Rechnern nicht. Statt dessen wird dort eine Ersatzschriftart verwendet. Alternativ können Sie auch verschiedene Schriftarten durch Kommata getrennt angeben und danach noch die Schriftfamilie festlegen. Folgender Code verwendet zuerst eine Arial, ist diese nicht installiert (bspw. am Macintosh), so wird die (fast) identische Helvetica verwendet. Ansonsten wird auf irgendeine Schrift aus der Familie der serifenlosen zurückgegriffen. Serifenlos heißt, die Schrift hat keine Füße und Erweiterungen.

Betrachten Sie im nächsten Schritt die Änderung im Browser. Hier erkennen Sie, dass die Schriftart angepasst wurde.

PROFITIPP

Die Schriftart in der Copyright-Zeile wurde geändert

Im Allgemeinen lassen sich serifenlose Schriften wie Arial am Bildschirm besser lesen und sind deswegen für Texte zu bevorzugen. Serifenschriften wie Times oder Courier sollten in einer ausreichenden hohen Schriftgröße vorliegen, um gut erkennbar zu sein.

Im nächsten Schritt ändern wir die Schriftgröße. Dazu muss das Attribut size verändert werden. Normalerweise wird die Schriftgröße in Punkt angegeben. Eine Schrift in einem Buch hat normalerweise 10 bis 11 Punkt, am Bildschirm sollten es mindestens 12 Punkt sein. So erfolgt auch die Angabe in Style Sheets. HTML hingegen verwendet

51

Text verschönern

verschiedene Schriftgrößen von 1 (kleinste) bis 7 (größte), wobei 4 die Standardschrift ist, deren Größe der Nutzer im Browser anpassen kann. Wenn wir nun die Schriftgröße anheben wollen, verwenden wir statt 1 die Größe 4.

Die Schriftgröße auf 4 erhöhen.

PROFITIPP

Die höhere Schriftgröße macht sich gleich im Browser bemerkbar.

Die Schriftgröße lässt sich auch mit + und - von der Standardgröße ändern. +1 bedeutet beispielsweise eine Erhöhung um 1, -1 eine Minderung. Im folgenden Code ist die Schriftgröße relativ zur Standardgröße um zwei Stufen gemindert, hat also bei einer Standardgröße von 4 auch den Wert 2.

Im letzten Schritt wollen wir noch die Textfarbe von rot zu blau ändern. Dies geschieht mit dem Attribut color im -Tag. Ändern Sie hier einfach von red zu blue.

52

Sonderzeichen

Die Farbe des Texts wurde geändert

1.8 Sonderzeichen Das Copyright-Zeichen aus dem letzten Absatz wurde mit einem Sonderzeichen realisiert. Ein Sonderzeichen beginnt mit einem kaufmännischen Und & und endet mit einem Strichpunkt ;. Dazwischen wird die Zeichenkette eingefügt, die die Art des Sonderzeichens bestimmt.

Auf der CD-ROM ... Auf der CD haben wir eine Datei mit allen wichtigen Sonderzeichen hinterlegt. Wenn Sie ein Sonderzeichen daraus brauchen, kopieren Sie es sich einfach in Ihren Code. Zuvor legen Sie die Datei in Ihr Arbeitsverzeichnis:

1 2

Kopieren Sie die Datei sonderzeichen.html in Ihr Beispielverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.

4

Wenn Sie sich nun die Datei im Browser ansehen, finden Sie alle Sonderzeichen, die Sie benötigen.

Wählen Sie auf der CD-ROM das Verzeichnis code\kap01 an.

Alle Sonderzeichen im Browser

53

Text verschönern

Wir erläutern Ihnen nun schrittweise, wie sie ein Sonderzeichen in eine andere HTML-Datei kopieren.

1

Öffnen Sie die Datei sonderzeichen.html in einem Texteditor. Öffnen Sie anschließend die Datei, in die Sie das Sonderzeichen einfügen möchten ebenfalls in dem Texteditor.

Die Datei sonderzeichen.html im Editor.

2

Markieren Sie im Editor das Sonderzeichen, das Sie benötigen. Sie sehen sein Aussehen und seine Position am besten im Browser. In unserem Beispiel wählen wir das Währungssymbol für das englische Pfund. Es heißt £ und befindet sich an der vierten Position von links.

Das Pfund-Symbol im Quelltext markiert

3 4 54

Kopieren Sie das Symbol mit Bearbeiten/Kopieren. Wechseln Sie nun in die Datei, wo Sie das Sonderzeichen einfügen wollen und klicken Sie an die Stelle, wo das Zeichen hin soll. Betätigen Sie dann Bearbeiten/Einfügen.

Sonderzeichen

Umlaute In HTML sind auch Umlaute Sonderzeichen, da sie beispielsweise bei amerikanischen Browsern nicht im Standard-Zeichenumfang enthalten sind. Die Umlaute folgen einem einfachen Schema. Sie beginnen mit dem kaufmännischen Und, dann folgt der Buchstabe für den Umlaut. Hier wird zwischen Groß- und Kleinschreibung unterschieden. Das heißt, ein kleines u produziert ein kleines ü, U dagegen ein großes. Nach dem Buchstaben folgt uml für Umlaut. ü ergibt also ein kleines ü, Ä ein großes A. In unserer Ausgangsdatei hatten wir noch einen kleinen Fehler. Das ü in „ausführlich“ im dritten Absatz ist kein Sonderzeichen. In einem deutschen Browser ist das kein Problem, sie sollten aber auf jeden Fall Sonderzeichen verwenden, um allen Nutzern gerecht zu werden.

Das ü ist noch kein Sonderzeichen.

Wir zeigen Ihnen im folgenden noch die erforderlichen Schritte, um das ü zu ändern.

1 2

Markieren Sie das ü und entfernen es. Setzen Sie an Stelle des ü das Sonderzeichen ü ein.

Das ü wird durch das korrekte Sonderzeichen ersetzt

55

Text verschönern

1.9 Fazit Die Änderungen, die wir in diesem Kapitel an der Ausgangsdatei vorgenommen haben, waren hauptsächlich kosmetischer Natur. Sollten Sie nicht alle Änderungen mit nachvollzogen haben, so finden Sie das fertige Ergebnis auf CD im Ordner code/kap01 unter dem Namen text_formatieren_geaendert.html.

Unser Ausgangsbeispiel wurde geändert

In diesem Kapitel haben Sie gesehen, wie Sie einen Text mit relativ wenig Aufwand formatieren können. Dies sollte aber nicht darüber hinwegtäuschen, dass Text bei einer Webseite im realen Leben sehr sorgfältig formatiert werden muss. Zu große oder zu kleine Schrift, die falsche Schriftart oder ungewöhnliche Farben führen oft zu verärgerten Nutzern. Im nächsten Kapitel zeigen wir Ihnen, wie Sie die selben Aufgaben mit Style Sheets lösen können.

56

2.0 Text verschönern mit Stylesheets Die Sprache für Stylesheets in und für HTML-Seiten ist CSS (Cascading Style Sheets). Sie liegt mittlerweile in der Version 2.0 vor. Stylesheets dienen als Ergänzung zu HTML und formatieren HTML-Objekte. Sie haben dabei eine Vielzahl an Wahlmöglichkeiten und Einstellungen. Stylesheets sind nicht nur ein flexibles Werkzeug, sondern erlauben auch Formatierungen, die mit HTML nicht möglich wären. Beispielsweise können Sie die Schriftgröße Punktgenau angeben, Absätze einrücken und die RGB-Werte von Farben verwenden, ohne auf die hexadezimale Schreibweise zurückgreifen zu müssen. Die Browserunterstützung von CSS 1.0 ist sehr gut. Der Internet Explorer hatte schon in Version 3 einige Befehle implementiert, in Version 4 wurde 1.0 dann komplett unterstützt. Außerdem kamen Teile von CSS 2.0 sowie eigene Microsoft-Kreationen dazu. Der Netscape Navigator 4.x unterstützt ebenfalls CSS 1.0 und teilweise 2.0, leistet sich aber relativ viele Schwachstellen und Bugs. Die neuesten Versionen sowie Opera 5.x bieten auch zu CSS 2.0 eine fast komplette Unterstützung. In der Praxis spricht normalerweise nichts gegen den Einsatz von Stylesheets. In diesem Kapitel werden wir außerdem hauptsächlich Befehle verwenden, die auch von Netscape 4.x unterstützt werden. Sollte das einmal nicht der Fall sein, finden Sie einen entsprechenden Hinweis. Dieses Kapitel beschäftigt sich mit den vielen Möglichkeiten von Stylesheets zur Formatierung von Text. Wir haben das Kapitel deshalb in zwei Arbeitsbeispiele getrennt. Das erste zeigt, wo in einer Datei Stylesheets vorkommen können, das zweite erlaubt Ihnen, Stil-Befehle zur Textformatierung zu ändern. Beide Beispiele werden mit dem schon bekannten Abschnitt „Auf der CD-ROM ...“ eingeleitet.

Text verschönern mit Stylesheets

2.1 Auf der CD-ROM ... Als erstes benötigen wir die Datei mit den Stylesheet-Formatierungen für Text. Sie finden sie wie gewohnt auf der CD-ROM.

1 2

Kopieren Sie die Datei text_stylesheet.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.

4 5

Öffnen Sie die Datei text_stylesheet.html in Ihrem bevorzugten Editor.

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2.

Anschließend öffnen Sie sie mit einem Browser.

Im Browser kommt Ihnen die Datei sicherlich bekannt vor. Es ist eine leichte Abwandlung des Arbeitsbeispiels aus dem ersten Kapitel.

Das Arbeitsbeispiel, formatiert mit Stylesheets

Im Editor erscheint die Datei auf den ersten Blick ein wenig verwirrend. Wir gehen kurz die neuen Elemente durch, erklären dann das Grundprinzip, um anschließend Modifikationen vorzunehmen:

58

Grundlagen von Stylesheets

■ Im Kopf der HTML-Datei ist ein Abschnitt zwischen den Tags <style> und hinzugekommen. Dieser Teil enthält mehrere Stylesheet-Definitionen mit den entsprechenden Befehlen in geschweifter Klammer. <style type="text/css"> p {font-family: Times} .kursiv {font-style: italic} p.copy {font-family: Arial; font-size: 8pt}

■ In den Tags der HTML-Seite sind allerdings ebenfalls Stylesheet-Befehle zu sehen, die mit dem Attribut style eingeleitet werden. style="font-size: 16pt"

■ In den Tags der HTML-Seite erfolgt außerdem mit dem Attribut class der Aufruf von Stylesheet-Klassen. Diese Klassen sind, wie man schon am Namen erkennt in dem Stylesheet im Kopf der HTML-Seite definiert. Sie finden beispielsweise die Klasse kursiv, die in der Überschrift verwendet wird, im Kopf der HTML-Seite wieder. verwendet, in denen mittels des style-Attributs Formatierungen für Bereiche vorgenommen werden. Um ein wenig Ordnung in diese verschiedenen Arten von Stylesheets zu bringen, erklären wir Ihnen im Folgenden kurz, wo und in welcher Form Stylesheet-Befehle überall eingesetzt werden können. Anschließend zeigen wir Ihnen anhand eines weiteren Arbeitsbeispiels, wie Sie Textformatierungen erzeugen und modifizieren.

2.2 Grundlagen von Stylesheets Man unterscheidet grob Stylesheets im Kopf einer HTML-Seite, Stylesheets in Tags (mit dem style-Attribut) und externe Stylesheets. Die externen Stylesheets sind eine hervorragende Methode, die Formatierungen für mehrere Webseiten oder ein ganzes Webprojekt vorzunehmen. Wir stellen sie Ihnen in Kapitel 16, „Organisation einer Website“, näher vor.

Stylesheets im Kopf der HTML-Seite Ein Stylesheet im Kopf der HTML-Seite wird entweder für ein bestimmtes Tag oder als Klasse definiert. Der Unterschied ist, dass ein Stylesheet für ein Tag auf alle Tags dieser Art in der HTML-Datei angewendet wird, ohne dass ein Aufruf erforderlich ist. Wird dagegen nur eine Klasse definiert, so muss diese innerhalb des Tags mit dem Attribut class aufgerufen werden. In unserem Arbeitsbeispiel haben wir diese beiden

59

Text verschönern mit Stylesheets

Alternativen verwendet. Außerdem haben wir beide gekoppelt und eine Klasse definiert, die nur für das

-Tag gilt. <style type="text/css"> p {font-family: Times} .kursiv {font-style: italic} p.copy {font-family: Arial; font-size: 8pt}

Im Folgenden zeigen wir Ihnen, wie die verschiedenen Arten zusammengesetzt sind, denn nur mit diesem Wissen können Sie die vorgefertigten Befehle auf Ihre Bedürfnisse anpassen: ■ Wenn Sie einen Stil-Befehl für ein Tag definieren wollen, schreiben Sie das Tag in das Stylesheet, dann folgt in geschweiften Klammern der Befehl. Ein Befehl erhält seinen Wert immer nach einem Doppelpunkt zugewiesen. Mehrere Befehle werden durch Strichpunkte voneinander getrennt.

VORSICHT!

Wollen Sie einen Stil-Befehl für mehrere Tags definieren, fügen Sie die Tags einfach durch Kommata getrennt hintereinander. Beispielsweise sorgt folgender Code dafür, dass der gesamte Text der HTML-Seite, auch der in Tabellen befindliche, eine einheitliche Schriftart erhält: body,td {font-family: Arial}

Wenn Sie die Tags nicht mit Kommata, sondern mit Leerzeichen voneinander trennen, dann formatieren Sie nur verschachtelte Tags. Ein Beispiel: p b {font-size: 12pt}

Dieser Code vergibt für Text, der innerhalb des -Tags steht, nur dann die Schriftgröße 12, wenn das -Tag innerhalb eines

-Tags auftritt. Diese Verschachtelungen kann man auf beliebig vielen Ebenen vornehmen und so beispielsweise nur die zweite Ebene von Listen formatieren.

PROFITIPP

■ Eine Klasse definieren Sie, indem Sie mit einem Punkt beginnen. Dann folgt der Klassenname, anschließend die Stil-Befehle in geschweiften Klammern.

60

Eine Alternative zur Klasse ist die ID. Sie wird statt mit einem Punkt mit einem Doppelkreuz (#) eingeleitet. Der Aufruf im Tag erfolgt mit dem Attribut id. Im Folgenden sehen Sie die wichtigsten Teile des Quellcodes.

PROFITIPP

Grundlagen von Stylesheets

<style tyle="text/css"> #namederid {font-weight: bold}

Text

Die offizielle Spezifikation besagt allerdings, dass eine ID in einem Dokument nur einmal vorkommen soll. Deshalb sollten Sie Klassen zur Zuweisung von Stylesheets vorziehen.

VORSICHT!

■ Für eine Klasse, die nur für ein bestimmtes Tag gelten soll, geben Sie zuerst das Tag an, dann den Punkt für die Klasse, anschließend den Klassennamen.

Eine Klasse, die für ein bestimmtes Tag definiert wurde, bewirkt in anderen Tags überhaupt nichts.

Stylesheets im Tag Ein Stylesheet im Tag wird immer mit dem Attribut style definiert. Die Befehle werden mit Kommata voneinander getrennt. Für Stylesheets werden auch oft die zwei ansonsten funktionslosen Tags und <span> eingesetzt. definiert Stile für Blockelemente. Das sind beispielsweise Absätze. In unserem Beispiel haben wir ein -Element um zwei Absätze gelegt und die Schriftart geändert. Der Code ist im Folgenden abgedruckt. Unwichtige Teile wurden weggelassen.

...

...

Das <span>-Tag wird innerhalb von Blockelementen eingesetzt und dient zur Textauszeichnung. Entsprechend haben wir in unserem Beispiel die Hervorhebungen, die zuvor das - und das -Tag übernommen haben, mit dem <span>-Tag vorgenommen.

61

Text verschönern mit Stylesheets

Hierarchie Wir haben in unserem Ausgangsbeispiel mehrere unterschiedliche Zuweisungsmöglichkeiten von Stylesheets gemischt, damit Sie sich die für Ihre Arbeit beste, auswählen und herauskopieren können. Dennoch ist die Frage, was passiert, wenn mehrere Zuordnungsmethoden mit Stil-Befehlen, die sich widersprechen, gemischt werden. Welcher erhält dann den Vorzug? Prinzipiell gilt hier eine streng hierarchische Ordnung. Die Formatierung – egal ob CSS oder HTML –, die zuletzt angegeben wurde, wird dargestellt. Wenn also im Kopf der HTML-Seite für alle Absätze die Schriftart Times definiert wird, in einem Absatz im Körper der HTML-Seite aber Arial angegeben wird, so wird dieser Absatz auf jeden Fall in Arial dargestellt.

2.3 Auf der CD-ROM ... Kommen wir nun zu unserem zweiten Arbeitsbeispiel. Das Ausgangsbeispiel ist eine Datei mit einem Stylesheet im Kopf der HTML-Seite. Die Datei ebthält noch die Rohform eines Textes ohne Klassenaufrufe und Stil-Befehle. Wir zeigen Ihnen im Folgenden, wie Sie diese Klassen erstellen und Stil-Zuweisungen vornehmen. Bevor Sie beginnen, sind wieder die üblichen Schritte notwendig.

1 2 3 4

62

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2. Kopieren Sie die Datei text_unformatiert.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). Entfernen Sie den Schreibschutz (siehe Einleitung). Öffnen Sie die Datei text_unformatiert.html mit einem Browser.

Auf der CD-ROM ...

Bis jetzt wurde der Text noch nicht formatiert.

5

Anschließend öffnen Sie die Datei in Ihrem bevorzugten Editor.

In der Stil-Definition wurde noch nichts eingefügt.

63

Text verschönern mit Stylesheets

Im Editor sehen Sie sofort, was noch fehlt: ■ Das Stylesheet im Kopf der HTML-Seite enthält noch keine Inhalte. Die StilBefehle fehlen. ■ In den Tags des Seitenkörpers sind noch keine Aufrufe von Klassen enthalten. ■ Einzig die horizontale Linie erhält mit einer Stil-Zuweisung eine andere Farbe. Dies funktioniert allerdings nur im Internet Explorer, der Navigator, auch in Version 6, stellt diese Farbe nicht dar. Im Folgenden wollen wir Ihnen nun zeigen, wie Sie den bestehenden Text übersichtlich formatieren.

2.4 Schrift verändern Wir empfehlen Ihnen im Allgemeinen, zuerst den kompletten Absätzen ihre Formate zuzuweisen, bevor Sie Hervorhebungen vornehmen. Unser Ziel ist es, der Überschrift eine andere Schriftart als dem Text zuzuweisen. Die drei Textabsätze sollen alle gleich aussehen, der Absatz unter der Trennlinie wird deutlich kleiner und kursiv. Wir gehen dazu schrittweise vor und ändern zuerst die Überschrift.

1

Da die Überschrift nur einmal im Dokument vorkommt, könnte man sie auch im Tag selbst mit dem style-Attribut formatieren. Wir wählen hier dennoch die Formatierung für das Tag, da so jederzeit eine Überschrift hinzugefügt werden kann, die dann dasselbe Format erhält. Fügen Sie also das Überschriften-Tag h1 in das Stylesheet ein und beginnen Sie die Stil-Zuweisung mit einer geschweiften Klammer.

Das Tag für die Überschrift wird formatiert.

2 64

Im nächsten Schritt ändern wir die Schriftart der Überschrift. Dazu dient der Stylesheet-Befehl font-family. Vergeben Sie hier nach einem Doppelpunkt den

Schrift verändern

Wert Times, damit immer Times oder Times New Roman als Schriftart verwendet wird. Der Befehl wird mit einem Strichpunkt abgeschlossen, da danach noch weitere folgen.

Die Schriftart wurde geändert.

3

Nun ändern wir noch die Schriftgröße mit dem Stil-Befehl font-size. Vergeben Sie für die Überschrift den Wert 16 pt. Damit wird die Schrift 16 Punkt groß. Schließen Sie den Befehl mit einer geschweiften Klammer. Nach dem letzten Befehl muss kein Strichpunkt angegeben werden.

Die Schriftgröße der Überschrift wird auf 16 Punkt geändert.

4

Der Befehl font-size kann neben der Schriftgröße in Punkt die Schriftgröße auch noch in Pixel (px) oder Prozent der Standardgröße (%) enthalten. Eine weitere Möglichkeit ist die Angabe der Schriftgröße mit relativen Bezeichnungen. Bei relativen Schriftgrößen entscheidet der Nutzer über die Größe der Standardschriftart. Im Folgenden haben wir die Werte für relative Schriftgrößen zusammengefasst: Attribut

Schriftgröße

smaller

relativ gesehen kleiner als normal

xx-small

kleinste verfügbare Größe

65

Text verschönern mit Stylesheets

Attribut

Schriftgröße

x-small

sehr klein

small

klein

medium

mittel

large

groß

x-large

sehr groß

xx-large

größtmögliche Größe

larger

größer als normal

PROFITIPP

Wenn Sie das Ergebnis im Browser betrachten, sehen Sie, dass die Schriftgröße gegenüber der normalen Überschrift etwas kleiner wirkt. Da Times die Standardschriftart ist, hat sich hier nichts geändert.

Warum sollte man die Schriftart dennoch angeben? Der Nutzer kann die Standardschriftart im Browser verändern. Wenn Sie aber mit der Wahl der Schriftart eine bestimmte „optische“ Absicht verfolgen, wird ihr Design dadurch verändert. Dies verhindern Sie, indem Sie auch die Standardschriftart explizit angeben.

Nach der Überschrift sind nun die Absätze dran. Auch hierfür verwenden wir die Definition des Stils für das gesamte Tag, in diesem Fall also

. Die speziellen Anpassungen für den Copyright-Absatz nehmen wir dann später mit Klassen vor. Im Folgenden werden die Anpassungen schrittweise erklärt: Zuerst folgt im Stylesheet im Kopf der HTML-Seite wie gewohnt die Bezeichnung des Tags, das formatiert werden soll. In unserem Beispiel ist das p für das

-Tag. Anschließend wird die geöffnete geschweifte Klammer angefügt, in die in den nächsten Schritten die Stilanweisungen eingetragen werden.

Das

-Tag wird formatiert.

66

Schrift verändern

Im nächsten Schritt ändern Sie die Schriftart mit font-family auf Arial sowie mit fontsize die Schriftgröße auf 11 Punkt. Zum Schluss schließen Sie die geschweiften Klammern.

Die Schriftart und -größe für die Absätze wurden geändert.

Wenn Sie die Datei gespeichert haben und im Browser näher betrachten, sehen Sie die geänderte Schriftart und Schriftgröße des Fließtextes.

Fertig ist der neu formatierte Text!

Nach diesem Zwischenergebnis wollen wir nun noch den Copyright-Text am Ende in einer kleineren Schriftgröße, kursiv und mit einer anderen Farbe darstellen. Dazu benötigen wir zuerst eine Klasse. Diese Klasse kann an das

-Tag gebunden sein, muss aber nicht. Wir haben uns hier für eine allgemeine Klasse entschieden.

67

Text verschönern mit Stylesheets

1

Zuerst legen wir die allgemeine Klasse im Kopf der HTML-Seite an. Sie erhält den Namen copy.

Eine allgemeine Klasse anlegen.

2

Nun folgen die Stil-Befehle. Zuerst verringern wir die Schriftgröße mit font-size auf 8 Punkt.

Die Schrift wird verkleinert.

3

68

Nun wollen wir die Schrift kursiv stellen. Dazu dient der Stylesheet-Befehl fontstyle. Er erhält den Wert italic (für kursiv). Ein alternativer Wert wäre oblique. Er stellt die Schrift schräg. Der Unterschied zwischen italic und oblique ist, dass bei italic immer zuerst ein eigener Schriftschnitt verwendet wird, der bei der Schrift mitgeliefert wird. oblique nimmt die Schrägstellung dagegen eigenständig vor und erzeugt deshalb teilweise nicht so schöne Ergebnisse.

Schrift verändern

Die Schrift wird kursiv.

4

Als Nächstes ändern wir noch die Farbe der Schrift. Dazu dient das Attribut color. Hier haben Stylesheets gegenüber HTML eine Besonderheit: Sie können Farben auch mit ihrem dezimalen RGB-Wert definieren. Dazu geben Sie einfach rgb und in runden Klammern die Farbanteile als Dezimalwerte, getrennt durch Kommata, an. rgb(0, 51, 153) gibt also ein dunkles Blau an. Dieses Blau verwenden wir auch gleich für unser Beispiel. Da dies der letzte Stil-Befehl für diese Klasse ist, können Sie auch gleich mit einer geschweiften Klammer abschließen.

PROFITIPP

Die Farbe der Schrift wurde in ein dunkles Blau geändert.

Das Attribut color kann neben dem RGB-Farbwert auch die Farbnamen oder die hexadezimalen Werte als Farben enthalten.

Wenn Sie nun die Seite im Browser aufrufen, was passiert dann? Gar nichts. Die Klasse wurde zwar definiert, aber von keinem Tag aufgerufen. Das heißt, wir müssen im letzten Schritt noch den Klassenaufruf in das

-Tag des letzten Absatzes einfügen.

1

Wechseln Sie in das

-Tag des letzten Absatzes.

69

Text verschönern mit Stylesheets

2

Fügen Sie das Attribut class ein.

Das Attribut class ruft die Klasse auf.

3

Als Nächstes folgt der Klassenname copy. Vergessen Sie nicht, mit einem Anführungszeichen abzuschließen.

Die Klasse wird nun mit Namen aufgerufen.

Wenn Sie das Ergebnis im Browser betrachten, sehen Sie eine ansprechend formatierte Seite. Im nächsten Abschnitt fügen wir noch einige Hervorhebungen ein, die das Bild abrunden.

Die Seite wurde ansprechend formatiert.

70

PROFITIPP

Hervorhebungen

Der Stil-Befehl font enthält mehrere Befehle zur Schriftformatierung in einer vorgegebenen Reihenfolge: font-style, font-weight, font-size, font-family

In einem Beispiel sieht das so aus: .copy {font: italic normal 8pt Arial}

2.5 Hervorhebungen Nun wollen wir in unserer Datei einige Begriffe optisch hervorheben. Ein Stylesheet verwendet zur Hervorhebung bestimmter Bereiche natürlich wieder HTML-Tags. Diese Tags haben Sie schon kennen gelernt: und <span>. Beide haben in HTML keine sichtbare Formatierungsfunktion und sind deshalb hervorragend geeignet. wendet Stylesheet-Befehle auf Blockelemente wie beispielsweise Absätze an, während <span> innerhalb von Blockelementen zum Einsatz kommt. Damit ist <span> hervorragend als Tag für Hervorhebungen geeignet. Im Folgenden wollen wir in unserer Ausgangsdatei im zweiten Absatz die Begriffe „CSS 1.0“ und „CSS 2.0“ fett hervorheben. Das Verfahren ist für beide Begriffe gleich, deshalb erklären wir es nachfolgend schrittweise am Beispiel von „CSS 1.0“:

1

Zuerst müssen Sie „CSS 1.0“ in die Tags <span> und einschließen. Dies hat im Browser noch keine optischen Auswirkungen.

Der Begriff wird in das <span>-Tag-Paar eingeschlossen.

2

Nun fügen Sie in das <span>-Tag das Attribut style ein, um dort eine Stildefinition vornehmen zu können. Alternativ könnten Sie natürlich auch mit dem Attribut class auf eine Klasse zugreifen.

71

Text verschönern mit Stylesheets

Das Attribut style enthält die Stylesheet-Befehle.

3

Im nächsten Schritt soll der Text fett formatiert werden. Dazu fügen Sie den Stylesheet-Befehl font-weight ein und vergeben den Wert bold.

PROFITIPP

Fertig ist die Hervorhebung!

Der Stylesheet-Befehl font-weight kann neben bold noch andere Werte annehmen: ■ bolder stellt die Schrift fetter dar als bold. ■ lighter erzeugt eine dünnere Schrift. ■ Die Schriftstärke lässt sich auch in einer Skala von 100 (sehr dünn) bis 1000 (sehr fett) in Hunderterschritten festlegen. Die Standardschrift hat eine Dicke von 400, fett entspricht einer Dicke von 700.

Ein erster Test im Browser zeigt Ihnen, dass der Text ordnungsgemäß hervorgehoben wird. Führen Sie nun dieselben Schritte noch einmal für den zweiten Begriff „CSS 2.0“ aus oder kopieren Sie das <span>-Tag vom ersten.

72

Weitere Textformatierungen

Beide Begriffe wurden fett hervorgehoben.

2.6 Weitere Textformatierungen In diesem Abschnitt widmen wir und in der Praxis weniger gebräuchlichen Textformatierungen .

Auf der CD-ROM ... Die in diesem Abschnitt vorgestellten Textformatierungen sind in der Praxis nicht wichtig genug, als dass wir sie in unser Standardbeispiel einbauen wollten. Dennoch sollten Sie schnellen Zugriff darauf haben. Deshalb haben wir die Formatierungen in einer Datei zusammengefasst. Die Datei erhalten Sie auf dem bereits bekannten Weg:

1 2

Kopieren Sie die Datei weitere_schriftformate.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.

4

Öffnen Sie die Datei mit einem Browser.

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2.

Sie sehen, dass wir für alle Formatierungen ein kleines Beispiel in die Datei eingefügt haben.

73

Text verschönern mit Stylesheets

Die verschiedenen Textauszeichnungen

Wollen Sie eine dieser Formatierungen einsetzen, müssen Sie nur die Klasse mit der Formatierung aus der Datei herauskopieren und in ihre Datei einfügen. Wir zeigen Ihnen das schrittweise.

1

Öffnen Sie die Datei weitere_schriftformate.html aus Ihrem Arbeitsverzeichnis in Ihrem Lieblingseditor. Dort sehen Sie, dass alle Formatierungen als Klassen in einem Stylesheet im Kopf der HTML-Seite angelegt wurden. Öffnen Sie anschließend die Datei, in die Sie die Formatierung übernehmen möchten.

Für jedes Format gibt es eine eigene Klasse.

74

Weitere Textformatierungen

2

Wählen Sie nun einfach das gewünschte Format aus. Als Beispiel verwenden wir Kapitälchen.

Die Klasse mit dem Format „Kapitälchen“ wurde gewählt.

3

Kopieren Sie die Codezeile mit dem Befehl Bearbeiten/Kopieren. Fügen Sie sie anschließend mit Bearbeiten/Einfügen in das Stylesheet im Kopf der HTML-Datei ein, in die Sie die Formatierung übernehmen möchten. Sollten Sie nur die Formatierung ohne Klasse benötigen, markieren Sie nur den Stylesheet-Befehl selbst und kopieren ihn beispielsweise in ein style-Attribut.

Es wurde nur der Stylesheet-Befehl markiert.

In den folgenden drei Abschnitten stellen wir Ihnen kurz die Textauszeichnungen vor, die sich in der Datei weitere_schriftformate.html verbergen. Die wichtigste Information ist dabei natürlich, welche Befehle in welchen Browsern funktionieren.

75

Text verschönern mit Stylesheets

Kapitälchen

PROFITIPP

Die Kapitälchen werden mit dem Stylesheet-Befehl font-variant und dem Wert variant erzeugt. Dieser Befehl funktioniert nicht im Netscape Navigator 4.x. Der Internet Explorer unterstützt die Funktion seit Version 4.

Ein Vorbild bei der Unterstützung von Stylesheets ist Opera 5.x. Er unterstützt alle hier vorgestellten Textauszeichnungen ohne Probleme.

Groß-/Kleinbuchstaben Der Style Sheet-Befehl text-transform sorgt für eine Umwandlung von Groß- in Kleinbuchstaben und umgekehrt. Er wird vom Internet Explorer erst ab Version 5 unterstützt. Netscape hat ihn schon in Version 4.x integriert. text-transform kann folgende Werte annehmen: ■ uppercase – wandelt alle Buchstaben in Großbuchstaben um. ■ lowercase – wandelt alle Buchstaben in Kleinbuchstaben um. ■ capitalize – stellt die ersten Buchstaben von jedem Wort in Großbuchstaben dar.

Unter-, über- und durchgestrichen Der Stylesheet-Befehl text-decoration hält verschiedene Arten von Textauszeichnungen bereit, die meist in irgendeiner Form einen Strich im Text erzeugen. Im Einzelnen gibt es folgende Möglichkeiten:

PROFITIPP

■ underline – unterstrichen. Die Standardeinstellung für Links.

76

Text, der keinen Link darstellt, sollten Sie nicht unterstreichen, da dies den Nutzer unnötig verwirrt.

Fazit

VORSICHT!

■ none – keine Textauszeichnung. Bei Links führt dies dazu, dass sie nicht mehr unterstrichen sind.

Viele Nutzer sind irritiert, wenn Links auf einmal nicht mehr unterstrichen erscheinen. Daher sollten Sie sich gut überlegen, ob sie die Unterstreichung von Links entfernen.

■ line-trough – durchgestrichen. Funktioniert mit den gängigen Browsern. ■ blink – blinkend. Funktioniert im Internet Explorer nicht. Da der Effekt außerdem recht aufdringlich ist, sollten Sie ihn vermeiden. ■ overline – überstrichen. Funktioniert nicht mit dem Netscape Navigator Version 4.x und darunter.

2.7 Fazit In diesem Kapitel haben Sie gesehen, was man unter Stylesheets versteht und (hoffentlich) auch, wieso das W3C von der Verwendung des -Tags mittlerweile abrät und den Einsatz von den weitaus leistungsstärkeren Stylesheets empfiehlt. Mit ein wenig Übung formatieren Sie nun Texte schneller als je zuvor.

77

3.0 Mit Bildern und Links arbeiten Wenn man danach fragt, was das World Wide Web ausmacht, erhält man viele verschiedene Antworten. Wir wetten aber mit Ihnen, dass „bunte Bilder“ und „Interaktivität“ in dieser Liste auftauchen. Die bunten Bilder werden manchmal negativ, manchmal auch positiv gesehen. Fakt ist aber, dass die Zeiten des rein textbasierten Internets vorbei sind. Und wenn Sie uns fragen, ist das auch gut so. Die Interaktivität entsteht hauptsächlich durch die Verknüpfungen zwischen den unterschiedlichsten Seiten. Diese werden über Links realisiert. In diesem Kapitel zeigen wir Ihnen, wie Sie ein Bild einfügen und welche Einstellungen Sie vornehmen können. Anschließend verlinken wir die Ausgangsdatei mit einer anderen Seite und unterscheiden verschiedene Arten von Links. Zum Schluss folgt ein zweites Arbeitsbeispiel, bei dem ein Hintergrundbild in die Seite eingebunden wird.

3.1 Auf der CD-ROM ... In diesem Kapitel beginnen wir mit einer ganz einfachen HTML-Datei. Wie immer, muss sie zuerst von der CD in Ihr Arbeitsverzeichnis kopiert werden. Dazu sind folgende Schritte notwendig:

1 2

Kopieren Sie die Datei bild.html und das Bild erde.jpg in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3.

Mit Bildern und Links arbeiten

4 5

Öffnen Sie die Datei bild.html in Ihrem bevorzugten Editor.

Anschließend öffnen Sie sie mit einem Browser.

Das Bild mit Beschriftung im Browser

Wenn Sie sich die Datei im Editor ansehen, fällt Folgendes auf: ■ Das Bild wird mit dem -Tag eingebunden. Dieses Tag hat kein End-Tag. ■ Die Adresse des Bildes steht in dem Attribut src. Wenn das Bild, wie in diesem Fall, im selben Ordner liegt wie die HTML-Datei, reicht der Name des Bildes. Ansonsten funktioniert der Bildverweis als relative oder absolute Verknüpfung. Mehr dazu im Abschnitt „Grundlagen zu Links“. ■ Die Beschriftung neben dem Bild wird rechts unten am Bildrand angezeigt. Im Folgenden wollen wir verschiedene Eigenschaften des Bildes modifizieren. Bevor wir damit beginnen, noch einige Grundlagen zu Dateiformaten. Die beiden gängigsten Dateiformate für das Web sind JPEG und GIF. JPEG unterstützt 16,7 Millionen Farben, also das komplette RGB-Spektrum, und ist deshalb besonders gut für Fotos geeignet. Allerdings komprimiert es verlustbehaftet, das heißt, der Algorithmus, der das Bild verkleinert, entfernt auch Bilddetails. GIF unterstützt nur eine Farbpalette von 256 Farben, komprimiert dafür verlustfrei, unterstützt Transparenz und man kann damit sogar Animationen realisieren. GIF wird hauptsächlich für flächige Grafiken, Schaltflächen und Ähnliches verwendet. Um eine GIF-Datei einzubinden, müssen Sie hinter an Dateinamen nur .gif anfügen. Ein drittes Format ist PNG. Es komprimiert verlustfrei und hat eine Variante mit 256 Farben oder weniger (PNG-2 mit 2 Farben,

80

Bildgröße

PNG-4 mit 16, PNG-6 mit 128, PNG-8 mit 256) und eine mit 16,7 Millionen Farben (PNG-24). Das Format wurde entwickelt, da der Komprimieralgorithmus des GIFFormats ein Patent der Firma Unisys ist. PNG-Dateien binden Sie in HTML einfach mit der Dateiendung .png ein.

3.2 Bildgröße In diesem Abschnitt ändern wir zuerst die Größe des Bildes. Um es gleich vorauszuschicken: Eine solche Größenänderung sollten Sie normalerweise im Grafikprogramm vornehmen, da es Bilder besser neu berechnet als der Browser dies kann. Warum muss das Bild bei einer Größenänderung überhaupt neu berechnet werden? Eine Bilddatei besteht aus einzelnen Bildpunkten. Auf dem Bildschirm entspricht ein Bildpunkt einem Pixel. Erhöht man nun die Größe, muss man auch die Zahl der Bildpunkte anheben. Diese Bildpunkte kommen natürlich nicht einfach aus dem Nichts, sondern müssen neu berechnet werden. Das Ausgangsbild in unserem Beispiel ist 210 Pixel hoch und 200 Pixel breit. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie die Bildgröße ändern.

1

Wechseln Sie im Editor in das -Tag nach dem src-Attribut.

Wo der Cursor steht, muss ein neues Attribut eingefügt werden.

2

Fügen Sie das Attribut height ein. Es enthält die Höhe des Bildes.

81

Mit Bildern und Links arbeiten

Das Attribut height gibt die Höhe des Bildes an.

3

Es gibt mehrere Möglichkeiten, die Bildhöhe anzugeben. Sie können entweder einen Wert in Pixel (ohne Maßeinheit) oder einen Prozentwert (%)angeben. Der Prozentwert wird immer abhängig von der Fenstergröße berechnet. In unserem Beispiel verdoppeln wir die Höhe des Bildes, geben also 420 Pixel ein.

Die Bildgröße wurde erhöht.

Wenn Sie das Bild nun im Browser betrachten, würden Sie eigentlich erwarten, dass die Breite noch in Originalgröße dargestellt wird, das Bild also verzerrt ist. Dem ist aber nicht so. Alle Browser skalieren die Breite proportional mit der Höhe. Theoretisch würde also eine Angabe ausreichen. Dies ist jedoch sehr unsauber, deshalb fügen wir in den nächsten Schritten auch die Breite hinzu.

82

Bildgröße

Die Breite wird automatisch mit skaliert.

Für die Breite muss das Attribut width in das -Tag eingefügt werden.

Die Breite wird mit width angegeben.

Geben Sie für die Breite einen Wert von 400 Pixel an.

83

Mit Bildern und Links arbeiten

Der Wert für die Breite wurde eingetragen.

Wenn Sie das Bild nun näher betrachten, sehen Sie auch, dass das Ergebnis unschön aussieht. Noch schlimmer wird es, wenn Sie das Bild verzerren. Wir haben im folgenden Beispiel die Breite auf die Originalgröße 200 Pixel reduziert und die Höhe auf 420 Pixel belassen.

Ein verzerrtes Bild

84

Bildnamen und Alternativtext

3.3 Bildnamen und Alternativtext Einen Namen benötigt das Bild, um beispielsweise per JavaScript aufrufbar zu sein. Der Alternativtext wird angezeigt, wenn der Nutzer mit der Maus über die Grafik fährt oder die Grafik nicht im Browser angezeigt wird. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie einen Namen und einen Alternativtext vergeben: Wechseln Sie in das -Tag und fügen Sie das Attribut name ein. Als Wert vergeben Sie den Namen „Erde“.

Der Name wurde eingefügt,

Im nächsten Schritt folgt der Alternativtext. Das Attribut hierfür ist alt. Als Wert geben Sie einen möglichst sinnvollen Text ein. Wir haben „Die Erde“ als sprechenden Text gewählt.

Der Alternativtext wurde eingefügt.

85

PROFITIPP

Mit Bildern und Links arbeiten

Sie sollten immer einen Alternativtext anbieten, da manche Nutzer surfen, ohne sich Grafiken anzeigen zu lassen. Außerdem erscheint der Text schon, bevor das Bild geladen ist.

Der Alternativtext wird angezeigt.

3.4 Text am Bild ausrichten Der Beschreibungstext rechts neben dem Bild kann am Bild ausgerichtet werden. Hier gibt es allerdings eine Einschränkung. Der Text kann nur eine Zeile hoch sein, höherer Text wird automatisch unter dem Bild angezeigt. Wollen Sie mehr Text neben dem Bild ausrichten, so sollten Sie eine Tabelle zum Anordnen verwenden. Nachfolgend zeigen wir Ihnen, wie Sie mit dem Attribut align den Text am Bild ausrichten können.

86

Text am Bild ausrichten

Fügen Sie in das -Tag das Attribut align ein. Es richtet nicht das Bild selbst, sondern den angrenzenden Text aus.

Das Attribut align richtet den Text am Bild aus.

Für das Attribut align gibt es mehrere Möglichkeiten. Für unser Beispiel verwenden wir den Wert middle, um den Text am Bild zu zentrieren.

Den Text mittig ausrichten

In folgender Tabelle finden Sie alle Optionen für das Attribut align kurz zusammengefasst. Werte für align

Beschreibung

absbottom (nur NN ab 3.0)

Richtet den Text an der Unterkante aus. Bei Text mit verschiedenen Schriftgrößen gilt die kleinste als Referenz.

absmiddle (nur NN ab 3.0)

Richtet den Text an der Mitte des Bildes aus. Referenz ist die kleinste Schriftart im Text.

baseline (nur NN ab 3.0)

Funktioniert wie bottom.

87

Mit Bildern und Links arbeiten

Werte für align

Beschreibung

bottom

Richtet Text an der Unterkante des Bildes aus. Dies ist die Standardeinstellung.

middle

Richtet Text an der Bildmitte aus.

texttop (nur NN ab 3.0)

Richtet den Text an der Oberkante des Bildes aus. Als Referenz dient die kleinste Schriftart.

top

Richtet den Text an der Oberkante des Bildes aus.

Möglichkeiten zur Ausrichtung von Text an einem Bild

Im Browser ist kein Abstand zwischen Bild und Text zu sehen.

Wenn Sie sich die mittige Ausrichtung des Textes am Bild im Browser ansehen, werden Sie bemerken, dass zwischen Bild und Text kein Abstand ist. Dies sieht nicht sehr gut aus. Mit dem Attribut hspace können Sie Abstand neben dem Bild einfügen. Zuerst fügen Sie das Attribut hspace in das -Tag ein. Vergeben Sie als Wert eine Angabe in Pixeln. Für unser Beispiel verwenden wir 10 Pixel.

88

Text am Bild ausrichten

Einen horizontalen Abstand von 10 Pixel verwenden.

Wenn Sie das Ergebnis im Browser betrachten, sehen Sie den kleinen Haken des Attributs hspace. Es fügt nicht nur nach rechts, wo der Text steht, einen Abstand ein, sondern auch nach links. In der Praxis verwendet man deshalb meistens eine Tabelle, um Text am Bild auszurichten.

Der Abstand wird nach links und nach rechts eingefügt.

89

PROFITIPP

Mit Bildern und Links arbeiten

Das Gegenstück zum Attribut hspace ist vspace. Es sorgt für den vertikalen Abstand, also den Abstand nach oben und unten.

3.5 Auf der CD-ROM ... Als Nächstes wollen wir den Text und anschließend die Grafik unserer Beispieldatei mit einem Link versehen. Damit ein Link, also ein Verweis, auf eine andere Datei überhaupt Sinn macht, benötigen Sie natürlich diese Datei. Mit folgenden Schritten holen Sie sie auf Ihren Rechner:

1 2

Kopieren Sie die Datei ziel.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.

4

Öffnen Sie ziel.html in Ihrem bevorzugten Editor.

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3.

Die eben geöffnete Datei benötigen wir nicht sofort. Zuerst erklären wir Ihnen anhand der Datei bild.html, wie Sie einen Link setzen und welche Arten von Links es gibt.

3.6 Grundlagen zu Links Man unterscheidet drei Arten von Links: ■ Relative Links verweisen auf eine Datei relativ zur Position im Ordnersystem der Datei, von der aus verwiesen wird. Ist eine Datei beispielsweise im selben Ordner, reicht es, ihren Namen in den Link zu schreiben, liegt sie einen Ordner höher, muss vor den Namen ../ geschrieben werden. Dies ist das Symbol für die nächsthöhere Ordnerebene. In Abbildung 3.17 haben wir Ihnen dies anhand eines Beispiels illustriert. Nehmen wir an, die Datei, aus der Sie verlinken, befindet sich im Ordner link. Die Datei, auf die Sie linken wollen, liegt im Ordner ziel. Da der Zielordner auf der gleichen Ebene wie der Quellordner liegt, müssen Sie zuerst eine Ebene höher, also im Link, ../ eintragen. Anschließend wechseln Sie wieder eine

90

Grundlagen zu Links

Ebene tiefer in den Ordner ziel. Dafür müssen Sie den Ordner im Link eintragen. Der komplette Link sieht dann so aus: ../ziel

Der Explorer für das Beispiel

PROFITIPP

■ Absolute Links sind komplette Internetadressen wie http://www.mut.de.

Absolute Links dürfen auch abgekürzt verwendet werden, also beispielsweise nur das Verzeichnis ab einer bestimmten Stelle, z.B. /werkstatt/ziel. Für Protokoll (http) und Domainangaben (www.mut.de) werden die Daten der Seite verwendet, von der aus verlinkt wird.

■ Anker sind Links auf Stellen im Dokument. Sie müssen dort definiert worden sein. Absolute und relative Links lassen sich auf dieselbe Art zuweisen. Lediglich beim Anker gibt es kleine Unterschiede. Im Folgenden beschreiben wir, wie Sie einen Link zuweisen. Anschließend erläutern wir, wie ein Anker gesetzt wird.

Link zuweisen In der Datei bild.html kennen Sie ja bereits den Beschreibungstext neben dem Bild. Wir wollen nun das Wort „Erde“ auf die Datei ziel.html verlinken:

1

Jede Art von Link verwendet das -Tag. Deshalb müssen Sie das Wort „Erde“ in und einschließen.

Die -Tags wurden eingefügt.

2

Nun muss das Ziel des Links angegeben werden. Dazu dient das href-Attribut im -Tag.

91

Mit Bildern und Links arbeiten

Das Attribut href fügt die Zieladresse ein.

3

Als Wert folgt der Link. Er kann relativ oder absolut sein. In unserem Beispiel ist es ein relativer Link auf die Datei im Verzeichnis. Deshalb reicht der Dateiname ziel.html.

Der relative Link auf die Datei ziel.html.

Ein Klick auf den Link öffnet in der Seite die Datei ziel.html.

92

Grundlagen zu Links

Anker definieren Als Nächstes wenden wir uns der Datei ziel.html zu. Hier wollen wir den zweiten Absatz mit einem Anker versehen. Auf diesen Anker können wir dann anschließend aus der Datei bild.html verweisen.

1

Zuerst benötigen wir wieder die beiden Tags und , denn auch ein Anker wird mit diesen Tags definiert. Der Anker soll um den Text im zweiten Absatz gelegt werden.

Die -Tags rund um den Bereich, der als Anker dienen soll

2

Als Nächstes muss mit dem Attribut name der Name des Ankers definiert werden. Wir verwenden als Name „anker“.

Der Name des Ankers wurde definiert.

3

Nun muss in der Datei bild.html der Link auf den Anker eingefügt werden. Ein Anker wird immer mit einem Doppelkreuz # begonnen. Für unser Beispiel fügen wir hinter den Link auf die Datei ziel.html den Verweis auf den Anker ein. Dazu geben Sie #anker ein.

93

Mit Bildern und Links arbeiten

Der Verweis auf den Anker

Wenn Sie den Link nun im Browser testen, wird die Seite geöffnet und gleich zum Anker gesprungen.

Der Verweis mit dem Anker

94

PROFITIPP

Link in einem neuen Fenster öffnen

Sie sehen den Effekt des Ankers nur, wenn das Browserfenster klein genug ist. Ansonsten müssen Sie einfach mehr Zeilenumbrüche einfügen, um die HTML-Seite von ziel.html zu verlängern.

3.7 Link in einem neuen Fenster öffnen Sie können eine Seite, auf die Sie verlinken, in einem neuen Browserfenster öffnen. Im Folgenden zeigen wir Ihnen schrittweise, wie das funktioniert:

1

Mit dem Attribut target legen Sie fest, in welchem Fenster der Link geöffnet wird.

Das Attribut target legt fest, in welchem Fenster der Link geöffnet wird.

2

Das Attribut target kann verschiedene Werte annehmen, wovon sich zwei allerdings auf das komplette Frameset beziehen (mehr zu Frames in Kapitel 7 „Frames“): ■ _blank – Der Link wird in einem neuen Fenster geöffnet. ■ _parent – Der Link wird im übergeordneten Frameset geöffnet. ■ _self – Der Link öffnet sich im aktuellen Frame oder in der gleichen Seite. Dies ist die Standardeinstellung. ■ _top – Der Link wird im aktuellen Fenster geöffnet. Alle Framesets werden verlassen. ■ name – vergibt einen beliebigen Namen für das neue Fenster, das sich öffnet. Ist bereits ein Fenster mit diesem Namen geöffnet, so wird die Seite darin geöffnet. Die letzte Option erscheint uns für unser Beispiel am sinnvollsten. Wir vergeben einfach den Namen fenster.

95

Mit Bildern und Links arbeiten

Der Fenstername wurde festgelegt.

Wenn Sie das Ergebnis im Browser testen, wird die aufgerufene Seite in einem neuen Fenster geöffnet.

3.8 Verschiedene Farben für verschiedene Zustände Links sind im Allgemeinen blau. Das muss natürlich nicht so sein, vielmehr können Sie die Linkfarbe beliebig ändern. Zum einen können Sie Links wie jeden anderen Text auch formatieren, zum anderen lassen sich auch für jeden Zustand des Links eigene Farben vergeben. Ein Link kann folgende Zustände annehmen: ■ Normal. ■ Aktiviert (activated). Dies ist der Zustand, wenn der Link angeklickt ist. ■ Besucht (visited). Die Seite, auf die gelinkt wird, wurde bereits einmal geöffnet und ist im Cache des Browsers. Im folgenden Beispiel ändern wir die Farben für die Zustände der Links.

1

Alle drei Zustände ändern Sie für die gesamte HTML-Seite im -Tag. Die Farbe des normalen Links ändern Sie mit dem Attribut link. Für dieses Beispiel weisen wir den Wert green zu.

Der normale Link wird grün.

2 96

Mit dem Attribut alink ändern wir die Farbe des aktivierten Links auf blue (blau).

Grafik als Link

Der aktive Link ist blau

3

Im letzten Schritt werden bereits besuchte Links mit dem Attribut vlink und dem Wert red rot eingefärbt.

Bereits besuchte Links sind rot

PROFITIPP

Wir verzichten hier auf eine Abbildung des Ergebnisses, da die Farben im Druck nicht zu erkennen sind. Sie können die Linkfarben auch mittels Stylesheets ändern. Dazu gibt es drei Pseudoklassen für die drei Zustände: ● a:link – definiert Stile für einen normalen Link. ● a:active – legt Stile für einen aktiven Link fest. ● a:visited – bestimmt Stile für besuchte Links.

3.9 Grafik als Link Eine Grafik als Link ist im Prinzip sehr einfach realisierbar. Sie müssen einfach den Link um die Grafik legen. In unserem Beispiel sähe das in der Theorie folgendermaßen aus:

Hier ergibt aber das Problem, dass um das Bild herum automatisch ein Rahmen angezeigt wird.

97

Mit Bildern und Links arbeiten

Ein Rahmen um das Bild

Dieses Problem lässt sich sehr einfach lösen: Wechseln Sie in das -Tag und setzen Sie dort das Attribut border auf 0. border bestimmt die Rahmendicke. Standardmäßig ist ein Rahmen nicht sichtbar, sobald ein Bild aber ein Link ist, wird er eingeblendet. Mit border="0" lässt er sich wieder entfernen.

AUF DER

CD-ROM

Der Rahmen wird entfernt.

98

Sie finden das komplette Beispiel auf der CD-ROM zum Buch unter dem Namen bild_link.html.

E-Mail-Adressen und Dateien verlinken

3.10 E-Mail-Adressen und Dateien verlinken

AUF DER

CD-ROM

Normale Links haben wir in den letzten Abschnitten in aller Ausführlichkeit besprochen. Hier sollen nun die Sonderformen zu ihrem Recht kommen. Sie erfahren, wie Links auf E-Mail-Adressen, Dateien oder FTP-Server gesetzt werden.

Auf der CD-ROM finden Sie im Ordner code/kap03 die Datei andere_links.html. Sie enthält jeweils ein Beispiel für alle Arten von Links. Öffnen Sie die Datei in Ihrem Lieblingseditor, um sie näher zu betrachten.

Vier verschiedene Links in einer Datei

Im Folgenden stellen wir die verschiedenen Optionen der Reihe nach vor: ■ Ein E-Mail-Link wird immer mit mailto: begonnen. Danach folgt die MailAdresse, an die die Mail geschickt wird. Die gängigen Browser öffnen je nach Installation und Einstellungen den dem Browser beigefügten Mail-Client. Sie können diesem Mail-Client noch weitere Daten mitgeben. Diese werden nach dem Fragezeichen eingefügt und durch das kaufmännische Und (&) getrennt: [email protected] – gibt eine E-Mail-Adresse für eine Carbon Copy der

Mail an. [email protected] – gibt eine E-Mail-Adresse für eine Blind Carbon Copy an. subject=Betreff – belegt die Betreffzeile des Mail-Clients mit einer Vorgabe. body=Mailtext – belegt den Mail-Text im Körper der E-Mail vor.

99

PROFITIPP

Mit Bildern und Links arbeiten

Die zusätzlichen Angaben hinter der Mail-Adresse nach dem Fragezeichen sind nicht Teil der W3C-Spezifikation, werden aber von den gängigen Browsern unterstützt. Einige Mail-Clients haben allerdings Schwierigkeiten mit diesen Optionen.

■ Ein Newsgroup-Link wird mit news: eingeleitet. Danach folgt die Adresse der Newsgroup. ■ Der Link auf eine beliebige Datei erfolgt wie der Link auf eine HTML-Datei. Nur die Dateiendung signalisiert dem Browser, dass es sich um eine andere Datei handelt. ■ Der Zugriff auf eine FTP-Seite erfolgt unter Angabe des Protokolls ftp://. Bei einem FTP-Server mit Passwortschutz kann nach dem Protokoll der Username und das Passwort, getrennt durch einen Doppelpunkt eingefügt werden. Eine solche Übertragung von Passwörtern in Klartext ist allerdings sehr unsicher. Wollen Sie eine dieser Linkarten in einer Ihrer Dateien einsetzen, kopieren Sie einfach den vorgefertigten Rumpf aus der Datei andere_links.html in Ihre Datei und fügen Ihre eigenen Daten ein. Dies funktioniert folgendermaßen:

1

Markieren Sie die Linkart, die Sie benötigen. In unserem Beispiel verwenden wir den Link auf eine Datei.

Den vorgefertigten Link markieren

2 3

100

Wählen Sie den Menübefehl Bearbeiten/Kopieren, um den Link zu kopieren. Öffnen Sie die Datei, in die Sie den Link einfügen möchten, und rufen Sie den Befehl Bearbeiten/Einfügen auf.

Auf der CD-ROM ...

3.11 Auf der CD-ROM ... Das dritte Arbeitsbeispiel beschäftigt sich mit der Hintergrundfarbe und Hintergrundbildern für eine HTML-Seite.

1 2

Gehen Sie in das Verzeichnis code\kap3 auf der CD-ROM.

3

Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), um sie bearbeiten zu können.

4 5

Öffnen Sie die Datei hintergrund.html in Ihrem bevorzugten Editor.

Kopieren Sie die Datei hintergrund.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

Anschließend öffnen Sie sie mit einem Browser.

Dieses Beispiel zeigt die Erde als Hintergrundbild. Zusätzlich wurde die Hintergrundfarbe auf Schwarz geändert.

Die Erde als Hintergrundbild

101

Mit Bildern und Links arbeiten

Alle diese Einstellungen werden im -Tag vorgenommen. ■ bgcolor vergibt eine Hintergrundfarbe. Sie können die Farbwerte mit Farbnamen, hexadezimalem Wert oder RGB-Wert angeben. ■ background legt die Adresse des Hintergrundbildes fest. Es wird dann automatisch im Hintergrund wiederholt.

3.12 Hintergrundbild anordnen Wir wollen nun die Erde nur noch einmal in der Mitte des Fensters erscheinen lassen. Dies lässt sich nicht mit den eben kennen gelernten HTML-Attributen realisieren. Stattdessen benötigen wir Stylesheet-Befehle. Diese können sowohl im -Tag als auch in einer externen Stylesheet-Datei definiert werden. Wir zeigen Ihnen hier, wie Sie dies im -Tag realisieren.

1

Zuerst benötigen Sie das style-Attribut.

Die Stil-Zuweisung erfolgt im style-Attribut.

2

Als ersten Wert vergeben Sie die Hintergrundfarbe mit dem Stylesheet-Befehl background-color. Wir verwenden hier black (schwarz).

Die Hintergrundfarbe wird schwarz.

3 102

Das Hintergrundbild selbst wird mit dem Befehl background-image aufgerufen. Die Adresse wird in der Form url(bildname) eingegeben. In unserem Beispiel ist das url(erde_bg.jpg).

Hintergrundbild anordnen

Die Adresse des Hintergrundbildes

4

Der Befehl background-repeat bestimmt, wie oft ein Bild im Hintergrund wiederholt wird. In unserem Fall ist der Wert no-repeat die richtige Wahl, da das Bild damit nur einmal dargestellt wird. Die Alternativen wären repeat (Standardeinstellung, Bild wird horizontal und vertikal wiederholt), repeat-x (Bild wird horizontal wiederholt) und repeat-y (Bild wird vertikal wiederholt).

Das Bild wird im Hintergrund nicht wiederholt.

5

Im letzten Schritt geben wir die Position des Hintergrundbildes an. Dazu dient der Befehl background-position. Die Position kann in den verschiedenen Maßeinheiten wie Pixel (px), Millimeter (mm) oder Inch (in) sowie in Prozent (%) von der Fenstergröße angegeben werden. Für unser Beispiel wählen wir jeweils 50% für eine mittige Ausrichtung im Fenster.

Die Position im Hintergrund wird festgelegt.

103

AUF DER

CD-ROM

Mit Bildern und Links arbeiten

Die komplette Datei finden Sie unter dem Namen hintergrundbild_ style.html im Verzeichnis code/kap03 auf der CD-ROM zum Buch.

3.13 Auf der CD-ROM ... Wenn Sie eine Grafik mit mehreren Links versehen möchten, haben Sie zwei Möglichkeiten: Zum einen können Sie die Grafik auseinander schneiden und jeden Teil einzeln verlinken, zum anderen können Sie eine Imagemap verwenden. Diese Möglichkeit behandeln wir in diesem Abschnitt. Eine Imagemap ist, wie der Name sagt, eine Karte eines Bildes, die Bereiche festlegt. Diese Bereiche können dann mit einem Link versehen werden. Wir beginnen diesen Abschnitt mit der fertigen Imagemap einer Weltkarte und zeigen Ihnen im Folgenden, wie die Imagemap aufgebaut ist und wie sie verändert werden kann.

1 2

Kopieren Sie die Datei imagemap.html und das Bild world.gif in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).

3

Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie diese bearbeiten können.

4 5

Öffnen Sie die Datei imagemap.html in Ihrem bevorzugten Editor.

Wechseln Sie auf der CD-ROM in den Ordner code\kap3.

Öffnen Sie sie anschließend mit einem Browser.

Wenn Sie die Datei im Browser geöffnet haben, sehen Sie außer dem Bild zunächst nichts. Die Imagemap selbst ist nicht zu erkennen. Wenn Sie dann aber einen Bereich, zum Beispiel Nordamerika anklicken und die Maustaste gedrückt halten (der Link ist damit aktiviert), sehen Sie den Rahmen der Imagemap mit einer feinen Linie.

104

Auf der CD-ROM ...

Die Imagemap ist zu erkennen; in der Statusleiste sehen Sie außerdem das Ziel des Links.

Nun aber zur Datei selbst. Betrachten Sie den Quellcode im Editor, fallen mehrere Bereiche auf: ■ Das Bild selbst steht im Körper der HTML-Seite. Einziger Verweis auf die Imagemap ist das Attribut usemap. Es enthält als Wert den Namen der Imagemap mit einem Doppelkreuz davor, in unserem Beispiel also #laender. ■ Unter dem Bild befindet sich die Imagemap selbst. Ihre Position ist eigentlich beliebig wählbar. Die Imagemap wird in <map>-Tags eingeschlossen und erhält ihren Namen mit dem name-Attribut. ■ Innerhalb der <map>-Tags sind die einzelnen Bereiche definiert. Jeder Bereich besteht aus einem <area>-Tag. Unsere Beispiel-Imagemap hat also drei Bereiche. ■ Jeder der drei Bereiche hat eine andere Form (shape). Hier sind alle drei möglichen Grundformen einer Imagemap abgebildet: circle – ein Kreis. polygon – ein beliebiges Vieleck, das aus einzelnen Punkten besteht. rect – ein Rechteck.

■ Neben der Form enthält jedes <area>-Tag die entsprechenden Koordinaten. Bei einem Kreis sind das die x- und y-Koordinaten des Mittelpunkts und der Radius, bei einem Rechteck die Koordinaten des linken oberen und des rechten unteren Punkts und bei einem Polygon die x- und y-Koordinaten aller Punkte. ■ Die letzte Angabe im <area>-Tag betrifft das Ziel des Links. Es wird im href-Attribut angegeben.

105

PROFITIPP

Mit Bildern und Links arbeiten

Neben den hier erläuterten Standardangaben kann jedes <area>-Tag auch noch das target-Attribut mit dem Zielfenster und Ereignisattribute wie onmouseover oder onclick enthalten.

PROFITIPP

Im Folgenden werden wir zeigen, wie Sie die Adressen und Formen in einer Imagemap anpassen können.

An dieser Stelle verzichten wir auf eine Einführung in die Erstellung von Imagemaps, da es in der Praxis eher ungewöhnlich ist, Imagemaps von Hand zu programmieren. Vielmehr verwendet man dazu entweder einen (beliebigen) HTML-Editor oder ein Grafikprogramm wie Paint Shop Pro oder Photoshop.

Im ersten Schritt wollen wir die Adresse der Kreisform von http://www.mut.de in http:/ /www.mut.de/shop/sh-info.asp?ID=3827261104 ändern. Dies ist der Link auf ein spezielles Buch. Sie fragen sich vielleicht, warum es denn ein so komplizierter Link sein muss. Die Antwort ist einfach: Auch wir wollen ein wenig Schleichwerbung für eines unserer anderen Werke machen, das noch dazu eine hervorragende Erweiterung und Ergänzung zu diesem Werk darstellt ☺.

Nun befindet sich der Link mit der Schleichwerbung sogar in Ihrem Quellcode.

Als Nächstes wollen wir den Radius des Kreises noch ein wenig erhöhen, damit auch Bali auf der Landkarte zu sehen ist. Der Radius ist unter coords die dritte Angabe. Eine Erhöhung auf 34 Pixel sollte ausreichen.

106

Fazit

AUF DER

CD-ROM

Der Radius wurde auf 34 Pixel erhöht.

Wenn Sie nun noch Änderungen in einer der anderen Bereiche vornehmen möchten, funktioniert dies analog. Die geänderte Version finden Sie auf der CD-ROM zum Buch im Verzeichnis code/kap03 unter dem Namen imagemap_variiert.html.

Der kreisförmige Bereich wurde ausgeweitet und mit einem neuen Link versehen.

3.14 Fazit Das World Wide Web hat wohl nur deswegen einen so großen Erfolg, weil es so bunt ist. In diesem Kapitel haben wir Ihnen gezeigt, wie Sie selbst Grafiken in Ihre HTMLSeiten einbinden können. Außerdem haben Sie gesehen, wie Sie einzelnen Seiten miteinander verlinken können – das Grundprinzip von HTML.

107

4.0 Text strukturieren HTML bietet mehrere Möglichkeiten, Text in eine beliebige Struktur zu bringen. In diesem Kapitel wollen wir zwei davon vorstellen. Zunächst einmal zeigen wir Ihnen, wie Sie Text in Absätze packen und diese Absätze formatieren können. Danach weihen wir Sie in die Geheimnisse von Listen ein.

4.1 Absätze Absätze haben Sie bereits kennen gelernt. Bisher wurde die Formatierung allerdings nur in Bezug auf die Schrift behandelt. Nun zeigen wir Ihnen, wie Sie den Absatz selbst formatieren.

Auf der CD-ROM ... Zuerst benötigen Sie die Ausgangsdatei:

1 2

Zuerst wechseln Sie auf der CD-ROM in das Verzeichnis code\kap04.

3 4 5

Entfernen Sie den Schreibschutz der Datei (siehe Einleitung).

Kopieren Sie die Datei absatz.html in das Arbeitsverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt).

Öffnen Sie die Datei absatz.html in Ihrem bevorzugten Editor. Rufen Sie sie danach in einem Browser auf.

Text strukturieren

Ein formatierter Absatz

Wenn Sie die Datei im Browser betrachten, sehen Sie einen Absatz, der schon mit allen wichtigen Formatierungen ausgestattet ist. Im Editor wurden alle diese Formatierungen im style-Attribut des

-Tags vorgenommen. Im Editor können Sie gut erkennen, was bisher gemacht wurde: ■ Der Absatz hat mit width eine feste Breite in Pixeln (px). ■ Die Hintergrundfarbe (background-color) ist beige. ■ Die Textausrichtung ist Blocksatz (justify), der Einzug der ersten Zeile wurde in Pixel angegeben (text-indent). ■ Die nächsten drei Angaben betreffen den Rahmen. Der Rahmenstil bestimmt das Aussehen des Rahmens, außerdem können noch Rahmenfarbe und Rahmenbreite in Pixel angegeben werden.

Die Angaben zum Rahmen

■ Der Befehl padding gibt den Abstand zwischen dem Text und dem Rahmen an. ■ margin gibt den Abstand des Absatzes zu anderen, umliegenden Objekten an. In den folgenden Schritten werden wir Ihnen zeigen, wie Sie an dem Absatz Änderungen vornehmen.

Rahmen und Abstände In diesem Abschnitt wollen wir das Aussehen des Rahmens und den Abstand zwischen Rahmen und Text verändern.

110

Absätze

1

Der Befehl border-style steuert das Aussehen des Rahmens. Er kann unterschiedliche Werte annehmen, wobei die Unterstützung durch die aktuellen Browser noch sehr unvollständig ist. Die wichtigsten Werte sind: ■ solid – eine normale Linie. Das ist die Standardeinstellung. ■ double – eine doppelte Linie. ■ dotted – eine gepunktete Linie. ■ dashed – eine gestrichelte Linie. Für unser Beispiel wählen wir dashed.

PROFITIPP

Eine gestrichelte Linie

2

Wie bei den meisten Stylesheet-Befehlen für den Rahmen gibt es auch bei border-style Unterformen, die es Ihnen erlauben, den Stil für jede Seite gesondert zu steuern. Dies sind border-style-top (oben), borderstyle-bottom (unten), border-style-left (links) und border-styleright (rechts).

Im nächsten Schritt wollen wir den Abstand zwischen Text und Rahmen mit dem Stylesheet-Befehl padding erhöhen. Ein Wert von 10 Pixel scheint uns angemessen.

Der Abstand zwischen Rahmen und Text

111

PROFITIPP

Text strukturieren

Auch den Abstand mit padding können Sie für jede Seite einzeln angeben. Dazu dienen padding-top, padding-bottom, padding-left und padding-right.

Wenn Sie sich den Zwischenstand im Browser ansehen, können Sie die Änderungen aus diesem Abschnitt auf einen Blick erkennen: Der Text wurde weiter vom Rahmen weggerückt und der Rahmen hat eine gestrichelte Linie.

Rahmen und Abstand wurden verändert.

Feste Größe In diesem Abschnitt geben wir dem Absatz noch eine feste Höhe und geben vor, was mit dem abgeschnittenen Text geschieht.

1

Fügen Sie in das style-Attribut des

-Tags noch den Style Sheet-Befehl height für die Höhe des Absatzes ein und vergeben Sie einen Wert von 100 Pixel.

Die Höhe wurde auf 70 Pixel festgelegt.

2

112

Die angegebene Höhe reicht nicht mehr aus, um den gesamten Text anzuzeigen. Er wird aber dennoch angezeigt. Um mit diesen Überlauf eleganter umzugehen, gibt es den Stylesheet-Befehl overflow. Er kann zwei Werte annehmen: hidden

Absätze

versteckt den überlaufenden Inhalt, scroll blendet Scrollbalken ein. Diese Option verwenden wir für unser Beispiel.

Überlaufender Inhalt wird mit Scrollbalken angezeigt.

Auch hier sollten Sie einen kurzen Blick in den Browser werfen.

Ein Absatz mit Scrollbalken

Hintergrund hinzufügen

AUF DER

CD-ROM

Im letzten Abschnitt für die Formatierung von Absätzen fügen wir noch ein Hintergrundbild hinzu.

1

Als Hintergrundbild verwenden wir hier von der CD-ROM zum, Buch aus dem Verzeichnis code/kap04 die Bilddatei erde.jpg, die wir auch im vorangegangenen Kapitel bereits eingesetzt hatten.

Im ersten Schritt muss das Hintergrundbild definiert werden. Dafür dient der bereits aus dem -Tag bekannte Stylesheet-Befehl background-image. Dieser Befehl erhält als Wert die Adresse des Bildes: background-image: url(erde.jpg)

113

Text strukturieren

Die Erde wurde eingefügt.

2

Nun stört noch, dass schwarze Schrift vor einem dunklen Hintergrund steht. Deshalb ändern wir mit dem Stylesheet-Befehl color die Textfarbe in Weiß (white).

Der Text ist weiß.

Sehen Sie sich abschließend das Ergebnis unserer vielen Änderungen im Browser an. Wir hoffen, Sie konnten an diesem kleinen Beispiel sehen, wie viele Möglichkeiten es bei der Formatierung von Absätzen gibt.

Der Absatz, fertig formatiert

114

Listen

Fazit

AUF DER

CD-ROM

Absätze lassen sich auf viele verschiedene Artenm formatieren. Die Formatierungen sind außerdem sehr einfach änderbar, da sie meist nur mit einem einzigen StylesheetBefehl gesteuert werden.

Die Änderungen finden Sie auf der CD-ROM im Ordner code/kap04 unter dem Namen absatz_variiert.html.

4.2 Listen Eine weitere Möglichkeit, Text zu strukturieren, besteht in der Verwendung von Listen. HTML bietet eine Reihe von Möglichkeiten an, Daten in einer Liste anzuordnen. Das geht sogar so weit, dass HTML (respektive der Webbrowser) die automatische, fortlaufende Nummerierung der einzelnen Listenelemente übernimmt. In der folgenden Abbildung sehen Sie eine solche Liste. Wie Sie gleich sehen werden, steht die Nummerierung nicht in dem HTML-Dokument selbst, sondern wird vom Browser erzeugt.

Eine nummerierte Liste

Auf der CD-ROM ... Mit den folgenden Schritten übertragen Sie die benötigte Datei von der Buch-CDROM auf Ihre Festplatte:

115

Text strukturieren

1 2 3 4

Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap04. Kopieren Sie die Datei liste.html in Ihr lokales Arbeitsverzeichnis (z.B. c:\werkstatt) Entfernen Sie den Schreibschutz von der Datei. Öffnen Sie die Datei in Ihrem Editor und im Webbrowser.

Nummerierte Listen Werfen Sie zunächst einen allgemeinen Blick auf die HTML-Datei. Die Liste beginnt mit dem Tag (ordered list, zu Deutsch geordnete oder nummerierte Liste). Wie Sie im Browser sehen können, werden dann die einzelnen Listenelemente automatisch nummeriert; die Nummerierung beginnt bei 1. Listenelemente werden durch das

-Tag dargestellt (li steht für list item, Listenelement). Zwischen

und

steht dann das Listenelement. Folgendes Codefragment würde eine ganz einfache Liste erstellen:

FC Bayern München

Die Ausgabe im Browser wäre dann die folgende: 1. FC Bayern München

Die vorangestellte 1 wird hierbei vom Webbrowser eingefügt. Wir wollen nun diese Liste schrittweise verändern.

1

Den Platz hinter Herta BSC hat seinerzeit der SC Freiburg belegt. Fügen Sie also einen dementsprechenden Listeneintrag hinter Herta BSC ein.

SC Freiburg wurde in die Liste eingefügt.

116

Listen

2

Wie ja hinlänglich bekannt ist, wurde der FC Schalke 04 in der betreffenden Saison nur Zweiter. Verändern Sie also die Liste so, dass die Zählung erst bei 2 beginnt. Setzen Sie dazu im -Tag das Attribut start="2".

Die Zählung beginnt jetzt bei 2.

3

Der TSV 1860 München hat in der Schlusstabelle den elften Platz belegt. Vor dem Namen des Vereins sollte also der Browser die Zahl 11 anzeigen, nicht die 7. Dies ändern Sie durch value="11" im

-Tag.

1860 München ist nun auf dem 11. Platz.

4

Und noch ein Fehler: Unterhaching hat den 16. Platz belegt. Ändern Sie hier die Nummerierung analog (durch value="16").

117

Text strukturieren

Jetzt stimmen alle Positionen in der Tabelle.

Fassen wir zusammen: ■ Durch wird der Startwert der Liste festgelegt.

PROFITIPP

AUF DER

CD-ROM

■ Durch

wird ab dem angegebenen Listenelement die Zählung geändert.

Den aktuellen Zwischenstand der Bundesligatabelle finden Sie auch auf der CD-ROM zum Buch unter dem Dateinamen liste-besser.html.

Sie können anstelle von arabischen Ziffern auch römische Ziffern und Buchstaben zur Zählung verwenden. Verwenden Sie dazu das typeAttribut des -Tags. Sie haben die folgenden vier Möglichkeiten: ● type="a" für eine Nummerierung a., b., c., ... ● type="A" für eine Nummerierung A., B., C., ... ● type="i" für eine Nummerierung i., ii., iii., ... ● type="I" für eine Nummerierung I., II., III., ...

118

Listen

Nicht nummerierte Listen Neben nummerierten Listen, die mit einer Ziffer oder einem Buchstaben eingeleitet werden, unterstützt HTML auch nicht nummerierte Listen. Dort wird jeder Listeneintrag mit einem grafischen Aufzählungszeichen eingeleitet. Da die Darstellung dieser Aufzählungszeichen von Browser zu Browser variiert und auch einige Browser mehr unterschiedliche Aufzählungszeichen darstellen können als andere, werden wir diesen Punkt nur kurz behandeln. Kurz zum theoretischen Hintergrund: Auch bei nicht nummerierten Listen werden einzelnen Listenelemente durch

und

dargestellt. Der Unterschied zu nummerierten Listen besteht darin, dass Sie in diesem Fall das Tag

zur Listendefinition verwenden müssen – das ul steht für unordered list, unsortierte Liste. Wir wollen nun einem der Vereine eine Spielerliste hinzufügen.

1

Dazu definieren Sie zunächst innerhalb des Listeneintrags für den Verein eine
-Liste.

2 3

Fügen Sie nun dieser Liste mehrere
• ...
-Elemente zu. Vergessen Sie nicht, die innere Liste mit
abzuschließen.

In Ihrem HTML-Code sollten Sie damit etwa Folgendes gemacht haben (Ausschnitt):
• FC Schalke 04
  • Asamoah
  • Böhme
  • Sand


Im Browser erscheint dann die nicht nummerierte Liste inmitten der nummerierten Liste.

119

Text strukturieren

Der Listeneintrag für Schalke hat drei Untereinträge.

Somit haben Sie gleich zwei Schritte auf einmal kennen gelernt: ■ Wie Sie eine nicht nummerierte Liste erstellen: mit
und
• .
  
  AUF DER
  
  CD-ROM
  
  ■ Wie Sie Listen verschachteln können: Erstellen Sie einfach innerhalb eines Listenelements (
• ) eine neue Liste ( oder
  ).
  
  Auf der CD-ROM befindet sich der zugehörige HTML-Code für dieses Beispiel in der Datei liste-verschachtelt.html.
  
  Fazit Sie haben hier in wenigen Schritten gesehen, wie Sie mit einem geringen Aufwand HTML-Listen sowohl nummerierte als auch nicht nummerierte Listen erstellen können. Ebenso unaufwändig ist es, Listen zu verschachteln. Aufgrund der recht beschränkten Gestaltungsmöglichkeiten von Listen werden diese jedoch in der Praxis relativ selten eingesetzt. Stattdessen behilft man sich bei nicht nummerierten Listen oft mit grafischen Aufzählungszeichen, die, wie im vorhergehenden Kapitel gezeigt, eingebunden werden.
  
  120
  
  5.0 Tabellen Wenn Sie bei HTML-Tabellen primär an den Mathematikunterricht in der Schule zurückdenken, liegen Sie falsch. Auf den meisten Webseiten werden keine großen Zahlenkolonnen, mathematische Formeln oder empirische Messwerte dargeboten. Dennoch werfen wir die These auf, dass sich auf fast jeder Webseite Tabellen befinden, ganz besonders bei professionellen Seiten. Den Grund dafür erfahren Sie im nächsten Kapitel. Dieses Kapitel dient primär dazu, Ihnen die notwendigen HTML-Grundlagen nahe zu bringen. Aber keine Sorge, wie in allen anderen Kapitel wird sich das nicht in Unmengen an HTML-Code niederschlagen, wir gehen immer schrittweise vor und stellen Ihnen auf der Buch-CD-ROM eine Reihe von zusätzlichen Informationen zur Verfügung. In folgender Abbildung sehen Sie die Daten einer fiktiven niederbayerischen MessStation. Ausgehend von diesen Daten werden wir in diesem Kapitel die Tabelle erweitern und verändern.
  
  Die Ausgangstabelle
  
  Tabellen
  
  5.1 Auf der CD-ROM ... Der Ausgangsstand, also die zuvor abgebildete Tabelle, befindet sich natürlich auch auf der CD-ROM. So kommen Sie an die Daten:
  
  1 2 3
  
  Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap05. Kopieren Sie die Datei tabelle.html in Ihr lokales Arbeitsverzeichnis (z.B. c:\werkstatt) und entfernen Sie den Schreibschutz, wie im Einführungskapitel gezeigt. Öffnen Sie die Datei in Ihrem Editor.
  
  So weit, so gut. Nun steigen wir in die HTML-Programmierung der Tabellen ein.
  
  5.2 Prinzipieller Aufbau Wenn Sie einen Blick auf den Quellcode in der Datei tabelle.html werfen, werden Sie recht schnell den allgemeinen Aufbau einer Tabelle erkennen: ■ Die Tabelle wird durch das Tag eingeleitet. ■ Jede Tabellenzeile startet mit dem Tag . tr steht für table row, zu Deutsch Tabellenzeile. ■ Der Inhalt jeder Tabellenzelle steht zwischen . td steht für table data, zu Deutsch Tabellendaten. Jede Tabellenzeile muss gleich viele Zellen enthalten. HTML ist eine Seitenbeschreibungssprache, deswegen geben Webbrowser keine Fehlermeldung oder Ähnliches aus, wenn Sie sich beim Tabellenaufbau vertun. Bei Fehlern in der Tabelle versuchen die Browser verschieden gut oder schlecht, die Tabelle ungefähr so darzustellen, wie der Webdesigner sich das vorgestellt hat. Um aber bei allen Browsern ein annähernd ähnliches Ergebnis zu erzielen, sollten Sie darauf achten, die Tabelle sauber aufzubauen. Erweitern wir die Tabelle gleich um eine weitere Zeile – die neuesten Messdaten sind hinzugekommen:
  
  1 2 3
  
  122
  
  Gehen Sie an das Ende der Tabelle (vor

  und

  ). Fügen Sie eine neue Zeile () ein. Fügen Sie innerhalb der Tabelle fünf Zellen (jeweils ) und beliebige Inhalte in den Zellen (zwischen und ) ein.
  
  Tabellenrahmen
  
  4
  
  Tragen Sie nun in die Zellen entsprechende Werte ein.
  
  AUF DER
  
  CD-ROM
  
  Nach dem Speichern sehen Sie in Ihrem Browser, ob es funktioniert hat.
  
  Falls es nicht funktioniert hat: Auf der CD-ROM zum Buch finden Sie in der Datei tabelle-neue-zeile.html eine HTML-Tabelle mit einer neuen Zeile.
  
  Eine Zeile wurde in die Tabelle eingefügt.
  
  5.3 Tabellenrahmen In der Datei tabelle.html (bzw. tabelle-neue-zeile.html oder Ihrer aktuellen, angepassten Arbeitsdatei) finden Sie beim genauen Hinsehen im -Tag die Anweisung border="1". Damit können Sie den Rahmen der Zelle angeben. Als Maßeinheit dienen hier Pixel. Im Folgenden wollen wir untersuchen, welche Auswirkungen eine Änderung des Parameters hat.
  
  1
  
  Setzen Sie zunächst das Attribut auf den Wert "2" (also border="2"), um zu sehen, wie der Wert umgesetzt wurde.
  
  123
  
  Tabellen
  
  Ein doppelt so breiter Rahmen
  
  2
  
  Ändern wir nun den Tabellenrahmen auf einen deutlich höheren Wert, etwa mit border="5". Betrachten Sie auch diese Änderung im Browser; der Rahmen wird deutlich breiter.
  
  Rahmenbreite 5
  
  3 124
  
  Bringen wir nun ein wenig Farbe ins Spiel. Im Attribut bordercolor des Tags können Sie die Rahmenfarbe angeben. Dabei stehen Ihnen dieselben Farben
  
  Tabellenrahmen
  
  zur Verfügung wie auch bei der Textformatierung. Nehmen Sie zur Übung Blau als Rahmenfarbe, also bordercolor="blue".
  
  In der Graustufenabbildung schwer zu erkennen: Der Rahmen ist blau.
  
  4
  
  Kehren wir nun das Ganze ins Gegenteil um, und entfernen den Rahmen komplett durch die Anweisung border="0". Sie sehen, dass nun die einzelnen Texte wie durch Zauberhand aneinander ausgerichtet werden, die Tabelle können Sie nur noch erahnen. Wie Sie im nächsten Kapitel sehen werden, ist dieser „Trick“ ein sehr beliebtes Gestaltungsmittel.
  
  Der Rahmen ist verschwunden.
  
  125
  
  Tabellen
  
  5
  
  Ohne Rahmen stehen die Inhalte der einzelnen Zellen recht eng aneinander. Das Attribut cellspacing im -Tag gibt an, wie viele Pixel Abstand sich zwischen zwei Zellen befinden sollen. Geben Sie als Wert "5" an, um 5 Pixel Abstand einzustellen.
  
  Der Abstand zwischen den Zellen ist nun größer.
  
  Bevor wir nun fortfahren, sollten Sie den Rahmen wieder auf "1" zurücksetzen. Auch Profi-Designer lassen sich häufig den Rahmen ihrer Tabelle anzeigen, damit sie Fehler frühzeitig erkennen können.
  
  5.4 Tabellengröße Natürlich können Sie auch die Ausmaße einer Tabelle in gewisser Weise beeinflussen. „In gewisser Weise“ ist eine etwas schwammige Aussage, aber es ist tatsächlich so. Die Entscheidung, welche Maße eine Tabelle letztendlich hat, liegt beim Webbrowser. Sie haben das ja bereits im Beispiel gesehen: Bis dato enthält die Tabelle keine Größenangaben, und der Browser macht die Tabelle so breit, wie er sie braucht. Dabei versucht der Browser zunächst, Umbrüche im Text zu vermeiden. Falls es nicht mehr anders geht, bricht der Browser den Text eigenmächtig um. Die schiere Willkür, mit der das mitunter zu geschehen scheint, ist auch der Grund, dass das Erstellen einer Tabelle teilweise einer Qual ähnlich kommt. Auch, wenn Sie jeweils detailliert angeben, welche Ausmaße eine Tabelle haben soll, kann es Ihnen unter Umständen trotzdem passieren, dass der Webbrowser seine eigenen Ansichten durchsetzt und dadurch Ihr Layout durcheinander bringt. In der Regel hilft da nur eines: testen, testen und nochmals testen.
  
  126
  
  Tabellengröße
  
  Nun aber zurück zur eigentlichen Aufgabe: den Angaben zur Tabellengröße. Dazu gibt es zwei mögliche Attribute, und zwar für jede Tabelle, Zeile und Zelle: ■ width für die Breite.
  
  PROFITIPP
  
  ■ height für die Höhe.
  
  Normalerweise kennt das -Tag keine Höhenangabe, die Browser akzeptieren diese trotzdem.
  
  Als Werte für width und height können Sie jeweils entweder Pixelwerte (Bildpunkte) oder Prozentwerte angeben. Sie müssen nicht für jede Zelle gesonderte Breitenangaben machen. Es reicht eigentlich aufs das Ganze einmal in einer Zeile anzugeben, der Browser übernimmt dann diese Angaben für alle anderen Zellen. Es gibt jedoch eine Ausnahme: Wenn Sie unterschiedliche Angaben machen (beispielsweise der ersten Zelle in der ersten Zeile eine Breite von 100 Pixel zuweisen, der ersten Zelle in der zweiten Zeile eine Breite von 200 Pixel), sucht sich der Browser einen Wert heraus. Eine zweite Möglichkeit, einen Fehler zu machen, sehen Sie in folgendem Codeausschnitt:

  Erste Zelle

  Zweite Zelle

  
  
  Die gesamte Tabelle hat eine Breite von 150 Pixel, die einzelnen Zellen jedoch in der Summe eine Breite von 200 Pixel; das kann nicht funktionieren. Der Browser nimmt in so einem Fall immer den größeren Wert, hier also 200 Pixel. Dieselbe Argumentation gilt auch für einzelne Tabellenzeilen: Wenn Sie in einer Zelle einer Zeile eine Höhe geben, wird diese – sofern möglich – natürlich auch für alle anderen Zellen in der Zeile übernommen. Wir wollen nun die gesamte Tabelle mit einer fixen Größe versehen:
  
  1
  
  Geben Sie zunächst der Tabelle eine Breite von 600 Pixel: ...
  
  127
  
  Tabellen
  
  2
  
  Weisen Sie als Nächstes in der ersten Zelle der ersten Zeile eine Breite von 100 Pixel zu, allen andern Zellen in dieser Zeile eine Breite von 125 Pixel:
  
  Betrachten Sie das Ergebnis im Browser.
  
  Die Zellen haben jetzt eine feste Breite.
  
  AUF DER
  
  CD-ROM
  
  Sie sehen, dass nun die Zeilen alle eine feste Breite haben.
  
  128
  
  Den momentanen Zwischenstand finden Sie auf der CD-ROM zum Buch im Verzeichnis für dieses Kapitel unter dem Dateinamen tabellegroesse.html.
  
  Zellen ausrichten
  
  5.5 Zellen ausrichten Wie Sie in Ihrem Browser sehen, werden die einzelnen Tabelleninhalte jeweils mittig ausgerichtet, sowohl horizontal als auch vertikal. Die Tabelle selbst ist innerhalb des aktuellen Absatzes links ausgerichtet. Für unsere Anwendung erscheint das noch in Ordnung, aber es gibt viele Fälle, bei denen das nicht so sein soll. Der Projektmanager des Wetterdienstes ist jedenfalls der Meinung, dass die einzelnen Daten jeweils aneinander linksbündig ausgerichtet werden sollten. Außerdem sollten die Beschriftungen nicht zentriert stehen, sondern jeweils an der oberen Kante der Zelle. Bevor wir in die Details einsteigen, sollten zunächst einige Begrifflichkeiten geklärt werden. Für die horizontale (links, recht, zentriert) und die vertikale (oben, mittig, unten) Ausrichtung gibt es mehrere mögliche Anweisungen. In den folgenden beiden Tabelle finden Sie diese aufgelistet. Wert
  
  Beschreibung
  
  left
  
  Linksbündig (Standardwert)
  
  right
  
  Rechtsbündig
  
  center
  
  Zentriert
  
  Werte für die horizontale Ausrichtung
  
  Wert
  
  Beschreibung
  
  top
  
  Oben
  
  middle
  
  Mittig (Standardwert)
  
  bottom
  
  Unten
  
  baseline
  
  An einer gemeinsamen Grundlinie (der untere Strich des „ p“ beispielsweise ist dann unter dieser Grundlinie)
  
  Werte für die vertikale Ausrichtung
  
  Das Attribut für die horizontale Ausrichtung heißt align, englisch für ausrichten. Bei der vertikalen Ausrichtung wird ein „v“ für „vertikal“ vorangestellt, also valign. Im Folgenden probieren wir das einmal aus:
  
  1
  
  Richten Sie zunächst die Tabelle rechts aus. Schreiben Sie dazu align="right" in das

  ...

  -Tag.
  
  129
  
  Tabellen
  
  Die Tabelle ist am rechten Rand ausgerichtet.
  
  2
  
  Richten Sie nun die einzelnen Wetterdaten zentriert aus. Schreiben Sie dazu in die Zellen mit den Wetterdaten align="center" (nicht aber die Beschriftungen in der linken Spalte).
  
  Alle Wetterdaten sind nun in ihren Zellen zentriert.
  
  130
  
  Zellen ausrichten
  
  3
  
  Richten Sie abschießend die Beschriftungen in der ersten Spalte (also jeweils die erste Zelle pro Zeile) jeweils oben an den Zellen aus. Das geht mit valign="top".
  
  Die Beschriftungen sind oben ausgerichtet – siehe Zeile „Dienstag“.
  
  Werfen Sie einen Blick auf Ihren momentanen Zwischenstand. Sieht doch recht ordentlich aus, oder? Mit den Ausrichtungsoptionen können Sie auch dafür sorgen, dass die gesamte Tabelle zentriert innerhalb des Browserbildschirms angezeigt wird. Dazu müssen Sie einen kleinen aber feinen Trick anwenden. Umgeben Sie dazu die Tabelle mit einer weiteren Tabelle, die Sie dann zentriert ausrichten:
  
  1
  
  Starten Sie außerhalb der Wettertabelle eine neue Tabelle, die zentriert ausgerichtet ist:
  
  2
  
  Erstellen Sie in dieser Tabelle eine einzige Zelle, die horizontal und vertikal zentriert ist. In diese Zelle setzen Sie die Wettertabelle:

  2001 2002 Ein Blick in den Browser zeigt (hoffentlich), dass alles wie gewünscht funktioniert hat: Der Benutzer kann sein Geburtsdatum sehr bequem eingeben. Wie in der Abbildung zu sehen, können Sie damit jedoch noch nicht alle Fehleingaben abfangen, in diesem Fall wurde die Schaltjahrregelung nicht beachtet. PROFITIPP Das Geburtsdatum kann bequem mit Pull-down-Menüs eingegeben werden. Sie können Pull-down-Menüs – bei Webseiten mit internationaler Zielgruppe – auch zur Angabe des Landes des Besuchers angeben. Der Vorteil liegt hier aber weniger in der Gefahr des Vertippens, sondern Sie können dadurch Ihre Besucher einfach in die unterschiedlichen Länder gruppieren. Bei einem Texteingabefeld beispielsweise könnten Tippfehler und mehrere Schreibweisen („Deutschland“, „Bundesrepublik Deutschland“, „BRD“) dies vereiteln. 8.5 Radiobuttons Die nächste Information, die Sie Ihren Benutzern abfordern, ist die Angabe des Geschlechts. Dazu werden so genannte Radiobuttons verwendet. Der Name ist sehr bild- 181 Feedback-Formular lich gedacht, wobei fraglich ist, ob die erste Assoziation bei diesem runden Formularelement wirklich die Knöpfe an (alten) Radios sind. Radiobuttons funktionieren nach einem recht einfachen Prinzip: Es kann immer nur höchstens einer aus einer Gruppe aktiviert werden. Warum wir das „höchstens“ so betonen? Nun, es ist natürlich auch möglich, dass gar kein Radiobutton aktiviert wird. Um eine Gruppe aus Radiobuttons zu erstellen, gehen Sie folgendermaßen vor: 1 Erstellen Sie zunächst einen Radiobutton; Sie benötigen dazu wieder das Tag mit dem Attribut type="radio". 2 Im name-Attribut geben Sie den Namen der Gruppe aus Radiobuttons an. Dieser Name wird also bei allen Radiobuttons einer Gruppe verwendet. Im restlichen Formular sollte dieser Name allerdings nicht noch einmal vorkommen, es gilt also dieselbe Regel wie bei den restlichen Formularfeldern: Einfache und eindeutige Namen verwenden. 3 Das value-Attribut des Radiobuttons wird dazu verwendet, die einzelnen Radiobuttons einer Gruppe zu unterscheiden. Beim Formularversand wird das valueAttribut des ausgewählten Radiobuttons verwendet. Als Merkregel eignet sich vielleicht Folgendes: Das name-Attribut bezeichnet die Gruppe, das value-Attribut die einzelnen Elemente. Mit diesem Wissen können Sie die Radiobuttons in dem vorgegebenen Formular leicht identifizieren: Geschlecht: männlich weiblich Testen Sie die Funktionsweise von Radiobuttons: 1 2 Fügen Sie zunächst einen weiteren Radiobutton mit name="Geschlecht" hinzu. Dann fügen Sie dem Formular einen Radiobutton mit name="Schlecht" hinzu. Der relevante Code sieht nun ungefähr folgendermaßen aus: Geschlecht: verrate ich nicht Checkboxen Im Browser können Sie dann den Effekt testen: Von den ersten drei Radiobuttons kann immer nur einer ausgewählt werden, da alle dasselbe name-Attribut haben. Der vierte Radiobutton ist davon völlig unabhängig; wird er ausgewählt, ändert sich am Status der anderen drei Radiobuttons nichts. Der vierte Radiobutton ist von den anderen dreien unabhängig. PROFITIPP Löschen Sie nun die beiden neuen Radiobuttons wieder. Wenn Sie sicherstellen möchten, dass der Benutzer auf jeden Fall einen der Radiobuttons auswählt, selektieren Sie doch einfach einen der Buttons vor – der Benutzer kann dann zwar noch den anderen Radiobutton auswählen, aber es ist immer auf jeden Fall einer aktiv. Dazu benötigen Sie das HTML-Attribut checked: Im nächsten Kapitel zeigen wir Ihnen andere Methoden, wie Sie die Auswahl sicherstellen können. 8.6 Checkboxen Scrollen Sie im Browser ein wenig nach unten, zu der Frage nach den Techniken, die der Benutzer in Zukunft einsetzen will. Checkboxen sehen beinahe so aus wie Radiobuttons, mit dem kleinen Unterschied, dass Letztere rund sind, Erstere eckig. Doch es gibt noch einen weiteren, viel wichtigeren Unterschied: Eine Checkbox ist nicht wie ein Radiobutton Teil einer Gruppe. Entweder ist eine Checkbox angekreuzt, oder nicht. Bei Checkboxen können Sie also nicht sicherstellen, dass nur eine einzige angekreuzt wird. 183 Feedback-Formular Mit Checkboxen angeben, welche Techniken zukünftig eingesetzt werden. Im HTML-Code wird wieder einmal mehr das -Tag benötigt, der type-Parameter diesmal auf "checkbox" gesetzt. Dies können Sie auch im aktuellen Formular sehen: Welche der im Buch vorgestellten Techniken werden Sie in Zukunft einsetzen? HTML JavaScript CSS Wenn das Formular versandt wird, wird von allen angekreuzten Checkboxen das nameund das value-Attribut übergeben. Es wäre also theoretisch möglich, für alle Checkboxen einer Gruppe dasselbe name-Attribut zu verwenden. Dies kann jedoch beim Versand zu Problemen führen. Verwenden Sie daher möglichst eindeutige Namen. 8.7 Mehrfach-Pull-down-Menüs Es ist auch möglich, anstelle von Checkboxen eine spezielle Form von Pull-downMenüs zu verwenden. Normalerweise kann ja in einer solchen Auswahlliste nur ein Element ausgewählt werden. Mit den folgenden Schritten können Sie aber sicherstellen, dass auch mehrere Elemente selektierbar sind: 184 1 Erstellen Sie zunächst, wie gehabt, ein Pull-down-Menü mit den Einträgen HTML, CSS und JavaScript. 2 Ändern Sie nun das <select>-Tag: Durch das Attribut multiple geben Sie an, dass mehrere Elemente ausgewählt werden können. 3 Damit das Ganze aber auch optisch ordentlich aussieht, vergrößern Sie die Höhe der Liste: Durch size="3" im <select>-Tag. Damit sind immer drei Einträge der Liste gleichzeitig zu sehen. Mehrzeilige Textfelder Der Code sieht nun etwa folgendermaßen aus: Welche der im Buch vorgestellte Techniken werden Sie in Zukunft einsetzen? <select name="Technik" size="3" multiple> HTML CSS JavaScript Eine Mehrfach-Auswahlliste statt Checkboxen VORSICHT! Wie in obiger Abbildung zu sehen, sind drei Elemente (und damit im Beispiel alle Einträge der Liste) gleichzeitig zu sehen. Wenn Sie nun bei einem Mausklick die (Strg)Taste gedrückt halten, bleiben die davor markierten Elemente weiterhin markiert. Sie können so also mehrere Elemente markieren. Gehen Sie nicht davon aus, dass alle Ihre Besucher ebenfalls wissen, wie sie mehrere Elemente auf einmal auswählen können. Bieten Sie also einen kurzen Erklärungstext an. 8.8 Mehrzeilige Textfelder Die bisher vorgestellten Formularfelder sind vor allem bei Marketingspezialisten sehr beliebt, denn durch die Einschränkung der möglichen Antworten auf eine Hand voll Alternativen sind die Eingaben sehr leicht auswertbar. Vor allem: Es muss nicht einmal mehr jeder Fragebogen einzeln von einer Person gelesen werden, sondern ein Programm kann die Antworten auswerten und daraus Statistiken erstellen („18% der Benutzer sind männlich“). 185 Feedback-Formular Diese Form der Formulargestaltung stellt jedoch gleichzeitig eine Einschränkung dar. Der Benutzer hat keine Möglichkeit, außerhalb der Grenzen der dargebotenen Alternativen Angaben zu machen. Aus diesem Grund gehört zu jedem anständigen Formular zumindest noch ein Freitextfeld, in dem der Benutzer einen beliebigen Text eingeben kann. Die Textfelder, die wir bis jetzt vorgestellt haben, haben einen kleinen, aber feinen Nachteil: Sie sind nur einzeilig, es ist also sehr schwer, längeren Text einzugeben (weil der restliche Text dann wegscrollt). Aber HTML bietet hier als Alternative mehrzeilige Textfelder an. Auch unser Formular bietet ein solches Feld an. Sie sehen hier das erste Mal, dass nicht das -Tag eingesetzt wird. Für mehrzeilige Textfelder wird das Tag eingesetzt. Mit den folgenden Schritten erstellen Sie ein solches Textfeld: 1 Setzen Sie zunächst in den HTML-Code das Tag und das zugehörige End-Tag . 2 Geben Sie auch diesem Formularelement einen eindeutigen Namen – im nameAttribut. 3 Geben Sie Breite des Textfeldes in Zeichen (analog zu ) im Attribut cols an. 4 5 Im Attribut rows geben Sie die Höhe des Textfeldes in Zeichen an. Setzen Sie zwischen und den Text, der anfangs im Textfeld stehen soll. Das Textfeld sieht nun beinahe so aus wie das in unserem Formular, von der Vorausfüllung einmal abgesehen: Wenn Sie jedoch als Browser den Netscape Navigator einsetzen und längeren Text in dieses Textfeld eingeben, sehen Sie einen unschönen Effekt: Die Zeile wird nicht – wie beispielsweise in einer Textverarbeitung – am Rand automatisch umbrochen, sondern es erscheint ein Scrollbalken und der Text wird weggescrollt (siehe Abbildung 8.17). 186 Mehrzeilige Textfelder PROFITIPP Im Netscape erscheint bei langen Texten ein Scrollbalken, Der Internet Explorer zeigt dieses Verhalten nicht, denn dort wird automatisch umbrochen. Daran erkennen Sie übrigens, wie professionell die Webagentur war, die das Formular erstellt hat. Wenn im Netscape der Text nicht automatisch umbricht, hat die Agentur schlampig gearbeitet und noch dazu die Seiten nur im Internet Explorer getestet. Sie können sich hier wohltuend von der Konkurrenz abheben, wenn Sie die folgenden Hinweise beachten! Mit dem Attribut wrap können Sie das Umbruchsverhalten von Text im Textfeld steuern. Der häufigste Wert für diesen Parameter ist "virtual", denn er sorgt für den gewünschten Effekt: Der Text wird automatisch umbrochen. Ändern Sie also den HTML-Code für das Formular beim mehrzeiligen Textfeld wie folgt ab: Wie in der Abbildung zu sehen, erscheint nun auch bei längerem Text kein horizontaler Scrollbalken mehr. Wenn Sie natürlich so viel Text eingeben, dass die Zeilen im Textfeld nicht mehr ausreichen, erscheint ein vertikaler Scrollbalken. 187 Feedback-Formular So ist es besser: Zeilen werden automatisch umbrochen. 8.9 Versende-Schaltflächen Nachdem ein Benutzer das Formular ausgefüllt hat, liegt es nahe, dass er es auch verschicken will. Dazu müssen Sie ihm jedoch die Möglichkeit bieten. Der Versand erfolgt zumeist auf Mausklick. Sie haben jedoch bei der Gestaltung dieser Schaltflächen einige Möglichkeiten. Standard-Schaltflächen In unserem HTML-Formular erkennen Sie die Versende-Schaltfläche an folgendem Code: Die Versende-Schaltfläche trägt in der Regel kein name-Attribut und das ist auch nicht nötig. Wichtig ist auf jeden Fall der Rumpf, . Wenn Sie diesen Code alleine verwenden, haben Sie keine Kontrolle über die Beschriftung der Schaltfläche. Diese übernimmt dann der Browser. Je nach Browsertyp und Sprachversion steht dann auf der Schaltfläche beispielsweise „Submit form“ oder „Anfrage versenden“. 188 Versende-Schaltflächen Die Versende-Schaltfläche im Internet Explorer, ohne value-Attribut Mit dem Attribut value können Sie die Beschriftung jedoch frei angeben. Im Web gebräuchlich ist „Formular verschicken“, „Daten absenden“ oder ein schlichtes „Weiter“. Grafische Schaltflächen Wenn Ihnen das schlichte Grau und die eckige Gestalt der Schaltfläche nicht gefällt, können Sie alternativ auch eine beliebige Grafik als Versende-Schaltfläche verwenden. Sie haben dann zwar nicht den visuellen Effekt des Versinkens in der Browseroberfläche, den die „Standard-Schaltflächen“ aufweisen, aber Sie haben dadurch deutlich mehr grafische Gestaltungsmöglichkeiten. Befolgen Sie diese Schritte, um alternativ zu der Standard-Schaltfläche eine grafische Schaltfläche für den Formularversand zu erstellen. 1 Verwenden Sie das HTML-Tag . 2 Erstellen Sie eine geeignete Grafik zum Versand. Geben Sie den Namen der Grafik (bzw. die URL) im Attribut src an. 3 Sie haben damit ungefähr folgenden HTML-Code erstellt: Wir haben uns hierbei auf der Homepage von Markt+Technik bedient, denn dort wird auch eine grafische Versende-Schaltfläche eingesetzt. Im Browser sieht das dann ungefähr so wie in der Abbildung aus. Eine grafische Versende-Schaltfläche 189 VORSICHT! Feedback-Formular Wenn Sie – wie wir in diesem Beispiel – fremde Grafiken verwenden, fragen Sie in jedem Fall um Erlaubnis! Der Betreiber der Website kann mit relativ wenig Aufwand anhand der Logdateien feststellen, wenn jemand von fremder Quelle aus auf seine Grafiken zugreift; Sie bekommen dann auf jeden Fall Ärger. 8.10 Wohin mit den Daten? Wenn Sie das Formular so, wie Sie es auf der CD finden, verschicken, landet es im Nirvana. Sie müssen das Formular noch so anpassen, dass die Daten auch wirklich an Ihre E-Mail-Adresse verschickt werden. Wie wir bereits erwähnt haben, werden die Formulardaten durch und eingegrenzt. Alle Formularelemente müssen sich innerhalb dieser HTML-Tags befinden. Werfen wir nun einen Blick auf das -Tag in unserem Beispiel: Das method="post" ist für diesen Fall Pflicht und gibt an, wie genau die Daten verschickt werden sollen. Ohne uns in technischen Details zu ergehen: Sie sollten immer method="post" verwenden. Interessanter ist hier schon die Angabe enctype="text/plain", die angibt, dass die Formulardaten in ein Textformat umgewandelt werden sollen. Dies ist beim E-Mail-Versand sehr praktisch, denn andernfalls würden Sie die Daten in einem kryptischen Format erhalten (siehe Abbildung). Das haben wir aber schon einmal übersichtlicher gesehen ... Versand per E-Mail Entscheidend ist jedoch das action-Attribut. Dahinter geben Sie an, wohin die Formulardaten verschickt werden sollen. Das „wohin“ kann ein Programm auf einem Webserver sein, das die Daten umwandelt und in eine Datenbank schreibt, es gibt hier viele 190 Wohin mit den Daten? Möglichkeiten. Am einfachsten (zunächst jedenfalls) ist es, hier einfach mailto: und eine E-Mail-Adresse anzugeben. Auf Knopfdruck werden dann die Formulardaten an die angegebene E-Mail-Adresse verschickt. Ändern Sie also im Formular unsere Muster-Adresse in Ihre eigene E-Mail-Adresse, und die Formulardaten landen auch tatsächlich bei Ihnen. Dieses Vorgehen können wir leider nicht uneingeschränkt empfehlen, denn es hat eine Reihe von Nachteilen: ■ Vor dem Versand geben die meisten Browser eine Warnmeldung, wie in folgender Abbildung zu sehen, aus. ■ Der Versand wird über das E-Mail-Programm des Benutzers erledigt. Wenn dieses nicht korrekt eingerichtet ist (was gut möglich ist, wenn ein Benutzer mehrere E-Mail-Programme gleichzeitig auf dem Rechner installiert hat, denn bei den meisten Browsern sind ja welche dabei), funktioniert der Versand nicht. ■ Beim Internet Explorer funktioniert der Versand bei einigen Versionen überhaupt nicht, bei anderen nur manchmal. Die Warnmeldung des Internet Explorer beim Mailversand Kurzum: Der Einsatz von action="mailto:..." kann nicht gerade als professionell bezeichnet werden. Grund genug, nach einer Alternative zu suchen! Versand per Skript Es muss also eine Lösung gefunden werden, die unabhängig vom verwendeten Browser und der Konfiguration auf dem Rechner des Benutzers ist. Im Web gibt es eine Reihe von Anbietern, die dieses erledigen. Sie bieten auf ihren Webservern ein Skript an, das nichts anderes als ein Programm ist. Dieses Programm versendet dann die Formulardaten (beispielsweise) per E-Mail an eine anzugebende Adresse. Zu Demonstrationszwecken haben wir einen dieser Anbieter herausgepickt. Unsere Wahl stellt also weder eine Bevorzugung dieses Anbieters dar, noch sagt sie etwas über die Qualität des Anbieters aus. Es handelt sich um einen recht bekannten Anbieter, aber es gibt auch andere, die sicherlich Vor- und Nachteile haben. 191 Feedback-Formular Der Anbieter, von dem wir sprechen, ist FormMailer, im Web unter www.formmailer.com erreichbar. Unter dieser URL finden Sie auch aktuelle Informationen über den Anbieter, die folgende Anleitung ist Stand Dezember 2001. Die Homepage von FormMailer Um das Angebot einzusetzen, gehen Sie folgendermaßen vor: 1 Ändern Sie das action-Attribut des -Tags Ihres Formulars auf "http:// send.formmailer.com/" und entfernen Sie das enctype-Attribut. Das Ziel des Formulars muss angegeben werden. 192 Wohin mit den Daten? 2 Wenn Sie Mehrfach-Auswahllisten einsetzen, sorgen Sie dafür, dass das nameAttribut auf [] endet. Das benötigt der Anbieter aus technischen Gründen, um auch alle Daten aus dem Formular auslesen zu können. Hinter den Namen der Auswahlliste muss []stehen. 3 Erstellen Sie danach noch eine Seite, die aufgerufen werden soll, nachdem der Benutzer das Formular abgeschickt hat. Dort können Sie sich beispielsweise für das Ausfüllen bedanken und einen Link zurück zur Hauptseite Ihrer Website anbieten. Eine exemplarische Dankesseite 4 Nun ist es an der Zeit, dass Sie sich bei FormMailer auch ordnungsgemäß anmelden. Auf der Hauptseite des Angebots finden Sie einen Link, der mit Neues Formmailer-Konto einrichten beschriftet ist. Zunächst müssen Sie sich die Nutzungsbedingungen durchlesen und per Mausklick akzeptieren (richtig, das was Sie sehen, ist eine Standard-Schaltfläche zum Versenden). 193 Feedback-Formular Die Nutzungsbedingungen für FormMailer 5 Im nächsten Schritt verlangt der Dienst von Ihnen persönliche Angaben sowie zu dem Formular, das Sie versenden möchten. Angaben zum Formular und zum Benutzer 194 Welcher Feldtyp? 6 Am Ende der Anmeldung zeigt Ihnen FormMiler einen HTML-Code an, den Sie in Ihr Formular einbauen müssen. Dieser sieht ungefähr folgendermaßen aus: Bauen Sie dieses Tag an einer beliebigen Stelle zwischen und ein. Keine Angst, dieses Feld ist – wie die Bezeichnung „hidden“ schon sagt – unsichtbar. Das versteckte Formularfeld im HTML-Code Übertragen Sie nun Ihr Formular auf Ihren Webserver (siehe Einleitung) und testen Sie es. Zum Zeitpunkt der Erstellung dieses Manuskripts (Dezember 2001) war das Angebot für private Anwender kostenlos, kommerzielle Anbieter mussten einen Obolus entrichten. Unter www.formmailer.com finden Sie die jeweils aktuelle Preisliste. 8.11 Welcher Feldtyp? Am Ende dieses Kapitels wollen wir noch einmal die vorgestellten Formularfeldtypen rekapitulieren und jeweils angeben, welcher Typ für welchen Zweck geeignet ist. Textfelder In Textfelder können Sie nur innerhalb einer Zeile beliebige Buchstaben eingeben. Damit eignen sich diese nicht für längere Texte. Überlegen Sie sich außerdem, ob es für die Angaben, die in einem Textfeld gemacht werden sollen, nur eine begrenzte Zahl von Möglichkeiten gibt. Falls ja, sind Sie unter Umständen mit den anderen Formularfeldtypen besser beraten. Möglichkeiten für Angaben in Textfeldern sind unter anderem die folgenden: ■ Vorname ■ Name 195 Feedback-Formular ■ Straße ■ Postleitzahl ■ Ort ■ Land ■ Homepage ■ E-Mail-Adresse ■ Kontonummer ■ Bankleitzahl ■ Kreditkartennummer Passwortfelder Wie wir bereits schon erwähnt hatten, ist die vermeintliche Sicherheit, die Passwortfelder bieten, nur auf die Eingabe beschränkt – die Angaben selbst werden unverschlüsselt verschickt. Wenn Sie also in Ihrem Formular Angaben erfordern, die niemand anderes bei der Eingabe sehen sollte, verwenden Sie Passwortfelder. Beispielsweise bei diesen Angaben: ■ Passwort ■ PIN ■ TAN (Transaktionsnummer) Pull-down-Menüs Bei einem normalen Pull-down-Menü – auch Auswahlliste genannt – kann immer nur eine Möglichkeit ausgewählt werden. Bedenken Sie dies beim Einsatz. Anwendungsmöglichkeiten sind unter anderem die folgenden: ■ Tag ■ Monat ■ Jahr ■ Land ■ Bewertung auf einer Skala (0 bis 9, gut/mittel/schlecht, ...) Radiobuttons Auch bei Radiobuttons kann – wie bei Pull-down-Menüs – nur ein Element ausgewählt werden. Die möglichen Anwendungsgebiete für diesen Elementtyp sind also praktisch dieselben wie für Pull-down-Menüs. Welchen dieser beiden Typen Sie wäh- 196 Welcher Feldtyp? len, ist jeweils Geschmackssache und hat auch optische Gründe. Die Darstellung in einem Pull-down-Menü benötigt weniger Platz, ist deswegen aber oft auch nicht so übersichtlich wie eine Reihe von schön angeordneten Radiobuttons. Checkboxen Bei Checkboxen können mehrere gleichzeitig ausgewählt werden. Fragen der Art „Welches ist Ihr Lieblings...“ können damit nicht ausreichend abgedeckt werden, wohl aber Fragen der Art „Welche (Plural!) der folgenden ...“. So können beispielsweise die folgenden Angaben mit Checkboxen erfasst werden: ■ Hobbys ■ Techniken, die in Zukunft eingesetzt werden bzw. die Sie bereits beherrschen Mehrfach-Pull-down-Menüs Und wieder eine Analogie: Bei Mehrfach-Listen (HTML-Attribut multiple) können mehrere Elemente ausgewählt werden, also genauso wie bei Checkboxen. Auch hier ist es wieder eine optische Frage. Nicht jeder Benutzer weiß, dass er mit der (Strg)-Taste mehrere Elemente anklicken kann. Daher sollten Sie dieses Element nur mit Vorsicht einsetzen. Ansonsten sind die Anwendungsfelder jedoch dieselben wie bei Checkboxen. Mehrzeilige Textfelder Zu guter Letzt noch die mehrzeiligen Textfelder: In diesen kann (fast) beliebig viel Text eingegeben werden. In solchen Feldern kann der Benutzer beliebigen Text produzieren, woraus sich (unter anderem) folgende mögliche Angaben ergeben: ■ Ihr Kommentar ■ Kurzer Lebenslauf ■ Lieblings-URLs (Plural, denn sonst würde ein einzeiliges Feld ja auch ausreichen) An einigen Stellen im World Wide Web finden Sie mehrzeilige Textfelder an Stellen, an denen Sie sie am wenigsten erwarten würden: Zur Anzeige der allgemeinen Geschäftsbedingungen. Der Vorteil: Die AGBs sind meist recht lang, in einem Textfeld (samt vertikalem Scrollbalken und Umbrüchen, dank wrap="virtual") und nehmen so wenig Platz ein. In der Abbildung sehen Sie ein Original-Beispiel aus dem WWW. 197 Feedback-Formular Ein mehrzeiliges Textfeld enthält die ABGs. 8.12 Fazit Sie verfügen nun über alle Voraussetzungen, Formulare für Ihre Website zu erstellen und dafür zu sorgen, dass die Formulardaten auch bei Ihnen ankommen. Aber bedenken Sie eines: Zwingen Sie Ihren Benutzern nicht unzählige Fragen auf und fragen Sie auch nicht allzu viele persönliche Daten ab. Die Angabe des Namens ist noch in Ordnung, E-Mail-Adresse wohl auch, aber schon beim Geburtsdatum sind viele Personen nicht mehr gewillt, so viel über sich anzugeben. Werfen Sie noch einmal einen Blick auf das fertige Formular, bevor Sie zum nächsten Kapitel weiterblättern! 198 Fazit Das komplette Feedback-Formular, nach der Überarbeitung 199 9.0 Formulare formatieren Es gibt im IT-Bereich beinahe unzählige Stereotypen, aber eines der wenigen, das wirklich oft zuzutreffen scheint, ist das Verhältnis zwischen Programmier- und Grafikkünsten eines Webdesigners. Ein Programmierer ist oft ein mieser Grafiker, und Grafiker sind häufig schlechte Programmierer. Zwitter, also Personen, die in beiden Gebiete gleichermaßen gut bewandert sind, sind selten und Personen, die von sich glauben, in diese Kategorie zu gehören, umso häufiger. Insbesondere bei Formularen ist eine ansprechende grafische Gestaltung wichtig. Formulare per se sind eine eher langweilige Sache; das Ausfüllen ist keine große Freude für den Benutzer. Gerade hier kommt es darauf an, dass das Formular dem Benutzer zumindest optisch schmackhaft gemacht wird. Vergleichen Sie selbst: Zunächst die Abbildung auf der folgenden Seite, wie das Formular aus dem Formularkapitel momentan aussieht (zumindest ungefähr, Sie werden vermutlich Felder gelöscht und hinzugefügt haben, damit das Formular Ihren Anforderungen entspricht). Formulare formatieren Eine „nüchterne“ Darstellung 202 Hier folgt eine mögliche, optisch ansprechendere Variante: Das ist doch eine ganz andere Qualität, oder? Der Unterschied ist doch frappierend, oder? AUF DER CD-ROM In diesem Kapitel stellen wir mehrere Möglichkeiten vor, wie Sie Formulare formatieren können. Als Basis nehmen wir dabei das unformatierte Formular. Das prinzipielle Grundwissen zur Formatierung besitzen Sie ja bereits. Daher werden wir in diesem Kapitel relativ wenig Code abdrucken, sondern stattdessen eine Reihe von bebilderten Arbeitsschritten und entsprechende Hinweise, auf welche Art und Weise Sie diese Ergebnisse erreichen können. Auf der CD-ROM zum Buch finden Sie jeweils Zwischenversionen des Formulars, sodass Sie Ihre Ergebnisse auch mit unserem Beispielcode vergleichen können. 203 Formulare formatieren 9.1 Auf der CD-ROM ... Wie bereits angekündigt, befinden sich auf der beiliegenden CD-ROM im Verzeichnis zu diesem Kapitel eine Reihe von Beispieldateien, die Sie im Laufe des Kapitels alle vorgestellt bekommen. Zunächst aber beginnen wir mit dem Rohmaterial, dem unformatierten Formular. 1 2 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap09. Kopieren Sie die Datei formular-unformatiert.html in Ihr Arbeitsverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt). Alternativ können Sie natürlich auch Ihr im vorhergehenden Kapitel erstelltes Formular verwenden. 3 Entfernen Sie den Schreibschutz von der Datei (siehe Kapitel 1, Einleitung), damit Sie die Datei auch bearbeiten können. 4 Öffnen Sie die Datei in Ihrem bevorzugten Editor. Sie haben nun das unformatierte Formular vor sich. In den nächsten Schritten werden Sie daraus eine ansehnliche Seite formen. 9.2 Mit Tabellen ausrichten In Kapitel 6, „Seitenlayout“, haben Sie bereits erfahren, wie Sie mithilfe von Tabellen ein gewisses Layout realisieren können. Wenn Sie diese Tabellen unsichtbar machen, bemerkt der (nicht vorgebildete) Nutzer nicht einmal, dass dort überhaupt Tabellen eingesetzt werden. Der Vorteil einer Tabelle ist in diesem Fall: Sie können die einzelnen Formularelemente aneinander ausrichten. Eine gute Idee ist es beispielsweise, mit zwei Spalten zu arbeiten. In einer Spalte stehen die Beschriftungen für die Felder (zumindest für die meisten), in der anderen Spalte das eigentliche Formularfeld. Im Folgenden werden Sie nun eine solche Tabelle erstellen. Das Grundwissen über den Aufbau von Tabellen (siehe Kapitel 5, „Tabellen“) setzen wir dabei voraus. Sollten Sie dennoch an einer Stelle Schwierigkeiten haben, arbeiten Sie entweder Kapitel 5 noch einmal durch oder verwenden Sie die Zwischenversion auf der CD-ROM zum Buch. So, nun machen Sie aus der Rohvorlage ein Formular mit angeordneten und ausgerichteten Elementen: 204 Mit Tabellen ausrichten 1 Erstellen Sie zunächst eine Tabelle mit Rahmen (, damit Sie später immer den Überblick behalten können und genau sehen, wo eine Tabellenzelle anfängt und aufhört. Fügen Sie die Tabelle direkt nach ein. 2 Zählen Sie nun, wie viele Beschriftungen Sie haben und fügen Sie dementsprechend viele Zeilen in die Tabelle ein. Verwenden Sie dabei zwei Spalten (also pro Zeile ). Wir haben hier acht Zeilen und zwei Spalten eingefügt. 3 Setzen Sie nun die Beschriftungen in die linken Zellen, pro Zeile eine Beschriftung. Am einfachsten geht das über die Zwischenablage, unter Windows/Macintosh über die Befehle Bearbeiten/Ausschneiden und dann Bearbeiten/Einfügen. 205 Formulare formatieren Die Beschriftungen stehen jetzt in der Tabelle. 4 206 Nun sind die Formularelemente an der Reihe. Kopieren/Verschieben Sie zunächst die Formularelemente in die zugehörigen Zellen – rechts neben die Beschriftungen. Die -Tags können Sie dabei entfernen. Kümmern Sie sich noch nicht besonders um Ausrichtung und Ähnliches, das erledigen wir in den nächsten Schritten. Mit Tabellen ausrichten Die Formularfelder wurden in die rechte Spalte verschoben. 207 Formulare formatieren 5 Verschönern Sie die Ausrichtung noch ein wenig, indem Sie beispielsweise die Radiobuttons untereinander, nicht nebeneinander setzen und das mehrzeilige Textfeld schmaler machen. Passen Sie bei langen Beschriftungen die Breite der einzelnen Spalten an (Attribut width) und setzen Sie ggf. den Abstand zwischen Zellinhalt und Rand (cellpadding). Viele kleine kosmetische Änderungen 208 Mit Tabellen ausrichten 6 Sorgen Sie nun dafür, dass die Beschriftungen jeweils oben an den Formularelementen ausgerichtet sind und umgekehrt. Dazu müssen Sie die Zelleninhalte oben ausrichten. Dies geht im -Tag mit dem Attribut valign="top". Alles ist nun oben in den Zellen ausgerichtet. 209 Formulare formatieren 7 Wenn alles gut aussieht, entfernen Sie den Tabellenrahmen (border="0" im Tag). Die einzelnen Formularfelder sind nun hübsch aneinander ausgerichtet, die Tabelle dagegen ist nicht mehr zu sehen, sie erfüllt auch unsichtbar ihren Zweck. AUF DER CD-ROM Ohne Rahmen erkennt nur noch der Profi, wo die Tabelle sich befindet. Den aktuellen Zwischenstand finden Sie auf der Buch-CD-ROM unter dem Dateinamen formular-tabelle.html. 9.3 Formatieren mit Wie Sie bereits in den vorhergehenden Kapiteln gesehen haben, gibt es zwei Ideologien bei der (Text-)Formatierung. Entweder, es werden Tags à la verwendet, oder es wird auf Stylesheets gesetzt. Die erste Methode ist recht bequem (da geringe Einlernphase) und ist insbesondere unter alten Hasen recht weit verbreitet, da Stylesheets erst mit Browsern ab Version 4 sinnvoll verwendet werden konnten. 210 Formatieren mit Gleichwohl gilt jedoch, dass insbesondere mittlerweile als deprecated gilt. Deswegen sollten Sie nach Möglichkeit Stylesheets verwenden. Während Text noch mit etc. ausreichend formatiert werden kann, ist das bei Formularfeldern nicht mehr der Fall. Wir werden das im Folgenden mit einigen Beispielen untermauern. Außerdem werden wir den Effekt jeweils in mehreren Browsern testen, denn was einem Browser genügt, bleibt möglicherweise bei einem anderen ohne Wirkung. PROFITIPP Als „Opfer“ verwenden wir ein Textfeld. Unser Ziel ist es, den Font für dieses Textfeld zu verändern. Begründungen hierfür gibt es mehrere. Beispielsweise verwendet der Internet Explorer als Standardschriftart für Textfelder stets Arial oder Helvetica. Bei Textfeldern mit Längenbeschränkung wäre dagegen eine Schriftart, bei der jeder Buchstabe die gleiche Breite hat, vorteilhaft. Dazu muss aber der Font geändert werden. Damit Sie auch einmal mit Fachtermini um sich schmeißen können: Schriftarten, bei denen jedes Zeichen dieselbe Breite hat, heißen nichtproportionale Schriften. Ein Beispiel hierfür ist Courier. Die restlichen Schriften sind dann proportionale Schriften; dort ist etwa das i schmaler als das a. Sie sollten nun in Ihrem HTML-Code ein Textfeld nach folgendem Vorbild haben: Umfassen Sie dieses Textfeld nun mit einer -Anweisung, nach folgendem Muster: VORSICHT! Nehmen Sie nicht Courier zum Testen! Beispielsweise verwendet der Netscape Navigator 4.x standardmäßig Courier als Schrift für Textfelder. Sie könnten also nicht feststellen, ob Ihr Ansatz überhaupt funktioniert, weil das Textfeld ja sowieso in Courier dargestellt wird. Aus diesem Grund verwenden wir an dieser Stelle Verdana. Betrachten Sie das Ergebnis zunächst im (immer noch recht weit verbreiteten) Netscape Navigator 4.x, der in einigen Browserstatistiken an dritter Stelle liegt. Laden Sie dort das Dokument (falls Sie den Browser installiert haben) und tippen Sie in das modifizierte Formularfeld ein paar Werte ein. 211 Formulare formatieren Innerhalb des Feldes wird Verdana verwendet. Wie in der Abbildung zu sehen, wird der Text in Verdana dargestellt. Soweit so gut, also weiter zum nächsten Browser, der Nummer Zwei auf dem Browsermarkt (wenn Sie dies lesen, kann sich das möglicherweise bereits geändert haben) – dem inzwischen als recht stabil anzusehenden Netscape Navigator 6.x. Bei Ihnen funktioniert es womöglich, bei uns nicht. Je nach verwendeter Unterversion des Netscape 6 sehen Sie etwas anderes. Frühere Versionen haben die Schriftart innerhalb des Textfeldes geändert, der von uns eingesetzte Netscape 6.2 dagegen ändert die Schriftart nicht. Nun kommen wir zum Spitzenreiter unter den Browsern, dem Internet Explorer (zurzeit noch hauptsächlich in den Versionen 4, 5, 5.5 und 6 im Einsatz, in aufsteigender Reihenfolge). Dieser Browser ignoriert – wie in der Abbildung zu sehen – die -Anweisung vollkommen, als Schriftart wird weiterhin der Standardfont Arial verwendet. 212 Formatieren mit CSS AUF DER CD-ROM Der Internet Explorer bleibt bei Arial. Wenn Sie den Effekt auch nachvollziehen möchten, aber Ihre HTMLDateien dazu nicht editieren wollen, finden Sie auf der CD-ROM zum Buch im Verzeichnis für dieses Kapitel die Datei tabelle-font.html. Hieraus können Sie das folgende Fazit ziehen: Wenn Sie Schriftarten zuweisen möchten, stellen Sie entweder sicher, dass alle Ihre Benutzer keinen Internet Explorer verwenden (das geht im World Wide Web so gut wie gar nicht, eventuell in Firmennetzwerken von Unternehmen die kein Windows-Betriebssystem einsetzen), oder suchen Sie nach einer Alternativlösung. Diese Alternativlösung ist schnell gefunden: Stylesheets. 9.4 Formatieren mit CSS Mithilfe von Stylesheets können Sie etwas bequemer Einfluss auf die Formatierung von Formularelementen (und natürlich auch anderen Elementen der HTML-Seite, aber das ist nicht Thema dieses Kapitels) nehmen. Prinzipiell haben Sie mehrere Möglichkeiten: ■ Sie verwenden Klassen: <style type="text/css"> ... 213 Formulare formatieren ■ Sie verwenden direkt das style-Attribut: ■ Sie verwenden den Tag-Namen: <style type="text/css"> ... VORSICHT! Die Verlockung ist groß, bei der letztgenannten Methode auch ein weiter außen liegendes Tag zu verwenden, etwa oder : <style type="text/css"> In Netscape-Browsern funktioniert auch das tadellos, der Internet Explorer jedoch stellt – ähnlich wie bei der Verwendung von im vorhergehenden Abschnitt – nur Text in Verdana dar, nicht jedoch die Eingaben in den Formularfeldern. Im Allgemeinen ist es empfehlenswert, für das gesamte Formular dieselbe Schriftart zu verwenden. Aus Flexibilitätsgründen sollten Sie jedoch jederzeit in der Lage sein, sprichwörtlich „auf Knopfdruck“ alle Elemente eines Formulartyps zu ändern, um auf neue visuelle Anforderungen schnell reagieren zu können. Aus diesem Grund raten wir zu folgendem Vorgehen: 1 Geben Sie zunächst allen Formularelementen eines Typs dieselbe Klassenbezeichnung, in etwa so: <select > Für die restlichen Formularelemente lohnt sich der Aufwand eigentlich nicht, denn bei ihnen gibt es eigentlich nichts zu formatieren: 214 Formatieren mit CSS 2 Erstellen Sie nun die zugehörigen Stilangaben. Der Einfachheit halber setzen wir die Schriftart für alle Formularelemente auf Verdana. Vergessen Sie nicht, auch die Beschriftungen in Verdana zu formatieren: <style type="text/css"> Sie können natürlich auch beliebige andere Stilanweisungen ausprobieren, wie Sie das in den Übungen zum Stylesheet-Einsatz gesehen haben. 3 Speichern Sie ein (vorerst) letztes Mal und betrachten Sie Ihr Werk in Ihrem Browser – in möglichst vielen Browsern, um genau zu sein. Im Vergleich zum Ausgangszustand ist das doch ein äußerst ansehnliches Ergebnis, oder? Alle Formularfelder verwenden nun Verdana 215 AUF DER CD-ROM Formulare formatieren Den Endstand finden Sie auf der CD-ROM zum Buch unter dem Dateinamen formular-css.html. Doch bedenken Sie, dass dieses Formular unsere Musterfelder enthält. Im Idealfall haben Sie bereits Ihr eigenes Formular, das nun im trauten Glanz erstrahlt. 9.5 Fazit Sie haben gesehen, dass es weitaus arbeitsaufwändiger ist, ein Formular zu erstellen, als dieses Formular optisch anzupassen. Aber deswegen sollten Sie, sobald das Formular funktional fertig programmiert worden ist, nicht den sprichwörtlichen Bleistift fallen lassen, sondern noch ein wenig zusätzlichen Aufwand in das Formularlayout stecken. In diesem Kapitel haben wir eine Reihe von Hinweisen und Tipps gegeben, die Sie auch bei Ihren Formularen anwenden können. Die wichtigste Regel ist und bleibt jedoch: Je kürzer das Formular, desto besser. Ganz nebenbei geht dann die Erstellung des Layouts oft auch schneller vonstatten ... 216 10.0Sound und Video einbauen Ein heißes Thema im World Wide Web ist die Verwendung von Musik und Videodaten. Die einen sagen, das sei Ressourcenverschwendung und sehr nervig, die anderen halten dem entgegen, dass man es sich bei der heute zur Verfügung stehenden Bandbreite locker leisten könne, Audio und Video einzubinden. Wir werden später in diesem Kapitel noch einmal kurz auf diese Thematik eingehen. Zunächst aber zeigen wir Ihnen an ein paar Beispielen, wie Sie überhaupt Audio- und Videodaten in Ihre HTML-Seite integrieren können. 10.1 Audio Musikalische Untermalung auf Webseiten ist – insbesondere in der Vorweihnachtszeit – weit verbreitet. Eine etwas aufgepeppte „Jingle Bells“-Variante, hier und da ein um eine Terz zu tief gespieltes „Stille Nacht“; all das gibt dem Benutzer einen Grund, die Stromversorgung der Lautsprecher zu kappen. Dezent eingesetzt können Soundeffekte eine Website stimmungsvoll untermalen. Jedoch liegt die eigentliche Herausforderung daran, dieses „dezent“ möglichst genau auszuloten. Was Sie für einen netten Gag halten, nervt unter Umständen den Großteil Ihrer Besucher. Lassen Sie also gerade hier ausführlich testen! Auf der CD-ROM ... Die CD-ROM dieses Buches enthält unter anderem eine Musterdatei, die Ihnen den Einbau einer Audiodatei in Ihre Seite erleichtert. Mit den folgenden Schritten bereiten Sie den Einsatz vor: Sound und Video einbauen 1 2 Rufen Sie auf der CD-ROM das Verzeichnis code\kap10 auf. 3 4 5 Entfernen Sie den Schreibschutz, wie im Einführungskapitel beschrieben. Kopieren die Dateien audio.html, audio.mid und audio.wav) in Ihr lokales Arbeitsverzeichnis (bei uns: c:\werkstatt). Öffnen Sie die HTML-Datei in Ihrem Webbrowser. Sie hören (noch) nichts. Öffnen Sie die HTML-Datei in Ihrem Editor. Wir zeigen Ihnen im Folgenden, wie Sie die Datei verändern können und somit auch in Ihre Webseiten Musik auf verschiedene Arten einbauen können. Zunächst aber ein wenig (notwendige) Theorie. Formate PROFITIPP Für das Abspielen von Sounddateien ist nicht HTML verantwortlich; Sie können dort nur Sounddateien einbinden. Ob der Benutzer dann diese Musik auch hören kann, hängt von mehreren Faktoren ab. Unterstützt der Browser überhaupt den Einbau von Sounddateien (das tun die meisten), und unterstützt das System des Benutzers überhaupt das Format, in dem die Audiodaten vorliegen. Beispielsweise wird das momentan sehr beliebte MP3-Format nicht von jedem Browser unterstützt! Es gibt ein Sammelsurium von Audioformaten. Davon werden zwei von den größeren Browsern in den meisten Konfigurationen unterstützt: ■ Das WAV-Format, erkennbar an der Dateiendung .wav. Wenn Sie unter Windows arbeiten, durchsuchen Sie doch einmal Ihre Festplatte nach .wav-Dateien (Start/Suchen/Dateien). Sie werden wohl eine ganze Reihe dieser Dateien finden (siehe Abbildung). Die Töne beim Starten und Herunterfahren des Betriebssystems sowie bei Meldungen von Windows – alles WAV-Audio. Musik-CDs verwenden übrigens dasselbe Format, auch wenn Sie hier nicht direkt darauf zugreifen können. 218 Audio Auf einem Windows-System befinden sich einige WAV-Dateien. ■ Das MIDI-Format. Dieses Format (Dateiendung: .mid) in dem lediglich Tonhöhe, -dauer und Lautstärke angegeben werden sowie das Instrument, das diesen Ton spielen soll. Die Qualität der abgespielten Dateien hängt dann recht stark von der Soundkarte ab. Bei teuren Soundkarten klingt eine Akustikgitarre wie eine echte Akustikgitarre, billigere Soundkarten dagegen geben oft nur ein merkwürdiges Zirpen von sich. Zur Veranschaulichung: Das Beispiel audio.mid auf CD-ROM, das wir im Folgenden auch verwenden werden, soll eigentlich eine Akustikgitarre mit Stahlsaiten als Instrument verwenden. Überprüfen Sie, wie das bei Ihnen klingt! Das MIDI-Format wird recht häufig unterstützt, weil viele Browsern entweder ein Abspielprogramm enthalten oder sich andere Abspielprogramme automatisch gleichzeitig als Abspielprogramm für den Browser konfigurieren. WAV ist aber verbreiteter. VORSICHT! Stellen Sie also sicher, dass Sie eine Datei in einem dieser beiden Formate einbauen möchten. Es ist unerheblich, welche Musikdaten Sie letztendlich einsetzen – stellen Sie sicher, dass Sie an der Datei auch die Rechte besitzen oder die Einwilligung des Rechteinhabers haben. Wenn Sie einen aktuellen Charthit auf dem Keyboard nachklimpern und das dann online veröffentlichen, bekommen Sie unter anderem bald teure Post von der GEMA, der Verwertungsgesellschaft für Musik. 219 AUF DER CD-ROM Sound und Video einbauen Die Audio-Dateien auf der CD-ROM zum Buch (audio.mid und audio.wav) dürfen Sie dagegen frei verwenden. Sie entstammt aus der Feder des Autoren dieser Zeilen und hat nur wenig Kreativität erfordert. Parameter Wie Sie in der HTML-Datei sehen, wird die Audiodatei mit dem <embed>-Tag eingebunden. Mit einigen Parametern können Sie das Erscheinungsbild und die Funktionalität der Musikdatei steuern: 1 Zunächst sehen Sie dort das Attribut autostart, welches auf false gesetzt ist. Beim Wert true startet die Wiedergabe automatisch, sobald die HTML-Seite geladen wird. Ändern Sie also das Attribut auf den letzteren Wert, und laden Sie die Seite neu. Sie hören nun die Musikdatei, und zwar einmal. 2 Das Attribut loop gibt an, ob die Musik endlos wiederholt wird (true) oder nur einmal abspielt (false). Setzen Sie das Attribut auf true. Sie hören nun die Tonfolge immer und immer wieder. Das nervt (zumindest bei unserer Eigenkomposition) nach einiger Zeit. 3 Im Attribut hidden können Sie angeben, ob die Audiodatei im Hintergrund abgespielt wird (true) oder ob der Benutzer eine Steuerkonsole angezeigt bekommt (false). Setzen Sie das Attribut auf false. Sie können dann endlich die Wiedergabe stoppen (in folgender Abbildung sehen Sie das Aussehen im Netscape Navigator). Die Steuerungskonsole im Netscape Navigator 220 Audio 4 Zu guter Letzt können Sie noch die Höhe und Breite der Wiedergabekonsole einstellen. Dazu verwenden Sie die Attribute width und height. Wie das Ganze dann aussieht, hängt auch vom installierten Abspielprogramm ab; in folgender Abbildung sehen Sie den RealONE-Player. PROFITIPP Diesmal die Ansicht im Internet Explorer Wenn Sie eine andere Audiodatei einbinden möchten, geben Sie einfach die URL dieser Datei im src-Attribut des <embed>-Tags an! Je nach Anwendung sollten Sie sich genauestens überlegen, ob Sie die Datei automatisch abspielen oder nicht, und ob Sie eine Endlosschleife verwenden oder nicht. Hierzu ein kleines illustratives Beispiel aus dem „wahren Leben“. Eine dezente Erkennungsmelodie kann meinetwegen die Homepage einer Website schmücken, sollte aber – durch das Einblenden der Konsole – jederzeit abstellbar sein. Etwas anderes ist es, wenn beim Laden einer Seite einmalig ein Jingle erklingen soll. Beispielsweise hat das der Filmverleih von „Indiana Jones“ einmal auf einer Website gemacht. Ein knackiges Peitschenschnalzen bot einen gelungenen Einstieg in die Website, erklang aber grücklicherweise nur einmal. 221 Sound und Video einbauen In der nachfolgenden Tabelle haben wir mögliche Szenarien und die dazugehörigen Einstellungen aufgelistet: Szenario autostart hidden loop Einmaliger Jingle true true false Hintergrundmelodie, kann angehalten werden true false true Exemplarische Audiodaten, können auf Knopfdruck abgespielt werden false false false Mögliche Szenarien und dazugehörige Attributswerte Fazit In diesem Abschnitt haben Sie gesehen, wie Sie Audiodaten in Ihre Website einbauen können und welche verschiedenen Möglichkeiten der Wiedergabe es gibt. Aber schlagen Sie unsere Warnungen nicht in den Wind: Audio ist auf Websites recht unüblich. Gegen einen dezenten Einsatz spricht aber wenig. Setzen Sie dieses Mittel ein, aber setzen Sie es bedacht ein. 10.2 Video PROFITIPP Beim Einsatz von Video verhält es sich ähnlich wie beim Einsatz von Audiodaten, mit dem Unterschied, dass Videodaten sehr groß werden können. Sie sollten sich also zweimal überlegen, ob Sie Videodaten auf Ihrer Website wiedergeben wollen. Am besten ist es, Sie lassen dem Benutzer die Wahl, ob er das Video sehen möchte. Bieten Sie ihm einen Link auf die Videodatei an und schreiben Sie die Dateigröße zum Link dazu. Der Benutzer kann dann selbst entscheiden, ob er die Datei herunterladen will oder nicht. Doch nun werfen wir alle Bedenken vorübergehend über Bord und bauen eine Videodatei in die HTML-Seite ein. Das Ganze sieht dann aus wie in Abbildung 10.6. 222 Video Noch bewegt sich nicht viel ... Auf der CD-ROM ... Natürlich haben wir auch dieses Mal wieder eine Datei auf der CD-ROM vorbereitet. 1 2 Rufen Sie auf der CD-ROM das Verzeichnis code\kap10 auf. 3 4 Entfernen Sie den Schreibschutz. 5 Öffnen Sie die HTML-Datei in Ihrem Editor. Kopieren Sie die Dateien video.html und video.avi in Ihr Arbeitsverzeichnis (z.B. c:\werkstatt). Öffnen Sie die Datei in Ihrem Webbrowser. Sie sehen ein künstlerisch anspruchsvolles Video. Formate Auch bei Videos ist wieder die Wahl des Formats entscheidend, da nicht jeder Browser in jeder Version unter jedem Betriebssystem jedes Videoformat versteht. Das meist- 223 Sound und Video einbauen verbreitete Format ist das AVI-Videoformat (Dateiendung: .avi). Insbesondere das neue DivX-Format, mit dem Videodaten besonders klein gemacht werden können, eignet sich nicht für jeden Browser und jedes System. Viele Filmtrailer sind im Quicktime-Format (Informationen und Abspielprogramm unter www.quicktime.apple.com) verfügbar. Auch dieses Format wird nicht immer unterstützt, dazu muss zuerst die spezielle Software installiert worden sein. Davon können Sie aber nicht ausgehen, insbesondere das kostenlose QuicktimeAbspielprogramm ist bei vielen unbeliebt, weil es immer wieder den Benutzer auffordert, die kostenpflichtige, leistungsfähigere Variante zu kaufen. Zu den weiteren Formaten zählen Dateien mit der Endung .wmv, ein Microsoft-Format sowie das Real-Format, meist mit der Dateiendung .ra. Für all diese Formate gilt, dass sie nur beim Vorhandensein der zugehörigen Abspielprogramme vom Browser erkannt werden. Der Windows Media Player beispielsweise ist bei Windows XP automatisch enthalten, bei einigen vorherigen Versionen allerdings nicht. Daraus ergibt sich folgendes Fazit: Setzen Sie auf AVI oder bieten Sie den Film zum Download an. Parameter Wie Sie in der Datei video.html sehen, werden auch Videodaten über das <embed>-Tag eingebunden. Über die Ihnen bereits bekannten Attribute können Sie das Verhalten des Films steuern: 224 1 Durch autostart="false" startet der Film nicht automatisch beim Laden der HTML-Seite. Setzen Sie also dieses Attribut auf "true". 2 Der Film hält nach dem erstmaligen Durchlauf an. „Schuld“ daran ist loop="false". Setzen Sie dieses Attribut auf "true", um eine Endlosschleife zu erhalten. 3 Mit width und height können Sie die Breite und Höhe des Anzeigebereichs angeben (siehe Abbildung 10.8). Diese Parameter sind für den Netscape Navigator übrigens Pflicht! Video Der Anzeigebereich wurde mit width und height größer gemacht. PROFITIPP Das war auch schon alles. Sie sehen also, der Einbau von Videodaten ist gar nicht schwer. Wenn Sie nun Ihre Home-Videos im Web veröffentlichen möchten, haben Sie nun das nötige Hintergrundwissen. Verwenden Sie dazu einfach das <embed>-Tag. Auch hier wieder der Hinweis, dass Sie natürlich auch andere Videos einbinden dürfen. Setzen Sie einfach das src-Attribut des <embed>-Tags dementsprechend. 225 Sound und Video einbauen Fazit VORSICHT! Die Erstellung eines Videos kann sich relativ schwierig gestalten, denn neben technischen Hindernissen müssen auch noch ordentliche Motive gefunden werden. Sobald das aber geschehen ist, kann das Video flugs auf die Website übertragen werden. In diesem Kapitel haben Sie gesehen, wie dies mit wenigen Schritten möglich ist. 226 Eine Warnung noch zum Schluss: Wenn Sie andere Personen filmen und das Video veröffentlichen möchten, holen Sie unbedingt die Erlaubnis der gefilmten Personen ein, bevor Sie das Video ins Web stellen! 11.0 Browserunterscheidung Eine der wichtigsten Aufgaben eines guten Webdesigners besteht darin, browserübergreifend zu programmieren. Es ist auch gleichzeitig eine der schwierigsten Aufgaben, da die jeweiligen Browser nicht alle Standards unterstützen, spezielle Funktionen bieten und spezielle Problemfelder haben. Diesen Problemen versucht man bei schwierigeren Fällen entgegenzuwirken, indem man mit JavaScript die verschiedenen Browser voneinander unterscheidet und für unterschiedliche Browser eigenen Varianten eines Skripts oder einer HTML-Seite anlegt. In diesem Kapitel liefern wir als erstes Arbeitsbeispiel eine Datei, die die Daten des Browsers ausliest und zurückliefert. Außerdem geben wir Ihnen eine vorgefertigte Browserunterscheidung vor, erläutern Ihnen kurz, wie diese funktioniert und zeigen Ihnen dann, wie Sie sie auf Ihre Bedürfnisse anpassen können. Natürlich erfahren Sie auch, welche Einschränkungen das Auslesen des Browsers hat. 11.1 Auf der CD-ROM ... Zuerst benötigen Sie natürlich die Datei. Wie gewohnt holen Sie sich diese von der CD-ROM zu Buch: 1 2 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap11. Kopieren Sie die Datei browser_ausgabe.html in das Arbeitsverzeichnis auf die Festplatte (z.B. c:\werkstatt). Browserunterscheidung 3 Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie diese bearbeiten können. 4 Öffnen Sie die Datei in Ihrem Browser. Der Browser wird korrekt ausgegeben. Sie sehen, dass insgesamt vier Informationen von dem Skript ausgegeben werden: ■ appName – Name der Anwendung. In unserem Beispiel Microsoft Internet Explorer. ■ userAgent – Name und Version der Nutzerschnittstelle. In unserem Beispiel inklusive Betriebssystem. ■ appVersion – gibt die Versionsnummer des Browsers an. ■ platform – liefert das Betriebssystem bzw. mit Win32 die Basis des Betriebssystems. Wenn Sie die Datei browser_ausgabe.html in Ihrem Editor öffnen, erkennen Sie außerdem, dass die vier hier beschriebenen Informationen dort per JavaScript abgefragt werden. Dazu wird zuerst das Objekt navigator benötigt. Es gibt an, dass nach dem Browser gefragt wird, anschließend kommt die gewünschte Information. Die vier Informationen werden dann in vier Variablen gespeichert. 228 Auf der CD-ROM ... Die Informationen werden mittels JavaScript in vier Variablen gespeichert... Anschließend werden sie mit dem Befehl document.write() ausgegeben. PROFITIPP ...und mit document.write() ausgegeben. Eine Ausnahme bildet Opera. Bei diesem Browser können Sie mit dem Menübefehl Datei/Einstellungen/Verbindungen/Browser-Identifikation bzw. in der englischen Version File/Preferences/Connections/Browser identification festlegen, als welcher Browser er sich identifiziert. Im Opera 6 finden Sie diese Einstellung unter File/Preferences/Network/ Browser identification. Die Standardeinstellung für Opera 6 ist Internet Explorer 5. 229 Browserunterscheidung Opera versteckt sich selbst. 11.2 Netscape 4.x unterscheiden – auf der CD-ROM ... Oftmals wollen Sie gar nicht genau wissen, um welchen Browser es sich handelt. Ihnen reicht vielmehr eine Unterscheidung, ob es sich um den, oftmals schwierigen Netscape Navigator 4.x oder um eine andere Browserversion handelt. In diesem Fall hilft Ihnen das folgende Skript weiter: 230 1 2 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap11. 3 Entfernen Sie den Schreibschutz von der Datei (siehe Einleitungskapitel), damit Sie diese bearbeiten können. 4 5 Öffnen Sie die Datei in Ihrem Browser. Kopieren Sie die Datei netscape4x.html in das Arbeitsverzeichnis auf die Festplatte (z.B. c:\werkstatt). Anschließend öffnen Sie die Datei im Editor. Netscape 4.x unterscheiden – auf der CD-ROM ... Wenn Sie einen anderen Browser als den Netscape Navigator 4.x verwenden, wird der Text „Anderer Browser“ ausgegeben. Erwischt... Wie funktioniert das? In dem JavaScript-Code wird einfach überprüft, ob das Objekt document.layers von dem Browser unterstützt wird. Dieses Objekt unterstützt aber nur der Netscape Navigator 4.x. Wird also zurückgeliefert, dass dieses Objekt unterstützt wird, handelt es sich zwangsläufig um einen Navigator 4.x. Natürlich soll eine Browserunterscheidung nicht dazu dienen, auszugeben, welcher Browser vorliegt. Ziel ist es, auf unterschiedliche Versionen einer Seite zu verweisen. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie statt der Textausgabe zwei verschiedene HTML-Dateien in dem Fenster mit dem Code zur Browserunterscheidung aufrufen. Die eine Datei für Netscape 4.x, die andere für alle anderen Browser. 1 Wenn Sie die Datei netscape4x.html in Ihrem Editor geöffnet haben, sehen Sie zuerst eine Fallunterscheidung in der Form „Wenn die Bedingung eintritt, tue dies“. Das „tue dies“ ist in unserem Fall eine Textausgabe (document.write()). Wenn der Browser das Objekt document.layers unterstützt, ist er ein Navigator 4.x und mit der markierten Anweisung wird Text ausgegeben. 231 Browserunterscheidung 2 Wir ersetzen nun die Angabe zur Textausweisung durch die Angabe, eine neue Datei in dem Fenster zu öffnen: window.location.href="nn4seite.html"; In unserem Beispiel wird eine Seite mit dem Namen nn4seite.html geöffnet. Für den Netscape Navigator 4.x wird eine eigene Seite geöffnet. 3 Nun muss noch in der else-Anweisung angegeben werden, dass für alle anderen Browser eine andere Seite geöffnet wird. Hier müssen wir nur die obige Codezeile ein wenig abwandeln: window.location.href="andbrow.html"; Nun wird eine Seite mit dem Namen andbrow.html geöffnet. Auch für die anderen Browser wird eine eigene Datei geöffnet. 232 AUF DER CD-ROM Browserunterscheidung – auf der CD-ROM ... Wenn Sie nun noch die beiden Seiten nn4seite.html und andbrow.html anlegen, können Sie fleißig testen. Auf der CD-ROM finden Sie unter code/ kap11 die entsprechende Testversion. Die Seitennamen sind natürlich willkürlich gewählt und können jederzeit verändert werden. Achten Sie nur darauf, dass die Dateien im Skript genauso heißen, wie im Original. Neben diesen beiden Dateien finden Sie auf der CD-ROM zusätzlich die fertige Version des Skripts mit dem Namen netscape4x_ variante.html. Im Netscape 4.7 wird die spezielle NN4.x-Seite geöffnet. 11.3 Browserunterscheidung – auf der CD-ROM ... Die Browserunterscheidung im letzten Abschnitt kannte nur zwei mögliche Fälle: Netscape 4.x oder nicht Netscape 4.x. In diesem Kapitel geben wir Ihnen eine erweiterte Browserunterscheidung an die Hand. Sie unterscheidet vier Fälle: ■ Netscape 4.x ■ Internet Explorer 4 ■ Netscape 6 PROFITIPP ■ Internet Explorer 5 und höher Man könnte die Browserunterscheidung natürlich noch weiter treiben und jeden Browser berücksichtigen. In der Praxis gibt es dafür zwei Hinderungsgründe: Zum einen ist es schlichtweg zu kompliziert und aufwändig, jeden bekannten Browser zu unterscheiden und ein Dutzend Versionen Webseiten zu basteln, zum anderen kommen immer wieder neue Browser hinzu, die die bisherige Browserunterscheidung zum veralten lassen. Sollten Sie sich für sehr detaillierte Browserunterscheidungen interessieren, empfehlen wir Ihnen, einen Blick auf Sniffer zu werfen, eine sehr detaillierte Browserunterscheidung,: http:// www.mozilla.org/docs/web-developer/sniffer/browser_type.html 233 Browserunterscheidung Bevor wir Ihnen zeigen, wie Sie die hier vorgestellte Browserunterscheidung verändern, müssen Sie zuerst die Datei von der CD-ROM kopieren: 1 2 Wechseln Sie auf der CD-ROM in den Ordner code\kap11. 3 Entfernen Sie den Schreibschutz der Datei (siehe Einleitung), damit Sie sie bearbeiten können. 4 5 Öffnen Sie die Datei zum Testen im Browser. Kopieren Sie browserunterscheidung.html in das Arbeitsverzeichnis auf die Festplatte (z.B. c:\werkstatt). Zum Schluss öffnen Sie sie in einem Editor. Wir haben die Seite im Internet Explorer 6 geöffnet. Ergebnis war die korrekte Meldung Internet Explorer 5+ (5 oder höher). Der Internet Explorer gibt sich korrekt zu erkennen. Im Folgenden zeigen wir Ihnen wieder, wie Sie das Skript auf Ihre Bedürfnisse anpassen und statt der Textausgabe eine eigene Datei hinterlegen: 1 Die Textausgaben erkennen Sie immer an der document.write()-Anweisung. Wir haben der Übersicht halber gleich in diese Anweisung geschrieben, um welchen Browser es sich handelt. Für den Netscape Navigator 4.x müssen Sie also nur nach einer document.write()-Anweisung mit dem Text Netscape 4.x suchen und sie durch den Aufruf der Navigator 4.x-spezifischen Seite ersetzen. Dieser Aufruf funktioniert wie im letzten Abschnitt schon vorgestellt: window.location.href="nn4seite.html"; 234 Browserunterscheidung – auf der CD-ROM ... Die Seite für den Navigator 4.x wird aufgerufen. 2 Als Nächstes folgt der Aufruf der Seite für den Netscape Navigator 6. Hier ist die document.write()-Anweisung etwas versteckt innerhalb einer zweiten Fallunterscheidung (dem zweiten if). Die bisherige Textausgabe für Netscape 6 ist etwas versteckt. 3 Ersetzen Sie nun die Textausgabe für Netscape 6 durch Aufruf der Netscape 6Seite. window.location.href="nn6seite.html"; Netscape 6 bekommt auch eine eigene Seite. 235 Browserunterscheidung 4 Unter Netscape 6 findet sich gleich die document.write()-Anweisung für den Internet Explorer 5 und höher. Auch hier wird statt der Textausgabe der Verweis auf eine Datei eingefügt: window.location.href="ie56seite.html"; Die eigene Seite für den Internet Explorer 5 und höher 5 Zum Schluss ist der Internet Explorer 4 an der Reihe. Hier wird die document.write()-Anweisung durch folgenden Code ersetzt: window.location.href="ie4seite.html"; AUF DER CD-ROM Die letzte Seite gilt dem Internet Explorer 4. 236 Das veränderte Skript finden Sie auf der CD-ROM im Ordner code/kap11 unter dem Namen browserunterscheidung_variiert.html. Außerdem haben wir dort vier Testdateien für die einzelnen browserspezifischen Seiten abgelegt, damit Sie überprüfen können, ob die Unterscheidung bei Ihrem Browser funktioniert (was sie hoffentlich tut ). Fazit Die spezielle Seite für Netscape 6 wurde geöffnet. 11.4 Fazit Die Unterschiede der einzelnen Browser können mitunter zwar das Altern des Webdesigners beschleunigen, mit ein wenig JavaScript lassen sich aber zumindest die einzelnen Browsertypen bestimmen und Sie können dementsprechend reagieren. Im nächsten Kapitel werden wir weiter mit JavaScript arbeiten und ein paar praktische Effekte vorstellen. 237 12.0 Mouseover und andere Effekte In diesem Kapitel geht es hauptsächlich darum, ein wenig Spaß zu haben. Hier finden Sie nette Effekte aus der Trickkiste, die zwar für eine Webseite nicht unbedingt notwendig sind, aber ohne die es – gerade für den Gestalter – doch schnell langweilig würde. Der Mouseover-Effekt (auch Rollover oder Hover genannt) ist einer der bekanntesten dieser kleinen Taschenspielertricks. Hier wird eine Grafik durch eine andere vertauscht, wenn der Nutzer mit der Maus darüber fährt. Dies kommt vor allem bei Schaltflächen zum Einsatz. Wegen seiner Bekanntheit und allgemeinen Verbreitung wollen wir gleich mit dem Mouseover-Effekt beginnen. Aber bevor weiteren Spielereien Platz eingeräumt wird, zeigen wir Ihnen einen mehrfachen Mouseover-Effekt,. 12.1 Mouseover – auf der CD-ROM ... Beginnen möchten wir mit einem einfachen Mouseover. Wir zeigen Ihnen zuerst, wie es funktioniert, anschließend geben wir Ihnen eine Einweisung, wie Sie es an Ihre Bedürfnisse anpassen. Wie immer benötigen Sie als Grundlage die Ausgangsdatei: 1 2 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap12. 3 Heben Sie den Schreibschutz der HTML-Datei auf (siehe Einleitungskapitel), um sie verändern zu können. 4 Öffnen Sie die Datei onmouseover.html in Ihrem Lieblingseditor. Kopieren Sie die Datei onmouseover.html und die Bilder button.gif sowie button_om.gif in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). Mouseover und andere Effekte 5 Anschließend öffnen Sie sie mit einem Browser. Im Browser können Sie den Effekt schon sehr gut erkennen. Wenn der Nutzer mit der Maus über das Bild fährt, ändert es sich. Im Folgenden stellen wir Ihnen kurz die wichtigsten Teile des Quellcodes vor, damit Ihnen die Anpassungen leichter fallen: ■ HTML-technisch besteht der Quellcode aus einem Bild (-Tag), das von einem Link umschlossen wird. ■ Das Bild hat mit dem name-Attribut den Namen button erhalten. Dies ist sehr wichtig, da der Mouseover-Effekt das Bild mit diesem Namen aufruft. PROFITIPP ■ Der Mouseover-Effekt selbst steht im -Tag. Hier finden Sie das sogenannte Ereignis onmouseover. Es ist ein Attribut des -Tags. Die Befehle innerhalb des Attributs treten in Kraft, wenn der Nutzer mit der Maus über das Bild fährt. Man könnte die beiden Ereignisse onmouseover und onmouseout theoretisch auch in das -Tag einfügen. Da Mouseover-Effekte aber meist mit Links verwendet werden und die beiden Ereignisse im -Tag auch erst seit Version 6 im Netscape Navigator unterstützt werden, sollten Sie die hier vorgestellte Methode bevorzugen. ■ Der Befehl im onmouseover-Ereignis besagt, dass sich die Bildquelle (src) für das Bild mit dem Namen button ändern soll, und zwar in das Bild button_om.gif. Das onmouseover-Ereignis befiehlt die Änderung der Bildquelle. 240 Mouseover – auf der CD-ROM ... ■ Wenn die Maus das Bild wieder verlässt, tritt das Ereignis onmouseout ein. Es hat ebenfalls ein eigenes Attribut im -Tag. Dort wird als Quelle wieder die ursprüngliche Grafik button.gif angegeben. Im onmouseover-Ereignis wird die Bildquelle wieder auf das Originalbild gewechselt. Die hier beschriebene Anpassung funktioniert natürlich nicht nur mit den hier mitgelieferten, sondern auch mit beliebigen Grafiken. Ersetzen Sie dazu in der folgenden Schritt-für-Schritt-Beschreibung einfach die Grafiknamen und schon haben Sie einen individuellen Mouseover-Effekt. AUF DER CD-ROM Bevor Sie loslegen, benötigen Sie als Grundlage von der CD-ROM noch die zwei Bilder home.gif und home_om.gif. Sie finden beide in dem Ordner code/kap12. PROFITIPP Nun aber genug der Theorie. Im Folgenden wollen wir Ihnen zeigen, wie Sie den hier vorgestellten Code verwenden können, um einen weiteren Button hinzuzufügen. 1 Im ersten Schritt markieren Sie den bisherigen Code für den ersten Button. Anschließend kopieren Sie ihn mit dem Menübefehl Bearbeiten/Kopieren. 241 Mouseover und andere Effekte Der bisherige Code wird markiert und kopiert. 2 Erzeugen Sie nun nach dem -Tag mit (¢) eine Leerzeile und fügen den kopierten Code mit dem Menübefehl Bearbeiten/Einfügen ein. Der Code für den Button wurde eingefügt. 3 Fügen Sie nun noch mit dem -Tag ein paar Leerzeilen zwischen den Buttons ein. Das ist eher Kosmetik, sieht aber einfach besser aus. Ein paar Zeilenabstände lockern das Ganze auf. 4 242 Jetzt müssen Sie die Angaben für den zweiten Button ändern. Als Erstes wenden wir uns dem -Tag zu. Hier muss der neue Name für den Button, also home.gif eingetragen werden. Außerdem muss das name-Attribut geändert werden. Auch wir haben hier home als Namen gewählt. Mouseover – auf der CD-ROM ... Quelle und Name der Grafik wurden geändert. 5 Als Nächstes muss das onmouseover-Ereignis angepasst werden. Hier muss zunächst der Bildname zwischen document. und .src in home geändert werden. Ansonsten würde der andere Button geändert, wenn der Nutzer mit der Maus darüber fährt. Der Bildname im onmouseover-Ereignis wurde geändert. 6 Die zweite Anpassung im onmouseover-Ereignis betrifft die Grafikquelle. Sie muss von button_om.gif auf home_om.gif geändert werden. Die Grafikquelle wurde angepasst. 7 Die letzten zwei Schritte wiederholen sich nun für das onmouseout-Ereignis. Zuerst ändern Sie den Grafiknamen in home. Ohne den Grafiknamen würde nicht die richtige Grafik geändert. 8 Im nächsten Schritt muss noch die Quelldatei home.gif eingetragen werden. Die Quelle für das Bild 243 Mouseover und andere Effekte Wenn Sie das Ergebnis im Browser betrachten, haben Sie schon fast eine komplette Navigationsleiste. Sie können auch mehrere Grafiken auf einmal in einem onmouseoverEreignis ändern. Schreiben Sie dazu einfach die Anweisungen durch Strichpunkte getrennt hintereinander: AUF DER CD-ROM Auf der CD-ROM zum Buch finden Sie die Version mit unseren eben vorgenommenen Änderungen im Verzeichnis code/kap12 unter dem Namen onmouseover_variiert.html. PROFITIPP Der Mouseover-Effekt funktioniert für beide Buttons. onmouseover="document.bild1.src='bild1om.gif'; document.bild2.src='bild2om.gif'" 12.2 Ausgelagertes Mouseover – auf der CD-ROM ... Der im letzten Abschnitt vorgestellte Mouseover-Effekt funktioniert sehr schön, wenn man allerdings sehr viele Mouseover auf einer Seite verwendet, ist es sinnvoll, den Mouseover-Effekt in eine JavaScript-Funktion auszulagern. Wir haben dafür entsprechenden Code vorbereitet: 1 244 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap12. Ausgelagertes Mouseover – auf der CD-ROM ... 2 Kopieren Sie die Datei onmouseover_mehrfach.html und die Bilder button.gif sowie button_om.gif in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). Sollten Sie die Bilder noch aus dem letzten Beispiel haben, müssen sie diese nicht mehr kopieren. 3 Heben Sie den Schreibschutz der HTML-Datei auf (siehe Einleitung), um sie zu verändern. 4 5 Öffnen Sie die Datei onmouseover.html in Ihrem Lieblingseditor. Anschließend öffnen Sie sie mit einem Browser. Der Onmouseover-Effekt im Browser sieht natürlich genauso aus, wie im letzten Abschnitt. Etwas anders ist dagegen die HTML-Datei aufgebaut: ■ Oben in der HTML-Datei finden Sie innerhalb der <script>-Tags ein JavaScript, das den Mouseover-Effekt vornimmt. Es ist unterteilt in zwei Funktionen, eine für Mouseover, und eine für Mouseout. Bei diesen beiden Funktionen ist für Sie hier nur wichtig, wie sie heißen, nämlich omo und omout. ■ Im Körper der HTML-Seite ist vieles altbekannt. Das Bild muss im -Tag natürlich wieder einen Namen bekommen. Außerdem ist es in einen Link eingebunden, der die beiden Ereignisse onmouseover und onmouseout enthält. ■ In den Ereignissen selbst wird allerdings nicht direkt auf eine Bildquelle verwiesen. Vielmehr wird die Funktion omo aufgerufen. An diese Funktion wird in runden Klammern der Name des -Tags und die Bildquelle übergeben. Aus diesen Angaben erstellt die Funktion dann den Rollover-Effekt. In der Funktion omo werden Bildname und Bildquelle angegeben. 245 Mouseover und andere Effekte ■ Dieselben Angaben folgen dann noch einmal für Onmouseout, wobei sich natürlich die Bildquelle unterscheidet. VORSICHT! Die Funktion omout erhält die Angaben über Bildname und Bildquelle für das Ereignis onmouseout. Der Bildname und die Bildquelle müssen immer in einfachen Anführungszeichen stehen! AUF DER CD-ROM Vielleicht wird Ihnen jetzt schon der Vorteil dieser Methode klar. Sie können beliebig viele Bilder definieren und verwenden immer dieselbe Funktion. Sie müssen nur den Bildnamen und die Bildquelle neu übergeben. 1 246 Im Folgenden kopieren wir wieder das Original und verändern dann die Kopie. Dazu benötigen Sie von der CD-ROM aus dem Ordner code/ kap12 die Bilder home.gif und home_om.gif. Wenn Sie sie aus dem vorigen Beispiel schon auf Ihrem Rechner haben, umso besser. Im ersten Schritt müssen Sie wieder den kompletten Code für die erste Schaltfläche kopieren. Ausgelagertes Mouseover – auf der CD-ROM ... Die erste Schaltfläche wurde kopiert. 2 Anschließend ändern Sie den Namen des Bildes zu home und die Bildquelle zu home.gif. Name und Bildquelle des zweiten Buttons 3 Im onmouseover-Ereignis können Sie nun in den runden Klammern hinter der Funktion omo problemlos den Namen der Grafik und die geänderte Bildquelle eintragen. Das onmouseover-Ereignis ist bereits fertig. 4 Als letztes müssen Sie noch auf die selbe Art und Weise Bildname und Bildquelle im onmouseout-Ereignis in der Funktion omout wechseln. 247 Mouseover und andere Effekte AUF DER CD-ROM Auch das onmouseout-Ereignis enthält nun Namen und Bildquelle des neuen Buttons. Den kompletten Code für dieses Beispiel finden Sie auf der CD-ROM zum Buch im Ordner code/kap12 unter dem Namen onmouseover_ mehrfach_variiert.html. 12.3 Das Datum ausgeben – auf der CD-ROM ... Eine häufige Aufgabe auf Webseiten ist die Ausgabe des Tagesdatums. Dies funktioniert mit JavaScript. JavaScript greift auf die Systemuhr des Nutzers zu und das aktuelle Datum wird angezeigt. Die Datumsgewinnung an sich ist mit einigen Fallstricken gepflastert, die Sie hier allerdings umgehen, indem Sie unser Ausgangsskript zur Datumsgewinnung verwenden. 1 2 Kopieren Sie die Datei datum.html in das Arbeitsverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt). 3 Heben Sie den Schreibschutz der HTML-Datei auf (siehe Einleitung), um sie anpassen zu können. 4 5 Öffnen Sie die Datei datum.html in einem Editor. Gehen Sie auf der CD-ROM in das Verzeichnis code\kap12. Anschließend öffnen Sie sie mit einem Browser. Die Ausgabe im Browser zeigt, wie nicht anders zu erwarten, das aktuelle Datum und die Uhrzeit. 248 Das Datum ausgeben – auf der CD-ROM ... Datum und Uhrzeit Wenn Sie nun einen Blick auf die Datei im Editor werfen, bekommen Sie bitte keinen Schreck. Der ganze Code im Kopf der HTML-Seite interessiert uns hier nicht. Nur so viel, er dient dazu, das Datum auszulesen und umzuwandeln. Von Interesse ist der Körper der HTML-Seite. Hier sehen Sie nach der Überschrift einen JavaScript-Teil zwischen <script>-Tags. Dieser Skript-Teil enthält zwei Funktionsaufrufe datum() und uhrzeit(). Die Funktionen befinden sich natürlich in dem großen Skript im Kopf der HTML-Seite und liefern als Ergebnis das aktuelle Datum und die Uhrzeit. AUF DER CD-ROM Wenn Sie das aktuelle Datum und die Uhrzeit in Ihrer Seite verwenden wollen, ist dies ganz einfach. Im Folgenden zeigen wir Ihnen schrittweise, wie es geht. 1 Wir haben auf der CD-ROM im Ordner code/kap12 eine Testdatei hinterlegt, in die Sie das Datum versuchsweise kopieren können. Haben Sie eine eigene Datei, in die Sie das Datum einfügen möchten, funktioniert das natürlich analog. Im ersten Schritt müssen Sie das große Skript im Kopf der HTML-Seite in Ihre Datei oder in die Textdatei kopieren. Dazu markieren Sie es zuerst. Beginn und Ende erkennen Sie sehr einfach an den Tags <script> und . 249 Mouseover und andere Effekte Anfang... ...und Ende des Skripts. 2 3 Kopieren Sie nun das Skript mit dem Menübefehl Bearbeiten/Kopieren. Wechseln Sie in den Editor mit der Datei, in die Sie die Uhrzeit einfügen möchten. In unserem Beispiel ist das datum_einfuegen.html. Kopieren Sie dort den Skriptteil mit dem Menübefehl Bearbeiten/Einfügen in den Kopf der HTML-Seite vor das -Tag. Fügen Sie das Skript in die Zieldatei ein. 250 Das Datum ausgeben – auf der CD-ROM ... 4 Als Nächstes muss der Funktionsaufruf aus dem Körper der HTML-Seite aus der Datei datum.html in die Zieldatei, also datum_einfuegen.html kopiert werden. Markieren Sie dazu in datum.html den Skript-Teil im Körper der HTML-Seite und kopieren ihn mit dem Menübefehl Bearbeiten/Kopieren. Die Funktionsaufrufe müssen ebenfalls markiert und kopiert werden. 5 Wechseln Sie dann in Ihre Zieldatei, in unserem Beispiel ist das datum_einfuegen.html und fügen das Skript an der Stelle ein, an der das Datum erscheinen soll. Wir haben es in den zweiten Absatz eingefügt. Datum und Uhrzeit im zweiten Absatz 6 Nun können Sie den Absatz noch beliebig formatieren. Wir haben zur Veranschaulichung als Schrift Arial und als Farbe Rot gewählt. Der Absatz wird noch ein wenig formatiert. 251 Mouseover und andere Effekte AUF DER CD-ROM Datum und Uhrzeit in einer neuen Datei Auf der CD-ROM zum Buch finden Sie im Ordner code/kap12 die komplette Datei mit dem Namen datum_einfuegen_komplett.html. 12.4 Fazit JavaScript kann eine sehr komplizierte Sprache sein, doch mit ein wenig Vorarbeit lassen sich in kurzer Zeit verblüffende Effekte erzielen. Auch im nächsten Kapitel dreht sich alles weiterhin um JavaScript, wenn wir Formulare auf Vollständigkeit überprüfen. 252 13.0 Formulardaten überprüfen Wir haben Ihnen bereits gezeigt, wie Sie HTML-Formulare erstellen können. Nun ist das mit Formularen so eine Sache. Viele Leute haben eine natürliche Aversion gegenüber Formularen, und reißerische Artikel über Datenschutz und Anonymität im Netz verstärken diesen Effekt noch. Dies ist der falsche Ort, um diese Diskussion erschöpfend zu behandeln. Sinn dieses Exkurses ist jedoch, Ihnen klarzumachen, dass das komplett ausgefüllte Formular eine Wunschvorstellung ist, der nur die wenigsten Benutzer entsprechen werden. Stattdessen werden Sie oft Formulare erhalten, die nicht vollständig ausgefüllt oder gar leer abgeschickt wurden. Mit diesen Daten können Sie interessante Untersuchungen über die Späßchen spätpubertierender Computernutzer erstellen, aber um ehrlich zu sein, sind unvollständige Formulare etwas Ärgerliches. Eines ist klar: Sie können die Benutzer nicht dazu zwingen, ein Formular komplett auszufüllen; zur Not füllt dann eben ein Herr Donald Duck oder eine Frau Minnie Mouse das Formular aus. Bei denjenigen Benutzern, die zwar Angaben machen möchten, aber ein Feld übersehen oder falsch ausgefüllt haben, macht es jedoch Sinn, den Benutzer auf seinen Fehler hinzuweisen. Mit JavaScript lässt sich diese Aufgabe relativ einfach und bequem erledigen. Vor dem Versand der Formulardaten werden mit dieser Skriptsprache die Angaben im Formular überprüft und gegebenenfalls eine Fehlermeldung ausgegeben. Es ist klar, dass JavaScript eine ziemlich komplexe Programmiersprache ist (bzw. sein kann) und dass auch die Aufgabe der Vollständigkeitsüberprüfung von Formularen komplex ist. Ein didaktischer Ansatz besteht darin, schlichtweg ein lauffähiges Programm zu präsentieren. Dies hat jedoch den Nachteil, dass dieses Skript nur für ein bestimmtes Beispielformular funktionieren würde oder dass es – wenn es universal einsetzbar ist – nicht gerade flexibel wäre. Außerdem geht es in diesem Buch ja vor al- Formulardaten überprüfen lem darum, etwas zu lernen. Deswegen gehen wir wie folgt vor: Wir stellen Ihnen im Folgenden eine Reihe von Modulen vor, auf deren Basis Sie leicht eine Vollständigkeitsüberprüfung für Ihr Formular erstellen können. 13.1 Auf der CD-ROM ... Auf der diesem Buch beiliegenden CD-ROM finden Sie einen Formulartorso, den Sie im Folgenden für Ihre eigenen Formulare anpassen werden. Dazu müssen Sie diesen Torso zunächst auf Ihre Festplatte überspielen und anpassen: 1 2 3 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap13. Öffnen Sie die Datei formular-ueberpruefung.html in Ihrem Lieblings-Editor. Öffnen Sie ebenfalls in einem Editor Ihr Formular, das Sie (beispielsweise) in Kapitel 7 erstellt haben. Sie haben nun zwei HTML-Dateien geöffnet. Eine enthält den Rumpf für die Formularüberprüfung, die andere Ihr Formular. Sie müssen nun diese beiden Dateien zusammenwerfen: 1 Finden Sie in der Datei auf der CD-ROM das <script>-Element. Der Beginn des (recht umfangreichen) <script>-Elements 2 254 Kopieren Sie diesen Code über die Zwischenablage in Ihr vorbereitetes Formular, und zwar in den -Abschnitt. Unter Windows/Macintosh geht das über die Menübefehle Bearbeiten/Kopieren und Bearbeiten/Einfügen bzw. Edit/Copy und Auf der CD-ROM ... Edit/Paste. Linux-Anwender markieren den Text, wechseln zu dem Editorfenster mit dem Formular und betätigen dort die mittlere Maustaste. Links die Datei von der CD, rechts die lokale Datei. 3 Im letzten Schritt müssen Sie noch dafür sorgen, dass der JavaScript-Code auch aufgerufen wird, wenn das Formular verschickt werden soll. Kopieren Sie das Attribut onsubmit von dem CD-ROM-Formular in Ihr lokales Formular. Das Attribut onsubmit nebst Wert muss eingeführt werden. Speichern Sie nun Ihr Ergebnis, und laden Sie Ihr lokales Formular in Ihren Webbrowser. Von außen sieht es aus wie zuvor. Aber der sprichwörtliche Teufel steckt hier im Detail. Das Formular enthält nun die Basisfunktionalität einer Vollständigkeitsüberprüfung. Im weiteren Verlauf dieses Kapitels werden wir die Funktionalität vollenden 255 Formulardaten überprüfen und die eigentlichen Überprüfungsfunktionen einbauen. Diese hängen natürlich auch davon ab, welche Felder Sie auf Vollständigkeit überprüfen möchten und von welchem Feldtypen (z.B. Textfeld, Checkbox, Auswahlliste) diese sind. Aus diesem Grund sind noch ein paar Vorüberlegungen vonnöten. 13.2 Pflichtfelder Die bequemste Lösung bei der Konzeption einer Formularvalidierung ist die, dass alle Felder Pflichtfelder sind. Im Web-Einsatz ist das freilich grober Unfug. Nicht jeder Benutzer möchte sein Geburtsdatum, seine Telefonnummer oder sein Bruttojahreseinkommen verraten. Wenn Sie solche Angaben schon unbedingt in Ihrem Formular verlangen, sollten Sie diese nicht als Pflichtfelder konzipieren. Ein anderes Beispiel: Wenn Sie das Formular verwenden, um von den Benutzern eine kurze Rückmeldung über Ihre Website zu erhalten, dann sollten nur der Name des Benutzers sowie seine E-Mail-Adresse (damit Sie antworten können) ein Pflichtfeld sein, nicht aber andere Daten, die Sie aus Interesse abfragen (etwa die Website des Benutzers, sofern vorhanden). Wenn Sie dagegen eine Online-Umfrage machen, haben Sie natürlich ein Interesse daran, dass der Benutzer alle Fragen der Art „Wie gefällt Dir meine Seite?“ beantwortet. Diese Angaben sollten also Pflichtfelder sein. Erstellen Sie also eine Liste von Feldern, die Sie als Pflichtfelder ansetzen. Hier ein paar Vorschläge, die jedoch nur exemplarisch sind; die letztendliche Entscheidung steht und fällt mit der Intention des Formulars und der dahinter liegenden Anwendung, also eine Entscheidung, die wir Ihnen nicht abnehmen können :-). ■ Vorname des Benutzers ■ Nachname des Benutzers ■ Geschlecht (oder Anrede) des Benutzers ■ E-Mail-Adresse des Benutzers ■ Kommentare des Benutzers (mehrzeiliges Textfeld) ■ Umfragewerte (die keine persönlichen Daten beinhalten) VORSICHT! Bei den restlichen Angaben sollten Sie vorsichtig sein und sich vor allem sehr genau überlegen, was Sie mit diesen Angaben bezwecken und ob Sie diese überhaupt benötigen. 256 Ein ganz wichtiger Hinweis, bevor Sie sich daran machen, Pflichtfelder zu überprüfen: Kennzeichnen Sie Pflichtfelder in Ihren Formularen. Eine weit verbreitete Methode ist beispielsweise, die Feldbeschriftung mit einem Sternchen (*) zu versehen und die Bedeutung dieses Sternchens weiter unten noch einmal zu erklären. PROFITIPP Vorüberlegungen Es gibt mittlerweile Bestrebungen, Webmaster zu verpflichten, offen zu legen, welche Daten sie sammeln und wie sie diese verwenden (Stichwort: Weiterverkaufen von Adressdaten). Das System mit vermutlich den größten Zukunftschancen ist P3P. Informationen darüber finden Sie unter www.w3.org/P3P. Stellen Sie sich also darauf ein, in Zukunft zusätzlich Angaben über die Verwendung Ihrer Daten machen zu müssen, oder noch besser – gehen Sie jetzt schon mit gutem Beispiel voran! 13.3 Vorüberlegungen Werfen Sie doch einen Blick auf den Code, den Sie zuvor von der Datei auf der CDROM in Ihr Formular kopiert haben. Dort sind zwei Veränderungen vorgenommen worden. Zunächst wurde ein <script>-Bereich erstellt und in den -Abschnitt der HTML-Datei mit dem Formular kopiert (wir drucken lediglich einen Auszug ab): <script language="JavaScript"> Es wird also eine Funktion namens formularcheck() erstellt. Diese Funktion werden wir im Folgenden erweitern. Beachten Sie, dass eine Variable namens fehlermeldung erstellt wird, in der wir abspeichern werden, welche Felder unvollständig ausgefüllt worden sind (falls überhaupt). Davor brauchen Sie aber keine große Angst zu haben, denn den Großteil der Programmierung haben wir Ihnen bereits abgenommen, Sie müssen lediglich die Anpassungen vornehmen. Außerdem wurde das -Tag des Formulars um ein Attribut erweitert: onsubmit="return formularcheck(this);" Das sind mehrere unbekannte Elemente. Gehen wir der Reihe nach vor: ■ Durch onsubmit wird angezeigt, was passieren soll, wenn ein Formular verschickt wird. ■ Mit formularcheck() wird die Funktion (das Programmstück) aufgerufen, die wir oben zwischen <script> und definiert haben. Das this in den Klammern teilt der Funktion mit, welches Formular geprüft werden soll; in JavaScript bezeichnet this das aktuelle HTML-Element, in diesem Fall also das aktuelle Formular. 257 Formulardaten überprüfen ■ Nun zum eigentlichen Trick. Im Code kommt noch ein return vor, dahinter der Aufruf von formularcheck(). Wenn nun die Funktion formularcheck() mit return false beendet wird, steht ungefähr Folgendes im HTML-Code: onsubmit="return false;" Die Angabe formularcheck(this) wird durch den Rückgabewert der Funktion ersetzt, und return (zurückkehren, zurückgeben) macht genau dies, nämlich einen Rückgabewert festsetzen. Der Gag: Bei return false wird das Formular nicht verschickt! Wenn Sie also in formularcheck() einen Fehler in der Formularausfüllung feststellen, müssen Sie die Funktion einfach mit return false beenden, dann wird das Formular nicht verschickt (und der Benutzer kann seine Fehler korrigieren). 13.4 Formularfelder überprüfen Im Folgenden werden wir also die Funktion formularcheck() mit Inhalt füllen, und dabei je nach Typ des Pflichtfelds anders vorgehen. Fügen Sie diesen Code einfach in Ihren HTML-Code ein, um Ihr Formular mit einer Vollständigkeitsprüfung zu erweitern. Textfelder Um ein Textfeld auf Vollständigkeit zu überprüfen, muss eine Abfrage nach folgendem Schema durchgeführt werden: „Wenn in dem Feld nichts enthalten ist, liegt ein Fehler vor“. Mit ein wenig JavaScript-Code lässt sich das sehr einfach auch so formulieren, dass es der Webbrowser versteht. Gehen Sie schrittweise vor: 1 Identifizieren Sie zunächst das Textfeld, das Sie auf Vollständigkeit überprüfen wollen. Merken Sie sich das name-Attribut dieses Feldes. Ein Textelement – merken Sie sich das name-Attribut! 258 Formularfelder überprüfen 2 Fügen Sie dann in den JavaScript-Bereich den im Folgenden gezeigten Code ein. Fügen Sie diesen Code dabei in die Zeile vor der schließenden geschlossenen Klammer (})ein: Diesen Code müssen Sie einfügen. 3 Ersetzen Sie in dem Code NAME durch das name-Attribut des zugehörigen Formularfelds, und FEHLER durch die Fehlermeldung, falls das Formularfeld nicht ausgefüllt worden ist (beispielsweise: „Das Feld für die E-Mail-Adresse ist leer!“). Eine mögliche Beispielsausfüllung – beachten Sie, dass der Editor umbricht! Und das war's! Das Formularfeld wird nun auf Vollständigkeit überprüft, nun ja, fast, ein paar Schritte sind dazu noch nötig, im Verlauf des Kapitels finden Sie mehr dazu. Bevor wir uns nun aber den anderen Formularelementtypen zuwenden, wollen wir noch einen Blick darauf werfen, was Sie zuvor in Ihren Code eingebunden haben. Dieser besteht nur aus einer Zeile: formularcheck_feld(f, "NAME", "FEHLER"); 259 Formulardaten überprüfen Dies heißt im Klartext Folgendes: Ein weiteres Stück JavaScript-Code wird aufgerufen. Sie brauchen sich hier nicht um die Hintergründe zu kümmern, denn diesen Code haben wir bereits für Sie erstellt, Sie müssen diesen Code lediglich korrekt einsetzen. VORSICHT! Was passiert, ist dies: Wenn das Formularelement, das die Bezeichnung NAME trägt, keinen Inhalt hat, wird eine Fehlermeldung vorgesehen. Diese Fehlermeldung (hier mit FEHLER vorbelegt) müssen Sie angeben. Achten Sie darauf, dass Sie innerhalb der Fehlermeldung keine Zeilensprünge oder Anführungszeichen verwenden. Falls das doch unbedingt erforderlich sein sollte: Anstelle eines Zeilensprungs verwenden Sie \n, und ein Anführungszeichen ersetzen Sie durch \", stellen also de facto einen Backslash voran. Passwortfelder Wie Sie ja wissen, sind Passwortfelder im Großen und Ganzen nichts anderes als ein normales Textfeld, mit dem einzigen Unterschied, dass in einem Passwortfeld bei der Eingabe nur Sternchen zu sehen sind. Aus diesem Grund lässt sich die Vollständigkeitsüberprüfung relativ einfach handhaben, sie läuft analog zu der Überprüfung von „normalen“ Textfeldern ab: 1 Suchen Sie das zu überprüfende Passwortfeld und merken Sie sich den Wert des name-Attributs. 2 Fügen Sie den folgenden Code vor der schließenden geschweiften Klammer der Funktion formularcheck() ein: formularcheck_feld(f, "NAME", "FEHLER"); 3 Ersetzen Sie in obigem Code das NAME durch das name-Attribut des Passwortfelds und FEHLER durch die gewünschte Fehlermeldung, z.B. Sie haben kein Passwort angegeben!. Rekapitulieren wir: Ihre Funktion formularcheck() sieht nun ungefähr folgendermaßen aus: function formularcheck(f) { formularcheck_feld(f, "Benutzername", "Bitte suchen Sie sich einen Benutzernamen aus!"); formularcheck_feld(f, 260 Formularfelder überprüfen "Passwort", "Aus Sicherheitsgründen müssen Sie ein Passwort angeben!");} Sie sehen hier zwei Möglichkeiten, den Code etwas hübscher zu gestalten: PROFITIPP ■ Sie können jede Zeile durch ein paar Leerzeichen einrücken. ■ Sie können nach jedem Komma einen Zeilensprung einfügen. Sie müssen lediglich darauf achten, dass Sie innerhalb einer Zeichenkette keine Zeilensprünge einfügen. Folgendes führt also zu einer JavaScript-Fehlermeldung: formularcheck_feld(f, "Passwort", "Aus Sicherheitsgründen müssen Sie ein Passwort angeben!"); Pull-down-Menüs PROFITIPP Wann ist ein Pull-down-Menü nicht „korrekt ausgefüllt“? Normalerweise ist das nicht möglich, weil immer ein Element gerade ausgewählt ist, beim erstmaligen Laden des Dokuments beispielsweise in der Regel das oberste Element. Nur deswegen „in der Regel“, weil Sie durch die Angabe des Attributs selected auch andere Elemente vorauswählen können. In der Regel sieht es aber so aus, dass das oberste Element eines Pull-down-Menüs eigentlich kein Element ist, sondern einen Hinweistext à la „Bitte wählen Sie“ ist. In der Abbildung sehen Sie ein reales Beispiel aus dem Web. 261 Formulardaten überprüfen Zweimal „Bitte wählen“ (hervorgehoben) Mit wenigen Schritten können Sie nun Ihre Formularabfrage auch für Pull-down-Menüs erweitern. 1 Suchen Sie in Ihrem Formular das gewünschte Auswahlmenü und merken Sie sich das name-Attribut. Das zu prüfende Pull-down-Menü; name-Attribut merken! 262 Formularfelder überprüfen 2 Des Weiteren müssen Sie sicherstellen, dass das value-Attribut des „ungültigen“ Elements entweder auf eine leere Zeichenkette ("") oder auf ein Doppelkreuz ("#") gesetzt ist. Als value-Attribut entweder "" oder "#"! 3 Fügen Sie nun nach dem Muster von oben die Anweisung formularcheck_feld(f, "NAME", "FEHLER"); in die Funktion formularcheck() ein. Diese Zeile muss vor}eingefügt werden. 4 Ersetzen Sie abschließend wie gewohnt NAME durch das name-Attribut Ihrer Auswahlliste, FEHLER durch eine entsprechende Fehlermeldung. 263 Formulardaten überprüfen Eine mögliche Fehlermeldung, wenn kein Tag angegeben wird. Diese Abfrage funktioniert auch, wenn Sie eine mehrzeilige Auswahlliste verwenden (<select size="...">) und dort gar kein Element ausgewählt worden ist. Radiobuttons PROFITIPP Radiobuttons haben für den Programmierer einen recht großen Nachteil: Sobald ein Radiobutton aus einer Gruppe markiert worden ist, kann der Benutzer die Markierung nicht mehr aus der Gruppe entfernen. Zwar kann jederzeit ein anderer Radiobutton aus der Gruppe markiert werden, der Ausgangszustand, bei dem überhaupt kein Element der Gruppe markiert worden ist, lässt sich dann aber nicht mehr herstellen – außer vielleicht durch ein Neuladen des Dokuments. Sie können sich das natürlich zunutze machen und immer ein Element einer Gruppe aus Radiobuttons vormarkieren: Durch das Attribut checked wird der Radiobutton vorausgewählt. Der Einbau der Überprüfung, ob eine Gruppe tatsächlich ausgefüllt worden ist, gestaltet sich nun sehr einfach, analog zu den anderen Formularelementtypen. 264 1 Ermitteln Sie das name-Attribut der Gruppe von Radiobuttons, die Sie auf Ausfüllung überprüfen möchten. 2 Fügen Sie die folgende Zeile in die Funktion formularcheck() ein: formularcheck_feld(f, "NAME", "FEHLER"); Formularfelder überprüfen 3 Ersetzen Sie NAME durch das name-Attribut Ihres Formularfeldes, FEHLER durch die zugehörige Fehlermeldung. Checkboxen Auf den ersten Blick scheint es keinen Sinn zu machen, für Checkboxen eine Vollständigkeitsüberprüfung zu machen, da jede Checkbox für sich alleine steht. Es gibt aber Anwendungsgebiete, bei denen Sie unbedingt sicherstellen möchten, dass eine Checkbox angekreuzt worden ist. In der Abbildung ein Beispiel aus dem Web: Durch das Ankreuzen einer Checkbox erkennt der Benutzer die Allgemeinen Geschäftsbedingungen (im Beispiel: die Nutzungsbedingungen) des Anbieters an. Ohne Ankreuzen der Checkbox geht es hier nicht weiter. In HTML ist das relativ einfach umzusetzen: Beim Abschicken dieses Formulars wollen Sie natürlich sicherstellen, dass der Benutzer die Allgemeinen Geschäftsbedingungen auch wirklich akzeptiert; mit JavaScript ist das kein Problem. Sie können mit der Vollständigkeitsüberprüfung nur einzelne Checkboxen überprüfen. Sie müssen also für jede Checkbox eine eigene Abfrage im JavaScript-Code unterbringen. Wie das geht, erfahren Sie im Folgenden: 265 Formulardaten überprüfen 1 2 Ermitteln Sie das name-Attribut der Checkbox, die Sie überprüfen möchten. Fügen Sie in die Funktion formularcheck() folgende Anweisung ein – direkt vor der schließenden Klammer, in einer neuen Zeile: formularcheck_feld(f, "NAME", "FEHLER"); 3 Ersetzen Sie NAME durch das name-Attribut der Checkbox, FEHLER durch die Fehlermeldung die ausgegeben werden soll, wenn die Checkbox beim Formularversand nicht ausgefüllt worden ist. Die Anweisung kann dann beispielsweise folgendermaßen aussehen: formularcheck_feld(f, "AGB", "Ohne Anerkennung der AGB keine Bestellung!"); Mehrzeilige Textfelder Auch bei mehrzeiligen Textfeldern lässt sich mit verhältnismäßig wenig Aufwand eine Vollständigkeitsüberprüfung einrichten. In der Praxis findet das allerdings relativ selten statt. Mehrzeilige Textfelder dienen meistens als Freitextfelder, in die der Benutzer allgemeine Kommentare eingeben darf. Diese Anmerkungen sind aber in den seltensten Fällen obligatorisch, sondern zumeist optional. Wenn Sie aber dennoch ein mehrzeiliges Textfeld überprüfen möchten, gehen Sie wie gehabt vor: 1 2 Suchen Sie im HTML-Code den Wert des name-Attributs des Textfeldes heraus. Fügen Sie in die Funktion formularcheck() folgende Anweisung ein, in einer neuen Zeile vor der schließenden geschweiften Klammer (}): formularcheck_feld(f, "NAME", "FEHLER"); Ersetzen Sie NAME durch das name-Attribut des Textfeldes und FEHLER durch die dazugehörige Fehlermeldung für die Nichtausfüllung. VORSICHT! 3 266 Damit das Ganze auch funktioniert, müssen Sie dafür sorgen, dass das Textfeld zumindest am Anfang vollkommen leer ist. Dazu dürfen Sie zwischen und nichts setzen, also auch keine Leerzeichen oder Zeilensprünge! Überprüfung fertigstellen 13.5 Überprüfung fertigstellen Damit die Vollständigkeitsüberprüfung auch funktioniert, müssen Sie einen letzten Schritt vornehmen und die Funktion formularcheck() um eine letzte Anweisung erweitern. return fehler(f); Auch diese Anweisung gehört in eine neue Zeile, vor die schließende geschweifte Klammer am Ende der Funktion formularcheck(). Damit sieht die Funktion ungefähr folgendermaßen aus: function formularcheck(f) { formularcheck_feld(f, "Benutzername", "Bitte suchen Sie sich einen Benutzernamen aus!"); formularcheck_feld(f, "Passwort", "Aus Sicherheitsgründen müssen Sie ein Passwort angeben!"); formularcheck_feld(f, "AGB", "Ohne Annahme der AGB keine Bestellung!"); formularcheck_feld(f, "Geschlecht", "Sie werden doch wohl wissen, ob Sie männlich oder weiblich sind?!"); return fehler(f); } Durch den Einbau der neuen Anweisung wird überprüft, ob das Formular auch wirklich vollständig ausgefüllt worden ist. Falls ja, wird es wie gewohnt verschickt. Falls nein, wird eine Fehlermeldung ausgegeben, und zwar alle zutreffenden Fehlermeldungen, die Sie zuvor angegeben haben. Außerdem wird der Fokus auf das erste Formularelement gesetzt, das nicht ausgefüllt worden ist. Für den Benutzer stellt sich das so dar, dass beispielsweise bei Textfeldern der Cursor in dem ersten nicht ausgefüllten Textfeld steht und der Benutzer direkt seine Angaben machen kann, ohne erst das Feld suchen zu müssen. Laden Sie nun das HTML-Formular in Ihren Browser und füllen Sie es aus – aber nicht jedes der Pflichtfelder. Versuchen Sie nun, das Formular abzuschicken. Sie dürfen nun eine Fehlermeldung erhalten. Sobald die Fehler korrigiert worden sind (also alle fehlenden Felder mit Angaben gefüllt wurden), funktioniert auch der Formularversand. 267 Formulardaten überprüfen PROFITIPP Ein fast leeres Formular, eine lange Fehlermeldung Die Fehlermeldung wird durch den Text „Beim Überprüfen des Formulars sind folgende Fehler festgestellt worden:“ eingeleitet. Wenn Sie diesen Text ersetzen möchten, suchen Sie in Ihrem HTML-Dokument nach der JavaScript-Funktion fehler() und dort nach obigem Text. Setzen Sie stattdessen zwischen die Anführungszeichen Ihren eigenen Text ein Geben Sie hier einen eigenen Text an – ohne Umbruch. 268 AUF DER CD-ROM Fehlerbehandlung Auf der CD-ROM zum Buch finden Sie in der Datei formular-beispiel.html ein exemplarisches HTML-Formular samt zugehöriger Vollständigkeitsüberprüfung (alle Felder sind Pflichtfelder). 13.6 Fehlerbehandlung Es ist natürlich prinzipiell schwierig, ein allgemeines Skript zu schreiben, das bei allen möglichen Browserkonfigurationen und bei allen möglichen HTML-Formularen funktioniert. Wir haben uns dennoch viel Mühe gegeben, Fehler von vornherein möglichst auszuschließen. Wenn etwas doch nicht so funktioniert, wie es soll, gehen Sie folgendermaßen vor: 1 Sehen Sie nach, ob nicht etwa zwei verschiedene Formularelemente dasselbe name-Attribut haben (Ausnahme: Radiobuttons aus derselben Gruppe, dort muss das ja so sein). Falls Sie fündig werden, sorgen Sie für eindeutige Bezeichnungen. Fehler: Zweimal gleiches name-Attribut 2 Überprüfen Sie, ob Sie beim Abtippen der einzelnen Fragmente für die Funktion formularcheck() auch wirklich keinen Fehler gemacht haben (beispielsweise fehlende oder zu viele Anführungszeichen, Zeilensprünge inmitten eines Wortes, Tippfehler in dem Bezeichner eines Formularelements usw.). Falls ja, beheben Sie dies. 269 Formulardaten überprüfen Fehler hier: Hinter leer! fehlen die Anführungszeichen. 3 Haben Sie daran gedacht, den letzten Schritt bei der Formularanpassung durchzuführen, also die Anweisung return fehler(f); mit einzufügen? Ohne diese Anweisung wird das Formular ohne Prüfung verschickt. AUF DER CD-ROM Dazwischen fehlt doch noch etwas?! 270 Sollten Sie immer noch auf Probleme stoßen, finden Sie auf der CDROM zum Buch unter dem Dateinamen formular-beispiel.html eine funktionierende Beispieldatei. E-Mail-Adressen überprüfen 13.7 E-Mail-Adressen überprüfen Bei E-Mail-Feldern kommt es nicht nur darauf an, dass sie überhaupt ausgefüllt worden sind, sondern auch, dass dort eine gültige E-Mail-Adresse angegeben ist. Sie glauben gar nicht, wie viele Kunden eines bestimmten Online-Dienstes als E-Mail-Adresse benutzername angeben (anstelle von [email protected]) ... Um dies zu implementieren, befolgen Sie einfach die folgenden Schritte: 1 Suchen Sie in Ihrem HTML-Code das E-Mail-Feld und merken Sie sich dessen name-Attribut. 2 Fügen Sie die folgende Zeile in die Funktion formularcheck() ein – aber vor der Zeile mit return fehler(): formularcheck_email(f, "NAME", "FEHLER"); 3 Ersetzen Sie NAME durch das name-Attribut des E-Mail-Felds und FEHLER durch die dazugehörige Fehlermeldung. Die Anweisung sieht dann ungefähr folgendermaßen aus: formularcheck_email(f, "Email", "Die angegebene E-Mail-Adresse ist ungültig!"); Die notwendige Funktionalität – Überprüfung auf eine gültige E-Mail-Adresse – ist in den mitgelieferten Funktionen, die sich im <script>-Teil der HTML-Seite befinden, dabei. Wir nehmen dabei eine sehr einfache Überprüfung vor und testen lediglich, ob sich in der angegebenen Adresse ein Klammeraffe (@) befindet. Falls ja, ist die Adresse gültig (in den meisten Fällen zumindest), falls nein, ist sie sicherlich ungültig und eine Fehlermeldung wird ausgegeben. 271 Formulardaten überprüfen Eine Fehlermeldung bei einer ungültigen E-Mail-Adresse. 13.8 Alternative: serverseitige Überprüfung Wenn Sie – wie im ersten Formularkapitel bereits deutlich gemacht – die Formulardaten nicht per action="mailto:..." verschicken, sondern über einen speziellen Anbieter wie etwa dem zuvor bereits einmal vorgestellten FormMailer (www.formmailer.com). Einige dieser Dienste bieten auch die Möglichkeit an, die Ausfüllung von Pflichtfeldern zu überprüfen. Wir können hier natürlich nicht alle verfügbaren Dienste berücksichtigen, wollen aber aufzeigen, wie das bei FormMailer funktioniert. Wenn Sie sich für einen anderen Dienst entscheiden – wie gesagt, die Verwendung von FormMailer in diesem Buch stellt ja keine Empfehlung oder Bevorzugung dar – müssen Sie sich an die Hinweise Ihres Anbieters halten. 1 272 Erstellen Sie zunächst eine Fehlerseite, die erscheinen soll, wenn ein Pflichtfeld übersehen worden ist. Alternative: serverseitige Überprüfung Die exemplarische Fehlerseite 2 Rufen Sie im Webbrowser www.formmailer.com auf und loggen Sie sich über einen Klick auf Zugang für Benutzer mit Formmailer-Konto in das System ein. Sie müssen hier Ihre Benutzerdaten eingeben. 3 Klicken Sie sich über Formular konfigurieren, der Formularauswahl und Ergebnisseiten zur Eingabemaske für die Fehlerseite durch. Geben Sie dort die URL der Fehlerseite (also die Adresse auf dem Webserver) an und bestätigen Sie mit Änderungen durchführen. 273 Formulardaten überprüfen Geben Sie hier die URL der Fehlerseite ein. 4 Rufen Sie über den Eintrag Felder in der Navigation in der linken Spalte die Eingabemaske für die Pflichtfelder auf. Die Eingabemaske für Pflichtfelder 5 274 Geben Sie nun das name-Attribut des Feldes unter Feldname an. Bei Benötigt? können Sie mit dem Eintrag Ja ein Feld zum Pflichtfeld machen. Im Pull-down- Fazit Menü Fehlerseite geben Sie die Seite an, auf die der Benutzer weitergeleitet wird, wenn das Feld nicht vorausgefüllt worden ist. Führen Sie die beschriebenen Eingaben durch. Bestätigen Sie Ihre Eingaben durch Klick auf Änderungen durchführen. Wiederholen Sie diese Schritte, bis Sie alle Pflichtfelder angegeben haben. Natürlich können wir an dieser Stelle nicht alle Möglichkeiten von FormMailer vorstellen, unter anderem auch deswegen nicht, weil sicher nicht jeder Nutzer FormMailer einsetzen wird. Für weitergehende Informationen und auch Hilfestellungen bei Problemen verweisen wir deswegen auf den Supportbereich von FormMailer. 13.9 Fazit In diesem Kapitel haben Sie gesehen, wie Sie mit relativ wenig Aufwand für Ihre Formulare eine Vollständigkeitsüberprüfung erstellen können. Wiegen Sie sich aber nicht in Sicherheit, denn wer ein Formular nicht vollständig ausfüllen will, kann dies auf zweierlei Weise tun: ■ Er kann Phantasieangaben machen, Donald Duck und Minnie Mouse lassen grüßen. 275 Formulardaten überprüfen ■ Er deaktiviert JavaScript in seinem Browser, dann wird die Überprüfung nicht durchgeführt. Sie können dem aber durch FormMailer o.Ä. unter Umständen begegnen. Den größten Erfolg haben Sie jedoch, wenn Sie im Formular nur wirklich notwendige Angaben verlangen und dem Benutzer auch klarmachen, wozu Sie diese Angaben überhaupt benötigen. Wenn Sie das erreichen können, dienen Ihre JavaScript-Überprüfungen nur noch dazu, den Benutzer auf Fehler hinzuweisen, und nicht mehr dazu, ihn zu nötigen, die benötigten Angaben zu machen. 276 14.0Navigation Eine Webseite steht meist nicht für sich alleine. Vielmehr ist sie mit einer großen Zahl anderer Seiten verlinkt. Dies ergibt dann eine Website. Aber natürlich gibt es auch Links, die auf Seiten außerhalb dieser Website führen. Unter Navigation kann man alles verstehen, was das Navigieren innerhalb und nach außen ermöglicht. In diesem Kapitel haben wir interessante Anwendungsbeispiele zusammengetragen und zeigen Ihnen, wie Sie diese auf Ihre Bedürfnisse anpassen können. 14.1 Neues Fenster öffnen – auf der CD-ROM ... Eine der häufigsten Aufgaben vor allem beim Verweis auf Webseiten, die außerhalb Ihrer eigenen Website liegen, ist das Öffnen einer Datei in einem neuen Fenster. Am einfachsten geht dies, indem man im -Tag für das target-Attribut einen neuen Fensternamen vergibt (siehe Kapitel 3 „Bilder und Links“). Diese Methode gibt Ihnen allerdings keinerlei Kontrolle über Aussehen und Größe des neuen Fensters. In diesem Abschnitt öffnen wir das Fenster per JavaScript. Dies erlaubt wesentlich mehr Kontrolle. Bevor Sie loslegen können, benötigen Sie natürlich zuerst die passenden Dateien: 1 2 Kopieren Sie die Dateien fenster_oeffnen.html und fenster.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). 3 Heben Sie den Schreibschutz beider Dateien auf (siehe Einleitung), um sie zu verändern. Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap14. Navigation 4 5 Öffnen Sie die Datei fenster_oeffnen.html in Ihrem Lieblingseditor. Anschließend öffnen Sie sie mit einem Browser. Wenn Sie den Link in der Datei fenster_oeffnen.html anklicken, wird das neue Fenster geöffnet. Der Inhalt des Fensters ist die Datei fenster.html, die uns später noch interessieren wird. Ein neues Fenster wurde geöffnet. Betrachten wir nun aber die Datei fenster_oeffnen.html näher: ■ Im Kopf der HTML-Seite sehen Sie einen Skript-Abschnitt. Er enthält eine Funktion namens fenster(). Diese Funktion öffnet ein neues Fenster. Innerhalb der Funktion wird das Fenster mit window.open geöffnet. Interessanter als diese Tatsache sind für uns aber die vielen Optionen hinter window.open. Sie steuern, wie das Fenster aussehen soll. Die Fensteroptionen 278 Neues Fenster öffnen – auf der CD-ROM ... ■ Die Funktion fenster() wird von dem Link im Körper der HTML-Datei aufgerufen, wenn der Nutzer darauf klickt (Ereignis onclick). Dabei wird in den runden Klammern die Zieladresse und der Fenstername übergeben. Beide können Sie einfach ändern. Ziel und Fenstername werden übergeben. Wir wollen nun im Folgenden einige Fensteroptionen ändern. Bevor wir damit starten, finden Sie in der folgenden Tabelle eine Übersicht über die hier verwendeten Optionen. Fensteroption Beschreibung height Die Höhe des Fensters. width Die Breite des Fensters. scrollbars Scrollbalken. status Statusleiste. personalbar Personalbar (Favoriten bzw. Bookmarks, bei Netscape Suche etc.) locationbar Adressleiste (URL-Eingabe). toolbar Werkzeugleiste (Zurück, Home usw.). menubar Menüleiste. Die wichtigsten Fensteroptionen 1 Als Erstes ändern wir die Größe des Fensters. Das geschieht mit den beiden Befehlen height und width. Die Angaben erfolgen hier immer in Pixeln. Wir haben die Höhe auf 300 und die Breite auf 450 Pixel gesetzt. 279 Navigation Höhe und Breite werden verändert. 2 Als Nächstes wollen wir, dass die Menüleiste im Browser angezeigt wird. Dazu müssen wir den Wert für den Befehl menubar statt auf 0 (nicht angezeigt) auf 1 setzen. PROFITIPP Die Menüleiste ist jetzt wieder vorhanden. 3 Für alle anderen Leisten funktioniert das Ein- bzw. Ausblenden genau wie bei der Menüleiste: Der Wert 0 ist ausgeblendet, der Wert 1 eingeblendet. Als letzten Schritt wollen wir dem Nutzer erlauben, die Größe des Fensters zu verändern. Dazu müssen wir dem Befehl resizable den Wert 1 statt 0 geben. Die Fenstergröße lässt sich jetzt vom Nutzer ändern. 280 PROFITIPP Neues Fenster öffnen – auf der CD-ROM ... Ob man dem Nutzer erlauben sollte, die Fenstergröße zu ändern, ist Ansichtssache. Prinzipiell gilt, dass man nicht zu stark reglementieren sollte. Allerdings kann es durchaus sinnvoll sein, die Fenstergröße zu „diktieren“, wenn das Design genau auf diese Größe zugeschnitten ist oder es sich um ein kleines Element wie eine Sitemap handelt. Wenn Sie das Ergebnis im Browser betrachten, sehen Sie schon deutliche Unterschiede. Das Fenster ist größer und die Menüleiste eingeblendet. Probieren Sie ruhig auch noch, ob Sie die Fenstergröße verändern können. Wenn ja, dann haben Sie alles richtig gemacht. AUF DER CD-ROM Das neue Fenster ist größer und mit Menüleiste versehen. Auf der CD-ROM finden Sie im Verzeichnis code/kap14 die Datei fenster_oeffnen_variiert.html, in der die hier vorgenommenen Änderungen enthalten sind. 281 Navigation 14.2 Fenster wieder schließen Nun wenden wir uns, wie versprochen, der Datei fenster.html zu, die der Inhalt des neuen Fensters ist. Wenn Sie dem Nutzer Menüleisten und Ähnliches wegnehmen und gleichzeitig ein neues Fenster öffnen, wird er oftmals etwas irritiert sein. Sie müssen immer davon ausgehen, dass der Betrachter Ihrer Seiten sich nicht so gut im Internet auskennt, wie Sie selbst. Deshalb sollten Sie in einem neuen Fenster nach Möglichkeit auch einen Link anbieten, der das Fenster wieder schließt. Wie Sie einen solchen implementieren, zeigt dieser Abschnitt: 1 2 Wenn noch nicht geschehen, öffnen Sie die Datei fenster.html in Ihrem Editor. Fügen Sie bitte nach dem Absatz „Ein neues Fenster“ einen weiteren Absatz ein, der einen Textlink mit der Beschriftung „Fenster schließen“ enthält. Ein neuer Absatz mit Link 3 Tragen Sie nun in den Link das href-Attribut ein. Es erhält als Wert ein Doppelkreuz, verweist also auf keine andere Seite. Ein leerer Link 282 Fenster wieder schließen 4 Der eigentliche Befehl zum Schließen des Fensters kommt in das onclick-Ereignis. Der Befehl wird durch javascript: eingeleitet und lautet: window.close() Das Fenster wird geschlossen. AUF DER CD-ROM Das neue Fenster kann nun geschlossen werden. Auf der CD-ROM zum Buch finden Sie das Beispiel im Verzeichnis code/kap14 unter dem Namen fenster_schließen.html. Achten Sie aber darauf, dass Sie, wenn Sie diese Datei in dem neuen Fenster aus der Datei fenster_oeffnen.html heraus öffnen möchten, zuerst den Dateinamen ändern müssen, denn dort wird eine Datei namens fenster.html aufgerufen. 283 Navigation 14.3 Fenster in den Vordergrund holen Ein Problem bei über JavaScript geöffneten Fenstern tritt auf, wenn das Fenster bereits irgendwo offen ist, man aber noch einmal auf den Link klickt. Das Fenster kommt nicht wie gewünscht automatisch in den Vordergrund. Um dies zu ändern, müssen Sie die HTML-Datei des neuen Fensters ein wenig modifizieren. Wir nehmen hier als Basis die Datei fenster_schließen.html aus dem letzten Abschnitt. Sie können aber ebenso auf fenster.html zurückgreifen, wenn Sie den Link zum Schließen des Fensters nicht benötigen. 1 2 Öffnen Sie, falls noch nicht geschehen, die Datei in Ihrem Editor. Wechseln Sie in das -Tag und fügen dort das Attribut onload ein. onload ist das Ereignis, das eintritt, sobald die Seite geladen wird. Das Ereignis onload bezeichnet das Laden einer Seite. 3 Als Nächstes benötigen Sie die Funktion window.focus(). Sie holt das Fenster automatisch in den Vordergrund. Wir bauen diese Funktion in eine kleine Fallunterscheidung ein, die die Funktion nur ausführt, wenn der Browser sie unterstützt. Ansonsten gäbe es bei älteren oder nicht JavaScript-fähigen Browsern eine Fehlermeldung. Der komplette Code lautet: if (window.focus) window.focus() Das Fenster wird jetzt immer in den Vordergrund geholt. 284 AUF DER CD-ROM Pull-down-Menü – Auf der CD-ROM ... Wir haben diese Datei auf die CD-ROM in das Verzeichnis code/kap14 unter dem Namen fenster_schließen_vordergrund.html gespeichert. 14.4 Pull-down-Menü – Auf der CD-ROM ... In Formularen sind Pull-down-Menüs ein häufig verwendetes Element. Was aber haben sie in einem Kapitel über Navigation zu suchen? Viel, denn man kann mit Pulldown-Menüs eine sehr interessante Seitennavigation basteln. Im Folgenden haben wir ein solches Pull-down-Menü mit zugehörigem JavaScriptCode angelegt. Sie können es nun bearbeiten und eigene Einträge anlegen. Vorher benötigen Sie aber noch die Datei von der CD-ROM. 1 2 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap14. 3 Heben Sie den Schreibschutz der Datei auf (wie in der Einleitung gezeigt), damit Sie sie anpassen können. 4 Öffnen Sie sie in Ihrem Lieblingseditor. Kopieren Sie die Datei pulldown.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). Der HTML-Quellcode beinhaltet natürlich ein Formular, denn das Pull-down-Menü ist ja ein Formularelement. Das Pull-down-Menü selbst ist an den <select>-Tags zu erkennen. Der Code für das Pull-down-Menü 285 Navigation Das wichtigste Attribut im <select>-Tag ist onchange. Es ist ein Ereignis, das eintritt, wenn der Nutzer die Auswahl im Pull-down-Menü ändert. Bei diesem Ereignis wird auf die Seite gelinkt, deren Adresse im value-Attribut des -Tags angegeben ist. Das ist zugegebenermaßen auf den ersten Blick etwas schwer zu erklären. Betrachten wir einmal den Code für das onchange-Ereignis: parent.location.href=form.navi.options[form.navi.selectedIndex].value parent.location.href= bedeutet, dass jetzt eine neue Adresse für das aktuelle Browserfenster definiert wird. Dann folgt logischerweise die Adresse. Die Adresse kommt aus dem Formular form. Dort wiederum aus der Pull-down-Liste mit dem Namen navi. In dieser Pull-down-Liste aus einer Option, deshalb options. Diese Option enthält in eckigen Klammern einen numerischen Wert, der die Position angibt. Dieser Wert wird mit form.navi.selectedIndex ausgelesen. Am Schluss wird mit value der Wert der ausgewählten Option als Adresse verwendet. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie neue Optionen hinzufügen. 1 Kopieren Sie zuerst die leere Option mit Bearbeiten/Kopieren und fügen Sie sie mit Bearbeiten/Einfügen dahinter zweimal ein, so dass Sie nun drei leere Optionen haben. Es wurden drei Optionen per Copy&Paste angelegt. 2 286 Nun müssen Sie die erste Option füllen. In das value-Attribut wird die Adresse der Seite eingetragen, auf die Sie linken möchten. In unserem Beispiel verwenden wir http://www.pearson.de. Pull-down-Menü – Auf der CD-ROM ... Die Zieladresse wurde in das value-Attribut eingetragen. 3 Als Nächstes folgt die Beschriftung „Pearson“. Sie wird zwischen und eingefügt. Die Beschriftung landet zwischen den -Tags. 4 Den eben beschriebenen Vorgang wiederholen Sie nun für die anderen zwei Optionen. Wir haben als Beispiel Markt+Technik und Addison Wesley mit den Adressen http://www.mut.de und http://www.awl.de verwendet. Markt+Technik und Addison Wesley wurden ebenfalls verlinkt. Wenn Sie das Beispiel im Browser testen, können Sie direkt von dem Pull-down-Menü auf die Homepage der Verlage springen. 287 Navigation Vom Pull-down-Menü... ...zu Pearson. 288 AUF DER CD-ROM VORSICHT! Fazit Einen Haken hat diese Methode mit Pull-down-Menüs. Der erste Eintrag ist, auch wenn man dies nicht einstellt, standardmäßig vorbelegt, deshalb reagiert er nicht auf onchange. Um dies zu vermeiden, wählt man oft eine erste Option die nirgendwo hin verweist sondern nur einen Text wie „Bitte wählen“ enthält. Für unser Beispiel würde sich der Code folgendermaßen ändern: Bitte wählen Pearson Markt+Technik Addison Wesley Auf der CD-ROM finden Sie das fertige Beispiel im Verzeichnis code/ kap14 unter dem Namen pulldown_ausgefuellt.html. 14.5 Fazit Eine gut durchdachte Navigation ist das A und O einer Website. In diesem Kapitel haben Sie mehrere Möglichkeiten gesehen, mit denen Sie Ihrer Navigation eine besondere Note geben können. Das entbindet Sie jedoch nicht von der Pflicht, Ihre Website sinnvoll zu strukturieren und übersichtlich zu gestalten. 289 15.0 Warenkorb Am Anfang war das Internet ein wissenschaftliches und militärisches Netzwerk. Erst mit dem beginnenden Siegeszug des World Wide Web, der mit der Verbreitung des Mosaic-Browsers und seiner Weiterentwicklung, dem Netscape Navigator, begann, wurde das Web, was es heute ist: Ein Sammelsurium von Kuriositäten, und Kommerz an allen Ecken und Enden. Eine häufige Anwendung auf kommerziellen Websites ist ein Warenkorbsystem, bei dem der Besucher Artikel in einen virtuellen Warenkorb legen und diese dann auch bestellen kann. Die meisten dieser Warenkorbsysteme sind in Programmiersprachen programmiert, die auf einem Webserver laufen. Alleine mit HTML wird es schwierig, so ein System aufzubauen, denn Sie müssen sich ja auch um das Zwischenspeichern des Warenkorbsystems kümmern. Mithilfe von JavaScript lässt sich jedoch ein Warenkorbsystem implementieren. Es gibt im World Wide Web eine ganze Reihe solcher Systeme, und wir haben davon mehr oder weniger willkürlich eines herausgepickt. Der große Vorteil an dem vorstellten System: Es untersteht der GPL, der GNU General Public Licence, was bedeutet, dass sein Quellcode unentgeltlich weitergegeben wird. Wenn Sie den Quellcode zum Warenkorbsystem weitergeben, müssen allerdings der Copyright-Hinweis, der Haftungsausschluss und der Verweis auf die GPL erhalten bleiben. Dies dient unter anderem dazu, zu verhindern, dass jemand die komplette Programmierung als sein eigenes Werk auszeichnet und damit den Grundgedanken der GPL untergräbt. Warenkorb 15.1 Auf der CD-ROM ... Wir haben natürlich das Warenkorbsystem für Sie entsprechend vorbereitet. Dennoch bleibt Ihnen ein wenig Arbeit nicht erspart. Schließlich müssen Sie ja die Waren, die Sie über Ihre Website vertreiben möchten, auch noch irgendwie in das System eintragen. Befolgen Sie zunächst diese Schritte: 1 2 3 Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap15. 4 Öffnen Sie dann die Datei warenkorb_1.html in Ihrem Webbrowser. Kopieren Sie alle Dateien dort in Ihr lokales Arbeitsverzeichnis, z.B. c:\werkstatt. Öffnen Sie alle Dateien mit Endung .html in Ihrem Editor (Sie müssen unter Umständen mehrere Programmfenster Ihres Editors öffnen). Sie sehen nun eine mögliche Seite Ihrer E-Commerce-Anwendung. Ein Artikel wird angezeigt und Sie können ihn auf Knopfdruck in den Warenkorb legen. Eine Seite mit einem Artikel 15.2 Artikelseiten anpassen Werfen wir zunächst einen Blick auf die HTML-Datei warenkorb_1.html, die Sie auch in der Abbildung wiedergefunden haben. Dort finden Sie unter anderem ein HTMLFormular mit mehreren Formularfeldern. Im Folgenden werden wir diese Formularfelder erläutern und anpassen. 1 292 Das Formularfeld mit name-Attribut QUANTITY enthält die Anzahl, wie viele Artikel der Kunde bestellen will. Ändern Sie hier nichts! Eigene Artikelseiten erstellen 2 Das versteckte Formularfeld mit name-Attribut PRICE enthält den Einzelpeis der Ware, und zwar in _. Sie können hier einen anderen Wert eintragen. Achten Sie aber darauf, anstelle des Dezimalkommas einen Dezimalpunkt zu verwenden! Dies liegt an JavaScript, das amerikanisch formatierte Zahlenwerte benötigt. 3 Das versteckte Formularfeld mit name="NAME" enthält eine Kurzbeschreibung des Artikels, in unserem Fall den Namen des Buchs. Sie können das beliebig anpassen. 4 Im versteckten Formularfeld mit name-Attribut ID_NUM wird die eindeutige Artikelnummer angegeben, in unserem Fall die ISBN-Nummer des Artikels. Sie können das testweise ändern, indem Sie die Langform der ISBN-Nummer mit Strichen verwenden: 3-8272-6029-9. 5 Das letzte Formularfeld mit type="button" ist eine Schaltfläche, die im Gegensatz zu Versendeschaltflächen mit type="submit" das Formular nicht verschickt, aber – wie in unserem Fall – JavaScript-Funktionen aufruft. Ändern Sie hier nichts, außer eventuell die Beschriftung der Schaltfläche (value-Attribut)! Laden Sie nun die neue Seite erneut in Ihren Browser, geben Sie eine Menge in das Mengenfeld ein und klicken Sie auf die Schaltfläche. Sie erhalten eine Meldung, dass der Artikel in den Warenkorb hinzugefügt wurde. Der Artikel wurde in den Warenkorb gelegt. 15.3 Eigene Artikelseiten erstellen So weit, so gut – aber natürlich besteht ein ordentlicher Online-Shop aus mehr als nur einem Artikel. Sie benötigen also weitere Artikelseiten. Im Folgenden erfahren Sie Schritt für Schritt, wie Sie solche Seiten anlegen können. 293 AUF DER CD-ROM Warenkorb In Ihrem Arbeitsverzeichnis auf der Festplatte befindet sich mittlerweile auch eine Datei warenkorb_torso.html. Diese dient als Vorlage für Artikelseiten; öffnen Sie also diese Datei in Ihrem Editor. Werfen Sie zunächst einen Blick auf diese Datei. Sie sehen dort zunächst, dass ein <script>-Tag vorhanden ist: <script language="JavaScript" src="nopcartde.js"> Hierdurch werden die JavaScript-Funktionen, die für den Warenkorb notwendig sind, in die Seite eingebunden. Sie brauchen sich um diese Funktionen nicht weiter zu kümmern. Wichtig ist nur, dass sich die Datei nopcartde.js im selben Verzeichnis wie die HTML-Datei befindet. Des Weiteren befindet sich in der Datei ein HTML-Formular mit einer Reihe von Feldern. Diese werden Sie in den nächsten Schritten anpassen. Speichern Sie zunächst die HTML-Seite warenkorb_torso.html unter einem neuen Dateinamen (damit Sie den Torso nicht überschreiben), beispielsweise warenkorb_2.html. Diese Datei werden wir nun bearbeiten. 1 Laden Sie zunächst die leere Datei in Ihren Webbrowser. Noch ist nicht viel zu sehen ... 2 294 Erstellen Sie nun im -Bereich der Seite eine Produktbeschreibung. Eigene Artikelseiten erstellen Die Artikelseite nimmt langsam Formen an. 3 Ändern Sie die Werte der versteckten Formularfelder PRICE, NAME, ID_NUM und SHIPPING, wie im vorherigen Abschnitt gezeigt, ab. Die versteckten Formularfelder wurden angepasst, 4 Wenn Sie zur Bestellung weitere Angaben zulassen möchten (etwa Größe bei Kleidung), erstellen Sie innerhalb des Formulars ein Textfeld mit name="ADDITIONALINFO". 295 Warenkorb Ein Freitextfeld für zusätzliche Informationen 5 Erstellen Sie abschließend noch einen Link auf die Warenkorbseite, damit der Benutzer die Bestellung auch aufgeben kann. Wir werden diese Seite warenkorb.html nennen. Ein Link verweist direkt zum Warenkorb (warenkorb.html). AUF DER CD-ROM Und schon ist die Artikelseite fertig! 296 Auf der CD-ROM zum Buch finden Sie eine exemplarische Datei warenkorb_2.html, die Sie zur Orientierung verwenden können. PROFITIPP Der Warenkorb Sie sollten natürlich auch die einzelnen Artikelseiten untereinander verlinken, damit Ihre Besucher auch durch das Angebot navigieren können! 15.4 Der Warenkorb Die bereits angesprochene Seite warenkorb.html enthält den eigentlichen Warenkorb. Sie müssen nur noch diese Seite ein wenig an Ihre Bedürfnisse anpassen: 1 Tragen Sie Ihre E-Mail-Adresse als Empfängeradresse in das Formular ein. Verwenden Sie entweder mailto:, oder – noch besser – einen Anbieter wie etwa FormMailer. Geben Sie Ihre eigene E-Mail-Adresse an! 2 Fügen Sie nun innerhalb des Formulars Felder für Angaben ein, die Sie von Ihren Besuchern benötigen. Dazu gehören unter anderem die Rechnungs- und ggf. auch die Lieferanschrift, möglicherweise auch die Zahlungsart, Kundennummer usw. Achten Sie darauf, eindeutige name-Attribute zu verwenden. 297 Warenkorb Felder für Lieferadresse und Zahlungsart 3 Wenn Sie fixe Versandkosten haben, geben Sie diese an. Sie finden in der Datei warenkorb.html einen JavaScript-Aufruf GetFromCart(). Geben Sie zwischen den runden Klammern die Versandkosten in _ an, aber verwenden Sie einen Dezimalpunkt anstelle eines Dezimalkommas (also beispielsweise GetFromCart(3.00) für 3 _ Versandkosten). Fixe Versandkosten in Höhe von 3 _ Der Warenkorb ist nun fertig. Sie müssen jetzt nur noch kräftig die Werbetrommel für Ihre Seite rühren, und schon bald trudeln vielleicht die ersten Online-Bestellungen bei Ihnen ein ... 15.5 Erweiterungen Die vorgestellte Lösung funktioniert eigentlich hervorragend, dennoch wollen wir einige mögliche Erweiterungen aufzeigen. 298 Erweiterungen Browser ohne JavaScript Da wir für diesen Warenkorb JavaScript verwenden, funktioniert der Warenkorb natürlich nicht bei deaktiviertem oder nicht vorhandenem JavaScript. Aus diesem Grund sollten Sie den Benutzern auf allen Seiten einen Warnhinweis geben, falls deren Browser kein JavaScript unterstützen sollte (oder die Unterstützung deaktiviert worden ist). Dazu gibt es das <noscript>-Tag. Alles, was zwischen <noscript> und steht, wird von JavaScript-fähigen Browsern ignoriert; alle anderen Browser zeigen es an. <noscript> Unser Online-Shop funktioniert leider nur wenn JavaScript aktiviert ist. Wenn Ihr Browser JavaScript unterstützt, schalten Sie es bitte ein. Falls nicht, installieren Sie bitte die neueste Version des Internet Explorer, Netscape Navigator oder Opera. In der Abbildung sehen Sie was der Internet Explorer macht, wenn JavaScript deaktiviert worden ist. Die Meldung, falls JavaScript im Browser deaktiviert wurde. Layout für den Warenkorb Um das grafische Aussehen der Warenkorbseite etwas anzupassen, können Sie Stylesheets benutzen. Die Warenkorbseite hat vier Klassen vorgesehen, die Sie aus der folgenden Tabelle entnehmen können. Klassenname Beschreibung nopcart Klasse für die Tabelle nopentry Klasse für die einzelnen Artikel im Warenkorb 299 Warenkorb Klassenname Beschreibung nopheader Klasse für die Überschriften im Warenkorb noptotal Klasse für die Summe, Versandkosten und den Gesamtpreis der Bestellung Die vier vorgesehenen Klassen Fügen Sie also beispielsweise folgendes Stylesheet ein, um den Warenkorb optisch etwas ansprechender zu gestalten: <style type="text/css"> Der Warenkorb hat nun ein etwas hübscheres Layout. 300 AUF DER CD-ROM Alternativen Diese Version des Warenkorbs, also inklusive Extra-Felder, hübschem Layout und <noscript>-Element finden Sie auf der CD-ROM zum Buch (und vermutlich inzwischen auch in Ihrem Arbeitsverzeichnis) unter dem Dateinamen warenkorb_beispiel.html. 15.6 Alternativen So funktionsreich ein JavaScript-Warenkorb auch ist, ein Problem bleibt: JavaScript wird im Browser ausgeführt, und das ist etwas, worüber Sie keine Kontrolle haben. Es gibt immer mehr Browser, die JavaScript verstehen. Der Aufwand, ein Skript auf allen verfügbaren Browsern zu testen, ist heute schon kaum mehr die Mühe wert. Aus diesem Grund sind serverseitige Lösungen im Allgemeinen zu bevorzugen. Unser Tipp: Fragen Sie doch Ihren Provider, ob dieser nicht ein Shop-System anbietet und suchen Sie auch im Web nach Shop-Systemen. Gerade Billig-Anbieter wie etwa Strato (www.strato.de) und 1&1 Puretec (www.puretec.de) bieten zu einigen ihrer Hosting-Pakete funktionsreiche Online-Shopsysteme an; ersterer sogar kostenlos. Sie sollten also in Erwägung ziehen, gegebenenfalls ein solches Produkt zu verwenden. Gratis-Shop bei Strato (www.strato.de) 301 Warenkorb 15.7 Fazit In diesem Kapitel haben wir Ihnen gezeigt, wie Sie mit nur wenig Aufwand und der CD-ROM zum Buch einen Online-Shop erstellen können. Der Schritt von einer privaten Homepage zu einem möglichen Umsatzträger Ihres Unternehmens ist natürlich nicht klein, aber jeder muss einmal anfangen. 302 Glossar .NET Entwicklungsschnittstelle und Module von Microsoft, die bei der Entwicklung von serverseitigen Anwendungen einen einfachen Zugriff mit verschiedensten Programmiersprachen erlauben. Anker siehe Textmarke ASP Active Server Pages. Serverseitige Technologie von Microsoft, die von den Webservern von Microsoft unterstützt wird. Die Wahl der Skriptsprache ist freigestellt, meistens jedoch wird VBScript verwendet. Attribut Ein Tag kann ein oder mehrere Attribute enthalten. Attribute nehmen Einstellungen vor, können aber auch JavaScriptFunktionen aufrufen. Jedes Attribut hat einen Wert. Banner Werbeform im Web. Banner werden meist oben oder unten auf einer Webseite angezeigt und führen den Nutzer bei Anklicken des Banners auf die Seite des Werbers. Banneraustausch Kleinere Websites tauschen untereinander Banner aus. Ältester und bekanntester Vertreter dieser Marktnische ist LinkExchange, das allerdings mittlerweile von Microsoft aufgekauft wurde. Browser siehe Webbrowser CGI Common Gateway Interface. Eine Art Übertragungsprotokoll bzw. Schnittstelle für serverseitige Skripten. Diese werden dann in einer serverseitigen Programmiersprache wie beispielsweise Perl erstellt. HTML-Formulare können über CGI per E-Mail verschickt werden. Glossar 304 clientseitig Etwas, das auf dem Client des Nutzers ausgeführt wird. CSS Cascading Style Sheet. Formatierungssprache für Stylesheets. CSS-Dateien haben die Dateiendung .css. CSS liegt mittlerweile in der Version 2.0 als Standard des W3C vor. Domain Eindeutiger Name für eine Website im Internet; beispielsweise in der Form http://www.domain.de. E-Mail Electronic Mail oder elektronische Post. Nachrichten, die über elektronische Datenwege ausgetauscht werden. Eine E-Mail-Adresse hat immer die Form [email protected], wobei toplevel für das Länderkürzel steht (in Deutschland .de). Ereignis Zustand der Eintritt. Beispielsweise, wenn der Nutzer über einen Link fährt (Onmouseover). Auf dieses Ereignis kann mit JavaScript reagiert werden. In HTML gibt es zu einem Ereignis im Allgemeinen ein entsprechendes Attribut, in dem das JavaScript aufgerufen werden kann. externe Stylesheets siehe Stylesheet Fallunterscheidung Auch Kontrollstruktur. In Programmiersprachen eingesetztes Mittel, um mehrere Bedingungen zu überprüfen und je nach Zutreffen der Bedingung Anweisungen zu geben. Flash Proprietäres Vektorgrafikformat von Macromedia, das sich im Internet als Quasi-Standard durchgesetzt hat. Es benötigt ein Plug-In für den Webbrowser, das allerdings bei den Standardbrowsern mitgeliefert wird. Formular Eingabemaske, in die der Nutzer Dateien eintragen kann. Ein Formular besteht aus verschiedenen Elementen wie Kontrollkästchen, Pull-Down-Menüs und Textkästen. Zum Versand von Formularen wird eine serverseitige Programmiersprache wie ASP, PHP oder Perl verwendet. Frame Eine Webseite kann aus mehreren Teilen, sogenannten Frames, bestehen. Beispiele sind Navigationsleiste und Inhaltsframe. Jeder dieser Teile ist eine eigene HTML-Datei und unabhängig von den übrigen Frames scrollbar. Glossar FTP File Transfer Protocol. Übertragungsprotokoll für Daten. Mit diesem Protokoll lädt man eine Website physisch auf einen Webserver. Funktion Funktionen enthalten einzelne Programmschritte oder komplette Programme. Sowohl clientseitige (z.B. JavaScript) als auch serverseitige (z.B. PHP) Programmiersprachen unterstützen Funktionen. GIF CompuServe Graphics Interchange. Ursprünglich von CompuServe entwickeltes Bildformat, das im Internet eingesetzt wird. Es unterstützt nur 256 Farben, kann dafür eine Transparenzfarbe enthalten. Außerdem lässt sich mit dem Format eine GIF-Animation speichern. Der Kompressionsalgorithmus des GIF-Formats LZW steht unter einem Patent von Unisys und muss deshalb von den Herstellern von Grafikprogrammen, nicht aber von Website-Betreibern lizenziert werden. GIF-Animation Eine Folge von Einzelbildern wird im GIF-Format als Animation abgespeichert. Die Animation kann mit Verzögerung, einmalig, mehrmals oder unbegrenzt abgespielt werden. Hexadezimal Notation von Farben in HTML; beispielsweise #FFFFFF für Weiß. Das Muster funktioniert folgendermaßen: Das Doppelkreuz # markiert den Beginn der Farbnotation. Die nächsten zwei Ziffern geben den RGB-Rot-Anteil, die folgenden zwei den Grün-Anteil und die letzten zwei den BlauAnteil an. Der Wert wird mittels Multiplikation der ersten Ziffer mit 16 und dann Addition der zweiten Ziffer gebildet. Um 256 Werte abbilden zu können, muss jede Ziffer 16 Werte annehmen können, deshalb reicht der Werte-Bereich einer Ziffer nicht aus. Alternativ werden 0 bis 9 und dann A (10) bis F (15) verwendet. FF ist also 15 * 16 = 240. Dann wird das zweite F = 15 addiert und heraus kommt der Wert 255 für Weiß. Hintergrund Mit HTML oder einem Style Sheet können Sie für eine Seite einen Absatz oder eine Tabelle, ein Hintergrundbild oder eine Hintergrundfarbe festlegen. Homepage Die Einstiegsseite einer Website. 305 Glossar 306 Hoster Anbieter von Speicherplatz auf einem Webserver. Die meisten Hoster unterstützen auch eigene Domains, das heißt Ihre Website ist unter http://www.domain.de erreichbar. HTML Hypertext Markup Language. Seitenbeschreibungssprache für Webseiten. HTML enthält Tags (=Befehle), die vom Browser der Reihe nach interpretiert werden. HTML unterteilt eine Seite in Kopf (head) und Körper (body). HTTP Hypertext Transfer Protocol. Übertragungsprotokoll für Daten im Web. Mit HTTP werden beispielsweise HTMLSeiten und Grafiken übertragen. Imagemap In HTML enthaltene Funktion, die es Ihnen erlaubt, ein Bild in mehrere Bereiche zu unterteilen und jeden Bereich mit einem Link oder sonstigen Funktionen zu versehen. Das Tag (=Befehl) für eine Imagemap in HTML ist <map>, das für einen Bereich <area>. Indizierte Farben Farben die in einer Farbpalette zusammengefasst und meist aus einem größeren Farbraum herausgeschnitten wurden. Eine Farbpalette mit indizierten Farben kann maximal 256 Farben enthalten. Jeder Farbwert hat einen eigenen Index, der seine Position in der Palette festlegt. Indizierte Farben werden hauptsächlich beim Speichern im Dateiformat GIF eingesetzt. Interlaced Abspeicheroption für GIF-, JPEG und PNG-Dateien. Die Dateien werden im Browser in mehreren Stufen aufgebaut. Bei GIF wird zunächst jede achte Zeile dargestellt. Bei JPEG und PNG wird die Datei von unscharf zu scharf abgebildet. Internet Weltumspannendes Rechnernetz. Beinhaltet Dienste wie FTP, E-Mail und World Wide Web. Internet Explorer Webbrowser von Microsoft. Liegt mittlerweile in Version 6 vor. Der Internet Explorer kann auch neuere HTML-Befehle, die noch nicht dem W3C-Standard entsprechen, interpretieren. ISP Internet Service Provider. Stellt den Zugang zum Internet zur Verfügung. Bietet oft auch die Dienste eines Hosters. mehrere Glossar Java Ursprünglich von Sun entwickelte Programmiersprache, die sich plattformunabhängig ausführen lässt. Dafür ist allerdings eine sogenannte Virtual Machine nötig. Java gewinnt vor allem im serverseitigen Bereich an Bedeutung. Hier wird es in Form von Enterprise Java Beans und Java Servlets eingesetzt. JavaScript Programmiersprache, die von Webbrowsern interpretiert wird. JavaScript ist eine Ergänzung zu HTML und wurde von Netscape ins Leben gerufen. JavaScript enthält wichtige Funktionen zum Programmieren wie beispielsweise Schleifen und Variablen. JPEG Joint Picture Experts Group. Dateiformat für das Web. JPEG hat eine verlustbehaftete Komprimierung und eignet sich besonders für Fotos und Grafiken mit vielen Farbabstufungen. Kommentar Teil des Quellcodes einer Programmiersprache, der beim Ausführen ignoriert wird. Ein Kommentar soll normalerweise den Aufbau des Programmes erläutern. Konqueror Dateimanager und Webbrowser unter Linux. Link Verweis von einer Webseite auf eine andere. Ein Link kann relativ (z.B. ../images) oder absolut (http://www.mut.de) erfolgen. Linux Auf Unix basierendes Betriebssystem, das als Open Source zur Verfügung gestellt wird. LZW Komprimierungsalgorithmus, benannt nach den Entwicklern Lempel-Ziv und Welch. Wird unter anderem beim Dateiformat GIF eingesetzt. Mozilla Open Source-Projekt, das die Basis für den neuen Netscape Browser (Netscape 6) gelegt hat. Das Besondere ist, dass der Quellcode offen liegt und sich jeder an der Entwicklung beteiligen kann. Den aktuellen Zwischenstand finden Sie unter http://www.mozialla.org. Netscape Mittlerweile von AOL/Sun aufgekaufter Browser-Hersteller. Programmiert den Webbrowser Netscape Navigator. Dieser liegt mittlerweile in Version 6.x vor. 307 Glossar 308 Open Source Unter Open Source fallen Programme und Code, der offen zur Verfügung gestellt wird. Die Weiterverwendung von Open Source-Software wird in Lizenzen wie beispielsweise GPL geregelt. Bekanntestes Open Source-Projekt ist das Betriebssystem Linux. Opera Webbrowser. Die Nummer drei unter den Browsern; allerdings mit weitem Abstand zu den ersten beiden. Neueste Version ist Version 6. Perl Serverseitige Programmiersprache, die über sehr viele Möglichkeiten verfügt. Für Einsteiger ist allerdings die Syntax schwerer zu erlernen, als bei ASP oder PHP. Plug-in Erweiterung für einen Webbrowser oder für ein Programm, das zusätzliche Funktionalitäten bietet. PHP Serverseitige Programmiersprache, die auf Open Source basiert und mittlerweile auf Grund der Vielzahl an Möglichkeiten eine sehr weite Verbreitung gefunden hat. PNG Format für Bilder im Web. Wurde entwickelt, um Copyright-Probleme mit dem LZW-Algorithmus des GIF-Formats zu umgehen, hat sich dann aber über GIF hinaus entwickelt. Unterstützt als PNG-2 zwei Farben, als PNG-4 16, als PNG-6 128 und als PNG-8 256 Farben. PNG-24 beinhaltet 16,7 Millionen Farben, dafür werden die Bilddateien auch deutlich größer. PNGs werden verlustfrei komprimiert und erlauben Transparenz sowie Animationen. Quellcode Auch Programmcode. Rohform eines Programmes in einer Programmiersprache. Seitenbeschreibungssprachen wie HTML und Skriptsprachen wie JavaScript und PHP müssen nicht kompiliert (in ausführbare Programme verwandelt) werden, deshalb ist ihr Quellcode immer zugänglich. RGB-Farbsystem RGB steht für Rot, Grün und Blau, die drei Farbanteile des Farbsystems. Das RGB-Farbsystem fügt die drei Farbkanäle zusammen und bildet daraus die Farben. Es wird beispielsweise von Monitoren eingesetzt. Die Farbmischung des RGB-Systems bezeichnet man als additiv, da die Farben aus den drei Grundfarben zusammengesetzt werden. Glossar Schleife In Programmiersprachen eingesetzt. Wiederholtes Ausführen einer Anweisung, bis eine, bei jedem Durchlauf überprüfte, Bedingung, nicht mehr zutrifft. serverseitig Etwas, das auf dem Server ausgeführt wird. SGML Standard Generalized Markup Language. Diese Beschreibungssprache bildet die Grundlage sowohl von HTML als auch von XML. Sniffer Programm, das etwas ausspioniert. In diesem Buch verwendet als JavaScript-Programm, das die Browserinformationen des Nutzers herausfindet. In dieser Funktion ist ein Sniffer natürlich legal. Stil Auch Stil-Befehl. Eine Anweisung in einem Style Sheet, die eine bestimmte Formatierung vornimmt. Ein Stil kann, genau wie ein HTML-Attribut, einen Wert annehmen. Der Wert enthält die eigentliche Formatierung. Stylesheet Stylesheets dienen in HTML-Seiten als Ergänzung zur Formatierung und Positionierung von Elementen. Stylesheets können an zentraler Stelle definiert und auf verschiedene Bereiche angewendet werden kann. Dann nennt man sie externe Stylesheets. Für Stylesheets muss eine spezielle Sprache eingesetzt werden. Bei HTML-Seiten ist das normalerweise CSS. Für XML heißt die Stylesheet-Sprache XSL. SVG Scalable Vector Graphics. Auf XML basierende Beschreibungssprache zum Erstellen von Vektorgrafiken und Vektoranimationen für das Web. Hauptsächlich von Adobe als Konkurrenz zu Macromedias proprietärem Flash-Format unterstützt. Tabelle Eine Tabelle in HTML besteht aus Zeilen mit Zellen. Die Zellen bilden natürlich ebenfalls Spalten, die aber nicht explizit definiert werden. Neben dem klassischen Einsatz als Layout-Element können Tabellen auch zum Positionieren von Objekten und zum Strukturieren einer Webseite verwendet werden. 309 Glossar 310 Tag Jeder HTML-Befehl wird als Tag bezeichnet. Die meisten Tags bestehen aus einem Anfangstag und einem Endtag. Eine Ausnahme ist beispielsweise das -Tag. Ein Tag kann mehrere Attribute enthalten. Textmarke Verweis innerhalb einer längeren HTML-Seite. Sie definieren mit einem Anker die Stelle, an die der Nutzer springt. Mit einem Link und angehängtem Doppelkreuz # wird auf einen Anker verwiesen. Transparentes GIF GIF-Grafik, die eine Farbe enthält, welche transparent geschalten wurde. Transparente 1*1 Pixel große GIFs werden häufig in Tabellen als Platzhalter und zum Positionieren eingesetzt. URL Uniform Ressource Locator. Die Internet-Adresse, die man bei einem absoluten Link angeben muss. Also beispielsweise http://www.pearson.de. Variable Datenspeicher in einer Programmiersprache, der seinen Wert ändern kann. W3C World Wide Web Consortium. Standardisierungskommission zur Bildung von Internet-Standards wie beispielsweise HTML 4.01. Zu finden ist das W3C unter der Adresse http://www.w3.org. Web Das World Wide Web (WWW oder W3) ist der grafische Teil des Internet. Um Seiten des World Wide Web betrachten zu können, benötigen Sie einen Webbrowser, der die HTML-Seiten rendert. Webbrowser Der Webbrowser stellt die HTML-Seiten dar. Dazu interpretiert er den HTML-Code und rendert die Seite. Zusätzlich stellt er die mitgelieferten Grafiken dar. Mit Plug-Ins, die manchmal zum Standardumfang gehören, lassen sich zusätzliche Formate wie beispielsweise Flash oder SVG darstellen. Webseite Einzelne HTML-Seite mit den zugehörigen Bildern. Eine Webseite ist meist Teil einer Website. Glossar Webserver ■ Rechner, der ständig an das Internet angebunden ist. Per URL kann jeder Nutzer mit Internet-Anschluss auf die Webseiten auf dem Webserver zugreifen. Um Daten auf den Webserver zu laden, wird meist FTP eingesetzt. ■ Das Programm, das auf dem Server liegt. Eine Art Application-Server, der verschiedene Dienste und Funktionen wie serverseitige Programmiersprachen zur Verfügung stellt und die HTML-Seiten inklusive Grafiken, Style Sheets und Skripten an den Nutzer schickt. Beispiele sind Apache und der Microsoft Internet Information Server. Websichere Farben Ursprünglich von Netscape entwickelte Farbpalette mit 216 Farben, die es sowohl auf dem Macintosh als auch unter Windows gibt. In der Praxis spielt diese Palette keine große Rolle mehr, da die meisten Rechner mehr als 256 Farben unterstützen. Sollte dies nicht der Fall sein, ist in der Regel auch der Webbrowser in der Lage, fehlende Farben aus anderen zusammenzusetzen (Dithering). Website Komplettes Internet-Angebot, das sich unter einem Domainnamen verbirgt. Eine Website besteht aus mehreren Webseiten. Die Einstiegsseite wird als Homepage bezeichnet. Wert Der Wert ist die Information, die einem Attribut zugewiesen wird. Ein Wert kann aus Zahlen oder Zeichen bestehen. Dies hängt von der Art des Attributs ab. XHTML eXtensible Hypertext Markup Language. Unter diesem Oberbegriff wird die Standardisierung von HTML nach XML-Richtlinien zusammengefasst. Der XHTML-Standard des W3C liegt in Version 1.0 vor. XML eXtensible Markup Language. Strukturierungssprache für Dokumente im Web. Der Standard wird vom W3C gepflegt. XSL eXtensible Stylesheet Language. An XML angelegte Sprache für Stylesheets. Wird aber im Allgemeinen nicht in XHTML verwendet. 311 Stichwortverzeichnis Stichwortverzeichnis A C Absatz 40, 109 ausrichten 40 formatieren 66 Größe 112 Hintergrundbild 113 Rahmen 110 Überlauf 112 Zeilenumbruch 42 Abstand vom Rand 165 Anker 91, 303, 310 definieren 93 verlinken 93 AOL 31 ASP 303 Attribut 28, 303 Audio 217 Format 218 Konsole 220 MIDI 219 Schleife 220 Szenarien 222 WAV 218 Wiedergabe 220 Cascading Style Sheets 27 CGI 303 class 59, 70 clientseitig 304 Common Gateway Interface 303 CSS 27, 57, 304, 309 1.0 57 2.0 57 background color 102, 110 image 102, 113 position 103 repeat 103 border-style 111 bottom 111 left 111 right 111 top 111 Browserunterstützung 57 color 114 extern 59, 304 font family 64, 67, 71 size 59, 65, 67, 68, 71 style 68, 71 variant 76 weight 71, 72 Formular 213 height 112 Hierarchie 62 ID 60 im Kopfabschnitt 59 Klasse 59, 70, 300 Layout 151 left 153 overflow 112 B Banner 303 Bannertausch 303 Blocksatz 110 Browser 20, 303 Internet Explorer 20, 306 Konqueror 23, 307 Netscape 21, 307 Opera 23, 308 Unterscheidung 227, 233 313 Stichwortverzeichnis padding 112 bottom 112 left 112 right 112 top 112 Positionierung 151 text-indent 110 text-transform 76 top 153 z-index 154 D Dateiendungen anzeigen 18 Datum ausgeben 248 deprecated 48, 211 Domain 304 durchstreichen 76 E Editor 15 KEdit 20 Linux 20 Notepad 16 Notetab 19 Plattformverfügbarkeit 15 Testversion 16 Ultraedit 19 Windows 16 XEmacs 20 Einrückung 27 E-Mail 304 Adresse 99 E-Mail-Adresse überprüfen 271 F Fallunterscheidung 304 Farbcode 47 314 Farbe 46, 69 Hintergrund 102, 110, 134, 305 indiziert 306 Rahmen 124 RGB 47 Standardfarben 46 websicher 48 Fenster in den Vordergrund 284 Fenster öffnen 277 Breite 279 Höhe 279 in der Größe veränderbar 280 Menüleiste 280 Optionen 279 Fenster schließen 282 Flash 304 Fokus 284 Fomular Versand per E-Mail 190 Formmailer 192, 272, 297 Formularüberprüfung 274 Formular 169, 304 211 CSS 213 Feld 172 formatieren 201, 210 Pflichtfeld 256 Tabelle 204 überprüfen Checkbox 265 E-Mail-Adresse 271 Fehlersuche 269 mehrzeiliges Textfeld 266 Passwortfeld 260 Pull-down-Menü 261 Radiobutton 264 serverseitig 272 Textfeld 258 Versand per E-Mail 191 Versand per Skript 191 Stichwortverzeichnis Formularfeld Checkbox 183, 197 mehrzeiliges Textfeld 185, 197 Breite 186 Höhe 186 Umbruch 187 Passwortfeld 176, 196 Pull-down-Menü 178, 196, 285 Element 178 Höhe 184 mehrfach 184, 197 Radiobutton 181, 196 Gruppe 183 Textfeld 172, 195 Breite 172, 173 Länge 174 Vorausfüllung 176 Versende-Schaltfläche 188 Beschriftung 188 grafisch 189 verstecktes Feld 195 Frames 95, 157, 304 * 159 Abstand vom Rand 165 definieren 159, 162 Frameset 159, 162 füllen 160 Link 165 Motivation 157 Name 161, 167 Rahmen 164 Spalten 159 verschachteln 162 Zeilen 162 Frameset 159, 162 FTP 31, 100, 305 G GIF 80, 305 Animation 305 GNU General Public Licence 291 GPL 291 Grafik 80 Abstand vom Text 88 als Link 97 Alternativtext 85 am Text ausrichten 86 GIF 80, 305 GIF-Animation 305 Größe 81 Hintergrund 102, 113, 305 JPEG 80, 307 Mouseover 239 Name 85 PNG 80, 308 Rahmen 98 RGB 308 Skalierung 82 Groß-/Kleinbuchstaben 76 H Hervorhebung 48, 71 Hexadezimalsystem 47, 305 Hintergrundbild 102, 113, 305 anordnen 102, 103 Position 103 Hintergrundfarbe 102, 110, 134, 305 Homepage 305 horizontale Linie 44 Ausrichtung 45 Breite 45 Dicke 44 Farbe 45 Schatten 45 Hoster 31, 306 Hover 239 HTML 24, 306 Attribut 28 Aufbau 25 Einrückung 27 Inhaltsbereich 26 Kommentar 25, 307 Kopfbereich 26 Tag 25 315 Stichwortverzeichnis HTTP 306 Hypertext Markup Language 24 I Imagemap 104, 306 Bereich 105 Kreis 105 Polygon 105 Rechteck 105 Interlaced 306 Internet 306 Internet Explorer 20, 306 ISP 306 J Java 29, 307 JavaScript 29, 85, 283, 307 alert() 30 Browser ohne JavaScript 299 Browserunterscheidung 228, 233 Datum ausgeben 248 datum() 249 document.BILDNAME.src 243 document.layers 231 document.write() 229, 231, 234 else 232 Ereignis 304 externe Datei 30 Fallunterscheidung 304 Fenster in den Vordergrund 284 öffnen 277 schließen 282 fenster() 278 formularcheck() 257, 267 formularcheck_email() 271 formularcheck_feld() 258, 260, 263, 264, 266 Funktion 244, 305 if 235 Internet Explorer ermitteln 234, 236 316 Kontrollstruktur 304 navigator 228 Netscape 4.x ermitteln 230 Netscape 6.x ermitteln 235 neue Datei öffnen 232, 234, 286 Objekt 228 omo() 246 omout() 246 onchange 286, 289 onclick 279 onload 284 onmouseout 240 onmouseover 240 onsubmit 255 Pull-down-Menü 285 Schleife 309 Text ausgeben 231 uhrzeit() 249 Variable 310 Warenkorb 291 window.close() 283 window.focus() 284 window.open() 278 JPEG 80, 307 K Kapitälchen 75, 76 KEdit 20 Kommentar 25, 307 Konqueror 23, 307 Kontrollstruktur 304 kursiv 68 L Layout 143 mit CSS 151 mit Tabellen 145 Link 90, 307 absolut 91 als Grafik 97 Anker 91 auf Anker 93 Stichwortverzeichnis auf E-Mail-Adresse 99, 169 auf FTP-Server 100 auf Newsgroup 100 Farbe 96 Frames 165 in neuem Fenster 95 relativ 90 Ziel 168 Zustand 96 zuweisen 91 Linux 307 Liste 115 Element 116 nummeriert 116 unnummeriert 119 verschachteln 120 Zählung 117 Zählzeichen 118 LZW 307 M mailto 99 MIDI 219 Mouseover 239, 240 auslagern 244 Grafik ändern 242 Grafik wiederherstellen 243 mehrere Grafiken 244 Mozilla 307 N Navigation 277 Fenster öffnen 277 Pull-down-Menü 285 Netscape 21, 307 Versionen 21 Netscape Composer 15 news 100 Newsgroup 100 Notepad 16 Notetab 19 O Open Source 308 Opera 23, 308 Browseridentifikation 229 P P3P 257 Perl 308 Pflichtfeld 256, 274 PHP 308 Plug-in 308 PNG 80, 308 Positionierung 151 absolut 151 ändern 153 relativ 151 Überlappung 154 Pull-down-Menü 285 Puretec 31, 301 Q Quellcode 308 Quicktime 224 R Rahmen 110, 164 Randabstand 148 RGB 47, 69, 308 rgb() 69 Rollover 239 S Schreibschutz entfernen 33 Schriftart 35 ändern 50, 67 serifenlos 51 Schriftart verändern 64 Schriftfarbe 52, 69, 114 317 Stichwortverzeichnis Schriftgröße 51 ändern 51, 65, 67, 68 relativ ändern 52, 65 Seite zentrieren 131 Seitenbeschreibungssprache 122 SGML 309 Sitemap 281 Sniffer 309 Sonderzeichen 53 Speichern 17 Strato 31, 301 style 61, 71 Style Sheets 27 SVG 309 T Tabelle 89, 121, 309 Abstand 126 Abstand zum Rand 148 Aufbau 122 ausrichten 129 Fehlersuche 139 formatieren 137 Größe 126 Hintergrundfarbe 134 Layout 145, 204 Netscape 140 Rahmen 123, 145 Rahmenfarbe 124 unsichtbar 125, 145, 210 Zeile 122 Zeile einfügen 123 Zelle 122 Zellenabstand 126, 146 Zellenzusammenfassen 132 Tag 25, 310 25 Attribut 28, 303 Text 35 Ausrichtung 110 Auszeichnung 49 einrücken 43 formatieren 35 Hervorhebung 48, 71 Rahmen 111 Textauszeichnung 49 logisch 49 physikalisch 49 Titelleiste 26 T-Online 31 transparentes GIF 310 U Überlappung 154 Überschrift 38 Ebene 38 nummerieren 40 überstreichen 76 Ultraedit 19 Umbruch 187 Umlaute 55 unterstreichen 76 URL 310 url() 102 320 V Video 222 Format 223 Konsole 224 Quicktime 224 Schleife 224 Wiedergabe 224 Windows Media Player 224 W W3C 310 Warenkorb 291 Alternativen 301 Artikelseite 292, 293 Browser ohne JavaScript 299 Layout 299 Übersicht 297 Versandkosten 298 WAV 218 Webserver 311 websichere Farben 48 Website 311 Windows Media Player 224 X XEmacs 20 XHTML 45, 311 XML 311 XSL 311 Z Zeilenumbruch 42 z-index 154 Zitat 44 Copyright Daten, Texte, Design und Grafiken dieses eBooks, sowie die eventuell angebotenen eBook-Zusatzdaten sind urheberrechtlich geschützt. Dieses eBook stellen wir lediglich als Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses eBooks oder zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets anderen Websites, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Bei Fragen zu diesem Thema wenden Sie sich bitte an: mailto:[email protected] Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf der Website ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und andere eBooks können Sie rund um die Uhr und legal auf unserer Website (http://www.informit.de) herunterladen Das eigene Web mit HTML, CSS und JavaScript Read more Android Apps mit HTML, CSS und JavaScript Read more iPhone Apps mit HTML, CSS und JavaScript: Ohne Objective-C und Cocoa zur eigenen App Read more Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics Read more Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics Read more HTML and CSS Web Standards Solutions: A Web Standardistas' Approach Read more Building Android Apps with HTML, CSS, and JavaScript Read more Beginning HTML, XHTML, CSS, and JavaScript (Wrox Programmer to Programmer) Read more Programming Windows 8 Apps with HTML, CSS, and JavaScript Read more HTML, CSS, and JavaScript Mobile Development For Dummies Read more Sams Teach Yourself HTML, CSS, and JavaScript All in One Read more Sams Teach Yourself HTML, CSS, and JavaScript All in One Read more HTML, CSS, and JavaScript Mobile Development for Dummies Read more Programming Windows 8 Apps with HTML, CSS, and JavaScript Read more Web Standards Programmer's Reference : HTML, CSS, JavaScript, Perl, Python, and PHP Read more The Essential Guide to CSS and HTML Web Design Read more Building Android Apps with HTML, CSS, and JavaScript: Making Native Apps with Standards-Based Web Tools Read more Creating Cool Web Sites with HTML, XHTML, and CSS Read more The Essential Guide to CSS and HTML Web Design Read more Das AJAX Kompendium. Web 2.0-Anwendungen mit JavaScript und XML GERMAN Read more Das AJAX Kompendium. Web 2.0-Anwendungen mit JavaScript und XML GERMAN Read more Webseiten-Layout mit CSS Read more HTML, javascript, PHP и MySQL. Джентльменский набор Web-мастера Read more Web-конструирование на HTML Read more HTML and Web Design Read more Javascript в WEB-дизайне Read more HTML: Your visual blueprint for designing effective Web pages with HTML, CSS, and XHTML Read more Pro CSS and HTML Design Patterns Read more HTML and CSS: Design and Build Websites Read more Recommend Documents Das eigene Web mit HTML, CSS und JavaScript Persönliche Firewalls Unser Online-Tipp für noch mehr Wissen … ... aktuelles Fachwissen rund um die Uhr – zum Probele... Android Apps mit HTML, CSS und JavaScript Mit Standard-Web-Tools zur nativen App Android Apps mit HTML, CSS und JavaScript O’Reilly Jonathan Stark Deutsche Über... iPhone Apps mit HTML, CSS und JavaScript: Ohne Objective-C und Cocoa zur eigenen App Ohne Objective-C und Cocoa zur eigenen App iPhone Apps mit HTML, CSS & JavaScript O’Reilly Jonathan Stark Deutsche Übe... Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics Download from Wow! eBook Learning Web Design Fourth Edition A Beginner’s Guide to HTML, CSS, JavaScript, and Web Grap... Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics HTML and CSS Web Standards Solutions: A Web Standardistas' Approach HTML and CSS Web Standards Solutions A Web Standardistas’ Approach Christopher Murphy Nicklas Persson HTML and CSS W... Building Android Apps with HTML, CSS, and JavaScript Building Android Apps with HTML, CSS, and JavaScript Building Android Apps with HTML, CSS, and JavaScript Jonathan S... Beginning HTML, XHTML, CSS, and JavaScript (Wrox Programmer to Programmer) Duckett Learn to create attractive web sites that are easy to use • How to create HTML and XHTML pages that incorpora... Programming Windows 8 Apps with HTML, CSS, and JavaScript Programming Windows 8 Apps ® with HTML, CSS, and JavaScript SECOND PREVIEW Kraig Brockschmidt PUBLISHED BY Microsoft... HTML, CSS, and JavaScript Mobile Development For Dummies Mobile Development/HTML g Easier! Making Everythin When designing a web page for mobile devices, the big thing is — th... × Report "Das eigene Web mit HTML, CSS und JavaScript" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close