Interne Verweise = Links innerhalb eines Homepage-Projekts

Transkript

1 Allgemeines zu Verweisen Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der "intelligente Mehrwert" des World Wide Web. Mit Hilfe von Verweisen strukturieren Sie Ihr Projekt! Wichtig ist in allen Fällen ein aussagekräftiger Verweistext. Schlecht ist: zurück (wohin eigentlich?) Besser ist: zurück zur Einstiegsseite (ah ja!) Verweise lenken die Aufmerksamkeit des Anwenders sofort auf sich. Wenn Sie Verweise mitten im Text notieren, sollten Sie als Verweistext inhaltlich beschreibende Wörter anbieten, keine Wörter ohne Inhalt Schlecht ist: Für weitere Information klicken Sie hier (worum geht es "hier" eigentlich?) Gut ist: Weitere Information können Sie ebenfalls aufrufen (ah ja!) Alle Verweise in HTML haben einen einheitlichen Aufbau, egal ob sie zu einem Verweisziel in der gleichen Datei, zu einer anderen Datei im eigenen Projekt, zu einer beliebigen WWW-Adresse oder zu einer beliebigen Datei eines anderen Dateityps im Internet oder lokal auf dem eigenen Rechner führen. Externe Verweise = Links ins WWW Beispiele: <a href=" Schule am Königsweg</a> <a href=" Newsticker</a> Für Verweise in HTML gibt es das a-element (a = anchor = Anker). Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut <a href= erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das href-attribut weisen Sie das gewünschte Verweisziel zu. Als Inhalt des a-elements, also zwischen <a> und </a>, notieren Sie den Text, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen). Interne Verweise = Links innerhalb eines Homepage-Projekts Diese Form der relativen Adressierung ist innerhalb von Web-Projekten sehr zu empfehlen. Der Grund ist, dass Sie das Web-Projekt auf diese Weise problemlos an eine andere Adresse verschieben können, und trotzdem funktionieren noch alle projektinternen Verweise und Grafikreferenzen. Gerade wenn Sie Ihr Projekt auch mal auf CD-ROM oder anderen Medien veröffentlichen wollen, ist die relative Adressierung ein muss. Beispiele: farben.htm bilder/grafik.gif../../../../../woanders/datei.htm Eine Datei im gleichen Verzeichnis wie dem aktuellen können Sie einfach durch Angabe des Dateinamens referenzieren. Eine Angabe wie bilder/grafik.gif referenziert eine Datei namens grafik.gif im Verzeichnis bilder, das ein Unterverzeichnis des aktuellen Verzeichnisses ist. Mit../ referenzieren Sie das Verzeichnis über dem aktuellen Verzeichnis, egal wie es heißt. Mit../../ referenzieren Sie das Verzeichnis über dem Verzeichnis über dem aktuellen Verzeichnis usw. Die Welt der Links Seite 1 von 1

2 Aufgaben zum Teil externe Links: 1. Was ist hier falsch? <a Phase 5</a> <a href = > 2. Formulieren Sie einen Link zu den Kieler Nachrichten Aufgaben zum Teil interne Links: Ihr Projekt hat folgende Ordnerstruktur bilder persoenlich unterricht schule html wandertag privat 1. Im Hauptordner(=Hauptverzeichnis) liegt Ihre Startdatei für Ihre Homepage: index.html Was passiert bei a) <a href= test.html >Test</a> b) <a href= /privat/test.html >Test</a> c) <a href= /schule/html/test.html >Test</a> d) <a href= /wandertag/schule/test.html >Test</a> 2. In der Datei uebung.html, die sich im Unterordner html befindet, stehen folgende Tags. a) <a href= test.html >Test</a> b) <a href=../test.html >Test</a> c) <a href=../../test.html >Test</a> d) <a href=../../bilder/test.html >Test</a> 3. Ihre Datei befindet sich im Hauptverzeichnis. a) Sie wollen ein Bild aus dem Ordner bilder einbinden. b) Sie wollen ein Bild aus dem Ordner persoenlich einbinden. c) Sie wollen ein Bild aus dem Ordner unterricht einbinden. 4. Ihre Datei befindet sich im Ordner privat. a) Sie wollen ein Bild aus dem Ordner bilder einbinden. b) Sie wollen ein Bild aus dem Ordner persoenlich einbinden. c) Sie wollen ein Bild aus dem Ordner unterricht einbinden Die Welt der Links Seite 2 von 2

3 Verweise innerhalb einer Datei = Anker definieren und Verweise zu Ankern Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei. 1. Anker definieren: <a name="kap02">info(kann aber auch leer bleiben)</a> 2. Link zum Anker: <a href="#kap02">hase und Igel</a> (Anker ist in der gleichen Datei) <a href="index.html#kap02">katze</a> (Anker ist in der Datei index.html) d.h. erst wird die Datei index.html geöffnet und dann springt der Browser zu dem. definierten Anker, kap02. index.html Quelltest:... <a href="index.html#kap02">katze</a>... <a name="kap02"> Info </a>. Browser: xxxxx Katze dddddxx Ein Beispiel können Sie sich anschauen unter: siehe im Kapitel: wir blicken zurück Info xvcvxcvxcvx xvcxv xcvxcv xvcvxcv xcvx cvxcv Ein Anker wird genau wie ein Verweis mit Hilfe des a-elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href= notiert wird, sondern stattdessen ein Attribut name=. Ein kompletter Anker sieht also so aus: <a name="ankername">...</a> Den Ankernamen können Sie frei vergeben. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Was Sie zwischen <a name="ankername"> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name="ankername"></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen. Um innerhalb einer Datei einen Verweis zu einem in der Datei vorhandenen Anker zu notieren, gilt folgendes Schema: <a href="#ankername">verweistext</a>. Das Verweisziel beginnt also mit einem Gatterzeichen #, unmittelbar gefolgt vom Ankernamen. Wenn der Verweis zu einem Anker in einer anderen Datei führen soll, wird zuerst die Datei adressiert. Hinter dem Dateinamen folgt das Gatterzeichen # und dahinter der Ankername. <a href="../projektintern.htm#anker">anker definieren und Verweise zu Ankern</a> Die Welt der Links Seite 3 von 3

4 Zielfenster für Verweise bestimmen Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Bei einzelnen Verweisen können Sie jedenfalls unabhängig davon entscheiden, ob ein Verweisziel im aktuellen Browserfenster ausgegeben werden soll, oder ob ein neues Fenster dafür geöffnet werden soll. Bei Verweisen zu fremden Web-Angeboten kann es beispielsweise sinnvoll sein, das Verweisziel in einem neuen Fenster zu öffnen. So braucht der Anwender das eigene Web-Angebot nicht verlassen, sondern bekommt das andere Angebot einfach in einem neuen Fenster angezeigt. Die Seite Ihres Angebots mit dem Verweis bleibt in einem Fenster im Hintergrund erhalten. <html> <head> <title>text des Titels</title> </head> <body> <a href=" target="_blank">schule</a> </body> </html> Mit dem Attribut target= im einleitenden <a>-tag können Sie ein Zielfenster für den Verweis festlegen. Wenn Sie den Verweis in einem neuen Fenster öffnen wollen, weisen Sie bei target den Wert _blank zu (mit dem Unterstrich am Anfang!). Weitere mögliche Wertzuweisungen an target= sind: _self, um den Verweis im aktuellen Fenster zu öffnen, _parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen, _top, um bei verschachtelten Framesets alle Framesets zu sprengen, sowie ein beliebiger Fenstername, der in einem Frameset definiert ist. Beachten Sie: Anstelle von target="_blank" können Sie auch target="halligalli" oder sonst irgendeinen Unsinn notieren. Wenn es kein Fenster mit diesem Namen gibt, öffnen die Web-Browser das Verweisziel in einem neuen Browser-Fenster. Die Welt der Links Seite 4 von 4

5 Verweise optisch gestalten mit CSS Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.b. blau für Verweise zu noch nicht besuchten Seiten, und violett für Verweise zu bereits besuchten Seiten. Um dateiweit eigene Verweisfarben zu bestimmen, können Sie die Attribute verwenden, die im Abschnitt Farben für Text und Verweise beschrieben werden. Darüber hinaus gibt es aber die Möglichkeit, Verweise mit Hilfe von CSS individueller zu gestalten. Unter anderem ist es auch möglich, die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken. <html> <head> <style type="text/css">  </style> <title>text des Titels</title> </head> <body> </body> </html> Das Beispiel arbeitet mit CSS Stylesheets. Dazu ist im Dateikopf der HTML-Datei ein eigener zentraler Bereich zum Definieren von CSS-Formaten notiert (<style>...</style> Der vielfache Wunsch von Web-Designern, die Unterstreichung des Verweistextes zu unterdrücken, wird durch die CSS-Angabe text-decoration:none erzielt (text-decoration:underline würde übrigens die Voreinstellung, also unterstrichenen Verweistext bewirken). Weitere im Beispiel verwendete Formatdefinitionen sind fontweight:bold; (fette Schrift) sowie Angaben zur Farbe (color:) und zur Hintergrundfarbe (background-color:). Was im obigen Beispiel auffällt, ist, dass für insgesamt vier "Verweistypen" CSS-Formate definiert werden. Mit a:link sind Verweise zu noch nicht besuchten Seiten gemeint, mit a:visited Verweise zu bereits besuchten Seiten, mit a:hover Verweise, während der Anwender mit der Maus über den Verweistext fährt, und mit a:active Verweise, wenn sie angeklickt werden oder sind. Noch geschichter ist es, die CSS-Definitionen in einer eigenen Datei zu speichern. Dann werden alle Links Ihres Projektes wie gewünscht dargestellt und.. wenn Sie mal etwas verändern wollen, dann brauchen Sie dieses nur in einer Datei zu machen. Quelle: Die Welt der Links Seite 5 von 5