Cara Membuat Link di HTML

Link di HTML dapat dibuat dengan tag <a> lalu diberikan atribut href untuk menentukan alamat yang akan dituju.

Contoh:

<a href="about.html">About us</a>

Artinya, ketika link About us diklik, maka browser akan membuka about.html.

Ini adalah contoh untuk internal link.

Lalu bagaimana kalau ekternal?

Kita tinggal masukkan alamat URL-nya seperti ini:

<a href="https://www.facebook.com/">Facebook</a>

Hasilnya:

Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/mediahasanah.

Atau kamu juga bisa membuat link untuk CTA whatsapp (Call to action).

Contoh:

<a href="https://api.whatsapp.com/send?phone=628156655501&text=hi">Chat dengan Saya</a>

Hasilnya: Chat dengan Saya

Kamu bisa mengubah alamat link dengan nomer whatshapp yang kamu miliki. Caranya ubah saja pada phone=628156655501(nomer telepon untuk link whatsapp dimulai dari 62 dan tidak boleh pakai +).

Atribut-atribut Link

Selain atribut href terdapat juga atribut yang lain seperti target, title, rel, dan lain-lain.

Menggunakan Atribut Target

Atribut ini berfungsi untuk memberi tahu link, target membukanya ke mana. Misalkan targetnya adalah di jendela baru atau tab baru, maka atribut target harus diisi dengan blank atau _blank.

<a href='https://www.facebook.com/mediahasanah' target='blank'>Facebook</a>

Selain itu atribut ini dapat juga di isi dengan _parent, _self, _top dan nama sebuah frame.

Contoh:

<a href="http://www.megateknologi.com" target="tampil">Sebuah Link</a>
<iframe name="tampil">
</iframe>

Hasilnya, link akan dibuka di dalam elemen frame yang memiliki atribut name="tampil".

Menggunakan Atribut Title

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan tampil saat link disentuh pointer.

<a href="mailto:naufal@megateknologi.com" title="kirim email ke Admin">Hubungi Saya</a>

Link di atas akan memanggil aplikasi mail client, karena kita mengisi nilai href dengan mailto:naufal@megateknologi.com.

Hasilnya: Hubungi Saya

Membuat Link Buntu

Link buntu biasanya tidak bisa diklik, atau link itu tidak akan menuju ke mana-mana.

Cara membuat link ini, kita cukup mengisi atribut href dengan tanda pagar (#) atau tanda pagar dan tanda seru (#!).

Contoh:

<a href="#">Link Buntu</a>
<a href="#!">Link Buntu 2</a>

Sebenarnya maksud dari tnda pagar di dalam atribut hrefadalah dia akan menuju pada elemen dengan id tertentu.

Contoh:

Misalnya kita ingin menju ke halaman paling atas, maka link-nya akan seperti ini:

<a href="#top">Ke Atas!<a>

Hasilnya: Ke Atas!

Nilai #top adalah nilai untuk menuju ke halman atas halaman.

Contoh lain, kita akan coba menuju ke elemen tertentu dengan ID menggunakan-atribut-target

<a href="#menggunakan-atribut-target">Cara Menggunakan Atribut Target</a>

Hasilnya: Cara Menggunakan Atribut Target

Nilai #menggunakan-atribut-target adalah ID dari elemen <h2>di halaman ini.