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 1 | ceramics.html sarahs_styles.css |
| Chapter 2 | index.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 |
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 |