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 gambar
  • src salah satu atribut html yang digunakan untuk memberikan alamat atau url gambar
  • width salah satu atribut html yang digunakan untuk memberikan nilai lebar pada gambar
  • height salah satu atribut html yang digunakan untuk memberikan nilai tinggi pada gambar
  • alt 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:

kucing gendut yang lucu

Jika gambar gagal dimuat maka akan menampilkan teks alternatif alt.
Sebagai contoh jika gambar gagal dimuat:

gambar yang 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 / AtributKegunaanya
<img>mendefinisikan untuk sebuah gambar
srcmendefinisikan untuk memberikan alamat atau url gambar
widthmendefinisikan untuk memberikan nilai lebar pada gambar
heightmendefinisikan untuk memberikan nilai tinggi pada gambar
altmendefinisikan untuk memberikan teks alternatif untuk gambar