HTML Media
Konten Web dengan Media
Web modern adalah perpaduan antara teks dan media (video/gambar) yang menarik. Namun, menyisipkan media bukan sekadar "menaruh file", melainkan tentang memastikan aksesibilitas, performa, dan struktur yang benar.
1. Menyisipkan Gambar (<img>)
Elemen <img> adalah elemen empty atau void (tidak memerlukan tag penutup). Ada dua atribut wajib yang harus selalu kamu sertakan:
src(Source): Jalur atau URL menuju file gambar.alt(Alternative Text): Deskripsi teks jika gambar gagal dimuat. Atribut ini sangat penting untuk SEO dan Aksesibilitas (pengguna tuna netra).
<img src="profile.jpg" alt="photo user" width="600">2. Elemen <figure> dan <figcaption>
Jika dalam menulis artikel atau materi, gambar seringkali membutuhkan keterangan (caption). Kita tidak menggunakan paragraf biasa, melainkan membungkus gambar tersebut dalam elemen <figure>.
<figure>: Kontainer utama untuk konten (gambar, ilustrasi, diagram).<figcaption>: Memberikan keterangan atau judul untuk konten di dalam<figure>.
<figure>
<img src="skema-database.png" alt="Diagram ERD Database Perusahaan">
<figcaption>Gambar 1.1: Struktur Database Relasional Perusahaan</figcaption>
</figure>3. Elemen Video (<video>)
Sebelum HTML5, memutar video di web memerlukan plugin pihak ketiga seperti Flash. Sekarang, kita bisa langsung menggunakan elemen <video>.
Untuk memastikan video berjalan di berbagai browser, disarankan menyediakan beberapa format (seperti MP4 dan WebM) menggunakan elemen <source>.
Atribut:
controls: Menampilkan tombol play, pause, dan volume.autoplay: Video langsung diputar saat halaman dimuat (seringkali harus digabung denganmuted).loop: Memutar video secara berulang.poster: Gambar yang muncul sebelum video diputar.
<video width="640" height="360" controls poster="thumbnail.jpg">
<source src="tutorial.mp4" type="video/mp4">
<source src="tutorial.webm" type="video/webm">
Browser kamu tidak mendukung tag video.
</video>Contoh
<!DOCTYPE html>
<html lang="id">
<head>
<title>Galeri Media</title>
</head>
<body>
<h1>Laporan Perjalanan</h1>
<p>Berikut adalah dokumentasi perjalanan tim kami di Bali:</p>
<figure>
<img src="bali.jpg" alt="Pura Ulun Danu di Bali" style="max-width:100%;">
<figcaption>Dokumentasi: Keindahan Pura Ulun Danu di pagi hari.</figcaption>
</figure>
<h3>Video Dokumenter</h3>
<video controls width="100%">
<source src="vlog-bali.mp4" type="video/mp4">
Maaf, browser kamu terlalu lama untuk memutar video ini.
</video>
</body>
</html>