22.28
My Profile's
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 danhttp://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…
sumber dari : www.cobalihatsaja.com
Posted in: HTML,Web Design
0 komentar:
Posting Komentar