learn html in tamil

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


< > -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


Background colour attribute -table . = Bgcolor yellow < > table

-tag -table . -cell .

.

File: table3.html

NameMarksRank

www.kaniyam.com

36

Viyan1200/1200First


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


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

learn html in tamil

Documents