Bilder
Beispiel
Bilder beleben eine Webseite. Der Quelltext unten zeigt, wie man ein Bild einbindet.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Steckbrief von Bailey</title>
</head>
<body>
<h1>Steckbrief</h1>
<p><img alt="Foto von Bailey" src="img/bailey.jpg"/></p>
<p>
Ich heiße Bailey. Ich lebe in der Nähe
von Kaiserslautern.
</p>
<p>
Ich interessiere mich für Agility-Sport.
Meine Lieblingsdisziplinen sind:
</p>
<ul>
<li>Sprung durch einen Reifen</li>
<li>Lauf über eine Wippe</li>
<li>Slalomlauf zwischen Stangen</li>
</ul>
<p>
Ich gehe jedes Wochenende zur
<a href="http://www.welpenschule-kl.de/index.html">Welpenschule</a>
.
</p>
</body>
</html>
Erläuterungen
-
Bilder werden mit dem Element
<img>ausgezeichnet. Im Beispiel oben fällt auf, dass ein entsprechendes schließendes Tag fehlt. Das Image-Tag umschließt keinen Inhalt. Eigentlich müsste man die etwas aufwendigere Schreibweise<img ...></img>mit öffnendem und schließendem Tag ohne umschließenden Inhalt benutzen. In HTML5 wird das schließende Tag aber wegzulassen. -
Das Image-Tag verfügt über Attribute, mit deren Hilfe Zusatzinformationen dargestellt werden,
die zur Anzeige des Bildes benötigt werden.
Zum einen ist das die URL zur Lokalisierung der Bilddatei. Der Zusatz
src="img/bailey.jpg"mit dem Attributnamensrcund dem zugewiesenen Wert"img/bailey.jpg"beschreibt genau, wo diese Bildquelle zu finden ist. Im vorliegenden Beispiel befindet sich im Verzeichnis, in dem der Quelltext zur Webseite abgespeichert ist, neben der HTML-Quelltextdatei ein Verzeichnisimg. Innerhalb dieses Verzeichnisses liegt die Bilddatei mit dem Namenbailey.jpg. Liegt das Bild in einem "entfernteren" Verzeichnis oder auf einem anderen Rechner, muss der genaue Ort entsprechend beschrieben werden. Das weitere Attributaltund der zugewiesene Wert"Foto von Bailey"liefern eine alternative Darstellung, wenn die Bilddatei nicht gefunden wird. - Bilder können nur angezeigt werden, wenn deren Grafikformat vom benutzten Browser unterstützt wird. Moderne Browser unterstützen dabei die gängigen Pixelgrafikformate JPG, GIF und PNG sowie das Vektorgrafikformat SVG. Mehr über Bildformate findest du im Abschnitt Exkurs - Grafikformate.
Aufgabe
Besorge dir eine geeignete Bilddatei und speichere sie analog zum Beispiel oben ab. Binde anschließend diese Datei wie oben beschrieben in den Quelltext ein. Kontrolliere das Ergebnis. Es kann sein, dass die Bildgröße noch nicht stimmt. Wie man die ändert, findest du im Abschnitt Digitale Bildbearbeitung. Experimentiere mit den verschiedenen Zusätzen. Probiere z.B. mal aus, was geschieht, wenn der Dateiname nicht richtig geschrieben ist.