Links sind ein wichtiges Element jeder Website, mit dem Benutzer im Internet navigieren und zu anderen Seiten navigieren können. Sie sind die primäre Navigationsmethode und ermöglichen eine Beziehung zwischen verschiedenen Dokumenten.
Wenn Sie lernen möchten, wie Sie Links in HTML erstellen können, benötigen Sie zunächst Kenntnisse der grundlegenden Tags. Eines der am häufigsten verwendeten Tags zum Erstellen von Links ist das Tag . Es gibt den Anfang und das Ende des Links an und ermöglicht es Ihnen, die Adresse (URL) der Seite anzugeben, zu der sie führen wird.
Ein Beispiel für die Verwendung des Tags lautet wie folgt: Mein Link . In diesem Beispiel geben wir die Adresse der Seite im href-Attribut an und geben den Text an, der für den Benutzer sichtbar ist, wenn er über den Link schwebt. Anstelle von "Mein Link" können Sie jeden für Sie geeigneten Text verwenden.
Der Prozess zum Erstellen einer Verknüpfung
Schritt 1: Öffnen Sie einen Texteditor und erstellen Sie eine neue HTML-Datei.
Schritt 2: Erstellen Sie innerhalb eines Tags ein Element mit einem Tag .
Schritt 5: Speichern Sie die Datei mit der Erweiterung .html und öffnen Sie es in einem Webbrowser. Überprüfen Sie, ob der Link funktioniert und an die angegebene Adresse führt.
Anmerkung: Sie können auch einen Link zu einer anderen Seite in Ihrem Projekt erstellen, indem Sie einen relativen Dateipfad anstelle einer vollständigen URL angeben.
Text als Referenz auswählen
Der Text, den Sie für Ihren Link auswählen, muss informativ und genau sein, damit der Benutzer sofort verstehen kann, wo er umgeleitet wird. Denken Sie daran, dass Links das Steuerelement für den Benutzer sind und leicht zu verwenden und zu verstehen sein sollten.
Die richtige Auswahl des Textes für den Link kann die Navigation des Benutzers verbessern und die allgemeine Verständlichkeit und Benutzerfreundlichkeit der Website verbessern. Hier finden Sie einige Tipps zur Auswahl von Text für Links:
| Ratschlaege |
|---|
| Verwenden Sie beschreibende Wörter, die den Inhalt, zu dem der Link führt, am besten beschreiben. |
| Vermeiden Sie die Verwendung von Text "Hier klicken" oder "Link folgen", da sie nicht informativ sind und dem Benutzer keinen Kontext geben. |
| Berücksichtigen Sie den Kontext der Referenz und fügen Sie semantische Phrasen ein, um eine logische Verbindung herzustellen. |
| Beachten Sie die Lesbarkeit des Textes und seine visuelle Darstellung. Verwenden Sie eine klare und lesbare Schriftart. |
| Testen Sie die Links vor der Veröffentlichung, um sicherzustellen, dass sie an die richtigen Stellen führen und ordnungsgemäß funktionieren. |
Der informative Linktext hilft Benutzern, sich zu orientieren und schnell zu den gewünschten Inhalten zu navigieren. Stellen Sie sicher, dass Ihre Textauswahl klar und klar ist, um eine positive Benutzerinteraktion zu erstellen.
Link-Design
| Attribut | Die Beschreibung |
|---|---|
| href | Gibt die Adresse an, zu der der Benutzer beim Klicken auf den Link gelangen soll. Die Adresse kann in Form eines absoluten oder relativen Pfads angegeben werden. |
| target | Gibt an, wie der Link geöffnet wird. Der Wert "_blank" zeigt an, dass der Link in einem neuen Fenster oder Tab geöffnet wird, "_self" im selben Fenster oder Tab, "_parent" im Rahmen der obersten Ebene, "_top" im neuen Fenster für die gesamte Seite. |
| title | Gibt die Quickinfo an, die angezeigt wird, wenn Sie über einen Link schweben. |
Beispiel für die Verwendung eines Tags :
In diesem Beispiel wird der Link in einem neuen Fenster oder einer neuen Registerkarte geöffnet, die Quickinfo "Beispiellink" wird angezeigt, wenn Sie darauf zeigen, und der Linktext lautet "Linktext".
Hinzufügen eines Links zu einer Seite
- Wählen Sie den Text oder das Bild aus, den Sie als Referenz erstellen möchten.
- Fügen Sie vor dem Text oder Bild ein öffnendes Tag und danach ein schließendes Tag hinzu.
- Geben Sie innerhalb der Tags ein href-Attribut an, das die Adresse angibt, zu der der Link führen soll. Zum Beispiel,.
- Wenn Sie möchten, dass der Link in einem neuen Fenster oder Tab geöffnet wird, fügen Sie das Attribut target="_blank" hinzu.
- Schließen Sie die Tags und .
Um beispielsweise einen Link zur Startseite Ihrer Website zu erstellen, können Sie den folgenden Code verwenden:
Nachdem Sie diesen Code zu Ihrer Seite hinzugefügt haben, wird der Text "Startseite" ein Link sein, der zu einer Seite mit der Adresse "index" führt.html".
Jetzt wissen Sie, wie Sie einen Link zu Ihrer Seite hinzufügen können!
Arbeiten mit Verknüpfungsattributen
Ein HTML-Tag ist ein Element zum Erstellen von Links zu anderen Seiten oder Dokumenten. Neben dem Hauptattribut href Es gibt andere Attribute, mit denen Sie Links weiter anpassen können, um die URL zu definieren.
Attribut target legt fest, wie der Link geöffnet werden soll. Bedeutung _blank gibt an, dass der Link in einem neuen Tab oder Browserfenster geöffnet werden soll, _self - im aktuellen Tab, _parent - im übergeordneten Rahmen, _top - ganz oben im Rahmen.
Attribut title fügt dem Link eine Quickinfo hinzu, die angezeigt wird, wenn Sie mit der Maus über den Link schweben.
Attribut rel legt die Beziehung zwischen der aktuellen Seite und dem Zieldokument fest. Zum Beispiel, rel="nofollow" gibt an, dass Suchmaschinen dem Link nicht folgen sollten.
Attribut download wird verwendet, um vorzuschlagen, dass das Zieldokument geladen wird, anstatt es in einem Browser zu öffnen. Der Attributwert stellt den Dateinamen dar, der beim Speichern verwendet wird.
Beim Arbeiten mit Linkattributen ist es wichtig, sich an die Sicherheit zu erinnern. Geben Sie Benutzern niemals die Möglichkeit, eigene Werte für Attribute einzufügen, z. B. href oder target. Dies könnte die Türen für XSS-Angriffe öffnen.
Arten von Links
Es gibt verschiedene Arten von Links in HTML, mit denen der Benutzer zu anderen Seiten navigieren oder den Inhalt von Dokumenten anzeigen kann. Hier sind einige der häufigsten Arten von Links:
Interne Links
Interne Referenzen werden verwendet, um Verweise auf Abschnitte oder Anker im aktuellen Dokument zu erstellen. Sie ermöglichen es Benutzern, schnell zum gewünschten Teil der Seite zu navigieren, ohne dass sie einen Bildlauf durchführen müssen.
Externe Referenzen
Externe Links werden verwendet, um Links zu anderen Webseiten zu erstellen. Sie ermöglichen es Benutzern, zu anderen Websites oder Seiten zu navigieren.
Mit E-Mail-Links können Sie Links zum Senden einer E-Mail an einen Benutzer erstellen. Wenn Sie auf einen solchen Link klicken, wird ein E-Mail-Client mit einer vorgefüllten Empfängeradresse geöffnet.
Anrufnummer
Mit Links zu Telefonnummern können Benutzer eine Nummer direkt von einer Webseite aus wählen. Wenn Sie auf einen solchen Link klicken, wird die Anwendung für Anrufe mit einer bereits gewählten Nummer geöffnet.
Datei-Links
Dateiverweise werden verwendet, um Verweise auf Dateien auf dem Server zu erstellen. Wenn Sie auf einen solchen Link klicken, wird die Datei auf den Computer des Benutzers heruntergeladen oder bei installierter Anwendung in der entsprechenden Anwendung geöffnet.
Es gibt andere Arten von Links in HTML, aber die oben aufgeführten sind die am häufigsten verwendeten. Beim Erstellen von Links ist es wichtig, die richtigen Pfade zu Dateien oder Seitenadressen anzugeben, damit Benutzer erfolgreich auf Links klicken können.
Relative und absolute Referenzen
In HTML gibt es zwei Möglichkeiten, Links zu anderen Seiten zu erstellen: relative und absolute Links.
Relative Verweise werden relativ zum aktuellen Speicherort der HTML-Datei angegeben. Sie stellen einfach einen Datei- oder Verzeichnispfad dar, der mit dem Stammverzeichnis des aktuellen Dokuments beginnt. Zum Beispiel, wenn sich die aktuelle Seite im Verzeichnis "example" befindet, um auf die Datei "page" zu verweisen.html" im selben Verzeichnis können Sie einen relativen Link verwenden "page.html".
Absolute Referenzen geben im Gegenteil den vollständigen Pfad zu einer Datei oder einem Verzeichnis an. Dazu gehören ein Protokoll (z. B. "http://" oder "https://") und die vollständige Adresse einer Datei oder eines Verzeichnisses. Zum Beispiel, um auf die Seite "index.html" im Verzeichnis "example" auf einem anderen Server kann ein absoluter Link verwendet werden "http://www.example.com/example/index.html ".
Relative Links sind in der Regel einfacher und bequemer zu verwenden, da Sie portable Dokumente erstellen können, die unabhängig vom Speicherort der Dateien ordnungsgemäß funktionieren. Absolute Referenzen sind jedoch möglicherweise erforderlich, wenn Sie einen Verweis auf ein Dokument von einem anderen Server oder außerhalb der aktuellen Domäne benötigen.
Es ist wichtig zu beachten, dass Sie beim Erstellen von Links die richtigen Pfade zu den Dateien angeben und ihre Funktionsfähigkeit überprüfen müssen. Beachten Sie auch, dass die Verweise beim Ändern der Dateistruktur entsprechend aktualisiert werden müssen, damit sie weiterhin korrekt auf die gewünschten Dokumente zeigen.
Durch die Verwendung von relativen und absoluten Links in HTML können Sie leicht Verbindungen zwischen Seiten und Ressourcen erstellen, sodass Benutzer auf der Website navigieren und auf verschiedene Materialien und Informationen zugreifen können.
Öffnet den Link in einem neuen Fenster
Wenn Sie möchten, dass der Link in einem neuen Browserfenster geöffnet wird, können Sie das target-Attribut mit dem Wert _blank verwenden. Wenn Sie also auf einen Link klicken, wird ein neuer Tab oder ein neues Browserfenster geöffnet.
Im folgenden Beispielcode wird das target-Attribut verwendet:
| Kode | Die Beschreibung |
|---|---|
| Der Link | Der Link, der in einem neuen Fenster geöffnet wird |
In diesem Beispiel wird der Link in einem neuen Fenster geöffnet, wenn Sie darauf klicken.
Beachten Sie, dass das target-Attribut andere Werte annehmen kann, z. B. _self (Link in der aktuellen Registerkarte öffnen), _parent (Link im übergeordneten Frame öffnen) oder _top (Link im gesamten Bereich des Browserfensters öffnen).
Anker-Links auf der Seite
Um einen Link mit einem Anker auf einer Seite zu erstellen, müssen Sie das href-Attribut zusammen mit dem # -Zeichen verwenden und die Anker-ID angeben. Der Anker muss auf dem Element gesetzt sein, zu dem Sie die Seite scrollen möchten.
In diesem Beispiel wird die Seite durch Klicken auf den Link "Gehe zu Abschnitt" zu einem Element mit der section-ID gescrollt.
