Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Image (Bild) Tag <img>

Mit dem Image Tag <img> können Bilder in Webseiten integriert werden.

Unten siehst du, wie man Bilder in eine Webseite einfügt. Das Bild sollte dazu in einem Ordner abgelegt und dann im <img> Tag verlinkt werden. Die Verlinkung geschieht mit src="Pfad/zur/Datei.typ". Wegen der Übersichtlichkeit empfiehlt es sich, alle Bilder in einem eigenen Unterordner zu speichern, zum Beispiel mit dem Namen Bilder. Mit dem alt="" kann ein alternativer Text eingegeben werden, welcher dargestellt wird, falls das Bild aus einem Grund nicht angezeigt werden kann (z.B. wenn das Bild fehlt).

Mit dem style="" Attribut kann das Bild formatiert werden. Beim ersten Bild wurde nur die Bildbreite auf 200 Pixel festgelegt. Beim zweiten Bild wurde der Radius auf 50 % der Bildhöhe und -Breite gesetzt, die Bildbreite auf 200 Pixel und ein Schatten hinzugefügt. Beide Bilder befinden sich im Unterordner img

Wie man die HTML-Elemente, wie diese Bilder mit CSS stylen kann, erfährst du im Kapitel zu CSS.

<img src="/img/car.png" alt="Dieses Bild kann leider nicht angezeigt werden" style="width:200px">
<br><br>
<img src="/img/airplane.jpg" alt="Dieses Bild kann leider nicht angezeigt werden" style="border-radius:50%; width:200px; box-shadow: 5px 5px 15px black">