Basics To Master HTML

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 <and> 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 lower
document is html document.
'. he html tag <html> in a document represents. hat the
document is html document.
(. he entire html document must be written starting html tag
<html> and ending html <"html>.
). Html document is di&ided into two sections.
(I) Head section:
his section is used to pro&ide general information
about the html doc. his section is representing by <head>.
*x+ itle, -eta etc.
(II) Body section:
his section is used to display text are images on the
.rowser. his section is representing by <body>.
Html docment st!ct!e:
<html>
<head>
<title> <"title>
<"head>
<body>
/elcome to any web page
<"body>
<"html>
0tep1+ 1rocessor to write executes the html document. 2pen an
editor and type html document.
<html>
1age 3 1
<head>
<title>4irst html<"title>
<"head>
<body>
/elcome to any web page
<"body>
<"html>
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 <677line one comment77>
*8 +<677line one comment 77 >
<677line one comment
line two comment
.
.
.
9 no. of line comments 77 >
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+
1age 3 2
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.
<body bgcolor ; A@BBooC text ; A@BooooC>
?ood :fternoon
<"body>
9ote+ 0pecifying the attributes is optional, we can specify any
number of attributes and they can speci$ed in any order.
&o!mattin# ta#s+
'"(+ his tag is use to display a text in .old face.
<b>.old<"b>
'st!on#(+ his tag is similar to <b> used to display the text in .old
face.
<strong>.old<"strong>
'i(+ his tag is use to emphasiDe a text by display in Etalics format.
<i>Etalics<"i>
'em(+ his tag is use to emphasiDe a text by display in Etalics
format.
<em>Etalics<"em>
'tt(+ his tag is use to display a text in eletype font. hat is
typewriter font.
<tt>eletype<"tt>
's(+ his tag is used to display a 0trike the text.
<s>0trike<"s>
'st!i%e(+ his tag is similar to <s> use to display a 0trike out text.
<strike>0trike<"strike>
'del(+ his tag is use to Felete a text by 0triking it out.
1age 3 3
<del>0trike<"del>
'ins(+ his tag is use to Ensert a line below the text.
<ins>underline<"ins>
'(+ his tag is use to underline a text.
<u>underline<"u>
's)(+ his tag is use to display a text as a 0uperscripted. hat the
text will be displayed abo&e the normal text.
a<sup>2<"sup>Gb<sup>2<"sup>
's"(+ his tag is use to display a text as a 0ubscripted. hat is the
text will be displayed below the normal text.
H<sub>2<"sub>02<sub>!<"sub>
'"i#(+ his tag is use display a text solidly .igger then the normal
text.
<big>text<"big>
'small(+ his tag is to display a text solidly 0maller then the
normal text.
<small>text<"small>
'cente!(+ his tag is to display a text in the Center of the
webpage<html document=.
<center>/elcome<"center>
Headin# ta#s+ hese tags are used to perform font changes display
the text in boldface and the heading tags by default align the text
tag left side. hese are six le&els of heading tags. H1, H2, H3, H!, H#
and H%. H1 is the biggest in heading and H% is the biggest in
heading and H% is the smallest heading.
/e can change the alignment of the headings by using
align attributes. *x+ align ; Aleft 3center 3rightC
<H1 align ; AleftC>Heading1<"H1>
<H2 align ; AleftC>Heading2<"H2>
<H3 align ; AcenterC>Heading3<"H3>
<H! align ; AcenterC>Heading!<"H!>
<H# align ; ArightC>Heading#<"H#>
<H% align ; ArightC>Heading%<"H%>
')!e(+<preformatted text=
his tag is used to display a text in preformatted manner. he
browser preser&e all the white spaces as it is.
1age 3 !
*x+<pre>
o,
he manager,
HF4C bank,
9ellore,
0ub+ >egarding loan to buy a house.
>espected sir"madam,
EHHHHHHHHH
HHHHHHHHHH
HHHHHHHHH.
hanking you.
<"pre>
'"!(+ his tag is used to stop displayed in the content at that point
and displayed content in a new line. he <br> will started new line
where e&er it is speci$ed.
Note+<.r> is an empty tag that is <.>> tag doesnIt content any
element content.
*x+
<body>
line one<"br>
line two<"br>
line three
<"body>
')(+ his tag is used to display a paragraph. he <p> will add
paragraph break <inserts an empty line before and after the
paragraph=. he paragraphs are is by default to left side. /e can
change the alignment by using the alignment attribute.
*x+ align ; Aleft 3center 3rightC
<p align ; AleftC>this is a paragraph<"p>
<p align ; AcenterC>his is a paragraph<"p>
<p align ; ArightC>his is a paragraph<"p>
1age 3 #
'*!(+ 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+<hr width ; A3LLC"> or <hr width ; A'#MC">
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$+<hr color ; AredC">
-. Si/e+ his attribute speci$es the thickness of the horiDontal
rule to be displayed.
E$+<hr siDe A1LC">
!. 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 ; AcenterC">
<hr width ; A'#MC align ; AcenterC color ;
AblueC siDe ; A1LC">
Note: hr is an empty tag.
Lists+ En html document we can present the data in the form of list.
here are 3 types of lists.
1. 2rdered 5ist
2. Jnordered 5ist
1age 3 %
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 can
change the display by using AtypeC attribute.
ype ; A1 3 a 3 : 3 i 3E3C
E$+ <ol type AEC>
<li>Hyderabad<"li>
<li>-umbai<"li>
<li>Chennai<"li>
<"ol>
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 AypeC attribute.
ype ; Adisc 3 sNuare 3 circleC
E$+
<Jl>
<li>Hyderabad<"li>
<li>-umbai<"li>
<li>Chennai<"li>
<"Jl>
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$+
<dl>
<dt>Hyderabad<"dt>
<dd>.iriyani<"dd>
<dt>Chennai<"dt>
<dd>somber<"dd>
<dt>-umbai<"dt>
<dd>bomb<"dd>
<"dl>
/e can place a list inside another list that is nesting of lists is
possible.
E$+
<Jl>
<li>Hyderabad<"li>
<ol>
1age 3 '
<li>:meerpet<"li>
<li>Hi7tech<"li>
<li>.irla temple<"li>
<"ol>
<li>-umbai<"li>
<li>Chennai<"li>
<"Jl>
'&ont(+ his tag can be used to apply font changes, change the
text color or face or siDe.
Att!i"tes o+ '+ont(+
1. Colo!+ his attribute speci$es the color of the text to be
displayed.
E$+ <font color ; AredC> Hello <"font>
2. Si/e+ his attribute speci$es the font siDe to be displayed.
E$+ <font siDe ; A1LC>Hello<"font>
3. &ace+ face will specify the place of the text to be display.
E$+ <font face ; A:rialC>Hello <"font>
<font color ; AredC siDe ; A1LC face ; A:rialC> Hello<"font>
Note+ 4ont tag is dependent tag. hat is <font> will not apply any
changes without the attributes.
'im#( +<image= this tag is used to display and img on the html
document.
Att!i"tes o+'im#(+
1. S!c(so!ce)+ his attribute speci$es of the J>5<:ddress of the
image=.
2. Bo!de!+ his attribute speci$es of the thickness of the border
around the image. .y default thickness is ODeroI pixels.
3. ,idt*+ his attribute speci$es of the width of the an image to
be displayed in a html document.
!. Hei#*t+ his attribute speci$es of the Height of the image to
be displayed in a html document.
1age 3 (
#. Alt(alte!nate te$t)+ his attribute speci$es a text to be
displayed on the html document when an image is not loaded.
%. Hs)ace(Ho!i/ontal S)ace)+ his attribute speci$es the
amount of space empty space to be displayed on the left and
right sides of the image.
'. 1S)ace(2e!tical s)ace)+ his attribute speci$es the amount
of empty space to be displayed on the top and bottom of the
image.
E$+<img src ; Asmile.PpgC border ; A2C width ; A1LLC height ;
A1LLC alt ; Asmile logoC hspace ; A#LC &space ; A3LC">
Note+ :n <img> is an empty tag and <source= AsrcC is a mandatory
attribute to display an image.
'Ta"le(+ his tag is used to display a table in a html document
Att!i"tes o+ 'ta"le(+
1. Bo!de!+ his attribute speci$es the thickness of the border to
be displayed. .y default are Dero pixels.
2. Bo!de! colo!+ his attribute speci$es the color of the border to
be displayed.
3. ,idt*+ his attribute speci$es the width of the table.
!. Hei#*t+ his attribute speci$es the height of the table.
#. Ali#n+ his attribute can be used to align a table in a web page.
%. B#colo!+ his attribute speci$es a bgcolor for the table.
'. Bac%#!ond+ his attribute is used to display an image the
background to be table.
(. Cell )addin#+ his attribute speci$es the amount of space
between cell content and cell border.
). Cell s)acin#+ his attribute speci$es the space between the
cells and b"w the cell border and table border.
S" ta#s o+ 'ta"le(:
1. 't!((ta"le !o3)+ his tag is used to create a row in a table.
he no. of <tr> will indicate the no. of row in a table.
1age 3 )
2. 'td((ta"le data)+ his tag is used to create a column<cell=
in a particular row. he no. of <td>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 <td> but <th> will display the text in
bold face and the text will be centered.
!. 'ca)tion(+ his tag is used to display a heading to a table.
Att!i"tes o+ s" ta#s+
1. 4o3 s)an+ his attribute is used to span <merge= the cells
&ertically.
2. Cols)an+ his attribute is used to span <merge= the cells
horiDontally.
3. 1ali#n+ his attribute is used to align the text &ertically. Qalign
; Atop 3 middle 3bottomC by the default it is &ertically aligned to
middle. En this sub tags we can also use align, bgcolor, and
background attributes.
E$+ <html>
<head>
<title>able<title>
<"head>
<body>
<table border ; A2C width ; A1#LC height ; A1#LC
bordercolor ; AredC bgcolor ; ApinkC
cellpadding ; A1LC>
<caption>number table<"caption>
<tr>
<th>one<"th>
<th>two<"th>
<td align ; AcenterC>three<"td>
<"tr>
<tr>
<td colspan ; A2C align ;
AcenterC>four<"td>
<td rowspan ; A2C &align ; AtopC bgcolor
; AredC> six<"td>
<"tr>
<tr>
1age 3 1L
<td>se&en<"td>
<td>eight<"td><"tr>
<"table>
<"body>
<html>
'Ma!5ee(+ his tag use to display a scrolling text on a web page.
Att!i"tes o+ 'Ma!5ee(+
1. Be*a2io!+ his attribute speci$es the beha&ior of the scrolling
text in a web page.
E$+
.eha&ior ; Ascroll 3 slide 3 alternateC<the default
beha&ior is scroll=
2. Di!ection+ his attribute speci$es the direction in which the
text will be scrolled. .y default the text scrolls towards left side.
3. B#colo!+ his attribute will display bgcolor to the scrolling text.
!. Sc!oll amont+ his attribute speci$es the speed of the
scrolling text.
E$+
<marNuee beha&ior ; AscrollC direction ; ArightC
bgcolor ; AredC scrollamount ; A!#C>Rash
news<"marNuee>
'a(+ his tag is use to create link b"w the html documents are any
other web resource.
Att!i"tes o+ 'a(+
1. H!e+(*y)e!lin%in# !e+e!ence)+ his attribute speci$es the
J>5<address= of the resource to which the hyperlink as the link
reference.
2. Ta!#et+ his attribute will speci$es were to open the linked
document.
arget ; ASselfC 3 ASblankC <Sunder scor= the default &alue
Sself.
3. Name+ his attribute is used to create named :nchor. he
named anchor can be used to Pump from one location to
another location with in a html document.
E$+ <a href ; Aimage.htmlC target ; ASblankC>click
here<"a>
1age 3 11
&!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 a
frameset.
Att!i"tes o+ '+!ame(+
1. S!c(so!ce)+ his attributes speci$es the J>5<address= 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 3 yes 3 noC
he default scrolling &alue is also AautoC.
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$+
<html>
<frameset rows ; A3LM,KC border ; A1LC>
<frameset src ; Awelcome.htmlC noresiDe">
<frameset cols ; A1LL,KC>
<frame src ; Asample.htmlC">
<frame src ; Aimage.htmlC">
<"frameset>
<"frameset>
Note+ he frameset tag must be written outside the <body>.
&o!ms+ 4orm is an area which contains some input elements where
the user can pro&ide the information. 4orms are used to submit the
data to the ser&er are any other resource. he html document can
1age 3 12
ha&e any no. of forms. o create a form in html document we use
<form>.
Att!i"tes o+ '+o!m(+
1. Action+ his attribute speci$es the J>5<address= 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 J>5. 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 submit
to the ser&er separately form the J>5. 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#+
'in)t(+ his tag is used to create a input element where the user
can either some information.
Att!i"tes o+ 'in)t(+
1. Ty)e+ 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.
1age 3 13
<0elect>+ 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$+
<html>
<head>
<title>>egistration<"title>
<"head>
<body bgcolor ; AgreenC>
<form method ; ApostC name ;
AregistrationformC>username<input type ; AtextC name
; AuserC siDe ; A3LC"><br">
1assword<input type ; ApasswordC name ; ApassC siDe ;
A3LC"><br">
Con$rm password<input type ; ApasswordC name ;
AcpassC siDe ; A3LC"><br">
?ender<input type ; AradioC name ; AsexC">
-ale<input type ; AradioC name ; AsexC">
4emale<input type ; AradioC name ; AsexC"><br">
Tuali$cation
<select>
<option>.ech<"option>
<option>-C:<"option>
<option>.0c<"option>
<select><br">
Hobbies
<input type ;Ccheck boxC>programming
<input type ;Ccheck boxC>browsing
<input type ;Ccheck boxC>reading<br">
Comments
<textarea rows ; A#C cols ; A3LC>*nter your
comments<"textarea><br">
<input type ; AsubmitC &alue ; AregisterC">
<input type ; AresetC &alue ; AclearC">
1age 3 1!
<"form>
<"body>
<"html>
S)ecial c*a!acte! in HTML+
his are those character which ha&e special
meaning with the browser all these characters are not a&ailable in
keyboard.
1. ! U ltV <! < #=
2. ! U gtV <! > #=
3. UregV
!. UcopyV
#. UtradeV
%. 1arsndV
'. UampV
(. UNuotV inet sol&e U NuotV Ainet sol&eC
). Ua posV solutions U aposV AsolutionsC
6ml+ EtIs transfer A*xtensible -arkup 5anguageC. Et is a markup
language that pro&ide en&ironment to create cross platform
compactable $le. Cross platform compatibility means it is not
speci$c to any operating system, any H"/, any 0"/ and etc.
. 8ml is a standard gi&en by Ow3cI. o create tag based data.
. 8ml is called as A-other languageC using which we can create
other markup languages. 5ike wml, &ml, and mml etc.
. 8ml is use to store and describe the data. Fata means meaningful
and understandable information. Fata can be stored in a text $le or
database or xml $le.
Te$t 0le+ he text $le can content formatted and unformatted data.
. Et doesnIt show any hierarchy among the data.
. Et doesnIt show any relationships b"w the &alues.
. Et doesnIt pro&ide any tools to check or &erify the correctness of the
data.
. he text $les are some time depended on the output.
Data"ase: he database can content formatted data in the form of
tables.
. En a database we reNuire a separate of a Nuery language to operate
on the data.
1age 3 1#
. 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
format
the 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 free
language.
#. Html can be used to design web
pages.
#. 8ml can be used to transfer
data
b"w in compatible.
%. Html document can content
proper and improper nesting.
%. 8ml document can content
only
proper nesting.
'. Html can be used to apply
styles
on 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 languageC.
1age 3 1%
. 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 )!e)a!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, @ H.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$+ <9:-*S24SH*S0JF*9>
,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 formed
other wise not well formed.
1age 3 1'
!. *&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.
1age 3 1(
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 +<6 *5*-*9 element7name *-1Y>
*x +<6 *5*-*9 address *-1Y>
2. Feclaring an element which contains 1CF::.
0yn+ <6 *5*-*9 element7name <@ 1CF::=>
*x+ <6 *5*-*9 roll no <@1CF::=>
3. Feclaring an element which can contain any data
0yn+ <6 *5*-*9 element7name :9Y>
*8+ <6 *5*-*9 name :9Y>
!. Feclaring an element which contains seNuence of child
elements.
0yn+ <6 *5*-*9 element7name <child7name1, child7
name2H.=>
*x+ <6 *5*-*9 student <roll no, name, mobile no, add=>
#. Feclaring an element which must occur exactly one time.
0yn+ <6 *5*-*9 element7name <child7name=>
*x+ <6 *5*-*9 student <roll no=>
%. Feclaring an element which can occur Dero or more times.
0ys+ <6 *5*-*9 element7name <child7nameK=>
*x+ <6 *5*-*9 student <mobile noK=>
'. Feclaring an element which must occur at least one time <one
or more times=.
0ys+ <6 *5*-*9 element7name <child7nameG=>
*x+ <6 *5*-*9 student <mobile noG>
1age 3 1)
(. Feclaring an element which must occur either L or 1 time.
0ys+ <6 *5*-*9 element7name <child7nameZ=>
*x+ <6 *5*-*9 student <addressZ=>
Decla!in# att!i"tes+
1. Feclaring n attribute with a default &alue.
0ys +<6 :5E0 element7name attribute7name attribute7type
AdefaultC>
*x +<6 :5E0 student course cF:: AxmlC>
2. Feclaring an attribute which is mandatory.
@>*:JEF*F>
*x +<6 :5E0 student course cF:: @>*:JEF*F>
3. Feclaring an attribute which is optional.
@E-15E*F>
*x +<6 :5E0 student course cF:: @E-15E*F>
!. Feclaring an attribute whose &alue is $xed.
@4E8*F A&alueC>
*x +<6 :5E0 student fee cF:: @4E8*F A3#LLC>
#. Feclaring an attribute containing an enumerated list.
0ys +<6 :5E0 element7name attribute7name <en7&alue1, en7
&alue2H.=>
*x +<6 :5E0 student branch <cse 3it 3 eee 3ese=>
Decla!in# an entity+
1. Feclaring an internal entity.
0ys +<6 *9EY entity7name entity7&alue>
2. Feclaring an external entity.
0ys +<6 *9EY entity7name 0Y0*- J>5>
>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.
1age 3 2L
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 :1E 8-5 1rocess=
F2- <Focument 2bPect -odel=
Focument 2bPect model for [a&a <[F2-=
IDE+
EtIs Atransfer Entegrated Fe&elopment *n&ironmentC. Et is used
to speed of the de&elopment of an application. /here reduces the
de&elopment time.
E$:
8-5 01Y
0Y5J0 0JFE2
7!oced!e to o)en 6ML S78 IDE+ Click on start on select all
program sales :lco&e
Click on xml spy.
1age 3 21
7!oced!e to c!eate DTD !les+ Click on $le menu
select new item select FF <Focument ype Fe$nition=
click on 2\.
4les+
1. <6*5*-*9 institute <student G=>
2. <6 *5*-*9 student <rollno, name, mobilenoK, addressZ>
3. <6*5*-*9 rollno <@pcF::=>
!. <6*5*-*9 name <@pcF::=>
#. <6*5*-*9 mobileno <@pcF::=>
%. <6*5*-*9 address <hno,colony,city=>
'. <6*5*-*9 hno <@pcF::=>
(. <6*5*-*9 colony <@pcF::=>
). <6*5*-*9 city <@pcF::=>
1L. <6:5E0 student course <Pa&a3.net3oracle3html= AhtmlC >
11. <6:5E0 student type cF:: @E-15E*F>
12. <6:5E0 student country cF:: @4E8*F AindiaC>
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 2\ .rowser for FF $le click on 2\.
1 <6 F2CY1* institute 0Y0*- AF+Wstudrules.dtdC>
2 <institute>
3 0tudent course ; AhtmlC ype ; AinspectorC>
! <rollno>123<"rollno>
# <name>>ams<"name>
% <mobileno>))!)13)())<"mobileno>
' <mobileno>((('''%%%3<"mobileno>
( <address country ; AindiaC>
) <hno>2"2L2<"hno>
1L<colony>nawabpet<"colony>
11<city>bond<"city>
12<"address>
13<"student>
1!<"institute>
1rocedure to create a 8-5 document containing internal FF rules+
Click on $le menu
1age 3 22
0elect new item
0elect 8-5 <*xtensible -arkup 5anguage=
Click on 2\
Click on cancel
<6 F2CY1* institute ]
<6 *5*-*9 institute <student G=>
.
.
.^same as pre&ious rules_
.
.
<6 :5E0 address country cF:: @4E8*F AindiaC>
`>
<institute>
<student course ; AhtmlC ype ; AinspectorC>
.
.
.^same as pre&ious rules_
.
.
<"student>
<"institute>
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
1age 3 23
.. Complex element
1. Sim)le element+
:n element is said to be simple if it contains only
text. Et should
not contain some other element or attributes.
0yn+
<xs+ element name ; AxxxC type ; AyyyC">
Here xxx represent the name of the element and yyy represent
the type of the data.
*x+
<xs+ element name ; AmobilenoC type ; Axs+
integerC">
<xs+ element name ; AxxxC type ; AyyyC default ;
A&alueC">
<xs+ element name ; AxxxC type ; AyyyC $xed ;
A&alueC">
2. Com)le$ element+
:n element is said to be complex if it contains
some child
element and attributes or attributes.
*x+
<xs+ element name ; AxxxC>
<xs+ complexype>
<xs+ seNuence>
<xs+ element name ; Ax1C type ;
Ay1C">
<xs+ element name ; Ax2C type ;
Ay2C">
<"xs+ seNuence>
<"xs+ complexype>
<"xs+ element>
Here, xxx represents the name of the complex element name x1 and
x2 represent name of the child elements any y1 and y2 represents
the type of x1 and x2 respecti&ely. Here, x1 and x2 order canIt be
changed x1 must be followed by the x2 only.
1age 3 2!
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+
<xs+ attribute name ; Axxx A ype ; Ayyy A">
<xs+ attribute name ; AcourseAype ; Axs+ stringAdefault
; AxmlC">
<xs+ attribute name ; AcourseAype ; Axs+ stringAdefault
;CxmlC">
<xs+ attribute name ; AcourseC ype ; Axs+ string
A$xed;CPa&aC">
<xs+ attribute name ; AcourseC ype ; Axs+ stringA
use;Coptional"reNuiredC">
4est!ictions+ hese restrictions allow the user to de$ne acceptable
&alues in a xml document. he restrictions on xml elements are
called as AfacetsC.
1. 4est!ictions on set o+ 2ales+
E$+
<xs+ element name;C-arksC>
<xs+ 0impleype>
<xs+ restriction base;Cxs+integerC>
<xs+ minEnclusi&e &alue;C1LC">
<xs+maxEnclusi&e &alue;C1LLC">
1age 3 2#
<"xs+restriction>
<"xs+ 0impleype>
<"xs+ element>
Ef we use minEnclusi&e and maxEnclusi&e the extremes &alues
will be included into the range.
Enstead of minEnclusi&e and max*xclusi&e we can use
min*xclusi&e and max*xclusi&e where the *xtreme &alues will
not be Encluded.
2. 4est!ictions on List o+ 2ales+
E$+
<xs+ element name ; AbranchC>
<xs+ simpleype>
<xs+ restriction base ; Axs+ stringC>
<xs+ enumeration &alue ; AcseC">
<xs+ enumeration &alue ; AitC">
<xs+ enumeration &alue ; AmcaC">
<xs+ enumeration &alue ; AeceC">
<"xs+ restriction>
<"xs+ simpleype>
<"xs+ element>
3. 4est!ictions on se!ies o+ 2ales+
<xs+ element name ; AxxxC>
<xs+ simpleype>
<xs+ restriction base ; AyyyC>
<xs+ pattern &alue ; A<]a7D`G=C">
<"xs+ restriction>
<"xs+ simpleype>
<"xs+ element>
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.
<xs+ pattern &alue ; A]abcd`">
he abo&e syntax allow to enter a data of length one character
where that character can be either OaI or ObI or OcI and OdI.
1age 3 2%
<xs+ pattern &alue ; A]L7)`]L7)`]L7)`]L7)`C">
he abo&e pattern will allow the user to enter a data of length of
data ! character where each character should be a digit.
<xs+ pattern &alue ; A<]a7D`=KC">
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.
<xs+ pattern &alue ; A<]a7D`]:7a`=GC">
he abo&e pattern will allow the user to enter a data containing one
or more pairs of lower case and the upper case alphabets
respecti&ely.
<xs+ pattern &alue ;C]L7)`^1L_C">
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+
<xs+ pattern &alue ;C <]a7D:7aL7)b@c M`=K">
<xs+ min5ength &alue;C%C">
he restriction will allow the user to enter a data
whose minimum length should be O%I characters.
<xs+ pattern &alue ; A<]a7D :7a b @ M c`=KC">
<xs+ max5ength &alue ; A2LC>
his restriction will allow the user to enter a data whose maximum
length can be up to O2LI characters.
<xs+ length &alue ; A1LC">
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 2\.
1age 3 2'
1. <xs+ schema xmlns+ xs;Chttp+""www.w3.org"2LL1"8-5
0chemaC>
2. <xs+ element name ; AinstituteC>
3. <xs+ complexype>
!. <xs+ seNuence>
#. <xs+ element name;AstudentC minoccurs ; A1C maxoccurs ;
A%LC>
%. <xs+ complexype>
'. <xs+ seNuence>
(. <xs+ element name;ArollnoC maxoccurs;A1C minoccurs;C1C>
). <xs+ simpleype>
1L. <xs+ restriction base ; Axs+ integerC>
11. <xs+ pattern &alue ; A]L7)`]L7)`]L7)`C>
12. <"xs+ restriction>
13. <"xs+ simpleype>
1!. <"xs+ element>
1#. <xs+ element name ; AnameC maxoccurs ; A1C minoccurs
; A1C>
1%. <xs+ simpleype>
1'. <xs+ restriction base ; Axs+ stringC">
1(. <xs+ pattern &alue ; A<]a7D:7a`=KC">
1). <xs+ min5ength &alue ; A!C">
2L. <xs+ maxlength &alue ; A1LC">
21. <"xs+ restriction>
22. <"xs+ simpleype>
23. <"xs+ element>
2!. <xs+ element name ; AmobilenoC minoccurs ; A2C
maxoccurs ; A#C>
2#. <xs+ simpleype>
2%. <xs+ restriction base ; Axs+integerC>
2'. <xs+ pattern &alue ; A]'()`]L7)`^)_C">
2(. <"xs+ restriction>
2). <"xs+ simpleype>
3L. <"xs+ element>
31. <xs+ element name ; AaddressC>
32. <xs+ complexype>
33. <xs+ all>
3!. <xs+ element name ; AhnoC type ; Axs+ stringC">
3#. <xs+ element name ; AcolonyC type ; Axs+ stringC">
3%. <xs+ element name ; AcityC type ; Axs+ stringC">
3'. <"xs+ all>
3(. <xs+ attribute name ; AcountryC $xed ; AindiaC">
1age 3 2(
3). <"xs+ complexype>
!L. <"xs+ element>
!1. <"xs+ seNuence>
!2. <xs+ attribute name ;CcourseC use ; AreNuiredC>
!3. <xs+ simpleype>
!!. <xs+ restriction base ; Axs+ stringC>
!#. <xs+ enumeration &alue ; AhtmlC">
!%. <xs+ enumeration &alue ; AxmlC">
!'. <xs+ enumeration &alue ; APa&aC">
!(. <xs+ enumeration &alue ; AoracleC">
!). <"xs+ restriction>
#L. <"xs+ simpleype>
#1. <"xs+ attribute>
#2. <xs+ attribute name ; AtypeC use ;CoptionalC type ; Axs+
stringC default ; AregularC">
#3. <"xs+ complexype>
#!. <"xs+ element>
##. <"xs+ seNuence>
#%. <"xs+ complexype>
#'. <"xs+ element>
#(. <"xs+ schema>
7!oced!e to 3!ite a $ml docment +ollo3in# sc*ema "ased
!les+
1. Click on $le menu select new item select xml
click on 2\.
2. 0elect schema click on 2\ browse for.xsd $le U
click on 2\.
<institute xmlns+ xsi ; Ahttp"www.w3.org"2LLL"xml
schema7instanceC
8si + no9ame space schema5ocation ;
AF+Wrules.xsdC>
.
.
.
<"institute>
1age 3 2)
Sa2e as !les.$sd

9a2a sc!i)t+
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!i)t code+
1. [a&a script can be used to place dynamic content in the html
document.
1age 3 3L
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
&alidationsC.
!. [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 <script>. he Pa&a script code has to place in b"w <script>
only.
(. o specify the <script> contains Pa&a script code. /e take help
of type attribute must be <script type ; Atext"[a&a0criptC>
). he <script> can be placed either in head section or body
section or both sections.
E$+
<html>
<head>
<title>Pa&a script<"title>
<"head>
<body>
<script type ; Atext"Pa&a scriptC>
document.write<Awelcome to my web siteC=V
<"script>
<"body>
<"html>
he document.write is the standard [a&a0cript command to
display a message on the browser. he data which is speci$ed in
side the write function will be displayed as it is on the browser.
9a2a sc!i)t statements+
he statements are the commands to the browser. he purpose of
the statement is to tell a browser what to do. he Pa&a script
statements can be a terminated by a <V= semi colon.
9a2a sc!i)t comments:
1age 3 31
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 "KHHH.K"
9a2a sc!i)t +nctions+
/hen a Pa&a script code is written inside a <script> 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, Qalue2H= ^
0tatements to be executed
_
E$+
<html>
<head>
<script type ; Atext"[a&a0criptC>
4unction display <=
^
document.writen <Agood afternoonC=V
_
<"script>
<"head>
<body onload ; Adidplay <=C>
<"body>
<"html>
9a2a sc!i)t 2a!ia"les+
he &ariables can be used to hold a &alue or and expression. he
&ariable name must begin with either an alphabet or an underscore
symbol.
[a&a script doesnIt contain any data types. o declare a &ariable in
the Pa&a script we are use OQarI <&ariable=.
: &ariable of Pa&a script can contain any kind of data and the string
data must be enclose in <AA= double codes.
1age 3 32
E$+
<head>
<script type ; Atext"Pa&a scriptC>
&ar x ; 1LV
&ar y ; 2L.#LV
&ar D ; x G yV
&ar name ; APa&aCV
document.write <Asum of ;C G w=V
<"script>
<"head>
9a2a sc!i)t o)e!ato!s+
1. A!it*metic o)e!ato!s+
hese operators are used to perform then
mathematical
calculations. he &arious :rithmetic operators are :ddition <G=,
0ubtraction <7=, -ultiplication <K=, Fi&ision <"=, -odules <M=,
Encrement <GG=, and Fecrement <77=
2. 4elational o)e!ato!s+
hese operators are used for comparing the
&alues. hese
operators can also be called as comparison operators. he
&arious relational operators are less than, less than are eNuals,
grater than, grater than are eNual,
eNuals, not eNuals <<, <;, >, >;, ;;, 6;=.
3. Lo#ical o)e!ato!s+
hese operators are used to combine the
conditions or used
to compliment the result. he &arious logical operators are :9F
<U=, 2> <3=, and 92 <6=.
!. Conditional o)e!ato!s+
his operator is also called as ternary operator
and it is used to perform some operators based on a condition.
he conditional operator isZ
1age 3 33
and V <Nuestion mark, semicolon=.
*x+
$rst ; <x>y=Z x+yV
if <x>y=
$rst ; xV
else
$rst ; yV
#. Assi#nment o)e!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 the
user read the message click on 2\ button.
2. 7!om)t "o$+
his box allows the user to enter some of the
information.
Syn+
prompt <message=V
Syn+
1rompt <message, default7&alue=
he prompt be contains two buttons 2\
and C:9C*5 if the user can click on 2\ 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.
1age 3 3!
<html>
<head>
&ar n ; prompt<Aenter a numberC, A!#%'C=V
document.write<An;C G n=V
<"script>
<"head>
<body>
<"body>
<"html>
3. Con0!m "o$+
his box is used to take the con$rmation from
the user.
Syn+
con$rm<message=V
he con$rm box contains two buttons 2\ and C:9C*5.
/hen the user click on 2\ button it return is true. /hen the use
click on C:9C*5 button it returns false.
E$+
<html>
<head>
<title>pop up boxes<"title>
<"head>
<body>
<0cript type ; Atext"[a&a0criptC>
&ar status ; con$rm<Ado you want to sleepC=V
document.write<status=V
<"script>
<"body>
<"html>
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.
1age 3 3#
Syn+
Ef <condition=
^
_
<html>
<head>
<title>conditional statement<"title>
<"head>
<body>
if<1 < 2=
^
document.write<AHelloC=V
_
<"script>
<"body>
<"html>
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$+
<html>
<head>
<"head>
<body>
1age 3 3%
if<1 d 2=
^
document.write<A1 is smallerC=V
_
else
^
document.write<A1 is biggerC=V
_
<"script>
<"body>
<"head>
3. s3itc* statement+
his statement is used to execute an option from a
group of option from a group of options that are a&ailable.
Syn+
0witch <expression=
^
case &alue1 + statement1V
breakV
breakV
breakV
case &alue! + statement!V
breakV
default + default statementV
_
E$+
<html>
<head>
<"head>
<body>
&ar x ; parseEnt <prompt<A*nter a numberC==V
1age 3 3'
switch<x=
^
case1 + document.write<AoneC=V
breakV
case2 + document.write<AtwoC=V
breakV
case3 + document.write<AthreeC=V
breakV
case! + document.write<AfourC=V
breakV
default+ document.write<Awrong choiceC=V
_
<"script>
<"body>
<"html>
Ite!atin# statements+ hese statements are used to execute a
group of statements multiple times.
1. &o! loo)+
his statement has to be used when we known the exact
number of iterations.
Syn+
for<initialiDationV conditionV increment"decrement=
^
_
E$+
<html>
<head>
<title>Eterating statements<"title>
<"head>
<body>
&ar fact ; 1V
for<x;1V x<;1LV xGG=
^
fact ; fact K xV
document.write<xGC6;C GfactG A<"br>C=V
1age 3 3(
_
<"script>
<"body>
<"html>
2. ,*ile loo)+
his loop must be used when we do not know the exact
no. of iterations.
Syn+
while<condition=
^
_
E$+
<html>
<head>
<title>iterating statement<"title>
<"head>
<body>
&ar n ; parseEnt<prompt<A*nter a table
numberC==V
&ar x ; parseEnt<prompt<A*nter an other
numberC==V
&ar i ; 1V
while<i<;x=
^
document.write<n G AKC Gi G A;C G<nKi=
GC<br">C=V
iGGV
_
<"script>
<"body>
<"html>
3. Do<..3*ile loo)+
1age 3 3)
his loop has to be used when we do not know the exact
number of iterations.
Syn+
do
^
_ while <condition=V
Di=e!ence ">3 3*ile and do<.3*ile loo)?+
En a while loop if the condition is false for the 1
st
time then
statements will be execute ADero timesC.
En a doH.while loop if the condition is false for the 1
st
time
statement will be execute for Aone timeC.
E$+
<html>
<head>
<title>iteration statements<"title>
<"head>
<body>
n ; praseEnt<prompt<A*nter a table numberC==V
x ; parseEnt<prompt<A*nter an other numberC==V
&ar i ; 1V
do
^
document.write<n G AKC GiG A;C G<nKi=
G A<br">C=V
iGGV
_while<i<;x=V
<"script>
<"body>
<"html>
9a2aSc!i)t o":ects+
1age 3 !L
[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.
1roperties 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 codesC than it is
considered as string obPect.
E$+
<html>
<head>
<title>[a&a0cript obPects<"title>
<"head>
<body>
&ar type ; APa&ascriptCV
document.write<text GC<br">C=V
document.write<text.lenght GC<br">C=V
document.write<text.toJpperCase<=
GC<br">C=V
document.write<text.to5owerCase<=
GC<br">C=V
document.write<text.index2f<AaC=
GC<br">C=V
document.write<text.lastEndex2f<AaC=
GC<br">C=V
document.write<text.replace<APa&aC,CQ.C=
GC<br">C=V
document.write<text.fontcolor<AredC=
GC<br">C=V
<"script>
<"body>
<"html>
2. Date o":ect+
his obPect is used to perform operations on data and time.
E$+
1age 3 !1
<html>
<head>
<title>date obPect<"title>
<"head>
<body>
&ar date ; new Fate<=V
document.write<date G A<br">C=V
document.write<date.getFate<= G
A<br">C=V
document.write<date.get-onth<= G
A<br">C=V
document.write<date.getfullYear<= G
A<br">C=V
document.write<date.getHouse<= G
A<br">C=V
document.write<date.get-inutes<= G
A<br">C=V
document.write<date.get0econds<= G
A<br">C=V
<"script>
<"body>
<"html>
3. Boolean o":ect+ his obPect represents either true or false.
.ased on the &alue we pass to the boolean obPect.
E$+
<html>
<head>
<title>.oolean obPect<"title>
<"head>
<"body>
<script type ; Atext"Pa&ascriptC>
&ar b1 ; new .oolean<=V
&ar b2 ; new .oolean<L=V
&ar b3 ; new .oolean<1=V
&ar b! ; new .oolean<true=V
&ar b# ; new .oolean<false=V
&ar b% ; new .oolean<A A=V
&ar b' ; new .oolean<AhtmlC=V
1age 3 !2
&ar b( ; new .oolean<null=V
document.write<b1 G A<br">C=V
document.write<b!G A<br">C=V
document.write<b#G A<br">C=V
document.write<b%G A<br">C=V
document.write<b'G A<br">C=V
document.write<b(G A<br">C=V
<"script>
<"body>
<"html>
!. A!!ay o":ect+
his obPect is used to &alue store multiple &alues into a single
&ariable.
E$+
<html>
<head>
<title>:rray 2bPect<"title>
<"head>
<body>
&ar names ; new :rray<=V
names]L` ; APohnCV
names]1` ; A\hanCV
names]2` ; AahanCV
names]3` ; A-allikarPunaCV
names]!`; A0uneelCV
document.write<names G A<br">C=V
for<i;LV i<names.lengthViGG=V
^
Focument.write<names]i`
GC<br">C=V
_
document.write<names.re&erse<=
GC<br">C=V
document.write<names.sort<= GC<br">C=V
1age 3 !3
<"script>
<"body>
<"html>
#. Mat* o":ect+ his obPect is used to perform mathematical
operations.
E$+
<html>
<head>
<title>-ath 2bPect<"title>
<"head>
<body>
document.write<-ath.min<!,%= G A<br">C=V
document.write<-ath.max<!,%= G A<br">C=V
document.write<-ath.Roor<!.#= G
A<br">C=V
document.write<-ath.ceil<!.#= G A<br">C=V
document.write<-ath.round<!.#= G
A<br">C=V document.write<-ath.sNrt<a= G
A<br">C=V document.write<-ath.random<=
G A<br">C=V document.write<-ath.1E G
A<br">C=V
<"script>
<"body>
<"html>

9a2asc!i)t 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.
1age 3 !!
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 clicks
on 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 mouse
click 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 html
document 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 user
clicks 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
1age 3 !#
<html>
<head>
<title>*&ents<"title>
4unction change<=
^
&ar name ; myform.user.&alueV
&ar col ; myform.color.&alueV
document.bgcolor ; colV
alert<name G Ahas changed the
background color toC G col=V
_
<"script>
<"head>
<body>
<form name ; AmyformC>
Jser9ame<input type ; AtextC siDe ; A2#C name ;
AuserC"> <br">
color<input type ; AtextC siDe ; A2#C name ;
AcolorC"><br">
<input type ; AbuttonC &alue ; AchangeC onclick ;
Achange<=C">
<"form>
<"body>
<"html>
""client side &alidations
<html>
<head>
<title>*&ents<"title>
function &alidate<loginform=
^
&ar name ; loginform.user.&alueV
&ar pwd ; loginform.pass.&alueV
&ar data ; "Ww"V
1age 3 !%
if<name.length;;L=
^
alert<A *nter your user nameC=V
loginform.user.focus<=V
return falseV
_
else if<<name.length<%= 33 <name.length>1#==
^
alert<Auser name length is not &alidC=V
return falseV
_
else if<data.test<name==
^
alert<Auser name character are not &alidC=V
return falseV
_
if<pwd.length;;L=
^
alert<A*nter your passwordC=V
loginform.pass.focus<=V
return falseV
_
_
<"script>
<"head>
<body bgcolor ; AcyanC>
<center>
<h1>5oginform<"h1>
<form name ; AloginformC onsubmit ; Areturn
&alidate<this=C>
Jser9ame<input type ; AtextC name ; AuserC siDe ;
A3LC"><br">
password<input type ; ApasswordC name ; ApassC siDe ;
A3LC"> <br">
<input type ; AsubmitC &alue ; A5oginC">
1age 3 !'
<"from>
<"center>
<"body>
<"html>
/e can write the Pa&ascript code internal to the html document or
external to the html document.
function &alidate<loginform=
^
HH.
HHHH
HHHHH.. ""
HHHHHHH.
HHHHHHHHH.
_
o include the external Pa&ascript into a html document. /e take
help of AsrcC attribute of <script>
<script type ; Atext"Pa&ascriptC src ; A&alidation.Ps>
<"script>

1age 3 !(
0a&e as
&alidation
.Ps
CSS+ its stands for Acascading style sheetsC. 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 styles
3. *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$+
<h1 style ; Acolor+blueV text7align+centerVC> 8Ya ltd
<"h1>
<h1 style ; Acolor+redV font7family+ arialVC> :.C 5F
<"h1>
<p style ; Acolor+blueV font7style+ italicV margin7left+
!#tVC> this is a para <"p>
<p style ; Afont7siDe+ 22ptVC> second para<"p>
<hr style ; Acolor+greenVC">
2. Inte!nal styles+ Ef the styles are speci$ed with in the html
document by using <style> then those styles are called as
internal styles. he internal styles will be applied to all the
tags a&ailable in that html document.
E$+
<html>
<head>
<title>C00<"title>
<style type ; Atext"cssC>
a+ho&er
^
color+redV
font7siDe+2LLMV
_
1
^
color+greenV
font7family+arialV
_
1age 3 !)
h1
^
color+brownV
font7siDe+22ptV
_
body
^
backgroung7color+cyanV
_
<"style>
<"head>
<body>
<"body>
<"html>
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$+
1
^
color+greenV
font7family+arialV
_
h1
^
color+brownV
font7siDe+22ptV
_
o use external style sheets within the html document we take help
of <link>. he <link> must be speci$ed in the need section of the
html document.
Syn+
1age 3 #L
0tyles.css
<link type ; Atext"cssC rel ; AstylesheetC href ;
Astyles.cssC">
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 styles
2. Enternal styles
3. *xternal styles
!. .rowser Fefault styles

1age 3 #1

1age 3 #2

Basics To Master HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Basics To Master HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML DOCUMENT:

Html document consists of html tags and some

Você também pode gostar