Dasar-Dasar HTML Untuk Blogger Pemula (2) | Memasang Images (Gambar)

Ini berkaitan dengan pembahasan sebelumnya tentang Dasar-Dasar HTML Untuk Blogger Pemula (1), dan kali ini akan saya akan belajar mengenai bagaimana memasang dan mengoptimalkan gambar untuk menemani artikel anda. Menurut pendapat ahli SEO, gambar atau images juga bisa memberikan poin pada peningkatan SERP suatu posting atau artikel. Oleh karena itu, mari kita coba untuk belajar bagaimana mengoptimalkan image atau gambar dalam artikel kita.

Langsung saja, berikut dasar-dasar html (2), yaitu memasang images (gambar):

1. Dasar memasang images atau gambar
Sebelumnya tentu anda harus mengupload gambar anda baik di server hosting anda atau di server gratis seperti photobucket atau ziddu atau server yang lain..
Berikut adalah contoh gambar yang sudah saya upload di photobucket dan dasar pemanggilan gambar adalah sebagai berikut:

<img src="http://i463.photobucket.com/albums/qq353/zammax60/stopdreaming-1.jpg">

Hasilnya adalah sebagai berikut:


Anda tinggal mengganti kode URL dengan kode url image anda.

2. Memasang gambar (images) yang dapat diklik (link)
Anda tinggal mengganti URL blog anda atau artikel anda dan link image dimana anda upload gambar tersebut:

<a href="http://anekalagu.com"><img src=" http://i463.photobucket.com/albums/qq353/zammax60/stopdreaming-1.jpg" border="0"></a>

Hasil dari kode html di atas adalah sebagai berikut:

3. Menyatukan Text dengan images (gambar)
Untuk memberi kesan menyatu dengan text agar lebih rapi dan bagus, maka anda perlu menyatukan gambar dengan text, baik diletakkan sebelah kanan atau kiri text, yaitu sebagai berikut:

<img src="http://i463.photobucket.com/albums/qq353/zammax60/stopdreaming-1.jpg" style="float: left; margin: 0px 5px 5px 0px;">

Dan anda dapat melihat hasilnya sekarang bahwa image berada di samping kiri text. Sekarang perhatikan tulisan margin: 0px 5px 5px 0px; 0px pertama=margin top (batas atas), 5px=margin kanan, 5px=margin bawah dan 0px terakhir= margin kiri. Ingat untuk mengupload gambar yang sesuai saja, jangan terlalu besar biar singkron.

4. Memasang image/gambar di tengah (center)

<div align="center"><img src="http://i463.photobucket.com/albums/qq353/zammax60/stopdreaming-1.jpg"></div>

Anda tinggal mengganti link images atau gambar dimana anda upload sebelumnya..
Hasilnya adalah seperti dibawah ini:

Ok untuk sementara itu dulu yang dapat saya sampaikan semoga bermanfaat bagi anda yang memulai belajar dasar-dasar html terutama memaksimalkan gambar atau image agar terlihat rapi dan dapat juga untuk link ke blog atau produk anda..

By zam
Lihat Daftar Menteri Kabinet Indoneisa Bersatu Jilid II