കൺവെൻഷനുകളുടെ HTML കോഡ്

പല വെബ് ഡെവലപ്പർമാർക്കും, HTML കോഡ് സ്പെസിഫിക്കേഷനുകൾ നന്നായി മനസ്സിലാകുന്നില്ല.

2000-2010-ൽ, നിരവധി വെബ് ഡെവലപ്പർമാർ HTML-ൽ നിന്ന് XHTML-ലേക്ക് പരിവർത്തനം ചെയ്തു.

XHTML ഉപയോഗിക്കുന്ന ഡെവലപ്പർമാർ ക്രമേണ നല്ല HTML എഴുത്ത് സവിശേഷതകൾ വികസിപ്പിക്കുന്നു.

കൂടാതെ HTML5-ൽ, താരതമ്യേന നല്ല കോഡ് സ്റ്റാൻഡേർഡുകൾ രൂപീകരിക്കേണ്ടതുണ്ട്, നിരവധി മാർഗ്ഗനിർദ്ദേശങ്ങൾ സ്പെസിഫിക്കേഷന് താഴെ നൽകിയിരിക്കുന്നു.

ശരിയായ ഡോക്യുമെൻ്റ് തരം ഉപയോഗിക്കുക

HTML പ്രമാണത്തിൻ്റെ ആദ്യ വരിയിലെ പ്രമാണ തരത്തിൻ്റെ പ്രഖ്യാപനം:

ഡോക്‌ടൈപ്പ് HTML>

നിങ്ങൾക്ക് ചെറിയക്ഷരം പോലുള്ള മറ്റ് ലേബലുകൾ ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കാം:

ഡോക്‌ടൈപ്പ് HTML>

ചെറിയക്ഷര മൂലകങ്ങളുടെ പേരുകൾ

HTML5 മൂലകത്തിൻ്റെ പേര് വലിയക്ഷരത്തിലോ ചെറിയക്ഷരത്തിലോ ഉപയോഗിക്കാം.

• മിക്സഡ് സ്റ്റൈൽ കേസ് വളരെ മോശമാണ്.
• ചെറിയ അക്ഷരങ്ങൾ എഴുതാൻ എളുപ്പമാണ്.

ഇതൊരു ഖണ്ഡികയാണ്.

വളരെ മോശം:

ഇതൊരു ഖണ്ഡികയാണ്.

ഇതൊരു ഖണ്ഡികയാണ്.

എല്ലാ HTML ഘടകങ്ങളും ഓഫാക്കുക

HTML5-ൽ, എല്ലാ ഘടകങ്ങളും (ഘടകം പോലുള്ളവ) അടയ്ക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നില്ല, എന്നാൽ എല്ലാ ഘടകങ്ങളും ഒരു ക്ലോസിംഗ് ടാഗ് ചേർക്കണമെന്ന് ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു.

ഇതൊരു ഖണ്ഡികയാണ്.

ഇതൊരു ഖണ്ഡികയാണ്.

ഇതൊരു ഖണ്ഡികയാണ്.

ഇതൊരു ഖണ്ഡികയാണ്.

ശൂന്യമായ HTML ഘടകങ്ങൾ അടയ്ക്കുക

HTML5-ൽ, ശൂന്യമായ HTML ഘടകം ഓഫാക്കേണ്ടതില്ല:

നമുക്ക് എഴുതാം:

നിങ്ങൾക്ക് എഴുതാനും കഴിയും:

XML, XHTML, സ്ലാഷ് (/) എന്നിവ ആവശ്യമാണ്.

നിങ്ങളുടെ XML സോഫ്റ്റ്‌വെയർ പേജ് ഉപയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഈ ശൈലി വളരെ നല്ലതാണ്.

ചെറിയക്ഷര ആട്രിബ്യൂട്ട് പേര്

വലിയക്ഷരത്തിലും ചെറിയക്ഷരത്തിലും വസ്തുവിൻ്റെ പേര് ഉപയോഗിക്കാൻ HTML5 നിങ്ങളെ അനുവദിക്കുന്നു.

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

പ്രോപ്പർട്ടി മൂല്യം

HTML5 ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഉദ്ധരിക്കാൻ കഴിയില്ല.

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

ഇനിപ്പറയുന്ന ഉദാഹരണ ആട്രിബ്യൂട്ട് മൂല്യത്തിൽ സ്‌പെയ്‌സുകൾ അടങ്ങിയിരിക്കുന്നു, ഉദ്ധരണികൾ ഉപയോഗിക്കരുത്, ഇത് പ്രവർത്തിച്ചേക്കില്ല:

ഇനിപ്പറയുന്നവ ഇരട്ട ഉദ്ധരണികൾ ഉപയോഗിക്കുന്നു, അത് ശരിയാണ്:

പ്രോപ്പർട്ടികൾ

ഇമേജ് Alt ആട്രിബ്യൂട്ടുകൾ പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. ചിത്രം പ്രദർശിപ്പിക്കാൻ കഴിയുന്നില്ലെങ്കിൽ, അതിന് ഇമേജ് ഡിസ്പ്ലേ മാറ്റിസ്ഥാപിക്കാം.

= "HTML5" ശൈലി = "വീതി: 128px; ഉയരം: 128px">

ചിത്രത്തിൻ്റെ വലുപ്പം നിർണ്ണയിക്കപ്പെടുന്നു, നിർദ്ദിഷ്ട മൂല്യം ലോഡുചെയ്യുന്ന സമയത്ത് റിസർവ് ചെയ്യാം, ഫ്ലിക്കറിംഗ് കുറയ്ക്കുക.

= ശൈലി "HTML5" = "വീതി: 128px; ഉയരം: 128px">

ഇടങ്ങളും തുല്യ ചിഹ്നങ്ങളും

തുല്യ ചിഹ്നത്തിന് മുമ്പും ശേഷവും നിങ്ങൾക്ക് സ്‌പെയ്‌സുകൾ ഉപയോഗിക്കാം.

കോഡിൻ്റെ നീണ്ട വരികൾ ഒഴിവാക്കുക

HTML എഡിറ്റർ ഉപയോഗിച്ച്, ഇടത്തും വലത്തും സ്ക്രോളിംഗ് കോഡ് വിചിത്രമാണ്.

കോഡിൻ്റെ ഓരോ വരിയും കഴിയുന്നത്ര 80 പ്രതീകങ്ങളിൽ താഴെയാണ്.

ശൂന്യമായ വരകളും ഇൻഡൻ്റേഷനും

ഒരു കാരണവശാലും ഒരു ബ്ലാങ്ക് ലൈൻ ചേർക്കരുത്.

ലോജിക്കിൻ്റെ ഓരോ ഫംഗ്ഷണൽ ബ്ലോക്കിനും, ഒരു ശൂന്യമായ വരി ചേർക്കുക, അത് കൂടുതൽ വായിക്കാൻ കഴിയുന്നതാക്കുന്നു.

ഷോർട്ട് കോഡുകൾക്കിടയിൽ അനാവശ്യമായ ശൂന്യമായ ഇൻഡൻ്റ് ലൈനുകൾ ഉപയോഗിക്കരുത്.

അധിക ശൂന്യമായ ലൈനുകളും ഇൻഡൻ്റുകളും:

ഈ ട്യൂട്ടോറിയൽ

HTML

ഈ ട്യൂട്ടോറിയൽ സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.
ഈ പാഠപുസ്തകം, സാങ്കേതികവിദ്യ മാത്രമല്ല, സ്വപ്നത്തിലും പഠിപ്പിക്കുന്നു,
ഈ ട്യൂട്ടോറിയൽ സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.

ഈ ട്യൂട്ടോറിയൽ

ഈ ട്യൂട്ടോറിയലിൽ, സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.
ഈ ട്യൂട്ടോറിയൽ സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.
ഈ ട്യൂട്ടോറിയൽ സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.
ഈ ട്യൂട്ടോറിയൽ സാങ്കേതികവിദ്യ മാത്രമല്ല, ഉറക്കവും പഠിപ്പിക്കുന്നു.

ഉദാഹരണ ഫോം:

പേര്
വിവരണം


എ
വിവരണം എ


ബി
വിവരണം ബി

ഉദാഹരണ പട്ടിക:

ലണ്ടൻ

പാരീസ്

ടോക്കിയോ

നമുക്ക് ഒഴിവാക്കാം ഒപ്പം?

HTML5 സ്റ്റാൻഡേർഡിൽ, ടാഗ് ഒഴിവാക്കാവുന്നതാണ്.

ഇനിപ്പറയുന്ന പ്രമാണങ്ങൾ സാധുവായ HTML5 ആണ്:

ഉദാഹരണം:

ഡോക്‌ടൈപ്പ് HTML>

പേജ് തലക്കെട്ട്

ഇതാണ് തലക്കെട്ട്

ഇതൊരു ഖണ്ഡികയാണ്.

ശ്രമിക്കുക »

എലമെൻ്റ് എന്നത് പ്രമാണത്തിൻ്റെ മൂല ഘടകമാണ്, പേജിനെ വിവരിക്കാൻ ഉപയോഗിക്കുന്ന ഭാഷ:

ഡോക്‌ടൈപ്പ് HTML>

സ്‌ക്രീനുകളിലും സെർച്ച് എഞ്ചിനുകളിലും വായിക്കുന്നത് എളുപ്പമാക്കുന്നതിനുള്ള ഭാഷാ പ്രസ്താവന.

നമുക്ക് DOM അല്ലെങ്കിൽ XML സോഫ്റ്റ്‌വെയർ ക്രാഷുകൾ ഒഴിവാക്കാം.

പഴയ ബ്രൗസറുകളിൽ (IE9) സംഭവിക്കുന്ന പിശക് ഒഴിവാക്കാം.

നമ്മൾ അത് ഒഴിവാക്കട്ടെ?

HTML5 സ്റ്റാൻഡേർഡിൽ, ടാഗ് ഒഴിവാക്കാവുന്നതാണ്.

ഡിഫോൾട്ടിലേക്ക് ഘടകം ചേർക്കുന്നതിന് മുമ്പ് ബ്രൗസർ ഉള്ളടക്കത്തിലേക്ക് ഡിഫോൾട്ട് ചെയ്യുന്നു.

ഉദാഹരണങ്ങൾ

ഡോക്‌ടൈപ്പ് HTML>

പേജ് തലക്കെട്ട്

ഇതാണ് തലക്കെട്ട്

ഇതൊരു ഖണ്ഡികയാണ്.

»മെറ്റാഡാറ്റ ശ്രമിക്കുക

HTML5-ന് ഒരു ഘടകം ആവശ്യമാണ്, അതിൻ്റെ ശീർഷകം പേജിൻ്റെ തീമിനെ വിവരിക്കുന്നു:

ഈ ട്യൂട്ടോറിയലിൽ

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

ഡോക്‌ടൈപ്പ് HTML>



ഈ ട്യൂട്ടോറിയലിൽ

പലപ്പോഴും, ചില HTML കോഡിംഗ് സ്റ്റാൻഡേർഡുകൾ നിലവിലുണ്ടെന്ന് വെബ് ഡെവലപ്പർമാർക്ക് പോലും അറിയില്ല. എന്നിരുന്നാലും, 2000-നും 2010-നും ഇടയിൽ, പല വെബ് ഡെവലപ്പർമാരും HTML-ൽ നിന്ന് XHTML-ലേക്ക് മാറി. അതേ സമയം, സാധുവായതും "നന്നായി രൂപപ്പെടുത്തിയതുമായ" കോഡ് എഴുതാൻ XHTML ഡെവലപ്പർമാരെ നിർബന്ധിച്ചു. HTML5, കോഡ് മൂല്യനിർണ്ണയത്തിൻ്റെ കാര്യത്തിൽ, ചില മന്ദതകൾ അനുവദിക്കുന്നു.

എന്നിരുന്നാലും, ശൈലിയിലുള്ള സ്ഥിരത മറ്റുള്ളവർക്ക് നിങ്ങളുടെ HTML കോഡ് മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കും.

ഒരുപക്ഷേ എക്‌സ്എംഎൽ ഡാറ്റ റീഡറുകൾ പോലെയുള്ള പ്രോഗ്രാമുകൾ നിങ്ങളുടെ HTML കോഡ് വായിക്കേണ്ടതുണ്ട്. അതിനാൽ, നന്നായി രൂപപ്പെടുത്തിയ, XHTML പോലുള്ള വാക്യഘടന ഉപയോഗിക്കുന്നത് ന്യായമായ സമീപനമാണ്.

നിങ്ങളുടെ കോഡ് വൃത്തിയുള്ളതും വൃത്തിയുള്ളതും നന്നായി രൂപപ്പെടുത്തിയതുമാണെന്ന് എല്ലായ്പ്പോഴും ഉറപ്പാക്കുക.

ശരിയായ ഡോക്യുമെൻ്റ് തരം ഉപയോഗിക്കുക

ആദ്യ വരിയിൽ എല്ലായ്പ്പോഴും പ്രമാണ തരം പ്രഖ്യാപിക്കുക:

ചെറിയക്ഷര ടാഗുകളുമായി സ്ഥിരത നിലനിർത്താൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഡോക്യുമെൻ്റ് തരം നിർവചനം ഉപയോഗിക്കാം:

മൂലകങ്ങളുടെ പേരുകൾ ചെറിയ അക്ഷരങ്ങളിൽ എഴുതുക

മൂലകങ്ങളുടെ പേരുകളിൽ വലിയക്ഷരങ്ങളും ചെറിയക്ഷരങ്ങളും HTML5 അനുവദിക്കുന്നു. എന്നിരുന്നാലും, എപ്പോഴും ചെറിയ അക്ഷരങ്ങൾ മാത്രം ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഇനിപ്പറയുന്ന പരിഗണനകളാൽ ഇത് വിശദീകരിക്കുന്നു:

• ടാഗ് നാമങ്ങളിൽ വലിയക്ഷരങ്ങളും ചെറിയ അക്ഷരങ്ങളും കലർത്തുന്നത് മോശം ശീലമായി കണക്കാക്കപ്പെടുന്നു

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

വളരെ മോശം:

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

എല്ലാ HTML ഘടകങ്ങളും അടയ്‌ക്കുക

HTML5-ൽ, നിങ്ങൾ എല്ലാ ഘടകങ്ങളും അടയ്ക്കേണ്ടതില്ല (ഉദാഹരണത്തിന്, ഘടകം

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

ശൂന്യമായ HTML ഘടകങ്ങൾ അടയ്ക്കുക

HTML5-ൽ, ശൂന്യമായ ഘടകങ്ങൾ അടയ്ക്കണോ വേണ്ടയോ എന്നത് വെബ് ഡെവലപ്പറുടെ ആഗ്രഹത്തെ ആശ്രയിച്ചിരിക്കുന്നു.

സ്വീകാര്യമായത്:

സ്വീകാര്യവും:

എന്നിരുന്നാലും, XHTML, XML എന്നിവയിൽ ട്രെയിലിംഗ് സ്ലാഷ് (/) ആവശ്യമാണ്.

XML ആപ്ലിക്കേഷനുകൾ നിങ്ങളുടെ വെബ് പേജ് ആക്സസ് ചെയ്യുമെന്ന് പ്രതീക്ഷിക്കുന്നുവെങ്കിൽ, ശൂന്യമായ HTML ഘടകങ്ങളിൽ ഒരു ട്രെയിലിംഗ് സ്ലാഷ് ഉപയോഗിക്കുന്നതാണ് നല്ലത്!

ആട്രിബ്യൂട്ട് പേരുകൾക്കായി ചെറിയ അക്ഷരങ്ങൾ ഉപയോഗിക്കുക

HTML5-ൽ, ആട്രിബ്യൂട്ട് പേരുകൾ എഴുതുമ്പോൾ നിങ്ങൾക്ക് വലിയക്ഷരങ്ങളും ചെറിയക്ഷരങ്ങളും മിക്സ് ചെയ്യാം.

• ആട്രിബ്യൂട്ട് നാമങ്ങളിൽ വലിയക്ഷരങ്ങളും ചെറിയ അക്ഷരങ്ങളും കലർത്തുന്നത് മോശം സമ്പ്രദായമായി കണക്കാക്കപ്പെടുന്നു
• ഡെവലപ്പർമാർ സാധാരണയായി ചെറിയ അക്ഷരങ്ങൾ ഉപയോഗിക്കുന്നു (XHTML പോലെ)
• ചെറിയ അക്ഷരങ്ങൾ കൂടുതൽ വൃത്തിയുള്ളതായി തോന്നുന്നു
• ചെറിയക്ഷരം എഴുതാൻ എളുപ്പമാണ്

ഉദ്ധരണികളിൽ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഉൾപ്പെടുത്തുക

ഉദ്ധരണികളില്ലാതെ ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ എഴുതാൻ HTML5 അനുവദിക്കുന്നു. എന്നിരുന്നാലും, ഉദ്ധരണികളിൽ എല്ലായ്പ്പോഴും ആട്രിബ്യൂട്ട് മൂല്യങ്ങൾ ഉൾപ്പെടുത്താൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു

• അർത്ഥത്തിൽ വലിയ അക്ഷരങ്ങളും ചെറിയ അക്ഷരങ്ങളും കലർത്തുന്നത് മോശം ശീലമായി കണക്കാക്കപ്പെടുന്നു
• ഉദ്ധരിച്ച മൂല്യങ്ങൾ വായിക്കാൻ എളുപ്പമാണ്
• മൂല്യങ്ങളിൽ സ്‌പെയ്‌സുകളുണ്ടെങ്കിൽ നിങ്ങൾ ഉദ്ധരിക്കണം

വളരെ മോശം:

മൂല്യത്തിൽ ഇടങ്ങൾ ഉള്ളതിനാൽ ഇത് പ്രവർത്തിക്കില്ല

ഇമേജ് ആട്രിബ്യൂട്ടുകൾ

ഇമേജുകൾ നിർവചിക്കുമ്പോൾ, എല്ലായ്പ്പോഴും "alt" ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക. ചില കാരണങ്ങളാൽ ചിത്രം പ്രദർശിപ്പിക്കാത്തപ്പോൾ ഈ ആട്രിബ്യൂട്ട് പ്രധാനമാണ്.

കൂടാതെ, എല്ലായ്പ്പോഴും ചിത്രത്തിൻ്റെ വീതിയും ഉയരവും നിർവ്വചിക്കുക. പേജ് ലോഡ് ചെയ്യുമ്പോൾ ബ്രൗസർ ചിത്രത്തിനായി സ്ഥലം റിസർവ് ചെയ്യുന്നതിനാൽ ഇത് പേജ് ലേഔട്ട് തകരാർ കുറയ്ക്കുന്നു.

ഇടവും തുല്യവും

HTML5 തുല്യ ചിഹ്നത്തിന് ചുറ്റുമുള്ള ഇടങ്ങൾ അനുവദിക്കുന്നു. എന്നിരുന്നാലും, സ്‌പെയ്‌സുകളില്ലാത്തപ്പോൾ, കോഡ് വായിക്കാൻ എളുപ്പമാണ്, മാത്രമല്ല ഇത് എൻ്റിറ്റികളെ മികച്ച രീതിയിൽ ഗ്രൂപ്പുചെയ്യുകയും ചെയ്യുന്നു.

കോഡിൻ്റെ നീണ്ട വരികൾ ഒഴിവാക്കുക

ഒരു HTML എഡിറ്റർ ഉപയോഗിക്കുമ്പോൾ, വിൻഡോ ഇടത്തോട്ടോ വലത്തോട്ടോ സ്ക്രോൾ ചെയ്യണമെങ്കിൽ HTML കോഡ് വായിക്കുന്നത് അസൗകര്യമാണ്.

കോഡിൻ്റെ വരി 80 പ്രതീകങ്ങളിൽ കൂടാതെ സൂക്ഷിക്കാൻ നിങ്ങൾ ശ്രമിക്കണം.

ശൂന്യമായ വരകളും ഇൻഡൻ്റേഷനും

നല്ല കാരണമില്ലാതെ നിങ്ങൾ ശൂന്യമായ വരികൾ ചേർക്കരുത്.

മികച്ച വായനാക്ഷമതയ്ക്കായി, കോഡിൻ്റെ വലിയ, ലോജിക്കലി സ്ഥിരതയുള്ള ബ്ലോക്കുകൾ വേർതിരിക്കുന്നതിന് മാത്രമേ ശൂന്യമായ വരികൾ ചേർക്കാവൂ.

കൂടാതെ, മികച്ച വായനാക്ഷമതയ്ക്കായി, ഇൻഡൻ്റേഷനായി രണ്ട് ഇടങ്ങൾ ചേർക്കുക. ഇതിനായി ടാബുകൾ ഉപയോഗിക്കരുത്.

അനാവശ്യ വൈറ്റ് സ്പേസും ഇൻഡൻ്റേഷനും ഒഴിവാക്കുക. ഓരോ ഘടകങ്ങളും ഇൻഡൻ്റ് ചെയ്യേണ്ട ആവശ്യമില്ല.

ഓപ്ഷണൽ:

പ്രശസ്ത നഗരങ്ങൾ ടോക്കിയോ

ടോക്കിയോ ജപ്പാൻ്റെ തലസ്ഥാനവും ഗ്രേറ്റർ ടോക്കിയോ ഏരിയയുടെ കേന്ദ്രവും ലോകത്തിലെ ഏറ്റവും ജനസംഖ്യയുള്ള മെട്രോപൊളിറ്റൻ പ്രദേശവുമാണ്.

ഇത് ജാപ്പനീസ് ഗവൺമെൻ്റിൻ്റെയും ഇംപീരിയൽ പാലസിൻ്റെയും ഇരിപ്പിടവും ജാപ്പനീസ് സാമ്രാജ്യ കുടുംബത്തിൻ്റെ ഭവനവുമാണ്.

പ്രശസ്ത നഗരങ്ങൾ ടോക്കിയോ

ടോക്കിയോ ജപ്പാൻ്റെ തലസ്ഥാനവും ഗ്രേറ്റർ ടോക്കിയോ ഏരിയയുടെ കേന്ദ്രവും ലോകത്തിലെ ഏറ്റവും ജനസംഖ്യയുള്ള മെട്രോപൊളിറ്റൻ പ്രദേശവുമാണ്. ഇത് ജാപ്പനീസ് ഗവൺമെൻ്റിൻ്റെയും ഇംപീരിയൽ പാലസിൻ്റെയും ഇരിപ്പിടവും ജാപ്പനീസ് സാമ്രാജ്യ കുടുംബത്തിൻ്റെ ഭവനവുമാണ്.

പേര് വിവരണം	എ
എയുടെ വിവരണം	ബി

ബിയുടെ വിവരണം

ലണ്ടൻ

പാരീസ്

ടോക്കിയോ

ഒഴിവാക്കണോ വേണ്ടയോ?

HTML5 സ്റ്റാൻഡേർഡ് അനുസരിച്ച്, ടാഗും ടാഗും ഉപയോഗിച്ചേക്കില്ല.

HTML5 സ്റ്റാൻഡേർഡ് അനുസരിച്ച് ഇനിപ്പറയുന്ന കോഡ് സാധുവായി കണക്കാക്കപ്പെടുന്നു:

പേജ് ശീർഷകം ഇതൊരു ടെക്സ്റ്റ് തലക്കെട്ടാണ്

ഇത് വാചകത്തിൻ്റെ ഒരു ഖണ്ഡികയാണ്.

മൂലകമാണ് പ്രമാണത്തിൻ്റെ റൂട്ട്. പേജ് ഭാഷ നിർവചിക്കുന്നതിനുള്ള ശുപാർശിത സ്ഥലമാണിത്:

പ്രത്യേക ആപ്ലിക്കേഷനുകൾക്കും (സ്ക്രീൻ റീഡറുകൾ പോലുള്ളവ) സെർച്ച് എഞ്ചിനുകൾക്കും പേജ് ഭാഷാ പ്രഖ്യാപനം പ്രധാനമാണ്.

കൂടാതെ, നിങ്ങൾ ഒരു ടാഗ് അല്ലെങ്കിൽ ടാഗ് എഴുതുന്നില്ലെങ്കിൽ, അത് ആപ്ലിക്കേഷൻ്റെ DOM, XML ഘടനയെ തകർക്കും. കൂടാതെ ഒരു ടാഗ് ഒഴിവാക്കുന്നത് പഴയ ബ്രൗസറുകളിൽ (IE9) പിശകുകൾക്ക് ഇടയാക്കും.

ഞാൻ ടാഗ് ഒഴിവാക്കണോ?

HTML5 സ്റ്റാൻഡേർഡ് അനുസരിച്ച്, ടാഗ് ഉപയോഗിച്ചേക്കില്ല.

ഡിഫോൾട്ടായി, ബ്രൗസറുകൾ അവർ സൃഷ്ടിക്കുന്ന എലമെൻ്റിനുള്ളിൽ തുറക്കുന്ന ടാഗിന് മുമ്പായി എല്ലാ ഘടകങ്ങളും ചേർക്കും.

ടാഗ് ഒഴിവാക്കിക്കൊണ്ട് നിങ്ങൾക്ക് HTML ഘടനയുടെ സങ്കീർണ്ണത കുറയ്ക്കാൻ കഴിയും:

പേജ് ശീർഷകം ടെക്സ്റ്റ് ശീർഷകം

ഇതൊരു വാചക ഖണ്ഡികയാണ്.

മെറ്റാഡാറ്റ

ഘടകം HTML5-ൽ ആവശ്യമാണ്. പേജിൻ്റെ തലക്കെട്ട് അർത്ഥം കൊണ്ട് പൂരിപ്പിക്കണം:

സെർച്ച് എഞ്ചിനുകൾ വഴി പേജിൻ്റെ ശരിയായ വ്യാഖ്യാനവും ശരിയായ ഇൻഡക്‌സിംഗും ഉറപ്പാക്കാൻ, പേജിൻ്റെ ഭാഷയുടെയും പ്രതീക എൻകോഡിംഗിൻ്റെയും നിർവചനം എത്രയും വേഗം പ്രഖ്യാപിക്കണം:

HTML5 വാക്യഘടനയും കോഡിംഗ് മാനദണ്ഡങ്ങളും

ഒരു വ്യൂപോർട്ട് ഇൻസ്റ്റാൾ ചെയ്യുന്നു (കാഴ്ച വിൻഡോ)

"വ്യൂപോർട്ട്" എന്നത് ഒരു വെബ് പേജിൻ്റെ ഉപയോക്താക്കൾക്ക് കാണാവുന്ന ഏരിയയാണ്. ഉപകരണത്തിൽ നിന്നും ഉപകരണത്തിലേക്കും മൊബൈൽ ഫോണുകളിലെയും ഈ വ്യത്യാസം കമ്പ്യൂട്ടർ സ്‌ക്രീനേക്കാൾ കുറവായിരിക്കും.

എല്ലാ വെബ് പേജുകളിലും ഇനിപ്പറയുന്ന ഫോമിൽ നിങ്ങൾ എല്ലായ്പ്പോഴും ഒരു വ്യൂപോർട്ട് നിയന്ത്രണം ഉപയോഗിക്കണം:

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

width=device-width ഭാഗം, നിലവിലെ ഉപകരണത്തിൻ്റെ സ്‌ക്രീൻ വീതിയുമായി പൊരുത്തപ്പെടുന്നതിന് പേജിൻ്റെ വീതിയെ സജ്ജമാക്കുന്നു (നിങ്ങൾ ഉപയോഗിക്കുന്ന ഉപകരണത്തെ ആശ്രയിച്ച് ഇത് വ്യത്യാസപ്പെടും).

പ്രാരംഭ-സ്കെയിൽ=1.0 ഭാഗം ബ്രൗസർ മുഖേന പേജ് ലോഡ് ചെയ്യുമ്പോൾ പ്രാരംഭ സൂം ലെവൽ സജ്ജമാക്കുന്നു.

വ്യൂപോർട്ട് മെറ്റാ ടാഗ് ഇൻസ്റ്റാൾ ചെയ്തിട്ടുള്ളതും അല്ലാതെയും ഒരു സ്മാർട്ട്ഫോൺ സ്ക്രീനിൽ ഒരു വെബ് പേജിൻ്റെ ഉദാഹരണം നിങ്ങൾക്ക് ചുവടെ കാണാൻ കഴിയും:

വ്യൂപോർട്ട് മെറ്റാ ടാഗുള്ള പേജ്

HTML അഭിപ്രായങ്ങൾ

ഒരു വരിയിൽ ഒരു ചെറിയ അഭിപ്രായം എഴുതണം:

വെബ് ഡിസൈനർ - HTML5 സ്പെസിഫിക്കേഷൻ (HTML 5)

HTML5 ലെ ടാഗുകൾ ഒരു വെബ് പേജിൻ്റെ ഘടനയെ വിവരിക്കുന്ന XML-HTML ടാഗുകളാണ്, അതിലൂടെ ഒരു കമ്പ്യൂട്ടർ പ്രോഗ്രാമിന് (സെർച്ച് റോബോട്ട് മുതലായവ) പേജിൻ്റെ പ്രധാന ഉള്ളടക്കത്തെ പേജിൻ്റെ ബാക്കി ഭാഗങ്ങളിൽ നിന്ന് (ഫോർമുലേഷനും നാവിഗേഷൻ ഘടകങ്ങളും) വേർതിരിച്ചറിയാൻ കഴിയും. : മുകളിൽ, താഴെ, മെനു , പേജ് സൈഡ് ഘടകങ്ങൾ, ആവർത്തിക്കുന്ന (ഡൈനാമിക്) ബ്ലോക്കുകൾ മുതലായവ. പ്രധാന ഉള്ളടക്കത്തിൻ്റെ (പേജ് ടെക്സ്റ്റ്) തലത്തിൽ ഒരു വിഭജനവും ഉണ്ട്. HTML5 ഭാഷ തന്നെ HTML, XML, CSS മുതലായവയിലേക്കുള്ള ഒരു ആഡ്-ഓൺ ആണ്.

പേജ് ശീർഷകം വെബ് പേജിൻ്റെ മുകളിൽ, "തലക്കെട്ട്" വെബ് പേജിൻ്റെ പ്രധാന മെനു, പ്രധാന ബോഡി, ലേഖനം, പേജ് മെറ്റീരിയൽ സൈഡ്ബാർ (സൈഡ്ബാർ) പേജിൻ്റെ താഴെ, അടിക്കുറിപ്പ്

വെബ്സൈറ്റ് ഘടന

- പേജിൻ്റെ പ്രധാന ഉള്ളടക്കം ഫ്രെയിം ചെയ്യുക (ലേഖനം),
- പേജ് തലക്കെട്ട് ഫ്രെയിം ചെയ്യുക,
- പേജിൻ്റെ അടിക്കുറിപ്പ് ഫ്രെയിം ചെയ്യുക,
- പേജിൻ്റെ പ്രധാന മെനു ഫ്രെയിം ചെയ്യുക,
- പേജിൻ്റെ സൈഡ്‌ബാർ ഫ്രെയിം ചെയ്യുക (സൈഡ്‌ബാർ),
- പേജിൽ ഫ്രെയിം ആവർത്തിക്കുന്ന ബ്ലോക്കുകൾ (ഉദാഹരണത്തിന് അഭിപ്രായങ്ങൾ).

HTML5 വെബ് പേജ് ടെംപ്ലേറ്റ് കോഡ് ഘടകങ്ങൾ.

- വിൻഡോസ്-1251 എൻകോഡിംഗ് അസൈൻ ചെയ്യുക.

- പേജ് IE-ൽ തുറന്നാൽ, ബ്രൗസർ എപ്പോഴും ഏറ്റവും പുതിയ സ്റ്റാൻഡേർഡ് ഡിസ്പ്ലേ മോഡ് ഉപയോഗിക്കണം.

- മൊബൈൽ ഉപകരണങ്ങളിൽ സൈറ്റ് പ്രദർശിപ്പിക്കുന്നു.

തലക്കെട്ട് - സൈറ്റ് പേജിൻ്റെ തലക്കെട്ട്, അതിൽ സാധാരണയായി സൈറ്റ് ലോഗോ, തലക്കെട്ട്, ഫോൺ നമ്പർ, സ്ലൈഡർ മുതലായവ അടങ്ങിയിരിക്കുന്നു.

nav - സൈറ്റ് പേജിൻ്റെ പ്രധാന മെനു.

ലേഖനം - പേജിൻ്റെ പ്രധാന ഉള്ളടക്കം: ലേഖനം, ബ്ലോഗ് പോസ്റ്റ്, ഫോറം വിഷയം മുതലായവ. വാചകം, ചിത്രങ്ങൾ, വീഡിയോകൾ, പട്ടികകൾ മുതലായവ അടങ്ങിയിരിക്കാം.

aside - ഒരു സൈറ്റിൻ്റെ ഒരു സൈഡ്‌ബാർ (സൈഡ്‌ബാർ), സാധാരണയായി വിവിധ ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്നു: വിഭാഗങ്ങൾ, ടാഗുകൾ, ഏറ്റവും പുതിയ പോസ്റ്റുകൾ/അഭിപ്രായങ്ങൾ, അധിക മെനു, കൗണ്ടറുകൾ മുതലായവ.

അടിക്കുറിപ്പ് - താഴത്തെ ഭാഗം - ഒരു വെബ്‌സൈറ്റ് പേജിൻ്റെ അടിക്കുറിപ്പിൽ സാധാരണയായി വിവിധ വിവരങ്ങൾ (പകർപ്പവകാശങ്ങൾ), ബന്ധപ്പെടാനുള്ള വിവരങ്ങൾ (വിലാസങ്ങൾ, ഫോൺ നമ്പറുകൾ) മുതലായവ അടങ്ങിയിരിക്കുന്നു.

പേജ് ഘടന തലത്തിൽ HTML5

പേജ് ഘടനയെ വിഭജിക്കുന്നതിന് ഉത്തരവാദികളായ പുതിയ HTML5 ടാഗുകളുടെ പട്ടിക നോക്കാം:

- "പേജ് ഹെഡർ" എന്ന് വിളിക്കപ്പെടുന്ന സൈറ്റിൻ്റെ മുകൾ ഭാഗത്തിൻ്റെ ഡിസൈൻ ഘടകങ്ങൾ ഫ്രെയിം ചെയ്യുന്ന ടാഗുകൾ. തലക്കെട്ട് ടാഗുകൾ ഒരു സെക്ഷൻ ടാഗിൻ്റെ മുകളിലായും ഉപയോഗിക്കാം.

- സൈറ്റിലെ പ്രധാന മെനു രൂപപ്പെടുത്തുന്ന ടാഗുകൾ.

- പേജിൻ്റെ പ്രധാന ഉള്ളടക്കം രൂപപ്പെടുത്തുന്ന ടാഗുകൾ: ലേഖനം, ബ്ലോഗ് എൻട്രി, വാർത്തകൾ, ആദ്യ ഫോറം എൻട്രി മുതലായവ.

- സൈഡ്‌ബാർ ഫ്രെയിം ചെയ്യുന്ന ടാഗുകൾ. സൈഡ്ബാർ എന്നത് "സൈഡ്ബാർ" എന്ന് വിളിക്കപ്പെടുന്ന ഒന്നാണ്, അതിൽ സാധാരണയായി തലക്കെട്ടുകളുടെ ബ്ലോക്കുകൾ (വിഭാഗങ്ങൾ), ടാഗുകളുടെ മേഘങ്ങൾ (ടാഗുകൾ), സമീപകാല പോസ്റ്റുകളുടെ ഒരു ലിസ്റ്റ് മുതലായവ അടങ്ങിയിരിക്കുന്നു. കൗണ്ടറുകൾ, വിജറ്റുകൾ (ഉദാഹരണത്തിന്, VKontakte-ൽ നിന്നുള്ള അഭിപ്രായങ്ങൾ), സോഷ്യൽ ബട്ടണുകൾ എന്നിവ ഫ്രെയിം ചെയ്യാൻ നിങ്ങൾക്ക് അസൈഡ് ടാഗുകൾ ഉപയോഗിക്കാം.

- സൈറ്റിൻ്റെ അടിഭാഗം ഫ്രെയിം ചെയ്യുന്ന ടാഗുകൾ, "പേജ് ഫൂട്ടർ" എന്ന് വിളിക്കപ്പെടുന്നവ, അതിൽ രചയിതാവിൻ്റെ പേര് (കമ്പനി), കോൺടാക്റ്റുകൾ (വിലാസങ്ങൾ, ടെലിഫോൺ നമ്പറുകൾ), നിയമപരമായ വിവരങ്ങൾ (പകർപ്പവകാശങ്ങൾ) മുതലായവ അടങ്ങിയിരിക്കാം. ഒരു സെക്ഷൻ ടാഗിൻ്റെ അടിഭാഗമായും അടിക്കുറിപ്പ് ടാഗുകൾ ഉപയോഗിക്കാം, അതായത്. സെക്ഷൻ ടാഗുകൾക്കിടയിൽ അടിക്കുറിപ്പ് ടാഗുകൾ തന്നെ സ്ഥിതിചെയ്യും

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

ടെക്സ്റ്റ് തലത്തിൽ HTML5

പേജ് ടെക്‌സ്‌റ്റിൻ്റെ സെമാൻ്റിക് വിഭജനത്തിന് ഉത്തരവാദിയായ പുതിയ HTML5 ടാഗുകളുടെ ലിസ്റ്റ് നോക്കാം:

- ഈ ടാഗുകൾക്കിടയിൽ സ്ഥിതിചെയ്യുന്ന വാചകം "തിരഞ്ഞെടുത്തത്" ആയി മാറുന്നു. മാർക്ക് ടാഗുകളുടെ ഉദ്ദേശ്യങ്ങളിലൊന്ന് ടെക്സ്റ്റിലെ വാക്കുകൾ ഫ്രെയിം ചെയ്യുക എന്നതാണ്, ഉദാഹരണത്തിന്, തിരയൽ ബാറിൽ ഉപയോക്താവ് നൽകിയ പദവുമായി പൊരുത്തപ്പെടുത്തുക.

- തീയതികളും/അല്ലെങ്കിൽ സമയവും ഫോർമാറ്റിൽ സൃഷ്ടിക്കുന്നതിനാണ് ടാഗുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്
ഫോമിൻ്റെ ISO: YYYY-MM-DDTh:mm:ss, ഈ ഫോർമാറ്റ് കമ്പ്യൂട്ടർ പ്രോഗ്രാമുകൾക്ക് മനസ്സിലാക്കാവുന്നതേയുള്ളൂ. ടൈം ടാഗുകൾക്ക് ഒരു തീയതിയോ വാചകമോ ഫ്രെയിം ചെയ്യാൻ കഴിയും;

- മറഞ്ഞിരിക്കുന്നതോ പ്രദർശിപ്പിച്ചതോ ആയ വിവരങ്ങൾ സംഭരിക്കുന്നതിനാണ് ടാഗുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് (സ്‌പോയിലർ പോലെ പ്രവർത്തിക്കുന്നു).

- ടാഗുകൾ ശീർഷകത്തെ ഫ്രെയിം ചെയ്യുന്നു, നിങ്ങൾ അതിൽ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, വിശദാംശ ടാഗുകൾക്കിടയിൽ സ്ഥിതിചെയ്യുന്ന വാചകം ദൃശ്യമാകും (ഒരു സ്‌പോയിലറായി ഉപയോഗിക്കാം).

അധിക HTML5 ഭാഷാ ടാഗുകൾ

ഭാഷയെ സമ്പന്നമാക്കുന്ന പുതിയ HTML5 ടാഗുകളുടെ ലിസ്റ്റ്:

- ടാഗുകൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ഒരു സ്റ്റാറ്റിക് സ്കെയിൽ ഇൻഡിക്കേറ്റർ പ്രദർശിപ്പിക്കുന്നതിനാണ്, അതിൽ അളക്കൽ ഫലം മാറില്ല. പ്രവർത്തിക്കാൻ, നിങ്ങൾക്ക് ഏറ്റവും കുറഞ്ഞതും കൂടിയതുമായ മൂല്യം ആവശ്യമാണ്.

- ടാഗുകൾ ഒരു ഡൈനാമിക് സ്കെയിൽ ഇൻഡിക്കേറ്റർ (ഉദാഹരണത്തിന്, ഒരു ഫയൽ ഡൗൺലോഡ് സ്കെയിൽ) പ്രദർശിപ്പിക്കാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്, അതിൽ അളവ് ഫലം തത്സമയം മാറുന്നു.

- ജാവാസ്ക്രിപ്റ്റിൽ സ്ക്രിപ്റ്റുകൾ സൃഷ്ടിക്കുമ്പോൾ ഉപയോഗിക്കുന്ന മെനു ടാഗുകൾക്കിടയിൽ ടാഗ് സ്ഥിതിചെയ്യണം.

- ഈ ടാഗുകൾക്കിടയിൽ കമാൻഡ് ടാഗ് സ്ഥാപിച്ചിരിക്കുന്നു.

- ടാഗുകൾ സ്ക്രിപ്റ്റിൻ്റെ പ്രവർത്തനം പ്രദർശിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

- ടാഗുകൾ ഒരു ലിസ്റ്റ് സൃഷ്ടിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്, അത് ഒരു ടെക്സ്റ്റ് ഫീൽഡിൽ ടൈപ്പ് ചെയ്യുമ്പോൾ പ്രദർശിപ്പിക്കും.

- ടാഗുകൾ ഒരു വസ്തുവിൻ്റെ വിവരണം ഫ്രെയിം ചെയ്യുന്നു (ഉദാഹരണത്തിന്, ഒരു ചിത്രം), ഫിഗർ ടാഗുകൾക്കിടയിൽ സ്ഥിതിചെയ്യുന്നു.

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

- ടാഗുകൾ h* ഗ്രൂപ്പ് തലക്കെട്ടുകൾക്കായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു

- പൊതു/സ്വകാര്യ കീ ജോഡികൾ ജനറേറ്റുചെയ്യുന്നതിനും ഡാറ്റ എൻക്രിപ്റ്റ് ചെയ്യുന്നതിനും/ഡീക്രിപ്റ്റ് ചെയ്യുന്നതിനും ഒരു ഡിജിറ്റൽ സിഗ്നേച്ചർ സൃഷ്ടിക്കുന്നതിനും/പരിശോധിപ്പിക്കുന്നതിനും ടാഗ് ഉപയോഗിക്കുന്നു.

- ടാഗുകൾ വാചകവും വ്യാഖ്യാനവും ഫ്രെയിം ചെയ്യുന്നു.

- ടാഗുകൾ റൂബി ടാഗുകൾക്കിടയിൽ സ്ഥിതിചെയ്യുന്നു, അവ വ്യാഖ്യാനം ഫ്രെയിം ചെയ്യാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

- ടാഗുകൾ റൂബി ടാഗുകളെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്ക് വേണ്ടിയുള്ളതാണ്.

- ഈ വാക്ക് ബ്രൗസർ വിൻഡോയിൽ ചേരുന്നില്ലെങ്കിൽ പദം (“സോഫ്റ്റ് ഹൈഫൻ”) എവിടെ ഹൈഫനേറ്റ് ചെയ്യണമെന്ന് ടാഗ് ബ്രൗസറിനോട് പറയുന്നു.

പുതിയ സാങ്കേതികവിദ്യകൾ വിവരിക്കുന്ന HTML5 ടാഗുകൾ

HTML5 ഭാഷയുടെ ഭാഗമായ, മൂന്നാം കക്ഷി പ്ലഗിന്നുകളല്ലാത്ത നിരവധി സാങ്കേതികവിദ്യകളും API-കളും ഉപയോഗിക്കാനുള്ള കഴിവ് HTML5 അവതരിപ്പിച്ചു, അവയിൽ ചിലത് ഇതാ:

- ടാഗുകൾ മൂന്നാം കക്ഷി പ്രോഗ്രാമുകൾ (പ്ലഗിനുകൾ, വിപുലീകരണങ്ങൾ) ഉപയോഗിക്കാതെ ഓഡിയോ ഫയലുകൾ പ്ലേ ചെയ്യാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

- ടാഗുകൾ മൂന്നാം കക്ഷി പ്രോഗ്രാമുകൾ (പ്ലഗിനുകൾ, വിപുലീകരണങ്ങൾ) ഉപയോഗിക്കാതെ വീഡിയോ ഫയലുകൾ പ്ലേ ചെയ്യാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

- ഓഡിയോ, വീഡിയോ ടാഗുകൾക്കുള്ളിൽ സ്ഥിതി ചെയ്യുന്ന ഓഡിയോ/വീഡിയോ ഫയലുകളിലേക്കുള്ള പാത സൂചിപ്പിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ് ടാഗ്.

- ടാഗുകൾ സൈറ്റിൽ ഒരു പ്രത്യേക ഏരിയ സൃഷ്ടിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്, അതിൽ നിങ്ങൾക്ക് വെക്റ്റർ രൂപങ്ങൾ സൃഷ്ടിക്കാനും ജാവാസ്ക്രിപ്റ്റ് പ്രോഗ്രാമിംഗ് ഭാഷ ഉപയോഗിച്ച് അവ കൈകാര്യം ചെയ്യാനും കഴിയും. ഭാവിയിൽ ക്യാൻവാസ് ഫ്ലാഷ് സാങ്കേതികവിദ്യയെ മാറ്റിസ്ഥാപിക്കും (അതെ, സിദ്ധാന്തത്തിൽ...).

ടാഗ് ചെയ്യുക

വെക്റ്റർ ആകൃതികൾ വരയ്ക്കാനും കൈകാര്യം ചെയ്യാനും രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്ന ഒരു പ്രത്യേക ഘടകമാണ് ടാഗ്. ഫ്ലാഷ് സാങ്കേതികവിദ്യയ്ക്ക് പകരമായി ടാഗ് സൃഷ്ടിച്ചു. ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് വെക്റ്റർ ആകൃതികൾ (ചിത്രങ്ങൾ) വരയ്ക്കാം, കൂടാതെ JavaScript ഉപയോഗിച്ച്, ഈ രൂപങ്ങൾ കൈകാര്യം ചെയ്യുക, അതുവഴി സൈറ്റിൽ ആനിമേഷൻ (കാർട്ടൂണുകളും ഗെയിമുകളും പോലും) സൃഷ്ടിക്കുന്നു.

ഓഡിയോ/വീഡിയോ

ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് പേജിൽ ഓഡിയോ ഫയലുകൾ ഉൾപ്പെടുത്താനും അവ കേൾക്കാനും കഴിയും. ഘടകം

ടാഗ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് പേജിൽ വീഡിയോ ഫയലുകൾ ഉൾപ്പെടുത്താനും അവ കാണാനും കഴിയും. ഈ ഘടകം പ്ലേ ബട്ടണുകളുള്ള ഒരു പാനലും സൃഷ്ടിക്കുന്നു.

JavaScript API

DOM സാങ്കേതികവിദ്യയിലൂടെ പേജ് ഘടകങ്ങളുമായി JavaScript ഭാഷ എങ്ങനെ സംവദിക്കണമെന്ന് HTML5 സ്പെസിഫിക്കേഷൻ വിവരിക്കുന്നു. HTML5-ലും, ഒബ്‌ജക്‌റ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള പുതിയ രീതികളുണ്ട്, ഉദാഹരണത്തിന്, ജാവാസ്ക്രിപ്റ്റും ഈ രീതികളും ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഓഡിയോ/വീഡിയോ കൺട്രോൾ പാനലിലെ ബട്ടണുകൾ പ്രോഗ്രമാറ്റിക്കായി നിയന്ത്രിക്കാനാകും.

XML സാങ്കേതിക പിന്തുണ

HTML5 ഭാഷ ഉപയോഗിച്ച് എഴുതിയ ഒരു HTML ഡോക്യുമെൻ്റിൽ, SVG അല്ലെങ്കിൽ MathML പോലുള്ള വിവിധ XML ഫോർമാറ്റുകളുമായി ബന്ധപ്പെട്ട സാങ്കേതികവിദ്യകൾ നടപ്പിലാക്കാൻ ഇപ്പോൾ സാധ്യമാണ്.

എസ്.വി.ജി

SVG - സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ് (സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ് മാർക്ക്അപ്പ് ഭാഷ), ഒരു XML ഫോർമാറ്റാണ്. HTML5 XML ഫോർമാറ്റുകളെ പിന്തുണയ്‌ക്കാൻ തുടങ്ങിയതിനാൽ, SVG ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ചിത്രങ്ങൾ ഒരു HTML ഡോക്യുമെൻ്റിൽ ഉൾപ്പെടുത്താനും JavaScript വഴി അവ കൈകാര്യം ചെയ്യാനും ഇപ്പോൾ സാധ്യമാണ്.

പച്ച സർക്കിൾ പാറ്റേണിനുള്ള ഉദാഹരണ കോഡ്:

ഫലം:

ഗണിതംML

MathML - മാത്തമാറ്റിക്കൽ മാർക്ക്അപ്പ് ലാംഗ്വേജ് (ഗണിതശാസ്ത്ര മാർക്ക്അപ്പ് ഭാഷ) XML ഫോർമാറ്റ്. ഈ ഫോർമാറ്റ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് വിവിധ ഗണിത സൂത്രവാക്യങ്ങൾ വിവരിക്കാൻ കഴിയും.

HTML5-ലെ ഏതൊക്കെ ടാഗുകളാണ് ഒഴിവാക്കിയത്?

HTML5 സ്പെസിഫിക്കേഷനിലെ ലെഗസി ടാഗുകൾ ഇവയാണ്:

പകരം എംബെഡ് ടാഗ് ഉപയോഗിക്കണം
പകരം abbr ടാഗ് ഉപയോഗിക്കണം
പകരം ഓഡിയോ ടാഗ് ഉപയോഗിക്കണം
പകരം ul ടാഗ് ഉപയോഗിക്കണം
പകരം iframe ടാഗ് ഉപയോഗിക്കണം
പകരം നിങ്ങൾ ഒരു കൂട്ടം ഫോമും ഇൻപുട്ട് ടാഗുകളും ഉപയോഗിക്കണം
പകരം പ്രീ അല്ലെങ്കിൽ കോഡ് ടാഗുകൾ ഉപയോഗിക്കണം


പകരം പ്രീ ടാഗ് ഉപയോഗിക്കണം
പകരം s ടാഗ് ഉപയോഗിക്കണം

ടാഗുകൾ ഫോർമാറ്റ് ചെയ്യുന്നതിന് പകരം: , , , , , , , , , ഒപ്പം , നിങ്ങൾ CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കണം.

HTML5-ൽ വെബ്‌സൈറ്റുകൾ സൃഷ്‌ടിക്കുമ്പോൾ കാലഹരണപ്പെട്ട ടാഗുകൾ ഉപയോഗിക്കാൻ ശുപാർശ ചെയ്യുന്നില്ല, എന്നാൽ ബ്രൗസറുകൾ ഇനി അവയെ പിന്തുണയ്‌ക്കില്ല എന്നല്ല ഇതിനർത്ഥം, ഉദാഹരണത്തിന്, ശുപാർശ ചെയ്യാത്ത ടാഗിൻ്റെ പ്രവർത്തനം അടിവരയിടുന്നു

HTML5-ലെ പുതിയ ആഗോള ആട്രിബ്യൂട്ടുകൾ

ഏത് HTML ഡോക്യുമെൻ്റ് ടാഗിലും ഉൾച്ചേർക്കാവുന്ന ആട്രിബ്യൂട്ടുകളാണ് ഗ്ലോബൽ ആട്രിബ്യൂട്ടുകൾ. പുതിയ ആഗോള ആട്രിബ്യൂട്ടുകൾ HTML5-ൽ പ്രത്യക്ഷപ്പെട്ടു, ചുവടെയുള്ള വിവരണങ്ങളിൽ അവ പുതിയത് എന്ന വാക്ക് ഉപയോഗിച്ച് ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു

ആഗോള HTML5 ആട്രിബ്യൂട്ടുകളുടെ പേരുകളും വിവരണങ്ങളും നോക്കാം:

accesskey=" " - മുൻകൂട്ടി പ്രോഗ്രാം ചെയ്ത കീ കോമ്പിനേഷൻ അമർത്തി പേജിൻ്റെ ഏതെങ്കിലും ഘടകം (ടാഗ്) ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
class=" " - ക്ലാസ്സിൻ്റെ പേര് സജ്ജീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
contenteditable=" " - പുതിയ മൂലകത്തിൻ്റെ ഉള്ളടക്കങ്ങൾ എഡിറ്റുചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
സന്ദർഭമെനു=" " - പുതിയ ഘടകത്തിനായി ഒരു സന്ദർഭ മെനു സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
dir=" " - ടെക്സ്റ്റിൻ്റെ ദിശ നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
dragable=" " - പുതിയ ഘടകം വലിച്ചിടാൻ ഉപയോക്താവിനെ അനുവദിക്കുന്നു,
dropzone=" " - പുതിയത് വലിച്ചിടുമ്പോൾ ഒരു ഘടകം കൊണ്ട് എന്തുചെയ്യണമെന്ന് വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
hiden=" " - പുതിയ ഘടകം മറയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
id=" " - ഒരു ഘടകത്തിന് ഒരു അദ്വിതീയ ഐഡൻ്റിഫയർ സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
lang=" " - മൂലക ഉള്ളടക്കത്തിൽ ഭാഷാ കോഡ് വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
spellcheck=" " - പുതിയ മൂലകത്തിൻ്റെ ഉള്ളടക്കത്തിൽ അക്ഷരവിന്യാസം പരിശോധിച്ചിട്ടുണ്ടോ ഇല്ലയോ എന്ന് വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
style=" " - ഒരു ഘടകത്തിന് ഒരു ശൈലി സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
tabindex=" " - നിങ്ങൾ ടാബ് കീ അമർത്തുമ്പോൾ ഏത് ക്രമത്തിൽ ഘടകങ്ങൾക്ക് ഫോക്കസ് ലഭിക്കണമെന്ന് വ്യക്തമാക്കുന്ന ഒരു നിയമം സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു,
title=" " - ഒരു ഘടകത്തിന് മുകളിൽ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ദൃശ്യമാകുന്ന ഒരു ടൂൾടിപ്പ് സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

HTML5 സ്‌പെസിഫിക്കേഷനിൽ, ടാഗുകൾ പൂർണ്ണമായ ഒബ്‌ജക്‌റ്റുകളായി മാറിയതിനാൽ, സ്‌പെസിഫിക്കേഷനിൽ ഇതുവരെ വിവരിച്ചിട്ടില്ലാത്ത ടാഗുകൾക്ക് പോലും, ആഗോള ആട്രിബ്യൂട്ട് എന്ന ആശയം ഈ ഒബ്‌ജക്റ്റുകളിൽ ഇതിനകം അന്തർലീനമായിരുന്നു.

HTML5 ഡോക്യുമെൻ്റ് കോഡ് ഘടനയിലെ പുതുമകൾ

HTML5-ലെ കോഡ് ഘടന ചില മാറ്റങ്ങൾക്ക് വിധേയമായി, അവയിൽ ചിലത് ഇതാ:

1. ഭാഷയുടെ മുൻ പതിപ്പുകളിൽ നിന്ന് വ്യത്യസ്തമായി, HTML5-ൽ ഒരു ഡോക്‌ടൈപ്പ് മാത്രമേയുള്ളൂ:
ഉദാഹരണത്തിന്, ഈ സൈറ്റിൻ്റെ പേജുകളുടെ സോഴ്സ് കോഡിൽ നിങ്ങൾക്കത് കാണാൻ കഴിയും (ഡോക്‌ടൈപ്പിന് മുമ്പ് ഒന്നും ഉണ്ടാകരുത്, സ്‌പെയ്‌സുകളില്ല, ലൈൻ ബ്രേക്കുകളില്ല, മുതലായവ) മറക്കരുത്.

2. പ്രമാണ ഭാഷ സൂചിപ്പിക്കാൻ, ഇപ്പോൾ മെറ്റാ ടാഗിന് പകരം:
നിങ്ങൾ ടാഗിൽ lang="ru" ആട്രിബ്യൂട്ട് ഉപയോഗിക്കേണ്ടതുണ്ട്:

3. ഡോക്യുമെൻ്റ് എൻകോഡിംഗ് സൂചിപ്പിക്കാൻ, ഇപ്പോൾ മെറ്റാ ടാഗിന് പകരം:

http-equiv, ഉള്ളടക്ക ആട്രിബ്യൂട്ടുകൾ ഇല്ലാതെ നിങ്ങൾ ഒരു മെറ്റാ ടാഗ് ഉപയോഗിക്കേണ്ടതുണ്ട്

4. ഒരു JavaScript സ്ക്രിപ്റ്റ് സൃഷ്ടിക്കുമ്പോൾ, ഇപ്പോൾ ടാഗിൽ, type="text/javascript", language="JavaScript" ആട്രിബ്യൂട്ടുകൾ നടപ്പിലാക്കേണ്ട ആവശ്യമില്ല.

5. CSS ശൈലികൾ നടപ്പിലാക്കുമ്പോൾ, ഇപ്പോൾ ടാഗുകളിലും , ടൈപ്പ്="ടെക്സ്റ്റ്/സിഎസ്എസ്" ആട്രിബ്യൂട്ട് നടപ്പിലാക്കേണ്ട ആവശ്യമില്ല.

6. ലിങ്ക് ഒരു ഇൻലൈൻ ടാഗ് ആണ്, അതിനാൽ, ആദ്യകാല HTML, XHTML സ്പെസിഫിക്കേഷനുകളിൽ, അവ ഇപ്പോൾ HTML5 സ്പെസിഫിക്കേഷനിൽ ഫ്രെയിം ബ്ലോക്ക് ചെയ്യാൻ ശുപാർശ ചെയ്തിരുന്നില്ല, ലിങ്കുകൾക്കായുള്ള ഈ ശുപാർശ നീക്കം ചെയ്തു, അവ ഇപ്പോൾ ഒന്നോ അതിലധികമോ ഫ്രെയിം ചെയ്യാൻ അനുവദിച്ചിരിക്കുന്നു ബ്ലോക്ക് ഘടകങ്ങൾ.

തലക്കെട്ട്

ഖണ്ഡിക

ഇപ്പോൾ HTML5 ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും:

തലക്കെട്ട്

സൈറ്റിൽ നിന്നുള്ള മെറ്റീരിയലുകളെ അടിസ്ഥാനമാക്കി http://html-5.ru/, http://html-5.ru/uchebnik-html5

സെർച്ച് എഞ്ചിൻ റോബോട്ടുകൾക്കുള്ള കമാൻഡ് ടാഗുകൾ, പേജുകളുടെ സെമാൻ്റിക് ലോഡ്

• 2015-2017 മുതൽ HTML W3C-യിലേക്കുള്ള കൂട്ടിച്ചേർക്കലുകൾ

• W3C ശുപാർശകൾ ഡിസംബർ 24, 1999

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

ഈ ഗൈഡ് ഡെവലപ്പർമാർ അവർ പ്രവർത്തിക്കുമ്പോൾ ഉപയോഗിക്കുന്നു, കൂടാതെ ഒരു വെബ് പേജ് നാവിഗേറ്റ് ചെയ്യാൻ സഹായിക്കുന്നതിന് ഡോക്യുമെൻ്റ് ഉള്ളടക്കം സൃഷ്ടിക്കുമ്പോൾ ബ്രൗസറുകൾ ഉപയോഗിക്കുന്നു.

ഉദാഹരണത്തിന്, ഇനിപ്പറയുന്ന മാർക്ക്അപ്പ് നെസ്റ്റഡ് വിഭാഗങ്ങളും ഫസ്റ്റ്-ലെവൽ തലക്കെട്ടുകളും ഉപയോഗിക്കുന്നു:

ലെവൽ 1

ലെവൽ 2

ലെവൽ 3

നിലവിലെ ബ്രൗസർ പതിപ്പുകളുമായുള്ള അനുയോജ്യത ഉറപ്പാക്കാൻ, ഉചിതമായ സ്ഥലങ്ങളിൽ തലക്കെട്ടുകൾ മാറ്റിസ്ഥാപിക്കുന്നതിലൂടെ നിങ്ങൾക്ക് മറ്റ് തലക്കെട്ട് ലെവലുകളും ഉപയോഗിക്കാം.

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

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

പ്രമാണത്തിൻ്റെ ഒരു പ്രത്യേക വിഭാഗത്തിൻ്റെ ശീർഷകം പ്രതിനിധീകരിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ് ഘടകം. യഥാർത്ഥത്തിൽ, ശീർഷകത്തിന് പുറമേ, അതിൽ മറ്റ് തരത്തിലുള്ള വിവരങ്ങളും അടങ്ങിയിരിക്കാം. ഉദാഹരണത്തിന്, അതിൻ്റെ ടാഗുകൾക്കിടയിൽ ഉപശീർഷകങ്ങൾ, രചയിതാവിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ കൂടാതെ/അല്ലെങ്കിൽ ഡോക്യുമെൻ്റ് പതിപ്പുകൾ, അതിൻ്റെ പരിഷ്ക്കരണങ്ങൾ മുതലായവയെക്കുറിച്ചുള്ള വിവരങ്ങൾ സ്ഥാപിക്കുന്നത് തികച്ചും ന്യായമാണ്:

HTML 5-ൻ്റെ ഒരു പ്രിവ്യൂ

ലാച്ലൻ ഹണ്ട് എഴുതിയത്

ഘടകം അത് ഉൾപ്പെടുന്ന പ്രമാണ വിഭാഗത്തിൻ്റെ അടിക്കുറിപ്പിനെ പ്രതിനിധീകരിക്കുന്നു. ചട്ടം പോലെ, വിഭാഗത്തിൻ്റെ ഉള്ളടക്കം, തീമാറ്റിക് പോസ്റ്റുകളിലേക്കുള്ള ലിങ്കുകൾ മുതലായവയെക്കുറിച്ചുള്ള രചയിതാവിൻ്റെ വിവരങ്ങൾ ഇതിൽ അടങ്ങിയിരിക്കുന്നു:

2007 ഉദാഹരണം Inc.

ഈ ഘടകം നാവിഗേഷൻ ലിങ്കുകൾ ഉൾക്കൊള്ളാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. സൈറ്റ് നാവിഗേറ്റ് ചെയ്യുന്നതിനും ഡോക്യുമെൻ്റ് ഉള്ളടക്കം പോസ്റ്റുചെയ്യുന്നതിനും ഇത് ഒരുപോലെ അനുയോജ്യമാണ്:

• വീട്


• ഉൽപ്പന്നങ്ങൾ


• സേവനങ്ങൾ


• കുറിച്ച്

ചുറ്റുമുള്ള ഉള്ളടക്കത്തിൻ്റെ വിഷയവുമായി ഒരു പരിധിവരെ അല്ലെങ്കിൽ മറ്റൊന്നിലേക്ക് പൊരുത്തപ്പെടുന്ന വിവരങ്ങൾ അവതരിപ്പിക്കാൻ ഘടകം സഹായിക്കുന്നു. സൈഡ്‌ബാറുകൾ (സൈഡ് കോളങ്ങൾ) നടപ്പിലാക്കുന്നതിന് ഈ ഘടകം വളരെ സൗകര്യപ്രദമാണ്:

ആർക്കൈവുകൾ

• സെപ്റ്റംബർ 2007


• ഓഗസ്റ്റ് 2007


• ജൂലൈ 2007

ഒരു ഘടകം ഒരു പ്രമാണത്തിൻ്റെയോ ആപ്ലിക്കേഷൻ്റെയോ പൊതുവായ വിഭാഗത്തെ പ്രതിനിധീകരിക്കുന്നു, ഉദാഹരണത്തിന്, ഒരു അധ്യായം:

അധ്യായം 1: കാലഘട്ടം

ഇത് ഏറ്റവും മികച്ച സമയമായിരുന്നു, അത് ഏറ്റവും മോശം സമയമായിരുന്നു,
അത് ജ്ഞാനയുഗമായിരുന്നു, അത് ഭോഷത്വത്തിൻ്റെ യുഗമായിരുന്നു,
അത് വിശ്വാസത്തിൻ്റെ യുഗമായിരുന്നു, അവിശ്വസനീയതയുടെ യുഗമായിരുന്നു,
ഇത് വെളിച്ചത്തിൻ്റെ കാലമായിരുന്നു, ഇത് ഇരുട്ടിൻ്റെ കാലമായിരുന്നു,
…

("എ ടെയിൽ ഓഫ് ടു സിറ്റി" എന്നതിൽ നിന്നുള്ള ഉദ്ധരണി)

ഒരു പ്രമാണം, പേജ് അല്ലെങ്കിൽ സൈറ്റിൻ്റെ മൊത്തത്തിലുള്ള ഒരു സ്വതന്ത്ര വിഭാഗമാണ് ഘടകം. വാർത്തകൾ, ബ്ലോഗ് പോസ്റ്റുകൾ, ഫോറം പോസ്റ്റുകൾ അല്ലെങ്കിൽ വ്യക്തിഗത അഭിപ്രായങ്ങൾ പോലുള്ള ഉള്ളടക്കം പോസ്റ്റുചെയ്യുന്നതിന് ഇത് ഉപയോഗിക്കാൻ സൗകര്യപ്രദമാണ്:

അഭിപ്രായം #2
ജാക്ക് ഒ'നീൽ എഴുതിയത്

2007 ഓഗസ്റ്റ് 29-ന് 13:58

അത് മറ്റൊരു മികച്ച ലേഖനമാണ്!

വീഡിയോയും ഓഡിയോയും.

വെബ് പരിതസ്ഥിതിയിൽ, വീഡിയോയും ഓഡിയോയും പോലുള്ള ഡാറ്റയുടെ തരങ്ങൾ അടുത്തിടെ കൂടുതൽ പ്രസക്തമായിരിക്കുന്നു. കൂടാതെ YouTube, Viddler, Revver, MySpace തുടങ്ങിയ നിരവധി സൈറ്റുകൾ ഏതൊരു ഇൻ്റർനെറ്റ് ഉപയോക്താവിനും വീഡിയോ, ഓഡിയോ വിവരങ്ങൾ ഓൺലൈനിൽ എളുപ്പത്തിൽ പോസ്റ്റ് ചെയ്യുന്നത് സാധ്യമാക്കുന്നു. മീഡിയ ഉള്ളടക്കം ഉൾപ്പെടുത്തുന്നതിനും കൈകാര്യം ചെയ്യുന്നതിനും ആവശ്യമായ മാർഗങ്ങൾ HTML സ്റ്റാൻഡേർഡിന് നിലവിൽ ഇല്ല എന്ന വസ്തുത കാരണം, നിലവിലുള്ള മിക്ക സൈറ്റുകളും ആവശ്യമായ പ്രവർത്തനം നൽകുന്നതിന് ഫ്ലാഷ് സാങ്കേതികവിദ്യ ഉപയോഗിക്കുന്നു. കൂടാതെ, പ്ലഗിനുകൾ വഴി മൾട്ടിമീഡിയ പ്രവർത്തനക്ഷമമാക്കാനുള്ള സാധ്യതയുണ്ട് (ക്വിക്‌ടൈം, വിൻഡോസ് മീഡിയ, മറ്റുള്ളവ). എന്നിട്ടും, ഇത് ഏറ്റവും വ്യാപകമായി ഉപയോഗിക്കുന്ന ഫ്ലാഷ് സാങ്കേതികവിദ്യയാണ്, ഡെവലപ്പർമാർക്ക് ആവശ്യമായ API നൽകുന്ന ഒരു ക്രോസ് ബ്രൗസർ പരിഹാരമാണിത്.

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

പുതുതായി അവതരിപ്പിച്ച ഘടകങ്ങൾ ഈ ടാസ്ക് വളരെ എളുപ്പമാക്കുന്നു. ലഭ്യമായ മിക്ക API കഴിവുകളും രണ്ട് ഘടകങ്ങൾക്കും പൊതുവായതാണ്, വിഷ്വൽ, നോൺ-വിഷ്വൽ വിവരങ്ങൾക്ക് ചെറിയ വ്യത്യാസങ്ങളുണ്ട്.

Opera, WebKit എഞ്ചിനുകൾ ഇതിനകം തന്നെ ഘടകത്തിന് ഭാഗിക പിന്തുണ നടപ്പിലാക്കിയിട്ടുണ്ട്. സ്വയം കാണുന്നതിന്, Opera-യുടെ പരീക്ഷണാത്മക ബിൽഡും WebKit-ൻ്റെ ഓട്ടോമേറ്റഡ് ടെസ്റ്റ് ബിൽഡും നിങ്ങൾക്ക് ഡൗൺലോഡ് ചെയ്ത് പരീക്ഷിക്കാവുന്നതാണ്. ഓപ്പറ ഓഗ് തിയോറ കോഡെക്കിനുള്ള പിന്തുണ അവതരിപ്പിക്കുന്നു, കൂടാതെ നിരവധി മൂന്നാം കക്ഷി കോഡെക്കുകൾ ഉൾപ്പെടെ QuickTime-ൽ പിന്തുണയ്ക്കുന്ന എല്ലാ ഫോർമാറ്റുകൾക്കും WebKit പിന്തുണ നൽകുന്നു.

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

സിനിമ ഡൗൺലോഡ് ചെയ്യുക

ഒരു ചിത്രം നിർവചിക്കാൻ ഓപ്ഷണൽ പോസ്റ്റർ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു, അത് പ്ലേ ചെയ്യാൻ തുടങ്ങുന്നതിന് മുമ്പ് വീഡിയോ എലമെൻ്റിൻ്റെ സ്ഥാനത്ത് പ്രദർശിപ്പിക്കും. MPEG-4-ൽ ചെയ്‌തിരിക്കുന്നതുപോലെ ചില വീഡിയോ ഫോർമാറ്റുകൾ അവരുടേതായ സ്‌പ്ലാഷ് സ്‌ക്രീൻ നൽകുന്നുണ്ടെങ്കിലും, സ്‌പ്ലാഷ് സ്‌ക്രീൻ നിർവചിക്കുന്നതിനുള്ള ഒരു ബദൽ മാർഗമാണ് പോസ്റ്റർ ആട്രിബ്യൂട്ട്, അത് ഉപയോഗിച്ച വീഡിയോ ഫോർമാറ്റ് പരിഗണിക്കാതെ തന്നെ പ്രദർശിപ്പിക്കും.

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

പാട്ട് ഡൗൺലോഡ് ചെയ്യുക

HTML5 സ്റ്റാൻഡേർഡ് വീഡിയോ, ഓഡിയോ ഡാറ്റയുടെ ഇതര ഉറവിടങ്ങളെ സൂചിപ്പിക്കാൻ ഒരു ഘടകവും അവതരിപ്പിക്കുന്നു, ഇത് ഉപകരണവും കൂടാതെ/അല്ലെങ്കിൽ കോഡെക് പിന്തുണയ്ക്കുന്ന ഫോർമാറ്റ് തിരഞ്ഞെടുക്കാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നു. ഉപയോഗിക്കുന്ന ഉപകരണത്തിൻ്റെ പരിമിതികൾക്ക് അനുസൃതമായി ആവശ്യമായ ഡാറ്റ ഉറവിടം തിരഞ്ഞെടുക്കുന്നതിന് ഉപകരണ തരം സൂചിപ്പിക്കാൻ മീഡിയ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം, ഡാറ്റ തരവും കോഡെക്കുകളും വ്യക്തമാക്കുന്നതിനുള്ള തരം ആട്രിബ്യൂട്ട്. ഒരു ഘടകം ഉപയോഗിക്കുമ്പോൾ, അതിൻ്റെ രക്ഷകർത്താവിനോ ഘടകങ്ങൾക്കോ ​​src ആട്രിബ്യൂട്ട് ഉണ്ടായിരിക്കണമെന്നില്ല, അല്ലാത്തപക്ഷം ഇതര ഡാറ്റ ഉറവിടങ്ങൾ ബ്രൗസർ അവഗണിക്കും.

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

var വീഡിയോ = document.getElementById("വീഡിയോ");

കളിക്കുക
താൽക്കാലികമായി നിർത്തുക