HTML Dan Cara Mengaplikasikannya | Tips HTML

HTML 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://seminkota.blogspot.com/p/free-backlink-builder-get-quality.html">berbagi berita terkini<a/>

Pada browser, tag tersebut akan ditampilkan seperti ini: 

 berbagi berita terkini

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: 

1. Target

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://seminkota.blogspot.com/p/free-backlink-builder-get-quality.html" target="_blank">berbagi berita terkini<a/>

Tampilan pada browser tetap sama:

berbagi berita terkini

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.

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

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> 

Link Pada Gambar (Image Link)

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.