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>
0 Komentar untuk " Tutorial Lengkap Belajar Html # Menyisipkan Gambar, Audio dan Video Di Html"
Silahkan berkomentar dengan baik dan bijak!