Hyperlinks: Querverweise im Text
Surfen statt lesen
„HTML“, in der Langform „Hypertext Markup Language“, hat im Kern etwas mit Hypertext zu tun. Hypertext wiederum ist die Bezeichnung für einen Text, der aus einer Verknüpfung vieler Texte besteht. Das können einzelne Passagen auf ein und derselben Seite sein, andere Dokumente innerhalb eines Webprojekts oder aber Seiten einer ganz anderen Homepage. Getreu einer alten Bibliotheksweisheit, wonach es keine Antworten gibt, sondern nur Querverweise, ist ein HTML-Dokument in einem Verbund von Querverweisen organisiert. Eine Webseite liest man daher auch nicht wie eine Buchseite, von oben nach unten und dann umblättern, man surft durch ein Webprojekt und hüpft dabei sozusagen von Dokument zu Dokument, bis man irgendwann einmal meint, man habe genug erfahren.
Informationen auf einen Klick
Wer einmal wissenschaftlich in einer Bibliothek gearbeitet und sich durch Findbücher, Verzeichnisse und endlosen Regalwände gehangelt hat, weiß die Organisation eines Themas per Hypertext zu schätzen. Nicht selten fühlt man sich jedoch in den Weiten des Internets verloren. Auf einer Welle der Begeisterung ist man durch die Informationsflut gesurft und weiß nun nicht mehr, wo man gelandet ist. Man findet vielleicht nicht mehr zum Ausgangspunkt zurück oder man hat interessante Zwischenstationen aus dem Auge verloren. Die Sicherheit eines Buches, bei dem man alles, was ein Autor sagen will, zwischen zwei Buchdeckeln findet, gibt es im Internet so nicht mehr.
Hyperlink
Wer also seine eigene Homepage programmiert, muss sich daher zwangsläufig mit der Verknüpfung seiner Seiten und Texte befassen. Dazu dient das Element „<a>“ (Anker), das durch das Attribut „href“ (Hyper Referenz) zu einem Verweis wird. Jetzt fehlt nur noch etwas im Text, das verlinkt wird, auf das man also später klicken kann. In der Regel sind das einzelne Wörter im Text, ein kurzer Satz oder aber ein Bild. Ganz gleich, was es ist, es wird innerhalb der Klammer zwischen <a> und </a> notiert. Ein Hyperlink zur Startseite dieses HTML-Tutorials würde entsprechend so aussehen:
<a href=“http://www.online-lotse.de/html/index.php“>zum HTML Tutorial</a>
URI, URL – Internetadressen
Im Beispiel erfolgt der Verweis mit einer vollständigen, sogenannten URI („Universal Resource Identifier“ oder auch URL „Uniform Resource Locators“ – beide Begriffe tauchen immer wieder auf, URI ist der häufiger benutzte; wo die feinen Unterschiede liegen, ist an sich unerheblich). Eine URI besteht zunächst aus dem benutzten Protokoll, in diesem Fall „http“. Webseiten werden gewöhnlich über dieses Protokoll angesteuert. Daneben gibt es noch „https“, was eine Internetverbindung über einen „sicheren“ Kanal angibt. Beim Online-Banking oder bei der Einwahl in datensensitive Bereiche wird dieses Protokoll gewöhnlich verwendet. Wenn man seine Homepage auf einen Webserver aufspielt, dann geschieht das in der Regel über das Protokoll „ftp“. Der Angabe des Protokolls folgen ein Doppelpunkt und in der Regel zwei Schrägstriche „//“. Weiter geht es mit dem Domainnamen, der häufig mit „www“ eingeleitet wird. Auf vielen Servern ist diese Angabe nicht zwingend notwendig, weil sie die Grundeinstellung für Subdomains ist. Zur besseren Verwaltung lassen sich Domains in „Subdomains“ wie zum Beispiel „shop.meine-domain.de“ unterteilen. Durch einen Punkt (engl. „dot“) getrennt von der Subdomain folgt der Domainname, der aus dem Namen „meine-domain“ und in diesem Fall „de“ (für „Deutschland“ – fast jedes Land hat seine eigene Kennung, daneben gibt es noch „org“, „net“ u.v.m.) besteht, die durch einen Punkt getrennt sind. Durch einen Schrägstrich vom Domainnamen getrennt, ist der Ort der Datei auf dem Webserver angegeben. In diesem Fall geht der Hyperlink zu einer Datei mit dem Namen „index.php“, die sich im Verzeichnis „html“ befindet. Verweist man auf eine Datei, die außerhalb des eigenen Servers liegt, muss man immer wie oben beschrieben referenzieren.
Ein Hyperlink auf eine Datei innerhalb der eigenen Homepage wird in der Regel mit einer „absoluten“ oder aber mit einer „relativen“ Pfadangabe gestaltet (natürlich funktioniert hier auch eine vollständige URI – das ist allerdings etwas sperriger). Absolute und relative Verlinkungen gestalten sich wie folgt:
<a href=“index.php“>zum HTML Tutorial </a>
<a href=“/html/index.php“>zum HTML Tutorial</a>
Relative Pfade
Im ersten Beispiel handelt sich um eine relative Pfadangabe, bei der relativ von Standort der aktuellen Datei referenziert wird. Hier wird auf eine Datei mit dem Namen „index.php“ verwiesen, die sich im selben Verzeichnis wie die aktuelle Datei befindet. Würde sich die Datei eine Verzeichnisebene höher befinden, müsste es „../index.php“ heißen. Läge die Zieldatei in derselben Verzeichnisebene, allerdings im Verzeichnis „tutorial“, wäre der Pfad „../tutorial/index.php“. Die relative Adressierung eignet sich, wenn die Homepage auch einmal auf einem anderen Datenträger, wie etwa einer CD-Rom, abgespeichert werden soll, denn relative Pfadangaben funktionieren auch außerhalb einer Webserver-Umgebung. Wer jedoch mit dynamischen Seiten arbeiten will (wie etwa mit PHP), und dabei vielleicht eine die Verlinkungen einer Navigationsleiste von allen Ebenen her funktionieren sollen, der wird absolute Referenzierungen, wie im zweiten Beispiel, verwenden.
Absolute Pfade
Absolute Pfadangaben werden mit einem Schrägstrich „/“ eingeleitet. Danach folgt der Ort der Datei vom Root-Verzeichnis, der obersten Verzeichnisebene der Homepage, aus gesehen. Diese Art der Referenzierung funktioniert von allen Verzeichnisebenen aus. In einem dynamischen Web besteht zum Beispiel die Möglichkeit, ein Seitenelement, das auf jeder Seite auftauchen soll, wie z.B. eine Navigation, in einer gesonderten Datei abzulegen und diese dann in jede andere Datei einzuschließen, ganz gleich, auf welcher Verzeichnisebene sie liegen. Die Verlinkungen in der eineschlossenen Datei müssen dann absolut erfolgen.
Textanker
Ein Anker kann auch auf einen definierten Textabschnitt auf einer langen Webseite zielen. Statt einer neuen Datei wird in diesem Fall ein Textanker, der sich auf derselben Seite findet und dem ein eindeutiger Name zugewiesen wurde, angesprungen. Die „href“ Anweisung im Hyperlink setzt sich dann aus einer Raute „#“ und dem Namen des Textankers zusammen:
<a href=“#textanker“>von hier aus wird gesprungen </a>
<a name=“textanker“>hier wird hingesprungen</a>
Hyperlink-Farben
Sollte das HTML Dokument keine näheren Angaben enthalten, stellt der Browser Links in den voreingestellten Farben dar. Angaben zur Farbe können per HTML-Code erfolgen oder aber über CSS, wobei die Cascading Style Sheets sehr viel mehr Möglichkeiten zur Gestaltung der Hyperlinks eröffnen. In HTML erscheinen Farbangaben als Attribute im „<body>“ Element – und zwar in Hexadezimal-Angaben. Möglich sind dabei Angaben zur Linkfarbe für noch nicht besuchte Seiten „link“, besuchte Seiten „vlink“ und gerade geklickte Verweise „alink“.
<body link=“#FF0000″ vlink=“#0000FF“ alink=“#FF00FF“></body>
Im Beispiel ist der aktive Link in rot, der besuchte Link in blau und der aktive Link in lila gefärbt. Diese Attribute sind jedoch als „deprecated“ eingestuft und verschwinden über kurz oder lang aus dem HTML Repertoire, weswegen man gleich mit CSS arbeiten sollte. Hat man nun endlich seinen Hyperlink gesetzt, muss man nur noch entscheiden, in welchem Zielfenster (engl. target) das angeklickte Dokumente erscheinen soll.