TAG 2 · HTML

HTML: Links

Links sind ein wichtiger Bestandteil jeder Website. Mit ihnen kannst du zwischen Seiten wechseln, andere Websites öffnen oder zu bestimmten Bereichen einer Seite springen.

1) Einen Link erstellen

Ein Link wird mit dem <a>-Element erstellt. Das a steht für „anchor“. 

<a href="index.html">
  Startseite
</a>

Der Text zwischen <a> und </a> ist der anklickbare Text.

2) Das href-Attribut

Mit href wird festgelegt, wohin der Link führt. 

<a href="web-bilder.html">
  Bilder
</a>

In diesem Beispiel führt der Link zur Datei web-bilder.html.

3) Interne Links

Ein interner Link führt zu einer anderen Seite innerhalb deiner eigenen Website. 

<a href="index.html">
  Zur Startseite
</a>

<a href="web-bilder.html">
  Zu den Bildern
</a>
← Startseite Bilder

4) Externe Links

Ein externer Link führt zu einer anderen Website. Dafür wird die vollständige Internetadresse angegeben. 

<a href="https://www.wikipedia.org">
  Wikipedia
</a>
Wikipedia öffnen ↗

5) Links in einem neuen Tab öffnen

Mit target="_blank" wird ein Link normalerweise in einem neuen Tab geöffnet. 

<a
  href="https://www.wikipedia.org"
  target="_blank"
>
  Wikipedia
</a>

Das ist besonders praktisch bei externen Websites, weil deine eigene Website dabei geöffnet bleiben kann.

Bei externen Links ist zusätzlich rel="noopener noreferrer" eine gute Sicherheitsmaßnahme.

6) Zu einem bestimmten Bereich springen

Du kannst auch direkt zu einem bestimmten Bereich einer Seite springen. Dafür bekommt das Ziel ein id. 

<h2 id="tag2">
  Tag 2 – HTML
</h2>

Anschließend kannst du mit einem # auf diese Stelle verlinken: 

<a href="#tag2">
  Zu Tag 2
</a>

Auch auf eine andere Seite kann direkt zu einer bestimmten Stelle gesprungen werden: 

<a href="index.html#tag2">
  Zu Tag 2
</a>

7) Ein Bild als Link verwenden

Nicht nur Text kann anklickbar sein. Auch ein Bild kann innerhalb eines <a>-Elements stehen. 

<a href="index.html">

  <img
    src="portrait.jpg"
    alt="Zur Startseite"
    style="width:200px;"
  >

</a>

Klickt man auf das Bild, wird die angegebene Seite geöffnet.

8) Die wichtigsten Bestandteile

<a> Erstellt einen Link.
href Gibt das Ziel des Links an.
target="_blank" Öffnet das Ziel in einem neuen Tab.
id Kann einen bestimmten Bereich als Ziel markieren.

9) Komplettes Beispiel

<!-- Interner Link -->

<a href="web-bilder.html">
  Bilder
</a>


<!-- Externer Link -->

<a
  href="https://www.wikipedia.org"
  target="_blank"
  rel="noopener noreferrer"
>
  Wikipedia
</a>


<!-- Link zu einem Bereich -->

<a href="index.html#tag2">
  Zu Tag 2
</a>

10) Typische Fehler

  • href vergessen – dann weiß der Browser nicht, wohin der Link führen soll.
  • Einen falschen Dateinamen verwenden.
  • Bei einem internen Link versehentlich https:// verwenden.
  • Das schließende </a> vergessen.
  • Bei target="_blank" bei externen Links rel="noopener noreferrer" vergessen.

Merke

  • Links werden mit <a> erstellt.
  • href bestimmt das Ziel.
  • Interne Links verweisen beispielsweise auf web-bilder.html.
  • Externe Links verwenden eine vollständige Adresse wie https://....
  • target="_blank" öffnet einen neuen Tab.
  • Mit #id kannst du zu einem bestimmten Bereich einer Seite springen.

11) Mini-Übung

Erstelle auf deiner eigenen HTML-Seite drei Links:

  1. Einen Link zurück zur index.html.
  2. Einen Link zu einer anderen HTML-Seite deines Sommercamp-Projekts.
  3. Einen externen Link, der sich in einem neuen Tab öffnet.

Zusatz: Erstelle einen Link, der direkt zu einem bestimmten Bereich deiner Seite springt.

```