Materi ke 4
Image / Citra HTML
Mengapa Butuh Image?
Image dapat membuat dokumen HTML lebih menarik dibandingkan hanya berisi teks saja. Memudahkan user untuk memahami informasi yang disampaikan Misal untuk spesifikasi Handphone, akan lebih baik diberi visualisasi gambar dibandingkan hanya teks “satu gambar mewakili seribu kata”
2
Format Image untuk Web
Ukuran diusahakan tidak besar Cara memperkecil ukuran : image dibuat kecil, Image sedikit warna (misal: 2 warna –hitam putih), Image terkompresi
Format Image terkompresi GIF JPEG PNG
3
Format Terkompresi
GIF
JPEG
LZW Compression dari Compuserve Membuang beberapa informasi tentang warna Tidak memiliki warna kulit manusia dalam daftar warna sehingga lebih cocok untuk icon / kartun Mendukung animasi dan transparansi Joint Photographic Experts Group (pembuat standar) Membuang beberapa informasi tentang image Memiliki beberapa level kompresi
PNG
Portable Network Graphics, dibuat khusus untuk web Menggunakan intelligent algorithm and Losless compression 4
Meningkatkan kecepatan download
Membatasi ukuran image Membatasi banyak image dalam satu halaman
Ingat: banyak image kecil lebih cepat didownload dibanding 1 image besar
Reuse image sebisa mungkin untuk memaksimalkan penggunaan cache Menggunakan frame agar tak semua bagian dari window harus diupload Jika mungkin gunakan teks sebagai pengganti image (misal dengan tabel berwarna) 5
Perbandingan Format
Warna
Transparan Interlacing si /Animasi
GIF
28 = 256 Warna
Ya
Ya / Ya
JPG, JPEG
224 = 16 Juta Warna
JPEG Progresif
Tidak / Tidak
PNG
28 = 256 Warna 224 = 16 Juta Warna
Ya
Ya / Tidak
Ukuran Decod File er /Detail Image Relatif Cepat Besar/Ya
Tidak
Cepat
Dukungan Browser Sesuai
Kecil/Tida Sesuai k Relatif Besar/Ya
Perkembang an saat ini banyak yang sesuai
Interlacing dan JPEG Progresif : Gambar (terutama yang berukuran besar) akan ditampilkan 1/8 dahulu, sisanya akan dimunculkan kemudian, mulai dari blur baru kemudian focus, sehingga user tidak perlu menunggu semua gambar didownload dahulu 6
Image HTML
Image didefinisikan dengan tag
![]()
. Tag
![]()
hanya mencakup atribut dan tidak mempunyai tag penutup. Menggunakan atribut: src menentukan URL dari image yang akan ditampilkan alt menentukan teks pengganti untuk image (jika image tidak dapat ditampilkan oleh browser)
7
Sintaks Tag Image
Sintaks
Nilai atribut URL: URL absolut menunjuk ke situs web lain (contoh: src="http://www.contoh.com/foto1.g if") URL relatif menunjuk ke file didalam situs web (contoh: src="foto1.gif")
8
Contoh
gambar 
9
Image sebagai background
Lihat: image background!
File gif dan jpg dapat dipakai sebagai background HTML.
Jika image lebih kecil dari halaman, image akan mengulang.
10
Perataan image
Image 
Image sebelum teks
Image setelah teks 
14
Image bersifat floating (lanjutan)
15
Mengatur ukuran image
16
Hasil Mengatur ukuran image
17
Pengaturan dengan persen
Ini Tanpa Pengaturan
Ini dengan Pengaturan absolut
Ini dengan Pengaturan persen
persen dihitung berdasar ukuran browser
18
Hasil pengaturan ukuran image
19
Menampilkan alternate text untuk image
Catatan: jika Anda menahan mouse pointer pada image, kebanyakan browser akan menampilkan teks - "alt".
20
Membuat hyperlink dengan image
Anda juga dapat menggunakan image sebagai link: 
Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar. Tulisan ini akan mengelilingi gambar.
22
Peta Image
Image yang dapat diberikan link pada area tertentu dari image tersebut Sering disebut dengan istilah hotspot, yaitu suatu wilayah dalam image yang apabila di-klik akan masuk ke link tertentu
23
Menciptakan peta image, wilayah dapat diklik
Klik salah satu planet untuk melihat lebih dekat:
<map id="planetmap" name="planetmap">
<area shape="rect“ coords="0,0,82,126" alt="Sun” href="sun.html“/>
<area shape="circle" coords="90,58,3" alt="Mercury” href="mercur.html“/>
<area shape="circle" coords="124,58,8" alt="Venus” href="venus.html“/>
Catatan:Atribut "usemap" dalam elemen img mengacu ke atribut "id" atau "name" (tergantung browser) dalam elemen map.
24
Menciptakan peta image, wilayah dapat diklik (lanjutan)
Jika diklik pada daerah sun, mercury, venus maka akan muncul:
25
Image dengan image map, koordinat akan ditampilkan pada status bar
Gerakkan mouse pada image, dan perhatikan status bar untuk melihat perubahan koordinat.
