Image / Citra HTML. Materi ke 4

Ukuran: px

Mulai penontonan dengan halaman:

Download "Image / Citra HTML. Materi ke 4"

Yanti Budiono
6 tahun lalu
Tontonan:

1 Image / Citra HTML Materi ke 4

2 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

Image sedikit warna (misal: 2 warna hitam putih),

3 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

4 Format Terkompresi GIF 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 JPEG 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

kecil lebih cepat didownload dibanding 1 image besar Reuse

Menggunakan frame agar tak semua bagian dari window harus

5 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

6 Perbandingan Format GIF Warna 2 8 = 256 Warna Interlacing Transparan si /Animasi Decod er Ya Ya / Ya Cepat Ukuran File /Detail Image Relatif Besar/Ya Dukungan Browser Sesuai JPG, JPEG 2 24 = 16 Juta Warna JPEG Progresif Tidak / Tidak Tidak Kecil/Tida k Sesuai PNG 2 8 = 256 Warna 2 24 = 16 Juta Warna Ya Ya / Tidak Cepat 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

7 Image HTML Image didefinisikan dengan tag <img>. Tag <img> 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 <img src="url"

8 Sintaks Tag Image Sintaks <img src="url" /> <img src="url" alt= "teks" /> Nilai atribut URL: URL absolut menunjuk ke situs web lain (contoh: src=" if") URL relatif menunjuk ke file didalam situs web (contoh: src="foto1.gif") 8

9 <html> <head> <title>gambar</title> </head> <body> Contoh <img src="mahasiswa.jpeg" alt= mahasiswa" /> </body> </html> 9

10 <html> Image sebagai background <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

11 Perataan image <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

12 Perataan image (lanjutan) 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

13 Perataan image (lanjutan) 13

14 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> </html> 14

15 Image bersifat floating (lanjutan) 15

16 Mengatur ukuran image <img src="hackanm.gif width="20" height="20 /> <img src="hackanm.gif width="45" height="45 /> <img src="hackanm.gif width="70" height="70 /> Anda dapat membuat gambar lebih besar atau lebih kecil dengan mengganti nilai atribut "height" dan "width" dari tag img. 16

17 Hasil Mengatur ukuran image 17

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

19 Hasil pengaturan ukuran image 19

20 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". 20

21 Membuat hyperlink dengan image Anda juga dapat menggunakan image sebagai link: <a href="halakhir.htm"> <img border="0" src="buttonnext.gif width="65" height="38 /> </a> 21

Horizontal dan Vertical Space <p> <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. 22

22 Horizontal dan Vertical Space <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. 22

23 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

24 Menciptakan peta image, wilayah dapat diklik klik salah satu planet untuk melihat lebih dekat: <img src="planets.gif" width="145" height="126 usemap="#planetmap /> <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. 24

25 Menciptakan peta image, wilayah dapat diklik (lanjutan) Jika diklik pada daerah sun, mercury, venus maka akan muncul: 25

26 Image dengan image map, koordinat akan ditampilkan pada status bar 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> 26

27 Image dengan image map, koordinat akan ditampilkan pada status bar 27

28 Selesai 28

dokumen-dokumen yang mirip

Catatan: Untuk menampilkan gambar bersamaan dengan teksnya maka, pada gambar ditambahkan atribut align, yang bisa diisi nilai top, center, dan bottom.

Catatan: Untuk menampilkan gambar bersamaan dengan teksnya maka, pada gambar ditambahkan atribut align, yang bisa diisi nilai top, center, dan bottom. Image HTML Sebuah gambar berbicara seribu kata, pepatah yang sering digunakan orang untuk menunjukkan terkadang gambar bisa berbicara lebih baik dari penjelasan yang panjang lebar. Gambar di dalam suatu