Hyperlinks, Navigation, Pfade

Transkript

1 Tutorium Hyperlinks, Navigation, Pfade 30. Juni 2004 Martin Stricker

2 Hyperlinks Hyperlinks sind Verknüpfungen zu Adressen (URL's) im Internet Links (Menüpunkte), mit denen die Seiten einer Website intern verknüpft werden, gehören zur Navigation der Website Ein Link kann auch zu Nicht-HTML-Dokumenten erfolgen, z.b..pdf (PDF-Dokument),.jpg (Bild),.mp3 (Audio-Datei) zu anderen Internet-Protokollen führen, z.b. ins FTP-Protokoll (ftp://) oder Link (mailto:)

3 a-tag Ein Link wird mittels des a-tags erzeugt: <a href=" Berlin</a> Als Wert des Attributs href= (href - Hypertext Reference, Hypertext Verweis) wird das Ziel des Links angegeben Das Linkziel muss immer eine gültigen Adresse im Internet (URL - Uniform Resource Locator) ergeben Möglich sind "absolute Pfade", bei denen ein vollständiger URL angegeben wird "relative Pfade", bei denen der Ort des Verweisdokuments im Verhältnis zum Ausgangsdokument angegeben wird Diesselben Regeln gelten beim Referenzieren (Verweisen) von Bildern, Stylesheet-Dateien und anderen Dateiobjekten

4 Absolute Pfade - Verweise zu externen Dateien Absolute Pfade werden immer dann verwendet, wenn die Zieladresse (die Zieldatei) sich außerhalb des eigenen Servers bzw. des eigenen Web-Verzeichnis befindet Ein absoluter Pfad besteht aus einem vollständigen URL, inklusive der Protokollangabe protokoll:, Beispiele: href=" href=" href="ftp://ftp.hu-berlin.de/" href="mailto:info@hu-berlin.de" Eine Protokollangabe file:/// ist immer falsch, da sie auf einen Ort auf einem lokalen Dateisystem verweist!

5 Relative Pfade - Verweise zu Dateien auf dem eigenen Server Relative Pfade werden dann verwendet, wenn die Zieladresse (die Zieldatei) sich innerhalb des Web-Verzeichnis auf dem eigenen Servers befindet Ein relativer Pfad gibt den Weg zum Zieldokument ausgehend vom Ausgangsdokument an. Beispiele: href="index.html" href="ordner/andere.html" href="../index.html" Relative Pfade führen zu vollständigen URL's, da ein Web-Client (Web-Browser) das Verweisziel aus Ausgangsadresse und Zielangabe zusammenstellt Mit Mozilla Composer werden relative Pfade durch Benutzen der "Choose..."-Taste und aktivieren des Häkchens bei "URL is relative to page location" eingestellt

6 Vorteil relativer Pfade Solange die Websitedokumente ihre Lage zueinander nicht verändern, funktionieren interne Links mit relativen Pfaden unabhängig vom gegenwärtigen Speicherort der Website (auf dem lokalen Computer, auf dem Server usw.): Auf dem lokalen Computer kann die Navigation und die Ansicht von Bildern getestet werden Eine Website kann komplett ihren Ort ändern (z.b. beim Upload auf den Server), ohne dass die relativen Pfade neu eingestellt werden müssen

7 Relative Pfade - beide Datein im selben Ordner Link in index.html zu stadt.html: <a href="stadt.html">stadt</a> Bei Verweis innerhalb desselben Ordners genügt die Angabe des Dateinamen

8 Relative Pfade - Zieldatei in einem Unterordner Link in index.html zu andere.html: <a href="ordner/andere.html">...</a> Ist die Zieldatei in einem Unterordner, so wird der Ordner in den Pfad mit aufgenommen Der Weg über mehrere Unterordner: href="ordner/ordner2/datei.html"

9 Relative Pfade - Zieldatei in einem übergeordneten Ordner Link in andere.html zu index.html: <a href="../index.html">...</a> Ist die Zieldatei in der Ordnerhierarchie eine Stufe höher, so wird dies mit../ angezeigt Mehrere Ordnerschritte nach oben: "../../datei.html"

10 Wichtig Bevor interne Links (und Bilder) eingefügt werden, sollten die Ausgangs- und Zieldokument im Projektordner erstellt, gespeichert und endgültig benannt worden sein Nach Setzen einer Verknüpfung mit einem relativen Pfad führt das Entfernen oder Verschieben von Ausgangs- oder Zieldateien zu Fehlern Außerhalb des Website-Stammordners (des Ordners mit der Startseite) dürfen keine Ziel- (und Ausgangs-) dokumente liegen Vor dem Publizieren (Upload) alle Verknüpfungen mit relativen Pfaden überprüfen!

11 Links formatieren mit CSS Mit Pseudoformaten können die einzelnen "Zustände" eines Links unterschiedlich gestaltet werden, Beispiel: a {... } "normaler" Link a:visited {... } besuchter Link (Seite im Browsercache) a:hover {... } Link beim "Mouse-over" a:active {... } Link beim Anklicken Es müssen nicht alle Pseudoformate definiert werden, die Reihenfolge ist jedoch wichtig Beispiel: a {color:#003366;text-decoration:none} a:hover {color:#660066;text-decoration:underline} Beim Überfahren eines Links mit der Maus verändert dieser Farbe und erhält eine Unterstreichung. "visited" und "active" sind nicht definiert

12 "Tooltip"-Attribut title Mit dem HTML-Attribut title kann eine Extra-Information über das Ziel des Links (ein Tooltip) angegeben werden Beispiel: <a href=" title="startseite meiner Universität"> HU Berlin</a>

13 Verweise zu Adressen <a an Martin Stricker</a> Syntax: mailto: -adresse Problem: Ein solcher Verweis kann vom Web-Browser nicht ausgeführt werden, meist startet automatisch der Standard Client (wie z.b. Outlook Express oder Mozilla Mail) auf dem User-System und erstellt eine neue mit der angegebenen Adresse. Deshalb: Link als solchen deutlich kennzeichnen Adresse auch im Klartext angeben (für manuellen Versand, falls kein Mail-Client installiert und konfiguriert)

14 Seiteninterne Verweise Navigationslink innerhalb einer Seite: 1. Benannten Anker - named anchor - am Ziel erstellen, Beispiel: <a name="top"></a> 2. Am Ausgangspunkt Link dorthin setzen, Beispiel: <a href="#top">zum Seitenanfang</a> Es kann auch zu Ankern in anderen Dokumenten verknüpft werden: <a href="impressum.html#kontakt">kontaktadresse</a>

15 Links zu beliebigen Dateiformaten - "Downloadlinks" Beliebige Dateitypen können Ziel eines Hyperlinks sein, Beispiel: <a href="hyperlinks.pdf">hyperlinks als PDF</a> Von Dateityp, Web-Browser, System und Voreinstellungen des Web-Browsers hängt der Umgang mit nicht-html-dokumenten ab: Einige Dateitypen können die Browser direkt darstellen, z.b. Grafiken mit Endungen wie.jpg,.gif.png Für andere werden Plug-ins (Programme, die innerhalb des Web-Browsers installiert werden) benötigt, z.b. für PDF-Dokumente.pdf Filme und Audio.rm,.mov,.mp3 Flash-Animationen.swf