HTML5 – ன் புதிய வசதிகள்

HTML5 – ன் புதிய வசதிகள்:
HTML5-ல் ஊடகக் கோப்புகள், 2D/3D வரைபடங்கள், Forms போன்றவற்றைப் பயன்படுத்த பல புதிய வசதிகள் உள்ளன.
ஊடகம்(Media) : –
<audio> – இது ஒலிக் கோப்புகளை இயக்க உதவுகிறது.
<video> – இது காணொளிகளை வெளிப்படுத்த உதவுகிறது.
<source> – இது ஒலி / ஒளி உள்ளிட்ட பல்வேறு ஊடக மூலங்களைக் குறிக்கப் பயன்படுகிறது.
<track> – இது ஒலிக்கோப்பு / ஒளிக்கோப்புகளுக்கான உரையை text track-ஐப் பயன்படுத்தி வெளிப்படுத்த உதவுகிறது. 
Drawing :-
<canvas> – இது திரையில் 2D / 3D படங்களைக் காட்ட/வரைய உதவுகிறது.
புதிய form tags :-
<data list> – பல options-ஐக் கொடுத்து, நாம் தேர்வு செய்யும் வசதியைத் தருகிறது.
<keysen> – keypair என்ற form field-ஐ தருகிறது.
<output> – திரையில் ஒரு நிரலின் வெளிப்பாட்டைக் காட்ட உதவுகிறது.

HTML5 – மாற்றங்களும் நீக்கங்களும்

HTML4-ன் சில கூறுகள் HTML5-ல் மாற்றப்பட்டும் நீக்கப்பட்டும் உள்ளன. அவை பின்வருமாறு.
மாற்றங்கள் :-
<a> – ஆனது hyperlink இணைப்பு தர உதவுவதோடு , HTML5-ல் <a> … </a>-க்கு இடையே பல tags-ஐப் பயன்படுத்தவும் அனுமதிக்கிறது.
<a href="kaniyam.com">
   <h1>..</h1>
   <p>..</p>
</a>
<hr> – இது ஒரு கிடைமட்டக் கோடு வரைகிறது. கட்டுரையில் ஒரு மாற்றம் உண்டாவதையும் குறிக்கிறது.
நீக்கங்கள் :-
<acronym> , <applet> போன்றவை நீக்கப்பட்டுள்ளன. <applet>-க்கு பதிலாக <object>-ஐப் பயன்படுத்தலாம். மேலும்
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframe>
<strike>
<tt> ஆகியவையும் நீக்கப்பட்டுள்ளன.
<strike>, <s> ஆகியவை எழுத்துக்களின் மேல் கோடிடப் பயன்பட்டன. இனி <del> என்று பயன்படுத்த வேண்டும்.

HTML5 attributes:

HTML-ல் உள்ள பல்வேறு tags-ன் தன்மையைத் தீர்மானிக்க attributes பயன்படுகின்றன. இத்தகைய attributes-க்கு பெயரும் (name) மதிப்பும் (value) இருக்கும்.
உதாரணம்: 
இவற்றை basic attributes, custom data attributes என இருவகையாகப் பிரிக்கலாம்.

1. Basic attributes:

id :-
இது html file-ல் உள்ள ஒவ்வொரு tag-க்கும் ஒரு பெயரைத் தருகிறது. இந்த பெயரைப் பயன்படுத்தி css மற்றும் javascript-ல் ஒவ்வொரு tag-ஐயும் அணுகலாம்.
Class :-
ஒரே பண்புகளைக் கொண்ட பல்வேறு tags-ஐ class மூலம் பெயரிடலாம். அவ்வாறே ஒரே class name-ஐக் கொண்டு பல்வேறு tags-ஐயும் குறிப்பிடலாம்.
 
Style :-
Inline css மூலம் tags-ன் வெளிப்பாட்டை அழகுபடுத்த உதவுகிறது.
உதாரணம்: 
<div class="styles" id="myDiv">
/*...*/
</div>

2. Custom data attributes:

நமது தேவைக்கேற்றபடி புதுப்புது attributes-ஐ சேர்த்துக்கொள்வதே custom data attributes எனப்படும். இது data-name = value என்றவாறு இருக்கும். அதாவது data- எனத் தொடங்கி  எந்தப் பெயரை வேண்டுமானாலும் கொடுக்கலாம். இத்தகைய custom data attributes-ஐ css, javascript கொண்டு அணுகலாம்.
உதாரணம்:
<div id="customDiv" data-type="programming" data-level="senior">
    /*...*/
 </div>
ஒரு attribute-ன் மதிப்பினை javascript (js) கொண்டு பெறுதல்:
ஒரு html5 element-ஐ js கொண்டு அணுகுவதற்கு அதற்கு ஒரு unique id வேண்டும். பின்னர் getElementbyId() எனும் js function கொண்டு அதை அணுக்கலாம்.
var mydiv=document.getElementById('customDiv')
இது பின்வரும் html5 element-ஐ அணுகுகிறது.
<div id="customDiv" data-type="programming" data-level="senior">
    /*...*/
 </div>

 

இந்த custom மதிப்புகளை பின்வரும் இரு வழிகளில் பெறலாம்.
1. getattribute() method
var mydiv=document.getElementById('customDiv')

//Using  getAttribute() property
var type=mydiv.getAttribute("data-type"); //returns "programming"
customDiv.setAttribute("data-type", "testing"); //changes "data-type" to "testing"
customDiv.removeAttribute("data-type"); //removes "data-type" attribute entirely

 

2. dataset property ஐ அணுக
//Using JavaScript's dataset property
var type=mydiv.dataset.type; //returns "programming"
customDiv.dataset.type=testing; //changes "data-brand" to "testing"
customDiv.dataset.type=null; //removes "data-brand" attribute
முழு உதாரணம் இங்கே
 <!DOCTYPE html>
<html>
    <head> 
        <title>Sample</title> 
        <meta charset="utf-8" /> 
    </head>   
    <body>
        <div id=”customDiv” data-type="programming" data-level="senior"> 
        </div> 
        <script>
             var type=mydiv.getAttribute("data-type");  
             customDiv.setAttribute("data-type", "testing");
             customDiv.removeAttribute("data-type");
        </script>
    </body>
</html>

Leave a Reply

%d bloggers like this: