Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / Programming / WEB

Tutorial HTML #5 - Membuat Daftar Menggunakan List di HTML (Plus Studi Kasus)

Posting Komentar

Assalamualaikum sobat blogger semua, kali ini kita akan melanjutkan seri tutorial HTML Dasar kita. Setelah di artikel sebelumnya kita sudah belajar cara membuat paragraf, sekarang kita akan belajar hal yang gak kalah penting, yaitu membuat daftar atau list di HTML.

Dalam membuat website, kita pasti sering banget menyajikan data dalam bentuk poin-poin atau urutan. Di HTML, ada dua jenis list utama yang wajib lu tahu, yaitu Unordered List (daftar tidak berurutan) dan Ordered List (daftar berurutan).

Biar gak cuma teori, di akhir artikel kita bakal langsung bikin studi kasus gabungan yang sering dipakai di dunia nyata! Yuk, kita bahas satu per satu.

1. Unordered List (<ul>)

Unordered List digunakan kalau poin-poin yang lu tulis itu gak butuh urutan kronologis atau ranking. Karakter default-nya adalah simbol bulat hitam (bullet). Untuk membuatnya, kita pakai tag <ul> sebagai pembungkusnya, dan setiap item di dalamnya dibungkus dengan tag <li> (List Item).

Contoh Kodingan:

<ul>
    <li>HTML Dasar</li>
    <li>CSS Layouting</li>
    <li>JavaScript Modern</li>
</ul>

Hasil Output di Browser:

  • HTML Dasar
  • CSS Layouting
  • JavaScript Modern

2. Ordered List (<ol>)

Kebalikan dari yang pertama, Ordered List digunakan kalau daftar yang lu buat wajib berurutan (misal: langkah-langkah tutorial). Karakter default-nya adalah angka (1, 2, 3...). Cara bikinnya mirip, bedanya pembungkus utamanya pakai tag <ol>.

Contoh Kodingan:

<ol>
    <li>Install VS Code</li>
    <li>Buat file index.html</li>
    <li>Buka di Browser</li>
</ol>

Hasil Output di Browser:

  1. Install VS Code
  2. Buat file index.html
  3. Buka di Browser

🛠️ Studi Kasus: Membuat Struktur Kurikulum Belajar & Langkah Persiapan

Nah, sekarang mari kita gabungkan kedua jenis list di atas menjadi satu kesatuan (biasas disebut Nested List atau list bersarang). Kita akan membuat halaman "Rencana Belajar Web Programming" yang berisi urutan langkah persiapan beserta detail materi yang harus dipelajari.

Silakan lu buka text editor (VS Code), buat file baru atau pakai file latihan sebelumnya, lalu ketikkan kode berikut di dalam tag <body>:

Kode Studi Kasus:

<h3>Rencana Persiapan Belajar Web Programming</h3>

<!-- List Utama Menggunakan Ordered List karena harus berurutan -->
<ol>
    <li>
        <strong>Persiapan Tools Koding</strong>
        <!-- Menyisipkan Unordered List di dalam List Item -->
        <ul>
            <li>Download Google Chrome Browser</li>
            <li>Install VS Code Editor</li>
            <li>Install Extension Live Server</li>
        </ul>
    </li>
    
    <li>
        <strong>Kuasai Materi HTML Dasar</strong>
        <ul>
            <li>Memahami Tag, Elemen, dan Atribut</li>
            <li>Membuat Heading dan Paragraf</li>
            <li>Membuat Daftar dengan List</li>
        </ul>
    </li>
    
    <li>
        <strong>Mulai Praktek Bikin Project Pertama</strong>
        <ul>
            <li>Bikin struktur halaman web portofolio statis</li>
        </ul>
    </li>
</ol>

Hasil Output di Browser:

Rencana Persiapan Belajar Web Programming

  1. Persiapan Tools Koding
    • Download Google Chrome Browser
    • Install VS Code Editor
    • Install Extension Live Server
  2. Kuasai Materi HTML Dasar
    • Memahami Tag, Elemen, dan Atribut
    • Membuat Heading dan Paragraf
    • Membuat Daftar dengan List
  3. Mulai Praktek Bikin Project Pertama
    • Bikin struktur halaman web portofolio statis

Kenapa Struktur Kode di Atas Menarik?

Kalau lu perhatikan, kita memasukkan tag <ul> di dalam tag <li> milik <ol>. Hasilnya di browser nanti, poin nomor 1, 2, dan 3 akan berupa angka, sementara detail di bawahnya otomatis menjorok ke dalam dan menggunakan simbol bullet. Teknik ini sering banget dipakai buat bikin struktur menu drop-down atau daftar isi e-book/kursus online!

Kesimpulan

Membuat daftar di HTML itu simpel tapi krusial. Lu cuma perlu paham kapan harus pakai <ul> (tanpa urutan) dan kapan harus pakai <ol> (butuh urutan), serta bagaimana cara menggabungkannya seperti pada studi kasus kita di atas.

Sampai di sini dulu tutorial kali ini. Coba lu praktekkin studi kasus di atas di laptop masing-masing. Kalau ada yang tampilannya berantakan atau kodenya gak jalan, langsung aja Posting Komentar di bawah ya, kita diskusikan bareng!

Sampai jumpa di tutorial selanjutnya!

Posting Komentar untuk "Tutorial HTML #5 - Membuat Daftar Menggunakan List di HTML (Plus Studi Kasus)"