Learn HTML in Tamil

1
www.kaniyam.com
2
HTML .
, .
"" , 2012
. HTML
.
, editor@kaniyam.com
.
http://kaniyam.com/learn-html-in-tamil
. .
, .
.
.
tshrinivasan@gmail.com
editor@kaniyam.com
www.kaniyam.com
HTML
2015
2015 .
- . - nithyadurai87@gmail.com
: . - tshrinivasan@gmail.com
: .
- - socrates1857@gmail.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.
www.kaniyam.com
www.kaniyam.com
5
.
HTML ' '
. , .
. , ,
. , ,
, . ,
. , .
, , , ,
.
.
, , .
, ,
.
, '' ,
.
, , .
, ,
FreeTamilEbooks.com , .
.
,
.,
21 2015
: nithyadurai87@gmail.com
: http://nithyashrinivasan.wordpress.com
www.kaniyam.com
1 HTML - ............................................................................................................................................ 9
2 HTML tags...................................................................................................................................................... 9
3 Paragraph :.................................................................................................................................................. 11
align attribute:........................................................................................................................................ 15
4 Line Break................................................................................................................................................... 17
5 Headings...................................................................................................................................................... 20
6 Bold & Italic tags...................................................................................................................................... 22
7 Big & Small tags....................................................................................................................................... 23
8 Font................................................................................................................................................................. 24
9 Strike Superscript & Subscript tags............................................................................................... 26
10 Preservative tag.................................................................................................................................... 27
11 Lists.............................................................................................................................................................. 30
Combined Lists....................................................................................................................................... 31
12 Tables.......................................................................................................................................................... 33
Border, height & width attributes................................................................................................. 34
Background colour attribute........................................................................................................... 35
13 Links............................................................................................................................................................. 37
Internal Links........................................................................................................................................... 38
External Links......................................................................................................................................... 39
14 Frames........................................................................................................................................................ 42
<frameset> tag....................................................................................................................................... 42
<noframes> tag...................................................................................................................................... 42
<frames> tag............................................................................................................................................ 42
15 Forms........................................................................................................................................................... 44
<form> tag................................................................................................................................................. 44
<input> tag................................................................................................................................................ 44
Text box................................................................................................................................................. 44
Radio button....................................................................................................................................... 45
Checkboxes......................................................................................................................................... 45
Submit & Reset buttons................................................................................................................ 46
<select> tag.............................................................................................................................................. 46
<textarea> tag......................................................................................................................................... 47
16 HTML5.......................................................................................................................................................... 49
17 HTML5- ........................................................................................................................................ 51
Browser :-.................................................................................................................................... 51
www.kaniyam.com
7
18 HTML5 - New structural elements...................................52
19 HTML5 ......................................................................................................................... 54
(Media) : -...................................................................................................................................... 54
Drawing :-.................................................................................................................................................. 54
form tags :-...................................................................................................................................... 54
20 HTML5 ......................................................................................................... 55
:-.................................................................................................................................................. 55
:-..................................................................................................................................................... 55
21 HTML5 attributes:.................................................................................................................................. 56
1. Basic attributes:................................................................................................................................. 56
2. Custom data attributes:................................................................................................................ 56
22 HTML5- input .................................................................................................................. 58
23 HTML5 HTML form elements................................................................................................. 62
HTML5 <datalist>................................................................................................................................... 62
HTML5 <keygen>.................................................................................................................................... 62
HTML5 <output>..................................................................................................................................... 63
24 HTML5 Storage.................................................................................................................................... 64
Local Storage:......................................................................................................................................... 64
Session Storage:.................................................................................................................................... 65
25 HTML5 Application cache & Canvas............................................................................................ 67
26 HTML5 Canvas:....................................................................................................................................... 69
27 Scalable Vector Graphics - SVG tag............................................................................................ 71
28 Embed tag................................................................................................................................................ 73
29 Drag & Drop.............................................................................................................................................. 75
30 Geolocation.............................................................................................................................................. 78
31 Server Sent Events.............................................................................................................................. 80
.............................................................................................................................................................. 81
..................................................................................................................................................... 82
.............................................................................................................................. 83
...................................................................................................................................................... 84
....................................................................................................................................................... 84
........................................................................................................................................................ 84
............................................................................................................................................. 84
....................................................................................................................................... 85
www.kaniyam.com
HTML https://github.com/tshrinivasan/htmltamil-book-codes .
www.kaniyam.com
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-
.
www.kaniyam.com
10
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- .
www.kaniyam.com
11
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>
www.kaniyam.com
12
www.kaniyam.com
13

paragraph- . body tag- browser-
. paragraphs-
<p> tag .
<p> tag- , tag-
program- .
File: paragraph.html
<html>
<body>
<p>Most children love being told Nursery Rhymes. The most popular rhymes
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
www.kaniyam.com
14
will reflect the historical background in which these Nursery Rhymes

were written.</p>
</body>
</html>
browser- .
www.kaniyam.com
15
align attribute:
align attribute, <p> tag- , browser-
. align attribute-
(left, right, center) ,
, . .
File: pattribute.html
<html>
<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>
www.kaniyam.com
16
</html>
www.kaniyam.com
17
4 Line Break
br tag-
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>
www.kaniyam.com
18

.
<br> tag .
File: lines.html
<html>
<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- .
www.kaniyam.com
19
www.kaniyam.com
20
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>
www.kaniyam.com
21
History of India , Prehistoric era

, Stone Age, bronze Age
, h1, h2.h3,h4 .
www.kaniyam.com
22
6 Bold & Italic tags

/ bold- <b> tag-,
<i>- . tags- .
, bold-,
. <u>,</u> tag .
.
File: bi.html
<html>
<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 , ,
.
www.kaniyam.com
23
7 Big & Small tags

<big> tag-,
<small> tag- .
.
File: bs.html
<html>
<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>
,
, .
www.kaniyam.com
24
8 Font
, <font> tag .
size, colour face attributes
. , attribute-
font tag- .
.
File: font.html
<html>
<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- .
.
www.kaniyam.com
25
www.kaniyam.com
26
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>
<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>
www.kaniyam.com
27
10 Preservative tag
Preservative tag- body tag-
browser- . program-
<pre> tag , browser- .
File: pre.html
<html>
<body>
<center>Kannan Store</center>
Customer Name: T.Shrinivasan
Product
Hamam soap
Sugar
Rice
</body>
</html>
www.kaniyam.com
Price
Rs.25
Rs.50
Rs.150
28
body tag- , tag space
, browser- .
program- pre tag browser- open .
File: pre.html
<html>
<body>
<pre>
<center>Kannan Store</center>
Customer Name: T.Shrinivasan
Product
Hamam soap
Sugar
Rice
</pre>
</body>
</html>
www.kaniyam.com
Price
Rs.25
Rs.50
Rs.150
29
, browser-
. <pre> tag .
www.kaniyam.com
30
11 Lists
HTML- 3
. .
Ordered list - . <ol> tags
.
Unordered list . <ul> tags
.
Defnition list - ,
. <dl> tags .
<li> tags
. (li for list index). , ,
, <li></li> tags- .

<ol> <ul> tags-,
tags- .
<li></li> tag- defnition list- . ,
, <dt></dt> tags, (dt for defnition title) <dd></dd> tag-
(dd for defnition data) .
.
File: list1.html
<html>
<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>
www.kaniyam.com
31
<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>
<body>
Types of Testing
<ol>
<li>Functional Testing</li>
<ul><li>Integration testing</li><li>System testing</li></ul>
www.kaniyam.com
32
<li>Non-functional testing</li>
<ul><li>Automation testing</li><li>Regression testing</li></ul>
</ol>
</body>
<html>
www.kaniyam.com
33
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>
<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>
www.kaniyam.com
34
Border, height & width attributes

Border table- border- , height
table- , width table-
.
<table> tag- .
border .
border . - border=3
height width- pixel-
.
.
.
File: table2.html
<html>
<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>
www.kaniyam.com
35
</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>
<body>
<table border bgcolor="yellow">
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr>
www.kaniyam.com
36
<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>
www.kaniyam.com
37
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>
<body>
<center> Introduction - Rhymes</center>
<br>
<br>
Most children love being told Nursery Rhymes. The most popular rhymes
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>
<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>
www.kaniyam.com
38
</body>
</html>
program- click here to go back to introduction

href- link1.htm , program-
.
.
Internal Links
Internal Links .
name() . <a href=#name>
www.kaniyam.com
39
.
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>
<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- .
www.kaniyam.com
40
link- , link-
, link-
.
www.kaniyam.com
41
www.kaniyam.com
42
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>
<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-
.
www.kaniyam.com
43
frame2.htm program .
File: frame2.htm
<html>
<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- .
www.kaniyam.com
44
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-
.
www.kaniyam.com
45
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-
www.kaniyam.com
46
.
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
www.kaniyam.com
47
.
<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>
<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>
www.kaniyam.com
48
</body>
</html>
www.kaniyam.com
49
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
www.kaniyam.com
50
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 .
www.kaniyam.com
51
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
.
www.kaniyam.com
52
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- .
fgure . fg caption
.
www.kaniyam.com
53
<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>
</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>
www.kaniyam.com
54
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 feld- .
<output> .
www.kaniyam.com
55
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>
.
www.kaniyam.com
56
21 HTML5 attributes:
HTML- tags- attributes .
attributes- (name) (value) .
: <p class="test">...</p>
basic attributes, custom data attributes .
1. Basic attributes:
id : html fle- 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')
www.kaniyam.com
57
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>
</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>
www.kaniyam.com
58
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>
www.kaniyam.com
59
<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="savedsearches">
</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>
www.kaniyam.com
60
<div>
<input type="submit" value="Send">
</div>
www.kaniyam.com
61
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 />
www.kaniyam.com
62
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 .
www.kaniyam.com
63
HTML5 < output>

output- .
www.kaniyam.com
64
24 HTML5 Storage
HTML5- browser- .
, .
. ,
Local Storage : .
Session Storage : session- browser-
. .
Cookies: HTML4- cookies .
browser- text fle . .
1. request- cookie fle- .
.
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();
:
www.kaniyam.com
65
<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 Notifcation.

array . . Local storage- JSon
. text JSon- . :
{
"frstName": "Nithya",
"lastName": "Shrinivasan",
"age": 30,
"phoneNumber":
[{"type": "home","number": "99--66},{"type": "fax","number":"888-87"}]
}
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 .
www.kaniyam.com
66
<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>
www.kaniyam.com
67
25 HTML5 Application cache & Canvas
HTML5 Application cache :

application cache ofine storage- . ofine-
<html> tag- manifest attribute- .
http://pixabay.com/p-152091
<html manifest="mysample.appcache">
// ...
</html>
Manifest ofine- .
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
www.kaniyam.com
68
FALLBACK:
default.html
images/offline.jpg
# comment.
Network : * .
server- browser-
. manifest fle- . .
Cache- :
* browser catche-
* manifest fle-
* catche
.
ofine storage .
www.kaniyam.com
69
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
www.kaniyam.com
70
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>
www.kaniyam.com
71
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>
</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>
<rect id="redrect" width="300" height="100" fill="green" />
</svg>
<circle cx="50" cy="50" r="50" fill="blue" />
</svg>
</body>
</html>
www.kaniyam.com
72
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- , fll attribute
.
x,y Radius ()
cx, cy, r attributes- , fll
attribute .
www.kaniyam.com
73
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>
</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>
www.kaniyam.com
74
www.kaniyam.com
75
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-5thmonth/DSC_0171.jpg" draggable="true" ondragstart="drag(event)"
width="300" height="200">
</body>
</html>
www.kaniyam.com
76
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
www.kaniyam.com
77
, object- .
Drop function: datatransfer.getdata drag function-
datatransfer.setdata- .
target.appendChild function , divition-
.
www.kaniyam.com
78
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=400x300&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-
.
www.kaniyam.com
79
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 .
www.kaniyam.com
80
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-
.
www.kaniyam.com
81
HTML4, HTML5 .
. ,
.
.
www.w3schools.com/html/default.asp
http://howtocodeinhtml.com/
http://www.geekchamp.com/html5-tutorials/introduction
HTML Cascading Style Sheets (css) Javascript ,

!
www.kaniyam.com
82
.
. Cognizant Technologies Solutions
, Datawarehouse Testing .

, , .
.
- nithyadurai87@gmai.com
- http://nithyashrinivasan.wordpress.com
www.kaniyam.com
83
'
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/
www.kaniyam.com
84

.
, , .
.
.
, , .
.
.

.
editor@ kaniyam. com
.
:

.
.
, .

.
,
.
.
, , , , ,
.
.
editor@kaniyam.com
.
, .
editor@kaniyam.com .
.
.
.
.
.
www.kaniyam.com
85

2013 .
http://creativecommons.org/licenses/by-sa/3.0/
.
,
,
, , , ,
.
: . editor@kaniyam.com +91 98417 95468
.
www.kaniyam.com
86
Creative Commons ,
.
.
Name - Nithya Duraisamy

ICICI - 006101540799
Branch - Mcity branch, chengalpattu.
IFSC code - ICIC0000061
www.kaniyam.com

Learn HTML in Tamil

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Learn HTML in Tamil

Enviado por

Direitos autorais:

Formatos disponíveis

1

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0

sample.html program, firefox browser- open

body tag- browser- .

will reflect the historical background in which these Nursery Rhymes

body tag- browser- .

History of India , Prehistoric era

6 Bold & Italic tags

7 Big & Small tags

9 Strike Superscript & Subscript tags

<dd>The performance of an application will be tested.<dd>

Border, height & width attributes

Background colour attribute

program- href- link2.htm program-

program- click here to go back to introduction

< frameset> tag

< noframes> tag

< frames> tag

program- 3 links- left frame- .

< form> tag

< input> tag

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

input tags- program-

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

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

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

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

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

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

Submit & Reset buttons

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

< select> tag

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

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

HTML5- html program- syntax- . .

Browser :HTML5- browser- .

2. Custom data attributes:

<div id="customDiv" data-type="programming" data-level="senior">

HTML5- input attributes .

<input type="text" autofocus />

23 HTML5 HTML form elements

HTML5 < keygen>

HTML5 < output>

JSon JSon Java Script Object Notifcation.

25 HTML5 Application cache & Canvas

HTML5 Application cache :

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

: getcontext(2d) function- canvas- . x,y

27 Scalable Vector Graphics - SVG tag

svg tag- <line >tag , <circle> tag

29 Drag & Drop

File: drag and frop.html

body tag- <button> tag button- ,

error handling program .

31 Server Sent Events

body tag- . SSE- result

HTML Cascading Style Sheets (css) Javascript ,

Name - Nithya Duraisamy

Você também pode gostar