Dengan
gambar atau image akan membuat website lebih menarik dan enak di pandang, tapi
perlu
diperhatikan
bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang
dibutuhkan untuk mengakses website kita.
Format
Gambar
Untuk
format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF
dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga
digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon,
dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang
berkualitas bagus dengan warna yang memadai digunakan format JPG.
Memasukkan
gambar ke HTML
Untuk
memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan
src (source) sebagai sumber atau lokasi dari gambar.
<img src="lokasi gambar" />
Ketika
memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting
harus selalu disertakan dengan elemen img yaitu alt, width dan height.
Alt
(alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika
gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah
ukuran lebar dan tinggi gambar dalam satuan pixel(px).
Contoh:
alt="Gambar Avril"
width="100" height="100" />
Hasil:
Memposisikan Gambar
Untuk
memposisikan gambar ke kiri dan ke kanan digunakan atribut style dengan
properti float di ikuti dengan nilai (value) left (kiri) atau right (kanan).
Contoh
membuat gambar disebelah kanan
style="float:right;"alt="Gambar
Avril" width="100" height="100" />
Hasil:
Membuat gambar di tengah dokumen
Untuk
membuat gambar berada ditengah dokumen HTML kita harus memasukkan gambar
tersebut di dalam blok elemen seperti p, div, table dsb. Kemudian kita masukkan
atribut style dengan properti text-align kedalam elemen blok tersebut, dalam
contoh kita akan menggunakan elemen div.
<div
style="text-align:center;"><img src=http://htmlcssguides.com/images/gambar-avril.jpg
alt="Gambar Avril"
width="100" height="100" /></div>
Hasil:
Membuat
border gambar
Untuk
membuat border pada gambar anda dapat menambahkan atribut style dengan properti
border dengan nilai dalam px atau jika ingin menghilangkan border anda cukup
menuliskan style="border:none"
Berikut
adalah contoh gambar dengan border 4px warna hitam.
style="border:4px solid #000"
alt="Gambar Avril" width="100" height="100" />
Hasil: