HTML - Tautan Teks
Halaman web dapat berisi berbagai link yang membawa Anda langsung ke halaman lain dan bahkan bagian tertentu dari halaman tertentu. Tautan ini dikenal sebagai hyperlink.
Hyperlink memungkinkan pengunjung untuk menavigasi di antara situs Web dengan mengklik kata, frasa, dan gambar. Dengan demikian Anda dapat membuat hyperlink menggunakan teks atau gambar yang tersedia di halaman web.
Note- Saya menyarankan Anda untuk mengikuti tutorial singkat tentang Memahami URL
Menghubungkan Dokumen
Tautan ditentukan menggunakan tag HTML <a>. Tag ini disebutanchor tagdan apa pun di antara tag pembuka <a> dan penutup </a> menjadi bagian dari tautan dan pengguna dapat mengeklik bagian itu untuk membuka dokumen tertaut. Berikut ini adalah sintaks sederhana untuk menggunakan tag <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Contoh
Mari kita coba contoh berikut yang menautkan http://www.tutorialspoint.com di halaman Anda -
<!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>Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik link yang dibuat untuk membuka halaman utama Tutorial Point (dalam contoh ini).
Atribut target
Kami telah menggunakan targetatribut dalam contoh kita sebelumnya. Atribut ini digunakan untuk menentukan lokasi di mana dokumen terkait dibuka. Berikut adalah opsi yang memungkinkan -
| Sr Tidak | Opsi & Deskripsi |
|---|---|
| 1 |
_blank Membuka dokumen terkait di jendela atau tab baru. |
| 2 |
_self Membuka dokumen terkait dalam bingkai yang sama. |
| 3 |
_parent Membuka dokumen terkait di bingkai induk. |
| 4 |
_top Membuka dokumen terkait di seluruh badan jendela. |
| 5 |
targetframe Membuka dokumen terkait dalam targetframe bernama . |
Contoh
Coba contoh berikut untuk memahami perbedaan dasar dalam beberapa opsi yang diberikan untuk atribut target.
<!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>Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik tautan yang berbeda untuk memahami perbedaan antara berbagai opsi yang diberikan untuk atribut target.
Penggunaan Jalur Basis
Saat Anda menautkan dokumen HTML yang terkait dengan situs web yang sama, Anda tidak perlu memberikan URL lengkap untuk setiap tautan. Anda bisa menyingkirkannya jika Anda menggunakan<base>tag di header dokumen HTML Anda. Tag ini digunakan untuk memberikan jalur dasar untuk semua tautan. Jadi browser Anda akan menggabungkan jalur relatif yang diberikan ke jalur dasar ini dan akan membuat URL lengkap.
Contoh
Contoh berikut menggunakan tag <base> untuk menentukan URL dasar dan nanti kita dapat menggunakan jalur relatif ke semua tautan alih-alih memberikan URL lengkap untuk setiap tautan.
<!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>Ini akan menghasilkan hasil sebagai berikut, di mana Anda dapat mengklik tautan yang dihasilkan HTML Tutorial untuk membuka tutorial HTML.
Sekarang URL yang diberikan <a href = "/html/index.htm" dianggap sebagai <ahref = "http://www.tutorialspoint.com/html/index.htm"
Menautkan ke Bagian Halaman
Anda dapat membuat link ke bagian tertentu dari halaman web tertentu dengan menggunakan nameatribut. Ini adalah proses dua langkah.
Note- Atribut name tidak digunakan lagi di HTML5. Jangan gunakan atribut ini. Gunakan atribut id dan title sebagai gantinya.
Pertama buat link ke tempat yang ingin Anda jangkau dengan-di halaman web dan beri nama menggunakan tag <a ...> sebagai berikut -
<h1>HTML Text Links <a name = "top"></a></h1>Langkah kedua adalah membuat hyperlink untuk menautkan dokumen dan tempat yang ingin Anda jangkau -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Ini akan menghasilkan tautan berikut, di mana Anda dapat mengklik tautan yang dihasilkan Go to the Top untuk mencapai bagian atas tutorial Link Teks HTML.
Go to the TopMengatur Warna Tautan
Anda dapat mengatur warna tautan Anda, tautan aktif dan tautan yang dikunjungi menggunakan link, alink dan vlink atribut dari tag <body>.
Contoh
Simpan yang berikut ini di test.htm dan buka di browser web apa pun untuk melihat caranya link, alink dan vlink atribut bekerja.
<!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>Ini akan menghasilkan hasil sebagai berikut. Cukup periksa warna tautan sebelum mengkliknya, selanjutnya periksa warnanya ketika Anda mengaktifkannya dan ketika tautan itu telah dikunjungi.
Unduh Tautan
Anda dapat membuat tautan teks agar file PDF, atau DOC atau ZIP Anda dapat diunduh. Ini sangat sederhana; Anda hanya perlu memberikan URL lengkap dari file yang dapat diunduh sebagai berikut -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Ini akan menghasilkan tautan berikut dan akan digunakan untuk mengunduh file.
Kotak Dialog Download File
Kadang-kadang diinginkan bahwa Anda ingin memberikan pilihan di mana pengguna akan mengklik link dan itu akan memunculkan kotak "File Download" kepada pengguna alih-alih menampilkan konten yang sebenarnya. Ini sangat mudah dan dapat dilakukan dengan menggunakan header HTTP dalam respons HTTP Anda.
Misalnya, jika Anda ingin membuat file Filename file yang dapat diunduh dari tautan yang diberikan maka sintaksnya adalah sebagai berikut.
#!/usr/bin/perl
# Additional 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");
}Note- Untuk detail lebih lanjut tentang program PERL CGI, lihat tutorial PERL dan CGI .