SUBMITTING YOUR PROJECT 17
After completing the exercises for your HTML Coding study
guide, you’re now ready to complete the graded project. For
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.
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
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
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:
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)
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:
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
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
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
Now you’re going to add more links to your home page for
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 “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
■ 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
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
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
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
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.
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
FIGURE 11A and 11B—Here’s your second nested table with payment information.
4. Create your second nested table and add form content
and data to your table as shown in Figure 11A and
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
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
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.
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
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
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at email@example.com.
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at firstname.lastname@example.org and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at email@example.com.
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.