Sie befinden sich hier: Willkommen bei proggen.org! » HTML-Tutorial » Grundlagen von HTML » Bilder

Seitenleiste

Community

Webtutorials

Inhaltsverzeichnis

Bilder

Welche Homepage kommt heute ohne Bilder aus? Seien es Hintergrundbilder, kleine Animationen am Rand, große Illustrationen des Themas der Homepage oder einfach zur Verschönerung - keine moderne Homepage kommt ohne Bilder aus.

Bilder einbinden

Folgender HTML-Code reicht um ein Bild mit dem Pfad BILDPFAD einzubinden. Das Bild wird dann automatisch vom Browser geladen und angezeigt. Laut W3-Standard muss ein Bild ein alt-Attribut besitzen. 

<img src="BILDPFAD" alt="ALTERNATIVTEXT">

Auch bei Bilder ist es möglich als BILDPFAD relative und absolute Pfadangaben zu machen.

Attribute eines Bildes

Attribut Wirkung auf das Bild
width Verändert die Breite des Bildes; behält bei Nichtangabe von height die Proportionen bei
height Verändert die Höhe des Bildes; behält bei Nichtangabe von width die Proportionen bei
border legt die Größe des Randes des Bildes fest
src legt den Pfad zur Bilddatei fest
name legt den Namen des Bildes fest (vor allem für PHP und JS von Relevanz)
id legt die ID des Bildes fest (vor allem für PHP und JS von Relevanz)
alt alternative Anzeige (Text) wenn der Browser keine Bilder anzeigt, oder das Bild nicht findet
title der Titel des Bildes (wird als Tooltip angezeigt)

Beispiel: 

<img src="http://www.proggen.org/lib/exe/fetch.php?cache=&media=aufgaben:dreieck1.png" 
 alt="Ein Bild" width="200px" height="20%" border="0px" name="Bild" id="dasbild" 
 title="Sie sehen ein Bild">

Anzeigebeispiel:
Ein Bild

Bild anstelle eines Linktextes

Es ist ja auch möglich Tags zu schachteln. So kann ein Bild anstelle des normalen Linktextes verwendet werden: 

<a href="index.htm"><img src="bild.jpg" alt="ein Bild"></a>

Nun wird das Bild angezeigt, klickt man darauf, wird der Link aufgerufen. Meistens erscheint das Bild innerhalb eines Rahmens. Mithilfe des Attributs border mit dem Wert 0 kann dieser ausgeblendet werden. 

<a href="index.php"><img src="bild.jpg" alt="ein Bild" border="0px"></a>

Im nächsten Kapitel geht es darum Elemente einer HTML-Seite mithilfe von Tabelle auszurichten.