Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 6 - Grafik und Flash

Professionelle Websites: Basiswissen HTML und CSS Teil 6 - Grafik und Flash

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.
 


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


9 Grafik, Flash und Multimedia

HTML ist als Auszeichnungssprache für Text mit Hypertext-Funktionalität konzipiert. Es bietet keine eigene Auszeichnungsmöglichkeit für grafische Elemente an. Grafiken können ebenso wie beliebige andere multimediale Elemente über entsprechende Schnittstellen- Elemente referenziert werden. Moderne grafische Browser integrieren die referenzierten Inhalte optisch an der Stelle, an der das jeweilige Element notiert ist.
Dieses Konzept drückt allerdings auch eine Gewichtung aus: Grafik und Multimedia sind im W3C- Konzept von HTML optionale, aber keine prägende Features. Deshalb haben immer noch zahlreiche Webdesigner, die eine grafische Ausbildung haben und »grafisch denken«, ihre Probleme mit dem textorientierten Strukturgedanken von HTML. Die Folge sind meist Webseiten, die nur wenig, meist lieblos hingerotzten und fehlerhaften oder von WYSIWYG-Editoren generierten HTML-Code enthalten – und dieser besteht vorwiegend aus Grafik- und Flash-Referenzen. Denn das, was solche Webdesigner sich unter der »Message« oder dem »Feeling« vorstellen, die von Webseiten transportiert werden sollten, ist für sie nur über Grafiken und animierte Effekte realisierbar.

Über die Philosophie von HTML und die Berechtigung des Wunschs nach rein grafischen Webseiten lässt sich vermutlich endlos streiten. Wer sich jedoch auf HTML einlässt, sollte die text- bzw. hypertextorientierte Grundausrichtung dieser Markup-Sprache akzeptieren. Wer komplett grafisch denken will, dem bleibt die Möglichkeit, anstelle von HTML-Seiten gleich Flash-Movies auf seinen Webspace zu laden und gegebenenfalls den Webserver so zu konfigurieren, dass er z.B. auch Dateinamen wie index.swf als Default-Dateinamen erkennt und swf-Dateien mit einem entsprechenden HTTP-Header ausliefert. Der aufrufende Browser bekommt dann beim Aufruf nichts anderes als ein Flashmovie gesendet, welches er – so er denn über ein geeignetes Flash-Plug- in verfügt – im gesamten Anzeigefenster darstellen kann. Es spricht nichts gegen eine solche Radikallösung. Auch Tim Berners Lee, der Gründervater des Web, hat stets betont, dass das Web nicht auf bestimmte Dateiformate fixiert sei. HTML ist einfach eine Standardsprache für Webseiten, doch wenn Design-Vorstellungen zu stark mit deren Konzepten konfligieren, ist ein Komplettverzicht auf HTML allemal besser und sauberer als die zahlreichen Sprachvergewaltigungen, die man im Web findet.

9.1 Geeignete Grafikformate


Es gibt in HTML keine Vorschrift dafür, welches Format eine eingebundene Grafik haben sollte. Darüber, welche Formate angesagt sind, haben letztlich die grafischen Browser entschieden, und zwar einfach dadurch, welche Formate sie in der Lage sind, ohne Aufruf eines Fremdprogramms direkt anzuzeigen.
Dabei haben sich in den 90er Jahren die beiden Pixel- oder Rastergrafikformate GIF und JPEG etabliert. Beide Formate zeichneten sich dadurch aus, dass sie gut komprimieren konnten und dass sie – zumindest scheinbar – frei verwendbar waren. Beim GIF-Format erwies sich Letzteres allerdings als Trugschluss. Ende der 90er Jahre, als die ganze Welt das Ende der 60er Jahre entwickelte und zunächst vom Online-Dienst CompuServe benutzte, unscheinbare GIF-Format für Millionen von Webgrafiken nutzte, startete der Lizenzinhaber des von GIF benutzten Kompressionsalgorithmus plötzlich eine Kampagne, um die Pfründe abzustecken. Software, die in der Lage war, GIF-Grafiken anzuzeigen oder zu bearbeiten, sollte fortan Lizenzgebühren an den Lizenzgeber zahlen.
Aus diesem Schlamassel ging ein neues, lizenzfreies und offen dokumentiertes Format hervor, das vor allem als Alternative zum GIF-Format entwickelt wurde, zum Teil aber auch mit dem JPEG- ormat konkurriert: das PNG-Format. Von der »Szene« im Netz wird dieses neue Format, welches ebenso wie HTML und CSS vom W3-Konsortium spezifiziert wird, als das neue Universal- rafikformat gepriesen, und vor allem das GIF-Format gilt in solchen Kreisen mittlerweile als Igitt- Format.

Um sich ein objektiveres Urteil zu bilden, sollte sich jeder Webdesigner mit den Grundeigenschaften und Unterschieden der drei genannten Formate vertraut machen. Die nachfolgende Tabelle listet wichtige Faktoren und Unterschiede auf:

Bilder

Tabelle 4.18: Wichtige Unterschiede zwischen den Formaten PNG, JPEG und GIF

Die meisten heute verbreiteten Grafikeditoren und Bildbearbeitungsprogramme für Pixelgrafiken unterstützen beim Abspeichern alle drei Formate. Achten Sie bei der Wahl eines Grafikprogramms aber auch darauf, welche Optionen es beim Abspeichern in diesen Formaten anbietet. Denn viele letztlich ausschlaggebende Faktoren wie die Kompressionsoptionen, Interlacing und andere werden nicht während der Bildbearbeitung, sondern erst beim Abspeichern eingestellt.

Speichern Sie wichtige Grafiken auf jeden Fall auch in einem geeigneten Originalformat. Wenn Sie beispielsweise mit Photoshop oder Paint Shop Pro arbeiten, sollten Sie z.B. Grafiken, die auf der Arbeit mit Layern basieren, stets auch im programmeigenen Format als Sicherungskopie speichern, damit Sie die Grafik zu einem späteren Zeitpunkt wieder optimal bearbeiten können.

9.2 Bildbearbeitung in Hinblick auf Webseiten

Dies ist kein Buch über Bildbearbeitung – das Thema kann allein ein Buch gleichen Umfangs füllen. Dennoch sollte jeder, der Websites erstellt und darin Grafiken einbindet, ein paar grundsätzliche Begriffe aus der Bildbearbeitung kennen, die vor allem in Hinblick auf Webdesign von Bedeutung sind.

Vektor- und Raster- bzw. Pixelgrafiken
Die Computergrafik kennt zwei grundsätzliche Modelle, um Grafiken zu beschreiben. Die eine teilt den »canvas«, also die Bildfläche, in lauter Bildpunkte ein und beschreibt, welcher Bildpunkt welche Farbe haben soll. In der Drucktechnik sind dabei Maße wie »dots per inch«, also Bildpunkte pro Inch, verbreitet und die Bildfläche wird als Raster aus Bildpunkten repräsentiert. Daher die Bezeichnung »Rastergrafik«. Die Längen- und Breitenausmaße einer solchen Grafik ergeben sich aus der Punktdichte und der Anzahl vorhandener Bildpunkte. Bei Grafiken, deren Zweck vor allem die Anzeige am Bildschirm ist, entfällt das Thema Punktdichte. Denn hier ist das Maß der Bildpunkte ein Pixel. Bei solchen Grafiken hat sich daher die Bezeichnung »Pixelgrafik« durchgesetzt. Dennoch verfolgen Pixel- und Rastergrafiken das gleiche Beschreibungsmodell.

Anders die Vektorgrafik – deren Beschreibung besteht aus Eigenschaften von Elementen wie Punkt, Linie, Rechteck, Kreis, Ellipse, Polygon und Text. Solche Elemente können Eigenschaften wie Farbe, Farbverlauf, Länge, Höhe, Dicke, Radius, Eckkoordinaten, Schriftart, Transparenzwert usw. besitzen. Aus der Beschreibung kann dann die Darstellung der Grafik »zur Laufzeit« und abhängig vom Ausgabemedium umgesetzt werden.
Raster- und Pixelgrafik eignet sich vorzugsweise für Fotos, während Vektorgrafik optimal für Illustrationen geeignet ist. Es gibt allerdings viele Zwischenbereiche. Firmenlogos, schriftzug- ominierte Werbebanner usw. werden heute als Pixelgrafik in HTML referenziert, obwohl sie vom Typ her meist besser als Vektorgrafik beschrieben werden könnten.
Bekannte Vektorgrafikprogramme sind CorelDRAW oder Adobe Illustrator. Führende Raster- /Pixelprogramme sind Adobe Photoshop oder Jasc Paintshop Pro. Einige Programme, wie Ulead PhotoImpact, bieten im Editiermodus auch Mischformen an.

Farbmodelle, Farbtiefe, Truecolor, Graustufen und Paletten
In den Frühzeiten der Computerbildschirme war Farbe ein Luxus. Seit einigen Jahren jedoch gehören Truecolor-fähige Bildschirme und Grafikkarten zur Grundausstattung jedes PCs. »Truecolor« ist dabei ein irreführender Begriff. Intern erhält auch bei Truecolor- Bildern jeder Bildpunkt eine bestimmte Farbe und die Anzahl möglicher Farben ist begrenzt. Die Grenze ist jedoch so hoch angesiedelt, z.B. bei 16,7 Millionen möglichen Farben, dass man nicht mehr von einer »Palette« bestimmter Farben sprechen kann. Die Auswahl einer Farbe erfolgt stattdessen direkt über die Dialogumsetzung eines Farbmodells.

Ein Farbmodell lernten Sie in Zusammenhang mit dem Definieren von Farben in CSS bereits kennen: das RGB-Modell. Dabei wird eine Farbe aus einer additiven Mischung der Grundfarben Rot, Grün und Blau bestimmt. Dieses Modell ist allerdings nicht unumstrit- ten. Vor allem Grafiker, die sich mit Druckgrafik auskennen, sind mit anderen Modellen vertrauter, etwa mit dem CMYK- odell. Dabei werden Farben als subtraktive Mischung der so genannten Prozessfarben Zyan, Magenta, Gelb und Schwarz definiert. Gute Grafikprogramme bieten beide Modelle zur Bestimmung von Farben an und sind auch in der Lage, Grafiken vom einen Farbmodell ins andere zu konvertieren.

Mit Paletten wird gearbeitet, wenn die Farbtiefe sehr begrenzt ist. Die Farbtiefe errechnet sich daraus, wie viele Byte zum Speichern oder Darstellen des Farbwerts eines Bildpunkts spendiert werden. Bei einem Byte pro Bildpunkt lassen sich 256 verschiedene Farben speichern, da ein Byte, bestehend aus 8 Bit, nicht mehr als 28 = 256 Zustände einnehmen kann. Das GIF-Format kennt nur diese Form der Speicherung. Daher kann eine GIF-Grafik immer nur aus maximal 256 unterschiedlichen Farben bestehen. Welchen Farbwert jede dieser 256 Farben hat, ist pro Bild frei festlegbar. Eben deshalb spricht man von der Palette, die ein Bild verwendet.
Graustufen sind ein Spezialfall, der Schwarzweißbilder beschreibt. Graustufen sind wie der Name schon sagt definierte Grauwerte irgendwo zwischen Schwarz und Weiß. Die Anzahl der Graustufen kann in einer Graustufenpalette dargestellt werden. Die meisten Pixel-Grafikformate unterstützen Graustufen im Rahmen des gewählten Farbmodells und der verfügbaren Farbtiefe. Mit dem RGB- Modell lassen sich letztlich nur 256 Graustufen beschreiben, da bei Graustufen alle drei Farbwerte gleich sein müssen und pro Farbkanal maximal 256 Werte möglich sind.

Transparenz, Layer-Technik und Alpha-Filter
Die Eigenschaft des GIF-Formats, eine Palettenfarbe als transparent zu definieren, erfreut sich seit den Anfängen des Webdesigns großer Beliebtheit. Dieses Feature erlaubt es, Grafiken auf unterschiedlichen farbigen Flächen oder Wallpapers zu platzieren, ohne die Grafik selbst anpassen zu müssen.

Bilder

Abbildung 4.65: GIF-Grafik mit Einfarben-Transparenz auf verschiedenen Hintergründen

Die Transparenzfunktion des GIF-Formats ist eigentlich nur ein Spezialfall von Transparenz, die jedoch gerade für Webseiten recht interessant ist. Im abgebildeten Beispiel benutzt die Grafik eine 256-Graustufenpalette. Die Farbe, welche die Hintergrundfarbe des Bilds darstellt, wurde als transparent definiert. Wie die Abbildung zeigt, kann die Grafik dank dieser Transparenz auf verschiedenen Untergründen angezeigt werden.

Anti-Aliasing
Manche Grafiken im Web stellen nichts weiter als einen Schriftzug dar, der ebenso gut mithilfe von CSS realisiert werden könnte. Doch abgesehen von dem Problem der individuellen Schriftarten, die bei Anwendern nicht vorausgesetzt werden können, gibt es noch einen anderen Grund: Grafiken ermöglichen das Arbeiten mit dem Anti-Aliasing-Effekt. Dadurch entstehen abgerundete, weiche, angenehme Kanten, was auffällige Schriftzüge professioneller und eleganter wirken lässt.

Bilder

Abbildung 4.66: Schriftzug mit Anti-Aliasing (unten: Ausschnittvergrößerung)

Beim Anti-Aliasing werden bei schrägen Strichen oder Rundungen die Treppeneffekte abgeschwächt, indem abgeschwächte Farbtöne hinzugefügt werden. In der Normalansicht wirken schräge Kanten dadurch sauberer.

Dithering
Wenn in einer Grafik die Farbtiefe reduziert wird, muss ein Algorithmus entscheiden, wie die Reduktion arbeiten soll. Das kann beispielsweise auch dann der Fall sein, wenn Sie auf einer Webseite eine Truecolor-Grafik einbinden, diese Webseite jedoch auf einem System angezeigt werden soll, das nur 256 Farben gleichzeitig anzeigen kann. Das könnten ältere Rechner und Bildschirme sein, aber auch modernere, webfähige Kleingeräte wie Handhelds oder Tablet-PCs. Der Webbrowser wird in solchen Fällen in der Regel den so genannten Dithering-Algorithmus benutzen. Dabei werden feine Farbverläufe durch Pixelmuster ersetzt.

Interlacing
Grafiken, die eine gewisse Übertragungs- und Ladezeit benötigen, können durch die Interlacing- echnik schneller angezeigt werden. Dabei wird die Grafikanzeige schichtweise aufgebaut. Für Webseitenbesucher entsteht dadurch bei grafiklastigen Seiten ein subjektiv schnellerer Seitenaufbau. Da alle drei Webgrafikformate das Interlacing unterstützen, ist sehr zu empfehlen, beim Abspeichern von Grafiken diese Option einzuschalten.

Mehrbildertechnik/Animation
Manche Grafikformate erlauben es, mehrere Bilder in einer Grafik zu speichern. So auch das GIF- ormat. Dessen Besonderheit besteht jedoch zusätzlich darin, dass auf einer Zeitschiene festgelegt werden kann, wie diese Einzelbilder angezeigt werden sollen. Auf diese Weise werden einfache Animationen möglich, auch in Form von Endlosschleifen. Als die Browser begannen, diese Spezialität zu unterstützen, sorgten ganze Heerscharen verspielter Webdesigner dafür, dass man alsbald kaum noch eine Seite aufrufen konnte, auf der es nicht wie wild blinkte und wackelte.

Mittlerweile sind die so genannten Zappelgrafiken in professionellen Kreisen verpönt. Zum Einsatz kommen sie vor allem noch bei Werbebannern. Es gibt spezielle Grafikprogramme zum Bearbeiten animierter GIF-Grafiken. Einige populäre Grafikprogramme enthalten auch Assistenten für solche Grafiken.

Webgerechte Grafiken
Empfehlungen für webgerechte Grafiken gibt es viele. Einige Hardliner gehen so weit zu fordern, dass webgerechte Grafiken maximal 216 Palettenfarben nutzen, und zwar nur solche, die als websichere Farben gelten. Mit solch drastischen Einschränkungen allerdings sind etwa Fotos kaum befriedigend darstellbar. Folgende Kriterien sollte eine für den Einsatz im Web gedachte Grafik jedoch erfüllen:
- Die Dateigröße der Grafik sollte so klein wie möglich sein.
- Die Grafik sollte sich so schnell wie möglich aufbauen.
- Die Grafik sollte auch auf kleineren Bildschirmen ohne viel Scrollen zu sehen sein.
- Die Grafik sollte den Inhalt einer Webseite ergänzen, nicht ersetzen.
- Die Grafik sollte mit dem Webseitenlayout harmonieren.

Testen Sie beim Speichern einer Grafik verschiedene Qualitätsstufen (Farbtiefe, Art der Farbreduktion, Kompressionsfaktor usw.) und achten Sie auf die dabei entstehenden Dateigrößen. Am Ende steht meist ein Kompromiss aus Grafikqualität und Dateigröße. Grafiken mit mehr als 100 Kbyte sind auch im DSL-Zeitalter nur akzeptabel, wenn sie inhaltstragend sind, z.B. Fotos. Reine Dekorationsgrafiken, Logos, Werbebanner und dergleichen sollten auf jeden Fall deutlich kleiner sein.

Link zum Thema Bildbearbeitung:

Digitale Bildbearbeitung:
http://www.ralphaltmann.de/bildbearbeitung/
Bildbearbeitung elektronisch/digital:
http://www.fotocommunity.de/info/
Bildbearbeitung_elektronisch/digital


9.3 Grafikreferenzen

Grundsätzlich wird eine Grafik in HTML wie folgt eingebunden:

<img src="bild.png" alt="Bildkurzbeschreibung">

Das img-Element, ein alleinstehendes Element ohne End-Tag (XML-Notation: <img.../>), dient zur Referenzierung einer Grafik. Im obligatorischen src-Attribut wird der URI der gewünschten Grafik angegeben. Es kann sich um eine absolute Internetadresse oder um eine lokal adressierte Grafikdatei handeln.
Das alt-Attribut ist ebenso obligatorisch wie das src-Attribut. Da Grafiken aus verschiedensten Gründen nicht angezeigt werden können – z.B. weil der Anwender die Grafikanzeige in seinem Browser aus Performance-Gründen deaktiviert hat oder weil er die Übertragung der Daten zur Webseite abgebrochen hat, sobald der gewünschte Text lesbar war, oder weil er einen Browser in einer Textmodus-Umgebung wie einer Unix-Shell benutzt. In all diesen Fällen wird anstelle der Grafik der Alternativtext angezeigt, den Sie dem alt-Attribut zuweisen.

Das alt-Attribut ist nicht zu verwechseln mit dem title-Attribut, obwohl manche Browser das alt- ttribut beim Überfahren der Grafik mit der Maus ebenso wie das title-Attribut als Tooltipp-Fenster einblenden. Um einen solchen Effekt gewollt in allen modernen Browsern zu erzielen, sollten Sie das title-Attribut zusätzlich zum alt-Attribut notieren.

In der Regel sollten Sie dem Browser auch noch mehr Daten zur Grafik mitteilen. Dazu gehören vor allem Angaben zu Höhe, Breite und Rahmen, aber auch zum Abstand zu Nachbarelementen, zur Ausrichtung usw. All diese Eigenschaften können Sie mithilfe von CSS zuweisen.

Ein Beispiel:
<img src="estland.jpg" style="width:300px; height:240px;
border:none; float:left; margin-right:20px;
margin-bottom:20px" alt="Typisches Motiv in Estland">

Weil die Angabe von Breite und Höhe eine besonders wichtige Information für den Browser darstellt – er kann dann den Raum für die Grafik beim Seitenaufbau bereits reservieren, noch bevor die Daten der Grafik geladen sind –, sind auch im Strict-Standard die beiden HTML-Attribute width= und height= im img-Element erlaubt. Als Wert wird die Pixelgröße ohne Maßeinheit zugewiesen. Da jedoch meistens noch andere Eigenschaften zu notieren sind, die CSS erfordern, ist es zweckmäßig, auch die Angaben zu Breite und Höhe mithilfe der dafür vorgesehenen CSS- Eigenschaften width und height zu notieren.

Bilder

Abbildung 4.67: Grafik mit CSS-Angaben

Das Beispiel weiter oben zeigt, wie eine Grafik mithilfe von CSS im Textfluss ansprechend positioniert wird. Die Angabe float:left bewirkt, dass nachfolgender Inhalt rechts um die Grafik herumfließt. Damit der Inhalt nicht unmittelbar an der Grafik klebt, wird mithilfe der Eigenschaften margin-right und margin-bottom für die betroffenen Seiten ein Sicherheitsabstand von je 20 Pixel definiert. Ein Rahmen wird mit border:none explizit unterdrückt.

Das img-Element zählt zu den Inline-Elementen. Eine Grafik wird also, wenn Sie nichts anderes festlegen, mitten im umgebenden Fließtext angezeigt. Nützlich ist dies vor allem bei Kleingrafiken mit Icon- oder Symbolcharakter. Viele Websites benutzen solche Grafiken beispielsweise, um Hyperlinks optisch zu typisieren.

Ein Beispiel:
<p>
Sie können den Jahresbericht <img src="doc.gif"
style="width:14px; height:12px; border:none"
alt="Webseite"><a href="jb/index.htm">als Webseite</a>
oder als <img src="pdf.gif" style="width:14px; height:12px;
border:none" alt="PDF"><a href="jb/jb.pdf"
type="application/pdf">als PDF-Dokument</a> einsehen.
</p>

Um eine Grafik aus dem Inline-Kontext zu lösen, müssen Sie das img-Element entweder in ein Block-Element einbinden, z.B. durch <div><img...></div>, oder dem Element mittels CSS explizit Block-Charakter zuweisen (<img ... style="display:block">).

Bilder

Abbildung 4.68: Kleine Symbolgrafiken im Text

Das img-Element kann natürlich auch in Tabellenzellen, in absolut positionierten Elementen usw. vorkommen. Dies erlaubt zusätzliche Möglichkeiten der Anordnung der Grafik und der Zuordnung von Grafik und anderen Inhalten.

9.4 Image-Maps (verweis-sensitive Grafiken)

Anklickbare Grafiken sind auf fast jeder Webseite zu finden. Dies sind einfach Grafiken, die in einen Hyperlink eingebettet und dort anstelle eines Verweistextes notiert werden. Das Schema lautet <a href=....><img></a>. Wichtig ist in diesem Fall zu wissen, dass Browser dem img-Element in diesem Fall, sofern Sie nichts anderes angeben, einen Rahmen in der Farbe für Verweise verpassen. Durch <img ... style="border:none"> können Sie den Rahmen unterdrücken. Bedenken Sie jedoch, dass der Anwender dadurch möglicherweise übersieht, dass die Grafik ein Link ist.
Imagemaps oder verweis-sensitive Grafiken gehen noch einen Schritt weiter als anklickbare Grafiken. Ein Imagemap ist eine Grafik mit anklickbaren Bereichen, wobei jeder Bereich sein eigenes Linkziel haben kann.

Ein Beispiel soll dies demonstrieren. Dabei soll ein vollständig grafisches Menü die Navigation auf einer Startseite ermöglichen. Die Grafik sieht folgendermaßen aus:

Bilder

Abbildung 4.69: Grafik für grafische Navigation

Aus den sechs beschrifteten Ellipsen sollen bei der Anzeige im Browser sechs anklickbare Schaltflächen werden, die beim Anklicken zu entsprechenden Verweiszielen führen. Der HTML- ode dazu sieht folgendermaßen aus:

Bilder


Die Grafik selbst wird wie im unteren Teil des Quelltextausschnitts zu sehen wie üblich über das img-Element referenziert. Der Bezug zum Imagemap wird über das zusätzliche Attribut usemap= hergestellt. Dem Attribut wird der URI einer zugehörigen Map-Definition im gleichen Dokument zugewiesen. Der Wert wird also genauso notiert wie ein Link zu einem Anker innerhalb des Dokuments, mit führendem Gatterzeichen (#), gefolgt vom Ankernamen.

Der Anker, zu dem der Bezug führt, ist das map-Element, markiert durch <map> ... </ map>. Dieses Element kann irgendwo zwischen <body> und </body> notiert werden. In der Regel wird es jedoch an zentraler Stelle notiert, z.B. gleich hinter dem einleitenden <body>- Tag. Das map-Element dient als Behälter für Definitionen von verweis-sensitiven Flächen.
Das obligatorische name-Attribut im einleitenden <map>-Tag erzeugt den Anker, der bei usemap= anzugeben ist.
Die Definitionen der verweis-sensitiven Flächen werden durch <area>-Tags markiert. Diese haben in HTML kein End-Tag, müssen in XHTML also in der Form <area ... /> notiert werden.
Die verweis-sensitiven Flächen werden in diesem Tag durch die Attribute shape= und coords= festgelegt. Das shape-Attribut bezeichnet die Art der Fläche und das coords-Attribut die Pixelkoordinaten der Punkte, mit deren Hilfe sich die Fläche beschreiben lässt. Als Flächenformen stehen shape="rect" (Rechteck), shape="circle" (Kreis) und shape="poly" (Polygon, beliebiges Vieleck) zur Verfügung. Das Schema der Wertzuweisung an das coords-Attribut ist von der Angabe zum shape-Attribut abhängig.

Bilder

Tabelle 4.19: Schemata für area-Definitionen verweis-sensitiver Grafiken

Obwohl die zum Anklicken vorgesehenen Flächen in unserem Beispiel elliptisch sind, verwenden wir der Einfachheit halber shape="rect" zur Definition der Verweisflächen. Die Flächenform »Kreis« ist jedenfalls ungeeignet. Mithilfe der Flächenform »Polygon« und einer ganzen Kette von Eckpunkten könnten wir die Ellipsen zwar einigermaßen genau beschreiben, doch für den gewünschten Zweck genügt es, gedachte Rechtecke um die Ellipsen als verweis-sensitiv zu kennzeichnen.

Im href-Attribut wird das Linkziel angegeben. Es kann sich um einen beliebigen URI handeln, also um absolute Internetadressen oder um lokal referenzierte Quellen. Ebenso wie im img-Element ist im area-Element die Angabe eines alt-Attributs Pflicht. Der Grund leuchtet ein: Wenn die Grafik nicht angezeigt werden kann, wären auch die Links überhaupt nicht visualisierbar. Das alt-Attribut ermöglicht es dem Browser, anstelle der fehlenden grafischen Links Textlinks mit den alt-Texten als Verweistexten anzuzeigen. Leider machen die meisten Browser keinen Gebrauch davon.

Das title-Attribut haben wir in unserem Beispiel spendiert, damit dem Anwender beim Überfahren der verweis-sensitiven Flächen zusätzlich ein Tooltipp-Fenster angezeigt wird.

9.5 Flash-Einbindung in HTML

Keine andere Technologie hat das Web in den letzten Jahren optisch nachhaltiger geprägt als der Siegeszug von Flash. Egal ob für Online-Spiele, animierte Illustrationen, schicke Site- Navigation oder Startseiten-Trailer eingesetzt: Flash hat in all diesen und anderen Bereichen konkurrierende Techniken wie Java-Applets oder auch DHTML verdrängt. Grund genug, die standardkonforme Einbettung eines Flash-Movies in HTML zu behandeln.
Flash-Dateien werden in HTML über das object-Element eingebunden.

Ein Beispiel:
<object type="application/x-shockwave-flash"
data="/flash/intro.swf"
style="width:740px; height:380px">
<param name="movie" value="/flash/intro.swf">
<param name="quality" value="high">
Sie benötigen einen Flash-Player als Browser-Plugin.
Ein solches Plugin bekommen Sie auf
http://www.macromedia.com/software/flashplayer/
</object>

Möglicherweise sind Ihnen bereits wesentlich komplexere Quelltextkonstrukte zum Einbetten von Flash begegnet. Diese greifen beispielsweise zusätzlich auf das embed-Element zurück, ein nicht zum HTML-Standard gehörendes Element, das speziell Netscape 4.x bedienen soll. Das ganze HTML-Dokument wird dadurch syntaktisch invalid. Oder Sie haben im einleitenden <object>-Tag Attribute wie classid= und codebase= mit zum Teil merkwürdigen Wertzuweisungen gesehen.

Das oben vorgestellte, standardkonforme Quelltextkonstrukt ist jedoch in heutiger Zeit völlig ausreichend und funktioniert mit allen verbreiteten Browsern. Im einleitenden <object>-Tag sind dabei zwei Attribute wichtig: type= muss notiert werden, um den Browser über eine Mime-Type- ngabe darüber zu informieren, welche Art von Daten das Objekt enthält. Der Mime-Type für Flash lautet application/x-shockwave-flash. Das Attribut data= ist ebenfalls wichtig und muss notiert werden, obwohl die Dateiquelle des Flash-Movies in einem <param>-Tag innerhalb des object- lements nochmals referenziert wird. Anzugeben ist ein URI, also eine vollständige Internetadresse, oder eine lokale Referenz auf die swf-Datei oder die Datenquelle, welche den swf-Code sendet.

Ähnlich wie beim img-Element sind beim object-Element die HTML-Attribute width= und height= erlaubt, um dem Browser die Pixelausmaße des einzubettenden Objekts vorab mitzuteilen. Diese können aber wie im Beispielcode gezeigt ebenso in CSS-Form angegeben werden.

Als Elementinhalt von <object> ... </object> können unter anderem alleinstehende <param>-Tags notiert werden (bei XHTML beachten: <param .../>). Diese haben die obligatorischen Attribute name= und value=. Sie definieren Parameter, die an das aufgerufene Objekt übergeben werden. Bei Flash-Movies sollten auf jeden Fall die beiden im Beispiel gezeigten Parameter (name="movie" und name="quality") notiert werden. Beim movie-Parameter sollte als Wert nochmals der URI des Flash-Movies angegeben werden. Beim quality- Parameter empfiehlt sich die Standard- Wertzuweisung high.

Das object-Element kann als Elementinhalt außerdem Text und andere Block- oder Inline- Elemente enthalten. Diese werden angezeigt, falls das Objekt nicht angezeigt werden kann. Im obigen Beispiel haben wir etwas Text notiert, der einen Anwender, bei dem das Flash-Movie nicht angezeigt werden kann, über die Möglichkeit aufklärt, wie er ein Plug- In erwerben kann.

Ohne Flash-Plug-In können Flash-Movies nicht im Browser angezeigt werden. Die meisten Browser verfügen heute jedoch in der Standardinstallation bereits über ein entsprechendes Plug-In.

Zum Erstellen von Flash-Movies benötigen Sie eine Flash-Autorensoftware. Das Produkt, welches Flash-Erfinder Macromedia selbst anbietet, ist bestens geeignet, aber auch nicht unbedingt preiswert. Es gibt jedoch preiswerte oder kostenlose Drittanbieter-Alternativen.

Flash ohne HTML
Da Flash vektororientiert ist und sich damit problemlos skalieren lässt, kann es beispielsweise für Produktpräsentationen, Spiele und Ähnliches auch sinnvoll sein, das Flash- Movie selbst anstelle eines HTML-Dokuments mit eingebettetem Flash-Movie aufzurufen.
In einer vorgeschalteten Seite verlinken Sie dazu einfach die swf-Datei anstelle eines entsprechenden HTML-Dokuments, beispielsweise so:

<a href="produkt.swf" type="application/x-shockwave-flash">Produktpräsentation</a>
(Flash erforderlich!)

Rückverweise zur übrigen Site sind innerhalb von Flash möglich.

9.6 Java-Applets in HTML

Java-Applets sind mittlerweile seltener im Web als vor dem Aufkommen von Flash. Dafür werden Java-Applets häufiger für seriösere und anspruchsvollere Zwecke genutzt, wie etwa Online-Banking, Online-Brokering und Online-Learning.
HTML stellte zunächst ein separates applet-Element zum Einbinden von Java-Applets zur Verfügung. Heute gehört dieses Element noch zur Transitional-Variante von HTML 4.01. In der Strict-Variante ist es nicht mehr vorhanden und auch nicht mehr nötig. Das universeller konzipierte object-Element bietet stattdessen alles, was zum Einbinden von Java-Applets erforderlich ist. Da auch alle modernen Browser mit dieser Methode zurechtkommen, darf das applet-Element mittlerweile mit gutem Gewissen der Vergessenheit anheim fallen.

<object classid="java:Beispiel.class"
codetype="application/java-vm"
style="width:600px; height:400px">
Java erforderlich! Die Java-Runtime-Umgebung können Sie
von http://java.sun.com/ downloaden.
</object>

Das object-Element kennen Sie bereits vom Abschnitt über die Einbindung von Flash. Im Fall von Java-Applets müssen im einleitenden <object>-Tag jedoch andere Attribute notiert werden. Erforderlich sind die Attribute classid= und codetype=. Beim classid-Attribut weisen Sie als Wert die Zeichenfolge java:, gefolgt vom Namen der class-Datei des Java-Applets zu. Dabei darf nur der reine Dateiname angegeben werden, keine Internetadresse oder Adressierung eines anderen Verzeichnisses. Sollte sich das Applet nicht im gleichen Verzeichnis befinden wie das HTML- Dokument oder auf einem ganz anderen Hostrechner liegen, benötigen sie zusätzlich das Attribut codebase=. Diesem Attribut weisen Sie als Wert den URI des Verzeichnisses zu, in dem die class- Datei liegt, also beispielsweise codebase="../classes/".
Beim codetype-Attribut geben Sie den Mime-Type für den Objektcode des Java-Applets an. Dieser Mime-Type lautet standardmäßig application/java-vm.
Parameter, die dem Java-Applet beim Start übergeben werden sollen, können über <param>-Tags notiert werden. Einem Applet, das z.B. einen Wert zu einem Parameter namens init_value erwartet, kann etwa Folgendes mitgeteilt werden:

<object...>
<param name="init_value" value="3">
</object>

Link zu Java:

Startseite zur Java-Technologie:
http://java.sun.com/
Tutorial zum Erstellen von Java-Applets:
http://java.sun.com/docs/books/tutorial/applet/
Wikipedia-Artikel zu Java und Java-Applet:
http://de.wikipedia.org/wiki/Java_%28Programmiersprache%29
http://de.wikipedia.org/wiki/Java-Applet


9.7 SVG-Vektorgrafiken in HTML

Leider unterstützen selbst nach modernsten Kriterien entworfene Browser wie Firefox bis heute von Haus aus ausschließlich Pixelgrafikformate. Dabei ist Vektorgrafik für Anwendungsfälle wie Illustrationen, technische Zeichnungen, Logos, kunstvolle Schriftzüge usw. eindeutig besser geeignet als Pixelgrafik. In Verbindung mit Scriptsprachen ist auch die Darstellung von Animation und bewegten Abläufen möglich.

SVG (Scalable Vektor Graphics) ist ein in den letzten Jahren eigens für den Einsatz im Web entwickeltes Vektorgrafikformat. Die vektorgrafischen Informationen werden in XML-Form gespeichert. SVG ist also ein XML-Derivat. Es wird ebenso wie HTML und CSS vom W3- onsortium als offen dokumentierter Standard spezifiziert und weiterentwickelt. Führende Vektorgrafikprogramme wie CorelDRAW oder Adobe Illustrator sind längst in der Lage, Daten als SVG-Grafik zu exportieren.

Auch wenn SVG-Unterstützung der Browser noch lausig ist, so ist doch zu erwarten, dass sich die Situation noch verbessern wird, was sicherlich zu einer weiteren Verbreitung von SVG beitragen wird. In HTML können Sie eine SVG-Datei wie auch Flash und Java über das object-Element einbinden.

Ein Beispiel:
<object type="image/svg+xml" data="beispiel.svg"
style="width:350px; height:176px">
SVG-Viewer erforderlich! Auf
http://www.w3.org/Graphics/SVG/SVG-Implementations
erhalten Sie Informationen über SVG-Implementierungen.
</object>

Die SVG-Quelle wird im data-Attribut als URI referenziert. Das type-Attribut sollte unbedingt notiert werden und den Mime-Type image/svg+xml als Wert zugewiesen bekommen.
Wenn Sie XHTML statt HTML verwenden, sind Sie bei SVG übrigens nicht auf die Referenzierung angewiesen. In diesem Fall können Sie über die Modularisierungsphilosophie von XML den SVG- Code direkt in den Quelltext integrieren. Dazu wird das einleitende <html>-Tag wie folgt erweitert:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">

Es wird also zusätzlich zum Namensraum von XHTML derjenige von SVG deklariert. Der XML-Code des SVG-Dokuments kann nun an der gewünschten Stelle im Dokument wie im folgenden Minibeispiel integriert werden:

<svg:svg height="100px" width="100px">
<svg:rect x="0" y="0" width="100" height="100" fill="red" />
</svg:svg>

Bei jedem SVG-Tag muss dazu das Präfix svg: notiert werden, da HTML als Default- Namensraum definiert wurde. In der Browser-Praxis ist dies jedoch noch weitgehend Zukunftsmusik, da für eine korrekte Interpretation der XML-Parser des Browsers benötigt wird.

Link zum SVG-Format:

W3C-Recommendation zu SVG:
http://www.w3.org/TR/SVG/
SVG-Tutorial:
http://svg.tutorial.aptico.de/
Mozilla SVG Project:
http://www.mozilla.org/projects/svg/
Adobe SVG Zone:
http://www.adobe.com/svg/


9.8 Eingebettete Objekte aller Art

In den Abschnitten über Flash, Java und SVG haben wir gesehen, dass die Einbindung der Ressourcen stets über das universelle object-Element in HTML erfolgt. Dieses Element ist so universell, dass sich damit jede beliebige Ressource einbinden lässt. So ist es auch schon absehbar, dass das img-Element in neueren XHTML-Versionen verschwindet. Grafiken werden dann ebenfalls über das object-Element referenziert.

Das sieht beispielsweise so aus:
<object type="image/png" data="bild.png"
style="width:354px; height:314px"></object>

Auch eine nackte Textdatei lässt sich über dieses Element einbinden.

Ein Beispiel:
<object type="text/plain" data="e-mail-thomas-003.txt"
style="width:80%; height:300px;
overflow:scroll"></object>

Wichtig sind im Zweifelsfall stets die Attribute data= zum Referenzieren der Quelle und type= zur Angabe des Mime-Type. Mit dem style-Attribut lässt sich der Anzeigebereich anpassen. Im Beispiel der referenzierten Textdatei haben wir eine Anzeigegröße vorgegeben und mit overflow:scroll sichergestellt, dass der Text, sofern er mehr Platz einnimmt, vom Anwender gescrollt werden kann.

Typische, über das object-Element eingebundene Objekte sind auch Sounds und Video. In der Regel ist dazu jedoch eine Angabe zum classid-Attribut erforderlich, die ein bestimmtes Plug-In oder Abspielprogramm im Browser erzwingt, sowie die Angabe von <param>- Tags für Initialwerte. Für Standard-Software gibt es classid-Codes, die dem classid-Attribut zugewiesen werden können. Das folgende Beispiel bindet den Windows Media Player ein und übergibt ihm eine MP3-Datei zum Abspielen:

<object id="MediaPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type="application/x-oleobject" style="width:300px; height:200px">
<param name="src" value="beispiel.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
</object>

Das Beispiel funktioniert in dieser Form jedoch nur im MS Internet Explorer, da die Einbettung über ein ActiveX-Control realisiert wird, eine bei anderen Browsern verpönte, weil für Sicherheitslücken anfällige Technologie.
Zahlreiche andere Formate haben ihre eigene Syntax zum Einbetten. Dem Wildwuchs ist hier leider noch Tür und Tor geöffnet, da vernünftige Standards fehlen. Anbieter spezieller Techniken wie RealMedia (Audio- und Video-Streaming) und andere informieren auf ihren Seiten darüber, wie Sie solche Formate in HTML einbetten. In einigen Fällen sind zusätzlich Einstellungen oder Erweiterungen beim Webserver erforderlich.

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 17:04

Gute Tutorial leicht erklärt.

Portrait von devilmaster1987
  • 20.03.2011 - 20:40

Danke für das Tut, ausführlich geschrieben ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.02.2010 - 22:03

Genial und ausführlich erklährt!

Portrait von williamo
  • 21.08.2009 - 14:46

sehr gute serie ............

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.04.2008 - 20:12

sehr hilfreich!!! danke

Portrait von mmang
  • 26.03.2008 - 21:20

Gut, nice to see

Portrait von elster128
  • 26.03.2008 - 17:17

Vielen Dank für diese wunderbare Reihe. Ich habe sehr viel interessantes und neues gelernt, was ich ausprobieren werde.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.03.2008 - 15:04

super gut erklärt und sehr beschrieben alles!!! danke dafür!!!!

Portrait von JasminS
  • 26.03.2008 - 10:43

Ist sehr informativ und gibt mir Erkenntnisse über das Thema die ich nicht hatte.

Portrait von Sampiero
  • 26.03.2008 - 09:33

Sicher sehr spannend fuer Profis!

Portrait von skyflight1981
  • 26.03.2008 - 00:41

Und noch ein weiteres nützliches Tutorial aus der Reihe!

x
×
×