Kode HTML untuk Manipulasi Gambar Pada Web | mahanani

Kode HTML untuk Manipulasi Gambar Pada Web

Baca Juga :

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 hati-hati 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 adalah height dan width.ukuran dalam pixel. Height untuk menyatakan tinggi gambar, width untuk mendefinisikan ukuran lebar.

Cara memasukkan gambar dari macromedia dreaweaver :

Untuk memasukkan gambar pada web yang akan dibuat menggunakan Dreamweaver dapat dilakukan dengan:

1. Buat halaman baru

2. Masukkan image : klik insert – image

3. Pilih image yang akan dimasukkan

clip_image002

Gambar Cara memasukkan gambar

4. Untuk pengaturan properties

clip_image004

Gambar  Pengaturan property

Keterangan Atribut:
W : lebar image
H : tinggi image
Src : sumber / letak image
Alt : alternate – tulisan yang akan muncul jika kursor berada diatasnya
Class : pilih Class jika menggunakan definisi CSS.
Map : jika image digunakan sebagai link
V Space : jarak image dari tulisan atasnya
H Space : jarak image dari tulisan disampingnya.
Border : tebal bingkai image
Align : letak posisi image – Right | Left | Center

Contoh – Listing : 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.eepis-its.edu/images/stories/stories/2005/bungalahir.jpg" width="382" height="54"> </p>

</body>

</html>

clip_image005

Gambar Contoh gambar pada web

Alignment Image

Contoh berikut ini mengatur image dengan align.Atribut align diisi dengan : top, bottom. middle

Contoh – Listing : 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>

<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" 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>

Floating Image

Berikut ini contoh membiarkan suatu image mengambang di kiri atau di kanan paragraf.

Contoh – Listing  : 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 &quot;left&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;left&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;left&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;left&quot;. </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 &quot;right&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;right&quot;.Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;right&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;right&quot;. Sebuah paragraf yang berisi image. atribut align image diisi dengan &quot;right&quot;.</p>

</body>

</html>

clip_image006

Gambar Image floating

Image Adjustment

Contoh berikut ini adalah menampilkan image sesuai dengan ukuran yang berbeda-beda. Untuk mengubah ukuran image dengan mengubah nilai width dan height.

Contoh – Listing : 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>Image dengan ukuran 122 x 79 </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>

clip_image007

Gambar Contoh hasil image adjustment

Teks alternatif untuk image

Atribut 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 : 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>

Image sebagai link

Image 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 – Listing  : 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 &lt;a href&gt;. jika icon anak panah kita klik, maka akan muncul alamat website www.eepis-its.edu. </p>

</body>

</html>

Image Map

Sebuah 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 :

· POINT : daerah berupa satu titik, dengan kordinat x,y

· RECT : daerah berupa persegi panjang, dengan kordinat pojok kiri atas dan pojok kanan bawah.

· POLY : daerah berupa polygon, dengan kordinat x, y untuk setiap titik dari setiap garis.

· CIRCLE : daerah berupa lingkaran, dengan kordinat titip pusat lingkaran (x,y) dan jari-jari.

Contoh – Listing  : imagemap.html

<html>

<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>

Keterangan : Mendefinisikan imap map persegi panjang dan lingkaran.

clip_image010

clip_image012

clip_image014

Gambar  . Image Map

Jika daerah persegi panjang diklik, maka akan muncul halaman atap.htm, dan jika daerah lingkaran diklik maka akan muncul halaman dinding.htm

Source Code – Listing  : atap.htm

<html>

<head>

<title>atap rumah</title>

</head>

<body>

Anda menekan daerah atap rumah

</body>

</html>

Source Code - Listing  : dinding.htm

<html>

<head>

<title>Dinding Rumah</title>

</head>

<body>

anda menekan daerah dinding rumah

</body>

</html>

Poskan Komentar

Silahkan berikan komentar anda

Forum Multimedia Edukasi www.formulasi.or.id

Kategori