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 <a> und dem </a> 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>

Warnung

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 - siehe Pfade bei Bildern. 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>

<a href="../dateien/programmieren.pdf">Programmieren mit Python</a>

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.

<!-- Website öffnet sich im gleichen Browserfenster -->
<a href="https://www.duckduckgo.com" target="_self">duckduckgo-Websuche</a>

<!-- Website öffnet sich im neuen Browserfenster/Tab -->
<a href="https://www.duckduckgo.com" target="_blank">duckduckgo-Websuche im neuen Tab</a>

See the Pen Links by Html Website (@html_website) on CodePen.

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://www.duckduckgo.com"><img src="/assets/img/ironman.jpg" alt="Ironman als Link" /></a>

See the Pen Links mit Bildern by Html Website (@html_website) on CodePen.

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>

See the Pen Link Mail by Html Website (@html_website) on CodePen.

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>

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>