Kode HTML Wajib Bagi Blogger

Bagi Anda yang sudah lama berkecimpung di dunia online (web/blog) tentu sudah tahu dan akrap dengan yang namanya HTML. Tapi bagaimana dengan yang masih NEWBI ? Singkatnya HTML (Hypertext Markup Language) adalah merupakan suatu standar bahasa program yang di gunakan untuk menampilkan dokumen-dokumen web (salah satu bahasa pemograman untuk membuat website/blog).

Saya tidak akan membahas detail tentang HTML yang ngejlimet itu, bukan karena saya tidak mau tapi karena saya memang bukan ahlinya, hehehe.... Yang ingin saya sharing kali ini adalah kode-kode/tag-tag HTML yang wajib menurut saya kita ketahui bila terjun ke dunia online seperti blog, website, dan bisnis online. terutama bagi pengguna blogspot seperti saya, upss.. ketauan dech kalau masih make gratisan, hehehe....

Kenapa blogspot? karena blogspot miskin plugin, tools, dan feature sehingga terkadang kita harus mengutak-atik kode HTML-nya sendiri. Lain dengan wordpress yang kaya dengan plugin dan feature, kita tinggal klak klik and drag langsung beres, tanpa harus banyak bergumul dengan kode-kode HTML.

Pertama kali terjun ke dunia online, web dan blog, saya sempat ragu dan bertanya, apa saya harus menguasai kode2/tag-tag HTML baru bisa berhasil di dunia online?, baru lihat kode-kode aja udah bikin migren, apalagi suruh bikin template sendiri. Tapi dengan seiring waktu saya pun mulai mengerti dan bisa memilah-milah mana kode2 HTMLyang perlu saya ketahui dan mana yang ngak. Ini tak lepas dari tujuan utama saya terjun ke dunia online, yaitu bisnis online (internet marketing) atau bahasa parungnya Make Money From Blog, hehehe.... kayak Tukul aja.

Kayaknya pengantarnya kepanjangan ya...? ya udah deh... kita langsung aja ke inti pembahasan.

Membuat Anchor Link

Anchor link adalah sebuah kata atau pharase kata yang mengandung link URL, apabila diklik akan menuju ke suatu alamat URL tertentu.

Contoh :

Kata TONGKONAN ingin diarahkan ke alamat URL "http://tongkonanku.blogspot.com" maka kode HTML-nya adalah :

<a href="http://tongkonanku.blogspot.com">TONGKONAN</a>

Maka jadinya akan seperti ini TONGKONAN.

Dari kode HTML di atas bisa kita tambahkan kode HTML lain (perintah lain), misalnya supaya apabila anchor linknya diklik maka alamat URL yang di tuju akan terbuka di window baru (new window) atau tab baru (new tab). Kode yang ditambahkan adalah target="new" atau target="_blank" terserah mau menggunakan yang mana, fungsinya sama saja. Contoh penerapannya sbb :

<a href="http://tongkonanku.blogspot.com" target="_blank">TONGKONAN</a>

maka hasilnya akan akan seperti ini TONGKONAN, silahkan klik untuk melihat efeknya.

kita juga bisa menambahkan perintah title="isi keterangan" supaya saat kursor menyentuh anchor link, akan muncul tulisan sesuai dengan yang anda inginkan.

<a title="Personal Blog" href="http://tongkonanku.blogspot.com">TONGKONAN</a>

hasilnya seperti ini TONGKONAN, arahkan kursor anda ke kata tongkonan untuk melihat efeknya.

Memunculkan dan mengarahkan Image/Gambar ke alamat URL tertentu

Kadang kala ada sesuatu yang tidak bisa kta jelaskan dengan bahasa tulisan maupun lisan, dan itu hanya bisa dijelaskan dengan bahasa visual melalui gambar/image, flash (animasi) atau video (film). Maka dari itu Kode atau perintah HTML untuk menampilkan dan mengarahkan gambar/image sangat perlu kita kuasai.

Memunculkan Image/Gambar

Kode HTML yang digunakan untuk memunculkan gambar adalah <img src="alamat URL image/gambar"> . Kita juga bisa menambahkan perintah/kode untuk mengatur atau menentukan ukuran gambar/image height="131" dan width="129" ganti angka dalam tanda petik sesuai ukuran gambar yang anda inginkan. Jika perintah height dan width tidak ditambahkan maka gambar akan muncul sesuai ukuran aslinya.

Contoh :

Saya ingin menampil sebuah image yang beralamat di http://img144.imageshack.us/img144/2949/spyenginecopyyj4.jpg dengan lebar=180 dan tinggi=120 (satuan ukuran mengunakan pixel) maka kode HTML-nya adalah :

<img src="http://img144.imageshack.us/img144/2949/spyenginecopyyj4.jpg" height="155" width="217">

Maka Hasilnya seperti ini :

Kode lain yang bisa kita tambahkan (hight recomended) yaitu ALT="keteragan gambar/keyword"

<img alt="Spyder Man" src="http://feriyunus.page.google.com/ganteng.jpg" height="155" width="217">

Dengan menambahkan kode ini maka apabila ada orang yang mencari image/gambar di mesin pencari (search engine) dengan kata kunci yang berhubungan dengan keteranagan gambar/image pada blog kita, maka gambar/image di blog kita akan muncul di halaman hasil pencarian search engine. Keuntungannya adalah apabila gambar tersebut diklik maka orang tersebut akan langsung diarahkan ke blog/website kita (ini merupakan salah satu teknik SEO).

Mengarahkan Image ke alamat URL tertentu

Image/gambar juga bisa kita arahkan ke suatu alamat URL tertentu. Jadi ketika gambar tersebut diklik, maka kita akan dibawa ke alamat URL yang telah kita tentukan. Caranya sangat mudah, tinggal menggabungkan kode2 HTML yang telah kita bahas di atas.

Contoh :

Gambar/Image dengan yang beralamat di http://img150.imageshack.us/img150/8258/parisve2.jpg ingin saya arahkan ke htt://tongkonanku.blogpot.com maka kode HTML-nya adalah :

<a href="http://img150.imageshack.us/img150/8258/parisve2.jpg"><img src="htt://feriyunus.page.google.com/ganteng.jpg"></a>

Perintah2 lain yang telah kita bahas sebelumnya di atas, juga bisa kita tambahkan sehingga jadinya seperti ini :

<a title="TONGKONAN" href="htt://tongkonanku.blogspot.com" target="new"><img alt="Pantai ParangTritis Yogyakarta" src="htt://feriyunus.page.google.com/ganteng.jpg" height="155" widht="217"></a>

Maka hasilnya seperti ini :

Sebenarnya masih ada beberapa Kode HTML lagi yang Wajib kita ketahui/kuasai bila kita terjun ke dunia web atau blog. seperti membuat teks tebal, miring, bergaris bawah, kemudian menempatkan gambar di sebelah kiri, tengah dan kanan. Tapi karena berhubung saya udah capek dan ngantuk, maka cukup sekian dulu kali ye..., udah ngantuk banget nich.

Untuk kode HTML lainnya, kita bahas di lain waktu aja ya...