Cara Menampilkan Image Dalam Halaman Web

Gambar yang berada dalam halaman web merupakan daya penarik bagi pengunjung suatu web site, apalagi ada sebuah gambar yang bisa gerak. Umumnya browser dapat menampilkan:

• inline image, yaitu gambar yang disajikan bersamaan teks
• yang mempunyai format X Bitmap (XBM)
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographics Exprets Group)
• PNG (Portable Network Graphics)

Setiap Gambar akan membutuhkan waktu tambahan untuk dodownload atau akses, dan memperlambat awal penampilan suatu halaman web dalam browser. Untuk itu Kita harus hati-hati dalam memilih gambar dan menyertakannya ke dalam halaman web. Untuk itu cara penulisannya adalah:

<img src="namaimage">

namaimage bisa ditulis nama file atau url dari alamat file gambar.

Kriteria pemilihan gambar berdasarkan jenis format file penyimpanan gambar yaitu:

GIF

1. memiliki warna 8 bit (256)
2. tidak cocok untuk file gambar berupa foto
3. tidak cocok untuk gambar yang mengandung garis
4. gambar terlihat dalam band (pita) dan gambar dapat ditampilkan secara bertahap
5. background gambar transparan
6. animated

JPEG

1. memiliki warna 24 bit
2. cocok untuk gambar berupa foto
3. hasil seni natural
4. bahan yang menyerupai dengan kompresi (4:1)
5. tidak cocok untuk gambar yang mengandung garis

Dalam menampilkan image bisa menambah atribut ukuran image untuk mengatur besar kecilnya ukuran gambar. Dalam penulisannya Kita harus menambahkan 2 atribut tambahan yaitu height dan widht. Ukuran dinyatakan dalam pixel; height untuk menyatakan tinggi gambar, dan widht untuk menspesifikan lebar gambar.

Untuk mengatur penampilan gambar (alignment) akan lebih fleksibel untuk menampilkan gambar. Kita dapat menampilkan gambar yang terpisah dari teksnya, atau bersamaan dengan teks.

Dibawah ini adalah contoh untuk menampilkan gambar dalam halaman web:

<html>

<body>

<p>Gambar:<img src="palmtop.jpg" widht="144" height="50">

</p>

<p>Gambar Bergerak:<img src="gambar-bergerak-main-panah-stickman1.gif" widht="244" height="70">

</p>

</body>

</html>

Hasilnya:

.