Monday, November 23, 2015

Multimedia pada HTML


  1. Format tampilan gambar
    Untuk menampilkan gambar pada HTML, digunakan tag img yang kosong dan tidak memiliki tag penutup atau end tag.  Berikut ini adalah kode penulisan kodenya yang dibedakan berdasarkan jenis formatnya:


jpeg
<img src=”gambar.jpg”>
png
<img src=”gambar.png”>
gif
<img src=”gambar.gif”>
bmp
<img src=”gambar.bmp”>



Atribut src digunakan untuk menyatakan file gambar yang akan ditampilkan pada halaman web. 






Atribut alt digunakan sebagai teks pengganti untuk gambar ketika gambar tidak dapat ditampilkan pada browser. Format penulisan kodenya adalah sebagai berikut:



<img src=”gambar.jpg” alt=”Teks”>









 Untuk mengatur ukuran gambar yang akan ditampilkan, digunakan atribut style dengan property width untuk ukuran lebar dan  height untuk ukuran tinggi. Berikut adalah format penulisan  kodenya:

<img src=”gambar.jpg” alt=”Teks” style=”width:100px;height:100px”>



Property width dan height selalu memiliki value berupa angka yang mewakili ukuran gambar yang diinginkan beserta satuannya.

  1. Format tampilan audio
    Untuk menampilkan audio pada halaman web, digunakan tag <audio>, dengan kode pemrograman yang dibedakan berdasarkan formatnya:


Mp3
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
File audio tidak dapat diputar
</audio>
Ogg
<audio controls>
    <source src="audio.ogg" type="audio/ogg">
File audio tidak dapat diputar
</audio>
Wav
<audio controls>
    <source src="audio.wav" type="audio/wav">
File audio tidak dapat diputar
</audio>



Potongan kode berwarna merah tersebut adalah atribut controls yang ditambahkan ke dalam tag audio untuk menampilkan bar kontrol dari file audio yang akan diputar pada halaman web.



Elemen tag audio terdiri atas tag source yang digunakan untuk menentukan file audio yang akan diputar.

Atribut autoplay ditambahkan agar file audio dapat langsung diputar secara otomatis ketika halaman web ditampilkan. Format penulisan:

<audio controls autoplay>
    <source src="audio.mp3" type="audio/mpeg">
File audio tidak dapat diputar
</audio>

Atribut loop ditambahkan agar file audio dapat diputar berulang-ulang secara otomatis. Format penulisan:

<audio controls loop>
    <source src="audio.mp3" type="audio/mpeg">
File audio tidak dapat diputar
</audio>

  1. Format tampilan video
    Untuk menampilkan video, digunakan tag <video>, dengan kode pemrograman yang dibedakan berdasarkan formatnya, seperti berikut:


Mp4
<video controls>
    <source src="video.mp4" type="video/mp4">
File video tidak dapat diputar
</video>
WebM 
<video controls>
    <source src="video.webm" type="video/webm">
File video tidak dapat diputar
</video>

Untuk mengatur ukuran video, digunakan atribut width dan height yang ditambahkan dalam tag <video>, dengan format sebagai berikut:



<video controls width=”xxxx” height=”xxxx”>
    <source src="video.mp4" type="video/mp4">
File video tidak dapat diputar
</video>



Dimana xxxx merupakan angka yang mewakili ukuran lebar dan tinggi dari video yang akan ditampilkan dalam satuan pixel.

0 komentar:

Post a Comment