Externe Grafiken einsetzen mit HTML
Kleine und grosse Grafiken extern Verlinken
Im Unterschied zu internen Grafiken erscheinen externe Grafiken nicht direkt auf Ihrer Webseite, sondern werden separat gespeichert und mit der Seite so verknüpft, wie auch andere Seiten verknüpft werden.
Der Grund, warum es sich lohnt, externe Bilder in diesem Kapitel zu erwähnen, ist der, dass externe Grafiken oft eine komplimentäre Rolle zu internen Grafiken spielen können. Zum Beispiel:
- Die meisten Web-Browser unterstützen interne GIF-Bilder, und viele unterstützen ebenfalls interne JPEG-Bilder. Gleichzeitig unterstützen die meisten Browser jedoch eine viel größere Auswahl von Bildformaten durch die Verwendung externer Bilddateien und Hilfsprogramme. Sie können also durch die Verwendung externer Bilder viele andere Bildformate neben GIF und JPEG verwenden, zum Beispiel BMP (Windows bitmaps) oder PICT (Macintosh bitmaps).
- Rein textbasierte Browser können keine internen Bilder auf Webseiten abbilden, Sie können jedoch mit ihnen externe Bilder herunterladen und sie dann mit einem Bildbearbeitungs- oder Betrachtungsprogramm anschauen.
- Sie können ein kleines, internes Bild auf Ihrer Webseite, das schnell heruntergeladen werden kann, mit einem größeren, detaillierten externen Bild kombinieren, sodass die Leser, die mehr sehen möchten, das größere Bild selbst herunterladen können.
- Um externe Bilder zu verwenden, erstellen Sie das Bild genauso, wie Sie es bei einem internen täten, und speichern es dann mit dem entsprechenden Datei-Namen. So wie bei anderen Dateien im Web, ist auch hier das Datei-Suffix wichtig. Abhängig vom Bildformat, benutzen Sie eine der in Tabelle aufgezählten Suffixe.
| Format | Endung |
|---|---|
| GIF | .gif |
| JPEG | .jpg, .jpeg |
| XBM | .xbm |
| TIFF | .tiff, .tif |
| BMP | .bmp |
| PICT | .pict |
Haben Sie schließlich ein externes Bild, so müssen Sie nur noch mit einer Verknüpfung zu ihm hinführen, genauso wie Sie auch zu einer anderen HTML-Seite verknüpfen würden:
<p>
Die Grundvoraussetzung für eine <a href="html-lernen.jpeg"> Grafik </a> die in HTML-Dokumente eingebunden werden soll.
</p>
Verbindungen mit externen GIF- und JPEG-Dateien
Eine auf Webseiten übliche Praxis ist das Anbieten sehr kleiner GIF-Bilder (ein "Daumennagel" oder thumbnail) auf der Seite selbst; dieses Bildchen wird dann mit seinem größeren Gegenstück verknüpft. Dies bietet zwei wesentliche Vorzüge gegenüber dem internen Einbinden der gesamten Grafik:
- Es hält die Webseite klein, sodass sie schnell geladen werden kann.
- Es vermittelt Ihren Lesern einen Eindruck von dem Bild, bevor sie die große Version laden.
In diesem Beispiel schaffen Sie eine Verbindung zwischen einem kleinen Bild und einer externen größeren Version des gleichen Bildes.
Zunächst erzeugen Sie mit Ihrem Bildverarbeitungs-programm eine "Thumbnail"-Version der Fotografie. Der "Thumbnail" kann eine verkleinerte Version der Originaldatei sein, ein Ausschnitt aus dem Bild (sagen wir, einer der Pinguine aus der Gruppe) oder irgendetwas anderes, mit dem Sie auf das größere Bild hinweisen wollen. Paint Shop Pro ist ein gutes Shareware-Programm für Windows. Während Adobe Photoshop auf Macintosh oder Windows PCs eher ein Standardprogramm für professionelle Designer ist. Das Minibild kann eine kleine Version der Originaldatei, ein Ausschnitt der Datei oder etwas anderes sein, mit dem Sie das ganze Bild ankündigen möchte.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<img src="html-lernen_small.jpg" alt="HTML-Lernen" />
</body>
</html>
Nun können Sie mit dem Verknüpfungs-Tag das kleine Symbol mit dem größeren Bild verbinden, indem Sie die
<img />-Kennung mit dem <a>-Tag umgeben:
<a href="html-lernen.jpg"><img src="html-lernen_small.jpg" alt="HTML-Lernen" /></a>
Das Resultat ist in Abbildung dargestellt. Wenn Sie jetzt die kleine Grafik anklicken, wird das große Bild geladen und entweder vom Browser selbst oder von dem Hilfsprogramm angezeigt, das im Browser für JPEG-Dateien angegeben ist.
Eine Alternative zur direkten Verknüpfung der kleinen Grafik mit dem größeren Bild besteht darin, die externen Grafiken in verschiedenen Formaten anzubieten und dann verschiedene textbasierte Verknüpfungen zu den unterschiedlichen externen Versionen herzustellen (Sie können dies für Leser tun, die die Software nur für ein bestimmtes Format, nicht aber für ein anderes besitzen). An dieser Stelle unseres Beispiels füge ich eine Verbindung mit einer GIF-Version der gleichen Datei hinzu.
Um eine GIF-Version der Fotografie zu erzeugen, benötigen Sie Ihr Bildverarbeitungs-programm oder Ihren Bild-Konverter nochmals, um damit die ursprüngliche Fotografie zu konvertieren. Hier habe ich es html-lernen.gif. genannt.
Um nun sowohl GIF- als auch JPEG-Versionen der Fotografie anzubieten, verwandeln wir die Verknüpfung der Grafik in ein einfaches Verbindungs-Menü mit den GIF- und JPEG-Dateien, und geben zusätzliche Angaben zur Dateigröße ein (das Ergebnis wird in Abbildung gezeigt):
<p>
<img src="html-lernen_small.jpg" alt="HTML-Lernen thumbnail" />
</p>
<ul>
<li>HTML-Lernen (<a href="html-lernen.jpg">25K JPEG file</a>)</li>
<li>HTML-Lernen (<a href="html-lernen.gif">49K GIF file</a>)</li>
</ul>
Grafiken sind nicht die einzigen Dateitypen, die Sie außerhalb Ihrer Webseite speichern können. Sounddateien, Video, Zip-Archive – so gut wie alles kann als externe Datei verknüpft werden.