HTML lernen Teil 15: Tutorial So erstellen Sie Links in HTML

Sie kennen sich sicherlich schon ausder Begriff "Link", weil Sie auf verschiedenen Websites Links in Form von Text oder Bildern finden können. Die Frage ist, wie man einen Link in einem HTML-Dokument erstellt. Um diese Frage zu beantworten, werde ich in diesem Artikel erklären, wie ein Link zu einem HTML-Dokument eingefügt wird und andere Fragen im Zusammenhang mit dem Link.

Der Link wird als Link zwischen einem verwendeteine Seite mit einer anderen Seite. Genauer gesagt besteht die Verwendung von Links in HTML darin, das HTML-Dokument mit einer anderen Seite zu verknüpfen, die die Zieladresse ist. Link ist ein Text oder ein Bild, das einer bestimmten Adresse zugeordnet ist. Um das Material "Link" besser zu verstehen, beachten Sie die folgende Erklärung:

a. Verwendung des <a> -Tags

Die Verwendung von Links in HTML-Dokumenten wird durch angezeigtdie Verwendung von Ankerelementen, nämlich gepaarten Tags <a> …… </a>. In Browsern werden Links im Allgemeinen mit blauem Text markiert, der unterstrichen ist. Wenn Sie auf einen Text oder ein Bild klicken, das einen Link enthält, wird der Pfad des Links entweder auf der Registerkarte selbst oder auf einer neuen Registerkarte geöffnet. Die im <a> -Tag enthaltenen Attribute lauten wie folgt:

Attribut	Funktion
href	Gibt den Speicherort des Zieldokuments an
id	Verknüpfen Sie Stylesheets (CSS) oder markieren Sie Positionen auf einer Seite
hreflang	Zeigt die verwendete Sprache an
Typ	Machen Sie sich Notizen zum Inhaltstyp des Zieldokuments
Schienen	Beschreiben Sie die Beziehung des aktuellen Dokuments zum Zieldokument
rev	Beschreiben Sie die Beziehung zwischen dem Zieldokument und dem Originaldokument
Zeichensatz	Gibt den Charakter der Webdokumentcodierung an
Titel	Gibt den Titel eines Links in der QuickInfo an

Hier ist ein einfaches Beispiel für die Verwendung von Links in HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>

Nachdem Sie den obigen HTML-Code im Browser ausgeführt haben, wird er wie folgt angezeigt:

b. ID-Attribut

Das href-Attribut im <a> -Tag wird für verwendetDeklarieren Sie eine Zieldatei. Dem HTML-Zielpfad innerhalb des <a> -Tags kann mithilfe des ID-Attributs gefolgt werden, mit dem der Leser zu einem bestimmten Teil des Dokuments geführt wird.

Versuchen Sie zum besseren Verständnis, "#about" in das href-Attribut des Links und das id = "about" -Attribut in das <p> -Tag zu schreiben. Beispiele für das Schreiben von Code finden Sie unten:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>

Die Ergebnisse im Browser sehen folgendermaßen aus:

Ich habe absichtlich viele Tags für verwendeterleichtert Ihnen das Verständnis der Funktion dieses Attributs. Wenn Sie auf den Link "Info" klicken, werden Sie sofort zu diesem Teil des Satzes "Nesabamedia.com handelt von Computer-Tutorials ... ..." weitergeleitet.

c. Titelattribut

Wenn Sie das title-Attribut verwenden,Dann wird der Inhalt des Titels als Tooltip angezeigt, der angezeigt wird, wenn Sie den Mauszeiger über den Link bewegen. Hier ist ein Beispiel für das Schreiben in HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>

Nachdem Sie den obigen Code ausgeführt haben, wird ein Bildschirm wie der folgende angezeigt, wenn Sie den Mauszeiger über den Biografie-Link bewegen:

d. Unterschiede bei externen und lokalen Links

Externe Links werden zum Öffnen von Webseiten verwendetSie befinden sich auf einer anderen Website (einer anderen Domain) und schreiben normalerweise die vollständige Zielpfadadresse in den Abschnitt "http: //". Hier ist ein Beispiel für das Schreiben und Verwenden in HTML:

<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>

Nachdem der HTML-Code im Browser ausgeführt wurde, sieht er wie folgt aus:

Im Gegensatz zu dem lokalen Link, der zum Öffnen einer Webseite auf derselben Website oder demselben Dokumentstamm verwendet wird. Zum Beispiel Ihre Website-Adresse www.nesabamedia.com und auf der Website gibt es eine Seite mit dem Namen belajarpiano.html. Wenn Sie einen Link zu dieser Seite erstellen möchten, müssen Sie nicht die vollständige URL wie schreiben www.nesabamedia.com/belajarpiano.html Schreiben Sie einfach in das href-Attribut belajarpiano.html nur. Beispiele für das Schreiben wie folgt:

<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>

Ein anderes Beispiel wie dieses, nehmen wir an, wir haben einen Ordner namens Lerne HTML. In dem Ordner befinden sich 2 HTML-Dateien und 2 Ordner, von denen jeder 1 HTML-Datei enthält. Die Ordnerstruktur sieht folgendermaßen aus:

Also los, sagen wir einfach, ich bin geradeBearbeiten Sie die Datei mit dem Namen webku.html und ich möchte einen Link erstellen, der zur Seite meiner story.html führt. Daher muss ich nur den HTML-Code wie folgt schreiben:

<a href="cinta/kisahku.html">

Angenommen, ich bearbeite noch meine Datei web.html, aber dieses Mal möchte ich einen Link erstellen, der auf meine Karriereseite.html verweist. Der HTML-Code sieht folgendermaßen aus:

<a href="bisnis/karirku.html">

Ich bearbeite immer noch meine web.html-Datei. Wenn ich einen Link erstellen möchte, der auf die Seite post.html verweist, sieht der HTML-Code folgendermaßen aus:

<a href="posting.html">

Wenn Sie lokale Links verwenden, müssen Sie die Adresse der Seite, zu der Sie gehen möchten, nicht vollständig eingeben.

Bilder als Links machen

Es gibt Zeiten, in denen wir ein Bild als machen wollenLinks für bestimmte Anforderungen, z. B. das Erstellen einer Schaltfläche, die zu einer anderen Seite führt, auf der die Schaltfläche tatsächlich aus Bildern besteht. Beispiele für HTML-Code finden Sie unten:

<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>

Nachdem Sie den obigen HTML-Code im Browser ausgeführt haben, sieht er wie folgt aus:

Wenn Sie auf das Schaltflächenbild klicken, werden Sieauf die Seite post.html umgeleitet. Oh ja, zum Schreiben von <img scr = "Bildadresse" ... Stellen Sie sicher, dass es korrekt ist. Wenn es falsch ist, wird das Bild nicht angezeigt. Im obigen HTML-Code Datei tombol.jpg Ich habe es in einen Ordner mit der HTML-Datei gelegt, also habe ich gerade <img src = "button.jpg" geschrieben ... Es ist nicht erforderlich, die vollständige Adresse der Bilddatei zu schreiben. Und für die HTML-Datei habe ich es benannt gambar.html während die Bilddatei, die ich benannt habe die Taste.

Wenn Sie das zuvor diskutierte Konzept lokaler Links verstehen, werden Sie bei diesem Schritt nicht verwirrt sein.

d. Zielattribut auf dem Link

Das Zielattribut wird verwendet, um oder anzugebenGeben Sie an, wie ein Zielpfad angezeigt wird, nachdem auf den Link geklickt wurde, um festzustellen, ob er in der aktuellen Registerkarte / im aktuellen Fenster oder in einer neuen Registerkarte / im neuen Fenster geöffnet wurde. Die folgenden Werte in den Zielattributen können verwendet werden:

Attribut	Funktion
_ leer	Öffnen Sie die Zielwebseite in einem neuen Tab oder Fenster
_selbst	Öffnen Sie die Zielwebseite auf der aktuellen Registerkarte oder im aktuellen Fenster (Standard).
Eltern	Öffnen Sie die Zielwebseite im übergeordneten Frame
_top	Öffnet die Zielwebseite in der geöffneten Registerkarte oder im geöffneten Fenster und bricht alle Frames ab

Denken Sie daran, dass Sie in HTML5 "_parent" verwenden.und "_top" ist veraltet, da die Website jetzt nicht mehr auf Frames oder Framesets basiert. Außerdem werden diese beiden Attribute selten verwendet. Wenn Sie im Link kein Zielattribut angeben, wird die Zielwebseite standardmäßig auf der aktuell geöffneten Registerkarte oder im aktuell geöffneten Fenster ("_self") geöffnet.

Hier ist ein Beispiel für das Schreiben von Code und die Verwendung des Attributs target = "_ blank" in HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>

Nachdem Sie den obigen Code im Browser ausgeführt haben, wird er wie folgt angezeigt:

Das ist das Tutorial, wie man einen Link in HTML zusammen erstellteine Erläuterung der Tags und Attribute, die mit Links in HTML verknüpft sind. Das nächste Material, das Sie lernen müssen, ist das Hinzufügen von Bildern in HTML.

</ p>

Lesen Sie mehr: