Cara menampilkan gambar pada html

menampilkan gambar untuk html

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

2 Replies to “Cara menampilkan gambar pada html”

  1. Sangat bagus sekali, mungkin mas Hendky punya tutorial html cara mengarahkan pormat text ke Gambar intinya pada saat text itu di lalui oleh kursor secara otomatis text tersebut mengarah ke gambar, kalau yang sekarang ini kebanyakan link mengarah ke gambar, jadi harus di klik dahulu linknya kemudian gambar muncul. contoh Ibu Kota Jakarta akan di pindahkahkan ke Palangkaraya di sini ada text berbunyi Jakarta, pada saat kursos di arahkan ke text Jakarta akan muncul gambar Jakarta, kira kira seperti itu mas. terimakasi bila ada saran dan arahannya

    1. makasih mas. Saat kursor diatas gambar jadi pengen muncul teks?
      Coba pake atribut title mas.

      Contoh:

      <img src="file://D:/gambar/hidangan-makanan.jpg" height="400" width="400" alt="kucing gendut yang lucu" title="Testing title teks gambar" >

      Ganti atribut src dengan alamat gambar yang akan dituju !!

Leave a Reply

Your email address will not be published. Required fields are marked *