Membuat link HTML merupakan salah satu unsur yang paling penting dalam pembuatan sebuah website. Dengan adanya link, kita sebagai user akan terbantu untuk berpindah ke halaman lain dalam domain itu maupun domain lain. Pada hakikatnya, link bisa disisipkan pada text maupun gambar.
Apabila text atau gambar tersebut telah disisipi link, maka ketika di-klik akan mengarahkan kita menuju link yang telah diatur oleh sang developer. Itulah fungsi link yang paling utama. Pada panduan belajar HTML ini, kita akan membuat link yang ada pada sebuah website.
Cara Membuat Link HTML Pada Sebuah Website
Link atau hyperlink itu ditulis dengan menggunakan tag <a> sebagai pembuka kemudian ditutup dengan menggunakan tag </a>. Berdasarkan jenisnya, link dibagi menjadi 2, yaitu:
- External Link (Absolute) = Link ini merupakan link yang diarahkan menuju suatu halaman website dengan domain yang berbeda. Penulisan link ini adalah dengan menyebutkan alamat websitenya. Contoh:
<a href=”https://makinrajin.com”>Klik di sini</a> atau <a href=”https://makinrajin.com/belajar-html/”>Klik di sini</a>. - Internal Link (Relative) = Berbeda dengan external link, internal link atau yang sering disebut dengan relative link ini berfungsi untuk mengarahkan ke halaman website dalam satu domain. Biasanya, penulisan internal link ini tidak menggunakan alamat, walaupun bisa disertakan alamat. Contoh: <a href=”belajar.html”> atau
<a href=”panduan/belajar.html”>Klik di sini</a>.
Untuk link <a href=”panduan/belajar.html”>Klik di sini</a> itu artinya sama saja kita mengarahkan ke halaman belajar.html pada folder panduan. Contohnya ada pada gambar di bawah:
Selain itu, Anda juga bisa menggunakan ‘../’ yang artinya keluar satu tingkat dari folder pemanggilan link. Jadi, file yang ada pada tag <a> itu berada di luar file yang memanggilnya. Seperti contoh di bawah ini:
Atribut Pada Tag <a> Untuk Membuat Link HTML
Ada beberapa atribut penting yang perlu diketahui apabila Anda ingi membuat link HTML, berikut adalah beberapa atributnya:
- href. Atribut href ini berfungsi untuk menentukan link yang akan dituju pada tag <a>. Atribut ini wajib ada apabila Anda ingin membuat sebuah link pada suatu website.
- target. Nilai pada atribut ini ada bermacam-macam, yaitu: _blank dan _self. Penjelasannya nanti di bawah.
- title. Singkatnya, atribut ini akan menghasilkan sebuah tooltip yang berisi nilai dari atribut title itu sendiri ketika tag <a> mengalami aksi hover (saat dilewati mouse).
Atribut Target Pada Tag <a>
Atribut target ini memiliki 4 nilai, yaitu _self, _blank, _parent, dan _top. Namun, yang sering dipakai itu blank. Penjelasannya adalah sebagai berikut:
- _self : Membuka halaman website di tab ini.
- _blank :Membuka halaman website di tab baru.
- _parent : Membuka halaman website pada parent frame.
- _top : Membuka halaman website dan membatalkan semua frame.
Untuk nilai _parent dan _top itu sudah deprecated pada HTML5. Jadi, Anda tidak perlu menggunakan kedua nilai tersebut. Itu karena website sekarang sudah tidak menggunakan frameset lagi. Atribut ini tidak wajib diisi, tetapi apabila tidak diisi maka defaultnya adalah _self. Penulisannya adalah sebagai berikut:
[sourcecode language=”plain”]
&amp;lt;a href=&amp;quot;https://makinrajin.com&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;Klik di sini&amp;lt;/a&amp;gt;
[/sourcecode]
Apabila Anda klik tulisan “Klik di sini” maka halaman website makinrajin.com akan terbuka di tab baru. Itu karena Anda menggunakan _blank untuk mengisi atribut target.
Membuat Link Berupa Gambar di HTML
Oh iya, Anda juga bisa membuat gambar sebagai link. Jadi, Anda bisa membuat kejadian ketika gambar di-klik akan mengarah ke halaman yang telah ditentukan.
Apabila Anda membaca artikel tentang cara menampilkan gambar di HTML pasti tahu caranya. Jika Anda belum tahu, sebaiknya Anda baca artikel tersebut sebelum melanjutkan ke artikel ini. Berikut adalah kode programnya:
[sourcecode language=”plain”]
&amp;lt;a href=&amp;quot;https://makinrajin.com&amp;quot; target=&amp;quot;_blank&amp;quot; title=&amp;quot;Ini title lhoooo&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;gambar.jpg&amp;quot; width=&amp;quot;550&amp;quot; height=&amp;quot;150&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;.
[/sourcecode]
Maka hasilnya adalah sebagai berikut:
Membuat Link Buntu di HTML
Apabila kita membuat link dengan cara mengisi atribut href dengan alamat website, kali ini berbeda. Untuk dapat membuat link buntu, Anda bisa mengisi atribut href dengan diawali tanda pagar, contoh:
[sourcecode language=”plain”]
&amp;lt;a href=&amp;quot;#atas&amp;quot;&amp;gt;Contoh&amp;lt;/a&amp;gt;
[/sourcecode]
Maka, jika Anda klik tulisan “Contoh” maka Anda akan diarahkan menuju daerah dengan id=atas. Anda bisa langsung cek dengan klik tulisan “Contoh” di samping ini: Contoh
Nah, itulah tutorial cara membuat link HTML dengan sederhana. Anda bisa kreasikan cara tersebut. Apabila ada yang ingin ditanyakan, bisa tulis di kolom komentar.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development