Tag IMG dan Atributnya

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\ 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 dapat menuliskan tag HTML seperti berikut :

<IMG SRC=�klikbelajar.gif" ALT="klikbelajar"> 

<IMG SRC=�klikbelajar.gif" ALT="klikbelajar">

menghasilkan :



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" ALT="klikbelajar"> 

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

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" ALT="klikbelajar">

  

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

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

<IMG SRC=�http://ALAMAT_DOMAIN/NAMA_GAMBAR" ALT="NAMA"> 

<IMG SRC=�http://ALAMAT_DOMAIN/NAMA_GAMBAR" ALT="NAMA">

Contoh :

<IMG SRC="http://klikbelajar.com/images/klikbelajar.gif" ALT="klikbelajar">  

<IMG SRC="http://klikbelajar.com/images/klikbelajar.gif" ALT="klikbelajar">

Maka gambar yang ditampilkan akan diambil dari http://klikbelajar.com/images/klikbelajar.gif.

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/images/klikbelajar.gif">  

<IMG SRC=�http://klikbelajar.com/images/klikbelajar.gif">

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/images/klikbelajar.gif" ALT="klikbelajar"> 

<IMG SRC=�http://klikbelajar.com/images/klikbelajar.gif" ALT="klikbelajar">

Saat tidak ada gambar yang ditampilkan maka akan terdapat keterangan tambahan sebagai berikut :

WIDTH & HEIGHT

Atribut ini digunakan untuk menentukan ukuran dari gambar.
Contoh penulisan :

<IMG SRC="klikbelajar.gif" WIDTH=�205� HEIGHT=�157�> 

  

<IMG SRC="klikbelajar.gif" WIDTH=�205� HEIGHT=�157�>

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

<IMG SRC="klikbelajar.gif"> 

  

<IMG SRC="klikbelajar.gif">

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

<IMG SRC="klikbelajar.gif" WIDTH=�50%� HEIGHT=�50%�>  

<IMG SRC="klikbelajar.gif" 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.
Contoh :

<IMG SRC="klikbelajar.gif" ALIGN=�LEFT�> 

  

<IMG SRC="klikbelajar.gif" ALIGN=�LEFT�>

Pada contoh diatas gambar diatur agar rata ke kiri.

<IMG SRC="klikbelajar.gif" ALIGN=�RIGHT� >  

<IMG SRC="klikbelajar.gif" ALIGN=�RIGHT�>

Pada contoh diatas gambar diatur agar rata ke kanan.

BORDER

Atribut ini digunakan untuk menambahkan border pada gambar.
Contoh penulisan :

<IMG SRC="klikbelajar.gif" border=�2�>

   

<IMG SRC="klikbelajar.gif" border=�2�>

Maka akan terlihat border setebal 2 pixel di sekeliling gambar.