HTML Grundlagen: Hyperlinks erstellen mit <a href="URL">Linktext</a>

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" title="HTML Grundlagen">HTML Grundlagen</a>)

Ein Hyperlink wird mit folgendem HTML Code erzeugt:

<a href="URL">Linktext</a>   1)

URL – was ist das?

Im Volksmund spricht man häufig von einem Link, obwohl man 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.

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.

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

HTML Tags können verschachtelt werden. Wenn Du statt eines Textlinks ein Bild mit einem Link verknüpfen willst, brauchst Du in dem HTML Tag2) nur Linktext durch ein IMG Tag auszutauschen.

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

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