Panduan Lengkap untuk Pemula: Senarai dalam HTML

Hai teman-teman yang sedang belajar pemrograman web! Hari ini, kita akan melihat dunia yang menakjubkan dari senarai dalam HTML. Seperti guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Senarai adalah seperti pahlawan tak dikenal dalam desain web – mereka membawa ketenteraman ke dalam kekacauan dan membuat informasi mudah untuk dipahami. Jadi, mari kita mulai dan buat senarai!

Senarai dalam HTML

Senarai adalah bagian fundamental dalam mengatur informasi di halaman web. Mereka membantu mengstrukturkan konten dalam cara yang mudah untuk pengguna membaca dan memahami. Dalam HTML, kita memiliki tiga jenis utama senarai:

1. Senarai Tak Terurut (ul)
2. Senarai Terurut (ol)
3. Senarai Deskripsi (dl)

mari kita jelajahi setiap jenis ini secara rinci.

Senarai Tak Terurut

Senarai tak terurut adalah seperti daftar belanja Anda – urutan nya tidak penting, tetapi itemnya ya. Mereka biasanya ditampilkan dengan tanda bulet.

<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Ceri</li>
</ul>

Kode ini akan ditampilkan sebagai:

• Apel
• Pisang
• Ceri

Tag <ul> membuat senarai tak terurut, sedangkan setiap tag <li> mewakili item senarai.

Senarai Terurut

Senarai terurut adalah seperti setengah instruksi – urutan nya penting. Mereka biasanya ditampilkan dengan nomor.

<ol>
<li>Bangun tidur</li>
<li>Sikat gigi</li>
<li>Makan pagi</li>
</ol>

Ini akan ditampilkan sebagai:

1. Bangun tidur
2. Sikat gigi
3. Makan pagi

Tag <ol> membuat senarai terurut, dan lagi, tag <li> digunakan untuk setiap item.

Senarai Deskripsi

Senarai deskripsi adalah seperti kamus – mereka mempairingkan istilah dengan definisinya.

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Ini akan ditampilkan sebagai:

HTML : HyperText Markup Language

CSS : Cascading Style Sheets

Di sini, <dl> membuat senarai deskripsi, <dt> menentukan istilah, dan <dd> menyediakan deskripsi.

Contoh Senarai HTML

Sekarang kita telah melihat dasar-dasar nya, mari kita lihat beberapa contoh untuk memperkuat pemahaman kita.

Daftar Tugas

<h2>Daftar Tugas Saya</h2>
<ul>
<li>Selesaikan tutorial HTML</li>
<li>Latihan coding</li>
<li>ambil coffe break</li>
<li>Mulai tutorial CSS</li>
</ul>

Ini membuat daftar tugas sederhana menggunakan senarai tak terurut. Hal ini sempurna untuk saat Anda tidak memerlukan urutan khusus untuk tugas Anda.

Instruksi Resep

<h2>Buat Sandwich PB&J</h2>
<ol>
<li>Dapatkan dua potong roti</li>
<li>Spread mentega di salah satu potong</li>
<li>Spread jelly di potong lainnya</li>
<li>Letakkan potong-potong bersama</li>
<li>Nikmati sandwich Anda!</li>
</ol>

Senarai ini ideal untuk langkah-langkah berurutan di mana urutan nya penting.

Senarai Bersarang dalam HTML

kadang-kadang, Anda perlu membuat senarai didalam senarai. Ini di mana senarai bersarang berguna.

<h2>Path Belajar Web Development</h2>
<ol>
<li>Belajar HTML
<ul>
<li>Tag</li>
<li>Atribut</li>
<li>Senarai</li>
</ul>
</li>
<li>Belajar CSS
<ul>
<li>Pemilih</li>
<li>Properti</li>
<li>Box Model</li>
</ul>
</li>
<li>Belajar JavaScript</li>
</ol>

Ini membuat struktur bersarang di mana topik utama berada di dalam senarai terurut, dan subtopik berada di dalam senarai tak terurut didalam item senarai utama.

Grup dengan Tag <div>

Tag <div> adalah wadah multifungsi yang dapat digunakan untuk mengelompokkan dan gayakan senarai bersamaan dengan elemen lain.

<div class="list-container">
<h3>Fruit kesukaanku</h3>
<ul>
<li>Mangga</li>
<li>Strawberry</li>
<li>Nanas</li>
</ul>
</div>

Ini mengelompokkan judul dan senarai bersamaan, membuatnya mudah untuk gayakan atau mengubahnya sebagai unit.

Menggunakan CSS untuk Senarai HTML

CSS dapat mengubah penampilan senarai Anda. Ini adalah contoh cepat:

<style>
ul.fancy {
list-style-type: square;
color: blue;
}
ol.fancy {
list-style-type: upper-roman;
color: green;
}
</style>

<ul class="fancy">
<li>Item tak terurut fancy 1</li>
<li>Item tak terurut fancy 2</li>
</ul>

<ol class="fancy">
<li>Item terurut fancy 1</li>
<li>Item terurut fancy 2</li>
</ol>

CSS ini mengubah gaya bullet senarai tak terurut menjadi kotak dan senarai terurut menjadi nomor Romawi atas, sedangkan juga mengubah warna nya.

Tipe Penanda dalam Senarai HTML

HTML menyediakan berbagai jenis penanda untuk senarai. Ini adalah tabel yang menggabungkan nya:

Tipe Senarai	Atribut Penanda	Deskripsi
Tak Terurut	disc	Default. Lingkaran berisi
Tak Terurut	circle	Lingkaran kosong
Tak Terurut	square	Kotak berisi
Terurut	decimal	Default. Nomor (1, 2, 3)
Terurut	lower-alpha	Huruf kecil (a, b, c)
Terurut	upper-alpha	Huruf besar (A, B, C)
Terurut	lower-roman	Nomor Romawi kecil (i, ii, iii)
Terurut	upper-roman	Nomor Romawi besar (I, II, III)

Anda dapat menerapkan ini menggunakan CSS seperti ini:

<style>
ul.custom { list-style-type: square; }
ol.custom { list-style-type: lower-roman; }
</style>

<ul class="custom">
<li>Item tak terurut custom</li>
</ul>

<ol class="custom">
<li>Item terurut custom</li>
</ol>

Dan begitu Anda memiliki nya, teman-teman! Kita telah mengembara melalui negeri senarai HTML, dari dasar-dasar ke gaya Fancy. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba jenis dan gaya senarai berbeda. Siapa tahu? Anda mungkin menjadi Michelangelo dari senarai HTML!

Selamat coding, dan semoga senarai Anda selalu rapih!

Credits: Image by storyset