Belajar HTML Part 11: Cara Membuat link di HTML (tag a)
Halo Kawan-kawan
Pada penjelasan sebelumnya di Pengertian HTML, Kita telah membahas singkatan dari HTML yaitu Hypertext Markup Language. Dimana kata hypertext dapat merujuk pada fungsi HTML yang dapat disisipi link baik dalam bentuk teks atau gambar yang ketika di-klik akan pindah ke halaman lainnya. Dalam tutorial belajar HTML dasar kali ini kita akan membahas cara membuat link di HTML.
Cara Membuat link di HTML
Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href (hypertext reference). Dimana href berisi alamat yang dituju.
Langsung saja, Kita buka file Notepat++ kita sebelumnya dan ketikan Kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Judul dari Website</title>
</head>
<body>
<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan
tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada
dalam tag <a> dan </a> akan dianggap link oleh browser. Atribut yang
sangat penting dalam tag a adalah atribut <b>href</b>. Isi dari atribut ini
adalah alamat website yang dituju.</p>
<p>Contoh link ke alamat nusantaracoding.blogspot.co.id</p>
<a href="https://nusantaracoding.blogspot.co.id/">Ini link ke nusantaracoding.blogspot.co.id</a>
<p>Link juga mempunyai atribut <b>target</b> yang fungsinya berhubungan dengan
window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent",
"_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi
atribut default dari target adalah "_self" dimana alamat website akan dibuka pada
window yang sama.</p>
<p>Contoh link dengan atribut target="_blank"</p>
<a target="_blank" href="https://nusantaracoding.blogspot.co.id/2017/">Tempat Belajar Coding</a>
<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas
Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan
bohlam.</p>
</body>
</html>
Hasil Code
Alamat Absolute dan Alamat Relatif
Hyperlink pada HTML memiliki dua jenis yaitu alamat absolte dan alamat alternative.
1. Alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website. Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Judul dari Website</title>
</head>
<body>
<body>
ini adalah contoh alamat absolute <a href="https://nusantaracoding.blogspot.co.id/2017/">klik disini</a>
</body>
</html>
Hasil Code
Dari contoh diatas hyperlink menggunakan alamat absolute, dimana kita akan mengakses file html yang berada di nusantaracoding.blogspot.co.id/2017
2. Alamat alternative merupakan penulisan alamat file dan link yang akan dipanggil masih berada dalam aplikasi yang sama, jadi tidak perlu menggunakan nama dari websitenya. Contoh saya akan memangil file “absolute.html” yang masih berada dalam 1 folder dengan halaman yang sekarang digunakan.
<!DOCTYPE html>
<html>
<head>
<title>belajar memubuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat alternatif yang memanggil file dari folder yang sama <a href="absolute.html">klik disini</a>
</body>
</html>
Hasil Code
Jika file tersebut berada di dalam folder berbeda contoh nama folder “HTMLkita” dan nama file "bedafolder", maka alamat relatifnya menjadi href=”HTMLkita/bedafolder.html”. Namun bagaimana jika halaman tersebut berada 2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../bedafolder.html”, untuk naik 2 folder diatasnya.
Setalah menguasai Cara Membuat link di HTML selanjutnya kita akan membahas tentang Cara Menambahkan Gambar di HTML, menggunakan tag <img>.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2