Membuat Link di HTML
Halaman web dapat berisi berbagai tautan yang membawa kita menuju ke halaman lain dan bahkan menuju bagian tertentu dari halaman tertentu. Tautan ini dikenal sebagai hyperlink.
Hyperlink atau link memungkinkan pengunjung website untuk bernavigasi antar situs web dengan mengklik kata, kalimat, dan gambar. Dengan demikian kita dapat membuat hyperlink menggunakan teks atau gambar yang tersedia di halaman web.
Cara Membuat Link di HTML
Untuk membuat Link di HTML menggunakan tag <a>. Link ditulis dengan <a> yang merupakan singkatan dari anchor. Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).
Untuk lebih memahami tentang link, buatlah contoh kode HTML berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Belajar Membuat Link di HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Belajar Perograman Melalui Youtube</h3> <p>Bebrapa tutorial pemrograman tersedia di youtube, salah satunya adalah channel <a href="https://www.youtube.com/c/HariAspriyono">Hari Aspriyono</a></p> </body> </html> |
Hasil dari kode HTML di atas adalah.
Cara Membuat Link HTML
Dari kode di atas terlihat teks Hari Aspriyono, berwarna dan bergaris bawah yang menandakan bahwa teks tersebut memiliki tautan. Untuk melihat demo latihan tersebut kalian bisa langsung klik url berikut : https://solusilain.com/demo/latihan_html/latihan_link.html.
Atribut Target Link HTML
Atribut Target digunakan untuk menentukan lokasi tempat dokumen tertaut dibuka. Berikut ini adalah pilihan target yang dapat kalian gunakan.
- _blank – Membuka dokumen yang ditautkan di jendela atau tab baru.
- _self – Membuka dokumen yang ditautkan dalam bingkai yang sama (menimpa halaman yang sedang dibuka).
- _parent – Membuka dokumen yang ditautkan dalam bingkai induk.
- _top – Membuka dokumen yang ditautkan di seluruh jendela.
- targetframe – Membuka dokumen yang ditautkan dalam bingkai target bernama.
Cohtoh kode HTML Link dengan Atribut target.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Belajar Link Target HTML Bersama SolusiLain.Com</title> </head> <body> <p>Silahkan klik masing-masing link untuk mencoba.</p> <a href = "http://tutupkurung.com" target = "_blank">Tutup Kurung</a> | <a href = "latihan_link.html" target = "_self">Latihan Link</a> | <a href = "latihan_paragraf.html" target = "_parent">Latihan Paragraf</a> | <a href = "latihan_heading.html" target = "_top">Latihan Heading</a> </body> </html> |
Hasilnya kalian dapat melihat di url ini : https://solusilain.com/demo/latihan_html/latihan_link_target.html
Tampilan hasil Link HTML dengan Atribut Target seperti pada gambar berikut ini.
Hasil Link HTML dengan Atribut Target
