Tag <img> dalam HTML digunakan untuk menampilkan gambar pada halaman web. Tag ini memiliki sifat self-closing, artinya tidak perlu penutup (</img>).
🔹 Bentuk Dasar <img>
<img src="alamat-gambar" alt="teks alternatif">
🔹 Penjelasan Atribut Penting
✅ 1. src (source) — WAJIB
Menentukan lokasi gambar yang ingin ditampilkan.
Contoh:
<img src="foto.jpg">
Bisa berupa:
- URL →
https://example.com/gambar.png - File lokal →
images/logo.png
✅ 2. alt (alternative text) — WAJIB
Menampilkan teks ketika gambar gagal dimuat.
Juga membantu SEO dan aksesibilitas (screen reader).
<img src="logo.png" alt="Logo Perusahaan">
✅ 3. width & height
Untuk mengatur ukuran gambar.
<img src="foto.jpg" width="300" height="200">
Satuan biasanya pixel (tanpa “px”).
Lebih baik menggunakan salah satu saja
Jika hanya width diisi, gambar otomatis menyesuaikan tinggi supaya tidak gepeng.
✅ 4. title
Menampilkan tooltip ketika kursor diarahkan ke gambar.
<img src="foto.jpg" alt="Foto Pemandangan" title="Pemandangan Indah">
✅ 5. loading
Mengatur cara browser memuat gambar.
"lazy"→ gambar hanya dimuat saat hampir muncul di layar"eager"→ dimuat langsung
<img src="foto.jpg" alt="gambar" loading="lazy">
🔹 Contoh <img> Lengkap
<img
src="https://via.placeholder.com/400x200"
alt="Contoh Gambar"
width="400"
title="Ini adalah contoh gambar"
loading="lazy">
🔹 Jenis Sumber Gambar
1. Gambar di folder yang sama
<img src="gambar.jpg" alt="foto">
2. Gambar di folder berbeda
<img src="images/foto1.png" alt="foto">
3. Gambar dari URL internet
<img src="https://example.com/foto.jpg" alt="foto">
🔹 Cara Memusatkan Gambar
Menggunakan CSS:
<img src="foto.jpg" alt="foto" style="display:block; margin:auto;">
🔹 Gambar sebagai Link
<a href="https://example.com">
<img src="gambar.png" alt="Klik untuk buka halaman">
</a>
Berikut contoh halaman HTML lengkap yang berisi berbagai penggunaan tag <img> — mulai dari gambar lokal, gambar URL, gambar dengan ukuran berbeda, gambar lazy loading, hingga gambar sebagai link.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Lengkap Penggunaan IMG HTML</title>
<style>
.center {
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Contoh Penggunaan Tag <img> di HTML</h1>
<p>
Halaman ini menunjukkan berbagai cara menggunakan tag <code><img></code>,
seperti menampilkan gambar dari URL, gambar lokal, pengaturan ukuran, lazy loading,
dan gambar sebagai link.
</p>
<!-- 1. Gambar dari URL -->
<h2>1. Gambar dari URL</h2>
<img src="https://via.placeholder.com/400x200" alt="Gambar dari URL" width="400">
<!-- 2. Gambar Lokal -->
<h2>2. Gambar dari File Lokal</h2>
<p>(Misalnya file berada di folder <b>images/foto.jpg</b>)</p>
<img src="images/foto.jpg" alt="Gambar Lokal" width="300">
<!-- 3. Mengatur Ukuran Gambar -->
<h2>3. Mengatur Ukuran Gambar</h2>
<img src="https://via.placeholder.com/200" alt="Ukuran 200px" width="200">
<img src="https://via.placeholder.com/200x300" alt="Ukuran khusus">
<!-- 4. Gambar dengan Tooltip -->
<h2>4. Gambar dengan Title (Tooltip)</h2>
<img src="https://via.placeholder.com/300x150"
alt="Gambar tooltip"
title="Ini adalah tooltip">
<!-- 5. Lazy Loading -->
<h2>5. Lazy Loading (Hemat Bandwidth)</h2>
<img src="https://via.placeholder.com/500x250"
alt="Lazy Loading"
loading="lazy">
<!-- 6. Memusatkan Gambar -->
<h2>6. Gambar Dipusatkan</h2>
<img src="https://via.placeholder.com/350x150"
alt="Gambar Center"
class="center">
<!-- 7. Gambar sebagai Link -->
<h2>7. Gambar sebagai Link</h2>
<a href="https://google.com" target="_blank">
<img src="https://via.placeholder.com/120x120"
alt="Klik untuk menuju Google">
</a>
</body>
</html>
Leave a Reply