Die Verwendung von Grafiken im HTML

Grafikformate und interne und externe Grafiken im Web

Wenn Sie Schwierigkeiten dabei haben, alle die HTML-Kennungen zu behalten, die ich Ihnen in den letzten paar Tagen an den Kopf geworfen habe, können Sie jetzt aufatmen: Heute wird es einfacher. Tatsächlich werden Sie heute nur sehr wenige neue HTML-Tags kennen lernen. Der Fokus liegt heute darauf, Grafiken und Farben in Ihre Webseiten einzufügen. In diesem Kapitel werden Sie etwas über die HTML-Kodierungen für das Hinzufügen von Grafiken, Farben und Hintergründen lernen, und zwar:

• Die Grafikarten, die Sie in Webseiten benutzen können
• Wie Sie Grafiken auf Ihrer Webseite einsetzen, entweder allein oder zusammen mit Text
• Wie Grafiken als anwählbare Verbindungen benutzt werden
• Wie Sie externe Bilder als Ersatz für oder zusätzlich zu internen Grafiken einsetzen können
• Wie für Browser, die keine Grafiken darstellen können, Alternativen dazu angeboten werden
• Bildabmessungen und Bildskalierung sowie Bildvorschau
• Wechsel der Schrift und der Hintergrundfarben in Ihren Webseiten
• Die Verwendung von "gekachelten" Seitenhintergründen
• Wie und wann Sie Grafiken in Ihren Webseiten verwenden sollen

Nach diesem Kapitel werden Sie alles, was es über das Einfügen von Grafiken in Webseiten zu wissen gibt, kennen.

Grafiken im Web

Interne Grafiken sind Grafiken, die direkt auf Ihrer Webseite zwischen dem Text und den Verknüpfungen erscheinen und automatisch geladen werden, wenn Sie die Seite selbst laden – vorausgesetzt natürlich, dass Sie einen grafischen Browser haben und das automatische Laden interner Grafiken eingeschaltet ist. Externe Grafiken sind Grafiken, die nicht direkt abgebildet werden, wenn Sie eine Seite laden. Sie werden nur auf Anforderung Ihrer Leser geladen, normalerweise stehen sie am anderen Ende einer Verknüpfung.

Externe Grafiken benötigen keinen grafikfähigen Browser, um betrachtet zu werden – Sie können eine Grafik problemlos mit einem rein textbasierten Browser herunterladen und dann einen grafischen Editor oder Betrachter verwenden, um sich das Bild später anzuschauen. Sie werden noch später in diesem Kapitel lernen, wie Sie sowohl interne als auch externe Grafiken einsetzen können.

Egal, ob Sie nun interne oder externe Grafiken einsetzen, diese Bilder müssen in einem spezifischen Format gespeichert sein. Bei internen Grafiken muss es eines dieser beiden Formate sein: GIF oder JPEG. GIF ist eigentlich der beliebtere Standard, und es gibt mehr Browser, die interne GIF-Dateien darstellen können, als es Browser gibt, die dies mit JPEG-Dateien tun. Die Unterstützung für JPEG verbreitet sich immer weiter, ist aber noch nicht so weitgehend wie für GIF, und deshalb ist es die beste Methode, sicherzugehen, dass Ihre Grafiken von dem größtmöglichen Publikum betrachtet werden können, die, sich auf GIF zu beschränken.

Sie werden noch mehr über den Unterschied zwischen GIF und JPEG und wie man Grafiken in diesen Formaten erstellt lernen. Sie werden außerdem später in diesem Kapitel noch mehr über externe Grafiken und die Formate, die Sie dafür einsetzen können, erfahren.

Lassen Sie uns für dieses Kapitel einfach mal annehmen, dass Sie bereits eine Grafik haben, die Sie auf Ihre Webseite packen möchten. Wie bekommen Sie sie ins GIF- oder JPEG-Format, sodass die Grafik auf Ihrer Seite dargestellt werden kann? Die meisten Grafik-bearbeitungsprogramme bieten Möglichkeiten an, Ihr Bild in verschiedene Grafikformate umzuwandeln. Sie müssen da vielleicht unter der Option Speichern als oder Exportieren nachsehen, um eine Möglichkeit zu finden. Freeware und Shareware-Programme, die zwischen Bildformaten nichts konvertieren sind auch für Plattformen erhältlich. Viel Shareware – und Demo-Versionen von Bildbearbeitungs-Software gibt es beim Anbieter zum Download.

Wenn Sie Dateien im GIF-Format speichern wollen, suchen Sie nach einer Option, die CompuServe GIF, GIF87, GIF89 oder einfach nur GIF genannt wird. Jede von diesen wird ausreichen.

Wenn Sie Ihre Dateien als JPEG speichern, wird die einzige Möglichkeit normalerweise einfach JPEG sein.

Erinnern Sie sich, dass Ihre HTML-Dateien immer eine .html oder .htm-Endung haben mussten, um richtig zu funktionieren? Auch Bilddateien haben Suffixe. Für GIF-Dateien gilt das Suffix .gif. Für JPEG-Dateien ist das Suffix entweder .jpg oder .jpeg; beide werden gleichermaßen gut funktionieren.

Einige Grafik-Editoren versuchen immer, alle Dateien mit großgeschriebenen Suffixen (.GIF, .JPEG) zu speichern. Obwohl dies korrekte Suffixe sind, sind Grafiknamen wie auch HTML-Datei-Namen von der Groß- und Kleinschreibung abhängig, weshalb GIF nicht dasselbe Suffix ist wie gif. Die Schreibweise des Suffix ist nicht wichtig, wenn Sie es auf Ihrem lokalen System testen, wird aber entscheidend, wenn Sie Ihre Dateien auf den Server bewegen; deshalb sollten Sie, wann immer möglich, Kleinbuchstaben benutzen.

Interne Grafiken in HTML: die <img />-Kennung

Nachdem Sie ein Bild im GIF- oder JPEG-Format fertig vorbereitet haben, können Sie es nun in Ihre Webseite einfügen. Interne Grafiken werden in HTML durch die <img />-Kennung ausgezeichnet. Die <img />-Kennung hat wie die <hr />- und <br />-Kennungen keine abschließende HTML-Kennung. Letzter Satz im Absatz: Bei XHTML wird ein zusätzlicher Abstand gefolgt von einem Schrägstrich am Ende des Tag und seinen Attributen hinzugefügt.

Das <img />-Tag hat zahlreiche Attribute, die verschiedene Präsentations- und Verwendungsmethoden mit Inline Bildern ermöglichen. Viele dieser Attribute gehören zu HTML 3.2 oder HTML 4.0 und sind in einigen älteren Browsern nicht verfügbar. Auch andere Attribute gelten als verworfen, da sie von Style Sheets in den HTML 4.0 -und den XHTML-Spezifikationen ersetzt wurden.

Das wichtigste Attribut der <img />-Kennung ist SRC (von Source = Quelle). Das src-Attribut bezeichnet in Gänsefüßchen den Datei-Namen der Grafik, die Sie einfügen wollen. Der Pfad-Name der Datei folgt den gleichen Regeln wie die href-Attribute in den Verknüpfungen mit anderen Dokumenten. Sie können also für eine GIF-Datei namens image.gif im aktuellen Verzeichnis die folgende Kennung benutzen:

<img src="/image.gif" />

Für eine Grafik in einem Verzeichnis über dem aktuellen benutzen Sie folgende Kennung:

<img src="../image.gif" />

Für eine Grafik aus dem Verzeichnis oberhalb des aktuellen, schreiben Sie weiter nach den gleichen Regeln, wie für Dokument-Namen im href-Teil der <a>-Kennung.

Eine Alternative zu Grafiken hinzufügen

Bilder können eine einfache Text-Webseite in eine lebendige, bunte Seite umwandeln. Aber was geschieht, wenn ein Besucher Ihre Webseite mit einem Browser betrachtet, der nur Text anzeigt? Was ist, wenn, der Ihr Besucher den Vorgang, der das Herunterladen von Bildern ermöglicht, ausgeschaltet hat und alle Ihre so mühsam erstellten Grafiken nur als einfache Icons erscheinen. Plötzlich sieht diese lebendig bunte Seite gar nicht mehr lebendig und bunt aus. Und wenn Sie beim Erstellen Ihrer Webseite diese Möglichkeit völlig außer Acht gelassen haben, wird Ihr Publikum Ihre Webseite nicht lesen oder verwenden können.

Zu diesen beiden Problemen gibt es eine ganz einfache Lösung:

Wenn Sie das alt-Attribut des <img />-Tag verwenden, können Sie für die Bilder, die der Browser als solche nicht erkennt, einen sinnvollen Inhalt eingeben.

In textorientierten Browsern, wie etwa Lynx, werden Grafiken, die das <img />-Tag in der Originaldatei verwenden, mit eckigen Klammern angezeigt. Zum Beispiel: [IMAGE]:

Das alt-Attribut im <img />-Tag liefert Ihren Besuchern, die Browser verwenden, die nur Text lesen können, oder die Grafik in ihrem Browser ausgeschaltet haben, eine sinnvollere Textalternative zum faden [IMAGE]. Das alt-Attribut enthält einen Anhang mit dem Text, der die Grafik ersetzen soll.

<img src="myimage.gif" alt="[Ein Bild einer Katze]" />

Die meisten Browser werden diesen Textanhang im alt-Attribut als literarischen Anhang interpretieren. Wenn Sie beliebige HTML-Tags in diesen Anhang eingeben, werden diese als HTML-Code interpretiert und angezeigt. Sie können deshalb als Ersatz für ein Bild keine ganzen HTML-Code-Blöcke verwenden – nur einige Wörter oder Sätze.

Ich behandele Alternativen zu Bildern mit gutem Grund schon zu Anfang dieses Kapitels. Alternativen zu Bildern sind Optionen in den älteren HTML-Versionen, aber sie sind obligatorisch in HTML 4.0 Strict und HTML 1.0-Spezifikationen.