Grafiken einbinden

Bilder in eine Webseite einbinden

Grafiken per HTML einbinden

Grafiken sind nicht Bestandteil einer HTML-Datei. Es wird im Quelltext auf die Datei verwiesen.

TagBedeutung
<img src=”[Bildquelle]”> image source

Ein Abschluß-Tag ist (in HTML) nicht nötig.

Als Bildquelle ist eine Referenzierung nach den HTML-Regeln erforderlich (siehe auch Abschnitt 'Verweise').

Der Befehl erzeugt keinen eigenen Absatz.

Aussehen und Ausrichtung kann mit Attributen angepasst werden.


Ausrichtung

Mit dem Attribut align="[Wert]" können Sie Grafiken ausrichten und das Umfließen durch (nachfolgend) notierten Text festlegen.

WertBedeutung
left

Grafik linksbündig ausrichten;
nachfolgender Text fließt rechts um die Grafik

right

Grafik rechtsbündig ausrichten;
nachfolgender Text fließt links um die Grafik

top Text wird obenbündig zur Grafik ausgerichtet (*)
middle Text wird mittig zur Grafik ausgerichtet (*)
bottom Text wird untenbündig zur Grafik ausgerichtet (*)

(*) Es wird eine Zeile neben der Grafik gefüllt, danach wird Text unter der Grafik fortgesetzt.

Andere Werte sind in HTML weitverbreitet, gehören aber nicht zum HTML-Standard (z.B. absmiddle).

Zur exakten Ausrichtung von mehreren Grafiken oder Grafik-Text-Kombinationen kann man Tabellen verwenden (späteres Kapitel).


Weitere Attribute

Neben dem align sind weitere Attribute im img-Tag erlaubt.

AttributBedeutung
alt="Text" alternativer Beschreibungstext; wird als Tooltipp angezeigt, wenn der Besucher mit der Maus über die Grafik fährt und wenn die Grafik im Browser nicht angezeigt werde kann (wichtig!)
width="[breite]" Breite der Grafik, Angabe i.A. in Pixel (*)
height="[hoehe]" Höhe der Grafik, Angabe i.A. in Pixel (*)
border="[wert]" Randstärke um die Grafik in Pixel, Rahmenfarbe ist die an der Stelle gültige Textfarbe (manche Browser zeigen nur schwarze Rahmen)
vspace="[wert]" 'vertical space': Abstand der Grafik nach oben und unten
hspace="[wert]" 'horizontal space': Abstand der Grafik nach rechts und links

(*) Zu starkes Verändern der Bildgröße kann zu schlechter Bildqualität im Browser führen.

Beispiel für mehrere Attribute im <img>-Befehl

Originalbild:  J. Hecht
QuelltextAnzeige
<p>
<font color="#800000">eine Zeile<br>
links
<img src=”img/jh1.jpg” border="5" width="60" height="100" align="middle" hspace="20" vspace="5" alt="Fisch-Diät?">
rechts<br>
darunter</font>
</p>
eine Zeile
linksFisch-Diät?rechts
darunter

Linie


 

nach oben