Image HTML
advertisement
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 <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" /> <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") 8 Contoh <html> <head> <title>gambar</title> </head> <body> <img src="mahasiswa.jpeg" alt= “mahasiswa" /> </body> </html> 9 Image sebagai background <html> <body background="background.jpg"> <h3>Lihat: image background!</h3> <p>File gif dan jpg dapat dipakai sebagai background HTML.</p> <p>Jika image lebih kecil dari halaman, image akan mengulang.</p> </body> </html> 10 Perataan image <html> <body> <p> Image <img src="hackanm.gif“ align="bottom" width="48" height="48“/> dalam teks </p> <p> Image <img src ="hackanm.gif“ align="middle" width="48" height="48“/> dalam teks </p> <p> Image <img src ="hackanm.gif“ align="top" width="48" height="48“/> dalam teks </p> 11 Perataan image (lanjutan) <p>Catatan perataan bottom adalah perataan default</p> <p> Image <img src ="hackanm.gif” width="48" height="48“/> dalam teks </p> <p> <img src ="hackanm.gif” width="48" height="48"> Image sebelum teks </p> <p> Image setelah teks <img src ="hackanm.gif“ width="48" height="48“/> </p> </body> </html> 12 Perataan image (lanjutan) 13 Image bersifat floating <html> <body> <p> <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. </p> <p> <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. </p> </body> 14 </html> Image bersifat floating (lanjutan) 15 Mengatur ukuran image <p> <img src="hackanm.gif” width="20" height="20”/> </p> <p> <img src="hackanm.gif” width="45" height="45”/> </p> <p> <img src="hackanm.gif” width="70" height="70”/> </p> <p> Anda dapat membuat gambar lebih besar atau lebih kecil dengan mengganti nilai atribut "height" dan "width" dari tag img. </p> 16 Hasil Mengatur ukuran image 17 Pengaturan dengan persen <p> Ini Tanpa Pengaturan<br/> <img src="women.jpg"> <br/>Ini dengan Pengaturan absolut<br/> <img src="women.jpg" width="50" height="50"> <br/>Ini dengan Pengaturan persen<br/> persen dihitung berdasar ukuran browser<br/> <img src="women.jpg" width="10%" height="10%"> </p> 18 Hasil pengaturan ukuran image 19 Menampilkan alternate text untuk image <img src="goleft.gif" alt="Go Left" width="32" height="32“/> <p> 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".</p> <p> Catatan: jika Anda menahan mouse pointer pada image, kebanyakan browser akan menampilkan teks - "alt". </p> 20 Membuat hyperlink dengan image <p> Anda juga dapat menggunakan image sebagai link: <a href="halakhir.htm"> <img border="0" src="buttonnext.gif” width="65" height="38“/> </a> </p> 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. </p> 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 <p>Klik salah satu planet untuk melihat lebih dekat:</p> <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> <p><b>Catatan:</b>Atribut "usemap" dalam elemen img mengacu ke atribut "id" atau "name" (tergantung browser) dalam elemen map.</p> 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 <p> Gerakkan mouse pada image, dan perhatikan status bar untuk melihat perubahan koordinat. </p> <p> <a href="coba_ismap.html"> <img src="planets.gif" ismap width="146" height="126“/> </a> </p> 26 Image dengan image map, koordinat akan ditampilkan pada status bar 27 Selesai 28
