Dokumen ini menjelaskan teknik pembuatan hyperlink, tabel, dan video dalam pemrograman web menggunakan HTML. Hyperlink dapat berupa teks atau gambar yang dibuat dengan tag anchor <a>, sedangkan tabel digunakan untuk menyajikan data dalam kolom dan baris menggunakan tag <table>, <tr>, dan <td>. Selain itu, elemen <video> memungkinkan pengintegrasian video ke dalam halaman web dengan berbagai atribut untuk mengontrol pemutaran.

1. Modul ke:
Fakultas
Pemrograman Web
Membuat link internal dan eksternal, table, video
Giri Purnama, S.Pd, M.Kom.
03
FASILKOM
Program Studi
TI

2. Membuat HyperLink
• HyperLink digunakan untuk memanggil
halaman web, file, gambar, alamat email dan
bagian-bagian pada halaman web yang telah
ditandai.
• Objek hyperlink bisa berupa teks atau gambar.
• Secara default teks yang diberikan hyperlink
digaris bawah dan akan merubah icon mouse
menjadi telapak tangan bila kursor
melewatinya.

3. Tag Anchor
• Untuk membuat hyperlink dibutuhkan teknik
anchor.
• Pada tag html anchor disingkat dengan
<a>...</a>
• Adapun atribut wajib yang harus ada pada tag
anchor adalah href singkatan dari hypertext
reference

4. Protokol URL yang disupport
• URL singkatan dari Uniform Resource Locator,
adapun protokol yang di support oleh URL
adalah sebagai berikut:
• http : hyper text trasfer protocol
• ftp : file transfer protocol (link luar)
• File (lokal)
• news
• mailto
• gopher

5. Jenis URL
• Absolut
– Mengandung protokol
– Mengarah ke link luar
– Contoh:
• <a href=‘http://www.google.com’>Google</a>
• Relatif
– Mengarah ke link dalam
– Tidak mengandung protokol
– Contoh:
• <a href=‘home.html’>Home</a>

6. Atribut Merubah Warna Link
• Secara default warna text yang mengandung link
adalah biru
• Untuk mengganti warna link tersebut sesuai
keinginan kita maka diperlukan atribut-atribut berikut
ini:
– Link (untuk menentukan warna link)
– Alink (untuk menentukan warrna ketika di klik)
– Vlink (untuk mentukan warna pada link yang telah
dikunjungi)
• Dengan value nilai warna berdasarkan hexa atau
name
• Atribut tersebut diletakan pada tag “body”

7. Latihan 3.1
• Buat link dengan menggunakan protokol http,
ftp, mailto, file
• Beri warna untuk
– link: kuning
– Alink:biru
– Vlink: merah

8. Hubungan antar bagian dokumen
• Untuk mengarahkan link kepada bagian
dokumen perlu ditandai dahulu bagian-bagian
dokumen yang menjadi tujuan link.
• Atribut untuk menandai dokumen tersebut
dengan menggunakan atribut ‘id’ atau ‘name’
dengan value nama dari bagian dimaksud
• Contoh:
<a id=“paragraf_satu”> Pragraf Satu</a>
<a name=“paragraf_satu”> Pragraf Satu</a>

9. Link ke bagian dari dokumen
• Untuk mengarahkan link kebagian dari
dokumen tetap menggunkan tag ‘href’ dengan
value nama bagian dokeman ditambah tanda
pagar (#) didepan nama dokumen
• Contoh:
<a href=“#paragraf_satu”>Paragraf Satu</a>

10. Link ke bagian dokumen pada beda halaman web
• Untuk mengarahkan link kebagian dari
dokumen pada beda halaman web tetap
menggunkan tag ‘href’ dengan value nama
halaman web dan nama bagian dokuman
ditambah tanda pagar (#) diantara nama
halaman dan nama bagian dokumen
• Contoh:
<a href=“home.html#paragraf_satu”>Paragraf
Satu</a>

11. Latihan 3.2
• Buat tulisan sebanyak 5 paragraf dan berikan
judul tiap-tiap pragraf tersebut
• Judul paragraf di jadikan tujuan link
• Buat link yang mengarahkan ke masing-
masing paragraf tersebut pada baris pertama
tulisan
• Buat link diakhir paragraf untuk mengarahkan
ke baris paling pertama

12. Atribut target
• Untuk menetukan sasaran terbukanya link
anchor yang kita klik maka perlu ditambahkan
atribut “target”
• Secara default atribut target memiliki value
“_SELF”
• Untuk membuka halaman baru maka value
dari atribut target adalah “_BLANK”

13. Latihan 3.3
• Buat 2 link luar yang atribut targetnya _self
dan _blank

14. Dasar-dasar sebuah tabel
• Tabel digunakan untuk menyajikan data dalam
bentuk kolom dan baris.
• Umumnya setiap kolom menunjukkan data
yang sejenis, dan setiap baris terdiri atas
kolom-kolom yang menunjukkan kelompok
data dalam satu kesatuan.

15. Dasar-dasar sebuah tabel
• Dalam HTML selain untuk menyajikan data,
tabel juga digunakan sebagai wadah untuk
menempatkan text atau gambar agar tampilan
web enak untuk dilihat.
• Text akan dapat diatur penempatanya
sehingga tampil dengan terstruktur.
• Untuk mempercepat loading, gambar dapat di
potong-potong dan disusun kembali dengan
menggunakan tabel

16. Dasar-dasar sebuah tabel
• Untuk membuat tabel pada HTML digunakan
tiga pasang tag utama yang harus ada pada
sebuah tabel
• <table>....</table> utk mendifinisikan sebuah
tabel
• <tr>....</tr> (table row) untuk mendifisikan
sebuah baris
• <td>.....</td> (table data) untuk mendifinisikan
kolom

17. Penggunaan tag Table
<table>
<tr><td>kolom 1 baris1</td><td>kolom 2 baris 1</td></tr>
<tr><td>kolom 1 baris 2</td><td>kolom 2 baris 2</td></tr>
.......
<tr><td>kolom 1 baris n</td><td>kolom 2 baris n</td></tr>
</table>
• Untuk melihat batasan-batasan antara kolom dan tabel kita
dapat menyertakan atribut border dengan nilai dalam pixel
dimana secara default bernilai 0

18. Membuat Judul Table
• Untuk membuat judul pada sebuah tabel maka yang
kita butuhkan adalah meletakan tag <caption>judul
tabel</caption> di bawah tag <table>
<table>
<caption>judul tabel</caption>
<tr><td>kolom 1 baris 1</td></tr>
</table>
• Tag <caption> memiliki atribut align dengan isi top,
buttom, left, right

19. Membuat judul kolom pada tabel
• Dan apabila kita ingin memberikan judul pada
tiap-tiap kolom pada tabel maka yang perlu
dilakukan adalah menganti tag kolom pertama
dari <td>judul kolom</td> menjadi <th>judul
kolom</th>
• Penggunaan tag <th> akan membuat judul
kolom ditebalkan/bold/strong secara default

20. Mengatur posisi Table
• Untuk mengatur posisi tabel maka kita hanya
perlu menambahkan atribut align dengan isi
left, center, right

21. Atribut CELLSPACING &
CELLPADDING
• Atribut CELLSPACING digunakan untuk
mengatur spasi/jarak diantara kolom dalam
tabel dan antara kolom dengan batas luar.
• Sedangkan atribut CELLPADDING berguna
untuk mengatur teks dengan batas dalam
• Satuan dari atribut CELLSPACING dan
CELLPADDING adalah pixel

22. Atribut COLSPAN
• Untuk mengabungkan beberapa kolom pada tabel dapat
menggunakan atribut colspan
• Contoh:
<table border=2 cellpadding=4>
<tr> <td colspan=2>Production</td> </tr>
<tr> <td>Raha Mutisya</td> <td>1493</td> </tr>
<tr> <td>Shalom Buraka</td> <td>3829</td> </tr>
<tr> <td colspan=2>Sales</td> </tr>
<tr> <td>Claire Horne</td> <td>4827</td> </tr>
<tr> <td>Bruce Eckel</td> <td>7246</td> </tr>
</table>

23. Atribut ROWSPAN
• Dan untuk menggabungkan baris pada table dapat
menggunakan atribut rowspan
• Contoh:
<table border=2 cellpadding=4>
<tr><td rowspan=2 >Production</td><td>Raha
Mutisya</td><td>1493</td></tr>
<tr><td>Shalom Buraka</td> <td>3829</td></tr>
<tr><td rowspan=2 >Sales</td><td>Claire Horne</td>
<td>4827</td></tr>
<tr><td>Bruce Eckel</td> <td>7246</td></tr>
</table>

24. Atribut Width
• Untuk menentukan lebar dari sebuah table
atau kolom kita dapat menambahkan atribut
width
• Atribut width dapat berisi pixel atau persen
(terhadap lebar layar)
• Atribut width dapat diletakan pata tag <table>
dan tag <td>

25. Atribut Align dan Valign
• Untuk menentukan posisi tabel dan text pada
field tabel kita dapat menggunakan atribut
align
• Atribut align memiliki value left, center dan
right
• Sedangkan untuk menetukan posisi text secara
vertikal pada kolom/baris dalam sebuah tabel
dapat menggunakan valign
• Atribut valign mempunyai value top, middle,
bottom, baseline

26. Pewarnaan pada Table
• Untuk lebih membuat menarik tabel maka kita
dapat memberikan warna pada tabel.
• Pemberian warna pada tabel bisa mencakup
pada tabelnya sendiri, cell, dan baris.
• Atribut untuk memberikan warna pada table
adalah bgcolor degan value nama warna atau
kode warna.
• Atribut bgcolor tersebut dapat kita sisipkan
pada tag <table>, <tr> dan <td>

27. Tugas 3.4
• Buat tabel seperti contoh berikut
• Buat tabel berisi potongan-potongan gambar
(minimal enam potongan yang disusun
menggunakan table menjadi satu gambar
utuh)

28. Video
• HTML <video> element yang digunakan untuk merujuk kepada
sumber file video, sehingga dapat diputar/dijalankan pada
halaman web.
• Dalam merujuk sumber file video, digunakan atribut src yang
menunjukkan source (sumber) yang mengarah pada link file
video tersebut berada (disimpan), ditulis baik didalam element
<video> itu sendiri atau didalam element <source> yang
merepresentasikan sumber video lebih dari satu format,
sehingga browser dapat memilih format video yang tepat
(didukung).
• Didalam element <video> dapat ditulis konten (teks), untuk
browser lawas yang tidak mendukung HTML5 video. Teks ini,
akan tampil sebagai ganti dari video yang tidak dapat diputar.

29. Format Video

30. Atribut
autoplay
• Menginstruksikan browser untuk mulai memutar
video secara otomatis sesegera mungkin tanpa
berhenti. Value: autoplay atau (dikosongkan)
controls
• Menginstruksikan browser untuk menampilkan
antarmuka (user interface) untuk video control
(seperti menampilkan tombol putar (play), kontrol
volume dan lain sebagainya). Value: controls atau
(dikosongkan)

31. height
• Menentukan (ukuran) tinggi pemutar video (vi
• deo player). Value: dalam pixels
loop
• Menginstruksikan browser untuk memutar ulang
video ketika selesai (mencapai waktu akhir putar).
Value: loop atau (dikosongkan)
muted
• Menginstruksikan browser untuk membisukan (tanpa
suara) video. Value: muted atau (dikosongkan)

32. poster
• Menentukkan URL yang merujuk sebuah gambar yang
akan dijadikan poster frame yang akan tampil
sebelum video diputar (mengklik tombol "play").
Value: URL
preload
• Menginstruksikan browser untuk menentukkan jika
dan bagaimana penulis memuat video ketika halaman
web dimuat (termasuk mengunduh (download) video
dan metadata-nya) demi pengalaman menjelajah
yang baik untuk user. Value: auto | metadata | none
atau (dikosongkan)

33. src
• Menentukkan URL yang mengarah pada
sumber video file berada (disimpan). Value:
URL
width
• Menentukkan (ukuran) lebar pemutar video
(video player). Value: dalam pixels

34. Cara Penulisan Tag Video
• Cara singkat sederhana
<video src=“folder/video/FileVideo.mp4"
controls>
</video>
• Cara lengkap
<video width="400" controls preload="metadata">
<source src=“folder/video/fileVideo.mp4" type="video/mp4"/>
<source src=“folder/video/fileVideo.webm" type="video/webm"/>
<source src=“folder/video/fileVideo.ogv" type="video/ogg"/>
</video>

35. Pemrograman Web
Bahan Ajar
Membuat link internal dan eksternal

36. Terima Kasih
Giri Purnama, S.Pd, M.Kom