New BAB IV

BAB IV
MULTIMEDIA PADA HTML
CAPAIAN PEMBELAJARAN
1. Capaian Pembelajaran Umum :
Mahasiswa dapat mengetahui dan memahami bagaimana cara menambahkan elemen
multimedia berupa gambar, audio dan video pada dokumen HTML.
2. Capaian Pembelajaran Khusus :
1. Mahasiswa dapat menjelaskan cara menambahkan gambar pada halaman web.
2. Mahasiswa dapat menjelaskan cara menambahkan audio pada halaman web.
3. Mahasiswa dapat menjelaskan cara menambahkan video pada halaman web.
A. PENDAHULUAN/DESKRIPSI SINGKAT
Pada bab ini dijelaskan bagaimana cara menambahkan elemen multimedia berupa
gambar, audio dan video pada halaman web menggunakan skrip HTML.
B. POKOK-POKOK ISI.
4.1 Menampilkan Gambar pada HTML
Gambar akan membuat tampilan website terlihat lebih menarik. Karena otak kita lebih
mudah menyerap informasi dengan visual dibandingkan hanya teks saja. Website tanpa
gambar akan terasa sangat membosankan, karena itu gambar sangatlah penting dalam suatu
halaman web. Untuk menampilkan gambar digunakan tag <img> dengan atribut src.
Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag
<img> harus ditutup dengan menambahkan garis miring.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menampilkan Gambar</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Gambar dibawah ini merupakan foto pantai parangtritis dengan pemandangan
bukit karang dan laut lepas</p>
<p>
<img src="gambar/pantai.jpg" />
</p>
</body>
</html>
Gambar 4.1 Tampilan gambar pada HTML
Jika gambarnya berada di internet atau website lain, maka kita harus menuliskan
alamat URL lengkap dari gambar tersebut. Pada tag <img> bisa kita tambahkan atribut alt
yang berfungsi untuk teks alternatif pada gambar apabila gambar tidak ditemukan.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menampilkan Gambar</title>
</head>
<body>
<h1>Menampilkan Gambar dari website lain di HTML</h1>
<p>Gambar dibawah ini merupakan foto pantai parangtritis yang diambil dari
alamat website lain
</p>
<p>
<img src="https://cdn.travelspromo.com/wp-
content/uploads/2019/07/Menyusuri-keindahan-panorama-Pantai-Parangtritis-
Bantul-semilir-angin-makin-terasa-di-atas-kereta-kuda-Calvin-Lee-
e1565249764627-640x480.jpg" alt="Foto Pantai parangtritis" />
</p>
</body>
</html>
Gambar 4.2 Tampilan gambar dari website lain
4.2 Atribut Width Dan Height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan
tinggi dari gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Atribut width dan hight</title>
</head>
<body>
<h1>Menampilkan Gambar dengan Atribut Width dan Height</h1>
<p>Gambar dibawah ini merupakan foto pantai parangtritis dengan ukuran lebar dan
tinggi yang berbeda</p>
<p>
<img src="gambar/pantai.jpg" width="400" height="250" />
</p>
</body>
</html>
Gambar 4.3 Tampilan gambar dengan atribut width dan height
4.3 Atribut style

Atribut style merupakan atribut untuk menambahkan style CSS inline pada sebuah
elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek
tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Atribut Style Gambar di HTML</title>
</head>
<body>
<h2>Style Gambar di HTML</h2>
<p>Gambar dibawah ini merupakan foto pantai parangtritis dengan style yang
berbeda</p>
<p>
<img src="gambar/pantai.jpg" style="width: 200px;border: 3px solid darkorange;"
/>
<img src="gambar/pantai.jpg" style="width: 200px;border-radius: 20px;" />
<img src="gambar/pantai.jpg" style="width: 120px;height: 120px;border-radius:
100%;" />
</p>
</body>
</html>
Gambar 4.4 Tampilan gambar dengan atribut style
4.4 Membuat Gambar Background

Gambar bisa juga ditampilkan sebagai background halaman website, kita bisa
menggunakan CSS inline dengan atribut style background-image lalu diisi dengan URL dari
gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar sebagai BackgroundContoh Gambar di HTML</title>
</head>
<body style="background-image: url(gambar/pantai.jpg);">
<h2 style="color:white;">Halaman Web dengan Background Gambar</h2>
<p style="color:white;">Halaman ini menggunakan gambar pantai parangtritis
sebagai background</p>
</body>
</html
Gambar 4.5 Tampilan halaman web dengan background gambar
4.5 Tag Tambahan untuk Gambar di HTML

Pada HTML versi 5, ada beberapa tag tambahan yang bisa digunakan untuk membantu
tag <img>, diantaranya:
1. Tag <figure>, untuk membungkus gambar dan teks caption-nya. Teks caption bisa
dibuat dengan tag <figcaption>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar dengan Tag Figure</title>
</head>
<body>
<h2>Menampilkan Gambar dengan Tag Figure</h2>
<p>Gambar dibawah ini merupakan foto pantai parangtritis dengan tag figure</p>
<p>
<figure>
<img src="gambar/pantai.jpg" width="500" alt="Pantai"/>
<figcaption>
Landscape laut,langit dan bukit karang di pantai parangtritis
</figcaption>
</figure>
</p>
</body>
</html>
Gambar 4.6 Tampilan gambar dengan Tag figure
2. Tag <picture> untuk menentukan jenis gambar pada ukuran layar yang berbeda yang
bersifat responsif.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar dengan tag Picture</title>
</head>
<body>
<h2>Menampilkan Gambar dengan Tag Picture</h2>
<p>Gambar dibawah ini merupakan foto pantai parangtritis dengan tag picture</p>
<p>
<picture>
<source media="(min-width: 650px)" srcset="gambar/pantai.jpg">
<source media="(min-width: 450px)" srcset="gambar/pantai-sm.jpg">
<img src="gambar/pantai.jpg">
</picture>
</p>
</body>
</html>
4.6 Menambahkan Audio di HTML

Sebelum adanya HTML 5, audio di HTML ditambahkan dengan program eksternal
seperti flash player. Namun, kini HTML sudah punya tag sendiri yakni <audio>.
Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio
yang akan diputar dengan tag <source>.
Audio player di HTML tidak mendukung semua jenis format file audio. Berikut ini
daftar format file audio yang bisa diputar di HTML
Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran
filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas tinggi
dan ukuran filenya relatif lebih besar. Beberapa atribut yang bisa diberikan pada tag <audio>
yaitu controls, autuplay,loop dan muted, tapi tidak semua atribut ini bisa dijalankan di
browser.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menambahkan Audio</title>
</head>
<body>
<h2>Audio dengan format mp3</h2>
<h5>Emilia-BigBigWorld.mp3</h5>
<audio controls>
<source src=" audio-video/Emilia-BigBigWorld.mp3" type="audio/mpeg">
Browsermu tidak mendukung tag audio, upgrade donk!
</audio>
</body>
</html>
Gambar 4.7 Tampilan Audio.
4.7 Menambahkan Video di HTML

Menambahkan video pada halaman web menggunakan tag <video>. Tag <video>
adalah tag untuk menampilkan video pada halaman web. Lalu kita bisa memberikan file
video yang akan diputar dengan tag <source>.
Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format
video yang didukung:
Jika kita mempunyai video dengan format yang berbeda dari ketiga format tersebut,
maka kamu harus mengubahnya agar bisa ditambahkan ke HTML.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menambahkan Video</title>
</head>
<body>
<h2>Contoh Video di HTML</h2>
<video controls width="700px">
<source src="audio-video/Dere-Kota.mp4" type="video/webm" />
Browsermu tidak mendukung tag ini, upgrade donk!
</video>
</body>
</html>
Gambar 4.8 Tampilan Video.

C. RANGKUMAN.
1. Untuk menambahkan gambar pada halaman web menggunakan tag <img
src=”namafile”>,dimana nama file harus sesuai dengan nama gambar yang akan
ditampilkan.
2. Untuk menampilkan audio pada web digunakan tag <audio> dan untuk menampilkan
video digunakan tag <video>.
D. LATIHAN.
1. Buatlah halaman web yang menampilkan minimal 5 gambar tempat-tempat wisata di
Indonesia. Tampilan web dibuat sebagus mungkin sesuai kreatifitas masing-masing.
2. Buatlah halaman web untuk menampilkan beberapa file audio dan video. Tampilan
web dibuat sebagus mungkin sesuai kreatifitas masing-masing.
E. RUJUKAN.
https://www.petanikode.com/html-img/
https://www.petanikode.com/html-audio/
https://www.petanikode.com/html-video/
Betha Sidik Ir, HTML5 Dasar-Dasar Untuk Pengembangan Aplikasi Berbasis Web,
2019, Penerbit Infomatika Bandung.
Rohi Abdulloh, 7 In 1 Pemrograman Web Untuk Pemula, 2019, Elex Media
Komputindo, Jakarta
F. BACAAN YANG DISARANKAN.

Candra Surya, Miftahul Jannah, Desain Web bagi Pemula, 2020, Penerbit Elex
Media Komputindo.

New BAB IV

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

New BAB IV

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB IV

MULTIMEDIA PADA HTML

Gambar 4.1 Tampilan gambar pada HTML

Gambar 4.2 Tampilan gambar dari website lain

4.2 Atribut Width Dan Height

Gambar 4.3 Tampilan gambar dengan atribut width dan height

4.3 Atribut style

Gambar 4.4 Tampilan gambar dengan atribut style

4.4 Membuat Gambar Background

Gambar 4.5 Tampilan halaman web dengan background gambar

4.5 Tag Tambahan untuk Gambar di HTML

Gambar 4.6 Tampilan gambar dengan Tag figure

4.6 Menambahkan Audio di HTML

Gambar 4.7 Tampilan Audio.

4.7 Menambahkan Video di HTML

Gambar 4.8 Tampilan Video.

F. BACAAN YANG DISARANKAN.

Anda mungkin juga menyukai