Grafik in der HTML anzeigen
Sicherlich wollen Sie auch Bilder auf Ihrer Homepage anzeigen. Bilder sollten das Format .jpg,
.png oder .gif haben.
GIF-Dateien haben den Vorteil, das diese schnell geladen werden und angezeigt werden. Animationen
und transparente Farben sind möglich. Nachteil dieses Format ist, das maximal 256 Farben
möglich sind.
JPEG-Dateien (.jpg, .jpeg oder .jpe) haben den Vorteil, dass diese, wie GIF, sehr gut komprimiert
wird. Der Vorteil gegenüber GIF ist, dass bis zu 16,7 Millionen Faben möglich sind. Der
Nachteil ist, je höher der Kompressionsfaktor, je unschärfer wird das Bild.
Das PNG-Format wurde eigens für das Web konzipiert. Es bietet eine verlustfreie Kompression wie
beim GIF-Format, weniger kompremiert werden allerdings Fotos. Bietet 16,7 Mio Farben incl. transparente
Farben, allerdings sind keine Animationen möglich.
Zum anzeigen der Grafiken dient der Befehl:
<img src="Dateiname des Bildes" alt="Mein Bild">
(img = image = Bild, src = source = Quelle). Der Text hinter dem alt=
(alt = Alternativtext)
gibt an, welcher Text angezeigt wird, falls die Grafik nicht vorhanden bzw. nicht geladen werden kann.
Außerdem wird dieser angezeigt, wenn die Maus über der Grafik parkt.
Hinweis: Obwohl die Homepage auch ohne den alt
-Attribut richtig angezeigt wird, ist es laut
Richtlinien notwendig dieses alt
-Attribut immer anzugeben.
Rahmen um Grafik
Möchten Sie einen Rahmen hinzufügen, dann füge border hinzu:
<img src="Dateiname des Bildes" alt="Mein Bild"
style="border: solid 1px #FFFF00;">
Wird dieses Attribut nicht angegeben wird normalerweise kein Rahmen um die Grafik angezeigt. Anders bei Verweise
mit Grafik. Hier wird immer ein Rahmen hinzugefügt, es sei denn, Sie notieren:
<img src="Dateiname des Bildes" alt="Mein Bild"
style="border: none;">
Hier finden Sie mehr zum Thema Rahmen.
Grafik im anderen Ordner
Liegt das gewünschte Bild in einem anderen Ordner, so muss dieser natürlich mit angegeben werden:
<img src="./ordner/Dateiname des Bildes" alt="Mein Bild">
Liegt dieser Ordner sogar im übergeordneten Verzeichnis der HTML-Datei, so müssen zwei Punkte am Anfang
stehen.
<img src="../ordner/Dateiname des Bildes" alt="Mein Bild">
Man kann auch eine Internetadresse angeben
<img src="http://www.adresse.de/ordner/dateiname.jpg" alt="Mein Bild">
Größe der Grafik
Zusätzlich kann man auch die Größe des Bildes angegeben werden.
<img src=". /ordner/dateiname.jpg" alt="Mein Bild"
style="width: 200px; height: 150px;">
Anzeigebereich eingrenzen
Möchten Sie von einer Grafik nur einen Ausschnitt anzeigen lassen, dann benutzen Sie den Stylesheet
clip:rect(10px, 50px, 50px, 10px)
. Mit rect
geben Sie an, dass es sich um ein Rechteck
handelt, was zur Zeit noch die einzige mögliche Auswahl ist. In Zukunft soll aber auch Kreise bzw. Ellipsen
oder Polygone möglich sein. Dahinter folgen die Koordinaten des Bildes in der Reihenfolge: oben, rechts, unten,
links. Dieses Ist wird allerdings nur richtig angezeigt, wenn auf die URL in der Dokument-Deklaration verzichtet
wird. Ebenfalls muss das position:absolute
angegeben werden.
<!DOCTYPE HTML">
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Etwas Bild</title>
</head>
<body>
<div style="position:absolute; top:50px; left:10px;
clip:rect(28px, 392px, 86px, 5px);">
<img src="../bilder/logo.jpg" style="width: 428px; height: 115px;
border: 0;" alt="Logo">
</div>
</body>
</html>
Das ganze sieht dann so aus
Text um Grafik fließen lassen
Mit folgenden Befehl richtesn Sie die Grafik rechts aus. Der nachfolgende Text fließt dann links um die
Grafik herum.
<img src="bild.gif" alt="Bild" style="float:left;
margin-right:10px; margin-bottom:10px; width: 120px; height: 98px">
Um die Grafik links auszurichten, und den Text rechts um die Grafik zu leiten, benutzen Sie den Befehl "float:left"
Außerdem gibt es noch vertical-align:text-top
, wobei der Text obenbündig zur Grafik ausrichtet,
vertical-align:middle
für mittig zur Grafik ausrichten und mit vertical-align:text-bottom
wird der Text untenbündig zur Grafik ausgerichtet.
Um Abstand zwischen der Grafik und umfließenden Text zu bestimmen, fügen Sie das Attribut margin-right:20px
und margin-bottom:10px
hinzu. Mit margin-right
wird der Abstand in Pixel rechts der Grafik
bestimmt und mit margin-bottom
der Abstand unterhalb der Grafik.
Mit dem Befehl <br style="clear:left">
wird der automatische Textumbruch unterbrochen, und
wird unter der Grafik fortgesetzt.
Der komplette Code kann dann so aussehen:
<img src="bild.gif" alt="Bild" style="float:left;
margin-right:10px; margin-bottom:10px; width: 167px; height: 55px">
<p>Diese Grafik ist links ausgerichtet, und der Text fließt
rechts um die Grafik herum.<br>
Rund um die Grafik werden 10 Pixel Platz gelassen
<br style="clear:left;">
Jetzt läuft der Text unter der Grafik normal weiter.</p>
Das ganze sieht so aus
Hintergrundgrafik
Möchtesn Sie den Hintergrund nicht nur einfarbig Darstellen, dann haben Sie die Möglichkeit im Body-Tag
diese Grafik anzuzeigen:
<body style="background-image:url(bilder/bild.jpg)" >
Das ganze sieht dann so aus
Hintergrundgrafik wiederholen
Normalerweise wird die Hintergrundgrafik über den gesamten zur verfügung stehenden Platz wiederholt. Mit den
Mit background-repeat:
können Sie dieses Verhalten steuern.
<html>
<head>
<title>Test</title>
...
</head>
<body>
<div style="background-image:url(xygrund.gif); background-repeat:repeat-x;
margin:40px; border:thin solid #FF0000; font-size:150%">
<p>Mit<br>background-repeat:repeat-x<br>wird das Untergrundbild<br>
nur in einer Zeile wiederholt.</p>
</div>
<div style="background-image:url(xygrund.gif); background-repeat:repeat-y;
margin:40px; border:thin solid #FF0000; font-size:150%">
<p>Mit<br>background-repeat:repeat-y<br>wird das Untergrundbild<br>
nur in einer Spalte wiederholt.</p>
</div>
<div style="background-image:url(xygrund.gif); background-repeat:no-repeat;
margin:40px; border:thin solid #FF0000; font-size:150%">
<p>Mit<br>background-repeat:no-repeat<br>wird das Untergrundbild<br>
nicht wiederholt.</p>
</div>
</body>
</html>
Das ganze sieht dann so aus
Hintergrundbild Position
Sie haben auch die Möglichkeit das Hintergrundbild an eine bestimmte Position mit
background-position:
zu Platzieren. Intressant ist dieser Stylesheet mit
background-repeat:no-repeat;
:
<html>
<head>
<title>Background-Position</title>
<style type="text/css">
body {
background-image:url(karten.gif);
background-repeat:no-repeat;
background-position:50px 50px;
background-color:white;
}
</style>
</head<
<body>
<h1>Kartenblatt</h1>
</body>
</html<
Das ganze sieht dann so aus
Hintergrundgrafik als Wasserzeichen
Um zu verhindern, dass die Hintergrundgrafik mitgescrollt wird, verwenden Sie das CSS-Stylesheet
background-attachment: fixed;
.
<html>
<head>
<title>Test</title>
...
</head>
<body style="background-image:url(xygrund.gif); background-attachment:fixed;">
<div style="font-size:150%">
<p>Mit<br>background-attachment:fixed<br>
wird das Untergrundbild<br>nicht Mitgescrollt.</p>
...
</div>
</body>
</html>
Das ganze sieht dann so aus
Linien ziehen
Mit den Befehl hr
(hr = horizontal rule = Querlinie) können Linien gezogen
werden.
<hr>
Mit den Style-Attribut width
geben Sie die Länge und mit height
die
Breite an. Außerdem kann mit background-color
die Farbe bestimmt werden, und mit
text-align
die Ausrichtung. Zusätzlich kann mit border
ein Rahmen um
die Linie definiert werden.
<hr style="width:200px; background-color:#FF0000; height:8px;
text-align:center; border:2px solid #0000FF;">