Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya. Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi foto, maupun barang-barang yang sesuai dengan hobi.
Dalam kasus ini, tentu harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web sehingga akan tampil rapi dan menarik. Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah : <img src=”namafile”>
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.
Contoh: <img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :
Gambar 11.1. Menyajikan Format Gambar
Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network graphics.
Menggabung Gambar dan Teks
Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan:
a. Secara vertikal:
Teks bisa berada sejajar dengan bagian atas gambar
Teks bisa berada sejajar dengan bagian tengah gambar
Teks bisa berada sejajar dengan bagian bawah gambar
b. Secara horisontal:
Gambar bisa berada di bagian kiri teks/paragraf
Gambar bisa berada di bagian kanan teks/paragraf
Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>. Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :
Gambar 11.2. Menggabungkan Gambar dan Teks arah vertikal
Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan berada di sebelah kanan teks.