Hyperlinks. oder Links sind das primäre Werkzeug für die Webentwicklung. Sie ermöglichen es Benutzern, von einer Webseite zur anderen zu wechseln, um Verbindungen zwischen verschiedenen Ressourcen im Internet zu schaffen. In HTML werden Hyperlinks mit einem Tag erstellt a (anchor), der dem Browser anzeigt, dass es sich um einen Link handelt.
Um einen Hyperlink zu erstellen, müssen Sie innerhalb des öffnenden und schließenden Tags a fügen Sie die URL der Seite hinzu, zu der Sie navigieren möchten. Hier ist ein Beispiel:
Im obigen Code, "https://example.com " ist die URL, und "Dieser Link" wird auf der Webseite als aktiver Link angezeigt. Wenn ein Benutzer auf diesen Link klickt, wird er zu der angegebenen Seite weitergeleitet.
Sie können dem Tag auch zusätzliche Attribute hinzufügen a, wie target, um anzugeben, wie der Browser den Link öffnen soll (im aktuellen Fenster oder in einem neuen Tab), oder title, um einem Link eine Quickinfo hinzuzufügen, die angezeigt wird, wenn Sie den Mauszeiger darüber bewegen.
Hyperlink in HTML: Ein vollständiger Leitfaden für Anfänger
Zusätzlich zur Angabe der Adresse können Hyperlinks zusätzliche Informationen enthalten. Sie können beispielsweise ein target-Attribut hinzufügen, das angibt, in welchem Fenster oder Rahmen der Link geöffnet wird. Die folgenden Werte sind verfügbar:
| Bedeutung | Die Beschreibung |
|---|---|
| _blank | Öffnet den Link in einem neuen Fenster oder Tab des Browsers. |
| _self | Öffnet den Link im aktuellen Fenster oder Frame (Standardeinstellung). |
| _parent | Öffnet einen Verweis im übergeordneten Frame, wenn keine Frames vorhanden sind, funktioniert er als _self . |
| _top | Öffnet den Link im oberen Fenster (schließt alle Frames). |
| fenstername | Öffnet einen Link in einem Fenster mit dem angegebenen Namen, wenn kein solches Fenster vorhanden ist, wird ein neues Fenster erstellt. |
Beispiel mit dem target-Attribut :
Hyperlinks können auch Text, ein Bild oder ein anderes Element enthalten. Sie können beispielsweise ein Bild in einen Hyperlink einfügen:
In diesem Handbuch haben wir uns die grundlegenden Möglichkeiten zum Erstellen eines Hyperlinks in HTML angesehen. Sie können Text ersetzen, Links mit Attributen ergänzen, Bilder und andere Elemente hinzufügen. Das Erstellen eines Hyperlinks ist ein wichtiges Element der Webentwicklung, das Benutzern hilft, im Internet zu surfen und die benötigten Informationen zu finden. Wir wünschen Ihnen ein erfolgreiches Studium!
Was ist ein Hyperlink und warum wird er benötigt?
Hyperlinks spielen eine Schlüsselrolle in der Webentwicklung, da sie die Struktur von Websites ermöglichen und die Navigation durch die Seiten erleichtern. Sie ermöglichen es Benutzern auch, auf eine Vielzahl von Informationsquellen zuzugreifen, einschließlich Artikeln, Bildern, Videos und anderen Dokumenten.
In diesem Beispiel wird ein Benutzer durch Klicken auf "Klick auf mich" an eine Website mit der Adresse weitergeleitet"http://www.example.com ".
-
(engl. unordered list - eine ungeordnete Liste) oder
(engl. ordered list (sortierte Liste) und für jeden Listeneintrag ein Element
(engl. list item - Listeneintrag). Jeder Link wird innerhalb des Elements dargestellt .
Beispiel für eine Liste von Hyperlinks:
In diesem Beispiel wird eine Liste mit drei Hyperlinks erstellt, die jeweils einen Benutzer an eine Website mit einer Adresse weiterleiten "http://www.example.com ".
Hyperlinks sind ein wesentlicher Bestandteil der Webentwicklung und ermöglichen eine benutzerfreundliche und intuitive Navigation. Sie helfen dabei, verschiedene Seiten zu verknüpfen und die Website zusammenhängender und informativer zu machen.
Wie erstelle ich einen Hyperlink in HTML?
Im folgenden Beispielcode wird veranschaulicht, wie ein einfacher Hyperlink erstellt wird:
In diesem Beispiel führt der Link zu einer Webseite unter der Adresse https://www.example.com und der Linktext wäre ein "Referenzbeispiel".
Das target-Attribut mit dem Wert "_blank" gibt an, dass der Link in einem neuen Browser-Tab geöffnet werden soll.
Sie können auch einen Anker-Link erstellen, mit dem Sie zu einem bestimmten Abschnitt innerhalb derselben Webseite navigieren können. Dazu müssen Sie im href-Attribut die ID des Elements angeben, zu dem Sie navigieren möchten, indem Sie das Gitterzeichen (#) verwenden. Zum Beispiel:
Перейти к разделу 1.Раздел 1
Текст раздела 1.
Wenn Sie in diesem Beispiel auf den Link "Gehe zu Abschnitt 1" klicken, wird die Seite automatisch zu dem Abschnitt mit der ID "section-1" gescrollt.
Dies sind die wichtigsten Möglichkeiten, Hyperlinks in HTML zu erstellen. Verwenden Sie diese, um interaktive und nützliche Elemente auf Ihrer Website zu erstellen.
Hauptattribute eines Hyperlinks
Attribut href wird verwendet, um die Adresse (URL) einer Seite oder einer anderen Ressource anzugeben, zu der Sie navigieren möchten, wenn Sie auf einen Link klicken. Um beispielsweise einen Link zu einer Seite zu erstellen google.com Sie müssen den folgenden Code verwenden:
Attribut target legt fest, auf welche Weise die Übergangsseiten geöffnet werden sollen. Der Wert dieses Attributs kann sein:
- _self - der Übergang erfolgt im aktuellen Fenster oder Tab des Browsers (Standardeinstellung);
- _blank - der Übergang erfolgt in einem neuen Tab oder Browserfenster;
- _parent - der Übergang erfolgt im übergeordneten Rahmen;
- _top - der Übergang erfolgt im oberen Container (außerhalb des Rahmens).
Wenn Sie beispielsweise einen Link in einem neuen Tab öffnen möchten, fügen Sie ein target-Attribut mit dem Wert "_blank" hinzu:
Attribut title fügt eine Quickinfo hinzu, wenn Sie den Mauszeiger über einen Link bewegen. Der folgende Code fügt beispielsweise einen Tooltip "Google besuchen" hinzu:
Zusätzlich zu den Hauptattributen gibt es andere, wie zum Beispiel: Attribute download (gibt an, dass der Link ein Dateidownload ist), rel (definiert die Beziehung zwischen dem aktuellen Dokument und dem referenzierten Dokument), class (legt den Klassennamen als Referenz fest) und andere, die je nach Anforderung verwendet werden können.
Wenn Sie Hyperlinks in HTML verwenden, ist es wichtig, sich an die Zugänglichkeit und Benutzerfreundlichkeit für Benutzer zu erinnern. Sie können Stile und Farben verwenden, um den Link besser sichtbar zu machen. Im Allgemeinen können Sie jedoch mit einfachen und verständlichen Attributen funktionale und effektive Hyperlinks erstellen.
Wie stilisiere ich einen Hyperlink mit CSS?
1. Ändern der Linkfarbe: Sie können die color-Eigenschaft verwenden, um die Farbe eines Hyperlinks zu ändern. Zum Beispiel a < color: blue; >ändert die Farbe des Hyperlinks in Blau. Sie können auch einen Hover-Effekt mit einer Pseudoklasse hinzufügen :hover , z. B. a:hover < color: red; >.
2. Ändern der Unterstreichung eines Links: Sie können die Standardverweisunterstriche mithilfe der text-decoration-Eigenschaft entfernen. Zum Beispiel a < text-decoration: none; >entfernt den Unterstrich. Sie können beim Hover andere Effekte hinzufügen, z. B. a:hover < text-decoration: underline; >fügt beim Hover einen Unterstrich hinzu.
3. Ändern der Cursoransicht: Mit der Cursor-Eigenschaft können Sie die Ansicht des Cursors ändern, wenn Sie über einen Link schweben. Zum Beispiel a < cursor: pointer; >ändert die Ansicht des Cursors in einen Zeiger, um anzuzeigen, dass der Link anklickbar ist.
4. Ändern des Hintergrunds eines Links: Mit der Eigenschaft background-color können Sie die Hintergrundfarbe eines Links ändern. Zum Beispiel a < background-color: yellow; >legt einen gelben Hintergrund fest. Sie können andere Effekte hinzufügen, wenn Sie den Cursor bewegen, z. B. a:hover < background-color: orange; >ändert die Hintergrundfarbe in Orange.
5. Ändern der Größe des Verknüpfungstexts: Mit der font-size-Eigenschaft können Sie die Größe des Referenztexts ändern. Zum Beispiel a < font-size: 16px; >legt die Textgröße auf 16 Pixel fest.
Dies sind nur einige Möglichkeiten, Hyperlinks mit CSS zu stylen. Die Möglichkeiten und Kombinationen von Stilen sind großartig und Sie können einen Link erstellen, der perfekt zu Ihrem Webseitendesign passt.
Techniken zum Arbeiten mit Hyperlinks in HTML
HTML bietet verschiedene Möglichkeiten zum Erstellen von Hyperlinks und zum Definieren ihres Aussehens. In diesem Abschnitt werden einige grundlegende Techniken zur Arbeit mit Hyperlinks in HTML behandelt.
1. Erstellen eines einfachen Hyperlinks
Das Ergebnis ist ein Verweis auf ein Beispiel.
2. Öffnet den Link in einem neuen Fenster
Um den Link in einem neuen Fenster zu öffnen, können Sie das Attribut target="_blank" verwenden. Zum Beispiel:
Der Link wird nun in einem neuen Browserfenster geöffnet.
3. Hinzufügen eines Link-Titels
Verwenden Sie das title-Attribut, um einem Link einen Titel hinzuzufügen, der angezeigt wird, wenn Sie den Mauszeiger darüber bewegen. Zum Beispiel:
Wenn Sie nun den Mauszeiger über einen Link bewegen, wird der Text "Referenzbeispiel" angezeigt.
4. Ankerverknüpfung erstellen
Mit einem Anker-Link können Sie zu einem bestimmten Abschnitt auf einer Seite navigieren. Um eine Anker-Referenz zu erstellen, müssen Sie ein href-Attribut mit einem # -Zeichen und einer Anker-ID hinzufügen. Zum Beispiel:
Die Partition, zu der Sie navigieren möchten, muss über eine entsprechende Kennung verfügen:
Раздел 1
Wenn Sie nun auf den Link "Gehe zu Abschnitt 1" klicken, navigiert der Benutzer zu dem Abschnitt mit der ID section1 .
5. Formatieren von Hyperlinks
Hyperlinks können mit CSS gestylt werden. Dazu können Sie Klassen oder Bezeichner verwenden und Stile direkt im Element definieren . Zum Beispiel:
Im ersten Beispiel wird dem Link eine Link-Klasse zugewiesen, die mit CSS gestylt werden kann. Im zweiten Beispiel werden die Stile direkt auf die Referenz angewendet.
