Di postingan sebelumnya kita sudah membahas cara membuat list di HTML. Kali ini kita akan membahas cara membuat link di HTML. Berikut AneIqbal sajikan panduan lengkapnya untuk Anda.
Membuat link di HTML
Link atau tautan adalah objek yang memiliki tujuan alamat tertentu. Objeknya dapat berupa teks atau gambar.
Di HTML, link dapat dibuat dengan tag <a>. a tersebut adalah singkatan dari anchor.
..tag <a> selalu diikuti dengan atribut href. href inilah yang memuat alamat yang dituju. href singkatan dari hypertext reference.
Mari kita coba.
Kita akan membuat sebuah link yang akan menuju ke halaman google.
Berikut kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat link di HTML</title>
</head>
<body>
Klik di <a href="http://www.google.co.id">sini</a> untuk membuka google.
</body>
</html>
Hasilnya akan seperti berikut:
Kalo linknya kita klik, maka kita akan dibawa ke alamat yang dituju (nilai atribut href), yakni halaman google.co.id. Halaman di atas akan berubah menjadi halaman google.co.id.
Agar tampilannya nggak berubah, ada caranya. Kalo linknya di klik, dia akan otomatis membuka tab baru.
..caranya adalah dengan menambahkan atribut target=”_blank” pada tag <a>.
Coba kita tambahkan atribut target ke kode HTML di atas.
<!DOCTYPE html>
<html>
<head>
<title>Membuat link di HTML</title>
</head>
<body>
Klik di <a href="http://www.google.co.id" target="_blank">sini</a> untuk membuka google.
</body>
</html>
Hasilnya, akan ada 2 tab di web browser. Tab pertama berisi halaman link yang kita buat dan tab kedua berisi halaman google.co.id.
Link absolute dan link relatif
Link absolute berisi alamat web yang ditulis lengkap. Contohnya seperti di atas: http://www.google.co.id.
Contoh lain yang lebih panjang: http://www.aneiqbal.com/2016/11/membuat-list-di-html.html. Intinya adalah link absolute mengandung alamat suatu website.
Sedangkan..
Link relatif berisi alamat file yang relatif yang mana alamat linknya mengarah ke file halaman dari web itu sendiri.
Misalnya, di dalam folder belajar_html ada file home.html dan contact.html. Kalo kita ingin membuat link yang mengarah ke halaman contact.html dari home.html, kita cukup ketik:
<a href="contact.html">Link ke halaman contact.html</a>
Lalu bagaimana kalo kita ingin membuat link yang mengarah ke home.html dari file contact.html sedangkan file home.html berada di folder belajar_html dan contact.html berada di folder belajar_html/folder/folder2?
Maka kode yang kita tulis adalah:
<a href="../../home.html">Link ke halaman home.html</a>
Tanda ../../ digunakan untuk naik 2 tingkat folder.. artinya naik ke folder2 lalu naik lagi ke folder.
Kalo naik satu tingkat folder? hapus saja menjadi ../
Alamat filenya relatif kan? makanya disebut link relatif.
Sampai sini selesai bahasan kita cara membuat link di HTML. Semoga panduan cara membuat link di HTML ini bisa membantu Anda dan terima kasih sudah membaca sampai akhir.
Selanjutnya, kita akan membahas cara memasukkan gambar di HTML.
