Graded Project: Basic Elements of a Web Page

You need to include the HTML file, the CSS file, and all image files in the appropriate directories.

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 name
• Your email address

Be sure to keep a backup copy of any files you submit to the school.

Introduction

Body Fit for Life Logo

In this graded assignment, you’ll incorporate all the aspects of HTML coding you’ve learned in Lesson 1. To help you with this assignment, review the following examples and pages from your text:

• Structure example: Pages 21–22
• Text example: Pages 57–58
• Lists example: Pages 69–70
• Links example: Pages 89–90
• Images example: Pages 121–122
• Tables example: Pages 139–140

Instructions

The XJS500

Body Fit for Life is one of the leaders in home gym equipment. The company recently hired you to help develop its website. You must first create a web page for its latest model home gym, XJS500, an upgrade to its previous model with new features. The XJS500 is a resistance-based machine that allows users to adjust tension by selecting different resistance bands on the machine. Download the following files:

1. Overview and features of the XJS500
2. Image file and logo.jpg displaying the company logo
3. Body_Fit_For_Life.jpg, an image of the XJS500

You can also supplement these files with any other resources you have. You’re responsible for the content and appearance of the page.

To complete this task:

1. Create an XHTML file named BodyFitForLife.htm.
2. In the head element, include the appropriate page title, along with a comment that describes the purpose of the page, your name, and the date.
3. Include at least one example of each of the following in the document:
   1. Heading
   2. Paragraph
   3. Ordered or unordered list
   4. Character formatting element
   5. Inline image
   6. Horizontal line
   7. Special character
   8. Block level element that isn’t 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 two-sided tags. Properly nest all tags. Use lowercase element and attribute names. Enclose attribute values in quotes.

   Include alternate text for nongraphical browsers with inline images.

6. Write your code so that it will be easy to read and understand.

   (You may download and use two image files from the internet, citing where you downloaded them from, and create a list of three to five features at your discretion.)

7. Save your XHTML file and then view the resulting web page in a browser.
8. Submit your completed project.