title: "Einen Link anklickbar machen"

Das Erstellen anklickbarer Links ist eine der wichtigsten Aufgaben der Webentwicklung. Wenn Sie möchten, dass Benutzer auf andere Seiten Ihrer Website oder externe Ressourcen zugreifen können, ermöglichen ihnen die Links dies. Aber wie kann ich einen Link anklickbar machen?

Fügen Sie einfach ein Tag vor der URL hinzu und schließen Sie es mit dem Tag . Aber das ist erst der Anfang. Sie können auch Attribute hinzufügen, um das Aussehen und Verhalten des Links zu ändern.

So erstellen Sie einen anklickbaren Link

Verwenden Sie die folgende Struktur, um eine Verknüpfung innerhalb des Textes zu erstellen:

Hier URL ist die Adresse der Webseite oder des Dokuments, auf die der Link verweist, und LINK-TEXT - text, der für den Benutzer sichtbar ist und auf den Sie klicken können.

Um beispielsweise einen Link zu einer Seite zu erstellen www.example.com mit dem Text "Gehe zum Beispiel" müssen Sie den folgenden Code verwenden:

Wenn ein Benutzer auf diesen Link klickt, wird er an die angegebene Adresse weitergeleitet.

Definieren eines Links

Ein Link kann ein Text, ein Bild oder ein anderes Element sein, das eine Eingabeaufforderung anzeigt, auf die Sie klicken können. Wenn ein Benutzer auf einen Link klickt, leitet sein Browser ihn an die im Linkcode angegebene URL weiter.

Links sind ein wichtiges Element des Webdesigns und werden häufig für:

• Navigieren zu einer anderen Seite in der aktuellen Website;
• Wechseln zu einer anderen Website;
• Datei zum Herunterladen öffnen;
• Senden von E-Mails;
• Öffnen eines Popup-Fensters;
• Andere vom Webentwickler festgelegte Aktionen ausführen.

Links spielen eine Schlüsselrolle beim Erstellen einer Website-Navigationsstruktur und helfen Benutzern, schnell und einfach zwischen verschiedenen Seiten zu navigieren.

Definieren des href-Attributs

Attribut href kann sowohl relative als auch absolute Adressen enthalten. Die relativen Adressen werden relativ zur aktuellen URL der Seite angegeben, auf der sich der Link befindet. Absolute Adressen enthalten den vollständigen Pfad zur Ressource.

Zum Beispiel ein Verweis mit einem Attribut href könnte wie folgt aussehen:

Wenn Sie auf diesen Link klicken, wird der Benutzer zur Website weitergeleitet https://www.example.com.

Aussehen des Links

Das Layout von Links in HTML kann mit CSS festgelegt werden. Die folgenden grundlegenden Eigenschaften werden am häufigsten verwendet:

• color - die Farbe des Linktextes;
• text-decoration - dekoratives Design des Referenztextes (z. B. Unterstreichen);
• font-weight - die Sättigung der Schrift;
• cursor - Der Typ des Cursors, wenn er über einen Link schwebt;
• :hover - Styling des Links beim Schweben;

Um die Navigation zu erleichtern, sollten Sie einen einheitlichen Stil für die Gestaltung von Links auf der gesamten Website verwenden. Zum Beispiel:

• • color: blue;
  • text-decoration: underline;
  • font-weight: bold;
  • cursor: pointer;

  Auf diese Weise heben sich die Links vom Text ab und werden von den Benutzern leicht erkannt.

  Hinzufügen eines Hinweises für eine Referenz

  Sie können das title-Attribut verwenden, um einen Hinweis für einen Link hinzuzufügen. Normalerweise wird eine Quickinfo angezeigt, wenn Sie den Mauszeiger über einen Link bewegen.

  Hier ist ein Beispiel für die Verwendung des title-Attributs zum Erstellen einer Eingabeaufforderung:

  • Offizielle Website
  • Eine weitere Website
  • Dritte Website

  In diesem Beispiel hat jeder Link eine eigene Quickinfo, die angezeigt wird, wenn er über den Link schwebt. Die Verwendung von Eingabeaufforderungen kann hilfreich sein, um Benutzern zusätzliche Informationen zu Links bereitzustellen.

  Erstellen einer Verknüpfungsschaltfläche

  In HTML können Sie eine Linkschaltfläche erstellen, die wie eine Schaltfläche aussieht, aber über eine Linkfunktionalität verfügt. Um dies zu tun, können Sie ein Tag verwenden und ihm die entsprechenden Stile zuweisen.

  Hier ist ein Beispielcode, der eine Linkschaltfläche erstellt:

  In diesem Beispiel haben wir den Link auf die URL gesetzt"https://www.example.com " und sie haben ihr eine Button-Link-Klasse hinzugefügt. Dann können Sie mit CSS den Link so formatieren, dass er wie eine Schaltfläche aussieht. Sie können beispielsweise die Hintergrundfarbe, die Textfarbe, die Schriftgröße und andere Eigenschaften festlegen.

  Wenn Sie möchten, dass der Button-Link anklickbar ist, ohne zu einer neuen Seite zu navigieren, können Sie JavaScript verwenden, um einen Ereignishandler hinzuzufügen und die erforderlichen Aktionen auszuführen, wenn Sie auf die Schaltfläche klicken. Sie können beispielsweise ein modales Fenster öffnen oder eine bestimmte Funktion ausführen.

  Hier ist ein einfaches JavaScript-Beispielcode, der einer Linkschaltfläche einen Mausbewegungsereignishandler hinzufügt und die Funktion doSomething() ausführt, wenn Sie darauf klicken:

  const buttonLink = document.querySelector('.button-link');buttonLink.addEventListener('click', doSomething);function doSomething() 

  Auf diese Weise können Sie eine Linkschaltfläche in HTML erstellen und ihre Funktionalität mit CSS und JavaScript festlegen.

  Überprüfen der Integrität des Links

  Nachdem wir einen Link erstellt haben, ist es wichtig, seine Funktionsfähigkeit zu überprüfen. Dazu können Sie auf den Link klicken und sicherstellen, dass er die gewünschte Seite öffnet oder die gewünschte Aktion ausführt.

  Sie können jedoch die folgenden Methoden verwenden, um die Integrität einer Referenz zuverlässiger zu überprüfen:

  1. Ziehen Sie den Link zu einer neuen Registerkarte im Browser. Wenn ein neuer Tab geöffnet wird und die gewünschte Seite geladen wird, funktioniert der Link.
  2. Kopieren Sie den Link und fügen Sie ihn in die Adressleiste des Browsers ein. Drücken Sie dann die Eingabetaste. Wenn die Seite korrekt geladen und angezeigt wird, funktioniert der Link.
  3. Verwenden Sie die Browser-Entwicklertools. Öffnen Sie die Entwicklerkonsole (dies wird normalerweise durch die Tastenkombination Strg + Umschalt + I aufgerufen). Fehlerinformationen werden in der Entwicklerkonsole angezeigt, wenn der Link nicht funktioniert. Wenn in der Konsole keine Fehler auftreten und die gewünschte Seite geladen wird, funktioniert der Link.

  Die Überprüfung der Integrität eines Links ist wichtig, um sicherzustellen, dass Benutzer auf die gewünschten Informationen zugreifen oder die gewünschte Aktion ausführen können. Darüber hinaus wird es auch helfen, mögliche Fehler im Link zu erkennen und zu beheben.