Examples

About Download

Chapters

1 2 3

These Web pages contain all the examples from the book Creating a Web Page with HTML: Visual QuickProject Guide written by Elizabeth Castro.

There are only four example files used throughout the book. In Chapter 1, you create the inner page, along with its style sheet. In Chapter 2, you create the home page and its style sheet.

However, below I’ve also provided a set of sequential files that reflect the stage of each of those four files as you go through the book. Each of those files contains only the code that has been completed up to that page. You can use these files to check your progress as you complete the project.

When you click on a file's link, you'll see it open up in a new "examples" window. You can choose View > Source from your browser to see the HTML code for that file.

You can also download the finished example files all at once (for either Macintosh or Windows). And you can download the entire set of incremental examples from each page.

Remember that all the examples files and images are © 2004 Elizabeth Castro. All rights reserved.

the complete example files

Chapter 1ceramics.html
sarahs_styles.css
Chapter 2index.html
home.css

1: creating the inner pages

start the web page (p. 7)p007_html.html
create the head (p. 8)p008_head.html
write a title (p. 9)p009_title.html
create the body (p. 10)p010_body.html
link the style sheet (p. 12)p012_link.html
color the background (p. 13)p013_body.html with p013_styles-body.css
add a section header (p. 14)p014_h1.html
choose fonts (p. 15)p015_h1plus.html with p015_styles-h1.css
change text color (p. 16)p016_text_color.html with p016_styles.css
write a paragraph (p. 17)p017_paragraph.html with p016_styles.css
adjust spacing (p. 18)p018_paragraph.html with p018_spacing.css
create a web image (p. 19)
crop an image (p. 20)park_guell.jpg
adjust levels (p. 21)sagrada_familia.jpg
resize an image (p. 22)dancing_stars.jpg
format photos as jpeg (p. 23)palau_musica.jpg
organize the photos (p. 24)
add photos to page (p. 25)p025_addimage.html with p018_spacing.css
label a photo (p. 26)p026_label.html with p018_spacing.css
add a subheader (p. 27)p027_subheader.html with p018_spacing.css
use special characters (p. 28)p028_specialchar.html with p018_spacing.css
add more text (p. 29)p029_moretext.html with p018_spacing.css
change font size (p. 30)p030_font-size.html with p030_font-size.css
float images to one side (p. 31)p031_floatleft.html with p031_floatleft.css
pad the images (p. 32)p032_padimages.html with p032_padimages.css
reuse styles (p. 33)p033_reuse.html with p033_reuse.css
draw a border (p. 34)p034_border.html with p034border.css
classify paragraphs (p. 35)p035_class.html with p034border.css
apply italics to a class (p. 36)p036_italics.html with p036_italics.css
add line breaks (p. 37)p037_linebreaks.html with p036_italics.css
add local formatting (p. 38)p038_localformatting.html with p036_italics.css
add structure (p. 39)p039_structure.html with p036_italics.css
pad a division (p. 40)p040_divpadding.html with p040_divpadding.css
clear floats (p. 41)p041_clearfloats.html with p041_clearfloats.css
add another postcard (p. 42)p042_addpostcard.html with p041_clearfloats.css
float images to right (p. 44)p044_floatright.html with p044_floatright.css
mimic shadow (p. 46)p046_background.html with p046_background.css
finish inner page (p. 47)p047_finishpage.html with p046_background.css

2: creating the home page

create a new html file (p. 55)index.html
start the home page (p. 56)p056_start.html
structure the page (p. 57)p057_structure.html
link existing style sheet (p. 58)p058_linkexisting.html with sarahs_styles.css
create a new style sheet (p. 59)home.css
link to new styles (p. 60)p060_linknew.html with sarahs_styles.css and home.css
create a background (p. 61) 
colorize background (p. 62) 
save the background (p. 63)curly.jpg
add background image (p. 64)p064_background.html with sarahs_styles.css and p064_background.css
begin the header logo (p. 65) 
make logo transparent (p. 66) 
save logo as gif (p. 67) 
add header logo (p. 68)p068_headerlogo.html with sarahs_styles.css and p064_background.css
add text (p. 69)p069_addtext.html with sarahs_styles.css and p064_background.css
increase font size (p. 70)p070_font-size.html with sarahs_styles.css and p070_font-size.css
create a link (p. 71)p071_link.html with sarahs_styles.css and p070_font-size.css
style the links (p. 72)p072_stylelinks.html with sarahs_styles.css and p072_stylelinks.css
create little images (p. 74)sagrada_lit.jpg, spiral_lit.jpg, market_lit.jpg, and festival_lit.jpg.
create an images folder (p. 67)little
make image links (p. 75)p075_imagelinks.html with sarahs_styles.css and p070_font-size.css
adjust link borders (p. 77)p077_linkborders.html with sarahs_styles.css and p077_linkborders.css
keep images together (p. 78)p078_keeptogether.html with sarahs_styles.css and p078_keeptogether.css
add the copyright (p. 79)p079_copyright.html with sarahs_styles.css and p078_keeptogether.css
make copyright smaller (p. 80)p080_smaller.html with sarahs_styles.css and p080_smaller.css
add styles in html (p. 81)p081_span.html with sarahs_styles.css and p080_smaller.css
begin navigation bar (p. 83)p083_beginbar.html with sarahs_styles.css and p080_smaller.css
position navigation bar (p. 84)p084_position.html with sarahs_styles.css and p084_position.css
move main div over (p. 85)p085_margin.html with sarahs_styles.css and p085_margin.css
add links to nav-bar (p. 86)p086_addlinks.html with sarahs_styles.css and p085_margin.css
align links to right (p. 87)p087_alignright.html with sarahs_styles.css and p087_alignright.css
reduce size of links (p. 88)p088_reducelinks.html with sarahs_styles.css and p088_reducelinks.css
italicize main content (p. 89)p089_italics.html with sarahs_styles.css and p089_italics.css

3: publishing your web site

get a web host (p. 94)http://www.webhostingratings.com
get a web domain (p. 95) 
set up the ftp program (p. 96) 
Cute FTP
Fetch Softworks
test pages online (p. 98)p098test.html with sarahs_styles.css and home.css
fix and retest (p. 99)http://www.sarahsnotecards.com with sarahs_styles.css and home.css
get indexed (p. 100)http://www.google.com/addurl.html