HTML Grundlagen: Zum Erstellen von Hyperlinks, muss man das A-Tag mit dem href-Attribut verwenden • was ist eine URL?

Links erstellen mit dem A Tag

Ein Hyperlink ist ein Verweis auf eine andere Webseite. Dies kann eine Unterseite der eigenen Website oder eine Seite einer anderen Website sein. Grundsätzlich besteht jede Navigation aus Hyperlinks. Link ist die Abkürzung für Hyperlink und meint dasselbe.

Links sind meist farblich hervorgehoben und werden standardmäßig unterstrichen dargestellt.

Ein Link besteht immer aus einer URL und einem Linktext, z.B. HTML Grundlagen.
(<a href="https://www.website-advisor.de/html-grundlagen.php">HTML Grundlagen</a>)

Beispiel

Link erzeugen mit <a href="…">

<a href="URL">Linktext</a>   [1]
Anzeige

URL – was ist das?

Im Volksmund spricht man häufig von einem Link, obwohl man eigentlich URL meint. Die Abkürzung URL steht für Uniform Resource Locator (Deutsch: einheitlicher Ressource-Anzeiger). Sie bezeichnet die Adresse, die eine Datei auf einem Server angibt. Gebräuchlicher als URL sind die umgangssprachlichen Begriffe Internetadresse oder Webadresse bzw. Web-Adresse.

Wie ist eine URL aufgebaut?

Eine URL setzt sich aus folgenden Bestandteilen zusammen:

  1. Protokoll, z.B. http://, https:// oder ftp://

  2. Sub-Domain, z.B. www, www2 oder blog

  3. Domain-Name, z.B. website-advisor.de

  4. Verzeichnis-Pfad, z.B. / für das Root- bzw. Wurzelverzeichnis

  5. Dateiname, z.B. html-grundlagen.php

Sub-Domain und Domain werden durch einen Punkt '.' (Englisch: Dot) voneinander getrennt.

Zusammengefasst ist die URL z.B.
https://www.website-advisor.de/html-grundlagen.php

Es ist empfehlenswert, sprechende URLs zu verwenden, da der Nutzer dann sofort auf den Inhalt der Seite schließen kann.

Wenn du die URL jetzt in das HTML A-Tag[1] einsetzt, erhältst du z.B.

<a href="https://www.website-advisor.de/html-grundlagen.php">Linktext</a>   [2]
Anzeige

HTML Tags können verschachtelt werden. Wenn du statt einen Textlink ein Bild mit einem Link verknüpfen willst, musst du in dem HTML Tag[2] nur Linktext durch ein IMG Tag austauschen.

Das HTML Tag für ein Bild mit Link lautet also zum Beispiel:

<a href="https://www.website-advisor.de/html-grundlagen.php"><img src="/images/bild.png" alt="Bild-Beschreibung"></a>