Tag IMG dan Atributnya ~ Bun No Ichi

SRC
WIDTH & HEIGHT
ALIGN
ALT
BORDER

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 bunnoichi.gif yang terdapat pada direktori D:\dokumen\gambar\ maka kita dapat menuliskan tag HTML seperti berikut :

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 :

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 :

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

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

<IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_iTvQ76a9CAAjsQtx1vwRoWew_Yftem_CdT3_1wL99hcMsk3lGEUln_fphLzex2iLUdZM_rwSTH4yvyG9hPYzdbJLJuOXo_jL1FGXXYLKlZ_MOMj8CgG11y-YTn2ooAK_Fo2TfRh8BHo/s400/yui015.gif" ALT="Ini Foto YUI">

Maka gambar yang ditampilkan akan diambil dari https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_iTvQ76a9CAAjsQtx1vwRoWew_Yftem_CdT3_1wL99hcMsk3lGEUln_fphLzex2iLUdZM_rwSTH4yvyG9hPYzdbJLJuOXo_jL1FGXXYLKlZ_MOMj8CgG11y-YTn2ooAK_Fo2TfRh8BHo/s400/yui015.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://bunnoichi.blogspot.com/images/YUI.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://bunnoichi.blogspot.com/images/klikbelajar.gif" ALT="Ini foto YUI">

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

Ini Foto YUI

WIDTH & HEIGHT

Atribut ini digunakan untuk menentukan ukuran dari gambar.

Contoh penulisan :

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

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

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 :