12 Juli 2026

,

Memasukkan Gambar pada HTML

No comments

 


Memasukkan Gambar pada HTML

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa diharapkan mampu:

  • Memahami fungsi tag <img> pada HTML.
  • Menambahkan gambar ke dalam halaman web.
  • Menggunakan atribut src, alt, width, dan height.

 

Apa Itu Gambar pada HTML?

Gambar merupakan salah satu elemen penting dalam sebuah website. Dengan gambar, tampilan website menjadi lebih menarik dan informasi lebih mudah dipahami.

Untuk menampilkan gambar di HTML digunakan tag:

<img>

Tag <img> adalah tag tunggal (self-closing), sehingga tidak memiliki tag penutup.

 

Struktur Dasar Tag <img>

<img src="nama_gambar.jpg" alt="Keterangan gambar">

Penjelasan:

  • src (source)
    Menentukan lokasi atau alamat file gambar yang akan ditampilkan.
  • alt (alternative text)
    Menampilkan teks pengganti apabila gambar tidak dapat ditampilkan. Atribut ini juga membantu pengguna yang menggunakan pembaca layar (screen reader).

 

Contoh Penggunaan

Misalnya terdapat file gambar bernama kucing.jpg yang berada di folder yang sama dengan file HTML.

<!DOCTYPE html>

<html>

<head>

    <title>Menampilkan Gambar</title>

</head>

<body>

 

<h1>Hewan Kesayangan</h1>

 <img src="kucing.jpg" alt="Gambar seekor kucing">

 </body>

</html>

Hasilnya:

  • Judul "Hewan Kesayangan" muncul.
  • Gambar kucing.jpg ditampilkan di bawah judul.

 

Mengatur Ukuran Gambar

Ukuran gambar dapat diatur menggunakan atribut:

  • width = lebar gambar
  • height = tinggi gambar

Contoh:

<img src="kucing.jpg" alt="Kucing" width="300">

atau

<img src="kucing.jpg" alt="Kucing" width="300" height="200">

Keterangan:

  • width="300" berarti lebar gambar 300 piksel.
  • height="200" berarti tinggi gambar 200 piksel.

 

Menampilkan Gambar dari Folder

Misalnya struktur folder:

Website

│

├── index.html

└── gambar

      └── bunga.jpg

Maka penulisannya:

<img src="gambar/bunga.jpg" alt="Bunga">

 

Menampilkan Gambar dari Internet

Selain dari komputer, gambar juga dapat ditampilkan menggunakan alamat URL.

Contoh:

<img src="https://example.com/gambar.jpg" alt="Gambar dari internet">

 

Contoh Lengkap

<!DOCTYPE html>

<html>

<head>

    <title>Belajar Gambar</title>

</head>

<body>

 

<h1>Belajar HTML</h1>

 

<p>Berikut adalah gambar bunga.</p>

 

<img src="gambar/bunga.jpg"

     alt="Bunga Matahari"

     width="350">

 

</body>

</html>

 

Kesalahan yang Sering Terjadi

1. Nama file salah

❌

<img src="bungaa.jpg">

Padahal nama file sebenarnya:

bunga.jpg

 

2. Folder salah

Misalnya gambar berada di folder gambar, tetapi ditulis:

<img src="bunga.jpg">

Seharusnya:

<img src="gambar/bunga.jpg">

 

3. Lupa menambahkan atribut alt

Kurang baik:

<img src="kucing.jpg">

Lebih baik:

<img src="kucing.jpg" alt="Seekor kucing berwarna putih">

 

Ringkasan

  • Tag untuk menampilkan gambar adalah <img>.
  • Tag <img> tidak memiliki tag penutup.
  • Atribut src digunakan untuk menentukan lokasi gambar.
  • Atribut alt digunakan sebagai teks pengganti jika gambar tidak tampil.
  • Atribut width dan height digunakan untuk mengatur ukuran gambar.

 

 


0 comments:

Posting Komentar