AnHTMLedi tori

sacomputerprogr
am foredi
ti
ngHTML, themar kupofawebpage.
Alt
houghtheHTMLmar kupofawebpagecanbewr it
tenwithanyt exteditor
,speci
ali
zed
HTMLedi t
orscanof
ferconv
enienceandaddedfuncti
onali
ty.Forexampl e,manyHTML
edi
torshandl
enotonl
yHTML, butal
sorelat
edtechnol
ogiessuchasCSS, XMLand
JavaScr
iptorECMAScri
pt

Ty
pesofedi
tor
s

Ther
ear
etwomainv ari
eti
esofHTMLedi
tor
s:t
ext
ual
andWYSI
WYG(
whaty
ousee
i
swhatyouget
)edi
tors.

Textedi
tor
s

Texteditorsint
endedforusewithHTMLusual l
ypr ovi
deatl
eastsyntaxhighl
i
ghti
ng.
Someedi torsaddit
ional
l
yfeatur
etemplat
es,toolbarsandkeyboardshort
cutsto
qui
cklyinsertcommonHTMLel ementsandstructures.Wi
zar
ds, t
oolti
ppromptsand
autocompletionmayhelpwithcommont asks.

Textedit
orscommonl yusedf orHTMLt ypical
lyincludeeit
herbuilt
-i
nf unct
ionsor
i
ntegrat
ionwithexternaltoolsforsuchtasksasv ersi
oncontrol
,l
ink-checki
ngand
val
idati
on,codecleanupandf or
mat ti
ng,spell
-checking,
uploadi
ngbyFTPor
WebDAV, andstructuri
ngasapr oject
.Somef unct i
ons,suchaslinkcheckingor
val
idati
onmayuseonl inetools,r
equiri
nganet wor kconnecti
on.

Cr
eat
ingnewwebpage

Therearethr
eewayst ocreateanewpageintheHTMLEdi
tor
:usi
ngt
heQui
ckSt
art
Wizard,
start
ingf
rom scratch,usi
ngal
ayout
,orusi
ngat
heme.

Qui
ckLi
nks:

1.NewBl
ankPage
2.Usi
ngaLayout
3.Usi
ngaTheme

NewBl ankPage
Thisopti
onisbestf
orpeoplewhowanttoj
umpr
ighti
ntocodi
ngt
hei
rwebsi
te.I
fthat
soundslikey
ou,her
e'swhatyougot
tado:

St
ep1

Opent
heHTMLEdi
torandsel
ectNewBl
ankPagef
rom t
heWel
comewi
ndow.
Fi
gur
e1:
Wel
comeDi
alog.

I
fyoual
readyhav
etheEdi
toropen,
got
oFi
l
eMenu>NewBl
ankPage.

St
ep2

TheQuickStar
tWizardletsyouspecif
ysomebasicpagepr opert
ies,
incl
udi
ngthe
ti
tl
e,DOCTYPE,charact
erset,metainf
ormati
on,background,andcol
orscheme.
Wheny ou'
redonespecif
yingthi
sif
ormation,
thecorrespondi
ngcodeisautomati
cal
l
y
addedtoyourpage.

Bydefault
,newpagesi
ncl
udesomebasi cHTMLt ohel
pgety oustar
ted.Thi
s
i
ncludestheDOCTYPE,ht
ml,head,t
it
le,
met a,
andbodytags,andanHTMLcomment
st
atingthatt
hepagewascreatedwit
hCoffeeCupHTMLEdi t
or.

St
ep3

Confi
gur
ingt
hef
oll
owi
ngset
ti
ngsasneededi
nthepr
ovi
dedf
iel
dsi
ntheQui
ckSt
art
window.

Apar agraphinWor disanytextthatendswit

hahardr et
urn.Youinser
tahardretur
nanyti
me
youpr esstheEnterkey.Paragraphformat
ti
ngletsyoucontrol
theappearancei
findi
vi
dual
paragraphs.Forexample,youcanchanget heali
gnmentoftextfr
om leftt
ocenterort
he
spacingbetweenl i
nesform singlet
odouble.

Mi
crosof
tWor
d:For
mat
ti
ngPar
agr
aphs

Aparagraphi nWor disanyt extthatendswithahar dret

urn.Youi nsertahardret
urn
anyti
mey oupr esstheEnterkey .Paragraphfor
mat ti
ngletsy oucontrolt
he
appearanceifindiv
idualparagraphs.Forexampl e,y
oucanchanget healignmentof
textf
rom lefttocenterorthespaci ngbetweenlinesform singl
etodoubl e.Youcan
i
ndentpar agraphs,numbert hem, oraddbordersandshadi ngtothem.

Paragr
aphfor
matti
ngisappl
i
edt oanenti
reparagr
aph.Allf
ormatt
ingf ora
par
agraphi
sstor
edi nt
heparagraphmar
kandcar ri
edtothenextparagraphwhen
youpresst
heEnterkey
.Youcancopyparagraphformat
sf r
om paragraphto
par
agraphandvi
ewf or
matsthrought
askpanes.

Par
agr
aphAl
i
gnment

Paragraphal
i
gnmentdet er
mineshowtheli
nesi
napar agr
aphappeari
nrelat
iont
o
thelef
tandri
ghtmargins.Themargi
nisthebl
ankspacebetweentheedgeofthe
paperandwheret
het ext.
HTMLEdi
tor
:Bul
let
edLi
st

Wit
hint
heHTMLedi t
or,
youcancr
eat
eabul
l
etedl
i
storconv
ertexi
sti
ngpar
agr
aphs
i
ntoabull
etedl
i
st.

St
artandSt
opaBul
l
etedLi
st

1.Cl
i
ckt
heI
nser
t/Remov
eBul
l
etedLi
stbut
ton.Abul
l
etpoi
ntwi
l
lbei
nser
ted.

I
nsert/
RemoveBulletedListbutt
on
2.Onceyouhaveenteredthet extf
orthatbul
letpoint,
presstheEnter
/Retur
nkeyt
o
i
nsertanot
herbul
letedli
stitem.Repeatthi
sstepf oreachbull
etedl
isti
tem y
ouwish
t
oadd.
3.Whent hel
i
stiscompl et
e,presstheEnter/
Returnkeytwicetoexitl
istmode.

Conv
ertPar
agr
aphst
oaLi
st

1.Highl
i
ghtoneormor epar
agr
aphswithei
thert
hemouseoracombi
nat
ionofshi
ft
andarrowkeys.
2.Cli
cktheInser
t/Remov
eBull
etedLi
stbut
ton.

Conv
ertaLi
stt
oPar
agr
aphs

Toconver
tabul
l
etedli
stt
oparagraphs,
sel
ectt
heaf
fect
edl
i
sti
tems,
thencl
i
ckt
he
I
nser
t/Remov
eBull
etedLi
stbut
ton.

Conv
ertaBul
l
etedLi
stt
oaNumber
edLi
st

Hi
ghli
ghttheent
ir
eli
st,
thencli
cktheI
nser
t/RemoveNumber
edLi stbut
ton(
tot
he
l
eftofI
nsert
/RemoveBull
etedLi
stbut
ton)
.Theli
stfor
matwi
llchange.

I
nser
t/Remov
eNumber
edLi
stbut
ton

Cr
eat
eaNest
edLi
st

Not
e:Thi
sopt
ioni
snotav
ail
abl
eint
extar
easwi
thr
educedHTMLEdi
toropt
ions.

1.I
nsertanewbul
let
edl
isti
tem undertheit
em ofwhi
chitwi
l
lbeasub-
it
em.
2.Cli
ckthedownarr
ownexttot
heI nsert
/RemoveBul
let
edLi
stbut
tont
oaccesst
hel
i
st
opti
onsmenu.

Not
e:I
fyoudonotseeadownar
row,
theny
oumaybeusi
ngar
educedHTMLedi
tor
.
 3.Cl
i
ckt
heI
ncr
easeI
ndentopt
ion.

I
ncreaseandDecr easei ndentopt i
onsar eaccessedbyclicki
ngthedownarr
ownext
tot
heI nsert/
Remov eBul l
etedListbut t
on.
4.Toindentani tem evenf urther,
highli
ghtthelistit
em,cli
ckthedownarrownextt
ot he
I
nsert/
Remov eBulletedLi stbutt
on, andcli
ckI ncr
easeIndentagai
n.
5.Todecr easeanindent ,cli
ckt hedownar rownextt otheInsert
/RemoveBul
l
etedList
but
tonandcl ickDecr easeI ndent.

ChangeBul
l
etst
oCi
rcl
es,
Discs,
orSquar
es

1.Selectoneormor ebul
let
edli
sti
tems.
2.Right-
cli
ck(Windows)orcont
rol
-cl
i
ck(Macint
osh)toreveal
thel
i
stcont
extmenu.
SelectBull
etedLi
stProper
ti
estoopenthepop-upwindow.

Bull
etedListProperti
esopt
ioni
nt hecontextmenu
3.From theTy pepull
-downmenu,selectCi
rcl
e,Di
sc,orSquar
e,t
hencl
i
ckOK.Thel
i
st
bull
etswil
l change.

Applyi
ngSt y
lestoHTMLText.I
naddit
iont
osimplyfor
mattingi
ndiv
idualchar
actersor
paragraphsinyourHTMLdocument,
youcanapplysty
les,
orpredef
inedformatt
ing
i
nstructi
ons.IntheHTMLedi
tor
,youcandefi
neandapplystyl
esusingthefol
l
owi ng
techni
ques:

Whatar
eli
nks?

Whenitcomestoawebpage,li
nks(shortforHyperl
inks)ar
ehotspotst
hatallowa
vi
sit
ortoj
umpfrom onel
ocat
iontoanother.Thiscanbeaj umptoanotherwebpage,
adocument,
orevenanot
herwebsit
e.Al inkfunct
ioncanbeattr
ibutedt
ot extoran
i
mage.

HTMLf ramesareusedtodi
videy ourbrowserwindowi nt
omulti
plesect
ionswher
e
eachsecti
oncanloadaseparateHTMLdocument .Acoll
ect
ionoffr
amesi nt
he
browserwindowisknownasaf rameset .Thewindowisdivi
dedint
oframesina
si
mi l
arwaythetabl
esareor
ganized: i
ntor owsandcolumns.

Di
sadv
ant
agesofFr
ames
Ther
ear
efewdrawbackswi
thusi
ngf
rames,
soi
t'
snev
err
ecommendedt
ouse
fr
amesi
nyourwebpages−

 Somesmal lerdevicescannotcopewi t
hframesof t
enbecauset hei
rscreenis
notbigenought obedi vi
dedup.
 Sometimesy ourpagewi llbedispl
ayeddi
ffer
entl
yondi f
ferentcomputersdue
todi
ffer
entscr eenresol
ution.
 Thebrowser sbackbut
' t
onmi ghtnotworkast heuserhopes.
 Therearestil
lfewbr owsersthatdonotsupportfr
amet echnology.

Cr
eat
ingFr
ames

Touseframesonapageweuse<f rameset>taginst
eadof<body>tag.The
<fr
ameset>t
agdefi
nes,
howt odivi
det hewi
ndowi nt
oframes.Therowsat t
ri
buteof
<fr
ameset>t
agdefi
neshor
izontal
framesandcolsat t
ri
butedef
inesvert
icalf
rames.
Eachf
rameisindi
cat
edby<frame>t aganditdef
ineswhichHTMLdocumentshal l
openi
ntothefr
ame.

Not
e−The<f
rame>t
agdepr
ecat
edi
nHTML5.Donotuset
hisel
ement
.