Inhaltsverzeichnis -> Hyperlinks setzen

HTML: Einen Link setzen

Das vielleicht markanteste Merkmal von HTML-Dokumenten sind Links, Textteile also, die anklickbar sind und auf andere Dokumente verweisen.

Der folgenden HTML-Code fügt einen Link ein, der auf das Dokument "andereSeite.htm" verweist. Der Titel des Links, der anklickbare Text also, lautet "Zu meiner Homepage"

<a href="andereSeite.htm">Zu meiner Homepage</a>

Der Tag zum Einfügen von Links weicht ein wenig von den regulären Tags ab, die wir bisher kennengelernt haben. Die Besonderheit besteht darin, dass im Anfangstag ein Paramter vorkommt. Der Parameter lautet hier "href". Gefolgt von einem Gleichheitszeichen erhält der Parameter einen Wert, - in unserem Fall den Pfad eines Dokuments. Diese Syntax muss stets eingehalten werden. Gerne kommt es am Anfang zu Verwechslungen zwischem dem Pfad, der als Paramter im Tag steht und dem eigentlichen Linktitel, der auf der Seite angezeigt wird.

Nun wollen wir das gewonnene Wissen zum Einfügen von Links bei der Erstellung unserer Homepage anwenden. So soll es aussehen: Beispiel. Um die Linkliste zu erstellen, könnte der Code folgendermaßen lauten

<ul> <!-- Unsere Liste beginnt -->
<li><a href="seite1.htm">Link1</a></li> <!-- Der erste Punkt -->
<li><a href="seite2.htm">Link2</a></li> <!-- Der zweite ... -->
<li><a href="seite3.htm">Link3</a></li>
</ul> <!-- Unsere Liste ist zuende -->

Der komplette Code unsere Homepage lautet nun so:

<html>

<head> <!-- Der Kopfbereich -->

<title>Homepage von XY</title>

</head>

<body> <!-- Der Bereich, der im Browser angezeigt wird -->

<h1>Homepage von XY</h1>

<p>Herzlich Willkommen auf meiner Homepage!</p> <!-- ein Absatz -->

<p>Links:</p> <!-- noch ein Absatz -->

<p>

<ul> <!-- Unsere Liste beginnt -->
<li><a href="index.htm">Hobby</a></li> <!-- Der erste Punkt -->
<li><a href="index.htm">Urlaubsbilder</a></li> <!-- Der zweite ... -->
<li><a href="index.htm">Impressum</a></li>
</ul> <!-- Unsere Liste ist zuende -->

</p>

</body>

</html>

Alle Linkangaben, die sie bisher gesehen haben, bezogen sich auf Dokumente, die im selben Ordner liegen, wie die Internetseite, auf der die Links gesetzt wurden.

Möchte man mit einem Link auf ein Dokument verweisen, das sich im übergeordneten Ordner befindet, muss der Pfad folgendermaßen lauten:

<a href="../seite.htm">Link</a>

Möchte man in einen benachbarten Ordner springen, so könnte der Pfad folgendermaßen lauten:

<a href="../benachbarterOrdner/seite.htm">Link</a>

Es besteht aber auch immer die Möglichkeit, vollständige Internetadresse anzugeben:

<a href="http://www.homepage.de/benachbarterOrdner/seite.htm">Link</a>

Sie können auch grundsätzlich alle Pfade ihres Dokuments als vollständige Internetadressen angeben. Sie sollten aber dann bedenken, dass Sie an einen ganz bestimmten Domainnamen gebunden sind. Bei einem Umzug zu einer anderen Domain, müssten Sie alle Linkangaben aktualisieren. Zudem können Sie die Links nicht offline anlicken, was ja bei der Entwicklung manchmal vorteilhaft ist.

nächstes Kapitel - Inhaltsverzeichnis