Link adalah tujuan dari kata Hypertext dari HTML. Dalam tutorial belajar HTML cara membuat link di HTML, kita akan membahas cara penulisannya.
Tujuan kata Hypertext dari HTML adalah membuat sebuah text jika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag link untuk keperluan ini.
Tag link ditulis dengan <a>, singkatan cari anchor (jangkar)
Setiap tag link setidaknya memiliki sebuah atribut href. Dimana href akan berisi alamat yang dituju. (href adalah singkatan dari hypertext reference). Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh penggunaan tag link <a>:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html> < html > < head > < title >Penggunaan Tag Link </ title > </ head > < body > < h1 >Belajar Tag Link</ h1 > < p >Saya sedang belajar HTML dari < a href = "http://www.duniailkom.com" >Duniailkom</ a ></ p > </ body > </ html > |
Contoh diatas menggunakan alamat absolut, artinya kita menuliskan alamat link dengan lengkap.
Namun jika halaman web yang kita tuju adalah di dalam folder tempat kita menjalankan file ini, tidak perlu menuliskan alamat lengkap dari link tersebut, atau disebut juga alamat relatif.
Seandainya kita ingin membuat link kepada file hello.html pada folder yang sama, kode HTMLnya akan menjadi :
Contoh penggunaan tag link <a>:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html> < html > < head > < title >Penggunaan Tag Link </ title > </ head > < body > < h1 >Belajar Tag Link</ h1 > < p >Halaman HTML pertama saya adalah < a href = "hello.html" >Hello</ a ></ p > </ body > </ html > |
alamat absolute ditulis dengan lengkap, seperti http://www.duniailkom.com, atau jika kita merujuk kepada halaman tertentu, menjadi http://www.duniailkom.com/nama_halaman.html.
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya nama file adalah belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html”.
Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya menjadihref=”lagi_belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html”, untuk naik 2 folder diatasnya.
Atribut penting dari lainnya tag link adalah target.
Secara default, setiap link yang kita tulis akan terbuka pada halaman itu juga, jika ingin halaman tersebut terbuka pada tab lain, tunakan atribut target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target:
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html> < html > < head > < title >Penggunaan Tag Link </ title > </ head > < body > < h1 >Belajar Tag Link</ h1 > < p >Saya sedang belajar html dari < a href = "http://jonmartin-aka-blackmagician.blogspot.com/" target=”_blank”>Duniailkom</ a > dan akan terbuka pada tab baru</ p > </ body > </ html > |
0 komentar:
Posting Komentar