ஹெ.டி.எம்.எல் (HTML) கற்கலாம் வாங்க - பாகம் 1-7

[அரசன்]

இந்த படைப்பை ஒரு இணையத்தளத்தில் எதேச்சையாக பார்த்தேன். உடனே மன்றத்தின் ஞாபகம் வரவே இங்கு இடுகிறேன். பலருக்கு பயன்படும் என்று நினைக்கிறேன்.

நன்றி :hindugemeinde.de
__________________________________

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


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

பகுதி 1
பகுதி 2
பகுதி 3
பகுதி 4
பகுதி 5
பகுதி 6
பகுதி 7
எழுதப் பழகுவோம் எச் ரி எம் எல் பகுதி 1
===================================
இன்று 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" என்பதைத் தட்டுவது.

கீழ்க் கண்டவாறு <BR> என்பதையும் <P> என்பதையும் குறிப்பிட்ட இடங்களில் சேருங்கள்:


எழுதப் பழகுவோம் எச் ரி எம் எல்.<BR>
===============================<BR>
<P>
இன்று HTML(Hyper Text Markup Language) எனப்படும் குறியீட்டு மொழியைப் பற்றி கேள்வியுராதவரே இல்லை எனலாம். இணையப் புழக்கத்திற்கென்று இல்லாமல், தங்களுடைய ஆக்கங்களை சேமித்து வைத்துக் கொள்ளவும், பிறருடன் பகிர்ந்து கொள்ளவும் இது மிகவும் பயன்படுத்தப் படுகிறது. குறிப்பாக help files எனப்படும் உதவி கோப்புக்கள் இம்முறையில்தான் இப்போது வருகின்றன.

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

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

பட்டிகள் (Tags):

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

நாம் இன்று கண்ட உதாரணத்தைப் பார்ப்போம்.

தலைப்பை அடுத்து, <BR> என்ற குறியீட்டை இட்டோம். அதன் பொருள், "இந்த வரியை இத்துடன் முறித்து விடு" என்பதாகும் அதாவது break என்பதின் சுருக்கமாகும். அதேபோல் <P> என்பது para (பந்தி) என்பதின் சுருக்கமாகும்.
இவ்வாறாக ஒவ்வொன்றிற்கும் குறியீடுகள் இருக்கின்றன. எளிதாகத் தோன்றவில்லை?

இவ்வளவுதானா? இன்னும் நிறைய இருக்கின்றன.

குறிப்பு:

நான் உதாரணங்களுக்காக தமிழை உபயோகிக்கிறேன். சிலர் வெட்டி ஒட்டும்போது தமிழெழுத்தை காணமுடிவதில்லை என்று தெரிவித்ருக்கின்றனர். உங்களுக்கு அதில் சிரமம் உண்டென்றால் அதுபோல் உள்ள ஓர் ஆங்கிலப் பகுதியை கையாளலாம்.

இதுவரை நாம் பார்த்ததெல்லாம் சோதனைக்காகத்தான். ஒரு முறையான மீயுரைகுறிமொழி (HTML) படிவம் என்பது இன்னும் சற்று தெளிவான படிவ அமைப்புக்களுடன் இருக்கும்.

மிகச் சிறிய, முறையான அமைப்புக் கொண்ட ஒரு படிவம் இப்படித்தான் இருக்கும்:

<HTML>
<BODY>
என் முதல் படிவம்
</BODY>
</HTML>

இதில் <HTML> என்பது, இந்தப் படிவம் ஒரு மீயுரைகுறிமொழி (HTML) என்பதை உணர்த்துகிறது. இறுதியாக இருக்கும் </HTML> என்பது மீ உ கு மொ -யின் முடிவு என்பதைக் காட்டுகிறது. அதே போல் <BODY> என்பது உலவியில் படிவம் காட்ட வேண்டிய பகுதிகளைக் கொண்டது. </BODY> என்பது "உடல்" பகுதியின் முடிவைக் காட்டுகிறது.

இந்த குறியீட்டுப் பட்டிகளைப் பற்றி கொஞ்சம் தெரிந்து கொள்ள வேண்டும். இந்தப் பட்டிகள், ஒரு சிலவற்றைத் தவிர பெரும்பாலும் சோடியாகவே அமைந்திருக்கும். ஒரு செயலின் தொடக்கத்தைக் குறித்தால், அதன் முடிவையும் குறிக்க முடிப்புபட்டி (end tag) இட வேண்டும். அதைத்தான் மேலே காண்கிறோம். இந்த பட்டிகள்தான் அந்த மொழியின் ஆதாரங்கள். இவைகளின் விசேடம் என்னவென்றால், எளிதில் புரிந்து கொள்ளும்படியான (ஆங்கில) குறியீடாக இருப்பதுதான். இவற்றை தரப்படுத்துவது யார்? "மைக்ரொசாப்டா" அல்லது "நெட்ஸ்கேப்" ஆ? இரண்டும் இல்லை. World Wide Web Consortium (W3C) எனப்படும் தரப்படுத்தும் ஓர் அமைப்புத்தான் இதைச் செய்கிறது.

இந்த மீயுரைகுறிமொழி (HTML) ஆனது வெகு சாது. நீங்கள் என்ன தவறு செய்தாலும் கண்டுகொள்ளாத அப்பிராணி. தனக்கு உடன்பாடென்றால் செயல்படுத்தும் இல்லையென்றால் கண்டுகொள்ளாமல் விட்டுவிடும். அது சொற்பிழையை சரி காண்பதில்லை. மேலும் அது "a" க்கும் "A"(not case sensitive) வித்தியாசம் பாராட்டாது. என்றாலும் பட்டிகளில் (மேல் எழுத்துக்களோ அல்லது கீழ் எழுத்துக்களோ) சீராகப் பாவிப்பது நல்லது.

இன்னும் சற்று மேலே போய் பார்ப்போம்: (தமிழ் அச்சில் சிரமம் காண்பவர்கள் ஆங்கில வாக்கியங்களை உபயோகிக்கலாம்). முன்பு கண்டது போல் ஒரு உரை தொகுப்பி(note pad, ms word, word pad)யில் கீழ்க்கண்டவாறு எழுதி, test1.html என்ற பெயரில் சேமித்துக் கொள்ளுங்கள்.

<HTML>
<BODY>
<H1>
முதல் தலைப்பு
</H1>
என் முதல் படிவம்.
</BODY>
</HTML>

புதிதாக நீங்கள் இம்மாதிரி எழுதி சோதித்துப் பார்க்கலாம்.

மேலே கண்டதை உலவியில் சோதித்துப் பார்த்தீர்களா? "முதல் தலைப்பு" என்பது உங்கள் ஆக்கத்தின் தலைப்பாகவும், "உடல்" பகுதில் உள்ளவை உங்கள் ஆக்கத்தின் உள்ளீடாகவும் காணுவீர்கள்.

இங்கு H என்பது தலைப்பைக்(Heading) குறிக்கிறது. இதனுடன் "1' சேர்ந்தது ஏன்?

1 முதல் 6 வரை முன்பே வரையறுக்கப் பட்ட அளவில ஢(பெருக்கத்தில் 1 - ஆகப் பெரிது, 6- ஆகச் சிறிது) எழுத்துரு அமைந்திருக்கும். 1 முதல் 6 வரையான எண்களை(இரு பட்டிகளிலும்) மாற்றி, கோப்பை சேமித்து உலவியில் பாருங்கள்; வித்தியாசத்தை உணர்வீர்கள்.

சென்ற உதாரணங்களில் மூலம் மீயுரைகுறிமொழி (HTML) பற்றி மெள்ள தெரிய வந்திருக்கும் என்று எண்ணுகிறேன். மேலும் சில உதாரணங்களைப் பார்ப்போம்:

நாம் முன்பு குறிப்பிட்டபடி test1.html மீண்டும் ஒரு உரை தொகுப்பி (note pad, ms word, word pad)யில் திறவுங்கள். கீழ்க் கண்டதுபோல் புதிய பட்டிகளை('<CENTER> மற்றும்</CENTER>)
஢ சேருங்கள்:

<HTML>
<BODY>
<H1>
<CENTER>முதல் தலைப்பு</CENTER>
</H1>
என் முதல் படிவம்.
</BODY>
</HTML>

மேலே சேர்க்கப்பட்ட பட்டிகள் என்ன விளைவைத் தரும் என்று எண்ணுகிறீர்கள்? ஆமாம்; நீங்கள் ஊகித்தது சரிதான். இதுதான் 'மீயுரைகுறிமொழி (HTML) யின் எளிமை.

இங்கு ஒன்றை கவனித்திருக்கலாம். முன்பு இட்ட பட்டிகளைத் தனித்தனியாக இட்டோ ம். புதிய பட்டியான "<CENTER>" ஐ தலைப்போடு சேர்த்து இணைத்திருக்கிறோம். இதனால் என்ன விளைவு? ஒன்றுமில்லை; இரண்டும் ஒன்றுதான்! நாம்தான் கண்டோ மே, இம்மாதிரி விடயங்களை 'மீயுரைகுறிமொழி (HTML) கண்டுகொள்ளாது என்று. நமக்கு படிப்பதற்கு எளிதாக இருக்கும் வகையில் எப்படியும் அமைத்துக் கொள்ளலாம்.

மேலும் சில பட்டிகள் தருகிறேன் தகுந்த இடத்தில் இணைத்து விளைவை இனி வரும் பகுதியுடன் ஒப்பிட்டுக் கொள்ளுங்கள்:

<B> </B> - தடிமன் (Bold)
<I> </I> - சாய்வு (Italic)
<U> </U> - அடிக் கோடு (Under line)

இதுவரை கண்ட பட்டிகளைக்கொண்டு எளிதான ஒரு படிவம் தயாரிக்கலாம். பயிற்சி செய்து பாருங்கள்.

மேற்கொண்டு சில பட்டிகளைப் பார்க்கும் முன் மேலும் சில விபரங்களைக் காண்போம்.

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

<HTML>
<BODY>
<H1>
<CENTER><U>முதல் தலைப்பு</CENTER>
</H1></U>
என் முதல் படிவம்.
</BODY>
</HTML>

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

<HTML>
<BODY>
<H1>
<CENTER><U>முதல் தலைப்பு</U></CENTER>
</H1>
என் முதல் படிவம்.
</BODY>
</HTML>

மேற்கண்ட இரண்டு பட்டியல்களுக்கும ஢(list) என்ன வேறுபாடு காண்கிறீர்கள்? </U> என்ற முடிப்புப் பட்டி இடம் மாறியிருக்கக் காண்கிறீர்கள் அல்லவா? ஆனால் உலவியில் காணும்போது எந்த வித்தியாசத்தையும் காட்டாது.

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

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

இனி மேலும் ஒரு முக்கியமான பட்டியைப் பார்ப்போம்:

படிவங்களில் மிகத் தேவையான ஒன்று எழுத்துருவை மாற்றுவது.
இதன் பட்டிகள் <FONT> </FONT> ஆகும். இவைகளை வெறுமனே பயன்படுத்துவதில் நாம் ஏதும் பெறப் போவதில்லை. எழுத்துரு எப்படி வேண்டும் என்றும் சொல்ல வேண்டும்.

உதாரணமாக,
<FONT color="red">இந்த வரி சிவப்பு வண்ணத்தால் ஆனது</FONT>

இந்தப் பட்டி, மேற்கண்ட வரியை சிவப்பு வண்ணத்தில் தரும். அதாவது அந்த பட்டிகளுக்கிடையில் இருக்கும் எழுத்துக்களை சிவப்பில் தர வேண்டும் என்று கட்டளை இடுகிறோம். இதேபோல் எழுத்துருவின் தடிமனையும் எழுத்துருவின் முகங்களையும ஢(font face - Arial, Times, InaimathiTSC, AParanarTSC etc.) மாற்றலாம்.

<FONT face="Comic Sans MS">Something</FONT>

<FONT size="+3">Something</FONT>

இவை மூன்ரையும் ஒரே வரியில் இப்படியும் கொடுக்கலாம்:

<FONT face="Comic Sans MS" size="+3" color="red">Something</FONT>

நம் படிவத்தை மெருகூட்ட மேற்கொண்டு சில பட்டிகளைப் பார்ப்போம்.
சில நேரங்களில் சில விடயங்களைப் பட்டியலிட நேரிடலாம்.

உதாரணமாக, கீழ்க் கண்ட புத்தகங்களை பட்டியலிட விரும்புகின்றீர்கள் என்று வைத்துக் கொள்வோம்:

ஒற்றுமை
கணினி கற்றுக் கொள்ளுங்கள்
நோயற்ற வாழ்வு
புகை, மனிதனுக்குப் பகை

அது முறைப் படுத்திய பட்டியலாகவோ அதாவது 1,2,3... என வரிசைப் படுத்தியோ அல்லது முறைப் படுத்தா பட்டியலாகவோ(எந்த வரிசை முறையும் இல்லாமலோ) இருக்கலாம். இதை நம் படிவத்தில் சேர்ப்பதைப் பற்றிப் பார்ப்போம்.

<OL> </OL> - O(rdered) L(ist) - முறை படுத்திய பட்டியல்
<UL> </UL> - U(nordered) L(ist) - முறைப் படுத்தா பட்டியல்
இத்தோடு, பட்டியலின் உறுப்பைக் குறிக்க <LI> - L(ist) I(tem) என்ற பட்டியையும் சேர்க்க வேண்டும்.

ஒரு முறை படுத்திய பட்டியலைப் பார்ப்போம்.

<HTML>
<BODY>
<H1>
<CENTER><U>முதல் தலைப்பு</U></CENTER>
</H1>
நான் வாங்கி வந்த புத்தகங்கள்:
<OL>
<LI>ஒற்றுமை
<LI>கணினி கற்றுக் கொள்ளுங்கள்
<LI>நோயற்ற வாழ்வு
<LI>புகை, மனிதனுக்குப் பகை
</OL>
</BODY>
</HTML>

மேலுள்ளதை உங்கள் உலவியில் கண்டீர்களானால், புத்தகங்கள் 1 முதல் 4 வரை வரிசைப் படுத்தப் பட்டிருக்கும். வேறு விதமான வரிசைகளையும் பெற முடியுமா? முடியும்.

a,b,c,d...
A,B,C,D...
i,ii,iii,iv...
I,II,II,IV...

மேற்கண்ட வரிசை முறைப்படியும் கையாள முடியும்.

<OL> என்ற தொடக்கப் பட்டியினுள் என்ன மாதிரி வரிசை வேண்டும் என்று குறிப்பிட வேண்டும். உதாரணமாக, a,b,c,d என்ற வரிசையில் வேண்டுமானால் அது இப்படி இருக்கவேண்டும்:

<OL type="a">

முறைப் படுத்தா பட்டியலில் வட்டமான, சதுரமான புள்ளிகளைப் பெறலாம்.

<UL type="disc"> - வட்டு
<UL type="square"> - சதுரம்
<UL type="circle"> - வட்டம்

முறைப் படுத்தப் பட்ட மற்றும் முறைப் படுத்தப் படாத பட்டியலை உங்கள் படிவத்தில் புகுத்தி பயிற்சி செய்து பாருங்கள்.

[அரசன்]

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

சில நேரங்களில் படிவத்தின் குறுக்கே கிடைக் கோடு இட வேண்டிய தேவை ஏற்படலாம். அதற்கு <HR> அதாவது (H)orizontal (R)ule என்ற பட்டியை உபயோகப் படுத்தவேண்டும். இந்த <HR> பட்டியை உபயோகித்தால் திரையின் இரு புறத்திலும் தொடும்படியாக ஒரு கிடைக் கோடு அமையும். தேவையானால் இதன் அகலத்தை இப்படி குறைத்துக் கொள்ளலாம்:

வழி 1: முழு கோட்டின் அகலத்தில் இத்தனை சதவீதம் என்று சொல்லுதல்

<HR width="40%">

வழி 2: நமக்கு வேண்டிய கோடு, எத்தனை புள்ளிகளால்(pixel) ஆனதாக இருக்க வேண்டும் என்று சொல்லுதல். மேல் உள்ளதைப் போலவே, % குறி இல்லாமல் எழுத வேண்டும்

<HR width="40">

இதுவரை நாம் கற்றுக் கொண்ட பட்டிகள்:

<HTML>
<BODY>
<H1>,<H2>....<H6>
<B>
<P>
<BR>
<CENTER>
<FONT>
<OL>
<UL>
<LI>
<HR>

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

இது மிக, மிக அடிப்படையான ஒரு படிவம். இன்னும் நிரம்ப இருக்கிறது.

<HTML>
<BODY>
<H2><CENTER><U>நான் படித்த புத்தகங்கள்</U></CENTER></H2>
<P>சென்ற வாரம் சில புத்தகங்கள் வாங்கி வந்தேன். ஓய்வு கிட்டிய நேரங்களில் ஒவ்வொன்றாய் படித்தேன் எல்லாம் பயனுள்ள புத்தகங்கள். கீழ் காணுபவைதான் நான் வாங்கிவந்த புத்தகங்கள்:</P>
<OL><B><I>
<LI><A HREF="#ஒற்றுமை">ஒற்றுமை</A>
<LI><A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
<LI><A HREF="#நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
<LI><A HREF="#பகை">புகை, மனிதனுக்குப் பகை</A>
</I></B></OL>
அந்தப் புத்தகங்களிலிருந்து ஒரு சில வரிகளை இங்கே காண்போம்.
<UL><B>
<LI><A NAME="ஒற்றுமை"></A>ஒற்றுமை
</B></UL>
ஒற்றுமை என்பது இன்றைய உலகத்தில் அருகி வரும் ஒன்றாகிவிட்டது. ஒரே நோக்கத்திற்காகச் செயல்படும் இயக்கங்கள் அல்லது தனி மனிதர்கள் கூட தம்மிடையே ஒற்றுமை காண மறுக்கின்றனர். இதன் பிரதான காரணம் தன்னை முன்னிறுத்த வேண்டும் என்ற எண்ணமே.
<UL><B>
<LI><A NAME="கணினி"></A>கணினி கற்றுக் கொள்ளுங்கள்
</B></UL>
இன்றைய கால கட்டத்தில் கணினிக் கல்வி என்பது இன்றியமையாத ஒன்றாகிவிட்டது. அதிலும் தாய் மொழியில் கற்பிப்பதென்பது தேவை என்று ஆகிவிட்டது. ஒரு படைப்பாளன் என்ற முறையில் தான் சிரமப் பட்டு வடித்த தன் கருத்துக்கள் சிதையாமல் அனைவருக்கும் புரியும் வண்ணமும், அதே நேரத்தில் புது தமிழ்ச் சொற்களை படிப்பவர் மனதில் பதியுமாறு செய்வதும் அவனுடைய கடமையாகிறது.
<UL><B>
<LI><A NAME="நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
</B></UL>
'நோயற்ற வாழ்வே குறைவற்ற செல்வம்' என்பது பழமொழி.<BR>
அந்த செல்வத்தை சிலர் இயற்கையிலேயே இழந்திருந்தாலும் இன்றைய மருத்துவ முன்னேற்றத்தில் அவைகளை திரும்பப் பெறுவதென்பது சாத்தியமான ஒன்றாகி வருகிறது. இன்று நிறமிகளைப் பற்றிய ஆய்வு அதன் உச்சத்தையே எட்டியிருக்கிறது.
<UL><B>
<LI><A NAME="பகை"></A>புகை, மனிதனுக்குப் பகை
</B></UL>
புகைப்பதால் உண்டாகும் தீமைகளை புகைப்பவர்களே அறிந்திருந்தும் அவர்கள் சிந்திப்பதில்லை. 'என் உடல் கெட்டால் உனக்கென்னெ?' என்பது அவர்கள் எண்ணம். அவர் உடம்பு, அவர் நினைத்துக் கொள்ளட்டும். <I>ஆனால் நான் நான் சுவாசிக்கும்படியாக அவர் ஊதித் தள்ளுவது எந்த விதத்தில் நியாயம்?</I>
<HR>
<FONT face = "InaimathiTSC" color="MidnightBlue" size="-2">குறிப்பு:<BR>
மேற்கண்ண்டவை அனைத்தும் கற்பனையே.<BR>
இந்த ஆக்கத்திற்கான மாதிரியாக எழுதப் பட்டது.<BR>
-உமர்</FONT>
</BODY>
</HTML>

இந்த மொழியின் சிறப்பு அம்சம் என்ன என்றால் ஓரிடத்திலிருந்து படிவத்தின் வேறு பகுதிக்கோ அல்லது வேறு பக்கத்திற்கோ தாவ வகை செய்வது. இதை hyper linlk என்கிறோம். போக வேண்டிய இலக்கை, சுட்டி நிற்கும் சொற்களுடனோ அல்லது படத்துடனோ
ஒட்ட வைக்கும் பட்டிதான் <A> என்பது. இந்த <A> பட்டியின் உள்ளே எந்த மாதிரியான தொடர்பு, எந்த இலக்கு என்று குறிக்க வேண்டும். இங்கு, இந்த பட்டியை உபயோகித்து எவ்வாறு படிவத்தின் வேறுபட்ட பகுதிகளுக்குத் தாவாலாம் என்று காண்போம்.

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

<A NAME="கணினி"></A>

பின்னர், சுட்டியைக் குறிக்க வேண்டும். நாம் நான்கு புத்தகங்களையும் வரிசைப் படுத்தி பட்டியலிட்டோ மல்லவா? அவைகளை சுட்டியாக மாற்றிக் கொள்ளலாம். "கணினி கற்றுக் கொள்ளுங்கள்" என்பதற்கு முன்னால் <A HREF="#கணினி"> என்று குறிக்க வேண்டும்
இப்படிச் செய்வதன் மூலம் "கணினி" என்ற பெயரிடப்பட்ட இடத்திற்குத் தாவ வேண்டும் குறிக்கிறோம். அது இப்படி இருக்கும்:

<A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
(# என்ற குறியை "கணினி" க்கு முன்னால் இடுவது அவசியம்)

இந்தப் பட்டிகள் இணைக்கப்பட்ட படிவம் கீழே தந்திருக்கிறேன். ஒரு முறை சறு நோட்டமிட்டுவிட்டு, ஏதாவது ஒரு பெயரில்(உதா: myhtml.html) சேமித்து உலவியில் சோதித்துப் பாருங்கள்.

<HTML>
<BODY>
<H2><CENTER><U>நான் படித்த புத்தகங்கள்</U></CENTER></H2>
<P>சென்ற வாரம் சில புத்தகங்கள் வாங்கி வந்தேன். ஓய்வு கிட்டிய நேரங்களில் ஒவ்வொன்றாய் படித்தேன் எல்லாம் பயனுள்ள புத்தகங்கள். கீழ் காணுபவைதான் நான் வாங்கிவந்த புத்தகங்கள்:</P>
<OL><B><I>
<LI><A HREF="#ஒற்றுமை">ஒற்றுமை</A>
<LI><A HREF="#கணினி">கணினி கற்றுக் கொள்ளுங்கள்</A>
<LI><A HREF="#நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
<LI><A HREF="#பகை">புகை, மனிதனுக்குப் பகை</A>
</I></B></OL>
அந்தப் புத்தகங்களிலிருந்து ஒரு சில வரிகளை இங்கே காண்போம்.
<UL><B>
<LI><A NAME="ஒற்றுமை"></A>ஒற்றுமை
</B></UL>
ஒற்றுமை என்பது இன்றைய உலகத்தில் அருகி வரும் ஒன்றாகிவிட்டது. ஒரே நோக்கத்திற்காகச் செயல்படும் இயக்கங்கள் அல்லது தனி மனிதர்கள் கூட தம்மிடையே ஒற்றுமை காண மறுக்கின்றனர். இதன் பிரதான காரணம் தன்னை முன்னிறுத்த வேண்டும் என்ற எண்ணமே.
<UL><B>
<LI><A NAME="கணினி"></A>கணினி கற்றுக் கொள்ளுங்கள்
</B></UL>
இன்றைய கால கட்டத்தில் கணினிக் கல்வி என்பது இன்றியமையாத ஒன்றாகிவிட்டது. அதிலும் தாய் மொழியில் கற்பிப்பதென்பது தேவை என்று ஆகிவிட்டது. ஒரு படைப்பாளன் என்ற முறையில் தான் சிரமப் பட்டு வடித்த தன் கருத்துக்கள் சிதையாமல் அனைவருக்கும் புரியும் வண்ணமும், அதே நேரத்தில் புது தமிழ்ச் சொற்களை படிப்பவர் மனதில் பதியுமாறு செய்வதும் அவனுடைய கடமையாகிறது.
<UL><B>
<LI><A NAME="நோயற்ற வாழ்வு">நோயற்ற வாழ்வு</A>
</B></UL>
'நோயற்ற வாழ்வே குறைவற்ற செல்வம்' என்பது பழமொழி.<BR>
அந்த செல்வத்தை சிலர் இயற்கையிலேயே இழந்திருந்தாலும் இன்றைய மருத்துவ முன்னேற்றத்தில் அவைகளை திரும்பப் பெறுவதென்பது சாத்தியமான ஒன்றாகி வருகிறது. இன்று நிறமிகளைப் பற்றிய ஆய்வு அதன் உச்சத்தையே எட்டியிருக்கிறது.
<UL><B>
<LI><A NAME="பகை"></A>புகை, மனிதனுக்குப் பகை
</B></UL>
புகைப்பதால் உண்டாகும் தீமைகளை புகைப்பவர்களே அறிந்திருந்தும் அவர்கள் சிந்திப்பதில்லை. 'என் உடல் கெட்டால் உனக்கென்னெ?' என்பது அவர்கள் எண்ணம். அவர் உடம்பு, அவர் நினைத்துக் கொள்ளட்டும். <I>ஆனால் நான் நான் சுவாசிக்கும்படியாக அவர் ஊதித் தள்ளுவது எந்த விதத்தில் நியாயம்?</I>
<HR>
<FONT face = "InaimathiTSC" color="silver" size="-2">குறிப்பு:<BR>
மேற்கண்ண்டவை அனைத்தும் கற்பனையே.<BR>
இந்த ஆக்கத்திற்கான மாதிரியாக எழுதப் பட்டது.<BR>
-உமர்</FONT>
</BODY>
</HTML>

மேற்கொண்டு, படிவத்தை அலங்காரப் படுத்துவதைப் பற்றி இனி பார்ப்போம்.

அதற்கு முன் வண்ணங்களைப் பயன்படுத்துவது பற்றி அறிந்து கொள்வோம். நாம் கண்ட மாதிரிப் படிவத்தில், வண்ணங்களைப் பெறுவதற்காக "red", "blue" என்று சொற்களைப் பயன்படுத்தினோம். குறிப்பிட்ட வண்ணங்களுக்கு மட்டுமே சொற்களைப் பயன்படுத்தமுடியும். படிவங்களில் பயன்படுத்த இவை போதும் என்றாலும், தொழில் முறையில் இணையப் பக்கங்களை இயற்றும்போது வேறு முறையைக் கையாளுகிறோம். இம்முறை மூலம் விரும்பிய வண்ணக் கலவைகலைப் பெற முடியும். சிவப்பு, பச்சை, நீலம் ஆகியவற்றின் வேறுபட்ட அளவுகளை 'பதினாறு எண்ணிய' முறையில்(hexadecimal: hexa-ஆறு, decimal-பத்து) குறிக்க வேண்டும். இந்த 'பதினாறு எண்ணிய'முறை என்றால் என்ன? நாம் சாதாரணமாக எண்ணும்போது 0 இல் தொடங்கி 9 வரை பத்து கொண்ட தொகுதியாக எண்ணுவோம். 'பதினாறு' வகை எண்ணிக்கையில் பத்துக்கு மேல் எப்படிப் பெறுவது?

முடிந்த வரையில் எளிய முறையில் தருகிறேன். புரிந்துகொள்ள முயலுங்கள். இல்லையென்றாலும் பாதமில்லை; விட்டுவிடுங்கள்.
இதோ வழி:

9 க்குப் பின் A, B, C, D, E, F என்ற 6 எழுத்துக்களையும் சேர்த்துக் கொள்ள வேண்டும்.

அது இப்படி அமையும்:

0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F

சாதாரண எண் முறையில் 9 க்குப் பின் இடது புறம் 1 இட்டு அடுத்த தொகுதியின் தொடக்கமாக வலப்புறம் 0 இடுகிறோமோ(10 என்பதாக), அதே மாதிரி, 'பதினாறு வகை' எண்ணிக்கையில் 15 முடிந்தவுடன் (அதாவது F முடைந்த பின்னர்) ஒரு தொகுதி முடிந்ததின் அடையாளமாக இடப்புறம் 1 ம் அடுத்த தொகுதியின் தொடக்கமாக வலப் புறம் 0 உம் இட வேண்டும். அதாவது இந்த முறையில் 16 ஐக் குறிக்க வேண்டுமானால் 10 என்று எழுத வேண்டும். சரி சாதாரண எண் வரிசையிலும் 10 உண்டு 'பதினாறு வகை'யிலும் 10 உண்டு. இதை எவ்வாறு பிரித்தறிவது? இதற்கு 'பதினாறு வகை'எண் வரிசை என்பதை உணர்த்த HEX (hexadecimal) என்பதைச் சேற்க வேண்டும். அதாவது 'பதினாறு வகை' எண்ணிக்கையில் 16 ஐக் குறிக்க 10HEX என்று எழுத வேண்டும்.

இனி, இந்த எண் முறையைக் கொண்டு எவ்வாறு வண்ணங்களைக் குறிக்கலாம் என்று பார்ப்போம். நான் ஏற்கெனவே எழுதிய புகைப்படக் கலை மற்றும் வண்ணக் கலவை பற்றிய ஆக்கங்களை நினைவு கூறுங்கள்.

அடிப்படை வண்ணங்களான சிவப்பு, பச்சை, நீலம் ஆகியவற்றிலிருந்தே பிற வண்ணங்களை பெறுகிறோம் என்பதை நாம் அறிவோம். மஞ்சள் வண்ணத்தைப் பெற, சிவப்பையும் பச்சையையும் கலக்க வேண்டுமென்றும்; செந்நீலத்தைப்(megenta) பெற, சிவப்பையும் நீலத்தையும் கலக்க வேண்டுமென்றும்; நீலப்பச்சையைப்(cyan) பெற, நீலத்தையும் பச்சையையும் கலக்க வேண்டுமென்றும் அறிந்திருக்கிறோம். மற்ற வண்ணங்களும் அடிப்படை வண்ணங்களின் வேறுபட்ட விகிதக் கலவைகளே என்றும் அறிவோம். பட்டியில் இந்த எண்களை உபயோகிக்கும்போது சிவப்பு, பச்சை, நீலம்(RGB) என்ற வரிசை முறையைக் கையாள வேண்டும். ஒவ்வொரு வண்ணமும் 0 லிருந்து 256 அலவுகளால் அதாவது HEX இல் 00 இலிருந்து FF வரையான அளவுகளாக இருக்க வேண்டும்.

ஓவ்வொன்றிற்கும் இரண்டிரண்டாக 6 இலக்கம் அல்லது எழுத்துக்களைக் கொண்டதாக இருக்கும். உதாரணமாக மஞ்சளுக்கு FFFF00 ஆக இருக்கும். இதில் முதல் FF சிவப்பையும், இரண்டாவது FF பச்சையையும் 00 நீலத்தையும் குறிக்கும். இங்கு நீலம் 00 என்றிருப்பதால், நீலத்தின் பங்கு ஏதுமில்லை என்று தெரிகிறது. இவ்வாறு இலக்கங்களை மாற்றி எண்ணற்ற வண்ணங்களை பெறலாம்.

இனி பட்டியில் எவ்வாறு கையாளலாம் என்று பார்ப்போம். உதாரணமாக நம் மாதிரிப் படிவத்தின் பின்னரங்கின்(background) வண்ணத்தை மஞ்சளாக மாற்ற எண்ணுகிறீர்கள் என்று வைத்துக் கொள்ளுவோம். கீழ்க் கண்டவாறு <BODY> பட்டியில் திருத்தம் செய்யவும்:

<HTML>
<BODY bgcolor="#FFFF00">

இதில் கவனிக்க வேண்டியது, FFFF00 என்ற அலகுகளுக்கு முன் # இட வேண்டியது. படிவத்தில் மாற்றம் செய்து சோதிதுப் பாருங்கள். வெவ்வேறு அளவுகள்(எழுத்து F ஐத் தாண்டக் கூடாது) இட்டும் சோதிதுப் பாருங்கள்.

குறிப்பு:

இத்துடன் இணைக்கப் பட்டிருக்கும் சிறிய jpg கோப்பை நாம் சோதிதுக் கொண்டிருக்கும் படிவம் இருக்கும் அதே directory இல் சேமித்துக் கொள்ளவும்.

படிவத்தின் பின்னரங்கின் வண்ணத்தை மாற்ற <BODY> பட்டியில் bgcolor(BackGround color) என்பதைச் சேற்க வேண்டும் என்று கண்டோ ம். இவ்வாறே வார்ப்பின்(எழுத்துரு -font) வண்ணத்தை மாற்ற HEX எண் முறையைப் பயன் படுத்தலாம். வண்ணப் பெயர்களும் அவைகளுக்கான HEX மதிப்புக்களும் இந்த படிவத்தின் இறுதியில் தரப் பட்டிருக்கின்றன. பெயர்களையோ அல்லது அதன் மதிப்புக்களையோ பட்டிகளில் பாவிக்கலாம்.

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

<BODY background=bg.jpg>

படிவத்தை சேமித்து உலவியில் பாருங்கள். உங்கள் படிவம் மேலும் மெருகூட்டப் பட்டதாக இருக்கும்.

நாம் இங்கு பார்த்து வருவது, ஒருபடிவத்தை(document) மீயுரைகுறிமொழியில் (HTML) எவ்வாறு எழுதலாம் என்பதைப் பற்றியும் அதை எப்படி மெருகூட்டலாம் என்பது பற்றியும்தான்.

இப்போது நீங்கள் உங்கள் வரவு செலவு கணக்கு(இதற்கும் HTML-ஆ என்று கேட்காதீர்கள்!) அல்லது ஒரு கவிதை எழுதுவதாக வைத்துக் கொள்ளுங்கள். கவிதையின் வரிகள் சற்று முன்னும் பின்னுமாக அமைய வேண்டி வரலாம். ஆனால் நம் மீயுரைகுறிமொழி, வெள்ளை இடைவெளிகளை வெட்டித் தள்ளிவிடும் என்று அறிவோம். உங்களுக்கு, நீங்கள் மூலத்தில் எவ்வகையில் எழுதுகிறீர்களோ, அம்மதிரியே உலவியிலும் காணவேண்டும். என்ன செய்யலாம்? இதற்கும் வழிதருகிறது ஒரு பட்டி. அதுதான் <PRE> எனப்படும் (Predefined) பட்டி.

<PRE> </PRE> இவைகளுக்கு இடையில் எம்மாதிரி எழுதப் படுகின்றனவோ, உலவியிலும் அம்மாதரியே தோன்றும். கீழே காணும் பகுதியை வெட்டி ஒரு உரை தொகுப்பியில் (text editor) pre.html என்ற பெயரில்(அல்லது ஏதேனும் ஒரு பெயரில்) சேமித்து உலவியில் சோதிதுப் பாருங்கள்:

<HTML>
<BODY>
<H2> <B><CENTER>இந்த பகுதி பட்டி இடப்படாத பகுதி</CENTER><B></H2>

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

-கவிக் கொண்டல் மா. செங்குட்டுவன்

<HR>

<H2> <B><CENTER>இந்த பகுதி பட்டி இடப்பட்ட பகுதி</CENTER><B></H2>
<PRE>
கண்ணிருந்தும் கல்லாதார் வாழ்க்கை என்றும்
காரிருளில் நடக்கின்ற செயெலே யாகும்
மண்ணுக்குள் மறைந்திருக்கும் நீரைப் போல
மாந்தருக்குள் ஒளிந்திருக்கும் திறனைக் காண
நுண்ணறிவை வெளிப்படுத்தும் கல்வி தேவை
நுரைக்குமிழி போலதுவும் பொங்கு தற்கும்
எண்ணத்தை எடுத்தியம்பும் ஆற்ற லுக்கும்
எழுத்தறிவே ஒளிவிளக்காய் மிளிர்ந்து நிற்கும்.

-கவிக் கொண்டல் மா. செங்குட்டுவன்

</PRE>
</BODY>
</HTML>

[அரசன்]

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

ஒரு வலைப் பக்கம் என்பது, நாம் இதுவரை கண்ட படிவத்திற்கு மேம்பட்டது.
எதாவதொரு வலைப்பக்கத்தின் மூலத்தை (source) பார்த்தீர்களானால்
ஏராளமான பட்டிகளைப் காணலாம். அவற்றில் பல, வலைப் பக்கத்திற்கு
நேரடியான தொடர்புள்ளவையும் (நாம் முன்பு கண்டதுபோல்) சில நேரடியான
தொடர்பு இல்லாதவையுமாக இருக்கும். அப்படிப்பட்ட பட்டிகளைப்யைப் பற்றி
பார்க்கப் போகிறோம்.

எந்த ஒரு வலைப் பக்கத்தை எடுத்தாலும் <HTML> பட்டிக்கும் <BODY> பட்டிக்கும்
இடையே <HEAD> பட்டியைக் காணலாம். இந்த <HEAD> </HEAD>
பட்டிகளுக்கிடையில் சில தேவையான தகவல்கள் சில விசேட பட்டிகளில் தரப்
படுகின்றன. இவற்றுள் வெகு சாதாரணமாகக் காணக் கூடியது <TITLE>
பட்டியாகும். இதில் தரப்படும் வரிகள், தலைப்பாக அந்த பக்கத்தில் (title
bar) தெரியும்.

உங்கள் பக்கத்திற்கு தலைப்பு My page என்று வைத்தீர்களானால் அது இவ்வாறு
குறிக்கப் படவேண்டும்.

<HEAD>
<TITLE>My page</TITLE>
</HEAD>

அதை அன்றி, <META>, <LINK>, <SCRIPT>, <STYLE>, <LINK>
போன்ற வேறு சில தகவல் பட்டிகளும் இந்த <HEAD> </HEAD>
பட்டிகளுக்கிடையே குறிக்கப் படுகின்றன.

<META> பட்டியானது, உங்கள் பக்கத்தைப் பற்றிய தகவல்களைக்
கொண்டிருக்கும். இந்த பட்டியில் தரப்படும் தகவல்கள் சில, தேடு
செயலிகளால் (search engines) கையாளப் படுகின்றன.

கீழ்க் காண்பவை பொதுவாக பாவிக்கப்படும் சில <META> பட்டிகளாகும்.

META HTTP-EQUIV="Content-Type" என்பது உங்கள் பக்கத்தில் எந்த
எழுத்துரு (charecter set) அமைப்பு உபயோகப் படுத்தப் பட்டிருக்கிறது
என்பதை குறிக்கிறது:

META NAME="generator" என்பது அந்தப் பக்கம் எந்த மென்பொருளால்
உண்டாக்கப் பட்டது என்று குறிக்கிறது.

META NAME="author" என்பது யார் எழுதியது என்பதையும்,

META NAME="description" என்பது அந்த பக்கம் பற்றிய சிறு
குறிப்பையும்,

META NAME="keywords" என்பது எந்தெந்த சொற்கள் மூலம் அந்தப்
பக்கத்தை செயலிகள் மூலம் தேடலாம் என்பதையும் குறிக்கிறது.

கீழே தரப்பட்டிருக்கும் உதாரணத்தில் <META> பட்டிகள் எவ்வாறு உபயோகப்
படுத்தப் பட்டிருக்கின்றன என்று பாருங்கள்:

<HTML>
<HEAD>
<TITLE>Head and Meta tags</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=user-defined">
<META NAME="generator" CONTENT="Note Pad">
<META NAME="author" CONTENT="Umar">
<META NAME="description" CONTENT="This page explains
about META tags">
<META NAME="keywords" CONTENT="Tamil, HTML, Head,
Meta, ">
</HEAD>

<BODY>
.............................
....................
</BODY>
</HTML>

இங்கு META HTTP-EQUIV="Content-Type" என்பதில் user-defined
என்பதாக எழுத்துருவும்,
META NAME="generator" என்பதில் Note Pad இந்தப் பக்கம்
உருவாக்குவதற்கு பயன்படுத்தப் பட்டிருக்கிறது என்பதையும்,
META NAME="author" என்பது இது யாரால் எழுதப்பட்டது என்பதையும்,
META NAME="description" என்பதில் இந்த பக்கத்தைப் பற்றிய சிறு
குறிப்பும்,
META NAME="keywords" என்பதில் இந்த பக்கத்தை எந்த சொற்களால்
தேடலாம் என்பதையும் குறிப்பிடுகின்றன.

இவையன்றி,
<META HTTP-EQUIV="expires" என்பதில், இந்தப் பக்கம் எந்த
நாளில் காலாவதியாகிறது என்பதையும் குறிக்கும்.

சில சமயங்களில் நீங்கள் பார்த்துக் கொண்டிருக்கும் சில பக்கங்கள் தானாகவே
தன்னை புதுப்பித்துக்(refresh) கொள்ளும். "கிரிகெட் ஸ்கோர்" பார்த்துக்
கொண்டிருக்கும்போது ஒரு குறிப்பிட்ட இடைவெளியில் தானாகவே புதிய
எண்ணிக்கைகள் தெரிவதை அவதானித்திருக்கலாம். அதன் சூட்சுமத்தைக்
கொண்டிருப்பது இந்த <META> பட்டிதான்:


<META HTTP-EQUIV="refresh" NAME="robots" CONTENT="10">

இதில் 10 என்ற எண் நொடியைக் குறிக்கிறது. தேவையான் நேரத்தை இங்கு
எண்ணால் குறிக்கலாம்.

இதை சோதனை செய்து பார்ப்போம். கீழ்க் கண்ட HTML ஐ வெட்டி ஒரு
உரைதொகுப்பியில்(text editor) ஒட்டி, refresh.html என்று
பெயரிட்டு சேமித்து உங்கள் உலவியில் பாருங்கள். ஒவ்வொரு 10 நொடிக்கும்
தன்னை புதுப்பித்துக்கொண்டு புதிய தகவலைத் தரும். இந்த பட்டியலில்
உள்ளவைகள் உங்களுக்கு பரிச்சயம் இல்லாதிருக்கலாம். அதைப் பற்றி கவலை
வேண்டாம். உங்களுக்கு ஒரு "refresh" தரவே இந்த சோதனை.

<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" NAME="robots" CONTENT="10">
<TITLE>Refresh Test</TITLE>
</HEAD>
<BODY>
<H1>Test Auto refresh</H1>
<HR>
<script language="javascript">
<!--
for (var knum = 0; knum <=10; knum++)
{
var r= Math.random()
var s= Math.round(r*5)+1
document.write(s," X ",knum, " = ",s*knum,"<br>");
}
-->
</script>
<HR>
When it is auto refreshed, a random number is
generated.
</BODY>
</HTML>

இனி இணையப் பக்கங்களில் சாதாரணமாகக் காணப்படும் பட்டிகள் சிலவற்றைப்
பார்ப்போம்.

சுட்டிகள், இணையப் பக்கங்களில் வெகுவாகக் காணப்படும் ஒன்றாகும்.
நாம் இவைகளைப் பற்றி முந்தய பகுதியொன்றில் கண்டிருக்கிறோம். இந்த
சுட்டிகளை ஏதுவாக்கித் தருவது <A> என்ற (Anchor) பட்டியாகும். இந்த
பட்டியில் காணப்படும் ஒரு பண்பு(Attribute), இதற்கு துணை செய்கிறது.
HREF (Hyper link reference) எனப்படும் இந்தப் பண்பிற்கு நாம் எந்த
இணையத் தலத்திற்குச் செல்ல வேண்டுமோ அதன் இணைப்பு முகவரியைக்
கொடுத்துவிட்டால் போதும். மேலும் அந்த முகவரியைப் பற்றிய இலகுவான
சொற்றொடர்களையும் அமைத்துக் கொள்ளலாம்.

உதாரணமாக,

<A HREF="http://www.cnn.com/"> ஒரு அமெரிக்க செய்தி
நிறுவனம்</A>

இதில் A என்பது பட்டி. அதை அடுத்து வரும் "http://www.cnn.com/" ஐ,
இந்த பட்டியின் HREF பண்பாகக் கொடுத்திருக்கிறோம். அந்த பட்டியின்
பின், ஒரு வசதியான ஒரு சொற்றொடரை கொடுத்துக் கொள்ளாம். (இங்கு '
ஒரு அமெரிக்க செய்தி நிறுவனம்' என்று தந்திருக்கிறோம்.)

மின்னஞ்சல் முகவரியை உங்கள் இணையப் பக்கத்தில் இணைப்புச் சுட்டியாகத்
தரலாம்.

அது கீழ்க் கண்டவாறு அமையும்.

<A HREF="mailto:csd_one@yahoo.com">டீறுகூஜ் மின்னஞ்சல்</A>

இங்கும் உங்களுக்கு வசதியானதொரு சொற்றொடரை தரலாம்.

கணினியில் உள்ள ஒரு கோப்பை(file) சுட்டவும் கீழ்க்கண்டவாறு
பயன்படுத்தலாம்:

<A
HREF="file:///c:/windows/desktop/XSL_umar.html">test</A>

(கவனிக்க: " file: " அடுத்து மூன்று சாய்கோடுகள்(///) இருக்கின்றன)

இந்த HREF பண்பை அன்றி வேறு சில பண்புகளும் இந்த <A> பட்டியில்
இருக்கின்றன. அவைகளை தேவையான தருணத்தில் பார்க்கலாம்.

இன்றும் வெகுவாகக் காணக் கூடிய பட்டியொன்றைப் பற்றி காணப்போகிறோம்.

பக்கங்களுக்கு அழகூட்டுவது மற்றுமன்றி விளக்கப் கட்டுரைகள், விளம்பரங்கள்
ஆகியவைகளைக் கொண்ட பக்கங்களில் படங்களை சேர்ப்பது தேவையான
ஒன்றாகும். இதற்கு <IMG> என்ற (Image) பட்டியை உபயோகிக்கிறோம்.

இந்த <IMG> என்ற பட்டியானது,
SRC, WIDTH, HEIGHT, BORDER, ALIGN, HSPACE, VSPACE, ALT
முதாலான பண்புகளைக்(properties) கொண்டது. இதில் SRC என்ற பண்பு
தேவையான(mandatory) ஒரு பண்பாகும். இந்த பண்புதான் படத்தின்
இருப்பிடத்தைக்(source) குறிப்பதாகும். குறைந்த அளவு, இந்தப் பண்பாவது
<IMG> பட்டியில் குறிப்பிடப் பட்டிருக்க வேண்டும்.

நீங்கள் உபயோகப் படுத்தப் படும் படம் C:/winter.jpg வாக இருந்தால்
இப்படிக் குறிக்க வேண்டும்:

<IMG src="file:///f:/winter.jpg">

படத்தின் இருப்பிடம் உங்கள் கணினியாகவோ அல்லது ணையத் தலமாகவோ
இருக்கலாம். இனியொரு சோதனை செய்து பார்க்கலாம். உங்கள் கணினியில்
உள்ள ஏதாவது ஒரு gif அல்லது jpg படத்தை தேர்ந்தெடுத்து அதன்
இருப்பிடத்தை குறித்துக் கொள்ளுங்கள். இப்போது கீழ்க் காணுவதுபோல் ஒரு
உரை தொகுப்பியில்(text editor - eg: Note pad) தட்டச்சு
செய்யுங்கள்:

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>I like this
Picture</B></H3></CENTER></P>
<IMG SRC="file:///f:/tamil-asp/stage.gif">
</BODY>
</HTML>

குறிப்பு: மேற்கண்டதில் "file:///f:/tamil-asp/stage.gif"
என்பதை உங்கள் படத்தின் இருப்பிடத்திற்கு தக்கவாறு மாற்றிக் கொள்ளுங்கள்.

இதில் கோப்பின் இருப்பிடமான f:/tamil-asp/stage.gif என்பதற்கு
முன் file:/// என்பதைச் சேர்த்துக் கொள்ள வேண்டும்(காரணத்தை சென்றமுறை
விளக்கியிருக்கிறோம்). stage.gif என்ற கோப்பு உங்கள் வலைப்
பக்கத்தின் அதே directory இல் இருந்தால் IMG SRC="stage.gif"
என்று கோப்பின் பெயரை மட்டும் தந்தால் போதுமானது. இவ்வாறே அந்தப் படம்
வேறு ஒரு வலைப் பக்கத்தில் இருந்தாலும் குறிக்கலாம்.

கீழே காணும் பட்டியலை yahoomail.html என்ற பெயரில் சேமித்து உங்கள்
உலவியில் சோதித்துப் பாருங்கள். Yahoo Mail இன் படத்தை அதன் வலைப்
பக்கத்திலிருந்தே உபயோகித்துக் கொள்கிறோம். இவ்வாறு தேவைப் பட்டால்
வெவ்வேறு இணையத்தலங்களிலிருந்து படங்களை உபயோகித்துக் கொள்ளலாம்.

குறிப்பு: இதை சோதிக்கும்போது இணையத் தொடர்பு (internet
connection) இருக்கவேண்டும்

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>Yahoo Mail
logo</B></H3></CENTER></P>
<IMG
SRC="http://us.i1.yimg.com/us.yimg.com/i/us/pim/mail3.gif">
</BODY>
</HTML>


WIDTH, HEIGHT என்ற பண்புகளைக் கொண்டு படத்தின் அகல உயரங்களை
மாற்றிக் கொள்ளல்லாம். அளவுகள் படத்தின் தனிமப் புள்ளிகளில் (pixel).

உம்: WIDTH="100" , HEIGHT="75"

இனி BORDER என்ற பண்பையும் சேர்த்து அது எவ்வாறு உலவியில்
தோற்றமளிக்கிறது என்று பார்க்கலாம். மேற்கண்ட உதாரணத்தில் மாறுதல்
செய்யுங்கள்:

<IMG SRC="IMG
SRC="http://us.i1.yimg.com/us.yimg.com/i/us/pim/mail3.gif">
என்ற வரியில் BORDER="2" என்பதைச் சேருங்கள். அது இவ்வாறு அமையும்:

<IMG SRC="C:/windows/desktop/button/tamil-thedu.gif"
BORDER="2">

உங்கள் படத்தைச் சுற்றி கோடு இடப் பட்டிருக்கும். இது எத்தனை படத்
தனிமங்களால் (picture element - pixel) ஆனது என்று குறிக்க வேண்டும்
இங்கு 2 என்பது இரண்டு புள்ளிகள் தடிமன் என்று பொருள்.

ALT என்கிற பண்பு மூலம் படத்திற்கு ஒரு மாற்றாக (alternate) சிறு
குறிப்புத் தரலாம். படத்தின்மேல் 'எலி' நகரும்போதும், ஏதோ ஒரு
காரணத்தால் திரையில் படம் தெரியாத போதும் இந்த குறிப்பு தோன்றும்.

ALIGN என்பது படத்தை அதைச் சுற்றி இருக்கும் எழுத்துக்களுக்கோ (அல்லது
படத்திற்கோ) எப்படி அமையவேண்டும் என்பதைக் குறிக்கும்.
ALIGN="bottom"
ALIGN="middle"
ALIGN="left"
ALIGN="right"
ALIGN="top"
ஆகியவைகளை இதில் குறிக்கலாம்.

HSPACE, VSPACE என்பவை இந்தப் படத்திற்கு பக்கவாட்டிலோ அல்லது
மேலும் கீழுமோ எவ்வளவு இடைவெளி இருக்கவேண்டும் என்று குறிக்கலாம். அளவு
பட தனிமத்தில் (pixel).

நீங்கள் தட்டச்சு செய்தவைகளை mypic.html என்ற பெயரில் சேமித்து
உலவியில் சோதித்துப் பாருங்கள்.


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

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

WIDTH="80"
HEIGHT="80"
BORDER="5"
ALIGN="left"
HSPACE="20"
VSPACE="5"
ALT="Science Tamil Search">

முதலில் இணைய இணைப்பு (internet connection) ஏதுமில்லாமல்
சோதித்துப் பாருங்கள். அப்போது படம் கிடைக்காது. காரணம் அந்தப் படம்
ஒரு இணையப் பக்கத்தில் இருக்கிறது. ஆனால் அது இருக்க வேண்டிய இடத்தில்
Science Tamil Search என்ற வாசகம் இருக்கும். இதுதான் ALT
(alternate) என்ற பண்பில் நாம் குறிப்பிட்டிருப்பதாகும். பின்னர் இணைய
இணைப்புடன் அந்த படத்தில் சொடுக்கிப் பாருங்கள் இந்தப் படத்தோடு
இணைக்கப்பட்டிருக்கும் வலைப் பக்கத்திற்குத் தாவிச் செல்லலாம். இந்தப்
படத்தின் உண்மையான அளவு 36X36 pixel ஆகும். இங்கு நாம் 80X80
அளவுக்குப் பெரிதாக்கி இருக்கிறோம். இவ்வாறே பெரிய படங்களையும்
இடத்திற்குத் தக்கவாறு குறுக்கிக் கொள்லலாம்.

<HTML>
<HEAD>
<TITLE>My picture</TITLE>
</HEAD>
<BODY>
<P><CENTER><H3><B>Testing hyper
link</B></H3></CENTER></P>
<A
href="http://www24.brinkster.com/umarthambi/tamil/etamil_search.htm"><IMG
SRC="http://www.geocities.com/csd_one/HomeP23.jpg"
WIDTH="80" HEIGHT="80" BORDER="5" ALIGN="left"
HSPACE="20" VSPACE="5" ALT="Science Tamil
Search"></A>The HTML comments in this page contain the
configuration in formation that allows users to edit
pages in your web using the Microsoft Web Publishing
Wizard or programs which use the Microsoft Web
Publishing Wizard such as FrontPad using the same
username and password they would use if they were
authoring with Microsoft FrontPage. Please refer to
the Microsoft's Internet SDK for more information on
the Web Publishing Wizard APIs.
</BODY>
</HTML>

பண்புகளை மாற்றி சோதனை செய்து பாருங்கள்.

[அரசன்]

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

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

<TABLE> </TABLE> என்பவை இதன் தொடக்க, முடிவு பட்டிகளாக இருக்கும்.

ஒரு அட்டவணை என்றால் என்னென்ன இருக்கும்? மேலிருந்து கீழாக வரிசை
(row)இருக்கும். ஒவ்வொரு வரிசையிலும் குறுக்காக பல பத்திகள் (column)
இருக்கும். (ஒரு excel worksheet ஐ நினைவு கூறுங்கள்). முதல்
வரிசையில் இடமிருந்து வலமாக ஒவ்வொரு பத்திக்குமான தலைப்பு இருக்கும்.
இதுதான் சாதாரணமாக எந்த அட்டவனையாக இருந்தாலும் நாம் காண்பது. இதை
எப்படி இந்த மொழியில் குறிப்பது?

வரிசை என்பது TR (Table Row) என்பதாகவும் (excel இல் 1, 2, 3
என்று மேலிருந்து கீழாக இருப்பதுபோல்), பத்தி என்பது TD (Table
Data) என்பதாகவும் (excel இல் A B C D என்று இடமிருந்து வலமாக
இருப்பதுபோல்) அமைந்திருக்கும்.

முதலில் ஒரு வரியை எடுத்துக் கொண்டு, அதிலுள்ள பத்திகளை இடமிருந்து
வலமாக எழுத வேண்டும். இவ்வாறாக ஒவ்வொரு வரியிலுள்ள பத்திகளையும்
எழுதி முடிக்க வேண்டும்.

ஒரு வரி கொண்ட ஒரு அட்டவணையைப் எளிதான பார்போம்.

<TABLE border="2">
<TR>
<TD>
Orange
</TD>
<TD>
Apple
</TD>
<TD>
Banana
</TD>
</TR>
</TABLE>

மேற்கண்ட அட்டடவணை TABLE என்ற பட்டியோடு துவங்குகிறது. border="2"
என்ற பண்பு 2 பட தனிமம் அளவிற்கு அதன் ஓரம் அமைந்திருக்க வேண்டும் என்று
காட்டுகிறது. அதன் கீழே <TR> என்பது ஒரு வரியின்(row) துவக்கம் என்று
காட்டுகிறது. அதன் கீழே இருக்கும் <TD> என்பது(Table Data )
பத்தியின் தொடக்கப் பட்டியாக அமையும். Orange என்பது அந்த பத்தியில்
எழுதப் படும் தரவு(data) ஆகும். தொடர்ந்து </TD> என்பது அந்த தரவு
முடிகிறது என்று காட்டுகிரது. இவ்வண்ணமே, Apple, Banana என்ற தரவுகளும்
ஒவ்வொரு <TD> </TD> சோடிகளுக்கு இடையில் அமையும்.

மேலுள்ள பட்டியலை உலவியில் பார்தீர்களானால் புரியும்.

இது அட்டவணையின் துவக்கம்தான். மேலும் பலவற்றை தொடர்ந்து காணலாம்.


குறிப்பு:
இந்த ஆக்கத்தில் வரும் எடுத்துக் காட்டுக்களை உடனடியாக சோதிக்க கீழ்க்கண்ட
வலைத் தலத்திற்குச் செல்லுங்கள்:
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இதில் எடுத்துக் காட்டுக்களை ஒட்டி உடனடடியாக விளைவை (result) காண
முடியும். மேலும், நீங்கள் விரும்பிய மாறுதல்களைச் செய்து சோதிக்கலாம்.
ஒவ்வொரு தடவையும் கோப்பாகச் சேமிக்க வேண்டிய தேவையில்லை.

அவ்வப்போது வரும் எடுத்துக் காட்டுக்களைச் சோதித்துக் காண வேண்டுகிறேன்.
இது மேற்கொண்டு வரும் பகுதிகளை எளிதாக புரிந்து கொள்ள உதவும்

நாம் ஒரு வரியை (row) எடுத்துக் கொண்டு (TR) அதில் எத்தனை
பத்திகள் (column) வேண்டும் (TD) குறிப்பிட வேண்டும்.

<HTML>
<TABLE border="1">

<TR>
<TD>
One
</TD>
</TR>

</TABLE>
<HTML>

மேற்கண்ட எடுத்துக் காட்டில் மொத்தம் எத்னை சதுரங்கள் வரும் என்று
எண்ணுகிறீர்கள்? நீங்கள் எண்ணுவது சரிதான். ஒன்றே ஒன்றுதான்! அதாவது ஒரு
அறை (cell) கொண்ட 'அட்டவணை'. காரணம் <TR> </TR> பட்டிகளுக்கு
இடையே ஒரு <TD> </TD> சோடிதான் உள்ளது. One என்ற வரி, <TD>
</TD> பட்டிகளுக்கு இடையில் இருப்பதால் அது அந்த அறையில்(cell)
அமைந்திருக்கும். மேற்கண்டதை வெட்டி, ஒட்டி விளைவைப் பாருங்கள். மேலும் ஒரு
<TD> </TD> பட்டியைச் சேர்த்து, அவற்றிற்கிடையில் எதாவது ஒரு சொல்லை
இட்டு சோதித்துப் பாருங்கள். (குறிப்பு: <TD> </TD> பட்டிகளுக்கு
இடையில் ஏதாவது எழுத வேண்டும். இல்லையென்றால் இரண்டாவது அறை இருப்பதே
தெரியாது.)

இனி அட்டவணையிலுள்ள தரவுகளுக்கு (data) எவ்வாறு தலைப்பிடுவது என்று
பார்ப்போம்.

பொதுவாக அட்டவணையின் முதல் வரியே (முதல் <TR> </TR>) தலைப்பாக
அமையும். இதில் <TD> </TD> பட்டிகளுக்கு பதிலாக <TH> </TH>
பட்டிகளை இடவேண்டும். TH ஆனது Table Head என்பதைக் குறிக்கும். கீழே
உள்ள எடுத்துக் காட்டைப் பாருங்கள்:

<HTML>
<TABLE border="1">

<TR>
<TH>
This is Heading
</TH>
</TR>

<TR>
<TD>
This cell contains Data
</TD>
</TR>

</TABLE>
<HTML>

தலைப்பானது, தடித்த (bold) எழுத்துருக்களுடன் அறைச் சதுரத்தில் மையப்
படுத்தப் பட்டிருக்கும். தனியாக <B>, <CENTER> பட்டிகளைக் கையாளத்
தேவை இல்லை.

கீழ்க் கண்டதை வெட்டி
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தலத்திற்குச் சென்று ஒட்டி விளைவைப் பாருங்கள். தேவை இருந்தால்
மாற்றம் செய்து சோதித்துப் பாருங்கள்.

<HTML>
<TABLE BORDER="1">
<TR>
<TH>
Date
</TH>
<TH>
Time
</TH>
<TH>
Language
</TH>
</TR>
<TR>
<TD>
24-12-2001
</TD>
<TD>
8:00
</TD>
<TD>
English
</TD>
</TR>
<TR>
<TD>
25-12-2001
<TD>
10:30
</TD>
<TD>
Tamil
</TD>
</TR>
</TABLE>
</HTML>

அட்டவணையில் என்னென்ன பண்புகளைக் கையாளலாம் என்று பார்ப்போம்.

அட்டவணை பண்புகள்:

WIDTH
ALIGN
BGCOLOR
BORDER
CELLSPACING
CELLPADDING

WIDTH - அட்டவணை எவ்வளவு அகலத்தில் இருக்க வேண்டும் என்று குறிப்பது.
இதை, சதவீதத்திலோ அல்லது படத்தனிம அளவிலோ குறிக்கலாம்

ALIGN - (left, center, right) அட்டவணை படிவத்தில் எப்படி அமைய
வேண்டும் என்று குறிப்பது.

BGCOLOR - அட்டவணையின் பின்னரங்க வண்ணத்தை மாற்ற.

BORDER - அட்டவணையைச் சுற்றியிருக்கும் கோட்டின் தடிமன் எவ்வளவு இருக்க
வேண்டும் என்று குறிப்பது.

CELLSPACING - ஒவ்வொரு அறைக்கும் (cell) இடைவெளி எவ்வளவு இருக்க
வேண்டும் என்று குறிப்பது.

CELLPADDING - அறையில் (cell) எழுதப் படும் எழுத்துக்கள் (data)
அறைச் சுவற்றிலிருந்து எவ்வளவு தூரத்தில் இருக்க வேண்டும் என்று குறிப்பது.

இந்தப் <TABLE> பட்டியைப் பற்றி சொல்ல ஆரம்பிக்கும்போது அட்டவணையை
ஏறத்தாழ எல்லா பக்கங்களிலும், தெரியும் படியோ அல்லது தெரியாதவாறோ
பயன் படுத்துகிறார்கள் என்று சொன்னேன். ஒரு பக்கத்தில் உள்ள படங்களை,
எழுத்துக்களை, பத்திகளை ஒழுங்கில் வைக்க அட்டவணை பட்டியைப் பயன்
படுத்துகிரார்கள். BORDER என்ற பண்பில் "0" என்று கொடுத்துவிட்டால்
அட்டவணையைச் சுற்றி இருக்கும் கோடு மறைந்துவிடும். எனவே அது ஒரு அட்டவணை
போல் தெரியாது. Yahoo, Hotmail போன்ற ஏதாவது ஒரு பக்கத்தின்
மூலக் குறியீடுகளை (HTML source) ஊன்றிப் பார்த்தீர்களானால் தெரியும்.

கீழ் உள்ளதை வெட்டி,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இதில் ஒட்டி விளைவைப் பாருங்கள்.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Table without border</title>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td width="33%">To further enable you to locate
the problem, you may start
the Java console (under MSIE or NS). If you're
using Netscape, you'll find
it under the Communicator item in the Netscape
menu (Java Console). Using
MSIE, you'll find it under View (Java Console) in
the MSIE menu. The Java
Console will give you more details than the status
bar, and may help you
find out why the applet will not run. Often, it
will show you that the
applet depends on more than one class file, and
you'll need to upload that
class file to your server as well.
<p>The applet may be written for a newer JDK than
you have on your system.
Most applets will work with MSIE4, and Netscape4
as well, provided you have
applied the latest JDK 1.1 patch from </p>
</td>
<td width="33%">
<p align="center"><font size="7">An Example of
using table to align contents
of a page </font></td>
<td width="34%">
<ol>
<li>First, select the Java applet you would like
to add to your site. Many
of the applets are free with some requiring only
a link back to the
author's site. Others have a link to the
author's site written in them
which can be removed by paying a registration
fee. Still others require a
fee before they can be used.
<p></li>
<li>Download the zip file to a directory on your
computer (make sure you
remember the directory where you downloaded it).
The zip file contains the
necessary files to run the Java applet.
<p>In a few cases, you must download the jar or
class files individually.
Note that in Netscape Communicator, you must
hold down the shift key and
then click the link to download the files. </li>
</ol>
</td>
</tr>
</table>
</body>
</html>

ஒவ்வொரு அறையிலுள்ள தரவுகளை தனித்தனியாக இடப் பக்கமோ,
வலப்பக்கமோ அல்லது நடுவிலோ ஒழுங்கு (ALIGN) படுத்தலாம். left,
right, center, justify முதலான பண்புகளை பயன்படுத்தலாம். மேல்
கீழாக(VALIGN)
baseline, bottom, middle, top முதலான பண்புகளை பயன்படுத்தலாம்.
மேலும் சில நேரம் ஒரே தலைப்பின் கீழ் இரண்டு மூன்று தரவுகள் வரலாம்.
எடுத்துக் காட்டாக, Time என்ற தலைபின் கீழ் AM PM என்ற இரு தரவுகளை
இட நேரிடலாம். இதற்காக இரண்டு அறைகளை ஒன்றாக்க வேண்டும். (Excel
இல் cell merging செய்வது போல்) இடமிருந்து வலமாகவோ அல்லது
மேலிருந்து கீழோ அறைகளை இணைக்கலாம். இதைச் செய்வதற்கு COLSPAN,
ROWSPAN ஆகிய பண்புகளை பயன்படுத்த வேண்டும்.

கீழுள்ள எடுத்துக் காட்டை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கத்தில் ஒட்டி எப்படி தோன்ருகிறது என்று பாருங்கள்.

<HTML>
<BODY>
<TABLE ALIGN="center" BORDER="1" CELLSPACING="1"
CELLPADDING="0" WIDTH="40%">
<TR>
<TH COLSPAN="3" BGCOLOR="#F0F8FF">
Time Table
</TH>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle" rowspan="5"
BGCOLOR="#F5F5DC">
Tution Timings
<TD ALIGN="center" VALIGN="middle">
AM
</TD>
<TD ALIGN="center" VALIGN="middle">
PM
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
8:00
</TD>
<TD ALIGN="center" VALIGN="middle">
4:30
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
11:00
</TD>
<TD ALIGN="center" VALIGN="middle">
7:00
</TD>
<TR>
<TD ALIGN="center" VALIGN="middle">
10:00
</TD>
<TD ALIGN="center" VALIGN="middle">
5:30
</TD>
</TR>
<TR>
<TD ALIGN="center" VALIGN="middle">
10:00
</TD>
<TD ALIGN="center" VALIGN="middle">
8:30
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

மேற்கண்ட எடுத்துக்காட்டில் "Time Table" என்ற தலைப்புக்காக 3 அறைகளை
இடமிருந்து வலமாக சேர்த்திருக்கிறோம். அதை COLSPAN="3" என்பதாக
குறித்திருக்கிறோம். "Tution Timings" என்ற பகுதிக்காக 5 அறைகளை
மேலிருந்து கீழாக சேர்த்திருக்கிறோம்.

ஒவ்வொரு அறையிலும் பின்னரங்கு வண்ணத்தைச் சேர்பதற்கு நாம் முன்பே பார்தது
போல் BGCOLOR என்ற பண்பை பயன்படுத்த வேண்டும்.

இவையன்றி அட்டவணைகும் தலைப்புத் தரலாம். இதற்கு <CAPTION> என்ற
பட்டியைப் பயன்படுத்த வேண்டும். ALIGN என்ற பண்பில் left, right,
top, bottom என தேவையான இடத்தில் தலைப்பைப் பெறலாம். இந்தப்
பட்டியை அட்டவணை பட்டி (<TABLE>) யினுள் எந்த இடத்திலும் பயன் படுத்தலாம்
என்றாலும் <TABLE> பட்டிகு அடுத்து பயன் படுத்தினால் குழப்பம் இருக்காது.

மேலுள்ள அட்டவணையில் இந்தப் பட்டி சேர்க்கப் படவில்லை. நீங்களாகவே
கீழுள்ள வரியைச் சேர்த்து
http://www24.brinkster.com/umarthambi/html_try/view_result.html
வலைப் பக்கத்தில் ஒட்டி சோதியுங்கள்.

<CAPTION ALIGN="middle">My Table</CAPTION>


இனி சில விசேட எழுத்துருக்களைப் பார்ப்போம்.

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

கீழ்க் கண்டதை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கத்தில் ஒட்டி எப்படித் தோன்றுகிறது என்று பாருங்கள்.

<HTML>
<BODY>
I have enough 'spaces' but no
room for them in the browser!
</BODY>
</HTML>

ஒவ்வொரு சொல்லுக்கும் ஒரு இடைவெளியைத் தவிர மற்றவையெல்லம் மறைந்து
போயிருக்கும். அப்படியானால், கூடுதல் இடைவெளியை எப்படிப் பெறுவது?
அதையும் குறியீடு மூலம்தான் பெற வேண்டும். அதைக் குறிக்க &nbsp; என்று
இடவேண்டும். அவைகளை 'non breaking space" என்கிறோம். அதாவது
வரியை முறிக்காமல் இடைவெளி பெறுவது. இந்த குறியீட்டில் முதலில் வரும்
"&" உம் இறுதியில் வரும் ";" (அரைப் புள்ளி) தேவையான ஒன்றாகும்.
கீழ்க் கண்டதை மீண்டும் சோதித்துப் பாருங்கள்.

<HTML>
<BODY>
I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;have&nbsp;&nbsp;&nbsp;enough&nbsp;&nbsp;but
no&nbsp;&nbsp;&nbsp;room
for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;them&nbsp;&nbsp;&nbsp;&nbsp;in
the&nbsp;&nbsp;&nbsp;&nbsp;browser!
</BODY>
</HTML>

மேற்கண்டதில் &nbsp; என்பதை தேவையான இடைவெளிகளைப் பெறுவதற்காக
பயன் படுத்தியிருக்கிறோம்.

அதேபோல் < > களுக்கு இடையில் எழுதப் படும் எழுத்துக்கள் உலவியில்
தோன்றாது. அப்படியொரு நிலை ஏற்பட்டால் &lt; (lt - lesser than)
&gt; (greater than) என்பவைகளை பயன்படுத்த வேண்டும். கீழ்க்
கண்டவைகளை சோதித்துப் பாருங்கள்:

<HTML>
<BODY>
<This line is invisible>
&lt; This is visible &gt;
</HTML>
</BODY>

இவ்வாறே, "Copy Right" சின்னத்தைப் பெறுவதற்கு &Copy; என்பதையும்,
"Ampersand" எழுத்துருவைப் பெற &amp; என்பதையும்,
"Registration" சின்னத்தைப் பெற &reg; என்பதையும் இடவேண்டும்.

குறிப்பு: "Registration" சின்னத்தின் எழுத்துரு எண்(174) தமிழ் "ஈ"
க்காகப் பாவிக்கப் பட்டிருப்பதால் தமிழில் எழுதும்போது "ஈ" தான் கிட்டும்.
அதைப் போலவே, &trade; (trade mark) எழுத்துருவுக்கு(153) "ஙு"
கிட்டும்.

[அரசன்]

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

இனி சில சிறிய விடயங்களைப் பார்ப்போம்:

நீங்கள் பக்கங்களை எழுதும்போது சிறிய
குறிப்புக்களையும்(comments) உங்கள் வசதிக்காக கூடவே எழுத விரும்பலாம்.
ஆனால் அவை உலவியில் தெரியாமல் இருக்க வேண்டுமல்லவா? அதற்கு கீழ்க்
கண்டவாறு குறிக்க வேண்டும்:

<!-- (உங்கள் குறிப்புக்கள் - your comments) --> என்று எழுதவேண்டும்.
<!--, --> இவற்றிற்கிடையே எது எழுதப் பட்டாலும் உலவி
புறக்கணித்துவிடும்.

எழுத்துக்கள் இடமிருந்து வலமாகவோ அல்லது வலமிருந்து இடமாகவோ
ஊர்ந்த்து செல்வதைப் பார்த்திருப்பீணர்கள். இதை IE பயனர் மட்டும் கண்டிருக்க
முடியும், காரணம் Netscape இந்த வசதியைத் தருவதில்லை.

இதன் பண்புகள்:
ALIGN= (LEFT, MIDDLE, BOTTOM)
BEHAVIOUR=(SCROLL,SLIDE,ALTERNATE)
BGCOLOR=(#000000 TO #FFFFFF)
DIRECTION=(LEFT,RIGHT)
HEIGHT=(PIXEL VALUE, %)
VSAPACE=(NUMBER)
LOOP=(NUMBER,INFINITE)
SCROLLAMOUNT=(NUMBER)
SCROLLDELAY(NUMBER)

கீழ்க் கண்டதை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற பக்கத்தில் ஒட்டி சோதித்துப் பாருங்கள்(IE பயனர் அதிட்டசாலிகள்!)

<HTML>
<BODY>
<Font size="+2">
<MARQUEE behavior="slide" direction="right"
bgcolor="#FF88FF"></font>
This Text is sliding to right once
</MARQUEE><p>
<MARQUEE behavior="scroll">
This Text is scrolling
</MARQUEE><p>
<MARQUEE behavior="alternate"bgcolor="#c0c0c0" >
This Text is Alternating
</MARQUEE><p>
<MARQUEE behavior="scroll" scrolldelay="300"
bgcolor="#ffff00">
This Text is scrolling slowly
</MARQUEE>
</HTML>
</BODY>

Netscape பயனர்களும் ஒரு அதிட்டத்தைப் பெற்றிருந்தனர்
(Ver 4.7 இல் இருந்தது. புதிய Ver6 இல் அது இல்லை). "சிமிட்டல்"தான் அது.
IE இல் அது கிடையாது.

இதை சோதித்துப் பாருங்கள்:

<HTML>
<BODY>
<BLINK>
<font color="#FF0000" size ="+3">
I am Blinking!
</font>
</BLINK>
</BODY>
</HTML>

ஒரு கொசுரு: சில நேரங்களில் வேறு பக்கத்திற்குரிய
இணைப்பை(link to other page) தட்டும்போது புதிய
சாளரத்தில்(window) அதைக் காண வேண்டிய தேவை ஏற்படலாம். அதற்கு
இரண்டு வழிகள் இருக்கின்றன. ஒன்று, அந்த இணைப்பின் வலச் சொடுக்குச்
செய்து, கிடைக்கும் பட்டியலில் "open in new window" என்பத்
தேர்ந்தெடுக்கலாம். இரண்டாவது அதைவிட எளிதானது. Shift ஐ அழுத்திக்
கொண்டு அந்த இணைப்பின் மேல் சொடுக்கினால் புதிய சாளரத்தில் அந்த
பக்கம் திறக்கும்.

குறிப்பு:
இந்த ஆக்கத்தில் கையாளப் படும் அறிவியல்/கணினி தமிழ்ச் சொற்களுக்கு
ஆங்கிலப் பதம் வேண்டுவோர் கீழ்க் கண்ட தரவுத் தளத்தில் பெற்றுக்
கொள்லலாம்:
http://www24.brinkster.com/umarthambi/tamil/etamil_search.asp

இந்த மூன்றாவது பகுதியில் மேலும் மேம்பட்ட சில பட்டிகளையும் கட்டளைகளையும்
பார்ப்போம். இவை உங்கள் பக்கத்தை மேலும் மெருகூட்ட உதவும்.

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

இந்த விளைவைப் பெறுவதற்கு நாம் முன்பே கண்ட <IMG> பட்டியுடன் மேலும் சில
புதிய பட்டிகளைக் கையாள வேண்டும். அவையாவன:

<MAP>
<AREA>

முதலில் நாம் கையாளப் போகும் படத்திற்கு <MAP> பட்டியில் ஒரு பெயர்
தரவேண்டும். நீங்கள் விரும்பிய பெயரைத் தரலாம். எடுத்துக் காட்டாக அது
இவ்வாறு இருக்கலாம்: <MAP name= "camera">.

இனி, <IMG> பட்டியில் usemap பண்பு மூலம் அதன் மீது இணைப்பு
இடங்களை(area for hyper links) வரையறுக்கப் பயன்படுத்தப்
போகிறோம் என்பதைக் குறிக்க, usemap="#camera" என்பதைத்
தரவேண்டும் (கவனிக்க:# அடையாளம் தேவையான ஒன்று). பின்னர் <AREA>
என்பதில் நீங்கள் வரையறுக்கப் போகும் வடிவம் எத்தகையது என்றும் அவற்றின்
coordinates (தமிழாக்கம் தேவை) எவை என்பதையும் குறிக்க வேண்டும்.

஠எடுத்துக் காட்டாக ஒரு படத்தின் அளவு 270X200 படத்தனிமம் (pixel)
என்றிருந்தால், அந்தப் பரப்பிலிருந்து எம்மாதிரியான வடிவத்தில் எந்த
இடத்திலிருந்து வரையறுக்கப் போகிறீர்கள் என்று குறிக்க வேண்டும். வடிவங்கள்
மூன்று வகையாக குறிக்கப் படுகின்றன. செவ்வகம் (rect), வட்டம்(circle),
பலகோணம்(polygon) ஆகியனவாகும்.

எடுத்துக் காட்டாக, ஒரு செவ்வகம் என்றால் அதன் படத் தனிம இருப்பிடங்கள்
நாம் பயன்படுத்தும் படத்தில் எங்கெங்கு அமைந்திருக்கின்றன என்று இப்படி
குறிக்க வேண்டும்:

coords="112, 37, 158, 60"

இதில் 112 என்பது அந்த வடிவம் (எடுத்துக் காட்டு: செவ்வகம்) படத்தின் இடப்
புறத்திலிருந்து (x-axis) 112 வது தனிமப் புள்ளியில் தொடங்குகிறது
என்பதையும் 37 என்பது மேலிருந்து கீழ் (y-axis) புள்ளியில்
தொடங்குகிறது என்பதையும், 158 என்பது இடப் புறத்திலிருந்து (x-axis)
158 புள்ளியில் முடிகிறது என்பதையும், 60 என்பது மலிருந்து கீழ்
(y-axis) 60 புள்ளியில் முடிகிறது என்பதையும். குறிக்கிறது. அதாவது,
112, 37 என்பது, start x,y உம் 158, 60 என்பது end x,y உம்
ஆகும்.

மேலும், அந்த வடிவத்தில் சொடுக்கினால் எந்த இணையப் பக்கத்தைத் திறக்க
வேண்டும் என்பதையும் குறிக்க வேண்டும். ஆக, <AREA> பட்டியினுள் shape,
coords, href என்ற மூன்று பண்புகளையும் தர வேண்டும். அது இப்படி
அமையும்:
<AREA shape="rect" coords="112, 37, 158, 60"
href="flash.html">

஠வட்ட வடிவமாக இருந்தால் அதன் நடுப் புள்ளியின் படத்தனிம
இடத்தையும் (x,y coordinates), ஆரத்தின் (radius) அளவையும்
தரவேண்டும். அது இப்படி அமையும்:
<area shape="circle" coords="206, 109, 44
href="lens.html""> இதில் 206, 109 என்பது x, y ஆகவும் 44
என்பது ஆரமாகவும் அமையும்.

பல கோண வடிவமாக இருந்தால் இது இப்படி அமையும்:
<area shape="polygon" coords="87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45 href="grip.html"">
இதில் ஒவ்வொரு சோடிகளும்(87,25 / 114,106 / ....) கோணங்களின்
முனைப் புள்ளிகளாக அமையும்.

கீழே காணும் எடுத்துக் காட்டை ஒரு HTML கோப்பாக சேமித்தோ அல்லது
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தளத்தில் ஒட்டியோ அதன் விளைவைப் பாருங்கள். ஐயம் இருப்பின் அறியத்
தாருங்கள்.
஠

<html>
<head>
<title>Maping image</title>
</head>
<body>
<h1>Camera Parts</h1>
Move your mouse on the picture. You will see "hand
pointer" where the corresponding pages are linked.
<p><MAP name="camera">
<img border="0"
src="http://www24.brinkster.com/umarthambi/html_try/camera.jpg"
usemap="#camera" width="270" height="200">
<area shape="rect" coords="112, 37, 158, 60"
href="http://www24.brinkster.com/umarthambi/html_try/flash.html"
alt="Flash page">
<area shape="circle" coords="206, 109, 44"
href="http://www24.brinkster.com/umarthambi/html_try/lens.html"
alt="Lense page">
<area shape="polygon" coords="87, 25, 114, 106, 116,
171, 50, 177, 44, 106, 53, 45"
href="http://www24.brinkster.com/umarthambi/html_try/grip.html"
alt="Grip page">
<area shape="polygon" coords="168, 32, 250, 42, 252,
62, 208, 51, 174, 58, 165, 57"
href="http://www24.brinkster.com/umarthambi/html_try/vfinder.html"
alt="View finder page">
</body>
</html>


உள்ளிடு படிவம்(Form)

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

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

உள்ளிடும் படிவத் தொடக்கம் என்பதை குறியிட <FORM> என்ற பட்டியைத்
தரவேண்டும். இதில் ACTION, METHOD, TARGET என்ற பண்புகள்
குறிபிடத்தக்கவை. இந்த படிவத்தில் உள்ளீடு செய்வதற்கென கையாளப்படும்
<INPUT> பட்டியில் கீழ்க்கண்ட வெவ்வேறான பண்புகள் கொண்ட உறுப்புக்கள்
அமைந்துள்ளன இவைகளில் குறிப்பிடத்தக்கவை:

TEXT
PASSWORD
CHECKBOX
RADIO
SUBMIT
RESET
BUTTON

இவையன்றி, பட்டியலிடப் பட்டவையிலிருந்து தேர்வு செய்யும்படியான(drop
down list)அமைப்புக் கொண்ட <SELECT> பட்டியும், பல வரிச்
செய்திகளை உள்ளிட <TEXTAREA> என்ற பட்டியும் பயன்படுத்தப் படுகின்றன.
முதலில் மிக எளிமையான ஒரு உள்ளிடும் படிவத்தைக் காண்போம்:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
METHOD="post">
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20">
<INPUT TYPE="Submit" VALUE="Send Form">
</FORM>

</BODY>
</HTML>

மேற்கண்ட<FORM> பட்டியினுள் காணப் படும் ACTION என்ற பண்பு, இந்த
படிவத்தை புரவலருக்கு(server) அனுப்பும்போது என்ன செய்ய வேண்டும் என்று
அறிவிப்பது. METHOD என்பது உள்ளீடுகளை புரவலருக்கு அளிக்கும்போது எந்த
விதத்தில் அளிக்கிறது என்பதைக் குறிப்பதாகும்.

அடுத்து காணப்படும் உள்ளிட உதவும் <INPUT> பட்டியில், நாம் பயன்படுத்தப்
போவது 'உரை'(text) வகையைச் சார்ந்தது என்பதையும் அதற்கு "mytext"
என்ற பெயரையும் இட்டிருக்கிறோம். அடுத்து வரும் உள்ளிடும் வகை "Submit"
எனப்படும் பொத்தானாகும். அந்த பொத்தான் மீது என்ன எழுதப் பட வேண்டும்
என்பதை VALUE பண்புமூலம் கொடுக்கிறோம். இங்கு "Send Form" என்று
கொடுத்திருக்கிறோம். உங்களுக்கு உகந்தநதைக் கொடுக்கலாம். மேற்கண்ட
பகுதியை வெட்டி,
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற பக்கத்தில் ஒட்டி, உள்ளிடும் இடத்தில் பெயரை இட்டு படிவத்டை அனுப்பி
விளைவைப் பாருங்கள்.

ஒன்றை நீங்கள் அவதானித்திருக்கலாம். படிவத்தை அனுப்பப் பயன்படும்
பொத்தான் வரைவடிவமாக(graphical) உலவியில் தோன்றினாலும்
<INPUT> பட்டியில் அப்படியொரு ஆணை இல்லை. ஆனால் TYPE="Submit"
என்பதை உலவி புரிந்து கொண்டு ஒரு பொத்தானை திரையில் தருகிறது. அது
மட்டுமல்ல, அது சொடுக்கப் படும்போது ஆணையையும் புரவலருக்கு அனுப்புகிறது.
இவ்வண்னமே படிவத்தின் ஓவ்வொரு உறுப்பும் வரை வடிவமாகத் தோன்றினாலும்
அவை எல்லாமே பட்டிகளின் துணையால் உருவாக்கப் படுகின்றன. இவற்றில் காணும்
மற்றொரு பொத்தான் வகை "Reset" எனப்படுவது. இது, படிவத்தை மீள்
நிலைக்கு(உள்ளீடுகளை அவை அனுப்பப் படும் முன் அழித்து) கொண்டுவர
உதவுகிறது. "Submit" பொத்தான் வரிக்குக் கீழே இந்த "Reset"
பொத்தான் வரியைச் சேர்த்து சோதிதுப் பாருங்கள்:

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD>
<BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
METHOD="post">
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20">
<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">

</FORM>

</BODY>
</HTML>

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

<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form.asp"
Enter your name here:
<INPUT TYPE="Text" NAME="mytext" size="20"><p>
Select Colour to diplay:<br>
஠<INPUT TYPE="Radio" NAME= "color" VALUE="r">Red<br>
<INPUT TYPE="Radio" NAME="color"
VALUE="b">Blue<br></p>

<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
<BR>
</FORM>

</BODY>
</HTML>

மேற்கண்ட எடுத்துக் காட்டில் உள்ளிடு வகை "Radio" என்பதாகவும், அதன்
பெயர் "color" என்ப்தாகவும் கொடுத்திருக்கிறோம். அவதானிக்க: இங்கு
இரண்டு "ரேடியோ" பொத்தான்களுக்கென இரண்டு வரிகள் இருகின்றன. இரண்டிலும்
பெயர்(NAME) "color" என்றே கொடுத்திருக்கிறோம். காரணம் இரண்டும்
வண்ணங்களை தேர்வு செய்ய பயன்படும் ஒரே குழுவைச்(group) சேர்ந்தவையாகும்.
ஆனால் இரண்டின் மதிப்புக்களும் r , b என வெவ்வேறாகக் கொடுக்கப்
பட்டுள்ளன. எனவே ஏதாவது ஒன்றைத்தான் தேர்வு செய்ய இயலும். மேலும்
இவற்றில் ஏதாவது ஒன்று தொடக்கத்திலேயே தேர்வு செய்யப் பட்டிருக்க
வேண்டுமானால் checked என்ற பண்பையும் அந்த பட்டியினுள் சேர்த்து விட்டால்
போதும்.

மேற்கண்ட பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற தலத்தில் ஒட்டி விளைவைப் பாருங்கள். தேவையானால் மாற்றங்கள் செய்து
சோதித்துப் பாருங்கள்.

சென்ற முறை நிகழ்ந்த தவறைக் கண்டுபிடித்துவிட்டீர்களா?
<FORM> பட்டியின் முடிவு அடைப்புக் குறி (>) விடுபட்டுப் போய்விட்டது.
மேலும் METHOD பண்பும் குறிக்கப் படவில்லை.

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

<INPUT TYPE="checkbox" name="chkbox">With sugar

இதில் உள்ளிடு வகை "checkbox" என்று குறிப்பிட்டிருக்கிறோம்.
"chkbox" என்று பெயருமிட்டிருக்கிறோம். With sugar என்று எழுதப்
பட்டிருப்பது, சதுரப் பெட்டி குறியிடப் பட்டிருந்தால் "இனிப்பு வேண்டும்"
என்பதைக் குறிப்பதற்காக. புரவலர் இந்தக் குறியீட்டை அறிந்து கொண்டு
தேவையான செயலை ஆற்றும்.

பல நேரங்களில் பயனர் பெயரைம் கடவுச் சொல்லையும் உள்ளிடுமாறு கேட்கும்
படிவங்களைக் கண்டிருப்பீர்கள். கடவுச் சொல் உள்ளிடு புலம் (Password
Input Field) உரைப் புலம்(Text field) போலென்றாலும், பாதுகாப்புக்
கருதி உள்ளிடப்படும் கடவுச் சொல்லை பிறர் காணாமலிருக்க திரையில்
ஒவ்வொரு எழுத்தும் ஒரு குறியீடாகக் காட்டப் படும். இவ்விரண்டும் எவ்வாறு
செயல்படுகிறதென்று அறிய
கீழே காணும் பட்டியலை
http://www24.brinkster.com/umarthambi/html_try/view_result.html

என்ற தளத்தில் ஒட்டி சோதிதுப் பாருங்கள்:

HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>

<FORM
ACTION="http://www24.brinkster.com/umarthambi/html_try/my_form1.asp"
METHOD="post">
<pre>
Enter your name:<INPUT TYPE="Text" NAME="mytext"
size="20"><br>
Enter your password:<INPUT TYPE="password"
NAME="pword" size="20">
</pre>
஠<p><INPUT TYPE="checkbox" name="chkbox"
Value="Yes">Display Password>
</p>

<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
<BR>
</FORM>

</BODY>
</HTML>

[அரசன்]

எழுதப் பழகுவோம் எச் ரி எம் எல்
பகுதி 6
தேர்வு செய்ய வேண்டியவற்றில் ஒன்றை மட்டும் தேர்வு செய்ய ரேடியோ
பொத்தான் உதவினாலும் பட்டியல் நீளமாக இருந்தால் அது பயன் தராது. எனவே
"drop down" எனப்படும் 'தொங்கு பட்டியலை' பயன்படுத்த நேரிடும்.
இதில் ஒரு முதன்மை பட்டியும் ஒரு உறுப்புப் பட்டியும் உண்டு. இந்த உள்ளிடு வகை
கொடுக்கப் பட்ட பட்டியலிலிருந்து தேர்வு செய்யப் படும் வகை என்பதைக்
குறிக்க <SELECT> என்ற பட்டியைப் ப்யன் படுத்த வேண்டும். NAME என்ற
பண்பில் நீங்கள் விரும்பிய பெயரைத் தரலாம். <SELECT> </SELECT>
சோடிகளுக்கிடையில் வருவது பட்டியலில் வரும் உர்ப்படிகளாகும். ஒவ்வொரு
உருப்படிகளையும் குறிக்க <OPTION> என்ற பட்டியைப் பயன்படுத்த வேண்டும்.
நான் Apple, Orange, Banana என்பவைகளைப் பட்டியலிட வேண்டுமானால்
அதை இவ்வாறு தரலாம்:

<SELECT NAME="Fruit">
<OPTION>Apple</OPTION>
<OPTION>Orange</OPTION>
<OPTION>Banana</OPTION>
</SELECT>

படிவத்தில் கையாளப் படும் இன்னொரு உள்ளிடு வகை, TEXTAREA எனப்படும்
உரை உள்ளிடு வகை. நாம் முன்பு கண்ட Text Box என்பதற்கும் இதற்கும் உள்ள
வேறுபாடு, முந்தயது பெயர், காவுச் சொல் போன்ற ஒற்றை வரி உள்ளீடுகளை
தருவதற்கு உகந்ததாகும். இந்த இரண்டாம் வகை, உரை நடை எழுதுவதுபோல் பல
வரிகளை எழுதலாம். பயனர்களிடமிருந்து கருத்துரைகள் போன்ற நீண்ட
உள்ளீடுகளைப் பெற இது உதவும்.

இதில்,

NAME
ROWS
COLS
WRAP - (off, virtual, physical)
READONLY

என்ற பண்புகள் அடக்கம். எடுத்துக்காட்டாக, 30 எழுத்துக்கள் அகலமும்
மூன்றுவரிகளும் கொண்ட உரை வகை உள்ளீடு இப்படி அமையலாம்:

<TEXTAREA NAME="comment" ROWS="3" COLS="30"
WRAP="virtual">
</TEXTAREA>

தொழில் முறை வலைத் தலங்கள் கொண்டோ ருக்குத்தான் படிவங்கள் மிகுந்த
பயனளிப்பவையாக இருக்கும் என்று கண்டோ ம் என்றாலும் சொந்த வலைப் பக்கம்
கொண்டோ ருக்கு ஒரு சில நேரங்களில் ப்யனளிக்கலாம். அவற்றில் ஒன்று,
பிறரை படிவத்தை நிரப்பச் செய்து மின்னஞ்சல் பெறுவது. ஒரு எடுத்துக்
காட்டைப் பார்ப்போம். இன்று நாம் கண்ட இரு உள்ளிடு வகைகளையும் இதில்
இணைத்திருக்கிறேன். கீழ்க் கண்ட பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
என்ற பக்கத்தில் ஒட்டி நீங்கள் விரும்பிய தேர்வினைச் செய்து, உங்கள்
குறிப்புக்களையும் இட்டு அனுப்பிப் பாருங்கள். csd_one@yahoo.com என்ற
முகவரிக்கு பதிலாக உங்கள் முகவரியை இட்டு உங்களுக்கு வருகிறதா என்று
சோதிதுப் பாருங்கள்.


<HTML>
<HEAD>
<TITLE>My form</TITLE>
</HEAD><BODY>
<FORM ACTION="mailto:csd_one@yahoo.com" METHOD="post"
enctype="text/plain">
Enter your name:<INPUT TYPE="Text" NAME="Name"
size="20"><p>
Favorite game:
<SELECT NAME="Interest">
<OPTION>Food ball</OPTION>
<OPTION>Cricket</OPTION>
<OPTION>Hocky</OPTION>
</SELECT>
<p>
Enter your notes here:<br>
<TEXTAREA NAME="Message" ROWS="5" COLS="40"
WRAP="virtual">
</TEXTAREA>
<p>
<INPUT TYPE="Submit" VALUE="Send Form">
<INPUT TYPE="Reset" VALUE="Reset Form">
</FORM>
</BODY>
</HTML>


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

எடுத்துக் காட்டு: யாஹூ மின்னஞ்சல் பக்கம்.

இம்மாதிரியான அமைப்பு இரண்டு சட்டங்களைக்(frames) கொண்ட பக்கமாக
அமைக்கப் பட்டிருக்கின்றன. இரண்டு சட்டங்களும் ஒரே பக்கத்தில்
அமைந்திருந்தாலும் உண்மையில் இரண்டு பகுதிகளும் தனித்தனியான பக்கங்களே!
இந்த பக்கங்களை ஒரே இடத்தில் தோன்ற வைக்க உதவுவது <FRAMESET>,
<FRAME> ஆஇய பட்டிகளின் வேலையாகும்.

<FRAMESET> என்ற பட்டி, அந்தச் சட்டங்கள் திரையில் எப்படித் தோன்ற
வேண்டும் என்பதையும், <FRAME> என்ற துணைப் பட்டி அச்சட்டங்களில் என்ன
தோன்ற வேண்டும் என்பதையும் குறிக்கும்.

<FRAMESET> என்ற பட்டியில் கீழ்க் கண்ட பண்புகள் குறிக்கபடும்:
சட்டங்கள் இட, வலமாக இருக்க வேண்டுமானால் COLS (column)
என்பதாகவும், மேல் கீழாக இருக்க வேண்டுமானால் ROWS என்பதாகவும் குறிக்க
வேண்டும். மேலும் ஒவ்வொரு சட்டமும் எவ்வளவு படத் தனிமம்(pixel) அல்லது
திரையின் அளவில் எத்தனை வீதம் (%) இருக்க வேண்டும் என்பதையும்
குறிக்கவேண்டும். இவ்விரண்டில் திரையின் வீதத்தில் குறிப்பதே பாதுகாப்பான
வழியாகும். நீங்கள் எண்ணிய விளைவை ஒரேமாதிரியாக எல்லக் கணிகளிலும்
உருவாக்கும். எடுத்துக்காட்டாக, நீங்கள் உண்டாக்கும் சட்டப் பக்கம் திரையில்
சரி பாதியாகத் தெரிய வேண்டும் என்று எண்ணினால் இப்படித் தரலாம்:

<FRAMESET COLS="50%,50%"> (இட, வலம்)
<FRAMESET ROWS="50%,50%"> (மேல், கீழ்)
இம்மாதிரி எத்தனை பகுதிகளாகவும் பிரித்துக் கொள்ளலாம். மேலும், ஒரு
பகுதியை குறித்து விட்டு மீதியை அடுத்த சட்டத்திற்காக எனும் வகையில் '
* ' குறியிட்டு விடலாம்.

அடுத்து அந்த்தச் சட்டங்ககளில் என்ன தோன்ற வேண்டும் என்பதைக் குறிக்க
வேண்டும். <FRAME> என்ற பட்டியில் கீழ்காண்ட பண்புகளைக் குறிக்கலாம்:

NAME (சட்டத்தின் பெயர்)
FRAMEBORDER (0-இல்லை, 1-உண்டு)
SCROLLING (yes, no auto)
NORESIZE(சட்டத்தின் அமைப்பை மாற்ற முடியாமை)

எடுத்துக் காட்டு:
<FRAME NAME="frame1" FRAMEBORDER="1" SCROLLING="auto">
இதில் NORESIZE என்று இட்டால் சட்டதின் அமைப்பை மாற்ற இயலாது.
NORESIZE இடாவிட்டால் அடிப்படையில் பயனர், சட்டத்தின் அமைப்பை
மாற்றும் வண்ணமே இருக்கும்.

கீழ்க் காணும் பட்டியல் ஒரு சட்டப் பக்கத்தை உருவாக்கும் மீயுரைமொழி
குறியீடுகளாகும். இதில் "mnulist" என்ற சிறிய சட்டமும் "instruct"
என்ற பெரிய சட்டமும் இருக்கின்றன. இவற்றில் முறையே "Menu.htm",
"Instruct.htm" ஆகிய பக்கங்கள் இணைக்கப் பட்டிருக்கின்றன.

Framepage.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>FrameDemo</title>
</head>
<frameset cols="20%,*">
<frame src="Menu.htm" scrolling="no" name="mnulist"
noresize target="_self">
<frame src="Instruct.htm" name="instruct"
scrolling="auto">
</frameset>
</html>

கீழ்க்காணும் இரண்டு பட்டியல்களும் சட்டப் பக்கத்தில் முறையே, இடது, வலது
புறங்களில் காணப் படுபவையாகும். இம்மூன்றையும் தனித் தனியே கொடுக்கப்
பட்டிருக்கும் பெயரில் சேமித்துக் கொள்ளவும். இம்மூன்றும் ஒரே இடத்தில்
(directory) சேமிக்கப் பட்டிருக்க வேண்டும். உலவியில்
framepage.htm என்பதைத் திறந்து பாருங்கள். இணைய இணைப்பு(internet
connection) இருக்கும்போது இடது புறம் இருக்கும் "Menu" வைச்
சொடுக்கிப் பாருங்கள். மூன்றையும் HTML கோப்புக்களாகச் சேமிப்பதில்
சிரமம் ஏற்பட்டால், இங்கே தட்டவும்:
http://www24.brinkster.com/umarthambi/html_try/framepage.htm

menu.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Menu</title>
</head>
<body text="#000000" bgcolor="#FFFF00">
<p>
<a target="instruct"
href="http://www24.brinkster.com/umarthambi/tamil/ETamil_search.asp">
1. Tamil Database</a></p>
<p><a target="instruct"
href="http://www.pathcom.com/~mahend">2. Mahen's Ezil
Nila</a></p>
<p><a target="instruct"
href="http://www.kalanjyam.5u.com/">3. Manju's
Kalanjyam</a></p>
</body>
</html>


instruct.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Click on the Menu Item</title>
</head>
<body>
<div align="center">
<center>
<table border="50" cellpadding="0" cellspacing="0"
width="365" height="289" id="AutoNumber1"
style="border-collapse: collapse">
<tr>
<td width="365" height="289" bgcolor="#C8C8C8">
<p align="center"><font size="6"
face="Verdana">Click on the Menu Item(left) to display
respective web pages</font></td>
</tr>
</table>
</center>
</div>
</body>
</html>

குறிப்பு:
வேலைப் பலுவின் காரணமாக ஒரு சிறு இடைவெளிக்குப் பின் இத்தொடர்
தொடர்கிறது.
இந்தப் பகுதியில் இடம் பெற்றிருக்கும் எடுத்துகாட்டுக்கள் IE4 அல்லது அதற்கு
மேலுள்ள உலவியில் செயல்படும். Netscape 4.7 இல் styles
தொழில்படுவதில்லை. Ver6 பயன்படுத்துபவர்கள் இதன் செயல்பாடுகளைக் காண
முடியும்.

இதுவரை, நாம் பார்த்து வந்த பகுதிகளில் உங்களது "இல்லப் பக்கம்"
எழுதுவதற்கேனும் உதவும் அடிப்படையான மீயுரைகுறிமொழி பட்டிகளைக்
கண்டோ ம். என்றாலும் அதற்கு மேலும் பக்கங்களுக்கு "துடிப்பூட்ட" பல வழிகள்
கையாளப் படுகின்றன. இவற்றிற்கு "script" எனப்படும் ஆணைத்
தொகுப்புக்கள் பெரிதும் உதவுகின்றன. HTML இல் மேம்பாடு செய்யப்பட்டதாக
Dynamic Hyper Text Markup Language எனப்படும் DHTML
உருவெடுத்தது. 'script' களில் காணப்படும் சில செயல்பாடுகளை தன்னகத்தே
கொண்டும் சில மெருகூட்டும் விளைவுகளைத் தரும்படியாகவும் செய்யபட்டுள்ளது.
இந்த இறுதிப் பகுதியின் நோக்கம், DHML பற்றியும் Script முழுமையாக
கற்றுத் த்ருவதல்ல என்றாலும் அவ்வாறான சிலவற்றைக் காண்பதும் மற்றும் உங்கள்
பக்கங்கள் சிறக்க உதவும் வேறு சில விடயங்களைத் தருவதுமாகும்.

HTML படிவத்தில் உள்ள பல்வேறு அங்கங்களை தனித்தனியே அணுகி, அவற்றின்
பண்புகளை மாற்ற உதவும் DOM (document object model) எனப்படும் ஓர்
அமைப்பும் CSS(cascade style sheet) எனப்படும் ஓரமைப்பும் DHTML
இன் முக்கியமான அங்கங்களாகும்.

DHTML இன் இயக்கத்தை அறிய கீழே காணும் ஓர் எளிய எடுத்துக் காட்டை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
பக்கதில் ஒட்டி சோதிதுப் பாருங்கள்:

<html>
<body>

<H2 onmouseover="style.color='magenta'"
onmouseout="style.color='blue'">
Roll mouse over this text</H2>
This is an example for DHTML effect

</body>
</html>

இதில் onmouseover, onmouseout என்ற இரு நிகழ்வுகள்(events)
இருக்கின்றன. H2 என்ற அங்கத்தின் எழுத்துக்களை முறையே செந்நீல
வண்ணத்திலும், நீல வண்ணத்திலும் அமையுமாறு இவ்விரு நிகழ்வுகளும் தரும்.
'எலி' யை சொற்றொடர் மீது வைக்கும்போது
"style.color='magenta'" என்ற ஆணை, அச்சொற்றொடரை செந்நீல
வண்ணத்திற்கு மாற்றவும், 'எலி' யை சொற்றொடரை விட்டு விலக்கும்போது
"style.color='blue" என்ற ஆணை சொற்றொடரை நீல வண்ணத்திற்கு
மாற்றவும் உதவுகிறது. கவனத்தில் கொள்ளுங்கள்: மேற்கண்ட ஆணைகள் <H2>
என்ற அங்கத்திற்கு மட்டுமே பொருந்துமாறு அந்த பட்டியினுள்ளேயே
இடம்பெறிருக்கிறது.

கீழ்க்கண்ட வெவ்வேறான நிகழ்வுகளை தகுந்த இடங்களில் கையாண்டு தேவையான
விளைவுகளைப் பெறலாம்.

இடப்புறத்தில் நிகழ்வின் குறியீடும் வலப் புறத்தில் அவை எப்போது நிகழும்
என்பதையும் காணலாம்:
onabort - User aborted page loading
onblur - User left the object
onchange - User changed the value of an object
onclick - User clicked on an object
ondblclick - User double clicked an object
onfocus - User made an object active
onkeydown - When a keyboard key is on its way down
onkeypress - When a keyboard key is pressed
onkeyup - When a keyboard key is released
onload - Page finished loading
onmousedown - User pressed a mouse-button
onmousemove - Cursor moving on an object
onmouseover - Cursor moved over an object
onmouseout - Cursor moved off an object
onmouseup - User released a pressed mouse-button
onreset User resets a form
onselect - User selected content of a page
onsubmit - User submitted a form

STYLE ஐ பயன்படுத்துவதன் மூலம் எவ்வாறு எளிதாக ஒரு பத்தியின் அல்லது
எழுத்துருவின் சிறப்புத் தன்மையை மாற்றலாம் என்று காண்போம்.

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

<HTML>
<HEAD>
<STYLE type="text/css">
B {color:red}
</STYLE>
</HEAD>
<BODY>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
</BODY>
<HTML>

மேற்கண்ட பகுதியை
http://www24.brinkster.com/umarthambi/html_try/view_result.html
இல் ஒட்டி சோதனை செய்து பாருங்கள். எல்லா தடித்த(bold) எழுத்துக்களும்
சிவப்பு வண்ணத்தில் காணப் படும். அவற்றை நீல நிறத்தில் மாற்ற
வேண்டுமானால் B {color:red} என்பதில் red க்கு மாற்றாக blue ஐ
போட்டுவிட்டால் போதும் எல்லா எழுத்துக்களும் நீல வண்ணத்தில் மாறிவிடும்.
இம்மாதிரியே எழுத்துரு வகையையும்(font family) மாற்றிக் கொள்ளலாம்.
பத்திகளின் பின்னரங்கை மாற்றுவது, சுற்றுக்கோடிடுவது என்பவையும் சாத்தியம்.


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

<HTML>
<HEAD>
<STYLE type="text/css">
H2{text-align:center;border: medium double purple;}
B {color:red}
P {background-color: lime}
HR {color:magenta}
</STYLE>
</HEAD>
<BODY>
<H2>Example</h2>
In this example, <b>bold</b> letters are seen in red.
<b>Style sheets</b> are very useful where you want do
<b>changes</b> in your pages frequently.
<hr>
<P> This paragraph has yellow<br>
Background.</P>
</BODY>
<HTML>

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

முதலிரண்டு வகைகளைக் கண்டோம். இனி, தனி கோப்பில் எவ்வாறு கையாளுவது
என்பதையும் அதன் பயன்பாடுகளையும் அடுத்த பகுதியில் காண்போம்.

[malan]

HTMள் கற்கலாம் வாங்க

இது மிகவும் பயனுள்ள, எளிதாக புரியும் படியான விளக்கம்.

மிக்க நன்றி.

[பையன்]

இது மிகவும் இலகுவாக இருக்கிறதே. மேலும் தொடருங்கள். இதுபோல் நிறைய பாடங்கள் நடத்துங்கள். கற்கத்தான் நான் வந்துவிட்டேனே!

[srimariselvam]

மூர்த்திசார் ஏழோட நிறுத்திடாதீங்க. இன்னும் நிறைய சொல்லித்தாங்க.

[kavitha]

முழுவீச்சில் ஒட்டி?!!! புதியதாய்க்கற்பவர்களுக்கு நிச்சயம் பயன்படும்.

[சூரியன்]

தொடரட்டும் உம் முயற்சி

[விகடன்]

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

[அக்னி]

பயனுள்ள திரியின் பகிர்வுக்கு நன்றி...

[தங்கவேல்]

வெகு நல்ல பதிவு...வாழ்த்துக்கள். அப்புறம் எனக்கு ஒரு ச ந்தேகம். எலியை நகர்த்தும் போது நேரம் காட்டுவது போல எப்படி அமைப்பது. விளக்க முடியுமா ?

[விகடன்]

வெகு நல்ல பதிவு...வாழ்த்துக்கள். அப்புறம் எனக்கு ஒரு ச ந்தேகம். எலியை நகர்த்தும் போது நேரம் காட்டுவது போல எப்படி அமைப்பது. விளக்க முடியுமா ?

பேசாமல் அதன் வாலில் ஒரு மணிக்கூட்டை கட்டிவிடுங்களேன்:sport-smiley-018:

[ஆர்.ஈஸ்வரன்]

வெகு நல்ல பதிவு...வாழ்த்துக்கள். ரொம்ப நாட்களாகத் தேடிக்கொண்டிருந்தேன். இன்றுதான் சிக்கியது என் கண்களிடம்.

[palanivel]

பதியதாய் கற்பவர்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும்.... நானும் புதியவன் தான். எனக்கும் நல்ல பயனுள்ளதாக இருக்கிறது.. வாழ்த்துக்கள் . மேலும் ஒரு சிறிய ஐயம்.. . ஒரே படத்தில் வெவ்வேறு வலைப்பங்களுக்கு இணைப்பு கொடுக்க பிக்சல்களின் அளவை அளவுகளின் விகிதத்தை x,y அச்சுகளிலிருந்து எவ்வளதூரம் இருக்கிறது என்பதை எவ்வாறு கண்டறிவது...(அதாவது பிக்சலகளின் அளவை எவ்வாறு கண்டறிவது).?

[thangamani80]

நன்று.வாழ்த்துக்கள்.

[புதியவன்]

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

[நாஞ்சில் த.க.ஜெய்]

பதியதாய் கற்பவர்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும்.... நானும் புதியவன் தான். எனக்கும் நல்ல பயனுள்ளதாக இருக்கிறது.. வாழ்த்துக்கள்

[rvijaychandar]

நன்றி