Menambahkan Gambar Dengan HTML Menggunakan Tag IMG

IMG HTML

Pernahkah Anda mendengar Tag IMG ??

Bagaimana Cara Menampilkan Gambar dengan HTML ??

HTML IMAGE TAG

Tag Image digunakan untuk menampilkan gambar kedalam halaman web, karna tag ini termasuk kedalam "single tag" maka tag ini dituliskan tanpa tag penutup. Penulisan dasar tag ini seperti berikut <img/>.

Attribut SRC

Attribut SRC adalah singkatan dari source (sumber), merupakan attribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.

Gambar yang bisa ditampilkan oleh tag IMG dan attribut SRC ini berupa type JPEG/JPG, PNG dan GIF.

Untuk memulainya, sediakan sebuah gambar yang ingin ditampilkan dan letakkan gambar tersebut kedalam satu folder yang sama dengan file html yang akan dibuat.

Dibawah ini saya menggunakan sebuah gambar penguins.jpg yang di letakkan di dalam folder gambar dan akan di tampilkan oleh file HTML dengan nama img.html.

Syntax :

<img src="penguins.jpg"/>

Sekarang coba tampilkan pada web browser milik Anda. Jika gamar yang ditampilkan berukuran terlalu besar kita bisa menambahkan ukuran yang kita tentukan dengan attribut width dan attribut weight.

Disini saya akan memberikan ukuran untuk gambar penguins tersebut dengan ukuran lebar 200px dan tinggi 100px (pixel).

Syntax :

<img src="penguins.jpg" height="100px" width="200px"/>

Selain ketiga attribut tersebut kita bisa menambahkan attribut ALT. Attribut ALT ini adalah singkatan dari Alternative Description, dimana ALT digunakan untuk menampilkan keterangan gambar jika gambar tersebut gagal untuk ditampilkan oleh browser atas sebab gambar salah nama , salah pemanggilan lokasi ataupun jika web browser telah disetting untuk tidak menampilkan gambar.

Syntax :

<img src="penguins.jpg" height="100px" width="200px" alt="Gambar keluarga penguins"/>

Ada satu attribut lagi yang bisa Anda tambahkan kedalam tag IMG tersebut, yaitu attribut TITLE. Attribut TITLE berfungsi untuk menampilkan keterangan gambar namun disaat kursor berada diatas gambar tersebut.

Syntax :

<img src="penguins.jpg" height="100px" width="200px" alt="Gambar keluarga penguins" title="gambar penguins"/>

Hasil Akhir :

Penggunaan Tag Image

Selamat ber-Experiment !!!

Terima Kasih!!!

Wassalamu'alaikum Warohmatullohi Wabarokatuh...