Das häufigste standalone-Tag ist am Ende eines Absatzes. Andere Tags werden paarweise benutzt. Das erste Tag weist den Web-Browser an, die Tag-Funktion einzuschalten, mit dem zweiten Tag wird sie wieder beendet. Das Tag am Ende sieht aus wie der am Anfang, erhält jedoch zusätzlich einen führenden Schrägstrich. Die Syntax lautet: object Das Tag legt die Funktion fest, die auf das Objekt angewandt wird. Wenn Sie z.B. einen Satz besonders betonen wollen, klammern sie ihn einfach mit dem Tag-Paar <EM> ein: <EM>betonter Text Viele der standalone-Tags und der Anfangs-Tags in einem Paar können Optionen enthalten. Die vollständige Syntax lautet daher: Wenn Sie HTML-Dokumente manuell mit einem Texteditor erstellen, wird es Ihnen sicher passieren, daß Sie das http://www.oreilly.de/german/freebooks/Html_buch/www03.html (2 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
End-Tag weglassen oder den Schrägstrich darin vergessen. Machen Sie sich darum jedoch keine Sorgen: Sie merken sofort, wenn das passiert, außerdem ist es schnell korrigiert. 3.1.3 Richtlinien für den Aufbau eines Dokuments Wir betrachten jetzt die drei Tag-Paare, die die höchste Strukturierungsstufe in einem HTML-Dokument festlegen: komplettes HTML-Dokument Header-Informationen des Dokuments Rumpf des HTML-Dokuments Im folgenden sehen Sie das Gerüst eines HTML-Dokuments mit der vorgeschriebenen Verschachtelung dieser drei Tag-Paare: Header Rumpf und Inhalt Vergessen Sie nicht, daß Anordnung und Layout (Einrückungen und Zeilenumbrüche) für Web-Browser keine Bedeutung haben. Sie können Ihr HTML-Dokument daher nach eigenem Geschmack formatieren. 3.1.4 Beispiel für ein HTML-Dokument Im folgenden sehen Sie ein Beispiel für ein HTML-Gerüst, das in meinem Home-Verzeichnis liegt. Ich öffne es beim Erzeugen eines neuen HTML-Dokuments als Ausgangspunkt mit einem Texteditor. Dieses Gerüst könnte zwar noch etwas einfacher sein, aber löschen kann ich ja immer noch. Das Beispiel für ein HTML-Dokument sieht wie folgt aus: <TITLE>Sample HTML Document Sample HTML Document <EM>To demonstrate HTML style
Hello World.
Creation Date: <EM>Sat Apr 9, 1994
DRJ http://www.oreilly.de/german/freebooks/Html_buch/www03.html (3 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
In Abbildung 3-1 sehen Sie, wie dieses HTML-Beispiel in Mosaic dargestellt wird.
Abb. 3-1. Mosaic mit der Darstellung des HTML-Beispieldokuments. Wir wollen uns der Reihe nach die darin benutzten neuen Tags ansehen: <TITLE>text-phrase Das Tag-Paar <TITLE> kommt einmal im Dokument vor und enthält den Namen des Dokuments. Es sollte am Anfang des Dokuments innerhalb des -Abschnitts erscheinen. Viele Web-Browser zeigen den Dokumentnamen in einem eigenen Bereich an. Dieser Dokumentname erscheint auch, wenn eine Benutzerin das Dokument in ihre »Hotlist« oder die Liste der Lesezeichen (bookmarks) einträgt. Der Dokumentname ist zwar nicht zwingend erforderlich, sollte jedoch in jedem HTML-Dokument stehen. Dies ist eine spezielle Anwendung des Standalone-Tags zur Kennzeichnung der E-Mail-Adresse des Eigentümers dieses Dokuments. Ein Web-Browser zeigt diese Angaben zwar nicht an, kann sie aber verwenden, wenn der Benutzer dem Eigentümer des Dokuments E-Mail senden will. Später werden wir noch andere Einsatzmöglichkeiten des Tags beschreiben. Das Standalone-Tag fügt in den aktuellen Textfluß eine Graphik ein. Die Graphik wird über ihren URL gekennzeichnet. In Abschnitt 3.1.7 finden Sie weitere Hinweise über URLs, in Abschnitt 3.1.9 mehr über das Einfügen von Bildern. text-phrase Das Tag-Paar für Überschriften gibt eine Strukturebene Ihres Dokuments an. Es gibt sechs verschiedene Stufen von Überschriften, nämlich H1 bis H6. Überschriften werden genauso wie Absätze automatisch umbrochen, wenn der Text nicht in eine Zeile paßt. Tags für Überschriften wirken außerdem als Absatzgrenzen vor und nach der Überschrift. <EM>text Das Tag-Paar <EM> kennzeichnet eine Textstelle, die hervorgehoben darzustellen ist. Auf einem graphikfähigen Bildschirm kann der Text z.B. kursiv ausgegeben werden, auf einem zeichenorientierten Display dagegen unterstrichen. Das Tag
beendet einen Absatz und bewirkt am Bildschirm eine Leerzeile nach dem Absatz. Zwei solcher Absatz-Tags bewirken nur eine einzelne Leerzeile.
Das Tag (horizontal rule, waagrechte Linie) bewirkt, daß der Browser eine waagrechte Linie über den Bildschirm zieht. Damit lassen sich Seiten logisch untergliedern oder Formulare erzeugen. Es gibt kein Gegenstück für senkrechte Linien. text Das Tag-Paar kennzeichnet Adressen. Je nach verwendetem Web-Browser wird der Text in einer besonderen Größe, Schriftart oder speziellen Schriftausprägung dargestellt. 3.1.5 Querverweise Eines der wichtigsten Tag-Paare in HTML erzeugt einen Querverweis (Hyperlink) auf ein anderes Dokument oder eine Internet-Ressource. Das Tag-Paar zur Verankerung wird allgemein wie folgt benutzt:
http://www.oreilly.de/german/freebooks/Html_buch/www03.html (4 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
anchor-text Dieses Paar wird auch als Anker-Paar bezeichnet, das in Ihrem HTML-Dokument den Anker für einen Verweis auf eine bestimmte Stelle definiert. Bei einer anderen Verwendungsmöglichkeit markiert das Anker-Tag eine Stelle innerhalb des Dokuments, auf die ein Querverweis zeigt (dies ist optional, da ein Verweis standardmäßig immer auf den Anfang eines Dokuments zeigt). Die beiden Varianten werden manchmal als Quell- und Ziel-Tags (link-from bzw. link-to) bezeichnet. Das öffnende Anker-Tag benötigt immer mindestens eine Option. Es gibt zwar mehrere Optionen, die beiden wichtigsten sind jedoch HREF zur Definition eines Hyperlinks und NAME zur Kennzeichnung eines Verweisziels innerhalb einer Datei. Wir betrachten zuerst die Option HREF. Ihre Syntax lautet: anchor-text anchor-text wird im Browser dargestellt. Wenn der Benutzer den Verweis aktiviert, fordert der Browser den angegebenen URL an. URLs werden in Abschnitt 3.1.7 beschrieben. Wenn Sie noch einmal unser HTML-Beispieldokument betrachten, entdecken Sie am Ende einen Querverweis: DRJ Ich unterschreibe mit diesem Verweis alle meine Seiten. Meine Initialen DRJ werden zum Ankertext für einen Querverweis auf eine andere HTML-Seite im gleichen Verzeichnis, die die Bezeichnung rjones.html hat. Der Hyperlink, der als meine Unterschrift dient, ist außerdem mit dem Tag-Paar geklammert: DRJ Daran erkennen Sie, daß Querverweise in andere Tag-Konstrukte eingebettet sein können. Überall, wo im Hauptteil des HTML-Dokuments Text erscheinen kann, können Sie einen Hyperlink anlegen. Der Text kann in einem Absatz, einer Überschrift oder einem Zitat stehen oder Teil einer Adresse sein. Die Umkehrung gilt jedoch nicht immer: Sie können zwar ein Ankerpaar in eine Überschrift stellen, sollten jedoch eine Überschrift nie innerhalb eines Ankerpaars einbetten. Statt Text können Sie als Quelle für den Verweis auch ein Bild verwenden. Dazu umrahmen Sie das Tag mit Anker-Tags: Durch das Anzeigen einer eingebetteten Graphik wird diese »scharf gemacht«: Sobald sie vom Benutzer aktiviert wird, fordert der Browser das Dokument an, das im zugehörigen URL beschrieben wird (in diesem Fall eine Datei namens org-overview.html). 3.1.6 Verweise auf Stellen im Dokument Verweise zeigen standardmäßig immer auf den Anfang eines Dokuments. Sie können aber auch Querverweise anlegen, die sich auf andere Stellen in einem HTML-Dokument beziehen. Dazu müssen Sie zunächst mit der Option NAME des Anker-Tags das Sprungziel identifizieren: anchor-text Dieses Tag-Paar kennzeichnet ein Verweisziel im HTML-Dokument und weist ihm einen Namen zu. Das Paar bietet einen zusätzlichen Einstiegspunkt in das HTML-Dokument. Sie können den Ankertext auch weglassen. Auf diesen Zielpunkt verweisen Sie dann mittels #anchor-name. Angenommen, Sie haben ein Dokument, das in der gleichen Datei einen Anhang enthält und wollen sich auf den Anhang beziehen. Dazu nehmen Sie die Überschrift am Beginn des Anhangs als Verweisziel. Der HTML-Code zu Beginn des Anhangs könnte etwa so lauten:
http://www.oreilly.de/german/freebooks/Html_buch/www03.html (5 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
Jetzt können Sie innerhalb des Dokuments wie folgt Hyperlinks auf den Anhang anlegen: Details finden Sie inAppendix A Sie können auch aus einem externen Dokument heraus direkt auf den Anhang verweisen. In einem anderen HTML-Dokument sähe das so aus: Appendix A Der URL kann entweder vollständig oder relativ sein. Wird die Syntax des Ankers nicht eingehalten, sind die meisten Web-Browser nachsichtig und zeigen den Ankertext oder das eingefügte Bild an, machen es jedoch nicht als Hyperlink »scharf«. Diese Möglichkeit können Sie auch bewußt einsetzen, um Verweise zeitweilig außer Kraft zu setzen, ohne den HTML-Code zur Definition des Links zu entfernen. 3.1.7 URLs Ein URL zeigt auf eine Datei oder ein Verzeichnis.(1) Es gibt drei Arten von URLs, nämlich absolute, relative und lokale. Manche Browser unterstützen darüber hinaus noch eine Reihe spezieller URLs. Absolute URLs definieren eine Datei im Internet vollständig. Relative und lokale URLs bieten die Möglichkeit, eine Datei auf dem gleichen Server zu identifizieren, auf dem auch das Dokument liegt, in dem sie enthalten sind. In den folgenden Abschnitten beschreiben wir die verschiedenen Arten von URLs ausführlicher. 3.1.7.1 Absolute URLs
Absolute URLs können sich auf jede Ressource im Internet einschließlich lokaler Ressourcen beziehen. Aus Gründen, die wir im nächsten Abschnitt darlegen, eignen sich die relativen URLs für lokale Ressourcen jedoch besser. Die vollständige Syntax für absolute URLs lautet: access-method://server-name[:port]/directory/file Fehlt die Portnummer, so wird der Standardport für die jeweilige Zugriffsmethode benutzt. Der URL eines Dokuments auf einem Web-Server hat als Zugriffsmethode http:. Auf die Master List aller öffentlichen World Wide Web-Server auf der ganzen Welt können Sie z.B. über den folgenden URL zugreifen: http://www.w3.org/hypertext/DataSources/WWW/Geographical.html Sie erreichen mit dem HTTP-Protokoll (und dem Standardport) einen Server namens www.w3.org. Dort gibt es ein Verzeichnis /hypertext/DataSources/WWW, das ein Hypertext-Dokument mit dem Namen Geographical.html enthält. Jede Datei im Internet läßt sich über ihren URL eindeutig adressieren, unabhängig vom jeweiligen Dateityp oder der Art des Servers, auf der sie liegt. Neben der Zugriffsmethode http: unterstützt das URL-Konzept auch andere Zugriffsprotokolle, etwa Gopher, FTP und Telnet. Der URL für den Zugriff auf eine Datei auf einem Gopher-Server entspricht der üblichen URL-Spezifikation. Der URL für den Server der University of Minnesota sieht wie folgt aus: gopher://gopher.micro.umn.edu Wenn Sie sich das FTP-Archiv von O'Reilly & Associates ansehen wollen, öffnen Sie den folgenden URL:
http://www.oreilly.de/german/freebooks/Html_buch/www03.html (6 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
ftp://ftp.ora.com/pub/ Manchmal finden Sie vielleicht sowohl Verweise auf die Zugriffsmethode ftp: als auch auf file:. Die Schreibweise ftp: hat die ältere Schreibweise file: ersetzt, da sie das benutzte Protokoll genauer beschreibt. Wenn Sie mit der Zugriffsmethode ftp: auf den Inhalt eines Verzeichnisses verweisen, sollten Sie darauf achten, daß der URL mit einem Schrägstrich »/« endet. Bei Verweisen auf eine Datei innerhalb eines Verzeichnisses ist dies nicht nötig. Der URL einer Telnet-Ressource wird Sie jetzt nicht mehr überraschen: telnet://www.w3.org/ Enthält eines Ihrer Dokumente einen URL, geht der Web-Browser direkt zur angegebenen Ressource und nicht über Ihren Web-Server. Das hat zur Folge, daß Benutzer, die einen Rechner nicht direkt mit telnet aus der Shell erreichen können (weil sie durch einen Firewall blockiert sind oder das Paßwort nicht kennen), auch nicht über einen Web-Browser auf diesen Rechner zugreifen können, selbst wenn dies vom Web-Server aus möglich wäre. Wenn Sie einen Server an einer ungewöhnlichen Portnummer betreiben, müssen Sie die Portnummer als Teil des URLs angeben. Die Standard-Portnummern lauten:
Portnummer Dienst 21
FTP
23
Telnet
70
Gopher
80
HTTP
Der folgende URL beschreibt einen Gopher-Server, der an Port 1250 betrieben wird: gopher://garnet.berkeley.edu:1250/ Viele Organisationen im Web haben öffentlich zugängliche Gateways zu anderen verbreiteten Internet-Diensten eingerichtet. Die URLs für diese Gateways basieren auf URLs für Dateien, können jedoch auch spezielle Syntaxvarianten verwenden. Abschnitt 4.3 enthält eine Beschreibung verschiedener WAIS-Gateways. 3.1.7.2 Absolute und relative URLs
Ein relativer URL impliziert die gleiche Zugriffsmethode, den gleichen Servernamen und den gleichen Verzeichnispfad wie das Dokument, das den URL enthält. Es beschreibt die relative Position des Ziel-URLs, bezogen auf den aktuellen URL. Der folgende URL beschreibt z.B. eine Datei, die im gleichen Verzeichnis liegt wie das Dokument, das den URL enthält: Next Page Relative URLs werden manchmal auch als partielle URLs bezeichnet. Sie zeigen auf Informationsressourcen im gleichen Verzeichnis oder auf dem gleichen Server. Absolute URLs zeigen dagegen meist auf Informationsressourcen auf anderen Servern. In der Praxis bedeutet das, daß Sie mit relativen URLs auf Ihre eigenen Dokumente verweisen und mit absoluten URLs auf Ressourcen, die sich irgendwo im Internet befinden. Für den Web-Server spielt die Unterscheidung zwischen absoluten und relativen URLs keine Rolle. Aktiviert der Benutzer einen relativen Querverweis, so ermittelt der Web-Browser anhand des aktuellen URLs die Zugriffsmethode, den Namen des Servers, die Portnummer und das Verzeichnis und sendet nur den absoluten URL an den Server. http://www.oreilly.de/german/freebooks/Html_buch/www03.html (7 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
Mit relativen URLs brauchen Sie bei der Erstellung von HTML-Dokumenten überhaupt keine Rücksicht darauf zu nehmen, in welcher Verzeichnisstruktur die Dokumente schließlich landen oder auf welchem System der Server läuft. Sie können relative Sprünge zwischen HTML-Dokumenten mit den gleichen Verzeichniskonstrukten angeben, mit denen Sie sich auch im UNIX-Verzeichnisbaum bewegen. Ein Hyperlink, der in der Verzeichnisstruktur zwei Stufen nach oben zu Ihrer Home-Page springt, läßt sich z.B. mit folgendem HTML-Code realisieren: Return to Home Page Relative URLs erlauben Ihnen auch, Ihre HTML-Verzeichnisstruktur an eine beliebige Stelle im Web zu verschieben. Ihr Systemverwalter ist vielleicht (aus unterschiedlichen Gründen) daran interessiert, daß andere Organisationen eine lokale Kopie Ihrer HTML-Verzeichnissstruktur bekommen. Relative URLs funktionieren auch, wenn ein Web-Browser ohne Beteiligung eines Web-Servers Dateien direkt aus dem Dateisystem liest. Dies ist bei der Erstellung von Web-Dokumenten sehr hilfreich. Benutzen Sie in Ihrem Dokumentbaum keine symbolischen Verweise, da sie dem Zweck der relativen URLs zuwiderlaufen und eine Übertragung des Baums auf andere Rechner verhindern. Wenn Sie in Versuchung kommen, einen symbolischen Verweis einzusetzen, sollten Sie statt dessen die Anweisung Alias in srm.conf verwenden. (In Abschnitt 2.2.3 finden Sie mehr zu diesem Thema.) Ein relativer URL muß sich nicht unbedingt auf das Verzeichnis des aktuellen Dokuments beziehen, sondern kann auch eine Angabe relativ zum Stammverzeichnis der Dokumente enthalten. Diese Variante der relativen URLs wird mit einem Schrägstrich eingeleitet. Sie sieht also aus wie ein absoluter URL, enthält aber weder die Zugriffsmethode noch den Namen des Servers. 3.1.7.3 Spezielle URLs
Manche Browser unterstützen noch eine Reihe besonderer URLs. Sie greifen damit auf die Artikel eines lokalen News-Servers zu oder senden E-Mail an den Eigentümer eines Dokuments. Um z.B. die News-Gruppe comp.infosystems.www.providers statt mit einem News-Reader mit Ihrem Web-Browser zu lesen, können Sie folgenden URL öffnen: news:comp.infosystems.www.providers Manche Web-Browser, etwa Lynx, ermöglichen das Versenden von E-Mail an den Eigentümer einer Seite. Zur Festlegung des Eigentümers können Sie den folgenden lokalen URL verwenden, der auch im HTML-Beispieldokument in Abschnitt 3.1.4 vorkommt: mailto:internet-address mailto: wird bisher allerdings noch nicht sehr häufig unterstützt. 3.1.8 Listen Listen bilden eine weitere Schlüsselkonstruktion in HTML. Es gibt drei Arten von Listen: ● Einfache Listen (mit Aufzählungssymbol): ● Numerierte Listen (mit Nummern): Liste ● Glossare (definition lists): Liste Bei den ersten beiden Listenarten werden die Elemente der Liste mit dem Tag (list item) gekennzeichnet. Eine einfache Liste mit Aufzählungssymbolen, die drei Einträge enthält, wird z.B. wie folgt gekennzeichnet: http://www.oreilly.de/german/freebooks/Html_buch/www03.html (8 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
First bullet Second bullet Third bullet Wie Sie vielleicht schon vermuten, bricht der Web-Browser Einträge automatisch um und rückt die nächste Zeile entsprechend ein, wenn ein Eintrag nicht in eine Zeile paßt. Listen können auch verschachtelt werden: First bullet First sub-bullet Second sub-bullet Third sub-bullet Second bullet Third bullet Abbildung 3-2 zeigt die Darstellung dieser verschachtelten Listen in Mosaic.
Abb. 3-2. Darstellung verschachtelter Listen mit Aufzählungssymbolen in Mosaic. Die dritte Variante der Listen, das Glossar (definition list), kommt zum Einsatz, wenn weder Aufzählungszeichen noch Numerierung nötig sind und die Aufzählungselemente allein stehen können. Ein gutes Beispiel hierfür ist ein Glossar mit einer Liste von Ausdrücken und zugehörigen Definitionen. In einem Glossar werden die Listeneinträge nicht mit dem -Tag gekennzeichnet, sondern mit dem Tag-Paar und . Das Tag-Paar kennzeichnet den Ausdruck selbst, das Tag-Paar den zugehörigen Text. Dieser wird unter dem -Eintrag eingerückt. Ein Glossar mit drei Einträgen könnte z.B. so aussehen: Action Plan for African Primate Conservation Compiled by J.F. Oates and the IUCN/SSC Primate Specialist Group, 1986, 41 pp.
Dolphins, Porpoises and Whales. An Action Plan for the Conservation of Biological Diversity Second Edition. Compiled by W.F. Perrin and the IUCN/SSC Cetacean Specialist Group, 1989, 27 pp.
Otters. An Action Plan for their Conservation Compiled by P. Foster-Turley, S. Macdonald, C. Mason and the IUCN/SSC Otter Specialist Group, 1990, 126 pp. Abbildung 3-3 zeigt die Darstellung dieses Glossars in Mosaic.
Abb. 3-3. Darstellung eines Glossars in Mosaic. 3.1.9 Graphiken Wir erwähnten Graphiken bereits kurz bei der Einführung des HTML-Tags . Für die Verwendung von Graphiken stehen grundsätzlich zwei Möglichkeiten zur Verfügung, nämlich Inline-Graphiken und externe Graphiken. http://www.oreilly.de/german/freebooks/Html_buch/www03.html (9 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
Inline-Graphiken werden vom Web-Browser als Bestandteil des Dokuments angezeigt und automatisch zusammen mit dem Dokument übertragen. Externe Graphiken werden von einem separaten Programm (Viewer) dargestellt, das der Web-Browser bei Bedarf startet. Der Benutzer muß externe Graphiken durch Aktivieren eines Hyperlinks explizit anfordern. Die Übertragung von Inline-Graphiken kann sehr langsam ablaufen, da sie viele Daten enthalten. Viele Web-Browser bieten daher die Möglichkeit, den Download von Inline-Graphiken auszuschalten. Sie müssen dann explizit mit einem Hyperlink angefordert werden, bevor der Browser sie vom Server holt. Nach dem Aktivieren der Inline-Graphiken werden sie direkt im Dokument angezeigt und nicht in einem externen Viewer. Wenn Sie den Einsatz von Graphik in einem HTML-Dokument erwägen, sollten Sie berücksichtigen, welche Benutzer auf Ihren Web-Server zugreifen. Arbeiten sie mit einem graphikfähigen Web-Browser wie z.B. Mosaic oder mit einem zeilenorientierten Browser wie Lynx? Falls eine Art von Web-Browsern dominiert, wird Ihnen die Entscheidung leichter falle, als wenn beide Arten zum Einsatz kommen. 3.1.9.1 Inline-Graphiken
Inline-Graphiken unterliegen dem automatischen Textfluß und dem automatischen Umbruch des Web-Browsers. Ein Bild wird also einfach wie ein Wort behandelt und kann daher mitten in einem Absatz stehen. Soll eine Inline-Graphik allein stehen, so müssen Sie es im HTML-Dokument mit den Tags oder umgeben. Bei Inline-Graphiken werden die beiden Graphikformate Graphics Interchange Format (GIF) und X Bitmap (XBM) unterstützt. Das Format GIF ermöglicht bis zu 256 Farben und ist weiter verbreitet als das Schwarzweißformat XBM. Beim automatischen Umbruch von Inline-Graphiken innerhalb eines Absatzes können Sie die Ausrichtung des Bildes mit der Textzeile explizit angeben, wenn Sie die optionale Angabe ALIGN im -Tag verwenden. ALIGN kann drei Werte annehmen: TOP richtet die Oberkante des Bildes mit der Oberkante der aktuellen Textzeile aus, bei MIDDLE steht der Text in der Mitte des Bildes und bei BOTTOM an der Unterkante der Graphik. Fehlt die Angabe ALIGN, gilt der Standardwert BOTTOM. Bei der Positionierung des Bildes und dem automatischen Umbruch werden beide Bildformate normalerweise mit rechteckigem Umriß berücksichtigt. In beiden Formaten sind aber auch Bilder mit durchsichtigem Hintergrund möglich, die keinen rechteckigen Umriß mehr haben. Bei durchsichtigem Hintergrund scheint die Hintergrundfarbe des Hauptfensters durch die transparenten Bildteile. Diese Technik wird vor allem bei »manuellen« Unterschriften am Ende eines HTML-Dokuments verwendet, oder um ein rundes Universitätssiegel wirklich rund erscheinen zu lassen und nicht nur als runde Graphik in einem rechteckigen Bild. Der folgende URL zeigt auf ein Dokument, das die Erstellung von transparentem Hintergrund erklärt: http://melmac.corp.harris.com/transparent_images.html Bei Browsern, die auf einem Farbgraphiksystem laufen, müssen sich Ihre Bilder die Colormap (Farbtabelle) unter Umständen mit anderen Applikationen teilen. Mosaic belegt z.B. nur eine Colormap mit 50 Einträgen. Enthält eine Inline-Graphik mehr Farben als dargestellt werden können, so wird sie mit den verfügbaren Farben angezeigt und wird daher nicht so gut aussehen wie das vollfarbige Bild. Sie sollten unter Umständen die Anzahl der Farben in Ihren GIF-Bildern auf weniger als 50 reduzieren. Enthält ein einzelnes HTML-Dokument mehrere GIF-Bilder, so sollten Sie mit dem Programm ppmquantall aus dem Paket pbmplus eine gemeinsame Colormap für alle Bilder erzwingen.(2) Das Colormap-Problem beeinflußt auch die Entscheidung, ob Sie Ihre HTML-Dokumente mit Photographien anreichern (die http://www.oreilly.de/german/freebooks/Html_buch/www03.html (10 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
viele Farben erfordern) oder mit Zeichnungen, die mit einer begrenzten Farbpalette auskommen. Sie dürfen auch die Geschwindigkeit nicht außer acht lassen: Der Download eines HTML-Dokuments mit Inline-Graphiken dauert wesentlich länger als ohne Graphiken (es sei denn, der Benutzer hat den Download von Graphiken ausgeschaltet). Je größer die Inline-Graphik, um so länger dauert die Übertragung. Die Zeit erhöht sich sogar proportional zum Quadrat der Bildgröße (ein Bild mit der Kantenlänge vier Zentimeter dauert fast doppelt so lang wie ein Bild der Kantenlänge drei Zentimeter). Dabei profitieren Sie allerdings von der Tatsache, daß die meisten graphischen Web-Browser Inline-Graphiken in einem Cache zwischenspeichern. Eine Inline-Graphik, die bereits in HTML-Dokumenten enthalten war, die sich der Benutzer vorher angesehen hat, kann sich daher noch im Cache befinden. Das Caching-Verfahren kommt auch zum Tragen, wenn eine Inline-Graphik mehrfach im gleichen HTML-Dokument vorkommt. Sie wird dann nur einmal geholt. Ein Trick zur Lösung des Geschwindigkeitsproblems bei großen Bildern besteht im Einsatz von Thumbnails. Ein Thumbnail ist eine kleine Inline-Version eines Bildes, die als Verweis auf das große Bild dient. Dieses wird dann extern dargestellt. Mit Bildbearbeitungsprogrammen, etwa jenen aus dem pbmplus-Paket, können Sie sehr einfach eine verkleinerte Version eines Bildes anlegen. Der HTML-Code hierfür sieht so aus: Wir benutzen dabei die Syntax für externe Bilder, die wir im nächsten Abschnitt beschreiben. Die dargestellten Probleme sollten Sie jedoch nicht davon abhalten, Ihre HTML-Dokumente mit Graphiken anzureichern. Graphiken können die Informationen in Ihrem HTML-Dokument verdeutlichen und dessen Einsatzbereich erweitern. In Abschnitt 3.4 werden wir außerdem sehen, daß einzelne Bereiche von Inline-Graphiken als Anker für Verweise dienen können (ein Mausklick auf verschiedene Teile des Bildes kann unterschiedliche Verweise auslösen). 3.1.9.2 Externe Graphiken
Externe Graphiken werden nicht inline als Bestandteil des Dokuments angezeigt, sondern in einem eigenen Fenster von einem externen Programm dargestellt. Diese Technik sollten Sie verwenden, wenn Sie mit Bildern in den Formaten TIFF, JPEG, RGB oder HDF zu tun haben und diese nicht in GIF-Bilder umwandeln wollen. Sie eignet sich auch zur Darstellung sehr großer GIF-Bilder. Anstelle des bereits beschriebenen HTML-Tags betten Sie den URL der externen Graphik einfach als Teil eines Verweises ein. Um z.B. ein JPEG-Bild in einem externen Fenster darzustellen, können Sie den folgenden HTML-Code verwenden: anchor-text Dabei können Sie filename.jpg durch einen beliebigen URL ersetzen, es muß keine lokale Datei sein. In Abschnitt 2.3.1 finden Sie eine Beschreibung des Protokolls zwischen Web-Server und -Browser, das dies ermöglicht. Im Augenblick begnügen wir uns mit der Feststellung, daß der Benutzer einen externen Viewer installiert haben muß, der die übertragene externe Bilddatei verarbeiten kann. Außerdem muß der Web-Browser den Typ der eingehenden Daten erkennen und den zugehörigen Viewer starten können. Externe Graphiken in einem HTML-Dokument schränken dessen Einsatzbereich ein: Genauso, wie manche Benutzer keine Inline-Graphiken anzeigen können, haben andere keine Unterstützung für die Darstellung externer Graphiken konfiguriert. 3.1.9.3 Inline-Graphiken in zeichenorientierten Web-Browsern
Inline-Graphiken lassen sich auf zeichenorientierten Terminals nicht dargestellen. Zeichenorientierte Web-Browser deuten in den Textfluß eingebettete Bilder durch folgenden Hinweis an: [IMAGE] Diese Einstellung können Sie jedoch verändern und mit der Option ALT dafür sorgen, daß Ihre Inline-Graphiken auch in http://www.oreilly.de/german/freebooks/Html_buch/www03.html (11 von 31) [11.04.2001 17:15:14]
HTML und das World Wide Web
zeichenorientierten Web-Browsern mehr Bedeutung erhalten: Bei Angabe der Option ALT zeigen zeichenorientierte Web-Browser die Beschreibung des Bildes (image-description) anstelle von [IMAGE] an. Durch eine leere ALT-Option können Sie auch bewirken, daß der Browser ein Bild ignoriert: Erkennt ein zeichenorientierter Web-Browser eine leere ALT-Option, so ignoriert er das Image-Tag. Bei der Erstellung von HTML-Dokumenten gilt die Konvention, daß Sie Inline-Graphiken mit Rücksicht auf Benutzer eines zeichenorientierten Web-Browsers mindestens durch ein Wort oder einen Satz beschreiben sollten. 3.1.10 Einbettung Der NCSA-Web-Server ist in der Lage, Informationen aus Dateien und Umgebungsvariablen in eine HTML-Datei einzubetten, bevor diese an den Benutzer gesendet wird. Er kann außerdem das Datum der letzten Änderung, das aktuelle Datum, die Größe des Dokuments und andere nützliche Angaben einbetten. Diese Möglichkeiten werden zusammen als Einbettung durch den Server (server-side includes) bezeichnet. Wir sehen uns dazu ein kurzes Beispiel an. Wir verändern das Ende unserer HTML-Schablone wie folgt: Creation Date: <EM>