Belajar Coding Bagian 7: Menampilkan Gambar dan Media dalam HTML

Pada Bagian 6, kita sudah belajar membuat link dan navigasi.
Sekarang kita masuk ke elemen yang membuat website lebih hidup dan menarik, yaitu gambar dan media.

Tanpa gambar dan media:

• Website terasa kaku

  Baca juga:
  • Belajar Coding Bagian 8: Elemen Tabel dalam HTML (Lengkap dengan Contoh & Hasil)
  • Belajar CSS Bagian 2 : Font dan Text Styling pada CSS
  

• Informasi sulit dipahami

• Tampilan kurang menarik

📌 HTML menyediakan elemen khusus untuk menampilkan gambar, audio, dan video.

---

Menampilkan Gambar dengan <img>

Untuk menampilkan gambar di HTML, kita menggunakan tag <img>.

Struktur Dasar <img>

<img src="gambar.jpg" alt="Deskripsi gambar"> 

Keterangan:

• src → lokasi file gambar

• alt → teks alternatif jika gambar gagal tampil

📌 Tag <img> tidak memiliki tag penutup.

---

Contoh Menampilkan Gambar Lokal

Misalnya struktur folder:

/projek-html │── index.html │── gambar.jpg 

Kode HTML:

<img src="gambar.jpg" alt="Contoh gambar HTML"> 

---

Menampilkan Gambar dari Internet

<img src="https://via.placeholder.com/300" alt="Gambar dari internet"> 

📌 Cocok untuk latihan, demo, atau testing.

---

Fungsi Penting Atribut alt

Atribut alt digunakan untuk:

• Menampilkan teks jika gambar rusak

• Membantu pembaca layar (aksesibilitas)

• Meningkatkan SEO

❌ Salah (tidak ada alt):

<img src="foto.jpg"> 

✔ Benar:

<img src="foto.jpg" alt="Foto kegiatan belajar HTML"> 

---

Mengatur Ukuran Gambar

Kita bisa mengatur ukuran gambar langsung di HTML (untuk pemula).

<img src="gambar.jpg" alt="Gambar HTML" width="300"> 

Atau:

<img src="gambar.jpg" alt="Gambar HTML" width="300" height="200"> 

📌 Catatan:

• Cara terbaik tetap menggunakan CSS

• HTML hanya untuk dasar

---

Menampilkan Video dalam HTML

HTML menyediakan tag <video> untuk menampilkan video.

Contoh Video Lokal

<video controls width="400"> <source src="video.mp4" type="video/mp4"> Browser Anda tidak mendukung video. </video> 

Keterangan:

• controls → tombol play, pause, volume

• <source> → file video

---

Menampilkan Audio dalam HTML

Untuk audio, gunakan tag <audio>.

<audio controls> <source src="musik.mp3" type="audio/mpeg"> Browser Anda tidak mendukung audio. </audio> 

📌 Cocok untuk:

• Podcast

• Musik

• Suara penjelasan

 

 

---

Atribut Penting Media HTML

Atribut	Fungsi
controls	Menampilkan kontrol
autoplay	Diputar otomatis
loop	Mengulang otomatis
muted	Tanpa suara
width / height	Ukuran media

⚠️ Catatan:

• autoplay sering dibatasi oleh browser

• Video biasanya harus muted agar autoplay berjalan

---

Contoh Lengkap Gambar & Media

<h2>Galeri Media</h2>
<img src="https://via.placeholder.com/250" alt="Contoh Gambar">

<hr>

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

<hr>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

---

Kesalahan Umum Pemula

❌ Lupa atribut alt
❌ Salah path file
❌ File media terlalu besar
❌ Mengandalkan HTML untuk desain

---

Ringkasan

✔ <img> untuk gambar
✔ src dan alt atribut wajib
✔ <video> untuk video
✔ <audio> untuk audio
✔ Media membuat website lebih menarik

---

Penutup

Di Bagian 7 ini, kamu sudah mempelajari:

• Menampilkan gambar

• Menampilkan video

• Menampilkan audio

• Atribut penting media HTML