HTML - Senarai Tidak Diberturut
Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan dari senarai tak terurut HTML. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk mengantar anda dalam perjalanan ini. Percayalah, pada akhir tutorial ini, anda akan membuat senarai seperti seorang ahli!
Apa Itu Senarai Tak Terurut?
Sebelum kita masuk ke kode, mari kita mengerti apa itu senarai tak terurut. Dalam HTML, senarai tak terurut adalah kumpulan item yang terkait dan tidak memiliki urutan khusus. Bayangkan seperti daftar belanja - Anda tidak pasti perlu 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 senarai tak terurut menggunakan tag <ul>, dan setiap item dalam senarai diwrap dalam tag <li>. Mari kita 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 jika Anda ingin mengubah tanda bulat itu? Itu adalah tempat bagian berikutnya akan membantu!
Senarai Tak Terurut HTML - Pilih Marker Item Senarai
Sekarang, mari kita perpadat hal ini sedikit. HTML mengijinkan kita untuk mengubah gaya tanda bulat, atau seperti yang kita sebut di bisnis ini, "marker item senarai". Kita memiliki tiga pilihan utama:
- disc (default)
- bulat
- kotak
Untuk mengubah marker, kita gunakan atribut type dalam tag <ul>. Mari kita lihat bagaimana ini bekerja:
<ul type="disc">
<li>Senarai ini menggunakan marker disc default</li>
</ul>
<ul type="circle">
<li>Senarai ini menggunakan marker bulat</li>
</ul>
<ul type="square">
<li>Senarai ini menggunakan marker kotak</li>
</ul>Kode ini akan ditampilkan sebagai:
• Senarai ini menggunakan marker disc default
○ Senarai ini menggunakan marker bulat
■ Senarai ini menggunakan marker kotak
Keren, kan? Itu seperti memberikan senarai Anda penampilan mini!
Contoh Senarai Tak Terurut
Sekarang kita sudah mengenal dasar-dasar, mari kita lihat beberapa contoh yang lebih kompleks. Ingat, praktik membuat sempurna, jadi jangan ragu untuk menyalin contoh ini dan mencoba mereka sendiri!
Senarai Tak Terurut Bersarang
kadang-kadang, Anda mungkin ingin membuat senarai dalam senarai. Kita sebut ini senarai bersarang. Berikut adalah cara 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 senarai bersarang diberi inden? Itu adalah cara HTML menunjukkan bahwa item ini adalah sub-kategori "Tea".
Senarai Tak Terurut Dengan Tautan
Senarai tidak hanya untuk teks sederhana. Anda dapat menambahkan elemen HTML lain di dalam item senarai. Misalnya, mari kita buat senarai situs web favorit:
<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 senarai yang dapat diklik:
Senarai Tak Terurut Dengan Gambar
Mari kita menjadi lebih menarik dan menambahkan beberapa gambar ke senarai 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 senarai dengan gambar kecil di sebelah setiap nama buah. Itu adalah cara bagus untuk membuat senarai Anda lebih menarik secara visual!
Ringkasan Metode Senarai Tak Terurut
Berikut adalah tabel praktis yang menggabungkan metode yang kita pelajari untuk membuat dan menyesuaikan senarai tak terurut:
| Metode | Sintaks | Deskripsi |
|---|---|---|
| Senarai Tak Terurut Dasar | <ul><li>Item</li></ul> |
Membuat senarai tak terurut dasar |
| Ubah Marker Senarai | <ul type="circle"> |
Mengubah gaya marker item senarai |
| Senarai Bersarang | <ul><li><ul><li>Item Bersarang</li></ul></li></ul> |
Membuat senarai dalam senarai |
| Senarai Dengan Tautan | <ul><li><a href="url">Tautan</a></li></ul> |
Membuat senarai tautan yang dapat diklik |
| Senarai Dengan Gambar | <ul><li><img src="image.jpg"> Item</li></ul> |
Menambahkan gambar ke item senarai |
Dan itu adalah dia, teman-teman! Anda sekarang siap untuk membuat dan menyesuaikan senarai tak terurut dalam HTML. Ingat, kunci untuk menguasai keterampilan ini adalah praktik. Jadi, teruskan untuk mencoba contoh ini dan jangan takut untuk menjadi kreatif!
Sementara kita menyusun, saya teringat tentang一个小小的编程笑话: Mengapa pengembang keluar dari pekerjaannya? Karena dia tidak mendapatkan array! ? Jangan khawatir, kita akan belajar tentang array pada hari lain. Untuk saat ini, teruskan untuk membuat senarai dan terus mengoding!
Credits: Image by storyset