Kursus IT Dasar HTML 014_Multimedia dan konten tertanam

Multimedia dan konten tertanam Penggunaan tag audio dan video dalam HTML5 Aplikasi konten tertanam, seperti peta, halaman web tertanam, dll.

Gambar

Gambar adalah jenis media yang sangat penting yang dapat meningkatkan pengalaman pengguna dan membuat transmisi informasi lebih intuitif dan hidup. Dalam HTML, kita menggunakan tag <img> untuk menyisipkan gambar. Tag <img> adalah tag kosong yang menutup sendiri, artinya tidak memiliki tag penutup. Alamat gambar ditentukan melalui atribut src (source) dari tag <img>.

Contoh:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Deskripsi gambar">

Efek:

Elemen gambar juga dapat mencakup atribut berikut:

• width: Menentukan lebar gambar.
• height: Menentukan tinggi gambar.
• align: Menentukan perataan gambar.
• border: Menentukan batas gambar.
• hspace: Menentukan jarak horizontal antara gambar dan elemen sekitarnya.
• vspace: Menentukan jarak vertikal antara gambar dan elemen sekitarnya.
• ismap: Menentukan apakah gambar adalah gambar peta.

Mengatur ukuran gambar

Kita dapat mengatur lebar dan tinggi gambar melalui atribut width dan height dari tag <img>. Nilai dari kedua atribut ini dapat berupa nilai piksel spesifik atau persentase.

Contoh:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Deskripsi gambar" width="100" height="100" align="center" border="1">

Efek:

Mengatur teks alternatif

Teks alternatif (alt text) digunakan untuk ditampilkan ketika gambar tidak dapat dimuat. Teks ini juga digunakan oleh pembaca layar untuk membacakan konten gambar dan membantu orang dengan gangguan penglihatan memahami gambar. Kita mengatur teks alternatif melalui atribut alt dari tag <img>.

Contoh:

1
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="Teks ini ditampilkan ketika gambar tidak ditemukan">

Efek:

Tautan gambar

Gambar juga dapat digunakan sebagai hyperlink. Kita hanya perlu menempatkan tag <img> di dalam tag <a> untuk membuat tautan gambar.

Contoh:

1
<a href="https://www.zhaojian.net/">
2
  <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="Deskripsi gambar" width="100" height="100" align="center" border="5">
3
</a>

Efek:

[!Ringkasan]

• Atribut width dan height mengatur lebar dan tinggi gambar. Nilai dari kedua atribut ini dapat berupa nilai piksel spesifik atau persentase.
• Jika baik lebar maupun tinggi gambar diatur, dan rasio dari kedua nilai ini tidak konsisten dengan rasio gambar itu sendiri, gambar mungkin diregangkan atau dikompresi, menyebabkan distorsi.
• Jika tautan gambar memiliki batas, batas tersebut secara default memiliki warna yang sama dengan hyperlink

Video

Elemen video HTML digunakan untuk menanamkan video di halaman web. Tag dari elemen video adalah <video>.

Contoh:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Efek:

Elemen video juga dapat mencakup atribut berikut:

• width: Menentukan lebar video.
• height: Menentukan tinggi video.
• poster: Menentukan frame poster video.
• autoplay: Menentukan apakah video diputar secara otomatis saat dimuat.
• loop: Menentukan apakah video diputar berulang.
• muted: Menentukan apakah video dibisukan.
• preload: Menentukan apakah video dimuat terlebih dahulu saat dimuat.

Contoh:

1
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto">
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.ogg" type="video/ogg">
4
</video>

Contoh ini berisi elemen video. URL file video diatur ke mp4.mp4, lebar diatur ke 400 piksel, tinggi ke 300 piksel, frame poster ke zhaojian-avatar.png, autoplay ke true, loop ke true, muted ke true, dan preload ke auto.

Efek:

Solusi video HTML yang sangat komprehensif (tidak disarankan)

Contoh berikut menggunakan 4 format video yang berbeda. Elemen <video> HTML 5 akan mencoba memutar video dalam salah satu format mp4, ogg, atau webm. Jika semuanya gagal, akan kembali ke elemen <embed>.

Contoh:

1
<video width="320" height="240" controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  <object data="video.mp4" width="320" height="240">
6
    <embed src="video.swf" width="320" height="240">
7
  </object>
8
</video>

[!Ringkasan]

• Elemen <source> menyediakan opsi cadangan. Jika browser tidak mendukung format tersebut, browser akan mencoba memutar file video yang ditentukan dalam elemen <source> kedua.

Audio

Elemen <audio> dalam HTML digunakan untuk menanamkan konten audio di halaman web.

Contoh:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls>
2
</audio>

Efek:

Elemen audio juga dapat mencakup atribut berikut:

• controls: Menentukan apakah kontrol audio ditampilkan. Nilai default adalah true.
• autoplay: Menentukan apakah audio diputar secara otomatis saat dimuat.
• loop: Menentukan apakah audio diputar berulang.
• muted: Menentukan apakah audio dibisukan.
• preload: Menentukan apakah audio dimuat terlebih dahulu saat dimuat.

Contoh:

1
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto">
2
</audio>

Contoh ini berisi elemen <audio>. URL file audio diatur ke mp3.mp3, kontrol diatur ke true, autoplay ke true, loop ke true, muted ke true, dan preload ke auto.

Efek:

Elemen embed

Elemen embed adalah elemen yang diperkenalkan dalam HTML 4.01. Elemen ini dapat menanamkan semua jenis sumber daya, termasuk video, audio, gambar, Flash, dll. Elemen embed memerlukan browser untuk mendukung plugin tertentu agar dapat ditampilkan.

Contoh:

1
<embed src="URL sumber daya" type="Jenis sumber daya">

[!Ringkasan]

• HTML5 memperkenalkan elemen <video> dan <audio> untuk menggantikan elemen <embed>.
• Elemen embed dapat menanamkan semua jenis sumber daya, sedangkan elemen <video> dan <audio> hanya dapat menanamkan sumber daya video dan audio.
• Elemen embed memerlukan browser untuk mendukung plugin tertentu agar dapat ditampilkan, sedangkan elemen <video> dan <audio> tidak memerlukan.
• Elemen <embed> masih dapat digunakan, tetapi tidak lagi disarankan.

Elemen object

Elemen object adalah elemen yang diperkenalkan dalam HTML 4.01. Elemen ini dapat menanamkan semua jenis sumber daya, termasuk video, audio, gambar, Flash, dll. Elemen object menggunakan elemen <param> untuk menentukan properti sumber daya, seperti lebar, tinggi, warna latar belakang, dll. dari sumber daya.

Contoh:

1
<object data="URL sumber daya" type="Jenis sumber daya">
2
  <param name="Nama atribut" value="Nilai atribut">
3
  ...
4
</object>

Perbedaan spesifik antara elemen object dan embed:

[!Ringkasan]

• Jika Anda perlu menanamkan semua jenis sumber daya dan browser mendukung plugin tertentu, Anda dapat menggunakan elemen object.
• Jika Anda hanya perlu menanamkan jenis sumber daya tertentu dan tidak memerlukan browser untuk mendukung plugin tertentu, Anda dapat menggunakan elemen embed.
• Jika Anda hanya perlu menanamkan sumber daya video atau audio, disarankan untuk menggunakan elemen <video> atau <audio>.
• Elemen <video> dan <audio> tidak memerlukan browser untuk mendukung plugin tertentu dan menyediakan fungsi yang lebih kaya.

Frame

Elemen <iframe> adalah tag HTML yang digunakan untuk menanamkan dokumen di dalam dokumen lain. Elemen ini memungkinkan penanaman dokumen ke dalam dokumen lain dan menampilkan konten dokumen yang tertanam di dalamnya. Ini biasanya digunakan untuk menanamkan halaman web lain, video, peta, dll.

Elemen <iframe> memiliki atribut berikut:

• Atribut src mendefinisikan URL halaman web atau dokumen yang akan ditanamkan.
• Atribut width mendefinisikan lebar elemen <iframe>.
• Atribut height mendefinisikan tinggi elemen <iframe>.
• Atribut frameborder mendefinisikan apakah batas elemen <iframe> terlihat.
• Atribut border mendefinisikan lebar batas elemen <iframe>.
• Atribut framespacing mendefinisikan jarak antara elemen <iframe> dan konten sekitarnya.
• Atribut marginwidth mendefinisikan margin kiri dan kanan elemen <iframe>.
• Atribut marginheight mendefinisikan margin atas dan bawah elemen <iframe>.
• Atribut scrolling mendefinisikan apakah elemen <iframe> mengizinkan pengguliran.
• Atribut name mendefinisikan nama elemen <iframe>.
• Atribut id mendefinisikan ID elemen <iframe>.
• Atribut class mendefinisikan kelas elemen <iframe>.

Contoh:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <title>Elemen iframe HTML</title>
5
</head>
6
<body>
7
  <iframe src="https://www.zhaojian.net">
8
    <p>Ini adalah iframe yang menampilkan konten situs web zhaojian.net.</p>
9
  </iframe>
10
</body>
11
</html>

Efek: