Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar HTML 5 Bagian 12 : Cara Membuat Daftar di HTML. Selanjutnya, kita akan belajar cara membuat link di HTML.
Link atau biasa disebut dengan tautan, halaman web dapat berisi berbagai link yang membawa Anda langsung ke halaman lain atau bagian tertentu dari halaman tertentu.
Tautan ini disebut sebagai hyperlink.
Hyperlink memungkinkan pengunjung untuk melakukan navigasi diantara situs Web dengan mengklik kata, kalimat, dan gambar.
Jadi, Anda dapat membuat hyperlink menggunakan teks atau gambar yang tersedia di halaman web.
Menghubungkan Dokumen
Tautan dibuat dengan menggunakan tag HTML <a>.
Tag ini disebut tag anchor (jangkar) dan apa pun kode yang diapit di antara tag pembuka <a> dan penutup </a> menjadi bagian dari tautan, dan pengguna dapat mengeklik bagian itu untuk menjangkau dokumen yang ditautkan.
Berikut ini adalah kode sederhana penggunaan tag <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>
Contoh :
Pada contoh ini kita mencoba menautkan URL https://mbahwp.com di halaman Anda.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
</head>
<body>
<p>Klik link berikut ini </p>
<a href="https://mbahwp.com" target="_self" rel="noopener">Mbah WP </a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, dan ketika Anda mengklik link tautan yang dibuat, browser akan membukan tab baru, membawa Anda ke halaman web Mbah WP (dalam contoh ini).
Atribut target
Pada contoh di atas, kita sudah menggunakan atribut target.
Atribut ini digunakan untuk menentukan lokasi, di mana dokumen terkait dibuka.
Berikut adalah pilihan atribut target yang bisa digunakan :
| No | Pilihan & Deskripsi |
| 1 | _blank Membuka dokumen tertaut di jendela atau tab baru. |
| 2 | _self Membuka dokumen tertaut dalam jendela yang sama. |
| 3 | _parent Membuka dokumen tertaut di jendela induk. |
| 4 | _top Membuka dokumen tertaut di seluruh halaman jendela. |
| 5 | targetframe Membuka dokumen tertaut dalam targetframe yang dinamai. |
Pada contoh berikut, kita akan mencoba beberapa pilihan yang diberikan untuk atribut target.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
</head>
<body>
<p>Klik pada link berikut ini</p>
<a href="https://mbahwp.com" target="_blank" rel="noopener">Buka di tab baru </a> |
<a href="https://mbahwp.com" target="_self" rel="noopener">Buka di jendela yang sama </a> |
<a href="https://mbahwp.com" target="_parent" rel="noopener">Buka di jendela induk </a> |
<a href="https://mbahwp.com" target="_top" rel="noopener">Buka di halaman penuh</a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, ketika Anda mengklik tautan berbeda.
Penggunaan Tag Base Pada Direktori
Saat Anda menautkan dokumen HTML yang terkait dengan situs web yang sama, Anda tidak perlu memberikan URL lengkap untuk setiap tautan.
Anda dapat menghilangkan URL jika Anda menggunakan tag <base> di header dokumen HTML Anda.
Tag ini digunakan untuk memberikan alamat dasar untuk semua tautan.
Jadi, browser akan menggabungkan alamat relatif yang diberikan ke alamat dasar ini dan akan membuat URL lengkap.
Contoh berikut menggunakan tag <base> untuk menentukan URL dasar, dan nanti kita dapat menggunakan alamat relatif ke semua tautan, daripada memberikan URL lengkap untuk setiap tautan.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
<base href = "https://mbahwp.com /">
</head>
<body>
<p>Klik pada link berikut ini</p>
<a href=" /category/coding/html/ " target="_blank" rel="noopener">Kategori HTML di Mbah WP</a> |
<a href=" /category/coding/html/ " target="_self" rel="noopener">Kategori HTML di Mbah WP</a> |
<a href=" /category/coding/html/ " target="_parent" rel="noopener">Kategori HTML di Mbah WP</a> |
<a href=" /category/coding/html/ " target="_top" rel="noopener">Kategori HTML di Mbah WP</a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut, di mana Anda dapat mengklik link yang dihasilkan Tutorial HTML untuk menuju ke tutorial HTML.
Sekarang, URL <a href = “/category/coding/html/” dianggap sebagai <a href = “https://mbahwp.com/category/coding/html/”>.
Mengatur Warna Tautan
Cara ini sebenarnya sudah tidak digunakan lagi sekarang. Untuk memberikan warna pada tautan sebaiknya menggunakan CSS.
Anda dapat mengatur warna tautan, tautan aktif dan tautan yang dikunjungi menggunakan atribut link, alink dan vlink dari tag <body>.
Silahkan tuliskan kode berikut dan simpan dengan nama, lalu buka di browser web apa pun untuk melihat cara kerja atribut link, alink, dan vlink.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Klik link berikut ini </p>
<a href="https://mbahwp.com" target="_blank" rel="noopener">Mbah WP </a>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut.
Silahkan periksa warna tautan sebelum mengkliknya, selanjutnya periksa warnanya ketika Anda hendak mengklik tautan dan ketika tautan tersebut telah dikunjungi.
Tautan Unduh
Anda dapat membuat tautan teks agar file PDF, atau DOC atau ZIP dapat diunduh.
Caranya sangat mudah; Anda hanya perlu memberikan URL lengkap dari file yang dapat diunduh seperti pada contoh berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
</head>
<body>
<a href = "https://ilearn.marist.edu/access/lessonbuilder/item/172134/group/e0d1b466-ea21-433b-8926-c41f19455217/Course%20Materials/SamplePDF.pdf">Download Lorem Ipsum PDF File</a>
</body>
</html>
Kode ini akan menghasilkan tautan yang bisa digunakan untuk mengunduh file ketika tautannya diklik.
Itu dia belajar HTML tentang cara membuat link di HTML. Pada materi selanjutnya, kita akan mempelajari Tutorial Belajar HTML5 Bagian 14 : Cara Membuat Link Pada Gambar di HTML.
