Grafiken in HTML einbinden

Das Einbinden von Grafiken in HTML ist relativ einfach mit dem <img> - Tag zu realisieren. Unverzichtbar ist die Angabe der Bildquelle, also die korrekte Angabe des Dateipfades zu dem Ordner, in dem die Bilddatei auf dem Webserver abgelegt ist. Außerdem sollte die Angabe der Bildgröße nicht fehlen. Sie wird in Pixel angegeben und sollte möglichst Höhe (height) u n d Breite (width) festlegen. Die Zahlenangabe sollte, wie (fast) immer in HTML, in Gänsefüßchen stehen. Die Größenangabe benötigt der Browser für den Seitenaufbau. Dieser erfolgt viel schneller, wenn die Maße schon zu Beginn feststehen.

Beispiel für das Einbinden einer Grafik:

<img src="../media/images/webfeat/gaense.jpg" width="339" height="269">

Je größer die Grafiken sind, desto längere Ladezeiten benötigen sie. Das sollte man im Internet aus Rücksicht auf seine Besucher eigentlich vermeiden. Manchmal geht es jedoch nicht anders, z. B. weil sonst wichtige Details auf dem Bild nicht zu erkennen sind. Dann bietet es sich an, das betreffende Bild zuerst als Vorschau mit geringer Größe und Qualität zu zeigen und erst bei Klick auf einen Link in einem extra Fenster in voller Größe und Qualität. Bei dem Link gibt man dafür das Attribut
target="_blank" an. Die Datei öffnet sich so einem neuen Fenster. Wie das genau gemacht wird, wird im Kapitel "Frames" erklärt.

Grafiken können auch - genau wie Text - ausgerichtet werden. Da es sich hier um Grafiken handelt, verwendet man am einfachsten einen sogenannten <div> - Container. Dieser <div> - Container ist übrigens nicht nur bei Grafiken einsetzbar. Das Attribut "align" kann die Werte "left", "right" und "center" haben.

Das Attributt "align" ist aber auch innerhalb des <img> - Tags zulässig und wird insbesondere dann eingesetzt, wenn Text um die Grafik herumfließen soll.

<div align="right"><img src="../media/images/webfeat/gaense.jpg" width="432" height="324"></div>

<img src="../media/images/webfeat/gaense.jpg" width="432" height="324" align="right">Dieser Text fließt links um das Bild herum.

Wenn man möchte, dass umgebende Elemente wie Text einen gewissen Abstand zum Bild einhalten, kann man mit den Attributen "hspace" und "vspace" einen solchen Abstand festlegen. Der Wert für "hspace" - wieder in Pixel - bestimmt den Abstand von Bild zu Umgebung in horizontaler Richtung, also links und rechts vom Bild. "vspace" dagegen legt den Abstand in vertikaler Richtung, also nach oben und nach unten fest.

Beispiel:

<img src="../media/images/webfeat/gaense.jpg" width="432" height="324" align="left" vspace=40 hspace=20>Dieser Text fließt links um das Bild herum.

Die Werte von "hspace" und "vspace" werden ausnahmsweise nicht in Gänsefüßchen angegeben!