.
HTML ஆனது முதன் முதலாக Tim Berners-Lee என்பவரால்
அறிமுகப்படுத்த ;போது அது இன்டெர்னெட் டாக்குமெண்ட்களை ஃபார்மட் செய்வதற்கும் அவற்றை
ஒன்றுக்கொன்று link செய்வதற்கும் பயன்படுததப்பட்ட்து.அப்பொழுது வெப் என்பது உரைநடை
வடிவத்திலும் மற்றும் அடிப்படைத்தேவைக்காகவும் பயன்படுத்தப்ப்பட்ட்டது.அடிப்படை
layout தேவைகளான page title,section title,paragraph,list போன்றவற்றிற்கே அப்பொழுது
பயன்பட்டது.
வெப் ஆனது வளரவளர மற்றும் graphical browsers அறிமுகமான
பொழுது அதன் தேவைகள் அதிகப்பட்டன.tables,imagaes ,font style மற்றும் frame என தேவைகள்
மாறின. 1997-ல் சரியான கட்டமைப்பில் html 4 அறிமுகப் படுத்தப்பட்டது.
இவையெல்லாம் இருந்தாலும் வெப் பக்கத்தின் தேவைகள்
இருந்து கொன்டே இருந்தது பிறகு css 3 அறிமுகப்படுத்தப் பட்டது. Css3 ஆனது html –க்கு
ஒரு மாற்று நிரலாக இருந்த்தது.html என்பது வெப் பக்கத்தின் structure –ஐ உருவாக்குவதற்கும்
CSS 3 என்பது அதன் DESIGN செய்வதற்கும் பயன்படுகின்றது.
மொபைல் மற்றும் மல்டி மீடியா வின் வளர்ச்சி ஆகியவை
HTML 5 உருவாகுவதற்கு காரணமாய் இருந்தது.இப்பொழுது HTML 5 மற்றும் CSS3 ஆகியவை ஒன்றுக்கொன்று
இணைந்தே பயன்படுகின்றது.
HTML என்பது
தோன்றியதிலிருந்து இது வரை வெப் பக்கத்தின் Layout –ல் முக்கிய பங்கு வகிக்கின்றது.
படம் 1
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Sample</title>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
</ul>
</nav>
<div id="mainContent">
<aside>
Aside
</aside>
<section>
<p>
Section 1
</p>
</section>
<section>
Section 2
<article>
Article 1
</article>
<article>
Article 2
</article>
<article>
Article 3
</article>
</section>
</div>
<footer>
Footer
</footer>
</body>
</html>
Html -5 ன் புதிய உறுப்புகள்:
Section-ஒரு வெப் பக்கத்தின் பகுதி அல்லது முழுமை.
Article- ஒரு கட்டுரை
(உதாரணமாக ப்லாக்போஸ்ட்)போன்றவை.
Header-இணையப்
பக்கத்தின் மேற்பகுதி. இவை image ஆகவும் இருக்கலாம்.
nav- இது ஒரு முக்கியமான
பகுதி. இதில் ஒரு பக்கத்தில் இருந்து மற்றொரு பக்கத்திற்கு navigation செய்வதற்கு தேவையான
மெனு போன்றவற்றைக் கொண்டிருக்கும்.
Aside-வெப் பக்கத்தின்
ஒரு பகுதி. இது உள்ளடக்கத்தின் ஒரு பகுதியையோ அல்லது விளம்பரங்களையோ கொண்டிருக்கலாம்.
figure- chart
அல்லது video கொண்டிருக்கும் பகுதி.
Footer-வெப் பக்கத்தின்
கடைசி பகுதி copy right போன்ற வற்றைக் கொண்டிருக்கும்.
Video-வீடியோவைக்
காண்பிக்கப்பயன் படுகின்றது.
audio-ஆடியோவை
ஒலிப்பதற்கு பயன்படுகின்றது.
Html-5-ல் புதிய
பண்புகள்(Attributes)
Autofocus-உள்ளீட்டூறுப்புகளில்
பக்கம் லோட் ஆகும் பொழுது அதில் கர்சர் இருக்கும்.
Placeholder-text
மற்றும் textarea போன்ற வற்றில் உள்ளீடு கொடுக்கும் பொழுது hint காண்பிக்கும்.
Required-இது இன்புட்
ஆனது கட்டாயம் கொடுக்கப்படவோ அல்லது தேர்ந்தெடுக்கப்படவோ(select) வேண்டும் என்பதைக்
குறிக்கின்றது.
min, max,
step,
multiple,
pattern-இவை உள்ளீட்டை validate செய்யப் பயன்ப்டுகின்றது.
Async-வெப் பக்க
உறுப்புகளை Asynchronous ஆக லோட் செய்கின்றது.
Seemless-பார்டர்
இல்லாத iframe காண்பிக்கப் பயன் படுகின்றது.
Reversed-
ordered list –ன் உறுப்புகளின் வரிசையை மாற்றுகின்றது.
இன்புட் எலெமெண்ட்டின் type attributes.
Tel-உள்ளீடு ஆனது
சரியான தொலைபேசி வடிவத்தில் உள்ளதா எனசரி பார்க்கும் .
search-இது உரை
வடிவத்தில் இருக்க வேண்டும்
url-பயனாளரை இணையப்பக்கத்தின் url-ஐ சரியான வடிவத்தில்
கொடுக்கப் பயன்படுகின்றது.
Email-email முகவரியை
சரியான வடிவில் கொடுக்கப் பயன்படுகின்றது.
DateTime-சரியான தேதி மற்றும் நேரத்தை உள்ளீடாக் கொடுக்கப் பயன்படுகின்றது.
DateTime-சரியான தேதி மற்றும் நேரத்தை உள்ளீடாக் கொடுக்கப் பயன்படுகின்றது.
Date,month,week,,time-இவை
முறையே தேதி,மாதம்,வார எண் மற்றும் நேரத்தை உள்ளீடாக கொடுக்கப் பயன்படுகின்றது.
datetime-local-
உள்ளூர் தேதி மற்றும் நேரத்தைக் கொடுக்கபயன்படுகின்றது
number-எண் ஆனது
உள்ளீடாக கொடுக்கப்பயன்படுகின்றது.பாசிடிவ் அல்லது நெகடிவ் ஃப்லோட்டிங் எண்ணை உள்ளீடாக
கொடுக்கலாம்.
Range-எண்ணை ஒரு
குறிப்பிட்ட வரம்பிற்க்குள் உள்ளீடு கொடுக்கப் பயன்படுகின்றது. இந்த எண்ணானது மேக்ஸ்,மின்,ஸ்டெப்
(max,min,step) போன்ற கூடுதல் பண்புகள் மூலம் நிர்வந்திக்கப் படுகின்றது.
color-ஒரு குறிப்பிட்ட
வண்ணத்தின் Rgb மதிப்பை hexadecimal வடிவத்தில் கொடுக்கப்பயன்படுகின்றது.உதாரணத்திற்கு
வெள்ளை நிறமானது #ffffff. எங்கின்ற எண்னின் மூலம் கொடுக்கப்படும்.
-நன்றி
முத்து கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment