Multimedia
Ketika sedang mencari atau mempelajari
informasi, kerap kali kita akan menemukan informasi yang ada disajikan dalam
bentuk teks. Sering juga, untuk melengkapi teks yang ada, terdapat gambar yang
berguna dalam membantu kita mengilustrasikan hal-hal yang sulit dibayangkan.
Untuk media digital, kita bahkan dapat menambahkan suara dan video ke dalam
teks untuk menambahkan informasi kepada pengguna.
HTML sendiri menyediakan fitur untuk
memberikan gambar, suara, maupun video untuk digunakan dalam dunia web.
Bagaimana caranya? Mari kita lihat!
Menambahkan Gambar
Untuk menambahkan gambar pada HTML, kita
dapat menggunakan elemen img. Elemen img sendiri merupakan elemen yang
bersifat self-contained, yaitu tidak memiliki tag penutup.
Elemen img juga
harus memiliki atribut src, yang dapat diisikan dengan dua cara,
yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari
gambar tersebut.
Berikut adalah contoh penggunaan
tag img:
<img src="images/sintel.png"
alt="Sintel
merupakan sebuah film singkat.">
<img src="http://i.imgur.com/cYWveEa.jpg"
alt="Contoh
Pengunaan URL untuk src.">
Atribut alt, yang bersifat opsional, berguna untuk
memberikan keterangan gambar secara semantik. Keterangan ini juga akan
ditampilkan ketika mouse diletakkan di atas gambar, dan ketika gambar tidak
dapat ditemukan.
Catatan: Dukungan format gambar yang ada
pada HTML diserahkan kepada masing-masing pembuat browser. Begitupun, sangat
disarankan untuk menggunakan format gambar yang didukung oleh hampir semua
perangkat secara umum, seperti png, jpg, ataugif.
Layaknya elemen-elemen lain pada HTML,
kita dapat mengubah tampilan elemen img dengan menggunakan CSS.
Mengubah Ukuran Gambar
Perubahan ukuran gambar dapat dilakukan
dengan menggunakan properti width dan height, seperti pada elemen-elemen lainnya.
Yang perlu diperhatikan dalam perubahan ukuran ialah bagaimana sebuah gambar
dapat menyesuaikan ukuran yang tepat ketika kita hanya memberikan salah satu
dimensi. Misalnya, sebuah gambar dengan ukuran asli800x600 akan secara otomatis berubah
menjadi 1024x768 meskipun kita hanya mengisikan
nilai width saja.
Browser secara otomatis akan menghitung rasio panjang dan lebar gambar lalu
menyesuaikan ukuran gambar dengan nilai yang kita berikan.
Tetapi perlu diingat bahwa pengisian
nilai width dan height dengan rasio panjang-lebar yang
tidak tepat tentunya akan menyebabkan gambar menjadi “tertarik”. Untuk lebih
jelasnya, coba jalankan kode berikut pada gambar yang diberi nama gambar.jpg:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perubahan Ukuran Gambar</title>
<style type="text/css">
#set-width {
width: 360px;
}
#set-height {
height: 600px;
}
#set-width-height {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<img src="images/gambar.jpg" id="standar"> <br>
<img src="images/gambar.jpg" id="set-width"> <br>
<img src="images/gambar.jpg" id="set-height"> <br>
<img src="images/gambar.jpg" id="set-width-height">
</body>
</html>
Hal lain yang perlu dicatat yaitu bahwa
meskipun perubahan ukuran gambar dapat dilakukan secara otomatis oleh browser,
sebaiknya perubahan dilakukan dengan sangat hati-hati. Ketika memperkecil
sebuah gambar yang berukuran1024x768 menjadi 320x240 misalnya, meskipun pengguna
melihat gambar yang kecil, gambar yang harus diunduh oleh browser tetaplah
berukuran 1024x768. Resolusi gambar tentunya mempengaruhi
ukuran, sehingga pengguna akan mengambil gambar yang tidak diperlukan, dan
menyia-nyiakan bandwidth. Jadi, selalu pastikan gambar yang diberikan ke
pengguna merupakan gambar yang optimal. Perubahan ukuran gambar umumnya
dilakukan untuk memastikan konten yang diisikan oleh pengguna tidak terlalu
besar atau kecil, sehingga mengganggu keseluruhan alur dokumen.
Perubahan Posisi Gambar
Seperti yang dapat dilihat pada kode
sebelumnya, elemen img merupakan
inline level element. Menambahkan gambar pada tengah-tengah teks akan
menyebabkan gambar tersebut diselipkan ditengah-tengah teks, mengacaukan alur
teks, seperti pada kode berikut:
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in
voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
untuk mendapatkan hasil sebagai berikut:
Penampilan gambar seperti ini tentunya
sangat tidak optimal. Untuk menanggulanginya, kita dapat membuat gambar menjadi
block level element:
img {
display: block;
}
ataupun dengan memberikan properti float kepada gambar, seperti berikut:
img {
background: #E8EAE9;
border: 1px solid #C6C9CC;
float: left;
margin: 10px;
padding: 4px;
}
contoh pengunaannya yaitu sebagai
berikut:
Menambahkan Suara (Audio)
Selain menampilkan gambar, HTML juga
memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web.
Elemen audio digunakan
untuk tujuan ini, dan sama seperti elemen img, kita harus memberikan nilai tempat
menyimpan file audio melalui atribut src. Tetapi berbeda dengan img, elemen audio memiliki tag penutup:
<audio src="audios/piano.mp3"></audio>
Secara normal, ketika kita memasukkan
elemen audio seperti
pada kode di atas, kita tidak akan dapat melihat elemen audio, dan bahkan file
audio yang dimasukkan tidak akan dapat dimainkan. Untuk menampilkan
elemen audio,
kita harus menambahkan atribut controls pada elemen:
<audio src="audios/piano.mp3" controls></audio>
dan jika kita ingin memastikan audio
dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser,
kita dapat menggunakan atribut autoplay:
<audio src="audios/piano.mp3" controls autoplay></audio>
Tentunya selain ketiga atribut di atas
kita juga memiliki atribut lainnya, yaitu loop dan preload. Seperti namanya, atributloop digunakan untuk memastikan audio
dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atributpreload 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 none, auto, dan metadata. Seperti namanya,none berarti tidak ada data yang
diunduh terlebih dahulu, auto melakukan unduh terhadap informasi-informasi
mengenai file audio (durasi, nama seniman, dst), dan metadata hanya mengunduh informasi tentang
file audio (tanpa mengunduh audio itu sendiri).
Elemen
Audio standar pada Chrome
Sumber Suara Tambahan
Ketika menambahkan audio pada dokumen
web, terdapat beberapa hal yang harus kita perhatikan untuk memastikan bahwa
audio dapat dimainkan dengan benar oleh pengguna. Hal paling utama yang perlu
diperhatikan ialah apakah browser pengguna dapat menjalankan file audio yang
diberikan tanpa masalah. Beberapa browser open source seperti Firefox menolak
file audio tertutup seperti WMV dan hanya dapat menjalankan format OGG. Untuk
menanggulangi hal ini, kita dapat memberikan beberapa jenis format file
sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.
Memberikan beberapa format file dapat
dilakukan dengan menambahkan elemen source di dalam elemen audio, seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
</audio>
Nilai pada atribut type harus diisikan dengan kode media
Internet (MIME), sesuai dengan format yang diinginkan. Bacadi sini untuk melihat daftar MIME untuk format-format
umum yang dijumpai pada Internet.
Tambahan lagi, selain memberikan sumber
suara dalam bentuk file audio, kita juga dapat menambahkan sumber berupaflash
player untuk browser yang belum mendukung elemen audio. Penambahan elemen flash player dilakukan
layaknya menambahkan elemen flash standar pada browser, tetapi tidak akan
dibahas lebih jauh pada artikel ini karena penambahan tersebut akan memerlukan
perubahan pada sisi server juga. Singkatnya, penambahan elemen flash dapat
dilakukan kira-kira seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?audio=piano.mp3">
<paran name="movie" value="player.swf?audio=piano.mp3">
<p>Tidak terdapat dukungan browser untuk
flash.</p>
</object>
</audio>
Kode di atas merupakan kode yang paling
aman untuk memastikan audio dapat dijalankan oleh pengguna, karena browser
modern yang mendukung elemenn audio umumnya telah mendukung format
OGG, dan untuk browser yang tidak mendukung, norma yang ada ialah
menggunakan flash player untuk menyajikan audio / video.
Menambahkan 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. Karenanya, setelah mengetahui
tentang tag audio,
kita dapat dengan mudah menambahkan video seperti berikut:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
</video>
dan sama seperti pada kasus audio,
umumnya browser telah mendukung format OGV, sehingga penambahan kedua format
standar (OGV dan MP4) umumnya telah cukup untuk mendukung seluruh browser
modern. Jika ingin menambahkan dukungan video flash, kita dapat menambahkannya
dengan cara yang sama dengan pada elemen audio:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source 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>
dan kita akan dapat melihat elemen audio
langsung pada browser:
Elemen
Video standar pada Chrome
Hal lain yang membedakan elemen video dengan audio ialah atribut poster. Atribut poster berguna untuk memberikan gambar
awal pada video, sebelum video dijalankan oleh pengguna. Atribut poster biasanya diisikan dengan gambar
yang relevan dengan video, dan menerima nilai berupa URL ke sebuah gambar,
dengan format yan didukung oleh browser pada umumnya. Berikut adalah contoh
penggunaan atribut poster:
<video controls autoplay poster="images/trailer-poster.jpg">
<source src="videos/trailer.ogv" type="video/ogg">
<source 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>
yang akan menghasilkan elemen berikut
ketika pengguna pertama kali membuka halaman:
Elemen
Video dengan Poster pada Chrome
Elemen Figure dan Caption
Pada media cetak tradisional seperti
buku, majalah, atau tabloid, sebuah gambar, grafik, atau potongan kode umumnya
memiliki sebuah caption berupa keterangan dari apa yang
ditampilkan oleh elemen-elemen tersebut. HTML menyediakan elemen figure dan figcaption untuk fasilitas-fasilitas
tersebut.
Elemen figure merupakan sebuah block level
element yang berfungsi sebagai pembungkus dari media, baik berupa gambar,
audio, video, ataupun media-media lainnya. Kita bahkan dapat memasukkan
beberapa media sekaligus ke dalam elemen figure. Karena hanya berperan sebagai pembungkus
dengan makna semantik (media ini relevan dengan dokumen), kita dapat
menuliskan figure layaknya
block level element lainnya:
<figure>
<img src="images/gambar.jpg" alt="gambar dalam figure">
</figure>
dan kemduian, kita dapat menambahkan
keterangan pada media tersebut dengan menggunakan elemen figcaptionyang harus berada di dalam elemen figure:
<figure>
<img src="images/gambar.jpg" alt="Contoh Gambar di dalam Figure">
<figcaption>
Contoh Gambar di dalam Figure
</figcaption>
</figure>
Untuk lebih jelasnya, silahkan coba demo
penggunaan elemen