VIII. Bilder:
1. Bild als Hintergrundgrafik:
<body background="bild.gif">...</body>
Das Bild „bild.gif" wird als Hintergrundgrafik verwendet.
2. Bilder in den body einfügen:
<img src="http://www.grazersoft.com/bild.gif">
„bild.gif" wird in Originalgrösse eingefügt.
<img src="http://www.grazersoft.com/bild.gif" alt="ein schoenes bild">
„bild.gif" wird in Originalgrösse mit Alternativtext eingefügt.
<img src="http://www.grazersoft.com/bild.gif" width="100" height="150">
„bild.gif" wird in der Grösse 100x150 Pixel eingefügt.
TIPS:
Bei einer Grössenveränderung eines Bildes reicht es aus nur eine Grösse anzugeben (width oder height) ! Die nicht angegebene Grösse wird automatisch berechnet. Somit kann es zu keiner Verzerrung des Bildes kommen, da das Grössenverhältnis des Originals beibehalten wird.
Wählt man eine Prozentangabe anstatt der Pixelanzahl (width="40%"), hat das Bild eine variable Grösse. Bei diesem Beispiel wird eine Bildbreite von 40% der Fensterbreite des Browsers oder Frames erzwungen! Diese Methode ist gut zur Vermeidung von Scrollbalken geeignet.
Dieses lässt sich auch auf Tabellen und Trennlinien anwenden!
Den Alternativtext kann man nutzen um Informationen über das Bild oder das Ziel des Links zu geben, denn viele User lassen sich Bilder, aufgrund kürzerer Ladezeiten, nicht anzeigen.
Soll rechts oder links von dem Bild Text stehen, muss mit Tabellen gearbeitet werden! (Bild in Datenzelle)
Beispiel:
<table align="center">
<tr><td><img src="http://www.grazersoft.com/bild.gif"></td><td>text</td></tr>
</table>
 | mit Hilfe von Tabellen kann mehrzeilig neben Bilder geschrieben werden. |
3. Bild als Link:
Beispiel:
<a href="http://www.gmx.de"><img src="http://www.grazersoft.com/bild.gif"></a>
„bild.gif" ist nun ein Link zu der Seite www.gmx.de.
<a href="mailto:meier@gmx.de"><img src="http://www.grazersoft.com/bild.gif"></a>
„bild.gif" ist nun ein Link zu der E-mail-Adresse meier@gmx.de
TIP:
Bilder als Link werden blau umrahmt! Diesen Rahmen kann man durch den Zusatz im img -Tag entfernen!
<img src="http://www.grazersoft.com/bild.gif">
4. Bilder von anderen Seiten einfügen:
Möchte man ein Bild einfügen, das auf einer anderen Seite eingebunden ist, kann man dieses direkt von dem entsprechenden Server laden. Im img-Tag muss lediglich die entsprechende Adresse angegeben werden:
<img src="http://www.bilder.de/pics/bild.gif">
Wiki, HTML-Kurs, Links selbst erstellen, lernen und verlinken