Memautkan Halaman dalam HTML

Pautan hanya ditakrifkan sebagai teks, yang boleh diklik, jadi ia membantu untuk bergerak dari satu halaman ke halaman lain apabila teks ini telah diklik. Anda memberikan pautan ke mana-mana elemen seperti halaman, imej atau tapak web untuk berpindah dari satu halaman ke halaman yang lain. Pautan HTML menggunakan tag dengan atribut href yang mempunyai laluan sebenarnya ingin melompat. Sebarang pautan yang disertakan dalam kod HTML secara lalai ditunjukkan dalam warna biru. Jika pautan ini telah dilawati oleh pengguna sebelum ini, ia akan ditunjukkan dalam warna ungu. Kita boleh menukar warna pautan ini dengan menggunakan CSS juga. Dalam topik ini, kita akan belajar tentang Memautkan Halaman dalam HTML.

Sintaks Memaut Halaman dalam HTML

Mari kita lihat bagaimana sebenarnya pemautan halaman boleh dilakukan menggunakan HTML adalah seperti berikut:

Sintaks:

<a href="url"> Text_Content </a>

Dalam sintaks di atas, teg sauh membantu mentakrif dan membuka halaman atau dokumen sasaran baharu menggunakan atribut yang ditentukan seperti pautan sasaran.

Ini betul-betul berfungsi seperti laluan fail Mutlak seperti yang kita lihat sebelum ini dalam kandungan laluan fail HTML.

Sintaks:

<a href="url"></a<strong>>

Kami juga boleh membuka halaman atau bahagian tertentu daripada tapak web dengan mentakrifkan laluan mudah kandungan tersebut menggunakan sintaks yang sama.

Jika kita perlu membuka halaman tertentu, maka ia juga boleh dilakukan dengan menggunakan laluan fail Relatif seperti

Sintaks:

<a href="page_name.html"></a>

Kami boleh melakukan satu lagi perkara yang menarik menggunakan pautan HTML kerana kami boleh membuka tetingkap penyemak imbas kosong atau membuka halaman web kami ke tetingkap baharu menggunakan sintaks.

Sintaks:

<a href="Browser's _URL" target="_blank"></a>

Jika kami ingin membuka halaman web kami dalam tetingkap induk, maka anda juga boleh menggunakan sintaks seperti berikut:

Sintaks:

<a href="path" target="_parent"> </a>

Bagaimana untuk memaut halaman menggunakan HTML?

Seperti sebelum ini, kami telah melihat cara memautkan halaman web, imej dan dokumen lain dengan menggunakan tag anchor dengan atribut href, iaitu dengan mentakrifkan kedua-dua laluan fail seperti Mutlak dan Relatif.

Kami juga biasa dengan cara menangani sasaran untuk pautan untuk melakukan fungsi seperti membuka tetingkap kosong baharu, membuka halaman web dalam tetingkap induk, membuka halaman dalam tetingkap diri seperti secara lalai kami menggunakan ini, membuka dokumen dalam tetingkap penyemak imbas penuh menggunakan atribut _top dan banyak lagi perkara.

Pautan untuk membuat penanda halaman

Mari lihat cara membuat penanda halaman sauh menggunakan pautan dalam HTML. Ciri ini berfungsi sebagai penanda halaman untuk halaman web kami; bila-bila masa kita ingin mencari sesuatu daripada data halaman yang besar, maka hanya tentukan beberapa teks atau dokumen sebagai pautan untuk melompat terus ke lokasi yang disasarkan ini.

Untuk mentakrifkan penanda halaman, kita perlu menambah id sebagai atribut kepada elemen tertentu ke tempat yang sebenarnya kita mahu lompat daripada nilainya dengan menghantar tanda dipanggil '#', yang disertakan dalam href dalam teg . Ini adalah seperti yang ditunjukkan di bawah:

Contoh:

<a href="#home"> Homepage </a>
<h4 id="home"> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>

Seseorang juga boleh terus membuka bahagian tertentu dari halaman lain hanya dengan mentakrifkan url halaman itu ke dalam tag anchor dengan atribut href; ini adalah seperti berikut:

Contoh:

<a href="Demo.html #contactus"> Contact US </a>

Pautan untuk memuat turun dokumen

Dengan bantuan pautan dalam HTML, kami juga boleh membuat pautan yang membantu kami memuat turun dokumen. Ia mempunyai perkara yang sama mentakrifkan teks sebagai pautan dan hanya menambah laluan fail destinasi sebagai URL, jadi apabila kami mengklik pautan ini, dokumen atau halaman web yang disambungkan akan dimuat turun secara automatik. Jadi kami boleh memuat turun jenis fail seperti PDF, zip, jpg, dll.

Contoh:

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

Imej sebagai Pautan HTML: Satu lagi ciri pautan HTML ialah menganggap imej sebagai pautan dalam dokumen HTML; ini boleh ditakrifkan seperti berikut:

Contoh:

<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>

Butang sebagai pautan: Seseorang boleh mentakrifkan butang sebagai pautan dalam HTML juga; tambahan, kita perlu menambah beberapa kod javascript dengannya. Jadi apabila peristiwa klik telah berlaku, ia akan membuka halaman yang dipautkan.

Contoh Memautkan Halaman dalam HTML

Berikut ialah contoh berikut yang disebut di bawah

Contoh #1

Dalam contoh ini, kami menambahkan pautan HTML ringkas kepada satu untuk tapak web dan satu lagi ialah halaman web yang disimpan secara setempat dalam sistem kami.

Kod:

<!DOCTYPE html>
<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
</body>
</html>

Output:

Untuk pautan pertama, ia akan membuka laman web

Untuk pautan kedua, ia akan membuka halaman web yang disimpan di sistem setempat

Contoh #2

Ini adalah contoh yang mengatakan bahawa kami menggunakan pautan untuk membuka halaman web dalam tab baharu apabila ia mengklik dan Imej sebagai pautan untuk membuka dokumen baharu.

Kod:

<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>

Output:

The first link to open another page in the new target window:

Image as a link to open another webpage:

Example #3

In this example, we are using Button as a link.

Code:

<!DOCTYPE html>
<html>
<body>
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
</body>
</html>

Output:

Whenever we are going to click on the button, it will work as a link to open another page:

Conclusion

Finally, linking pages in HTML can be done by using tag with a href attribute. This element is useful in various features to create a bookmark, open the document in the target blank tab, the same thing in parent tab, self tab, create the image as a link, and create a button as a link and many more others.

Atas ialah kandungan terperinci Memautkan Halaman dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!