Best Author
sangdedi

743,741
octa

486,703
fitrotinnikm

456,617
idjah

445,235
dwi

313,717
adit

310,206
resta-andara

275,593
benedict

261,599
rahadian

241,010
bara

228,942
nabilalalala

216,928
kurnitap_

154,132
kuswanto

140,515
suranto

100,765
admin

99,032
iwan

80,055
kupukupu

78,106

IMG

Tag ini merupakan singkatan dari IMAGE yang berfungsi untuk menampilkan gambar pada halaman HTML kita. Pada tag ini dibutuhkan dua atribut penting yaitu : SRC dan ALT.

SRC

SRC merupakan singkatan dari SOURCE yang dalam bahasa Indonesia berarti sumber. Atribut ini berfungsi untuk memberi tahu dimana letak dari sumber gambar yang ingin ditampilkan. Sumber gambar dapat diambil dari komputer sendiri maupun dari sumber yang ada di internet.

Sebagai contoh :

Bayangkan kita memiliki gambar pada direktori D:\dokumen\gambar\ bernama klikbelajar.gif
Lalu kita akan membuat file HTML kita pada direktori yang sama dengan direktori gambar,
jika kita ingin menampilkan gambar yang bernama klikbelajar.gif yang terdapat pada direktori D:\dokumen\gambar\
maka kita cukup menuliskan tag HTML seperti berikut :

<IMG SRC="klikbelajar.gif">

Contoh diatas merupakan contoh sederhana jika kita menempatkan file HTML kita pada direktori yang sama dengan file gambar. Tetapi seandainya kita ingin menaruh File HTML kita di direktori yang berlainan maka penulisan tag HTML-nya pun juga akan sedikit berbeda.

Jika kita ingin menaruh file HTML yang kita buat pada direktori D:\dokumen\gambar\belajarHTML maka penulisan tag HTML yang dilakukan akan seperti berikut :

<IMG SRC="../klikbelajar.gif">  

Perhatikan SRC=”../klikbelajar.gif” pada penulisan diatas, tanda ../ menunjukkan bahwa sumber yang akan ditampilkan terletak satu tingkat diatas file HTML tersebut.

Seandainya kita ingin menempatkan file HTML kita pada direktori D:\dokumen\ maka kita dapat menuliskan tag HTML sebagai berikut :

<IMG SRC="gambar/klikbelajar.gif">

Jika sumber gambar diambil dari internet maka kita dapat menuliskan tag seperti berikut :

Contoh :

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg">  

Maka gambar yang ditampilkan akan diambil dari http://klikbelajar.com/konten/gambar/kodok.jpg.

ALT

Atribut ini digunakan untuk memberikan keterangan tambahan dari gambar. ALT merupakan kepanjangan dari ALTERNATIVE. Penggunaan atribut ini pada setiap gambar akan menghasilkan halaman yang efektif dan akan sangat mudah untuk dibaca oleh mesin pencari. Sebenarnya untuk menampilkan gambar cukup dengan menuliskan tag sebagai berikut :

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg"> 

Penulisan seperti pada tag diatas akan menjadi masalah ketika gambar yang ingin ditampilkan tidak dapat diketemukan (sudah terhapus) sehingga ketika tidak ditampilkan gambar yang dimaksud maka tidak ada keterangan apapun mengenai gambar tersebut, beda halnya jika kita menuliskan atribut ALT pada tag HTML kita.

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" ALT="klikbelajar">  

Saat tidak ada gambar yang ditampilkan maka akan terdapat keterangan tambahan.
Bandingkan kedua syntax berikut :

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok123.jpg">
<IMG SRC="http://klikbelajar.com/konten/gambar/kodok123.jpg" ALT="klikbelajar">  

p.s : kodok123.jpg tidak ada dalam server.

WIDTH & HEIGHT

Atribut ini digunakan untuk menentukan ukuran dari gambar.

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" WIDTH="205" HEIGHT="157">  

Jika ukurannya tidak ditentukkan maka gambar akan ditampilkan pada ukuran aslinya, seperti contoh dibawah :

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg">  

Penentuan ukuran gambar yang dituliskan pada contoh diatas menggunakan satuan pixel, kita juga dapat menggunakan satuan lain yaitu persen (%).

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" WIDTH="50%" HEIGHT="50%"> 

Tag diatas menunjukkan bahwa ditampilkan gambar dengan ukuran lebar 50% dan tinggi 50% dari ukuran semula.

ALIGN

Atribut ini digunakan untuk menentukan posisi dari gambar.

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" ALIGN="LEFT">  

Pada contoh diatas gambar diatur agar rata ke kiri.

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" ALIGN="RIGHT">  

Pada contoh diatas gambar diatur agar rata ke kanan.

BORDER

Atribut ini digunakan untuk menambahkan border pada gambar.

<IMG SRC="http://klikbelajar.com/konten/gambar/kodok.jpg" border="2">  

Maka akan terlihat border setebal 2 pixel di sekeliling gambar.