Links erstellen mit dem A Tag
Ein Hyperlink ist ein Verweis auf eine andere Webseite. Dies kann eine Unterseite deiner eigenen Website oder eine Seite einer anderen Website sein. Grundsätzlich wird jede Navigation durch Hyperlinks realisiert. 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>)
Einen Link erzeugen mit <a href="…">
<a href="URL">Linktext</a> [1]Wie ist eine URL aufgebaut?
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, Webadresse oder Web-Adresse.
Eine URL setzt sich aus folgenden Bestandteilen zusammen:
-
Protokoll, z.B. http://, https:// oder ftp://
-
Sub-Domain, z.B. www, www2 oder blog
-
Domain-Name, z.B. website-advisor.de
-
Verzeichnis-Pfad, z.B. / für das Root- bzw. Wurzelverzeichnis
-
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 dadurch sofort auf den Inhalt der Seite schließen kann.
Wenn nun die URL als Wert für das href-Attribut im HTML A-Tag[1] verwendet wird, erhält man z.B.
<a href="https://www.website-advisor.de/html-grundlagen.php">Linktext</a> [2]HTML Tags können verschachtelt werden. Wenn kein Textlink, sondern ein Bild mit Link erstellt werden soll, muss im HTML A-Tag[2] nur Linktext durch ein IMG Tag ersetzt werden.
Das HTML-Tag für ein Bild mit Link sieht also zum Beispiel so aus:
<a href="https://www.website-advisor.de/html-grundlagen.php"><img src="/images/bild.png" alt="Bild-Beschreibung"></a>