View
226
Download
0
Category
Preview:
Citation preview
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
8/11/2019 Basics to master 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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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%
8/11/2019 Basics to master HTML
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 #
8/11/2019 Basics to master HTML
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">
8/11/2019 Basics to master HTML
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/11/2019 Basics to master HTML
8/52
:meerpet irla temple
-umbai
8/11/2019 Basics to master HTML
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$+
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
11/52
se&en
8/11/2019 Basics to master HTML
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$+
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
15/52
8/11/2019 Basics to master HTML
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%
8/11/2019 Basics to master HTML
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'
8/11/2019 Basics to master HTML
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(
8/11/2019 Basics to master HTML
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)
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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+
8/11/2019 Basics to master HTML
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#
8/11/2019 Basics to master HTML
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.
8/11/2019 Basics to master HTML
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'
8/11/2019 Basics to master HTML
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%20Schema8/11/2019 Basics to master HTML
29/52
3). !1. !%. !(. #L.
#2. #!. #%. #(.
age 2)
Sa2e as !les.$sd
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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$+
8/11/2019 Basics to master HTML
33/52
E$+
8/11/2019 Basics to master HTML
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!
8/11/2019 Basics to master HTML
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#
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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'
8/11/2019 Basics to master HTML
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(
8/11/2019 Basics to master HTML
39/52
_
&ar n ; parseEntpromptA*nter a table
number==V
&ar x ; parseEntpromptA*nter an other
number==V
&ar i ; 1V
whilei
3. Do
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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 !!
8/11/2019 Basics to master HTML
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 !#
8/11/2019 Basics to master HTML
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 !%
8/11/2019 Basics to master HTML
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
loginform.user.focus=V
return falseV
_
else ifdata.testname==
^
alertAuser name character are not &alid=V
loginform.user.focus=V
return falseV
_
ifpwd.length;;L=
^
alertA*nter your password=V
loginform.pass.focus=V
return falseV
_
_
5oginform
age !'
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
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
8/11/2019 Basics to master HTML
52/52
Recommended