Bilder in eine Webseite einbinden
Grafiken per HTML einbinden
Grafiken sind nicht Bestandteil einer HTML-Datei. Es wird im Quelltext auf die Datei verwiesen.
| Tag | Bedeutung |
|---|---|
| <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.
| Wert | Bedeutung |
|---|---|
| left |
Grafik linksbündig ausrichten; |
| right |
Grafik rechtsbündig ausrichten; |
| 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.
| Attribut | Bedeutung |
|---|---|
| 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: |  |
|---|
| Quelltext | Anzeige |
|---|---|
<p> |
eine Zeile links rechtsdarunter |
