Description

Question 1 – Lists (4 pts)

Using HTML5, produce the following nested lists exactly as illustrated in figure 1 on page 4 of this handout. It includes a header, ordered, unordered and definition nested lists, a link to the source of the information followed by your name and the text Assignment #1/Question 1. No CSS please. (Question 4 will have you practicing with CSS.)  The information is taken from https://en.wikipedia.org/wiki/Provinces_and_territories_of_Canada

Question 2- Tables (4 pts)

Using HTML5, produce the table in figure 2 at the end of this handout of your 4 favorite Canadian provinces and the requested information. Include the border attribute in your <table> tag to make it easier to identify the cells even though it will not pass the HTML5 validator. No other CSS please. (Question 4 will have you practicing with CSS.) Here are the specifications for the table:

1. 1^st line: Include your name on the 1^st line in a level 2 header.
2. 2^nd line: level 3 header.
3. Row #1 of table: level 1 header.
4. Column #1 of table: contains an image of the Canadian flag.
5. Row #3, columns 3 to 6: images of the flags corresponding to the provinces you have picked.
6. Column #2, rows 2 to 5: contain table headers.
7. For the rest of the table, complete the remainder of the information for the provinces you will have picked. (This info is available at

https://en.wikipedia.org/wiki/Provinces_and_territories_of_Canada)

Question 3 – Forms (6 pts)

Create a single page that demonstrates an HTML form used for a rental apartment search site. Keep to the format in figure 3 at the end of the handout. You are free to change the text and choices. No CSS please. (Question 4 will have you practicing with CSS.)

Your page must include:

• A title within an h tag which includes your name
• Two parts each within its own fieldset tag and each with its own legend tag: one to contain the renter’s information and one for the renter to enter the type of apartment they are looking for.
• In the Renter’s Information part:
  • a numerical input fields to input the number of people who will be living in the apartment.
  • radio buttons to indicate if there are smokers who will be living in the apartment.
  • check boxes to indicate what type of pets the renters have. Next to the other option, there must be a text input field for the user to enter the type of pet they have other than cat or dog.
• In the What are you looking for? part:
  • give the user at least 5 possible apartment sizes to pick from via check boxes o give the user at least 6 possible location choices to pick from via check boxes o a drop-down list for the user to select the price range they are looking for. Have at least 4 options with one being No price limit.
  • give the user at least 5 possible It would be nice to have options to pick from via check boxes.
• Include a submit button labelled Search and a reset button labelled Start over.

Note at this point the form will not do anything when submitted.  (No presentation attributes please.)

Question 4 – Presentation (6 pts)

Make a copy of your HTML page from question 3 and add the following presentation formatting. All formatting must be defined in the head section of your document.

1. An image of your choice to the right or left of the top header (When the user clicks on the image it should take them to the URL where the image is from). It might be easier to include this part in a table with 2 columns so that the image is next to the header.
2. The background of your page should be any color other than white.
3. Each fieldset border color should be different and not black or grey.
4. The legend of each fieldset should be the same color as the border of the fieldset it belongs to.
5. The background color of each fieldset should be different and other than white.
6. The labels in each fieldset should be a lighter version of the border and legend color.
7. All prompt input field labels should be bolded (such as Smoker?, Any pets?, Specify …). Refer to figure 4 at the end of this handout.