Class10 Labs 2021-22

Page1
St
ruct
ureofanHTMLPr
ogr
am andi
tsLay
out
LAB1:
Creat
easi
mpl
ewebpageandexpl
ainst
hest
ruct
ureofanht
mldocument
AI
M:ToCr
eat
easi
mpl
ewebpageandex
plai
nst
hest
ruct
ureofanht
mldocument
PROCEDURE:
Howt
ocr
eat
eandopenanht
mldocument
:
Cr
eat
eaht
mldocument
:
St
ep1:
opent
extedi
tor
St
art-
>al
lpr
ogr
ams-
>accessor
ies-
>not
epad
St
ep2:
typet
hecode
Thenot
epadwi
ndowwi
l
lappearandt
hent
ypet
heht
mlcode
St
ep3:
sav
ethef
il
e
Cl
i
ckonf
il
e->sav
e.
Thesav
edi
alogboxwi
l
lappear
.Sel
ectt
het
argetf
oldert
osav
ethef
il
e.
Ment
iont
henamei
nthef
il
enamet
ext
boxwi
thext
ensi
on.
html
St
ep4:
cli
ckont
hesav
ebut
ton
Vi
ewi
ngaht
mldocument
:
St
ep1:
cli
ckst
art-
>al
lpr
ogr
amsandchoosebr
owser
s.
Thebr
owserwi
ndowwi
l
lappear
St
ep2:
Ify
ousel
ectanyonewebbr
owsersel
ectkey
boar
dshor
tcut
i
.e.Ct
rl
+O.
Theopendialogboxwillappear.
cli
ckonthebrowsebut
tont
olocatet
heht
mlf
il
e.Adi
alog
boxwi
llappear.
selecty
ourf i
l
eandcl i
ckonopenbutt
onandcl
ickok.
(
or)
Doubl
ecl
i
ckt
heht
mlf
il
e.
St
ep3:
thef
il
ewi
l
lbedi
spl
ayedi
nthewebbr
owser
.
Page2
DEFI
NINGTHESTRUCTURE:
Page3
PROGRAM:
<!Doct
ypeht
ml>
<Ht
ml>
<Head>
<Ti
tl
e>t
it
leoft
hepage</
ti
tl
e>
</
head>
<Body
>
Text
,whi
chy
ouwantt
oshowony
ourwebpage,
wil
lbegi
venher
e.
Tagsr
elat
edt
olay
outandf
ormat
ti
ng.
</
body
>
</
html
>
Page4
Out
put
:
Page5
TEXTFORMATTI
NGTAGS
LAB2:
Creat
east
ati
cwebpagewhi
chdef
inesal
lthet
extf
ormat
ti
ngt
agsofht
ml
AI
M:Tocr
eat
east
ati
cwebpagewhi
chdef
inesal
lthet
extf
ormat
ti
ngt
agsofht
ml
DEFI
NITI
ONS:
STATI
CWEBPAGE:
Stat
icwebpagesar ev er
ysi
mple.Iti
swrit
teninlanguagessuchas
HTML,JAVASCRI PT,andCSSet c.f
orstat
icwebpageswhenaser verreceivesarequestf
or
awebpage,t
hent heserversendstheresponsetothecl
ientwit
houtdoinganyadditi
onal
pr
ocess.AndtheseWebPagesar eseenthroughawebbr owser
.Instat
icwebpages, pages
wi
llr
emainthesameunt i
lsomeonechangesi tmanual
ly.
DYNAMI
CWEBPAGES:
DynamicWebPagesar ewr i
tteninlanguagessuchasCGI,AJAX, ASP
et
c.i
ndynamicwebpages, thecontentofpagesisdiffer
entfordi
ffer
entvi
sit
ors.Itt
akes
moreti
met oloadthanthestati
cwebpage.Dy namicwebpagesar eusedwheret he
i
nfor
mationischangedfrequentl
y,f
orexamplest ockprices,
weatheri
nfor
mationetc.
PROGRAM:
<!DOCTYPEht
ml>
<Ht
ml>
<Head>
<Ti
tl
e>TextFor
mat
ti
ngt
ags</
ti
tl
e>
</
head>
<bodybgcol
or="
skybl
ue"
>
<CENTER><H1>TEXTFORMATTI
NGTAGS</
H1></
CENTER>
Nor
mal
tex
t-FORMATTI
NGTAGS
&l
t;
B&gt
;

t
hist
extwi
l
lbebol
d. 
&l
t;
I&gt
;

thi
stextwi
l
lbei
tal
i
c. 
&l
t;
U&gt
;

t
hist
extwi
l
lbeunder
li
ne.
 
Page6
&l
t;
EM&gt ;

Emphasi
s 
&l
t;
INS&gt
;

i
nser
tedt
extwhi
l
eedi
ti
ngdi
spl
ayi
nunder
li
ne</
ins> 
&l
t;
ABBR&gt
;

Defi
nesanabbrevi
ati
onoracr
ony
mint
heht
mldocument

<ABBR>HTML
</
ABBR> 
&l
t;KBD&gt
;

<KBD>i
dent
if
iest
het
extt
hati
sinputbyt
heuserusi
ngt
hekey
boar
d</
KBD>
&l
t;
STRONG&gt
;

<st
rong>st
rong</
str
ong> 
&l
t;TELETYPE&gt
;

<tel
ety
pe>t
elet
ype</
tel
ety
pe> 
&l
t;
CITE&gt
;

<Ci
te>i
ndi
cat
esar
efer
encet
owor
kCI
TATI
ON</
cit
e> 
&l
t;
DEL&gt
;

<del
>st
ri
ket
hrought
ext
</del
> 
&l
t;
BIG&gt
;

<bi
g>t
exti
nbi
gfont
</bi
g> 
&l
t;
SMALL&gt
;

<Smal
l
>texti
nsmal
lfont</
smal
l
> 
&l
t;
SUP&gt
;

t
extdi
spl
ayi
nabov
ethebasel
i
ne

AB 
&l
t;
SUB&gt
;

t
extdi
spl
ayi
nbel
owt
hebasel
i
ne

AB 
&l
t;
MARK&gt
;

<Mar
k>Thi
stex
twi
l
lbehi
ghl
i
ght
ed</
mar
k> 
</
body
></
html
>
Page7
Out
put
:
Page8
ORDEREDLI
ST(
STARTANDTYPEATTRI
BUTE)
LAB3:
Creat
eawebpageusi
ngor
der
edl
i
stt
agsanddi
ff
erentst
yles
AI
M:Tocr
eat
eawebpageusi
ngor
der
edl
i
stt
agsanddi
ff
erentst
yles
DEFI
NITI
ONS:
ORDEREDLI ST:I
tisusedtodi
spl
aythelistofi
temsinaspeci
fi
corder
.Iti
sal
soknownas
numberedli
st.I
tisacontai
nerel
ement.Eachli
stit
em st
art
swith<l
i>t
ag.Bydef
aul
tnumber
(1,
2..
.)sty
lewillbedi
splay
ed.
.
Att
ri
but
es:
Star
t,t
ype,
rev
ersed
Sy
ntax:
<ol
type=”
val
ue”
>
Or
der
edl
i
stt
ypesv
alue-
--
--
-1,
A,a,
I,i
PROGRAM:
<ht
ml>
<head>
<t
it
le>t
ypesofor
der
edandunor
der
edl
i
st</
ti
tl
e>
</
head>
<bodyBGCOLOR="
ORANGE"
>
<h2>or
der
edl
i
st-t
ype:
1,A,
a,
I,
i</
h2>
Number
edl
i
st
<OLTYPE="
1">
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL>
Number
edl
i
stst
art
ingf
rom 9t
hnumber

<OLTYPE="
1"st
art
="9"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL>
LETTERLI
ST
Page9
<OLTYPE="
A">
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL>
LOWERCASELETTERSSTARTI
NGFROM 3r
dlet
ter
<OLt
ype="
a"st
art
="3"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL>
ROMANNUMERALS
<OLt
ype="
I"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL>
LOWERCASEROMANNUMBERLI
STSTARTI
NGFROM 5t
hnumber
<OLt
ype="
i"st
art
="5"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
OL> 
</
body
>
</
html
>
Page10
OUTPUT:
Page11
UNORDEREDLI
ST(
TYPEATTRI
BUTE)&DEFI
NITI
ONLI
ST
LAB4:
Creat
eawebpageusi
ngunor
der
edl
i
standdef
ini
ti
onl
i
st
AI
M:Tocr
eat
eawebpageusi
ngunor
der
edl
i
standdef
ini
ti
onl
i
st
DEFI
NITI
ONS:
UNORDEREDLI
ST:
Theunorder
edl
isti
susedwhent heit
emsarenottobedispl
ayedinanypart
icul
arorder.I
tis
al
soknownasunnumber edl
i
st.i
tisacont
ainerel
ement..Eachl
isti
tem st
artswit
h<li>tag.
Bydefaul
tdi
scstyl
ewil
lbedispl
ayed.
At
tri
but
es:
type
Sy
ntax:
<ul
type=”
val
ue”
>
Unor
der
edl
i
stt
ypesv
alue -
--di
sc,
squar
e,andci
rcl
e.
DEFI
NITI
ONLI
ST:
Thi
sisali
stofi
tems,
withadescri
pti
onofeachi
tem.DLarei
ndentedlistwi
thoutanybul
l
et
symbol
oranynumberinfr
ontofeachit
em.Tagsusedindef
ini
ti
onlistare:
DL,DD, DT
SYNTAX:
<DL>Openi
ngt
agt
hatdef
inest
hest
artoft
hel
i
st
<DT>l
i
sti
tem t
hatdef
inest
hedef
ini
ti
ont
erm
<DD>Def
ini
ti
onoft
hel
i
sti
tem
</
DL>cl
osi
ngt
agt
hatdef
inest
heendoft
hel
i
st
PROGRAM:
<Ht
ml>
<Head>
<Ti
tl
e>unor
der
edl
i
st</
ti
tl
e>
</
head>
<bodyBGCOLOR="
ORANGE"
>
<h2>UNORDEREDLI
ST -TYPE:
DISC,
SQUARE,
CIRCLE</
h2>
Page12
DI
SC
<ULt
ype="
DISC"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
UL>
SQUARE
<ULt
ype="
SQUARE"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
UL>
CI
RCLE
<ULt
ype="
CIRCLE"
>
<LI
>COMPUTERAPPLI
CATI
ONS</
LI>
<LI
>COMPUTERSCI
ENCE</
LI></
UL>
<h2>DEFI
NITI
ONLI
ST</
h2>
<DL>
<DT>HTML</
DT>
<DD>Hy
perTextMar
k-upLanguage</
DD>
<DT>XML</
DT>
<DD>Ext
ensi
bleMar
k-upLanguage</
DD>
</
DL>
</
body
>
</
html
>
Page13
OUTPUT:
Page14
NESTEDLI
ST
LAB5:
Creat
eawebpageusi
ngnest
edl
i
st
AI
M:Tocr
eat
eawebpageusi
ngnest
edl
i
st
DEFI
NITI
ONS:
NESTEDLI
ST:
Al i
stcr
eatedwit
hinali
sti
scal
ledanestedl
i
st.Order
edandunorder
edl
i
stcan
benest
edwi t
hineachothert
oform amul
ti
lev
ell
i
st.Tocreat
eanestedl
ist
,addanewli
st
wit
hinali
st.
PROGRAM:
<ht
ml>
<head>
<t
it
le>nest
edl
i
st</
ti
tl
e>
</
head>
<bodybgcol
or="
pink"
>
<cent
er><h1>NESTEDLI
ST</
h1></
cent
er>
<h1>Someofmyf
avour
it
eli
nks</
h1>
<H2>
<ol
>
<l
i
>Soci
alnet
wor
king</
li
>
<ul
type="
squar
e">
<l
i
>Facebook</
li
>
<l
i
>Twi
tt
er</
li
></
ul>
<l
i
>ref
erence</
li
>
<ul
type="
cir
cle"
>
<l
i
>Googl
e</
li
>
<l
i
>Wi
ki
pedi
a</
li
>
</
ul>
Page15
<l
i
>Webdev
elopment
</l
i
>
<ul
type="
disc"
>
<l
i
>XHTML/
CSS</
li
>
<ol
type="
i"
>
<l
i
>W3school
s</
li
>
<l
i
>Ht
mlhel
p</
li
></
ol>
<l
i
>Pr
ogr
ammi
ng</
li
>
<ol
type="
a">
<l
i
>Jav
ascr
ipt
</l
i
>
<l
i
>PHP</
li
>
</
ol>
</
ul>
</
ol></
H2>
</
body
>
</
html
>
Page16
OUTPUT:
Page17
I
NSERTI
NGI
MAGESUSI
NGABSOLUTEANDRELATI
VEURL
LAB6:
Inser
tani
mageusi
ngabsol
uteandr
elat
iveURL
AI
M:ToI
nser
tani
mageusi
ngabsol
uteandr
elat
iveURL
DEFI
NITI
ONS:
ABSOLUTEURL:
Anabsolut
eURLisaful
lpat
htoanimage.i
ftheht
mlfi
leandimagearepl
acedi
ndiff
erent
fol
dert
henincodi
ngdef
ini
ngthef
ullpat
hofanimagehastobedefi
nedasthev
alueofsrc
att
ri
but
e.
Ex:
<imgsr
c=”C:
\User
s\my
fil
es\
fol
der
1\l
ap.
jpg”
>
RELATI
VEURL:
Arelati
veURLi
sapatht oanimager elat
ivet
ot hecurrentlocat
ion.I
ftheht
mlfi
leandimage
areplacedi
nsamefolderthenincodingdefi
ningthef ull
pathofanimageisnotnecessar
y.
Thuswehav et
ojustwrit
eani magenamewi t
hex tensionasthev al
ueofsr
catt
ribut
e.
Ex:
<imgsr
c=”l
ap.
j
pg”
>
PROGRAM:
<Ht
ml>
<Head>
<Ti
tl
e>i
nser
ti
ngi
magesusi
ngabsol
uteandr
elat
iveur
l</
ti
tl
e>
</
head>
<bodybgcol
or="
yel
l
ow"
><H4>
<cent
er><f
ontcol
or="
mar
oon"
><H3>ABSOLUTEURL</
H3></
CENTER> 
Anabsol
uteURLi
saf
ull
pat
htoani
mage.
i
fthehtmlf
il
eandimagearepl
acedi
ndi
ff
erentf
olderthenincodi
ngdef
ini
ngt
hef
ull
pat
hof
animagehastobedef
inedast
heval
ueofsrcat
tri
bute.
 

Page18
<cent
er><f
ontcol
or="
mar
oon"
><H3>RELATI
VEURL</
H3></
CENTER> 
Ar
elat
iveURLi
sapat
htoani
mager
elat
ivet
othecur
rentl
ocat
ion.
I
ftheht
mlfi
leandimagear
epl
acedi
nsamef
oldert
heni
ncodi
ngdef
ini
ngt
hef
ull
pat
hofan
i
mageisnotnecessar
y.
Thuswehavetojustwr
it
eani
magenamewi
thext
ensi
onast
hev
alueofsr
c
at
tri
but
e 

</
H4>
</
body
>
</
html
>
Page19
OUTPUT:
Page20
I
NSERTI
NGI
MAGESUSI
NGALI
GNMENTATTRI
BUTE(
INLI
NEANDFLOATI
NG)
LAB7:
Inser
tani
magei
nawebpageusi
ngal
i
gnmentat
tri
but
e(i
nli
neandf
loat
ingal
i
gnment
)
AI
M:Toinser
tani
magei
nawebpageusi
ngal
i
gnmentat
tri
but
e(i
nli
neandf
loat
ing
al
i
gnment)
DEFI
NITI
ONS:
ALIGNMENT: I
tisusedt
osett
heposi
ti
onofani
magei
nawebpageaccor
dingt
otheuser
’s
requi
rement
s.
I
NLI
NEIMAGE:Ani
maget
hati
sdi
spl
ayedi
nthesamel
i
neoft
het
exti
scal
l
edani
nli
ne
i
mage.
FLOATINGIMAGE: Fl
oati
ngimagesmaket hetextt
owr
aparoundthei
mage.I
magecan
eit
herbelef
tal
ignedorri
ghtal
igned.Theparagr
aphwi
l
lfl
owaroundthei
mageforsev
eral
l
inesift
heimageislar
ge.
PROGRAM:
<Ht
ml>
<Head>
<t
it
le>i
nser
timagesusi
ngf
loatandi
nli
ne</
ti
tl
e>
</
head>
<bodybgcol
or="
sky
blue"
>
<h4>
<cent
er><f
ontcol
or="
red"
>ALI
GNI
NGI
NLI
NEI
MAGES</
cent
er> 
I
nli
neimagesareplacedint
hemiddl
eoftheli
neoft
ext
.Wecanal
i
gni
nli
nei
magesi
nthr
ee
di
ff
erentst
yles:
top,bot
tom,mi
ddle.
 
TOPALIGNMENT<imgsrc="
lap.j
pg"height
="60"width="
70"ali
gn="t
op"
>ital
i
gnsthetopof
animagewitht
hetopedgeofthetal
lestit
em inthetext
li
ne.i
fther
earenootheri
magesin
thecur
rentl
i
ne,t
henthei
magei sali
gnedtot opofthetext
. 
MI
DDLEALIGNMENT<imgsr
c="l
ap.
jpg"hei
ght
="60"widt
h="70"al
i
gn="
middl
e">i
tal
i
gnst
he
mi
ddl
eoftheimagewi
thmi
ddleoft
helineoft
ext 
BOTTOM ALIGNMENTital
i
gns
thebot
tom oft
hei
magewit
hbott
om oft
heli
neoftext 
Page21
<Cent
er><f
ontcol
or="
red"
>ALI
GNI
NGFLOATI
NGI
MAGES</
cent
er> 
Fl
oati
ngimagesmaket hetextt
owr apar
oundthei
mage.I
magecaneitherbel
eftal
i
gnedor
ri
ghtal
igned.Thepar
agraphwil
lfl
owaroundthei
mageforsev
eral
li
nesifthei
mageis
l
arge.
 
LEFTALIGNMENTi
twi
l
lplacet
he
i
mageagai nstthelef
tmar
gin.Imagef l
oatstotheleftside.Textwrapstot
heri
ght
si
de. 
RI
GHTALIGNMENT<imgsr
c="lap.
jpg"hei
ght="60"wi
dth="
70"ali
gn="
ri
ght
">i
twi
l
lplacethe
i
mageagai
nstt
her
ightmar
gin.Imagefloat
st otheri
ghtsi
de.Textwr
apstot
hel
eftside.
</
h4></
body
>
</
html
>
Page22
Out
put
:
Page23
LOGI
NFORM
LAB8:
creat
eal
ogi
nwebpageusi
nght
mlf
rom obj
ect
s
AI
M:Tocr
eat
eal
ogi
nwebpageusi
nght
mlf
rom obj
ect
s
PROGRAM:
<!DOCTYPEht
ml>
<Ht
ml>
<Head>
<Ti
tl
e>Logi
nfor
m </
ti
tl
e>
</
head>
<bodybgcol
or="
pink"
>
<f
orm act
ion="
logi
n"met
hod="
post
">
<Cent
er><h2>Logi
nFor
m</
h2></
cent
er>

User
name:
 

Password:
 

&nb
sp;


</
for
m>
</
body
>
</
html
>
Page24
Out
put
:
Page25
REGI
STRATI
ONFORM
LAB9:
Creat
eregi
str
ati
onwebpageusi
ngt
heht
mlf
orm obj
ect
s
AI
M:ToCr
eat
eregi
str
ati
onwebpageusi
ngt
heht
mlf
orm obj
ect
s
PROGRAM:
<Ht
ml>
<head>
<t
it
le>
Regi
str
ati
onPage
</
ti
tl
e>
</
head>
<bodybgcol
or="
Light
sky
blue"
>
<cent
er><H1>REGI
STRATI
ONFORM</
H1></
CENTER>
<f
orm>
<l
abel
>Fi
rst
name</
label
>
 
<l
abel
>Mi
ddl
ename:
</l
abel
>
 
<Label
>Last
name:
</l
abel
>
 
<Label
>st
ate:
</
label
>
Page26
<Sel
ect
>
<opt
ionv
alue="
stat
e">st
ate</
opt
ion>
<opt
ionv
alue="
AP"
>AP</
opt
ion>
<opt
ionv
alue="
tami
l
nadu"
>tami
l
nadu</
opt
ion>
<opt
ionv
alue="
kar
nat
aka"
>kar
nat
aka</
opt
ion>
<opt
ionv
alue="
tel
angana"
>tel
angana</
opt
ion>
<opt
ionv
alue="
ker
ala"
>ker
ala</
opt
ion>
</
sel
ect
> 
<Label
>
Cour
se:
</
label
>
<sel
ectsi
ze="
3">
<opt
ionv
alue="
BCA"
>BCA</
opt
ion>
<opt
ionv
alue="
BBA"
>BBA</
opt
ion>
<opt
ionv
alue="
B.Tech"
>B.
Tech</
opt
ion>
<opt
ionv
alue="
MBA"
>MBA</
opt
ion>
<opt
ionv
alue="
MCA"
>MCA</
opt
ion>
<opt
ionv
alue="
M.Tech"
>M.
Tech</
opt
ion>
</
sel
ect
>
 
<l
abel
>
Gender
:
</
label
> 
Mal
e 
Femal
e 
 
Page27
<l
abel
>
Phone:
</
label
>

 
Addr
ess
 
<t
ext
areacol
s="
50"r
ows="
3"v
alue="
addr
ess"
>
</
text
area>
 
Emai
l
:
 
 
Passwor
d:
 
 


</
for
m>
</
body
>
</
html
>
Page28
Out
put
:

Class10 Labs 2021-22

Uploaded by

Document Information

Original Description:

Original Title

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

Class10 Labs 2021-22

Uploaded by

Copyright:

Available Formats

Page1

You might also like