Penn Foster 418008 – Cameron Cookies
Graded Project PENN FOSTER 418008
HTML Coding
iii
OVERVIEW 1
INSTRUCTIONS 1
SUBMITTING YOUR PROJECT 17
Contents Contents
1
OVERVIEW
After completing the exercises for your HTML Coding study
guide, you’re now ready to complete the graded project. For
the graded project, you’ll use HTML and JavaScript to create
a new Web page by using many of the new Web designing
skills you’ve learned. You’ll then upload the project to the
student Web hosting site.
INSTRUCTIONS
For the graded project, you’ll create a Web page from
scratch using many of the HTML commands you’ve learned.
Follow each step and add each of the presentation elements
as instructed.
Laura Cameron, owner of Cameron Cookies in Portland,
Maine, asks you to create a Web page for her. She wants
her customers to be able to view her contact information,
a listing of some types of cookies she sells, and an e-mail
link to contact her at the store. She also wants you to link
this page to a Web form where customers can order cookies.
Follow the instructions below to create these Web pages
for Laura.
HTML Coding
1. Open a text editor, such as Windows Notepad.
2. Type the following lines of code into your document
as shown below (Figure 1):







3. Add a welcome message to your Web page by typing
Heading 1 tags under the tag as follows:

Cameron Cookies

4. Save the file as “index.htm.”
2 HTML Coding
FIGURE 1—Your code
should appear in your text
editor as shown here.
5. Open a Web browser to view how your Web page looks.
From the File menu, click Open and locate where you
saved the file index.htm before clicking OK. Your Web
page should look like Figure 2.
6. Change the color and positioning of your heading by
■ Aligning the heading in the center
■ Changing the font color to red
■ Changing the font face to Arial. If Arial isn’t available,
then use Helvetica. If Helvetica isn’t available, then
use Sans Serif.
Graded Project 3
FIGURE 2—Your Web Page Titled Cameron Cookies
4 HTML Coding
7. Save your changes and return to your Web browser.
Press F5 to refresh the page to view your changes on
your Web page (Figure 3).
8. Underneath the heading, add the following text: “The
best homemade cookies in New England.” Be sure to
format this text as
■ Heading 2
■ Italicized (if Heading 2 isn’t already italicized)
■ Centered
FIGURE 3—Your Updated Web Page
9. Save your changes and return to your Web browser.
Press F5 to refresh the page to view your changes in
your Web page (Figure 4).
10. Underneath this heading, add the following address
information as paragraph text: 99 Sycamore St.
Portland, ME 04101 (207)555-1212
Be sure to center the text.
11. Add the following text underneath the address.
Graded Project 5
FIGURE 4—Your Updated Web Page with New Text
6 HTML Coding
Welcome to Cameron Cookies, which has been voted
“the best homemade cookies in New England” in a
recent poll. At Cameron Cookies, you’re sure to
find a cookie you’ll love. Here’s a sampling of
our many varieties:
Chocolate Nut
Chocolate Chip
Macadamia Nut
Oatmeal Raisin
Chocolate Dessert
Butter
Cookies are a great gift idea that everybody loves.
Just give us a call or send us an e-mail 24 hours
in advance and we’ll create a lovely gift bag or
basket filled with an assortment of fresh, homemade
cookies.
Thanks for visiting our web site and be sure to
come visit us in person here in Portland, Maine.
To place an order, click here.
12. Take your own photos or search through the Web to find
photos of cookies to illustrate your Web pages. Create
a table to display photos of each type of cookie to the
left of the cookie name as in Figure 6. (Make sure your
images don’t have copyright restrictions. One source
of free clip art is http://dgl.microsoft.com/.)
Right-click the image and save it to the same folder
where your Web page is located. Insert the photos in
your HTML document to the left of each cookie name.
Note: You may have to create a table for your images
to appear correctly.
13. Find an image to use as the background of your
Web page. Change your background to include this
background image.
14. Save your changes in your text file and refresh your
Web page in your browser.
15. Go back to the text you just entered in your HTML
document and find the words “click here.” Create a
link from the words “click here” to a new Web page that
you haven’t created yet called “orderform.htm,” which
you’ll save to the same folder as Cameron Cookies.
16. Save your changes in your text file and refresh your
Web page in your browser. The words “click here” should
now appear as a hyperlink, similar to Figure 5. (Don’t
click on the hyperlink; it’s not yet fully functional.)
17. Save your file and check your e-mail link. Your Web
page should look similar to Figure 6.
Graded Project 7
FIGURE 5—“Click here” now appears as a
hyperlink.
Adding Links
Now you’re going to add more links to your home page for
Cameron Cookies.
1. If you closed your HTML document for index.htm,
reopen it now.
2. Under the address line for Cameron Cookies, insert
a table with the following elements:
■ Table width = 500
■ One row
■ Four columns
■ No border
■ Table row data is centered
8 HTML Coding
FIGURE 6—Your Home Page
3. Within each table cell, type the following text:
■ About Us
■ Contact Us
■ Place an Order
■ Sample Recipe
4. You’re going to add a link for the text you just added.
Follow the directions below for the destination of each
link:
■ Link “About Us” to the page “about.htm.” You
haven’t created this page yet, so the link won’t be
active until you create the About Us page. However,
create the link to this page now.
■ Link “Contact Us” to the e-mail address
[email protected]
■ Link “Place an Order” to the page “orderform.htm.”
You haven’t created this page yet, so it won’t be
active until you create the Order Form page.
■ Link “Sample Recipe” to the page “recipe.htm.” You
haven’t created this page yet, so it won’t be active
until you create the recipe page.
5. Save your changes and check your Web file in a browser.
Your Web page should look similar to Figure 7. You’re
now finished with the index.htm page.
Graded Project 9
10 HTML Coding
Creating Your Other Pages
1. Copy your index.htm page and save it as “about.htm.”
You’re going to use some elements of the main page in
all your other pages, so you don’t have to retype them.
2. Scroll down your HTML code to find the text “Welcome
to Cameron Cookies.” Now delete all the text from
“Welcome” to the end of the page.
3. Make a copy of your about.htm file and save it as
“recipe.htm.”
4. Make another copy and save it as “orderform.htm.”
5. Open the Web page for each new page created in your
browser. Your Web pages should have your image, headers,
address, and links; however, the remaining text should
be gone.
FIGURE 7—Your Updated Web Page for Cameron Cookies
Modifying the About Us Page
1. Type the following text and format it to look like the text
in Figure 8.
Cameron Cookies was created by Bill and Laura
Cameron in 1995. The Camerons began selling
homemade cookies around their neighborhood using
a family recipe passed down by Bill’s grandmother,
Stella Cameron. Their cookies were so popular that
Bill and Laura had to expand their business, and in
1996 they moved to their current location in Portland,
Maine. Cameron Cookies continues to sell off the
shelves. Visitors to Maine drive out of their way to
sample these wonderful, rich cookies that they’ve
heard so much about.
We hope to see you soon!
Bill and Laura
2. Change your link “About Us” to “Home.”
3. Change the destination of the link “Home” to index.htm.
4. Save your changes to your file and open the Web page for
about.htm in your browser. Your page should look similar
to Figure 8.
5. Test that the link for “Home” functions correctly. You’ll
be creating the recipe page next.
Graded Project 11
Modifying the Recipe Page
1. Type Chocolate Chip Cookies in a Heading 2 format.
2. Type Ingredients in a Heading 3 format.
3. Type the following list of ingredients in an unordered list:
1/2 cup butter, softened
1 cup light brown sugar
3 tablespoons sugar
1 large egg
2 teaspoons vanilla extract
1-3/4 cups flour
12 HTML Coding
FIGURE 8—The Web Page for About.htm
Graded Project
1/2 teaspoon baking powder
1/2 teaspoon baking soda
1/2 teaspoon salt
1-1/2 cups chocolate chips
4. Type Directions in a Heading 3 format.
5. Type the following in an ordered list format:
1. Preheat oven to 300 degrees. Cream butter
with sugars.
2. Beat in egg and vanilla extract.
3. Mix dry ingredients in bowl. Add slowly to
butter mixture. Stir in chocolate chips.
4. Drop cookie dough using a spoon onto a
greased cookie sheet. Bake for 20 minutes
or until browned.
Type the following:
Yield: 2 dozen cookies
7. Save your Web page and view it in a browser. It should
appear similar to Figure 9.
13
Modifying the Web Order Form
1. Add the form tags to your HTML document.
After your links, create a table for your order form with
the following elements:
■ Width = 65%
■ Border = 0
■ Cellpadding = 2
2. Within this table, you’re going to create nested tables
for your order form. The first table will contain personal
information, the second will contain order information,
and the third will contain payment information.
14 HTML Coding
FIGURE 9—Your Completed Recipe.htm Page
3. Create your first nested table and add form content and
data to your table as shown in Figure 10.
Graded Project 15
FIGURE 10—Here’s your
first nested table with
payment information.
FIGURE 11A and 11B—Here’s your second nested table with payment information.
(A) (B)
4. Create your second nested table and add form content
and data to your table as shown in Figure 11A and
Figure 11B.
HTML Coding
5. Add the words, “$5.95 for 1–5 boxes, $10.95 for five or
more boxes to the second column.
6. Create your third nested table and add form content
and data to your table as shown in Figure 12.
7. Save your file and refresh the Web page in your browser.
8. Check that all links on all pages are functional.
Working with Dynamic
Content and JavaScript
This third part of your graded project involves working with
dynamic content. You’re going to add a rollover effect to one
of your Web pages.
1. Open the index.htm file in a text editor, such as
Notepad.
2. You’re going to create a rollover effect to the link, “click
here.” When the mouse is over the link, the color of the
link will change to red.
3. Save your changes and view the page in your Web
browser. When your mouse hovers over the link “click
here,” the text should appear in red font.
Note: Be sure to note which browser you’re using when you
send in your project.
16
FIGURE 12—Here’s your third nested table with payment information.
SUBMITTING YOUR PROJECT
Inspecting Your Work and
Posting It to the Web Site
Congratulations! All you have left to do with the project is to
inspect your completed files one last time before you upload
them to the web site for grading.
Inspecting Your Completed Files
1. Proofread your work.
■ Check your files for errors.
■ Your project grade will be based on the accuracy with
which you entered and edited the information. Make
sure your final Web page is free of errors, and that
you’ve closely followed the instructions for any changes.
2. When you’ve completed your graded project, log on to the
Penn Foster web site and go to “My Courses.”
3. Click Take Exam next to your course.
4. Attach your file or files as follows:
a. Click the Browse box.
b. Locate the file you wish to attach.
c. Double-click on the file.
d. Click Upload File.
e. If you have more than one file to attach, click the
Browse box again, and repeat steps b, c, and d for
each file.
5. Enter your e-mail address in the box provided. (Note: This
information is required for online submission.)
6. If you wish to tell your instructor anything specific regarding
this assignment, enter it in the Message box.
7. Click Submit File.
Graded Project 17
The grading criteria for the project are as follows.
Creating a Web Page (Refer to Figures 7, 8, and 9)
Heading for index.htm centered
and in red font 5 points _______
Cookie images inserted correctly (allow
for different cookie images; however,
it should be to the left of the cookie
name and in table) 5 points _______
Layout of page formatted correctly,
including items in a bulleted list 5 points _______
E-mail link and hyperlink appear
functional (hyperlink that redirects
you to order form page) 5 points _______
Created about.htm page correctly 5 points _______
Created recipe page correctly with
unordered and ordered lists 5 points _______
Creating a Web Order Form
(Refer to Figures 11, 12, and 13)
Layout of page formatted correctly
in table columns (each column
appears lined up) 10 points _______
Input boxes appear correctly 10 points _______
Radio buttons for credit card choices
appear correctly 10 points _______
Selection lists for month and
year of credit card expiration date
appear correctly 5 points _______
Submit button appears correctly 5 points _______
Gift wrap check box appears correctly 5 points _______
18 HTML Coding
Working with Dynamic Content
Hyperlink “click here” appears in
red font when the mouse hovers
over the link 5 points _______
Hyperlinks at the bottom of each
page are functional 10 points _______
About Us page formatted correctly 10 points _______
Graded Project 19

Penn Foster 418851: WEB PAGES, GRAPHICS, HYPERLINKS, LISTS, AND TABLES

WEB PAGES, GRAPHICS,
HYPERLINKS, LISTS, AND TABLES
Introduction
BeFit is one of the leading manufacturers of home gyms. The
company recently hired you to assist in developing their web
site. Your first task is to create a Web page for the LFM600, a
popular weight machine sold by the company. You’ll download
three files from your student portal:
1. BeFit.txt, describing the features of the LFM600
2. image file, logo.jpg, displaying the company logo
3. BeFit.jpg, an image of the LFM600
You can supplement these files with any other resources
available to you. You’re responsible for the page’s content
and appearance.
To complete this task:
1. Create an XHTML file named BeFit.htm.
2. In the head element, include an appropriate page title,
along with a comment describing the purpose of the
page, your name, and the date.
3. Include at least one example of each of the following in
the document:
a. Heading
b. Paragraph
c. Ordered or unordered list
d. Character formatting element
e. Inline image
f. Horizontal line
g. Special character
35
Grraaddeedd PPrroojjeecctt 11
36 Graded Project
h. Block-level element that is not a heading,
paragraph, list, or horizontal line
4. Demonstrate your understanding of inline styles by
including at least two different examples of an inline
style.
5. Use proper XHTML syntax at all times. Close all twosided
tags. Properly nest all tags. Use lowercase element
and attribute names. Enclose attribute values in quotes.
Include alternate text for non-graphical browsers with
inline images.
6. Write your code so that it will be easy to read and understand.
(You may download two image files from the
Internet and use those, citing where you downloaded the
files, and create a list of 3 to 5 features at your discretion.)
7. Save your XHTML file, and then view the resulting Web
page in a browser.
8. Submit your completed project.
SUBMITTING YOUR PROJECT
1. Proofread your work.

Check your files for errors.

Your project grade will be based on the accuracy
with which you entered and edited the information.
Be sure your final Web page is free of errors, and
that you’ve closely followed the instructions for any
changes.
2. When you’ve completed your graded project, log on to the
Penn Foster web site and go to student portal.
3. Click Take Exam next to your course.
Graded Project 37
4. Attach your file or files as follows:
a. Click the Browse box.
b. Locate the file you wish to attach.
c. Double-click on the file.
d. Click Upload File.
e. If you have more than one file to attach, click on the
Browse box again, and repeat steps b, c, and d for
each file.
5. Enter your e-mail address in the box provided. (Note:
This information is required for online submission.)
6. If you wish to tell your instructor anything specific
regarding this assignment, enter it in the Message box.
7. Click Submit File.
The grading criteria for the project are as follows.
Head Element
Page title, comment, name, date 10 points _______
Document
Document contains heading,
paragraph, ordered or unordered list,
character formatting element, two
inline images, horizontal line, special
character, block-level element 40 points _______
XHTML Syntax
Tags properly nested and closed, used
lowercase element and attribute names,
attribute values in quotes, alternate
text for non-graphical browsers with
inline images 40 points _______
38 Graded Project
Code
Code is easy to read, cited downloaded
files and included features 10 points _______
Total 100 points _______

Penn Foster 418852 – Creating iFrames exercise to create a page listing the Teenage Mutant Ninja Turtles

Turn to page 321 of the textbook and use the Practice Creating
iFrames exercise to create a page listing the Teenage Mutant
Ninja Turtles.

You’ll need to modify the music types pages
created earlier in your reading of the chapter to reflect the new
focus of the pages. Use CSS formatting to change the color of
each turtle’s name in the frame to the color of the headband
each one wears. After completing the pages, validate the code
using the XHTML validator at http://validator.w3.org/.

322 HTML & XHTML Demys tified
Practice Creating iFrames
In this final section you will create a web page holding four iFrames. Each iFrame will hold one of the music pages created earlier. You will place the iframe inside of a div positioned using CSS.
1. Create a new document based on your template called 1. iframes.html. Save it in the chapter12 folder.
2. Create a new CSS document called 2. chapter12.css.
3. Link the iframes.html file to the chapter12.css file.3. 4. Inside of the CSS file create two generic classes called .left and .right.4.
.left{
}
.right{
}
5. Set the width and height of the .left class to 50% of the page. Set the float 5. property to left. Set the clear option to clear both.
float:left;
width:50%;
height:50%;
clear:both;
6. Set the width and height of the .right class to 50%. Set the float property 6. to right.
float:right;
width:50%;
height:50%;

7. Save your CSS document.
8. Switch to the iframes.html file in your editor.8.
9. Create a div tag using the .left class.
10. Inside of this div, create an iframe utilizing 80% of the div size. Set the src to country.html.

11. Create a div tag using the .right class. Inside of this div, create an iframe 11. utilizing 80% of the div size. Set the src to pop.html.
12. Create a div tag using the .left class. Inside of this div, create an iframe utilizing 80% of the div size. Set the src to rap.html.
13. Create a div tag using the .right class. Inside of this div, create an iframe utilizing 80% of the div size. Set the src to rock.html.
14. Save and view your page in a browser. It will look like this image:

15. The final code listing for the iframes appears in Code Block 12-13.
Code Block