Dengan gambar akan membuat website atau blog lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website atau blog 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, dan sebagainya, GIF bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG.
Masukkan 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 3 atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu
alt,
width, dan
height.
Alt (alternate) adalah sebagai teks 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="https://lh6.googleusercontent.com/-IHvmHczxf5o/AAAAAAAAAAI/AAAAAAAAAyQ/bNVBg9IhiuQ/s120-c/photo.jpg" alt="Gambar Alvin" 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="https://lh6.googleusercontent.com/-IHvmHczxf5o/AAAAAAAAAAI/AAAAAAAAAyQ/bNVBg9IhiuQ/s120-c/photo.jpg" style="float:right;" alt="Gambar Alvin" 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 dan sebagainya. Kemudian masukkan atribut style dengan properti text-align ke dalam elemen blok tersebut, dalam contoh kita akan menggunakan elemen div.
<div style="text-align:center;"><img src="https://lh6.googleusercontent.com/-IHvmHczxf5o/AAAAAAAAAAI/AAAAAAAAAyQ/bNVBg9IhiuQ/s120-c/photo.jpg" alt="Gambar Alvin" 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 contohnya gambar dengan border 4px warna hitam.
<img src="https://lh6.googleusercontent.com/-IHvmHczxf5o/AAAAAAAAAAI/AAAAAAAAAyQ/bNVBg9IhiuQ/s120-c/photo.jpg" style="border:4px solid #000" alt="Gambar Alvin" width="100" height="100" />
Hasil:
Selamat mencoba dan semoga berhasil,..
Blogger
Google+
Facebook
Twitter