Peranan gambar dalam HTML atau suatu halaman web sangatlah penting, bisa Anda bayangkan jika situs tidak mempunyai gambar sama sekali ???. Gambar pada halaman web berguna untuk memberikan design yang lebih menarik atau memberikan informasi dalam sebuah artikel.
Menampilkan gambar
<img>salah satu elemen html yang digunakan untuk mendefinisikan sebuah gambarsrcsalah satu atribut html yang digunakan untuk memberikan alamat atau url gambarwidthsalah satu atribut html yang digunakan untuk memberikan nilai lebar pada gambarheightsalah satu atribut html yang digunakan untuk memberikan nilai tinggi pada gambaraltsalah satu atribut html yang digunakan untuk memberikan teks alternatif jika gambar gagal dimuat
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<img src="https://hendky.com/wp-content/uploads/2019/06/kucing-malas.jpg" width="500" height="400" alt="kucing gendut yang lucu" >
</body>
</html>
Hasilnya:
Jika gambar gagal dimuat maka akan menampilkan teks alternatif alt.
Sebagai contoh jika gambar gagal dimuat:
Penyebab gambar gagal dimuat
- memberikan nilai pada atribut src yang salah
- koneksi yang lambat
- tidak menggunakan format gambar yang didukung browser
Menampilkan gambar offline
Anda bisa menampilkan gambar offline atau gambar yang berada pada komputer Anda. Silakan ganti isi atribut src dengan alamat gambar yang ada dikomputer Anda.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Judul post</title>
</head>
<body>
<img src="file://D:/gambar/hidangan-makanan.jpg" width="400" height="300" alt="gambar makanan pedas" >
</body>
</html>
Sesuaikan alamat gambar yang didalam src dengan gambar yang ada dikomputer Anda.
Ringkasan pembelajaran
| Elemen / Atribut | Kegunaanya |
|---|---|
| <img> | mendefinisikan untuk sebuah gambar |
| src | mendefinisikan untuk memberikan alamat atau url gambar |
| width | mendefinisikan untuk memberikan nilai lebar pada gambar |
| height | mendefinisikan untuk memberikan nilai tinggi pada gambar |
| alt | mendefinisikan untuk memberikan teks alternatif untuk gambar |
