# Geknüpftes Netz

Eine Gunst hört auf, eine Gunst zu sein, wenn Bedingungen an sie geknüpft sind.
Thornton Wilder, US-amerikanischer Schriftsteller und Dramatiker

Neben der Menge an Informationen, die man bekommen kann – obgleich es eher als chaotische Informationsschwemme zu bezeichnen ist –, ist die Verknüpfung von Informationen das eigentlich Besondere am Internet. Von einer Seite im World Wide Web aus ist es möglich, eine weitere aufzurufen, die über thematisch ähnlichen Inhalt verfügt oder auch ganz anderen Inhalt bietet. Eine Verknüpfung zu einer anderen Seite nennt man Hyperlink. Sie werden in diesem Kapitel die verschiedenen Arten dieser Hyperlinks kennen lernen.

# Aufbau einer Verknüpfung

Um in einem HTML-Dokument eine Verknüpfung zu einem anderen Dokument anzulegen, wird das a-Element verwendet. a steht in diesem Fall als Abkürzung für das englische Wort »anchor«, das ins Deutsche übersetzt »Anker« heißt. Wie Sie feststellen können, gibt es für Verknüpfungen die unterschiedlichsten Bezeichnungen; sowohl »Hyperlink« und die Kurzform »Link« als auch »Anker« oder »Verknüpfung« sind gebräuchlich.

Um nun einen Link auf ein anderes HTML-Dokument zu setzen, müssen Sie wissen, wo genau bzw. unter welcher Adresse das Dokument zu finden ist. Diesen Pfad übergeben Sie dem a-Element im Attribut href (engl. hyper reference, dt. Hyperreferenz). Den Titel für den Link notieren Sie im Gültigkeitsbereich des a-Elements. Dieser Titel ist dann für den Benutzer sicht- und anklickbar. Ein Link, der auf das HTML-Dokument link.html verweisen und als Titel »Test« zugewiesen bekommen soll, würde folgendermaßen notiert werden:

<a href="link.html">Test</a>

Das eben gezeigte Beispiel weist eine kleine Schwäche auf: Der Link würde nur funktionieren, wenn sich die Datei link.html im gleichen Verzeichnis wie das Ausgangsdokument befinden würde. Läge es in einem Unterverzeichnis oder gar auf einem anderen Server, würde der Link nicht funktionieren. Umgangssprachlich wäre das ein »broken link« (gebrochene Verknüpfung).

Von lokalen Links wird gesprochen, wenn auf ein Dokument (bzw. eine Datei) verwiesen wird, das auf dem gleichen Server wie das Ausgangsdokument liegt. Es gibt aber auch hier verschiedene Fälle, beispielsweise kann das Zieldokument im gleichen Verzeichnis liegen, in einem untergeordneten Verzeichnis, in einem übergeordneten Verzeichnis oder in einem ganz anderen Verzeichniszweig.

# Gleiches Verzeichnis

Liegt das Zieldokument im gleichen Verzeichnis, müssen Sie lediglich den Dateinamen des Dokuments (inklusive Dateierweiterung) im Attribut href notieren. Achten Sie aber auf Groß- und Kleinschreibung. Dies macht zwar in einer Windows-Umgebung keinen Unterschied, wohl aber in einer UNIX/Linux-Umgebung, und letztere ist die am häufigsten anzutreffende bei Webservern.

Würde das Zieldokument in einem untergeordneten Verzeichnis liegen, müssten Sie zusätzlich den Verzeichnisnamen zum Dateinamen des Zieldokuments hinzufügen. Gehen Sie einmal von folgendem Beispiel aus:

Das Quelldokument quelle.html mit der Verknüpfung liegt im Verzeichnis html. Das Zieldokument ziel.html liegt in einem Unterverzeichnis des html-Verzeichnisses namens unterver. Die Notation würde dann wie folgt aussehen:

<a href="unterver/ziel.html">Zieldokument</a>

Beachten Sie bitte immer, dass Sie anstelle eines rückwärts geneigten Schrägstrichs (engl. backslash) »\« den normalen Schrägstrich (engl. slash) »/« verwenden. Dies hängt ebenfalls mit der Betriebssystem-Umgebung des Webservers zusammen. UNIX/Linux kennen den Backslash nicht als Trennzeichen für Verzeichnisse, da er Windows-typisch ist. Windows kommt aber auch mit dem normalen Schrägstrich als Verzeichnistrennzeichen klar.

Würde das Zieldokument in einem weiteren Unterverzeichnis des unterver-Verzeichnisses liegen, müssten Sie jedes weitere Unterverzeichnis ebenfalls mit in das Attribut href übernehmen.

<a href="unterver1/unterver2/ziel.html">Zieldokument</a>

# Übergeordnete Verzeichnisse

Gehen Sie vom vorherigen Beispiel aus. Sie möchten nun im Dokument ziel.html einen Link zum ursprünglichen Dokument quelle.html setzen. Die Angabe

<a href="html/quelle.html">Zur\&uuml;ck zum Quelldokument</a>

wäre jedoch falsch, da sie bedeuten würde, dass das Dokument quelle.html im Unterverzeichnis html des Verzeichnisses unterver liegen würde. Es liegt aber in einem übergeordneten Verzeichnis, daher müssen Sie Folgendes notieren:

<a href="../quelle.html">Zur\&uuml;ck zum Quelldokument</a>

Die Zeichenfolge »..« steht für das übergeordnete Verzeichnis, d. h., Sie gehen in der Verzeichnisstruktur eine Ebene höher und sind wieder im Verzeichnis html. Für jede weitere Ebene, die Sie nach oben wechseln möchten, müssen Sie erneut »..« notieren – natürlich immer getrennt durch einen Schrägstrich. Drei Ebenen höher würden so notiert werden: ../../../quelle.html.

# Anderer Verzeichniszweig

Um einen Link auf ein Dokument in einem anderen Verzeichniszweig setzen zu können, müssen Sie die Schreibweisen für über- und untergeordnete Verzeichnisse kombinieren. Sie geben zuerst an, wie viele Ebenen Sie nach oben wechseln wollen, und geben dann die Unterverzeichnisse an.

<a href="../../html/unterver/ziel.html">Zieldokument</a>

Würden Sie diesen Link im Dokument ziel.html notieren, würden Sie wieder im gleichen Verzeichnis landen, da Sie zwei Ebenen nach oben gewechselt haben und dann wieder zwei Ebenen tiefer in die Verzeichnisse html und unterver.

Lokale Links funktionieren natürlich nur auf dem gleichen Server. Möchten Sie ein Dokument referenzieren, das auf einem anderen Server liegt, müssen Sie diesen explizit angeben.

<a href="http://www.kress.de/index.asp">Kress.De-Startseite</a>

Dieser Link würde auf die Startseite der Webseite des Mediendienstes Kress.de führen. Alternativ hätte man auch nur http://www.kress.de/ im Attribut href notieren können. Der Webserver hätte in diesem Fall automatisch das Standard-Dokument in diesem Verzeichnis aufgerufen und an den Browser gesendet.

Genau wie bei lokalen Links können Sie auch bei globalen Links direkt in ein spezielles Unterverzeichnis wechseln, um ein bestimmtes Dokument zu referenzieren. An die Serveradresse werden dann einfach das Unterverzeichnis und der Dateiname angehängt.

<a href="http://www.galileo-press.de/foren/">Galileo-Press Foren</a>

Dieser Link würde das Standard-Dokument im Unterverzeichnis foren auf dem Galileo Press-Webserver aufrufen.

# E‑Mail & Co.

Prinzipiell können Sie durch Verknüpfungen auf jeden möglichen Server, jedes Verzeichnis und jeden Dateityp verlinken – egal ob auf Ihrem Server oder einem anderen, egal ob HTML-Dokument, Grafik, Textdatei usw. Aber auch Links zu anderen Diensten sind möglich, beispielsweise E‑Mail.

Wenn Sie auf Ihrer Webseite einen Link setzen möchten, der automatisch den E‑Mail-Client des Benutzers startet, um eine E‑Mail zu versenden, sobald er auf den Link klickt, müssen Sie im href-Attribut des a-Elements die Zeichenfolge mailto: und dann die entsprechende E‑Mail-Adresse angeben. Das Beispiel

<a href="mailto:websites@mark-lubkowitz.de">Email an mich senden</a>

würde also automatisch einen E‑Mail-Client starten, als Empfänger die angegebene E‑Mail-Adresse einsetzen, und der Benutzer könnte dann die Nachricht eintippen. Um außerdem automatisch einen Betreff in die E‑Mail einzufügen, müssen Sie nach der E‑Mail-Adresse ein Fragezeichen »?«, das Schlüsselwort subject (dt. Betreff) und nach dem Gleichheitszeichen »=« den Betreff notieren.

<a href="mailto:websites@mark-lubkowitz.de?subject=Buch">Email an mich</a>

Nach einem Klick auf diesen Link würde der E‑Mail-Client gestartet werden und im Feld Betreff automatisch »Buch« erscheinen. Ersetzen Sie Leerzeichen immer mit der Zeichenfolge %20, da es sonst zu Fehlern kommt.

Einige Browser bieten die Möglichkeit an, das automatische Starten des E‑Mail-Clients durch den Klick auf einen solchen Link zu unterbinden. Geben Sie aus diesem Grund die vollständige E‑Mail-Adresse im Gültigkeitsbereich des a-Elements mit an.

<a href="mailto:websites@mark-lubkowitz.de?subject=Buch">
  Email an mich [websites@mark-lubkowitz.de]
</a>

Neben dem Betreff-Feld können Sie auch noch die anderen Kopffelder mit vordefinierten Werten belegen.

Feldname Erklärung
cc Trägt im Feld Kopieempfänger einen oder mehrere weitere Empfänger ein.
bcc Trägt im Feld versteckte Kopieempfänger einen oder mehrere weitere Empfänger ein.
body Trägt im Nachrichtenfeld der E‑Mail automatisch einen Text ein.

Tabelle 5.1: Mögliche weitere Felder, die vorbelegt werden können

Die einzelnen Felder müssen Sie dann durch & miteinander verbinden.

<a href="mailto:websites@mark-lubkowitz.de?subject=Buch&body=Eine%20
Email%20durch%20einen%20Hyperlink%20mit%20vorbelegtem%20  
Nachrichtenfeld">Hier klicken</a>

Nach dem Klick auf diesen Link würde der E‑Mail-Client des Benutzers gestartet werden, im Feld Empfänger würde die E‑Mail-Adresse »websites@mark-lubkowitz.de« eingetragen werden, im Feld Betreff erschiene der Text »Buch« und im Nachrichtenfeld der Text »Eine E‑Mail durch einen Hyperlink mit vorbelegtem Nachrichtenfeld«.

# Andere Webdienste

Für einen Link zu einem FTP-Server müssen Sie die Adresse des Servers und das entsprechende Protokoll angeben, z. B. ftp://ftp.irgendwo.de/. Dies gilt auch für andere Dienste wie Telnet, Gopher und Ähnliche.

Neben einfachen Text-Links können Sie auch Links mit einer Grafik verwenden. Dies ist dann sinnvoll, wenn Sie grafische Buttons für eine Navigationsleiste erstellt haben. Anstelle des darzustellenden Textes wird dann eine Grafik im Gültigkeitsbereich des a-Elements notiert.

<a href="http://www.meineseite.de/">
<img src="button.gif"></a>

Der Browser würde nun die Grafik button.gif darstellen und bei einem Klick auf die Grafik zur Webseite www.meineseite.de wechseln. Um nun eine solche Grafik besser als Link erkennen zu können, ist es möglich, einen farbigen Rahmen um die Grafik zu legen. Dafür müssen Sie im img-Element lediglich das border-Attribut setzen und die Dicke des Rahmens in Pixel angeben. Die Farbe des Rahmens bestimmt sich durch die Farben, die auch für Text-Links gelten. Haben Sie im body-Start-Tag z. B. das Attribut link mit dem Parameter #FF0000 notiert, würde um die Grafik ein roter Rahmen dargestellt werden. Die Farbe ist ebenfalls davon abhängig, ob der Link schon einmal besucht worden ist oder gerade aktiv ist.

# Interne Verweise

Es kann durchaus vorkommen, dass HTML-Dokumente über so viel Inhalt verfügen, dass sie schnell über mehrere Bildschirmseiten hinauswachsen. Für den Benutzer wäre es nun aber sehr umständlich, immer wieder den Anzeigebereich des Browsers nach oben und unten zu scrollen, um vielleicht zu bereits gelesenen Textabschnitten zurückzukehren oder nur zu einem bestimmten Textabschnitt zu gelangen, der ihn auch wirklich interessiert. Für einen solchen Fall gibt es dokumentinterne Verweise. Solche Links dienen dazu, innerhalb eines Dokuments schnell hin und her navigieren zu können.

Im HTML-Dokument werden an entsprechenden Stellen Markierungen gesetzt, die für den Benutzer unsichtbar sind. Über einen Link könnte er nun schnell zu dieser Markierung gelangen. Für eine Markierung werden im a-Element nur das Attribut name und eine Bezeichnung angegeben.

<h1><a name="Kap1">Kapitel 1</a></h1>

Der Verweis auf eine Markierung würde dann wieder mit dem href-Attribut erfolgen. Als Parameter wird dabei die Bezeichnung der Markierung mit einem vorangestellten Raute/Doppelkreuz-Zeichen # angegeben.

<a href="#Kap1">Schnell zu Kapitel 1</a>

Dadurch ist es außerdem möglich, in einem anderen Dokument direkt an eine bestimmte Stelle zu springen. Dazu nennen Sie einfach das HTML-Dokument und notieren dahinter das Doppelkreuz-Zeichen mit der Bezeichnung der Markierung.

<a href="kapitel.htm#Kap1">Zu Kapitel 1</a>

Sie sollten diese Möglichkeit bei sehr langen Dokumenten auf jeden Fall nutzen. Gerade bei sortierten Listen, die als Inhaltsverzeichnis verwendet werden, steigern Sie die Benutzerfreundlichkeit eines solchen Dokuments. Oder fänden Sie etwa ein Buch, das zwar ein Inhaltsverzeichnis, aber keine Seitenzahlen enthält, wirklich leserfreundlich?

# Neue Fenster

Oft kommt es vor, dass man zu einem bestimmten Inhalt noch eine kleine Information anbieten möchte, die der Benutzer durch einen Klick anzeigen lassen kann. Ist diese Information in einem zusätzlichen HTML-Dokument hinterlegt, würde dieses automatisch im Browser geöffnet werden, und der Benutzer müsste nun wieder zum vorherigen Dokument zurücknavigieren. Um dieses Verhalten zu unterbinden, können Sie im Link mit dem Attribut target (dt. Ziel) ein Zielfenster festlegen.

<a href="http://www.google.de/" target="_blank">
  Google.De in einem neuen Fenster &ouml;ffnen
</a>

Der Parameter _blank weist den Browser an, das Verweisziel in einem neuen Browserfenster zu öffnen. Im Gegensatz dazu würde der Parameter _self bewirken, dass das Verweisziel im aktuellen Browserfenster geöffnet wird.

Die zusätzlichen Parameter _parent und _top werden erst in Kapitel 13, Rahmenprogramm, wirklich interessant. Dort werden sie dann auch detaillierter behandelt.

# Imagemaps

Imagemaps sind grafische Links, bei denen lediglich ein bestimmter Bereich der Grafik als Link fungiert. Dabei werden zuerst mit dem map-Element die einzelnen Bereiche definiert, und anschließend wird mit Hilfe des img-Elements die zugrunde liegende Grafik eingebunden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Imagemaps //-->
<html>
  <head>
    <title>Listing 5.1</title>
  </head>
  <body bgcolor="#FFFFFF">
    <map name="button">
      <area shape="circle" coords="50,50,45" href="http://www.galileo-press.de/" alt="Hier gehts zu Galileo Press">
    </map>
    <img src="round_button.gif" width="100" height="100" border="0" usemap="#button">
  </body>
</html>

Listing 5.1: Beispiel für eine Imagemap

In Listing 5.1 wurde der Imagemap im map-Start-Tag der Name button zugewiesen. Dieser wird später benötigt, um die Map verwenden zu können. Im Gültigkeitsbereich des map-Elements wurde der sensitive Bereich der Imagemap mit Hilfe des area-Elements (dt. Gebiet) definiert. In diesem Beispiel wurde dafür ein Kreis verwendet. Dies geschieht durch den Parameter circle im shape-Attribut. Im Attribut coords wurden dann die Koordinaten des Kreises, die in Pixeln angegeben werden, notiert: zuerst der Abstand vom linken Rand (50 Pixel), dann der Abstand vom oberen Rand (ebenfalls 50 Pixel) und anschließend der Radius des Kreises (45 Pixel). Das Verweisziel http://www.galileo-press.de/ wurde im Ihnen bekannten href-Attribut notiert. Das Attribut alt (engl. alternative, dt. Alternative) enthält einen Text, der angezeigt wird, wenn der Benutzer die Maus einen Moment über dem sensitiven Bereich hält. Die Definition der Map wird beendet, und nun wird die Grafik round_button.gif eingebunden, über die die Map gelegt werden soll. Dafür wurde zusätzlich das Attribut usemap notiert und als Parameter der Name der Map mit einem vorangestellten Doppelkreuz-Zeichen angegeben.

Darstellung des Listings 5.1 im Internet Explorer 6.0 Abbildung 5.1: Darstellung des Listings 5.1 im Internet Explorer 6.0

Neben Kreisen können Sie für sensitive Bereiche auch Rechtecke und Vielecke als Grundformen verwenden. Für shape werden dann folgende Parameter verwendet (der Vollständigkeit halber wird auch die Kreisform noch einmal aufgeführt):

Parameter Übersetzung Erklärung
circle Kreis Bewirkt als Grundform des sensitiven Bereichs einen Kreis. Im Attribut coords werden die Koordinaten des Kreises in der Form coords="x,y,r" angegeben, wobei x und y jeweils für den Abstand des Mittelpunkts zum Grafikrand stehen und r für den Radius steht.
rect Rechteck Bewirkt als Grundform des sensitiven Bereichs ein Rechteck. Der linke obere (x1 und y1) und der rechte untere (x2 und y2) Eckpunkt des Rechtecks werden im Attribut so notiert: coords="x1,y1,x2,y2".
poly Vieleck Vielecke bestehen aus einer unbestimmten Zahl von Eckpunkten. Daher können Sie auch in HTML beliebig viele Eckpunkte setzen. Dazu werden die Eckpunkte (x und y) hintereinander im coords-Attribut notiert. Die letzte Linie zwischen Start- und Endpunkt wird automatisch gezogen. Das folgende Beispiel würde ein Vieleck mit drei Eckpunkten erzeugen: coords="10,10,10,50,50,50".

Tabelle 5.2: Mögliche Parameter für das Attribut shape

Der Anwendungsbereich der einzelnen Formen ist sehr unterschiedlich; mal ist es sinnvoll, einen Kreis oder ein Rechteck zu verwenden, mal ist ein Vieleck sinnvoller. Dies liegt in Ihrem Ermessen, vor allem, da die Verwendung eines Vielecks häufig komplizierter ist. Das nachfolgende Beispiel soll Ihnen diese Problematik ein wenig verdeutlichen. Als Grafik wird eine Landkarte Europas verwendet, über die Sie die Sprache auswählen können, in der eine Webseite angezeigt wird. Die verwendeten Formen für die sensitiven Bereiche sind Vielecke.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Imagemaps //-->
<html>
  <head>
    <title>Listing 5.2</title>
  </head>
  <body bgcolor="#FFFFFF">
    <map name="europe">
      <area shape="poly" coords="227,253,256,254,270,331,206,330,219,305,204,300,216,262" href="deutsch.htm" alt="Deutsch">
      <area shape="poly" coords="140,313,186,284,215,310,205,323,205,330,213,334,212,351,187,360,159,349" href="francais.htm" alt="Franz&ouml;sisch">
      <area shape="poly" coords="155,206,182,268,175,284,137,293,113,275,113,248,142,206" href="english.htm" alt="Englisch">
      <area shape="poly" coords="120,344,185,363,154,402,121,398,129,361,111,355" href="espanol.htm" alt="Spanisch">
    </map>
    <img src="europe.jpg" width="600" height="450" border="0" usemap="#europe">
  </body>
</html>

Listing 5.2: Beispiel für eine Imagemap mit Polygonen

Wenn Sie sich das Listing 11.2 genauer ansehen, werden Sie feststellen, dass die Angabe der Koordinaten bei vielen Eckpunkten eines Polygons schnell unübersichtlich und schwer nachvollziehbar wird. Versuchen Sie also, wenn möglich, Kreis- und Rechteckformen zu verwenden.

Darstellung des Listings 5.2 im Internet Explorer 6.0 Abbildung 5.2: Darstellung des Listings 5.2 im Internet Explorer 6.0

# Zusammenfassung

  • Hyperlinks werden mit dem a-Element in einem HTML-Dokument notiert. Das wichtigste Attribut ist href, das die Zieladresse enthält.
  • Bei Angabe von Verzeichnissen muss anstelle des »\«-Schrägstrichs der »/«-Schrägstrich verwendet werden.
  • Mit der Zeichenfolge ../ kann man in ein übergeordnetes Verzeichnis wechseln.
  • Markierungen in einem Dokument werden durch die Schreibweise
  • <a name="Name">...</a> gesetzt und durch
  • <a href="#Name">...</a> angesprungen.

# Fragen und Übungen

  1. Erstellen Sie ein HTML-Dokument mit einem Link auf die Webseite http://www.galileo-press.de/. Das Verweisziel des Links soll in einem neuen Fenster geöffnet werden.
  2. Erstellen Sie ein HTML-Dokument mit einer Imagemap, die jeweils über eine Kreis‑, Rechteck- und Vieleckform verfügt.
  3. Was ist der Unterschied zwischen lokalen und globalen Links?
  4. Wie muss die Schreibweise eines Links lauten, damit der Benutzer darüber eine E‑Mail mit der Empfängeradresse »websites@mark-lubkowitz.de« und dem Betreff »Frage 25 aus dem Buch« erzeugen kann?