Computerkurse von Dietmar Becker

Was währe das Web ohne Bilder! Zwar kann man auch alles im Text beschreiben, doch ein Bild, eine Grafik kann es besser verdeutlichen. Ein Bild sagt mehr als tausend Worte!

Ein besonderes Augenmerk liegt dabei auf zwei Grafikformate: das *.jpeg, bzw. *.jpg Dateiformat (Joint Photographic Experts Group) und das *.gif Dateiformat (Grafics Interface Format), da beide Formate eine hohe Kompression der Daten aufweisen. Dadurch werden Ladezeiten verkürzt und der Surfer muss nicht Minutenlang auf den Aufbau des Bildes warten!
(Mehr über Grafikformate, Konvertierung, Animationen, etc… im Folgekurs).

Eingefügt wird das Bild mit dem Tag <img> (engl.: Image = Bild), gefolgt von dem Attribut src (engl.: source = Quelle), welches auf den Speicherort und den Dateinamen verweist, z.B.:
<img src="sonne.jpg">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Bilder</title>
</head>
<body>
<img src="sonne.jpg">
</body>
</html>

Dies schreibe ich in die Datei bilder_01.html. Von dem Speicherplatz dieser Datei aus sucht der Browser nun nach einer Bilddatei Namens „sonne.jpg“ und fügt es im Browserfenster ein.

Nun könnten wir noch das wie und wo des Bildplatzes näher bestimmen, wie z. B. mit den Attributen Rahmen (border), rechtsbündig (align="right") und einen alternativen Text (alt="hier solltet Ihr eine Sonne sehen") eingeben. Eine saubere Programmierung verlangt auch die Attribute widht (Weite) und height (Höhe) des Bildes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Bilder</title>
</head>
<body>
<div align="right"><img src="sonne.jpg" width="400" height="200" border="5" alt="hier solltet Ihr eine Sonne sehen"></div>
</body>
</html>

Im Grunde genommen alles recht einfach. Noch einfacher ist es mit HTML-Editoren, die dem Anwender Hilfestellung geben. Noch einfacher geht es mit Tools wie Frontpage oder Dreamweaver. Doch das passende Grundwissen sollte man sich aneignen – schon alleine deswegen, um Fehler besser aus dem Weg räumen zu können.

Beim Bildeinfügen stößt man meist auf eins dieser Probleme:

1. Groß / Kleinschreibung nicht berücksichtigt
2. Umlaute
3. Fehler in der Pfadangabe (auch \ statt /).

1.) Würde ich im Quellcode auf die Datei Sonne.JPG statt sonne.jpg verweisen, so hätte ich auf einem Windows - Rechner den gleichen Erfolg: der Browser würde mit die Datei sonne.jpg anzeigen (das ist der tatsächliche Name), wie in der Datei 08-bilder.html (HTML_I.zip).
Veröffentliche ich jetzt diese Seite auf einem Linux - Server (die meisten Webserver im Netz laufen auf Linux ;-)) bekäme ich nur den Alternativtext angezeigt.
Auflösung: Linux - Rechner sind case sensitive (Unterscheiden zwischen Groß und Kleinschreibung), die Datei Sonne.JPG existiert nicht (die Datei heißt sonne.jpg), und kann folglich nicht angezeigt werden.
TIPP: Es ist egal, ob Sie die Dateinamen und Dateinamenserweiterungen groß oder klein schreiben, nur gewöhnen Sie sich an, die Dateinamen/serweiterungen IMMER GROß oder IMMER KLEIN zu schreiben.

2.) Auch Umlaute könnten zur Stolperfalle werden – am besten, Sie vermeiden Umlaute wie ä, ö und ü und verwenden stattdessen die Schreibweise ae, oe oder ue an.

3.) Fehlende oder falsche Pfadangabe. Dafür sollte man den Unterschied zwischen relativer und absoluter Pfadangabe kennen lernen und verstehen.
Da diese Problematik auch bei der Verlinkung auftritt, habe ich ihm ein extra Kapitel gewidmet: Hyperlinks - relativ oder absolut.
Auch sollte man in der Pfadangabe immer einen Slash (/) statt ein Backslash (\) setzten. Der Microsoft Internet Explorer ignoriert zwar diesen Unterschied, Netscape besteht jedoch auf die korrekte Schreibweise mit / in der Pfadangabe, sonst kann er der Pfadangabe nicht folgen.

zurück zum Seitenanfang