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
|
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
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
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
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.
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.