PENYISIPAN GAMBAR Diktat pemrograman Web 1

≈ Halaman 36 ≈

BAB VI PENYISIPAN GAMBAR

Gambar didalam suatu web page merupakan daya penarik bagi pengunjung suatu website. Umumnya website dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu website. Umumnya browser web dapat menampilkan inline image yaitu gambar yang disajikan bersamaan dengan teks,yang mempunyai format : Graphic Intercahange Format GIF Joint Photographic Experts Group JPEG X Windows X Bitmap XBM,gambar dengan tipe hitam-putih. X-Pixelmap XPM,yang merupakan tipe lain dari format X-windows. Portable Network Graphic PNG Format file gambar akan diketahui darti ekstensi nama file gambar tersebut. Untuk menyertakan sebuah inline image dalam dokumen web digunakan tag : img src=”nama image” dimana “nama image” adalah URL dari gambar tersebut. Bila ingin menggunakan gambar sebagai backgroundlatar belakang dokumen HTML body background=”nama_image.ext” Tag img mempunyai beberapa atribut sebagai berikut : Atribut Kegunaan Src Menunjukkan URL atau direktori file gambar Align Menentukan posisi teks di sekitar gambar dengan nilai : Top,middle,bottom,left,right Width Menentukan lebar dari gambar dalam ukuran pixel Height Menentukan tinggi gambar dalam ukuran pixel Alt Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. Pada browser tertentu dapat pula ditampilkan sebagai tooltip. Table 5 : daftar atribut pada tag image ≈ Halaman 37 ≈ Untuk mengatur penampilan gambar alignment,kita mempunyai kefleksibelan pada saat menampilkan gambar. Kita dapat membuat gambar yang ditampilkan terpisah dari teksnya dan kemudian menaruhnya agar ditampilkan di kiri,tengah,atau kanan. Atau bisa juga gambar tersebut ditampilkan bersamaan dengan teks,kemudian diletakkan pada bagian atas,bawah,atau tengah paragraf. Bila kita tidak mendefinisikan alignment gambar pada atribut,maka secara default gambar akan ditampilkan secara rata kiri. Atribut alt pada tag img menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. Pada beberapa browser teks pada atribut alt akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar,teks ini muncul apabila kita menaruh pointer diatas gambar agak lama,disebut juga sebagai tooltips. Atribut “alt” akan memberitahu reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image. Contoh image align : Contoh ini mendemonstrasikan bagaimana mengatur align image dengan teks. html head titleWisata Duniatitle head body background=Bgd.gif p align=centerbuTempat-tempat yang indah didunia ubp hr p align=leftInilah tempat-tempat wisata dunia yang banyak dikunjungi oleh wisatawan tiap tahunnya:p p align=leftimg border=0 src= lawu.jpg width=148 height=103 bGunung Lawub : terletak di Propinsi Jawa Timur Indonesiap p align=leftbHawaiib : Terletak di Benua Amerika img border=0 src= Hawaii.jpg width=203 height=134p body html hasilnya : ≈ Halaman 38 ≈ gambar 6 : tampilan hasil image align ≈ Halaman 39 ≈ Menggunakan gambar sebagai hyperlink : Menu dalam web page merupakan pilihan link informasi ke web page yang lain. Menu umumnya dibuat dalam bentuk list ataupun teks bisaa yang mempunyai link. Kita pun dapat menggunakan image untuk membuat menu,dengan gambar maka menu bisa lebih interaktif dan langsung memberi gambaran kepada user tentang apa yang akan didapat kalau memilih menu tersebut. Contoh html body p anda bisa menggunakan sebuah gambar sebagai link : a href=”galery.html” img boder=0 src=”galery.jpg” width=”65” height =”38” a p body html ≈ Halaman 40 ≈

BAB VII IMAGE MAP