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.

<!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.)