Selamat datang kembali di Modul 3! Sejauh ini, portofolio kita sudah memiliki teks perkenalan, foto, dan tautan. Sekarang, saatnya untuk menyajikan informasi tentang keahlian dan pengalaman kita secara lebih rapi dan terstruktur.
Bayangkan Anda membaca sebuah dokumen yang panjang tanpa ada poin-poin atau pengelompokan. Pasti melelahkan, bukan? Di sinilah peran List (Daftar) dan Tabel menjadi sangat penting.
Di modul ini, kita akan belajar cara menggunakan tiga jenis list dan struktur dasar tabel untuk membuat konten kita jauh lebih mudah dicerna.
1. Unordered Lists (Daftar Tak Berurutan): Untuk Poin-poin
Jenis list yang paling umum digunakan adalah Unordered List. Gunakan ini ketika urutan dari item-itemnya tidak penting. Secara default, browser akan menampilkannya dengan bullet points.
Strukturnya sangat sederhana:
- Bungkus keseluruhan daftar dengan tag
<ul>(Unordered List). - Bungkus setiap item di dalamnya dengan tag
<li>(List Item).
<h2>Hobi Saya</h2>
<ul>
<li>Membaca buku</li>
<li>Bermain gitar</li>
<li>Menonton film</li>
</ul>Hasilnya di browser:
- Membaca buku
- Bermain gitar
- Menonton film
2. Ordered Lists (Daftar Berurutan): Untuk Langkah-langkah
Gunakan Ordered List ketika urutan dari item-itemnya sangat penting, seperti dalam resep, langkah-langkah tutorial, atau peringkat. Secara default, browser akan menampilkannya dengan penomoran.
Strukturnya mirip dengan <ul>, tetapi menggunakan tag <ol> (Ordered List).
<h2>Langkah-langkah Membuat Kopi</h2>
<ol>
<li>Siapkan cangkir dan kopi bubuk.</li>
<li>Masukkan kopi ke dalam cangkir.</li>
<li>Tuangkan air panas.</li>
<li>Aduk hingga rata dan sajikan.</li>
</ol>Hasilnya di browser:
- Siapkan cangkir dan kopi bubuk.
- Masukkan kopi ke dalam cangkir.
- Tuangkan air panas.
- Aduk hingga rata dan sajikan.
Tips Pro: Anda bisa mengubah tipe penomoran menggunakan atribut type pada tag <ol>. Contoh: <ol type="A"> untuk huruf besar, <ol type="i"> untuk angka romawi kecil.
3. Tabel (Tables): Untuk Data Tabular
Peringatan Penting: Di masa lalu, developer sering menggunakan tabel untuk mengatur tata letak (layout) halaman web. Ini adalah praktik yang sudah usang dan buruk. Saat ini, tabel hanya boleh digunakan untuk tujuan aslinya: menampilkan data dalam format baris dan kolom, seperti spreadsheet.
Struktur dasar tabel terdiri dari beberapa tag utama:
<table>: Tag pembungkus utama untuk keseluruhan tabel.<tr>(Table Row): Mendefinisikan satu baris di dalam tabel.<th>(Table Header): Mendefinisikan sel untuk header kolom. Teks di dalamnya akan otomatis tebal dan berada di tengah. Biasanya diletakkan di baris pertama.<td>(Table Data): Mendefinisikan sel data biasa.
Mari kita lihat contoh sederhana:
<table>
<tr>
<th>Bulan</th>
<th>Pendapatan</th>
</tr>
<tr>
<td>Januari</td>
<td>Rp 1.000.000</td>
</tr>
<tr>
<td>Februari</td>
<td>Rp 1.500.000</td>
</tr>
</table>Hasilnya di browser akan terlihat seperti tabel 2×3 dengan header “Bulan” dan “Pendapatan”.
Untuk struktur yang lebih semantik (lebih bermakna), disarankan untuk membagi tabel menjadi tiga bagian:
<thead>: Untuk mengelompokkan baris header.<tbody>: Untuk mengelompokkan baris-baris isi data utama.<tfoot>: (Opsional) Untuk mengelompokkan baris footer atau ringkasan.
<table>
<thead>
<tr>
<th>Bulan</th>
<th>Pendapatan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Januari</td>
<td>Rp 1.000.000</td>
</tr>
<tr>
<td>Februari</td>
<td>Rp 1.500.000</td>
</tr>
</tbody>
</table>Secara visual, hasilnya sama, tetapi struktur kodenya jauh lebih baik dan mudah dipahami oleh browser dan screen reader.
Hands-on: Coding Bareng – Menstrukturkan Keahlian dan Pengalaman
Saatnya mengaplikasikan list dan tabel ke dalam proyek portofolio kita. Kita akan menambahkan bagian baru untuk “Keahlian” dan “Riwayat Pendidikan”.
- Tujuan: Menambahkan informasi terstruktur mengenai keahlian dan riwayat pendidikan ke dalam halaman portofolio.
- Tugas Anda:
- Buka kembali file
index.htmldari proyekportofolio-saya. - Salin kode di bawah ini dan tempelkan tepat di bawah bagian “Tentang Saya” (di bawah
</p>dari paragraf Tentang Saya, dan sebelum<h2>Hubungi Saya</h2>). - Ganti konten placeholder dengan informasi Anda sendiri.
- Buka kembali file
Kode Baru untuk Ditempelkan:
<h2>Keahlian</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>Dasar-dasar Desain Grafis</li>
<li>Public Speaking</li>
</ul>
<h2>Riwayat Pendidikan</h2>
<table>
<thead>
<tr>
<th>Jenjang</th>
<th>Nama Sekolah / Universitas</th>
<th>Tahun Lulus</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sarjana (S1)</td>
<td>Universitas Teknologi Koding</td>
<td>2024</td>
</tr>
<tr>
<td>SMA</td>
<td>SMA Negeri 1 WebDev</td>
<td>2020</td>
</tr>
</tbody>
</table>Penjelasan Kode:
- Kita membuat bagian “Keahlian” menggunakan
<h2>. Karena urutan keahlian tidak terlalu penting, kita menggunakan Unordered List (<ul>) untuk menampilkannya. Ini cara yang bersih dan rapi untuk listing skills. - Selanjutnya, kita membuat bagian “Riwayat Pendidikan”. Data ini sangat cocok untuk format tabel karena memiliki kolom yang jelas (Jenjang, Nama Sekolah, Tahun).
- Kita menggunakan struktur tabel yang semantik dengan
<thead>untuk header dan<tbody>untuk isi data, membuat kode kita profesional.
Setelah Anda menambahkan kode dan mengganti isinya, simpan file index.html dan refresh halaman di browser.
[Screenshot of what the portfolio page should look like after this module, showing the new Skills list and Education table]
Lihat perbedaannya! Informasi Anda kini tersaji dengan sangat jelas dan terorganisir.
Kesimpulan & Langkah Selanjutnya
Anda telah membuat kemajuan besar! Portofolio Anda kini tidak hanya berisi narasi, tetapi juga data terstruktur yang mudah dipindai oleh mata pengunjung (atau perekrut!).
Anda sekarang tahu cara:
- Membuat daftar tak berurutan dengan
<ul>dan<li>untuk item-item. - Membuat daftar berurutan dengan
<ol>dan<li>untuk langkah-langkah. - Membangun tabel yang semantik dan terstruktur dengan
<table>,<thead>,<tbody>,<tr>,<th>, dan<td>.
Di Modul 4, kita akan masuk ke salah satu bagian paling interaktif dari web: Formulir (Forms). Kita akan mengganti bagian “Hubungi Saya” yang statis dengan formulir kontak sungguhan yang bisa diisi oleh pengunjung.
Ini akan menjadi langkah besar untuk membuat portofolio Anda lebih fungsional. Sampai jumpa di sana!
Sumber dan Referensi
- MDN – Lists: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
- MDN – Tables: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
- W3Schools – HTML Lists: https://www.w3schools.com/html/html_lists.asp
- W3Schools – HTML Tables: https://www.w3schools.com/html/html_tables.asp
- freeCodeCamp – HTML Tables – Table Tutorial for Beginners: https://www.freecodecamp.org/news/html-tables-table-tutorial-for-beginners/