Einbinden von Grafiken in HTML-Seiten

Ein einzubindendes Bild muß im GIF-Format (Graphics Interchange Format) oder im JPEG-Format (Joint Photographic Experts Group) vorliegen.
Es wird mit dem Tag <img> eingebunden. Das Tag kann die Attribute "src", "alt" und "align" enthalten.

Beispiele

Logo

Logo
Wappen der Stadt Rüthen Wappen von Rüthen

Regeln für die Angabe des Verzeichnispfades

Damit der Browser die Grafik findet und anzeigen kann, muß der Ort, an dem die Grafik gespeichert ist, angegeben werden. Nehmen wir an, die HTML-Datei befindet sich im Verzeichnis F:\BENUTZER\GRUPPE6\DATEN.

Dann ist die Datei "LOGO.GIF" folgendermaßen einzubinden (relative Adressen):

src="LOGO.GIF" - Die Datei befindet sich ebenfalls im Verzeichnis F:\BENUTZER\GRUPPE6\DATEN.
src="LOGO.GIF" - Die Datei befindet sich im Verzeichnis F:\BENUTZER\GRUPPE6\DATEN\BILDER.
src="../LOGO.GIF" - Die Datei befindet sich im Verzeichnis F:\BENUTZER\GRUPPE6\.
src="../../GRUPPE9/POST/LOGO.GIF" - Die Datei befindet sich im Verzeichnis F:\BENUTZER\GRUPPE9\POST.
src="HTTP://WWW.RUETHEN.DE/FSG/LOGO.GIF" - Die Datei befindet sich im Verzeichnis FSG auf dem Server WWW.RUETHEN.DE im Internet (absolute Adresse).
Beachte die Verwendung des normalen Schrägstrichs (/) alstelle des Backslash (\) in den Pfadangaben. "../" bedeutet: Eine Verzeichnisebene nach oben.

Werden bei der Erstellung einer Site relative Adressen verwendet, kann die Site ohne Probleme auf einen Server kopiert werden, ohne daß die Pfadangaben angepaßt werden müssen.

Aufgaben:

Erlätere anhand des Quelltextes dieser Seite die Bedeutung der drei Attribute des IMG-Tags!
Entwerfe eine erste Seite für das Friedrich-Spee-Gymnasium Rüthen! Benutze dazu die bisher erlernten Gestaltungselemente Text, Listen, Überschriften, horizontale Linien und Grafiken. Brauchbare Bilder findest du im Datenverzeichnis der Gruppe.

Zurück zum Inhaltsverzeichnis