LEMBAR KERJA PESERTA DIDIK (LKPD)

Mata Pelajaran : Pemrograman Web dan Perangkat Bergerak (PWPB)

Kelas/ Semester : XI SMK RPL / Ganjil
Kompetensi Dasar : 3.3 Menerapkan format tabel pada halaman web
4.3 Membuat kode html untuk menampilkan tabel pada
halaman web
3.4 Menerapkan tampilan format multimedia pada halaman
web
4.4 Membuat kode html untuk menampilkan tampilan format
multimedia pada halaman web
3.5 Menerapkan format kaitan pada halaman web
4.5 Membuat kode html untuk menampilkan format kaitan
pada halaman web

Disusun Oleh :
ILHAM SYAHPUTRA, ST
NIM : 203153772857

PROGRAM STUDI TEKNIK KOMPUTER DAN INFORMATIKA

PROGRAM PROFESI GURU DALAM JABATAN ANGKATAN III
UNIVERSITAS NEGERI MALANG
TAHUN 2020
 LEMBAR KERJA PESERTA DIDIK (LKPD)
PRAKTEK PEMBUATAN FORMAT MULTIMEDIA DALAM HTML
Judul : Praktek Pembuatan Format Multimedia Dalam
HTML
Mata Pelajaran : Pemrograman Web Dan Perangkat Bergerak
Kelas / Semester : XI SMK RPL/ Ganjil
Kompetensi Keahlian : Rekayasa Perangkat lunak
Sekolah : SMK Negeri 1 Air Joman
Nama Siswa :
NIS / Kelas :
Alokasi Waktu : 1 x 45 Menit
Guru Pengampu : Ilham Syahputra, ST
Materi Pokok :
Tag-tag Multimedia dalam HTML.
Kompetensi Dasar :
3.3 Menerapkan tampilan format multimedia pada halaman web
4.3 Membuat kode html untuk menampilkan tampilan format multimedia pada
halaman web
Indikator Pencapaian Kompetensi (IPK)
4.4.1 Mendesain program tampilan format multimedia dalam halaman web
4.4.2 Mendesain kode program tampilan format multimedia dalam halaman web
4.4.3 Mengembangkan program hasil tampilan multimedia dalam halaman web

A. Tujuan
- Melalui praktikum dan tanya jawab peserta didik dapat mendesain rancangan
format tampilan multimedia dalam halaman web dengan benar
B. Keselamatan Kerja
1. Peserta didik wajib menggunakan alat dan bahan sesuai dengan fungsinya
2. Bekerjalah sesuai dengan cara kerja atau petunjuk yang telah ditentukan.
3. Bila mendapatkan masalah atau kesulitan tanyakanlah kepada instruktur.
C. Alat dan Bahan
1. Komputer PC / Hp Android
2. Aplikasi Text Editor (Notepad++ untuk Komputer/Laptop , Quoda untuk Android)
3. Browser (Mozila, Crome dll)
4. Buku materi Pelajaran
D. Petunjuk Belajar
a. Bacalah materi tentang format tampilan multimedia dalam halaman web pada e-
book PWPB Kelas XI untuk memperkuat konsep dan pemahaman anda
b. Diskusikan dengan teman tentang langkah kerja yang harus dilakukan
c. Kerjakan soal evaluasi dalam lembar kerja siswa dengan benar
d. Tanyakan kepada guru apabila ada hal-hal yang kurang jelas
E. Langkah Kerja
Audio
Untuk membuat dan memutar file audio, kita gunakan tag <audio> dengan struktur
dasar seperti ini:

Nah pada tag <audio> ini ada beberapa atribut yang bisa digunakan, saya masukkan 3
saja. Lihat tabel.

Ayo kita coba latihannya, buat file baru menggunakan editor kesayangan Anda, atau
bisa juga dengan melakukan save-as dari file-file latihan sebelumnya.

Simpan dulu filenya dengan nama 44-html-audio.html, kemudian sesuaikan kodenya

agar menjadi seperti di bawah ini:

Sebelum dicoba, pastikan dulu file audionya ada ya, dan diletakkan pada folder yang
sama dengan file latihan ini. Silakan ganti nama file audionya sesuai yang Anda
punya. Setelah dijalankan hasilnya akan menampilkan player, klik tombol play dan
dengarkan audionya.

Tampilan hasilnya punya saya seperti gambar-gambar berikut ini, saya gunakan 4
browser agar bisa dilihat perbedaan playernya.
Pada browser Internet Explorer seperti ini. Playernya besar

Nah kalau yang ini di Forefox.

Saya coba juga di Edge, playernya sama dengan yang di IE, beda ukurannya saja

Ini tampilan dari Chrome, berbeda dari yang lain ya, ada opsi untuk downloadnya

Latihan di atas menghasilkan player yang mana audionya baru akan diputar jika
tombol playnya diklik. Kalau tidak diklik, maka nanti audionya tidak akan diputar.
Nah kita coba tambahkan atribut lainnya agar bisa diputar otomatis dan akan berulang
jika durasinya sudah habis. Menggunakan apa? Ada saya masukkan di tabel halaman
sebelah tadi ya… Kita tambahkan atribut autoplay dan loop saja pada tag <audio>.

Save-as file tadi sehingga menjadi 45-html-audio-loop-autoplay.html, ubah kodenya

menjadi seperti ini:

Untuk hasilnya, silakan dijalankan dan lihat sendiri.

Ada pertanyaan, bagaimana kalau audionya diputar otomatis dan diputar ulang jika
durasinya sudah habis tetapi tanpa menampilkan player?

Caranya mudah. Masukkan atribut loop dan autoplay saja tanpa atribut controls,
selesai.

Video
Bagaimana memasukkan video ke dalam halaman web? Sebenarnya sama saja dengan
audio, bedanya hanya di tag saja yaitu menggunakan <video> ditambah dengan atribut
height dan width untuk mengatur ukuran tampilan videonya. Adapun atribut lainnya
sama saja termasuk fungsinya seperti controls, loop dan autoplay.

Perbedaan spesifik hanya pada player, untuk file video ada seekbarnya yang dapat
digeser dan juga tombol fullscreen.

Kita coba? Oke, Langkah paling cepat dengan save-as file sebelumnya kemudian
simpan dengan nama file 46-html-video.html. Ubah dan sesuaikan isi kodenya
menjadi seperti ini, contohnya lengkap semua untuk atributnya:
Pastikan juga file videonya sudah ada ya…

Setelah dijalankan hasilnya seperti gambar berikut :

F. Materi Teori Singkat

Cara yang diperlukan untuk memasukkan atau menambahkan gambar ke dalam suatu
halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan
ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut
terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar
yang akan ditampilkan ke dalam web.

Bentuk umum penggunaan tag <img> adalah:

<img src=”nama file” />

Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs
web lain, maka Anda perlu menyebutkan juga lokasi dari file tersebut.

Contoh:
<img src=”../image/gambar.jpg” />
Atau
<img src=”http://www.abcde.com/images.gambar.jpg” />

Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif) dan JPEG
(.jpg atau .jpeg). GIF adalah singkatan dari Graphics Interface Format sedangkan
JPEG adalah singkatan dari Joint Photographic Expert Group. Selain kedua format
tersebut, saat ini juga sudah mulai banyak digunakan gambar dengan format PNG
(.png), yang merupakan singkatan dari Portable Network Graphics.

Apabila kita ingin menjadikan sebuah lagu sebagai lagu latar belakang (background)
dalam halaman web kita, maka digunakan tag <bgsound>. Contoh penulisan kode
HTML-nya

<bgsound src=”music.mp3” loop=”-1” />

Selain menggunakan kode HTML <embed>, cara memasukkan audio juga dapat
menggunakan kode HTML <audio>. Berikut ini contoh penulisannya untuk
memasukkan audio menggunakan <audio>:

<audio>
<source src=”filemusic.wav” type=”audio/wav”>
</audio>

Berikut ini memasukkan video menggunakan tag <video>, seperti berikut ini:
<video width=”320” height=”240” controls autoplay>
<source src=”file_video.mp4” type=”video/mp4”>
</video>
Cara lain memasukkan video juga dapat menggunakan tag <embed> dan sama seperti
memasukkan audio, hanya saja yang membedakan adalah format dari video yang
dimasukkan, misal mp4, mov, avi, 3gp, dll. Berikut ini cara penulisannya menggunakan
tag <embed> :
<embed src=”filmbioskop.avi” border=”2”
align=”center” autostart=”true” height=”500”
width=”800” />
Selain kedua tag tersebut (<video> dan <embed>), cara memasukkan video juga dapat
menggunakan <iframe>. HTML <iframe> element digunakan untuk mempresentasikan
konteks jelajah dari sebuah dokumen atau file lain untuk dimasukkan (embed) dalam
dokumen yang bersangkutan.
<iframe> element sering digunakan untuk menyisipkan konten dari website lain,
contohnya menyisipkan script iklan dari website pihak ketiga, memasukkan widget atau
aplikasi tertentu, dan memasukkan video dari sumber lain (seperti Youtube, Vimeo, dan
sejenisnya). Misalnya seperti berikut:
<iframe scrolling="no"
src="http://www.youtube.com/................." width="100%"
height="100%"></iframe>
G. Lembar Kerja
Nilai Paraf orang
Tua
Nama : ..........................................................

Kelas : ..........................................................

Program Keahlian : .........................................................

1. Jalankan file 44-html-audio.html menggunakan web browser dan gambarkan

hasilnya pada kotak di bawah ini dengan file Audio yang berbeda.

2. Jalankan file 46-html-video.html menggunakan web browser dan gambarkan

hasilnya pada kotak di bawah ini dengan file video yang berbeda :