HTML എന്നത് ഹൈപ്പർടെക്‌സ്‌റ്റ് മാർക്ക്അപ്പ് ഭാഷയാണ്, അത് ഇന്റർനെറ്റിനെ നമുക്ക് അറിയുന്നതും ഇഷ്ടപ്പെടുന്നതും ആക്കി. ഈ അത്ഭുതകരമായ ഉപകരണത്തിന് നന്ദി, സൈറ്റുകൾ മനോഹരവും ആധുനികവുമാണെന്ന് തോന്നുന്നു, കൂടാതെ ഉപയോഗത്തിന്റെ എളുപ്പവും ഉറപ്പാക്കുന്നു. HTML ഒരു വെബ് പേജിന്റെ ഘടകങ്ങളെ ഒരു ഉപയോക്തൃ-സൗഹൃദ ഫോർമാറ്റിലേക്ക് ക്രമീകരിക്കുന്നു. അതിന്റെ പ്രവർത്തനം MS Word അല്ലെങ്കിൽ OpenOffice പോലുള്ള ആളുകൾ ചെയ്യുന്നതുമായി താരതമ്യപ്പെടുത്താവുന്നതാണ്. അവർ മുഖമില്ലാത്ത അക്ഷരങ്ങളെ ഖണ്ഡികകൾ അടങ്ങിയ ഒരു പ്രമാണമാക്കി മാറ്റുന്നു, ലഘുചിത്രം, ഇറ്റാലിക്സ്, ടേബിളുകൾ കൂടാതെ ചിത്രങ്ങൾ പോലും. HTML ഭാഷയും ഏകദേശം ഒരേ കാര്യം ചെയ്യുന്നു, ഒരേയൊരു വ്യത്യാസം അതിന്റെ പ്രമാണങ്ങൾ ബ്രൗസറിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്നു എന്നതാണ്, കൂടാതെ ഈ ഉപകരണത്തിന്റെ കഴിവുകൾ ഇവയെക്കാൾ വളരെ വിശാലമാണ്. ടെക്സ്റ്റ് എഡിറ്റർ. അടയാളപ്പെടുത്തലിനായി ടാഗുകൾ ഉപയോഗിക്കുന്നു - പ്രത്യേക ടീമുകൾ, ഒരു വെബ് പേജിന്റെ ഘടന വിവരിക്കുന്നു. അവ ആംഗിൾ ബ്രാക്കറ്റുകളിൽ ഘടിപ്പിച്ചിരിക്കുന്നു - അതുവഴി ബ്രൗസറിന് അവയെ ടെക്‌സ്‌റ്റിന്റെ ബൾക്കിൽ നിന്ന് വേർതിരിച്ചറിയാൻ കഴിയും. അടുത്തതായി, തുടക്കക്കാർക്കുള്ള HTML-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ ഞങ്ങൾ കവർ ചെയ്യും.

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

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

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

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

എല്ലാ HTML പ്രമാണത്തിനും അനുബന്ധമായ ഒരു വിപുലീകരണം ഉണ്ട്, ഉദാഹരണത്തിന് Index.html. ഇതുവഴി ബ്രൗസറിന് താൻ എന്താണ് കൈകാര്യം ചെയ്യുന്നതെന്ന് മനസിലാക്കാനും പേജ് ശരിയായി പ്രദർശിപ്പിക്കാനും കഴിയും. ഒരു വെബ്‌സൈറ്റ് സൃഷ്‌ടിക്കാൻ ഉപയോഗിക്കുന്ന എല്ലാ ഫയലുകളും ഒരു ഡയറക്‌ടറിയിൽ സൂക്ഷിക്കുന്നത് ഉചിതമാണ്, ഇത് ഭാവിയിൽ നിങ്ങളുടെ ജീവിതം വളരെ എളുപ്പമാക്കും. മാർക്ക്അപ്പ് ഭാഷാ അടിസ്ഥാനങ്ങൾ HTML ഹൈപ്പർടെക്സ്റ്റ്പ്രമാണത്തിന്റെ ഘടനയെക്കുറിച്ച് വ്യക്തമായ ധാരണ ആവശ്യമാണ്. ഈ ഡോക്യുമെന്റിൽ ഉപയോഗിക്കുന്ന HTML പതിപ്പ് ബ്രൗസറിനോട് പറയുന്ന ഒരു ടാഗ് ഉപയോഗിച്ചാണ് ഇത് ആരംഭിക്കുന്നത്. ഓൺ ഈ നിമിഷംഭാഷയുടെ അഞ്ചാമത്തെ പതിപ്പ് നിലവിലുള്ളതാണ്, അതിനാൽ ഇവിടെ ഒന്നും കണ്ടുപിടിക്കേണ്ട ആവശ്യമില്ല; ഏത് പേജിന്റെയും തുടക്കത്തിൽ നിങ്ങൾക്ക് സുരക്ഷിതമായി മുകളിലെ ടാഗ് ചേർക്കാം.

സൈറ്റിന്റെ "അസ്ഥികൂടം" ഉണ്ടാക്കുന്ന പ്രധാന ജോടിയാക്കിയ ഘടനകൾ ഉണ്ട്. മറ്റുള്ളവയെല്ലാം നെസ്റ്റഡ് ചെയ്തിരിക്കുന്ന ആദ്യത്തെ ടാഗ് ഇതാണ് .... അതിനു പുറത്തുള്ള ഒന്നും ബ്രൗസർ ഒരു വെബ് പേജായി തിരിച്ചറിയാത്തതിനാൽ അത് ഡോക്യുമെന്റ് തുറന്ന് അത് അടയ്ക്കുന്നു. ഏത് പ്രമാണത്തിനും ഈ ടാഗ് ആവശ്യമാണ്. ആവശ്യമായ നിരവധി ടാഗുകളും ഇതിൽ അടങ്ങിയിരിക്കുന്നു, അവ ചുവടെ ചർച്ചചെയ്യും.

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

HTML-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ അറിയുന്നതിൽ കാസ്‌കേഡിംഗ് സ്‌റ്റൈലിംഗ് അല്ലെങ്കിൽ css ഉപയോഗിക്കുന്നത് ഉൾപ്പെടുന്നു. പേജിൽ പ്രദർശിപ്പിക്കുന്ന ഘടകങ്ങളുടെ സവിശേഷതകൾ അവർ സജ്ജമാക്കുന്നു. ആധുനിക സമീപനംമൂലകത്തിന്റെ നിറം, ഉയരം, സ്ഥാനം തുടങ്ങിയ സ്വഭാവസവിശേഷതകൾ ഉൾപ്പെടുത്തുന്നത് ഈ ടാസ്ക്കിൽ ഉൾപ്പെടുന്നു ബാഹ്യ ഫയൽകൂടുതൽ സൗകര്യത്തിനായി. ഒരു css ഫയൽ ഉൾപ്പെടുത്താൻ, ടാഗ് ഉപയോഗിക്കുക. IN പൂർത്തിയായ ഫോംഇത് ഇതുപോലെ കാണപ്പെടുന്നു: ഇവിടെ href ഫയലിന്റെ സ്ഥാനം സൂചിപ്പിക്കുന്നു, ടൈപ്പ് അതിന്റെ തരത്തെ സൂചിപ്പിക്കുന്നു.

HTML പ്രമാണത്തിന്റെ ഈ ഭാഗത്താണ് പേജിന്റെ ദൃശ്യമായ ഭാഗം സൃഷ്ടിക്കുന്നത്. "ശരീര"ത്തിനുള്ളിൽ ചെയ്യുന്നതെല്ലാം ബ്രൗസർ കാണിക്കും. ഇത് ധാരാളം HTML ടാഗുകൾ ഉപയോഗിക്കുന്നു. ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ്, ലിങ്കുകൾക്കൊപ്പം പ്രവർത്തിക്കൽ, ഒരു വെബ് പേജ് രൂപപ്പെടുത്തുന്നതിനുള്ള അടിസ്ഥാന ഉപകരണങ്ങൾ എന്നിവയാണ് അടിസ്ഥാനകാര്യങ്ങൾ. HTML-ൽ പ്രവർത്തിക്കാൻ തുടങ്ങുന്നതിന്, നിങ്ങൾക്ക് അടിസ്ഥാന ടാഗുകൾ അറിയുകയും അവ ഉപയോഗിക്കാൻ കഴിയുകയും വേണം. ഏറ്റവും ജനപ്രിയമായവ ചുവടെ:

• - css-ൽ വിവരിച്ചിരിക്കുന്ന ഒരു പ്രത്യേക ശൈലിക്ക് വിധേയമായ ഒരു സബ്‌സ്ട്രിംഗ് ഹൈലൈറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു;
• - ഒരു വെബ് പേജിൽ ഒരു ലിങ്ക് സൃഷ്ടിക്കുന്നു; സംക്രമണ വിലാസം href ആട്രിബ്യൂട്ട് വ്യക്തമാക്കുന്നു;
• - നമ്മുടെ കാലത്തെ ഏറ്റവും ജനപ്രിയമായ ടാഗുകളിൽ ഒന്ന്; HTML ഭാഷയുടെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കാൻ തീരുമാനിക്കുന്ന ഏതൊരാളും അതിൽ പ്രത്യേക ശ്രദ്ധ ചെലുത്തണം, കാരണം ഇത് ഒരു ബ്ലോക്ക് ഘടകമാണ്, അതിന്റെ അടിസ്ഥാനത്തിലാണ് ആധുനിക സൈറ്റുകളുടെ സിംഹഭാഗവും നിർമ്മിച്ചിരിക്കുന്നത് (ബ്ലോക്കുകൾക്കുള്ള പാരാമീറ്ററുകൾ css-ലും മറ്റ് ബ്ലോക്കുകളിലും സജ്ജീകരിച്ചിരിക്കുന്നു. ഈ ടാഗിനുള്ളിൽ സ്ഥിതിചെയ്യാം);

• വാചകത്തിൽ നിന്ന് ഒരു ഖണ്ഡിക തിരഞ്ഞെടുക്കുന്നു; ഖണ്ഡികയുടെ ഉള്ളടക്കം തുറക്കുന്നതിനും അടയ്ക്കുന്നതിനുമുള്ള ടാഗുകൾക്കിടയിലാണ്;

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

  നിങ്ങളുടെ സ്വന്തം വെബ് പേജ് സൃഷ്‌ടിക്കുന്നതിന് ആവശ്യമായ എല്ലാ ടാഗുകളും ഇവയല്ല, എന്നാൽ തുടക്കക്കാർക്കായി HTML-ന്റെ അടിസ്ഥാനങ്ങൾ നൽകുന്നതിന് അവ മതിയാകും.

  സി.എസ്.എസ്

  HTML ഭാഷയുടെ വികസനം ഓരോ ടാഗും ധാരാളം ആട്രിബ്യൂട്ടുകൾ നേടിയിട്ടുണ്ട് എന്ന വസ്തുതയിലേക്ക് നയിച്ചു, കൂടാതെ വെബ് പേജുകൾ പ്രത്യക്ഷപ്പെടുന്നതിനുള്ള ആവശ്യകതകൾ ഗണ്യമായി വർദ്ധിച്ചു. കോഡ് ബുദ്ധിമുട്ടുള്ളതും അസൗകര്യപ്രദവുമായിത്തീർന്നു, അത് വായിക്കുന്നത് ബുദ്ധിമുട്ടായിരുന്നു, അത് പൊരുത്തപ്പെടുത്തുകയോ മാറ്റുകയോ ചെയ്യട്ടെ. കൂടാതെ, നിങ്ങളുടെ സൈറ്റിന് പച്ചയിൽ അടയാളപ്പെടുത്തിയ ധാരാളം തലക്കെട്ടുകളുള്ള പത്ത് പേജുകൾ ഉണ്ടെങ്കിൽ, നിങ്ങൾ പെട്ടെന്ന് അവ ചുവപ്പ് നിറമാക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ കഠിനാധ്വാനം ചെയ്യേണ്ടിവരും, ഓരോന്നും സ്വമേധയാ മാറ്റുക. കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളുടെ ആവിർഭാവത്തോടെ, ഈ പ്രക്രിയ ലളിതവും യുക്തിസഹവും ആയിത്തീർന്നു, കൂടാതെ HTML കോഡ് കൂടുതൽ വായിക്കാവുന്നതായിത്തീരുകയും ചെയ്തു.

  

  CSS പ്രയോഗിക്കുന്നു

  വെബ് പേജുകൾ സൃഷ്‌ടിക്കുന്നതിന്, നിങ്ങൾ HTML, CSS എന്നിവയുടെ അടിസ്ഥാനകാര്യങ്ങൾ അറിഞ്ഞിരിക്കണം, കാരണം കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളെക്കുറിച്ചുള്ള അറിവില്ലാതെ ഈ മേഖലയിൽ ഇപ്പോൾ ഒന്നും ചെയ്യാനില്ല. മുഴുവൻ പ്രമാണത്തിനും ബാധകമായ ഏത് ഘടകത്തിനും അവർ ആട്രിബ്യൂട്ടുകൾ സജ്ജമാക്കുന്നു. ഇതുവഴി നിങ്ങൾക്ക് എല്ലാ ഘടകങ്ങൾക്കും ഒരേസമയം നിറം സജ്ജമാക്കാൻ കഴിയും

  അഥവാ ഒരു നിയമം മാത്രം എഴുതിയുകൊണ്ട്. വെബ് പേജുകൾ പ്രത്യക്ഷപ്പെടുന്നതിനുള്ള ആധുനിക ആവശ്യകതകൾ കണക്കിലെടുത്ത്, കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളുടെ ഉപയോഗം നിർബന്ധമാണ്.

  ഒരു css ഫയൽ ഒരു ഡോക്യുമെന്റിലേക്ക് ബന്ധിപ്പിക്കുന്നതിന്, ഒരു ലിങ്ക് ടാഗ് ഉണ്ട്. അതിന്റെ ഉപയോഗത്തിന്റെ തത്വം കുറച്ചുകൂടി ഉയർന്നതായി വിവരിച്ചിരിക്കുന്നു, എന്നാൽ എല്ലാ ശൈലികളും ഒരിടത്ത് സംയോജിപ്പിക്കുന്നതിനുള്ള ഒരേയൊരു ഓപ്ഷനല്ല ഇത്. ഒരു ടാഗും ഉണ്ട്, അത് ഡോക്യുമെന്റിന്റെ "ഹെഡിൽ" സ്ഥിതിചെയ്യുന്നു കൂടാതെ CSS ഫയലുകൾ ഉപയോഗിക്കാതെ തന്നെ ശൈലികൾ എഴുതാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു രീതി അല്ലെങ്കിൽ മറ്റൊന്ന് ഉപയോഗിക്കേണ്ട ആവശ്യമില്ല. മികച്ച ഫലം ലഭിക്കുന്നതിന് അവ വിജയകരമായി സംയോജിപ്പിക്കാൻ കഴിയും. സ്‌റ്റൈൽ ഷീറ്റുകൾ ഉപയോഗിച്ച് ഒരു ഫയൽ സൃഷ്‌ടിക്കുന്നതിന്, നിങ്ങൾ .css വിപുലീകരണമുള്ള ഒരു ഫയൽ സൃഷ്‌ടിക്കേണ്ടതുണ്ട്, ഉദാഹരണത്തിന്, Styles.css.

  ജാവാസ്ക്രിപ്റ്റ്

  പലപ്പോഴും, HTML വാഗ്ദാനം ചെയ്യുന്ന ഉപകരണങ്ങൾ തന്റെ ജോലികൾക്ക് പര്യാപ്തമല്ലെന്ന് മനസ്സിലാക്കാൻ തീരുമാനിക്കുന്ന ഒരു വ്യക്തി. ഒരു മനോഹരമായ പേജ് സൃഷ്ടിക്കാൻ അടിസ്ഥാനകാര്യങ്ങൾ നിങ്ങളെ അനുവദിക്കും, എന്നാൽ പെട്ടെന്ന് അത് സംവേദനാത്മകമാക്കണമെങ്കിൽ എന്തുചെയ്യും? ഈ ആവശ്യങ്ങൾക്കായി, HTML-മായി തികച്ചും സംവദിക്കുന്ന ഒരു അദ്വിതീയ പ്രോഗ്രാമിംഗ് ഉണ്ട്. ജനപ്രിയ ജാവ ഭാഷയുടെ ഇളയ സഹോദരനായാണ് ഇതിനെ ജാവാസ്ക്രിപ്റ്റ് എന്ന് വിളിക്കുന്നത്. ഇന്ന്, ഈ ഭാഷകൾ കാര്യമായ വ്യത്യാസങ്ങൾ നേടിയിട്ടുണ്ട്, അവ തമ്മിലുള്ള വിടവ് വളരുകയാണ്.

  

  ടാഗുകൾ സൃഷ്‌ടിക്കാനും എഡിറ്റുചെയ്യാനും നിങ്ങളെ അനുവദിച്ചുകൊണ്ട് HTML-ന്റെ കഴിവുകൾ വിപുലീകരിക്കാൻ JavaScript-ന് കഴിയും. കൂടാതെ, ഈ അത്ഭുതകരമായ ഉപകരണം ഉപയോഗിച്ച്, നിങ്ങൾക്ക് കോക്കിയിൽ പ്രവർത്തിക്കാനും പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ സെർവറിൽ നിന്ന് ഡാറ്റ ഡൗൺലോഡ് ചെയ്യാനും HTML കഴിവുകൾ അനുവദിക്കുന്നതിനേക്കാൾ സൈറ്റിനെ കൂടുതൽ സംവേദനാത്മകമാക്കാനും കഴിയും. ഈ ഭാഷയ്ക്കും സുരക്ഷയുമായി ബന്ധപ്പെട്ട പരിമിതികളുണ്ട്. സെർവർ വശത്ത് JavaScript ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, അതിന്റെ കഴിവുകൾ പരിമിതപ്പെടുത്തുന്ന വ്യവസ്ഥകളിൽ അത് എക്സിക്യൂട്ട് ചെയ്യപ്പെടും, അതിനാൽ ആക്രമണകാരികൾക്ക് ഒരു കമ്പ്യൂട്ടറിലും ക്ഷുദ്ര കോഡ് ഉപയോഗിക്കാൻ കഴിയില്ല.

  എഡിറ്റർമാർ

  ഒരു തുടക്കക്കാരന് വേണ്ടിയുള്ള HTML അടിസ്ഥാനകാര്യങ്ങൾക്ക് വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും സൗകര്യപ്രദവും പ്രായോഗികവുമായ പ്രോഗ്രാമുകളെക്കുറിച്ചുള്ള അറിവ് ആവശ്യമാണ്. മുകളിൽ എഴുതിയതുപോലെ, ഡ്രീംവീവർ പോലുള്ള വിഷ്വൽ എഡിറ്റർമാർ ഈ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമല്ല. അതിനാൽ, നിങ്ങൾ ഒരു സാധാരണ നോട്ട്പാഡിൽ ടാഗുകൾ എഴുതണോ? ഒരു സാധാരണ നോട്ട്പാഡിന് പ്രത്യേക ലേഔട്ട് ടൂളുകളൊന്നും ഇല്ലാത്തതിനാൽ ഈ ഓപ്ഷനും സംശയാസ്പദമാണ്. നോട്ട്പാഡ്++ ന് ഈ ടാസ്ക്ക് നന്നായി കൈകാര്യം ചെയ്യാൻ കഴിയും. ഈ ഉൽപ്പന്നത്തിന്റെ വലിയ നേട്ടം അത് ഓപ്പൺ സോഴ്‌സ് ആണ്, അത് തികച്ചും സൗജന്യമാണ്. ഇതിന് സൗകര്യപ്രദമായ വാക്യഘടന ഹൈലൈറ്റിംഗും ടാഗുകളുടെ ഓട്ടോമാറ്റിക് ക്ലോസിംഗും ഉണ്ട്. നോട്ട്പാഡ്++ ഇന്റർഫേസ് ഭാഷകളുടെ വിശാലമായ തിരഞ്ഞെടുപ്പും നൽകുന്നു, കൂടാതെ നിരവധി ആഡ്-ഓണുകൾ ഉപയോഗിച്ച് അതിന്റെ കഴിവുകൾ എളുപ്പത്തിൽ വിപുലീകരിക്കുന്നു.

  

  നോട്ട്പാഡ്++ പോലെയുള്ള ഒരു പ്രോഗ്രാമാണ് സബ്ലൈം ടെക്സ്റ്റ് 3, എന്നാൽ ഒരു ഫീസായി ലഭ്യമാണ്. മിക്ക ഡവലപ്പർമാരുടെയും ഹൃദയം നേടിയത് അവളാണ്. JavaScript, CSS, HTML എന്നിവയ്‌ക്ക് മികച്ച ടെക്‌സ്‌റ്റ് 3 അനുയോജ്യമാണ്. ഇത് ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നതിനുള്ള അടിസ്ഥാനകാര്യങ്ങൾ നിങ്ങൾ സ്വയം പഠിക്കേണ്ടതുണ്ട്, പക്ഷേ അത് വിലമതിക്കുന്നു. മികച്ച ട്യൂണിംഗിനുള്ള പരിധിയില്ലാത്ത സാധ്യതകൾ ഇതിൽ അടങ്ങിയിരിക്കുന്നു, ഇത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് കഴിയുന്നത്ര പ്രോഗ്രാം ക്രമീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

  തുടക്കക്കാർക്കുള്ള HTML, CSS അടിസ്ഥാനങ്ങൾ

  നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള കല പഠിക്കുന്നത് ഒറ്റനോട്ടത്തിൽ തോന്നുന്നത്ര ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല. ഏതാനും മാസത്തെ പരിശീലനം നിങ്ങളെ ഒരു ഭീരുവായ ഉപയോക്താവിൽ നിന്ന് ഒരു പുതിയ ഡെവലപ്പറായി മാറ്റും. ഒരു പ്രോഗ്രാമിംഗ് ഭാഷയോ ലിനക്സോ മാസ്റ്റേഴ്സ് ചെയ്യുന്നതിനേക്കാൾ വളരെ എളുപ്പമാണ് ലേഔട്ട് പഠിക്കുന്നത്. വാസ്തവത്തിൽ, ഇത്രയധികം HTML ടാഗുകൾ ഇല്ല; അവയുടെ ഉപയോഗത്തിന്റെ പ്രായോഗിക വശം മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്.

  

  അഡോബ് ഫോട്ടോഷോപ്പിൽ ജോലി ചെയ്യാനുള്ള വൈദഗ്ദ്ധ്യം ഈ വിഷയത്തിൽ അമിതമായിരിക്കില്ല. ഒരു വെബ് പേജിന്റെ ഫോട്ടോഗ്രാഫുകൾ, ചിത്രങ്ങൾ, മറ്റ് ഗ്രാഫിക് ഘടകങ്ങൾ എന്നിവയിൽ പ്രവർത്തിക്കാൻ ഈ പ്രോഗ്രാം നിങ്ങളെ അനുവദിക്കുന്നു. ഇപ്പോൾ, ഫോട്ടോഷോപ്പാണ് അത്തരം ജോലികളെ ഏറ്റവും നന്നായി നേരിടുന്നത്; ഇതിന് കുറച്ച് എതിരാളികളുണ്ട്. ഈ Adobe ഉൽപ്പന്നം ഇഷ്ടപ്പെടാത്തവർക്കായി, Lightroom, GIMP, Illustrator എന്നിവയും സമാന പ്രവർത്തനങ്ങളുള്ള മറ്റ് പ്രോഗ്രാമുകളും ഉണ്ട്.

  HTML-നെക്കുറിച്ചുള്ള അറിവ് എന്താണ് നൽകുന്നത്?

  ഇന്റർനെറ്റ് കുതിച്ചുയരുകയും അതിരുകൾ വികസിക്കുകയും ചെയ്യുന്നതിനാൽ വെബ് പേജ് സൃഷ്ടിക്കുന്നതിനുള്ള കഴിവുകൾ ഇന്ന് വളരെ പ്രസക്തമാണ്. എല്ലാ സംരംഭങ്ങളും, ഏറ്റവും ചെറിയ സ്റ്റോർ, വർക്ക്ഷോപ്പുകൾ, സ്പോർട്സ് ക്ലബ്ബുകൾ എന്നിവപോലും - എല്ലാവർക്കും അവരുടേതായ വെബ്സൈറ്റ് വേണം. തീർച്ചയായും, ഇതിനായി അവർക്ക് CSS ഉം HTML ഉം അറിയാവുന്ന ഒരു ഡവലപ്പർ ആവശ്യമാണ്. അടിസ്ഥാനകാര്യങ്ങൾ മാസ്റ്റർ ചെയ്യാൻ എളുപ്പമാണ്, അതിനുശേഷം ഇത് പരിശീലനത്തിന്റെ കാര്യമാണ്. ലേഔട്ട് സാങ്കേതികവിദ്യകൾ നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നതിനാൽ, ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർക്ക് എല്ലായ്പ്പോഴും ആവശ്യക്കാരുണ്ടാകും. ഈ രസകരമായ വ്യവസായത്തിൽ സ്വയം അർപ്പിക്കാൻ തീരുമാനിക്കുന്ന ഏതൊരാളും ഒരിക്കലും ജോലിയില്ലാതെ അവശേഷിക്കില്ല.

  തുടക്കക്കാർക്കുള്ള HTML അടിസ്ഥാനകാര്യങ്ങൾ, ഓരോ പുതിയ വെബ്‌മാസ്റ്ററും ബ്ലോഗറും ഇപ്പോൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ. അടിസ്ഥാന വെബ്‌സൈറ്റുകൾ എങ്ങനെ സൃഷ്‌ടിക്കാമെന്നും കോഡ് തന്നെ മനസ്സിലാക്കണമെന്നും എന്താണ് പിന്നിൽ എന്താണെന്നും എന്താണ് പോകേണ്ടതെന്നും അറിയണമെങ്കിൽ, HTML ഭാഷയുടെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ചുള്ള അറിവില്ലാതെ ഇത് ചെയ്യുന്നത് അസാധ്യമാണ്. എന്റെ ബ്ലോഗിൽ എ മുതൽ ഇസെഡ് വരെയുള്ള ഈ വിഷയത്തിനായി ഞാൻ നീക്കിവയ്ക്കുന്ന ലേഖനങ്ങളുടെ ഒരു മുഴുവൻ ശൃംഖലയും എനിക്കുണ്ടാകും, ഡോക്യുമെന്റിൽ നിലവിലുള്ള ഓരോ ടാഗും അതിന്റെ അർത്ഥമെന്താണ്, എങ്ങനെ ശരിയായി ഉപയോഗിക്കണം എന്നിവ ഞാൻ വിവരിക്കും.

  HTML അടിസ്ഥാനങ്ങൾ

  നിങ്ങൾക്ക് ഏറ്റവും അടിസ്ഥാനപരമായ കാര്യങ്ങൾ അറിയില്ലെങ്കിൽ, നിങ്ങളുടെ പാത അടഞ്ഞിരിക്കുന്നു. വെബ്‌സൈറ്റുകൾ വികസിപ്പിക്കാനും സൃഷ്‌ടിക്കാനും തീരുമാനിക്കുന്ന ഓരോ വ്യക്തിയും അടിസ്ഥാനകാര്യങ്ങൾ, സൈറ്റ് തന്നെ ഉൾക്കൊള്ളുന്നതെന്താണ്, അത് എങ്ങനെ പ്രവർത്തിക്കുന്നു, കോഡിൽ തന്നെ എന്താണ് സംഭവിക്കുന്നത് എന്നിവ അറിയുകയും മനസ്സിലാക്കുകയും ചെയ്യണമെന്ന് ഞാൻ വിശ്വസിക്കുന്നു.

  തീർച്ചയായും, കുറച്ച് പ്രോഗ്രാമിംഗ് ഭാഷകളുണ്ട്, അവയെല്ലാം അതിന്റേതായ രീതിയിൽ സങ്കീർണ്ണമാണ്, എന്നാൽ നിങ്ങൾ തീർച്ചയായും അറിഞ്ഞിരിക്കേണ്ട ചിലത് ഉണ്ട്. നിങ്ങൾക്ക് മെയിൽ വഴി അയയ്‌ക്കേണ്ട ഒരു കത്ത് മനോഹരമായി രൂപകൽപ്പന ചെയ്യണമെങ്കിൽ, നിങ്ങൾക്ക് സ്വന്തമായി VKontakte ഗ്രൂപ്പ്, മറ്റ് സോഷ്യൽ നെറ്റ്‌വർക്കുകളിൽ ഒരു ഗ്രൂപ്പ്, അതേ YouTube ചാനൽ എന്നിവയുണ്ട്, ഏതെങ്കിലും സൈറ്റ് എഞ്ചിനുകളിൽ നിങ്ങൾ കോഡ് ഉപയോഗിച്ച് ടിങ്കർ ചെയ്യേണ്ടതുണ്ട്, നിങ്ങൾക്ക് ഇത് ആവശ്യമാണ് അടിസ്ഥാന ആശയങ്ങൾ അറിയാൻ.

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

  ഒരു Html ഡോക്യുമെന്റ് ഏറ്റവും ലളിതമായ ടെക്സ്റ്റ് ഡോക്യുമെന്റാണ്, ഇന്റർനെറ്റിൽ നിങ്ങൾ ദിവസവും കാണുന്ന ഒരു ടാഗിംഗ് ഭാഷയാണ്. ടാഗുകൾ ഒരു പ്രമാണത്തിന്റെ ഘടനയെ വിവരിക്കുന്നു. ടാഗുകൾ കോണാകൃതിയിലാണ് ഫോർമാറ്റ് ചെയ്തിരിക്കുന്നത്< >ബ്രാക്കറ്റുകൾ, അതിനുള്ളിൽ ടാഗിന്റെ പേര് എഴുതിയിരിക്കുന്നു. ബ്രൗസർ ഡോക്യുമെന്റിന്റെ ഘടന നോക്കുകയും അത് നിർമ്മിക്കുകയും നിങ്ങളുടെ മോണിറ്ററിലെ നിർദ്ദേശങ്ങൾക്കനുസരിച്ച് പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു, തീർച്ചയായും നിങ്ങൾ എല്ലാം ശരിയായി ചെയ്തുവെങ്കിൽ.

  നിങ്ങൾ പൂർത്തിയായ ചിത്രം കാണുന്നതിന് മുമ്പ് ഈ മുഴുവൻ പ്രക്രിയയും ആരംഭിക്കുന്നു. ബ്രൗസറുകൾ ഒരു പ്രമാണം തുടക്കം മുതൽ അവസാനം വരെ തുടർച്ചയായി പ്രോസസ്സ് ചെയ്യുന്നു. പേജിൽ ഉണ്ടായിരിക്കേണ്ടതെല്ലാം ഉൾപ്പെടെ. പട്ടികകൾ, ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ എന്നിവയും മറ്റും, ഇതിൽ CSS ശൈലികൾ ഉൾപ്പെടുന്നു.

  തുടക്കക്കാർക്കുള്ള അടിസ്ഥാനകാര്യങ്ങൾ

  എന്താണ് html - നിങ്ങൾ വിക്കിപീഡിയ എഴുതുന്നത് നോക്കുകയാണെങ്കിൽ - (ഹൈപ്പർടെക്സ്റ്റ് മാർക്ക്അപ്പ് ലാംഗ്വേജ്) പ്രമാണങ്ങൾക്കുള്ള ഹൈപ്പർടെക്സ്റ്റ് മാർക്ക്അപ്പ് ഭാഷ. ഇന്റർനെറ്റിലെ മിക്ക പേജുകളിലും ഈ ഭാഷയിലുള്ള പേജ് മാർക്ക്അപ്പ് അടങ്ങിയിരിക്കുന്നു. ഈ ഭാഷബ്രൗസറുകൾ വ്യാഖ്യാനിച്ചാൽ, തത്ഫലമായുണ്ടാകുന്ന ഫോർമാറ്റ് ചെയ്ത വാചകം നിങ്ങളുടെ കമ്പ്യൂട്ടർ മോണിറ്ററിലോ മൊബൈൽ ഉപകരണത്തിലോ പ്രദർശിപ്പിക്കും.

  ഈ ഭാഷ അന്തർലീനമായി വളരെ എളുപ്പവും പഠിക്കാൻ പ്രാപ്യവുമാണ്. അതിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ ആർക്കും പഠിക്കാനും മനസ്സിലാക്കാനും കഴിയും. അത്തരമൊരു ഭാഷ ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ വിവരണങ്ങൾ അറിയുകയും ഉപയോഗിക്കുകയും വേണം, അവയെ ടാഗുകൾ എന്നും വിളിക്കുന്നു. ഒരു പ്രമാണം സൃഷ്ടിക്കുന്നത് ടാഗുകളുടെ സഹായത്തോടെയാണ്.

  ഡോക്യുമെന്റിന്റെ ഘടനയിൽ എന്ത് അടങ്ങിയിരിക്കണം, എന്ത് ടാഗുകൾ ഉണ്ടായിരിക്കണം. ഒരു ചെറിയ ഉദാഹരണത്തിലൂടെ എല്ലാം നോക്കാം. ഞാൻ MS ഓഫീസിൽ കുറച്ച് വാചകം എഴുതി ഈ സ്ക്രീൻഷോട്ടിൽ കാണിച്ചു.

  

  ഈ വാചകം ഡോക്യുമെന്റിൽ എഴുതിയിരിക്കുന്നതുപോലെ ബ്രൗസറിൽ പ്രദർശിപ്പിക്കുന്നതിന്, നിങ്ങൾ അതിലേക്ക് പേജ് മാർക്ക്അപ്പ് ചേർക്കേണ്ടതുണ്ട്, അതിൽ ചില ടാഗുകൾ ഉൾപ്പെടുന്നു. ആദ്യം, അവരെ നോക്കൂ, പിന്നെ എന്തിന് ഉത്തരവാദികളായ ഓരോരുത്തരെയും ഞാൻ വിവരിക്കും.

  എന്റെ ബ്ലോഗിലേക്ക് സ്വാഗതം, നിങ്ങൾ ഇപ്പോൾ HTML ബേസിക്സിൽ ഒരു പാഠം പഠിക്കുകയാണ്. നിങ്ങൾക്ക് ഈ ലേഖനം ഇഷ്ടപ്പെട്ടെങ്കിൽ, നിങ്ങൾക്ക് സബ്സ്ക്രൈബ് ചെയ്യാം ഈ ബ്ലോഗ്നിങ്ങളുടെ ഇമെയിൽ ഇൻബോക്സിൽ പുതിയ ലേഖനങ്ങൾ ലഭിക്കുന്നതിന്.

  എവ്ജെനി നെസ്മെലോവിന്റെ ബ്ലോഗ്! തുടക്കക്കാർക്കുള്ള വെബ്‌സൈറ്റ് html, css എന്നിവയുടെ അടിസ്ഥാനകാര്യങ്ങൾ

  ഏതൊരു html ഡോക്യുമെന്റിലും എന്ത് ടാഗുകൾ അടങ്ങിയിരിക്കുന്നു, അതിൽ എന്താണ് ഉൾപ്പെടുന്നത്, അതെല്ലാം എവിടെയാണ് എഴുതേണ്ടത്?

  < html > < body > < h2 >< / h2 > < p >എന്റെ ബ്ലോഗിലേക്ക് സ്വാഗതം, ഇപ്പോൾ HTML അടിസ്ഥാനങ്ങളെക്കുറിച്ചുള്ള ട്യൂട്ടോറിയൽ എടുക്കുക. നിങ്ങൾക്ക് ഈ ലേഖനം ഇഷ്ടപ്പെട്ടെങ്കിൽ, നിങ്ങളുടെ ഇമെയിൽ ഇൻബോക്സിൽ പുതിയ ലേഖനങ്ങൾ ലഭിക്കുന്നതിന് ഈ ബ്ലോഗ് സബ്സ്ക്രൈബ് ചെയ്യാം.< / p > < h2 >എവ്ജീനിയ നെസ്മെലോവിന്റെ ബ്ലോഗ്! നെസ്മെലോവ്. ru തുടക്കക്കാർക്കുള്ള HTML, CSS എന്നിവയുടെ അടിസ്ഥാനകാര്യങ്ങൾ< / h2 > < / body > < / html >

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

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

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

  വാചകം

  < strong > < i >വാചകം< / strong > < / i >

  HTML പ്രമാണ ഘടന

  ഒരിക്കൽ കൂടി ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ, ഡോക്യുമെന്റിൽ നിലവിലുള്ള നിയമങ്ങൾ നിങ്ങൾ പാലിക്കേണ്ടതുണ്ട്. പേജിലുള്ളത്, അതിന്റെ ക്രമം, ഉള്ളടക്കം മുതലായവ ബ്രൗസർ മനസ്സിലാക്കുന്നത് ഇങ്ങനെയാണ്.

  ഒരു പ്രത്യേക ടാസ്‌ക് ചെയ്യാൻ വെബ് ബ്രൗസറിനോട് പറയുന്ന ഒരു ഘടകമാണ് ടാഗ്. ഉദാഹരണത്തിന്, ഒരു ഖണ്ഡിക, പട്ടിക, ഫോം അല്ലെങ്കിൽ ചിത്രം എന്നിവയുടെ സാന്നിധ്യം.

  ആട്രിബ്യൂട്ട് - ടാഗ് പരിഷ്കരിക്കുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു ഖണ്ഡിക കേന്ദ്രീകരിച്ചോ വലത് വിന്യസിച്ചോ വിന്യസിക്കാം, പേജിലെ ചിത്രത്തിന്റെ സ്ഥാനം സജ്ജീകരിക്കുക തുടങ്ങിയവ.

  ടാഗുകൾ എപ്പോഴും അടയ്ക്കുക, നിങ്ങൾ അത് തുറക്കുകയാണെങ്കിൽ, അത് അടയ്ക്കുന്നത് ഉറപ്പാക്കുക. അല്ലെങ്കിൽ, ഒരു പിശക് സംഭവിക്കും കൂടാതെ നിങ്ങളുടെ പ്രമാണം പേജിൽ ശരിയായി പ്രദർശിപ്പിക്കില്ല. ഒഴിവാക്കലുകളും ഉണ്ട്, അത് മറക്കാൻ പാടില്ല.

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

  ആദ്യത്തേതിൽ നിന്ന് നമുക്ക് ആരംഭിക്കാം. ഡോക്യുമെന്റിന്റെ തുടക്കത്തിൽ ഞാൻ ഒരു ടാഗ് തുറന്ന് അവസാനം ഞാൻ അത് അടച്ചു. ഈ കോഡ്എല്ലാ പ്രമാണങ്ങളിലും ഉണ്ട്, ഈ ടാഗുകൾക്കിടയിൽ സ്ഥാപിച്ചിരിക്കുന്നതെല്ലാം HTML കോഡാണെന്ന് ഇത് ബ്രൗസറിനോട് പറയുന്നു. ഇത് ഡോക്യുമെന്റിന്റെ തന്നെ റൂട്ടാണ്; ഈ ടാഗിന് പിന്നിൽ പിന്നീട് ഉള്ളതെല്ലാം ഡോക്യുമെന്റിൽ ഉൾപ്പെടുത്തിയിട്ടില്ല, മാത്രമല്ല ബ്രൗസറുകൾ അത് മനസ്സിലാക്കുകയും ചെയ്യുന്നില്ല. പ്രമാണത്തിന്റെ തുടക്കത്തിൽ തന്നെ, ടാഗ് തുറക്കുകയും അവസാനം അത് അടയ്ക്കുകയും വേണം.

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

  ഉള്ളടക്കം

  < head >ഉള്ളടക്കം< / head >

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

  നിങ്ങൾ ഹെഡറിൽ "ഹലോ വേൾഡ്" എന്ന് എഴുതിയിട്ടുണ്ടെങ്കിൽ, പേജിൽ പ്രദർശിപ്പിക്കേണ്ട വിവരങ്ങൾ ഇതാണ്, മറ്റൊന്നുമല്ല. നിങ്ങൾ ആളുകളെയും സെർച്ച് എഞ്ചിനുകളെയും വഞ്ചിക്കരുത്, അവർ അത് ഇഷ്ടപ്പെടുന്നില്ല, അതുവഴി നിങ്ങൾ സ്വയം കാര്യങ്ങൾ കൂടുതൽ വഷളാക്കുന്നു. ഈ ടാഗിൽ അടങ്ങിയിരിക്കുന്ന വിവരങ്ങൾ നിങ്ങളുടെ പേജിന്റെ ഉള്ളടക്കത്തിന് പ്രസക്തമായിരിക്കണം.

  നിർബന്ധിത ശീർഷക ടാഗിന് ശേഷം, ഒരു ഓപ്ഷണൽ ഒന്ന് ഉണ്ട്, മാത്രമല്ല ധാരാളം പ്രധാനപ്പെട്ട ടാഗ്മെറ്റാ. ഈ ടാഗ് സിംഗിൾ ആണ്. ഈ ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾ പേജിനും (വിവരണം) അതിന്റെ കീവേഡുകൾക്കും (കീവേഡുകൾ) ഒരു വിവരണം സജ്ജമാക്കി.

  കൂടാതെ, മെറ്റാ ടാഗിൽ പേജിന്റെ രചയിതാവിനെയും മറ്റ് മെറ്റാഡാറ്റ പ്രോപ്പർട്ടികളെയും കുറിച്ചുള്ള ഡാറ്റ അടങ്ങിയിരിക്കാം. ഒരു പേജ് മൊത്തത്തിൽ സൂചികയിലാക്കുന്നത് നിങ്ങൾക്ക് തടയാം സെർച്ച് എഞ്ചിനുകൾ. 20 സെക്കൻഡിന് ശേഷമോ 5 സെക്കൻഡിന് ശേഷമോ പേജ് യാന്ത്രികമായി പുതുക്കുന്നതിനായി സജ്ജമാക്കുക, തുടർന്ന് മറ്റൊരു പേജിലേക്ക് മാറുക.

  < meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

  അത്തരം നിരവധി മെറ്റാ ഘടകങ്ങൾ ഉണ്ടാകാം, കാരണം അവയ്ക്ക് പൂർണ്ണമായും വഹിക്കാൻ കഴിയും വിവിധ വിവരങ്ങൾ. മറ്റ് ഉപയോക്താക്കൾ, അവർ ബ്രൗസറിൽ പേജ് തുറക്കുമ്പോൾ, നിങ്ങളുടെ എല്ലാ വിവരണങ്ങളും കാണുന്നില്ല; ഇതെല്ലാം കാഴ്ചയിൽ നിന്ന് മറഞ്ഞിരിക്കുന്നു.

  പേജിൽ ശൈലികൾ സജ്ജീകരിക്കാനും സ്റ്റൈൽ ടാഗ് ഉപയോഗിക്കാം. നിങ്ങൾ നിരവധി വ്യത്യസ്ത css ശൈലികൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, അവ ഒരു പ്രത്യേക ഫയലിൽ സജ്ജീകരിക്കുന്നതാണ് ഉചിതം. നിങ്ങൾക്ക് അവയിൽ പലതും വ്യക്തമാക്കണമെങ്കിൽ, ഇതെല്ലാം html പ്രമാണത്തിൽ നേരിട്ട് വ്യക്തമാക്കാം.

  .ബേസ് (വീതി: 100px; പശ്ചാത്തല നിറം: #000; ഉയരം: 150px; നിറം: #fff; )

  < style type = "text/css" > അടിസ്ഥാനം( വീതി: 100px; പശ്ചാത്തലം - നിറം : #000; ഉയരം: 150px; നിറം : #fff;

  അല്ലെങ്കിൽ ഒരു ടാഗിലേക്ക് പ്രത്യേകമായി ശൈലികൾ ചേർക്കുക; ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ടാഗിനുള്ളിൽ തന്നെ ഒരു സ്റ്റൈൽ ഘടകം ചേർക്കേണ്ടതുണ്ട്. പേജിനായി ശൈലികൾ സജ്ജമാക്കുന്ന ഒരു കണ്ടെയ്‌നറിനുള്ളിൽ ഈ ടാഗ് ഉപയോഗിക്കണം. നിങ്ങൾക്ക് അത്തരം നിരവധി ടാഗുകൾ ഉപയോഗിക്കാം, ഇത് ഒരു പിശക് ആയിരിക്കില്ല.

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

  നിങ്ങൾക്ക് ഒന്നിൽ കൂടുതൽ ഫയലുകൾ ബന്ധിപ്പിക്കാൻ കഴിയും, നിയന്ത്രണങ്ങളൊന്നുമില്ല. അത്തരമൊരു ടാഗ് അടയ്ക്കേണ്ട ആവശ്യമില്ല. എല്ലാം ശരിയായി ചെയ്താൽ, ഒരു പ്രത്യേക ഫയലിൽ നിന്നുള്ള നിർദ്ദിഷ്ട ശൈലികൾ നിങ്ങളുടെ പ്രമാണത്തിലേക്ക് ലോഡ് ചെയ്യും. ഈ ടാഗ് html-ന്റെ അടിസ്ഥാനതത്വങ്ങളിലേക്ക് ചേർക്കാം, അതിന്റെ നിലനിൽപ്പിനെക്കുറിച്ച് മറക്കരുത്. ഫലം ഇതുപോലുള്ള ഒരു ചിത്രമാണ്:

  < link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

  സ്ക്രിപ്റ്റ് ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു ഡോക്യുമെന്റിലേക്ക് വ്യത്യസ്ത സാഹചര്യങ്ങൾ (സ്ക്രിപ്റ്റുകൾ) ബന്ധിപ്പിക്കാൻ കഴിയും. ക്ലോസിംഗ് ടാഗിന്റെ സാന്നിധ്യം ആവശ്യമാണ്. സ്ക്രിപ്റ്റ് തന്നെ പ്രമാണത്തിന്റെ തുടക്കത്തിലോ ഉള്ളിലോ അവസാനത്തിലോ സ്ഥിതിചെയ്യാം.

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

  പേജ് തലക്കെട്ടുകൾ h1 h2 h3

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

  ലേഖനത്തിൽ അത്തരം തലക്കെട്ടുകളുടെ സാന്നിധ്യം സഹായിക്കും പ്രധാന പങ്ക്പേജ് മുന്നോട്ട് കൊണ്ടുപോകുമ്പോൾ. കൂടാതെ, അവയുടെ ഉപയോഗം നിങ്ങൾക്ക് വ്യക്തമായ പേജ് ഘടന, അതിന്റെ ശീർഷകം, ഉപശീർഷകങ്ങൾ, ഹൈലൈറ്റുകൾ, ഉപഖണ്ഡികകൾ മുതലായവ നൽകുന്നു. എല്ലായ്പ്പോഴും അവ ഉപയോഗിക്കുകയും പ്രയോഗത്തിൽ വരുത്തുകയും ചെയ്യുക. WordPress പോലെയുള്ള പല CMS-കളിലും, ടെക്‌സ്‌റ്റ് എഴുതുമ്പോൾ, നിങ്ങൾക്ക് "തലക്കെട്ട് 1", "തലക്കെട്ട് 2", "തലക്കെട്ട് 3" തുടങ്ങിയവ കാണാനാകും. അവരാണ് h1, h2, h3 എന്നിവയ്ക്ക് ഉത്തരവാദികൾ.

  നിങ്ങൾ ഒരു പുതിയ ഖണ്ഡികയിൽ നിന്ന് ബോഡി ടെക്സ്റ്റ് എഴുതുകയാണെങ്കിൽ, നിങ്ങൾ ഒരു ടാഗ് എഴുതുന്നു

  തുടക്കത്തിലും അവസാനത്തിലും അടയ്ക്കുക

  . html-ൽ ഒരു ഖണ്ഡിക അടയാളപ്പെടുത്തുന്നത് ഒരു MS Word ഡോക്യുമെന്റിൽ ഒരു പുതിയ ഖണ്ഡിക സൃഷ്ടിക്കുന്നതിന് തുല്യമാണ്. ഞാൻ ഡോക്യുമെന്റിൽ പുതിയതായി ഒന്നും ചേർത്തിട്ടില്ല. എന്നാൽ ഒരു html ഡോക്യുമെന്റിൽ ഉണ്ടായിരിക്കേണ്ടതെല്ലാം ഇതല്ല. നമുക്ക് മറ്റൊരു ഉദാഹരണം നോക്കാം, വിവരണം കുറച്ച് കഴിഞ്ഞ് വരും.

  HTML പ്രമാണം

  ഈ വാചകം ബോൾഡ് ആയിരിക്കും, ഇതും ഇറ്റാലിക്സിലാണ്

  < ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML പ്രമാണം< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

  അടിസ്ഥാന ഘടകങ്ങൾ തലയും ശീർഷകവും

  

  എല്ലാ ഡോക്യുമെന്റിലും ഒരു തലയും തലക്കെട്ടും അടങ്ങിയിരിക്കുന്നു. ആദ്യ ടാഗിന് തൊട്ടുപിന്നാലെ വരുന്ന ആദ്യത്തേത്. ഈ ടാഗിൽ പേജിനെക്കുറിച്ചുള്ള എല്ലാ വിവരങ്ങളും അടങ്ങിയിരിക്കുന്നു, അതിൽ ഘടകവും അടങ്ങിയിരിക്കുന്നു. ശീർഷകം - പേജിന്റെ ശീർഷകത്തെക്കുറിച്ചുള്ള വിവരങ്ങൾ, മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, പേജിന്റെ ശീർഷകം, അതിന്റെ പേര്. തലക്കെട്ടിലാണ് താങ്കൾ ചൂണ്ടിക്കാണിക്കുന്നത് ശരിയായ പേര്ഒരു തിരയൽ എഞ്ചിനിലൂടെ ഉപയോക്താവ് നിങ്ങളെ തിരയുന്ന പേജ് വളരെ വലുതാണ് പ്രധാനപ്പെട്ട പോയിന്റ്. രണ്ട് ഘടകങ്ങളും തുറന്നതും അടച്ചതുമായിരിക്കണം. ഓരോ ഘടകങ്ങളും ഒരു "/" ചിഹ്നം ഉപയോഗിച്ച് അടച്ചിരിക്കുന്നു. ഫലം ഇതുപോലൊരു ചിത്രമാണ്.

  തലക്കെട്ടും പേജ് ഉള്ളടക്കവും

  < / html >

  നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, സങ്കീർണ്ണമായ ഒന്നും തന്നെയില്ല. എല്ലാ html ഡോക്യുമെന്റിലും ഉണ്ടായിരിക്കേണ്ട ഏറ്റവും അടിസ്ഥാന ടാഗുകൾ ഇതാ. അവ ഓരോന്നും അടയ്ക്കാൻ മറക്കരുത്, അല്ലാത്തപക്ഷം ബ്രൗസറിന് കോഡിന്റെ മുഴുവൻ ചിത്രവും മനസ്സിലാക്കാൻ കഴിയില്ല. നിങ്ങൾ ഇത് എപ്പോഴും അറിയുകയും ഓർമ്മിക്കുകയും വേണം. തുടർന്ന് നിങ്ങൾ വാചകം, ചിത്രങ്ങൾ, വീഡിയോകൾ മുതലായവ ചേർക്കാൻ തുടങ്ങും. എന്നാൽ ഇത് ഇതിനകം മറ്റ് ലേഖനങ്ങളിൽ ഉണ്ടാകും.

  നോട്ട്പാഡ്++ എഡിറ്റർ

  

  കോഡ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ, നോട്ട്പാഡ്++ പ്രോഗ്രാം ഉപയോഗിക്കുക. ഇത് സൌജന്യമാണ്, ഇന്റർനെറ്റിൽ ഇത് കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല. ഏത് കോഡും മനസ്സിലാക്കാൻ വളരെ സൗകര്യപ്രദമാണ്; ഇത് ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകളും സൗകര്യപ്രദമായി പ്രദർശിപ്പിക്കുന്നു. 40-ലധികം പ്രോഗ്രാമിംഗ് ഭാഷകളുടെ വാക്യഘടനയെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നു. നിങ്ങൾ html-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കേണ്ടത്.

  ഒരു സാധാരണ നോട്ട്പാഡിനേക്കാൾ എല്ലാ വിധത്തിലും നോട്ട്പാഡ് മികച്ചതാണ്. പരമാവധി സൗകര്യത്തിനും എളുപ്പത്തിനും പഠനത്തിനും ഈ എഡിറ്റർനിങ്ങൾ ആദ്യം ഇത് നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ഇൻസ്റ്റാൾ ചെയ്യണം. കോഡ് എഴുതുമ്പോൾ നോട്ട്പാഡ് ++ എഡിറ്റർ സൂചനകൾ കാണിക്കുന്നു എന്നതാണ് ഏറ്റവും പ്രധാനപ്പെട്ട നേട്ടവും സൗകര്യവും, ഇത് നിങ്ങളുടെ ജോലിയെ കൂടുതൽ വേഗത്തിലും മികച്ച നിലവാരത്തിലും മാറ്റുന്നു.

  DOCTYPE ഘടകം

  ഓരോ ഡോക്യുമെന്റിലും ഇനിപ്പറയുന്ന ഡോക്‌ടൈപ്പ് ഘടകം അടങ്ങിയിരിക്കണം. എന്തുകൊണ്ട് ഇത് ആവശ്യമാണ്, അതിൽ എന്തായിരിക്കണം. സാധാരണയായി ആളുകൾ ഈ ലൈനുകളിൽ വളരെ താൽപ്പര്യമുള്ളവരല്ല, അവർ അവ അവരുടെ രേഖകളിലേക്ക് പകർത്തി ശാന്തമായി പ്രവർത്തിക്കുന്നു. ഡോക്യുമെന്റിൽ html-ന്റെ ഏത് പതിപ്പാണ് ഉപയോഗിക്കുന്നത്, പേജ് വിവരണം എന്താണ്, എന്ത് എൻകോഡിംഗ് ഉപയോഗിക്കുന്നു, എന്ത് കീവേഡുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, രചയിതാവ് ആരാണ്, പേജിന്റെ പേര് എന്താണ് എന്ന് ഈ ഘടകങ്ങൾ ബ്രൗസറിനോട് പറയുന്നു.

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

  html-ന്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ച് വ്യക്തമായ ഭാഷയിൽ ചുരുക്കത്തിൽ: ഈ വരി അത് ബ്രൗസറിനോട് പറയുന്നു ഈ പ്രമാണം XHTML പതിപ്പ് 1.0 ആണ്, ഇംഗ്ലീഷ് ഉപയോഗിക്കുന്നു, ഈ കുഴപ്പം മുഴുവൻ സ്ഥിതി ചെയ്യുന്നത് ഈ വിലാസത്തിലേക്ക്. അടുത്തതായി, മെറ്റാ ടാഗിൽ ഞങ്ങൾ ഉപയോഗിക്കുന്ന എൻകോഡിംഗിനെ സൂചിപ്പിക്കുന്നു. ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്നത് വിൻഡോസ് 1251 ആണ്.

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

  IN ശീർഷക ടാഗ്ബ്രൗസറിൽ നമ്മൾ കാണുന്ന ഡോക്യുമെന്റിന്റെ പേര് തന്നെ, അതിന്റെ ശീർഷകം വരുന്നു. ഒരുപക്ഷേ മുഴുവൻ പ്രമാണത്തിലെയും ഏറ്റവും പ്രധാനപ്പെട്ട ടാഗ്, പേജിന്റെ പ്രമോഷനിൽ ഏറ്റവും വലിയ സ്വാധീനം ചെലുത്തുന്നു. കൂട്ടിച്ചേർക്കലും രൂപകല്പനയും സംബന്ധിച്ച ലേഖനം ഈ ടാഗ് കൂടുതൽ വിശദമായി വിവരിക്കുന്നു.

  നിങ്ങൾ ഓർമ്മിക്കേണ്ടത് ഈ പാഠം html-ന്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ച്:

• മിക്കവാറും എല്ലാ ടാഗുകളും തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുന്നു;
• പ്രമാണം ടാഗിൽ ആരംഭിക്കുന്നു;
• ടാഗിന്റെ സാന്നിധ്യം;
• ടാഗിന്റെ സാന്നിധ്യം;
• html പ്രമാണത്തിന്റെ ഘടന മായ്‌ക്കുക.

എല്ലാ പ്രധാന പേജുകൾക്കും എപ്പോഴും സൂചിക എന്ന് പേരിടണം. ഇങ്ങനെയാണ് അത് സ്വീകരിക്കുന്നത്, എല്ലാവരും അത് ശീലമാക്കിയിരിക്കുന്നു, ഏത് ഫയൽ എക്സ്റ്റൻഷൻ ആയാലും അത് html അല്ലെങ്കിൽ php ആകാം. എപ്പോഴും അങ്ങനെയാണ് വിളിക്കാറ്.

Webformyself-ൽ നിന്നുള്ള HTML അടിസ്ഥാനങ്ങളെക്കുറിച്ചുള്ള ഒരു വീഡിയോ കാണുക.

ഹൈപ്പർടെക്സ്റ്റ് മാർക്ക്അപ്പ് ലാംഗ്വേജ്, അടിസ്ഥാന ഘടകങ്ങൾഘടനയും. ഇതെല്ലാം എന്റെ ബ്ലോഗിൽ വിവരിക്കാൻ ഞാൻ ശ്രമിക്കും. ഒന്നാമതായി, ഇത് തുടക്കക്കാർക്കായി എഴുതപ്പെടും സഹായകരമായ വിവരങ്ങൾ, ഒരു കോഡ് ഉദാഹരണം നൽകിയിരിക്കുന്നു കൂടാതെ പൂർത്തിയായ പേജിനൊപ്പം ഉദാഹരണം തന്നെ ഡൗൺലോഡ് ചെയ്യാനുള്ള അവസരവും.

HTML അടിസ്ഥാനങ്ങൾ HTML ഭാഷയുടെ അടിസ്ഥാന നിയമങ്ങൾ, HTML പേജിന്റെ ഘടനയുടെ വിവരണം, ബന്ധങ്ങൾ എന്നിവ അടങ്ങിയിരിക്കുന്നു HTML ഘടന HTML ഘടകങ്ങൾ തമ്മിലുള്ള പ്രമാണം.

ഒരു HTML പ്രമാണം ഒരു സാധാരണ ടെക്സ്റ്റ് ഡോക്യുമെന്റാണ്, അത് ഒരു സാധാരണ ടെക്സ്റ്റ് എഡിറ്ററിൽ (നോട്ട്പാഡ്) അല്ലെങ്കിൽ ഒരു പ്രത്യേക കോഡ് ഹൈലൈറ്റിംഗ് (നോട്ട്പാഡ്++,) ഉപയോഗിച്ച് സൃഷ്ടിക്കാൻ കഴിയും. വിഷ്വൽ സ്റ്റുഡിയോകോഡ് മുതലായവ). ഒരു HTML പ്രമാണത്തിന് ഒരു .html വിപുലീകരണമുണ്ട്.

ഒരു HTML പ്രമാണത്തിൽ HTML ഘടകങ്ങളും വാചകവും അടങ്ങിയ ഒരു വൃക്ഷം അടങ്ങിയിരിക്കുന്നു. ഓരോ ഘടകവും ഒരു ആരംഭ (തുറക്കൽ), അവസാന (അടയ്ക്കൽ) ടാഗ് (അപൂർവ്വമായ ഒഴിവാക്കലുകളോടെ) വഴി സോഴ്സ് ഡോക്യുമെന്റിൽ തിരിച്ചറിയുന്നു.

ആരംഭ ടാഗ് മൂലകം എവിടെ തുടങ്ങുന്നു എന്ന് കാണിക്കുന്നു, അവസാന ടാഗ് അത് എവിടെ അവസാനിക്കുന്നു എന്ന് കാണിക്കുന്നു. ടാഗ് നാമത്തിന് മുമ്പ് / ഒരു സ്ലാഷ് ചേർത്താണ് ക്ലോസിംഗ് ടാഗ് രൂപപ്പെടുന്നത്: .... ടാഗുകൾ ആരംഭിക്കുന്നതിനും അടയ്ക്കുന്നതിനും ഇടയിലുള്ളത് ടാഗിന്റെ ഉള്ളടക്കമാണ് - ഉള്ളടക്കം.

ഒറ്റ ടാഗുകൾക്ക് ഉള്ളടക്കം നേരിട്ട് സംഭരിക്കാൻ കഴിയില്ല; ഇത് ഒരു ആട്രിബ്യൂട്ട് മൂല്യമായി എഴുതിയിരിക്കുന്നു, ഉദാഹരണത്തിന്, ഒരു ടാഗ് ടെക്സ്റ്റ് ബട്ടണുള്ള ഒരു ബട്ടൺ സൃഷ്ടിക്കും.

ടാഗുകൾ പരസ്പരം ഉള്ളിൽ സ്ഥാപിക്കാം, ഉദാഹരണത്തിന്,

വാചകം

. നിക്ഷേപം നടത്തുമ്പോൾ, അവ അടച്ചിരിക്കുന്ന ക്രമം നിങ്ങൾ പാലിക്കണം ("matryoshka" തത്വം), ഉദാഹരണത്തിന്, ഇനിപ്പറയുന്ന എൻട്രി തെറ്റായിരിക്കും:

വാചകം

.

HTML ഘടകങ്ങൾക്ക് ആട്രിബ്യൂട്ടുകൾ ഉണ്ടായിരിക്കാം (ആഗോളമായത്, എല്ലാ HTML ഘടകങ്ങളിലും പ്രയോഗിക്കുന്നു, അവയുടേതും). ആട്രിബ്യൂട്ടുകൾ മൂലകത്തിന്റെ ഓപ്പണിംഗ് ടാഗിൽ എഴുതിയിരിക്കുന്നു കൂടാതെ ആട്രിബ്യൂട്ട് name="value" ഫോർമാറ്റിൽ വ്യക്തമാക്കിയ ഒരു പേരും മൂല്യവും അടങ്ങിയിരിക്കുന്നു. ആട്രിബ്യൂട്ടുകൾ സജ്ജീകരിച്ചിരിക്കുന്ന മൂലകത്തിന്റെ സ്വഭാവവും സ്വഭാവവും മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഓരോ ഘടകത്തിനും ഒന്നിലധികം ക്ലാസ് മൂല്യങ്ങളും ഒരു ഐഡി മൂല്യവും നൽകാം. ഒന്നിലധികം ക്ലാസ് മൂല്യങ്ങൾ ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ച് എഴുതിയിരിക്കുന്നു. ക്ലാസ്, ഐഡി മൂല്യങ്ങൾ എന്നിവയിൽ അക്ഷരങ്ങൾ, അക്കങ്ങൾ, ഹൈഫനുകൾ, അടിവരകൾ എന്നിവ മാത്രം അടങ്ങിയിരിക്കണം, കൂടാതെ അക്ഷരങ്ങളോ അക്കങ്ങളോ ഉപയോഗിച്ച് ആരംഭിക്കുകയും വേണം.

ബ്രൗസർ HTML പ്രമാണം കാണുകയും (വ്യാഖ്യാനം ചെയ്യുകയും) അതിന്റെ ഘടന (DOM) നിർമ്മിക്കുകയും ഈ ഫയലിൽ (സ്റ്റൈൽ ഷീറ്റുകൾ, സ്ക്രിപ്റ്റുകൾ) ഉൾപ്പെടുത്തിയിരിക്കുന്ന നിർദ്ദേശങ്ങൾക്ക് അനുസൃതമായി പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. മാർക്ക്അപ്പ് ശരിയാണെങ്കിൽ, ബ്രൗസർ വിൻഡോ HTML ഘടകങ്ങൾ അടങ്ങിയ ഒരു HTML പേജ് പ്രദർശിപ്പിക്കും - തലക്കെട്ടുകൾ, പട്ടികകൾ, ചിത്രങ്ങൾ മുതലായവ.

ബ്രൗസറിലേക്ക് വെബ് പേജ് പൂർണ്ണമായി ലോഡുചെയ്യുന്നതിന് മുമ്പ് വ്യാഖ്യാന പ്രക്രിയ (പാഴ്സിംഗ്) ആരംഭിക്കുന്നു. CSS പ്രോസസ്സ് ചെയ്യുമ്പോഴും സ്റ്റൈൽ ഷീറ്റുകൾ പേജ് ഘടകങ്ങളുമായി ബന്ധപ്പെടുത്തുമ്പോഴും ബ്രൗസറുകൾ തുടക്കം മുതൽ HTML പ്രമാണങ്ങൾ തുടർച്ചയായി പ്രോസസ്സ് ചെയ്യുന്നു.

ഒരു HTML പ്രമാണം രണ്ട് വിഭാഗങ്ങൾ ഉൾക്കൊള്ളുന്നു - തലക്കെട്ട് - ടാഗുകൾക്കിടയിലുള്ള ... ഉള്ളടക്ക ഭാഗം - ടാഗുകൾക്കിടയിൽ ....

വെബ് പേജ് ഘടന 1. HTML പ്രമാണ ഘടന

ഡോക്യുമെന്റ് ടൈപ്പ് ഡിക്ലറേഷൻ ഫയലിൽ അടങ്ങിയിരിക്കുന്ന നിയമങ്ങൾ HTML പിന്തുടരുന്നു (പ്രമാണ തരംനിർവ്വചനം, അല്ലെങ്കിൽ DTD). ഒരു പ്രത്യേക ടാഗുകൾ, ആട്രിബ്യൂട്ടുകൾ, അവയുടെ മൂല്യങ്ങൾ എന്നിവ നിർവചിക്കുന്ന ഒരു XML പ്രമാണമാണ് DTD. HTML തരം. HTML-ന്റെ ഓരോ പതിപ്പിനും അതിന്റേതായ DTD ഉണ്ട്.

ബ്രൗസർ വഴി ഒരു വെബ് പേജ് ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് DOCTYPE ഉത്തരവാദിയാണ്. DOCTYPE HTML പതിപ്പ് (ഉദാ: html) മാത്രമല്ല, ഇന്റർനെറ്റിലെ അനുബന്ധ DTD ഫയലും വ്യക്തമാക്കുന്നു.

...

ടാഗിനുള്ളിലെ ഘടകങ്ങൾ ഒരു ഡോക്യുമെന്റ് ട്രീ ഉണ്ടാക്കുന്നു, ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റ് മോഡൽ, DOM (ഡോക്യുമെന്റ് ഒബ്‌ജക്റ്റ് മോഡൽ). ഈ സാഹചര്യത്തിൽ, മൂലകം മൂല മൂലകമാണ്.


അരി. 1. ഏറ്റവും ലളിതമായ ഘടനവെബ് പേജുകൾ

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

ഒരു പൂർവ്വികൻ മറ്റ് ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്ന ഒരു മൂലകമാണ്. ചിത്രം 1 ൽ, എല്ലാ മൂലകങ്ങളുടെയും പൂർവ്വികൻ ആണ്. അതേ സമയം, മൂലകം അതിൽ അടങ്ങിയിരിക്കുന്ന എല്ലാ ടാഗുകളുടെയും പൂർവ്വികനാണ്: ,

, , തുടങ്ങിയവ.

ഒന്നോ അതിലധികമോ മൂലക തരങ്ങളിൽ സ്ഥിതി ചെയ്യുന്ന ഒരു മൂലകമാണ് ഡിസെൻഡന്റ്. ഉദാഹരണത്തിന്, ഒരു പിൻഗാമിയാണ്, കൂടാതെ മൂലകവും

രണ്ടിന്റെയും പിൻഗാമിയാണ്.

പാരന്റ് എലമെന്റ് - ഒന്നിലധികം മൂലകങ്ങളുമായി ബന്ധപ്പെട്ട ഒരു ഘടകം താഴ്ന്ന നില, അവയ്ക്ക് മുകളിലുള്ള മരത്തിൽ സ്ഥിതി ചെയ്യുന്നു. ചിത്രം 1-ലും. ടാഗ് ചെയ്യുക

മാതാവിന് മാത്രം.

ശിശു ഘടകം- ഉയർന്ന തലത്തിലുള്ള മറ്റൊരു ഘടകത്തിന് നേരിട്ട് കീഴിലുള്ള ഒരു ഘടകം. ചിത്രം 1-ൽ ഘടകങ്ങൾ മാത്രമേയുള്ളൂ, ,

യുടെ മക്കളുമാണ്.

ചോദ്യം ചെയ്യപ്പെടുന്ന ഒന്നിനൊപ്പം പൊതുവായ പാരന്റ് എലമെന്റ് ഉള്ള ഒരു ഘടകമാണ് സഹോദരി ഘടകം. ചിത്രം 1-ൽ ഒരേ നിലയിലുള്ള ഘടകങ്ങൾ, അതുപോലെ ഘടകങ്ങൾ , കൂടാതെ

അവർ പരസ്പരം സഹോദരിമാരാണ്.

1.1 ഘടകം 1.2. ഘടകം

വിഭാഗം ... പേജിനെക്കുറിച്ചുള്ള സാങ്കേതിക വിവരങ്ങൾ അടങ്ങിയിരിക്കുന്നു: ശീർഷകം, വിവരണം, തിരയൽ എഞ്ചിനുകൾക്കുള്ള കീവേഡുകൾ, എൻകോഡിംഗ് മുതലായവ. നിങ്ങൾ അവിടെ നൽകുന്ന വിവരങ്ങൾ ബ്രൗസർ വിൻഡോയിൽ പ്രദർശിപ്പിക്കില്ല, പക്ഷേ പേജ് എങ്ങനെ പ്രോസസ്സ് ചെയ്യണമെന്ന് ബ്രൗസറിനോട് പറയുന്ന വിവരങ്ങൾ അതിൽ അടങ്ങിയിരിക്കുന്നു.

1.2.1. ഘടകം

ആവശ്യമായ സെക്ഷൻ ടാഗ് ആണ്. ഈ ടാഗിനുള്ളിൽ സ്ഥാപിച്ചിരിക്കുന്ന വാചകം വെബ് ബ്രൗസറിന്റെ ടൈറ്റിൽ ബാറിൽ ദൃശ്യമാകുന്നു. ശീർഷകത്തിൽ പൂർണ്ണമായും യോജിക്കുന്നതിന് 60 പ്രതീകങ്ങളിൽ കൂടുതൽ ദൈർഘ്യമുണ്ടാകരുത്. ശീർഷക വാചകത്തിൽ കഴിയുന്നത്ര അടങ്ങിയിരിക്കണം പൂർണ്ണ വിവരണംവെബ് പേജ് ഉള്ളടക്കം.

1.2.2. ഘടകം

അല്ല ആവശ്യമായ ടാഗ്വിഭാഗം ഒരൊറ്റ ടാഗ് ആണ്. അതിന്റെ സഹായത്തോടെ, നിങ്ങൾക്ക് സെർച്ച് എഞ്ചിനുകൾക്കായുള്ള പേജ് ഉള്ളടക്കത്തിന്റെയും കീവേഡുകളുടെയും വിവരണം, HTML പ്രമാണത്തിന്റെ രചയിതാവ്, മറ്റ് മെറ്റാഡാറ്റ പ്രോപ്പർട്ടികൾ എന്നിവ സജ്ജമാക്കാൻ കഴിയും. ഒരു ഘടകത്തിന് ഒന്നിലധികം ഘടകങ്ങൾ അടങ്ങിയിരിക്കാം, കാരണം അവ ഉപയോഗിക്കുന്ന ആട്രിബ്യൂട്ടുകളെ ആശ്രയിച്ച് വ്യത്യസ്ത വിവരങ്ങൾ വഹിക്കുന്നു.

പേജിന്റെ ഉള്ളടക്കത്തിന്റെയും കീവേഡുകളുടെയും വിവരണം ഒരേസമയം നിരവധി ഭാഷകളിൽ വ്യക്തമാക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, റഷ്യൻ, ഇംഗ്ലീഷ് എന്നിവയിൽ:

ഒരു ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് സെർച്ച് എഞ്ചിനുകൾ വഴി ഒരു വെബ് പേജിന്റെ ഇൻഡെക്‌സിംഗ് തടയാനോ അനുവദിക്കാനോ കഴിയും:

ഒരു നിശ്ചിത കാലയളവിനുശേഷം പേജ് സ്വയമേവ റീലോഡ് ചെയ്യുന്നതിന്, നിങ്ങൾ പുതുക്കിയ മൂല്യം ഉപയോഗിക്കേണ്ടതുണ്ട്:

30 സെക്കൻഡിന് ശേഷം പേജ് വീണ്ടും ലോഡുചെയ്യും. സന്ദർശകനെ മറ്റൊരു പേജിലേക്ക് റീഡയറക്‌ട് ചെയ്യുന്നതിന്, നിങ്ങൾ URL പാരാമീറ്ററിൽ URL വ്യക്തമാക്കേണ്ടതുണ്ട്:

പട്ടിക 2. ടാഗ് ആട്രിബ്യൂട്ടുകൾ ആട്രിബ്യൂട്ട്

അക്ഷരഗണം	നിലവിലെ HTML പ്രമാണത്തിനുള്ള പ്രതീക എൻകോഡിംഗ് വ്യക്തമാക്കുന്നു:
ഉള്ളടക്കം	http-equiv അല്ലെങ്കിൽ നെയിം ആട്രിബ്യൂട്ടുമായി ബന്ധപ്പെട്ട മൂല്യം അവയുടെ മൂല്യത്തെ ആശ്രയിച്ച് വ്യക്തമാക്കുന്ന അനിയന്ത്രിതമായ വാചകം അടങ്ങിയിരിക്കുന്നു.
http-equiv	നൽകിയിരിക്കുന്ന വെബ് പേജിലെ ബ്രൗസർ പ്രവർത്തനങ്ങൾ നിയന്ത്രിക്കുന്നു (HTTP തലക്കെട്ടുകൾക്ക് തുല്യം). പേജ് റെൻഡർ ചെയ്യുമ്പോൾ, ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയ നിർദ്ദേശങ്ങൾ ബ്രൗസർ പിന്തുടരും: default-style പേജിൽ ഉപയോഗിക്കാൻ ഇഷ്ടപ്പെട്ട ശൈലി വ്യക്തമാക്കുന്നു. ഉള്ളടക്ക ആട്രിബ്യൂട്ടിൽ CSS സ്റ്റൈൽ ഷീറ്റിനെ പരാമർശിക്കുന്ന ഘടകത്തിന്റെ ഐഡി അല്ലെങ്കിൽ സ്റ്റൈൽ ഷീറ്റ് അടങ്ങിയിരിക്കുന്ന ഘടകത്തിന്റെ ഐഡി ഉണ്ടായിരിക്കണം. refresh എന്നത് പേജ് വീണ്ടും ലോഡുചെയ്യുന്നതിന് മുമ്പുള്ള സമയത്തെ സൂചിപ്പിക്കുന്നു അല്ലെങ്കിൽ ഉള്ളടക്ക ആട്രിബ്യൂട്ടിൽ സമയത്തിന് ശേഷം "url=page_address" എന്ന വരി ഉണ്ടെങ്കിൽ മറ്റൊരു പേജിലേക്ക് റീഡയറക്‌ട് ചെയ്യുന്നതിന് മുമ്പുള്ള സമയത്തെ സൂചിപ്പിക്കുന്നു. യാന്ത്രിക റീബൂട്ട്ഒരു നിശ്ചിത കാലയളവിനു ശേഷമുള്ള പേജുകൾ, ഈ ഉദാഹരണത്തിൽ, 30 സെക്കൻഡിന് ശേഷം: നിങ്ങൾക്ക് സന്ദർശകനെ മറ്റൊരു പേജിലേക്ക് ഉടൻ മാറ്റണമെങ്കിൽ, നിങ്ങൾക്ക് URL പാരാമീറ്ററിൽ URL വ്യക്തമാക്കാം:
പേര്	ഉള്ളടക്ക ആട്രിബ്യൂട്ടിൽ അടങ്ങിയിരിക്കുന്ന മൂല്യവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. ഘടകത്തിന് ഇതിനകം തന്നെ http-equiv , charset , അല്ലെങ്കിൽ itemprop ആട്രിബ്യൂട്ടുകൾ സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ അത് ഉപയോഗിക്കരുത്. ആപ്ലിക്കേഷൻ-നാമം പേജിൽ ഉപയോഗിക്കുന്ന വെബ് ആപ്ലിക്കേഷന്റെ പേര് വ്യക്തമാക്കുന്നു. രചയിതാവ് പ്രമാണത്തിന്റെ രചയിതാവിന്റെ പേര് സ്വതന്ത്ര ഫോർമാറ്റിൽ വ്യക്തമാക്കുന്നു. വിവരണം നിർവചിക്കുന്നു ഹൃസ്വ വിവരണംപേജ് ഉള്ളടക്കത്തിലേക്ക്, ഉദാഹരണത്തിന്: പ്രമാണം സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന സോഫ്റ്റ്‌വെയർ പാക്കേജുകളിലൊന്ന് ജനറേറ്റർ വ്യക്തമാക്കുന്നു, ഉദാഹരണത്തിന്: . കീവേഡുകളിൽ ഒരു ലിസ്റ്റ് അടങ്ങിയിരിക്കുന്നു കീവേഡുകൾ, പേജ് ഉള്ളടക്കവുമായി പൊരുത്തപ്പെടുന്ന കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു, ഉദാഹരണത്തിന്: . പേര് ആട്രിബ്യൂട്ട് എടുക്കാം ഇനിപ്പറയുന്ന മൂല്യങ്ങൾസ്രഷ്‌ടാവ്, ഗൂഗിൾബോട്ട്, പ്രസാധകൻ, റോബോട്ടുകൾ, സ്ലർപ്പ്, വ്യൂപോർട്ട് തുടങ്ങിയ വിപുലീകൃത സ്‌പെസിഫിക്കേഷനിൽ നിന്ന്, ഇവയൊന്നും ഇതുവരെ ഔദ്യോഗികമായി അംഗീകരിച്ചിട്ടില്ലെങ്കിലും.

1.2.3. ഘടകം

ഈ ഘടകത്തിനുള്ളിൽ, പേജിൽ ഉപയോഗിക്കുന്ന ശൈലികൾ സജ്ജീകരിച്ചിരിക്കുന്നു. ഒരു HTML പ്രമാണത്തിൽ ശൈലികൾ സജ്ജമാക്കാൻ, ഉപയോഗിക്കുക CSS ഭാഷ. ഒരു പേജിൽ അത്തരം നിരവധി ഘടകങ്ങൾ ഉണ്ടായിരിക്കാം.

ഈ ഘടകത്തിനുള്ളിൽ നിങ്ങൾക്ക് വെബ് പേജ് ഘടകങ്ങൾക്കും മുഴുവൻ വെബ് പേജിനും ഫോർമാറ്റിംഗ് കോഡ് എഴുതാം.

.പേപ്പർ (വീതി: 200px; ഉയരം: 300px; പശ്ചാത്തല നിറം: #ef4444; നിറം: #666666; )

ഒരു ഘടകത്തിലേക്ക് ഒരു നിർദ്ദിഷ്ട ശൈലി ബന്ധിപ്പിക്കുന്നതിന്, നിങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട് ക്ലാസ് ആട്രിബ്യൂട്ട്(അല്ലെങ്കിൽ ഐഡി) മൂലകത്തിന് ഉചിതമായ പേര് നൽകുക:

...

ശൈലി ആട്രിബ്യൂട്ടിന്റെ മൂല്യമായി മാർക്ക്അപ്പ് ഘടകത്തിലേക്ക് നേരിട്ട് CSS കോഡ് ഉൾച്ചേർക്കാവുന്നതാണ്, ഉദാഹരണത്തിന്:

1.2.4. ഘടകം

മറ്റൊരു രീതി ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ഡോക്യുമെന്റിനായി ശൈലികൾ സജ്ജമാക്കാനും കഴിയും - അവ എഴുതുക പ്രത്യേക ഫയൽഒരു .css വിപുലീകരണത്തോടൊപ്പം, ഉദാഹരണത്തിന് style.css .

ഒരു വെബ് പേജിലേക്ക് ശൈലികളുള്ള ഒരു ഫയലിനെ ബന്ധിപ്പിക്കുന്നതിന് രണ്ട് വഴികളുണ്ട്:
@import url നിർദ്ദേശം വഴി

@ഇറക്കുമതി url(style.css);

ഘടകം ഉപയോഗിച്ച്. മൂലകത്തിന് ഒരു ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല. ഈ ഘടകം തമ്മിലുള്ള ബന്ധത്തെ നിർവചിക്കുന്നു നിലവിലെ പേജ്മറ്റ് രേഖകളും. ഒരു പേജിൽ അത്തരം നിരവധി ഘടകങ്ങൾ ഉണ്ടായിരിക്കാം. എൻട്രി ഉണ്ടായിരിക്കും അടുത്ത കാഴ്ച:

പട്ടിക 4. ടാഗ് ആട്രിബ്യൂട്ടുകൾ ആട്രിബ്യൂട്ട് വിവരണം, സ്വീകരിച്ച മൂല്യം

ക്രോസ്സോറിജിൻ	ഒരു സൈറ്റിൽ നിന്ന് ഒരു ചിത്രം വീണ്ടെടുക്കുമ്പോൾ CORS (മറ്റൊരു ഡൊമെയ്‌നിൽ നിന്ന് ഉറവിടങ്ങൾ ആക്‌സസ് ചെയ്യാൻ ഒരു വെബ് പേജിനെ അനുവദിക്കുന്ന ഒരു ബ്രൗസർ സാങ്കേതികവിദ്യ) ഉപയോഗിക്കേണ്ടതുണ്ടോ എന്ന് സൂചിപ്പിക്കുന്നു. അജ്ഞാത — ഒരു ക്രോസ്-ഡൊമെയ്‌ൻ അഭ്യർത്ഥനയിലേക്ക് ബ്രൗസർ സ്വയമേവ ഒരു ഒറിജിൻ ഹെഡർ ചേർക്കുന്നു, അഭ്യർത്ഥന നടത്തിയ ഡൊമെയ്‌നിന്റെ പേര് അടങ്ങിയിരിക്കുന്നു. CORS ഹെഡർ ആക്‌സസ്-കൺട്രോൾ-അനുവദിക്കുക-ഒറിജിൻ: * (അല്ലെങ്കിൽ ഒരു നക്ഷത്രചിഹ്നത്തിന് പകരം ഡൊമെയ്‌ൻ നാമം) ഉപയോഗിച്ച് സെർവർ പ്രതികരിക്കുന്നില്ലെങ്കിൽ, ചിത്രം ലോഡ് ചെയ്യുന്നത് തടയപ്പെടും. use-credentials - Access-Control-Allow-Credentials: true ഉപയോഗിച്ച് സെർവർ ക്രെഡൻഷ്യലുകൾ നൽകുന്നില്ലെങ്കിൽ, ഇമേജ് ലോഡിംഗ് തടയപ്പെടും.
href	ടാഗിന്റെ പ്രധാന ആട്രിബ്യൂട്ട്, ശൈലികളുള്ള ഫയലിലേക്കുള്ള പാതയാണ് മൂല്യം.
hreflang	പരാമർശിച്ച പ്രമാണത്തിലെ വാചകത്തിന്റെ ഭാഷ നിർണ്ണയിക്കുന്നു.
മാധ്യമങ്ങൾ	ലിങ്ക് ഉറവിടം പ്രയോഗിക്കേണ്ട ഉപകരണത്തിന്റെ തരം വ്യക്തമാക്കുന്നു.
ഒന്നുമില്ല	ഉള്ളടക്കം പരിരക്ഷിക്കുന്നതിന് ഇൻലൈൻ ശൈലികൾ ഉപയോഗിക്കുന്നതിനുള്ള നിയമങ്ങൾ സജ്ജമാക്കുന്ന സെർവറിൽ ക്രമരഹിതമായി ജനറേറ്റുചെയ്ത സ്ട്രിംഗ് വേരിയബിൾ. ആട്രിബ്യൂട്ട് മൂല്യം ഒരു ടെക്സ്റ്റ് സ്ട്രിംഗാണ്.
rel	ആട്രിബ്യൂട്ട് തമ്മിലുള്ള ബന്ധത്തെ നിർവചിക്കുന്നു നിലവിലെ പ്രമാണംലിങ്ക് പോകുന്ന പ്രമാണവും. ഇതര - ഒരേ പ്രമാണത്തിലേക്കുള്ള ഒരു ലിങ്ക്, എന്നാൽ മറ്റൊരു ഫോർമാറ്റിൽ (ഉദാഹരണത്തിന്, അച്ചടിക്കുന്നതിനുള്ള പേജുകൾ, വിവർത്തനം, മിറർ, RSS അല്ലെങ്കിൽ ആറ്റം ഫോർമാറ്റിലുള്ള ഫീഡ്), . ആർക്കൈവുകൾ - ലിങ്ക് ചെയ്‌ത പ്രമാണം ചരിത്രപരമായ താൽപ്പര്യമുള്ളതാണെന്ന് സൂചിപ്പിക്കുന്നു. ലിങ്ക് രേഖകൾ, പ്രമാണങ്ങൾ അല്ലെങ്കിൽ മറ്റ് മെറ്റീരിയലുകളുടെ ഒരു ശേഖരത്തിലേക്ക് ചൂണ്ടിക്കാണിച്ചേക്കാം. രചയിതാവ് പ്രമാണത്തിന്റെ രചയിതാവിനെക്കുറിച്ചുള്ള ഒരു പേജിലേക്കോ രചയിതാവിനെ ബന്ധപ്പെടാനുള്ള വിവരങ്ങളുള്ള ഒരു പേജിലേക്കോ ഉള്ള ലിങ്ക്. ലിങ്ക് ആയ ലേഖനത്തിന്റെ ഏറ്റവും അടുത്ത പൂർവ്വികനെയോ അല്ലെങ്കിൽ പൂർവ്വികർ ഇല്ലെങ്കിൽ മൂലകവുമായി ഏറ്റവും അടുത്ത ബന്ധമുള്ള ലേഖനത്തിന്റെ വിഭാഗത്തെയോ കുറിച്ചുള്ള ഒരു റഫറൻസ് ബുക്ക്മാർക്ക് ചെയ്യുക. ലിങ്ക് ചെയ്‌തിരിക്കുന്ന പേജ് ഈ സൈറ്റിന്റെ ഭാഗമല്ലെന്ന് സൂചിപ്പിക്കാൻ ബാഹ്യ ഉപയോഗിക്കുന്നു. ഡോക്യുമെന്റുകളുടെ ഒരു ശ്രേണിയിലെ ആദ്യ പ്രമാണത്തിലേക്ക് ചൂണ്ടിക്കാണിക്കുന്ന ഒരു ലിങ്ക് ആദ്യം വ്യക്തമാക്കുന്നു. സഹായ രേഖയിലേക്കുള്ള സഹായ ലിങ്ക്. നിലവിലെ പ്രമാണത്തിനായി ഉപയോഗിക്കുന്ന ഐക്കണിലേക്കുള്ള പാത ഐക്കൺ വ്യക്തമാക്കുന്നു. പ്രമാണങ്ങളുടെ ഒരു ശ്രേണിയിലെ അവസാന പ്രമാണത്തിലേക്ക് ചൂണ്ടിക്കാണിക്കുന്ന ഒരു ലിങ്ക് അവസാനം വ്യക്തമാക്കുന്നു. ലൈസൻസ് ഒരു പ്രമാണത്തിന്റെ പകർപ്പവകാശ വിവരങ്ങളിലേക്കുള്ള ഒരു ലിങ്ക്. ഈ പ്രമാണം ഒരു പരമ്പരയുടെ ഭാഗമാണെന്നും ആ പരമ്പരയിലെ അടുത്ത പ്രമാണത്തിലേക്ക് ലിങ്ക് പോകുന്നുവെന്നും അടുത്തത് സൂചിപ്പിക്കുന്നു. nofollow ലിങ്ക് പേജിന്റെ രചയിതാവ് അംഗീകരിച്ചിട്ടില്ലെന്നോ അല്ലെങ്കിൽ ലിങ്ക് വാണിജ്യ സ്വഭാവമുള്ളതാണെന്നോ സൂചിപ്പിക്കുന്നു. ലിങ്ക് പിന്തുടരുമ്പോൾ അഭ്യർത്ഥന ഉറവിടത്തിന്റെ url അടങ്ങിയ ക്ലയന്റ് അഭ്യർത്ഥന തലക്കെട്ട് കൈമാറാൻ പാടില്ല എന്ന് noreferrer സൂചിപ്പിക്കുന്നു. pingback എന്നത് pingback സെർവറിന്റെ വിലാസം വ്യക്തമാക്കുന്നു, അതിലേക്ക് ലിങ്ക് ചെയ്യുന്ന സൈറ്റുകളെ സ്വയമേവ അറിയിക്കാൻ ബ്ലോഗിനെ അനുവദിക്കുന്നു. റഫറൻസ് ചെയ്ത ഫയൽ മുൻകൂട്ടി കാഷെ ചെയ്യണമെന്ന് prefetch വ്യക്തമാക്കുന്നു. ഈ പ്രമാണം ഒരു ശ്രേണിയുടെ ഭാഗമാണെന്നും ലിങ്ക് ആ ശ്രേണിയിലെ മുൻ പ്രമാണത്തിലേക്കാണെന്നും prev സൂചിപ്പിക്കുന്നു. തിരയലിനും അനുബന്ധ ഉറവിടങ്ങൾക്കുമായി പരാമർശിച്ച പ്രമാണത്തിൽ ഒരു ഇന്റർഫേസ് ഉണ്ടെന്ന് തിരയൽ സൂചിപ്പിക്കുന്നു. സാധ്യമെങ്കിൽ, ലിങ്ക് ചെയ്‌ത പ്രമാണം അധിക ബ്രൗസർ സന്ദർഭത്തിൽ കാണിക്കുമെന്ന് സൈഡ്‌ബാർ സൂചിപ്പിക്കുന്നു, കൂടാതെ ചില ബ്രൗസറുകൾ, നിങ്ങൾ ഒരു ഹൈപ്പർലിങ്കിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, നിങ്ങളുടെ ബുക്ക്‌മാർക്ക് ബാറിലേക്ക് ലിങ്ക് ചേർക്കുന്നതിന് ഒരു വിൻഡോ തുറക്കുക. ഈ ഡോക്യുമെന്റിന്റെ സ്റ്റൈൽ ഷീറ്റായി ഉപയോഗിക്കുന്ന ഒരു ബാഹ്യ ഫയലിലേക്കുള്ള ലിങ്കാണ് സ്റ്റൈൽഷീറ്റ്. ഈ പ്രമാണത്തിന് ഹൈപ്പർലിങ്ക് ചെയ്ത ടാഗ് ബാധകമാണെന്ന് ടാഗ് സൂചിപ്പിക്കുന്നു. up എന്നത് പേജ് ഭാഗമാണെന്ന് സൂചിപ്പിക്കുന്നു ശ്രേണിപരമായ ഘടന, ഹൈപ്പർലിങ്ക് കൂടുതൽ കാര്യങ്ങൾ നയിക്കുന്നു ഉയർന്ന തലംഘടനയിലെ വിഭവം.
വലിപ്പങ്ങൾ	വിഷ്വൽ ഡിസ്പ്ലേയ്ക്കുള്ള ഐക്കണുകളുടെ വലുപ്പം വ്യക്തമാക്കുന്നു. വലിപ്പങ്ങളുടെ ആട്രിബ്യൂട്ട് rel="icon" എന്നതിനൊപ്പം മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ, ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ എടുക്കാം: വീതി-ഉയരം - സ്‌പെയ്‌സുകളാൽ വേർതിരിച്ച വലുപ്പങ്ങളുടെ ഒരു ലിസ്റ്റ് നിർവചിക്കുന്നു, ഓരോ വലുപ്പവും ഫോർമാറ്റിൽ ആയിരിക്കണം - വീതി-ഉയരം (ഐക്കൺ അളവുകൾ പിക്സലുകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു), ഉദാഹരണത്തിന്: ; ഏതെങ്കിലും - ഐക്കൺ ഏത് വലുപ്പത്തിലും സ്കെയിൽ ചെയ്യാം.
തലക്കെട്ട്	ഒരു ലിങ്കിന്റെ ശീർഷകം അല്ലെങ്കിൽ ഇതര ശൈലി ഷീറ്റുകളുടെ ഒരു സെറ്റിന്റെ പേര് നിർവചിക്കുന്നു. ആട്രിബ്യൂട്ട് മൂല്യം ടെക്സ്റ്റ് ആണ്.
തരം	പരാമർശിക്കുന്ന പ്രമാണത്തിന്റെ MIME തരം വ്യക്തമാക്കുന്നു. IN ഈ സാഹചര്യത്തിൽഅത് "text/css" മൂല്യം എടുക്കുന്നു.

1.2.5. ഘടകം പട്ടിക 5. ടാഗ് ആട്രിബ്യൂട്ടുകൾ ആട്രിബ്യൂട്ട് വിവരണം, സ്വീകരിച്ച മൂല്യം

അസമന്വിതം	ആട്രിബ്യൂട്ട് സൂചിപ്പിക്കുന്നത്, സ്ക്രിപ്റ്റ് പേജിന്റെ ബാക്കി ഭാഗവുമായി അസമന്വിതമായി പ്രവർത്തിക്കുമെന്ന് (പേജ് ലോഡ് ചെയ്യുന്ന അതേ സമയം തന്നെ സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങും).
അക്ഷരഗണം	പ്രതീക എൻകോഡിംഗ് നിർവചിക്കുന്നു
ക്രോസ്സോറിജിൻ	ബാഹ്യ സ്ക്രിപ്റ്റുകൾ ലോഡുചെയ്യുമ്പോൾ CORS ഉപയോഗിക്കുമോ എന്ന് നിർണ്ണയിക്കുന്നു (src ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച്). അജ്ഞാതൻ - ഒരു ക്രോസ്-ഡൊമെയ്‌ൻ അഭ്യർത്ഥനയിലേക്ക് സ്‌ക്രിപ്റ്റ് ലോഡുചെയ്യുന്നതിന് മുമ്പ്, ആക്‌സസ് പാരാമീറ്ററുകൾ (കുക്കി, X.509 സർട്ടിഫിക്കറ്റ്, ലോഗിൻ/പാസ്‌വേഡ്) കടന്നുപോകാതെ ബ്രൗസർ സ്വയമേവ ഒറിജിൻ ഹെഡർ ചേർക്കുന്നു. അടിസ്ഥാന പ്രാമാണീകരണം HTTP വഴി). സെർവർ പ്രതികരണത്തിൽ Access-Control-Allow-Origin: ഡൊമെയ്ൻ നെയിം ഹെഡർ അടങ്ങിയിട്ടില്ലെങ്കിൽ, സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യപ്പെടില്ല. use-credentials — ഒരു ക്രോസ്-ഡൊമെയ്‌ൻ അഭ്യർത്ഥനയിലേക്ക് സ്‌ക്രിപ്റ്റ് ലോഡുചെയ്യുന്നതിന് മുമ്പ്, ആക്‌സസ് പാരാമീറ്ററുകൾ (കുക്കി, SSL സർട്ടിഫിക്കറ്റ് അല്ലെങ്കിൽ ലോഗിൻ/പാസ്‌വേഡ് ജോഡികൾ) സൂചിപ്പിക്കുന്ന ഒരു ഒറിജിൻ ഹെഡർ ബ്രൗസർ സ്വയമേവ ചേർക്കുന്നു. സെർവർ പ്രതികരണത്തിൽ Access-Control-Allow-Credentials അടങ്ങിയിട്ടില്ലെങ്കിൽ: true header, സ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യപ്പെടില്ല.
മാറ്റിവെക്കുക	ഉപയോക്താവിന്റെ ഉപകരണത്തിൽ ഡോക്യുമെന്റ് റെൻഡർ ചെയ്യുന്നതുവരെ സ്ക്രിപ്റ്റുകളുടെ വ്യാഖ്യാനം വൈകും.
ഒന്നുമില്ല	ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ് (XSS) ആക്രമണങ്ങളിൽ നിന്ന് പരിരക്ഷിക്കുന്നതിലൂടെ സുരക്ഷ നൽകുന്നു. നോൺസ് മൂല്യങ്ങളും ഹാഷുകളും ഉപയോഗിച്ച് ബിൽറ്റ്-ഇൻ സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കുന്നതിനുള്ള നിയമങ്ങൾ സജ്ജമാക്കുന്നു. പേജ് റെൻഡറിംഗ് സമയത്ത്, ബ്രൗസർ ഓരോ ഇൻലൈൻ സ്ക്രിപ്റ്റിനും ഹാഷുകൾ കണക്കാക്കുകയും അവയെ CSP-യിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്നവയുമായി താരതമ്യം ചെയ്യുകയും ചെയ്യുന്നു. "ഒഴികെയുള്ള ഉറവിടങ്ങളിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുന്നു വൈറ്റ് ലിസ്റ്റ്", തടഞ്ഞിരിക്കുന്നു.
src	സ്ക്രിപ്റ്റ് ഉള്ള ഫയലിന്റെ സ്ഥാനം സൂചിപ്പിക്കുന്നു; JavaScript പ്രോഗ്രാം അടങ്ങിയ ഫയലിന്റെ url ആണ് ആട്രിബ്യൂട്ട് മൂല്യം.
തരം	ടാഗിന്റെ ഉള്ളടക്കം രചിക്കാൻ ഉപയോഗിക്കുന്ന സ്ക്രിപ്റ്റ് ഭാഷ പ്രഖ്യാപിക്കാൻ ഉപയോഗിക്കുന്നു.

1.3 ഘടകം

ഈ വിഭാഗത്തിൽ പ്രമാണത്തിന്റെ എല്ലാ ഉള്ളടക്കങ്ങളും അടങ്ങിയിരിക്കുന്നു. മൂലകത്തിന് ലഭ്യമാണ്.

പട്ടിക 5. ടാഗ് ആട്രിബ്യൂട്ടുകൾ ആട്രിബ്യൂട്ട് വിവരണം, സ്വീകരിച്ച മൂല്യം

ഒാഫ്ടർപ്രിന്റ്	ഒരു പേജ് പ്രിന്റിംഗിനായി അയച്ചതിന് ശേഷമോ പ്രിന്റ് വിൻഡോ അടച്ചതിന് ശേഷമോ തീപിടിക്കുന്ന ഒരു ഇവന്റ്.
പ്രിന്റ് മുമ്പ്	ഒരു പേജ് അച്ചടിക്കാൻ അയയ്‌ക്കുന്നതിന് മുമ്പ് തീപിടിക്കുന്ന ഒരു ഇവന്റ്.
കയറ്റുന്നതിന് മുമ്പ്	സന്ദർശകൻ മറ്റൊരു പേജിലേക്ക് പരിവർത്തനം ആരംഭിക്കുമ്പോഴോ "വിൻഡോ അടയ്ക്കുക" ക്ലിക്ക് ചെയ്യുമ്പോഴോ ഇവന്റ് ട്രിഗർ ചെയ്യപ്പെടും. സ്ഥിരീകരണ ഡയലോഗിൽ ഒരു സന്ദേശം പ്രദർശിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഉപയോക്താവിന് നിലവിലെ പേജിൽ തുടരണോ ഉപേക്ഷിക്കണോ എന്ന് അറിയിക്കാൻ.
onhashchange	URL-ന്റെ ഹാഷ് ഭാഗം മാറുമ്പോൾ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും, ഉദാഹരണത്തിന് ഉപയോക്താവ് example.domain/test.aspx#page1 എന്നതിൽ നിന്ന് example.domain/test.aspx#page2 ലേക്ക് പോകുമ്പോൾ.
സന്ദേശം	ഒരു ഇവന്റ് ഉറവിടത്തിലൂടെ ഒരു സന്ദേശം ലഭിക്കുമ്പോൾ ഒരു ഇവന്റ് സംഭവിക്കുന്നു.
ഓഫ്‌ലൈനിൽ	ഇന്റർനെറ്റ് കണക്ഷൻ നഷ്‌ടപ്പെട്ടുവെന്ന് ബ്രൗസർ നിർണ്ണയിക്കുമ്പോൾ ഇവന്റ് ബ്രൗസർ പ്രവർത്തനക്ഷമമാക്കുന്നു.
ഓൺലൈൻ	ഇന്റർനെറ്റ് കണക്ഷൻ പുനഃസ്ഥാപിക്കുമ്പോൾ ബ്രൗസറാണ് ഇവന്റ് ട്രിഗർ ചെയ്യുന്നത്.
onpagehide	ഒരു ലിങ്ക് ക്ലിക്ക് ചെയ്യുക, പേജ് പുതുക്കുക, ഒരു ഫോം പൂരിപ്പിക്കുക തുടങ്ങിയ നാവിഗേഷനിലൂടെ ഉപയോക്താവ് പേജ് വിടുമ്പോൾ ഇവന്റ് സംഭവിക്കുന്നു.
onpageshow	ഓൺലോഡ് ഇവന്റിന് ശേഷം ഉപയോക്താവ് വെബ് പേജിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ഇവന്റ് സംഭവിക്കുന്നു.
ഇറക്കുക	ചില കാരണങ്ങളാൽ പേജ് ലോഡ് ചെയ്യുന്നില്ലെങ്കിലോ ബ്രൗസർ വിൻഡോ അടച്ചിരിക്കുമ്പോഴോ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും.

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

നമുക്ക് തുടങ്ങാം! ആദ്യം, നമുക്ക് കണ്ടെത്താം
HTML - (ഇംഗ്ലീഷിൽ നിന്ന്. H ypert ext M arkup L anguage) ഒരു ഹൈപ്പർടെക്സ്റ്റ് മാർക്ക്അപ്പ് ഭാഷയാണ്. 1991-1992 കാലഘട്ടത്തിൽ ബ്രിട്ടീഷ് ശാസ്ത്രജ്ഞനായ ടിം ബെർണേഴ്‌സ് ലീയാണ് ഇത് ആദ്യമായി വികസിപ്പിച്ചത്. വെബ് പേജുകളിലെ ടെക്‌സ്‌റ്റ്, ചിത്രങ്ങൾ, ടേബിളുകൾ എന്നിവ അടയാളപ്പെടുത്താൻ മാത്രമാണ് HTML ഉദ്ദേശിച്ചത്. ഇപ്പോൾ ജാവാസ്ക്രിപ്റ്റ്, വിബിസ്ക്രിപ്റ്റ് തുടങ്ങിയ പ്രോഗ്രാമിംഗ് ഭാഷകളും ഒരു HTML ഡോക്യുമെന്റിൽ ചേർക്കാവുന്നതാണ്.

HTML ഒരു പ്രോഗ്രാമിംഗ് ഭാഷയല്ല; ഇത് ടെക്സ്റ്റ് ഡോക്യുമെന്റുകൾ അടയാളപ്പെടുത്തുന്നതിന് മാത്രം ഉദ്ദേശിച്ചുള്ളതാണ്.

HTML പഠിക്കാൻ, നിങ്ങൾക്ക് ഒരു ബ്രൗസറും സ്റ്റാൻഡേർഡ് നോട്ട്പാഡും ഉണ്ടായിരിക്കണം അല്ലെങ്കിൽ .
സ്റ്റാൻഡേർഡ് നോട്ട്പാഡ് തുറക്കാൻ, നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ഇനിപ്പറയുന്നവ ചെയ്യുക: “ആരംഭിക്കുക” => “പ്രോഗ്രാമുകൾ” => “ആക്സസറികൾ” => “നോട്ട്പാഡ്” .

HTML കോഡ് (മൈക്രോസോഫ്റ്റ് ഫ്രണ്ട്പേജ്, അഡോബ് ഡ്രീംവീവർ) എഴുതുന്ന ജോലി ലളിതമാക്കുന്ന പ്രോഗ്രാമുകളെക്കുറിച്ച് നിങ്ങൾ കേട്ടിട്ടുണ്ടെങ്കിൽ, അവ ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നില്ല. ഈ ഘട്ടത്തിൽപരിശീലനം. ഒരു സാധാരണ നോട്ട്ബുക്കിലോ ഒരു വാചകത്തിലോ നിങ്ങളുടെ കൈ എഴുതുക നോട്ട്പാഡ് എഡിറ്റർ++, നിങ്ങൾ ഈ കോഴ്‌സ് പൂർത്തിയാക്കുമ്പോൾ, ത്വരിതപ്പെടുത്തലിനായി നിങ്ങൾക്ക് പ്രോഗ്രാമുകൾ ഉപയോഗിക്കാൻ കഴിയും. എന്റെ ബ്ലോഗ് അപ്‌ഡേറ്റുകൾ സബ്‌സ്‌ക്രൈബുചെയ്‌ത് മൈക്രോസോഫ്റ്റ് ഫ്രണ്ട്‌പേജും അഡോബ് ഡ്രീംവീവറും എങ്ങനെ ഉപയോഗിക്കാമെന്ന് വായിക്കുക.

നന്നായി മനസ്സിലാക്കാൻ, ഞാൻ ഒരു ഉദാഹരണം തയ്യാറാക്കിയിട്ടുണ്ട്. ചിത്രം ശ്രദ്ധാപൂർവ്വം നോക്കുക:



വിശദീകരണം.

1). ഏതൊരു HTML പ്രമാണവും ഈ വരിയിൽ ആരംഭിക്കുന്നു:

ഈ ലൈൻ ഉപയോഗിച്ച്, ഞങ്ങളുടെ HTML പ്രമാണം അന്താരാഷ്ട്ര സ്പെസിഫിക്കേഷൻ പതിപ്പ് 4.01-ന് അനുസൃതമാണെന്ന് ബ്രൗസറിനോട് പറയുന്നു. ഈ വരിക്ക് നന്ദി, നിങ്ങളുടെ പേജ് സമാനമായി കാണപ്പെടും.
ഈ വരി ഓർമ്മിക്കേണ്ട ആവശ്യമില്ല; HTML പ്രമാണം ഇത് കൂടാതെ പ്രവർത്തിക്കും. ഇത് എന്താണെന്ന് നിങ്ങൾക്ക് ബോധ്യപ്പെടാൻ വേണ്ടി മാത്രമാണിത്.

2). രേഖയുടെ തുടക്കവും അവസാനവുമാണ്.

3). കൂടാതെ - പ്രമാണത്തിന്റെ തലവൻ. അധിക സേവന ടാഗുകൾ പലപ്പോഴും ഇവിടെ ചേർക്കാറുണ്ട്; ഈ ടാഗുകളിൽ ഒന്ന് . തുടർന്നുള്ള പാഠങ്ങളിൽ നിങ്ങൾ മറ്റ് സേവന ടാഗുകളെക്കുറിച്ച് പഠിക്കും; പരിശീലനത്തിന്റെ ഈ ഘട്ടത്തിൽ, ഈ വിവരങ്ങൾ മതിയാകും.

4). കൂടാതെ - പ്രമാണ ശീർഷകം.
ഈ തലക്കെട്ട് ബ്രൗസറിൽ പ്രദർശിപ്പിക്കും:



തിരയലിൽ ഞാൻ സൂചിക അല്ലെങ്കിൽ ഗൂഗിളിലാണ്.



5). കൂടാതെ - പ്രമാണത്തിന്റെ ബോഡി.
ഡോക്യുമെന്റിന്റെ ഉള്ളടക്കം ഇവിടെയുണ്ട്, ഉദാഹരണത്തിന്, ടെക്‌സ്‌റ്റ്, ചിത്രങ്ങൾ, ടേബിളുകൾ, സംഗീതം, സിനിമകൾ മുതലായവ. ഡോക്യുമെന്റിന്റെ ബോഡിയിലേക്ക് സംഗീതം, വാചകം, ചിത്രങ്ങൾ എന്നിവ എങ്ങനെ ചേർക്കാം എന്നതിനെക്കുറിച്ച് ഇനിപ്പറയുന്ന പാഠങ്ങളിൽ നിങ്ങൾ കൂടുതലറിയും.

കുറിപ്പ്:

"ടാഗ്" എന്ന വാക്ക് നിങ്ങൾ പലപ്പോഴും വായിക്കുകയും കേൾക്കുകയും ചെയ്യും.
ബ്രാക്കറ്റുകൾക്കിടയിലുള്ളതെല്ലാം ടാഗ് ആണ്< >. ഉദാഹരണത്തിന്: , , , ,
,

മുതലായവ - ഇവയെല്ലാം ടാഗുകളാണ്.
ഒരു ബ്രൗസറിൽ പേജ് കാണുമ്പോൾ ടാഗുകൾ ദൃശ്യമാകില്ല, എന്നാൽ ബ്രാക്കറ്റിൽ ഇല്ലാത്തതെല്ലാം കാണുമ്പോൾ ബ്രൗസറിൽ പ്രദർശിപ്പിക്കും.

നിരവധി ടാഗുകൾ ഉണ്ട്, അവയ്ക്ക് വ്യത്യസ്ത ഉദ്ദേശ്യങ്ങളുണ്ട്.

അടയ്‌ക്കേണ്ട ടാഗുകൾ ഉണ്ട്. ഉദാഹരണത്തിന്,
ടാഗ് തുറക്കുക


കൂടാതെ ടാഗ് അടയ്ക്കുന്നത് ഉറപ്പാക്കുക

ഒറ്റ ടാഗുകൾ ഉണ്ട്, ഉദാഹരണത്തിന്, ഇത്
.

വാചകവും ചിത്രങ്ങളും മറ്റ് ടാഗുകളും ഉൾക്കൊള്ളാൻ കഴിയുന്ന ഒരു തരം കണ്ടെയ്‌നറാണ് ടാഗ്...

○ ദയവായി ശ്രദ്ധിക്കുക ശരിയായ ക്രമംടാഗുകൾ തുറക്കുന്നതും അടയ്ക്കുന്നതും:

...

ഞങ്ങൾ ആദ്യം തുറന്ന ടാഗ് അവസാനമായി അടച്ചു, രണ്ടാമത്തേത് അവസാനമാണ്, മുതലായവ.

○ ടാഗുകൾ തുറക്കുന്നതിന്റെയും അടയ്ക്കുന്നതിന്റെയും തെറ്റായ ക്രമത്തിന്റെ ഒരു ഉദാഹരണം ഇതാ. ഈ ഓർഡർ ഉപയോഗിച്ച്, വെബ് പേജിൽ പിശകുകൾ ഉണ്ടായേക്കാം:

...

എന്നതിലാണ് പിശക്.
കോഡ് എഴുതുമ്പോൾ ശ്രദ്ധിക്കുക.



റെഡി കോഡ്.
പൂർത്തിയായ സ്റ്റാൻഡേർഡ് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത് ആവശ്യമായ HTMLവെബ് പേജ് കോഡ്.

പേജ് ശീർഷകം പേജ് ടെക്സ്റ്റ്, പട്ടികകൾ, ചിത്രങ്ങൾ, സംഗീതം, വീഡിയോ.

മുകളിൽ എഴുതിയിരിക്കുന്ന എല്ലാ കാര്യങ്ങളിൽ നിന്നും നിങ്ങൾക്ക് ഒന്നും മനസ്സിലാകുന്നില്ലെങ്കിലും നിരുത്സാഹപ്പെടരുത്. രണ്ടാമത്തെ പാഠത്തിൽ കൂടുതൽ പരിശീലനം ഉണ്ടാകും, നിങ്ങൾക്ക് എല്ലാം സ്വയം എഴുതാനും HTML എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണാനും കഴിയും.

അടുത്ത പാഠത്തിലേക്ക് തുടരുക

ഈ ലേഖനം അങ്ങനെയല്ല സമഗ്രമായ ഗൈഡ് HTML ഡോക്യുമെന്റ് മാർക്ക്അപ്പ് ഭാഷ. ഇത് HTML-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ ഉൾക്കൊള്ളുന്നു - അടിസ്ഥാന തത്വങ്ങൾ, ഈ സാങ്കേതികവിദ്യയുടെ ആശയങ്ങളും നിർവചനങ്ങളും, അതിൽ വൈദഗ്ദ്ധ്യം നേടിയാൽ, നിങ്ങൾക്ക് HTML കോഡിംഗിന്റെ പഠനത്തിൽ എളുപ്പത്തിൽ മുന്നോട്ട് പോകാനാകും.

പാഠം പഠിക്കാൻ, ആവശ്യമായ ഫയലുകൾ ഉപയോഗിച്ച് ആർക്കൈവ് ഡൗൺലോഡ് ചെയ്യുക.

HTML ഒരു ഡോക്യുമെന്റ് മാർക്ക്അപ്പ് ഭാഷയാണ്. ശരിയായ ഉച്ചാരണം HTT ആണ്.

വേഡ് ഡോക്യുമെന്റ് എഡിറ്ററിലോ സമാനമായ ഓഫീസ് ആപ്ലിക്കേഷനുകളിലോ നിങ്ങൾ എപ്പോഴെങ്കിലും പ്രവർത്തിച്ചിട്ടുണ്ടോ? നിങ്ങൾക്കത് ഒരുപക്ഷേ അറിയാമായിരിക്കും ഈ തരംവാചകം എഡിറ്റുചെയ്യാനും ഘടകങ്ങൾ ക്രമീകരിക്കാനും ചിത്രങ്ങൾ ചേർക്കാനും എഡിറ്റർമാർക്ക് സമ്പന്നമായ കഴിവുകളുണ്ട്.

HTML-ലെ ഒരു ലേഖനത്തിൽ വേഡ് പ്രോസസറുകളെ കുറിച്ച് എഴുതുന്നത് എന്തുകൊണ്ട് എന്ന് നിങ്ങൾ ചോദിച്ചേക്കാം? പക്ഷെ എന്തുകൊണ്ട്. നിങ്ങൾ അത് കണ്ടെത്തുകയാണെങ്കിൽ, എന്താണ് ഓഫീസ് എഡിറ്റർ? പ്രമാണങ്ങൾ എഡിറ്റ് ചെയ്യുന്നതിനും പ്രദർശിപ്പിക്കുന്നതിനുമുള്ള ഒരു ആപ്ലിക്കേഷനാണ് ഇത്.

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

ബ്രൗസറിനായുള്ള ഒരു ഡോക്യുമെന്റ് മാർക്ക്അപ്പ് ഭാഷയാണ് HTML. Word ആണ് ഇവിടെ ബ്രൗസർ, പ്രമാണം HTML പേജാണ്. ഇതാണ് അടിസ്ഥാനം HTML സാങ്കേതികവിദ്യകൾ, വെബ് ഡോക്യുമെന്റുകളുടെ മാർക്ക്അപ്പ് ഭാഷയെ പ്രോഗ്രാമിംഗ് ഭാഷകളുമായി ആശയക്കുഴപ്പത്തിലാക്കാതിരിക്കാൻ അവയെക്കുറിച്ച് മനസ്സിലാക്കേണ്ടത് ആവശ്യമാണ്. പേര് സ്വയം സംസാരിക്കുന്നു - HTML ഉപയോഗിച്ച് ഞങ്ങൾ അടയാളപ്പെടുത്തൽ, പേജിൽ എവിടെ എലമെന്റ്, ചിത്രം അല്ലെങ്കിൽ ടെക്സ്റ്റ് കാണിക്കും, ഏത് ക്രമത്തിലാണ് അവ പരസ്പരം അടുത്ത് ദൃശ്യമാകുക.

അതെ, ഓഫീസ് ആപ്ലിക്കേഷനുകളിലെ ടെക്‌സ്‌റ്റ് ലളിതമായി ടൈപ്പുചെയ്യുന്നതിനും ഫോർമാറ്റുചെയ്യുന്നതിനും പ്രോഗ്രാമിംഗുമായി യാതൊരു ബന്ധവുമില്ല. എന്നാൽ നിരീക്ഷകനായ വായനക്കാരൻ ഒരു പ്രധാന വിശദാംശം ശ്രദ്ധിക്കും - ഒരു വേഡ് പ്രോസസറിൽ ഞങ്ങൾ വിഷ്വൽ ബട്ടണുകളും മെനുകളും ഉപയോഗിച്ച് വാചകങ്ങളും ചിത്രങ്ങളും ടൈപ്പുചെയ്യുകയും എഡിറ്റ് ചെയ്യുകയും ഫോർമാറ്റ് ചെയ്യുകയും ചെയ്യുന്നു, പക്ഷേ എന്തുകൊണ്ടാണ് HTML കോഡ് കൈകൊണ്ട് എഴുതുന്നത്? ഒരു ഡോക്യുമെന്റിനായി മാർക്ക്അപ്പ് എഴുതുന്നതിനുള്ള നിരവധി സാങ്കേതിക വിശദാംശങ്ങൾ പഠിക്കുന്നത് എന്തുകൊണ്ട്?

വാസ്തവത്തിൽ, Word-ന് സമാനമായി നിങ്ങൾക്ക് HTML പേജുകൾ സൃഷ്ടിക്കാനും എഡിറ്റുചെയ്യാനും കഴിയുന്ന ധാരാളം എഡിറ്റർമാർ ഉണ്ട്. അതായത്, ഉറവിട HTML കോഡ് ഞങ്ങൾക്കായി മറച്ചിരിക്കുന്നു, ഞങ്ങൾ അതിൽ പ്രവേശിക്കുന്നില്ല.

HTML-നുള്ള ഒരു തരം വാക്ക്. ഈ വിഷ്വൽ എഡിറ്റർമാരെ വിളിക്കുന്നു:

WYSIWYGഎഡിറ്റർമാർ - W hat Y ou S ee I s W hat Y ou G et. അതായത്, ഞങ്ങൾ അത് റഷ്യൻ ഭാഷയിലേക്ക് വിവർത്തനം ചെയ്താൽ: നമ്മൾ കാണുന്നത് നമുക്ക് ലഭിക്കുന്നതാണ്.

ഞാൻ അവരെ "wzivoogies" എന്ന് വിളിക്കുന്നു. ഇത് സ്വരസൂചകമായി തെറ്റാണെങ്കിലും, ഈ കണ്ടുപിടുത്തത്തിന്റെ അർത്ഥശൂന്യത ഇത് വ്യക്തമായി തെളിയിക്കുന്നു. തുടക്കക്കാർ അവരുടെ ആദ്യ വെബ്‌സൈറ്റുകൾ സൃഷ്ടിക്കാൻ പലപ്പോഴും അത്തരം എഡിറ്റർമാരെ ഉപയോഗിക്കുന്നു. തീർച്ചയായും, ഇത് സൗകര്യപ്രദമാണ് - ഒറ്റനോട്ടത്തിൽ, ടാഗുകൾ, ഡിസൈൻ ശൈലികൾ, മറ്റുള്ളവ എന്നിവയെക്കുറിച്ചുള്ള പഠനം നിങ്ങൾ പരിശോധിക്കേണ്ടതില്ല. എഡിറ്റർ തന്നെ നമ്മുടെ പ്രവർത്തനങ്ങളെ HTML കോഡാക്കി മാറ്റുന്നു.

പക്ഷേ, അവർ പറയുന്നതുപോലെ, ഒന്നും സംഭവിക്കുന്നില്ല. കൂടുതൽ വ്യക്തമായി പറഞ്ഞാൽ, ഈ സമീപനത്തിന് വളരെ ഗുരുതരമായ പോരായ്മകളുണ്ട്. HTML പേജുകൾ രൂപകൽപ്പന ചെയ്യാൻ വിഷ്വൽ എഡിറ്ററുകൾ ഉപയോഗിക്കുന്നതിൽ നിന്ന് എല്ലാവരെയും തടയുന്നത് എന്താണ്? ഈ രീതിയിൽ രൂപപ്പെടുന്ന പേജുകളിൽ സാധാരണയായി അനാവശ്യ കോഡുകളും സെമാന്റിക് വീക്ഷണകോണിൽ നിന്ന് ധാരാളം പിശകുകളും ഉണ്ടാകും എന്നതാണ് വസ്തുത. ഇപ്പോൾ, തീർച്ചയായും, പ്രശ്നങ്ങളൊന്നുമില്ല അതിവേഗ ഇന്റർനെറ്റ്കണക്ഷനും 400 കെബിയുടെയും 100 കെബിയുടെയും പേജ് വലുപ്പത്തിലുള്ള വ്യത്യാസം വേഗതയ്ക്ക് കാര്യമായ കാര്യമല്ല, എന്നിരുന്നാലും, ഒപ്റ്റിമൈസ് ചെയ്തതും ശരിയായി എഴുതിയതുമായ HTML കോഡ് നിരവധി പ്രശ്നങ്ങൾ ഇല്ലാതാക്കുകയും നിരവധി ഗുണങ്ങൾ നൽകുകയും ചെയ്യുന്നു, അതായത്:

• യോഗ്യതയുള്ള HTML കോഡിന് നല്ല സ്വാധീനമുണ്ട് തിരയൽ എഞ്ചിൻ ഒപ്റ്റിമൈസേഷൻ, സ്കാനിംഗ് വേഗത തിരയൽ റോബോട്ട്സൈറ്റ്. വുസിവുഗ സൃഷ്ടിക്കുന്ന കിലോബൈറ്റ് കോഡ് സ്വീകാര്യമല്ല, ദോഷകരവുമാണ്;
• WYSIWYG എഡിറ്റർ സൃഷ്ടിച്ച HTML കോഡിന് നിരവധി സെമാന്റിക് പിശകുകൾ ഉണ്ട്. അതായത്, അത്തരം ഒരു എഡിറ്റർ സൃഷ്ടിച്ച ടാഗുകൾ മറ്റ് ആവശ്യങ്ങൾക്കായി ഉപയോഗിക്കുന്നു, അവ ഉപയോഗിക്കേണ്ടയിടത്ത്, ഉദാഹരണത്തിന്, ലിസ്റ്റുകൾ
  , എഡിറ്റർ ഞങ്ങൾക്ക് ആവശ്യമില്ലാത്ത മറ്റൊരു ടാഗ് ജനറേറ്റ് ചെയ്യും. തീർച്ചയായും, എഡിറ്ററെ ആശ്രയിച്ചിരിക്കുന്നു, എന്നാൽ ഇവിടെ ഞങ്ങൾ അർത്ഥമാക്കുന്നത് സമഗ്രമായ പരിഹാരങ്ങൾവെബ്സൈറ്റുകൾ സൃഷ്ടിക്കുന്നതിന്, അല്ല ലളിതമായ എഡിറ്റിംഗ് WYSIWYG ഉപയോഗിച്ച് ഒരു ടെക്സ്റ്റ് ഏരിയയിൽ ടെക്സ്റ്റ്.
  • അനാവശ്യമായ ധാരാളം ടാഗുകൾ ജനറേറ്റുചെയ്യുകയും ഡോക്യുമെന്റ് ഘടന വീർക്കുകയും ചെയ്യുന്നു. അത്തരമൊരു പ്രോഗ്രാമിലെ ഒരു ഘടകം നിങ്ങൾ ആദ്യം വലത്തോട്ടും പിന്നീട് ഇടത്തോട്ടും പിന്നെ മധ്യഭാഗത്തും നീക്കുക - ഓരോ പ്രവർത്തനവും ഒരു അടയാളം അവശേഷിപ്പിക്കുന്നു. യഥാർത്ഥ HTMLകോഡ്. എഡിറ്റർ ഒരു പ്രോഗ്രാമാണ്, അതിന്റെ ഫലമായി നിങ്ങൾക്ക് എന്താണ് ലഭിക്കേണ്ടതെന്ന് അതിന് കൃത്യമായി അറിയാൻ കഴിയില്ല; ബ്രൗസറിലെ പ്രമാണത്തിന്റെ സ്വഭാവത്തിന് സാധ്യമായ എല്ലാ ഓപ്ഷനുകളും കണക്കിലെടുത്ത് ഇത് ടൺ കണക്കിന് കോഡുകൾ സൃഷ്ടിക്കുന്നു.
  • ചട്ടം പോലെ, HTML കോഡിന്റെ ദൃശ്യ രൂപകൽപ്പനയ്ക്കുള്ള എഡിറ്റർമാർ പെട്ടെന്ന് കാലഹരണപ്പെട്ടു. പ്രൊഫഷണലുകളുടെ താൽപ്പര്യക്കുറവ് കാരണം, അവർക്ക് പൊതുവെ പിന്തുണ നഷ്ടപ്പെടുകയും വികസനം നിർത്തുകയും ചെയ്യുന്നു. കൂടാതെ HTML വികസിച്ചുകൊണ്ടിരിക്കുന്നു. വുസിവോഗി ഒഴികെ എല്ലാം വികസിക്കുന്നു. അതനുസരിച്ച്, പുതിയ സവിശേഷതകളും പരിഹാരങ്ങളും ഉപയോഗിക്കുന്ന ശരിയായതും ആധുനികവുമായ കോഡ് സൃഷ്ടിക്കാൻ അവർക്ക് കഴിയില്ല.
  • അത്തരം പദ്ധതികളെ പിന്തുണയ്ക്കുകയും വികസിപ്പിക്കുകയും ചെയ്യുന്നത് സ്വർഗീയ ശിക്ഷയാണ്. പാറ്റേണുകൾ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ചും പുനരുപയോഗംഒരു കോഡ് ഓഫ് സ്പീച്ച് ഉണ്ടാകില്ല.

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

  WYSIWYG എഡിറ്ററുമായി അൽപ്പം ശ്രദ്ധിച്ച ശേഷം, യുവ HTML ഗുരുക്കന്മാർ ഈ വ്യർത്ഥമായ ജോലി ഉപേക്ഷിച്ച് മുന്നോട്ട് പോകുന്നു.

  HTML ഡോക്യുമെന്റ് ഘടന

  ക്ലാസുകൾക്കായി, സബ്ലൈം ടെക്സ്റ്റ് എഡിറ്റർ ഡൗൺലോഡ് ചെയ്ത് ഇൻസ്റ്റാൾ ചെയ്യാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു. HTML പഠിക്കുന്നതിന്റെ പ്രാരംഭ ഘട്ടത്തിൽ നിങ്ങളുടെ മനസ്സിനെ തകർക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ലെങ്കിൽ, HTML ലേഔട്ടിനായി അന്തർനിർമ്മിത വിൻഡോസ് നോട്ട്പാഡ് ഉപയോഗിക്കരുതെന്ന് ഞാൻ വളരെ ശുപാർശ ചെയ്യുന്നു.

  HTML ഡോക്യുമെന്റ് കോഡ് സ്വമേധയാ എഴുതാൻ ഞങ്ങൾ തീരുമാനിച്ചു, അതായത് അത് ടൈപ്പ് ചെയ്യുക. ഒരു HTML ഡോക്യുമെന്റ് ഉണ്ടാക്കുന്ന പ്രക്രിയയാണ് HTML ലേഔട്ട്. സാധാരണക്കാരിലും വിവരമുള്ള സർക്കിളുകളിലും ഇത് ലേഔട്ട് മാത്രമാണ്. ഏതൊരു പ്രമാണത്തിനും ഒരു ഘടനയും നിർമ്മാണത്തിന്റെ ചില നിയമങ്ങളും ഉണ്ട്. കോഡിൽ ഏതെല്ലാം ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്നു, HTML-ന്റെ ഘടന എന്താണ്?

  നമുക്ക് കമ്പ്യൂട്ടറിൽ ഒരു പ്രാരംഭ ടെംപ്ലേറ്റ് സൃഷ്ടിക്കാം - index.html ഫയൽ, ഒരു എഡിറ്റർ ഉപയോഗിച്ച് അത് തുറന്ന് ഇനിപ്പറയുന്ന കോഡ് അതിൽ ഒട്ടിക്കുക:

  ഹെഡർ ഡോക്യുമെന്റ് ബോഡി HTML പ്രമാണങ്ങൾക്ക് .html വിപുലീകരണമുണ്ടെന്ന് ദയവായി ശ്രദ്ധിക്കുക.

  അതിനാൽ, ഉദാഹരണത്തിൽ നിന്ന് ക്രമത്തിൽ.

  - പ്രമാണ തരം (ഡോക്‌ടൈപ്പ്)

  ഈ നിർമ്മാണം എല്ലായ്പ്പോഴും ഡോക്യുമെന്റിന്റെ തുടക്കത്തിൽ സൂചിപ്പിച്ചിരിക്കുന്നതിനാൽ ബ്രൗസർ എന്താണ് ശരിയായി "മനസ്സിലാക്കുന്നത്" HTML പതിപ്പ്ഒരു പ്രമാണം നിർമ്മിക്കുമ്പോൾ ഉപയോഗിക്കുന്നു.

  HTML നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്ന വസ്തുത കാരണം, മറ്റേതൊരു പോലെ ഇതിന് നിരവധി പതിപ്പുകളുണ്ട് സോഫ്റ്റ്വെയർ. നിലവിലുള്ള പതിപ്പ് HTML അഞ്ചാമത്തേതും ഉദാഹരണത്തിൽ നൽകിയിരിക്കുന്ന ഡോക്‌ടൈപ്പ് നിലവിലുള്ളതുമാണ്.

  തത്വത്തിൽ, ഡോക്യുമെന്റ് തരങ്ങൾ പഠിക്കുന്നതിൽ അർത്ഥമില്ല, കാരണം HTML5 പുറത്തിറക്കിയതോടെ ഈ ഡിസൈൻ ഒരു സ്റ്റാൻഡേർഡായി മാറി. നിങ്ങൾ ഒരു വെബ്‌സൈറ്റ് ലേഔട്ട് സൃഷ്‌ടിക്കാൻ തുടങ്ങുമ്പോഴെല്ലാം ഡോക്യുമെന്റിന്റെ തുടക്കത്തിൽ അത് ചേർക്കുക.

  - പ്രമാണത്തിന്റെ തുടക്കം

  ഡോക്‌ടൈപ്പിന് ശേഷം നമ്മൾ ആദ്യം കാണുന്ന ടാഗ് ആണ്.

  HTML ഡോക്യുമെന്റ് മാർക്ക്അപ്പിന്റെ ഘടനാപരമായ യൂണിറ്റാണ് HTML ടാഗ്. ടാഗുകൾ എന്നറിയപ്പെടുന്ന ബിൽഡിംഗ് ബ്ലോക്കുകൾ കൊണ്ടാണ് HTML കോഡ് നിർമ്മിച്ചിരിക്കുന്നത്. ഓരോ ടാഗിനും അതിന്റേതായ പ്രവർത്തനമുണ്ട്, കൂടാതെ HTML മാർക്ക്അപ്പ് ഭാഷ പഠിക്കുന്നത് ആത്യന്തികമായി ഒരു ഡോക്യുമെന്റിലെ ടാഗുകളും അവയുടെ സവിശേഷതകളും പഠിക്കുന്നതിനെക്കുറിച്ചാണ്.

  HTML പഠിക്കുന്നത് ഒറ്റനോട്ടത്തിൽ തോന്നിയേക്കാവുന്നത്ര ബുദ്ധിമുട്ടുള്ള കാര്യമല്ലെന്ന് ഞാൻ ശ്രദ്ധിക്കാൻ ആഗ്രഹിക്കുന്നു. ഡോക്യുമെന്റ് മാർക്ക്അപ്പിൽ ഉപയോഗിക്കുന്ന ടാഗുകൾ പഠിക്കുന്നത് അത്ര എളുപ്പമല്ല. വലിയ സമ്മർദ്ദംതലച്ചോറിൽ.

  അതിനാൽ, ഡോക്യുമെന്റ് മാർക്ക്അപ്പ് ഒരു ടാഗിൽ ആരംഭിച്ച് ഒരു ക്ലോസിംഗ് ടാഗിൽ അവസാനിക്കുന്നു. മറ്റ് ടാഗുകളോ ഘടകങ്ങളോ അടങ്ങിയിരിക്കുന്ന എല്ലാ ടാഗുകളും ഒരു ക്ലോസിംഗ് ടാഗ് ഉപയോഗിച്ച് അടച്ചിരിക്കണം. ഉദാഹരണത്തിന്, , , മുതലായവ.

  ടാഗ് നിർബന്ധമാണ്, കാരണം അതിൽ ഡോക്യുമെന്റിന്റെ മുഴുവൻ ഘടനയും അടങ്ങിയിരിക്കുന്നു, കൂടാതെ മറ്റ് ഘടകങ്ങൾക്കുള്ള ഒരു റാപ്പർ ആണ്.

  ടാഗ് ചെയ്യുക

  അടുത്തതായി, ഞങ്ങൾക്ക് ഇതുവരെ വ്യക്തമല്ലാത്ത മറ്റ് ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്ന ടാഗ് ഞങ്ങൾ കാണുന്നു. മറ്റ് ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്നു - ഇതിനർത്ഥം ഘടകങ്ങൾ അല്ലെങ്കിൽ ടാഗുകൾ നിർമ്മാണത്തിന്റെ ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകൾക്കിടയിലാണെന്നാണ്:

  ഉള്ളടക്കം അല്ലെങ്കിൽ മറ്റ് ടാഗുകൾ

  ഒരു HTML ഡോക്യുമെന്റിന്റെ മെറ്റാ വിവരങ്ങൾ സംഭരിക്കുക എന്നതാണ് ടാഗിന്റെ ഉദ്ദേശ്യം, അതായത്, ഡോക്യുമെന്റിൽ തന്നെ പ്രദർശിപ്പിക്കാത്ത, എന്നാൽ പ്രധാനപ്പെട്ടതും ഡോക്യുമെന്റ് എങ്ങനെ കാണപ്പെടുന്നുവെന്നും എങ്ങനെ പെരുമാറുമെന്നും നിർണ്ണയിക്കുന്നു.
  പ്രമാണത്തിൽ ഈ ടാഗ് ആവശ്യമാണ്.

  ടാഗ് - പ്രമാണ ശീർഷകം

  ബ്രൗസറിലോ ടാബ് ശീർഷകത്തിലോ ദൃശ്യമാകുന്ന വാചക മെറ്റാ വിവരങ്ങൾ ഉൾക്കൊള്ളുന്ന ഒരു ആവശ്യമായ ടാഗാണ് ശീർഷകം. എന്നതായിരിക്കണം ടാഗ്. കൂടാതെ, ഈ ടാഗിലെ ഉള്ളടക്കങ്ങൾ ഉപയോഗിക്കുന്നു സെർച്ച് എഞ്ചിനുകൾതിരയൽ ഫലങ്ങളിൽ പ്രമാണം പ്രദർശിപ്പിക്കുന്നതിന്.

  മെറ്റാ ടാഗ്

  മെറ്റാ ടാഗ് എന്നത് ഒരു പേജിനെക്കുറിച്ചുള്ള ഘടനാപരമായ ഡാറ്റ നൽകാൻ രൂപകൽപ്പന ചെയ്ത ഒരു പ്രത്യേക ടാഗാണ്. മെറ്റാ ടാഗുകളാണ് മിക്കപ്പോഴും ഉപയോഗിക്കുന്നത്. ഒരു HTML പ്രമാണത്തിന്റെ ഘടനയിൽ മെറ്റാ ടാഗുകൾ ആവശ്യമില്ല.

  ഫാവിക്കോൺ

  ഡോക്യുമെന്റിലേക്ക് ഫാവിക്കോൺ ഇമേജുള്ള ഒരു ഫയൽ അറ്റാച്ചുചെയ്യുന്നു. ബ്രൗസർ ടാബിൽ ഡോക്യുമെന്റ് ശീർഷകത്തിന് അടുത്തായി പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒരു മിനിയേച്ചർ ഐക്കണാണ് ഫാവിക്കോൺ. 16 x 16 (അല്ലെങ്കിൽ 32 x 32) പിക്സലുകൾ ഉള്ള ഒരു ഗ്രാഫിക് ഫയലാണ് ഫാവിക്കോൺ. വിവിധ ഫോർമാറ്റുകൾ, png, jpg, ico, gif പോലുള്ളവ. ഐക്കോ ഫോർമാറ്റ് പരമ്പരാഗതമായി ഉപയോഗിക്കുന്നു. ആനിമേറ്റഡ് ഫേവിക്കോണുകളാണ് gif ഫയലുകൾആനിമേഷൻ അടങ്ങിയിരിക്കുന്നു. നിങ്ങൾക്ക് ഒരു ആനിമേറ്റഡ് ഫാവിക്കോൺ കാണാൻ കഴിയും, ഉദാഹരണത്തിന്, VKontakte-ൽ, ഒരു പുതിയ സന്ദേശം വരുമ്പോൾ.

  CSS പ്രമാണ ശൈലികൾ

  ലേക്ക് ബന്ധിപ്പിക്കുന്നു CSS പ്രമാണം HTML സ്റ്റൈലിംഗ് ഫയൽ.

  CSS- കാസ്കേഡിംഗ് HTML പ്രമാണ ശൈലികൾ. ടാഗിൽ സ്ഥിതിചെയ്യുന്ന ഓരോ ടാഗിനും മറ്റ് ഘടകങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ നിറം, വീതി, ഉയരം, സ്ഥാനം എന്നിങ്ങനെയുള്ള ഒരു കൂട്ടം ഗുണങ്ങളുണ്ട്. ഈ പ്രോപ്പർട്ടികൾ എല്ലാം ഒരു ബാഹ്യ ഫയലിലേക്ക് എക്‌സ്‌പോർട്ട് ചെയ്യാവുന്ന CSS ശൈലികളാണ്. ഡിസൈൻ ബാഹ്യ ഫയലുകളെ HTML പ്രമാണത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നു, CSS ശൈലികൾ ഉൾപ്പെടെ.

  കുറിപ്പ്: ഒരു നിർമ്മാണത്തിന്റെ href പ്രോപ്പർട്ടി ബാഹ്യ ഫയലിന്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഫയൽ style.cssഒപ്പം favicon.ico, ഫയലിന്റെ അതേ ഫോൾഡറിൽ സ്ഥിതിചെയ്യുന്നു index.html. ഒരു ക്ലോസിംഗ് ടാഗ് ഇല്ല.

  ടാഗ് ചെയ്യുക

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

  ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഒരു ബാഹ്യ ഫയൽ ബന്ധിപ്പിച്ചിരിക്കുന്നു script.js, പ്രധാന index.html ഫയലിന്റെ അതേ ഫോൾഡറിൽ ഇത് സ്ഥിതിചെയ്യുന്നു.

  അതിനാൽ, സുഹൃത്തുക്കളേ, ടാഗിൽ മിക്കപ്പോഴും ഉപയോഗിക്കുന്ന പ്രധാന ഘടകങ്ങൾ ഞങ്ങൾ പരിശോധിച്ചു. ഈ ഘടകങ്ങൾക്ക് പുറമേ, കൂടുതൽ വ്യക്തവും ഓപ്ഷണലുമായ മറ്റ് നിരവധിയുണ്ട്.

  ശരീരം അല്ലെങ്കിൽ ശരീരം

  ഇവിടെയാണ് ഒരു ഡോക്യുമെന്റിന്റെ HTML ലേഔട്ടിൽ രസകരവും ദൃശ്യപരവുമായ എല്ലാ കാര്യങ്ങളും ആരംഭിക്കുന്നത്.

  പേജിന്റെ ദൃശ്യമായ ഭാഗത്തിന്റെ ലേഔട്ടിലേക്ക് നേരിട്ട് പോകാം. ടാഗിനുള്ളിൽ നമ്മൾ എഴുതുന്നതും ലേഔട്ട് ചെയ്യുന്നതും എല്ലാം ബ്രൗസറിൽ പ്രദർശിപ്പിക്കും. നമുക്ക് നമ്മുടെ ഫയൽ തുറക്കാം index.htmlഎഡിറ്ററിൽ നമ്മൾ എന്താണ് ചെയ്യുന്നതെന്ന് വ്യക്തമായി കാണുന്നതിന് ബ്രൗസറിൽ.

  പ്രമാണം രൂപകൽപ്പന ചെയ്യുന്നതിനും അതിന്റെ പ്രവർത്തനക്ഷമത (ഫോം) നൽകുന്നതിനും ആവശ്യമായ ഏതെങ്കിലും HTML ടാഗുകൾ ടാഗിൽ അടങ്ങിയിരിക്കാം. ഞാൻ ഏറ്റവും കൂടുതൽ ഉപയോഗിക്കുന്ന ടാഗുകളുടെ ഒരു പട്ടിക നൽകുകയും ഓരോന്നും ചുരുക്കമായി വിവരിക്കുകയും ചെയ്യും. എഡിറ്ററിൽ നൽകിയിരിക്കുന്ന ഉദാഹരണങ്ങൾ നിങ്ങൾക്ക് ഉടനടി പ്രവർത്തിപ്പിക്കാൻ കഴിയും.

  ടാഗ് ചെയ്യുക	വിവരണം
  	ഒരു പ്രമാണത്തിൽ ലിങ്കുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ടാഗ്. ഉദാഹരണം: ലിങ്ക് ടെക്സ്റ്റ് href ആട്രിബ്യൂട്ട് ലിങ്ക് ഏത് പ്രമാണത്തിലേക്ക് നയിക്കും എന്ന് വ്യക്തമാക്കുന്നു.
  ,	ടെക്സ്റ്റ് ഉണ്ടാക്കുന്നു ഇറ്റാലിക്സ്അല്ലെങ്കിൽ ബോൾഡ് (ഊന്നിപ്പറഞ്ഞത്). ഉദാഹരണം: ഇറ്റാലിക് ടെക്‌സ്‌റ്റ് ബോൾഡ് (ഊന്നിപ്പറഞ്ഞത്) ടെക്‌സ്‌റ്റ്
  , , , , ,	പ്രമാണ തലക്കെട്ടുകൾ. ആകെ 6 തലത്തിലുള്ള തലക്കെട്ടുകൾ ഉണ്ട്, എന്നാൽ പ്രായോഗികമായി h1 മുതൽ h4 വരെ മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ. പ്രമാണത്തിന്റെ പ്രധാന തലക്കെട്ടായി h1 ടാഗ് ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്‌തിരിക്കുന്ന പ്രമാണത്തിൽ ഒരു തലക്കെട്ട് മാത്രമേ ഉണ്ടാകാവൂ. ഉദാഹരണങ്ങൾ: ഫസ്റ്റ് ലെവൽ ഹെഡിംഗ് രണ്ടാം ലെവൽ ഹെഡിംഗ് മൂന്നാം ലെവൽ ഹെഡിംഗ്... തുടങ്ങിയവ.
  ,	പ്രമാണ ലിസ്റ്റുകൾ. അവ അക്കമിട്ട അല്ലെങ്കിൽ ബുള്ളറ്റുള്ള പട്ടികയാണ്. അത്തരമൊരു പട്ടികയുടെ ഘടകം ടാഗ് ആണ് ഉദാഹരണങ്ങൾ: ഘടകം ബുള്ളറ്റഡ് ലിസ്റ്റ് 1 ബുള്ളറ്റ് ഇനം 2 അക്കമിട്ട ലിസ്റ്റ് ഇനം 1 അക്കമിട്ട ലിസ്റ്റ് ഇനം 2
  	ഖണ്ഡിക. ഈ ടാഗ് മറ്റ് ഖണ്ഡികകളിൽ നിന്ന് വേർതിരിച്ച വാചകത്തിന്റെ ഒരു ഖണ്ഡിക നിർവചിക്കുന്നു. ഈ ടാഗ് അടയ്ക്കാൻ വളരെ ശുപാർശ ചെയ്യുന്നു. ഉദാഹരണം: രൂപഭാവം HTML മാർക്ക്അപ്പ് പ്രധാനമായും നിർണ്ണയിക്കുന്നത് CSS ശൈലികളാണ്. എന്നിരുന്നാലും, ചില വെബ്‌മാസ്റ്റർമാർ ഒരു പ്രോജക്റ്റിന്റെ പ്രാരംഭ ഘട്ടത്തിൽ ശൈലികൾ ഉപയോഗിക്കരുതെന്ന് തിരഞ്ഞെടുക്കുന്നു.
  	ചിത്രം. ഈ ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് HTML മാർക്ക്അപ്പിലേക്ക് ഒരു ചിത്രം ചേർക്കാം. എല്ലാ ഇമേജുകൾക്കും ഇതര വാചകം ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക - "alt" ആട്രിബ്യൂട്ട്. ഈ ടാഗ് സ്വയം അടയ്ക്കുന്നതാണ്. ഉദാഹരണം:
  + +	ഫോമുകളും ഇൻപുട്ട് ഘടകങ്ങളും. സെർവറിലെ സിസ്റ്റത്തിലേക്ക് വിവരങ്ങൾ നൽകാനാണ് ഫോമുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ഉപയോക്താവും സൈറ്റും തമ്മിലുള്ള ഒരുതരം ഫീഡ്ബാക്ക്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് സെർവറിലേക്ക് എന്തെങ്കിലും സന്ദേശം അയയ്‌ക്കേണ്ടിവരുമ്പോൾ ഫോമുകൾ ഉപയോഗിക്കുന്നു. കൂടാതെ, ഫോമുകൾക്ക് മറ്റ് പ്രവർത്തനങ്ങൾ നടത്താൻ കഴിയും, എന്നാൽ സെർവറിലേക്ക് ഡാറ്റ അയയ്ക്കുക എന്നതാണ് പ്രധാന ചുമതല. ഉദാഹരണം - ലളിതമായ രൂപംസൈറ്റ് ഉപയോക്താവ് തന്റെ പേര്, ഇ-മെയിൽ, ചില വാചകങ്ങൾ എന്നിവ സൂചിപ്പിക്കുന്ന ഒരു സന്ദേശം അയയ്ക്കുന്നു: സന്ദേശ വാചകം
  	ഒരു സ്‌ട്രിംഗിനുള്ളിലെ ഒരു സബ്‌സ്‌ട്രിംഗ് നിർവചിക്കുന്നു. CSS ഉപയോഗിച്ച് ഒരു വരിയുടെ ഭാഗം സ്റ്റൈൽ ചെയ്യാൻ ഉപയോഗിക്കുന്നു. ഏറ്റവും കൂടുതൽ ഉപയോഗിക്കുന്ന ടാഗുകളിൽ ഒന്ന്. ഡിസൈൻ ഇല്ലാതെ, അത് ബ്രൗസറിൽ ഒരു തരത്തിലും പ്രകടമാകില്ല. ഉദാഹരണം: HTML പഠിക്കുന്നു, മിക്ക കേസുകളിലും, തുടക്കക്കാർക്ക് ബുദ്ധിമുട്ടുകൾ ഉണ്ടാക്കുന്നില്ല.
  ,	ഒരു ഡോക്യുമെന്റിലേക്ക് വീഡിയോയും ഓഡിയോയും ചേർക്കുന്നതിനാണ് ടാഗുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. ക്ലോസിംഗ് ടാഗ് ആവശ്യമാണ്. ഉദാഹരണങ്ങൾ: ഒരു സാധാരണ ഓഡിയോ/വീഡിയോ പ്ലെയർ പോലെ, പേജ് മീഡിയ ഉള്ളടക്ക നിയന്ത്രണങ്ങൾ പ്രദർശിപ്പിക്കണമെന്ന് നിയന്ത്രണ പാരാമീറ്റർ നമ്മോട് പറയുന്നു.
  	ശരിക്കും ഒരു രാജകീയ ടാഗ്. HTML പേജ് മാർക്ക്അപ്പിൽ ഏറ്റവും കൂടുതൽ ഉപയോഗിക്കുന്നതും ജനപ്രിയവുമായ ടാഗ്. സൈറ്റിലെ ബ്ലോക്കുകൾ നിയന്ത്രിക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു ബ്ലോക്ക് ഘടകമാണിത്. "അതിശയകരമായ" ലേഔട്ട് എന്ന ആശയം പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട് - ഇതിനർത്ഥം സൈറ്റിലെ എല്ലാ ബ്ലോക്കുകളും ഈ ടാഗുകൾ ഉപയോഗിച്ചാണ്. മറ്റ് ടാഗുകൾ അടങ്ങിയിരിക്കാം. ഉദാഹരണം: ഒരു നെസ്റ്റഡ് ബ്ലോക്കിലെ ടെക്സ്റ്റ് എല്ലാ ഘടകങ്ങളും, മിക്ക കേസുകളിലും, പ്രോപ്പർട്ടികൾ കൊണ്ട് അലങ്കരിച്ചിരിക്കുന്നു CSS ശൈലികൾ. ക്ലോസിംഗ് ടാഗ് ആവശ്യമാണ്.
  	ഈ ടാഗ് ലോഡ് ചെയ്യുന്നു ബാഹ്യ പേജ്പ്രമാണത്തിലേക്ക്. ഉദാഹരണം:

  ഞങ്ങൾ എല്ലാ ടാഗുകളും പരിഗണിച്ചിട്ടില്ല, ഈ ഘട്ടത്തിൽ ഇത് ആവശ്യമില്ല. HTML ന്റെ അടിസ്ഥാന ആശയം മനസിലാക്കുക, മുകളിൽ അവതരിപ്പിച്ച ടാഗുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക, തുടർന്ന് മുന്നോട്ട് പോകുക എന്നതാണ് പ്രധാന കാര്യം.

  ഉൾപ്പെടുത്തിയ ഫയലുകളിലെ എല്ലാ പേരുകളും സ്‌പെയ്‌സുകളില്ലാതെ ലാറ്റിൻ അക്ഷരങ്ങളിൽ എഴുതിയിരിക്കണം എന്നത് ശ്രദ്ധിക്കുക.

  ഉദാഹരണത്തിന്, ചെയ്യരുത്:

  പേജ് ഉള്ളടക്കത്തിന്റെ കൂടുതൽ അനുയോജ്യതയ്ക്ക് ഇത് ആവശ്യമാണ്. കൂടാതെ, HTML കോഡ് എഴുതുന്നതിനുള്ള മാനദണ്ഡങ്ങൾ നിർദ്ദേശിക്കുന്നു.

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

  HTML ലേഔട്ടിലെ പ്രായോഗിക അസൈൻമെന്റ്

  നിങ്ങൾ ഇതുവരെ ഉദാഹരണങ്ങളുള്ള ആർക്കൈവ് ഡൗൺലോഡ് ചെയ്‌തിട്ടില്ലെങ്കിൽ, അങ്ങനെ ചെയ്യുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് example.html ഫയൽ നോക്കാം, അത് ആർക്കൈവിലും ഉണ്ടായിരുന്നു.

• ആർക്കൈവ് അൺപാക്ക് ചെയ്‌ത്, പാക്ക് ചെയ്യാത്ത ഫയലുകളുള്ള ഫോൾഡറിൽ ഒരു index.html ഫയൽ സൃഷ്‌ടിക്കുക. സബ്ലൈം ടെക്സ്റ്റ് ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോഗിച്ച് സൃഷ്ടിച്ച ഫയൽ തുറക്കുക;
• ഒരു ഡോക്‌ടൈപ്പ് ഉപയോഗിച്ച് ഒരു പ്രാരംഭ ഡോക്യുമെന്റ് ഘടന സൃഷ്‌ടിക്കുക, ഒരു ടാഗ് അടങ്ങുന്ന ടാഗിന്റെ ഉള്ളടക്കങ്ങൾ എഡിറ്റ് ചെയ്യാൻ തുടരുക;
• readme.txt ഫയൽ തുറന്ന് നിങ്ങൾ സൃഷ്ടിച്ച index.html ഫയലിൽ ഉചിതമായ ജോലികൾ പൂർത്തിയാക്കുക. ഫലം പരിശോധിക്കാൻ, നിങ്ങളുടെ പ്രിയപ്പെട്ട ബ്രൗസറിൽ index.html തുറക്കുക.

ഇത് HTML-ന്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ചുള്ള പാഠം അവസാനിപ്പിക്കുന്നു, അടുത്ത പാഠമായ "CSS അടിസ്ഥാനങ്ങൾ" ൽ ഡോക്യുമെന്റ് ഘടകങ്ങളുടെ ശൈലികൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്നും കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ അറിയാമെന്നും സ്റ്റൈൽ ക്ലാസുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നും ഞങ്ങളുടെ ലേഔട്ട് മനോഹരവും വർണ്ണാഭമായതുമാക്കാമെന്നും പഠിക്കും. .

സുഹൃത്തുക്കളേ, വീണ്ടും കാണാം!