Elemen gambar HTML

HTML Image - Menambahkan Gambar di HTML

Di halaman ini

1. Apa itu HTML ?

<img alt='' src=''/>

Cara memasang gambar / foto ke dokumen HTML adalah menggunakan tag img.

• Tag img merupakan tag kosong (tanpa konten).
• Tag img berfungsi "memanggil" file gambar melalui atribut src.
• Atribut src pada tag img berisi URL atau alamat petunjuk lokasi sumber dimana file gambar sebenarnya disimpan.
• Tag img ditambahkan atribut alt (alternatif teks) yang mendeklarasikan tentang gambar apa yang akan ditampilkan di halaman web.

Penggunaan tag img

Contoh 1:

<p align='center'>Ini adalah gambar contoh - 1</p>
<img alt='Belajar HTML' src='https://i.postimg.cc/g06ynHdC/ms-icon-310x310.webp'/>

Hasil :

Ini adalah gambar contoh 1

File gambar yang paling umum digunakan adalah berformat .jpg, .jpeg, .png, .gif, .webp.

Atribut elemen img

width=''

height=''

align=''

border=''

Atribut width : menentukan ukuran panjang.
Atribut height : menentukan ukuran tinggi.
Atribut border : membuat bingkai yang mengelilingi elemen.
Atribut align : menentukan tata letak elemen.

Atribut width & height

Contoh 2:

<p align='center'>Ini adalah gambar contoh - 2</p>
<img alt='Belajar HTML'
src='https://i.postimg.cc/g06ynHdC/ms-icon-310x310.webp'
width='100' height='100'/>

Hasil :

Ini adalah gambar contoh 2

Tanpa menggunakan atribut width & height maka gambar akan ditampilkan apa adanya / sesuai dimensi yang sebenarnya, seperti gambar contoh -1.
Penggunaan atribut width & height bersifat "memaksa" ukuran gambar untuk membesar atau mengecil sesuai nilai ukuran yang dimasukkan.

Contoh 3:

<p align='center'>Ini adalah gambar contoh - 3</p>
<img alt='Belajar HTML'
src='https://i.postimg.cc/g06ynHdC/ms-icon-310x310.webp'
width='100' height='50'/>

Hasil :

Ini adalah gambar contoh 3