search

Menambahkan Gambar dan Media

Gambar dan media lain seperti audio dan video pastinya akan sangat banyak teman-teman temukan pada saat membuka sebuah aplikasi web. Selain untuk membuat sebuah aplikasi lebih menarik, gambar dan media lainnya juga dapat memperjelas informasi yang ingin diberikan. Jika sebelumnya kita hanya membuat beberapa elemen HTML dengan format teks, sekarang waktunya kita berkreasi dengan gambar dan media.

hashtag
Menambahkan Gambar

<!DOCTYPE html>
<html>
<head>
    <title>Halaman Multimedia Sederhana</title>
</head>
<body>

    <img src="logo.png" alt="Logo Situs" width="200" height="100">

</body>
</html>

Kode di atas akan menampilkan sebuah gambar yang ada pada folder yang sama dengan file HTML yang sudah kita buat sebelumnya. Gambar tersebut akan ditampilkan dengan lebar 200 piksel dan height 100 piksel.

circle-info

Teman-teman perlu menambahkan sebuah file gambar pada folder yang sama, lalu pastikan nilai dari properti "src" sudah sesuai dengan nama file gambar tersebut.

  • src adalah atribut yang berisi URL gambar.

  • alt adalah teks alternatif yang akan muncul jika gambar tidak dapat ditampilkan.

  • width dan height adalah atribut yang mengatur lebar dan tinggi gambar.

hashtag
Menambahkan Video

Tambahkan video HTML dengan tag <video>. Di sini, kita akan menggunakan video dengan sumber video internal (di dalam folder yang sama).

  • <video> adalah tag pembungkus video.

  • controls menambahkan kontrol video seperti tombol play, pause, dan volume.

  • <source> digunakan untuk menentukan sumber video dan tipe file yang didukung.

  • Teks keterangan bahwa browser tidak mendukun tag video akan ditampilkan jika aplikasi web dijalankan pada browser versi lama (yang belum mendukung video).

Menambahkan Audio

  • <audio> adalah tag pembungkus audio.

  • controls menambahkan kontrol audio seperti tombol play, pause, dan volume.

  • <source> digunakan untuk menentukan sumber audio dan tipe file yang didukung.

hashtag
Referensi

https://www.w3schools.com/html/html_images.asparrow-up-right https://www.w3schools.com/tags/tag_video.asparrow-up-right https://www.w3schools.com/html/html5_audio.asparrow-up-right

PreviousMembuat List dan Link pada HTMLNextMembuat Form pada HTML

Last updated