ടാബുകളും സ്പെയ്സസും സൃഷ്ടിക്കുന്നതിന് എങ്ങനെയാണ് HTML, CSS എന്നിവ ഉപയോഗിക്കേണ്ടത്

HTML ൽ എങ്ങനെയാണ് വെളുത്ത സ്പേസ് ബ്രൗസറുകൾ ഉപയോഗിക്കുന്നത് എന്ന് നോക്കാം

നിങ്ങൾ ഒരു തുടക്കത്തിലെ ഒരു വെബ് ഡിസൈനർ ആണെങ്കിൽ നിങ്ങൾ ആദ്യം മനസ്സിലാക്കേണ്ട ഒരു കാര്യമാണ് സൈറ്റിലെ കോഡിലെ വെളുത്ത സ്ഥലം വെബ് ബ്രൗസറുകളാൽ കൈകാര്യം ചെയ്യുന്ന രീതി.

ദൗർഭാഗ്യവശാൽ, ബ്രൗസറുകൾ വെളുത്ത സ്പെയ്സ് കൈകാര്യം ചെയ്ത രീതി, ആദ്യത്തേത് വളരെ അവബോധമില്ലാത്തതല്ല, പ്രത്യേകിച്ചും നിങ്ങൾ HTML- ൽ എത്തി, വൈറ്റ് സ്പെയ്സ്, വേഡ് പ്രോസസ്സിംഗ് പ്രോഗ്രാമുകളിൽ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നുവെന്നത് താരതമ്യപ്പെടുത്തിയിരിക്കും.

വേഡ് പ്രോസ്സസിംഗ് സോഫ്റ്റ്വെയറിൽ, പ്രമാണത്തിൽ വളരെയധികം സ്പെയ്സിംഗ് അല്ലെങ്കിൽ ടാബുകൾ ചേർക്കാനും പ്രമാണത്തിലെ ഉള്ളടക്കത്തിന്റെ പ്രദർശനത്തിൽ ഇടവിട്ട് പ്രതിഫലിപ്പിക്കാനും കഴിയും. ഇത് HTML അല്ലെങ്കിൽ വെബ്പേജുകളുമായുള്ള കാര്യമല്ല. അതുപോലെ, വെബ് ബ്രൗസറുകളാൽ കൈകാര്യം ചെയ്യുന്ന വെറ്റ് സ്പേസ് എത്ര പ്രധാനമാണെന്ന് പഠിക്കുക.

പ്രിന്റ് ചെയ്യാനുള്ള സ്പേസിംഗ്

വേഡ് പ്രോസസ്സിംഗ് സോഫ്റ്റ്വെയറിൽ മൂന്നു പ്രാഥമിക വൈറ്റ് സ്പെയ്സ് പ്രതീകങ്ങൾ സ്പെയ്സ്, ടാബ്, കറേജ് റിട്ടേൺ എന്നിവയാണ്. ഓരോന്നും വ്യത്യസ്തമായ രീതിയിൽ പ്രവർത്തിക്കുന്നു, പക്ഷേ HTML- ൽ, ബ്രൌസറുകൾ അവയെ എല്ലാം തന്നെ ഒരേപോലെ തന്നെ നൽകുന്നു. നിങ്ങളുടെ HTML മാർക്കപ്പിൽ നിങ്ങൾ ഒരു സ്പെയ്സ് അല്ലെങ്കിൽ 100 ​​സ്പെയ്സുകൾ നൽകുമ്പോഴോ അല്ലെങ്കിൽ നിങ്ങളുടെ സ്പെയ്സിങ്ങ് ടാബുകളും കാരിയൽ റിട്ടേണുകളും ഉപയോഗിച്ച് മിഴിവുകൂട്ടുകയോ, ബ്രൗസർ റെൻഡർ ചെയ്തപ്പോൾ ഇവയെല്ലാം ഒരു സ്പെയ്സ് കുറച്ചിരിക്കും. വെബ് ഡിസൈൻ ടെർമിനോളജിയിൽ വൈറ്റ് സ്പേസ് ഷാപ്പ് എന്നാണ് ഇത് അറിയപ്പെടുന്നത്. വെബ് പേജിൽ വൈറ്റ്സ്പെയ്സ് ചേർക്കുന്നതിന് നിങ്ങൾക്ക് ഈ സാധാരണ സ്പെയ്സിംഗ് കീകൾ ഉപയോഗിക്കാൻ കഴിയില്ല, കാരണം ബ്രൌസറിൽ റെൻഡർ ചെയ്തപ്പോൾ ബ്രൌസർ ഒന്നിലധികം സ്പെയ്സുകൾ കുറഞ്ഞു,

ആരെങ്കിലും ടാബുകൾ ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്?

സാധാരണ, ആളുകൾ ഒരു ടെക്സ്റ്റ് പ്രമാണത്തിൽ ടാബുകൾ ഉപയോഗിക്കുമ്പോൾ, അവ ലേഔട്ട് കാരണങ്ങൾക്കായി ഉപയോഗിച്ചോ അല്ലെങ്കിൽ ഒരു പ്രത്യേക സ്ഥലത്തേക്ക് നീക്കുന്നതിന് അല്ലെങ്കിൽ മറ്റൊരു മൂലകത്തിൽ നിന്ന് ഒരു നിശ്ചിത ദൂരത്തേക്കോ ഉപയോഗിക്കുകയാണ്. വെബ് ഡിസൈനിംഗിൽ, ആ ദൃശ്യ ശൈലികൾ അല്ലെങ്കിൽ ലേഔട്ട് ആവശ്യങ്ങൾ നേടുന്നതിന് മുൻപ് നൽകിയിരിക്കുന്ന സ്പെയ്സ് പ്രതീകങ്ങൾ ഉപയോഗിക്കാൻ നിങ്ങൾക്ക് കഴിയില്ല.

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

HTML ടാബുകളും സ്പേസിംഗും സൃഷ്ടിക്കുന്നതിന് CSS ഉപയോഗിച്ചു്

ഇന്നത്തെ വെബ്സൈറ്റുകൾ ഘടനയും ശൈലിയും വേർതിരിച്ച് നിർമ്മിച്ചതാണ്. ഒരു താളിന്റെ ഘടന HTML കൈകാര്യം ചെയ്യുന്നു, കൂടാതെ സ്റ്റൈൽ ആജ്ഞാനുസരണം CSS ചെയ്യുന്നു. അതായത് ഒരു നിശ്ചിത ലേഔട്ട് ഉണ്ടാക്കുകയോ അല്ലെങ്കിൽ ഒരു നിശ്ചിത ലേഔട്ട് കൈവരിക്കുകയോ ചെയ്യുകയാണെങ്കിൽ, നിങ്ങൾ CSS ലേക്ക് തിരിയണം, പകരം HTML കോഡിൽ സ്പെയ്സിംഗ് പ്രതീകങ്ങൾ ചേർക്കാൻ ശ്രമിക്കരുത്.

ടെക്സ്റ്റിന്റെ നിരകൾ സൃഷ്ടിക്കാൻ നിങ്ങൾ ടാബുകൾ ഉപയോഗിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ, ആ നിരയുടെ ലേഔട്ട് ലഭിക്കുന്നതിന് പകരം CSS ഉപയോഗിച്ച് പൊരുത്തപ്പെടുന്ന

ഘടകങ്ങൾ നിങ്ങൾക്ക് ഉപയോഗിക്കാനാകും. ഈ പൊസിഷനുകൾ സി.എസ്.എസ് ഫ്ലോട്ട്, കേവലമായ ആപേക്ഷിക പൊസിഷനിങ്, അല്ലെങ്കിൽ ഫ്ളെക്സ്ബോക്സ് അല്ലെങ്കിൽ CSS ഗ്രിഡ് പോലുള്ള പുതിയ സി.എസ്.എസ്.

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

മാർജിനുകൾ, പാഡിംഗ്, ടെക്സ്റ്റ് ഇൻഡന്റ് എന്നിവ

CSS ഉപയോഗിച്ച് സ്പേസിംഗ് സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും സാധാരണ രീതി ഇനിപ്പറയുന്ന CSS ശൈലികളിൽ ഒന്ന് ഉപയോഗിച്ചാണ്:

ഉദാഹരണത്തിന്, ഒരു CSS പോലുള്ള ഒരു ഖണ്ഡികയുടെ ആദ്യ വരി താഴെക്കൊടുത്തിട്ടുള്ള CSS- നൊപ്പം നിങ്ങൾക്ക് നൽകാം (ഇത് നിങ്ങളുടെ ഖണ്ഡികയ്ക്ക് ഒരു "ആദ്യ" ഘടികാരവുമായി അറ്റാച്ച് ചെയ്തതാണെന്ന് ശ്രദ്ധിക്കുക)

p.first {
ടെക്സ്റ്റ്-ഇൻഡന്റ്: 5 എമ;
}

ഇപ്പോൾ ഈ ഖണ്ഡിക 5 പ്രതീകങ്ങൾ ഇൻഡസ്ട്റി ചെയ്യപ്പെടും.

ഒരു മൂലകത്തിന്റെ മുകളിൽ, ഇടതുഭാഗത്ത്, ഇടത്തേയ്ക്കോ വലത്തേക്കോ (അല്ലെങ്കിൽ ആ വശങ്ങളിലെ കോമ്പിനേഷനുകൾ) സ്പേസിംഗ് ചേർക്കുന്നതിന് നിങ്ങൾക്ക് CSS- ൽ മാർജിൻ അല്ലെങ്കിൽ പാഡിംഗ് പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കാനും കഴിയും. ആത്യന്തികമായി, നിങ്ങൾ സി.എസ്.എസ് തിരിയുന്നതുകൊണ്ട് എന്തെങ്കിലും തരത്തിലുള്ള സ്പെയ്സിംഗ് നേടാൻ കഴിയും.

CSS ഉപയോഗിക്കാതെ ഒരു സ്പെയ്സിൽ കൂടുതൽ ടെക്സ്റ്റ് നീക്കുന്നു

മുൻഗണനയിൽ നിന്ന് ഒന്നിലധികം ഇടങ്ങൾ നിങ്ങളുടെ വാചകത്തിലേക്ക് നീക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നെങ്കിൽ, നിങ്ങൾക്ക് ബ്രേക്കിംഗ് സ്പെയ്സ് ഉപയോഗിക്കാവുന്നതാണ്.

ബ്രേക്കിംഗ് സ്പെയ്സ് ഉപയോഗിക്കാൻ, നിങ്ങൾ & nbsp; നിങ്ങളുടെ HTML മാർക്കപ്പിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളത്ര തവണയും.

ഉദാഹരണത്തിന്, നിങ്ങളുടെ പദത്തെ അഞ്ച് സ്പെയ്സുകൾ നീക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് വാക്കുകൾക്ക് മുമ്പുള്ളവ ചേർക്കാം.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML ഇതിനെ ബഹുമാനിക്കുന്നു, അവ ഒരൊറ്റ സ്പേസിലേക്ക് ചുരുങ്ങില്ല. എന്നിരുന്നാലും, ലേഔട്ട് ആവശ്യങ്ങൾ നേടുന്നതിന് മാത്രം ഇത് ഒരു പ്രമാണത്തിൽ അധിക HTML മാർക്ക്അപ്പ് ചേർക്കുന്നതിനാൽ ഇത് വളരെ മോശമായ രീതിയായി കണക്കാക്കപ്പെടുന്നു . ഘടനയും ശൈലിയും വേർതിരിച്ചറിയുന്നതിനായി, ആവശ്യമുള്ള ലേഔട്ട് ഇഫക്റ്റ് നേടുന്നതിനായി നോൺ-ബ്രേക്കിംഗ് സ്പേസുകൾ ചേർക്കുന്നത് ഒഴിവാക്കുക, പകരം CSS മാർജിനുകളും പാഡിംഗും ഉപയോഗിക്കണം.