HTML Tutorial
[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2
] [ 1.3 ] [ 1.4
] [ 1.5 ] [ 1.6
] [ 1.7 ] [ 2.0
] [ 2.1] [ 2.2
] [ 2.3 ] [ 2.4
] [ 2.5
] [ 2.6
] [
2.7 ] [ 2.8
] [ 2.9 ] [ 3.0
] [ 3.1 ] [ 3.2
] [ 3.3 ]
Grafiken einbinden und ausrichten
HTML Quellcode:
<head> <title>Mustermanns Blumenladen</title> <style type="text/css"> <!-- body { background-color:#33EE00; color:#002000; font-family:Times; } .zentriert { text-align:center; } .hervorgehoben { font-family:Arial; font-size:200%; color:navy; } --> </style></head><body> <p class="zentriert"> <span class="hervorgehoben">Willkommen</span> </p> <p class="zentriert"> in Mustermanns Blumenladen </p> <p class="zentriert"> <img
src="./bilder/logo.gif" width="100" border="0"
alt="Willkommen"/> </p> </body></html>
Erklärungen:
Mit dem HTML-Element <img> werden Bilder eingebunden. Zwei Attribute sind dabei obligatorisch:
Das Attribut-Wert-Paar
src="Pfad
zur Quelle"
liefert die Pfad (URL) zum Bild.
Hier ist es eine relative Pfadangabe (was für eigene Grafiken
normalerweise die richtige Wahl ist), und zwar
heißt die Bilddatei logo.gif und befindet sich
im Verzeichnis bilder in demselben Verzeichnis wie
die HTML-Datei.
alt="Ersatztext" : Dieser Text wird angezeigt, während die Grafik geladen wird. Sollte die Grafik, aus welchen Gründen auch immer, nicht angezeigt werden, wird der Ersatztext angezeigt. Desweiteren wird der Text angezeigt, wenn der Besucher mit dem Mauszeiger auf die Grafik zeigt. Dieses Attribut ist nach XML obligatorisch für das img-Element.
Desweiteren gibt es noch folgende Attribute:
width="xxx"
: hiermit geben Sie die Breite in Pixel an
height="xxx"
: hiermit geben Sie die Höhe in Pixel an
border="xx"
: Rahmen um die Grafik, Angabe in Pixel
alt="Ersatztext"
: Dieser Text wird angezeigt, während die Grafik geladen wird. Sollte
die Grafik, aus welchen Gründen auch immer, nicht angezeigt werden,
wird der Ersatztext angezeigt. Desweiteren wird der Text angezeigt, wenn
der Besucher mit dem Mauszeiger auf die Grafik zeigt.
Desweiteren gibt es noch folgende formatierenden Attribute:
align="middle" : Schriftsatz
zentriert neben der Grafik
align="top" : Schriftsatz oben neben der
Grafik
align="bottom" : Schriftsatz unten neben
der Grafik
align="left" : Grafik linksbündig, Text
rechts umfliessend
align="right" : Grafik rechtsbündig,Text
links umfließend
[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2
] [ 1.3 ] [ 1.4
] [ 1.5 ] [ 1.6
] [ 1.7 ] [ 2.0
] [ 2.1] [ 2.2
] [ 2.3 ] [ 2.4
] [ 2.5
] [ 2.6
] [
2.7 ] [ 2.8
] [ 2.9 ] [ 3.0
] [ 3.1 ] [ 3.2
] [ 3.3 ]
©2003 de Vries