Panduan Lengkap tentang List di HTML untuk Pemula

Halo teman-teman yang sedang belajar menjadi pengembang web! Hari ini, kita akan masuk ke dunia yang menakjubkan dari list HTML. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. List adalah seperti pahlawan tak ternama dalam desain web – mereka membawa ketenteraman ke chaos dan membuat informasi mudah untuk dipahami. Jadi, mari kita usap lengan dan mulai membuat list!

List di HTML

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

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

mari kita jelajahi masing-masing dari ini secara rinci.

List Tak Terurut

List tak terurut seperti daftar belanjaan Anda – urutan nya tidak penting, tapi item nya ya. Mereka biasanya ditampilkan dengan tanda bulat.

<ul>
<li>Apel</li>
<li>Buah Naga</li>
<li>Ceri</li>
</ul>

Kode ini akan tampil seperti ini:

• Apel
• Buah Naga
• Ceri

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

List Terurut

List terurut seperti set intruksi – urutan nya penting. Mereka biasanya ditampilkan dengan nomor.

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

Ini akan tampil seperti ini:

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

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

List Deskripsi

List deskripsi seperti kamus – mereka memasangkan istilah dengan definisi nya.

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

Ini akan tampil seperti ini:

HTML : HyperText Markup Language

CSS : Cascading Style Sheets

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

Contoh List HTML

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

Daftar Tugas

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

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

Instruksi Resep

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

List ini ideal untuk intruksi langkah demi langkah di mana urutan nya penting.

List Bersarang di HTML

kadang-kadang, Anda perlu membuat list dalam list. Ini di mana list bersarang berguna.

<h2>Path Belajar Pengembangan Web</h2>
<ol>
<li>Belajar HTML
<ul>
<li>Tag</li>
<li>Atribut</li>
<li>List</li>
</ul>
</li>
<li>Belajar CSS
<ul>
<li>Pemilih</li>
<li>Properti</li>
<li>Model Kotak</li>
</ul>
</li>
<li>Belajar JavaScript</li>
</ol>

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

Pengelompokan dengan Tag <div>

Tag <div> adalah wadah multifungsi yang dapat digunakan untuk mengelompokkan dan gayakan list serta elemen lainnya.

<div class="list-container">
<h3>Fruits Favorit Saya</h3>
<ul>
<li>Mangga</li>
<li>Strawberry</li>
<li>Nanas</li>
</ul>
</div>

Ini mengelompokkan judul dan list bersama, membuat nya mudah untuk gayakan atau memanipulasinya sebagai unit.

Menggunakan CSS untuk List HTML

CSS dapat mengubah penampilan list Anda. Berikut 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 tanda bulet list tak terurut menjadi kotak dan list terurut menjadi angka Romawi atas, serta mengubah warna nya.

Tipe Penanda di List HTML

HTML menyediakan berbagai jenis penanda untuk list. Berikut adalah tabel yang menjelaskan nya:

Tipe List	Atribut Penanda	Deskripsi
Tak Terurut	disc	Default. Lingkaran berisi
Tak Terurut	circle	Lingkaran kosong
Tak Terurut	square	Kotak berisi
Terurut	decimal	Default. Angka (1, 2, 3)
Terurut	lower-alpha	Huruf kecil (a, b, c)
Terurut	upper-alpha	Huruf besar (A, B, C)
Terurut	lower-roman	Angka Romawi kecil (i, ii, iii)
Terurut	upper-roman	Angka 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 begitulah, teman-teman! Kita telah melakukan perjalanan melalui tanah list HTML, dari dasar hingga gaya yang fancy. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba berbagai jenis list dan gaya. Siapa tahu? Anda mungkin menjadi Michelangelo dari list HTML!

Semangat coding, dan semoga list Anda selalu rapi!

Credits: Image by storyset