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
23
1 Einführung
1.4
Aufgaben
Aufgabe 1
Schreiben Sie folgendes Dokument XHTML-konform und validieren Sie es auf den Seiten des W3C-Konsortiums. workshop HTML
workshop HTML Listing 1.1: xhtml-konform.html
1.5
Hinweise
Hinweise zu Aufgabe 1
Versuchen Sie zunächst, die Regeln aus dem Kapitel anzuwenden und die offensichtlichsten Fehler zu entfernen. Dann verwenden Sie den Online-Validator, um etwaige restliche Unstimmigkeiten zu identifizieren.
1.6
Lösungen
Lösung zu Aufgabe 1
Das Dokument enthielt eine Reihe von Fehlern: 왘 Kein -Element 왘 fehlte 왘
muss mit
geschlossen werden, nicht mit 왘 muss geschlossen werden: 왘 fehlte
Die korrigierte Version sieht folgendermaßen aus:
24
Lösungen workshop HTML
workshop HTML
Listing 1.2: xhtml-konform-1.html
Und in der Tat, der W3C-Validator findet nichts zum Meckern. Abbildung 1.6: Die korrigierte Version der Seite ist XHTML-konform.
25
2
Textformatierung
HTML bietet eine Menge von Möglichkeiten zur einfachen Formatierung von Texten. Von Überschriften über Zitate und Textfarbe kann alles gestaltet werden. Optimal eingesetzt ist Textformatierung dann, wenn sie die Aussage des Textes verdeutlicht und nicht nur reine Dekoration ist. Falsch eingesetzt kann sie das Gegenteil bewirken und die Verständlichkeit beeinträchtigen.
2.1
Überschriften
Sechs Arten von Überschriften stehen in HTML zur Verfügung. Sie werden durch die Tags
...
bis
...
eingerahmt. Diese Tags bewirken eine Veränderung der Schriftgröße, evtl. auch der Schriftdicke. Sinnvoll eingesetzt machen Überschriften den Text leichter lesbar. Größe und Wichtigkeit der Überschrift sollten hierbei in Relation zueinander stehen. Verschiedene Browser interpretieren die Überschrifttags unterschiedlich. Jedoch bewirkt
...
immer die größte,
...
immer die kleinste Überschrift. Zu beachten ist außerdem, dass der Browser vor und nach der Überschrift automatisch umbricht, d.h. einen neuen Absatz beginnt. Der Abstand vom Fließtext ist hierbei je nach Art der Überschrift unterschiedlich und wird vom Browser automatisch eingestellt. Wenn Sie in die Überschriftzeile eine Grafik oder ähnliches integrieren wollen, müssen Sie das Objekt in die Überschrift-Tags einbinden. Sonst erscheint durch den automatischen Zeilenumbruch das Objekt in der vorhergehenden oder folgenden Zeile. Überschriften
Große Überschrift
Mittlere &Uum;berschrift
Kleine Überschrift
Listing 2.1: ueberschriften.html
27
2 Textformatierung
2.2
Absatz
Abbildung 2.1: Überschriften in verschiedenen Grö ß en.
Um Absätze zu formatieren bietet HTML ein gesondertes Tag. Es besteht aus den Elementen
und
(paragraph). Der von beiden Tags eingeschlossene Text wird als eigenständiger Absatz behandelt. Auch hinsichtlich der Absatzgestaltung stehen mit HTML mehrere Möglichkeiten zur Verfügung. Standardmäß ig wird der Text und auch Grafiken und anderes linksbündig (left) ausgerichtet. Man hat jedoch auch die Möglichkeiten zu einer zentrierten oder rechtsbündigen Anordnung. Hierfür ist das Attribut align notwendig. Der von den
...
-Tags eingeschlossene Absatz kann mit align zentriert wiedergegeben werden (align="center"), rechtsbündig (align="right") oder auch im Blocksatz (align="justify"). Für eine zentrierte Ausrichtung stehen uns auch die Tags
...
zur Verfügung. Da diese jedoch nicht von allen Browsern richtig interpretiert werden, sollte im Zweifel auf das Attribut align zurückgegriffen werden. In Abbildung 2.2 können Sie verschiedene Anwendungsmöglichkeiten sehen. Absatz
Zentrierte Überschrift
28
Zeilenumbruch
Es geht auch rechtsbündig.
Mal wieder ganz normal linksbündig.
Zentriert einmal anders.
Und nun Blocksatz! Hierfür müssen wir einen längeren Text benutzen, sonst kann man nicht sehen, wie Blocksatz wirkt. Beim Blocksatz wird immer die ganze Zeile mit Text ausgefüllt. Es bleibt kein Freiraum am rechten oder linken Rand. Diese Länge dürfte ausreichend sein, um den Effekt zu zeigen.
Listing 2.2: ausrichtung.html Abbildung 2.2: Verschiedene Ausrichtungen von Textabschnitten.
2.3
Zeilenumbruch
Die Betätigung der (ENTER)-Taste im HTML-Code führt zwar zu einem Zeilenumbruch im Code, dieser Zeilenumbruch wird jedoch vom Browser nicht ausgeführt. Damit der Browser vorzeitig und gewollt die Zeile umbricht, z.B. am Ende eines Kapitels, muss das Tag verwendet werden (line break). Bei mehreren -Tags hintereinander bewirkt der erste einen Zeilenumbruch, die folgenden bewirken Leerzeilen.
29
2 Textformatierung Sie können leider nicht generell davon ausgehen, dass Zeilenumbrüche im Code vom Browser unbeachtet bleiben. Ein Beispiel: Wenn Sie zwei Grafiken direkt hintereinander einbauen möchten und im Code einen Zeilenumbruch dazwischen machen, fügt der Browser beim Darstellen automatisch ein Leerzeichen zwischen den beiden Grafiken ein.
2.3.1
Zeilenumbruch verhindern
Unter Umständen möchten Sie verhindern, dass der Browser am Ende des Browserfensters die Zeile automatisch umbricht; er soll sie als durchgehend darstellen. Das zwingt den Benutzer im Zweifel zum horizontalen Scrollen, und sollte deshalb auch so selten wie möglich angewendet werden. Jedoch scheint es für Überschriften oder ähnliches sinnvoll, sie in einer durchgehenden Zeile darzustellen. Sie können dieses automatische Umbrechen mit folgendem Befehl verhindern: <nobr>... (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 Listing 2.5: logisch.html
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.
<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 </head> <body> <p><font size="8">Hier fängt der Text an!</font></p> <basefont size="1" /> <align="right" rel="nofollow"><size="-3">Jetzt wollen wir relativ auszeichnen</size></align> </b> </html> Listing 2.14: fehler.html<br />
<br />
46<br />
<br />
Hinweise Aufgabe 7<br />
<br />
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<br />
<br />
ist, 19 Pixel breit und keinen Schatten hat, 왘 es folgt in einem eigenen rechtsbündigen Absatz ein kurzer Text (Ihrer<br />
<br />
Wahl), der in der Schriftart »Courier New« dargestellt werden soll und falls diese nicht installiert ist, möglichst in »Arial«. Aufgabe 8<br />
<br />
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<br />
<br />
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<br />
<br />
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.<br />
<br />
2.13<br />
<br />
Hinweise<br />
<br />
Hinweise zu Aufgabe 1<br />
<br />
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.<br />
<br />
47<br />
<br />
2 Textformatierung Hinweise zu Aufgabe 2<br />
<br />
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<br />
<br />
Achten Sie darauf, dass der Zeilenumbruch vor und nach der Linie manuell erfolgen muss. Hinweise zu Aufgabe 4<br />
<br />
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<br />
<br />
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<br />
<br />
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<br />
<br />
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<br />
<br />
Erinnern Sie sich daran, dass wir für diktengleiche Schriften das <tt>-Tag verwenden können. Hinweise zu Aufgabe 9<br />
<br />
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<br />
<br />
Benutzen Sie für die Standardeinstellungen das Attribut basefont.<br />
<br />
48<br />
<br />
Lösungen<br />
<br />
2.14<br />
<br />
Lösungen<br />
<br />
Lösung zu Aufgabe 1<br />
<br />
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. <html> <head> <title>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 <body>. 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 <p>- oder im <h1>-Tag, size steht im Normalfall im <font>-Tag. Folglich gibt es auch die schließenden Tags </align> und </size> 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<br />
<br />
51<br />
<br />
2 Textformatierung sieben liegen muss. Der letzte Fehler besteht im schießenden Tag </b>. Im Code wurde kein Tag für fette Schrift geöffnet. Folglich kann er auch nicht geschlossen werden. <html> <head> <title>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!
<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:
Wenn der Browser die Grafik laden kann, bekommt der Nutzer den Alternativtext gar nicht zu sehen (Ausnahme: einige Browser stellen den Alternativtext zur Überbrückung während der Ladezeit dar). Schlägt das Laden jedoch fehl, so wird nun nicht mehr nur ein nichts sagender Platzhalter dargestellt, sondern zudem der alternative Text angezeigt. Schön ist das zwar immer noch nicht, aber wenigstens wird so ein umfassendes Verständnis der Seite gesichert. Abbildung 3.2: Alternativtext
58
Grafiken Der Microsoft Internet Explorer ermöglicht mit dem alt-Attribut einen weiteren Vorteil. Immer dann, wenn der Mauszeiger auf der Grafik liegt, wird der Alternativtext als »Quickinfo« (kleines gelbes Kästchen mit Text) angezeigt, um auch Nutzern, bei denen die Grafik angezeigt wird, den Zugang zum Alternativtext zu ermöglichen.
3.1.3
Das Ausrichten von Grafiken
Wenn wir Grafiken in Text einbauen, so hat das eine besondere Wirkung. Die Grafik wird ohne jeden Zeilenumbruch direkt im Anschluss an die letzten Worte dargestellt (falls Sie sie nicht durch einen Zeilenumbruch oder neuen Absatz trennen). Hierbei wird die Höhe der betreffenden Textzeile auf die Höhe der Grafik ausgedehnt. Das bedeutet, dass der Text, der in derselben Zeile wie die Grafik steht, auf der Höhe ihres unteren Randes dargestellt wird. Hierdurch ergibt sich unter Umständen ein unschöner Abstand zum darüber stehenden Text (siehe Abbildung 3.3). Wie man solche Effekte umgehen kann, wollen wir Ihnen in diesem Teilkapitel zeigen. Abbildung 3.3: Grafiken ohne Zeilenumbruch einbauen.
Um das Bild in einem neuen, eigenen Absatz oder zumindest einer neuen Zeile darzustellen, müssen Sie auf
...
oder zurückgreifen. Gewöhnlich bewirken beide Attribute, wenn Sie vor und nach dem -Tag eingebaut werden, dass neben der Grafik kein Text steht. In Bezug auf ist jedoch Vorsicht geboten, wenn Sie zusätzlich mit dem Attribut align arbeiten. Dieses Attribut wollen wir im nun folgenden Absatz genauer vorstellen.
59
3 Grafiken, Links, Listen und Multimedia Wenn Sie Ihre Grafik gezielt am linken oder rechten Seitenrand platzieren möchten, steht ihnen das Attribut align zur Verfügung, mit den Werten left und right. Für zentrierte Ausrichtung müssen Sie auf eine kompliziertere Variante zurückgreifen. Die beiden Tags
...
müssen das -Tag einrahmen. Diese Vorgehensweise kennen Sie wahrscheinlich schon aus Kapitel zwei über grundlegende Formatierungen. Vergleichen Sie die beiden Varianten:
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
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.
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. LinkfarbenHomepage! 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. 왘
value="Zahl">: 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. ListenMal sehen was das für eine Liste wird!
Butter
Zucker
Milch
Kondensmilch
H-Milch
Mehl
Vollkorn
Weißmehl
Backpulver
Listing 3.14: liste2.html
82
Listen Abbildung 3.15: Sortierte Liste (mit integrierter unsortierter Liste).
3.4.4
Definitionslisten
Zusätzlich zu gewöhnlichen Listen bietet HTML die Möglichkeit besonders formatierte Definitionslisten zu verwenden, die die Abgrenzung zwischen dem zu definierenden Begriff und der Definition hervorheben. Die Syntax ist ähnlich wie bei normalen Listen. Betrachten Sie zum Vergleich folgendes Beispiel: Listen
disc
rundes, gefülltes Symbol
square
gefülltes, quadratisches Symbol
circle
ungefülltes, rundes Symbol
Listing 3.15: def-liste.html
83
3 Grafiken, Links, Listen und Multimedia Abbildung 3.16: Definitionsliste
3.4.5
Grafische Aufzählungszeichen
Aus dem gestalterischen Gesichtspunkt ist es oft notwendig nicht nur Kreise oder Quadrate als Aufzählungszeichen zur Verfügung zu haben, sondern eventuell auch Sternchen, Rauten und anderes. Mit den Standardsymbolen können Sie das leider nicht erreichen, aber Sie haben die Möglichkeit eigene kleine Grafiken als Symbole zu benutzen. Prinzipiell entspricht der Aufbau dem einer normalen Liste. Jedoch sind zwei Dinge zu beachten. Zum einen fügen viele Browser keinen Leerraum zwischen Grafik und Text ein, so dass das Aufzählungszeichen an den Text gequetscht wirkt, wenn Sie nicht manuell Leerzeichen einfügen. Zum anderen müssen Sie den Zeilenumbruch am Ende eines Listenpunktes ebenfalls von Hand erzeugen, da der Browser sonst alles in eine Zeile schreibt. Durch die grafischen Aufzählungszeichen können die
-Tags entfallen. Wenn Sie beispielsweise eine Grafik mit dem Namen stern.gif verwenden, sieht der Code folgendermaßen aus: Listen
84
Multimediaobjekte 13 Uhr: Mittagessen
Suppe
Hauptgang
Nachspeise
14 Uhr: Mittagschlaf 15 Uhr: Kaffee und Kuchen Listing 3.16: graf-liste.html Abbildung 3.17: Liste mit grafischen Aufzählungssymbolen.
Sie sollten bei grafischen Aufzählungszeichen unbedingt darauf achten, den Rahmen um die Grafik abzuschalten, da die Symbole mit Rahmen einfach nicht gut zur Geltung kommen.
3.5
Multimediaobjekte
Wir wollen im Folgenden das Einbinden von verschiedenen Multimediaobjekten in HTML-Dokumente behandeln. Beachten Sie bitte, dass Ihr Browser die verschiedenen Objekte nur dann anzeigen kann, wenn Sie die hierfür nötigen Plugins installiert haben.
85
3 Grafiken, Links, Listen und Multimedia
3.5.1
Objekte
Eine relativ neue Möglichkeit des Einbindens von Objekten in HTML-Dokumente bieten die -Tags. Von der Grafik bis zum 3-DObjekt kann auf diese Art mit dem Microsoft Internet Explorer ab Version 4 und dem Netscape Navigator ab Version 6 fast alles eingebunden werden. Betrachten wir einmal die dazu benötigte Befehlszeile:
Das Attribut data ist obligatorisch und dient der Angabe des Dateinamens bzw. der relativen oder absoluten Pfadangabe. Viele Browser benötigen zusätzlich das Attribut type, um die Datei öffnen zu können. Dem Attribut type wird als Wert der Inhaltstyp der jeweiligen Datei zugewiesen. In unserem Fall handelt es sich um ein »image«, also eine Bilddatei, vom Typ jpeg. Mit Hilfe des type-Attributs fällt es dem Browser leichter, die richtige Hilfsanwendung zu starten, mit der das Multimediaobjekt angezeigt oder abgespielt werden kann. Die Typangabe (auch MIME-Typ genannt) setzt sich zusammen aus der Art des Objekts und dem Format. So funktioniert das Einbinden von HTML-Text mit type="text/html", AIFF-Sound-Dateien werden mit type="audio/x-aiff" definiert und für ein Quicktime-Video benutzen Sie type="video/quicktime", um nur einige Beispiele zu nennen. Nähere Informationen zu MIME-Typen bietet Ihnen Ihr Browser. In Bezug auf viele weitere Attribute verhält sich das
 auftreten. Manche Browser können sonst nicht auf die Datei zugreifen. Sie sollten sich von Anfang an daran gewöhnen, ein » ä« im gewünschten Dateinamen durch »ae« zu ersetzen, usw. So vermeiden Sie Probleme von vornherein.<br />
<br />
3.1.2<br />
<br />
Grafikersatz<br />
<br />
Heute unterstützen die meisten Browser das Anzeigen von Grafiken, jedoch schalten einige Benutzer die automatische Grafikanzeige ab, damit Webseiten möglichst schnell geladen werden (z.B. beim Surfen über Handys oder andere Kleingeräte). Das führt dazu, dass Sie anstelle der Grafiken lediglich einen Platzhalter finden. Um das Verständnis der restlichen Seite dadurch nicht zu beeinträchtigen, haben Sie die Möglichkeit jenen Nutzern Ihrer Seite, bei denen die Grafik nicht angezeigt wird, durch einen alternativen Text, Inhalt und Funktion der Grafik zu erläutern. Hierfür dient das Attribut alt, das in das <img>-Tag eingefügt wird. Ihm wird der alternative Text zugewiesen. Den Inhalt des Textes können Sie frei bestimmen. Beispiel: <img src=)
![](“hund.jpg")
Das ist unser Hund!
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?
Zimmerpflanzen für Sie 
Listing 3.10: querverweis.html
<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
13 Uhr: Mittagessen