Lerne, wie du in HTML Hyperlinks zu externen Websites, anderen Seiten innerhalb deiner Website oder bestimmten Inhalten auf einer Web-Seite erstellen kannst.
Was du benötigst
Vorbereitung.
Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne die Datei „create-hyperlinks.html“ in Dreamweaver. Zeige den Quell-Code in der Ansicht „Teilen“ an.
Rufe das Menü „Ansicht“ auf. Deaktiviere „Vertikal teilen“. Die Ansichten „Code“ und „Live“ werden nun übereinander angezeigt. So lässt sich der HTML-Code leichter lesen.
1. Einen Link zu einer externen Web-Seite erstellen.
Scrolle zum Abschnitt mit dem Kommentar „<!-- Start Here -->“. Suche das erste Menüelement „ABOUT“.
Setze das Wort „ABOUT“ nun zwischen Anker-Tags (<a></a>). Füge dann das Attribut href=" " zum öffnenden A-Tag hinzu. Gib die vollständige URL „http://www.nasa.gov“ zwischen den beiden Anführungszeichen (" ") ein.
Wenn du auf eine externe Seite verweist, möchtest du diese möglicherweise in einem neuen Browser-Fenster öffnen, damit Besucher deine Website nicht gleich verlassen. Füge hierzu dieses Attribut hinzu: target="_blank".
HTML.
<a href= "http://www.nasa.gov" target="_blank">ABOUT</a>
2. Einen Link zu einer anderen Seite innerhalb deiner Website 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 erstellst du nun einen Link zu „gallery.html“, einer der bereitgestellten Projektdateien.
Umschließe das Wort „IMAGES“ mit den Tags <a></a>. Gib href=" in den öffnenden A-Tag ein. Navigiere zur Datei „gallery.html“. Klicke auf „Öffnen“.
HTML.
<a href="gallery.html">IMAGES</a>
3. Einen Link zu einem Bereich auf derselben Web-Seite 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 musst du 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ße nun das Wort „ARTICLES“ im Navigationsmenü mit den Tags <a></a>. Füge dann noch das Attribut href=" " hinzu. Gib zwischen den Anführungszeichen (" ") ein Hashtag (#) ein, gefolgt von der ID.
HTML.
<a href="#section2A">ARTICLES</a>
Klicke auf „Vorschau in Browser“. Teste die Hyperlinks in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
