Tugas Kelompok 4 - Pemrograman Web

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”>SEBUAH GAMBAR BERGERAK <IMG SRC=“HACKANM.GIF” ALT=“COMPUTER MAN” WIDTH=“48”HEIGHT=“48”> DARI GAMBAR TIDAK BERGERAK . </BODY></HTML>

<HTML><BODY>SEBUAH GAMBAR :<IMG SRC =“SMILEY GIF” ALT =“COMPUTER MAN “ WIDHT=“42” HEIGHT=“42”>SEBUAH GAMBAR BERGERAK :<IMG SRC=“HACKANM.GIF” ALT=“COMPUTER MAN” WIDTH=“48”HEIGHT=“48”> DARI GAMBAR TIDAK BERGERAK . PERHATIKAN BAHWA SINTASK MEMASUKKAN GAMBAR BERGERAK TIDAK BERBEDA DARI GAMBAR TIDAK BERGERAK </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"> Bila anda tidak dapat mendengar suara, maka kemungkinan

browser yan anda gunakan tidak support dengan format file audionya atau bisa juga speaker anda sedang off :) </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> Bila anda tidak dapat mendengar suara, maka

kemungkinan browser yan anda gunakan tidak support dengan format file audionya

atau bisa juga speaker anda sedang off :) </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

Tugas Kelompok 4 - Pemrograman Web

Internet

Transcript of Tugas Kelompok 4 - Pemrograman Web