HTML Tutorial

HTMLTut
ori
al
HTMLs tandsfo
rHy perTextMar kupLanguage,whic
hi sthemo stwide
lyusedlanguageon
We btodevel
opwebp ag
es.HTMLwasc r
eatedb
yBe r
ners-
Leeinlate1991b
ut"HTML2 .0"was
thefi
r s
ts t
andar
dHTMLs pecif
icati
onwhi chwaspubli
shedin1995.HTML4. 01wasamaj o
r
versi
ono fHTMLandi twasp ubli
shedinlate1
999.ThoughHTML4. 01ve
rsi
oniswi delyuse
d
butcurrentl
ywear ehavingHTML- 5vers
ionwhichisane xt
ensiontoHTML4. 01,andt hi
s
versi
onwasp ubli
shedin2012.
Whyt
oLe
arnHTML?
Orig
inall
y,HTMLwasd eve
lop
edwiththei nt
entofdefi
ningthestr
uct
ureo fdoc
umentsli
ke
headi
ngs,paragr
aphs,li
sts
,andsofor
tht ofacil
itat
ethes har
ingofsci
entif
icinf
ormati
on
be
twe e
nr es
earchers
.Now,HTMLi sbeingwidelyusedtoformatwebpageswiththehel
pof
di
ffere
nttagsavail
ablei
nHTMLlanguag e
.
HTMLi saMUSTfo rst
ud e
nt sandwor
kingpr
ofes
sio
nalst
obe
comeagre
atSoft
war
eEng
inee
r
sp
e c
iallywhenthe
yar ewo rkinginWebDevel
opmentDomai
n.Iwil
llistd
ownsomeoft
he
keyadvantag
eso
flearningHTML:
 Cr
eat
eWe
bsi
te-Yo
ucanc
reat
eawe
bsi
teo
rcus
tomi
zeane
xis
tingwe
bte
mpl
atei
fyo
u
kno
wHTMLwe
ll.
 Be
comeawe
bde
sig
ner-I
fyo
uwantt
ost
artac
arr
erasap
rof
ess
ionalwe
bde
sig
ner
,
HTMLandCSSd
esi
gni
ngi
samus
tski
ll
.
 Unde
rst
andwe
b-I
fyo
uwa
ntt
oop
timi
zey
ourwe
bsi
te,t
obo
osti
tss
pee
dand
p
erf
ormanc
e,i
tisg
oodt
okno
wHTMLt
oyi
eldb
estr
esul
ts.
 Le
arno
the
rlang
uag
es-Onc
eyo
uund
ers
tand
stheb
asi
cofHTMLt
heno
the
rre
lat
ed
t
echno
log
iesl
ikej
avas
cri
pt,
php
,orang
ularar
ebe
comee
asi
ert
ound
ers
tand
.
He
lloWo
rldus
ingHTML.
J
usttog i
veyoualittl
eexci
tementabo
utHTML,I '
m goi
ngtogivey
ouas
mal
l
c
onve
nti
onalHTMLHe
lloWor
ldprog
ram,
Youcant
ryi
tus
ingDe
moli
nk.
<!DOCTYPEht ml>
<html >
<head >
<title
>Thisisdocumentt
itl
e</
ti
tle
>
</head>
<body>
<h1 >Thi
sisahead i
ng</
h1>
<p >Hell
oWo rl
d!</p>
</body>
</
ht ml>
Ap
pli
cat
ionso
fHTML
Asment
ionedbe
for
e,HTMLi
soneo
fthemo
stwi
del
yus
edl
ang
uag
eove
rthewe
b.I
'mg
oingt
o
l
istf
ewofthemhere
:
 We
bpag
esd
eve
lop
ment-HTMLi
sus
edt
ocr
eat
epag
eswhi
char
ere
nde
redo
vert
hewe
b.
Al
mos
teve
ryp
ageo
fwe
bishavi
nght
mlt
agsi
nitt
ore
nde
rit
sde
tai
lsi
nbr
ows
er.
 I
nte
rne
tNavi
gat
ion-HTMLp
rovi
dest
agswhi
char
eus
edt
onavi
gat
efr
omo
nep
aget
o
ano
the
randi
she
avi
lyus
edi
nint
erne
tnavi
gat
ion.
 Re
spo
nsi
veUI-HTMLp
age
sno
w-a-
day
swo
rkswe
llo
nal
lpl
atf
orm,mo
bil
e,t
abs
,
d
eskt
opo
rlap
top
sowi
ngt
ore
spo
nsi
ved
esi
gns
trat
egy
 Of
fli
nes
upp
ortHTMLp
age
sonc
elo
ade
dcanb
emad
eavai
lab
leo
ffl
ineo
nthemac
hine
wi
tho
utanyne
edo
fint
erne
t.
 Gamed
eve
lop
ment
-HTML5hasnat
ives
upp
ortf
orr
iche
xpe
rie
nceandi
sno
wus
eful
i
ngami
ngd
eve
lop
mentar
enaaswe
ll.
HTML-Ove
rvi
ew
HTMLstand
sforHy
per
textMar
kupLang
uag
e,andi
tist
hemo
stwi
del
yus
edl
ang
uag
eto
wri
teWe
bPages
.
 Hy
per
textr
efe
rst
othewayi
nwhi
chWe
bpag
es(
HTMLd
ocume
nts
)ar
eli
nke
dto
get
her
.
Thus
,thel
inkavai
lab
leo
nawe
bpag
eisc
all
edHy
per
text
.
 Asi
tsnames
ugg
est
s,HTMLi
saMar
kupLang
uag
ewhi
chme
ansy
ouus
eHTMLt
o
s
imply"
mark-
up"at
extd
ocume
ntwi
tht
agst
hatt
ellaWe
bbr
ows
erho
wtos
truc
tur
e
i
ttod
isp
lay
.
Orig
inall
y,HTMLwasd evel
ope
dwit
hthei
ntentofd
efi
ningt
hestr
uct
ureofdocument
slike
headi
ngs,parag
rap
hs,l
ists
,andsof
ort
htofaci
li
tat
etheshari
ngofs
cient
ifi
cinfo
rma t
ion
be
twe e
nr e
searc
hers
.
Now,HTMLisbe
ingwi
del
yus
edt
ofo
rmatwe
bpag
eswi
tht
hehe
lpo
fdi
ffe
rentt
agsava
ilab
le
inHTMLlang
uage
.
Bas
icHTMLDo
cume
nt
I
nit
ssi
mpl
estf
orm,
fol
lowi
ngi
sane
xamp
leo
fanHTMLd
ocume
nt−
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Thi
sisd
ocume
ntt
itl
e</
ti
tle
>
</
head>
<bod
y>
<h1>Thisi
sahead
ing</
h1>
<p>Documentc
onte
ntgoe
sher
e..
..
.</
p>
</
body>
</
html
>
HTMLTag
s
Astoldearli
er,HTMLi samar kuplanguageandmakesus eo
fvario
ustag
stoformatthe
co
nte
nt .Thesetagsaree
nclo
sedwithi
nang lebrac
es<TagName>.Excep
tfewtag
s,mostof
t
het agshavet hei
rc or
res
pondi
ngc losi
ngt ags
.Fo rexample
,<html>hasitsclo
sing
t
ag</html >and<b od
y>taghasit
sclos
ingtag</body
>taget
c.
Ab
ovee
xamp
leo
fHTMLd
ocume
ntus
est
hef
oll
owi
ngt
ags−
Sr
.No Tag&De
scr
ipt
ion
1 <!
DOCTYPE.
..
>
Thi
stagd
efi
nest
hed
ocume
ntt
ypeandHTMLve
rsi
on.
2 <ht
ml>
Thistagenc
los
esthecomp l
eteHTMLdocumentandmainl
yc o
mp r
ise
so fd
ocument
headerwhichisr e
prese
ntedby<head
>. .
.</
head
> anddocumentb o
dywhi c
hi s
repr
esent
edb
y<bod
y>...
</bod
y>tag
s.
3 <he
ad>
Thi
stagr
epr
ese
ntst
hed
ocume
nt'
she
ade
rwhi
chc
anke
epo
the
rHTMLt
agsl
ike<t
itl
e>,
<li
nk>et
c.
4 <t
itl
e>
The<t
itl
e>t
agi
sus
edi
nsi
det
he<he
ad>t
agt
ome
nti
ont
hed
ocume
ntt
itl
e.
5 <b
ody
>
Thi
stagre
pre
sent
sthed
ocume
nt'
sbo
dywhi
chke
epso
the
rHTMLt
agsl
ike<h1
>,<d
iv>,
<p>etc
.
6 <h1
>
Thi
stagr
epr
ese
ntst
hehe
adi
ng.
7 <p
>
Thi
stagr
epr
ese
ntsap
arag
rap
h.
HTML-Bas
icTag
s
He
adi
ngTag
s
Anyd o
c uments
tart
swi t
hahe ad
ing.Yo
uc anused
iffe
rentsize
sf o
ryourhead
ings
.HTML
alsohass ixleve
lso fheadi
ngs,which us
ethee le
me nt
s<h1 >,<h2>,<h3>,<h4>,
<h5>,and<h6>.Whi l
edisp
lay
inganyhe
ading
,br
owseraddsoneli
nebef
oreandonel
ineaf
ter
thatheadi
ng.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>He
adi
ngExamp
le</
ti
tle
>
</
head>
<bod
y>
<h1>Thi
sishe
ading1
</h1>
<h2>Thi
sishead
ing2</h2>
<h3>Thisi
sheadi
ng3</h3>
<h4>Thisi
sheadi
ng4</h4>
<h5>Thi
sishead
ing5</
h5 >
<h6>Thisi
sheadi
ng6</h6>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Par
agr
aphTag
The<p>t agof
fersawaytos
truct
ureyourt
exti
ntodi
ffer
entpar
agrap
hs.Eac
hparag
raphof
texts
ho uldg
oi nbet
weenano p
ening<p>andac l
osing</p
>t agasshownbel
owi nthe
example−
Examp l
e
<!DOCTYPEht
ml>
<ht
ml>
<he
ad>
<t
itl
e>Par
agr
aphExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Her
eisaf
irs
tparagraphoftext.</
p>
<p>Her
eisas
econdparagraphoftext.
</p>
<p>Her
eisat
hirdparagr
ap hofte
xt.</p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Li
neBr
eakTag
Whe nevery
ouus ethe<br/>el
ement,
anyt
hingf
oll
owingitstar
tsfro
mt henextl
ine.Thi
stag
isane xampleofanemp t
yele
me nt
,wher
eyoudonotnee
do p
eningandcl
osingtag
s,asthe
reis
nothingtog
oi nbet
we e
nthem.
The<br/>taghasas pacebet
weenthecharact
ersbrandt
hefo
rwar
ds l
ash.I
fy o
uo mitt
his
spac
e,o
lderbr
owserswi l
lhavetro
ubler
enderi
ngtheli
nebre
ak,
whil
eifyoumissthefo
rward
sl
ashcharact
erandjus
tus e<br>iti
snotvali
dinXHTML.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Li
neBr
eakExamp
le</
ti
tle
>
</
head>
<bod
y>
<p>Hell
o<br/>
Youdel
ive
redyouras
sig
nme
nto
nti
me.
<br/
>
Thanks
<br/>
Mahnaz</p
>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Ce
nte
ringCo
nte
nt
Yo
ucanus
e<c
ent
er>t
agt
oputanyc
ont
enti
nthec
ent
ero
fthep
ageo
ranyt
abl
ece
ll.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Ce
ntr
ingCo
nte
ntExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thi
ste
xti
sno
tint
hec
ent
er.
</p
>
<ce
nter>
<p>Thist
exti
sint
hec
ent
er.
</p
>
</
center
>
</
body>
</
html
>
Thi
swi
llp
rod
ucef
oll
owi
ngr
esul
t−
Ho
riz
ont
alLi
nes
Horizo
ntall
ine
sareuse
dtovisual
lybr
eak-
ups
ecti
onsofado
cument
.The<hr
>t agc
reat
esa
li
nef r
omt hecur
rentpos
iti
oni nthedoc
umenttotheri
ghtmargi
nandbreakstheli
ne
acco
rding
ly.
Forexamp
le,y
oumaywantt
ogi
veal
ineb
etwe
ent
wop
arag
rap
hsasi
ntheg
ive
nexamp
le
be
low−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Ho
riz
ont
alLi
neExamp
le</
ti
tle
>
</
head>
<bod
y>
<p>Thisi
spar
agr
apho
neands
houldb
eo nt
op</p
>
<hr/>
<p>Thisi
spar
agr
apht
woandsho
uldbeatb
otto
m</p
>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Agai
n<hr/>tagisanexampl
eoftheemp
tye
leme
nt,whe
rey
oud
ono
tne
edo
peni
ngand
cl
osi
ngt
ags
,asthe
reisno
thi
ngt
ogoi
nb e
twe
ent
hem.
The<hr/>el
eme nthasaspaceb
etwee
nt hechar
actershrandthef
orwardsl
ash.Ify
ouomit
thissp
ace
,ol
derb r
owser
swi l
lhavetr
o ubl
erend
eringthehori
zont
alli
ne,whilei
fyoumis
s
thefo
rwards
lashcharac
terandj
ustuse<hr>itisnotvali
dinXHTML
Pr
ese
rveFo
rmat
ting
Some
times
,yo
uwantyourte
xttofol
lowt
heexactf
ormatofhowiti
swr
itt
eni
ntheHTML
do
cument
.Int
hes
ecas
es,yo
uc anus
ethep
ref
ormatt
edtag<p
re>.
Anyte
xtb etwe
ent heopeni
ng<pre
>tagandt
hec
los
ing</
pre
>tagwi
llp
res
erv
ethe
fo
rmat
tingo
ftheso
urced
ocument.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Pr
ese
rveFo
rmat
tingExamp
le</
ti
tle
>
</
head>
<bo
dy>
<pre
>
f
unctio
ntest
Funct
ion(s
trTe
xt)
{
ale
rt(st
rTe
xt)
}
</
pre>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Tr
yus
ingt
hes
amec
odewi
tho
utke
epi
ngi
tins
ide<p
re>.
..
</p
re>t
ags
No
nbr
eaki
ngSp
ace
s
Suppo
sey
ouwanttousethephr
ase"1
2Angr
yMe n.
"He
re,y
ouwo
uldno
twantab
rows
ert
o
spl
itt
he"
12,
Angr
y"and"Men"ac
rosst
wol
ines−
Ane
xamp
leo
fthi
ste
chni
queap
pear
sint
hemo
vie"
12Ang
ryMe
n."
I
ncase
s ,
whe reyoudonotwantthecl
ientbr
ows ertobre
aktext
,youshoul
duseano
nbre
aki
ng
s
pac
eentity i
nste
adofano rmalspace.Forexamp l
e,whencodi
ngthe"1
2Angr
yMen"
i
naparagrap
h, y
oushoulduseso
me t
hingsimilartothefo
llo
wingcod
e−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>No
nbr
eaki
ngSp
ace
sExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Ane
xamp
leo
fthi
ste
chni
quea
ppe
arsi
nthemo
vie"
12&nb
sp;
Ang
ry&nb
sp;
Men.
"</
p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
HTML-El
eme
nts
AnHTMLe l
ementi
sdef
inedb
yas t
art
ingt
ag.I
ftheel
ementc
ontai
nso
therc
onte
nt,i
tends
wit
haclo
singt
ag,whe
retheele
mentnameispre
ced
edbyafor
wardsl
ashasshownbel
ow
wit
hfe
wtags−
St
artTag Co
nte
nt EndTag
<p
> Thi
sisp
arag
rap
hco
nte
nt. </
p>
<h1
> Thi
sishe
adi
ngc
ont
ent
. </
h1>
<d
iv> Thi
sisd
ivi
sio
nco
nte
nt. </
div>
<b
r/>
Sohere<p>..
..</
p >isanHTMLele
ment,<h1
>...
</h1
>isanot
herHTMLe l
ement
.Ther
ear
e
so
meHTMLe l
eme nt
swhi c
hdon'
tneedtob ecl
ose
d,suchas<img.
..
/>,<hr/>and<b
r
/
>e l
eme nt
s.Thesearekno
wnasvoi
del
eme nt
s.
HTMLdocumentscons
ist
so fatr
eeofthe
seel
ement
sandthe
yspe
cif
yhowHTMLdocume
nts
sho
uldb
ebuil
t,andwhatkindofcont
ents
houl
dbepl
ace
dinwhatpar
tofanHTMLd
ocument
.
HTMLTagvs
.El
eme
nt
AnHTMLelementisd
efi
ne yas
db tar
tingt
ag.I
fthee
leme
ntc
ont
ainso
the
rco
nte
nt,i
tend
s
wi
thacl
osi
ngtag.
Forexampl
e,<p
>isstar
tingt
agofaparagr
aphand</
p>i
scl
osi
ngt
ago
fthes
amep
ara
grap
h
but<p>Thi
sispar
agr
aph</p>isaparag
raphel
ement
.
Ne
ste
dHTMLEl
eme
nts
I
tisve
rymuc
hal
lowe
dtoke
epo
neHTMLe
leme
nti
nsi
deano
the
rHTMLe
leme
nt−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Ne
ste
dEl
eme
ntsExamp
le</
ti
tle
>
</
head>
<bod
y>
<h1>Thisis<i
>ital
ic</i
>he ad
ing</
h1>
<p>Thisis<u>under
lined</
u>p a
ragr
aph</
p>
</
body>
</
html
>
Thi
swi
lld
isp
layt
hef
oll
owi
ngr
esul
t–
HTML-At
tri
but
es
Wehavesee
nf ew HTMLt ag
sandthe
irusagel
ikehead
ingtag
s<h1>,<h2>,
parag
rap
h
t
ag<p>andothe
rtags.Weusedt
hemsofari
nthei
rsi
mp l
estf
orm,butmos
toftheHTML
t
agsc
anal
sohaveat
tri
but
es,
whi
char
eext
rab
itso
finf
ormat
ion.
Anat
tri
but
eisuse
dtode
finethec
haract
eri
sti
cso
fanHTMLel
ementandi
spl
acedi
nsi
det
he
el
eme
nt'
sopeni
ngt
ag.Al
lattr
ibut
esaremadeupo
ftwop
art
s−anameandaval
ue
 Thenamei
sthep
rop
ert
yyo
uwantt
ose
t.Fo
rexamp
le,t
hep
arag
rap
h<p
>el
eme
nti
n
t
heexampl
ec arr
iesanatt
ributewhosenamei
sal
ign,whi
chy
ouc
anus
etoi
ndi
cat
e
t
heali
gnmentofparag
rap
ho nthepag
e.
 Theval
uei
swhaty
ouwantt
heval
ueo
fthep
rop
ert
ytob
ese
tandal
way
sputwi
thi
n
q
uot
ati
ons.Thebel
owe
xamp
les
howst
hre
epo
ssi
bleval
ueso
fal
ignat
tri
but
e:l
eft
,
c
ent
erandri
ght.
Attr
ibutenamesandatt
rib
uteval
uesarecas
e-i
nsensi
tive
.Howeve
r,t
heWorl
dWideWeb
Consor
tium (W3C)re
comme nd
slowerc
aseattr
ibut
es/
attr
ibut
eval
uesint
heirHTML 4
re
comme nd
ati
on.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Al
ignAt
tri
but
eExamp
le</
ti
tle
>
</
head>
<bo
dy>
<pal
ign="
lef
t "
>Thisisle
ftali
gned
</p>
<pal
ign="
center"
>Thisiscent
erali
gned
</p>
<pal
ign="
right"
>Thisisrig
htali
gned</
p>
</
body
>
</
html
>
Thi
swi
lld
isp
layt
hef
oll
owi
ngr
esul
t−
Co
reAt
tri
but
es
Thefourc
oreat
tri
but
est
hatc
anb
eus
edo
nthemaj
ori
tyo
fHTMLe
leme
nts(
alt
houg
hno
tal
l)
are−
 I
d
 Ti
tle
 Cl
ass
 St
yle
TheI
dAt
tri
but
e
Theidat
trib
uteofanHTMLtagcanb
eus e
dtounique
lyi
dent
ifyanye
lementwithinanHTML
pag
e.Therearet
wop r
imar
yreas
onsthatyo
umi g
htwanttouseanidatt
ribut
eo nanel
ement
−
 I
fane
leme
ntc
arr
iesani
dat
tri
but
easauni
quei
dent
ifi
er,
iti
spo
ssi
blet
oid
ent
ifyj
ust
t
hate
leme
ntandi
tsc
ont
ent
.
 I
fyo
uhavet
woe
leme
ntso
fthes
amenamewi
thi
naWe
bpag
e(o
rst
yles
hee
t),
youc
an
us
ethei
dat
tri
but
etod
ist
ing
uis
hbe
twe
ene
leme
ntst
hathavet
hes
amename
.
Wewi lldis
cusssty
les
heeti
ns e
parat
et ut
ori
al.Fo
rno w,l
et'
sus
ethei
dat
tri
but
eto
di
sti
nguis
hb et
wee
ntwopar
agr
aphel
ementsasshownb
elo
w.
Examp
le
<pid="html"
>Thisparae
xplai
nswhatisHTML</p>
<pid="css
">Thispar
aexpl
ainswhati
sCascad
ingSt
yleShe
et</
p>
Theti
tleAttr
ibute
Thet
itleat
tri
buteg
ive
sas ug
gest
edtit
lef
ort
hee
leme
nt.The
ysy
ntaxf
ort
het
itl
eat
tri
but
eis
si
milarasexpl
aine
dfori
dattr
ibute−
Thebe
havioro
fthisat
tri
but
ewilld
epe
ndupontheel
ementthatc
arri
esi
t,al
tho
ughitiso
fte
n
di
spl
ayedasatoo
lti
pwhencurs
orcomeso
vertheel
ementorwhil
etheel
ementi
sloadi
ng.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Thet
itl
eAt
tri
but
eExamp
le</
ti
tle
>
</
head>
<bod
y>
<h3tit
le="
Hel
loHTML!
">Ti
tle
dHe
adi
ngTagExamp
le</
h3>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Nowtryt
obringy
ourcurso
rover"Ti
tle
dHeadi
ngTagExampl
e"andy
ouwi
lls
eet
hatwhat
eve
r
ti
tley
ouuse
di ny
ourc
o d
eiscomingoutasat
oolt
ipo
fthecur
sor.
Thec
las
sAt
tri
but
e
Thec
las
sat
tri
but
eisus
edt
oas
soc
iat
eane
leme
ntwi
thas
tyl
eshe
et,
ands
pec
ifi
est
hec
las
s
ofe
lement
.Youwilll
ear
nmo r
ea bo
utt
heuseoftheclas
sat
tri
but
ewhe
nyo
uwi
lll
ear
n
Cas
cadi
ngSty
leShe
et(
CSS).Soforno
wyouc
anavoi
dit.
Theval
ueo
ftheat
tri
but
emayal
sob
eas
pac
e-s
epar
ate
dli
sto
fcl
assname
s.Fo
rexamp
le−
cl
ass="cl
ass
Name1cl
ass
Name
2cl
ass
Name
3"
Thest
yleAtt
rib
ute
Thes
tyl
eat
tri
but
eal
lowsy
out
osp
eci
fyCas
cad
ingSt
yleShe
et(
CSS)r
ule
swi
thi
nthee
leme
nt.
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Thes
tyl
eAt
tri
but
e</
ti
tle
>
</
head>
<bo
dy>
<pst
yle="
font
-fami
ly:
ari
al;
col
or:
#FF0000;
">So
met
ext
..
.</
p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Atthispo
intofti
me ,weareno
tlearningCSS,s
ojus
tle
t'
sproce
edwitho
utb
othe
r i
ngmuch
ab
outCSS.Here,y
oune edt
ounde
rstandwhatareHTMLatt
rib
utesandhowt
heycanbeus
ed
whilef
ormatt
ingconte
nt.
I
nte
rnat
ional
izat
ionAt
tri
but
es
Therear
ethr
eeint
ernati
onal
izat
ionat
tri
but
es,whi
char
eavai
lab
lef
ormo
st(
alt
houg
hno
t
all
)XHTMLe l
ements.
 d
ir
 l
ang
 xml
:l
ang
Thed
irAt
tri
but
e
Thediratt
rib
uteal
lowsyoutoi
ndic
atetothebr
ows
erabo
utthedi
rec
tio
ninwhi
chthete
xt
shouldfl
ow.Thediratt
rib
utecantakeoneoft
woval
ues,asy
oucanseei
nthetab
let
hat
fol
lows−
Val
ue Me
ani
ng
l
tr Le
ftt
ori
ght(
thed
efaul
tval
ue)
r
tl Ri
ghtt
ole
ft(
forl
ang
uag
ess
uchasHe
bre
worAr
abi
cthatar
ere
adr
ightt
ole
ft)
Examp
le
<!DOCTYPEhtml>
<htmldir="
rtl
">
<he
ad>
<t
itl
e>Di
spl
ayDi
rec
tio
ns</
ti
tle
>
</
head>
<body>
Thisisho
wIE5r
end
ersr
ight
-to
-le
ftd
ire
cte
dte
xt.
</b
ody>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Whend i
ratt
ributeisusedwithi
nthe<ht
ml>tag
,itde
t e
rmine
showtextwil
lbepre
sent
ed
wit
hintheentiredocument.Whenus
edwi
thi
nanot
hertag,i
tco
ntr
olst
hete
xt'
sdi
rec
tionf
or
j
ustthecont
entofthattag.
Thel
angAt
tri
but
e
Thelangatt
rib
uteall
owsyoutoindic
atethemainl anguageuse
di nad ocume nt
,butt
his
att
ribut
ewaske p
tinHTMLonlyf
orbackwardsco
mp atib
ilit
ywit
he ar
lie
rver s
ionsofHTML.
Thisatt
rib
utehasbee
nre
plac
edbythexml:
langat
tri
b ut
einne wXHTMLd o
cume nts.
Theval
ueso
ft helangat
tri
butea r
eI SO-
639 s
tandar
dt wo
-char
acte
rl ang
uag
eco
des
.
Che
ckHTMLLanguageCod
es:ISO639fo
racomple
teli
stofl
ang
uageco
des.
Examp
le
<!DOCTYPEht
ml>
<htmllang="
en"
>
<he
ad>
<t
itl
e>Eng
lis
hLang
uag
ePag
e</
ti
tle
>
</
head>
<body>
Thispag
eisus
ingEng
lis
hLang
uag
e
</b
ody>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Thexml
:l
angAt
tri
but
e
Thexml:
langat
tri
buteistheXHTML rep
lacementfo hel
rt angatt
rib
ute.Thevalueof
thexml
:l
angattr
ibut
eshoul
dbeanI
SO-
639countr
ycod
easmenti
onedinpre
vio
usse
cti
on.
Ge
ner
icAt
tri
but
es
He
re'
sat
abl
eofs
omeo
the
rat
tri
but
est
hatar
ere
adi
lyus
abl
ewi
thmanyo
ftheHTMLt
ags
.
At
tri
but
e Op
tio
ns Func
tio
n
al
ign r
ight
,le
ft,
cent
er Ho
riz
ont
all
yal
ignst
ags
val
ign t
op,
mid
dle
,bo
tto
m Ve
rti
cal
lyal
ignst
agswi
thi
nanHTMLe
leme
nt.
b
gco
lor numer
ic,
hexi
dec
imal
,RGB Pl
ace
sab
ackg
roundc
olo
rbe
hindane
leme
nt
val
ues
b
ackg
round URL Pl
ace
sab
ackg
roundi
mag
ebe
hindane
leme
nt
i
d Us
erDe
fine
d Namesane
leme
ntf
orus
ewi
thCas
cad
ingSt
yle
Shee
ts.
c
las
s Us
erDe
fine
d Clas
sifi
esane
leme
ntf
orus
ewi
thCas
cad
ingSt
yle
Sheet
s.
wi
dth Nume
ricVal
ue Spec
ifi
est
hewi
dtho
ftab
les
,imag
es,
ort
abl
e
ce
lls.
he
ight Nume
ricVal
ue Spec
ifi
est
hehe
ighto
ftab
les
,imag
es,
ort
abl
e
ce
lls.
t
itl
e Us
erDe
fine
d "
Pop
-up
"ti
tleo
fthee
leme
nts
.
Wewills
eer
elat
ede
xamp l
esaswewil
lproc
eedtos
tudyo
therHTMLt
ags.Forac
omp
let
eli
st
ofHTMLTag
sandrel
ate
dattri
but
esp
leas
echeckre
fer
encet
oHTMLTagsLis
t
HTML-Fo
rmat
ting
I
fyo
uuseawo r
dproc
ess
or,
youmustbef
amili
arwit
ht heab
ili
tytomakete
xtb
old,
ital
ici
zed,
o
runde
rli
ned
;thes
earej
ustthr
eeo
ftheteno
pti
onsavail
abl
etoindi
cateho
wtextcanappe
ar
i
nHTMLandXHTML.
Bo
ldTe
xt
Any
thi
ngt
hatap
pear
swi
thi
n<b
>..
.</
b>e
leme
nt,
isd
isp
lay
edi
nbo
ldass
hownb
elo
w−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Bo
ldTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<b
>bo
ld</
b>t
ype
fac
e.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
I
tal
icTe
xt
Any
thi
ngt
hatap
pear
swi
thi
n<i
>..
.</
i>e
leme
nti
sdi
spl
aye
dini
tal
ici
zedass
hownb
elo
w−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>It
ali
cTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esan<i
>it
ali
ciz
ed</
i>t
ype
fac
e.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Und
erl
ine
dTe
xt
Anyt
hingt
hatap
pear
swi
thi
n<u>.
..
</u>e
leme
nt,i
sdi
spl
aye
dwi
thund
erl
ineass
hown
be
low−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Und
erl
ine
dTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esan<u>und
erl
ine
d</
u>t
ype
fac
e.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t–
St
rikeTe
xt
Any
thi
ngthatap
p e
arswit
hin<s
tri
ke>.
..</s
tri
ke>e
leme
nti
sdi
spl
aye
dwi
ths
tri
ket
hro
ugh,
whi
chisathi
nlinethr
oug
hthet
extass
ho wnbel
ow−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>St
rikeTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<s
tri
ke>s
tri
ket
hro
ugh</
str
ike
>ty
pef
ace
.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Mo
nos
pac
edFo
nt
Thec
ont
ento
fa<t
t>.
..
</t
t>e
leme
nti
swr
itt
eni
nmo
nos
pac
edf
ont
.Mo
sto
fthef
ont
sar
e
knownasvariab
le-
widthf
ontsb
ecaus
ed i
ffe
rentl
ett
ersareofd
iff
ere
ntwidths(
forexamp
le,
thele
tte
r'm'iswide
rthanthel
ett
er'
i'
).Inamo nos
pacedfo
nt,howeve
r,e
ac hl
ett
erhast
he
samewidth.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Mo
nos
pac
edFo
ntExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<t
t>mo
nos
pac
ed</
tt
>ty
pef
ace
.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Sup
ers
cri
ptTe
xt
Thecont
e ntofa<sup>.
..
</s
up>ele
me ntiswr
itt
eninsupe
rscri
pt;t
hefontsi
zeus e
di st
he
samesizeasthechar
act
erss
urr
oundingi
tbuti
sdisp
lay
edhalfachar
act
er'she
ightabovet
he
othe
rchar ac
ter
s.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Sup
ers
cri
ptTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<s
up>s
upe
rsc
rip
t</
sup
>ty
pef
ace
.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Sub
scr
iptTe
xt
Thec
ont
ento
fa<s
ub>.
..
</s
ub>e
leme
nti
swr
itt
eni
nsub
scr
ipt
;thef
onts
izeus
edi
sthe
s
ameasthec
harac
ter
ssur
round
ingi
t,b
uti
sdi
spl
aye
dhal
fac
har
act
er'
she
ightb
ene
atht
he
o
the
rchar
act
ers
.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Sub
scr
iptTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<s
ub>s
ubs
cri
pt</
sub
>ty
pef
ace
.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
I
nse
rte
dTe
xt
Any
thi
ngt
hatap
pear
swi
thi
n<i
ns>.
..
</i
ns>e
leme
nti
sdi
spl
aye
dasi
nse
rte
dte
xt.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Ins
ert
edTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Iwantt
odr
ink<d
el>c
ola</
del
><i
ns>wi
ne</
ins
></
p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
De
let
edTe
xt
Any
thi
ngt
hatap
pear
swi
thi
n<d
el>.
..
</d
el>e
leme
nt,
isd
isp
lay
edasd
ele
tedt
ext
.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>De
let
edTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Iwantt
odr
ink<d
el>c
ola</
del
><i
ns>wi
ne</
ins
></
p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Lar
gerTe
xt
Thec
o nt
ento
fthe<big
>..
.</
big
>el
eme
nti
sdi
spl
aye
donef
onts
izel
arg
ert
hant
her
esto
fthe
te
xtsurr
oundi
ngitass
hownbel
ow–
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Lar
gerTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<b
ig>b
ig</
big
>ty
pef
ace
.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Smal
lerTe
xt
Theconte
ntofthe<small
>. .
.</
small
>e l
eme
nti
sdi
spl
aye
donef
onts
izes
mal
lert
hant
he
res
tofthete
xts
ur r
ound
ingitassho
wnb e
low−
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Smal
lerTe
xtExamp
le</
ti
tle
>
</
head>
<bo
dy>
<p>Thef
oll
owi
ngwo
rdus
esa<s
mal
l>s
mal
l</
smal
l>t
ype
fac
e.</
p>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Gr
oup
ingCo
nte
nt
The<div>and<sp
an>e l
ement
sal
lowy
out
ogr
oupt
oge
the
rse
ver
ale
leme
ntst
ocr
eat
e
sec
tio
nsorsubs
ect
ionso
fapage
.
Forexamp le
,youmightwanttop
utallo
fthefootnote
sonap agewit
hina<d i
v>e lementto
ind
icatethatal
loft
hee l
ement
swithi
nthat<div>e l
ementre
latetot
hefoot
not
e s
.Youmi ght
the
nat tachast
ylet
othis<di
v>eleme
ntsothattheyappe
arusingaspe
cials
etofsty
lerule
s.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Di
vTagExamp
le</
ti
tle
>
</
head>
<bod
y>
<di
vid="menu"align="mi d
dle">
<ahref="
/ind
e x.
htm">HOME</ a>|
<ahref="
/about/
cont
act_us.htm">CONTACT</
a>|
<ahref="
/about/
inde
x.htm">ABOUT</ a>
</
div>
<di
vid="co
ntent
"ali
gn="le
ft">
<h5>Co
ntentArt
icl
es</
h5>
<p>Act
ualcont
entgo
esher
e..
..
.</
p>
</
div>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
The<span>ele
ment,ontheot
he rhand,c
anbeuse
dtogr
oupinl
ineel
ement
sonl
y.So,i
fyou
haveapartofasent
enceorparagrap
hwhi c
hyouwanttogr
ouptog
ethe
r,y
oucoul
dusethe
<span>ele
mentasfol
lows.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Sp
anTagExamp
le</
ti
tle
>
</
head>
<body
>
<p>Thisist
heexampleof<spansty
le="c
olor:
gre
en"
>spantag
</s
pan>
andthe<spanst
yle="c
o l
or:
red"
>divt
ag</s
pan>along
withCSS</p
>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
The
set
agsar
eco
mmo
nlyus
edwi
thCSSt
oal
lowy
out
oat
tac
has
tyl
etoas
ect
iono
fap
age
.
HTML-I
mag
es
Imag
e sareve
ryi
mportantt
obeauti
fyaswellast
odep
ictmanycompl
exco
ncept
sinsimpl
e
wayony o
urwebpag
e.Thist
uto
r i
alwillt
akeyout
hro
ughsimples
tep
stousei
mag e
sinyo
ur
webpages
.
I
nse
rtI
mag
e
Youcani
nser
tanyi
mag
einy
ourwe
bpag
ebyus
ing<i
mg>t
ag.Fo
llo
wingi
sthes
imp
les
ynt
ax
tous
ethi
stag.
<i
mgs
rc="
Imag
eURL".
..at
tri
but
es-
lis
t/>
The<img>tagisane
mpt
ytag
,whi
chme
anst
hat
,itc
anc
ont
aino
nlyl
isto
fat
tri
but
esandi
t
hasnocl
osi
ngtag.
Examp
le
Totr
yfoll
owingexamp
le,l
et'
ske
epo
urHTMLf
ilet
est
.ht
m andi
mag
efi
let
est
.pngi
nthe
samedi
rect
ory−
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<t
itl
e>Us
ingI
mag
einWe
bpag
e</
ti
tle
>
</
head>
<bo
dy>
<p>SimpleI
mageIns
ert
</p>
<i
mgs rc="/
html/
image
s/t
est
.png
"al
t="
Tes
tImag
e"/
>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
YoucanusePNG,JPEGorGIFimagefi
lebasedony
ourcomfo
rtbutmakesur
eyo
usp
eci
fy
co
rre
ctimagef
ilenamei
nsrcat
tri
but
e.Imagenamei
salwaysc
asese
nsi
tive
.
Thealtatt
ribut
eisamandator
yat
tri
but
ewhi
chs
pec
ifi
esanal
ter
nat
ete
xtf
orani
mag
e,i
f
thei
mag ecannotb
edi
spl
ayed
.
Se
tImag
eLo
cat
ion
Usual
lywekeepallt
heimag
e si
nas e
parat
edi
rec
tor
y.Sole
t'
skee
pHTMLf i
let
est.
htmino
ur
homedir
ect
oryandcreat
easubdi
rec
toryi
magesi
nsi
dethehomedi
rec
tor
ywherewewil
lkee
p
ouri
magetes
t.png
.
Examp
le
As
sumi
ngo
uri
mag
elo
cat
ioni
s"i
mag
e/t
est
.png
",t
ryt
hef
oll
owi
nge
xamp
le−
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Us
ingI
mag
einWe
bpag
e</
ti
tle
>
</
head>
<bo
dy>
<p>SimpleI
mageIns
ert
</p>
<i
mgs rc="/
html/
image
s/t
est
.png
"al
t="
Tes
tImag
e"/
>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Se
tImag
eWi
dth/
Hei
ght
You c an s e
t i mage wi dth and he i
ght base
d o n y our r e
qui
reme
nt
usi
ngwidt
handheig
htattr
ibute
s.Youcanspe
cif
ywidt
handhei
ghto
ftheimag
einter
msof
ei
therp
ixe
lso
rperc
entag
eofitsact
uals
ize.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tImag
eWi
dthandHe
ight
</t
itl
e>
</
head>
<bo
dy>
<p>Set
tingi
magewidt
handhe i
ght</
p>
<i
mgs rc="/
html/
images
/te
st.
png"al
t="Te
stI
mag
e"wi
dth="
150"he
ight="
100"
/>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Se
tImag
eBo
rde
r
Byde
faul
t,i
magewillhaveabord
eraroundi
t,y
oucanspe
cifyb
orde
rt hi
cknes
si nt
ermso
f
pi
xel
susi
ngbor
derat
tri
bute.At
hickne
ssof0means
,nob
orderar
oundthepic
ture.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tImag
eBo
rde
r</
ti
tle
>
</
head>
<bo
dy>
<p>Set
tingi
mageBor
der</
p>
<i
mgs rc="/
html/
image
s/t
est
.png
"al
t="
Tes
tImag
e"b
ord
er="
3"/
>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Se
tImag
eAl
ignme
nt
Bydef
ault
,imag
ewillal
ignatt
hel
efts
ideo
fthep
age
,buty
ouc
anus
eal
ignat
tri
but
etos
eti
t
int
hecent
erorr
ight
.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tImag
eAl
ignme
nt</
ti
tle
>
</
head>
<bo
dy>
<p>Set
tingi
mageAli
gnment</p>
<i
mgs rc="/
html/
image
s/t
est.
png"al
t="
Tes
tImag
e"b
ord
er="
3"al
ign="
rig
ht"
/>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t–
HTML-Tab
les
TheHTMLtab
lesal
lowwebaut
hor
stoar
rang
edat
ali
ket
ext
,imag
es,
links
,ot
hert
abl
es,
etc
.
int
oro
wsandcol
umnsofc
ell
s.
TheHTMLt abl
esarec r
eate
dusingthe<tabl
e>taginwhichthe<t
r>tagisuse
dt ocr
eat
e
tabl
erowsand<td>tagisusedt
ocre
atedatacel
ls.Thee
leme
ntsund
er<td>arere
gula
rand
lef
tali
gne
dbydef
ault
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
les
</t
itl
e>
</
head>
<body
>
<tabl
ebor
der="1
">
<tr>
<td>Row1,Co
lumn1
</t
d>
<td>Row1,Co
lumn2
</td
>
</t
r>
<tr
>
<td>Ro
w2,
Col
umn1
</t
d>
<td>Ro
w2,
Col
umn2
</td
>
</
tr>
</
tabl
e>
</
bod
y>
</
html>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Here,
theb
o r
derisanatt
ribut
eof<t
abl
e>taganditi
susedt
oputab
ord
erac
ros
sal
lthec
ell
s.
Ify
oudonotneedabor
der,t
henyouc
anusebor
der="0".
Tab
leHe
adi
ng
Tableheadingcanbed e
finedusing<th>tag
.Thi
stagwillb
ep utt
orepl
ace<t
d >tag,
whi chi
s
usedtor ep
r e
sentactualdatac el
l.Normal
lyyo
uwi l
lputy o
urtoprow astabl
ehe adi
ngas
shownb elo
w, othe
rwisey o
uc anuse<th>eleme
ntinanyrow.Headi
ngs,whi
char edef
inedi
n
<th>t agarecente
redandb ol
db yde
faul
t.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leHe
ade
r</
ti
tle
>
</
head>
<body
>
<tabl
eborder="1">
<tr>
<th>Name </th>
<th>Salary</th>
</t
r>
<tr>
<td>Rame shRaman</
td>
<td>5000</td
>
</t
r>
<tr
>
<td>Shab
birHus
sei
n</
td>
<td
>7000</
td>
</
tr>
</
tabl
e>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Ce
llp
add
ingandCe
lls
pac
ingAt
tri
but
es
The
rearetwoatt
rib
utescall
edcell
pad
dingandcel
lspaci
ngwhichyouwillusetoad
jus
tthe
whit
espac
einyourtabl
ec e
lls.Thecel
lsp
acingatt
ribut
edefi
nesspac
eb et
weentab
lecel
ls,
whil
ece
llp
addi
ngrepr
esent
sthedist
ancebet
we e
ncellbor
der
sandthecont
entwit
hinacel
l.
Examp
le
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leCe
llp
add
ing
</t
itl
e>
</
head>
<body>
<tableborder="1"cel
lpadd
ing="
5"c
ell
spac
ing="
5">
<t r
>
<t h>Name </th>
<t h>Salary</th>
</tr>
<t r
>
<t d>Rame shRaman</ td>
<t d>5000</td
>
</tr>
<t r
>
<t d>Shab b
irHus se
in</t
d>
<t d>7000</td
>
</tr>
</
t able
>
</
bod y
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Co
lsp
anandRo
wsp
anAt
tri
but
es
Yo
uwi
llus
eco
lsp
anat
tri
but
eify
ouwantt
ome
rget
woo
rmo
rec
olumnsi
ntoas
ing
lec
olumn.
Si
mil
arwayy
ouwi
llus
ero
wsp
ani
fyo
uwantt
ome
rget
woo
rmo
rer
ows
.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leCo
lsp
an/
Rows
pan</
ti
tle
>
</
head>
<body>
<tablebord
er="1"
>
<t r
>
<t h>Column1</t
h>
<t h>Column2</th>
<t h>Column3</th>
</tr>
<t r
>
<t drowspan="2">Row1Ce
ll1</
td>
<t d>Row1Cell2</t
d>
<t d>Row1Cell3</t
d>
</tr>
<t r
>
<t d>Row2Ce l
l2</td
>
<t d>Row2Ce l
l3</td
>
</tr>
<t r
>
<t dcol
span="3">Row3Cell1
</t
d>
</tr>
</
t able
>
</
bod y
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t–
Tab
lesBac
kgr
ound
s
Yo
ucans
ett
abl
ebac
kgr
oundus
ingo
neo
fthef
oll
owi
ngt
woway
s−
 b
gco
lorat
tri
but
e−Yo
ucans
etb
ackg
roundc
olo
rfo
rwho
let
abl
eorj
ustf
oro
nec
ell
.
 b
ackg
roundat
tri
but
e−Yo
ucans
etb
ackg
roundi
mag
efo
rwho
let
abl
eorj
ustf
oro
ne
c
ell
.
Yo
ucanal
sos
etb
ord
erc
olo
ral
sous
ingb
ord
erc
olo
rat
tri
but
e.
No
te−Theb
gco
lor
,bac
kgr
ound
,andb
ord
erc
olo
rat
tri
but
esd
epr
ecat
edi
nHTML5
.Dono
tus
e
t
hes
eat
tri
but
es.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leBac
kgr
ound
</t
itl
e>
</
head>
<body>
<tablebord
er="1"bord
ercol
or="gre
en"bg
col
or="
yel
low"
>
<t r
>
<t h>Column1</t
h>
<t h>Column2</th>
<t h>Column3</th>
</tr>
<t r
>
<t drowspan="2">Row1Cell1</
td>
<t d>Row1Cell2</td
>
<t d>Row1Cell3</td
>
</tr>
<t r
>
<t d>Row2Ce l
l2</td>
<t d>Row2Ce l
l3</td>
</tr>
<t r
>
<t dcol
span="3">Ro w3Cell1
</td>
</tr>
</
t able
>
</
bod y
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Her
eisanexampl
eofus
ingb
ackg
roundat
tri
but
e.He
rewewi
llus
eani
mag
eavai
lab
lei
n
/
image
sdi
rec
tor
y.
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leBac
kgr
ound
</t
itl
e>
</
head>
<body
>
<tabl
ebo
rde
r="
1"b
ord
erc
olo
r="
gre
en"b
ackg
round="
/i
mag
es/
tes
t.p
ng"
>
<tr>
<th>Column1</t
h>
<th>Column2</th>
<th>Column3</th>
</
tr>
<tr
>
<tdrowspan="2">Row1Cell1
</td
>
<td>Row1Cell2</t
d><td
>Ro w1Ce l
l3</
td>
</
tr>
<tr
>
<td>Row2Ce l
l2</td
>
<td>Row2Ce l
l3</td
>
</
tr>
<tr
>
<tdcol
span="3">Row3Ce l
l1</t
d>
</
tr>
</
table
>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t.He
reb
ackg
roundi
mag
edi
dno
tap
plyt
otab
le'
she
ade
r.
Tab
leHe
ightandWi
dth
Yo
uc anse
tat ab
lewid
thandhei
ghtus
ingwi
dthandhei
ghtat
tri
bute
s.Youcanspe
cif
ytab
le
wi
dthorheig
htinte
rmsofpi
xel
sorint
ermsofpe
rce
ntag
eofavai
lab
lescr
eenare
a.
Examp
le
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leWi
dth/
Hei
ght
</t
itl
e>
</
head>
<body
>
<tabl
ebor
der="1
"wid
th="400"he
ight="
150"
>
<tr>
<td>Row1,Co
lumn1</
td>
<td>Row1,Co
lumn2</
td>
</t
r>
<tr
>
<td>Ro
w2,
Col
umn1
</t
d>
<td>Ro
w2,
Col
umn2
</td
>
</
tr>
</
tabl
e>
</
bod
y>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Tab
leCap
tio
n
Thecap
tiont
agwil
lse
rveasati
tleo
rexpl
anati
onfo
rthetab
leandi
tsho
wsupatt
het
opo
f
thet
able
.Thi
stagi
sde
prec
ate
dinnewerve
rsi
onofHTML/XHTML.
Examp
le
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
leCap
tio
n</
ti
tle
>
</
head>
<body
>
<tabl
eborde
r="1"widt
h=" 1
00%">
<capti
on>Thi
sisthecap
tion</
cap
tio
n>
<tr
>
<td>r
ow1
,co
lumn1
</t
d><t
d>r
ow1
,co
lumnn2
</t
d>
</
tr>
<tr
>
<td>r
ow2
,co
lumn1
</t
d><t
d>r
ow2
,co
lumnn2
</t
d>
</
tr>
</
tabl
e>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Tab
leHe
ade
r,Bo
dy,
andFo
ote
r
Tabl
escanb edi
vide
dintothre
eport
ions−aheade
r,abody
,andafoot
.Thehe
adandfo
otar
e
rat
hersimilart
oheader
sandfoot
ersinaword-
pro
cess
eddocumentt
hatre
maint
hesamefo
r
eve
rypage,
whi l
ethebo
dyisthemaincont
entho
lde
rofthet
able.
Thet
hre
eel
eme
ntsf
ors
epar
ati
ngt
hehe
ad,
bod
y,andf
ooto
fat
abl
ear
e−
 <t
head
>−t
ocr
eat
eas
epar
atet
abl
ehe
ade
r.
 <t
bod
y>−t
oind
icat
ethemai
nbo
dyo
fthet
abl
e.
 <t
foo
t>−t
ocr
eat
eas
epar
atet
abl
efo
ote
r.
Atabl
emayc o
ntainse
veral<t
body
>e l
ementstoindic
atedi
ffe
rentp
age
sorg
roup
sofd
ata.
Buti
tisno
tab
lethat<t
head>and<tf
oot
>tagsshouldappe
arbef
ore<t
bod
y>
Examp
le
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
le</
ti
tle
>
</
head>
<body
>
<tabl
eb o
rder="1
"width="1
00%">
<thead>
<tr>
<tdc o
lspan="4"
>Thisi
stheheado
fthet
abl
e</
td>
</tr>
</t
he a
d>
<tf
oot>
<tr>
<tdcol
span="
4">Thi
sist
hef
ooto
fthet
abl
e</
td>
</t
r>
</
tfoo
t>
<tb
ody>
<tr>
<td>Cel
l1</
td>
<td>Cel
l2</
td>
<td>Cel
l3</
td>
<td>Cel
l4</
td>
</t
r>
</
tbody>
</
tabl
e>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Ne
ste
dTab
les
Youcanuseonetab
leins
ideano
the
rtab
le.No
tonl
ytab
lesy
ouc
anus
eal
mos
tal
lthet
ags
ins
idet
abl
edatat
ag<td
>.
Examp
le
Fo
llo
wingi
sthee
xamp
leo
fus
ingano
the
rtab
leando
the
rtag
sins
ideat
abl
ece
ll.
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLTab
le</
ti
tle
>
</
head>
<bo
dy>
<t
abl
ebo
rde
r="
1"wi
dth="
100%"
>
<tr
>
<td>
<tableborder="1"width="1
00%"
>
<t r
>
<t h>Name </th>
<t h>Salary</th>
</tr>
<t r
>
<t d>Rame shRaman</ t
d>
<t d>5000</td
>
</tr>
<t r
>
<t d>Shab b
irHus se
in</
td>
<t d>7000</td
>
</tr>
</table
>
</t
d>
</
tr>
</
tabl
e>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t–
HTML-Li
sts
HTMLo f
fer
swebauthor
sthreewaysfo
rspec
ify
ingl
ist
sofi
nfo
rmat
ion.Al
lli
stsmus
t
co
ntai
noneormo
rel
iste
lement
s.Li
stsmayc
ontai
n−
 <ul
>−Anuno
rde
redl
ist
.Thi
swi
lll
isti
temsus
ingp
lai
nbul
let
s.
 <o
l>−Ano
rde
redl
ist
.Thi
swi
llus
edi
ffe
rents
che
meso
fnumb
erst
oli
sty
ouri
tems
.
 <d
l>−Ad
efi
nit
ionl
ist
.Thi
sar
rang
esy
ouri
temsi
nthes
amewayast
heyar
ear
rang
ed
i
nad
ict
ionar
y.
HTMLUno
rde
redLi
sts
Anunor
der
edl
isti
sac o
lle
cti
ono
fre
lat
edit
emsthathavenosp
eci
alord
erors
equenc
e.Thi
s
l
isti
scr
eat
edb
yusingHTML<ul>ta
g.Eac
hite
mi ntheli
sti
smarkedwit
habull
et.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLUno
rde
redLi
st</
ti
tle
>
</
head>
<bod
y>
<ul>
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ul>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Thet
ypeAt
tri
but
e
Youcanuset
ypeatt
ribut
efor<ul
>t agt
osp
eci
fyt
het
ypeo
fbul
lety
oul
ike
.Byd
efaul
t,i
tisa
di
sc.Fol
lowi
ngarethepos
sibl
eop
tio
ns−
<ult
ype="
square
">
<ult
ype="
disc
">
<ult
ype="
circ
le"
>
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<ult
ype="
squar
e">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLUno
rde
redLi
st</
ti
tle
>
</
head>
<bod
y>
<ulty
pe="square">
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ul>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<ult
ype="
dis
c">−
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLUno
rde
redLi
st</
ti
tle
>
</
head>
<bod
y>
<ulty
pe="disc">
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ul>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<ult
ype="
cir
cle
">−
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLUno
rde
redLi
st</
ti
tle
>
</
head>
<bod
y>
<ulty
pe="circl
e">
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ul>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
HTMLOr
der
edLi
sts
I
fyouarere
quir
edtoputyourit
emsinanumb e
redl
isti
nste
adofbul
let
ed,
thenHTMLorde
red
l
istwil
lbeused.Thisli
stiscreat
edbyusi
ng<ol>tag
.Thenumb e
ringstar
tsato
neandis
i
ncre
me nt
edbyonefo
reachs uc
cess
iveo
rde
redli
stel
ementtag
gedwi
th<li>.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<bod
y>
<ol
>
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Thet
ypeAt
tri
but
e
Youcanus
etyp
eattr
ibut
efo
r<ol
>tagtospe
cif
ythet
ypeo
fnumb
eri
ngy
oul
ike
.Byd
efa
ult
,it
isanumbe
r.Fol
lowi
ngaret
hep
ossi
bleo
pti
ons−
<olt
ype="1"
>-Default
- Cas eNumerals.
<olt
ype="I"
>-Up pe
r-Cas eNume ral
s.
<olt
ype="i"
>-Lower-Cas eNume rals
.
<olt
ype="A">-Upper-Cas eLett
ers.
<olt
ype="a">-Lo
we r-
Cas eLe tt
ers.
Example
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
1">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<body
>
<oltyp
e=" 1">
<li>Beetroot
</li
>
<li>Ginger</l
i>
<li>Potato</
li>
<li>Rad i
sh</li
>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
I">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<body
>
<oltyp
e=" I">
<li>Beetroot
</li
>
<li>Ginger</l
i>
<li>Potato</
li>
<li>Rad i
sh</li
>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
i">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<body
>
<oltyp
e=" i">
<li>Beetroot
</li
>
<li>Ginger</l
i>
<li>Potato</
li>
<li>Rad i
sh</li
>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
A">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<b
ody
>
<olt
ype="A" >
<li
>Beetroot
</li
>
<li
>Ginger</l
i>
<li
>Potato</
li>
<li
>Rad i
sh</li
>
</
ol>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Examp
le
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
a">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<body
>
<oltyp
e=" a">
<li>Beetroot
</li
>
<li>Ginger</l
i>
<li>Potato</
li>
<li>Rad i
sh</li
>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Thes
tar
tAt
tri
but
e
Yo
uc anusest
artatt
rib
utefo
r<o l
>tagt
osp
eci
fyt
hes
tar
tingp
ointo
fnumb
eri
ngy
oune
ed.
Fo
llo
wingarethepo
ssibl
eop
tions−
<olt
ype="1"s
tart="4"> -Numeral
ss t
ar t
swi t
h4.
<olt
ype="I"st
art="4"> -Numeral
ss tart
swi t
hIV.
<olt
ype="i"s
tart="4"> -Numeral
ss t
ar t
swi t
hiv.
<olt
ype="a"st
art="4"> -Let
ter
ssta r
tswi t
hd .
<olt
ype="A"start="4"
> -Lett
ersstartswithD.
Example
Fo
llo
wingi
sane
xamp
lewhe
reweus
ed<o
lty
pe="
i"s
tar
t="
4">
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLOr
der
edLi
st</
ti
tle
>
</
head>
<body
>
<oltyp
e=" i"start="4"
>
<li>Beetroot
</li>
<li>Ginger</li
>
<li>Potato</
li>
<li>Rad i
sh</li>
</
ol>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
HTMLDe
fini
tio
nLi
sts
HTMLandXHTMLs upport
sal i
sts t
ylewhic
hisc al
ledd
efi
niti
onli
stswhereent
rie
sare
l
iste
dlikeinadict
ionaryorencyc
lopedi
a.Thede
finit
ionl
ististhei
dealwaytopres
enta
gl
ossar
y,l
isto
fte
rms, o
rothername/val
ueli
st.
De
fini
tio
nLi
stmake
sus
eoff
oll
owi
ngt
hre
etag
s.
 <d
l>−De
fine
sthes
tar
toft
hel
ist
 <d
t>−At
erm
 <d
d>−Te
rmd
efi
nit
ion
 </
dl>−De
fine
sthee
ndo
fthel
ist
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLDe
fini
tio
nLi
st</
ti
tle
>
</
head>
<bo
dy>
<dl
>
<dt
><b>HTML</b></
dt>
<dd
>Thiss
tand
sforHyp
erTe
xtMarkupLanguage
</dd>
<dt
><b>HTTP</b
></d
t>
<dd
>Thiss
tand
sforHyp
erTe
xtTr
ansferPr
otoco
l</d
d>
</
dl>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
HTML-Bac
kgr
ound
s
Byde
fault
,yourweb
pageb
ac kg
roundiswhit
eincol
or.Youmaynotli
keit,butnowo
rri
es.
HTMLp r
ovid
e sy
ouf
oll
owingtwogoodway
stode
cor
ateyourwe
bpag
ebackg
round.
 HTMLBac
kgr
oundwi
thCo
lor
s
 HTMLBac
kgr
oundwi
thI
mag
es
No
wle
t'
sse
ebo
tht
heap
pro
ache
soneb
yoneus
ingap
pro
pri
atee
xamp
les
.
Ht
mlBac
kgr
oundwi
thCo
lor
s
Thebg
col
o ratt
rib
uteisus
edtoc
ont
rolt
heb
ackg
roundo
fanHTMLe
leme
nt,
spe
cif
ical
lyp
age
bod
yandtablebac
kgro
unds.
No
te−Theb
gco
lorat
tri
but
ede
pre
cat
edi
nHTML5
.Dono
tus
ethi
sat
tri
but
e.
Fo
llo
wingi
sthes
ynt
axt
ous
ebg
col
orat
tri
but
ewi
thanyHTMLt
ag.
<t
agnameb
gco
lor="
col
or_val
ue"
..
.>
Thi
sco
lor
_val
uec
anb
egi
veni
nanyo
fthef
oll
owi
ngf
ormat
s−
<!
--For
mat1-Useco
lorname-
->
<t
ableb
gco
lor="
lime
">
<!
--For
mat2-Usehexval
ue-
->
<t
ableb
gco
lor="
#f1
f1f
1">

<tablebgc
o l
or="yel
low"width="
100%"
>
<t r
>
<t d>
Thisbackg
roundisye
llo
w
</ t
d>
</tr>
</
t abl
e>

<tablebgc
o l
or="#6666FF"widt
h="
100%"
>
<t r
>
<t d>
Thisbackg
roundiss
kyblue
</ t
d>
</tr>
</
t abl
e>

<tablebackgro
und=" /i
mag e
s/ht
ml.g
if"wi
dth="100%"he
ight="
100"
>
<t r
><t d>
Thi sbackgr
o undi
sfil
ledupwithHTMLi mag
e.
</td></tr>
</
t abl
e>
</
bod y
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
HTML-Co
lor
s
Col
orsarev
eryimpor
tanttogi
veagoo
dloo
kandfe
eltoyourwebsi
te.Youcanspec
ifycol
orson
pag
eleve
lusing<b
ody>tagoryouc
ansetc
olo
rsf
orindi
vidualt
agsusingb
g c
olo
rattri
bute.
The<b
ody
>taghasf
oll
owi
ngat
tri
but
eswhi
chc
anb
eus
edt
ose
tdi
ffe
rentc
olo
rs−
 b
gco
lor−s
etsac
olo
rfo
rtheb
ackg
roundo
fthep
age
.
 t
ext−s
etsac
olo
rfo
rtheb
odyt
ext
.
 al
ink−s
etsac
olo
rfo
rac
tivel
inkso
rse
lec
tedl
inks
.
 l
ink−s
etsac
olo
rfo
rli
nke
dte
xt.
 vl
ink−s
etsac
olo
rfrvi
o sit
edl
inks−t
hati
s,f
orl
inke
dte
xtt
haty
ouhavea
lre
ady
c
lic
kedo
n.
HTMLCo
lorCo
dingMe
tho
ds
The
rear
efo
llo
wingt
hre
edi
ffe
rentme
tho
dst
ose
tco
lor
siny
ourwe
bpag
e−
 Co
lorname
s−Yo
ucans
pec
ifyc
olo
rname
sdi
rec
tlyl
ikeg
ree
n,b
lueo
rre
d.
 He
xco
des−As
ix-
dig
itc
oder
epr
ese
nti
ngt
heamo
unto
fre
d,g
ree
n,andb
luet
hatmake
s
upt
hec
olo
r.
 Co
lord
eci
malo
rpe
rce
ntag
eval
ues−Thi
sval
uei
ssp
eci
fie
dus
ingt
her
gb()p
rop
ert
y.
No
wwewi
lls
eet
hes
eco
lor
ings
che
meso
neb
yone
.
HTMLCo
lor
s-Co
lorName
s
Youcanspec
ifydi
rec
tac ol
ornamet ose
tte
xtorbac
kgr
oundco
lor
.W3Chasl
ist
ed16b
asic
col
ornamesthatwil
lvali
datewithanHTMLvali
dat
orbutt
her
eareo
ver2
00d
iff
ere
ntco
lor
namessup
portedb
ymajorbro
ws e
rs.
No
te−Che
ckac
omp
let
eli
sto
fHTMLCo
lorName
.
W3CSt
and
ard1
6Co
lor
s
He
rei
sthel
isto
fW3CSt
and
ard1
6Co
lor
sname
sandi
tisr
eco
mme
nde
dtous
ethe
m.
Bl
ack Gr
ay Si
lve
r Whi
te
Ye
llo
w Li
me Aq
ua Fuc
hsi
a
Re
d Gr
een Bl
ue Pur
ple
Mar
oon Ol
ive Navy Te
al
Examp
le
He
rear
ethee
xamp
lest
ose
tbac
kgr
oundo
fanHTMLt
agb
yco
lorname−
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLCo
lor
sbyName
</t
itl
e>
</
head>
<bo
dyte
xt="blue"b
gcolo
r="g
ree
n">
<p>Used
iff
erentco
lorname
sforf
orb
odyandt
abl
eands
eet
her
esul
t.
</p
>
<tablebgco
lor="b
lack"
>
<t r
>
<t d>
<fontcol
or="whit
e">Thi
ste
xtwi
llap
pearwhi
teo
nbl
ackb
ackg
round
.</
font
>
</ t
d>
</tr>
</
t abl
e>
</
bod y
>
</
html
>
HTMLCo
lor
s-He
xCo
des
Ahexade
cimalisa6dig
itrep
res
e nt
ati
onofacol
or.Thefir
stt
wod i
git
s(RR)re
pre
sentar
ed
val
ue,
thenextt
woareagre
envalue(
GG),andt
helastar
ethebl
ueval
ue(BB).
A hexad
ecimalval
uec
anb et
ake
nfr
om anyg
rap
hic
sso
ftwar
eli
keAd
obePho
tos
hop
,
Pai
ntshopProo
rMSPai
nt.
Eachhexade
cimalco
dewil
lbepre
ced
edb
yap
oundo
rhas
hsi
gn#.Fo
llo
wingi
sal
isto
ffe
w
col
orsusi
nghexad
eci
malnot
ati
on.
Co
lor Co
lorHEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Examp
le
He
rear
ethee
xamp
lest
ose
tbac
kgr
oundo
fanHTMLt
agb
yco
lorc
odei
nhe
xad
eci
mal−
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLCo
lor
sbyHe
x</
ti
tle
>
</
head>
<bo
dyte
xt="#0000FF"bg
colo
r="#00FF00">
<p>Used
iff
ere
ntcolo
rhexaforf
orb
odyandtab
leands
eet
her
esul
t.
</p
>
<tablebgco
lor="#000000"
>
<t r
>
<t d>
<fontcol
or="#FFFFFF">Thi
ste
xtwi
llap
pea
rwhi
teo
nbl
ackb
ackg
round
.</
font
>
</ t
d>
</tr>
</
t abl
e>
</
bod y
>
</
html
>
HTMLCo
lor
s-RGBVal
ues
Thisc
olo
rvalueisspe
cifi
edusi
ngtherg
b()pro
per
ty.Thisp
rope
rtyt
akesthr
eeval
ues
,one
eac
hforre
d,g
reen,
andblue
.Theval
uecanbeani
nte
gerbet
ween0and255o
raperc
ent
age
.
Note−Al
ltheb
rows
ersd
oesno
tsup
por
trg
b()p
rop
ert
yofc
olo
rsoi
tisr
eco
mme
nde
dno
ttous
e
it
.
Fo
llo
wingi
sal
istt
osho
wfe
wco
lor
sus
ingRGBval
ues
.
Co
lor Co
lorRGB
r
gb(
0,0,
0)
r
gb(
255
,0,
0)
r
gb(
0,2
55,
0)
r
gb(
0,0,
255
)
r
gb(
255
,25
5,0)
r
gb(
0,2
55,
255
)
r
gb(
255
,0,
255
)
r
gb(
192
,192
,192
)
r
gb(
255
,25
5,2
55)
Examp
le
He
rear
ethee
xamp
lest
ose
tbac
kgr
oundo
fanHTMLt
agb
yco
lorc
odeus
ingr
gb(
)val
ues−
Li
veDe
mo
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>HTMLCo
lor
sbyRGBc
ode
</t
itl
e>
</
head>
<bo
dyte
xt="rgb
( 0,
0,
255)
"bgco
lor="r
gb(0,
255
,0)
">
<p>Used
iff
erentcol
orcod
eforfo
rbodyandt
ableands
eet
her
esul
t.
</p
>
<tablebgco
lor="r
gb(0,
0,
0)">
<t r
>
<t d>
<fontcol
or="r
gb(255
,25
5,2
55)
">Thi
ste
xtwi
llap
pearwhi
teo
nbl
ackb
ackg
round
.</
font
>
</ t
d>
</tr>
</
t abl
e>
</
bod y
>
</
html
>
Br
ows
erSaf
eCo
lor
s
Hereist
helistof2
16col
orswhicharesupp
osedt
obesaf
estandco
mp ut
erind
epende
ntco
lor
s.
Thesecol
orsveryfr
om hexacode000000toFFFFFFandt he
ywi l
lbesuppor
tedbyal
lthe
compute
rshaving256c
olorpal
ett
e.
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
HTML-Fo
nts
Fontsp layave ryimp o
rtantrol
einmaki ngawe bsi
temo reuserfr
iendlyandi ncr
easing
contentreadabil
ity
.Fontfaceandcol
o rd
ependse
nti
rel
yont hecomput
erandb rowserthatis
beingusedt ovie
wy ourpagebutyo
uc anuseHTML<f ont
>t agtoaddst
yle,si
ze,andcolorto
thetexto nyourwebsit
e.Youcanusea<b asef
ont
>tagtosetallofy
ourtexttothesames ize
,
face,andc o
lor.
Thefonttagishavingthre
eat t
ribut
escall
edsiz
e,co
lor,andfac
etocus
tomizeyourfonts
.To
chang
eanyo fthefontatt
ribut
esatanytimewi t
hinyourwebpag
e,si
mplyusethe<font>tag
.
Thetextthatfo l
lowswi l
lr e
mai nchangedunti
lyouc l
osewiththe</f
ont>t ag
.Yo ucan
chang
eo neorallofthef
ontattri
bute
swi t
hinone<fo
nt >tag
.
Note−Thefontandbase
fontt
agsaredepr
ecat
edanditi
ssuppo
s e
dtob er
emove
dinafutur
e
ver
s i
ono fHTML.Sot heyshouldnotbeusedrat
her
,it'
ssugges
tedtous
eCSSstyl
esto
manipulateyourfont
s.Buts t
illfo
rlearni
ngpurp
ose
,thischapt
erwille
xpl
ainf
ontand
bas
e f
onttagsinde
tail
.
Se
tFo
ntSi
ze
Youcansetconte
ntfontsiz
eus i
ngsi
zeatt
ribut
e.Ther
ang
eofac
cep
tedval
uesi
sfr
om
1(
small
est
)to7
(larg
est
).Thede
faul
tsi
zeofafonti
s3.
Examp l
e
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tti
ngFo
ntSi
ze</
ti
tle
>
</
head>
<bo
dy>
<fo
ntsiz
e="
1">Fo
ntsize="
1"</f
ont><br/>
<fo
ntsiz
e="
2">Fonts
ize="2"</
font
><b r/
>
<fo
ntsiz
e="
3">Fontsi
ze="3"</
font><br/
>
<fo
ntsiz
e="
4">Fontsi
ze="4"</
font><br/
>
<fo
ntsiz
e="
5">Fonts
ize="
5 "
</font
><br/>
<fo
ntsiz
e="
6">Fontsi
ze="6"</
font><br/
>
<fo
ntsiz
e="
7">Fonts
ize="7"</
font
>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Re
lat
iveFo
ntSi
ze
Youcanspe
cif
yhowmanys i
z e
slar
gero
rhowmanysiz
ess mall
erthanthep
res
etf
onts
ize
sho
uldbe
.Youcans
pec
ifyi
tlike<fo
ntsi
ze="
+n"
>o r<fontsi
ze="−n">
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Re
lat
iveFo
ntSi
ze</
ti
tle
>
</
head>
<bo
dy>
<fo
ntsiz
e="
-1"
>Fontsi
ze="-1"
</fo
nt><br/>
<fo
ntsiz
e="
+1">Fo
ntsize="
+1"</f
ont><br/>
<fo
ntsiz
e="
+2">Fonts
ize="+2"</
font
><b r/
>
<fo
ntsiz
e="
+3">Fonts
ize="+3"</
font><br/
>
<fo
ntsiz
e="
+4">Fonts
ize="+4"</f
ont>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Se
tti
ngFo
ntFac
e
Youcansetfontfaceusingfaceatt
rib
utebutbeawarethati
ftheus
ervi
ewingt
hepaged
oes
n't
havethefontinstall
ed,theywillnotbeabletose
eit.Inst
eaduse
rwills
eethed
e f
aul
tfont
fac
eappli
cabletotheuser'sco
mp uter
.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Fo
ntFac
e</
ti
tle
>
</
head>
<bo
dy>
<fo
ntfac
e="
TimesNewRo man"siz
e=" 5">Time sNewRoman</f
ont
><b
r/>
<fo
ntfac
e="
Verd
ana"size="5"
>Ve r
dana</font><b r/
>
<fo
ntfac
e="
ComicsansMS"s i
ze="5">Comi cSansMS</ f
ont
><br/
>
<fo
ntfac
e="
Wild
We st
"size="5"
>Wi l
dWe st
</font><br/>
<fo
ntfac
e="
Bedr
ock"siz
e=" 5
">Bedrock</f
ont><b r/>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
Sp
eci
fya
lte
rnat
efo
ntf
ace
s
Avi sit
orwillo
nlyb
eab l
etos
eeyo
urfontift
heyhavethatf
onti
nstall
edonthei
rcomput
er.
So,itispos
sibl
etospe
cif
ytwoormor
ef ontf
aceal
ternat
ive
sbyli
stingthef
ontfac
enames,
se
p arat
edbyacomma.
<f
ontf
ace="
ari
al,
hel
vet
ica">
<f
ontf
ace="
Luci
daCall
igrap
hy,
Comi
cSansMS,
Luc
idaCo
nso
le"
>
Wheny
ourpag
ei sl
oad
ed,t
heirbr
owserwilld
isp
laythefi
rstf
ontfaceavai
lab
le.I
fnoneo
fthe
g
ive
nfont
sareinst
all
ed,
thenitwil
ldis
playt
hedefaul
tfontf
aceTimesNewRo man.
No
te−Che
ckac
omp
let
eli
sto
fHTMLSt
and
ardFo
nts
.
Se
tti
ngFo
ntCo
lor
Youcansetanyfo
ntc o
lory
oulikeusngc
i o
loratt
ribute.Yo
uc ans
pec
ifyt
hec
olo
rthaty
ou
wantbye
ithe
rthecol
ornameorhexad
eci
malcodeforthatco
lor
.
No
te−Yo
ucanc
hec
kac
omp
let
eli
sto
fHTMLCo
lorNamewi
thCo
des
.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tti
ngFo
ntCo
lor
</t
itl
e>
</
head>
<bo
dy>
<fo
ntcol
or="
#FF00FF">Thi
ste
xti
sinpink</
font
><b
r/>
<fo
ntcol
or="
red
">Thi
stexti
sre
d</
font
>
</
body>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t−
The<b
ase
font
>El
eme
nt
The<bas
efont
>e l
eme ntissuppos
edtosetadef
aultfo
ntsiz
e,c
olo
r,andt
ypef
acef
oranypar
ts
ofthedoc
ume ntthatareno tother
wisec o
ntaine
dwi t
hina<font>tag.Youcanusethe
<font
>elementst
oo ver
ridethe<bas
efo
nt >set
ting
s.
The<b ase
font>t
agalsot
ake
sc o
lor,s
izeandfaceat
tri
bute
sanditwi
lls
uppor
tre
lat
ivef
ont
set
tingbygivi
ngs
izeaval
ueof+1fo
ras i
zelar
geror−2fort
wosiz
essmal
ler
.
Examp
le
<!DOCTYPEht
ml>
<html>
<he
ad>
<t
itl
e>Se
tti
ngBas
efo
ntCo
lor
</t
itl
e>
</
head>
<body
>
<basef
ontface="ari
al,
verd
ana,s
ans-s
erif
"siz
e="2"c
olo
r="
#ff
0000"
>
<p>Thisisthepage
'sde
faul
tfo
nt.
</p>
<h2>Examp leoft
he<
bas
efo
nt&gt
;Ele
me nt
</h2
>
<p><fontsi
ze="+2
"col
or="dar
kgray"
>
Thisisd
arkg
rayt
extwit
htwosiz
e sl
arg
er
</f
ont>
</
p>
<p
><f
ontf
ace="
cour
ier
"si
ze="
-1"c
olo
r="
#000000"
>
I
tisaco
uri
erf
ont
,as
izes
mal
lerandb
lac
kinc
olo
r.
</
font
>
</
p>
</
body
>
</
html
>
Thi
swi
llp
rod
ucet
hef
oll
owi
ngr
esul
t–
HTMLSt
yle
s-CSS
CSSs
tand
sfo
rCas
cad
ingSt
yleShe
ets
.
CSSs
ave
sal
oto
fwo
rk.I
tcanc
ont
rolt
hel
ayo
uto
fmul
tip
lewe
bpag
esal
lato
nce
.
Wha
tisCSS?
Cas
cad
ingSt
yleShe
ets(
CSS)i
sus
edt
ofo
rmatt
hel
ayo
uto
fawe
bpag
e.
WithCSS, youcanco nt
rolthecolor,f
ont,
thesizeoftext,t
hespaci
ngbetwee
nele
me nt
s,ho
w
e
leme ntsareposit
ionedandl ai
do ut
,whatbackgro
undi mag e
sorbackg
roundco
lorsar
etobeus
ed,
di
ffer
e ntdi
splaysfordif
fer
e ntdevic
esandscr
e e
ns iz
es ,
andmuc hmo r
e!
Us
ingCSS
CSSc
anb
ead
dedt
oHTMLd
ocume
ntsi
n3way
s:
 I
nline-byusingthest
yleatt
rib
uteins
ideHTMLe lements
 I
nternal-byusinga<styl
e>ele
me nti
nthe<he >s
ad ect
ion
 Ext
ernal-byusinga<link>ele
me ntt
olinkt
oane xte
rnalCSSf
ile
Themo stco
mmo nwaytoaddCSS,
ist
okee
pthesty
lesi
next
ernalCSSfi
les
.However,i
nt hi
s
tuto
rialwewilluseinl
inea
ndinte
rna
lst
yle
s,be
causet
hisi
seasiert
ode
mo ns
trat
e,andeasi
erf
or
youtotryi
tyoursel
f.
I
nli
neCSS
Ani
nli
neCSSi
sus
edt
oap
plyauni
ques
tyl
etoas
ing
leHTMLe
leme
nt.
Ani
nli
neCSSus
est
hest
yleat
tri
but
eofanHTMLe
leme
nt.
Thefol
lowingexamples
etst
het
extc
olo
roft
he<h1
>el
eme
ntt
obl
ue,
andt
het
extc
olo
rof
the<p>ele
me nttor
ed:
<!
DOCTYPEht
ml>
<ht
ml>
<b
ody
>
<h1s
tyl
e="
col
or:
blue
;">ABl
ueHe
adi
ng</
h1>
<ps
tyl
e="
col
or:
red
;">Ar
edp
arag
rap
h.</
p>
</
bod
y>
</
html
>
I
nte
rnalCSS
Ani
nte
rna
lCSSi
sus
edt
ode
fineas
tyl
efo
ras
ing
leHTMLp
age
.
Ani
nte
rna
lCSSi
sde
fine
dint
he<he
ad>s
ect
iono
fanHTMLp
age
,wi
thi
na<st
yl>e
e l
eme
nt.
Thefo
llo
wingexampl
eset
sthetextco
lorofALLthe<h1>e
lement
s(ont
hatpage
)tobl
ue,
andt
he
te
xtcol
orofALLthe<p>e
lementstored
.Inaddi
tio
n,thep
agewil
lbedi
spl
ayedwit
ha
"po
wderbl
ue"b
ackgr
oundcol
or:
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<s
tyl
e>
b
ody{
bac
kgr
ound
-co
lor
:po
wde
rbl
ue;
}
h1{
col
or:
blue
;}
p{
col
or:
red
;}
</
sty
le>
</
head
>
<b
ody
>
<h1
>Thi
sisahe
adi
ng</
h1>
<p
>Thi
sisap
arag
rap
h.</
p>
</
bod
y>
</
html
>
Ext
ernalCSS
Ane
xte
rnals
tyl
eshe
eti
sus
edt
ode
finet
hes
tyl
efo
rmanyHTMLp
age
s.
Tous
eane
xte
rnals
tyl
eshe
et,
addal
inkt
oiti
nthe<he
ad>s
ect
iono
feac
hHTMLp
age
:
Examp
le
<!DOCTYPEhtml>
<html>
<head>
<li
nkrel
="s
tyl
eshee
t"hr
ef="
sty
les
.cs
s">
</head
>
<body>
<h1>Thisisahe
adi
ng</
h1>
<p>Thisisapar
agr
aph.
</p
>
</
body
>
</
html>
Tr
yitYour
sel
f»
Theext
ernals
tyl
eshe
etcanbewr
itt
eninanyt
exte
dit
or.Thef
ilemus
tno
tco
ntai
nanyHTMLc
ode
,
andmustbesave
dwitha.cs
sext
ensi
on.
He
rei
swhatt
he"
sty
les
.cs
s"f
ilel
ooksl
ike
:
"
sty
les
.cs
s":
body{
backg
round
-co
lor
:po
wde
rbl
ue;
}
h1{
col
or:bl
ue;
}
p{
col
or:r
ed;
}
CSSCo
lor
s,Fo
ntsandSi
zes
Her
e,wewi
lld
emo
nst
rat
eso
mec
ommo
nlyus
edCSSp
rop
ert
ies
.Yo
uwi
lll
ear
nmo
reab
outt
hem
l
ate
r.
TheCSScol
orp
rop
ert
yde
fine
sthet
extc
olo
rtob
eus
ed.
TheCSSf
ont
-fami
lyp
rop
ert
yde
fine
sthef
ontt
obeus
ed.
TheCSSf
ont
-si
zep
rop
ert
yde
fine
sthet
exts
izet
obeus
ed.
Examp
le
Us
eofCSSc
olo
r,f
ont
-fami
lyandf
ont
-si
zep
rop
ert
ies
:
<!DOCTYPEht ml>
<html>
<head>
<sty
le>
h1{
co
lor:
blue;
f
ont-f
amily:ve
rdana;
f
ont-si
ze:
300%;
}
p{
co
lor:
red;
f
ont-f
amily:co
urier
;
f
ont-si
ze:
160%;
}
</st
yle
>
</
head
>
<b
ody>
<h1>Thisisahe
adi
ng</
h1>
<p>Thisisapar
agr
aph.
</p
>
</
body
>
</
html>
Tr
yitYour
sel
f»
CSSBo
rde
r
TheCSSbor
derp
rop
ert
yde
fine
sab
ord
erar
oundanHTMLe
leme
nt.
Ti
p:Yo
ucand
efi
neab
ord
erf
orne
arl
yal
lHTMLe
leme
nts
.
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<s
tyl
e>
p{
b
ord
er:
2pxs
oli
dpo
wde
rbl
ue;
</
sty
le>
</
head
>
<b
ody
>
<h1
>Thi
sisahe
adi
ng</
h1>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
</
bod
y>
</
html
>
CSSPad
ding
TheCSSpaddi
ngp
rop
ert
yde
fine
sap
add
ing(
spac
e)b
etwe
ent
het
extandt
heb
ord
er.
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<s
tyl
e>
p{
b
ord
er:
2pxs
oli
dpo
wde
rbl
ue;
p
add
ing
:30p
x;
</
sty
le>
</
head
>
<b
ody
>
<h1
>Thi
sisahe
adi
ng</
h1>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
</
bod
y>
</
html
>
CSSMar
gin
TheCSSmar
ginp
rop
ert
yde
fine
samar
gin(
spac
e)o
uts
idet
heb
ord
er.
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<s
tyl
e>
p{
b
ord
er:
2pxs
oli
dpo
wde
rbl
ue;
mar
gin:
50p
x;
</
sty
le>
</
head
>
<b
ody
>
<h1
>Thi
sisahe
adi
ng</
h1>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
<p
>Thi
sisap
arag
rap
h.</
p>
</
bod
y>
</
html
>
HTMLLi
nks
Li
nksar
efo
undi
nne
arl
yal
lwe
bpag
es.Li
nksal
lowus
erst
ocl
ickt
hei
rwayf
romp
aget
opag
e.
HTMLLi
nks-Hy
per
links
HTMLl
inksar
ehy
per
links
.
Yo
ucanc
lic
konal
inkandj
umpt
oano
the
rdo
cume
nt.
Whe
nyo
umo
vet
hemo
useo
veral
ink,
themo
usear
rowwi
llt
urni
ntoal
itt
lehand
.
No
te:
Ali
nkd
oesno
thavet
obet
ext
.Al
inkc
anb
eani
mag
eoranyo
the
rHTMLe
leme
nt!
HTMLLi
nks-Sy
ntax
TheHTML<a>t
agd
efi
nesahy
per
link.I
thast
hef
oll
owi
ngs
ynt
ax:
<ahr
ef ur
=" l
">l
inkt
ext
</a
>
Themo s
timpor
tantat
tri
but
eo he<a
ft >e
leme
nti
sthehr
efat
tri
but
e,whi
chi
ndi
cat
est
hel
ink'
s
des
tinat
ion.
Thel
inkt
exti
sthep
artt
hatwi
llb
evi
sib
let
other
ead
er.
Cl
icki
ngo
nthel
inkt
ext
,wi
lls
endt
her
ead
ert
othes
pec
ifi
edURLad
dre
ss.
Li
nkt
oanEmai
lAd
dre
ss
Us
emai
lto
:ins
idet
hehr
efat
tri
but
etoc
reat
eal
inkt
hato
penst
heus
er'
semai
lpr
ogr
am(
tol
ett
hem
s
endane
wemai
l):
<!
DOCTYPEht
ml>
<ht
ml>
<b
ody
>
<h2
>Li
nkt
oanEmai
lAd
dre
ss</
h2>
<p
>Toc r
eateali
nkthato
pensi
ntheus
er'
semai
lpr
ogr
am(
tol
ett
hems
endane
wemai
l),
use
mail
to:
insi
dethehr
efatt
rib
ute
:</
p>
<p
><ahr
ef="
mai
lto
:so
meo
ne@e
xamp
le.
com"
>Se
nde
mai
l</
a></
p>
</
bod
y>
</
html
>
HTMLLay
outEl
eme
ntsandTe
chni
que
s
We
bsi
teso
fte
ndi
spl
ayc
ont
enti
nmul
tip
lec
olumns(
likeamag
azi
neo
rane
wsp
ape
r).
HTMLLay
outEl
eme
nts
HTMLhass
eve
rals
emant
ice
leme
ntst
hatd
efi
net
hed
iff
ere
ntp
art
sofawe
bpag
e:
 <he
ade
r>-De
fine
sahe
ade
rfo
rad
ocume
nto
ras
ect
ion
 <nav>-De
fine
sas
eto
fnavi
gat
ionl
inks
 <s
ect
ion>-De
fine
sas
ect
ioni
nad
ocume
nt
 <ar
tic
le>-De
fine
sani
nde
pend
ent
,se
lf-
cont
aine
dco
nte
nt
 <as
id>-De
e fine
sco
nte
ntas
idef
romt
hec
ont
ent(
likeas
ide
bar
)
 <f
oot
er>-De
fine
saf
oot
erf
orad
ocume
nto
ras
ect
ion
 <d
etai
ls>-De
fine
sad
dit
ionald
etai
lst
hatt
heus
erc
ano
penandc
los
eon
d
emand
 <s
ummar
y>-De
fine
sahe
adi
ngf
ort
he<de
tai
ls>e
leme
nt
HTMLLay
outTe
chni
que
s
Therear
efo
urd
iff
ere
ntt
echni
que
stoc
reat
emul
tic
olumnl
ayo
uts
.Eac
hte
chni
quehasi
tsp
rosand
cons
:
 CSSf
ramewo r
k
 CSSf
loatpr
opert
y
 CSSf
lexbo
x
 CSSg
rid
CSSFl
oatLay
out
Itiscommontodoenti
reweblayoutsusi
ngtheCSSfloatpro
pert
y.Flo
atiseasytole
arn-youj
ust
needtoreme
mb e
rho wthefl
oatandcle
arpr
opert
ieswork.Disadvant
ages:
Fl o
atinge
lementsa
re
tie
dtothedo
cume ntf
low,whichmayhar mtheflexi
bilit
y.Learnmoreaboutfl
oatinourCSS
FloatandCl
earchapt
er.
<!
DOCTYPEht
ml>
<ht
mll
ang
="e
n">
<he
ad>
<t
itl
e>CSSTe
mpl
ate
</t
itl
e>
<me
tac
har
set
="ut
f-8"
>
<me
taname
="vi
ewp
ort
"co
nte
nt="
wid
th=d
evi
ce-
wid
th,
ini
tial
-sc
ale
=1"
>
<s
tyl
e>
*{
b
ox-
siz
ing
:bo
rde
r-b
ox;
b
ody{
f
ont
-fami
ly:
Ari
al,
Hel
vet
ica,
sans
-se
rif
;
/
*St
ylet
hehe
ade
r*/
he
ade
r{
b
ackg
round
-co
lor
:#666;
p
add
ing
:30p
x;
t
ext
-al
ign:
cent
er;
f
ont
-si
ze:
35p
x;
c
olo
r:whi
te;
/
*Cr
eat
etwoc
olumns
/bo
xest
hatf
loat
sne
xtt
oeac
hot
her*/
nav{
f
loat
:le
ft;
wi
dth:
30%;
he
ight
:300p
x;/
*onl
yfo
rde
mons
tra
tio
n,s
houl
dber
emo
ved*/
b
ackg
round
:#c
cc;
p
add
ing
:20p
x;
/
*St
ylet
hel
isti
nsi
det
heme
nu*/
navul{
l
ist
-st
yle
-ty
pe:
none
;
p
add
ing
:0;
ar
tic
le{
f
loat
:le
ft;
p
add
ing
:20p
x;
wi
dth:
70%;
b
ackg
round
-co
lor
:#f
1f1
f1;
he
ight
:300p
x;/
*onl
yfo
rde
mons
tra
tio
n,s
houl
dber
emo
ved*/
/
*Cl
earf
loat
saf
tert
hec
olumns*/
s
ect
ion:
:
aft
er{
c
ont
ent
:""
;
d
isp
lay
:ta
ble
;
c
lear
:bo
th;
}
/
*St
ylet
hef
oot
er*/
f
oot
er{
b
ackg
round
-co
lor
:#7
77;
p
add
ing
:10p
x;
t
ext
-al
ign:
cent
er;
c
olo
r:whi
te;
/
*Respo
nsivelay
out-makesthet
woc
olumns
/bo
xess
tac
kont
opo
feac
hot
heri
nst
eado
fne
xt
t
oeac
ho t
her,o
ns malls
cre
ens*/
@me
dia(
max-
wid
th:
600p
x){
nav,
art
icl
e{
wi
dth:
100%;
he
ight
:aut
o;
</
sty
le>
</
head
>
<b
ody
>
<h2
>CSSLay
outFl
oat
</h2
>
<p>I
nthise
xampl
e,wehavecre
ate
dahead
er,
twocol
umns
/bo
xesandaf
oot
er.Ons
mal
ler
sc
ree
ns,
thecol
umnswil
lstac
ko nt
opo
feachot
her
.</
p>
<p>Resi
zethebr
owse
rwind
owt ose
ethere
spo
nsi
vee
ffe
ct(
youwi
lll
ear
nmo
reab
outt
hisi
n
ourne
xtchapt
er-HTMLRespo
nsive
.)</
p>
<he
ade
r>
<h2
>Ci
tie
s</
h2>
</
head
er>
<s
ect
ion>
<nav>
<ul
>
<l
i><ahr
ef="
#">Lo
ndo
n</
a></
li
>
<l
i><ahr
ef="
#">Par
is</
a></
li
>
<l
i><ahr
ef="
#">To
kyo
</a></
li
>
</
ul>
</
nav>
<ar
tic
le>
<h1
>Lo
ndo
n</
h1>
<p>Lo
ndonist
hecapi
talc
ityofEng
land.I
tist
hemo stp
opul
ousc
ityi
ntheUni
tedKi
ngd
om,
wi
thame t
rop
oli
tanar
eaofover13mil
lio
ninhab
itant
s.</
p>
<p>St
andi
ngontheRi
verThames,
Londo
nhasbeenamaj
orse
ttl
ementfo
rtwomil
lenni
a,
i
tshi
sto
ryg
oingb
acktoi
tsfound
ingb
ytheRomans
,whonameditLond
ini
um.</
p>
</
art
icl
e>
</
sec
tio
n>
<f
oot
er>
<p
>Fo
ote
r</
p>
</
foo
ter
>
</
bod
y>
</
html
>
HTML-Fo
rms
AnHTMLformi
sus
edt
oco
lle
ctus
eri
nput
.Theus
eri
nputi
smo
sto
fte
nse
ntt
oas
erve
rfo
r
pr
oce
ssi
ng.
HTMLFo
rmTag
s
Le
t'
sse
ethel
isto
fHTML5f
ormt
ags
.
Tag De
scr
ipt
ion
<f
orm> I
tde
fine
sanHTMLf
ormt
oent
eri
nput
sbyt
heus
eds
ide
.
<i
nput
> I
tde
fine
sani
nputc
ont
rol
.
<t
ext
are
a> I
tde
fine
samul
ti-
linei
nputc
ont
rol
.
<l
abe
l> I
tde
fine
sal
abe
lfo
rani
npute
leme
nt.
<f
iel
dse
t> I
tgr
oup
sther
elat
ede
leme
nti
naf
orm.
<l
ege
nd> I
tde
fine
sac
apt
ionf
ora<f
iel
dse
t>e
leme
nt.
<s
ele
ct> I
tde
fine
sad
rop
-do
wnl
ist
.
<o
ptg
roup
> I
tde
fine
sag
roupo
fre
lat
edo
pti
onsi
nad
rop
-do
wnl
ist
.
<o
pti
on> I
tde
fine
sano
pti
oni
nad
rop
-do
wnl
ist
.
<b
utt
on> I
tde
fine
sac
lic
kab
leb
utt
on.
HTML<f
orm>e
leme
nt
TheHTML<f or
m>e l
ementp
rovideadoc
uments
ect
iont
otakeinputf
romus e
r.I
tprovi
desvari
ous
int
erac
tivec
ont
rol
sfo
rsubmit
tinginf
ormat
iont
owebser
versuchastextf
iel
d,t
extare
a,pass
wo r
dfi
eld
,
etc
.
Note
:The<f
orm>e l
eme
ntdoesno
tits
elfc
reateaf
ormb
uti
tisc
ont
aine
rtoc
ont
ainal
lre
qui
red
fo
rme l
ements
,suc
has<inp
ut>,<labe
l>,et
c.
Sy
ntax:
1
. <f
orm>
2
.//
For
mel
eme
nts
3. </
for
m>
HTML<i
nput
>el
eme
nt
TheHTML<i nput
>ele
mentisfundamentalf
ormele
ment.Itisuse
dtoc
reat
efo
rmfie
lds
,totakei
nput
fromuse
r.Wecanappl
ydi
ffe
rentinputf
ile
dtogat
herdi
ffe
rentinf
ormat
ionf
ormus
er.Fol
lowingi
sthe
exampl
etoshowthes
implet
extinput.
Examp
le:
<b
ody
>
<f
orm>
Ent
ery
ourname<b
r>
<i
nputt
ype
="t
ext
"name
="us
ername
">
</
for
m>
</
bod
y>
Out
put
:
HTMLTe
xtFi
eldCo
ntr
ol
Thet
ype
="te
xt"att
ributeo
finputtagcre
atest
ext
fie
ldcontr
olal
soknownassi
ngl
elinete
xtf
iel
dco
ntrol
.The
nameat
tri
buteisop
tional
,butiti
sr e
quire
dfort
heser
ve rs
idec
omponents
uchasJSP,ASP,PHPetc
.
<f
orm>
Fi
rstName
:<i
nputt
ype
="t
ext
"name
="f
irs
tname
"/><b
r/>
Las
tName
:<i
nputt
ype
="t
ext
"name
="l
ast
name
"/><b
r/>
</
for
m>
Out
put
:
No
te:
Ify
ouwi
llo
mit'
name
'at
tri
but
ethe
nthet
extf
ile
dinp
utwi
llno
tbes
ubmi
tte
dtos
erve
r.
HTML<t
ext
are
a>t
agi
nfo
rm
The<textar
ea>tagi
nHTMLisusedt
oinser
tmulti
ple
-li
net
exti
naf
orm.Thes
izeo
f<t
ext
are
a>c
anb
e
spe
cif
ye i
therus
ing"
rows
"or"
col
s"att
rib
uteorb
yCSS.
Examp
le:
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<t
itl
e>Fo
rmi
nHTML</
ti
tle
>
</
head
>
<b
ody
>
<f
orm>
Ent
ery
ourad
dre
ss:
<br
>
<t
ext
are
aro
ws="
2"c
ols
="2
0"></
text
are
a>
</
for
m>
</
bod
y>
</
html
>
Out
put
:
Lab
elTagi
nFo
rm
I
tisc
ons
ide
redb
ett
ert
ohavel
abe
linf
orm.Asi
tmake
sthec
odep
ars
er/
bro
wse
r/us
erf
rie
ndl
y.
I
fyo
ucli
cko
nthelab
elt
ag,itwil
lfoc
usonthete
xtc
ont
rol
.Tod
oso
,yo
une
edt
ohavef
orat
tri
but
einl
abe
l
t
agt
hatmus
tbesameasidatt
rib
uteofi
nputt
ag.
NOTE:
Itisgo
odtous
e<lab
el>tagwi
thfor
m,alt
houghitiso
pti
onalb
uti
fyouwil
lus
eit
,the
nit
wil
lprovi
deafo
cuswhe
ny out
aporc
lic
konlab
eltag
.Itismorewort
hywit
htouc
hsc
ree
ns.
<f
orm>
<l
abe
lfo
r="
fir
stname
">Fi
rstName
:</
lab
el><b
r/>
<i
nputt
ype
="t
ext
"id
="f
irs
tname
"name
="f
irs
tname
"/><b
r/>
<l
abe
lfo
r="
las
tname
">Las
tName
:</
lab
el>
<i
nputt
ype
="t
ext
"id
="l
ast
name
"name
="l
ast
name
"/><b
r/>
</
for
m>
Out
put
:
HTMLPas
swo
rdFi
eldCo
ntr
ol
Thep
ass
wor
disno
tvi
sib
let
otheus
eri
npas
swo
rdf
iel
dco
ntr
ol.
<f
orm>
<l
abe
lfo
r="
pas
swo
rd"
>Pas
swo
rd:
</l
abe
l>
<i
nputt
ype
="p
ass
wor
d"i
d="
pas
swo
rd"name
="p
ass
wor
d"/
><b
r/>
</
for
m>
Out
put
:
HTML5Emai
lFi
eldCo
ntr
ol
Theemailf
iel
dinne
winHTML5
.Itval
idat
est
het
extf
orc
orr
ecte
mai
lad
dre
ss.Yo
umus
tus
e@ and.i
n
thi
sfie
ld.
<f
orm>
<l
abe
lfo
r="
emai
l">Emai
l:</
lab
el>
<i
nputt
ype
="e
mai
l"i
d="
emai
l"name
="e
mai
l"/
><b
r/>
</
for
m>
I
twi
lld
isp
layi
nbr
ows
erl
ikeb
elo
w:
No
te:
Ifwewi
llno
tent
ert
hec
orr
ecte
mai
l,i
twi
lld
isp
laye
rro
rli
ke:
Rad
ioBut
tonCo
ntr
ol
Ther
adi
obut
toni
sus
edt
ose
lec
toneo
pti
onf
rommul
tip
leo
pti
ons
.Iti
sus
edf
ors
ele
cti
ono
fge
nde
r,q
uiz
q
ues
tio
nse
tc.
I
fyo
uus
eonenamef
oral
lther
adi
obut
tons
,onl
yoner
adi
obut
tonc
anb
ese
lec
tedatat
ime
.
Us
ingr
adi
obut
tonsf
ormul
tip
leo
pti
ons
,yo
ucano
nlyc
hoo
seas
ing
leo
pti
onatat
ime
.
<f
orm>
<l
abe
lfo
r="
gend
er"
>Ge
nde
r:</
lab
el>
<i
nputt
ype
="r
adi
o"i
d="
gend
er"name
="g
end
er"val
ue="
mal
e"/
>Mal
e
<i
nputt
ype
="r
adi
o"i
d="
gend
er"name
="g
end
er"val
ue="
femal
e"/
>Fe
mal
e<b
r/>
</
for
m>
Che
ckb
oxCo
ntr
ol
Thec
hec
kbo
xco
ntr
oli
sus
edt
oche
ckmul
tip
leo
pti
onsf
romg
ive
nche
ckb
oxe
s.
<f
orm>
Ho
bby
:<b
r>
<i
nputt
ype
="c
hec
kbo
x"i
d="
cri
cke
t"name
="c
ric
ket
"val
ue="
cri
cke
t"/
>
<l
abe
lfo
r="
cri
cke
t">Cr
icke
t</
lab
el><b
r>
<i
nputt
ype
="c
hec
kbo
x"i
d="
foo
tbal
l"name
="f
oot
bal
l"val
ue="
foo
tbal
l"/
>
<l
abe
lfo
r="
foo
tbal
l">Fo
otb
all
</l
abe
l><b
r>
<i
nputt
ype
="c
hec
kbo
x"i
d="
hoc
key
"name
="ho
cke
y"val
ue="
hoc
key
"/>
<l
abe
lfo
r="
hoc
key
">Ho
cke
y</
lab
el>
</
for
m>
Not
e:Thes
earesi
milart
oradiob
utto
ne xce
pti
tcanchoo
semul
tip
leo
pti
onsatat
imeandr
adi
o
but
toncanse
lec
tonebut
tonatatime,andi
tsdi
spl
ay.
Out
put
:
Sub
mitb
utt
onc
ont
rol
HTML<i nputt
ype
="sub
mit">areuse
dtoad
das
ubmi
tbut
tono
nwe
bpag
e.Whe
nus
erc
lic
kso
nsub
mit
but
ton,
thenfor
mg e
tsubmi
ttothese
rver
.
Sy
ntax:
1
. <i
nputt
ype
="s
ubmi
t"val
ue="
sub
mit
">
Thet
ype=s
ubmi
t,s
pec
ify
ingt
hati
tisas
ubmi
tbut
ton
Theval
ueat
tri
but
ecanb
eany
thi
ngwhi
chwewr
iteo
nbut
tono
nwe
bpag
e.
Thenameat
tri
but
ecanb
eomi
the
re.
Examp
le:
<f
orm>
<l
abe
lfo
r="
name
">Ent
ername
</l
abe
l><b
r>
<i
nputt
ype
="t
ext
"id
="name
"na
me="
name
"><b
r>
<l
abe
lfo
r="
pas
s">Ent
erPas
swo
rd</
lab
el><b
r>
<i
nputt
ype
="Pas
swo
rd"i
d="
pas
s"name
="p
ass
"><b
r>
<i
nputt
ype
="s
ubmi
t"val
ue="
sub
mit
">
</
for
m>
Out
put
:
HTML<f
iel
dse
t>e
leme
nt:
The<fi
eld
s e
t>e
leme
nti
nHTMLisuse
dtogroupther
elate
dinf
ormat
iono
faf
orm.Thi
sel
eme
nti
sus
ed
with<l
egend>e
leme
ntwhi
chp
rovi
decap
tio
nf o
rthegroup
edel
ement
s.
Examp
le:
<f
orm>
<f
iel
dse
t>
<l
ege
nd>Us
erI
nfo
rmat
ion:
</l
ege
nd>
<l
abe
lfo
r="
name
">Ent
ername
</l
abe
l><b
r>
<i
nputt
ype
="t
ext
"id
="name
"name
="name
"><b
r>
<l
abe
lfo
r="
pas
s">Ent
erPas
swo
rd</
lab
el><b
r>
<i
nputt
ype
="Pas
swo
rd"i
d="
pas
s"name
="p
ass
"><b
r>
<i
nputt
ype
="s
ubmi
t"val
ue="
sub
mit
">
</
fi
eld
set
>
l
t;
/f
orm>
Out
put
:
HTMLFo
rmExamp
le
Fo
llo
wingi
sthee
xamp
lef
oras
imp
lef
ormo
fre
gis
trat
ion.
<!
DOCTYPEht
ml>
<ht
ml>
<he
ad>
<t
itl
e>Fo
rmi
nHTML</
ti
tle
>
</
head
>
<b
ody
>
<h2>Re
gis
trat
ionf
orm</
h2>
<f
orm>
<f
iel
dse
t>
<l
ege
nd>Us
erp
ers
onali
nfo
rmat
ion</
leg
end
>
<l
abe
l>Ent
ery
ourf
ullname
</l
abe
l><b
r>
<i
nputt
ype
="t
ext
"name
="name
"><b
r>
<l
abe
l>Ent
ery
oure
mai
l</
lab
el><b
r>
<i
nputt
ype
="e
mai
l"name
="e
mai
l"><b
r>
<l
abe
l>Ent
ery
ourp
ass
wor
d</
lab
el><b
r>
<i
nputt
ype
="p
ass
wor
d"name
="p
ass
"><b
r>
<l
abe
l>c
onf
irmy
ourp
ass
wor
d</
lab
el><b
r>
<i
nputt
ype
="p
ass
wor
d"name
="p
ass
"><b
r>
<b
r><l
abe
l>Ent
ery
ourg
end
er</
lab
el><b
r>
<i
nputt
ype
="r
adi
o"i
d="
gend
er"name
="g
end
er"val
ue="
mal
e"/
>Mal
e<b
r>
<i
nputt
ype
="r
adi
o"i
d="
gend
er"name
="g
end
er"val
ue="
femal
e"/
>Fe
mal
e<b
r/>
<i
nputt
ype
="r
adi
o"i
d="
gend
er"name
="g
end
er"val
ue="
othe
rs"
/>o
the
rs<b
r/>
<b
r>Ent
ery
ourAd
dre
ss:
<br
>
<t
ext
are
a></
text
are
a><b
r>
<i
nputt
ype
="s
ubmi
t"val
ue="
sig
n-up
">
</
fi
eld
set
>
</
for
m>
</
bod
y>
</
html
>
Out
put
:
HTMLFo
rmExamp
le
Le
t'
sse
eas
imp
lee
xamp
leo
fcr
eat
ingHTMLf
orm.
<f
orm ac
tio
n="
#">
<t
abl
e>
<t
r>
<t
dcl
ass
="t
dLab
el"
><l
abe
lfo
r="
reg
ist
er_name
"cl
ass
="l
abe
l">Ent
ername
:</
lab
el></
td>
<t
d><i
nputt
ype
="t
ext
"name
="name
"val
ue="
"id
="r
egi
ste
r_name
"st
yle
="wi
dth:
160p
x"/
></
td>
</
tr>
<t
r>
<t
dcl
ass
="t
dLab
el"
><l
abe
lfo
r="
reg
ist
er_p
ass
wor
d"c
las
s="
lab
el"
>Ent
erp
ass
wor
d:</
lab
el></
td>
<t
d><i
nputt
ype
="p
ass
wor
d"na
me="
pas
swo
rd"i
d="
reg
ist
er_p
ass
wor
d"s
tyl
e="
wid
th:
160p
x"/
></
td>
</
tr>
<t
r>
<t
dcl
ass
="t
dLab
el"
><l
abe
lfo
r="
reg
ist
er_e
mai
l"c
las
s="
lab
el"
>Ent
erEmai
l:
</l
abe
l></
td>
<t
d
><i
nputt
ype
="e
mai
l"name
="e
mai
l"val
ue="
"id
="r
egi
ste
r_e
mai
l"s
tyl
e="
wid
th:
160p
x"/
></
td>
</
tr>
<t
r>
<t
dcl
ass
="t
dLab
el"
><l
abe
lfo
r="
reg
ist
er_g
end
er"c
las
s="
lab
el"
>Ent
erGe
nde
r:</
lab
el></
td>
<t
d>
<i
nputt
ype
="r
adi
o"name
="g
end
er"i
d="
reg
ist
er_g
end
ermal
e"val
ue="
mal
e"/
>
<l
abe
lfo
r="
reg
ist
er_g
end
ermal
e">mal
e</
lab
el>
<i
nputt
ype
="r
adi
o"name
="g
end
er"i
d="
reg
ist
er_g
end
erf
emal
e"val
ue="
femal
e"/
>
<l
abe
lfo
r="
reg
ist
er_g
end
erf
emal
e">f
emal
e</
lab
el>
</
td>
</
tr>
<t
r>
<t
dcl
ass
="t
dLab
el"
><l
abe
lfo
r="
reg
ist
er_c
ount
ry"c
las
s="
lab
el"
>Se
lec
tCo
unt
ry:
</l
abe
l></
td>
<t
d><s
ele
ctname
="c
ount
ry"i
d="
reg
ist
er_c
ount
ry"s
tyl
e="
wid
th:
160p
x">
<o
pti
onval
ue="
ind
ia"
>ind
ia</
opt
ion>
<o
pti
onval
ue="
paki
stan"
>paki
stan</
opt
ion>
<o
pti
onval
ue="
afr
ica"
>af
ric
a</
opt
ion>
<o
pti
onval
ue="
chi
na"
>chi
na</
opt
ion>
<o
pti
onval
ue="
othe
r">o
the
r</
opt
ion>
</
sel
ect
>
</
td>
</
tr>
<t
r>
<t
dco
lsp
an="
2"><d
ival
ign="
rig
ht"
><i
nputt
ype
="s
ubmi
t"i
d="
reg
ist
er_0"val
ue="
reg
ist
er"
/>
</
div></
td>
</
tr>
</
tab
le>
</
for
m>

HTML Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorial

Uploaded by

Copyright:

Available Formats

HTMLTut

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

You might also like