Manipulasi Gambar Pada Web
Manipulasi Gambar Pada Web
Gambar di dalam 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. etiap gambar akan butuh waktu tambahan untuk dodownload dan
memperlambat awal penampilan suatu dokumen dalam browser. Karena perlu hatihati untuk menyertakan gambar dalam dokumen web site.Untuk menyertakan
sebuah image dalam dokumen web adalah : <img src=”nama_image”>.
Kita harus menambahkan 2 atribut tambahan untuk memberi tahu browser
web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalahheight dan width.ukuran dalam pixel. Height untuk menyatakan tinggi gambar,
width untuk mendefinisikan ukuran lebar.Contoh : image1.html<html>
<head>
<title>Image HTML</title>
</head>
<body>
<p>Gambar Komputer dalam folder yang sama dengan letak file
HTML-nya :</p>
<p><img src="computer1.jpg" width="102" height="102"></p>
<p>Gambar Komputer dari folder yang berbeda dengan letak file
HTML-nya : </p>
<p><img
src="file:///C|/udinharun/bukuwebdesigncc/jpg/computer2.jpg"
width="141" height="125"></p>
<p>Gambar dari www.eepis-its.edu</p>
<p><img src="http://www.eepisits.edu/images/stories/stories/2005/bungalahir.jpg"
width="382" height="54"> </p>
</body>
</html>
hasil jadi
Alignment ImageContoh berikut ini mengatur image dengan align.Atribut align diisi dengan :
top, bottom. middleContoh : imagealign.html<html>
<head>
<title>image align</title></head>
<body>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103"
height="77" align="top"> di tengah teks dengan atribut
align = top <br>
height="77" align="middle"> di tengah teks dengan atribut
align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103"
height="77" align="bottom"> di tengah teks dengan atribut
align = top <br>
</p>
</body>
</html>
hasil jadi :
Floating ImageBerikut ini contoh membiarkan suatu image mengambang di kiri atau di
kanan paragraf.Contoh : floatingimage.html<html>
<head>
<title>Floating Image</title>
</head>
<body>
<p><img src="jpg/house1.jpg" width="114" height="62"
hspace="10" vspace="5" align="left">Sebuah paragraf yang
berisi image. atribut align image diisi dengan
"left". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "left". Sebuah
paragraf yang berisi image. atribut align image diisi
dengan "left". Sebuah paragraf yang berisi
image. atribut align image diisi dengan "left".
</p>
<p><img src="jpg/house1.jpg" width="114" height="62"
hspace="10" vspace="5" align="right">Sebuah paragraf yang
berisi image. atribut align image diisi dengan
"right". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "right".Sebuah
paragraf yang berisi image. atribut align image diisi
dengan "right". Sebuah paragraf yang berisi
image. atribut align image diisi dengan "right".
Sebuah paragraf yang berisi image. atribut align image
diisi dengan "right".</p>
</body>
</html>
hasil jadi :
Image AdjustmentContoh berikut ini adalah menampilkan image sesuai dengan ukuran yang
berbeda-beda. Untuk mengubah ukuran image dengan mengubah nilai width dan
height.Contoh : adjusmentimage.html<html>
<head>
<title>Adjustment Image</title>
</head>
<body>
<p>Image dengan ukuran 71 x 53 </p>
<p><img src="jpg/house1.jpg" width="71" height="53"></p>
<p><img src="jpg/house1.jpg" width="122" height="79"></p>
<p>Image dengan ukuran 163 x 93 </p>
<p><img src="jpg/house1.jpg" width="163" height="93">
</p>
</body>
</html>
hasil jadi :
Teks alternatif untuk imageAtribut alt pada tag <img> menyediakan tempat untuk menampilkan teks
pengganti gambar. Keterangan alternatif akan muncul jika kita menaruh mouse
pointer di atas gambar agak lama.Contoh – Listing 6.5 : alternatifimage.html<html>
<head>
<title>Alternatif Image</title>
</head>
<body>
<img src="jpg/back.jpg" alt="klik to next" width="111"
height="65">
<br>
Browser akan menampilkan tulisan <strong>klik to
next</strong> jika mouse kita letakkan diatas gambar anak
panah
</body>
</html>
hasil jadi :
Image sebagai linkImage dapat kita buat sebagai sebuah link. Sehingga kita dapat membuat
menu-menu web site dengan sebuah image sebagai link ke halaman lain atau alamat
web site lain.Contoh imagelink.html<html>
<head>
<title>image link</title>
</head>
<body>
<p><a href="http://www.eepis-its.edu" target="_blank"><img
src="jpg/back.jpg" width="111" height="87" border="0"></a>
</p>
<p>Membuat image menu dengan menambahkan tag <a href>.
jika icon anak panah kita klik, maka akan muncul alamat
website www.eepis-its.edu. </p>
</body>
</html>
hasil jadi:
Image MapSebuah image dapat dijadikan sebuah link dengan mendefinisikan daerah
tertentu mengandung sebuah link ke halaman lain atau alamat internet lain. Definisi
daerah di dalam image yang dijadikan link dinyatakan dalam bentuk objek :
| Titik | |||
| Poligon |
| persegi panjang |
| lingkaran.elips |
| Metode imap map mengharuskan mendefinisikan daerah-daerah dalam suatu gambar yang mempunyai link atau yang akan diberi link. Daerah yang didefinisikan berupa bentuk daerah dan kordinat pembatasnya : | |||||
| |||||
<head>
<title>image map</title>
</head>
<body>
<div align="center"><img src="jpg/house1.jpg" width="202"
height="90" border="0" usemap="#Maprumah">
<map name="Maprumah" id="Maprumah">
<area shape="rect" coords="62,17,103,49"
href="atap.htm" alt="atap rumah">
<area shape="circle"coords="45,65,15"
href="dinding.htm" alt="dinding rumah">
</map>
</div>
</body>
</html>
hasil jadi :
Keterangan : Mendefinisikan imap map persegi panjang dan lingkaran.Source Code – Listing 6.8 : atap.htm<html>
<head>
<title>atap rumah</title>
</head>
<body>
Anda menekan daerah atap rumah
</body>
</html>Source Code - Listing 6.9 : dinding.htm<html>
<head>
<title>Dinding Rumah</title>
</head>
<body>
anda menekan daerah dinding rumah
</body>
</html>
Selamat Mencoba
Komentar
Posting Komentar