Cara Membuat script kode Link untuk menghubungkan ke halaman

Cara Membuat script kode Link untuk menghubungkan ke halaman- Link adalah elemen html yang berfungsi menghubungkan suatu halaman web ke halaman web lain.

Link dibagi menjadi dua :
1. Internal Link : adalah link yang menuju ke domain web itu sendiri;
2. External Link : adalah link yang menuju domain lain.

Contoh internal Link :

Contoh eksternal Link :

Cara Membuat Link di HTML

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

Contoh :

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

Artinya link akan menuju ke halaman About us yang berada di dalam file about.html.

ini adalah contoh untuk internal Link. lalu bagaimana dengan Ekternal link ?

kita tinggal masukan alamat URL -nya seperti ini :

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

Maka saat link tersebut di klik , kita akan membuka halaman
https://www.facebook.com/mubarockc00/".

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 memberitahu link, terget 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/mubarockc00/?ref=bookmarks' target='blank'>Facebook</a>

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

Contoh

<a href="https://www.facebook.com/mubarockc00/?ref=bookmarks" 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:dian@petanikode.com" title="kirim email ke Admin">Hubungi Saya</a>

Link diatas akan memanggil aplikasi mail client, karena kita mengisi nilai href dan mailto:dian@petanikode.com

Hasilnya :  Hubungi Saya

Membuat Link Buntu

Link Buntu biasanya tidak bisa diklik, atau link 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 tanda pagar di dalam atribut href adalah dia akan menuju pada elemen dengan id tertentu.

Contoh :

Misalnya kita ingin menuju 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 halaman atas halaman./

Contoh lain, kita akan coba menuju ke halaman atas halaman.

Contoh lain, kita akan coba menuju ke element 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.


Hal ini bisa dilihat dengan inspect Element

Menggunakan atribut Target

Membuat link untuk Memanggil  Fungsi Javescript

Salah satu penggunaan Link adalah untuk memanggila fungsi javascript Biasanya nama fungsi javascript di tambahkan pada atribut onclik dan href

Contoh :

<a href="javascript:alert('Helloo!!')">Klik Aku</a>
<a href="#!" onclick="alert('Yoi!!')">Klik Saya</a>

Hasilnya : Klik Aku / Klik Saya

Membuat Gambar Sebagai Link

Bagaimana cara membuat gambar sebagai link ?

kita hanya perlu membungkus elemen <img> ke dalam elemen <a> Sehingga akan menjadi Link.

Contoh : 

<a href="/about/"><img src="/img/logo.svg" /></a>

Saya menggunakan file vektor (.svg) pada atribut src di elemen <img >.kita juga bisa menggunakan format lain png, gif, jpg ) dan yang lainnya.

Ahir kata itulah beberapa contoh penggunaan Link, jika ada pertanyaan silahkan melalui komentar

Share this post