HTML-Hyperlinks im Detail erklärt

HTML-Hyperlinks im Detail erklärt
Hyperlink

Hyperlinks sind die am häufigsten verwendeten HTML-Elemente auf Webseiten, da alle Seiten einer Website durch Hyperlinks miteinander verbunden sind und so das Springen zwischen den Seiten ermöglichen. Hyperlinks sind das wichtigste Mittel zur Interaktion zwischen Browsern und Servern und wir werden sie in den folgenden Technologien schrittweise vertiefen.

— Hinweis: Bilder können auch als Links verwendet werden. Darauf wird im nächsten Kapitel „Bilder auf Webseiten“ näher eingegangen.

4.5.1 Hinzufügen von Links zu Text

Das Tag für einen Hyperlink ist <a></a>. Das Hinzufügen eines Hyperlinks zu Text ähnelt anderen dekorativen Tags. Der Text hat nach dem Hinzufügen eines Links einen eigenen speziellen Stil, um ihn von anderem Text zu unterscheiden. Der Standard-Linkstil ist blauer Text mit Unterstreichung. Ein Hyperlink springt zu einer anderen Seite. Das Tag <a></a> hat ein href-Attribut, das für die Angabe der Adresse der neuen Seite verantwortlich ist. Die durch href angegebene Adresse verwendet im Allgemeinen eine relative Adresse.

— Hinweis: Bei der Website-Entwicklung werden häufiger dokumentrelative Adressen verwendet.

Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie a.htm und schreiben Sie den Code wie in Code 4.18 gezeigt.

Code 4.18 Hyperlink-Einstellungen: a.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="ul_ol.htm">Gehen Sie zur Seite mit den Listeneinstellungen</a>

</font>

</body>

</html>

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.19 angezeigt.

Abbildung 4.19 Hyperlink-Einstellungen

Leser können den Standardstil von Hyperlinks in Abbildung 4.19 sehen. Wenn Sie auf der Seite auf einen Link klicken, springt die Seite zur Seite ul_ol.htm im selben Verzeichnis, die im vorherigen Abschnitt die Listeneinstellungsseite war. Wenn Sie im Browser auf die Schaltfläche „Zurück“ klicken und zur Seite a.htm zurückkehren, ändert sich die Farbe des Textlinks in Lila, um dem Betrachter anzuzeigen, dass dieser Link besucht wurde.

4.5.2 Ändern Sie die Fensteröffnungsmethode des Links

Standardmäßig überschreiben sich Hyperlinks, die neue Seiten öffnen, selbst. Abhängig von den unterschiedlichen Anforderungen des Browsers können Leser andere Möglichkeiten zum Öffnen neuer Fenster für Hyperlinks angeben. Das Hyperlink-Tag bietet ein Zielattribut zum Festlegen mit den Werten _self (Selbstabdeckung, Standard), _blank (neues Fenster zum Öffnen einer neuen Seite erstellen), _top (im gesamten Browserfenster öffnen, alle Rahmenstrukturen ignorieren) und _parent (im Fenster der obersten Ebene öffnen).

— Hinweis: Für Frame-Seiten werden die Methoden _top und _parent verwendet, die in den folgenden Kapiteln ausführlich erläutert werden.

4.5.3 Hinweistext zu Links hinzufügen

In vielen Fällen reicht der Text eines Hyperlinks nicht aus, um den Inhalt des Links zu beschreiben. Das Hyperlink-Tag bietet ein Titelattribut, das dem Betrachter leicht einen Hinweis geben kann. Der Wert des Titelattributs ist der Eingabeaufforderungsinhalt. Wenn der Cursor des Betrachters auf dem Hyperlink bleibt, wird der Eingabeaufforderungsinhalt angezeigt, was die Übersichtlichkeit des Seitenlayouts nicht beeinträchtigt. Ändern Sie die Webseitendatei a.htm und schreiben Sie den Code wie in Code 4.19 gezeigt.

Code 4.19 Hyperlink-Einstellungen: a.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="ul_ol.htm" target="_blank" title="Hallo Leser, Sie sehen jetzt den Eingabeaufforderungstext. Klicken Sie auf diesen Link, um ein neues Fenster zu öffnen und zur Seite ul_ol.htm zu springen.">Gehen Sie zur Seite mit den Listeneinstellungen</a>

</font>

</body>

</html>

Geben Sie http://localhost/a.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.20 angezeigt.

Abbildung 4.20 Eingabeaufforderungstext für Hyperlinks

4.5.4 Was ist ein Anker?

Viele Webartikel haben sehr viel Inhalt, wodurch die Seite sehr lang wird. Die Betrachter müssen die Bildlaufleiste des Browsers ständig ziehen, um den gewünschten Inhalt zu finden. Die Ankerfunktion des Hyperlinks kann dieses Problem lösen. Der Anker wird vom Anker des Schiffes abgeleitet. Nachdem der Anker geworfen wurde, wird das Schiff nicht so leicht abdriften oder verloren gehen. Tatsächlich werden Anker verwendet, um zu verschiedenen Stellen innerhalb einer einzelnen Seite zu springen, und einige Stellen werden als Lesezeichen bezeichnet.

Das Name-Attribut des Hyperlink-Tags wird verwendet, um den Namen des Ankers zu definieren. Eine Seite kann mehrere Anker definieren. Das href-Attribut des Hyperlinks kann entsprechend dem Namen zum entsprechenden Anker springen. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie a_anchor.htm und schreiben Sie den Code wie in Code 4.20 gezeigt.

Listing 4.20 Hyperlink-Anker: a_anchor.htm

<html>

<Kopf>

<title>Hyperlink-Einstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a name="top">Dies ist der obere Anker</a><br />

<a href="#1">Nr. 1</a><br />

<a href="#2">Nr. 2</a><br />

<a href="#3">Der Dritte</a><br />

<a href="#4">Der 4.</a><br />

<a href="#5">Der 5.</a><br />

<a href="#6">Der 6.</a><br />

<h2>US-Präsidenten</h2>

●1. (1789-1797) <a name="1">Hier ist der 1. Anker</a><br />

Name: George Washington<br />

George Washington<br />

Geboren: 1732-1799<br />

Politische Partei: Föderal<br />

●Der 2. (1797-1801)<a name="2">Hier ist der 2. Anker</a><br />

Name: John Adams<br />

John Adams<br />

Geboren: 1735-1826<br />

Politische Partei: Föderal<br />

●Der 3. (1801-1809) <a name="3">Hier ist der 3. Anker</a><br />

Name: Thomas Jefferson<br />

Thomas Jefferson<br />

Geboren: 1743-1826<br />

Politische Partei: Demokratische Fortschrittspartei<br />

●Der 4. (1809-1817) <a name="4">Hier ist der 4. Anker</a><br />

Name: James Madison<br />

Michael B.<br />

Geboren: 1751-1836<br />

Politische Partei: Demokratische Fortschrittspartei<br />

●Der 5. (1817-1825) <a name="5">Hier ist der 5. Anker</a><br />

Name: James Monroe<br />

James Monroe<br />

Geboren: 1758-1831<br />

Politische Partei: Demokratische Fortschrittspartei<br />

</font>

</body>

</html>l>

Vor dem Testen können die Leser in Code 4.20 sehen, dass der Anker auch mit dem Tag <a></a> definiert ist und der Name des Ankers mit dem Namensattribut definiert ist (der Name ist nicht begrenzt und kann angepasst werden). Um einen Ankerlink zu finden, geben Sie mit dem href-Attribut den entsprechenden Namen an und fügen Sie vor dem Namen ein #-Symbol hinzu. Geben Sie http://localhost/a_anchor.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.21 angezeigt.

Abbildung 4.21 Hyperlink-Anker

Wenn der Betrachter auf den Hyperlink klickt, wird die Seite automatisch zur Ankerposition des href-Attributwertnamens gescrollt.

— Hinweis: Das Tag <a name=""></a>, das den Anker definiert, benötigt nicht zwingend einen konkreten Inhalt, es dient lediglich der Positionierung.

4.5.5 E-Mail-, FTP- und Telnet-Links

Hyperlinks können die Funktionalität von Webseiten zusätzlich erweitern. Häufig verwendete Links sind E-Mail-, FTP- und Telnet-Verbindungen. Um die oben genannten Funktionen auszuführen, müssen Sie nur den href-Wert des Hyperlinks ändern. Das Format zum Senden einer E-Mail ist:

<a href = "mailto:E-Mail-Adresse">Senden Sie mir eine E-Mail</a>

Die E-Mail-Adresse muss vollständig sein, beispielsweise [email protected].

Wie bereits erwähnt, wird beim Surfen im Internet das HTTP-Protokoll verwendet, während der FTP-Server für die Verbindung das FTP-Protokoll verwendet. Das Linkformat ist wie folgt:

<a href = "ftp://Server-IP-Adresse oder Domänenname">Linktext</a>

Der Unterschied zwischen FTP-Server-Links und Webseiten-Links besteht in den unterschiedlichen verwendeten Protokollen. Für FTP ist die Anmeldeberechtigung des Serveradministrators erforderlich. Auf einige FTP-Server kann jedoch anonym zugegriffen werden, sodass auf einige öffentliche Dateien zugegriffen werden kann. Auch bei der Verbindung mit einem Server über das Telnet-Protokoll wird eine ähnliche Methode verwendet. Das Format ist wie folgt:

<a href = "telnet://Server-IP-Adresse oder Domänenname">Linktext</a>

Das Telnet-Protokoll wird selten verwendet, meistens wird das http-Protokoll verwendet. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie mail.htm und schreiben Sie den Code wie in Code 4.21 gezeigt.

Listing 4.21 Weitere Einstellungen für den Hyperlink: mail.htm

<html>

<Kopf>

<title>Weitere Einstellungen für Hyperlinks</title>

</Kopf>

<Text>

<Schriftgröße="5">

<a href="mailto:[email protected]" title="Hallo Leser, klicken Sie hier, um eine E-Mail zu senden.">Senden Sie mir eine E-Mail</a><br />

<a href="ftp://101.22.25.11" title="Hallo Leser, willkommen auf dem FTP-Server.">Mit dem FTP-Server verbinden</a><br />

<a href="telnet://101.22.25.11" title="Hallo Leser, willkommen beim Telnet-Server.">Stellen Sie eine Verbindung zum Telnet-Server her</a>

</font>

</body>

</html>s

Geben Sie http://localhost/mail.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.22 angezeigt.

Abbildung 4.22 Weitere Einstellungen für Hyperlinks

<<:  So unterscheiden Sie MySQLs innodb_flush_log_at_trx_commit und sync_binlog

>>:  Beispielcode zum Implementieren der unteren Ausrichtung auf verschiedene Arten mit CSS

Artikel empfehlen

Detaillierte Erklärung der Methoden und Eigenschaften von Vue

Vue-Methoden und -Eigenschaften 1. Methoden Verwe...

UDP DUP-Timeout UPD-Portstatus-Erkennungscodebeispiel

Ich habe bereits zuvor ein Beispiel geschrieben, ...

Docker installiert Redis und führt den visuellen Client für den Betrieb ein

1 Einleitung Redis ist eine leistungsstarke, auf ...

js, um einen coolen Feuerwerkseffekt zu erzielen

In diesem Artikel finden Sie den spezifischen Cod...

Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].

Dieser Artikel verwendet den Befehl crontab in de...

HTML + CSS + JS-Beispielcode zur Nachahmung des Helligkeitsanpassungseffekts von Win10

HTML + CSS + JS imitieren den Helligkeitsanpassun...

Detaillierte Erklärung der Angular-Komponentenprojektion

Inhaltsverzeichnis Überblick 1. Einfaches Beispie...

So legen Sie das Root-Passwort des Benutzers und die Remote-Verbindungsmethode für die Alibaba Cloud ECS-Instanz fest

Nach dem Kauf eines Alibaba Cloud-Servers müssen ...

Zen Coding Einfaches und schnelles HTML-Schreiben

Zen-Codierung Es ist ein Texteditor-Plugin. In ei...

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Das <canvas>-Element ist für clientseitige ...

Erste Schritte mit Mysql - SQL-Ausführungsprozess

Inhaltsverzeichnis 1. Prozess 2. Kernarchitektur ...

Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit

docker-compose-monitor.yml Version: '2' N...

Analyse des Produktstatus im interaktiven Design, der im Design nicht ignoriert werden kann

Beim Produktdesign legen Designer Wert darauf, das...

VirtualBox CentOS7.7.1908 Python3.8 Build Scrapy-Entwicklungsumgebung [grafisches Tutorial]

Inhaltsverzeichnis Umfeld Installieren Sie CentOS...

Zeitzonenprobleme mit im Docker-Container bereitgestelltem Django

Inhaltsverzeichnis Zeitzonenkonfiguration in Djan...