TIB22 – PERANCANGAN

PEMROGRAMAN WEB
LIST, LINK, IMAGE, AUDIO, DAN
VIDEO
Pertemuan ke-3 dan 4
 Sub-CPMK
Mahasiswa mampu menggunakan list, link, serta
menampilkan gambar, audio, dan video (C3, A3)

Materi
1. List Pada Web
2. Link Pada Web
3. Image Pada Web
4. Audio Pada Web
5. Video Pada Web
1. List Pada Web
 1.1 List
• List HTML digunakan untuk menyajikan daftar
informasi dalam bentuk yang baik.

• Ada tiga jenis list dalam HTML yakni:

– Ordered List
– Unordered List
– Description List
 1.2 Ordered List
• Ordered List (List Berurutan) menggunakan
tag <ol> . . . </ol>
 1.2 Ordered List (Lanj..)
• Tag ini memiliki atribut type yang menunjukkan
penomoran dan dapat diberi nilai berupa:
 Angka: 1, 2, 3, 4, 5, dan seterusnya
 Angka Romawi:
» i, ii, iii, dan seterusnya
» I, II, III, dan seterusnya
 Alfabet:
» a, b, c, dan seterusnya
» A, B, C, dan seterusnya
 1.2 Ordered List (Lanj..)
Code Output
 1.2 Ordered List (Lanj..)
Code Output
 1.3 Unordered List
• Unordered List (List Tidak Berurutan)
menggunakan tag <ul> . . . </ul>
 1.3 Unordered List
(Lanj..)
• Tag ini memiliki atribut type yang menunjukkan
simbol dan dapat diberi nilai berupa:
• Disc
o Circle
 Square
None
 1.3 Unordered List
(Lanj..)
Code Output
 1.3 Unordered List
(Lanj..)
Code Output
 1.4 Description List
• Description List merupakan daftar yang berisi
deskripsi atau penjelasan dari setiap item.
• Description List menggunakan tag <dl> . . . </dl>
 1.4 Description List
(Lanj..)
Code Output
2. Link Pada Web
 2.1 Link
• Link merupakan pintasan untuk menuju suatu
URL website, baik halaman lain pada suatu
website maupun halaman pada website lain.

• Link sering digunakan untuk membuat menu

website.
• Tag yang digunakan untuk membuat link adalah
tag <a> . . . </a>
 2.2 Atribut Link
• Tag link memiliki beberapa atribut berupa:
- Href menentukan tujuan dari link ketika
diklik.
- Target menentukan target yang dituju saat
diklik apakah di tab yang sama atau tab
lain. Nilai dari atribut ini yakni “_self”,
“_blank”, “_parent”, dan “_top”
- Title menentukan tulisan yang tampil saat
kursor memasuki area link.
 2.2 Atribut Link (Lanj..)
• Penulisan nilai atribut href memiliki beberapa
cara tergantung dari fungsi link yaitu sebagai
berikut.
» Jika link digunakan untuk membuka file cara
penulisannya href=“namaFile.html”
» Jika link digunakan untuk menuju halaman
website lain, maka penulisannya menjadi
href=“http://www.nama_website.com/”
 2.2 Atribut Link (Lanj..)
» Jika link digunakan untuk menuju bagian lain dalam
satu halaman website maka penulisannya menjadi
href=“#namaId”. Agar link tersebut berfungsi,
maka harus ada tag <a id=“namaId”> sebagai
target yang dituju ketika link diklik.

» Jika link digunakan untuk mengirim e-mail maka

penulisannya menjadi
href=“mailto:alamat_email”
 2.3 Contoh Link
Code
 2.3 Contoh Link (Lanj..)
Output
3. Image Pada Web
 3.1 Peranan Image
• Peranan gambar dalam web :
– Menyampaikan informasi kepada pengunjung
– Memberikan kontribusi pada keseluruhan
tampilan dan nuansa dari Web
– Gambar merupakan salah satu elemen kunci dari
desain halaman

• Format gambar dapat berupa jpg, jpeg, jfif, png,

gif, bmp, dan lain sebagainya.
 3.2 Penggunaan Image
• Penggunaan gambar :
– Untuk menarik perhatian, dapat digunakan
sebagai gambar produk, gambar header, dll
– Dapat digunakan sebagai latar belakang web
– Dapat digunakan sebagai navigasi/link web
 3.3 Tag dan Atribut
Image
• Tag yang digunakan untuk menambahkan gambar di
dalam HTML adalah tag <img>
• Tag <img> tidak memiliki tag penutup.
• Atribut yang dapat diberikan ke tag <img>
Atribut Fungsi
src Menentukan sumber dan nama gambar
width Menentukan lebar gambar
height Menentukan tinggi gambar
alt Memberi text alternatif yang ditampilkan jika gambar tidak
dapat ditampilkan
title Membuat text yang tampil ketika kursor di atas gambar
 3.3 Tag dan Atribut
Image (Lanj..)
• Bentuk Umum
 3.3 Contoh Image
Code
 3.3 Contoh Image (Lanj..)
Output
4. Audio Pada Web
 4.1 Audio
• Peranan audio dalam web :
– Memberikan efek saat pengguna melakukan aksi
agar web menjadi lebih menarik
– Menjadikan audio sebagai latar belakang web

• Tag yang digunakan untuk menambahkan

audio di dalam HTML

<audio> . . . </audio>
 4.2 Atribut Audio
• Atribut yang dapat diberikan ke tag <audio>
Atribut Fungsi
src Menentukan sumber dan nama file
width Menentukan lebar control
height Menentukan tinggi control
controls Pilihan untuk menampilkan tombol kontrol atau tidak
autoplay Pilihan untuk langsung dimainkan atau tidak
loop Menetapkan audio akan secara otomatis memulai
kembali, setelah mencapai akhir.
muted Menentukan output audio dibungkam
 4.3 Contoh Audio
Code

Output
 4.3 Contoh Audio
(Lanj..)
Code

Output
5. Video Pada Web
 5.1 Video
• Peranan audio dalam web yakni dapat
digunakan untuk memberikan pengantar,
tutorial, komersil, dan lain-lain

• Tag yang digunakan untuk menambahkan

video di dalam HTML

<video> . . . </video>
 5.2 Atribut Video
• Atribut yang dapat diberikan ke tag <video> mirip
dengan audio
Atribut Fungsi
src Menentukan sumber dan nama file
width Menentukan lebar control
height Menentukan tinggi control
controls Pilihan untuk menampilkan tombol kontrol atau tidak
autoplay Pilihan untuk langsung dimainkan atau tidak
loop Menetapkan video akan secara otomatis memulai kembali,
setelah mencapai akhir.
muted Menentukan output video dibungkam
poster Menentukan gambar yang akan ditampilkan hingga
pengguna menekan tombol putar
 5.3 Contoh Video
Code
 5.3 Contoh Video
(Lanj..)
Output
 5.3 Contoh Video
(Lanj..)
Code
 5.3 Contoh Video
(Lanj..)
Output
 Ringkasan
• List HTML digunakan untuk menyajikan daftar
informasi dalam bentuk yang baik.
• Ada tiga jenis list dalam HTML yakni Ordered
List, Unordered List, dan Description List.
• Link merupakan pintasan untuk menuju suatu
URL website, baik halaman lain pada suatu
website maupun halaman pada website lain.
• Image, audio, dan video dalam HTML dapat
menggunakan tag <img>, <audio>, <video>.
Terima Kasih