HTML Frames

HTMLFr
ames
Wi
thf
rames,y
oucandi
spl
aymor
ethanoneHTMLdocument
/webpagei
nthesamebr
owserwi
ndow.Each
HTMLdocument
/pagei
scal
l
edaf
rame,andeachf
ramei
sindependentoft
heot
her
s.Thef
ramesusual
l
yar
e
usedf
orsi
tenav
igat
ion.
 Ti
tl
e/Headerpor
ti
on
 MenuPor
ti
onandCont
entpor
ti
on
 Foot
erPor
ti
on
Adv
ant
agesofFr
ames
 Thef
ramesal
l
owt
okeeponepar
tofagest
ati
cwhi
l
echanget
heot
herpar
tsofpage.
 Fr
amesar
eusedt
odi
spl
aymul
ti
plewebpagesi
nthesamebr
owserwi
ndow.
 Fr
amescanpr
ovi
deanav
igat
ional
tool
ift
heyar
eusedpr
oper
ly.
Thedi
sadv
ant
agesofusi
ngf
ramesar
e:
 Fr
amesar
enotexpect
edt
obesuppor
tedi
nfut
urev
ersi
onsofHTML
 Fr
amesar
edi
ff
icul
ttouse.(
Pri
nti
ngt
heent
ir
epagei
sdi
ff
icul
t)
.
 Thewebdev
elopermustkeept
rackofmor
eHTMLdocument
s
 Sear
chengi
nedonoti
ndext
hewebpageswi
thf
rames.
 Mostbr
owser
sdonotsuppor
ttobookmar
kani
ndi
vi
dual
frame.
FRAMESETt
ag
Thef
ramesett
aghol
dsoneormor
efr
amet
ag.Thef
ramesett
agdi
vi
dest
hewebpagei
ntomul
ti
plepor
ti
ons.
Fr
amet
agi
susedt
odi
spl
aycont
ent
sint
hepor
ti
onscr
eat
edbyf
ramesett
ag.Eachf
ramet
agcanhol
da
separ
atewebpage.Thef
ramesett
agst
atesHOW MANYcol
umnsorr
owst
her
ewi
l
lbei
nthef
rameset
,andhow
muchper
cent
age/
pixel
sofspacewi
l
loccupyeachoft
hem.Af
ramesetcanbespeci
fi
edasCol
s(col
umns)or
ROWSbutnotbot
hatat
ime.
At
tri
but
esofFRAMESETTag
At
tri
but
e Descr
ipt
ion
I
tdi
vi
descr
eeni
ntomul
ti
pler
ows.I
tsv
aluecanbei
n
 Numberofpi
xel
s
ROWS  Per
cent
ageofScr
een
 (*)Ast
eri
skSy
mbol
toi
ndi
cat
eal
lremai
ningspace.(
Nor
mal
l
yincaseofpi
xel
sas
pi
xel
numberoneachcl
i
entcomput
eri
sunknown)
I
tdi
vi
dest
hescr
eeni
ntomul
ti
plecol
umns.I
tsv
aluecanbei
n
 Numberofpi
xel
s
COLS  Per
cent
ageofScr
een
 (*)Ast
eri
skSy
mbol
toi
ndi
cat
eal
lremai
ningspace.(
Nor
mal
l
yincaseofpi
xel
sas
pi
xel
numberoneachcl
i
entcomput
eri
sunknown)
BORDER Wi
dthofbor
deri
npi
xel
sar
oundeachf
rame.(t
ohi
deusebor
der=0)
FRAMESPACI
NG Theamountofspacebet
weenf
rames
HTML–Hy
per
TextMar
kupLanguage Page-1-
HTML–Hy
per
TextMar
kupLanguage Page-2-
FRAMETag
TheFr
amet
agi
susedi
nsi
deaf
ramesett
ag.Fr
amet
agi
susedt
ospeci
fywebpaget
hatwi
l
lbedi
spl
ayedi
nthe
fr
ame.
At
tri
but
esofFRAMETag
At
tri
but
e Descr
ipt
ion
SRC Li
ke<a>t
ag,
SRCSpeci
fyt
hewebpaget
obedi
spl
ayed.
NAME I
tspeci
fi
est
henameoft
hef
rame.
Nor
esi
ze I
tmakest
hef
rameun-
resi
zeabl
e.Val
uesnor
esi
ze=“
nor
esi
ze”
Scr
oll
i
ng UsedToshow/
hidescr
oll
baront
hewebpage.Val
uesar
eyes,
noandaut
o
Asusedwi
tht
heanchort
ag<a>t
heTar
getat
tri
but
ecanal
sobeusedwi
tht
hef
ramet
ag.
Tar
getAt
tri
but
e’sv
alues
Tar
get
’s
Descr
ipt
ion
v
alue
_
par
ent Thepagei
sloadedi
ntot
hef
ramesetcont
aini
ngt
hecur
rentf
rame.
Tar
get
Thepagewi
l
lrepl
acet
het
opmostf
ramesetandl
oadi
ntot
hewhol
e
_
top
br
owserwi
ndows
_
blank Thepagei
sloadedi
ntoanewbr
owser
’swi
ndows.
_
sel
f Thepagei
sloadedi
ntosamewi
ndowsi
nwhi
cht
hel
i
nkexi
sts.
NOFRAMEt
ag
<nof
rames>t
agi
susedt
ospeci
fyanal
ter
nat
ewebpagei
fthebr
owserdoesnotsuppor
tfr
ames.I
tsal
sousef
ul
t
ospeci
fyawebpagei
nthe<nof
rame>t
agf
ort
hesear
chengi
net
oindext
hewebsi
te.
Not
e:- <body
>and</
body
>tagar
enotr
equi
redwhenusi
ngf
rames.Butt
hesear
erequi
redwheny
ouwantt
o
use<nof
rame>t
ag.
HTML–Hy
per
TextMar
kupLanguage Page-3-
Exampl
es -
-- Usi
ngFr
amesetandFr
amet
ag
Let
’scr
eat
e4si
mpl
ewebpages.Onl
yonel
i
net
exti
swr
it
tenoneachwebpagef
orunder
standi
ngaboutf
rames.
I
npr
act
ical
youcancr
eat
ecompl
etewebpager
egar
dingeachcat
egor
ywi
thknowl
edgef
rom pr
evi
oust
opi
cs.
<ht
ml> <ht
ml>
<bodybgcol
or="
RED"
> <bodybgcol
or="
GREEN"
>
<h1> TI
TLEpage</
h1> <h1> MENUpage </
h1>
</
body
> </
body
>
</
html
> </
html
>
Sav
ethi
sfi
leas"
Tit
le.
html
” Sav
ethi
sfi
leas"
Menu.
html
”
<ht
ml> <ht
ml>
<bodybgcol
or="
PURPLE"
> <bodybgcol
or="
YELLOW"
>
<h1> CONTENTSpage</
h1> <h1> FOOTERpage </
h1>
</
body
> </
body
>
</
html
> </
html
>
Sav
ethi
sfi
leas"
Cont
ent
s.ht
ml” Sav
ethi
sfi
leas"
Foot
er.
html
”
Not
e:sav
eal
lwebpagesi
nthesamedi
rect
ory
.
Exampl
e-1Di
spl
ayabov
e4webpageshor
izont
all
yusi
ngf
rames,
speci
fyper
cent
agef
oreachf
rame.
HTMLCode
<ht
ml>
<f
ramesetr
ows="
15%,
15%,
55%,
15%"
>
<f
ramesr
c="
Tit
le.
html
">
<f
ramesr
c="
Menu.
html
">
<f
ramesr
c="
Cont
ent
s.ht
ml"
>
<f
ramesr
c="
Foot
er.
html
">
</
frameset
>
</
html
>
Sav
eitas“
frames.
html
”orwi
thanydesi
redname.
Thenr
unt
hisf
il
eint
hebr
owser
.Youwi
l
lseeal
l
Thewebpagescr
eat
edabov
ewi
l
lbedi
spl
ayed
I
nsi
ngl
ewebpage.
HTML–Hy
per
TextMar
kupLanguage Page-4-
Exampl
e-2Di
spl
ay3webpages(
Tit
le,MenuandCont
ent
s)VERTI
CALLYusi
ngf
rames.Separ
ateeachf
rame
usi
ngpi
xel
sanddon’
tusebor
derar
oundf
rames.
HTMLCode
<ht
ml>
<f
ramesetcol
s="
120,
150,
*"bor
der
=0>
<f
ramesr
c="
Tit
le.
html
">
<f
ramesr
c="
Menu.
html
">
<f
ramesr
c="
Cont
ent
s.ht
ml"
>
</
frameset
>
</
html
>
Sav
ethi
sfi
l
easf
rames2.
html
CodeDescr
ipt
ion
Cur
rentf
il
efr
ames2.
htmlwi
l
ldi
spl
aycont
entoft
hreewebpagesi
ntoasi
ngl
ewebpage.I
nthecode<ht
ml>t
ag
i
ndi
cat
est
hest
artofht
mlcode,and<f
rameset
>tagdi
vi
dest
hispagei
nto3col
umns.Col
sat
tri
but
edi
vi
dest
he
pagei
ntocol
umns.Wecanpassper
cent
aget
othi
sat
tri
but
easi
npr
evi
ousexampl
eoff
rames.
htmlf
il
e.Her
ewe
passednumberofpi
xel
sont
hescr
eeni
nwhi
chpagewi
l
lbedi
spl
ayed.1stwebpage(
Tit
le.
html
)isdi
spl
ayedi
n
120pi s,and2nd (
xel Menu.
html
)isdi
vi
dedi
nto150pi
xel
s.Thi
rdpar
amet
eri
s(*)ast
eri
sk,whi
chi
ndi
cat
est
hat
120+150=270 pi
xel
s oft
he scr
een ar
e used and r
emai
ning pi
xel
s shoul
d be used f he 3rd f
ort rame
(
Cont
ent
s.ht
ml)
.iti
sbecauseper
cent
agescanbeev
aluat
edeasi
l
y,butscr
eenr
esol
uti
ondi
ff
erateachcl
i
ent
comput
er.sobyspeci
fyi
ng*ht
mlaut
omat
ical
l
ycov
erst
her
emai
ningpi
xel
s.
NESTEDFRAMES
Af
ramewi
thi
naf
ramei
scal
l
ednest
edf
rame.Youcannotuser
owsandcol
sat
tri
but
eatt
hesamet
imei
nsi
dea
si
ngl
efr
ame,
buty
oucanusesepar
atel
ybyusi
ngaf
rameseti
nsi
deaf
rameset
.
Let
’ssupposey
ouwantcr
eat
eawebpagebydi
vi
dingwebpagei
ntor
owsandcol
umns.
Forexampl
e
Ti
tl
ePor
ti
on
M
E Adv
ert
ise
Cont
ent
s
N Por
ti
on
U
Foot
erPor
ti
on
Exampl
e--
-Usi
ngNESTEDFRAMES
Cr
eat
eonemor
eht
mlf
il
enamedadv
ert
ise.
htmlascr
eat
edt
hef
il
es(
Tit
le,Menu,Cont
ent
sandf
oot
er.
htmli
n
HTML–Hy
per
TextMar
kupLanguage Page-5-
abov
eexampl
e)
Tocr
eat
eabov
ement
ionedwebpageusi
ngnest
edf
rames
 Di
vi
det
hepagei
nto3r
owsusi
ngf
rameset
 n2ndf
Theni ramedi
vi
det
hisf
ramei
nto3col
umnsusi
ngf
ramesett
ag.
HTMLCodef
orNESTEDFr
ames
<ht
ml>
<f
ramesetr
ows="
15%,
*,
15%"bor
der
=10>
<f
ramesr
c="
Tit
le.
html
">
<f
ramesetcol
s="
20%,
60%,
20%"bor
der
=0>
<f
ramesr
c="
Menu.
html
">
<f
ramesr
c="
Cont
ent
s.ht
ml"
>
<f
ramesr
c="
Adv
ert
ise.
html
">
</
frameset
>
<f
ramesr
c="
Foot
er.
html
"nor
esi
ze="
nor
esi
ze"
>
</
frameset
>
</
html
>
Out
putoft
heNESTEDFRAMECode
HTML–Hy
per
TextMar
kupLanguage Page-6-
Di
spl
ayi
ngMul
ti
pleWebPagesi
nsi
ngl
efr
ameusi
nghy
per
li
nks
Consi
dert
heabov
ewebpages(
Tit
le,
Cont
ent
s,Adv
ert
iseandFoot
er)ar
eal
readycr
eat
edf
ort
hisexampl
e.Let
s
updat
etheMenuf
il
e.Sot
hatbycl
i
cki
ngeachl
i
nki
nthemenuf
il
eiti
sdi
spl
ayedi
nther
ightf
ramewhent
heuser
cl
i
cksanymenui
tem.Whatweneedt
oaddi
s
 Gi
veat
argetat
tri
but
etot
hehy
per
li
nk.Thet
argetwi
l
lbet
hef
ramenamewher
etol
oadt
hewebpage.
 Wheny
oucr
eat
ethef
ramegi
vet
hatf
rameanamesot
hathy
per
li
nkcanf
indt
hatf
rame.
HTMLCodef
orMENU.
html
<ht
ml><bodybgcol
or="
GREEN"
>
<h3>MENUpage</
h3>
<ahr
ef="
Cont
ent
s.ht
ml"t
arget
="Ri
ght
_Fr
ame"
>ShowCont
ent
sPage</
a> <br
>
<ahr
ef="
Tit
le.
html
"tar
get
="Ri
ght
_Fr
ame"
>ShowTi
tl
ePage</
a> <br
>
<ahr
ef="
Adv
ert
ise.
html
"tar
get
="Ri
ght
_Fr
ame"
>ShowAdv
ert
isePage</
a> <br
>
<ahr
ef="
Foot
er.
html
"tar
get
="Ri
ght
_Fr
ame"
>ShowFoot
erPage</
a>
</
body
></
html
>
HTMLCODEf
orf
rames3.
html
<ht
ml> <f
ramesetr
ows="
15%,
*"
>
<f
ramesr
c="
Tit
le.
html
">
<f
ramesetcol
s="
30%,
70%"
>
<f
ramesr
c="
Menu.
html
">
<f
ramesr
c="
Cont
ent
s.ht
ml"name="
Right
_Fr
ame"
>
</
frameset
>
</
frameset
> </
html
>
HTML–Hy
per
TextMar
kupLanguage Page-7-
HTMLi
fr
ame
I
fr
amei
susedt
odi
spl
ayawebpagewi
thi
nawebpage.
Sy
ntaxf
oraddi
ngani
fr
ame:
<i
fr
amesr
c="
URL"
></
ifr
ame>
TheURLpoi
ntst
othel
ocat
ionoft
hesepar
atepage.
Opt
ional
Att
ri
but
es
At
tri
but
e Val
ue Descr
ipt
ion
sr
c URL Speci
fi
est
headdr
essoft
hedocumentt
oembedi
nthe<i
fr
ame>
name name Speci

fi
est
henameofan<i
fr
ame>
wi
dth Pixel
sor Speci
fi
est
hewi
dthofan<i
fr
ame>
percent
age%
hei
ght Pixel
sor Speci
fi
est
hehei
ghtofan<i
fr
ame>
percent
age%
scr
oll
i
ng yes
no
Speci
fi
eswhet
herornott
odi
spl
ayscr
oll
bar
sinan<i
fr
ame>
aut
o
f
ramebor
der1
0
Speci
fi
eswhet
herornott
odi
spl
ayabor
derar
oundan<i
fr
ame>
<ht
ml>
<body
>
<h2> Wel
comet
oMy
Web</
h2>
<h3>i
am goi
ngt
oloadpagef
rom l
astexampl
enamedf
rames3.
html
bel
ow</
h2>
<i
fr
amesr
c="
frames3.
html
"name="
my_
ifr
ame"hei
ght
=30%wi
dth=60%></
ifr
ame>
</
body
>
</
html
>
HTML–Hy
per
TextMar
kupLanguage Page-8-
HTML–Hy
per
TextMar
kupLanguage Page-9-
Usi
ngMi
l
li
onsofCol
ors
Col
orsar
edi
spl
ayedcombi
ning
RED,
GREEN,
andBLUEl
i
ght
.
HTMLcol
orsar
edef
inedusi
ngahexadeci
malnot
ati
on(
HEX)f
ort
hecombi
nat
ionofRed,Gr
een,andBl
uecol
or
v
alues(
RGB)
.Thel
owestv
aluet
hatcanbegi
vent
ooneoft
hel
i
ghtsour
cesi
s0(
inHEX:
00)
.Thehi
ghestv
aluei
s
255(
inHEX:
FF)
.HEXv
aluesar
especi
fi
edas3pai
rsoft
wo-
digi
tnumber
s,st
art
ingwi
tha#si
gn.
Col
orVal
ues
Col
or Col
orHEX Col
orRGB
#000000 r
gb(
0,0,
0)
#FF0000 r
gb(
255,
0,
0)
#00FF00 r
gb(
0,255,
0)
#0000FF r
gb(
0,0,
255)
#FFFF00 r
gb(
255,
255,
0)
#00FFFF r
gb(
0,255,
255)
#FF00FF r
gb(
255,
0,
255)
#C0C0C0 r
gb(
192,
192,
192)
#FFFFFF r
gb(
255,
255,
255)
16Mi
l
li
onDi
ff
erentCol
ors
Thecombi
nat
ionofRed,
Green,
andBl
uev
aluesf
rom 0t
o255,
giv
esmor
ethan16mi
l
li
ondi
ff
erentcol
ors(
256x
256x256)
.Bel
owi
stheexampl
etousemi
l
li
onsofcol
orswi
thoutspeci
fyi
ngt
hecol
orname.Justchanget
he
hexadeci
mal
code(
#FFFF00)orr
gb(
255,
255,
0)t
oanydesi
redv
aluesbutf
orr
gbv
aluesmustbebet
ween0-
255
andf
orhexadeci
mal
val
uesmustbebet
ween0-
9andA-
F.
<ht
ml>
<body
>
<pst
yle="
backgr
ound-
col
or:
#FFFF00"
>
Col
orsetbyusi
nghexv
alue
</
p>
<pst
yle="
backgr
ound-
col
or:
rgb(
255,
255,
0)"
>
Col
orsetbyusi
ngr
gbv
alue
</
p>
</
body
>
</
html
>
HTML–Hy
per
TextMar
kupLanguage Page-10-
HTML4.
01Qui
ckLi
st-
--Li
stAl
ltheHTMLTagsexpl
ainedi
nthi
sDocument
<ht
ml>
<head>
<t
it
le>Ti
tl
eofdocumentgoesher
e</
ti
tl
e>
</
head>
<body
>
Vi
sibl
etextgoesher
e..
.
</
body
>
</
html
>
Headi
ngEl
ement
s
<h1>Lar
gestHeadi
ng</
h1>
<h2>...</
h2>
<h3>...</
h3>
<h4>...</
h4>
<h5>...</
h5>
<h6>Smal
l
estHeadi
ng</
h6>
TextEl
ements
<p>Thi
sisaparagr
aph</
p>
<br/
>(l
i
nebr
eak)
<hr/
>(hor
izont
alr
ule)
<pr
e>Thi
stexti
spr
efor
mat
ted</
pre>
Logi
calSt
yles
<em>Thi
stexti
semphasi
zed</
em>
<st
rong>Thi
stexti
sst
rong</
str
ong>
<code>Thi
sissomecomput
ercode</
code>
Phy
sical
Sty
les
<b>Thi
stexti
sbol
d</
b>
<i
>Thi
stexti
sit
ali
c</
i>
Li
nks
Or
dinar
yli
nk:
<ahr
ef="
htt
p:/
/www.
exampl
e.com/
">Li
nk-
textgoesher
e</
a>
I
mage-
li
nk:
<ahr
ef="
htt
p:/
/www.
exampl
e.com/
"><i
mgsr
c="
URL"al
t="
Alt
ernat
eText
"/></
a>
Mai
l
tol
i
nk:
<ahr
ef="
mai
l
to:
webmast
er@exampl
e.com"
>Sende-
mai
l
</a>
Anamedanchor
:
<aname="
ti
ps"
>Ti
psSect
ion</
a>
<ahr
ef="
#ti
ps"
>Jumpt
otheTi
psSect
ion</
a>
HTML–Hy
per
TextMar
Unor
der
edl
ist
<ul
>
<l
i
>It
em</
li
>
<l
i
>It
em</
li
>
</
ul>
Or
der
edl
ist
<ol
>
<l
i
>Fi
rsti
tem</
li
>
<l
i
>Secondi
tem</
li
>
</
ol>
Def
ini
ti
onl
ist
<dl
>
<dt
>Fi
rstt
erm</
dt>
<dd>Def
ini
ti
on</
dd>
<dt
>Nextt
erm</
dt>
<dd>Def
ini
ti
on</
dd>
</
dl>
Tabl
es
<t
abl
ebor
der
="1"
>
<t
r>
<t
h>Tabl
eheader
</t
h>
<t
h>Tabl
eheader
</t
h>
</
tr>
<t
r>
<t
d>somet
ext
</t
d>
<t
d>somet
ext
</t
d>
</
tr>
</
tabl
e>
I
fr
ame
<i
fr
amesr
c="
demo_
ifr
ame.
htm"
></
ifr
ame>
Fr
ames
<f
ramesetcol
s="
25%,
75%"
>
<f
ramesr
c="
page1.
htm"/
>
<f
ramesr
c="
page2.
htm"/
>
</
frameset
>
For
ms
<f
orm act
ion="
htt
p:/
/www.
exampl
e.com/
test
.asp"met
hod="
post
/get
">
HTML–Hy
per
TextMar
<i
nputt
ype="
text
"name="
emai
l
"si
ze="
40"maxl
engt
h="
50"/
>
<i
nputt
ype="
passwor
d"/
>
<i
nputt
ype="
checkbox"checked="
checked"/
>
<i
nputt
ype="
radi
o"checked="
checked"/
>
<i
nputt
ype="
submi
t"v
alue="
Send"/
>
<i
nputt
ype="
reset
"/>
<i
nputt
ype="
hidden"/
>
<sel
ect
>
<opt
ion>Appl
es</
opt
ion>
<opt
ionsel
ect
ed="
sel
ect
ed"
>Bananas</
opt
ion>
<opt
ion>Cher
ri
es</
opt
ion>
</
sel
ect
>
<t
ext
areaname="
comment
"rows="
60"col
s="
20"
></
text
area>
</
for
m>
HTML–Hy
per
TextMar

HTML Frames

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 Frames

Uploaded by

Copyright:

Available Formats

HTMLFr

name name Speci

You might also like