സാമ്പിൾ ഡെഫനിഷൻ ലിസ്റ്റ് കോഡ്:

നിർവചന പട്ടികകൾ ടേം 1 ടേം 1 ൻ്റെ നിർവചനം ടേം 2 ടേം 2 ൻ്റെ നിർവ്വചനം

ഫലം:

നെസ്റ്റഡ് ലിസ്റ്റുകൾ

ഒരു ലിസ്റ്റ് ഘടകത്തിൽ നിങ്ങളുടെ സ്വന്തം ലിസ്റ്റ് ഉൾപ്പെടുത്തേണ്ട സാഹചര്യങ്ങളുണ്ട്. അത്തരം ലിസ്റ്റുകളെ മൾട്ടി ലെവൽ അല്ലെങ്കിൽ നെസ്റ്റഡ് എന്ന് വിളിക്കുന്നു. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾക്ക് ഇതിനകം അറിയാവുന്ന ലിസ്റ്റ് ടാഗുകളുടെ സംയോജനമാണ് ഉപയോഗിക്കുന്നത്.

ഒരു മൾട്ടി-ലെവൽ ലിസ്റ്റിനുള്ള ഉദാഹരണ കോഡ്:

നെസ്റ്റഡ് ലിസ്റ്റുകൾ

• മൃഗങ്ങൾ
  1. പൂച്ചകൾ
  2. നായ്ക്കൾ
• സസ്യങ്ങൾ
  1. മരങ്ങൾ
  2. പൂക്കൾ

ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ വലിയ ടെക്‌സ്‌റ്റുകളെ പ്രത്യേക ബ്ലോക്കുകളായി വിഭജിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അവയിൽ ഓരോന്നും ബുള്ളറ്റിൽ ആരംഭിക്കുന്നു - സാധാരണയായി ഒരു ചെറിയ ഡോട്ട്. ഇത് വായനക്കാരൻ്റെ ശ്രദ്ധ വാചകത്തിലേക്ക് ആകർഷിക്കുകയും അതിൻ്റെ വായനാക്ഷമത വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്നു.

ഘടകം കൊണ്ട്

ഇനിപ്പറയുന്ന സവിശേഷതകൾ ബന്ധപ്പെട്ടിരിക്കുന്നു:
• അത് സംഭവിക്കുന്ന സ്ഥലത്ത്
  , ബ്രൗസർ സ്വയമേവ ഒരു ലൈൻ ബ്രേക്ക് ചേർക്കുന്നു;
  • ലിസ്റ്റിന് മുകളിലും താഴെയുമായി ഇൻഡൻ്റുകൾ ഉണ്ട്;
  • സ്ഥിരസ്ഥിതിയായി, മാർക്കറുകൾ പൂരിപ്പിച്ച സർക്കിളായി പ്രദർശിപ്പിക്കും;
  • ഓരോ ലിസ്റ്റ് ഘടകവും പ്രധാന വാചകവുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ വലതുവശത്തേക്ക് മാറ്റുന്നു.

  ചിത്രം 1 ഉദാഹരണത്തിൻ്റെ ഫലം കാണിക്കുന്നു, ബുള്ളറ്റുചെയ്‌ത പട്ടികയുടെ മുകളിലുള്ള സവിശേഷതകൾ ചിത്രീകരിക്കുന്നു.

  അരി. 1. ബുള്ളറ്റ് ലിസ്റ്റ് കാഴ്ച

  മാർക്കർ തരം

  മാർക്കറുകൾക്ക് മൂന്ന് ഫോമുകളിൽ ഒന്ന് എടുക്കാം: പൂരിപ്പിച്ച സർക്കിൾ (ഡിഫോൾട്ട്), ഓപ്പൺ സർക്കിൾ, സ്ക്വയർ. മാർക്കർ തരം തിരഞ്ഞെടുക്കുന്നതിന്, ലിസ്റ്റ്-സ്റ്റൈൽ-ടൈപ്പ് പ്രോപ്പർട്ടി അല്ലെങ്കിൽ യൂണിവേഴ്സൽ ലിസ്റ്റ്-സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക (ഉദാഹരണം 1). ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ ബാധകമാണ്:

  • ഡിസ്ക് - പൂരിപ്പിച്ച വൃത്തത്തിൻ്റെ രൂപത്തിൽ മാർക്കറുകൾ;
  • സർക്കിൾ - ഒരു തുറന്ന സർക്കിളിൻ്റെ രൂപത്തിൽ മാർക്കറുകൾ;
  • ചതുരം - ചതുര മാർക്കറുകൾ.

  ഉദാഹരണം 1: ഒരു മാർക്കറിൻ്റെ രൂപം മാറ്റുന്നു

  • സെപുൽകി
  • സെപൽക്കറിയ
  • സെപ്പുലനേഷൻ
  
  
  

  ബുള്ളറ്റ് ഐക്കണായി ചെറുതും ഖര നിറത്തിലുള്ളതുമായ ചതുരം ഉപയോഗിച്ച് ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഉദാഹരണം കാണിക്കുന്നു. മൂല്യങ്ങളുടെ എണ്ണം മൂന്നായി പരിമിതപ്പെടുത്തിയിട്ടുണ്ടെങ്കിലും, ഞങ്ങളുടെ പക്കൽ മൂന്ന് തരം മാർക്കറുകൾ മാത്രമേ ഉള്ളൂ എന്ന് ഇതിനർത്ഥമില്ല. ഒരു മാർക്കർ ഐക്കണായി വിജയകരമായി പ്രവർത്തിക്കാൻ കഴിയുന്ന നിരവധി പ്രത്യേക പ്രതീകങ്ങളുണ്ട്. അവയെ നേരിട്ട് സ്ക്രൂ ചെയ്യുക

• ഇത് പ്രവർത്തിക്കില്ല, അതിനാൽ നിങ്ങൾ അതിനായി പ്രവർത്തിക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, ലിസ്റ്റ്-സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ലിസ്റ്റ് മാർക്കറുകൾ ഒന്നും അല്ല എന്ന മൂല്യവും ഉള്ളടക്കത്തിന് മുമ്പുള്ള വാചകത്തിൽ മറയ്ക്കുക
• കപട മൂലകത്തിന് മുമ്പുള്ള :: ഉപയോഗിച്ച് ഞങ്ങൾ സ്വന്തം പ്രതീകം ചേർക്കുന്നു. ഉദാഹരണം 2 ൽ, ഒരു ത്രികോണം അത്തരമൊരു മാർക്കറായി പ്രവർത്തിക്കുന്നു.

  ഉദാഹരണം 2::: മുമ്പ് ഉപയോഗിക്കുന്നത്

  • സെപുൽകി
  • സെപൽക്കറിയ
  • സെപ്പുലനേഷൻ
  
  
  

  ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 2. മൂല്യമുള്ള ലിസ്റ്റ്-സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത് ആരും മാർക്കറുകൾ നീക്കം ചെയ്യുന്നില്ല, പക്ഷേ അവ കാഴ്ചയിൽ നിന്ന് മറയ്ക്കുന്നു, ലിസ്റ്റ് വലതുവശത്തേക്ക് മാറ്റിയതായി ദൃശ്യമാകുന്നു. ഈ സവിശേഷത ഒഴിവാക്കാൻ, ഉദാഹരണം നെഗറ്റീവ് മൂല്യമുള്ള ഒരു ടെക്സ്റ്റ്-ഇൻഡൻ്റ് പ്രോപ്പർട്ടി ചേർക്കുന്നു. വാചകം ഇടത് ഒരു പ്രതീകത്തിലേക്ക് നീക്കുക എന്നതാണ് ഇതിൻ്റെ ചുമതല.

  

  അരി. 2. പട്ടികയിലെ അനിയന്ത്രിതമായ മാർക്കറുകൾ

  അക്ഷരം ഹെക്സാഡെസിമൽ ഫോർമാറ്റിൽ ആയിരിക്കണമെന്നില്ല; UTF-8 എൻകോഡിംഗിൽ പ്രമാണം സംരക്ഷിക്കുകയും എഡിറ്റർ അതിനെ പിന്തുണയ്ക്കുകയും ചെയ്യുക എന്നതാണ് പ്രധാന കാര്യം. അക്ഷരങ്ങളും അവയുടെ കോഡുകളും എടുക്കാം, ഉദാഹരണത്തിന്, ലിബ്രെഓഫീസ് റൈറ്ററിൽ നിന്ന് (ചിത്രം 3).

  

  അരി. 3. LibreOffice-ൽ ഒരു ചിഹ്നം തിരഞ്ഞെടുക്കുന്നു

  കൈകൊണ്ട് വരച്ച മാർക്കറുകൾ ഉള്ള ലിസ്റ്റ്

  ലിസ്റ്റ്-സ്റ്റൈൽ-ഇമേജ് പ്രോപ്പർട്ടി വഴി അനുയോജ്യമായ ഏത് ചിത്രവും മാർക്കറായി സജ്ജീകരിക്കാൻ സ്റ്റൈലുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണം 3 ൽ കാണിച്ചിരിക്കുന്നതുപോലെ ഗ്രാഫിക് ഫയലിലേക്കുള്ള ഒരു ആപേക്ഷിക അല്ലെങ്കിൽ കേവല പാതയാണ് മൂല്യം.

  ഉദാഹരണം 3: ഒരു ചിത്രം ഒരു മാർക്കറായി ഉപയോഗിക്കുന്നത്

  • സെപുൽകി
  • സെപൽക്കറിയ
  • സെപ്പുലനേഷൻ
  
  
  

  ലിസ്റ്റ് ഘടകങ്ങളെ അടിക്കുറിപ്പുകളാക്കി മാറ്റാതിരിക്കാൻ ഒരു ചെറിയ ചിത്രം തിരഞ്ഞെടുക്കുന്നതാണ് നല്ലത്. ചിത്രത്തിൽ. ചെറിയ ചിത്രങ്ങൾ മാർക്കറുകളായി ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രം 4 കാണിക്കുന്നു.

  

  അരി. 4. ഒരു മാർക്കറായി ഡ്രോയിംഗ്

  ലിസ്റ്റ്-സ്റ്റൈൽ-ഇമേജ് ഉപയോഗിക്കുന്നതിന് ചില ദോഷങ്ങളുമുണ്ട്:

  • പാറ്റേൺ മുകളിലേക്കോ താഴേക്കോ നീക്കാൻ കഴിയില്ല;
  • ടെക്സ്റ്റുമായി ബന്ധപ്പെട്ട ചിത്രത്തിൻ്റെ സ്ഥാനം വ്യത്യസ്ത ബ്രൗസറുകളിൽ വ്യത്യാസപ്പെടാം.

  പശ്ചാത്തല പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഈ പോരായ്മകൾ ഒഴിവാക്കാനാകും, ഇത് പശ്ചാത്തല ചിത്രം സജ്ജമാക്കുന്നു. ഓരോ ലിസ്റ്റ് ഘടകത്തിനും

• ഞങ്ങൾ യഥാർത്ഥ മാർക്കറുകൾ നീക്കം ചെയ്യുകയും ആവർത്തിക്കാതെ പശ്ചാത്തല ചിത്രം സജ്ജമാക്കുകയും ചെയ്യുന്നു. ചിത്രത്തിൻ്റെ മുകളിൽ വാചകം ദൃശ്യമാകാതിരിക്കാൻ, പാഡിംഗ്-ലെഫ്റ്റ് ഉപയോഗിച്ച് ഞങ്ങൾ അത് വലത്തേക്ക് മാറ്റുന്നു (ഉദാഹരണം 4).

  ഉദാഹരണം 4: പശ്ചാത്തലം ഉപയോഗിക്കുന്നു

  Ul (മാർജിൻ-ഇടത്: -1എം; ) ലി (ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; പശ്ചാത്തലം: url (ചിത്രങ്ങൾ/bullet.png) ആവർത്തിക്കരുത് 0 2px; പാഡിംഗ്-ഇടത്: 20px; )

  വാചകത്തിൻ്റെയും ബുള്ളറ്റിൻ്റെയും സ്ഥാനം

  ടെക്സ്റ്റുമായി ബന്ധപ്പെട്ട് ഒരു മാർക്കർ സ്ഥാപിക്കാൻ രണ്ട് വഴികളുണ്ട്: മാർക്കർ ലിസ്റ്റ് ഘടകങ്ങളുടെ അതിർത്തിക്ക് പുറത്ത് നീക്കുകയോ അല്ലെങ്കിൽ വാചകത്തിന് ചുറ്റും പൊതിഞ്ഞതോ ആണ് (ചിത്രം 5).

  അകത്ത്	പുറത്ത്

  അരി. 5. ടെക്സ്റ്റുമായി ബന്ധപ്പെട്ട മാർക്കറുകൾ സ്ഥാപിക്കൽ

  മാർക്കറുകളുടെ സ്ഥാനം നിയന്ത്രിക്കുന്നതിന്, ലിസ്റ്റ്-സ്റ്റൈൽ-പൊസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. ഇതിന് രണ്ട് അർത്ഥങ്ങളുണ്ട്: പുറത്ത് - ബുള്ളറ്റുകൾ ടെക്സ്റ്റ് ബ്ലോക്കിന് പുറത്ത് സ്ഥാപിച്ചിരിക്കുന്നു (ഇത് സ്ഥിരസ്ഥിതി മൂല്യമാണ്) അകത്ത് - ബുള്ളറ്റുകൾ ടെക്സ്റ്റ് ബ്ലോക്കിൻ്റെ ഭാഗമാണ്, അവ ലിസ്റ്റ് ഇനത്തിൽ പ്രദർശിപ്പിക്കും (ഉദാഹരണം 5).

  ഉദാഹരണം 5: മാർക്കറുകളുടെ സ്ഥാനം മാറ്റുന്നു

  • നിങ്ങൾ ആരംഭിക്കുന്നതിന് മുമ്പ്, 3BM കിറ്റിനൊപ്പം ഉൾപ്പെടുത്തിയിരിക്കുന്ന ഉപകരണങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ടോയെന്ന് പരിശോധിക്കുക.
  • ഒന്നോ അതിലധികമോ പെരിഫറൽ ഉപകരണങ്ങൾ ഇല്ലെങ്കിൽ, നിങ്ങൾ ഉടൻ തന്നെ സിസിയുടെ സാങ്കേതിക ജീവനക്കാരെ ബന്ധപ്പെടണം.
  • നിങ്ങളുടെ ജോലിസ്ഥലം ദൃശ്യപരമായി പരിശോധിച്ച ശേഷം, നിങ്ങൾക്ക് 3BM-ലേക്ക് പവർ ശ്രദ്ധാപൂർവ്വം ഓണാക്കാം.
  
  
  

  ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 6.

  

  നല്ല ദിവസം!

  ഈ ലേഖനത്തിൽ, നിങ്ങൾ ലിസ്റ്റുകളുടെ എല്ലാ സാധ്യതകളെക്കുറിച്ചും പഠിക്കും, ഒരു അക്കമിട്ട ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് മനസിലാക്കും, കൂടാതെ ലളിതമായ ബുള്ളറ്റഡ് ലിസ്റ്റിനെ അനിയന്ത്രിതമായ ബുള്ളറ്റുകൾ ഉപയോഗിച്ച് കൂടുതൽ രസകരവും ശ്രദ്ധേയവുമായ ഒന്നാക്കി മാറ്റാൻ നിങ്ങളെ സഹായിക്കുന്ന മാസ്റ്റർ ടാഗുകൾ. പാഠം പൂർത്തിയാക്കിയ ശേഷം, ലിസ്റ്റുകൾ എവിടെയാണ് ഉപയോഗിക്കുന്നതെന്നും ഏത് സാഹചര്യങ്ങളിൽ അവ ഉപയോഗിക്കാമെന്നും നിങ്ങൾക്ക് ഒരു ധാരണ ലഭിക്കും.

  HTML-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ചുള്ള ഈ ഹ്രസ്വ കോഴ്‌സിലെ മൂന്നാമത്തേതാണ് ഈ ലേഖനം. ഈ പാഠം വായിക്കുന്നതിനുമുമ്പ്, മുമ്പത്തെ രണ്ടിലൂടെ കടന്നുപോകാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു:

  ലേഖനം ഇപ്പോൾ ആരംഭിച്ചു, ഒരു സാധാരണ ബുള്ളറ്റഡ് ലിസ്റ്റിൻ്റെ ഉപയോഗം നിങ്ങൾക്ക് ഇതിനകം ശ്രദ്ധിക്കാനാകും. എൻ്റെ വെബ്‌സൈറ്റിൽ ഇത് വളരെ ലളിതമായി തോന്നുന്നു: ഇടതുവശത്ത് ഒരു വരയും ചതുര മാർക്കറും ഉള്ള ഒരു ചെറിയ ഇൻഡൻ്റുണ്ട്. പിന്നീട് ലേഖനത്തിൽ ഏതൊക്കെ തരത്തിലുള്ള മാർക്കറുകൾ ഉണ്ട്, അക്കങ്ങൾ എങ്ങനെ നിർമ്മിക്കാം, നിങ്ങളുടെ സ്വന്തം മാർക്കർ എങ്ങനെ നിർമ്മിക്കാം എന്നിവയെക്കുറിച്ച് ഞങ്ങൾ വിശദമായി പരിശോധിക്കും.

  ലേഖനത്തിൻ്റെ ഓരോ ഭാഗത്തും, ഒരു പ്രത്യേക ലിസ്റ്റ് ചേർക്കുന്നതിനുള്ള വിശദമായ വിശദീകരണങ്ങളോടൊപ്പം ചില ലിസ്റ്റുകളുടെ സൃഷ്ടിയും ഉണ്ടായിരിക്കും.

  1. HTML-ലെ ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ

  സമാന അർത്ഥങ്ങളുള്ള ഒരു കൂട്ടം ഘടകങ്ങളെ വാചകത്തിൽ പട്ടികപ്പെടുത്താൻ ഇത്തരത്തിലുള്ള ലിസ്റ്റ് ഉപയോഗിക്കുന്നു. ഇത് ഒരേ വിഷയവുമായി ബന്ധപ്പെട്ട ലിങ്കുകളുടെ ഒരു ലിസ്‌റ്റായിരിക്കാം, വാചകത്തിൻ്റെ വ്യക്തിഗത ഭാഗങ്ങൾക്കുള്ള വിശദമായ വിശദീകരണം. എന്നാൽ ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ കോഡിൽ എങ്ങനെയിരിക്കുമെന്ന് നോക്കാം:

  ബ്രൗസറിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

  അരി. 1.1

  ബ്രൗസറിൽ HTML ബുള്ളറ്റഡ് ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റിൻ്റെ സ്റ്റാൻഡേർഡ് കാഴ്ച

  1.1 ബുള്ളറ്റഡ് ലിസ്റ്റുകൾക്കുള്ള സ്റ്റാൻഡേർഡ് ബുള്ളറ്റുകൾ

  മുകളിലുള്ള ചിത്രത്തിൽ (ചിത്രം 1.1.) ഓരോ മെനു ഇനത്തിൻ്റെയും തുടക്കത്തിൽ നിങ്ങൾക്ക് സർക്കിളുകൾ കാണാം. ഇതാണ് മാർക്കർ. സ്ഥിരസ്ഥിതിയായി, ഇത് ബ്രൗസറിൽ ഒരു പൂരിപ്പിച്ച സർക്കിളായി ദൃശ്യമാകുന്നു. HTML-ൽ നിരവധി തരം മാർക്കറുകൾ ഉണ്ട്: പൂരിപ്പിച്ച സർക്കിൾ, ശൂന്യമായ വൃത്തം, ചതുരം. അവർക്ക് CSS അല്ലെങ്കിൽ മൂന്നാം കക്ഷി ചിത്രങ്ങൾ ആവശ്യമില്ല:

  1.2 ശൂന്യമായ സർക്കിളിൻ്റെ രൂപത്തിൽ ലിസ്റ്റ് മാർക്കർ

  <നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ അറിയാം, എന്നാൽ ഇപ്പോൾ കോഡിൽ ഒരു HTML ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നോക്കാം. മുകളിലുള്ള പട്ടികയിൽ നിന്ന്, തരം ആട്രിബ്യൂട്ടിനായി ഞങ്ങൾ രണ്ടാമത്തെ മൂല്യം "സർക്കിൾ" തിരഞ്ഞെടുത്ത് അതിനെ ഞങ്ങളുടെ ബുള്ളറ്റ് ലിസ്റ്റിലേക്ക് സജ്ജമാക്കുക: <html > <തല >തലക്കെട്ട് ><ശൂന്യമായ സർക്കിൾ മാർക്കറുള്ള ഒരു ബുള്ളറ്റ് ലിസ്റ്റിൻ്റെ ഉദാഹരണം </ശീർഷകം> </തല> <ശരീരം > p><നക്ഷത്രങ്ങൾ: </p> <ഉൽ തരം = "വൃത്തം" > li ><സിറിയസ് <ഉൽ തരം = "വൃത്തം" >/ലി><സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ആർക്റ്ററസ്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >പൊള്ളക്സ്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ബെറ്റെൽഗ്യൂസ്<സിറിയസ് <സൂര്യൻ </ul> </ശരീരം>

  /html>

  ബ്രൗസറിൽ ഈ കോഡ് എങ്ങനെ കാണപ്പെടുമെന്ന് നമുക്ക് ഉടൻ നോക്കാം:

  അരി. 1.2

  ബ്രൗസറിൽ ഒരു സർക്കിളായി ഒരു ലിസ്റ്റ് മാർക്കറിൻ്റെ കാഴ്ച

  1.3 ചതുരത്തിൻ്റെ രൂപത്തിൽ ലിസ്റ്റ് മാർക്കർ

  അരി. 1.3

  ബ്രൗസറിൽ ഒരു ചതുരമായി ഒരു ലിസ്റ്റ് മാർക്കറിൻ്റെ കാഴ്ചപ്രധാന കുറിപ്പ്:

  ബുള്ളറ്റ് ലിസ്റ്റുകൾക്കായി ശൈലികൾ സൃഷ്‌ടിക്കാൻ ഈ രീതി ഇനി ഉപയോഗിക്കില്ല. CSS (CSS എന്താണെന്ന് വായിക്കുക) ഉം HTML ഉം തമ്മിൽ വ്യക്തമായ വേർതിരിവ് ഉണ്ട്. എച്ച്ടിഎംഎൽ മാർക്ക്അപ്പിനും CSS ആകർഷകമായ രൂപം സൃഷ്ടിക്കുന്നതിനുമുള്ളതാണ്.നിലവിലെ ഡോക്യുമെൻ്റ് തരം HTML5 ആയി വ്യക്തമാക്കുമ്പോൾ ഈ ആട്രിബ്യൂട്ട് അടങ്ങിയിരിക്കുന്ന കോഡ് ("

  "), മൂല്യനിർണ്ണയ സമയത്ത് ഒരു പിശക് നൽകും. മൂല്യനിർണ്ണയം എന്താണെന്ന് നിങ്ങൾ കേട്ടിട്ടില്ലെങ്കിൽ, ഇത് നിങ്ങൾക്കുള്ള സ്ഥലമാണ്.

  പിശക് ഇനിപ്പറയുന്നതായിരിക്കും:

  അരി. 1.4

  ഒരു ലിസ്റ്റിൻ്റെ "തരം" ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുമ്പോൾ വാലിഡേറ്ററിൽ പിശക്

  ഞങ്ങൾ ബുള്ളറ്റുചെയ്‌ത ലിസ്റ്റുകൾ ക്രമീകരിച്ചു. ഇപ്പോൾ നമുക്ക് അക്കമിട്ട ലിസ്റ്റുകളിലേക്ക് പോകാം, തുടർന്ന് യഥാർത്ഥ സൈറ്റുകളിൽ മിക്കപ്പോഴും ഉപയോഗിക്കുന്ന നെസ്റ്റഡ് ലിസ്റ്റുകളും നിരവധി റെഡിമെയ്ഡ് ഉദാഹരണങ്ങളും പരിഗണിക്കുക.

  2. HTML-ലെ അക്കമിട്ട ലിസ്റ്റുകൾ

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ അറിയാം, എന്നാൽ ഇപ്പോൾ കോഡിൽ ഒരു HTML ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നോക്കാം. മുകളിലുള്ള പട്ടികയിൽ നിന്ന്, തരം ആട്രിബ്യൂട്ടിനായി ഞങ്ങൾ രണ്ടാമത്തെ മൂല്യം "സർക്കിൾ" തിരഞ്ഞെടുത്ത് അതിനെ ഞങ്ങളുടെ ബുള്ളറ്റ് ലിസ്റ്റിലേക്ക് സജ്ജമാക്കുക: <html > <തല >മുമ്പത്തെ തരം ലിസ്റ്റുകളിൽ നിന്ന് വ്യത്യസ്തമായി, അക്കമിട്ട ലിസ്റ്റുകൾക്ക് ഒരു പ്രധാന സവിശേഷതയുണ്ട്: അവ സ്വയമേവ അക്കമിട്ടിരിക്കുന്നു. നിങ്ങൾക്ക് ഒരു വലിയ ലിസ്റ്റ് നമ്പർ നൽകേണ്ടിവരുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. ഇത് സ്വമേധയാ ചെയ്യുന്നത് വളരെയധികം സമയമെടുക്കും, നിങ്ങൾക്ക് ഇപ്പോഴും ആശയക്കുഴപ്പമുണ്ടാകാം. ടാഗ് ഉപയോഗിച്ച് ഒരു അക്കമിട്ട ലിസ്റ്റ് വ്യക്തമാക്കുന്നു. പ്രായോഗികമായി ഇത് എങ്ങനെ കാണപ്പെടുന്നു:<ശൂന്യമായ സർക്കിൾ മാർക്കറുള്ള ഒരു ബുള്ളറ്റ് ലിസ്റ്റിൻ്റെ ഉദാഹരണം </ശീർഷകം> </തല> <ശരീരം >അക്കമിട്ട പട്ടികയുടെ ഉദാഹരണം:<നക്ഷത്രങ്ങൾ: <ഒരു സ്റ്റാൻഡേർഡ് നമ്പറുള്ള പട്ടികയുടെ ഉദാഹരണം <ഉൽ തരം = "വൃത്തം" >ഒന്ന് മുതൽ അഞ്ച് വരെ:<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ഓൾ ><സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ആദ്യം<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >രണ്ടാമത്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >മൂന്നാമത്<സിറിയസ് <നാലാമത്തേത് </ul> </ശരീരം>

  അഞ്ചാമത്

  /ol>

  സ്റ്റാൻഡേർഡ് ബ്രൗസർ ക്രമീകരണങ്ങളിൽ ഒരു അക്കമിട്ട ലിസ്റ്റ് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

  അരി. 2.1

  സ്റ്റാൻഡേർഡ് ക്രമീകരണങ്ങളുള്ള ബ്രൗസറിൽ അക്കമിട്ട ലിസ്റ്റ്

  അതിൻ്റെ മുൻഗാമിയായ (ബുള്ളറ്റ് ലിസ്റ്റ്) പോലെ, നമ്പറുകൾ പ്രദർശിപ്പിക്കുന്നതിന് അതിൻ്റേതായ ശൈലികളുണ്ട്. HTML-ലെ അക്കമിട്ട ലിസ്റ്റിനുള്ള ബുള്ളറ്റിൻ്റെ ഒരേയൊരു തരം സാധാരണ നമ്പറിംഗ് അല്ല.	2.1 അക്കമിട്ട ലിസ്റ്റുകൾക്കുള്ള സ്റ്റാൻഡേർഡ് ബുള്ളറ്റുകൾ	ഇവിടെ നമുക്ക് മൂന്ന് തരം മാർക്കറുകളല്ല, അഞ്ചെണ്ണം തിരഞ്ഞെടുക്കാം:
  മാർക്കറിൻ്റെ പേര്	1	"തരം" ആട്രിബ്യൂട്ട് മൂല്യം ലിസ്റ്റ് ഉദാഹരണം
  അറബി സംഖ്യകളുടെ രൂപത്തിലുള്ള മാർക്കറുകൾ	ബാഡ്മിൻ്റൺ	ബേസ്ബോൾ ചെറിയക്ഷര ലാറ്റിൻ അക്ഷരങ്ങളുടെ രൂപത്തിലുള്ള മാർക്കറുകൾ എ
  ചോമോലുങ്മ	ചോഗോരി	കാഞ്ചൻജംഗ വലിയ ലാറ്റിൻ അക്ഷരങ്ങളുടെ രൂപത്തിലുള്ള മാർക്കറുകൾ എ
  ഉച്ചകോടി പ്ലംമെറ്റ്	തന്ത്രം അല്ലെ	ഇൻസാനോ ലോവർകേസ് റോമൻ സംഖ്യാ മാർക്കറുകൾ ഐ
  ഫിലിപ്പൈൻ കടൽ	അറബിക്കടൽ	പവിഴ കടൽ വലിയക്ഷര റോമൻ സംഖ്യാ മാർക്കറുകൾ ഐ

  ചുവപ്പ്

  പച്ച

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ അറിയാം, എന്നാൽ ഇപ്പോൾ കോഡിൽ ഒരു HTML ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നോക്കാം. മുകളിലുള്ള പട്ടികയിൽ നിന്ന്, തരം ആട്രിബ്യൂട്ടിനായി ഞങ്ങൾ രണ്ടാമത്തെ മൂല്യം "സർക്കിൾ" തിരഞ്ഞെടുത്ത് അതിനെ ഞങ്ങളുടെ ബുള്ളറ്റ് ലിസ്റ്റിലേക്ക് സജ്ജമാക്കുക: <html > <തല >നീല<ശൂന്യമായ സർക്കിൾ മാർക്കറുള്ള ഒരു ബുള്ളറ്റ് ലിസ്റ്റിൻ്റെ ഉദാഹരണം </ശീർഷകം> </തല> <ശരീരം >ഞങ്ങൾ പന്ത്രണ്ടിൽ നിന്ന് അക്കമിടാൻ തുടങ്ങുന്നു:<നക്ഷത്രങ്ങൾ: <ഓൾ തരം = "a" തുടക്കം = "12" > <ഉൽ തരം = "വൃത്തം" >പന്ത്രണ്ട്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >പതിമൂന്ന്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >പതിനാല്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >പതിനഞ്ച്<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >പതിനാറ്<സിറിയസ് <നാലാമത്തേത് </ul> </ശരീരം>

  യഥാർത്ഥ സൈറ്റിൽ ഇത് എങ്ങനെ ദൃശ്യമാകുമെന്ന് ഇതാ:

  അരി. 2.2

  അക്കമിട്ട ലിസ്റ്റിലെ ഒരു അനിയന്ത്രിതമായ സംഖ്യയിൽ നിന്ന് നമ്പറിംഗ്

  മുകളിലെ ചിത്രത്തിൽ, ചെറിയക്ഷര ലാറ്റിൻ അക്ഷരങ്ങളുടെ രൂപത്തിൽ മാർക്കറുകൾ നിർമ്മിക്കുമ്പോൾ, ഞങ്ങൾ പന്ത്രണ്ട് മുതൽ ആരംഭിക്കുന്ന ലിസ്റ്റ് അക്കമിട്ടു. ഇപ്പോൾ, നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഈ ആട്രിബ്യൂട്ടുകൾ എങ്ങനെ ഉപയോഗിക്കണമെന്ന് വ്യക്തമായതായി ഞാൻ കരുതുന്നു.

  ശരി, ഇപ്പോൾ നമുക്ക് നെസ്റ്റഡ് HTML ലിസ്റ്റുകളിലേക്ക് പോകാം.

  3. HTML-ൽ ഒരു മൾട്ടി-ലെവൽ (നെസ്റ്റഡ്) ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാം

  മെനുകൾ നിർമ്മിക്കുന്നതിന് സൈറ്റിൽ മൾട്ടി ലെവൽ ലിസ്റ്റുകൾ ഉപയോഗിക്കുന്നു. ഈ മെനു മിക്കപ്പോഴും താഴോട്ടുള്ള ഡ്രോപ്പ്-ഡൗൺ (പാഠം ഓൺ) അല്ലെങ്കിൽ ഇടത് അല്ലെങ്കിൽ വലത് ഡ്രോപ്പ്-ഡൗൺ മെനു ആയി കാണപ്പെടുന്നു. അത്തരം മെനുകൾ മറ്റ് മെനു ഘടകങ്ങൾ ഒരു കോംപാക്റ്റ് രൂപത്തിൽ സംഭരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  <നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ അറിയാം, എന്നാൽ ഇപ്പോൾ കോഡിൽ ഒരു HTML ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നോക്കാം. മുകളിലുള്ള പട്ടികയിൽ നിന്ന്, തരം ആട്രിബ്യൂട്ടിനായി ഞങ്ങൾ രണ്ടാമത്തെ മൂല്യം "സർക്കിൾ" തിരഞ്ഞെടുത്ത് അതിനെ ഞങ്ങളുടെ ബുള്ളറ്റ് ലിസ്റ്റിലേക്ക് സജ്ജമാക്കുക: <html > <തല >ഒരു ഉദാഹരണമായി കാർ മോഡലുകൾ ഉപയോഗിച്ച്, ഞങ്ങൾ HTML-ൽ ഒരു മൾട്ടി-ലെവൽ ലിസ്റ്റ് നിർമ്മിക്കും:<ശൂന്യമായ സർക്കിൾ മാർക്കറുള്ള ഒരു ബുള്ളറ്റ് ലിസ്റ്റിൻ്റെ ഉദാഹരണം </ശീർഷകം> </തല> <HTML നെസ്റ്റഡ് ബുള്ളറ്റ് ലിസ്റ്റ് <ഉൽ തരം = "വൃത്തം" > ul ><HTML നെസ്റ്റഡ് ബുള്ളറ്റ് ലിസ്റ്റ് <ഉൽ തരം = "വൃത്തം" >സിട്രോൺ<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ബെർലിംഗോ<സിറിയസ് <ഉൽ തരം = "വൃത്തം" > C1<സിറിയസ് <ഉൽ തരം = "വൃത്തം" > C2<സിറിയസ് <ഉൽ തരം = "വൃത്തം" > C3 പിക്കാസോ<സിറിയസ് <സൂര്യൻ <സിറിയസ് <ഉൽ തരം = "വൃത്തം" > C4 ഗ്രാൻഡ് പിക്കാസോ<സിറിയസ് <ഉൽ തരം = "വൃത്തം" > KIA<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ടൊയോട്ട<സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ഓഡി<സിറിയസ് <സൂര്യൻ </ul> </ശരീരം>

  ലെക്സസ്

  ബ്രൗസറിൽ മൾട്ടി-ലെവൽ ലിസ്റ്റ് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് ശ്രദ്ധിക്കുക:

  അരി. 3.1

  HTML-ലെ ഒരു മൾട്ടി-ലെവൽ ലിസ്റ്റിൻ്റെ ഉദാഹരണം

  ബുള്ളറ്റഡ് (ടാഗ്) ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു മൾട്ടി ലെവൽ ലിസ്റ്റ് ഉണ്ടാക്കി

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  <നിങ്ങൾക്ക് ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ അറിയാം, എന്നാൽ ഇപ്പോൾ കോഡിൽ ഒരു HTML ബുള്ളറ്റഡ് ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നോക്കാം. മുകളിലുള്ള പട്ടികയിൽ നിന്ന്, തരം ആട്രിബ്യൂട്ടിനായി ഞങ്ങൾ രണ്ടാമത്തെ മൂല്യം "സർക്കിൾ" തിരഞ്ഞെടുത്ത് അതിനെ ഞങ്ങളുടെ ബുള്ളറ്റ് ലിസ്റ്റിലേക്ക് സജ്ജമാക്കുക: <html > <തല >). സിട്രോൺ മോഡലുകളുള്ള ഒരു മൾട്ടി ലെവൽ ലിസ്റ്റ് മറ്റ് മാർക്കറുകൾക്കൊപ്പം പ്രത്യക്ഷപ്പെട്ടു. പ്രധാന ലിസ്റ്റിൽ ബുള്ളറ്റുകൾ നിറഞ്ഞിരിക്കുന്നു, രണ്ടാം ലെവൽ ലിസ്റ്റിൽ ശൂന്യമായ സർക്കിളുകളുമുണ്ട്. പക്ഷേ, നിങ്ങൾ ഓർക്കുന്നതുപോലെ, "ടൈപ്പ്" ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നമുക്ക് മാർക്കറുകൾ പുനർനിർവചിക്കാം (ഇത് സജ്ജീകരിക്കുന്നതാണ് നല്ലത്).<ശൂന്യമായ സർക്കിൾ മാർക്കറുള്ള ഒരു ബുള്ളറ്റ് ലിസ്റ്റിൻ്റെ ഉദാഹരണം </ശീർഷകം> </തല> <HTML നെസ്റ്റഡ് ബുള്ളറ്റ് ലിസ്റ്റ് <ഉൽ തരം = "വൃത്തം" >എന്നാൽ നമുക്ക് മൾട്ടി-ലെവൽ ലിസ്‌റ്റുകളെ ഇതുപോലുള്ള അക്കമിട്ടതും ബുള്ളറ്റുള്ളതുമായ ലിസ്റ്റുകളുമായി സംയോജിപ്പിക്കാൻ കഴിയും:<ഒരു സ്റ്റാൻഡേർഡ് നമ്പറുള്ള പട്ടികയുടെ ഉദാഹരണം <ഉൽ തരം = "വൃത്തം" > HTML-ൽ അക്കമിട്ടതും ബുള്ളറ്റുള്ളതും മൾട്ടി-ലെവൽ ലിസ്റ്റുകളും<HTML നെസ്റ്റഡ് ബുള്ളറ്റ് ലിസ്റ്റ് <ഉൽ തരം = "വൃത്തം" >തുലിപ്സിൻ്റെ ആദ്യ ഗ്രൂപ്പ്<സിറിയസ് <സൂര്യൻ <സിറിയസ് <ഉൽ തരം = "വൃത്തം" >ഒന്നാം ക്ലാസ്<HTML നെസ്റ്റഡ് ബുള്ളറ്റ് ലിസ്റ്റ് <ഉൽ തരം = "വൃത്തം" >ലളിതമായ ആദ്യകാല തുലിപ്സ്<സിറിയസ് <സൂര്യൻ <സിറിയസ് <നാലാമത്തേത് <സിറിയസ് <സൂര്യൻ </ul> </ശരീരം>

  രണ്ടാം ക്ലാസ്

  ടെറി തുലിപ്സ്

  മുകളിലുള്ള ഉദാഹരണത്തിൽ നമുക്ക് ഇരട്ട നെസ്റ്റിംഗ് ഉണ്ട് (2 ലെവലുകൾ). ആദ്യം, ടുലിപ്സിൻ്റെ രണ്ട് ക്ലാസുകളുടെ ഒരു ലിസ്റ്റ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്; അപ്പോൾ അക്കമിട്ട ലിസ്റ്റിലെ ഓരോ ഇനത്തിലും ഒരു ബുള്ളറ്റഡ് ലിസ്റ്റ് നെസ്റ്റ് ചെയ്യുന്നു.

  ബ്രൗസറിൽ ഇത് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് നോക്കാം:

  അരി. 3.2

  ബ്രൗസറിലെ ബുള്ളറ്റഡ് ലിസ്റ്റിലേക്കുള്ള മൾട്ടി-ലെവൽ നമ്പറുള്ള ലിസ്റ്റിൻ്റെ ഉദാഹരണം

  4. HTML ലിസ്റ്റുകളിലെ ഉപയോഗപ്രദമായ മെറ്റീരിയലുകൾ

  CSS പ്രോപ്പർട്ടികളെക്കുറിച്ച് മനസ്സിലാക്കേണ്ട വിവരമാണിത്. ഇത് ചെയ്യുന്നതിന്, ഇനിപ്പറയുന്ന പാഠങ്ങൾ പഠിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു: എല്ലാ ഉദാഹരണങ്ങളും ഉടനടി സോഴ്‌സ് കോഡിനൊപ്പം HTML (ഘടന), CSS (സ്റ്റൈലുകൾ), ഫലം (ഫലം) ടാബുകളായി വിഭജിക്കപ്പെടും.

  4.1 ഒരു HTML ലിസ്റ്റ് എങ്ങനെ ഒരു സ്ട്രിംഗാക്കി മാറ്റാം

  4.3 HTML-ൽ ഒരു ലിസ്റ്റ് എങ്ങനെ കേന്ദ്രീകരിക്കാം

  ലിസ്റ്റ് ഇനം ഒരു ബ്ലോക്ക് ഘടകമാണ്, അതിനാൽ ഇത് പാഡിംഗ് ഉപയോഗിച്ച് കേന്ദ്രീകരിക്കേണ്ടതുണ്ട്. എന്നാൽ ഒരു പ്രധാന പോയിൻ്റ് ഉണ്ട് - വിന്യാസം പ്രവർത്തിക്കുന്നതിനുള്ള വീതി ഞങ്ങൾ വ്യക്തമായി വ്യക്തമാക്കണം:

  4.4 ചിത്രങ്ങളുള്ള HTML-ൽ ഒരു ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാം

  ഒരു CSS പ്രോപ്പർട്ടി, ലിസ്റ്റ്-സ്റ്റൈൽ-ചിത്രം മാത്രം മതി. url-നുള്ളിൽ, ഐക്കണിന് മുമ്പായി വിലാസം വ്യക്തമാക്കുക. ഒരു ചെറിയ ചിത്രം ഉടനടി തിരഞ്ഞെടുക്കുന്നതാണ് നല്ലതെന്ന് ഞാൻ ശ്രദ്ധിക്കാൻ ആഗ്രഹിക്കുന്നു, കാരണം ലിസ്റ്റ് ലൈനിൻ്റെ ഉയരം അതിനെ ആശ്രയിച്ചിരിക്കുന്നു:

  4.5 ബുള്ളറ്റഡ് ലിസ്റ്റ് HTML നിങ്ങളുടെ ബുള്ളറ്റ്

  ഈ സാഹചര്യത്തിൽ, നിങ്ങൾ ഫോണ്ട് ഐക്കണുകൾ മുൻകൂട്ടി ബന്ധിപ്പിക്കേണ്ടതുണ്ട് (ഉദാഹരണത്തിന്, FontAwesome ). ഒരു സാധാരണ മാർക്കറിന് പകരം നിങ്ങൾക്ക് ഏതെങ്കിലും ഐക്കൺ ഉണ്ടാക്കാം:

  4.6 HTML-ൽ പല നിരകളിലായി ഒരു ലിസ്റ്റ് എങ്ങനെ നിർമ്മിക്കാം

  നിരവധി കോളങ്ങളിൽ ഒരു ലിസ്റ്റ് ഉണ്ടാക്കാൻ, ഞങ്ങൾ CSS കോളം-കൗണ്ട് പ്രോപ്പർട്ടി ഉപയോഗിക്കും (ഈ പ്രോപ്പർട്ടി ഇനിപ്പറയുന്ന ബ്രൗസറുകളിൽ മാത്രമേ പിന്തുണയ്ക്കൂ: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). ഒന്നിലധികം നിരകളായി വിഭജിക്കുന്നത് കാണുന്നതിന് നിങ്ങൾ ലിസ്റ്റിൻ്റെ ഉയരവും സജ്ജീകരിക്കേണ്ടതുണ്ട്:

  5. ലിസ്റ്റുകൾക്കൊപ്പം പ്രവർത്തിക്കാൻ പരിശീലിക്കുക

  ചുവടെയുള്ള വീഡിയോയിൽ നിങ്ങൾക്ക് HTML ലിസ്റ്റുകളുള്ള എല്ലാ പ്രവർത്തനങ്ങളും പ്രായോഗികമായി കാണാൻ കഴിയും:

  ലഭിച്ച വിവരങ്ങൾ ഏകീകരിക്കുന്നതിന്, എല്ലാ ഘട്ടങ്ങളും സ്വമേധയാ ചെയ്യാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു. ലിസ്റ്റുകൾക്കായി വ്യത്യസ്‌ത ബുള്ളറ്റുകൾ പരീക്ഷിക്കുക, അക്കമിട്ട ലിസ്‌റ്റുകൾ സൃഷ്‌ടിക്കുക, തുടർന്ന് മൾട്ടി-ലെവൽ (നെസ്റ്റഡ്) ലിസ്റ്റുകളിലേക്ക് നീങ്ങുകയും അവയിൽ പരീക്ഷണം നടത്തുകയും ചെയ്യുക.

  ഇവിടെയാണ് ഞങ്ങൾ ലിസ്റ്റുകൾ പൂർത്തിയാക്കി ചിത്രങ്ങളെക്കുറിച്ചുള്ള അടുത്ത പാഠത്തിലേക്ക് പോകുന്നത്.

  കൂടുതൽ പരിശീലിക്കുക!

  പാഠം 3. HTML-ൽ എങ്ങനെ ഒരു ലിസ്റ്റ് ഉണ്ടാക്കാം 4.91 /5 (98.26%) 23 വോട്ടുകൾ

  HTML മൂന്ന് വ്യത്യസ്ത തരം ലിസ്റ്റുകളെ പിന്തുണയ്ക്കുന്നു, അവയിൽ ഓരോന്നിനും അതിൻ്റേതായ ടാഗുകൾ ഉണ്ട്:

  • - ഒരു അക്കമിട്ട (അക്കങ്ങളോ അക്ഷരങ്ങളോ ഉപയോഗിച്ച്) ലിസ്റ്റ്, ഓരോ ഘടകത്തിനും ഒരു സീരിയൽ നമ്പർ (അക്ഷരം) ഉണ്ട്;
    1. - ഒരു ബുള്ളറ്റ് (അക്കമിട്ടിട്ടില്ല) ലിസ്റ്റ്, ഓരോ ഘടകത്തിനും അടുത്തായി ഒരു മാർക്കർ സ്ഥാപിച്ചിരിക്കുന്നു (ഒരു സീരിയൽ നമ്പർ സൂചിപ്പിക്കുന്ന സംഖ്യാ അല്ലെങ്കിൽ അക്ഷരമാല പ്രതീകങ്ങൾക്ക് പകരം);

       • - ഒരു നിർവചന പട്ടികയിൽ നിബന്ധനകളും നിർവചനങ്ങളും ഉൾപ്പെടെ പേര്/മൂല്യ ജോഡികൾ അടങ്ങിയിരിക്കുന്നു.

       അക്കമിട്ട പട്ടികകൾ

       ഒരു അക്കമിട്ട ലിസ്റ്റിൽ, ബ്രൗസർ ഒരു നിശ്ചിത മൂല്യത്തിൽ (സാധാരണയായി 1) ആരംഭിക്കുന്ന എലമെൻ്റ് നമ്പറുകൾ ക്രമത്തിൽ സ്വയമേവ ചേർക്കുന്നു. ശേഷിക്കുന്ന അക്കങ്ങൾ സ്വയമേവ വീണ്ടും കണക്കാക്കുന്നതിനാൽ, നമ്പറിംഗിനെ ശല്യപ്പെടുത്താതെ ലിസ്റ്റ് ഇനങ്ങൾ ചേർക്കാനും ഇല്ലാതാക്കാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
       ഒരു ബ്ലോക്ക് ഘടകം ഉപയോഗിച്ചാണ് അക്കമിട്ട ലിസ്റ്റുകൾ സൃഷ്ടിക്കുന്നത്

       (ഇംഗ്ലീഷ് ഓർഡർ ചെയ്ത ലിസ്റ്റിൽ നിന്ന് - അക്കമിട്ട പട്ടികയിൽ നിന്ന്). കണ്ടെയ്നറിന് അടുത്തായി
       ഓരോ ലിസ്റ്റ് ഇനത്തിനും ഒരു ഘടകം സ്ഥാപിച്ചിരിക്കുന്നു
       1. (ഇംഗ്ലീഷ് ലിസ്റ്റ് ഇനത്തിൽ നിന്ന് - ലിസ്റ്റ് ഇനം). ഡിഫോൾട്ട് അറബി നമ്പറുകളുള്ള ഒരു അക്കമിട്ട ലിസ്‌റ്റാണ്.
          ടാഗ് ചെയ്യുക
          ഇനിപ്പറയുന്ന വാക്യഘടനയുണ്ട്:
          1. ഘടകം 1
          2. ഘടകം 2
          3. ഘടകം 3

          ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ അക്കമിട്ട ലിസ്റ്റ് ഇനങ്ങളിൽ ഒന്നിലധികം ലിസ്റ്റ് ഇനങ്ങൾ അടങ്ങിയിരിക്കണം:

          ഉദാഹരണം: അക്കമിട്ട ലിസ്റ്റ്

          • ഇത് സ്വയം പരീക്ഷിക്കുക »

          ഘട്ടം ഘട്ടമായുള്ള നിർദ്ദേശങ്ങൾ

          1. താക്കോൽ എടുക്കുക
          2. ലോക്കിലേക്ക് കീ തിരുകുക
          3. കീ രണ്ട് തിരിവുകൾ തിരിക്കുക
          4. പൂട്ടിൽ നിന്ന് താക്കോൽ പുറത്തെടുക്കുക
          5. വാതിൽ തുറക്കൂ

          ഘട്ടം ഘട്ടമായുള്ള നിർദ്ദേശങ്ങൾ

          1. താക്കോൽ എടുക്കുക
          2. ലോക്കിലേക്ക് കീ തിരുകുക
          3. കീ രണ്ട് തിരിവുകൾ തിരിക്കുക
          4. പൂട്ടിൽ നിന്ന് താക്കോൽ പുറത്തെടുക്കുക
          5. വാതിൽ തുറക്കൂ

          ചിലപ്പോഴൊക്കെ നിലവിലുള്ള HTML കോഡുകൾ നോക്കുമ്പോൾ നിങ്ങൾ വാദമുഖം കാണും തരംമൂലകത്തിൽ

          , ഇത് അക്കങ്ങളുടെ തരം സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു (അക്ഷരങ്ങൾ, റോമൻ, അറബിക് അക്കങ്ങൾ മുതലായവ). വാക്യഘടന:

          ഇവിടെ: ടൈപ്പ് - ലിസ്റ്റ് ചിഹ്നങ്ങൾ:

          • എ - വലിയ ലാറ്റിൻ അക്ഷരങ്ങൾ (എ, ബി, സി ...);
          • a - ചെറിയക്ഷരം ലാറ്റിൻ അക്ഷരങ്ങൾ (a, b, c...);
          • I - വലിയ റോമൻ അക്കങ്ങൾ (I, II, III...);
          • i - ചെറിയ റോമൻ അക്കങ്ങൾ (i, ii, iii...);
          • 1 - അറബി അക്കങ്ങൾ (1, 2, 3 . . .) (സ്ഥിരസ്ഥിതിയായി ഉപയോഗിക്കുന്നു).

          1 അല്ലാതെ മറ്റൊരു സംഖ്യയിൽ ലിസ്റ്റ് ആരംഭിക്കണമെങ്കിൽ, ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നിങ്ങൾ ഇത് വ്യക്തമാക്കണം ആരംഭിക്കുകടാഗ്

          .
          ഇനിപ്പറയുന്ന ഉദാഹരണം വലിയ റോമൻ അക്കങ്ങളും XLIX ൻ്റെ ആരംഭ മൂല്യവുമുള്ള ഒരു അക്കമിട്ട ലിസ്റ്റ് കാണിക്കുന്നു:

          ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് നമ്പറിംഗ് ആരംഭിക്കാനും കഴിയും മൂല്യം, അത് മൂലകത്തിൽ ചേർത്തിരിക്കുന്നു

          1. ഇനിപ്പറയുന്ന രീതിയിൽ:

          7. ഈ സാഹചര്യത്തിൽ, ലിസ്റ്റിൻ്റെ തുടർച്ചയായ നമ്പറിംഗ് തടസ്സപ്പെടും, ഈ ഘട്ടത്തിൽ നിന്ന് നമ്പറിംഗ് വീണ്ടും ആരംഭിക്കും, ഈ സാഹചര്യത്തിൽ ഏഴ് മുതൽ.

             ആട്രിബ്യൂട്ട് ഉപയോഗ ഉദാഹരണം മൂല്യംടാഗ്

          8. , നൽകിയിരിക്കുന്ന ലിസ്റ്റ് ഘടകത്തിൻ്റെ എണ്ണം മാറ്റാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു:

             ഈ ഉദാഹരണത്തിൽ, "ഫസ്റ്റ് ലിസ്റ്റ് ഇനം" നമ്പർ 1 ആയിരിക്കും, "രണ്ടാം ലിസ്റ്റ് ഇനം" നമ്പർ 7 ആയിരിക്കും, "മൂന്നാം ലിസ്റ്റ് ഇനം" നമ്പർ 8 ആയിരിക്കും.

             CSS ഉപയോഗിച്ച് നമ്പറുള്ള ലിസ്റ്റുകൾ ഫോർമാറ്റ് ചെയ്യുന്നു

             ലിസ്റ്റ് നമ്പറുകൾ മാറ്റാൻ നിങ്ങൾ പ്രോപ്പർട്ടി ഉപയോഗിക്കണം ലിസ്റ്റ്-സ്റ്റൈൽ-തരം CSS ശൈലി ഷീറ്റുകൾ:

             അക്കമിട്ട ലിസ്റ്റ് ശൈലികൾ

             ഉദാഹരണം	അർത്ഥം	വിവരണം
             എ, ബി, സി	താഴ്ന്ന-ആൽഫ	ചെറിയ അക്ഷരങ്ങൾ
             എ, ബി, സി	അപ്പർ-ആൽഫ	വലിയ അക്ഷരങ്ങൾ
             i, ii, iii	താഴ്ന്ന-റോമൻ	ചെറിയ അക്ഷരങ്ങളിൽ റോമൻ അക്കങ്ങൾ
             I, II, III	അപ്പർ-റൊമാൻസ്	വലിയ അക്ഷരങ്ങളിൽ റോമൻ അക്കങ്ങൾ

             ഉദാഹരണം: ഒരു CSS പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്നു ലിസ്റ്റ്-സ്റ്റൈൽ-തരം

             ബുള്ളറ്റ് ലിസ്റ്റുകൾ

             ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ അടിസ്ഥാനപരമായി അക്കമിട്ട ലിസ്റ്റുകൾക്ക് സമാനമാണ്, അവയിൽ മാത്രം ഇനങ്ങളുടെ തുടർച്ചയായ നമ്പറിംഗ് അടങ്ങിയിട്ടില്ല. ഒരു ബ്ലോക്ക് ഘടകം ഉപയോഗിച്ചാണ് ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ സൃഷ്ടിക്കുന്നത്

             (ഇംഗ്ലീഷിൽ നിന്ന് ക്രമപ്പെടുത്താത്ത ലിസ്റ്റിൽ നിന്ന് - അസംഖ്യം പട്ടികയിൽ നിന്ന്). ഓരോ ലിസ്റ്റ് ഘടകവും, അക്കമിട്ട ലിസ്റ്റുകളിലെന്നപോലെ, ഒരു ടാഗിൽ ആരംഭിക്കുന്നു
             • . ബ്രൗസർ ഓരോ ലിസ്റ്റ് ഇനവും ഇൻഡൻ്റ് ചെയ്യുകയും ബുള്ളറ്റുകൾ സ്വയമേവ പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.
               ടാഗ് ചെയ്യുക
               ഇനിപ്പറയുന്ന വാക്യഘടനയുണ്ട്:
               • ആദ്യ പോയിൻ്റ്
               • രണ്ടാമത്തെ പോയിൻ്റ്
               • മൂന്നാമത്തെ പോയിൻ്റ്

               ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഓരോ ലിസ്റ്റ് ഇനത്തിനും മുമ്പായി, സ്ഥിരസ്ഥിതിയായി, പൂരിപ്പിച്ച സർക്കിളിൻ്റെ രൂപത്തിൽ ഒരു ചെറിയ മാർക്കർ ചേർക്കുന്നത് നിങ്ങൾക്ക് കാണാൻ കഴിയും:

               ഒരു ടാഗിനുള്ളിൽ

               • സ്ട്രീമിംഗ് ഉള്ളടക്കത്തിൻ്റെ ഏതെങ്കിലും ഘടകം (ലിങ്കുകൾ, ഖണ്ഡികകൾ, ചിത്രങ്ങൾ മുതലായവ) സ്ഥാപിക്കുന്നത് സ്വീകാര്യമാണ്.

                 നെസ്റ്റഡ് ലിസ്റ്റുകൾ

                 ഏത് ലിസ്‌റ്റും മറ്റൊന്നിനുള്ളിൽ കൂടുകൂട്ടാം. ഒരു മൂലകത്തിനുള്ളിൽ
               • ഒരു നെസ്റ്റഡ് ലിസ്‌റ്റോ രണ്ടാം ലെവൽ ലിസ്‌റ്റോ സൃഷ്‌ടിക്കുന്നത് അനുവദനീയമാണ്. ഒരു ലിസ്റ്റ് നെസ്റ്റ് ചെയ്യാൻ, എലമെൻ്റിനുള്ളിലെ പുതിയ ലിസ്റ്റ് വിവരിക്കുക
               • ഇതിനകം നിലവിലുള്ള ലിസ്റ്റ്. നിങ്ങൾ ഒരു ബുള്ളറ്റ് ലിസ്റ്റ് മറ്റൊന്നിലേക്ക് നെസ്റ്റ് ചെയ്യുമ്പോൾ, ബ്രൗസർ രണ്ടാം ലെവൽ ലിസ്റ്റിനായി ബുള്ളറ്റ് ശൈലി സ്വയമേവ മാറ്റുന്നു. ഏത് ലിസ്‌റ്റും മറ്റൊന്നിനുള്ളിൽ കൂടുകൂട്ടാം. ഒരു അക്കമിട്ട ലിസ്റ്റിൻ്റെ രണ്ടാമത്തെ ഇനത്തിനുള്ളിൽ നെസ്റ്റഡ് ചെയ്‌തിരിക്കുന്ന ബുള്ളറ്റഡ് ലിസ്റ്റിൻ്റെ ഘടന ഇനിപ്പറയുന്ന ഉദാഹരണം കാണിക്കുന്നു.

                 ഉദാഹരണം: നെസ്റ്റഡ് ലിസ്റ്റുകൾ

                 • ഇത് സ്വയം പരീക്ഷിക്കുക »
                 • തിങ്കളാഴ്ച
                   1. മെയിൽ അയക്കുക
                   2. എഡിറ്ററെ സന്ദർശിക്കുക
                      • ഒരു തീം തിരഞ്ഞെടുക്കുന്നു
                      • അലങ്കാര ഡിസൈൻ
                      • അന്തിമ റിപ്പോർട്ട്
                   3. സന്ദേശങ്ങളുടെ സായാഹ്ന കാഴ്ച
                 • ചൊവ്വാഴ്ച
                   1. ഷെഡ്യൂൾ പരിഷ്കരിക്കുക
                   2. ചിത്രങ്ങൾ അയക്കുക
                 • ബുധനാഴ്ച...
                 • തിങ്കളാഴ്ച
                   1. മെയിൽ അയക്കുക
                   2. എഡിറ്ററെ സന്ദർശിക്കുക
                      • ഒരു തീം തിരഞ്ഞെടുക്കുന്നു
                      • അലങ്കാര ഡിസൈൻ
                      • അന്തിമ റിപ്പോർട്ട്
                   3. സന്ദേശങ്ങളുടെ സായാഹ്ന കാഴ്ച
                 • ചൊവ്വാഴ്ച
                   1. ഷെഡ്യൂൾ പരിഷ്കരിക്കുക
                   2. ചിത്രങ്ങൾ അയക്കുക
                 • ബുധനാഴ്ച...

                 ബുള്ളറ്റഡ് ലിസ്റ്റുകൾ ഫോർമാറ്റ് ചെയ്യുന്നു

                 ലിസ്റ്റ് മാർക്കറിൻ്റെ രൂപം മാറ്റാൻ, നിങ്ങൾ പ്രോപ്പർട്ടി ഉപയോഗിക്കണം ലിസ്റ്റ്-സ്റ്റൈൽ-തരം CSS ശൈലി ഷീറ്റുകൾ:

                 ഇനിപ്പറയുന്ന ഉദാഹരണം ബുള്ളറ്റഡ് ലിസ്റ്റുകളുടെ വ്യത്യസ്ത ശൈലികൾ കാണിക്കുന്നു:

                 ഉദാഹരണം: ബുള്ളറ്റ് ലിസ്റ്റ് ശൈലികൾ

                 • ഇത് സ്വയം പരീക്ഷിക്കുക »
                 • കോഫി
                 • കോഫി
                 • കോഫി
                 • കോഫി

                 ഡിസ്ക്:

                 • കോഫി
                 • പാൽ

                 സർക്കിൾ:

                 • കോഫി
                 • പാൽ

                 ചതുരം:

                 • കോഫി
                 • പാൽ

                 ഒന്നുമില്ല:

                 • കോഫി
                 • പാൽ

                 ഗ്രാഫിക് മാർക്കറുകൾ.

                 HTML-ൽ ഗ്രാഫിക് മാർക്കറുകൾ ഉപയോഗിച്ച് ഒരു ലിസ്റ്റ് സൃഷ്ടിക്കാൻ സാധിക്കും. ലിസ്റ്റ് മാർക്കറുകൾ സ്റ്റാൻഡേർഡ് സർക്കിളുകളോ സ്ക്വയറുകളോ ആയിരിക്കുമ്പോൾ ഇത് ഒരു കാര്യമാണ്, കൂടാതെ പേജ് രൂപകൽപ്പനയ്ക്ക് അനുസൃതമായി ഡവലപ്പർ തന്നെ മാർക്കർ തിരഞ്ഞെടുക്കുമ്പോൾ മറ്റൊന്നാണ്. ലിസ്റ്റ് ഇനങ്ങൾ മനോഹരമാക്കുന്നതിന്, ചെറിയ ചിത്രങ്ങൾ പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്.
                 ഒരു സാധാരണ മാർക്കർ ഗ്രാഫിക് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാൻ, പ്രോപ്പർട്ടി മാറ്റിസ്ഥാപിക്കുക ലിസ്റ്റ്-സ്റ്റൈൽ-തരംഓരോ വസ്തുവിനും ലിസ്റ്റ്-സ്റ്റൈൽ-ചിത്രംകൂടാതെ ചിത്രത്തിൻ്റെ URL സൂചിപ്പിക്കുക:

                 ഉദാഹരണം: ഗ്രാഫിക് മാർക്കറുകൾ

                 • ഇത് സ്വയം പരീക്ഷിക്കുക »

                 രാശിചക്രത്തിൻ്റെ അടയാളങ്ങൾ

                 • ടോറസ്
                 • മിഥുനം

                 രാശിചക്രത്തിൻ്റെ അടയാളങ്ങൾ

                 • ഏരീസ്
                 • ടോറസ്
                 • മിഥുനം

                 നിർവചനങ്ങളുടെ പട്ടിക (വിവരണങ്ങൾ)

                 നിർവചന ലിസ്റ്റുകൾ സൃഷ്ടിക്കുന്നതിന് വളരെ ഉപയോഗപ്രദമാണ്, ഉദാഹരണത്തിന്, നിബന്ധനകളുടെ നിങ്ങളുടെ സ്വകാര്യ നിഘണ്ടു. ഓരോ നിർവചന പട്ടിക ഇനത്തിനും രണ്ട് ഭാഗങ്ങളുണ്ട്: പദവും അതിൻ്റെ നിർവചനവും.
                 നിങ്ങൾ മുഴുവൻ ലിസ്‌റ്റും ഒരു ഘടകത്തിലേക്ക് ഇട്ടു

                 (ഇംഗ്ലീഷ് ഡെഫനിഷൻ ലിസ്റ്റിൽ നിന്ന് - നിർവചനങ്ങളുടെ പട്ടിക). അതിൽ ടാഗുകൾ ഉൾപ്പെടുന്നു

                 (ഇംഗ്ലീഷ് ഡെഫനിഷൻ ടേമിൽ നിന്ന് - ഒരു നിർവചിക്കപ്പെട്ട വാക്ക്, പദം) കൂടാതെ

                 (ഇംഗ്ലീഷ് നിർവചന വിവരണത്തിൽ നിന്ന് - നിർവചിക്കപ്പെട്ട പദത്തിൻ്റെ വിവരണം).
                 നിർവചനങ്ങളുടെ പട്ടികകൾ പലപ്പോഴും ശാസ്ത്രീയവും സാങ്കേതികവും വിദ്യാഭ്യാസപരവുമായ പ്രസിദ്ധീകരണങ്ങളിൽ ഉപയോഗിക്കുന്നു, അവ ഗ്ലോസറികൾ, നിഘണ്ടുക്കൾ, റഫറൻസ് പുസ്തകങ്ങൾ മുതലായവ സമാഹരിക്കാൻ ഉപയോഗിക്കുന്നു.

                 വിവരണങ്ങളുടെ പട്ടികയുടെ പൊതുവായ ഘടന ഇപ്രകാരമാണ്:

                 ആദ്യ ടേം

                 ആദ്യ പദത്തിൻ്റെ വിവരണം

                 രണ്ടാം ടേം

                 രണ്ടാമത്തെ പദത്തിൻ്റെ വിവരണം

                 ഇനിപ്പറയുന്ന ഉദാഹരണം ഒരു നിർവചന പട്ടികയുടെ സാധ്യമായ ഒരു ഉപയോഗം കാണിക്കുന്നു:

                 ഉദാഹരണം: നിർവചനങ്ങളുടെ പട്ടിക

                 • ഇത് സ്വയം പരീക്ഷിക്കുക »

                 വേൾഡ് വൈഡ് വെബ് - ഇംഗ്ലീഷിൽ നിന്ന്. വേൾഡ് വൈഡ് വെബ് (WWW) എന്നത് ഇൻറർനെറ്റുമായി ബന്ധിപ്പിച്ചിട്ടുള്ള വ്യത്യസ്‌ത കമ്പ്യൂട്ടറുകളിൽ സ്ഥിതി ചെയ്യുന്ന അനുബന്ധ രേഖകളിലേക്ക് ആക്‌സസ് നൽകുന്ന ഒരു വിതരണ സംവിധാനമാണ്.

                 വിവരങ്ങൾ കൈമാറാൻ ഒരൊറ്റ എക്സ്ചേഞ്ച് പ്രോട്ടോക്കോൾ ഉപയോഗിക്കുന്ന നെറ്റ്‌വർക്കുകളുടെ ഒരു കൂട്ടമാണ് ഇൻ്റർനെറ്റ്.

                 ഒരു വെബ്‌സൈറ്റ് എന്നത് ലിങ്കുകളും ഏകീകൃത രൂപകൽപ്പനയും ഉപയോഗിച്ച് പരസ്പരം ബന്ധിപ്പിച്ചിരിക്കുന്ന വ്യക്തിഗത വെബ് പേജുകളുടെ ഒരു കൂട്ടമാണ്.

                 ഇൻ്റർനെറ്റ്

                 വേൾഡ് വൈഡ് വെബ്

                 - ഇംഗ്ലീഷിൽ നിന്ന് വേൾഡ് വൈഡ് വെബ് (WWW) എന്നത് ഇൻറർനെറ്റുമായി ബന്ധിപ്പിച്ചിട്ടുള്ള വ്യത്യസ്‌ത കമ്പ്യൂട്ടറുകളിൽ സ്ഥിതി ചെയ്യുന്ന അനുബന്ധ രേഖകളിലേക്ക് ആക്‌സസ് നൽകുന്ന ഒരു വിതരണ സംവിധാനമാണ്.

                 - വിവര കൈമാറ്റത്തിനായി ഒരൊറ്റ എക്സ്ചേഞ്ച് പ്രോട്ടോക്കോൾ ഉപയോഗിക്കുന്ന നെറ്റ്‌വർക്കുകളുടെ ഒരു കൂട്ടം.

                 വെബ്സൈറ്റ്

                 - ലിങ്കുകളും ഏകീകൃത രൂപകൽപ്പനയും ഉപയോഗിച്ച് പരസ്പരം ബന്ധിപ്പിച്ചിട്ടുള്ള വ്യക്തിഗത വെബ് പേജുകളുടെ ഒരു കൂട്ടം.

                 സ്ഥിരസ്ഥിതിയായി, പദത്തിൻ്റെ വാചകം ബ്രൗസർ വിൻഡോയുടെ ഇടത് അറ്റത്ത് അമർത്തി, പദത്തിൻ്റെ വിവരണം താഴെ സ്ഥിതിചെയ്യുകയും വലത്തേക്ക് മാറ്റുകയും ചെയ്യുന്നു.

                 വിവരങ്ങൾ ഓർഗനൈസുചെയ്യാൻ സഹായിക്കുന്നതിനാൽ ലിസ്റ്റുകൾ ഉള്ളടക്കത്തിൻ്റെ ഒരു പ്രധാന ഭാഗമാണ്. ലിസ്‌റ്റുകളിലെ ടെക്‌സ്‌റ്റ് നന്നായി മനസ്സിലാക്കുകയും ഓർക്കാൻ എളുപ്പവുമാണ്.

                 ഏറ്റവും ലളിതമായത്, അതിൻ്റെ ഓരോ മൂലകത്തിനും മുന്നിൽ ഒരു മാർക്കർ ഉണ്ട് - ഒരു വൃത്തം, ചതുരം അല്ലെങ്കിൽ വൃത്തം. ബുള്ളറ്റഡ് ലിസ്റ്റിലെ ഇനങ്ങളുടെ ക്രമം പ്രധാനമല്ല.
                 • .
                   ഇത് സൃഷ്ടിക്കാൻ, നിങ്ങൾ രണ്ട് ടാഗുകൾ മാത്രം ഉപയോഗിക്കേണ്ടതുണ്ട്:
                   • .
                     • ടാഗ് മുഖേന വ്യക്തമാക്കിയ ഘടകങ്ങളുള്ള ഒരു ലിസ്റ്റ് അടങ്ങുന്ന ഒരു കണ്ടെയ്‌നറാണ്
                     • ബുള്ളറ്റ് ലിസ്റ്റ്
                     • കല്ല്
                     
                     
                     

                     കത്രിക പേപ്പർസ്ഥിരസ്ഥിതിയായി, ലിസ്റ്റ് മാർക്കർ ഒരു കറുത്ത വൃത്തമാണ് (

                     ഡിസ്ക് തരം). ടാഗിൽ ചേർക്കുന്നതിലൂടെ ആട്രിബ്യൂട്ട്അതിന് ഉചിതമായ മൂല്യം നൽകിക്കൊണ്ട്, മാർക്കർ ഒരു സർക്കിളിലേക്ക് മാറ്റാം ( വൃത്തം).

                     ) അല്ലെങ്കിൽ കറുത്ത ചതുരം (

                     ചതുരം

                     ഏറ്റവും ലളിതമായത്, അതിൻ്റെ ഓരോ മൂലകത്തിനും മുന്നിൽ ഒരു മാർക്കർ ഉണ്ട് - ഒരു വൃത്തം, ചതുരം അല്ലെങ്കിൽ വൃത്തം. ബുള്ളറ്റഡ് ലിസ്റ്റിലെ ഇനങ്ങളുടെ ക്രമം പ്രധാനമല്ല.
                     1. അതിലെ മൂലകങ്ങളുടെ ക്രമം പ്രധാനമാണ് എന്നതിനാൽ ഇത് അടയാളപ്പെടുത്തിയതിൽ നിന്ന് വ്യത്യാസപ്പെട്ടിരിക്കുന്നു, അതിനാൽ ഒരു മാർക്കറിന് പകരം, തുടർച്ചയായ സംഖ്യകളോ അക്ഷരങ്ങളോ ഇവിടെ ഉപയോഗിക്കുന്നു. ലിസ്റ്റിലെ ഓർഡറിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല: ബ്രൗസർ ഈ ചുമതല ഏറ്റെടുക്കുന്നു. നിങ്ങൾ ലിസ്റ്റ് മാറ്റുകയാണെങ്കിൽ (ഓർഡറിന് പുറത്തുള്ള ഒരു ഇനം നീക്കം ചെയ്യുകയോ ചേർക്കുകയോ ചെയ്യുക), ബ്രൗസർ അത് വീണ്ടും കണക്കാക്കുകയും ശരിയായി പ്രദർശിപ്പിക്കുകയും ചെയ്യും.
                        അക്കമിട്ട ലിസ്‌റ്റുകൾ സൃഷ്‌ടിക്കാൻ ടാഗുകൾ ഉപയോഗിക്കുന്നു
                        1. . കണ്ടെയ്നർ
                           പട്ടികയുടെ തുടക്കവും അവസാനവും നിർവചിക്കുന്നു, ടാഗ്
                           .
                           1. ടാഗ് മുഖേന വ്യക്തമാക്കിയ ഘടകങ്ങളുള്ള ഒരു ലിസ്റ്റ് അടങ്ങുന്ന ഒരു കണ്ടെയ്‌നറാണ്
                           2. ബുള്ളറ്റ് ലിസ്റ്റ്
                           3. കല്ല്
                           
                           
                           

                           

                           മാറ്റിസ്ഥാപിച്ചു

                           അക്കമിട്ട ലിസ്റ്റ്

                           1. തരം. ഈ ആട്രിബ്യൂട്ട് നിങ്ങളെ അറബിയിൽ മാത്രമല്ല, റോമൻ അക്കങ്ങൾ അല്ലെങ്കിൽ വ്യത്യസ്ത കേസുകളുടെ ലാറ്റിൻ അക്ഷരങ്ങൾ ഉപയോഗിച്ച് ലിസ്റ്റ് അക്കമിടാൻ അനുവദിക്കുന്നു. തരംമൂല്യങ്ങൾ 1 (സ്ഥിരസ്ഥിതി), a, A, i, I (അവയിൽ സ്വയം പരീക്ഷിക്കാൻ ശ്രമിക്കുക) പിന്തുണയ്ക്കുന്നു.

                           2. ആരംഭിക്കുക. നമ്പറിംഗ് എപ്പോഴും ഒന്നിൽ തുടങ്ങണമെന്നില്ല. പ്രാരംഭ മൂല്യം സജ്ജീകരിക്കാൻ ഈ ആട്രിബ്യൂട്ട് നിങ്ങളെ അനുവദിക്കുന്നു - പട്ടികയിലെ ആദ്യ ഘടകത്തിൻ്റെ എണ്ണം. അതിൽ നിങ്ങൾക്ക് റിപ്പോർട്ട് ആരംഭിക്കുന്നത് വ്യക്തമാക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, നമ്പർ 100 അല്ലെങ്കിൽ K എന്ന അക്ഷരത്തിൽ.

                           3. വിപരീതമായി. ലിസ്റ്റ് 1 മുതൽ 10 വരെയല്ല, 10 മുതൽ 1 ലേക്ക് പോകുകയാണെങ്കിൽ, ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കണം. ഇത് വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, നമ്പറിംഗ് വിപരീത ക്രമത്തിലായിരിക്കും.

                           ലിസ്റ്റിൻ്റെ മധ്യത്തിലുള്ള ഒരു ഘടകത്തിലേക്ക് ഒരു അനിയന്ത്രിതമായ നമ്പർ നൽകുന്നതിന്, നിങ്ങൾ ടാഗിൽ ഉപയോഗിക്കേണ്ടതുണ്ട്

                           1. ഡിസ്ക് :

                           2. മുപ്പത്തിയെട്ടാമത്തേതിന് ശേഷം നാല്പത്തഞ്ചാമത്തെ ഘടകം

                           ലിസ്റ്റിൻ്റെ മധ്യത്തിലുള്ള ഒരു ഘടകത്തിൻ്റെ നമ്പർ മാറ്റുന്നതിലൂടെ, അതിനെ പിന്തുടരുന്ന എല്ലാ ഘടകങ്ങളുടെയും നമ്പറിംഗ് നിങ്ങൾ മാറ്റും - മൂല്യ ആട്രിബ്യൂട്ടിലെ മൂല്യത്തിൽ റിപ്പോർട്ട് ആരംഭിക്കും. ഉദാഹരണത്തിന്, നിങ്ങൾ മൂലകം 18-ന് 35 എന്ന സംഖ്യ നൽകിയിട്ടുണ്ടെങ്കിൽ, അതിനെ പിന്തുടരുന്ന മൂലകങ്ങൾക്ക് 19, 20, 21 അല്ല, 36, 37, 38 എന്ന അക്കങ്ങൾ ഉണ്ടായിരിക്കും.

                           നിർവചനങ്ങളുടെ പട്ടിക

                           മുകളിൽ ചർച്ച ചെയ്തതുപോലെ അറിയപ്പെടാത്ത ഒരു ലിസ്റ്റ് തരം. നിബന്ധനകളും അവയുടെ നിർവചനങ്ങളും ഉൾക്കൊള്ളുന്നു. ടാഗുകൾ ഉപയോഗിച്ച് സൃഷ്ടിച്ചത്:

                           - ഒരു ലിസ്റ്റ് അടങ്ങുന്ന ഒരു കണ്ടെയ്നർ.

                           - ടേം ടാഗ്.

                           - നിർവചന ടാഗ്

                           നിർവചന ലിസ്റ്റുകളുടെ പ്രയോഗത്തിൻ്റെ വ്യാപ്തി ഗ്ലോസറികൾ, റഫറൻസ് ബുക്കുകൾ, ടെസ്റ്റുകൾ, നിഘണ്ടുക്കൾ, “ടേം - വിശദീകരണം” തരത്തിലുള്ള മറ്റ് ശേഷിയുള്ള ലിസ്റ്റിംഗുകൾ എന്നിവയാണ്.

                           നിർവചനങ്ങളുടെ ഒരു ഉദാഹരണ പട്ടിക ഇതാ:

                           ഡിസ്ക്രിപ്റ്റർ

                           "ടാഗ്" എന്നറിയപ്പെടുന്ന മാർക്ക്അപ്പ് ഭാഷയുടെ അടിസ്ഥാന യൂണിറ്റ്.

                           ആട്രിബ്യൂട്ട്

                           അധിക ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ് ഓപ്‌ഷനുകൾ നൽകുന്ന ടാഗിൻ്റെ ഒരു പ്രോപ്പർട്ടി.

                           ലേബൽ

                           അടയ്‌ക്കേണ്ടതില്ലാത്ത ഒരൊറ്റ ടാഗ്.

                           
                           
                           

                           

                           പരസ്‌പരമുള്ള ലിസ്റ്റുകൾ അടങ്ങുന്ന ഒരു ലിസ്‌റ്റ്. വ്യത്യസ്ത തരം പട്ടികകൾ ഉൾപ്പെടുത്താം. ഒരു മൾട്ടി-ലെവൽ ഘടനയിൽ ആശയക്കുഴപ്പത്തിലാകുന്നത് എളുപ്പമായതിനാൽ, ടാഗുകളുടെ ശരിയായ നെസ്റ്റിംഗ് നിലനിർത്തുന്നതിലാണ് സൃഷ്ടിയുടെ ബുദ്ധിമുട്ട്.

                           ഒരു മൾട്ടി-ലെവൽ ലിസ്റ്റിൻ്റെ ഒരു ഉദാഹരണം ഇതാ:

                           പ്രോഗ്രാമിംഗ് ഭാഷകളെ ഇവയായി തിരിച്ചിരിക്കുന്നു:

                           • ഘടനാപരമായ
                           1. പാസ്കൽ
                           2. ഒബെറോൺ
                           1. ലിംബോ
                           • ഒബ്ജക്റ്റ് ഓറിയൻ്റഡ്
                           1. ജാവ
                           • പ്രവർത്തനപരം
                           1. ലിസ്പ്
                           2. പൈത്തൺ