Tutorial HTML : Mengenal Tag Image

Sebuah halaman web tentu saja tidak indah jika tidak dilengkapi dengan gambar. Untuk menambahkan gambar dihalaman web kita harus memahami prinsip dasarnya. Apakah prinsip yang paling mendasar tersebut ? Format gambar yang direkomendasikan untuk halaman web haruslah berformat .jpg, .png dan .gif. Sedangkan untuk format lain seperti, .bmp tidaklah dianjurkan, karena memiliki kapasitas file yang besar sehingga proses loading akan makin lambat. Jika telah memahami prinsipnya, berikutnya adalah bagaimana cara memasukkannya kedalam halaman web.

Pada tulisan kali ini saya ingin berbagi tentang Mengenal Tag Images <img>. Tag ini digunakan untuk menampilkan image atau gambar pada halaman web. Sebagai contoh dalam artikel ini saya menggunakan gambar berformat PNG.

Untuk memasukkan gambar kita perlu menuliskan tag seperti dibawah ini :

<img src="gambar.png" />

Atau

<img src="http://www.belajarpc.com/gambar.png" />

<img..> adalah tag utama untuk memasukkan gambar. Sedangkan src=”….” untuk menentukan lokasi dari file gambar. Pada contoh pertama lokasi gambar berada sama dengan lokasi file html anda. Sedangkan contoh kedua, kita merujuk file dari lokasi lain.

Hasilnya bisa kita lihat seperti contoh dibawah ini :

Kode :

<img src="http://www.belajarpc.com/data/twitter.png" />

hasilnya :

Sampai disini pasti sudah paham semuakan ? 🙂

Menentukan Ukuran gambar <width & height>

Secara default ukuran gambar adalah sesuai dengan ukuran aslinya. Gambar diatas memilki ukuran 128×128 px. Untuk menentukan ukuran kita dapat menambahkan atribut width untuk lebar dan height untuk tinggi. Lihat contoh :

Kode :

<img src="http://www.belajarpc.com/data/twitter.png" width="50" height="50" />

ubahlah angka menjadi kombinasi 50 dan 100, 50×50, 100×50 dan 50×100, hasilnya :

Menambah Text Alternatif <alt>

Pada gambar kita juga dapat menambahkan Text Alternatif jika gambar tidak terloading di web karena sesuatu hal ataupun alamat gambar sudah tidak ada lagi. Penggunaan ALT ini bisa juga dimanfaatkan untuk menampilkan keterangan sebuah gambar. Untuk menguji penggunaan Text Alternatif ini, cukup salahkan saja pengetikan nama file yang kita ingin tampilkan, misalnya twitter.png menjadi twiter.png.

Kode :

<img alt="Gambar Twitter" src="http://www.belajarpc.com/data/twiter.png" />

Hasilnya :

Menambahkan Informasi Pada Gambar <title>

Kita juga dapat menampilkan informasi yang muncul jika mouse berada diatas gambar. Jika ingin menampilkan informasi yang lumayan panjang pada gambar, silahkan tambahkan atribut title pada gambar.

Kode :

<img title="Ini adalah Gambar Burung Kecil si Twitter" src="http://www.belajarpc.com/data/twitter.png" />

Hasilnya :

Menambahkan Bingkai / Border <border>

Atribut ini digunakan untuk menambahkan bingkai pada sebuah gambar. Tetapi hasil yang ditampilkan nantinya akan dipengaruhi oleh styelesheet (CSS) pada sebuah halaman web. Tetapi jika tidak menggunakan CSS, border ini akan langsung muncul pada gambar.

Kode :

<img border="10" src="http://www.belajarpc.com/data/twitter.png" />

Hasil :

Mengatur jarak Spasi pada gambar <hspace> & <vspace>

Disekitar gambar, kita juga dapat menambahkan ruang kosong atau biasa disebut space. Space ini bisa ditambah secara Horizontal (hspace) atau Vertikal (vspace). Liat contoh dibawah ini :

Kode :

<img hspace="20" src="http://www.belajarpc.com/data/twitter.png" />

HSPACE 20

<img vspace="10" src="http://www.belajarpc.com/data/twitter.png" />

SPACE 20

Mengatur posisi gambar <align>

Untuk mengatur posisi gambar pada teks, kita cukup menambahkan atribut align kemudian posisi yang diinginkan, yaitu : Left, Middle, Right, Top dan Bottom.

<img align="left" src="http://www.belajarpc.com/data/twitter.png" />Tuliskan Teks disini.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor posuere erat. Aliquam et arcu bibendum turpis sollicitudin eleifend. Maecenas magna odio, tincidunt et, ultricies dapibus, luctus a, eros. Suspendisse dignissim. Vivamus eget quam vitae lacus vehicula viverra. Morbi leo leo, scelerisque commodo, feugiat at, viverra nec, mi. Sed magna dui, molestie vel, suscipit nec, dictum ut, ipsum. Vestibulum blandit accumsan lectus. Sed fermentum interdum nulla.

Bisa terlihatkan bagaimana hasilnya ? Untuk membuat tampilan agar sedikit rapi, kita dapat menggabungkannya dengan atribut-atribut lainnya seperti yang sudah dibahas diatas.

Sekarang coba kita rubah kode menjadi seperti dibawah ini :

<img title="Ini Gambar Twitter" hspace="10" alt="Twitter" align="left" src="http://www.belajarpc.com/data/twitter.png" />Tuliskan Teks disini.

Hasilnya akan menjadi seperti ini :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor posuere erat. Aliquam et arcu bibendum turpis sollicitudin eleifend. Maecenas magna odio, tincidunt et, ultricies dapibus, luctus a, eros. Suspendisse dignissim. Vivamus eget quam vitae lacus vehicula viverra. Morbi leo leo, scelerisque commodo, feugiat at, viverra nec, mi. Sed magna dui, molestie vel, suscipit nec, dictum ut, ipsum. Vestibulum blandit accumsan lectus. Sed fermentum interdum nulla.

Menambahkan Hyperlink pada gambar.

Untuk menambahkan link pada gambar, cukup mudah. Letakkan kode img diantara tag link, kira-kira seperti ini : <a href><img></a>

Untuk lengkapnya coba ketikkan kode berikut ini :

<a href="http://pcguru.okihelfiska.net"><img alt="Gambar Twitter" src="http://www.belajarpc.com/data/twitter.png" /></a>

Hasilnya menjadi seperti ini :

Selamat Mencoba 🙂