# Grafiken und Multimedia

Ich habe die IT-Leitung eines Multimedia-Unternehmens und werde sehr häufig von meinen Mitarbeitern zu den verschiedensten PC-Problemen angesprochen, deren Ursache ich mir selbst manchmal nicht erklären kann. Meine »Weisheit« dazu ist kurz und einleuchtend: »Es gibt Dinge, die muss man nicht verstehen, die sind einfach so.«
– Aus PC-Magazin

Dieses Kapitel befasst sich mit der Einbindung (Referenzierung) von Grafik- und Multimedia-Objekten in HTML-Dokumente. Dies ist eine der wohl interessantesten Möglichkeiten von HTML. Dabei werden die einzelnen Grafik- und Multimedia-Formate vorgestellt und auch die unterschiedlichen Vorgehensweisen zur Implementierung angeführt.

# Grafikformate

Die Grundvoraussetzung für eine Grafik, die in HTML-Dokumente eingebunden werden soll, ist eine geringe Dateigröße bei hoher Auflösung. Das in Windows-Kreisen häufig verwendete BMP-Format ist daher denkbar ungeeignet, da jeder Bildpunkt einer solchen Grafik einzeln gespeichert wird. Ein Bild von der Größe 800 × 600 Pixel und einer Farbtiefe von 256 Farben (8 Bit) ist somit 468,75 kB groß (800 × 600 × 8 bit = 3.840.000 Bit = 480.000 Byte). Bei einer Farbtiefe von 16 oder gar 32 Bit verdoppelt bzw. vervierfacht sich diese Dateigröße. Nutzer mit einer langsamen Anbindung an das Internet, z. B. via Modem oder ISDN, warten dann ein bis vier Minuten (je nach Farbtiefe), bis eine solche Grafik heruntergeladen worden ist und im Browser dargestellt werden kann. Den meisten Nutzern reißt nach einer halben Minute meistens schon der Geduldsfaden, und sie surfen genervt zu einer anderen Seite.

Daher haben sich im Laufe der Zeit drei verschiedene Formate im World Wide Web durchgesetzt: GIF, JPEG und PNG. Alle diese Formate verfügen über spezielle Kompressionsalgorithmen, um die Größe der Datei auch bei hohen Auflösungen und Farbtiefen so gering wie möglich zu halten. Dabei gehen alle drei Formate unterschiedliche Wege, und genauso unterschiedlich sind auch ihre Möglichkeiten und folglich ihre Anwendungsbereiche.

# GIF

Die Abkürzung GIF steht für »Graphics Interchange Format«. Dateien dieses Typs besitzen in der Regel die Endung .gif. Eingeführt hat dieses Format der Online-Provider Compuserve, und es basiert auf dem LZW-Kompressionsalgorithmus. Dieser ermöglicht eine sehr geringe Dateigröße bei hoher Auflösung, jedoch auf Kosten der Farbtiefe. Es stehen maximal 256 Farben zur Verfügung. Dateien dieses Formats eignen sich daher nur für Grafiken mit sehr wenig Farbverläufen. Bilder sind in diesem Format also eher schlecht aufgehoben. Umso besser eignet sich das Format aber für Schaltflächen, Trennlinien, Kachelhintergründe und Ähnliches.

Ein Bild in der Abmessung 800 × 600 Pixel bei 256 Farben wäre, wie bereits erwähnt, im BMP-Format 480.000 Byte groß. Das gleiche Bild im GIF-Format kann bis zu 30-mal kleiner sein. So ergibt sich eine ungefähre Mindestgröße von 16.000 Byte, und die Ladedauer beträgt lediglich zwei Sekunden.

Mittlerweile gibt es das GIF-Format in den Versionen 87a und 89a. Die am weitesten verbreitete Version ist 89a. Sie bietet drei Möglichkeiten, die sie von anderen Formaten hervorhebt:

  • Transparenz
    Aufgrund der Festlegung einer GIF-Grafik auf 256 Farben entsteht eine so genannte Farbpalette, die in der GIF-Grafik gespeichert wird. Eine dieser 256 Farben lässt sich nun als transparent festlegen. Im Browser würde diese Farbe der Grafik nicht dargestellt werden, und die darunter liegenden Elemente würden durchscheinen.
  • Interlacing
    Diese Möglichkeit sollten Sie vor allem bei größeren GIF-Grafiken verwenden. Dadurch wird die Grafik nicht wie üblich zeilenweise im Browser ausgegeben, sondern in mehreren Schritten – mit einer geringeren Qualität und Farbtiefe beginnend bis hin zur endgültigen Qualität und Farbtiefe. Ein Benutzer ist somit in der Lage, vor dem Ende des Ladevorgangs der Grafik zu erkennen, was ihn erwartet.
  • Animation
    Ähnlich einem Daumenkino werden bei einer Animation mehrere GIF-Grafiken zu einer Datei zusammengefügt und als Bilder-Show nacheinander dargestellt. Nach einer vorher festgelegten Zeit wechselt der Browser diese Bilder. Solche GIF-Grafiken sind auch als »animierte GIFs« oder »AniGifs« bekannt.

Die Firma Unisys besitzt das Patent für den LZW-Kompressionsalgorithmus. Gegen nicht lizenzierte GIF-Grafiken kündigte Unisys 1999 juristische Schritte an, was dazu führte, dass man von GIF-Grafiken Abstand genommen hat und Alternativen verwendet. Daher ist im Freeware- bzw. Open Source-Bereich die Unterstützung dieses Formats eher selten, da sie für Hersteller von Grafik-Software mit Lizenzkosten verbunden ist, und sich dies in Freeware-Kreisen als finanziell unmöglich darstellt.

Einige Beispiele zu animierten, Interlaced-Grafiken und transparenten GIF-Grafiken finden Sie auf der dem Buch beiliegenden CD‑ROM im Verzeichnis x:\misc\gif.

# JPEG

JPEG ist die Abkürzung für »Joint Photographic Experts Group« und bezeichnet eine Gruppe von Experten, die das JPEG-Format entwickelt haben und noch immer weiterentwickeln. Bei der Speicherung für dieses Format wird ein anderer Weg als beim GIF-Format gegangen. Mittels Kosinus-Berechnungen und einem speziellen Kodierungsverfahren wird die Grafik zuerst in 8 × 8 Pixel große Blöcke unterteilt und anschließend komprimiert. Dieses Verfahren eignet sich besonders für Grafiken mit vielen Farbverläufen (z. B. Fotos), da ein als JPEG gespeichertes Bild über maximal 16,7 Millionen Farben verfügen kann.

Weniger eignet sich das JPEG-Format für Grafiken mit scharfen Kanten und gleichmäßig farbigen Flächen (ähnlich einer Comic-Zeichnung). Die Farbflächen sehen dann häufig verwaschen aus, und die Kanten wirken stark verzerrt. Leider komprimiert JPEG ein Bild, indem es bewusst auf Bildinformationen verzichtet, was deutliche Spuren in der Qualität des Bilds zurücklässt, aber auch eine geringe Dateigröße ermöglicht.

Die Qualität eines Bilds können Sie durch zwei verschiedene Parameter beeinflussen:

  • Kompressionsstufe
    Die Angabe der Kompressionsstufe erfolgt in Prozent. Je höher dieser Wert ist, desto geringer ist die Dateigröße und desto geringer ist auch die Qualität.
  • Auflösung
    Für Grafiken, die auf einem Monitor dargestellt werden sollen, wird oft eine Auflösung von 72 dpi verwendet. Die Einheit dpi steht für »dots per inch« (Punkte pro Zoll) und gibt an, wie viele Punkte auf einen Zoll (ca. 2,54 cm) dargestellt werden sollen. Die Auflösung von 72 dpi reicht für die Darstellung am Bildschirm oder in HTML-Dokumenten vollkommen aus. Für die Ausgabe auf einem Drucker sollte die Auflösung bei mindestens 300 dpi liegen.

Wie bei GIF-Grafiken auch, können Sie JPEG-Grafiken interlaced darstellen. Diese Methode heißt bei JPEG »progressive«. Es wird zuerst das komplette Bild in minderer Qualität dargestellt, bis die gesamte Datei geladen worden ist, und dann wird es durch die qualitativ hochwertigere Grafik ersetzt.

In der Regel enden Dateien des Typs JPEG auf .jpg. Jedoch sind auch die Varianten .jpe und .jpeg möglich.

Zurzeit wird das JPEG2000-Format entwickelt. Dies ist eine überarbeitete Version von JPEG, das sich vom normalen JPEG-Format hauptsächlich durch die Art der Komprimierung unterscheidet. Sie soll höhere Kompressionsfaktoren bei besserer Bildqualität liefern und wird durch Wavelets realisiert. Ein weiterer Unterschied ist die Bestimmung einer region of interest. Der interessanteste Teil eines Bilds wird festgelegt und mit einem geringeren Kompressionsfaktor als die umliegenden Bildregionen bearbeitet. Dadurch lässt sich die Dateigröße zusätzlich reduzieren.

Beispiele für verschiedene Grafiken, die mit JPEG komprimiert wurden, finden Sie auf der dem Buch beiliegenden CD‑ROM im Verzeichnis x:\misc\jpeg.

# PNG

Die Auflösung der Abkürzung PNG (sprich: ping) lautet »Portable Network Graphics«. PNG wurde vom W3-Konsortium als Alternative zum JPEG- und GIF-Format entwickelt. Es soll die Vorteile beider Formate kombinieren und die jeweiligen Nachteile auf ein Minimum reduzieren. Dies bedeutet verlustfreie Kompression, 16,7 Millionen Farben inklusive Transparenz und Interlaced- bzw. Progressive-Funktion. Die übliche Dateiendung lautet .png.

Die verlustfreie Kompression geht leider auf Kosten der Dateigröße, da sie sich nicht beeinflussen lässt, sondern von den Bildinformationen abhängt. Sie basiert auf der arithmetischen Kompression, die auch bei JPEG2000 und bei ZIP (Kompressionsformat für Dateien) verwendet wird. Dabei werden sich wiederholende Bitmuster zusammengefasst und deren Anzahl abgespeichert. Dies funktioniert zwar bei comic-ähnlichen Grafiken sehr gut, da sich hier die Bitmuster häufig wiederholen, bei feinen Farbübergängen, wie sie in Fotos häufig auftreten, finden sich jedoch wenig gleiche Bitmuster.

Die Farbtiefe einer PNG-Grafik hängt von der gewählten Methode ab. Entweder stehen alle 16,7 Millionen Farben normal zur Verfügung, oder sie werden in einer Farbpalette notiert. Letztere Variante hat den Vorteil, dass zum Rot-, Grün- und Blauanteil zusätzlich ein Alpha-Wert gespeichert werden kann. Dieser Alpha-Wert bestimmt den Grad der Transparenz einer Farbe. Dadurch lassen sich Transparenzeffekte viel feiner ausarbeiten, als es mit dem GIF-Format möglich wäre, bei dem nur eine Farbe als transparent deklariert werden kann.

Der schichtweise Aufbau einer PNG-Grafik ist wesentlich ausgereifter als bei einer JPEG-Grafik, da lediglich ca. 2  % der Bildinformationen ausreichen, um eine Vorschaugrafik darzustellen. Für JPEG werden hingegen ca. 15  % benötigt.

Das Neue an dem Format sind die Gammakorrektur und die Informationen zu Bildherkunft und eventuellen Copyrights. Die Gammakorrektur bestimmt die ursprüngliche Belichtung eines Bilds und stellt es auf jedem Rechner (unabhängig von Hard- und Software) originalgetreu dar, während die Informationen zur Bildherkunft den Bildtitel, den Künstler, eine Beschreibung und Copyright-Hinweise enthalten können, was gerade im WWW besonders von Vorteil ist und dem Schutz des Urheberrechts dient.

Animationen lassen sich mit dem PNG-Format jedoch nicht realisieren, was ebenfalls zur schleppenden Verbreitung des Formats im WWW beiträgt. Aber auch die mangelhafte Unterstützung durch die Browser (egal ob Netscape, Microsoft, Opera etc.) behindert die Verbreitung, da es von Version zu Version verschieden sein kann, ob eine PNG-Grafik dargestellt wird oder eben nicht.

Einige Beispiele für PNG-Grafiken finden Sie auf der beiliegenden CD‑ROM im Verzeichnis x:\misc\png.

# SVG

Eine vollständig andere Art von Grafik bieten SVG-Grafiken. Dieses Format verwendet zur Darstellung so genannte Vektoren und basiert auf der Auszeichnungssprache XML. Mehr zu SVG werden Sie später in Kapitel, SVG – Scalable Vector Graphics, erfahren.

# Grafiken einbinden

Zur Verwendung von Grafiken in HTML-Dokumenten stellt HTML – wie sollte es anders sein – ein spezielles Element zur Verfügung: img (engl. image, dt. Abbildung). Dieses Element besitzt keinen Gültigkeitsbereich und verfügt somit auch nicht über ein Ende-Tag. Mit Hilfe dieses Elements können Sie in jedem populären Browser eine GIF- oder JPEG-Grafik einbinden. PNG-Grafiken sind natürlich auch möglich; wie bereits erwähnt wurde, werden sie aber nicht von jedem Browser unterstützt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Grafiken in HTML //-->
<html>
  <head>
    <title>Listing 4.1</title>
  </head>
  <body>
    <h1>Die Freiheitsstatue</h1>
    <img src="statue-of-liberty.jpg">
  </body>
</html>

Listing 4.1: Beispiel für das img-Element

Darstellung des Listings 4.1 im Internet Explorer 6.0 Abbildung 4.1: Darstellung des Listings 4.1 im Internet Explorer 6.0

Wie in Listing 10.1 zu erkennen ist, wird dem img-Element die darzustellende Grafik als Parameter mit dem src-Attribut (engl. source, dt. Quelle) übergeben. Es muss der vollständige Dateiname inklusive der Dateierweiterung und des Pfades angegeben werden.

Achten Sie besonders auf Groß- und Kleinschreibung. Zwar macht dies in einer Windows-Umgebung keinen Unterschied, wohl aber unter UNIX/Linux, die am häufigsten als Basis für Webserver verwendet werden. Die einfachste Lösung ist, alle Dateinamen und -endungen kleinzuschreiben. Außerdem sollten Sie auf Sonderzeichen wie ä, ö, ü, ß und Ähnliches verzichten, da es solche Zeichen im englischen Alphabet nicht gibt. Verwenden Sie also nur die Buchstaben von a bis z, die Zahlen von 0 bis 9, den Unterstrich »_«, das Minus-Zeichen »-« und das Punktzeichen ».«. Damit sind Sie immer auf der sicheren Seite.

# Alternativ-Text

Sollte es einmal vorkommen, dass eine Grafik, die Sie einbinden möchten, nicht verfügbar ist, oder der Benutzer die Darstellung von Grafiken in seinem Browser unterbunden hat, können Sie einen alternativen Text angeben, der innerhalb des <img>-Tags mit dem Attribut alt (engl. alternative, dt. Alternative) zugewiesen werden kann. Dieser Text wird auch als zusätzliche Information im Browser angezeigt, beispielsweise, wenn Sie den Mauszeiger längere Zeit an der gleichen Stelle über einem Bild schweben lassen.

<img src="bild.gif" alt="Das ist eine GIF-Grafik">

Beachten Sie die Kodierung von Sonderzeichen. Es gelten die gleichen Regeln wie für Sonderzeichen in einem HTML-Dokument.

<img src="statue-of-liberty.jpg" alt="Sch&ouml;ne Statue">

# Breite und Höhe

Jede Grafik besitzt eine vordefinierte Breite und Höhe. Standardmäßig wird eine Grafik in HTML in ihrer Originalgröße dargestellt. Sie können dies aber zusätzlich explizit festlegen oder auch verändern. Dadurch lassen sich Grafiken in ihrem Seitenverhältnis verändern bzw. verzerren. Die Breite wird durch das bekannte Attribut width und die Höhe durch das ebenfalls bekannte Attribut height angegeben. Das Bild der Freiheitsstatue in Abbildung 4.1 ist 266 Pixel breit und 398 Pixel hoch.

<img src="statue-of-liberty.jpg" width="266" height="398">
  <!-- Grafik wird in Originalgröße dargestellt //-->
<img src="statue-of-liberty.jpg" width="266" height="199">
  <!-- Grafik halb so hoch dargestellt //-->
<img src="statue-of-liberty.jpg" width="532" height="398">
  <!-- Grafik wird doppelt so breit dargestellt //-->

Wahlweise lassen sich auch relative Angaben zur Originalgröße mittels Prozentangaben machen. Diese Angaben beziehen sich dann auf den zur Verfügung stehenden Raum innerhalb eines anderen Elements. Wenn Sie eine Grafik beispielsweise direkt im Gültigkeitsbereich des body-Elements einbinden und die Breite auf 100  % setzen, so wird die Grafik auf den gesamten zur Verfügung stehenden Platz ausgedehnt.

<img src="statue-of-liberty.jpg" width="100%" height="100%">
  <!-- Streckt die Grafik über die gesamte zur Verfügung stehende Breite und Höhe //-->
<img src="statue-of-liberty.jpg" width="50%" height="50%">
  <!-- Streckt die Grafik auf die halbe zur Verfügung stehende Breite und Höhe //-->
<img src="statue-of-liberty.jpg" width="50%" height="200%">
  <!-- Streckt die Grafik auf die doppelte Höhe und halbe Breite des zur Verfügung stehenden Platzes //-->

# Rahmen

Zusätzlich können Sie eine Grafik mit einem Rahmen versehen. Dazu müssen Sie im <img>-Tag das Attribut border setzen und die Breite des Rahmens in Pixel als Parameter übergeben. Eine Grafik mit einem 3 Pixel breiten Rahmen würde dann wie folgt notiert werden:

<img src="bild.gif" border="3">
  <!-- 3 Pixel breiter Rahmen //-->

Optional lässt sich das Darstellen eines Rahmens auch verhindern. Der Parameter des border-Attributs muss dann auf 0 gesetzt werden.

<img src="bild.gif" border="0">
  <!-- kein Rahmen //-->

Das Unterbinden des Rahmens kann mehrere sinnvolle Gründe haben, z. B., dass die Grafik als Hyperlink verwendet wird. Wie das genau funktioniert, dazu später mehr.

# Grafiken ausrichten

Da Grafiken standardmäßig am linken Rand des Elternelements ausgerichtet werden, können Sie mit dem Attribut align die Ausrichtung beeinflussen. Möglich sind die Parameter left, center und right, die eine Ausrichtung am linken Rand, in der Mitte oder am rechten Rand bewirken.

<img src="bild.gif" align="left">
  <!-- Ausrichtung am linken Rand //-->
<img src="bild.gif" border="0">
  <!-- Ausrichtung in der Mitte //-->
<img src="bild.gif" border="0">
  <!-- Ausrichtung am rechten Rand //-->

# Transparente Grafiken

In GIF-Grafiken ist es möglich, eine Farbe der Palette als transparent zu deklarieren. Bei der Darstellung in HTML wird diese Farbe der Grafik ignoriert und stattdessen der darunter befindliche Inhalt angezeigt. Sehen Sie sich dafür ein Beispiel an. Die beiden verwendeten Grafiken sehen Sie in Abbildung 4.2.

Die Grafiken aus Listing 4.1 Abbildung 4.2: Die Grafiken aus Listing 4.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Transparente Grafiken in HTML //-->
<html>
  <head>
    <title>Listing 4.2</title>
  </head>
  <body background="line.gif">
    <img src="checker.gif">
  </body>
</html>

Listing 4.2: Beispiel für transparente Grafiken

Das im Start-Tag des body-Elements verwendete Attribut background ist Ihnen bisher unbekannt. Ich werde es Ihnen in Abschnitt 10.4, Hintergründe, ausführlicher erklären.

Als Hintergrund für das gesamte HTML-Dokument wird die Grafik line.gif verwendet. Im Gültigkeitsbereich des body-Elements wurde zusätzlich die Grafik checker.gif eingebunden (siehe Abbildung 4.2). Während die line.gif-Grafik keine transparente Palettenfarbe enthält, ist in der checker.gif-Grafik die Transparenz auf die Farbe Weiß gesetzt worden.

In Abbildung 4.3 können Sie nun die als Hintergrundgrafik des HTML-Dokuments verwendete line.gif-Grafik durch die eigentlich weiß darzustellenden Flächen durchscheinen sehen, während sie von den schwarzen Flächen überdeckt wird.

Darstellung des Listings 4.2 Abbildung 4.3: Darstellung des Listings 4.2

Sie müssen also in HTML nicht explizit festlegen, dass eine GIF-Grafik mit einer transparenten Farbe auch dementsprechend transparent dargestellt werden soll. Auf der anderen Seite können Sie dies auch nicht unterbinden.

# Blind- oder Fake-GIFs

Manchmal kommt es vor, dass Sie Grafiken oder verschiedene Elemente pixelgenau ausrichten möchten. Mit den normalen HTML-Tags lässt sich dies aber nur sehr schwer beeinflussen und höchstens mit Tabellen halbwegs bewerkstelligen. Mittels GIF-Grafiken lässt sich dieses Problem aber lösen: durch so genannte Blind- oder Fake-GIFs. Solche Grafiken sind in der Regel 10 x 10 Pixel groß und besitzen nur eine Farbe, z. B. Weiß. Diese Farbe wurde zusätzlich als transparent deklariert. Wenn Sie eine solche Grafik also in Ihr HTML-Dokument einbinden, ist diese nicht zu sehen, aber vorhanden. Durch die Attribute width und height können Sie das Blind-GIF nun in seiner Breite und Höhe beliebig verändern und somit einen pixelgenauen Abstand zwischen zwei Elementen erzeugen.

Sie finden ein solches GIF auf der beiliegenden CD‑ROM im Verzeichnis x:\misc\blind.gif.

# Hintergründe

Bereits im vorangegangenen Kapitel haben Sie das Attribut background kennen gelernt. Dieses Attribut darf im body-Start-Tag notiert werden und setzt für das gesamte HTML-Dokument eine Hintergrundgrafik. Dabei steht es Ihnen frei, welches Grafik-Format Sie verwenden. Hauptsache, es wird von allen gängigen Browsern unterstützt (das beschränkt die Auswahl auf JPEG und GIF). Dabei ist die Abmessung der Grafik egal, da sie gekachelt wird, also so oft horizontal und vertikal wiederholt wird, bis das gesamte Browserfenster ausgefüllt ist. Die Notation lautet:

<body background="bild.gif">

Auch bei diesem Attribut gelten die gleichen Regeln wie für das src-Attribut des img-Elements. Verzichten Sie auf Sonderzeichen im Dateinamen, schreiben Sie alles klein, und denken Sie daran, die Dateinamenerweiterung zusätzlich zum Dateinamen zu notieren.

Die Grafik aus Abbildung 140.2, line.gif, ist im Original nur 100 × 20 Pixel groß. Jedoch ist in Abbildung 4.3 der gesamte Hintergrund mit dieser Grafik gekachelt worden. Dadurch lassen sich teilweise sehr eindrucksvolle Effekte erzielen, wie z. B. ein Farbverlauf, der nur mit der Angabe einer Hintergrundfarbe nicht möglich wäre.

Außerdem lassen sich so auch animierte Hintergründe zaubern, und zwar durch animierte GIFs als Hintergrundbild. Dies sollte jedoch nur sehr selten eingesetzt werden, da eine übertriebene Animation im Hintergrund, die zugleich auch noch gekachelt wird, ein HTML-Dokument unleserlich machen kann.

Sie sollten aber immer noch eine alternative Farbe für den Hintergrund mittels bgcolor setzen, da es vorkommen kann, dass die Grafik einmal nicht zur Verfügung steht oder der Benutzer Grafiken deaktiviert hat.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Hintergrundgrafiken in HTML //-->
<html>
  <head>
    <title>Listing 4.3</title>
  </head>
  <body bgcolor="#CCCCCC" background="marble.jpg">
    <h1>Ein Hintergrund im Marmor-Stil</h1>
  </body>
</html>

Listing 4.3: Marmor-Hintergrundgrafik in HTML

Listing 4.3 im Internet Explorer 6.0 Abbildung 4.4: Listing 4.3 im Internet Explorer 6.0

# Flash-Filme

Neben Grafiken ist es auch möglich, Multimedia-Objekte (wie beispielsweise Videos, Sounds, SVG-Grafiken oder Ähnliches) in ein HTML-Dokument einzubinden. Ermöglicht wird dies über so genannte Plug-ins, die Erweiterungen zum verwendeten Browser darstellen und in der Regel von Dritt- bzw. Fremdanbietern stammen. Eines der bekanntesten Browser-Plug-ins ist der Flash-Player von Macromedia. Er ermöglicht das Darstellen und Wiedergeben eines Flash-Films innerhalb eines HTML-Dokuments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- ShockwaveFlash-Beispiel //-->
<html>
  <head>
    <title>Listing 4.4</title>
  </head>
  <body>
    <h1 align="center">Eine funktionierende Taschenuhr</h1>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
        width="250" height="250" align="center">
      <param name="movie" value="clock.swf">
    </object>
  </body>
</html>

Listing 4.4: Beispiel für ein in HTML eingebundenes Flash-Movie

ShockwaveFlash-Film im Internet Explorer 6.0 Abbildung 4.5: ShockwaveFlash-Film im Internet Explorer 6.0

Das HTML-Element zum Einbinden verschiedener Datenquellen heißt object (dt. Objekt). Dieses Element verfügt über die verschiedensten Attribute. Für Flash-Filme sind die wichtigsten Attribute classid, codebase und natürlich width, align und height.

  • classid
    Jedes Browser-Plug-in verfügt über eine so genannte ClassID (Klassenidentifikation), durch die das Plug-in eindeutig zu identifizieren ist. Für Flash-Filme lautet diese immer D27CDB6E-AE6D-11cf-96B8–444553540000 und wird mit dem Präfix clsid: als Parameter an classid übergeben.
  • codebase
    Sollte das benötigte Plug-in auf dem Rechner des Benutzers nicht installiert sein, kann eine Internetadresse angegeben werden, damit das Plug-in automatisch installiert werden kann (natürlich erst durch Bestätigung durch den Benutzer). Die entsprechende Internetadresse für Shockwave-Flash finden Sie in Listing 4.4.
  • width
    Es bestimmt die Darstellungsbreite des Films im HTML-Dokument. Sowohl Pixel- als auch Prozentangaben sind erlaubt.
  • height
    Es bestimmt die Darstellungshöhe des Films im HTML-Dokument. Sowohl Pixel- als auch Prozentangaben sind erlaubt.
  • align
    Es bestimmt die Ausrichtung des Films im HTML-Dokument: left (linksbündig), center (zentriert) und right (rechtsbündig).

Die eigentliche Flash-Datei, die eingebunden werden soll, wird mit dem param-Element festgelegt. Dieses Element kennt nur eine feste Schreibweise:

<param name="[Parameter]" value="[Wert]">

Für Flash müssen Sie den Parameter movie und als Wert den Dateinamen angeben (clock.swf).

Da ältere Netscape-Browser das object-Element nicht richtig interpretieren und oft gar nichts anzeigen, ist es sinnvoll, zusätzlich noch das embed-Element im Gültigkeitsbereich des object-Elements zu notieren, auch wenn es nicht zum offiziellen HTML-Standard gehört (und auch nie gehören wird).

<object ...>
  ...  
  <embed src="clock.swf" width="250" height="250" align="center"
    type="application/x-schockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
  ...  
</object>

Zwei weitere interessante Parameter für Flash-Filme sind quality und bgcolor. Mit quality können Sie die Darstellungsqualität des Films in drei Stufen beeinflussen: low (niedrig), medium (mittel) und high (hoch). Den Hintergrund des Flash-Films können Sie mit bgcolor anpassen. Die Farbe müssen Sie als Hex-Tripel-Wert angeben.

<param name="quality" value="high">
<param name="bgcolor" value="#003366">

# JavaApplets

Ein weiteres typisches Plug-in sind JavaApplets. Dies sind kleine Programme in der Sprache Java. Die Implementation von JavaApplets kann auf zwei Wegen erfolgen: dem alten und dem neuen.

# Das applet-Element

Das alte und gängigste Verfahren ist die Verwendung des applet-Elements. Dies ist die ursprünglich von Netscape eingeführte Variante und wurde dann in den HTML 3.2-Standard übernommen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- JavaApplet-Beispiel mit applet //-->
<html>
  <head>
    <title>Listing 4.5</title>
  </head>
  <body bgcolor="#CCCCCC">
    <h1 align="center">Ein Java-Applet</h1>
    <applet code="hwww.class" width="250" height="250" align="center">
    </applet>
  </body>
</html>

Listing 4.5: JavaApplet in HTML mit dem applet-Element

Über das Attribut code wird das darzustellende Applet angegeben. In diesem Fall ist das HelloWorldWideWeb.class.

Das JavaApplet muss als .class-Datei vorliegen (d. h., kompiliert worden sein), damit der Browser es entsprechend darstellen kann.

Mit den Attributen width und height werden die Abmessungen der Darstellung des Applets im HTML-Dokument beeinflusst. Dabei sind sowohl prozentuale als auch Pixelangaben erlaubt. Über das align-Attribut lässt sich die horizontale Ausrichtung festlegen. Erlaubt sind left, center und right.

JavaApplet im Internet Explorer 6.0 Abbildung 4.6: JavaApplet im Internet Explorer 6.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- JavaApplet-Beispiel mit applet //-->
<html>
  <head>
    <title>Listing 4.6</title>
  </head>
  <body bgcolor="#CCCCCC">
    <h1 align="center">Ein Java-Applet</h1>
    <applet code="parameter.class" width="250" height="250" align="center">
      <param name="text1" value="Text 1">
      <param name="text2" value="Text 2">
      <param name="text3" value="Text 3">
    </applet>
  </body>
</html>

Listing 4.6: JavaApplet mit Parametern

An ein JavaApplet lassen sich auch Parameter übergeben. Dafür wird das param-Element verwendet. Im Attribut name wird der Bezeichner des Parameters angegeben, und der zu übergebende Wert wird im value-Attribut festgelegt.

# Das object-Element

Der andere Weg, ein JavaApplet einzubinden, führt über das object-Element. Dabei ist der syntaktische Grundaufbau der Implementation dem eines Flash-Movies sehr ähnlich.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- JavaApplet-Beispiel mit object //-->
<html>
  <head>
    <title>Listing 4.7</title>
  </head>
  <body bgcolor="#CCCCCC">
    <h1 align="center">Ein Java-Applet mit object-Element</h1>
    <object classid="java:hwww.class" codetype="application/java-vm" width="250" height="250"></object>
  </body>
</html>

Listing 4.7: JavaApplet mit object-Element

Das JavaApplet wird im Attribut classid als Parameter genannt, wobei dem Pfad und dem Dateinamen java: voranzusetzen ist. Im Attribut codetype wird der Typ der einzubindenden (Mini-)Applikation angegeben. Für JavaApplets sind die Angaben application/java und application/java-vm üblich.

Natürlich können Sie auch einem mittels object-Element implementierten JavaApplet Parameter übergeben. Dafür wird ebenfalls das param-Element verwendet, und es gelten die gleichen Regeln.

<object classid="java:hwww.class" codetype="application/java-vm" width="250" height="250">
  <param name="text1" value="wert1">
  <param name="textn" value="wertn">
</object>

# Grafiken mit dem object-Element einbinden

Wie bereits erwähnt wurde, kann man mit dem object-Element fast jeden Datentyp in einem HTML-Dokument darstellen. Zwar unterstützt noch nicht jeder Browser (IE ab Version 5.x und Netscape ab Version 6.x) dieses Element, vom W3C wird es aber stark forciert. Auch Grafiken lassen sich natürlich durch object in ein HTML-Dokument einbinden. Die grundsätzliche Notation sieht wie folgt aus:

<object data="grafik" type="grafik-typ">Alternative  
</object>

Alle drei bekannten Grafikformate (GIF, JPEG und PNG) sind erlaubt. Die Grafikdatei wird im Attribut data notiert (es verhält sich äquivalent zum src-Attribut des img-Elements), und der Grafiktyp wird im Attribut type angegeben.

  • image/gif
    Grafikdateien des Typs GIF
  • image/jpeg
    Grafikdateien des Typs JPEG
  • image/png
    Grafikdateien des Typs PNG

Die Angaben für den Typ nennen sich MIME-Typen. Erst durch sie wird es möglich, jeden beliebigen Datentyp darzustellen. Im Anhang finden Sie eine vollständige Liste dieser MIME-Typen.

Im Gültigkeitsbereich des Elements kann eine Alternative notiert werden, falls der Benutzer in seinem Browser Grafiken deaktiviert hat. Dies ist in den meisten Fällen ein Text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Grafiken mit object-Element //-->
<html>
  <head>
    <title>Listing 4.8</title>
  </head>
  <body>
    <h1 align="center">Eine Grafik mit object-Element</h1>
    <object data="statue-of-liberty.jpg" type="image/jpeg">Freiheitsstatue</object>
  </body>
</html>

Listing 4.8: Eine Grafik mit object-Element eingebunden

Im Hintergrund ist die Freiheitsstatue als Grafik mit dem object‑Element im Netscape 6 eingebunden worden, im Vordergrund ist ein Aussschnitt aus der Darstellung im Netscape 6 mit deaktivierten Grafiken zu sehen. Abbildung 4.7: Im Hintergrund ist die Freiheitsstatue als Grafik mit dem object‑Element im Netscape 6 eingebunden worden, im Vordergrund ist ein Aussschnitt aus der Darstellung im Netscape 6 mit deaktivierten Grafiken zu sehen.

Neben den Attributen width und height, mit denen die Darstellungsbreite und -höhe festgelegt werden können, lässt sich mit dem Attribut align die Ausrichtung des umgebenden Textes beeinflussen. Neben den Standardparametern left, center und right gibt es einige weitere Parameter.

Parameter Übersetzung Erklärung
top oben Der Text wird obenbündig zum Objekt ausgerichtet.
middle mittig Der Text wird mittig zum Objekt ausgerichtet.
bottom unten Der Text wird unterbündig zum Objekt ausgerichtet.

Tabelle 4.1: Mögliche Parameter für das Attribut align

Diese drei Parameter sind auch für alle anderen Datentypen gültig, die mit dem object-Element referenziert wurden (also auch JavaApplets und Flash-Movies).

# Zusammenfassung

  • Grafiken können nicht nur mit dem img-Element, sondern auch mit Hilfe des object-Elements in ein HTML-Dokument eingebettet werden. Da jedoch noch nicht jeder Browser das object-Element vollständig unterstützt, sollte das img-Element verwendet werden.
  • Grafiken lassen sich mittels verschiedener Attribute in Höhe und Breite unterschiedlich ausrichten und außerdem mit einem Rahmen versehen.
  • Das GIF-Format wird für Grafiken mit wenig Farben und harten Farbübergängen verwendet, das JPG-Format für Fotos oder Grafiken mit vielen Farbverläufen, und das PNG-Format kann für beide Arten von Grafik verwendet werden.
  • Mit einer transparenten, 10 mal 10 Pixel großen GIF-Grafik können Sie Elemente auf pixel-genau ausrichten.

# Fragen und Übungen

  1. Binden Sie eine Grafik in ein HTML-Dokument ein. Die Grafik soll 50 Prozent von der zur Verfügung stehenden Breite verwenden und 50 Pixel hoch dargestellt werden.
  2. Fügen Sie der Grafik einen 3 Pixel breiten Rahmen hinzu.
  3. Welche drei Grafikformate sind die gängigsten im Internet?
  4. Was sind die Unterschiede zwischen diesen drei Grafikformaten?
  5. Worin besteht der Unterschied bei der Referenzierung eines Flash-Movies und eines JavaApplets mit dem object-Element?