MMK: HTML Tutorials

Showing posts with label HTML Tutorials. Show all posts

HTML

<br />
<h3 class="post-title entry-title" itemprop="name">
വരൂ, എച്. ടി. എം. എലിനെ പരിചയപ്പെടാം..
</h3>
<div>
<br /></div>
<div>
<br /></div>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-115249880649906643" itemprop="description articleBody">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-xr0LadgsCVUeAW2GwJkplW5K9qjls0KnY11h87aLkVHkGZi7E_a5nq0rQfRx7o4u83sjRrvosBqflQRJuYwsHAxB8pPIE4QTF0D1bWncDAUwEGI20njukzYaLqj4TyJPiFBUrEpJGU/s1600/HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-xr0LadgsCVUeAW2GwJkplW5K9qjls0KnY11h87aLkVHkGZi7E_a5nq0rQfRx7o4u83sjRrvosBqflQRJuYwsHAxB8pPIE4QTF0D1bWncDAUwEGI20njukzYaLqj4TyJPiFBUrEpJGU/s1600/HTML.png" /></a></div>
<br />
<br />
<br />
ബൂലോകരേ,<br />
<br />
വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ 
ഭാഷയായ എച്‌ ടി എം എല്‍-നെ പരിചയപ്പെടുത്താനുള്ള ഒരു ചെറിയ ശ്രമമാണിത്‌.. 
കമ്പ്യൂട്ടര്‍ ഉപയോഗിക്കാനറിയുന്ന ആര്‍ക്കും, അധികം ബുദ്ധിമുട്ടില്ലാതെ 
തന്നെ എച്‌ ടി എം എല്‍ പേജുകള്‍ നിര്‍മ്മിക്കാം എന്നതാണ്‌ ഈ ഭാഷയുടെ 
പ്രത്യേകത. ശരിക്കു പറഞ്ഞാ,ല്‍ ഇതൊരു ഭാഷയെന്നതിനേക്കാള്‍ "ഇത്‌ എങ്ങനെ 
കാണിക്കണം" എന്നതിനുള്ള നിര്‍ദ്ദേശങ്ങളാണ്‌.<br />
<br />
ആദ്യമായി, ഇതൊക്കെ ചെയ്തു നോക്കാന്‍ നമുക്ക്‌ കമ്പ്യൂട്ടറില്‍ എന്തൊക്കെ വേണം എന്ന്‌ നോക്കാം.<br />
<br />
1. ഒരു ടെക്സ്റ്റ്‌ എഡിറ്റര്‍<br />
<br />
(വിന്‍ഡോസ്‌
 ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ നോട്ട്‌പാഡും ലിനക്സ്‌/യുണിക്സ്‌ 
ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ vi എഡിറ്ററും, മാക്ക്‌ ഉപയോഗിക്കുന്നവര്‍ക്ക്‌ 
Plain Text Editor-ഉം മതിയാവും. ഇനി അതില്‍ കൂടുതല്‍ വേണം എന്നുള്ളവര്‍ - 
പ്രത്യേകിച്ച്‌ കമ്പ്യൂട്ടര്‍ സയന്‍സ്‌ വിദ്യാര്‍ഥികള്‍- നല്ല ഒരു എച്‌ ടി 
എം എല്‍ എഡിറ്ററേ ഡൌണ്‍ലോഡ്‌ ചെയ്യുക. <a href="http://www.chami.com/">http://www.chami.com</a>-
 ന്റെ ഫ്രീ എഡിറ്റര്‍ ആയ HTMLKit ആണ്‌ ഞാന്‍ സാധാരണ ഉപയോഗിക്കാറ്‌. 
നമ്മള്‍ക്ക്‌ എച്‌ ടി എം എല്‍ പേജ്‌ അടിച്ചുണ്ടാക്കാനാണ്‌ എഡിറ്റര്‍)<br />
<br />
2. ഒരു ബ്രൌസര്‍<br />
<br />
(ഇന്റര്‍നെറ്റ്‌ എക്സ്‌പ്ലോറര്‍/ ഫയര്‍ഫോക്സ്‌/കോണ്‍ക്വറര്‍.<br />
നമ്മള്‍
 എഡിറ്ററില്‍ അടിച്ചുണ്ടാക്കിയ പേജ്‌ കാണാനാണ്‌ ബ്രൌസര്‍. നാം ടാഗുകള്‍ വഴി
 കൊടുത്തിരിക്കുന്ന നിര്‍ദ്ദേശങ്ങള്‍ക്കനുസൃതമായി ബ്രൌസര്‍ പേജ്‌ 
ഫോര്‍മാറ്റ്‌ ചെയ്ത്‌ കാണിക്കുന്നു.)<br />
<br />
<b>എന്താണ്‌ എച്‌ ടി എം എല്‍</b><br />
ഇന്റര്‍നെറ്റിലെ
 ഒരു പേജിലെ വിവരങ്ങളെ എങ്ങനെ കാണിക്കണം എന്നത്‌ ബ്രൌസറിനു പറഞ്ഞു 
കൊടുക്കാനുള്ള ഭാഷയാണ്‌ എച്‌ ടി എം എല്‍. ടെക്സ്റ്റും ലിങ്കുകളും അടങ്ങിയ 
ഒരു പേജിനകത്ത്‌ ഓരോ ഭാഗങ്ങളും പ്രത്യേക തരത്തിലുള്ള ഒരു 'ടാഗ്‌' 
ഉപയോഗിച്ച്‌ അടയാളപ്പെടുത്തിയാണ്‌ നമ്മള്‍ ബ്രൌസറിനു മനസ്സിലാവുന്ന 
ഭാഷയില്‍ ആ പേജിനെ രൂപപ്പെടുത്തുന്നത്‌. ഒരു ടാഗ്‌ എന്നാല്‍ < > 
ബ്രാക്കറ്റുകള്‍ക്കിടെ നിശ്ചിത വാക്കു ചേര്‍ത്തതാണ്‌. ഉദാഹരണത്തിന്‌, 
നമുക്ക്‌ ആ പേജിന്റെ തലവാചകം (തെറ്റിദ്ധരിക്കരുത്‌, ബ്രൌസറിന്റെ മേലെ 
കാണിക്കുന്നതാണ്‌, പേജില്‍ കാണുന്നതല്ലേ!) <TITLE> എന്ന ടാഗ്‌ 
ഉപയോഗിച്ച്‌ അടയാളപ്പെടുത്താം. ഈ പറഞ്ഞതിനെ നമ്മള്‍ ഓപ്പണിങ്ങ്‌ ടാഗ്‌ 
എന്നു വിളിക്കും. തുറന്നാല്‍ അടക്കണം എന്ന നിയമം ഇവിടേയും ബാധകമാണ്‌. 
</TITLE> എന്ന ടാഗ്‌ ഉപയോഗിച്ച്‌ നമ്മള്‍ക്ക്‌ തലവാചകമാക്കേണ്ട 
വാചകത്തിനെ പൊതിഞ്ഞാല്‍, ബ്രൌസറിനു മനസ്സിലാവും, ഇതാണ്‌ നമ്മുടെ 
തലവാചകമെന്ന്‌. അതായത്‌, നമ്മുടെ പേജില്‍<br />
<br />
<TITLE>This is the title for the Browser</TITLE><br />
<br />
എന്നെഴുതിയാല്‍, അതു നമ്മുടെ ടൈറ്റില്‍/തലവാചകം ആയി.<br />
<br />
ടാഗുകള്‍
 പലവിധമുണ്ട്. ഉദാഹരണത്തിന് <B> എന്ന ടാഗ് 
എഴുത്തിന്റെ(ടെക്‌സ്റ്റിന്റെ) കടുപ്പം(ബോള്‍ഡ്‌നെസ്സ്) കൂട്ടാനും <I>
 എന്ന ടാഗ് എഴുത്ത് ഇറ്റാലിക്സില്‍ ആക്കാനും ആണ് ഉപയോഗിയ്ക്കുന്നത്. 
<IMG> എന്ന ടാഗ് പേജില്‍ ചിത്രങ്ങള്‍ ഉള്‍പ്പെടുത്താനും 
<TABLE> എന്ന ടാഗ് ഒരു പട്ടിക ഉള്‍പ്പെടുത്താനും ഉപയോഗിക്കാം.<br />
<br />
ഇങ്ങനെ,
 ടാഗുകള്‍ ഉപയോഗിച്ച്‌ വ്യക്തമായി രൂപപ്പെടുത്തിയ പേജുകള്‍ ആണ്‌ നമ്മള്‍ 
കാണുന്ന വെബ്‌ പേജുകള്‍ എല്ലാം. ഏതൊരു മാധ്യമത്തേയും പോലെ, എച്‌ ടി എം എല്‍
 പേജുകള്‍ നിര്‍മ്മിക്കുന്നതിനും ഒരു വ്യക്തമായ രൂപരേഖ 
നിര്‍വചിച്ചിട്ടുണ്ട്‌. കൃത്യമായി തുറന്നടച്ചിട്ടുള്ള ഒരു പറ്റം ടാഗുകളാണ്‌
 പേജിനെ രൂപപ്പെടുത്തുന്നത്‌. ടാഗുകള്‍ തുറന്നടക്കുമ്പോള്‍, ഒരു 
ടാഗിനകത്ത്‌ വേറെ ഒരു ടാഗിനെ തുറക്കുകയാണെങ്കില്‍, അവസാനം തുറന്ന ടാഗ്‌ 
ആദ്യം അടക്കണം എന്ന കാര്യം പ്രത്യേകം ശ്രദ്ധിക്കുക.<br />
<br />
ഉദാഹരണത്തിന്‌,<br />
<TAG1><br />
<TAG2><br />
....<TAGn><br />
text here<br />
</TAGn>....<br />
</TAG2><br />
</TAG1><br />
(<TAG> എന്ന ഒരു ടാഗ്‌ നിലവിലില്ല. ഇതൊരു ഉദാഹരണം മാത്രം)<br />
<br />
മിക്കവാറും
 ടാഗുകള്‍ക്കും ആട്രിബ്യൂട്ട് എന്ന അംഗങ്ങള്‍ കാണും. ടാഗിന്റെ സ്വഭാവ 
വിശേഷങ്ങള്‍ നിയന്ത്രിയ്ക്കുന്നത് ആട്രിബ്യൂട്ടുകളാണ്. <SPAN 
ALIGN=“LEFT“ > എന്ന ടാഗില്‍ ALIGN എന്നത് SPAN ടാഗിന്റെ ഒരു 
ആട്രിബ്യൂട്ട് ആണ്. ALIGN എന്ന ആട്രിബ്യൂട്ടിന്റെ വില(വാല്യു) ആണ് LEFT. ഈ 
ആട്രിബ്യൂട്ടിന്റെ വില അനുസരിച്ച് ടാഗിന്റെ സ്വഭാവം മാറുന്നു.<br />
<br />
മിക്കവാറും
 എച്‌ ടീ എം എല്‍ പേജുകള്‍ക്കും ഒരു <HEAD> ഭാഗവും, ഒരു <BODY>
 ഭാഗവും കാണും. പേജ് കാണുമ്പോള്‍ <BODY> ടാഗിനുള്ളിലുള്ള ഭാഗമാണ് 
ബ്രൌസറില്‍ കാണിക്കുക എന്ന് ഒരു പൊതു തത്വമായി പറയാം. സാധാരണ <HEAD> 
ടാഗിനുള്ളിലുള്ള ഭാഗം പേജിനെ സംബന്ധിയ്ക്കുന്ന പൊതുവായ വിവരങ്ങള്‍ 
രേഖപ്പെടുത്തുന്ന സ്ഥലമാണ്. ബ്രൌസറുകള്‍ പേജ് കാണിയ്ക്കാന്‍ ഈ വിവരങ്ങള്‍ 
ഉപയോഗിയ്ക്കുന്നു.<br />
<br />
ഇനി നമുക്കൊരു എച്‌ ടി എം എല്‍ പേജിന്റെ സാമാന്യ രൂപം കാണാം.<br />
<HTML><br />
<HEAD><br />
<TITLE> This is the browser's title</TITLE><br />
</HEAD><br />
<BODY><br />
All my page Content goes in here<br />
</BODY><br />
</HTML><br />
<br />
ഇവിടെ
 കാണുന്ന പോലെ, എല്ലാ എച്‌ ടി എം എല്‍ പേജുകളും HTML എന്ന ഒരു 
ടാഗിനകത്താക്കിയ ഒരു കൂട്ടം ടാഗുകളാന്‍ നിര്‍വചിക്കപ്പെട്ടിട്ടുള്ള, ഒരു 
വ്യക്തമായ രൂപരേഖയുള്ള, .htm അല്ലെങ്കില്‍ .html എന്ന എക്സ്റ്റന്‍ഷനൊടു 
കൂടിയ ഒരു ടെക്സ്റ്റ്‌ ഫയലാണ്‌.<br />
<br />
<br />
<div align="right">
<br />
(തുടരും..)</div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
Posted by
<span class="fn" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">

<a class="g-profile" data-gapiattached="true" data-gapiscan="true" data-onload="true" href="http://www.blogger.com/profile/11613344766041077605" rel="author" title="author profile">
<span itemprop="name">Muzammilmoosa</span></a></span></span><span class="post-icons"><span class="item-action"><a href="http://www.blogger.com/email-post.g?blogID=23051198&postID=115249880649906643" title="Email Post"><img alt="" class="icon-action" height="13" src="https://img1.blogblog.com/img/icon18_email.gif" width="18" />
</a>
</span>

</span>
<br />
<div class="post-share-buttons goog-inline-block">
</div>
</div>
<div class="post-footer-line post-footer-line-2">
<span class="post-labels">
</span>
</div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="blog-feeds">
<div class="feed-links">
</div>
</div>
</div>

HTML

വരൂ, എച്. ടി. എം. എലിനെ പരിചയപ്പെടാം.. ബൂലോകരേ, വെബ്‌ പേജുകള്‍ എഴുതാന്‍ ഉപയോഗിക്കുന്ന മാര്‍ക്ക്‌-അപ്പ്‌ ഭാഷയായ എച...

2/07/2014

HTML-1

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
മള്‍ട്ടി മീഡിയ</h3>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRHt6wPD5Jg3WxOpPtLTGnZoD2P0IHlr_7tjt4jgh5NxCz0Ld2v7y5VrcIK_VxusF106rqXcIndVdIonBmx9A-hxxg75RrsgWSSk48XmEzPm0N-S7Ua-A-ab72Mpp44oYpbLKurn1rBs/s1600/HTML-for-Beginners-Learn-and-Create-Multimedia-Elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="332" data-original-width="590" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRHt6wPD5Jg3WxOpPtLTGnZoD2P0IHlr_7tjt4jgh5NxCz0Ld2v7y5VrcIK_VxusF106rqXcIndVdIonBmx9A-hxxg75RrsgWSSk48XmEzPm0N-S7Ua-A-ab72Mpp44oYpbLKurn1rBs/s1600/HTML-for-Beginners-Learn-and-Create-Multimedia-Elements.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-115307620899613971" itemprop="description articleBody">
മറ്റു പേജുകളിലേയ്ക്ക് ലിങ്ക് കൊടുക്കുക, അല്ലെങ്കില്‍ ഒരു ഓഡിയോ/വീഡിയോ 
ഫയല്‍ പേജില്‍ കൊടുക്കുക തുടങ്ങിയ കാര്യങ്ങള്‍ എങ്ങനെ ചെയ്യാം എന്ന് 
നോക്കാം. ഈ കാര്യങ്ങള്‍ക്കൊക്കെ ആവശ്യമായത് ഒരു URL (യൂണിഫോം റിസോഴ്സ് 
ലൊക്കേറ്റര്‍) ആണ്. മറ്റു പേജുകളിലേയ്ക്ക് ലിങ്ക് കൊടുക്കുമ്പോള്‍ ആ 
പേജിന്റെ URL ഉപയോഗിയ്ക്കാം. ഒരു ഓഡിയോ/വീഡിയോ ഫയല്‍ പോസ്റ്റില്‍ 
കൊടുക്കുമ്പോള്‍ ആ ഫയല്‍ ഏതെങ്കിലും സൈറ്റില്‍ അപ്പ്‌ലോഡ് ചെയ്ത് അങ്ങനെ 
കിട്ടുന്ന URL ആണ് ഉപയോഗിയ്ക്കേണ്ടത്. ബ്ലോഗറില്‍ വലിയ ഫയലുകള്‍ അപ്പ്‌ലോഡ്
 ചെയ്യാന്‍ എളുപ്പമല്ല. അതു കൊണ്ട് ഫയല്‍ അപ്പ്‌ലോഡ് അനുവദിയ്ക്കുന്ന മറ്റു
 സൈറ്റുകളില്‍ (ഉദാ: <a href="http://pages.google.com/" target="blank">ഗൂഗിള്‍ പേജസ് </a>) അപ്പ്‌ലോഡ് ചെയ്യുക. ഇങ്ങനെ അപ്പ്‌ലോഡ് ചെയ്തു കഴിഞ്ഞാല്‍ ആ ഫയലിലേയ്ക്കിള്ള URL കിട്ടും. അതു ഏകദേശം ഇങ്ങനെ ആയിരിയ്ക്കും -> <span style="color: #000066;">http://www.site.com/mode/audiofile.mp3</span><br />
<br />
ഈ URL കിട്ടിക്കഴിഞ്ഞാല്‍ പിന്നെ ബ്ലോഗില്‍ പോസ്റ്റ് ചെയ്യുന്നതെങ്ങനെ എന്നു നോക്കാം.<br />
<br />
<h3>
1. പാട്ട്/Audio</h3>
<br />
താഴെ
 കാണുന്ന HTML കോഡ് അതേ പടി കോപ്പി ചെയ്ത് പോസ്റ്റ് കമ്പോസ് ചെയ്തു 
കൊണ്ടിരിയ്ക്കുന്ന Edit Html എന്ന ജാലകത്തില്‍ പെയ്‌സ്റ്റ് ചെയ്യുക.<br />
<br />
<span style="color: #000066;"><embed<br />src="http://www.site.com/mode/audiofile.mp3"<br />type="application/octet-stream"<br />autostart="false"<br />width="360"<br />height="50"<br />align="absMiddle"<br />><br /></embed></span><br />
ഇനി
 src="http://www.site.com/mode/audiofile.mp3" എന്ന ഭാഗം മാറ്റി നിങ്ങളുടെ
 mp3 ഫയലിലേയ്ക്കുള്ള URL കൊടുക്കുക. ഇത്രയും ചെയ്താല്‍ മാത്രം മതി. ഇനി 
പ്രിവ്യൂ നോക്കി എല്ലാം ഭംഗിയായി എന്നുറപ്പു വരുത്തിയിട്ട് പബ്ലിഷ് 
ചെയ്യാം.<br />
<br />
<h3>
2. ആട്ടം/Video</h3>
<br />
ഇതും പാട്ട് ചെയ്യുന്നതു പോലെ തന്നെയാണ്.<br />
താഴെ
 കാണുന്ന HTML കോഡ് അതേ പടി കോപ്പി ചെയ്ത് പോസ്റ്റ് കമ്പോസ് ചെയ്തു 
കൊണ്ടിരിയ്ക്കുന്ന Edit Html എന്ന ജാലകത്തില്‍ പെയ്‌സ്റ്റ് ചെയ്യുക.<br />
<br />
<span style="color: #000066;"><embed<br />src="http://www.site.com/mode/videofile.mpeg"<br />type="application/x-mplayer2"<br />pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"<br />autostart="false"<br />width="360"<br />height="323"<br />showstatusbar="1"<br />enablecontextmenu="false"<br />transparentstart="1"<br />loop="0"<br />controller="true"<br />><br /></embed></span><br />
ഇനി
 src="http://www.site.com/mode/videofile.mpeg" എന്ന ഭാഗം മാറ്റി 
നിങ്ങളുടെ video ഫയലിലേയ്ക്കുള്ള URL കൊടുക്കുക. ഇത്രയും ചെയ്താല്‍ മാത്രം 
മതി. ഇനി പ്രിവ്യൂ നോക്കി എല്ലാം ഭംഗിയായി എന്നുറപ്പു വരുത്തിയിട്ട് 
പബ്ലിഷ് ചെയ്യാം.<br />
<br />
embed ടാഗിന്റെ ആട്രിബ്യൂട്ട്‌സ്‌ ആണു ഓരോ ലൈനിലും
 കൊടുത്തിരിക്കുന്നത്. ഇതില്‍ src ആട്രിബ്യൂട്ട് മാത്രം ഉപയോഗിച്ചാലും 
Internet Explorer ന്റെ പുതിയ വേര്‍ഷനുകള്‍ക്കു ധാരാളം. type, autostart, 
width, height, alignment തുടങ്ങിയ ആട്രിബ്യൂട്ട്‌സ്‌ ആവശ്യമെങ്കില്‍ 
ഉപയോഗിക്കാം...<br />
<br />
height, width തുടങ്ങിയവയ്ക്ക് പല വിലകള്‍ നല്‍കി 
പരീക്ഷിച്ച് നിങ്ങള്‍ക്ക് ആവശ്യമുള്ള രീതിയില്‍ പോസ്റ്റില്‍ കാണിയ്ക്കാം. 
autostart="false" എന്നതിനു പകരം autostart="true" എന്നു കൊടുത്താല്‍ പേജ് 
ലോഡ് ചെയ്തു വരുമ്പോള്‍ തന്നെ ഓഡിയോ/വീഡിയോ പ്ലേ ചെയ്തു തുടങ്ങും.<br />
<br />
<h3>
3. കണ്ണി/link</h3>
<br />
ഏതു വാക്കാണോ(വാക്കുകളാണോ) ലിങ്ക്‌ ആക്കേണ്ടത്‌ ആ വാക്ക്‌ ഒരു ‘ആങ്കര്‍’ ടാഗ്-നുള്ളില്‍ കൊടുത്താല്‍ മതി.<br />
ദാ ഇങ്ങനെ.<br />
<span style="color: #000066;"><a href="http://www.google.com/">Text for link </a></span><br />
<a
 >എന്നതിനെ ഓപ്പണിങ്ങ്‌ ടാഗ് എന്നും </a>എന്നതിനെ ക്ലോസിംഗ്‌ 
ടാഗ്‌ എന്നും വിളിക്കാറുണ്ട്. ഓപ്പണിങ്ങ്‌ ടാഗിന്റെ ഒരു ആട്രിബ്യൂട്ട്‌ 
(Attribute) ആണ്‌ href.<br />
<br />
ഇനി ഈ ലിങ്ക്‌ ചെയ്യുന്ന പേജ്‌ പുതിയ ഒരു 
ജാലകത്തില്‍ തുറക്കണം എന്നുണ്ടെങ്കില്‍ target="blank" എന്ന മറ്റൊരു 
ആട്രിബ്യൂട്ട്‌ കൂ‍ടി ഓപ്പണിംഗ്‌ ടാഗില്‍ ചേര്‍ത്ത്താല്‍ മതി.<br />
<br />
അപ്പൊ ദാ ഇങ്ങനെ ആവും...<br />
<span style="color: #000066;"><a href="http://www.google.com/" target="blank">Text for link </a></span><br />
<h3>
4. പാട്ട്/Audio ബ്ലോഗ് ചെയ്യുന്ന വിധം അധവാ പോഡ്‌കാസ്റ്റിംഗ്</h3>
<br />
ഓഡിയോ ഹോസ്റ്റിങ്ങ് അനുവദിയ്ക്കുന്ന ഏതെങ്കിലും സൈറ്റ് വഴി ചെയ്യാന്‍ എളുപ്പമാണ്. അതിലൊന്നില്‍ എങ്ങനെ ചെയ്യാം എന്നു നോക്കാം.<br />
<a href="http://odeo.com/" target="blank">http://odeo.com/</a> പോലെയുള്ള സൈറ്റില്‍ പോകുക.<br />
സൈന്‍-അപ്പ്(രെജിസ്റ്റര്‍) ചെയ്യുക.<br />
ലോഗിന്‍ ചെയ്യുക.<br />
<span style="color: #000066;">Start your own podcast with the Odeo Studio!</span> എന്ന ഒരു ലിങ്കോ <span style="color: #000066;">RECORD</span> എന്ന ലിങ്കോ കണ്ടുപിടിച്ച് ക്ലിക്ക് ചെയ്യുക.<br />
അടുത്ത പേജിലെ രണ്ട് ലിങ്കുകളാണ് <span style="color: #000066;">Upload Audio from Your Computer</span> എന്നതും <span style="color: #000066;">Record New Audio</span> എന്നതും. ആവശ്യമുള്ളതു തിരഞ്ഞെടുക്കാം. അവസാനം എല്ലാം അപ്പ്‌ലോഡ്/റെക്കോര്‍ഡ് ചെയ്തു സേവ് ചെയ്തു കഴിഞ്ഞാല്‍ <span style="color: #000066;">Put this Audio on your Web site</span>
 എന്ന ഒരു ഹെഡിംഗ് ഉണ്ട്. അതിനു താഴെ ഉള്ള ടെക്‌സ്റ്റ് ബോക്സില്‍ കാണുന്ന 
കാര്യങ്ങള്‍ മുഴുവന്‍ കോപ്പി ചെയ്ത് നമ്മുടെ ബ്ലോഗ് പേജില്‍ കൊണ്ടു പോയി 
പെയ്‌സ്റ്റ് ചെയ്താല്‍ മതി.<br />
യഥാര്‍ത്ഥത്തില്‍ ഈ കിട്ടുന്ന കോഡും ഒരു embed ടാഗ് തന്നെയാണ്. അവര്‍ ആ കോഡ് കിട്ടുന്ന രീതി ഒന്നു ലളിതവത്കരിച്ചെന്നു മാത്രം.<br />
<br />
ഓഡിയോ ബ്ലോഗിങ്ങ്/ പോഡ്‌കാസ്റ്റിംഗിനുള്ള മറ്റു ചില സൈറ്റുകള്‍<br />
<a href="http://www.audioblogger.com/" target="blank">ഓഡിയോബ്ലോഗര്‍.കോം</a><br />
<a href="http://www.audioblog.com/" target="blank">ഓഡിയോബ്ലോഗ്.കോം</a><br />
<a href="http://www.podomatic.com/" target="blank">പോഡോമാറ്റിക്.കോം</a><br />
ഫ്രീ റെക്കോഡിങ്ങ് ടൂള്‍:<br />
<a href="http://audacity.sourceforge.net/" target="blank">http://audacity.sourceforge.net/</a><br />
<br />
<div align="right">
<br /></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
Posted by <span class="fn" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name"></span></span></span><span class="post-icons"><span class="item-action"><a href="http://www.blogger.com/email-post.g?blogID=23051198&postID=115307620899613971" title="Email Post">Muzammilmoosa
</a>
</span>

HTML-1

മള്‍ട്ടി മീഡിയ മറ്റു പേജുകളിലേയ്ക്ക് ലിങ്ക് കൊടുക്കുക, അല്ലെങ്കില്‍ ഒരു ഓഡിയോ/വീഡിയോ ഫയല്‍ പേജില്‍ കൊടുക്കുക തുടങ്ങിയ ...

2/07/2014

HTML-2

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
എച്ച്. ടി. എം. എല്‍ : ടെക്‌സ്റ്റ് -2<br />(എച് റ്റി എം എല്‍ -2)
</h3>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzajGQsBibfDveL2v9-BvJz0aoOZg1VMQhLrPXZt0-t8d1bdvkFMGVXe5R9_bj5DzgQDJ_mRZXp23RX0l009bqKhMKBd_t3VDMV_bBcdexvqhcMMCoF68I6xlOKH-uPGFo7911r2C8fE/s1600/html-tags.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="350" data-original-width="800" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqzajGQsBibfDveL2v9-BvJz0aoOZg1VMQhLrPXZt0-t8d1bdvkFMGVXe5R9_bj5DzgQDJ_mRZXp23RX0l009bqKhMKBd_t3VDMV_bBcdexvqhcMMCoF68I6xlOKH-uPGFo7911r2C8fE/s640/html-tags.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-115422772275367806" itemprop="description articleBody">
ടെക്‌സ്റ്റ് സംബന്ധമായ ചില നുറുങ്ങു വിദ്യകള്‍ ഈ പോസ്റ്റില്‍ പരിചയപ്പെടുത്തുന്നു.<br />
<br />
1.
 <EM>ടെക്‌സ്റ്റ് പ്രാധാന്യമുള്ളതാക്കി(emphasize) കാണിക്കാനാണീ ടാഗ്
 ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം 
ഉണ്ട്. <EM> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </EM> എന്ന 
അവസാനവും. പ്രാധാന്യമുള്ളതാക്കേണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു 
ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി. <br />
<table border="2"><tbody>
<tr bgcolor="lightblue"> <td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><EM>ജോസഫ് </EM> അലക്‌സ്</td><td><em>ജോസഫ് </em>അലക്‌സ്</td></tr>
</tbody></table>
<br />
<br />
2.
 <STRONG>ടെക്‌സ്റ്റ് ഒന്ന് ബലം കൊടുത്ത്(?)(strong) കാണിക്കാനാണീ 
ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം
 ഉണ്ട്. <STRONG> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </STRONG> എന്ന
 അവസാനവും. ബലം കൊടുക്കണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ 
കൊടുത്താല്‍ മാത്രം മതി. <br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td> <td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><STRONG>ജോസഫ് </STRONG> അലക്‌സ്</td><td><strong>ജോസഫ് </strong>അലക്‌സ്</td></tr>
</tbody></table>
<br />
<br />
3.
 <CODE>ടെക്‌സ്റ്റ് കമ്പ്യൂട്ടര്‍ ഭാഷയിലെതു പോലെ കാണിക്കാനാണീ ടാഗ് 
ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം 
ഉണ്ട്. <CODE> എന്ന ടാഗിന്റെ ആരംഭവും പിന്നെ </CODE> എന്ന 
അവസാനവും. കമ്പ്യൂട്ടര്‍ കോഡായി കൊടുക്കണ്ട ടെക്‌സ്റ്റ് ഈ രണ്ടു 
ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി. <br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td> <td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr> <td><CODE>code inside</CODE> and outside</td><td><code>code inside</code>and outside</td></tr>
</tbody></table>
<br />
<br />
ഇതു വരെ പറഞ്ഞാ ടാഗുകള്‍ പല ബ്രൌസറുകളും പല രീതിയിലാവും കാണിയ്ക്കുന്നത് എന്ന് ഓര്‍ത്തിരിയ്ക്കുക.<br />
<br />
ഇതു പോലെയുള്ള മറ്റു ചില ടാഗുകള്‍ താഴെ കൊടുത്തിരിയ്ക്കുന്നു. <br />
<table border="2"><tbody>
<tr bgcolor="lightblue"> <td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>ആ ഇ ഉ</td><td>ആ ഇ ഉ</td></tr>
<tr><td><BIG>ജോസഫ് </BIG> അലക്‌സ്</td><td><big>ജോസഫ് </big>അലക്‌സ്</td></tr>
<tr><td><CITE>ജോസഫ് </CITE> അലക്‌സ്</td><td><cite>ജോസഫ് </cite>അലക്‌സ്</td></tr>
<tr> <td><DEL>ജോസഫ് </DEL> അലക്‌സ്</td><td><del>ജോസഫ് </del> അലക്‌സ്</td></tr>
<tr><td><INS>ജോസഫ് </INS> അലക്‌സ്</td><td><ins>ജോസഫ്</ins> അലക്‌സ്</td></tr>
<tr><td><KBD>ജോസഫ് </KBD> അലക്‌സ്</td> <td><kbd>ജോസഫ് </kbd>അലക്‌സ്</td></tr>
<tr><td><Q>ജോസഫ് </Q> അലക്‌സ് </td><td><q>ജോസഫ് </q>അലക്‌സ്</td></tr>
<tr><td><S>ജോസഫ് </S> അലക്‌സ് </td><td><s>ജോസഫ് </s>അലക്‌സ്</td></tr>
<tr><td><SAMP>ജോസഫ് </SAMP> അലക്‌സ് </td> <td><samp>ജോസഫ് </samp>അലക്‌സ്</td></tr>
<tr><td><SMALL>ജോസഫ് </SMALL> അലക്‌സ്</td><td><small>ജോസഫ് </small>അലക്‌സ്</td></tr>
<tr><td><STRIKE>ജോസഫ് </STRIKE> അലക്‌സ്</td><td><strike>ജോസഫ് </strike>അലക്‌സ്</td></tr>
<tr><td><SUB>ജോസഫ് </SUB> അലക്‌സ്</td><td><sub>ജോസഫ് </sub>അലക്‌സ്</td></tr>
<tr><td><SUP>ജോസഫ് </SUP> അലക്‌സ്</td><td><sup>ജോസഫ് </sup>അലക്‌സ്</td></tr>
<tr><td><TT>ജോസഫ് </TT> അലക്‌സ്</td><td><tt>ജോസഫ് </tt>അലക്‌സ്</td></tr>
<tr><td><VAR>ജോസഫ് </VAR>അലക്‌സ്</td><td><var>ജോസഫ് </var>അലക്‌സ്</td></tr>
</tbody></table>
<br />
<br />
4. അസാധാരണ ചിഹ്നങ്ങള്‍<br />
<
 എന്നത് ഒരു ടാഗ് തുടങ്ങാനും > എന്നത് ടാഗ് അവസാനിപ്പിയ്ക്കാനും ഉള്ള 
ചിഹ്നങ്ങള്‍ ആണല്ലോ. അതു കൊണ്ട് അവ അതേ പടി നമ്മുടെ പേജില്‍ കൊടുക്കാന്‍ 
പറ്റില്ല. ഇനി അവ കൊടുക്കണം എന്ന് നിര്‍ബന്ധമാണെങ്കില്‍<br />
ഇങ്ങനെ 
കൊടുക്കാം &lt;. ഒരു ശൂന്യസ്ഥലം വിടണമെങ്കില്‍ &nbsp; എന്നു 
കൊടുക്കാം. കോപ്പിറൈറ്റ് ചിഹ്നം തുടങ്ങി വേറെയും ചില ചിഹ്നങ്ങള്‍ ഉണ്ട്. 
ഇങ്ങനെ ഉപയോഗിയ്ക്കാവുന്ന ചിഹ്നങ്ങള്‍ താഴെ കൊടുത്തിരിയ്ക്കുന്നു. <br />
<table border="2"><tbody>
<tr bgcolor="lightblue"> <td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr> <td>ആ&nbsp;&nbsp;&nbsp;&nbsp;ഇ&nbsp;&nbsp;ഉ</td><td>ആ    ഇ  ഉ</td></tr>
<tr><td>&lt;</td><td><</td></tr>
<tr><td>&gt;</td><td>></td></tr>
<tr><td>&iquest;</td><td>¿</td></tr>
<tr><td>&laquo;</td><td>«</td></tr>
<tr><td>&raquo;</td><td>»</td></tr>
<tr><td>&</td><td>&</td></tr>
<tr><td>&cent;</td><td>¢</td></tr>
<tr><td>&#169;</td><td>(c)</td></tr>
<tr><td>&copy; </td><td>(c) </td></tr>
<tr><td>&reg; </td><td>® </td></tr>
<tr><td>&trade; </td><td>™ </td></tr>
<tr><td>&divide;</td><td>÷ </td></tr>
<tr><td>&para; </td><td>¶ </td></tr>
<tr><td>&plusmn; </td><td>± </td></tr>
<tr><td>&pound; </td><td>£ </td></tr>
<tr><td>&reg; </td><td>(r) </td></tr>
<tr><td>&sect; </td><td>§ </td></tr>
<tr><td>&yen; </td><td>¥ </td></tr>
<tr><td>&Aacute; </td><td>Á </td></tr>
<tr><td>&AElig; </td><td>Æ </td></tr>
<tr><td>&Eacute; </td><td>É </td></tr>
<tr><td>&Igrave; </td><td>Ì </td></tr>
<tr><td>&uarr; </td><td>↑ </td></tr>
<tr><td>&darr; </td><td>↓ </td></tr>
<tr><td>&larr; </td><td>← </td></tr>
<tr><td>&rarr;</td><td>→ </td></tr>
<tr><td>&harr;</td><td>↔ </td></tr>
<tr><td>&loz;</td><td>◊ </td></tr>
<tr><td>&dagger;</td><td>† </td></tr>
<tr><td>&Dagger;</td><td>‡ </td></tr>
<tr><td>&sect;</td><td>§ </td></tr>
<tr><td>&middot;</td><td>· </td></tr>
<tr><td>&bull;</td><td>• </td></tr>
<tr><td>&sum;</td><td>∑ </td></tr>
<tr><td>&prod;</td><td>∏ </td></tr>
<tr><td>&int;</td><td>∫ </td></tr>
<tr><td>&micro;</td><td>µ </td></tr>
</tbody></table>
<br />
<br />
<div align="right">
<br /></div>
</div>
<span class="post-author vcard">
Posted by Muzammilmoosa</span><span class="post-backlinks post-comment-link"><a class="comment-link" href="http://technology4all.blogspot.in/2006/07/2-3.html#links"></a>
</span></div>

HTML-2

എച്ച്. ടി. എം. എല്‍ : ടെക്‌സ്റ്റ് -2 (എച് റ്റി എം എല്‍ -2) ടെക്‌സ്റ്റ് സംബന്ധമായ ചില നുറുങ്ങു വിദ്യകള്‍ ഈ പോസ്റ്റില്‍ ...

2/07/2014

HTML-3

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
ഹൈപ്പര്‍ലിങ്ക്  അഥവാ ലിങ്ക് അഥവാ കണ്ണി <br />(എച് ടി എം എല്‍ - 3)
</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMdt0GMqbSmDqboXJLk4gA_P13puBc2F6dooEFSvsxWQ_t3IL-07wBf1kOWTMnlBqyNDo7Xb7-pAjG5ARLrIe4pU_eBDVhAZYuQL6NbHUOPiI3eXh869yIhPMJWAOSfo1tb0wFEuqlUY/s1600/images+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="194" data-original-width="259" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMdt0GMqbSmDqboXJLk4gA_P13puBc2F6dooEFSvsxWQ_t3IL-07wBf1kOWTMnlBqyNDo7Xb7-pAjG5ARLrIe4pU_eBDVhAZYuQL6NbHUOPiI3eXh869yIhPMJWAOSfo1tb0wFEuqlUY/s400/images+%25281%2529.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
നമ്മള്‍ <a href="http://technology4all.blogspot.com/2006/07/blog-post.html">മള്‍ട്ടിമീഡിയ - 1</a>ഇല്‍ കണ്ട ലിങ്കിടുന്ന വിദ്യയേക്കുറിച്ചാണ് ഈ അദ്ധ്യായത്തില്‍ കാണാന്‍ പോകുന്നത്. ആ അദ്ധ്യായത്തില്‍ നമ്മള്‍ ഇപ്രകാരം കണ്ടു -<br />
<h3>
<a href="https://www.blogger.com/blogger.g?blogID=3014157152598086834" name="jumpHere">കണ്ണി/link</a></h3>
(താഴെ നിന്നു വന്നതാണെങ്കില്‍‍ തിരികെ പോകാന്‍ <a href="http://technology4all.blogspot.in/search?updated-max=2006-11-01T13:08:00-05:00#goBack">ഇവിടെ ഞെക്കുക</a>, അല്ലെങ്കില്‍ തുടര്‍ന്നു വായിക്കുക)<br />
<br />
ഏതു വാക്കാണോ(വാക്കുകളാണോ) ലിങ്ക്‌ ആക്കേണ്ടത്‌ ആ വാക്ക്‌ ഒരു ‘ആങ്കര്‍’ ടാഗ്-നുള്ളില്‍ കൊടുത്താല്‍ മതി.<br />
ദാ ഇങ്ങനെ.<br />
<span style="color: #000066;"><a href="http://www.google.com/">Text for link </a></span><br />
<a
 >എന്നതിനെ ഓപ്പണിങ്ങ്‌ ടാഗ് എന്നും </a>എന്നതിനെ ക്ലോസിംഗ്‌ 
ടാഗ്‌ എന്നും വിളിക്കാറുണ്ട്. ഓപ്പണിങ്ങ്‌ ടാഗിന്റെ ഒരു ആട്രിബ്യൂട്ട്‌ 
(Attribute) ആണ്‌ href.<br />
<br />
ഇനി ഈ ലിങ്ക്‌ ചെയ്യുന്ന പേജ്‌ പുതിയ ഒരു 
ജാലകത്തില്‍ തുറക്കണം എന്നുണ്ടെങ്കില്‍ target="_‌‌blank" എന്ന മറ്റൊരു 
ആട്രിബ്യൂട്ട്‌ കൂ‍ടി ഓപ്പണിംഗ്‌ ടാഗില്‍ ചേര്‍ത്ത്താല്‍ മതി.<br />
<br />
അപ്പൊ ദാ ഇങ്ങനെ ആവും...<br />
<span style="color: #000066;"><a href="http://www.google.com/" target="_blank">Text for link </a></span><br />
<br />
നമുക്ക്
 ഇതിനെപ്പറ്റി കുറച്ചുകൂടെ വിശദമായി പഠിക്കാം. ഇന്റര്‍‌നെറ്റില്‍ 
ചിതറിക്കിടക്കുന്ന പേജുകളെ അങ്ങോട്ടും ഇങ്ങോട്ടും കൂട്ടിപ്പിടിപ്പിക്കാനാണ്
 നമ്മള്‍ കണ്ണി/ലിങ്ക് ഉപയോഗിക്കുന്നത്. രണ്ടു പേജുകളെ തമ്മില്‍ എങ്ങനെ 
ബന്ധിപ്പിക്കാം എന്ന് മുകളില്‍ കണ്ടുവല്ലോ? ഇനി ഇതിന്റെ മറ്റു ചില 
ഉപയോഗങ്ങള്‍ കൂടെ നമുക്കു കാണാം. ഉദാഹരണത്തിന് നമ്മള്‍ എഴുതിയ വലിയ ഒരു 
ലേഖനത്തിന്റെ അതേ പേജിലെ മറ്റൊരു ഭാഗത്തേക്ക് ലിങ്ക് കൊടുക്കണമെന്നു 
കരുതുക. ഇതെങ്ങനെ ചെയ്യാം? ഇതിനാ‍യി നമുക്ക് ആങ്കര്‍ ടാഗിലെ 'name' എന്ന 
ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം. അതായത്, നമ്മള്‍ ഒരു പേജിന്റെ ഒരു പ്രത്യേക 
ഭാഗത്തിനെ ഒരു പേരിട്ടു വിളിക്കുന്നു എന്നര്‍ത്ഥം.<br />
ഉദാഹരണത്തിന്‍, മുകളിന്‍ നമ്മള്‍ എഴുതിയ കണ്ണി/Link എന്ന തലക്കെട്ടിലേക്കു പോകാന്‍ <a href="http://technology4all.blogspot.in/search?updated-max=2006-11-01T13:08:00-05:00#jumpHere">ഇവിടെ ഞെക്കുക</a><br />
<br />
<a href="https://www.blogger.com/blogger.g?blogID=3014157152598086834" name="goBack">ദാ തിരിച്ചെത്തിയല്ലോ?</a>. ഇനി ഇത് എങ്ങനെ ചെയ്തു എന്നു കൂടെ നോക്കാം<br />
<br />
മുകളില്‍
 ‘കണ്ണി/link‘ എന്നെഴുതിയതിനെ ചുറ്റി <a 
name="jumpHere">കണ്ണി/link</a> എന്ന് ഒരു ആങ്കര്‍ ടാഗ് ഇട്ടു. 
അവിടേക്കു ചാടിക്കാനായി നമ്മള്‍ ലിങ്കിട്ടിരിക്കുന്നതിനെ “ കണ്ണി/Link എന്ന
 തലക്കെട്ടിലേക്കു പോകാന്‍ <a href="#jumpHere">ഇവിടെ 
ഞെക്കുക</a>“ എന്നും എഴുതി.<br />
<br />
ഇതുപോലെ, “തിരികെ പോകാന്‍ <a 
href="#goBack">ഇവിടെ ഞെക്കുക</a>“ എന്നെഴുതിയതില്‍ ഞെക്കിയാല്‍ 
പേജില്‍ നമ്മള്‍ “<a name="goBack">ദാ തിരിച്ചെത്തിയല്ലോ?</a>“
 എന്നെഴുതിയ സ്ഥലത്തേക്കെത്തും. ചാടിക്കാനായിടുന്ന ലിങ്കിലെ # ചേര്‍ത്തു 
പേരുവിളിക്കുന്നതു ശ്രദ്ധിക്കുക.<br />
<br />
ഇതേ വിദ്യയുപയോഗിച്ച് മറ്റൊരു 
പേജിലെ ആങ്കറിലേക്കും പോകാന്‍ സാധിയ്ക്കും. ബ്ലോഗറിലെ കമന്റിലേക്ക് 
നേരിട്ടുള്ള ലിങ്ക് ഇടുന്നത് ഈ വിദ്യ ഉപയോഗിച്ചാണ്.<br />
<a href="http://natgeodigital.blogspot.com/2006/08/blog-post_31.html#c115705220387446591">ഈ കമന്റ്</a><br />
എന്ന് ലിങ്ക് കൊടുത്താല്‍ അത് <a href="http://natgeodigital.blogspot.com/2006/08/blog-post_31.html#c115705220387446591">ഈ കമന്റ്</a> നേരിട്ട് തുറക്കും.<br />
(കമന്റുകളുടെ
 ലിങ്ക് കിട്ടാന്‍ ബ്ലോഗറില്‍ അതാതു പോസ്റ്റിലെ കമന്റുകളുടെ അടുത്തുള്ള ടൈം
 സ്റ്റാമ്പിന്റേ ലിങ്കും വേഡ് പ്രെസ്സിലാണെങ്കില്‍ പെര്‍മാലിങ്കെന്നു 
കൊടുത്തിരിക്കുന്ന ലിങ്കും ഉപയോഗിക്കാം)<br />
<br />
<span style="font-weight: bold;">ഈമെയില്‍ ലിങ്ക്</span><br />
ഇനി
 നമുക്ക് ഒരു ലിങ്കുണ്ടാക്കി അതില്‍ യൂ ആര്‍ എല്ലിനു പകരം ഈമെയിലയക്കാനുള്ള
 സൌകര്യം ചെയ്യുന്നതെങ്ങനെ എന്നു കാണാം. ശ്രദ്ധിക്കുക: ഈമെയില്‍ 
അയക്കണമെങ്കില്‍ കമ്പ്യൂട്ടറില്‍ ഒരു ഈമെയില്‍ ക്ലൈന്റ് (ഉദാഹരണത്തിന്‍ 
മൈക്രോസോഫ്റ്റ് ഔട്ട്‌ലുക്ക് അല്ലെങ്കില്‍ തണ്ടര്‍ ബേഡ്) സെറ്റപ്പ് 
ചെയ്തിരിക്കണം.<br />
<span style="font-weight: bold;"><br />ഒരു ഈമെയിലിലേക്കു 
ലിങ്ക് കൊടുക്കാന്‍ <a href="mailto:<വേണ്ട മെയില്‍ അഡ്രസ്>"> 
പേജില്‍ കാണിക്കേണ്ടത് ഇവിടെ എഴുതാം</a></span><br />
<br />
ഉദാഹരണത്തിന്‍, <a href="mailto:learn@techmag.org">ഇവിടെ ഞെക്കൂ</a> എന്നെഴുതിയാല്‍, <a href="mailto:learn@techmag.org">ഇവിടെ ഞെക്കൂ</a>
 എന്നു പേജില്‍ കാണാം. ഈ ലിങ്കില്‍ ഞെക്കി നോക്കൂ, അതു നിങ്ങളുടെ മെയില്‍ 
ക്ലൈന്റിലൂടെ ഒരു പുതിയ മെയില്‍ തുറന്ന്, 'To' ഫീല്‍ഡില്‍ 
learn@techmag.org എന്ന് ചേര്‍ത്തിരിക്കുന്നതു കാണാം.<br />
<br />
ഇനി അല്‍പ്പം 
കൂടി കൂടിയ പരിപാടി നോക്കാം. ഇതേ ഈമെയില്‍ വേറെ ഒരാള്‍ക്കു കൂടി കോപ്പി 
ചെയ്യണം (CC) അല്ലെങ്കില്‍ ബ്ലൈന്‍ഡ് കാര്‍ബണ്‍ കോപ്പി (BCC) ചെയ്യണം എന്നു
 കരുതുക. എങ്ങനെ ചെയ്യാം എന്ന് താഴെ കൊടുത്തിരിക്കുന്നു:<br />
1. <a href="mailto:learn@techmag.org?cc=testing@techmag.org">ഇവിടെ ഞെക്കൂ</a> (പരീക്ഷിക്കാന്‍ <a href="mailto:learn@techmag.org?cc=testing@techmag.org">ഇവിടെ ഞെക്കൂ</a>)<br />
<br />
2. <a href="mailto:learn@techmag.org?bcc=testing@techmag.org">ഇവിടെ ഞെക്കൂ</a> (പരീക്ഷിക്കാന്‍ <a href="mailto:learn@techmag.org?bcc=testing@techmag.org">ഇവിടെ ഞെക്കൂ</a>)<br />
<br />
ഇതില്‍
 നമ്മള്‍ ഒരു ചോദ്യചിഹ്നം ഇട്ട് അതിന്റെ പിന്നില്‍ ഒരു പരാമീറ്റര്‍ ആയി ഒരു
 പേര്‍-വില ജോഡിയെ (Name -Value pair) നല്‍കുകയാണ് ചെയ്തത്. ഒരു യൂ ആര്‍ 
എല്‍ ഇല്‍ ചോദ്യ ചിഹ്നത്തിന്റെ ശേഷം വരുന്നതിനെ ‘ക്വെറി സ്ട്രിങ്ങ്‘ എന്ന് 
വിളിക്കുന്നു. മിക്കവാറും സൈറ്റുകളില്‍ അഡ്രസ് ബാറില്‍ ശ്രദ്ധിച്ചാല്‍ 
നമുക്കിവന്റെ കളികള്‍ കാണാം. തത്സമയം പേജുണ്ടാക്കി കാണിക്കുന്ന പേജുകളില്‍ 
ആവശ്യമനുസരിച്ചു വിലകള്‍ നല്‍കാനാണ് ഈ സൂത്രം ഉപയോഗിച്കു പോരുന്നത്. ഇനി 
നമുക്ക് ഒന്നിലേറെ പേര്‍-വില ജോഡികളെ നല്‍കണമെങ്കില്‍ അവയെ ‘&‘ 
ഉപയോഗിച്ചു വേര്‍ തിരിക്കാവുന്നതാണ്. ഉദാഹരണത്തിന്, 
http://www.buy.com/findMProduct.jsp?prod=TV&minVal=1000&maxVal=1500<br />
എന്നു
 കണ്ടാല്‍ findMyProduct.jsp എന്ന പേജിലേക്ക് നമ്മള്‍ അതു കഴിഞ്ഞുള്ള 
വിലകള്‍ കൊടുത്ത്, ആ പേജില്‍ നമുക്കാവശ്യമുള്ള സാധനങ്ങള്‍ മാത്രം 
കാണിക്കാന്‍ പറയുകയാണ് എന്നു മനസിലാക്കാം. ആ പേജില്‍ അതു ചെയ്യാ‍നുള്ള 
സൂത്രം എഴുതിയിട്ടുണ്ടാവണം എന്നു മാത്രം. ശ്രദ്ധിക്കുക: ? കഴിഞ്ഞു നമുക്ക് 
ഏത് വേണമെങ്കിലും & ഇല്ലാതെ നേരെ എഴുതാം. അതിനു ശേഷമുള്ളതിനു മാത്രമേ 
& ഇട്ടു വേര്‍തിരിക്കേണ്ടൂ.<br />
<br />
ഇതുപയോഗിച്ച്, നമുക്ക് എങ്ങനെ ഈ ഈമെയില്‍ ലിങ്കിനെക്കൊണ്ട് കുറച്ചു കൂടി പണി എടുപ്പിക്കാം എന്നു നോക്കാം<br />
<a
 
href="mailto:learn@techmag.org?cc=testing@techmag.org&bcc=test@techmag.org">
 ഇവിടെ ഞെക്കൂ </a> (പരീക്ഷിക്കാന്‍ <a href="mailto:learn@techmag.org?cc=testing@techmag.org&bcc=test@techmag.org">ഇവിടെ ഞെക്കൂ</a>)<br />
<br />
ഇനി
 അടുത്ത പടിയായി നമുക്ക് ഒരു വിഷയവും കൂടി അതില്‍ ചേര്‍ക്കണമെന്നു കരുതുക. 
അതിന് subject എന്ന പേര്‍ ചേര്‍ത്ത് വില കൊടുത്താല്‍ മതി. നമ്മള്‍ cc, bcc 
എന്നിവ ഉപയോഗിച്ചതു പോലെ തന്നെ, ‘subject=വിഷയം‘ എന്ന് ഒരു ‘&‘ ഇട്ടു 
ചേര്‍ത്തു നോക്കൂ. ക്വെറി സ്ട്രിങ്ങില്‍ ശൂന്യസ്ഥലം അല്ലെങ്കില്‍ സ്പേസ് 
ഇടുന്നത് ഒരു നല്ല പ്രവണതയല്ല. അതിനു പകരമായിട്ട് വേണമെങ്കില്‍ ‘%20‘ എന്ന 
പ്രത്യേക സൂത്രം ഉപയോഗിക്കാം. അതായത് <span style="font-style: italic;">subject="My%20Experiments"</span> എന്ന് എഴുതണം എന്നര്‍ത്ഥം.<br />
ഉദാഹരണത്തിന് <a href="mailto:learn@techmag.org?cc=testing@techmag.org&cc=test@techmag.org&subject=My%20Experiments"> ഇവിടെ ഞെക്കുക</a><br />
<br />
ഇനി വിഷയം കൂടാതെ നമ്മുടെ കത്തിന്റെ ഉള്ളടക്കം കൂടി ചേര്‍ക്കാന്‍ <span style="font-style: italic;">body=വേണ്ട ഉള്ളടക്കം</span> എന്നു & ഇട്ട് ചേര്‍ത്താല്‍ മതിയാകും (ഉദാഹരണം: <a href="mailto:learn@techmag.org?cc=testing@techmag.org&cc=test@techmag.org&subject=My%20Experiments">ഇവിടെ ഞെക്കുക</a>)<br />
<br />
<br />
<br />
(തുടരും)</div>

HTML-3

ഹൈപ്പര്‍ലിങ്ക് അഥവാ ലിങ്ക് അഥവാ കണ്ണി (എച് ടി എം എല്‍ - 3) നമ്മള്‍ മള്‍ട്ടിമീഡിയ - 1 ഇല്‍ കണ്ട ലിങ്കിടുന്ന വിദ്യയേക്കുറിച്ചാ...

2/07/2014

HTML Tutorial-4

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
എച്ച്. ടി. എം. എല്‍ : ടെക്‌സ്റ്റ് <br />(എച് റ്റി എം എല്‍ -4)</h3>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLaMfTTufbtoDZbzVDHiF8C31HYWg3lgh6KIA8TUP3xHV4GY8nX7n4_ClMhLqfFCk5WLT5NNNzZ6reuEwcYcUMMF0wV8Ss4WTybBeVO3s8GGBJJ1i1Vmr2bIPyAtqfb-qVPIqGzE5O88/s1600/goes-media-htmlj.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="380" data-original-width="600" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLaMfTTufbtoDZbzVDHiF8C31HYWg3lgh6KIA8TUP3xHV4GY8nX7n4_ClMhLqfFCk5WLT5NNNzZ6reuEwcYcUMMF0wV8Ss4WTybBeVO3s8GGBJJ1i1Vmr2bIPyAtqfb-qVPIqGzE5O88/s400/goes-media-htmlj.jpg" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="post-header">
</div>
<div class="post-body entry-content" id="post-body-115249075673474305" itemprop="description articleBody">
ടെക്‌സ്റ്റ് (എഴുത്ത്) ഫോര്‍മാറ്റ് ചെയ്യുന്ന ടാഗുകളെപ്പറ്റിയാവട്ടെ ആദ്യം.<br />
<br />
1. <B><br />
ടെക്‌സ്റ്റ്
 ബോള്‍ഡ്(കടുപ്പത്തില്‍) ആയി കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ഒട്ടു 
മിക്ക ടാഗുകളെയും പോലെ ഈ ടാഗിനും രണ്ട് ഭാഗം ഉണ്ട്. <B> എന്ന 
ടാഗിന്റെ ആരംഭവും പിന്നെ </B> എന്ന അവസാനവും. കടുപ്പത്തില്‍ ആക്കേണ്ട
 ടെക്‌സ്റ്റ് ഈ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><B>ജോസഫ് </B> അലക്‌സ്</td><td><b>ജോസഫ് </b>അലക്‌സ്</td></tr>
</tbody></table>
<br />
<br />
2. <I><br />
ടെക്‌സ്റ്റ്
 ഇറ്റാലിക്‌സ്(ചെരിഞ്ഞ്?) ആയി കാണിക്കാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. 
ഇറ്റാലിക്സില്‍ ആക്കേണ്ട ടെക്‌സ്റ്റ് ഈ ടാഗിന്റെ രണ്ടു 
ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം മതി.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>ജോസഫ് <I>അലക്‌സ്</I></td><td>ജോസഫ് <i>അലക്‌സ്</i></td></tr>
</tbody></table>
<br />
<br />
3. <U><br />
ടെക്‌സ്റ്റിന്
 അടിവര (അണ്ടര്‍ ലൈന്‍) ഇടാനാണീ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. അടിവരയിടേണ്ട 
ടെക്‌സ്റ്റ് ഈ ടാഗിന്റെ രണ്ടു ഭാഗങ്ങള്‍ക്കുള്ളില്‍ കൊടുത്താല്‍ മാത്രം 
മതി.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>എം എന്‍ <U>കാര്‍ത്തികേയന്‍</U></td><td>എം എന്‍ <u>കാര്‍ത്തികേയന്‍</u></td></tr>
</tbody></table>
<br />
<br />
4. തലക്കെട്ടുകള്‍ (ഹെഡിങ്ങ്സ്)<br />
പാരഗ്രാഫുകളുടെയും
 സെക്ഷനുകളുടെയും പലവലിപ്പത്തിലുള്ള തലക്കെട്ടുകള്‍ കാണിക്കാന്‍ എച്ച്. ടി.
 എം. എല്‍-ല്‍ അഞ്ചു തരം തലക്കെട്ടു ടാഗുകള്‍ ഉണ്ട് - <H1> മുതല്‍ 
<H5> വരെ. <H1> ആണ് ഏറ്റവും വലുത്, <H5> ഏറ്റവും 
ചെറുതും.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><H1>വീര ഭദ്രന്‍</H1></td><td><h1>
വീര ഭദ്രന്‍</h1>
</td></tr>
<tr><td><H2>വീര ഭദ്രന്‍</H2></td><td><h2>
വീര ഭദ്രന്‍</h2>
</td></tr>
<tr><td><H3>സ്വാമിനാഥന്‍</H3></td><td><h3>
സ്വാമിനാഥന്‍</h3>
</td></tr>
<tr><td><H4>രാ‍മ ഭദ്രന്‍</H4></td><td><h4>
രാ‍മ ഭദ്രന്‍</h4>
</td></tr>
<tr><td><H5>രാ‍മ ഭദ്രന്‍</H5></td><td><h5>
രാ‍മ ഭദ്രന്‍</h5>
</td></tr>
</tbody></table>
<br />
<br />
5. ഖണ്ഡിക (പാരഗ്രാഫ്) <P><br />
എഴുത്ത്
 ഖണ്ഡിക തിരിയ്ക്കാന്‍ ഈ ടാഗ് ഉപയോഗിയ്ക്കാം. ഓരോ ഖണ്ഡികയുടെയും ആദ്യവും 
അവസാനവും ഈ ടാഗിന്റെ ആദ്യ, അവസാന ഭാഗങ്ങള്‍ ഉപയോഗിച്ചാല്‍ മതി.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><P>ഒന്നാമത്തെ
 പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം 
വേണമെങ്കില്‍ ആവാം... </P><P>ഇതു രണ്ടാമത്തെ 
പാരഗ്രാഫ്.രണ്ടാമത്തെ പാരഗ്രാഫ് പുതിയ ഒരു വരിയില്‍ തുടങ്ങിയതു 
ശ്രദ്ധിയ്ക്കുക.</P></td><td>ഒന്നാമത്തെ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... <br />
ഇതു രണ്ടാമത്തെ പാരഗ്രാഫ്.രണ്ടാമത്തെ പാരഗ്രാഫ് പുതിയ ഒരു വരിയില്‍ തുടങ്ങിയതു ശ്രദ്ധിയ്ക്കുക.</td></tr>
</tbody></table>
<br />
<br />
<P>
 ടാഗിന് ഒരു ആട്രിബ്യൂട്ട് ആയി align എന്നത് ഉപയോഗിയ്ക്കാം... 
പാരഗ്രാഫിന്റെ അലൈന്‍മെന്റ് ശരിയാക്കാന്‍ ആണ് ഈ ആട്രിബ്യൂട്ട് 
ഉപയോഗിയ്ക്കുന്നത്.align ന്റെ വിലകള്‍ left, right, center, justify 
എന്നിവയില്‍ ഏതെങ്കിലുമാവാം.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><P
 align=“left“ > അലൈന്‍മെന്റ് ഇടതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ 
ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ 
ആവാം... </P></td><td><div align="left">
അലൈന്‍മെന്റ് ഇടതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </div>
</td></tr>
<tr><td></td><td></td></tr>
<tr><td><P
 align=“right“ > അലൈന്‍മെന്റ് വലതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ 
ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ 
ആവാം... </P></td><td><div align="right">
അലൈന്‍മെന്റ് വലതു വശത്തേയ്ക്കായ പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </div>
</td></tr>
<tr><td></td><td></td></tr>
<tr><td><P
 align=“center“ > അലൈന്‍മെന്റ് നടുവിലുള്ള പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ 
വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... 
</P></td><td><div align="center">
അലൈന്‍മെന്റ് നടുവിലുള്ള പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </div>
</td></tr>
<tr><td></td><td></td></tr>
<tr><td><P
 align=“justify“ > അലൈന്‍മെന്റ് ജസ്റ്റിഫൈ ചെയ്തിരിയ്ക്കുന്ന 
പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം 
വേണമെങ്കില്‍ ആവാം... </P></td><td><div align="justify">
അലൈന്‍മെന്റ്
 ജസ്റ്റിഫൈ ചെയ്തിരിയ്ക്കുന്ന പാരഗ്രാഫിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു 
രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... </div>
</td></tr>
</tbody></table>
<br />
<br />
6. സ്പാന്‍ - <SPAN><br />
പാരഗ്രാഫ്
 ആയി തിരിയ്ക്കാതെ തന്നെ ഒരു ഭാഗം ടെക്‌സ്റ്റ് ഫോര്‍മാറ്റ് ചെയ്യാനാണ് 
സ്പാന്‍ ഉപയോഗിയ്കുന്നത്. സ്പാനും പാരഗ്രാഫ് ടാഗും ഏകദേശം ഒരുപോലെയാണ് 
ഉപയോഗിയ്ക്കുന്നത്. സ്പാന്‍ പുതിയ വരിയില്‍ തുടങ്ങുന്നില്ല എന്ന് 
ഓര്‍ത്തിരിയ്ക്കുക.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td><SPAN>ഒന്നാമത്തെ
 സ്പാനിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം 
വേണമെങ്കില്‍ ആവാം... </SPAN><SPAN>ഇതു രണ്ടാമത്തെ 
സ്പാന്‍.രണ്ടാമത്തെ സ്പാന്‍ പുതിയ ഒരു വരിയില്‍ തുടങ്ങാത്തതു 
ശ്രദ്ധിയ്ക്കുക.</SPAN></td><td>ഒന്നാമത്തെ സ്പാനിന്റെ ഒന്നാമത്തെ വാചകം. ഇതു രണ്ടാമത്തെ വാചകം. ഇനിയും വാചകം വേണമെങ്കില്‍ ആവാം... ഇതു രണ്ടാമത്തെ സ്പാന്‍.രണ്ടാമത്തെ സ്പാന്‍ പുതിയ ഒരു വരിയില്‍ തുടങ്ങാത്തതു ശ്രദ്ധിയ്ക്കുക.</td></tr>
</tbody></table>
<br />
<br />
7. തിരശ്ചീന വര - <HR><br />
തിരശ്ചീനമായ ഒരു വര വരയ്ക്കാനാണ് ഈ ടാഗ് ഉപയോഗിയ്ക്കുന്നത്. ക്ലോസിംഗ് ടാഗ് ആവശ്യമില്ലാത്ത ഒരു ടാഗാണിത്.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>അടിയൊഴുക്കുകള്‍<HR> മൂന്നാം മുറ</td><td>അടിയൊഴുക്കുകള്‍ <br />
<hr />
<br />
മൂന്നാം മുറ</td></tr>
</tbody></table>
<br />
<br />
8. ബ്രെയ്‌ക്ക് - <BR><br />
എഴുത്ത്
 അടുത്ത വരിയില്‍ തുടങ്ങാന്‍ ഈ ടാഗ് ഉപയോഗിയ്ക്കാം. ഇതിനും ക്ലോസിംഗ് ടാഗ് 
ആവശ്യമില്ല. ഒന്നിലധികം <BR> അടുത്തടുത്ത് ഉപയോഗിച്ച് വരികള്‍ 
തമ്മിലുള്ള അകലം ക്രമീകരിയ്ക്കാവുന്നതാണ്‍.<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>സാഗര്‍ <BR> ഏലിയാസ് <BR><BR>ജാക്കി</td><td>സാഗര്‍<br />
ഏലിയാസ്<br />
<br />
ജാക്കി</td></tr>
</tbody></table>
<br />
<br />
9. പ്രീ-ഫോര്‍മാറ്റിംഗ് -<PRE><br />
എച്.ടി.എം.എല്‍
 പേജിലെ ശൂന്യമായ സ്ഥലങ്ങള്‍ ബ്രൌസറില്‍ കാണിക്കാറില്ല. രണ്ടു 
വാക്കുകള്‍ക്കിടയില്‍ ഒന്നിലധികം ശൂന്യസ്ഥലം ഉണ്ടെങ്കില്‍ ഒരു ശൂന്യസ്ഥലം 
മാത്രമെ ബ്രൌസറില്‍ കാണിക്കുകയുള്ളു. അതേ പോലെ <BR> എന്ന് 
ഉപയോഗിയ്ക്കാതെ പുതിയ ഒരു വരിയില്‍ എഴുത്ത് തുടങ്ങിയാല്‍ ബ്രൌസറില്‍ 
കാണിക്കുമ്പോള്‍ ആ ഭാഗം ഒരു പുതിയ വരിയില്‍ തുടങ്ങണം എന്നില്ല. അതു 
വരെയുള്ള എഴുത്തിന്റെ തുടര്‍ച്ചയായി മാത്രമേ വരൂ. ഇനി അധവാ ഇതു പോലെ 
ശൂന്യസ്ഥലങ്ങളും പുതിയ വരികളും ഒക്കെ ടൈപ്പ് ചെയ്യുന്നതു പോലെ തന്നെ 
ബ്രൌസറില്‍ കാണണമെങ്കില്‍ <PRE> എന്ന പ്രീഫോര്‍മാറ്റിംഗ് ടാഗ് 
ഉപയോഗിയ്ക്കണം. <PRE>-യുടെ ആദ്യ അവസാന ടാഗുകള്‍ക്കിടയിലുള്ള ഭാഗം അതേ
 പോലെ തന്നെ ബ്രൌസറില്‍ കാണിയ്ക്കും.<br />
<br />
<br />
<br />
<br />
<br />
<table border="2"><tbody>
<tr bgcolor="lightblue"><td>ഉദാഹരണം</td><td>ബ്രൌസറില്‍ കാണുന്നത്</td></tr>
<tr><td>പ്രീ ഇല്ലാതെ       സ്തലം<br />
വിട്ട് അടുത്ത വരിയില്‍ എഴുതിയാല്‍</td><td>പ്രീ ഇല്ലാതെ സ്തലം വിട്ട്<br />
അടുത്ത വരിയില്‍ എഴുതിയാല്‍</td></tr>
<tr><td></td><td></td></tr>
<tr><td><PRE>ഒന്നു മുതല്‍<br />
ഒമ്പതു വരെ</PRE></td><td><pre>ഒന്നു        മുതല്‍
ഒമ്പതു വരെ</pre>
</td></tr>
</tbody></table>
<br />
<br />
<br />
ഇത്രയൊക്കെ
 ആയ സ്ഥിതിയ്ക്ക് ഒരു പേജ് മുഴുവനായി ഉണ്ടാക്കി നോക്കാം. ഒരു നോട്ട്പാഡ് 
ജാലകം തുറക്കുക. താഴ കൊടുത്തിരിയ്ക്കുന്ന ഭാഗം ഇവിടുന്ന് പകര്‍ത്തി 
അതിലെയ്ക്ക് പതിയ്ക്കുക.<br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>wELCOME tO mY wORLD</TITLE><br />
</HEAD><br />
<br />
<BODY><br />
<h1>Malayalam Cinema</h1><br />
Contributions of Mammukkoya and Pappu to Malayalam film industry can not be forgotten easily. <br />
<P><br />
<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.<br />
</P>  <br />
<HR><br />
<I>Gafoorkka</I>, the visa agent who 
propels a number of innocent victims to the Gulf Emirates in 
<I>Urus</I> is a character  <br />
portrayed by the great actor <B>Kozhikkodan Mammukkoya </B>.<br />
</BODY><br />
</HTML><br />
<br />
ഇനി
 ആ പേജ് എന്തെങ്കിലും പേരില്‍ സേവ് ചെയ്യണം. ശ്രദ്ധിയ്കേണ്ട കാര്യം ഫയലായി 
സേവ് ചെയ്യുമ്പോള്‍ അതിന്റെ എക്‌സ്‌റ്റെന്‍ഷന്‍ .html എന്നോ .htm എന്നോ 
എന്നായിരിയ്ക്കണം. വേണമെങ്കില്‍ പേജ് malayalam.html എന്ന് പേരില്‍ സേവ് 
ചെയ്യാം.<br />
<br />
അടുത്ത പടിയായി വേണ്ടത്, ഒരു ബ്രൌസര്‍ ജാലകം തുറക്കുക 
എന്നതാണ്. ഇന്റര്‍നെറ്റ് എക്‌സ്‌പ്ലോറര്‍ തന്നെ ആയിക്കോട്ടെ. ഫയര്‍ഫോക്‌സോ 
നെറ്റ്സ്കെയ്പ്പോ എന്തായാലും മതി. ബ്രൌസര്‍-ഇല്‍ നിന്നും നമ്മള്‍ നേരത്തെ 
ഉണ്ടാക്കിയ malayalam.html എന്ന ഫയല്‍ തുറക്കുക എന്നതാണ് ആടുത്ത പടി.പേജ് 
തുറക്കാനായി ഫയല്‍ -> ഓപ്പണ്‍ എന്ന ഡയലോഗ് ബോക്‌സ് ഉപയോഗിയ്ക്കാം. ഫയല്‍
 ബ്രൌസറില്‍  തുറക്കൂ, ഇതാ നിങ്ങളുടെ എച്. ടി. എം. എല്‍ പെജ് റെഡി. <br />
<br />
ഇനി
 <BODY>-ക്കും </BODY>-ക്കും ഇടയ്ക്കുള്ള ഭാഗം ആവശ്യാനുസരണം 
മാറ്റി പല പേജുകളും സൃഷ്‌ടിയ്ക്കാം. കൂടുതല്‍ എഴുത്തും ടാഗുകളും 
ചേര്‍ക്കാം.<br />
<br />
<div align="right">
<br />
(തുടരും..)</div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
Posted by <span class="fn" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person"><span itemprop="name">Muzammilmoosa</span></span></span><span class="post-icons"><span class="item-action"><a href="http://www.blogger.com/email-post.g?blogID=23051198&postID=115249075673474305" title="Email Post">
</a>
</span>

HTML Tutorial-4

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

2/07/2014