நண்பர் மூர்த்தி வலைப்பதிவர் மன்றத்தில் கேட்டது போலவே பலருக்கும் சந்தேகங்கள் வரும். எனக்கும் வந்தது, வந்துகொண்டிருக்கிறது. புதிதாக ஒரு வித்தியாசமான அம்சத்தை ஒரு இணையப் பக்கத்தில் பார்த்தால் 'அட!  இதை எப்படிச் செய்திருக்கிறார்கள்! நாமும் இது போல செய்ய முடியுமா?' என்று கேள்வி தோன்றும்.

கற்றுக்கொள்வதற்கு அடிப்படையான தேவையே இந்த அவதானம், ஆர்வம், முயற்சி, சரிபார்ப்பு, பிழைதிருத்தம், மீண்டும் முயற்சி, வெல்லும்வரை விடாமுயற்சி! ஆங்கிலத்தில் இதை Reverse Engineering என்று சொல்லலாம். அப்படியே காப்பியடித்தால் அது தவறு. ஆனால் புரிந்துகொண்டு நம் விருப்பத்துக்கும் தேவைக்கும் ஏற்ப வடிவமைத்துக்கொள்ளும்போது அந்து இன்னொரு புதுமை ஆகிறது. எவரும் போதிமரத்தடியில் உட்கார்ந்து அதை ஞானத்தால் கற்றுக்கொண்டு செய்ய வருவதில்லை. நீங்கள் பார்க்கும் அதை செய்தவர் இதுபோல இன்னொரு இடத்தில் அவதானித்ததை வைத்தே மேம்படுத்தியிருப்பார். ஒன்றிலிருந்து இன்னொன்றுக்கு, அறிந்துகொண்டதன் மூலம் அறியாததை அறிதல். இப்படித்தான் நாம் தெரிந்துகொள்ளமுடியும்.

ஒரு இணையப்பக்கத்தில் குறிப்பிட்ட நமக்குத் தேவையான அந்த அம்சம் 'எப்படி இயங்குகிறது?' என்று தெரிய முதல் வழி அதன் மீயுரை மூலத்தை (html source) ஆராய்தல். வலது சொடுக்கில், IE என்றால் 'view source' என்பதைத் தெரிவுசெய்தும், Firefox என்றால் 'View Page Source' என்பதைத் தெரிவு செய்தும் நாம் மீயுரையை வாசிக்கலாம்.

ஆனால் நிறைய உள்ளடத்தைக் கொண்ட பக்கங்களில் இப்படி மீயுரையைத் திறந்து பார்த்தால் மயக்கமே வ்ரும். நாம் பார்க்க விரும்புவது ஒரு சிறு பகுதியின் மீயுரையைத்தான். இந்தக் கூட்டத்தில் அதை எப்படிப் பொறுக்குவது? அங்கே தான் நிற்கிறான் Firefox . ஆமாம், இந்த மாதிரி வேலைகளுக்காக Firefox-ல் ஒரு எளிய வழி இருக்கிறது. அதாவது நம் மூசி(mouse)யால் நாம் ஆராய நினைக்கிற பகுதியை மட்டும் தெரிவு செய்துகொண்டு, பிறகு வலது சொடுக்கில் பார்த்தால் 'View selection Source' என்ற கட்டளையைப் பார்க்கலாம். அதை சொடுக்கினால், இப்போது மீயுரை காட்டப்படும் சன்னலில் தேவையானது மட்டும் தேர்வாகி நமக்குக் காணக்கிடைக்கும். அதை ஆராய்வதன் மூலம் நாம் அங்கு எப்படி செய்திருக்கிறார்கள் என்பதைப் புரிந்துகொள்ளலாம்.

இதில் இன்னொரு சூட்சுமம் இருக்கிறது. அதுதான் style-sheet எனப்படும் அலங்காரக்குறிப்பு. ப்ளாக்கர் வலைப்பதிவுகள் வலைப்பதிவர் மாற்ற ஏதுவான குறிப்புகளை நேரடியாக மீயுரையிலேயே அனுப்புகின்றன. ஆனால் தொழில்முறையாக அமைக்கப்பட்டுள்ள இணணயத்தளங்களில் இந்த அலங்காரக் குறிப்பு தனியாக ஒரு கோப்பாக சேமிக்கப்பட்டு வரும். எனவே அலங்காரம் (இடம், வடிவம், அளவு, வார்ப்பு போன்ற அம்சங்கள்) பற்றிய தேடல் என்றால் அலங்காரக்குறிப்புக் கோப்பின் URL-ஐத்தெரிந்துகொண்டு அதை உலாவியின் முகவரிக் கட்டத்தில் இட்டு, நாம் தனியாகக் கிழிறக்கி, திறந்து ஆராயலாம். இந்தக் கோப்பு சாதாரணமாக *.css என்ற பெயரில் இருக்கும்.

அடுத்த முறை புதுமை ஒன்றைப் பார்த்தால் அதன் மறுபக்கத்தையும் பார்ப்பீர்கள்தானே. அட, என்ன அதற்குள் தமிழ்மணம் பக்கதிலேயே ஆராயத் தொடங்கிவிட்டீர்கள், அட, முதலுக்கே மோசமாகிவிடும் போல இருக்கே

மேற்கண்ட பாகத்தின் மறுமொழி/கருத்து/விமர்சனம்...

ரொம்ப ஆழமா மீயுரைக் கோப்பை (html file) தொகுக்கவோ, மாற்றவோ, அட, அதெல்லாம் எதுக்கு... படிக்கவோ (பிரித்து மேயவோ, இல்லை மண்டை காயவோ) தெரிஞ்சுக்காட்டாலும், குறைஞ்சது அதன் அடிப்படைக் கட்டமைப்பு (structure) நமக்குத் தெரிஞ்சுக்கிறது நல்லது. ஏன்னா, நாம் சில வசதிகளுக்காகவும், பாணி/வண்ண வித்தியாசத்துக்காகவும் சில அவசியமான மாற்றங்களை செஞ்சே ஆகவேண்டியிருக்கே! உதாரணமா ஹாலோஸ்கான் போன்ற மறுமொழிச்சேவை(இனிமேல் இது தேவையில்லை, ப்ளாக்கர் மறுமொழியே நல்லாத்தானே இருக்கு), உலா வருபவர்களைப் பத்தின தகவல் பதிவு, அதோடு இப்ப புதுசாத் தமிழ்மணம் அறிமுகப்படுத்தியுள்ள மறுமொழி நிலவரம் சேகரிக்கும்/மதிப்பீடு செய்யும் வசதி... இது மாதிரி வசதிகளை நாம் சேர்க்க, சிறு நிரல் துண்டு (code segment) கொடுத்து நம் டெம்ப்ளேட்டில் சேர்க்க சொல்லுறாங்களே, அதை சரியா செய்யணும்னா இந்த அடிப்படை ஞானம் நமக்கு உதவியா இருக்கும்.

எந்த இணையப்பக்கமா இருந்தாலும் இதன் மிக அடிப்படையான வடிவம் கீழே உள்ளது மாதிரித்தான் இருக்கும். ('படம் வரைஞ்சு பாகங்களைக் குறி'ச்சாத்தானே இந்த பொறியாள மண்டைக்கு எதுனா சொல்லமுடியுது) இந்த மீயுரையின் ஒரு சவுகரியம், மத்த கணினி மொழிகளைப் போல ரொம்பக் கறாரான இலக்கணமெல்லாம் இது எதிர்பார்ப்பதில்லை. ரொம்ப சாதுவான, சகிப்புத்தன்மையுள்ள ஒரு இலக்கணம். அதனால் ஒரு பக்கத்தில் இதில் எந்த 'பாகம்' இல்லைனாலும் முடிஞ்ச வரைக்கும் உள்ளதை வெச்சுக்கிட்டு சமாளிச்சுக்கும்.

'பாகம்'னு நான் சொன்னதை இங்லீஷில element-னு சொல்றாங்கன்னு நினைக்கிறேன். (நான் இலக்கண சுத்தமா இதெல்லாம் கத்துக்காததால அடிச்சு சொல்லமுடியாது, யார்னா வாத்தியார் வெச்சுப் படிச்சவங்க வந்து மிரட்டினா அய்யா அம்பேல், சொல்லிட்டேன்). ஒரு பாகத்தின் முக்கியமான வரையறை: அதுக்கு அடைப்புக்குறி(bracket) மாதிரி ஆரம்பம் முடிவு ரெண்டும் இருக்கணும். இங்கே div என்ற ஒரு பாகத்தை எடுத்துகிட்டா, <div> என்பது பாகம் தொடங்கியாச்சுன்னு சொல்ற அடைப்பு,  </div> என்பது பாகம் முடிஞ்சாச்சுன்னு சொல்லுது. பாகத்தின் பெயர்கள் ஏற்கனவே தகுதரப்படுத்தப்பட்டிருக்கு. நாம் நமக்குப் பிடிச்ச பேரெல்லாம் ('பிசினு') வெச்சுக்கமுடியாது!

பாகங்கள் அடுக்குகளாத்தான் அமையும். இப்படி இருந்தாத்தான் அதை 'structured' அப்படின்னு சொல்றோம். கீழே இருக்கிறதைப்பாருங்க:

a = 1
b = 5
c = a + b
d = (a + b) x (a - b)
f = 5c + {3c x (2a - 3b)}

இங்கே பாத்த சமன்பாடுகள் பெரிதாக ஆக, அவற்றின் 'உள்ளடுக்கு', 'வெளியடுக்கு'ன்னு பிரிச்சுக்காட்ட, பலவகையான அடைப்புக்குறிகள் பயன்படுத்துறோமில்லையா. இன்னும் ஒரு அடுக்கு வந்தா, '[ ]' குறியும் பயன்படுத்துவோமே. (இந்த மூணில் எது உள்ளே, எது வெளியே, என்பதற்கு ஏதும் சட்டம் இருக்கான்னு எனக்குத் தெரியாது) இதுபோல:

h = 2a - [2c x {5b + 2 x (7c - 4d)} - 5c]

இதே போலத்தான் மீயுரையின் பாகங்களும் அமையும். இப்போ மேலே உள்ள படத்தை ஒரு கணித சமன்பாட்டோடு உருவகப்படுத்திப் பாத்தா அடுக்குகளின் அமைப்புப் புலப்படும்.

மேலே உள்ள சமன்பாட்டை இப்படி எழுதினா என்ன ஆகும்?
h = 2a - [2c x {5b + 2 x (7c - 4d]} - 5c)

அதாவது ஒரு அடுக்கின் அடைப்புக்குறியை முடிக்காமல் அதற்கு வெளி அடுக்கின் அடைப்புக்குறியை முடித்தால் என்ன ஆகும்? ஒண்ணும் ஆகாது கிறுக்குப்புடிக்கும். கணக்கு வாத்தியாருக்குக் கிறுக்குப்புடிச்சா சுழிச்சுருவார். கணினிக்கு கிறுக்குப் புடிச்சா என்ன பண்ணும்? மத்த கணினி மொழிகளில் (சி++ ஜாவா மாதிரி) இந்த வேலை பண்ணா, அது 'போடா' (அல்லது 'போடீ')ன்னு திருப்பி சாத்தும். நான் முதல்ல சொன்ன மாதிரி மீயுரை கையாளும் உலாவிகள் ரொம்ப சாதுவான பிராணிங்க, தன்னால் முடிஞ்சவரைக்கும் சமாளிக்கும், முடியலைன்னா மட்டும் திட்டும். அப்படி ஆகும்போது சில சமயம் நாம் எதிர்பார்க்கும் பக்க வடிவத்துக்கும் அது காட்டும் வடிவத்துக்கும் வித்தியாசம் இருக்கும்.

ஆனால் சி++, ஜாவா மாதிரியே உலாவிக்குள்ளே வேலை செய்ய ஒரு மொழி இருக்கு. அதுதான் ஜாவாஸ்க்ரிப்ட்... ஆமா... அதேதான்... சரியாப் புடிச்சுட்டீங்க. அந்த மொழிகள் மாதிரியே ஜாவாஸ்க்ரிப்ட்டுக்கும் சகிப்புத்தன்மை குறைச்சல். அதோட நம்ம சவுகரியத்துக்கு விளையாட முடியாது.

இதைப் பத்தி அடுத்த பாகத்தில் இன்னும் தெரிஞ்சிக்கலாம். இப்போதைக்கு டெம்ப்ளேட்டில் மாத்தம் செய்யும்போது கவனமா ஒரு அடுக்குக்குள்ளே இன்னொரு அடுக்கைக் கொண்டுபோய்ப் போடாதீங்க, போடச்சொல்லி சொல்லாதவரை. முக்கியமா <head></head> & <body></body>  இது ரெண்டுக்கும் இந்த விதி கிடையாது. இதுங்களோட வேலையே, மத்த அடுக்குகளை ரெண்டா (head-க்குள்ளயா அல்லது bodyக்குள்ளயான்னு) பிரிச்சு வைக்கிறதுதான். ஏன் ரெண்டாப் பிரிக்கணும், head-ல் எதெல்லாம் இருக்கணும் body-ல் எதெல்லாம்...

அப்புறமா பாக்கலாம்.

பிற்சேர்க்கை: சில வரிகள் குழப்பத்தை தர வாய்ப்பிருப்பதால் எடுக்கப்பட்டுள்ளன. மீள வாசிக்கும்போதுதான் விளங்கியது.

மேற்கண்ட பாகத்தின் மறுமொழி/கருத்து/விமர்சனம்...

நாம் முன்பு பார்த்த தலையும்(head) உடம்பும்(body) (உடம்பு வேறு தலை வேறா? தலை இல்லாத உடம்பு முண்டமாச்சே, இந்த விளயாட்டுக்கெல்லாம் நான் வரலே:D) முழு மீயுரையை இரண்டு பாகங்களாகப் பிரிக்கிறது. இதில் ‘தலை’க்குள் இருப்பது வெளியே காட்டப்படத் தேவையில்லாதது. இந்த உடம்பு பாகத்தில் இருப்பது எப்படிக் காட்டப்படணும் என்கிற சில கட்டளைகள் இந்தத் தலைப்பாகத்தின் உள்ளே இருக்கும். அருமையான சட்டை போட்டிருந்தாலும், தையல் பக்கம் வெளியே வரும்படி மாத்திப் போடாமலோ, பொத்தான் துளையை தவறாப் போடாமலோ இருக்க வைப்பது என்ன? மண்டைக்குள்ளே இருக்கும் ‘அது’தானே. அதே போலத்தான் இதுவும்.

ஒரு சிறு உதாரணம் பாக்கலாம்.

<html>
  <head>
    <style>
    /* Link styles */
      a:link {color:#FF0000;text-decoration:underline;}
      a:visited {color:#FF0000;text-decoration:underline;}
      a:hover {color:#00FF00;text-decoration:underline;}
      a:active {color:#0000FF;}
    </style>
  </head>
  <body>
    வாங்க, வணக்கம்! <a href="http://www.thamizmanam.com">ஊர்வலம்</a> போகலாமா?
  </body>
</html>

இங்கே நாம் முதலில் தெரிந்து கொண்ட சிலவற்றைப் பயன்படுத்தியிருக்கிறோம். கூடுதலாக ஒரு கூறு (element) சேர்த்திருக்கிறோம். அதாவது <style> என்ற கூறு, இது நம் வலைப்பக்கத்தில் இருக்கும் சுட்டிகளை எப்படிக் காட்டவேண்டும் என்று சொல்கிறது. ஒரு சுட்டியை எப்படி உருவாக்குவது என்பது நம்மில் பலருக்கும் தெரியும்தானே. தெரியாதவர்களுக்கு மட்டும்: <a> என்ற கூறு சுட்டிகள் சமபந்தமான சில கட்டளைகளை உருவாக்க உதவும் ஒன்று. அதன் ஒரு உப கூறு <a href> இப்போது மேலே உடம்புப் பாகத்தில் இந்தக் கூறை பயன்படுத்தி ஊர்வலம் என்ற சொல்லை http://www.thamizmanam.com என்ற உரலுக்குப் போகும் சுட்டியாக மாற்றத் தேவையான மீயுரைத் துண்டு இருப்பதைப் பார்க்கலாம். அதாவது:

<a href="http://www.thamizmanam.com">ஊர்வலம்</a>

என்பது.

இம்மாதிரி சுட்டிகளை வரயறுக்கும் மீயுரையை உடம்புப் பாகத்தில் இட்டதுமே உலாவி, தான் வழக்கமாக சுட்டிகளை எப்படிக் காட்டுமோ அப்படிக் காட்டத் தயாராகிவிடும். ஆனால் அப்படிக் காட்டாமல் நம் விருப்பம் போல காட்டவேண்டுமென்றால் அதற்குத் தேவையான மீயுரைத்துண்டை நாம் தலைப்பாகத்தில் இடுவோம். இது ஒரு பாணி/அலங்காரம் பற்றிய வரையறை என்பதால் இதற்கென உள்ள கூறான <style> பயன்படுத்துகிறோம். இதை கீழ்க்கண்ட மீயுரைத் துண்டால் வரையறுக்கிறோம்.

<style>
/* Link styles */
a:link {color:#FF0000;text-decoration:underline;}
a:visited {color:#FF0000;text-decoration:underline;}
a:hover {color:#00FF00;text-decoration:underline;}
a:active {color:#0000FF;}
</style>

ஒவ்வொரு கூறும் ஆரம்பமும் முடிவும் சரியாக அறிவிக்கப்பட்டிருப்பதையும் பார்க்கலாம். அதாவது <a href..> கூறு </a>உடனும் <style> கூறு </style> உடனும் முடிகிறது.

இப்படி தலைப்பாகத்தில் ஒருமுறை <a> எப்படிக் காட்டப்படவேண்டும் என்று சொல்லிவிட்டால், உலாவி உடம்பில் எங்கெல்லாம் <a> வருதோ, அங்கெல்லாம் அந்தக் கட்டளையைச் சிரமேற்கொண்டு செய்து முடிக்கிறது. நாம் முன்பு பார்த்ததுபோல இந்த மீயுரையின் இலக்கண மீறல்களை உலாவிகள் மிகுந்த சகிப்புத்தன்மையுடன் எடுத்துக்கொள்ளும், எனவே பல உலாவிகளில் இந்த <style> கூறை உடம்புப் பகுதியில் இட்டாலுமே வேலை செய்யலாம். ஆனால், முறையாக அமைக்கப்பட்ட வலைப்பக்கம் இம்மாதிரியான வரையறைகளை தலைப் பாகத்திலேயே கொண்டிருக்கும்.

இப்போது மேலே முதல் கட்டத்தில் கொடுத்துள்ள மீயுரைத்துண்டு மொத்தத்தையும் ஒத்தி எடுத்து நோட்பேட் போன்ற ஒரு எளிய உரைத் தொகுப்பானில் ஒட்டி, எதாவது பெயரில் (காதலி/காதலன் பெயராக இருந்தால் நன்றாக வேலை செய்யுமாம், சொன்னார்கள்:P) உ.ம். abc.htm என்பதுபோல ஒரு htm கோப்பாக சேமித்துப் பின் உலாவி கொண்டு திறந்து பார்த்தால், வழக்கமான சுட்டிகளுக்கும் இந்த ‘ஊர்வலம்’ சுட்டிக்கும் வேறுபாடுகளைக் காணலாம். நம் விருப்பம்போல வண்ணங்களீன் எண்களை மாற்றி விளையாடிப் பார்க்கலாம். வலைப்பக்கங்களில் காணப்படும் வண்ணங்களின் குறியீட்டு எண்களை அறிய இங்கே செல்லலாம்.

மேற்கண்ட பாகத்தின் மறுமொழி/கருத்து/விமர்சனம்...

நேரம் கிடைக்கும்போது மேலும் வளரும்….