Link, Gambar dan Multimedia
Link
Untuk membuat link dari satu halaman ke halaman lain, gunakan hyperlink dengan tag <a>
Gambar
Gunakan tag <img/> untuk menampilkan file gambar. Atribut utama <img/> adalah src dan alt. src diisi dengan source file gambar (bisa berupa url maupun path direktori file), sementara alt adalah alternatif teks yang ditampilkan jika source gambar tidak berhasil dimuat. Sebenarnya ada atribut lain width dan height juga, tapi saya pribadi lebih suka memasang width dan height di dalam style, untuk mencegah atribut width dan height gambar sudah dipasang sebagai atribut gambar namun ternyata tidak berlaku karena di-override oleh css.
Div digunakan untuk mengelompokkan semua gambar dalam 1 group element.
Tinggi gambar dibuat responsif dengan ukuran vw
Float digunakan untuk membuat gambar menjadi floating (defaultnya adalah block) sehingga bisa ditampilkan secara berdampingan.
Border digunakan agar ada jarak antara 2 gambar.
Lebar sebenarnya dibuat 50%, namun karena ada border 1px di masing-masing gambar maka pengaturan lebar menjadi 50% - (2gambar x 1 pixel). CSS menyediakan penghitungan seperti ini melalui calc. sehingga width : calc(50% - 2px).
File html di atas jika dibuka di browser akan tampil seperti gambar di bawah ini. Jika browser diubah-ubah lebar dan tinggi-nya, tampilan gambar akan responsif mengikuti perubahan lebar dan tinggi browser.
File format gambar yang didukung oleh html meliputi :
Multimedia
Multimedia di web adalah suara, musik, video, film, dan animasi. Multimedia hadir dalam berbagai format. Namun tidak semua didukung oleh HTML, hanya sebagian kecil format multimedia yang didukung oleh broser.
Audio
HTML hanya mendukung 3 format audio, yaitu: MP3, WAV dan Ogg. Selain itu, HTML juga mendukung file MP4, yang sebenarnya adalah format untuk video, namun bisa juga digunakan untuk audio.
Untuk menampilkan audio, gunakan element <audio>
Video
HTML mendukung tiga format file multimedia, meliputi .ogg, .webm dan .mp4
Untuk menampilkan video, gunakan element <video>
Tampilan di browser tampak seperti gambar saja, ini dikarenakan di kode di atas tidak mengaktifkan controls. Tambahkan atribut controls seperti kode berikut :
Sekarang video bisa diputar, di-pause, diatur volumenya, fullscreen dan sebagianya. Kita bisa menambahkan autoplay agar ketika halaman dibuka, video langsung play. Namun browser keluarga chromimum (chromium, chrome, safari, microsoft edge) tidak mendukung autoplay. Browser keluarga chromium hanya mendukung autoplay jika dikombinasikan dengan atribut muted.
Last updated