HTML | Membuat Link pada HTML

Assalamu'alaikum wr.wb

Hyperlink

Sebelumnya apakah kalian sudah tau, apa itu Hyperlink? Hyperlink yaitu menghubungkan antara satu dokumen dengan dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah  teks atau gambar yang ketika diklik akan di alihkan ke halaman tertentu yang sudah ditetapkan dalam penulisan hyperlink tersebut. Link juga dikenal dengan sebutan anchor tag, karena ia dibuat dengan tag <a>.

Note: Link tidak harus berupa texs. Link  dapat berupa gambar atau  elemen HTML lainnya!

link dibagi menjadi 2 yaitu:

1. Internal Link: adalah link yang menuju kesuatu domain atau halaman web itu sendiri
2. External Link: adalah link yang menuju domain lain. atau berbeda halaman

Apa perbedaan dari internal link dan external link?

Internal Link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website.

External Link biasanya digunakan untuk membuka domain lain, yang berbeda dengan halaman HTML/website itu sendiri.

Membuat Hyperlink atau Link 

Contoh Internal Link

<a href="atharramadan.blogspot.com">Welcome To My blog</a>

Maka hasil dari link yang kita buat di atas akan menjadi seperti ini: Welcome To My Blog

Contoh External Link:

<a href="https://www.instagram.com/zxthrrx">Don't Forget To Follow My Instagram, Thank You</a>

Ini adalah hasil dari External Link yang sudah kita buat: Dont Forget To Follow My Instagram, Thank You

HTML Link - Syntax

Tag HTML <a> mendefinisikan hyperlink. Ini memiliki sintaks berikut:

  <a href="url">Link text</a>

Atribut terpenting dari elemen <a> adalah atribut href, yang menunjukan tujuan tautan.

Link text adalah bagian yang akan terlihat oleh pembaca.

Mengklik link text, akan mengirim pembaca ke alamat URL yang ditentukan.

Contoh.

Contoh ini menunjukan cara membuat link ke Facebook.com

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

Secara default, link akan muncul sebagai berikut di semua browser:

• Link yang belum dikunjungi digarisbawahi dan berwarna biru
• Link yang dikunjungi digarisbawahi dan berwarna ungu
• Link aktif digarisbawahi dan merah

Tip: Link tentu saja dapat ditata dengan CSS, untuk mendapatkan tampilan lain!

HTML Link- Target Attribute

Secara default, halaman tertaut akan ditampilkan di jendela browser saat ini. untuk mengubahnya, Anda harus menentukan target lain untuk tautan tersebut.

Atribut target menentukan tempat untuk membuka dokumen tertaut.

Atribut target dapat memiliki salah satu dari nilai berikut:

• _self - Bawaan. Membuka dokumen di jendela/tab yang sama dengan yang di klik
• _blank - Membuka dokumen di jendela atau tab baru
• _parent - Membuka dokumen di bingkai induk
• _top - Membuka dokumen di seluruh badan jendela

Contoh

Gunakan target="_blank" untuk membuka dokumen tertaut di jendela atau tab browser baru:

  <a href="https://www.blogger.com" target="_blank">Blogger</a>

HTML Link - Gunakan Gambar sebagai Link

Untuk menggunkan gambar sebagai link, cukup letakan <img> tag di dalam <a>

Contoh

<a href="default.asp>
<img src="smiley.gif" alt="HTML Tutorial"style="width:42px;height:42px;"></a>

Ringkasan Bab

• Gunakan <a> elemen untuk menentukan link
• Gunakan href atribut untuk menentukan alamat link
• Gunakan target atribut untuk menentukan tempat membuka dokumen tertaut
• Gunakan <img> elemen (di dalam <a>) untuk menggunakan gambar sebagai link

Oke mungkin cukup sampai disini dulu semoga bermanfaat sekian dari saya terimakasih.

Wassalamu'alaikum wr.wb