HTML Image

HTML Dasar: Menampilkan Gambar (Images)

Apa Itu Gambar dalam HTML?

HTML memungkinkan kita untuk menampilkan gambar di halaman web menggunakan tag <img>. Gambar sangat penting untuk memperindah tampilan, memberikan informasi visual, atau menyampaikan pesan secara lebih cepat.

Struktur Dasar Tag `<img>`

<img src="alamat-gambar" alt="deskripsi" />

Penjelasan Atribut:

src (source) → URL atau lokasi file gambar.
alt (alternative text) → Teks alternatif jika gambar tidak bisa ditampilkan (juga berguna untuk SEO dan aksesibilitas).

Contoh Penggunaan Sederhana

<img src="logo.png" alt="Logo Perusahaan" />

Jika gambar tidak ditemukan atau gagal dimuat, maka teks “Logo Perusahaan” akan ditampilkan sebagai penggantinya.

Atribut Tambahan `<img>`

Atribut	Fungsi
`width`	Menentukan lebar gambar (dalam piksel atau persentase)
`height`	Menentukan tinggi gambar
`title`	Menampilkan teks saat kursor diarahkan ke gambar
`style`	Memberikan gaya CSS langsung ke gambar

Contoh:

<img src="pemandangan.jpg" alt="Pemandangan Alam" width="300" height="200" title="Klik untuk memperbesar" />

Sumber Gambar

1. Folder lokal:

<img src="gambar/foto.jpg" alt="Foto dari folder lokal" />

URL online:

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

Best Practice (Tips Terbaik)

Selalu gunakan atribut alt untuk aksesibilitas dan SEO.
Gunakan gambar berukuran optimal agar halaman tidak lambat.
Gunakan format gambar yang sesuai:
- .jpg atau .jpeg → untuk foto.
- .png → untuk gambar transparan.
- .gif → untuk animasi ringan.
- .webp → untuk gambar yang lebih ringan dan modern.

Contoh Kode HTML Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Gambar di HTML</title>
</head>
<body>

  <h1>Menampilkan Gambar di Halaman Web</h1>

  <!-- Gambar dari folder lokal -->
  <img src="gambar/logo.png" alt="Logo Perusahaan" width="150" />

  <!-- Gambar dari internet -->
  <img src="https://via.placeholder.com/300x200" alt="Contoh Gambar" title="Gambar dari internet" />

  <!-- Gambar dengan styling -->
  <img src="gambar/pemandangan.jpg" alt="Pemandangan" style="border: 2px solid #ccc; border-radius: 8px;" />

</body>
</html>

Kesimpulan

Gunakan tag <img> untuk menampilkan gambar di HTML.
Atribut wajib: src (sumber gambar) dan alt (teks alternatif).
Gunakan atribut tambahan seperti width, height, dan title untuk kontrol lebih lanjut.
Pastikan gambar dioptimalkan agar performa halaman tetap baik.