HTML - Senarai Tertib: Panduan untuk Pemula

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia menarik dari senarai tertib HTML. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan yang ramah dalam perjalanan ini. Pada akhir panduan ini, Anda akan membuat senarai tertib seperti seorang profesional!

Apa Itu Senarai Tertib?

Sebelum kita masuk ke kode, mari kita mengerti apa itu senarai tertib. Bayangkan Anda menulis langkah-langkah membuat sandwich. Anda tentu tidak ingin mencampur aduk urutan nya, kan? Itu adalah tempat senarai tertib berguna. Mereka sempurna untuk setiap konten yang perlu dalam urutan khusus.

Sintaks: Blok Pembangun Senarai Tertib

Sekarang, mari kita meraba kode. Ini adalah sintaks dasar untuk membuat senarai tertib di HTML:

<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>

mari kita pecahkan ini:

• <ol> berarti "senarai tertib". Itu seperti wadah untuk semua item daftar Anda.
• <li> berarti "item senarai". Setiap tag <li> mewakili satu item di daftar Anda.

Ketika Anda menjalankan kode ini, itu akan terlihat seperti ini:

1. Item pertama
2. Item kedua
3. Item ketiga

Menarik, kan? Browser secara otomatis menomor item Anda!

Menentukan Senarai Tertib: Menambah Kreatifitas

Sekarang kita sudah mengenal dasar-dasar nya, mari kita menambahkan sedikit perisa. HTML menawarkan beberapa atribut menarik untuk menyesuaikan senarai Anda.

Atribut 'start'

Apa jika Anda ingin senarai Anda dimulai dengan nomor selain 1? Itu adalah tempat atribut 'start' berada:

<ol start="5">
<liIni akan menjadi nomor 5</li>
<liIni akan menjadi nomor 6</li>
<liIni akan menjadi nomor 7</li>
</ol>

Ini akan ditampilkan sebagai:

5. Ini akan menjadi nomor 5
6. Ini akan menjadi nomor 6
7. Ini akan menjadi nomor 7

Atribut 'reversed'

Ingin menghitung ke belakang? Cobalah atribut 'reversed':

<ol start="5" reversed>
<liIni akan menjadi nomor 5</li>
<liIni akan menjadi nomor 4</li>
<liIni akan menjadi nomor 3</li>
</ol>

Ini akan muncul sebagai:

5. Ini akan menjadi nomor 5
6. Ini akan menjadi nomor 4
7. Ini akan menjadi nomor 3

Contoh Senarai Tertib HTML: Menggabungkan Segala Hal

mari kita lihat contoh yang lebih kompleks. Katakanlah kita membuat resep untuk sandwich yang kami sebut sebelumnya:

<h2>Buat Sandwich PB&J</h2>
<ol>
<li>Racik bahan-bahan Anda:
<ul>
<li>2 keping roti</li>
<li>Keju kacang</li>
<li>Jelly</li>
</ul>
</li>
<li>Spread keju kacang di salah satu keping roti</li>
<li>Spread jelly di keping roti lainnya</li>
<li>Gabungkan dua keping roti</li>
<li>Nikmati sandwich Anda!</li>
</ol>

Ini akan ditampilkan sebagai:

Buat Sandwich PB&J

1. Racik bahan-bahan Anda:

• 2 keping roti
• Keju kacang
• Jelly

2. Spread keju kacang di salah satu keping roti
3. Spread jelly di keping roti lainnya
4. Gabungkan dua keping roti
5. Nikmati sandwich Anda!

Perhatikan bagaimana kita menempatkan senarai tak tertib (<ul>) dalam senarai tertib? Itu keindahan HTML - Anda dapat mencampur dan mencocokkan untuk membuat struktur yang kompleks!

Atribut 'type' Senarai Tertib HTML: Mengubah gaya Penomoran

Sekarang, mari kita bicarakan atribut 'type'. Atribut kecil ini memungkinkan Anda mengubah gaya penomoran daftar Anda. Ini adalah pilihan-pilihan:

Nilai Tipe	Deskripsi
1	Default. Angka desimal (1, 2, 3, 4)
A	Huruf kapital (A, B, C, D)
a	Huruf kecil (a, b, c, d)
I	Nomor Romawi kapital (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 sebagai:

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

Menarik, kan? Anda dapat menggunakan gaya ini untuk mencocokkan nada dan tujuan konten Anda.

Penutup

Dan begitu saja, teman-teman! Anda telah mengambil langkah pertama ke dunia senarai tertib HTML. Ingat, kunci untuk menguasai ini (atau konsep coding apa pun) adalah latihan. Cobalah membuat jenis daftar yang berbeda, masukkan mereka dalam satu sama lain, mainkan dengan atribut. Semakin banyak Anda mencoba, semakin nyaman Anda akan merasakan.

Dalam tahun-tahun pengajaran saya, saya menemukan bahwa siswa yang mendekati coding dengan kecurigaan dan kesediaan untuk membuat kesalahan belajar tercepat. Jadi jangan takut untuk mengganggu hal-hal - itu sering kali bagaimana kita belajar paling banyak!

Tetap mengoding, tetap belajar, dan sebelum Anda menyadari, Anda akan membuat halaman web yang indah dan terstruktur. Sampai jumpa lagi, selamat listing!

Credits: Image by storyset