നിങ്ങള് ഇപ്പോള് വായിക്കുന്നത് ഒരു വെബ്പേജ് ആണ്. ഈ ബ്ലോഗ് ഒരു വെബ്സൈറ്റ് ആണെന്ന് അറിയാമല്ലോ. വെബ്സൈറ്റിലെ ഒരു പേജിനെയാണ് വെബ്പേജ് എന്ന് പറയുന്നത്. ഈ വെബ്സൈറ്റ് നിര്മ്മിക്കാന് ഞാന് ഒന്നും മെനക്കെട്ടിട്ടില്ല. എല്ലാം സൌജന്യമായി കിട്ടി. ഞാന് ആകെ ചെയ്യുന്നത് ഏതാനും സെക്കന്റുകള് കൊണ്ട് ഒരു ബ്ലോഗ് ഉണ്ടാക്കിയതിന് ശേഷം എന്റെ ആശയങ്ങള് ടൈപ്പ് ചെയ്യുന്നു എന്നത് മാത്രമാണ്. എന്നാലും ഇത് ഒരു വെബ്സൈറ്റ് തന്നെയാണ്. നിങ്ങള് ഈ പേജ് വായിക്കുന്നത് ഒരു ബ്രൌസറില് ആണ്. ഇന്റര്നെറ്റ് എക്സ്പ്ലോറര്, മോസില്ല ഫയര്ഫോക്സ് അല്ലെങ്കില് ക്രോം അങ്ങനെ ഏതെങ്കിലും ഒന്ന്. ബ്രൌസറില് മാത്രമേ വെബ്പേജ് വായിക്കാന് പറ്റുകയുള്ളൂ. എന്താണ് എച്ച് ടി എം എല് ( html ) എന്ന് ചോദിച്ചാല് ബ്രൌസറിന്റെ മാതൃഭാഷയാണ് എച്ച് ടി എം എല് എന്ന് പറയാം. ബ്രൌസറിന് HTML മാത്രമേ മനസ്സിലാവുകയുള്ളൂ. ഒരു വെബ്പേജ് എങ്ങനെ കാഴ്ച തരണമെന്ന് ബ്രൌസര് തീരുമാനിക്കുന്നത് ഈ ഭാഷ മനസ്സിലാക്കിയിട്ടാണ്. സാധാരണ ബ്ലോഗ് എഴുതുന്ന എല്ലാവര്ക്കും എച്ച് ടി എം എല് എന്ന വാക്ക് സുപരിചിതമാണ്. അത്കൊണ്ട് എച്ച് ടി എം എല് എന്നതിന്റെ അടിസ്ഥാനവിവരങ്ങള് പങ്ക് വയ്ക്കുക എന്നതാണ് ഈ പോസ്റ്റ് കൊണ്ട് ഞാന് ഉദ്ദേശിക്കുന്നത്. വെബ് ഡിസൈനര്മാര്ക്കും ഡെവലപ്പര്മാര്ക്കും ധാരാളം പഠിക്കാനുണ്ട്. പ്രാഥമിക കാര്യങ്ങള് നമുക്ക് മനസ്സിലാക്കാം.
എച്ച് ടി എം എല് എന്നത് HyperText Markup Language എന്നതിന്റെ ചുരുക്കമാണ്. ഇതില് HyperText എന്ന് പറഞ്ഞാല് Linear text എന്നതിന്റെ വിപരീതമാണ്. നമ്മള് കടലാസില് വായിക്കുന്ന എല്ലാ ടെക്സ്റ്റുകളും Linear ആണ്. അതിന് ഒരു തുടക്കവും അവസാനവുമുണ്ട്. എന്നാല് ഒരു വെബ്പേജില് ടെക്സ്റ്റുകള്ക്ക് ലിങ്ക് നല്കാന് പറ്റും. ആ ലിങ്കില് നിന്ന് നമുക്ക് മറ്റൊരു പേജിലേക്ക് പോകാം. പിന്നെയും ലിങ്കുകള്. ഇത്കൊണ്ടാണ് വെബ്പേജിലെ ടെക്സ്റ്റുകളെ HyperText എന്നു പറയുന്നത്. Markup എന്ന് പറഞ്ഞാല് ഒരു വാചകം അല്ലെങ്കില് അക്ഷരങ്ങള് എങ്ങനെ ബ്രൌസര് കാണിക്കണമെന്ന് നിര്ദ്ദേശിക്കാന് പറ്റും. ഉദാഹരണത്തിന് ഒരു വാചകം ബോള്ഡ് ആയോ ചെരിഞ്ഞോ അണ്ടര്ലൈനോടുകൂടിയോ വ്യത്യസ്ത നിറത്തോടുകൂടിയോ അടയാളപ്പെടുത്താന് പറ്റും. Language എന്നാല് ഭാഷ എന്ന് പറയേണ്ടല്ലൊ. അതായത് എച്ച് ടി എം എല് എന്നാല് ഒരു ഭാഷയാണ്. എന്നാല് കമ്പ്യൂട്ടര് ലാംഗ്വേജ് അല്ല. എച്ച് ടി എം എല് എന്ന ഭാഷയിലാണ് വെബ്പേജുകള് എഴുതുന്നത്. ഒരു ബ്രൌസറില് മാത്രമേ വെബ്പേജ് വായിക്കാന് കഴിയുകയുള്ളൂ. ഒരു വെബ്പേജിന്റെ എച്ച് ടി എം എല് കാണാന് ആ പേജില് റൈറ്റ് ക്ലിക്ക് ചെയ്താല് ഓപന് ആകുന്ന പോപ് അപില് view page source എന്നതില് ക്ലിക്ക് ചെയ്ത് നോക്കുക. അപ്പോള് തുറന്നുവരുന്ന വിന്ഡോയില് ആ പേജിന്റ് എച്ച് ടി എം എല് രൂപം കാണാം.
ആദ്യത്തെ വരിയില് <html> എന്ന് കാണാം. എച്ച് ടി എം എല് എന്ന ഭാഷയിലാണ് ഈ പേജ് എഴുതിയിരിക്കുന്നത് എന്ന് ബ്രൌസറിനെ അറിയിക്കാനാണിത്. ഞാന് ലളിതമായി പറയുന്നത്കൊണ്ട് html ന്റെ വെര്ഷന് ഒക്കെ ആ ആദ്യവരിയില് ഉണ്ടാകുമെങ്കിലും അതിനെ കുറിച്ച് ഇപ്പോള് വിശദീകരിക്കുന്നില്ല. ശരി, നമുക്ക് ഏറ്റവും ലളിതമായ ഒരു വെബ്പേജ് ഇപ്പോള് ഉണ്ടാക്കാം. അതിന് ഒരു എഡിറ്റര് വേണം. നമ്മുടെ സിസ്റ്റത്തില് നോട്ട് പാഡ് ഉണ്ടല്ലൊ. അത് തുറക്കുക. <html> എന്നതില് രണ്ട് ആങ്കിള് ബ്രായ്ക്കറ്റ് കണ്ടല്ലോ. ഇതിനെ ടാഗ് എന്നാണ് പറയുക. html എന്നത് എലമെന്റാണ്. ഒരു വാചകം ബോള്ഡ് ആക്കണമെങ്കില് ആ വാചകത്തിന്റെ ആദ്യവും അവസാനവും നമ്മള് രണ്ട് ടാഗുകള്ക്കുള്ളില് b എന്ന എലമെന്റ് ചേര്ക്കുന്നു. അപ്പോള് ആ വാചകത്തെ ബോള്ഡ് ആക്കി കാണിക്കണമെന്ന് ബ്രൌസര് തിരിച്ചറിയുന്നു. <b>ഉദാഹരണത്തിന് </b> , എന്ന വാക്കിന്റെ ആദ്യമുള്ള ടാഗിനെ ഓപ്പനിങ്ങ് ടാഗ് എന്നും അവസാനമുള്ള ടാഗിനെ ക്ലോസിങ്ങ് ടാഗ് എന്നും പറയുന്നു. <b>... </b> , <i> ...</i> , <u>... </u> എന്നീ എലമെന്റുകള് യഥാക്രമം ബോള്ഡ് (Bold) , ഇറ്റാലിക്ക് (Italic) , അണ്ടര്ലൈന് (Under line) എന്നിവയെ കുറിക്കുന്നു എന്ന് അറിയാമല്ലോ അല്ലേ.
നോട്ട് പാഡില് താഴെ കാണുന്ന പോലെ ടൈപ്പ് ചെയ്യുക.
<html>
<head>
<title>Mywebsite</title>
</head>
<body>
എന്റെ ബ്ലോഗ്
</body>
</html>
(പ്രത്യേകം ശ്രദ്ധിക്കുക: എച്ച് ടി എം എല് എഴുതുമ്പോള് ഇങ്ങനെ താഴെത്താഴെയായി തന്നെ എഴുതണമെന്നില്ല. അതൊന്നും ബ്രൌസര് കണക്കിലെടുക്കുകയില്ല. ഒരേ വരിയില് തുടര്ച്ചയായി എഴുതിയാലും കുഴപ്പമില്ല. തെറ്റുകള് ബ്രൌസര് അവഗണിക്കും. ശരിയായത് മാത്രം കാണിക്കും. എന്നാല് താഴെത്താഴെയായി എഴുതുന്നതാണ് ഭംഗി. അത്പോലെ തന്നെ അക്ഷരങ്ങള് ക്യാപിറ്റല് ലെറ്റര് ആകുന്നതോ സ്മാള് ലെറ്റര് ആകുന്നതോ എച്ച് ടി എം എല്ലില് പ്രശ്നമല്ല)
ഒരു എച്ച് ടി എം എല് വെബ്പേജിന് ഹെഢും ബോഡിയും ഉണ്ടാകും. ഹെഢില് ഉള്ളത് നാം കാണുകയില്ല. ബോഡിയില് ഉള്ളത് മാത്രമേ കാണുകയുള്ളൂ. മേലെ ടൈപ്പ് ചെയ്തതില് html എന്നത് ആദ്യം ഓപ്പനിങ്ങ് ടാഗിലും അവസാനം ക്ലോസിങ്ങ് ടാഗിലും ഉള്ക്കൊള്ളിച്ചു. അതിന്റെ ഇടയില് ഹെഢും ബോഡിയും ഓപ്പനിങ്ങ് , ക്ലോസിങ്ങ് എന്നീ ടാഗുകളില് ഉള്പ്പെടുത്തി. ഹെഢിന്റെ ഇടയില് ടൈറ്റില് കൊടുത്തു. ആ ടൈറ്റിലും രണ്ട് ടാഗുകള്ക്കിടയില് ചേര്ത്തു അല്ലേ? ഈ ടൈറ്റില് ആണ് നമ്മള് ബ്രൌസറിന്റെ ഏറ്റവും മുകളില് കാണുക. ഹെഢിന്റെ ഇടയില് വരുന്നത്കൊണ്ട് അത് പേജില് കാണുകയില്ല. ബോഡിയില് ഒപ്പനിങ്ങ് ടാഗിനും ക്ലോസിങ്ങ് ടാഗിനും ഇടയില് എഴുതിയ “ എന്റെ ബ്ലോഗ് ” എന്ന വാചകം മാത്രമേ പേജില് കാണുകയുള്ളൂ. ഇനി നമുക്ക് നോട്ട്പാഡില് ടൈപ്പ് ചെയ്തത് വെബ്പേജാക്കി മാറ്റണം.
നോട്ട്പാഡില് file-ല് ക്ലിക്ക് ചെയ്യുക. എന്നിട്ട് save as എന്ന് കൊടുക്കുക. അപ്പോള് തുറക്കുന്ന വിന്ഡോയില് മേലെ save in: എന്ന് കാണുന്നിടത്തില് Desktop സെലക്റ്റ് ചെയ്യുക. താഴെ file name എന്ന് കാണുന്നിടത്ത് Mywebsite.html എന്നു കൊടുക്കുക. save as type: എന്നിടത്ത് all files എന്ന് സെലക്റ്റ് ചെയ്യുക, Encoding എന്നിടത്തില് UTF-8 സെലക്റ്റ് ചെയ്യുക. എന്നിട്ട് സേവ് ബട്ടണ് ക്ലിക്ക് ചെയ്യുക. ഇപ്പോള് നിങ്ങളുടെ ഡസ്ക്ടോപ്പില് Mywebsite എന്ന വെബ് പേജ് സേവ് ആയിട്ടുണ്ടാവും. ഇതില് ഫയല് നെയിം കൊടുത്തപ്പോള് Mywebsite ന്റെ കൂടെ ഡോട്ട് html എന്ന് ചേര്ത്തില്ലേ. അതിനെ ഫയലിന്റെ എക്സ്റ്റന്ഷന് എന്ന് പറയും. ആ എക്സ്റ്റന്ഷന് ചേര്ത്താല് മാത്രമേ ബ്രൌസറില് വായിക്കാന് പറ്റുന്ന വെബ്പേജ് ആവുകയുള്ളൂ. ഞാന് ഇത് ഒന്ന് കൂടി വിവരിക്കാം.
അറിയാമല്ലോ, ഞാന് ഒരു കമ്പ്യൂട്ടര് വിദഗ്ദനല്ല. എന്നെ പോലെയുള്ള സാധാരണക്കാര്ക്ക് ഞാന് മനസ്സിലാക്കിയത് പറഞ്ഞുകൊടുക്കാനുള്ള എളിയ ശ്രമമാണിത്. തുടരും.
എച്ച് ടി എം എല് എന്നത് HyperText Markup Language എന്നതിന്റെ ചുരുക്കമാണ്. ഇതില് HyperText എന്ന് പറഞ്ഞാല് Linear text എന്നതിന്റെ വിപരീതമാണ്. നമ്മള് കടലാസില് വായിക്കുന്ന എല്ലാ ടെക്സ്റ്റുകളും Linear ആണ്. അതിന് ഒരു തുടക്കവും അവസാനവുമുണ്ട്. എന്നാല് ഒരു വെബ്പേജില് ടെക്സ്റ്റുകള്ക്ക് ലിങ്ക് നല്കാന് പറ്റും. ആ ലിങ്കില് നിന്ന് നമുക്ക് മറ്റൊരു പേജിലേക്ക് പോകാം. പിന്നെയും ലിങ്കുകള്. ഇത്കൊണ്ടാണ് വെബ്പേജിലെ ടെക്സ്റ്റുകളെ HyperText എന്നു പറയുന്നത്. Markup എന്ന് പറഞ്ഞാല് ഒരു വാചകം അല്ലെങ്കില് അക്ഷരങ്ങള് എങ്ങനെ ബ്രൌസര് കാണിക്കണമെന്ന് നിര്ദ്ദേശിക്കാന് പറ്റും. ഉദാഹരണത്തിന് ഒരു വാചകം ബോള്ഡ് ആയോ ചെരിഞ്ഞോ അണ്ടര്ലൈനോടുകൂടിയോ വ്യത്യസ്ത നിറത്തോടുകൂടിയോ അടയാളപ്പെടുത്താന് പറ്റും. Language എന്നാല് ഭാഷ എന്ന് പറയേണ്ടല്ലൊ. അതായത് എച്ച് ടി എം എല് എന്നാല് ഒരു ഭാഷയാണ്. എന്നാല് കമ്പ്യൂട്ടര് ലാംഗ്വേജ് അല്ല. എച്ച് ടി എം എല് എന്ന ഭാഷയിലാണ് വെബ്പേജുകള് എഴുതുന്നത്. ഒരു ബ്രൌസറില് മാത്രമേ വെബ്പേജ് വായിക്കാന് കഴിയുകയുള്ളൂ. ഒരു വെബ്പേജിന്റെ എച്ച് ടി എം എല് കാണാന് ആ പേജില് റൈറ്റ് ക്ലിക്ക് ചെയ്താല് ഓപന് ആകുന്ന പോപ് അപില് view page source എന്നതില് ക്ലിക്ക് ചെയ്ത് നോക്കുക. അപ്പോള് തുറന്നുവരുന്ന വിന്ഡോയില് ആ പേജിന്റ് എച്ച് ടി എം എല് രൂപം കാണാം.
ആദ്യത്തെ വരിയില് <html> എന്ന് കാണാം. എച്ച് ടി എം എല് എന്ന ഭാഷയിലാണ് ഈ പേജ് എഴുതിയിരിക്കുന്നത് എന്ന് ബ്രൌസറിനെ അറിയിക്കാനാണിത്. ഞാന് ലളിതമായി പറയുന്നത്കൊണ്ട് html ന്റെ വെര്ഷന് ഒക്കെ ആ ആദ്യവരിയില് ഉണ്ടാകുമെങ്കിലും അതിനെ കുറിച്ച് ഇപ്പോള് വിശദീകരിക്കുന്നില്ല. ശരി, നമുക്ക് ഏറ്റവും ലളിതമായ ഒരു വെബ്പേജ് ഇപ്പോള് ഉണ്ടാക്കാം. അതിന് ഒരു എഡിറ്റര് വേണം. നമ്മുടെ സിസ്റ്റത്തില് നോട്ട് പാഡ് ഉണ്ടല്ലൊ. അത് തുറക്കുക. <html> എന്നതില് രണ്ട് ആങ്കിള് ബ്രായ്ക്കറ്റ് കണ്ടല്ലോ. ഇതിനെ ടാഗ് എന്നാണ് പറയുക. html എന്നത് എലമെന്റാണ്. ഒരു വാചകം ബോള്ഡ് ആക്കണമെങ്കില് ആ വാചകത്തിന്റെ ആദ്യവും അവസാനവും നമ്മള് രണ്ട് ടാഗുകള്ക്കുള്ളില് b എന്ന എലമെന്റ് ചേര്ക്കുന്നു. അപ്പോള് ആ വാചകത്തെ ബോള്ഡ് ആക്കി കാണിക്കണമെന്ന് ബ്രൌസര് തിരിച്ചറിയുന്നു. <b>ഉദാഹരണത്തിന് </b> , എന്ന വാക്കിന്റെ ആദ്യമുള്ള ടാഗിനെ ഓപ്പനിങ്ങ് ടാഗ് എന്നും അവസാനമുള്ള ടാഗിനെ ക്ലോസിങ്ങ് ടാഗ് എന്നും പറയുന്നു. <b>... </b> , <i> ...</i> , <u>... </u> എന്നീ എലമെന്റുകള് യഥാക്രമം ബോള്ഡ് (Bold) , ഇറ്റാലിക്ക് (Italic) , അണ്ടര്ലൈന് (Under line) എന്നിവയെ കുറിക്കുന്നു എന്ന് അറിയാമല്ലോ അല്ലേ.
നോട്ട് പാഡില് താഴെ കാണുന്ന പോലെ ടൈപ്പ് ചെയ്യുക.
<html>
<head>
<title>Mywebsite</title>
</head>
<body>
എന്റെ ബ്ലോഗ്
</body>
</html>
(പ്രത്യേകം ശ്രദ്ധിക്കുക: എച്ച് ടി എം എല് എഴുതുമ്പോള് ഇങ്ങനെ താഴെത്താഴെയായി തന്നെ എഴുതണമെന്നില്ല. അതൊന്നും ബ്രൌസര് കണക്കിലെടുക്കുകയില്ല. ഒരേ വരിയില് തുടര്ച്ചയായി എഴുതിയാലും കുഴപ്പമില്ല. തെറ്റുകള് ബ്രൌസര് അവഗണിക്കും. ശരിയായത് മാത്രം കാണിക്കും. എന്നാല് താഴെത്താഴെയായി എഴുതുന്നതാണ് ഭംഗി. അത്പോലെ തന്നെ അക്ഷരങ്ങള് ക്യാപിറ്റല് ലെറ്റര് ആകുന്നതോ സ്മാള് ലെറ്റര് ആകുന്നതോ എച്ച് ടി എം എല്ലില് പ്രശ്നമല്ല)
ഒരു എച്ച് ടി എം എല് വെബ്പേജിന് ഹെഢും ബോഡിയും ഉണ്ടാകും. ഹെഢില് ഉള്ളത് നാം കാണുകയില്ല. ബോഡിയില് ഉള്ളത് മാത്രമേ കാണുകയുള്ളൂ. മേലെ ടൈപ്പ് ചെയ്തതില് html എന്നത് ആദ്യം ഓപ്പനിങ്ങ് ടാഗിലും അവസാനം ക്ലോസിങ്ങ് ടാഗിലും ഉള്ക്കൊള്ളിച്ചു. അതിന്റെ ഇടയില് ഹെഢും ബോഡിയും ഓപ്പനിങ്ങ് , ക്ലോസിങ്ങ് എന്നീ ടാഗുകളില് ഉള്പ്പെടുത്തി. ഹെഢിന്റെ ഇടയില് ടൈറ്റില് കൊടുത്തു. ആ ടൈറ്റിലും രണ്ട് ടാഗുകള്ക്കിടയില് ചേര്ത്തു അല്ലേ? ഈ ടൈറ്റില് ആണ് നമ്മള് ബ്രൌസറിന്റെ ഏറ്റവും മുകളില് കാണുക. ഹെഢിന്റെ ഇടയില് വരുന്നത്കൊണ്ട് അത് പേജില് കാണുകയില്ല. ബോഡിയില് ഒപ്പനിങ്ങ് ടാഗിനും ക്ലോസിങ്ങ് ടാഗിനും ഇടയില് എഴുതിയ “ എന്റെ ബ്ലോഗ് ” എന്ന വാചകം മാത്രമേ പേജില് കാണുകയുള്ളൂ. ഇനി നമുക്ക് നോട്ട്പാഡില് ടൈപ്പ് ചെയ്തത് വെബ്പേജാക്കി മാറ്റണം.
നോട്ട്പാഡില് file-ല് ക്ലിക്ക് ചെയ്യുക. എന്നിട്ട് save as എന്ന് കൊടുക്കുക. അപ്പോള് തുറക്കുന്ന വിന്ഡോയില് മേലെ save in: എന്ന് കാണുന്നിടത്തില് Desktop സെലക്റ്റ് ചെയ്യുക. താഴെ file name എന്ന് കാണുന്നിടത്ത് Mywebsite.html എന്നു കൊടുക്കുക. save as type: എന്നിടത്ത് all files എന്ന് സെലക്റ്റ് ചെയ്യുക, Encoding എന്നിടത്തില് UTF-8 സെലക്റ്റ് ചെയ്യുക. എന്നിട്ട് സേവ് ബട്ടണ് ക്ലിക്ക് ചെയ്യുക. ഇപ്പോള് നിങ്ങളുടെ ഡസ്ക്ടോപ്പില് Mywebsite എന്ന വെബ് പേജ് സേവ് ആയിട്ടുണ്ടാവും. ഇതില് ഫയല് നെയിം കൊടുത്തപ്പോള് Mywebsite ന്റെ കൂടെ ഡോട്ട് html എന്ന് ചേര്ത്തില്ലേ. അതിനെ ഫയലിന്റെ എക്സ്റ്റന്ഷന് എന്ന് പറയും. ആ എക്സ്റ്റന്ഷന് ചേര്ത്താല് മാത്രമേ ബ്രൌസറില് വായിക്കാന് പറ്റുന്ന വെബ്പേജ് ആവുകയുള്ളൂ. ഞാന് ഇത് ഒന്ന് കൂടി വിവരിക്കാം.
അറിയാമല്ലോ, ഞാന് ഒരു കമ്പ്യൂട്ടര് വിദഗ്ദനല്ല. എന്നെ പോലെയുള്ള സാധാരണക്കാര്ക്ക് ഞാന് മനസ്സിലാക്കിയത് പറഞ്ഞുകൊടുക്കാനുള്ള എളിയ ശ്രമമാണിത്. തുടരും.