LKPD REKAYASA

PERANGKAT LUNAK

FORMAT MULTIMEDIA DALAM HTML

Mata Pelajaran
PEMRO
PERAN
GRAM
ANGKAT
TINGKAT XI

WEBBERGE
&
RAK
Penyusun :
MUHAMMAD SHAIM
203153758895
LKPD REKAYASA
PERANGKAT LUNAK

FORMAT MULTIMEDIA DALAM HTML

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

KELOMPOK : …………………………………..
IDENTITAS
N.I.S : ………………………………………….
NAMA : ………………………………………….
KELAS : ………………………………………….
 LKPD
FORMAT MULTIMEDIA DALAM HTML

KOMPETENSI DASAR
3.4. Menerapkan tampilan format multimedia pada halaman web
4.4. Membuat kode html untuk menampilkan tampilan format multimedia pada
halaman web

INDIKATOR PENCAPAIAN KOMPETENSI

3.4.1. Menjelaskan prosedur format tampilan multimedia dalam halaman web.
3.4.2. Menganalisis tag untuk tampilan gambar dalam halaman web.
3.4.3. Menganalisis tag untuk tampilan audio dalam halaman web.
3.4.4. Menganalisis tag untuk tampilan video dalam halaman web
4.4.1. Merancang program tampilan format multimedia gambar, audio, video
dalam halaman web.
4.4.2. Membuat kode program tampilan format multimedia gambar, audio, video
dalam halaman web.
4.4.3. Menguji program hasil tampilan multimedia gambar, audio, video dalam
halaman web.

TUJUAN PEMBELAJARAN
1. Siswa mampu menjelaskan prosedur format tampilan multimedia dalam
halaman web dengan benar.
2. Siswa mampu menganalisis tag untuk tampilan gambar, audio, video dalam
halaman web dengan tepat.
3. Siswa mampu merancang program tampilan format multimedia gambar, audio,
video dalam halaman web dengan tepat.
4. Siswa mampu membuat kode program tampilan format multimedia gambar,
audio, video dalam halaman web dengan tepat.
5. Siswa mampu menguji program hasil tampilan multimedia gambar, audio,
video dalam halaman web tanpa error.
A. DASAR TEORI

Format Multimedia dalam HTML

Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan
bila tidak disertai dengan gambar. Halaman web yang ada di internet, hampir semuanya
memasukkan unsur gambar, animasi, bahkan audio dan video untuk menunjang tampilan
dan dukungan informasi yang disajikan, juga sebagai daya tarik. Untuk membuat halaman
web dengan menampilan format multimedia tersebut diperlukan pemahaman teknik
menampilkan format multimedia pada halaman web. Diantaranya adalah teknik
menampilkan gambar, teknik menampilkan audio dan teknik menampilkan video, yaitu
dengan menggunakan elemen HTML, yaitu : tag <img> dan tag <embed>
Tag <img> adalah elemen html yang digunakan untuk menampilkan gambar pada
halaman web. Penggunaan tag <img> harus menggunakan atribut src, yang dipergunakan
untuk menentukan file gambar yang akan ditampilkan. Tag <embed> adalah elemen
HTML yang digunakan untuk menambahkan audio ataupun video dalam halaman web.
Penggunaan tag <embed> harus menggunakan atribut src, yang dipergunakan untuk
menentukan file audio ataupun video yang akan tambahkan dalam halaman web.

B. TUGAS SOAL ESSAY

Jawablah pertanyaan-pertanyaan berikut ini dengan teliti !

1. Uraikan penilaian anda terhadap penggunaan format multimedia baik itu gambar,
audio ataupun video pada rancangan dan pengembangan suatu halaman web !
2. Bagaimana cara menampilkan format gambar pada suatu halaman web ?
Uraikan langkah-langkahnya !
3. Bagaimana cara menampilkan format audio pada suatu halaman web ?
Uraikan langkah-langkahnya !
4. Bagaimana cara menampilkan format video pada suatu halaman web ?
Uraikan langkah-langkahnya !
Lembar Jawab :

1. ………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………

2. ………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
3. ………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………

4. ………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………

Catatan Guru [Nilai] : Paraf Guru :

C. TUGAS PRAKTIKUM

TUGAS
PRAKTIK
MENAMPILKAN FORMAT MULTIMEDIA DALAM HTML
( GAMBAR, AUDIO, VIDEO )

Anda diminta untuk mengerjakan tugas praktik agar dapat mengimplementasikan

pemahaman materi Format Multimedia pada Halaman Web, khususnya Menampilan
Gambar dalam HTML. Materi ini penting dipahami untuk dasar pengembangan
pemrograman web.

Alat dan Bahan :

1. PC / Laptop
2. Software
a. Editor teks ( Notepad, Wordpad, SublimeText, dan lain-lain )
b. Browser ( InternetExplorer. Chrome, Firefox Mozilla, dan lain-lain )

Petunjuk :
1. Pengerjaan tugas praktikum secara individu.
2. Kerjakan tugas praktikum berikut secara teliti.
3. Kerjakan tugas praktikum menggunakan editor teks.
4. Listing program dan Running program hasil praktikum tugas project tulis / salin pada
lembar kerja praktikum.
5. Kumpulkan lembar kerja praktikum melalui e-Mail :
tugasrpl.76@gmail.com
Kerjakan tugas – tugas praktik berikut ini dengan teliti dan cermat !

Praktikum #1 :
Buatlah kode program HTML, untuk menampilkan teks dan gambar sesuai dengan
layout / contoh berikut ini !

Praktikum #2 :
Buatlah kode program HTML, untuk menampilkan profil sekolah yang berisikan teks,
gambar, tabel, dan video dan kreasikan rancangan tampilan / layout agar menarik !

Praktikum #3 :
Buatlah kode program HTML, untuk menampilkan daftar album lagu dari beberapa grup
band atau penyanyi tunggal berupa audio maupun video ! (jumlah grup band / penyanyi
minimal 5 lagu) dan kreasikan rancangan tampilan / layout agar menarik !

Laporan Hasil Praktik :

Susunlah laporan hasil pengerjaan masing - masing praktikum sesuai format lembar kerja
laporan berikut ini :
LEMBAR KERJA PRAKTIKUM Nama : …………………….
N.I.S : …………………….
Kelas : …………………….

LAPORAN

A. Nama Program ……….……………………………………………………………..

B. Listing Program
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
C. Hasil Eksekusi (screenshoot)
D. Kesimpulan
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

Catatan Guru [Nilai] : Paraf Guru :

D. PENILAIAN
1. Penilaian Pengetahuan (Tugas Soal Essay)

Rubrik Penilaian Soal Essay

No. Penilaian Essay Skor
1. Jika jawaban benar dan lengkap 25
Jika jawaban benar tapi tidak lengkap 15
Jika jawaban salah 0
2. Jika jawaban benar dan lengkap 25
Jika jawaban benar tapi tidak lengkap 15
Jika jawaban salah 0
3. Jika jawaban benar dan lengkap 25
Jika jawaban benar tapi tidak lengkap 15
Jika jawaban salah 0
4. Jika jawaban benar dan lengkap 25
Jika jawaban benar tapi tidak lengkap 15
Jika jawaban salah 0
Total Skor Maksimum 100

Pedoman Penilaian :
a. Nilai Angka = Jumlah Skor Perolehan

Nilai Angka x 4
b. Nilai Skala 4 = -----------------------------
Total Skor Maksimum

DAFTAR PENILAIAN MUTU

Nilai 10
90 80 75 70 65 60 55 50 45 40 30 25 15 0
Angka 0
Nilai
4 3,6 3,2 3 2,8 2,6 2,4 2,2 2 1,8 1,6 1,2 1 0,6 0
Skala4
Nilai
A A- B+ B B- C+ C C- D+ D D- E+ E E- F
Mutu
2. Penilaian Keterampilan (Tugas Praktikum)
Catatan :

………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………