Basics to master HTML

8/11/2019 Basics to master HTML

1/52

HTML DOCUMENT:

Html document consists of html tags and some

text.

HEML TAGS:

1. Html tags are used to markup html element.2. Html tags are surrounded by Characters these

characters are called as angler brackets.3. Html tags always come in pairs. hat is tags contain a

starting tag and ending tags.!. he text in b"w the starting tag and ending tag is called as

element content.#. Html tags are free de$ned tags.

%. Html tags are not case sensiti&e. hat the upper and lowerdocument is html document.

'. he html tag in a document represents. hat the

document is html document.(. he entire html document must be written starting html tag

and ending html


2/52

4irst html

/elcome to any web page

0tep2+ 0a&e the html document any name ha&ing. Html as the

extension.

0tep3+ o execute the html document to open it in any rowser. o

html language is an error free language. hat is it will not display

any error massage on the rowser. *&en it the html document

contain any error.

Html comments+

Comments are used to make the code name readable

or they are used to explain the code.

H-5 comments begins with

*8 +

Att!i"tes+

1. :ttributes are used to pro&ide additional information about the

html elements tags.2. he attributes must be speci$ed in starting tags.3. he attributes always come in pears.

attribute name ; attribute &alue!. he attribute &alue can be enclosed with in single codes are

double codes.#. *&ery html tag can contain attribute.

9ote+ 0pecifying the attributes for a tag is optional.

ody tag attributes+

age 2


3/52

1. B#colo!:his attributes speci$ed the background color to

displayed for a html document.2. Te$t + his attributes speci$ed the color of the text to be

displayed on the html document. Color can be speci$ed on the

html document= for two formats.a. 0peci$ed the color ha&e directly.b. /e can specify the color by combining ed, ?reen and

lue. he format should be @rrggbb. he color

combination is % digit Hexadecimal numbers.3. Bac%#!ond+ his attribute specify an image as the

background to the html document.

?ood :fternoon

'i+ his tag is use to emphasiDe a text by display in Etalics format.

Etalics'tt+ his tag is use to display a text in eletype font. hat is

typewriter font.

eletype

'st!i%e+ his tag is similar to use to display a 0trike out text.

0trike


4/52

0trike

'+ his tag is use to underline a text.

underlineGb2

'"i#+ his tag is use display a text solidly igger then the normal

text.

text

'cente!+ his tag is to display a text in the Center of the

webpagehtml document=.

/elcome

Heading2

Heading!

Heading%


5/52

*x+

o,

he manager,

HF4C bank,

9ellore,

0ub+ egarding loan to buy a house.

espected sir"madam,

E

.

hanking you.

line three

his is a paragraph

age #


6/52

'*!+ his tag is used to display a horiDontal line in a html

document. Jsing the horiDontal rule we can di&ide the web page into

multiple sections.

KAtt!i"tes o+ '*!+

1.,idt*+ his attribute speci$es the length of the HoriDontal rule

to be displayed in a web page. he width can be speci$ed either

in pixels or percentage.

*x+

he width can be speci$ed either in pixels or percentage.

2.Colo!+ his attribute speci$es the color of the horiDontal rule to

be displayed in a web page.

E$+

!.ali#n+ /e can change the alignment of the horiDontal rule by

using this align attribute. y default the horiDontal rules

are aligned to center.

E$+< hr align ; Acenter">


7/52

3. Fe$nition 5ist

1= O!de!ed List+ : list is said to be an ordered list if the items are

displayed by using either by digits or by :lphabets or oman

numbers. y default digits are used to display order list. /e canchange the display by using Atype attribute.

ype ; A1 a : i EE$+

HyderabadChennai

2= Uno!de!ed List+ Ef a list is displayed with the help of some

graphical symbols then it is called as unordered list. /e can

change the display by using Aype attribute.ype ; Adisc sNuare circleE$+

Hyderabad

Chennai

3= De0nition List+ : list is said to be a de$nition list if we pro&ide

a de$nition or description to e&ery item.E$+

HyderabadChennai-umbai

age '


8/52

:meerpet irla temple

-umbai


9/52

#. Alt(alte!nate te$t)+ his attribute speci$es a text to be

displayed on the html document when an image is not loaded.

%. Hsace(Ho!i/ontal Sace)+ his attribute speci$es theamount of space empty space to be displayed on the left and

right sides of the image.

'. 1Sace(2e!tical sace)+ his attribute speci$es the amount

of empty space to be displayed on the top and bottom of the

image.

E$+


10/52

2. 'td(ta"le data)+ his tag is used to create a columncell=

in a particular row. he no. of Is with indicate no. of

columns in a particular row.3. 't*(ta"le *eadin#)+his tag is used to create a column in a

particular row similar to but will display the text inbold face and the text will be centered.

!. 'cation+ his tag is used to display a heading to a table.

Att!i"tes o+ s" ta#s+

1. 4o3 san+ his attribute is used to span merge= the cells

&ertically.2. Colsan+ his attribute is used to span merge= the cells

horiDontally.

3. 1ali#n+ his attribute is used to align the text &ertically. Qalign; Atop middle bottom by the default it is &ertically aligned to

middle. En this sub tags we can also use align, bgcolor, and

background attributes.

E$+

able

one

three

four


11/52

se&en


12/52

&!ame+ 4rames can be used to display multiple html documents in

the same browser at the same time.

'+!ameset+ his tag is use to di&ide a frame into multiple frames.

Att!i"tes o+ '+!ameset+

1. 4o3s+ his attribute is a list of &alues separated by a comma

,=. he no. of &alues in a list will decide the no .of horiDontal

di&isions.2. Cols+ his attribute is a list of &alues separated by a comma ,=.

he no. of &alues in a list will decide the no. of &ertical

di&isions.3. Bo!de!+ his attribute speci$es the thickness of the border with

in a frameset.

'+!ame+ his tag represents and indi&idual frame with in aframeset.

Att!i"tes o+ '+!ame+

1. S!c(so!ce)+ his attributes speci$es the J5address= of the

html document to be displayed with in the frameset.2. Sc!ollin#+ his attribute will decide where there frame will

contain a scrolling bar of not.0crolling ; Aauto yes no

he default scrolling &alue is also Aauto.3. Name+ his attribute is use to assign a name to a frame.!. No !esi/e+ Et is a Rag which indicates that the frame canIt be

resiDed.E$+


13/52

ha&e any no. of forms. o create a form in html document we use

.

Att!i"tes o+ '+o!m+

1. Action+ his attribute speci$es the J5address= of the ser&er

are any other resource where the form data has to be submit.2. Met*od+ his attribute de$nes how to submit the form data to

the ser&er. he most widely &alues are Oget and postI. Ef the

method &alue is OgetI then the form data will be submitted to

the ser&er along with the J5. he form data will be display in

the address bar and hence doesnIt pro&ide security to the form

data.

Ef the method &alue is OpostI then the form data will be submitto the ser&er separately form the J5. Et will donIt display the

from data in the address bar. here by pro&ides security to the

form data.Jsing OgetI we can send limited data only but using OpostI we

can sent unlimited data.he default method &alue is OgetI.

3. Name+ his attribute is used to assign a name to a form for

identi$cation.

S" ta#s o+ +o!m ta#+

'int+ his tag is used to create a input element where the user

can either some information.

Att!i"tes o+ 'int+

1. Tye+ his attribute will be decide the type of input element to

be display list.

E$+ type+ text, password, radio, checkbox, submit, reset,hidden internal all pages displayed=, button.

2. Name+ his attribute is used to assign a name to the input

element.3. Si/e+ his attribute speci$ed the length of the input $eld.!. 1ale+ his attribute is used to speci$es the default &alue are

initial &alue to a input element.#. Ma$ len#t*+ his attribute specify the maximum number of

characters to be entered the input element.

age 13


14/52

+ his tag will pro&ide the user a list of options form which

the user can select one option.

'Te$t a!ea+ his tag allows the user to enter the data in multiple

lines the siDe of the text area can be speci$ed by using rows and cols

attribute.

E$+

egistration

username

assword

Con$rm password

?ender

4emale

Tuali$cation

ech

0c

Hobbies

programming

browsing

reading


15/52


16/52

. Fatabase has to be used in language scale application.

. hat data in a database is speci$c to the database s"w.

6ml+ 8ml document contents only formatted data.

. 8ml document shows hierarchy among the data.

. 8ml document is a cross platform document.

. 8ml pro&ides tools like xml engine, xml parser to check &erify to

correctness of the data in an xml document.

. Et doesnIt reNuire any Nuery language for manipulating the data.

. 8ml can use to store data in small scale application.

H-5 8-5

1. Html is use to display and

formatthe data.

1. 8ml is use to store and

describe the data.

2. Html contains prede$ned tags. 2. 8ml contains user de$ned

tags.

3. Html tags are not case

sensiti&e.

3. 8ml tags are case sensiti&e.

!. Html is error and free language.!. 8ml is not an error freelanguage.

#. Html can be used to design webpages.

#. 8ml can be used to transfer

datab"w in compatible.

%. Html document can contentproper and improper nesting.

%. 8ml document can content

onlyproper nesting.

'. Html can be used to apply

styleson the data.

'. 8ml can be use to

structured the data.

Uses o+ $ml+

. 8ml can be use to store the data permanently similar to a

database.. 8ml can be use to create other A-arkup language.

age 1%


17/52

. 8ml can be use to create transfer data b"w incompatible types.

. 8ml can be use to con$gure the resources in a web applications.

E$+ web.xml

. 8ml document pro&ides some instructions for installing the

software.

6ml docment !ea!ation !les+

1. 8ml document must contain a root tag.2. *&ery xml tag must contain a starting tag and closing tag.3. *&ery xml tag can optional= contain either child tags and

attributes, child tags or attributes.!. Ef a tag contains attribute then its &alue must be speci$ed

enclosed either in single codes OO= or the double codes AA=.#. 8ml tags are case sensiti&e either lower"upper=.%. 8ml document must be properly nested.'. 8ml tags can be empty.

Element namin# !les+

1. :n element naming can be combination of alphabets, digits and

special characters.2. he element name must not begin with a digit or a punctuation

characters.E$+ W,K, @ .etc=

3. he element name must be not beginning with xml.!. here is no restriction on the length of the element name. Ef it is

contains multiple words then separate them by underscore S=.E$+

,ell +o!med $ml docment+1. 8ml document is said to be well formed if it satis$es both xml

document preparation rules and elements naming rules.2. /e can &erify weather an xml document is well formed or not

by using either xml engine or xml parser.3. o &erify weather a xml document is well formed or not by

using xml engine then Pust open the xml document. En a

browser, if the xml document is displayed as it is on the

browser then it indicates that the xml document is well formedother wise not well formed.

age 1'


18/52

!. *&ery browser by default contains xml engine as a inbuilt

program.

here are no reasons when to use a child tag or when to

use attributes. Et is recommended to presser child tags

instead of attributes.

4easons +o! a2oidin# att!i"tes+

1. :ttributes doesnIt show any hierarchy.2. :ttributes doesnIt show any relationships.3. :ttributes canIt contain multiple &alues.!. :ttributes canIt expand in feature.#. eading the attribute &alues while processing the xml

document is a diXcult task.o create the rules for an xml document we use either xml FF

or 8-5 0CH*-:.8-5 FF or 8-5 0CH*-: will allow us to create the following

set of rules.1. he tag name to be used.2. he attribute name to be used.3. he number of occurrences a tag must be a&ailable.!. he type of data the tag or an attribute can contain.

#. he root tag of the xml document.

1alid $ml docment+

8ml document is said to be a &alid xml document if it satis$es xml

document preparation rules, element naming rules and xml FF or

8-5 0CH*-: based document preparation rules.

*&ery &alid xml document is a well formed xml document.

6ML DTD+Et stands for xml document type de$nition. Et is used to create rules

for writing the xml document. Et is pro&ides legal building blocks

using which we can de$ne a structure for the xml document.

T*e "ildin# "loc%s a!e+

1. Element+ his is the most important building block. his

building block is used to create tags. /hich can contain some

text, or it can contain some other element or it can be empty.

age 1(


19/52

2. Att!i"te+ his building block is used to create attributes which

are used to pro&ide additional information about the element.

he attributes must be the speci$ed in the staring tags and

they come in name &alue pairs, the attribute &alue must be

enclosed in single codes OO= or double codes AA=.3. Entity+ this building block is used to create special characters

that are to be used in an xml document.!. 7cDATA (a!sed c*a!acte! data)+ his data will be parsed by

the parser and they can expand the entities.#. CDATA+ its stands for Ocharacter dataI. his data will not be

parsed by the parser and it canIt expand the entities.

Decla!in# an element+

1. Feclaring an element which can be empty.0yn +*x +

2. Feclaring an element which contains CF::.

0yn+

*x+

3. Feclaring an element which can contain any data0yn+

*8+

!. Feclaring an element which contains seNuence of child

elements.

0yn+

*x+

#. Feclaring an element which must occur exactly one time.0yn+

*x+

%. Feclaring an element which can occur Dero or more times.

0ys+

*x+

'. Feclaring an element which must occur at least one time one

or more times=.

0ys+ *x+

age 1)


20/52

(. Feclaring an element which must occur either L or 1 time.

0ys+

*x+

Decla!in# att!i"tes+

1. Feclaring n attribute with a default &alue.

0ys +

*x +

2. Feclaring an attribute which is mandatory.

0ys +

*x +

3. Feclaring an attribute which is optional.0ys +*x +

!. Feclaring an attribute whose &alue is $xed.0ys +*x +

#. Feclaring an attribute containing an enumerated list.0ys +*x +

Decla!in# an entity+

1. Feclaring an internal entity.0ys +

2. Feclaring an external entity.0ys +

ules to be prepared for writing a xml document which stores

student information.

E. Create a tag by the name institute which should be the root

tag.

age 2L


21/52

EE. Create as student as child tag to institute which must be

a&ailable at least one time.EEE. Create roll no, name, mobile no, address as child tags to

student tag.

EQ. he roll no and name tags must be present exactly 1 time.Q. he mobile no tag can be a&ailable either L or 1 or more time.

QE. he address tag must be a&ailable either L or 1 time.QEE. Create hno, colony and city as child tags to address tag.QEEE. he hno, colony, city must be a&ailable exactly 1 time.E8. Create course as an attribute to student tag as enumerated list

of &alues.8. Create type as an optional attribute under student tag.8E. Create country as an attribute under address tag whose &alue

is $xed.

6ML 7A4SE4+

o &alidate a xml document we reNuired a xml parser. 8ml

parser is a utility tool using which we can check where a xml

document well format or not and &alid or not. 8ml parser can e&en

be used for processing the xml documents.

E$+

0:8 0imple :E 8-5 rocess=

F- Focument bPect -odel=

Focument bPect model for [a&a [F-=

IDE+

EtIs Atransfer Entegrated Fe&elopment *n&ironment. Et is used

to speed of the de&elopment of an application. /here reduces the

de&elopment time.

E$:

8-5 0Y

0Y5J0 0JFE

7!oced!e to oen 6ML S78 IDE+ Click on start on select all

program sales :lco&e

Click on xml spy.

age 21


22/52

7!oced!e to c!eate DTD !les+ Click on $le menu

select new item select FF Focument ype Fe$nition=

click on \.

4les+

1. 2. 3. !. #. %. '. (. ). 1L. 11. 12.

7!oced!e to 3!ite a 6ML Docment 3it* e$te!nal DTD !les+

Click on $le menu select new item select 8-5.

*xtensible -arkup langue=

0elect FF, click on \ rowser for FF $le click on \.1 2 3 0tudent course ; Ahtml ype ; Ainspector>! 123% ))!)13)())(

) 2"2L211bond13

rocedure to create a 8-5 document containing internal FF rules+

Click on $le menu

age 22


23/52

0elect new item

0elect 8-5 *xtensible -arkup 5anguage=

Click on \

Click on cancel

.

.

.^same as pre&ious rules_

.

.

6ML SCHEMA+

1. 8-5 0CH*-: is used to de$ne structure of the 8-5 document.2. 8-5 0CH*-: is a 8-5 based alternati&e to FF.3. 8-5 0CH*-: is successor to 8-5 FF.!. 8-5 0CH*-: is written in 8-5.#. 8-5 0CH*-: pro&ides more icher and powerful functionality.%. 8-5 0CH*-: supports data types and data types.'. /e can create our own user de$ned data types based on

prede$ned data types.(. 8-5 0CH*-: supports name spaces.

En 8-5 schema we ha&e two types of elements.:. 0imple element

age 23


24/52

. Complex element1. Simle element+

:n element is said to be simple if it contains only

text. Et should

not contain some other element or attributes.0yn+

2. Comle$ element+:n element is said to be complex if it contains

some child

element and attributes or attributes.

*x+


25/52

O!de! Indicato!s+

1. Se5ence+ his indicator will indicate that specifying all the

child elements is mandatory and the order is $xed.2. All+ his indicator will indicate that speci$es the child elements

are mandatory but order of the elements can be changed.3. C*oices+ hese indicators will indicate that we can use

specifying that we can use any one of the child element.

Occ!!ence indicto!s+

1. Minocc!s+ his indicator will specify the minimum no. of times

a tag or element must occur.2. Ma$occ!s+ his indicator will specify the maximum no. of

times an element can optional= occurs.

Att!i"tes+

0yn+

4est!ictions+ hese restrictions allow the user to de$ne acceptable

&alues in a xml document. he restrictions on xml elements arecalled as Afacets.

1. 4est!ictions on set o+ 2ales+

E$+

age 2#


26/52

3. 4est!ictions on se!ies o+ 2ales+

he abo&e pattern allow the user to enter the data of

length three

characters, where e&ery character lowercase alphabet.

Note+ *&ery pair of ]` represents one character.


27/52

he abo&e syntax will allow the user to enter a data of any length

but e&ery character should be a lower case alphabet.

he abo&e pattern will allow the user to enter a data of length

exactly 1L character where e&ery should be a digit.

!. 4est!ictions on len#t* o+ t*e data+

he restriction will allow the user to enter a data

whose minimum length should be O%I characters.

his restriction will allow the user to enter data whose length is

exactly O1LI characters.

7!oced!e C!eate a Docment Containin# Sc*ema Based

4les+

Click on $le menu select new select xsd w3c 8-5

0CH*-:= click on \.

age 2'


28/52

1. 2. 3.

!. #. %. '. (. ). 1L. 11.

12. 1!. 1(.

2L. 22. 2!. 2#. 2%. 2'.

age 2(
http://www.w3.org/2001/XML%20Schemahttp://www.w3.org/2001/XML%20Schemahttp://www.w3.org/2001/XML%20Schemahttp://www.w3.org/2001/XML%20Schema


29/52

3). !1. !%. !(. #L.

#2. #!. #%. #(.

age 2)

Sa2e as !les.$sd


30/52

9a2a sc!it+

1. [a&a script is the most popular scripting language used one the

internet. EtIs works all the browsers. 5ike internet *xplorer,

4irefox, Chrome etc.2. [a&a script is designed to interact with the html document.3. [a&a script code can be embedded into the html documents.!. [a&a script is an interpreted language.

Note+

[a&a and Pa&a script are two diBerent language designed for two

diBerent purpose.

Uses o+ a2a sc!it code+

1. [a&a script can be used to place dynamic content in the html

document.

age 3L


31/52

2. [a&a script can be used to read and modify the content of an

html element.3. [a&a script can be used to &alidate the form data before it is

submitted to the ser&er. his is called as Aclient side

&alidations.!. [a&a script can be used to detect the userIs browser at runtime.#. [a&a script can be used to store and retrie&e the information

from the clients machine.%. [a&a script can react to e&ents.'. o write the Pa&a script code in the html document. /e ha&e to

use . he Pa&a script code has to place in b"w

only.

(. o specify the contains Pa&a script code. /e take helpof type attribute must be document.writeAwelcome to my web site=V


32/52

he comments are used to explain the code or make the code more

readable the comments are non7executable statements ignored by

the browser. hey are two types of commands.

1. 0ingle line comment ""this is a single line comment

2. -ulti line comments "K.K"

9a2a sc!it +nctions+

/hen a Pa&a script code is written inside a it will be

executed immediately. /hen the html document is loaded on to the

browser but some times we want to do this we need to take this

support of a function.

Syn+

4unction function7name Qalue1, Qalue2= ^

0tatements to be executed

_

E$+


33/52

E$+


34/52

and V Nuestion mark, semicolon=.

*x+

$rst ; x>y=Z x+yV

if x>y=

$rst ; xV

else

$rst ; yV

#. Assi#nment oe!ato!s+ his operator is used to assign a &alue to a

&ariable. he

&arious assignment operator are assignment ;=, compound

assignment operators G;, 7;, K;, ";, M;=.

7o "o$es+

1. Ale!t "o$+

his box is used to display a message on the browser

which must be compulsory read by user.

Syn+

alert message=V

he alert box will not allow the user pro&ide for the until theuser read the message click on \ button.

2. 7!omt "o$+

his box allows the user to enter some of the

information.

Syn+

prompt message=VSyn+

rompt message, default7&alue=

he prompt be contains two buttons \

and C:9C*5 if the user can click on \ button then it will read the

a&ailable in the prompt box. Ef the user can click on C:9C*5 button

then it will display null &alue for example.

age 3!


35/52

Conditional statements+

hese statements are used to execute a

group of statements based on a condition.

1. I+ statement+ his statement will execute a group of

statements when a condition is true.

age 3#


36/52

Syn+Ef condition=

^0tatements to be executed

_

conditional statement

2. i+;else statement+

Ef the condition is true than if block is executed and when

condition is false else block is executed. 0yntax+

if condition= ^

0tatement1 _

else^

0tatement2

_

E$+

conditional statement


37/52

if1 2=

^

document.writeA1 is smaller=V

_

else

^

document.writeA1 is bigger=V

_

&ar x ; parseEnt promptA*nter a number==V

age 3'


38/52

switchx=

^

case1 + document.writeAone=V

breakV

case2 + document.writeAtwo=V

breakV

case3 + document.writeAthree=V

breakV

case! + document.writeAfour=V

breakV

default+ document.writeAwrong choice=V

_

=V

age 3(


39/52

_

&ar n ; parseEntpromptA*nter a table

number==V

&ar x ; parseEntpromptA*nter an other

number==V

&ar i ; 1V

whilei

3. Do


40/52

his loop has to be used when we do not know the exact

number of iterations.

Syn+

do

^

0tatements to be executed

_ while condition=V

Di=e!ence ">3 3*ile and do

=V

iGGV

_whilei


41/52

[a&a0cript can be considered as an obPect

oriented language, it allows the user to use prede$ned obPects or

create user de$ned obPects.

:n obPect is a kind of data which contains properties and methods.

roperties are used to hold the &alues of an obPect and the methods

represent the :ctions that are performed by the obPect.

1. St!in# o"ect+Ef the user encloses any data in Adouble codes than it is

considered as string obPect.E$+

[a&a0cript obPects

=V

document.writetext.lenght G=V

document.writetext.to5owerCase=

G=V

document.writetext.lastEndexfAa=

G=V

document.writetext.fontcolorAred=

G

2. Date o"ect+his obPect is used to perform operations on data and time.

E$+

age !1


42/52

date obPect

=V

document.writedate.getFate= G

A=V

document.writedate.getfullYear= G

A=V

document.writedate.get-inutes= G

A=V

&ar b1 ; new oolean=V&ar b2 ; new ooleanL=V&ar b3 ; new oolean1=V&ar b! ; new ooleantrue=V&ar b# ; new ooleanfalse=V

&ar b% ; new ooleanA A=V&ar b' ; new ooleanAhtml=V

age !2


43/52

&ar b( ; new ooleannull=Vdocument.writeb1 G A=Vdocument.writeb3 G A=Vdocument.writeb#G A=Vdocument.writeb'G A=V

=Vfori;LV i=V

document.writenames.sort= G


44/52

=V

document.write-ath.max!,%= G A=V

document.write-ath.ceil!.#= G A=V document.write-ath.sNrta= G

A=V document.write-ath.E G

A

9a2asc!it e2ents+

*&ents are the actions that can be identi$ed by

Pa&ascript the e&ents will be generated automatically based on the

user operations to perform any operation when an e&ent is

generated. /e generally take the help of functions.

age !!


45/52

1. onclic%+ his e&ent will be generated when the user performs

simple click.2. ond"lclic%+ his e&ent will be generated when the user

performs double click.

3. on%eydo3n+ his e&ent will be generated when the user clickson a key and not at released.

!. on%ey+ his e&ent will be generated when the key is

released.#. on%ey!ess+ his e&ent will be generated when the key is

pressed and released.%. onmose do3n+ his e&ent will be generated when the user

click on the mouse left button and not at released.

'. onmose+ his e&ent will be generated when the mouseclick is released.(. onmosemo2e+ his e&ent will be generated when there is a

change in the mo&e location.). onmoseo2e!+ his e&ent will be generated when the mouse

pointer is placed on top of a text or image and etc.1L. onmoseot+ his e&ent will be generated when the

mouse pointer is remo&ed from the top of a text or image and

etc.

11. onload+ his e&ent will be generated when the htmldocument is loaded on to the browser.

12. onnload+ he e&ent will be generated when the html

document is remo&ed from the browser.13. on+ocs+ his e&ent will be generated when the html

element has the control.1!. ons"mit+ his e&ent will be generated when the user

clicks on the submit button.

1#. on!eset+ his e&ent will be generated when the userclicks on the reset button.

1%. onc*an#e+ his e&ent will be generated when there is a

change in the &alue of the H-5 element an change.1'. one!!o!+ his e&ent will be generated when an error

occurs in the document.1(. on!esi/e+ his e&ent will be generated when there is a

change in the siDe of the frame.

""Pa&ascript

age !#


46/52

*&ents

4unction change=

^

&ar name ; myform.user.&alueV

&ar col ; myform.color.&alueV

document.bgcolor ; colV

alertname G Ahas changed the

background color to G col=V

_

Jser9ame

color

""client side &alidations

*&ents

function &alidateloginform=

^

&ar name ; loginform.user.&alueV

&ar pwd ; loginform.pass.&alueV&ar data ; "Ww"V

age !%


47/52

ifname.length;;L=

^

alertA *nter your user name=V

loginform.user.focus=V

return falseV

_

else ifname.length1#==

^

alertAuser name length is not &alid=V


return falseV

_

else ifdata.testname==

^

alertAuser name character are not &alid=V


return falseV

_

ifpwd.length;;L=

^

alertA*nter your password=V

loginform.pass.focus=V

return falseV

_

_

5oginform

age !'


48/52

/e can write the Pa&ascript code internal to the html document or

external to the html document.

function &alidateloginform=

^

.

.. ""

.

.

_

o include the external Pa&ascript into a html document. /e take

help of Asrc attribute of

age !(

0a&e as

&alidation

.Ps


49/52

CSS+ its stands for Acascading style sheets. C00 is used to de$ne

styles how to display the html element. he styles how to display the

html element.

1. Enline styles

2. Enternal styles3. *xternal styles

1. Inline styles+ Ef the styles are speci$ed inside the tag then

styles are called as inline styles. hese styles are applied to

only that tag in which they are speci$ed.

E$+

8Y ltd

this is a para


50/52

h1 ^

color+brownVfont7siDe+22ptV

_body

^ backgroung7color+cyanV_

3. E$te!nal Style+Ef the styles are speci$ed out side the html

document then those styles are called as external styles. he

styles a&ailable externally can be applied to all the tags

a&ailable in multiple html documents.he external styles stored out side the html document. -ust

be sa&ed with any name .= dot ha&ing.css as the extension.

E$+

^color+greenV

font7family+arialV _ h1

^color+brownVfont7siDe+22ptV

_

o use external style sheets within the html document we take help

of . he must be speci$ed in the need section of the

html document.

Syn+

age #L

0tyles.css


51/52

En the html document we can write all the types of styles. ut the

preference followed by the browser in displaying the html elements

is

1. Enline styles2. Enternal styles3. *xternal styles!. rowser Fefault styles

age #1


52/52

Basics to master HTML

Documents

Transcript of Basics to master HTML