Der Link - eines der wichtigsten Elemente einer Webseite, mit dem Benutzer von einer Seite zur anderen wechseln können. Wenn Sie auf einen Link klicken, gelangen Sie zu einem anderen Dokument oder einem bestimmten Teil der aktuellen Seite. In HTML wird ein Link mit einem "a" -Tag (anchor) erstellt, das über ein "href" -Attribut verfügt, das die Zieladresse angibt.
Das Attribut "href" verweist auf die URL (Uniform Resource Locator) - die Adresse der Webseite, zu der Sie navigieren möchten. Die URL kann absolut (mit vollständiger Adresse) oder relativ (Link relativ zur aktuellen Seite) sein. Der Link kann zu einer anderen Webseite führen, eine Wiedergabeliste von Audio- oder Videodateien erstellen, Dateien hochladen oder Daten an einen Server senden.
Im HTML-Kontext kann ein Link als einfacher Text oder als aktives Element angezeigt werden, z. B. mit unterstrichen oder hervorgehoben, wenn der Cursor bewegt wird. Dazu werden CSS-Stile verwendet. Sie können den Link auch mit einem Beschreibungstext ergänzen, um genauer auf seinen Zweck hinzuweisen. Dadurch wird der Link für die Besucher der Website verständlicher und hilft ihnen, die benötigten Informationen zu finden.
Definieren und Verwenden eines Links in HTML
Beispiel für die Verwendung eines Links in HTML:
In diesem Beispiel wird der Benutzer, wenn er auf den Text "Linktext" klickt, zu einer Webseite mit der Adresse weitergeleitet"https://www.example.com ". Sie können auch einen Link zu einer lokalen Seite erstellen, indem Sie den Dateipfad angeben:
Neben dem href-Attribut kann der Link auch andere Attribute enthalten, z. B. target (bestimmt, wo die Zielressource geöffnet wird), title (bestimmt einen Tooltip, wenn Sie auf den Link zeigen) und viele andere.
Ein Link in HTML kann sowohl textbasiert als auch grafisch dargestellt werden. Verwenden Sie ein Tag, um einen Grafiklink zu erstellen in das Tag verschachtelt :
In diesem Beispiel wird der grafische Link als Bild "path/to/image" angezeigt.jpg" mit alternativem Text "Linktext", und wenn Sie auf diesen Link klicken, wird der Benutzer zu einer Webseite mit der Adresse weitergeleitet "https://www.example.com ".
Struktur und Attribute der Referenz
Im obigen Beispiel ist href="https://example.com " Ist ein Linkattribut, das auf die Adresse verweist, zu der beim Klicken auf den Link navigiert werden soll. Der Wert des href-Attributs ist eine URL.
Neben dem href-Attribut kann der Verweis auch andere zusätzliche Attribute enthalten, z. B.:
- target - Gibt an, wie der Link geöffnet werden soll (im aktuellen Fenster/im neuen Fenster/im Rahmen);
- title - bietet zusätzliche Informationen über den Link, der angezeigt wird, wenn Sie den Mauszeiger über den Link bewegen;
- download - Gibt an, dass der Link zum Herunterladen von Dateien dient.
Beispiel für die Verwendung zusätzlicher Attribute:
Im obigen Beispiel wird der Link in einem neuen Fenster geöffnet, und wenn Sie den Mauszeiger über den Link bewegen, wird der Text "In neuem Fenster öffnen" angezeigt.
Der Link kann auch ein Inline-Element haben, z. B. mit dem Sie die Stile und das Verhalten des Links innerhalb des Kontexts anpassen können:
In diesem Beispiel enthält der Link den Text "Referenzbeispiel", wobei die in der Link-Klasse definierten Stile angewendet werden.
Erstellen eines Links zu einer anderen HTML-Seite
In HTML können wir Links erstellen, mit denen Sie zwischen verschiedenen HTML-Seiten wechseln können. Um einen Link zu einer anderen Seite zu erstellen, verwenden wir ein Tag .
Um einen Link zu einer anderen HTML-Seite zu erstellen, müssen Sie im href-Attribut den Pfad zu dieser Seite angeben. Der Pfad kann relativ oder absolut sein.
Der relative Pfad verweist auf eine Datei, die sich im selben Verzeichnis wie die aktuelle Seite befindet. Der Dateiname wird verwendet, um einen relativen Pfad anzugeben, z. B.:
- Über das Unternehmen - Link zur Seite "about.html".
- Kontakte - Link zur Seite "Kontakt.html".
Ein absoluter Pfad verweist auf eine Datei mit dem vollständigen Pfad dazu. Der vollständige Pfad kann den Laufwerksnamen, die Verzeichnisse und den Dateinamen enthalten, z. B.:
- Über das Unternehmen - Link zur Seite "about.html" im Verzeichnis "Dokumente" auf dem Laufwerk "C:".
- Über das Unternehmen - Link zur Seite "about.html" auf einer externen Website "www.example.com ".
Wenn ein Benutzer auf einen Link klickt, leitet der Browser ihn automatisch auf die angegebene Seite um. In diesem Fall öffnet der Browser in der Regel eine neue Registerkarte oder ein neues Fenster mit einer neuen Seite, abhängig von den Einstellungen des Benutzers.
Um einen Link zu einer anderen HTML-Seite zu erstellen, haben wir auch die Möglichkeit, Text zwischen dem öffnenden und dem schließenden Tag hinzuzufügen . Dieser Text wird für den Benutzer sichtbar und sieht aus wie normaler Text, auf den Sie klicken können, um zu einer anderen Seite zu wechseln, zum Beispiel:
Auch Links zu anderen Seiten können mit CSS gestaltet werden, indem Stile mit dem style-Attribut oder den CSS-Klassen und -IDs hinzugefügt werden.
Erstellen eines Links zu einem externen Dokument
Das Erstellen eines Links zu einem externen Dokument in einem HTML-Dokument kann leicht mit einem Tag erfolgen . Mit diesem Tag können Sie einen Hyperlink erstellen, der angeklickt werden kann, um zu einer anderen Webseite oder einem anderen Dokument zu gelangen.
Um einen Link zu einem externen Dokument zu erstellen, müssen Sie ein href-Attribut mit der Adresse (URL) des Dokuments angeben, auf das Sie verweisen möchten.
Wenn Sie im obigen Beispiel auf den Text "Externer Dokumenttitel" klicken, wird der Benutzer an das externe Dokument mit der URL weitergeleitet "https://www.example.com/document.pdf ".
Sie können auch ein target-Attribut hinzufügen, um zu steuern, wie ein externes Dokument geöffnet wird. Wenn Sie beispielsweise den Wert des Attributs target="_blank" angeben, können Sie den Browser anweisen, das Dokument in einem neuen Tab oder Fenster zu öffnen.
In diesem Beispiel wird das Dokument in einem neuen Tab oder Browserfenster geöffnet, wenn Sie auf den Text "Externer Dokumenttitel" klicken.
Daher ist es einfach, einen Verweis auf ein externes Dokument in HTML zu erstellen. Die Verwendung eines Tags mit den Attributen href und target macht es einfach, Links zu anderen Dokumenten zu erstellen.
Einen Anker-Link erstellen
Mit Links in HTML können Sie Übergänge zwischen verschiedenen Webseiten oder Abschnitten auf derselben Seite erstellen. Um einem Verweis einen Anker hinzuzufügen, müssen Sie das href-Attribut mit der Anker-ID verwenden.
Beispiel für das Erstellen eines Anker-Links:
| Kode | Die Beschreibung |
|---|---|
| Gehe zu Abschnitt 1 | Erstellt einen Verweis, der zu einem Abschnitt mit der ID "section1" führt. |
Um einen Anker zu erstellen, müssen Sie dem Element, zu dem Sie einen Bildlauf durchführen möchten, eine ID zuweisen und diese ID dann im href-Attribut verwenden, um einen Anker-Link zu erstellen.
Beispiel für die Verwendung eines Anker-Links:
| Kode | Die Beschreibung |
|---|---|
Abschnitt 1 | Legt die ID "section1" für den Kapiteltitel fest. |
| Gehe zu Abschnitt 1 | Erstellt einen Link, der den Benutzer mit der ID "section1" zu einem Abschnitt führt. |
Wenn ein Benutzer auf einen Anker-Link klickt, wird die Seite automatisch zu dem angegebenen Abschnitt oder Element auf der Seite gescrollt.
Auf diese Weise können Sie durch das Erstellen eines Anker-Links bequem durch lange Seiten navigieren oder Links erstellen, um schnell zu bestimmten Abschnitten zu navigieren.
Erstellen eines E-Mail-Links
Um in HTML einen Link zu einer E-Mail zu erstellen, verwenden wir anstelle der normalen URL ein spezielles Schema "mailto:". Dadurch wird der Link aktiv, und wenn Sie darauf klicken, wird der E-Mail-Client geöffnet, indem Sie die Adresse des Empfängers vorab eingeben. Um einen Link zu einer E-Mail zu erstellen, verwenden Sie das Tag "a" mit dem Attribut "href" und geben die Adresse im Format "mailto:адрес_почты ".
Wenn ein Benutzer auf einen solchen Link klickt, öffnet sich ein E-Mail-Client und fordert Sie auf, eine E-Mail an die angegebene Adresse zu senden.
Sie können auch Text oder ein Bild innerhalb eines Links hinzufügen, um es für den Benutzer informativer zu machen. Zum Beispiel:
Im ersten Fall wird ein Link mit dem Text "An unser Vertriebsteam schreiben" erstellt, im zweiten Fall wird ein Link mit dem Bild des Postfachs erstellt.
Jetzt wissen Sie, wie Sie einen E-Mail-Link in HTML erstellen.
Hinzufügen eines Bildlinks
Um einen Link zu einem Bild hinzuzufügen, muss ein Tag eingefügt werden (engl. image) innerhalb des Tags , indem der Pfad zum Bild im src- Attribut angegeben wird.
Anstelle von Pfad zu Seite müssen Sie die URL der Seite angeben, zu der Sie beim Klicken auf das Bild navigieren möchten, und anstelle von Pfad zu Bild den Pfad zu dem Bild angeben, das angezeigt werden soll.
Das alt-Attribut wird verwendet, um alternativen Text anzugeben, der angezeigt wird, wenn ein Bild nicht geladen werden kann oder wenn Benutzer Bildschirmleseprogramme verwenden.
<а href="https://www.example.com">
Wenn Sie diese Schritte ausführen, wird ein Link zum Bild erstellt, der es dem Benutzer ermöglicht, auf die angegebene Seite zu gelangen, wenn Sie auf das Bild klicken.
