Apa Itu Hyperlink?
Hyperlink Text atau sering disebut dengan Link merupakan sebuah teks atau gambar yang ketika kamu klik maka akan berpindah ke halaman yang berbeda atau tetap pada halaman yang sama. Jadi intinya link akan membawa kamu berpindah dari satu halaman ke halaman lain, baik itu pada halaman yang berbeda maupun tetap pada halaman yang sama.
Link memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan di dalam website yang bersangkutan. Bentuk link biasanya bewarna biru dan bergaris bawah, ketika penunjuk mouse diarahkan ke teks link tersebut, maka penunjuk mouse akan berubah menjadi gambar tangan.
Cara Membuat Link Pada HTML.
HTML menyediakan tag khusus untuk membuat link. Kamu bisa menggunakan tag berpasangan
<a> </a>
Setiap tulisan yang diapit menggunakan tag di atas, maka akan berubah menjadi link. Bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut:
<a href="nama dokumen">Text Link</a>
Tag link di atas memiliki atribut href yang berfungsi untuk menentukan halaman mana yang akan dipanggil pada saat link di klik oleh user. Berikut contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat Link Menggunakan HTML</title>
</head>
<body>
<h2>Demo Membuat Link Menggunakan HTML</h2>
<p>
Hay! Kamu lagi nyari tutorial belajar HTML? ayo cek website Mandan Koding. <br>
<a href="https://mandankoding.com/">KLIK DISINI UNTUK BELAJAR</a>
</p>
</body>
</html>
Jenis Link Pada HTML.
HTML membedakan jenis link berdasarkan jenis dokumen yang akan diakses. Berikut penjelasannya:
1. Link Absolute
Link Absolute merupakan suatu link yang alamat tujuannya ditulis secara lengkap. Biasanya link ini digunakan untuk mengarah ke halaman website lain. Contohnya kamu membuat suatu artikel yang berisi informasi mengenai cara menyimpan data ke google drive. Dari situ kamu bisa mengaitkan link halaman website google drive di dalam halaman web kamu. Bentuk umum penggunaan link absolute adalah:
<a href="http://www.drive.google.com">Website Google Drive</a>
Link di atas merupakan link absolute, alamat website tujuan ditulis secara lengkap. Berikut adalah contoh penggunaan link absolute:
Nama File: link-absolute.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Link Absolute</title>
</head>
<body>
<h2>Demo Menggunakan Link Absolute</h2>
<p>Halaman mana yang ingin kamu buka?</p>
<a href="http://www.instagram.com">Instagram</a> <br />
<a href="http://www.facebook.com">Facebook</a> <br />
<a href="http://www.mandankoding.com">Mandan Koding</a>
</body>
</html>
Kamu bisa lihat pada hasil di atas, ketika kamu klik Instagram, maka browser akan beralih halaman ke situs http://www.instagram.com. Begitu juga dengan yang lainnya.
2. Link Relatif
Berbeda dengan link absolute, pada link relative kamu tidak perlu menuliskan alamat tujuan secara lengkap menggunakan (http://www) akan tetapi cukup memanggil nama dokumennya saja. Sebagai contoh: kamu hendak membangun sebuah template untuk website impian kamu, pada bagian navbar (menu) kamu akan membuat beberapa menu seperti (beranda artikel, kontak, dan tentang saya). Pada menu tersebut kamu bisa menyisipkan link relatif. perhatihan contoh script berikut.
<a href="artikel.html">Artikel</a>
Pada link di atas, kamu cukup menuliskan nama dokumen yang bersangkutan untuk membuat link ketika ingin beralih ke halaman artikel. Begitu juga dengan menu-menu lainnya. Berikut contoh lengkap penggunaan link relatif.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Link Relatif</title>
</head>
<body>
<h1>Demo Menggunakan Link Relatif</h1>
<h2>Selamat Datang di Website Mandan Koding</h2>
<a href="beranda.html">Beranda</a>
<a href="artikel.html">Artikel</a>
<a href="kontak.html">Kontak</a>
<a href="tentang-saya.html">Tentang Saya</a>
</body>
</html>
Nama File: artikel.html
<!DOCTYPE html>
<html>
<head>
<title>Link Relatif</title>
</head>
<body>
<h1>Demo Menggunakan Link Relatif</h1>
<h2>Bagaimana Cara Membuat Link Menggunakan HTML?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Sebagai contoh, disini kita hanya membuat satu dokumen untuk menu artikel. Kamu bisa menambahkan dokumen lain sesuai dengan keinginan kamu. Silahkan simpan dua file di atas di dalam satu folder yang sama. Pertama-tama silahkan jalankan file index.html terlebih dahulu menggunakan web browser, maka hasilnya akan terlihat seperti ini
Pada hasil file index.html yang dijalankan pada web browser diatas, kamu bisa melihat berberapa menu (beranda, artikel, kontak, dan tentang saya) ketika kamu klik menu artikel, maka browser akan mengarahkan kamu ke halaman artikel.html. berikut hasilnya:
<a href="index.html">Kembali ke Halaman Utama</a>
Atribut target = “_blank”
Atribut target adalah sebuah atribut yang menentukan tempat untuk membuka dokumen yang ditautkan.
Adapun salah satu nilai dari atribut target yang sering digunakan adalah “_blank”. Atribut target berfungsi untuk membuka link di tab baru. Bentuk umum penggunaan atribut target adalah:
<a href="artikel.html" target="_blank">Artikel</a>
Link di atas ketika di klik maka akan membuka tab baru untuk beralih ke halaman yang hendak dituju, jadi halaman awal tidak akan tertimpa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atribut Target</title>
</head>
<body>
<h1>Demo Menggunakan Atribut Target/h1>
<h2>Selamat Datang di Website Mandan Koding</h2>
<a href="beranda.html" target="_blank">Beranda</a>
<a href="artikel.html" target="_blank">Artikel</a>
<a href="kontak.html" target="_blank">Kontak</a>
<a href="tentang-saya.html" target="_blank">Tentang Saya</a>
</body>
</html>
Struktur File:
Catatan: Pastikan file berada pada 1 folder.
Setelah semuanya selesai, sekarang silahkan kamu jalankan file inde.html, dan lihat hasilnya, selamat mencoba. Sekarang kamu sudah tau konsep dari Hyperlink pada HTML, semoga bermanfaat.
Selamat belajar, dan tunggu tutorial selanjutnya di mandankoding.com 🙏🎉🎉
Tinggalkan Balasan