3 HTML-Kurs - Verweise (Hyperlinks) einfügen

3.1 Erstellen von Verweisen (Links)

Ein sehr wichtiger Punkt im Erstellen von HTML-Dateien ist das Einfügen von Links, entweder zu einer Datei in der eigenen Website oder aber zu anderen Websites.

3.1.1 Was ist ein Verweis (Hyperlink)?

Mit einem Verweis (engl. Hyperlink oder auch verkürzt Link) wird ein Element (z.B. ein Wort) einer HTML-Seite mit einem Ziel im WWW oder einem anderen Teil auf der eigenen Website verknüpft. Dabei wird das als Verweis genutzte Element auch als Sprungmarke und das Ziel als Sprungziel bezeichnet. Um den Verweis kenntlich zu machen, wird er meist farblich abgesetzt und/oder unterstrichen dargestellt.

3.1.2 Wie ist ein Link aufgebaut?

Alle Links sind prinzipiell gleich aufgebaut. Dabei ist es ueerst einmal nicht wichtig, wohin der Link führt. Zum Öffnen eines Verweises wird der sogenannte Anker-Tag genutzt, mit dem der Link am Ende auch wieder geschlossen werden muss. Innerhalb des Befehles muss 1. das Ziel angegeben werden und 2. der Text, den er Benutzer als Linktext angezeigt bekommt. Mit der Angabe des Ziels wird entweder die Angabe einer eigenen Datei oder eine Adresse im WWW erwartet.

3.1.3 Verweis zu einer anderen Website im WWW

Möchten Sie zu einer anderen Website im Interet wervweisen, dann sieht ihr Code wie folgt aus:

<a href="http://www.google.de">Hier geht's zur Startseite von Google</a> und danach
geht der normale Text weiter.

Hier ist zu beachten, dass unbedingt die komplette Adresse - also mit vorangestelltem http:// anzugeben ist!

3.1.4 Link zu einer anderen Datei im eigenen Webprojekt

Nachfolgend ein Beispiel eines Links zu einer eigenen Datei im eigenen Webprojekt:

<a href="uebersicht.html">Hier geht's zur HTML-Kurs-Übersicht</a> und jetzt geht
der normale Text weiter.

Achtung: Dateinamen auf der eigenen Website sollten immer ohne Umlaut geschrieben werden! Also z.B. statt ä immer ae schreiben! Die Angabe des Zieles muss in Anführungsstrichen erfolgen und natürlich muss genau darauf geachtet werden, dass auf den richtigen Ordner verlinkt wird. Nicht alle Dateien sind ein einem Projekt in demselben Ordner. Um in eine andere Ebene zu kommen wird ../ unmittelbar vor den Dateinamen gesetzt, bei 2 Ebenen höher ein ../../ usw. Wenn ich beispielsweise auf meine Startseite verlinke, muss ich auf dieser Seite den Link wie folgt eingeben:

<a href="../index.html">Hier geht's zur Startseite </a>

Bitte testen Sie nach dem Einsetzen eines Links unbedingt, ob der Pfad richtig ist!

3.1.5 Verweise innerhalb einer Datei

Manchmal möchte man den Besucher einer Website zu einer bestimmten Stelle auf einer Seite schicken, z.B. in der Mitte der Seite, damit er nicht erst noch eine Menge anderen Text durchlesen muss. Um dies zu erreichen setzt man Sprungmarken und die dazu gehörigen Sprungziele. Ich nutze dies auf meiner Website z.B. auf der Startseite. Wenn man dort auf die Voransicht einzelner Templates klickt, gelangt man gleich auf die richtige Unterseite mit der zugehörigen Stelle, an der zu dem Template die benötigten Details angegeen werden.

Die generelle Syntax beim Setzen von Sprungmarken ist identisch mit der normaler Links, jedoch wird keine Datei angegeben, sondern ein beliebiges Wort mit einer vorangestellten Raute #. Beispiel:

<a href="#ende">Hier geht's zum Ende der Seite.</a>

Um nun zum definierten Sprungziel zu gelanen, muss diese Stelle der Datei mit einem sogenannten Anker versehen werden.

<a name="ende"></a>

Im Gegensatz zur Sprungmarke muss nun kein sichtbarer Text angegeben werden, da der Anker für den Besucher unsichtbar ist. Wenn Sie nun die Sprungmarke anklicken, springt der Browser zum gewünschten Abschnitt auf der Seite.