Modul 2. HTML5: Table dan List

(1)

A. Pokok Bahasan

1. Table HTML: Struktur tabel, header, colspan, rowspan, border, dan spasing 2. List HTML: List, nested list, mengganti karakter list

B. Tujuan Pembelajaran

1. Mampu menjelaskan dan mengimplementasikan tabel HTML 2. Mampu menjelaskan dan mengimplementasikan list HTML

C. Waktu

2 (2 x 60 menit)

D. Landasan Teori

Dalam membuat halaman sebuah website kadangkala dibutuhkan penggunaan tabel dan list. Tabel dan list dibuat sesuai dengan kebutuhan yang akan disajikan di dalam sebuah halaman web. Seperti halnya membuat tabel daftar mahasiswa, tabel daftar penduduk dan lain sebagainya. Adapun list bisa digunakan dalam menyajikan resep masakan, daftar jenis barang yang akan dijual dan lain-lain

(2)

Ovide Decroly Wisnu Ardhi Praktikum Desain Web Modul 2 - HTML5 B

E. Praktikum

Tabel HTML

Tabel sering dijumpai pada halaman website. Tabel HTML didefinisikan

menggunakan tag <table>. Tiga buah tag yang dapat dipergunakan untuk membuat tabel adalah <table>, <tr> dan <td>.

1. Struktur Tabel Praktik

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 01_NIM_tabel.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(3)

2. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 01_NIM_tabel1.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

2. Tabel Header

Dalam membuat tabel biasa dijumpai judul tabel atau header. Judul tabel dapat didefinisikan dengan tag <th> untuk menggantikan tag <td> yang digunakan untuk mewakili sel data aktual (penting). Judul tabel umumnya terletak dibagian teratas tabel. Secara default judul tabel yang didefiniskan menggunakan tag <th> akan terletak ditengah dan tercetak tebal.

Praktik

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 02_NIM_tabelheader.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(4)

2. Dari dokumen HTML sebelumnya tambahkan header tabel sehingga halaman tampilan seperti pada contoh gambar. Simpan dengan nama file 02_NIM_tabelheader1.htmlkemudian amati hasilnya pada web browser.

3. Colspan

Atribut colspan digunakan untuk memperpanjang sebuah sel pada tabel.

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 03_NIM_colspan.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(5)

2. Dari hasil percobaan sebelumnya, buatlah header Nama agar dapat digunakan sebagai header pada kolom ke-2 dan ke-3. Tambahkan atribut colspan sebagai berikut:

<th colspan="2">Nama</th>. Simpan dengan nama file 03_NIM_colspan1.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

4. Rowspan

Atribut rowspan digunakan untuk merentangkan ke bawah sebuah sel pada tabel agar tingginya setara dengan beberapa baris.

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 04_NIM_rowspan.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(6)

2. Dari hasil percobaan sebelumnya, gabungkan sel yang memiliki nilai yang sama Desain Web dan Pemrograman Web. Tambahkan atribut rowspan sebagai berikut: <td rowspan="2">Desain Web</td> dan <td rowspan="2">Pemrograman Web</td>.

Simpan dengan nama file 04_NIM_rowspan1.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

3. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 04_NIM_rowspan2.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(7)

5. Border dan Spasing

Tampilan border pada tabel dapat kita rubah supaya menghasilkan garis yang lebih tegas dengan mereset stylenya. Atau jika belum ada tag <style> dalam kode HTML, tambahkan didalam <header> tepatnya dibawah <title>.

1. Tambahkan kode berikut:

<style>

table {

border-spacing: 0;

border-collapse: collapse;

}</style>

Letakkan didalam <header> tepat dibawah <title>. Simpan dengan nama file 05_NIM_borderspacing.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

List HTML

1. List

List/daftar pada HTML terdapat 2 jenis, yaitu ordered list dan unordered list. Ordered list adalah list yang menggunakan urutan karakter seperti angka atau huruf, sedangkan unordered list adalah list yang menggunakan simbol yang sama untuk setiap poin listnya.

(8)

Perbedaan dari keduanya terletak pada tag pembuka dan penutupnya. Tag pada ordered list menggunakan tag<ol>dan unordered list menggunakan tag<ul>. Setiap poin daftar ditulis di dalam elemen <li>.

Untuk menampilkan susunan ordered list sebagai berikut:

1. daftar satu 2. daftar dua 3. daftar tiga

Dapat menggunakan:

<ol>

<li>daftar satu</li>

<li>daftar dua</li>

<li>daftar tiga</li>

</ol>

Sedangkan untuk menampilkan:

● daftar satu

● daftar dua

● daftar tiga Dapat menggunakan:

<ul>

<li>daftar satu</li>

<li>daftar dua</li>

</ul>

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 06_NIM_list.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(9)

2. Modifikasilah dokumen HTML seperti pada contoh menggunakan ordered list <ol>

dan unordered list <ul> kemudian Setiap poin daftar ditulis di dalam elemen <li>.

Simpan dengan nama file 06_NIM_list2.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

2. Nested List

Nested List dapat digunakan untuk membuat list di dalam list atau bisa diartikan sebagai subpoint. Contoh kode yang mengimplementasikan nested list adalah sebagai berikut:

<ol>

<li>

daftar satu

<ul>

<li>subdaftar pertama</li>

<li>subdaftar kedua</li>

<li>subdaftar ketiga</li>

</ul>

</li>

<li>daftar dua</li>

</ol>

Tampilan dari kode di atas adalah sebagai berikut:

1. daftar satu

● subdaftar pertama

● subdaftar kedua

● subdaftar ketiga 2. daftar dua

3. daftar tiga

(10)

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 07_NIM_nestedlist.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

2. Gantilah setiap <h2> pada dokumen menjadi poin list, sehingga setiap list yang ada di bawah masing-masing <h2> menjadi sub list di atasnya. Simpan dengan nama file 07_NIM_nestedlist1.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

3. Mengganti Karakter List

Tipe Ordered List

Pada ordered list kita dapat menggunakan tidak hanya list angka saja (1,2,3,dst) tapi juga huruf (a,b,c,dst) dan angka romawi (I,II,III,dst). Untuk mengubah tipe ordered list, kita gunakan atribut di dalam tag <ol>.

Contohnya:

<li>List Pertama</li>

<li>List Kedua</li>

<li>List Ketiga</li>

</ol>

(11)

Contoh kode di atas akan menampilkan list seperti ini:

1. List Pertama 2. List Kedua 3. List Ketiga

Adapun tipe list style yang dapat kita gunakan diantaranya:

1. Buatlah dokumen HTML seperti pada contoh. Simpan dengan nama file 08_NIM_karakterlist.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

(12)

2. Gantilah list utama menggunakan ordered list dengan angka romawi kapital.

Jalankan kode dan lihat perubahannya. Gantilah setiap sublist sehingga masing-masing menggunakan list style tipe kotak, lingkaran dan tanpa simbol.

Simpan dengan nama file 08_NIM_karakterlist1.html selanjutnya bukalah dengan browser dan amati bagaimana hasilnya.

F. Laporan Praktikum

Buatlah laporan praktikum dari semua praktik yang telah dikerjakan.

(13)

Referensi

https://www.w3schools.com/html/default.asp

https://www.codepolitan.com/interactive-coding/html