HTML5 Insert Media

Content is king.

Itulah ungkapan fenomenal di kalangan para content creator. Untuk membuat konten yang “kaya” dibutuhkan banyak informasi yang harus ditampilkan.

Informasi itu ada banyak jenisnya, misalnya: video, audio, gambar atau animasi.

Di HTML sendiri semua media diatas dapat dimasukkan dengan menggunakan element HTML tertentu.

Menambahkan Gambar

Pertama adalah memasukkan gambar di HTML. Ini sangat sederhana dan sangat penting.

Konten kalau hanya tulisan saja tanpa illustrasi tentu membosankan (kecuali konten pemrograman ya).

Untuk meginsertkan image kita hanya butuh tag <img src="url_gambar.jpg"/>. Contohnya:

<img src="https://puntadewa.my.id/wp-content/uploads/2020/02/cara-membuat-formulir-di-html.jpg"/>

Kode diatas akan menghasilkan gambar:

contoh gambar yang dimasukkan

URL atau alamat gambar diatas adalah https://puntadewa.my.id/wp-content/uploads/2020/02/cara-membuat-formulir-di-html.jpg.

Ingat! URL gambar harus berakhir dengan ekstensi gambar tersebut. Contoh diatas adalah gambar berformat .JPG.

JIka kamu menggunakan gambar .PNG maka URL harus berakhiran dengan .PNG.

Format gambar yang disupport adalah: .JPG, .PNG, .WEBP, .GIF, .JPEG, dll.

Contoh insert animasi GIF:

Contoh animasi GIF

Menambahkan Video

Untuk menambahkan video kita menggunakan kode:

<video width="400" height="200" controls>
  <source src="video.mp4" type="video/mp4">
</video>

video.mp4 adalah URL video, sama seperti gambar. URL harus berakhir dengan ekstensi video tersebut. Jika ingin menambah style, kita butuh css.

Format umum video adalah .MP4, .WEBM, dan .OGG.

Contoh Video

Menambahkan Audio

Untuk menambahkan lagu / musik atau audio, gunakan kode:

<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
</audio>

Ganti lagu.mp3 dengan URL musik kamu. Contohnya:

Contoh Audio

Format audio yang biasanya digunakan adalah .MP3, .WAV dan .OGG

Menambahkan Video Youtube

Saya lebih menyarankan untuk mengupload video di youtube baru dimasukkan ke konten, daripada langsung upload ke website.

Kenapa?

Ya supaya lebih hemat disk space.

Apalagi sekarang jamannya video marketing. Jadi, gak rugi ketika kamu uplaod di Youtube. Karena, sekaligus kamu promosi tentang konten yang kamu buat.

Contohnya saya embed video Youtube keren dari Apple berikut.

Berikut cara memasukkan video dari Youtube ke website:

1. Buka video Youtube yang diinginkan, kemudian klik tombol share

2. Setelah itu akan muncul seperti gambar dibawah, dan klik embed

3. Copy kode HTML dari Youtube ke website kamu.

Menambahkan Audio Soundcloud

Kalau Youtube untuk Video, kalau untuk audio biasa digunakan soundcloud.com.

Misalnya:

Cara memasukkan musik dari soundcloud ke web adalah:

1. Buka track yang diinginkan, kemudian klik tombol share

2. Kemudian, klik tab embed dan pilih tampilan yang kamu inginkan. Copy kode HTML tersebut ke website kamu.

Itu saja tutorial HTML yang bisa saya tulis. Jika memang masih belum paham, tanya ya di kolom komentar.

Leave a Comment