HTML ടാഗുകളാണ് HTML ഭാഷയുടെ അടിസ്ഥാനം. മാർക്ക്അപ്പിലെ മൂലകങ്ങളുടെ തുടക്കവും അവസാനവും ഡിലിമിറ്റ് ചെയ്യാൻ ടാഗുകൾ ഉപയോഗിക്കുന്നു.
ഓരോ HTML ഡോക്യുമെന്റിലും HTML ഘടകങ്ങളുടെയും വാചകത്തിന്റെയും ഒരു വൃക്ഷം അടങ്ങിയിരിക്കുന്നു. ഓരോ HTML എലമെന്റും സ്റ്റാർട്ട് (തുറക്കൽ), അവസാനിക്കുന്ന (ക്ലോസിംഗ്) ടാഗ് ഉപയോഗിച്ചാണ് തിരിച്ചറിയുന്നത്. ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകളിൽ ടാഗിന്റെ പേര് അടങ്ങിയിരിക്കുന്നു.
എല്ലാ HTML ഘടകങ്ങളും അഞ്ച് തരങ്ങളായി തിരിച്ചിരിക്കുന്നു:
- ശൂന്യമായ ഘടകങ്ങൾ -,,
, , , ,, ,
പേജിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ സംഭരിക്കുന്നതിന് ഉപയോഗിക്കുന്നു. ഈ വിവരങ്ങൾ പേജ് പ്രോസസ്സ് ചെയ്യുന്നതിനും സെർച്ച് എഞ്ചിനുകൾ സൂചികയിലാക്കുന്നതിനും ബ്രൗസറുകൾ ഉപയോഗിക്കുന്നു. ഒരു ബ്ലോക്കിൽ നിരവധി ടാഗുകൾ ഉണ്ടാകാം, കാരണം ഉപയോഗിച്ച ആട്രിബ്യൂട്ടുകളെ ആശ്രയിച്ച് അവ വ്യത്യസ്ത വിവരങ്ങൾ വഹിക്കുന്നു. തന്നിരിക്കുന്ന ശ്രേണിയിലെ അളവെടുപ്പിന്റെ സൂചകം. സൈറ്റിനായുള്ള നാവിഗേഷൻ ലിങ്കുകൾ അടങ്ങുന്ന ഡോക്യുമെന്റിന്റെ ഒരു വിഭാഗം. സ്ക്രിപ്റ്റിംഗിനെ പിന്തുണയ്ക്കാത്ത ഒരു വിഭാഗം നിർവചിക്കുന്നു. മൾട്ടിമീഡിയ ഉൾച്ചേർക്കുന്നതിനുള്ള കണ്ടെയ്നർ (ഉദാ. ഓഡിയോ, വീഡിയോ, ജാവ ആപ്ലെറ്റുകൾ, ActiveX, PDF, Flash). നിലവിലെ HTML ഡോക്യുമെന്റിലേക്ക് നിങ്ങൾക്ക് മറ്റൊരു വെബ് പേജ് ചേർക്കാനും കഴിയും. പ്ലഗിന്റെ പാരാമീറ്ററുകൾ കൈമാറാൻ ടാഗ് ഉപയോഗിക്കുന്നു. അക്കമിട്ട ലിസ്റ്റ് ഓർഡർ ചെയ്തു. സംഖ്യാക്രമം സംഖ്യാക്രമത്തിലോ അക്ഷരമാലാക്രമത്തിലോ ആകാം. ഒരു കൂട്ടം ഘടകങ്ങളുടെ തലക്കെട്ടുള്ള ഒരു കണ്ടെയ്നർ. , അല്ലെങ്കിൽ , ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ നിന്ന് തിരഞ്ഞെടുക്കാനുള്ള ഒരു ഓപ്ഷൻ/ഓപ്ഷൻ വ്യക്തമാക്കുന്നു. സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കണക്കാക്കിയ ഒരു കണക്കുകൂട്ടലിന്റെ ഫലം പ്രദർശിപ്പിക്കുന്നതിനുള്ള ഫീൽഡ്. വാചകത്തിലെ ഖണ്ഡികകൾ. ഘടകം ഉപയോഗിച്ച് ഉൾച്ചേർത്ത പ്ലഗിനുകൾക്കുള്ള പാരാമീറ്ററുകൾ നിർവചിക്കുന്നു. ഒരു ഘടകം അടങ്ങിയ ഒരു കണ്ടെയ്നർ ഘടകം പൂജ്യമോ അതിലധികമോ മൂലകങ്ങളും. സ്വയം അത് ഒന്നും പ്രദർശിപ്പിക്കുന്നില്ല. ഏറ്റവും അനുയോജ്യമായ ചിത്രം തിരഞ്ഞെടുക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു.
ഫോർമാറ്റിംഗ് കൂടാതെ സ്‌പെയ്‌സുകളും ടെക്സ്റ്റ് ബ്രേക്കുകളും സംരക്ഷിക്കാതെ ടെക്സ്റ്റ് ഔട്ട്‌പുട്ട് ചെയ്യുന്നു. കമ്പ്യൂട്ടർ കോഡ്, ഇമെയിൽ സന്ദേശങ്ങൾ മുതലായവ പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കാം. ഏതെങ്കിലും തരത്തിലുള്ള ഒരു ജോലിയുടെ പൂർത്തീകരണത്തിന്റെ സൂചകം. ഒരു ചെറിയ ഉദ്ധരണി നിർവ്വചിക്കുന്നു. കിഴക്കൻ ഏഷ്യൻ ചിഹ്നങ്ങൾക്കും അവയുടെ ഡീകോഡിംഗിനുമുള്ള കണ്ടെയ്നർ. വ്യാഖ്യാനത്തിന്റെ അടിസ്ഥാന ഘടകമായി അതിന്റെ നെസ്റ്റഡ് ടെക്സ്റ്റ് നിർവചിക്കുന്നു. ഒരു ചെറിയ ഫോണ്ടിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഘടകത്തിൽ അടങ്ങിയിരിക്കുന്ന പ്രതീകങ്ങൾക്ക് മുകളിലോ താഴെയോ ഒരു ഹ്രസ്വ വിവരണം ചേർക്കുന്നു. ഉൾച്ചേർത്ത വാചകം അധിക വ്യാഖ്യാനമായി അടയാളപ്പെടുത്തുന്നു. ബ്രൗസർ ഘടകത്തെ പിന്തുണയ്ക്കുന്നില്ലെങ്കിൽ ഇതര വാചകം പ്രദർശിപ്പിക്കുന്നു. സ്ട്രൈക്ക്ത്രൂ ഉപയോഗിച്ച് നിലവിലുള്ള വാചകം പ്രദർശിപ്പിക്കുന്നു. പ്രോഗ്രാം കോഡിന്റെയോ സ്ക്രിപ്റ്റ് എക്സിക്യൂഷന്റെയോ സിസ്റ്റം സന്ദേശങ്ങളുടെയും ഫലത്തെ പ്രതിനിധീകരിക്കുന്ന വാചകം പ്രദർശിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. മോണോസ്പേസ് ഫോണ്ടിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്നു. ഒരു ക്ലയന്റ്-സൈഡ് സ്ക്രിപ്റ്റ് നിർവചിക്കാൻ ഉപയോഗിക്കുന്നു (സാധാരണയായി ജാവാസ്ക്രിപ്റ്റ്). ഒന്നുകിൽ സ്ക്രിപ്റ്റ് ടെക്‌സ്‌റ്റോ അല്ലെങ്കിൽ src ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒരു ബാഹ്യ സ്ക്രിപ്റ്റ് ഫയലിലേക്കുള്ള പോയിന്റുകളോ അടങ്ങിയിരിക്കുന്നു. ഒരു പേജിന്റെ ലോജിക്കൽ ഏരിയ (വിഭാഗം) നിർവചിക്കുന്നു, സാധാരണയായി ഒരു തലക്കെട്ട്. ഒരു നിർദ്ദിഷ്ട സെറ്റിൽ നിന്ന് മൂല്യങ്ങൾ തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു നിയന്ത്രണ ഘടകം. വേരിയന്റ് മൂല്യങ്ങൾ സ്ഥാപിച്ചിരിക്കുന്നു. ഒരു ചെറിയ ഫോണ്ട് വലുപ്പത്തിൽ വാചകം പ്രദർശിപ്പിക്കുന്നു. , , എന്നതിനായുള്ള ഇതര മീഡിയ ഉറവിടങ്ങളുടെ സ്ഥാനവും തരവും വ്യക്തമാക്കുന്നു. ഇൻലൈൻ ഘടകങ്ങൾക്കുള്ള കണ്ടെയ്നർ. വ്യക്തിഗത പദങ്ങൾ ഹൈലൈറ്റ് ചെയ്യുന്നത് പോലെയുള്ള പാഠഭാഗങ്ങൾ ഫോർമാറ്റ് ചെയ്യാൻ ഉപയോഗിക്കാം. വാചകത്തിൽ ഊന്നൽ നൽകുന്നു, അത് ബോൾഡിൽ ഹൈലൈറ്റ് ചെയ്യുന്നു. ഉൾച്ചേർക്കാവുന്ന സ്റ്റൈൽ ഷീറ്റുകൾ ഉൾപ്പെടുന്നു. ചിഹ്നങ്ങളുടെ സബ്സ്ക്രിപ്റ്റ് എഴുത്ത് വ്യക്തമാക്കുന്നു, ഉദാഹരണത്തിന്, രാസ സൂത്രവാക്യങ്ങളിലെ മൂലക സൂചിക. ടാഗിനായി ദൃശ്യമായ ഒരു ശീർഷകം സൃഷ്ടിക്കുന്നു. ഒരു പൂരിപ്പിച്ച ത്രികോണം പ്രദർശിപ്പിക്കുന്നു, അതിൽ ക്ലിക്കുചെയ്യുന്നത് ശീർഷക വിശദാംശങ്ങൾ കാണാൻ നിങ്ങളെ അനുവദിക്കുന്നു. പ്രതീകങ്ങളുടെ സൂപ്പർസ്ക്രിപ്റ്റ് സ്പെല്ലിംഗ് വ്യക്തമാക്കുന്നു. ഒരു പട്ടിക സൃഷ്ടിക്കുന്നതിന് ടാഗ് ചെയ്യുക. മേശയുടെ ശരീരം നിർവചിക്കുന്നു. ഒരു ടേബിൾ സെൽ സൃഷ്ടിക്കുന്നു. ഒരു സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഒരു ഡോക്യുമെന്റിൽ ക്ലോൺ ചെയ്യാനും ചേർക്കാനും കഴിയുന്ന HTML കോഡ് ശകലങ്ങൾ പ്രഖ്യാപിക്കാൻ ഉപയോഗിക്കുന്നു. ഒരു ടാഗിന്റെ ഉള്ളടക്കം അതിന്റെ കുട്ടിയല്ല. വലിയ ടെക്സ്റ്റ് ഇൻപുട്ട് ഫീൽഡുകൾ സൃഷ്ടിക്കുന്നു. പട്ടിക അടിക്കുറിപ്പ് നിർവചിക്കുന്നു. ഒരു പട്ടിക സെൽ ശീർഷകം സൃഷ്ടിക്കുന്നു. പട്ടികയുടെ തലക്കെട്ട് നിർവചിക്കുന്നു. തീയതി/സമയം നിർവചിക്കുന്നു. ബ്രൗസറിന്റെ ടൈറ്റിൽ ബാറിന്റെ മുകളിൽ ദൃശ്യമാകുന്ന ഒരു HTML പ്രമാണത്തിന്റെ ശീർഷകം. തിരയൽ ഫലങ്ങളിലും ദൃശ്യമാകാം, അതിനാൽ ഒരു ശീർഷകം നൽകുമ്പോൾ ഇത് കണക്കിലെടുക്കണം. ഒരു പട്ടിക നിര സൃഷ്ടിക്കുന്നു. ഘടകങ്ങൾക്കും . അധിക ഊന്നൽ നൽകാതെ, അടിവരയിട്ട് ടെക്‌സ്‌റ്റിന്റെ ഒരു ഭാഗം ഹൈലൈറ്റ് ചെയ്യുന്നു. ഒരു ബുള്ളറ്റ് ലിസ്റ്റ് സൃഷ്ടിക്കുന്നു. പ്രോഗ്രാമുകളിൽ നിന്നുള്ള വേരിയബിളുകൾ ഇറ്റാലിക്സിൽ പ്രദർശിപ്പിക്കുന്നതിലൂടെ ഹൈലൈറ്റ് ചെയ്യുന്നു. പേജിലേക്ക് വീഡിയോ ഫയലുകൾ ചേർക്കുന്നു. 3 വീഡിയോ ഫോർമാറ്റുകൾ പിന്തുണയ്ക്കുന്നു: MP4, WebM, Ogg. ഒരു നീണ്ട ലൈൻ പൊട്ടിയേക്കാവുന്ന ബ്രൗസറിനെ സൂചിപ്പിക്കുന്നു. HTML ഭാഷ ഒരു ടാഗ് എന്ന ആശയത്തെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. ടാഗ്- ടാഗ്, ലേബൽ). ആംഗിൾ ബ്രാക്കറ്റുകളിൽ ടാഗുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട് (< >) കൂടാതെ ഫോം ജോഡികൾ - കണ്ടെയ്നറുകൾ (ഓപ്പണിംഗ് ടാഗും ക്ലോസിംഗ് ടാഗും). ഉദാഹരണത്തിന്, ഒരു HTML പ്രമാണത്തിന്റെ കണ്ടെയ്നർ ഒരു ജോടി ടാഗുകളും . വെബ് പേജിൽ ഡോക്യുമെന്റ് ശീർഷകത്തിന് (തല) ഉത്തരവാദിത്തമുള്ള കണ്ടെയ്നറുകൾ ഉൾപ്പെടുന്നു, കൂടാതെ അധിക വിവരങ്ങൾ അടങ്ങിയിരിക്കുന്നു, കൂടാതെ ഡോക്യുമെന്റ് ഉള്ളടക്കത്തിന് തന്നെ (ബോഡി) ഉത്തരവാദിയായ കണ്ടെയ്‌നറുകളും ഉൾപ്പെടുന്നു. അവ ചിത്രത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്നു.
അതിനാൽ HTML പ്രമാണം ഒരു കണ്ടെയ്നറിൽ അടങ്ങിയിരിക്കുന്നു, തലക്കെട്ട് ഒരു കണ്ടെയ്നറിൽ അടങ്ങിയിരിക്കുന്നു, പ്രമാണത്തിന്റെ ഉള്ളടക്കം ഒരു കണ്ടെയ്നറിൽ അടങ്ങിയിരിക്കുന്നു. ഹെഡറിൽ (കണ്ടെയ്നർ) സ്ഥിതി ചെയ്യുന്ന കണ്ടെയ്നറിൽ ബ്രൗസർ വിൻഡോയുടെ മുകളിലെ വരിയിൽ ദൃശ്യമാകുന്ന വാചകം അടങ്ങിയിരിക്കുന്നു. എൻകോഡിംഗ്, വെബ് പേജ് കീവേഡുകൾ, കൂടാതെ CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് ഫയലുകൾ, ജാവാസ്ക്രിപ്റ്റ്, VBScript മുതലായവ ബന്ധിപ്പിക്കുന്നതിനുള്ള കോഡും അടങ്ങിയ ടാഗുകളും ഹെഡർ കണ്ടെയ്‌നറിലേക്ക് ചേർക്കാവുന്നതാണ്.
അടിസ്ഥാന ടാഗുകൾ മാത്രം ഉൾക്കൊള്ളുന്ന ഒരു ലളിതമായ HTML പേജിന്റെ ഉദാഹരണം:
പേജ് ശീർഷകം ഒരു ലളിതമായ പേജിന്റെ ഉള്ളടക്കം
ഈ കോഡിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു.
ഉദാഹരണത്തിൽ നിന്ന് നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, "ഒരു ലളിതമായ പേജിന്റെ ഉള്ളടക്കം" എന്ന വാചകം സാധാരണ വാചകത്തിൽ പ്രദർശിപ്പിക്കും. ഈ വാചകം ഫോർമാറ്റ് ചെയ്യുന്നതിന്, നിങ്ങൾ പ്രത്യേക ടാഗുകൾ ഉപയോഗിക്കണം. ഫോർമാറ്റിംഗ് ടാഗുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു.
ഫോണ്ട്, അതിന്റെ നിറവും വലുപ്പവും മാറ്റാൻ, "മുഖം", "നിറം", "വലുപ്പം" എന്നീ പാരാമീറ്ററുകളുള്ള ഒരു ടാഗ് ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, "ഏരിയൽ" എന്ന ഫോണ്ട് ചുവപ്പ് നിറത്തിലും വലുപ്പം 14 ലും സജ്ജീകരിക്കുന്നതിന്, നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് എഴുതേണ്ടതുണ്ട്:
ടെക്സ്റ്റ് ഫോർമാറ്റ് ചെയ്യുക
വാചകത്തിലെ ഒരു ഖണ്ഡിക ഹൈലൈറ്റ് ചെയ്യാൻ, ഒരു ടാഗ് ഉപയോഗിക്കുക
വാചകത്തിന്റെ ഓരോ ഖണ്ഡികയും സാധാരണയായി ഒരു കണ്ടെയ്നറിൽ സ്ഥാപിക്കുന്നു. ഒരു ശീർഷകം സൃഷ്ടിക്കുന്നതിന്, ടാഗുകൾ , , , , ഉപയോഗിക്കുന്നു.
കണ്ടെയ്നറുകൾ , കൂടാതെ ഡോക്യുമെന്റിന്റെ ബോഡിയിൽ ലിസ്റ്റുകൾ രൂപപ്പെടുത്താൻ ഉപയോഗിക്കുന്നു. മാത്രമല്ല, ടാഗ് ഒരു അക്കമിട്ട ലിസ്റ്റ് രൂപപ്പെടുത്തുന്നു, ടാഗ്
- - ബുള്ളറ്റുചെയ്‌ത പട്ടികയും ടാഗുകളിലും
- ലിസ്റ്റ് ഘടകങ്ങൾ സ്ഥാപിച്ചിരിക്കുന്നു. ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള കോഡിന്റെ ഒരു ഉദാഹരണം, അക്കമിട്ടതും ബുള്ളറ്റുള്ളതുമായ ലിസ്റ്റുകളുടെ രൂപത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്നത് ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു.
രണ്ടോ അതിലധികമോ വെബ് പേജുകൾ പരസ്പരം ബന്ധിപ്പിക്കുന്നതിന്, ഹൈപ്പർലിങ്കുകൾ ഉപയോഗിക്കുന്നു, അതിന്റെ സൃഷ്ടി ടാഗ് ഉപയോഗിക്കുന്നു . കൂടാതെ, ഹൈപ്പർലിങ്ക് ടാഗുകൾ അധിക ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു, അത് ഒന്നുകിൽ മറ്റൊരു വെബ് പേജിലേക്ക് പോകാനോ അല്ലെങ്കിൽ തന്നിരിക്കുന്ന പേജിനുള്ളിൽ നീങ്ങാനോ നിങ്ങളെ അനുവദിക്കുന്നു. നിരവധി സെമാന്റിക് വിഭാഗങ്ങളുള്ള ഒരു വലിയ പ്രമാണത്തിൽ രണ്ടാമത്തെ രീതി ഉപയോഗിക്കുന്നത് നല്ലതാണ്.
ഹൈപ്പർലിങ്കുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു.
മറ്റൊരു പേജിന്റെ URL വ്യക്തമാക്കുമ്പോൾ, "പൂർണ്ണ പാത/ഫോൾഡർ/പേജ്" എന്ന പേജിലേക്കുള്ള പൂർണ്ണമായ പാത്ത് അല്ലെങ്കിൽ ആപേക്ഷിക പാത (ഈ പേജുമായി ബന്ധപ്പെട്ടത്) "ഫോൾഡർ/പേജ്" എന്നിവ വ്യക്തമാക്കണം. പുതിയതോ നിലവിലുള്ളതോ ആയ ബ്രൗസർ വിൻഡോയിൽ ഒരു വെബ് പേജ് തുറക്കാൻ "ടാർഗെറ്റ്" പാരാമീറ്റർ നിങ്ങളെ അനുവദിക്കുന്നു.
ഒരു വെബ് പേജിലേക്ക് ഒരു ചിത്രം ചേർക്കുന്നതിന്, ടാഗ് ഉപയോഗിക്കുക
പരാമീറ്ററുകൾക്കൊപ്പം src (ചിത്രത്തിലേക്കുള്ള പാത), വീതി (ചിത്രത്തിന്റെ വീതി), ഉയരം (ചിത്രത്തിന്റെ ഉയരം), ബോർഡർ (ചിത്രത്തിന് ചുറ്റുമുള്ള ഫ്രെയിം). ഒരു ചിത്രം ചേർക്കുന്നതിനുള്ള ഉദാഹരണ കോഡ്:
പലപ്പോഴും വെബ് പേജുകൾ സൃഷ്ടിക്കുമ്പോൾ, പശ്ചാത്തല വർണ്ണമോ പശ്ചാത്തല ചിത്രമോ സജ്ജമാക്കേണ്ടത് ആവശ്യമാണ്. ഇത് ചെയ്യുന്നതിന്, "bgcolor" അല്ലെങ്കിൽ "background-image" ടാഗിന്റെ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക. പശ്ചാത്തല നിറം ചേർക്കുന്നതിനുള്ള ഉദാഹരണം:
ഒരു പശ്ചാത്തല ചിത്രം ചേർക്കുന്നതിനുള്ള ഉദാഹരണം:
നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ടുകൾ ടാഗിനായി മാത്രമല്ല, പട്ടിക, ഏരിയ, മറ്റ് ടാഗുകൾ എന്നിവയ്ക്കും ഉപയോഗിക്കാം, അവ ഇനിപ്പറയുന്ന വിഷയങ്ങളിൽ ചർച്ച ചെയ്യും.
മിക്കവാറും എല്ലാ വെബ്‌സൈറ്റുകളും/ബ്ലോഗുകളും നിർമ്മിക്കുന്നതിന്റെ അടിസ്ഥാനമാണ് അടിസ്ഥാന html ടാഗുകൾ. ഈ ലേഖനത്തിൽ നിന്ന് നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും ആവശ്യമുള്ള 20% ടാഗുകൾ നിങ്ങൾ കൃത്യമായി പഠിക്കും.
ഏത് ഭാഷയിലും എന്നപോലെ, ഇവിടെയും, 20/80 എന്ന പാരെറ്റോ നിയമം ബാധകമാണ് (ആഗ്രഹിക്കുന്ന ഫലം നേടുന്നതിന് 20% കാര്യങ്ങൾ 80% പ്രധാനമാണ്), അതായത് ആത്മവിശ്വാസത്തോടെ നേടുന്നതിന് 20% കോഡുകൾ മാത്രം അറിഞ്ഞാൽ മതി. വെബ്സൈറ്റ് നിർമ്മാണത്തിൽ നിങ്ങളുടെ ലക്ഷ്യങ്ങൾ.
HTML ഒരു പ്രോഗ്രാമിംഗ് ഭാഷയല്ല, കാരണം ഇത് ഒരു ഹൈപ്പർടെക്സ്റ്റ് മാർക്ക്അപ്പ് ഭാഷയാണ്, അത് സ്വയം സംസാരിക്കുന്നു, ശരിയായ ഡിസ്പ്ലേയ്ക്കായി പേജുകളിൽ ബ്ലോക്കുകൾ അടയാളപ്പെടുത്താനും വെബ് പേജുകൾക്കായി ടെക്സ്റ്റ് അടയാളപ്പെടുത്താനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. സൈറ്റിന്റെ ഒരു പേജിൽ നിന്ന് മറ്റൊന്നിലേക്ക് ലിങ്കുകൾ സൃഷ്ടിക്കാനും ഇത് ഉപയോഗിക്കുന്നു. ഇൻറർനെറ്റിലെ എല്ലാ ലിങ്കുകളും html കോഡിന്റെ ഹൈപ്പർടെക്സ്റ്റ് ഭാഗം ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്.
- ഇതാണ് ഏറ്റവും ലളിതമായ ഭാഷ! നിങ്ങൾ അത് പഠിക്കാൻ തീരുമാനിക്കുകയാണെങ്കിൽ, അതിൽ ഒരു ബുദ്ധിമുട്ടും ഇല്ലെന്ന് ആദ്യം മുതൽ മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്. സ്‌കൂളിലെ കമ്പ്യൂട്ടർ സയൻസ് ക്ലാസുകളിൽ കുട്ടികൾക്ക് വളരെ ബുദ്ധിമുട്ടുള്ള സമയമുണ്ടെന്ന് നമുക്ക് ആത്മവിശ്വാസത്തോടെ പറയാൻ കഴിയും.
അതുകൊണ്ട് നമുക്ക് തുടങ്ങാം. വിൻഡോസ് ഓപ്പറേറ്റിംഗ് സിസ്റ്റത്തിന്റെ സ്റ്റാൻഡേർഡ് പ്രോഗ്രാമുകളിലോ "നോട്ട്പാഡ് + +" എന്ന സൗജന്യ പ്രോഗ്രാമിലോ ഉൾപ്പെടുത്തിയിരിക്കുന്ന നോട്ട്പാഡിൽ കോഡുകൾ എഴുതുന്നതാണ് നല്ലത്.
ആദ്യം, ടാഗ് എന്താണെന്ന് നമുക്ക് നിർവചിക്കാം. ടാഗ് എന്നത് HTML ഭാഷയുടെ തന്നെ ഒരു സെല്ലാണ്, അതിൽ നിന്നാണ് ഇത് പൊതുവെ നിർമ്മിച്ചിരിക്കുന്നത്. ടാഗുകൾ ഉപയോഗിച്ച്, ടെക്സ്റ്റ് എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്നും ചിത്രങ്ങൾ എവിടെ ചേർക്കണമെന്നും ബ്രൗസറുകൾ മനസ്സിലാക്കുന്നു. മാർക്ക്അപ്പ് ഘടകങ്ങൾ തന്നെയാണ് ടാഗുകൾ.
ഒരു വെബ്സൈറ്റ് ചട്ടക്കൂട് സൃഷ്ടിക്കുന്നതിനുള്ള HTML ടാഗുകൾടാഗുകൾ ജോടിയാക്കുകയോ ജോടിയാക്കുകയോ ചെയ്യാം. ജോടിയാക്കിയവ തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്നു, അതായത് അടയ്ക്കുന്നവയിൽ ഒരു ബാക്ക്സ്ലാഷ് "/" അടങ്ങിയിരിക്കുന്നു.
ഒരു ബ്ലോഗ് പേജ് സൃഷ്ടിക്കുമ്പോൾ ഏത് html ഡോക്യുമെന്റിലും ആദ്യം ഉണ്ടായിരിക്കേണ്ടത് ഇതാണ്:
-
02.12.15 44.1K< img width = "50" height = "50" > < ! -- такненужнопрописыватьширинуивысотудляэлемента-- >
HTML ഒരു വെബ് പേജിൽ ബ്ലോക്കുകൾ മാത്രമേ സ്ഥാപിക്കുകയുള്ളൂ, എന്നാൽ ഈ ഭാഷയുടെ ഫോർമാറ്റ് തന്നെ മൂല്യങ്ങൾ വ്യക്തമാക്കുന്നതിനുള്ള സൗകര്യപ്രദമായ ഉപകരണമായി ഇതിനെ അനുവദിക്കുന്നില്ല. ഒരു ബ്ലോക്കിനെ എങ്ങനെയെങ്കിലും ദൃശ്യപരമായി സ്വാധീനിക്കുന്നതിന്, നിങ്ങൾ അത് ചില ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകൾ ഉപയോഗിച്ച് ഫ്രെയിം ചെയ്യേണ്ടതുണ്ട്, അത് അത്ര സൗകര്യപ്രദമല്ല.
ഇന്നത്തെ മൂലകങ്ങളുടെ രൂപം സജ്ജീകരിക്കുന്നതിന് നിങ്ങൾ CSS നിയമങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട്, കാരണം അവ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് അതിനാണ്. ഇന്നത്തേക്ക് അത്രയേയുള്ളൂ, നിങ്ങളുടെ വിരൽത്തുമ്പിൽ വെബ്സൈറ്റ് നിർമ്മാണത്തിൽ ഉപയോഗപ്രദമായ ധാരാളം മെറ്റീരിയലുകൾ ലഭിക്കുന്നതിന് ബ്ലോഗ് അപ്‌ഡേറ്റുകൾ സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ മറക്കരുത്.
സെർച്ച് ഫലങ്ങളിൽ ചില സൈറ്റുകൾ ഉയർന്ന റാങ്ക് നേടുകയും എതിരാളികളെ മറികടക്കുകയും ചെയ്യുന്നത് എന്തുകൊണ്ടെന്ന ചോദ്യത്താൽ പലപ്പോഴും പുതിയ വെബ്‌മാസ്റ്റർമാരെ വേദനിപ്പിക്കാറുണ്ട്. h1, h2...h6 എന്നീ ടാഗുകൾ തെറ്റായി സ്ഥാപിച്ചതാകാം ഇതിന് കാരണം. വിഭവത്തിന്റെ പ്രത്യേകതകൾ കണക്കിലെടുക്കാതെ, ഈ ടാഗുകൾ തെറ്റായി സ്ഥാപിച്ചിട്ടുണ്ടെങ്കിൽ, അവയിൽ അടങ്ങിയിരിക്കുന്ന ലേഖനങ്ങളെയും കീവേഡുകളെയും കുറിച്ചുള്ള കൃത്യമായ വിവരങ്ങൾ സെർച്ച് എഞ്ചിനുകൾക്ക് ലഭിക്കുന്നത് കൂടുതൽ ബുദ്ധിമുട്ടാണ്.
വ്യത്യസ്ത തലങ്ങളിൽ തലക്കെട്ടുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ h1 - h6 ടാഗുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. വാചകത്തിന്റെ ഏതൊക്കെ ഭാഗങ്ങൾ ലേഖനത്തിന്റെ വിഷയത്തെ കൂടുതൽ കൃത്യമായി പ്രതിഫലിപ്പിക്കുന്നുവെന്നും റാങ്കിംഗ് നേട്ടങ്ങൾ നൽകുമെന്നും അവർ വ്യക്തമാക്കുന്നു.
ടാഗുകളുടെ ശരിയായ പ്ലെയ്‌സ്‌മെന്റ്, റിസോഴ്‌സിന്റെ സ്ഥാനത്തെ ഗുണകരമായി ബാധിക്കുന്ന ഫലങ്ങളിലെ ചോദ്യങ്ങൾക്കായി പേജ് കൂടുതൽ കൃത്യമായി പ്രദർശിപ്പിക്കാൻ തിരയൽ എഞ്ചിനുകളെ അനുവദിക്കുന്നു:
എന്തുകൊണ്ട് h1-h6 ടാഗുകൾ ആവശ്യമാണ്?ടാഗുകളിൽ സൈറ്റിന്റെ പേര്, തലക്കെട്ടുകൾ, വാചകത്തിന്റെ ഉപതലക്കെട്ടുകൾ എന്നിവ അടങ്ങിയിരിക്കുന്നു:
HTML-ൽ, ഹെഡർ ടാഗുകളെ ഇംഗ്ലീഷിലെ "ഹെഡറിൽ" നിന്ന് h കൊണ്ട് സൂചിപ്പിക്കുന്നു, അത് "തലക്കെട്ട്, തലക്കെട്ട്" എന്നാണ് വിവർത്തനം ചെയ്യുന്നത്. ഇത് എങ്ങനെ കാണപ്പെടുന്നു എന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:തലക്കെട്ട്
ഉറവിടത്തിന്റെ ഓരോ പേജിലും ഹെഡ്ഡിംഗ് ടാഗുകൾ സ്ഥാപിക്കണം. ഈ സാഹചര്യത്തിൽ, തലക്കെട്ടിന്റെ പ്രാധാന്യം അതിന്റെ സംഖ്യയെ ആശ്രയിച്ചിരിക്കും; അത് ചെറുതാണെങ്കിൽ, തലക്കെട്ട് കൂടുതൽ പ്രധാനമാണ്:
- ഏറ്റവും പ്രധാനപ്പെട്ട ടാഗുകൾ - പ്രാധാന്യം കുറഞ്ഞ ടാഗുകൾ... - അവസാനത്തെ ഏറ്റവും പ്രധാനപ്പെട്ട ടാഗുകൾ
എന്നിരുന്നാലും, അവരുടെ പ്ലെയ്‌സ്‌മെന്റ് ജാഗ്രതയോടെ കൈകാര്യം ചെയ്യണം. തെറ്റായ ഉപയോഗം നിങ്ങളുടെ റിസോഴ്സ് സെർച്ച് എഞ്ചിനുകൾ അനുവദിക്കുന്നതിലേക്ക് നയിച്ചേക്കാം.
h1-h6 ടാഗുകളുടെ വാക്യഘടനവാചകത്തിന്റെ ശീർഷകം സബ്ടൈറ്റിൽ 1 ... സബ്ടൈറ്റിൽ 2 സബ്ടൈറ്റിൽ 3.1 ... സബ്ടൈറ്റിൽ 3_2 സബ്ടൈറ്റിൽ 3
ഏറ്റവും ജനപ്രിയമായ ടാഗുകൾ h1 h2 h3 ആണ്. h1 ടാഗ് എങ്ങനെ ശരിയായി ഉപയോഗിക്കാം?h1 ടാഗ് അവഗണിക്കുന്നതിലൂടെ, ഉള്ളടക്ക ഒപ്റ്റിമൈസേഷൻ പോലുള്ള സുപ്രധാന നേട്ടം വെബ്‌മാസ്റ്റർമാർ സ്വയം നഷ്ടപ്പെടുത്തുന്നു. എഞ്ചിനുകളിൽ ഇത് പലപ്പോഴും യാന്ത്രികമായി രജിസ്റ്റർ ചെയ്യപ്പെടുന്നു, പക്ഷേ എല്ലായ്പ്പോഴും അല്ല, ഈ വസ്തുത കണക്കിലെടുക്കണം.
h1 HTML ടാഗ് ഇത്തരത്തിലുള്ള ഏറ്റവും പ്രധാനപ്പെട്ടതാണ്. സൈറ്റിന്റെ പേരും ലേഖനത്തിന്റെ തലക്കെട്ടും ഇതിൽ അടങ്ങിയിരിക്കുന്നു. എന്നിരുന്നാലും, ഇത് ഒരു ടാഗ് (പേജ് തലക്കെട്ട്) ഉപയോഗിച്ച് ആശയക്കുഴപ്പത്തിലാക്കരുത്. റിസോഴ്സ് പേജ് തുറക്കുമ്പോൾ സ്‌ക്രീനിന്റെ മുകളിൽ ഇടതുവശത്തുള്ള ബ്രൗസറിൽ ടൈറ്റിൽ പ്രദർശിപ്പിക്കും. ശീർഷകം പേജിന്റെ തലക്കെട്ടിൽ എഴുതിയിരിക്കുന്നു, അതേസമയം h1 - h6 പേജിന്റെ “ബോഡി” ൽ തന്നെ സൂചിപ്പിക്കുകയും ടാഗുകളിൽ ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു.
ഒരു പേജിൽ ഒരു h1 ടാഗ് മാത്രമേ ഉണ്ടാകൂ. h1 ടാഗ് ഉപയോഗിച്ച് നിങ്ങൾ നിരവധി തലക്കെട്ടുകൾ വ്യക്തമാക്കുകയാണെങ്കിൽ, സെർച്ച് എഞ്ചിനുകൾ ഇത് ഓവർസ്പാമായി കണക്കാക്കാം, ഇത് ഒരു നിരോധനത്തിന് കാരണമായേക്കാം:
പ്രധാന തലക്കെട്ട് h1 രചിക്കുന്നതിനുള്ള നിയമങ്ങൾ:- പേജ് പ്രൊമോട്ട് ചെയ്യാൻ ഉപയോഗിക്കുന്ന കീവേഡുകൾ ടാഗ് ഉപയോഗിക്കണം;
- നിങ്ങൾ h1 തലക്കെട്ട് ദീർഘമാക്കരുത്; കുറച്ച് വാക്കുകൾ മതി;
- ശീർഷക വാചകം വായിക്കാവുന്നതായിരിക്കണം;
- h1 മെറ്റാ ടാഗിൽ ടെക്സ്റ്റ് അല്ലാതെ മറ്റൊന്നും അടങ്ങിയിരിക്കരുത്. നിങ്ങൾക്ക് ഇത് ഹൈലൈറ്റ് ചെയ്യണമെങ്കിൽ, ടാഗിന് പുറത്ത് കോഡുകൾ ഇടുക;
- സ്വമേധയാ h1 എഴുതുന്നതിന് മുമ്പ്, എഞ്ചിൻ അത് യാന്ത്രികമായി സജ്ജമാക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുക;
- h1-ന്റെ ഉള്ളടക്കം പേജിന്റെ ശീർഷകത്തിൽ വ്യക്തമാക്കിയ വിഷയവുമായി പൊരുത്തപ്പെടണം;
- ഒരു h1 സൃഷ്ടിക്കുമ്പോൾ, പേജ് പ്രമോട്ട് ചെയ്യുന്ന പ്രധാന വാക്യം ഉപയോഗിക്കുന്നത് ഉറപ്പാക്കുക;
- ശീർഷകത്തിന്റെ ഉള്ളടക്കം അദ്വിതീയവും സംക്ഷിപ്തവും പ്രമേയപരവുമായിരിക്കണം. നിങ്ങൾ ശീർഷക ടാഗിന്റെ പൂർണ്ണമായ പകർപ്പ് h1 ആക്കരുത്. വിഭവത്തിന്റെ ഓരോ പേജിലും തനതായ h1 - h6 എഴുതേണ്ടത് പ്രധാനമാണ്, അതിനാൽ ആവർത്തനം ഒഴിവാക്കുക;
- കോമകളാൽ വേർതിരിക്കുന്ന ശീർഷകത്തിലെ പ്രധാന ശൈലികൾ നിങ്ങൾക്ക് ലിസ്റ്റ് ചെയ്യാൻ കഴിയില്ല. h1 ന്റെ ഉള്ളടക്കം സെർച്ച് എഞ്ചിനുകൾക്ക് മാത്രമല്ല, റിസോഴ്സ് സന്ദർശകർക്കും മനസ്സിലാക്കാവുന്നതായിരിക്കണം.
h2-h6 ടാഗുകൾ എങ്ങനെ ശരിയായി ഉപയോഗിക്കാം?
h1 കൂടാതെ, h2, h3, h4, h5, h6, തുടങ്ങിയ ടാഗുകൾ സെർച്ച് എഞ്ചിനുകൾ തിരിച്ചറിയുന്ന തലക്കെട്ടുകൾ സ്ഥാപിക്കാൻ ഉപയോഗിക്കുന്നു.
h2 ടാഗ്ഹോം പേജിൽ സ്ഥിതിചെയ്യുന്ന ഒരു ഫീഡിലെ പോസ്റ്റിന്റെ തലക്കെട്ടുകൾക്കോ ഒരു ലേഖനത്തിലെ സബ്‌ടൈറ്റിലുകൾക്കോ സാധാരണയായി ഉപയോഗിക്കുന്നു.
ടാഗുകൾ h3, h4സൈഡ്‌ബാറിലെ ഉപശീർഷകങ്ങൾ, വിഭാഗങ്ങൾ, വിജറ്റുകൾ എന്നിവയുടെ പേരുകൾ ഹൈലൈറ്റ് ചെയ്യാൻ അവ പലപ്പോഴും ഉപയോഗിക്കുന്നു.
ടാഗുകൾ h5, h6വാചകത്തിന്റെ ബാക്കി ഭാഗങ്ങളിൽ നിന്ന് വേർതിരിക്കേണ്ട ചെറിയ പേജ് ഘടകങ്ങൾക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു.
എഞ്ചിനുകളുടെ വ്യത്യസ്ത പതിപ്പുകളിൽ h1 - h6 തലക്കെട്ടുകളുടെ ക്രമീകരണം വ്യത്യസ്തമായി നടപ്പിലാക്കാൻ കഴിയും.
h2 -h6 സ്ഥാപിക്കുന്നതിനുള്ള നിയമങ്ങൾ:
- തലക്കെട്ട് ഘടന. തലക്കെട്ടുകളുടെ ഒരു ശ്രേണി നിലനിർത്തണം;
- അക്ഷര വലിപ്പം. ശീർഷക നില കുറയുന്തോറും ഫോണ്ട് ചെറുതാകും. ഫോണ്ട് എഡിറ്റിംഗ് ശൈലികളിലാണ് ചെയ്യുന്നത്. എന്നാൽ സാധാരണയായി, ഫോണ്ടുകൾ സ്ഥിരസ്ഥിതിയായി ശരിയായ വലുപ്പങ്ങളാണ്;
- മറ്റ് ആക്സന്റ് ടാഗുകൾക്കൊപ്പം ഹെഡ്ഡിംഗ് ടാഗുകൾ ഉപയോഗിക്കാൻ കഴിയില്ല. തിരയലുകളിൽ ഈ പേജ് പ്രമോട്ട് ചെയ്യുന്ന തലക്കെട്ടുകളിൽ കീവേഡുകൾ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു;
- h1 പോലെയല്ല, h2 - h6 ടാഗുകൾ ഒരു പേജിൽ നിരവധി തവണ എഴുതാം.
തലക്കെട്ടുകളുടെ ശ്രേണിയുടെ തലവനാണ് ഞാൻ എന്റെ മക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ എന്റെ കൊച്ചുമക്കൾ
- സ്പാം ഉണ്ടാകരുത്;
- h1 - h6 എന്ന വാചകത്തിന്റെ ഘടന പര്യായപദങ്ങൾ ഉപയോഗിച്ചും രൂപഘടനയുടെ നിയമങ്ങൾ കണക്കിലെടുത്തും ചെയ്യണം;
- പ്രധാന കീവേഡുകൾ ശീർഷകത്തിന്റെ തുടക്കത്തോട് അടുക്കുന്നതാണ് നല്ലത്;
- തലക്കെട്ടുകളിൽ എഴുതിയിരിക്കുന്ന പ്രധാന വാക്യങ്ങൾ പേജിന്റെ വാചകത്തിൽ ദൃശ്യമാകണം;
- ടാഗുകൾ h1 - h6 ഹ്രസ്വവും സംക്ഷിപ്തവും വിജ്ഞാനപ്രദവുമായിരിക്കണം:
ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു
ഫോറം എഞ്ചിന്റെ യാന്ത്രിക കണ്ടെത്തൽ
Botmaster Labs സംഘടിപ്പിച്ചത്, ആസൂത്രണം ചെയ്തിട്ടില്ല. എനിക്ക് സമയമില്ല, വീഡിയോ ഒരു മത്സരത്തിന് ആവശ്യമാണ്, ഒരു പുതിയ ട്രെൻഡ് എന്ന നിലയിൽ, നല്ല സ്ക്രീൻഷോട്ടുകൾ ഉപയോഗിച്ച് എല്ലാം എളുപ്പമാകുമെങ്കിലും...
-
- ലിസ്റ്റ് ഘടകങ്ങൾ സ്ഥാപിച്ചിരിക്കുന്നു. ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിനുള്ള കോഡിന്റെ ഒരു ഉദാഹരണം, അക്കമിട്ടതും ബുള്ളറ്റുള്ളതുമായ ലിസ്റ്റുകളുടെ രൂപത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്നത് ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു.
