INFO10034: Web Page Design, Level 3
Assignment 1 30 marks
Both assignments for this course will combine to make a fully-functional web site for the "recipe" company "Devil's Food". In each assignment, you will create different pages for this web site. When you have completed assignment 2, your web site should be working completely. After
you complete this assignment, you will have hypertext links pointing to files from assignment 2 that you have not yet created. Those hypertext links will not work
yet. Your marks will be given based on the HTML code and CSS settings that you have applied.
Create 3 files named sitemenu.html, survey.html and devil.css. Save these files on disk and follow the instructions at the bottom of this page
to upload these files to a web
account for grading.
- General instructions for all files: [3 marks
1 mark per file]
- Use indented HTML coding with standard HTML, HEAD and BODY sections for
each HTML file. Click here for a sample of "nested" HTML code.
- Include an HTML comment tag near the top of each HTML file with your name and
student number in the comment
- Include a TITLE definition with your name and the file name in each HTML file
- use indented-style coding for your CSS file with proper "style sheet" layout and format
- Cascading Style Sheets: Create the file devil.css.
[9 marks total 8 for the file, 1 for linking it in each HTML file]
This file needs to incorporate the following "style" items for all of the pages included in this assignment. Once you have prepared the file, link it to every HTML file
so that the style rules will be applied to each HTML file (sitemenu.html, order.html) in this assignment.
Remember: there should be NO HTML tags in this file only the
settings for HTML tags (the real HTML tags, of course, will be in your HTML
- All text: dark brown (colour)
- All fonts: 10pt, sans-serif (choose your favourite font)
- Background: use the image paper.gif
- Borders: use where indicated in each HTML file (the style and type are your choice)
- All Hyperlinks:
- all hyperlinks should be the same colour for link and visited and the same size, font and colour as your "all
- for active links and when the mouse "hovers" over the link, the text should be the same colour but a font
sized "1" larger than the usual font size and bold
- for all links, there should be no underlining (hint: you need to set the text-decoration setting to none to make this work)
- All Headings: 14pt, sans-serif (choose your favourite font), some
shade of "red" to match the "devil" images supplied on the
student assignment file
Things to include in the file sitemenu.html:
- use a fluid layout table with no visible table border. Since this file will eventually be used in
"frames" in a narrow frame, make your table either narrow and tall
(vertical one column, many rows) or narrow and wide (horizontal
one row, many columns) it's your choice
- include the graphic "devilleft.gif" along with the heading text click here for a sample (to give you an idea)
- you may also choose to include the image "devilright.gif" (optional
it's in that sample image, but you don't have to use it or you might
choose to place it at the opposite end of the menu)
- include hypertext links to: Home (welcome.html), Recipes (recipes.html),
Survey (survey.html), Contact (contact.html) (only one link per table cell)
- your hypertext links should get their styles settings from the CSS file you have
created in the previous question
Things to include in the file survey.html:
an HTML form to collect feedback from visitors to the "Devil's Food"
- Submit the form output to http://nexus.mohawkcollege.ca/shernden/sh01/bin62/showit.pl using the
POST method with enctype just set to the default mode (ie. you should
not need to set the enctype option)
- create an "accesskey" definition for each field and set a tabbing
order for all the HTML fields on this form
- set up each form field so that there is a "link" between its associated text and the form field itself. When a visitor "clicks" on the text, the cursor/pointer should move into the form field
- create a series of HTML fields to collect the visitor's name, email address and
postal code. Group these fields under a label "Personal
Information" and set an attractive border around these fields.
- create a series of checkbox-type fields to collect information about what kinds
of recipes (appetizers, salads, soups, entrees, desserts) these visitors might
like to see on the site. Group these fields under a label "Recipe
Types I'd Like To See" and set the same border type around them that you
used for the personal group.
- create a "select" type field for the visitor to choose which of the
existing recipes is the visitor's favourite recipe. Use each recipe
name as a "selection" on this list. Group each recipe name
according to it's recipe "type" (appetizers, salads, soups, entrees,
desserts) and make the "heading" for each group "bold" on
the select list.
- use the image "devilleft.gif" as the "submit" button for
- use the image "devilright.gif" as the "reset" button for this
- group the submit and reset images together under a label "Send your
Feedback to Us" using the same border type that you have surrounding the
other 2 areas on this form.
- Obtain a web account from your instructor. Upload all of the files (HTML, CSS and image files) for this assignment to your account on "nexus". Test your files from your web account on "nexus" to ensure that they are working correctly before informing your instructor that they are ready for grading. [2 marks]
Return to main page