Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Membuat daftar tidak berurutan (
<ul>) dengan poin-poin - Membuat daftar berurutan (
<ol>) dengan nomor - Membuat daftar bersarang (list di dalam list)
Materi Singkat
Pernahkah kamu membuat daftar belanja? Atau langkah-langkah memasak? Dalam kehidupan sehari-hari kita sering membuat dua jenis daftar:
- Daftar dengan urutan penting (langkah memasak — urutannya tidak bisa ditukar)
- Daftar tanpa urutan penting (daftar belanja — beli mana dulu tidak masalah)
HTML punya tag yang tepat untuk keduanya.
Unordered List <ul>: Daftar Tanpa Urutan
Menghasilkan daftar dengan titik-titik (bullet points).
<ul>
<li>Apel</li>
<li>Mangga</li>
<li>Pisang</li>
</ul><ul>— membuka daftar (unordered list)<li>— setiap item daftar (list item)</ul>— menutup daftar
Ordered List <ol>: Daftar Berurutan
Menghasilkan daftar dengan angka 1, 2, 3, dst.
<ol>
<li>Panaskan air</li>
<li>Masukkan mie</li>
<li>Tambahkan bumbu</li>
<li>Sajikan</li>
</ol>Daftar Bersarang
Kamu bisa menaruh list di dalam list — seperti daftar isi buku yang punya sub-bab.
<ul>
<li>Buah-buahan
<ul>
<li>Apel</li>
<li>Mangga</li>
</ul>
</li>
<li>Sayuran
<ul>
<li>Bayam</li>
<li>Wortel</li>
</ul>
</li>
</ul>Perhatikan indentasi (tab) — ini bukan keharusan teknis, tapi membantu kita membaca kode dengan lebih mudah.
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Resep Mie Goreng</title>
</head>
<body>
<h1>Resep Mie Goreng Sederhana</h1>
<h2>Bahan-bahan</h2>
<ul>
<li>1 bungkus mie instan</li>
<li>2 butir telur</li>
<li>Sayuran (opsional):
<ul>
<li>Kol</li>
<li>Wortel</li>
</ul>
</li>
<li>Minyak goreng secukupnya</li>
</ul>
<h2>Langkah-langkah</h2>
<ol>
<li>Rebus mie selama 3 menit, tiriskan</li>
<li>Panaskan minyak di wajan</li>
<li>Masukkan telur, orak-arik</li>
<li>Tambahkan mie dan bumbu</li>
<li>Aduk rata dan sajikan</li>
</ol>
</body>
</html>Tugas Kecil
- Buat file HTML baru bernama
daftar.html - Buat halaman yang berisi:
<h1>"Tentang Saya"<h2>"Keahlian Saya" dengan<ul>berisi minimal 3 keahlian/hobi<h2>"Rencana Belajar" dengan<ol>berisi 4 langkah rencana belajar codingmu secara berurutan<h2>"Bahasa yang Ingin Dipelajari" dengan<ul>berisi setidaknya 2 bahasa pemrograman, masing-masing punya sub-list<ul>berisi alasan kenapa ingin belajarnya