Einleitung

Standardmäßig wird eine Grafik im Fließtext wie ein Buchstabe eingefügt. Die Höhe der Grafik bestimmt dabei den Zeilenabstand. Das Einbinden der Grafik erfolgt durch die Angabe einer Quelle (URL oder Dateiname)

Anzeigebeispiel

<img src="Quelle">

Mit dem Tag <img> (image - Grafik) binden Sie eine Grafik in ein HTML - Dokument ein. Über das Attribut src (source - Quelle) geben Sie an wo die Grafik zu finden ist, die Sie einbinden wollen. Die Grafik erscheint an der Stelle, an welcher der Tag verwendet wird. Befindet sich der Tag zwischen einem Text, wird auch die Grafik innerhalb des Textes gesetzt.

Es sei schon jetzt darauf hingewiesen, dass es oft von Vorteil ist, Grafiken in blinde Tabellenzellen zu setzen. Das vereinfacht die Ausrichtung.

Beispiel:

<p> <img src="img/flasche.jpg" alt="flasche"> Flaschen, Flaschen, Flaschen. Alles was ich sammle sind Flaschen. Große Flaschen, kleine Flaschen, dicke Flaschen, dünne Flaschen. Da kann auch etwas drin sein, muß aber nicht. </p>

Flaschen, Flaschen, Flaschen. Alles was ich sammle sind Flaschen. Große Flaschen, kleine Flaschen, dicke Flaschen, dünne Flaschen. Da kann auch etwas drin sein, muß aber nicht.

Verschiedene Grafikverweise

Befindet sich die entsprechende Grafik in einem anderen Verzeichnis, muss dorthin verwiesen werden. Das Verzeichnis, in dem Sie Ihr HTML - Dokument speichern, ist das aktuelle Verzeichnis. Auf der Basis einer Verzeichnisstruktur ergeben sich viele Möglichkeiten:

Verweise auf Bilder in Unterverzeichnissen
<img src="bilder/grafik.jpg">	Der Browser sucht im aktuellen Verzeichnis nach dem Unterverzeichnis bilder und dort nach dem Bild grafik.jpg.
<img src="bilder/scans/grafik.jpg">	Der Browser sucht ausgehend vom aktuellen Verzeichnis, im Unterverzeichnis bilder/scans nach dem Bild grafik.jpg.
Verweise auf Bilder in darüber liegenden Verzeichnissen
<img src="../grafik.jpg">	Die Angabe ../ verweist auf das darüberliegende Verzeichnis. Der Browser wechselt im Beispiel in das darüber liegende Verzeichnis und sucht dort das Bild grafik.jpg.
<img src = "../../grafik.jpg">	Der Browser verzweigt zwei Verzeichnisse nach oben und läd das Bild grafik.jpg.
<img src = "../bildchen/grafik.jpg">	Der Browser wechselt in ein Verzeichnis nach oben und von dort in das Unterverzeichnis bildchen. Von dort läd er das Bild grafik.jpg.

Die Grafiken sollten sich möglichst in der Nähe befinden, damit die Verweise nicht zu kompliziert werden.

Alternativer Text

Binden Sie Grafiken in Ihr Dokument ein, sollten Sie ebenfalls eine Kurzbeschreibung angeben. Der angegebene Text wird angezeigt, wenn die Grafik nicht dargestellt wird. Das ist beispielsweise der Fall, wenn der Besucher Ihrer Seite die Darstellung von Grafiken ausgeschaltet hat oder die Grafikdatei im angegebenen Verzeichnis nicht vorhanden ist. In diesem Fall wird die Kurzbeschreibung der Grafik als alternativer Text dargestellt. Außerdem zeigen die Browswer den alternativen Text als Hilfe an, wenn der Cursor über die Grafik bewegt wird.

Beispiel:

<p> <img src="img/flasche.jpg" alt="flasche"> Flaschen, Flaschen, Flaschen. Alles was ich sammle sind Flaschen. Große Flaschen, kleine Flaschen, dicke Flaschen, dünne Flaschen. Da kann auch etwas drin sein, muß aber nicht. </p>

Flaschen, Flaschen, Flaschen. Alles was ich sammle sind Flaschen. Große Flaschen, kleine Flaschen, dicke Flaschen, dünne Flaschen. Da kann auch etwas drin sein, muß aber nicht.

<img src="Quelle" alt="Kurztext">

Das Attribut alt (alternativ) wird innerhalb dee Tags <img ...> eingesetzt, um eine Textbeschreibung der Grafik zu erzeugen. Diese Kurzbeschreibung ist immer in Anführungszeichen zu setzen. <img src="img/flasche.jpg" alt="flasche">

Größenangaben bei Grafiken

Beim Einbinden von Grafiken sollten Sie immer deren Höhe und Breite angeben. Das hat den Vorteil, dass der Browser beim Anzeigen Ihrer Webseite bereits weiß, wie groß die zu ladene Grafik sein wird. Er kann dadurch die benötigte Fläche für die Grafik reservieren und somit die Seite mit dem Text und den noch nicht geladenen Grafiken anzeigen. Das verkürzt die Zeiten zum laden der vollständigen Seite.

Geben Sie die Breite und Höhe der Grafik nicht an, muss der Browswer mit dem Seitenaufbau warten, bis er die Größenangaben aus der entsprechenden Grafik ausgelesen hat.
Ein guter HTML - Editor macht das automatisch.

<img src="Quelle" height="Höhe" width="Breite">

Geben Sie die Größe (height - Höhe; width - Breite) in Pixeln oder in % an. Die Prozentangabe bezieht sich auf die Größe des aktuellen Browserfensters. Die Angabe height="200%" bewirkt beispielsweise, dass die Grafik ca. die zweifache Höhe des Fensters besitzen soll. <img src="img/flasche.jpg" height="200%" width="55%">

Beispiel:

<img src="img/flasche2.jpg" width="55" height="200" alt="flasche2 normal"> <img src="img/flasche2.jpg" width="27" height="200" alt="flasche2 halbe Breite"> <img src="img/flasche2.jpg" width="55" height="100" alt="flasche2 halbe Höhe"> <img src="img/flasche2.jpg" width="27" height="100" alt="flasche2 halbe Breite">

Grafiken einrahmen

HTML stellt Ihnen das Attribut border zur umrahmten Darstellung von Grafiken zur Verfügung.

<img src="Quelle" border=" Wert">

Mit dem Attribut border (Rand) bestimmen Sie, ob und wie breit ein Rand um eine Grafik angezeigt werden soll. Geben Sie dieses Attribut nicht an bzw. setzen Sie die Breite auf den Wert Null, wird kein Rand um die Grafik gezeichnet. Die Angabe erfolgt in Pixeln.

Beispiel:

<p> <img src="img/berge.jpg" alt="Berglandschaft" height="120"width="160" border="0"> Grafik mit einem Rand von 0 Pixel (kein Rand). </p> <p> <img src="img/berge.jpg" alt="Berglandschaft" height="120" width="160" border="5"> Grafik mit einem Rand von 5 Pixel. </p> <p> <img src="img/berge.jpg" alt="Berglandschaft" height="120" width="160" border="10"> Grafik mit einem Rand von 10 Pixel. </p>

Grafik mit einem Rand von 0 Pixel (kein Rand). Grafik mit einem Rand von 5 Pixel. Grafik mit einem Rand von 10 Pixel.