Chapter 7: ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾ (Ordered Lists) നിർമ്മിക്കുക (Creating Ordered Lists in HTML)

HTML ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾ എന്താണ്?

HTML-ൽ ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾ സംഖ്യകളുടെ ക്രമത്തിലുള്ള ലിസ്റ്റുകളാണ്. ഇതിന് <ol> (Ordered List) ടാഗ് ഉപയോഗിക്കുന്നു. ഓരോ ലിസ്റ്റ് ഇനവും <li> (List Item) ടാഗ് ഉപയോഗിച്ച് സൃഷ്ടിക്കപ്പെടുന്നു.

HTML <ol> ടാഗിന്റെ ഘടന:

<ol>
  <li>പഥനം 1</li>
  <li>പഥനം 2</li>
  <li>പഥനം 3</li>
</ol>

ഈ കോഡിൽ, <ol> ടാഗ് ഒരു ഓർഡർ ചെയ്ത ലിസ്റ്റ് നിർമ്മിക്കുന്നു, ഓരോ ലിസ്റ്റ് ഇനം <li> ടാഗുകൾ ഉപയോഗിച്ച് പദിപ്പിക്കുന്നു.

Example:

<ol>
  <li>HTML പഠിക്കുക</li>
  <li>CSS പഠിക്കുക</li>
  <li>JavaScript പഠിക്കുക</li>
</ol>

ഇത് ഒരു ഓർഡർ ചെയ്ത ലിസ്റ്റ് ആണ്, സംഖ്യകളുടെ ക്രമത്തിൽ ഉള്ളടക്കം കാണിക്കുന്നു.

ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾക്കുള്ള അക്ഷരമാല ക്രമം:

HTML-ൽ സംഖ്യകൾക്കുപുറമെ അക്ഷരമാലാ ക്രമം (A, B, C…) ഉപയോഗിച്ചും ലിസ്റ്റുകൾ നിർമ്മിക്കാം. ഇത് <ol>ടാഗിൽ type ആട്രിബ്യൂട്ട് ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

• type=”A”: Capital letters.
• type=”a”: Small letters.
• type=”I”: Roman numerals (uppercase).
• type=”i”: Roman numerals (lowercase).

വ്യാപ്തം ക്രമപ്പെടുത്തൽ (Reversed Ordered Lists):

ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾക്ക് വർത്തമാന ലിസ്റ്റ് ഇനങ്ങൾ മാറ്റി നിരപ്പിക്കാൻ കഴിയും. അത്

ഓർഡർ തിരിച്ച് കാണിക്കാൻ reversed ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു.

<ol reversed>
  <li>Item 3</li>
  <li>Item 2</li>
  <li>Item 1</li>
</ol>

ലിസ്റ്റ് ആരംഭിക്കേണ്ട സംഖ്യ നിയന്ത്രിക്കുക:

ലിസ്റ്റ് സംഖ്യ ഏതെങ്കിലും പ്രത്യേക സംഖ്യയിൽ തുടങ്ങേണ്ടതുണ്ടെങ്കിൽ, start ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം.

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾക്കുള്ള ഉദാഹരണം:

<ol type="I" start="3">
  <li>പഥനം 3</li>
  <li>പഥനം 4</li>
  <li>പഥനം 5</li>
</ol>

CSS ഉപയോഗിച്ച് ലിസ്റ്റുകൾക്ക് സ്റ്റൈലിംഗ് നൽകുക:

CSS ഉപയോഗിച്ച് ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾക്ക് സ്റ്റൈൽ നൽകാനും വർണ്ണം, ഫോണ്ട് എന്നിവ മാറ്റാനും കഴിയും.

<ol style="color:blue; font-size:20px;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

---

സങ്കലനം:

ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾ HTML-ൽ നമ്പർ ക്രമത്തിലുള്ള വിവരങ്ങൾ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. ഇത് ഇനങ്ങൾക്ക് സംഖ്യകളോ അക്ഷരമാലാ ക്രമമോ നൽകുന്ന ക്രമീകരണ മാർഗമാണ്. ഓർഡർ ചെയ്ത ലിസ്റ്റുകൾക്ക് type, start, reversed തുടങ്ങിയ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് കൂടുതൽ നിയന്ത്രണങ്ങൾ നൽകാനാകും.