Memasukkan Aset Visual

Melalui kelas ini, kamu diajak untuk:

• Mengidentifikasi langkah-langkah memasukkan gambar.
• Mengenal atribut-atribut dalam memasukkan gambar.

Memasukkan Gambar

Memasukkan gambar di file HTML sejatinya cukup sederhana. Kamu hanya perlu menggunakan tag elemen <img> dengan atribut src=”(url)”

<img src="gambar.jpg"></img>

Atribut Width dan Height

Kita juga dapat mengatur ukuran gambar dengan menambahkan atribut-atribut lainnya dengan atribut khusus yakni width untuk lebar, dan height untuk tinggi. Contoh penerapannya bisa dilihat dalam kode di bawah:

<img src="gambar.jpg" width="200px" height="150px"></img>

Menempatkan ukuran width dan height diperlukan untuk menghindari ukuran dan peletakan yang tidak sesuai. Maka, pengaturan width dan height harus sesuai atau bahkan sama persis dengan ukuran gambar.

Atribut Style

Mengatur ukuran gambar juga bisa menggunakan atribut style yang disematkan pada class.

<img src="gambar.jpg" style="width: 200px; height: 150px"></img>

Alternatif lain dari format ini adalah dengan menempatkan gambar di bagian <style>, bukan di tag <img>.

<div style="background-image: url ('gambar.jpg'); width: 200px; height: 200px">
    
</div>

Video

HTML juga memiliki tag khusus untuk menautkan file video dengan tag <p>. Untuk memutarnya, HTML juga menyediakan atribut khusus seperti controls dan autoplay. controls akan membuat HTML menyediakan fitur play dan pause. Sementara autoplay akan membuat HTML otomatis memutar video yang ada.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>