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

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

ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റുകൾ (Unordered Lists) HTML-ൽ ലിസ്റ്റ് ചെയ്യാനുള്ള ഒരു മാർഗമാണ്, അത് ലിസ്റ്റ് ഇനങ്ങൾക്ക് നിശ്ചിത ക്രമമില്ലാതെ പദിപ്പിക്കുന്നു. ഇതിന് <ul> (Unordered List) ടാഗ് ഉപയോഗിക്കുന്നു. ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റുകളുടെ ഇനങ്ങൾക്ക് സൂചകം (bullet points) നൽകുന്നു.

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

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

ഈ കോഡിൽ, <ul> ടാഗ് ഒരു ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റ് നിർമ്മിക്കുന്നു, ഓരോ ലിസ്റ്റ് ഇനം <li> (List Item) ടാഗുകൾ ഉപയോഗിച്ച് സൃഷ്ടിക്കപ്പെടുന്നു.

Example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ഈ ഉദാഹരണത്തിൽ, ഓരോ ലിസ്റ്റ് ഇനത്തിനും ബുള്ളറ്റ് പോയിന്റ് (bullet points) കാണിക്കുന്നതായിരിക്കും.

ബുള്ളറ്റ് പോയിന്റുകളുടെ തരം മാറ്റുക:

CSS (Cascading Style Sheets) ഉപയോഗിച്ച് ലിസ്റ്റിൽ ഉപയോഗിക്കുന്ന ബുള്ളറ്റ് പോയിന്റുകളുടെ തരം മാറ്റാനാകും. സാധാരണ ബുള്ളറ്റ് തരം മാറ്റാൻ list-style-type പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു:

• Disc (Default): Filled circle
• Circle: Open circle
• Square: Filled square

<ul style="list-style-type:circle;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Unordered List-ലേക്ക് Images ചേർക്കുക:

CSS ഉപയോഗിച്ച് ലിസ്റ്റിൽ ബുള്ളറ്റുകൾക്ക് പകരം ചിത്രങ്ങൾ ഉപയോഗിക്കാനും കഴിയും:

<ul style="list-style-image: url('bullet-image.png');">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ലിസ്റ്റിന്റെ ആകൃതി ക്രമീകരിക്കൽ:

Unordered ലിസ്റ്റുകൾക്ക് വ്യത്യസ്ത രൂപങ്ങൾ നൽകാൻ CSS ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ലിസ്റ്റിനുള്ളിലെ ഇനങ്ങൾക്ക് വലിപ്പം, നിറം, അലയിൻമെന്റ് എന്നിവ മാറ്റാം:

<ul style="color:green; font-size:20px;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ലിസ്റ്റുകൾ Nested (പാളികളായി) സൃഷ്ടിക്കുക:

Unordered ലിസ്റ്റുകൾ nested (അടങ്ങിയ) ലിസ്റ്റുകൾ ആകാം. ഇതിന് ഒരു <ul> ലിസ്റ്റിനുള്ളിൽ മറ്റൊരു <ul> ലിസ്റ്റ് ചേർക്കാം.

<ul>
  <li>HTML</li>
  <li>CSS
    <ul>
      <li>Selectors</li>
      <li>Box Model</li>
    </ul>
  </li>
  <li>JavaScript</li>
</ul>

ഉദാഹരണ ലിസ്റ്റ്:

<ul style="list-style-type:square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

---

സങ്കലനം:

ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റുകൾ HTML-ൽ നിശ്ചിതക്രമമില്ലാതെ ഇനങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒരു പ്രധാന മാർഗമാണ്. ഇത് ലിസ്റ്റ് ഇനങ്ങൾക്ക് ബുള്ളറ്റുകൾ ഉപയോഗിക്കുന്നു. CSS ഉപയോഗിച്ച് ലിസ്റ്റ് ഇനങ്ങൾക്ക് ആവശ്യമുള്ള രൂപത്തിൽ വ്യത്യാസങ്ങൾ കൊണ്ടുവരാൻ കഴിയും, ലിസ്റ്റ് സ്റ്റൈലുകൾ മാറ്റാനും ചിത്രങ്ങൾ ചേർക്കാനും കഴിയുന്നു.