Cara Menambahkan Gambar dan Video Dengan HTML

Gambar dan Video adalah salah satu elemen yang penting dalam mempercantik website Anda. Tentunya oleh karena itu dua hal penting ini tidak boleh kelewat dalam sesi pembelajaran HTML Anda.

Setelah sebelumnya kita mempelajari tiga bagian penting pada HTML maka kali ini kita melanjutkan tutorial cara menambahkan gambar dn vidio dengan tag HTML

Nah, dalam merangkumnya. Di sini kami akan sekaligus memperkenalkan kepada Anda bagaimana cara menyematkan gambar dan video pada website yang sedang Anda bangun tersebut, berikut adalah cara-caranya:

A.     Cara menambahkan gambar

Website tanpa gambar adalah sesuatu yang membosankan. Untuk itu Anda wajib mengetahui bagaimana cara menyematkan gambar ke dalam website Anda dengan menggunakan HTML. Cara tersebut sangatlah mudah, yang harus Anda lakukan adalah menggunakan tag <img>. Selanjutnya jangan lupakan juga, bahwa tag tersebut tidak dapet berdiri sendiri karena tag itu memiliki atribut wajib, yakni src.

Img = Image atau Gambar dalam Bahasa Indonesia.

Src  = Source atau Sumber dalam Bahasa Indonesia.

Dua komponen ini bila disematkan dalam line code Anda adalah seperti ini:

<img src=“path/to/gambar.jpg“ />

Nah, ada yang harus Anda perhatikan dengan source di sini. Anda biasanya ngoding untuk membuat suatu website itu wajib di dalam satu folder yang sama. Oleh karena itu Anda dapat langsung menuliskan nama file nya dalam suatu folder yang sama tersebut.

Contohnya adalah seperti ini :

1. Foto yang akan disematkan adalah “prewed.png”, sumber code saya berada di “Home Gloya”. Maka dalam source nya dituliskan seperti ini:

<img src="prewed.png">

2. Lalu tampilannya akan menjadi seperti ini:

Nah lantas bagaimana dengan gamber yang ternyata sumbernya tidak ada di dalam folder yang dimiliki. Tentu dapat menggunakan src juga namun yang diisi adalah link dari gambar tersebut. Sebagai contoh:

Saya akan mengambil gambar dari sini:

https://backend.gloya.id/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZmc9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--259eea811aaf946c99ececcdcff1250ef86050b6/Founder%2001.jpg

Maka di dalam code nya saya tuliskan:

<img src="https://backend.gloya.id/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBZmc9IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--259eea811aaf946c99ececcdcff1250ef86050b6/Founder%2001.jpg">

Sehingga hasilnya akan menjadi seperti ini:

Sama saja dan cukup sederhana bukan?

B.     Cara menambahkan Video

Selanjutnya adalah cara bagaimana Anda menambahkan video. Sebenarnya sama saja dengan dengan gambar, tag video memerlukan atribut src sebagai pendukung wajib nya agar dia tahu dari mana sumber video tersebut diambil. Hanya saja, memang untuk video sendiri terdapat kerumitan tersendiri yang akan kami bahas pada tutorial yang lain.

Pada tutorial ini Anda hanya akan belajar menambahkannya saja dengan cara termudah yakni seperti Anda menambahkan gambar yakni semudah menggunakan tag <img> yakni dengan:

<video>
<source src="path/to/video"></video>

Agak sedikit berbeda dengan <img> yang tidak perlu ditutup dengan </img>. Tag video perlu penutup terlebih dahulu yakni </video>.

Nah itu dia tadi, dua cara bagaimana menyematkan gambar dan video ke dalam website Anda secara mudah dengan menggunakan HTML. Ikuti tutorial kami selalu ya! Sampai jumpa pada tutorial lanjutan lainnya.