<img> Tag - Bild einfügen
Fügt ein Bild ein:
<img src="franz.jpg" alt="Wellensittich Fanz" height="250" width="350">
Verwendung
Mit dem img
Tag fügen Sie Bilder in Webseiten ein. Mit dem src
Attribut geben Sie die Bilddatei an. Es kann sowohl eine relative, als auch eine absolute URL angegeben werden.
Das alt
Attribut gibt den alternativen Text an, dieser wird angezeigt, falls das Bild nicht geladen werden kann oder soll. Über die Angaben height
und width
wird
die Größe festgelegt. Fehlen die Angaben, wird die Bildgröße herangezogen.
Bilder können verlinkt werden, indem man diese in ein a
Tag einbettet.
Attribute
Attribut | Wert | Beschreibung |
align | top bottom middle left right |
Gibt die Ausrichtung an (siehe). Wird in HTML 5 nicht mehr unterstützt. |
alt | text | Der Alternative Text, wird angezeigt, wenn das Bild nicht geladen werden soll oder kann, wird ebenfalls angezeigt, wenn der Benutzer mit der Maus über dem Bild stehen bleibt. Wichtig z.B. für sehbehinderte Personen. Der Text sollte den Inhalt des Textes angeben. |
border | Pixel | Breite des Rahmens um das Bild. Wird in HTML 5 nicht mehr unterstützt. |
height | Pixel | Höhe des Bildes |
hspace | Pixel | Abstand rechts und links vom Bild, z.B. von Text. Wird in HTML 5 nicht mehr unterstützt. |
longdesc | URL | Angabe einer URL mit einer ausführlichen Beschreibung des Bildinhalts. |
sizes | Angabe der Größen für verschiedene Seitenlayouts | |
src | URL | URL zum Bild, welches dargestellt werden soll. |
srcset | URL |
Alternative URLs zum Bild. Muss vom Browser unterstützt werden, z.B. mit Angabe für Bildschirmauflösungen, bzw. DPI-Zahl. Beispiel: <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x image-3x.png 3x, image-4x.png 4x">
|
usemap | #mapname | Angabe einer clientseitigen Sitemap. |
vspace | Pixel | Abstand oben und unten zum Bild. Wird in HTML 5 nicht mehr unterstützt. |
width | Pixel | Breite des Bildes. |