Soen287S2023_A1

pdf

School

Concordia University *

*We aren’t endorsed by this school

Course

287

Subject

Computer Science

Date

Feb 20, 2024

Type

pdf

Pages

Uploaded by AdmiralMetal13287

SOEN287/Summer 2023 Assignment #1 1 Concordia University SOEN 287: Web Programming – Winter 2024 Assignment 1 ____________________________________________________________________________ Due Date: By 11:55pm Feb 16 (Friday), 2024 Evaluation: 6% of final mark Late Submission: none accepted Type: Individual Assignment Purpose: The purpose of this assignment is to have you practice HTML5 tags and document - level style sheets (in Head section). CEAB Attributes: This assignments is primarily evaluating your use of the HTML5 tags (Use of engineering tools) Question 1 – Lists (4 pts) Using HTML5, produce the following nested lists exactly as illustrated in figure 1. It includes definition, ordered and unordered nested lists. No CSS required. Figure 1 - Nested lists to reproduce

SOEN287/Summer 2023 Assignment #1 2 Question 2- Tables (4 pts) Using HTML5, produce the following nested tables exactly as illustrated in figure 2. . It includes the <th>, <td> and <tr> tags. 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 required (Question 4 will have you practicing with CSS). Figure 2. Nested tables to reproduce Question 3 – Forms (6 pts) Create a single page that demonstrates an HTML form used for a survey. Keep to the format in figure 3. You are free to change the text and choices. Your page must include: ∙ 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. ∙ 5 text input fields : first and last name and 3 for the favorite artists/bands ∙ an email input fields ∙ a drop-down list for the user to select their age category ∙ give the user at least 5 possible music genres to pick from via check boxes ∙ give the user 3 text fields to enter 3 favorite artists/bands ∙ give the customer 4 possible choices of shows they could win tickets for via radio buttons ∙ include both a submit and reset button ( action buttons)

SOEN287/Summer 2023 Assignment #1 3 ∙ Have 2 fieldset tag each with their own legend tag: one to contain the user information and one for the survey questions. Be sure to include name and id tags for all input fields. Note at this point the form will not do anything when submitted. (No presentation attributes required.) Figure 3 illustrates the expected format of your HTML page. Figure 3 - Format of page to reproduce for question 3

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

SOEN287/Summer 2023 Assignment #1 4 Question 4 – Presentation (5 pts) Make a copy of your HTML page from question 3 and add the following presentation formatting. All formatting should be defined in the head section of your document. 1. Each fieldset border color should be different and not black or grey. 2. The legend of each fieldset should be the same color as the border of the fieldset it belongs to. 3. The background color of each fieldset should be different and other than white. 4. The labels in each fieldset should be a lighter version of the border and legend color. 5. All prompts input field labels should be bolded (such as First Name, List your 3 favorite artist/bands, just to list 2 examples). Refer to figure 4. Figure 4- Format of page to reproduce for question 4

SOEN287/Summer 2023 Assignment #1 5 Q5: Understand the CSS box model (4 pts) The image below illustrates the CSS box model: Please use the <div> to implement a page illustrated below. 1) You can use any color combinations for the border and the background; 2) you can decide the width of the paragraph in the border; 3) when you resize the browser window, the text is automatically wrapped. Figure 5. The CSS Box Model Figure 6. A sample page

SOEN287/Summer 2023 Assignment #1 6 Q6: Pseudo Class Selector and Navigation Bar (3pts) Use “list” to create a vertical “navigation bar”. “Home” is the current page (active), with a green background color and a white text. The other non-active items have a grey background and a white text. When mouse is over a non-active item, the text changes to white with black background. Figure 3 is a demo. Figure 7. A sample page of navigation bar

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

SOEN287/Summer 2023 Assignment #1 7 Q7: Overlapped text boxes On a single HTML page, include the following two div container elements in the body. Using an external style sheet, add style to the div elements such that one div has some overlap with the second div (Hint: make use of relative or absolute positioning). Both divs should have a padding of 5px all around, a green 2px dotted border (I show the border of one box in orange), a width and height of 200px and their text should be centered. Also, add style to the span class “red” so that the text displays in red and is bold . <div id=”first”> <span class=”red”>This is a DIV Container</span> </div> <div id=”second”> DIVs are a powerful way to modularize presentation </div> Figure 8. two div boxes

SOEN287/Summer 2023 Assignment #1 8 Q8: Step 1 of the Running Project - Adopt a Dog/Cat The last question of each of the remaining assignments will be continuous from assignment to assignment. The goal is to build a website for people who are looking to adopt a cat or a dog. You will expand what your site can do with each submission . In this assignment, you will build the skeleton for the Adopt A-Cat/Dog website, along with some initial content. Use HTML5 and CSS to accomplish this task. The structure of the site should be broken into four components: • A header. This should appear at the top of all pages on your site. It should include the name of your pet adoption service as well as a logo/picture. Clicking on the logo/picture should take you to the home page. • A side menu . This should appear on the left or right side of all your pages. Include the following contextual navigation links: Home page, Browse Available Pets , Find a dog/cat , Dog Care , Cat Care , Have a pet to give away and Contact Us . The side menu should consistently appear on the left or right side at all times. • A content area. This should be the main area where content of the site is displayed. This is where forms would be filled out and any significant text would appear. • Following is a description of each page which will appear in the Content area of your site, as a result of clicking on one of the choices listed in the side menu. o The Home page which should be a welcome page and have a brief description of what the site is about. Include enough content and decorated as you wish, to demonstrate your HTML5 and CSS prowess. o The Browse Available Pets page will eventually display all of the pets available for adoption. For now you can have an “Under Construction message” appear when a user clicks on this link. o The Find a dog/cat link should load a form (could be the same form for both or a different form for dogs and cats which are very similar – You decide). To search the user will need to complete the form which requests the following information: § Cat or dog § Breed of dog or cat – (include a doesn’t matter choice) § Preferred age of animal - can be a choice of age ranges (include a doesn’t matter choice) § Preferred gender – Male, female, doesn’t matter choice. § Whether it needs to get along with other dogs, other cats, small children. § Submit & Clear button (eventually the submit button will result in a list of pets fitting the selected criteria being listed.) § We might add a few more fields in subsequent assignments o The Dog Care and Cat Care pages will offer general instructions on how to care for a dog or cat. They can contain text you copied from other sites, a series of links or a combination of these two. Don’t forget to give credit for material that is not yours. o The Have a pet to give away page will have a form which the person who has a pet to give up for adoption will need to fill out. Eventually a user will need to log in to this section of the site to

SOEN287/Summer 2023 Assignment #1 9 register a pet. For this assignment when this link is activated have a form that appears requesting the following information (you can add more and we may add more in future assignments): § Cat or dog § Breed of dog or cat – include a mix breed § Age of animal - can be a choice of age ranges § Animal gender § Gets along with other dogs § Gets along with other cats § Suitable for a family with small children § Comment area (textarea) which the user can use to brag about the animal they are putting up for adoption. § Their current owner’s name (both family and given name) § Their current owner’s email (where they can be reached) § Submit & Clear button - eventually the submit button will add this pet to the list of available pets on the server. o The Contact Us page which will have contact information. This is where you should include your name, student Id, email and whatever other info you wish to add. • A footer . This should appear at the bottom of all your pages. Give it a distinct background color and include a link to a Privacy/Disclaimer Statement which can either appear in the content area of the site. It should display a message promising users that their information will not be sold or misused, and protects the website builder from any incorrect information posted by a pet owner and so on. Here are a few possible designs (You can make your own as long as it follows the requested guidelines.) Header Side Menu Content area Footer Side Menu Header Content area Footer Header Side Menu Side Menu Footer Header Side Menu Content area Footer

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

SOEN287/Summer 2023 Assignment #1 10 Note : 1) Although it is not a functional requirement, your site should always be well organized with properly named files and well defined directories. 2) Use external CSS files when possible. 3) Any pictures, graphics, text you “borrow” from other sites, be sure to give credit to. Be aware of plagiarism. 4) Before submitting your assignment please be sure to validate your codes using the HTML5 validator at http://validator.w3.org/. Any file that fails the validator check (except for the border attribute for question 2), will result in a -1 penalty. 5) Please give meaningful names to each html file to make the feedback process easier. - Naming convention for zip file: Create one zip file, containing all files for your assignment. - The zip file should be called a#_studentID , where # is the number of the assignment and 6) studentID is your student ID number. For example, for the first assignment, student 123456 would submit a zip file named a1_123456.zipSubmit your zip file in moodle assignment 1. 7) Submit your assignment as “ Programming Assignment ” and select Submission 1 for assignment #1. Question 1- 4 pts. ∙ Definition list ∙ Ordered /Nested ordered list ∙ Unordered /Nested unordered list 1pt 1.5pt 1.5pt Question 2- 5 pts. ∙ Row 1 ∙ Row 2 ∙ Row 3 ∙ Row 4 ∙ Row 5 1pt 1.5 pts 1.5 pts 0.5 pts 0.5 pts Question 3- 6 pts. Submitting Assignment 1 Evaluation Criteria for Assignment 1 (20 points)

SOEN287/Summer 2023 Assignment #1 11 ∙ Logo/image ∙ Text input fields ∙ Check boxes ∙ Drop down list ∙ Radio buttons ∙ Action buttons ∙ fieldsets 0.5 pts 1 pt 1 pt 1 pt 1 pt 1 pt 0.5 pts Question 4- 5 pts. ∙ Fieldset/legend formatting ∙ Page Background color ∙ Label format ∙ CSS 2 pts 1 pt 1 pt 1 pt Question 5 – 3 pts ∙ background color ∙ the border ∙ text wrapped 1pt 1pt 1pt Question 6 – 3 pts .Home (active) .Non-active items .Mouse hover 1pt 1pt 1pt Question 7 6pts .padding 5px .overlap .dotted border 2px .size 200px*200px .text centered 1pts 2pts 1pt 1pt 1pt Question 8 12 pts

SOEN287/Summer 2023 Assignment #1 12 .Document header .Side menu .content area .home page .find a cat/dog .care page .have a pet to give away .contact .footer 1pt 1pt 1pt 1pt 2pts 1pt 2pts 1pt 2pts Total 40pts

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

Soen287S2023_A1

Related Documents