Grafiken und HTML

Grafiken einbinden

Es können verschiedene Formate eingebunden werden.
Häufig benutzte Formate sind:

Der Tag zum Einbinden von Grafiken besteht aus zwei Teilen:

Beispiel zum Einbinden von Grafiken, die im selben Verzeichnis wie die HTML-Seite liegen:

Wird die Grafik in einen Absatz eingeschlossen, dann steht die Grafik alleine, d. h. ohne Textfluss, z. B.:

<p><img src="grafik.jpg"></p>

Beispiele zum Einfügen von Grafiken

   Zur Navigation    Zum Inhalt

Grafisch gestaltete Einstiegsseiten

Werden Eingstiegsseiten grafisch gestaltet, können Suchmaschinen praktisch nichts auslesen. Hier sollten zumindest die Möglichkeiten, die sich durch die Angabe von Meta-Informationen ergeben, maximal ausgeschöpft werden.

Grafikreferenzen in anderen Verzeichnissen

Eine Grafik, die in einem Unterverzeichnis liegt wird folgendermaßen eingebunden:

<img src="verzeichnis/grafik.jpg">

Liegt die Grafik in einem Unterverzeichnis des Unterverzeichnises ist so vorzugehen:

<img src="verzeichnis/unterverzeichnis/grafik.jpg">

Liegt die Grafik eine Ebene höher, sieht die Codezeile so aus:

<img src="../grafik.jpg">

Liegt die Grafik zwei Ebenen höher, ist so vorzugehen:

<img src="../../grafik.jpg">

Wenn die Grafik in einem Parallelverzeichnis liegt, sieht es so aus:

<img src="../Parallelverzeichnis/grafik.jpg">

   Zur Navigation    Zum Inhalt

Grafiken auf anderen WWW-Servern

Achtung: Es gibt ein Urheberrecht! Vergessen Sie das beim Einbinden von Grafiken von anderen WWW-Servern nicht!

Grafiken von anderen WWW-Servern können folgendermaßen eingebunden werden:

<img src="http.www.caramba.com/bilderseite.html/bild.jpg">

Beispiel zu Grafiken in anderen Verzeichnissen

   Zur Navigation    Zum Inhalt

Alternativtext für Grafiken

Wenn eine Grafik nicht angezeigt wird, aus welchen Grund auch immer, erscheint, sofern mit alt="..." ein Text angegeben wurde, dieser Text anstelle der Grafik. Es kann sein, dass bei größeren Grafiken der Alternativtext angezeigt wird, bevor die Grafik geladen wird. Ein Beispiel:

<img src="grafik.jpg" alt="Kurzer, beschreibender Text">

   Zur Navigation    Zum Inhalt

Rahmen und Namen

Rahmen: Grafiken können gerahmt werden. Die Angabe der Stärke des Rahmens erfolgt in Pixel.

<img src="grafik.jpg" border=10>

NamenGrafiken können zusätzlich benannt bzw. mit einem Titel versehen werden:

<img src="grafik.jpg" name="Willi_Wunder" title="Willi Wunder">

   Zur Navigation    Zum Inhalt

URL-Adresse mit Beschreibung

Zusätzlich zum Alternativtext, kann an eine andere Stelle oder auf eine andere Datei verwiesen werden, die weitere Infos zur Grafik enthält.

<a name="Beschreibung">Infos zur Grafik</a>
[...]
<img src="candi.jpg" longdesc="#Beschreibung">

   Zur Navigation    Zum Inhalt

Breite und Höhe

Breite und Höhe sollten angegeben werden, da die Browser diese Angaben vor dem Aufbau der Grafik auslesen und damit der Seitenaufbau eleganter vor sich geht. Es werden beim Seitenaufbau gleich Platzhalter für die Grafiken in der richtigen Gröe freigehalten. Die Angabe der Größe einer Grafik erfolgt in Pixel.

<img src="grafik.jpg" width=140 height=165>

Neben Angaben in Pixel sind auch Prozentangaben erlaubt. Damit wird der Seitenaufbau allerdings nicht beschleunigt! Durch Fehlangaben können Verzerrungseffekte entstehen.

<img src="grafik.jpg" width=120% height=80%>

Beispiel zu Alternativtexten, Größe und Rahmen

   Zur Navigation    Zum Inhalt

Grafikbeschriftung

Grafiken kann ein Beschriftungstext hinzugefügt werden. Dabei ist folgendermaßen vorzugehen:

Beschriftungstext oben:

<img src="grafik.jpg" align=top>Walter Wild

Beschriftungstext mittig

<img src="grafik.jpg" align=middle>Walter Wild

Beschriftungstext unten

<img src="grafik.jpg" align=bottom>Walter Wild

Problem: Der Text, der als Beschriftung eingegeben wird, wird nur dann neben der Grafik angezeigt, wenn er in eine Zeile passt. Sollte der Beschriftungstext länger als eine Zeile sein, dann wird der Rest unterhalb der Grafik angezeigt. Die Zeilenbreite selbst ist abhängig von der Fenstergröße. Aus diesem Grund werden oft blinde Tabellen eingesetzt, um Text neben einer Grafik zu platzieren.

Speziellere Angaben zur Grafikbeschriftung sind nicht offizieller Standard und funktionieren nicht mit allen Browsern. Folgende Möglichkeiten sollten also mit Vorsicht genossen werden:

   Zur Navigation    Zum Inhalt

Textfluss um Grafiken

Mit dem align="..." -Attribut können Grafiken links- oder rechtsbündig ausgerichtet werden. Wenn eine Grafik so eingebunden wird, wird sie von einem folgenden Text umflossen.

<img src="grafik.jpg" align=left>Text ...
<img src="grafik.jpg" align=right>Text ...

   Zur Navigation    Zum Inhalt

Grafiken zentrieren

Soll Text eine Grafik nicht umfließen, dann muss die Grafik in einen eigenen Absatz eingeschlossen werden:

<p><img ...></p>
<p align=center><img src="grafik.jpg"></p>

   Zur Navigation    Zum Inhalt

Spezieller Textfluss

Wenn neben der Grafik ein paar Zeilen stehen sollen, der Rest des Textes aber unterhalb der Grafik, wäre folgendes denkbar:

<img src="grafik.jpg" align=left>Text ... <br clear=all>Text ...

   Zur Navigation    Zum Inhalt

Abstand zwischen Grafik und Text

Mit hspace wird der horizontale Abstand, mit vspace der vertikale Abstand zu benachbarten Objekten festgelegt.

<img src="grafik.jpg" align=left hspace=15>Text ...

Zwei Möglichkeiten, Text oberhalb und unterhalb fließen zu lassen, mit Angabe des Abstandes:

<p>Text ... </p>
<img src="grafik.jpg" vspace=20>
<p>Text ... </p>

<div align=center>
<p>Text oberhalb</p>
<p>Text links<img src="candy.jpg" align=absmiddle hspace=40 vspace=40>Text rechts</p>
<p>Text unterhalb</p>
</div>

Beispiel zum Textfluss

   Zur Navigation    Zum Inhalt

Laden von mehreren Grafik-Versionen

Dabei geht es darum, dass zunächst eine Grafik mit niedrigerer Auflösung geladen wird, die hochauflösende Grafik wird erst dann geladen, wenn das Dokument vollständig geladen ist.

Diese Form der Einbindung ist nicht offizieller Standard und funktioniert nur mit wenigen Browsern.

<img src="grafik1.jpg" lowsrc="grafik1.jpg width=140 height=165>

   Weiter    Zur Navigation    Zum Inhalt