Upload
vivek-aero
View
79
Download
8
Embed Size (px)
DESCRIPTION
Learn HTML in Tamil
Citation preview
1www.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
3 HTML
2015
2015 .
- . - 87@ .nithyadurai gmail com : . - @ .tshrinivasan gmail com: .
- - 1857@ .socrates gmail com
. , . . .
, , . . www kaniyam com . . .
:
:// . . / / - - - .http static kaniyam com ebooks Learn HTML in Tamil odt
This work is licensed under a - 3.0 Creative Commons Attribution ShareAlike Unported License.
www.kaniyam.com
4 .
www.kaniyam.com
5 .
HTML ' ' . , . . , , . , , , . , . , . , , , , . .
, , . , , .
, '' , .
, , .
, , . FreeTamilEbooks com , .
.
,.,
21 2015
: 87@ .nithyadurai gmail com : :// . .http nithyashrinivasan wordpress com
www.kaniyam.com
6
1 - HTML ............................................................................................................................................ 92 HTML tags...................................................................................................................................................... 93 :Paragraph .................................................................................................................................................. 11
:align attribute ........................................................................................................................................ 154 Line Break................................................................................................................................................... 175 Headings...................................................................................................................................................... 206 & Bold Italic tags...................................................................................................................................... 227 & Big Small tags....................................................................................................................................... 238 Font................................................................................................................................................................. 249 & Strike Superscript Subscript tags...............................................................................................2610 Preservative tag.................................................................................................................................... 2711 Lists.............................................................................................................................................................. 30
Combined Lists....................................................................................................................................... 3112 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 5HTML .......................................................................................................................................................... 4917 5-HTML ........................................................................................................................................ 51
Browser :-.................................................................................................................................... 51
www.kaniyam.com
718 5 - HTML New structural elements...................................5219 5 HTML ......................................................................................................................... 54
( ) : -Media ...................................................................................................................................... 54 :-Drawing .................................................................................................................................................. 54
:-form tags ...................................................................................................................................... 5420 5 HTML ......................................................................................................... 55
:-.................................................................................................................................................. 55
:-..................................................................................................................................................... 55
21 5 :HTML attributes .................................................................................................................................. 561. :Basic attributes ................................................................................................................................. 562. :Custom data attributes ................................................................................................................ 56
22 5-HTML input .................................................................................................................. 5823 5 HTML HTML form elements.................................................................................................62
5 < >HTML datalist ................................................................................................................................... 625 < >HTML keygen .................................................................................................................................... 625 < >HTML output ..................................................................................................................................... 63
24 5 HTML Storage.................................................................................................................................... 64 :Local Storage ......................................................................................................................................... 64
:Session Storage .................................................................................................................................... 6525 5 & HTML Application cache Canvas............................................................................................6726 5 :HTML Canvas ....................................................................................................................................... 6927 - Scalable Vector Graphics SVG tag............................................................................................7128 Embed tag................................................................................................................................................ 7329 & Drag Drop.............................................................................................................................................. 7530 Geolocation.............................................................................................................................................. 7831 Server Sent Events.............................................................................................................................. 80.............................................................................................................................................................. 81
..................................................................................................................................................... 82
.............................................................................................................................. 83
...................................................................................................................................................... 84
....................................................................................................................................................... 84
........................................................................................................................................................ 84
............................................................................................................................................. 84
....................................................................................................................................... 85
www.kaniyam.com
8 HTML :// . / / -https github com tshrinivasan html- -tamil book codes .
www.kaniyam.com
91 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
Rhymes 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.
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
Nursery Rhymes
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 shownby 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.
www.kaniyam.com
12
www.kaniyam.com
13
-body tag -browser . -paragraph . -body tag -browser
. -paragraphs < > p tag . < > -p tag , -tag -program .
File: paragraph.html
Nursery Rhymes
Most children love being told Nursery Rhymes. The most popular rhymesare listed here. Even elders love to hear these rhymes. They are sweet to our ears forever. These rhymes speak volumes about the interest shownby 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
www.kaniyam.com
14
will reflect the historical background in which these Nursery Rhymes were written.
-browser .
www.kaniyam.com
15
:align attribute align , < > -attribute p tag , -browser . -align attribute ( , , ) left right center , , . .
File: pattribute.html
Nursery Rhymes
Most children love being told Nursery Rhymes. The most popular rhymes are listed here. Even elders love to hear these rhymes.
The list is clearly not exhaustive but it is believed that a good cross section of famous poems for children have been included.
These Nursery Rhymes for children have been passed downover the years and due to the short nature of the verse can easily be remembered by most children from a very early age.
www.kaniyam.com
16
www.kaniyam.com
17
4 Line Break -br tag -body tag -browser .
File: lines.html
Chubby Cheeks Rhyme
Chubby cheeks, dimple chinRosy lips, teeth withinCurly hair, very fairEyes are blue, lovely tooTeacher's pet, is that you ?Yes! Yes! Yes!
www.kaniyam.com
18
-body tag -browser . . < > br tag .
File: lines.html
Chubby Cheeks Rhyme
Chubby cheeks, dimple chinRosy lips, teeth withinCurly hair, very fairEyes are blue, lovely tooTeacher's pet, is that you ?Yes! Yes! Yes!
< > -br tag . tag .
- browser .
www.kaniyam.com
19
www.kaniyam.com
20
5 Headings ,
-headings -tags .< 1>, < 2>, < 3>, < 4>, < 5> h h h h h < 6> h 6 headings tags . . .
File : heading.html
History of India (H1)1.Prehistoric era (H2)1.1 Stone Age (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.1.2 Bronze Age (H4)The Bronze Age in the Indian subcontinent began around 3300 BCE with theearly Indus Valley Civilisation.
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
Kaniyam is a free monthly E-Magazine in tamil for foss. Authors write on various topics on Free software.Shrinivasan is the editor of Kaniyam.
bold , , .
www.kaniyam.com
23
7 Big & Small tags < > big -tag , < > small -tag . .
File: bs.html
Chubby Cheeks Rhyme
Kaniyam is a free monthly E-Magazine in tamil for foss. Authors write on various topics on Free software.Shrinivasan is the editor of Kaniyam.
, , .
www.kaniyam.com
24
8 Font , < > font tag . , size colour face attributes . , -attribute
-font tag . .
File: font.html
Kaniyam is a free monthly E-Magazine Authors write on various topics on Free software.Author : Shrinivasan
. 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
The new price of this product is Rs.20000 Rs.10000The chemical formulae of water: H20An expression: x2+y2
www.kaniyam.com
27
10 Preservative tag -Preservative tag -body tag
-browser . -program < > pre tag , -browser .
File: pre.html
Kannan Store
Customer Name: T.Shrinivasan
Product PriceHamam soap Rs.25Sugar Rs.50Rice Rs.150
www.kaniyam.com
28
-body tag , tag space , -browser .
-program pre tag -browser open .
File: pre.html
Kannan Store
Customer Name: T.Shrinivasan
Product PriceHamam soap Rs.25Sugar Rs.50Rice Rs.150
www.kaniyam.com
29
, browser- . 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
Types of Testing
Functional TestingNon-functional testing
Types of non-functional testing
Performance testingAutomation testing
Functional TestingThe functionality of an application will be tested.Performance Testing
www.kaniyam.com
31
The performance of an application will be tested.
Combined Lists
-main list , -sublist combinedlists . -ordered list Functional
Testing Unordered list . - Non functional testing unordered list .
File: list2.html
Types of Testing
Functional TestingIntegration testingSystem testing
www.kaniyam.com
32
Non-functional testing
Automation testingRegression testing
.
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
NameMarksRank
Viyan1200/1200First
Harini1180/1200Second
www.kaniyam.com
34
, & Border height width attributes Border -table -border , height
-table , width -table .
< > -table tag . border .
border . - =3border
height -width -pixel . .
.
File: table2.html
NameMarksRank
Viyan1200/1200First
www.kaniyam.com
35
Harini1180/1200Second
Background colour attribute -table . = Bgcolor yellow < > table
-tag -table . -cell .
.
File: table3.html
NameMarksRank
www.kaniyam.com
36
Viyan1200/1200First
Harini1180/1200Second
www.kaniyam.com
37
13 Links click here for more . , . links . .
1. link htm -program -Rhymes , Click here for Chubby Cheeks Rhyme -link . -link anchor tags < > a a . -link . href . hypertext reference href .
File: link1.htm
Nursery Rhymes
Introduction - Rhymes
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 shownby the education department to enthuse the children to speak out.
Click here for Chubby Cheeks Rhyme
-program -href 2. link htm -program .
2. link htm .
File: links2.htm
Chubby Cheeks Rhyme
Chubby cheeks, dimple chinRosy lips, teeth withinCurly hair, very fairEyes are blue, lovely tooTeacher's pet, is that you ?Yes! Yes! Yes!
Click here to go back to Introduction
www.kaniyam.com
38
-program click here to go back to introduction -href 1. link htm , -program .
.
Internal Links
Internal Links . (name ) . < =# > a href name
www.kaniyam.com
39
.
File: internallink.html
Internal Links
Goto Bottom
A big para goes here
External Links -program -links , -links . -href . -href , .
program- .
File: externallinks.htm
Click here for Kaniyam magazines
Click here for MySQL book
send me your comments
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
Your browser doesn't support frames.
-frameset cols . -cols 30% , (* 70% ) .
, frames tag . -frame left -frame " right . -frame -src 2. frame htm , -program -frame .
www.kaniyam.com
43
2. frame htm program .
File: frame2.htm
simple TableTable with borderTable with colour
-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 : 87@ .mailto nithyadurai gmail com"> -action -program -database . mailto -command . -mailto command .
-tags .
< > input tag < > input
tag . type name . -type , -name .
Text box input tags .
, -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 Phone Number
. name . .
= Name Kaviyan = 4839403892Ph
Radio button radio button . type , "" , "" -radio buttons . input tag .
-radio button . button -tag . .
Male Female
value -option . -option " " F name .
= sex F -option -default , ' ' checked . .
Male
Checkboxes -checkboxes . , , 3 , input tag .
. -input tag
www.kaniyam.com
46
.
value -checkbox . -checkboxes .
= Language Tamil = Language English
-checkbox -default , ' ' checked . .
Submit & Reset buttons < > -input tag type ' ' Submit , , action . ' ' Reset .
, buttons . button value . .
-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 .
Chengalpattu Kanchipuram Tambaram
, -select tag multiple
www.kaniyam.com
47
.
-option -default , -option tag selected .
Chengalpattu
< > textarea tag "" "" < > textarea tag . tag .
rows cols . -rows , -cols .
-tag -program .
File: form.htm
Name:Phone:
Sex:MaleFemale
Languages Known:TamilEnglishHindi
City:
ChengalpattuKanchipuramTambaram
Address:
www.kaniyam.com
48
www.kaniyam.com
49
16 HTML5
:// . . / / : .https commons wikimedia org wiki File Logozyrtare jpg
-html 5 html . . / 2 /3D D . -application , - real time protocols javascript css 5 html .
, , Tablet , , .
:// . . / / 5- - - -380429526http daphyre deviantart com art HTML Logos and Badges
www.kaniyam.com
50
5 HTML . 3 CSS -user interface
. Javascript html -dynamic
.
5-HTML -html program -syntax . .
Code for html/html5
DOCTYPE html html document . -head tag -meta tag html document . charset , -8 attribute UTF . -program code
-8 Unicode Transformation Format .
www.kaniyam.com
51
17 HTML5-
5-HTML . & :Audio Video
, Flash silverlight plugin , .
:Geolocation API -API , IPaddress . .
:Local storage -database -browser 5 HTML . Local Storage . , , .
& :Drag Drop , . 4 HTML JavaScript . input :
Form -input tag . , -calender , -input -javascript 5-html .
:canvas javascript .
/ :semantic structural elements
, section nav . article .
Browser :- 5-HTML -browser .
browsers 5-HTML . -browser 5 HTML .
www.kaniyam.com
52
18 HTML5 - New structural elements
5-HTML . < > . body -body tag .
:// . . / / : -5.https commons wikimedia org wiki File Html png
article , , .
aside , side bar widget .
Header .
Header 1 Sub Header 2
hgroup -heading .
fgure . fg caption .
www.kaniyam.com
53
Kaniyam Logo, visit the web site for more info.
footer footer . , copyright menu .
Copyright 2015, Creative Commons By Attribution
nav -menu .
Menu Page1 Page2 Page3
section .
5 HTML .
Sample HTML5 document ... ... ... ... ...
www.kaniyam.com
54
19 HTML5 5 HTML :
5-HTML , 2 /3 D D , Forms .
( ) : -Media
< >audio . < > video . < > source / .< > track / -text track .
:-Drawing< > canvas 2 / 3 D D / .
:// . . / / : 5_ _ .https commons wikimedia org wiki File HTML canvas example png
:- form tags< > data list -options , . < > keysen keypair -form feld . < > output .
www.kaniyam.com
55
20 HTML5
4-HTML 5-HTML . .
:-
< > a hyperlink , 5-HTML < > -a a -tags .
.. ..
< > 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 .
: ...
, 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 .
:
/*...*/
2. :Custom data attributes -attributes custom data attributes. - = data name value . - data . -custom data attributes , css javascript .
:
/*...*/
-attribute ( ) javascript js :
5 -html element js unique id . () getElementbyId js function .
var mydiv=document.getElementById('customDiv')
www.kaniyam.com
57
5 -html element .
/*...*/
custom .
1. () getattribute method
var mydiv=document.getElementById('customDiv')
//Using getAttribute() propertyvar 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 propertyvar type=mydiv.dataset.type; //returns "programming"customDiv.dataset.type=testing; //changes "data-brand" to "testing"customDiv.dataset.type=null; //removes "data-brand" attribute
Sample var type=mydiv.getAttribute("data-type"); customDiv.setAttribute("data-type", "testing"); customDiv.removeAttribute("data-type");
www.kaniyam.com
58
22 HTML5- input
< >-form < > input . 5-HTML < > input .
color: date: -calender
datetime:
email:
month:
number: . , min max .
range: , min max .
search:
tel:
time:
url : /
week :
:
type="color"
type="date"
type="datetime"
www.kaniyam.com
59
type="datetime-local"
type="email"
type="month"
type="number"
type="range"
type="search"
type="tel"
type="time"
type="url"
type="week"
www.kaniyam.com
60
www.kaniyam.com
61
5-HTML input attributes .
1. Autofocus -mouse cursor .
2. Placeholder .
required : .
form : input -form .
height :
width :
pattern : regular expression .
Boolean -attribute . , True False . = autofocus autofocus autofocus ..
www.kaniyam.com
62
23 HTML5 HTML form elements
-Form input < > < > < > datalist keygen output .
< >-form attributes .
autocomplete: -form .
novalidate: -form submit .
5 < >HTML datalist
-input box , datalist .
5 < >HTML keygen
login , username password , keygen , private key -public key . Private key browser .
Public key server .
www.kaniyam.com
63
5 < >HTML output
-output .
www.kaniyam.com
64
24 HTML5 Storage
5-HTML -browser . , . . ,
Local Storage : .
Session Storage : -session -browser . .
Cookies: 4-HTML cookies . -browser text fle . .
1. -request -cookie fle . . 2. 4 KB . 3. -cookie -browser .
5-HTML 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
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";
JSon JSon . Java Script Object Notifcation array . . -Local storage JSon
. text -JSon . :
{" ": " ",frstName Nithya" ": " ",lastName Shrinivasan" ": 30,age" ": phoneNumber[{" ": " "," ": "99--66},{" ": " "," ":"888-87"}]type home number type fax number}
var complexdata = [1, 2, 3, 4, 5, 6];
// store array data to the localstoragelocalStorage.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
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";
www.kaniyam.com
67
25 HTML5 Application cache & Canvas
5 HTML Application cache : application cache -ofine storage . -ofine < > -html tag manifest -attribute .
:// . / -152091http pixabay com p
// ...
Manifest -ofine . cache manifest
Network network . .
Fall back .
CACHE MANIFEST# 2013-03-19 v3.0.0
CACHE:home.htmlstylesheet.cssscripts/main.js
NETWORK:login.apsx
www.kaniyam.com
68
FALLBACK:default.htmlimages/offline.jpg
# . comment : * Network . -server -browser . -manifest fle . .
-Cache : * -browser catche * -manifest fle * catche .
ofine storage .
www.kaniyam.com
69
26 HTML5 Canvas: 2 /3 D D javascript < > canvas . * resolution . * Text * , jpg png . * .
< >-canvas , , -id width height .
/*..*/
javascript .
var canvas = document.getElementById("sampleCanvas");
: (2 ) getcontext d -function -canvas . , x y coordinate .
var canvas = document.getElementById("sampleCanvas");var context=canvas.getContext("2d");
( 1, 1, 2, 2) Fill Rect x y x y 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
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();
www.kaniyam.com
71
27 Scalable Vector Graphics - SVG tag - SVG tag , , , Polygon
. Scalar Vector Graphics . -tag tags . -tags :// . 3. /2000/http wwww org svg .
-SVG tag ( ) xmlns Extensible Markup Language Name Space attribute .
, -code .
File: svg.htm
SVG
Examples for SVG
www.kaniyam.com
72
-svg tag < > line tag , < > circle tag , < > rect tag . - self closing tags .
-svg tag . -svg tag .
( 1, 1) ( 2, 2) x y x y . 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 . ? / ? 5 HTML
-tag < > . embed tag
, Flash Silverlight plugin , audio video .
audio -video -code .File: Audio.htm
Audio & Video
Audio
Video
www.kaniyam.com
74
www.kaniyam.com
75
29 Drag & Drop Drag and Drop ( )
. -Object -object , mouse object .
code .
File: drag and frop.html
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
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));}
Drag the Dog image into the rectangle
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 5 HTML Geolocation . , -MAP ? -MAP -application
Geolocation . MAP . code.
File: Geolocation.htm
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 = "";}
Click It to get your position
-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
var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + ""; };
Getting server updates
-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
4, 5 HTML HTML . . , .
.
. 3 . / / .wwww schools com html default asp
:// . /http howtocodeinhtml com
:// . . / 5- /http www geekchamp com html tutorials introduction
HTML ( ) Cascading Style Sheets css Javascript , !
www.kaniyam.com
82
.
. Cognizant Technologies Solutions, Datawarehouse Testing .
, , .
.
- 87@ .nithyadurai 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 . :// . / / - /3.0/ http creativecommons org licenses by sa .
, , , , , , .
: . @ .editor kaniyam com +91 98417 95468 .
www.kaniyam.com
86
Creative Commons , .
.
- Name Nithya Duraisamy - 006101540799ICICI
- , .Branch Mcity branch chengalpattu - 0000061IFSC code ICIC
www.kaniyam.com
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. HTML https://github.com/tshrinivasan/html-tamil-book-codes .1 HTML - 2 HTML tags3 Paragraph :align attribute:
4 Line Break5 Headings6 Bold & Italic tags7 Big & Small tags8 Font9 Strike Superscript & Subscript tags10 Preservative tag11 ListsCombined Lists
12 TablesBorder, height & width attributesBackground colour attribute
13 LinksInternal LinksExternal Links
14 Frames tag tag tag
15 Forms tag tagText boxRadio buttonCheckboxesSubmit & Reset buttons
tag tag
16 HTML517 HTML5- Browser :-
18 HTML5 - New structural elements19 HTML5 (Media) : -Drawing :- form tags :-
20 HTML5 :- :-
21 HTML5 attributes:1. Basic attributes:2. Custom data attributes:
22 HTML5- input 23 HTML5 HTML form elementsHTML5 HTML5 HTML5
24 HTML5 StorageLocal Storage:Session Storage:
25 HTML5 Application cache & Canvas26 HTML5 Canvas:27 Scalable Vector Graphics - SVG tag28 Embed tag29 Drag & Drop30 Geolocation31 Server Sent Events