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).
<img
src="lokasi gambar" alt="teks alternatif"
width="lebar" height="tinggi" />
Contoh:
<img
src="http://htmlcssguides.com/images/gambar-avril.jpg"
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
<img
src="http://htmlcssguides.com/images/gambar-avril.jpg"
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.
<img
src="http://htmlcssguides.com/images/gambar-avril.jpg" style="border:4px
solid #000" alt="Gambar Avril" width="100"
height="100" />
Hasil:
0 komentar:
Posting Komentar