Gambar dan Media | BelajarCoding

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menambahkan gambar ke halaman HTML dengan tag <img>
Memahami pentingnya atribut alt untuk aksesibilitas
Mengatur ukuran gambar dengan atribut width dan height
Membungkus gambar dengan link

Materi Singkat

Bayangkan buku teks tanpa gambar — pasti lebih sulit dipahami dan membosankan. Gambar adalah elemen penting dalam setiap halaman web. HTML menyediakan tag <img> untuk ini.

Tag `<img>`

Tag <img> sedikit berbeda dari tag yang sudah kamu pelajari — tidak perlu tag penutup. Tag ini disebut "void element" atau "self-closing tag".

<img src="foto.jpg" alt="Foto profil saya" />

Dua atribut wajib:

src (source = sumber) — lokasi file gambar
alt (alternative text) — teks deskripsi gambar

Kenapa `alt` Penting?

Atribut alt sangat penting karena:

Aksesibilitas — pengguna tunanetra menggunakan screen reader yang membacakan alt untuk mendeskripsikan gambar
Saat gambar gagal dimuat — teks alt ditampilkan sebagai pengganti
SEO — Google membaca alt untuk memahami isi gambar

Tulis alt yang deskriptif dan spesifik:

✗ alt="gambar" (tidak berguna)
✗ alt="img001.jpg" (tidak berguna)
✓ alt="Foto Budi sedang belajar di perpustakaan" (deskriptif)

Lokasi File Gambar

Kamu bisa menggunakan:

URL gambar dari internet: src="https://contoh.com/gambar.jpg"
File lokal (relatif): src="gambar/foto.jpg" (file gambar ada di folder "gambar")
Folder yang sama: src="foto.jpg" (file gambar ada di folder yang sama dengan HTML)

Ukuran Gambar

<img src="foto.jpg" alt="Foto saya" width="300" height="200" />

Nilai width dan height dalam satuan pixel. Sebaiknya selalu cantumkan ini agar browser bisa menyiapkan ruang sebelum gambar dimuat — halaman jadi tidak "meloncat".

Gambar sebagai Link

Bungkus <img> di dalam <a> untuk membuat gambar yang bisa diklik:

<a href="https://contoh.com">
  <img src="logo.png" alt="Logo website contoh" />
</a>

Contoh Kode

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Galeri Foto</title>
  </head>
  <body>
    <h1>Galeri Foto Alam</h1>
 
    <p>Berikut adalah beberapa foto pemandangan indah:</p>
 
    <!-- Gambar dari URL internet -->
    <img
      src="https://picsum.photos/400/300"
      alt="Foto pemandangan acak yang indah"
      width="400"
      height="300"
    />
 
    <p>Foto di atas diambil dari Picsum Photos.</p>
 
    <!-- Gambar yang juga bisa diklik -->
    <a href="https://picsum.photos" target="_blank">
      <img
        src="https://picsum.photos/400/300?random=2"
        alt="Klik untuk mengunjungi Picsum Photos"
        width="400"
        height="300"
      />
    </a>
    <p>Klik gambar di atas untuk mengunjungi sumber fotonya.</p>
  </body>
</html>

Tugas Kecil

Tambahkan bagian galeri foto ke halaman profil.html dari pelajaran sebelumnya
Tambahkan <h2 id="foto">Foto Favorit</h2> dan link navigasinya
Di dalamnya, tambahkan:
- Minimal 2 gambar dari https://picsum.photos/300/200?random=1 dan https://picsum.photos/300/200?random=2 (ganti angka random untuk gambar berbeda)
- Setiap gambar harus punya alt yang deskriptif dan atribut width/height
- Satu gambar harus bisa diklik dan membuka https://picsum.photos di tab baru

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menambahkan gambar ke halaman HTML dengan tag <img>
Memahami pentingnya atribut alt untuk aksesibilitas
Mengatur ukuran gambar dengan atribut width dan height
Membungkus gambar dengan link

Materi Singkat

Bayangkan buku teks tanpa gambar — pasti lebih sulit dipahami dan membosankan. Gambar adalah elemen penting dalam setiap halaman web. HTML menyediakan tag <img> untuk ini.

Tag `<img>`

Tag <img> sedikit berbeda dari tag yang sudah kamu pelajari — tidak perlu tag penutup. Tag ini disebut "void element" atau "self-closing tag".

<img src="foto.jpg" alt="Foto profil saya" />

Dua atribut wajib:

src (source = sumber) — lokasi file gambar
alt (alternative text) — teks deskripsi gambar

Kenapa `alt` Penting?

Atribut alt sangat penting karena:

Aksesibilitas — pengguna tunanetra menggunakan screen reader yang membacakan alt untuk mendeskripsikan gambar
Saat gambar gagal dimuat — teks alt ditampilkan sebagai pengganti
SEO — Google membaca alt untuk memahami isi gambar

Tulis alt yang deskriptif dan spesifik:

✗ alt="gambar" (tidak berguna)
✗ alt="img001.jpg" (tidak berguna)
✓ alt="Foto Budi sedang belajar di perpustakaan" (deskriptif)

Lokasi File Gambar

Kamu bisa menggunakan:

URL gambar dari internet: src="https://contoh.com/gambar.jpg"
File lokal (relatif): src="gambar/foto.jpg" (file gambar ada di folder "gambar")
Folder yang sama: src="foto.jpg" (file gambar ada di folder yang sama dengan HTML)

Ukuran Gambar

<img src="foto.jpg" alt="Foto saya" width="300" height="200" />

Nilai width dan height dalam satuan pixel. Sebaiknya selalu cantumkan ini agar browser bisa menyiapkan ruang sebelum gambar dimuat — halaman jadi tidak "meloncat".

Gambar sebagai Link

Bungkus <img> di dalam <a> untuk membuat gambar yang bisa diklik:

<a href="https://contoh.com">
  <img src="logo.png" alt="Logo website contoh" />
</a>

Contoh Kode

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Galeri Foto</title>
  </head>
  <body>
    <h1>Galeri Foto Alam</h1>
 
    <p>Berikut adalah beberapa foto pemandangan indah:</p>
 
    <!-- Gambar dari URL internet -->
    <img
      src="https://picsum.photos/400/300"
      alt="Foto pemandangan acak yang indah"
      width="400"
      height="300"
    />
 
    <p>Foto di atas diambil dari Picsum Photos.</p>
 
    <!-- Gambar yang juga bisa diklik -->
    <a href="https://picsum.photos" target="_blank">
      <img
        src="https://picsum.photos/400/300?random=2"
        alt="Klik untuk mengunjungi Picsum Photos"
        width="400"
        height="300"
      />
    </a>
    <p>Klik gambar di atas untuk mengunjungi sumber fotonya.</p>
  </body>
</html>

Tugas Kecil

Tambahkan bagian galeri foto ke halaman profil.html dari pelajaran sebelumnya
Tambahkan <h2 id="foto">Foto Favorit</h2> dan link navigasinya
Di dalamnya, tambahkan:
- Minimal 2 gambar dari https://picsum.photos/300/200?random=1 dan https://picsum.photos/300/200?random=2 (ganti angka random untuk gambar berbeda)
- Setiap gambar harus punya alt yang deskriptif dan atribut width/height
- Satu gambar harus bisa diklik dan membuka https://picsum.photos di tab baru

6. Gambar dan Media

Tujuan Belajar

Materi Singkat

Tag `<img>`

Kenapa `alt` Penting?

Lokasi File Gambar

Ukuran Gambar

Gambar sebagai Link

Contoh Kode

Tugas Kecil

6. Gambar dan Media

Tujuan Belajar

Materi Singkat

Tag `<img>`

Kenapa `alt` Penting?

Lokasi File Gambar

Ukuran Gambar

Gambar sebagai Link

Contoh Kode

Tugas Kecil

6. Gambar dan Media

Tujuan Belajar

Materi Singkat

Tag <img>

Kenapa alt Penting?

Lokasi File Gambar

Ukuran Gambar

Gambar sebagai Link

Contoh Kode

Tugas Kecil

6. Gambar dan Media

Tujuan Belajar

Materi Singkat

Tag <img>

Kenapa alt Penting?

Lokasi File Gambar

Ukuran Gambar

Gambar sebagai Link

Contoh Kode

Tugas Kecil

Tag `<img>`

Kenapa `alt` Penting?

Tag `<img>`

Kenapa `alt` Penting?