HTML Coding : Final Graded Project:
HTML Coding
Lesson 5 Overview
Your final graded project encompasses elements from everything
you’ve learned throughout the course. You’ll use HTML and
JavaScript to create a new web page by using many of the skills
you’ve learned. You’ll then upload the project to the student webhosting
site. Feel free to use all notes and previous material when
completing this project. Reuse all standard code blocks as necessary.
5.1 Design a business website following provided
guidelines
Final Graded Project: HTML Coding
READING ASSIGNMENT
You need to include all files with your submission to the school: all HTML files
and any supplemental files (any other material you used not included in the
stock photos). Each project is individually graded by your instructor and
therefore takes up to a few weeks to grade. Be sure that each of your three
files contains the following information:
Your name
Your student ID number
The lesson number (703724)
Copyright Penn Foster, Inc. 2019 Page 1
Course Version: 1
Your email address
Note: If you have more than 10 attachments, you’ll need to WinZip all of the
project’s associated files, along with all documentation, using the WinZip
software program. To submit your graded project, follow these steps:
1. Go to http://www.pennfoster.edu (www.pennfoster.edu) .
2. Log in to your student portal.
3. Click on Take Exam next to the lesson you’re working on.
4. Follow the instructions provided to complete your exam.
Be sure to keep a backup copy of any files you submit to the school.
Instructions
For the graded project, you’ll create a web page from scratch for John
Rucker, who wants to open a new steakhouse. You’ll use many of the
HTML and CSS elements you’ve learned. Create the main page by
following each step and add each of the presentation elements as
instructed. To help you with this assignment, review Chapters 18 and
19 and Example HTML5 Layout in your text. Here are some other
examples you may find helpful:
Structure example: Pages 21–22
Text example: Pages 57, 58, 295, and 296
Lists, tables, and forms example: Pages 69, 70, 139, 140, 353,
and 354
Links example: Pages 89–90
Box example: Pages 325–326
Layout example: Pages 399–400
Images example: Pages 121, 122, 399, and 400
Copyright Penn Foster, Inc. 2019 Page 2
Course Version: 1
Download these file images. (lessons.pennfoster.com/pdf/418783_L5.
zip)
HOME PAGE INFORMATION
John Rucker, the owner of Rucker’s in Scottsdale, Arizona, asks you
to create a web page for his restaurant. He wants his customers to be
able to view photos of the menu, pricing information, and atmosphere
they can expect when they visit the restaurant. He wants you to link
this page to a web form where customers can make a reservation. He
also wants to monitor visitor activity, such as how long visitors view a
page and how many visitors come to the site daily. Follow the
instructions below to create this website for Rucker’s.
1. Open a text editor, such as Windows Notepad.
2. Use the following lines of code to begin writing your document as
shown below:

3. Once you start with this small block of code, open a web browser
to view how it looks.
4. Change the color and positioning of your heading by:
Copyright Penn Foster, Inc. 2019 Page 3
Course Version: 1
a. Centering the heading
b. Changing the font color to red
c. Changing the font face to Arial, Helvetica, or Sans Serif
5. Save changes and view again in your browser.
6. Below the heading, add the following text: “The best steak in
Scottsdale!” Be sure to format this text as
a. Heading 2
b. Italicized
c. Centered
7. Below this heading add the following address information as
paragraph text:
555 Mountainview Ave.
Scottsdale, AZ 85260
8. (602) 789-5672
9. Make sure to center the text.
10. Add the following greeting below the address and make sure to
center:
Welcome to Rucker’s, which has been voted Best Steakhouse in
Scottsdale four years running! At Rucker’s you can enjoy a quality
steak, amazing wine, and a quiet atmosphere in a mountain-themed
restaurant. Rucker’s has been a tradition in Scottsdale since 1975 and
is an amazing place to dine.
ADDITIONAL SITE MAP INFORMATION
Copyright Penn Foster, Inc. 2019 Page 4
Course Version: 1
Create a separate page for the menu, specials, and gift cards. Create
a form on the main page for customers to make an online reservation.
Within this form include selection boxes for customers to choose a
month, date, time (include AM and PM), and year for their reservation.
Keep in mind Rucker’s is open seven days a week from 11 AM to 10
PM Monday through Saturday and 12 PM through 8 PM on Sunday.
Requirements for Page Links
Place the phone number in the upper right-hand header of each
page.
Include the following email address in a “contact us” link on each
page: [email protected].
Make sure all links to other pages on the site work and contain a
link back to the homepage for Rucker’s.
Special Photo Instructions
In addition to the stock photos provided for this assignment, find
appropriate background images to use on each page that match the
site and provide relevant material for a steak restaurant. Create a
table to display photos of the various dishes Rucker’s has to offer.
Make sure to save all photos you use for your web page so you can
submit them with the rest of your final assignment documents. You
can use the photos provided for this assignment or find your own. If
you find other pictures to use, be aware of copyright protection; make
sure you use stock photos that aren’t copyright protected.
Copyright Penn Foster, Inc. 2019 Page 5
Course Version: 1
Save each of your .htm files with appropriate names, such as
onlineorderform.htm, menu.htm, and specials.htm.
Menu Pages
John Rucker desires a main page with two separate subpages—one
for his beer and wine list and the other for his shorter dessert list. For
the main menu page, include a stock photo of some of the menu
items; it isn’t necessary to include a photo of every item on the menu.
Make sure the menu includes a list of various dishes and appropriate
pricing for an upper-class steakhouse. He has daily featured meals
with special pricing. Rucker’s sells various steak dinners (T-bone,
Porterhouse, Sirloin, and so on), grilled chicken, fish, and salads.
Make sure the specials.htm shows feature meals and special pricing.
John Rucker takes pride in his Arizona crafted beer and wine
collection. Please be sure to highlight Arizona Stronghold’s Merlot and
Four Peak’s Hop Knot, as these are his favorites. His dessert list
contains four sweet treats. This list usually contains a chocolate treat
(like a lava cake), a regionally inspired treat (like a prickly pear
sundae), a seasonal pie, and a special monthly dessert called the
Chef’s Creation. Make sure these separate pages are linked from the
main menu page and go back to it.
Order Online Page
Create an Order Online page with a form for customers to fill out.
Include appropriate size boxes for the following:
Copyright Penn Foster, Inc. 2019 Page 6
Course Version: 1
First name
Last name
Phone number
Email address
Credit card number
Credit card expiration date (with a selection box for the month
and one for the year)
CSV number on the back of the card
Desired pickup time (a selection box with half-hour increments
within the parameters of business hours)
You may reuse some of the same code on each page as long as it’s
relevant and matches, so you don’t have to spend additional time
retyping reused code.
About Us Page
Create an About Us page with a brief bio and history for Rucker’s.
Feel free to enter your text, making sure to remember that Rucker’s is
a quiet, family-friendly restaurant with a professional waitstaff.
Rucker’s was founded in 1975. Create a brief backstory for Rucker’s.
OVERALL GUIDANCE FOR THIS PROJECT
For this project, you must demonstrate proficiency in each of the
following areas you learned about in class:
Heading
Copyright Penn Foster, Inc. 2019 Page 7
Course Version: 1
Paragraph
Ordered or unordered list
Character formatting element
Inline images
Horizontal line
Special character
Block-level element that isn’t a heading, paragraph, list, or
horizontal line
Two examples of an inline style
Appropriate contrast, hue, and brightness of all boxes
Boxes with appropriate border image, shadow, and/or rounded
corners
Tables with appropriate cell margins and spacing
Bullet lists when appropriate with different point styles from pages
333‒334 of your text
Form or forms with the following attributes where appropriate:
Text input (sized appropriately)
Text area
Select boxes
Radio buttons (can use if a dish offers chicken or beef, for
example)
Checkboxes
Use proper XHTML and CSS syntax at all times.
Close all two-sided tags, properly nest all tags within your code,
and use appropriate comments within your code.
Enclose all attribute values in quotes.
Copyright Penn Foster, Inc. 2019 Page 8
Course Version: 1
Include alternate text for nongraphical browsers with inline
images.
Write your code so that it will be easy to read and understand;
don’t get sloppy with your code.
Constantly save your files.
Reference your text for examples of what you’ll need to complete
this project.
Make sure to reference the process and design guidance from
Chapter 18 and practical information from Chapter 19, such as
SEO keywords, analytics, wireframes, and so on. You don’t have
to create a page for analytics for this project.
Grading Criteria
The following rubric will be used to grade your project:
Criteria Possible
Points
Use of proper XHTML syntax, including an appropriate heading and
paragraph 10
Easy to read and understand code 10
Characters
• Correct character formatting element
• Use of special characters
• Use of horizontal line
10
Use of inline images
• Proper format
• Two examples of the inline style
10
Tables with appropriate cell margins and spacing 10
Copyright Penn Foster, Inc. 2019 Page 9
Course Version: 1
Block-level element that isn’t a heading, paragraph, list, or horizontal
line 10
Boxes
• Appropriate border image
• Appropriate shadow
• Appropriate contrast, hue, and brightness of all boxes
• Rounded corners
10
Lists
• Ordered or unordered
• Bullet lists with appropriate different point styles
10
Tags
• All two-sided tags closed
• Properly nested tags
• Appropriate comments within code
• All attribute values enclosed in quotes
10
Forms
• Text input (sized appropriately)
• Text area
• Select boxes
• Radio buttons
• Checkboxes
10
Total 100
Key Points and Links
READING ASSIGNMENT
Key Points
Use visual designs when creating web pages to communicate
your message with your target audience
Make some parts of your web page distinct from others to draw
attention to or away from certain items on a page
Use visual hierarchy to help web page visitors focus on key
messages
Select a domain name that allows visitors to easily find your page
Copyright Penn Foster, Inc. 2019 Page 10
Course Version: 1
when they wish to return, avoid long complex names
Lesson 5 Review
Flash Cards
1. Term: Web client
Definition: A business owner (online or in-person) who contacts a
web designer to create a web page for their business
2. Term: Text editor
Definition: A tool such as Windows Notepad used to create HTML
code
3. Term: Stock photos
Definition: Photos you can freely use when creating web pages
because they are free of any copyright protection
Copyright Penn Foster, Inc. 2019 Page 11
Course Version: 1