HTML Grundlagen: Bilder einfügen mit <img src="URL">

Bilder in die Webseite mit dem IMG Tag einfügen

Bilder werden mit dem folgendem Code in eine HTML Seite eingefügt:

Bilder werden technisch nicht in eine Webseite eingefügt, sondern werden mit der Webseite verlinkt. Das IMG Tag (img für Englisch »image« = Bild) erzeugt einen Speicherplatz für das referenzierte Bild.

Das HTML Tag <img ...> hat kein abschließendes Tag. Warum ist da so?

Das IMG Tag ist genau wie die HTML Tags BR (br für Englisch »line break«) und HR (hr für Englisch »horizontal ruler«) ein sogenanntes Standalone Tag, d.h. ein leeres HTML Element, das keinen Inhalt hat. Deshalb benötigt es kein abschließendes Tag.

Das HTML Element IMG unterstützt folgende Attribute:

1. src ist die URL des Bildes. Dieses Attribut ist zwingend.

2. alt ist eine alternative Beschreibung für das Bild, die statt des Bildes angezeigt werden kann. Zum Beispiel, wenn die Grafik noch nicht geladen wurde, nicht geladen werden kann oder wenn der Browser keine Grafik darstellen kann. Der alt-Text soll nicht einfach das Bild beschreiben, sondern die Aussage des Bildes.

   Obwohl das IMG Tag auch ohne alt-Attribut funktioniert, sollte dieses Attribut stets angegeben werden. Wenn keine sinnvolle Beschreibung angegeben werden kann, sollte ein leeres alt-Attribut (alt="") angegeben werden.

3. border ist die Rahmenstärke des Bildes in Pixel.

4. width ist die Breite des Bildes in Pixel oder Prozent.

5. height ist die Höhe des Bildes in Pixel oder Prozent.

Die Breite und Höhe des Bildes sollte angegeben werden. Dadurch reserviert der Browser beim Laden der Seite den erforderlichen Platz für das Bild. Wenn diese Werte nicht angegeben werden, »springen« die Inhalte der Seite nach dem Laden des Bildes noch einmal um. Das ist unangenehm für den Leser der Seite.

Ein Bild mit einem Link verknüpfen

HTML Tags können verschachtelt werden. Du erhältst ein anklickbares Bild, wenn Du das A Tag mit dem IMG Tag kombinierst.