Menampilkan Gambar pada HTML merupakan sesuatu yang penting dalam pembuatan website. hal ini penting karena gambar dapat meningkatkan desain dan tampilan halaman web menjadi lebih indah menarik dan interaktif dan tidak hampa.
Pada tutorial belajar HTML Dasar cara menambahkan gambar di HTML ini kita akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>. gambar yang bisa digunakan ber ekstensi
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
lalu bagaimana penggunaan Cara Menampilkan Gambar Pada HTML
Cara Menampilkan Gambar Pada HTML
caranya kita bisa menggunakan atribut src di dalam tag <img> .. Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML dasar Membuat Link Pada HTML ).
Baik perhatikan contoh Cara Menampilkan Gambar Pada HTML sebelumnya kita akan menempatkan gambar kedalam satu folder dengan file code kita.
pada contoh ini kita gunakan gambar penguins.jpg yang berada dalam satu folder dengan code HTML saat ini. Simpan sebagai belajargambar.html
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<img src="penguins.jpg" />
</body>
</html>
hasilnya 
Atribut untuk Tag <img>
selanjutnya kita akan belajar juga tentang berapa atribut yang sering digunakan pada tag <img> :
- alt untuk teks alternatif untuk gambar;
- width untuk menentukan lebar gambar;
- height untuk menentukan tinggi gambar;
- style untuk menentukan style CSS untuk gambar.
perhatikan contoh code dibawah ini yang menjelaskan seluruh atribut diatas
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<h2>Atribut alt </h2>
<img src="" alt="gambar penguin" />
<h2>Atribut width dan height </h2>
<img src="penguins.jpg" width="200" height="150" alt="penguins"/>
<img src="penguins.jpg" width="150" height="100" alt="penguins"/>
<img src="penguins.jpg" width="50" height="50" alt="penguins"/>
<h2>Atribut Style </h2>
<img src="penguins.jpg" style="width: 160px;border: 3px solid red;"/>
<img src="penguins.jpg" style="width: 160px;border-radius: 10px;"/>
<img src="penguins.jpg" style="width: 100px;height: 100px;border-radius: 100%;"/>
</body>
</html>
hasilnya 
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan. atribut alt tidak wajib digunakan akan tetapi sebaiknya tetap dipakai karena, nantinya teks alternatif akan dibaca oleh screen reader. Screen reader adalah aplikasi pembaca yang digunakan oleh tuna netra agar bisa mengetahui informasi yang ada di komputer. Selain itu, atribut alt juga sering digunakan untuk meletakan kata kunci untuk SEO
Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya.. kita memberikan nilai 200px.
Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu. Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah. Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan pada pojok gambar. Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan lingkaran.
