Tutorial Lengkap Belajar Html # Menyisipkan Gambar, Audio dan Video Di Html

Pada artikel sebelumnya kita telah belajar cara membuat list atau daftar di html.
Pada artikel kali ini kita akan belajar bagaimana menyisipkan sebuah media berupa gambar, audio dan video.
Hal ini berguna ketika kita ingin memperkaya isi dari halaman web yang kita buat.

Oke kita langsung saja ke tutorialnya,

Menampilkan Gambar

Untuk menampilkan gambar di halaman web kita bisa menggunakan tag khusus yang sudah di sediakan html yaitu <img> dengan attribute src berupa url atau lokasi gambar yang ingin ditampilkan.

Contohnya,

Deretcode

Output :

Kita bisa mengatur ukuran gambar yang ingin kita tampilkan dengan menambahkan attribute width atau height.

Contohnya,

Deretcode

Output :

Kita juga bisa menambahkan attribuet alt untuk memberikan alternate teks pada gambar jika gagal di tampilkan.
Hal ini juga penting ketika kita ingin membuat halamn yang seo friendly karena termasuk dalam bagian optimasi on-page.

Contohnya,

Deretcode

Output :

Jika kalian ingin menghandle error ketika image gagal di tampilkan karena source image tidak di temukan, kalian bisa menggunakan attribute javascript onerror untuk menset ulang attribute src dengan gambar yang lain,

Contohnya,

Deretcode

Output :

Memutar Audio

Untuk memutar sebuah audio file pada halaman web, kita bisa menggunakan tag <audio>.
Tag <audio> termasuk tag baru dari html5.

Berikut contoh implementasi tag audio,

Deretcode

Output :

Jika kita ingin membuatnya dalam bentuk list audio, kita bisa menggunakan element source yang di letakan di dalam element audio.

Contoh implementasinya,

Deretcode

Output :

Ada beberapa attribute yang bisa kita gunakan untuk mengatur element audio yang kita buat. yaitu,

Attribute	Keterangan	Value
autoplay	Digunakan untuk membuat audio otomatis diputar ketika halaman web di muat	tidak perlu
controls	Digunakan untuk memberikan fungsi control bawaan dari browser	tidak perlu
mute	Digunakan untuk membisukan audio	tidak perlu
loop	Digunakan untuk mengulang audio	tidak perlu
preload	Digunakan untuk menentukan kondisi audio ketika halaman dimuat pertama kali	none,mute,metadata
type	Digunakan untuk menentukan format audio	audio/[format_audio]

Contoh implementasinya,

Deretcode

Output :

Menampilkan Video

Sama seperti audio, html5 juga sudah menyediakan tag khusus untuk memutar video yaitu <video> dengan atribut src.

Contohnya,

Deretcode

Output :

Sama seperti element audio, jika kita ingin membuatnya dalam list, kita bisa menggunakan element source yang di letakan di dalam element video.

Contohnya,

Deretcode

Output :

Element video memiliki beberapa attribute yang bisa kita atur untuk menyesuaikan penyajian video yang kita inginkan,yaitu,

Attribute	Keterangan	Value
autoplay	Digunakan untuk membuat audio otomatis diputar ketika halaman web di muat	tidak perlu
controls	Digunakan untuk memberikan fungsi control bawaan dari browser	tidak perlu
mute	Digunakan untuk membisukan audio	tidak perlu
loop	Digunakan untuk mengulang audio	tidak perlu
preload	Digunakan untuk menentukan kondisi audio ketika halaman dimuat pertama kali	none,mute,metadata
type	Digunakan untuk menentukan format audio	video/[format_video]
poster	Digunakan untuk mengaktifkan tumbnail dari video	tidak perlu
width	Digunakan untuk mengatur lebar dari video	[ukuran]
height	Digunakan untuk mengatur tinggi dari video	[ukuran]
hidden	Digunakan untuk menyembunykan video	tidak perlu

Sampai disini dulu tutorial menyisipkan audio, image dan video di html.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.