Pemrograman Web - FORMAT MULTIMEDIA DENGAN HTML(bab 4)(kelas XI)

BAB IV

FORMAT MULTIMEDIA DENGAN HTML

A. KOMPETENSI DASAR

3.4 Menerapkan tampilan format multimedia pada halaman web

4.4 Membuat kode html untuk menampilkan tampilan format multimedia pada halaman web

B. MATERI PEMBELAJARAN

ebuah website akan lebih menarik jika dalam halaman web tersebut terdapat gambar, animasi, latar belakang suara atau video. Dengan catatan sesuai dengan tema dari website dan tidak berlebihan juga, karena jika berlebihan justru terkadang mengganggu isi dari web tersebut. Berikut adalah tag HTML untuk mendukung tampilan website tersebut :

1. MENAMPILKAN GAMBAR

Gambar yang sering digunakan dalam web biasanya memiliki format JPG / JPEG Joint Photographic Expert Group), PNG (Portable Network graphics), dan GIF (Graphics Interface Format).

File gambar bernama Desert dengan format jpg, disimpan pada folder images, dengan pengaturan lebar dan panjang masing-masing 200 pixel.

Tampilan pada browser:

HTML juga dapat menyisipkan gambar pada teks dan dapat pula di atur posisi gambar. Pengaturan gambar tersebut dilakukan dengan menambah beberapa atribut pada tag HTML.

Untuk posisi gambar secara horisontal dapat ditambahkan atribut LEFT, untuk gambar yang akan diletakkan di sebelah kiri teks atau RIGHT, untuk gambar yang akan diletakkan di sebelah kanan teks pada ALIGN di tag <img>.

Sedangkan untuk posisi gambar secara vertikal dapat ditambahkan atribut TOP, untuk meletakkan gambar di atas teks, MIDDLE, untuk meletakkan gambar di tengah teks, atau BOTTOM untuk meletakkan gambar di bawah teks.

Contoh penerapan untuk posisi horisontal:

Tampilan pada browser:

Contoh penerapan untuk posisi vertikal :

Tampilan pada browser:

Gambar yang di tampilkan pada halaman web juga dapat diberi keterangan yang sesuai, artinya jika gambar tersebut disorot menggunakan mouse akan muncul keterangan yang sesuai dengan gambar tersebut, misal seperti gambar di bawah ini:

Untuk menampilkan keterangan pada gambar di atas maka tag HTML nya adalah:

2. MENAMPILKAN AUDIO

Dalam HTML5 untuk memasukkan file audio pada sebuah halaman web menggunakan tag <audio>...</audio>. Tidak semua file audio dapat didukung oleh browser. Tiap file audio memiliki dukungan browser yang berbeda, yaitu :

a. MP3 : didukung oleh browser Safari dan Google Chrome

b. OGG : didukung oleh browser Mozilla Firefox, Google Chrome dan Opera

c. WAV : didukung oleh browser Mozilla Firefox dan Opera

Contoh penerapan :

Tampilan pada browser :

Ada beberapa atribut yang dapat digunakan pada tag <audio>...</audio>, antara lain:

Contoh penerapan dalam HTML:

Pada tag HTML di atas jika di tampilkan pada browser, maka audio akan berjalan otomatis tanpa menekan tombol play, dan jika sudah selesai maka audio akan kembali mengulang juga secara otomatis.

Selain itu kita juga dapat menggunakan plug-in untuk audio, yaitu sebuah program komputer kecil yang digunakan untuk memperluas fungsi standar dari sebuah browser, plug-in ini dalam HTML dapat ditambahkan dengan menggunakan tag <object> atau <embed>. Tag <embed> diartikan sebagai suatu tempat untuk konten eksternal (non-HTML).

Contoh penggunaan tag <embed>:

Contoh penggunaan tag <object>:

Jika tag HTML di atas di jalankan pada browser dan tidak terdengar suaranya kemungkinan browsernya tidak support dengan file audionya, atau bisa jadi speakernya masih off.

3. MENAMPILKAN VIDEO

Untuk HTML5 dapat menampilkan video pada halaman web, dengan menggunakan tag <video>...</video>. Namun tidak semua browser dapat menampilkan video. Format video yang sementara bisa di tampilkan di browser adalah :

a. WebM : dapat ditampilkan pada browser chrome, mozilla firefox, opera

b. OGG : dapat ditampilkan pada browser chrome, mozilla firefox, opera

c. MP4 : dapat ditampilkan pada browser Internet explore, chrome, safari

Contoh penerapan pada HTML:

Jika di browser video tidak muncul, artinya browser tidak mendukung format video tersebut. Ada beberapa atribut yang dapat ditambahkan pada tag <video>, antara lain:

Contoh penerapan pada HTML:

File animasi.gif disimpan di folder yang sama dengan file HTML nya dan akan muncul pada saat video buffer atau diunduh.

Jika pada web browser tidak muncul video, artinya web browser tersebut tidak mendukung format file video yangn dimasukkan.

Dengan HTML kita juga dapat memasukkan animasi pada halaman web, dengan menggunakan tag <embed>...</embed>. Format yang digunakan yaitu .swf atau .gif. Contoh penerapan pada HTML:

C. TUGAS MANDIRI (5 SOAL URAIAN)

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Analisislah langkah-langkah dalam menyisipkan gambar di dokumen HTML!

2. Analisislah langkah-langkah dalam menampilkan audio di dalam dokumen web!

3. Analisislah langkah-langkah dalam menampilkan animasi di dalam dokumen web!

4. Sebutkan atribut dan fungsinya tag untuk menampilkan gambar!

5. Bagaimana cara menyisipkan file audio ke dalam tampilan web ?

D. TUGAS KELOMPOK (5 SOAL PRAKTIK URAIAN)

Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!

1. Apa yang terjadi jika file ukuran 50 x 50 px diperbesar menjadi 400 x 400 px? Coba dan diskusikan dengan temanmu!

2. Apakah file gambar dengan ukuran 400 x 400 pixel kemudian diperkecil tampilannya pada dokumen html juga memperkecil ukuran file? Coba dan diskusikan dengan temanmu!

3. Buatlah sebuah halaman web yang bisa memainkan audio secara otomatis namun tidak terlihat media kontrol dari video!

4. Buatlah sebuah halaman web yang bisa memainkan video secara otomatis namun tidak terlihat media kontrol dari audio!

5. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan penyisipan file audio dan video kedalam format web!

E. UJI KOMPETENSI

PILIHAN GANDA

Berilah tanda silang (X) pada pilihan jawaban yang benar!

1. Atribut yang digunakan untuk menentukan sumber berkas suara atau video adalah...

A. SRC

B. LOOP

C. UNITS

D. AUTOSTART

E. HIDDEN

2. Di bawah ini yang termasuk Format Video adalah .....

A. Mp3

B. Msv

C. Mid

D. M4p

E. Mp4

3. Tag HTML yang digunakan untuk menampilkan sebuah gambar dalam halaman web adalah ....

A. <img>

B. <jpg>

C. <ipg>

D. <pict>

E. <gambar>

4. Fungsi dari tag <bgsound> adalah untuk...

A. membuat tabel

B. memainkan suara sebagai latar belakang

C. mengisi data dalam tabel

D. membuat baris baru

E. membuat header

5. tag <embed> berfungsi untuk...

A. memainkan musik sebagai latar belakang

B. memainkan berkas dalam bentuk suara/ film

C. membuat baris baru

D. membuka HML

E. isi HTML

6. Tag yang digunakan untuk memainkan berkas yang berupa suara maupun video adalah ...

A. <a>

B. <loop>

C. <src>

D. <embed>

E. <hidden>

7. Format Mp4 digunakan untuk ...

A. Audio

B. Picture

C. Video

D. suara

E. musik

8. Untuk menampilkan gambar dalam halaman web maka gambar tersebut harus berformat ....

A. SWF

B. FLA

C. JPG

D. DOC

E. PDF

9. Tag <IMG SRC="..JPG"> digunakan untuk ..........

A. Mengubah gambar

B. Mengatur gambar

C. Menampilkan gambar

D. Menghapus gambar

E. Memindahkan gambar

10. Tag <IMG> memiliki atribut....

A. SIZE, COLOR, FACE

B. SIZE, WIDTH

C. HEIGHT, WIDTH

D. TYPE

E. BUTTON

11. Jika ingin meletakkan gambar di sebelah kiri teks maka atribut yang harus ditambahkan pada ALIGN adalah...

A. LEFT

B. RIGHT

C. TOP

D. MIDDLE

E. BOTTOM

12. Jika teks bisa berada sejajar dengan bagian tengah gambar maka atribut yang harus ditambahkan pada ALIGN adalah...

A. LEFT

B. RIGHT

C. TOP

D. MIDDLE

E. BOTTOM

13. Jika ingin menambahkan keterangan pada gambar seperti gambar dibawah ini maka pada tag <img> ditambahkan atribut.

A. Height

B. Width

C. Title

D. Align

E. Caption

14. Untuk mengatur tinggi gambar pada sebuah halaman web, maka atribut yang harus ditambahkan pada tag <img> adalah....

A. Height

B. Width

C. Title

D. Align

E. Caption

15. Untuk mengatur lebar gambar pada sebuah halaman web, maka atribut yang harus ditambahkan pada tag <img> adalah......

A. Height

B. Width

C. Title

D. Align

E. Caption

16. Yang merupakan format file audio adalah...

A. jpg

B. png

C. mp3

D. mp4

E. wmv

17. Fungsi atribut autoplay pada video digunakan untuk...

A. menampilkan kontrol seperti volume, video, dan juga tombol untuk memulai/

B. pause memuat ulang video ketika halaman dimuat ulang

C. mematikan suara

D. memuat ulang video

E. memulai video secara otomatis pada web terbuka

18. Fungsi atribut loop pada video digunakan untuk...

A. menampilkan kontrol seperti volume, video, dan juga tombol untuk memulai/pause

B. memuat ulang video ketika halaman dimuat ulang

C. mematikan suara

D. memuat ulang video

E. memulai video secara otomatis pada web terbuka

19. Atribute pada video yang berfungsi untuk memunculkan poster/gambar pada saat video buffer atau diunduh adalah...

A. Poster

B. Loop

C. Preload

D. Muted

E. Controls

20. Atribute pada video yang berfungsi untuk memuat ulang video adalah...

A. Poster

B. Loop

C. Preload

D. Muted

E. Controls

BENAR-SALAH

Pilihlah B jika pernyataan Benar atau S jika pernyataan Salah