This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
Tobias Hauser Marianne Pentenrieder Christian Wenz
workshop HTML 4
An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam
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 Produkt wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
Vorwort Tim Berners-Lee, ein Angestellter am Europäischen Institut für Teilchenphysik (CERN) in Genf, hatte anno 1989 eine Idee, wie man Dokumente effizient anordnen und miteinander in Verbindung bringen könnte. Er entwickelte seine HyperText Markup Language, was für Hypertext Auszeichnungssprache steht. Sein System funktionierte und was noch viel wichtiger war, andere Leute fanden Gefallen an seiner Idee und übernahmen das Prinzip. Der Rest ist Geschichte. Jede Seite im grafischen Teil des Internet, dem World Wide Web, baut auf HTML auf und auf der Idee von Tim Berners-Lee basiert inzwischen jeder Webauftritt. Mittlerweile wird HTML vom World Wide Web Consortium, einem gemeinnützigen »Standardwächter" im Internet, gepflegt. Unter www.w3.org/MarkUp/ finden Sie die aktuellen Spezifikationen und Versionen der Sprache. Basis für dieses Buch ist HTML 4.01 sowie XHTML 1.0. Standards sind jedoch nur die eine Seite der Medaille. Wichtig ist vor allem, dass die Webseite in den meisten Browsern so aussieht, wie gewünscht. Aus diesem Grund werden wir in diesem Buch keine Prinzipienreiterei betreiben, sondern bewusst auch auf die Unterschiede der Browser oder bekannte Bugs hinweisen. Manchmal kann man nur dann browserunabhängige Webseiten erschaffen, wenn man die Eigenheiten der Browser gezielt ausnutzt.
Zielgruppe Die anderen Titel aus der workshop-Reihe richten sich zum größten Teil an fortgeschrittene und erfahrene Benutzer und führen in die Tiefen einer komplexen Programmiersprache ein. Bei HTML ist das nicht ohne weiteres möglich, die Fähigkeiten und Möglichkeiten der Sprache sind begrenzt. Aus diesem Grund haben wir das Buch so konzipiert, dass sich auch HTML-Anfänger zurechtfinden können. Nach der Lektüre der neun Kapitel sind Sie – so hoffen wir – in der Lage, komplexe HTML-Seiten zu erstellen. Aber auch Leser mit Erfahrungen in HTML werden hier fündig. Aufgrund der Abschnitte mit den Fragen und zugehörigen Lösungen lernen Sie hier eine Reihe von Kniffen und erhalten ganz nebenbei eine gehörige Portion Praxiserfahrung.
Aufbau Jedes Kapitel dieses Buches ist nach demselben Prinzip aufgebaut. Zunächst kommt ein etwas ausführlicher Theorieteil, in dem das Thema des Kapitels erklärt und nahe gebracht wird. Danach folgt ein Fragenteil mit ungefähr zehn
9
Vorwort Fragen (Ausnahme: Kapítel 1, dort wird nur eine grobe Einführung gegeben). Anhand dieser Fragen können Sie zum einen Ihr Wissen bzw. das Gelernte überprüfen. Auf die Frage folgen Lösungshinweise dazu, die weiterführende Tipps geben und Sie zu einer richtigen Lösung anleiten sollen. Am Ende des Kapitels finden Sie dann die Lösungen zu allen Aufgaben sowie eine zusätzliche Erläuterung zum Lösungsweg bzw. was es zu beachten gibt. Die Fragen sind nach Schwierigkeitsgrad in drei Kategorien aufgeteilt: Leichte Fragen sind mit möglichst wenig Code zu beantworten oder sind aus irgendeinem anderen Grund nicht aufwändig zu lösen. Beispielsweise wäre es denkbar, dass die Lösung einer ähnlichen Frage bereits zuvor im Kapitel erschienen ist. Mittelschwere Fragen erfordern ein wenig mehr »Gehirnschmalz" als die vorherige Kategorie. Es müssen mehrere Dinge beachtet werden, der Code ist etwas länger oder es gibt eine andere Art von zusätzlicher Schwierigkeit, die es nicht mehr gestattet, diese Frage als »leicht" einzustufen. Schwere Fragen gibt es auch, aber das soll nicht heißen, dass sie unlösbar sind. Stattdessen ist es oft so, dass das Listing ziemlich lang ist, mehrere kleiner Teilaufgaben gelöst werden müssen, eine neue Technik eingesetzt wird oder ein wenig zusätzliche Recherche nötig ist, um die Lösung zu finden. Alle Lösungen zu den Aufgaben finden Sie übrigens auch auf der CD-ROM, die diesem Buch beiliegt.
erstellt von ciando
Einige Absätze in diesem Buch sind gesondert gekennzeichnet:
Das Hand-Symbol deutet auf einen Warnhinweis hin. Beispielsweise berichten wir hier über Browserbugs oder –inkompatibilitäten. Dieses Symbol gibt an, dass hier ein allgemeiner Hinweis kommt. Dabei handelt es sich oft um weiterführende Informationen, die ein wenig außerhalb des Textes stehen sollen. Die Glühbirne symbolisiert einen Tipp – kleine Tricks, Kniffe und Abkürzungen, die Ihnen bei der täglichen Arbeit mit HTML behilflich sein können. An vielen Stellen im Buch finden Sie Beispielslistings, in einer nichtproportionalen Schrift. Der Name unterhalb des Listings ist der Dateiname des Codes auf der Buch-CD-ROM. Listing V.1: beispiels-dateiname.html
10
Inhalt
Inhalt Dieses Buch ist in neun Kapitel aufgebaut, die Ihnen die folgenden Themen näher bringen sollen: 1. Im ersten Kapitel erfahren Sie das Grundprinzip von HTML und XHTML und erhalten eine Übersicht über die verschiedenen Browser. 2. Das zweite Kapitel stellt Ihnen die verschiedenen Möglichkeiten der Textformatierung vor, wie Sie sie noch häufig im World Wide Web finden. In Kapitel 4 erfahren Sie, warum diese Vorgehensweise im Verschwinden begriffen ist. 3. Das dritte Kapitel beschäftigt sich mit einer Reihe verschiedenster Themen: Der Verbindung von Dokumenten untereinander mit Links, dem Einbau von Grafiken sowie der Informationsdarstellung in Listen. 4. Im vierten Kapitel erfahren Sie, wie Sie mit Style Sheets die Inhalte Ihrer Website formatieren können und wieso diese Technik den herkömmlichen, in Kapitel 2 vorgestellten Methoden überlegen ist. 5. Das fünfte Kapitel stellt HTML-Formulare vor, eine der Hauptmöglichkeiten, die dem Besucher den Kontakt mit der Website ermöglicht. Alle Formularelemente werden vorgestellt und Sie erfahren auch, was Sie beim Erstellen eines Formulars beachten müssen, damit es beim Versand keine Probleme gibt. 6. Das sechste Kapitel dreht sich um Tabellen, mit denen Sie Informationen aufbereiten und anordnen können. Die Anwendungsgebiete beschränken sich nicht nur auf Zahlen und statistische Daten, sondern ermöglichen auch layouttechnische Tricks. 7. Im siebten Kapitel erfahren Sie, wie Sie Ihre Website mit Frames aufteilen und mit einem Navigationskonzept versehen können. Gestalterische Aspekte und Browserunterschiede werden dabei nicht vernachlässigt. 8. Das achte Kapitel behandelt wieder einmal Style Sheets, diesmal aber nicht für die Formatierung, sondern für die Positionierung von Elementen. Damit ist mit relativ wenig Aufwand ein pixelgenaues Layout möglich, was sonst mit Tabellen (siehe Kapitel 6) mit viel Aufwand verbunden wäre. 9. Das neunte Kapitel schließlich zeigt Ihnen, wie Sie Ihren HTML-Code verfeinern können. Dabei wird unter anderem auf Optimierung für Suchmaschinen eingegangen.
11
Vorwort
Online-Test Die Bücher der workshop-Reihe ermöglichen Ihnen die Vertiefung Ihrer Fachkenntnisse durch eine große Anzahl praxisbezogener Übungen. Zusätzlich erhalten Sie die Möglichkeit, durch die Teilnahme am Addison-Wesley-OnlineTest das Addison-Wesley-Zertifikat für Computing Professionals zu erwerben. Auf der CD-ROM, die diesem Buch beiliegt, finden Sie eine persönliche Registrierungsnummer, die Sie zur Anmeldung für den Test benötigen. Der Test wurde, wie auch die Übungen im Buch, von den Autoren selbst vorbereitet und kann, eine gründliche Vorbereitung vorausgesetzt, in ca. 45-60 Minuten durchgearbeitet werden. Das Niveau der Fragen schwankt wie bei den Übungen zwischen leicht und schwer. Als technische Voraussetzung für die Durchführung des Tests benötigen Sie lediglich einen Browser, der HTML-Seiten mit Cascading Style-Sheets anzeigen kann. Alle heutigen Browser sind in der Regel dazu in der Lage. Bei erfolgreichem Abschneiden erhalten Sie von uns per E-Mail Ihre persönliche Zertifikatsnummer zusammen mit Ihrem Testergebnis. Über die Online-TestSeite haben Sie mit dieser Nummer jederzeit Zugriff auf Ihr Zertifikat. Die erforderliche Punktzahl für ein erfolgreiches Bestehen des Online-Tests liegt normalerweise bei ca. 70% der Maximalpunktzahl. Sollten Sie diese Punktzahl nicht erreichen oder falls Sie Ihr Ergebnis nochmals steigern möchten, können Sie den Test noch zweimal wiederholen. Insgesamt haben Sie also drei Chancen, den Test zu bestehen. Mit dem Addison-Wesley-Zertifikat für Computing Professionals zeigen Sie sich und anderen, dass Sie die wichtigsten Grundlagen in einem bestimmten Themengebiet beherrschen. Jedes Buch der workshop-Reihe deckt einen anderen Themenbereich ab, zu dem Sie einen Online-Test absolvieren und das dazugehörige Zertifikat erwerben können. Die Autoren und der Verlag Addison-Wesley wünschen Ihnen viel Erfolg.
Feedback Wir haben uns bemüht, in diesem Buch alle wesentlichen Aspekte zu behandeln und interessante und abwechslungsreiche Aufgaben zu erstellen. Wenn Sie der Meinung sind, dass uns dies geglückt ist, lassen Sie es uns wissen – falls nicht, bitte auch. Für konstruktive Kritik, egal ob positiv oder negativ, sowie Anmerkungen und Anregungen aller Art sind wir stets dankbar und Fragen zu diesem Buch beantworten wir gerne (wir können aber aus Zeitgründen keine »fremden" Listings o.ä. korrigieren oder begutachten, bitte haben Sie dafür
12
Feedback Verständnis). Wir haben unter www.workshop-html.de ein buchbegleitendes Online-Angebot eingerichtet, auf dem wir beispielsweise Fehlerkorrekturen veröffentlichen werden, falls Fehler in diesem Buch auftreten. Sie finden dort auch eine Möglichkeit, per E-Mail mit uns in Kontakt zu treten. Wir freuen uns über Ihre Zuschriften! Beachten Sie aber bitte, dass wir E-Mails mit HTML-Formatierungen und/oder Priorität hoch als Letztes lesen. Die anderen Zuschriften lesen wir schneller, mit der Beantwortung kann es aufgrund von zeitlichen Engpässen aber immer wieder etwas dauern. Also: Haben Sie bitte ein wenig Geduld mit uns!
Tobias Hauser, Marianne Pentenrieder, Christian Wenz August 2001
13
1
Einführung
HTML gilt als relativ einfach zu erlernen. Und in der Tat, mit nur wenig Aufwand ist es möglich, erste Seiten zu zimmern. Zumindest galt das früher einmal, als es nur noch um die reine Transportierung von Informationen ging. Heutzutage kommt es immer mehr auf das optische Aussehen einer Seite an, so dass die Anforderung an einen Webdesigner ansteigen. Mit der zunehmenden Verbreitung von Handhelds und anderen, immer kleiner werdenden Endgeräten, die ebenfalls einen Webbrowser enthalten, muss bei der Web-Programmierung immer mehr auf Plattformunabhängigkeit geachtet werden, und das oft auch auf Kosten des Layouts.
1.1
Browsergeschichte
Die Relation World Wide Web gleich Information galt zumindest in den Anfangszeiten des World Wide Web, als es nur einen Webbrowser gab, zunächst Mosaic und dann der Netscape Navigator in den Versionen 1 und 2. Die Gestaltungsmöglichkeiten waren sehr eingeschränkt, und bei den damals eher niedrigen Übertragungsraten kam es auf den schnellen Datentransfer an, weniger auf die Darstellung. Der Software-Riese Microsoft zog mit – wie Gründer Bill Gates später zugab – reichlich Verspätung nach, der Internet Explorer 2 war aber kein ernstzunehmendes Konkurrenzprodukt für Netscape. Das änderte sich mit Version 3, die zusammen mit dem neuen Privatkunden-Betriebssystem Windows 95 mitgeliefert wurde. Die (technologische) Lücke zu Netscape wurde geringer und spätestens mit Version 4 zogen die Entwickler aus Redmond, dem Hauptsitz von Microsoft, mit ihren Konkurrenten gleich, auch in Sachen Benutzerzahlen. Bevor wir böse E-Mails bekommen: Die steigende Benutzerzahl ist wohl auch auf die fragwürdige Praxis, Browser ans Betriebssystem sowie an andere Softwareprodukte (wie etwa Outlook) zu koppeln, zurückzuführen. War zu Zeiten von Netscape 4 und Internet Explorer 4 das Verhältnis zwischen den beiden Konkurrenten – oft auch zum Kampf zwischen Gut und Böse hochstilisiert – einigermaßen ausgeglichen, so ging es von da an für Netscape stetig bergab. Die Version 4 wurde nicht mehr nennenswert weiterentwickelt, die zum Zeitpunkt der Drucklegung aktuelle Version 4.78 enthält für den Browser größtenteils dieselbe Codebasis wie die Versionen 4.0x, lediglich der Mailclient wurde ein wenig aufgepeppt. Microsoft dagegen brachte immer neue Versionen heraus, seit Version 5.5 kann der Internet Explorer sogar eine Druckvorschau (beim Netscape Navigator übrigens seit Version 2 implementiert). Zur Zeit aktuell ist eine Beta-Version vom Internet Explorer 6, die finale Version 6 soll zusammen mit dem neuen Microsoft-Betriebssystem Windows XP erscheinen.
15
1 Einführung Während sich die beiden Riesen Netscape und Microsoft mit großem Einsatz (sowohl personell als auch materiell) duelliert haben, hat sich still und heimlich eine kleine norwegische Firma auf dem dritten Platz im »Browserkrieg« niedergelassen. Der Opera-Browser ist klein, schnell und steht den großen Konkurrenten nur in wenig nach. Seit Version 5 ist der Browser kostenlos (es wird aber ein permanentes Werbebanner eingeblendet), die vorhergehenden Versionen waren dagegen kostenpflichtig. Es soll nicht verschwiegen werden, dass die inzwischen an dritter Stelle rangieren, aber trotzdem weit abgeschlagen hinter Microsoft und Netscape liegen. Netscape, mittlerweile von AOL aufgekauft, unternimmt noch einen Versuch, die Microsoft-Bastion zu erstürmen, vermutlich den letzten. Seit 1999 wurde der Browser komplett neu geschrieben und zwar als Open Source – jedermann und –frau kann sich also an der Entwicklung beteiligen, der Quellcode liegt offen. Die aktuellen Netscape-Versionenen 6.01 und 6.1 (erst Anfang August erschienen) bedient sich der Codebasis des Open-Source-Projekts. Die Qualität dieser Version lässt noch deutlich zu wünschen übrig und auch das Argument, die neue Version würde Standards besser unterstützen, tröstet nur wenig. Der Kunde ist an der guten Darstellung von Webseiten interessiert und dazu muss eine gewisse Abwärtskompatibilität gegeben sein. Es bleibt also spannend – wird eine stabile Netscape-Version den MicrosoftThron erstürmen können? Wir bleiben am Ball ...
1.2
Testumgebung
Wenn Sie HTML-Seiten für den professionellen Einsatz erstellen möchten, sollten diese Seiten auf so vielen Systemen wie möglich getestet werden. Optimal ist es, wenn Sie sowohl Windows als auch Linux als auch Macintosh einsetzen. Die diversen Betriebssysteme verwenden beispielsweise unterschiedliche Schriftarten, so dass eine Seite unter Umständen unter einem System gut, unter einem anderen jedoch schlecht funktioniert. Doch die Haupttestplattform ist – wie Erhebungen immer wieder zeigen – die Windows-Plattform. Auf dieser stehen die drei größten Browser zur Verfügung (Microsoft portiert seinen Browser aus nahe liegenden Gründen eher ungerne). Sie können und sollten auch diese Browser parallel installieren und laufen lassen, um mögliche Überraschungen nach der Veröffentlichung der Website auszuschließen. Die Einschränkung einer Website auf nur einen Zielbrowser (»optimiert für ...«) ist eine arrogante Attitüde, die sich ein professioneller Dienstleister nicht leisten kann. Das Ziel lautet Plattform- und Browserunabhängigkeit, denn wer über eine Website etwas verkaufen will, darf seinen Kunden nicht vorschreiben, unter welchem System/Browser er die Seiten besuchen muss. Allzu schnell ist der potenzielle Kunde wieder weg.
16
Testumgebung
1.2.1
Netscape Navigator 4
Wie bereits erwähnt, ist die zurzeit (August 2001) aktuelle Netscape-Version 4.78 und unter home.netscape.com/download erhältlich. Diese Version gibt es momentan nur auf englisch, die letzte deutsche Sprachversion ist unter der Version 4.75 erhältlich. Etwa jede zweite oder dritte Netscape-Version wird lokalisiert, so dass Sie am besten die jeweils aktuellste englische Version einsetzen. Normalerweise sollten Sie mit einem Update immer vorsichtig sein, denn nicht jeder Nutzer springt sofort auf neue Versionen um. Bei Netscape-Unterversionen ändert sich in der Regel am Browserverhalten nichts, er wird nur (zumindest wenn man den Release Notes glauben schenken darf) ein wenig fehlerfreier, schneller und stabiler. Abbildung 1.1: Netscape Navigator
Auf den Netscape-Archiv-Seiten sind auch noch ältere Versionen erhältlich, die parallel zur Version 4.x installiert werden können. Deren Verbreitung ist jedoch mittlerweile im Promillebereich, so dass Sie die Installation nicht wagen müssen. Hier ist übrigens wirklich von einem Wagnis zu sprechen, denn die älteren Versionen wurden mit neueren Betriebssystemen nicht getestet – wie auch, die gab es damals noch gar nicht.
1.2.2
Netscape Navigator 6
Ebenfalls unter home.netscape.com/download erhalten Sie Netscape 6, die neueste Netscape-Version, auf Basis des Open-Source-Projekts Mozilla. Die Homepage dieses Projekts ist www.mozilla.org und dort können Sie auch den
17
1 Einführung Browserkern herunterladen, der aktueller und fehlerfreier als die Netscape-Version ist. Ihre Kunden werden jedoch wahrscheinlich die Netscape-Version einsetzen. Die Software kommt mit einem Installationsprogramm, welches die benötigten Komponenten aus dem Internet lädt und installiert. Es besteht jedoch auch die Möglichkeit, eine einzelne, große Datei herunterzuladen und dann das Installationsprogramm aufzurufen. Abbildung 1.2: Netscape 6 (genauer: Version 6.1)
Die meisten Browser stehen auch auf den Begleit-CD-ROMs von verschiedenen Computerzeitschriften zur Verfügung – womöglich nicht immer in der aktuellsten Version. Der Browser steht in mehreren Sprachen zur Verfügung, die Qualität insbesondere der deutschen Übersetzung ist jedoch teilweise mangelhaft (beispielsweise genau falsch herum beschrifteten Dialogfenstern). Bleiben Sie also am besten bei der englischen Version, der für die Darstellung von Webseiten zuständige Code (das, was Sie ja eigentlich interessiert) ist jeweils identisch.
1.2.3
Internet Explorer
Die erste ernstzunehmende Version des Microsoft Internet Explorer war Version 3. Diese ist mittlerweile kaum mehr im Einsatz und kann ignoriert werden. Ihr Einsatz ist sowieso recht knifflig, denn jede Internet-Explorer-Version überschreibt den Vorgänger. Es besteht jedoch die Möglichkeit, den Internet Explorer 4 (der immer noch recht weit verbreitet ist) und eine neuere Version (5.0SP2, 5.5SP2 oder 6) parallel laufen zu lassen. Dazu müssen Sie erst die Ver-
18
Testumgebung sion 4 installieren (sofern nicht eh schon vorhanden) und dann das Installationsprogramm für die neue Version aufrufen (erhältlich unter www.microsoft.com/windows/ie_intl/de/download). Klicken Sie auf die Schaltfläche ERWEITERT und wählen Sie dann den Kompatibilitätsmodus aus. Abbildung 1.3: Der Kompatibilitätsmodus löscht Version 4 nicht.
Sodann steht Ihnen unter START/PROGRAMME/INTERNET EXPLORER/VORHERIGE INTERNET EXPLORER VER. 4 der Internet Explorer 4 zur Verfügung. Über START/PROGRAMME/INTERNET EXPLORER rufen Sie wie gewohnt die neuere Version auf. Testen Sie also in beiden Versionen. Abbildung 1.4: Microsoft Internet Explorer (Version 5.01 SP2)
19
1 Einführung
1.2.4
Opera
Der Opera-Browser führte eine Zeitlang auch deswegen ein Schattendasein, weil er – im Gegensatz zum Netscape Navigator und zum Microsoft Internet Explorer – kostenpflichtig war. Das hat sich in Version 5 geändert, der Browser kommt mit einem wechselnden Werbebanner, das immer eingeblendet wird. Gegen Zahlung können diese Banner jedoch abgeschaltet werden. Es gibt zwei Versionen des Browsers – eine schlanke, ohne Java-Unterstützung, und eine mit Java, die etwa viermal so groß ist. Unter www.opera.com erhalten Sie die jeweils aktuellste Version in verschiedenen Sprachen. Abbildung 1.5: Opera (Version 5.12; rechts oben ein Werbebanner)
1.3
HTML/XHTML
HTML ist eine Seitenbeschreibungssprache, also keine Programmiersprache, auch wenn das selbsternannte »HTML-Götter« oft gerne behaupten. Die Idee von HTML war, die Struktur einer Webseite zu beschreiben – welcher Text verwendet wird, wie er hierarchisch angeordnet ist. HTML-Erweiterungen wie CSS (Cascading Style Sheets) ermöglichen es, dieses Konzept zu konterkarieren. So ist es möglich, das exakte Aussehen einer Seite zu bestimmen (wenngleich dieses Vorgehen hin und wieder an Fehlern und Unterschieden in den verschiedenen Browsern scheitert). Die endgültige Darstellung obliegt dann dem Browser. Beim zunehmenden Sammelsurium verschiedener Browser beginnt man sich auf die ursprüngliche Intention von HTML zurückzubesinnen – der hierarchischen Anordnung von Daten, mit weniger Fokus auf die layouttechnische
20
HTML/XHTML exakte Darstellung. Aus diesem Grund ist auch ein »sauberer« HTML-Code wichtig, um Seiten zu erstellen, die auch in Zukunft auf den verschiedensten Endgeräten angezeigt werden.
1.3.1
HTML
HTML, die Hypertext Markup Language (deutsch: Hypertext Beschreibungssprache), baut auf dem Prinzip der so genannten Tags auf. Ein Tag wird durch spitze Klammern eingegrenzt:
Groß- und Kleinschreibung wird dabei jeweils ignoriert, einem Webbrowser ist es also egal, wie das Tag geschrieben wird. 왘 왘 왘 왘
Die meisten Tags haben auch ein zugehöriges End-Tag, das mit einem Schrägstrich eingeleitet wird:
Bei fast allen Tags können Sie zusätzliche Einstellungen tätigen, die sich dann in der Darstellung des HTML-Elements im Browser auswirken. Dazu können Sie Parameter und Attribute einsetzen. Die Begriffe »Parameter« und »Attribut« werden – je nach Quelle – ambivalent eingesetzt. Die Unterscheidung, die wir an dieser Stelle treffen, ist also nicht bindend. Ein Parameter wird einfach zusätzlich zum Tagnamen angegeben. Beispielsweise wird durch das -Tag eine horizontale Linie ausgegeben, und zwar normalerweise mit einer 3D-Darstellung. Der Parameter noshade sorgt dafür, dass dieser 3D-Effekt nicht eingesetzt wird:
Ein Attribut sieht so aus wie ein Parameter, mit dem Unterschied, dass einem Attribut ein zusätzlicher Wert mitgegeben werden kann. Beispielsweise gibt es das -Tag, das eine Grafik ausgibt. Im Attribut src wird der Name der Grafik angegeben, in den Attributen width und height die Breite und Höhe der Grafik:
21
1 Einführung Sie sehen, dass die Werte der Attribute in doppelte Anführungszeichen eingeschlossen wurden. Alternativ dazu können Sie auch einfache Anführungszeichen verwenden, und innerhalb der Syntax variieren:
Die Reihenfolge der Attribute ist dabei völlig unerheblich:
Die meisten Browser stören sich nicht daran, wenn die Anführungszeichen weggelassen werden:
Allerdings ist dies kein guter Stil, mehr dazu im nächsten Abschnitt. Der allgemeine Aufbau einer HTML-Datei ist folgender: Titel des Dokuments
Das gesamte HTML-Dokument wird also durch das -Tag eingefasst. Innerhalb des HTML-Dokuments gibt es einen Kopfabschnitt, durch eingefasst. In diesem Abschnitt werden allgemeine Informationen über die Datei abgelegt, beispielsweise der Seitentitel, umgeben von und . Dieser Seitentitel wird in der Titelleiste des Browserfensters angezeigt. Im Inhaltsabschnitt des HTML-Dokuments steht dann der eigentliche Inhalt der Seite; er wird durch und eingefasst.
1.3.2
XHTML
Ein weiterer wichtiger Internet Standard ist XML, eine Abkürzung für Extensible Markup Language, zu Deutsch Erweiterbare Beschreibungssprache. Diese Sprache ist zur Zeit sehr beliebt bei der Verwaltung und Speicherung strukturierter Daten. XML ist HTML ähnlich, aber die Regeln für ein »wohlgeformtes« (syntaktisch korrektes) XML-Dokument sind deutlich strenger als die von HTML. Ein HTML-Dokument, das in allen Browsern korrekt angezeigt wird, ist nicht notwendigerweise XML-konform. Als Zeichen der Bestrebungen HTMLDokumente XML-konform zu machen, hat das W3C-Konsortium einen neuen Standard definiert, XHTML. Das ist nichts Weiteres als der bisherige HTMLStandard mit zusätzlichen Regeln, damit die entstehenden Dokumente (in Bezug auf XML) wohlgeformt sind.
22
HTML/XHTML Ein HTML-Dokument in ein XHTML-Dokument umzuformen ist eine Sache. Sicherzustellen, dass die Browser das XHTML-Dokument auch korrekt interpretieren, eine andere. Gehen Sie wie folgt vor: 1. Fügen Sie vor eine der folgenden Deklarationen ein:
Erstere Deklaration ist das »strenge« XHTML, letztere eine etwas nachgiebigere Variante, die einen einfacheren Übergang von HTML zu XHTML ermöglichen soll. Beispielsweise erlaubt diese noch einige der herkömmlichen Formatierungsmethoden, die in Kapitel 2 vorgestellt werden. 2. Achten Sie darauf, dass alle Tags in Kleinbuchstaben geschrieben sind. 3. Stellen Sie sicher, dass jedes Tag wieder geschlossen wird. »Leere« Tags wie beispielsweise , die also kein End-Tag haben, werden wie folgt geschlossen:
Das Leerzeichen vor dem Schrägstrich ist wichtig, sonst bereiten einige Browser Probleme. Die Langform wäre theoretisch ebenfalls möglich, manche Browser kommen damit aber nicht zurecht. 4. Alle Attribute müssen in doppelte Anführungszeichen eingefasst werden. 5. Tags dürfen sich nicht überlappen. Folgende Schreibweise ist also inkorrekt: workshop html
Richtig: workshop html
Es gibt noch eine Reihe weiterer Regeln, aber fürs erste genügen diese Hinweise. Unter validator.w3.org können Sie XHTML-Dokumente auf korrekte Syntax prüfen lassen. Die Listings in diesem Buch sind nicht alle XHTML-konform. Beispielsweise entsprechen einige Positionierungsattribute nicht dem neuen XHTML-Standard. Diese sind jedoch noch weit verbreitet und müssen deshalb in diesem Buch erwähnt werden. Wir haben uns jedoch um weitestgehende XML-/XHTML-Konformität bemüht, insbesondere achten wir darauf, alle Tags zu schließen. Nur ... (no line break). Falls Sie dem Surfer das horizontale Scrollen trotzdem ersparen wollen, haben Sie die Möglichkeit innerhalb der <nobr>-Tags Stellen zu markieren, an denen der Browser umbrechen kann, falls es nötig werden sollte. Diese Stellen werden durch das einfache Tag <wbr /> gekennzeichnet (das Tag wird bisher nur vom Microsoft Internet Explorer unterstützt). In Abbildung 2.3 und Abbildung 2.4 ist dieser Effekt nachvollziehbar. Zeilenumbruch
Der Browser soll hier umbrechen. Und dann noch einmal. Ansonsten darf er in diesem Absatz umbrechen, wann immer es die Größe des Browserfensters erfordert.
<nobr>Jetzt soll der Browser überhaupt nicht umbrechen, und sollte die Zeile auch noch so lang werden. Er darf keine neue beginnen.
<nobr>In diesem Absatz darf nur an dieser Stelle<wbr /> umgebrochen werden. Keinesfalls an einer anderen Stelle.
Einfache Textgestaltung wie fett, kursiv oder unterstrichen kann in HTML durch einfache Tags realisiert werden. Text, den der Browser fett wiedergeben soll, muss in die Tags ... eingeschlossen werden (bold), für kursive Textabschnitte verwendet man ... (italic), und unterstrichene Passagen müssen mit ... (underline) eingefasst werden. Die drei Tags können belie-
31
2 Textformatierung big kombiniert, d.h. auch verschachtelt werden. Kann ein Browser ein solches Tag nicht interpretieren, so gibt er den Text einfach als normalen Fließtext wieder. Heutzutage unterstützen jedoch fast alle Browser diese einfachen Formatierungs-Tags. Für Hervorhebungen haben Sie außerdem die Möglichkeit Textabschnitte in einer sogenannten diktengleichen Schriftart auszuzeichnen. Diktengleiche Schriften unterscheiden sich von anderen dadurch, dass jeder Buchstabe die gleiche Breite einnimmt. Benutzen Sie hierfür die Tags .... Gestaltung
Fetter Text fällt auf. Er hebt sich vom normalen Text ab.
Ebenso ist es mit kursiven Passagen.
Unterstrichen sieht es auch gut aus.
Und jetzt mal alles drei kombiniert!
Zum Schluss eine diktengleiche Schrift.
Listing 2.4: fett_usw.html Abbildung 2.5: Fett, kursiv und unterstrichen.
32
Logische Textauszeichnung
2.5
Logische Textauszeichnung
In HTML gibt es Formatierungsbefehle, die sich auf den Inhalt des zu formatierenden Textes beziehen. Alle diese Befehle heben die eingeschlossene Textstelle in besonderer Art und Weise hervor. Der Browser stellt die unterschiedlich ausgezeichneten Stellen zwar sehr ähnlich dar (meist fett, kursiv, oder in einer anderen Schriftart), trotzdem sollten Sie im Sinne einer sauberen Programmierung den jeweiligen Befehl auch nur für den entsprechenden Inhalt verwenden. Im Folgenden sehen Sie eine kurze Aufzählung der einzelnen Befehle mit den jeweiligen Besonderheiten (in einen Beispielcode eingebettet). Textauszeichnung
<strong>strong: für wichtige Textstellen; der Text wird fett dargestellt
<em>em: Textstellen mit Betonung; eine kursive Darstellung ist üblich
<samp>samp: für Beispiele; es wird oft eine diktengleiche Schriftart verwendet
dfn: für Definitionen; kursive Darstellung
kbd: für Tastatureingaben; Ausgabe in diktengleicher Schriftart
var: für Variablen; kursive Darstellung
cite: für kurze Zitate; kursive Darstellung
blockquote: für längere Zitate; Absatz wird als leicht nach rechts versetzt, eingerückt wiedergegeben. Vor und nach dem betreffenden Absatz wird hierbei automatisch umgebrochen.
code: für Code-Stellen; Ausgabe in diktengleicher Schriftart
address: für Adressen; kursive Darstellung. Der Browser bricht nicht automatisch nach Name, Straße usw. um. Benutzen Sie den Zeilenumbruch. Markus Muster Musterstr. 9 99999 Musterstadt
Wenn Sie möchten, dass ein Textabschnitt genau so wiedergegeben wird, wie Sie diesen im HTML-Code eingegeben haben, so verwenden Sie die Tags <pre>... (preformatted). Leerzeilen, Zeilenumbrüche und Tabulatoren werden direkt vom Browser aus dem Code übernommen, ohne dass Sie mit oder
...
operieren müssen. Zudem wird der Text meist in einer nicht proportionalen Schriftart ausgegeben, um ihn zusätzlich auszuzeichnen. Bei den Tabulatoren ist jedoch Vorsicht geboten, denn sie sind veränderbar. Somit ist eine identische Darstellung im Browserfenster des Benutzers durchaus nicht immer gewährleistet. Das Attribut width kann zum <pre>-Tag optional hinzugefügt werden. Es beschränkt die Länge der vorformatierten Zeile auf eine angegebene Anzahl von Zeichen. Dieses Attribut wird jedoch nicht von allen Browsern unterstützt. Vorformatiertes
<pre>Mal sehen ob das klappt mit dem vorformatieren.
34
Schriftgestaltung
In diesen Absatz haben wir im Quellcode auch Zeilenumbrüche eingebaut. Man kann sie jedoch nicht sehen, denn dieser Absatz ist nicht als vorformatierter Absatz definiert. Zeilenumbrüche im Code werden folglich durch den Browser nicht angezeigt.
Wir wollen im folgenden Absatz auf die Gestaltungsmittel Schriftgrö ß e, Schriftfarbe und Schriftart eingehen.
2.7.1
Schriftgrö ß e
Die Funktionen bezüglich der Schriftgestaltung werden in HTML mit Hilfe des Font-Tags codiert: .... Für die verschiedenen Einsatzmöglichkeiten werden dann verschiedene Attribute verwendet. Von den meisten Browsern wird das Attribut size unterstützt, mit Hilfe dessen man die Schriftgrö ß e festlegen kann. Es sind Werte zwischen eins und sieben als Eingabe möglich. Hierbei ist zu beachten, dass der Browser, soweit er keine Vorgaben hat, mit der Schriftgrö ß e drei operiert.
35
2 Textformatierung ... würde uns die kleinstmögliche Schrift liefern, size="7" analog die grö ß tmögliche. Bei den oben angeführten handelt sich um absolute Schriftgrö ß enangaben. Beachten Sie bitte, dass man diese Art der Schriftgrö ß enangabe zwar als absolute Angaben bezeichnet, man kann jedoch nicht davon ausgehen, dass die Schriftgrö ß e auf jedem Bildschirm gleich ausgegeben wird. Die Bildschirmeinstellungen des Benutzers und andere Faktoren haben Einfluss auf die Darstellung. Abgesehen davon gibt es auch noch die relativen Schriftgrö ß en-Veränderungen. Hierbei kann man über das -Tag eine Basisschriftgrö ß e festlegen und anschließend mit den Zuweisungen size="+x" bzw. size="-x" eine Vergrö ß erung bzw. Verkleinerung vornehmen. Es ist jedoch darauf zu achten, dass die neu eingestellte Grö ß e immer noch im Bereich zwischen eins und sieben liegt. Abbildung 2.8: Verschiedene Schriftgrö ß en.
Hier ein Beispiel zur Verdeutlichung: Schriftgestaltung
Das ist groß.
36
Schriftgestaltung
Das ist aber klein! Jetzt ist es wieder besser!
Listing 2.7: schriftgroesse.html
Einfachere Möglichkeit der Schriftgrö ß enveränderung: Prinzipiell gibt es noch eine einfachere Möglichkeit der relativen Schriftgrö ß enVeränderung. Sie ist zwar nicht so komplex, aber für die einfache Formatierung häufig schon ausreichend. Um eine Textstelle in grö ß erer Schrift als den Fließtext darzustellen, verwendet man die Tags .... Analog verkleinern die Tags <small>... die eingefasste Textstelle. Hierauf kommen wir im nächsten Abschnitt zurück.
2.7.2
Hoch- und tiefgestellte Zeichen
Um beispielsweise Quadratzahlen ordentlich darstellen zu können benötigt man die Tags <sup>... (Superscript). Die betreffenden Zeichen werden dann vom Browser hochgestellt wiedergegeben. Für Indizes existiert analog dazu: <sub>.... Diese Tags bewirken eine leichte Versetzung nach unten. Um ein ordentliches Gesamtbild zu erhalten, sollten Sie zusätzlich darauf achten, dass die hoch- und tiefgestellten Zeichen in verkleinerter Schriftart codiert werden, d.h. zusätzlich die Zeichen durch die <small>... Tags einfasst werden. Schriftgestaltung
In der Mathematik braucht man schon mal hochgestellte Zeichen. Betrachten Sie den Satz des Pythagoras:
a<sup><small>2 + b<sup><small>2 = c<sup><small>2
Und Indizes sind in der Chemie sehr beliebt:
H<sub><small>2O
Listing 2.8: hoch_und_tief.html
37
2 Textformatierung Abbildung 2.9: Hoch- und tiefgestellte Zeichen.
2.7.3
Schriftarten
Zur Festlegung der Schriftart dient das Attribut face. Grundsätzlich kann jeder Schriftartname dem face-Attribut zugeordnet werden. Die Verwendung des Attributs ist jedoch nicht ohne Risiken. Zum einen kann es passieren, dass die vorgegebene Schriftart nicht bei jedem Nutzer der Seite installiert ist und somit auch nicht angezeigt werden kann. Zum anderen ist die Namensgebung nicht auf allen Plattformen identisch. Zwar erlaubt das -Tag die Angabe von Alternativen, jedoch ist auch hier eine korrekte Ausführung nicht sicherzustellen. Beispiel: ... Betrachten Sie als Beispiel Abbildung 2.10.
2.7.4
Schriftfarben
Farbeinstellungen werden inzwischen auch von den meisten Browsern unterstützt. Das hier einzusetzende Attribut heißt color. Die Werte, die dieses Attribut annehmen kann, können auf verschiedene Art und Weise eingegeben werden. Möglich ist eine Eingabe über die Farbnamen (Es gibt 16 vordefinierte Farbnamen die von den meisten Browsern unterstützt werden: white, aqua, fuchsia, blue, yellow, lime, red, silver, gray, teal, purple, navy, olive, green, maroon, black). Sicherer ist jedoch die Eingabe über sogenannte RGB-Werte.
38
Schriftgestaltung
RGB-Werte sind Codes für verschiedene Farben und Farbnuancen. Es handelt sich um eine hexadezimale Eingabe. RGB-Wert ist die Abkürzung für Rot-GrünBlau-Wert (red-green-blue). Die einzelnen Farbnuancen werden als Mischungen aus diesen Grundtönen angegeben. Codiert werden sie durch ein »Doppelkreuz« und eine Folge von sechs Zahlen bzw. Buchstaben (die Ziffern von null bis neun und die Buchstaben A bis F). Grundsätzlich ist die Verwendung von RGB-Werten zu empfehlen, falls man eine Tabelle zur Hand hat (die meisten Grafikprogramme bieten eine solche Tabelle). Diese Variante der Angabe von Farben ist zwar umständlicher, aber in jedem Fall sicherer als die Verwendung von Farbnamen. Beispiel: color="#F1B2B2" Schriftgestaltung
Ich möchte eine diktengleiche Schriftart ausprobieren und sie soll dunkelblau sein.
Mal sehen wie im Vergleich dazu diese Farbe hier wirkt.
Listing 2.9: color_and_face.html Abbildung 2.10: Schriftarten und Schriftfarben.
39
2 Textformatierung
2.7.5
Standard festlegen
Wenn Sie während Ihres gesamten HTML-Dokuments eine Schriftgrö ß e, Schriftart oder Schriftfarbe verwenden möchten, die nicht dem Browserstandard entspricht, so können Sie das im Kopf Ihres Dokuments als Standard definieren. Das hindert Sie jedoch trotzdem nicht daran im weiteren Verlauf des Dokuments einzelne Textpassagen mit anderen Farben, Grö ß en oder Schriftarten auszuzeichnen. Das Definieren des Standards funktioniert mit dem -Tag, das, wie bereits erwähnt, im HTML-Kopf stehen muss, oder theoretisch auch am Beginn eines Absatzes, um nur diesen zu reglementieren. Leider unterstützt der Netscape Navigator 4 dieses Attribut nur eingeschränkt (nur Schriftgrö ß e) und der Netscape Navigator 6 unterstützt es gar nicht mehr. Standard
Hier sehen wir einen Text, für den eine spezielle Farbe, Größe und Schriftart festgelegt wurde.
Listing 2.10: standard.html Abbildung 2.11: Standardeinstellungen für Grö ß e, Farbe und Schriftart.
40
Seitenlayout
2.8
Seitenlayout
Genau wie in Ihrem Textverarbeitungsprogramm, können Sie auch mit HTML bestimmte Eigenschaften Ihrer Seiten selbst definieren.
2.8.1
Hintergrundfarbe
Selbstverständlich bietet Ihnen HTML die Möglichkeit für Ihre Seiten andere Hintergrundfarben als Weiß oder Grau (also die Standardfarben) zu benutzen. Hierfür fügen sie einfach in das -Tag das bgcolor-Attribut (backgroundcolor) mit der gewünschten Farbe ein. Beispiel: Betrachten Sie den Effekt in Abbildung 2.12.
2.8.2
Seitenränder
Auch den Seitenrand können Sie nach Ihren Vorstellungen einstellen. Die oberen und unteren Ränder lassen sich durch das Attribut topmargin im Tag festlegen (Angabe in Pixel). Die rechten und linken durch leftmargin. Hier ein Beispiel für Hintergrundfarbe und Seitenränder (Abbildung 2.12): Seitenlayout
Hier kommt Text in Weiß auf schwarzem Hintergrund! Betrachten Sie genau den Abstand zum Rand.
Listing 2.11: layout.html
2.9
Linien
Für horizontale Linien gibt es einen einfachen HTML-Befehl: Folgende Attribute können Sie hierbei festlegen: 왘 size=»Zahl«: Gibt die Dicke der Linie an. 왘 width=»Pixel- oder Prozentangabe«: Gibt die Länge der Linie an. 왘 align=»right« (center, left): Gibt die Ausrichtung an. 왘 noshade: Die Linie wird ohne Schatten dargestellt. 왘 color=»#......«: Legt die Farbe der Linie fest.
41
2 Textformatierung Abbildung 2.12: Hintergrundfarbe und Abstände zum Seitenrand.
Der Netscape Navigator unterstützt das Attribut color nicht. Das schränkt die Möglichkeiten der Verwendbarkeit von Linien als Gestaltungsmittel leider erheblich ein. Im Kapitel über Grafiken lernen Sie andere Möglichkeiten kennen, um das Gestaltungsmittel Linie trotzdem einsetzen zu können. Betrachten Sie deshalb die Interpretation des Microsoft Internet Explorers in Abbildung 2.13: Abbildung 2.13: Verschiedene Linien.
Zum Schluss des Kapitels wollen wir noch auf ein paar kleinere, aber in Einzelfällen sehr nützliche Formatierungsmöglichkeiten zu sprechen kommen.
2.10.1
Durchgestrichene Textstellen
Um eine Textpassage durchgestrichen erscheinen zu lassen, wird sie durch die Tags <strike> ... eingefasst. Für den Privatnutzer ist diese Funktion wohl eher selten zu gebrauchen. Diese Verwendung ist eher im Verkaufsbereich praktikabel, wo reduzierte Produkte mittels Durchstreichen des ursprünglichen Preises kenntlich gemacht werden (siehe Beispielcode weiter unten).
2.10.2
Blinkende Textpassagen
Blinkende Textstellen ziehen zwar die Aufmerksamkeit auf sich, jedoch sollte dieser Befehl nur äußerst selten verwendet werden. Zum einen, weil er von vielen Browsern nicht unterstützt wird (von den bekannten Browsern unterstützt ihn nur der Netscape Navigator), zum anderen, weil solche Textstellen auf einem Ausdruck nicht erscheinen, was unter Umständen äußerst unangenehm sein kann. Trotzdem möchten wir Ihnen dieses Tag nicht vorenthalten: ... (siehe Beispielcode weiter unten).
2.10.3
Laufschrift
Der als Laufschrift ausgezeichnete Text läuft wiederholt von links nach rechts über den Bildschirm. Der Gebrauch dieses Befehls ist nur eingeschränkt zu empfehlen, da er von wenigen Browsern unterstützt wird (z.B. vom Microsoft Internet Explorer, nicht jedoch vom Netscape Navigator 4 und 6). Hier die Attribute, mit denen er kombiniert werden kann: <marquee>...
43
2 Textformatierung 왘 align="top" (middle, bottom): Gibt die Ausrichtung an. 왘 behavior="scroll" (Standard), "alternativ" (von links nach rechts und
zurück), "slide" (Text läuft herein und bleibt stehen) 왘 bgcolor: Gebrauch wie üblich. 왘 height=»Pixel- oder Prozentangabe«: Spezifiziert die Höhe des Bereichs. 왘 width=»Pixel- oder Prozentangabe«: Spezifiziert die Breite des Bereichs. 왘 hspace=»Pixel- oder Prozentangabe«: Breite des Randbereichs links und
rechts. 왘 vspace=»Pixel- oder Prozentangabe«: Breite des Randbereichs oben und
unten. 왘 loop=»Zahl«: Legt Anzahl der Wiederholungen fest. 왘 scrollamount=»Zahl«: Anzahl der Pixel, um die der Text bei jeder Ausgabe
nach rechts verschoben wird. 왘 scrolldelay=»Zahl«: Millisekunden, um die die Wiederausgabe verzögert
wird. Abbildung 2.14: Durchgestrichener, blinkender und Lauftext.
Spezielles
44
Verschachtelte Tags
<strike>Das hier ist durchgestrichen.
Dieser Satz blinkt!
<marquee align="bottom" behavior="slid" bgcolor="#456375" height=”30%” width=”300” hspace=”20%” vspace=”40” loop=”3” scrollamount=”28” scrolldelay=”33”>Das hier ist ein Lauftext!
Listing 2.13: effects.html
2.11
Verschachtelte Tags
Das Verschachteln von Tags ist in den meisten Fällen problemlos möglich. Jedoch sollten Sie darauf achten, dass die Tags auch in der richtigen Reihenfolge wieder geschlossen werden. Eine Verletzung dieser Sorgfalt wird von den meisten Browsern zwar toleriert, im Sinne einer sauberen Programmierung sollten Sie es jedoch trotzdem vermeiden. Im Normalfall sollte das zuletzt geöffnete Tag als erstes wieder geschlossen werden, d.h. verschachtelte Tags sollten nicht in ü » berlappender« Form verwendet werden. Im Folgenden ein Beispiel für falsche Anwendung: Heute feiern wir den Geburtstag von Inge.
2.12
Aufgaben
Aufgabe 1
Codieren Sie folgendes Gedicht derart, dass es so selten wie möglich umgebrochen wird und falls nötig nur an den Stellen, die zu einem Reim gehören. (Verwenden Sie für diese Aufgabe möglichst den Microsoft Internet Explorer.) »Gott schuf die Welt vor alten Zeiten, zuletzt vom Mann ein Exemplar, und das schien wahrlich anzudeuten, dass Gott schon etwas müde war...« (Quelle unbekannt) Aufgabe 2
Versuchen Sie einen Text zu erzeugen, der folgende Bedingungen erfüllt: 왘 die ersten vier Worte sollen fett sein, 왘 dann zwei Worte, die fett und kursiv sind,
45
2 Textformatierung 왘 schließlich drei Worte die nur kursiv sind, 왘 es folgen zwei Leerzeilen, 왘 zum Schluss ein kursives und unterstrichenes Wort am rechten Seitenrand.
Aufgabe 3
Bauen Sie folgende Absatzgestaltung mit Texten Ihrer Wahl nach: 왘 Zentrierte, möglichst große Überschrift; 왘 es folgt ein Absatz beliebiger Länge, der rechtsbündig ist; 왘 eine 300 Pixel lange und 40 Pixel breite Linie trennt ihn von einem linksbün-
digen Absatz; dieser soll mit einer möglichst kleinen Überschrift versehen sein. Aufgabe 4
Erstellen Sie eine Seite, die Ihre Adresse mit weißer Schrift auf schwarzem Hintergrund zeigt. Verwenden Sie dabei die logische Textauszeichnung. Achten Sie darauf, dass nach dem Namen und der Straße jeweils umgebrochen wird. Aufgabe 5
Wir wollen einen vorformatierten Text darstellen, der 30 Pixel vom oberen und unteren Seitenrand entfernt ist, und 60 vom linken und rechten. Der vorformatierte Text kann etwa so aussehen: La le lu, nur der Mann im Mond schaut zu, wenn die kleinen Babys schlafen... Aufgabe 6
Betrachten Sie folgenden HTML-Code. Versuchen Sie die Fehler zu finden. Beispielcode
Hier fängt der Text an!
<size="-3">Jetzt wollen wir relativ auszeichnen Listing 2.14: fehler.html
46
Hinweise Aufgabe 7
Erstellen Sie eine Seite mit folgenden Eigenschaften: 왘 alle Seitenränder betragen 30 Pixel, 왘 zuoberst ist eine zentrierte grüne Linie, die 40% des Browserfenster lang
ist, 19 Pixel breit und keinen Schatten hat, 왘 es folgt in einem eigenen rechtsbündigen Absatz ein kurzer Text (Ihrer
Wahl), der in der Schriftart »Courier New« dargestellt werden soll und falls diese nicht installiert ist, möglichst in »Arial«. Aufgabe 8
Wir wollen nun die verschiedenen Schriftarten vergleichen. Definieren Sie als Basisschriftart »Times New Roman«. Der erste Absatz soll in dieser Schriftart dargestellt werden. Dann soll ein Absatz folgen, in dem der Browser eine diktengleiche Schrift seiner Wahl verwendet. Schließlich ein Absatz, in dem wir »Courier« (auch eine diktengleiche Schrift) einsetzen wollen. Betrachten Sie die Unterschiede. Aufgabe 9
Tiefgestellte Zahlen spielen nicht nur als Indizes eine Rolle, sondern vor allem in der Chemie bei der Angabe von Wertigkeiten (Beispiel: H2O). Hochgestellte Zahlen treten unter anderem in der Mathematik als Potenzzahlen auf. Versuchen Sie folgende mathematische Formel in HTML-Codierung zu erzeugen. 3 a2 + 5 b2 – 18 c2 = 23 a3 + 37 Aufgabe 10
In der letzten Aufgabe wollen wir noch ein wenig mit verschiedenen Formatierungsmöglichkeiten spielen. Das zu erstellende Dokument soll als Standardschriftgrö ß e die Grö ß e sechs und als Schriftfarbe blau haben. Der erste Satz soll durchgestrichen sein, der zweite soll blinken. Abschließend schreiben Sie in einer neuen Zeile einen kurzen »Lauftext« mit folgenden Eigenschaften: grüner Hintergrund, 50 Pixel hoher und 200 Pixel breiter Bereich.
2.13
Hinweise
Hinweise zu Aufgabe 1
Versuchen Sie im ersten Schritt den Zeilenumbruch ganz zu verhindern und dann in einem weitern Schritt die Stellen zu markieren, an denen ein Zeilenumbruch falls nötig erlaubt werden soll.
47
2 Textformatierung Hinweise zu Aufgabe 2
Die Schwierigkeit dürfte hier an der Textstelle liegen, wo sich kursiv und fett überlappen. Achten Sie auf die nötige Reihenfolge beim Verschachteln von Tags. Hinweise zu Aufgabe 3
Achten Sie darauf, dass der Zeilenumbruch vor und nach der Linie manuell erfolgen muss. Hinweise zu Aufgabe 4
Die Hintergrundfarbe und die Farbe des Textes werden an verschiedenen Stellen des HTML-Codes festgelegt. Des Weiteren müssen Sie sich Gedanken darüber machen, wie Sie die logische Textauszeichnung für die Adresse mit der Einstellung für die Schriftfarbe kombinieren können. Hinweise zu Aufgabe 5
Für das Einstellen des Seitenrandes gibt es eigene Attribute. Das Aussehen des vorformatierten Textes bestimmen Sie im HTML-Code ohne dafür extra Befehle oder Attribute zu benötigen. Hinweise zu Aufgabe 6
Es befinden sich sieben Fehler im Code. Achten Sie besonders auf den Unterschied zwischen Attribut und Befehl (ein Attribut kann nie alleine stehen) und darauf, dass die Tags vollständig mit öffnendem und schließendem Tag codiert sind. Hinweise zu Aufgabe 7
Mit den verschiedenen Attributen, die wir für die Erzeugung von Linien kennen gelernt haben, dürfte die Linie einfach zu codieren sein. Für den Textabsatz müssen Sie die verschiedenen Attribute für Ausrichtung und Schriftart mit den richtigen Werten belegen. Hinweise zu Aufgabe 8
Erinnern Sie sich daran, dass wir für diktengleiche Schriften das -Tag verwenden können. Hinweise zu Aufgabe 9
Beachten Sie bitte, dass nur die Potenzzahlen im HTML-Code besonders ausgezeichnet werden müssen, der andere Text muss von der Auszeichnung ausgespart bleiben. Hinweise zu Aufgabe 10
Benutzen Sie für die Standardeinstellungen das Attribut basefont.
48
Lösungen
2.14
Lösungen
Lösung zu Aufgabe 1
Den Zeilenumbruch verhindern wir, indem wir den Text in <nobr>-Tags einbinden. Dann setzen wir hinter jeden Reim ein <wbr />-Tag, das bewirkt, dass genau hier umgebrochen wird, falls das Browserfenster zu klein ist. Gedicht
<nobr>"Gott schuf die Welt vor alten Zeiten, <wbr />zuletzt vom Mann ein Exemplar, <wbr />und das schien wahrlich anzudeuten, <wbr />dass Gott schon etwas müde war..."
Listing 2.15: gedicht.html
Wenn Sie auf ein besonders ordentliches Layout Wert legen, sollten Sie darauf achten, dass im Falle eines Zeilenumbruchs kein Leerzeichen am Anfang der Zeile steht, d.h. das <wbr />-Tag sollte sich immer direkt vor dem ersten Buchstaben der eventuellen neuen Zeile befinden. Lösung zu Aufgabe 2
Viele Browser interpretieren Tags auch dann richtig, wenn sie in einer nicht korrekten Art und Weise »verschachtelt« werden. Trotzdem sollten Sie darauf achten, dass Sie immer die richtige Reihenfolge einhalten, denn sonst ist eine Darstellung nach Ihren Vorstellungen nicht gewährleistet. Verschachtelung
Das sind vier Worte, jetzt beides und kursiv allein.
Toll!
Listing 2.16: verschachteln.html
49
2 Textformatierung Lösung zu Aufgabe 3
Sie erinnern sich bestimmt, dass rechtsbündige Ausrichtung von Fließtext nur in Kombination mit der Definition eines Absatzes geleistet werden kann. Linksbündige Ausrichtung dagegen ist Standard und bedarf keiner besonderen Kennzeichnung. Absatzgestaltung Ich bin eine riesige Überschrift
Nun folgt ein wenig Blindtext, damit das Ganze nicht so langweilig ist. Nicht zu lang, aber auch nicht zu kurz, damit man sich genau anschauen kann, wie ein rechtsbündiger Absatz so wirkt. Na, haben Sie es gesehen? Dann kommt jetzt die Trennlinie.
Das ist jetzt recht klein geworden
Noch ein wenig Blindtext um das Ganze abzurunden, und dann sind wir auch schon am Ende der Aufgabe. Wir hoffen Sie hatten keine Probleme bei der Bearbeitung.
Listing 2.17: ausrichtung2.html
Lösung zu Aufgabe 4
Die Farbe für den Hintergrund wird im -Tag mit dem Attribut bgcolor festgelegt. Um die Adresse in Weiß zu zeigen, müssen die -Tags von -Tags eingeschlossen werden, die das Attribut color auf Weiß setzen. Da innerhalb des -Tags nicht automatisch nach dem Namen usw. umgebrochen wird, muss man zusätzlich -Tags einbauen. Weiß auf Schwarz
Markus Mustermann Musterstraße 9 99999 Musterhausen
Listing 2.18: address1.html
50
Lösungen
oder besser (Farbangabe mit RGB-Werten): Weiß auf Schwarz
Markus Mustermann Musterstraße 9 99999 Musterhausen
Listing 2.19: address2.html
Lösung zu Aufgabe 5
Die Seitenränder werden im -Tag eingestellt. Der vorformatierte Text wird einfach mit <pre>-Tags eingerahmt und schon wird er vom Browser mit allen Leerzeichen, Leerzeilen und Tabulatoren übernommen. Vorformatiert
<pre> La le lu, nur der Mann im Mond schaut zu, wenn die kleinen Babys schlafen...
Listing 2.20: preformatiert.html
Lösung zu Aufgabe 6
Insgesamt sieben Fehler hätten Sie finden können. Wir haben sie im folgenden verbesserten Code fett ausgezeichnet. Es fehlt das schließende Tag sowohl vom als auch vom . Die Schriftgrö ß e darf keinen grö ß eren Wert als sieben annehmen, ist hier aber mit acht festgelegt. Sowohl align als auch size sind Attribute, können also nicht alleine stehen, sondern align steht zum Beispiel im
- oder im -Tag, size steht im Normalfall im -Tag. Folglich gibt es auch die schließenden Tags und nicht. Bei der relativen Schriftgrö ß enveränderung würden wir hier den Wert –2 erhalten. Das ist ebenfalls nicht erlaubt, da die Schriftgrö ß e zwischen eins und
51
2 Textformatierung sieben liegen muss. Der letzte Fehler besteht im schießenden Tag . Im Code wurde kein Tag für fette Schrift geöffnet. Folglich kann er auch nicht geschlossen werden. Beispielcode
Hier fängt der Text an!
Jetzt wollen wir relativ auszeichnen
Listing 2.21: verbesserung.html
Lösung zu Aufgabe 7
Die Seitenränder werden im -Tag festgelegt. Für die Linie haben wir eine eigene Befehlszeile mit den verschiedenen Attributen. Die rechtsbündige Ausrichtung wird in das
-Tag eingebaut, für die Schriftart benutzen wir das Tag . Hierbei können wir für die Schriftart Alternativen angeben. Linie und Text
Das Festlegen von Schriftarten geschieht nicht ohne Risiko, da nicht jede Schriftart auf jedem Rechner installiert ist, und der Browser dann einfach die Standardschriftart benutzt, was das Erscheinungsbild der Seite deutlich beeinträchtigen kann.
Listing 2.22: schriftart.html
Lösung zu Aufgabe 8
Auf jedem Browser sieht die Darstellung wohl ein wenig anders aus, aber der grundsätzliche Effekt ist derselbe. Schriftartenvergleich
52
Lösungen
Times New Roman ist eine häufig verwendete und auch sehr gut zu lesende Schriftart. Ich verwende sie für alle Briefe und Dokumente. Arial wird auch sehr häufig verwendet. Beide sind keine diktengleichen Schriften. Jene sehen anders aus.
Jetzt müsste Ihr Browser auf eine diktengleiche Schriftart zurückgreifen. Viele Browser benutzen hier Courier. Ob Ihrer das auch tut, können Sie vergleichen, wenn Sie den folgenden Abschnitt in Courier definieren.
Wir hoffen, dass Sie Courier installiert haben, sonst können Sie jetzt natürlich keine Vergleiche anstellen. Aber Courier ist sehr gebräuchlich, und deswegen sind wir diesbezüglich zuversichtlich!
Beachten Sie, dass der Microsoft Internet Explorer keine blinkenden Textstellen anzeigen kann. Der Netscape Navigator kann Laufschrift nicht interpretieren. Verschiedenes
<strike>Oh, das kann man nicht mehr gut lesen!
Manchmal da, und manchmal weg!
<marquee bgcolor="green" height="50" width="200">Ich bin ein Lauftext, ich komme immer wieder!
Listing 2.25: verschiedenes.html
54
3
Grafiken, Links, Listen und Multimedia
In Kapitel 2 haben Sie die grundlegenden Formatierungsmöglichkeiten kennen gelernt. Darauf aufbauend wollen wir Ihnen nun weitere gestalterische und funktionale Mittel für Ihre Website vorstellen.
3.1
Grafiken
Bilder und Grafiken auf Webseiten sind heutzutage wichtiger denn je. Jedoch verlängern Grafiken die Ladezeit eines Dokumentes erheblich. Deshalb sollten Sie möglichst solche mit geringer Dateigröße verwenden und sich auf wenige, ausdrucksstarke Bilder beschränken. HTML kann mit den Grafikformaten GIF, JPEG (JPG) und PNG umgehen, also nur mit Bitmaps und nicht mit Vektorgrafiken. Für unsere Zwecke ist es zwar nicht notwenig tiefer in das Thema der verschiedenen Grafikformate einzusteigen, jedoch sollten wir uns kurz mit einigen Besonderheiten befassen. Das JPEG-Format und auch das PNG-Format eignen sich gut für Fotos und für Grafiken mit Farbverlauf. Sie garantieren weitestgehend Farbechtheit, denn sie müssen im Gegensatz zum GIF nicht mit 256 Farben auskommen. Das GIF-Format eignet sich für Grafiken, bei denen nur wenige verschiedene Farbtöne verwendet werden. Zusätzlich bietet es einige Vorteile, die Sie im weiteren Verlauf des Kapitels kennen lernen werden.
3.1.1
Grafiken einfügen
Das Einbauen einer Grafik in eine HTML-Seite ist denkbar einfach. Es funktioniert mit folgender Befehlszeile:
Eine Grafik kann an jeder Stelle innerhalb des …-Bereiches eines HTML-Dokuments eingebaut werden. Grafik
Bei der Angabe des Dateinamens sind mehrere Dinge zu beachten. Die einfache Angabe des Dateinamens reicht nur dann aus, wenn die Grafik im selben Verzeichnis gespeichert ist wie das aktuelle HTML-Dokument. Das ist jedoch häufig nicht der Fall. Viele Webdesigner legen eigene Verzeichnisse für die Grafiken und Bilder auf Ihrer Seite an. Zum einen, weil dadurch eine besondere Gliederung entsteht, zum anderen, weil oft von mehreren Seiten auf eine Grafik zurückgegriffen wird, die dann nicht in jedem Verzeichnis extra gespeichert sein muss. Das bedeutet aber, dass Sie den Pfad angeben müssen, über den der Browser die Grafik finden kann. Die Pfadangaben in HTML-Dokumenten müssen die Form einer URL-Adresse haben. Sie können also z.B. folgendermaßen aussehen:
Hierbei handelt sich um eine so genannte »absolute Adressierung«. Absolute Adressierung bedeutet, dass die Pfadangabe der hinterlegten Grafik vollständig, d.h. mit Protokolltyp und allen übergeordneten Verzeichnissen, notiert wird. Bei absoluten Verweisen auf den lokalen Rechner sieht die Befehlszeile so aus:
56
Grafiken Die Alternative sind relative Pfadangaben. Hier wird die Grafikdatei an dem Speicherort gesucht, an dem auch die gerade geöffnete HTML-Datei hinterlegt ist. In den meisten Fällen sind solche relativen Pfadangaben problemlos möglich, da Grafik und HTML-Datei ähnliche Pfadangaben haben. Liegt die Grafik jedoch irgendwo anders im Netz, kann nur mit absoluten Angaben hantiert werden. Aber zurück zu den relativen. Wir haben bereits erfahren, dass eine Pfadangabe der Form nur dann möglich ist, wenn sich HTML-Dokument und Grafik im selben Verzeichnis befinden. Diese Konstellation ist aber eher selten. Meistens muss auf über- oder untergeordnete Dateien zugegriffen werden. Falls die Datei in einem untergeordneten Verzeichnis gespeichert ist, wird einfach der Name des Unterverzeichnisses angegeben, und dann, mit einem Schrägstrich getrennt, der Dateiname. Beispiel:
Befindet sich die Datei in einem übergeordneten Verzeichnis, so wird es ein wenig komplizierter. Sie müssen den Browser erst veranlassen sozusagen einige Schritte im Pfadnamen zurückzugehen, und von dort aus kann dann eine relative Angabe erfolgen. Das funktioniert folgendermaßen: Für jeden Schritt zurück setzen Sie zwei Punkte und einen Schrägstrich. Wenn Sie weit genug zurückgegangen sind, erfolgt die Angabe genau wie bei den untergeordneten Verzeichnissen. Ein Beispiel: Angenommen, Ihre HTML-Datei befindet sich auf folgendem URL: http://www.html-workshop.de/buch/kapitel3/text.html (das ist jetzt natürlich nur eine fiktive Adresse). Sie wollen von hier aus auf ein Bild verweisen, dass an folgender Stelle hinterlegt ist: http://www.html-workshop.de/fotos/autorenfoto.jpg. Der relative Verweis sieht nun so aus:
Richten Sie die Grafik links- oder rechtsbündig aus, so fließt der Text neben der Grafik weiter und zwar nicht an Ihrem unteren Rand, sondern fortlaufend neben dem Bild. Der Versuch den nachfolgenden Text mit dem -Tag wieder unter das Bild zu bannen endet nun darin, dass zwar die erste Zeile neben dem Bild frei bleibt, in den folgenden Zeilen der Text jedoch weitergeführt wird. Ausrichtung
Wir versuchen mit einem Zeilenumbruch den nachfolgenden Text unter das Bild zu bannen und schauen was passiert. Die Ausrichtung mit dem Attribut align scheint tatsächlich eine Auswirkung auf nachfolgenden Text zu haben.
Listing 3.2: ausrichtung1.html
Wie erreicht man nun, dass trotz einer links- oder rechtsbündigen Ausrichtung der Grafik nachfolgender Text erst unterhalb erscheint? Hierfür steht uns im -Tag das Attribut clear zur Verfügung. Dieses Tag wird vom Netscape Navigator und vom Microsoft Internet Explorer spätestens ab den Versionen 4 unterstützt. Es funktioniert folgendermaßen: Die Grafik wird, wie gewohnt, im HTML-Code aufgerufen. Nun müssen wir zwei Situationen unterscheiden: Zum einen: Die Grafik ist linksbündig ausgerichtet. Wenn das der Fall ist, so möchten wir ja nun erreichen, dass der Text erst unterhalb der Grafik fortgesetzt wird, d.h. in der ersten Zeile, in der der linke Seitenrand nicht mehr von der Grafik besetzt ist. Der Code hierfür lautet:
60
Grafiken Abbildung 3.4: Zeilenumbruch und Bildausrichtung.
Der andere Fall tritt dann ein, wenn die Grafik rechtsbündig ausgerichtet ist. Hier nützt es uns wenig, wenn wir den Text dort fortsetzen, wo der linke Seitenrand frei ist, denn das ist im Zweifelsfall direkt neben der Grafik. Um erst unterhalb der Grafik fortzufahren, muss nun also der rechte Seitenrand betrachtet werden: . Soll der Text erst dort fortgesetzt werden, wo beide Seitenränder frei sind, dann benutzen Sie einfach . Ausrichtung
Jetzt versuchen wir das ganze mal mit unserem neuen Zeilenumbruch. Der Text erscheint wie gewünscht unterhalb des Bildes.
Listing 3.3: ausrichtung2.html
61
3 Grafiken, Links, Listen und Multimedia Abbildung 3.5: Zeilenumbruch mit "clear".
3.1.4
Grafikbeschriftung
Für viele Grafiken ist eine Beschriftung neben dem Bild sinnvoll. In diesem Fall gibt es drei verschiedene Möglichkeiten der vertikalen Ausrichtung. Hierfür dient uns ebenfalls das Attribut align. Soll die Beschriftung am oberen Rand des Bildes ausgerichtet werden, so schreiben wir align="top" in unser Tag, bei mittiger Ausrichtung schreiben wir align="middle", und bei Ausrichtung am unteren Bildrand align="bottom". Beachten Sie jedoch folgendes: Wenn Sie das Attribut align zur Beschriftung verwenden, können Sie die betreffende Grafik nicht zusätzlich mittig oder am rechten Rand ausrichten. Sie können mit diesem Befehl also nur linksbündige Grafiken beschriften. Ausrichtung
Das ist unser Hund!
Listing 3.4: ausrichtung3.html
62
Grafiken Abbildung 3.6: Beschriftung von Bildern.
3.1.5
Abstand der Grafik vom Text
Wie wir bereits gesehen haben, läuft der Text um die Grafik herum, falls wir das nicht unterbinden. Jedoch ist es meist nicht sehr übersichtlich, wenn zwischen Grafik und Text kein Abstand ist. Sie haben mit HTML die Möglichkeit, den Abstand zwischen Grafik und Text bzw. zwischen Grafik und Seitenrand nach Ihren Vorstellungen zu bestimmen. Die Angabe erfolgt in Pixeln. Für den oberen und unteren Abstand von der Grafik wählen Sie das Attribut vspace (vertical space), für den seitlichen Abstand das Attribut hspace (horizontal space). Abstand
Das Auge isst immer mit. Obst ist zwar sehr gesund, aber nur wenn es hübsch angerichtet ist, bekommt man auch Appetit. Wer möchte von diesem dekorativen Obstteller nicht sofort eine Weintraube naschen?
Listing 3.5: abstand.html
63
3 Grafiken, Links, Listen und Multimedia Abbildung 3.7: Abstand der Grafik zum Seitenrand und zum Text.
3.1.6
Grafikrahmen
Je nachdem, ob Sie Ihre Grafiken möglichst unauffällig in den begleitenden Text einfließen lassen wollen, oder ob Sie diese lieber klar vom Rest abgrenzen, können Sie selbst entscheiden, ob Ihre Grafik mit oder Rahmen dargestellt werden soll. Hierfür fügen Sie einfach in das -Tag das Attribut border ein. Diesem Attribut können Sie nun ganzzahlige Werte zuweisen. border="0" steht für »keinen Rahmen«. Das entspricht der Standardeinstellung. Mit zunehmender Zahlengrö ß e wird der Rahmen immer dicker. Dazu folgendes Beispiel: Rahmen Listing 3.6: rahmen.html
64
Grafiken Abbildung 3.8: Rahmendicke bei Grafiken.
In Hinblick auf das Teilkapitel »Links« soll hier kurz erwähnt werden, dass der Browser Grafiken, die zugleich Links sind, automatisch mit einem Rahmen der Breite »1« umgibt, der in der für Links eingestellten Farbe dargestellt wird. Dies können Sie jedoch auch hier umgehen, indem Sie die Rahmenbreite auf »0« setzen. Beachten Sie bitte, dass ohne die Verwendung von Style-Sheets die Rahmenfarbe nicht verändert werden kann. Wir werden in Kapitel 4 hierauf zurückkommen.
3.1.7
Grö ß enangaben und skalierte Grafiken
Prinzipiell müssen Sie die Grö ß e einer Grafik nicht angeben, wenn Sie diese in ein HTML-Dokument einbauen. Sie erreichen dadurch jedoch, dass der Rest der Seite schneller geladen wird und zwar aus folgendem Grund: Der Browser lädt beim Aufruf einer Seite die jeweiligen Objekte der Reihe nach, so wie sie im HTML-Code vorkommen. Das bedeutet im Normalfall, dass Text, der unterhalb oder nach einer Grafik steht, so lange nicht angezeigt werden kann, bis die Grafik vollständig erscheint. Geben Sie dagegen die Grö ß e der Grafik im -Tag an, dann erstellt der Browser vorerst nur einen (sichtbaren oder unsichtbaren) Rahmen für die Grafik und lädt sie dann nach und nach, während er sich gleichzeitig um den nachfolgenden Text kümmern kann. Die Ursache liegt darin, dass der Browser ohne Grö ß enangabe der Grafik diese erst zu Ende laden muss, um feststellen zu können, wo er den Folgetext platzieren soll. Liegt ihm dagegen schon ein Rahmen vor, wird dieses Problem ganz einfach umgangen. Für die Grö ß enangaben stehen Ihnen die Attribute width (Breite) und height (Höhe) zur Verfügung.
65
3 Grafiken, Links, Listen und Multimedia
Die Grö ß e einer Grafik bestimmen Sie am einfachsten, indem Sie diese in einem Bildbearbeitungsprogramm (z.B. Photoshop) öffnen und im Menü den Bearbeitungspunkt »Bildgrö ß e« wählen. Das Programm zeigt Breite und Höhe dann automatisch an. Sie sollten darauf achten, die Grö ß e Ihrer Grafik vorher exakt zu bestimmen, denn findet der Browser eine Grö ß enangabe vor, die nicht exakt zum dazugehörigen Bild passt, dann quetscht bzw. zerrt er das Bild so, dass es den Rahmen vollständig ausfüllt. Diesen im Allgemeinen unerwünschten Effekt können Sie jedoch auch für gestalterische Zwecke nutzen, indem Sie die Grafik bewusst zerren oder quetschen. Wenden Sie dieses Gestaltungsmittel jedoch mit Vorsicht an. Es kann zu unerwünschten Treppeneffekten führen und unterschiedliche Browser können hier unterschiedliche Ergebnisse liefern. Wenn Sie die Grö ß enangaben der Grafik so verändern, dass das Verhältnis zwischen Höhe und Breite konstant bleibt, so nennt man das »Skalieren«. Auch wenn die Proportionen im Vergleich zur alten Grafik hier dieselben sind, ist die Verwendung von skalierten Grafiken nicht zu empfehlen, da die Qualität der Abbildung meist enorm unter dem Skalieren leidet. Der Netscape Navigator und der Microsoft Internet Explorer erlauben sogar Grö ß enangaben in Prozent. Seien Sie sich jedoch darüber im Klaren, dass der Browser immer dann, wenn der Benutzer die Grö ß e des Browserfensters verändert, auch die Grö ß e des Bildes modifiziert. Setzen Sie Prozentangaben also nur ein, wenn Sie gezielt diesen Effekt erreichen möchten! Abbildung 3.9: Gezerrte Grafik.
66
Grafiken Skaliert Listing 3.7: skaliert.html
3.1.8
Interlaced Grafiken, transparenter Hintergrund
Der große Vorteil des GIF-Formats gegenüber dem JPG- und dem PNG-Format ist neben der meist geringen Dateigrö ß e auch die Möglichkeit, die Grafik im so genannten »Interlaced-Modus« abzuspeichern (GIF89a). Das bedeutet, dass die jeweilige Grafik (vom Browser) nicht in der gewohnten Art und Weise Zeile für Zeile geladen wird. Vielmehr werden zuerst die Zeilen eins, vier, acht usw. geladen, dann in einem weiteren Schritt die Zeilen zwei, fünf, neun ... und so weiter, bis die Grafik vollständig erscheint. Das hat den Vorteil, dass sehr früh, wenn auch in verschwommener Form, zu erahnen ist, was später auf der Grafik zu sehen sein wird. Objektiv dauert das Laden natürlich genauso lange wie ohne »Interlaced-Modus«, aber subjektiv erscheint die Wartezeit kürzer, wenn man nach wenigen Sekunden nicht nur die obere Hälfte des Bildes sehen, sondern das Bild als Ganzes einigermaßen erahnen kann. Des Weiteren haben Sie mit dem GIF-Format GIF89a und dem Format PNG die Möglichkeit, Grafiken mit transparentem Hintergrund zu erzeugen. Das ist vor allem dann von Nutzen, wenn man den Rand der Grafik als Betrachter nicht sehen soll oder wenn der Hintergrund der Seite durchscheinen soll (betrachten Sie Abbildung 3.10). Speziell bei selbst gestalteten Linien oder Aufzählungspunkten wird gerne ein transparenter Hintergrund eingesetzt. Wie diese Grafiken erzeugt und abgespeichert werden soll nicht Thema dieses Buches sein. Für weiterführende Informationen empfehlen wir Ihnen die einschlägigen Werke aus dem Bereich Grafik und Design.
3.1.9
Grafiken in Überschriften einbinden
Im Kapitel über Textformatierung haben wir Überschriften ausführlich behandelt. Wir haben auch gesehen, dass eine Überschrift immer automatisch in einer eigenen Zeile dargestellt wird, d.h. dass der Browser vor und nach der Überschrift umbricht. Soll also in der Überschriftzeile eine Grafik enthalten sein, so kann folgender Code nicht zum Ziel führen. Unsere Autoren
Die Abbildung erfolgt in zwei Zeilen.
67
3 Grafiken, Links, Listen und Multimedia Möchten Sie die Grafik jedoch in die Überschriftzeile einbinden, so muss das -Tag zwischen den -Tags stehen. Das sieht dann folgendermaßen aus: Unsere Autoren
Nun werden Grafik und Text auf jeden Fall in derselben Zeile dargestellt. Dies illustriert Abbildung 3.10.
3.1.10
Hintergrundgrafiken
Grafiken lassen sich vielseitig verwenden. Sie können das Textverständnis erleichtern oder einfach nur Schmuck sein. Hintergrundgrafiken zählen im Normalfall zur zweiten Kategorie. Umso sorgfältiger müssen sie ausgewählt werden. Wenn Sie für Ihre Seite eine Hintergrundgrafik definieren, dann stellt der Browser diese Grafik so oft nebeneinander und untereinander dar, bis das ganze Browserfenster damit gefüllt ist, man sagt auch: »Die Hintergrundgrafik wird gekachelt«. Es entsteht also im Normalfall eine Art Tapetenmuster. Dieses Muster muss auf die Textfarbe abgestimmt sein. Eine dunkle Textfarbe und ein dunkler Hintergrund sollten nicht kombiniert werden, denn im Zweifelsfall kann der Leser dann nichts mehr erkennen. Ebenso verhält es sich mit heller Schriftfarbe und hellem Hintergrund. Kurz gesagt muss ein ausreichend starker Kontrast vorhanden sein. Wenn diese Bedingungen erfüllt sind, kann eine Hintergrundgrafik jedoch durchaus zur Attraktivität Ihrer Seite beitragen. Wie wird nun so eine Hintergrundgrafik definiert? Der Befehl hierzu muss im -Tag ganz am Anfang des HTML-Dokuments stehen. Er lautet:
Auf diese Weise eingebundene Hintergrundgrafiken bewegen sich sozusagen beim Auf- und Abscrollen mit der Seite mit. Sie sehen also hinter einem Stück Text immer dasselbe Stück Hintergrundgrafik! Anders verhält es sich, wenn Sie zusätzlich das Attribut bgproperties="fixed" einbauen:
In diesem Fall »steht« das Hintergrundbild unbeweglich im Browserfenster. Wenn Sie also scrollen, bewegt sich zwar der Text, aber nicht der Hintergrund. Die Verwendung dieses Attributs ist Geschmackssache und sollte für jede Website neu entschieden werden. Beachten Sie jedoch, dass nur der Microsoft Internet Explorer, nicht aber der Netscape Navigator dieses Attribut unterstützt. Hintergrundbild
68
Grafiken Zimmerpflanzen für Sie
Sie sehen im Hintergrund eine wunderschöne Orchidee. Zimmerpflanzen können einem viel Freude bereiten. Wichtig ist hierbei die richtige Pflege. Verschiedene Pflanzen brauchen verschieden viel Licht und Wasser. Während Sie manche Zimmerpflanzen problemlos in die pralle Sonne stellen können, brauchen andere Pflanzen viel Schatten und viel Wasser. Informieren Sie sich daher gründlich bei Ihrem Gärtner, welche besonderen Ansprüche Ihre Zimmerpflanzen an Standort und Wassermenge stellen. Düngemittel sind hierbei nicht unbedingt erforderlich, jedoch blühen manche Pflanzen öfter und länger, wenn man ein wenig mit Nährstoffen nachhilft.
Listing 3.8: hintergrund.html Abbildung 3.10: Hintergrundbild und transparente Grafik in der Überschrift.
Die Verwendung von Style-Sheets ist inzwischen die gängigere und zu empfehlende Variante zur Einbindung von Hintergrundgrafiken. Diese Methode werden wir in Kapitel 4 näher vorstellen.
69
3 Grafiken, Links, Listen und Multimedia
3.2
Links
Wir benutzen sie alle, wenn wir uns von ihnen von einer Internetseite zur nächsten leiten lassen. Aber was sind Links eigentlich genau? Links sind Verweise, entweder innerhalb eines Dokuments, von einer Stelle zu einer anderen, oder »quer durchs Netz« auf die Homepages in aller Welt. Das Prinzip des Links ist das gleiche, egal ob Sie nur ein paar Zeilen weiter springen wollen, oder einmal von Europa nach Australien.
3.2.1
Verweise auf andere HTML-Dokumente
Prinzipiell ist ein Link folgendermaßen aufgebaut: Sie haben eine Stelle, von der aus Sie »verlinken« (Link) und eine Stelle oder Seite, auf die »gelinkt« wird (Anker). Zum Verlinken können Sie sowohl Textstellen, als auch Grafiken benutzen. Betrachten wir einmal einen solchen Link: Homepage von AddisonWesley
Das »a« steht hierbei für »anchor«, das englische Wort für Anker. Die Stelle die von den beiden Tags ... eingefasst ist, wird später im Dokument als Link ausgezeichnet zu sehen sein (d.h. in unserem Beispiel wäre die Textstelle »Homepage von Addison-Wesley« unterstrichen und farbig zu sehen). Der dem Attribut href zugewiesene Wert gibt die Stelle oder Seite an, die erscheinen soll, wenn der Link aktiviert wird. Dieses Attribut ist obligatorisch, denn ein Link, der keine Entsprechung hat, ist nutzlos. Klickt der Besucher einer Seite auf einen solchen Link, so wird automatisch das entsprechende Folgedokument geöffnet, natürlich nur, falls ein solches auch tatsächlich vorhanden ist. Findet der Browser keine Entsprechung im World Wide Web oder auf dem lokalen Rechner, so wird er eine Fehlermeldung liefern, und der Besucher Ihrer Homepage somit nicht sehr erfreut sein. Achten Sie deswegen immer auf eine exakte Angabe, ohne Tippfehler oder ähnliches, die es dem Browser unmöglich machen das Dokument zu finden. Link
Wenn Sie näheres über Addison-Wesley erfahren wollen, besuchen Sie doch einmal unsere Homepage. Klicken Sie einfach hier!
Listing 3.9: link.html 70
Links Sie wundern sich eventuell, dass viele Links keine Dateinamen enthalten und folglich scheinbar offen bleibt, welche Datei der Browser laden soll. Ein Beispiel: Homepage von AddisonWesley
Hier wird zwar der Domainname angegeben, aber keine Datei, die der Browser öffnen könnte. In so einem Fall legt der Webserver automatisch fest, welche Datei aus dem für den Domainnamen hinterlegten Ordner geöffnet werden soll. Im Allgemeinen ist das die Datei mit dem Namen »index.html«, »default.html« oder »welcome.html«. Denken Sie beim Erstellen einer eigenen Homepage also immer daran Ihrer Startdatei diesen Namen zuzuweisen. Der dem Attribut href zugewiesene Wert ist im Allgemeinen ein so genannter URL (Uniform Resource Locator). Dabei handelt es sich um eine Adresse, die sich aus dem Protokolltyp, dem eigentlichen Domainnamen evtl. mit Verzeichnis und Dateinamen (also der Pfadangabe) und einem Suffix zusammensetzt. Das Suffix kennzeichnet oft ein Land oder auch den Typ des Angebots auf der Website. So steht ».de« für Deutschland, ».org« für gemeinnützige Organisationen usw. Pfadangaben sind genauso zu handhaben wie wir es schon im Teilkapitel über Grafiken kennen gelernt haben. Wir möchten Ihnen wieder empfehlen soweit als möglich relative Pfadangaben zu benutzen und nur für Verweise auf andere Internetseiten auf absolute Pfadangaben zurückzugreifen. Zur Erinnerung: relativ: Geschichte absolut: workshop HTML Die Protokolltypen spielen beim Zugriff des Browsers auf die einzelnen HTMLDokumente eine Rolle. Das »Hypertext-Transfer-Protokoll« (http) ist nur ein möglicher Protokolltyp. Deswegen wollen wir in der folgenden Tabelle kurz die verschiedenen Protokolltypen erläutern. Typ
Bedeutung
http
Mit Hilfe des Protokolltyps http (Hypertext-Transfer-Protokoll) wird auf die Seiten des WWW (World Wide Web) zugegriffen. Der Zugriff erfolgt hier jedoch im Allgemeinen nur zum Betrachten der Seite.
file
Hier wird auf eine Datei auf dem lokalen Rechner zugegriffen.
ftp
Der Protokolltyp ftp (File-Transfer-Protokoll) dient dazu, auf die FiletransferServer zuzugreifen. Das ist nötig, wenn Inhalte eines Dokuments verändert oder Datenaustausch vorgenommen werden soll (natürlich vorausgesetzt, Sie sind zum Datenaustausch berechtigt und kennen Benutzername und Kennwort).
news
Zugriff auf Nachrichten von Newsgroups.
Tabelle 3.1: Protokolltypen
71
3 Grafiken, Links, Listen und Multimedia Tabelle 3.1: Protokolltypen (Forts.)
Typ
Bedeutung
telnet
Baut eine Verbindung zu einem Telnet-Server auf, um auf entfernten Rechnern zu agieren.
gopher
Baut eine Verbindung zu einem Gopher-Server auf. Gopher ist eine Art Informationssuchsystem im Internet und der Vorgänger des WWW.
mailto
Dieser Protokolltyp öffnet nach Betätigung des entsprechenden Links ein Fenster (Ihren Standard-Mail-Client), mit Hilfe dessen man eine Nachricht (E-mail) an die angegebene Mailadresse schicken kann. Der Aufbau unterscheidet sich ein wenig von den anderen Typen. Hier ein Beispiel: Schreiben Sie uns!
3.2.2
Querverweise innerhalb eines Dokuments
Verweise innerhalb eines Dokuments können als Navigationshilfe dienen. Zweifellos ist es komfortabel, wenn man in einem Dokument problemlos von einer Stelle zur anderen springen kann, ohne mühsames Scrollen und Suchen. Vor allem in langen Dokumenten wird der Besucher Ihrer Website Ihnen für diesen Service dankbar sein. Wenn Sie innerhalb eines Dokuments verweisen möchten, müssen Sie beide Stellen besonders kennzeichnen, nicht nur den Link, sondern auch das Ziel, den so genannten Anker. Definieren wir zuerst einmal den Anker, also die Stelle, an die der Browser nach Betätigung des Links springen soll. Wieder wird die entsprechende Stelle mit den Tags und eingefasst (Sie müssen logischerweise nur den Beginn der entsprechenden Textstelle mit den Tags einfassen, nicht das ganze anzuzeigende Dokument). Anstelle des Attributs href muss hier aber das Attribut name folgen, damit der betreffende Anker später im Link auch genau spezifiziert werden kann. Dem Attribut name können Sie jeden beliebigen, Ihnen passend erscheinenden Namen aus bis zu 71 alphanumerischen Zeichen zuordnen (beginnend mit einem Buchstaben, ohne Verwendung von Sonderzeichen und Umlauten). Dies verdeutlicht die folgende Befehlszeile: An dieser Stelle geht es dann weiter...
Äußerlich ist ein solcher Anker für den Betrachter nicht zu erkennen. Im Browser wird die Textstelle (»An dieser Stelle geht es dann weiter...«) ohne besondere Kennzeichnung dargestellt. Wenn wir den Anker definiert haben, können wir mit Hilfe des für ihn vergebenen Namens einen entsprechenden Link gestalten, der dann auf diese Textstelle verweist. Der Aufbau des Links ist denkbar einfach. Hier klicken um die Fortführung zu lesen.
Sie weisen dem Attribut href, das Sie schon aus dem vorherigen Teilkapitel kennen, einfach den im Anker vergebenen Namen mit einem vorangestellten Doppelkreuz (#) zu. Das Doppelkreuz dient dem Browser als Kennzeichen für einen lokalen Verweis. Die von den -Tags eingefasste Textstelle (»Hier«) wird dann als Link ausgezeichnet. 72
Links Abbildung 3.11: Querverweis, Bild Nummer eins.
Abbildung 3.12: Querverweis, Bild Nummer zwei.
Das folgende Beispiel zeigt, wie so ein Dokument dann im Ganzen aussehen kann: Links
73
3 Grafiken, Links, Listen und Multimedia
Unser Hund Waldi ist ein treuer und lieber Gefährte. Wir haben ihn schon, seit er ein Baby war. Inzwischen ist er zehn Jahre alt, aber fidel und fit wie immer. Wenn Sie mehr über unseren Hund Waldi erfahren möchten, dann klicken Sie bitte hier
Hunde sind traumhafte Haustiere. Sie freuen sich immer, wenn man zu ihnen kommt, sie lieben es gestreichelt zu werden und sie schenken ihrem Herrchen die volle Aufmerksamkeit. Andererseits kann man einen gut erzogenen Hund auch mal ein paar Stunden allein lassen, ohne Angst haben zu müssen, dass er gleich alles kaputt macht.
Unser Waldi ist - Gott sei Dank - ein wirklich braver Hund. Er bellt selten, macht fast nie Sachen kaputt und, was am wichtigsten ist, er frisst nichts, was man mal aus Versehen herumstehen läßt. Selbst diesen wunderschönen Obstteller würde er unberührt lassen.
Listing 3.10: querverweis.html
3.2.3
Lokale Verweise in externe Dokumente
Eine Kombination aus den beiden bisher vorgestellten Verweistypen sind lokale Verweise in externe Dokumente. Es kann ja durchaus vorkommen, dass Sie den Leser Ihrer Website im Verlauf eines Dokuments (Dokument 1) für weiterführende Informationen auf ein anderes Dokument (Dokument 2) verweisen wollen; dort jedoch nicht an den Seitenanfang, sondern genau an die Stelle, an der der Leser die gewünschten Informationen findet. Die Definition des Ankers funktioniert wieder wie gehabt. Sie kennzeichnen die Stelle in Dokument 2, an die der Browser springen soll mit den -Tags und vergeben einen Namen. Diesen Namen benutzen Sie dann im Dokument 1 für den Link und zwar in Kombination mit dem Verweis auf das externe Dokument. Das klingt kompliziert, ist aber im Grunde genommen recht einfach, wie Sie an folgendem Beispiel sehen werden. Nehmen wir an, Dokument 2 würde sich im WWW unter folgender Adresse befinden: http://www.addison-wesley.de/dokument2.html. Und nehmen wir weiter an, Sie haben dem Anker in diesem Dokument 2 den Namen »Zielpunkt« gegeben und zwar mit folgender Befehlszeile: Hier erfahren Sie nun...
74
Links Die Definition des Links in Dokument 1 sieht nun so aus: ... für weiterführende Informationen klicken Sie bitte HIER
Die Textstelle »HIER« wird jetzt als Link gekennzeichnet und der Leser gelangt bei Aktivierung des Links auf die von Ihnen beabsichtigte Stelle. Am Anfang mag diese Art des Verweisens verwirrend erscheinen, aber mit ein wenig Zeit und Übung gelingt es Ihnen spielend und Sie lernen die Vorteile dieser Verweistechnik zu schätzen. Selbstverständlich sind auch hier nicht nur absolute, sondern auch relative Pfadangaben möglich, die sich dann anbieten, wenn Sie auf andere Dokumente innerhalb des eigenen Rechnernetzes verweisen.
3.2.4
Linkfarben
Wenn der Browser im jeweiligen HTML-Dokument keine spezielle Angabe zur Farbe der Links findet, benutzt er eine vordefinierte Farbe, um Links zu kennzeichnen. Das sind im Allgemeinen ein Blau-Ton für unbesuchte Links, ein LilaTon für bereits besuchte Seiten und ein Rot-Ton für Seiten, auf denen Sie sich gerade befinden. Der Internet-Nutzer ist an diese Farben gewöhnt, das sollte Sie jedoch nicht davon abhalten auch andere Farben für die Kennzeichnung von Links zu benutzen, wenn sich diese farblich besser in Ihr Design einbinden lassen. Die hierfür zu verwendenden Attribute heißen link, vlink und alink. Diese müssen gleich zu Anfang des Dokuments in das -Tag notiert werden. link steht für unbesuchte, vlink für bereits besuchte und alink für aktive Verweise. Sie weisen diesen Attributen einfach die von Ihnen gewünschte Farbe zu, auf dieselbe Art und Weise, wie Sie auch Textfarbe definieren. Auch hier möchten wir Sie darauf hinweisen, dass inzwischen zur Definition von Text- und Linkfarben eigentlich generell Style-Sheets verwendet werden sollten, denn die hier verwendeten Attribute sind nicht strikt XHTML-konform. Linkfarben Homepage! Listing 3.11: linkfarben.html
75
3 Grafiken, Links, Listen und Multimedia
3.2.5
Downloadverweise
Einen speziellen Befehl, um einen Verweis als »Download« kenntlich zu machen, gibt es in HTML nicht! Einige Dateiformate werden jedoch von den meisten Browsern automatisch als Downloadverweise interpretiert, d.h. der Browser bietet dem Nutzer an, sich die Datei herunterzuladen. Das bekannteste Format ist hier das ZIP-Format. Es enthält komprimierte Dateien, die der Anwender nach dem Download erst dekomprimieren, also entpacken muss.
3.3
Verweissensitive Grafiken
In den beiden vorhergehenden Teilkapiteln haben Sie schon einiges über Grafiken und Hyperlinks erfahren. In diesem Abschnitt soll es darum gehen, wie man Grafiken und Links so verbinden kann, dass eine Grafik nicht nur auf einen, sondern auf mehrere Links verweisen kann.
3.3.1
Image Maps
Wenn wir eine Grafik wie gewohnt in einen Link einbauen, so verweist die ganze Grafik auf ein- und denselben Link. Mit Image Maps haben Sie die Möglichkeit unterschiedliche Bereiche der Grafik auf verschiedene Verweisziele zeigen zu lassen. Diese Technik wird noch nicht von allen Browsern unterstützt (der Netscape Navigator ab Version 4 und auch der Microsoft Internet Explorer ab Version 4 unterstützen die Technik) und Sie ist auch nicht ganz einfach zu realisieren, jedoch gibt es heute hervorragende Grafikprogramme, die Ihnen bei der Verwirklichung dieser »verweissensitiven« Grafiken behilflich sind. Im Folgenden wollen wir unterscheiden zwischen Server-verwalteten und Clientverwalteten Image Maps. Server-verwaltete Image Maps Klickt der Benutzer auf eine Stelle der verweissensitiven Grafik, so müssen dem Server die genauen Koordinaten des Mauszeigers übermittelt werden, damit er die entsprechende Folgeseite aufrufen kann. Wie viele verschiedene Links in eine solche verweissensitive Grafik eingebaut werden können, hängt von mehreren Faktoren ab. Prinzipiell sind Ihnen hier wenige Grenzen gesetzt, aber Sie sollten darauf achten, dass die Relation zwischen Grö ß e der Grafik und Anzahl der Links in Ordnung ist, d.h., dass Sie eine kleine Grafik nicht mit zu vielen Links überfrachten. Außerdem ist ein Abstand zwischen den einzelnen Verweis-Bereichen sicher sinnvoll, damit der Benutzer bei einer gewissen »KlickUngenauigkeit« nicht gleich auf das falsche Ziel geleitet wird. Zur Realisierung Server-verwalteter Image Maps muss zuallererst eine GIF- oder JPEG-Grafik vorliegen (nennen wir Sie hier einmal »grafik.gif«). Mit speziellen Programmen wie z.B. MapThis, Mapedit, MapIt oder Webmap können Sie in der Grafik ganz einfach rechteckige, polygon-förmige, punktgroße oder kreisförmige
76
Verweissensitive Grafiken Bereiche definieren, die später die verweissensitiven Bereiche darstellen. Diese Programme helfen Ihnen dabei, den Code zu erstellen, der später als Map-Datei beim Server hinterlegt wird. Er enthält Angaben über die Form des verweissensitiven Bereichs, über dessen Grö ß e und Koordinaten und natürlich die Adresse des aufzurufenden Links (vergleiche Client-verwaltete Image Maps). Nehmen wir an, Sie haben eine so erzeugte Datei bei Ihrem Server im cgi-binVerzeichnis unter dem Namen »imagemap« hinterlegt. Um die verweissensitive Grafik nun in Ihr HTML-Dokument einzubinden, verwenden Sie folgenden Befehl:
Das Attribut ismap im -Tag bewirkt hierbei, dass der Browser Map-Datei und Grafik in Verbindung bringt. Die weitere Auswertung wird vollständig vom Server übernommen. Client-verwaltete Image Maps Bei den Client-verwalteten Image Maps übernimmt der Browser die ganze Verwaltung der Map-Datei. Das hat den Vorteil, dass ein diesbezüglicher Datenaustausch zwischen Browser und Server unnötig wird (Client-verwaltete Image Maps können folglich auch lokal auf einem Rechner verwendet werden). Der Nachteil ist, dass der Browser dann stärker belastet ist. Trotzdem werden heute vielfach Client-verwaltete Image Maps vorgezogen, denn die Erstellung durch den HTML-Autor ist unkomplizierter. Alle nötigen Informationen befinden sich hierbei in einer HTML-Datei. Zugrunde liegen kann dem Ganzen entweder eine GIF- oder eine JPEG-Grafik. Der Aufbau der HTML-Datei ist folgendermaßen: Map <map name="Name"> <area shape="polygon" coords="421, 174, 509, 240, 509, 372, 321, 372, 321, 240" href="orchidee.html" /> <area shape="circle" coords="273, 118, 100" href="sonnenblume.html" /> <area shape="rect" coords="39, 187, 175, 375" href="tulpe.html" /> Listing 3.12: map.html
77
3 Grafiken, Links, Listen und Multimedia Abbildung 3.13: Client-verwaltete Imagemap mit verweissensitiven Bereichen.
In den -Tag wird das Attribut usemap eingebaut, das dem Browser verdeutlicht, dass es sich um eine Client-verwaltete Image Map handelt. Ihm wird der Name der Map mit einem vorangehenden Doppelkreuz (#) zugewiesen. Sie kennen diese Vorgehensweise schon von lokalen Verweisen, in denen der Name des Links ebenfalls durch ein solches Doppelkreuz markiert wird. Der Name der Map muss aus alphanumerischen Zeichen bestehen (bis zu 71). Die Attribute width und height geben in gewohnter Art und Weise die Grö ß e der Grafik an. Nun folgt die Zeile in der der oben schon als Link benutzte Name der Map festgelegt wird (ähnlich einem Anker). Jeder verweissensitive Bereich wird anschließend durch ein <area>-Tag gekennzeichnet. Das Attribut shape definiert die Form des sensitiven Bereichs. Das kann entweder ein Polygon (polygon), ein Rechteck (rect), ein Kreis (circle) oder ein Punkt (point) sein. Dementsprechend müssen Sie anschließend unter dem Attribut coords die Koordinaten (in Pixel) angeben. Für die Polygone muss jede Ecke mit einem Wertepaar angegeben werden (für horizontale und vertikale Ausrichtung, d.h. die erste Koordinate bezieht sich auf den Abstand vom linken Grafikrand, die zweite Koordinate bezieht sich auf den Abstand vom oberen Grafikrand). Bei einem Rechteck geben Sie einfach die linke obere und die rechte untere Ecke an. Bei einem Kreis geben Sie das Koordinatenpaar des Mittelpunktes an und anschließend noch den Radius (auch in Pixel). Vergleichen Sie hierzu bitte das oben angeführte Beispiel. Zu guter letzt geben Sie unter dem Attribut href für jedes <area>-Tag den entsprechenden Link an (besser gesagt seinen URL), der geöffnet werden soll, wenn der verweissensi-
78
Listen tive Bereich angeklickt wird (das wären in unserem Beispiel die Dokumente tulpe.html, sonnenblume.html oder orchidee.html). Vergessen Sie hierbei nicht eine eventuell nötige Pfadangabe. Wie bereits oben erwähnt, ist es am einfachsten, wenn Sie ein spezielles Programm zur Erstellung solcher verweissensitiver Grafiken benutzen. Sie können die benötigten Koordinaten jedoch auch von Hand bestimmten, indem Sie Ihre Grafik einfach in einem Grafikprogramm öffnen (z.B. Photoshop oder Paint Shop Pro). Wenn Sie nun die Maus über die Grafik bewegen, werden Ihnen die Koordinaten, auf denen sich der Zeiger befindet, angezeigt (entweder direkt in einem eigens dafür vorgesehenen Feld, oder über den Menüpunkt »Navigation«, »Navigator einblenden« oder ähnliches). So sollte es kein Problem sein, verweissensitive Grafiken auch von Hand zu erstellen. In Abbildung 3.13 sehen Sie eine solche client-verwaltete Image Map. Der Mauszeiger befindet sich auf der Tulpe im linken unteren Bildbereich. Wenn Sie den unteren Rand des Screenshots betrachten, sehen Sie in der Statusleiste das Ziel des Links, auf dem sich der Mauszeiger gerade befindet. Dieses Ziel ist die folgende Adresse: file:///C:/WINDOWS/Desktop/kapitel3/tulpe.html. Wie Sie sehen, haben wir auch hier den Rahmen um die Grafik mit border="0" ausgeschaltet. Nicht, weil es funktionell von Bedeutung wäre, sondern einfach aus ästhetischen Gründen.
3.4
Listen
HTML bietet Ihnen eine Vielzahl von verschiedenen Möglichkeiten, um Listen zu erstellen. Wir wollen im Folgenden auf sortierte, unsortierte und Definitions-Listen eingehen.
3.4.1
Unsortierte Listen
Unsortierte Listen folgen keiner Nummerierung oder Reihenfolge. Alle Punkte sind gleichberechtigt. Für eine solche Liste verwenden wir die Tags
...
(unordered list). Jeder einzelne Punkt der Liste wird von den Tags
...
(list item) eingefasst und bekommt so automatisch eine eigene Zeile zugewiesen. Listen zu verschachteln ist hierbei kein Problem. Wenn Sie zu einem Punkt eine Untergliederung erstellen wollen, fügen Sie einfach nach dem entsprechenden Punkt wieder eine Liste ein. Das heißt, Sie beginnen wieder mit
, führen dann die einzelnen Unterpunkte mit
...
auf und schließen die Liste mit
ab. Es folgt dann der nächste Punkt der übergeordneten Liste wieder mit
...
. Die einzelnen Listenpunkte können dabei neben normalem Text auch Links oder andere besonders ausgezeichnete Textstellen enthalten. Jeder Listenzeile ist ein Aufzählungszeichen vorangestellt. Der Netscape Navigator und der Microsoft Internet Explorer bieten Ihnen die Möglichkeit den Typ
79
3 Grafiken, Links, Listen und Multimedia der Aufzählungszeichen nach Ihren Vorstellungen zu bestimmen. Das Attribut type wird in das
-Tag eingebaut. type kann dabei auf folgende Werte gesetzt werden: 왘 disc: runde, gefüllte Aufzählungszeichen; entsprechen meist dem Stan-
Beachten Sie, dass der Browser von selbst für jede weitere Unterordnung ein neues Aufzählungssymbol verwendet. Bei der dritten Unterordnung gehen ihm jedoch schließlich die Symbole aus, und er verwendet erneut das quadratische Symbol.
80
Listen Abbildung 3.14: Unsortierte Liste.
3.4.2
Sortierte Listen
Häufig möchte man die Punkte einer Liste nicht einfach nur aufzählen, sondern nummerieren. Hierfür verwenden wir statt
...
die Tags ... (ordered list). Die einzelnen Punkte werden auch hier durch die Tags
...
eingerahmt. Auch sortierte Listen können verschachtelt werden und es besteht sogar die Möglichkeit unsortierte und sortierte Listen miteinander zu kombinieren. Beachten Sie, dass der Netscape Navigator 6 automatisch vor und nach einer Liste umbricht, wenn Sie diese in eine übergeordnete Liste einbauen. Für sortierte Listen unterstützen sowohl der Netscape Navigator als auch der Microsoft Internet Explorer das Attribut type. Es kann auf folgende Werte gesetzt werden: 왘 A: Mit Großbuchstaben gegliederte Liste (A, B, C...). 왘 a: Mit Kleinbuchstaben gegliederte Liste (a, b, c...). 왘 I: Mit großen römischen Ziffern gegliederte Liste (I, II, III, IV...). 왘 i: Mit kleinen römischen Ziffern gegliederte Liste (i, ii, iii, iv...). 왘 1: Mit arabischen Ziffern gegliederte Liste – Standard (1, 2, 3...).
81
3 Grafiken, Links, Listen und Multimedia Des Weiteren unterstützen der Netscape Navigator und der Microsoft Internet Explorer das Verändern der Reihenfolge von Listen. Hierfür stehen folgende Attribute zur Verfügung: 왘 : Die Nummerierung beginnt bei der Zahl, die Sie ange-
ben. Geben Sie zum Beispiel die Zahl 3 an, so beginnt die Nummerierung bei C, c, III, iii oder eben bei 3, je nach Typ der sortierten Liste. 왘 : Der Listenpunkt bekommt den Wert, den Sie ihm zuweisen, unabhängig davon, an welcher Stelle die fortlaufende Nummerierung bereits angelangt ist.
Betrachten Sie hierzu Abbildung 3.15.
3.4.3
Listenüberschriften
Mit den Tags ... (list header), die nach der - oder
-Zeile eingebaut werden, können Sie in Ihre Liste eine Überschrift einfügen. Diese erscheint ohne Aufzählungszeichen, jedoch eingerückt am Anfang der Liste. Listen Wir gehen aus dem Verzeichnis texte heraus und öffnen autorenfoto.jpg. absolut: relativ: absolut: relativ:
103
3 Grafiken, Links, Listen und Multimedia absolut: relativ: absolut: Lösung zu Aufgabe 2
Sie müssen hier das Attribut alt verwenden. Es wird direkt in das Tag eingebaut. Waldi
Unser Waldi ist ein Mischling aus Schäferhund und Dackel. Zugegeben, diese Kombination wirkt befremdend, aber wir lieben Ihn trotzdem.
Listing 3.30: waldi2.html
Lösung zu Aufgabe 3
Sie müssen das Attribut align="right" in das -Tag einbauen. bewirkt, dass der Browser den nachfolgenden Text erst dort darstellt, wo der rechte Seitenrand frei ist, und das ist unterhalb des Bildes. Zeilenumbruch
An schönen Tagen gehe ich immer mit meiner Familie spazieren. Hier sehen Sie ein Foto von meiner Familie:
Listing 3.33: obst.html
105
3 Grafiken, Links, Listen und Multimedia Lösung zu Aufgabe 6
Wir verwenden hier aus Platzgründen einen kürzeren Text, aber wenn Sie Ihr Browserfenster entsprechend klein ziehen, können Sie den Effekt trotzdem sehen. Hintergrundbilder werden im -Tag definiert. Normales Hintergrundbild: Hintergrund
An schönen Tagen gehe ich immer mit meiner Familie spazieren. Im Hintergrund sehen Sie ein Foto von meiner Familie. Links steht mein Vater, er ist 63 Jahre alt und noch sehr fidel. Daneben meine Mutter, 51 Jahre und Hausfrau. Dann meine Schwester, ich bin leider nicht auf dem Bild. Wie Sie sehen, sind wir eine ganz gewöhnliche Familie.
Listing 3.34: nicht-fix.html
Und nun mit fixiertem Hintergrund: Hintergrund
An schönen Tagen gehe ich immer mit meiner Familie spazieren. Im Hintergrund sehen Sie ein Foto von meiner Familie. Links steht mein Vater, er ist 63 Jahre alt und noch sehr fidel. Daneben meine Mutter, 51 Jahre und Hausfrau. Dann meine Schwester, ich bin leider nicht auf dem Bild. Wie Sie sehen, sind wir eine ganz gewöhnliche Familie.
Listing 3.35: fix.html
106
Aufgaben und Lösungen Lösung zu Aufgabe 7
Linkfarben werden im -Tag angegeben. Wir verwenden hier ausnahmsweise die Farbnamen und nicht RGB-Werte. Sie können aber selbstverständlich auch mit RGB-Werten arbeiten. Link
Besuchen Sie doch einmal die Homepage von Addison-Wesley. Sie werden viele interessante Dinge erfahren
. Listing 3.36: homepage.html
Lösung zu Aufgabe 8
Mit Sicherheit wird Ihre Lösung ein wenig anders aussehen als unsere. Richtig ist Ihre Lösung dann, wenn die Links funktionieren, bzw. wenn der Aufbau Ihrer Links und Ihrer Anker mit unseren identisch ist. Interener Link
Sie sehen im Folgenden verschiedene Rahmendicken. Entscheiden Sie sich einfach für die, die Ihnen am besten gefällt.
Die Datei aus der Aufgabenstellung wurde hier einfach um den Link und den Anker ergänzt. Verweise
Waldemar ist einer meiner Freunde. (Wenn Sie mehr über Waldemar erfahren wollen, klicken Sie hier!). Es ist ja durchaus natürlich, dass ein Mensch Gesellschaft braucht. Das ist aber nicht immer gegeben. Am Nordpol beispielsweise könnte es ein wenig schwierig werden mit der Gesellschaft. Andererseits ist man dort doch öfter ungestört als in unseren Breiten. Wer nun denkt, dass die Lösung des Problems in einem Kompromiss besteht, der hat gar nicht so unrecht. Ich hab durchaus schon gehört, dass man in Skandinavien eine gesunde Mischung zwischen Gesellschaft und Ruhe findet. Eine gute Alternative zu menschlicher Gesellschaft kann auch ein Haustier sein. Sie sollten dann vielleicht nicht gerade einen Hamster wählen, der wach ist, wenn Sie schlafen und der schläft, wenn Sie wach sind, aber ein Hund könnte hier bestimmt geeignet sein. Wie gefällt Ihnen dieser hier?
Aber zurück zu Waldemar:
Mein Freund Waldemar ist ein wirklich guter Freund. Von Beruf ist er Maurermeister. Er ist 1 Meter 80 groß, hat dunkle Haare, blaue Augen und eine Brille. Seine Frau heißt Frederike und ist auch sehr nett. Trotzdem treffe ich meistens nur den Waldemar, weil seine Frau sehr beschäftigt ist, vor allem mit den Kindern und so. Hier ist ein Bild von Waldemars Familie:
Listing 3.38: waldemar2.html
108
Aufgaben und Lösungen Lösung zu Aufgabe 10
Die Definition eines lokalen Links auf ein externes Dokument funktioniert ähnlich wie Verweise innerhalb einer Datei. Sie müssen jedoch zusätzlich zum Namen des Ankers noch die Pfadangabe hinterlegen. In unserem Fall ist die Pfadangabe denkbar einfach, da beide Dateien im selben Verzeichnis liegen. Verweise
Hier folgt eine Aufzählung meiner Freunde. Klicken Sie auf den jeweiligen Namen, um mehr Informationen zu erhalten:
Waldemar
Äh, ja, ich glaube das waren schon alle!
Listing 3.39: freunde2.html
Lösung zu Aufgabe 11
Selbstverständlich werden sich die von Ihnen bestimmten Koordinaten oder Formen der verweissensitiven Bereiche von unseren unterscheiden. Vergleichen Sie aber den Aufbau Ihres Dokuments mit unserer Musterlösung. Imagemap <map name="Bild"> <area shape="rect" coords="5, 10, 50, 80" href="klaus.html" /> <area shape="polygon" coords="100, 50, 35, 140, 165, 140" href="norbert.html" /> <area shape="rect" coords="145, 10, 190, 80" href="willi.html" /> Listing 3.40: sensitiv.html
109
3 Grafiken, Links, Listen und Multimedia Lösung zu Aufgabe 12
Für eine fette Überschrift können Sie die Listenüberschrift einfach mit den Tags einfassen. Listen Gästeliste:
Familie Meier
Lothar
Günther
Familie Mahler
Familie Berger
Tom
Lukas
Angela
Familie Roger
Listing 3.41: gaesteliste.html
Lösung zu Aufgabe 13
Das Aussehen der Definitionsliste unterscheidet sich von dem der anderen Listen. Der Aufbau ist jedoch ähnlich. Definitionen CD compact disc MD mini disc LP
110
Aufgaben und Lösungen Langspiel-Platte Listing 3.42: defintion.html
Lösung zu Aufgabe 14
Bitte achten Sie darauf, dass der Abstand zwischen Aufzählungssymbol und Text groß genug ist. Fügen Sie notfalls von Hand Leerzeichen ein. Liste Libellenflügel-Salat Heuschrecken-Auflauf /> gefüllte Wolpertinger-Tag belegen müssen sind: src, autostart, loop, width und height. Video
Die Änderung im Vergleich zur Ausgangsdatei ist hier denkbar einfach. Sie müssen einfach im <param />-Tag dem Attribut value den Wert »Arial« zuweisen. Schon erscheint der Text vom Java-Applet in einer anderen Schriftart. Applet-Demo <param name="Schriftart" value="Arial" /> Listing 3.46: applet2.html
113
4
Formatierung mit Style-Sheets
Ein beliebiger Text lässt sich in HTML mit verschiedenen Tags formatieren. Im Kapitel »Textformatierungen« haben wir Ihnen dies näher vorgestellt. Dieser Weg ist allerdings nicht sehr elegant, da Sie die Formatierung für jede Textstelle einzeln festlegen müssen. Style-Sheets schaffen hier Abhilfe. Mit Style-Sheets können Sie Formatierungen für ein Tag oder für einen bestimmten Bereich definieren. Die Style-Sheets selbst lassen sich auch in eine eigene Datei mit der Endung .css auslagern. Damit können Sie in einem Style-Sheet einen Stil festlegen, der von beliebig vielen HTML-Dateien genutzt wird. Gerade bei größeren Projekten ist das unerlässlich. Wenn Sie eine Formatierung mit HTML-Tags in mehreren Dateien ändern wollten, müssten Sie alle Dateien einzeln bearbeiten. Einen Stil in einer ausgelagerten Style-Sheet-Datei ändern Sie einmal und die Änderungen werden in alle Dateien, die auf die Style-Sheet-Datei verweisen, mit angepaßt. Die Dateiendung ausgelagerter Style-Sheet-Dateien führt uns auch gleich auf die Spur des offiziellen Standards für Style-Sheets. Dieser heißt Cascading (C) Style (S) Sheets (S) und liegt mittlerweile in Version 2.0 vor. Wenn Sie nähere Informationen zum offiziellen Standard benötigen, werden Sie auf der Seite des W3C-Konsortiums (www.w3c.org) fündig. Neben dem Auslagern der Style-Sheets in eine Datei gibt es allerdings noch weitere Vorteile, weswegen Sie den Einsatz unbedingt in Erwägung ziehen sollten: Formatierungen mit HTML-Tags sind unter Umständen ziemlich ungenau. Denken Sie nur an ein -Tag. Hier überlassen Sie es den verschiedenen Browsern, wie diese die Überschrift darstellen. Wenn Sie dagegen einen Stil für die Überschrift eins schaffen, können Sie Schriftgröße, Fettdruck, Unterstreichung und andere Formatierungen exakt festlegen. Die verschiedenen Browser haben die Style-Sheet-Definitionen – wie sollte es anders sein – auch unterschiedlich übernommen. CSS 1.0 wird vom Internet Explorer ab Version 3 unterstützt. Netscape hat sie erst ab Navigator (NN) Version 4 implementiert, dann allerdings gleich mit Teilen von CSS 2.0. Ab Version 4 wurden auch im Internet Explorer Teile von CSS 2.0 berücksichtigt. Außerdem leistet sich der Internet Explorer (IE) einige Microsoft-spezifische Eigenkreationen. In den aktuellen Versionen (IE 5.5, NN 6) wurde CSS 2.0 komplett integriert. Im Zusammenhang mit HTML beschränken wir uns hier auf Cascading Style Sheets. Eine andere Style-Sheet-Definition wäre beispielsweise XLS (Extended Language Style). Dies ist die Style-Sheet-Sprache von XML.
115
4 Formatierung mit Style-Sheets Im Kapitel »Style-Sheets für Fortgeschrittene« lernen Sie noch weitere Möglichkeiten von Style-Sheets kennen. Beispielsweise wie man Elemente positioniert, Hintergrundbilder einbindet und einiges mehr.
4.1
Style-Sheets einbinden
Sie haben im letzten Abschnitt bereits gelesen, dass sich Style-Sheets als externe Datei mit HTML-Dateien verknüpfen lassen. Dies ist aber nicht die einzige Möglichkeit Stile zuzuweisen. In diesem Abschnitt zeigen wir Ihnen, welche Optionen Sie haben und wie diese umgesetzt werden. Dabei lernen Sie en passant die Syntax eines Style-Sheets kennen.
4.1.1
Style-Sheets in Tags
Die einfachste Möglichkeit ein Style-Sheet zu verwenden ist in einem Tag. Im Folgenden ein Beispiel: Überschrift in roter Arial Listing 4.1: stil_tag.html
Im obigen Beispiel wird dem Tag mittels des Attributs style eine StilDefinition zugewiesen. Diese Stil-Definition ist ein eigenständiges Style-Sheet. Abbildung 4.1: Die Überschrift wird rot und in Arial 24 Punkt dargestellt.
Man nennt ein Style-Sheet in einem HTML-Tag auch Inline-Stil oder Inline-StyleSheet. Welche Vorteile hat die Zuweisung einer Formatierung per Style-Sheet gegenüber der, mit einem normalen HTML-Tag?
116
Style-Sheets einbinden 왘 Sie ist kürzer und einfacher. Um das gleiche Ergebnis wie im obigen Beispiel
mit HTML-Tags zu erreichen, bräuchten Sie einigen Code mehr: Überschrift in roter Arial
Von den Zeichen her ist dies zwar nicht wesentlich mehr. Allerdings benötigen Sie als weiteres Tag , da sich im -Tag keine Attribute zur Textformatierung festlegen lassen. Dies ist bei vielen Tags so. Beispielsweise in allen Tags für eine Tabelle oder in den Tags für Absätze und Überschriften. Deshalb ist es sinnvoll, dort ein InlineStyle-Sheet einzusetzen. 왘 Die Style-Sheet-Definition bietet mehr Möglichkeiten. Im Beispiel oben
mussten wir die Grö ß e des Textes in der Überschrift mittels des Attributs size vom -Tag definieren. Dazu stehen uns nur die sieben Grö ß enstufen von HTML zur Verfügung. Im Style-Sheet dagegen lassen sich die Grö ß en in Punkt exakt angeben. Alternativ lässt sich die Schriftgrö ß e auch in Prozent von der normalen Schriftgrö ß e oder in anderen Maßangaben festlegen. Mehr dazu im Abschnitt »Textformatierung«.
4.1.2
Style-Sheets im Kopf der HTML-Seite
Nachdem der letzte Abschnitt Stile in einem Tag behandelt hat, wollen wir nun ein wenig globaler denken. Dazu definieren wir mit dem Tag <style> ein StyleSheet im Kopf der HTML-Seite. Stil im Kopf der HTML-Seite definieren <style type="text/css">
Text in grüner Arial mit 12 Punkt
Noch mehr Text mit derselben Formatierung
Listing 4.2: stil_head.html
117
4 Formatierung mit Style-Sheets Abbildung 4.2: Jeder Absatz erhält die im Style-Sheet festgelegte Formatierung.
Innerhalb des <style>-Tags wird mit dem Attribut type angegeben, um welche Art von Style-Sheet es sich handelt. In unserem Fall steht die Angabe text/css für ein Cascading Style-Sheet. Wenn die Angabe type fehlt, versucht der Browser automatisch die Art des Style-Sheets zu bestimmen. Dies gelingt bei den Standardbrowsern eigentlich fehlerfrei. Trotzdem empfehlen wir Ihnen diese Angabe vorzunehmen, da es einfach »besserer Stil« ist. Außerdem weiß man ja nie, welche Style-SheetArten untereinander einen Konflikt produzieren könnten. Nach dem <style>-Tag müssen wir uns mit einem kleinen Trick behelfen, um ältere Browser nicht zu verwirren. Wir setzen die komplette Style-Sheet-Definition in einen HTML-Kommentar, der mit Mix it, <span > Baby Listing 4.28: ueberschrift2.html
Lösung zu Aufgabe 7
Mit der Pseudo-Klasse hover legen Sie eine Farbe für den Rollovereffekt fest. Abbildung 4.23: Ein Rollover-Effekt.
Hover-Effekt <style type="text/css">
149
4 Formatierung mit Style-Sheets aktivierter Link Listing 4.29: stil-hover.html
Die Zuweisung des Rollovereffekts verlief recht einfach. Ein Problem gibt es allerdings. Das Attribut hover funktioniert ausschließlich im Internet Explorer. Deshalb sollten Sie in Fällen, in denen das Rollover sehr wichtig ist, lieber ein JavaScript mit zwei Grafiken verwenden. Wenn das Rollover nur schmückendes Beiwerk ist, reicht der hover-Effekt, da damit immerhin über 50 Prozent aller Browser abgedeckt werden. Lösung zu Aufgabe 8
Für die Absätze wurde hier das -Tag eingesetzt, da auf diese Weise keine großen Abstände zwischen den Absätzen entstehen. Der linke, der mittlere und der rechte Absatz sind einfach zu realisieren. Richten Sie sie einfach mit dem Attribut text-align linksbündig (left), zentriert (center) und rechtsbündig (right) aus. Etwas schwieriger sind der zweite Absatz von links und der zweite von rechts. Sie stehen jeweils auf 25 bzw. 75 Prozent der Fenstergrö ß e. Dieses Problem lösen wir durch eine Einrückung um 25 bzw. 75 Prozent mit dem Attribut text-indent. Nachbauen Bauen Sie diesen Text nach Listing 4.30: nachbauen.html
150
5
Formulare
In regelmäßigen Abständen testen gewisse Computerzeitschriften verschiedene Webauftritte, und ein häufig moniertes Manko dabei ist die fehlende Möglichkeit, Feedback zu geben. Ein einfacher E-Mail-Link würde schon genügen, aber bequemer für den Benutzer (und professioneller) ist ein FeedbackFormular. Formulare haben gegenüber einer einfachen E-Mail den Vorteil, dass Informationen gezielt und strukturiert abgefragt werden können. Beispielsweise kann in einem Formular die Adresse des Benutzers nach Name, Straße, Postleitzahl und Ort aufgeteilt abgefragt werden. Das erleichtert zum einen dem Benutzer die Arbeit beim Ausfüllen – er weiß genau, welche Angaben er machen muss, als auch Ihnen beim späteren Auswerten. Sie können die Eingaben etwa in eine Tabellenkalkulation wie Excel, QuattroPro oder StarCalc einfügen. Beim Einsatz von Formularen gibt es immer den HTML-Teil, der für die Darstellung des Formulars zuständig ist, und die Art und Weise, wie das Formular verschickt wird. Auch, wenn der Versand mit HTML nichts mehr zu tun hat, müssen Sie schon im HTML-Teil bestimmte Vorkehrungen treffen, damit der Versand wie beabsichtigt funktioniert. Aus diesem Grund müssen Sie beim Erstellen eines HTML-Formulars nicht nur auf das Layout achten, sondern auch auf die korrekte Strukturierung und Benennung der Formularelemente.
5.1
Aufbau
Ein HTML-Formular wird durch die Tags und eingefasst. Allein durch die Verwendung dieses Elements ist im Browser noch keine sonderliche Veränderung zu bemerken. Einzig und allein der Netscape Navigator bis Version 4.x fügt einen kleinen vertikalen Abstand ober- und unterhalb des Formulars ein. Um diese Effekt zu verhindern, sollten Sie das Formular entweder direkt nach dem -Tag starten (und vor beenden), oder Sie fügen die Tags an verbotenen Stellen ein, beispielsweise zwischen
und
, auf Kosten der XHTML-Kompatibilität. Es ist keineswegs so, dass innerhalb des -Elements nur Formularelemente erlaubt sind, Sie können hier jedes HTML-Element unterbringen, von weiteren Formularen einmal abgesehen. Formulare können nicht geschachtelt werden.
151
5 Formulare Das -Tag kennt die folgenden Parameter: 왘 action: Gibt das Skript (Programm) an, an das die Formulardaten ver-
schickt werden. Ist der Parameter nicht gesetzt, werden die Formulardaten an die aktuelle Seite verschickt. 왘 enctype: Definiert den MIME-Typ: die Art und Weise, wie die Daten weiter-
verschickt werden. Standardwert ist application/x-www-form-urlencoded. 왘 method: Formulardaten können entweder als Teil der URL verschickt werden
(GET), oder im HTTP-Header (POST). Der Standardwert ist GET. 왘 target: Hier geben Sie an in welchem Fenster bzw. Frame die Ausgabe des
Programms, an das die Formulardaten verschickt werden, angezeigt werden sollen (siehe auch Kapitel 7). Des Weiteren können auch hier Universalparameter wie etwa id verwendet werden; sie werden an dieser Stelle (und auch bei weiteren Auflistungen in diesem Kapitel) allerdings nicht extra aufgeführt. Wir gehen auf die einzelnen Parameter später in diesem Kapitel noch einmal ausführlicher ein. Zunächst aber kümmern wir uns um die sichtbaren Teile eines Formulars: die einzelnen Formularelemente.
5.2
Formularelemente
HTML kennt eine ganze Reihe von Formularelementen und viele davon kennen Sie bereits aus anderen Anwendungen, wie beispielsweise Ihrer Textverarbeitung oder anderen Programmen. Wir stellen sie der Reihe nach vor und geben Hinweise, wie Sie diese Elemente einsetzen können.
5.2.1
Einzeilige Textfelder
Einzeilige Textfelder bieten dem Benutzer – wie der Name schon sagt – die Möglichkeit in eine Zeile ein paar Zeichen einzutippen. Die Breite des Texteingabefeldes sowie die Anzahl der maximal einzugebenden Zeichen kann festgesetzt werden. Einzeilige Textfelder eignen sich unter anderem für die Abfrage der folgenden Informationen. 왘 Vorname 왘 Nachname 왘 Straße 왘 PLZ 왘 Ort
152
Formularelemente 왘 Benutzername 왘 Allgemein: Fragen, die mit wenigen Worten beantwortet werden können,
für die es aber unzählige Antwortmöglichkeiten gibt. Das dazugehörige Tag ist . Dieses Tag wird für mehrere Formularelemente verwendet. Um es eindeutig als einzeiliges Textfeld zu deklarieren, muss der type-Parameter auf "text" gesetzt werden. Wird der Parameter weggelassen oder auf einen unbekannten Wert gesetzt, erhält man auch ein einzeiliges Textfeld. Dies ist aber der Funktion der Browser zu verdanken, keiner festgeschriebenen Regel. Das -Element ist ein leeres Element, enthält also keinen Inhalt. Sie können es direkt mit schließen, oder Sie verwenden die bekannte Kurzform:
Das -Tag kennt die folgenden Parameter: 왘 name: Eindeutiger Bezeichner für das Formularelement. Dieser Name wird
beim Versand des Formulars verwendet. Überlegen Sie sich einen eindeutigen, kurzen, aber dennoch selbsterklärenden Namen. Optimal ist es, wenn Sie nur Buchstaben von A bis Z sowie den Unterstrich (_) verwenden, keine Leerzeichen, Umlaute oder Sonderzeichen. Das ist keine Einschränkung von HTML, sondern wichtig in Bezug auf den Formularversand und auf die Verwendung von JavaScript. 왘 value: Definiert den Text, mit dem das Textfeld vorausgefüllt ist. 왘 size: Anzeigebreite des Texteingabefelds. Hat nichts mit der maximalen
Zeichenzahl zu tun. Gibt der Benutzer mehr Zeichen ein als angezeigt werden können, scrollt der Inhalt des Textfeldes. Wird dieser Parameter nicht angegeben, wird eine Standardvorgabe des Browsers verwendet (meistens zwischen 20 und 30 Zeichen). 왘 maxlength: Maximale Anzahl von Zeichen, die in das Textfeld eingegeben
werden können. Sie können aber mit dem value-Attribut bei manchen Browsern einen längeren Text unterbringen. 왘 readonly: Dieses Attribut gibt an, dass in ein Texteingabefeld nicht
geschrieben werden kann, sondern nur zur Anzeige benutzt wird. Dies wird nur vom Internet Explorer ab Version 4 und vom Netscape Navigator ab Version 6 unterstützt. 왘 tabindex: Legt die Reihenfolge fest, in der durch die Tabulatortaste von
Formularelement zu Formularelement gesprungen werden kann (siehe auch Abschnitt 5.3). 왘 accesskey: Taste, mit der auf das Formularelement gesprungen werden
kann (siehe auch Abschnitt 5.4).
153
5 Formulare Nachfolgendes Listing zeigt verschiedene Einsatzmöglichkeiten für einzeilige Textfelder: Einzeilige Textfelder Einzeilige Textfelder Standard: Vorausgefüllt: Anzeigebreite: Textbreite: Schreibschutz: Listing 5.1: einzeiliges-textfeld.html
In Abbildung 5.1 sehen Sie das Ergebnis. In das mit »Textbreite« beschriftete Textfeld kann nur »Standard« eingegeben werden, nicht mehr. Abbildung 5.1: Einzeilige Textfelder
154
Formularelemente
5.2.2
Passwortfelder
Ein Passwortfeld entspricht in etwa einem einzeiligen Textfeld. Einziger, aber entscheidender Unterschied: Ein Text, der in das Passwortfeld eingegeben wird, erscheint nicht ausgeschrieben, sondern wird in Sternchen angezeigt, pro eingegebenem Zeichen eines. Passwortfelder werden in Webformularen meistens für folgende Angaben eingesetzt: 왘 Passwort 왘 PIN 왘 TAN (Transaktionsnummer, beispielsweise beim Online-Banking) 왘 Allgemein: Dabei handelt es sich um Angaben, die nicht direkt auf dem
Bildschirm angezeigt werden sollten, weil sonst eine Person, die den Vorgang verfolgt, die Daten missbrauchen könnte. Trotz der Sternchendarstellung werden die Daten in den Passwortfeldern im Klartext übertragen. Der Schutz besteht tatsächlich in der verschleierten Anzeige. Für Passwortfelder ist ebenfalls das -Tag zuständig. Um es von einem einzeiligen Texteingabefeld zu unterscheiden, muss der type-Parameter auf "password" gesetzt werden. Ansonsten stehen – wie beim einzeiligen Textfeld auch – die folgenden Parameter und Attribute zur Verfügung: 왘 name: Eindeutige Bezeichnung für das Passwortfeld, die beim Versand ver-
wendet wird. Auch hier gilt: einen kurzen, beschreibenden, aber unbedingt eindeutigen Namen wählen, am besten ohne Sonder- und Leerzeichen, sowie ohne Umlaute. 왘 value: Text, mit dem das Passwortfeld vorausgefüllt ist, durch Sternchen
kodiert. 왘 size: Anzeigebreite des Paswortfelds. Gibt die Anzeigebreite an, also wie
viele Zeichen gleichzeitig nebeneinander angezeigt werden. Bei proportionalen Schriftarten ist dieser Wert nicht exakt, da es dünnere und dickere Zeichen gibt. Wird dieser Parameter nicht angegeben, so legt der Browser die Breite fest (circa 20 bis 30 Zeichen). 왘 maxlength: Maximale Anzahl Zeichen, die in das Passwortfeld eingegeben
werden können. 왘 readonly: Ab Internet Explorer der Version 4 und Netscape Navigator 6
kann das Formularfeld mit einem Schreibschutz versehen werden, der Benutzer kann also nichts eingeben. Bei einem Passwortfeld ist das aber zumeist unsinnig.
155
5 Formulare 왘 tabindex: Tab-Reihenfolge der einzelnen Formularelemente (Details dazu in
Abschnitt 5.3). 왘 accesskey: Tastenkürzel für Schnellzugriff auf das Formularelement (siehe
Abschnitt 5.4) In nachfolgendem Listing finden Sie einige Passwortfelder: Passwortfelder Passwortfelder Standard: Vorausgefüllt: Schreibschutz: Listing 5.2: passwortfeld.html
In Abbildung 5.2 sehen Sie, wie dieser Code im Browser aussieht. Abbildung 5.2: Passwortfelder
156
Formularelemente
5.2.3
Mehrzeilige Textfelder
Wenn mehr als nur ein paar Worte einzugeben sind, reicht ein einzeiliges Textfeld nicht mehr aus. HTML bietet auch die Möglichkeit, Textfelder mit unbegrenzt vielen Zeilen zu erstellen. Anwendungsmöglichkeiten im Web gibt es viele: 왘 Fehlerbeschreibungen 왘 Kommentarfelder 왘 Allgemein: Fragen, die sich nicht mit ein, zwei Worten beantworten lassen.
Das mehrzeilige Textfeld ist das erste Formularelement, das wir vorstellen, das nicht mit dem -Tag realisiert wird. Es gibt ein eigenes Tag: . Zwischen und steht der Text, mit dem das Textfeld vorbelegt ist (es gibt also kein value-Attribut wie bei einzeiligen Textfeldern). Das -Tag kennt noch die folgenden Parameter: 왘 name: Der eindeutige Bezeichner des Textfeldes. Wie gehabt: Kurz, präg-
nant, aber eindeutig, möglichst keine Sonder-/Leerzeichen. 왘 cols: Anzahl der angezeigten Spalten im Textfeld. Dieser Wert ist bei Pro-
portionalschriften nur eine ungefähre Angabe. Eine Grö ß enbeschränkung gibt es nicht (außer bei älteren Browsern ca. 32768 Zeichen). Wird der Wert nicht angegeben, verwendet der Browser seine Standardeinstellung. 왘 rows: Anzahl der angezeigten Zeilen im Textfeld. Die Beschränkung gilt nur
für die Anzeige, werden mehrere Spalten eingegeben, wird gescrollt. 왘 readonly: Schreibschutz, erst ab Internet Explorer 4/Netscape Navigator 6. 왘 wrap: Textumbruch. Beim Wert "virtual" wird der Text automatisch in der
Anzeige umgebrochen (Standardeinstellung im Internet Explorer). Bei "physical" wird der Text umgebrochen und die Umbrüche werden auch beim Formularversand beibehalten. Die letzte Möglichkeit, "off", sorgt für keinen Umbruch (Voreinstellung im Netscape Navigator). 왘 tabindex: Legt die Reihenfolge für den Tabulatorzugriff fest. 왘 accesskey: Zugriffstaste für das Formularelement.
Auf (viel zu) vielen Seiten wird der wrap-Parameter nicht gesetzt, was dazu führt, dass Nutzer des Netscape Navigator bei längeren Texten viel scrollen müssen. An so einem peinlichen Effekt erkennen Sie einen schlampigen Programmierer, der wohl nur im Internet Explorer getestet hat – eine Arroganz, die im professionellen Bereich unverzeihlich ist. Nachfolgend ein paar Beispiele: Mehrzeilige Textfelder
157
5 Formulare Mehrzeilige Textfelder Standard: Vorausgefüllt: Wer viel Freude hat, muss ein guter Mensch sein: aber vielleicht ist er nicht der Klügste, obwohl er gerade das erreicht, was der Klügste mit all seiner Klugheit erstrebt. (F. Nietzsche) Schreibschutz: Wer viel Freude hat, muss ein guter Mensch sein: aber vielleicht ist er nicht der Klügste, obwohl er gerade das erreicht, was der Klügste mit all seiner Klugheit erstrebt. (F. Nietzsche) 70x10 Zeichen: Wer viel Freude hat, muss ein guter Mensch sein: aber vielleicht ist er nicht der Klügste, obwohl er gerade das erreicht, was der Klügste mit all seiner Klugheit erstrebt. (F. Nietzsche) Listing 5.3: mehrzeiliges-textfeld.html
Der Browser zeigt diese HTML-Seite wie in Abbildung 5.3 zu sehen an. Abbildung 5.3: Mehrzeilige Textfelder.
158
Formularelemente
5.2.4
Checkboxen
Eine Checkbox, oder auch Kontrollkästchen genannt, kennt zwei Zustände: an(-gekreuzt) und aus(-gekreuzt). Auch verschiedene Applikationen verwenden Checkboxen, beispielsweise sind sie in den Einstellungsdialogfenstern von Browsern zu finden (siehe Abbildung 5.4). Abbildung 5.4: Checkboxen in den Einstellungen des Internet Explorer.
In Webformularen werden Checkboxen unter anderem für folgende Angaben eingesetzt: 왘 Auswahl von Hobbies. 왘 Auswahl von Computerhardware, die man besitzt. 왘 Akzeptanz von Allgemeinen Geschäftsbedingungen. 왘 Allgemein: Fragen, die man mit ja/nein beantworten kann und Fragen, bei
denen aus einer Reihe von Antworten beliebig viele ausgewählt werden können. Sehr häufig wird in Webformularen die Frage gestellt: Welche der folgenden Produkte wollen Sie sich in nächsten Zeit anschaffen? Es werden eine Reihe von Antwortmöglichkeiten vorgegeben, von denen keine, eine oder mehrere angegeben werden können. Von der (technischen) HTML-Seite her ist diese Gruppierung aber nicht mandatorisch und auch nicht abbildbar. Jede Checkbox steht für sich allein. Um sie darzustellen, muss wieder das -Tag verwendet werden, diesmal mit dem Parameter type="checkbox". Die restlichen Parameter sind die folgenden:
159
5 Formulare 왘 name: Die Bezeichnung der Checkbox, mit den bekannten Einschränkun-
gen: kurze, prägnante Namen, ohne Sonderzeichen. Um eine Reihe von Checkboxen zu gruppieren, können Sie denselben Bezeichner verwenden. Dies kann aber mit einigen Skriptsprachen Probleme bereiten. Sie sollten also unterschiedliche Bezeichner wählen. 왘 checked: Bei Verwendung dieses Attributs ist die Checkbox beim Laden des
Formulars vorausgewählt. 왘 tabindex: Reihenfolge für den Tabulatorzugriff. 왘 accesskey: Tastenkürzel für das Formularelement.
Und so sehen die Checkboxen aus, einmal angekreuzt, einmal ausgekreuzt: Checkboxen Checkboxen Aus: An: Listing 5.4: checkbox.html
Die Darstellung der Checkboxen finden Sie in Abbildung 5.5. Abbildung 5.5: Checkboxen
160
Formularelemente
5.2.5
Radiobuttons
Radiobuttons kennen genauso wie Checkboxen zwei Zustände, an (aktiviert) und aus. Der Unterschied: Radiobuttons sind zu Gruppen zusammengefasst und von allen Radiobuttons aus einer Gruppe kann immer nur höchstens einer aktiviert sein (oder eben keiner). In Webformularen finden Sie Radiobuttons unter anderem für folgende Angaben: 왘 Angabe des Geschlechts. 왘 Bewertung eines Angebots in gut/mittel/schlecht. 왘 Auswahl des eingesetzten Betriebssystems. 왘 Allgemein: Fragen, bei denen von mehreren Antwortmöglichkeiten nur
eine ausgewählt werden darf. Ein aktivierter Radiobutton kann nicht durch Anklicken deaktiviert werden, wie das bei Checkboxen der Fall ist. Die einzige Möglichkeit einen Radiobutton zu deselektieren besteht darin, einen anderen Radiobutton aus derselben Gruppe zu aktivieren. Bei der HTML-Umsetzung wird wieder das -Element verwendet. Zur Identifizierung des Elements als Radiobutton muss der type-Parameter auf "radio" gesetzt werden. Ansonsten gibt es noch die folgenden Parameter: 왘 name: Bezeichnet die gesamte Gruppe aus Radiobuttons. Alle Radiobuttons
mit demselben name-Parameter gehören zu einer Gruppe und von allen Radiobuttons aus einer Gruppe kann nur einer aktiviert werden. Ansonsten gelten die üblichen Regeln: kurzer, prägnanter Name ohne Sonderzeichen. 왘 value: Die einzelnen Radiobuttons einer Gruppe haben denselben name-
Parameter. Sie werden anhand des value-Parameters voneinander unterschieden. Beim Formularversand wird der value-Parameter des selektierten Radiobuttons übermittelt. 왘 checked: Bei Verwendung dieses Attributs ist der Radiobutton vorausge-
wählt. 왘 tabindex: Legt die Tabulatorreihenfolge fest. 왘 accesskey: Taste für den Schnellzugriff.
Folgendes Listing stellt zwei Radiobuttons einer Gruppe dar, davon ist einer vorausgewählt: Radiobuttons
Das Aussehen der Radiobuttons finden Sie in Abbildung 5.6 abgedruckt. Abbildung 5.6: Radiobuttons
5.2.6
Auswahllisten
Eine Möglichkeit von Auswahllisten sind Pull-down-Menüs, wie beispielsweise die Adressleiste des Browsers oder die Schriftenauswahl in einer Textverarbeitung (siehe Abbildung 5.7). So eine Auswahlliste besteht aus mehreren, einzeiligen Einträgen, von denen einer ausgewählt werden kann. Im Web sieht man Auswahllisten unter anderem bei den folgenden Angaben: 왘 Länderauswahl 왘 Haushaltseinkommen 왘 Ablaufjahr der Kreditkarte
162
Formularelemente 왘 Allgemein: Fragen, bei denen von mehreren Antwortmöglichkeiten nur
eine ausgewählt werden darf und viele Antwortmöglichkeiten bestehen, die platzsparend untergebracht werden sollen. 왘 Allgemein: Wie oben, nur können mehrere Antwortmöglichkeiten ausge-
wählt werden. Abbildung 5.7: Eine Auswahlliste in WordPad
Der letzte Punkt deutet es bereits an: Eine Auswahlliste ist besonders platzsparend, denn viele Antwortmöglichkeiten können auf sehr begrenztem Raum untergebracht werden. Ansonsten ist das Prinzip dem der Radiobuttons und Checkboxen ähnlich. Als Faustregel gilt: Bei wenigen Antwortmöglichkeiten sollten Sie Checkboxen und Radiobuttons einsetzen, ansonsten Auswahllisten. Aus programmiertechnischer Sicht sieht dies folgendermaßen aus. Der äußere Container für die Liste ist das <select>-Element, das die folgenden Parameter kennt: 왘 name: Eindeutiger Bezeichner für die Auswahlliste: kurz, prägnant, eindeu-
tig. 왘 size: Höhe der Auswahlliste, Anzahl der angezeigten Listenoptionen. Der
Standardwert ist eins. 왘 tabindex: Tabulatorindex. 왘 multiple: Wird dieses Attribut verwenden, können mehrere Elemente der
Liste ausgewählt werden. Dies (das Auswählen) funktioniert nur, wenn size grö ß er als eins ist. Sie können – wie unter den meisten grafischen Benutzeroberflächen üblich – durch Drücken der (Strg)-Taste und Klicken mit der Maus mehrere Elemente auswählen.
163
5 Formulare Ein einzelnes Element der Auswahlliste wird durch das -Attribut dargestellt. Innerhalb des -Elemenbts wird der Text untergebracht, mit dem der einzelne Listeneintrag beschriftet ist. Das -Tag kennt die folgenden Parameter: 왘 value: Der interne Wert des Listenelements, der beim Versand des Formu-
lars verschickt wird. Wenn kein value-Parameter angegeben wird, übernimmt der Browser die Beschriftung des Listenelements als Wert des valueParameters. 왘 selected: Wird dieses Attribut gesetzt, ist der aktuelle Listeneintrag vorse-
lektiert. Normalerweise ist bei Pull-down-Listen (size="1") der oberste Eintrag vorausgewählt, bei Mehrfachlisten gibt es keinen Eintrag. Folgendes Listing stellt einige Möglichkeiten dar: Auswahllisten Auswahllisten Standard: <select> Tobias Hauser Marianne Pentenrieder Christian Wenz Mehrfachliste: <select size="2"> Tobias Hauser Marianne Pentenrieder Christian Wenz Vorauswahl: <select> Tobias Hauser Marianne Pentenrieder Christian Wenz Vorauswahl (mehrfach): <select size="3" multiple> Tobias Hauser Marianne Pentenrieder Christian Wenz Listing 5.6: auswahlliste.html
164
Formularelemente Sie finden diese vier Auswahllisten – je zwei Pull-down-Menüs und zwei Mehrfachlisten – in Abbildung 5.8. Abbildung 5.8: Auswahllisten
5.2.7
Datei-Uploads
An einigen (wenigen) Stellen im World Web Web gibt es die Möglichkeit, zusammen mit den Formulardaten eine Datei mitzuschicken. Hierzu gibt es unter anderem die folgenden Anwendungsmöglichkeiten: 왘 Übertragung eines Fehlerberichts an den Hersteller. 왘 (Webbasierte) Übertragung einer Datei auf einen Webserver. 왘 Upload eines Dateianhangs bei einer Webmail-Anwendung.
Die HTML-Darstellung ist kein Problem. Wieder einmal müssen Sie das -Tag verwenden und den type-Parameter auf "file" setzen. Ansonsten gibt es noch die folgenden Parameter: 왘 name: Der eindeutige Bezeichner, wie üblich kurz, prägnant, ohne Sonder-
zeichen. 왘 size: (Anzeige-)Breite des Eingabefeldes. In das Eingabefeld kann der
Benutzer den lokalen Dateinamen der zu übertragenen Datei eingeben. 왘 maxlength: Maximale Grö ß e der zu übertragenden Dateien in Bytes (Zei-
chen). Die Standardeinstellung sieht keine Beschränkung bei der Dateigrö ß e vor.
165
5 Formulare 왘 accept: Hiermit kann die Liste der zu akzeptierenden Dateitypen angege-
ben werden. Beispielsweise können mit text/html die möglichen zu übertragenden Dateien auf HTML-Dateien beschränkt werden, mit text/* auf alle Textdateien, inklusive reiner Textdateien und HTML-Dateien. In der Praxis hat dieser Parameter keine Auswirkungen, praktisch alle Browser ermöglichen es dem Benutzer beliebige Dateitypen hochzuladen. 왘 tabindex: Reihenfolge für Wechsel zwischen den Formularelementen via
(Tab)-Taste. 왘 acceskey: Tastenkürzel für Zugriff auf das Formularelement
In der Darstellung wird ein Datei-Upload-Element durch ein Texteingabefeld (für den lokalen Dateinamen) und eine Schaltfläche dargestellt, die – je nach Sprache des Browsers – mit DURCHSUCHEN oder BROWSE beschriftet ist. Auf Mausklick öffnet sich ein Dialogfenster, in dem der Benutzer die zu übertragende Datei auswählen kann (siehe Abbildung 5.9). Abbildung 5.9: Das Dialogfenster zur Auswahl der zu übertragenden Datei
Damit die Datei auch korrekt verschickt werden kann, müssen Sie noch zwei spezielle Einstellungen tätigen: 1. Setzen Sie den enctype-Parameter des -Tags auf "multipart/formdata". 2. Setzen Sie den method-Parameter des -Tags auf "post". Datei-Upload
Das endgültige Aussehen des Formularelements können Sie Abbildung 5.10 übernehmen. Abbildung 5.10: Datei-Upload
5.2.8
Versteckte Felder
Ein verstecktes Formularfeld ist nicht sichtbar, hat aber einen Namen und einen Wert, und beides wird beim Formularversand übermittelt. Wenn Sie reines HTML programmieren, benötigen Sie dieses Formularelement nicht. Es wird in Verbindung mit serverseitigen Mitteln verwendet; so können beispielsweise bei einem mehrseitigen Formular Daten zwischen den einzelnen Formularseiten übermittelt werden, ohne dass diese angezeigt werden. Um ein verstecktes Formularfeld einzusetzen, benötigen Sie das -Tag, und geben als Parameter type="hidden" an. Ansonsten gibt es noch die folgenden Parameter: 왘 name: Der eindeutige Bezeichner des versteckten Feldes. 왘 value: Der Wert des versteckten Feldes.
HTML kennt mehrere Arten von Schaltflächen. Die für reine HTML-Anwendungen uninteressantesten Schaltflächen sind diejenigen, die eigentlich keine Funktion innehaben. Sie können nur mit JavaScript-Mitteln angesprochen werden. Verwenden Sie , um solch eine Schaltfläche ohne Funktion zu erstellen. Es stehen Ihnen die folgenden Parameter zur Verfügung: 왘 name: Eindeutige Bezeichnung der Schaltfläche. 왘 value: Beschriftung der Schaltfläche. 왘 tabindex: Legt die Reihenfolge fest, in der von Formularelement zu Formu-
larelement gesprungen werden kann (mit (Tab)). 왘 accesskey: Legt die Taste fest, mit dem das Formularelement ausgewählt
werden kann. Schaltfläche Schaltfläche Listing 5.9: schaltflaeche-1.html
168
Formularelemente Die durch vorhergehendes Listing erzeugte Schaltfläche sehen Sie in Abbildung 5.11. Abbildung 5.11: Schaltfläche
Dieses Vorgehen ist browserunabhängig. Der Internet Explorer (ab Version 4) und der Netscape Navigator (ab Version 6) unterstützten noch eine zweite Möglichkeit: Das -Element. Mit definieren Sie die Schaltfläche (das type="button" ist auch der Standardwert, sollte aber trotzdem angegeben werden). Alles, was sich innerhalb dieses HTML-Elements befindet, gehört zur Schaltfläche (also beispielsweise auch eine Grafik). Aber auch hier gilt: Die Schaltfläche ist – sofern Sie kein JavaScript einsetzen – funktionslos. Das value-Attribut hat auch hier die Funktion einer Beschriftung, sollte das -Element ohne Inhalt sein. Dies wird jedoch nur von Netscape 6 unterstützt. Schaltfläche Schaltfläche Listing 5.10: schaltflaeche-2.html
169
5 Formulare Abbildung 5.12: Schaltfläche
5.2.10
Zurücksetzen-Schaltflächen
Eine Schaltflächenart, die früher häufiger verwendet wurde, in moderneren Formularen jedoch nicht mehr gebräuchlich ist, ist die Zurücksetzen-Schaltfläche. Auf einen Mausklick werden alle Formularelemente auf ihren Ursprungszustand zurückgesetzt. Das bedeutet, dass der Inhalt der Formularfelder gelöscht wird, oder, wenn die Formularfelder (durch entsprechende valueParameter oder durch Attribute wie checked und selected) vorausgefüllt wurden, wieder die Werte der Vorausfüllung annehmen. Wie bereits angedeutet wird dieses Formularelement nur noch selten eingesetzt. Der Grund ist recht einfach: Der Nutzer hat kaum etwas davon, alle Formulareingaben zu löschen. Wenn er das Formular nicht ausfüllen möchte, schließt er einfach das Browserfenster. Wenn er es komplett neu ausfüllen will, so tut er das, und löscht die vorausgefüllten Werte. Eine weitere Gefahr liegt im schnellen Klicken. Viele Formulare haben immer noch zwei Schaltflächen: Eine zum Verschicken des Formulars und eine zum Zurücksetzen. Je nach Geschmack des Webdesigners ist die ZurücksetzenSchaltfläche links oder rechts. Wer nun die Schaltfläche zum Verschicken links vermutet und in der Eile auf die links liegende Schaltfläche klickt, ohne deren Beschriftung zu lesen, hat Pech – die mühsam gemachten Eingaben sind weg. Allen Gefahren zum Trotze der erforderliche HTML-Code. Wie schon öfters in diesem Kapitel wird das -Tag verwendet, mit Parameter type="reset". Des Weiteren gibt es noch die folgenden Attribute: 왘 name: Der eindeutige Bezeichner, der aber unnötig ist. 왘 value: Wert und gleichzeitig Beschriftung der Schaltfläche; Standard ist
ZURÜCKSETZEN oder RESET FORM, je nach Sprache des Browsers.
170
Formularelemente 왘 tabindex: Tab-Reihenfolge des Formularelements im Vergleich zu den
anderen Elementen. 왘 accesskey: Zugriffstaste für das Formularelement.
Eine Alternative, die aber nur vom Internet Explorer ab Version 4 und dem Netscape Navigator ab Version 6 unterstützt wird, ist das oben bereits gezeigte -Element. Durch den Parameter type="reset" wird die Schaltfläche als Zurücksetzen-Schaltfläche gekennzeichnet. Der Rest funktioniert wie oben: Der value-Parameter gibt die Alternativbeschriftung an (nur vom Netscape 6 unterstützt) und alles innerhalb des -Elements dient als Beschriftung der Schaltfläche. Zurücksetzen-Schaltfläche Zurücksetzen-Schaltfläche Listing 5.12: zuruecksetzen-schaltflaeche-2.html
5.2.11
Versende-Schaltflächen
Die letzte Schaltfläche ist auch die, die mit Abstand am häufigsten eingesetzt wird. Mit einer Versende-Schaltfläche wird das Formular unverzüglich abgeschickt. Je nach Konfiguration des Browsers wird unter Umständen zuvor noch
171
5 Formulare eine Warnmeldung angezeigt (siehe Abbildung 5.13). Diese Warnmeldung kann von der HTML-Seite aus nicht verhindert werden. Abbildung 5.13: Warnmeldung bei Formularversand.
Bei Formularen, die nur ein Formularelement besitzen, verzichtet der Browser meistens auf die Warnmeldung. Eine Versende-Schaltfläche wird mit in HTML umgesetzt. Desweiteren gibt es noch die folgenden Parameter: 왘 name: Eindeutige Bezeichnung, ist aber in der Regel unnötig (außer, Sie
haben mehrere Versende-Schaltflächen in einem Formular und wollen die voneinander unterscheiden). 왘 value: Beschriftung der Schaltfläche; Standard ist SUBMIT FORM oder
ANFRAGE SENDEN. 왘 tabindex: Tab-Reihenfolge des Formularelements im Vergleich zu den
anderen Elementen. 왘 accesskey: Zugriffs-Tastenkürzel.
Alternativ lässt sich die Schaltfläche auch mit dem -Element realisieren, was sich aber, wie gesagt, nur mit dem Internet Explorer ab Version 4 und dem Netscape Navigator ab Version 6 umsetzen lässt – womit die immer noch weit verbreitete Netscape-Version 4.x außen vor gelassen wird. Der type-Parameter des -Tags muss dazu auf "submit" gesetzt werden.
Wenn Sie eine Grafik zum Verschicken des Formulars einsetzen möchten, bietet Ihnen HTML noch eine weitere Möglichkeit, die von allen Browsers unterstützt wird: . Dieses Element kennt die folgenden zusätzlichen Parameter: 왘 src: Name bzw. URL der Grafik, die als Schaltfläche fungieren soll. 왘 border: Dicke der Rahmenlinie um die Grafik. Stellen Sie diesen Parameter
auf null, um den (oft ästhetisch unpassenden) Rahmen zu verhindern. 왘 name: Eindeutige Bezeichnung 왘 tabindex: Tabulatorreihenfolge 왘 accesskey: Zugriffstaste
Beim Versand mit diesem Formularelement werden die x- und y-Koordinaten der Stelle, auf die mit der Maus innerhalb der Grafik geklickt wurde, mit übermittelt. Sie können dann serverseitig über name-Parameter.X und name-Parameter.Y auf diese Werte zugreifen, also beispielsweise über button.X und button.Y. Versende-Schaltfläche Versende-Schaltfläche
Das Ergebnis finden Sie in Abbildung 5.14. Beachten Sie, dass im Gegensatz zum -Element die Grafik allein dasteht und nicht auf eine (graue) Schaltfläche gedruckt wurde. Abbildung 5.14: VersendeSchaltfläche
5.3
Tabulator-Reihenfolge
Die meisten Formularelemente kennen den Parameter tabindex. Damit kann die Reihenfolge festgesetzt werden, mit der ein Benutzer mit der (Tab)-Taste von Formularelement zu Formularelement springen kann. Viele Benutzer – vor allem fortgeschrittenere – sind mit der Tastatur bei manchen Aufgabenstellungen schneller als mit der Maus. Standardmäß ig werden dabei die Formularelemente in der Reihenfolge angesprungen, in der sie im HTML-Code auftauchen. Der Wert des Parameters tabindex ist eine Zahl zwischen 0 und 32767. Die Tabreihenfolge wird durch die Werte in aufsteigender Reihenfolge festgelegt, also das Formularelement mit dem höchsten Wert für tabindex wird zuletzt angesprungen. Im folgenden Beispiel würde man also mit der (Tab)-Taste von hinten nach vorne springen, also entgegen der normalen Richtung. Tabulator-Reihenfolge
174
Schnellzugriff per Tastenkürzel Tabulator-Reihenfolge
Listing 5.16: tabulatorreihenfolge.html
Auch hier gilt wieder: Netscape 4.x (und frühere Versionen) fällt hier aus der Rolle und unterstützt den Parameter nicht, hier wird die Tabulator-Reihenfolge nicht geändert. Der Internet Explorer ab Version 4 und Netscape 6 interpretieren dagegen den Parameter wie gewünscht.
5.4
Schnellzugriff per Tastenkürzel
Ein weiteres Attribut, das wir Ihnen bisher mehrmals »untergejubelt« haben, ist accesskey. Hiermit legen Sie eine Schnellzugriffstaste fest. Wenn der Benutzer diese Taste im Browser drückt, wird das entsprechende Element ausgewählt/markiert sowie an die entsprechende Stelle gescrollt (bei längeren Formularen). Dies wird momentan nur vom Internet Explorer ab Version 4 sowie vom Netscape Navigator ab Version 6 unterstützt. Zugriffstaste Zugriffstaste Element 1 Element 2 Element 3 Listing 5.17: zugriffstaste.html
175
5 Formulare Abbildung 5.15: Zugriffstaste
Wenn Sie nun (Alt)+(Zugriffstaste) drücken, passiert folgendes: 왘 Bein Texteingabefeldern wird der Fokus in das Feld gesetzt und (im Internet
Explorer) der Feldinhalt markiert (im Beispiel oben: beim Drücken von (Alt)+(1)). 왘 Radiobuttons
und
Checkboxen
werden
aktiviert/angekreuzt
(oben:
(Alt)+(2)). 왘 Bei Auswahllisten wird die Auswahlliste markiert. 왘 Schaltflächen werden gedrückt (im vorhergehenden Listing: (Alt)+(3)).
5.5
Formularelemente formatieren
Formularelemente lassen sich am einfachsten per Cascading Style Sheets (CSS) formatieren; Dateils dazu erfahren Sie einige Seiten weiter. Zunächst aber zur »Old-Style-Formatierung«. Mit herkömmlichen HTML-Mitteln sind Formularelemente nur sehr eingeschränkt zu formatieren. Sie können hierzu das Element verwenden. Die meisten Browser übernehmen dieses Element für den Inhalt des Elements (also beispielsweise den Textinhalt eines Eingabefeldes): Formularelemente formatieren Formularelemente formatieren
Wenn Sie dieses Beispiel im Browser betrachten, werden Sie feststellen, dass der Internet Explorer die -Anweisungen ignoriert, der Netscape Navigator 6 immerhin die verwendete Schriftart für das Texteingabefeld übernimmt (nicht aber für die Beschriftung der Schaltfläche, siehe Abbildung 5.16). Daraus können Sie schlussfolgern: Wenn formatieren, dann (nur) mit CSS. Abbildung 5.16: Formularelemente formatieren
Ansonsten können Sie, wie gehabt, CSS-Stilanweisungen verwenden, um Formularelemente zu formatieren. Entweder, Sie verwenden die Parameter id, class oder style (ggf. nebst entsprechenden Stilanweisungen im Abschnitt), oder Sie geben den Tagnamen in der Stilanweisung mit an: Formularelemente mit CSS formatieren <style>
Um ein Formular zu verschicken, benötigen Sie in der Regel ein Programm, das die Formulardaten verarbeitet. Dieses Programm ist meistens in einer serverseitigen Skriptsprache wie etwa ASP oder PHP geschrieben (wir empfehlen hier für die weitere Lektüre die Titel »Workshop ASP« und »Workshop PHP« aus derselben Reihe). Sie haben dabei prinzipiell die Wahl zwischen den folgenden Versendemethoden:
178
Formularversand 왘 POST: Die Formulardaten werden als Teil des HTTP-Headers übertragen. Sie
sind also nicht für den Benutzer sichtbar, für das Programm, an das die Daten verschickt werden, aber hingegen schon. 왘 GET: Die Formulardaten werden als Teil der URL verschickt. Dabei werden
name- und dazugehörige value-Parameter durch Gleichheitszeichen voneinander getrennt an die URL angehängt; die einzelnen name-value-Paare werden durch das kaufmännische »und« (&) aneinander gehängt. Eine mögliche URL ist also .../skriptname.php?name1=value1&name2= value2& name3=value3. Per GET werden normalerweise auch normale HTML-Seiten vom Webserver abgerufen, Sie könnten also auch HTML-Seiten als Ziel für ein GET-Formular angeben, POST-Seiten jedoch in der Regel nicht. In der Regel ist ein Versand via POST zu empfehlen, denn die Länge einer URL ist von Browsern und Webservern auf theoretisch etwa 2000 Zeichen beschränkt, in der Praxis stö ß t man aber oft schon bei etwa 512 Zeichen an seine Grenzen. Den enctype-Parameter des -Tags müssen Sie nicht explizit setzen, der Standard ist "application/x-www-form-urlencoded". Wenn Sie jedoch ein Datei-Upload-Feld in Ihrem Formular haben, müssen Sie enctype=" multipart/form-data" setzen und method="post" verwenden. Wenn Ihr Hoster nicht die Möglichkeit anbietet, serverseitige Skripte einzusetzen, sollten Sie sich einen entsprechenden Dienst im Internet suchen; ein Beispiel hierfür ist etwa www.formmailer.com. Als letzte – aber keineswegs empfehlenswerte – Alternative ist noch die Möglichkeit zu erwähnen, die Formulardaten direkt per E-Mail zu versenden. Dazu müssen Sie die folgenden Schritte ausführen: 1. Setzen Sie im -Tag action="[email protected]" – Sie müssen hier natürlich Ihre eigene E-Mail-Adresse einsetzen. 2. Setzen Sie im -Tag method="post". Ein Versand per GET funktioniert an dieser Stelle nicht. 1. Setzen Sie im -Tag enctype="text/plain". Damit werden die Daten in einem besser lesbaren Format als n1=v1&n2=v2&n3=v3&... verschickt. Wieso wir von dieser Methode abraten, obwohl sie in vielen anderen Quellen erwähnt wird? 왘 Damit das Ganze funktioniert, muss der Benutzer das zum Browser mitge-
lieferte E-Mail-Programm korrekt eingerichtet haben. 왘 Dieses Vorgehen funktioniert nur beim Netscape Navigator Version 2.x bis
4.x einigermaßen einwandfrei, beim Internet Explorer (insbesondere in Verbindung mit Outlook) und beim Netscape 6 eher selten. 왘 Sollte es trotzdem funktionieren, erhält der Benutzer zuvor eine beängsti-
gende Warnmeldung (siehe Abbildung 5.18).
179
5 Formulare Abbildung 5.18: Die Warnmeldung des Netscape Navigator 4.x.
5.7
Umsetzung
Wenn Sie ein HTML-Formular erstellen, sollten Sie die einige vorbereitende Überlegungen anstellen, bevor Sie sich an die Umsetzung machen: 왘 Erstellen Sie eine Liste aller Daten, die Sie abfragen möchten. 왘 Formulieren Sie die Fragen, die Sie stellen möchten, um die Daten abzufra-
gen. 왘 Überlegen Sie sich für jede Frage, welches Formularelement hierfür geeig-
net ist. 왘 Erstellen Sie erst jetzt ein Layout für die diversen Formularelemente. 왘 Überlegen Sie sich ein geeignetes Namensgebungsschema für die einzel-
nen Formularelemente. 왘 Setzen Sie das Layout in HTML um, unter Verwendung des Namens-
gebungsschemas. 왘 Kümmern Sie sich um den Versand des Formulars.
5.8
Aufgaben
Aufgabe 1
Erstellen Sie eine Login-Maske für einen geschützten Bereich einer Webseite. Die Daten – Benutzername und Passwort – sollen per POST an das Skript /login.asp geschickt werden. Aufgabe 2
Die Allgemeinen Geschäftsbedingungen einer Firma sollen auf einer Seite angezeigt werden, möglichst platzsparend, aber dennoch gut lesbar. Lösen Sie dieses (darstellerische) Problem mit einem geeigneten Formularelement. Fügen Sie noch zwei Links dazu, einen zum Akzeptieren der AGBs, den anderen zum Ablehnen.
180
Aufgaben Aufgabe 3
Erweitern Sie das Listing aus der vorhergehenden Aufgabe: Anstelle der beiden Links zum Annehmen/Ablehnen der AGBs sollen dem Benutzer zwei Schaltflächen zur Verfügung stehen, die denselben Effekt haben. Verwenden Sie nur HTML, keine client- oder serverseitigen Skriptsprachen. Aufgabe 4
Finden Sie eine noch platzsparendere Lösung für die Annahme/Ablehnung der AGBs (Sie dürfen dazu das Vorhandensein beliebiger serverseitiger Skripte voraussetzen). Aufgabe 5
Welches Formularelement wird im World Wide Web am häufigsten zur Auswahl des Landes des Benutzers gewählt, und wieso? Aufgabe 6
Überlegen Sie sich mindestens zwei Möglichkeiten, dem Benutzer ein Formular zur Eingabe des Ablaufdatums seiner Kreditkarte anzubieten und ihm dabei möglichst wenig Möglichkeiten der Falscheingabe zu geben. Aufgabe 7
Es soll ein Anmeldeformular für einen Freemail-Service erstellt werden. Dazu sollen die folgenden Informationen abgefragt werden: 왘 Vorname 왘 Name 왘 Anschrift 왘 PLZ 왘 Ort 왘 Land 왘 Geburtsdatum 왘 Geschlecht 왘 gewünschter Benutzername 왘 Passwort 왘 Hobbies 왘 Nettojahreseinkommen
Überlegen Sie sich für alle Angaben, mit welchen Formularfeldern diese am besten umgesetzt werden können.
181
5 Formulare Aufgabe 8
Erstellen Sie die entsprechende HTML-Seite für die in der vorherigen Aufgabe entworfene Anmeldeseite. Aufgabe 9
Nachfolgend sehen Sie die Seite, die bei einem (fiktiven) Online-Nachrichtendienst zum E-Mail-Versand einer Meldung an einen Freund ermöglicht. Finden Sie eine optimale Tab-Reihenfolge. Artikel per E-Mail verschicken Artikel per E-Mail verschicken E-Mail-Adresse des Empfängers Ihr E-Mail-Adresse Ihr Name (optional) Listing 5.20: artikel-versenden-1.html
Aufgabe 10
Erstellen Sie eine Auswahlliste, die als Werte drei Webadressen enthält. Sobald eine der Adressen ausgewählt wird, erfolgt der Aufruf der entsprechenden Seite im Browser. Im Lösungshinweis finden Sie den dazu benötigten JavaScript-Code. Aufgabe 11
Was stört Sie an folgendem Formular? Formular mit Fehlern Formular mit Fehlern
182
Hinweise
Name
Geschlecht
männlich weiblich
Wie alt sind Sie?
1-17 18-24 25-99
Listing 5.21: fehler.html
5.9
Hinweise
Hinweise zu Aufgabe 1
Sie benötigen drei Formularfelder – vergessen Sie die Versenden-Schaltfläche nicht! Hinweise zu Aufgabe 2
AGBs sind in der Regel recht lang, Sie müssen also die Möglichkeit zum Scrollen geben. Welches Formularelement bietet Scrolling an? Hinweise zu Aufgabe 3
Einen (wenn auch versteckten) Hinweis finden Sie im Abschnitt über die Versendemethoden.
183
5 Formulare Hinweise zu Aufgabe 4
Der Trick besteht darin, mit zwei verschiedenen Seiten zu arbeiten, einer mit dem Formular und einer mit den Allgemeinen Geschäftsbedingungen. Sie müssen sich dann nur noch überlegen, wie Sie im Formular vermerken, dass die Geschäftsbedingungen akzeptiert wurden. Hinweise zu Aufgabe 5
Beispiele hierfür finden Sie bei diversen Freemail-Anbietern, beispielsweise www.hotmail.de. Hinweise zu Aufgabe 6
Das Ablaufdatum hat immer das Format Monat/Jahr. Sie sollten zumindest Monat und Jahr auftrennen. Wenn Sie es dem Benutzer ganz einfach machen möchten, können Sie ihm die verschiedenen Tage/Monate/Jahre zur Auswahl anbieten. Hinweise zu Aufgabe 7
Überlegen Sie sich für jede einzelne Angabe, welches Formularelement am besten geeignet ist. Im Kapitel finden Sie bei der Vorstellung der einzelnen Elemente jeweils ein paar Hinweise, bei welchen Fällen welches Element optimal geeignet ist. Hinweise zu Aufgabe 8
Verwenden Sie die Lösung der vorhergehenden Aufgabe und vergessen Sie die restlichen benötigten HTML-Elemente nicht! Hinweise zu Aufgabe 9
Gehen Sie davon aus, dass die meisten Benutzer nur die beiden E-Mail-Adressen angeben möchten und dann sofort die Schaltfläche drücken. Stellen Sie die Tabreihenfolge dementsprechend ein. Hinweise zu Aufgabe 10
Ergänzen Sie das <select>-Tag um folgenden Parameter: onChange="location.href=this.options[this.selectedIndex].value" Hinweise zu Aufgabe 11
Zum Abschluss des Kapitels noch eine Aufgabe, bei der weniger programmiert, als vielmehr analysiert werden soll. Wir haben in das Listing verschiedene Fehler eingebaut, einige logischer Art, einige, die beim Versand zu Problemen führen können.
184
Lösungen
5.10
Lösungen
Lösung zu Aufgabe 1
Sie benötigen drei Formularelemente: 왘 Ein Textfeld zur Eingabe des Logins. 왘 Ein Passwortfeld zur Eingabe des Passworts. 왘 Eine Versendeschaltfläche (wird gerne vergessen).
Hier die fertige HTML-Datei: Login Login Benutzername Passwort Listing 5.22: login.html Abbildung 5.19: Die Login-Maske.
185
5 Formulare Lösung zu Aufgabe 2
Das entsprechende Formularelement ist natürlich das mehrzeilige Textfeld. Achten Sie nur darauf, dass Sie wrap="virtual" setzen. AGB AGB §1 Wir sind nie schuld. §2 Wenn wir schuld sind, tritt automatisch §1 in Kraft. Ich akzeptiere diese Bedingungen. Ich akzeptiere diese Bedingungen nicht. Listing 5.23: agb-1.html
Lösung zu Aufgabe 3
Der im Lösungshinweis angedeutete Tipp befindet sich bei der Vorstellung der Versendemethoden. Dort heißt es, POST auf HTML-Seiten ist in der Regel nicht gestattet, GET jedoch schon, da dies die normale Anforderung an einen Webserver zum Heranholen einer Seite ist. Damit ist die Lösung klar: Sie erstellen ein Formular mit method="get" und geben als Formularziel die Seite an, die aufgerufen werden soll:
Für die Schaltfläche zum Ablehnen der AGBs erstellen Sie ein zweites Formular. Die endgültige Seite sieht also folgendermaßen aus: AGB AGB
186
Lösungen §1 Wir sind nie schuld. §2 Wenn wir schuld sind, tritt automatisch §1 in Kraft. Listing 5.24: agb-2.html
Wir haben das mehrzeilige Textfeld in ein eigenes Formular gelegt, damit die AGBs nicht unnötigerweise in der URL der Zielseite mitübergeben wird. Lösung zu Aufgabe 4
Die Allgemeinen Geschäftsbedingungen werden auf einer externen Seite abgelegt, die vom Formular aus per Link in einem neuen Fenster aufgerufen werden kann. Per Checkbox kann dann der Benutzer die Allgemeinen Geschäftsbedingungen annehmen. Die Überprüfung, ob der Benutzer die Checkbox durch Ankreuzen akzeptiert hat (und damit die Bestellung ausgeführt werden kann) oder nicht, erfolgt dann mit dem serverseitigen Skript, das ist allerdings nicht mehr mit reinem HTML möglich. Bestellformular Bestellformular ... Ja, ich akzeptiere die AGB. ... Listing 5.25: agb-3.html 187
5 Formulare Beachten Sie, dass es sich hierbei um ein Bestellformular handeln soll und einige Elemente fehlen. Lösung zu Aufgabe 5
Das Element, von dem die Rede ist, ist ein Pull-down-Menü bzw. eine Auswahlliste. Der Grund ist recht einfach: Die Länderliste ist ziemlich lang, die meisten Formulare sind jedoch schon sehr lang, so dass möglichst kein Platz verschwendet werden sollte. Eine Länderliste sieht dann ungefähr folgendermaßen aus: <select name="Land"> Deutschland Österreich Schweiz 118 @import 120 A Absatz 28 – Abstand 266 – ausrichten 28, 133 – einrahmen 263 – formatieren 139 Adressierung – absolut 56 – lokal 56 – relativ 57 Anker 72 Applet 93 B basefont 40 blinken 43 Browser 15 – Geschichte 15 – Internet Explorer 18 – Netscape 6 17 – Netscape Navigator 17 – Opera 20 C Cache-Verhalten 304 Cascading Style Sheets 115 D Dateiinformationen 300 – Copyright 301 – Editor 301
V Video 89 – Ersatztext/-grafik 90 – Internet Explorer 89 – Netscape 89 – Streaming 91 – Windows Media Player 91 vorformatierter Text 34 W W3C 22, 115, 306 W3C-Validator 25
326
Weiterleitung 305 Windows Media Player 91 X XML 22 Z Zeilenumbruch 29 – verhindern 30 Zelle – verbinden 218
