Links
Links (eigentlich Hyperlinks) sind Verweise, um Sprünge auf andere Seiten oder innerhalb der Seite zu ermöglichen.
Solche Verweise erstellen wir in HTML mit dem Element a. Innerhalb der Tags wird der anzuzeigende Text
angezeigt. Der eigentliche Verweis wird im href-Attribut festgelegt.
<a href="VERWEIS">TEXT</a>
Auch Links verfügen standardmäßig über eine besondere Darstellung. Dabei ist zwischen „normalen Links“, besuchten Links und aktiven Links zu unterscheiden. „Normale Links“ sind vom Benutzer bisher unbesucht und werden in blauer Farbe und mit einer Linie unter der Schrift angezeigt. Besuchte Links werden in lila und ebenfalls mit einer Linie angezeigt. Als aktive Links werden Links bezeichnet, die ausgewählt aber noch nicht aufgerufen sind. Wenn Sie also die linke Maustaste auf einem Link gedrückt halten, ist dieser aktiv. Sobald Sie die Taste loslassen, wird die aufzurufende Seite aufgerufen und der Link gilt ab sofort als besucht und nicht mehr als aktiv. Aktive Links werden unterstrichen und in roter Farbe angezeigt.
URL-Links
URL-Links sind Verweise, welche auf andere Seiten verweisen. Diese können Bestandteil unserer Webseite sein oder
einen Verweis auf eine andere Seite darstellen. Bei internen Links, also Links innerhalb unserer Website, können
wir relative aber auch absolute Pfadangaben verwenden. Externe Links müssen neben dem Pfad- und Dateinamen
(falls vorhanden) das Protokoll (z. B. http) und die Domain-Adresse (alternativ auch IP-Adresse) enthalten. Die Angabe
des target-Attributs in Kombination mit dem Wert _blank sorgt dafür, dass die Seite in einem
neuen Fenster oder Tab geöffnet wird. Das folgende Beispiel zeigt sowohl einen internen Link (Datei maillinks.html, welche
sich im gleichen Verzeichnis befindet) als auch einen externen Link (Domain www.google.de):
<a href="maillinks.html">Zum E-Mail-Link-Beispiel ...</a> <br /> <a href="https://www.google.de/" target="_blank">Zu Google (Neues Fenster) ...</a>
E-Mail-Links
E-Mail-Links sind Links, welche nicht auf eine Seite im World Wide Web verweisen, sondern auf eine E-Mail-Adresse.
Browser öffnen beim Anklicken eines E-Mail-Links zumeist den auf dem Computer installierten E-Mail-Client (z. B.
Mozilla Thunderbird, Microsoft Outlook). Die E-Mail-Adresse für einen E-Mail-Link wird ebenfalls im href-Attribut
angegeben. Um dem Browser mitzuteilen, dass es sich um einen E-Mail-Link handelt, müssen wir jedoch vor der E-Mail-Adresse
den Begriff mailto, gefolgt von einem Doppelpunkt, notieren. Dies sieht dann bspw. so aus:
<a href="mailto:kontakt@homepage-webhilfe.de">Schreiben Sie uns eine E-Mail ...</a>
Anker
Links zu Ankern ermöglichen den Sprung innerhalb einer Seite. Hierfür ist ein Anker (dort wo wir hinspringen wollen) und ein Anker-Link (von dort wo wir springen wollen) notwendig.
Ein Anker kann seit HTML5 an jedem Element definiert werden. Hierfür müssen in dem Element, wo wir hinspringen wollen, das
Attribut id festlegen. Als Wert für id ist ein frei definierbarer Name (Anker-Name) zulässig,
der jedoch für diese Seite eindeutig sein muss und Leerzeichen und einige andere Sonderzeichen (z. B. #) nicht enthalten darf.
<h1 id="oben">Webseiten-Titel</h1>
Ein Anker-Link wird ebenfalls im href-Attribut angegeben und enthält als Wert das #-Zeichen gefolgt von dem
Anker-Namen.
<a href="#oben">zum Seitenanfang</a>
Auch Anker-Links auf externe Seiten sind möglich. Hierfür notieren wir die URL gefolgt von dem #-Zeichen und dem Anker-Namen.
<a href="text.php#navUmbruch">Zum Thema Zeilenumbrüche</a>
Der folgende Code zeigt ein etwas komplexeres Beispiel mit Ankern und Anker-Links. Die Beispiel-Ansicht wurde noch um einige weitere Absätze erweitert.
<h1 id="oben">Blindtext</h1> <p id="abs1">...</p> <p id="abs2">...</p> <p id="abs3">...</p> <br /> <a href="#oben">Zurück zum Seitenanfang ...</a><br /> <br /> <a href="#abs1">Zu Absatz 1</a><br /> <a href="#abs2">Zu Absatz 2</a><br /> <a href="#abs3">Zu Absatz 3</a><br /> <br /> <a href="https://www.homepage-webhilfe.de/HTML/links.php#navAnker">Zum Thema ...</a>