Outcomes addressed in this activity:
Unit Outcomes:
• Add additional Web pages to website.
• Test functionality and design of website.
• Complete final version of website.
Course Outcome:
IT117-5: Construct a well-developed and fully functional website using HTML and CSS.
Purpose
For this assignment, you will complete your restaurant website. The website will consist of six pages. Each page will have specific content requirements and navigation. All pages will link to an external CSS document and be error free. You will explore and apply website validation to all pages as well.
Assignment Instructions
Part 1 – Create a chef.html page
- Open template.html in Notepad to edit.
- Add the restaurant name and Chef to title tag. For example: Joe’s Grill – Chef Dan
- Add an appropriate level 1 (h1) heading to page. For example:
o Meet Chef Dan - Write a short bio about the chef of the restaurant. The bio should be at least 50 words describing the chef’s experience and education. The chef’s bio should be formatted into paragraphs using tags. See the example below to get you started.
- Text content needs to be free of spelling and grammatical errors and use correct punctuation.
Part 2 – Create an additional Web page - Decide on a page topic to add to your restaurant website. Some suggestions include nutrition.html (a nutrition page that displays calories and nutritional information about the menu items) or gallery.html (display some photos of the meals on the menu or photos around the restaurant), or a links.html page with links to outside websites related to the restaurant. If you are unsure, ask your instructor before selecting a topic for your page.
- Use template.html to create your new page.
- New page must have an appropriate page title.
- New page must have an appropriate level 1 (h1) heading.
- New page should include at least two (2) page elements, (properly coded), from the list below:
• Ordered list
• Unordered list
• Table
• Image
• Paragraph of text
• Form - New page must be linked to the external CSS document, styles.css.
- Save page as a web page with a logical name (no caps or spaces in page name).
Part 3 – Link your website pages - Create a navigation bar that contains all pages in website.
- Add navigation bar between on all pages.
• Navigation bar includes:
• index.html
• aboutus.html
• history.html
• menu.html
• contact.html
• chef.html
• The new page added in step 2. - Add text-based navigation links to the footer of all pages.
• Navigation bar includes:
• index.html
• aboutus.html
• history.html
• menu.html
• contactus.html
• chef.html
• The new page added in step 2.
Example of text-based navigation code:
• • Home | About Us | History | Menu | Contact Us | Meet the Chef | Nutritional Information •
The above code will look like this in the browser:
Home | About Us | History | Menu | Contact Us | Meet the Chef | Nutritional Information
Part 4 – Finishing Touches - Add the restaurant logo to the header section of each website page.
- Add the link tag to link the external CSS styles.css to the head of each website page.
- Add at least one style rule to styles.css. Some examples include:
• Add image formatting.
• Write a class to center heading content.
• Format the footer
Part 5 – Validate your website - Submit your website URL to the validation website: https://validator.w3.org/ or http://html5.validator.nu. If you have validation errors in your code, the website will note them. Correct any errors and submit again. Once your website validates with no errors, submit the URL to the validator page showing validation for the website in the Dropbox with your website URL.
Directions for Submitting Your Assignment
Submit the valid, working URL to your index.html page and the URL to the validation website (showing site validation) to the Dropbox.
Written work should be free of spelling, grammar, and APA errors. Points deducted from the grade for each writing, spelling, or grammar error are at your instructor’s discretion.
Sample Solution
