 |
| Elemen Media HTML |
Mengenal Elemen Media HTML
Pada artikel kali ini kita akan membahas bagaimana menyematkan gambar, video dan audio sesuai tag elemenya gambar dengan tag <img>, video dengan tag <video> dan audio dengan tag <audio>. tak hanya itu akan kita bahas beserta atribut yang umum digunakannya.
Penggunaan Tag <img> untuk Gambar
Gambar merupakan bagian penting untuk memperkaya isi konten website. pada HTML menyediakan tag <img> untuk memungkinkan developer menyematkan pada halaman website.
berikut contoh penggunaannya
<img src="serieswans.jpg" alt="seriewans logo" width="800" height="500">
Keterangan
src : menentukan lokasi atau path gambar
alt : memberikan deksripsi alternatif tentang gambar tersebut untuk aksebilitas
width dan height : untuk mengatur dimensi pada gambar
selain tag <img>, HTML juga mendukung elemen <figure> dan <figcaption> untuk menyematkan gambar dan memberikan caption pada gambar tersebut.
berikut contoh penggunaannya:
<figure>
<img src="serieswans.jpg" alt="serieswans logo" width="800" height="500">
<figcaption>Caption gambar.</figcaption>
</figure>
Penggunaan Tag <audio> untuk Audio
Tag <audio> digunakan untuk menyematkan file audio ke dalam halaman website.
berikut contoh penggunaannya:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Keterangan
controls : untuk menampilkan kontrol pemutaran audio
<source> : mendefinisikan sumber file audio berserta tipe kontennya
Developer dapat menambahkan atribut autoplay untuk melakukan pemutara otomatis dan loop untuk mengulai audio tersebut.
Penggunaan Tag <video> untuk Video
Tag <video> digunakan untuk menyematkan file video ke dalam halaman website.
berikut contoh penggunaannya:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Keterangan
width dan height : untuk mengatur dimensi video
contorls : untuk menampilkan kontrol pemutara video
<source> mendefinisikan sumber file video beserta tipe kontennya
Elemen Picture dan Srcset
Pembaruan terbaru dari HTML yaitu elemen <picture> dan atribut srcset pada tag <img>. dari pembaruan tersebut memungkinkan kontrol lebih besar mengenai bagaimana gambar tersebut di tampilkan tergantung ukuran layar perangkat. penggunaan elemen ini sangat cocok dan meningkatkan reponsifitas website.
berikut contoh pengunaannya:
<picture>
<source srcset="gambar-large.jpg" media="(min-width: 1200px)">
<source srcset="gambar-medium.jpg" media="(min-width: 768px)">
<img src="gambar-small.jpg" alt="Deskripsi Gambar">
</picture>
Pentingnya Aksebilitas dan Responsif
Dalam pembuatan website sangat penting untuk membuat media menjadi responsif agar bisa di akses oleh berbagai perangkat. perhatikan penggunaan width dan height dengan baik dan padukan dengan media queries yang merupakan teknik CSS untuk mengatasi responsifitas. jangan lupa tambahkan dan isi atribut alt pada gambar.
Menggunakan Embed dari Sumbe Eksternal
Kita juga bisa menambahkan atau menyematkan media dari sumber eksternal seperti youtube atau yang lainnya dengan menggunakan tag <iframe>. anda juga bisa menyematkan media yang bersumber dari file yang berada pada server sendiri.
contoh penggunaannya
<iframe width="580" height="345" src="https://www.youtube.com/embed/VideoID" frameborder="0" allowfullscreen></iframe>
Kesimpulan
HTML memiliki banyak perubahan dan ada banyak penambahan elemen ke versi yang terbaru. dengan memanfaatkan fitur terbaru kita bisa menyematkan audio, video dan gambar pada halaman website agar pengguna mendapatkan pengalaman visual yang baik dan lebih kaya. dengan memahami Elemen media HTML, bisa membuat halaman web yang dinamis dan responsif. selamat mencoba
Posting Komentar