Links¶

Links sind einer der wichtigsten Elemente in einer Website. Über Links können Verlinkungen auf andere Websites erstellt werden. Entweder über einzelne Links innerhalb des Inhalts oder als Menü. Sie sind ein essenzieller Bestandteil des Internets.

Anker¶

Über das <a>-Element (oder anker-Element) können Links erstellt werden. Zwischen dem und dem steht der Linktext. Es kann auch ein Bild als Link verwendet werden statt des Textes.
Links sind Inline-Elemente und erzeugen keinen Zeilenumbruch.

<a>Das ist ein Link</a>

Das ist ein Link

Achtung

So funktioniert der Link noch nicht. Es ist nicht angegeben, wohin der Link verweisen soll.

href¶

Durch das href-Attribut wird dem Browser mitgeteilt, wo der Link hinführen soll. Der Pfad, der als Wert dem href-Attribut übergeben wird, ist entweder ein absoluter Pfad oder ein relativer Pfad. Nun verändert sich auch der Mauszeiger, sobald die Maus sich über dem Link befindet zu einer Hand.

<a href="https://www.duckduckgo.com">duckduckgo-Websuche</a>

<a href="bilder/bild1.jpg">Bild1</a>

duckduckgo-Websuche

Bild1

target¶

Mittels des target-Attribut kann gesteuert werden, wie der Browser neue Websites öffnen soll.

in dem gleichen Browserfenster
in einem neuen Tab.

Die zwei wichtigsten Werte für target sind: _self und _blank.

_self ist der Standardwert, muß nicht extra angegeben werden, und öffnet die neue Website im gleichen Browserfenster.
_blank öffnet ein neues Browserfenster oder einen neuen Tab.

<a href="https://www.duckduckgo.com" target="_blank">duckduckgo-Websuche</a>

<a href="https://picsum.photos/id/37/300/200" target="_blank">Bild1</a>

duckduckgo-Websuche

Bild1

Bilder als Link¶

Bilder können als Links verwendet werden. Dafür muss innerhalb des a-Elementes statt des Linktextes ein Bild mittels dem img-Element angegeben werden.

<a href="https://picsum.photos/id/37/300/200" target="_blank"
  ><img src="https://picsum.photos/id/37/300/200" alt="Ein Landschaftsbild"
/></a>

Email als Link¶

Über die Angabe von mailto:[emailadresse] als href-Wert kann ein Link erstellt werden, der bei einem Klick das Mailprogramm des Users öffnet.

<a href="mailto:info@testadresse.de">Mail schreiben</a>

Mail schreiben

Websitenavigation¶

Mittels eine ul-Liste und dem a-Element kann die Struktur für eine Websitenavigation gebaut werden. Dafür wird ein <a>-Element für den Inhalt jedes <li>-Element verwendet.

<h3>Navigation</h3>
<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/ueberuns.html">Über uns</a></li>
  <li><a href="/kontakt.html">Kontakt</a></li>
</ul>

Navigation

Sprungmarken¶

Ankerlinks, auch Sprungmarken genannt, ermöglichen es, innerhalb einer Webseite direkt zu einem bestimmten Abschnitt zu springen. Dazu wird ein id-Attribut an einem HTML-Element vergeben und im Link auf diese ID mit einem # verwiesen. Das ist besonders nützlich für lange Seiten oder Inhaltsverzeichnisse.

Funktionsweise

ID vergeben: Jedes Element, zu dem gesprungen werden soll, bekommt eine eindeutige ID.
Link erstellen: Der Link verweist auf diese ID mit einem # vorangestellt.

<!-- Inhaltsverzeichnis -->
<nav>
  <ul>
    <li>Einleitung</li>
    <li><a href="#section2">Beispiele</a></li>
    <li><a href="#section3">Fazit</a></li>
  </ul>
</nav>

<!-- Zielbereiche -->
<h2 id="section1">Einleitung</h2>
<p>Hier beginnt der Text der Einleitung...</p>

<h2 id="section2">Beispiele</h2>
<p>Hier werden Beispiele gezeigt...</p>

<h2 id="section3">Fazit</h2>
<p>Hier folgt das Fazit der Seite...</p>

Einleitung

Hier beginnt der Text der Einleitung... Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Beispiele

Hier werden Beispiele gezeigt...

Fazit

Hier folgt das Fazit der Seite...

Erklärung

<h2 id="section2"> definiert die Sprungmarke „section2“.
<a href="#section2">Beispielw</a> springt direkt zu dieser Stelle, wenn der Link angeklickt wird.
Die ID muss einzigartig auf der Seite sein.
Ankerlinks können auf Überschriften, Absätze, Bilder oder beliebige andere HTML-Elemente gesetzt werden.

Download Attribut¶

Man kann das HTML-Attribut download verwenden, um dem Browser mitzuteilen, dass eine Datei beim Anklicken eines Links nicht im Browser geöffnet, sondern direkt heruntergeladen werden soll. Normalerweise würde ein Browser zum Beispiel PDFs, Bilder oder Textdateien direkt anzeigen. Mit download sorgt man dafür, dass die Datei stattdessen auf dem eigenen Gerät gespeichert wird.

Man benutzt das Attribut in einem <a>-Tag, also einem Link, und gibt als href den Pfad zur Datei an. Ein einfaches Beispiel wäre:

<a href="dokument.pdf" download>PDF herunterladen</a>

PDF herunterladen

Wenn man möchte, kann man sogar einen neuen Dateinamen vorgeben, unter dem die Datei gespeichert werden soll. Dazu schreibt man einfach download="NeuerName.pdf":

<a href="dokument.pdf" download="MeineDatei.pdf">PDF herunterladen</a>

PDF herunterladen

Bemerkung

Es ist zu beachten, dass das Attribut vor allem für Dateien vom gleichen Server zuverlässig funktioniert. Bei externen Dateien respektieren manche Browser das Download-Attribut nicht immer. Insgesamt ist es aber eine einfache Möglichkeit, dem Nutzer direkt das Speichern von Dateien anzubieten, ohne dass sie vorher im Browser geöffnet werden.

Ordner oder Datei in der Pfadangabe¶

Man kann für das href-Attribut entweder den Dateinamen, auf den verklinkt werden soll, angeben:

<a href="ueber-uns.html">Über uns</a>

oder man verwendet die Ordnerangabe, falls man seine Dateien in einzelnen Ordnern strukturiert hat. Dazu muss in jedem Ordner der Inhalt in der index.html Datei geschrieben sein.

<a href="/ueber-uns">Über uns</a>