Stil mit {stil}

Mar 2008

HTML-Tag img • Ein Bild auf einer Webseite anzeigen

Browser können nur wenige Bild- oder Grafikformate darstellen. JPEG, GIF oder PNG sind die sichersten Formate für die Anzeige von Bildern in Webseiten.

Das <img>-Tag fügt ein Bild oder eine Grafik im JPEG-, GIF- oder PNG-Format in HTML-Seiten ein.

<img src="stifte.jpg" width="220" height="220" alt="stifte.jpg" />

Ein <img>-Tag bewirkt keinen Zeilenumbruch. <img> erzeugt ein Inlineelement. Das Tag kann in ein a-Element eingesetzt werden, um einen klickbaren Link zu erzeugen. Um alle vier Seiten wird dabei ein Rahmen dargestellt, um das Bild als Link zu kennzeichnen. Der Rahmen kann durch Stylesheets verändert werden.

Das Tag ist leer. Anstelle des schließenden Tags kann ein Schrägstrich das Ende des Elements anzeigen: <img ... />:

alt

stellt eine Textnachricht zur Verfügung, die anstelle des Bildes von Browsern gezeigt wird, die Bilder oder Grafiken nicht darstellen können.

height

gibt die vertikale Ausdehnung des Bildes in Pixeln an.

ismap

ist ein boolescher Wert. Wenn er vorhanden ist, kennzeichnet er, dass es sich bei dem Bild um eine klickbare serverseitige Image Map handelt.

longdesc

ist die URL einer Quelle, die eine ausführliche Beschreibung des Bildes enthält. Das ist nützlich für serverseitige Image Maps und nichtgrafische Browser.

src

Das Attribut src ist zwingend erforderlich und stellt die URL der Bilddatei dar. Die URL muss den Dateinamen enthalten und kann einen relativen oder absoluten Pfad angeben.

usemap

Das Attribut usemap gibt den Namen einer Image Map an, die mit dem Element verknüpft werden soll. Es handelt sich hierbei um eine klickbare clientseitige Image Map.

width

Das Attribut width gibt die horizontale Ausdehnung des Bildes in Pixeln an.

border, hspace und vspace sind Attribute, die inzwischen als unerwünscht gelten.

img: Ein Bild in einen Text einfügen

<img src="IllustrationMitApfel.jpg" alt="Illustration" 
   width="298" height="210" /> Ein Bild mit einem Apfel 

Ein Bild mit einem Apfel

img: Ein Bild von Text umfließen lassen

<img src="IllustrationMitApfel.jpg" style="float: right; margin-left: 9px;" 
   alt="Illustration" width="298" height="210" /> Ein Bild mit einem Apfel 

Ein Bild mit einem Apfel

Damit ein Bild wie im zweiten Beispiel vom Text umflossen wird, muss die CSS-Eigenschaft float benutzt werden.

Zum Seitenanfang