HTML Gambar

Dalam HTML, gambar didefinisikan dengan tag <img>. Dan Tag <img> berdiri sendiri, yang berarti bahwa tag ini hanya berisi atribut, dan tidak memiliki tag penutup.

Untuk menampilkan sebuah gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "source atau sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan.

Contoh sintaks untuk mendefinisikan gambar adalah sebagai berikut :

<img src="ULR GAMBAR" alt="NAMA GAMBAR"/>

URL menunjuk ke lokasi di mana gambar disimpan, sedang atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan. Atribut alt sangat berfungsi menyediakan informasi alternatif bagi gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau yang lain).

Kemudian Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, maka browser akan menampilkan gambar sebagi berikut :

paragraf pertama
gambar
paragraf kedua

Mengatur Tinggi dan Lebar dari suatu Gambar
Atribut "height" dan atribut "width" digunakan untuk menentukan tinggi dan lebar dari suatu gambar. Dan secara default, nilai atribut yang ditetapkan adalah satuan piksel.

Jika atribut ini ditetapkan, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Tapi, tanpa atribut-atribut ini, browser tidak mengetahui ukuran gambar. Sehingga mengakibatkan tata letak halaman akan berubah selama pemuatan (karena beban gambar).

Berikut ini adalah praktek yang baik untuk menentukan atribut tinggi dan lebar untuk gambar :

<img src="ULR GAMBAR" alt="NAMA GAMBAR" width="304" height="228" />

Menyelaraskan gambar
Berikut contoh HTML untuk menyesuaikan gambar dalam teks :

<p><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" width=32 height=32 />Bila gambar terletak sebelum teks</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=bottom width=32 height=32 /> menggunakan align = "bottom".</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=middle width=32 height=32 /> menggunakan align = "middle".</p>

<p>Bila gambar ditengah dan <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=top width=32 height=32 /> menggunakan align = "top".</p>

<p> Sebuah gambar setelah teks.<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" width=32 height=32 /></p>

<p> <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=left width=32 height=32 />Sebuah paragraf dengan menggunakan gambar. Dan atribut align "left" menyelaraskan posisi gambar disebelah kiri.</p>

<p> <img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic38vxSrFITv6UcTMn9Xy1_YrFeSb41fUW9UFtDAy00nxhSurgVkF7k8rD4DTutfqybDpfvt4UqibDFNs0hH_4lVCgSnIgj5i2QgAjVC40Z7sJf33Ue9Q23vNVu_5Nt4b_tFpKcMF-wltw/h80/Logo+cara+buat+web+gratis.jpg alt="Logo" align=right width=32 height=32 />Sebuah paragraf dengan menggunakan gambar. atribut align "right" menyelaraskan posisi gambar disebelah  kanan teks ini.</p>

Berikut hasilnya :

Bila gambar terletak sebelum teks
Bila gambar ditengah dan menggunakan align = "bottom".

Bila gambar ditengah dan menggunakan align = "middle".

Bila gambar ditengah dan menggunakan align = "top".
Sebuah gambar setelah teks.

Sebuah paragraf dengan menggunakan gambar. Dan atribut align "left" menyelaraskan posisi gambar disebelah kiri.

Sebuah paragraf dengan menggunakan gambar. atribut align "right" menyelaraskan posisi gambar disebelah kanan teks ini.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.