Link digunakan untuk menghubungkan halaman HTML yang satu dengan halaman HTML yang lain. Pada pembahasan kali ini, kita akan belajar bagaimana menggunakan suatu link untuk menghubungkan suatu halaman HTML.
Kata Hypertext dari HTML sendiri memiliki tujuan untuk bisa membuat suatu text di dalam suatu halaman HTML dapat di klik untuk menuju ke halaman selanjutnya atau halaman yang lainnya. Caranya HTML menggunakan suatu tag yang dinamakan dengan link untuk dapat melakukan hal tersebut.
Silahkan Baca :
Pengenalan Dasar Programming Web
Untuk membuat suatu tag link dapat kita tulis dengan <a> atau disebut juga anchor atau jangkar.
Masing-masing tag link sendiri memiliki suatu atribut yang dinamakan dengan href. Href ini akan di isi dengan alamat yang akan dituju. Href sendiri memiliki makna singkatan yaitu Hypertext reference.
Cara Membuat Link Dengan Alamat Absolute
Sekarang Anda coba masing-masing membuka code editor Anda untuk mempraktekan membuat link pada halaman HTMl. Source code nya sudah saya siapkan dibawah ini.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Tag Link </title>
</head>
<body>
<h1>Penggunaan Tag Link </h1>
<p>Saya belajar HTML dari
<a href="http://www.clocarius.com">Clocarius</a></p>
</body>
</html>
Source code diatas merupakan contoh penggunaan tag link dengan alamat absolute, dimana kita harus menuliskan alamat link yang dituju dengan lengkap.
Alamat absolute mengharuskan untuk menulis link dengan lengkap seperti http://www.clocarius.com diatas atau jika kita ingin menuju ke suatu alamat tertentu maka kita harus menuliskan http://www.clocarius.com/nama_halaman.html.
Cara Membuat Link Dengan Alamat Relatif
Akan tetapi jika kita ingin menuliskan suatu halaman yang berada di dalam suatu folder yang disimpan di dalam folder yang kita jalankan ini, kita tidak perlu untuk menuliskan halaman tersebut secara lengkap atau cara ini disebut dengan penggunaan tag link dengan alamat relatif.
Maksud dari alamat relatif ini adalah link yang kita tuliskan relatif dengan dimana posisi kita menyimpan link tersebut. Jika nama link tersebut adalah penggunaan_link.html dan berada di dalam folder yang sama dengan belajar_html.html maka untuk menghubungkan penggunaan_link.html dengan belajar_html.html dapat menggunakan href="penggunaan_link.html" untuk menggabungkan halaman penggunaan_link.html dengan belajar_html.html.
Agar lebih paham maka kita langsung hands on saja, silahkan buka code editor Anda masing-masing, kali ini kasusnya adalah kita ingin membuat link kepada halaman hello_world.html yang ada di dalam folder yang sama dengan halaman html yang sudah kita buat.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Tag Link </title>
</head>
<body>
<h1>Penggunaan Tag Link </h1>
<p>Saya membuat Halaman HTML pertama saya dengan nama
<a href="hello_world.html">Hello World</a></p>
</body>
</html>
Apabila halaman html yang akan kita buatkan link nya berada di folder tutorial, maka kita harus membuat link relatifnya seperti ini href="tutorial/hello_world.html". Akan tetapi jika posisi halaman web yang akan kita buatkan linknya berada 3 tingkat diluar folder halaman Anda saat ini maka Anda dapat menuliskannya seperti ini href="../../../hello_world.html". Jika berada dua tingkat diatasnya maka cukup dengan href="../../hello_world.html". Jika hanya berada satu tingkat maka cukup dengan href="../hello_world.html". Sesuaikan saja dengan jumlah tingkatannya.
Atribut Penting Dari Tag Link (Target)
Jika kita tidak menentukan target dari link yang kita buat maka link tersebut akan secara default terbuka pada halaman itu juga.
Sebelum Itu Atribut Target Sendiri Terdapat Beberapa Jenis Yaitu :
- _blank : Membuka dokumen terkait di jendela baru atau tab.
- _self : Membuka dokumen terkait di jendela yang sama / tab seperti yang diklik (ini adalah default).
- _parent : Membuka dokumen terkait dalam kerangka induk.
- _top : Membuka dokumen terkait dalam tubuh penuh jendela.
- framename - Membuka dokumen terkait dalam bingkai bernama.
Berikut Ini Adalah Contoh Dari Penggunaan Tag Link <a> Dengan Atribut Target :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan Tag Link </title>
</head>
<body>
<h1>Penggunaan Tag Link </h1>
<p>Saya membuat Halaman HTML pertama saya dengan nama
<a href="hello_world.html" target="_blank">Hello World</a></p>
</body>
</html>
EmoticonEmoticon