സാങ്കേതികവിദ്യ - വരൂ, എച് ടി എം എല്‍ നെ പരിചയപ്പെടാം..
| URL:http://technology4all.blogspot.com/2006/07/blog-post_09.html | Published: 7/10/2006 7:56 AM |
| Author: ശനിയന്‍ \o^o/ Shaniyan |
ബൂലോകരേ,
വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച് ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. കമ്പ്യൂട്ടര്‍ ഉപയോഗിക്കാനറിയുന്ന ആര്‍ക്കും, അധികം ബുദ്ധിമുട്ടില്ലാതെ തന്നെ എച് ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കാം എന്നതാണ്‌ ഈ ഭാഷയുടെ പ്രത്യേകത. ശരിക്കു പറഞ്ഞാ,ല്‍ ഇതൊരു ഭാഷയെന്നതിനേക്കാള്‍ "ഇത്‌ എങ്ങനെ കാണിക്കണം" എന്നതിനുള്ള നിര്‍ദ്ദേശങ്ങളാണ്‌.
ആദ്യമായി, ഇതൊക്കെ ചെയ്തു നോക്കാന്‍ നമുക്ക്‌ കമ്പ്യൂട്ടറില്‍ എന്തൊക്കെ വേണം എന്ന് നോക്കാം.
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 എന്ന എക്സ്റ്റന്‍ഷനൊടു കൂടിയ ഒരു ടെക്സ്റ്റ്‌ ഫയലാണ്‌.
വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച് ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. കമ്പ്യൂട്ടര്‍ ഉപയോഗിക്കാനറിയുന്ന ആര്‍ക്കും, അധികം ബുദ്ധിമുട്ടില്ലാതെ തന്നെ എച് ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കാം എന്നതാണ്‌ ഈ ഭാഷയുടെ പ്രത്യേകത. ശരിക്കു പറഞ്ഞാ,ല്‍ ഇതൊരു ഭാഷയെന്നതിനേക്കാള്‍ "ഇത്‌ എങ്ങനെ കാണിക്കണം" എന്നതിനുള്ള നിര്‍ദ്ദേശങ്ങളാണ്‌.
ആദ്യമായി, ഇതൊക്കെ ചെയ്തു നോക്കാന്‍ നമുക്ക്‌ കമ്പ്യൂട്ടറില്‍ എന്തൊക്കെ വേണം എന്ന് നോക്കാം.
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 എന്ന എക്സ്റ്റന്‍ഷനൊടു കൂടിയ ഒരു ടെക്സ്റ്റ്‌ ഫയലാണ്‌.
-ശനിയന്‍, ആദിത്യന്‍
(തുടരും..)
| Squeet Sponsor | Squeet Advertising Info |
Track bugs, feature requests and team-member tasks using OnTime 2006. OnTime helps thousands of software development teams manage and enforce their development processes. Whether you do ad-hoc, agile, MSF, scrum or extreme development, OnTime can help you ship software on-time! Available in 3 flavors: Windows, Web or VS.NET 2003/2005 Integrated App. Winner of the 2006 ASP.NET Pro Readers Choice Award. Free single user installations!
($200 Value - Never Expires!)
posted by സ്വാര്‍ത്ഥന്‍ at 8:48 PM
0 Comments:
Post a Comment
<< Home