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 alstarget
-Wert den Namen (Im Frame mit demname
-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