BAHAN AJAR

MATA PELAJARAN
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

Oleh:

Zohan Fachrull Wahab

No Peserta PPG : 19056152310261
Kelas :B

TEKNIK KOMPUTER DAN INFORMATIKA

UNIVERSITAS NEGERI MALANG

PROGRAM PENDIDIKAN PROFESI GURU - DALJAB
Juni 2019
A. Pokok Bahasan
1. Tampilan format multimedia pada halaman web
2. Kode html untuk menampilkan tampilan format multimedia pada halaman web

Sub Pokok Bahasan

1. Konsep tampilan multimedia dalam html.
2. Tag menampilkan gambar.
3. Tag untuk audio
4. Tag untuk video

B. 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
3.4.1 Menjelaskan prosedur format tampilan multimedia dalam halaman web.
3.4.2 Menerapkan format tampilan multimedia dalam halaman web.
4.4.1 Membuat kode program tampilan format multimedia dalam halaman web.
4.4.2 Menguji program hasil tampilan multimedia dalam halaman web.

C. Uraian Materi
1. Konsep tampilan multimedia pada halaman web
Untuk mendapatkan sebuah website yang menarik, kita harus mampu mengkombinasikan
berbagai unsur pendukung dalam sebuah halaman website. Selain informasi disajikan
dalam bentuk teks yang menarik dan frame yang enak dilihat, unsur lain yang sangat
menunjang diantaranya adalah perlu ditambahkan multimedia.

Multimedia
Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks,
suara, gambar, animasi audio dan video dengan alat bantu (tool) dan koneksi (link)
sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi.
Multimedia hadir dengan berbagai format dan hampir dapat menjadi apapun yang kita

2
 dengar atau lihat. Seperti teks, gambar, musik, suara video rekaman, film, animasi dan
sebagainya. Multimedia berupa teknologi yang memadukan unsur teks, gambar diam,
gambar animasi, suara dan video. Di internet kita sering menemukan penyisipan elemen
multimedia pada halaman web, hal ini terjadi karena browser modern telah mendukung
banyak format multimedia.

Pada umumnya elemen multimedia (seperti suara/video) disimpan dalam file media dan
cara yang paling umum untuk melihat format sebuah media adalah dengan melihat
ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi
".htm/.html" maka browser akan berasumsi bahwa file tersebut merupakan halaman
HTML. Ektensi ".xml" diindikasikan sebagai file XML dan ekstensi ".css" diindikasikan
sebagai file style sheet, sedangkan ekstensi untuk format gambar yang diakui seperti
".jpg , .gif , dan lain-lain. Selain itu elemen multimedia juga mempunyai format filenya
sendiri yang memiliki ekstensi yang berbeda-beda seperti .swf , .wmv , .mp3 , dan .mp4.

Dukungan Browser
Pada pertama kali penggunaan browser internet hanya mendukung teks saja, bahkan teks
yang didukungpun sangat terbatas hanya pada satu jenis huruf saja dalam satu warna.
Kemudian pada perjalanannya browser pun datang dengan dukungan pada warna, jenis
huruf dan teks style, serta menambahkan dukungan untuk gambar untuk selanjutnya
mendukung penambahan multimedia dan akan masih terus berkembang. Dukungan untuk
suara, animasi dan video ditangani secara berbeda-beda pada setiap browser. Beberapa
elemen dapat ditangani oleh browser itu sendiri namun, ada juga beberapa elemen yang
membutuhkan sebuah program pembantu tambahan (plug-in).

2. Tag menampilkan gambar.

Tag Image adalah tag yang digunakan untuk menampilkan gambar kedalam halaman web,
menggunakan perintah <img>.

3
Atribut src dalam tag <img>
Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari
gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.

Untuk lebih memahami maksud dan cara penulisan kode html tentang image, mari kita
buat file contoh.html, dan kita sediakan sebuah gambar yang akan digunakan sebagai
tampilan dan gambar tersebut ditempatkan ke dalam satu folder dengan file contoh.html

Ketika kode diatas di run melalui browser, maka akan tampil halaman web yang
didalamnya terdapat teks “Belajar Tag Gambar” dan dibawah teks terdapat tampilan
gambar yang dipanggil

4
Pada kode diatas jika diamati tag <img> tidak memiliki elemen, sehingga langsung
ditutup dengan />

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt.
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk
keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika
web browser telah disetting untuk tidak menampilkan gambar.

Untuk lebih memahami maksud dan cara penulisan atribut alt, mari kita kembangkan file
contoh.html dan simpan dengan nama contoh1.html

ketika kode diatas dirun melalui browser, maka akan menampilkan hasil yang sama
seperti pada file contoh.html, namun terdapat tambahan atribut alt.
Atribut alt berperan penting untuk mesin pencari seperti Google. Karena cara kerja
google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google
‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt.
Hal ini menambah pentingnya menambahkan atribut alt.

Atribut width dan height dalam tag <img>

Atribut lainnya yang mengizinkan kita untuk menentukan lebar dan tinggi dari gambar
yang ditampilkan, yaitu dengan menambahkan atribut width dan height.

Untuk lebih memahami maksud dan cara penulisan atribut width dan height, mari kita
kembangkan file contoh1.html dan simpan dengan nama contoh2.html

5
ketika kode diatas dirun melalui browser, maka akan menampilkan hasil yang sama
seperti pada file contoh1.html, namun yang menjadi pembeda adalah tampilan gambar
berbeda.

Pada kode diatas jika diamati tampilan gambar menjadi persegi dan tidak proporsional,
hal ini dikarenakan lebar dan tinggi dari gambar memaksa disetting dengan nilai yang kita
tetapkan yaitu 200px.

Untuk mempertahankan proporsi gambar, namun tetap membuat gambar menjadi

besar/kecil, kita cantumkan hanya salah satu atribut saja (width saja atau height saja,
namun tidak keduanya). Misalkan jika kita menetapkan atribut width=200px (tanpa
mencantumkan height), maka web browser akan menampilkan gambar dengan lebar
200px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.

6
 ketika kode diatas di run melalui browser , maka tampilan gambar menjadi proporsional

3. Tag untuk audio

Tag audio adalah tag yang digunakan untuk menambahkan audio pada halaman web.
Menggunakan perintah <audio></audio> .

Atribut src dalam tag <audio>

Seperti halnya dalam tag <image>, agar audio dapat terpasang di halaman HTML kita
membutuhkan atribut "src" untuk mencari file audio yang akan dipasang pada html. Cara
penulisannya seperti berikut: <audio src="musik.mp3"> </audio>

7
Untuk lebih memahami maksud dan cara penulisan kode html tentang audio, mari kita
buat file contoh3.html, dan kita sediakan sebuah audio yang akan digunakan sebagai
output dan file audio tersebut ditempatkan ke dalam satu folder dengan file contoh3.html

Ketika kode diatas dirun melalui browser maka akan tampil output audio player pada
halaman web

pada kode diatas jika diamati akan menampilkan audio player pada halaman web yang
memanggil file audio bernama littleidea.mp3 dan ketika diklik tombol play, maka file
audio akan dijalankan hingga selesai.
Terdapat atribut "controls" yang berfungsi untuk menampilkan tombol-tombol kontrol
audio seperti: tombol play/stop, slider, volume,timer. Jika atribut ini tidak ditulis, maka
tombol-tombol kontrol tidak akan muncul.

8
 Pada elemen audio juga terdapat beberapa atribut yaitu :

ATRIBUT NILAI FUNGSI

autoplay - Menentukan bahwa audio akan diputar langsung ketika

halaman sudah diload secara otomatis.

muted - Digunakan untuk mematikan atau membisukan suara yang

berarti audio akan diputar tanpa suara pada awal inisial.

loop - Digunakan untuk memutar ulang audio yang sudah selesai

diputar.

preload auto, none, Menunjukkan seberapa penting audio harus diload ketika
metada halaman web dimuat.

4. Tag untuk video

Tag <video> adalah tag yang digunakan untuk merujuk sumber file video, sehingga dapat
diputar/dimainkan pada halaman web. Menggunakan perintah <video> </video>

Seperti halnya pada gambar dan audio, dalam merujuk sumber file video, digunakan
attribute src yang menunjukkan source (sumber) yang mengarah pada link file video
tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam
element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga
browser dapat memilih format video yang tepat (didukung).

9
Untuk lebih memahami maksud dan cara penulisan kode html tentang video, mari kita
buat file contoh4.html, dan kita sediakan sebuah video yang akan digunakan sebagai
output dan file video tersebut ditempatkan ke dalam satu folder dengan file contoh4.html

Ketika kode diatas dirun melalui browser maka akan tampil output video player pada
halaman web

pada kode diatas jika diamati akan menampilkan video player pada halaman web yang
memanggil file video bernama PetualanganBoy.mp4 dan ketika diklik tombol play, maka
file video akan dijalankan hingga selesai.

10
Terdapat atribut "controls" yang berfungsi untuk menampilkan tombol-tombol kontrol
video seperti: tombol play/stop, slider, volume,timer, fullscreen. Jika atribut ini tidak
ditulis, maka tombol-tombol kontrol tidak akan muncul.

Pada elemen video juga terdapat beberapa atribut yaitu :

ATRIBUT NILAI FUNGSI

autoplay autoplay video akan di putar automatis ketika halaman di buka atau
di refresh

height pixel digunakan untuk mengatur tinggi video

loop loop digunakan untuk memutar kembali secara automatis ketika

video selesai

muted muted digunakan untuk membisukan suara dari video

poster url digunakan untuk menampilkan gambar sebelum video

diputar manual

preload Auto menentukan metode video ketika halaman dimuat

Metadata
none

width pixel digunakan untuk mengatur lebar video

Perlu juga kita ketahui beberapa browser open source seperti Firefox menolak file video
berformat seperti WMV dan hanya dapat menjalankan format OGG. Untuk
menanggulangi hal itu, kita dapat menggunakan elemen source yang berguna untuk
memberikan beberapa jenis format file sekaligus dan membiarkan browser memilih
format yang dapat dijalankannya.

11
 Format video yang didukung browser yaitu:
BROWSER Mp4 WebM Ogg

Internet Explorer √ × ×

Chrome √ √ √

Firefox √ √ √

Safari √ × ×

Opera √ √ √

D. Tugas dan Latihan

1. Untuk lebih memahami penggunaan tag html untuk menampilkan gambar, sebagai
latihan buatlah script html yang akan menampilkan gambar yang sumber gambarnya
diambil dari internet yaitu :
https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2
VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn,
dan simpan dengan nama latihan1.html :

12
2. Untuk lebih memahami penggunaan tag html untuk menampilkan audio, sebagai
latihan kembangkan file contoh3.html yang outputnya adalah ketika audio player
ditekan tombol play maka audio akan memainkan lagu secara berulang-ulang hingga
tombol pause atau stop ditekan. Simpan dengan nama latihan2.html :

3. Untuk lebih memahami penggunaan tag html untuk menampilkan video, sebagai
latihan buatlah script html yang akan menampilkan video yang sumber videonya
diambil dari youtube yaitu : https://www.youtube.com/embed/tgbNymZ7vqY, dan
simpan dengan nama latihan3.html :

13
E. Rangkuman
1. Konsep tampilan multimedia dalam html.
Untuk mendapatkan sebuah website yang menarik, kita harus mampu mengkombinasikan
berbagai unsur pendukung dalam sebuah halaman website. Selain informasi disajikan
dalam bentuk teks yang menarik dan frame yang enak dilihat, unsur lain yang sangat
menunjang diantaranya adalah perlu ditambahkan multimedia.

Pada umumnya elemen multimedia (seperti suara/video) disimpan dalam file media dan
cara yang paling umum untuk melihat format sebuah media adalah dengan melihat
ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi
".htm/.html" maka browser akan berasumsi bahwa file tersebut merupakan halaman
HTML. Ektensi ".xml" diindikasikan sebagai file XML dan ekstensi ".css" diindikasikan
sebagai file style sheet, sedangkan ekstensi untuk format gambar yang diakui seperti
".jpg , .gif , dan lain-lain. Selain itu elemen multimedia juga mempunyai format filenya
sendiri yang memiliki ekstensi yang berbeda-beda seperti .swf , .wmv , .mp3 , dan .mp4.

2. Tag menampilkan gambar.

Tag Image adalah tag yang digunakan untuk menampilkan gambar kedalam halaman web,
menggunakan perintah <img>.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari
gambar yang akan ditampilkan.

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt.
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk
keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika
web browser telah disetting untuk tidak menampilkan gambar.

14
 Atribut width dan height dalam tag <img>
Atribut lainnya yang mengizinkan kita untuk menentukan lebar dan tinggi dari gambar
yang ditampilkan, yaitu dengan menambahkan atribut width dan height.

3. Tag untuk audio

Tag audio adalah tag yang digunakan untuk menambahkan audio pada halaman web.
Menggunakan perintah <audio></audio> .

Atribut src dalam tag <audio>

Seperti halnya dalam tag <image>, agar audio dapat terpasang di halaman HTML kita
membutuhkan atribut "src" untuk mencari file audio yang akan dipasang pada html. Cara
penulisannya seperti berikut: <audio src="musik.mp3"> </audio>

Pada elemen audio terdapat beberapa atribut yaitu :

ATRIBUT NILAI FUNGSI

autoplay - Menentukan bahwa audio akan diputar langsung ketika

halaman sudah diload secara otomatis.

muted - Digunakan untuk mematikan atau membisukan suara yang

berarti audio akan diputar tanpa suara pada awal inisial.

loop - Digunakan untuk memutar ulang audio yang sudah selesai

diputar.

preload auto, none, Menunjukkan seberapa penting audio harus diload ketika
metada halaman web dimuat.

15
4. Tag untuk video
Tag <video> adalah tag yang digunakan untuk merujuk sumber file video, sehingga dapat
diputar/dimainkan pada halaman web. Menggunakan perintah <video> </video>.

Seperti halnya pada gambar dan audio, dalam merujuk sumber file video, digunakan
attribute src yang menunjukkan source (sumber) yang mengarah pada link file video
tersebut berada (disimpan).

Pada elemen video terdapat beberapa atribut yaitu :

ATRIBUT NILAI FUNGSI

autoplay autoplay video akan di putar automatis ketika halaman di buka atau
di refresh

height pixel digunakan untuk mengatur tinggi video

loop loop digunakan untuk memutar kembali secara automatis ketika

video selesai

muted muted digunakan untuk membisukan suara dari video

poster url digunakan untuk menampilkan gambar sebelum video

diputar manual

preload Auto menentukan metode video ketika halaman dimuat

Metadata
none

width pixel digunkan untuk mengatur lebar video

16
 Format video yang didukung browser yaitu:
BROWSER Mp4 WebM Ogg

Internet Explorer √ × ×

Chrome √ √ √

Firefox √ √ √

Safari √ × ×

Opera √ √ √

F. Evaluasi
- Berdasarkan Tugas dan Latihan yang telah dikerjakan, buatlah file html yang menampilkan
ketiga latihan tersebut dalam satu halaman yang dihubungkan dengan link seperti berikut,
dan simpan dengan nama evaluasi.html

17
G. Daftar Pustaka
- HTML CSS dari akar ke daun – https://www.ilmuwebsite.com/ebook-belajar-html-css-
fundamental-dari-akar-menuju-daun
- HTML Tutorial - https://www.w3schools.com/html/default.asp
- Internet

18