Zum Einfügen von Hyperlinks verwendet man den a-Tag mit folgender Syntax:
<p>
<a href="<Ziel>" title="<Beschreibung>">Der zu verlinkende Text</a>
</p>
Syntax-Erklärung:
<a>: Das a-Tag definiert den Hyperlink.
href=": Das <Ziel>"href-Attribut legt das Ziel des Links fest, hier ist es die Datei "<Ziel>". Es kann auch eine URL sein, z. B. "http://www.xyz.de/".
title=": Das <Beschreibung>"title-Attribut gibt eine Beschreibung für das Linkziel an. Diese Beschreibung ist für Suchmaschinen und Screenreader relevant, erscheint aber auch als Tooltip beim Überfahren des Links mit der Maus.
Der zu verlinkende Text: Der eigentliche Text, der angezeigt wird und auf den der Benutzer klicken kann, um zum Ziel zu gelangen.
Beispiel für einen Link zur Google-Suche:
<a href="https://www.google.com" title="Google">Google-Suche</a>
Beispiel für einen Link zu einer internen Seite:
Angenommen, es gibt eine weitere HTML-Datei mit dem Namen "about.html" im gleichen Ordner wie diese Datei. Der Hyperlink sieht dann so aus:
<a href="about.html" title="Über uns">Mehr über uns erfahren</a>
Beispiel für einen Link zu einem Bild:
Angenommen, es gibt ein Bild mit dem Namen "bild.jpg" im Unterordner "bilder". Der Hyperlink sieht dann so aus:
<a href="bilder/bild.jpg" title="Affenbild - Großansicht">Affenbild anzeigen</a>
Beispiel für einen Link in einem Unterordner:
Angenommen, es gibt eine weitere HTML-Datei mit dem Namen "services.html" im Unterordner "unterordner". Der Hyperlink sieht dann so aus:
<a href="unterordner/services.html" title="Unsere Services">Unsere Services entdecken</a>
Beispiel für einen Link in einem übergeordneten Ordner:
Angenommen, es gibt eine weitere HTML-Datei mit dem Namen "index.html" im übergeordneten Ordner. Der Hyperlink sieht dann so aus:
<a href="../index.html" title="Startseite">Zur Startseite zurückkehren</a>
Beispiel für einen E-Mail-Link
< a href="mailto:name@domain.de" title="Mail an mich senden">E-Mail-Kontakt</a>
Erklärung der CSS-Stile für die Hyperlinks
font-size: Legt die Schriftgröße der Hyperlinks fest.
font-weight: Legt die Schriftstärke (fett oder normal) der Hyperlinks fest.
color: Legt die Textfarbe der Hyperlinks fest.
text-decoration: Entfernt die Standard-Unterstreichung der Hyperlinks.
border-bottom: Fügt eine unterbrochene Linie am unteren Rand der Hyperlinks hinzu, um sie hervorzuheben.
transition: Fügt eine sanfte Animation hinzu, wenn der Mauszeiger über den Link bewegt wird (Hover-Effekt).