Um Bilder in HTML einzufügen verwendet man das <image> Tag. Dabei gibt man den Namen und Pfad des Bildes an sowie einen alternativen Text an, etwa
<img src="../Bilder/littlelogo.gif" alt="Logo" >
Das src Attribute bezeichnet den Namen und Pfad der Bilddatei im Format .gif, .jpeg (oder .jpg) und .png. Mit dem alt Attribute wird ein alternativer Text angegeben. Dieser wird immer dann angezeigt, wenn das Bild noch geladen wird oder gar nicht gefunden wurde.
Folgende wichtige Attribute besitzt das Image Tag noch, mit denen man Aussehen und Ausrichtung von Bildern in Seiten bestimmen kann: border für einen Rahmen (mit Angabe einer Rahmenbreite), align für eine Ausrichtung zum Text (mit u.a. möglichen Werten top=oben, bottom=unten, middle=mittig, left=links, right=rechts) sowie vspace und hspace (jeweils mit Angabe eines vertikalen bzw. horizontalen Abstandes). Und so könnte ein Beispiel aussehen:
<img src="../BIlder/littlelogo.gif" border="2" align="top" title="Bild"
alt="Logo">
Zu große Bilder kann man durch die Angabe von width=Breite und height=Höhe zuschneiden. Dabei sollte man aber beachten, dass die gesamte Datei beim Laden der Seite zunächst heruntergeladen wird (d.h. es findet ein Download der vollen Dateigröße statt) und anschließend verkleinert wird. Es könnte sich daher empfehlen, die Datei vorher zu verkleinern und auf dem Webserver abzulegen.
Beim Referenzieren von Bildern gibt es (wie auch später bei den Hyperlinks) zwei Möglichkeiten, das Bild zu adressieren (im src Attribute). Bei der relativen Adressierung liegt das Bild auf demselben Webserver wie die HTML Seite. Ein Bild im selben Verzeichnis (wie in unseren bisherigen Beispielen) adressiert man als
<img src="bild.jpeg" alt="Logo">
Ein Bild in einem Unterverzeichnis (relativ zur HTML Seite) namens images wird durch
<img src="images/bild.jpeg" alt="Logo">
eingebunden
Im Unterschied dazu kann man Bilder auf fremden Webservern mit einer vollen Adresse einbinden etwa
<img src="http://www.softquadrat.de/images/logo142.gif" alt="Logo">
Auf diese Art und Weise kann man Bilder von beliebigen Maschinen im Internet verwenden, wobei man allerdings zwei Dinge beachten sollte: