Bilder

Bisher handelt es sich bei unseren Seiten um ziemlich farblose Schwarz-/Weiß-Darstellungen. Diese werden wir nun mit Bildern bereichern. Dazu dient uns das Image-Tag <img>. Da dieses Tag für das einzufügende Bild steht, gibt es dazu kein beendendes Tag. In aktuellen Browsern werden ohne Probleme Bilder in den Formaten GIF, JPEG und PNG dargestellt. Wer Wert auf Portabilität legt, beschränkt sich auf diese.

Zu jedem Image-Tag gehört zwingend das Attribut src=, das die URL des zu ladenden Bildes angibt. Es ist guter Stil, auf jeden Fall auch das Attribut alt= anzugeben, mit dem alternativer Text übergeben wird, der anstelle des Bildes angezeigt wird, wenn dieses aus welchem Grund auch immer nicht angezeigt wird. Hilfreich ist dieses Attribut auch für Benutzer von reinen Textbrowsern und nicht zuletzt für Sehbehinderte. Es kann auch noch ein erklärendes Attribut title= angegeben werden, dessen Text angezeigt wird, wenn die Maus über dem Bild schwebt.

Ein Image-Tag, dass das UCC-Logo einbindet, ist dieses:

<img src="ucc_logo.png" alt="UCC-Logo"
title="UpToDate Computer Club e.V.">

Wie im obigen Beispiel können Teile der URL des Bildes weggelassen werden, wenn seine Position relativ zur dargestellten HTML-Seite bekannt ist. Im obigen Beispiel liegt das Bild im gleichen Verzeichnis wie die HTML-Seite.

Aufgabe: Bilder

Peppe einen Beispieltext durch ein Bild auf.

Verwende ein Bild, um auf eine andere Seite zu verweisen. Wie müssen wohl <a> und <img> miteinander verbunden werden? Was ändert sich dadurch am veränderten Bild?

Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.