Belajar HTML Bag. 6 ( Image )
Friday, August 27, 2010
Labels:
Windows dan Linux
Pada artikel ini kita akan membahas tentang image dalam HTML. Disini kita akan membahas 3 buah tag yang digunakan untuk keperluan mengatur image pada webpage kita. Yaitu <img>, <map> dan <area>.
Ok langsung aja dimulai,
Tag <img>
Tag <img> adalah tag dasar yang digunakan untuk menampilkan / menambahkan image pada webpage kita. Pada contoh berikut kita akan mencoba menambahkan file gambar dengan nama byson.jpg kedalam webpage kita.
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<h3>Menambahkan Gambar pada webpage</h3>
<img src=”byson.jpg” alt=”gambar byson”/>
</body>
</html>
Hasil :
Penjelasan :
Pada kode diatas kita gunakan tag <img> untuk menambahkan image, dengan atribut “sr” → untuk menentukan alamat / posisi file gambar tersebut, “alt” → untuk memberikan text alternatif jika gambar tidak berhasil dimuat, “width” → untuk menentukan lebar gambar tersebut, dan “height” → untuk menentukan tinggi gambar tersebut.
Tag <map>
Tag <map> digunakan untuk membagi sebuah image menjadi beberapa area, pada umumnya bagian-bagian yang dihasilkan digunakan untuk membuat sebuah link. Untuk lebih jelasnya perhatikan dan coba contoh dibawah ini :
Code:
<html>
<head>
<title> Cobalihatsaja Tutorial </title>
</head>
<body>
<h3>Menambahkan Gambar Area pada Image</h3>
<img src="byson.jpg" alt="gambar byson" width="800" height="500" usemap="#motor"/>
<map name="motor">
<area shape="rect" coords="0,0,200,500" alt="belakang" href="http://www.4-mall.com"/>
<area shape="circle" coords="0,300,200" alt="tengah" href="http://www.awansusanto.4-mall.com"/>
<area shape="rect" coords="500,0,800,500" alt="depan" href="http://www.cobalihatsaja.com"/>
</map>
</body>
</html>
Hasil :
Penjelasan :
Perhatikan kode yang kita buat diatas, kita mencoba membagi gambar menjadi tiga area dengan nama : belakang, tengah dan depan, masing masing berbentu segi empat, lingkaran dan segi empat, dimasing-masing area juga kita meletakan hyperlink ke alamat situs : http://www.4-mall.com , http://www.awansusanto.4-mall.com dan http://www.cobalihatsaja.com , pertama kali yang kita lakukan adalah menyisipkan gambar telebih dahulu kedalam webpage dengan menggunakan tag <img> dan tambahkan atribut “usemap” untuk menunjuk map mana yang akan kita gunakan dalam image ini, disini kita menggunakan nama “motor” sebagai map kita. Selanjutnya perhatikan pada tag <map> yang kita buat dengan atribut “name” motor. Dalam deklerasi map motor tersebut kita pilah-pilah area menjadi 3 bagian yang berbentuk segi empat dan lingkaran. Untuk lebih jelasnya perhatikan penjelasan penggunaan shape pada tag <area> sbb :
a. rect / rectangle / segi empat
pada jenis shape ini kita menentukan 4 buah kordinat sbb (xa,ya,xb,yb):
xa = kordinat x mulai
ya= kordinat y mulai
xb = kordinat x akhir
yb = kordinat y akhir
b. circle / lingkaran
pada jenis shape ini kita harus menentukan 3 kordinat (x,y,r) :
x = kordinat x
y = kordinat y
r = panjang jari-jari lingkaran
Setelah mengeset kordinat-kordinat area, selanjutnya kita menambahkan atribut “alt” dan “href” agar link yang kita buat bekerja.
Oke…cukup jelas kan?? Silahkan dijajal-jajal dewe…. dan tetap Semangat…
Terima Kasih Sudah Mampir, Salam Persahabatan...
1 comments:
izin copas juragan. mantap banget
Post a Comment