4 Image

10/3/2011
Materi ke 4
Mengapa Butuh Image?
Image / Citra HTML
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
Format Image untuk Web
Format Terkompresi
GIF
Ukuran diusahakan tidak besar

Cara memperkecil ukuran :
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
image dibuat kecil,

Image sedikit warna (misal: 2 warna hitam putih),
Image terkompresi
JPEG
Joint Photographic Experts Group (pembuat standar)
Membuang beberapa informasi tentang image
Memiliki beberapa level kompresi
Format Image terkompresi

GIF
JPEG
PNG
PNG
Portable Network Graphics, dibuat khusus untuk web
Menggunakan intelligent algorithm and Losless compression
3
10/3/2011
Perbandingan
Meningkatkan kecepatan download

Membatasi ukuran image
Membatasi banyak image dalam satu halaman
Warna
Format
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)
Interlacing
Transparan
si
/Animasi
Decod
er
Cepat
Ukuran
File
/Detail
Image
Relatif
Besar/Ya
Dukungan
Browser
GIF
28 = 256
Warna
Ya
Ya / Ya
JPG,
JPEG
224 = 16
Juta Warna
JPEG
Progresif
Tidak /
Tidak
Tidak
Kecil/Tida
Sesuai
k
Ya
Ya / Tidak
Cepat
Relatif
Besar/Ya
28
PNG
= 256
Warna
24
2 = 16
Juta Warna
Sesuai
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
5
Image HTML
Sintaks Tag Image

Sintaks
Image didefinisikan dengan tag <img>.

Tag <img> hanya mencakup atribut dan
tidak mempunyai tag penutup.
Menggunakan atribut:
<img src="URL" />

<img src="URL" alt= "teks" />
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")
src menentukan URL dari image yang akan

ditampilkan
alt menentukan teks pengganti untuk image
(jika image tidak dapat ditampilkan oleh
browser)
7
10/3/2011
Contoh
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src="mahasiswa.jpeg" alt= mahasiswa"
/>
</body>
</html>
Image sebagai background

<html>
<body background="background.jpg">
<h3>Lihat: image background!</h3>
File gif dan jpg dapat dipakai sebagai
background HTML.
Jika image lebih kecil dari halaman,

image
akan mengulang.
</body>
</html>
10
Perataan image
Perataan image (lanjutan)
<html>
<body>
 Image
<img src="hackanm.gif align="bottom" width="48"

height="48/>
dalam teks

 Image
<img src ="hackanm.gif align="middle" width="48"

height="48/>
dalam teks

 Image
<img src ="hackanm.gif align="top" width="48"

height="48/>
dalam teks

11
Catatan perataan bottom adalah perataan

default
 Image
<img src ="hackanm.gif width="48" height="48/>
dalam teks

 <img src ="hackanm.gif width="48" height="48">
Image sebelum teks

 Image setelah teks
<img src ="hackanm.gif width="48" height="48/>

</body>
</html>
12
10/3/2011
Perataan image (lanjutan)
Image bersifat floating

<html>
<body>

<img src ="hackanm.gif align ="left" width="48"

height="48/>
Paragraf dengan image. Atribut align dari image
diset = "left". Image akan mengambang di kiri dari
teks.


<img src ="hackanm.gif align ="right" width="48"

height="48/>
Paragraf dengan image. Atribut align dari image

diset = "right". Image akan mengambang di kanan dari
teks.

</body>
14
</html>
13
Image bersifat floating (lanjutan)
Mengatur ukuran image


<img src="hackanm.gif width="20" height="20/>






Anda dapat membuat gambar lebih besar atau lebih
kecil dengan mengganti nilai atribut "height" dan
"width" dari tag img.

15
16
10/3/2011
Pengaturan dengan prosen
Hasil Mengatur ukuran image

Ini Tanpa Pengaturan 
<img src="women.jpg">
 Ini dengan Pengaturan absolut 
<img src="women.jpg" width="50" height="50">
 Ini dengan Pengaturan prosen 
prosen dihitung berdasar ukuran browser 
<img src="women.jpg" width="10%" height="10%">

17
Hasil pengaturan ukuran image
18
Menampilkan alternate text untuk image

<img src="goleft.gif" alt="Go Left" width="32"
height="32/>

Browser yang text-only tidak dapat menampilkan image
dan hanya akan menampilkan teks yang ditulis dalam
atribut "alt". Di sini teks - "alt" adalah "Go
Left".

Catatan: jika Anda menahan mouse pointer pada image,
kebanyakan browser akan menampilkan teks - "alt".

19
20
10/3/2011
Membuat hyperlink dengan image
Horizontal dan Vertical Space

Anda juga dapat menggunakan image sebagai
link:
<a href="halakhir.htm">
<img border="0" src="buttonnext.gif

width="65" height="38/>
</a>


<img src="scream.jpg" vspace="20" hspace="50" align="left">
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.

21
22
Menciptakan peta image, wilayah dapat diklik
Peta Image
Klik salah satu planet untuk melihat lebih dekat:

<img src="planets.gif" width="145" height="126
usemap="#planetmap/>
Image yang dapat diberikan link pada area

tertentu dari image tersebut
Sering disebut dengan istilah hotspot, yaitu
suatu wilayah dalam image yang apabila diklik akan masuk ke link tertentu
<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/>
</map>
Catatan:Atribut "usemap" dalam elemen img mengacu
ke atribut "id" atau "name" (tergantung browser) dalam
elemen map.
23
24
10/3/2011
Image dengan image map,

koordinat akan ditampilkan pada status bar
Menciptakan peta image, wilayah dapat diklik (lanjutan)
Jika diklik pada daerah sun,

mercury, venus maka akan
muncul:

Gerakkan mouse pada image, dan perhatikan status bar
untuk melihat perubahan koordinat.


<a href="coba_ismap.html">
<img src="planets.gif"
ismap width="146" height="126/>

</a>

25
26
Image dengan image map,

koordinat akan ditampilkan pada status bar
Selesai
27
28

4 Image

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

4 Image

Diunggah oleh

Hak Cipta:

Format Tersedia

10/3/2011

Mengapa Butuh Image?

Image / Citra HTML

Image dapat membuat dokumen HTML lebih

Format Image untuk Web

Ukuran diusahakan tidak besar

LZW Compression dari Compuserve

image dibuat kecil,

Format Image terkompresi

Meningkatkan kecepatan download

Ingat: banyak image kecil lebih cepat didownload

Reuse image sebisa mungkin untuk

Interlacing dan JPEG Progresif :

Sintaks Tag Image

Image didefinisikan dengan tag <img>.

<img src="URL" />

src menentukan URL dari image yang akan

Image sebagai background

<h3>Lihat: image background!</h3>

<p>File gif dan jpg dapat dipakai sebagai

<p>Jika image lebih kecil dari halaman,

Perataan image (lanjutan)

<img src="hackanm.gif align="bottom" width="48"

<img src ="hackanm.gif align="middle" width="48"

<img src ="hackanm.gif align="top" width="48"

<p>Catatan perataan bottom adalah perataan

Perataan image (lanjutan)

Image bersifat floating

<img src ="hackanm.gif align ="left" width="48"

<img src ="hackanm.gif align ="right" width="48"

Paragraf dengan image. Atribut align dari image

Image bersifat floating (lanjutan)

Mengatur ukuran image

Pengaturan dengan prosen

Hasil Mengatur ukuran image

Hasil pengaturan ukuran image

Menampilkan alternate text untuk image

Membuat hyperlink dengan image

Horizontal dan Vertical Space

<img border="0" src="buttonnext.gif

<img src="scream.jpg" vspace="20" hspace="50" align="left">

Tulisan ini akan mengelilingi gambar. Tulisan ini akan

Menciptakan peta image, wilayah dapat diklik

<p>Klik salah satu planet untuk melihat lebih dekat:</p>

Image yang dapat diberikan link pada area

<map id="planetmap" name="planetmap">

<area shape="rect coords="0,0,82,126" alt="Sun

<area shape="circle" coords="90,58,3" alt="Mercury

<area shape="circle" coords="124,58,8" alt="Venus

Image dengan image map,

Menciptakan peta image, wilayah dapat diklik (lanjutan)

Jika diklik pada daerah sun,

ismap width="146" height="126/>

Image dengan image map,

Anda mungkin juga menyukai