JAKARTA, virenial.com – Hyperlink yang dikenal dengan link adalah link yang menghubungkan antara satu dokumen dengan dokumen lain di HTML.
Tujuan dari Hyperlink adalah membuat sebuah teks atau gambar yang saat ditekan akan mengarahkan anda ke halaman tertentu yang sudah di tetapkan dalam penulisan Hyperlink tersebut.
Hyperlink sendiri ditulis menggunakan <a> atau yang dikenal dengan anchor (jangkar).
<a> ini selalu diikuti oleh atribut href, yang dimana didalam href (Hypertext reference) ini akan diisikan alamat yan dituju saat teks atau gambar ditekan.
Link atau Hyperlink termasuk elemen HTML yang berfungsi untuk menghubungkan antara halaman web dengan wesite yang lain.
Tidak hanya itu, link ini juga berfungsi sebagai Scroll Top, Download File dan menjalankan fungsi javascript dan lainnya.
Nah, pada kesempatan ini kami akan membahas lebih jauh tentang cara membuat Hyperlink di HTML, jadi lanjutkan membaca anda sampai artikel ini habis.
Cara Membuat Hyperlink di HTML
Cara membuat Hyperlink di HTML bisa dibuat menggunakan tag <a> dan tag ini harus mempunyai atribut “href” untuk menentukan alamat URL tujuan dari link.
Berikut bentuk sederhananya:
<a href=”http://petanikode.com/”>petani kode</a>
- <a: Tag untuk membuat link.
- href: Atribut untuk menentukan alamat URL tujuan dari link.
- Petanikode: Alamat URL tujuan yang akan dibuka ketika link ditekan.
- Petani: Teks label untuk link
- /: Tag penutup
Contoh: “link.html”
Hasilnya: Link akan ditampilkan dengan warna biru dan garis bawah, itu adalah Style standar dari setiap browser.
Tentu itu bisa dirubah sesuai dengan selera, anda bisa coba klik link tersebut.
Apakah tampilannya error?
Link yang anda buat tersebut akan membuka halaman “About.html” namun file tersebut belum anda buat atau belum ada. Itulah penyebabnya error.
Untuk mengatasi hal tersebut, anda harus membuka file “about.html” dan disimpan dalam satu folder dengan nama file “link.html”.
Silahkan isi file “about.html” seperti berikut ini:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Tutorial Link di HTML</title></head>
<body>
<h1>About us</h1>
<p>
Ini adalah website yang dibuat dengan link.
Anda bisa membuka halaman dengan mudah dan tinggal klik-klik saja!
</p>
<p>
<a href=”link.html”>Kembali ke halaman link</a>
</p>
</body>
</html>
Sekarang anda bisa mencobanya lagi, yaitu mengklik link yang berwarna biru dan digaris bawahi.
Bagaimana, “link.html” dan “about.html” sudah berhasil terhubung bukan? Namun mengapa alamat URL pada artibut “href” masih ditulis dengan nama file?
<a href=”about.html”>About us</a>
Seharusnya menggunakan alamat URL yang lengkap menggunakan “http” dan lanjutannya?
Itu karena link yang anda buat adalah internal link dan juga file “about.html” masih dalam satu folder dengan file “link.html”.
Jadi, anda bisa menuliskan langsung nama filenya tanpa perlu lengkap dengan “http”.
Untuk lebih jelasnya, silahkan simak informasi dibawah ini untuk mengenal jenis-jenis link dalam HTML.
Jenis-Jenis Link di HTML
Berdasarkan alamat URL yang dituju, link di HTML dibagi menjadi dua kelompok, yaitu Internal link dan Eksternal link.
Internal Link adalah link yang menuju ke domain atau halaman web itu sendiri.
External Link merupakan link yang menuju domain lain.
Biasanya Internal link dipakai untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain.
Sedangkan untuk External link dipakai untuk membuka web domain lain seperti membuka halaman Facebook, membuka Chat WhatsApp, membuka Youtube dan lainnya.
Intinya, selama link itu membuka website lain, maka itu adalah External dan jika tetap membuka web itu sendiri itu adalah Internal.
A. Contoh Internal Link
Buatlah file baru bernama “index.html” dan isi menggunakan kode berikut:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>
<a href=”index.html” >Home</a> |
<a href=”contact.html” >Contact</a> |
<a href=”about.html” >About</a>
</p>
<hr>
<p>
Selamat datang, coba klik menu di atas anda akan membuka halaman yang berbeda, semua
link di atas adalah internal link.</p>
<hr>
<div>Copyright © 2020 by Petani Kode</div>
</body>
</html>
Selanjutnya buat lagi file baru bernama “contact.html” dengan memasukkan kode berikut:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<h1>Contact</h1><p>
<a href=”index.html” >Home</a> |
<a href=”contact.html” >Contact</a> |
<a href=”about.html” >About</a>
</p>
<hr>
<p>
</p>
<hr>
<div>Copyright © 2020 by Petani Kode</div>
</body>
</html>
Terakhir, buat file “about.html” dengen mengisi kode berikut:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Tutorial Link di HTML</title>
</head>
<body>
<h1>About</h1>
<p>
<a href=”index.html” >Home</a> |<a href=”contact.html” >Contact</a> |
<a href=”about.html” >About</a>
</p>
<hr>
<p>
Ini adalah halaman about dari website, jadi ini adalah contoh cara membuat link internal di HTML. </p>
<hr>
<div>Copyright © 2020 by Petani Kode</div>
</body>
</html>
Pastikan semua file tersebut tersimpan dalam satu folder, ok.
Setelah itu anda dapat coba membuka “index.html” dengan browser.
B. Contoh External Link
Cara membuat External link sebenarnya sama saja seperti internal link, hanya saja berbeda pada penempatan alamt URL yang diberikan.
Contoh external link yang menuju ke halaman Facebook
“<a href=”https://www.facebook.com/petanikode”>Facebook Patani Kode</a>“
Ketika link tersebut anda coba klik, maka anda akan diarahkan ke halaman “https://www.facebook.com/petanikode“
Nah, kira-kira seperti itulah cara membuat link di HTML yang dapat kami bagikan dan bisa anda coba terapkan.
Jika ingin mencoba membuatnya, silahkan simak dan ikuti langkah-langkah yang ada sedang benar dan sesuai, jangan sampai salah memasukkan kode.
Sebelum membuat hyperlink, pastkan anda sudah mengetahui perbedaan link internal dan external agar tidak salah dalam membuat. Sekian dan semoga bermanfaat.
