Starting from:
$30
SOEN287-Project 1 Solved
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/Major_League_Baseball
Question 2- Tables (4 pts)
Using HTML5, produce the table in figure 2 at the end of this handout of your 4 recent World Series champions 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. 1st line: Include your name on the 1st line in a level 2 header.
2. 2nd line: level 4 header.
3. Row #1 of table: level 1 header.
4. Column #1 of table: contains image of the World Series Commissioner’s trophy.
5. Row #3, columns 3 to 6: logos of the teams corresponding to the 4 champions 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 teams you will have picked. (This info is available at https://en.wikipedia.org/wiki/List_of_World_Series_champions)
8. Set the width of the first image to 200 pixels, and the width of each team logo to 100 pixels.
Question 3 – Forms (6 pts)
Create a single page that demonstrates an HTML form used for a hotel room reservation site for the hotels located in Montreal. 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 shows the title of the form
• Two parts each within its own fieldset tag and each with its own legend tag: one to contain the Reservation information and one for the guests to enter the type of rooms and hotels they are looking for.
• In the Reservation Information part:
o a numerical input fields to input the number of rooms the client wants to reserve. o a radio buttons to indicate if the guests smoke.
o Two inputs of type date to indicate the check-in and check-out dates.
• In the Room Specifications part:
o give the guest at least 5 possible combinations of single/double beds in a room, to pick from via check boxes
o give the guest at least 6 possible location choices to pick from via check boxes o a drop-down list for the guest to select the price range they are looking for. Have at least 4 options with one being No price limit. o give the guest at least 5 possible values for the number of required parking (One of them should be selected by the guest)
o give the guest at least 6 possible special facilities options to pick from via check boxes.
• Include a submit button labelled Search and a reset button labelled Start over.
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 guest 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?, Start Date …). Refer to figure 4 at the end of this handout.
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/Major_League_Baseball
Question 2- Tables (4 pts)
Using HTML5, produce the table in figure 2 at the end of this handout of your 4 recent World Series champions 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. 1st line: Include your name on the 1st line in a level 2 header.
2. 2nd line: level 4 header.
3. Row #1 of table: level 1 header.
4. Column #1 of table: contains image of the World Series Commissioner’s trophy.
5. Row #3, columns 3 to 6: logos of the teams corresponding to the 4 champions 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 teams you will have picked. (This info is available at https://en.wikipedia.org/wiki/List_of_World_Series_champions)
8. Set the width of the first image to 200 pixels, and the width of each team logo to 100 pixels.
Question 3 – Forms (6 pts)
Create a single page that demonstrates an HTML form used for a hotel room reservation site for the hotels located in Montreal. 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 shows the title of the form
• Two parts each within its own fieldset tag and each with its own legend tag: one to contain the Reservation information and one for the guests to enter the type of rooms and hotels they are looking for.
• In the Reservation Information part:
o a numerical input fields to input the number of rooms the client wants to reserve. o a radio buttons to indicate if the guests smoke.
o Two inputs of type date to indicate the check-in and check-out dates.
• In the Room Specifications part:
o give the guest at least 5 possible combinations of single/double beds in a room, to pick from via check boxes
o give the guest at least 6 possible location choices to pick from via check boxes o a drop-down list for the guest to select the price range they are looking for. Have at least 4 options with one being No price limit. o give the guest at least 5 possible values for the number of required parking (One of them should be selected by the guest)
o give the guest at least 6 possible special facilities options to pick from via check boxes.
• Include a submit button labelled Search and a reset button labelled Start over.
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 guest 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?, Start Date …). Refer to figure 4 at the end of this handout.
1 file (3.8KB)
