Table of Contents

HTML 2

HTML tags 2

Paragraph Tag: 3

align attribute: 7

Line Break tag 8

Headings tag 10

Bold & Italic tags 11

Big & Small tags 12

Font tag 13

Strike Superscript & Subscript tags 14

Preservative tag 15

Lists 17

Combined Lists 19

Tables 19

Border, height & width attributes 21

Background colour attribute 22

Links 23

Internal Links 26

External Links 28

Frames 30

<frameset> tag 30

<noframes> tag 30

<frames> tag 30

Forms 32

<form> tag 32

<input> tag 33

Text box 33

Radio button 33

Checkboxes 34

Submit & Reset buttons 35

<select> tag 35

<textarea> tag 36

HTML5 38

Attributes 38

Events 38

Web Forms 38

SVG 38

MathML 38

Web Storage 38

Web SQL Database 38

Server sent events 38

Web sockets 38

Canvas 38

Audio & Video 38

Geolocation 38

Microdata 38

Drag & Drop 38

Web workers 38



HTML


Hyper Text Markup Language என்பதே HTML என்றழைக்கப்படுகிறது. இது ஒரு் அழகிய வலைதளத்தை உருவாக்கப் பயன்படும் மொழி ஆகும்.


HTML மொழியைப் பயன்படுத்தி gedit-ல் உருவாக்கப்படும் program-ஆனது .html எனும் பெயருடன் சேமித்து வைக்கப்படும். பின்னர் இது browser-ல் open செய்யப்படும்போது ஒரு் அழகிய வலைதளமாக வெளிப்படும்.


gedit-ல் கொடுக்கப்படும் சாதாரண text-ஆனது ஒருசில tags-வுடன் இணைந்து hypertext-ஆக மாறுகிறது. இந்த hypertext மூலமாக browser-க்குக் கட்டளைகளைப் பிறப்பிப்பதே markup எனப்படும். இதுவே Hyper Text Markup Language எனும் பெயர் உருவாவதற்கான காரணம் ஆகும்.

HTML tags


ஒரு் html program-க்குத் தேவையான அடிப்படை tags பின்வருமாறு:


<html> - முதன்முதலில் கொடுக்கப்படும் இந்த tag-ஆனது browser-க்கு இது ஒரு் html program என்பதை உணர்த்துகிறது.


<head> - அடுத்ததாக உள்ள இந்த tag-ஆனது browser-ன் தலைப்பை அமைக்கப் பயன்படுகிறது.


<title> - head-ஐத் தொடர்ந்து வரும் title எனும் tag-க்குள் அமையும் வார்த்தைகளே வலைதளத்தின் தலைப்பாக அமைகிறது. </title> எனும் tag தலைப்பு வார்த்தை முடிவுற்றதை உணர்த்துகிறது. இதன் பின்னர் </head> எனும் tag-ஐயும் நாம் முடித்துக் கொள்கிறோம்.

குறிப்பு: தலைப்பினை நீங்கள் கொடுத்தாலும், கொடுக்காமல் போனாலும், இத்தகைய tags-ஐ ஒவ்வொரு html program-லும் பயன்படுத்த வேண்டும்.


<body> - வலைதளத்தில் இடம்பெற வேண்டிய மொத்த சாராம்சமும் இந்த tag-க்குள் தான் அமையும். </body> எனும் tag வலைதளத்தில் இடம்பெற வேண்டியவை முடிவுற்றதை உணர்த்துகிறது.


இறுதியாக அமைந்துள்ள </html> எனும் tag, program முடிவுற்றதை browser-க்கு உணர்த்துகிறது.


இது போன்று <html></html>,<title></title>,<head></head>,<body></body> போன்ற ஒவ்வொரு tag-ம் /-ஐத் தொடர்ந்து அதே வார்த்தைகளைப் பெற்று முடிக்கப்படுவதை இணை tags அல்லது ஜோடி tags என்பர். html-ல் இடம்பெறும் ஒவ்வொரு tag-க்கும் இணை tag என்றொன்று இருக்க வேண்டிய அவசியமில்லை. இவை இல்லாமலும் ஒருசில tags உள்ளது.


இப்போது இத்தகைய tags-ஐப் பயன்படுத்தி gedit-ல் உருவாக்கப்பட்ட ஒரு program-ஐ பின்வரும் படத்தில் காணலாம்.


இந்த sample.html எனும் program, firefox browser-ல் open செய்யப்படும்போது அது பின்வருமாறு அமைகிறது. இதில் title tag-க்குள் கொடுக்கப்பட்ட Rhymes எனும் வார்த்தை browser-ன் தலைப்பாக "Rhymes – Mozilla Firefox” என்று அமைவதை கவனிக்கவும். பின்னர் body tag-க்குள் கொடுக்கப்பட்டவை content-ஆக வெளியாகி உள்ளது.


Paragraph Tag:


பத்திகளை வெளிப்படுத்த உதவும் p tag-ன் முக்கியத்துவத்தை அறிந்து கொள்ள பின்வருமாரு மூன்று பத்திகளை body tag-க்குள் அடித்து அதனை browser-ல் திறந்து பார்க்கவும்.









இதில் body tag-க்குள் உள்ளவை browser-ல் வெளிப்பட்டுள்ளது. ஆனால் அதே வடிவில் paragraph-ஆக அவை வெளிப்படவில்லை. ஏனெனில் body tag-க்குள் உள்ளவை browser-ல் வெளிப்படவேண்டும் என்பது மட்டுமே இங்கு கட்டளை. அவை paragraphs-ஆக வெளிப்படவேண்டும் எனும் கட்டளையை அளிக்கவே இந்த <p> tag பயன்படுகிறது.


இப்போது <p> tag-ஐ ஒவ்வொரு பத்தியின் ஆரம்பத்திலும், அதனுடைய இணை tag-ஐ பத்தியின் முடிவிலும் அமைத்து program-ஐ பின்வருமாறு மாற்றவும்.



இப்போது பத்திகள் browser-ல் வெளிப்படுவதைக் காணலாம்.


align attribute:

இந்த align எனும் attribute, <p> tag-வுடன் இணைக்கப்படும்போது, அவை பத்திகளை browser-ல் எந்தப் பக்கத்தில் வெளிப்படுத்த வேண்டும் என்பதை உணர்த்தப் பயன்படுகிறது. இந்த align attribute-க்கு அளிக்கப்படும் மூன்று விதமான மதிப்புகளைப் (left, right, center) பொருத்து, அவை பத்திகளை இடதுபுறத்திலோ, வலதுபுறத்திலோ அல்லது மத்தியிலோ வெளிப்படுத்தும். இது பின்வருமாறு.






Line Break tag

அடுத்தடுத்த வரிகளை வெளிப்படுத்த உதவும் br tag-ன் முக்கியத்துவத்தை அறிந்து கொள்ள பின்வருமாரு தொடர்ச்சியான வரிகளை body tag-க்குள் அடித்து அதனை browser-ல் திறந்து பார்க்கவும்.







இங்கும் body tag-க்குள் உள்ளவை browser-ல் வெளிப்பட்டுவிட்டது. ஆனால் அவை அடுத்தடுத்த வரிகளாக வெளிப்படவில்லை. இவை அடுத்தடுத்த வரிகளாக வெளிப்படவேண்டும் எனும் கட்டளையை அளிக்கவே இந்த <br> tag பயன்படுகிறது.


இப்போது <br> tag-ஐ ஒவ்வொரு வரியின் இறுதியிலும் அமைக்கவும். இதற்கு இணை tag இல்லை.



இப்போது browser- ல் இவை அடுத்தடுத்த வரிகளாக வெளியாவதைக் காணலாம்.



Headings tag

ஒருசில வார்த்தைகளை தலைப்பாக அமைக்க விரும்பினால், அந்த வார்த்தைகளுக்கு முன்னும் பின்னும் headings-க்கான இணை tags-ஐப் பயன்படுத்தலாம்.

<h1>, <h2>, <h3>, <h4>, <h5> மற்றும் <h6> எனும் 6 வகை headings tags உள்ளன. இவை முறையே தலைப்புகளின் அளவினை கொஞ்சம் கொஞ்சமாக குறைத்துக் கொண்டே வரும். இது பின்வருமாறு.






இங்கு History of India என்பது மிகப்பெரிய தலைப்பாகவும், அதனடியில் உள்ள Prehistoric era என்பது கொஞ்சம் பெரிய தலைப்பாகவும், அதனடியில் உள்ள Stone Age, bronze Age என்பவை சிறிய தலைப்புகளாகவும், h1, h2.h3,h4 என்பதற்கேற்ற வகையில் வெளிப்பட்டுள்ளன.

Bold & Italic tags

ஒருசில வார்த்தைகளை/வரிகளை bold-ஆக காட்டுவதற்கு <b> tag-ம், சாய்வெழுத்துக்களாகக் காட்டுவதற்கு <i>-ம் பயன்படுகிறது. இவை இணை tags-ஐப் பெற்றிருக்கும். எனவே இவற்றை நாம் விரும்பிய வார்த்தைகளுக்கு முன்னும் பின்னும் இணைத்தால், அவை bold-ஆகவும், சாய்வெழுத்துக்களிலும் வெளிப்படும். இது போன்றே <u>,</u> எனும் tag வார்த்தைகளை அடிக்கோடிட உதவும். இவை பின்வருமாறு.




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


Big & Small tags

சாதாரண அளவைவிட சற்று பெரிய அளவில் எழுத்துக்களை வெளிப்படுத்த <big> எனும் tag-ம், சாதாரண அளவைவிட சற்று சிறிய அளவில் எழுத்துக்களை வெளிப்படுத்த <small> எனும் tag-ம் பயன்படுகிறது. இது பின்வருமாறு.



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

Font tag

எழுத்துக்களின் அளவு, நிறம் மற்றும் அதன் வடிவத்தைக் குறிப்பிட <font> tag பயன்படுகிறது. இவற்றிற்காக முறையே size, colour மற்றும் face போன்ற attributes இவற்றுடன் பயன்படுத்தப்படுகின்றன. இவை மூன்றில் நாம் எதைக் குறிப்பிட விரும்புகிறோமோ, அந்த attribute-font tag-வுடன் சேர்த்துக் குறிப்பிடலாம் அல்லது இவை மூன்றையும் ஒரே நேரத்திலும் குறிப்பிடலாம். இது பின்வருமாறு.




இங்கு முதல் வரி பச்சை நிறத்தில் வெளிப்பட வேண்டும் என்று மட்டும் கொடுக்கப்பட்டுள்ளது. இரண்டாவது வரியின் அளவு 5-ஆக இருக்க வேண்டும் என்று கொடுக்கப்பட்டுள்ளது. மூன்றாவது வரியில் எழுத்துக்கள் நீல நிறத்திலும், 12 அளவிலும், Arial எழுத்துக்களாகவும் வெளிப்பட வேண்டும் என்று மூன்று attributes-ம் கொடுக்கப்பட்டுள்ளது. எனவே இதன் வெளிப்பாடு பின்வருமாறு இருக்கும்.



Strike Superscript & Subscript tags

ஒரு சொல்லை எழுதிவிட்டு பின்னர் அதனை ஒரு கோடால் அடிப்பதற்கு <strike> tag-ம் , ஒருசில எண்களை ஒரு் எழுத்தின் மேற்பகுதியில் குறிப்பிட superscript tag-ம், ஒருசில எண்களை ஒரு் எழுத்தின் கீழ் பகுதியில் குறிப்பிட subscript tag-ம் பயன்படுகிறது.

உதாரணத்துக்கு பின்வரும் வெளிப்பாட்டை கவனிக்கவும்.



இங்கு 2 எனும் எண் x மற்றும் y எழுத்துக்களின் மேற்புறத்தில் வெளிப்பட அந்த எண்ணின் முன்னும் பின்னும் <sup></sup> எனும் tag (sup for superscript) பயன்படுத்தப்பட்டுள்ளதை பின்வரும் program-ல் கவனிக்கவும். அவ்வாறே 2 எனும் எண் H எனும் எழுத்தின் கீழ்ப் பகுதியில் வெளிப்பட அந்த எண்ணின் முன்னும் பின்னும் <sub></sub> எனும் tag (sub for subscript) பயன்படுத்தப்பட்டுள்ளது.


20000 எனும் எண்ணை கோடிட்டு அடிப்பதற்கு அந்த எண்ணின் முன்னும் பின்னும் <strike> எனும் tag பயன்படுத்தப்பட்டுள்ளதையும் பின்வரும் program-ல் காணலாம்.




Preservative tag

Preservative tag-ஆனது body tag-க்குள் உள்ளவற்றை அதன் வடிவம் கொஞ்சம் கூட மாறாமல் அப்படியே browser-ல் வெளிப்படுத்த உதவுகிறது. உதாரணத்துக்கு பின்வருமாறு ஒரு program-<pre> tag இல்லாமல் அடித்து, browser-ல் திறந்து பார்க்கவும்.




body tag-க்குள் நாம் ஒவ்வொரு வரிக்கும் கொடுத்த இடைவெளி, tag space எல்லாம் புறக்கணிக்கப்பட்டு, வெறும் எழுத்துக்கள் மட்டும் browser-ல் வெளிப்பட்டுவிட்டது. இப்போது அதே program-pre tag கொடுத்து browser-ல் open செய்து பார்க்கவும்.




இப்போது நாம் கொடுத்த எழுத்தின் வடிவம் கூட மாறாமல், அவை browser-ல் வெளிப்படுவதைக் காணலாம். எனவேதான் <pre> tag மிகவும் பயனுள்ளதாகக் கருதப்படுகிறது.


Lists

HTML-ல் ஒருசில விவரங்களை நாம் பட்டியலிட விரும்பினால் 3 விதமான பட்டியல்களைப் பயன்படுத்தலாம். அவை பின்வருமாறு.


Ordered list - தொடர்ச்சியான எண்களால் தகவல்களைப் பட்டியலிடுவது. <ol> எனும் இணை tags இந்த வேலையை செய்யும்.


Unordered list – புள்ளிகளை வைத்து தகவல்களைப் பட்டியலிடுவது. <ul> எனும் இணை tags இதற்குப் பயன்படுகிறது.


Definition list - ஒரு சிறு தலைப்பும், அதன்கீழ் அந்த தலைப்புக்கான விளக்கமுமாக தகவல்களைப் பட்டியலிடுவது. <dl> எனும் இணை tags இந்த வேலையைச் செய்யும்.


அடுத்தபடியாக பட்டியலில் வெளியாகும் ஒவ்வொரு தகவலும் <li> எனும் இணை tags மூலம் கொடுக்கப்படுகிறது. (li for list index). அதாவது நித்யா, வித்யா, சத்யா எனும் மூன்று பெயர்களைப் பட்டியலிட விரும்பினால், ஒவ்வொரு பெயரின் முன்னும் பின்னும் <li></li> tags-ஐ இணைக்க வேண்டும். பின்னர் இந்தப் பெயர்களை தொடர்ச்சியான எண்களால் பட்டியலிட வேண்டுமா அல்லது புள்ளிகளை வைத்து பட்டியலிட வேண்டுமா எனக் குறிப்பிடும் வகையில் அந்த மூன்று பெயர்களையும் கொடுப்பதற்கு முன்னர் <ol> அல்லது <ul> எனும் tags-ஐயும், மூன்று பெயர்களையும் கொடுத்து முடித்த பின்னர் கடைசியாக அதற்கான இணை tags-ஐயும் கொடுக்க வேண்டும்.


ஆனால் இந்த <li></li> tag-ஆனது definition list-க்குப் பொருந்தாது. இந்த முறையில் தலைப்பும், அதன் விளக்கமுமாக விவரங்கள் பட்டியலிடப்படுவதால், தலைப்பின் முன்னும் பின்னும் <dt></dt> tags-ம், (dt for definition title) தலைப்புக்கான விளக்கத்தின் முன்னும் பின்னும் <dd></dd> tag-ஐயும் (dd for definition data)பயன்படுத்த வேண்டும்.


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






Combined Lists


ஒரு் main list-ல் விவரங்களை பட்டியலிடும்போது, அதற்குள் sublist-ஐ உருவாக்குவதே combined listsஎனப்படும். பின்வரும் உதாரண்த்தில் ordered list-ன் கீழ் பட்டியலிடப்பட்டுள்ள Functional Testing எனும் விவரத்தின் கீழ் ஒருசில தகவல்கள் Unordered list முறையில் பட்டியலிடப்பட்டுள்ளதைக் காணலாம். அவ்வாறே Non-functional testing எனும் விவரத்தின் கீழும் தகவல்கள் unordered list முறையில் பட்டியலிடப்பட்டுள்ளன.



இதன் வெளிப்பாடு பின்வருமாறு இருக்கும்.



Tables

அனைவருக்கும் Table என்றால் என்னவென்று தெரிந்திருக்கும். இப்போது HTML-ல் ஒரு் table-ஐ உருவாக்குவது எப்படியென்று பார்க்கப்போகிறோம்.


முதலில் ஒரு் table-ன் தொடக்கத்தின் <table> எனும் tag-ஐயும், கடைசியாக அதற்கான இணை tag-ஐயும் கொடுக்க வேண்டும். பின்னர் table-ல் இடம்பெறப்போகும் ஒவ்வொரு row-ன் ஆரம்பத்தில் <tr>-ம், இறுதியில் </tr> tags-ஐயும் (tr for table row) கொடுக்க வேண்டும். இது table-ன் தலைப்பாக அமையப்போகும் row-க்கும் பொருந்தும்.


அடுத்தபடியாக table-ன் தலைப்பாக இடப்பெறப்போகும் ஒவ்வொரு வார்த்தையின் முன்னரும் பின்னரும் <th></th> tags-ம் (th for table heading), table-க்குள் தகவல்களாக இடம்பெறப்போகும் ஒவ்வொரு வார்த்தையின் முன்னரும் பின்னரும் <td></td> tags-ம் (td for table data) இடம்பெற வேண்டும்.


இத்தகைய tags-ஐப் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு table-ஐப் பின்வருமாறு காணலாம்.






Border, height & width attributes

Border எனும் பண்பு ஒரு் table-க்கு அழகிய border-ஐ உருவாக்குவதற்கும், height எனும் பண்பு ஒரு் table-ன் நீளத்தை மாற்றி அமைப்பதற்கும், width எனும் பண்பு ஒரு் table-ன் அகலத்தை மாற்றி அமைப்பதற்கும் பயன்படுகிறது.


இவை மூன்றும் தொடக்கத்தில் நாம் கொடுக்கின்ற <table> tag-வுடன் இணைந்தே காணப்படும். border-க்கு எந்த ஒரு மதிப்பும் கொடுக்கத்தேவையில்லை. வெறும் border எனும் வார்த்தையை மட்டும் கொடுத்தால் போதுமானது.


height மற்றும் width-க்குக் கொடுக்கப்படும் மதிப்பு pixel-களின் எண்ணிக்கையிலோ அல்லது சதவிகிதமாகவோ இருக்கும். பொதுவாக சதவீதத்தில் கொடுப்பது புரிந்துகொள்ள சற்று சுலபமாக இருக்கும்.


இதனை பின்வரும் உதாரணத்தில் காணலாம்.




Background colour attribute

இந்தப் பண்பு table-ல் நிறங்களைக் கொண்டுவரப் பயன்படுகிறது. Bgcolor=”yellow” என <table> tag-வுடன் இணைந்து கொடுக்கும்போது முழு table-ம் மஞ்சள் நிறத்தில் காணப்படும். இந்தப் பண்பினை ஏதேனும் ஒரு் cell-க்கு மட்டும் கொடுக்கும்போது அந்த இடம் மட்டும் நாம் குறிப்பிட்டுள்ள நிறத்தில் காணப்படும்.


இதனைப் பின்வரும் உதாரணத்தில் காணலாம்.




Links

ஒருசில வலைதளங்களில் click here for more என்றிருக்கும். அங்கு சென்று நாம் சொடுக்கும்போது, அது நம்மை இன்னொரு பக்கத்திற்கு கொண்டு செல்லும். இவ்வாறு ஒன்றை நாம் சொடுக்கும்போது அது நம்மை இன்னொரு பக்கத்திற்கு அழைத்துச் செல்வதே links எனப்படும். இவற்றை எவ்வாறு உருவக்குவதென்று இந்தப் பகுதியில் பார்க்கலாம்.


முதலில் link1.htm எனும் ஒரு் program-ல் Rhymes-க்கான ஒரு் அறிமுகத்தைக் கொடுத்துவிட்டு, அதனடியில் Click here for Chubby Cheeks Rhyme என்று ஒரு் link-ஐ உருவாக்கவும். link-ஐ உருவாக்குவதற்கு anchor tags அதாவது <a></a> பயன்படும். இதற்கிடையில் கொடுக்கப்படும் வார்த்தைகள் நீலநிறத்தில் அடிக்கோடிடப்பட்ட link-ஆகத் தென்படும். இதனை நாம் சொடுக்கும்போது எந்த இடத்திற்குச் செல்ல வேண்டும் என்பதை href எனும் பண்பு தீர்மானிக்கும். hypertext reference என்பதே href ஆகும்.



மேற்கண்ட program-ல் href-ன் மதிப்பு link2.htm என்று காணப்படுவதால் கீழ்வரும் program-க்கு நம்மை அழைத்துச் செல்லும்.


link2.htm பின்வருமாரு.


இந்த program-ன் கடைசியில் உள்ள click here to go back to introduction என்பதை நாம் சொடுக்கும்போது href-ன் மதிப்பு link1.htm என்றிருப்பதால், இது நம்மை முந்தைய program-க்கே கொண்டு செல்லும்.


எனவே இதன் வெளிப்பாடுகள் பின்வருமாறு அமையும்.




Internal Links

இரண்டு program-களுக்கிடையில் links-ஐ உருவாக்குவது பற்றி முந்தைய program-ல் பார்த்தோம். இப்போது ஒரே program-ல் பல program-களுக்கான links-ஐ உருவாக்குவது பற்றி பார்க்கலாம்.


இதற்கான program பின்வருமாறு அமையும். இந்தப் புத்தகத்தில், table-களைப் பற்றியும் அதன் attributes-ஐப் பற்றியும் தெரிந்து கொள்ள நாம் உருவாக்கிய 3 program-களுக்கான links-ஐ பின்வரும் program-ல் உருவாக்கியுள்ளோம்.



இதன் வெளிப்பாடு பின்வருமாறு அமையும்.


இதில் முதல் link-ஐ சொடுக்கும்போது table1 எனும் program-ன் வெளிப்பாடும், இரண்டாவது link-ஐ சொடுக்கும்போது table2-ன் வெளிப்பாடும், மூன்றாவது link-ஆனது table3-ன் வெளிப்பாட்டையும் முறையே பின்வருமாறு வெளிப்படுத்தும்.







External Links

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


இதனை நாம் பின்வரும் program-ல் காணலாம்.


href-ன் மதிப்பாக mailto: என்பதைத் தொடர்ந்து ஏதேனும் ஒரு் முகவரியைக் கொடுத்தால், அந்த முகவரிக்கு மின்னஞ்சல் அனுப்பப்படும். இது மேற்கண்ட program-ல் மூன்றாவதாக இடம்பெற்றுள்ளது. மேற்கண்ட program-ன் வெளிப்பாடு பின்வருமாறு அமையும்.


இதில் முதல் link-ஐ சொடுக்கும்போது பின்வரும் வெளிப்பாடும், இரண்டாவது link-ஐ சொடுக்கும்போது அடுத்த படத்தில் உள்ள வெளிப்பாடும், கடைசியாக உள்ள link-ஐ சொடுக்கும்போது எனது முகவரிக்கு ஒரு் மின்னஞ்சலும் செலுத்தப்படும்.







Frames

ஒரு் link-ஐ சொடுக்கும்போது, அதன் வெளிப்பாடு ஒரு் புதிய பக்கத்தில் இடம்பெறாமல், அதே பக்கத்தில் இடம்பெறுமாறு செய்ய frames உதவுகிறது. இதன் மூலம் திரையைக் குறைந்தபட்சம் இரண்டு பகுதிகளாகப் பிரித்து, முதல் பகுதியில் links-ம் அடுத்த பகுதியில் அதற்கான வெளிப்பாடும் வருமாறு செய்யலாம்.

<frameset> tag

இது திரையை பல பிரிவுகளாகப் பிரிக்க உதவுகிறது. இதன் cols-எனும் attribute திரையை இடமிருந்து வலமாகவும், rows-எனும் attribute திரையை மேலிருந்து கீழாகவும் பிரிக்க உதவுகிறது. இத்தகைய பண்புகளின் மதிப்புகளை சதவீதத்தில் கொடுப்பது புரிந்து கொள்ள சற்று சுலபமாக இருக்கும். இது <body> tag-க்கு பதிலாகப் பயன்படுத்தப்படுகிறது. எனவே இதற்குள் <body> tag-க்குள் பயன்படுத்திய tags-க்கு இடமில்லை.

<noframes> tag

frames-ஐப் புரிந்து கொள்ள முடியாத browser-கள் <noframes> tag-க்குள் உள்ளவற்றை execute செய்து அதன் வெளிப்பட்டை browser-ல் காட்டும். இதற்குள் body tag-க்குள் பயன்படுத்திய commands-ஐ பயன்படுத்தலாம்.


<frames> tag

திரையானது எத்தனை பகுதிகளாகப் பிரிக்கப்பட்டுள்ளதோ அத்தனை <frames> tag, frameset-க்குள் காணப்படும். இதன் src எனும் பண்பு, ஒரு் frame-க்குள் என்ன இடம்பெற வேண்டும் என்பதைக் குறிப்பிடப் பயன்படுகிறது. அடுத்ததாக name எனும் பண்பு ஒவ்வொரு frame-க்கும் பெயரிட உதவுகிறது.

இத்தகைய tags-ஐக் கொண்டு உருவாக்கப்பட்ட ஒரு் program-ஐ பின்வரும் உதாரணத்தில் காணலாம்.




இதில் frameset-ன் cols எனும் பண்பினால் திரையானது இடமிருந்து வலமாக இருபகுதிகளாகப் பிரிக்கப்பட்டுள்ளது. cols-ல் கொடுக்கப்பட்ட மதிப்புகள் மூலம் முதல் பகுதியானது திரையில் 30% இடத்தையும், அடுத்த பகுதியானது மீதமுள்ள இடத்தையும் (* என்பது மீதமுள்ள 70% இடம்) எடுத்துக்கொள்கிறது.


திரையானது இருபகுதிகளாகப் பிரிக்கப்படவே, இதற்குள் இரு frames tag உள்ளது. முதல் frame-க்கு “left” என்றும் இரண்டாவது frame-க்கு "right” என்றும் பெயரிட்டுள்ளோம். முதல் frame-ல் src-ன் மதிப்பு frame2.htm என்றிருப்பதால், இந்த program-ன் வெளிப்பாடு முதல் frame-க்குள் இடம்பெறும்.


frame2.htm எனும் program பின்வருமாறு.



இந்த program-ல் உள்ள 3 links-ம் left என்று பெயரிடப்பட்ட முதல் frame-க்குள் வெளிப்படும்.


இதில் target என்று ஒரு் புது பண்பு anchor tag-ல் இடம்பெற்றுள்ளதையும் அதன் மதிப்பு "right” என்று இருப்பதையும் கவனிக்கவும். இந்தப் பண்பே அந்த link-ஐ சொடுக்கும்போது, அதன் வெளிப்பாடு புது பக்கத்தில் இடம்பெறாமல், “right” எனும் பெயரைக் கொண்ட இரண்டாவது frame-ல் இடம்பெற உதவும்.


இதன் வெளிப்பாடு பின்வருமாறு.



Forms

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


<form> tag

ஒரு் படிவத்தை உருவாக்க <form> tag-<body>-க்குள் கொடுக்க வேண்டும். இதற்கான இணை tag படிவம் முடியும்போது இடம்பெறும். இந்த <form>-க்கு method மற்றும் action என்று இரண்டு பண்புகள் உள்ளன. method-க்கு post எனும் மதிப்பும், action-க்கு படிவத்தில் பூர்த்தி செய்யப்பட்ட விவரங்களை எங்கு அனுப்ப வேண்டும் எனும் மதிப்பும் பெற்றிருக்கும். இது பின்வருமாறு.


<form method="post" action="mailto:nithyadurai87@gmail.com">


பொதுவாக action-ன் மதிப்பு ஒரு program-ஆகவோ அல்லது database-ஆகவோ இருக்கும். ஆனால் இங்கு நாம் சுலபமாகப் புரிந்து கொள்வதற்காக mailto எனும் command-ஐப் பயன்படுத்தியுள்ளோம். அதாவது படிவத்தில் பூர்த்திசெய்யப்பட்ட விவரங்கள் mailto command-ல் உள்ள மின்னஞ்சல் முகவரிக்குச் சென்றுவிடும்.


அடுத்தபடியாக பயனர்களிடமிருந்து விவரத்தைப் பெற்றுக்கொள்வதற்குப் பயன்படும் ஒவ்வொரு விதமான tags-ஐயும் பின்வருமாறு பார்க்கலாம்.


<input> tag

பயனர்களிடமிருந்து எழுத்துக்கள் எண்கள் போன்ற வகையான தகவல்களைப் பெற்றுக்கொள்ள <input> tag பயன்படும். இதற்கு type மற்றும் name என்று இரண்டு பொதுவான பண்புகள் உள்ளன. type-ஆனது பெற்றுக்கொள்ளப்போவது எவ்வகை விவரம் எனும் மதிப்பினையும், name-ஆனது பெற்றுக்கொண்ட விவரத்துக்கு ஒரு் பெயரையும் அளிக்கப் பயன்படுகிறது.

Text box

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


<input type="text" size="25" name="name"/>

<input type="text" size="10" name="ph"/>


இங்கு பெற்றுக்கொள்ளப்போகும் விவரம் எழுத்துக்கள் மற்றும் எண்கள் வடிவில் இருப்பதனால், இரண்டு input tag-க்கும் type-ன் மதிப்பு text என்று உள்ளது.


மேலும் முதல் input-க்கு name எனும் பெயரும், அடுத்த input-க்கு ph எனும் பெயரும் அளிக்கப்பட்டுள்ளது. அடுத்தபடியாக size எனும் பண்பு முதல் input-ல் ஒரு் பெயர் 25 எழுத்துக்கள் வரை இருக்கலாம் எனும் விவரத்தையும், அடுத்த input-ல் ஒரு் தொலைபேசி எண் 10 எண்கள் வரை இருக்கலாம் எனும் விவரத்தையும் அளிக்கிறது.


இங்கு ஒவ்வொரு input tag-ம் இணை tag ஏதுமின்றி அதனிறுதியில் / ஐப் பெற்று முடிக்கப்படுவதைக் காணலாம். எனவே இவை self closing tags என்றழைக்கப்படும்.


இதுபோன்று வெறும் இரண்டு input tags-ஐ மட்டும் program-ல் கொடுக்கும்போது அவை திரையில் வெறும் இரண்டு பெட்டிகளை மட்டும் வெளிப்படுத்தும். இந்த இரண்டு பெட்டிகளும் எதற்காக என்று பயனர்களுக்குத் தெரியாதல்லவா. அதற்காக ஒவ்வொரு input tag-ன் முன்னரும் பின்வருமாறு கொடுக்கலாம்.


Name <input type="text" size="25" name="name"/>

Phone Number <input type="text" size="10" name="ph"/>


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


Name = Kaviyan

Ph = 4839403892


Radio button

இரண்டு விவரத்தைக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்ய radio button பயன்படும். உதாரணத்துக்கு ஒருவர் ஆணா பெண்ணா எனும் விவரத்தை அவர்களையே type செய்ய சொல்லுவதற்கு பதிலாக, "ஆண்" , "பெண்" எனும் இரண்டு radio buttons-ஐக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்யுமாறு சொல்லலாம். இதற்கான input tag பின்வருமாறு அமையும்.


<input type="radio" name="sex" value="M"/>

<input type="radio" name="sex" value="F"/>


இவை திரையில் வெறும் இரண்டு radio button-களை மட்டுமே வெளிப்படுத்தும். எனவே எந்த button எதற்காக எனப் பயனர்கள் புரிந்து கொள்ள ஒவ்வொரு tag-க்கும் முன்னர் பின்வருமாறு கொடுக்கலாம். இவையும் பயனர்களின் புரிதலுக்காக மட்டுமே.


Male <input type="radio" name="sex" value="M"/>

Female <input type="radio" name="sex" value="F"/>


இங்கு value எனும் பண்பு ஒவ்வொரு option-க்கும் உரிய மதிப்பினைக் கொண்டிருக்கும். உதாரணத்துக்கு இரண்டாவது option-ஐ தேர்வு செய்தால் "F" எனும் மதிப்பு name எனும் பண்பில் உள்ள பெயரினால் குறிக்கப்பட்டு மின்னஞ்சலில் பின்வருமாறு செலுத்தப்படும்.


sex = F


முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், அதனிறுதியில் 'checked' எனும் வார்த்தையை மட்டும் இணைத்தால் போதுமானது. இது பின்வருமாறு.


Male <input type="radio" name="sex" value="M" checked/>


Checkboxes

இரண்டுக்கும் மேற்பட்ட விவரங்களைக் கொடுத்து அதிலிருந்து ஒன்றுக்கும் மேற்பட்ட விவரங்களைத் தேர்வு செய்யுமாறு அமைக்க விரும்பினால் checkboxes-ஐப் பயன்படுத்தலாம். உதாரணத்துக்கு தமிழ், ஆங்கிலம், இந்தி எனும் 3 மொழிகளில் ஒருவருக்கும் எந்தெந்த மொழிகளெல்லாம் தெரியும் எனும் விவரத்தைப் பெற்றுக்கொள்ள விரும்பினால், அதற்கான input tag பின்வருமாறு அமையும்.


<input type="checkbox" name="Language" value="Tamil" />

<input type="checkbox" name="Language" value="English"/>

<input type="checkbox" name="Language" value="Hindi"/>


இவை மூன்று குட்டி குட்டி பெட்டிகளை மட்டுமே திரையில் வெளிப்படுத்தும். எனவே எந்த பெட்டி எந்த மொழிக்காக எனக் குறிப்பிடும் வகையில் ஒவ்வொரு input tag-க்கும் முன்னர் அந்தந்த மொழிகளின் பெயர்களை குறிப்பிடலாம்.


இங்கும் value எனும் பண்பு ஒவ்வொரு checkbox-க்கும் உரிய மதிப்பினைக் கொண்டிருக்கும். உதாரணத்துக்கு முதல் இரண்டு checkboxes-ஐ தேர்வு செய்தால் அந்தத் தகவல்களெல்லாம் பின்வருமாறு செலுத்தப்படும்.


Language = Tamil

Language = English


முதல் checkbox-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், அதனிறுதியில் 'checked' எனும் வார்த்தையை மட்டும் இணைத்தால் போதுமானது. இது பின்வருமாறு.


<input type="checkbox" name="Language" value="Tamil" checked/>


Submit & Reset buttons

<input> tag-ன் type எனும் பண்பினை 'Submit' என்று கொடுக்கும்போது, படிவத்தில் நாம் பூர்த்தி செய்த விவரங்கள் அனைத்தும், படிவத்தின் action எனும் பண்பில் என்ன குறிப்பிடப்பட்டுள்ளதோ அதற்கேற்ப செயல்படும். 'Reset' என்று கொடுக்கும்போது படிவத்தில் பூர்த்தி செய்த விவரங்கள் அனைத்தும் நீக்கப்பட்டுவிடும்.


<input type="submit"/>

<input type="reset"/>


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


<input type="submit" value="ok"/>

<input type="reset" value="cancel"/>


இப்போது ஒரு button-ன் மேல் 'OK' என்றும், அடுத்த button-ன் மேல் 'cancel' என்றும் பயனர்களின் வசதிக்காக எழுதப்பட்டிருக்கும்.

<select> tag

ஒரு் drop-down list-ஐ உருவாக்கி அதிலிருந்து மதிப்புக்களை தேர்வு செய்ய விரும்பினால், <select> tag-ஐப் பயன்படுத்தலாம். இதற்கு இணை tag உண்டு. மேலும் name மற்றும் size என்று இரண்டு விதமான பண்புகளைப் பெற்றிருக்கும். name-ல் நாம் தேர்ந்தெடுக்கும் option-க்கு ஒரு் பெயரும், size-ல் எத்தனை option-களைக் கொடுக்கப் போகிறோம் எனும் எண்ணிக்கையும் இருக்கும். list-க்குள் இடம்பெறப்போகும் ஒவ்வொரு விவரமும் <option> எனும் இணை tag-க்குள் காணப்படும்.


உதாரணத்துக்கு 3 நகரத்தின் பெயர்களை ஒரு் drop-down list-ல் கொடுத்து, அதிலிருந்து ஒன்றை தேர்வு செய்வதற்கான code பின்வருமாறு அமையும்.


<select name="city" size="3">

<option>Chengalpattu</option>

<option>Kanchipuram</option>

<option>Tambaram</option>

</select>


ஒன்றுக்கும் மேற்பட்ட விவரத்தை தேர்வுசெய்யுமாறு அமைக்க விரும்பினால், select tag-க்குள் multiple எனும் வார்த்தையை இணைத்தால் போதுமானது.

<select name="city" size="3" multiple>


முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், option tag-க்குள் selected எனும் வார்த்தையை இணைத்தால் போதுமானது.


<option selected>Chengalpattu</option>


<textarea> tag

ஒன்றுக்கும் மேற்பட்ட பல வரிகளைக் கொண்ட "கருத்துக்கள்" அல்லது "முகவரி" போன்ற விவரங்களைப் பயனர்களிடமிருந்து பெற்றுக்கொள்ள <textarea> tag பயன்படும். இதற்கு இணை tag உண்டு. மேலும் rows மற்றும் cols என்று இரண்டு பண்புகளைப் பெற்றிருக்கும். rows-ல் வரிகளின் எண்ணிக்கையும், cols-ல் அவற்றின் அகலமும் இடம்பெறும்.


மேற்கூறிய அனைத்து tag-ஐயும் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு் program-ஐ பின்வருமாறு காணலாம்.




HTML5

HTML5 என்பது சற்றே வித்தியாசமானது. நமது வலைத்தளத்திற்கு மேலும் அழகு சேர்க்கக் கூடியது. இதன் துணைகொண்டு ஒலி/ஒளி கோப்புகள் மற்றும் 2D/3D படங்கள் ஆகியவற்றை நமது வலைத்தளத்தில் வெளிப்படுத்தலாம். மேலும் தகவல்களை application-ல் சேமிப்பது, அவற்றைப் பயன்படுத்துவது மற்றும் real-time protocols மூலம் சேமித்த தகவல்களைப் பரிமாறிக் கொள்வது போன்ற பல சிறப்பான வேலைகளையும் javascript மற்றும் css ஆகியவற்றின் துணைகொண்டு html5 செய்கிறது.

HTML5-ம் ஒரு சாதாரண html program-க்கான syntax-ஐயே பெற்றிருக்கும். இது பின்வருமாறு.

<!DOCTYPE html>

<head>

<title> </title>

<meta charset="utf-8" />

</head>

<body>

Code for html/html5

</body>

</html>

முதலில் உள்ள <!DOCTYPE html> என்பது இதுவும் ஒரு் html document தான் என்பதை உணர்த்துகிறது. அடுத்ததாக head tag-க்குள் புதிதாக உள்ள meta tag-ஆனது நமது html document பற்றிய தகவல்களை சேமிக்க உதவுகிறது. மேலும் இதன் charset எனும் attribute, UTF-8 எனும் மதிப்பினை பெற்றிருப்பதை கவனிக்கவும். இது நமது program-ல் உள்ள code அனைத்தையும் Unicode Transformation Format-8 ல் மாற்ற உதவுகிறது.

Html5- ன் அங்கமாக விளங்கும் <script> tag- ன் மதிப்பாக js/css-ஐக் கொடுத்து நாம் விரும்பும் வேலைகளைச் செய்யலாம். இத்தகைய javascript மற்றும் css ஆகியவற்றைப் பற்றி இந்தப் புத்தகத்தில் பார்க்கத் தேவையில்லை. ஒருசில எளிய html5 tags-ஐப் பற்றி இங்கு பார்க்கலாம் .

SVG tag

SVG tag- ஆனது வட்டம், செவ்வகம், நீள்கோளம், Polygon போன்ற வடிவங்களை திரையில் வெளிப்படுத்த உதவும். இது Scalar Vector Graphics எனப் பொருள்படும். இந்த tag-க்குள் ஒவ்வொரு வடிவத்தை வெளிப்படுத்துவதற்கும் தனித்தனி tags பயன்படும். இத்தகைய tags-க்கான விதிமுறைகள் அனைத்தும் http://www.w3.org/2000/svg எனுமிடத்தில் காணப்படும். எனவேதான் SVG tag-ன் xmlns (Extensible Markup Language Name Space) எனும் attribute இந்த முகவரியை அதன் மதிப்பாக பெற்றிருக்கும்.

இப்போது ஒரு் கோடு, செவ்வகம் மற்றும் வட்டம் ஆகியவற்றை வரைவதற்கான code-ஐப் பின்வருமாறு காணலாம்.









இங்கு svg tag-க்குள் உள்ள <line >tag ஒரு் கோட்டினை வரைவதற்கும், <circle> tag வட்டத்தை வரைவதற்கும், <rect> tag செவ்வகத்தை வரைவதற்கும் பயன்படுத்தப்பட்டுள்ளதைக் காணலாம். இவை மூன்றும் self-closing tags ஆகும்.

இவை மூன்றையும் ஒரே svg tag-க்குள் கொடுக்கும் போது அதன் வடிவங்கள் அனைத்தும் ஒன்றன் மீது ஒன்றாக வரையப்படுகின்றன. எனவே தான் ஒவ்வொரு வடிவத்துக்கும் ஒவ்வொரு முறை svg tag-ஐ பயன்படுத்தியுள்ளேன்.

ஒரு் கோடு வரைவதற்கு (x1,y1) (x2,y2) எனும் மதிப்புகள் தேவை. எனவே இத்தகைய மதிப்புகளை line tag-ன் attribute ஆகக் கொடுத்து ஒரு் கோடு வரையப்பட்டுள்ளது. மேலும் style attribute-ன் மதிப்பாக Stroke அதாவது கோட்டின் நிறம் மற்றும் அதன் அகலத்தின் மதிப்பு கொடுக்கப்பட்டுள்ளது.

அவ்வாறே ஒரு் செவ்வகம் வரைவதற்குத் தேவைப்படும் height மற்றும் width எனும் மதிப்புகள் அதன் attributes-ஆகக் கொடுக்கப்பட்டுள்ளதையும், fill எனும் மற்றொரு attribute மூலமாக செவ்வகத்திற்கு பச்சை நிறம் பூசப்பட்டுள்ளத்தையும் காணலாம்.

அடுத்தபடியாக வட்டம் வரைவதற்கு தேவைபட்ட x,y மற்றும் Radius (ஆரம்) எனும் மதிப்புகள் முறையே cx, cy, r எனும் attributes-க்கு மதிப்பாக கொடுத்து வட்டம் வரையப்பட்டுள்ளதையும், fill எனும் மற்றொரு attribute மூலமாக வட்டத்திற்கு நீல நிறம் பூசப்பட்டுள்ளத்தையும் காணலாம்.

Embed tag

நமக்கெல்லாம் நன்றாக தெரிந்த youtube போன்ற வலைத்தளத்தில் நாம் audio-வைக் கேட்டும் video-வைப் பார்த்தும் மகிழ் துள்ளோம். இதுபோன்ற வலைத்தளத்தை எவ்வாறு உருவாக்குவது? நாம் உருவாக்கப் போகும் வலைத்தளத்தில் எவ்வாறு ஒளி /ஒலி கோப்புகளை இணைப்பது? இதற்காக HTML5 வழங்கும் tag-தான் <embed> tag.

இப்போது ஒரு் audio மற்றும் video-வை இணைப்பதற்கான code-ஐப் பின்வருமாறு காணலாம்.



















Script tag – Drag & Drop

Drag and Drop என்பது நமது வலைத்தளத்தில் உள்ளவற்றை (படங்களையோ அல்லது கோப்புகளையோ) இடம் நகர்த்தி வைப்பதற்கு உதவும் ஒரு் பயன்பாடு ஆகும். எந்த ஒரு Object-ஐ நாம் இடம் நகர்த்த விரும்புகிறோமோ அந்த object-ன் மீது சொடுக்கி, பின்னர் சொடுக்கிய நிலையிலேயே அத்தனை நகர்த்தி வேறொரு இடத்தில் வைத்துவிட்டு mouse பட்டனில் இருந்து விரலை நீக்கினால் அந்த object இடம்பெயர்ந்து விடும்.

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



இதற்கான code பார்ப்பதற்கு சற்று கடினமாக இருந்தாலும் கொஞ்சம் கொஞ்சமாக படித்துப் பார்த்தால் சுலபமாகப் புரிந்து விடும்.

முதலில் body tag-க்குள் உள்ள <div> tag செவ்வக வடிவில் ஒரு் divition-ஐ உருவாக்குவதற்கும், <img> tag ஒரு் படத்தை வெளிப்படுத்துவதற்கும் பயன்படுகிறது. இந்தப் படத்தைத் தான் <div> tag-ஆல் உருவாக்கப்பட்ட செவ்வக வடிவ பெட்டிக்குள் நாம் நகர்த்தப் போகிறோம்.

<img> tag-க்குள் உள்ள attributes-ன் விளக்கத்தைப் பின்வருமாறு காணலாம்.


id = இதன் மூலம் இந்தப் படத்திற்கு ‘COW’ எனப் பெயரிட்டுள்ளோம்.
src =
இந்தப் படத்திற்கான முழு முகவரி இங்கு அளிக்கப்பட்டுள்ளது.
draggable =
இதற்கு ‘true’ என மதிப்பினை அமைப்பதன் மூலம், இந்தப் படத்தை நகருமாறு மாற்றி அமைக்க முடியும்.
ondragstart =
இந்தப் படத்தை நகர்த்தும் போது என்ன நிகழ வேண்டும் எனும் மதிப்பு drag(event) எனும் function-ஆக இங்கு கொடுக்கப்பட்டுள்ளது. எனவே இந்தப் படத்தை நகர்த்தும் போது, இந்த function-க்குள் வரையறுக்கப்பட்டுள்ள விஷயங்களே நிகழ்த்தப்படும்.

<div> tag-க்குள் உள்ள attributes-ன் விளக்கத்தைப் பின்வருமாறு காணலாம்.


id = இதன் மூலம் இந்த divition-க்கு ‘rect’ எனப் பெயரிட்டுள்ளோம்.
ondrop =
இந்த divition-க்குள் ஏதேனும் ஒரு் object-ஐ கொண்டு வந்து விடும்போது என்ன நிகழ வேண்டும் எனும் மதிப்பு drop(event) எனும் function-ஆக கொடுக்கப்பட்டுள்ளது.
ondragover = cursor-
ஆல் ஏதேனும் ஒரு் object நகர்த்தப் பட்டுக்கொண்டிருக்கும் போது என்ன நிகழ வேண்டும் என்பது allowDrop(event) எனும் function-ஆக இங்கு கொடுக்கப் பட்டுள்ளது.

மேற்கூறிய <img> மற்றும் <div> tags- ன் attributes-ல் கொடுக்கப்பட்டுள்ள functions அனைத்தும் <head>-க்குள் வரையறுக்கப்படும். இத்தகைய functions-ன் தொடக்கத்திலும் முடிவிலும் <script> எனும் இணை tags காணப்படும்.

இப்போது ஒவ்வொரு function-க்குள்ளும் கொடுக்கப்பட்டுள்ள மதிப்பின் அர்தத்தைப் புரிந்து கொள்வோம்.

Drag function: இதற்குள் image-ன் id மற்றும் அதன் datatype வரையறுக்கப்பட்டுள்ளது. இதற்கு datatransfer.setdata எனும் function பயன்பட்டுள்ளது. ev.target.id என்பது <img>-க்குள் நாம் கொடுத்துள்ள ‘COW’ எனும் மதிப்பினையும், “text” என்பது அதன் datatype- ஐயும் குறிக்கிறது.

Allowdrop function: பொதுவாக வலைத்தளத்தில் ஒரு் object-ஐ நகர்த்த முடியாது. இதற்குள் பயன்படுத்தப்பட்டுள்ள preventDefault எனும் function இதுபோன்ற அடிப்படையான இயல்பினை மாற்றி அமைத்து, ஒரு் object-ஐ நகருமாறு செய்யும்.

Drop function: இதில் பயன்படுத்தப்பட்டுள்ள datatransfer.getdata என்பது drag function-ல் datatransfer.setdata-ஆல் வரையறுக்கப்பட்ட மதிப்பினை பெற்றுக்கொள்ளும். பின்னர் அந்த மதிப்பினை target.appendChild எனும் function மூலமாக, நாம் உருவாக்கிய divition-க்குள் பொருத்திவிடும்.



Script tag – Geolocation

பூமியில் நாம் தற்போது இருக்கும் இடத்தைக் கண்டறிந்து வெளிக்காட்ட HTML5 பயன்படுத்தும் ஒரு் விஷயமே Geolocation ஆகும். உதாரணத்துக்கு நாம் சுற்றுலா சென்று கொண்டிருக்கும் போது, தற்போது எங்குள்ளோம் என்பதைத் தெரிந்து கொள்ள நமது அலைபேசியில் உள்ள MAP-ஐப் பயன்படுத்துவோம் அல்லவா? அதே போன்று ஒரு MAP-ஐ நாம் உருவாக்கப் போகும் application-லும் கொண்டு வர Geolocation பயன்படுகிறது. இது அட்சரேகை தீர்க்கரேகை ஆகியவற்றின் துணை கொண்டு நாம் இருக்கும் இடத்தைக் கண்டறிந்து அதனை MAP போன்ற ஒரு் வடிவில் வெளிப்படுத்தும். இதற்கான code பின்வருமாறு.



முதலில் body tag-க்குள் உள்ள <button> tag ஒரு் button-ஐ உருவாக்குவதற்கும், அதன் மீது சொடுக்கும்போது என்ன நிகழ வேண்டும் எனும் மதிப்பு அதன் onclick எனும் attribute-ன் மதிப்பாகவும் கொடுக்கப்பட்டுள்ளது. Onclick- ன் மதிப்பாக உள்ள getCurrentPosition() எனும் method, coords.latitude, coords.longitude எனும் மதிப்புகளை showPosition எனும் function-க்குள் அனுப்பி அதன் தொடர்ச்சியான வேலைகளைச் செய்கிறது.

body tag-க்குள் அடுத்து உள்ள <div> tag, ‘mapholder’ எனும் ஒரு் divition-ஐ உருவாக்கியுள்ளது.

இப்போது showPosition()-க்குள் என்ன நிகழ்கிறது என்பதைப் பார்க்கலாம். இந்த function பெற்றுக்கொண்ட latitude, longitude மதிப்புகளை xy எனும் variable- ல் செலுத்தி, பின்னர் அத்தனை Google Map-உடன் இணைத்துள்ளது. அதாவது img_url எனும் variable- ன் மதிப்பாக google map-ன் முகவரியைக் கொடுத்து, அதனுடன் xy இணைக்கப்பட்டுள்ளது.

கடைசியாக நாம் உருவாக்கிய mapholder எனும் பகுதியை getElementById() மூலமாக எடுத்து, அதன் தொடர்ச்சியாக அளிக்கப்படும் innerHTML-ன் மதிப்பாக img_url variable-ஐ அளிப்பதன் மூலம் நாம் இருக்கும் இடம் Map-ல் வெளிப்படுத்தப்பட்டுள்ளது.



இது error handling ஏதும் இல்லாத ஒரு் அடிப்படையான program ஆகும்.

Script tag – SSE

நாம் ஏதேனும் ஒரு் link-ஐ சொடுக்கும்போது, browser-ஆனது server-க்கு ஒரு் நிகழ்வினை அனுப்பி வைத்தது, நாம் சொடுக்கிய பக்கத்தைக் கேட்கும். இது client sent event-க்கு ஒரு் சிறந்த உதாரணம். அவ்வாறே ஒருசில நிகழ்ச்சிகள் server-யிடமிருந்து வந்து browser-ல் வெளிப்படும். உதாரணத்துக்கு ஏதேனும் ஒரு் வலைதளப் பக்கத்தில் நாம் வேலை பார்த்துக் கொண்டிருக்கும் போது திடீரென்று நம்மைக் கேட்காமலேயே ஒருசில செய்திகள் browser-ல் வெளிப்பட்டுக் கொண்டே இருக்கும் அல்லவா! அவையெல்லாம் Server Sent Events ஆகும்.

இது போன்று Server-யிடமிருந்து தானாக வந்து browser-ல் வெளிப்படும் நிகழ்வுகளை எவ்வாறு உருவாக்குவது என்று பின்வருமாறு பார்க்கலாம்.



இங்கு body tag-க்குள் புதிதாக ஏதும் இல்லை. வெறும் SSE-ஐ வெளிப்படுத்துவதற்கு result எனும் பெயரில் ஒரு் divition உருவாக்கப்பட்டுள்ளது. எனவே script tag-க்குள் என்ன நிகழ்கிறது என்பதைப் பார்ப்போம்.

new EventSource() என்பது ஒவ்வொரு முறை demo_sse.php எனும் பக்கத்தில் server event நிகழும்போதும் அதனை எடுத்து source எனும் variable-ல் சேமிக்கும். பின்னர் அதன் மீது செயல்படும் onmessage எனும் நிகழ்வு, அதில் சேமிக்கப்படும் ஒவ்வொரு மதிப்பையும் ஒரு் function-க்குள் செலுத்தி SSE நிகழ்வினை வெளிப்படுத்தும்.

Function(event) : இதில் உள்ள getElementById என்பது result எனும் divition-ஐ பெற்றுக்கொள்வதற்கும், அதன்மீது செயல்பட்டுள்ள innerHTML எனும் நிகழ்வு SSE-divition-க்குள் செலுத்துவதற்கும் பயன்பட்டுள்ளது.