HTML - Daftar Tak Terurut

Halo teman-teman pengembang web masa depan! Hari ini, kita akan mendalamkan dunia menakjubkan HTML daftar tak terurut. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Percayalah, pada akhir tutorial ini, Anda akan membuat daftar seperti seorang pro!

HTML - Unordered Lists

Apa Itu Daftar Tak Terurut?

Sebelum kita melompat ke kode, mari pahami apa itu daftar tak terurut. Dalam HTML, daftar tak terurut adalah kumpulan item yang terkait dan tidak memiliki urutan khusus. Pensejukkan seperti daftar belanja - Anda tidak harus membeli roti sebelum susu, atau apel sebelum pisang. Urutan itu tidak penting, tetapi mereka semua adalah bagian dari daftar yang sama.

Dalam HTML, kita membuat daftar tak terurut menggunakan tag <ul>, dan setiap item di daftar dibungkus dalam tag <li>. Mari lihat contoh sederhana:

<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>

Kode ini akan ditampilkan sebagai:

Apel
Pisang
Jeruk

Lihat betapa mudah itu? Browser secara otomatis menambahkan tanda bulat ke setiap item. Tetapi, apa bila Anda ingin mengubah tanda bulat itu? Itu adalah tempat bagian berikutnya berguna!

Daftar Tak Terurut HTML - Pilih Marker Item Daftar

Sekarang, mari kita perpadat hal ini sedikit. HTML mengijinkan kita untuk mengubah gaya tanda bulat kita, atau seperti yang kita sebut di bisnis ini, "marker item daftar". Ada tiga opsi utama:

disc (default)
circle
square

Untuk mengubah marker, kita gunakan atribut type dalam tag <ul>. Mari lihat bagaimana ini bekerja:

<ul type="disc">
<li>Daftar ini menggunakan marker disc default</li>
</ul>

<ul type="circle">
<li>Daftar ini menggunakan marker bulat</li>
</ul>

<ul type="square">
<li>Daftar ini menggunakan marker kotak</li>
</ul>

Kode ini akan ditampilkan sebagai:

• Daftar ini menggunakan marker disc default

○ Daftar ini menggunakan marker bulat

■ Daftar ini menggunakan marker kotak

Keren, kan? Seperti memberi daftar Anda sebuah lifting wajah mini!

Contoh Daftar Tak Terurut

Sekarang kita sudah menguasai dasar-dasar, mari lihat beberapa contoh yang lebih kompleks. Ingat, latihan membuat sempurna, jadi jangan ragu untuk menyalin contoh ini dan mencoba sendiri!

Daftar Tak Terurut Tertanam

kadang-kadang, Anda mungkin ingin membuat daftar dalam daftar. Kita sebut ini daftar tertanam. mari lihat bagaimana Anda dapat melakukannya:

<ul>
<li>Kopi</li>
<li>Tea
<ul>
<li>Tea hitam</li>
<li>Tea hijau</li>
<li>Tea herbal</li>
</ul>
</li>
<li>Susu</li>
</ul>

Ini akan ditampilkan sebagai:

Kopi
Tea
Tea hitam
Tea hijau
Tea herbal
Susu

Perhatikan bagaimana daftar tertanam diberi indentasi? Itu adalah cara HTML menunjukkan bahwa item ini adalah sub-kategori "Tea".

Daftar Tak Terurut Dengan Tautan

Daftar tidak hanya untuk teks saja. Anda dapat menyertakan elemen HTML lain dalam item daftar Anda. Misalnya, mari kita buat daftar situs web kesukaan:

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Ini akan membuat daftar tautan yang dapat diklik:

Daftar Tak Terurut Dengan Gambar

Mari kita menjadi lebih mewah dan menambahkan beberapa gambar ke daftar kami:

<ul>
<li><img src="apple.jpg" alt="Apel"> Apel</li>
<li><img src="banana.jpg" alt="Pisang"> Pisang</li>
<li><img src="orange.jpg" alt="Jeruk"> Jeruk</li>
</ul>

Kode ini akan menampilkan daftar dengan gambar kecil di sebelah setiap nama buah. Itu adalah cara bagus untuk membuat daftar Anda lebih menarik secara visual!

Ringkasan Metode Daftar Tak Terurut

Berikut adalah tabel praktis yang menggabungkan metode yang kita pelajari untuk membuat dan menyesuaikan daftar tak terurut:

Metode	Sinkronisasi	Deskripsi
Daftar Tak Terurut Dasar	`<ul><li>Item</li></ul>`	Membuat daftar tak terurut dasar
Ubah Marker Daftar	`<ul type="circle">`	Mengubah gaya marker item daftar
Daftar Tertanam	`<ul><li><ul><li>Item Tertanam</li></ul></li></ul>`	Membuat daftar dalam daftar
Daftar Dengan Tautan	`<ul><li><a href="url">Tautan</a></li></ul>`	Membuat daftar tautan yang dapat diklik
Daftar Dengan Gambar	`<ul><li><img src="image.jpg"> Item</li></ul>`	Menambahkan gambar ke item daftar

Dan itu adalah, teman-teman! Anda sekarang siap untuk membuat dan menyesuaikan daftar tak terurut di HTML. Ingat, kunci untuk menguasai keterampilan ini adalah latihan. Jadi, teruskan untuk mencoba contoh ini dan jangan takut untuk menjadi kreatif!

Sementara itu, saya ingat tentang一个小小的编程笑话: Mengapa pengembang keluar dari pekerjaannya? Karena dia tidak mendapatkan array! ? Jangan khawatir, kita akan belajar array nanti. Untuk saat ini, terus listing dan terus mengoding!

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Daftar

Tutorial Selanjutnya:

HTML - Daftar Terurut