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:
Gambar dengan Float | Demo
- Menambahkan Suara (Audio)
- Sumber Suara Tambahan
- Menambahkan Video
- Elemen Figure dan Caption
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, 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 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
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. Baca di 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 berupa flash 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.
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
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 figcaption yang 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>
0 komentar:
Posting Komentar