Pages Menu
Chitu Okoli chitu.okoli.org

BTM 395 Homework 1

On May 22, 2013, the City of Montreal issued an unprecedented advisory asking 1.3 million residents to boil their water before drinking it. The subject of this assignment is to develop an emergency information site to help Montreal residents during the advisory, which ended the following day on May 23 (you can get further background information from the news section of these instructions). You will learn how to develop a website using W3C-compliant HTML and CSS. The assignment has many specific requirements for the website.

Contents

Website instructions

Navigation system

All pages on the entire website should use the same look-and-feel. The structure (but not necessarily the formatted appearance) will be generally similar to that used in the All-in-One book, Figure 2-23, p. 166:

  • A header with the site title using the HTML header element
  • A top menu with links to the four pages described here (do not link to the acknowledgement page)
  • A main content area
  • A footer with your copyright information using the HTML footer element
  • The top menu should have an entry for each of the four pages described below.
  • The sidebar menu will not be present on every page; only include one when specified in these instructions. When present, you may place the sidebar either on the left or on the right of the page.

Specific pages

1. Main page

Your main page should be an introduction to the entire website, and should include a brief (one paragraph) summary of all your major sections.

2. News

The news page features the latest news on the advisory, posted as they were updated. It will consist of three sections (titled with h2 or h3 elements). Each section is a link to a news article, plus the first paragraph as an excerpt, with proper citation of the source. Each section should should include a picture related to the news entry. You should include the following three sections, based on the linked pages (use appropriate titles for each section):

The news page should have a sidebar menu (either on the left or on the right) that has an entry for each of the three articles listed.

3. Am I affected?

Map of Montreal boil-water advisory

Residents would want to know if the advisory applies to them or not. This page features a table that tells concerned citizens whether or not they have to boil their water. The table should have three columns:

  1. Locality: List all the boroughs and towns on Montreal Island on each row, sorted alphabetically.
  2. Type: Values are one of: Borough, City, Town, Village
  3. Boil water?: Values are one of: Yes, No, Some areas. The value for each region is based on the map provided by the City of Montréal (click the map for a larger view). If a locality is not listed on this map, then the value is “No”.

For generating the table, you are permitted to use an HTML table generator, with appropriate citation.

4. Symptom checker

This page is for people who drank unboiled water to report their symptoms. Create a form that asks respondents if they are experiencing any of at least six different symptoms. Of course, this assignment is not meant to be medically accurate, but you can get ideas for possible symptoms from Wikipedia. The form should have at least one each of the following input types:

  • A text area
  • A submit button and a reset button
  • Radio buttons
  • Checkboxes
  • A drop-down list
  • A number input type

In addition, you must use the following input attributes at least once in your form:

  • autofocus
  • placeholder
  • required

For this assignment, the form does not have to actually submit anything. But at the very least, if the user clicks “submit”, the form should send them to an acknowledgement page on your website. The acknowledgement page is actually a fifth page for your site, which will use the same top menu, header and footer, but which will not appear in the top menu.

General CSS formatting

You should freely format your website to be visually attractive, with an appropriate balance of text and background colours, and judicious use of graphics. The best approach is to find a website whose design you like, and imitate its style. Use external style sheets on all pages, but you can also use embedded and inline styles as necessary for specific pages. For the purposes of this assignment, the following design features are required (all implemented in CSS):

  1. The menu and header should use different colours from the main frame, either for the background or for the text.
  2. Each page should use a background image that is placed (absolute or fixed) so as not to interfere with the text on the page—a very light background image would work.

General requirements

  • While you are permitted to use any text-based HTML editor you like for this assignment, you are not permitted to use any WYSIWYG editing features (drag-and-drop, Microsoft Word-like GUI). You must write all the HTML code yourself directly.
  • You must use valid HTML5. Before submitting your assignment, you are required to validate each page on your site using the W3C HTML5 validator (make sure you select Document Type HTML5). This will find all your mistakes for you so that you can correct them. I will semi-randomly validate some of your pages myself.
  • Likewise, you must use valid CSS3 for all styles and formatting. Before submitting your assignment, you are required to validate all your CSS code (both external and embedded stylesheets) using the W3C CSS3 validator.
  • Although this is not a design class, the appearance of your site should be clean, without ugly colours or images. Get a friend with a good visual eye to approve it.
  • There must be at least one image on each page. You can use your own graphics, or you can copy other people’s graphics who give you the permission to do so, with appropriate citation.
  • Each page should have meta tags in its <head> section with keywords and a description.
  • Each of the four pages specified above must use at least <h1> and <h2> tags.
  • Copying/citation requirements::
    • All HTML code in the website must be your own original work—no copy-and-paste, with or without citation. Of course, looking at models in the book or on the Web and imitating them is perfectly OK. The only exception is that you are permitted to use a table generator to create a table structure; if so, you must cite it.
    • You must properly cite all CSS code that you borrow or modify for this assignment by including a comment within the CSS that indicates that it is not your original work and indicates the source URL.

Submission instructions

  1. You must publish the pages on your website in a subfolder named “/hw1/”. Your main page must be named “index.html”.
  2. Submit the URL to your online assignment on Moodle. For example, it should look something like <http://mysite.ca/hw1/>. When I click on that link, it must go straight to your website, so make sure the link is working before you submit it.
  3. Zip up all your files (all HTML and CSS files) and name it “Firstname Lastname HW1.zip”. Upload this zipped file to Moodle as part of your submission.
  4. You must submit your completed website assignment by 6:30 pm MONDAY JULY 15.