HTML link atau hyperlink, merupakan kata, sekumpulan kata, ataupun gambar yang apabila di-klik akan menuju ke dokumen/halaman lain atau penggalan lain dari dokumen/halaman yang sama. Link di dalam dunia web tentunya senantiasa kita temui dan sering kita fungsikan. Dalam dunia blog dan para blogger, sungguh penting untuk mengenali hal fundamental perihal HTML link berserta atribut-atribut pentingnya mudah-mudahan sanggup menghasilkan navigasi link yang cocok dengan yang diharapkan dan dibutuhkan, baik oleh pemilik blog itu sendiri maupun bagi pengunjung.
Tag dasar HTML link (hyperlink) merupakan <a>, yang sanggup digunakan dengan atribut href yang mengacu ke dokumen lain dan juga untuk menghasilkan bookmark dengan menggunakan atribut name.
Kode HTML untuk suatu 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="https://ujianhidup10.blogspot.com//p/free-backlink-builder-get-quality.html">Free Backlink Builder<a/>
Pada browser, tag tersebut akan ditampilkan seumpama ini:
Free Backlink Builder
Selain atribut inti href, terdapat pula beberapa atribut penting lain yang sanggup disertakan pada tag <a>, umpamanya target, name, rel, title, dan masih banyak lagi lainnya. Pada potensi kali ini aku akan membahas beberapa atribut yang umum dan fungsional saja untuk blog/website:
1. Target
Atribut sasaran digunakan selaku perintah pada browser untuk memperlihatkan 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 sanggup memperlihatkan suatu halaman di tab/window lain yang lebih gres atau penggalan frame lain pada suatu halaman web (bagi halaman web yang memiliki unsur frame).
contoh:
<a href="https://ujianhidup10.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 menyaksikan perbedaanya dengan link yang di atasnya.
Target memiliki perintah bermacam-macam, umpamanya self, parent, top, new, dan lain-lain. untuk menyaksikan panduan perihal atribut target, menghasilkan link terbuka di window/tab baru, dan menghasilkan 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 merupakan penggalan dari link yang berfungsi memperlihatkan klarifikasi yang lebih detil ataupun sama perihal suatu link. Title timbul selaku tooltip saat mouse berada di atas link.
Contoh penggunaan atribut title:
<a href="https://ujianhidup10.blogspot.com//search?q=membuat-link-terbuka-di-windowtab-baru" title="Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
berikut penampilan linknya, hover mouse anda di atas link:
Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot
3. Rel (relationship)
Atibut rel memperlihatkan keterkaitan dengan dokumen/halaman yang serupa atau dokumen/halaman lain yang dituju. Atribut ini bersifat invisible bagi browser dan difungsikan selaku info ihwal suatu link bagi search engine. Ada terlalu banyak perintah pada atribut rel, yang paling kita kenal merupakan rel="nofollow", yang merupakan perintah bagi search engine untuk mengabaikan suatu link pada suatu halaman website/blog. atribut rel="nofollow" terutama digunakan untuk menyingkir dari spam. Dalam dunia SEO, atribut ini digunakan oleh blogger atau webmaster pada link-link yang tak mau di-indeks oleh Google, umumnya untuk menyingkir dari link farm dan meyeimbangkan persentase jumlah inbound dan outbound links, sebab jumlah outbound link yang melampaui jumlah inbound link sanggup berakibat buruk pada SEO blog/website.
Contoh penggunaan atributnya:
<a href="https://ujianhidup10.blogspot.com//search?q=membuat-link-terbuka-di-windowtab-baru" rel="nofollow">Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot</a>
Gambar sanggup pula memiliki link apabila kita menyertakan tag link pada tag gambar.
Tag dasar HTML gambar adalah:
Tag dasar HTML gambar adalah:
<img src="url gambar"/>
Kita sanggup menghasilkan gambar mengandung link dengan memasukkannya diantara tag link, sebagaimana memasukkan anchor text:
<a href=url yang dituju"><img src="url gambar"/><a/>
Secara default, saat kita mengupload dan menghosting gambar di situs-situs tertentu dan juga di Blogger/Blogspot, gambar yang diupload secara otomatis sudah ditanami link. Link tersebut menuju ke url gambar itu sendiri. Sebagai pola merupakan 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1q5BFrArTEHVcp2PWb9pOpqaMwncEj_OSPfBmHjzphVTTsewoJ4qraO-uAZBKgb-3wdz-QKG0dKsGCFksLVArFPTBX4xBQ7QxVb5vBa0Gh_qUDuvKSK3BWlT4FiaOdZ6BE2oK9GVPK9ON/s1600/header.png"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1q5BFrArTEHVcp2PWb9pOpqaMwncEj_OSPfBmHjzphVTTsewoJ4qraO-uAZBKgb-3wdz-QKG0dKsGCFksLVArFPTBX4xBQ7QxVb5vBa0Gh_qUDuvKSK3BWlT4FiaOdZ6BE2oK9GVPK9ON/s1600/header.png"/></a>
Untuk menghasilkan gambar memiliki link ke halaman blog/website yang diinginkan, maka mesti mengubah link default pada tag <a>:
<a href="https://ujianhidup10.blogspot.com/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1q5BFrArTEHVcp2PWb9pOpqaMwncEj_OSPfBmHjzphVTTsewoJ4qraO-uAZBKgb-3wdz-QKG0dKsGCFksLVArFPTBX4xBQ7QxVb5vBa0Gh_qUDuvKSK3BWlT4FiaOdZ6BE2oK9GVPK9ON/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 tidak bermanfaat sebab 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 mudah-mudahan search engine sanggup membacanya, tambahkan atribut alt. Atribut ini akan dibaca selaku anchor text oleh search engine. Alt berfungsi menjadi anchor text yang timbul di browser saat gambar gagal dimuat, sehingga hadirin tetap sanggup menyaksikan ada link di penggalan tertentu halaman blog/website.
Contoh penggunaan atribut alt:
<a href="https://ujianhidup10.blogspot.com/"> <img alt="halaman lain atau penggalan lain dari dokumen Memahami HTML Link, Link Gambar, dan Atribut-atribut Penting" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1q5BFrArTEHVcp2PWb9pOpqaMwncEj_OSPfBmHjzphVTTsewoJ4qraO-uAZBKgb-3wdz-QKG0dKsGCFksLVArFPTBX4xBQ7QxVb5vBa0Gh_qUDuvKSK3BWlT4FiaOdZ6BE2oK9GVPK9ON/s1600/header.png"/></a>
Jika gambar belum/gagal termuat, ia akan timbul selaku link dengan anchor text:
Okay, itu tadi sekilas perihal HTML link & Image link, silahkan bereksperimen dengan anchor text, atribut link, dan juga link gambar. Thanks.
mencuri merupakan pekerjaan pengecut! © buka-rahasia.blogspot.com
Ahmad Khoirul Azmee’s Registered & Protected Blog Entry
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
mencuri merupakan pekerjaan pengecut! © buka-rahasia.blogspot.com
Ahmad Khoirul Azmee’s Registered & Protected Blog Entry
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
