Memasukkan
Gambar ke dalam Halaman Web
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
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:
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
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>.
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.
Memperkecil dan
Memperbesar Ukuran Gambar
gambar yang ditampilkan pada dokumen
HTML terkadang tidak memiliki ukuran gambar yang sama dengan ukuran sebenarnya.
Untuk menghasilkan gambar dengan kualitas yang mirip aslinya, penentuan ukuran
juga menjadi hal yang penting untuk diperhatikan. Maka dari itu perbandinganya
harus sesuai dengan ukuran asli dari gambar tersebut. Untuk menentukan ukuran
gambar, kita perlu mengisi atribut HEIGHT
berfungsi untuk menetukan tinggi gambar dan WIDTH untuk menetukan lebar gambar. Perhatikan contoh berikut ini.
<img
src=”images/komputer.jpg” />
Kode
diatas akan menampilkan gambar dari file
komputer.jpg yang berada dalam direktori images sesuai dengan ukuran asli
(misal 500X375 pixel).
Untuk
memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut,
misalnya
<img
src=images/komputer.jpg” width=320” height=”230” />
Memberi keterangan pada gambar
Agar lebih terkesan informatif, anda dapat memberikan keterangan yang
relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan
pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat,
hanya beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse)
ke atas gambar.
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut
TITLE maupun ALT pada tag <img>.
<img src=”namafile”
title=”keterangan”/>
