എച്ച്ടിഎംഎൽ ഉപയോഗിച്ചുള്ള HTML- ൽ സ്പെയിസുകളും ഭൌതിക വിഭജനവും സൃഷ്ടിക്കുക
തുടക്കത്തിൽ വെബ് ഡിസൈനറായ സ്പെയ്സുകളും HTML ൽ ഘടകങ്ങളുടെ ശാരീരിക വേർതിരിക്കലും സൃഷ്ടിക്കുന്നത് പ്രയാസമാണ്. ഇതുകൊണ്ടാണ് HTML- ന് "വൈറ്റ്സ്പെയ്സ് തകരാർ" എന്നൊരു സ്ഥലം ഉള്ളത്. നിങ്ങളുടെ HTML കോഡിൽ 1 സ്ഥലം അല്ലെങ്കിൽ 100 ടൈപ്പുചെയ്യുമോ, വെബ് ബ്രൗസർ ആ സ്പെയ്സുകൾ തകരാറിലായി ഒരൊറ്റ സ്പെയ്സ് മാത്രം. മൈക്രോസോഫ്റ്റ് വേഡ് പോലുള്ള പ്രോഗ്രാമിൽ നിന്നും വ്യത്യസ്തമാണ് ഇത്. ഇത് ഡോക്യുമെന്റ് സ്രഷ്ടാക്കൾക്ക് വേർതിരിച്ച വാക്കുകളും ആ പ്രമാണത്തിലെ മറ്റ് ഘടകങ്ങളും ചേർക്കുന്നതിന് ഒന്നിലധികം ഇടങ്ങൾ ചേർക്കാൻ അനുവദിക്കുന്നു.
ഇത് വെബ്സൈറ്റ് ഡിസൈൻ സ്പെയ്സിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നല്ല.
അപ്പോൾ, വെബ് പേജിൽ കാണിക്കുന്ന HTML ലെ വൈറ്റ്സ്പെയ്സ് എങ്ങനെയാണ് നിങ്ങൾ ചേർക്കുന്നത്? ഈ ലേഖനം പല വിധങ്ങളിൽ ചിലതു പരിശോധിക്കുന്നു.
CSS ഉള്ള HTML ലെ സ്പെയ്സുകൾ
നിങ്ങളുടെ HTML ൽ സ്പെയ്സുകൾ ചേർക്കുന്നതിനുള്ള മാർഗ്ഗം Cascading Style Sheets (CSS) ആണ് . ഒരു വെബ് പേജിന്റെ വിഷ്വൽ കോഴ്സുകൾ ചേർക്കാൻ CSS ഉപയോഗിക്കേണ്ടതാണ്, അകലവും ഒരു പേജിന്റെ വിഷ്വൽ ഡിസൈൻ സവിശേഷതകളിൽ ഭാഗമായതിനാൽ, സി.എസ്.എസ് എവിടെയാണ് നിങ്ങൾ ചെയ്യണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നത്.
നിങ്ങൾക്ക് CSS ൽ, നിങ്ങൾക്ക് മാട്രിൻ അല്ലെങ്കിൽ പാഡിംഗ് വസ്തുക്കൾ ഉപയോഗിച്ച് സ്ഥലത്തെ ചേർക്കാൻ കഴിയും. കൂടാതെ, ടെക്സ്റ്റ് ഇൻഡന്ഡഡ് വസ്തു, ഇന്ഡന്റ് ഖണ്ഡികകള് പോലെയുള്ള ടെക്സ്റ്റിന് മുന്നിലേക്ക് ഇടം ചേര്ക്കുന്നു.
നിങ്ങളുടെ ഖണ്ഡികകൾക്കെല്ലാം മുന്നിൽ ഇടം ചേർക്കാൻ CSS എങ്ങനെ ഉപയോഗിക്കണമെന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ. നിങ്ങളുടെ ബാഹ്യ അല്ലെങ്കിൽ ആന്തരിക ശൈലി ഷീറ്റിലേക്ക് ഇനിപ്പറയുന്ന CSS ചേർക്കുക:
p {
ടെക്സ്റ്റ്-ഇൻഡന്റ്: 3 എമി;
}
HTML ലെ സ്പെയ്സുകൾ: നിങ്ങളുടെ വാചകത്തിനുള്ളിൽ
നിങ്ങളുടെ വാചകത്തിൽ അധിക സ്ഥലം അല്ലെങ്കിൽ രണ്ടെണ്ണം ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾക്ക് ബ്രേക്കിംഗ് സ്പെയ്സ് ഉപയോഗിക്കാവുന്നതാണ്.
ഈ പ്രതീകം സാധാരണ സ്പേസ് പ്രതീകം പോലെ പ്രവർത്തിക്കുന്നു, ബ്രൗസറിനുള്ളിൽ മാത്രം ഇത് പൊട്ടിയില്ല.
ഒരു വരിയിലെ വരിയിൽ അഞ്ച് സ്പെയ്സുകൾ എങ്ങനെ ചേർക്കാമെന്നതിന്റെ ഉദാഹരണം ഇതാ:
ഈ പാഠത്തിനുള്ളിൽ അഞ്ച് അധിക ഇടങ്ങൾ ഉണ്ട്
HTML ഉപയോഗിക്കുന്നു:
ഈ ടെക്സ്റ്റിനു & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; അതിൽ അഞ്ച് അധിക ഇടങ്ങൾ
അധിക ലൈൻ ബ്രേക്കുകൾ ചേർക്കാൻ നിങ്ങള്ക്ക് ടാഗ് ഉപയോഗിക്കാം.
ഇതിന്റെ അവസാനത്തിൽ ഈ വരിയിൽ അഞ്ച് ലൈൻ ബ്രേക്കുകൾ ഉണ്ട്.
എന്തുകൊണ്ട് HTML ൽ സ്പെയ്സിംഗ് ഒരു മോശം ഐഡിയാണ്
ഈ ഓപ്ഷനുകൾ രണ്ടും പ്രവർത്തിക്കുമ്പോൾ - ബ്രേക്കിംഗ് സ്പെയ്സ് ഘടകം നിങ്ങളുടെ വാചകത്തിലേക്ക് സ്പേസിംഗ് ചേർക്കുകയും, തുടർന്ന് ലൈൻ ബ്രേക്കുകൾ മുകളിൽ കാണിച്ചിരിക്കുന്ന ഖണ്ഡികയ്ക്ക് മുകളിലുള്ള സ്പേസിംഗ് ചേർക്കുകയും ചെയ്യും - നിങ്ങളുടെ വെബ്പേജിലെ സ്പേസിംഗ് സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും മികച്ച മാർഗമല്ല ഇത്. നിങ്ങളുടെ HTML- ൽ ഈ ഘടകങ്ങൾ ചേർക്കുന്നത് ദൃശ്യ ശൈലികൾ (CSS) ൽ നിന്ന് ഒരു പേജിന്റെ ഘടന (HTML) വേർതിരിക്കുന്നതിനു പകരം കോഡിന് ദൃശ്യം വിവരങ്ങൾ ചേർക്കുന്നു. ഭാവിയിൽ അപ്ഡേറ്റ് ചെയ്യുന്നതും മൊത്തം ഫയൽ വലുപ്പവും പേജ് പ്രകടനവുമുൾപ്പെടെയുള്ള പല കാരണങ്ങൾ ഇവർക്ക് വേർതിരിക്കണമെന്ന് മികച്ച സമ്പ്രദായങ്ങൾ നിർദേശിക്കുന്നു.
നിങ്ങളുടെ എല്ലാ ശൈലികളും, സ്പെയ്സിനെയും ആധാരമാക്കി ബാഹ്യ ശൈലി ഷീറ്റ് നിങ്ങൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, തുടർന്ന് സൈറ്റിനായി ആ ശൈലികൾ മാറ്റുന്നത് എളുപ്പമാണ്, കാരണം നിങ്ങൾക്ക് ഒരു സ്റ്റൈൽ ഷീറ്റ് അപ്ഡേറ്റ് ചെയ്യേണ്ടി വരും.
അതിനു ശേഷം അഞ്ച് ടാഗുകൾ അടങ്ങുന്ന വാക്യത്തിന്റെ മുകളിലുള്ള ഉദാഹരണം ശ്രദ്ധിക്കുക. നിങ്ങൾക്ക് എല്ലാ ഖണ്ഡികയുടെയും താഴെയുളള അത്രയും തുക ആവശ്യമെങ്കിൽ, നിങ്ങളുടെ മുഴുവൻ സൈറ്റിലും ഓരോ ഖണ്ഡത്തിലും ആ HTML കോഡ് നിങ്ങൾ ചേർക്കേണ്ടി വരും. ഇത് നിങ്ങളുടെ പേജുകൾ ഉത്തേജിപ്പിക്കാൻ പോകുന്ന അധിക മാർക്ക്അപ്പ് തുകയാണ്.
കൂടാതെ, ഈ സ്പേസിംഗ് വളരെ കൂടുതലോ കുറവോ ആണെന്ന് നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, അതിനെ കുറച്ചുമാത്രം മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങളുടെ മുഴുവൻ വെബ്സൈറ്റിലും ഓരോ ഖണ്ഡികയും നിങ്ങൾ തിരുത്തിയെഴുതേണ്ടതുണ്ട്. നന്ദി വേണ്ട!
ഈ സ്പേസിംഗ് ഘടകങ്ങളെ നിങ്ങളുടെ കോഡിലേക്ക് ചേർക്കുന്നതിന് പകരം CSS ഉപയോഗിക്കുക.
p {
പാഡിംഗ്-അടിയിൽ: 20px;
}
നിങ്ങളുടെ ഒരു വരിയിലെ വരികൾ നിങ്ങളുടെ പേജിന്റെ ഖണ്ഡികയിൽ സ്പേസിംഗ് ചേർക്കുന്നു. ഭാവിയിൽ ഈ സ്പെയ്സിംഗ് മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഈ ഒരു വരി എഡിറ്റ് ചെയ്യുക (നിങ്ങളുടെ മുഴുവൻ സൈറ്റിന്റെ കോഡിനുപകരം) കൂടാതെ നിങ്ങൾ പോകുന്നത് നല്ലതാണ്!
ഇനി, നിങ്ങളുടെ വെബ്സൈറ്റിലെ ഒരു ഭാഗത്ത് ഒരൊറ്റ സ്പേസ് ചേർക്കണമെങ്കിൽ,
ടാഗ് അല്ലെങ്കിൽ ഒരൊറ്റ ബ്രേക്കിംഗ് സ്പെയ്സ് ഉപയോഗിച്ച് ലോകത്തിന്റെ അന്ത്യം ആയിരിക്കില്ല, പക്ഷെ നിങ്ങൾ ശ്രദ്ധിക്കേണ്ടതുണ്ട്.
ഈ ഇൻലൈൻ HTML സ്പെയ്സിംഗ് ഓപ്ഷനുകൾ ഉപയോഗിച്ച് ഒരു സ്ലിപ്പിരി ചരിവ് ആകാം. ഒന്നോ രണ്ടോ നിങ്ങളുടെ സൈറ്റിനെ ഉപദ്രവിച്ചേക്കാമെങ്കിലും, നിങ്ങൾ ആ പാത്ത് തുടരുകയാണെങ്കിൽ, നിങ്ങളുടെ പേജിലേക്ക് പ്രശ്നങ്ങളുണ്ടാക്കാം. അവസാനത്തിൽ, HTML സ്പെയ്സിനായി മറ്റ് എല്ലാ വെബ്പേജുകളുടെ ദൃശ്യ ആവശ്യങ്ങൾക്കുമായി നിങ്ങൾ CSS- ലേക്ക് തിരിയുന്നത് നല്ലതായിരിക്കും.