Cara menampilkan gambar pada html
Di artikel ini Anda akan belajar cara menampilkan gambar pada html dengan penjelasan yang lengkap ser
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 gambarsrc
salah satu atribut html yang digunakan untuk memberikan alamat atau url gambarwidth
salah satu atribut html yang digunakan untuk memberikan nilai lebar pada gambarheight
salah satu atribut html yang digunakan untuk memberikan nilai tinggi pada gambaralt
salah 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 |