Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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
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>
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
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
www.kaniyam.com
14
browser- .
www.kaniyam.com
15
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>
www.kaniyam.com
16
</html>
www.kaniyam.com
17
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>
www.kaniyam.com
18
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- .
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
www.kaniyam.com
22
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 , ,
.
www.kaniyam.com
23
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>
,
, .
www.kaniyam.com
24
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- .
.
www.kaniyam.com
25
www.kaniyam.com
26
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>
www.kaniyam.com
27
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
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>
<head><title></title></head>
<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>
<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>
www.kaniyam.com
31
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>
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>
<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>
www.kaniyam.com
34
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>
www.kaniyam.com
35
</tr>
<tr>
<td>Harini</td>
<td>1180/1200</td>
<td>Second</td>
</tr>
</table>
</body>
</html>
File: table3.html
<html>
<head><title></title></head>
<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>
<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>
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>
www.kaniyam.com
38
</body>
</html>
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>
<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- .
www.kaniyam.com
40
link- , link-
, link-
.
www.kaniyam.com
41
www.kaniyam.com
42
14 Frames
link- , ,
frames .
, links- .
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-
.
www.kaniyam.com
43
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>
www.kaniyam.com
44
15 Forms
.
.
Text box
input tags .
45
Radio button
radio button .
type
, "" , "" radio buttons-
. input tag .
Checkboxes
checkboxes- . , ,
3
, input tag .
46
.
value checkbox- .
checkboxes-
.
Language = Tamil
Language = English
checkbox- default-
, 'checked' .
.
<input type="submit"/>
<input type="reset"/>
, buttons .
button value
. .
47
.
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>
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-
.
<!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
.
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>
<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>
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>
var mydiv=document.getElementById('customDiv')
www.kaniyam.com
57
html5 element- .
<!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>
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
www.kaniyam.com
62
<!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>
www.kaniyam.com
63
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>
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
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- .
var canvas
= document.getElementById("sampleCanvas");
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
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>
www.kaniyam.com
72
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>
<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>
www.kaniyam.com
74
www.kaniyam.com
75
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>
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- .
www.kaniyam.com
80
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>
www.kaniyam.com
81
HTML4, HTML5 .
. ,
.
.
www.w3schools.com/html/default.asp
http://howtocodeinhtml.com/
http://www.geekchamp.com/html5-tutorials/introduction
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 ,
.
.
www.kaniyam.com