HTML HyperText Markup Language (HyperText Markup Language) ist eine Markupsprache, die zum Erstellen von Webseiten verwendet wird. Ein Hyperlink ist ein Element, mit dem Sie Links zu anderen Webseiten, Dokumenten, Bildern, Mediendateien und anderen Ressourcen im Internet erstellen können.
Verwenden Sie ein Tag, um einen Hyperlink in HTML zu erstellen <a>, bei dem das Attribut angegeben wird href mit der Adresse der Zielressource. Hier ist ein Beispiel:
In diesem Beispiel wird der Text "Link" zu einem Hyperlink. Wenn Sie darauf klicken, wird der Benutzer zur Seite weitergeleitet "https://www.example.com ".
Wenn Sie möchten, dass der Hyperlink in einem neuen Tab geöffnet wird, können Sie ein Attribut hinzufügen target="_blank":
<a href="https://www.example.com" target="_blank">Der Link
Wenn Sie nun auf einen Hyperlink klicken, wird dieser in einem neuen Browser-Tab geöffnet.
Grundlagen von Hyperlinks in HTML
In diesem Beispiel führt der Link zu einer Website example.com . Der Benutzer wird den Text "Dies ist ein Hyperlink" als Link sehen und kann darauf klicken, um zur angegebenen Adresse zu gelangen.
Hyperlinks können auch relativ sein, d. H. Einen relativen Pfad zu einer Datei oder Seite innerhalb der aktuellen Site angeben:
In diesem Beispiel führt der Link zur about-Seite.html im selben Verzeichnis wie die aktuelle Seite. Der Benutzer wird den Text "Über uns" als Link sehen und kann zur about-Seite gelangen.html, indem Sie darauf klicken.
Dieser Link bezieht sich auf ein Element auf der Seite, das über ein Attribut verfügt . Wenn Sie auf diesen Link klicken, wird der Benutzer zum Element c verschoben.
Hyperlinks können ein wichtiges Werkzeug für die Navigation durch Webseiten sein, und das Verständnis ihrer Grundprinzipien ist eine wichtige Fähigkeit für einen Webentwickler.
HTML-Link-Skript
Verwenden Sie ein Tag, um einen Textlink in HTML zu erstellen. Ein Beispiel:
In diesem Beispiel wird der Text "Dieser Link" als normaler Text angezeigt, aber wenn Sie darauf klicken, wird der Benutzer an die im href-Attribut angegebene Adresse weitergeleitet "https://www.example.com ".
Das href-Attribut gibt die Adresse an, zu der Sie navigieren möchten, wenn Sie auf den Link klicken. Diese Adresse kann eine absolute (vollständige URL) oder eine relative (relativ zur aktuellen Datei) sein.
Wenn Sie den Link in einem neuen Tab oder Fenster öffnen möchten, können Sie das target-Attribut mit dem Wert "_blank" verwenden. Zum Beispiel:
Zusätzlich zu Textlinks können Sie in HTML Links zu Bildern und Schaltflächen mit Links erstellen. Dazu müssen Sie ein Element platzieren oder innerhalb des Tags . Beispiele:
In beiden Beispielen wird der Benutzer, wenn er auf ein Bild oder eine Schaltfläche klickt, an die angegebene Adresse weitergeleitet.
Es ist auch möglich, Links mit Ankern zu erstellen, mit denen Sie die Seite zu einem bestimmten Element scrollen können. Geben Sie dazu die ID des gewünschten Elements im href-Attribut an. Ein Beispiel:
In diesem Beispiel wird die Seite, wenn Sie auf einen Link klicken, zu einem Element mit der ID "section" gescrollt.
Das Erscheinungsbild von Links kann mit CSS gesteuert werden. Sie können beispielsweise die Farbe, Schriftart, Unterstreichung und andere Stile für den Status von Links festlegen: standardmäßig, beim Hover und nach einem Klick.
Die Gestaltung von Links kann auch mit Tags durchgeführt werden und sie ausdrucksvoller zu machen oder einen bestimmten Teil des Textes hervorzuheben.
Wie erstelle ich einen Hyperlink in HTML
HTML (aus dem Englischen. HyperText Markup Language) ermöglicht es Ihnen, aktive Hyperlinks zu erstellen, mit denen Benutzer auf verschiedenen Seiten einer Website navigieren und zu externen Ressourcen im Internet navigieren können. Das Erstellen eines Hyperlinks in HTML ist sehr einfach und erfordert nur wenige Schritte.
In diesem Beispiel wird der Text "Klicken Sie hier, um zu einer externen Ressource zu gelangen" zu einem anklickbaren Link, der den Benutzer auf die Website weiterleitet example.com wenn Sie darauf klicken.
Wenn Sie einen Link zu einer anderen Seite innerhalb Ihrer Website erstellen möchten, müssen Sie einen relativen Pfad zu dieser Seite angeben. Zum Beispiel:
In diesem Beispiel wäre der Text "Über uns" ein Link zur about-Seite.html und der Text "Kontakte" wäre ein Link zur Kontaktseite.html in Ihrer Website.
Mit dem Attribut "title" können Sie eine Quickinfo hinzufügen, wenn Sie den Mauszeiger über einen Link bewegen. Zum Beispiel:
Schließlich können Sie mit dem Attribut "class" dem Tag eine Klasse hinzufügen, um sie mit CSS zu stylen. Zum Beispiel:
Hier kann die Klasse "my-link" in der CSS-Datei Ihrer Website definiert werden, um das Erscheinungsbild des Links anzupassen.
Jetzt wissen Sie, wie Sie einen Hyperlink in HTML mit einem Tag und zusätzlichen Attributen erstellen.
Erstellen von Hyperlinks in HTML
Beispiel für die Verwendung eines Tags in HTML:
| Kode | Ergebnis |
|---|---|
| Der Link | Der Link |
| Der Link | Der Link |
| Der Link | Der Link |
Denken Sie daran, dass Hyperlinks für alle Benutzer verständlich und zugänglich sein müssen, einschließlich derjenigen, die Bildschirmleseprogramme verwenden. Daher ist es notwendig, einen informativen Text innerhalb des Tags anzugeben und nicht nur eine URL.
Ändern der Farbe und des Stils eines Links
In HTML können Sie die Farbe und den Stil Ihres Links mit CSS ändern. Wenn Sie die Farbe eines Links ändern, haben Sie die Möglichkeit, ihn auf einer Seite hervorzuheben und ihn sichtbarer zu machen.
Um die Farbe eines Links zu ändern, können Sie die color-Eigenschaft in CSS verwenden. Wenn Sie beispielsweise Ihren Link rot machen möchten, können Sie Ihrer CSS-Datei den folgenden Code hinzufügen:
Sie können den Stil des Links auch ändern, indem Sie zusätzliche CSS-Eigenschaften hinzufügen. Sie können beispielsweise den Stil eines Links ändern, wenn der Benutzer den Mauszeiger über ihn bewegt.
Sie können dazu eine Pseudoklasse verwenden :hover. Hier ist ein Beispielcode:
Wenn der Benutzer in diesem Beispiel den Mauszeiger über einen Link bewegt, wird er blau und unterstrichen. Dieser Effekt kann dem Benutzer helfen zu verstehen, dass der Link interaktiv ist und angeklickt werden kann.
Sie können auch die text-decoration-Eigenschaft verwenden, um den standardmäßigen Verweisunterstrich zu entfernen. Zum Beispiel:
Dadurch wird der Unterstrich des Links entfernt, was nützlich sein kann, wenn Sie ein Menü oder eine Liste von Links ohne sichtbare Trennzeichen erstellen möchten.
Die Verwendung von CSS zum Ändern der Farbe und des Stils eines Links kann Ihnen helfen, die Aufmerksamkeit des Benutzers zu erregen und die allgemeine visuelle Attraktivität Ihrer Website zu verbessern.
Hinzufügen eines Unterstrichs für einen Link
Sie können die CSS-Formatierung verwenden, um Links in HTML einen Unterstrich hinzuzufügen.
Auf diese Weise wird der Link mit einem Unterstrich angezeigt.
Öffnen von Links in einem neuen Fenster
Um einen Link in einem neuen Fenster zu öffnen, müssen Sie dem Tag ein target-Attribut mit dem Wert "_blank" hinzufügen.
Wenn Sie auf diesen Link klicken, wird dieser in einem neuen Tab oder Fenster geöffnet, abhängig von den Browsereinstellungen des Benutzers.
Das Öffnen von Links in einem neuen Fenster kann nützlich sein, wenn Sie möchten, dass der Benutzer auf Ihrer Website bleibt und der Link zur Vereinfachung in einem neuen Fenster geöffnet wird.
