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

Bekerja keras sekarang, merasakan hasilnya nanti; bermalas-malas sekarang, merasakan akibatnya nanti. John C. Maxwell

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

Last Modif at July 7th, 2011

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.net">indam.com</a>

jadinya seperti ini
indaam.net

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.net 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.net" 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.net/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.net" 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.net" 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.net" 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.net" 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.net" 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.net" 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.net/"><img src="url gambar" alt="keteranngan gambar"/></a>

tentang link bergambar ini, akan saya bahas di postinngan selanjutnya
semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

10 thoughts on “Fungsi tag a HTML dan serta atribut-atributnya”

  1. dani says:

    Yakin atribut title mestinya diisi dengan nilai yang sama dengan anchor text? :)

    1. indam says:

      sebaiknya, namun tidak harus

  2. Jejen says:

    terimakasih artikelnya sangat membantu, tp gan saya mo nanya cara menyisipkan image pada website gimana?

    1. indam says:

      maksudnya menyisipkan image bagagaimana bro?
      background atau atau di postingan?

  3. Zutonx Blog says:

    Thanx U banget Mr Indam…sangat membantu…nice share…Oh ya Mas kalo linknya berberntuk image atau gambar….itu kodenya bagaimana Mas???

  4. apink says:

    sangat jelas gan tutorialnya,.. jadi mudeng sayanya.. thanks

  5. rosyros says:

    makasih infonya, salam kenal dari saya yang lagi belajar ngeblog, mudahan2han tidak jeblog hehehehe…………

  6. fitri says:

    thank you so much,,

  7. Zulkifli says:

    infonya sangat bermanfaat, thanks.

  8. alam says:

    kalau fungsi kode seperti ini apa ber pengaruh terhadap SEO anchor text

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-