SMK MANDALAHAYU

Where Tomorrow's Leaders Come Together

Dasar HTML - 3 - Mengenal Tag untuk Membuat Link

Link adalah elemen html yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain.
Link juga dikenal dengan sebutan anchor tag, karena ia dibuat dengan tag <a>.
Link dibagi menjadi dua:
  1. Internal Link: adalah link yang menuju ke domain atau halaman web itu sendiri;
  2. External Link: adalah link yang menuju domain lain.
Contoh internal link:
Contoh eksternal link:
Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website.
Sementara untuk eksternal link, biasanya digunakan untuk membuka domain tertentu.

Contoh: membuka facebook, membuka chat whatsapp, membuka youtube, dll.
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/indoinaja">Facebook</a>





 

Hasilnya:

 

 

Maka saat link tersebut diklik, kita akan membuka halaman https://www.facebook.com/indoinaja.
Atau kamu juga bisa membuat link untuk CTA whatsapp (Call to action).
Contoh:
<a href="https://api.whatsapp.com/send?phone=6281234567&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=6281234567 (nomer telepon untuk link whatsapp dimulai dari 62 dan tidak boleh pakai +).
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/indoinaja' 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.indoinfoaja.cf" 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:admin@indoinfoinaja.cf" title="kirim email ke Admin">Hubungi Saya</a>
Link di atas akan memanggil aplikasi mail client, karena kita mengisi nilai href dengan mailto:admin@indoinfoinaja.cf.
Hasilnya: Hubungi Saya
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 href adalah 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>
Nilai #menggunakan-atribut-target adalah ID dari elemen <h2> di halaman ini.
Hal ini bisa dilihat dengan Inspect Element.


Salah satu penggunaan Link adalah untuk memanggil fungsi Javascript. Biasanya nama fungsi javascript di tambahkan pada atribut onclick dan href.
Contoh:
<a href="javascript:alert('Helloo!!')">Klik Aku</a>
<a href="#!" onclick="alert('Yoi!!')">Klik Saya</a>
Hasilnya: Klik Aku | Klik Saya
Bagaimana cara membuat gambar sebagai link?
Gampang…
Kita hanya perlu membungkus elemen <img> ke dalam elemen <a>. Sehingga dia akan menjadi link.
Contoh:
<a href="/about/"><img src="/img/logo.svg" /></a>
Hasilnya: 
Saya menggunakan file vektor (.svg) pada atribut src di elemen <img>. Kita juga bisa menggunakan format lain seperti png, gif, jpg, dsb.

AKHIR KATA…

Itulah beberapa contoh penggunaan Link. Jika ada yang ditanyakan, silahkan sampaikan melalui komentar.

22/04/2020 05:05 - Oleh Administrator - Dilihat 23 kali
Komentari Tulisan Ini
Tulisan Lainnya
Dasar HTML - 4 - Membuat List pada HTML

List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list. Biasanya digunakan untuk membuat menu. Ada tiga jenis list di HTML: Ordered List adalah list

22/04/2020 12:08 - Oleh Administrator - Dilihat 30 kali
Dasar HTML - 2 - Apa yang dimaksud tag, elemen, dan atribut dalam HTML?

Tag, elemen, dan atribut, marupakan tiga hal dasar yang harus anda pahami saat belajar HTML. Karena tiga hal dasar tersebut yang membentuk dokumen HTML. Mari kita bahas, satu persatu.

22/04/2020 04:59 - Oleh Administrator - Dilihat 22 kali
Belajar HTML - 1 - Pengenalan Dasar HTML untuk Pemula

HTML adalah bahasa pertama yang harus dipelajari bila kamu ingin menjadi seorang Web Developer, karena HTML merupakan bahan dasar untuk membuat web. APA ITU HTML? HTML atau Hyper T

21/04/2020 23:22 - Oleh Administrator - Dilihat 19 kali
Dra. Sulistyawati

- Kepala Sekolah -

Assalammualaikum Wr. Wb Salam Sejahtera untuk kita semua , semoga kita selalu dalam keadaan sehat Wal Afiat . Pendidikan Adalah…

Selengkapnya
Berlangganan