A

TRAI
NINGREPROTON

HTMLFUNDAMENTAL(
WEBDEVELOPMENT)

Submi
tt
edby
MANDARRAMKRUSHNAMARATHE
Rol
lNo.10303320181137210041

Undert
het
rai
ningof

Sol
olear
n

Depar
tmentofEl
ect
roni
cs&Tel
ecommuni
cat
ionEngi
neer
ing
Dr
.BabasahebAmbedkarTechnologi
calUni
ver
sit
y,Loner
e
Lonere-402103

2020-
2021
 A

TRAI
NINGREPORTON

HTMLFUNDAMENTAL

Submit
tedby
MANDARRAMKRUSHNAMARATHE
Rol
lNo.
10303320181737210041

Undert
het
rai
ningof

Sol
olear
n

I
nthepar
ti
alf
ulf
il
lmentofB.Tech.i
nEl
ect
roni
cs&Tel
ecommuni
cat
ion
Engi
neer
ingcour
seofDr
.BabasahebAmbedkarTechnol
ogi
caluni
ver
sit
y,
Loner
e(Di
st.Rai
gad)i
ntheacademi
cyear
2020-
2021

Depar
tmentofEl
ect
roni
cs&Tel
ecommuni
cat
ionEngi
neer
ing
Dr
.BabasahebAmbedkarTechnologi
calUni
ver
sit
y,Loner
e
Lonere-402103

1
Cer
ti
fi
cat
e

2
Acknowl
edgement
Thi
swor
kisj
ustnotani
ndi
vi
dualcont
ri
but
iont
il
lit
scompl
eti
on.Wet
aket
hisoppor
tuni
tyt
oexpr
ess
adeepgr
ati
tudet dss
owar ol
oler
nforpr
ovi
dingexcel
l
entgui
danceencour
agementandi
nspi
rat
ion
t
hroughoutt
heTr
aini
ngwor
k.Wi
thoutheri
nval
uabl
egui
dance,t
hiswor
kwoul
dnev
erhav
ebeena
successf
ulone.
Wewi
sht
oexpr
essmysi
ncer
ethankst
otheal
ldepar
tmentf
acul
ti
esandst
affmember
sfort
hei
r
suppor
t.Iwoul
d al
so l
i
ket
othankal
lmycl
assmat
esf
ort
hei
rval
uabl
egui
danceand hel
pful
di
scussi
on.I
twasanamaz
ingexper
iencewor
kingi
nthei
ndust
ryandIwoul
donceagai
nwi
sht
oal
l
t
hepeopl
erel
atedt
oitmaki
ngt
het
askwor
thwhi
l
eandsomuchf
un.

MANDARMARATHE
10303320181137210041

3
 Chapt
ers

1.INTRODUCTI
ON
1.1Whati
swebdev
elopment

1.
2Inst
all
ati
onAndDocument
ati
on 6

1.
3WebDev
elopmentTool 6

1.
3.1Edi
ti
or 7

1.
3.2Compi
l
er 7

1.
3.3I
nter
pret
er 8

1.
3.4Debugger 8

1.
3.5Pr
ofi
l
er 8

2Ful
lSt
ackWebDev
elopment 9

2.
1Technol
ogyRel
atedt
oSt
ackDev
elopment 9

2.
1.1Fr
ont
End: 9

2.
1.2BackEnd: 10

2.
1.3DATABASE: 11

3HTML-Hy
perText
Mar
kupLanguage 12

3.
1UsesOfHTML 12

3.
1.1WebPageDev
elopment 12

3.
1.2Webdocumentcr
eat
ion 12

3.
1.3Cut
ti
ngwebpagecr
eat
ion 13

3.
1.4Responsi
vei
magesonwebpages 13

4HTML5 14
1wha
4. tisHTML
4.
2what’
ssogreataboutht
ml? 14
4.
3whatdoeshtml5do?

4
4.
4whenwi l
lhtml5will
bef i
nished. 14 4.
5
doIneedHTML5br owser?
4.
6what ’
sthepr obl
em withhtml5video? 15
4.
7willHTML5r eplacefl
ashandsi l
verli
ght
? 15
4.
8whatt oolsdoIneedt ocreatehtml5websi
te?
4.
9wher ecanIseesomeHTML5demos 15

5Ref
erence 16

5
 Chapt
er1

I
NTRODUCTI
ON

1.
1 Whati
swebdev
elopment
Webdesi
gni
sthev
isualaest
het
icsandpagel
ayoutofawebsi
te.I
tgoeshand-
in-
handwi
thweb
dev
elopmenti
nthecr
eat
ionofast
ati
cwebsi
teordy
nami
cwebappl
i
cat
ion.
Ev
eni
fyoudon’
tconsi
dery
our
sel
facr
eat
iveper
son,i
t’
sst
il
lagoodi
deat
olear
nwebdesi
gn.No
mat
terwhet
hery
ou wantt
o makest
ati
cwebsi
tesordy
nami
cweb appl
i
cat
ions,desi
gn i
san
i
mpor
tantpar
toft
hepr
ocess.Thedesi
gni
sthef
ir
stt
hingpeopl
enot
icewhent
heyar
ri
veona
websi
te,andi
fit
’snotgoodenough,t
hey
’l
lleav
e.Youdon’
twantt
ocr
eat
easi
tet
hatf
rust
rat
es
peopl
e,doy
ou?I
fyoudoi
dent
if
yyour
sel
fasacr
eat
iveper
son,
youmi
ghtev
enconsi
deracar
eerasa
webdesi
gner
.Today
,ther
eisahugeneedf
orcompet
entwebdesi
gner
swi
thup-
to-
dat
eski
l
ls.I
t’
snot
anoppor
tuni
tyt
obesneezedat
.Lear
ncodi
ngandy
ou’
l
lbeav
aluabl
easset
tomany
.Butl
ear
ncodi
ng
anddesi
gnandy
ou’
l
lbesecondt
onone!

1.
2 I
nst
all
ati
onAndDocument
ati
on
Acomput
erMay
bet
hatsoundsobv
ioust
osomepeopl
e,butsomeofy
ouar
ereadi
ngt
hisar
ti
cleon
y
ourphoneoral
i
brar
ycomput
er.Forser
iouswebdev
elopment
,it
’sbet
tert
oinv
esti
nadeskt
opor
l
apt
opcomput
err
unni
ngWi
ndows,macOS,orLi
nux.At
extedi
tor
,towr
it
ecodei
n.Thi
scoul
dbea
t
extedi
tor(
e.g.GNUEmacs,
Subl
i
me,
Bracket
s,Not
epad++,
Atom,
orVi
sualSt
udi
oCode)
,orahy
bri
d
edi
tor(
e.g.Dr
eamweav
erorWebSt
orm)
.Of
fi
cedocumentedi
tor
sar
enotsui
tabl
efort
hisuse,
ast
hey
r
elyonhi
ddenel
ement
sthati
nter
fer
ewi
tht
her
ender
ingengi
nesusedbywebbr
owser
s.Web
br
owser
s,t
otestcodei
n.Cur
rent
ly,t
hemost
-usedbr
owser
sar
eFi
ref
ox,Chr
ome,Oper
a,Saf
ari
,
I
nter
netExpl
orer
,andMi
crosof
tEdge.Youshoul
dal
sot
esthowy
oursi
teper
for
msonmobi
l
edev
ices
andonanyol
dbr
owser
syourt
argetaudi
encemayst
il
lbeusi
ng(
suchasI
E810.
)
I
nst
all
i
ngat
extedi
torSect
ionYoupr
obabl
yal
readyhav
eabasi
ctextedi
torony
ourcomput
er.
By

6
def
aul
tWi
ndowsi
ncl
udesNot
epadandmacOScomeswi
thTextEdi
t.Li
nuxdi
str
osv
ary
;Ubunt
u
comeswi
thgedi
tbydef
aul
t.Forwebdev
elopment
,youcanpr
obabl
ydobet
tert
hanNot
epador
Text
Edi
t.Wer
ecommendst
art
ingwi
thBr
acket
s,whi
chi
saf
reeedi
tort
hatof
fer
sli
vepr
evi
ewsand
codehi
nts.
Inst
all
i
ngmoder
nwebbr
owser
sSect
ionFor
now,
we’
l
li
nst
all
acoupl
eof
deskt
opweb

br
owser
stot
estourcodei
n.Choosey
ouroper
ati
ngsy
stem bel
ow andcl
i
ckt
her
elev
antl
i
nkst
o
downl
oadi
nst
all
ersf
ory
ourf
avor
it
ebr
owser
s:Li
nux:Fi
ref
ox,Chr
ome,Oper
a.Wi
ndows:Fi
ref
ox,
Chr
ome,Oper
a,I
nter
netExpl
orer
,Mi
crosof
tEdge(
Windows10comeswi
thEdgebydef
aul
t;i
fyou
hav
eWi
ndows7orabov
e,y
oucani
nst
allI
nter
netExpl
orer11;ot
her
wise,y
oushoul
dinst
allan
al
ter
nat
ivebr
owser
)macOS:Fi
ref
ox,Chr
ome,Oper
a,Saf
ari(
Saf
aricomeswi
thi
OSandmacOSby
def
aul
t)Bef
oregoi
ngon,y
oushoul
dinst
allatl
eastt
wooft
hesebr
owser
sandhav
ethem r
eadyf
or
t
est
ing.

1.
3 WebDev
elopmentTool
Pr
ogr
ammer
shav
eav
ari
etyoft
ool
sav
ail
abl
etoenhancet
hesof
twar
edev
elopmentpr
ocess.Some
commont
ool
sincl
ude.

1.
3.1 Edi
ti
or
Anedi
toral
l
owst
hepr
ogr
ammert
o ent
ert
hepr
ogr
am sour
cecodeand sav
eitt
oles.Most
pr
ogr
ammi
ng edi
tor
sincr
ease pr
ogr
ammerpr
oduct
ivi
ty by usi
ng col
orst
o hi
ghl
i
ghtl
anguage
f
eat
ures.Thesy
ntaxofal
anguager
efer
stot
hewaypi
ecesoft
hel
anguagear
ear
rangedt
omake
wel
l
-for
medsent
ences.Toi
l
lust
rat
e,t
hesent
enceThet
allboyr
unsqui
ckl
ytot
hedoor
.usespr
oper
Engl
i
shsy
ntax.Bycompar
ison,t
hesent
enceBoyt
het
allr
unsdoort
oqui
ckl
ythe.i
snotcor
rect
sy
ntact
ical
l
y.I
tusest
hesamewor
dsast
heor
igi
nalsent
ence,
butt
hei
rar
rangementdoesnotf
oll
ow
t
her
ulesofEngl
i
sh.Si
mil
arl
y,pr
ogr
ammi
ngl
anguageshav
est
ri
ctsy
ntaxr
ulest
hatmustbef
oll
owed
t
ocr
eat
ewel
l
-for
medpr
ogr
ams.Onl
ywel
lfor
medpr
ogr
amsar
eaccept
abl
eandcanbecompi
l
edand
execut
ed.Some sy
ntax-
awar
e edi
tor
s can use col
ors orot
herspeci
alannot
ati
ons t
o al
ert
pr
ogr
ammer
sofsy
ntaxer
ror
sbef
oret
hepr
ogr
am i
scompi
l
ed.

1.
3.2 Compi
ler
Acompi
l
ert
ransl
atest
hesour
cecodet
otar
getcode.Thet
argetcodemaybet
hemachi
nel
anguage
f
orapar
ti
cul
arpl
atf
orm orembeddeddev
ice.Thet
argetcodecoul
dbeanot
hersour
cel
anguage;f
or
exampl
e,t
heear
li
estC++compi
l
ert
ransl
atedC++i
ntoC,
anot
herhi
gher
-l
evell
anguage.Ther
esul
ti
ng
Ccodewast
henpr
ocessedbyaCcompi
l
ert
opr
oduceanexecut
abl
epr
ogr
am.(
C++compi
l
erst
oday
t
ransl
ate
C++di
rect
lyi
ntomachi
nel
anguage.
)

7
1.
3.3 I
nter
pret
er
Ani
nter
pret
eri
sli
keacompi
l
er,
int
hati
ttr
ansl
ateshi
gher
-l
evel
sour
cecodei
ntomachi
nel
anguage.I
t
wor
ksdi
ff
erent
ly,
howev
er.Whi
l
eacompi
l
erpr
oducesanexecut
abl
epr
ogr
am t
hatmayr
unmant
imes
wi
thnoaddi
ti
onalt
ransl
ati
onneeded,
ani
nter
pret
ert
ransl
atessour
cecodest
atement
sint
omachi
ne
l
anguageast
hepr
ogr
am r
uns.Acompi
l
edpr
ogr
am doesnotneedt
ober
e-compi
l
edt
orun,butan
i
nter
pret
edpr
ogr
am mustbei
nter
pret
edeacht
imei
tisexecut
ed.I
ngener
al,compi
l
edpr
ogr
ams
execut
emor
equi
ckl
ythani
nter
pret
edpr
ogr
amsbecauset
het
ransl
ati
onact
ivi
tyoccur
sonl
yonce.
I
nter
pret
edpr
ogr
ams,
ont
heot
herhand,
canr
unasi
sonanypl
atf
orm wi
thanappr
opr
iat
eint
erpr
eter
;
t
heydonotneedt
ober
ecompi
l
edt
orunonadi
ff
erentpl
atf
orm.Py
thon,
forexampl
e,i
susedmai
nly
asani
nter
pret
edl
anguage,butcompi
l
ersf
ori
tar
eav
ail
abl
e.I
nter
pret
edl
anguagesar
ebet
tersui
ted
f
ordy
nami
c,expl
orat
ivedev
elopmentwhi
chmanypeopl
efeel
isi
deal
forbegi
nni
ngpr
ogr
ammer
s.

1.
3.4 Debugger
Adebuggeral
l
owspr
ogr
ammer
stosi
mul
taneousl
yrunapr
ogr
am andseewhi
chsour
cecodel
i
nei
s
cur
rent
lybei
ngexecut
ed.Thev
aluesofv
ari
abl
esandot
herpr
ogr
am el
ement
scanbewat
chedt
oseei
f
t
hei
rval
ueschangeasexpect
ed.Debugger
sar
eval
uabl
eforl
ocat
inger
ror
s(al
socal
l
edbugs)and
r
epai
ri
ngpr
ogr
amst
hatcont
ainer
ror
s.(
SeeSect
ion3.
4formor
einf
ormat
ionaboutpr
ogr
ammi
ng
er
ror
s.)

1.
3.5 Pr
ofi
ler
Apr
ofi
l
eri
susedt
oev
aluat
eapr
ogr
am’
sper
for
mance.I
tindi
cat
eshow manyt
imesapor
ti
onofa
pr
ogr
am i
sexecut
eddur
ingapar
ti
cul
arr
un,
andhowl
ongt
hatpor
ti
ont
akest
oexecut
e.Pr
ofi
l
ersal
so
canbeusedf
ort
est
ingpur
posest
o ensur
eal
lthecodei
napr
ogr
am i
sact
ual
l
ybei
ngused
somewher
edur
ingt
est
ing.Thi
sisknownascov
erage.I
tiscommonf
orsof
twar
etof
ailaf
teri
ts
r
eleasebecauseuser
sexer
cisesomepar
toft
hepr
ogr
am t
hatwasnotexecut
edanyt
imedur
ing
t
est
ing.Themai
npur
poseofpr
ofi
l
ingi
stoandt
hepar
tsofapr
ogr
am t
hatcanbei
mpr
ovedt
omake
t
hepr
ogr
am r
unf
ast
er.

8
 Chapt
er2

Ful
lSt
ackWebDev
elopment
I
tref
erst
othedev
elopmentofbot
hfr
ontend(
cli
entsi
de)andbackend(
ser
versi
de)por
ti
onsofweb
appl
i
cat
ion.
Ful
lst
ackwebdev
eloper
shav
etheabi
l
ityt
odesi
gncompl
etewebappl
i
cat
ionandwebsi
tes.They
wor
kont
hef
ront
end,
backend,
dat
abaseanddebuggi
ngofwebappl
i
cat
ionorwebsi
tes.

2.
1 Technol
ogyRel
atedt
oSt
ackDev
elopment
2.
1.1 Fr
ont
End:
I
tist
hev
isi
blepar
tofwebsi
teorwebappl
i
cat
ionwhi
chi
sresponsi
blef
oruserexper
ience.Theuser
di
rect
lyi
nter
act
swi
tht
hef
rontendpor
ti
onoft
hewebappl
i
cat
ionorwebsi
te.
Fr
ontEndLanguage-
1.
HTML-
HTMLst
andsf
orHy
perTextMar
kupLanguage.I
tisusedt
odesi
gnt
hef
rontendpor
ti
onofweb
pages usi
ng mar
kup l
anguage.HTML i
sthe combi
nat
ion ofHy
per
textand Mar
kup l
anguage.
Hy
per
textdef
inest
hel
i
nkbet
weent
hewebpages.Themar
kupl
anguagei
susedt
odef
inet
het
ext
document
ati
onwi
thi
ntagwhi
chdef
inest
hest
ruct
ureofwebpages.
CSS-
2.
Cascadi
ngSt
yleSheet
s,f
ondl
yref
err
edt
oasCSS,i
sasi
mpl
ydesi
gnedl
anguagei
ntendedt
o
si
mpl
i
fyt
hepr
ocessofmaki
ngwebpagespr
esent
abl
e.CSSal
l
owsy
out
oappl
yst
ylest
owebpages.
Mor
eimpor
tant
ly,
CSSenabl
esy
out
odot
hisi
ndependentoft
heHTMLt
hatmakesupeachwebpage.

JAVASCRI
3. PT-
Jav
aScr
ipti
saf
amousscr
ipt
ingl
anguageusedt
ocr
eat
ethemagi
cont
hesi
test
omaket
hesi
te
i
nter
act
ivef
ort
heuser
.Iti
susedt
oenhanci
ngt
hef
unct
ional
i
tyofawebsi
tet
orunni
ngcoolgames
andweb-
basedsof
twar
e.

9
 *Fr
ontEndFr
amewor
kandLi
brar
ies:
-
Angul
1. arJS:
Angul
arJsi
saJav
aScr
iptopensour
cef
ront
-endf
ramewor
kthati
smai
nlyusedt
odev
elopsi
ngl
e
pagewebappl
i
cat
ions(
SPAs)
.Iti
sacont
inuousl
ygr
owi
ngandexpandi
ngf
ramewor
kwhi
chpr
ovi
des
bet
terway
sfordev
elopi
ngwebappl
i
cat
ions.I
tchangest
hest
ati
cHTMLt
ody
nami
cHTML.I
tisan
opensour
cepr
ojectwhi
chcanbef
reel
yusedandchangedbyany
one.I
text
endsHTMLat
tr
ibut
es
wi
thDi
rect
ives,
anddat
aisboundwi
thHTML.
React
2. .JS:
Reacti
sadecl
arat
ive,
eff
ici
ent
,andf
lexi
bleJav
aScr
iptl
i
brar
yforbui
l
dinguseri
nter
faces.React
JS
i
sanopen-
sour
ce,component
-basedf
rontendl
i
brar
yresponsi
bleonl
yfort
hev
iew l
ayeroft
he
appl
i
cat
ion.
I
tismai
ntai
nedbyFacebook.
Boot
3. str
ap:
Boot
str
api
saf
reeandopen-
sour
cet
oolcol
l
ect
ionf
orcr
eat
ingr
esponsi
vewebsi
tesandweb
appl
i
cat
ions.I
tist
hemostpopul
arHTML,
CSS,
andJav
aScr
iptf
ramewor
kfordev
elopi
ngr
esponsi
ve,
mobi
l
e-f
ir
stwebsi
tes.
JQuer
4. y:
j
Quer
yisanopensour
ceJav
aScr
iptl
i
brar
ythatsi
mpl
i
fiest
hei
nter
act
ionsbet
weenanHTML/
CSS
document
,ormor
epr
eci
sel
ytheDocumentObj
ectModel(
DOM)
,andJav
aScr
ipt
.El
abor
ati
ngt
he
t
erms,j
Quer
ysi
mpl
i
fiesHTMLdocumentt
rav
ersi
ngandmani
pul
ati
on,br
owserev
enthandl
i
ng,DOM
ani
mat
ions,
Ajaxi
nter
act
ions,
andcr
oss-
browserJav
aScr
iptdev
elopment
.

2.
1.2 BackEnd:
I
tref
erst
otheser
ver
-si
dedev
elopmentofwebappl
i
cat
ionorwebsi
tewi
thapr
imar
yfocusonhow
t
hewebsi
tewor
ks.I
tisr
esponsi
blef
ormanagi
ngt
hedat
abaset
hroughquer
iesandAPI
sbycl
i
ent
-
si
decommands.
BackEndLanguage:
-
1.Php:
PHPi
saser
ver
-si
descr
ipt
ingl
anguagedesi
gnedspeci
fi
cal
l
yforwebdev
elopment
.Si
nce,PHP
codeexecut
edonser
versi
desoi
tiscal
l
edser
versi
descr
ipt
ingl
anguage.
2.
C++:iti
sageneralpur
poseprogrammingl
anguageandwi
del
yusednowaday
sforcompet
it
ive
progr
am-
mi
ng.Iti
sal
sousedasbackendlanguage.
3. Jav
a:j
avai
soneoft
hemostpopul
arandwi
del
yusedpr
ogr
ammi
ngl
anguageand
pl
atf
orm.I
ti
shi
ghl
yscal
abl
e.Jav
acomponent
sar
eeasi
l
yav
ail
abl
e.
4. Py
thon:
Py
thoni
sapr
ogr
ammi
ngl
anguaget
hatl
etsy
ouwor
kqui
ckl
yandi
ntegr
atesy
stemsmor
e
ef
fi
cient
ly.
5.Node.
js:
Node.
jsi
sanopensour
ceandcr
oss-
plat
for
mrunt
imeenv
ironmentf
orexecut
ingJav
aScr
iptcode

10
out
side ofa br
owser
.You need t
oremembert
hatNodeJS i
s nota f
ramewor
k and i
t’
s nota
pr
ogr
ammi
ng l
anguage.Mostoft
hepeopl
ear
econf
used and under
stand i
t’
saf
ramewor
kora
pr
ogr
ammi
ngl
anguage.Weof
tenuseNode.
jsf
orbui
l
dingback-
endser
vicesl
i
keAPI
sli
keWebAppor
Mobi
l
eApp.I
t’
susedi
npr
oduct
ionbyl
argecompani
essuchasPay
pal
,Uber
,Net
fl
ix,
Wal
mar
tandsoon.
2.
1.3 DATABASE:
Dat
abasei
sthecol
l
ect
ionofi
nter
rel
ateddat
awhi
chhel
psi
nef
fi
cientr
etr
iev
al,
inser
ti
onanddel
eti
on
ofdat
afr
om dat
abaseandor
gani
zest
hedat
aint
hef
orm oft
abl
es,
views,
schemas,
repor
tset
c.
Or
1. acl
e:-
Or
acl
edat
abasei
sthecol
l
ect
ionofdat
awhi
chi
str
eat
edasauni
t.Thepur
poseoft
hisdat
abasei
s
t
ost
oreandr
etr
iev
einf
ormat
ionr
elat
edt
othequer
y.I
tisadat
abaseser
verandusedt
omanages
i
nfor
mat
ion.
MongoDB:
2. -
MongoDB,
themostpopul
arNoSQLdat
abase,
isanopensour
cedocument
-or
ient
eddat
abase.
Thet
erm ‘
NoSQL’means‘
non-
rel
ati
onal
’
.Itmeanst
hatMongoDB i
sn’
tbased on t
het
abl
e-l
i
ke
r
elat
ional
dat
abasest
ruct
urebutpr
ovi
desanal
toget
herdi
ff
erentmechani
sm f
orst
orageandr
etr
iev
al
ofdat
a.
SQL:
3. -
St
ruct
uredQuer
yLanguagei
sast
andar
dDat
abasel
anguagewhi
chi
susedt
ocr
eat
e,mai
ntai
n
andr
etr
iev
ether
elat
ional
dat
abase.

11
 Chapt
er3

HTML-Hy
perTextMar
kupLanguage
WhatIhadt
otakei
nmi
ndpr
iort
ost
art
ingt
hepr
ojectwasaccessi
bil
i
tyi
ssuesandwebst
andar
ds.I
hadwr
it
tenast
ri
ctHTMLf
il
ethatcont
ainst
wosect
ions-onel
i
st(
ul)sect
ionf
ort
hef
lagbut
tonsand
anot
her(
div
)fort
hemodi
fi
cat
ionbut
tons.Onemaj
orconcer
nofwebaccessi
bil
i
tyi
stheuseof
i
mages.
Iti
sconsi
der
edbestpr
act
icet
oaddal
tandt
it
leat
tri
but
esf
oruser
swhocannotdi
sti
nct
i
mages.
Forexampl
ethei
mageoft
heGer
manf
laghasat
it
leDeut
schandal
tat
tri
but
esett
oger
man
f
lag.Thel
angat
tri
but
eisal
sosetasengl
i
sh(
lang=en)i
nor
dert
oinf
ormt
hebr
owseroft
hedef
aul
t
humanl
anguageoft
hescr
ipt
,whi
chi
sessent
ialf
ort
hepr
operr
eadi
ngoft
hewebpagebycer
tai
n
t
echnol
ogi
esf
ort
hedi
sabl
ed.
HTMLst
andsf
orHy
perTextMar
kupLanguage.
HTMLdescr
ibest
hest
ruct
ureofWebpagesusi
ngmar
kup.
HTMLel
ement
sar
ethebui
l
dingbl
ocksofHTMLpages.HTML
el
ement
sar
erepr
esent
edbyt
ags.
HTMLt
agsl
abel
piecesofcont
entsuchas”
headi
ng”
,”par
agr
aph”
,”t
abl
e”,
andsoon.
Br
owser
sdonotdi
spl
ayt
heHTMLt
ags,
butuset
hem t
orendert
hecont
entoft
hepage

12
3.
1 UsesOfHTML
3.
1.1 WebPageDev
elopment
HTMLi
sheav
il
yusedf
orcr
eat
ingpagest
hatar
edi
spl
ayedont
hewor
ldwi
deweb.Ev
erypage
cont
ainsasetofHTMLt
agsi
ncl
udi
nghy
per
li
nkswhi
char
eusedf
orconnect
ingt
oot
herpages.Ev
ery
paget
hatwewi
tness,
ont
hewor
ldwi
deweb,
iswr
it
tenusi
ngav
ersi
onofHTMLcode.
3.
1.2 Webdocumentcr
eat
ion
Documentcr
eat
ionont
hei
nter
neti
sdomi
nat
edbyHTMLandi
tsbasi
cconceptv
iat
agandDOM i
.e.
documentobj
ectmodel
.HTMLt
agsar
einser
tedbef
oreandaf
ter
war
dorphr
asest
olocat
ethei
r
f
ormatandl
ocat
ionont
hepage.Awebdocumentconsi
stsoft
hreesect
ions:t
it
le,head,andbody
.
Headi
ncl
udest
hei
nfor
mat
iont
oident
if
ythedocument
,incl
udi
ngt
it
leandanyot
heri
mpor
tant
key
wor
d.At
it
lecanbeseenont
hebr
owser
sbarandbodysect
ioni
sthemai
npor
ti
onoft
hewebsi
te
v
isi
blet
othev
iewer
.Al
lthet
hreesegment
sar
edesi
gnedandcr
eat
edbyt
heusesofHTMLt
ags.
Ev
erysect
ionhast
hei
rownspeci
fi
csetoft
ags,whi
char
ededi
cat
edl
yrender
edkeepi
ngt
hehead,
t
it
leandbodyconcept
sinal
oop.

3.
1.3 Cut
ti
ngwebpagecr
eat
ion
HTML5wi
thi
tssetofst
andar
dsandAPIi
sbei
ngusedt
oint
roducesomeoft
hel
atestt
rendsi
n
websi
tecr
eat
ionbusi
ness.Li
kepol
yfi
l
lli
brar
ies,whi
char
esuppor
tedbyol
dbr
owser
sequal
l
ywel
l
.
Br
owserl
i
keGoogl
eChr
omei
stheper
fectchoi
cewheni
tcomest
oimpl
ement
inganHTML5l
atest
setofst
andar
dandAPI
s.Ther
eisaJav
aScr
iptl
i
brar
yav
ail
abl
ecal
l
edModer
nizr
,whi
chcandet
ect
f
eat
urest
hatl
ett
hedev
eloperdy
nami
cal
l
yloadpol
yfi
l
lli
brar
iesasr
equi
red.

3.
1.4 Responsi
vei
magesonwebpages
Att
heel
ement
aryl
eveli
nappl
i
cat
ionsofHTML,quer
iescanbesett
out
il
izet
hei
mages,whi
char
e
r
esponsi
vei
nnat
ure.Wi
tht
hesr
csetat
tri
but
eofi
mgel
ementi
nHTML,
andcombi
ningi
twi
thpi
ctur
e
el
ement
,adev
elopercanf
ull
ycont
rolhowt
heuserwi
l
lrenderani
mage.Nowdi
ff
erentt
ypesofan
i
magewi
thsi
zev
ari
ati
oncanbel
oadedbyusi
ngt
hei
mgel
ement
.Rul
escanbeeasi
l
ysetwi
tht
he
pi
ctur
eel
ement
,wecandecl
arei
mgel
ementwi
thdef
aul
tsour
ceandt
henf
orev
erycase,asour
ce
canbepr
ovi
ded.

13
 CHAPTER4
HTML5

WhenSt
eveJobsr
efusedt
oal
l
owFl
ashoni
OSdev
ices,
hear
guedt
hatHTML5coul
ddoev
ery
thi
ngFl
ash
di
d.

Hewasn'tbei
ngenti
rel
yhonest-ther
eali
tydi
stort
ionf
iel
dwasst r
ongthatday-butul
ti
mat
elyApplewon
andAdobedidn'
t;
HTML5, notFl
ash,i
sthetechnol
ogythat
'st
ransfor
mingtheweb.Sowhatexact
lyisi
t,
andwhatdoesitwantfr
om us?

WhatisHTML5?
HTML5i sthel
atestversi
onofHypertextMarkupLanguage,thecodethatdescr
ibeswebpages.I
t'
s
actual
lythr
eeki
ndsofcode: HTML,whi chpr
ov i
desthestr
ucture;
CascadingSty
leSheet
s(CSS),whi
ch
takecareofpr
esentati
on;andJavaScript
,whichmakesthingshappen.

What
'ssogreataboutHTML5?
HTML5hasbeendesi gnedtodel
i
v eral
mostev ery
thi
ngyou'
dwantt odoonli
newi thoutr
equir
ing
addi
ti
onalsof
twaresuchasbrowserplugins.I
tdoesever
ythi
ngfrom animat
iontoapps, musi
ctomov
ies,
andcanal
sobeusedt obui
l
dincredibl
ycomplicat
edappli
cat
ionsthatruni
ny ourbrowser.

There'
smore.HTML5i sn'tpropr
ietary
,soy oudon'tneedtopayroyalt
iest
ousei t
.It
'salsocross-
plat
form,
whichmeansi tdoesn'
tcarewhet heryou'
reusingat abl
etorasmar t
phone,anetbook,notebookor
ul
trabookoraSmar tTV:ifyourbrowsersuppor t
sHTML5, i
tshoul
dwor kfl
awlessl
y.Inevi
tabl
y,it
'
sabi t
mor ecompli
catedthanthat.Moreaboutthatinamoment .

WhatdoesHTML5do?
We'
vecomeal ongwaysi nceHTMLcoul dbar
elyhandl
easimpl epagelayout.HTML5canbeusedtowr
it
e
webappli
cat
ionsthatst
il
l wor
kwheny ou'
renotconnectedt
ot henet;
totellwebsi
teswher
eyouare
phy
sical
l
ylocated;
tohandlehighdef
ini
ti
onv i
deo;andtodel
iverext
raordi
narygraphi
cs.

Whenwi
llHTML5bef
inished?
HTML5i
sanevol
vi
ngstandard,soi
t'
sabi
tmi
sleadi
ngt
otal
kaboutwheni
t'
l
lbef
ini
shed.

What
'si
mport
antist
hatHTML'sfeat
ures-suchastheafor
ement
ionedgeol
ocat
ion,webapps,v
ideoand
gr
aphi
cscanbeusednow,pr
ovi
dedyourbrowsersuppor
tst
hem.

DoIneedanHTML5br owser?
You'v
epr obablygotoneal
ready.Al
lofthebignamebr owsers-Int
ernetExplorer
,Edge,Fi
refox,
Chrome,
SafariandOper a,
Mobil
eSafariandAndroi
d'
sbr owser-supportHTML5, buttheydon'tal
lsupportt
he
samet hings.

Fi
ref
oxgeneral
lysupport
sthewidestsel
ect
ionofHTML5f eatur
es,
wit
hChr omeandSaf ar
ifol
lowing
shor
tl
yafter
wards,butaswesaidHTML5i sanev ol
vingstandar
dandthelatestv
ersi
onsofeachbr owser
morethancoverthebasi
cs.I
fyou'
dlikemoredetail
edinformati
ononbrowsersupport
,theexcel
lent

14
Cani
use.
com pr
ovi
desadet
ail
edbr
eakdownofwhatsuppor
tswhat
.

Skydr
ive

What'
sthepr
oblem wi
thHTML5v ideo?
TheHTML5standar
dsupportsvi
deo,butunf
ort
unatel
ynobodycoul
dagr
eeonwhichf
ormat
(s)t
osuppor
t
-andt
hatmeansthatdi
ff
erentbr
owserssuppor
tdif
ferentHTML5vi
deof
ormat
s.

Therearethreemainones:OggTheora,whi
chissupport
edbyever
ybrowserbarInt
ernetExpl
orer(
Saf
ari
supportrequir
esamanualinst
all
ati
on);
H.264,
whichissupport
edbyevery
onebutFiref
ox;andVP8/WebM,
whichissuppor t
edbyever
ythi
ng(al
thoughSaf
ariandIErequi
remanuali
nstal
l
ati
ons).

WillHTML5repl
aceFlashandSi l
verli
ght?
I
nsomeway si
tal
readyhas:iOSdevicesdon'trunFlash,andmanyv i
deowebsit
eshaveeithermov edfr
om
Fl
asht oHTML5videooratleastoff
eredHTML5asanopt ion.However
,asHTML5doesn' ti
ncl
udedi gi
tal
ri
ghtsmanagement(DRM)technologyt opreventcopyi
ng,manycontentownerspr
eferpropri
etary
,DRM-
fr
iendl
yfor
matssuchasFlashorSi l
verli
ght.Forexample,UKv i
deosi
teLoveFi
l
mi sdroppingFlash-but
i
nsteadofHTML5, i
t'
smovingtoSilverl
ight
.

Al
thoughAdobehasannouncedt
hati
twillst
opdev
elopingtheFlashPl
ayerf
ormobil
edevi
cesFl
ashi
s
al
sousedforconsi
der
ablymoret
hanjustshowi
ngvideo,soit
'snotgoi
nganywher
einahur
ry.

Whattool
sdoIneedtocr eateHTML5websi tes?
Pur
ist
swouldsaythatyoudon' tneedanytool
s-youcanwri
teHTML5codewithabi
roandabi
tofpaper
i
fyouwish-butot
hersprefertoolssuchasAdobe'sDr
eamweav
er,
whichgai
nedanHTML5packi
n2010.

Adobei
salsoreadyi
ngEdge,adedi
cat
edHTML5ani
mat
iont
oolt
hatpr
omi
sest
omakei
teasyt
ocr
eat
e
Fl
ash-
sty
leani
mat i
on.

WherecanIseesomeHTML5demos?
Thecunni
nglynamedHTML5demos. com hassomegooddemonstrat
ions,al
ongwi t
hakeyshowi ngwhich
onesworkinwhichbrowser
s,whil
etheexcel
lentGoogl
eWebFundament al
sProgram hasbothdemos
andcodesamplesfordesi
gnersanddevel
opers.Googl
ehasputt
ogetheranHTML5v i
deoplayerfor
YouTube,andApplehasputtoget
heranHTML5showcaseonAppl e.
com.Ourf av
our i
te,
though,i
sthe
i
nter
acti
vefi
lm Chri
sMilkmadeforArcadeFi
re'sWeUsedToWait.

15
Ref
erence
www.
udemy
.com
www.
HTML.
com
www.
css.
com
www.
React
.com
www.Node.com
www.
solol
ern.com

16