എച്ച്. ടി. എം. എല്‍ : ടെക്‌സ്റ്റ് -2(എച് റ്റി എം എല്‍ -3)

ടെക്‌സ്റ്റ് സംബന്ധമായ ചില നുറുങ്ങു വിദ്യകള്‍ ഈ പോസ്റ്റില്‍ പരിചയപ്പെടുത്തുന്നു.

1. <EM>ടെക്‌സ്റ്റ് പ്രാധാന്യമുള്ളതാക്കി(emphasize) കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം ഉണ്ട്. <EM> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </EM> എന്ന അവസാനവും. പ്രാധാന്യമുള്ളതാക്കേണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<EM>ജോസഫ് </EM> അലക്‌സ്	ജോസഫ് അലക്‌സ്

2. <STRONG>ടെക്‌സ്റ്റ് ഒന്ന് ബലം കൊടുത്ത്(?)(strong) കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം ഉണ്ട്. <STRONG> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </STRONG> എന്ന അവസാനവും. ബലം കൊടുക്കണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<STRONG>ജോസഫ് </STRONG> അലക്‌സ്	ജോസഫ് അലക്‌സ്

3. <CODE>ടെക്‌സ്റ്റ് കമ്പ്യൂട്ടര്‍ ഭാഷയിലെതു പോലെ കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം ഉണ്ട്. <CODE> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </CODE> എന്ന അവസാനവും. കമ്പ്യൂട്ടര്‍ കോഡായി കൊടുക്കണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<CODE>code inside</CODE> and outside	code insideand outside

ഇതു വരെ പറഞ്ഞാ ടാഗുകള്‍ പല ബ്രൌസറുകളും പല രീതിയിലാവും കാണിയ്ക്കുന്നത് എന്ന് ഓര്‍ത്തിരിയ്ക്കുക.

ഇതു പോലെയുള്ള മറ്റു ചില ടാഗുകള്‍ താഴെ കൊടുത്തിരിയ്ക്കുന്നു.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
ആ ഇ ഉ	ആ ഇ ഉ
<BIG>ജോസഫ് </BIG> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<CITE>ജോസഫ് </CITE> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<DEL>ജോസഫ് </DEL> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<INS>ജോസഫ് </INS> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<KBD>ജോസഫ് </KBD> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<Q>ജോസഫ് </Q> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<S>ജോസഫ് </S> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<SAMP>ജോസഫ് </SAMP> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<SMALL>ജോസഫ് </SMALL> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<STRIKE>ജോസഫ് </STRIKE> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<SUB>ജോസഫ് </SUB> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<SUP>ജോസഫ് </SUP> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<TT>ജോസഫ് </TT> അലക്‌സ്	ജോസഫ് അലക്‌സ്
<VAR>ജോസഫ് </VAR>അലക്‌സ്	ജോസഫ് അലക്‌സ്

4. അസാധാരണ ചിഹ്നങ്ങള്‍
< എന്നത് ഒരു ടാഗ് തുടങ്ങാനും > എന്നത് ടാഗ് അവസാനിപ്പിയ്ക്കാനും ഉള്ള ചിഹ്നങ്ങള്‍ ആണല്ലോ. അതു കൊണ്ട് അവ അതേ പടി നമ്മുടെ പേജില്‍ കൊടുക്കാന്‍ പറ്റില്ല. ഇനി അവ കൊടുക്കണം എന്ന് നിര്‍ബന്ധമാണെങ്കില്‍
ഇങ്ങനെ കൊടുക്കാം &lt;. ഒരു ശൂന്യസ്ഥലം വിടണമെങ്കില്‍ &nbsp; എന്നു കൊടുക്കാം. കോപ്പിറൈറ്റ് ചിഹ്നം തുടങ്ങി വേറെയും ചില ചിഹ്നങ്ങള്‍ ഉണ്ട്. ഇങ്ങനെ ഉപയോഗിയ്ക്കാവുന്ന ചിഹ്നങ്ങള്‍ താഴെ കൊടുത്തിരിയ്ക്കുന്നു.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
ആ    ഇ  ഉ	ആ    ഇ  ഉ
&lt;	<
&gt;	>
&iquest;	¿
&laquo;	«
&raquo;	»
&	&
&cent;	¢
&#169;	(c)
&copy;	(c)
&reg;	®
&trade;	™
&divide;	÷
&para;	¶
&plusmn;	±
&pound;	£
&reg;	(r)
&sect;	§
&yen;	¥
&Aacute;	Á
&AElig;	Æ
&Eacute;	É
&Igrave;	Ì
&uarr;	↑
&darr;	↓
&larr;	←
&rarr;	→
&harr;	↔
&loz;	◊
&dagger;	†
&Dagger;	‡
&sect;	§
&middot;	·
&bull;	•
&sum;	∑
&prod;	∏
&int;	∫
&micro;	µ

-ശനിയന്‍, ആദിത്യന്‍

ശബ്‌ദം രേഖപ്പെടുത്തലും പൊടിക്കൈകളും (മള്‍ട്ടിമീഡിയ - 2)

കഴിഞ്ഞ അദ്ധ്യായത്തില്‍ എങ്ങനെ ആട്ടവും പാട്ടും പേജില്‍ ഉള്‍പ്പെടുത്താം എന്ന്

കണ്ടല്ലോ? ഈ അദ്ധ്യായത്തില്‍ ശബ്ദം രേഖപ്പെടുത്തലും അതിനു ശേഷം നടത്താവുന്ന ചെറിയ സൂത്രപ്പണികളും ആണ് പ്രതിപാദ്യം. ഒരുപാട് പേര്‍ കവിത ചൊല്ലുവാനും കേള്‍ക്കുവാനും താല്‍പ്പര്യമെടുക്കുന്നതിനാലാണ് ഇത് വിഷയമാക്കുന്നത്.

ഒരു മൈക്ക് കുത്താനുള്ള വകുപ്പുള്ള കമ്പ്യൂട്ടറും, മൈക്കും, റെക്കോഡ് ചെയ്ത് പ്രോസസ് ചെയ്യാനും ഉള്ള സോഫ്റ്റ്വെയറും ഉണ്ടെങ്കില്‍ ആര്‍ക്കും ഈ പരിപാടി ചെയ്യാം.റെക്കോഡ്‌ ചെയ്യാനും അതിനെ പ്രോസസ്‌ ചെയ്യാനും, ഫ്രീ ടൂള്‍ ആയ ഒഡാസിറ്റി ആണ്‌ ഉപയോഗിക്കാന്‍ പോകുന്നത്‌. ഒഡാസിറ്റിയുടെ പ്രധാന സ്ക്രീന്‍ ഇവിടെ കാണിച്ചിരിക്കുന്നു: (വലുതാക്കി നോക്കുക)



ആദ്യ പടി, ശബ്ദം രേഖപ്പെടുത്തലാണ്‌. മൈക്ക്‌ ശരിയായി ഘടിപ്പിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പു വരുത്തിയതിനു ശേഷം, റെക്കോഡ്‌ ബട്ടബ്‌ ഞെക്കി റെക്കോഡ്‌ ചെയ്യാന്‍ ആരംഭിക്കുക. റെക്കോഡ്‌ ചെയ്യാന്‍ പറ്റാവുന്നേടത്തോളം നിശ്ശബ്ദമായ ഒരു സ്ഥലം തിരിഞ്ഞെടുത്താല്‍ നന്നായിരിക്കും. റെക്കോഡ്‌ ചെയ്തു കഴിയുമ്പോള്‍ സ്റ്റോപ്പ്‌ ബട്ടന്‍ ഞെക്കിയാല്‍, മുകളില്‍ കാണുന്ന പോലെ റെക്കോഡ്‌ ചെയ്യപ്പെട്ടതിന്റെ തരംഗ രൂപം കാണാം. ഇത്‌ സേവ്‌ ചെയ്തു വെക്കുക. പറ്റുമെങ്കില്‍ ഒരു കോപ്പി എടുത്തു വെക്കുക.

ഉദാഹരണത്തിന്‌ ഇതൊന്നു കേട്ടു നോക്കു:

powered by ODEO

റെക്കോഡ്‌ ചെയ്തപ്പോള്‍ ഉണ്ടായ അപശബ്ദങ്ങളും (തട്ടല്‍ മുട്ടലുകള്‍, വളരെ ചെറിയ മൂളലും മറ്റും) വളരെ ശ്രദ്ധിച്ച്‌ നമ്മുടെ തരംഗ രൂപത്തില്‍ എവിടെ വരുന്നു എന്ന് നോക്കുക. ശ്രദ്ധിക്കുക, അപശബ്ദങ്ങള്‍ റെക്കോഡ്‌ ചെയ്യപ്പെടേണ്ട ശബ്ദത്തിന്റെ കൂടെ ആണ്‌ പതിഞ്ഞിരിക്കുന്നതെങ്കില്‍ അതിനെ നിര്‍മ്മാര്‍ജ്ജനം ചെയ്യാന്‍ ബുദ്ധിമുട്ടാണ്‌. മൂളലിനെ പിന്നെയും നമുക്ക്‌ ഇല്ലാതാക്കാന്‍ പറ്റും.

അടുത്തതായി, നമുക്ക്‌ ഇതില്‍ അല്‍പ്പം മിനുക്കു പണികള്‍ നടത്താം. ആദ്യം തന്നെ, നമ്മുടെ റെക്കോഡിങ്ങ്‌ കേട്ട്‌ നോക്കുക. അതില്‍ നമ്മള്‍ക്ക്‌ വേണ്ടാത്തത്‌ എന്ത്‌, എവിടെ എന്നൊക്കെ കണ്ടെത്തലാണ്‌ ഇതുകൊണ്ടുള്ള ഉദ്ദേശ്യം.

അപസ്വര നിര്‍മാര്‍ജ്ജനം (നോയ്‌സ്‌ റിമൂവല്‍): നമ്മുടെ റെക്കോഡിങ്ങില്‍ അനാവശ്യമായി കടന്നു കൂടിയിരിക്കുന്ന എന്തും അപസ്വരം എന്ന വിഭാഗത്തില്‍ കൂട്ടാം. അങ്ങനെ ഉള്ളത്‌ രണ്ടു തരം ആണ്‌ പ്രധാനമായിട്ടുള്ളത്‌

1. പിന്നണിയില്‍ സ്ഥിരമായി നില നില്‍ക്കുന്ന അപശബ്ദങ്ങള്‍
സ്റ്റാറ്റിക്ക്‌ നോയ്‌സ്‌ എന്നറിയപ്പെടുന്ന ഇതിനെ ഒരു പരിധി വരെ ഇല്ലാതാക്കാനുള്ള സൂത്രങ്ങള്‍ മിക്ക സോഫ്റ്റ്‌വെയറുകളിലും ലഭ്യമാണ്‌.

ഇതിനായി നമുക്ക്‌ ഒഡാസിറ്റിയിലെ നോയ്‌സ്‌ റിമൂവല്‍ ടൂള്‍ ഉപയോഗിക്കാം. ആദ്യമായി ചെയ്യേണ്ടകാര്യം ഒരു നോയ്‌സ്‌ പ്രൊഫെയില്‍ ഉണ്ടാക്കാന്‍ ഒഡാസിറ്റിയെ സഹായിക്കലാണ്‌. നോയ്‌സ്‌ പ്രൊഫെയില്‍ എന്നാല്‍ നിശ്ശബ്ദമായ അവസ്ഥയില്‍ അന്തരീക്ഷത്തില്‍ നിലവിലുള്ള അപശബ്ദത്തിന്റെ അളവാണ്‌. അത്‌ തിട്ടപ്പെടുത്തി വെക്കുന്ന പ്രക്രിയയാണ്‌ നമ്മള്‍ ചെയ്യേണ്ടത്‌. ഇത്‌ നമ്മളെ ആ അപശബ്ദങ്ങളെ ഇല്ലാതാക്കാന്‍ സഹായിക്കും .

a) ആദ്യം റെക്കോഡ്‌ ചെയ്തതില്‍, നമ്മള്‍ നിശ്ശബ്ദമായിരിക്കുന്ന ഒരു ഭാഗത്തു നിന്ന് നിന്ന് ഒരു വളരെ ചെറിയ ഭാഗം (ഏതാനും സെക്കന്‍ഡുകള്‍ മതിയാവും) സെലക്റ്റ്‌ ചെയ്യുക (മൌസ്‌ കൊണ്ട്‌ തുടക്കത്തില്‍ ക്ലിക്ക്‌ ചെയ്ത്‌ പിടിച്ചു കൊണ്ട്‌ വേണ്ട ഭാഗം വരെ വലിച്ചാല്‍ മതിയാവും).
b) മെനുവില്‍ എഫക്റ്റ്‌ -> നോയ്സ്‌ റിമൂവല്‍ സെലക്റ്റ്‌ ചെയ്യുക. വന്ന ഡയലോഗ്‌ ബോക്സില്‍ ഗെറ്റ്‌ നോയ്സ്‌ പ്രൊഫെയില്‍ എന്ന ബട്ടന്‍ ഞെക്കുക.
c) മുഴുവന്‍ റെക്കോഡിങ്ങും സെലക്റ്റ്‌ ചെയ്യുക
d) വീണ്ടും മെനുവില്‍ എഫക്റ്റ്‌ -> നോയ്സ്‌ റിമൂവല്‍ സെലക്റ്റ്‌ ചെയ്യുക. എന്നിട്ട്‌ പ്രിവ്യൂ എന്ന ബട്ടന്‍ ഞെക്കി കേട്ടു നോക്കുക. ആവശ്യാനുസരണം നടുക്കുള്ള സ്ലൈഡറിനെ ഇടത്തോട്ടോ വലത്തോട്ടോ നീക്കി, ഏറ്റവും നല്ലത്‌ എന്നു തോന്നുന്ന സ്ഥലത്തു വെച്ച്‌ റിമൂവ്‌ നോയ്സ്‌ എന്ന ബട്ടണ്‍ ഞെക്കുക. റെക്കോഡിങ്ങിന്റെ വലിപ്പം അനുസരിച്ചും കമ്പ്യൂട്ടറിന്റെ കഴിവും അനുസരിച്ചു ഇത്‌ ചെയ്തു തീരാനുള്ള സമയം മാറാം.

ശ്രദ്ധിക്കുക: എത്ര ശ്രമിച്ചിട്ടും നോയ്സ്‌ പോകുന്നില്ല അല്ലെങ്കില്‍ ശബ്ദം റോബോട്ടിനേപ്പോലിരിക്കുന്നെങ്കില്‍, നോയ്സ്‌ പ്രൊഫൈലിങ്ങ്‌ ശരിയായില്ല എന്ന് മനസ്സിലാക്കാം. അങ്ങനെയെങ്കില്‍, മറ്റൊരു സ്ഥലത്തു നിന്നും അല്ലെങ്കില്‍ മറ്റൊരു വലിപ്പത്തിലുള്ള സാമ്പിള്‍ എടുത്ത്‌ ഈ പറഞ്ഞ സ്റ്റെപ്പുകള്‍ ആവര്‍ത്തിക്കുക.
ഇപ്പോള്‍

2. അനാവശ്യമായ മറ്റു ശബ്ദങ്ങള്‍ (ഉദാഹരണത്തിന്‌ മൈക്കില്‍ കയ്‌ തട്ടിയത്‌, ശ്വാസം വലിച്ചത്‌)
കൂട്ടത്തില്‍ ഇല്ലാതാക്കാന്‍ ബുദ്ധിമുട്ടുണ്ടാവാന്‍ സാധ്യത ഉള്ള ഇനമാണിത്‌. നമുക്ക്‌ വേണ്ട ശബ്ദങ്ങളോട്‌ ഇഴപിരിഞ്ഞു കിടക്കുന്നില്ലെങ്കില്‍, നമുക്കിതിനെ എളുപ്പത്തില്‍ മായ്ച്ച്‌ കളയാം. ഇഴപിരിഞ്ഞു കിടക്കാത്ത അപശബ്ദങ്ങളെ തരംഗ രൂപത്തില്‍ നിന്നു സെലക്റ്റ്‌ ചെയ്ത്‌ ഡിലീറ്റ്‌ ചെയ്താല്‍ മതിയാവും.

ഉദാഹരണത്തിന്‌, മേളില്‍ കാണുന്ന ഫയലിന്റെ ഒന്നു വൃത്തിയാക്കിയാക്കിയ രൂപം ഇവിടെ കേള്‍ക്കാം

powered by ODEO
അനാവശ്യമായിരുന്ന തട്ടും മുട്ടും ശ്വാസമെടുക്കുന്ന ശബ്ദവും ഒക്കെ ഇല്ലാതായി കുറച്ചുകൂടി നല്ല രൂപത്തിലായതു ശ്രദ്ധിക്കുമല്ലോ?

എക്കോ/പ്രതിധ്വനി:
ഇനി അല്‍പ്പം എക്കോ കൊടുത്താലോ?
എക്കോ അല്ലെങ്കില്‍ പ്രതിധ്വനി ശബ്ദത്തിന്‌ ഒരു തുടര്‍ച്ച നല്‍കി ശ്രവണസുഖം വര്‍ദ്ധിപ്പിക്കാന്‍ സഹായിക്കുന്നു. ഇതിനായി എക്കോ കൊടുക്കേണ്ട സ്ഥലം സെലക്റ്റ്‌ ചെയ്ത്‌ മെനുവില്‍ നിന്ന് എഫക്റ്റ്‌സ്‌ -> എക്കോ സെലക്റ്റ്‌ ചെയ്യുക. അവിടെ നമ്മള്‍ രണ്ട്‌ കാര്യങ്ങള്‍ കൊടുക്കേണ്ടതുണ്ട്‌
1. ഡിലേ - ഒരു ശബ്ദം എത്ര നേരത്തേക്ക്‌ പ്രതിധ്വനിക്കണം എന്ന്
2. ഡീക്കേ - ഒരു ശബ്ദത്തിന്റെ പ്രതിധ്വനി എത്ര പെട്ടെന്ന് ഇല്ലാതാവണം എന്ന്

വളരെ ചെറിയ ഒരു വില കൊടുത്ത്‌ തുടങ്ങാം.. താഴെ കൊടുത്തിരിക്കുന്ന ഫയലില്‍ ഞാന്‍ ഡിലേ 0.15 ഉം ഡീക്കേ 0.21 ഉം ആണു കൊടുത്തിരിക്കുന്നത്‌. ഒരു വില കൊടുത്ത്‌ പ്രിവ്യൂ അടിച്ചു നോക്കുക. അവനവനു കേള്‍ക്കാന്‍ ഏറ്റവും സുഖം തോന്നുന്ന ഒരു വിലയില്‍ പരീക്ഷണം അവസാനിപ്പിച്ച്‌ ഓക്കെ അടിക്കുക.

ഇതാ:


powered by ODEO

ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങള്‍:
1. എപ്പോള്‍ അബദ്ധം പറ്റിയാലും അണ്‍ഡൂ ഉപയോഗിക്കുക.
2. കേട്ടിഷ്ടമായാല്‍ ബാക്ക്‌ അപ്പ്‌ എടുക്കുക
3. ഒരിക്കല്‍ ശരിയായില്ലെങ്കില്‍ ദേഷ്യപ്പെടാതെ വീണ്ടും ശ്രമിക്കുക
4. ഒരു റെക്കോഡിങ്ങിനു ചേര്‍ന്ന വില എല്ലാത്തിനും ഇടാതിരിക്കുക. ഓരോ റെക്കോഡിങ്ങിനും അതിന്റേതായ വിലകള്‍ കണ്ടെത്തുക.

-ശനിയന്‍, ആദിത്യന്‍

മള്‍ട്ടി മീഡിയ

മറ്റു പേജുകളിലേയ്ക്ക് ലിങ്ക് കൊടുക്കുക, അല്ലെങ്കില്‍ ഒരു ഓഡിയോ/വീഡിയോ ഫയല്‍ പേജില്‍ കൊടുക്കുക തുടങ്ങിയ കാര്യങ്ങള്‍ എങ്ങനെ ചെയ്യാം എന്ന് നോക്കാം. ഈ കാര്യങ്ങള്‍ക്കൊക്കെ ആവശ്യമായത് ഒരു URL (യൂണിഫോം റിസോഴ്സ് ലൊക്കേറ്റര്‍) ആണ്. മറ്റു പേജുകളിലേയ്ക്ക് ലിങ്ക് കൊടുക്കുമ്പോള്‍ ആ പേജിന്റെ URL ഉപയോഗിയ്ക്കാം. ഒരു ഓഡിയോ/വീഡിയോ ഫയല്‍ പോസ്റ്റില്‍ കൊടുക്കുമ്പോള്‍ ആ ഫയല്‍ ഏതെങ്കിലും സൈറ്റില്‍ അപ്പ്‌ലോഡ് ചെയ്ത് അങ്ങനെ കിട്ടുന്ന URL ആണ് ഉപയോഗിയ്ക്കേണ്ടത്. ബ്ലോഗറില്‍ വലിയ ഫയലുകള്‍ അപ്പ്‌ലോഡ് ചെയ്യാന്‍ എളുപ്പമല്ല. അതു കൊണ്ട് ഫയല്‍ അപ്പ്‌ലോഡ് അനുവദിയ്ക്കുന്ന മറ്റു സൈറ്റുകളില്‍ (ഉദാ: ഗൂഗിള്‍ പേജസ് ) അപ്പ്‌ലോഡ് ചെയ്യുക. ഇങ്ങനെ അപ്പ്‌ലോഡ് ചെയ്തു കഴിഞ്ഞാല്‍ ആ ഫയലിലേയ്ക്കിള്ള URL കിട്ടും. അതു ഏകദേശം ഇങ്ങനെ ആയിരിയ്ക്കും -> http://www.site.com/mode/audiofile.mp3

ഈ URL കിട്ടിക്കഴിഞ്ഞാല്‍ പിന്നെ ബ്ലോഗില്‍ പോസ്റ്റ് ചെയ്യുന്നതെങ്ങനെ എന്നു നോക്കാം.

1. പാട്ട്/Audio

താഴെ കാണുന്ന HTML കോഡ് അതേ പടി കോപ്പി ചെയ്ത് പോസ്റ്റ് കമ്പോസ് ചെയ്തു കൊണ്ടിരിയ്ക്കുന്ന Edit Html എന്ന ജാലകത്തില്‍ പെയ്‌സ്റ്റ് ചെയ്യുക.

<embed
src="http://www.site.com/mode/audiofile.mp3"
type="application/octet-stream"
autostart="false"
width="360"
height="50"
align="absMiddle"
>
</embed>

ഇനി src="http://www.site.com/mode/audiofile.mp3" എന്ന ഭാഗം മാറ്റി നിങ്ങളുടെ mp3 ഫയലിലേയ്ക്കുള്ള URL കൊടുക്കുക. ഇത്രയും ചെയ്താല്‍ മാത്രം മതി. ഇനി പ്രിവ്യൂ നോക്കി എല്ലാം ഭംഗിയായി എന്നുറപ്പു വരുത്തിയിട്ട് പബ്ലിഷ് ചെയ്യാം.

2. ആട്ടം/Video

ഇതും പാട്ട് ചെയ്യുന്നതു പോലെ തന്നെയാണ്.
താഴെ കാണുന്ന HTML കോഡ് അതേ പടി കോപ്പി ചെയ്ത് പോസ്റ്റ് കമ്പോസ് ചെയ്തു കൊണ്ടിരിയ്ക്കുന്ന Edit Html എന്ന ജാലകത്തില്‍ പെയ്‌സ്റ്റ് ചെയ്യുക.

<embed
src="http://www.site.com/mode/videofile.mpeg"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
autostart="false"
width="360"
height="323"
showstatusbar="1"
enablecontextmenu="false"
transparentstart="1"
loop="0"
controller="true"
>
</embed>

ഇനി src="http://www.site.com/mode/videofile.mpeg" എന്ന ഭാഗം മാറ്റി നിങ്ങളുടെ video ഫയലിലേയ്ക്കുള്ള URL കൊടുക്കുക. ഇത്രയും ചെയ്താല്‍ മാത്രം മതി. ഇനി പ്രിവ്യൂ നോക്കി എല്ലാം ഭംഗിയായി എന്നുറപ്പു വരുത്തിയിട്ട് പബ്ലിഷ് ചെയ്യാം.

embed ടാഗിന്റെ ആട്രിബ്യൂട്ട്‌സ്‌ ആണു ഓരോ ലൈനിലും കൊടുത്തിരിക്കുന്നത്. ഇതില്‍ src ആട്രിബ്യൂട്ട് മാത്രം ഉപയോഗിച്ചാലും Internet Explorer ന്റെ പുതിയ വേര്‍ഷനുകള്‍ക്കു ധാരാളം. type, autostart, width, height, alignment തുടങ്ങിയ ആട്രിബ്യൂട്ട്‌സ്‌ ആവശ്യമെങ്കില്‍ ഉപയോഗിക്കാം...

height, width തുടങ്ങിയവയ്ക്ക് പല വിലകള്‍ നല്‍കി പരീക്ഷിച്ച് നിങ്ങള്‍ക്ക് ആവശ്യമുള്ള രീതിയില്‍ പോസ്റ്റില്‍ കാണിയ്ക്കാം. autostart="false" എന്നതിനു പകരം autostart="true" എന്നു കൊടുത്താല്‍ പേജ് ലോഡ് ചെയ്തു വരുമ്പോള്‍ തന്നെ ഓഡിയോ/വീഡിയോ പ്ലേ ചെയ്തു തുടങ്ങും.

3. കണ്ണി/link

ഏതു വാക്കാണോ(വാക്കുകളാണോ) ലിങ്ക്‌ ആക്കേണ്ടത്‌ ആ വാക്ക്‌ ഒരു ‘ആങ്കര്‍’ ടാഗ്-നുള്ളില്‍ കൊടുത്താല്‍ മതി.
ദാ ഇങ്ങനെ.
<a href="http://www.google.com/">Text for link </a>

<a >എന്നതിനെ ഓപ്പണിങ്ങ്‌ ടാഗ് എന്നും </a>എന്നതിനെ ക്ലോസിംഗ്‌ ടാഗ്‌ എന്നും വിളിക്കാറുണ്ട്. ഓപ്പണിങ്ങ്‌ ടാഗിന്റെ ഒരു ആട്രിബ്യൂട്ട്‌ (Attribute) ആണ്‌ href.

ഇനി ഈ ലിങ്ക്‌ ചെയ്യുന്ന പേജ്‌ പുതിയ ഒരു ജാലകത്തില്‍ തുറക്കണം എന്നുണ്ടെങ്കില്‍ target="blank" എന്ന മറ്റൊരു ആട്രിബ്യൂട്ട്‌ കൂ‍ടി ഓപ്പണിംഗ്‌ ടാഗില്‍ ചേര്‍ത്ത്താല്‍ മതി.

അപ്പൊ ദാ ഇങ്ങനെ ആവും...
<a href="http://www.google.com/" target="blank">Text for link </a>

4. പാട്ട്/Audio ബ്ലോഗ് ചെയ്യുന്ന വിധം അധവാ പോഡ്‌കാസ്റ്റിംഗ്

ഓഡിയോ ഹോസ്റ്റിങ്ങ് അനുവദിയ്ക്കുന്ന ഏതെങ്കിലും സൈറ്റ് വഴി ചെയ്യാന്‍ എളുപ്പമാണ്. അതിലൊന്നില്‍ എങ്ങനെ ചെയ്യാം എന്നു നോക്കാം.
http://odeo.com/ പോലെയുള്ള സൈറ്റില്‍ പോകുക.
സൈന്‍-അപ്പ്(രെജിസ്റ്റര്‍) ചെയ്യുക.
ലോഗിന്‍ ചെയ്യുക.
Start your own podcast with the Odeo Studio! എന്ന ഒരു ലിങ്കോ RECORD എന്ന ലിങ്കോ കണ്ടുപിടിച്ച് ക്ലിക്ക് ചെയ്യുക.
അടുത്ത പേജിലെ രണ്ട് ലിങ്കുകളാണ് Upload Audio from Your Computer എന്നതും Record New Audio എന്നതും. ആവശ്യമുള്ളതു തിരഞ്ഞെടുക്കാം. അവസാനം എല്ലാം അപ്പ്‌ലോഡ്/റെക്കോര്‍ഡ് ചെയ്തു സേവ് ചെയ്തു കഴിഞ്ഞാല്‍ Put this Audio on your Web site എന്ന ഒരു ഹെഡിംഗ് ഉണ്ട്. അതിനു താഴെ ഉള്ള ടെക്‌സ്റ്റ് ബോക്സില്‍ കാണുന്ന കാര്യങ്ങള്‍ മുഴുവന്‍ കോപ്പി ചെയ്ത് നമ്മുടെ ബ്ലോഗ് പേജില്‍ കൊണ്ടു പോയി പെയ്‌സ്റ്റ് ചെയ്താല്‍ മതി.
യഥാര്‍ത്ഥത്തില്‍ ഈ കിട്ടുന്ന കോഡും ഒരു embed ടാഗ് തന്നെയാണ്. അവര്‍ ആ കോഡ് കിട്ടുന്ന രീതി ഒന്നു ലളിതവത്കരിച്ചെന്നു മാത്രം.

ഓഡിയോ ബ്ലോഗിങ്ങ്/ പോഡ്‌കാസ്റ്റിംഗിനുള്ള മറ്റു ചില സൈറ്റുകള്‍
ഓഡിയോബ്ലോഗര്‍.കോം
ഓഡിയോബ്ലോഗ്.കോം
പോഡോമാറ്റിക്.കോം
ഫ്രീ റെക്കോഡിങ്ങ് ടൂള്‍:
http://audacity.sourceforge.net/

-ശനിയന്‍, ആദിത്യന്‍

എച്ച്. ടി. എം. എല്‍ : ടെക്‌സ്റ്റ് (എച് റ്റി എം എല്‍ -2)

ടെക്‌സ്റ്റ് (എഴുത്ത്) ഫോര്‍മാറ്റ് ചെയ്യുന്ന ടാഗുകളെപ്പറ്റിയാവട്ടെ ആദ്യം.

1. <B>
ടെക്‌സ്റ്റ് ബോള്‍ഡ്(കടുപ്പത്തില്‍) ആയി കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം ഉണ്ട്. <B> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </B> എന്ന അവസാനവും. കടുപ്പത്തില്‍ ആക്കേണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<B>ജോസഫ് </B> അലക്‌സ്	ജോസഫ് അലക്‌സ്

2. <I>
ടെക്‌സ്റ്റ് ഇറ്റാലിക്‌സ്(ചെരിഞ്ഞ്?) ആയി കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഇറ്റാലിക്സില്‍ ആക്കേണ്ട ടെക്‌സ്റ്റ് ഈ ടാഗിന്റെ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
ജോസഫ് <I>അലക്‌സ്</I>	ജോസഫ് അലക്‌സ്

3. <U>
ടെക്‌സ്റ്റിന് അടിവര (അണ്ടര്‍ ലൈന്‍) ഇടാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. അടിവരയിടേണ്ട ടെക്‌സ്റ്റ് ഈ ടാഗിന്റെ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
എം എന്‍ <U>കാര്‍ത്തികേയന്‍</U>	എം എന്‍ കാര്‍ത്തികേയന്‍

4. തലക്കെട്ടുകള്‍ (ഹെഡിങ്ങ്സ്)
പാരഗ്രാഫുകളുടെയും സെക്ഷനുകളുടെയും പലവലിപ്പത്തിലുള്ള തലക്കെട്ടുകള്‍ കാണിക്കാന്‍ എച്ച്. ടി. എം. എല്‍-ല്‍ അഞ്ചു തരം തലക്കെട്ടു ടാഗുകള്‍ ഉണ്ട് - <H1> മുതല്‍ <H5> വരെ. <H1> ആണ് ഏറ്റവും വലുത്, <H5> ഏറ്റവും ചെറുതും.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<H1>വീര ഭദ്രന്‍</H1>	വീര ഭദ്രന്‍
<H2>വീര ഭദ്രന്‍</H2>	വീര ഭദ്രന്‍
<H3>സ്വാമിനാഥന്‍</H3>	സ്വാമിനാഥന്‍
<H4>രാ‍മ ഭദ്രന്‍</H4>	രാ‍മ ഭദ്രന്‍
<H5>രാ‍മ ഭദ്രന്‍</H5>	രാ‍മ ഭദ്രന്‍

5. ഖണ്ഡിക (പാരഗ്രാഫ്) <P>
എഴുത്ത് ഖണ്ഡിക തിരിയ്ക്കാന്‍ ഈ ടാഗ് ഉപയോഗിയ്ക്കാം. ഓരോ ഖണ്ഡികയുടെയും ആദ്യവും അവസാനവും ഈ ടാഗിന്റെ ആദ്യ, അവസാന ഭാഗങ്ങള്‍ ഉപയോഗിച്ചാല്‍ മതി.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<P>ഒന്നാമത്തെ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </P><P>ഇതു രണ്ടാമത്തെ പാരഗ്രാഫ്.രണ്ടാമത്തെ പാരഗ്രാഫ് പുതിയ ഒരു വരിയില്‍ തുടങ്ങിയതു ശ്രദ്ധിയ്ക്കുക.</P>	ഒന്നാമത്തെ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... ഇതു രണ്ടാമത്തെ പാരഗ്രാഫ്.രണ്ടാമത്തെ പാരഗ്രാഫ് പുതിയ ഒരു വരിയില്‍ തുടങ്ങിയതു ശ്രദ്ധിയ്ക്കുക.

<P> ടാഗിന് ഒരു ആട്രിബ്യൂട്ട് ആയി align എന്നത് ഉപയോഗിയ്ക്കാം... പാരഗ്രാഫിന്റെ അലൈന്‍മെന്റ് ശരിയാക്കാന്‍ ആണ് ഈ ആട്രിബ്യൂട്ട് ഉപയോഗിയ്ക്കുന്നത്.align ന്റെ വിലകള്‍ left, right, center, justify എന്നിവയില്‍ ഏതെങ്കിലുമാവാം.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<P align=“left“ > അലൈന്‍മെന്റ് ഇടതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </P>	അലൈന്‍മെന്റ് ഇടതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം...
<P align=“right“ > അലൈന്‍മെന്റ് വലതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </P>	അലൈന്‍മെന്റ് വലതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം...
<P align=“center“ > അലൈന്‍മെന്റ് നടുവിലുള്ള പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </P>	അലൈന്‍മെന്റ് നടുവിലുള്ള പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം...
<P align=“justify“ > അലൈന്‍മെന്റ് ജസ്റ്റിഫൈ ചെയ്തിരിയ്ക്കുന്ന പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </P>	അലൈന്‍മെന്റ് ജസ്റ്റിഫൈ ചെയ്തിരിയ്ക്കുന്ന പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം...

6. സ്പാന്‍ - <SPAN>
പാരഗ്രാഫ് ആയി തിരിയ്ക്കാതെ തന്നെ ഒരു ഭാഗം ടെക്‌സ്റ്റ് ഫോര്‍മാറ്റ് ചെയ്യാനാണ് സ്പാന്‍ ഉപയോഗിയ്കുന്നത്. സ്പാനും പാരഗ്രാഫ് ടാഗും ഏകദേശം ഒരുപോലെയാണ് ഉപയോഗിയ്ക്കുന്നത്. സ്പാന്‍ പുതിയ വരിയില്‍ തുടങ്ങുന്നില്ല എന്ന് ഓര്‍ത്തിരിയ്ക്കുക.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
<SPAN>ഒന്നാമത്തെ സ്പാനിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </SPAN><SPAN>ഇതു രണ്ടാമത്തെ സ്പാന്‍.രണ്ടാമത്തെ സ്പാന്‍ പുതിയ ഒരു വരിയില്‍ തുടങ്ങാത്തതു ശ്രദ്ധിയ്ക്കുക.</SPAN>	ഒന്നാമത്തെ സ്പാനിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... ഇതു രണ്ടാമത്തെ സ്പാന്‍.രണ്ടാമത്തെ സ്പാന്‍ പുതിയ ഒരു വരിയില്‍ തുടങ്ങാത്തതു ശ്രദ്ധിയ്ക്കുക.

7. തിരശ്ചീന വര - <HR>
തിരശ്ചീനമായ ഒരു വര വരയ്ക്കാനാണ് ഈ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ലാത്ത ഒരു ടാഗാണിത്.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
അടിയൊഴുക്കുകള്‍<HR> മൂന്നാം മുറ	അടിയൊഴുക്കുകള്‍ മൂന്നാം മുറ

8. ബ്രെയ്‌ക്ക് - <BR>
എഴുത്ത് അടുത്ത വരിയില്‍ തുടങ്ങാന്‍ ഈ ടാഗ് ഉപയോഗിയ്ക്കാം. ഇതിനും ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ല. ഒന്നിലധികം <BR> അടുത്തടുത്ത് ഉപയോഗിച്ച് വരികള്‍ തമ്മിലുള്ള അകലം ക്രമീകരിയ്ക്കാവുന്നതാണ്‍.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
സാഗര്‍ <BR> ഏലിയാസ് <BR><BR>ജാക്കി	സാഗര്‍ ഏലിയാസ് ജാക്കി

9. പ്രീ-ഫോര്‍മാറ്റിംഗ് -<PRE>
എച്.ടി.എം.എല്‍ പേജിലെ ശൂന്യമായ സ്ഥലങ്ങള്‍ ബ്രൌസറില്‍ കാണിക്കാറില്ല. രണ്ടു വാക്കുകള്‍ക്കിടയില്‍ ഒന്നിലധികം ശൂന്യസ്ഥലം ഉണ്ടെങ്കില്‍ ഒരു ശൂന്യസ്ഥലം മാത്രമെ ബ്രൌസറില്‍ കാണിക്കുകയുള്ളു. അതേ പോലെ <BR> എന്ന് ഉപയോഗിയ്ക്കാതെ പുതിയ ഒരു വരിയില്‍ എഴുത്ത് തുടങ്ങിയാല്‍ ബ്രൌസറില്‍ കാണിക്കുമ്പോള്‍ ആ ഭാഗം ഒരു പുതിയ വരിയില്‍ തുടങ്ങണം എന്നില്ല. അതു വരെയുള്ള എഴുത്തിന്റെ തുടര്‍ച്ചയായി മാത്രമേ വരൂ. ഇനി അധവാ ഇതു പോലെ ശൂന്യസ്ഥലങ്ങളും പുതിയ വരികളും ഒക്കെ ടൈപ്പ് ചെയ്യുന്നതു പോലെ തന്നെ ബ്രൌസറില്‍ കാണണമെങ്കില്‍ <PRE> എന്ന പ്രീഫോര്‍മാറ്റിംഗ് ടാഗ് ഉപയോഗിയ്ക്കണം. <PRE>-യുടെ ആദ്യ അവസാന ടാഗുകള്‍ക്കിടയിലുള്ള ഭാഗം അതേ പോലെ തന്നെ ബ്രൌസറില്‍ കാണിയ്ക്കും.

ഉദാഹരണം	ബ്രൌസറില്‍ കാണുന്നത്
പ്രീ ഇല്ലാതെ സ്തലം വിട്ട് അടുത്ത വരിയില്‍ എഴുതിയാല്‍	പ്രീ ഇല്ലാതെ സ്തലം വിട്ട് അടുത്ത വരിയില്‍ എഴുതിയാല്‍
<PRE>ഒന്നു മുതല്‍ ഒമ്പതു വരെ</PRE>	ഒന്നു മുതല്‍ ഒമ്പതു വരെ

ഇത്രയൊക്കെ ആയ സ്ഥിതിയ്ക്ക് ഒരു പേജ് മുഴുവനായി ഉണ്ടാക്കി നോക്കാം. ഒരു നോട്ട്പാഡ് ജാലകം തുറക്കുക. താഴ കൊടുത്തിരിയ്ക്കുന്ന ഭാഗം ഇവിടുന്ന് പകര്‍ത്തി അതിലെയ്ക്ക് പതിയ്ക്കുക.

<HTML>
<HEAD>
<TITLE>wELCOME tO mY wORLD</TITLE>
</HEAD>

<BODY>
<h1>Malayalam Cinema</h1>
Contributions of Mammukkoya and Pappu to Malayalam film industry can not be forgotten easily.
<P>
<B>Mr. Kuthiravattam Pappu</B> explaining the way he maneuvered a bus down the so called <I>Thaamarassery Churam</I> will surely remain etched in the movie going public's mind for a long time to come.
</P>
<HR>
<I>Gafoorkka</I>, the visa agent who propels a number of innocent victims to the Gulf Emirates in <I>Urus</I> is a character
portrayed by the great actor <B>Kozhikkodan Mammukkoya </B>.
</BODY>
</HTML>

ഇനി ആ പേജ് എന്തെങ്കിലും പേരില്‍ സേവ് ചെയ്യണം. ശ്രദ്ധിയ്കേണ്ട കാര്യം ഫയലായി സേവ് ചെയ്യുമ്പോള്‍ അതിന്റെ എക്‌സ്‌റ്റെന്‍ഷന്‍ .html എന്നോ .htm എന്നോ എന്നായിരിയ്ക്കണം. വേണമെങ്കില്‍ പേജ് malayalam.html എന്ന് പേരില്‍ സേവ് ചെയ്യാം.

അടുത്ത പടിയായി വേണ്ടത്, ഒരു ബ്രൌസര്‍ ജാലകം തുറക്കുക എന്നതാണ്. ഇന്റര്‍നെറ്റ് എക്‌സ്‌പ്ലോറര്‍ തന്നെ ആയിക്കോട്ടെ. ഫയര്‍ഫോക്‌സോ നെറ്റ്സ്കെയ്പ്പോ എന്തായാലും മതി. ബ്രൌസര്‍-ഇല്‍ നിന്നും നമ്മള്‍ നേരത്തെ ഉണ്ടാക്കിയ malayalam.html എന്ന ഫയല്‍ തുറക്കുക എന്നതാണ് ആടുത്ത പടി.പേജ് തുറക്കാനായി ഫയല്‍ -> ഓപ്പണ്‍ എന്ന ഡയലോഗ് ബോക്‌സ് ഉപയോഗിയ്ക്കാം. ഫയല്‍ ബ്രൌസറില്‍ തുറക്കൂ, ഇതാ നിങ്ങളുടെ എച്. ടി. എം. എല്‍ പെജ് റെഡി.

ഇനി <BODY>-ക്കും </BODY>-ക്കും ഇടയ്ക്കുള്ള ഭാഗം ആവശ്യാനുസരണം മാറ്റി പല പേജുകളും സൃഷ്‌ടിയ്ക്കാം. കൂടുതല്‍ എഴുത്തും ടാഗുകളും ചേര്‍ക്കാം.

- ആദിത്യന്‍,ശനിയന്‍
(തുടരും..)

വരൂ, എച്. ടി. എം. എലിനെ പരിചയപ്പെടാം..

ബൂലോകരേ,

വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച്‌ ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. കമ്പ്യൂട്ടര്‍ ഉപയോഗിക്കാനറിയുന്ന ആര്‍ക്കും, അധികം ബുദ്ധിമുട്ടില്ലാതെ തന്നെ എച്‌ ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കാം എന്നതാണ്‌ ഈ ഭാഷയുടെ പ്രത്യേകത. ശരിക്കു പറഞ്ഞാ,ല്‍ ഇതൊരു ഭാഷയെന്നതിനേക്കാള്‍ "ഇത്‌ എങ്ങനെ കാണിക്കണം" എന്നതിനുള്ള നിര്‍ദ്ദേശങ്ങളാണ്‌.

ആദ്യമായി, ഇതൊക്കെ ചെയ്തു നോക്കാന്‍ നമുക്ക്‌ കമ്പ്യൂട്ടറില്‍ എന്തൊക്കെ വേണം എന്ന്‌ നോക്കാം.

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 എന്ന എക്സ്റ്റന്‍ഷനൊടു കൂടിയ ഒരു ടെക്സ്റ്റ്‌ ഫയലാണ്‌.

-ശനിയന്‍, ആദിത്യന്‍
(തുടരും..)

വിഷയം || Subject:

വിവര സാങ്കേതികവിദ്യയുടെ അടിസ്ഥാനപരമായ ആശയങ്ങള്‍ ഒരു സാധാരണ മനുഷ്യനു മനസ്സിലാവുന്ന രീതിയില്‍ അവതരിപ്പിക്കാനുള്ള ഒരു ശ്രമമാണിത്‌. കുറച്ചുനാള്‍ അദ്ധ്യാപകനായതിന്റെ അസുഖം വിടാത്തതാണ്‌ ഇത്‌ തുടങ്ങാനുള്ള പ്രചോദനം. വിവരസാങ്കേതിക വിദ്യയുടെ പുതിയ വിദ്യാര്‍ത്ഥികള്‍ക്ക്‌ എന്നാല്‍ കഴിയുന്ന സഹായം. അതിന്റെ ഗുരുക്കന്മാര്‍ എന്റെ തെറ്റുകള്‍ ചൂണ്ടിക്കാണിച്ചുതരുമെന്നു കരുതുന്നു.
എഴുതാന്‍ താല്‍പ്പര്യമുള്ളവര്‍ക്കു സ്വാഗതം : മെയില്‍ അയക്കൂ - learn@jyothis.net

---

This is an attempt to explain the fundamentals of computing in a layman's language, Inspired by the time I spent as a lecturer. I'm trying to help the newbies to the field, and I hope that the great philosophers of the subject will guide my way.

Those who are willing to join hands, please mail to learn@jyothis.net