Membuat Hyperlink di HTML - Belajar HTML Dasar 9, Setelah belajar tentang tag list di pertemuan sebelumnya kali ini kita akan mencoba membuat sebelum hyperlink atau dalam bahasa indonesia biasa dikenal dengan tautan yang digunakan untuk menghubungkan antar halaman html dengan menggunakan metode click. Tujuan dari pembuatan hyperlink yaitu membuat sebuah teks atau gambar yang ketika di klik akan dialihkan ke halaman tertentu sesuai dengan yang kita tetapkan.
Hyperlink ditulis dengan tag <a> dan ditutup dengan </a>. Tag <a> selalu di ikuti dengan atribut href, dimana atribut href (hypertext reference) berfungsi sebagai tempat untuk menuliskan alamat atau halaman web yang akan dituju ketika text atau gambar di klik.
Contoh Penulisan Tag Hyperlink
<a href="instagram.com">klik disini</a>
Ketika kode diatas sudah jadi dan tulisan klik disini kita click maka halaman web akan diahlikan ke halaman resmi instagram
Jenis Hyperlink pada HTML
Dalam materi hyperlink di kenal dua jenis penulisan alamat yaitu alamat absolute dan alamat alternatif. Anda mungking bingung bedanya dimana, namun saya akan coba menjelaskan perbedaan dan penggunaan jenis alamat hyperlink tersebut.1.Alamat Absolute
Alamat absolute merupakan teknik hyperlink yang penulisan alamat file nya disertai dengan halaman web, contohnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Hyperlink</title>
</head>
Ini adalah contoh hyperlink dengan teknik alamat absolute
<a href="https://www.instagram.com/abdhi/">klik disini</a>
</body>
</html>
Hasilnya sebagai berikut :
Berdasarkan contoh diatas, ketika klik disini di tekan makan hyperlink akan mengarahkan ke halaman instagram saya, contoh diatas merupakan alamat absolute karena jelas saya sedang mengakses halaman html yang berada di dalam situs instagram dengan alamat https://www.instagram.com/abdhi
2.Alamat Alternatif
Alamat alternatif merupakan teknik hyperlink yang penulisan alamat file yang akan di panggil berada dalam aplikasi atau folder yang sama, jadi untuk memanggil file yang diperlukan tidak perlu menggunakan nama websitenya (nama situsnya),Karena file web tersebut berada satu folder dengan file pemanggil yang memiliki hiperlink. Contohnya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Hyperlink</title>
</head>
Ini adalah contoh hyperlink dengan teknik alamat alternatif
<a href="belajarlist1.html">klik disini</a>
</body>
</html>
Hasilnya sebagai berikut :
Berdasarkan contoh diatas, ketika klik disini di tekan makan hyperlink akan mengarahkan ke halaman sebuah file html yang kita buat minggu lalu dengan nama belajarlist1.html dengan catatan file belajarlist1.html harus tersimpan satu folder dengan file html yang kita buat hari ini.
Selain atribut href yang selalu wajib digunakan dalam penggunaan tag <a>, tag hyperlink juga memiliki satu atribut yang sering digunakan yaitu atribut target dengan atribut value yang sering digunakan yaitu _blank, yang fungsi untuk membuat halaman web yang ada di hyperlink terbuka di tab baru pada browser. Contoh penggunaannya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Hyperlink</title>
</head>
Ini adalah contoh hyperlink dengan teknik alamat alternatif
<a href="https://www.instagram.com/abdhi/" target="_blank">klik disini</a>
</body>
</html>
Setelah mempraktekkan penggunaan hyperlink dan segala atributnya diatas, silahkan gunakan hyperlink yang cocok pada tempatnya sesuai dengan kebutuhan dan model web html yang ingin anda buat. Ingat segala tag yang kita pelajari hari ini harus di tulis di antar tag <body> hingga </body>
Demikian sesi berbagi ilmu tentang tag hyperlink atau tautan pada web. Jika ada hal yang tidak dimengerti silahkan bertanya di kolom komentar, dan kita sharing sampai sama-sama mengerti. Jangan lupa baca artikel lain tentang Belajar HTML lainnya
Posting Komentar