Multimedia

Multimedia pada web adalah:

-         Sound

-         Musik

-         video

-         animasi

Web browser modern telah mendukung sejumlah format multimedia

·         Multimedia mempunyai banyak format berbeda.

·         Multimedia berupa sesuatu yang dapat didengar atau dilihat.

·         Contohnya: teks, gambar, musik, suara, video, film, animasi, dan lainnya.

·         Pada Internet sering kita lihat elemen multimedia ditempelkan pada halaman web.

Menggunakan Plugin

·         Plugin adalah program kecil yang memperluas fungsionalitas standar pada web browser.

·         Plugin dapat digunakan untuk bermacam-macam tujuan: memainkan musik, menampilkan peta, verivikasi bank id, dan lain-lain.

·         Plugin dapat ditambahkan ke halaman HTML menggunakan tag <object> atau <embed>.

Menggunakan elemen <embed>

·         Tujuan tag embed> untuk menempelkan elemen multimedia kedalam halaman HTML.

·         Untuk memainkan file MP3 yang ditempelkan dalam halaman web:

<embed height="50px" width="100px" src="song.mp3" />

Catatan: Tag <embed> tidak terdapat pada HTML 4.

Menggunakan elemen <audio>

Elemen <audio> merupakan elemen HTML 5, tidak terdapat pada HTML 4, tetapi bekerja pada browser-browser baru.

<audio controls="controls">

<source src="song.mp3" type="audio/mpeg" />

<source src="song.ogg" type="audio/ogg" />

Your browser does not support this audio

</audio>

Menggunakan Google

<a href="song.mp3">Play Song</a>

<embed type="application/x-shockwave-flash"

wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3" height="27" width="320">

</embed>

Menggunakan Hyperlink

ika halaman web menggunakan hyperlink ke file media, kebanyakan browser akan menggunakan "helper application" untuk memainkan file.

Kode berikut menampilkan link ke file MP3. Jika user mengklik link, browser akan membuka helper application untuk memainkan file:

<a href="song.mp3">Play the song</a>

Elemen Object HTML

Tujuan elemen <object> adalah untuk mendukung HTML helpers (Plug-Ins)

Helper application adalah program yang dapat dimuat oleh browser untuk “membantu". Helper application disebut juga Plug-Ins.

Helper application dapat digunakan untuk memainkan audio dan video (dan lainnya). Helper application dimuat menggunakan tag <object>.

Keuntungan menggunakan helper application untuk memainkan video dan audio, adalah seting player (rewind, pause, stop dan play) dapat dikontrol user.

Memainkan Wave Audio menggunakan QuickTime

<object width="420" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

<param name="src" value="liar.wav" />

<param name="controller" value="true" />

</object>

HTML Video

Video dapat dimainkandalam HTML bermacam-macam cara

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object>

</video>

Tag <embed>

Tujuan tag <embed> untuk menempelkan elemen multimedia kedalam halaman HTML .

Kode HTML berikut menampilkan Flash video yang di-embedded kedalam halaman web:

<embed src="intro.swf" height="200" width="200"/>

Menggunakan Tag <object>

Tujuan tag <object> untuk menempelkan elemen multimedia kedalam halaman HTML .

Kode HTML berikut menampilkan Flash video yang di-embedded kedalam halaman web:

<object data="intro.swf" height="200" width="200"/>

Menggunakan Tag <video>

Elemen <video> adalah baru dalam HTML 5

Tujuan tag <video> untuk menempelkan elemen multimedia kedalam halaman HTML .

Kode HTML berikut menampilkan video dalam format ogg, mp4, atau webm yang di-embedded kedalam halaman web:

<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>

Video YouTube

Jika anda ingin memainkan video, anda dapat meng-upload video ke YouTube dan menyisipkan kode HTML untuk memainkan video kedalam halaman web anda.

       <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe> 

Jenis-Jenis Link

Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :

1.      Link Absolut

Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan

alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs web

yang kita buat adalah pemrograman HTML, maka kita dapat membuat link ke situs web lain

yang memiliki tema yang sama atau relevan. Tujuannya adalah agar pengunjung bisa

memperoleh informasi lebih tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas

pada situs web kita.

Contoh : <a

href=http://www.w3.org/

>W3</a>

2.  Link Relatif

Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih

berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya

pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya

(jika ada).

Perhatikan contoh kode berikut :

<a href=”kontak.html”>Kontak</a>

<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler Sahara</a>

Menjadikan Gambar sebagai LinkSelain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link dengan tag <img>.Link yang berupa teks:<a href=”dokumenlain”>teks link</a>

Link yang berupa gambar:

<a href=”dokumenlain”><img src=”NamaFileGambar” /></a>

Contoh :

<a href=”detail-sahara.html”>

<img src=”images/jeep/saharal.jpg” />

</a>

Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori

images\jeep sebagai link untuk menuju ke dokumen detail-sahara.html.

3. Link kebagian ke document tertentu

Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih

berada dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang

memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian

atasnya. Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada

halaman tersebut untuk menuju/kembali tertentu dalam dokumen bersangkutan.

Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di atas dengan link

ke setiap bab . Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol

“#”.

Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:

<h1 id="heading1">heading 1</h1>

Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda

“#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh:

<a href="#heading1"> Menuju ke heading 1</a>

Berikut ini contoh bila ada beberapa link internal

<html>

<head> </head>

<body>

<a href="#heading1">Link ke heading 1</a>

<a href="#heading2">Link ke heading 2</a>

<h1 id="heading1">heading 1</h1>

<h1 id="heading2">heading 2</h1>

</body>

</html>

Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :

A. Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau nama

pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. Pemberian id

tersebut dilakukan dengan cara menuliskan kode berikut :

<a id=”tujuanLink”>Teks atau gambar</a>

Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang telah di

namai tersebut adalah dengan menuliskan kode seperti berikut :

<a href=”#Tujuanlink”>Teks atau gambar</a>

Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan berupa file.

B. Link ke Bagian Tertentu Dalam Dokumen Lain

Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke sesuatu

bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link semacam ini,

bagian tertentu dalam dokumen lain tersebut harus di tantai dengan pemberian id seperti

pada sub-bab sebelumnya. Perbedaan hanya terletak pada penulisan tujuan link-nya saja.

Pada kasus seperti ini, kita perlu menambahkan id bagian pada tujuan link, seperti

berikut:

<a href=”namafile#idBagian”>Teks atau gambar</a>

C. Menentukan target link

Target atau tujuan yang dihubungkan melalui suatu link dapat ditentukan sendiri oleh kita. Target

yang di maksud di sini adalah dimana dokumen akan ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET tidak di sertakan), dokumen baru yang ditampilkan pada saat link dipilih akan menutup atau menimpa dokumen lama (dokumen yang mengandung link bersangkutan). Untuk melakukan hal, kita hanya perlu menambahkan atribut TARGET di dalam tag <a>, yang memiliki bentuk umum penulisan seperti berikut:

<a href=”NamaDokumen” target=”NamaTarget”>Teks/Gambar<a/>

NamaDokumen adalah namadokumen yang akan di tampilkan jika link bersangkutan dipilih/diklik

dan NamaTarget adalah target atau tempat tujuan dari dokumen yang akan ditampilkan. NamaTarget bisa bernilai _BLANK maupun nama frame (jika layar web kita bagi dengan menggunakan frame)

1. Link Email

Selain menghubungkan antara halaman dan antara bagian-bagian dari satu halaman, tag <a>

memungkinkan kita untuk link ke alamat email. Ini adalah cara paling sederhana untuk memungkinkan pengunjung halaman web kita untuk "mengirim pesan" kepada kita. Dengan

memberikan link yang dapat diklik ke alamat email kita, maka mudah bagi pengunjung untuk

mengirim pesan dan pengunjung tidak perlu mengetikkan alamat email.

Cara penulisan link HTML ke alamat email adalah seperti berikut :

<a href="mailto:nama@yourdomain.com"> Kirim pesan email</a>

Kata-kata “Kirim pesan email” akan muncul seperti link <a> lainnya .

Jika kita ingin orang melihat alamat email kita yang sebenarnya ( sehingga mereka dapat

mencata atau mengirim pesan menggunakan program email yang berbeda ), adalah seperti ini :

<a href="mailto:nama@yourdomain.com">nama@yourdomain.com</a>

Dalam kebanyakan web browser, bila seseorang mengklik link tersebut , maka terbuka sebuah

jendela di mana dia dapat mengetik pesan email yang segera dikirimkan kepada kita

Kita juga dapat memberikan beberapa informasi tambahan di link sehingga subjek dan isi

pesan juga langsung tertulis. Yaitu dengan menambahkan variabel subject (perihal) dan body

(isi pesan). Pisahkan variabel dari alamat email dengan tanda tanya ( ? ) , Nilai dari variabel

dengan tanda sama dengan ( = ) , dan kemudian memisahkan masing-masing variabel dan nilai

pasangan dengan ampersand ( & ). Berikut adalah contoh menentukan subjek dan body untuk

contoh email sebelumnya :

<a href = "mailto:author@somedomain.com?subject=Pertanyaan & body=Kapan edisi

berikutnya keluar ?"> Author@somedomain.com </a>

Ketika pengguna mengklik link ini , pesan email dibuat dengan author@somedomain.com

sebagai penerima, “Pertanyaan” sebagai subject/perihal , dan Kapan edisi berikutnya keluar ?

sebagai isi pesan .

2. Link Telepon

Kita juga dapat membuat link telepon di dokumen web kita. Hal ini karena banyak pengunjung web menggunakan smartphone untuk mengakses website kita, sehingga dapat digunakan untuk melakukan panggilan telepon ! Jadi kita dapat menuliskan nomor telepon, sehingga pengunjung dapat langsung klik untuk menghubungi nomor telepon terebut. Cara penulisannya adalah seperticontoh berikut .

<a href="tel:0123456789">Hubungi kami di (012) 3456789 </a>

Ketika pengguna ponsel menekan link tersebut, mereka mendapatkan kotak peringatan meminta mereka untuk mengkonfirmasi bahwa mereka ingin melakukan panggilan telepon ke nomor tersebut . Fitur ini didukung pada perangkat mobile yang paling baru, termasuk iOS , Android , Blackberry , Symbian , Internet Explorer , dan Opera Mini .

iPad dan iPod Touch tidak dapat membuat panggilan , tetapi akan menawarkan untuk membuat kontak baru dari nomor tersebut.

Sedangkan untuk pengguna desktop tidak terjadi apa-apa untuk link tersebut.

Ada beberapa cara terbaik untuk menggunakan link telepon :

Dianjurkan agar memasukkan nomor lengkap panggilan internasional , termasuk kode Negara, seperti +62 untuk Indonesia, karena tidak diketahui di Negara mana pengguna akan mengakses web kita .menuliskan nomor telepon ke dalam isi link sehingga jika link tidak bekerja , nomor telepon masih terbaca .

Android dan iPhone memiliki fitur yang dapat mendeteksi nomor telepon dan secara otomatis mengubah mereka menjadi link. Sayangnya , beberapa nomor 10 - digit yang bukan nomor telepon mungkin akan berubah menjadi link juga. Jika dokumen kita memiliki string angka yang mungkin akan dideteksi sebagai nomor telepon, kita dapat mengaktifkan auto - deteksi off dengan memasukkan elemen meta berikut dalam kepala dokumen kita .

<meta name="format-detection" content="telephone=no">

  Untuk perangkat Blackberry , menggunakan berikut:

<meta http-equiv="x-rim-auto-match" content="none">

ANATOMI LINK

Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling terkait dengan

dokumen lain. Link (sebutan singkat dari hyperlink text) adalah suatu metode yang digunakan

dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Semua

halaman web yang ada di internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link

adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau

informasi yang tersimpan dalam situs web bersangkutan.

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang berpasangan

dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. Bentuk umum

pembuat link dalam dokumen HTML adalah sebagai berikut :

<a href=”dokumenlain”>Text Link</a>

Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau halaman mana yang akan

dipanggil saat link tersebut di klik atau dipilih oleh pengunjung web.

Contoh :

<a href=”index.html”>Home</a><br />

<a href=”about.html”>Tentang Kami</a><br />

<a href=”contact.html”>Kontak</a>

Pada contoh diatas kita membuat tiga buah link dengan teks : Home, Tentang kami, dan kontak.

Ketika pengunjung melakukan klik terhadap link pertama (home), web browser akan menampilkan

dokumen yang disimpan dalam file index.html. Begitu juga dengan link kedua (Tentang Kami) dan

ketiga (Kontak), setiap di klik akan menjadikan web browser menampilkan dokumen yang terdapat

pada file about.html dan contact.html.

Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama dokumen web, agar

link dapat berfungsi dengan baik :

1. Penamaan file dengan huruf kecil semua

           2. Jangan ada spasi serta hindari non-karakter alphabet