DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

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

advertisement
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,

Contoh menampilkan gambar dihtml
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,
Membuat alt pada gambar
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,
Membuat titile pada gambar

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,
Cara memutar audio di html

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 muattidak 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,
Memutar video di html


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 muattidak 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.
advertisement



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

Silahkan berkomentar dengan baik dan bijak!