Beranda
Coding
Web

Cara Memasukkan Gambar, Audio, Dan Video Di HTML

Materi Web

Format Gambar Pada Halaman Web.

Pernahkan kamu memperhatikan sebuah website yang memuat sebuah gambar di dalamnya? Gambar merupakan salah satu bentuk dari multimedia Gambar memiliki beberapa format yang dapat digunakan dalam halaman web yaitu jpg, png, dan gif.

Untuk menambahkan gambar pada HTML, kamu dapat menggunakan tag img. Tag img merupakan sebuah tag yang bersifat self-contained, yaitu tidak memiliki tag penutup. Tag img memiliki atribut src yang berisi nama file atau URL dari gambar yang akan dilampirkan pada halaman web. Kode program untuk melampirkan gambar yaitu: 
<img src="nama_file" />
Berikut adalah contoh penggunaan tag img. 

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Gambar</title>

</head>

<body>

  <img src="mobil.jpg" />

</body>

</html>

Format Audio pada Halaman Web.


Komponen multimedia lainya adalah audio. Audio sendiri merupakan komponen yang terdiri dari suara tanpa adanya gambar. Tidak seluruh web browser dapat mendukung format audio. Berikut adalah daftar web browser beserta file audio yang didukungnya.

  1. OGG merupakan format audio yang didukung oleh Mozilla Firefox, Opera, dan Google Chrome.

  2. MP3 merupakan format audio yang didukung oleh seluruh web browser.

  3. WAV merupakan format audio yang didukung oleh seluruh web browser kecuali internet exploler.

Untuk menambahkan audio pada sebuah halam web, maka tag yang dibutuhkan sebagai berikut. 

<audio controls>

<source src="nama file" type="audio/mp3">

</audio>

Berikut adalah contoh penerapanya pada kode html 

<html>

  <head>

    <title>Belajar Audio</title>

  </head>

  <body>

    <audio controls>

      <source src="suara binatang.mp3" type="audio/mpeg">

    </audio>

  </body>

</html>

Format Video Pada Halaman Web.


Komponen multimedia yang akan dibahas kali ini adalah video. video merupakan komponen multimedia yang memiliki gambar bergerak dan juga audio. Sama halnya dengan audio, tidak seluruh web browser dapat mendukung format video. Berikut adalah daftar web browser beserta file video yang didukungnya.

  1. OGG merupakan format video yang didukung oleh Mozilla Firefox, Opera, dan Google Chrome.

  2. MP4 merupakan format video yang didukung oleh seluruh web browser.

  3. WebM merupakan format video yang didukung oleh Mozilla Firefox, Opera, dan Google Chrome.


Berikut adalah kode HTMl yang digunakan untuk memasukkan video pada halaman web.

<html>

  <head>

    <title>Belajar Video</title>

  </head>

  <body>

    <video width="320" height="240" controls>

      <source src="HTML5 video.mp4" type="video/mp4">

    </video>

  </body>

</html>

Posting Komentar