Scribd
Upload
25 views25 pages

HTML Details

Uploaded by

programmerscpp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views25 pages

HTML Details

Uploaded by

programmerscpp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Whati

sHTML?
 HTMLstandsf orHy perTextMar kupLanguage
 HTMListhestandar dmar kupl
anguagef orcreat
ingWebpages
 HTMLdescribest hest r
uctureofaWebpage
 HTMLconsistsofaser iesofelements
 HTMLelement stellthebrowserhowt odispl
aythecontent
 HTMLelement slabel pi
ecesofcont entsuchas"thisi
saheadi
ng"
,
"
thi
sisaparagr aph","t
hisisalink"
,etc.

ASi
mpl
eHTMLDocument
Exampl
e
<!
DOCTYPEhtml >
<html>
<head>
<ti
tl
e>PageTi
tl
e</t
it
le>
</head>
<body>

<h1>MyFir
stHeading</h1>
<p>Myfi
rstpar
agraph.</p>

</
body
>
</
html
>
Tr
yitYour
sel
f»

Exampl
eExpl
ained
 The<!
DOCTYPEht ml>decl
arat
iondefi
nesthatt
hisdocumenti
san
HTML5document
 The<html>el
ementi
stherootelementofanHTMLpage
 The<head>el
ementcontai
nsmet ai
nfor
mationabouttheHTML
page
 The<ti
t l
e>elementspeci f
iesat i
tl
efortheHTMLpage( whichi
s
showni nthebr owser'
st i
tlebarorinthepage'stab)
 The<body >el ementdef i
nest hedocument '
sbody,andisacontai
ner
foral
lthev i
siblecontents,suchasheadi ngs,par
agraphs,
images,
hyper
li
nks, t
abl es,
li
sts,etc.
 The<h1>el ementdef inesal argeheadi
ng
 The<p>el ementdef i
nesapar agraph

Whati
sanHTMLEl
ement
?
AnHTMLel
ementi
sdef
inedbyast
artt
ag,
somecont
ent
,andanendt
ag:

<t
agname>Cont
entgoesher
e..
.</
tagname>
TheHTMLel
ementi
sev
ery
thi
ngf
rom t
hest
artt
agt
otheendt
ag:

<h1>MyFi
rstHeadi
ng</
h1>
<p>Myf
ir
stpar
agr
aph.
</p>

St
artt
ag El
ementcont
ent

<h1> MyFi
rstHeadi
ng

<p> Myf
ir
stpar
agr
aph.
<br
> none

Note:SomeHTMLelement
shavenocontent(
li
kethe<br
>element)
.These
elementsar
ecal
l
edemptyel
ements.Emptyel
ementsdonothaveanend
tag!

WebBr
owser
s
Thepur
poseofawebbrowser(
Chrome,Edge,Fi
ref
ox,
Saf
ari
)ist
oread
HTMLdocumentsanddi
spl
aythem cor
rect
ly.

Abrowserdoesnotdi
splayt
heHTMLt
ags,
butusest
hem t
odet
ermi
ne
howtodispl
aythedocument:
HTMLPageSt
ruct
ure
Bel
owi
sav
isual
i
zat
ionofanHTMLpagest
ruct
ure:

<html>
<head>
<ti
tl
e>Paget
it
le</
ti
tl
e>
</
head>
<body>
<h1>Thi
sisaheadi
ng</
h1>
<p>Thi
sisapar
agr
aph.
</p>
<p>Thi
sisanot
herpar
agr
aph.
</p>
</
body
>
</ht
ml>
Note:Thecontenti
nsidethe<body
>sect
ionwi
llbedi
splay
edinabrowser.
Thecontenti
nsidethe<ti
tle>el
ementwi
l
lbeshowninthebrowser
'st
it
le
barorinthepage'
stab.

I
magescani
mpr
ovet
hedesi
gnandt
heappear
anceofawebpage.

Exampl
e
<i
mgsr
c="
pic_
trul
l
i.
jpg"al
t="
It
ali
anTr
ull
i
">
Tr
yitYour
sel
f»

Exampl
e
<i
mgsr
c="
img_
gir
l.
jpg"al
t="
Gir
linaj
acket
">
Tr
yitYour
sel
f»
Exampl
e
<i
mgsr
c="
img_
chani
a.j
pg"al
t="
Flower
sinChani
a">
Tr
yitYour
sel
f»

HTMLI
magesSy
ntax
TheHTML<i
mg>t
agi
susedt
oembedani
magei
nawebpage.

I
magesarenottechni
call
yinser
tedint
oawebpage;imagesarelinkedt
o
webpages.The<i
mg>t agcreatesaholdi
ngspacef
orther
eferenced
i
mage.

The<i
mg>tagi
sempt
y,i
tcont
ainsat
tr
ibut
esonl
y,anddoesnothav
ea
cl
osi
ngtag.

The<i
mg>t
aghast
wor
equi
redat
tr
ibut
es:

 sr
c-Specif
iest
hepat
htotheimage
 al
t-Speci
fi
esanal
ter
nat
etextfort
hei
mage

Sy
ntax
<i
mgsr ur
c=" l
"al
t al
=" t
ernat
etext
">

Thesr
cAt
tr
ibut
e
Ther
equi
redsr
cat
tri
but
especi
fi
est
hepat
h(URL)t
othei
mage.

Note:Whenawebpagel oads, i
tisthebrowser,att
hatmoment ,thatgets
theimagef rom awebserverandinsert
si ti
ntothepage.Theref
ore,make
surethattheimageactuall
ystaysinthesamespoti nrelat
iontotheweb
page,otherwiseyourv
isi
torswill
getabr okenli
nkicon.Thebrokenlink
i heal
conandt ttextar
eshowni
fthebr
owsercannotf
indt
hei
mage.

Exampl
e
<i
mgsr
c="
img_
chani
a.j
pg"al
t="
Flower
sinChani
a">
Tr
yitYour
sel
f»

Theal
tAt
tri
but
e
Therequi
redaltat
tri
but
eprovi
desanal ter
natetextf
orani
mage,i
ftheuser
forsomereasoncannotvi
ewit(becauseofslowconnecti
on,
anerr
orinthe
srcatt
ri
bute,
orift
heuserusesascr eenreader
).

Thev
al heal
ueoft tat
tr
ibut
eshoul
ddescr
ibet
hei
mage:

Exampl
e
<i
mgsr
c="
img_
chani
a.j
pg"al
t="
Flower
sinChani
a">
Tr
yitYour
sel
f»
I
fabr
owsercannotf
indani
mage,
itwi
l
ldi
spl
ayt
hev
alueof
heal
t tat
tr
ibut
e:

Exampl
e
<i
mgsr
c="
wrongname.
gif
"al
t="
Flower
sinChani
a">
Tr
yitYour
sel
f»
Tip:Ascr
eenreaderisasoftwarepr
ogr
am thatreadst
heHTMLcode,and
al
lowstheuserto"li
sten"t
othecont
ent
.Screenreader
sar
eusef
ulfor
peoplewhoarevisual
lyimpai
redorl
ear
ningdisabl
ed.
I
mageSi
ze-Wi
dthandHei
ght
hest
Youcanuset yleat
tr
ibut
etospeci
fyt
hewi
dthandhei
ghtofani
mage.

Exampl
e
<i
mgsrc="
img_gir
l.
jpg"al
t="Gi
rli
na
j
acket
"st
yle="
widt
h:500px;hei
ght
:600px;
">
Tr
yitYour
sel
f»
Al
ter
nat
ivel
y,y hewi
oucanuset dthandhei
ghtat
tri
but
es:

Exampl
e
<i
mgsr
c="
img_
gir
l.
jpg"al
t="
Gir
linaj
acket
"wi
dth="
500"hei
ght
="600"
>
Tr
yitYour
sel
f»
Thewi
dthandhei
ghtat
tr
ibut
esal
way
sdef
inet
hewi
dthandhei
ghtoft
he
i
mageinpi
xel
s.

Note:Al
waysspecif
ythewi
dthandhei
ghtofani
mage.I
fwi
dthandhei
ght
ar
enotspecif
ied,
thewebpagemightf
li
ckerwhi
l
ethei
mageloads.

Wi
dthandHei
ght
,orSt
yle?
Thewi
dth,
hei
ght
,andst
yleat
tr
ibut
esar
eal
lval
i
dinHTML.

However,wesuggestusi
ngthestyl
eat
tr
ibut
e.I
tpr
event
sst
ylessheet
s
f
rom changi
ngthesizeofimages:

Exampl
e
<!
DOCTYPEht
ml>
<html>
<head>
<styl
e>
i
mg{
width:100%;
}
</sty
le>
</head>
<body >

<i
mgsr
c="
html
5.gi
f"al
t="
HTML5I
con"wi
dth="
128"hei
ght
="128"
>

<i
mgsr
c="
html
5.gi
f"al
t="
HTML5I
con"st
yle="
widt
h:128px;
hei
ght
:128px;
">

</
body
>
</
html
>
Tr
yitYour
sel
f»

I
magesi
nAnot
herFol
der
I
fyouhav
ey ouri
magesi
nasub-
fol
der
,youmusti
ncl
udet
hef
oldernamei
n
hesr
t cat
tri
bute:

Exampl
e
<imgsrc="/i
mages/html5.gi
f"al
t="
HTML5
Icon"st
yle="
widt
h:128px;hei
ght:
128px;
">
Tr
yitYour
sel
f»

I
magesonAnot
herSer
ver
/Websi
te
Somewebsi
tespoi
ntt
oani
mageonanot
herser
ver
.

Topoi
ntt
oani
mageonanot
herser
ver
,youmustspeci
fyanabsol
ute(
ful
l
)
URLi
nthesr
cat
tri
but
e:

Exampl
e
<i
mgsr c="
https:
//www.
w3school
s.com/
images/
w3school
s_gr
een.
jpg"al
t=
"W3School
s.com">
Tr
yitYour
sel
f»
Notesonexternalimages:Ext
ernali
magesmi ghtbeundercopyri
ght.I
f
youdonotgetper missi
ontouseit,y
oumaybei nv i
olati
onofcopyri
ght
l
aws.Inaddi
tion,youcannotcontr
olext
ernal
images; theycansuddenl
ybe
r
emov edorchanged.

Ani
mat
edI
mages
HTMLal
l
owsani
mat
edGI
Fs:

Exampl
e
<i
mgsrc="pr
ogrammi ng.gi
f"al
t="
Comput
er
Man"st
yle="
width:
48px;hei
ght:
48px;
">
Tr
yitYour
sel
f»

I
mageasaLi
nk
Touseani
mageasal
i
nk, he<
putt i
mg>t
agi
nsi he<
det a>t
ag:

Exampl
e
<ahref
="defaul
t.
asp">
<imgsrc="
smiley.
gif
"al
t="
HTMLt
utor
ial
"st
yle="
widt
h:42px;
hei
ght
:42px;
">
</a>
Tr
yitYour
sel
f»

I
mageFl
oat
ing
UsetheCSSf
loatpr
oper
tyt
olett
hei
magef
loatt
other
ightort
othel
eftof
atext
:

Exampl
e
<p><imgsr c="
smiley.
gif
"al
t="Smil
ey
face"st
yle="fl
oat:
ri
ght;
widt
h:42px;
hei
ght:42px;
">
Theimagewi l
lfl
oattotheri
ghtofthetext.
</p>

<p><imgsr c="
smiley
.gif
"alt="
Smi l
ey
face"st
yle="fl
oat:
l
eft;
width:
42px;hei
ght:42px;
">
Theimagewi l
lfl
oattotheleftofthetext.
</p>
Tr
yitYour
sel
f»
Ti
p:Tol
ear
nmor
eaboutCSSFl
oat
,readourCSSFl
oatTut
ori
al.

CommonI
mageFor
mat
s
Herear
ethemostcommoni magefi
l
etypes,whichar
esuppor
tedi
nal
l
br
owsers(Chr
ome,Edge,
Fir
efox,
Safar
i,Oper
a):

Abbr
evi
ati
on Fi
leFor
mat

APNG Ani
mat
edPor
tabl
eNet
wor
kGr
aphi
cs
GI
F Gr
aphi
csI
nter
changeFor
mat

I
CO Mi
crosof
tIcon

JPEG Joi
ntPhot
ogr
aphi
cExper
tGr
oupi
mage

PNG Por
tabl
eNet
wor
kGr
aphi
cs

SVG Scal
abl
eVect
orGr
aphi
cs

Chapt
erSummar
y
 UsetheHTML< i
mg>el ementt odefi
neanimage
 UsetheHTMLsrcat tri
butetodefinetheURLoft hei mage
 UsetheHTMLaltattri
but etodefi
neanal t
ernatet extforani
mage, i
f
i
tcannotbedi
spl
ay ed
 UsetheHTMLwi dthandhei ghtattr
ibut
esort he
CSSwidthandheightpr opert
iestodefi
nethesi zeoft heimage
 UsetheCSSfl
oatpr opertytolett
heimagef loattot helef
tortothe
ri
ght

Note:Loadi
ngl
argei
magest
akest
ime,
andcansl
owdowny
ourwebpage.
Useimagescar
eful
ly
.
HTMLPageTi
tl
e

Ever
ywebpageshoul
dhav
eapaget
it
let
odescr
ibet
hemeani
ngof
thepage.

The<t
it
le>el
ementaddsat
it
let
oyourpage:

Exampl
e
<!DOCTYPEht
ml>
<html>
<head>
<ti
tl
e>HTMLTut
ori
al</
ti
tl
e>
</head>
<body>

Thecont
entoft
hedocument
..
..
..

</
body
>
</
html
>

Thet
it
lei
sshowni
nthebr
owser
'st
it
lebar
:

Thet
it
leshoul
ddescr
ibet
hecont
entandt
hemeani
ngoft
hepage.

Thepagetit
leisver
yimpor
tantforsear
chengi
neopti
mizati
on(SEO).The
texti
susedbysearchengi
nealgori
thmstodeci
detheorderwhenli
sti
ng
pagesinsearchr
esult
s.
The<t
it
le>el
ement
:

 defi
nesati
tl
einthebrowsert
ool
bar
 provi
desati
tl
eforthepagewheni
tisaddedtofavor
it
es
 di
splaysat
it
lefort
hepageinsear
chengine-
resul
ts

So,
tryt
omaket
het
it
leasaccur
ateandmeani
ngf
ulaspossi
ble!

HTMLTi
tl
eTag
Tag Descr
ipt
ion

<t
it
le> Def
inest
het
it
leoft
hedocument

Foracomplet
eli
stofal
lav
ail
abl
eHTMLt
ags,
visi
tourHTMLTag
Refer
ence.

HTMLTabl
es
HTMLtabl
esal
l
owwebdev
eloper
stoar
rangedat
aint
orowsand
col
umns.

Exampl
e

Company Cont
act
Al
fr
edsFut
ter
kist
e Mar
iaAnder
s

Cent
rocomer
cial
Moct
ezuma Fr
anci
scoChang

Er
nstHandel Rol
andMendel

I
slandTr
adi
ng Hel
enBennet
t

Laughi
ngBacchusWi
necel
l
ars Yoshi
Tannamur
i

Magazzi
niAl
i
ment
ari
Riuni
ti Gi
ovanni
Rov
ell
i

Def
ineanHTMLTabl
e
At
abl
einHTMLconsi
stsoft
abl
ecel
l
sinsi
der
owsandcol
umns.

Exampl
e
Asi
mpl
eHTMLt
abl
e:

<table>
<tr>
<th>Company </t
h>
<th>Contact
</th>
<th>Country
</th>
</t
r>
<tr
>
<td>Al
fredsFutter
kiste</t
d>
<td>MariaAnders</td>
<td>Germany</td>
</t
r>
<tr
>
<td>CentrocomercialMoct ezuma</
td>
<td>Fr
anciscoChang</ td>
<td>Mexico</t
d>
</t
r>
</t
able>

Tabl
eCel
l
s
Eacht
abl
ecel
li
sdef
inedbya<t
d>anda</
td>t
ag.

t
dst
andsf
ort
abl
edat
a.

Ev
ery
thi ween<
ngbet t
d>and</
td>ar
ethecont
entoft
het
abl
ecel
l
.

Exampl
e
<table>
<tr>
<td>Emi l
</td>
<td>Tobias</ t
d>
<td>Linus</td>
</tr>
</table>
Not e:Atablecellcancontai
nal
lsor
tsofHTMLel
ement
s:t
ext
,images,
l
ists,li
nks,othertabl
es,et
c.
HTMLTabl
eHeader
s

HTMLtabl
escanhav
eheader
sforeachcol
umnorr
ow,
orf
ormany
col
umns/r
ows.

EMI
L TOBI
AS LI
NUS

8:
00

9:
00

10:
00

11:
00

12:
00

13:
00

MON TUE WED THU FRI

8:
00

9:
00

10:
00

11:
00
12:
00

DECEMBER

HTMLTabl
eHeader
s
Tableheader
sar
edef
inedwi
tht
hel s.Eacht
ement hel
ementr
epr
esent
sa
tabl
ecell
.

Exampl
e
<table>
<tr>
<th>Fi
rstname</th>
<th>Lastname</t
h>
<th>Age</th>
</tr
>
<tr>
<td>Jil
l
</td>
<td>Smith</t
d>
<td>50</td>
</tr
>
<tr>
<td>Eve</td>
<td>Jackson</t
d>
<t
d>94</
td>
</t
r>
</t
able>

Ver
ti
cal
Tabl
eHeader
s
Touset
hefir
stcol
umnast
abl
eheader
s,def
inet
hef
ir
stcel
li
neachr
owas
a<t
h>element:

Exampl
e
<table>
<tr>
<th>Fir
stname</th>
<td>Jil
l</
td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</t
h>
<td>Smi t
h</t
d>
<td>Jackson</t
d>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>

ADVERTI
SEMENT
Al
i
gnTabl
eHeader
s
Bydef
aul
t,t
abl
eheader
sar
ebol
dandcent
ered:

Fi
rst
name Last
name Age

Ji
l
l Smi
th 50

Ev
e Jackson 94

Tol
eft
-al
i
gnt
het
abl
eheader
s, heCSSt
uset ext
-al
i
gnpr
oper
ty:

Exampl
e
t
h{
t
ext
-al
i
gn:
lef
t;
}

Headerf
orMul
ti
pleCol
umns
Youcanhav
eaheadert
hatspansov
ert
woormor
ecol
umns.

Name Age

Ji
l
l Smi
th 50

Ev
e Jackson 94

Todot
his, hecol
uset spanat
tr
ibut he<
eont t
h>el
ement
:
Exampl
e
<table>
<tr>
<thcolspan="2"
>Name</
th>
<th>Age</th>
</tr>
<tr>
<td>Jil
l</
td>
<td>Smi t
h</t
d>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</t
d>
<td>94</td>
</tr>
</table>

Youwilll
ear
nmoreaboutcol
spanandr
owspani
ntheTabl
ecol
span&
rowspanchapt
er.

Tabl
eCapt
ion
Youcanaddacapt
iont
hatser
vesasaheadi
ngf
ort
heent
ir
etabl
e.

Mont
hlysav
ings

Mont
h Sav
ings

Januar
y $100
Febr
uar
y $50

Toaddacapt
iont
oat
abl
e, he<
uset capt
ion>t
ag:

Exampl
e
<tablestyl
e="width:100%">
<capt i
on>Mont hlysavi
ngs</
capt
ion>
<tr>
<th>Mont h</t
h>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</ t
d>
</tr>
<tr>
<td>February</td>
<td>$50</ t
d>
</tr>
</table>

e:The<
Not capt
ion>t
agshoul
dbei
nser
tedi
mmedi
atel
yaf
ter
he<
t tabl
e>tag.

HTMLLi
sts

HTMLli
stsal
l
owwebdev
eloper
stogr
oupasetofr
elat
edi
temsi
n
l
ist
s.
Exampl
e
Anunor
der
edHTMLl
i
st:

 I
tem
 I
tem
 I
tem
 I
tem

Anor
der
edHTMLl
i
st:

1.Fi
rstit
em
2.Seconditem
3.Thir
ditem
4.Fourt
hi t
em

Unor
der
edHTMLLi
st
Anunorderedl
i
stst
art
swi
t he<
ht ul
>tag.Eachl
i
sti
tem st
art
swi
th
the<l
i
>t ag.

Thel
i
sti
temswi
l
lbemar
kedwi
thbul
l
ets(
smal
lbl
ackci
rcl
es)bydef
aul
t:

Exampl
e
<ul>
<li
>Coff
ee</l
i>
<li
>Tea</l
i
>
<li
>Mil
k</l
i>
</ul
>

Or
der
edHTMLLi
st
Anorder
edl
istst
art
swi
t he<
ht ol
>tag.Eachl
i
sti
tem st
art
swi
th
the<l
i>t
ag.

Thel
i
sti
temswi
l
lbemar
kedwi
thnumber
sbydef
aul
t:

Exampl
e
<ol>
<li
>Coff
ee</l
i>
<li
>Tea</l
i
>
<li
>Mil
k</l
i>
</ol
>

ADVERTI
SEMENT

HTMLDescr
ipt
ionLi
sts
HTMLal
sosuppor
tsdescr
ipt
ionl
i
sts.

Adescr
ipt
ionl
i
sti
sal
i
stoft
erms,
wit
hadescr
ipt
ionofeacht
erm.

The<dl
>tagdef
inesthedescri
pti
onli
st,he<
t dt
>tagdef
inest
het
erm
(name)
, he<
andt dd>tagdescr
ibeseachter
m:

Exampl
e
<dl>
<dt>Cof
fee</dt
>
<dd>-bl
ackhotdri
nk</dd>
<dt>Mil
k</dt
>
<dd>-whit
ecolddr
ink</dd>
</dl
>
HTMLLi
stTags
Tag Descr
ipt
ion

<ul
> Def
inesanunor
der
edl
i
st

<ol
> Def
inesanor
der
edl
i
st

<l
i
> Def
inesal
i
sti
tem

<dl
> Def
inesadescr
ipt
ionl
i
st

<dt
> Def
inesat
ermi
nadescr
ipt
ionl
i
st

<dd> Descr
ibest
het
ermi
nadescr
ipt
ionl
i
st

Foracomplet
eli
stofal
lav
ail
abl
eHTMLt
ags,
visi
tourHTMLTag
Refer
ence.

You might also like