HTML: Links, Anker & Sprungmarken

Um schnell zu anderen Seiten springen zu können, oder um auf andere Seiten zu verweisen können Sie Links/Hyperlinks benutzen. Durch einen Klick auf einen Link befördern Sie den Surfer zu anderen Seiten. Ohne Sie wäre das Internet nur eine wahrlose Ansammlung von Dateien und Daten.

Links notieren

Ein Link besteht immer aus zwei Tags (Start- und Endtag) die um das/die gewünschten Objekt gelegt werden. Diese Objekte können Text, eine oder mehrere Grafiken, andere Elemente, einfach nur Buchstaben und/oder Zeichen sein. Das zu verwendende Element ist das a-Element. Beispiele:

<a href="https://www.a-coding-project.de">Klicke hier</a>

<a href="https://www.a-coding-project.de">
    <img src="grafik.gif">
</a>

Um anzugeben, auf welche Datei verwiesen werden soll wird das href-Attribut verwendet. Als Werte können hier URL- oder sonstige Angaben (z.B. Mail- oder Skriptverweise) benutzt werden.

Zielfenster

Zusätzlich lässt sich das Zielfenster definieren in dem die Datei geöffnet werden soll (siehe Frames). Diese werden mit dem target-Attribut beschrieben. Folgende Angaben sind hier möglich:

_top
Besagt, dass sich die Datei/Seite im gesamten Fenster öffnen soll. Dies ist dann nützlich, wenn Frames definiert wurden und die Datei auf die verwiesen wird nicht in einem speziellen Frame sondern im gesamten Fenster erscheinen soll.
_blank
Besagt, dass zur Anzeige der Datei ein komplett neues Browserfenster geöffnet werden soll. Dabei bleibt das ursprüngliche Fenster erhalten.
_self
Besagt, dass die Datei, auf die verwiesen wird, in genau dem Frame dargestellt werden soll, in dem man auf den Verweis klickt. Diese Angabe ist nicht unbedingt nötig, da die meisten Browser dies sowieso tun, es ist allerdings besser um einen fehlerfreien Ablauf zu garantieren.
_parent
Besagt, dass das Dokument in dem Zustand des Fensters geöffnet werden soll, wie es vor dem Erscheinen des Framesets das Fall war. Dies ist dann nützlich, wenn z.B. zu einer bestimmten Ausgangsposition wieder zurück gelangt werden soll.
Fenster-Name
Ebenso können Sie den Namen eines Fensters angeben, das Sie im Frameset definiert haben. Somit bezeichnen Sie das Fenster in dem die Seite geöffnet werden soll. Existiert ein Name nicht, so wird automatisch ein neues Browserfenster geöffnet - dies wirkt in etwa wie _blank. Soll nun also eine Datei in einem bestimmten Frame geöffnet werden, so müssen sie als target-Wert den Namen (Im Frame mit dem name-Attribut notiert) angeben.

Beispiele:

<a target="_top" href="">Klicke hier</a>
<a target="_blank" href="">Klicke hier</a>
<a target="_self" href="">Klicke hier</a>
<a target="Hauptfenster" href="">Klicke hier</a>

Anker / Sprungmarken

Anker oder Sprungmarken sind Elemente, die eine Stelle innerhalb einer Datei markieren. Dies geschieht meist nicht sichtbar für den Benutzer, allerdings mit Vorteilen für die Verwendung von Links. Anker werden ebenfalls mit dem a-Element notiert. Allerdings verwendet man hierzu das name-Attribut. Genauso wie Links können auch Anker viele verschiedene Dinge umschließen. Die Funktionsweise stellt sich dabei so dar:
Wird auf ein Link geklickt, der auf einen Anker verweist, so springt der Browser nicht nur zu der angegebenen Seite, sondern auch direkt zum angegebenen Anker. Dies ist besonders dann nützlich, wenn es sich um größere Seiten z.B. mit viel Text handelt. Der Verweis auf einen Anker wird im href-Attribut notiert, indem man hinter die Datei in der sich der Anker befindet ein # setzt und danach den Namen des Ankers notiert. Ein Link auf einen Anker könnte z.B. so aussehen:

<a href="name.htm#Ankername">Klick hier</a>
<a href="#unten">Klick hier</a>

Die Anker dazu könnten dann in etwa so aussehen:

<a name="Ankername">Textstelle</a>
<a name="unten">Unten auf der Seite</a>

Bei einem Link, der sich auf einen Anker in der selben Seite bezieht, kann die URL bzw. die Pfad und Dateiangaben weggelassen werden. Beispiel:

<a href="#Ankername">Klicken sie hier!</a>
<a href="#unten">nach unten</a>

Ein praktisches Beispiel für die Verwendung von Ankern und Links ist z.B. die Linkliste oben links mit den Verweisen auf einzelne Textstellen bzw. Überschriften hier in diesem Dokument.

Mail-Links

Mail-Links sind Links, bei denen sich automatisch das eingestellte Mailprogramm des Systems öffnet. Sie werden ebenso wie 'normale' Links definiert - einziger Unterschied bildet die Notation des href-Attributes. Hierbei muss als Wert mailto: sowie eine anschließende E-Mail-Adresse angegeben werden. Die notierte E-Mail Adresse wird dann automatisch in die 'An:'- bzw. 'To:'-Zeile des Mail-Programms übernommen. Beispiel:

<a href="mailto:hallo@a-coding-project.de">
    Schreiben Sie mir ihre Meinung
</a>

<a href="mailto:abc@def.de">
 <img ... >
</a>

Vordefinierte Mail-Links

Zusätzlich können noch einige weiter Dinge vordefiniert werden, die dann automatisch an das Mailprogramm übergeben werden sollen. Diese Werte werden dann zu dem Bereits getroffenen Wert des href-Attributes hinzugefügt. Werden Werte angefügt, so müssen diese durch ein Fragzeichen (?) von der Empfänger-Adresse getrennt werden. Alle weiteren Angaben werden durch ein Und-Zeichen (&) voneinander getrennt. Folgende sind möglich:

cc=
Definiert die Angaben für die Verteilung von Mail-Kopien (CC).
bcc=
Definiert die Angaben für die Verteilung von 'blinden' Mail-Kopien (BCC).
subject=
Definiert den Text für die Betreff-Zeile bzw für den Betreff der Mail.
body=
Definiert den Text der Mail.

Beispiel:

<a href="mailto:name1@name.de;name2@name.de;name3@name.de">
    Text
</a>

<a href="mailto:name1@name.de?cc=name2@name.de;name3@name.de">
    Text
</a>

<a href="mailto:name1@name.de?bcc=name2@name.de;name3@name.de">
    Text
</a>

<a href="mailto:name1@name.de?cc=name2@name.de&bcc=name3@name.de">
    Text
</a>

<a href="mailto:name@name.de?subject=Kommentar">
    Text
</a>

<a href="mailto:name@name.de?body=Ein Kommentar von mir:">
    Text
</a>

<a href="mailto:name1@name.de?cc=name2@name.de&subject=Kontakt">
    Text
</a>

Telefonnummer verlinken

Vor allem auf Smartphones lohnt sich die Verlinkung von Telefonnummern in HTML. Klickt man darauf, wird die Nummer direkt im Telefon geöffnet, so dass ein Anruf schnell starten kann. Und das geht so:

<a href="tel:+492515906440">0251 / 590 644 - 0</a>

Verlinkt wird dabei die Telefonnummer mit Landesvorwahl.

JavaScript-Links

Ebenso wie Mail- oder normalen Links können auch Verweise auf JavaScript -Skripte getätigt werden, um diese dann ausführen zu lassen. Dazu wird dem href-Attribut der Wert javascript: sowie der anschließende Name der auszuführenden Funktion übergeben. Beispiel:

<a href="javascript:MeineFunktion()">ausführen</a>

Weitere Link-Varianten

Da es nicht nur 'normale' http: Seiten gibt sondern auch andere wie z.B. lokale , Gopher oder Newsforen (etc.) gibt es auch für alle diese die jeweiligen (Vor-)Definitionen. Diese dienen dazu, dass der Browser diese Verweise bzw. die Dateien auf die verwiesen wird als solche (die Richtigen) ansieht. Folgende weitere Definitionen gibt es:

file: - Eine lokale Datei.
ftp: - Datei auf einem FTP-Server.
gopher: - Ein/e Gopher-Server/Datei.
https: - Eine Datei auf einem HTTP SServer (sichere Verbindung).
news: - Ein Newsforum.
telnet: - Eine Datei auf einem TelNet-Server.
wais: - Eine Datei auf einem Wais-Server.

Beispiel:

<a href="file://C:/name/name.txt"> Text </a>
<a href="ftp:abc.def.de/download.zip"> Text </a>
<a href="https://abc.def.de/sichere-seite.htm"> Text </a>

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Ausrichtung

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project