#HTML

Belajar HTML Dasar #7 - Image, Audio dan Video

Fahras Nur Hidayat
blog thumbnails

Di artikel kali ini kita akan membahas konten yang cukup penting.

Ada 3 materi yang akan kita bahas.

Apa aja ya, langsung aja kita masuk kematerinya.

Image

Jika kita ingin memasukan image ke Website kita tag yang kita butuhkan adalah tag <img>.

Tag image juga butuh atribut seperti tag <a>, tapi bedanya atribut yang dibutuhkan tag ini adalah src bisa disebut source(sumber).

File gambar yang bisa dimasukan bisa berupa JPG, PNG, SVG dan yang lainnya selama masih berwujud sebuah gambar.

Pada tag img ini dia bisa menggunakan tag pembuka dan tag penutup, dan bisa juga menggunakan single tag atau tag yang jomblo.

Cara penggunaan pastikan file gambar atau foto berada di folder yang sama dengan file HTML, dari pada bingung simak source code dibahwah ini :

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar membuat Image</title>
      </head>
      <body>
        <header>
          Image
        </header>
        <img src="image.jpg" width="300px" height="auto">
      </body>
    </html>
  

Hasil dari kode diatas :

Image Burung Hantu

Sangat mudahkan? proses pembuatan foto dan gambar, karena hanya membutuhkan file foto yang satu folder dengan file HTML.

Jika ingin membuat agar foto atau gambar itu menjadi hyperlink, cukuplah apit tag <img> tersebut dengan menggunakan tag <a>, misalnya seperti ini :

  
    <a href="https://kodingnesia.com/">
      <img src="image.jpg">
    </a>
  

Semoga sampai sini paham pengenalan tentang tag img mari kita bahas topik selanjutnya.

Audio

Selain menampilkan sebuah gambar HTML juga bisa memasang file Audio langsung kedalam website.

Audio adalah tag baru pada HTML, Tag ini ditulis seperti ini <audio>. Sama seperti image tag audio ini memerlukan atribut src.

Contoh kodenya seperti ini :

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar membuat Image</title>
      </head>
      <body>
        <header>
          Audio
        </header>
        <audio src="audio.mp3"></audio>
      </body>
    </html>
  

Contoh diatas merupakan penggunaan sederhana tag <audio>

Ada beberapa format audio yang bisa dimasukan berupa mp3, ogg dan wav.

Selain memasukan atribut src ada atribut lainya yang perlu digunakan yaitu atribut type, berikut ini pasangan format dan type atributnya.

Format Type
MP3 audio/mpeg
WAV audio/wav
OGG audio/ogg

Video

HTML memiliki tag khusus yang difungsikan untuk memasang file video ke dalam website.

Tag itu bernama <video> dan sama seperti tag untuk memasang gambar dan audio, kita membutuhkan atribut src yang fungsinya untuk menentukan dimana file video itu berada.

Tag video juga memerlukan atribut type seperti audio, berikut ini pasangan type dan formatnya.

Format Type
MP4 video/mp4
WebM video/webm
OGG video/ogg

Nah jadi kesimpulannya jika memerlukan gambar mengunakan tag <img>, kalau memerlukan audio mengunakan tag <audio>, dan jika memerlukan video menggunakan tag <video>.

Mudah bukan? semoga bermaanfaat sampai bertemu di Artikel lainya.