Hyperlinks

Ein wesentlicher Inhalt von HTML-Seiten sind Hyperlinks. Mit dem Klick auf einen Hyperlink gelangt man sofort zu einer anderen HTML-Seite oder zu einer Stelle innerhalb derselben HTML-Seite.

Für Links benutzt man der Tag <a></a> (Anchor). Texte die zwischen <a> und </a> stehen, werden hervorgehoben und können mit der Maus angeklickt werden, wenn ein Linkziel (Eigenschaft href) angegeben ist, ansonsten wird er nicht angezeigt.

Wir unterscheiden drei Arten von Links:

Interne Links
Bei internen Links steht im Anchor-Tag der Zielname hinter dem Zeichen # z.B. <a href=#ziel>. Das Ziel muss dann in einen weiteren Anchor-Tag auf derselben Seite definiert werden. Dazu verwendet man die Eigenschaft id und den Zielnamen gibt man ohne das Zeichen # an, also für unseren Link würde das so aussehen: <a id="ziel"></a>.

Links auf eine andere HTML-Datei
Bei Links auf eine andere HTML-Datei gibt man bei href den Dateinamen an. Die Datei muss dabei im selben Ordner liegen, oder man muss den Pfad zur Datei im Dateisystem mit angeben, also z.B. <a href="index.html">.

Links auf eine Seite im Internet
Bei Links auf eine Seite im Internet gibt man bei href die Adresse (URL) der Seite an, also z.B. <a href="https://herrmix.de">.

Beispiel

Die vielen <br>-Tags im Beispiel dienen dazu, dass man die Wirkung des internen Links sieht. Die Datei first.html muss im selben Ordner liegen.

hyperlinks1.html

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hyperlinks </title>
  </head >
  <body>
    <h1> Hyperlinks </h1>
      <!--Interner Link-->
      <a href = "#ende" > Zum Ende dieser Seite ! </a> <br>
      <!--Link auf eine andere HTML-Datei-->
      <a href = "first.html" >Zu meiner ersten HTML - Seite ! </a> <br>
      <!--Link auf eine Seite im Internet-->
      <a href = "https://www.google.de" >Zu Google ! </a> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <!--Linkziel-->
      <a id = "ende" ></a> Ende dieser Seite !
  </body>
</html>

Erklärvideo

Aufgaben

Aufgabe 1

Teste das Beispiel!

Aufgabe 2

Kopiere alle bisher von dir erstellten HTML-Dateien in einen Ordner html.
Erstelle in diesem Ordner eine HTML-Datei mit den folgenden Inhalt:
- Am Anfang der Seite sind zwei Links zu Sprungzielen auf der Seite. Bei einem der Sprungziele steht die Überschrift „Meine bisherigen Seiten“, beim zweiten steht die Überschrift „Meine Lieblingsseiten“ im Internet.
- Unter der ersten Überschrift sollen Links zu einigen Dateien erscheinen, die wir bisher erstellt haben.
- Unter der zweiten Überschrift sollen Links zu mindestens 5 deiner Lieblingsseiten im Internet erscheinen.
- Füge zwischen allen Überschriften viele <br>-Tags ein, so dass die Wirkung der internen Links sichtbar wird. (In meinen Bild habe ich dass nicht gemacht, damit die Seite in ihrer Gesamtübersicht sichtbar ist.)

>> Lösungen

>> Bilder und Imagemaps