Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann

Transkript

1 Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann

2 Inhaltsverzeichnis 6 Vorlesung Querverweise Verweis-sensitive Graphiken, Image Maps

3 Kapitel 6 Vorlesung Übungsblatt 05: 6.1 Querverweise Nun kommen wir zu den essentiellen Bestandteilen des World Wide Web: den Querverweisen, Hyperlinks oder auch kurz Links genannt. Beim Einbinden von Bildern haben wir schon gelernt, daß diese nicht unbedingt im gleichen Verzeichnis liegen müssen, ja nicht einmal auf dem gleichen Computer. Man kann irgendwelche Bilder aus dem World Wide Web auf seiner Seite einbinden. Genauso ist es möglich auf beliebige Dateien im World Wide Web zu verweisen. Verweisziele können sein: Eine Datei im gleichen Verzeichnis, in dem sich auch die aktuelle Datei befindet, eine Datei in einem anderen Verzeichnis, eine Datei auf einem beliebigen Web-Server, auf die mit dem Protokoll http zugegriffen wird, eine -adresse, eine Datei auf einem ftp-server, eine telnet-sitzung, eine news-group, ein Anker in der gleichen oder in einer anderen Datei. Die Syntax eines Querverweises ist: Dabei steht <a href="verweisziel">verweistext</a> 2

4 a: anchor href: hyper reference Mögliche Verweisziele sind: Besser (weniger Kommunikation, d.h. Datenübertragung) ist allerdings: ftp://did.mat.uni-bayreuth.de/pub/arachno/archph.zip telnet://did.mat.uni-bayreuth.de telnet://locis.loc.gov (Library of Congress) news:alt.vampyres Bei einem Querverweis der Art mailto: wird nicht automatisch eine verschickt, sondern das -fenster des Browsers wird geöffnet. Dies funktioniert allerdings nur bei einer vorkonfiguerierten Browser/ -Kombinationen: Zum Beispiel öffnet der Internet Explorer standardmäßig Microsoft Outlook, während Netscape Navigator das -programm von Netscape öffnet. Dies kann zwar eingestellt werden, funktioniert aber nicht beim herkömmlichen Studenten-Benutzerzugang der Universität. Diese -verweise können noch verfeinert werden: Zum Beispiel oder auch Loesung%0Alautet subject= gibt die Überschrift der an, mit body= kann der Text schon vorgeschrieben werden. Neue Zeilen kann man mit der Zeichenfolge %0A einfügen. Ebenso gibt es cc= und bcc=. In einem HTML-Text kann auch ein Anker gesetzt werden, so daß mit einem Querverweis zu diesem Anker gesprungen werden kann. Der Anker wird mit dem Attribut name gesetzt: <a name="einsprungpunkt">hier steht irgendwelcher HTML-Text</a> Mit dem Befehl 3

5 <a href="#einsprungpunkt">springe zum Einsprungtext</a> kann in derselben Seite zu diesem Punkt gesprungen werden. Will man von einer anderen Datei zu diesem Punkt gelangen, so lautet der Befehl (falls es sich um die Datei xxx.html handelt) <a href="xxx.html#einsprungpunkt">springe zum Einsprungtext</a> Wichtige Kleinigkeiten: Verzeichnisse werden durch / und nicht durch \ angegeben. Groß-/Kleinschreibung sollte unbedingt beachtet werden. Verweise in Unterverzeichnisse sollten besser relativ gesetzt werden: Zwei Punkte (..) bedeuten ein Verzeichnis nach oben. Verweise können auch aus Bildern bestehen: <a href="..."><img src="bild.gif"></a> Oft erstellt man eine Mini-Version eines Bildes (ein sog. Thumbnail). Klickt man auf diese Mini-Version, erscheint die normalgroße Version des Bildes. Will man den Rahmen um das Bild, der durch das <a...>-tag automatisch erzeugt wird, unterdrücken, so muß <a href="..."><img src="bild.gif" border=0></a> angegeben werden. Dies kann allerdings zu Verwirrung beim Betrachter führen, da nicht ersichtlich ist, daß es sich um einen Verweis handelt. Außerdem sollte beachtet werden: Die Gesamt-Struktur mit Unterverzeichnissen etc. sollte durchdacht und erweiterbar sein. Die Texte sollten durch ein ausgewogenes Maß an Verweisen strukturiert sein. Die Verweistexte sollten aussagekräftig sein. Sollen HTML-Seiten auf einem lokalen Rechnernetz zur Verfügung gestellt werden (insbesondere unter Windows) und muß dabei auf verschiedene Festplatten zugegriffen werden, kann es sein, daß relative Verweise (mit../) nicht mehr ausreichen. Als Abhilfe gibt es den Verweis: <a href="file://localhost/c:/xxx/index.html">meine Homepage</a> Alternativ dazu kann auch <a href="file:///c:/xxx/index.html">meine Homepage</a> verwendet werden. Dadurch kann natürlich auch auf Disketten, CD-ROMs etc. zugegriffen werden. Sollen diese Dateien dann jedoch auf einen Webserver kopiert werden, so sind diese Verweise nicht mehr gültig. 4

6 6.2 Verweis-sensitive Graphiken, Image Maps Nachdem wir das Einbinden von Bildern kennengelernt haben und wissen, wie Querverweise in eine Datei gesetzt werden, kombinieren wir diese beiden Dinge. Wir wollen lernen, wie Teile eines Bildes anklickbar gemacht werden können, bzw. wie Klicken auf unterschiedliche Regionen eines Bildes zu unterschiedlichen Seiten führt. Damit können Bilder als Navigationsleisten verwendet werden. Diese Bilder heißen verweissensitive Graphiken oder auch Image Maps. Um dies zu realisieren, muß natürlich irgendwo eine Karte mitgeliefert werden, in der verzeichnet ist, welche Koordinaten welchen Querverweisen zugeordnet sind. In der Anfangszeit des WWW war es üblich, diese Karte in einer eigenen Datei abzuspeichern. Das hat zur Folge, daß der Browser, wenn er eine verweissensitive Graphik geliefert bekommt, vom Server zusätzlich diese Datei mit der Karte anfordern muß. Deshalb nennt man diese Art der Kartenübertragung auch server-sided Image Maps. Diese Art von Image Maps ist allerdings heutzutage aus der Mode gekommen. Mittlerweile wird die Karte üblicherweise in der HTML-Datei selbst mitübertragen. Wie man sich vielleicht bereits denken kann, muß die Karte allerdings nicht unbedingt in der gleichen HTML-Datei enthalten sein. Es kann ein beliebiger URL sein. Allerdings kann dadurch die Übertragungszeit unangenehm verlängert werden. Zuerst muß im Image-Tag angegeben werden, daß eine Karte und welche Karte verwendet werden soll: <img src="bild.gif" usemap="#karte"> Dann muß die Karte irgendwo im Body der HTML-Datei definiert sein: Das heißt irgendwo zwischen <body> und </body> muß folgendes stehen: <map name="karte">... </map> Die 3 Punkte stehen nun für die Befehle, die Regionen definieren. Diese Regionen wird man normalerweise mit einem eigenen Programm per Mouse bestimmen. Es gibt 3 Typen von Regionen, die man definieren kann: Rechteck: <area shape=rect coords="0,0,300,300" href="..."> Kreis: <area shape=circle coords="x,y,r" href="..."> Polygon: <area shape=polygon coords="x1,y1,x2,y2,...,xn,yn" href="..."> Also, wir können Rechtecke, Kreise und geschlossene Geradenzüge definieren. Die Problematik besteht darin, die richtigen Koordinaten bei coords= anzugeben. Hier eine Übersicht: shape=rect: Wir benötigen 4 Zahlen: x1, y1, x2, y2. Für die linke obere Ecke des Rechtecks muß angegeben werden: Pixel von links ergibt x1 Pixel von oben ergibt y1 Für die rechte untere Ecke des Rechtecks muß angegeben werden: 5

7 Pixel von links ergibt x2 Pixel von oben ergibt y2 Dabei ist der Punkt (0, 0) immer die linke obere Ecke des gesamten Bildes. shape=circle: Wir benötigen 3 Zahlen: x, y, r, die Koordinaten des Mittelpunktes (auch wieder von der linken oberen Ecke des Bildes aus betrachtet) und den Radius des Kreises. shape=polygon: Wir benötigen für jeden Punkt unseres Geradenzuges zwei Zahlen, die x- und die y-koordinate, auch wieder von der linken oberen Ecke des Bildes aus gesehen. Von der letzten Ecke des Geradenzuges zieht der Browser automatisch eine Linie zum ersten Punkt, d.h. der Geradenzug wird immer geschlossen. Zu beachten ist, daß die Angaben der Koordinaten immer absolut sind, das heißt eine Vergrößerung oder Verkleinerung des Bildes mit width= oder height= ist nicht sinnvoll, da sich die mitgelieferten Koordinaten in der Karte nicht mit anpassen. 6

8 Literaturverzeichnis [1] Born, Günter: Referenzhandbuch Dateiformate, Addison-Wesley (1996). [2] Bruns, B., Gajewski, P.: Multimediales Lernen im Netz, Springer-Verlag (1999). [3] Bush, Vannevar: As we may think, in The Atlantic Monthly, July 1945, siehe [4] Haaß, Wolf-Dieter: Handbuch der Kommunikationsnetze, Springer-Verlag (1997). [5] Hauben, Michael: History of ARPANET, siehe [6] Klau, Peter: Das Internet, Thomson Publishing (1995). [7] Krol, Ed: Die Welt des Internet, O Reilly-Verlag (1995). [8] Levine, John, Young, Margaret: More Internet für Dummies, Thomson Publishing (1996). [9] Stefan Münz: SELFHTML, erhältlich bei [10] Rost, Martin, Schack, Michael (Hrsg.): Der Internet Praktiker (1995), Heise-Verlag. [11] Schulmeister, Rolf: Grundlagen hypermedialer Lernsysteme, Addison- Wesley (1996). 7