Und wie komme ich weg von der Seite? - Verweise

In diesem Kapitel geht es darum, wozu Verweise gut sind und wie man verschiedene Arten von Verweisen in Internetseiten einfügen kann.

Themen in diesem Kapitel:

Verwendung von Verweisen
Allgemeines zum Aufbau von Verweisen
Verweise innerhalb eines Dokumentes
Verweise zu anderen Dokumenten der eigenen Site
Verweise zu anderen Seiten im Internet
E-Mail-Verweise
Download-Verweise

1. Verwendung von Verweisen

Verweise sind das, was einen Text im Internet im wesentlichen vom Text in einem Buch unterscheidet. Mit Hilfe von Verweisen ist es möglich, Textabschnitte, Begriffe, Bilder, Informationen usw. miteinander so zu verknüpfen, wie es in einem Buch nicht möglich wäre. Für gute und sinnvolle Verweise gibt es jedoch einige Regeln:

Verweise sollten aussagekräftige Verweistexte haben, damit der Leser erkennen kann, wohin der Verweis führt.
Bsp.: Schlecht ist ein Text wie "Zurück" (Wohin zurück?!?)
Gut dagegen ist z.B. "Zurück zur Startseite"
In vielen Fällen können Bilder, die als "inline-pictures" direkt im Verweistext stehen, oder Bilder als Links (s. unten) dem Leser der Seite helfen, sich zurechtzufinden.
Informationen sollten in sinnvolle Wissenseinheiten zerlegt werden, auf die gut und eindeutig verwiesen werden kann.
Insbesondere auf längeren Seiten sollten regelmäßig Rückverweise stehen, damit der Leser nicht so viel scrollen muss.
Zu wenig Links sind für den Leser unbequem, zu viele Links verwirren.

2. Aufbau von Verweisen

Jeder Verweis besteht aus zwei Teilen:
1) dem eigentlichen Verweis, der meistens unterstrichen dargestellt wird und den man anklicken kann
2) dem sogenannten "Anker", d.h. dem Verweisziel, zu dem man kommt, wenn man den Verweis angeklickt hat.

Verweise haben immer dieselbe Struktur, egal ob sie auf eine Stelle im selben Dokument, auf eine andere Datei oder auf eine andere Webseite verweisen. Die Quelltextangabe sieht in allen Fällen so aus, es ändert sich nur das Verweisziel:

<A HREF="Verweisziel"> Verweistext (meist farbig und unterstrichen) </A>

Anstelle des Verweistextes kann auch ein Bild eingefügt werden, also z.B.:
<A HREF="Verweisziel"><IMG SRC="bild.gif"></A>. Der Leser gelangt dann durch Anklicken des Bildes zum Verweisziel.
Der Rahmen um das Bild kann durch Einfügen von BORDER="0" ins IMG-tag entfernt werden.

Der Anker, d.h. das Verweisziel, ist je nach Verweis unterschiedlich. Verweisziele können sein:

Eine Stelle innerhalb eines Dokumentes
ein anderes Dokument der eigenen Site
andere Internetseiten
E-Mail-Adressen
Dateien zum Downloaden

3. Verweise innerhalb eines Dokumentes

Der Anker:

Soll an bestimmte Stellen (z.B. Überschriften, Wörter oder auch Bilder) im Dokument verwiesen werden, so müssen diese Stellen erst als Anker gekennzeichnet werden. Der hierfür notwendige Quelltext lautet:
<A NAME="bezeichnung"> Text/Bild als Verweisziel </A>

Für die Benennung des Ankers (hier bezeichnung) ist zu beachten:
1) Die Bezeichnung muss dateiweit eindeutig sein (ist ja auch irgendwie unsinnig, mit einem Link zu zwei gleich bezeichneten Ankern springen zu wollen)
2) Die Bezeichnung darf keine Sonderzeichen (außer _ ), kein ä, ö, ü, ß und keine Leerzeichen enthalten

Der Verweis:

Der eigentliche Verweis folgt dem üblichen Schema, wobei als Verweisziel erst ein # und dann die Bezeichnung des Ankers eingefügt wird. Der Verweis zu dem Anker von oben sähe im Quelltext also folgendermaßen aus:
<A HREF="#bezeichnung"> Verweistext </A>

Achtung: Wichtig ist außer dem # auch die Beachtung von Groß- und Kleinschreibung.

Und hier gibt's ein Beispiel, wo man sich das Ganze mal genauer anschauen kann.

4. Verweise zu anderen Dokumenten der eigenen Site

Bei Verweisen zu anderen Dokumenten müssen wir uns, wie wir es schon von den Bildern her kennen (Wie kommt das Bild auf die Seite?), die Struktur der gesamten Site z.B. mit Hilfe eines Verzeichnisbaums klarmachen.
Beispiel:

Hier gibt es wieder verschiedene Möglichkeiten, welches Verhältnis die Datei, auf der der Link steht, von der aus also der Verweis ausgeht (im Folgenden "Verweisdatei") und die Datei, die das Ziel des Verweises darstellt (im Folgenden "Zieldatei") haben können:

4.1. Verweisdatei und Zieldatei stehen im selben Ordner:

Beispiel: Von der Datei "inhalt.html" im Ordner "HTML-Kurs" soll auf die Datei "kapitel1.html" im selben Ordner verwiesen werden.
Hier wird in das normale Schema als Verweisziel der vollständige Name der Verweisdatei eingesetzt:
<A HREF="kapitel1.html"> Kapitel 1 </A>

Dies wird bei den meisten privaten Homepages der Fall sein, weil dabei die Datenmengen normalerweise nicht so unüberschaubar werden, dass es sich lohnen würde, alles aufwendig zu strukturieren.

4.2. Der Zieldatei-Ordner ist dem Verweisdatei-Ordner untergeordnet:

Beispiel: Auf der Startseite "index.html", die sich direkt im "Homepage-Ordner" befindet, soll es einen Link zur Datei "inhalt.html" im Ordner "HTML-Kurs" geben. Der Ordner "HTML-Kurs" steht im "Homepage-Ordner", er ist diesem also untergeordnet.
Hier müssen im üblichen Verweisschema als Verweisziel der Pfad zur Zieldatei und deren Name angegeben werden:
<A HREF="HTML-Kurs/inhalt.html"> Zum HTML-Kurs </A>

4.3. Verweisdatei und Zieldatei stehen in verschiedenen, nicht untergeordneten Ordnern

Beispiel: Von der Datei "reiten.html" im Ordner "Hobbies" soll ein Verweis zur Datei "inhalt.html" im Ordner "HTML-Kurs" führen. Wir müssen also zwei Ebenen höher (eine Ebene höher in "Ueber mich" und von da aus noch eine höher in "Homepage-Ordner"), vom "Homepage-Ordner" müssen wir dann wieder eine Ebene hinunter in den Ordner "HTML-Kurs".
"Eine Ebene höher" wird ausgedrückt durch "../", für eine Ebene hinunter müssen wir wie beim vorigen Beispiel den Namen des untergeordneten Ordners angeben. Der gewünschte Link sähe also so aus:
<A HREF="../../HTML-Kurs/inhalt.html"> Zum HTML-Kurs </A>

Genaueres Zielen - Verweise zu Ankern in anderen Dokumenten

Enthält die Zieldatei einen oder mehrere Anker, so kann man auch von anderen Dateien aus direkt darauf verweisen. Hierfür wird die Bezeichnung des Ankers mitsamt dem Gatter # an den Dateinamen der Zieldatei angehängt:
Beispiel:
<A HREF="Zieldatei.html#anker"> Hier geht es zu einer bestimmten Stelle im Dokument "Zieldatei" </A>

So, das war jetzt vielleicht ein bisschen kompliziert, aber bei einer kleinen Homepage können durchaus alle Dokumente und Bilder in einem einzigen Ordner untergebracht werden, so dass man sich die Arbeit einer aufwendigen Strukturierung und damit aufwendigeren Verlinkung sparen kann. Wir haben das mit den Verweisen auch nur der Vollständigkeit halber so ausführlich behandelt.
Für alle, die noch nicht aufgegeben haben, gibt es hier noch ein paar Fragen zur Selbstüberprüfung:

1. Wie sieht der Verweis aus, der von "hobbies.html" auf "ski.html" verweist?
2. Wie sieht der Verweis aus, der von "inhalt.html" in "HTML-Kurs" zurück auf die Startseite "index.html" verweist?
3. Wie sieht der Verweis aus, der von "inhalt.html" zu "hobbies.html" führt?
Zu den Lösungen

5. Verweise zu anderen Seiten im Internet

Auch für Verweise zu anderen Internetseiten gilt wieder dasselbe Schema wie bei den anderen Verweisarten. Als Verweisziel wird hier einfach die Internetadresse angegeben, also z.B.:
<A HREF="http://www.fu-berlin.de/"> Zur FU Berlin </A>

Der Schrägstrich hinter der Adresse ist nicht unbedingt notwendig, sorgt aber dafür, dass die angegebene Seite etwas schneller geladen wird.
Auch hier kann man direkt zu einem Anker in einem Dokument verweisen, wenn man die Bezeichnung des Ankers kennt, also z.B.:
<A HREF="userpage.fu-berlin.de/~mirjamk/htmlkurs/links.html#innerhalb"> Verweise innerhalb eines Dokumentes </A>

6. E-Mail-Verweise

E-Mail-Verweise sind strenggenommen keine Verweise, da sie nicht zu einem bestimmten Ziel im Internet führen, sondern ein Mailprogramm aufrufen, in dem bereits als Empfängeradresse die im Verweis stehende E-Mail-Adresse eingetragen ist. Das Schema für einen solchen Verweis ist jedoch wieder dasselbe: Als Verweisziel wird die gewünschte E-Mail-Adresse eingetragen und dieser ein "mailto:" vorangestellt, das den Verweis als E-Mail-Verweis kennzeichnet.
Beispiel:
<A HREF="mailto:mirjamk@zedat.fu-berlin.de"> Mail mir! </A>

7. Download-Verweise

Auch Verweise, die Dateien zum Download anbieten, funktionieren nach dem üblichen Schema, das für alle Verweise gilt. Erkannt wird ein Download vom Browser nur dadurch, dass der Verweis nicht auf einen Anker, eine HTML-Datei oder eine E-Mail-Adresse führt, sondern dass als Verweisziel eine Datei in einem üblichen Downloadformat angegeben ist.
Das heute üblichste Format für Downloads ist das ZIP-Format (Dateiendung .zip). Hierbei handelt es sich um Archive, die durch eine Packprogramm wie z.B. WinZip komprimiert worden sind und die eine oder mehrere Dateien und Ordner enthalten können. Diese müssen vom Benutzer nach dem Download mit einem geeigneten Unzip-Programm (z.B. WinZip) entpackt werden.

Weitere Formate, die zum Download angeboten werden können, sind EXE-Dateien (für DOS/Windows-Benutzer) oder HQX-Archive (für Apple-Benutzer). Darüberhinaus kann im Prinzip auf Dateien in jedem beliebigen anderen Format verlinkt werden. Der Browser lädt die Datei dann normalerweise nicht automatisch hinunter, fragt aber nach, was mit der Datei geschehen soll und bietet dabei auch den Download an. Die Frage ist allerdings, was der Benutzer mit der Datei anfangen kann. So sollte man z.B., wenn man Textdateien im Word-Format (Endung .doc) anbietet, das Word 6.0-Format verwenden, da Benutzer mit Word 97 oder Word 2000 dieses Format ebenfalls lesen können, Benutzer mit Word 6.0 jedoch keine Dateien in neueren Formaten.
Bei Dateien, die zum Download angeboten werden, ist es außerdem höflich, die ungefähre Größe der Datei anzugeben, damit der Leser der Seite vorher abschätzen kann, wieviel Zeit (und Geld) ihn der Download kosten wird.

So, jetzt aber noch ein paar Worte dazu, wie solche Verweise aussehen können: Wie schon gesagt, wird dasselbe Schema wie für die anderen Verweise verwendet. Außerdem gelten dieselben Regeln wie für Verweise zu anderen Dokumenten der eigenen Site oder - wenn eine Datei von einer anderen Site zum Download angeboten werden soll - die Regeln für externe Verweise.
Beispiele:
<A HREF="htmlkurs.zip"> Download des HTML-Kurses </A> für den Download einer Datei im selben Ordner
<A HREF="http://www.teamone.de/download/selfhtml.zip"> Download von Stefan Münz "SELFHTML" </A> für einen Download von einer anderen Site

So, alle wesentlichen Dinge zum Erstellen der ersten Internetseite sollten jetzt klar sein. Was noch fehlt und in diesem Kurs noch behandelt werden soll, sind ein paar Dinge, die die zweite Seite, insbesondere was das Layout angeht, noch schöner machen sollen: Tabellen und Style Sheets. Natürlich gibt es noch einen Haufen anderer Dinge wie Frames, Formulare und Layers, Javascript, CGI-Programmierung, Dynamisches HTML usw., aber das alles würde den Rahmen unseres Kurses sprengen, der als Einführung in HTML gedacht ist.
Eine wichtige Sache fehlt aber noch, über die im folgenden Kapitel ein paar Worte gesagt werden sollen: Wie kommt meine Seite ins Internet - der Upload

Lösungen zu den Testfragen

1. <A HREF="Hobbies/ski.html"> Skifahren </A>
2. <A HREF="../index.html"> Zurück zur Startseite </A>
3. <A HREF="../Ueber mich/hobbies.html"> Meine Hobbies </A>

Zurück zu den Fragen