ഹെഡ് ലൈനുകൾ അലങ്കരിക്കാൻ ഫോണ്ടുകളും ബോർഡറുകളും ഇമേജുകളും ഉപയോഗിക്കുക
മിക്ക വെബ് പേജുകളിലും തലക്കെട്ടുകൾ സാധാരണമാണ്. വാസ്തവത്തിൽ, വാചകങ്ങളേത് വളരെ കുറഞ്ഞത് ഒരു തലക്കെട്ടെങ്കിലും ഉണ്ടായിരിക്കാൻ കഴിയും, അതിനാൽ നിങ്ങൾ വായിക്കുന്നതിന്റെ തലക്കെട്ട് നിങ്ങൾക്ക് അറിയാം. ഈ തലക്കെട്ടുകൾ HTML ശീർഷകം ഘടകങ്ങൾ - h1, h2, h3, h4, h5, and h6 എന്നിവ ഉപയോഗിച്ച് കോഡ് ചെയ്തിട്ടുണ്ട്.
ചില സൈറ്റുകളിൽ, ഈ ഘടകങ്ങൾ ഉപയോഗിക്കാതെ തലക്കെട്ടുകൾ പകർത്തിയിട്ടുണ്ടെന്ന് നിങ്ങൾക്ക് കണ്ടെത്താം. പകരം, പ്രധാന തലക്കെട്ടുകളോ, വർഗ്ഗ ഘടകങ്ങളുള്ള ഡിവിഷനുകളോ ഉപയോഗിച്ച് തലക്കെട്ടുകൾ ഉപയോഗിക്കാം. ഞാൻ പലപ്പോഴും ഈ തെറ്റ് പഠിക്കുന്നത് കാരണം കാരണം ഡിസൈനർ "തലക്കെട്ട് നോക്കി വഴി ഇഷ്ടപ്പെടുന്നില്ല" എന്നതാണ്. സ്വതവേ, ഹെഡ്ഡിങ്സ് ബോൾഡ് ആയി കാണപ്പെടുന്നു, അവ വലിപ്പം വലുതായി കാണപ്പെടുന്നു, പ്രത്യേകിച്ച് H1, H2 ഘടകങ്ങൾ ഒരു പേജിന്റെ ടെക്സ്റ്റിനേക്കാൾ വലിയ അക്ഷര വലുപ്പത്തിൽ കാണിക്കുന്നു. ഇത് ഈ ഘടകങ്ങളുടെ സ്ഥിരസ്ഥിതി കാഴ്ചയെ മാത്രം ഓർക്കുക! CSS ഉപയോഗിച്ച്, നിങ്ങൾക്കാവശ്യമുള്ളത്ര ദൃശ്യമാക്കാൻ കഴിയും! നിങ്ങൾക്ക് ഫോണ്ട് സൈസ് മാറ്റാനും ബോൾഡ് നീക്കംചെയ്യാനും അങ്ങനെ ചെയ്യാനും കഴിയും. ഒരു പേജിന്റെ തലക്കെട്ടുകളുടെ കോഡ് നൽകാനുള്ള ശരിയായ മാർഗമാണ് ഹെഡ്ഡിംഗ്. എന്തുകൊണ്ടാണ് ചില കാരണങ്ങൾ.
എന്തിനാണ് ഹെഡിംഗ് ടാഗുകൾ ഉപയോഗിക്കുന്നത് ഡിവിഎസും സ്റ്റൈലിംഗും മാത്രം
തലക്കെട്ട് ടാഗുകൾ പോലെ തിരയൽ എഞ്ചിനുകളും
ശീർഷകങ്ങൾ ഉപയോഗിക്കേണ്ടതും ശരിയായ ക്രമത്തിൽ അവ ഉപയോഗിക്കുക (അതായത് h1, അതിനുശേഷം H2, തുടർന്ന് h3, മുതലായവ) ഉപയോഗിക്കാനുള്ള മികച്ച കാരണം. തലക്കെട്ട് ടാഗുകൾക്കുള്ളിൽ ഉൾപ്പെടുന്ന ടെക്സ്റ്റിലേക്ക് ഏറ്റവും കൂടുതൽ തിരഞ്ഞത് സെർച്ച് എഞ്ചിനുകളാണ്, കാരണം ആ ടെക്സ്റ്റിന് ഒരു സെമാന്റിക് മൂല്യം ഉണ്ട്. മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, നിങ്ങളുടെ പേജ് ശീർഷകമുള്ള H1 ലേബൽ ചെയ്യുന്നതിലൂടെ, നിങ്ങൾ സെർച്ച് എഞ്ചിൻ ചിലന്തിയോട് പറഞ്ഞാൽ അത് പേജിന്റെ # ഫോക്കസ് ആയിരിക്കണം. H2 ശീർഷകങ്ങൾക്ക് # 2 പ്രാധാന്യം ഉണ്ട്.
നിങ്ങളുടെ ഹെഡ് ലൈനുകൾ നിർവ്വചിക്കാൻ നിങ്ങൾ ഉപയോഗിക്കുന്ന ക്ലാസ്സുകളെ ഓർത്തുവയ്ക്കരുത്
നിങ്ങളുടെ എല്ലാ വെബ് പേജുകളും ബോൾഡ്, 2 എ, മഞ്ഞ എന്നീ നിറങ്ങളുള്ള ഒരു H1 ഉണ്ടെന്ന് നിങ്ങൾക്കറിയുമ്പോൾ, നിങ്ങളുടെ ശൈലിയിൽ ഒരിക്കൽ അത് നിർവ്വചിക്കുകയും പൂർത്തിയാക്കുകയും ചെയ്യാം. 6 മാസങ്ങൾക്ക് ശേഷം, നിങ്ങൾ മറ്റൊരു പേജ് ചേർക്കുമ്പോൾ, നിങ്ങളുടെ പേജിന്റെ മുകളിലേക്ക് ഒരു H1 ടാഗ് ചേർത്താൽ, പ്രധാന നിർവചിക്കാൻ നിങ്ങൾ ഉപയോഗിച്ചിരിക്കുന്ന സ്റ്റൈൽ ID അല്ലെങ്കിൽ ക്ലാസ് കണ്ടെത്താൻ മറ്റ് പേജുകളിലേക്ക് മടങ്ങി പോകേണ്ടതില്ല. തലക്കെട്ടും ഉപ-തലകളും.
അവർ ശക്തമായ ഒരു പേജിന്റെ രൂപരേഖ നൽകുന്നു
വായിക്കാൻ ടെക്സ്റ്റുകൾ എളുപ്പമാക്കുന്നു. അതിനാലാണ് മിക്കവാറും മിക്ക യുഎസ് സ്കൂളുകളും വിദ്യാർത്ഥികൾക്ക് പേപ്പർ എഴുതുന്നതിനു മുൻപേ ഒരു ഔട്ട്ലൈൻ എഴുതാൻ പഠിപ്പിച്ചത്. നിങ്ങൾ ഒരു ഔട്ട് ലൈൻ ഫോർമാറ്റിലേക്ക് ടാഗുകൾ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങളുടെ ടെക്സ്റ്റിന് വ്യക്തമായ ഒരു ഘടനയുണ്ട്, അത് വളരെ വേഗത്തിൽ ദൃശ്യമാവുന്നു. കൂടാതെ, ഒരു സമന്വയം നൽകാൻ പേജ് ഔട്ട്ലൈൻ അവലോകനം ചെയ്യാൻ കഴിയുന്ന ഉപകരണങ്ങൾ ഉണ്ട്, അവ ഔട്ട് ലൈൻ ഘടനയ്ക്കായുള്ള ടാഗുകൾക്കുള്ള തലക്കെട്ടും.
ശൈലികൾ ഓഫുചെയ്താലും നിങ്ങളുടെ പേജ് സെൻസ് ചെയ്യും
എല്ലാവരെയും സ്റ്റൈൽ ഷീറ്റുകൾ കാണാനോ ഉപയോഗിക്കാനോ കഴിയില്ല (ഇത് # 1 ആണ് - തിരയൽ എഞ്ചിനുകൾ നിങ്ങളുടെ പേജിന്റെ ഉള്ളടക്കം (ടെക്സ്റ്റ്) കാണുന്നു, സ്റ്റൈൽ ഷീറ്റുകൾ അല്ല). നിങ്ങൾ ശീർഷക ടാഗുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ പേജുകൾ കൂടുതൽ ആക്സസ് ചെയ്യാൻ കഴിയുന്നതാണ്, കാരണം ഒരു DIV ടാഗ് ചെയ്യാത്ത വിവരങ്ങൾ തലക്കെട്ട് നൽകുന്നതാണ്.
സ്ക്രീൻ വായനക്കാർക്കും വെബ്സൈറ്റ് പ്രവേശനക്ഷമതക്കും ഇത് സഹായകരമാണ്
തലക്കെട്ടുകളുടെ ശരിയായ ഉപയോഗം ഒരു പ്രമാണത്തിൽ ഒരു ലോജിക്കൽ ഘടന സൃഷ്ടിക്കുന്നു. കാഴ്ചാവൈകലുള്ള ഒരു ഉപയോക്താവിന് സൈറ്റ് വായിക്കാനായി സ്ക്രീൻ വായനക്കാർ ഉപയോഗിക്കും, ഇത് വൈകല്യമുള്ളവരെ നിങ്ങളുടെ സൈറ്റിൽ എത്തിക്കാനും സഹായിക്കും.
നിങ്ങളുടെ തലക്കെട്ടുകളുടെ വാചകവും ഫോണ്ടും സ്റ്റൈൽ ചെയ്യുക
ടാഗുകൾ ശീർഷകത്തിന്റെ "വലിയ, ധീരവും, വൃത്തികെട്ടതുമായ" പ്രശ്നങ്ങളിൽ നിന്ന് നീങ്ങാൻ എളുപ്പമുള്ള മാർഗം, അവർ നിങ്ങൾക്ക് കാണാൻ ആഗ്രഹിക്കുന്ന രീതിയിൽ ടെക്സ്റ്റ് രൂപപ്പെടുത്തുക എന്നതാണ്. സത്യത്തിൽ, ഞാൻ ഒരു പുതിയ വെബ്സൈറ്റിൽ പ്രവർത്തിക്കുമ്പോൾ, ഞാൻ സാധാരണയായി ഖണ്ഡിക, എച്ച് 1, എച്ച് 2, എച്ച് 3 ശൈലികൾ എഴുതുന്നു. ഞാൻ സാധാരണയായി ഫോണ്ട് കുടുംബവും വലുപ്പവും ഭാരം കുറച്ചും ചേർന്നു നിൽക്കുന്നു. ഉദാഹരണത്തിന്, ഇത് ഒരു പുതിയ സൈറ്റിനായുള്ള ഒരു പ്രാഥമിക ശൈലി ആയിരിക്കാം (ഇത് ഉപയോഗിക്കാവുന്ന ചില ഉദാഹരണ ശൈലികൾ):
body, html {margin: 0; പാഡിംഗ്: 0; } p {font: 1em ഏരിയൽ, ജനീവ, ഹെൽവെറ്റിക്ക, സാൻസ് സെരിഫ്; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "ടൈംസ് ന്യൂ റോമൻ", ടൈംസ്, സെരിഫ്; } h3 {font: bold 1.2em ഏരിയൽ, ജനീവ, ഹെൽവെറ്റിക്ക, സാൻസ് സെരിഫ്; }നിങ്ങളുടെ ഹെഡ്ലൈന്റെ ഫോണ്ടുകൾ നിങ്ങൾക്ക് പരിഷ്കരിക്കാം അല്ലെങ്കിൽ ടെക്സ്റ്റിന്റെ ശൈലി അല്ലെങ്കിൽ ടെക്സ്റ്റ് വർണം മാറ്റുകയോ ചെയ്യാം. ഇവയെല്ലാം നിങ്ങളുടെ "വൃത്തികെട്ട" തലക്കെട്ട് കൂടുതൽ ഊർജ്ജമാക്കി മാറ്റുകയും നിങ്ങളുടെ രൂപകൽപ്പന നിലനിർത്തുകയും ചെയ്യും.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; മാർജിൻ: 0; പാഡിംഗ്: 0; നിറം: # e7ce00; }ബോർഡറുകൾ വാർത്തകൾക്കായി തിരയുക
നിങ്ങളുടെ തലക്കെട്ടുകൾ മെച്ചപ്പെടുത്തുന്നതിനുള്ള മികച്ച മാർഗമാണ് ബോർഡറുകൾ. കൂടാതെ ബോർഡറുകളും ചേർക്കാൻ എളുപ്പമാണ്. എന്നാൽ അതിർത്തികളുമായി പരീക്ഷിക്കാൻ മറക്കരുത് - നിങ്ങളുടെ തലക്കെട്ടിലെ ഓരോ വശത്തും നിങ്ങൾക്ക് ഒരു അതിർത്തി ആവശ്യമില്ല. ലളിതമായ ബോററിംഗ് ബോർഡറുകളേക്കാൾ കൂടുതൽ ഉപയോഗിക്കാം.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", Serif; മാർജിൻ: 0; പാഡിംഗ്: 0; നിറം: # e7ce00; ബോർഡർ-ടോപ്പ്: സോളിഡ് # e7ce00 മീഡിയം; ബോർഡർ-അടിയിൽ: രേഖപ്പെടുത്തിയ # e7ce00 നേർത്തതാണ്; വീതി: 600px; }ചില രസകരമായ ദൃശ്യ ശൈലികൾ അവതരിപ്പിക്കാൻ എന്റെ സാമ്പിൾ ഹെഡ്ലൈന് മുകളിലത്തെ ഒരു ചുവടെയുള്ള ബോർഡർ ചേർത്തു. നിങ്ങൾക്ക് ആവശ്യമുള്ള ഡിസൈൻ ശൈലി നേടാൻ നിങ്ങൾ ആഗ്രഹിച്ച ഏതെങ്കിലും വിധത്തിൽ അതിരുകൾ ചേർക്കാൻ കഴിയും.
കൂടുതൽ പിസാസുകൾക്കായി നിങ്ങളുടെ പ്രധാനവാർത്തകളിലേക്ക് പശ്ചാത്തല ഇമേജുകൾ ചേർക്കുക
തലക്കെട്ട്, ഒരു ശീർഷകം, ഒരു ഗ്രാഫിക് എന്നിവ ഉൾപ്പെടുന്ന പേജിന്റെ മുകളിലായി പല വെബ് സൈറ്റുകൾക്ക് ഹെഡ്ഡർ വിഭാഗമുണ്ട്. മിക്ക ഡിസൈനർമാർക്കും ഇത് രണ്ട് വ്യത്യസ്ത ഘടകങ്ങളായി കണക്കാക്കാം, എന്നാൽ നിങ്ങൾ ചെയ്യേണ്ടതില്ല. ശീർഷകം തലക്കെട്ട് അലങ്കരിക്കാൻ മാത്രം ഉണ്ടെങ്കിൽ, അതിനെ തലക്കെട്ട് ശൈലികളിലേക്ക് ചേർക്കാതിരിക്കുന്നത് എന്തുകൊണ്ട്?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", Serif; പശ്ചാത്തലം: # ff url ("fancyheadline.jpg") ആവർത്തിക്കുക- x താഴെ; പാഡിംഗ്: 0.5 0 0 90px 0; ടെക്സ്റ്റ് അലൈൻ: കേന്ദ്രം; മാർജിൻ: 0; ബോർഡർ-അടിയിൽ: സോളിഡ് # e7ce00 0.25; നിറം: # e7ce00; }എന്റെ ചിത്രം 90 പിക്സലുകൾ ഉയരമാണെന്ന് എനിക്കറിയാം എന്നതാണ് ഈ തലക്കെട്ടിലേയ്ക്ക് പറഞ്ഞതെങ്കിൽ. ഞാൻ 90px (പാഡിംഗ്: 0.5 0 90px 0p;) എന്ന തലക്കെട്ടിലേയ്ക്ക് പാഡിംഗ് ചേർക്കുകയും ചെയ്തു. നിങ്ങൾക്ക് ആവശ്യമുള്ളയിടത്ത് എവിടെയെങ്കിലും പ്രദർശിപ്പിക്കാൻ ഹെഡ്ലൈൻ ടെക്സ്റ്റ് സ്വീകരിക്കുന്നതിന് മാർജിനുകൾ, ലൈൻ-ഉയരം, പാഡിംഗ് എന്നിവ ഉപയോഗിച്ച് നിങ്ങൾക്ക് പ്ലേ ചെയ്യാം.
ഇമേജുകൾ ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ ഓർത്തുവയ്ക്കേണ്ട ഒരു കാര്യം, നിങ്ങൾക്ക് സ്ക്രീൻ പ്രതിരൂപങ്ങളും ഉപകരണങ്ങളും അടിസ്ഥാനമാക്കി മാറ്റുന്ന ഒരു ലേഔട്ട് ഉള്ള ഒരു പ്രതികരിച്ച വെബ്സൈറ്റ് ഉണ്ടെങ്കിൽ, നിങ്ങൾ എല്ലായ്പ്പോഴും ഒരേ വലുപ്പമാകില്ല എന്നതാണ്. നിങ്ങളുടെ ശീർഷകം ഒരു കൃത്യമായ വലിപ്പം ആണെങ്കിൽ, ഇത് പ്രശ്നങ്ങൾ ഉണ്ടാക്കാം. ഞാൻ പൊതുവേ ഒരു തലക്കെട്ടിലെ പശ്ചാത്തല ഇമേജുകൾ ഒഴിവാക്കുന്നതിനുള്ള കാരണങ്ങൾ, പലപ്പോഴും അവർ കാണുന്നത് പോലെ തണുത്തതാണ്.
ഹെഡ്ലൈനുകളിലെ ഇമേജ് റീപ്ലേസ്മെന്റ്
വെബ് ഡിസൈനർമാർക്കുള്ള മറ്റൊരു പ്രശസ്തമായ ടെക്നിക് ആണ് ഇത്, കാരണം ഒരു ഗ്രാഫിക്കൽ ഹെഡ്ലൈൻ സൃഷ്ടിക്കാനും ആ ഇമേജിനുള്ള തലക്കെട്ട് ടാഗ് ടെക്സ്റ്റിന് പകരം വയ്ക്കാനും ഇത് നിങ്ങളെ സഹായിക്കുന്നു. ഇത് ശരിക്കും വെബ് ഡിസൈനർമാരിൽ നിന്നുള്ള ആൻറിക്ടുചെയ്ത സമ്പ്രദായം വളരെ കുറച്ച് ഫോണ്ടുകൾക്ക് ആക്സസ് ചെയ്യപ്പെട്ടിരുന്നതിനാൽ അവരുടെ പ്രവൃത്തിയിൽ കൂടുതൽ ആകർഷണീയമായ ഫോണ്ടുകൾ ഉപയോഗിക്കാൻ അവർ ആഗ്രഹിച്ചിരുന്നു. വെബ് ഫോണ്ടുകളുടെ വളർച്ച യഥാർഥത്തിൽ രൂപകൽപന ചെയ്യുന്ന സൈറ്റുകൾ എങ്ങനെ സമീപിക്കുന്നു എന്നതിനെ മാറ്റിയിരിക്കുന്നു. ഹെഡ് ലൈനുകൾ വൈവിധ്യമാർന്ന ഫോണ്ടുകളിലും സെറ്റ് ചെയ്തിരിക്കുന്ന ഫോണ്ടുകളുടെ ചിത്രങ്ങളിലും ഇപ്പോൾ ആവശ്യമില്ല. അതുപോലെ, പഴയ സൈറ്റുകളിലെ തലക്കെട്ടുകൾക്ക് മാത്രമേ CSS ഇമേജുകൾ മാറ്റിസ്ഥാപിക്കാനാകൂ, കൂടുതൽ ആധുനിക രീതികളിലേക്ക് ഇനിയും അപ്ഡേറ്റ് ചെയ്തിട്ടില്ല.
ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 9/6/17 ന്