Gambar didalam suatu web page merupakan daya tarik bagi pengunjung suatu web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada didalam suatu web site. Browser web dapat menampilkan inline image (yaitu, gambar yang disajikan bersamaan dengan teks) yang mempunyai format X Bitmap (XBM), GIF, atau JPEG dan PNG (Portable Network Graphic). Setiap gambar akan membutuhkan
waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Untuk menyertakan sebuah inline image dalam dokumen web adalah:
<img src="namaimage">; dengan nama image adalah URL dari file image tersebut.
Kriteria pemilihan file gambar berdasarkan jenis format file penyimpanan gambar, dijelaskan berikut ini:
a. GIF (Graphic Interchange Format): banyak digunakan dalam internet. Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena lebih dari 256 warna. GIF tidak cocok untuk gambar yang mengandung garis. File GIF terdiri dari interlacing, gambar dapat ditampilkan secara bertahap tidak perlu harus semua file terkirim terlebih dahulu; transparent, background gambar transparan; animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi sepeti animasi.
b. JPEG (Join Photographic Experts Group) termasuk format file terbanyak pemakaianya setelah GIF. Warna terdiri dari 24 bit, di optimasi untuk menyimpan file gambar berupa foto, hasil seni natural, dan bahan yang menyerupai dengan kompresi (4:1). Orang lebih sensitif terhadap keterangan (brightness) daripada warna. Digunakan untuk membuat warna grayscale. Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam. Jenis terdiri: progressive JPEG, mirip seperti interlacing GIF. Opyimasi gambar dengan mengurangi jumlah warna. Gunakan thumnails, yaitu membuat file gambar dengan ukuran kecil yang mewakili gambar besar yang sebenarnya. Blur image sebelum membuat lebih kecil. Tambahkan teks kedalam gambar yang telah dikonversi kedalam format 256 warna.
c. Animated GIF, adalah sebuah format file gambar GIF, didalamnya tersimpan beberapa gambar GIF yang disatukan dalam satu file, file ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
Menampilkan Image
Pengaturan penampilan gambar dapat ditampilkan terpisah dari teksnya dan ditampilkan dikiri, tengah, atau kanan, atau gambar tersebut ditampilkan bersamaan dengan teks, kemudian diletakan pada bagian atas, bawah, atau tengah paragraf. Listing 4.1 mendemontrasikan bagaimana menampilkan gambar yang tidak bergerak dan listing 4.2 mendemontrasikan gambar yang bergerak. Berikut contoh sintak menampilkan gambar: <p align=center"><img src="namaimage"></p>
listing 4.1
<html>
<head>
<title>
Tampilkan gambar
</title>
</head>
<body>
<h2>
<p>
Gambar ini contoh saja....
<br>
</p>
</h2>
<image src="background2.jpg" alt="gambar" align="right">
</body>
</html>
Listing 4.2
<html>
<head>
<title>
tampilkan gambar
</title>
</head>
<body>
<h2>
<p>
gambar ini contoh saja...
<br>
</p>
</h2>
<image src="bunga.gif" alt="gambar" align="right">
catatan sintaks dari gambar bergerak dengan gambar yang tidak bergerak sama saja
</body>
</html>
Alignment Image
Alignment image digunakan untuk mengatur posisi image untuk ditempatkan, berikut contoh bagaimana mengatur align image dengan teks ditunjukan listing 4.3.
listing 4.3
<!-coba_imagealign.html
<html>
<body>
<p>
sebuah gambar
<image src="bunga.jpg" align="bottom" eidth="100" height="50"> in the text
</p>
<p>
An image
<image src="background3.jpg" align="middle" widht="100" heiht="50"> in the text
</p>
<p>
An image
<image src=" bunga.jpg" align="top" width="100" height="50"> in the text
</p>
</body>
</html>
Mengatur Ukuran Image
Atribut ukuran image, perlu menambahkan 2 atribut tambahan untuk memberitahu browser web ukuran image yang harus ditampilkan dalam browser web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height dan width, ukuran dinyatakan dalam pixel: height untuk menyatakan tinggi gambar, dan width untuk menspesifikasikan lebar gambar. Ukuran gambar ini dapat dengan menggunakan software untuk pemrosesan image.
Floating image digunakan untuk menampilkan image mengembang dikiri atau dikanan paragraf dengan ukuran image yang berbeda (image adjustment). Contoh program ditunjukan listing 4.4.
Listing 4.4
<!-coba_imagefloating.html
<html>
<body>
<p>
sebuah gambar
<image src="bunga.gif" align="left" width="150" height="75"> A paragraph
with an image
</p>
<p>
An image
<image src="background3.jpg" align="right" width="100" height="50"> a paragraph with an image.
The align atribut of the image is set to: "right". The image will float to the right of
this text
</p>
</body>
</html>
Teks Alternatif Untuk Image
Adakalanya browser yang digunakan oleh surfer adalah browser dengan mode teks, HTML menyediakan suatu mekanisme yang memberitahu surfer apa yang kurang dalam web page tersebut apabila tidak bisa mendapatkan gambar. Atribut ALT pada tag <img> menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. contoh berikut menunjukanya: <img src="cover.jpg" alt="ini teks untuk gambar">.
Pada beberapa browser teks pada atribut ALT akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar, teks ini muncul apabila menaruh mouse pointer diatas gambar agak lama. Contoh ini mendemontrasikan suatu teks alternatif untuk suatu image. Atribut "alt" memberi tahu reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image. Secara praktis hal ini baik untuk menyertakan atribut"alt" untuk setiap image pada setiap page.
Listing 4.5
<!-coba_imageteks.html
<html>
<body>
<image src="background3.jpg" alt="Go left" width="32" height="32">
<p>
Text only browser will only display the text in the "alt" attribute, which is " Go left"
Note that if you hold the mouse pointer over the image it will display the text
</p>
</body>
</html>
Image sebagai suatu link
Menu dalam web page merupakan pilihan link informatika ke web page yang lain. Menu umumnya dibuat dalam bentuk list ataupun teks biasa yang mempunyai link. Image dapat digunakan sebagai menu, dengan gambar menu lebih interaktif dan langsung memberi image tentang apa yang akan didapat kalau memilih menu tersebut,. Listing 4.6 contoh bagaimana membuat suatu image sebagai suatu link.
listing 4.6
<!coba_imagelink.html
<html>
<body>
<p>
You can also use an image as a link:
<a href="imagealign.html">
<image border="0" src="background3.jpg" width="35" heiht="35">
</a>
</p>
</body>
</html>
waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Untuk menyertakan sebuah inline image dalam dokumen web adalah:
<img src="namaimage">; dengan nama image adalah URL dari file image tersebut.
Kriteria pemilihan file gambar berdasarkan jenis format file penyimpanan gambar, dijelaskan berikut ini:
a. GIF (Graphic Interchange Format): banyak digunakan dalam internet. Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena lebih dari 256 warna. GIF tidak cocok untuk gambar yang mengandung garis. File GIF terdiri dari interlacing, gambar dapat ditampilkan secara bertahap tidak perlu harus semua file terkirim terlebih dahulu; transparent, background gambar transparan; animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi sepeti animasi.
b. JPEG (Join Photographic Experts Group) termasuk format file terbanyak pemakaianya setelah GIF. Warna terdiri dari 24 bit, di optimasi untuk menyimpan file gambar berupa foto, hasil seni natural, dan bahan yang menyerupai dengan kompresi (4:1). Orang lebih sensitif terhadap keterangan (brightness) daripada warna. Digunakan untuk membuat warna grayscale. Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam. Jenis terdiri: progressive JPEG, mirip seperti interlacing GIF. Opyimasi gambar dengan mengurangi jumlah warna. Gunakan thumnails, yaitu membuat file gambar dengan ukuran kecil yang mewakili gambar besar yang sebenarnya. Blur image sebelum membuat lebih kecil. Tambahkan teks kedalam gambar yang telah dikonversi kedalam format 256 warna.
c. Animated GIF, adalah sebuah format file gambar GIF, didalamnya tersimpan beberapa gambar GIF yang disatukan dalam satu file, file ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
Menampilkan Image
Pengaturan penampilan gambar dapat ditampilkan terpisah dari teksnya dan ditampilkan dikiri, tengah, atau kanan, atau gambar tersebut ditampilkan bersamaan dengan teks, kemudian diletakan pada bagian atas, bawah, atau tengah paragraf. Listing 4.1 mendemontrasikan bagaimana menampilkan gambar yang tidak bergerak dan listing 4.2 mendemontrasikan gambar yang bergerak. Berikut contoh sintak menampilkan gambar: <p align=center"><img src="namaimage"></p>
listing 4.1
<html>
<head>
<title>
Tampilkan gambar
</title>
</head>
<body>
<h2>
<p>
Gambar ini contoh saja....
<br>
</p>
</h2>
<image src="background2.jpg" alt="gambar" align="right">
</body>
</html>
Listing 4.2
<html>
<head>
<title>
tampilkan gambar
</title>
</head>
<body>
<h2>
<p>
gambar ini contoh saja...
<br>
</p>
</h2>
<image src="bunga.gif" alt="gambar" align="right">
catatan sintaks dari gambar bergerak dengan gambar yang tidak bergerak sama saja
</body>
</html>
Alignment Image
Alignment image digunakan untuk mengatur posisi image untuk ditempatkan, berikut contoh bagaimana mengatur align image dengan teks ditunjukan listing 4.3.
listing 4.3
<!-coba_imagealign.html
<html>
<body>
<p>
sebuah gambar
<image src="bunga.jpg" align="bottom" eidth="100" height="50"> in the text
</p>
<p>
An image
<image src="background3.jpg" align="middle" widht="100" heiht="50"> in the text
</p>
<p>
An image
<image src=" bunga.jpg" align="top" width="100" height="50"> in the text
</p>
</body>
</html>
Mengatur Ukuran Image
Atribut ukuran image, perlu menambahkan 2 atribut tambahan untuk memberitahu browser web ukuran image yang harus ditampilkan dalam browser web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height dan width, ukuran dinyatakan dalam pixel: height untuk menyatakan tinggi gambar, dan width untuk menspesifikasikan lebar gambar. Ukuran gambar ini dapat dengan menggunakan software untuk pemrosesan image.
Floating image digunakan untuk menampilkan image mengembang dikiri atau dikanan paragraf dengan ukuran image yang berbeda (image adjustment). Contoh program ditunjukan listing 4.4.
Listing 4.4
<!-coba_imagefloating.html
<html>
<body>
<p>
sebuah gambar
<image src="bunga.gif" align="left" width="150" height="75"> A paragraph
with an image
</p>
<p>
An image
<image src="background3.jpg" align="right" width="100" height="50"> a paragraph with an image.
The align atribut of the image is set to: "right". The image will float to the right of
this text
</p>
</body>
</html>
Teks Alternatif Untuk Image
Adakalanya browser yang digunakan oleh surfer adalah browser dengan mode teks, HTML menyediakan suatu mekanisme yang memberitahu surfer apa yang kurang dalam web page tersebut apabila tidak bisa mendapatkan gambar. Atribut ALT pada tag <img> menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. contoh berikut menunjukanya: <img src="cover.jpg" alt="ini teks untuk gambar">.
Pada beberapa browser teks pada atribut ALT akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar, teks ini muncul apabila menaruh mouse pointer diatas gambar agak lama. Contoh ini mendemontrasikan suatu teks alternatif untuk suatu image. Atribut "alt" memberi tahu reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image. Secara praktis hal ini baik untuk menyertakan atribut"alt" untuk setiap image pada setiap page.
Listing 4.5
<!-coba_imageteks.html
<html>
<body>
<image src="background3.jpg" alt="Go left" width="32" height="32">
<p>
Text only browser will only display the text in the "alt" attribute, which is " Go left"
Note that if you hold the mouse pointer over the image it will display the text
</p>
</body>
</html>
Image sebagai suatu link
Menu dalam web page merupakan pilihan link informatika ke web page yang lain. Menu umumnya dibuat dalam bentuk list ataupun teks biasa yang mempunyai link. Image dapat digunakan sebagai menu, dengan gambar menu lebih interaktif dan langsung memberi image tentang apa yang akan didapat kalau memilih menu tersebut,. Listing 4.6 contoh bagaimana membuat suatu image sebagai suatu link.
listing 4.6
<!coba_imagelink.html
<html>
<body>
<p>
You can also use an image as a link:
<a href="imagealign.html">
<image border="0" src="background3.jpg" width="35" heiht="35">
</a>
</p>
</body>
</html>
EmoticonEmoticon