HTML Text Links



Eine Webseite kann verschiedene Links, die Sie direkt zu anderen Seiten und sogar bestimmte Teile einer bestimmten Seite enthalten. Diese Links werden als Hyperlinks bekannt.

Hyperlinks können die Besucher zwischen Web-Sites, indem Sie auf Wörter, Sätze und Bilder zu navigieren. So können Sie Hyperlinks mit Text oder Bilder auf einer Webseite zu erstellen

Hinweis: Ich empfehle, durch ein kurzes Tutorial auf Understanding URL

Verknüpfung von Belegen

Ein Link wird mit HTML-Tag angegeben <a>. Dieser Tag wird als namens anchor tag und alles, was zwischen der Öffnung<a> Tag wird Teil der Link und ein Benutzer kann diesen Teil klicken, um zum verknüpften Dokument zu erreichen. Folgende ist die einfache Syntax zu bedienen <a> tag.

<a href="Document URL" ... attributes-list>Link Text</a>

Example

Let's try following example which links https://www.tutorialspoint.com at your page:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialspoint.com" target="_self">Tutorials Point</a>
</body>
</html>

Dies wird folgendes Ergebnis, in dem Sie auf den generierten Link klicken können, produzieren Tutorials Point , um zur Startseite des Tutorials Punkt zu erreichen.

Click following link

Tutorials Point

Das TARGET-Attribut

Wir haben verwendet Ziel -Attribut in unserem vorherigen Beispiel. Dieses Attribut wird verwendet, um den Ort, an dem verlinkten Dokument geöffnet angeben. Im Folgenden sind mögliche Optionen:

OptionBeschreibung
_blanköffnet das verknüpfte Dokument in einem neuen Fenster oder Tab.
_self öffnet das verknüpfte Dokument im selben Rahmen.
_parentöffnet das verknüpfte Dokument im übergeordneten Rahmen.
_topöffnet das verknüpfte Dokument in den gesamten Körper aus dem Fenster.
targetframeöffnet das verknüpfte Dokument in eine benannte targetframe.

Beispiel

Versuchen Sie folgendes Beispiel, um grundlegende Unterschied in der einige Optionen für Zielattribut gegeben zu verstehen.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

Dies wird folgendes Ergebnis, wo man auf verschiedenen Links klicken, um den Unterschied zwischen verschiedenen Optionen für die Zielattribut angegeben verstehen zu produzieren.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Nutzung der Basispfad

Wenn Sie HTML-Dokumente auf dieselbe Website zugehörigen Link, ist es nicht erforderlich, eine vollständige URL für jeden Link zu geben. Sie können es loswerden, wenn Sie & lt zu verwenden; Basis & gt; -Tag im HTML-Dokument-Header. Dieser Tag wird verwendet, um einen Basispfad für alle Links zu geben. So wird Ihr Browser gegeben concatenate relativen Pfad zu diesem Basispfad und wird eine vollständige URL zu machen.

Beispiel

Das folgende Beispiel nutzt & lt; Basis & gt; Tag, um Basis-URL angeben, und später können wir relativen Pfad zu allen Links anstatt komplette URL für jeden Link zu verwenden.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

Dies wird folgendes Ergebnis, in dem Sie auf den generierten Link HTML klicken produzieren Tutorial , um die HTML-Tutorial zu erreichen.

Jetzt angegebenen URL <a href="/html/index.htm" wird betrachtet als <a href="https://www.tutorialspoint.com/html/index.htm".

Click following link

HTML Tutorial

Verknüpfen mit einer Seite Abschnitt

Sie können einen Link zu einem bestimmten Abschnitt einer bestimmten Webseite erstellen, indem Sie name attribute. Dies ist ein zweistufiger Prozess.

Erstellen Sie zunächst eine Verbindung zu dem Ort, wo Sie mit in eine Webseite und nennen Sie es mit erreichen wollen, <a...> Tag wie folgt:

<h1>HTML Text Links <a name="top"></a></h1>

Der zweite Schritt ist es, einen Link, um das Dokument und den Ort, wo Sie erreichen wollen, miteinander verbunden werden:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

Das wird folgenden Link, wo Sie auf der generierten Link klicken können, produzieren nach oben , um an die Spitze des HTML-Text Link Tutorial zu erreichen.

Gehe

Einstellen von Link-Farben

Sie können die Farben Ihrer Links, aktive Links und besuchte Links mit Link , alink und gesetzt vlink Attribute & lt; Körper & gt; -Tag.

Beispiel

Die folgenden in test.htm Speichern und öffnen Sie sie in einem beliebigen Web-Browser, wie Link , alink und vlink -Attribute der Arbeit zu sehen.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>

Das wird folgende Ergebnis. Wählen Sie einfach die Farbe des Link, bevor Sie auf es, neben prüfen Sie die Farbe, wenn Sie es zu aktivieren, und wenn die Verbindung wurde besucht.

Click following link

HTML Tutorial

Download Links

Sie können Text-Link erstellen, um Ihre PDF, DOC oder ZIP Dateien zum Download oder zu machen. Dies ist sehr einfach, man muss nur die vollständige URL der Datei herunterladbare geben wie folgt:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>

Das wird folgenden Link erzeugen und wird verwendet, um eine Datei herunterzuladen.

File Download Dialog Box

Manchmal ist es erwünscht, dass Sie, um eine Option, wo ein Benutzer auf einen Link klicken geben wollen, und es wird dem Benutzer in der Stelle der Anzeige eigentlichen Inhalt öffnet sich ein "File Download"-Box. Dies ist sehr einfach und kann über einen HTTP-Header in Ihrer HTTP-Antwort erreicht werden.

Zum Beispiel, wenn Sie wollen, machen ein Filename -Datei herunterladbar von einem bestimmten Link dann seine Syntax ist wie folgt.

#!/usr/bin/perl

# Addtional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Hinweis: Für weitere Einzelheiten über Perl-CGI-Programme, gehen durch Tutorial PERL und CGI.

Advertisements