HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Grafik anzeigen ] [ Rahmen um Grafik ] [ Grafik im anderen Ordner ] [ Anzeigebereiche ] [ Grafik mit Text umfliessen ] [ Hintergrundgrafik ] [ Hintergrund wiederholen ] [ Wasserzeichen ] [ Linien ]

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&szlig;t 
    rechts um die Grafik herum.<br>
  Rund um die Grafik werden 10 Pixel Platz gelassen 
    <br  style="clear:left;">
  Jetzt l&auml;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;">

back top next