LAPORAN PRAKTIKUM

PEMOGRAMAN WEB CLIENT

PERTEMUAN KE – 8

HTML MEDIA

Disusun Oleh :

NIM : 195610007

Nama : Ara Widhi Astutik

Jurusan : Sistem Informasi-1

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM

YOGYAKARTA

2019/2020
 BAB 1

RANGKUMAN DASAR TEORI PRAKTIKUM

HTML Media

Menambahkan Gambar
Untuk menambahkan gambar pada HTML, kita dapat menggunakan elemen img.
Elemen img sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag
penutup. Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua cara,
yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.
Berikut adalah contoh penggunaan tag img:

<img src="images/sintel.png"
alt="Sintel merupakan sebuah film singkat.">
<img src="http://i.imgur.com/cYWveEa.jpg"
alt="Contoh Pengunaan URL untuk src.">

Atribut alt, yang bersifat opsional, berguna untuk memberikan keterangan gambar secara
semantik. Keterangan ini juga akan ditampilkan ketika mouse diletakkan di atas gambar, dan
ketika gambar tidak dapat ditemukan.

Menambahkan Suara (Audio)

Selain menampilkan gambar, HTML juga memiliki fitur untuk menambahkan pemutar suara
(audio) pada dokumen web. Elemen audio digunakan untuk tujuan ini, dan sama seperti
elemen img, kita harus memberikan nilai tempat menyimpan file audio melalui atribut src.
Tetapi berbeda dengan img, elemen audio memiliki tag penutup:

<audio src="audios/piano.mp3"></audio>

Secara normal, ketika kita memasukkan elemen audio seperti pada kode di atas, kita tidak
akan dapat melihat elemen audio, dan bahkan file audio yang dimasukkan tidak akan dapat
dimainkan. Untuk menampilkan elemen audio, kita harus menambahkan
atribut controls pada elemen:

<audio src="audios/piano.mp3" controls></audio>

dan jika kita ingin memastikan audio dapat dimainkan secara otomatis ketika halaman
selesai diunduh oleh browser, kita dapat menggunakan atribut autoplay:

<audio src="audios/piano.mp3" controls autoplay></audio>

Tentunya selain ketiga atribut di atas kita juga memiliki atribut lainnya,
yaitu loop dan preload :
 atribut loop digunakan untuk memastikan audio dapat diputar kembali secara
otomatis ketika sudah selesai dimainkan.
 Atribut preload sendiri berfungsi untuk mengatur seberapa banyak data yang ingin
dikirimkan ke browser ketika pertama kali mengunduh audio. Atribut preload dapat
diisikan dengan tiga nilai, yaitu none, auto, dan metadata.
 none berarti tidak ada data yang diunduh terlebih dahulu,
 auto melakukan unduh terhadap informasi-informasi mengenai file
audio (durasi, nama seniman, dst), dan
 metadata hanya mengunduh informasi tentang file audio (tanpa
mengunduh audio itu sendiri).

Sumber Suara Tambahan

Ketika menambahkan audio pada dokumen web, terdapat beberapa hal yang harus kita
perhatikan untuk memastikan bahwa audio dapat dimainkan dengan benar oleh pengguna.
Hal paling utama yang perlu diperhatikan ialah apakah browser pengguna dapat
menjalankan file audio yang diberikan tanpa masalah. Beberapa browser open source
seperti Firefox menolak file audio tertutup seperti WMV dan hanya dapat menjalankan
format OGG. Untuk menanggulangi hal ini, kita dapat memberikan beberapa jenis format
file sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.
Memberikan beberapa format file dapat dilakukan dengan menambahkan
elemen source di dalam elemen audio, seperti berikut:

<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
</audio>

Menambahkan Video
Penambahan video pada dokumen HTML dilakukan dengan elemen video, yang sangat
mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada
elemen audio juga digunakan pada elemen video, sehingga perbedaan utama dari kedua
elemen ini terdapat pada nama elemen dan dukungan format. Karenanya, setelah
mengetahui tentang tag audio, kita dapat dengan mudah menambahkan video seperti
berikut:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
</video>
 BAB II

PRAKTIK DAN PEMBAHASAN

Praktik

1. Program
2. <!DOCTYPE html>
3. <html>
4. <body>
5.
6. <video width="320" height="240" controls>
7. <source src="upinipin.mp4.mp4" type="video/mp4">
8. <source src="upinipin.mp4.ogg" type="video/ogg">
9. </video>
10.
11. </body>
12. </html>

Dijalankan dibrowser

 Tag yang digunakan ada 2 yaitu tag <video> dan tag <source>
 Tag <video> digunakan untuk mendeklarasikan bahwa kita akan menampilkan video
 Pada tag <video> ada 3 attribute yaitu, width (digunakan untuk mengatur lebar dari
video), height (digunakan untuk mengatur tinggi dari video) dalam contoh ini saya
buat auto agar menyesuaikan dengan ukuran lebar, dan controls (digunakan untuk
menampilkan controller pada video).
  Tag <source> digunakan untuk menuliskan alamat dari video yang akan ditampilkan
 Dalam masing masing tag <source> ada 2 attribute yaitu src(digunakan untuk
menuliskan alamat video yang akan ditampilkan) dan type(digunakan untuk
menuliskan tipe format file video)
 Dalam skrip ini dituliskan 2 buah tag source dimana pada masing – masing tag
source saya menampilkan video yang sama tetapi menggunakan format video yang
berbeda yaitu mp4 dan ogg, Cara ini digunakan untuk mengatasi ketika browser
tidak mensupport format file video yang akan ditampilkan sehingga kita tuliskan 2
format seperti contoh diatas sehingga browser akan menampilkan video yang
memiliki format file yang didukung browser tersebut, apakah mp4 dan oog.

2. Program
<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="Upin.mp3.ogg" type="audio/ogg">
<source src="Upin.mp3.mp3" type="audio/mpeg">
</audio>
</body>
</html>

Dijalankan dibrowser

Ada tambahan controls didalam tag <audio> fungsinya untuk menampilkan control tombol
play / pause, dsb. Pada bagian <source src=””> masukkan file musik beserta ekstensinya
misalnya .mp3 dan tambahkan juga type=”audio/mp3″ jika musik tersebut berupa mp3. Jika
tidak ingin menggunakan control cukup hilangkan / hapus controls didalam <audio>.

Itu adalah contoh audio di direktori lokal, jika audio diambil dari URL / link maka
ganti contohaudio.mp3 dengan link dimana file musik itu berada.
Latihan
(Pada latihan ini diminta untuk memasukkan video pada html dengan 3 ukuran berbeda
yakni besar,sedang,dan kecil. Maka untuk penjelasannya sama dengan praktik 1 hanya saja
berbeda pada width dan heightnya yakni yang mana perubahan pada ukuran video yang
nanti akan kita buat kemudian dimasukkan kedalam HTML dan dijalankan melalui browser).

1. Ukuran besar
Program
<!DOCTYPE html>
<html>
<body>

<video width="700" height="auto" controls>

<source src="upinipin.mp4.mp4" type="video/mp4">
<source src="upinipin.mp4.ogg" type="video/ogg">
</video>

</body>
</html>

Dijalankan dibrowser
2. Ukuran Sedang
Program
3. <!DOCTYPE html>
4. <html>
5. <body>
6.
7. <video width="500" height="300" controls>
8. <source src="upinipin.mp4.mp4" type="video/mp4">
9. <source src="upinipin.mp4.ogg" type="video/ogg">
10. </video>
11.
12. </body>
13. </html>

Dijalankan Dibrowser

3. Ukuran Kecil

Program
<!DOCTYPE html>
<html>
<body>

<video width="300" height="150" controls>

<source src="upinipin.mp4.mp4" type="video/mp4">
<source src="upinipin.mp4.ogg" type="video/ogg">
</video>

</body>
</html>

Dijalankan Dibrowser
 BAB III

KESIMPULAN
Tag-tag diatas merupakan tag dari HTML didalam menyisipkan video dan menambahkan
audio , jika menggunakan HTML versi lain bisa saja tag tersebut tidak berfungsi dengan baik
atau tampilannya lebih jadul. Tag-tag HTML tersebut bisa dijalankan di semua browser
modern, jika tag yang dimasukkan tidak berfungsi silahkan cek di browser lain / coba
perbarui versi browser yang digunakan ke versi terbaru.
 BAB IV

DAFTAR PUSTAKA
https://bertzzie.com/knowledge/desain-web-dasar/Multimedia.html

https://www.warungbelajar.com/cara-menambahkan-video-menggunakan-html-5.html

https://www.posciety.com/cara-menyisipkan-media-gambar-audio-video-di-situs-html-bootstrap/