Pemrogaman WEB dengan HTML, Image HTML, Aligment Image, Floating Image, Image Adjustment, Teks Alternatif Image, Image Sebagai Suatu Link, Image Map, Software Image Map
Image HTML
Sebuah gambar bebicara seribu kata, pepatah yang sering digunakan orang untuk menunjukkan terkadang adalah gambar bisa berbicara lebih baik dari penjelasan yang panjang lebar.
Gambar didalam suatu web page merupakan daya penarik bagi pengunjung suatu web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu web site.
Umumnya browser dapat menampilkan inline image (yaitu, gambar yang disajikan bersamaan dengan teks), yang mempunyai format X Bitmap (XBM), GIF, atau JPEG. Format-format lain juga sedang ada yang digabungkan ke dalam browser web [misalnya: format PNG (Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karenanya hati-hati memilih gambar dan menyertakannya ke dalam suatu dokumen.
Untuk menyertakan sebuah inline image dalam dokumen web:
<img src=”namaimage”> dengan nama image adalah URL dari file image tersebut.
Format file gambar dapat diketahui dari ekstensi nama file gambar tersebut. GIF menunjukkan format gambar GIF, .XBM untuk format fila gambar X Bitmap, .JPG untuk format file gambar JPEG, dan .PNG untuk file Portable Network Graphics.
Criteria pemilihan file gambar berdasarkan jenis format file penyimpanan gambar.
GIF (Graphics Intershange Format); mungkin termasuk yang terbanyak digunakan dalam internet. Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena lebih dari 256 warna. Tidak cocok untuk gambar yang mengandung garis. Jenis GIF terdiri dari pertama: interlacing, gambar dapat terlihat dalam band (pita), gambar dapat ditampilkan secara bertahap tidak perlu harus semua file terkirim terlebih dahulu, kedua; transparent, background gambar transparan, ketiga; animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi seperti animasi.
JPEG (Joint Photographics Experts Group); Termasuk format file terbanyak pemakainya setelah GIF. Warna terdiri dari 24 bit, dioptimasi untuk menyimpan file gambar berupa foto, hasil seni natural, dan bahan yang menyerupai dengan kompresi (4:1). Orang lebih sensitive terhadap keterangan (brightness) dari pada warna.
Digunakan untuk membuat grayscale. Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam. Jenis terdiri dari pertama; progressive JPEG – mirip seperti interlacing GIF. Optimasi gambar dengan mengurangi jumlah warna. Gunakan thumbnails, yaitu membuat file gambar dengan ukuran kecil yang mewakili gambar besar yang sederhana. Blur image sebelum membuat lebih kecil. Tambahan teks ke dalam gambar yang telah dikonversi ke dalam format 256 warna.
Animated GIF; adalah sebuah format-format file gambar GIF, di dalamnya tersimpan beberapa gambar GIF yang disatukan dalam satu file, file ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
Atribut ukuran image, kita harus menambahkan 2 atribut tambahab untuk member browsr web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height da width, ukuran dinyatakan dalam pixel; height untuk menyatakn tinggi gambar, dan width untuk menspesifikasikan lebar gambar. Ukuran gambar ini didapat dengan menggunakan software untuk pemrosesan image.
Catatan:
Pada beberapa browser, atribut ukuran gambar (height da width) digunakan untuk memperbesar atau memperkecil gambar. Akan tetapi sebaiknya jangan menggunakan teknik ini karena kurang baik, sebaiknya ukur dimensi ukurannya secara benar dengan menggunakan aplikasi yang bisa digunakan untuk mendapatkan ukuran gambar.
Untuk mengatur penampilan gambar (aligment), kita mempunyai kefleksibelan untuk 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 dibagian atas, bawah atau tengah paragraph.
Utnuk menampilkan gambar bersamaan teksnya maka, pada gambar ditambahkan atribut align, yang bisa diisi nilai top, center dan bottom.
Agar gambar ditampilkan tanpa teks, dan kita ingin menampilkan ditengah paragraph, seperti umunya logo perusahaan, maka kita dapat menggunakan atribut align pada tag <p> untuk membuat agar gambarnya diletakkan ditengah.
Berikut merupakn contoh:
<p align=”center”><img src=”nama image”></p>
Contoh ini mendemonstrasikan bagaimana menyisipkan gambar kedalam dokumen HTML anda.
<!—coba_image.htmlà
<html>
<body>
<p>Gambar: <img src=”constr4.gif” width=”144” height=”50”>
</p>
<p>
Sebuah Gambar bergerak: <img src=”hackanm.gif” width=”46” height=”48”>
</p>
<p>
Catatan! Sintaks dari gambar bergerak dengan gambar yang tak bergerak sama saja.
</p>
<hr>
<p>Sebuah Gambar dari folder lain:
<img src=”../images/netscape.gif” width=”33” height=”32”>
</p>
<p>Sebuah gambar dari W3Schools:
<img src=”http://www.w3schools.com/images/ie.gif” width=”73” height=”68”>
</p>
</body>
</html>
Aligment Image
Contoh ini mendemonstrasikan bagaimana mengatur align image dengan teks.
<!—coba_imagealign.htmlà
<html>
<body>
<p>sebuah gambar
<img src=”../images/xhtml.gif” align=”bottom” width=”100” height=”50”>
In the text
</p>
<p>
An image
<img src=”../images/xhtml.gif” align=”middle” width=”100” height=”50”>
In the text
</p>
<p>an image
<img src=”../images/xhtnl.gif” align=”top” width=”100” height=”50”>
In thi text
</p>
<p>
Note the bottom aligment is the default aligment
</p>
<p>an image <img src=”../image/xhtml.gif” width=”100” height=”50”>
In the text
</p>
<p>
<img src=”../image/xhtml.gif” width=”100” height=”50”>
An image before the text
</p>
<p>
An image after the text
<img src=”../image/xhtml.gif” width=”100” height=”50”>
</p>
</body>
</html>
Floating Image
Contoh ini mendemonstrasikan bagaimana menbiarkan suatu image mengambang di kiri atau di kanan paragraph.
<!—coba_imagefloating.htmlà
<html>
<body>
<p>
<img src=”../images/xhtml.gif” align=”left” width=”100” height=”50”>
A paragraph with an image. The align attribute of the image is set to “left”. The image will float to left of this text
</p>
<p>
<img src=”../images/xhtml.gif” align=”right” width=”100” height=50”>
A paragraph with an image. The align attribute of the image is set to “right”. The image will float to right of this text
</p>
</body>
</html>
Image Adjustment
Contoh ini mendemonstrasikan bagaimana menyesuaikan image dengan ukuran yang berbeda-beda.
<!—coba_imageadjust.htmlà
<html>
<body>
<p>
<img src=”../images/xhtm” width=”20” height=”20”>
</p>
<p>
<img src=”../images/xhtm” width=”45” height=”45”>
</p>
<p>
<img src=”../images/xhtm” width=”70” height=”70”>
</p>
<p>
You can make a picture larger or smaller changing the values in the “height” and “width” attribute of the <img> tag.
</p>
</body>
</html>
Teks Alternatif Image
Adakalanya browser yang digunakan oleh surfer adalah browser dengan mode text, seperti lynx – tidak bisa menampilkan gambar – atau juga ada pemakai yang mematikan kemampuan untuk menampilkan gambar pada browsernya, untuk mempercepat penampilan informasi, sehingga hanya teks dari dokumennya saja yang akan ditampilkan. HTML menyediakan suatu mekanisme yang memberi tahu surfer apa yang kurang pada web page tersebut apabila tidak bisa mendapatkan gambarnya.
Atribut Alt pada tag <img> menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. Contoh berikut menunjukkannya: <img src=”sembarang.gif” alt”ini teks untuk gambar”>.
Pada beberapa browser teks pada atribut alt akan ditampilkan secara mengambang untuk member tahu maksud dari gambar, teks ini muncul apabila kita menaruh mouse pointer diatas gambar agak lama.
Contoh ini mendemonstrasikan suatu teks alternative untuk suatu image. Atribut “alt” member tahu reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image. Secara praktis hal inio baik untujk menyertakan atribut “alt” untuk setiap image pada suatu page.
<!—coba_imageteks.htmlà
<html>
<body>
<img src=”../images/xhtml.gif” alt=”xhtml” width=”32” height=”32”>
<p>
Text-only browsers will only display the text in the “alt” attribute, which is “xhtml”.
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>
Image Map
Satu gambar bisa mempunai beberapa link, hal ini dapat dilakukan denghan membuat definisi daerah mana saja dalam gambar yang akan mempunyai link.
Definisi daerah did lam daerah dinyatakan dalam bentuk objek:
- Titik
- Poligin
- Persegi panjang
- Lingkaran/elips
Difinisi daerah dalam gambar ini disebut dengan peta (map). Informasi dan pemrosesan link yang didefinisikan dengan map ini dibedakan menajadi 2 macam:
- Server side
- Client side
Server side image map menyimpan difinisi map di dalam server, sehingga jika suatu daerah dalam gambar yang mempunyai image map di-klik maka browser mengirimkan koordinat daerah gambar yang diklik. Oleh server koordinat tadi dicocokkan dengan difinisi daerah yang ada, jika koordinat yang diklik tersebut berada pada definisi daerah yang mempunyai link, maka secara otomatis server akan memberikan web page baru sesuai dengan definisi link pada koordinat tersebut.
Client side image map menyertakan definisi map dari sebuah gambar yang dapat diklik ke dalam dokumen eb yang dikirimkan dan disaikan dalam browser web. Surfer dapat melihat secara langsung link atau web page yang akan disajikan, pada saat pointer mouse berada diatas gambar. Informasi link akan disajikan pada bar status dari browser web.
Mtode Image Map mengharuskan pemrogram web mendefinisikan daerah-daerah dalam suatu gambar (image) yang mempunyai link. Daerah yang diddefinisikan berupa bentuk daerah dan koordinat pembatasnya. Bentuk daerah peta untuk dibedakan menjadi:
- POINT : daerah berupa satu titik
- RECT : daerah berupa persegi panjang
- POLY(gon) : daerah berbentuk polygon
- CIRCLE : Daerah berbentuk lingkaran
Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat (0.0) dimulai dari pojok kiri atas gambar, dam maksimum koordinat adalah pojok kanan bawah gambar (lebar_maks, tinggi_maks).
Untuk memudahkan pembuatan batas-batas daerah dalam Image Map, digunakan aplikasi-aplikasi yang memudahkan pemakaian.
Secara umum format pendefinisian suatu Image Map adalah berikut:
Client Side Image Map
<map name=”namaPeta”>
<area shape-rect cords=”x1,y1,x2,y2” href=”url1”>
<area shape-rect cords=”x3,y3,x4,y4” href=”url2”>
</map>
Pada atribut SHAPE didefinisikan nama bentuk daerah:
- RECT untuk persegi panjang seperti contoh diatas, dengan COORDS berupa koordinat pojok kiri atas dan pjok kanan bawah
- POINT untuk daerah berbentuk titik, dengan COORDS berupa x,y
- POLY untuk polygon dengan COORDS adalah x,y untuk setiap titik (vertex) dari setiap garis
- CIRCLE untuk daerah berupa lingkaran dengan COORDS berupa x,y untuk pojok kiri atas dan x,y untuk pojok kanan bawah, bentuk lingkaran akan disesuaikan dengan definisi koordinatnya, karena bisa jadi koordinat yang di tampilkan setelah diinterpolasi menunjukkan suatu bentuk elips.
Penerapan dalam dokumen HTML:
- Berikan definisi map seperti diatas
- Sisipkan pada TAG IMG sebuah atribut USEMAP
- Isikan value untuk atribut USEMAP=”#namaPeta”
Value pada atribut USEMAP diberi tanda # didepan untuk mendefinisikan bahwa definisi peta berada dalam dokumen HTML yang bersangkutan.
Format definisi Server Side Image Map ada dua macam:
- Format CERN
- Format NCSA
Kedua format ini pada dasarnya mempunyai isi yang sama, akan tetapi berbeda pada peletakkan informasinya.
Contoh format NCSA:
#
Circle xx.html 52,38 52,17
Contoh format CERN:
#
Circle (58,68) 34 xx.html
Penerapan:
- Definisi peta dari suatu gambar disimpan dalam file teks dengan ekstensi adalah MAP
- Berikan link berupa url (dengan nama file berekstensi MAP) mengapit tag IMG
- Tambahkan ke dalam TAG IMG atribut ISMAP.
Misal file map yang digunakan bernama file PETA1.MAP maka berikut adalah contoh isi dokumen HTML yang menggunakan server side image map:
<html>
.
.
.
<a href=”url-map”
<img src=”namagambar.gif” ISMAP”>
</a>
.
.
.
</html>
Software Image Map
Software untuk image map dipergunakan untuk mempermudah pembuatan peta link.
Salah satu contoh software image map freeware: MapEdit.
Catatan:
Pada saat mendefinisikan map, maka setiap objek daerah dalam image tidak boleh beririsan/overlapping koordinatnya.
Contoh-contoh dapat dicoba, akan tetapi harus dipersiapkan software pendukungnya, yakni software untuk membuat gambar/image dan untuk membuat image map. Software minimum yang fungsional yang dibutuhkan:
ü MS paint
ü MapEdit
ü WebImage
Contoh ini mendemonstrasikan bagaimana suatu image map, dengan daerah dalam image dapat di-click. Setiap daerah image dapat bertindak sebagai suatu hyperlink.
<!—coba_imagemap.htmlà
<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src=”../images/planets.gif” width=”145” height=”126” usemap=”#planetmap”>
<map name=”planetmap”>
<area shape=”rectangle” cords=”0,0,82,126” href=”sun.html”>
<area shape=”circle” cords=”90,58,3” href=”mercur.html”>
<area shape=”circle” cords=”124,58,8” href=”venus.html”>
</map>
</body>
</html>
Untuk mencoba link agar sesuai dengan maksud maka harus disiapkan tiga dokumen HTML pendukung: sun.html, mercur.html, dan venus.html. berikut adalh detail dari setiap dokumen pendukung:
<!—sun.htmlà
<html>
<body>
<p>
Selamat dating di matahari!
<br>
Semoga matahari ini menyejukkan!
</p>
<hr>
Kembali ke <a href=”coba_image.html”>tata surya</a>
</body>
</html>
<!—venus.htmlà
<html>
<body>
<p>
Selamat dating di planet venus!
<br>
Ini sepertinya tempat dewi venus!
</p>
Kembali ke <a href=”coba_imagemap.html”>tata surya</a>.
</body>
</html>
<!—mercur.htmlà
<html>
<body>
<p>
Selamat dating di planet merkurius!
<br>
Terasa bahwa planet ini terbesar dalam galaksi setelah matahari ?!
</p>
<hr>
Kembali ke <a href=”coba_imagemap.html”>Tata surya</a>.
</body>
</html>
