Best Author
sangdedi

743,603
octa

486,235
fitrotinnikm

456,615
idjah

445,157
dwi

313,549
adit

310,096
resta-andara

275,123
benedict

261,583
rahadian

240,910
bara

228,942
nabilalalala

216,882
kurnitap_

154,132
kuswanto

140,175
suranto

100,765
admin

98,982
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.