HTML-Links

In diesem Tutorial erfahren Sie, wie Sie Links zu anderen Seiten in HTML erstellen.

Erstellen von Links in HTML

Ein Link oder Hyperlink ist eine Verbindung von einer Webressource zu einer anderen. Links ermöglichen es Benutzern, nahtlos von einer Seite zur anderen zu wechseln, auf jedem Server überall auf der Welt.

Ein Link hat zwei Enden, sogenannte Anker. Dies kann eine beliebige Webressource sein, z. B. ein Bild, ein Audio- oder Videoclip, eine PDF-Datei, ein HTML-Dokument oder ein Element innerhalb des Dokuments selbst usw.

Standardmäßig werden Links in den meisten Browsern wie folgt angezeigt:

• Ein nicht besuchter Link ist blau unterstrichen.
• Ein besuchter Link ist unterstrichen und violett.
• Ein aktiver Link ist rot unterstrichen.

Sie können dies jedoch mit CSS überschreiben. Erfahren Sie mehr über Styling-Links.

HTML-Linksyntax

Links werden in HTML mit dem Tag <a> angegeben.

Ein Link oder Hyperlink kann ein Wort, eine Wortgruppe oder ein Bild sein.

Alles zwischen dem öffnenden <a> -Tag und dem schließenden </a> -Tag wird zu dem Teil des Links, den der Benutzer in einem Browser sieht und klickt. Hier sind einige Beispiele der Links:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

Das Attribut href gibt das Ziel des Links an. Sein Wert kann eine absolute oder relative URL sein.

Eine absolute URL ist die URL, die jeden Teil des URL-Formats enthält, z. B. Protokoll, Hostname und Pfad des Dokuments, z. B. https://www.google.com/, https://www.example.com/form.php usw. Relative URLs sind seitenrelative Pfade, z. B. contact.html, images/smiley.png usw. Eine relative URL enthält niemals das Präfix http:// oder https://.

Festlegen der Ziele für Links

Das Attribut target teilt dem Browser mit, wo das verknüpfte Dokument geöffnet werden soll. Es gibt vier definierte Ziele, und jeder Zielname beginnt mit einem Unterstrich (_):

• _blank — Öffnet das verknüpfte Dokument in einem neuen Fenster oder Tab.
• _parent — Öffnet das verknüpfte Dokument im übergeordneten Fenster.
• _self — Öffnet das verknüpfte Dokument im selben Fenster oder Tab wie das Quelldokument. Dies ist der Standardwert, daher ist es nicht erforderlich, diesen Wert explizit anzugeben.
• _top — Öffnet das verknüpfte Dokument im vollständigen Browserfenster.

Probieren Sie das folgende Beispiel aus, um zu verstehen, wie das Ziel des Links grundsätzlich funktioniert:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Erstellen von Lesezeichenankern

Sie können auch Lesezeichenanker erstellen, damit Benutzer zu einem bestimmten Abschnitt einer Webseite springen können. Lesezeichen sind besonders hilfreich, wenn Sie eine sehr lange Webseite haben.

Das Erstellen von Lesezeichen erfolgt in zwei Schritten: fügen Sie zuerst das Attribut id für das Element hinzu, in das Sie springen möchten, und verwenden Sie dann den Attributwert id, dem das Hash-Zeichen (#) vorangestellt ist, als Wert des Attributs href des Tags <a>, wie im folgenden Beispiel gezeigt:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Erstellen von Download-Links

Sie können den Datei-Download-Link auch genauso erstellen wie das Platzieren von Textlinks. Zeigen Sie einfach die Ziel-URL auf die Datei, die zum Download zur Verfügung stehen soll.

Im folgenden Beispiel haben wir die Download-Links für ZIP-, PDF- und JPG-Dateien erstellt.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>