Belajar HTML A Tag Element <a>

KURAZONE ~ Belajar HTML <a> Tag Element. Pengenalan element <a> ... </a> yang sering digunakan untuk membuat link, mencakup bentuk penulisan dan contoh kasus agar mudah dipahami.

PENGENALAN
HTML a (anchor link)

a merupkan sebuah anchor yang menunjukkan awalan dan akhiran sebuah hypertext link. Element <a> digunakan untuk mendefinisikan sebuah hyperlink. Link yang dimaksud disini dapat merujuk ke halaman yang sedang terbuka ataupun ke halaman lain (website lain).

Jika sebuah element a memiliki atribut href, maka element tersebut menunjukkan sebuah hyperlink (hypertext anchor), tetapi jika element tersebut tidak memiliki atribut href, maka element tersebut menunjukkan sebuah placeholder. 

Atribut target, download, rel, href dan type tidak boleh digunakan apabila pada element a tersebut tidak disebutkan atribut href. Jika itemprop atribut disebutkan atau ditulis pada a element, maka atribut href juga harus ditulis pada element tersebut.

<a letak atribut disini> teks terserah </a>

ATRIBUT
Atribut pada element a

download

Menunjukkan bahwa target dari link tersebut akan didownload ketika user mengkliknya. File yang diperoleh akan memiliki nama file berdasarkan value yang diberikan.

Contoh 1 :

<a href="//wp-admin/images/kurazone.png" download>Download logo Kurazone</a>

Kode diatas menunjukkan bahwa ketika link diklik maka file yang diunduh akan memiliki nama asli filenya, yaitu kurazone.png. Kode diatas menunjukkan bahwa atribut download tidak memiliki value

Contoh 2 :

<a href="//wp-admin/images/kurazone.png" download="Logo Kurazone">Download logo Kurazone</a>

Kode diatas menunjukkan bahwa ketika link diklik maka file yang diunduh akan memiliki nama file "Logo Kurazone". Kode diatas menunjukkan bahwa atribut download memiliki value yang berisi tulisan "Logo Kurazone".

#Value pada download artinya adalah nama yang diberikan untuk file yang diunduh.

href

Digunakan untuk menentukkan alamat URL atau nama ID halaman atau element yang akan dituju.

Contoh 1 :

<a href="https://www.kurazone.net/">Kunjungi Kurazone</a>

Kode diatas menandakan bahwa ketika tulisan "Kunjungi Kurazone" diklik, maka akan mengarahkan user ke alamat https://www.kurazone.net/
Klik >> Kunjungi Kurazone, untuk melihat hasilnya.

Contoh 2 :

<a href="#object">Skip to object</a>

Kode diatas akan mengarahkan user ke ID yang bersangkutan, cara ini sering digunakan untuk penggunaan Daftar Isi dan tombol kembali keatas.
Klik >> Kembali ke atas, untuk melihat hasilnya.

Contoh 3 :

<a href="javascript:alert('Hai Sobat!');">Tampilkan Pesan</a>

Kode diatas menghasilkan pesan "Hai Sobat", apabila tulisan "Tampilkan Pesan" diklik.
Klik >> Tampilkan Pesan, untuk melihat hasilnya.

Contoh 4 :

<a href="mailto:emailkura@ymail.com?Subject=Hello%20Kura" target="_top">Kirim Emial!</a>

Dari kode diatas akan menghasilkan link untuk mengirim email ke alamat emailkura@ymail.com dengan subject yang berisi Hello Kura.
Klik >> Kirim Email!, unutk melihat hasilnya. Setelah link diklik maka user akan diarahkan ke aplikasi email yang terdapat pada perangkatnya. Jika tidak ada aplikasi email (seperti: outlook) pada perangkat user, maka akan muncul pesan "tidak tersedianya aplikasi email"

#Value pada href diisi dengan URL atau ID

hreflang

Digunakan untuk menentukan bahasa yang digunakan halaman link.
Contoh :

<a href="https://www.kurazone.net/" hreflang="id">Kurazone Blog</a>

#Value pada hreflang diisi dengan kode bahasa

media

Menentukkan media query yang digunakan pada dokumen yang dirujuk oleh link tersebut.
Contoh :

<a href="/print.php?element=a" media="print and (resolution:300dpi)">Cetak Halaman</a>

#Value pada media diisi dengan media query

rel

Menentukkan hubungan (relationship) antara dokumen yang sedang dibuka dan dokumen lain yang dirujuk oleh link tersebut.
Contoh :

<a href="http://www.kurazone.net/" rel="nofollow">Kurazone.Net</a>

Contoh diatas (rel="nofollow") sering digunakan apabila kita mereferensikan halaman web lain dengan maksud untuk menginstruksikan search engine supaya tidak mengikuti link tersebut dan tidak memasukkannya dalam search engine ranking.

#Value pada rel bisa diisi dengan :

1. alternate
2. author
3. bookmark
4. external
5. help
6. license
7. next
8. nofollow
9. noreferrer
10. noopener
11. prev
12. search
13. tag

target

Menentukkan konteks jelajah dokumen yang di link, bagaimana cara membuka halaman yang dirujuk dari link tersebut?
Contoh :

<a href="https://www.kurazone.net/" target="_blank">Kunjungi Kurazone</a>

Contoh diatas membuat halaman Kurazone.net akan terbuka di jendela baru (tab baru) ketika diklik.

#Value pada target bisa diisi dengan :

1. _blank
2. _parent
3. _self
4. _top
5. framename

title

Digunakan untuk memberikan keterangan tooltip pada link yang dibuat, title ini akan muncul ketika link tersentuh kursor.
Contoh :

<a href="https://www.kurazone.net/" title="mampir gan!">Kurazone</a>

Kode diatas menunjukkan bahwa link yang dibuat akan menampilkan tooltip bertuliskan "mampir gan!" ketika kursor menyentuhnya link tersebut.
Arahkan kursor pada link ini >> Kurazone, untuk melihat hasilnya

#Value pada title diisi dengan teks terserah

type

Menentukkan tipe media dari halaman yang di link. Tipe media dapat dilihat selengkapnya di IANA Media Types
Contoh :

<a href="http://www.kurazone.net" type="text/html" >Kunjungi Kurazone</a>

#Value pada type berisi Tipe media (media_type)

Atribut yang sudah tidak mendukung pada HTML5

1. charset >> value: char_encoding
2. coords >> value: coordinates
3. name >> value: section_name
4. rev >> value: text
5. shape >> value: default / rect / circle / poly

PRAKTEK | Contoh HTML <a> element

Membuat hyperlink sederhana (bentuk dasar link)

<a href="https://www.kurazone.net/">Yuks Kunjungi Kurazone</a>

Pengaturan CSS Awal

a:link, a:visited {
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}

a:link:active, a:visited:active {
    color: (internal value);
}

Browser yang mendukung

Element
<a>	Yes	Yes	Yes	Yes	Yes

Dari penjelasan pada artikel ini, semoga sahabat Kurazone dapat dengan mudah memahami HTML A Tag Element