Cara Membuat Hyperlink di HTML
Untuk menambahkan link, HTML menyediakan sebuah tag yang bernama tag <a>. Tag <a>
merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki atribut href
(singkatan dari hypertext reference) yang berisi alamat atau url yang dituju. Berikut syntax
dasar penulisan tag link:
1
| <a href="url_tujuan">Teks link</a> |
Untuk lebih jelasnya silakan sobat perhatikan contoh penggunaan tag link <a> berikut ini:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html><html><head> <title>Belajar link HTML</title></head><body> <h1>Contoh penggunaan tag link</h1></body></html> |
Secara default, link akan ditampilkan oleh web browser seperti berikut:
- Link yang belum dikunjungi akan berwarna biru dan digarisbawahi
- Link yang telah dikunjungi (di-klik) akan berwarna ungu dan digarisbawahi
- Link aktif akan berwarna merah dan digarisbawahi
Mengenal Alamat Absolut dan Alamat Relatif Pada
Link
Alamat absolut biasanya digunakan untuk link yang menuju ke situs lain di internet atau yang
dikenal dengan sebutan external link (link keluar). Seperti pada contoh kode di atas kita
menuliskan alamat secara lengkap dengan bagian "http://" yang berarti kita membuat link
menuju ke alamat lain (bukan situs saat ini).
Lebih sederhananya, alamat absolut adalah cara penulisan alamat dengan menyertakan nama
website, misalnya seperti href=”http://strukturweb.blogspot.com/p/tutorial-html.html” atau href="https://www.facebook.com".
Sedangkan alamat relatif adalah link yang dibuat untuk menuju ke situs yang sama dan tidak
perlu menyertakan alamat website tersebut secara lengkap, melainkan kita cukup
mencantumkan
file yang dituju relatif kepada file saat ini.
Sebagai contoh sederhananya, jika kita ingin membuat link menuju ke file hello.htmlpada
folder
yang sama dengan file saat ini, maka kita cukup menuliskan href=”hello.html”. Supaya lebih
mudah memahami perbedaannya dari keduanya, silakan sobat perhatikan contoh di bawh ini.
Contoh penggunaan tag link <a> untuk alamat absolut dan relatif. Buatlah dua buah file HTML
dengan nama halaman1.html dan hello.html dan simpan di dalam folder yang sama.
Kode halaman1.html:
Advertisement
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html><html><head> <title>Belajar membuat link HTML</title></head><body> <h1>Link absolut dan link relatif</h1> <h3>Link absolut</h3> <p>Saya sedang belajar HTML dasar di <a href="http://strukturweb.blogspot.com/p/tutorial-belajar-html.html">Strukturweb</a>.</p> <h3>Link relatif</h3> <p>Pelajaran pertama saya adalah membuat file <a href="hello.html">Hello</a>.</p></body></html> |
Kode hello.html:
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html><html><head><title>Halaman HTML pertama saya</title></head><body> <p>Hello World!</p></body></html> |
Kesimpulan:
- Alamat absolut ditulis dengan menyertakan nama website secara lengkap,
- seperti href="https://wikipedia.org", atau jika kita menuju ke halaman tertentu
- seperti href="https://wikipedia.org/pengertian-html.html". Biasanya link absolut
- digunakan untuk menuju ke situs lain di luar file saat ini (external link).
- Alamat relatif adalah relatif kepada file tempat kita memanggil link ini (situs saat ini).
- Misalnya file kita saat ini adalah halaman1.html, dan dalam folder yang sama terdapat
- file hello.html, sehingga kita dapat menuliskan href="hello.html" untuk membuat link
- menuju hello.html. Jika file hello.html berada pada folder sedang_belajar, maka penulisannya href=”sedang_belajar/hello.html".
Mengenal Atribut Target Pada Tag <a>
Selain atribut href, ternyata tag <a> masih memiliki beberapa atribut penting lainnya, dan yang
paling sering digunakan adalah atribut target. Atribut ini berfungsi untuk menentukan apakah
link yang dituju terbuka pada halaman web browser saat ini atau terbuka di jendela baru.
Jika kita tidak menambahkan atribut target, secara default link tersebut akan terbuka pada
jendela yang sama ketika di-klik (menimpa halaman saat ini). Tetapi jika kita ingin halaman
tersebut terbuka pada tab baru, maka kita harus menambahkan atribut target=”_blank”.
Contoh penggunaan tag <a> dengan atribut target:
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html><html><head> <title>Belajar link HTML</title></head><body> <h3>Contoh penggunaan atribut target</h3> <p>Saya sedang belajar di <a href="http://strukturweb.blogspot.com" target="_blank">Struktur web</a> dan akan terbuka pada tab baru.</p> <p>Sedangkan <a href="http://strukturweb.blogspot.com">Halaman ini</a> akan terbuka pada jendela saat ini.</p></body></html> |
0 komentar:
Posting Komentar