HTML / Grafik Einbinden

Artikel von: Birgit Bachmann

So werden Grafiken und Bilder richtig eingebunden.
Bilder werden normalerweise mit dem <img src="Bild.Format">-Tag in HTML-Dokumente eingefügt:

Der Code beginnt mit <img src=, danach kommen der Name und das Format des Bildes, die in Anführungszeichen gesetzt werden, der Abschluss erfolgt mit >.

Beispiel:

   <img src="bild.gif">

Wenn sich Euer Bild nicht im gleichen Verzeichnis wie Eure HTML-Datei befindet, muss der exakte Dateipfad angegeben werden.

1. Relative Adressierung

Handelt es sich dabei um ein untergeordnetes Verzeichnis:

<img src="kinder/teddy.gif">

Hier ist es ein übergeordnetes Verzeichnis:

<img src="../teddy.gif">

...und nun ein gleichberechtigtes:

<img src="../kinder/teddy.gif">

2. Absolute Adressierung

Ihr könnt Eure HTML-Seiten aber auch mit Bildern auflockern, die sich auf anderen Servern befinden. Hier muss die absolute Adresse angegeben werden.

<img src="http://www.homepage-total.de/_menue/bilder/hpt.gif">

Als Beispiel seht Ihr hier das Banner von homepage-total.de.

3. Alternativer Text

Es ist sinnvoll, zum Bild eine Textalternative anzubieten, da Grafiken nicht immer beim Anwender angezeigt werden können. Dazu referenziert Ihr die Grafik wie üblich, gebt aber, bevor der Tag geschlossen wird, den gewünschten Text an:

<img src="bild.gif" alt="Dies ist ein kleines Bild.">

Dies ist ein kleines Bild

Hier steht jetzt ein Text, da das Bild nicht erscheinen kann.

Das könnte Sie interessieren:

Automatische Texteingabe - Automatische Texteingabe (autocomplete) in Formularfeldern verhindern oder erlauben.

Linie zwischen Bild und Link entfernen - Bild und Text wird in einem Link eingebunden. Dazwischen entsteht aber eine hässliche Linie. So einfach können Sie diese entfernen...

Kommentare - Ein HTML- oder JavaScript-Quelltext, der zum Beispiel mit Leerzeilen und Einrückungen übersichtlich aufgebaut ist und an entscheidenden Stellen Umbrüche und Kommentare aufweist, ist deutlich leichter zu pflegen.

Farbfamilie

Umlaute, Sonderzeichen, Unicode und ANSI-Code

Frameset Vorlagen (5)

Ladehinweis bei großen Bildern anzeigen - Große Bilder sollten mit einem Ladehinweis erscheinen, damit der Besucher die Seite nicht verlässt bevor er das Bild gesehen hat.

Der Input-Tag (1) …mehr