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: