HTML-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ചുള്ള ടാസ്ക്കുകൾ ഇനിപ്പറയുന്ന വിഷയങ്ങളുടെ ഒരു കൂട്ടം ഉപയോഗിച്ച് ജോലി ഏകീകരിക്കാൻ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു: HTML ഘടന, HTML-ലെ അഭിപ്രായങ്ങൾ, അടിസ്ഥാന ടാഗുകൾ, അടിസ്ഥാന HTML ആട്രിബ്യൂട്ടുകൾ. .
HTML-ലെ ഇമേജുകൾക്കുള്ള ടാസ്ക്കുകൾ: HTML-ലേക്ക് ഒരു ചിത്രം ചേർക്കൽ (HTML ഇമേജ് കോഡ്), ഒരു HTML ഇമേജിൻ്റെ വലുപ്പം, ഒരു ചിത്രത്തിൻ്റെ വിന്യാസം... HTML-ൽ.
വിപുലമായ HTML, CSS അസൈൻമെൻ്റുകൾ
എമ്മെറ്റിനൊപ്പം HTML അസൈൻമെൻ്റുകൾ. ദ്രുത ലേഔട്ട്, എംമെറ്റ് കമാൻഡുകൾ (എംമെറ്റ് ചീറ്റ് ഷീറ്റ് എന്ന് വിളിക്കപ്പെടുന്നവ). Emmet പ്ലഗിൻ ഉപയോഗിച്ച് ജോലികൾ പൂർത്തിയാക്കിയ ശേഷം, നിങ്ങളുടെ ലേഔട്ട്/വികസനത്തിൻ്റെ വേഗത ഗണ്യമായി വർദ്ധിക്കും. .
CSS സെലക്ടറുകളിലെ ടാസ്ക്കുകൾ. CSS സെലക്‌ടറുകൾ: css ക്ലാസ് സെലക്‌ടറുകൾ, css ആട്രിബ്യൂട്ട് സെലക്‌ടറുകൾ, css അടുത്തുള്ള സെലക്‌ടറുകൾ, css സന്ദർഭ സെലക്‌ടറുകൾ, ചൈൽഡ് സെലക്‌ടറുകൾ + in css, മുൻഗണനാ സെലക്‌ടറുകൾ.
.
സങ്കീർണ്ണമായ ലേഔട്ടുകൾ മനസ്സിലാക്കുന്നതിന് CSS പൊസിഷനിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് പ്രധാനമാണ്. മനസ്സിലാക്കാനും പ്രവർത്തിക്കാനുമുള്ള ടാസ്ക്കുകൾ ഇതാ: പൊസിഷൻ കേവലം , സ്ഥാനം ആപേക്ഷികം , സ്ഥാനം ഫിക്സഡ് ആൻഡ് പൊസിഷൻ സ്റ്റാറ്റിക് , CSS പ്രോപ്പർട്ടികൾ മുകളിൽ ഇടത് താഴെ വലത് . .
Yandex.Market-ൽ ഉൽപ്പന്നങ്ങൾ അടുക്കുന്നതിന് സമാനമായ ഒരു ഫോം സൃഷ്ടിക്കുക
ഒരു ലേഔട്ട് ഡിസൈനറുടെ ചുമതലകളിൽ ഒന്ന് ക്രോസ്-ബ്രൗസർ കോഡ് എഴുതുക എന്നതാണ്. ഏറ്റവും കൂടുതൽ ബ്രൗസറുകളിൽ പേജുകൾ ഒരേപോലെയോ കഴിയുന്നത്ര സമാനമോ ആയി കാണുന്നതിന് അനുവദിക്കുന്ന കോഡ്. .
ആധുനിക CSS കഴിവുകൾ, ഗ്രേഡിയൻ്റ് ഫിൽ ഉപയോഗിച്ച് വർണ്ണം നൽകിക്കൊണ്ട് പശ്ചാത്തലത്തിൽ മികച്ചത് സൃഷ്ടിക്കാനും പ്രവർത്തിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. CSS ആനിമേഷനായി ഒരു ചെറിയ കൂട്ടം ജോലികൾ.
മീഡിയ അന്വേഷണങ്ങൾക്കുള്ള ചുമതലകൾ (മൊബൈൽ സൈറ്റുകൾ). ഒരു വെബ്സൈറ്റിൻ്റെ മൊബൈൽ പതിപ്പ് സൃഷ്‌ടിക്കുന്നത് വെബ് ഡെവലപ്പർ കഴിവുകളുടെ ഒരു പ്രധാന ഭാഗമാണ്. ടാസ്ക്കുകൾ ഇനിപ്പറയുന്ന വിഷയങ്ങൾക്കായി നീക്കിവച്ചിരിക്കുന്നു: ഒരു മൊബൈൽ വെബ്‌സൈറ്റ് സൃഷ്ടിക്കുക, വെബ്സൈറ്റിൻ്റെ മൊബൈൽ പതിപ്പ് പരിശോധിക്കുക. .
psd ലേഔട്ട് ലേഔട്ടിലെയും CSS ചട്ടക്കൂടുകളിലെയും ടാസ്ക്കുകൾ. ഒരു PSD ലേഔട്ടിനെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു വെബ്സൈറ്റിൻ്റെ ലേഔട്ട് ഒരു വെബ് ഡിസൈനറുടെ ജോലിയുടെ ഏറ്റവും പ്രധാനപ്പെട്ട ഭാഗമാണ്. HTML പാഠങ്ങളിൽ PSD മുതൽ HTML വരെയുള്ള ലേഔട്ടിൻ്റെ അടിസ്ഥാന ഘട്ടങ്ങൾ ഞങ്ങൾ നോക്കുന്നു. അസൈൻമെൻ്റുകൾ.
ഈ രീതിശാസ്ത്രപരമായ സംഭവവികാസങ്ങൾ ഉപയോഗിച്ച് ക്ലാസുകൾ നടത്തുമ്പോൾ, HTML, CSS ഫയലുകൾ സൃഷ്ടിക്കുന്നതിന്, HTML, CSS ഭാഷകൾക്കുള്ള വാക്യഘടന ഹൈലൈറ്റിംഗിനെ പിന്തുണയ്ക്കുന്ന ഒരു സാധാരണ ടെക്സ്റ്റ് എഡിറ്റർ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു, കൂടാതെ മൾട്ടി-പേജ് മോഡിൽ ഒന്നിലധികം ഫയലുകൾക്കൊപ്പം പ്രവർത്തിക്കാനുള്ള കഴിവും ഉൾപ്പെടുന്നു. .
ഉദാഹരണത്തിന്, നോട്ട്പാഡ്++ (notepad-plus-plus.org) വിൻഡോസിന് അനുയോജ്യമാണ്. നോട്ട്പാഡ്++ ടെക്സ്റ്റ് എഡിറ്ററിൽ, നീണ്ട വരികൾ പൊതിയുന്നതിനായി, മെനുവിൽ നിന്ന് വ്യൂ -> ലൈൻ ബ്രേക്ക് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്. Notepad2 (flos-freeware.ch/notepad2.html) ഒരു മികച്ച ടെക്സ്റ്റ് എഡിറ്റർ കൂടിയാണ്. എന്നിരുന്നാലും, ഇത് മൾട്ടി-പേജ് പ്രവർത്തനത്തെ പിന്തുണയ്ക്കുന്നില്ല. അതിൽ ലൈൻ ബ്രേക്കുകൾ സജ്ജീകരിക്കുന്നത് View -> Word Wrap കമാൻഡ് ഉപയോഗിച്ചാണ്.
1. HTML പ്രമാണം. ഖണ്ഡികകൾ, ലൈൻ ബ്രേക്കുകൾ, വിന്യാസം1 HTML പ്രമാണ ഘടനഒരു HTML പ്രമാണത്തിൻ്റെ സോഴ്സ് കോഡിൽ ടാഗുകളും ഉള്ളടക്കവും അടങ്ങിയിരിക്കുന്നു.
ടാഗുകൾക്ക് നിർദ്ദിഷ്‌ട ഗുണങ്ങളുള്ള വിവിധ ആട്രിബ്യൂട്ടുകൾ ഉണ്ടായിരിക്കാം. HTML ഭാഷയുടെ പഴയ പതിപ്പുകളിൽ, ഉള്ളടക്കം രൂപകൽപ്പന ചെയ്യാൻ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ചു: ഫോണ്ട് വലുപ്പവും നിറവും സജ്ജീകരിക്കൽ, ടെക്സ്റ്റ് വിന്യാസം, ഇൻഡൻ്റുകളുടെ ക്രമീകരണം എന്നിവയും മറ്റും. ഇക്കാലത്ത്, ഒരു HTML പ്രമാണത്തിൻ്റെ ഉള്ളടക്കം സാധാരണയായി CSS ഭാഷ ഉപയോഗിച്ചാണ് ഫോർമാറ്റ് ചെയ്യുന്നത്.
ഏതൊരു HTML ഡോക്യുമെൻ്റിലും എപ്പോഴും html, തല, ബോഡി കണ്ടെയ്‌നറുകൾ എന്നിവ ഉൾപ്പെടുന്നു, അവ പരസ്പരം ഉള്ളിൽ ഇനിപ്പറയുന്ന രീതിയിൽ കൂടുകൂട്ടിയിരിക്കുന്നു:
ടാസ്ക് 1. ഒരു ഫയൽ സൃഷ്ടിച്ച് മുകളിൽ കാണിച്ചിരിക്കുന്ന ഘടന നൽകുക. അത് സംരക്ഷിക്കുക.
ഹെഡ് കണ്ടെയ്‌നറിൽ സാധാരണയായി ഒരു ശീർഷക കണ്ടെയ്നർ അടങ്ങിയിരിക്കുന്നു, അതിൻ്റെ ഉള്ളടക്കങ്ങൾ പ്രമാണ വിൻഡോയുടെ ശീർഷകത്തിൽ പ്രദർശിപ്പിക്കും.
ടാസ്ക് 2. പ്രമാണത്തിലേക്ക് ഒരു ശീർഷക കണ്ടെയ്നർ ചേർക്കുക:
കമ്പ്യൂട്ടർ - ഇലക്ട്രോണിക് കമ്പ്യൂട്ടർ
ഫയൽ സംരക്ഷിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ തുറക്കുക. നിങ്ങൾ നൽകിയ ശീർഷക ഉള്ളടക്കം കണ്ടെത്തുക.
ശരീരത്തിലെ ഉള്ളടക്കങ്ങൾ ബ്രൗസർ വിൻഡോയിൽ പ്രദർശിപ്പിക്കും.
ഖണ്ഡികകൾ അടയാളപ്പെടുത്താൻ കണ്ടെയ്നർ ടാഗ് ഉപയോഗിക്കുന്നു. ഒരു പുതിയ ഖണ്ഡിക സൃഷ്ടിക്കാതെ ഒരു പുതിയ വരിയിലേക്ക് പോകാൻ ഒരൊറ്റ ബി ടാഗ് നിങ്ങളെ അനുവദിക്കുന്നു, അതായത്. ഒരു ലൈൻ ബ്രേക്ക് സൃഷ്ടിക്കുന്നു.
ടാസ്ക് 3. ബോഡി കണ്ടെയ്നറിലേക്ക് ഇനിപ്പറയുന്ന ഉള്ളടക്കം ചേർക്കുക:
എഴുപതുകളുടെ തുടക്കത്തിൽ (വലിയ കമ്പ്യൂട്ടറുകളുടെ ക്രമാനുഗതമായ പരിണാമത്തിന് സമാന്തരമായി) പേഴ്സണൽ കമ്പ്യൂട്ടറുകളുടെ ആവിർഭാവം ഇപ്പോൾ ഒരു വിപ്ലവകരമായ അട്ടിമറിയായി കണക്കാക്കപ്പെടുന്നു. മനുഷ്യ സമൂഹത്തിൽ അതിൻ്റെ സ്വാധീനത്തിൻ്റെ തോത് അച്ചടിയുടെ കണ്ടുപിടുത്തത്തിൻ്റെ അനന്തരഫലങ്ങളുമായി താരതമ്യം ചെയ്യുന്നു.
ലോകത്ത് ഇതിനകം ദശലക്ഷക്കണക്കിന് കമ്പ്യൂട്ടറുകളുണ്ട്.
അവരുടെ എണ്ണം ക്രമാനുഗതമായി വർദ്ധിച്ചുകൊണ്ടിരിക്കുന്നു!
സംരക്ഷിക്കുക. നിങ്ങളുടെ ബ്രൗസറിൽ പ്രമാണം പുതുക്കുക. ലൈൻ ബ്രേക്ക് എവിടെയാണെന്ന് നിങ്ങൾ എത്ര ഖണ്ഡികകൾ കാണുന്നുവെന്ന് ശ്രദ്ധിക്കുക.
2 ഖണ്ഡിക വിന്യാസം. പഴയ ശൈലിഖണ്ഡിക വിന്യാസം നിർണ്ണയിക്കുന്നത് ഇടത് (ഇടത്), വലത് (വലത്), മധ്യം (മധ്യഭാഗം), ന്യായീകരിക്കുക (ന്യായീകരിച്ചത്) എന്നീ മൂല്യങ്ങൾ അനുസരിച്ചാണ്. ഈ മൂല്യങ്ങൾ അലൈൻമെൻ്റ് പ്രോപ്പർട്ടിക്ക് നൽകാം, ഇത് നിരവധി ടാഗുകൾക്ക് സാധുവാണ്.
അതിനാൽ, ഉദാഹരണത്തിന്, കേന്ദ്രീകൃത ഖണ്ഡിക വിന്യാസം ഇതുപോലെ സജ്ജമാക്കാം:
ടാസ്ക് 4. നേരത്തെ സൃഷ്ടിച്ച ഖണ്ഡികകൾക്കായി, അലൈൻമെൻ്റ് ന്യായീകരിക്കാനും (ആദ്യ ഖണ്ഡികയ്ക്ക്) വലത്-അലൈൻ ചെയ്യാനും (രണ്ടാമത്തേതിന്) സജ്ജമാക്കുക.
ഈ ലേഖനം HTML ഡോക്യുമെൻ്റ് മാർക്ക്അപ്പ് ഭാഷയിലേക്കുള്ള ഒരു സമഗ്രമായ ഗൈഡ് ആകാൻ ഉദ്ദേശിച്ചുള്ളതല്ല. ഇത് HTML-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ വിവരിക്കുന്നു - ഈ സാങ്കേതികവിദ്യയുടെ അടിസ്ഥാന തത്വങ്ങൾ, ആശയങ്ങൾ, നിർവചനങ്ങൾ, ഇതിൽ വൈദഗ്ദ്ധ്യം നേടിയാൽ, നിങ്ങൾക്ക് HTML കോഡിംഗിൻ്റെ പഠനത്തിൽ എളുപ്പത്തിൽ മുന്നോട്ട് പോകാനാകും.
പാഠം പഠിക്കാൻ, ആവശ്യമായ ഫയലുകൾ ഉപയോഗിച്ച് ആർക്കൈവ് ഡൗൺലോഡ് ചെയ്യുക.
HTML ഒരു ഡോക്യുമെൻ്റ് മാർക്ക്അപ്പ് ഭാഷയാണ്. ശരിയായ ഉച്ചാരണം HTT ആണ്.
നിങ്ങൾ എപ്പോഴെങ്കിലും വേഡ് ഡോക്യുമെൻ്റ് എഡിറ്ററിലോ സമാനമായ ഓഫീസ് ആപ്ലിക്കേഷനുകളിലോ പ്രവർത്തിച്ചിട്ടുണ്ടോ? വാചകം എഡിറ്റുചെയ്യാനും ഘടകങ്ങൾ ക്രമീകരിക്കാനും ചിത്രങ്ങൾ ചേർക്കാനും മറ്റും ഇത്തരം എഡിറ്റർമാർക്ക് സമ്പന്നമായ കഴിവുകളുണ്ടെന്ന് നിങ്ങൾക്കറിയാം.
HTML-ലെ ഒരു ലേഖനത്തിൽ വേഡ് പ്രോസസറുകളെ കുറിച്ച് എഴുതുന്നത് എന്തുകൊണ്ട് എന്ന് നിങ്ങൾ ചോദിച്ചേക്കാം? പക്ഷെ എന്തുകൊണ്ട്. നിങ്ങൾ അത് കണ്ടെത്തുകയാണെങ്കിൽ, എന്താണ് ഓഫീസ് എഡിറ്റർ? പ്രമാണങ്ങൾ എഡിറ്റ് ചെയ്യുന്നതിനും പ്രദർശിപ്പിക്കുന്നതിനുമുള്ള ഒരു ആപ്ലിക്കേഷനാണ് ഇത്.
ഇവിടെ പ്രധാന വാക്ക് പ്രമാണം. അതായത്, ഞങ്ങൾ ചില പ്രോഗ്രാമുകളിൽ ഒരു പ്രമാണം സൃഷ്ടിക്കുകയും എഡിറ്റ് ചെയ്യുകയും കാണുകയും ചെയ്യുന്നു, ഈ സാഹചര്യത്തിൽ - ഒരു ഓഫീസ് എഡിറ്ററിൽ. അത്തരം ഒരു ഡോക്യുമെൻ്റ് ഞങ്ങൾ ഒരു ലളിതമായ ടെക്സ്റ്റ് എഡിറ്ററിൽ തുറന്നാൽ, ഉദാഹരണത്തിന്, നോട്ട്പാഡ്, നമുക്ക് നിരവധി വിചിത്രമായ ചിഹ്നങ്ങളും അടയാളങ്ങളും കാണാം. ചിഹ്നങ്ങളുടെ ഈ കുഴപ്പം മനുഷ്യരാശിക്ക് മനസ്സിലാക്കാൻ കഴിയില്ല, പക്ഷേ കമ്പ്യൂട്ടറുകൾക്ക് മനസ്സിലാക്കാവുന്നതേയുള്ളൂ. ഈ ആന്തരിക ഭാഷയ്ക്ക് നന്ദി, വേഡ് ഡോക്യുമെൻ്റ് എഡിറ്ററിൽ തന്നെ ഒരു പ്രത്യേക ഘടനയും രൂപവും എടുക്കുന്നു, കൂടാതെ പ്രമാണം അതിൻ്റെ എല്ലാ മഹത്വത്തിലും ഫോർമാറ്റ് ചെയ്ത വാചകവും ചിത്രങ്ങളും ഉപയോഗിച്ച് അവയുടെ സ്ഥാനത്ത് ദൃശ്യമാകും.
ബ്രൗസറിനായുള്ള ഒരു ഡോക്യുമെൻ്റ് മാർക്ക്അപ്പ് ഭാഷയാണ് 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 എന്നിങ്ങനെ വിവിധ ഫോർമാറ്റുകൾ ഉണ്ടാകാം. ഐക്കോ ഫോർമാറ്റ് പരമ്പരാഗതമായി ഉപയോഗിക്കുന്നു. ആനിമേഷൻ അടങ്ങിയ ജിഫ് ഫയലുകളാണ് ആനിമേറ്റഡ് ഫാവിക്കോണുകൾ. നിങ്ങൾക്ക് ഒരു ആനിമേറ്റഡ് ഫാവിക്കോൺ കാണാൻ കഴിയും, ഉദാഹരണത്തിന്, VKontakte-ൽ, ഒരു പുതിയ സന്ദേശം വരുമ്പോൾ.
CSS പ്രമാണ ശൈലികൾഡോക്യുമെൻ്റിലേക്ക് HTML സ്റ്റൈലിംഗുള്ള ഒരു CSS ഫയൽ ഉൾപ്പെടുന്നു.
CSS- കാസ്കേഡിംഗ് HTML പ്രമാണ ശൈലികൾ. ടാഗിൽ സ്ഥിതിചെയ്യുന്ന ഓരോ ടാഗിനും മറ്റ് ഘടകങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ നിറം, വീതി, ഉയരം, സ്ഥാനം എന്നിങ്ങനെയുള്ള ഒരു കൂട്ടം ഗുണങ്ങളുണ്ട്. ഈ പ്രോപ്പർട്ടികൾ എല്ലാം ഒരു ബാഹ്യ ഫയലിലേക്ക് എക്‌സ്‌പോർട്ട് ചെയ്യാവുന്ന CSS ശൈലികളാണ്. ഡിസൈൻ ബാഹ്യ ഫയലുകളെ HTML പ്രമാണത്തിലേക്ക് ബന്ധിപ്പിക്കുന്നു, CSS ശൈലികൾ ഉൾപ്പെടെ.
കുറിപ്പ്: ഒരു നിർമ്മാണത്തിൻ്റെ href പ്രോപ്പർട്ടി ബാഹ്യ ഫയലിൻ്റെ സ്ഥാനം വ്യക്തമാക്കുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഫയൽ style.cssഒപ്പം favicon.ico, ഫയലിൻ്റെ അതേ ഫോൾഡറിൽ സ്ഥിതിചെയ്യുന്നു index.html.
ടാഗ് ചെയ്യുകഒരു ക്ലോസിംഗ് ടാഗ് ഇല്ല.
ടാഗിൽ ഒരു ജാവാസ്ക്രിപ്റ്റ് ഫയലിലേക്കുള്ള കോഡോ ലിങ്കോ അടങ്ങിയിരിക്കുന്നു, ഇത് മിക്കപ്പോഴും ടാഗിനുള്ളിൽ ഉപയോഗിക്കുന്നു, എന്നിരുന്നാലും Google-ൻ്റെ പേജ് സ്പീഡ് ഒപ്റ്റിമൈസേഷൻ ടൂൾ ഈ ടാഗ് ക്ലോസിംഗ് ടാഗിന് മുമ്പ് ഒരു ഡോക്യുമെൻ്റിൻ്റെ അവസാനം ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൽ, ഒരു ബാഹ്യ ഫയൽ ബന്ധിപ്പിച്ചിരിക്കുന്നു script.js
, പ്രധാന index.html ഫയലിൻ്റെ അതേ ഫോൾഡറിൽ ഇത് സ്ഥിതിചെയ്യുന്നു.
അതിനാൽ, സുഹൃത്തുക്കളേ, ടാഗിൽ മിക്കപ്പോഴും ഉപയോഗിക്കുന്ന പ്രധാന ഘടകങ്ങൾ ഞങ്ങൾ പരിശോധിച്ചു. ഈ ഘടകങ്ങൾക്ക് പുറമേ, കൂടുതൽ വ്യക്തവും ഓപ്ഷണലുമായ മറ്റ് നിരവധിയുണ്ട്.ശരീരം അഥവാ ശരീരം
ഇവിടെയാണ് ഒരു ഡോക്യുമെൻ്റിൻ്റെ HTML ലേഔട്ടിൽ രസകരവും ദൃശ്യപരവുമായ എല്ലാ കാര്യങ്ങളും ആരംഭിക്കുന്നത്. index.htmlപേജിൻ്റെ ദൃശ്യമായ ഭാഗത്തിൻ്റെ ലേഔട്ടിലേക്ക് നേരിട്ട് പോകാം. ടാഗിനുള്ളിൽ നമ്മൾ എഴുതുന്നതും ലേഔട്ട് ചെയ്യുന്നതും എല്ലാം ബ്രൗസറിൽ പ്രദർശിപ്പിക്കും. നമുക്ക് നമ്മുടെ ഫയൽ തുറക്കാം
എഡിറ്ററിൽ നമ്മൾ എന്താണ് ചെയ്യുന്നതെന്ന് വ്യക്തമായി കാണുന്നതിന് ബ്രൗസറിൽ.
ഞങ്ങൾ എല്ലാ ടാഗുകളും പരിഗണിച്ചിട്ടില്ല, ഈ ഘട്ടത്തിൽ ഇത് ആവശ്യമില്ല. HTML ൻ്റെ അടിസ്ഥാന ആശയം മനസിലാക്കുക, മുകളിൽ അവതരിപ്പിച്ച ടാഗുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക, തുടർന്ന് മുന്നോട്ട് പോകുക എന്നതാണ് പ്രധാന കാര്യം.
ഉൾപ്പെടുത്തിയ ഫയലുകളിലെ എല്ലാ പേരുകളും സ്‌പെയ്‌സുകളില്ലാതെ ലാറ്റിൻ അക്ഷരങ്ങളിൽ എഴുതിയിരിക്കണം എന്നത് ശ്രദ്ധിക്കുക.
ഉദാഹരണത്തിന്, ചെയ്യരുത്:
പേജ് ഉള്ളടക്കത്തിൻ്റെ കൂടുതൽ അനുയോജ്യതയ്ക്ക് ഇത് ആവശ്യമാണ്. കൂടാതെ, HTML കോഡ് എഴുതുന്നതിനുള്ള മാനദണ്ഡങ്ങൾ നിർദ്ദേശിക്കുന്നു.
അതിനാൽ, ഇപ്പോൾ ഞങ്ങൾക്ക് HTML-ൻ്റെ ചില അടിസ്ഥാനകാര്യങ്ങൾ അറിയാം: ഒരു സാധാരണ HTML പ്രമാണത്തിന് എന്ത് ഘടന ഉണ്ടായിരിക്കണം, ഏറ്റവും ജനപ്രിയമായ ചില ടാഗുകൾ ഞങ്ങൾക്കറിയാം, ഏറ്റവും രുചികരമായ ഭാഗത്തേക്ക് ഇറങ്ങാനുള്ള സമയമാണിത് - അതായത്, കുക്കികൾ.
HTML ലേഔട്ടിലെ പ്രായോഗിക അസൈൻമെൻ്റ്നിങ്ങൾ ഇതുവരെ ഉദാഹരണങ്ങളുള്ള ആർക്കൈവ് ഡൗൺലോഡ് ചെയ്‌തിട്ടില്ലെങ്കിൽ, അങ്ങനെ ചെയ്യുക. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് example.html ഫയൽ നോക്കാം, അത് ആർക്കൈവിലും ഉണ്ടായിരുന്നു.
ഇത് HTML-ൻ്റെ അടിസ്ഥാനകാര്യങ്ങളെക്കുറിച്ചുള്ള പാഠം അവസാനിപ്പിക്കുന്നു, അടുത്ത പാഠമായ "CSS അടിസ്ഥാനങ്ങൾ" ൽ ഡോക്യുമെൻ്റ് ഘടകങ്ങളുടെ ശൈലികൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്നും കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ അറിയാമെന്നും സ്റ്റൈൽ ക്ലാസുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നും ഞങ്ങളുടെ ലേഔട്ട് മനോഹരവും വർണ്ണാഭമായതുമാക്കാമെന്നും പഠിക്കും. .
സുഹൃത്തുക്കളേ, വീണ്ടും കാണാം!
