Grafiken einbinden

Da es sich bei XHTML-Dokumenten um reine ASCII-Textdateien handelt, müssen sämtliche Grafiken innerhalb einer Website 'importiert' werden: an der Stelle, an der die Grafik erscheinen soll, muss mit einem entsprechenden Befehl auf eine externe, selbstständige Grafikdatei verwiesen werden, die dann vom Browser geöffnet und an der angegebenen Position innerhalb der XHTML-Seite angezeigt werden soll.

Also handelt es sich bei einer XHtml-Seite, in die auch eine Grafik eingebettet wurde, immer um mindestens zwei Dateien: dem XHTML-Textdokument und der Grafikdatei.

Die am weitesten verwendeten Grafikformate sind das sog. GIF-Format (mit dem Suffix .gif) und das sog. JPEG-Format (.jpg).

<img src="grafikdateiname.gif" />

  • img: XHTML-Befehl zum Einbinden einer externen Grafik-Datei
  • src="grafikdateiname.gif": Attribut, welches dem Browser angibt, welche Grafik er öffnen soll und wo sie abgelegt ist
  • der <img />-Tag hat keinen Endbefehl, er steht für sich allein
Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>123 456</title>
</head>

<body>
<p>
<img src="walk.jpg" />123 456 789 101 112 131 415 161 718 192 021 222 324 252 627 282 930 313 234 353 637 383 940 414 243 454 647 484 950 515 253 545 657 585 960</p>
</body>
</html>

SO SIEHT'S AUS
 
 

 
Erklärung des Attributs 'src'

Dieses Attribut gibt dem Browser an, welche Grafik er öffnen soll und wo sie abgelegt ist (Pfadangabe), und zwar ausgehend vom geöffneten XHTML-Dokument!

Falls eine Grafik nicht gefunden wurde zeigt der Browser ein entspr. Ikon für die fehlende Grafik an:

Verweise auf Bilder im Unterverzeichnis
<img src="bilder/grafik.jpg" /> (aktuelles Verzeichnis, Unterverzeichnis bilder, Bild grafik.jpg)
<img src="bilder/menue/button.gif /> (aktuelles Verzeichnis, Unterverzeichnis bilder, Unteruntererzeichnis menue, Bild button.gif)

Der Slash '/' im src-Attribut stellt ein Steuerzeichen mit der Funktion 'wechsle hier in' dar.

Verweise auf Bilder im darüber liegenden Verzeichnis
<img src="../grafik.jpg" /> (darüber liegendes Verzeichnis, Bild grafik.jpg)
<img src="../../grafik.jpg" /> (zwei Verzeichnisse nach oben, Bild grafik.jpg)
<img src="../bilder/grafik.jpg" /> (darüber liegendes Verzeichnis, Unterverzeichnis bilder, Bild grafik.jpg)
 
Die Pfadangabe gibt also den Weg zur Grafik ausgehend vom geöffneten XHTML-Dokument wieder. Es werden die Positionen der Dokumente zueinander (innerhalb der Verzeichnisse) im XHTML-Dokument in Textform abgebildet. Wird nach der Angabe des Pfades die Grafik auf Betriebssystemebene (d.h. die Grafikdatei wird mit dem Mauscursor) manuell verschoben, bildet die Angabe des Pfades im XHTML-Dokument nicht mehr die 'wirkliche' Korrelation ab mit dem Ergebnis, dass der Browser die Datei nicht findet.
 

 
Angabe der Größe der Grafik:

<img src="grafik.jpg" width="200" height="150" />
 
width="200": Breitenangabe der Grafik; Wert ist ganze Zahl (Pixelwert) oder eine Prozentangabe (im Verhältnis zur Gesamtbreite des Browserfensters.
height="150": Höhenangabe der Grafik; Wert ist ganze Zahl (Pixelwert) oder eine Prozentangabe (im Verhältnis zur Gesamtbreite des Browserfensters.
 
Vorteile:

  • Browser kann den Raum, den die Grafik einnimmt, schon freihalten, bevor diese geladen wird (beschleunigt Seitenaufbau)
  • Größenangaben können manipuliert werden

SO SIEHT'S AUS
 

 
Angabe eines Alternativtextes:
<img src="grafik.jpg" alt="Was wird hier gezeigt" />

Vorteile:

  • Information wird angezeigt, auch wenn Grafik nicht geladen wird
  • Sehbehinderte erhalten Infos zum grafisch transportierten Inhalt (Stichwort 'barrierefrei')
  • Text wird von einigen Suchmaschinen indiziert

Abbildung eines Irgendwas
 

 
Ein-/Ausschalten eines Randes:
<img src="grafik.jpg" border="1" />

Vorteile:

  • erstellt einen sauberen, einen (oder mehr) Pixel breiten Rand um die Grafik
  • schaltet bei Grafiken als Verweise den Rand aus

SO SIEHT'S AUS  
 

 
Ausrichtung von Grafik zum Text
<img src="grafik.jpg" align="left" />

Durch Verwendung des bereits aus der Absatzmarkierung bekannten Attributs align="..." kann die Grafik neben den Text gestellt werden, d.h. der Text umfließt die Grafik.

Zulässige Attributswerte: left und right

Interessant ist hierbei die Differenz zwischen Position des <img />-Befehl in der XHTML-Konstruktion und die tatsächliche Position des Bildes im Browserfensters.

SO SIEHT'S AUS

Textumfluß gezielt beenden:
<br clear="all" />
Der Befehl <br /> mit dem Attribut clear="all" bewirkt, dass nachfolgender Text unterhalb der Grafik weiterlaufen soll.
 

 
Abstand zwischen Grafik und Text
<img src="grafik.jpg" vspace="20" hspace="30" />

Durch Verwendung Attributs vspace="Pixelwert" kann über und unter der Grafik ein unsichtbarer Rahmen (mit Pixelwerten) eingefügt werden. Der Rahmen tritt immer paarweise auf (hier: oben & unten).

hspace="Pixelwert" fügt links und rechts der Grafik einen unsichtbaren Rahmen ein. So kann z.B. ein Abstand zwischen Grafik und Fließtext erzwungen werden.

SO SIEHT'S AUS