Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting

HTML Link - Hyperlink - image link

HTML link atau hyperlink, adalah kata, sekumpulan kata, ataupun gambar yang apabila di-klik akan menuju ke dokumen/halaman lain atau bagian lain dari dokumen/halaman yang sama.  Link di dalam dunia web tentu saja selalu kita jumpai dan sering kita fungsikan. Dalam dunia blog dan para blogger, sangat penting untuk mengetahui hal mendasar mengenai HTML link berserta atribut-atribut pentingnya agar dapat membuat navigasi link yang sesuai dengan yang diinginkan dan dibutuhkan, baik oleh pemilik blog itu sendiri maupun bagi pengunjung.

Tag dasar HTML link (hyperlink) adalah <a>, yang bisa digunakan dengan atribut href yang mengacu ke dokumen lain dan juga untuk membuat bookmark dengan menggunakan atribut name.

Kode HTML untuk sebuah link adalah:
<a href="url">anchor text<a/>
Kita lihat disitu digunakan atribut inti href yang mengacu ke url dari halaman yang dituju, sedangkan anchor text berada di antara dua tag a pembuka: <a>, dan penutup: </a>.
Contoh:
<a href="http://buka-rahasia.blogspot.com/p/free-backlink-builder-get-quality.html">Free Backlink Builder<a/>
Pada browser, tag tersebut akan ditampilkan seperti ini:
Free Backlink Builder
Selain atribut inti href, terdapat pula beberapa atribut penting lain yang dapat ditambahkan pada tag <a>, misalnya target, name, rel, title, dan masih banyak lagi lainnya. Pada kesempatan kali ini saya akan membahas beberapa atribut yang lazim dan fungsional saja untuk blog/website:

Atribut target digunakan sebagai perintah pada browser untuk menampilkan dokumen dengan cara yang lebih spesifik. Secara default tanpa atribut target, browser akan membuka halaman tertentu pada window/tab yang sama. Dengan atribut traget, kita bisa menampilkan suatu halaman di tab/window lain yang lebih baru atau bagian frame lain pada suatu halaman web (bagi halaman web yang memiliki elemen frame).
contoh:
<a href="http://buka-rahasia.blogspot.com/p/free-backlink-builder-get-quality.html" target="_blank">Free Backlink Builder<a/>
Tampilan pada browser tetap sama:
Free Backlink Builder
Silahkan klik link tersebut untuk melihat perbedaanya dengan link yang di atasnya.

Target memiliki perintah bermacam-macam, misalnya self, parent, top, new, dan lain-lain. untuk melihat tutorial mengenai atribut target, membuat link terbuka di window/tab baru, dan membuat seluruh link blog secara otomatis terbuka di window/tab baru, silahkan buka: Cara Membuat Link Terbuka di Window/Tab Baru dan Variasinya.

2.Title
Title adalah bagian dari link yang berfungsi memberikan penjelasan yang lebih detil ataupun sama mengenai sebuah link. Title muncul sebagai tooltip ketika mouse berada di atas link.
Contoh penggunaan atribut title:
<a href="http://buka-rahasia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" title="tutorial lengkap membuat menu breadcrumbs di blogger">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
berikut tampilan linknya, hover mouse anda di atas link:
Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
3. Rel (relationship)
Atibut rel menunjukkan keterkaitan dengan dokumen/halaman yang sama atau dokumen/halaman lain yang dituju. Atribut ini bersifat invisible bagi browser dan difungsikan sebagai informasi tentang sebuah link bagi search engine. Ada begitu banyak perintah pada atribut rel, yang paling kita kenal adalah rel="nofollow", yang merupakan perintah bagi search engine untuk mengabaikan suatu link pada sebuah halaman website/blog. atribut rel="nofollow" utamanya digunakan untuk menghindari spam. Dalam dunia SEO, atribut ini digunakan oleh blogger atau webmaster pada link-link yang tidak ingin di-indeks oleh Google, biasanya untuk menghindari link farm dan meyeimbangkan persentase jumlah inbound dan outbound links, karena jumlah outbound link yang melebihi jumlah inbound link dapat berakibat buruk pada SEO blog/website.
Contoh penggunaan atributnya:
<a href="http://buka-rahasia.blogspot.com/2011/05/cara-membuat-menu-breadcrumbs-blogger.html" rel="nofollow">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
Gambar dapat pula memiliki link apabila kita menambahkan tag link pada tag gambar.
Tag dasar HTML gambar adalah:
<img src="url gambar"/>
Kita dapat membuat gambar mengandung link dengan memasukkannya diantara tag link, sebagaimana memasukkan anchor text:
<a href=url yang dituju"><img src="url gambar"/><a/>
Secara default, ketika kita mengupload dan menghosting gambar di situs-situs tertentu dan juga di Blogger/Blogspot, gambar yang diupload secara otomatis telah ditanami link. Link tersebut menuju ke url gambar itu sendiri. Sebagai contoh adalah gambar berikut (hover mouse ke atas gambar dan lihat link pada footer browser):

Ketika mengupload ke Blogger (i.e Picasa Web Album), secara otomatis gambar dan link akan memiliki url yang sama:
(contoh tanpa CSS Styling)
<a href="http://2.bp.blogspot.com/-ahJea84fdnI/ThE4E-sbxZI/AAAAAAAAAqo/87TOugy4ZyA/s1600/header.png"> <img src="http://2.bp.blogspot.com/-ahJea84fdnI/ThE4E-sbxZI/AAAAAAAAAqo/87TOugy4ZyA/s1600/header.png"/></a>
Untuk membuat gambar memiliki link ke halaman blog/website yang diinginkan, maka harus mengganti link default pada tag <a>:
<a href="http://buka-rahasia.blogspot.com"> <img src="http://2.bp.blogspot.com/-ahJea84fdnI/ThE4E-sbxZI/AAAAAAAAAqo/87TOugy4ZyA/s1600/header.png"/></a>
Hover mouse di atas gambar di atas dan lihat perbedaan link dengan gambar sebelumnya.

Bagi dunia SEO, link tersebut menjadi tidak sia-sia karena tidak menuju ke url gambar, padahal bukan gambar itu yang sedang dioptimasi, kecuali bagi yang memang ingin gambarnya di-SEO-kan. Untuk memperkuat lagi dan agar search engine dapat membacanya, tambahkan atribut alt. Atribut ini akan dibaca sebagai anchor text oleh search engine. Alt berfungsi menjadi anchor text yang muncul di browser ketika gambar gagal dimuat, sehingga pengunjung tetap dapat melihat ada link di bagian tertentu halaman blog/website.
Contoh penggunaan atribut alt:
<a href="http://buka-rahasia.blogspot.com"> <img alt="Tips-Tricks Blogger | SEO Blogspot" src="http://2.bp.blogspot.com/-ahJea84fdnI/ThE4E-sbxZI/AAAAAAAAAqo/87TOugy4ZyA/s1600/header.png"/></a>
Jika gambar belum/gagal termuat, dia akan muncul sebagai link dengan anchor text:

Okay, itu tadi sekilas mengenai HTML link & Image link, silahkan bereksperimen dengan anchor text, atribut link, dan juga link gambar. Thanks.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Ahmad Khoirul Azmee’s Registered & Protected Blog Entry
http://buka-rahasia.blogspot.com/2011/05/html-link-gambar-dan-atribut-penting.html
E2D1M-7W4GV-67ANK
Copyright:All Rights Reserved
Registered:Wed May 11 01:49:31 UTC 2011
Fingerprint:7af41f750aab7a0a698da959449823142cc08f352c0ff741027162dba50a0e18
Title:Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting
http://myfreecopyright.com/registered_mcn/BLYTH-K75HM-MBYTY/May_2011/E2D1M-7W4GV-67ANK

Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 32 Comment(s):

viki oktavian said...

mAS ajarin saya donk gimana bikin kotak link soalnya saya masih pendatang baru di dunia blog , bisa gak ajarin ?

Ahmad Khoirul Azmee said...

kotak link yang bagaimana yang dimaksud? diperjelas dulu ya.

Ahmad Khoirul Azmee said...

oya, kalo mau nanya2 panjang lebar lewat FB atao contact aja, link FBnya di bawah, okay. lewat comment gak efektif soalnya.

viki oktavian said...

mas saya sudah kirim permintaan pertemanan di fb

Manda said...

ga disangka blognya Mantabs bgt....
ajarin dong....

Ahmad Khoirul Azmee said...

hehe, oke siap nda, kapan2 belajar bareng.. :D

Pelangi Toko Onlie said...

Terima kasih tips2 nya
saya coba2 di blog saya

Buddy said...

mantap bro..............

numpang lewat bro......

e-lyricsmode.blogspot.com said...

dasar ...tpi kadang terlupakan

techfavo said...

nice share.. kebetulan dapat post ini waktu search di google..karna ane lagi butuh HTML code utk pasang link di postingan blog pakai text :)

Chusnul said...

mas saya dah coba bikin blog sesuai yg mas ajarin tapi masih ada yg krg paham ganti icon link? msh blm jelas...spt blog saya ini:
http://bisnishalal-nungkie.blogspot.com
iconnya sy mo ganti spt gambar mouse gimana caranya

Ahmad Khoirul Azmee said...

yang dimaksud dengan icon link gimana ya mbak CHusnul? mohon diperjelas lagi ya. :D Insya Allah saya siap bantu jika mampu.

total said...

gan , mo tanya , setiap link yg di blog saya jika di klik akan membuka tab baru , caranya bikin normal ( membuka dihalaman yang sama ) gimana ya ? thanks gan

Ahmad Khoirul Azmee said...

cari yg seperti ini di template HTML, letaknya di antara <head> dan </head>:
<base target='_blank'/> atau <base target='blank'/>
lalu hapus & save.
Jika tidak ada, maka anda harus menghapus secara manual atribut2 target di bagian link, misalnya target='blank', target='_blank', target='top', target='new', dan seterusnya yg menggunakan atribut target.

Budi Hartono said...

thanks tips and triknya

phoneseluler said...

makasih infonya kang, sangat bermanfaat!

TIMON ADIYOSO said...

Mantappppppppppppppp

pulsa said...

bagaiman cara y agar anchor text muncul ketika mouse di dekatkan ke banner / gbr tersebut???

Ahmad Khoirul Azmee said...

anchor text bagaimana sob? apakah yg anda maksud title?
jika iya tinggal tambahkan atribut title="text disini" di dalam tag gambar.

Heruno said...

terimakasih banyak mas admin. artikel ini sangat membantu saya. saya banyak belajar dari artikel yang ada di blog ini...
mudah-mudahan ilmunya makin nambah, biyar makin banyak di share juga. hehehehee

Cara Aqiqah said...

selain di kasih link, janganlupa setiap gambar di isi namanya dengan keyword, biasanya manjur juga untuk seo

carno said...

thank you gan,bgus bngt,walapn blm jd insya allah sy ushkan......?

Inspiratif said...

Bagus sekali,, Artikel-artikel di blog ini sangat bermanfaat buat saya. Mudah-mudahan ilmunya makin nambah and makin manfaat!!!

MaYaSTA said...

Salam kenal kang ....
Terima kasih infonya ...
artikelnya Sangat jelas sekali .... Hatur nuhun

Tifan Dwi Avianto said...

Maaf ka Azmee, kalo cara buat link seperti hidup atau jika cursor diletakan di link, warna link semakin menebal perlahan gimana ya?
CONTOH: space iklan dibawah gambar header yang jika cursor diletakan warna akan menebal menjadi oranye.
mohon tanggapannya :)

Regards

Berbagi Kreativitas said...

Untuk atribut Alt ada yang ingin Saya tanyakan mas bro.. Saya coba cek melalui analisis seo dibing mengkonfirmasikan bahwa atribut alt tidak dapat ditemukan, padahal setiap Saya pasang gambar atribut tersebut Saya gunakan, memang ada beberapa yang tidak apa itu mempengaruhi. Ditemplate sendiri ada tidak atribut alt dipasang agar clear analis SEO bing-Nya? Bisa kasih pencerahan sedikit mas? terima kasih

Ahmad Khoirul Azmi said...

Halo sobat. Sampai saat ini, Bing WMT itu sebenarnya masih beta alias belum kelar uji cobanya. Terlebih lagi apabila digunakan untuk menganalisis halaman berformat XML seperti blogger ini, yang isinya sebenarnya terdiri dari widget2 xml.

Kalo format sudah benar:
<img alt="text text text" src="http://gambar.com/gambar.jpg" />

berarti tanpa harus dianalisis itu sudah tepat sob.

allia furniture said...

Mas maaf saya mau tanya sedikt penjelasanya
Kalau Imageanchor"1" itu fungsi buat apa aya mas, apakah ada penting juga buat seo atau serp bila kita masukan title di "1"

Terima kasih mas artikel yang bagus

Pesta Obral said...

Suwun gan lengkap plus gamblang banget ne artikelnya........

Randev Strawhat said...

kira2 kegunaan dari masing2 itu apa yaa gan??

cumakatakata said...

wah, membantu nih Gan, izin di simpan (buat di pake sendiri)

rio said...

mantab mas blognya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap