Lernen Sie, wie Sie in HTML Hyperlinks zu externen Websites, anderen Seiten innerhalb Ihrer Website oder bestimmten Inhalten auf einer Web-Seite erstellen können.
make-hyperlink_1408x792

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie die Datei „create-hyperlinks.html“ in Dreamweaver, und zeigen Sie den Quell-Code in der Ansicht „Teilen“ an.

Rufen Sie das Menü „Ansicht“ auf, und deaktivieren Sie „Vertikal teilen“. Code- und Live-Ansicht werden nun übereinander angezeigt. So lässt sich der HTML-Code leichter lesen.

Datei „create-hyperlinks.html“ öffnen

Scrollen Sie zum Abschnitt mit dem Kommentar „<!-- Start Here -->“, und suchen Sie das erste Menüelement „ABOUT“.

Setzen Sie das Wort „ABOUT“ nun zwischen Anker-Tags (<a></a>). Fügen Sie dann das href=" "-Attribut zum öffnenden A-Tag hinzu. Geben Sie die vollständige URL „http://www.nasa.gov“ zwischen den beiden Anführungszeichen (" ") ein.

Wenn Sie auf eine externe Seite verweisen, möchten Sie diese möglicherweise in einem neuen Browser-Fenster öffnen, damit Besucher Ihre Website nicht gleich verlassen. Das erreichen Sie, indem Sie dieses Attribut hinzufügen: target="_blank".

HTML

<a href= "http://www.nasa.gov" target="_blank">ABOUT</a>

Link zu einer externen Web-Seite erstellen
Link zu einer externen Web-Seite erstellen

Eine Website besteht in der Regel aus mehreren Seiten oder Dokumenten, die über Links im Hauptmenü oder innerhalb einer Seite aufgerufen werden können. In diesem Beispiel erstellen Sie nun einen Link zu „gallery.html“, einer der bereitgestellten Projektdateien.

Umschließen Sie das Wort „IMAGES“ mit den Tags <a></a>. Tippen Sie dies in den öffnenden A-Tag: href=". Navigieren Sie zur Datei „gallery.html“. Klicken Sie auf „Öffnen“.

HTML

<a href="gallery.html">IMAGES</a>

Link zu einer anderen Seite innerhalb der Website erstellen
Link zu einer anderen Seite innerhalb der Website erstellen

Einige Web-Seiten können so lang sein, dass Besucher durch den Inhalt scrollen müssen. Anker-Links sind eine praktische Methode, um mit nur einem Klick zu einem anderen Bereich auf der Seite zu springen. Anker werden in zwei Schritten erstellt.

Zuerst müssen Sie den Bereich, der Ziel des Links sein soll, mit einer eindeutigen ID versehen. Die Übungsdatei enthält bereits die ID „section2A“ im DIV-Tag bei Zeile 42. 

Umschließen Sie nun das Wort „ARTICLES“ im Navigationsmenü mit den Tags <a></a>. Fügen Sie dann noch das href=" "-Attribut hinzu. Geben Sie zwischen den Anführungszeichen (" ") ein Hashtag (#) ein, gefolgt von der ID.

HTML

<a href="#section2A">ARTICLES</a>

Link zu einem Bereich auf derselben Web-Seite erstellen
Link zu einem Bereich auf derselben Web-Seite erstellen

Klicken Sie auf „Vorschau in Browser“, und testen Sie die Hyperlinks in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

Vorschau in Browser
04/13/2018
War diese Seite hilfreich?