Modul RPL, Format Multimedia pada Halaman Web
Format Tabel dan Multimedia pada Halaman Web
B. Format Multimedia pada Halaman Web
Web disusun dari halaman-halaman yang menggunakan teknologi web dan saling berkaitan satu sama lain. Salah satu elemennya adalah multimedia.
1. Konsep Tampilan Multimedia dalam HTML
Multimedia merupakan suatu sarana komunikasi yang berupa penggabungan teks, gambar, animasi, video, dan audio. Bentuk-bentuk multimedia diantaranya video komersial, advertisement, animasi flash, dan trailer video. Pada media digital dapat menambahkan suara dan video ke dalam teks untuk menambahkan informasi kepada pengguna. HTML sendiri menyediakan fitur untuk memberikan gambar, suara, ataupun video untuk digunakan dalam dunia web.
Pada umumnya, elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah melihat ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi “.htm / .html” maka browser akan berasumsi bahwa file tersebut merupakan halaman HTML.
2. Perintah Tag Menampilkan Gambar
Gambar adalah suatu objek yang dapat ditampilkan dalam bentuk grafik (nonteks) atau konsep yang berbentuk kode yang tidak berelasi dengan waktu. Gambar terbagi tiga jenis, yaitu visible image, non visible image, dan abstrak. Jika ingin menambahkan gambar pada HTML, dapat menggunakan elemen img yang bersifat self-contained (tidak memiliki tag penutup). Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua metode, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.
Format gambar sudah di dukung oleh hampir semua perangkat secara umum, misalnya PNG (Portable Network Graphics), JPG (Joint Photographic Expert Group), atau GIF (Graphic Interface Format). Bentuk penggunaan tag img adalah sebagai berikut.
<img src=”images/sintel.png”
Alt=”Sintel merupakan sebuah film singkat”>
<img src=”http://i.imgur.com/cYWveEa.jpg”
Alt=”Penggunaan URL untuk src.”>
Pada dasarnya penggunaan atribut al berguna untuk memberikan keterangan gambar secara semantik. Keterangan tersebut juga akan ditampilkan ketika mouse diletakan di atas gambar ataupun pada saat gambar tidak dapat ditemukan. Apabila ingin menggabungkan atau menyisipkan gambar di dalam suatu teks/paragraph tertentu, terdapat pilihan posisi gambar yang harus diperhatikan.
|
No. |
Posisi |
Keterangan |
|
1. |
Vertikal |
a. Teks
bisa berada sejajar dengan bagian atas gambar |
|
2. |
Horizontal |
a. Gambar
bisa berada di bagian kiri teks/paragraf. |
Pada posisi gambar yang dilihat dari arah vertical dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>. Adapun untuk posisi gambar jika dilihat dari arah horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam ALIGN pada tag <img>. Adanya pengisian atribut tersebut dengan nilai LEFT, maka posisi gambar berada di sebelah kiri teks. Hal berbeda jika diisi RIGHT akan menyebabkan posisi gambar akan berada di sebelah kanan teks.
Untuk lebih jelasnya, perhatikan contoh berikut.
<html><head><title>Gambar</title></head><body bgcolor=”f0f0f0”><h1><p>Menggabungkan Gambar dan Teks, Posisi terhadap teks secara horizontal</p></h1><h2><img align=”left” src=”web 5/3.jpg”/ height=”250 pixel” width=”350 pixel” Komputer 1 (menggunakan align=LEFT)</p></h2><h2><img align=”right” src=”web 5/2.jpg”/ height=”250 pixel” width=”350 pixel” Komputer 2 (menggunakan align=LEFT)</p></h2></body></html>
3. Perintah Tag untuk Audio
Penggunaan suara atau audio kedalam aplikasi multimedia dapat memberikan informasi yang tidak mungkin diberikan oleh media informasi, seperti gambar, grafik, atau teks. Misalnya untuk menginformasikan bunyi desiran angina tentu tidak dapat dideskripsikan oleh teks. Terdapat tiga jenis suara, yaitu ucapan (speech), music, dan efek suara. Selain itu, suara juga terbagi dua jenis formatnya, yaitu MIDI dan WAVE.
a. MIDI (Musical Instrument Digital Interface) identik dengan jenis format suara yang berasal dari instrumentasi alat musik. Namun, jenis format MIDI tidak dapat memainkan atau merekam bunyi atau suara alami seperti suara tetesan air, suara manusia, dan lain-lain.
b. WAVE identik dengan jenis format musik atau berbasis digital yang dapat merekam dan memainkan jenis suara apapun baik real sound effect maupun suara dari manusia.
HTML memiliki fitur untuk menambahkan pemutas suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan tersebut sama seperti menggunakan elemen img dengan memberikan nilai tempat menyimpan file audio melalui atribut src. Hal yang perlu diketahui adalah elemen audio memiliki tag penutup dan hal tersebut berbeda dengan img.
<audio src=”audios/guitars.mp3”></audio>
Adapun untuk menampilkan elemen audio, anda harus menambahkan atribut controls pada elemen sebagai berikut.
<audio src=”audios/guitars.mp3” controls></audio>
Penggunaan atribut autoplay digunakan jika anda ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser. Penggunaan atribut autoplay sebagai berikut.
<audio src=”audios/guitars.mp3” controls autoplay></audio>
Adapun atribut loop digunakan untuk memastikan audio dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atribut preload sendiri berfungsi untuk mengatur seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio. Atribut preload dapat diisikan dengan tiga nilai, yaitu sebagai berikut.
a. None, berarti tidak ada data yang diunduh terlebih dahulu.
b. Auto, yaitu melakukan download terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dan seterusnya).
c. Metadata, hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).
4. Perintah Tag untuk Video
Penambahan video pada dokumen HTML dilakukan dengan elemen video yang sangat mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Video hampir sama dengan animasi, namun video lebih cenderung hasil karya dari adegan dunia nyata yang direkam secara langsung.
Video mengandung beberapa elemen multimedia lainnya, seperti gambar, suara, dan tulisan. Dibanding dengan elemen lainnya, video menyuguhkan informasi lebih lengkap dan menarik.
Prosedur untuk menambahkan video, yaitu sebagai berikut.
<video controls autoplay><source src=”videos/trailer.ogv” type=”video/ogg”><source scr=”videos/trailer.mp4” type=”video/mp4></videos>
Pada umumnya, browser telah mendukung format OGV, sehingga penambahan kedua format standar (OGV dan MP4) mempu mendukung seluruh browser modern. Jika anda ingin menambahkan dukungan flash, dapat dilakukan dengan menambahkannya dengan cara sebagai berikut.
<video control autuplay><cource src=”videos/trailer.ogv” type=”video/ogg”><cource src=”videos/trailer.mp4” type=”video/mp4”><object type=”application/x-shockwave-flash” data=”player.swf?video=trailer.mp4”><param name=”movie” value=”player.swf?video=trailer.mp4”><p>Tidak ada dukungan flash</p></object></video>
0 Response to "Modul RPL, Format Multimedia pada Halaman Web"
Post a Comment