Interne Abbildungen in HTML: die <IMG>-Kennung
Den Abstand um die Abbildungen einstellen
Alternativen zu Abbildungen anbieten
Tips für eine bessere Nutzung von Abbildungen
Tag 4
Kapitel 7 - Die Verwendung von Abbildungen, Farben und Hintergründen
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 kennenlernen. Der Fokus liegt heute darauf, Abbildungen und Farben in Ihre Webseiten einzufügen. In diesem Kapitel werden Sie etwas über die HTML-Kodierungen für das Hinzufügen von Abbildungen, Farben und Hintergründen lernen, und zwar:
Nach diesem Kapitel werden Sie alles, was es über das Einfügen von Abbildungen in Webseiten zu wissen gibt, kennen. Kapitel 8, »Abbildungen fürs Web erschaffen«, wird Ihnen zeigen, welche Veränderungen Sie an den Bildern selbst vornehmen können, um verschiedene Effekte auf Ihren Webseiten hervorzurufen.
Abbildungen im Web
Es gibt zwei Arten von Abbildungen, mit denen Ihr Web-Browser umgehen kann: interne Abbildungen (inline images) und externe Abbildungen (external images). Interne Abbildungen sind Abbildungen, 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, daß Sie einen grafischen Browser haben und das automatische Laden interner Abbildungen eingeschaltet ist. Externe Abbildungen sind Abbildungen, 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 Abbildungen benötigen keinen grafikfähigen Browser, um betrachtet zu werden - Sie können eine Abbildung 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 Abbildungen einsetzen können.
|
Interne Abbildungen (Inline Images) erscheinen auf einer Webseite zusammen mit Text und Verknüpfungen und werden automatisch geladen, wenn die Seite selbst aufgerufen wird. |
|
Externe Abbildungen (External Images) werden getrennt von der Webseite gespeichert und nur auf Anforderung geladen, z.B. wenn eine Verknüpfung angeklickt wird. |
Egal, ob Sie nun interne oder externe Abbildungen einsetzen, diese Bilder müssen in einem spezifischen Format gespeichert sein. Bei internen Abbildungen muß 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, daß Ihre Abbildungen 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 Abbildungen in diesen Formaten erstellt in Kapitel 8 lernen. Sie werden außerdem später in diesem Kapitel noch mehr über externe Abbildungen und die Formate, die Sie dafür einsetzen können, erfahren.
Lassen Sie uns für dieses Kapitel einfach mal annehmen, daß Sie bereits eine Abbildung haben, die Sie auf Ihre Webseite packen möchten. Wie bekommen Sie sie ins GIF- oder JPEG-Format, so daß die Abbildung auf Ihrer Seite dargestellt werden kann? Die meisten Grafikbearbeitungsprogramme wie Adobe Photoshop, Paint Shop Pro, Corel Draw oder XV bieten Möglichkeiten an, Ihr Bild in verschiedene Abbildungsformate umzuwandeln. Sie müssen da vielleicht unter der Option »Speichern als« oder »Exportieren« nachsehen, um eine Mögichkeit zu finden. Es gibt auch Freeware- und Shareware-Programme für die meisten Plattformen, die nichts anderes tun, als zwischen Bildformaten umzuwandeln.
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, daß Ihre HTML-Dateien immer eine .html oder .htm-Endung haben mußten, 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 Abbildungs-Namen 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 Abbildungen 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 Abbildungen werden in HTML durch die <IMG>-Kennung ausgezeichnet. Die <IMG>-Kennung hat wie die <HR>- und <BR>-Kennungen keinen abschließenden Kennungs-Teil. Allerdings hat sie viele verschiedene Attribute, die es erlauben, die internen Abbildungen auf verschiedene Weise zu präsentieren und mit ihnen umzugehen. Viele dieser Attribute sind Teil der HTML-3.2-Spezifikation und sind unter Umständen in älteren Browsern nicht verfügbar.
Das wichtigste Attribut der <IMG>-Kennung ist SRC (von Source = Quelle). Das SRC-Attribut bezeichnet in Gänsefüßchen den Datei-Namen der Abbildung, 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 Abbildung aus dem Verzeichnis oberhalb des aktuellen schreiben Sie
<IMG SRC="../image.gif">
und so weiter, nach den gleichen Regeln wie für Dokument-Namen im HREF-Teil der <A>-Kennung.
Übung 7.1: Bilder hinzufügen
Lassen Sie uns ein einfaches Beispiel versuchen. Hier ist die Webseite für ein Spukhaus, in dem es jedes Jahr zu Halloween spukt. Mit Hilfe all der ausgezeichneten Hinweise, die ich Ihnen in den letzten sechs Kapiteln gegeben habe, sollten Sie dazu in der Lage sein, ohne weiteres so eine Seite wie die folgende zu erstellen. Hier folgt der HTML-Code für diese Datei, und Abbildung 7.1. zeigt, wie das aussieht:
<HTML>
<HEAD>
<TITLE>Welcome to the Halloween House of Terror</TITLE>
</HEAD><BODY>
<H1>Welcome to The Halloween House of Terror!!</H1>
<HR>
<P>Voted the most frightening haunted house three years in a row, the
<STRONG>Halloween House of Terror</STRONG> provides the ultimate in
Halloween thrills. Over <STRONG>20 rooms of thrills and excitement</STRONG> to
make your blood run cold and your hair stand on end!</P>
<P>The Halloween House of Terror is open from <EM>October 20 to November
1st</EM>, with a gala celebration on Halloween night. Our hours are:</P>
<UL>
<LI>Mon-Fri 5PM-midnight
<LI>Sat & Sun 5PM-3AM
<LI><STRONG>Halloween Night (31-Oct)</STRONG>: 3PM-???
</UL>
<P>The Halloween House of Terror is located at:<BR>
The Old Waterfall Shopping Center<BR>
1020 Mirabella Ave<BR>
Springfield, CA 94532</P>
</BODY>
</HTML>
Abbildung 7.1: |
So weit, so gut. Lassen Sie uns jetzt eine Abbildung auf der Seite einfügen. Passenderweise habe ich irgendwo in einer Clipart-Bibliothek das Bild einer Spinne (Abbildung 7.2) gefunden, das sich oben auf der Webseite ausgezeichnet machen würde. (Bedenken Sie, daß diese Abbildung, so wie alle anderen in diesem Buch, auf der CD-ROM enthalten ist.)
Abbildung 7.2: |
Die Abbildung heißt web.gif und liegt im GIF-Format im gleichen Verzeichnis wie die Datei halloween.html, so daß sie sofort in die Webseite aufgenommen werden kann. Sagen wir mal, daß wir sie auf dieser Seite auf einer eigenen Zeile einfügen wollen, so daß die Überschrift direkt darunter erscheint. Wir werden der Datei eine <IMG>-Kennung innerhalb ihres eigenen Absatzes hinzufügen, direkt vor der Überschrift. (Abbildungen definieren, ebenso wie Verknüpfungen, ihre eigenen Textelemente nicht, so daß die <IMG>-Kennung innerhalb eines Absatzes oder eines Überschriftelements stehen muß.)
<P><IMG SRC="web.gif"></P>
<H1>Welcome to The Halloween House of Terror!!</H1>
Jetzt sollte Ihr Browser, wenn Sie die Datei halloween.html erneut laden, die Abbildung ebenfalls laden und in die Seite integrieren, wie es in Abbildung 7.3 gezeigt wird.
Falls es nicht klappt (wenn Ihr Browser ein seltsames Bildsymbol anstelle der Spinne zeigt), überprüfen Sie, ob Sie den Datei-Namen in der HTML-Datei korrekt angegeben haben. Bilddatei-Namen unterscheiden zwischen Groß- und Kleinbuchstaben, deshalb müssen alle Groß- und Kleinbuchstaben übereinstimmen (mit dem tatsächlichen Namen der Datei, die geladen werden soll).
Wenn es immer noch nicht funktioniert, prüfen Sie genau, ob es sich bei der Abbildung wirklich um eine GIF- oder JPEG-Datei handelt und ob sie mit dem richtigen Suffix ausgestattet ist.
Und schließlich stellen Sie sicher, daß Sie bei Ihrem Browser das Laden von Abbildungen auch eingeschaltet haben.
Die Abbildung 7.3 zeigt das Ergebnis mit dem integrierten Spinnennetz.
Abbildung 7.3: |
Wenn eine Spinne schon gut ist, dann wären zwei richtig toll, nicht wahr? Probieren Sie einfach, eine weitere <IMG>-Kennung neben der ersten einzufügen, und schauen Sie, was passiert:
<P><IMG SRC="web.gif"><IMG SRC="web.gif"></P>
<H1>Welcome to The Halloween House of Terror!!</H1>
Abbildung 7.4 zeigt, wie das in Netscape aussieht, beide Bilder stoßen aneinander, wie Sie es erwartet hätten.
Abbildung 7.4: |
Und das ist es auch schon! Unabhängig davon, wie klein oder groß das Bild ist, Sie fügen es auf die gleiche Weise in Ihre Webseite ein.
Abbildungen und Text
Die vorige Übung zeigte, wie eine interne Abbildung in einem eigenen Absatz mit Text darunter in eine Seite eingefügt wird. Sie können ebenso Abbildungen neben (oder in) eine Textzeile einfügen. (Genaugenommen kommt der Ausdruck »inline image« genau da her.)
Um eine Abbildung in eine Textzeile zu integrieren, fügen Sie sie einfach innerhalb des Textes ein, zwischen die Element-Tags (<H1>, <P>, <ADDRESS> und so weiter). Abbildung 7.5 zeigt den Unterschied, wenn die Abbildung in eine Textzeile eingefügt wird. (Ich hab' den Titel etwas gekürzt.)
<H1><IMG SRC="web.gif">The Halloween House of Terror!!</H1>
Die Abbildung sollte nicht allzugroß sein, und sie muß auch nicht am Anfang des Textes stehen. Sie können eine Abbildung irgendwo in einem Textblock einsetzen:
<BLOCKQUOTE>
Love, from whom the world <IMG SRC="world.gif"> begun,<BR>
Hath the secret of the sun. <IMG SRC="sun.gif"> <BR>
Love can tell, and love alone,
Whence the million stars <IMG SRC="star.gif"> were strewn <BR>
Why each atom <IMG SRC="atom.gif"> knows its own. <BR>
--Robert Bridges
</BLOCKQUOTE>
Abbildung 7.6 zeigt, wie dies aussieht.
Abbildung 7.5: |
Abbildung 7.6: |
Ausrichtung von Text und Abbildungen
Beachten Sie, daß bei diesen Beispielen die Abbildung so dargestellt wurde, daß der untere Rand des Bilds und der untere Rand des Textes nebeneinanderlagen. Die <IMG>-Kennung enthält auch ein ALIGN-Attribut, das es Ihnen ermöglicht, die Abbildung oben oder unten mit dem umgebenden Text oder anderen Bildern auf der Zeile auszurichten.
Standard-HTML 2.0 definiert drei grundlegende Werte für ALIGN:
HTML 3.2 bietet zwei weitere Werte: LEFT und RIGHT. Diese Werte werden im nächsten Abschnitt, »Text neben Bildern darstellen«, behandelt.
Zusätzlich zu diesen Werten gibt es noch einige neue Werte für ALIGN, die mehr Kontrolle darüber ermöglichen, wo genau die Abbildung mit der Textzeile ausgerichtet wird. Die folgenden Werte werden alle von Netscape unterstützt, sind aber nach der gedruckten Spezifikation nicht Teil von HTML 3.2 und sind auch nicht in den Vorschlägen für HTML 4.0 enthalten:
Abbildung 7.7 zeigt Beispiele all dieser Ausrichtungsoptionen. In jedem Fall sind die vertikale Linie auf der linken Seite und der Text aufeinander ausgerichtet, und der Pfeil ändert seine Ausrichtung.
Abbildung 7.7: |
Text neben Bildern darstellen
Eine Abbildung innerhalb einer Textzeile einzufügen ist kein Problem, solange Sie nur eine einzige Zeile Text haben. Ein Aspekt von internen Bildern, den ich bis jetzt verschwiegen habe, ist, daß dies alles in HTML 2.0 nur mit einer einzelnen Textzeile funktioniert. Wenn Sie mehrere Textzeilen haben und eine Abbildung in deren Mitte einfügen wollen, wird der Text um das Bild (mit Ausnahme einer einzelnen Zeile) ober- und unterhalb der Abbildung erscheinen - siehe Abbildung 7.8 für ein Beispiel.
Was ist nun aber, wenn Sie mehrere Textzeilen um ein Bild wickeln wollen, so daß der Text das Bild von allen Seiten umschließt? Mit HTML 2.0 können Sie das nicht tun. Sie sind auf eine einzelne Zeile Text auf einer der Seiten des Bilds beschränkt, was ihre Gestaltungsmöglichkeiten einschränkt.
Um diese Beschränkung von HTML 2.0 zu umgehen, definierte Netscape zwei neue Werte für das ALIGN-Attribut der <IMG>-Kennung - LEFT und RIGHT. Diese beiden Werte wurden in HTML 3.2 aufgenommen und werden inzwischen von vielen anderen Browsern unterstützt.
Abbildung 7.8: |
ALIGN=LEFT und ALIGN=RIGHT
ALIGN = LEFT richtet ein Bild zum linken Seitenrand hin aus und ALIGN = RIGHT zum rechten. Aber die Anwendung dieser Attribute verursacht ebenfalls, daß der der Abbildung folgende Text im Raum auf der linken oder rechten Seite der Abbildung dargestellt wird, je nach der gewünschten Ausrichtung. Abbildung 7.9 zeigt eine Abbildung mit etwas Text, der daneben ausgerichtet ist.
Abbildung 7.9: |
Sie können beliebigen HTML-Text (Absätze, Überschriften, Listen, andere Abbildungen) nach einem ausgerichteten Bild einfügen, wobei der Text in den Raum zwischen dem Bild und dem gegenüberliegenden Seitenrand hineingepackt wird (oder Sie können sogar Abbildungen an beiden Seitenrändern haben und den Text in die Mitte setzen). Der Browser füllt den Raum mit Text, bis er das untere Ende der Abbildung erreicht, und fährt dann fort, den Text unterhalb des Bilds einzufügen.
Anhalten des Textflusses
Was nun, wenn Sie den Raum neben der Abbildung nicht weiterhin auffüllen, sondern eine neue Zeile unterhalb der Abbildung beginnen wollen? Ein normaler Zeilenumbruch wird da nicht genügen - er wird die Zeile nur um einen Zeilenabstand weiterschieben. Auch eine neue Absatzmarke wird den Text weiterhin um das Bild herumfließen lassen. Um das Herumfließen des Textes um die Abbildung endgültig zu unterbrechen, setzen Sie eine Zeilenumbruch-Kennung (<BR>) mit dem neuen Attribut CLEAR (löschen) ein. Mit dem CLEAR-Attribut können Sie die Zeile so umbrechen, daß die nächste Textzeile erst nach dem Ende der Abbildung beginnt (und zwar geht sie dann zum Seitenrand unterhalb der Abbildung). Sehen Sie sich Abbildung 7.10 als Beispiel an (ich habe hier eine kleinere Abbildung eingefügt, um den Zeilenumbruch besser zu verdeutlichen).
Abbildung 7.10: |
Das CLEAR-Attribut kann einen dieser drei Werte annehmen:
Das folgende Code-Beispiel zeigt die Abbildung einer Tulpe, um die etwas Text gelegt wird. Ein Zeilenumbruch mit CLEAR=LEFT bricht den Textfluß um die Grafik ab und führt den Text nach der Abbildung fort.
<P><IMG ALIGN=LEFT SRC="tulipsmall.gif">
<H2>Mystery Tulip Murderer Strikes</H2>
<P>Someone, or something, is killing the tulips of New South Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town.</P>
<BR CLEAR=ALL>
<P>New South Haverford is known for its extravagant displays of tulips in the springtime, and a good portion of its tourist trade relies on the people who come from as far as New Hampshire to see what has been estimated as up to two hundred thousand tulips that bloom in April and may.</P>
Textfluß in älteren Browsern
Wenn man bedenkt, daß ALIGN=LEFT und ALIGN=RIGHT neuere Merkmale von HTML sind, so ist es interessant zu beobachten, was passiert, wenn eine Seite mit diesen Merkmalen in einem Browser betrachtet wird, der die links- und rechtsbündige Ausrichtung nicht unterstützt. Meistens werden Sie einfach nur die Formatierung verlieren; der Text wird unterhalb des Bildes und nicht daneben erscheinen. Da jedoch die erste Textzeile immer noch neben der Abbildung dargestellt wird, kann der Text dann an etwas seltsamen Stellen gebrochen werden. Etwas so Einfaches wie das Einfügen eines <BR> nach der Abbildung (was wenig Einfluß in Netscape und anderen Browsern, die Textfluß unterstützen, hat, aber den Text in anderen Browsern unter das Bild drückt) kann einen Effekt erzeugen, der sowohl in Browsern funktioniert, die das Herumfließen des Textes um Bilder und Text unterstützen, als auch in jenen, die dies nicht tun. Vergessen Sie nicht, Ihre Seiten in unterschiedlichen Browsern zu testen, so daß Sie den Effekt abschätzen können.
Das folgende Beispiel zeigt den HTML-Code für eine Seite der Papillon Enterprises, einer erfundenen Gesellschaft, die Webseiten designed. Abbildung 7.11 zeigt das Resultat in Netscape, und Abbildung 7.12 zeigt das Ergebnis in einem Browser namens MacWeb (der Text und Abbildungen nicht ausrichten kann).
<H1><IMG SRC="butterfly.gif" ALIGN=RIGHT ALIGN=MIDDLE>
Papillon Enterprises</H1>
<P>Design, Writing, Illustration, and Programming for the
<B>World Wide Web</B></P>
<P>Specializing in:</P>
<UL>
<LI>HTML and Web Page Design
<LI>Illustration
<LI>Forms Design and Programming
<LI>Complete Web Server Installation
</UL>
<HR>
Abbildung 7.11: |
Abbildung 7.12: |
Den Abstand um die Abbildungen einstellen
Mit der Fähigkeit, Text um ein Bild herumfließen zu lassen, möchten Sie vielleicht auch den Abstand um das Bild einstellen. Die VSPACE- und HSPACE-Attribute ermöglichen Ihnen genau das (beide sind HTML-3.2-Merkmale). Beide können als Pixel-Wert angegeben werden; VSPACE (von vertical space, vertikaler Abstand) kontrolliert den Abstand über und unter der Abbildung, und HSPACE (von horizontal space, horizontaler Abstand) kontrolliert den Abstand nach links und rechts.
Folgender HTML-Code führt zu dem in Abbildung 7.13 gezeigten Ergebnis:
<P><IMG SRC="eggplant.gif" VSPACE=30 HSPACE=30 ALIGN=LEFT>
This is an eggplant. We intend to stay a good ways away from it, because we really don't like eggplant very much.</P>
Abbildung 7.13: |
Abbildungen und Verknüpfungen
Kann eine Abbildung als Verknüpfung dienen? Aber natürlich! Wenn Sie eine <IMG>-Kennung zwischen den einleitenden und abschließenden Teil eines Verknüpfungs-Tags (<A>) schreiben, so dient die Abbildung für die Verknüpfung selbst als anwählbare Stelle auf der Seite:
<A HREF="index.html"><IMG SRC="uparrow.gif"></A>
Wenn Sie sowohl eine Abbildung als auch Text in den Anker setzen, so können sowohl die Abbildung als auch der Text angewählt werden, um die Verknüpfung zu aktivieren:
<A HREF="index.html"><IMG SRC="uparrow.gif">Up to Index</A>
Abbildungen, die zugleich auch Auswählpunkte für eine Verknüpfung sind, werden in HTML 2.0 mit einem Rahmen darum dargestellt, um sie von normalen, nichtanwählbaren Abbildungen zu unterscheiden, wie es Abbildung 7.14 zeigt.
Abbildung 7.14: |
Sie können die Dicke der Bildumrandung mit dem BORDER-Attribut der <IMG>-Kennung bestimmen. Das BORDER-Attribut, das eine Netscape-Erweiterung ist, die in HTML 3.2 aufgenommen wurde, wird mit einer Zahl angebeben, die den Durchmesser der Bildumrandung in Pixeln festlegt. BORDER=0 versteckt die Umrandung völlig.
Seien Sie jedoch vorsichtig, wenn Sie BORDER auf 0 (Null) setzen, wenn eine Abbildung als Verknüpfung dient. Die Umrandung gibt einen visuellen Aufschluß darüber, daß die Abbildung auch als Verknüpfung dient. Wenn Sie diese Umrandung entfernen, erschweren Sie es dem Leser, herauszufinden, welches denn nun normale Abbildungen sind und welche als Ausgangspunkt für Verknüpfungen dienen, ohne daß er die Maus bewegt, um es herauszubekommen. Vergewissern Sie sich, wenn Sie schon unbedingt die Umrandung entfernen wollen, daß Ihr Design einen Hinweis darauf gibt, daß es sich um ein anklickbares und nicht nur um ein »normales« Bild handelt. Sie können Ihre Bilder z.B. so gestalten, daß sie tatsächlich wie Buttons aussehen (siehe Abbildung 7.15).
Abbildung 7.15: |
Übung 7.2: Navigationssymbole
Lassen Sie uns ein einfaches Beispiel für die Verwendung einer Abbildung als Verknüpfungspunkt konstruieren. Wenn Sie mehrere zusammengehörige Webseiten haben, zwischen denen man sich in gleichmäßiger Weise bewegen kann (beispielsweise vorwärts, rückwärts, zurück, hoch, an den Anfang und so weiter), ist es sinnvoll, ein Menü mit solchen Bewegungsoptionen am Anfang oder am Ende jeder Seite anzubieten, damit Ihre Leser genau wissen, wie sie ihren Weg durch Ihre Dokumente finden können.
Dieses Beispiel zeigt, wie Sie Symbole (Icons) verwenden, die zum Navigieren durch eine Gruppe linear zusammengehöriger Seiten benutzt werden können. Sie haben drei Bildchen im GIF-Format: eines für vorwärts, eines für zurück, und ein drittes erlaubt Ihren Lesern, in den Hauptindex der gesamten Dokumentenstruktur zurückzuspringen.
Zunächst schreiben wir die HTML-Struktur, um diese Bildchen (Icons) verwenden zu können. Hier ist die Seite selbst nicht sonderlich wichtig, so daß wir nur den notwendigen Rahmen erzeugen. Abbildung 7.16 zeigt, wie das Dokument anfangs aussieht.
<HTML>
<HEAD>
<TITLE>Motorcycle Maintenance: Removing Spark Plugs</TITLE>
<H1>Removing Spark Plugs</H1>
<P>(include some info about spark plugs here)</P>
<HR>
</BODY>
</HTML>
Abbildung 7.16: |
Nun ergänzen Sie am Ende des Dokuments mit Hilfe der <IMG>-Kennung die drei Abbildungen (Abbildung 7.17 zeigt das Ergebnis):
<IMG SRC="arrowright.gif">
<IMG SRC="arrowleft.gif">
<IMG SRC="arrowup.gif">
Abbildung 7.17: |
Ergänzen Sie nun die Anker um die Abbildungen, damit diese aktivierbar werden. Abbildung 7.18 zeigt das Ergebnis.
<A HREF="replacing.html"><IMG SRC="arrowright.gif"></A>
<A HREF="ready.html"><IMG SRC="arrowleft.gif"></A>
<A HREF="index.html"><IMG SRC="arrowup.gif""></A>
Abbildung 7.18: |
Wenn Sie nun eines der Icons anwählen, so springt der Browser zu der im Verbindungs-Tag angegebenen Seite, gerade so, als hätten Sie normalen Verknüpfungstext dafür benutzt.
Wo wir gerade bei Text sind: Reichen die Icons, so wie sie sind, aus? Wie wär's, etwas Text hinzuzufügen, um zu beschreiben, was einen auf der anderen Seite der Verknüpfung erwartet? Sie können den Text sowohl innerhalb als auch außerhalb der Anker plazieren, je nachdem, ob er auch zum Anwählen der Verbindung benutzt werden soll oder nicht. In unserem Beispiel hier schreiben wir ihn außerhalb der Anker, so daß nur die Icons angewählt werden können. Zudem richten wir den unteren Teil des Textes und der Abbildungen mit Hilfe des ALIGN-Attributs der <IMG>-Kennung aus. Schließlich arrangieren wir alles so, daß jedes Element in einer eigenen Zeile steht, da der zusätzliche Text sonst die Icons irgendwie auf mehrere Zeilen verteilen würde. Abbildung 7.19 zeigt das fertige Menü.
<P>
<A HREF="replacing.html"><IMG SRC="arrowright.gif" ALIGN=BOTTOM></A>
On to "Gapping the New Plugs"<BR>
<A HREF="ready.html"><IMG SRC="arrowleft.gif" ALIGN=BOTTOM></A>
Back to "When You Should Replace your Spark Plugs"<BR>
<A HREF="index.html"><IMG SRC="arrowup.gif" ALIGN=BOTTOM></A>
Up To Index
</P>
Abbildung 7.19: |
Externe Abbildungen einsetzen
Im Unterschied zu internen Abbildungen erscheinen externe Abbildungen 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, daß externe Abbildungen oft eine komplimentäre Rolle zu internen Abbildungen spielen können. Zum Beispiel:
Tabelle 7.1: Bild-Formate und Datei-Endungen
Format |
Endung |
GIF |
.gif |
JPEG |
.jpg, .jpeg |
XBM |
.xbm |
TIFF |
.gif">siehe Abbildungf, .gif">siehe Abbildung |
BMP |
.gif">siehe Abbildung |
PICT |
.pict |
Haben Sie schließlich ein externes Bild, so müssen Sie nur noch mit einer Verknüpfung zu ihm hinführen, genau so wie Sie auch zu einer anderen HTML-Seite verknüpfen würden:
<P> Letztes Jahr zuechtete ich einige wirklich riesige <A HREF="grosse tomaten.jpeg"> Tomaten </A> in meinem Garten. </P>
Im nächsten Beispiel werden Sie interne und externe Abbildungen zusammen einsetzen.
Übung 7.3: 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 Abbildung:
In diesem Beispiel schaffen Sie eine Verbindung zwischen einem kleinen Bild und einer externen größeren Version des gleichen Bildes. Die große Abbildung ist eine Fotografie einiger Pinguine im GIF-Format, genannt penguinsbig.gif (dargestellt in Abbildung 7.20).
Abbildung 7.20: |
Zunächst erzeugen Sie mit Ihrem Bildverarbeitungsprogramm eine »Thumbnail«-Version der Pinguin-Fotografie. Der »Thumbnail« kann eine verkleinerte Version der Originaldatei sein, ein Ausschnitt aus dem Bild (sagen wir, einer der Pinguine aus der Gruppe) oder irgendwas anderes, mit dem Sie auf das größere Bild hinweisen wollen.
Hier habe ich das Bild eines einzelnen Pinguins aus der Gruppe erzeugt, um es als interne Abbildung zu verwenden (ich habe es penguinslittle.gif genannt). Anders als die große Version, die ca. 100 Kbyte umfaßt, ist das kleine Bild nur ca. 3 Kbyte groß. Mit Hilfe der <IMG>-Kennung integriere ich das Bild direkt in die nahezu leere Webseite:
<HTML>
<HEAD>
<TITLE>Penguins</TITLE>
</HEAD></BODY>
<H1>Penguins</H1>
<IMG SRC="penguinslittle.gif">
</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="penguinsbig.gif"><IMG SRC="penguinslittle.gif"></A>
Das Resultat ist in Abbildung 7.21 dargestellt. Wenn Sie jetzt die kleine Pinguin-Abbildung anklicken, wird das große Bild geladen und entweder vom Browser selbst oder von dem Hilfsprogramm angezeigt, das im Browser für GIF-Dateien angegeben ist.
Abbildung 7.21: |
Eine Alternative zur direkten Verknüpfung der kleinen Abbildung mit dem größeren Bild besteht darin, die externen Abbildungen 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 JPEG-Version der gleichen Pinguin-Datei hinzu.
Um eine JPEG-Version der Pinguin-Fotografie zu erzeugen, benötigen Sie Ihr Bildverarbeitungsprogramm oder Ihren Bild-Konverter nochmals, um damit die ursprüngliche Fotografie zu konvertieren. Hier hab' ich es penguinsbig.jpg genannt.
Um nun sowohl GIF- als auch JPEG-Versionen der Pinguin-Fotografie anzubieten, verwandeln wir die Verknüpfung der Abbildung in ein einfaches Verbindungs-Menü mit den GIF- und JPEG-Dateien, und geben zusätzliche Angaben zur Dateigröße (das Ergebnis wird in Abbildung 7.22 gezeigt):
<P><IMG SRC="penguinslittle.gif"></P>
<UL>
<LI>Penguins (<A HREF="pengiunsbig.gif">100K GIF file</A>)
<LI>Penguins (<A HREF="pengiunsbig.jpg">25K JPEG file</A>)
</UL>
Abbildung 7.22: |
|
Abbildungen 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. Sie werden mehr darüber in Kapitel 9, »Externe Dateien, Mulitimedia und Animation«, erfahren. |
Alternativen zu Abbildungen anbieten
Grafiken können eine einfache textbasierte Webseite in einen tollen visuellen Festschmaus verwandeln. Was geschieht jedoch, wenn jemand Ihre Webseite mit einem textbasierten Web-Browser liest oder wenn sie oder er das automatische Laden der Abbildungen ausgeschaltet hat, so daß all Ihre sorgfältig eingebaute Grafik nur als schlichtes Bildsymbol erscheint? Plötzlich sieht der tolle visuelle Festschmaus gar nicht mehr so schön aus. Und, schlimmer noch, Ihre Seite könnte, wenn Sie diese Möglichkeit nicht bereits bedacht haben, als Sie die Seite gestaltet haben, für einen Teil Ihres Publikums unlesbar und gänzlich unbrauchbar sein.
Es gibt eine einfache Lösung für eines dieser Probleme: Das ALT-Attribut der <IMG>-Kennung, das es Ihnen ermöglicht, für Browser, die keine Grafik anzeigen können, die Abbildungen durch irgend etwas Aussagekräftiges zu ersetzen.
Normalerweise werden in einem textbasierten Browser wie Lynx Grafiken, die in der HTML-Datei mit der <IMG>-Kennung gekennzeichnet sind, durch das Wort [IMAGE] mit rechteckigen Klammern drumherum »angezeigt« (Abbildung 7.23 zeigt ein Beispiel). Wenn die Abbildung selbst zugleich eine Verknüpfung darstellt, bleibt diese erhalten.
Abbildung 7.23: |
Das ALT-Attribut macht es Ihnen möglich, als Alternative für Ihre Leser mit textbasierten Web-Browsern einen etwas aussagekräftigeren Text als das Wort [IMAGE] anzubieten. Das ALT-Attribut enthält eine Zeichenfolge mit jenem Text, der als Ersatz für die Abbildung dienen soll:
<IMG SRC="meinbild.gif" ALT="[das Bild einer Katze]">
Die meisten Browser werden die Zeichenfolge, die Sie in das ALT-Attribut setzen, als gewöhnlichen Text darstellen, d.h., wenn Sie irgendwelche HTML-Kennungen hineinsetzen, werden sie wörtlich angezeigt, anstatt sie als HTML-Code auszuwerten und darzustellen. Das bedeutet, daß Sie nicht ganze Blöcke von HTML-Code als Ersatz für Ihre Abbildung einsetzen können - sondern nur einige Wörter oder Sätze.
Erinnern Sie sich z.B. an die Übung 7.2, wo Sie Pfeil-Icons für die Navigation zwischen einzelnen Seiten eingesetzt haben? Hier sind zwei Ideen dafür, wie Sie rein textbasierte Alternativen für diese Bildsymbole einsetzen können:
1. Die Verwendung von Textanzeigen (Abbildung 7.24). Hier ist der Code:
<P>
<A HREF="replacing.html"><IMG SRC="arrowright.gif" ALIGN=BOTTOM ALT="[NEXT]"></A>
On to "Gapping the New Plugs"<BR>
<A HREF="ready.html"><IMG SRC="arrowleft.gif" ALIGN=BOTTOM ALT="[PREVIOUS]">
</A>
Back to "When You Should Replace your Spark Plugs"<BR>
<A HREF="index.html"><IMG SRC="arrowup.gif" ALIGN=BOTTOM ALT="[UP]"></A>
Up To Index</P>
Abbildung 7.24: |
2. Verstecken Sie die Abbildungen ganz, und machen Sie statt dessen den Text zum Anker (vgl. Abbildung 7.25). Geben Sie ein:
<P>
<A HREF="replacing.html"><IMG SRC="arrowright.gif" ALIGN=BOTTOM ALT="">
On to "Gapping the New Plugs"</A><BR>
<A HREF="ready.html"><IMG SRC="arrowleft.gif" ALIGN=BOTTOM ALT="">
Back to "When You Should Replace your Spark Plugs"</A><BR>
<A HREF="index.html"><IMG SRC="arrowup.gif" ALIGN=BOTTOM ALT="">
Up To Index</A></P>
Abbildung 7.25: |
|
Jetzt, wo Sie etwas über interne und externe Bilder wissen sowie über Bilder, die als Verknüpfungen dienen und etwas darüber gelernt haben, wie man Text um Bilder herumfließen läßt, wissen Sie darüber Bescheid, was die meisten Leute mit Bildern auf Webseiten anfangen - und Ihnen ist alles darüber bekannt, was HTML 2.0 mit Bildern anfangen kann. Es gibt aber einige neuere Tricks, mit denen man spielen kann, und davon handelt dieser Abschnitt. |
Andere nette Tricks mit Bildern
Alle Attribute in diesem Abschnitt waren ursprünglich Netscape-Erweiterungen, die jetzt in HTML 3.2 aufgenommen wurden.
Größe und Skalierung von Bildern
Zwei Netscape-Erweiterungen zur <IMG>-Kennung, HEIGHT und WIDTH, geben die Höhe und die Breite des Bildes in Pixeln an. Beide sind jetzt Teil der HTML-3.2-Spezifikationen.
Wenn Sie für diese Werte die tatsächliche Höhe und Breite des Bildes angeben (die Sie mit Hilfe der meisten Bildverarbeitungsprogramme ermitteln können), benötigen einige Browser für die Formatierung und die Anzeige von Text und Bildern auf Ihrer Seite sehr viel weniger Zeit, als wenn Sie die Werte nicht angäben.
Warum? Wenn ein Browser den HTML-Code in Ihrer Datei übersetzt, muß er alle Bilder laden und ihre Breite und Höhe ermitteln, bevor er den Text entsprechend formatieren kann. Dies bedeutet meistens, daß er einen Teil des Textes lädt und formatiert, dann auf das Laden des Bildes wartet, dann um das Bild herum formatiert, wenn er die Ausmaße herausgefunden hat, und dann mit dem Rest der Seite fortfährt.
Sind jedoch Breite und Höhe bereits im HTML-Code angegeben, erzeugt der Browser einfach nur einen Platzhalter in der Größe des Bildes und kann seine Arbeit dann schon fortsetzen. Auf diese Weise können Ihre Leser damit fortfahren, den Text zu lesen, während die Bilder geladen werden, anstatt warten zu müssen. Und, da WIDTH und HEIGHT in anderen Browsern einfach ignoriert werden, gibt es keinen Grund, sie nicht für alle Ihre Bilder einzusetzen. In Browsern, die diese Attribute nicht unterstützen, schaden sie weder, noch beeinflussen sie die Bilder negativ.
|
Wenn Sie Ihre Seite mit Bildern darin in Netscape 2.0 oder 3.0 testen, wählen Sie doch mal Dokumenten-Info aus dem Menü Ansicht. Sie werden ein Fenster bekommen, daß alle Bilder auf Ihrer Seite anzeigt. Wenn Sie dann jedes Bild einzeln auswählen, werden Sie Informationen darüber erhalten - einschließlich seiner Größe, die Sie dann in Ihre HTML-Datei einfügen können. |
Wenn sich die Werte für WIDTH und HEIGHT von der tatsächlichen Breite und Höhe des Bildes unterscheiden, skaliert der Browser es so, daß es in den vorgegebenen Leerraum paßt. Da kleinere Bilder weniger Speicherplatz belegen als größere und damit in kürzerer Zeit über das Netzwerk übertragen werden können, ist das eine ganz elegante Möglichkeit, große Bilder auf Ihren Seiten loszuwerden. Sie erzeugen einfach eine kleinere Ausgabe des Bildes und skalieren es dann auf Ihrer Webseite entsprechend. Beachten Sie jedoch, daß auch die Pixel skaliert werden, so daß die schließlich wieder vergrößerte Version eine gröbere Körnung aufweist. Experimentieren Sie mit den verschiedenen Größen und den Skalierungsfaktoren, um den richtigen Effekt zu erzielen.
Beachten Sie, daß die Attribute WIDTH und HEIGHT von anderen Browsern ignoriert werden. Größtenteils hat das jedoch keine Auswirkungen auf das Erscheinungsbild der Seite. Wenn Sie das Bild in Netscape skaliert haben, ist es in einem anderen Browser einfach nur kleiner. Haben Sie dagegen die tatsächliche Breite und Höhe angegeben, gibt es überhaupt keinen Unterschied.
|
Führen Sie keine umgekehrte Skalierung durch - indem Sie ein größeres Bild erzeugen und es dann mit WIDTH und HEIGHT herunterskalieren. Kleinere Dateigrößen sind besser, da sie weniger Zeit zum Laden brauchen. Wenn Sie eh nur ein kleines Bild darstellen wollen, machen Sie es von Anfang an kleiner. |
Mehr über Bildumrandungen
Sie haben das BORDER-Attribut der <IMG>-Kennung als Teil des Abschnitts über Verknüpfungen kennengelernt, wo die Festlegung von BORDER auf einen Zahlenwert oder auf Null die Dicke der Bildumrandung festlegte (oder diese völlig versteckte).
Normalerweise haben einfache Bilder keine Umrandungen; nur solche mit Verknüpfungen. Trotzdem können Sie das BORDER-Attribut mit einfachen Bildern verwenden, um eine Umrandung um das Bild zu ziehen, so wie hier:
<P>Frame the image <IMG SRC="monalisa.gif" BORDER=5></P>
Abbildung 7.26 zeigt ein Beispiel eines Bildes mit einer Umrandung.
Abbildung 7.26: |
Bildvorschau
Eine optionale Netscape-Erweiterung für Abbildungen ist die Anwendung des LOWSRC-Attributs (von low source, Quelle mit geringerer Auflösung) zu <IMG>, welches eine Art von Vorschau auf das tatsächliche Bild auf der Seite ermöglicht. LOWSRC wird so wie SRC, mit einem Pfad-Namen zu einer anderen Bilddatei eingesetzt:
<IMG SRC="wall.gif" LOWSRC="wallsmall.gif">
Wenn ein Browser, der LOWSRC unterstützt, diese Kennung vorfindet, lädt er das LOWSRC-Bild zuerst im ersten Durchgang für das allgemeine Seitenlayout. Dann, nachdem das Layout und die LOWSRC-Bilder geladen und dargestellt sind, wird das andere Bild, das durch SRC festgelegt ist, geladen und eingeblendet, um das LOWSRC-Bild zu ersetzen.
Warum sollten Sie das tun? Das Bild in LOWSRC ist gewöhnlich eine kleine Vorschau mit geringerer Auflösung als das eigentliche Bild, so daß es sehr schnell geladen werden und dem Leser eine Vorstellung vom allgemeinen Erscheinungsbild der Seite geben kann. (Vergewissern Sie sich, daß das LOWSRC-Bild tatsächlich kleiner ist, da es sonst zwecklos wäre, es einzufügen.) Dann, nachdem das Layout fertig ist, kann der Leser nach unten rollen und den Text lesen, während die »besseren« Bilder unauffällig im Hintergrund geladen werden.
Die Verwendung von LOWSRC ist optional; es wird von älteren Browsern einfach ignoriert.
Verwendung von Farben
Eine Möglichkeit, Farbe in Ihre Webseiten zu bringen, besteht darin, Bilder einzufügen; Bilder können Farbspritzer zwischen dem Schwarz, Grau und Weiß erzeugen. Einige Netscape-Erweiterungen ermöglichen es Ihnen jedoch, die Farben der Seite selbst zu bestimmen, einschließlich der Hintergrundfarbe der Seite, sowie der Farben von Text und Verknüpfungen. Außerdem können Sie auch noch »Farbtupfen« für einzelne Zeichen auf der Seite festlegen. In diesem Abschnitt werden Sie alle diese Dinge erlernen.
|
Morgen werden Sie eine Menge über Farben und Farbtheorie lernen. Heute werden Sie einfach nur lernen, wie Sie in HTML Farben verändern können. |
Farbbezeichnungen
Bevor Sie die Farbe von irgendeinem Teil Ihrer HTML-Seite änden können, müssen Sie wissen, welche Farbe das sein soll. Es gibt in HTML zwei Arten, die Farben mit den Farberweiterungen festzulegen:
Die flexibelste und am weitesten unterstützte Methode zur Farbfestlegung besteht darin, den numerischen Wert der Farbe herauszufinden, die Sie benutzen wollen. Die meisten Bildverarbeitungsprogramme haben einen sogenannten Farbauswähler - eine Möglichkeit, mit der Sie eine einzelne Farbe aus einer ganzen Reihe verfügbarer Farben auswählen können. Die meisten Farbauswähler werden Ihnen im Gegenzug den Wert dieser Farbe in RGB-Form als drei Zahlen angeben (jeweils eine für Rot, Grün oder Blau - wofür der Name RGB ja auch steht). Jede Zahl reicht normalerweise von 0 bis 255, wobei 000 Schwarz und 255 255 255 Weiß ist.
Nachdem Sie Ihre Farbe(n) in der Form von drei Zahlenwerten von 0 bis 255 haben, müssen Sie diese noch in hexadezimale Werte umwandeln. Sie können einen beliebigen wissenschaftlichen Taschenrechner benutzen, der zwischen ASCII und Hex umwandelt, um diese Zahlen zu bekommen. Es gibt auch einen Haufen Freeware- und Shareware-Farbauswähler, die hier weiterhelfen, einschließlich HTML Color Reference und ColorFinder für Windows und ColorMeister und ColorSelect für Macintosh. Sie können auch rgb.html benutzen, ein Formular, das die Konvertierung für Sie vornimmt, und dessen Anwendung Sie später in diesem Buch noch erlernen werden. Inzwischen können Sie das rgb.html-Formular unter http://www.lne.com/rgb.html ausprobieren, wo Sie die Hexadezimalzahl für eine beliebige Kombination dreier Zahlen erfahren können. Beispielsweise wird aus den RGB-Zahlenwerten 000 die Hexadezimal-Kombination 00 00 00, und aus RGB 255 255 255 wird FF FF FF.
Die endgültige hexadezimale Zahl, die Sie benötigen, setzt sich aus allen drei Zahlen mit dem Nummernzeichen (#) am Anfang zusammen:
#000000
#DE04E4
#FFFF00
Netscape und der Internet Explorer bieten einen weitaus einfacheren Weg Farben festzulegen. Anstelle von geheimnisvollen Zahlenspielen wählen Sie einfach einen Farb-Namen aus: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia oder Silver (diese Farben stammen von der Windows-Farbpalette, die nur 16 Farben zuläßt.)
Obwohl Farb-Namen einfacher zu behalten und herauszufinden sind als die Nummern, bieten sie weniger Flexibilität in den Farben, die Ihnen zur Verfügung stehen. Außerdem werden die Farb-Namen in den Browsern nicht so weitgehend unterstützt wie die Farbnummern (obwohl sowohl Netscape als auch der Internet Explorer die Farb-Namen unterstützen). Behalten Sie das im Hinterkopf, wenn Sie Farb-Namen einsetzen, da Sie diese Farben in anderen Browsern verlieren können.
Nachdem Sie also einen Farb-Namen oder eine Farbnummer in der Hand haben, können Sie losgehen und diese Farbe auf verschiedene Teile Ihrer HTML-Seite anwenden.
Ändern der Hintergrundfarbe
Um die Hintergrundfarbe der Seite zu ändern, entscheiden Sie sich für eine Farbe, und fügen Sie sie dann der <BODY>-Kennung mittels eines Attributs namens BGCOLOR (backgroundcolor = Hintergrundfarbe) hinzu. Die <BODY>-Kennung ist, falls Sie das vergessen haben, die Kennung, die den gesamten Inhalt Ihrer HTML-Seite umschließt. <HEAD> enthält den Titel und <BODY> fast alles andere. BGCOLOR ist eine HTML-Erweiterung, die von Netscape mit der Version 1.1 des Browser eingeführt wurde und Eingang in HTML 3.2 gefunden hat.
Um für Hintergründe Farbnummern einzusetzen, setzen Sie als Wert des BGCOLOR-Attributs die hexadezimale Zahl, die Sie in der vorigen Sektion herausgefunden haben, innerhalb von <BODY> ein. Das sieht dann so aus:
<BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="#934CE8">
Um Farb-Namen zu verwenden, benutzen Sie einfach den Namen der Farbe als den Wert von BGCOLOR:
<BODY BGCOLOR="#white">
<BODY BGCOLOR="#green">
|
Einige Browser erlauben es Ihnen, Farb-Namen ohne das einleitende Nummernzeichen (#) anzugeben. Obwohl dies bequemer erscheinen mag, ist die Einfügung eines einzelnen Extra-Zeichens doch wohl keine so große Extra-Mühe, wenn man bedenkt, daß dies mit vielen anderen Browsern nicht vereinbar ist. |
Ändern der Textfarben
Wenn Sie schon die Hintergrundfarben ändern, dann ist es nur logisch, daß Sie auch die Farbe des eigentlichen Textes verändern möchten. Dafür gibt es mehrere Erweiterungen von Netscape, Internet Explorer, die inzwischen Teil von HTML 3.2 sind und Sie die Farbe des Textes über Ihre ganze Seite hinweg ändern lassen. Um die Text- und Verknüpfungsfarben zu ändern, verwenden Sie die Farb-Namen oder -nummern genau so wie für das Ändern der Hintergrundfarben. Wenn Sie diese Farbe bestimmt haben, können Sie dann eines der folgenden Attribute zur <BODY>-Kennung hinzufügen, wobei Sie den Farb-Namen oder die Farbnummer als deren Wert einsetzen:
Um beispielsweise eine Seite mit schwarzem Hintergrund, weißem Text und leuchtend violetten noch nicht angewählten Verknüpfungen herzustellen, können Sie die folgende <BODY>-Kennung einsetzen:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9805FF">
Die Verwendung der folgenden Farb-Namen würde den gleichen Effekt erzielen:
<BODY BGCOLOR=black TEXT=white LINK=purple>
Jedes dieser Beispiele würde eine Seite erzeugen, die ungefähr so aussieht, wie die in Abbildung 7.27 gezeigte.
Abbildung 7.27: |
Farbtupfer
Wenn Sie die Textfarben innerhalb einer Seite mit den Attributen der <BODY>-Kennung verändern, dann verändert das den gesamten Text auf der Seite. Mit Farbtupfern können Sie die Farbe einzelner Zeichen auf der Seite bestimmen, die Sie zusätzlich zu oder anstelle der übergreifenden Textfarbe einsetzen können. Gestern haben Sie etwas über die HTML-3.2-Erweiterung <FONT> gelernt, welche die Schriftart und -größe verändert. Es gibt inzwischen aber ein drittes und noch neueres Attribut zu <FONT>, nämlich COLOR, das es Ihnen erlaubt, die Farbe von individuellen Wörtern oder Sätzen zu bestimmen. Der Wert von COLOR ist entweder ein Farb-Name oder eine Nummer:
<P> Heute werden wir <FONT COLOR="#FF0000"> ROT </FONT> sehen.
Sie können Schrift-Farbtupfer selbstverständlich gleichzeitig mit verschiedenen Schriftarten und -größen einsetzen.
Bilder als Hintergründe
Ein letztes Thema in diesem Kapitel ist die Möglichkeit, ein Bild und nicht nur einen einfarbigen Hintergrund als Hintergrund für Ihre Seiten einzusetzen. Wenn Sie ein Bild als Hintergrund einsetzen, ist dieses Bild »gekachelt« - das heißt, das Bild wird reihenweise wiederholt, um das Browser-Fenster aufzufüllen.
Um einen gekachelten Hintergrund zu erzeugen, brauchen Sie zuerst einmal ein Bild, das als Kachel dienen kann. Wenn Sie ein Bild für diese »Kacheln« erzeugen, sollten Sie sicherstellen, daß das Muster zwischen den einzelnen Bildern glatt ineinander übergeht, wenn sie nebeneinander angeordnet werden. Dazu müssen Sie normalerweise das Bild in Ihrem Bildverarbeitungsprogramm sorgfältig editieren, damit die Kanten nicht sichtbar werden. Ziel dabei ist, daß sich die Kanten so sauber treffen, daß keine »Naht« zwischen den Kacheln entsteht, nachdem sie aneinandergelegt wurden (ein Beispiel für eine weniger saubere Lösung sehen Sie in Abbildung 7.28). Sie können aber auch ein kommerzielles Clipart-Paket verwenden, das Muster bereitstellt, die oft genau für diesen Einsatzzweck ausgelegt wurden.
Abbildung 7.28: |
Wenn Sie ein Bild haben, das Sie sauber aneinanderreihen können, brauchen Sie nur noch das BACKGROUND-Attribut, das Bestandteil des <BODY>-Tag ist. Der Wert von BACKGROUND ist ein Datei-Name oder eine URL, die auf Ihre Bilddatei zeigt, wie im folgenden Beispiel:
<BODY BACKGROUND="tiles.gif">
<BODY BACKGROUND="backgrounds/rosemarble.gif">
Abbildung 7.29 zeigt das Ergebnis eines Hintergrunds mit einfachen Bildern.
Abbildung 7.29: |
Der Internet Explorer bietet einen besonderen Dreh für gekacheltes Hintergrunddesign: ein fixiertes Kachelmuster, welches Wasserzeichen genannt wird. Die Idee, die dahinter steckt, ist, daß, wenn Sie die Seite herrunterrollen, nicht mehr alles (einschließlich des Hintergrundbildes) an Ihnen vorbeirollt, sondern nur der Vordergrund (Text und Bilder). Die Hintergrundkacheln bleiben an ihrem Platz verwurzelt. Um diesen Effekt zu erzeugen, verwenden Sie das BGPROPERTIES=FIXED-(Hintergrundeigenschaften fixiert-)Attribut zur BODY-Kennung:
<BODY BACKGROUND="backgrounds/rosemarble.gif" BGPROPERTIES=FIXED>
Tips für eine bessere Nutzung von Abbildungen
Die Verwendung von Abbildungen auf Webseiten ist heute eine der meistdiskutierten Fragen zwischen Nutzern und Anbietern von Webseiten. Für jeden, der eine Webseite mit mehr, größeren und glänzenden Abbildungen gestalten will, um die Vorzüge der grafischen Fähigkeiten des Web auszunutzen, gibt es jemanden mit einer langsamen Netzwerkverbindung, der um weniger Abbildungen bittet, damit ihr oder sein Browser nicht stundenlang braucht, um eine Seite zu laden.
Als Gestalter von Webseiten sollten Sie beide Sichtweisen berücksichtigen. Schaffen Sie einen Mittelweg zwischen dem Spaß, eine optisch ansprechende, farbenfrohe Webseite zu erzeugen, und der Notwendigkeit, daß jeder, der es möchte, Ihre Informationen auch erhalten kann - und das sind auch jene Leute, die Ihre Abbildungen (weshalb auch immer) nicht brauchen können.
Dieser Abschnitt bietet Ihnen ein paar Hinweise und Kompromisse, die Sie bei der Gestaltung Ihrer Webseiten machen können, so daß Sie jeden zufriedenstellen können (oder auch unglücklich machen, je nachdem, wie Sie's betrachten).
Brauchen Sie die Abbildung wirklich?
Bei jeder Abbildung, die Sie in Ihre Seite einfügen, sollten Sie sich fragen, weshalb Sie das tun. Was bringt die Abbildung für die Gestaltung der Seite? Bietet sie Informationen, die statt dessen auch im Text präsentiert werden könnten? Ist sie nur da, weil Sie sie mögen?
Bemühen Sie sich, Ihre Webseiten nicht mit hübschen, aber ansonsten unnötigen Abbildungen zu überhäufen. Eine einfache Webseite mit nur wenigen Symbol-Abbildungen ist häufig effektiver als eine, aus der Ihnen ausgefallene 3-D-Buttons entgegenspringen oder große Fotografien, schattierte Knöpfe oder psychedelische Trennlinien.
Verwenden Sie kleine Bilder
Ein kleines Bild benötigt weniger Zeit bei der Übertragung durchs Netz. Daher bewirkt die Verwendung kleinerer Abbildungen, daß Ihre Seite schneller geladen wird und Leute, die sie über langsame Netzwerk-Verbindungen lesen wollen, weniger frustriert sind. Was könnte leichter sein?
Mit »kleinerer Abbildung« kann gemeint sein: geringere Größe auf dem Bildschirm. Doch Sie können kleinere Abbildungen auch erzeugen, indem Sie die Anzahl der Farben verringern, die von dem Bild verwendet werden. Ziel ist also, die Dateigröße der Abbildung zu verringern, damit sie schneller übertragen wird, doch ein 10mal 10 cm großes Schwarzweißbild (zwei Farben) kann eine geringere Dateigröße haben als eine zwei Quadratzentimeter große Fotografie mit 8-Bit-Farbtiefe. Mit den meisten Bildverarbeitungsprogrammen können Sie die Anzahl der verwendeten Farben reduzieren und das Ergebnis so bearbeiten, daß es auch mit weniger Farben noch gut aussieht.
Eine gute Regel, an die man sich halten kann, ist, zu versuchen, die Abbildungen kleiner als 20 Kbyte zu halten. Das mag wenig scheinen, doch eine einzige 20-Kbyte-Datei braucht etwa 20 Sekunden, um über eine 14.400-bps-SLIP-Verbindung geladen zu werden. Multiplizieren Sie diese Zeit mit der Anzahl der Abbildungen in Ihrer Webseite, und Sie kommen womöglich auf eine spürbare Zeitspanne für das Laden der Seite (auch wenn Sie einen Browser verwenden, der mehrere Bilder gleichzeitig laden kann, bleibt die Übertragungsgeschwindigkeit doch gleich schnell). Wird sich jemand für Ihre Webseite interessieren, wenn man essen und spazierengehen kann, während sie geladen wird?
|
Die kleinen Symbole, die ich für die Richtungen in den Navigationsbeispielen verwendet habe, sind jeweils etwa 300 Byte groß, weniger als ein Drittel Kbyte. Das Spinnennetz-Bild im Halloween-Beispiel ist nur wenig größer als ein Kbyte. Klein heißt nicht nutzlos. |
Abbildungen so oft wie möglich wiederverwenden
Zusätzlich dazu, daß Sie einzelne Bilder kleinhalten sollten, versuchen Sie, dasselbe Bild so oft wie möglich auf einzelnen Seiten und über mehrere Seiten hinweg zu wiederholen: Wenn Sie z.B. Abbildungen von Hinweispunkten haben, benutzen Sie jedesmal dasselbe Bild, anstatt ein neues einzusetzen. Die Wiederverwendung von Bildern hat zwei bedeutsame Vorteile gegenüber der Verwendung unterschiedlicher Bilder:
Um ein Bild wiederzuverwenden, brauchen Sie nichts Besonderes zu tun; vergewissern Sie sich bloß, daß Sie sich auf das Bild jedesmal mit der gleichen URL beziehen. Der Browser kümmert sich dann um den Rest.
Alternativen zu Abbildungen anbieten
Wenn Sie bislang bei Ihren Abbildungen das ALT-Attribut noch nicht benutzt haben, sollten Sie es nun tun. Das ALT-Attribut ist außerordentlich nützlich, um Ihre Webseiten auch für textbasierte Browser lesbar zu machen. Was ist jedoch mit Leuten, welche die Abbildungen in ihrem Browser ausschalten, weil sie eine langsame Internet-Verbindung haben? Die meisten Browser verwenden in diesem Fall das ALT-Attribut nicht (obgleich sie es sollten). Und bisweilen ist ALT nicht ausreichend; da Sie lediglich Text im ALT-Attribut verwenden können, kann als Ersatz für die Abbildung kein HTML-Code benutzt werden.
Um all diese Probleme zu umgehen und Ihre fesche, grafische Webseite zu bewahren, ziehen Sie die Erzeugung einer zusätzlichen reinen Textversion Ihrer Webseiten in Betracht, und fügen Sie Verbindungen zu diesen in die grafischen Versionen der Seiten ein, etwa so:
<P> Eine reine <A HREF="TextVersion.html"> Text-Version </A> dieser Seite ist ebenfalls verfügbar. </P>
Die Verknüpfung mit der Textversion der Seite benötigt nur einen kleinen Absatz auf der »eigentlichen« Webseite, macht jedoch die Informationen, die Sie anbieten, für Ihre Leser viel besser erreichbar. Dies ist eine Gefälligkeit, für die Ihnen die Leser mit langsamen Verbindungen dankbar sein werden, während Sie zugleich auch Ihre »eigentliche« Webseite mit so viel Grafik, wie Sie mögen, für diejenigen bereithalten können, die schnelle Netzwerk-Verbindungen haben.
Zusammenfassung
Eine der wichtigsten Eigenschaften, die das World Wide Web von anderen Formen der Internet-Informationen abhebt, ist, daß Dokumente im Web farbige Grafiken enthalten können. Man könnte behaupten, daß es die Existenz der Grafik war, die das Web so schnell um sich greifen und es in einem so kurzen Zeitraum so beliebt werden ließ.
Um Abbildungen in Ihre Webseite aufzunehmen, müssen jene Abbildungen im GIF- oder JPEG-Format vorliegen (GIF ist weitgehender unterstützt) und klein genug sein, um auch über langsame Internet-Verbindungen schnell übertragen werden zu können. Die HTML-Kennung <IMG> ermöglicht das Einbinden einer Grafik in Ihre Webseite, entweder gemeinsam mit Text in einer Zeile oder in einer eigenen Zeile. Die <IMG>-Kennung hat drei grundsätzliche Attribute, die in Standard-HTML unterstützt werden:
Sie können Abbildungen auch innerhalb eines Verknüpfungs-Tag (<A>) verwenden, wobei die Abbildung genauso wie der Text zum Anwählen der Verknüpfung benutzt werden kann.
Zusätzlich zu den Standard-Attributen gibt es verschiedene neue Attribute der <IMG>-Kennung, die größere Kontrolle über Abbildungen und das Layout von Webseiten ermöglichen. Diese neuen Attribute, von denen die meisten inzwischen in HTML 3.2 aufgenommen wurden, sind u.a. die folgenden:
Indem Sie Attribute der <BODY>-Kennung verwenden, können Sie eine Seite mit farbigem Hintergrund oder farbigem Text versehen, oder einzelne Buchstaben mit dem COLOR-Attribut der <FONT>-Kennung einfärben. Außerdem können Sie gemusterte oder gekachelte Hintergrundbilder einsetzen, die hinter dem Text und den Bildern erscheinen, indem Sie das BACKGROUND-Attribut der <BODY>-Kennung mit einem Bild der Kachel versehen.
Fragen und Antworten
Frage:
Wie kann ich Verkleinerungen meiner Abbildungen erzeugen, so daß ich sie mit größeren externen Abbildungen verknüpfen kann?
Antwort:
Das müssen Sie mit irgendeinem Bildverarbeitungsprogramm machen; das Web wird's nicht für Sie erledigen. Laden Sie einfach das Bild, und verkleinern Sie es auf die richtige Größe.
Frage:
Kann ich HTML-Kennungen in die Zeichenfolge für das ALT-Attribut schreiben?
Antwort:
Das wär' ganz nett, nicht wahr? Unglücklicherweise geht das aber nicht. Alles, was man einfügen kann, ist ganz gewöhnlicher Text. Halten Sie ihn möglichst einfach, und alles sollte in Ordnung sein.
Frage:
Sie haben eine Technik besprochen, bei der man LOWSRC-Abbildungen auf einer Seite einfügt, die vor den regulären Abbildungen heruntergeladen werden. Ich habe einen Effekt auf einer Webseite gesehen, wo ein Bild ziemlich verschwommen geladen und dann mit der Zeit deutlicher wird. Ist das der LOWSRC-Effekt?
Antwort:
Nein, das ist etwas, das interlaced GIF genannt wird. Da handelt es sich nur um eine Abbildung, die beim Laden anders als normale GIFs dargestellt wird. Sie werden darüber mehr im nächsten Kapitel erfahren.
Frage:
Ich hab' ein paar Webseiten gesehen, bei denen man verschiedene Stellen einer Abbildung anklicken kann und dann unterschiedliche Ergebnisse bekommt, wie eine Landkarte der Vereinigten Staaten von Nordamerika, in der jeder Staat eine andere Seite hat. Wie kann man das mit HTML machen?
Antwort:
Das wird Abbildungsplan (image map) genannt und ist schon eine fortgeschrittene Form der Entwicklung von Webseiten. Dazu gehört das Schreiben von Code auf der Server-Seite, um die Mausklicks zu interpretieren und das richtige Ergebnis zurückzuliefern. Ich beschreibe das in Kapitel 17, »Abbildungspläne«.
Copyright ⌐1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X
