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
<img
src=http://www.abcde.com/image/kamera.jpg/>
Contoh
hasil dokumen HTML di Web Browser seperti gambar berikut :
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>.
Contoh
hasil dokumen HTML di Web Browser seperti gambar berikut :
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.
Contoh
hasil dokumen HTML di Web Browser seperti gambar berikut :
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”/>
Contoh
hasil dokumen HTML di Web Browser seperti gambar berikut :
Pada
gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat mouse
di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan gambar.
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon