HTML steht für HyperText Markup Language (Hypertext-Auszeichnungssprache) und ist bekanntlich die Muttersprache aller Webseiten. Bevor wir uns mit dynamischem HTML, CSS, Scripting und serverseitigen Technologien auseinandersetzen, sollten wir uns daher auf die Wurzeln all dieser wunderbaren, fortgeschrittenen Techniken besinnen. Da HTML im Grund eigentlich ganz einfach ist (und vielen Lesern wohl auch schon bekannt sein wird), werden wir uns mit diesem Grundkurs nicht allzu lange aufhalten. Wir werden die Konzepte und Ideen hinter HTML herausarbeiten, die wichtigsten HTML-Elemente in angemessener Breite vorstellen (so dass Sie dieses und das nachfolgende Kapitel auch zum Nachschlagen verwenden können) und - wo sinnvoll - ein wenig tiefer in die Praxis des Webdesigns mit reinem HTML abtauchen. Für alte HTML-Hasen also nicht viel Neues, für Anfänger aber eine ganze Menge Stoff.
Ich hoffe, Sie sitzen noch an Ihrem Schreibtisch und nicht bereits im Bett, mit einem Glas warmer Milch als Nachtrunk neben sich und diesem Buch als Abendlektüre auf den Knien. Alle Leser, die mit dem Begriff »Markup« oder »Auszeichnung« nichts Richtiges anfangen können, obwohl Sie es schon tausendmal gehört haben, möchten wir jetzt nämlich bitten, einen Stift und einen Schreibblock zur Hand zu nehmen, und folgenden Text aufzusetzen (siehe Abbildung 2.1).
Abbildung 2.1: Zu formatierender Text
Stellen Sie sich vor, dieser Text soll Aufnahme in eine Broschüre über »Traditionelle chinesische Malerei« finden und Sie müssen den Text morgen beim Setzer abliefern. In der Broschüre soll die Überschrift durch eine fette, größere Schrift hervorgehoben und vom nachfolgenden Text etwas abgesetzt werden. Zudem soll die Textpassage »drei Freunde im Winter« kursiv abgedruckt werden. Wie teilen Sie dies dem Setzer mit?
Ganz einfach! Sie vermerken die Formatierungsbefehle auf dem Blatt (siehe Abbildung 2.2).
Abbildung 2.2: Text mit Formatierungsanweisungen
Die Vermerke zur Formatierung des Textes sind die Markups oder Auszeichnungen, mit denen wir uns in diesem Abschnitt beschäftigen wollen.
Stellen Sie sich jetzt vor, Sie wollten den Text als Webseite im Internet veröffentlichen. Abgesehen davon, dass Sie den Text nun am Computer aufsetzen müssen, stellt sich die Frage, in welcher Form Sie nun die Markups eingeben sollen? Eine Frage, die direkt zu einer anderen Frage führt: Wer ist unser Setzer?
Das Setzen der Webseiten übernehmen die Webbrowser. Voraussetzung ist allerdings, dass der Webbrowser die Formatierungsanweisungen, die Markups, versteht. Dies gilt für den Webbrowser eines deutschen Besuchers ebenso wie für den Browser eines Chinesen, für den Browser eines Linux-Anwenders ebenso wie für den Browser eines Mac-Fans, für den Netscape-Browser ebenso wie für den Internet Explorer, Lynx oder Mosaic. Es dürfte klar sein, dass wir hier mit irgendwelchen frei formulierten Markups nicht mehr weiter kommen. Was wir brauchen, ist ein übergreifender Standard, der einen Satz fester Markups und Regeln zu deren Verwendung definiert. Dieser Standard ist HTML.
Eigentlich, so muss man mit einem lachendem und einem weinenden Auge feststellen, eigentlich ist HTML zur Gestaltung von anspruchsvollen Webseiten absolut ungeeignet. Wir dürfen dies HTML jedoch nicht anlasten, schließlich war es nie dazu gedacht gewesen, die Ansprüche ambitionierter Internet-Fans und absatzorientierter Firmen zu erfüllen.
Als Tim Berners-Lee 1989 am CERN-Institut in Genf, dem Europäischen Institut für Teilchenphysik, einen Vorschlag zur Veröffentlichung von Hypertext-Dokumenten über das Internet unterbreitete, ahnte er sicherlich nicht, welche enorme Popularität und Verbreitung sein Projekt finden würde. Ihm ging es vor allem darum, einen Weg zu finden, wie man wissenschaftliche Dokumente und Informationen Plattform unabhängig, schnell und bequem über das Internet austauschen konnte. Dazu gehörte auch, dass sich die Forscher, die Ihre Dokumente und Daten im Internet veröffentlichen wollten, sich nicht unnötig mit komplizierten Formatierungsbefehlen herumplagen mussten. Zusammen mit Anders Berglund, der ihm bei der Ausarbeitung der ersten HTML- Spezifikation zur Seite stand, löste Berners-Lee dieses Problem, indem er nur wenige physikalische Formatierungsanweisungen (wie Fettschrift oder Kursivschrift) aufnahm, dafür aber Markups zur Kennzeichnung typischer Dokumentelemente wie Überschriften, Listen oder Hyperlinks einführte. Letztere beruhen auf der Idee, dass man die genaue Formatierung von Überschriften, Listen, Links, etc. getrost ganz dem Webbrowser überlassen kann. Der Webautor muss durch die Markups also nur noch anzeigen, welche Textstellen als Überschriften oder Listen formatiert werden sollen (denn dies kann ein Webbrowser nicht selbst entscheiden).
So kommt es, dass man mit Hilfe der HTML-Markups oder Tags, wie sie auch genannt werden, einen elektronisch erfassten Text schnell für die Anzeige in einem Webbrowser formatieren kann.
Um beispielsweise in unserem Kiefer-Beispiel dafür zu sorgen, dass die erste Zeile als Überschrift formatiert wird, braucht man den Text lediglich in die HTML-Tags <h1> und </h1> einzuschließen:
<h1>Die Kiefer in der chinesischen Malerei </h1>
Wie der Text dann aber letztendlich von den verschiedenen Browser dargestellt wird, in welcher Schriftart, welcher Größe und Farbe, darauf hat man selbst keinen Einfluss mehr. (Man kann aber davon ausgehen, dass der Text in großer, fetter Schrift und mit größerem Zeilenabstand angezeigt wird.)
Die Trennung von logischer Auszeichnung im HTML-Text und Formatierung durch den Webbrowser dient aber nicht nur der Bequemlichkeit, sie löst auch das Problem der Plattformunabhängigkeit (das Anfang der Neunziger von weit größerer Bedeutung war als heute). Als Webautor wissen Sie nichts über die Soft- und Hardware-Ausstattung der Internet-Teilnehmer, die Ihre Seiten ansteuern und lesen wollen. Arbeitet er mit einem textbasierten Betriebssystem oder verwendet er schon einen Windowing-Manager, verfügt er über einen 640x480-Bildschirm oder schafft seine Grafikkarte bereits Auflösungen von 1024x768 und höher, hat er einen Schwarzweiß- oder einen Farbmonitor, wie viele Farben schafft sein Display, welche Schriftarten sind auf seinem Rechner installiert, stehen TrueType-Schriften zur Verfügung? Explizite Formatierungsanweisungen, wie zum Beispiel die genaue Vorgabe einer zu verwendenden Schriftart, -farbe und -größe führen nur allzu schnell dazu, dass die Formatierung gänzlich verloren geht, wenn die gewünschten Formatierungen auf dem System des Webbrowser nicht unterstützt werden (die Schriftart nicht vorhanden ist, Farben nicht angezeigt werden können). Logische Auszeichnungen wie <h1> können dagegen von allen Browsern verarbeitet und entsprechend ihrer Möglichkeiten umgesetzt werden. Die Überschrift ist dann vielleicht nicht ganz so perfekt, dafür aber auf jeden Fall als solche zu erkennen.
Es gibt noch einen Punkt, in dem die Erfinder von HTML den Webbrowsern freie Hand ließen: der Festlegung der Zeilenumbrüche. Wenn Sie mit einem Textverarbeitungsprogramm wie Word einen Text zum Ausdrucken auf eine DIN-A4-Seite aufsetzen, richten Sie Word so ein, dass es alle Zeilen nach ungefähr 13 cm umbricht (so dass die Zeilen in etwa die Breite der DIN-A4-Seite (abzüglich Rand) ausfüllen, aber nicht über den Seitenrand hinausgehen). Sie können dies tun, weil Sie wissen, wie breit eine DIN-A4-Seite ist. Webseiten werden jedoch nicht ausgedruckt, sie werden in einem Webbrowser angezeigt. Die Breite des Browserfensters hängt aber davon ab, wie der Anwender das Browserfenster einstellt und welche Bildschirmauflösung er verwendet. Aus diesem Grunde überlässt es HTML den Webbrowsern, Fließtexte entsprechend der aktuellen Breite des Browserfensters umzubrechen.1
Heute ist die Plattform unabhängige Formulierung des HTML-Codes nicht mehr von der gleichen Bedeutung wie früher. Zum einem kann man davon ausgehen, das heute fast alle Websurfer über Rechner mit Windowing-System und grafischem Browser, über Bildschirmauflösungen von 800x600 oder höher, 16-Bit-Farbauflösungen und einer größeren Auswahl an Standardschriften verfügen. Zum anderen haben Design und Erscheinungsbild der Webseiten gegenüber dem Inhalt immer mehr an Bedeutung gewonnen. Neu hinzugekommene HTML-Techniken, allen voran die Verwendung von Stylesheets (siehe Kapitel 3), lassen dem Webdesigner wesentlich mehr Gestaltungsfreiheit und räumen ihm größeren Einfluss über das endgültige Erscheinungsbild seiner Webseiten ein.
In HTML werden Markups in Form von »Tags« direkt in den zu formatierenden Text eingefügt.
<body>
<h1>
<p>
...
HTML unterscheidet traditionell nicht zwischen Groß- und Kleinschreibung. Das Body-Tag, das den eigentlichen Seiteninhalt kennzeichnet, könnte man also sowohl als <body> wie auch als <Body> oder <BODY> schreiben. Der Browser wird es auf jeden Fall erkennen und richtig interpretieren. Andererseits erleben wir derzeit die Verschmelzung von HTML und XML. So existiert bereits seit Januar 2000 neben dem aktuellen HTML-4-Standard ein erster XHTML-Standard (XHTML steht für »eXtensible HTML«), in dem der aktuelle HTML-Standard in XML-konformer Weise redefiniert ist. Da XML zwischen Groß- und Kleinschreibung unterscheidet, sind gemäß XHTML 1.0 alle Tags (und Attribute) klein zu schreiben. Auch wenn Sie derzeit nicht daran interessiert sind, aus der Verschmelzung von XML und HTML Nutzen zu ziehen (siehe Kapitel 21), schadet es nichts, sich eine strikte Kleinschreibung anzugewöhnen.
Aus Sicht von HTML besteht eine Webseite aus einer Abfolge von nacheinander aufgeführten, gegebenenfalls verschachtelten HTML-Elementen. Mit Ausnahme einiger weniger HTML-Elemente, die wir bei der Besprechung des HTML-Grundgerüstes kennen lernen werden, korrespondieren diese HTML-Elemente zu den verschiedenen Elementen der darzustellenden Seite (Absätze, Listen, spezielle formatierte Textpassagen, Bilder, etc.).
<h1>Die Kiefer in der chinesischen Malerei</h1>
<hr />
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em>, den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>
Obiger Quelltextauszug enthält beispielsweise vier HTML-Elemente
Jedes Element beginnt mit einem Tag, das anzeigt, um was für ein Element es sich handelt, und dem Browser Hinweise auf dessen Formatierung gibt. Manche HTML- Elemente sind leer - wie zum Beispiel <hr />, das eine horizontale Linie repräsentiert. Die meisten HTML-Elemente haben jedoch einen Inhalt. In diesem Fall besteht das Element aus dem Start-Tag, dem nachfolgenden Inhalt und dem abschließenden Ende-Tag, das durch den Querstrich im Tag-Namen gekennzeichnet ist:
<h1>Die Kiefer in der chinesischen Malerei</h1>
Gemäß HTML-Spezifikation kann man leere Elemente wie <hr /> auch als <hr> oder <hr></hr> schreiben. Wir möchten Ihnen aber empfehlen, die Schreibweise <hr /> zu verwenden (Achtung: Nicht das Leerzeichen vor dem / vergessen!), da diese nicht nur zu HTML, sondern auch zu XHTML (siehe Kapitel 21) kompatibel ist. Aus den gleichen Gründen sollten Sie darauf achten, dass Sie alle nicht-leeren Elemente mit einem Ende-Tag abschließen.
In den meisten Tags können zusätzliche Optionen als Attribute angegeben werden. Grundsätzlich sieht die Syntax für alle Tags in HTML wie folgt aus:
<tag attribut1="wert1" attribut2="wert2" ... > </tag>
<tag attribut1="wert1" attribut2="wert2" ... />
<img width="200" height="500" src="bild.tif" />
Damit wird das Bild aus der Datei bild.tif in die Webseite eingefügt. In der Webseite wird für das Bild ein Bereich von 200 mal 500 Pixeln reserviert.
Und noch ein Hinweis zur XHTML-Kompatibilität: Die meisten Browser können Attribut-Werte auch ohne Anführungszeichen erkennen. Wer jedoch XHTML-kompatibel bleiben möchte, darf auf die Anführungszeichen nicht verzichten.
Zeilenumbrüche, Tabulatoren und mehrere aufeinanderfolgende Leerzeichen, die Sie in den HTML-Code Ihrer Webseiten einfügen, sind für das Erscheinungsbild der Webseite im Browser nicht maßgeblich.
Für uns als Webautoren bedeutet dies, dass wir den HTML-Code der Webseiten durch Einfügen von Umbrüchen und mehrfachen Leerzeichen gestalten...
<html>
<head>
<title>Die Kiefer</title>
</head>
<body>
<h1>Die Kiefer in der chinesischen Malerei </h1>
<hr />
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>
</body>
</html>
...oder durch Weglassen von Umbrüchen und mehrfachen Leerzeichen komprimieren können (um etwas Speicherplatz zu sparen, in diesem Beispiel in etwa 30 Byte, oder um Nachahmern das Leben zu erschweren):
<html><head><title>Die Kiefer</title></head><body><h1>Die Kiefer in der chinesischen Malerei </h1><hr /><p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p></body></html>
Mit Hilfe der Zeichenfolgen <!-- und --> kann man Kommentare in den HTML-Code einfügen. Kommentare werden grundsätzlich vom Browser ignoriert, das heißt, der Text eines Kommentars wird nicht angezeigt.
<h1>Die Kiefer in der chinesischen Malerei</h1>
<!-- erstellt am 03.11.98 -->
<!-- Der nachfolgende Text basiert auf einem Artikel aus dem
"Lexikon der chinesischen Symbole" von Wolfram Eberhard -->
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit ...
Sie haben nun schon eine ganze Menge über HTML erfahren. Warum legen wir nun nicht einfach los und schauen uns an, wie man einen Text in eine Webseite verwandelt - zumal es doch so einfach ist?
Nehmen wir den folgenden Text:
Die Kiefer in der chinesischen Malerei
In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt...
Um diesen Text in eine Webseite zu verwandeln, brauchen Sie ihn nur in einen geeigneten ASCII-Editor einzutippen und als Datei mit der Extension .html abzuspeichern. Beachten Sie, dass dieser Text keinen HTML-Code enthält. Trotzdem wird ihn der Browser mit hoher Wahrscheinlichkeit anzeigen. In einem weiteren Schritt könnten wir den Text mit HTML-Tags formatieren: die Überschrift in <h3>-Tags und den nachfolgenden Absatz in <p>-Tags einschließen.
<h3>Die Kiefer in der chinesischen Malerei</h3>
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt...</p>
Auch diese »Webseite« wird der Browser anzeigen, vermutlich sogar unter Berücksichtigung der von uns vorgegebenen Formatanweisungen. Dies liegt aber keineswegs daran, dass wir hier gültigen HTML-Code erzeugt hätten. Vielmehr ist es so, dass die meisten Webbrowser dermaßen fehlertolerant sind, dass sie selbst arg verstümmelten HTML-Code auszuwerten und den Dokumentinhalt anzuzeigen versuchen.
Natürlich darf man sich beim Aufsetzen der Webseiten nicht auf die Fehlertoleranz der Webbrowser verlassen. Vielmehr sollte man stets bemüht sein, korrekten HTML-Code aufzusetzen (möglichst nach der neuesten HTML-Spezifikation). Dazu gehört auch, dass jede Webseite über ein HTML-Grundgerüst verfügt. Büffeln wir also noch ein wenig Theorie und Formalismen, bevor wir im nächsten Abschnitt endgültig zum kreativen Teil übergehen.
Das Grundgerüst eines HTML-Dokuments besteht aus drei Teilen:
und - eingefasst in <html>-Tags -
Listing 2.1: Das HTML-Grundgerüst
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das HTML-Grundgerüst</title>
</head>
<body>
<p>Hallo vom Browser!</p>
</body>
</html>
Die Aufteilung in Dokumentinformationen und anzuzeigenden Inhalt ist für elektronische Dokumente ganz typisch und weiter verbreitet als es den Anschein hat. Legen Sie doch einmal mit Ihrem bevorzugten Textverarbeitungssystem (Word oder StarWriter) ein neues, leeres Dokument an und speichern Sie es ab. Auf meinem System belegt ein leeres Word-Dokument immerhin 19 KByte. Nicht schlecht, wenn man bedenkt, dass die ersten PCs überhaupt nur 64 KByte Arbeitsspeicher hatten. Der Grund ist, dass Word in den doc-Dateien ebenfalls eine ganze Reihe von Metainformationen zu dem Dokument abspeichert (vornehmlich Informationen über die verwendeten Formatvorlagen). Wenn Sie das Dokument in Word laden, sehen Sie davon aber nichts, weil Word Ihnen nur den eigentlichen Inhalt anzeigt. Analog zeigen Webbrowser nur den Inhalt zwischen den <body>-Tags an.
An der Versionsinformation kann der Browser ablesen, gemäß welcher HTML- Spezifikation die vorliegende Webseite erstellt wurde. Der URL http://www.w3.org/TR/ html4/strict.dtd weist zu einer Dokumententypdeklaration-Datei, hier strict.dtd, in der beschrieben ist, welche HTML-Elemente wie verwendet werden dürfen. Derzeit gibt es drei Dokumententypdeklaration-Dateien:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Derzeit macht es kaum einen Unterschied, ob Sie Versionsinformationen angeben oder nicht. Die meisten Browser gehen, selbst wenn Sie die Versionsinformationen und die DTD-Datei auswerten, mit fehlerhaftem HTML-Code mehr als tolerant um - ein Verhalten, das noch aus der Zeit stammt, da es keine DTDs und damit keine festen Regeln für den Aufbau von HTML-Dokumenten gab. Im Hinblick auf die zukünftige Entwicklung sollte man jedoch stets Versionsinformationen und DTD-Datei angeben.
Soweit nicht explizit anders angegeben, entsprechen die HTML-Beispiele in diesem Buch alle der HTML 4.01/strict.dtd-Spezifikation.
Noch fortschrittlicher ist es, sich den XHTML-Regeln zu unterwerfen (siehe Kapitel 21).
Im Header können Sie allgemeine Informationen über die aktuelle Webseite unterbringen: Informationen über den Autor der Webseite, Copyright-Informationen, Informationen für Suchmaschinen und -roboter, etc. Die HTML-Spezifikation stellt uns dazu das <meta>-Tag zur Verfügung, mit dem wir uns in Kapitel 6 näher beschäftigen werden.
Welche <meta>-Elemente Sie in den Header einer Webseite aufnehmen, bleibt ganz Ihnen überlassen. Das zweite HTML-Element, das innerhalb des Headers verwendet werden kann, ist dagegen obligatorisch: es ist das <title>-Element, mit dem Sie einen Titel für Ihre Webseite angeben. Die meisten Browser zeigen den Titel in der Titelleiste Ihres Fensters an.
<head>
<title>Dies ist der Titel der Webseite</title>
<meta name="Author" content="Louis, Wenz">
</head>
Ebenfalls in den Header gehört das <base>-Tag, das wir Ihnen im Kapitel 6 näher vorstellen werden.
Die <body>-Tags umschließen den wichtigsten Teil Ihres HTML-Dokuments: den anzuzeigenden Inhalt. Alle nachfolgend beschriebenen HTML-Elemente, mit denen wir Text, Bilder, Hyperlinks u.a.m. in unsere Webseite aufnehmen und formatieren, stehen also innerhalb der <body>-Tags.
Damit wissen wir jetzt auch, wie aus dem HTML-Fragment vom Beginn dieses Abschnitts ein echtes HTML-Dokument wird:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Die Kiefer</title>
</head>
<body>
<h1>Die Kiefer in der chinesischen Malerei </h1>
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>
</body>
</html>
Für die Aufbereitung des Textes im Body-Bereich stehen eine Vielzahl von Tags zur Verfügung, die in diesem und den nachfolgenden Abschnitten beschrieben werden.
Zur Hervorhebung von Überschriften stellt uns HTML sechs Tags zur Verfügung: <h1> bis <h6> (h steht hierbei für heading = Überschrift). Die sechs Überschriftenformate unterscheiden sich in Größe und Fettdruck der verwendeten Schrift.
HTML-Überschriften sind grundsätzlich nicht nummeriert. Seit der CSS2-Spezifikation gibt es aber die Möglichkeit, die Überschriften bei Bedarf mit Hilfe von Stylesheets automatisch durchnummerieren zu lassen (allerdings wird diese Technik derzeit noch kaum von den Browsern unterstützt).
Klassische Inhaltsverzeichnisse sind für Webseiten eher ungewöhnlich. Trotzdem spricht nichts dagegen, größeren Texten ein Inhaltsverzeichnis voranzustellen. Da in einem solchen Inhaltsverzeichnis üblicherweise die ersten zwei oder drei Überschriftsebenen aufgelistet werden, stellt sich die Frage, ob man ein solches Inhaltsverzeichnis nicht aus den HTML-Überschriften automatisch generieren lassen kann? Nun, mit HTML allein geht dies nicht, vielleicht kann es aber Ihr Webeditor (FrontPage 2000 enthält beispielsweise eine Funktion, die für ein Web ein Inhaltsverzeichnis erstellt, in dem die einzelnen Seiten des Webs als Verzeichniseinträge aufgelistet werden). Falls nicht, müssen Sie notgedrungen selbst Hand anlegen. Was dabei grundsätzlich zu beachten ist, erfahren Sie in Abschnitt 2.6.4.
Fließtexte werden traditionell in Absätze aufgeteilt. Absätze lockern das Seitenbild auf (nichts ist furchtbarer als Buchseiten, die aus einem einzigen Block von Wörtern und Buchstaben bestehen) und erleichtern das Lesen (insbesondere, wenn die Aufteilung in Absätze die Gedankensprünge im Inhalt widerspiegelt).
Absätze beginnen grundsätzlich am Anfang einer neuen Zeile, bestehen aus einer oder mehreren Zeilen Fließtext, die automatisch am Seitenrand umgebrochen werden, und enden mit einem expliziten Zeilenumbruch. Zudem ist der Abstand zwischen Absätzen meist etwas größer als der Zeilenabstand innerhalb der Absätze.
In den meisten Textverarbeitungssystemen drückt man zum Abschluss eines Absatzes die (Return)-Taste. Zur Kennzeichnung von Absätzen im HTML-Code reicht dies aber nicht aus, da die Webbrowser den resultierenden Zeilenumbruch nur als einfachen Leerraum, und nicht als Absatzende interpretieren. Aus diesem Grund müssen in HTML alle Absätze in die Tags <p> und </p> eingefasst werden (p steht für paragraph = Absatz).
<p>Dies ist ein Beispiel für einen Absatz. Eingegebene RETURNs werden ignoriert. Ein Umbruch erfolgt erst dann, wenn der Absatz mit dem Ende-Tag abgeschlossen wird.</p>
Setzen Sie keine Leerzeichen nach einem Start-Tag oder vor einem End-Tag, da diese von den Browsern unter Umständen ignoriert werden.
Wenn Sie einen Zeilenumbruch innerhalb eines Absatzes erzwingen wollen, setzen Sie das <br />-Tag. So wird der folgende HTML-Code
<p> Hier beginnt ein neuer Abschnitt. Ein Zeilenumbruch <br />kann auch mit dem BR-Tag erzwungen werden.</p>
im Browser wie folgt angezeigt:
Hier beginnt ein neuer Abschnitt. Ein Zeilenumbruch
kann auch mit dem BR-Tag erzwungen werden.
Leerzeilen werden ebenfalls mit dem <br />-Tag erzeugt.
Schließlich gibt es noch die Möglichkeit, einen Fließtext mit Hilfe des <pre>-Tags als vorformatiert zu kennzeichnen. Dies weist den Webbrowser an, den eingeschlossenen Text so wiederzugeben, wie er im HTML-Code steht (unter Berücksichtigung aller Leerzeichen, Tabulatoren und (Return)-Zeilenumbrüche).
Um einen oder mehrere ganze Absätze einrücken zu lassen, fasst man Sie in <blockquote>- Tags ein:
<h2>Sonnenkollektoren</h2>
<p>Sonnenkollektoren dienen dazu, die Energie aus der Sonneneinstrahlung in nutzbare Wärmeenergie umzuwandeln. Dass man auf diese Weise kostengünstig zu einem ausgeglichenen Wärmehaushalt kommen kann, beweist das Überleben einer Jahrtausende alter Spezies:
<blockquote><p>Die Haare des Eisbären erscheinen deswegen weiß, weil sie transparente, nicht pigmentierte Fasern darstellen, in denen UV-Licht wirkungsvoll zur Haut geleitet wird. Die Haut des Eisbären ist schwarz und somit bestens geeignet die Strahlungsenergie des UV-Lichtes aufzunehmen. Dass lediglich UV-Licht absorbiert wird, ist verständlich, denn würde der Eisbär versuchen, im sichtbaren Bereich zu absorbieren, müsste er schließlich seine weiße Tarnung opfern. UV-Licht hat aber immerhin den Vorteil, dass es auch bei bedecktem Himmel verfügbar ist und vom Eisbären mit einem Wirkungsgrad von 95% in Wärme umgesetzt werden kann.</p></blockquote>
<p>Sonnenkollektoren sind ganz ähnlich aufgebaut:</p>
Wie dieser Text in einem Webbrowser dargestellt wird, sehen Sie in Abbildung 2.4.
Abbildung 2.4: Einrücken mit <blockquote>
Das <blockquote>-Tag ist insbesondere zum Einrücken von größeren Zitaten gedacht. Stammt das Zitat von einem Webdokument, kann man die Adresse des Dokuments als Wert des cite-Attributs angeben (die aber nicht von allen Browsern angezeigt wird):
<blockquote cite="http://www.fiktiv.com/eisbaer.html"><p>Die Haare ...
Zum Einrücken beliebiger Textblöcken sollte man auf die style-Eigenschaften padding oder margin zurückgreifen (siehe Abschnitt 4.3.2). Dies hat unter anderem den Vorteil, dass man selbst bestimmen kann, wie weit der Absatz eingerückt werden soll.
Zur Auszeichnung von Textpassagen gibt es zwei Kategorien von Formatierungen:
Physikalische Formatierungen schreiben dem Webbrowser explizit vor, wie der Text aussehen soll.
HTML definiert nur wenige Tags zur physikalischen Formatierung. Wer mehr Kontrolle über die Formatierung seiner Webseiten im Browser ausüben will, kann zur Formatierung mit Stylesheets greifen (siehe Abschnitt 2.8 und Kapitel 4).
Logische Schriftauszeichnungen werden dazu verwendet, inhaltlich verwandte Textstellen besonders zu kennzeichnen - beispielsweise Zitate, Definitionen, Listings. Mit der logischen Auszeichnung ist meist auch eine besondere optische Hervorhebung verbunden, die allerdings standardmäßig vom Browser ausgewählt wird.
Das title-Attribut1 des Elements kann zum Angeben des vollständigen Begriffes genutzt werden. <p>Der <abbr title="World Wildlife Fund">WWF</abbr> legt großen ...</p> | |
Das title-Attribut2 des Elements kann zum Angeben des vollständigen Begriffes genutzt werden. | |
Tabelle 2.3: Logische Auszeichnungen
| 12 |
Logische Auszeichnungen haben zwei entscheidende Vorteile:
Nehmen Sie an, Sie setzen einen Text auf, in dem es um den therapeutischen Nutzen verschiedener pharmakologischer Wirkstoffe geht. Deren Namen sollen jeweils durch Kursivschrift, eine etwas größere Schrift und eine andere Textfarbe hervorgehoben werden. (Zugegeben, das ist ein bisschen zuviel des Guten, aber es geht uns ja hier um den didaktischen Effekt.) Sie könnten dies erreichen, indem Sie alle Namen in folgende Tag- Sequenzen einschließen:
<font color="red" size="12"><i>Acetylsäure</i></font>
Alle Namen pharmakologischer Wirkstoffe auf diese Weise zu formatieren, ist recht aufwendig. Wesentlich einfacher ist es, sich eine logische Auszeichnung auszuwählen (sagen wir <var>) und diese zur Kennzeichnung zu verwenden. Jetzt muss man nur noch im Header der HTML-Datei festlegen, welche Formatierungen die Webbrowser für die Auszeichnung <var> verwenden sollen (wie dies geht, erfahren Sie in Kapitel 4). Der springende Punkt hierbei ist, dass die Formatierungsanweisungen nur noch einmal (bei der Festlegung der Formatierung für das Tag) und nicht mehr bei jedem Vorkommen des Tags angegeben werden müssen.
Das <font>-Tag, das wir in diesem Beispiel verwenden, gehört an sich zu den traditionellen, physikalischen HTML-Formatierungen. Aus oben genannten Gründen ist es aber als »deprecated« eingestuft und sollte nicht mehr verwendet werden.
Logische Auszeichnungen haben noch einen weiteren Vorteil: mit ihrer Hilfe kann man Textelemente trotz gleicher Formatierung unterscheiden.
Physikalische Auszeichnungen neigen dazu, Unruhe in das Erscheinungsbild eines Textes zu bringen. Nehmen wir an, Sie wollen im oben angesprochenen Text nicht nur die Namen der pharmakologischer Wirkstoffe, sondern auch die Namen der angesprochenen pharmazeutischen Firmen hervorheben. Um das Schriftbild ruhig zu halten, entscheiden Sie sich in beiden Fällen für eine dezente Hervorhebung: die Kursivschrift. Wenn Sie jetzt sowohl die Namen der Wirkstoffe wie auch der Firmen in <i>-Tags einfassen, haben Sie unter Umständen ein Problem. Stellen Sie sich vor, Sie wollen ein Programm schreiben, dass alle Namen pharmakologischer Wirkstoffe in Ihrem HTML-Text findet. Woran kann ein Programm erkennen, dass es sich bei einem Wort im Text um den Namen eines Wirkstoffes handelt? Nun, es könnte die Namen ganz einfach an den <i>-Tags erkennen, wenn Sie die <i>-Tags nicht auch zur Kennzeichnung der Firmennamen verwendet hätten. Damit liegt die Lösung auf der Hand: Sie suchen sich zwei logische Auszeichnungen, die üblicherweise von den Browsern kursiv formatiert werden - beispielsweise <em> und <var> - und verwenden <em> für die Firmennamen und <var> ausschließlich zur Kennzeichnung der Wirkstoffe. Schon kann das Programm die Wirkstoffe mühelos anhand der <var>-Tags erkennen.
Der Analyse von Dokumenten durch Programme kommt heute eine immer größere Bedeutung zu. Es wäre jedoch vermessen zu behaupten, dass diese Entwicklung auf der konsequenten Verwendung der logischen HTML-Auszeichnungen beruhen würde. Nein, getragen wird diese Entwicklung vor allem von XML. XML ist eine Markup-Language und so etwas wie der große Bruder von HTML. Was XML auszeichnet, ist, dass man in XML eigene Tags definieren und Regeln für den Aufbau der Dokumente festlegen kann. Mehr zu XML erfahren Sie in Kapitel 21.
Wenn Sie im HTML-Text Sonderzeichen verwenden, beispielsweise die deutschen Umlaute, kann es sein, dass diese nicht in allen Browsern korrekt dargestellt werden. Aus diesem Grunde ist es vorzuziehen, diese Umlaute durch die entsprechenden HTML- Codierungen zu ersetzen.
Eine umfangreichere Liste finden Sie in Anhang B. Die komplette Liste entnehmen Sie bitte der HTML-Spezifikation (http://www.w3.org).
Der besseren Lesbarkeit der Listings zuliebe werden wir in den hier abgedruckten Beispielen aber vorwiegend die normalen deutschen Umlaute verwenden.
HTML definiert drei unterschiedliche Arten von Listen:
Aufzählungen sind Listen, in denen die einzelnen Listeneinträge durch vorangestellte Aufzählungszeichen (einem Punkt oder einen Quadrat) gekennzeichnet werden.
Aufzählungen werden verwendet, wenn es darum geht, ungeordnete Informationen, bei denen die Reihenfolge der Präsentation keine oder nur eine untergeordnete Rolle spielt, in übersichtlicher Form anzuzeigen. Einzelne Elemente der Liste können dabei ebenso gut aus einem einzigen Stichwort wie aus mehrzeiligen Absätzen (ja sogar aus mehreren Absätzen) bestehen.
Die gesamte Liste wird zunächst mit dem <ul>-Tag umschlossen (ul = unordered list = ungeordnete Liste).
Jedes einzelne Listenelement muss zusätzlich noch einmal in <li>-Tags eingeschlossen werden (li = list item = Listenelement).
<ul>
<li>Aufzählungen (ungeordnete Listen)</li>
<li>Nummerierungen (geordnete Listen)</li>
<li>Definitionen</li>
</ul>
Nummerierungen werden verwendet, wenn es darum geht, geordnete Informationen zu präsentieren, die in einer bestimmten Abfolge, Rangfolge oder Wertung stehen. Einzelne Elemente der Liste können wie bei den Aufzählungen aus einem einzigen Stichwort oder aus mehrzeiligen Absätzen bestehen. Der Browser nummeriert die Listeneinträge automatisch.
Die gesamte Liste wird zunächst mit dem <ol>-Tag umschlossen (ol = ordered list = geordnete Liste).
Jedes einzelne Listenelement muss zusätzlich noch einmal in <li>-Tags eingeschlossen werden (li = list item = Listenelement).
<h2>Deutsche Bühnen</h2>
<p>Welche Bühnenautoren werden im deutschsprachigen Raum am häufigsten gespielt?
<ol>
<li>William Shakespeare</li>
<li>Johann Wolfgang von Goethe</li>
<li>Berthold Brecht</li>
<li>Molière</li>
<li>Friedrich Schiller</li>
<li>Henrik Ibsen</li>
</ol>
Definitionen bestehen aus zwei Teilen:
Definitionen verwenden keine Listensymbole. Stattdessen steht der zu definierende Begriff linksbündig im Text und die nachfolgende Definition wird eingerückt.
Die gesamte Definitionsliste wird zunächst mit dem <dl>-Tag umschlossen (dl = definition list).
Die zu definierenden Begriffe werden in <dt>-Tags eingeschlossen (dt = definition term = Definitionsbegriff).
Die eingerückten Definitionen werden in <dd>-Tags eingeschlossen (dd = definition description = Definitionsbeschreibung).
<h2>Unser Ensemble stellt sich vor:</h2>
<dl>
<dt>Groucho Marx</dt>
<dd>Unser Dirigent und Manager. </dd>
<dt> </dt>
<dt>Chico Marx</dt>
<dd>Der Pianist.</dd>
<dt> </dt>
<dt>Harpo Marx</dt>
<dd>Souverän an Harfe und Tröte.</dd>
<dt> </dt>
<dt>Zeppo Marx</dt>
<dd>Unser Heldentenor.</dd>
<dt> </dt>
<dd> </dd>
</dl>
Listen können in vielfältiger Weise formatiert und angepasst werden. Die meisten dieser Formatierungen beruhen auf Stylesheets. In Kapitel 4 werden wir uns mit diesen Formatierungsmöglichkeiten noch eingehend beschäftigen. Einige recht einfache Formatierungen möchte ich Ihnen aber jetzt schon vorstellen.
Über die Stylesheet-Eigenschaft list-style-type können Sie zwischen drei Aufzählungssymbolen wählen:
Sie brauchen das Listen-Tag nur um ein style-Attribut zu erweitern und der list-style- type-Eigenschaft den gewünschten Wert zuweisen:
<ul style="list-style-type:square">
<li>Element1</li>
<li>Element2</li>
<li>Element3</li>
</ul>
Für geordnete Listen können Sie zwischen verschiedenen Nummerierungszeichen wählen:
Nach CSS2 sind sogar noch weitere Nummerierungen definiert, beispielsweise hebrew (hebräisch) oder katakana (japanisch).
Listen können auch ineinander verschachtelt werden.
<ul>
<li>Element1
<ul>
<li>Element11</li>
<li>Element12</li>
</ul>
</li>
<li>Element2
<ul>
<li>Element21</li>
<li>Element22</li>
<li>Element23</li>
</ul>
</li>
</ul>
Der Webbrowser sorgt dabei für die Einrückung der inneren Listen. Beachten Sie, dass der Webbrowser keine hierarchische Nummerierung für verschachtelte geordnete Listen erzeugen kann.
Die CSS2-Spezifikation für Stylesheets (siehe Kapitel 4) sieht zwar Techniken vor, wie man hierarchisch durchnummerierte Listen (1, 1.1, 1.1.1, etc.) erzeugen kann, doch werden diese derzeit von keinem Browser unterstützt.
Wenn Sie möchten, dass die untergeordneten Listenebenen vom Leser ein- und ausgeblendet werden können, müssen Sie ein passendes JavaScript-Skript aufsetzen (siehe Kapitel 10.7).
Bilder sind heute aus dem Web gar nicht mehr weg zu denken. Dabei machen die Bilder, die in Form einer Galerie oder eines Internet-Fotoalbums präsentiert werden, noch den geringsten Teil aus. Dafür werden Bilder mehr und mehr beim Webdesign eingesetzt: als Schaltflächen-Links, Aufzählungssymbole, Hintergründe, Rahmen oder auch zur Gestaltung des Webseitenvordergrundes.
Der übliche Weg zur Einbindung einer Grafik führt über das <img>-Tag (img = image = Bild.
<img src="kiefer.tif" alt="Kiefer, chinesische Tuschezeichnung" />
Das Attribut src gibt den URL der Bilddatei an. Üblicherweise gibt man hier einen relativen Pfad an, das heißt einen Pfad, der relativ zum Ursprungsort des Webdokuments angegeben wird (oder relativ zur Basisadresse des Dokuments, falls eine solche im Header- Abschnitt mit Hilfe des <base>-Tags spezifiziert wurde). Wenn obige HTML-Zeile beispielsweise in einem HTML-Dokument steht, das keine spezielle Basisadresse spezifiziert, geht der Browser davon aus, dass die Bilddatei kiefer.tif in dem gleichen Verzeichnis steht wie das HTML-Dokument. Wäre die Bilddatei in einem Unterverzeichnis /images zu finden, würde man als relativen Pfad "images/kiefer.tif" angeben.
Zusätzlich zur Bildquelle sollte man stets einen kurzen, beschreibenden Text angeben (alt-Attribut). Dieser wird von reinen Textbrowsern als Bildersatz angezeigt. Grafische Browser blenden diesen Text ein, wenn der Anwender die Darstellung von Bildern deaktiviert hat oder die Bilddatei unter der angegebenen URL nicht gefunden wurde.
In früheren Versionen war das alt-Attribut nur optional zu benutzen, in HTML 4.0 ist seine Nutzung zwingend vorgeschrieben.
Mit den Attributen width und height kann man festlegen, welchen Raum das Bild auf der Webseite einnehmen soll (Angaben erfolgen standardmäßig in Pixel). Wenn die Abmaße der Bilddatei nicht mit den Angaben zu width und height übereinstimmen, skaliert der Browser das Bild entsprechend.
Beachten Sie, dass eine Skalierung meist zu einer Verschlechterung der Bildqualität führt.
Aber auch wenn Sie das Bild nicht skalieren, empfiehlt es sich, die Bildabmaße anzugeben. Der Browser kann dann beim Seitenaufbau den Platz für das noch zu ladende Bild freihalten (was den Aufbau beschleunigt).
Listing 2.3: kiefer2.html - Einbindung eines Bildes
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Die Kiefer</title>
</head>
<img src="kiefer.tif" alt="Kiefer, chinesische Tuschezeichnung"
width="200" height="300" />
<h1>Die Kiefer in der chinesischen Malerei</h1>
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>
</body>
</html>
Traditionell gibt es in HTML eine Reihe von Attributen, mit denen man steuern kann, wie ein Bild in eine Seite eingefügt werden soll: borders, hspace, vspace, align. Alle diese Attribute sind jedoch mittlerweile »deprecated« und sollten nicht mehr verwendet werden. Macht nichts, es gibt ehedem bessere Möglichkeiten.
Tabellen sind beispielsweise ein bewährtes Mittel, um Bild- und Textelemente mehr oder weniger frei auf einer Webseite zu verteilen.
Noch mehr Möglichkeiten bietet die Formatierung und Positionierung mit Stylesheets. Wie Sie es schon gewohnt sind, werden wir Ihnen an dieser Stelle ein Beispiel zeigen, wie man auf einfache Weise mit Inline-Stilen formatieren kann, und Sie ansonsten auf Kapitel 4 verweisen.
Um die Webseite aus Abbildung 2.7 etwas interessanter zu gestalten, wollen wir den etwas langweiligen Aufbau aus vorangehendem Bild und nachfolgendem Text aufbrechen. Das schmale, hochgestreckte Bild der Kiefer würde sich doch wunderbar als Randbild eigenen. Der Text könnte von oben und links eingerückt werden, so dass er neben dem Stamm der Kiefer erscheint (siehe Abbildung 2.8).
Abbildung 2.8: Freies Design mit style-Attributen
usw.
<body style="background-image: url('kiefer_b.tif')
Wir hätten auch das <img>-Tag verwenden können, aber dann kann man die Stileigenschaften nicht so übersichtlich zusammen in einem Tag spezifizieren.
<body style="background-image: url('kiefer_b.tif');
background-repeat: no-repeat; background-color: white;
<body style="background-image: url('kiefer.tif');
background-repeat: no-repeat; background-color: white;
margin-left: 200; margin-top: 210">
Grundsätzlich sollten Sie, wenn Sie ein Hintergrundbild verwenden, dass den Browserhintergrund nicht ganz ausfüllt, auch die Hintergrundfarbe definieren (so dass sie der Hintergrundfarbe des Hintergrundbildes entspricht). Gehen Sie keinesfalls davon aus, dass der Hintergrund automatisch weiß ist.
Den vollständigen HTML-Code sehen Sie in Listing 2.4. Beachten Sie, dass dieses Design eine gewisse Mindestbreite des Browserfensters voraussetzt. Ist das Fenster zu schmal, wird der Text zu oft umgebrochen und überlappt mit den Blumen und dem Gras. Andererseits ist die Darstellung schon bei einer Fensterbreite von weniger als 800 Pixeln perfekt, und da man davon ausgehen kann, dass die meisten Anwender Bildschirmauflösungen von 800x600 und mehr verwenden, dürfen wir ruhigen Gewissens erwarten, dass der Anwender sein Browserfenster entsprechend einstellt.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Die Kiefer</title>
</head>
<body style="background-image: url('kiefer.tif');
background-repeat: no-repeat; background-color: white;
margin-left: 200; margin-top: 210">
<h1>Die Kiefer in der chinesischen Malerei</h1>
<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> – den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>
</body>
</html>
Bilder für Webseiten zusammenstellen und aufzubereiten, ist eine Kunst für sich. Eine Kunst, die nebenbei auch eine sehr technische Seite besitzt, der wir uns nun zuwenden wollen.
Grafikformate gibt es wie Sand am Meer, doch nicht alle sind für Webseiten geeignet. Welche besonderen Eigenschaften sollte ein Grafikformat für Webbilder haben? Die Antwort liegt auf der Hand: Um die Kapazitäten des Netzwerks und die Nerven der Websurfer zu schonen, sollte ein Grafikformat bei annehmbarer Bildqualität möglichst kleine Dateigrößen liefern. Gleichzeitig sollte das Grafikformat einfach auszuwerten und darzustellen sein, damit es von möglichst allen Browsern unterstützt wird. Unter diesen Gesichtspunkten haben sich drei Grafikformate als Standardformate für Webbilder etabliert.
Zur besseren Übersicht hier noch einmal die wichtigsten Unterscheidungskriterien.
Alle Bilder, aber bevorzugt Bilder geringer Farbtiefe und Größe |
Tabelle 2.5: Grafikformate für Webbilder
Für die Bearbeitung von Bildern gelten andere Regeln als für die Veröffentlichung. Entsprechend werden auch andere Ansprüche an das Grafikformat gestellt. Wichtiger als die Größe der Bilddatei und die Unterstützung von Transparent und Interlacing ist die verlustfreie Speicherung und Bearbeitung. So scheiden JPG und GIF meist von vorneherein aus: JPG erlaubt kein verlustfreies Abspeichern und GIF ist für Bilder mit mehr als 256 Farben ungeeignet. Brauchbar sind dagegen TIFF und PNG.
Als verantwortlicher Webautor sollten Sie Bilddateien nie ins Web stellen, ohne zuvor zu prüfen, ob man nicht die Größe der Bilddateien reduzieren könnte. Dies gilt für die Veröffentlichung von Fotos ebenso wie für Design-Elemente oder Bilder zur Unterstützung dynamischer Webinhalte.
Nehmen wir an, Sie haben eine Fotovorlage, die Sie zur Verwendung auf Ihren Webseiten einscannen und aufbereiten wollen.
Die interessanteste Einstellung ist dabei die Auflösung in dpi (Dots per Inch = Punkte pro Zoll). Je höher die Auflösung, um so mehr Bildpunkte werden pro Zoll eingescannt und um so höher ist die Bildqualität. Für die Anzeige auf dem Computerbildschirm ist die Auflösung aber mehr oder weniger unerheblich, denn der Monitor kann maximal 75 Dots (Pixel) pro Zoll anzeigen. (So schaffen 17 Zoll- Bildschirme nur maximale Auflösungen von 1280 x 1024; 1280 Pixel : 75dpi = 17 Zoll.) Wenn Sie mit einer höheren Auflösung einscannen, wird das Bild auf dem Monitor nicht schärfer, sondern größer. So gesehen sind 75 dpi absolut ausreichend.
Wenn Sie allerdings beabsichtigen, das Bild (oder Teile des Bildes) zu vergrößern, reduziert sich sofort die Bildschärfe, sofern Sie die Vergrößerung nicht bei der Auswahl der dpi-Auflösung eingerechnet haben.
Wenn Sie sich unsicher sind, wählen Sie beim Scannen eine höhere dpi-Auflösung. Heruntersetzen können Sie die Auflösung später immer noch (geschieht in den meisten besseren Grafikprogrammen durch Skalierung oder Veränderung der Bildabmaße).
Achten Sie darauf, dass Sie ein Grafikformat wählen, das verlustfrei abgespeichert wird und das auch von dem Grafikprogramm, in dem Sie das Bild weiterbearbeiten wollen, unterstützt wird.
Jetzt haben Sie Gelegenheit, Schriftzüge einzufügen, zu retuschieren, Farben zu verfremden, Effekte auszuprobieren.
Führen Sie unbedingt alle Bearbeitungsschritte an der Kopie aus, damit Sie notfalls immer zum Original zurückkehren können. (Verlassen Sie sich nicht allzu sehr auf die Rückgängig-Funktion Ihres Grafikprogramms.)
Feste Spielregeln gibt es für die Reduzierung kaum, das heißt, man muss ausprobieren, wie man zu dem bestmöglichen Ergebnis kommt. Zwei Fallbeispiele - für ein Foto und eine Grafik - sollen die grundsätzliche Vorgehensweise verdeutlichen.
Abbildung 2.9: Ausgangsbild und unterschiedlich stark komprimierte JPG-Dateien
Betrachten wir zuerst das Bild Lilly400.tif aus Abbildung 2.9. Es wurde mit einer Auflösung von 400 dpi und einer Farbtiefe von 16,7 Millionen Farben (24 Bit pro Farbe) eingescannt. Eine weitere Bearbeitung ist nicht vorgesehen, also können wir gleich mit der Reduzierung der Bilddateigröße beginnen - was auch dringend notwendig ist, weil das Original fast 16 MByte einnimmt (1889*2856 (Pixel) * 24 (Bit pro Pixel)).
Zuerst einmal ist das Bild so viel zu groß (in Abbildung 2.9 ist das Bild um den Faktor 6 verkleinert). Wir skalieren es unter Beibehaltung des Seitenverhältnisses auf 315*476 herunter und schon ist die Datei nur noch 440 KByte groß.
Da es sich um ein relativ großes Foto mit vielen Farben handelt, entscheide ich mich für JPG als Veröffentlichungsformat. Beim Abspeichern kann ich wählen, wie stark das Bild komprimiert werden soll. Das mittlere Bild in Abbildung 2.9 ist mit einem Faktor 50 (bei Auswahl zwischen 1 und 99) gespeichert und belegt danach noch 26 KByte. Die Bildqualität ist noch sehr gut. Das Bild ganz rechts wurde mit dem maximalen Faktor von 90 erzeugt. Es belegt zwar nur noch 4 KByte auf der Festplatte, ist aber auch von nicht akzeptabler Qualität.
Abbildung 2.10: Reduzierung einer Grafik
Unser nächstes Bild ist eine ClipArt-Grafik mit einem Tiger-Kopf, die ursprünglich 72 KByte belegt. Der Tigerkopf soll in eine Webseite eingebaut werden, allerdings ohne den roten (sorry, die Farbe ist beim Abdruck im Buch verloren gegangen) Hintergrund. Stattdessen soll der aktuelle Hintergrund der Webseite durchscheinen.
Da wir eine transparente Farbe festlegen wollen, scheidet das JPG-Format von vornherein aus. Es würde bei der geringen Farbtiefe und der mäßigen Bildgröße vermutlich eh keine bessere Reduzierung bringen als GIF oder PNG. Doch zuerst passen wir die Bildgröße an.
Die rote Farbe um den Tiger-Kopf soll später transparent sein. Das bedeutet, das man den roten Hintergrund des Tiger-Kopfes nicht sehen wird. Also können wir den Hintergrund auf ein Minimum reduzieren. Die resultierende TIFF-Datei ist in Abbildung 2.10 nicht zu sehen, hat aber die gleichen Abmaße wie BigTiger_16a.tif und belegt nur noch 34 KByte.
Der nächste Schritt besteht darin, die Farbtiefe zu verringern. Die ursprüngliche Datei verwendet eine 256-Farbenpalette. Mit Paint Shop Pro können wir die Palette auf 16 Farben reduzieren, wobei uns Paint Shop Pro verschiedene Algorithmen zur Auswahl der 16 Farben zur Verfügung stellt. Der erste ausgewählte Algorithmus stellt das Rotbraun des Tigerkopfes und das Rot des Rachens nicht mehr schön dar (in der Schwarzweißdarstellung von Abbildung 2.10 sind diese Bereiche heller geworden). Im zweiten Anlauf, BigTiger_16b.tif, wählen wir einen Bereich aus (siehe Markierungsrahmen), dessen Farben bei der Reduzierung auf 16 Farben verstärkt gewichtet werden sollen. Dies liefert uns ein akzeptables Ergebnis.
Die fertige Datei speichern wir als non-interlaced-GIF-Datei ab (wegen der geringen Dateigröße können wir auf das Interlacing verzichten).
Zu guter Letzt legen wir noch die transparente Farbe fest. Wir lassen uns dazu die Farbpalette des Bildes anzeigen und notieren uns den Index der roten Hintergrundfarbe (die natürlich nicht für andere Teile des Bildes verwendet werden darf). Beim neuerlichen Speichern geben wir den Index der roten Farbe als Index der transparenten Farbe an. Die endgültige Datei belegt nur noch etwas mehr als 6 KByte.
Die Reduzierung der Farbtiefe vermindert die Dateigröße nicht nur dadurch, das eine kleinere Palette1 abgespeichert werden muss. Hinzukommt, dass die meisten Komprimierungsverfahren um so effektiver arbeiten, je weniger Farben es im Bild gibt. Es lohnt sich also auch, die Palette von Hand zu überarbeiten und zu schauen, ob man auf einzelne Farben verzichten kann.
Als verantwortlich denkender Webautor sollten Sie nicht nur die Größe der Bilddatei, sondern auch die Größe des unkomprimierten Bildes im Arbeitsspeicher Ihrer Webbesucher im Auge behalten. Nehmen wir zum Beispiel das Foto aus Abbildung 2.9. Durch die JPG-Komprimierung konnten wir die Bilddatei von 440 KByte auf 26 KByte herunterdrücken. Trotz der stark komprimierten Bilddatei ist das eigentliche Bild aber immer noch 315*476 Pixel groß. Wird es auf dem Bildschirm eines Websurfers angezeigt, belegt jeder dieser Pixel im Speicher 24 oder 32 Bit (je nach eingestellter Farbtiefe auf dem Client-Computer).3
Noch gravierender wird der Unterschied, wenn Sie große Hintergrundbilder mit wenigen Farben verwenden. Diese lassen sich durchaus schon einmal auf Dateigrößen von unter 5 KByte reduzieren, belegen aber im Arbeitsspeicher des Anwenders dann über 1 MByte.
Hyperlinks ermöglichen es dem Besucher einer Webseite, per Mausklick zu einer anderen Stelle der Webseite, zu einer anderen Webseite des gleichen Webs oder zu einer ganz anderen Website zu springen. Diese weltweite Vernetzung von Webseiten hat wesentlich zum Erfolg des World Wide Webs beigetragen.
Innerhalb des <body>-Tags haben wir es mit zwei Arten von Links zu tun:
Links der letzten Kategorie werden mit dem <a>-Tag eingefügt:
<a href="http://www.sun.com/index.html">die SUN-Website</a>
Ein solcher Link besteht aus drei Teilen:
In eine Webseite könnte ein solcher Hyperlink beispielsweise wie folgt eingebaut werden:
<p>Besuchen Sie doch mal <a HREF="http://www.sun.com/index.html">die SUN-Website</a> und informieren Sie sich über die neuesten Produkte!</p>
Um einen Hyperlink zu einer Seite eines anderen Webs zu definieren, geben Sie den vollständigen URL der Webseite an.
<a href="http://www.server.com/verzeichnis/">Text des Hyperlinks</a>
Wenn Sie einen Hyperlink zu einer anderen Website anbieten und der Besucher Ihrer Website diesen Hyperlink anklickt, verlässt er damit Ihre Website und in seinem Browser erscheint stattdessen die Webseite der anderen Site. Zwar kann der Websurfer jederzeit über den Zurück-Schalter seines Browser wieder in Ihr Web eintreten, doch für den Moment ist Ihre Webseite weg.
So etwas kann recht ärgerlich sein. Beispielsweise dann, wenn der Websurfer gerne die Inhalte der Seiten parallel lesen würde oder schnell wieder zurück auf Ihre Seite springen möchte. Wenn Sie also einen externen Hyperlink auf eine Webseite anbieten, auf der der Websurfer Zusatzinformationen zu dem Text Ihrer Webseite finden kann, und Sie davon ausgehen können, dass der Websurfer nach dem Leser dieser Webseite auf jeden Fall wieder zu Ihrer Webseite zurückkehren möchte, vereinfachen Sie ihm doch die Navigation, indem Sie den Hyperlink so einrichten, dass die angesteuerte Webseite in einem eigenen Browser-Fenster angezeigt wird. Sie müssen dazu nur im Ankerelement das target-Attribut verwenden und auf _blank setzen (siehe auch Kapitel 3.2.4).
<a href="http://www.server.com/verzeichnis/" target="_blank">Text des Hyperlinks</A>
Verwendet die Zielwebsite einen anderen Zeichensatz, können Sie potentiellen Problemen vorbeugen, indem Sie den Webbrowser auf den zu verwendenden Zeichensatz hinweisen:
<A href="http://www.w3.org/" charset="ISO-8859-1">W3C-Website</A>
Links zu anderen Webseiten der eigenen Website sollten grundsätzlich als relative Hyperlinks angegeben werden. Als Basis dient dabei die Adresse, die im Header-Bereich des Webdokuments mit Hilfe des <base>-Tags spezifiziert wurde oder - falls das <base>- Element nicht verwendet wurde - die URL-Adresse des aktuellen Dokuments.
Schauen wir uns hierzu ein paar Beispiele an.
<!doctype ...
<html>
<head>
<title>Demo</title>
<base href="http://www.server.com/verz/">
</head>
<body>
<p>Hier <a href="seite.html">klicken</a>
</p>
</body>
</html>
Der resultierende Link lautet:
http://www.server.com/verz/seite.html
<base href="http://www.server.com/verz/">
...
<a href="./Unterverzeichnis/seite.html"></a>
Der resultierende Link lautet:
http://www.server.com/verz/unterverzeichnis/seite.html
<base href="http://www.server.com/verz/">
...
<a href="../verzeichnis2/seite.html"></a>
Der resultierende Link lautet:
http://www.server.com/verzeichnis2/seite.html
<!doctype ...
<html>
<head>
<title>Demo</title>
<!-- keine Basisadresse -->
</head>
<body>
<p>Hier <a href="./produkte/seite.html">klicken</a>
</p>
</body>
</html>Die angesteuerte Webseite steht in dem Unterverzeichnis »Produkte« des Verzeichnisses, in dem das aktuelle Dokument steht.
Wenn Sie auf einer Webseite einen Link zu einer anderen Textstelle der gleichen Webseite erstellen wollen, müssen Sie an der betreffenden Textstelle zuerst einen Zielanker setzen.
Dazu klammern Sie die anzusteuernde Textstelle in ein Ankerelement, das Sie mit einem Namen versehen:
<h2><a name="Zielmarke1">Abschnittsüberschrift</a></h2>
...
Wenn die anzusteuernde Textstelle bereits mit einem HTML-Tag beginnt, können Sie dieses zu einem Anker ausbauen, indem Sie es mit Hilfe des id-Attributs kennzeichnen.
<h2 id="Zielmarke1">Abschnittsüberschrift</h2>
...
Auf einer Webseite sollte es keine zwei HTML-Elemente mit gleichen name- oder id-Bezeichnern geben. Dagegen macht es durchaus Sinn, in einem Ankerelement sowohl name- als auch id-Attribut mit gleichen Bezeichnern anzugeben: <a name="Zielmarke1" id="Zielmarke1">. Der Grund hierfür ist, dass in XHTML (siehe Kapitel 21) das id-Attribut favorisiert wird, dass man derzeit aber aus Rücksicht auf ältere und aktuelle Webbrowser auch das name-Attribut noch angeben sollte.
Jetzt können Sie von überall auf diese Textstelle verweisen
<a href="#Zielmarke1">Zu Abschnitt 1</a>
<a href="andereSeite.html#Zielmarke1">Zu Abschnitt 1 von ...</a>
Hyperlinks zu Textstellen kann man beispielsweise zum Aufbau von Inhaltsverzeichnissen nutzen.
Größere Dokumente, wie zum Beispiel die HTML-Spezifikation, die im World Wide Web veröffentlicht werden, werden üblicherweise auch mit einem Inhaltsverzeichnis ausgestattet. Dass die einzelnen Einträge im Inhaltsverzeichnis dabei mit Hyperlinks zu den betreffenden Textabschnitten versehen werden, gehört zum guten Ton.
Ein HTML-Inhaltsverzeichnis zu diesem Kapitel könnte beispielsweise wie folgt aussehen:
Listing 2.5: Auszug aus inhaltsverzeichnis.html
<h2>Inhaltsverzeichnis</h2>
<ol style="list-style-type: none">
<li><a href="#Abschnitt1"> 1 HTML-Grundkurs</a></li>
<ol style="list-style-type: none">
<li><a href="#Abschnitt1.2">1.2 Das HTML-Grundgerüst</a></li>
<li><a href="#Abschnitt1.3">1.3 Text und Überschriften</a></li>
<li><a href="#Abschnitt1.4">1.4 Listen</a></li>
<li><a href="#Abschnitt1.5">1.5 Bilder</a></li>
<li><a href="#Abschnitt1.6">1.6 Hyperlinks </a></li>
<li><a href="#Abschnitt1.7">1.7 Sonstige Tags </a></li>
<li><a href="#Abschnitt1.8">1.8 Inline-Stile, Farben, Schriften und
Seitenhintergrund</a></li>
</ol>
</ol>
<h2><a name="Abschnitt1">1 HTML-Grundkurs</a></h2>
<p> Text ...</p>
<h3><a name="Abschnitt1.2">1.2 Das HTML-Grundgerüst</a></h3>
<p> Text ...</p>
...
Wenn Sie größere Dokumente ins Internet stellen, sollten Sie sich überlegen, ob Sie das Dokument nicht auch zum Herunterladen anbieten: in dem Sie entweder das gesamte Dokument in eine einzige HTML-Datei packen oder eine ZIP-Datei mit den einzelnen HTML-Seiten zum Download anbieten. Falls Sie dies tun, achten Sie bitte darauf, dass Sie für Querverweise innerhalb des Dokuments nur relative URLs verwenden und keine Basisadresse angeben. So ist sichergestellt, dass der Leser den Links auch nach dem Herunterladen nachgehen kann.
Hyperlinks können nicht nur andere Webseiten ansteuern. Wenn Sie wollen, können Sie auch zu einem anderen Protokoll wechseln.
Verweis auf eine Datei mit Hilfe des File-Transfer-Protokolls | |
Tabelle 2.7: Hyperlinks und Protokolle
Bisher haben wir nur Hyperlinks definiert, die von Textstellen ausgingen (d.h., die auf der Webseite als unterstrichener Text dargestellt werden). Es besteht aber auch die Möglichkeit, Grafiken als Hyperlinks einzurichten.
Dazu fassen Sie das <img>-Tag des Bildes einfach in ein Ankerelement ein:
<a href="andereseite.html"><img border="0"
src="meinbild.tif" /></a>
Die Kombination Grafik/Hyperlink wird häufig zum Aufbau von Navigationsleisten genutzt (siehe Abschnitt 2.6.8). Außerdem wird dieses Verfahren eingesetzt, um Bilder- oder Fotogalerien ins Netz zu bringen. Dazu werden für die einzelnen Bilder herunterskalierte Kopien angelegt (etwa 50x70 Pixel), die übersichtlich auf einer Seite präsentiert werden. Die kleinen Bilder, die man auch Thumbnails nennt, werden in Hyperlinks eingebunden, über die der Betrachter auf Wunsch ein Bild in Originalgröße aufrufen kann.
Im einfachsten Fall ist immer genau eine Grafik mit einem Hyperlink verbunden. Es ist aber auch möglich, eine Grafik mit mehreren Hyperlinks zu verbinden. Doch wie geht das?
Natürlich funktioniert es nicht, wenn man einfach mehrere Hyperlink-Anker um eine Grafik legt und dann hofft, dass sich der Browser schon den richtigen Link aussuchen wird, wenn der Leser der Website auf die Grafik klickt.
Der Trick ist, einzelne Teilbereiche für die Grafik zu definieren und diese mit je einem Link zu verbinden. Dies geschieht mit Hilfe des <map>-Tags.4
Abbildung 2.11: Erstellung einer ImageMap in einem Webeditor
Schauen Sie sich jetzt bitte einmal Abbildung 2.11 an. In dieser Abbildung sehen Sie die Grafik und die Teilbereiche, für die wir eine ImageMap erstellen wollen.
<img alt="Planeten" border="0" src="planeten.jpg"
width="640" height="480" />
<map name="meineMap">
</map>
<map name="meineMap">
<area href="s1.html" shape="circle"
coords="193, 312, 125" />
<area href="s2.html" shape="polygon"
coords="260, 202, 280, 173, 324, 158, 369, 176, 394, 226,
¬375, 274, 346, 290, 321, 287, 299, 232, 300, 232" />
</map>
Alle Koordinaten beziehen sich auf den Ursprung (0,0-Koordinate) des Bildes. Dieser liegt in der linken, oberen Ecke des Bildes.
Geben Sie die Koordinaten in einer Zeile direkt hintereinander an (keine Umbrüche im HTML-Code).
<img alt="Planeten" border="0" src="planeten.jpg"
width="640" height="480" usemap="meineMap" />
Das größte Problem bei der Erzeugung von ImageMaps ist die Angabe der Koordinaten für die anklickbaren Bereiche. Die meisten Webdesigner greifen daher zur Erstellung von ImageMaps auf spezielle Programme zurück, in denen man die Teilbereiche mit der Maus einzeichnen kann und die die fertige ImageMap zurückliefern (siehe Abbildung 2.11). Für einfache ImageMaps kann man die Koordinaten auch schon mal von Hand eingeben, das Ergebnis im Webbrowser kontrollieren und gegebenenfalls nachbessern. Schließlich kann man sich behelfen, indem man die Grafik in ein beliebiges, pixelorientiertes Grafikprogramm lädt (beispielsweise Paint Shop Pro) und sich von dem Grafikprogramm die Koordinaten der Eckpunkte anzeigen lässt.
Die ImageMap, die wir im vorigen Abschnitt erstellt haben, bezeichnet man auch als clientseitige ImageMap, weil die Verarbeitung der Mausklicks auf der Grafik vollständig vom Webbrowser (also auf der Clientseite) übernommen wird. Die clientseitige Verarbeitung ist schnell und hat den Vorzug, dass sie nicht den Webserver belastet. Manchmal möchte man jedoch mehr Kontrolle darüber haben, wie Mausklicks in die Grafik verarbeitet werden. In einem solchen Fall erzeugt man eine serverseitige ImageMap, die von einem speziellen Programm auf dem Webserver verarbeitet wird.
Um den Browser darauf hinzuweisen, dass ein Bild mit einer serverseitigen ImageMap verbunden ist, setzt man das Boolesche Attribut ismap.
<img alt="Planeten" border="0" src="planeten.jpg"
width="640" height="480" ismap="ismap" />
Boolesche Attribute setzt man, indem man das Attribut einfach im Tag aufführt (ismap) oder ihm seinen Namen als Wert zuweist (ismap="ismap"). Wer seine HTML-Seiten XHTML-konform gestalten möchte, muss die vollständige Form verwenden (wobei zu beachten ist, dass ältere Browser, die noch nicht den HTML 4.0-Standard unterstützen, das Attribut dann unter Umständen nicht erkennen)
Im nächsten Schritt wird das <img>-Tag in ein Ankerelement eingeschlossen, dessen href- Attribut auf das CGI-Programm verweist, das zur Bearbeitung der Mausklicks aufgerufen werden soll:
<a href="http://www.server.com/cgi-bin/map1">
<img alt="Planeten" border="0" src="planeten.jpg"
width="640" height="480" ismap="ismap">
</a>
Klickt der Anwender in die Grafik, ermittelt der Browser das verarbeitende Programm und ruft dieses auf. Dabei hängt er die Koordinaten des Mausklicks an den URL des Programmaufrufs an, beispielsweise
http://www.server.com/cgi-bin/map1?150,270
Wie man CGI-Programme implementiert, erfahren Sie in Kapitel 17.
Das wohl wichtigste Einsatzgebiet für grafische Hyperlinks ist die Erstellung von Navigationselementen, mit denen man die einzelnen Seiten oder Bereiche des aktuellen Webs ansteuern kann. Schauen wir uns dazu drei Beispielseiten aus dem World Wide Web an.
Abbildung 2.12: Frei verteilte grafische Hyperlinks
Die Geister und der Kürbiskopf auf dieser Seite sind mit Hyperlinks verbunden. Das Layout dieser Seite beruht übrigens auf verschachtelten Tabellen (siehe Abbildung 2.13).
Abbildung 2.13: Tabellenlayout
Die folgende Navigationsleiste dürfte den meisten Leser von der Yahoo-Webseite bekannt sein (siehe Abbildung 2.14).
Abbildung 2.14: Navigationsleiste
Diese Navigationsleiste besteht aus einer einzigen Grafik und einer zugeordneten ImageMap:
<map name=t>
<area shape=rect coords=0,0,52,52 href="http://de.yahoo.com/r/ac">
<area shape=rect coords=53,0,121,52 href="http://de.yahoo.com/r/be">
<area shape=rect coords=122,0,191,52 href="http://de.yahoo.com/r/bc">
<area shape=rect coords=441,0,510,52 href="http://de.yahoo.com/r/me">
<area shape=rect coords=511,0,579,52 href="http://de.yahoo.com/r/bd">
<area shape=rect coords=580,0,637,52 href="http://de.yahoo.com/r/fb">
</map>
<img height=60 alt="Yahoo! Deutschland" hspace=0
src="Yahoo! Deutschland-Dateien/m5.tif"
width=638 useMap=#t border=0>
Die Yahoo-Seite ist schon etwas älter, daher sieht man keine Anführungszeichen um die Attribute.
Ein ganz typisches Navigationselement ist auch die Auflistung von Hyperlinks zu den einzelnen (Haupt-)Seiten des Webs am linken Rand jeder Webseite. Im einfachsten Falle handelt es sich dabei um simple Text-Hyperlinks. In anspruchsvolleren, grafischen Webseiten werden grafische Hyperlinks verwendet, die sich behutsam in das Gesamtdesign der Webseite einfügen.
Abbildung 2.15: Webseite mit Navigationsschaltflächen am linken Rand
Die »Schaltflächen« aus Abbildung 2.15 bestehen aus kleinen rechteckigen Grafiken (von denen ich eine in der Abbildung weiß eingerahmt habe), die in ein Ankerelement eingefasst und auf diese Weise mit einem Hyperlink verbunden sind.
Das Hauptproblem bei der Generierung solcher Navigationselemente liegt nicht in der Technik (diese ist, wie sie in den vorangehenden Abschnitten gesehen haben, gar nicht so komplex), sondern in der Erzeugung der Grafiken. Hierfür verwendet man am besten spezielle Grafikprogramme, mit denen man Bilder glätten und zerteilen kann.
Was für HTML-Tags gibt es sonst noch? Greifen wir in die HTML-Fundgrube und schauen wir, was zutage tritt.
Eine beliebte Form der Gliederung für HTML-Dokumente ist die Abgrenzung von Textpassagen durch horizontale Linien mit dem <hr />-Tag.
Unter »echten« Webdesignern ist der Gebrauch dieses Tags allerdings verpönt.
Mit dem HTML-Tag <div> können Sie mehrere HTML-Tags auf Blockebene zusammenfassen.
<div>
<h2>Überschrift in <div>-Tags </h2>
<p>Erster Absatz in <div>-Tags.</p>
<p>Zweiter Absatz in <div>-Tags.</p>
<p>Letzter Absatz in <div>-Tags.</p>
</div>
Das Pendant dazu ist das <span>-Tag, mit dem Sie eine Textpassage innerhalb eines Blocks definieren können.
<p>Text Text Text... <span>Dieser Satz ist in <span>-Tags eingefasst. </span>Dieser Satz nicht mehr.</p>
Worin liegt der Vorteil dieser HTML-Tags?
Mit ihrer Hilfe kann man beliebig große Textpassagen und Seitenabschnitte in HTML- Tags zusammenfassen, ohne dass damit eine Standardformatierung von Seiten des Webbrowser einhergeht. Dafür kann der Autor diese Abschnitte mit Hilfe von Stylesheets einheitlich formatieren:
<body style="font-family: 'Times Roman'">
<p>Erster Absatz in Body-Abschnitt.</p>
<div style="font-family: 'Comic Sans MS'">
<h2>Umschalten auf Comic Sans MS</h2>
<p>Erster Absatz in <div>-Tags.</p>
<p>Zweiter Absatz in <div>-Tags.</p>
<p>Letzter Absatz in <div>-Tags. <span style="font-family:
Arial">Dieser Satz ist in <span>-Tags eingefasst.
</span>Dieser Satz nicht mehr.</p>
</div>
<p>Letzter Absatz in Body-Abschnitt.</p>
</body>
HTML kennt zwei spezielle Tags zur Darstellung von Zitaten.
<blockquote> dient zum Kennzeichnen von Zitaten, die aus einem oder mehreren Blöcken bestehen. Der in den <blockquote>-Tags eingeschlossene Text wird vom Browser eingerückt (siehe Abbildung 2.4).
<blockquote><p>Die Haare ...</p></blockquote>
Will man lediglich eine Textpassage aus einem Absatz als Zitat kennzeichnen, kann man die logische Auszeichnung <cite> (siehe Abschnitt 2.3.4) oder das Tag <q> verwenden.
<p>Roman sagte zu mir: <q lang="en-us">Was machst du die Augen zu? Sieh doch, er schafft es, der Verrückte!.</q></p>5
Laut HTML-Standard sollen die Webbrowser, den in dem <q>-Tag stehenden Text in Anführungszeichen klammern. Durch die Angabe der gewünschten Sprache (lang- Attribut) kann der Webautor vorgeben, welche Art von Anführungszeichen (», », etc.) verwendet werden sollen. Unserer Erfahrung nach wird dies derzeit aber noch von keinem Browser unterstützt.
Stammt das Zitat von einem Webdokument, kann man sowohl für <blockquote> als auch für <q> die Adresse des Dokuments als Wert des cite-Attributs angeben (die aber von den meisten Browsern nicht angezeigt wird):
<blockquote cite="http://www.fiktiv.com/eisbaer.html"><p>Die Haare ...
Auf einige HTML-Tags werden wir weder hier noch am morgigen Tag eingehen. Wenn Sie sich für eines dieser Tags interessieren, schlagen Sie es in der Original-HTML- Spezifikation (http://www.w3.org) nach.
Zur Kennzeichnung von Text, der gegenüber einer früheren Version des Webdokuments gelöscht wurde. | |
Zur Kennzeichnung von Text, der in einer früheren Version des Webdokuments noch nicht vorhanden war. | |
Sie haben nun mittlerweile fast alle wichtigen HTML-Elemente kennen gelernt. Sie wissen jetzt, wie die HTML-Elemente aufgebaut sind, wie man sie kombiniert, wie man sie sinnvoll einsetzt. Wenig haben Sie dagegen über die Formatierung der HTML-Elemente gehört. Dies wollen wir nun nachholen.
Grundsätzlich ist zwischen der althergebrachten Formatierung mit HTML-Attributen und der Formatierung mit Stylesheets zu unterscheiden. Anhand des <body>-Tags wollen wir uns den Unterschied verdeutlichen.
Wie Sie wissen, umschließt das <body>-Tag den eigentlichen Inhalt der Webseite. Dies macht das <body>-Tag für den Webdesigner besonders interessant: über das <body>-Start- Tag kann er Formatierungen angeben, die für die gesamte Webseite gelten.
Traditionell waren dafür die Attribute background (Hintergrundbild), bgcolor (Hintergrundfarbe), text (Textfarbe), link (Farbe für Hyperlinks), vlink (Farbe für bereits besuchte Hyperlinks) und alink (Farbe für aktivierte Hyperlinks) vorgesehen.
<body background="hintergrund.tif" text="black"
link="red" alink="fuchsia" vlink="maroon">
...
</body>
Prinzipiell kann man diese Attribute auch heute noch verwenden, doch wird in der HTML 4-Spezifikation von ihrem Gebrauch abgeraten. Sie sind als »deprecated« eingestuft, was bedeutet, dass sie in zukünftigen Versionen des Standards womöglich nicht mehr berücksichtigt und in ferner, ferner Zukunft wohl auch nicht mehr von den Browsern unterstützt werden.
Denken Sie daran, dass Sie im <DOCTYPE>-Element die Dokumententypdeklaration loose.dtd angeben, wenn Sie deprecated-Elemente verwenden.
In Anhang C finden Sie eine Liste aller - auch der »deprecated« - HTML-Tags und -Attribute.
Als Ersatz für die traditionelle Formatierung mit den deprecated HTML-Tags und - Attributen unterstützt HTML die Verwendung von Stylesheets.
Stylesheets stellen eine ausgesprochen leistungsfähige und umfangreiche Technologie dar, mit der wir uns in Kapitel 4 noch in aller Ruhe und Ausführlichkeit beschäftigen werden. Eine besonders einfache Form der Formatierung mit Stylesheets, die Verwendung von Inline-Stilen, sollen Sie aber jetzt schon kennen lernen.
Von Inline-Stilen sprechen wir, wenn wir das style-Attribut verwenden, um ein HTML- Element zu formatieren.
Der Wert des style-Attributs besteht aus einer Liste von Eigenschaft:Wert-Paaren, die voneinander durch Semikolons getrennt werden.
<body style="color: red; font-size:12>
Die wichtigsten dieser Eigenschaften sind in Tabelle 2.8 aufgelistet.
Tabelle 2.8: Auswahl einiger allgemin gültiger Stylesheet-Eigenschaften
Die Syntax des style-Attributs und die Auswahl der Eigenschaften wird nicht von HTML, sondern durch die Stylesheet-Spezifikationen vorgegeben. HTML kann nämlich grundsätzlich mit jeder beliebigen Stylesheet-Sprache zusammenarbeiten. Die Frage ist nur, ob der Browser die Stylesheet-Informationen versteht und umsetzen kann.
Derzeit gibt es im Grunde nur eine standardisierte Stylesheet-Spezifikationen, die weltweit anerkannt und von allen aktuellen Webbrowsern unterstützt wird: die »Cascading Style Sheet«-Spezifikation, kurz CSS. Folglich ist in HTML 4.0 auch festgelegt, dass die Webbrowser grundsätzlich davon ausgehen sollen, dass im HTML-Code verwendete Stylesheets der CSS-Spezifikation folgen. Trotzdem sollte man im HTML-Dokument stets angeben, welcher Spezifikation die verwendeten Stylesheets folgen. Dazu fügt man im Header-Abschnitt der Webseite ein <meta>-Element für die Meta-Eigenschaft Content- Style-Type ein und gilt als Wert für das content-Attribut das Kürzel der Stylesheet- Spezifikation an: text/css für CSS-Stylesheets.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine Webseite</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
Wenn in diesem Buch von Stylesheets die Rede ist, dann sind immer CSS-Stylesheets gemeint.
Zum Schluss möchte ich noch einmal betonen, dass das style-Attribut nicht auf das <body>-Tag beschränkt ist, sondern auf praktisch alle HTML-Tags angewendet werden kann, die innerhalb der <body>-Tags stehen (mit Ausnahme von <param>).
Nehmen wir zum Beispiel die Stileigenschaft background-color. Wenn Sie diese Eigenschaft im <body>-Tag auf red setzen, wird der Seitenhintergrund rot eingefärbt.
Wenn Sie die Eigenschaft in einem <p>-Tag auf white setzen, erhält dieser Absatz einen weißen Hintergrund (siehe Abbildung 2.17).
<body style="background-color: yellow">
<p> Nehmen wir....</p>
<p style="background-color: white">Wenn Sie...</p>
</body>
Allerdings gelten nicht alle Eigenschaften für alle HTML-Tags. Beispielsweise gibt es spezielle Stileigenschaften, die nur für Listen (list-style-type, list-style-image, list- style-position) oder Tabellen (table-layout, caption-side, border-collapse, empty- cells, etc.) gelten.
Andere Stileigenschaften machen nur für Blockelemente Sinn (wie <p>, <div>, <h1> bis <h6> etc.). Ein Beispiel hierfür wäre die Eigenschaft text-align mit der man die Ausrichtung eines Blockelements (linksbündig, rechtsbündig, zentriert, Blocksatz) festlegen kann. Für eine Textpassage innerhalb eines Textblocks würde diese Auszeichnung selbstverständlich keinen Sinn machen.
Einen vollständigen Überblick über die Stylesheet-Eigenschaften, ihre Werte und zugeordneten Tags finden Sie in der Datei propidx.html, die Sie sich zusammen mit der CSS2-Spezifikation von http://www.w3.org herunterladen können.
Über die Stileigenschaften color und background-color können Sie die Vordergrundfarbe (Textfarbe) und Hintergrundfarbe von HTML-Elementen setzen.
Die Farben werden dabei als RGB-Farben angegeben.
Die Kodierung in Rot-, Grün- und Blauanteile bezeichnet man auch als RGB-Kodierung.
Die RGB-Kodierung beruht auf dem Effekt, dass man durch Variation der Farbintensitäten für die drei Lichtfarben Rot, Grün und Blau sämtliche Farben mischen kann. Werden beispielsweise rotes, grünes und blaues Licht in voller Intensität ausgestrahlt, erhält man Weiß. Ist die Intensität aller drei Farben gleich Null (d.h., es wir kein Licht ausgestrahlt), erhält man Schwarz.
RGB-Farben werden als Kombination aus Rot-, Grün- und Blauanteil angegeben. Die Farbe Rot wäre also eine RGB-Farbe mit vollem Rotanteil ohne Grün- oder Blauanteile. In einer Stildefinition werden die einzelnen Anteile hintereinander (in der Reihenfolge Rot, Grün, Blau) als Prozentwerte (0% bis 100%), als Dezimalwerte (0 bis 255) oder als Hexadezimalwerte (0 bis ff) angegeben:
color: #ff0000
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)
Für die gängigsten Farben (genauer gesagt, die 16 Farben aus der Windows-VGA-Palette) gibt es zudem Schlüsselwörter:
Zwischen Schriften und Webdesigner besteht seit jeher eine Art Hassliebe. Auf der einen Seite schätzen Designer den gezielten Einsatz von Schriften und verbringen oft Stunden und Tage damit, die für eine Webseite ideale Schrift zu finden (notfalls werden sie die Schrift selbst entwerfen), andererseits stehen Sie vor dem Problem, dass die von Ihnen ausgewählten Schriften in den Browsern Ihrer Webbesucher nicht angezeigt werden, wenn die Schriften nicht zufällig auf deren Rechner installiert sind.
Wie soll man diesem Problem entgegen treten?
Wenn Sie für ein HTML-Element eine eigene Schriftart verwenden wollen, setzen Sie die Stileigenschaft font-family.
<p style="font-family: 'Times Roman'">
Schriftnamen, die aus mehreren Wörtern bestehen, sollte man dabei in Anführungszeichen setzen (einfache Anführungszeichen, da die doppelten bereits für den Stilwert verwendet werden).
Je ausgefallener die Schrift ist, um so mehr Websurfer wird es geben, auf deren Systemen die betreffende Schrift nicht installiert ist. In diesem Fall übergeht der Browser die von Ihnen vorgegebene Schrift und wählt entweder die Schrift des umliegenden HTML- Elements oder seine eigene Standardschrift. Auf diese Weise kann der Eindruck oder die Lesbarkeit einer Webseite empfindlich gestört werden.
Stellen Sie sich vor, Sie setzen in einer Webseite folgenden Satz auf:
<p style="font-family: 'Times New Roman"'>Je ausgefallener die Schrift ist,
<span style="font-family: 'Mein Arial'">um so mehr Websurfer wird es
geben</span>, auf deren Systemen die betreffende Schrift nicht
installiert ist.
</p>
Die Schrift »Mein Arial« ist eine besonders ausgefallene Schrift, ähnlich Arial Black, mit der Sie den mittleren Teil des Satzes hervorheben wollen. Auf Systemen, auf denen die Schrift »Mein Arial« nicht installiert ist, wird diese Hervorhebung aber gänzlich verloren gehen, weil der Browser als Notlösung die Schrift des umliegenden HTML-Element (sprich des umliegenden Absatzes) verwendet.
Um zu verhindern, dass das Design einer Webseite gleich ganz zusammenbricht, wenn eine Schrift auf einem Clientsystem nicht vorhanden ist, kann man eine Prioritätenliste von Schriftarten angeben, beispielsweise 'Mein Arial', 'Arial Black', Arial, 'sans- serif'. Die letzte Option sollte keine direkte Schrift, sondern eine allgemeine Schriftfamilie sein. Folgende Schriftfamilien sind in CSS definiert:
Folgende Überarbeitung unsere obigen Beispielsabsatzes stellt sicher, dass der Browser im schlimmst anzunehmenden Fall für den mittleren Satzteil eine Schrift ohne Serifen wählt, die sich immerhin noch von der Serifen-Schrift des umliegenden Absatzes unterscheidet.
<p style="font-family: 'Times New Roman', serif">Je ausgefallener die Schrift ist, <span style="font-family: 'Mein Arial', Arial, sans-serif">um so mehr Websurfer wird es geben</span>, auf deren Systemen die betreffende Schrift nicht installiert ist.</p>
Außer der Schriftart können Sie noch Schriftstil (font-style), Schriftauszeichnung (font-variant), Schriftbreite (font-weight) und Schriftgröße (font-size) angeben.
Hintergrundbilder sind bei Laien wie bei professionellen Webdesigner recht beliebt. Während die Hintergrundbilder von Laien meist gut als solche zu erkennen sind (und leider nur zu oft viel zu aufdringlich sind), verwenden professionelle Webdesigner vorwiegend dezente Hintergründe, die meist gar nicht als solche zu erkennen sind.
Das traditionelle Hintergrundbild ist ein rechteckiges Strukturbild von ca. 70x70 Pixeln. Kommerzielle Webeditoren stellen meist eine mehr oder weniger große Auswahl an solchen Hintergrundmotiven zur Verfügung. Wenn Sie ein solches Hintergrundbild unbedingt verwenden wollen, stellen Sie zumindest sicher, dass sich Schrift und andere Elemente Ihrer Webseite gut gegen den Hintergrund abheben.
Geben Sie den URL zu der Datei des Hintergrundbildes dann im <body>-Tag als Wert für die Stileigenschaft background-image an.
<body style="background-image: url('hintergrund.tif')">
Professionellere Seitenhintergründe erhält man, wenn man ein langes, schmales Bild nur in y-Richtung kacheln läst.
Abbildung 2.20: Bild mit Farbverlauf von Schwarz zu Blau (in Abdruck leider nur Grau)
<body style="background-image: url('blaustreifen.jpg');
background-repeat: repeat-y">
Wenn Sie auf diesen Streifen versetzte Schaltflächen setzen (so dass diese noch ein wenig ins Weiße reichen) und den oberen Teil mit einem Logo oder Banner verzieren, erhalten Sie ein schon recht professionelles Design.
Früher, als es noch keine Unterstützung für Stylesheets gab, konnte man keinen Einfluss auf die Art der Kachelung nehmen, das heißt, die Browser legten das Hintergrundbild stets horizontal und vertikal nebeneinander aus, bis die gesamte Webseite gefüllt war. Um einen Randstreifen wie in Abbildung 2.20 zu erzeugen, darf das Bild aber natürlich nicht in X-Richtung gekachelt werden. Um dies zu verhindern, erzeugte man früher schmale Hintergrundbilder, die so lang waren, dass sie sich über die maximal anzunehmende Größe des Browserfensters erstreckten (1280 Pixel).
Prüfen Sie auch, wenn Sie ein Hintergrundbild verwenden, dass den Browserhintergrund nicht ganz ausfüllt, ob Sie die Hintergrundfarbe anpassen müssen (so dass sie der Hintergrundfarbe des Hintergrundbildes entspricht). Gehen Sie keinesfalls davon aus, dass der Hintergrund automatisch weiß ist.
HTML (Hypertext Markup Language) ist eine Auszeichnungssprache zur Erstellung von elektronischen Dokumenten. Gemäß HTML 4.0 sollte jede HTML-Seite eine Versionsinformation, einen Header-Abschnitt mit Titelangabe und einen Body-Abschnitt mit dem eigentlichen anzuzeigenden Text enthalten.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das HTML-Grundgerüst</title>
</head>
<body>
<p>Hallo vom Browser!</p>
</body>
</html>
Zur Auszeichnung und Strukturierung des Textes definiert der HTML-Standard eine Reihe von sogenannten Tags. Tags, die einen Inhalt haben, schließen diesen in ihrem Start- und End-Tag ein: <p>Dies ist ein Absatz</p>. Leere Tags haben kein End-Tag, dafür sollte man das Start-Tag mit einem Leerzeichen und einem Slash abschließen: <hr / >.
In den meisten Tags können zusätzliche Optionen als Attribute angegeben werden.
<img width="200" height="500" src="bild.tif" />
Der überwiegende Teil der HTML-Tags dient der Auszeichnung spezieller Seitenelemente, beispielsweise:
Diese Tags sind reine Struktur-Tags, das heißt, sie teilen den Webbrowsern mit, aus welchen Elementen eine Webseite aufgebaut ist, geben ansonsten aber keine weiteren Hinweise auf die Formatierung dieser Elemente. Der Webbrowser entscheidet dann, wie er eine Überschrift der 1. Ebene oder eine Variable (<var>) darstellt.
Webdesignern, die mehr Einfluss auf die Darstellung der Seitenelemente im Webbrowser ausüben wollen, stehen zwei unterschiedliche Wege offen:
Besonders hervorzuheben, sind auch die Tags <div> und <span>, mit deren Hilfe man zusammengehörende Blöcke (<div>) oder einzelne Textpassagen in Blöcken (<span>) auszeichnen kann. Mit <div> kann man aufeinanderfolgende Blöcke gemeinsam formatieren, mit <span> kann man eine Textpassage anders formatieren als den umliegenden Block.
Frage:
Kann ich auch eigene Tags definieren?
Antwort:
Nein, nicht in HTML! HTML sieht keine Wege vor, wie Sie eigene Tags
definieren könnten. Tun Sie es doch, haben Sie das Problem, dass die
Webbrowser nicht wissen, wie sie Ihr Tag verarbeiten sollen.
Abhilfe wird hier der Übergang von HTML über XHTML zu XML schaffen. In XML kann man eigene Tags definieren - was im Übrigen nicht nur für Webseiten interessant ist. Wenn Sie mehr über XML und XHTML erfahren möchten, lesen Sie Kapitel 21.
Frage:
Einer meiner Bekannten verwendet auf seiner Webseite eine Laufschrift, die er mit dem
Tag <marquee> erzeugt hat. Kann ich dieses Tag auch verwenden?
Antwort:
Das <marquee>-Tag ist ein proprietäres Tag, das nur vom Internet Explorer
unterstützt wird. In anderen Browsern wird üblicherweise nur der nicht-animierte
Text der Laufschrift angezeigt. Dem <marquee>-Tag vorzuziehen ist auf jeden Fall
die Implementierung der Laufschrift als Java-Applet (siehe Kapitel 16), allerdings
ist dies natürlich auch aufwendiger.
<marquee behaviour="scroll">Dies ist eine Laufschrift</marquee>
Antwort:
Dem Attribut behaviour kann man einen der Werte alternate, slide oder scroll
zuweisen.
Frage:
In Abschnitt 2.8.1 wird von der Verwendung der <body>-Attribute vlink und alink für
besuchte und aktivierte Links abgeraten. Wie aber kann man mit Hilfe von Stylesheets
eigene Farben für noch nicht besuchte, besuchte und aktivierte Hyperlinks vorgeben,
wenn es doch nur ein <a>-Ankerelement für einen Hyperlink gibt?
Antwort:
Es geht. Um mit Stylesheets für Hyperlinks drei verschiedene Farben für die
Zustände nicht-besucht, besucht und aktiviert festzulegen, muss man jedoch
eingebettete Stylesheets definieren und sich eines Tricks, der sogenannten Pseudo-
Elemente, bedienen. Wie dies geht, erfahren Sie in Kapitel 4.4.3.
Frage:
Ich habe auf meiner Webseite eine Textzeile, die ich gerne in etwas größerer, fetter Schrift
formatieren möchte. Ist es okay, wenn ich die Textzeile zu diesem Zweck in <h2>-Tags
einfasse?
Antwort:
Um Gottes willen, nein! Das <h2>-Tag ist ein Struktur-Tag, dass dem Webbrowser
mitteilen soll, dass es sich bei dem in dem Tag eingeschlossenen Text um eine
Überschrift 2. Ebene handelt. Dass der Webbrowser diese Information nutzt, um
die Überschrift entsprechend zu formatieren, und Sie wissen, dass diese
Formatierung üblicherweise in der Zuweisung einer größeren, fetten Schrift
besteht, sollte Sie nicht verleiten, das Struktur-Tag <h2> zur Formatierung zu
verwenden. Wenn Ihre Textzeile also keine Überschrift der Ebene 2 ist, verzichten
Sie auf das <h2>-Tag und formatieren Sie die Textzeile stattdessen mit einem
Inline-Stil, beispielsweise:
<p style="font-size: 20px; font-weight: 700">Dies ist die Textzeile</p>
Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.
----------------------------------------------------------------------------------------------------------
HTML (Hypertext Markup Language) ist eine Auszeichnungssprache zur Erstellung von elektronischen Dokumenten. Zur Auszeichnung und Strukturierung des Textes definiert der HTML-Standard eine Reihe von so genannten Tags.
XHTML ist der aktuelle Versuch des W3C-Konsortiums eine Brücke zwischen HTML und XML zu schlagen. XHTML-Dokumente sind einerseits den HTML-Dokumenten sehr ähnlich und können von allen gängigen Browsern korrekt angezeigt werden, andererseits sind XHTML-Dokumenten XML-konform.
Unter http://www.w3.org finden Sie weitere Informationen zu HTML und XHTML.
Der Umbruch erfolgt ohne Silbentrennung. Das ist verständlich, sonst müssten die Browser ja für alle Sprachen ein passendes Wörterbuch parat haben.
Paletten werden nur für Bilder bis maximal 256 Farben verwendet. In der Palette wird jede Farbe durch einen RGB-Wert spezifiziert (wobei je 1 Byte zur Kodierung des Rot-, Grün- und Gelbanteils zur Verfügung stehen, d.h. die Palette kann 256 Farben aus einem Spektrum von 16 Mio. Farben enthalten). Für die einzelnen Bildpunkte braucht dann nur noch ein 1-Byte großer Index in die Farbpalette abgespeichert zu werden.
map ist das englische Wort für Abbildung. Ein
<map>-Element erzeugt eine Abbildung zwischen einzelnen Bereichen einer Grafik und den Hyperlinks.