Fungsi tag HTML & Atributnya

FUNGSI TAG A HTML DAN SERTA ATRIBUT-ATRIBUTNYA

Tag a adalah salah satu dari beberapa tag html, sedangkan kebanyakan fungsinya ialah untuk membuat link. apa itu link? link adalah text atau

Tag a adalah salah satu dari beberapa tag html, sedangkan kebanyakan fungsinya ialah untuk membuat link.
apa itu link?, menurut saya link itu adalah sebuah text atau gambar yang apabila di klik akan mengarah ke document lain(lebih lengkap tentang link cari di google), sorry ya disini saya hanya share tentang tag a serta atribut-atributnya 

Contoh Dan Penulisan Sebuah Link Adalah Seperti Ini

<a href="http://www.indaam.com">indam.com</a>

Jadinya seperti ini
indaam.com

keterangan;

• Diawali dengan tag a
• Href adalah salah satu atribut yang di tambahkan kedalam tag a dimana value dari href ini adalah url
• Anggap saja url itu adalah sebuah alamat web
• Value dari href itu tidak mesti url, kita juga bisa memeri nilai mailto:, #idcss
• Indaam.com itu yang akan di tampilkan pada browser

Berikut beberapa atribut yang bisa ditambahkan kedalam tag a

• Title
• Rel
• Target
• Style
• Id
• Class

Berikut Keterangan Dan Fungsi Masing-Masing Atribut

Title=”Value”

Contoh

<a href="http://www.indaam.com" title="indam site">indam</a>

Jadinya seperti ini
indam

keterangan;

• Fungsi dari atribut title ini adalah untuk memberikan judul pada link yang kita buat tadi
• Value/nilai title ini bisa ditulis apa saja, terserahdan disarankan penulisan valuenya sama dengan isi link tersebut

Target=”Value”

Contoh

<a href="http://www.indaam.com/about" title="about indam" target="_blank">about</a>

Jadinya seperti ini
about

keterangan;

• Biasanya fungsi atribut ini untuk, membuat link, yang apabila di klik akan terbuka di tab baru, namun
• Kita juga bisa menyesuaikan value dari atribut ini, value dari atribut ini antara lain
• _blank, _self, _top(cari value lainnya di google)

Rel=”Value”

Contoh

<a href="http://www.indaam.com" title="indam site" rel="follow">indam</a>

Jadinya seperti ini
indam

keterangan;

• Fungsi dari atribut rel ini untuk memaberitahu robots search engine tentang keabsahan link yang kita buat tadi
• Value lain dari atribut rel adalah nofollow, bookmark, tag dan follow(yang aku tahu hanya tiga biji  )

Style=”Value”

Contoh

<a href="http://www.indaam.com" title="indam site" style="color:red; text-decoration:blink;">indam</a>

Jadinya seperti ini
indam

keterangan;

• Fungsi dari atribut ini, untuk memberi style pada link yang kita buat tadi, misalnya menentukan warna link, warna background, decoration text, ukuran font, dsa
• Sayangnya jika anda ingin menambahkan atribut style, sahabat harus paham/bisa css(saya akan bahas kedepannya)

Id=”Value”

Contoh

<a href="http://www.indaam.com" title="indam site" id="idyangsayabuatsebelumnya">indam</a>

Jadinya seperti ini
indam

keterangan;

• Tidak kelihatan kan perubahannya, yups karna saya tidak menambahkan id selectornya
• Jika sahabat ingin menambahkan atribut id, sahabat harus membuat sebuah style terlebih dahulu, contohnya seperti ini

<style type="text/css">
#idyangsayabuatsebelumnya
{background-color:lime;
font:normal bold 200% verdana;
width:300px;
}
</style>
<a href="http://www.indaam.com" title="indam site" id="idyangsayabuatsebelumnya">indam</a>

Maka jadinya akan seperti ini
indam
yah, sahabat harus bisa css(Insha Allah saya akan bahas di artikel berikutnya)

Class=”Value”

Contoh

<a href="http://www.indaam.com" title="indam site" class="classyangsayabuatsebelumnya">indam</a>

Keterangan;

• Hampir sama seperti atribut id, hanya saja class itu pakai [dot], sedangkan id pakai #{pager}
• Dan perlu dipahami, penggunaan ID hanya boleh sekali, sedankan class ‘bisa berulang’

Mungkin cuma itu untuk sekarang, oia dalam penulisan sebuah link jangan menambahkan atribut yang sama sekaligus, contoh salah

<a href="http://www.indaam.com" title="indam site" title="indam" rel="follow" rel="nofollow">indam</a>

Keterangan;

• Sangat jelas kesalahan diatas, saya membuat dua atribut yang sama title dan rel

Oops lupa, link bergambar
contoh

<a href="http://www.indaam.com/"><img src="url gambar" alt="keteranngan gambar"/></a>

Tentang link bergambar ini, akan saya bahas di postinngan selanjutnya