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-க்கான விதிமுறைகள் அனைத்தும் www.w3.org/2000/svg எனுமிடத்தில் காணப்படும். எனவேதான் SVG tag-ன் xmlns (Extensible Markup Language Name Space) எனும் attribute இந்த முகவரியை அதன் மதிப்பாக பெற்றிருக்கும்.
இப்போது ஒரு் கோடு, செவ்வகம் மற்றும் வட்டம் ஆகியவற்றை வரைவதற்கான code-ஐப் பின்வருமாறு காணலாம்.
File: svg.htm
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset=”utf-8″ />
</head>
<body>
<h2>Examples for SVG</h2>
<svg xmlns=”http://www.w3.org/2000/svg”>
<line x1=”0″ y1=”0″ x2=”200″ y2=”100″style=”stroke:red;stroke-width:2″/>
</svg>
<svg xmlns=”http://www.w3.org/2000/svg”>
<rect id=”redrect” width=”300″ height=”100″ fill=”green” />
</svg>
<svg xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”50″ r=”50″ fill=”blue” />
</svg>
</body>
</html>
இங்கு 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-ஐப் பின்வருமாறு காணலாம்.
File: Audio.htm
<!DOCTYPE html>
<head>
<title>Audio & Video</title>
<meta charset=”utf-8″ />
</head>
<body>
<h2>Audio</h2>
<embed src=”/home/nithya/Music/mahadevaya.mp3″>
<h2>Video</h2>
<embed src=”/usr/share/help/sl/mahjongg/figures/mahjongg-video.ogv”>
</body>
</html>
Script tag – Drag & Drop
Drag and Drop என்பது நமது வலைத்தளத்தில் உள்ளவற்றை (படங்களையோ அல்லது கோப்புகளையோ) இடம் நகர்த்தி வைப்பதற்கு உதவும் ஒரு் பயன்பாடு ஆகும். எந்த ஒரு Object-ஐ நாம் இடம் நகர்த்த விரும்புகிறோமோ அந்த object-ன் மீது சொடுக்கி, பின்னர் சொடுக்கிய நிலையிலேயே அத்தனை நகர்த்தி வேறொரு இடத்தில் வைத்துவிட்டு mouse பட்டனில் இருந்து விரலை நீக்கினால் அந்த object இடம்பெயர்ந்து விடும்.
உதாரணத்துக்கு நமது வலைத்தளத்தைப் பயன்படுத்தப் போகும் பயனர்கள் அங்கு உள்ள ஒரு் படத்தை இடம்நகர்த்தி அங்கு காணப்படும் ஒரு் சிறிய பெட்டிக்குள் வைக்குமாறு அமைப்பதற்கான code பின்வருமாறு அமையும்.
File: drog and drop.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the Dog image into the rectangle</p>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br>
<img id=”drag1″ src=”/home/nithya/Pictures/nithya-5th-month/DSC_0171.jpg” draggable=”true” ondragstart=”drag(event)” width=”300″ height=”200″>
</body>
</html>
இதற்கான 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 பின்வருமாறு.
File: Geolocation.html
<!DOCTYPE html>
<html>
<head>
<script>
function showPosition(position) {
var xy = position.coords.latitude + “,” + position.coords.longitude;
var img_url = “http://maps.googleapis.com/maps/api/staticmap?center=”
+xy+”&zoom=14&size=400×300&sensor=false”;
document.getElementById(“mapholder”).innerHTML = “<img src=’”+img_url+”‘>”;
}
</script>
</head>
<body>
<button onclick=”navigator.geolocation.getCurrentPosition(showPosition)”>Click It to get your position</button>
<div id=”mapholder”></div>
</body>
</html>
முதலில் 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-ல் வெளிப்படும் நிகழ்வுகளை எவ்வாறு உருவாக்குவது என்று பின்வருமாறு பார்க்கலாம்.
File: SSE.html
<!DOCTYPE html>
<html>
<head>
<script>
var source = new EventSource(“demo_sse.php”);
source.onmessage = function(event) {
document.getElementById(“result”).innerHTML += event.data + “<br>”;
};
</script>
</head>
<body>
<h1>Getting server updates</h1>
<div id=”result”></div>
</body>
</html>
இங்கு 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-க்குள் செலுத்துவதற்கும் பயன்பட்டுள்ளது.
