22PLC15A/22PLC25A

Model Question Paper-I/II

I/II with effect from 2022-23
2022 23 (CBCS Scheme)
USN

First/Second Semester B.E. Degree Examination

Introduction to Web Programming
TIME: 03 Hours Max. Marks: 100

Note: 01. Answer any FIVE full questions, choosing at least ONE question from each MODULE.

*Bloom’s
Module -1 Taxonomy Marks
Level
Q.01 a List and explain most common elements used in (X)HTML documents L1,L2 08Marks
b What do mean by Document Type Definition (DTD). Write the basic structure L1,L3 08Marks
(X)HTML documents derived from the specifications.
c Name the rendering modes of Modern Web browsers. How browser typically L3 04Marks
chooses in which mode to parse a document?
docum
OR
Q.02 a List and demonstrate the rules of (X)HTML. L1,L3 10Marks
b Differentiate between Logical versus physical markup. L4 04Marks
c Discuss the any three Myths and Misconceptions About HTML and XHTML. L3 06Marks
Module
Module-2
Q. 03 a Why few HTML4 Elements Removed from HTML5? Give the Removed L2 10Marks
HTML Elements list and also CSS alternatives
b Write the snippet of code to demonstrate the following semantic inline elements L3,L5 06Marks
(i) Indicating Dates and Time (ii) Inserting Figures
c Comment on the internationalization supporting changes in the HTML5 L1 04Marks
specification.
OR
Q.04 a How HTML5 perform the Drawing and Styling Lines and Shapes? Explain L1,L3 10Marks
with an example to draw few different shapes with fills and styles.
b What is the use of command Element and its attributes in HTML5. Explain with L1,L3 06Marks
the help of code snippet.
c Mention the rules to remember while mappings between markup and script. L1 04Marks
Module
Module-3
Q. 05 a Briefly explain CSS Syntax and Style. L3 06Marks
b Suppose you want to apply CSS to text that doesn’t coincide with any of the L2 10Marks
HTML5 elements. What should you do? Give an illustrative example.
c What are the different methods used specify the RGB Values for Color explain L3 04Marks
any one of them.
OR
Q. 06 a Discuss font-style, font-variant,
variant, font-weight
font properties of CSS. L2 10Marks
b Expalin Text-align, text-decoration,
decoration, text-transform,
text and text-indent properties L3 10Marks
of CSS.
Module
Module-4
Q. 07 a Give the code to create a webpage with the output as shown below. L5 08Marks
 22PLC15A/22PLC25A
b Explain different href attribute values and their jumping effects L3 08Marks
c Mention and briefly describe the Common formats for web page bitmap image L1,L3 04Marks
files.
OR
Q. 08 a What is the need of Responsive web design (RWD)? Explain resolution- L1,L2,L3 10Marks
switching with an example.
b Illustrate the situation in which webpage designer thiks of CSS rule uses the L3,L5 08Mraks
float property and a value of left or right.Justify how the propety and values are
useful in such situations
c What is browsing context? Name the element used to create it. L1 02Marks
Module-5
Q. 09 a What is a function in Java JavaScript? Explain syntax for a function definition L3 06Marks
with an example.
b List Some of the more popular controls and the elements used to L2,L5
implement them.
c Write a Java Script program that on clicking a button, displays scrolling L5 08Marks
text which moves from left to right with a small delay.
OR
Q. 10 a Explain text control attributes. L2 05Marks
b Write a note on reset and focus Methods L2,L3 03Mark
c Create a webpage containing 3 overlapping images using HTML, CSS L5 12Marks
and JS. Further when the mouse is over any image, it should be on the
top and fully displayed.
*Bloom’s Taxonomy Level: Indicate as L1, L2, L3, L4, etc. It is also desirable to indicate the COs and POs to be
attained by every bit of questions.

Page 02 of 02
 22PLC15A
Model Question Paper-I/II with effect from 2022-23 (CBCS Scheme)
USN

First/Second Semester B.E. Degree Examination

Introduction to Web programming
TIME: 03 Hours Max. Marks: 100

Note: Answer any FIVE full questions, choosing at least ONE question from each MODULE.

*Bloom’s
Module -1 Taxonomy Marks
Level
Q.01 a Explain (X)HTML document structure with example. L-2 6
b Explain the rules of (X)HTML. L-2 8
c Explain the following tags with example: i) <p> ii) <img> iii) <br> L-2 6
OR
Q.02 a Discuss the (X)HTML tags supported in document head. L-2 8
b Construct a parse tree of elements allowed in the document body. L-2 6
c Write an XHTML program to get the following output L-2 6

Module-2
Q. 03 a Explain different semantics elements in HTML5 with example. L-2 5
b Explain the following tags i)audio ii)video L-2 5
c Create an HTML5 form for the following output L-6 10

OR
Q.04 a Briefly explain client side graphics with <canvas> L-6 10
b Explain Emerging elements & attributes to support web applications. L-2 5

Page 01 of 02
 22PLC15A
c Write a note on iframe element in HTML5 . L-2 5
Module-3
Q. 05 a Explain the different levels of Style Sheets are available in Cascading Style L-2 6
Sheets.
b With an example, Explain various Selector Forms . L-2 8
c Explain span and div elements with an example. L-2 6
OR
Q. 06 a With a example, Explain BOX, padding and margin properties in CSS L-2 8
b Explain different types of Text properties available in CSS. L-2 6
c Explain various Color Properties used in style sheets L-2 6
Module-4
Q. 07 a Create a HTML5 document for the following screenshot. L-6 8

b Explain how a responsive web page’s layout can display differently on different L-2 6
platform.
c With an example explain how to link a Specified Location Within a Different L-2 6
Web Page in HTML5
OR
Q. 08 a Create a HTML5 document for the following screenshot. L-6 8

b Explain how images are inserted in html document with an example. L-2 6
c Write a note on Shortcut Icons and iframe Element with example. L-2 6
Module-5
Q. 09 a Develop a JavaScript program to print Hello World message using Function. L-6 6
b Explain how forms are processed in Client side and server side L-2 6
c Explain how to Access a Form’s Control Values with an example.
OR
Q. 10 a Write a note on :Document Object Model L-2 6
b Develop a JavaScript code that displays text “HTML5” with increasing font size L-6 8
in the interval of 100ms in RED COLOR, when the font size reaches 50pt it
displays “HTML” in BLUE color. Then the font size decreases to 5pt.
c Explain popular controls and the elements of forms used JavaScript L-2 6

Page 02 of 02
 22PLC15A
*Bloom’s Taxonomy Level: Indicate as L1, L2, L3, L4, etc. It is also desirable to indicate the COs and POs to be
attained by every bit of questions.

Page 03 of 02
 lOMoARcPSD|54061249

WP MOST Important Questions Answers AND Solved Model

Question Paper
Intoduction to Web programming (Visvesvaraya Technological University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Samarth Rohit ([email protected])
 lOMoARcPSD|54061249

1a.Expl
ain(
X)HTMLdocumentst
ruct
urewi
thexampl
e.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

ExampleExplained
• The<!DOCTYPEht ml>decl arat
iondefinesthatt
hisdocumenti sanHTML5document
• The<ht ml>el ementisther ootelementofanHTMLpage
• The<head>el ementcont ainsmet ainformati
onabouttheHTMLpage
• The<titl
e>el ementspeci f
iesat it
lefortheHTMLpage( whichi
sshowni nthe
browser'stitl
ebarorint hepage' stab)
• The<body >elementdefinest hedocument 'sbody,andisacontainerforallt
hev
isi
ble
contents,suchasheadi ngs, paragraphs,i
mages,hy per
li
nks,t
ables,l
ists,
etc.
• The<h1>el ementdefinesal argeheadi ng
*The<p>el ementdef i
nesapar agraph

1b.Expl
aint
her
ulesof(
X)HTML.

1.HTMLI sNotCaseSensi t
ive,XHTMLI sCaseSensit
ive.
2.Attr
ibuteValuesMayBeCaseSensi ti
ve:
3.(X)HTMLI sSensiti
vetoaSi ngleWhi t
espaceCharacter
4.(X)HTMLFol l
owsaCont entModel
5.Element sShouldHaveCloseTagsUnl essEmpty
6.UnusedEl ementsMayMi ni
mi ze
7.Element sShouldNest
8.Attr
ibutesShouldBeQuot ed
9.Entit
iesShouldBeUsedf orSpeci al
Char act
ers
10.Browser sIgnor
eUnknownAt t
ri
butesandElements
With2-3linesofexplanat
ionforeachpoi nt.

1c.Expl
aint
hef
oll
owi
ngt
agswi
thexampl
e:i
)<p>i
i
)<i
mg>i
i
i)<br
>

*The<p>el
ementdefi
nesapar
agr
aph
<p>Wel
cometotheworl
dofHTML</p>
Welcometotheworl
dofHTML

*<br
>tagi
susedt
oinser
tasi
ngl
eli
nebr
eak,
itdoesn’
trequi
reendt
agi
nHTML.

*The<img>tagisusedt oembedani mageinanHTMLpage.Imagesar

enott
echni
cal
l
yinser
tedi
ntoawebpa
pages.The<i
mg>t agcreatesahol
dingspacefort
her
efer
encedimage.
<i
mgsr c=r
obot.
gifhei
ght=10widt
h=10alt=r
obot>

2a.Di
scusst
he(
X)HTMLt
agssuppor
tedi
ndocumenthead.

Thef
oll
owi
ngel
ement
sar
esuppor
tedi
nsi
det
he<head>el
ement
:
 <ti
tl
e>
Iti
srequi
redi
nev
eryHTMLdocument
,The<t
it
le>t
agdef
inest
het
it
leoft
hedocument
.Thet
it
le
mustbet
ext
-onl
y,andi
tisshowni
nthebr
owser
'st
it
lebarori
nthepage'
stab
 <styl
e>
The<style>t
agisusedtodefi
nestyl
einf
ormati
on(CSS)f oradocument
.Insi
de
the<st
yle>elementyouspeci
fyhowHTMLel ementsshouldrenderi
nabrowser
 <base>
The<base>tagspecifi
esthebaseURLand/ort
argetforall
rel
ati
veURLsinadocument
.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

The<base>t agmusthav eei t

heranhr eforat argetat t
ributepresent,orbot h.Therecanonl ybe
onesi ngle<base>el ementi nadocument ,andi tmustbei nsidethe<head>el ement.
 <li
nk>
The<l nk>t
i agdef i
nest herelati
onshi pbet weent hecur r
entdocumentandanext ernalresour ce.
The<l nk>t
i agi smostof tenusedt oli
nkt oext ernalstyl
esheet sort oaddaf avi
cont oy our
websi t
e.The<l nk>e
i l
ementi sanempt yelement ,itcontainsattri
butesonl y.
 <met a>
The<met a>t agdef i
nesmet adat aaboutanHTMLdocument .Met adataisdat a(i
nformat i
on)
aboutdat a.<met a>tagsal way sgoi nsidethe<head>el ement ,
andar et y
picall
yusedt ospeci fy
charact erset ,pagedescr i
pti
on, keywor ds,authoroft hedocument ,andv iewportsetti
ngs.
 <script>
The<scr ipt>t agisusedt oembedacl i
ent-sidescript(Jav aScri
pt).The<scri >e
pt l
ementei ther
containsscr ipti
ngst at
ement s,oritpointst oanext ernal scr
iptfi
lethrought hesrcattr
ibut e.
 <noscr ipt>
The<noscr ipt>tagdef i
nesanal t
ernatecont enttobedi splayedtouserst hathavedisabl
edscr i
ptsi
n
thei
rbr owserorhav eabr owsert hatdoesn' tsuppor tscri
pt.The<noscr i
pt>elementcanbeusedi n
both<head>and<body >.

2b.Const
ructapar
set
reeofel
ement
sal
l
owedi
nthedocumentbody
.

2c.Wr
it
eanXHTMLpr
ogr
am t
ogett
hef
oll
owi
ngout
put

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

3a.Expl
aindi
ff
erentsemant
icsel
ement
sinHTML5wi
thexampl
e.

Semanticelementshav e meani
ngf
ulnameswhi ch t
ellsaboutt y
pe ofcontent
.Forexampl e
<header
>,<foot
er>,<t
able>,et
c.HTML5int
roducesmanysemanticelementsasmentionedbelow
whichmaket hecodeeasi ertowri
teandunderst
andforthedev el
operaswellasinstruct
sthe
browseronhow t otreatthem.A semant
icelementclear
lydescri
besitsmeaningtobot hthe
browserandthedevel
oper.

<arti
cle> Def i
nesi ndependent ,sel
f-containedcontent
<aside> Def
inescont entasidef r
om t hepagecont ent
<details> Definesaddi ti
onal detai
lsthatt heusercanv i
eworhide
<fi
gcapt i
on> Def i
nesacapt ionf ora<f i
gure>element
<fi
gur e> Specifiesself-
containedcont ent, l
i
keil
lustrati
ons,
diagrams,
phot
os,
codel
i
sti
ngs,
etc.
<footer> Definesaf ooterforadocumentorsect ion
<header > Speci fi
esaheaderf oradocumentorsect i
on
<mai n> Speci f
iesthemai ncont entofadocument
<mar k> Defi
nesmar ked/highli
ghtedt ext
<nav> Defi
nesnav i
gati
onl i
nks
<section> Def i
nesasect i
oninadocument
<summar y>Def
inesav i
sibl
eheadi ngf ora<det ai
ls>element
<ti
me> Def
inesadat e/t
ime

<art
icle>
<h2>Googl eChrome</
h2>
<p>Googl eChromeisawebbr
owserdevel
opedbyGoogl
e,r
eleasedi
n2008.Chr
omei
sthe
world'
smostpopul arwebbr
owsert
oday!
</p>
</ar
ticle>

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

<!
DOCTYPEht
ml>
<html
>
<body
>

<h2>Per
sonal
Det
ail
s</
h2>

<form>
<labelf
or="
fname" >Name:
<inputt
ype="text
"id="f
name"name="
fname"val
ue=""><br></
label
><br>
<labelf
or="
lname">Password:
<inputt
ype="text
"id="l
name"name="
lname"v
alue=""
></label
><br><br
>
<labelf
or="
fname" >Email
id:
<inputt
ype="text
"id="f
name"name="
fname"val
ue=""><br></
label
><br>

<l
abel >Gender :
Mal e<inputtype="r
adio"value="mal
e"name=" gender"/></label>
<label>Femal e<i
nputtype="radi
o"value="
female"name=" gender"/></
label
><br
><br
>
<label for="
fname">Cont act#:
<i
nputt ype="
text"i
d="fname"name=" f
name"v al
ue=""><br></label
><br>
</form>

<h2>Educat i
onQual if
icati
on</ h2>
<labelfor="fname" >Degree:
<selectname=" l
anguage" >
<optionv al
ue="indian">-Sel ectGroup-</option>
</select></l
abel><br><br >
<l
abel for="f
name" >Engi neering:
<selectname=" l
anguage" >
<optionv al
ue="indian">-Sel ectGroup-</option></sel
ect
>
<br><br>
<label>Hobbi es:
Play i
ngChess<i nputt ype="radio"val
ue="Pl
ay i
ngChess"name=" gender
"/></
label
>
<label>ReadingBooks<i nputt ype="
radi
o"v al
ue=" Readi
ngBooks"name="
gender"
/></label><br><br >

<h2>Addr ess</h2>
<form>
<textareaname=" welcomeMessage"rows="3"col
s="
40"
></
text
area>
</form><br ><br>
<labelfor="
fname" >Att
achResume:
<i
nputt ype="submit"value="
ChooseFi
le"><l
abelfor
="f
name"
>Nofil
echosen:
<br><br>
<i
nputt ype="submit"value="
Submit
">
</body>
</html>

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

4a.Br
ief
lyexpl
aincl
i
entsi
degr
aphi
cswi
th<canv
as>

HTML<canv as>Tag
The<canv as>tagi susedtodrawgraphi
cs,onthefl
y ,v
iascripti
ng( usual
lyJavaScri
pt)
.
Thistagi stransparent,andi
sonlyacontai
nerforgraphics,youmustuseascr iptt
oactual
ly
drawt hegr aphics.Anytexti
nsidet
he<canvas>elementwi ll
bedi splayedinbr
owser swit
h
JavaScriptdisabledandi nbr
owsersthatdonotsuppor t<canvas>.

• Tobeginapat h,
context.
beginPath()i
scal l
edtoresetthepathcol
lect
ion.
Thecont ext.
beginPath();methodbeginsapat h,
orr eset
sthecurr
entpat h.Use
mov eTo(),l
ineTo(),quadri
cCurveTo(),bezi
erCur
v eTo(),ar
cTo(),
andar c(),to
createpaths.Then,anyvariet
yofshapecal l
scanoccurt oaddasubpat ht othe
coll
ecti
on.

• Context
.moveTo()methodisusedt
osett
hepat
h’sst
art
ingpoi
nt.
Forex:cont
ext.
moveTo(300,
50);

 Cont
ext
.l
ineTo()met
hodi
susedt
oaddal
i
nesegmentt
otheendoft
hepat
h.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

 Onceal lsubpat hsar epr operlyadded, cont ext.closePat h( )canopt ionall

ybecal ledto
closet hel oop.
 Thecr eat eLi near Gradient (
)met hodcr eat esal i
neargr adientobj ect.Thegr adi entcan
beusedt of il
lrect angles, ci
rcles, li
nes,text ,etc.
 Thecr eat eRadi alGradient (
)met hodcr eat esar adial/circulargradientobj ect .
 window.onl oad:
Wecanuset hisf unctiont oper form somet askassoonast hepagef ini
shesl oading.
ThisJav aScr iptf unctioni susedi ndifferentcondi tionl i
kedi splayingapr intpageor
direct i
ngf ocust ouseri nputf ieldassoonast hepagei sl oaded.
 Theget Element ById(
):
Thismet hodr et urnsanel ementwi thaspeci fi
edv alue.Itr etur
nsnul lift
heel ement
doesnotexi st .
 The<canv as>el ementhasamet hodcal l
edget Cont ext(), usedtoobt aint he
render i
ngcont extandi tsdr awi ngfunct i
ons.get Cont ext()takesonepar amet er,the
typeofcont ext .
 Drawi ngAr csandCur ves
Drawi ngoncanv asispossi bl ebyusi ngar c(),arcTo( ),quadr ati
cCur veTo(), and
bezi erCur veTo( ).
 Scal ing, Rot ating, andTr ansl atingDr awings:
Thecanv asAPIpr ov
idesanumberofusef ulmet hodst hataccompl i
sht hecommon
tasks.Fi rstl et’sexpl oret hescal e(x,
y)funct i
on,whi chcanbeusedt oscal eobj ects.
Thexpar amet ershowshow mucht oscal ei nt hehor izontaldi r
ecti
onandt hey
par amet erindi cat eshowmucht oscal ev ertically.

4b.Expl
ainEmer
gingel
ement
s&at
tri
but
est
osuppor
twebappl
i
cat
ions.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

4c.Wr
it
eanot
eoni
fr
ameel
ementi
nHTML5

The<ifame>t
r agspecifi
esani nli
nef r
ame.Ani nli
neframeisusedt oembedanot herdocument
withi
nt hecur r
entHTMLdocument .HTML5cont i
nuestosupport<ifr
ame>;infact,i
tnotonly
supportsitbutextendsthetag.
HTML5pr oposestwonewat t
ributesfortheif
rameelement:seamlessandsandbox.The
seamlessat t
ribut
eeffecti
vel
yr enderstheifr
ameasani nl
i
nei ncl
ude,whichal
l
owst heparent
document ’
sCSSt oaf f
ectthecont entsoftheif
rame:

<i
framesr c="
content.html"name=" thisframe"wi dth="200"
height
="300"seaml ess">[al
ternatecontent ]
</ifr
ame>
Hereisthesameexampl eusingXHTMLst ylesyntax:
<i
framesr c="
content.htm"name=" thi
sframe"wi dth=" 200"
height
="300"seaml ess="seaml ess">[
alternatecont ent]</i
fr
ame>
Thesandboxat tr
ibute“sandboxes”t heiframe, essentiallypr
event
ingitf
rom pul
li
ngincontent
fr
om anysour ceotherthant heiframei t
self.Usedwi thoutat t
ri
but
es,sandboxhasthefol
lowing
eff
ectsont heif
rame:

•Newwi ndowscannotbecr eatedfrom wi thi

ntheif
rame.
•Plug-
insareprohibi
ted;embed, object,andappletwil
lnotf
unct
ionin
asandboxedif r
ame.
•Nestedinl
ineframesar eprohibi
ted.
•Acompl et
elysandboxedi fr
amei sconsi dered,i
nessence,
anewsubdomai nont
hecl
i
entsi
de.
AccesstoJav aScr
iptisnotallowed; cookiescan’
tbereadorwri
tten.
•Acompl et
elysandboxedi nl
ineframecannotsubmi tfor
msorrunscript
s.

5a.Expl
aint
hedi
ff
erentl
evel
sofSt
yleSheet
sar
eav
ail
abl
einCascadi
ngSt
yleSheet
s.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

CSScanbeaddedt
oHTMLdocument
sin3way
s:

• I
nli
ne-byusingthest
yleatt
ri
buteinsi
deHTMLel ements
• I
nter
nal-byusinga<st
yle>elementinthe<head>secti
on
• Ext
ernal
-byusinga<li
nk>elementtoli
nkt oanexter
nalCSSf
il
e

Themostcommonwayt
oaddCSS,
ist
okeept
hest
ylesi
next
ernal
CSSf
il
es.

I
nli
neCSS:

Aninl
ineCSSisusedt
oappl
yauni
questy
let
oasi
ngl
eHTMLel
ement
.Ituses
thest
yleat
tr
ibut
eofanHTMLel
ement.

Ext
ernalCSS:

Anext
ernal
sty
lesheeti
susedt
odef
inet
hest
ylef
ormanyHTMLpages.

Touseanext
ernal
sty
lesheet
,addal
i
nkt
oiti
nthe<head>sect
ionofeachHTMLpage:

I
nter
nalCSS:

Aninter
nalCSSisusedtodef
ineast
ylef
orasingl
eHTMLpage.I
tisdef
inedi
n
the<head>sect
ionofanHTMLpage,wit
hina<sty
le>el
ement
.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

5b.Wi
thanexampl
e,Expl
ainv
ari
ousSel
ect
orFor
ms

ACSSsel
ectorselectstheHTMLel ement(s)wewanttostyl
e.Theyar eusedto"fi
nd"(orsel
ect
)the
HTMLel
ement swewantt osty l
e.
Wecandi
videCSSsel ectorsintof i
vecategori
es:
• Simpleselectors(selectelement sbasedonname, i
d,class)
• Combi nat
orsel ector
s( selectelementsbasedonaspeci f
icrel
ati
onshipbetweenthem)
• Pseudo-classselectors( sel
ectelementsbasedonacer tai
nstate)
• Pseudo-element sselectors( sel
ectandstyl
eapartofanel ement)
 Attr
ibuteselectors(selectelementsbasedonanat tr
ibuteorattr
ibut
ev al
ue)

TheCSSelementSel
ect
or
Theel
ementsel
ect
orsel
ect
sHTMLel
ement
sbasedont
heel
ementname.

TheCSSidSelect
or
Thei
dselect
orusestheidatt
ri
buteofanHTMLelementtoselectaspeci
fi
celement.
Thei
dofanelementisuniquewit
hinapage,sot
heidsel
ectorisusedtosel
ectoneuniqueelement
!
Tosel
ectanelementwit
haspecifi
cid,wr
it
eahash(#)char
act er
,fol
l
owedbyt hei
doft heel
ement.

TheCSSclassSelect
or
Thecl
assselect
orselect
sHTMLel ementswi
thaspeci
fi
cclassatt
ri
bute.
Tosel
ectelementswithaspeci
fi
cclass,
wri
teaper
iod(.
)charact
er,f
oll
owedbyt
hecl
assname.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

TheCSSUniv
ersalSelector
Theuni
ver
salsel
ector(*)sel
ect
sal
lHTMLel
ement
sont
hepage.

TheCSSGr oupingSelect
or
Thegroupi
ngsel ect
orselect
sal
ltheHTMLelement
swiththesamestyl
edef
init
ions.
Lookatthefol
lowingCSScode(theh1,h2,
andpelementshavethesamest
yledefini
ti
ons)
:

5c.Expl
ainspananddi
vel
ement
swi
thanexampl
e.

spananddi
vEl
ement
s

Thedivandspanelementsar
egener i
celementsint
hattheydon’
tprov
ideanyspecialmeaning
whenthey’r
eusedbythemsel
ves.Theyar esi
mplypl
aceholder
stowhichCSSisappl i
ed.Thi
nk
ofdi
vandspanasv anil
l
aicecream andCSSast hevari
oustoppi
ngsyoucanaddt otheice
cr
eam, suchaschocol
atechi
ps,mintfl
avori
ng,andOreos.Yummm!

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

6a.Wi
thexampl
es,
Expl
ainBOX,
paddi
ngandmar
ginpr
oper
ti
esi
nCSS

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

I
nFigur
egivenabove,thedashedli
nesindi
catetheper
imet
ersoft hemarginandpaddingareas.
Whenawebpagei sdispl
ayed,onl
ythebordercanbemadev i
sibl
e;thedashedl
inesshowninthe
f
igur
eareonl
yfori
ll
ustr
ati
onpurposes..

paddi
ngandmar
ginPr
oper
ti
es:

Thepaddi
ngpropert
yspecifi
esthewidthoft
heareaont heinteri
orofanelement’
sborder,whereas
themargi
npr
opertyspecif
iesthewidt
hoftheareaontheext eri
orofanelement’
sborder.Here’
san
exampl
eCSSrulethatusespaddingandmargi
nproper
ties:

.
label
{bor
der
:sol
i
d;paddi
ng:
20px;
mar
gin:
20px;
}

Justlikeborder-
widt
hproperty,wecanspeci fydiff
erentpaddingwi dt
hsfort hef
ourdif
ferentsi
des.
Wecanusemul ti
plevalueswi t
honepaddi ngpr opert
y.Orwecanusesepar atepaddi ngside
properti
es—padding-t
op,paddi
ng-right
,padding-bott
om,andpaddi ng-
lef
t.Likewi
se,wecanspeci fy
di
fferentmar gi
nwidthsforthefourdiffer
entsides.—mar gi
n-top,margi
n-r
ight,margi
n-bott
om,and
mar gi
n-l
eft
.

The margi
n and padding pr
oper
ti
esall
ow negat
iveval
ues.Whil
e a posit
iveval
ue f
orcest
wo
el
ementstobesepar at
edbyaspecifi
edamount,anegat
ivev
aluecausestwoelement
stoover
lap
byaspecif
iedamount.

6b.Expl
aindi
ff
erentt
ypesofTextpr
oper
ti
esav
ail
abl
einCSS.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

6c.Expl
ainv
ari
ousCol
orPr
oper
ti
esusedi
nst
ylesheet
s

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

7a.Cr
eat
eaHTML5documentf
ort
hef
oll
owi
ngscr
eenshot
.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

7b.Expl
ainhowar
esponsi
vewebpage’
slay
outcandi
spl
aydi
ff
erent
lyondi
ff
erentpl
atf
orm.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

7c.Wi
thanexampl
eexpl
ainhowt
oli
nkaSpeci
fi
edLocat
ionWi
thi
naDi
ff
erentWebPagei
nHTML5.

Usi
nganabsol
uteURL,
iti
spossi
blet
oli
nkaspeci
fi
edl
ocat
ionwi
thi
nadi
ff
erentwebpage.

8a.Cr
eat
eaHTML5documentf
ort
hef
oll
owi
ngscr
eenshot
.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

8b.Expl
ainhowi
magesar
einser
tedi
nht
mldocumentwi
thanexampl
e.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

8c.Wr
it
eanot
eonShor
tcutI
consandi
fr
ameEl
ementwi
thexampl
e.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

9a.Dev
elopaJav
aScr
iptpr
ogr
am t
opr
intHel
l
oWor
ldmessageusi
ngFunct
ion.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

9b.Expl
ainhowf
ormsar
epr
ocessedi
nCl
i
entsi
deandser
versi
de

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

9c.Expl
ainhowt
oAccessaFor
m’sCont
rol
Val
ueswi
thanexampl
e.

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

10a.Wr
it
eanot
eon:
DocumentObj
ectModel

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

10b.Devel
opaJav
aScr
iptcodet
hatdi
spl
ayst
ext“
HTML5”wi
thi
ncr
easi
ngf
ontsi
zei
nthei
nter
val
of100msinREDCOLOR,whent
hef
ontsi
zer
eaches50pti
tdi
spl
ays“
HTML”i
nBLUEcol
or.Thent
he
fontsi
zedecr
easest
o5pt
.

<html >
<body >
<pi d=" demo" >
</p>
<scr ipt>
varv ar 1=set Int
erval(i
nTimer,
1000);
varsi ze=5;
vari ds=document .getElementByI
d("
demo"
);
funct ioni nTi
mer ()
{
i
ds. i
nner HTML=' HTML5' ;
i
ds. set Attri
bute(
'styl
e',
"font
-si
ze:"
+si
ze+"
px:
color
:bl
ue"
);
size+=5;
i
f(size>=) {
clear Interval
(var
1);
}
}
</scr ipt>
</body >
</html >

10c.Expl
ainpopul
arcont
rol
sandt
heel
ement
soff
ormsusedJav
aScr
ipt

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])

 lOMoARcPSD|54061249

Downloaded by Samarth Rohit ([email protected])