Links

HTML എന്നാല്‍ എന്ത് - 2

ഒന്നാം അദ്ധ്യായത്തില്‍ വിവരിച്ച പ്രകാരം  ഒരു സിമ്പിള്‍ വെബ്പേജ് ഉണ്ടാക്കി ഡസ്ക്ടോപ്പില്‍ സേവ് ചെയ്തിട്ടുണ്ടോ? ഇല്ലെങ്കില്‍ സാരമില്ല. ഇപ്പോള്‍ പുതിയതായി  നോട്ട്പാഡില്‍ ടൈപ്പ് ചെയ്ത് html എന്ന് എക്സ്റ്റന്‍ഷന്‍ കൊടുത്ത് സേവ് ചെയ്യാം.  സേവ് ചെയ്തിട്ടുണ്ടെങ്കില്‍ എപ്പോഴും അത് വീണ്ടും നോട്ട്പാഡില്‍ ഓപ്പന്‍ ചെയ്ത് ആവശ്യമായ തിരുത്തലുകളും മാറ്റങ്ങളും വരുത്തി പിന്നെയും പിന്നെയും സേവ് ചെയ്യാം.  അങ്ങനെ സേവ് ചെയ്യുമ്പോള്‍ ഒപ്പന്‍ ചെയ്ത നോട്ട്പാഡ് മാറ്റങ്ങള്‍ വരുത്തിയ ശേഷം ക്ലോസ് ചെയ്താല്‍ മതി. ക്ലോസ് ചെയ്യുമ്പോള്‍  txt file has changed. Do you want to save the changes ? കമ്പ്യൂട്ടര്‍ നമ്മോട് ചോദിക്കും. അതിന്  yes എന്ന് ക്ലിക്ക് ചെയ്താല്‍ മതി.  മാറ്റങ്ങള്‍ ഓട്ടോമെറ്റിക്ക് ആയി സേവ് ആയിട്ടുണ്ടാകും. ശ്രദ്ധിക്കേണ്ട കാര്യം, വെബ്പേജ് ഉണ്ടാക്കി ഡസ്ക്ടോപ്പില്‍ സേവ് ചെയ്തിട്ടുള്ളത് ബ്രൌസറിന്റെ ഐക്കണ്‍ ചിഹ്നത്തിലായിരിക്കും കാണുക.  അതില്‍ ഡബിള്‍ ക്ലിക്ക് ചെയ്താല്‍ വെബ്പേജ് ഓപ്പന്‍ ആകും.  എഡിറ്റ് ചെയ്യാന്‍ വീണ്ടും നോട്ട്പാഡില്‍ തുറക്കാന്‍ ആ ഐക്കണില്‍ റൈറ്റ് ക്ലിക്ക് ചെയ്യുക. അപ്പോള്‍ തുറക്കുന്ന പോപ് അപ്പില്‍ open with  എന്ന് കാണുന്നിടത്ത്  Notepad  എന്ന് സെലക്റ്റ് ചെയ്ത് ക്ലിക്ക് ചെയ്യുക. അപ്പോള്‍ സേവ് ചെയ്ത വെബ്പേജ് നോട്ട്പാഡില്‍ തുറക്കും.  എഡിറ്റ് ചെയ്ത്, ഞാന്‍ പറഞ്ഞ പോലെ ജസ്റ്റ് ക്ലോസ് ചെയ്യുക.  എച്ച് ടി എം എല്‍  എഴുതി പരീക്ഷിച്ചു  നോക്കാന്‍    ഇവിടെ ക്ലിക്ക് ചെയ്യുക

ശരി, നമ്മള്‍  ഒരു വെബ്പേജ് ഉണ്ടാക്കി എന്നിരിക്കട്ടെ.  നമ്മുടെ സിസ്റ്റത്തില്‍ അല്ലെ അത് സേവ് ചെയ്തിട്ടുള്ളത്.  മറ്റുള്ളവര്‍ അത് കാണണമെങ്കില്‍ അതൊരു വെബ്സൈറ്റ് ആക്കി ഇന്റര്‍നെറ്റില്‍ കണക്റ്റ് ചെയ്യണ്ടേ?  ഒരു വെബ്പേജ് ആണെങ്കിലും ഇന്റര്‍നെറ്റില്‍ കണക്റ്റ് ചെയ്താല്‍ അത് ഒരു വെബ്സൈറ്റ് തന്നെയാണ്. ഒന്നോ അതില്‍ കൂടുതലോ ഉള്ള വെബ്പേജുകള്‍ തന്നെയാണ് വെബ്സൈറ്റ്.  ഒരു വെബ്പേജ് ഇന്റര്‍നെറ്റില്‍ അപ്‌ലോഡ് ചെയ്യണമെങ്കില്‍ നമ്മുടെ സിസ്റ്റത്തില്‍ FTP (file transfer protocol) എന്നൊരു പ്രോഗ്രാം അല്ലെങ്കില്‍ സോഫ്റ്റ്‌വേര്‍ വേണം. അത് പണം കൊടുത്ത് വാങ്ങേണ്ടതാണ്.  എന്നാല്‍ മറ്റേതൊരു പ്രോഗ്രാം പോലെ സൌജന്യമായും FTP ലഭിക്കും.  ഇനി വേണ്ടത് ഒരു ഡൊമൈന്‍ ആണ്.  ഏത് വെബ്സൈറ്റിനും ഒരു അഡ്രസ്സ് (URL -Uniform Resource Locator ) വേണം. അതാണ് ഡൊമൈന്‍.  പിന്നെ പ്രധാനമായി വേണ്ടത് നമ്മുടെ വെബ്പേജ് സ്റ്റോര്‍ ചെയ്യാന്‍ സര്‍വര്‍ സ്പേസ് ആണ്. അതിന് സര്‍വര്‍ കമ്പ്യൂട്ടര്‍ വേണം.  നമ്മുടെ കമ്പ്യൂട്ടര്‍ ക്ലൈയന്റ് കമ്പ്യുട്ടര്‍ ആണ്. വെബ്സൈറ്റ് സ്റ്റോര്‍ ചെയ്യാനുള്ള ഹാര്‍ഡ് ഡിസ്കോ ഇന്റര്‍നെറ്റില്‍ കണക്റ്റ് ചെയ്യാനുള്ള സോഫ്റ്റ്‌വേറുകളോ നമ്മുടെ പേഴ്സണല്‍ കമ്പ്യൂട്ടറില്‍ ഇല്ല. അത്തരം സൌകര്യമുള്ള കമ്പ്യൂട്ടറുകളെയാണ് സര്‍വര്‍ കമ്പ്യൂട്ടര്‍ എന്ന് പറയുന്നത്. ഡൊമൈന്‍ നെയിമും സര്‍വര്‍ സ്പേസും കാശ് കൊടുത്ത് വാങ്ങണം.  എന്നാല്‍ സൌജന്യമായി ഡൊമൈനും സര്‍വര്‍ സ്പെയിസും  ഒക്കെ നല്‍കുന്ന  കമ്പനികളുണ്ട്. അത്കൊണ്ട് ചുരുക്കി പറഞ്ഞാല്‍ അല്പം മെനക്കെട്ടാല്‍ നമുക്ക് സ്വന്തമായി ഒരു വെബ്സൈറ്റ് ഉണ്ടാക്കി ഇന്റര്‍നെറ്റില്‍ കൊടുക്കാന്‍ സാധിക്കും.

ഒരു പേജ് ആകുമ്പോള്‍ എന്തെല്ലാം വേണം.  തലവാചകം വേണം. പിന്നെ  ഖണ്ഡികകള്‍ വേണം. വരികള്‍ അവസാനിപ്പിക്കാന്‍ ലൈന്‍ ബ്രെയിക്ക് വേണം.  വരികള്‍ക്കിടയില്‍ ലൈന്‍ അങ്ങനെ പലതും.  ഇതിനൊക്കെയുള്ള ടാഗുകളെ പരിചയപ്പെടാം.

തലവാചകത്തിന് <h1>....</h1> എന്ന ടാഗ് ആണ് ഉപയോഗിക്കുക. h1 മുതല്‍  h6 വരെ ആറ് തരത്തില്‍ വ്യത്യസ്ത വലുപ്പമുള്ള ടാഗുകളാണ് തലവാചകങ്ങള്‍ക്ക് വേണ്ടി എച്ച് ടി എം എല്ലില്‍ ഉള്ളത്.  ഈ എച്ച് ടി എം എല്‍ -ന്റെ സ്റ്റാന്റേര്‍ഡ് തീരുമാനിക്കുന്നത് World Wide Web Consortium (W3C) എന്ന സംഘടനയാണ്. അത് പോലെ തന്നെ  HTML-ന്റെ ഉപജ്ഞാതാവ് W3C യുടെ ഡയരക്ടര്‍ ടിം ബെര്‍ണേര്‍സ് ലീ ( Tim Berners-Lee) ആണെന്നും  മനസ്സിലാക്കുക.

ഒന്നാം പാഠത്തിലേത് പോലെ സേവ് ചെയ്ത വെബ്പേജ് റൈറ്റ് ക്ലിക്ക് ചെയ്ത് നോട്ട്പാഡില്‍ തുറന്ന് താ‍ഴെ കാണുന്ന പോലെ ടൈപ്പ് ചെയ്ത് സേവ് ചെയ്യുക.  അല്ലെങ്കില്‍ പുതിയതായി നോട്ട്പാഡ് തുറന്ന് താഴെയുള്ളത് കോപ്പി- പേസ്റ്റ് ചെയ്ത്  Mywebsite.html  എന്ന് file name കൊടുത്ത് സേവ് ചെയ്യുക. എന്നിട്ട് ഡബിള്‍ ക്ലിക്ക് ചെയ്ത് തുറന്നു നോക്കൂ. 

<html>
<head>
<title>Mywebsite</title>
</head>
<body>
<h1>ഖണ്ഡിക 1</h1>
<h2>ഖണ്ഡിക 2</h2>
<h3>ഖണ്ഡിക 3</h3>
<h4>ഖണ്ഡിക 4</h4>
<h5>ഖണ്ഡിക 5</h5>
<h6>ഖണ്ഡിക 6</h6>
എന്റെ ബ്ലോഗ്
</body>
</html>

ഇത് പോലെ കാണാം.

<p>....</p>  എന്ന ടാഗ് ഖണ്ഡിക തിരിക്കുന്നതിനാണ്.  ഇവിടെ നോക്കുക. 

<center>....</center>  =  സെന്റര്‍  ഇവിടെ നോക്കുക

എല്ലാറ്റിനും ഓപ്പനിങ്ങ് ടാഗ്, ക്ലോസിങ്ങ് ടാഗ് അങ്ങനെ രണ്ട് ടാഗുകള്‍ ആദ്യവും അവസാനവും വേണം എന്ന് പറഞ്ഞു.  എന്നാല്‍ ഒരു വരി അവസാനിപ്പിച്ച് അടുത്ത വരി തുടങ്ങാന്‍ line break <br>  എന്ന ടാഗിന് കോസിങ്ങ് ടാഗ്  മാത്രം മതി. ആ ടാഗിന് പക്ഷെ സ്ലാഷ് br എന്നതിന് ശേഷമാണ് എഴുതുക.<br /> ഇങ്ങനെ.  ഇവിടെ കാണുക .  ഈ ടാഗ് വെബ്പേജ് ഉണ്ടാക്കാനല്ലാതെ തന്നെ ബ്ലോഗില്‍ ചിലപ്പോള്‍ ഉപകാരമുണ്ടാവും.  അത് പോലെ തന്നെയാണ് hr (horizontal rule ) എന്ന ടാഗ്.  രണ്ട് ഖണ്ഡികകള്‍ക്കിടയില്‍ ഒരു നേര്‍ വര (horizontal line) വേണമെങ്കില്‍ <hr /> എന്ന ക്ലോസിങ്ങ് ടാഗ് മതി.  ഇവിടെ നോക്കുക. 


[ ബ്ലോഗര്‍മാര്‍ക്ക് വളരെ ഉപകാരപ്രദമായ target എന്ന  Anchor tag നെ പറ്റി ഒന്ന് സൂചിപ്പിക്കാം.  നമ്മള്‍ ബ്ലോഗില്‍  പലപ്പോഴും ലിങ്ക് കൊടുക്കാറുണ്ടല്ലൊ. ഈ പോസ്റ്റില്‍ തന്നെ കുറെ ലിങ്കുകള്‍ കാണാം.  ഏതെങ്കിലും ഒരു ലിങ്കില്‍ ക്ലിക്ക് ചെയ്തുനോക്കൂ.  അപ്പോള്‍ മറ്റൊരു ജാലകത്തില്‍ ആ പേജ് തുറക്കുന്നത് കാണാം.  അപ്പോള്‍ വാ‍യനക്കാര്‍ക്ക് ബേക്ക് അടിച്ച് നമ്മുടെ പേജില്‍ വീണ്ടും വരേണ്ടതില്ല.  ഇങ്ങനെ പോസ്റ്റിലെ ഇമേജിനും ആങ്കര്‍ ടാഗ് കൊടുക്കാം. പല ബ്ലോഗര്‍മാരും ഈ ടാഗ് ഉപയോഗിച്ചു കാണുന്നില്ല. എങ്ങനെയാണ് ഈ ടാഗ് പോസ്റ്റില്‍ കൊടുക്കുക എന്ന് നോക്കാം.  W3School എന്നതിന് ലിങ്ക് കൊടുക്കാന്‍ നാം ആ ടെക്സ്റ്റ്  സെലക്റ്റ് ചെയ്തിട്ട് മേലെ Link എന്ന് കാണുന്നിടത്ത് ക്ലിക്ക് ചെയ്താല്‍ വരുന്ന  കോളത്തില്‍ http://www.w3schools.com/default.asp എന്ന യു ആര്‍ എല്‍ പെയിസ്റ്റ് ചെയ്തിട്ട് ഓ.കെ. അടിക്കുന്നു അല്ലെ.  ഇപ്പോള്‍ ലിങ്ക് ആയി. ഇനിയാണ് ടാര്‍ഗറ്റ് എന്ന ടാഗ് കൊടുക്കേണ്ടത്.  അതിന് പോസ്റ്റ് ടൈപ്പ് ചെയ്യുന്ന എഡിറ്ററിന്റെ മേലെ കാണുന്ന Edit HTML എന്ന ബോക്സില്‍ ക്ലിക്ക് ചെയ്യുക. അപ്പോള്‍ എഡിറ്റര്‍ HTML മോഡില്‍ ആയിരിക്കും. അവിടെ < a href="http://www.w3schools.com/default.asp" >W3School< / a > ഓപ്പനിങ്ങ് ടാഗില്‍ യു ആര്‍ എല്‍ പിന്നെ കൊട്ടേഷന്‍ ചിഹ്നം കഴിഞ്ഞിട്ട് target="_blank"  എന്നു കൂടി ടൈപ്പ് ചെയ്യുക. അപ്പോള്‍ ഇങ്ങനെ ഇരിക്കും : <  a href="http://www.w3schools.com/default.asp" target="_blank">W3School <  / a  >  എന്നിട്ട് വീണ്ടും Compose മോഡില്‍ മാറ്റിയിട്ട് തുടര്‍ന്ന് എഴുതുകയോ പോസ്റ്റ് പബ്ലിഷ് ചെയ്യുകയോ ചെയ്യുക. ]




(തുടരും)


17 comments:

Noushad Vadakkel said...

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

Unknown said...

informative...

അലി said...

നന്ദി മാഷെ... തുടരുക.

ശ്രീജിത് കൊണ്ടോട്ടി. said...

വിജ്ഞാനപ്രദമായ പോസ്റ്റ്‌.. :)

പട്ടേപ്പാടം റാംജി said...

പരീക്ഷിച്ച് നോക്കുന്നുണ്ട്.
ഇതുവരെ ശരിയായിട്ടില്ല.
ഇനി നാളെ നോക്കണം.

Pranavam Ravikumar said...

Very good one!

Unknown said...
This comment has been removed by the author.
ബെഞ്ചാലി said...

informative post fr all web users.
thank you.

Ismail Chemmad said...

വിജ്ഞാനപ്രദമായ പോസ്റ്റ്ന് നന്ദി മാഷെ.

kharaaksharangal.com said...

njaan vaayikkunnundu. pakshe ellaa thavanayum comment ezhuthilla. samayam kittaaththathukondaanu. wordil copy cheythu vaykkum. pinneetu vaayikkum. anganeyaanu pathivu.

msntekurippukal said...

നന്ദി, എന്നേപ്പോലുള്ള, ഓരോന്ന് വായിച്ച് അതുപോലെ ബ്ലോഗ് ചെയ്യുന്നവര്‍ക്ക് വളരെ ഗുണകരമായ ഒരു പൊസ്റ്റ് ആണിത്.ഒരിക്കല്‍ക്കൂടി ഹൃദയംഗമമായ നന്ദി രേഖപ്പെടുത്തട്ടെ.

Anonymous said...

ഇതൊക്കെ പഠിപ്പിക്കാന്‍ ഒരു പാട്‌ സൈറ്റ്‌ ഉണ്ടല്ലോ സുകുമാരേട്ടാ ഇലക്ഷന്‍ അടുത്തിരിക്കുന്ന സമയം സുകുമാരേട്ടന്‍ ഇങ്ങിനെ എച്‌ ടീ എം എല്‍ പഠിപ്പിക്കാന്‍ തുടങ്ങിയാല്‍ എങ്ങിനെ യു ഡീ എഫ്‌ അധികാരത്തില്‍ വരും? ബ്ളോഗ്‌ ഉലകം മുഴുവന്‍ സഖാക്കള്‍ എഴുതുന്ന ഭരണ നേട്ടങ്ങള്‍ കൊണ്ട്‌ നിറഞ്ഞിരിക്കുകയണു, യു ഡീ എഫിനെ സപ്പോര്‍ട്ട്‌ ചെയ്യാന്‍ താങ്കള്‍ മാത്രമേ ഉള്ളു, അപ്പോല്‍ എച്‌ ടീ എം എല്‍ ഒക്കെ അവിടെ നില്‍ക്കട്ടെ പടച്ചട്ട അണിഞ്ഞു ഒന്നിറങ്ങിയാട്ടെ

K.P.Sukumaran said...

@ സുശീലന്‍ , യു ഡി എഫിനെ വരുന്ന തെരഞ്ഞെടുപ്പില്‍ 120 ല്‍ അധികം സീറ്റോടെ വിജയിപ്പിക്കാന്‍ മാര്‍ക്സിസ്റ്റ് ഔദ്യോഗികപക്ഷം തന്നെ കച്ചകെട്ടി ഇറങ്ങുമ്പോള്‍ ഞാനും ഉത്സാഹിക്കണോ? ലോകത്ത് എവിടെയും കമ്മ്യൂണിസത്തെ കമ്മ്യൂണിസ്റ്റുകാര്‍ തന്നെയാണ് കുളിപ്പിച്ചു കിടത്തിയത്. ഇന്ത്യയില്‍ അതിന്റെ ദൌത്യം അവസാനമായി ലഭിച്ചത് കാരാട്ട്-പിണറായിയാദി പ്രഭൃതികള്‍ക്കാണ്. അവരത് സുന്ദരമായി നിര്‍വ്വഹിക്കുന്നുണ്ടല്ലോ :)

Anonymous said...

പറയാന്‍ വരട്ടെ വീ എസ്‌ നാടകം രണ്ടാം ഭാഗം തുടങ്ങി, അവയിലബിള്‍ പീ ബി ചിലപ്പോള്‍ സീറ്റു കൊടുക്കാം യു ഡീ എഫിണ്റ്റെ ലിസ്റ്റ്‌ പുറത്ത്‌ വന്നിട്ടില്ല വയലാര്‍ രവിയുടെ മോളും പത്മജയും ഗൌരി അമ്മൂമ്മയും എല്ലാം നിറഞ്ഞ ലിസ്റ്റാണു വരുന്നതെങ്കില്‍ യു ഡീ എഫ്‌ ജയിക്കില്ല

ഇതവണയും കൊല്ലം തിരുവനതപുരം ജില്ലകള്‍ ഭരണം നിശ്ചയിക്കും അവിടെ യു ഡീ എഫ്‌ മുന്‍ തൂക്കമില്ല വീരന്‍ ജനത ദള്‍ മലബാറില്‍ എന്തു ഇഫക്ട്‌ ഉണ്ടാക്കും എന്നു പറയാന്‍ വയ്യ

കണ്‍ഫ്യൂഷന്‍ തീറ്‍ക്കണമേ എന്നതാണു ഇപ്പോള്‍ അവസ്ഥ

മൈലാഞ്ചി said...

ബഹുമാനപ്പെട്ട സര്‍, താങ്കളുടെ ഈ ബ്ലോഗ് മൂലം കുറേ കാര്യങ്ങള്‍ അറിയാന്‍ സാധിച്ചു, അതിലും വലിയ കാര്യം കുട്ടികള്‍ക്കായി എഴുതുന്ന ലേഖനങ്ങളിലേക്ക് വേണ്ട വിവരങ്ങള്‍ നല്ലവണ്ണം കിട്ടി എന്നതാണ്, html എന്താണെന്നറിയാതെ വിഷമിച്ചിരുന്ന എനിക്ക് ലേഖനം ഉപേക്ഷിക്കേണ്ടിവരുമെന്ന് കരുതിയപ്പോഴാണ് താങ്കളുടെ ബ്ലോഗ് കണ്ടത്. താങ്കളുടെ സഹായത്തോടെ ലേഖനം പൂര്‍ത്തിയാക്കി,താങ്കള്‍ അത്ര സിംപിള്‍ ആയാണ് പറഞ്ഞിരിക്കുന്നത്, വളരെ നന്ദി....

മൈലാഞ്ചി said...

താങ്കളുടെ ബ്ലോഗിന്റെ അഡ്രസ് ലേഖനത്തില്‍ കൊടുത്തിട്ടുണ്ട്, വിരോധമില്ലെന്ന് കരുതുന്നു, മുന്‍കൂട്ടി അനുവാദം ചോദിക്കാത്തതില്‍ ക്ഷമിക്കുമല്ലോ.

K.P.Sukumaran said...

@ മൈലാഞ്ചി, വളരെ സന്തോഷം പിന്നെ സ്നേഹവും :)