Create an html website

CIS 227 Mid-Term CIS 126 Mid-Term Project Winter 2019 Overvievw This midterm assignment brings together all he elements covered in the first half of the course. It is worth 20% of . requirements, as they might be provided by a customer. After the verbal description, screen shots of the pages are included. Finally, a rubric is attached at the end your grade. These irst sections describe the You will be creating a website for a musical instrument store called Keyboard Specialists. Their clients range from college students to families to professionals The owner has requested a website that conveys the excitement of music anda level of trust in this business. Your site will consist of a home page (midterm.html) and two (or three, optionally) other pages: products.html (extra c redit) . In addition, a common css file (midterm.css) will be shared by all four pages. You will be required to code these three pages (four if you do the extra credit), plus midterm.css. Starter files are provided for all the above. At the end of this document are screen shots of what look like. These are to be used as reference for how your web pages should appear. At times there will be obvious things that are implied. For instance, it may not be mentioned that you should include the navigation area on each page, however you will see it in the examples and you will be expected to place it on each page. Winter 2019 your web pages should HFC CIS 227 Mid-Term CIS 126 Midterm Requirements Extra Credit 1. Write the HTML and CSS for the fourth page, the products page (products.html) and put images of keyboard-type instruments sold at the store. Each image should have a caption indicating what it is. Arrange the images horizontally (the default with inline tags like cimg) set the width so that three images fit across the page. Be sure to use images that have no copyright restriction(e.g. refer to htns://www.flickr.comicommons where you can search for and download images). 2 Embed the Youtube video on playing the Hohner Clavinet (shown below). Unique Features of Each Page The four pages have the common features noted above. Other common features are built into the starter files provided. Each page's unique contents reside between the ch2>,

,

, and elements, indude the keys jpg image at the bottom of the section. If you do the extra credit YouTube video, it would be placed just before the footer. 2. 3. Make sure all elements are centered on the page. 4 Adjust margins, padding. widths and heights accordingly to achieve as close as possible to the example as shown. CIS 227 Mid-Term CIS126 Midterm Requirements 1 View the contact.html image below. Using the standard starter file, include the relevant HTML elements used to create an HTML page 2. Insert a form element that matches what is shown in the image below. a. Three input fields b. The email feld is required c. A button labelled "submit 3 Insert the contactus.jpg image at the bottom of the section. services.html 1. View the services.html image below. Using the standard starter file, include the relevant HTML elements used to create an HTML page. 2. Insert the list element that matches what is shown in the image below 3 Insert the piano-tuning ipg image at the bottom of the section CIS 227 Mid-Term CIS126 Midterm Requirements Sample of the home page, midterm.html: Keyboard Specialists Sample of the services page (services.html): Keyboard Specialists Our Services and Prices CIS 227 Mid-Term CIS126 Midterm Requirements Sample of the Contact Us page (contact.html): Keyboard Speeialists Sample of the Products Page (services.html) extra credit Keyboard Specialists our Products CIS 227 Mid-Term CIS 126 Mid-Term Project Winter 2019 Overvievw This midterm assignment brings together all he elements covered in the first half of the course. It is worth 20% of . requirements, as they might be provided by a customer. After the verbal description, screen shots of the pages are included. Finally, a rubric is attached at the end your grade. These irst sections describe the You will be creating a website for a musical instrument store called Keyboard Specialists. Their clients range from college students to families to professionals The owner has requested a website that conveys the excitement of music anda level of trust in this business. Your site will consist of a home page (midterm.html) and two (or three, optionally) other pages: products.html (extra c redit) . In addition, a common css file (midterm.css) will be shared by all four pages. You will be required to code these three pages (four if you do the extra credit), plus midterm.css. Starter files are provided for all the above. At the end of this document are screen shots of what look like. These are to be used as reference for how your web pages should appear. At times there will be obvious things that are implied. For instance, it may not be mentioned that you should include the navigation area on each page, however you will see it in the examples and you will be expected to place it on each page. Winter 2019 your web pages should HFC CIS 227 Mid-Term CIS 126 Midterm Requirements Extra Credit 1. Write the HTML and CSS for the fourth page, the products page (products.html) and put images of keyboard-type instruments sold at the store. Each image should have a caption indicating what it is. Arrange the images horizontally (the default with inline tags like cimg) set the width so that three images fit across the page. Be sure to use images that have no copyright restriction(e.g. refer to htns://www.flickr.comicommons where you can search for and download images). 2 Embed the Youtube video on playing the Hohner Clavinet (shown below). Unique Features of Each Page The four pages have the common features noted above. Other common features are built into the starter files provided. Each page's unique contents reside between the ch2>,

,

, and elements, indude the keys jpg image at the bottom of the section. If you do the extra credit YouTube video, it would be placed just before the footer. 2. 3. Make sure all elements are centered on the page. 4 Adjust margins, padding. widths and heights accordingly to achieve as close as possible to the example as shown. CIS 227 Mid-Term CIS126 Midterm Requirements 1 View the contact.html image below. Using the standard starter file, include the relevant HTML elements used to create an HTML page 2. Insert a form element that matches what is shown in the image below. a. Three input fields b. The email feld is required c. A button labelled "submit 3 Insert the contactus.jpg image at the bottom of the section. services.html 1. View the services.html image below. Using the standard starter file, include the relevant HTML elements used to create an HTML page. 2. Insert the list element that matches what is shown in the image below 3 Insert the piano-tuning ipg image at the bottom of the section CIS 227 Mid-Term CIS126 Midterm Requirements Sample of the home page, midterm.html: Keyboard Specialists Sample of the services page (services.html): Keyboard Specialists Our Services and Prices CIS 227 Mid-Term CIS126 Midterm Requirements Sample of the Contact Us page (contact.html): Keyboard Speeialists Sample of the Products Page (services.html) extra credit Keyboard Specialists our Products