Anggi Abdul Khalid - Hai, selamat malam sobat. pada tutorial HTML sebelumnya, kita sudah membahas bagaimana cara membuat DAFTAR / LIST pada HTML. Nah, kali ini kita akan melanjutkan pembelajaran dengan materi Cara Membuat Link pada HTML dengan menggunakan ( tag a ).
Cara Membuat link di HTML
Tujuan dari kata Hypertext pada HTML adalah untuk membuat sebuah text yang ketika di-klik maka akan berpindah ke halaman lainnya. Dan pada HTML yaitu menggunakan tag <a> untuk keperluan ini.Link biasanya ditulis dengan <a> yang merupakan singkatan dari anchor (jangkar). Umumya, Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang akan dituju (href yaitu singkatan dari hypertext reference).
Agar lebih jelas untuk kamu pahami, langsung saja kita gunakan contoh. Silahkan kamu buka text editor dan langsung kamu buat kode / syntax seperti yang dibawah ini.
Contoh penggunaan tag link <a> :
Double Klik script dibawah dan kemudian tekan Ctrl + C untuk mengcopy
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>
Belajar Tag Link</h1>
Saya sedang belajar HTML dari
<a href="http://www.anggikhalid.com/">Anggi Abdul Khalid</a>
</body>
</html>
Berikut tampilannya pada browser.
Alamat Absolute dan Alamat Relatif
Pada contoh diatas, kita menuliskan alamat link tersebut dengan alamat lengkap yaitu dengan menuliskan bagian “http://www.”. Penulisan seperti ini disebut juga sebagai external link, yang berarti kita membuat sebuah link yang menuju ke alamat lain di internet, atau yang lebih dikenal dengan istilah : alamat absolut.Alamat absolut adalah sebuah penulisan alamat file dengan menyertakan nama website, seperti : href=”http://www.anggikhalid.com/p/index-tutorial-belajar-html.html”, atau href=”http://www.anggikhalid.com/”.
Namun jika kita ingin membuat sebuah link di dalam sebuah situs yang sama, maka kita tidak perlu menyebutkan alamat secara lengkap tersebut. Tetapi cukup dengan mencantumkan alamat file yang dituju relatif kepada file saat ini. Jenis alamat ini disebut alamat relatif.
Sebagai contoh alamat relatif, apabila kita ingin membuat suatu link kepada file latihan.html pada folder yang sama dengan file saat ini, maka atribut hrefnya akan berisi seperti ini : href=”latihan.html”. Berikut adalah kode HTMLnya:
Contoh penggunaan tag link <a> untuk alamat relatif :
Double Klik script dibawah dan kemudian tekan Ctrl + C untuk mengcopy
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>
Belajar Tag Link</h1>
Halaman HTML pertama saya adalah <a href="latihan.html">Latihan</a>
</body>
</html>
Berikut tampilannya pada browser.
Alamat absolute, yaitu ditulis dengan lengkap, seperti http://www.anggikhalid.com, atau bisa saja kita merujuk kepada halaman tertentu, maka akan menjadi http://www.anggikhalid.com/nama_halaman_lain.html.
Alamat relatif, yang dimaksud disini adalah alamat yang relatif kepada file tempat kita memanggil link ini. Contohnya, misalkan nama file kita adalah belajar_membuat_link.html, dan didalam folder yang sama terdapat juga halaman belajar_list.html, maka kita dapat menggunakan href=”belajar_list.html” untuk membuat suatu link yang akan menuju pada halaman belajar_list.html .
Namun, jika file tersebut berada di dalam folder lagi, misalnya dengan nama folder belajar, maka alamat relatifnya akan menjadi href=”belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder yang saat ini? Maka kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.
Atribut tag <a>: target
Salah satu Atribut penting lainnya dari tag <a> adalah atribut target. Atribut ini biasanya digunakan untuk menentukan apakah link yang akan dituju terbuka di jendela browser yang sedang terbuka saat ini, atau akan terbuka pada jendela baru.Secara default, biasanya setiap link yang kita tulis akan terbuka pada jendela yang sama ( menimpa halaman web saat ini ). Akan tetapi, apabila kita ingin halaman tersebut terbuka pada tab yang baru, maka kamu gunakanlah atribut target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target :
Double Klik script dibawah dan kemudian tekan Ctrl + C untuk mengcopy
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>
Belajar Tag Link</h1>
Saya sedang belajar html dari <a href="http://www.anggikhalid.com/" target="_blank">Anggi Abdul Khalid</a> dan akan terbuka pada tab baru
</body>
</html>
Berikut tampilannya pada browser.
Jika kita men-klik link tersebut, maka halaman anggikhalid.com akan terbuka pada tab baru, dan tidak menimpa tab yang saat ini.
Selain digunakan untuk menghubungkan halaman pada HTML, Tag <a> juga bisa digunakan untuk menghubungkan bagian lain dari halaman yang sama, atau biasa yang disebut Internal Link.
