[Download des Kurses zum Offline-Betrieb]
c;-) webmichis HTML-Kurs

Bilder in einer HTML-Datei

Geeignete Formate


[zum Inhalt]

 

Grafiken einbinden

<img src="[Grafikquelle]" alt="[Text]">
 (img = image = Bild, src = source = Quelle)
[Grafikquelle] gibt Ort und Dateiname der Grafik an (siehe unten);
[Text] wird im Browser angezeigt, wenn man den Mauszeiger auf das Bild bewegt; das alt-Attribut kann entfallen; 
<img src="google.gif">
<img src="google.gif" alt="Suchmaschine">
Suchmaschine
 Bilddatei (Quelle) befindet sich im gleichen Verzeichnis wie die aufrufende HTML-Datei. 
<img src="http://www.fri4mi.de/webmichi/
inhalt/wemi_am_ani.gif">
 Bilddatei (Quelle) befindet sich auf einem anderen WWW-Server wie die aufrufende HTML-Datei.
Bildanzeige funktioniert hier nur bei Online-Betrieb.
Weitere Möglichkeiten 
<img src="verzeichnis/datei.gif">
<img src="verzeichnis/unterverz/datei.gif">
<img src="../datei.gif">
<img src="../../../datei.gif">
<img src="../woanders/datei.gif">
 aufgerufene Bilddatei in Verzeichnis unterhalb
... in Verzeichnis weiter unterhalb
... ein Verzeichnis höher
... drei Verzeichnisse höher
... in Verzeichnis unterhalb des nächsthöheren
[zum Inhalt]

 

Breite und Höhe von Grafiken

<img src="google.gif" width=200 height=78>
 die Attribute Breite (width) und Höhe (height) eines Bildes (in Pixel) sollte man immer mitangeben, da dann der Seitenaufbau im Browser schneller erfolgt.
Weitere Möglichkeiten 
<img src="google.gif" width=100>
 
<img src="google.gif" height=100>
 
<img src="google.gif" width=36 height=100>
 
<img src="" width= height=>

Experimentiere, indem du beliebige Bildadressen (auch aus dem Internet, z.B. http://home.t-online.de/home/FriedMich/kopfware/kopfware_schulsv.gif) und verschiedene Werte für die Breite und die Höhe einsetzt!
[zum Inhalt]

 

Grafik in einen Link einbinden

<a href="index.htm"><img src="butinhalt.gif"
 height=30></a>
Sprung zum Inhalt durch Anklicken der Grafik. 
<a href="index.htm"><img src="butinhalt.gif"
 height=30 border=0></a>
WWW-Browser ziehen um eine Grafik einen Rahmen (s. o.), wenn diese als Link eingebunden wird. Dieser Rahmen kann durch das Attribut border=0 im img-Tag unterdrückt werden.

  c;-) webmichis HTML-Kurs  [zum Inhalt]

Letzte Änderung: