HTML - Ordered Lists: A Beginner's Guide
Halo teman-teman pengembang web masa depan! Hari ini, kita akan masuk ke dunia yang menarik dari senarai berurutan HTML. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - saya akan menjadi panduan ramah bagi Anda dalam perjalanan ini. Pada akhir panduan ini, Anda akan dapat membuat senarai berurutan seperti seorang ahli!
Apa Itu Senarai Berurutan?
Sebelum kita masuk ke kode, mari kita mengerti apa itu senarai berurutan. Bayangkan Anda menulis langkah-langkah membuat sandwich. Anda tidak ingin mencampur aduk urutan nya, kan? Itulah tempat senarai berurutan berguna. Mereka sempurna untuk setiap konten yang perlu dalam urutan tertentu.
Sintaks: Blok Pembangun Senarai Berurutan
Sekarang, mari kita meraba-raba beberapa kode. Berikut adalah sintaks dasar untuk membuat senarai berurutan di HTML:
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>mari kitauraikan ini:
-
<ol>berarti "senarai berurutan". Itu seperti wadah untuk semua item senarai Anda. -
<li>berarti "item senarai". Setiap<li>tag mewakili satu item di dalam senarai Anda.
Ketika Anda menjalankan kode ini, itu akan terlihat seperti ini:
- Item pertama
- Item kedua
- Item ketiga
Keren, kan? Browser secara otomatis menomori item Anda!
Menentukan Senarai Berurutan: Menambah Kreativitas
Sekarang kita telah mengetahui dasarnya, mari kita menambahkan sedikit perasaan. HTML menawarkan beberapa atribut menarik untuk menyesuaikan senarai berurutan Anda.
Atribut 'start'
Apa bila Anda ingin senarai Anda dimulai dengan nomor selain 1? Itulah tempat atribut 'start' berada:
<ol start="5">
<li Ini akan menjadi nomor 5</li>
<li Ini akan menjadi nomor 6</li>
<li Ini akan menjadi nomor 7</li>
</ol>Ini akan ditampilkan seperti ini:
- Ini akan menjadi nomor 5
- Ini akan menjadi nomor 6
- Ini akan menjadi nomor 7
Atribut 'reversed'
Ingin menghitung ke belakang? Cobalah atribut 'reversed':
<ol start="5" reversed>
<li Ini akan menjadi nomor 5</li>
<li Ini akan menjadi nomor 4</li>
<li Ini akan menjadi nomor 3</li>
</ol>Ini akan tampak seperti ini:
- Ini akan menjadi nomor 5
- Ini akan menjadi nomor 4
- Ini akan menjadi nomor 3
Contoh Senarai Berurutan HTML: Menyatukan Semua
mari kita lihat contoh yang lebih kompleks. Katakanlah kita membuat resep untuk sandwich yang kita sebutkan sebelumnya:
<h2>Cara Membuat Sandwich PB&J</h2>
<ol>
<li>Rakit bahan-bahan Anda:
<ul>
<li>2 potong roti</li>
<li>Minyak kacang</li>
<li>Jelly</li>
</ul>
</li>
<li>Spread minyak kacang di satu potong roti</li>
<li>Spread jelly di potong roti lainnya</li>
<li>Birungi dua potong itu</li>
<li>Nikmati sandwich Anda!</li>
</ol>Ini akan ditampilkan seperti ini:
Cara Membuat Sandwich PB&J
- Rakit bahan-bahan Anda:
- 2 potong roti
- Minyak kacang
- Jelly
- Spread minyak kacang di satu potong roti
- Spread jelly di potong roti lainnya
- Birungi dua potong itu
- Nikmati sandwich Anda!
Perhatikan bagaimana kita menanamkan senarai tak berurutan (<ul>) di dalam senarai berurutan? Itu keindahan HTML - Anda dapatcampur dan cocok untuk membuat struktur yang kompleks!
Atribut 'type' Senarai Berurutan HTML: Mengubah gaya Penomoran
Sekarang, mari kita bicarakan atribut 'type'. Atribut kecil ini memungkinkan Anda mengubah gaya penomoran senarai Anda. Berikut adalah opsi-opsi:
| Nilai Type | Deskripsi |
|---|---|
| 1 | Default. Angka desimal (1, 2, 3, 4) |
| A | Huruf besar (A, B, C, D) |
| a | Huruf kecil (a, b, c, d) |
| I | Nomor Romawi besar (I, II, III, IV) |
| i | Nomor Romawi kecil (i, ii, iii, iv) |
mari kita lihat ini dalam aksi:
<ol type="A">
<li Ini akan menjadi A</li>
<li Ini akan menjadi B</li>
<li Ini akan menjadi C</li>
</ol>
<ol type="i">
<li Ini akan menjadi i</li>
<li Ini akan menjadi ii</li>
<li Ini akan menjadi iii</li>
</ol>Ini akan ditampilkan seperti ini:
A. Ini akan menjadi A B. Ini akan menjadi B C. Ini akan menjadi C
i. Ini akan menjadi i ii. Ini akan menjadi ii iii. Ini akan menjadi iii
Bagus kan? Anda dapat menggunakan gaya ini untuk mencocokkan nada dan tujuan konten Anda.
Penutup
Dan itulah, teman-teman! Anda baru saja mengambil langkah pertama ke dunia senarai berurutan HTML. Ingat, kunci untuk menguasai ini (atau konsep coding apa pun) adalah praktik. Cobalah membuat jenis senarai yang berbeda, tanamkan mereka satu di dalam yang lain, mainkan dengan atribut. Semakin banyak Anda mencoba, semakin nyaman Anda akan merasakan.
Dalam tahun-tahun mengajar saya, saya menemukan bahwa siswa yang mendekati coding dengan kecurigaan dan kesediaan untuk membuat kesalahan belajar tercepat. Jadi, jangan takut untuk merusak sesuatu - itu seringkali bagaimana kita belajar paling banyak!
Terus coding, terus belajar, dan sebelum Anda tahu, Anda akan membuat halaman web yang indah dan terstruktur. Sampai jumpa lagi, semangat listing!
Credits: Image by storyset