vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 2

Am Anfang war... HTML

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.

Die Themen heute:

2.1 Was sind Markups?

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.

Was macht der Webbrowser aus den HTML-Markups?

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.

Formatierung mit HTML-Tags

In HTML werden Markups in Form von »Tags« direkt in den zu formatierenden Text eingefügt.

Die Tags

Jedes Tag besteht aus

Zum Beispiel:

<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.

HTML-Elemente

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.

Attribute

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" ... />

Zum Beispiel:

<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 und Codierstil

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> &#150; 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> &#150; den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p></body></html>

Kommentare

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 ...

2.2 Das HTML-Grundgerüst

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.

Die Versionsinformation

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:

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).

Der Header-Abschnitt

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.

Der Body-Abschnitt

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:

Listing 2.2: kiefer.html

<!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> &#150; den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>

</body>
</html>

Abbildung 2.3:  Unsere erste Webseite

2.3 Text und Überschriften

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.

Überschriften

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.

Tag

Darstellung im Internet Explorer

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Tabelle 2.1: HTML-Überschriften

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).

Inhaltsverzeichnisse

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.

Absätze

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.

Zeilenumbrüche erzwingen

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).

Text einrücken

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.

Textstellen einzeln formatieren

Zur Auszeichnung von Textpassagen gibt es zwei Kategorien von Formatierungen:

Physikalische Formatierungen

Physikalische Formatierungen schreiben dem Webbrowser explizit vor, wie der Text aussehen soll.

Tag

Beschreibung

<b> ... </b>

Fettschrift

<i> ... </i>

Kursivschrift

<small> ... </small>

kleine Schrift

<big> ... </big>

große Schrift

<tt> ... </tt>

Schreibmaschinenschrift

<sub> ... </sub>

tiefer gestellter Text

<sup> ... </sup>

höher gestellter Text

Tabelle 2.2: Physikalische Auszeichnungen

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 Formatierungen

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.

Tag

Beschreibung

<abbr>...</abbr>

Abkürzung

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>

<acronym>...</acronym>

Akronym

Das title-Attribut2 des Elements kann zum Angeben des vollständigen Begriffes genutzt werden.

<cite>...</cite>

Zitat oder Referenz

<code>...</code>

Listing

<dfn>...</dfn>

Definition

<em>...</em>

Hervorhebung, üblicherweise durch Kursivschrift

<kbd>...</kbd>

Tastatureingabe

<samp>...</samp>

Beispiel

<strong>...</strong>

Hervorhebung, üblicherweise durch Fettschrift

<var>...</var>

Variable (eines Programms, einer mathematischen Formel)

Tabelle 2.3: Logische Auszeichnungen

1

    Das title-Attribut ist für alle Tags definiert, die im Body-Abschnitt des HTML-Dokuments verwendet werden können. Die Browser sind gehalten den Wert des title-Attributs vorzulesen (als Akustikausgabe) oder als Kurzinformation anzuzeigen, wenn der Mauszeiger über dem Element verweilt.

2

    Das title-Attribut ist für alle Tags definiert, die im Body-Abschnitt des HTML-Dokuments verwendet werden können. Die Browser sind gehalten den Wert des title-Attributs vorzulesen (als Akustikausgabe) oder als Kurzinformation anzuzeigen, wenn der Mauszeiger über dem Element verweilt.

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.

Sonderzeichen

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.

Sonderzeichen

Umschreibung

Leerzeichen

&nbsp;1

< > & »

&lt; &gt; &amp; &quot;

ä ü ö ß

&auml; &uuml; &ouml; &szlig;

Ä Ü Ö

&Auml; &Uuml; &Ouml;

à â è é ê ë ô

&agrave; &acirc; &egrave; &eacute; &euml; &ocirc;

usw.

&alpha; &beta; &gamma; &delta; usw.

Tabelle 2.4: Codierung von Sonderzeichen

1

    Folgen mehrere Leerzeichen im HTML-Code aufeinander, streicht sie der Browser bis auf ein Leerzeichen zusammen (Leerzeichen, die allein in einem Tag stehen, werden ganz entfernt). Will man dies verhindern, muss man die Leerzeichen als &nbsp; codieren.

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.

2.4 Listen

HTML definiert drei unterschiedliche Arten von Listen:

Aufzählungen

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.

<ul>...</ul>

Die gesamte Liste wird zunächst mit dem <ul>-Tag umschlossen (ul = unordered list = ungeordnete Liste).

<li>...</li>

Jedes einzelne Listenelement muss zusätzlich noch einmal in <li>-Tags eingeschlossen werden (li = list item = Listenelement).

Beispiel:

<ul>
<li>Aufzählungen (ungeordnete Listen)</li>
<li>Nummerierungen (geordnete Listen)</li>
<li>Definitionen</li>
</ul>

Nummerierungen

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.

<ol>...</ol>

Die gesamte Liste wird zunächst mit dem <ol>-Tag umschlossen (ol = ordered list = geordnete Liste).

<li>...</li>

Jedes einzelne Listenelement muss zusätzlich noch einmal in <li>-Tags eingeschlossen werden (li = list item = Listenelement).

Beispiel:

<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>

Abbildung 2.5:  Nummerierung im Webbrowser

Definitionen

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.

<dl>...</dl>

Die gesamte Definitionsliste wird zunächst mit dem <dl>-Tag umschlossen (dl = definition list).

<dt>...</dt>

Die zu definierenden Begriffe werden in <dt>-Tags eingeschlossen (dt = definition term = Definitionsbegriff).

<dd>...</dd>

Die eingerückten Definitionen werden in <dd>-Tags eingeschlossen (dd = definition description = Definitionsbeschreibung).

Beispiel:

<h2>Unser Ensemble stellt sich vor:</h2>

<dl>
<dt>Groucho Marx</dt>
<dd>Unser Dirigent und Manager. </dd>
<dt>&nbsp;</dt>

<dt>Chico Marx</dt>
<dd>Der Pianist.</dd>
<dt>&nbsp;</dt>

<dt>Harpo Marx</dt>
<dd>Souverän an Harfe und Tröte.</dd>
<dt>&nbsp;</dt>

<dt>Zeppo Marx</dt>
<dd>Unser Heldentenor.</dd>
<dt>&nbsp;</dt>
<dd>&nbsp;</dd>
</dl>

Abbildung 2.6:  Definitionsliste im Webbrowser

Listen formatieren

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.

Aufzählungssymbole

Ü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>

Nummerierungszeichen

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).

Verschachtelte Listen

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).

2.5 Bilder

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.

Das <img>-Tag

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.

Bildabmaße

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> &#150; den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>

</body>
</html>

Abbildung 2.7:  Webseite mit eingefügtem Bild

Positionierung und Textfluss

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

  1. Als Erstes bearbeiten wir die Abbildung der Kiefer. Das »U« aus Gras, Stamm und überhängendem Ast eignet sich wunderbar als Rahmen für den Text. Es ist allerdings noch etwas zu eng. Wir haben die Bilddatei daher in ein geeignetes Grafikprogramm geladen (im vorliegenden Fall reicht schon Paint Shop Pro, das man als Demoversion von http://www.jasc.com herunterladen kann) und die Spitze des überhängenden Astes ein wenig »zurückgeschnitten«. Jetzt muss noch der Stamm verlängert werden. Dazu haben wir die Bildabmaße nach unten verlängert und die untere Bildhälfte ab der Mitte des Stammes nach unten verschoben. Die entstandene Lücke haben wir mit einem Bildstreifen gefüllt, den ich aus der Höhe des Stammes kopiert habe.
  2. Statt das Bild mit dem <img>-Tag einzufügen, definieren wir es als Hintergrundbild:
    <body style="background-image: url('kiefer_b.tif')
  1. Hintergrundbilder werden von den Browser standardmäßig wie Kacheln ausgelegt, damit sie den ganzen Webseitenhintergrund füllen. Um dieses Verhalten zu unterbinden, setzen wir die Stileigenschaft background-repeat auf no-repeat:
    <body style="background-image: url('kiefer_b.tif'); 
    background-repeat: no-repeat; background-color: white;
  2. Schließlich sorgen wir dafür, dass der eigentliche Seiteninhalt (unser Text) vom linken und oberen Seitenrand so weit abgerückt werden, dass er im »U« der Kiefer angezeigt wird.
    <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.

Listing 2.4: kiefer3.html

<!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> &#150; den langes Leben symbolisierenden Pflanzen Kiefer, Bambus und Pflaume. ...</p>

</body>
</html>

Bilddateien für die Verwendung in Webseiten aufbereiten

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.

Die wichtigsten Bildformate

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.

GIF

GIF steht für »Graphic Interchange Format« und ist eine Entwicklung von CompuServe. GIF-Bilder werden nach dem LZW-Algorithmus komprimiert, für den die Firma Unisys die Patentrechte innehat. Mit diesem Algorithmus sind hohe Komprimierungsraten ohne Qualitätsverluste erreichbar.

Das GIF-Format erlaubt traditionell nur 256 Farben (es gibt Erweiterungen des Formats, die mehr Farben gestatten, doch werden diese nur von wenigen Programmen unterstützt). Für photorealistische Darstellungen scheidet das GIF-Format daher aus. Es ist aber bestens für Design-Elemente (Schaltflächen, Hintergründe, etc.) und Bilder geringer Farbtiefe geeignet.

GIF-Bilder können als »interlaced« oder als »non-interlaced« abgespeichert werden. »Non-Interlaced«-Bilder werden Zeile für Zeile an den Webbrowser geschickt und können von diesem erst dann angezeigt werden, wenn sie ganz geladen sind. »Interlaced«-Bilder werden paketweise übertragen, wobei die Pakete jeweils nur jede achte Zeile enthalten. Auf diese Weise erhält der Browser sofort ein Rohbild, das er anzeigen kann und das Paket für Paket verbessert wird.

Ein weiterer Vorteile des GIF-Format ist, dass man eine transparente Farbe definieren kann.

Wenn Sie Grafiken im GIF-Format speichern und Ihr Grafikprogramm sowohl das 87a- als auch das 89a-Format unterstützt, wählen Sie das neuere 89a-Format.

JPG

JPG oder JPEG steht für Joint Photographic Expert Group. Es zeichnet sich durch einen leistungsstarken, konfigurierbaren Komprimierungsalgorithmus aus, der allerdings nicht verlustfrei arbeitet. Je stärker die Komprimierung, um so größer die Qualitätsverluste.

JPG unterstützt 16 Millionen Farben (TrueColor) und mittlerweile auch den schrittweisen Bildaufbau im Browser (progressive JPG). Es eignet sich vor allem für größere Bilder und für Fotos.

PNG

1995 kündigten CompuServe und Unisys an, dass sie auf den GIF-LZW-Komprimierungsalgorithmus Lizenzgebühren erheben wollen. Als Antwort wurde das nicht-kommerzielle PNG-Format entwickelt, das in gewisser Weise, das Beste aus GIF und JPG in sich vereint. Das PNG-Format eignet sich für alle Arten von Bildern. Im Vergleich zu JPG erlaubt es allerdings keine fein abgestufte Bildkomprimierung (es verwendet wie GIF ein verlustfreies Komprimierungsverfahren).

Noch hat sich PNG nicht wirklich durchgesetzt. Zum einem liegt dies vermutlich daran, dass die Endbenutzer (Webautoren) nicht von der Lizenz betroffen sind, zum anderen daran, dass ältere Browser PNG nicht unterstützen und GIF und JPG einfach gute Alternativen sind.

Zur besseren Übersicht hier noch einmal die wichtigsten Unterscheidungskriterien.

Kriterium

GIF

JPG

PNG

Farbtiefe

2 - 256

256 - 16,7 mio

2 - 65536 (S/W)

2 - nahezu unendlich

Komprimierung

verlustfrei

abgestuft, mit zunehmenden Qualitätsverlusten

verlustfrei

Transparenz

ja

nein

ja

Schrittweise Darstellung

ja

interlaced-Modus

ja

progressive JPG

ja

interlaced-Modus

Animationen

ja

nein

nein

Alpha-Kanal

nein

nein

ja

Verwendung

Design-Elemente

Bilder geringer Farbtiefe

Bilder hoher Farbtiefe

Fotorealistische Darstellungen

Große Bilder (> 10 KByte)

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.

Bilddateigröße versus Bildqualität

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.

  1. Scannen Sie das Bild ein.

Mögliche Vergrößerung

Auflösung beim Scannen

100 % (keine Vergrößerung)

75 dpi

200 %

150 dpi

400 %

300 dpi

800 %

600 dpi

Tabelle 2.6: Verhältnis dpi zu Vergrößerung

  1. Speichern Sie das Bild in dem von Ihnen gewählten Bearbeitungsformat (beispielsweise TIFF).
  1. Legen Sie eine Kopie an und bearbeiten Sie diese in Ihrem Grafikprogramm.
  1. Speichern Sie das fertig bearbeitete Bild und legen Sie auch von diesem eine Kopie an.
  2. Reduzieren Sie zum Schluss die Größe der kopierten Bilddatei.

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.

Bilder im Arbeitsspeicher

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.

2.6 Hyperlinks

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.

Hyperlinks zu anderen Webseiten

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>

Hyperlinks zu anderen Websites

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>

Hyperlinks zu Webseiten der eigenen Website

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

Oder

<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

Oder

<base href="http://www.server.com/verz/">
...
<a href="../verzeichnis2/seite.html"></a>

Der resultierende Link lautet:

http://www.server.com/verzeichnis2/seite.html

Oder

<!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.

Hyperlinks zu bestimmten Textstellen

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

Hyperlinks zu Textstellen kann man beispielsweise zum Aufbau von Inhaltsverzeichnissen nutzen.

Inhaltsverzeichnisse

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 zu anderen Protokollen

Hyperlinks können nicht nur andere Webseiten ansteuern. Wenn Sie wollen, können Sie auch zu einem anderen Protokoll wechseln.

Protokoll

Ziel

http:

HTML-Dokument

mailto:

E-Mail-Adresse abschicken

ftp:

Verweis auf eine Datei mit Hilfe des File-Transfer-Protokolls

news:

Verweis auf einen Newsgroup-Artikel

file:

Zugriff auf lokal gespeicherte Dokumente

gopher:

Gopher-Dokument

wais:

Wide Area Information System

Tabelle 2.7: Hyperlinks und Protokolle

Bilder als Hyperlinks

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.

ImageMaps - Bilder mit mehreren Links

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.

  1. Als Erstes fügen wir die Grafik in die Webseite ein:
    <img alt="Planeten" border="0" src="planeten.jpg" 
    width="640" height="480" />
  2. Dann definieren wir die <map>-Abbildung. Um die ImageMap später referenzieren zu können, weisen wir ihr mit Hilfe des name-Attributs einen Namen zu.
    <map name="meineMap">
    </map>
  3. Die einzelnen Teilbereiche, die mit Links verbunden werden sollen, werden mit Hilfe des <area>-Tags eingefügt.

shape-Typ

Koordinaten

default

das ganze Bild

rect

rechteckiger Ausschnitt

angegeben werden: die x- und die y-Koordinate der oberen linken und dann der rechten unteren Ecke.

circle

kreisförmiger Ausschnitt

angegeben werden: die x- und die y-Koordinate des Mittelpunktes und dann der Radius.

poly

polygonaler Ausschnitt

angegeben werden: die x- und die y-Koordinate der Ecken des Polygons. Wenn die letzte Ecke nicht mit der ersten Ecke zusammenfällt, schließt der Webbrowser das Polygon.

<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).

  1. Schließlich verbinden Sie die Grafik mit der ImageMap, indem Sie das <img>-Tag um das usemap-Attribut erweitern und diesem als Wert den Namen der ImageMap übergeben.
    <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.

Serverseitige ImageMaps

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.

Navigationsleisten

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.

Grafische Hyperlinks auf rein grafisch ausgerichteter Webseite

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

Navigationsleisten

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.

»Schaltflächen«

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.

Glätten (Antialiasing)

Treffen in einer Pixelgrafik zwei Volltöne aufeinander, führt dies für gewöhnlich zur Treppenbildung (siehe Abbildung, oberer Schriftzug).

Um diese Treppenbildung zu verhindern, bedient man sich des Glättens oder Anti-Aliasings. Dabei werden die Ränder durch das Einmischen von Zwischentönen verwischt. Bessere Grafikprogramme (u.a. auch Paint Shop Pro) verfügen über Funktionen zum Glätten.

Zerteilen

Beim Aufbau komplexerer grafischer Webseiten bedient man sich häufig eines Tricks: Man erzeugt das Gesamtbild der Webseite, zerlegt dieses und teilt es auf die verschiedenen grafischen Elemente auf. Zum Schluss baut man das Bild bei der Erstellung der Webseite wieder zusammen (mit Tabellen oder durch CSS-Positionierung).

2.7 Sonstige Tags

Was für HTML-Tags gibt es sonst noch? Greifen wir in die HTML-Fundgrube und schauen wir, was zutage tritt.

Horizontale Linien

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.

Texte logisch strukturieren mit div und span

Mit dem HTML-Tag <div> können Sie mehrere HTML-Tags auf Blockebene zusammenfassen.

<div> 
<h2>Überschrift in &lt;div&gt;-Tags </h2>
<p>Erster Absatz in &lt;div&gt;-Tags.</p>
<p>Zweiter Absatz in &lt;div&gt;-Tags.</p>
<p>Letzter Absatz in &lt;div&gt;-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 &lt;span&gt;-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 &lt;div&gt;-Tags.</p>
<p>Zweiter Absatz in &lt;div&gt;-Tags.</p>
<p>Letzter Absatz in &lt;div&gt;-Tags. <span style="font-family:
Arial">Dieser Satz ist in &lt;span&gt;-Tags eingefasst.
</span>Dieser Satz nicht mehr.</p>
</div>

<p>Letzter Absatz in Body-Abschnitt.</p>
</body>

Abbildung 2.16:  Formatieren mit div und span

Zitate mit blockquote und q

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 ...

Was gibt es sonst noch?

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.

Tag

Bedeutung

<del>

Zur Kennzeichnung von Text, der gegenüber einer früheren Version des Webdokuments gelöscht wurde.

<ins>

Zur Kennzeichnung von Text, der in einer früheren Version des Webdokuments noch nicht vorhanden war.

<address>

Zum Einfügen von Kontaktinformationen gedacht.

2.8 Inline-Stile, Farben, Schriften und Seitenhintergrund

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.

Traditionelle Formatierung versus Stylesheets

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.

Beispiel:

<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.

Formatieren mit Inline-Stilen

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.

Eigenschaft

Bedeutung

background-color

Hintergrundfarbe

Werte: <Farbe> | transparent

background-image

Hintergrundbild

Werte: <uri>

border-color

Farbe des Rahmens um das Element.

Werte: <Farbe> | transparent {1, 4}

border-style

Rahmenstil

Werte: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1, 4}

border-width

Rahmenbreite

Werte: <Breite> | thin | middle | thick {1, 4}

color

Vordergrundfarbe

Werte: <Farbe>

font-family

Schriftfamilie

Werte: Geordnete Liste von Schriftnamen

font-style

Schriftstil

Werte: normal | italic | oblique

font-weight

Schriftbreite

Werte: lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size

Schriftgröße

Werte: <Größenangabe in em, px ,ex, pt oder %> | larger | smaller

margin

Randbreite

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder %> {1, 4}

padding

Füllraum

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder %> {1, 4}

text-align

Textausrichtung (nur für Blockelemente)

Werte: left | right | center | justify

text-decoration

Textauszeichnung

Werte: none | [ underline || overline || line-through || blink ]

text-indent

Texteinzug (nur für Blockelemente)

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder %>

text-shadow

Werte: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?]

text-transform

Textumwandlungen

Werte: capitalize | uppercase | lowercase | none

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>

Abbildung 2.17:  Hintergrundfarbe für HTML-Elemente

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.

Farben

Ü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.

RGB-Farben

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%)

Abbildung 2.18:  Das RGB-Farbmodell

Für die gängigsten Farben (genauer gesagt, die 16 Farben aus der Windows-VGA-Palette) gibt es zudem Schlüsselwörter:

aqua

black

blue

fuchsia

gray

green

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

Tabelle 2.9: Schlüsselwörter für CSS-Farben

Schriften

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:

Allgemeine Schriftfamilie

Beispiel

serif

Times

sans-serif

Helvetica

cursive

Zapf-Chancery

fantasy

Western

monospace

Courier

Tabelle 2.10: Allgemeine Schriftfamilien

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

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.

Abbildung 2.19: 02bld33.pcx

Hintergrundbild

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)

  1. Erzeugen Sie in Ihrem Grafikprogramm ein Bild von 200 x 10 Pixeln und füllen Sie es mit einem Farbverlauf von Schwarz bis Grau.
  2. Wenn Sie dieses Bild als Hintergrundbild verwenden und nur in Y-Richtung kacheln lassen, erhalten Sie einen wunderschönen Streifen (siehe Abbildung 2.20).
    <body style="background-image: url('blaustreifen.jpg');
    background-repeat: repeat-y">

    Abbildung 2.21:  Streifen mit Übergang als Webhintergrund

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.

2.9 Zusammenfassung

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.

2.10 Fragen und Antworten

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.

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>

2.11 Workshop

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.

Quiz

  1. Was ist der Unterschied zwischen einem leeren Tag und einem nicht-leeren Tag ohne Inhalt?
  2. Wie kann man einen Zeilenumbruch erzeugen?
  3. Werden <h4>-Überschriften fett formatiert?
  4. Wie kann man Bilder in Webseiten einfügen?
  5. Was sind ImageMaps?
  6. Wie kann man einzelne HTML-Elemente mit Inline-Stilen formatieren?
  7. Wie lauten die Stileigenschaften für
  1. Wie kann man zwei Textabsätze und ein dazwischen gelegenes Bild zusammen einrücken?

Übungen

  1. Wandeln Sie den folgenden Text in eine Webseite um.
  1. Richten Sie in dem Webdokument, das Sie in Übung 1 erstellt haben, Hyperlinks vom Inhaltsverzeichnis zu den entsprechenden Textstellen ein. Verwandeln Sie auch die Webadresse des W3C-Konsortiums in einen anklickbaren Hyperlink.
  2. Erstellen Sie eine einfache private Homepage mit
  1. Legen Sie eine neue Webseite an, in die Sie das Bild einer Deutschlandkarte einbinden. Richten Sie für die Städte Berlin, München und Saarbrücken Hyperlinks ein.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


12345

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH