IMAGE HTML

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.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://kompikita.net/images/gambar-ronaldo.jpg" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,



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://kompikita.net/images/gambar-ronaldo.jpg" style="float:right;" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,








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://kompikita.net/images/gambar-ronaldo.jpg" alt="Gambar Ronaldo" width="100" height="100" /></div>

Maka Hasilnya,

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://kompikita.net/images/gambar-ronaldo.jpg" style="border:4px solid #000" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,