Cara Menambahkan Gambar, Audio dan Video di HTML

Di tutorial sebelumnya kita telah belajar Membuat Blog Responsive menggunakan HTML dan CSS. Di tutorial kali ini kita akan belajar cara menambahkan gambar, audio dan video ke HTML. Ok, langsung saja ke tutorialnya.

Langkah pertama, kalian buat folder kosong di device kalian. Setelah itu, kalian kasih nama terserah mau dinamain apa atau sama dengan punya saya juga gapapa.

Selanjutnya kalian masukan file gambar, audio dan video yang ingin kalian tambahkan di HTML ke folder yang sudah barusaja dibuat. Usahakan kalian rename dulu nama filenya menjadi lebih pendek supaya nanti ketika dipanggil di HTML namanya tidak terlalu panjang.

Selanjutnya, kalian buka Visual Studio Code-nya dan pilih menu file-open folder dan select folder yang sudah dibuat. Setelah itu kalian buat file HTML baru dengan cara klik New File tulis nama file HTMLnya sebagai contoh saya pakai index.html, setelah itu ikuti langkah-langkah berikut.

1. Menambahkan Gambar di HTML

Jika file gambar berada dalam satu folder maka kodenya seperti dibawah ini,

    <img src="img2.jpg" alt="gambar eror">

Pada attribute src kita isi dengan nama file gambar punya kalian, misalnya nama file gambarnya img.jpg, maka di dalam attribute src kita isi dengan src="img.jpg" . Selanjutnya attribute alt, yaitu berfungsi untuk menampilkan alternatif teks apabila gambar gagal dimuat.

Jika berhasil dalam memanggil gambar menggunakan attribute src, maka hasilnya akan seperi ini

Jika gagal maka hasilnya akan seperti ini

Cara kedua memasukan gambar di HTML adalah dengan menggunakan URL dari gambar, cara ini bisa dilakukan apabila file gambar tidak ada dalam perangkat. Untuk penulisan kode HTMLnya tidak ada yang berubah, hanya saja pada attribute src kita isi dengan alamat URL gambar yang akan kita masukan ke HTML. Sebagai contoh saya akan memasukan link https://bit.ly/2NpF2NP ke dalam attribute src maka kode HTMLnya akan seperti ini

    <img src="https://bit.ly/2NpF2NP" alt="gambar eror">

2. Menambahkan Audio di HTML

File audio yang didukung untuk dimasukkan ke html yaitu mp3, ogg, wav.

    <audio controls>
    	<source src="arcade.mp3">
    </audio>

Kalian juga bisa menambahkan attribute untuk tag audio selain src, yaitu :

1. autoplay digunakan untuk membuat audio diputar secara otomatis ketika audio sudah siap dimuat

2. controls berfungsi untuk mengaktifkan tombol play, pause dan pengatur suara.

3. loop berfungsi untuk mengaktifkan pemutaran otomatis secara berkala

4. muted berfungsi untuk menghilangkan saura audio

3. Menambahkan Video di HTML

Untuk file video yang didukung HTML hanya mp4,webm dan ogg. Untuk penulisan kode jika file dalam satu folder

    <video controls>
    	<source src="video.mp4" >
    </video>

Menambahkan Video dari Youtube ke HTML

Untuk menambahkan video dari Youtube ke HTML sangatlah mudah kalian tinggal klik video yang ingin kalian tambahkan ke HTML, selanjutnya klik tombol SHARE/BAGIKAN, selanjutnya klik Embed/Sematkan setelah itu kalian tinggal salin aja kode HTMLnya dan tempelkan ke dalam text editornya. Sekian tutorial dari saya apabila ada yang ingin ditanyakan silahkan tanyakan melalui kolom komentar.

    <iframe width="560" height="315" src="https://www.youtube.com/embed/4LMwKwcMdIg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>