HTML Dasar #7 - Menambahkan Gambar (img) dengan src, alt, width, height

Pernahkah kamu membuka website lalu melihat gambar yang menarik? Tanpa gambar, internet akan terasa membosankan dan kurang hidup. Di artikel ini, kamu akan belajar cara menambahkan gambar ke halaman web menggunakan tag <img>.

Apa Itu Tag `<img>`?

Tag <img> adalah singkatan dari image (gambar). Bedanya dengan tag lain: tag <img> adalah self-closing tag — tidak perlu pasangan penutup seperti </img>.

Fakta Menarik: Tag <img> adalah salah satu tag tertua di HTML. Sejak browser pertama kali bisa menampilkan gambar, internet berubah drastis dari halaman teks menjadi kaya visual!

Struktur Dasar Gambar

<img src="nama-file-gambar.jpg" alt="deskripsi gambar">

Catatan: Tag <img> WAJIB memiliki atribut src dan alt. Tanpa keduanya, gambar tidak akan berfungsi optimal.

Empat Atribut Wajib Kamu Tahu

Atribut	Fungsi	Contoh
`src`	Sumber gambar (URL atau path file)	`src="foto.jpg"`
`alt`	Teks alternatif (jika gambar gagal dimuat)	`alt="Logo perusahaan"`
`width`	Lebar gambar (dalam pixel atau persen)	`width="300"`
`height`	Tinggi gambar (dalam pixel atau persen)	`height="200"`

Atribut `src` - Sumber Gambar

src (source) menentukan di mana gambar berada. Bisa dari file lokal atau dari internet.

1. Gambar dari file lokal (di komputer/server sendiri)

<!-- Gambar di folder yang sama dengan file HTML -->
<img src="kucing.jpg" alt="Kucing lucu">

<!-- Gambar di sub-folder -->
<img src="gambar/kucing.jpg" alt="Kucing lucu">

<!-- Gambar di folder di atas -->
<img src="../kucing.jpg" alt="Kucing lucu">

2. Gambar dari internet (URL lengkap)

<img src="https://www.example.com/gambar.jpg" alt="Contoh gambar">

Perhatian: Menggunakan gambar dari website orang lain (hotlinking) bisa melanggar hak cipta dan membebani server mereka. Sebaiknya upload gambar sendiri atau gunakan gambar gratis (unsplash.com, pixabay.com, dll).

Atribut `alt` - Teks Alternatif

alt adalah atribut sangat penting yang sering diabaikan pemula. Fungsinya:

Jika gambar gagal dimuat → teks alt akan tampil sebagai pengganti
Untuk pembaca layar (screen reader) → membantu tunanetra memahami gambar
Membantu SEO → mesin pencari membaca teks alt untuk memahami gambar

Contoh perbedaan saat gambar gagal dimuat:

Tanpa alt (buruk)

Hanya ikon rusak, pengguna bingung

Dengan alt (baik)

Teks alternatif muncul, pengguna tetap paham

Tips Menulis Alt Text yang Baik:

Deskripsikan isi dan fungsi gambar secara singkat
Contoh baik: alt="Anak kucing putih sedang tidur di atas karpet merah"
Contoh buruk: alt="gambar" atau alt="foto123"
Jika gambar hanya dekorasi (tidak penting), bisa pakai alt="" (kosong)

Atribut `width` dan `height` - Ukuran Gambar

Dua atribut ini mengatur ukuran tampilan gambar (bukan ukuran file aslinya).

<img src="foto.jpg" alt="Pemandangan" width="400" height="300">

Contoh perbandingan ukuran:

Original (ukuran asli)

width="100"

width="300"

width="50%"

Tips Penting:

Jika hanya menentukan width, height akan otomatis menyesuaikan proporsi
Jangan mengubah ukuran gambar terlalu ekstrem (misal gambar 50px jadi 500px) → hasilnya pecah/blur
Untuk tampilan responsif, gunakan CSS max-width: 100% agar gambar tidak keluar dari kontainer

Studi Kasus: Galeri Foto Sederhana

Buat file galeri-foto.html dan praktikkan semua atribut gambar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Galeri Foto Liburanku</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .gambar-item {
            margin-bottom: 30px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .caption {
            font-size: 14px;
            color: #666;
            margin-top: 8px;
        }
    </style>
</head>
<body>

    <h1>Galeri Foto Liburanku di Pantai</h1>
    <p>Ini adalah beberapa foto dari liburan saya ke Pantai Kuta bulan lalu.</p>

    <div class="gambar-item">
        <h3>Matahari Terbit</h3>
        <img src="https://via.placeholder.com/600x400?text=Matahari+Terbit" 
             alt="Matahari terbit di Pantai Kuta dengan langit berwarna jingga" 
             width="600" height="400">
        <div class="caption">Foto diambil jam 5:30 pagi. Warna langit sangat cantik!</div>
    </div>

    <div class="gambar-item">
        <h3>Bermain Ombak</h3>
        <img src="https://via.placeholder.com/600x400?text=Bermain+Ombak" 
             alt="Anak-anak bermain ombak di tepi pantai" 
             width="600" height="400">
        <div class="caption">Ombaknya tidak terlalu besar, cocok untuk bermain air.</div>
    </div>

    <div class="gambar-item">
        <h3>Makanan Laut Segar</h3>
        <img src="https://via.placeholder.com/600x400?text=Makanan+Laut" 
             alt="Hidangan seafood: ikan bakar, cumi goreng, dan udang saus padang" 
             width="600" height="400">
        <div class="caption">Makan malam di restoran tepi pantai. Rasanya enak banget!</div>
    </div>

    <p><em>Semua gambar di atas adalah contoh placeholder. Ganti dengan foto aslimu!</em></p>

</body>
</html>

Format Gambar yang Didukung

Tidak semua format gambar bisa ditampilkan di semua browser. Berikut yang paling aman dan umum digunakan:

Format	Kelebihan	Kapan Pakai
JPEG/JPG	Ukuran kecil, warna bagus	Foto, gambar kompleks
PNG	Kualitas tinggi, support transparansi	Logo, icon, gambar perlu transparan
GIF	Bisa animasi	Animasi sederhana, meme
WebP	Ukuran sangat kecil, kualitas bagus	Modern (cek dulu dukungan browser)

Gambar Sebagai Link

Kamu sudah belajar membuat link di artikel #6. Sekarang gabungkan dengan gambar:

<a href="https://www.instagram.com" target="_blank">
    <img src="logo-instagram.png" alt="Logo Instagram" width="50">
</a>

Hasilnya: gambar akan bisa diklik dan mengarah ke tujuan link.

↑ Klik gambar di atas (contoh)

Kesalahan Umum Pemula

Lupa atribut alt → Gambar gagal dimuat, pengguna tidak tahu isinya
Path file salah → Misal src="gambar/kucing.jpg" padahal file di img/kucing.jpg
Mengubah proporsi gambar sembarangan → width="200" height="200" pada gambar persegi panjang akan terlihat gepeng
Menggunakan gambar terlalu besar → File 5MB akan lambat dimuat, pengguna kesal
Lupa ekstensi file → src="foto" (harusnya src="foto.jpg")

Tips Optimalisasi Gambar:

Kompres gambar sebelum upload (pakai tinyjpg.com atau squoosh.app)
Ukuran gambar tidak perlu lebih dari 1920px lebar untuk website biasa
Gunakan format WebP untuk performa terbaik

Latihan Singkat

Buat file HTML baru dengan judul "Halaman Profilku"
Tambahkan foto profil (bisa pakai placeholder atau foto asli) dengan ukuran width="150"
Tambahkan 3 gambar lain yang menceritakan hobimu
Setiap gambar harus memiliki:
- src yang benar (path ke gambar)
- alt yang deskriptif (minimal 5 kata)
- width dan height yang sesuai
Buat salah satu gambar menjadi link ke halaman lain
Simpan dan buka di browser, pastikan semua gambar tampil

Intisari Hari Ini

Tag <img> untuk menampilkan gambar (self-closing, tidak perlu penutup)
src = sumber gambar (wajib)
alt = teks alternatif (wajib untuk aksesibilitas dan SEO)
width dan height = ukuran tampilan gambar
Bisa membungkus <img> dengan <a> untuk membuat gambar bisa diklik

Tantangan Akhir Pekan: Buat halaman "Museum Digital" yang berisi minimal 10 gambar tentang tempat favoritmu (bisa objek wisata, makanan, hewan, dll). Setiap gambar harus memiliki caption di bawahnya. Gunakan CSS untuk membuat galeri tampil dalam grid 2 atau 3 kolom (cari tahu properti CSS display: grid). Bagikan hasilnya ke teman-temanmu!

Artikel Sebelumnya: HTML Dasar #6 - Membuat Link (a) dan Atribut href, target, title
Artikel Selanjutnya: HTML Dasar #8 - Membuat Daftar: Ordered List (ol), Unordered List (ul), List Item (li)

HTML Dasar #7 - Menambahkan Gambar (img) dengan src, alt, width, height

Apa Itu Tag `<img>`?

Struktur Dasar Gambar

Empat Atribut Wajib Kamu Tahu

Atribut `src` - Sumber Gambar

1. Gambar dari file lokal (di komputer/server sendiri)

2. Gambar dari internet (URL lengkap)

Atribut `alt` - Teks Alternatif

Tanpa alt (buruk)

Dengan alt (baik)

Atribut `width` dan `height` - Ukuran Gambar

Studi Kasus: Galeri Foto Sederhana

Format Gambar yang Didukung

Gambar Sebagai Link

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

Categories

Main Tags

Latest Posts

Popular Posts

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

HTML Dasar #7 - Menambahkan Gambar (img) dengan src, alt, width, height

Apa Itu Tag <img>?

Struktur Dasar Gambar

Empat Atribut Wajib Kamu Tahu

Atribut src - Sumber Gambar

1. Gambar dari file lokal (di komputer/server sendiri)

2. Gambar dari internet (URL lengkap)

Atribut alt - Teks Alternatif

Tanpa alt (buruk)

Dengan alt (baik)

Atribut width dan height - Ukuran Gambar

Studi Kasus: Galeri Foto Sederhana

Format Gambar yang Didukung

Gambar Sebagai Link

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

Apa Itu Tag `<img>`?

Atribut `src` - Sumber Gambar

Atribut `alt` - Teks Alternatif

Atribut `width` dan `height` - Ukuran Gambar