LKPD

Lembar Kerja Peserta Didik (LKPD)
Menggabungkan Image, Animasi, Audio, Video Dalam Sajian

Multimedia Interaktif Berbasis Halaman Web
(Waktu 1 x 40 menit)
Nama Kelompok : ........................................................................................

Nama Siswa : ........................................................................................
Kelas : ........................................................................................
A. Tujuan Pembelajaran:
1. Kognitif :
a Produk
1) Secara mandiri dan tanpa membuka bahan ajar, peserta didik dapat
menjelaskan tag-tag html untuk menyisipkan image, animasi, audio
dan video yang terkait soal di LP 3: Produk sesuai kunci jawaban
b Proses
1) Secara mandiri dan tanpa membuka bahan ajar, peserta didik
mampu menggunakan tag-tag html beserta atributnya untuk
menyisipkan image, animasi, audio dan video terkait soal di LP4 :
Proses
2. Keterampilan:
a. Peserta didik dapat menerapkan tag HTML image, animasi, audio,
video dalam sajian multimedia interaktif berbasis halaman web sesuai
di LP 5 : Keterampilan
b. Peserta didik dapat membangun halaman web dengan
menggabungkan tag HTML image, animasi, audio, video dalam sajian
multimedia interaktif berbasis halaman web sesuai di LP 5 :
Keterampilan
B. Kompetensi Dasar
1.5. Menerapkan cara penggabungan image, animasi, audio, video dalam
sajian multimedia interaktif berbasis halaman web dan media interaktif
4.5 Menggabungkan image, animasi, audio, video dalam sajian multimedia
interaktif berbasis halaman web dan media interaktif
C. Indikator Pencapaian Kompetensi (IPK)

1. Kognitif :
a. Menjelaskan tag-tag HTML untuk menggabungkan image, animasi,
audio, video dalam sajian multimedia interaktif berbasis halaman web
b. Menggunakan tag HTML untuk menggabungkan image, animasi,
audio, video dalam sajian multimedia interaktif
Iswanto, S.ST - SMKN 1 Karang Baru

2. Keterampilan :
a. Menerapkan tag HTML image, animasi, audio, video dalam sajian
multimedia interaktif berbasis halaman web
b. Membangun halaman web dengan menggabungkan tag HTML image,
animasi, audio, video dalam sajian multimedia interaktif berbasis
halaman web
D. Langkah Pembelajaran
1. Menjelaskan tentang perintah tag-tag HTML untuk menyisipkan image,
animasi, audio dan video dalam sajian multimedia berbasis web
Contoh Tag HTML Lengkap disertai

Elemen Tag HTML
Atribut
Image
Animasi
Audio
Video
2. Membuat folder utama sebagai folder kerja dengan nama ”proyek”
3. Mepersiapkan file-file gambar, animasi, audio dan video yang akan

disajikan dalam halaman web dan disimpan dalam sub folder utama
dengan nama ”media”
4. Dengan menggunakan text editor membuat sebuah dokumen web yang

menampilkan gambar pada halaman web seperti syntax HTML berikut :
<html>
<head>
<title>Gambar</title>
</head>
<body>
Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2>

Menampilkan gambar dalam format GIF:
<img src=”media/komputer.gif”/>
Menampilkan gambar dalam format JPG:
<img src=”media/komputer.jpg”/>
Menampilkan gambar dalam format PNG:
<img src=”media/komputer.png”/>
</body>
</html>
5. Menyimpan file dengan nama gambar.html dan tempatkan ke dalam

direktori kerja. Lalu lihat hasilnya melalui web browser.
6. Menambahkan atribut ukuran panjang dan lebar untuk membedakan ukurn

masing-masing gambar, lalu disimpan kembali dan lihat hasilnya di
browser.
7. Membuat file baru untuk menyisipkan animasi pada halaman web dengan
mengikuti syntak HTML berikut :
<html>
<head>
<title>animasi</title>
</head>
<body>
Menyisipkan Animasi pada halaman web :
<embed src="media/mobil.swf">
</body>
</html>
8. Menyimpan file dengan nama animasi.html dan tempatkan ke dalam

9. Membuat file baru untuk menyisipkan audio pada halaman web dengan
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="media/laguku.mp3" type="audio/mp3">
<source src="media/laguku.ogg" type="audio/ogg">
</audio>
</body>
</html>
10. Menyimpan file dengan nama audio.html dan tempatkan ke dalam

11. Membuat file baru untuk menyisipkan video pada halaman web dengan
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="media/tutorial.mp4" type="video/mp4">
</video>
</body>
</html>
12. Menyimpan file dengan nama video.html dan tempatkan ke dalam
E. Diskusi
1. Bagaimana cara menentukan atribut-atribut pada tag HTML untuk image,

animasi, audio dan video sesuai kebutuhan
......................................................................................................................
......................................................................................................................
......................................................................................................................
2. Bagaimana cara mengintegrasikan tag-tag html image, animasi, audio

dan video dalam sebuah halaman web
......................................................................................................................
......................................................................................................................
......................................................................................................................
F. Peta Konsep
Menjelaskan tag HTML image, animasi, audio, video
dalam sajian multimedia interaktif berbasis halaman
Menggabungkan web
image, animasi,
audio, video Menggunakan tag HTML image, animasi, audio,
video dalam sajian multimedia interaktif berbasis
dalam sajian halaman web
multimedia
interaktif Menerapkan tag HTML image, animasi, audio, video
berbasis dalam sajian multimedia interaktif berbasis halaman
halaman web web
dan media
Membangun halaman web dengan menggabungkan
interaktif
tag HTML image, animasi, audio, video dalam sajian
multimedia interaktif berbasis halaman web
G. Daftar Pustaka
Wahyu Purnomo, Endah Damayanti, 2013, Pemrograman Web 1, Kementerian Pendidikan &
Kebudayaan

Nama : NIS : Tanggal :
LP3 : Produk
1. Sebutkan dan Jelaskan fungsi tag-tag HTML untuk menyisipkan image,

animasi, audio, dan video
.................................................................................................................
.................................................................................................................
2. Jika ada sebuah gambar dengan nama file foto.jpg yang terdapat dalam
folder image lalu ingin di tampilkan dalam halaman web dengan ukuran
pixel 200 x 250. Bagaimana cara menuliskan syntak HTML agar dapat
menampilkan gambar sesuai yang diinginkan ?
.................................................................................................................
.................................................................................................................
3. Sebutkan atribut apa saja yang dapat diberikan pada tag image !
.................................................................................................................
.................................................................................................................
4. Jelaskan fungsi control pada tag html audio dan video !

.................................................................................................................
.................................................................................................................
5. Sebutkan format file video yang dapat di gunakan pada tag <video>
.................................................................................................................
.................................................................................................................

LKPD

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LKPD

Diunggah oleh

Hak Cipta:

Format Tersedia

Lembar Kerja Peserta Didik (LKPD)

Menggabungkan Image, Animasi, Audio, Video Dalam Sajian

Nama Kelompok : ........................................................................................

C. Indikator Pencapaian Kompetensi (IPK)

Iswanto, S.ST - SMKN 1 Karang Baru

Contoh Tag HTML Lengkap disertai

2. Membuat folder utama sebagai folder kerja dengan nama ”proyek”

3. Mepersiapkan file-file gambar, animasi, audio dan video yang akan

4. Dengan menggunakan text editor membuat sebuah dokumen web yang

Iswanto, S.ST - SMKN 1 Karang Baru

5. Menyimpan file dengan nama gambar.html dan tempatkan ke dalam

6. Menambahkan atribut ukuran panjang dan lebar untuk membedakan ukurn

8. Menyimpan file dengan nama animasi.html dan tempatkan ke dalam

Iswanto, S.ST - SMKN 1 Karang Baru

1. Bagaimana cara menentukan atribut-atribut pada tag HTML untuk image,

2. Bagaimana cara mengintegrasikan tag-tag html image, animasi, audio

Iswanto, S.ST - SMKN 1 Karang Baru

1. Sebutkan dan Jelaskan fungsi tag-tag HTML untuk menyisipkan image,

4. Jelaskan fungsi control pada tag html audio dan video !

Iswanto, S.ST - SMKN 1 Karang Baru

Anda mungkin juga menyukai