Homepage-Webhilfe Event-Banner

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 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>
Vorschau

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>
Vorschau

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>
Vorschau
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK