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.

  1. 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

  2. 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 files).   

    • 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 fonts" selection
      • 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
  3. Things to include in the file sitemenu.html:      [8 marks]

    • 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
  4. Things to include in the file survey.html:      [8 marks]

    • an HTML form to collect feedback from visitors to the "Devil's Food" web site
    • Submit the form output to 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 this form
    • use the image "devilright.gif" as the "reset" button for this form
    • 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.

  5. 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