- Bilder, Grafiken und "Clickable Images" einbinden
Der Erfolg des Internets wäre ohne den Erfolg desGrafikformate
World Wide Web und der Erfolg des World Wide Web ohne die Möglichkeit, Bilder, Logos und Grafiken in HTML-Seiten einzubinden, wohl kaum denkbar.
1. Grafikformate
Um Bilder, Logos und Grafiken im World Wide Web verwenden zu können, müssen diese in bestimmten, stark komprimierten Grafikformaten vorliegen, weil die Browser nur dieses Format akzeptieren: GIF (Gaphics Interchange Format) und JPEG (Joint Photographic Experts Group).
Das GIF-Format wurde ursprünglich von die CompuServe entwickelt, um die Datenübertragung durch dieses komprimierte Format zu reduzieren. Mittlerweile ist dieses Format das in Datennetzen am häufigsten verwendete Grafikformat. Durch eine neuere Spezifizierung, GIF89a, ist es nun auch möglich, sogenannte Transparente GIFs zu erzeugen, bei denen eine bestimmte Farbe als Hintergrundgrundfarbe definiert wird, die dann auf jedem beliebig farbigen Hintergrund als transparent erscheint. Diese Möglichkeit steht bei JPEG noch nicht zur Verfügung, so daß man gezwungen ist, das GIF-Format zu verwenden, wenn man transparente Bilder in seinen WWW-Dokumenten verwenden will.
Das JPEG-Format wurde von der Joint Photographic Experts Group entwickelt und dient ebenso dazu, das Datenvolumen bei der Übertragung von Bildinformationen über Netzwerke zu reduzieren. GIF eignet sich vor allem dann, wenn man eine Grafik mit wenigen Farben hat (dann ist die Kompression mit GIF besser); JPG dann, wenn man Photos mit sehr vielen Farben in die WWW-Seiten integrieren will. Die meisten Bildbearbeitungsprogramme (trans.htm (Transparente Grafiken)
Adobe Photoshop, Corel Draw etc.) verfügen über Konvertierungsmöglichkeiten von nahezu jedem beliebigen Ausgangsformat in GIF oder JPEG.
Da 
Computermonitore ohnehin nur über eine Grafikauflösung von 72dpi verfügen, reicht es völlig aus, wenn Grafiken und Photos mit einer Auflösung von 72dpi eingescannt oder mit Bildbearbeitungsprogrammen erstellt werden. Ebenso reicht eine Farbpalette von 256 Farben aus, um eine dem Internet angemessene Qualität von Grafiken und Bildern zu erreichen.
Um Bilder und Grafiken im GIF- oder JPEG-Format in HTML-Dokumente einbinden zu können, bedarf es einer speziellen Syntax, um diese Bilder zu laden. Wie bei den Verweisen auf andere Dokumente, gibt es auch hier "relative" und "absolute" Links auf Bilder, wobei der Unterschied zu den Links auf andere Dokumente vor allem darin besteht, daß Bilder immer automatisch vom Browser geladen werden, während die Links auf Dokumente erst durch ein aktives klicken durch die Maus aktiviert werden. Um ein Bild im gleichen Verzeichnis des HTML-Dokumentes zu laden bedarf es folgender Syntax ("relatives Link"):
<img src="bild.gif">Will man ein Bild von einem entfernten Rechner in sein Dokument einbinden, muß man die komplette Adresse des Bildes angeben ("absolutes Link"):
<img src="http://www.ekd.de/aktuell/aktuell.gif">
3. Text und Bilder anordnen
Von besonderem Interesse ist das "align"-Attribut, das in die Image-Syntax eingebunden wird (zwischen "img" und "src") und das angibt, wo der Text, der das Bild umgibt, plaziert werden soll:
| <img align=top src="bild.gif"> | Der Text wird an der Oberkante des Bildes ausgerichtet |
| <img align=middle src="bild.gif"> | Der Text wird an der Mitte des Bildes ausgerichtet |
| <img align=bottom src="bild.gif"> | Der Text wird an der Unterkante des Bildes ausgerichtet. |
Weitere wichtige Attribute des IMG-Tags sind die Angaben, wieviel Abstand zwischen Text und Bild bestehen soll und wie breit oder hoch ein Bild sein soll:
| <img hspace=xx src=yyy.gif> | horizontaler Abstand zum Text |
| <img vspace=xx src=yyy.gif> | vertikaler Abstand zum Text |
| <img width=xxx height=xx src=yyy.gif> | Breite und Höhe des Bildes |
Weil einige Internet-Benutzer nur über Text-Browser verfügen und viele andere ihre Browser zum Websurfen ohne die Bildladefunktionen betreiben, ist ein Attribut des IMG-Tags noch wichtig: das "alt"-Attribut, das eine Bildbeschreibung enthält und praktisch wie eine Bildunterschrift funktioniert. Will man z. B. eine Deutschlandkarte als Bild auf eine Seite stellen, empfiehlt sich folgende Syntax:
<img alt="Deutschlandkarte" src="brdkarte.gif>Wer die Bildladefunktion seines Browsers deaktiviert hat, bekommt dann immerhin noch die Information, daß es sich bei dem nichtgeladenen Bild um eine "Deutschlandkarte" handelt.
4. Links zu Dokumenten über Bilder schalten
Besonders reizvoll an HTML ist auch die Möglichkeit, Links zu anderen Dokumenten über Bilder zu schalten. Dafür müssen die Verweis-Tags mit dem Image-Tags kombiniert werden. Um z. B. auf ein Dokument mit dem Namen "test.html" mittels eines Bildes zu verweisen, ist folgende Syntax notwendig:
<a href="test.html"><img src="test.gif></a>Klickt man in diesem Fall auf das Bild "test.gif" gelangt man zu dem Dokument "test.html". Dabei wird ein Rahmen um das Bild gelegt, der aber auch mit dem "border=0"-Tag vermieden werden kann:
<a href="test.html"><img border=0 src="test.gif></a>Gerade bei über Bilder geschalteten Links empfiehlt es sich, den "alt"-Tag in die Image-Syntax einzubauen. Dieser sorgt dafür, daß jemand, der keine Bilder in seinem Browser laden kann (oder will), trotzdem Informationen über die vorhandenen Bilder bekommt:
<a href="test.html"><img border=0 alt="test gif" src="test.gif></a>
5. "Clickable Images"
Neben den bisher besprochenen Möglichkeiten der Verlinkung von Grafik und Dokumenten gibt es noch sogenannte "Clickable Images" oder "Aktive Grafiken", bei denen durch das Klicken auf bestimmte Bereiche innerhalb eines Bildes Dokumente gestartet werden. Diese Bereiche können die Form von Rechtecken, Kreisen oder Polygonen haben.<map name="auswahl">Zunächst müssen die "anklickbaren" Bereiche mittels "map" definiert werden. Das geschieht über "area shape" innerhalb des "map"-Bereiches. "map" muß einen Namen erhalten, damit später darauf zugegriffen werden kann. "shape" (Gestalt) gibt die Art des Bereiches an, gefolgt von den benötigten Koordinaten (in Pixel!). Am Ende muß mittels "href" festgelegt werden, worauf verwiesen werden soll.
<area shape="rect" coords="x1,y1,x2,y2" href="datei1.html">
<area shape="circle" coords="x,y,r" href="datei2.html">
<area shape="poly" coords="x1,y1,x2,y2,x2,y3,x4,y4..." href="datei3.html">
</map>
<img src="auswahlgrafik.gif" border=0 usemap="#auswahl">
"shape" kennt drei verschiedene Möglichkeiten:
- rect definiert einen rechteckigen Bereich. Als Koordinaten müssen die linke obere Ecke (x1,y1) und die rechte untere Ecke (x2,y2) angegeben werden.
- circle definiert einen Kreis. An Koordinaten werden der Mittelpunkt (x,y) und der Radius (r) benötigt.
- poly definiert ein Polygon (Vieleck). Benötigt werden die einzelnen Eckpunkte, beginnend mit dem Startpunkt. Vom zuletzt angegebenen Punkt wird automatisch eine Linie zum Startpunkt gezogen.
Netscape umgibt normalerweise jedes "clickable image" automatisch mit einem Rand. Das kann sich auf das Layout Ihrer Seite störend auswirken. Darum wurde dieser Rand im obigen Beispiel über "border=0" abgeschaltet.
6. Hintergrundbilder und farbiger Text
In HTML 3.0 ist es auch möglich, Hintergrundbilder und farbigen Text zu verwenden. Diese Erweiterungen der HTML-Sprache werden über den <body>-Tag am Anfang der Seite geschaltet. Will man ein Hintergrundbild in eine WWW-Seite einbinden, funktioniert dies über die Erweiterung:<body backround="background.gif">Neben einem speziellen Hintergrundbild gibt es aber die Möglichkeit, auch die Farben für den Hintergrund, den Text, die Links, die schon besuchten Links und die aktiven Links zu bestimmen, wobei der Body-Erweiterung jeweils eine
RGB Farbkodierung für die gewünschten Farben folgt.
Die Tags dafür lauten:
| <body bgcolor="#RGBCODE"> | für die Hintergrundfarbe |
| <body text="#RGBCODE"> | für den Text |
| <body link="#RGBCODE"> | für die Links (generell) |
| <body vlink="#RGBCODE"> | für schon besuchte Links |
| <body alink="#RGBCODE"> | für aktive Links |
Als Erweiterungen des Body-Tags werden diese Spezifikationen normalerweise nach <body> aneinandergereiht:
<body background="iss.gif" bgcolor="#A0A0A0" text="#000000" link="#FF0000" vlink="#0000FF" alink="#FF00FF">Sie können auch die Farbe des Textes auf einer Seite direkt bestimmen oder zu der im <body> festgelegten Textfarbe verändern:
<font color="#RGBCODE">Text</font color>Bisher haben Sie gelernt, wie man mit HTML
Texte formatiert, Links zu anderen Dokumenten in die Seiten integriert und Bilder in die Dokumente einfügt. Im folgenden sollen nun kurz die Möglichkeiten und Grenzen der HTML-Sprache erläutert werden.
|
Zum Seitenanfang
|