വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച് ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. കമ്പ്യൂട്ടര്‍ ഉപയോഗിക്കാനറിയുന്ന ആര്‍ക്കും, അധികം ബുദ്ധിമുട്ടില്ലാതെ തന്നെ എച് ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കാം എന്നതാണ്‌ ഈ ഭാഷയുടെ പ്രത്യേകത. ശരിക്കു പറഞ്ഞാ,ല്‍ ഇതൊരു ഭാഷയെന്നതിനേക്കാള്‍ "ഇത്‌ എങ്ങനെ കാണിക്കണം" എന്നതിനുള്ള നിര്‍ദ്ദേശങ്ങളാണ്‌.
ആദ്യമായി, ഇതൊക്കെ ചെയ്തു നോക്കാന്‍ നമുക്ക്‌ കമ്പ്യൂട്ടറില്‍ എന്തൊക്കെ വേണം എന്ന് നോക്കാം.
1. ഒരു ടെക്സ്റ്റ്‌ എഡിറ്റര്‍
(വിന്‍ഡോസ്‌ ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ നോട്ട്‌പാഡും ലിനക്സ്‌/യുണിക്സ്‌ ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ vi എഡിറ്ററും, മാക്ക്‌ ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ Plain Text Editor-ഉം മതിയാവും. ഇനി അതില്‍ കൂടുതല്‍ വേണം എന്നുള്ളവര്‍ - പ്രത്യേകിച്ച്‌ കമ്പ്യൂട്ടര്‍ സയന്‍സ്‌ വിദ്യാര്‍ഥികള്‍- നല്ല ഒരു എച് ടി എം എല്‍ എഡിറ്ററേ ഡൌണ്‍ലോഡ്‌ ചെയ്യുക. http://www.chami.com- ന്റെ ഫ്രീ എഡിറ്റര്‍ ആയ HTMLKit ആണ് ഞാന്‍ സാധാരണ ഉപയോഗിക്കാറ്‌. നമ്മള്‍ക്ക്‌ എച് ടി എം എല്‍ പേജ് അടിച്ചുണ്ടാക്കാനാണ്‌ എഡിറ്റര്‍)
2. ഒരു ബ്രൌസര്‍
(ഇന്റര്‍നെറ്റ്‌ എക്സ്‌പ്ലോറര്‍/ ഫയര്‍ഫോക്സ്‌/കോണ്‍ക്വറര്‍.
നമ്മള്‍ എഡിറ്ററില്‍ അടിച്ചുണ്ടാക്കിയ പേജ് കാണാനാണ്‌ ബ്രൌസര്‍. നാം ടാഗുകള്‍ വഴി കൊടുത്തിരിക്കുന്ന നിര്‍ദ്ദേശങ്ങള്‍ക്കനുസൃതമായി ബ്രൌസര്‍ പേജ് ഫോര്‍മാറ്റ്‌ ചെയ്ത്‌ കാണിക്കുന്നു.)
എന്താണ് എച് ടി എം എല്‍
ഇന്റര്‍നെറ്റിലെ ഒരു പേജിലെ വിവരങ്ങളെ എങ്ങനെ കാണിക്കണം എന്നത് ബ്രൌസറിനു പറഞ്ഞു കൊടുക്കാനുള്ള ഭാഷയാണ്‌ എച് ടി എം എല്‍. ടെക്സ്റ്റും ലിങ്കുകളും അടങ്ങിയ ഒരു പേജിനകത്ത്‌ ഓരോ ഭാഗങ്ങളും പ്രത്യേക തരത്തിലുള്ള ഒരു 'ടാഗ്' ഉപയോഗിച്ച്‌ അടയാളപ്പെടുത്തിയാണ്‌ നമ്മള്‍ ബ്രൌസറിനു മനസ്സിലാവുന്ന ഭാഷയില്‍ ആ പേജിനെ രൂപപ്പെടുത്തുന്നത്‌. ഒരു ടാഗ് എന്നാല്‍ < > ബ്രാക്കറ്റുകള്‍ക്കിടെ നിശ്ചിത വാക്കു ചേര്‍ത്തതാണ്‌. ഉദാഹരണത്തിന്, നമുക്ക്‌ ആ പേജിന്റെ തലവാചകം (തെറ്റിദ്ധരിക്കരുത്‌, ബ്രൌസറിന്റെ മേലെ കാണിക്കുന്നതാണ്‌, പേജില്‍ കാണുന്നതല്ലേ!) <TITLE> എന്ന ടാഗ് ഉപയോഗിച്ച്‌ അടയാളപ്പെടുത്താം. ഈ പറഞ്ഞതിനെ നമ്മള്‍ ഓപ്പണിങ്ങ്‌ ടാഗ് എന്നു വിളിക്കും. തുറന്നാല്‍ അടക്കണം എന്ന നിയമം ഇവിടേയും ബാധകമാണ്‌. </TITLE> എന്ന ടാഗ് ഉപയോഗിച്ച്‌ നമ്മള്‍ക്ക്‌ തലവാചകമാക്കേണ്ട വാചകത്തിനെ പൊതിഞ്ഞാല്‍, ബ്രൌസറിനു മനസ്സിലാവും, ഇതാണ്‌ നമ്മുടെ തലവാചകമെന്ന്‌. അതായത്‌, നമ്മുടെ പേജില്‍
<TITLE>This is the title for the Browser</TITLE>
എന്നെഴുതിയാല്‍, അതു നമ്മുടെ ടൈറ്റില്‍/തലവാചകം ആയി.
ടാഗുകള്‍ പലവിധമുണ്ട്. ഉദാഹരണത്തിന് <B> എന്ന ടാഗ് എഴുത്തിന്റെ(ടെക്‌സ്റ്റിന്റെ) കടുപ്പം(ബോള്‍ഡ്‌നെസ്സ്) കൂട്ടാനും <I> എന്ന ടാഗ് എഴുത്ത് ഇറ്റാലിക്സില്‍ ആക്കാനും ആണ് ഉപയോഗിയ്ക്കുന്നത്. <IMG> എന്ന ടാഗ് പേജില്‍ ചിത്രങ്ങള്‍ ഉള്‍പ്പെടുത്താനും <TABLE> എന്ന ടാഗ് ഒരു പട്ടിക ഉള്‍പ്പെടുത്താനും ഉപയോഗിക്കാം.
ഇങ്ങനെ, ടാഗുകള്‍ ഉപയോഗിച്ച്‌ വ്യക്തമായി രൂപപ്പെടുത്തിയ പേജുകള്‍ ആണ് നമ്മള്‍ കാണുന്ന വെബ്‌ പേജുകള്‍ എല്ലാം. ഏതൊരു മാധ്യമത്തേയും പോലെ, എച് ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കുന്നതിനും ഒരു വ്യക്തമായ രൂപരേഖ നിര്‍വചിച്ചിട്ടുണ്ട്‌. കൃത്യമായി തുറന്നടച്ചിട്ടുള്ള ഒരു പറ്റം ടാഗുകളാണ്‌ പേജിനെ രൂപപ്പെടുത്തുന്നത്‌. ടാഗുകള്‍ തുറന്നടക്കുമ്പോള്‍, ഒരു ടാഗിനകത്ത്‌ വേറെ ഒരു ടാഗിനെ തുറക്കുകയാണെങ്കില്‍, അവസാനം തുറന്ന ടാഗ് ആദ്യം അടക്കണം എന്ന കാര്യം പ്രത്യേകം ശ്രദ്ധിക്കുക.
ഉദാഹരണത്തിന്,
<TAG1>
<TAG2>
....<TAGn>
text here
</TAGn>....
</TAG2>
</TAG1>
(<TAG> എന്ന ഒരു ടാഗ് നിലവിലില്ല. ഇതൊരു ഉദാഹരണം മാത്രം)
മിക്കവാറും ടാഗുകള്‍ക്കും ആട്രിബ്യൂട്ട് എന്ന അംഗങ്ങള്‍ കാണും. ടാഗിന്റെ സ്വഭാവ വിശേഷങ്ങള്‍ നിയന്ത്രിയ്ക്കുന്നത് ആട്രിബ്യൂട്ടുകളാണ്. <SPAN ALIGN=“LEFT“ > എന്ന ടാഗില്‍ ALIGN എന്നത് SPAN ടാഗിന്റെ ഒരു ആട്രിബ്യൂട്ട് ആണ്. ALIGN എന്ന ആട്രിബ്യൂട്ടിന്റെ വില(വാല്യു) ആണ് LEFT. ഈ ആട്രിബ്യൂട്ടിന്റെ വില അനുസരിച്ച് ടാഗിന്റെ സ്വഭാവം മാറുന്നു.
മിക്കവാറും എച് ടീ എം എല്‍ പേജുകള്‍ക്കും ഒരു <HEAD> ഭാഗവും, ഒരു <BODY> ഭാഗവും കാണും. പേജ് കാണുമ്പോള്‍ <BODY> ടാഗിനുള്ളിലുള്ള ഭാഗമാണ് ബ്രൌസറില്‍ കാണിക്കുക എന്ന് ഒരു പൊതു തത്വമായി പറയാം. സാധാരണ <HEAD> ടാഗിനുള്ളിലുള്ള ഭാഗം പേജിനെ സംബന്ധിയ്ക്കുന്ന പൊതുവായ വിവരങ്ങള്‍ രേഖപ്പെടുത്തുന്ന സ്ഥലമാണ്. ബ്രൌസറുകള്‍ പേജ് കാണിയ്ക്കാന്‍ ഈ വിവരങ്ങള്‍ ഉപയോഗിയ്ക്കുന്നു.
ഇനി നമുക്കൊരു എച് ടി എം എല്‍ പേജിന്റെ സാമാന്യ രൂപം കാണാം.
<HTML>
<HEAD>
<TITLE> This is the browser's title</TITLE>
</HEAD>
<BODY>
All my page Content goes in here
</BODY>
</HTML>
ഇവിടെ കാണുന്ന പോലെ, എല്ലാ എച് ടി എം എല്‍ പേജുകളും HTML എന്ന ഒരു ടാഗിനകത്താക്കിയ ഒരു കൂട്ടം ടാഗുകളാന്‍ നിര്‍വചിക്കപ്പെട്ടിട്ടുള്ള, ഒരു വ്യക്തമായ രൂപരേഖയുള്ള, .htm അല്ലെങ്കില്‍ .html എന്ന എക്സ്റ്റന്‍ഷനൊടു കൂടിയ ഒരു ടെക്സ്റ്റ്‌ ഫയലാണ്‌.
-ശനിയന്‍, ആദിത്യന്‍
(തുടരും..)
17 comments:
വരൂ, എച്. ടി. എം. എലിനെ പരിചയപ്പെടാം..
ബൂലോകരേ, വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച് ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. എന്റെയും ആദിത്യന്റെയും ഒരു സംയുക്ത ശ്രമമാണ്.. ഗുരുക്കന്‍മാര്‍ തെറ്റുകള്‍ തിരുത്തിത്തരുമെന്ന പ്രതീക്ഷയോടെ, ഇവിടെ തുടങ്ങുന്നു...
വേണുറ്ക്കു് ശനിയന്‍ ഒരു കമന്റിടിരുന്നു.വളരെ
ലളിതമായ രീതിയില്‍ html ന്റെ ബാല പാഠങ്ങള്‍ തുടങ്ങിയതു വായിച്ചു.സന്തോഷം.തുടറ്ന്നുള്ള പാഠങ്ങള്‍ പ്രതീക്ഷിച്ചു കൊണ്ടും നന്മകള്‍ നേര്‍ന്നു കൊണ്ടും.
ഐവാ,
അങ്ങനെ എഴുതി തകര്‍ക്കുക ആദിശ്ശനിയരേ. ഉപകാരപ്രദമായ ലേഖനങ്ങളിുല്ലെന്നും ബൂലോഗമാകെ ഓര്‍മ്മക്കുടിപ്പുകള്‍ കിടന്നു പുളിച്ചു നാറുന്നെന്നും പറയുന്ന ദ്രോഹികളുടെ നാവ്‌ ഇതു കണ്ട്‌ താണുപോട്ടെ.
ശനിയന്‍ മാഷെ ഇതു പടി പടി ആയി വിശദീകരിച്ച്‌ CSS,DTD,XML, DOCBook ഇതൊക്കെ വിവരിച്ചാല്‍ നന്നായിരുന്നു.
പ്രത്യേകിച്ച്‌ XML. അതാണല്ലോ ഭാവിയിലെ ഭാഷ.
ഈ സംരംഭം മലയാള വിക്കിയിലേക്കൊരു മുതല്‍ക്കൂട്ടാവും. എല്ലാവിധ ആശംസകളും.
ശനിയന്‍ മാഷെ വിദ്യാരംഭം കലക്കി.......
എന്നെ പോലെ, വേഡും, എക്സലും, മാത്രം ഉപയോഗിക്കാന്‍ അറിയുന്നവര്‍ക്ക് ഇത്തരം ഒരു സംരഭം വളരെ അധികം ഗുണപ്രദമാണ് എന്ന് പ്രത്യേകം പറയേണ്ടതില്ലല്ലോ.
ഷിജുവിന്റെ പി ഡി എഫിന്റെ കുറിച്ചുള്ള ലേഖനം, ശനിയന്റെ എച് ടി എം എല്‍,ദേവേട്ടന്റെ ലേഖനങ്ങള്‍, രാജിന്റെ ലേഖനങ്ങള്‍ തുടങ്ങി എത്രയെത്ര ഉപയോഗപ്രദമായ വിവരങ്ങള്‍ ബൂലോഗത്തില്‍ ലഭ്യമാണിന്ന്.
നന്ദി
നന്നായി!
ഇനിയും എഴുതണം
All about html,xml,css etc .
http://www.w3schools.com/
വിദ്യാരംഭം കരിഷ്യാമി
സിദ്‌ധ്യര്‍ ഭവതുമേ സദാ
........ഭാവുകങ്ങള്‍
കരിഷ്മയോ എവിടെ?
(വളയം, തല്ലല്ലേ, കോമഡി പറഞ്ഞ് ഓവര്‍ ആക്കുക എന്നതു എന്റെ ഒരു വീക്ക്നെസ്സ് ആണ് :)) ദേ സ്മൈലി ഇട്ടിട്ടൊണ്ട്... :) ഇട്ടാ പിന്നെ തല്ലാന്‍ പാടില്ലാന്നാ...)
ലേഖനത്തിന്റെ പാതിയില്‍ മലയാളം വിക്കിക്കുള്ള കോളു കാണുന്നല്ലോ?
ലോകരേ, ഈ എഴുതുന്നത് ഒരാള്‍ക്കെങ്കിലും ഉപകരിച്ചാല്‍ ഞങ്ങള്‍ ധന്യരായി!
വേണു, നന്ദി! ഞങ്ങളാല്‍ കഴിയും വിധം ഇതിനെ മുന്നോട്ടു കൊണ്ടു പോകാം.. പരീക്ഷിച്ച് നോക്കൂ.. ചോദ്യങ്ങള്‍, അഭിപ്രായങ്ങള്‍, നിര്‍ദ്ദേശങ്ങള്‍ അറിയിക്കുമല്ലോ?
ദേവന്മാഷേ നന്ദി!.. ഞങ്ങളാലാവും വിധം...:)
ഷിജു മാഷേ, ഒരു മെയില്‍ അയച്ചിട്ടുണ്ട്, നന്ദി!, നമുക്കു ശ്രമിക്കാംന്നേ!
കുറുമാന്‍ മാഷേ, നന്ദി! ബാക്കി പിന്നാലെ വരുന്നുണ്ട്..
കലേഷ്ജീ, നന്ദി! എഴുതും :)
കിരണ്‍ മാഷേ, അതെ, അവര്‍ തന്നെയാണതിന് അവസാനവാക്ക്.. നന്ദി!
വളയമേ, നന്ദി!
ഏവൂരാനേ, ഇതങ്ങോട്ടു തന്നേ :) നന്ദി!
രണ്ടാം ഭാഗം ഇതാ ഇവിടെ
ഞാന്‍ പരിചയപ്പെട്ടു.. എനിക്കിഷ്ടായി!!
ബാക്കി പോരട്ട് ശനിയാ..
ശനിയണ്ണാ, ഇന്നലത്തന്നെ വായിച്ചിരുന്നു. എച്.ടി.എം.എല്ലും എച്ച്.എം.ടിയും തമ്മില്‍പോലും മാറിപ്പോകുന്ന അത്രയും വിവരമുണ്ടായിരുന്ന എന്നെപ്പോലുള്ളവര്‍ക്ക് ഇപ്പോള്‍ സംഗതി കുറേശ്ശേ കുറേശ്ശേ കത്തിക്കത്തി വരുന്നു. ടാഗ്, ടാഗ് എന്ന് എല്ലായിടത്തും കേട്ടിട്ടുണ്ടായിരുന്നെങ്കിലും എന്താണതെന്ന് ഇപ്പോള്‍ പിടികിട്ടി.
വളരെ നന്ദി. ബാക്കിയും കൂടി പോരട്ടെ. യേത് പാമരനും യിത്പോലത്തെ ലേഖനങ്ങള്‍ വായിച്ചാല്‍ എന്താണ് കുന്തമെന്ന് മനസ്സിലാകണം. കടുകട്ടി ഭാ‍ഷയും, ഓ അതോ, അതെല്ലാവര്‍ക്കും അറിയാവുന്നതല്ലേ, അതിനെപ്പറ്റിയും വിവരിക്കണോ എന്നുള്ള വിചാരവുമാണ് പലപ്പോഴും പല വിവരണങ്ങളും എന്നെപ്പോലുള്ളവര്‍ക്ക് മനസ്സിലാകാതെ പോകുന്നത്.
ഒരിക്കല്‍ കൂടി നന്ദി.
ശനിയന്‍സ്,ആദി: ദേ എന്നും കമെന്റ് എഴുതാന്‍ വരുമ്പോള്‍ ഈ അമ്മച്ചി പറയും “u can use some HTML tags, such as ....., “ എന്താണ് ഈ കുന്തം എന്നു അറിയാതെ എങ്ങനെ ഉപയോഗിക്കും? അപ്പോ ഞാനും ഒന്നു ശ്രമിച്ചു നോക്കട്ടെ ഈ HTML tags...<:-)> അറിയണമല്ലൊ..നല്ല ലളിതമായ ഭാഷ..
ദേ ഇവരു പറയ്ന്നതിങ്ങനെ
Your HTML cannot be accepted: Tag is not closed:.....
ദേ ഇവരു പറയ്ന്നതിങ്ങനെ
Your HTML cannot be accepted: Tag is not closed:.....
ഡാലി, അതാണ്‌ ഏറ്റവും കൂടുതല്‍ ശ്രദ്ധിക്കേണ്ടത്‌. ഒരു ടാഗ് തുറന്നാല്‍ അത്‌ അടച്ചിരിക്കണം. അതായത്‌ <b> എന്നൊരു ടാഗ് തുറന്നിട്ടുണ്ടെങ്കില്‍ ഉണ്ടെങ്കില്‍ അത്‌ അടയ്ക്കുന്ന </b> എന്നൊരു ടാഗും ഉണ്ടായിരിക്കണം. അല്ലെങ്കില്‍ ഇങ്ങനെ ഉള്ള പ്രശ്നം ഒക്കെ ഉണ്ടാകും.
പക്ഷെ നമ്മുടെ മൈക്രൊസോഫ്റ്റ്‌ അച്ചായന്റെ internet explorer ചിലപ്പോള്‍ ഇതൊക്കെ ചിലപ്പൊള്‍ കണ്ണടച്ച്‌ വിടും കേട്ടോ.
Post a Comment