Links sind ein grundlegendes Element in der HTML-Programmierung und spielen eine entscheidende Rolle beim Navigieren zwischen verschiedenen Webseiten und Ressourcen. In diesem Blog-Beitrag werden wir uns genauer mit HTML-Links und ihrer Verwendung zur Navigation befassen.
Hyperlinks erstellen:
HTML (Hypertext Markup Language) ist die grundlegende Code-Sprache, mit der Webseiten erstellt werden. Um einen Hyperlink zu erstellen, benötigen Sie HTML-Tags. Der wichtigste Tag ist der "a" Tag, der für den Link selbst steht. Hier ist ein Beispiel für den HTML-Code, um einen simplen Text-Link zu erstellen:
< a href="http://www.beispielwebseite.de" >Besuchen Sie unsere Beispielwebseite< /a >
Der Text "Besuchen Sie unsere Beispielwebseite" wird als anklickbarer Link angezeigt. Wenn ein Benutzer darauf klickt, wird er zur angegebenen Webseite weitergeleitet.
Um einen Link zu einer E-Mail-Adresse zu erstellen, verwenden Sie den "mailto" Befehl im href-Attribut. Hier ist ein Beispiel:
< a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!" >Kontaktieren Sie uns per E-Mail< /a >
Wenn ein Benutzer auf diesen Link klickt, öffnet sich sein E-Mail-Programm mit der angegebenen E-Mail-Adresse als Ziel.
Um einen Link zu einem bestimmten Abschnitt auf derselben Seite zu erstellen, wird die ID des Abschnitts verwendet. Hier ist ein Beispiel:
< a href="#abschnitt" >Zum Abschnitt springen< /a >
In diesem Beispiel ist "abschnitt" die ID des Abschnitts auf derselben Seite. Wenn der Benutzer auf den Link klickt, scrollt die Seite automatisch zum angegebenen Abschnitt.
Es ist auch möglich, Hyperlinks in Bildern oder anderen Elementen zu erstellen. Der HTML-Code ist ähnlich, aber anstelle von Text verwenden Sie das "img" oder das entsprechende Tag für das zu verwendende Element:
< a href="http://www.beispielwebseite.de" > < img src="/bild.jpg" alt="Besuchen Sie unsere Beispielwebseite" > < /a >
Hier wird das Bild "bild.jpg" als anklickbarer Link verwendet. Wenn der Benutzer darauf klickt, wird er zur angegebenen Webseite weitergeleitet.
Verlinkung innerhalb einer Webseite:
Um eine Verlinkung innerhalb einer Webseite zu erstellen, benötigen wir zwei grundlegende HTML-Tags: den "a"-Tag und den "href"-Attribut. Den "a"-Tag haben Sie bereits kennengelernt. Das "href"-Attribut steht für "Hypertext Reference" (Hypertext-Verweis) und wird verwendet, um den Verweis auf die Zielseite anzugeben.
Um einen Link zu erstellen, verwenden wir die folgende Syntax:
< a href="/Zielseite.html" >Linktext< /a >
Hier wird "Zielseite.html" durch den Dateinamen oder die URL der Zielseite ersetzt. Der "Linktext" kann alles sein, was angezeigt wird und auf den der Benutzer klicken kann, um zur Zielseite zu gelangen.
Es ist wichtig zu beachten, dass HTML-Dateien normalerweise in einem Verzeichnis oder Ordner hierarchisch organisiert sind. Daher müssen wir den Pfad zur Zielseite richtig angeben. Wenn sich die Zielseite im selben Verzeichnis wie die aktuelle Seite befindet, können wir einfach den Dateinamen verwenden. Wenn sich die Zielseite jedoch in einem anderen Verzeichnis befindet, müssen wir den Pfad anpassen. Hier sind einige Beispiele:
- Wenn die Zielseite sich im übergeordneten Verzeichnis befindet: < a href="/../Zielseite.html" >Linktext< /a >
- Wenn die Zielseite sich in einem Unterverzeichnis namens "Unterverzeichnis" befindet: < a href="/Unterverzeichnis/Zielseite.html" >Linktext< /a >
- Wenn die Zielseite sich in einem Unterverzeichnis eines Unterverzeichnisses befindet: < a href="/Unterverzeichnis1/Unterverzeichnis2/Zielseite.html" >Linktext< /a >
Es ist auch möglich, externe Links zu erstellen, die auf eine andere Webseite oder eine externe Ressource verweisen. Dazu können wir einfach die vollständige URL angeben:
< a href="https://www.example.com" >Linktext< /a >
Neben dem "href"-Attribut gibt es noch weitere Attribute, die wir verwenden können, um das Verhalten der Verknüpfung anzupassen. Ein Beispiel hierfür ist das "target"-Attribut, mit dem wir festlegen können, ob der Link in einem neuen Browserfenster geöffnet werden soll:
< a href="/Zielseite.html" target="_blank" >Linktext< /a >
In diesem Beispiel wird die Zielseite in einem neuen Browserfenster geöffnet.
Unsere Internetagentur München, Econcess, legt einen großen Wert auf ein aufgewecktes Design, um viele Kunden anzusprechen. Wenn Sie nun Interesse an einer Webseite für Ihre Firma haben, melden Sie sich gerne bei uns. Wir sind spezialisiert auf maßgeschneiderte Lösungen und bieten Ihnen professionelle Unterstützung bei der Realisierung Ihrer digitalen Projekte.
