Weg weisen

Eine große Stärke des WWW ist das Navigieren mit Links. Links sind bestimmte Textstellen (oder auch Grafiken etc.), die auf Klick zu einer anderen Stelle im WWW führen. Es wird Euch vermutlich nicht überraschen, daß es auch für Links einen Tag gibt, nämlich den a-Tag ('anchor'). Darin faßt Ihr das ein, was als Link dienen soll

Besucht auch das <a href="http://www.comicforum.de">Comicforum</a>!

<a href="http://www.comicforum.de">
  <img src="pictures/comicforum_logo.gif" border="0">

</a>

Um ein Bild als Link zu verwenden, schreibt Ihr also einfach einen img-Tag in den a-Tag. Im obigen img-Tag ist Euch vermutlich das border-Attribut aufgefallen. Viele Browser unterstreichen nicht nur Text-Links, sondern machen auch einen Rahmen um Link-Grafiken. Diesen meist unschönen Rahmen werdet Ihr wieder los, indem Ihr eben explizit «keinen Rahmen», sprich 'border="0"', schreibt.

Wie das src-Attribut eines img-Tags kann auch das href-Attribut eines a-Tags eine relative oder eine absolute URL enthalten. Ihr könnt nicht nur andere HTML-Dateien (also URLs mit HTTP-Protokoll) als Ziel verwenden, sondern beispielsweise auch Adressen auf einem FTP-Server

<a href="ftp://ftp.server.test/old/">ältere Versionen</a>

Damit ein solcher Link funktioniert, muß der Browser über einen FTP-Client verfügen (oder wissen, wo auf dem Rechner er einen findet). Ähnliches gilt für eine Linkform, die oft als Kontaktmöglichkeit zum Autor der Seite benutzt wird

<a href="mailTo:webmaster@comics.test">Webmaster</a>

Durch diesen Link ruft der Browser einen (hoffentlich vorhandenen) Mailclient auf, in dem eine E-Mail an die angegebene Adresse verfaßt werden kann. Dabei könnt Ihr neben der gewünschten Mailadresse noch andere Angaben mitgeben

• subject gibt den Betreff der Mail an.
• body gibt den Text der Mail an
• cc gibt weitere Empfänger ('carbon copy') der Mail an
• bcc gibt unsichtbare weitere Empfänger ('blind carbon copy') der Mail an.

Diese Parameter hängt Ihr als Zuweisungen an die Mailadresse, nach einem ? und getrennt duch &

<a href="mailTo:admin@comics.test?subject=Webseite&cc=privat@addy.test">
  Webmaster</a>

In diesen Angaben für subject, body, u.s.w. müßt Ihr einige Zeichen maskieren, ähnlich wie Ihr es mit Entities in HTML tut. Leider folgt die Maskierung hier einem etwas anderen Prinzip: Eingeleitet wird sie mit einem %, auf das die (hexadezimale) Codenummer der Zeichens folgt. Anwenden müßt Ihr diese Maskierung bei bestimmten Sonderzeichen und allem, was nicht im ASCII-Zeichensatz liegt (also auch den deutschen Umlauten). Die wichtigsten Fälle sind

Aber auch wenn Ihr HTTP als Protokoll verwendet, muß Euer Link nicht unbedingt zu einer HTML-Datei führen. Prinzipiell künnt Ihr beliebige Dateien verlinken

<a href="covers.pdf">Übersicht</a>

Was der Browser dann mit diesen Nicht-HTML-Dateien macht, hängt von seinen Einstellungen ab. Normalerweise benutzt er entweder ein PlugIn zum Öffnen oder zeigt einen «Speichern unter»-Dialog für die Datei.

Ihr könnt auch definierte Punkte innerhalb Eurer HTML-Datei mit Links anspringen. Wird ein solcher Link angeklickt, scrollt der Browser zum definierten Punkt

<a href="#abcomics">Neuerscheinungen ABComics</a><br>

<a href="#efgraphics"></a><br>
<a href="#andere"></a><br>
...
<a name="abcomics"><h3>Neuerscheinungen bei ABComics</h3></a>

<ul>
...
</ul>

<a name="efgraphics"><h3>Neuerscheinungen bei EFGraphics</h3></a>
<ul>
...
</ul>

<a name="andere"><h3>Neuerscheinungen aus anderen Verlagen</h3></a>
<ul>
...
</ul>

Wie Ihr seht, braucht Ihr in solchen Fällen zwei a-Tags: Einer kennzeichnet die Stelle, an die gesprungen werden soll. Dieser Anker bekommt mit Hilfe des name-Attributs einen Namen. Diesen Namen schreibt Ihr beim anderen a-Tag (dem eigentlichen Link) in das href-Attribut. Damit der Browser weiß, daß es sich nicht um eine relative URL handelt, kommt noch ein # davor.

Diese beiden Linkformen könnt Ihr auch kombinieren und beispielsweise von einer anderen Seite aus einen der Anker aus dem gezeigten Beispiel direkt anspringen

<a href="novis.html#andere">Neuerscheinungen kleinerer Verlage</a>

<a href="neu.html" target="_blank">

  Dieser Link öffnet sich in einem neuen Fenster</a>

Vielleicht ist Euch schon mal eine Grafik begegnet, die als Link fungierte - aber verschiedene Bereiche der Grafik zu verschiedenen Zielen führten. So etwas nennt man Image Map. Als Image Map könnt Ihr eine beliebige Grafik verwenden; die verschiedenen Bereiche werden mit Hilfe des map-Tags definiert

<map name="meineMap">
  <area href="ziel1.html" shape="rect" coords="0, 0, 100, 100">
  <area href="ziel2.html" shape="rect" coords="0, 101, 100, 200">

</map>

Für jedes Ziel, das Ihr verlinken wollt, schreibt Ihr in den map-Tag einen area-Tag. Das href-Attribut des area-Tags gibt logischerweise das Ziel des Links an, das shape-Attribut die Form der zu verlinkenden Fläche, das coords-Attribut die Position und Grösse der Fläche. Dabei habt Ihr folgende Möglichkeiten für die Form

• rect oder rectangle definiert ein Rechteck. Im coords-Attribut gebt Ihr (in dieser Reihenfolge) x- und y-Koordinate der oberen linken Ecke, dann x- und y-Koordinate der unteren rechte Ecke an.
• circ oder circle definiert einen Kreis. Im coords-Attribut gebt Ihr (in dieser Reihenfolge) x- und y-Koordinate des Mittelpunkts und den Radius an.
• poly oder polygon definiert ein Vieleck (Polygon). Im coords-Attribut gebt Ihr jeweils die x- und y-Koordinate der Ecken des Polygons an.

Der Ursprung (also der Punkt 0/0) ist die obere linke Ecke der Grafik. Es gibt Hilfsprogramme, die bei der Erstellung solcher Image Maps helfen, damit Ihr Euch nicht mit den Koordinaten herumschlagen müßt. Die Verbindung zwischen dem map-Tag und dem img-Tag, der die Grafik anzeigt, geschieht über das name-Attribut des map-Tags. Damit setzt Ihr einen Anker, der im img-Tag mit dem usemap-Attribut referenziert wird.

<map name="meineMap">
...
</map>

<img src="imgmap.gif" alt="Image Map" usemap="#meineMap">