எழுதப் பழகுவோம் எச் ரி எம் எல் பகுதி 1 குறிப்பு 1 இந்த ஆக்கம் முழுக்க முழுக்க வெகு சாதாரண உபயோகிப்பாளர்களை மனதில் வைத்து எழுதப் பட்டது. தொழில் ரீதியாக உள்ளவர்களுக்காக அல்ல. தொழில் ரீதியில் பயிற்றுவிக்கும் முறையும் பயிலும் முறையும் வேறானவை. சாதாரண உபயோகிப்பாளருக்கு ஓர் ஆர்வத்தைக் கொடுப்பதே என் எண்ணம். குறிப்பு 2 HTML படிவங்கள் எழுதுவதற்கு இன்று ஏராளமான மென்பொருள்கள் கிடைக்கின்றன. Composer, Frontpage முதலானவையிலிருந்து, சிறு, சிறு மென்பொருட்கள்வரை நூற்றுக் கணக்கானவை உள்ளன. நீங்கள் உண்டாக்கும் இணையப் பக்கங்கள் எப்படி உண்டாகின்றன என்று அறிய அவசியமே இல்லாமல் இவைகளில் உருவாக்கப் படுகின்றன. எல்லாவற்றையும் செவ்வனே இவை செய்து தரும்போது ஏன் ‘கற்றுக் கொள்ள’வேண்டும் என்ற எண்ணம் எழலாம். முதலாவதாக, HTML இல் படிவங்கள் எழுதுவது என்பது பலர் எண்ணிக் கொண்டிருப்பதுபோல் ஒரு “நிரல்” எழுதுவதுபோன்ற அவ்வளவு கடினமான ஒன்றல்ல என்று உணர்த்தவும (கடினமான பகுதிகளும் இருக்கின்றன) இரண்டாவதாக, நம் தோட்டத்து கத்தரிக்காய் காரிக் கிடந்தாலும் நமக்கு சுவைப்பதில்லையா? நம் கையாலே எழுதிப் பார்க்கும்போது அதன் இன்பம் தனிதான் என்பதற்காகவும்தான்! இன்று HTML(Hyper Text Markup Language) எனப்படும் குறியீட்டு மொழியைப் பற்றி கேள்வியுராதவரே இல்லை எனலாம். இணையப் புழக்கத்திற்கென்று இல்லாமல், தங்களுடைய ஆக்கங்களை சேமித்து வைத்துக் கொள்ளவும், பிறருடன் பகிர்ந்து கொள்ளவும் இது மிகவும் பயன்படுத்தப் படுகிறது. குறிப்பாக help files எனப்படும் உதவி கோப்புக்கள் இம்முறையில்தான் இப்போது வருகின்றன. ஆக்கங்களை பகிர்ந்துகொள்ள “எம்.எஸ் வேர்டு” போன்றவற்றைப் பயன்படுத்துகிறோம். என் நண்பரிடம் “wordperfect” தான் உண்டென்றால் அவரால் படிக்க முடியாது (மாற்றித் தரும் வசதிகள் இருந்தாலும் சில சமயங்களில் முழுமையாக நடப்பதில்லை). இம்முறையில் எழுதப்படும் ஆக்கங்களைப் படிக்க ஓர் உலவி (Browser) இருந்தால் போதும்; வேறு மென்பொருள் தேவை இல்லை. HTML இன் இன்றியமையாத தன்மைகளில் ஒன்று, படித்துக் கொண்டிருக்கும் ஆக்கத்திலிருந்து வேறு ஆக்கத்திற்கோ அல்லது இணையத்தின் வேறு ஒரு பக்கத்திற்கோ அல்லது அதே ஆக்கத்தின் குறிப்பிட்ட பகுதிக்கோ செல்ல முடிவதாகும். இங்கு நாம் காணப்போவது வெகு அடிப்படையான விடயங்கள் பற்றி மட்டுமே. இந்த குறியீட்டு மொழி, வேறு, வேறு உருவங்கள் பெற்று DHTML, XHTML என்றாகி, பலவழிகளில் புழக்கத்திலிருக்கின்றன. XML எனப்படும் extensible markup language இப்போது வணிகவியலில் தகவல்களை பரிமாறிக் கொள்வதில் வேகமாக வளர்ந்து வருகிறது. முதலில் எந்த ஒரு படிவமும் (உதாரணமாக இந்த ஆக்கம்) எப்படி அமைந்திருக்கிறதென்று பார்போம்: “எழுதப் பழகுவோம் எச் ரி எம் எல்.” என்ற ஒரு தலைப்பு இருக்கிறது. அதன் கீழே அடிக்கோடு இருக்கிறது. அதைத் தொடர்ந்து அனேக “பந்தி”(para)க்கள் இருக்கின்றன. இவைகளை நாம் “எம். எஸ் வேர்டிலோ” அல்லது ஏதேனும் ஒரு “டெக்ஸ்ட் எடிட்டரிலோ” எழுதும்போது ஓவ்வொரு வரி முடிவிலும், ஒவ்வொரு “பந்தி”க்களுக்கு இடையிலும் கண்ணுக்குத் தெரியாத குறியீடுகள், அவை வரி முடிவு என்றும், “பந்தி” தொடக்கம் என்றும் குறிக்க அமைந்திருக்கும். இம்மாதிரித்தான் HTML படிவம் முழுவதிலும் குறியீடுகளைக் கொண்டு வரி முடிவென்றும் அடுத்த “பந்தி” என்றும் குறிக்க வேண்டும். எதாவது ஒரு “text editor” இல் சிலவற்றை எழுதி, html “எக்ஸ்டென்ஸன்” உடன் சேமித்துவிட்டால் அதை உலவி புரிந்து கொண்டு HTML படிவமாக காட்டும். ஒரு சோதனை செய்து பார்ப்போமா? இந்த ஆக்கம் முழுவதையும் பிரதி செய்து note pad இல் ஒட்டி (எம் எஸ் வேர்டிலும் செய்யலாம் – கோப்பு வகையை plain text என்று எடுத்துக் கொள்ளுங்கள்) first_try.html என்று பெயர் கொடுத்து சேமியுங்கள். சேமிக்கும்போது save as type என்பதை All Files(*.*) தேர்ந்தெடுத்துக் கொள்ளுங்கள். இப்போது சேமித்த கோப்பின் மீது இரட்டையாக சொடுக்கி (doble click) ப்பாருங்கள். உங்கள் உலவியில் இந்த ஆக்கத்தைக் காணலாம். அனால்… குழப்பமாக இருக்கிறதே….. எல்லாம் ஒரே நூலில் கோர்த்தது மாதிரி….. ஏன் இப்படி? இது ஏன் என்று அறியும் முன் இன்னொரு சோதனை செய்து பார்ப்போம். ஏற்கெனவே சேமித்து வைத்திருக்கும் first_try.html கோப்பை மீண்டும் text editor (உரை தொகுப்பி?) இல் திறவுங்கள். கோப்பை திறக்க இரண்டு வழிகளைப் பயன் படுத்தலாம். (இரட்டைச் சொடுக்கு செய்ய வேண்டாம். உலவிதான் மீண்டும் திறக்கும்): ஒன்று, text editor ஐ இயக்கி, அதன் மூலம் திறப்பது (File > Open). இரண்டு, உலவியில் படிவத்தைக் காணும்போது வலச் சொடுக்கல் செய்து “source code” என்பதைத் தட்டுவது. கீழ்க் கண்டவாறு என்பதையும் என்பதையும் குறிப்பிட்ட இடங்களில் சேருங்கள்: எழுதப் பழகுவோம் எச் ரி எம் எல். =============================== இன்று HTML(Hyper Text Markup Language) எனப்படும் குறியீட்டு மொழியைப் பற்றி கேள்வியுராதவரே இல்லை எனலாம். இணையப் புழக்கத்திற்கென்று இல்லாமல், தங்களுடைய ஆக்கங்களை சேமித்து வைத்துக் கொள்ளவும், பிறருடன் பகிர்ந்து கொள்ளவும் இது மிகவும் பயன்படுத்தப் படுகிறது. குறிப்பாக help files எனப்படும் உதவி கோப்புக்கள் இம்முறையில்தான் இப்போது வருகின்றன. இப்போது மீண்டும் கோப்பை சேமித்து உலவியில் காணுங்கள். முன்னைய சோதனைக்கும் இதற்கும் வித்தியாசம் தெரிகிறதா? தலைப்பிலிருந்து ஒரே வரிசையாக கோர்க்கப் பட்டிருந்த வரிகள் இப்போது தலைப்புத் தனியாகவும், அடிக்கோடு தனியாகவும் அதைத் தொடர்ந்த முதல் பந்தி ஒரு வரி இடைவெளியில் அடிக்கோட்டிற்கு கீழும் காணுவீர்கள். அதாவது *கிட்டத்தட்ட* அசலில் இருப்பது போலவே காணுவீர்கள். என்ன நிகழ்ந்தது இங்கே? நாம் முன்பே பார்த்தபடி, படிவத்தின் ஓவ்வொரு பகுதியும் எவ்வாறு அமைய வேண்டும் என்று குறிக்க வேண்டும் என்று கண்டோம் அல்லவா? அதைத்தான் நாம் செய்திருக்கிறோம். பட்டிகள் (Tags): எதாவது ஒரு இணையப்பக்கத்தின் ஆதாரத்தை (souce) பார்த்தீர்களானால் இரு கோண அடைப்புக் குறிக்குள் (< >) சில சொற்கள் அமையப் பெற்றிருக்கும். இந்த கோண அடைப்புக் குறிக்குள் இருக்கும் அவைகளை குறியீடுகள் (tags) என்கிறோம். அவைதான், குறியீட்டிற்கு அடுத்து இருக்கும் பகுதியை எவ்வாறு உலவியில் காட்ட வேண்டும் என்று அறிவப்பதாகும். நாம் இன்று கண்ட உதாரணத்தைப் பார்ப்போம். தலைப்பை அடுத்து, என்ற குறியீட்டை இட்டோம். அதன் பொருள், “இந்த வரியை இத்துடன் முறித்து விடு” என்பதாகும் அதாவது break என்பதின் சுருக்கமாகும். அதேபோல் என்பது para (பந்தி) என்பதின் சுருக்கமாகும். இவ்வாறாக ஒவ்வொன்றிற்கும் குறியீடுகள் இருக்கின்றன. எளிதாகத் தோன்றவில்லை? இவ்வளவுதானா? இன்னும் நிறைய இருக்கின்றன. குறிப்பு: நான் உதாரணங்களுக்காக தமிழை உபயோகிக்கிறேன். சிலர் வெட்டி ஒட்டும்போது தமிழெழுத்தை காணமுடிவதில்லை என்று தெரிவித்ருக்கின்றனர். உங்களுக்கு அதில் சிரமம் உண்டென்றால் அதுபோல் உள்ள ஓர் ஆங்கிலப் பகுதியை கையாளலாம். இதுவரை நாம் பார்த்ததெல்லாம் சோதனைக்காகத்தான். ஒரு முறையான மீயுரைகுறிமொழி (HTML) படிவம் என்பது இன்னும் சற்று தெளிவான படிவ அமைப்புக்களுடன் இருக்கும். மிகச் சிறிய, முறையான அமைப்புக் கொண்ட ஒரு படிவம் இப்படித்தான் இருக்கும்: என் முதல் படிவம் இதில் என்பது, இந்தப் படிவம் ஒரு மீயுரைகுறிமொழி (HTML) என்பதை உணர்த்துகிறது. இறுதியாக இருக்கும் என்பது மீ உ கு மொ -யின் முடிவு என்பதைக் காட்டுகிறது. அதே போல் என்பது உலவியில் படிவம் காட்ட வேண்டிய பகுதிகளைக் கொண்டது. என்பது “உடல்” பகுதியின் முடிவைக் காட்டுகிறது. இந்த குறியீட்டுப் பட்டிகளைப் பற்றி கொஞ்சம் தெரிந்து கொள்ள வேண்டும். இந்தப் பட்டிகள், ஒரு சிலவற்றைத் தவிர பெரும்பாலும் சோடியாகவே அமைந்திருக்கும். ஒரு செயலின் தொடக்கத்தைக் குறித்தால், அதன் முடிவையும் குறிக்க முடிப்புபட்டி (end tag) இட வேண்டும். அதைத்தான் மேலே காண்கிறோம். இந்த பட்டிகள்தான் அந்த மொழியின் ஆதாரங்கள். இவைகளின் விசேடம் என்னவென்றால், எளிதில் புரிந்து கொள்ளும்படியான (ஆங்கில) குறியீடாக இருப்பதுதான். இவற்றை தரப்படுத்துவது யார்? “மைக்ரொசாப்டா” அல்லது “நெட்ஸ்கேப்” ஆ? இரண்டும் இல்லை. World Wide Web Consortium (W3C) எனப்படும் தரப்படுத்தும் ஓர் அமைப்புத்தான் இதைச் செய்கிறது. இந்த மீயுரைகுறிமொழி (HTML) ஆனது வெகு சாது. நீங்கள் என்ன தவறு செய்தாலும் கண்டுகொள்ளாத அப்பிராணி. தனக்கு உடன்பாடென்றால் செயல்படுத்தும் இல்லையென்றால் கண்டுகொள்ளாமல் விட்டுவிடும். அது சொற்பிழையை சரி காண்பதில்லை. மேலும் அது “a” க்கும் “A”(not case sensitive) வித்தியாசம் பாராட்டாது. என்றாலும் பட்டிகளில் (மேல் எழுத்துக்களோ அல்லது கீழ் எழுத்துக்களோ) சீராகப் பாவிப்பது நல்லது. இன்னும் சற்று மேலே போய் பார்ப்போம்: (தமிழ் அச்சில் சிரமம் காண்பவர்கள் ஆங்கில வாக்கியங்களை உபயோகிக்கலாம்). முன்பு கண்டது போல் ஒரு உரை தொகுப்பி(note pad, ms word, word pad)யில் கீழ்க்கண்டவாறு எழுதி, test1.html என்ற பெயரில் சேமித்துக் கொள்ளுங்கள். முதல் தலைப்பு என் முதல் படிவம். புதிதாக நீங்கள் இம்மாதிரி எழுதி சோதித்துப் பார்க்கலாம். மேலே கண்டதை உலவியில் சோதித்துப் பார்த்தீர்களா? “முதல் தலைப்பு” என்பது உங்கள் ஆக்கத்தின் தலைப்பாகவும், “உடல்” பகுதில் உள்ளவை உங்கள் ஆக்கத்தின் உள்ளீடாகவும் காணுவீர்கள். இங்கு H என்பது தலைப்பைக்(Heading) குறிக்கிறது. இதனுடன் “1′ சேர்ந்தது ஏன்? 1 முதல் 6 வரை முன்பே வரையறுக்கப் பட்ட அளவில (பெருக்கத்தில் 1 – ஆகப் பெரிது, 6- ஆகச் சிறிது) எழுத்துரு அமைந்திருக்கும். 1 முதல் 6 வரையான எண்களை(இரு பட்டிகளிலும்) மாற்றி, கோப்பை சேமித்து உலவியில் பாருங்கள்; வித்தியாசத்தை உணர்வீர்கள். சென்ற உதாரணங்களில் மூலம் மீயுரைகுறிமொழி (HTML) பற்றி மெள்ள தெரிய வந்திருக்கும் என்று எண்ணுகிறேன். மேலும் சில உதாரணங்களைப் பார்ப்போம்: நாம் முன்பு குறிப்பிட்டபடி test1.html மீண்டும் ஒரு உரை தொகுப்பி (note pad, ms word, word pad)யில் திறவுங்கள். கீழ்க் கண்டதுபோல் புதிய பட்டிகளை(‘ மற்றும்) சேருங்கள்: முதல் தலைப்பு என் முதல் படிவம். மேலே சேர்க்கப்பட்ட பட்டிகள் என்ன விளைவைத் தரும் என்று எண்ணுகிறீர்கள்? ஆமாம்; நீங்கள் ஊகித்தது சரிதான். இதுதான் ‘மீயுரைகுறிமொழி (HTML) யின் எளிமை. இங்கு ஒன்றை கவனித்திருக்கலாம். முன்பு இட்ட பட்டிகளைத் தனித்தனியாக இட்டோ ம். புதிய பட்டியான “” ஐ தலைப்போடு சேர்த்து இணைத்திருக்கிறோம். இதனால் என்ன விளைவு? ஒன்றுமில்லை; இரண்டும் ஒன்றுதான்! நாம்தான் கண்டோ மே, இம்மாதிரி விடயங்களை ‘மீயுரைகுறிமொழி (HTML) கண்டுகொள்ளாது என்று. நமக்கு படிப்பதற்கு எளிதாக இருக்கும் வகையில் எப்படியும் அமைத்துக் கொள்ளலாம். மேலும் சில பட்டிகள் தருகிறேன் தகுந்த இடத்தில் இணைத்து விளைவை இனி வரும் பகுதியுடன் ஒப்பிட்டுக் கொள்ளுங்கள்: – தடிமன் (Bold) – சாய்வு (Italic) – அடிக் கோடு (Under line) இதுவரை கண்ட பட்டிகளைக்கொண்டு எளிதான ஒரு படிவம் தயாரிக்கலாம். பயிற்சி செய்து பாருங்கள். மேற்கொண்டு சில பட்டிகளைப் பார்க்கும் முன் மேலும் சில விபரங்களைக் காண்போம். இந்த மீயுரைகுறிமொழி ஆனது நிரல் ஒழுக்கத்தைப் பார்ப்பதில்லை என்று முன்பே கண்டோ ம். உதாரணமாக கீழுள்ளதைக் காணுங்கள்: முதல் தலைப்பு என் முதல் படிவம். மேற்கண்டதை வெட்டி ஒட்டி, உலவியில் சோதித்துப் பாருங்கள். பின்னர் கீழ்க் கண்டதையும் சோதித்துப் பாருங்கள். முதல் தலைப்பு என் முதல் படிவம். மேற்கண்ட இரண்டு பட்டியல்களுக்கும (list) என்ன வேறுபாடு காண்கிறீர்கள்? என்ற முடிப்புப் பட்டி இடம் மாறியிருக்கக் காண்கிறீர்கள் அல்லவா? ஆனால் உலவியில் காணும்போது எந்த வித்தியாசத்தையும் காட்டாது. என்றாலும் இந்த மொழியின் வளர்ச்சி பல்வேறு கிளைகளாக முன்னேறி வருவதால் ஒரு ஒழுங்கைக் கடைப்பிடிப்பது அவசியமாகிறது. குறிப்பாக நீள்தகு குறி மொழி(XML) இப்பொது ஆட்கொள்ள ஆரம்பித்துவிட்டதால் அதன் ஒழுங்கை பின்பற்ற வேண்டியது அவசியமாகிறது. நாம் பழகும்போதே இந்த ஒழுங்கைப் பின் பற்றினால் வரும் காலங்களில் பயனளிக்கும். இந்தக் கட்டுரையின் நோக்கம் நீள்தகு குறி மொழி(XML) பற்றியது அல்ல என்றாலும், ஒழுங்கைப் பின்பற்ற வேண்டிய அவசியத்தை அறிந்துகொள்ளவேண்டும். பள்ளியில் கணிதப் பாடத்தில் “அல்ஜீப்ரா” கற்றிருப்பீர்கள் அல்லவா? அதே ஒழுங்கைத்தான் இங்கு நாம் பின்பற்ற வேண்டும். அதாவது உள்ளிருக்கும் அடைப்புக் குறிக்குள்ளிருந்து வெளியே வரவேண்டும் என்று நாம் அறிவோம். தொடக்கப் பட்டி, முடிப்புப் பட்டி சோடிகளும் அவ்வாறே அமைந்திருக்க வேண்டும். அதன்படி பார்த்தால் முதல் பட்டியலில் என்ற முடிப்புப் பட்டி இருக்குமிடம் தவறானதாகும். இரண்டாவது பட்டியலில் சரியான இடத்தில் இருக்கிறது. இனி மேலும் ஒரு முக்கியமான பட்டியைப் பார்ப்போம்: படிவங்களில் மிகத் தேவையான ஒன்று எழுத்துருவை மாற்றுவது. இதன் பட்டிகள் ஆகும். இவைகளை வெறுமனே பயன்படுத்துவதில் நாம் ஏதும் பெறப் போவதில்லை. எழுத்துரு எப்படி வேண்டும் என்றும் சொல்ல வேண்டும். உதாரணமாக, இந்த வரி சிவப்பு வண்ணத்தால் ஆனது இந்தப் பட்டி, மேற்கண்ட வரியை சிவப்பு வண்ணத்தில் தரும். அதாவது அந்த பட்டிகளுக்கிடையில் இருக்கும் எழுத்துக்களை சிவப்பில் தர வேண்டும் என்று கட்டளை இடுகிறோம். இதேபோல் எழுத்துருவின் தடிமனையும் எழுத்துருவின் முகங்களையும (font face – Arial, Times, InaimathiTSC, AParanarTSC etc.) மாற்றலாம். Something Something இவை மூன்ரையும் ஒரே வரியில் இப்படியும் கொடுக்கலாம்: Something நம் படிவத்தை மெருகூட்ட மேற்கொண்டு சில பட்டிகளைப் பார்ப்போம். சில நேரங்களில் சில விடயங்களைப் பட்டியலிட நேரிடலாம். உதாரணமாக, கீழ்க் கண்ட புத்தகங்களை பட்டியலிட விரும்புகின்றீர்கள் என்று வைத்துக் கொள்வோம்: ஒற்றுமை கணினி கற்றுக் கொள்ளுங்கள் நோயற்ற வாழ்வு புகை, மனிதனுக்குப் பகை அது முறைப் படுத்திய பட்டியலாகவோ அதாவது 1,2,3… என வரிசைப் படுத்தியோ அல்லது முறைப் படுத்தா பட்டியலாகவோ(எந்த வரிசை முறையும் இல்லாமலோ) இருக்கலாம். இதை நம் படிவத்தில் சேர்ப்பதைப் பற்றிப் பார்ப்போம். – O(rdered) L(ist) – முறை படுத்திய பட்டியல் – U(nordered) L(ist) – முறைப் படுத்தா பட்டியல் இத்தோடு, பட்டியலின் உறுப்பைக் குறிக்க – L(ist) I(tem) என்ற பட்டியையும் சேர்க்க வேண்டும். ஒரு முறை படுத்திய பட்டியலைப் பார்ப்போம். முதல் தலைப்பு நான் வாங்கி வந்த புத்தகங்கள்: ஒற்றுமை கணினி கற்றுக் கொள்ளுங்கள் நோயற்ற வாழ்வு புகை, மனிதனுக்குப் பகை மேலுள்ளதை உங்கள் உலவியில் கண்டீர்களானால், புத்தகங்கள் 1 முதல் 4 வரை வரிசைப் படுத்தப் பட்டிருக்கும். வேறு விதமான வரிசைகளையும் பெற முடியுமா? முடியும். a,b,c,d… A,B,C,D… i,ii,iii,iv… I,II,II,IV… மேற்கண்ட வரிசை முறைப்படியும் கையாள முடியும். என்ற தொடக்கப் பட்டியினுள் என்ன மாதிரி வரிசை வேண்டும் என்று குறிப்பிட வேண்டும். உதாரணமாக, a,b,c,d என்ற வரிசையில் வேண்டுமானால் அது இப்படி இருக்கவேண்டும்: முறைப் படுத்தா பட்டியலில் வட்டமான, சதுரமான புள்ளிகளைப் பெறலாம். – வட்டு – சதுரம் – வட்டம் முறைப் படுத்தப் பட்ட மற்றும் முறைப் படுத்தப் படாத பட்டியலை உங்கள் படிவத்தில் புகுத்தி பயிற்சி செய்து பாருங்கள்.
Posted on: Fri, 16 Aug 2013 17:28:29 +0000
Trending Topics
Recently Viewed Topics
© 2015