View
84
Download
1
Category
Preview:
Citation preview
TUGAS PEMROGRAMAN WEB
MULTIMEDIA PADA HALAMAN WEB : FORMAT GAMBAR FORMAT TAMPILAN FILE AUDIO
KELOMPOK 4 ASHABUL KAHFI ASH SHIDDIQ
MUH.ANDIKA
NUR AZIZAH SYAMSUDDIN
NUR FITRI RAHMADANI
PENGERTIAN MULTIMEDIA MULTIMEDIA ADALAH PENGGUNA KOMPUTER UNTUK
MENYAJIKAN DAN MENGGABUNGKAN TEKS, SUARA, GAMBAR, ANIMASI, VIDIO, AUDIO DAN LAIN-LAIN
MULTIMEDIA BERUPA TEKNOLOGI YANG MEMADUKAN UNSUR TEKS GAMBAR DIAM, ANIMASI, BERGERAK, SUARA, BAHKAN VIDIO
ADAPUN YANG MENDUKUNG MUTIMEDIA KHUSUSNYA YANG BERKAITAN DENGAN AUDIO DAN VIDIO
UNTUK MENGANTISIPASI HAL INI DI PERLUKAN SOFTWARE EKSTERNAL SEPERTI WINAMP UNTUK MEMAINKAN SUARA ATAU WINDOWS MEDIA PLAYER UNTUK MEMAINKAN FILM ATAU SUARA
FORMAT GAMBAR CONTOH DARI FORMAT TAMPILAN GAMBAR
ADALAH : GAMBAR, MUSIK, SUARA, VIDIO, CATATAN, FILM, ANIMASI, DAN LAIN-LAIN
WEB BROWSER YANG PERTAMA HANYA MAMPU MENAMPILKAN TEKS SAJA, BAHKAN MASIH TERBATAS PADA FONT TUNGGAL DALAM SATU WARNA
DUKUNGAN SUARA SEPERTI ANIMASI DAN VIDIO SUDAH DITANGANI LEBIH BAIK OLEH BERBAGAI BROWSER. ADAPUN ELEMEN MULTIMEDIA YANG MEMERLUKAN PROGRAM PEMBANTU SEPERTI TAMBAHAN (PLUG-IN)
FORMAT MULTIMEDIA DI SIMPAN DALAM FILE MEDIA. CARA YANG PALING UMUM UNTUK MENEMUKAN JENIS FILE ADALAH DENGAN MELIHAT EKSTENSI FILE
UNTUK MENAMPILKAN GAMBAR PADA HALAMAN, KITA HARUS MENGGUNAKAN ATTRIBUT “SRC”, SRC ADALAH SINGKATAN DARI SOURCE ATAU SUMBER. NILAI ATRIBUTE ADALAH SRC DALAM URL DARI GAMBAR YANG DI TAMPILKAN
URL MENUNJUKKAN KE LOKASI DI MANA GAMBAR DI SIMPAN, SEPERTI : “BOAT.GIF”, YANG TERLETAK DI DIREKTORI “IMAGES” PADA “WWW.W3SCHOOLS.COM/IMAGE/BOAT.GIF.
<img src=“url”alt=“some_t
ext”>
ATRIBUT ALT DIPERLUKAN UNTUK MENENTUKAN SEBUAH TEKS ALTERNATIF UNTUK GAMBAR JIKA GAMBAR TIDAK DAPAT DI TAMPILKAN
NILAI ATRIBUT ALT ADALAH TEKS PENULIS ATAU KETERANGAN GAMBAR DIDEFINISIKAN :
ATRIBUT ALT MENYEDIAKAN INFORMASI AlTERNATIF BAGI GAMBAR JIKA PENGGUNA UNTUK BEBERAPA ALASAN TIDAK BISA MELIHATNYA
NILAI ATRIBUT YANG DI TETAPKAN DALAM PIXEL SECARA DEFAULT
<IMG SRC=“SMILEY.GIF” ALT=“SMILEY FACE “>
<IMG SRC=“SMILEY.GIF” ALT =“SMILEY FACE “WIDTH =“42” HEIGHT=“42”
TAG
KETERANGAN<IMG> MENDEFINISIKAN SEBUAH IMAGE <MAP> MENDEFINISIKAN SEBUAH IMAGE-MAP<AREA> MENDEFINISIKAN DAERAH YANG DAPAT DIKLIK DALAM
SEBUAH IMAGE-MAPLISTING TAMPILAN GAMBAR SATU LOKASI DENGAN HTML
<HTML><BODY>SEBUAH GAMBAR :<IMG SRC=“SMILEY.GIF” ALT=“SMILEY FACE” WIDTH=“42” HEIGHT=“42”></P><P>SEBUAH GAMBAR BERGERAK <IMG SRC=“HACKANM.GIF” ALT=“COMPUTER MAN” WIDTH=“48”HEIGHT=“48”></P> DARI GAMBAR TIDAK BERGERAK . </P></BODY></HTML>
<HTML><BODY><P>SEBUAH GAMBAR :<IMG SRC =“SMILEY GIF” ALT =“COMPUTER MAN “ WIDHT=“42” HEIGHT=“42”></P>SEBUAH GAMBAR BERGERAK :<IMG SRC=“HACKANM.GIF” ALT=“COMPUTER MAN” WIDTH=“48”HEIGHT=“48”></P> DARI GAMBAR TIDAK BERGERAK . <P> PERHATIKAN BAHWA SINTASK MEMASUKKAN GAMBAR BERGERAK TIDAK BERBEDA DARI GAMBAR TIDAK BERGERAK </P></BODY></HTML>
LISTING TAMPILAN GAMBAR BERBEDA LOKASI.
Format Tampilan File Audio Pada Web. Kebanyakan file audio diputar melalui sebuah plug-in,
misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai
plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar
untuk menanamkan file audio pada halaman web: elemen <audio> </audio>. Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini
adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah
MP3,WAV, dan OGG. Tidak semua tipe file audio tersebut didukung oleh browser. · OGG merupakan format audio yang didukung oleh Mozilla
firefox, opera, dan google chrome. · MP3 merupakan format audio yang didukung oleh Google
Chrome dan safari. · WAV merupakan format audio yang didukung oleh Mozilla
Firefox dan Opera.
a. Akan ada beberapa orang yang tidak bisa memutar hasil embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp3.
b. MIME untuk format audio MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk
mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga enggunakan MIME.
Menyajikan audio dalam tampilan web File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>. Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web. <html> <head> <title>cek suara</title> </head> <body> <audio controls> <source src="house.mp3" type="audio/mp3"> <source src="house.ogg" type="audio/ogg"> </audio> </body> </html> Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang
sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "house.mp3" dan "house.ogg".
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser .
Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls.
Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play
<html> <head> <title>cek suara</title> </head> <body> <audio controls = "controls" autoplay="autoplay" loop="loop" > <source src="house.mp3" type="audio/mp3"> <source src="house.ogg" type="audio/ogg"> </audio> </body> </html> Bila listing program diatas dijalankan akan menghasilkan tampilan
audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.
Plug-in audio Plug-in merupakan sebuah program komputer kecil yang
memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman HTML menggunakan tag <object> atau tag <embed>.
Tag <embed> Tag <embed> diartikan sebagai sebuah wadah untuk konten
eksternal (nonHTML). Adapun potongan kode untuk memainkan file *.mp3 yang
embed/tertanam di halaman web adalah <!DOCTYPE html> <html> <body> <embed height="50" width="100" src="house.mp3"> <p>Bila anda tidak dapat mendengar suara, maka kemungkinan
browser yan anda gunakan tidak support dengan format file audionya</p> <p>atau bisa juga speaker anda sedang off :)</p> </body> </html> Setelah kode diatas dijalankan dibrowser mozilla firefox maka
pada web akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya karena browser mozilla firefox tidak mendukung file audio *.mp3.
Tag <object> Format audio dapat pula didefiniskan sebagai obyek ekternal
untuk konten non HTML dengan menggunakan tag<obyek>. Berikut ini
potongan kode program untuk menampilkan file audio <!DOCTYPE html> <html> <body> <object height="50" width="100" data="house.ogg"></object> <p>Bila anda tidak dapat mendengar suara, maka
kemungkinan browser yan anda gunakan tidak support dengan format file audionya</p>
<p>atau bisa juga speaker anda sedang off :)</p> </body> </html> Setelah kode diatas dijalankan dibrowser mozilla firefox
maka pada web akan terdengar suara dari file "house.ogg"
SEKIAN PRESENTASI KAMI APABILA ADA KATA-KATA YANG KURANG DIPAHAMI DAN SELEBIHNYA KAMI MOHON MAAF DAN TERIMA KASIH…
#BY KELOMPOK 4
Recommended