Bei Grafiken handelt es sich um Inline-Elemente 'img'. Diese sind also innerhalb von Block-Elementen zu fassen.

Das 'img' Tag ist ein Standalone Tag und muss in HTML nicht abgeschlossen werden. (Bitte bedenken Sie in XHTML sind alle Tags zu schliessen)

Auf Grund der verschiedenen Grafikformate sollten Sie für den jeweiligen Verwendungszweck innerhalb von HTML die richtige auswählen.

Übliche Grafikformate sind JPEG, GIF und PNG.

!!!Zu jeder Grafik ist IMMER ein alternativ-Text mit 'alt' anzugeben.!!!

Desweiteren haben Sie die Möglichkeit mit 'border' einen Rahmen um Ihre Grafik zeichnen zu lassen. Diese Eigenschaft gilt aber bereits als veraltet und sollte nicht mehr verwendet werden.

Und die wichtigsten Eigenschaften sind natürlich 'width' und 'height' um die Größe der anzuzeigenden Grafik festzulegen.

<p><img src="firma_1.jpg" alt="unsere Firma ..." width="200px" height="300px"></p>

Binden Sie innerhalb von Text eine Grafik ein, so haben Sie mit 'align' die Möglichkeit den umgebenen Text oben, mittig oder unten vom Bild auszurichten.

Mit 'align' kann die Grafik auch nach links oder rechts ausgerichtet werden. Der Text umfließt die Grafik dann auf der jeweils anderen Seite.

<p>Das ist ein Bild <img src="firma_1.jpg" alt="unsere Firma ..." width="150px"  
height="100px" align="middle"> unserer Firma.</p>

Beispiel

top - oben

middle - mittig

bottom - unten

left - links (Text fließt rechts um die Grafik)

right - rechts (Text fließt links um die Grafik)

Mit hspace und vspace lassen sich zwischen Text und Grafik Abstände erzwingen.

hspace - Abstand links und rechts von der Grafik

vspace - Abstand oben und unten von der Grafik

<p>Das ist ein Bild <img src="firma_1.jpg" alt="unsere Firma ..." width="150px"  
height="100px" align="left" hspace="10px" vspace="10px"> unserer Firma.</p>

Beispiel

Linktipps: