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.
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.