WEBFEATURES: HTML - Hyperlinks

Html für Einsteiger

Einbau von Hyperlinks

Hyperlinks werden mit Hilfe des <a href> - Tags, daß mit einem </a> abgeschlossen wird, erzeugt. Innerhalb des Tags wird die Adresse angegeben, die angesprungen wird. Der Text, der auf das Sprungziel verweist, wird von den Tags umschlossen. Er erscheint unterstrichen - zum Zeichen, das der Text verlinkt ist.

	<a href=	"http://rechneradresse/ordner/zieldatei.html"	>	Zur Zieldatei	</a>
	"Start"-Tag	Zieladresse		Verweistext	Schlußtag

Die Zieladresse kann auf verschiedene Weise angegeben werden. Wichtig ist, ob sich die Zieldatei auf dem eigenen Rechner befindet oder auf einem anderen Rechner. Wenn die Zieldatei auf dem eigenen Rechner untergebracht ist, spricht man von einem internen Verweis, im anderen Fall von einem externen. Bei einem externen Verweis muß immer vorneweg "http://" angegeben werden, dann folgt der Rechnername und der Pfad der Datei.

Bei einem internen Link muß nur der Pfad zur Zieldatei angegeben werden. Das kann auf einem Webserver auf verschiedene Weise geschehen. Der Webserver hat ein sogenanntes "root"-Verzeichnis, das sich in Unterverzeichnisse aufspaltet. Im root-Verzeichnis nimmt die Verzweigung ihren Anfang: Das root-Verzeichnis ist sozusagen die Wurzel des Verzeichnis-"Baums".

Ein Verweis auf eine Datei kann nun an zwei verschiedenen Stellen des Verzeichnisbaums beginnen. Die eine (seltener) genutzte Möglichkeit ist, vom root-Verzeichnis aus den Dateipfad anzugeben, dann beginnt der Dateipfad mit einem / (Slash).

Die andere Möglichkeit ist die, dokumentrelativ zu verweisen. Dabei wird von dem Ort ausgehend, in dem das Dokument liegt, von dem aus verwiesen wird, der Dateipfad angegeben. Keine Angst - es ist nicht so kompliziert, wie es klingt!

Beispiel für das Einbinden eines externen Links:

<a href ="http://www.netfeatures.de/dreamweaver/index.html">
DW-Tutorial</a>

Beispiel für das Einbinden eines internen Links ausgehend vom obersten Verzeichnis:

<a href ="/frames/start_kontakt.html">Kontakt</a>

Beispiel für das Einbinden eines internen Links ausgehend vom aktuellen Dokument:

<a href ="../frames/start_photo.html">Photographics</a>

Beispiel anschauen

Bei den internen Links, die relativ zum aktuellen Dokument verlinkt werden, kann man in das nächsthöhere Verzeichnis wechseln, indem man ../ angibt.

Wenn man ein Dokument nicht im selben Browserfenster, sondern in einem anderen Fenster öffnen will, muß man mit target=_blank noch zusätzlich das Zielfenster definieren. Das geht so:

Zieldatei in einem extra Fenster öffnen:

<a href ="/frames/start_photo.html" target="_blank">Photographics</a>

Beispiele anschauen

Es gibt auch die Möglichkeit, innerhalb eines einzigen Dokuments mit Hilfe von Links hin- und herzuspringen. Besonders praktisch ist dies, wenn man eine ziemlich längliche Seite hat und dem Besucher mit Hilfe von Links das Scrollen ersparen möchte. Dafür muß man zunächst an der Stelle, die "angesprungen" werden soll, einen sogenannten Anker festlegen. Dieser Anker bekommt einen Namen, zum Beispiel "oben". An der Stelle, von der aus dann zu der mit dem Anker markierten Stelle gesprungen wird, wird wieder ganz normal ein <a href> - Link gesetzt, nur das dann zusätzlich noch der Name des Ankers und ein Lattenkreuz vor den Dateinamen gesetzt wird. Das sieht dann so aus:

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Webfeatures - HTML-Beispiele</title>
</head>

<body bgcolor="#FDE49B">

Hier steht eine Überschrift, die mit einem Anker versehen ist:
<a name="oben"></a>

Hier steht ne Menge Text, vielleicht auch viele Grafiken.....

<a href="#oben">Hier gehts nach oben</a>
</body>
</html>

Beispiel anschauen

Man kann auch in andere Dateien direkt an eine bestimmte Stelle springen. Das ist sehr praktisch für Querverweise, wenn zum aktuellen Thema der gerade geladenen Datei zusätzliche Informationen in anderen Dateien existieren. Dann müssen zusätzlich zu den Angabe des Sprungziels noch der Name und der Pfad der Datei, auf die verwiesen wird, angegeben werden:

Beispiel:

1. Datei xyz.html, in der der Link steht:

Hier ist eine Stelle, an der auf Informationen in einer anderen Datei verwiesen wird. Diese Stelle wird gleich zu sehen sein, wenn Sie auf
<a href="info.html#Verweistext">hier</a>
klicken....

2. Datei (Name: info.html) in der der Anker steht:

Interessante Textstelle, auf die von einer anderen Datei verwiesen wird.
<a name="Verweistext"></a>

Beispielseiten anschauen

Zu guter Letzt soll noch der Email-Link erwähnt werden. Sein Name sagt schon alles über seine Funktion und Wichtigkeit. Wenn der Email-Link angeklickt wird, geht automatisch ein Fenster eines Mailprogramms auf. Meistens wird das der Outlook Express sein, bei manchen auch der Messenger von Netscape. Der Nachteil ist dabei allerdings, wenn das Mailprogramm nicht korrekt konfiguriert ist, das der User auch keine Mail verschicken kann. Aber wenn doch, bekommt der Kontaktwillige auf bequeme Weise die Möglichkeit, dem Empfänger eine Nachricht zukommen zu lassen. Dazu gibt man im <a href> - Tag erst mailto: an und dann, an welche Email-Adresse die Mail gehen soll, z. B. info@xyz.de - ohne Leerzeichen dazwischen.

Wenn man es ganz schick haben will, kann man - wieder ohne Leerzeichen - ein Fragezeichen und dann subject= ..... anfügen. Dadurch gibt man den Inhalt der Betreffzeile vor. Die kann allerdings vom Absender verändert werden, wenn er möchte. Die Anführungszeichen müssen übrigens alles umschliessen: vom mailto bis zum Ende des Betreffs.

Beispiel für das Einbinden eines Email- Links:


Ich freue mich über eine
<a href="mailto:info@xyz.de?subject=Mail von der Website">Mail</a> von Ihnen!

Beispielseite anschauen

Tabellen