LKPD 04: Format Multimedia dengan HTML

1 Identitas Peserta Didik

Wajib Diisi

Pilih Sekolah, Kelas, dan Nama Lengkap Anda di bawah ini untuk mengaktifkan modul praktikum web.

Sekolah

Kelas / Jurusan

Nama Lengkap

2 Ringkasan Teori: Format Multimedia pada HTML

Dasar Web

Tampilan halaman web yang hanya berisi teks akan terasa membosankan. Oleh karena itu, HTML menyediakan tag khusus untuk menyisipkan media seperti Gambar, Audio, dan Video untuk membuat halaman web lebih interaktif dan menarik bagi pengguna.

Komponen Multimedia HTML5

Jenis Media	Tag HTML	Format File yang Didukung
Gambar Visual	<img src="...">	.jpg, .png (Transparan), .svg (Vektor), .webp
Suara / Audio	<audio controls>	.mp3 (Terpopuler), .wav, .ogg
Video Bergerak	<video controls>	.mp4 (Terpopuler), .webm, .ogg
Embed Eksternal	<iframe src="...">	Link YouTube, Google Maps, dll.

Atribut Wajib Gambar

Gunakan atribut src untuk sumber file dan alt (teks alternatif) untuk aksesibilitas dan antisipasi jika gambar gagal dimuat.

Atribut Kontrol Media

Tambahkan atribut controls pada tag audio/video agar memunculkan tombol Play, Pause, dan Volume bawaan browser.

Teks Fallback

Sertakan teks peringatan di antara tag pembuka & penutup <video>...</video> apabila browser pengguna terlalu lawas.

3 Laboratorium Simulasi Multimedia Web

Lengkapi atribut dan elemen multimedia sesuai skenario pengembangan tampilan web.

Interactive Modules

Simulasi 1: Galeri Media Responsif

Elemen Gambar

Klik skenario di bawah ini untuk merancang portofolio produk visual. Tentukan atribut dan ekstensi yang paling tepat.

Skenario Elemen & Tag

Target Atribut

Pilihan

Klik baris skenario untuk mulai analisa.

Simulasi 2: Embed Player Edukasi

Modul Pembelajaran

Anda ditugaskan membuat halaman modul interaktif berisi Audio, Video, dan YouTube. Tentukan syntax HTML yang tepat!

1. Tag Audio 2. Tag Video 3. Atribut 4. Embed YouTube

Langkah 1: Menyiapkan Audio

Siswa perlu mendengarkan narasi suara berformat .mp3. Tag HTML apa yang digunakan untuk menampilkan pemutar suara tersebut?

Selesaikan 4 tahapan modul player.

4 Tabel Pengamatan Praktikum Web

Rekapitulasi log analisis media dan struktur tag HTML yang telah dikerjakan.

No	Modul Simulasi	Skenario / Objek	Pilihan Tag / Atribut	Status Pemahaman	Aksi
Belum ada data. Klik tombol "+ Catat Analisis" pada modul simulasi di atas untuk menyimpan hasil.

5 Uji Kompetensi Multimedia Web

Jawablah 20 pertanyaan pilihan ganda berikut mengenai penyisipan gambar, audio, dan video.

20 Soal Pilihan Ganda

Petunjuk Penyelesaian:

Pastikan seluruh soal uji kompetensi dan tabel pengamatan telah terisi lengkap sebelum mengirim LKPD.