Adhitya Ahmad Pradypta, S. Kom.,M.T.

Universitas Islam As-Syafi’iyah - 2022

Pertemuan 03 – Pengenalan HTML Lanjutan
Latihan 04 – HTML Image dan Menu
1. Download file asset.zip di Google Classroom
2. Extract file tersebut dan copy
3. Paste di dalam folder “uia/latihan”
4. Buat file teks dengan format html dan beri nama file “latih04.html” di dalam folder “latihan”

Pada latihan 04 ini membuat Image Gallery dan Side Menu. Adapun capaian pembelajaran dalam latihan
04 sebagai berikut:
1. Dapat menggunakan HTML Tag image
2. Dapat membuat side menu
3. Dapat membuat Image Gallery di dalam Div Content Halaman Web
Tampilan Web latih04.html
Script latih04.html
Script latih04.html
Script latih04.html
Script latih04.html
HTML Multimedia
 Image Map
 Menampilkan kemampuan memilih area dalam suatu gambar untuk
memberikan berbagai informasi secara terpisah

 Audio
 Menampilkan audio dalam berbagai format

 Video
 Menampilkan video dalam berbagai format
Latihan 04 A - Membuat Image Map

1. Di dalam folder dengan nama “uia/latihan”, tambahkan file dengan format html yang diberi nama
“image.html”
2. Gunakan script yang sama seperti pada latih04.html. Copy dan Paste ke file image.html
3. Hapus script di area <div id=“content”></div>
Tampilan Web image.html
Script image.html

Bagaimana menentukan koordinat pada map area tersebut?

Gunakan link berikut:

https://www.image-map.net/
Mentukan Area Koordinat Pada Gambar
Mentukan Area Koordinat Pada Gambar

1. Klik tombol “Select Image From My PC”, dan pilih gambar yang diinginkan
Mentukan Area Koordinat Pada Gambar

2. Klik area yang Anda tandai hingga muncul 2 titik. Jika lebih dari 1 objek,
klik tombol Add New Area. Pilih Active untuk area yang ditandai
Mentukan Area Koordinat Pada Gambar

3. Klik tombol “Show Me The Code!” untuk melihat script dan copy tag map
pada pop up Generated Image Map Output
Mentukan Area Koordinat Pada Gambar

4. Pastikan attribute name pada map sama dengan attribute usemap pada tag
<img>
5. Pastikan ukuran gambarnya sama dengan ukuran yang ditampilkan pada
aplikasi Image Map. Jika tidak, mengakibatkan titik koordinatnya bergeser
dan tidak sesuai lagi. Gunakan inspect element pada web browser Anda
untuk mengetahui ukuran gambarnya
Latihan 04 B - Membuat Audio Play List

1. Di dalam folder dengan nama “uia/latihan”, tambahkan file dengan format html yang diberi nama
“audio.html”
2. Gunakan script yang sama seperti pada image.html. Copy dan Paste ke file audio.html
3. Hapus script di area <div id=“content”></div>
Tampilan Web audio.html
Script audio.html
Latihan 04 C - Membuat Video Play List

1. Di dalam folder dengan nama “uia/latihan”, tambahkan file dengan format html yang diberi nama
“video.html”
2. Gunakan script yang sama seperti pada image.html. Copy dan Paste ke file video.html
3. Hapus script di area <div id=“content”></div>
Tampilan Web video.html
Script video.html
HTML Iframe [Source: YouTube]
1. Buka link youtube dan cari video yang ingin Anda masukkan ke dalam
iframe
HTML Iframe [Source: YouTube]

2. Klik Share, kemudian pilih embeded dan copy embedded video yang
muncul pada pop up seperti gambar berikut:
HTML Form
Tag Element Keterangan
<textarea></textarea> Menampilkan input dalam bentuk text bisa diatur tiggi dan lebarnya
<select></select> Menampilkan pilihan dalam bentuk dropdown
<option></option> Menampilkan isi pilihan pada dropdown
Menampilkan suatu label teks dalam form untuk memberi keterangan pada
<label></label>
suatu input-an
<button></button> Menampilkan tombol
<form></form> Inisiasi pembuatan form
HTML Input
Tag Element Keterangan
<input type="button"> Menampilkan tombol
<input type=“submit"> Menampilkan tombol
<input type=“text"> Menampilkan input teks
<input type=“file"> Menampilkan kotak dialog pencarian file
<input type=“radio"> Menampilkan pilihan dalam bentuk radio button
<input type=“checkbox"> Menentukan pilihan dalam bentuk checkbox
<input type=“email"> Menentukan input teks dengan format email
<input type=“tel"> Menentukan input teks dengan format no telp
<input type=“password"> Menampilkan input teks yang di-masking
<input type=“url"> Menampilkan input teks dengan format url
<input type=“number"> Menampilkan input teks dengan format angka
Latihan 05 - Membuat Form

1. Di dalam folder dengan nama “uia/latihan”, tambahkan file dengan format html yang diberi nama
“latih05.html”
2. Copy script pada latih02.html dan paste ke file latih05.html
3. Hapus isi di dalam HTML tag <div id=“content”> </div>

Pada latihan 05 ini membuat form standar. Adapun capaian pembelajaran dalam latihan 05 sebagai
berikut:
1. Memahami penggunaan HTML tag untuk form dan input
2. Dapat membuat form standar
Tampilan Web latih05.html
Script latih05.html
Reference
• https://www.w3schools.com/html/default.asp