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

Zainu.developer Html , Programming , Tutorial ,

Cara menyisipkan gambar, audio dan video

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.

Ayo kita mulai artikelnya

Menampilkan Gambar

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

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>Deretcode.com</p>
	  <img src="DeretCode.png"/>
    </body>
</html>

Hasilnya,

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

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>Deretcode.com</p>
	  <img src="DeretCode.png" width="55px" height="auto"/>
    </body>
</html>

Kita juga bisa menambahkan atribut alt untuk memberikan alternate teks pada gambar jika gagal di tampilkan. Selain itu, hal ini juga berguna untuk optimasi seo on page .

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>Deretcode.com</p>
	  <img src="DeretCode.png" alt="logo deretcode.com"/>
    </body>
</html>

Hasilnya,

Untuk memaksimalkan gambar yang kita tampilkan, kita juga bisa menambahkan elemen titile.

Fungsinya adalah ketika gambar disorot kursor maka akan muncul informasi tentang gambar tersebut

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <p>Deretcode.com</p>
	  <img src="DeretCode.png" title="logo deretcode.com"/>
    </body>
</html>

Hasilnya,

Memutar Audio

Untuk memutar audio pada halaman web kita bisa menggunakan tag <audio>.

Tag <audio> adalah tag baru dari html5.

Sama seperti tag <img> , <video> juga mewajibkan atribut src dalam penggunaannya. Atribut src ini bisa kita isi dengan url atau directory dari audio yang ingin kita mainkan.

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<audio controls src="audio.ogg"/>
    </body>
</html>

Hasilnya,

Ada beberapa atribut lainnya yang bisa kita gunakan untuk memaksimalkan elemen audio yang kita buat. yaitu,

Atribut	Keterangan	Value
autoplay	Digunakan untuk membuat audio otomatis diputar ketika halaman web di muat	tidak perlu
controls	Digunakan untuk memberikan kontrol bawaan dari browser.	tidak perlu
mute	Digunakan untuk membisukan audio ketika halaman dimuat	tidak perlu
loop	Digunakan agar audio berulang tanpa henti	tidak perlu
preload	Digunakan untuk menentukan kondisi audio ketika memuat halaman	none,mute,metadata
type	Digunakan untuk menentukan type format audio	audio/[format_audio]

Kita juga bisa membuatnya dengan cara lain, yaitu dengan menambahkan elemen source.

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<audio controls />
	    <source src="audio1.mp3"/>
	</audio>
    </body>
</html>

Menampilkan Video

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

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<video controls src="video.ogg"/>
    </body>
</html>

Hasilnya,

Ada beberapa atribut lainnya sebagai pendukung dari elemen video yang bisa kita gunakan yaitu,

Atribut	Keterangan	Value
autoplay	Digunakan untuk membuat video otomatis diputar ketika halaman web di muat	tidak perlu
controls	Digunakan untuk memberikan kontrol bawaan dari browser.	tidak perlu
mute	Digunakan untuk membisukan video ketika halaman dimuat	tidak perlu
loop	Digunakan agar video berulang tanpa henti	tidak perlu
preload	Digunakan untuk menentukan kondisi audio ketika memuat halaman	none,mute,metadata
type	Digunakan untuk menentukan type format audio	audio/[format_audio]
poster	Digunakan untuk membuat tumbnail	tidak perlu
width	Digunakan untuk mengatur lebar video	ukuran/auto
height	Digunakan untuk mengatur tinggi dari video	ukuran/auto
hidden	Atribut ini juga bisa digunakan untuk elemen yang lain karena bersifat umum. Fungsinya adalah untuk menyembunyikan elemen	tidak perlu

Kita juga bisa membuatnya dengan cara lain, yaitu dengan menambahkan elemen source.

Contohnya,

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<video controls />
	    <source src="video.mp3"/>
	</video>
    </body>
</html>

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

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

Menampilkan Gambar

Memutar Audio

Menampilkan Video

Sebelumnya

Selanjutnya

0 Komentar untuk " Tutorial Lengkap Belajar Html # Menyisipkan Gambar, Audio dan Video Di Html"