Belajar Koding html Bagian 7: Menambahkan Elemen Multimedia
.png)
Multimedia
pada HTML adalah berbagai macam media yang dapat disematkan ke dalam halaman
web, seperti gambar, audio, video, animasi, dan grafik.
Contoh
format multimedia
- Format
gambar: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico
- Format
video: MP4, WebM, and OGG
- Format
audio: MP3, WAV, and OGG
Untuk menambahkan elemen multimedia seperti gambar, audio, dan video ke dalam halaman web menggunakan HTML, Anda dapat menggunakan tag-tag khusus yang telah disediakan. Berikut adalah panduan dasar untuk masing-masing elemen:
1. Menambahkan Gambar:
Untuk
menampilkan gambar, gunakan tag <img> dengan atribut src
yang menunjukkan lokasi gambar, serta atribut alt untuk memberikan teks alternatif
jika gambar tidak dapat ditampilkan.
<img src="image.jpg" alt="Deskripsi
Gambar">
Anda
juga dapat mengatur ukuran gambar menggunakan atribut width
dan height.
<img src="image.jpg" alt="Deskripsi
Gambar" width="300" height="200">
2. Menambahkan Audio:
Untuk
menambahkan audio, gunakan tag <audio> dengan atribut controls
agar kontrol pemutar audio ditampilkan. Di dalamnya, gunakan tag <source> untuk menentukan sumber dan tipe file audio.
<audio controls>
<source src="audio.mp3"
type="audio/mpeg">
Browser Anda tidak
mendukung pemutar audio.
</audio>
Pastikan
format audio yang digunakan didukung oleh HTML5, seperti MP3, WAV, atau OGG.
3. Menambahkan Video:
Untuk
menambahkan video, gunakan tag <video> dengan atribut controls
untuk menampilkan kontrol pemutar video. Di dalamnya, gunakan tag <source> untuk menentukan sumber dan tipe file video.
<video controls width="600">
<source src="path/to/video.mp4"
type="video/mp4">
Browser Anda tidak
mendukung pemutar video.
</video>
Format
video yang umum didukung meliputi MP4, WebM, dan OGG.
Contoh Lengkap:
Berikut adalah contoh sederhana halaman HTML yang menyertakan gambar, audio, dan video:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Multimedia di HTML</title>
</head>
<body>
<h1>Contoh
Gambar</h1>
<img src="path/to/image.jpg"
alt="Deskripsi Gambar" width="300">
<h1>Contoh
Audio</h1>
<audio controls>
<source src="path/to/audio.mp3"
type="audio/mpeg">
Browser Anda tidak
mendukung pemutar audio.
</audio>
<h1>Contoh
Video</h1>
<video controls width="600">
<source src="path/to/video.mp4"
type="video/mp4">
Browser Anda tidak
mendukung pemutar video.
</video>
</body>
</html>
 |
| Tampilan Hasil (Output) Menambahkan Elemen Multimedia |
Referensi
0 Response to "Belajar Koding html Bagian 7: Menambahkan Elemen Multimedia "
Post a Comment