Mode Malam
| Mode Tampilan
Penulis : admin

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

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

advertisement

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

advertisement

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

advertisement

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.

Tags: #html #audio #img #video
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more