Bilder in HTML

 

 <img> fügt ein Bild oder eine Grafik in HTML-Seiten ein. Nur zwei Attribute werden gebraucht: src, der Pfad zum Bild und alt, ein alternativer Text für Browser ohne Bilddarstellung. Browser können nur wenige Bild- oder Grafikformate zuverlässig darstellen. JPEG, GIF oder PNG sind die sichersten Formate für die Anzeige von Bildern in Webseiten.  Das img-Element erzeugt ein Inlineelement ohne Zeilenvorschub. In ein a-Element eingesetzt, hat man ein Bild als klickbaren Link erzeugt. Innerhalb eines a-Tags erzeugt der Browser einen Rahmen um das Bild. Dieser kann durch eine CSS-Anweisung entfernt werden.

Mit figure und figcaption erhält das Bild einen Container, um es vom Text abzuheben, zu positionieren und eine Bildunterschrift oder Legende hinzuzufügen. Diese beiden Tgas müssen nicht gesetzt werden.

<figure>
<img src="bild.jpg" width="668" height="503" altBild"> <t="…">
<figcaption>
<h4>Bild</h4>
</figcaption>
</figure>

Pro <figure> ist nur eine <figcaption> erlaubt. Die Anweisung kann aber auch vor dem <img>-Tag stehen. src ist die URL der Bilddatei und muss immer gesetzt werden genau wie alt. Kann die Bilddatei nicht angezeigt werden, wird der Text im Browser angezeigt. Deshalb sollte der Text schon aussagekräftig sein. width und heihght müssen nicht angegeben werden. Fehlen sie, wird das Bild automatisch dem Container angepasst.