You are on page 1of 229

எ�ய த��� HTML

�.��யா

���� ெவ��� : http://FreeTamilEbooks.com

This work is licensed under a Creative Commons


Attribution-ShareAlike 3.0 Unported License.
உ�ளட�க�
எ�ய த��� HTML
HTML
உ�ைம
சம��பண�
ஆ��ய� உைர
உதாரண�க�
ெபா�ளட�க�
HTML - அ��க�
HTML tags
Paragraph
Line Break
Headings
Bold & Italic tags
Big & Small tags
Font
Strike Superscript & Subscript tags
Preservative tag
Lists
Tables
Links
Frames
Forms
HTML5
HTML5-� ��யன
HTML5 - ��ய ப�க� க�டைம���
��க� – New structural elements
HTML5 – � ��ய வச�க�
HTML5 – மா�ற�க�� ��க�க��
HTML5 attributes
HTML5-� �� input வச�க�
HTML5 – �� HTML form elements
HTML5 – Storage
HTML5 Application cache & Canvas
HTML5 Canvas
Scalable Vector Graphics - SVG tag
Embed tag
Drag & Drop
Geolocation
Server Sent Events
���ைர
ஆ��ய� ப��
ஆ��ய�� �ற ����க�
க�ய� ப��
ந�ெகாைட
எ�ய த��� HTML
�த� ப��� ஏ�ர� 2015

ப����ம� © 2015 க�ய�.

ஆ��ய� – �.��யா –
nithyadurai87@gmail.com

�ைழ ���த�: த.��வாச� –


tshrinivasan@gmail.com

வ�வைம��: த.��வாச�

அ�ைட�பட� – மேனா� �மா� –


socrates1857@gmail.com
HTML
HTML எ�ப� இைணய� ப�க�கைள
உ�வா��� ஒ� க�� ெமா�.
இைத, இ�த �� எ�ைமயாக அ��க�
ெச��ற�.

த��� க�ட�ற ெம�ெபா��க�


ப��ய தகவ�கைள “க�ய�” �� மாத இத�,
2012 �த� ெவ���� வ��ற�.இ��
ெவ�யான HTML ப��ய க��ைரககைள
இைண�� ஒ� �� ��தகமாக ெவ���வ��
ெப� ம���� ெகா��ேறா�.

உ�க� க���கைள��, �ைழ


���த�கைள�� editor@kaniyam.com ��
��ன�ச� அ��பலா�.

http://kaniyam.com/learn-html-in-tamil எ�ற
�கவ��� இ��� இ�த �ைல ப��ற�க�
ெச�யலா�. உ�க� க���கைள�� இ�ேக
ப�ரலா�.
ப��� பய� ெபற��, �ற�ட� ப����
ம�ழ�� ேவ���ேறா�.

க�ய� இதைழ ெதாட��� வள����


அைன�� அ�ப�க���� எம� ந��க�.

த.��வாச�

tshrinivasan@gmail.com

ஆ��ய�
க�ய�

editor@kaniyam.com
உ�ைம

இ�த �� ��ேய�� காம�� எ�ற


உ�ைம�� ெவ��ட�ப��ற� . இத� �ல�,
��க�

யா�ட�� ப���� ெகா�ளலா�.


���� எ�� ெவ��டலா�.
வ�க �����ய�ப��தலா�.

ஆனா�, �ல� ��தக�, ஆ��ய� ம���


www.kaniyam.com ப��ய �வர�கைள ேச���
தர ேவ���. இேத உ�ைமகைள யாவ����
தர ேவ���. ��ேய�� காம�� எ�ற
உ�ைம�� ெவ��ட ேவ���.

�� �ல� :
http://static.kaniyam.com/ebooks/Learn-HTML-in-
Tamil.odt

This work is licensed under a Creative Commons


Attribution-ShareAlike 3.0 Unported License.
சம��பண�
இ�த� ��தக�ைத� ப��க �����
அைனவ���� இ�த� ��தக� சம��பண�.
ஆ��ய� உைர
அ�ேப �வ�.

எ�னடா HTML ��தக���கான ஆ��ய�


உைரைய ‘அ�ேப �வ�’ எ��
ெதாட���ேறேன எ�� யா�� பய�� �ட
ேவ�டா�. த�ேபா� ஒ��ல மாத�களாக,
கட�� ப��ய ஆரா����� ஈ�ப��
வ��ேற�. பல �� �ஷய�கைள
உண��ேற�. நா� அைனவ��, ந� வா��ைக
�க�� ச�ேதாஷமாக அைமய, பண� ேத�
ஓ��ேறா�. ஆனா�, ஓேர இட��� பண�
���பைத�ட, ேதைவ��ேளா��� ப���
ேபா�, அ�க ச�ேதாஷ� �ைட��ற�.
இ�வா� �ற��� உத�� ேபா�, நா�
ஆைச�ப�� �ஷய�க� தானாகேவ
நட���றன. உத�யான�, பணமாக ம��ேம
இ��க ேவ��ய��ைல. ச�யான ேநர���
ெசா�ல�ப��, அ�பான, ஆதரவான,
ந���ைக���� வா��ைதகளாகேவா, ��
�ஷய�கைள க��� த�வதாகேவா �ட
இ��கலா�. இ�வா� ப��வதா� �ைட���
ச�ேதாஷ�ைதேய கட�� த�ைமயாக
அ��ேற�.

எனேவ, என�� ம���� �ைட�க, பண�


ம��ேம ேபா�மானத�ல. எ��ட�
உ�ளவ�ைற �ற��� ப��த�, நா�
அ��தவ�ைற �ற��� க���த�
ேபா�றவ�ைற� ெச�தாேல, நா� �ைன���
�ஷய�க� இய�பாகேவ நட�� ����றன
எ�பைத உண��ேற�.

த��� க�� ��ப�கைள� ப�ர, ஒ�


களமாக உ�ள ‘க�ய�’ தள���, இ�வைர
ெவ�யான என� ����க��� வாசக�க�
த�� ஆதர� ெப�ம���� அ���ற�.
“ேதம�ர� த�ேழாைச உலெக�லா� பர��
வைக ெச�த� ேவ���”

“�ற நா�� ந�ல�ஞ� சா��ர�க� த��


ெமா��� ெபய��த� ேவ���”

எ�ற பார��� ���ப�கைள


�ைறேவ��வ��, எ� ப�க���� உ�ள�
எ�பேத, �க�� ம����.

ெதாட��� ஊ�க� அ���� எ�


���ப��ன����, க�ய� ���ன����,
FreeTamilEbooks.com ���ன����,
வாசக�க���� ந��க�.
�. ��யா

�� கா��,
இ��லா��.,

21 ஏ�ர� 2015
��ன�ச�: nithyadurai87@gmail.com

வைல ப��: http://nithyashrinivasan.wordpress.com


உதாரண�க�
இ�த ��� உ�ள HTML உதாரண�க�
யா�� https://github.com/tshrinivasan/html-tamil-
book-codes இ�ேக உ�ளன.
1

HTML - அ��க�

Hyper Text Markup Language எ�பேத HTML


எ�றைழ�க�ப��ற�. இ� ஒ� வைலதள�ைத
உ�வா�க� பய�ப�� ெமா� ஆ��.

HTML ெமா�ைய� பய�ப��� gedit ேபா�ற


ஒ� Text Editor-� உ�வா�க�ப��
program-ஆன� .html எ�� ெபய�ட�
ேச��� ைவ�க�ப��. ��ன� இ� browser-�
open ெச�ய�ப��ேபா� ஒ�் அழ�ய
வைலதளமாக ெவ��ப��.

gedit-� ெகா��க�ப�� சாதாரண text-ஆன�


ஒ��ல tags-�ட� இைண�� hypertext-ஆக
மா��ற�. இ�த hypertext �லமாக browser-���
க�டைளகைள� �ற���பேத markup
என�ப��. இ�ேவ Hyper Text Markup
Language எ�� ெபய� உ�வாவத�கான
காரண� ஆ��.
2

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-ஐ
��வ�� பட��� காணலா�.

File: sample.html

<html>
<head>Rhymes</head>

<body>

Most children love being told Nursery Rhymes.


Even elders love to hear these rhymes. They are
sweet to our ears forever. The rhymes speak
volumes about the interest shown by the education
department to enthuse the children to speak out.

</body>

</html>

இ�த sample.html எ�� program, firefox


browser-� open ெச�ய�ப��ேபா� அ�
��வ�மா� அைம�ற�. இ�� title tag-���
ெகா��க�ப�ட Rhymes எ�� வா��ைத
browser-� தைல�பாக “Rhymes – Mozilla
Firefox” எ�� அைமவைத கவ��க��.
��ன� body tag-��� ெகா��க�ப�டைவ
content-ஆக ெவ�யா� உ�ள�.
3

Paragraph

ப��கைள ெவ��ப��த உத�� p tag-�


���ய��வ�ைத அ��� ெகா�ள
��வ�மா� ��� ப��கைள body tag-���
அ��� அதைன browser-� �ற�� பா��க��.

File: paragraph.html

<html>

<head><title>Nursery Rhymes</title></head>

<body>

Most children love being told Nursery Rhymes. The


most popular rhymes are listed here. Even elders
love to hear these rhymes. They are sweet to our
ears forever. These rhymes speak volumes about the
interest shown by the education department to
enthuse the children to speak out.

The list is clearly not exhaustive but it is believed


that a good cross section of famous poems for
children have been included. We have selected the
most famous Nursery Rhymes for children. We have
done our best to collect all the Nursery Rhymes
from all sources and add them here for your
reference. The addition of more and more rhymes is
going on everyday.

These Nursery Rhymes for children have been


passed down over the years and due to the short
nature of the verse can easily be remembered by
most children from a very early age. Analysis of
these Nursery Rhymes will reflect the historical
background in which these Nursery Rhymes were
written.
</body>

</html>
இ�� body tag-��� உ�ளைவ browser-�
ெவ��ப���ள�. ஆனா� அேத வ���
paragraph-ஆக அைவ ெவ��பட��ைல.
ஏென�� body tag-��� உ�ளைவ browser-�
ெவ��படேவ��� எ�ப� ம��ேம இ��
க�டைள. அைவ paragraphs-ஆக
ெவ��படேவ��� எ�� க�டைளைய
அ��கேவ இ�த <p> tag பய�ப��ற�.

இ�ேபா� <p> tag-ஐ ஒ�ெவா� ப����


ஆர�ப����, அத�ைடய இைண tag-ஐ
ப���� ����� அைம�� program-ஐ
��வ�மா� மா�ற��.

File: paragraph.html

<html>

<head><title>Nursery Rhymes</title></head>

<body>

<p>Most children love being told Nursery Rhymes.


The most popular rhymes are listed here. Even
elders love to hear these rhymes. They are sweet to
our ears forever. These rhymes speak volumes about
the interest shown by the education department to
enthuse the children to speak out.</p>

<p>The list is clearly not exhaustive but it is


believed that a good cross section of famous poems
for children have been included. We have selected
the most famous Nursery Rhymes for children. We
have done our best to collect all the Nursery
Rhymes from all sources and add them here for
your reference. The addition of more and more
rhymes is going on everyday.</p>

<p>These Nursery Rhymes for children have been


passed down over the years and due to the short
nature of the verse can easily be remembered by
most children from a very early age. Analysis of
these Nursery Rhymes will reflect the historical
background in which these Nursery Rhymes were
written.</p>

</body>

</html>
இ�ேபா� ப��க� browser-� ெவ��ப�வைத�
காணலா�.
align attribute:
இ�த align எ�� attribute, <p> tag-�ட�
இைண�க�ப��ேபா�, அைவ ப��கைள
browser-� எ�த� ப�க��� ெவ��ப��த
ேவ��� எ�பைத உண��த� பய�ப��ற�.
இ�த align attribute-�� அ��க�ப�� ���
�தமான ம���கைள� (left, right, center)
ெபா���, அைவ ப��கைள இட��ற��ேலா,
வல��ற��ேலா அ�ல� ம���ேலா
ெவ��ப����. இ� ��வ�மா�.

File: pattribute.html

<html>

<head><title>Nursery Rhymes</title></head>

<body>

<p align=”left”>Most children love being told


Nursery Rhymes. The most popular rhymes are
listed here. Even elders love to hear these
rhymes.</p>

<p align=”center”>The list is clearly not exhaustive


but it is believed that a good cross section of
famous poems for children have been included. </p>

<p align=”right”>These Nursery Rhymes for children


have been passed down over the years and due to
the short nature of the verse can easily be
remembered by most children from a very early
age.</p>

</body>

</html>
4

Line Break

அ��த��த வ�கைள ெவ��ப��த உத�� br


tag-� ���ய��வ�ைத அ��� ெகா�ள
��வ�மா� ெதாட���யான வ�கைள body
tag-��� அ��� அதைன browser-� �ற��
பா��க��.

File: lines.html

<html>

<head><title>Chubby Cheeks Rhyme</title></head>

<body>
Chubby cheeks, dimple chin

Rosy lips, teeth within

Curly hair, very fair

Eyes are blue, lovely too

Teacher’s pet, is that you ?

Yes! Yes! Yes!

</body>

<html>
இ��� body tag-��� உ�ளைவ browser-�
ெவ��ப����ட�. ஆனா� அைவ
அ��த��த வ�களாக ெவ��பட��ைல.
இைவ அ��த��த வ�களாக
ெவ��படேவ��� எ�� க�டைளைய
அ��கேவ இ�த <br> tag பய�ப��ற�.

File: lines.html

<html>

<head><title>Chubby Cheeks Rhyme</title></head>

<body>

Chubby cheeks, dimple chin<br>

Rosy lips, teeth within<br>

Curly hair, very fair<br>

Eyes are blue, lovely too<br>

Teacher’s pet, is that you ?<br>

Yes! Yes! Yes!

</body>

<html>
இ�ேபா� <br> tag-ஐ ஒ�ெவா� வ���
இ����� அைம�க��. இத�� இைண tag
இ�ைல.

இ�ேபா� browser- � இைவ அ��த��த


வ�களாக ெவ�யாவைத� காணலா�.
5

Headings

ஒ��ல வா��ைதகைள தைல�பாக அைம�க


����னா�, அ�த வா��ைதக��� ����
���� headings-�கான இைண tags-ஐ�
பய�ப��தலா�.

<h1>, <h2>, <h3>, <h4>, <h5> ம��� <h6>


எ�� 6 வைக headings tags உ�ளன. இைவ
�ைறேய தைல��க�� அள�ைன ெகா�ச�
ெகா�சமாக �ைற��� ெகா�ேட வ��. இ�
��வ�மா�.

File : heading.html
<html>

<head><title></title></head>

<body>

<h1>History of India (H1)</h1>

<h2>1.Prehistoric era (H2)</h2>

<h3>1.1 Stone Age (H3)</h3>

Isolated remains of Homo erectus in Hathnora in


the Narmada Valley in central India indicate that
India might have been inhabited since at least the
Middle Pleistocene era somewhere between 500,000
and 200,000 years ago.

<h4>1.2 Bronze Age (H4)</h4>

The Bronze Age in the Indian subcontinent began


around 3300 BCE with the early Indus Valley
Civilisation.
</body>

<html>

இ�� History of India எ�ப� �க�ெப�ய


தைல�பாக��, அதன��� உ�ள Prehistoric
era எ�ப� ெகா�ச� ெப�ய தைல�பாக��,
அதன��� உ�ள Stone Age, bronze Age
எ�பைவ ��ய தைல��களாக��, h1, h2.h3,h4
எ�பத�ேக�ற வைக�� ெவ��ப���ளன.
6

Bold & Italic tags

ஒ��ல வா��ைதகைள/வ�கைள bold-ஆக


கா��வத�� <b> tag-�, சா�ெவ����களாக�
கா��வத�� <i>-� பய�ப��ற�. இைவ
இைண tags-ஐ� ெப������. எனேவ
இவ�ைற நா� ����ய வா��ைதக���
���� ���� இைண�தா�, அைவ
bold-ஆக��, சா�ெவ����க���
ெவ��ப��. இ� ேபா�ேற <u>,</u> எ��
tag வா��ைதகைள அ��ேகா�ட உத��.
இைவ ��வ�மா�.

File: bi.html
<html>

<head><title></title></head>

<body>

<B>Kaniyam is a free monthly E-Magazine in


tamil for foss.</B><br>

<I>Authors write on various topics on Free


software.</I><br>

<u>Shrinivasan is the editor of Kaniyam.</u>

</body>

</html>
இ�� �த� வ� bold எ����க���,
இர�டாவ� வ� சா�ெவ����க���,
��றாவ� வ� அ��ேகா����
ெவ��ப���ள�.
7

Big & Small tags

சாதாரண அளைவ�ட ச�� ெப�ய அள��


எ����கைள ெவ��ப��த <big> எ��
tag-�, சாதாரண அளைவ�ட ச�� ��ய
அள�� எ����கைள ெவ��ப��த <small>
எ�� tag-� பய�ப��ற�. இ� ��வ�மா�.

File: bs.html

<html>

<head><title>Chubby Cheeks Rhyme</title></head>

<body>
<big>Kaniyam is a free monthly E-Magazine in
tamil for foss.</big><br>

Authors write on various topics on Free


software.<br>

<small>Shrinivasan is the editor of Kaniyam.


</small>

</body>

<html>

இ�� �த� வ� சாதாரண அளைவ�ட ச��


ெப�ய அள���, இர�டாவ� வ� சாதாரண
அள���, ��றாவ� வ� ச�� ��ய
அள��� ெவ��ப���ள�.
8

Font

எ����க�� அள�, �ற� ம��� அத�


வ�வ�ைத� ����ட <font> tag பய�ப��ற�.
இவ���காக �ைறேய size, colour ம��� face
ேபா�ற attributes இவ��ட�
பய�ப��த�ப���றன. இைவ ���� நா�
எைத� ����ட �����ேறாேமா, அ�த
attribute-ஐ font tag-�ட� ேச����
����டலா� அ�ல� இைவ ��ைற�� ஒேர
ேநர���� ����டலா�. இ� ��வ�மா�.

File: font.html

<html>
<head><title></title></head>

<body>

<font color=”green”>Kaniyam is a free monthly


E-Magazine</font><br>

<font size=5>Authors write on various topics on


Free software.</font><br>

<font color=”blue” size=12 face=”Arial”>Author :


Shrinivasan</font></small>

</body>

<html>
இ�� �த� வ� ப�ைச �ற��� ெவ��பட
ேவ��� எ�� ம��� ெகா��க�ப���ள�.
இர�டாவ� வ��� அள� 5-ஆக இ��க
ேவ��� எ�� ெகா��க�ப���ள�.
��றாவ� வ��� எ����க� �ல
�ற����, 12 அள���, Arial
எ����களாக�� ெவ��பட ேவ��� எ��
��� attributes-� ெகா��க�ப���ள�.
எனேவ இத� ெவ��பா� ��வ�மா�
இ����.
9

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-� காணலா�.
File: ss.html

<html>

<head><title></title></head>

<body>

The new price of this product is


<strike>Rs.20000</strike> Rs.10000<br>

The chemical formulae of water:


H<sub>2</sub>0<br>

An expression: x<sup>2</sup>+y<sup>2</sup>

</body>

<html>
10

Preservative tag

Preservative tag-ஆன� body tag-���


உ�ளவ�ைற அத� வ�வ� ெகா�ச� �ட
மாறாம� அ�ப�ேய browser-� ெவ��ப��த
உத��ற�. உதாரண���� ��வ�மா� ஒ�
program-ஐ <pre> tag இ�லாம� அ���,
browser-� �ற�� பா��க��.

File: pre.html

<html>

<head><title></title></head>

<body>
<center>Kannan Store</center>

Customer Name: T.Shrinivasan

Product Price

Hamam soap Rs.25

Sugar Rs.50

Rice Rs.150

</body>

</html>

body tag-��� நா� ஒ�ெவா� வ����


ெகா��த இைடெவ�, tag space எ�லா�
�ற�க��க�ப��, ெவ�� எ����க� ம���
browser-� ெவ��ப����ட�. இ�ேபா�
அேத program-ஐ pre tag ெகா��� browser-�
open ெச�� பா��க��.

File: pre.html

<html>

<head><title></title></head>

<body>

<pre>

<center>Kannan Store</center>

Customer Name: T.Shrinivasan

Product Price

Hamam soap Rs.25


Sugar Rs.50

Rice Rs.150

</pre>

</body>

</html>
இ�ேபா� நா� ெகா��த எ���� வ�வ�
�ட மாறாம�, அைவ browser-�
ெவ��ப�வைத� காணலா�. எனேவதா�
<pre> tag �க�� பய��ளதாக�
க�த�ப��ற�.
11

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)பய�ப��த ேவ���.

இ�த ��� �ைற��� �வர�க�


ப��ய�ட�ப�வைத ��வ�� உதாரண���
காணலா�.

File: list1.html

<html>

<head><title></title></head>

<body>

Types of Testing
<ol>

<li>Functional Testing</li>

<li>Non-functional testing</li>

</ol>

Types of non-functional testing

<ul>

<li>Performance testing</li>

<li>Automation testing</li>

</ul>

<dl>

<dt>Functional Testing</dt>

<dd>The functionality of an application will be


tested.<dd>
<dt>Performance Testing</dt>

<dd>The performance of an application will be


tested.<dd>

</dl>

</body>

<html>

Combined Lists
ஒ�் main list-� �வர�கைள
ப��ய���ேபா�, அத��� sublist-ஐ
உ�வா��வேத combined listsஎன�ப��.
��வ�� உதார���� ordered list-� ��
ப��ய�ட�ப���ள Functional Testing எ��
�வர��� �� ஒ��ல தகவ�க� Unordered list
�ைற�� ப��ய�ட�ப���ளைத�
காணலா�. அ�வாேற Non-functional testing
எ�� �வர��� ��� தகவ�க� unordered list
�ைற�� ப��ய�ட�ப���ளன.

File: list2.html

<html>

<head><title></title></head>

<body>

Types of Testing

<ol>
<li>Functional Testing</li>

<ul><li>Integration testing</li><li>System
testing</li></ul>

<li>Non-functional testing</li>

<ul><li>Automation testing</li><li>Regression
testing</li></ul>

</ol>

</body>

<html>

இத� ெவ��பா� ��வ�மா� இ����.


12

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-ஐ� ��வ�மா�
காணலா�.

File: table1.html

<html>

<head><title></title></head>

<body>

<table>

<tr>
<th>Name</th>

<th>Marks</th>

<th>Rank</th>

</tr>

<tr>

<td>Viyan</td>

<td>1200/1200</td>

<td>First</td>

</tr>

<tr>

<td>Harini</td>

<td>1180/1200</td>

<td>Second</td>
</tr>

</table>

</body>

</html>

Border, height & width attributes


Border எ�� ப�� ஒ�் table-�� அழ�ய
border-ஐ உ�வா��வத���, height எ�� ப��
ஒ�் table-� �ள�ைத மா�� அைம�பத���,
width எ�� ப�� ஒ�் table-� அகல�ைத
மா�� அைம�பத��� பய�ப��ற�.
இைவ ���� ெதாட�க��� நா�
ெகா����ற <table> tag-�ட� இைண�ேத
காண�ப��. ெவ�� border எ�� வா��ைதைய
ம��� ெகா��தா� ேபா�மான�. ேம��
த�மனான border ேவ��� எ�� அத�� ஒ�
ம���� தரலா�. உதாரண� – border=3

height ம��� width-��� ெகா��க�ப��


ம��� pixel-க�� எ���ைக�ேலா அ�ல�
சத��தமாகேவா இ����. ெபா�வாக
சத�த��� ெகா��ப� ����ெகா�ள ச��
�லபமாக இ����.

இதைன ��வ�� உதாரண��� காணலா�.

File: table2.html

<html>

<head><title></title></head>

<body>
<table border width=”60%” height=”40%”>

<tr>

<th>Name</th>

<th>Marks</th>

<th>Rank</th>

</tr>

<tr>

<td>Viyan</td>

<td>1200/1200</td>

<td>First</td>

</tr>

<tr>

<td>Harini</td>
<td>1180/1200</td>

<td>Second</td>

</tr>

</table>

</body>

</html>

Background colour attribute


இ�த� ப�� table-� �ற�கைள�
ெகா��வர� பய�ப��ற�. Bgcolor=”yellow”
என <table> tag-�ட� இைண��
ெகா����ேபா� �� table-� ம�ச� �ற���
காண�ப��. இ�த� ப��ைன ஏேத�� ஒ�்
cell-�� ம��� ெகா����ேபா� அ�த இட�
ம��� நா� �������ள �ற���
காண�ப��.

இதைன� ��வ�� உதாரண��� காணலா�.

File: table3.html

<html>

<head><title></title></head>

<body>

<table border bgcolor=”yellow”>

<tr>

<th>Name</th>

<th>Marks</th>
<th>Rank</th>

</tr>

<tr>

<td width=”80%” height=”20%”>Viyan</td>

<td>1200/1200</td>

<td bgcolor=”White”>First</td>

</tr>

<tr>

<td align=”center”>Harini</td>

<td>1180/1200</td>

<td>Second</td>

</tr>

</table>
</body>

</html>
13

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 ஆ��.

File: link1.htm

<html>

<head><title>Nursery Rhymes</title></head>

<body>

<center> Introduction – Rhymes</center>

<br>

<br>
Most children love being told Nursery Rhymes. The
most popular rhymes are listed here. Even elders
love to hear these rhymes. They are sweet to our
ears forever. These rhymes speak volumes about the
interest shown by the education department to
enthuse the children to speak out.

<br>

<br>

<a href=”link2.htm”>Click here for Chubby Cheeks


Rhyme</a>

</body>

</html>

ேம�க�ட program-� href-� ம��� link2.htm


எ�� காண�ப�வதா� ��வ�� program-��
ந�ைம அைழ��� ெச���.

link2.htm ��வ�மா�.
File: links2.htm

<html>

<head><title>Chubby Cheeks Rhyme</title></head>

<body>

Chubby cheeks, dimple chin<br>

Rosy lips, teeth within<br>

Curly hair, very fair<br>

Eyes are blue, lovely too<br>

Teacher’s pet, is that you ?<br>

Yes! Yes! Yes!<br>

<br>

<a href=”link1.htm”>Click here to go back to


Introduction</a>
</body>

</html>

இ�த program-� கைட��� உ�ள click here to


go back to introduction எ�பைத நா�
ெசா����ேபா� href-� ம��� link1.htm
எ����பதா�, இ� ந�ைம ��ைதய
program-�ேக ெகா�� ெச���.

எனேவ இத� ெவ��பா�க� ��வ�மா�


அைம��.
Internal Links
ஒேர ப�க����� உ�ள ப�ேவ� ப��க���
இைண�� த�வத�� Internal Links
பய�ப���றன.

இ�� இைண�� தர ேவ��ய ப���� ஒ�


name(ெபய�) தர ேவ���. �� <a
href=”#name”> எ�� எ�� இைண�� தரலா�.

File: internallink.html

<html>
<head><title>Internal Links</title></head>

<body>

<a href=”#bottom”> Goto Bottom</a>

<p> A big para goes here </p>

<a name=”bottom”></a>

</body>

</html>

External Links
நா� உ�வா��ய program-க���ைட��
links-ஐ உ�வா��வத���, ப�ேவ�
வைலதள�ப�க�க��� links-ஐ
உ�வா��வத��� ெப�ய ���யாச� ஒ���
இ�ைல. ெவ�� href-� ம��� ம��ேம
மா��. ப�ேவ� வைலதள ப�க�க���மான
���கவ�ைய�� href-� ம��பாக�
ெகா����ேபா�, அ� ந�ைம ப�ேவ�
வைலதள�க���� ெகா�� ெச���.

இதைன நா� ��வ�� program-� காணலா�.

File: externallinks.htm

<html>

<head><title></title></head>

<body>

<a href=”http://www.kaniyam.com/all-releases
/”>Click here for Kaniyam magazines</a><br>

<a href=”http://www.kaniyam.com/mysql-book-in-
tamil/”>Click here for MySQL book</a><br>

<a href=”mailto:nithyadurai87@gmail.com”>send me
your comments</a><br>

</body>
</html>

href-� ம��பாக mailto: எ�பைத� ெதாட���


ஏேத�� ஒ�் �கவ�ைய� ெகா��தா�,
அ�த �கவ��� ��ன�ச� அ��ப�ப��.
இ� ேம�க�ட program-� ��றாவதாக
இட�ெப���ள�. ேம�க�ட program-�
ெவ��பா� ��வ�மா� அைம��.

இ�� �த� link-ஐ ெசா����ேபா� ��வ��


ெவ��பா��, இர�டாவ� link-ஐ
ெசா����ேபா� அ��த பட��� உ�ள
ெவ��பா��, கைட�யாக உ�ள link-ஐ
ெசா����ேபா� என� �கவ��� ஒ�்
��ன�ச�� ெச��த�ப��.
14

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-ஐ ��வ�� உதாரண���
காணலா�.

File: frame1.htm

<html>

<head><title></title></head>

<frameset cols=”30%,*”>

<frame src=”frame2.htm” name=”left”/>

<frame src=”table1.html” name=”right”/>

</frameset>
<noframes>

Your browser doesn’t support frames.

</body>

</html>

இ�� frameset-� cols எ�� ப��னா�


�ைரயான� இட���� வலமாக
இ�ப��களாக� ���க�ப���ள�. cols-�
ெகா��க�ப�ட ம���க� �ல� �த�
ப��யான� �ைர�� 30% இட�ைத��,
அ��த ப��யான� �த��ள இட�ைத�� (*
எ�ப� �த��ள 70% இட�)
எ����ெகா��ற�.

�ைரயான� இ�ப��களாக� ���க�படேவ,


இத��� இ� frames tag உ�ள�. �த�
frame-�� “left” எ��� இர�டாவ� frame-��
“right” எ��� ெபய����ேளா�. �த�
frame-� src-� ம��� frame2.htm
எ����பதா�, இ�த program-� ெவ��பா�
�த� frame-��� இட�ெப��.

frame2.htm எ�� program ��வ�மா�.

File: frame2.htm

<html>

<head><title></title></head>

<body>

<a href=”table1.html” target=”right”>simple


Table</a><br>

<a href=”table2.html” target=”right”>Table with


border</a><br>

<a href=”table3.html” target=”right”>Table with


colour</a>

</body>

</html>
இ�த program-� உ�ள 3 links-� left எ��
ெபய�ட�ப�ட �த� frame-��� ெவ��ப��.

இ�� target எ�� ஒ�் �� ப�� anchor


tag-� இட�ெப���ளைத�� அத� ம���
“right” எ�� இ��பைத�� கவ��க��.
இ�த� ப�ேப அ�த link-ஐ ெசா����ேபா�,
அத� ெவ��பா� �� ப�க���
இட�ெபறாம�, “right” எ�� ெபயைர�
ெகா�ட இர�டாவ� frame-� இட�ெபற
உத��.

இத� ெவ��பா� ��வ�மா�.


15

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-ஐ ��வ�மா�
காணலா�.

File: form.htm

<html>

<head><title></title></head>

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

<pre>

Name:<input type=”text” size=”25″ name=”name”/>

Phone:<input type=”text” size=”10″ name=”ph”/>

Sex:

Male<input type=”radio” name=”sex” value=”M”


checked/>

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

Languages Known:

Tamil<input type=”checkbox” name=”Language”


value=”Tamil” checked/>

English<input type=”checkbox” name=”Language”


value=”English”/>
Hindi<input type=”checkbox” name=”Language”
value=”Hindi”/>

City:

<select name=”city” size=”3″ multiple>

<option selected>Chengalpattu</option>

<option>Kanchipuram</option>

<option>Tambaram</option></select>

Address:

<textarea name=”address” rows=5 cols=25>


</textarea>

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

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

</pre>
</form>

</body>

</html>
16

HTML5
�ல� – https://commons.wikimedia.org
/wiki/File:Logozyrtare.jpg

இ�வைர நா� பா��த html-ஆன� html5


எ�� ����ற� எ����ள�. இ� பல ��ய
அ�ச�கைள வைல�தள�க�� உ�வா�க�
பய�ப��ற�. இத� �ைணெகா��
ஒ�/ஒ� ேகா��க� ம��� 2D/3D பட�க�
ஆ�யவ�ைற நம� வைல�தள���
ெவ��ப��தலா�. ேம�� தகவ�கைள
application-� ேச��ப�, அவ�ைற�
பய�ப���வ� ம��� real-time protocols �ல�
ேச��த தகவ�கைள� ப�மா�� ெகா�வ�
ேபா�ற பல �ற�பான ேவைலகைள��
javascript ம��� css ஆ�யவ���
�ைணெகா�� html5 ெச��ற�.

ேம�� வைல�தள�கைள க��,


அைலேப�, Tablet ேபா�ற ப�ேவ�
க��க�� வ�யாக� பா����ேபா��, அத�
வ�வைம��� எ��த மா�ற�� ஏ�படாம�,
வைல�தளமான� �ராக� கா��ய��க
��வ�� ��ப�க� பய�ப���றன.
�ல� – http://daphyre.deviantart.com
/art/HTML5-Logos-and-Badges-380429526

HTML5 – இைணய� ப�க��� அ��பைட�


க�டைம�ைப� ���ற�.

CSS 3 – இ� நா� �ைர�� பா��பவ�ைற


அழகா��வ�ட� user interface-ஐ��
கவ����ெகா��ற�.

Javascript – சாதாரண html ப�க�கைள


dynamic-ஆக மா�� அ�த� ப�க�க��� பல
��ய ெசய�பா�கைள அ���ற�.

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 � மா�ற உத��ற�.
17

HTML5-� ��யன

HTML5-� ��ய பல �ஷய�க�


ேச��க�ப���ளன.

Audio & Video:

Flash, silverlight ேபா�ற plugin ஏ����


பாட�, காெணா� ஆ�யவ�ைற
இைணய�ப�க�க�� ேச��கலா�.

Geolocation API:

இ�த API-ஐ� பய�ப��� பயன�க��


இ���ட �வர�, IPaddress ேபா�ற
�வர�கைள� ெபறலா�. அத��ல�
அவ�க�� இட���ேக�ற தகவ�கைள
வழ�கலா�.

Local storage:

இைணயதள����� ேதைவயான தகவ�க�


database-� �ைண��� browser-�ேய
ேச��க�ப�� வச�ைய HTML5 த���ற�.
இ�ேவ Local Storage என�ப��. இ�வா�
ேச��க�ப�� �வர�க� ேதைவயான ேபா�
ம��ேம பய�ப��த�ப�வதா�, இவ�ைற
அ�க அள�� ேச��தா�� தள��� �ற��,
ேவக�� �ைறயா�.

Drag & Drop:

ஒ� இைணய� ப�க��� ��, பயன� பட�


அ�ல� ேகா�� ஒ�ைற இ��� ���
வச�ைய எ�தாக� தரலா�. இத�� HTML4
� JavaScript ெகா�� �ைறய �ரலா�க�
ெச�ய ேவ���.

பல ��ய input வச�க�:


Form உ�வா�க� பய�ப�� input tag-� பல
��ய வச�க� ேச��க�ப���ளன. ப�ேவ�
�ற�கைள ெகா��� அ����� ஒ� �ற�ைத
ேத��ெச��மா� அைம��� வச�, ஒ�
calender-ஐ ெவ��ப�மா� ெச��
அ����� ேத�ைய ேத��ெச��� வச�,
பயன� ெகா���� input-ஐ ேசா����ற
வச� ேபா�ற பல வச�கைள javascript-�
�ைண��� html5-� இய�பாகேவ ெபறலா�.

��ய canvas:

�ைரைய javascript �ல� ஒ�


வைரபலைகயாகேவ பய�ப��தலா�.

��ய semantic/structural elements:

section, nav ேபா�றைவ ஒ� ப�க���


ப�ேவ� ப��ைய� �����றன. article
ப�க��� ���ய� ப���� உைரைய�
����ற�.
Browser ஆதர� :-
HTML5-� ப�க�கைள உ�வா���ேபா�
பயன�� browser-ஐ�� க���� ெகா�ள
ேவ���. �க ச�ப��� ெவ�யான browsers
ம��ேம HTML5-ஐ ஆத��பைவ. பைழய
browser-க�� HTML5 ச�யாக இய�கா�.
18

HTML5 - ��ய ப�க�


க�டைம��� ��க� – New
structural elements

HTML5-� �ல ��ய ப�க� க�டைம���


��க� ேச��க�ப���ளன. இைவ யா��
<body> …. </body> tag-��� வ�வன.
https://commons.wikimedia.org/wiki/File:Html-5.png

article – இ� ஒ� இைணய� ப�க���


���ய� ப��யாக வ�� க��ைர,
வைல�ப��, ����ட� ேபா�றவ�ைற�
���க� பய�ப��ற�.

aside – ���ய� ப��ேயாட வ�� side bar,


widget ேபா�றவ�ைற� ���க�
பய�ப��ற�.

Header – ஒ� இைணய தள���


ேம�ப���� உ�ள ��ன� தைல��
ேபா�றவ�ைற அ�ப�ேய மாறாம�
அைன��� ப�க�க��� ெவ��ப��த
பய�ப��ற�.

<header>

<hgroup>

<h1>Header 1</h1>
<h2>Sub Header 2</h2>

</hgroup>

</header>

இ�� hgroup எ�ப� heading-ஐ ஒ� ��வாக�


க�த ைவ��ற�.

figure – ேவெறா� ப�க�ைத ����


பட�கைள உ�வா�க இ� பய�ப��ற�. fig
caption எ�ப� அ�த ப�க��� தைல�ைப
வைரய���ற�.

<figure>

<img src="KaniyamLogo.png" alt="logoo" />

<figcaption>

<a href="http://kaniyam.com/logo.png">
Kaniyam Logo</a>, visit the web site for more
info.

</figcaption>

</figure>

footer – தள��� அ��ப��ைய� ���க


footer பய�ப��ற�. இ�� copyright, menu
ேபா�ற �வர�க� இ����.

<footer>

<h3 id="copyright">Copyright 2015, Creative


Commons By Attribution </h3>

</footer>

nav – தள��� menu-ஐ வைரய���ற�.


<nav>

<h2>Menu</h2>

<ul>

<li><a href="#Page1">Page1</a></li>

<li><a href="#Page2">Page2</a></li>

<li><a href="#Page3">Page3</a></li>

</ul>

</nav>

section – ஒ� இைணய� ப�க��ைன ப�ேவ�


பாக�களாக� ���க இ� பய�ப��ற�.

ஒ� HTML5 ப�க��� அைம�� இ�ேபால


இ����.
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Sample HTML5 document</title>

<script src="samplefile.js"></script>

<link rel="stylesheet" href="stylefile.css">

</head>

<body>

<header>...</header>

<nav>...</nav>

<article>
<section>

...

</section>

</article>

<aside>...</aside>

<footer>...</footer>

</body>

</html>
19

HTML5 – � ��ய வச�க�

HTML5 – � ��ய வச�க�:

HTML5-� ஊடக� ேகா��க�, 2D/3D


வைரபட�க�, Forms ேபா�றவ�ைற�
பய�ப��த பல ��ய வச�க� உ�ளன.

ஊடக�(Media) : –

<audio> – இ� ஒ�� ேகா��கைள இய�க


உத��ற�.
<video> – இ� காெணா�கைள ெவ��ப��த
உத��ற�.

<source> – இ� ஒ� / ஒ� உ���ட
ப�ேவ� ஊடக �ல�கைள� ���க�
பய�ப��ற�.

<track> – இ� ஒ��ேகா�� /
ஒ��ேகா��க��கான உைரைய text track-ஐ�
பய�ப��� ெவ��ப��த உத��ற�.

Drawing :-
<canvas> – இ� �ைர�� 2D / 3D
பட�கைள� கா�ட/வைரய உத��ற�.
https://commons.wikimedia.org
/wiki/File:HTML5_canvas_example.png

��ய form tags :-


<data list> – பல options-ஐ� ெகா���, நா�
ேத�� ெச��� வச�ைய� த��ற�.

<keysen> – keypair எ�ற form field-ஐ


த��ற�.

<output> – �ைர�� ஒ� �ர��


ெவ��பா�ைட� கா�ட உத��ற�.
20

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> எ��
பய�ப��த ேவ���.
21

HTML5 attributes

HTML-� உ�ள ப�ேவ� tags-� த�ைமைய�


��மா��க attributes பய�ப���றன.
இ�தைகய attributes-�� ெபய��
(name) ம���� (value) இ����.

உதாரண�: <p class="test">...</p>

இவ�ைற 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>
22

HTML5-� �� input வச�க�

<form>-��� <input> எ�ப�


பயன�க�ட���� �வர�கைள உ��டாக�
ெபற உத�� ஓ� வைக ஆ��. HTML5-�
��வ�� பல <input> வைகக�
அ��க�ப��த�ப���ளன.

color: ப�ேவ� �ற�கைள ெகா���


அ����� ஒ� �ற�ைத ேத��ெத��க உத��
�ற�க��

date: calender-ஐ ெவ��ப�மா� ெச��


அ����� ஒ� ேத�ைய ேத��ெத��க உத��
க��
datetime: ேத� ம��� ேநர�ைத ேத��ெத��க
உத�� க��

email: ��ன�ச� �கவ�ைய ம��� ெபற


உத�� வைக

month: மாத� வ�ட� ம��� ேத� ெபற உத��


வைக

number: எ�கைள ம��� உ��டாக� ெப��


வைக. min, max ம���கைள� தரலா�.

range: min, max ம���க���ைடேய உ�ள


எ�கைள ம��� ஒ� ெதா��பாக� ெபற
உத�� வைக.

search: ேத� ெப�� அைம�க உத�� வைக

tel: ெதாைலேப� எ� ம��� ெபற உத��


வைக

time: ேநர� ம��� ெபற உத�� வைக

url : இைணயதள/ப�க �கவ�க� ம���


ெப�� வைக

week : வார� வ�ட� ம��� ெப�� வைக

உதாரண� :

<div>

<h3>type=”color”</h3>

<input type=”color” name=”color”>

</div>

<div>

<h3>type=”date”</h3>

<input type=”date” name=”date”>

</div>

<div>
<h3>type=”datetime”</h3>

<input type=”datetime” name=”datetime”>

</div>

<div>

<h3>type=”datetime-local”</h3>

<input type=”datetime-local” name=”datetime-local”>

</div>

<div>

<h3>type=”email”</h3>

<input type=”email” name=”email”>

</div>

<div>

<h3>type=”month”</h3>
<input type=”month” name=”month”>

</div>

<div>

<h3>type=”number”</h3>

<input type=”number” name=”number”>

</div>

<div>

<h3>type=”range”</h3>

<input type=”range” id=”range” name=”range”>

<output for=”range” id=”output”></output>

</div>

<div>

<h3>type=”search”</h3>
<input type=”search” name=”search” results=”5″
autosave=”saved-searches”>

</div>

<div>

<h3>type=”tel”</h3>

<input type=”tel” name=”tel”>

</div>

<div>

<h3>type=”time”</h3>

<input type=”time” name=”time”>

</div>

<div>

<h3>type=”url”</h3>
<input type=”url” name=”url”>

</div>

<div>

<h3>type=”week”</h3>

<input type=”week” name=”week”>

</div>

<div>

<input type=”submit” value=”Send”>

</div>
HTML5-� �� input attributes
ேச��க�ப���ளன.

1. Autofocus – ஒ� இைணய ப�க�ைத


�ற�த�ட� mouse cursor-ஐ ைவ������
ெப��ைய

������ற�.

2. Placeholder – பயன� தர ேவ��ய


தகவ� ப��ய �வர� த�� வைக.

required : இைத� �������ள ெப����


பயன� க���பாக� தகவைல� தர ேவ���.

form : input ெப��யான� எ�த form-ஐ


ேச��த� என� ����ட உத��ற�.

height : உயர�

width : அகல�

pattern : ஒ� regular expression த�� அத�ப�


ம��ேம தகவைல� ெபற உத��ற�.

�ல Boolean வைகயான attribute-க��� ெவ��


ெபய� ம��� த�தாேல ேபா��. True, False
எ�� ெசா�ல ேவ��ய��ைல.
autofocus=’autofocus’ எ�� ெசா�லாம� ெவ��
autofocus எ�� ெசா�னாேல ேபா��..

உதாரண�க�

<input type="text" autofocus />

<input type="text" placeholder =”some text” />

<input type="text" required />


23

HTML5 – �� HTML form


elements

Form-ஐ �ர�� input வைக ேபாலேவ <datalist>


<keygen> <output> ேபா�ற வைகக�
ேச��க�ப���ளன.

<form>-�� ��வ�� �� attributes


ேச��க�ப���ளன.

autocomplete: தானாகேவ form-ஐ �ர���


வச�ைய ��மா���ற�.

novalidate: form-ஐ submit ெச���ேபா�


தகவ�கைள ���� ச�பா��க ேவ�டா�
எ�� ������ற�.

HTML5 <datalist>

பயன�ட���� தகவைல� ெப�� input box-�


�த� எ��ைத� த��னா�, ஒ� ப��ய�
ேதா�� அ����� ஒ�ைற ேத�� ெச���
வச�ைய இ�த datalist த��ற�.

உதாரண�

<!DOCTYPE html>

<html>

<body>

<form action="demo_form.asp" method="get">


<input list="colors" name="color">

<datalist id="colors">

<option value="Red">

<option value="Blue">

<option value="Green">

<option value="Pink">

<option value="Black">

</datalist>

<input type="submit">

</form>

</body>

</html>
HTML5 <keygen>
பயனைர login ெச�ய username, password
ேக���ேபாேத, keygen �ல� private key, public
key-ஐ உ�வா�க உத��ற�.

Private key – browser � ேச��க�ப��ற�.

Public key – server �� அ��ப�ப��ற�.

HTML5 <output>
இ� ப�ேவ� �ர�க�� output-ஐ இைணய�
ப�க��� கா�ட உத��ற�.
24

HTML5 – Storage

HTML5-� ப�ேவ� தகவ�கைள browser-


���ேளேய ேச��கலா�. அ�க அள�லான
தகவ�கைள ேச��தா��, அைவ ேதைவயான
ேபா� ம��ேம பய�ப��த�ப�வதா� ேவக�
���� �ைறவ��ைல. இ�� இ�வைகயான
ேச��� வைகக� உ�ளன. அைவ,

Local Storage : இ�� தகவ�க� �ர�தரமாக


ேச��க�ப���றன.

Session Storage : இ�� தகவ�க� ஒ� session-�


ம��� அதாவ� பயன� browser-ஐ ��� வைர
ம��� ேச��க�ப���றன. �� அைவ
அ��க�ப���றன.

Cookies: HTML4-� இ�ேபால தகவ�கைள


ேச��க cookies பய�ப�டன. இ�
இைணயதள����� browser-��� இைடேய
உ�ள ஒ� text file ஆ��. இ�� பல �ைறக�
உ�ளன.

1. ஒ�ெவா� request-��� இ�த ெமா�த cookie


file-� ேச��ேத அ��ப�ப��ற�. இதனா�
ேவக� ெவ�வாக� �ைற��ற�.

2. 4KB அள�லான தகவ�கைள ம��ேம


ேச��க ����.

3. பா�கா�� காரண�க��காக
ஒ�ெவா�வ�� cookie-ஐ தம� browser-�
�ட�� ைவ����பா�.

இ�தைகய �ைறகைள HTML5-� Local storage


���ற�.
Local Storage:
தகவ�கைள local storage-� ேச��க மா�ற
அ��க javascript-ஐ� பய�ப��தலா�.

setItem (key,value) – இ� �� தகவைல


key=value எ�ற �ைற�� ேச���ற�.

localStorage.setItem("name", "kaniyam"); //name


is the key, kaniyam is the value

getItem (key) – இ� key-�� �கரான value-ஐ


த��ற�.

sessionStorage.getItem('name'); // name is the


key

removeItem (key) – இ� key-� �வர�கைள


அ���ற�.
localStorage.removeItem("name"); // name is the
key

clear() – இ� எ�லா தகவ�கைள��


அ���ற�.

localStorage.clear();

உதாரண� :

<script>

localStorage.setItem("name", "kaniyam");
//saves to the database, key/value

document.write(localStorage.getItem("name"));
//kaniyam!

localStorage.removeItem("name"); //deletes the


matching item from the database

//Or alternatively you can save a value to the


database using this syntax

localStorage.name= "kaniyam";

</script>

JSon வைக – JSon எ�ப� Java Script Object


Notification. இ� ப�ேவ� தகவ�கைள ஒ�
array ேபால ேச��க உத��ற�. உதாரண�.
Local storage-� இ�த JSon வைக���
தகவ�கைள ேச��கலா�. text வைக� தகவைல
JSon-ஆக மா��ய�� ேச��கலா�. உதாரண�:

{ "firstName": "Nithya", "lastName": "Shrinivasan",

var complexdata = [1, 2, 3, 4, 5, 6];

// store array data to the localstorage


localStorage.setItem("list_data_key",
JSON.stringify(complexdata));

//Use JSON to retrieve the stored data and


convert it

var storedData =
localStorage.getItem("complexdata");

if (storedData) {

complexdata = JSON.parse(storedData);

Session Storage:
Browser window ��� வைர ம��ேம
ேச��க�ப�� �வர�கைள session storage-�
ேச��கலா�. Local storage ேபாலேவ ேச��த�,
மா��த�, அ��த� ப�கைள ெச�யலா�.
JSON வைக� தகவைல�� ேச��கலா�.

உதாரண�

<script>

sessionStorage.setItem("name", "kaniyam");
//saves to the database, key/value

document.write(sessionStorage.getItem("name"));
//kaniyam!

sessionStorage.removeItem("name"); //deletes
the matching item from the database

//Or alternatively you can save a value to the


database using this syntax

sessionStorage.name= "kaniyam";

</script>
25

HTML5 Application cache &


Canvas

HTML5 Application cache :


இைணய�தள�கைள இைணய இைண��
இ�லாமேலேய பா��க அவ�ைற application
cache �ல� offline storage-� ேச��கலா�.
இ�வா� offline-� ஒ� ப�க�ைத ேச��க
<html> tag-உட� manifest எ�� attribute-ஐ
ேச��க ேவ���.
http://pixabay.com/p-152091

உதாரண�

<html manifest="mysample.appcache">

// ...
</html>

Manifest எ�ப� நா� offline-� ேச��க


����� ப�க�கைள �ள��� ஒ� ேகா��.

cache manifest – ேச��க �����


ேகா��க�� ப��ய�

Network – இ�த ப��ய�� உ�ள


ேகா��க� network இ��தா� ம��ேம அ�க
����. ேச��க இயலா�.

Fall back – ப�க�கைள அ�க ��ய��ைல


எ�றா� கா�ட ேவ��ய மா���
ப�க�க�� ப��ய�.

உதாரண�

CACHE MANIFEST

# 2013-03-19 v3.0.0
CACHE:

home.html

stylesheet.css

scripts/main.js

NETWORK:

login.apsx

FALLBACK:

default.html

images/offline.jpg

# – � ெதாட��� வ�க� comment.

எ�லா ப�க�கைள�� இைணய வ���


ம��ேம பா��க Network : * எ�� எ��க.
ஒ��ைற ப�க�க� ேச��க�ப�டா� server-�
அைவ மா�னா�� browser-�
ேச��க�ப�டைவேய கா�ட�ப��. ��
மா�ற�கைள� கா�ட manifest file-ஐ மா�ற
ேவ���. .

Cache-ஐ மா��த�:

* பயன� browser catche-ஐ ���� வைர

* manifest file-ஐ மா��� வைர

* �ர� வ�ேய catche மா�� வைர

ேச��க�ப�ட �வர�க� அ�ப�ேய இ����.


இைணய இைண�� அ�க� �ைட�காத
கால�க�� இ�த offline storage �ைற
ெவ�வாக� பய�ப��.
26

HTML5 Canvas

இைணய� ப�க�க�� 2D/3D பட�கைள


javascript ெகா�� வைரய <canvas>
பய�ப��ற�.

* இ�� resolution �����வ� அவ�ய�.

* Text கா��வ� க�ன�

* பட�கைள jpg, png ஆக� ேச��கலா�.

* �ைளயா��கைள உ�வா�க� ெப���


பய�ப�� .

<canvas>-� id, width, height-ஐ க���பாக�


தர ேவ���.

உதாரண�

<canvas id="sampleCanvas" width="100"


height="100">

/*..*/

</canvas>

javascript ெகா�� இைத அ��த�.

உதாரண�

var canvas =
document.getElementById("sampleCanvas");
பட� வைரத�: getcontext(2d) எ�ற
function-ஆன� canvas-ஐ தயா� ெச��ற�. x,y
coordinate த�வத� �ல� எ��� வைரயலா�.

var canvas =
document.getElementById("sampleCanvas");

var context=canvas.getContext("2d");

Fill Rect (x1,y1,x2,y2) – ெப�� வைரய

var canvas =
document.getElementById("sampleCanvas");

var context=canvas.getContext("2d");

context.fillRect(0,0,100,200);
Moveto(x,y) – line ெதாட�க�

Lineto (x,y) – line ���

stroke() – line வைரய உதாரண�

<!DOCTYPE html>

<html>

<body>

<img id="logo" src="sample.jpg" alt="logo"


width="220" height="277"/>
<canvas id="sampleCanvas" width="100"
height="100" >

</canvas>

<script>

var
c=document.getElementById("sampleCanvas");

var context=c.getContext("2d");

context.moveTo(0,0);

context.lineTo(200,100);

context.strokeStyle = '#ff00ff'

context.lineWidth = 10;

context.stroke();

</script>
</body>

</html>
27

Scalable Vector Graphics - 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-ஐ�
��வ�மா� காணலா�.

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 �லமாக வ�ட���� �ல �ற�
�ச�ப���ள�ைத�� காணலா�.
28

Embed tag

நம�ெக�லா� ந�றாக ெத��த youtube ேபா�ற


வைல�தள��� நா� audio-ைவ� ேக���
video-ைவ� பா���� ம�����ேளா�.
இ�ேபா�ற வைல�தள�ைத எ�வா�
உ�வா��வ�? நா� உ�வா�க� ேபா��
வைல�தள��� எ�வா� ஒ� /ஒ�
ேகா��கைள இைண�ப�? இத�காக HTML5
வழ��� tag-தா� <embed> tag.

Flash, Silverlight ேபா�ற plugin எ���


இ�லாமேலேய audio, video ஐ இத� �ல�
இய�கலா�.
இ�ேபா� ஒ�் 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>
29

Drag & Drop

Drag and Drop எ�ப� நம� வைல�தள���


உ�ளவ�ைற (பட�கைளேயா அ�ல�
ேகா��கைளேயா) இட� நக��� ைவ�பத��
உத�� ஒ�் பய�பா� ஆ��. எ�த ஒ�
Object-ஐ நா� இட� நக��த �����ேறாேமா
அ�த object-� �� ெசா���, ��ன�
ெசா���ய �ைல�ேலேய அ�தைன நக���
ேவெறா� இட��� ைவ����� mouse
ப�ட�� இ��� �ரைல ���னா� அ�த
object இட�ெபய��� ���.

உதாரண���� நம� வைல�தள�ைத�


பய�ப��த� ேபா�� பயன�க� அ�� உ�ள
ஒ�் பட�ைத இட�நக��� அ��
காண�ப�� ஒ�் ��ய ெப�����
ைவ��மா� அைம�பத�கான code ��வ�மா�
அைம��.

File: drag and frop.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-���
ெபா������.
30

Geolocation

���� நா� த�ேபா� இ���� இட�ைத�


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

File: Geolocation.htm

<!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(showPositi
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 ஆ��.
31

Server Sent Events

நா� ஏேத�� ஒ�் 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-��� ெச���வத���
பய�ப���ள�.
32

���ைர

இ�த ��� HTML4, HTML5 அ�யவ���


அ��பைடகைள ம��ேம பா����ேளா�.

இ��� இ�த ��� எ�த� படாதைவ பல.


அவ�ைற வாசக�க� இைணய��� ேத�,
அ��� ெகா�ள இ�த �� ஆ�வ�ைத�
���� என ந���ேற�.

��வ�� இைண��க� �க�� பய��ளதாக


இ����.
www.w3schools.com/html/default.asp

http://howtocodeinhtml.com/

http://www.geekchamp.com/html5-tutorials
/introduction

HTML உட� Cascading Style Sheets (css) ம���


Javascript ஐ�� க��, �ற�த
இைணயதள�கைள உ�வா�� ம���க� !
33

ஆ��ய� ப��

�. ��யா

க�� ��ப�கைள த��� எ��


வ��ேற�. Cognizant Technologies Solutions
��வன���, Datawarehouse Testing �ைற��
ப����ேற�.

“ேதம�ர� த�ேழாைச உலெக�லா� பர��


வைக ெச�த� ேவ���”
“�ற நா�� ந�ல�ஞ� சா��ர�க� த��
ெமா��� ெபய��த� ேவ���”

எ�ற பார��� ���ப�கைள


�ைறேவ��வ��, � ப�க���� உ�ள�
எ�பேத, �க�� ம����.

இ�ேபா� இ��லா��� ப��காக உ�ேள�.

��ன�ச� – nithyadurai87@gmai.com

வைல�ப�� –
http://nithyashrinivasan.wordpress.com
34

ஆ��ய�� �ற ����க�

http://freetamilebooks.com/ebooks/learn-mysql-
in-tamil/

http://freetamilebooks.com/ebooks/learn-gnulinux-
in-tamil-part1/

http://freetamilebooks.com/ebooks/learn-gnulinux-
in-tamil-part2/

http://freetamilebooks.com/ebooks/learn-mysql-
in-tamil-part-2/
35

க�ய� ப��

இல��க�
க�ட�ற க���ப��� எ�ய
�ஷய�க� ெதாட�� அ���பமான
அ�ச�க� வைர அ���ட �ைழ��
எவ���� ேதைவயான தகவ�கைள
ெதாட���யாக� த�� தளமா�
உ�ெப�வ�.
உைர, ஒ�, ஒ� என ப��டக
வைகக��� �வர�கைள த�வ�.
இ��ைற�� �க��கைள
எ���ைர�ப�.
எவ�� ப�க��க ஏ�வா�
யாவ���மான ெந��� �வர�கைள
வழ��வ�.
அ�� வ����, ��தக�களாக��,
வ���களாக�� �வர�கைள
ெவ���வ�.

ப�க��க
���ப��ள எவ�� ப�க��கலா�.
க�ட�ற க���ப� சா��த �ஷயமாக
இ��த� ேவ���.
ப�க��க� ெதாட��� ��ன�
க�ய���� உ�க�ைடய ப����ம�ைத
அ��க எ��பா��க�ப����க�.
editor@kaniyam.com �கவ��� ���க�ட
�வர�களட��ய மடெலா�ைற
உ��ெமா�யா� அ������ யா��
ப�க��க� ெதாட�கலா�.
மட�� ெபா��: ப����ம�
அ���
மட� உ�ளட�க�
எ�னா� க�ய���காக
அ��ப�ப�� பைட��க�
அைன��� க�ய���காக
�த��தலா�
பைட�க�ப�டதாக
உ��ய���ேற�.
இத�ெபா���
என����க���ய
ப����ம��ைன க�ய����
வழ���ேற�.
உ�க�டைய ���ெபய�,
ேத�.
தா�க� ப�க��க ����� ஒ�
ப���� ேவெறா�வ� ஏ�கனேவ
ப�க��� வ��றா� எ�� அவ�ட�
இைண�� ப�யா�ற �ைனய��.
க��ைரக� ெமா�ெபய���களாக��,
�ஷயம��த ஒ�வ� ெசா�ல� ேக��
க�� இய�ற�ப�டைவயாக��
இ��கலா�.
பைட��க� ெதாட�களாக�� இ��கலா�.
ெதா�� ��ப�, ெகா�ைக �ள�க�,
�ர�சார�, கைத, ேக�����ர�,
ைநயா�� என� பல�ைவக���
இ��ைற�� ெபா����ப�யான
ஆ�க�களாக இ��கலா�.
த�க��� இய�பான எ�தெவா�
நைட��� எ�தலா�.
த�கள� பைட��கைள எ�யெதா�
உைர ஆவணமாக editor@kaniyam.com
�கவ���அ���ைவ�க��.
தள பராம���, ஆதரவ��த� உ���ட
ஏைனய �த�க��� ப�க��கலா�.
ஐய�க����� editor@kaniyam.com
மட�ய�ற��.

��ண�ப�க�
க�� ெதா����ப�ைத அ�ய �ைழ��
ம�க��காக ேம�ெகா�ள�ப��
�ய��யா�� இ�.
இ�� ப�க��க தா�க� அ���ப
ஆ�ற� வா��தவராக இ��க ேவ���
எ�ற க�டாய��ைல.
த�க��� ெத��த �ஷய�ைத இய�ற
எ�ய �ைற�� எ���ைர�க ஆ�வ�
இ��தா� ேபா��.
இத� வள��� ந� ஒ�ெவா�வ��
ைக��ேம உ�ள�.
�ைறக������ �ைறயாக
ெத�ய�ப��� ��ேன�ற���� வ�
வ��க��.

ெவ���� �வர�
ப����ம� © 2013 க�ய�.
க�ய��� ெவ��ட�ப�� க��ைரக�
http://creativecommons.org/licenses/by-sa/3.0/
ப�க��� உ�ள ��ேய�� காம��
ெந�கைளெயா�� வழ�க�ப���றன.
இத�ப�,
க�ய��� ெவ�வ�� க��ைரகைள
க�ய����� பைட�த எ��தாள���� உ�ய
சா�ற���, நகெல��க, ��ேயா��க,
பைறசா�ற, ஏ�றப� அைம��� ெகா�ள,
ெதா�� ேநா��� பய�ப��த அ�ம�
வழ�க�ப��ற�.
ஆ��ய�: த. ��வாச� – editor@kaniyam.com
+91 98417 95468

க��ைரக�� ெவ��ப��த�ப�� க����க�


க��ைரயா��ய��ேக உ�யன.
36

ந�ெகாைட

Creative Commons உ�ைம��, யாவ��


இலவசமாக� ப��� வைக�� தம� ��கைள
ெவ���� எ��தாளைர உ�க�
ந�ெகாைடக� ஊ������.

வ�� �வர�க�.

Name – Nithya Duraisamy


ICICI – 006101540799
Branch – Mcity branch, chengalpattu.
IFSC code – ICIC0000061

You might also like