Die Webseiten enthalten verschiedene Links, die Sie direkt auf andere Seiten weiterleiten oder die Navigation zu einem bestimmten Teil der Seite ermöglichen. Die Links in HTML werden Hyperlinks genannt. Sie werden mithilfe des Tags <a> definiert.
Die Hyperlinks können auf ein Wort, eine Wendung, ein Bild oder ein beliebiges HTML-Element angewendet werden.
Die Standardfarbe der Links in HTML ist wie folgt:
- Nicht besuchte Links: unterstrichen und blau
- Besuchte Links: unterstrichen und lila
- Aktive Links: unterstrichen und rot
Das ist der Standardstil der Links, aber Sie können CSS verwenden, um Unterstreichungen zu entfernen oder die Farbe der Links zu ändern.
Syntax
Das Tag <a> wird gepaart verwendet, das Starttag <a> gibt an, wo der Link anfangen soll und das Endtag </a> gibt an, wo der Link endet.
Um einen Hyperlink zu erstellen, verwenden Sie das Tag <a> und das Attribut href, dessen Wert die URL oder die Stelle ist, worauf der Link steht.
<a href="url">Ihr Text</a>.Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h2>Beispiel eines Links</h2>
<a href="https://de.w3docs.com/">W3Docs.com</a>
</body>
</html>Ergebnis
Im vorigen Beispiel haben wir das Tag <h2> um Untertitel zu definieren und das Tag <a>, um Links zu erstellen. Zwischen den Tags <a> und </a> haben wir W3Docs.com. Klicken Sie darauf, um auf die Homepage unserer Webseite weitergeleitet zu werden.
Das Attribut target
Um einen Link in einer neuen Seite zu eröffnen, müssen Sie zu Ihrem Code target="_blank" hinzufügen. Das Attribut target gibt an, wo genau die verlinkte Seite geöffnet werden soll. Mit target="_blank" wird die verlinkte Seite in einem neuen Fenster oder in einem neuen Tab geöffnet.
<a href="https://de.w3docs.com/" target="_blank">W3Docs.com</a>Es ist sehr wichtig, dem Link einen Schrägstrich (/) hinzuzufügen.
Das Attribut id
Um zu einem bestimmten Teil der Seite zu navigieren, sollen Sie das Attribut id verwenden.
Unten erzählen wir Ihnen, wie man das machen soll:
- Verwenden Sie das Attribut id, um dem Teil der Seite einen Namen zu geben, an den der Benutzer nach dem Klicken auf den Link weitergeleitet werden soll. Der Wert des Attributs kann ein Wort oder eine Phrase sein, das diesen Teil beschreibt (wenn Sie eine Phrase verwenden, muss sie keine Leerzeichen enthalten, verwenden Sie stattdessen Unterstriche).
Beispiel: <a id="jump"> Hier kann ein beliebiger Teil der Seite sein, wo der Benutzer nach dem Klicken auf Hyperlink landen soll. Wir verwenden die ID "jump".</a>
- Erstellen Sie einen Hyperlink mit dem Gebrauch von id des Links target, dem eine Raute (# ) vorangestellt ist.
Beispiel: <a href="#jump"> Wenn Sie auf diesen Link klicken, werden Sie auf den Teil der Seite mit "jump" id <a> weitergeleitet werden.
Nun lassen Sie uns sehen, wie das im HTML-Code aussieht:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h2>Ein Beispiel mit dem Attribut id</h2>
<a id="jump"> Ihrem Wunsch nach kann hier belibiege Information platziert werden. Wir verwenden das Attribut id, welches “jump” genannt wird. </a>
<a href="#jump">Wenn wir auf diesen Link klicken, werden wir auf den Seitenteil mit dem id “jump” weitergeleitet.</a>
</body>
</html>Ergebnis
Wie kann man einen Hyperlink auf ein Bild anwenden
Um einen Hyperlink auf ein Bild anzuwenden, müssen Sie einfach das Bild ins Tag <a> einfügen. Das wird mithilfe des Tags <img>, welches einige notwendige Attribute haben muss, gemacht:
- src - die Quelle des Bildes
- alt - alternativer Text für das Bild
- width - die Breite des Bildes
- height - die Höhe des Bildes
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<a href="https://de.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Ergebnis
Klicken Sie auf das Bild und Sie werden auf die Homepage von W3Docs weitergeleitet.
Mehr über die HTML-Bilder können Sie im nächsten Kapitel lesen.
Übe dein Wissen
