Table of Contents

Chapter 1. Creating the Inner Pages............................................................. 1

What Well Do................................................................................................................................................................................. 2
Create a Folder................................................................................................................................................................................ 4
Open a New Html file...................................................................................................................................................................... 5
Save as Html.................................................................................................................................................................................... 6
Start the Web Page.......................................................................................................................................................................... 7
Create the Head............................................................................................................................................................................... 8
Write a Title..................................................................................................................................................................................... 9
Create the Body............................................................................................................................................................................. 10
Create the Style Sheet.................................................................................................................................................................... 11
Link the Style Sheet....................................................................................................................................................................... 12
Color the Background.................................................................................................................................................................... 13
Add a Section Header.................................................................................................................................................................... 14
Choose Fonts.................................................................................................................................................................................. 15
Change Text Color......................................................................................................................................................................... 16
Write a Paragraph.......................................................................................................................................................................... 17
Adjust Spacing............................................................................................................................................................................... 18
Create a Web Image....................................................................................................................................................................... 19
Crop an Image............................................................................................................................................................................... 20
Adjust Levels.................................................................................................................................................................................. 21
Resize an Image............................................................................................................................................................................ 22
Format Photos as JPEG................................................................................................................................................................ 23
Organize the Photos...................................................................................................................................................................... 24
Add Photos to Page....................................................................................................................................................................... 25
Label a Photo................................................................................................................................................................................. 26
Add a Subheader........................................................................................................................................................................... 27
Use Special Characters.................................................................................................................................................................. 28
Add More Text............................................................................................................................................................................... 29
Change Font Size........................................................................................................................................................................... 30
Float Images to One Side............................................................................................................................................................... 31
Pad the Images.............................................................................................................................................................................. 32
Reuse Styles................................................................................................................................................................................... 33
Draw a Border............................................................................................................................................................................... 34
Classify Paragraphs....................................................................................................................................................................... 35
Apply Italics to a Class.................................................................................................................................................................. 36
Add Line Breaks............................................................................................................................................................................ 37
Add Local Formatting................................................................................................................................................................... 38
Add Structure................................................................................................................................................................................ 39
Pad a Division............................................................................................................................................................................... 40
Clear Floats.................................................................................................................................................................................... 41
Add Another Postcard................................................................................................................................................................... 42
Float Images to Right.................................................................................................................................................................... 44
Mimic Shadow............................................................................................................................................................................... 46
Finish Inner Page.......................................................................................................................................................................... 47
Extra Bits....................................................................................................................................................................................... 48
Chapter 1. Creating the Inner Pages
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
1
1. creatIng tbe
Inner pages
The project that we'
compete n ths Look s a
weL ste wth two knds
o pages: nner pages
that contan detas and
photos aLout the postcard
coectons that we se,
and one man, or home
page whch nks to each
o those ndvdua pages.
Because t's smper, we'
start n ths chapter Ly
creatng one o the nner
pages, as shown at et.
ve' create the home
page n Chapter l.
Chapter 1. Creating the Inner Pages Page 1 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 2
wbat we'II do
1 lrst, on pages +-10, we' get set up Ly creatng a
text re or the weL page tse (ceramcs.htm). ve'
then create ts Lasc structure and gve t a tte.
3 On pages 1+-18, we' create
the eve 1 header and the rrst
paragraph and seect a ont and
coor or Loth.
6 On pages l7-21, we' move on to creatng
the eve l headers and the addtona text.
ve' adjust the sze o the new content and
then noat the mage to ts et.
7 On pages 2S-28, we'
then add the tem and prce
normaton wth manua ne
Lreaks and oca ormattng.
9 On pages +l-+7, we' rnay move on
to addng the three other postcards on ths
page, and then we' cassy them so that
every other one noats to the rght.
Chapter 1. Creating the Inner Pages Page 2 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
Copyright Safari Books Online #865622
3 creatIng tbe Inner pages
2 Next, on pages 11-12, we' create the text re or the stye sheet
(sarahs_styes.css), whch w contan the ormattng nstructons
or the weL page. ve' start Ly appyng a ght Lue Lackground.
4 On pages 19-l, our next step
w Le to create the mages or our
weL page (though you can copy them
rom the weL ste you preer), add
them to our page, and aLe them.
6 Next, on pages 2l-2+, we'
adjust the spacng Letween the
eements and draw a Lorder aLove
the eve l headers.
8 Next, on pages 29-+1, we' take
a step Lack and add some needed
structure to our HTNl re so that
we can ormat whoe dvsons o t
at once. ve' take advantage o the
dvsons to contro how the mages
noat and to add space Letween each
postcard secton.
10 On pages +8-Sl, n the extra Lts secton,
you' rnd addtona normaton aLout the
technques dscussed n ths chapter.
Chapter 1. Creating the Inner Pages Page 3 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 4
Ca the oder sarahs_weLste,
wth a owercase etters. Never
ncude spaces or any punctuaton
Lesdes the underscore. (Ths
s Nac OS X Lut the vndows
desktop s pretty smar ookng.)
ln the vndows Exporer (as
shown here) or n the Nac's
lnder, choose le New
loder to create the oder
n whch you' organze a
the res n your weL ste.
Ths smpe, Lut extremey
mportant, step w take a the
pan out o creatng nks and
nsertng mages ater on.
create a IoIder
Chapter 1. Creating the Inner Pages Page 4 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
6 creatIng tbe Inner pages
open a new btmI 6Ie
A weL page s nothng more than
a smpe text re. To start yours,
choose le New rom your
preerred text edtor. You can use
a dedcated text edtor ke Bare
Bones Sotware's BBEdt (or
Nac) or UtraEdt (or vndows)
or a word processor ke vord or
vordlerect.
Here s a new,
empty text
document n
TextEdt or
Nacntosh. You
can use the text
edtor or word
processor that
you're most
comortaLe wth
(or that's the
cheapest).
Chapter 1. Creating the Inner Pages Page 5 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 6
lt's aLsoutey essenta that you pay attenton to where you
save your res. ln ths exampe, we' save everythng n the
sarahs_weLste oder we created earer.
Name the re
ceramcs.htm.
ln genera, use
a owercase
etters or your
re names.
Never ncude
punctuaton or
spaces Lesdes
the underscore.
Add the .htm
extenson to a
weL page res.
lnay, choose Text Ony
(sometmes caed lan Text) as
the ormat or your weL page res.
Beore you start wrtng your weL
page, save t n the proper ormat
Ly choosng le Save As rom
your text edtor or word processor.
save as btmI
Chapter 1. Creating the Inner Pages Page 6 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
7 creatIng tbe Inner pages
start tbe web page

The htm tag s the rrst Lt o HTNl code

that you shoud type n the ceramcs.htm weL
page re that you created on the prevous page.
Ater eavng space or the contents o your weL
page, type the cosng /htm tag.
HTNl code s made up o eements
ke ths one, whch typcay consst
o an openng tag (htm) and
a cosng tag (/htm), a n
owercase etters.
ln ths Look, the HTNl code (whch n ths
chapter s the contents o the ceramcs.htm
re) w appear wth a ght orange Lackground
as shown here. The tags Leng dscussed on a
partcuar page w Le shown n Lack whe the
exstng tags (aready expaned on prevous
pages) w Le shown n a sghty darker orange.
Chapter 1. Creating the Inner Pages Page 7 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
8
<h1m1>
<hcad>
<1hcad>
<1h1m1>
The head tag shoud go just ater the nta htm
tag. The head secton contans normaton aLout the page,
ncudng the tte, stye and scrpts, author, and more.
The cosng /head tag separates the
normaton o the head secton rom the
contents o the Lody secton (whch contans
the vsLe part o your weL page, and whch
we' create on page 10).
create tbe bead
creatIng tbe Inner pages
Chapter 1. Creating the Inner Pages Page 8 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
9 creatIng tbe Inner pages
wrIte a tItIe
<h1m1>
<hcad>
<1111c>Saah`s ho1ccads - Ccam1cs Co11cc11on
<11111c>
<1hcad>
...
The tte o your page goes nsde openng and cosng tte tags wthn the
head secton o your weL page re. lt doesn't matter the code spans more
than one ne.
The tte s dspayed n the Lrowser's wndow
Lar (oten wth the Lrowser's name).
Ttes are aso used Ly deaut
to denty pages saved as
avortes or Lookmarks.
ln ths Look, the epss (...) ndcates that there s
more code than can rt n the ustraton.
Chapter 1. Creating the Inner Pages Page 9 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 10
...
<1hcad>
<body>
<1body>
<1h1m1>
Agan, the epss (...) ndcates that some o the code
has Leen omtted rom the ustraton.
The Lody secton contans the parts o your weL page
that vstors w see: text, mages, nks, and more. lt
Legns drecty ater the cosng /head tag and ends
rght Leore the rna /htm tag.
create tbe body
Chapter 1. Creating the Inner Pages Page 10 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
11 creatIng tbe Inner pages
1 A stye sheet s a
separate text re that
contans the ormattng
nstructons or your
weL page. To create
one, choose le New
rom your preerred
text edtor.
2 Next, choose le
Save As to gve the stye
sheet the proper name and
extenson.
3 Use sarahs_styes.css or the name
o the stye sheet. ln genera, use a
owercase etters wth no punctuaton
or spaces except the underscore, and
aways add the .css extenson.
4 Agan, pay
attenton to where
you save your res.
lor ths project, we'
store everythng n the
sarahs_weLste oder
to actate nkng the
documents ater.
create tbe styIe sbeet
6 Be sure to save the
stye sheet n lan Text or
Text Ony ormat. Accept
the deaut encodng.
Chapter 1. Creating the Inner Pages Page 11 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 12
IInk tbe styIe sbeet
<hcad>
<1111c>Saah`s ho1ccads - Ccam1cs Co11cc11on
<11111c>
<11nk c1="s1y1cshcc1" 1ypc="1cx11css"
hc!="saahs_s1y1cs.css" 1>
<1hcad>
The nk tag can Le paced
anywhere Letween the
openng and cosng head tags
(n the HTNl re).
Be sure to type the stye sheet's re
name exacty as you saved t on the
prevous page. As ong as t s ocated
n the same oder as the HTNl re
that uses t, you don't need to add any
addtona path normaton.
Because the nk eement
s secontaned-that
s, there s no separate
openng or cosng tag Lut
rather one snge unt-you
must ncude the orward
sash (/ ) Leore the rna
greaterthan sgn ().
ln ths Look, you' earn how
to create CSS or Cascadng Stye
Sheets. vhe there are other
stye sheet anguages, CSS s the
standard.
Chapter 1. Creating the Inner Pages Page 12 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
13 creatIng tbe Inner pages
coIor tbe background
body {backound. #LF!FF}
ln ths Look, the code or stye sheets
(whch n ths chapter s the contents o
the sarahs_styes.css re) w Le shown
wth a green Lackground. The new
code Leng dscussed w Le shown n
Lack whe exstng ragments w Le
shown n a darker green.
Ths w Le the rrst ne o
the sarahs_styes.css stye
sheet that we created on
page 11.
A stye rue Legns wth the
name o the eement(s) that
you are ormattng (Lody,
n ths case) and s oowed
Ly cury Lrackets ({ )) that
contan the detas aLout how
the eement shoud Le styed.
The actua ormattng nstructons consst
o a property (Lackground) and vaue
(=EDllll, whch s the CSS way to specy
the Lue l wanted) separated Ly a coon (:).
You can rnd a taLe o CSS propertes and
vaues n Appendx B. You' rnd a coor
chart n Appendx C.
Save Loth the CSS and
the HTNl res and
then open the weL
page wth a Lrowser
to see the Lue
Lackground.
Chapter 1. Creating the Inner Pages Page 13 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 14
...
<body>
<h1>Ccam1cs Co11cc11on<1h1>
...
There are sx eves o secton
headers: h1 through h. The
secton header text must Le
competey encosed wthn the
openng and cosng h1 tags.
Browsers
generay ormat
an h1 header n
Lack l+pont
Tmes, wth ots o
space aLove and
Leow (yech!).
add a sectIon beader
Chapter 1. Creating the Inner Pages Page 14 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
16 creatIng tbe Inner pages
cboose Ionts
body {backound. #LF!FF.
!on1-!am11y. "1cbuchc1 hS". A1a1.
c1vc11ca. sans-sc1!}
Each stye rue may have
as many propertyvaue
pars as needed. Separate
each one rom the next
wth a semcoon (,).
The ontamy property ets you specy
the preerred onts or dspayng a gven
eement. l the rrst ont s not avaaLe
on your vstor's computer, the second
ont w Le attempted, and so on. You
can aso specy a generc ont stye (ke
sansser) n case the vstor has none o
the preerred onts nstaed.
Encose mutword ont
names n quotes (").
Ater savng the CSS
re and rereshng
the Lrowser, you can
see the new ont (n
ths case, the vstor's
computer dd have
TreLuchet NS, a
pretty common ont,
nstaed). ve' work
on the coor and
spacng shorty.
Separate ont choces
wth commas (,).
Some propertes (ke ont
amy) are nherted. Ths
means that they arect not
ony the eement to whch
they are apped (Lody) Lut
aso the eements contaned n
that eement (h1). Appendx B
expans whch propertes are
nherted.
Chapter 1. Creating the Inner Pages Page 15 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 16
body {backound. #LF!FF.
!on1-!am11y. "1cbuchc1 hS". A1a1.
c1vc11ca. sans-sc1!.
co1o. #4L8SA0}
The coor property contros the
oreground coor o an eement.
lt's prncpay used to change text
coor. You' rnd a st o aowed coor
names, as we as a seecton o coors
and ther codes, n Appendx C.
Text on a weL page
ooks Lest when
there's enough
contrast Letween t
and the Lackground.
You don't want to
make your vstors
have to stran to read
your page.
cbange text coIor
Chapter 1. Creating the Inner Pages Page 16 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
17 creatIng tbe Inner pages
wrIte a paragrapb
...
<body>
<h1>Ccam1cs Co11cc11on<1h1>
<p>1hc no1ccads 1n 1hc Ccam1cs co11cc11on
!ca1uc c1oscups o! ocous. co1o!u1 po11cy
!om Anda1us1a and Ca1a1on1a.<1p>
...
End each paragraph wth
a /p. vhe t's easy
to orget ths step (and
Lrowsers are notorousy
orgvng), omttng the
rna /p can cause
ormattng errors.
Begn each paragraph wth a
p. vhe Lrowsers don't
care you put spaces or a ne
Lreak Letween the h1 eement
and the paragraph, t makes the
code easer to read you do.
The paragraph text nherts the Lue coor and
TreLuchet NS ont rom the Lody, just as the
secton header dd. Browsers automatcay ormat
paragraph text smaer than secton headers.
Chapter 1. Creating the Inner Pages Page 17 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 18
ad]ust spacIng
body {backound. #LF!FF.
!on1-!am11y. "1cbuchc1 hS". A1a1.
c1vc11ca. sans-sc1!.
co1o. #4L8SA0}
h1 {ma1n.0}
p {ma1n-1op.0. ma1n-bo11om.1!px}
The margn property contros how much
space s added Letween eements. Nost
Lrowsers automatcay add margn
space to headers and paragraphs. To
keep the header secton next to the
paragraph that oows t, set margns
or Loth eements to 0 (zero).
To keep a certan amount o
space Letween paragraphs,
set the Lottom margn to 1l
pxes, as shown. Nake sure
there s no space Letween
the 1l and the px.
The secton header
ooks much Letter
coser to the
paragraph. Note
that the Lody
st has a Lt o
margn whch s
keepng the h1 and
p eements rom
Luttng up next
to the Lrowser
wndow tse.
Chapter 1. Creating the Inner Pages Page 18 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
19 creatIng tbe Inner pages
create a web Image
Here s the orgna
photo, taken wth
a Canon Gl dgta
camera, at ll7l Ly
170+ pxes. The
photo has an overa
Lush tnt and t
seems ke t coud Le
cropped Letter. lt's
aso huge, weghng
n at 11NL, whch
woud take an awu
ong tme to oad.
The rna mage, whch has
Leen cropped and reszed,
had ts eves adjusted, and
saved as a compressed JlEG.
lt now takes up ony 1+.SK.
There are many good mage
edtors, ncudng AdoLe
lhotoshop Eements and
JASC's lant Shop lro, whch
Loth reta or 599 Lut oten
come ncuded ree wth
dgta cameras and scanners.
Chapter 1. Creating the Inner Pages Page 19 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 20
crop an Image
1 Seect the croppng too.
(Ths s lhotoshop Eements
Lut most mage edtors work
n a smar way.)
2 l you want, set the desred rna
sze n pxes. Ths saves you the joL
o reszng t manuay ater on.
3 loston
the croppng
rame unt the
hghghted part
covers just the
porton o the
mage that you
want to keep. Then
douLecck nsde
to crop (or choose
lmage Crop).
Chapter 1. Creating the Inner Pages Page 20 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
21 creatIng tbe Inner pages
2 ln the leves Lox (Command l), drag
the whte trange etward towards the oot
o the mountan to ncrease the tona range
o the hghghts. You can aso drag the Lack
trange rghtward toward the mountan (to
adjust the shadows). Here t's not necessary.
ad]ust IeveIs
3 The mage s Lrghter and Letter
Laanced. The erect s even more
pronounced (and mportant) on screen,
.e., n a weL Lrowser.
1 The orgna mage s
dark and eess.
Chapter 1. Creating the Inner Pages Page 21 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 22
resIze an Image
Nany dgta cameras
and scanners create
mages that are
smpy too Lg or a
weL page. Ths one
measures ll7l pxes
across, amost our
tmes as Lg as an
average page. And t
takes up 29K, whch
w take more than a
mnute to downoad.
ln lhotoshop Eements,
choose le Save
or veL and then use
the lmage Sze area
to resze your mage.
Choose a sze keepng
n mnd that an average
weL page measures
around 00 pxes wde,
and that the Lgger the
mage, the onger t w
take to downoad. Here
l've reduced the mage
to 200 pxes wde and
t now ony takes +
seconds to downoad.
Chapter 1. Creating the Inner Pages Page 22 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
23 creatIng tbe Inner pages
Iormat pbotos as ]peg
The JlEG ormat s the most
emcent compresson system
or photographs.
The Ouaty o the JlEG compresson s
drecty reated to the rna sze o the
mage. However, you can oten trade a
sma amount o quaty or a consderaLe
amount o reduced downoad tme.
ln lhotoshop Eements' Save lor veL daog Lox,
you can compare the compressed verson wth the
orgna n order to determne a quaty that's hgh
enough to ook pretty and ow enough to ensure an
acceptaLe downoad tme.
Chapter 1. Creating the Inner Pages Page 23 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 24
organIze tbe pbotos
Once you cck OK n the Save lor veL daog
Lox, you' Le aLe to gve your mage a name.
RememLer to use a owercase etters and no
spaces or punctuaton except the underscore.
lay attenton to
where you save
your mages. lt's
easest you put
them n the same
oder as your
other weL res.
vhen you've rnshed
preparng your mages,
check agan to make sure
they're n the same oder
as your HTNl document.
lt w make nkng the
mages much easer.
Chapter 1. Creating the Inner Pages Page 24 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
26 creatIng tbe Inner pages
add pbotos to page
...
<p>1hc no1ccads 1n 1hc Ccam1cs co11cc11on
!ca1uc c1oscups o! ocous. co1o!u1 po11cy
!om Anda1us1a and Ca1a1on1a.<1p>
<1m sc="saada_!am111a.p" a11="Fu1uc
Saada Fam111a Ccam1cs" W1d1h="180"
hc1h1="!10" 1>
...
The mg eement s or addng photos to the
page. Specy the mage's re name and ocaton
wth the src attrLute. As ong as the mage s
n the same oder as the HTNl re, you don't
need to add any extra path normaton.
The text n the at
attrLute w appear
the mage as to oad.
lt s aso hepu to the
vson mpared.
Type n the heght and wdth o the mage n
pxes or as a percentage o the Lrowser wndow.
By deaut, an mage appears
drecty ater the code that
precedes t. Snce the precedng
eement was a paragraph, ths
mage starts on ts own ne.
lmages, can, however, appear
wthn a ne.
Chapter 1. Creating the Inner Pages Page 25 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 26
IabeI a pboto
...
<1m sc="saada_!am111a.p" a11="Fu1uc
Saada Fam111a Ccam1cs" W1d1h="180"
hc1h1="!10" 1111c="Saada Fam111a. !010?.
10 no1ccads !o S1!.99. 10 pos1cads !o
S8.99" 1>
...
A aLe appears when your vstor ponts
at the mage wth ther mouse. laLes
automatcay dsappear wthn a ew
seconds (and thus shoud Le short enough
to Le read n that amount o tme).
To create a aLe, nsert a tte attrLute wthn
the mg eement (t doesn't matter where). Be
sure to encose the aLe text n quotaton marks.
You can rx that nasty
ne Lreak wth a
nonLreakng space
(8nLsp,). See extra Lts
on page S0.
Chapter 1. Creating the Inner Pages Page 26 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
27 creatIng tbe Inner pages
add a subbeader
...
<1m sc="saada_!am111a.p" a11="Fu1uc
Saada Fam111a Ccam1cs" W1d1h="180"
hc1h1="!10" 1111c="Saada Fam111a. !010?.
10 no1ccads !o S1!.99. 10 pos1cads !o
S8.99" 1>
<h!>Saada Fam111a. !010?<1h!>
...
Browsers automatcay
ormat headers Lgger
and Loder than
surroundng text
wth each suLsequent
eve smaer than the
precedng one. The ont
and coor that we apped
to the entre Lody (on
pages 1S-1) overrde
the Lrowser's deauts.
Headers automatcay
start on a new ne.
There are sx eves o header, rom
h1 to h. Don't orget the matchng
cosng tag.
Chapter 1. Creating the Inner Pages Page 27 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 28
use specIaI cbaracters
...
<h!>&1dquo.Saada Fam111a. !010?&dquo.<1h!>
...
The code or a speca character,
caed a reerence, starts wth an
ampersand (8), whch s oowed
Ly the character's name or numLer
(dquo), and s then rnshed or wth a
semcoon (,).
dquo and rdquo stand
or et douLe quotes
and rght douLe quotes
respectvey.
Cury quotes and accents are among the most
common speca symLos that need to Le entered
wth character reerences. They hep gve your
page a proessona ook. l you type them n
drecty, they are not dspayed propery. You
can rnd a st o speca characters and ther
correspondng reerences n Appendx D.
Chapter 1. Creating the Inner Pages Page 28 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
29 creatIng tbe Inner pages
...
<h!>&1dquo.Saada Fam111a. !010?&dquo.<1h!>
<p>1h1s 1s a p1ccc o! 1hc ccam1cs 1ha1
1hcy`11 cvcn1ua11y usc 1o n1sh 1hc
cons1uc11on o! 1hc Saada Fam111a chuch
1n acc1ona. 1 1ook a s1m11a p1c1uc 1as1
yca 1h1nk1n 1ha1 by 1h1s yca. 1hcy`d bc
1ns1a11cd a1cady. hopc. ho1 yc1.<1p>
...
add more text
Begn each paragraph
wth a p.
End each paragraph
wth a /p.
A new paragraph starts
on ts own ne Leow the
header. lt has the same
ormattng as the rrst
paragraph we entered.
Chapter 1. Creating the Inner Pages Page 29 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 30
...
h1 {ma1n. 0}
p {ma1n-1op.0. ma1n-bo11om.1!px.
!on1-s1zc.1!px. 11nc-hc1h1.1.!}
cbange Iont sIze
The ontsze property can Le specred
n severa ways, wth pxes Leng the
most common and Lest supported
unt. Nake sure there's no space
Letween the numLer and the px.
Specyng the neheght gves you
contro over the amount o space
Letween nes. Here, or exampe,
there w Le 1+.+px (1.l tmes the
ont sze o 1lpx) Letween each
ne o paragraph text.
There must Le a semcoon Letween
every propertyvaue par!
A paragraphs are arected
Ly the change. Headers
reman the same.
Chapter 1. Creating the Inner Pages Page 30 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
31 creatIng tbe Inner pages
Roat Images to one sIde
...
p {ma1n-1op.0. ma1n-bo11om.1!px.
!on1-s1zc.1!px. 11nc-hc1h1.1.!}
1m {Foa1.1c!1}
The noat property makes the eement
nto a sort o sand, wth text and other
eements nowng around t (ke water). ln
our project, the mg eements w noat et,
whch means that the water w now on
the rght sde.
The space Letween
noated mages and ther
surroundng eements
oten needs to Le
adjusted. Notce that t s
very tght here. ve' rx
that on the next page.
Eements noat wth
respect to the eements
that oow them. There
s no erect on precedng
eements.
Chapter 1. Creating the Inner Pages Page 31 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 32
pad tbe Images
...
p {ma1n-1op.0. ma1n-bo11om.1!px.
!on1-s1zc.1!px. 11nc-hc1h1.1.!}
1m {Foa1.1c!1. padd1n-1h1.10px}
ve' add a 10pxewde pad (a Leach
or our sand) to the rght sde o the
noatng mages to keep the surroundng
eements rom touchng. laddng may
aso Le apped to the top, Lottom, or
et, or to a sdes (Ly eavng out the
drecton).
The text ooks much
Letter now that t s
not jammed up next
to the photo.
Chapter 1. Creating the Inner Pages Page 32 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
33 creatIng tbe Inner pages
reuse styIes
...
h1. h! {ma1n. 0}
p {ma1n-1op.0. ma1n-bo11om.1!px.
!on1-s1zc.1!px. 11nc-hc1h1.1.!}
1m {Foa1.1c!1. padd1n-1h1.10px}
ve apped a margn o 0 to the eve 1
headers Lack on page 18 to remove the
deaut space that most Lrowsers appy
around headers. To appy ths stye to
eve l headers as we, smpy type a
comma (,) and hl ater the orgna h1.
l'm not sure why
Lrowsers haLtuay
put so much space
Letween a header and
the paragraph that
oows t. But t sure
ooks Letter now that
we've gotten rd o
the extra space.
Chapter 1. Creating the Inner Pages Page 33 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 34
draw a border
...
h1. h! {ma1n. 0}
h! {bodc-1op. 1px so11d #4L8SA0}
p {ma1n-1op.0. ma1n-bo11om.1!px.
!on1-s1zc.1!px. 11nc-hc1h1.1.!}
...
Snce we ony want the eve l headers
to have the Lorder, we make a new
rue just or hl. lts propertes w Le
added to prevous rues that appy to
hl (and woud overrde them they
conncted-whch here they do not).
A Lorder has three parts:
wdth (1px), stye (sod), and coor
(=+DSA0). You' rnd a st o
Lorder propertes n Appendx B.
You' rnd a st o coor codes n
Appendx C.
A sod Lue, 1pxe
Lorder w now appear
at the top o each eve
l header. Borders are
drawn on the outsde
edge o any paddng that
has Leen apped and on
the nsde edge o the
eement's margn.
Chapter 1. Creating the Inner Pages Page 34 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
36 creatIng tbe Inner pages
cIassIIy paragrapbs
...
<p>1h1s 1s a p1ccc o! 1hc ccam1cs 1ha1
1hcy`11 cvcn1ua11y usc 1o n1sh 1hc
cons1uc11on o! 1hc Saada Fam111a chuch
1n acc1ona. 1 1ook a s1m11a p1c1uc 1as1
yca 1h1nk1n 1ha1 by 1h1s yca. 1hcy`d bc
1ns1a11cd a1cady. hopc. ho1 yc1.<1p>
<p c1ass="sa1cs_1n!o">11cm humbc. 784S-C<1p>
...
ve' create a new knd o paragraph or the
postcards' saes normaton. ve aLe these
paragraphs as such Ly addng the cass attrLute.
On the next page, we' Le aLe to add ormattng
to ony the paragraphs aLeed wth ths cass.
The saes_no paragraph
starts out wth the same
ormattng as a other
paragraphs. ve' add to t
on the next page.
Chapter 1. Creating the Inner Pages Page 35 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 36
appIy ItaIIcs to a cIass
...
p {ma1n-1op. 0. ma1n-bo11om. 1!px.
!on1-s1zc. 1!px. 11nc-hc1h1.1.!}
p.sa1cs_1n!o {!on1-s1y1c. 11a11c}
...
The perod (.) here means that ths
stye rue appes ony to p eements
wth a cass attrLute o saes_no.
The ontstye property specres
whether text shoud Le dspayed
as tac, oLque, or norma.
The other paragraphs
are not arected.
Ony the saes_no paragraph
s dspayed n tacs.
Chapter 1. Creating the Inner Pages Page 36 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
37 creatIng tbe Inner pages
...
<p c1ass="sa1cs_1n!o">11cm humbc. 784S-C
<b 1>10 no1ccads !o S1!.99
<b 1>10 pos1cads !o S8.99
<1p>
...
add IIne breaks
lnsert Lr / where each ne
Lreak shoud occur. There
shoud Le a space Letween the
Lr and the orward sash (/).
lt doesn't matter you type the HTNl
code on separate nes or not. l have
done that here to make the code easer
to read, Lut t s not requred.
You mght want to nsert
ne Lreaks n short sts o
thngs or n nes o poetry.
Chapter 1. Creating the Inner Pages Page 37 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 38
...
<p>1hc no1ccads 1n 1hc <1>Ccam1cs co11cc-
11on<11> !ca1uc c1oscups o! ocous. co1o-
!u1 po11cy !om Anda1us1a and Ca1a1on1a.<1p>
...
<p c1ass="sa1cs_1n!o">11cm humbc. 784S-C
<b 1>10 no1ccads !o <b>S1!.99<1b>
<b 1>10 pos1cads !o <b>S8.99<1b>
...
add IocaI IormattIng
Add at the Legnnng and / at the end o text
to dspay a sma amount o text n tacs. (lor arge
amounts, use ontstye, descrLed on page 2.)
Add L at the Legnnng and /L
at the end to make a sma amount
o text Lod. (lor arge amounts, use
ontweght, descrLed on page 7l.)
Text dspayed n tacs.
Text hghghted n Lod.
Chapter 1. Creating the Inner Pages Page 38 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
39 creatIng tbe Inner pages
add structure
...
<d1v c1ass="1n1o"><h1>Ccam1cs Co11cc11on
<1h1>
<p>1hc no1ccads 1n 1hc <1>Ccam1cs co11cc-
11on<11> !ca1uc c1oscups o! ocous. co1o-
!u1 po11cy !om Anda1us1a and Ca1a1on1a.<1p>
<1d1v>
<d1v c1ass="pos1cad">
<1m sc="saada_!am111a.p" a11="Saada
Fam111a Ccam1cs" W1d1h="180" hc1h1="!10"
1111c= "Saada Fam111a. !010?. 10 no1ccads
!o S1!.99. 10 pos1cads !o S8.99" 1>
<h!>&1dquo.Saada Fam111a. !010?&dquo.<1h!>
<p>1h1s 1s a p1ccc o! 1hc ccam1cs 1ha1 ...
hopc. ho1 yc1.<1p>
<p c1ass="sa1cs_1n!o">11cm humbc. 784S-C
<b 1>10 no1ccads !o <b>S1!.99<1b>
<b 1>10 pos1cads !o <b>S8.99<1b>
<1p>
<1d1v>
...
ve can dvde the weL page nto ts
structura eements (ntroducton,
normaton aLout postcards, etc.) wth dv
eements, and then ormat those dvsons
as a unt (as shown on pages +0-+1).
laLe each dvson wth
an approprate vaue or
the cass attrLute (e.g.,
ntro and postcard).
Chapter 1. Creating the Inner Pages Page 39 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 40
...
body {backound. #LF!FF.
!on1-!am11y. "1cbuchc1 hS". A1a1.
c1vc11ca. sans-sc1!. co1o. #4L8SA0}
d1v.pos1cad {padd1n.1Spx}
h1. h! {ma1n. 0}
...
pad a dIvIsIon
Once we have created and aLeed the dvsons
o our weL page, we can appy styes to an entre
dvson. Here we add 1S pxes o paddng around
a our sdes o each postcard dvson.
RememLer, the perod means appy ths stye to
ony the dv eements whose cass s postcard.
The postcard dvson
(Lut not the ntro
dvson) now has 1S
pxes o paddng on a
sdes to hep set t or
rom the other parts o
the weL page.
Chapter 1. Creating the Inner Pages Page 40 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
41 creatIng tbe Inner pages
...
body {backound. #LF!FF.
!on1-!am11y. "1cbuchc1 hS". A1a1.
c1vc11ca. sans-sc1!. co1o. #4L8SA0}
d1v {c1ca.bo1h}
d1v.pos1cad {padd1n.1Spx}
h1. h! {ma1n. 0}
...
cIear Roats
Set the cear property or dv eements to Loth so
that a new postcard dvson (whch we' add on
pages +l-+2) won't start unt Loth the et and rght
sdes are ree o noatng eements-that s, unt we
get past the pcture o the prevous postcard.
vthout the cear property, the next eements woud start
drecty ater the precedng eement (10 postcards or 58.99).
The next dvson
w start ater the
noatng mage.
Chapter 1. Creating the Inner Pages Page 41 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 42
add anotber postcard
...
<p c1ass="sa1cs_1n!o">Rc!. 784S-C
<b 1>10 no1ccads !o <b>S1!.99<1b>
<b 1>10 pos1cads !o <b>S8.99<1b>
<1p>
<1d1v>
<d1v c1ass="pos1cad">
<1m sc="danc1n_s1as.p" a11="Lanc1n
S1as a1 1hc A1hamba" W1d1h="!10"
hc1h1="180" 1111c="A1hamba S1as. 10
no1ccads !o S1!.99. 10 pos1cads !o
S8.99" 1>
<h!>&1dquo.Lanc1n S1as&dquo.<1h!>
<p>A11houh dcp1c11n 11v1n cca1ucs 1n a1
1s 1ad111ona11y !oWncd on by 1hc 1s1am1c
c111on. 1hc mosa1cs 1n 1hc A1hamba 1n
Canada ac !u11 o! 11!c and movcmcn1.
<1p>
<p c1ass="sa1cs_1n!o">11cm humbc. 4S8!-C
<b 1>10 no1ccads !o <b>S1!.99<1b>
<b 1>10 pos1cads !o <b>S8.99<1b>
<1p>
<1d1v>
The new dvson has precsey the
same eements as the prevous one: an
mage wth a tte oowed Ly a eve l
header, a paragraph, and rnay, the saes
normaton.
Chapter 1. Creating the Inner Pages Page 42 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
43 creatIng tbe Inner pages
The Leauty o CSS s that the new
eements are automatcay ormatted
just ke ther exstng counterparts.
lor exampe,
the new eve l
header has a 1
pxe sod Lue
ne aLove t,
the saes_no
paragraph s
dspayed n
tacs, and the
mage noats to
the et.
Chapter 1. Creating the Inner Pages Page 43 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 44
...
1m.odd {Foa1.1c!1.padd1n-1h1.10px}
1m.cvcn {Foa1.1h1.padd1n-1c!1.10px}
...
Roat Images to rIgbt
1 To noat every other mage to the rght,
we rrst need to dvde the mages nto two
casses: the odd ones and the even ones.
...
<d1v c1ass="pos1cad">
<1m sc="saada_!am111a.p" c1ass="odd"
a11="Saada Fam111a Ccam1cs" W1d1h="180"
hc1h1="!10" 1111c= "Saada Fam111a. !010?.
10 no1ccads !o S1!.99. 10 pos1cads !o
S8.99" 1>
...
<d1v c1ass="pos1cad">
<1m sc="danc1n_s1as.p" c1ass="cvcn"
a11="Lanc1n S1as a1 1hc A1hamba"
W1d1h="!10" hc1h1="180" 1111c="A1hamba
S1as. 10 no1ccads !o S1!.99. 10 pos1cads
!o S8.99" 1>
...
2 Next, we make the exstng
mg stye rue appy ony to the
mg eements whose cass s odd.
3 lnay, we add a second stye
rue to noat the even mages to the
rght (wth paddng on the et).
Chapter 1. Creating the Inner Pages Page 44 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
46 creatIng tbe Inner pages
The rrst mage
contnues to
noat to the et
as Leore.
The even mage sand now noats to the
rght whe ts water nows to the et. ve
needed to put the paddng on the et to
separate the mage rom the descrptve text.
Chapter 1. Creating the Inner Pages Page 45 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 46
...
1m.odd {Foa1.1c!1.padd1n-1h1.10px}
1m.cvcn {Foa1.1h1.padd1n-1c!1.10px.
backound.#LF!FF}
...
mImIc sbadow
The drop shadow makes
t ook as there s a
space Letween the rrst
mage and the Lue ne
even though they're rght
next to one another.
The coor o the paddng
comes rom an eement's
Lackground-whch Ly
deaut s transparent.
By settng the mage's
Lackground-and thus
ts paddng-to the same
ght Lue as the Lody's
Lackground, we cover up
10 pxes o the Lue ne
and create the same erect
that the shadow creates n
the upper mage.
ve' change the even mages'
Lackground coor to the same ght
Lue as the Lody's Lackground.
Chapter 1. Creating the Inner Pages Page 46 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
47 creatIng tbe Inner pages
6nIsb Inner page
lnsh the nner page
Ly addng the necessary
HTNl code to create
the ast two postcard
dvsons. (You can rnd
the exampe res onne,
you preer. See page x.)
Chapter 1. Creating the Inner Pages Page 47 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 48
save as btmI p. 6
- ln act, n ths Look, you' Le
wrtng XHTNl, whch s the most
current, most standard verson o
HTNl. The extenson s st .htm.
- Don't choose the Save as veL
lage command n Ncrosot
vord. lt s desgned or convert
ng a vord document nto HTNl,
not or savng a document aready
wrtten n HTNl.
- Once you save a document wth
the .htm extenson, douLecck
ng t w oten open your Lrows
er, not the text edtor. ln order to
edt the page, ether open t rom
nsde your text edtor (usng
le Open) or rghtcck t on
the desktop, and choose Open
wth [your text edtor].
wrIte a tItIe p. 9
- The tte o your weL page s one
o the key actors n gettng t
ranked on a search engne ke
Googe. Use specrc words n your
tte that renect the content o
your page.
extra bIts
start tbe web page p. 7
- Omcay, weL pages shoud Legn
wth a DOCTYlE decaraton,
whch descrLes the verson o
HTNl Leng used. lor exampe:
!DOCTYlE htm lUBllC "//
v2C//DTD XHTNl 1.0 Trans
tona//EN"
"http://www.w2.org/TR/xhtm1/
DTD/xhtm1transtona.dtd"
htm xmns="http://www.
w2.org/1999/xhtm"
But t's not the end o the word
you just start wth htm.
coIor tbe background p. 13
- An eement's Lackground s trans
parent Ly deaut. That means that
t s on top o another eement,
you' see the other eement's
Lackground shnng through.
- The part o a stye rue that de
scrLes the eements that w Le
arected Ly the rue s caed the
seector. lt can Le as smpe as an
eement's name as n the exampe
here (Lody), or t can Le more
compex n order to seect ony
certan eements that satsy gven
crtera. ve' see some more com
pcated seectors n Chapter l.
Chapter 1. Creating the Inner Pages Page 48 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
49 creatIng tbe Inner pages
ad]ust spacIng p. 18
- The margn s the amount o space
around the outer edge o an ee
ment, Leyond the paddng and the
Lorder (whch are dscussed on
pages 2l and 2+, respectvey).
lt s cooress.
- l you use one vaue, as n
margn:0, t s apped to a our
sdes equay.
- l you use two vaues, as n
margn: Spx 0, the rrst s used or
the top and Lottom and the sec
ond s used or the rght and et.
- vth three vaues, as n margn:
10px Spx +px, the rrst s used or
the top, the second or the rght
and et and the thrd or the
Lottom.
- l you use our vaues, as n
margn: 10px lpx Spx 8px, they
are apped to the top, rght, Lot
tom, and et, n cockwse order.
- You can add the margn to one
partcuar sde o the eement Ly
usng margntop, margnLottom,
margnrght, or margnet
nstead o just margn. ln that
case, o course, just one vaue s
requred.
create a web Image p. 19
- The technques descrLed on pages
19-l2 are desgned to Le ustra
tve, not exhaustve-snce there
are many drerent mage edtors
on the market. The most mpor
tant thng to earn s that photos
amost aways need to Le cropped
or reszed, adjusted, and com
pressed. You may need to consut
your mage edtor's manua or
hep screens to rgure out the
exact steps t requres.
cboose Ionts p. 16
- The oowng onts come wth the
standard nstaaton o lnternet
Exporer or vndows and are
thus key to Le nstaed on your
vstor's computer: Andae Nono,
Ara Back, Comc Sans NS,
Georga, lmpact, TreLuchet NS,
Verdana and veLdngs. lor more
normaton, see http://www.
mcrosot.com/typography/onts/
deaut.aspx.
- There s a ont property whch
acts as a shortcut or specyng
not ony the ontamy, Lut
aso the ontsze, neheght,
ontweght, ontstye, and
ontvarant. lor detas, see
Appendx B, CSS Reerence.
- An eement that s nsde another
eement s caed a chd eement.
The outer eement s caed a
parent eement.
Chapter 1. Creating the Inner Pages Page 49 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 60
Iormat pbotos as ]peg p. 23
- vhen an mage s compressed
wth JlEG, some detas are per
manenty dscarded. You shoud
thereore ony save an mage as
JlEG once, when you are rnshed
makng any other necessary ad
justments. Repeatedy savng an
mage n JlEG ormat can make t
Lurry.
- lor computergenerated mages,
use Gll ormat (wth lZv com
presson). ve' dscuss ths more
on page 7.
IabeI a pboto p. 26
- lnsert nonLreakng spaces
(8nLsp,) Letween words n a aLe
to avod nasty ne Lreaks ke the
one shown on page l.
- The ony mt l've ound to the
quantty o text you can put n a
tte s the amount o tme your
vstors have to read t Leore t
automatcay dsappears.
- l your aLe contans douLe
quotes, you can use snge quotes
to encose the whoe aLe. lor
exampe, tte='These are the
"Sagrada lama" ceramcs'.
add pbotos to page p. 26
- You can create a oder wthn
your weL oder to organze your
mages, say sarahs_mages. Then,
the src attrLute w need to
renect that new ocaton:
/sarahs_mages/park_gue.jpg.
- vhe you can use the heght
and wdth attrLutes to change
the sze o the mage n your weL
page, t's not the Lest method
or dong so. To make an mage
smaer, crop (page l0) or resze
t (page ll). To make an mage
Lgger, reshoot t!
extra bIts
use specIaI cbaracters p. 28
- You ony need to use a character
reerence or a speca symLo
that symLo s not part o your
weL page's encodng, whch
renects the page's prncpa an
guage. lor weL pages wrtten
n Engsh on Engsh operatng
systems, that means any symLos
Leyond the rrst 1l8 n ASCll.
You' rnd a st o these symLos
wth ther correspondng charac
ter reerences n Appendx D.
- lor u detas aLout wrtng
pages wth arge portons n other
anguages, see Chapter l0, Sym
Los and NonEngsh Characters,
n my HTNl VOS (descrLed on
page xv).
Chapter 1. Creating the Inner Pages Page 50 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
61 creatIng tbe Inner pages
cbange Iont sIze p. 30
- You can set a specrc ont sze n
pxes (px), ponts (pt), centme
ters (cm), mmeters (mm), or
pcas (pc). Ony pxes shoud Le
used or settng a specrc sze on
screen, the others are good or
controng prnted output.
- You can aso use keywords to
specy a specrc sze-xxsma,
xsma, sma, medum, arge,
xarge, or xxarge-however,
Lrowsers nterpret these keywords
n drerent ways.
- You can set the ont sze rea
tve to the parent eement (that
s, the eement that contans the
one you're dernng) Ly usng ems
(em) or a percentage (). You
can aso use the reatve keywords
arger or smaer.
- The ne heght can Le specred as
an aLsoute vaue n pxes (px), or
reatve to the eement's ontsze,
ether as a numLer (say, 1.l), as
a percentage (1l0), or n ems
(em). The drerence es n how
the vaues are nherted Ly ee
ments contaned n the one you're
dernng. ve' dscuss ths n more
deta n Chapter l.
- The paddng s apped wth the
same system as the margn. See
adjust spacng on page +9.
- laddng s the same coor as the
eement's Lackground.
- l two adjacent eements Loth
have paddng, Loth vaues are
added together and may resut
n too much space. (ln contrast,
adjacent vertca margns are com
Lned, resutng n a vaue equa to
the arger o the two.)
pad tbe Images p. 32
- The paddng s the space Letween
an eement's content and ts Lorder
(whch s dscussed on page 2+).
draw a border p. 34
- The Lorder s the outer edge o
the paddng and the nner edge o
the margn.
- The Lorderstye can Le none, dot
ted, dashed, sod, douLe, groove,
rdge, nset, or outset.
- The deaut Lorderstye s none,
whch means you don't specy a
stye, you won't get a Lorder.
- You can appy ony one aspect o a
Lorder (to one or more sdes o an
eement) Ly usng Lordercoor,
Lorderwdth, or Lorderstye. Use
one to our vaues n the same
way as descrLed or margns on
page +9.
- You can appy one or more Lorder
aspects to one partcuar sde o
a Lorder Ly usng Lorderrght,
Lordertop, etc., aong wth up to
three desred vaues.
Chapter 1. Creating the Inner Pages Page 51 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.
creatIng tbe Inner pages 62
extra bIts
add IIne breaks p. 37
- Note that the Lr eement s
empty. The text, 10 notecards or
51l.99, s n the p eement, not
the Lr eement.
add structure p. 39
- The dv eement has no deaut
ormattng. However, t s a Lock
eve eement, whch means t w
aways start on ts own ne.
draw a border (cont.)
- You can even appy a snge Lorder
aspect to a snge sde o an ee
ment wth somethng ke Lorder
topcoor.
- l you specy ony some aspects o
a Lorder, the other aspects are set
to ther deauts.
cIear Roats p. 41
- The cear property can Le set to
Loth, et, rght, or none.
add IocaI IormattIng p. 38
- You can aso use the ogca HTNl
eements, strong and em (or
emphass) to add oca ormattng.
Text marked wth strong s usuay
dspayed Lod, em text s usuay
dspayed n tacs.
- You can make text Lgger and
smaer wth Lg and sma.
- You can ormat text as a suLscrpt
(suL) or superscrpt (sup).
- You can underne text wth ns
(or nsert), and you can strke out
text wth de (or deete).
- loca ormattng shoud ony Le
used or sma amounts o text.
Use styes or whoe paragraphs or
dvsons.
Chapter 1. Creating the Inner Pages Page 52 Return to Table of Contents
Chapter 1. Creating the Inner Pages
Creating a Web Page with HTML: Visual QuickProject Guide By Elizabeth Castro ISBN:
032127847X Publisher: Peachpit Press
Prepared for Linda Lamb, Safari ID: lambl@nashua.edu
Print Publication Date: 2004/08/03 User number: 865622 Copyright 2008, Safari Books Online, LLC.
This PDF is exclusively for your use in accordance with the Safari Terms of Service. No part of it may be reproduced or transmitted in any form by any means without the prior
written permission for reprints and excerpts from the publisher. Redistribution or other use that violates the fair use priviledge under U.S. copyright laws (see 17 USC107) or that
otherwise violates the Safari Terms of Service is strictly prohibited.