Bilder HTML

Man kann Bilder nicht einfach so in ein HTML Dokument "reinspeichern" oder "reinkopieren". HTML Dateien bestehen nur aus reinem/n Text/Zeichen. Die Bilder in HTML Dokumenten werden dort nur als Verweis angegeben. Die Bilder selber befinden sich an einer anderen Stelle auf dem Server, beispielsweise im Ordner "bilder".

Wie binde ich Bilder in HTML ein

Für Grafik- bzw. Bildeinbindungen steht uns in HTML das <img> Tag zur Verfügung (img = image = Bild). Es handelt sich um ein alleinstehendes Tag und muss von daher nicht geschlossen werden. Zwei wichtige Attribute, zum Bestimmen genauerer Einzelheiten , müssen dabei immer mit angegeben werden:

• Als erstes das "src" Attribut, welches zur Bestimmung der Grafik- bzw. Bilddatei und dem Ort dieser Datei dient (src = source = Quell).
• Sowie als zweites das "alt" Attribut, welches eine Pflichtangabe für jede Grafik- bzw. Bildeinbindungen ist. Der darin enthaltene Text stellt einen Alternativtext dar, für den Fall, dass die Grafik oder das Bild nicht angezeigt werden kann. Der Alternativtext im "alt" Attribut kann einzelne Worte enthalten oder auch mit einem kleinen Beschreibungstext des Bildes versehen werden.
• Beispiel Code:

  <img src="bilder/bild-datei.jpg" alt="bild">

Bei der Angabe von Bilder- und Dateinamen ist besonders auf die Groß- und Kleinschreibung zu achten. Es empfiehlt sich generell alles klein zu schreiben.

Weitere wichtige Attribute

Dies sind keine Pflichtangaben, jedoch für das Einbinden von Bilder in HTML sehr nützliche Attribute:

• width="..." - Die Breite (width) gibt man üblicherweise in Pixel oder Prozent an.
• height="..." - die Höhe (height) wird ebenso in Pixel oder auch Prozent angegeben.
• border="..." - Mit (border) kann man den Bildern Rahmen geben (Beispiel: border="2" = 2 Pixel dicker Rahmen). Die Farbe richtet sich dabei nach der Textfrabe.
• align="..." - Mit (align) kann man Bilder beispielsweise links ("left") oder rechts ("right") ausrichten.
• HTML <img> Tag Beispiel - mit allen oberen Attributen:

  <img src="bilder/bild-datei.jpg" alt="bild" width="100px" 
  height="50px" border="1" align="right">

Formate von Bilder in HTML

Das gängigste Format, welches auch von allen Browsern unterstützt wird, ist .jpg (Komprimierung möglich). Gefolgt vom .gif Format (Animationen möglich) und dem .png Format (Transparenz möglich) welches von den neueren Browsern unterstützt wird.