Verweise und Links

Ohne Verweise, auch Links genannt, ist HTML und das Internet relativ uninteressant. Ihre Funktion beschränkt sich auf die Navigation zwischen Dokumenten und Dateien. Aber dies ist ein sehr mächtiges Instrument. Nach dem Aktivieren/Anklicken eines Verweises wird der Nutzer auf eine andere Stelle im gleichen Dokument, auf eine andere HTML-Datei innerhalb des Projekts oder zu anderen Projekten im WWW verwiesen, d.h. die angelinkten Informationen werden sichtbar. Der User muß also keine komplizierten Befehle oder langen Dateinamen eingeben. Der technische Vorgang beschränkt sich praktisch auf einen Mausklick.

 

 

Link auf eine andere HTML-Datei

  Am häufigsten wird wohl ein Link auf eine andere HTML-Datei im eigenen Projekt verwendet werden. Der Befehl dazu lautet:

<A HREF=“zieldatei.htm“>Hinweistext</A> weiterer Text…

Zwischen dem anklickbaren Hinweistext, dem eigentlichen Link, und danach eventuell folgendem weiteren Text sollte ein Leerzeichen eingefügt werden. Am besten nach dem </A> und nicht davor.

Dabei wird der anklickbare Hinweistext normalerweise automatisch durch den Browser hervorgehoben dargestellt, z.B. unterstrichen und in der im LINK-Attribut voreingestellten Farbe.

Sie können die Farben im BODY-Tag festlegen. Auf meinen Seiten sieht die Farbenverteilung folgendermaßen aus:

Linktext noch nie aktivierter Link

Linktext schon einmal aktivierter Link

Linktext aktivierter Link, der gerade angeklickt wird

Realisiert wird das durch

<BODY BGCOLOR=“#000000″ TEXT=“#FFFFFF“ LINK=“#0033CC“ VLINK=“#999999″ ALINK=“#009900″>

In diesem Fall ergänzt durch die Farbangaben für den Hintergrund und den Text. Alle Anführungsstriche können übrigens auch weggelassen werden.

Haben Sie die Absicht, Ihre Seiten der Allgemeinheit im WWW zugänglich zu machen, so ist unbedingt die gleiche Schreibweise (Groß-/Kleinschreibung beachten!) für die „Zieldatei“ im Link und für den Dateinamen einzuhalten.

Falls Ihr HTML-Projekt immer mehr ausufert, kann es schon zu einem kleineren Problem werden, den Überblick zu behalten. Da ist es von Vorteil, wenn man Unterverzeichnisse z.B. nach Themenbereichen anlegt oder einen Ordner nur für Grafiken vorsieht. Dadurch ändert sich aber die Adressierung.

Hinweis Machen Sie sich vorher kundig, ob Ihr favorisierter Provider das Anlegen und Verwalten von Unterverzeichnissen gestattet. Ansonsten müssen die Links später mühsam umgeschrieben werden.

Bitte bedenken Sie, daß identische Dateien, die mehrfach in verschiedenen Verzeichnissen abgelegt und verlinkt werden, z.B. Navigationsgrafiken und Logos, beim neuen Aufruf auch neuen Traffic verursachen.

 

Angenommen Sie haben einen Unterordner „grafiken“ angelegt und Sie möchten jetzt den Zugriff von einer HTML-Datei realisieren, die ein Verzeichnis darüber liegt. Dann müssen Sie diesen Ordnernamen im Verweis mit angeben:

<A HREF=“grafiken/zieldatei.gif“>Hinweistext</A>

Genauso wäre auch ein Zugriff auf eine HTML-Datei realisierbar:

<A HREF=“ordner/zieldatei.htm“>Hinweistext</A>

Bitte beachten Sie bei der Pfadangabe den einfachen Schrägstrich / (Slash). Der normalerweise bei Verzeichnispfaden verwendete Backslash führt hier nicht zum Ziel.

Und wie sieht das nun andersrum aus, wenn Sie aus dem Unterordner einen Link auf eine Datei in dem darüberliegenden Ordner setzen möchten? Dann müssen Sie einen relativen Pfad in folgender Form angeben:

<A HREF=“../zieldatei.htm“>Hinweistext</A>

Natürlich könnten Sie auch den kompletten Pfad mit Laufwerk und Ordnername in der Form

<A HREF=“C:/ordner/zieldatei.htm“>Hinweistext</A>

angeben. Das würde dann aber lediglich auf Ihrem PC funktionieren und nicht auf dem Server.

Ein Verweis auf eine Datei, die sogar zwei Ebenen höher abgelegt ist, wird folgendermaßen realisiert:

<A HREF=“../../zieldatei.htm“>Hinweistext</A>

Und wie funktioniert das von einer Datei in einem Unterverzeichnis zu einer Datei in einem anderen Unterverzeichnis? Dazu müssen Sie zunächst auf das übergeordnete Verzeichnis weisen, dort das andere Unterverzeichnis benennen und dann die entsprechende Datei aufrufen:

<A HREF=“../ordner/zieldatei.htm“>Hinweistext</A>

Hinweis Etwas anders sind Verweise innerhalb eines Framesets zu handhaben. Siehe hierzu das entsprechende Kapitel über die Frames-Programmierung.

 

 

Verweise innerhalb eines Dokuments

  Insbesondere bei größeren Dokumenten sind Verweise innerhalb der gleichen HTML-Datei ganz nützlich. Dabei wird von einer Absprungmarke (häufig ein Inhaltsverzeichnis) zu einer Zieladresse innerhalb des gleichen Dokuments verwiesen. Die Anweisung für die Absprungmarke lautet:

<A HREF=“#zielpunkt“>Absprungtext</A>

Bitte beachten Sie bei der Eingabe das #-Zeichen. Klickt der Nutzer auf den hervorgehobenen Absprungtext (kann auch eine Grafik sein), wird er auf den Zielpunkt innerhalb des Dokuments gelinkt. Dieser wiederum kann auch mitten im Text stehen und einen Teil des sichtbaren Textes als Zielpunkt umfassen

…Text<A NAME=“zielpunkt“>Ziel des Verweises im Text</A>…Text

oder überhaupt keinen Text umklammern wie durch

<A NAME=“zielpunkt“></A>…folgender Text

Es ist jedoch darauf zu achten, daß der NAME nicht zu lang ist und keine Sonderzeichen enthält. Und natürlich müssen die „zielpunkt“-Angaben identisch sein. Wenn verschiedene Ziele angesprungen werden sollen, müssen natürlich auch verschiedene Absprung- und Zielpunkte mit verschiedenen Namen definiert werden.

Achten Sie bei der Namensvergabe unbedingt auf eine identische Groß- und Kleinschreibung, andernfalls funktionieren die Links mit Netscape und Opera nicht!

 

 

Verweis zu einem Punkt eines anderen Dokuments

  Soll auf einen Zielpunkt innerhalb eines anderen HTML-Dokuments gelinkt werden, muß lediglich vor dem #-Zeichen in der Absprungmarke die entsprechende HTM-Datei notiert werden:

<A HREF=“zieldatei.htm#zielpunkt“>Absprungtext</A>

Die „zielpunkt“-Angaben sind wie schon besprochen zu handhaben.

 

Grafik als Verweise

  Der Hinweistext kann natürlich auch durch eine Grafik ersetzt werden. In diesem Fall ist ein entsprechender Alternativtext aber unabdingbar, damit der Nutzer nicht alleine von einer Grafikdarstellung des Browsers abhängig ist, die ja auch abgeschaltet werden kann. Der Befehl dazu lautet:

<A HREF=“zieldatei.htm“><IMG SRC=“bild.gif“ BORDER=1 ALT=“Grafik“></A>

Dabei können für die Grafikdarstellung durchaus weitere „grafikübliche“ Attribute hinzugefügt werden. Das Attribut BORDER hat bei Verweisgrafiken die Funktion, den Rahmen einer Grafik in der voreingestellten Verweisfarbe darzustellen. Die Rahmengröße richtet sich wie gewohnt nach der Pixelangabe. Leider geht es nach meiner Feststellung bei der Rahmendarstellung und verschiedenen Browsern drunter und drüber. Wenn Sie darüber die volle Kontrolle wünschen, was wohl anzunehmen ist, dann sollten Sie auf jeden Fall das BORDER-Attribut mit angeben. Wollen Sie auf einen Rahmen unbedingt verzichten, setzen Sie die Pixelangabe eben auf Null. Übrigens: Die Rahmenfarbe ändert sich normalerweise nach dem Aktivieren eines Verweises entsprechend den in VLINK und ALINK festgelegten Werten.

Interessant in diesem Zusammenhang ist die Möglichkeit, dem Nutzer eine stark verkleinerte Version eines Bildes als Verweis anzubieten. So kann dieser selbst entscheiden, ob sich das Laden des großen Bildes lohnt, was sich dann durch das Anklicken des Links in die Wege leiten läßt:

<A HREF=“grossbild.gif“><IMG SRC=“minibild.gif“ BORDER=1 ALT=“Mini-Bild“></A>