3. HTML: Bilder einfügen

So kannst du Bilder in HTML-Seiten einfügen und ihr Verhalten zum Text beeinflussen

In diesem Kapitel lernst du, wie man mit HTML-Marken Bilder einfügt, generell mit Attributen Wertzuweisungen vornimmt, die Ausrichtung zum Text steuert und einen Rand um ein Bild erzeugt

Bild einfügen | Die Quellenangabe | Alternativer Text & Größenangabe | Ausrichtung zum Text | Rahmen und Randabstände
Wir brauchen: Computerraum

Wiederholung

Im letzten Kapitel haben uns damit beschäftigt, vorgegeben Text mit Überschriften, Absätzen und Listen zu gliedern, und einzelne Textpassagen durch Marken besonders hervorzuheben.

So fügst du ein Bild ein

Zuest öffnen wir wieder unsere Beispieldatei , die wir das letzte Mal mit Textmarken so schön verziert haben, desweiteren ein Bild vom Schulportal der Kapellenschule, das wir in unser Dokument einfügen wollen. Erstelle dazu eine Kopie des Bildes auf dem Schreibtisch. Wir suchen uns nun eine schöne Stelle im Quelltext des Dokuments aus, an der wir das Bild zeigen wollen. Nach dem ersten Absatz könnten wir es mal ausprobieren...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Schulprofil der Kapellenhauptschule</title>
</head>
<body>
<h1>Schulprofil der Kapellenhauptschule - Entwicklung einer
individuellen Schulhauskultur</h1>
<p>Unsere Arbeit ist gepr&auml;gt vom engen Zusammenwirken von
Sch&uuml;lern, Kollegen, Schulleitung und Eltern. Ziel ist es,
einen Lern- und Lebensraum zu schaffen, der die Entwicklung der
Persönlichkeit der Sch&uuml;ler f&ouml;rdert und den
Bed&uuml;rfnissen einer gemeinwesenorientierten Schulgemeinschaft
entgegenkommt.</p>              
<p>Nur wenn allt&auml;gliche Unterichtsarbeit und nach aussen

Mir klicken an diese Stelle nach dem ersten Absatz, machen Platz für eine neue Zeile und schreiben:

Persönlichkeit der Sch&uuml;ler f&ouml;rdert und den
Bed&uuml;rfnissen einer gemeinwesenorientierten Schulgemeinschaft
entgegenkommt.</p>
<img src="schulportal.jpg">
<p>Nur wenn allt&auml;gliche Unterichtsarbeit und nach aussen

Du siehst, bei der img-Marke läuft es nun ein bisschen anders als bei den Marken, die wir bisher verwendet haben. Mit dem img-Tag sagen wir dem Browser, das jetzt ein Bild kommt. Soweit ist alles klar. Aber wie sagen wir es dem Browser, wo er das Bild findet? Man könnte ja meinen, das ginge ebenso wie bei den schon bekannten Textmarken, indem man vielleicht zwischen einem Anfangs- und End-tag den Namen des Bildes reinschreibt.
So ist es aber ganz und gar nicht!

Zu <img> gibt es wie zu hr und br keine Endmarke, es ist ein sogenanntes leeres Element! Wie also sage ich's dem Browser, wo er mein Bild findet? Antwort: mit dem src-Attribut! Man nennt das auch die Quellenangabe, von src (=Abk. für source), die Quelle. Man schreibt es einfach in die Marke <img> dazu, und zwar so:

Übersicht: die img-Marke und das src-Attribut
Marke	<	img	src=	"schulportal.jpg"	>

Bedeutung	Achtung, jetzt kommt	ein Bild,	die Quelle ist	der Dateiname,	das war's

Die Quellenangabe

So erfolgt die Quellenangabe für ein Bild in HTML:

Das Attribut (in diesem Fall src) wird gefolgt von einem istgleich-Zeichen (=). Danach erfolgt die Wertzuweisung an das Attribut (in diesem Fall eine Pfadangabe) in Anführungszeichen (""). In unserem Beispiel befinden sich das HTML-Dokument, in welches das Bild eingefügt wird, und das Bild im selben Verzeichnis. Die Pfadangabe lautet dann src="schulportal.jpg". Befindet sich das Bild in einem anderen Verzeichnis, musst du die Regeln für Pfadangaben in HTML beachten, damit das Bild vom Browser auch gefunden werden kann.

Hier eine grobe Übersicht:

Allgemeines über Pfadangaben in HTML

URI Wenn sich die Datei auf einem anderen Server befindet, so erfolgt die Pfadangabe über den URI.
Beispiel:http://www.los.webdaum.de/.
Diese Angabe führt ins Wurzelverzeichnis und öffnet die index.htm, also die Startseite.
Ist unsere Datei nicht im Wurzelverzeichnis, sondern in einem Unterverzeichnis abgelegt, hängst du den Namen des Verzeichnisses, eingeleitet von einem Schrägstrich an.
Beispiel: http://www.los.webdaum.de/img. In diesem Verzeichnis img sind die Bilder abgelegt. Ein Zugriff auf das komplette Verzeichnis hätte aber keinen Erfolg, da du über keine Zugriffsrechte verfügst. Füge also noch einen Dateinamen hinzu, und du kannst auf die so bezeichnet Quelle zugreifen:
Die Angabe http://www.los.webdaum.de/img/los_webdaum.gif in der Quellenangabe eines Bildes bindet diese Grafik in die Seite ein:

Über den URI hast du den vollen Zugriff auf Millionen von Dateien im ganzen Internet. Natürlich gehört es nicht gerade zum guten Ton, auf diese Art fremdes Material in das eigene Webprojekt einzugliedern. Pfadangaben über den URI sind aber dennoch sehr wichtig, zum Beispiel beim Verweisen auf ein fremdes Projekts mit Hyperlinks.
Absolut Befindet sich die einzubindende Datei auf demselben Server (der Normalfall), kannst du mit einer absoluten Pfadangabe ( nur der Schrägstrich / ) direkt auf das Wurzelverzeichnis referenzieren.
Den URI http://www.los.webdaum.de lässt du weg, stellvertretend bleibt der Schrägstrich. Die Beispielgrafik los_webdaum.gif kannst du also auch so ansprechen: /img/los_webdaum.gif.
Nachteil: Das funktioniert so aber nur bei Dateien, die nachher auf dem Server abgelegt und über das Internet abgerufen werden.
Beim Test auf der eigenen Festplatte sucht der Browser - z.B unter Windows - nach der Datei auf dem falschen Pfad C:\img\los_webdaum.gif und findet natürlich nichts.
Die nächste Methode löst auch dieses Problem:
Relativ Mit der dritten und letzten Art der Einbindung, nämlich mit relativen Pfadangaben, bindest du Dateien ein, die sowohl zum lokalen Test auf deiner Festplatte, als auf dem Server vorhanden sind. Dann kannst du die Seiten lokal testen, ohne mit dem Internet verbunden zu sein. Dazu wird der Pfad zur Datei, die du einbinden willst relativ angegeben, dass heisst der Punkt, von dem du ausgehst, ist die Datei, von der aus du die Angabe machst, und nicht das Wurzelverzeichnis.
Hier gibt es vier Möglichkeiten:
1. Die Datei ist im selben Verzeichnis:
  Es genügt der Dateiname.
  Beispiel: hyperlinks.html
2. Die Datei befindet sich ein Verzeichnis tiefer:
  Der Name des Verzeichnisses und ein Schrägstrich müssen noch davor.
  Beispiel: inhalt/hyperlinks.html
3. Die Datei befindet sich im übergeordneten Verzeichnis: Um in der Ordnerhierarchie einen Ordner höher zu springen, notierst du: ../
  Sind es zwei Ordner höher also: ../../
  Dann notierst du den Dateinamen.
  Beispiel: ../inhalt.htm
4. Die Datei befindet sich in einem nebengeordneten Verzeichnis: Zuerst wechselst du mit ../ ins übergeordnete Verzeichnis. Dann geht es mit der Ordnerangabe: Ordername/ wieder eins tiefer ins nebengeordnete Verzeichnis. Zum Schluss noch den Dateinamen anhängen.
  Beispiel: ../inhalt_schule/inhalt.htm

Mehr zu Pfadangaben unter http://selfhtml.teamone.de/html/allgemein/referenzieren.htm.

Tipps, wie du einen Hyperlink auf ein Bild setzt in HTML4: Links und Anker setzen/Extern.

So kannst du das Bild mit weiteren Attributen ausstatten

Wir klicken nochmal an diese Stelle nach dem ersten Absatz, machen Platz für zwei weitere Zeilen und schreiben:

<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320">

Verpflichtend ist die Angabe des alt-Attributs. Damit wird beschreibender Text für das Bild angegeben. Dieser Text erscheint:

solange, bis das Bild komplett geladen ist
andauernd, wenn das Bild vom Browser nicht gefunden werden kann
nur kurz, wenn man die Maus auf dem Bild parkt (aber nicht bei allen Browsern)

Nicht zwingend vorgeschrieben ist dagegen die Angabe der genauen Bildmaße. Sie sollten aber dennoch in jedem Fall angegeben werden, damit der Browser während des Ladevorgangs schon genügend Platz für das Bild reserviert. Es kommt sonst zu unschönen Effekten, wenn die komplett geladene Grafik den bereits geladenen Text schwups wieder vom Bildschirm fegt.
Die Angabe erfolgt mittels der Attribute width = "Breite in Pixeln" und height = "Höhe in Pixeln".
Um die Pixelgröße einer Bilddatei zu bestimmen musst du sie mit einem Bildbearbeitungsprogramm öffnen. Ein solches Programm ist zum Beispiel IrfanView, dass du später noch genauer kennenlernen wirst, wenn es in Los!-web an die digitale Bildbearbeitung geht.

So lässt du den Text um das Bild herumfließen

Mit Hilfe des align-Attributs kannst du die Ausrichtung des Bild zur Seite und den Textfluss um das Bild kontrollieren. Im Beispiel siehst du, dass das align-Attribut auf den Wert "left" gesetzt wurde. Dies bewirkt in jedem Fall eine Ausrichtung des Bildes am linken Seitenrand. Der Text fließt nun rechts auf ganzer Länge um das Bild herum.
TIP: Probiere auch einmal aus, was passiert, wenn du align auf "right" setzt!

<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320"
align="left">

Tip:
Das align-Attribut kannst du auch auf Überschriften und Absätze anwenden!

So zeichnest du einen Rahmen um das Bild und erzwingst einen größeren Abstand zum Text

Die Auswirkung im Browser zeigt Beispiel 6

<img src="schulportal.jpg"
alt="Schulportal der Kapellenschule Augsburg"
width="240" height="320"
align="right"
border="1"
hspace="20">

Das Bild erhält einen 1 Pixel-breiten Rahmen. Die Farbe des Rahmens ist in jedem Falle schwarz. (Rahmen in anderen Farben und vieles mehr kannst du erzeugen, wenn du die Erweiterung der HTML, die CSS =Cascading Style Sheets anwendest. Doch dazu später in einem kurzen Ausblick). Breitere Rahmen um das Bild erreichst du mit größeren Zahlen. Mit border="0" unterdrückt man den bunten Rahmen, den Browser automatisch um das Bild zeichnen, wenn es als Link funktioniert.

Mit hspace="20" erzwingst du einen horizontalen Abstand (Abstand rechts und links) von 20 Pixeln zum umfließenden Text. Randabstände oben und unten erreichst du mit dem Attribut vspace.

Achtung:
Die Attribute align, border, hspace und vspace sollen in Zukunft aus dem HTML-Standard verschwinden und sollten deshalb eigentlich nicht mehr verwendet werden. Mit der Sprache CSS und dem style-Attribut lassen sich Ausrichtung, Rahmen, Randabstände und vieles mehr noch sehr viel besser einstellen.
Wie das geht lernst du in Kapitel 7. HTML: CSS verwenden.

Weiter geht's:

HTML-Schule