ICT Assignment 11

ICT13 Assignment 11: Assessment 11 • 10% of Final Mark • Lab 1: Creating a Webpage for Strike a Chord page 389 + 452 + 500 • Unique number –  • Due date – 2023/08/21 • Time - 23:00 You work for a local music lesson company called Strike a Chord that provides music lessons for piano, guitar, and violin. The company needs a web presence and has hired you to create their website. You have already developed a responsive web design website and now need to integrate additional HTML 5 semantic elements and create a new page. The Instructors page, displayed in mobile, tablet, and desktop viewports, and the favicon is shown in Figure 7–78.Instructions: Perform the following tasks: 1. Copy the image files in the chapter07lab1 folder from the Data Files to your musicimages folder. 2. Open the file in your text editor and then replace all of the div elements with section elements. 3. Use the file to create a new HTML file and name the file . Add the current date to the comment near the top of the page and update the file name. 4. In the file, update the title by replacing the word Template with Instructors. 5. In the main element, add a class attribute with a value of grid. 6. In the main element, replace the div element with an aside element, and then add a paragraph with the following text:Meet our professional and talented instructors. 7. Add a figure element below the aside element. Nest the following elements within the figure element: a. Add the guitar-instructor picture and use guitar instructor for the alt text. b. Add a figcaption below the picture and include the text Jack Williams, Guitar. 8. Add another figure element and nest the following elements: a. Add the electric-guitar-instructor picture and use electric guitar instructor for the alt text. b. Add a figcaption below the picture and include the text Jose Ramirez, Guitar. 9. Add another figure element and nest the following elements: a. Add the piano-instructor picture and use piano instructor for the alt text. b. Add a figcaption below the picture and include the text Elisa Petrov, Piano. 10. Add another figure element and nest the following elements: a. Add the violin-instructor picture and use violin instructor for the alt text. b. Add a figcaption below the picture and include the text Maya Hill, Violin. 11. In the file, add the section, aside, figure, and figcaption elements to the CSS reset. 12. Below the img style rule, add the following comment and style rule: /* Style rule for box sizing applies to all elements */ * {box-sizing: border-box; } 13. Create a style rule for the aside element within the mobile viewport and include the following declarations: a. text-align: center; b. font-size: 1.5em; c. font-weight: bold; d. color: #; e. text-shadow: 3px 3px 10px #8280cb; 14. Create a style rule for the figure element within the mobile viewport, and include the following declarations: a. position: relative; b. max-width: 275px; c. margin: 2% auto; d. border: 8px solid #; 15. Create a style rule for the figcaption element within the mobile viewport, and include the following declarations: a. position: absolute; b. bottom: 0; c. background: rgba(55, 54, 132, 0.7); d. color: #fff; e. width: 100%; f. padding: 5% 0; g. text-align: center; h. font-family: Verdana, Arial, sans-serif; i. font-size: 1.5em; j. font-weight: bold; 16. In the tablet media query, create a style rule for the grid class selector that sets the display to a grid, sets the grid template columns to a two-column layout, and sets the grid gap to 20px. 17. Create a style rule for the aside element that sets the grid column value to 1 / span 2. 18. In the desktop media query, create a style rule for the grid class selector that sets the grid template columns to a four-column layout. 19. Create a style rule for the figcaption element that sets the font size to 1em. 20. Create a style rule for the aside element that sets the grid column value to 1 / span 4. 21. Add the following link elements within the head element on all of the HTML files, including the file:<link rel="shortcut icon" href="images/"> <link rel="icon" type="image/png" sizes="32x32" href="images/ "><link rel="apple-touch-icon" sizes="180x180" href="images/"><link rel="icon" sizes="192x192" href="images/"> 22. Validate your HTML and CSS files and correct any errors. 23. Review your files for best coding practices; ensure proper spacing and indents for improved readability. 23. Save all files, open the page within a browser, and view the page in all three viewports, as shown in Figure 7–78. 24. Open the file in your text editor and use it to create a new page with the file name, . Update the comment with the file name and today’s date. In the title element, replace the word Template with Rentals. 25. In the file, add an id attribute with a value of rental to the empty div element nested within the main element. 26. Insert a heading 2 element within the rental div that contains the following text: We rent many different kinds of musical equipment. See our rental rates below. 27. Below the heading 2 element, insert a table element. Add a caption element with the text Rental Rates. 28. Insert six rows within the table and include a comment for each row to note the row number. Follow the example below: <tr><!--Row 1 --> </tr> 29. In Row 1, add the following three table header elements: <th>Equipment</th> <th>Daily Rate</th> <th>Weekend Rate</th> 30. In Row 2, add the following three table data elements: <td>Guitars</td> <td>$25</td> <td>$40</td> 31. Following the example in Step 7, add the following table data elements to the remaining rows: a. Row 3: Keyboards, $35, $60 b. Row 4: Drum Kits, $50, $75 c. Row 5: Microphones, $10, $15 d. Row 6: DJ Equipment, $22, $38 32. In the file, locate the mobile style rule for #contact and add #rental h2 as another selector for this style rule. 33. Below the mobile style rule for .map, add the following comment: /* Style rules for table */ 34. Below the comment, add the following style rules: table { border: 1px solid #; border-collapse: collapse; margin: 0 auto; width: 100%;} caption { font-size: 1.5em; font-weight: bold; padding: 1%;} th, td { border: 1px solid #; padding: 2%;} th { background-color: #; color: #fff; font-size: 1.15em; }tr:nth-child(odd) { background-color: #b7b7e1; } 35. Within the desktop media query, below the last style rule, add a new comment with the text Desktop Viewport: Style rules for table. Below the comment, add a style rule for the table selector that sets the width to 70%. 36. In the file, insert a new div element with an id attribute value of form below the contact div within the main element. Insert a heading 2 element within the form div and include the text, Complete the form below and one of our staff members will contact you. Insert a form element with a class attribute value of form-grid below the heading 2 element. Include a comment to note where the form begins. Follow the example below.<form class="form-grid"><!--Start Form --> </form> 37. Nest two fieldsets within the form element. Include a legend for each fieldset. Use the text Customer Information for the first fieldset legend, and use the text Musical Interest for the second fieldset legend. 38. Add the following label and input elements to the first fieldset: <label for="fName">First Name:</label> <input type="text" name="fName" id="fName"> <label for="lName">Last Name:</label> <input type="text" name="lName" id="lName"> <label for="email">Email:</label> <input type="email" name="email" id="email"> <label for="phone">Phone:</label> <input type="tel" id="phone" name="phone"> 39. Add the following paragraph, label, and input elements to the second fieldset: <p>I am interested in:</p><label for="guitarles"><input type="checkbox" name="interest" id="guitarles" value="Guitar Lessons">Guitar Lessons</label><label for="piano"><input type="checkbox" name="interest" id="pianoles" value="Piano Lessons">Piano Lessons</label><label for="violin"><input type="checkbox" name="interest" id="violinles" value="Violin Lessons">Violin Lessons</label><label for="rent"><input type="checkbox" name="interest" id="rent" value="Rental Equipment">Rental Equipment</label> 40. Below the second fieldset, add a submit button with the following attributes: type="submit" id="submit" value="Submit" class="btn" 41. In the file, insert a comment with the text Style rules for form elements above the comment for the footer style rules. Then create the following style rules for a mobile viewport: a. Create a style rule for the fieldset and input selectors that sets the bottom margin to 2%. b. Create a style rule for the fieldset legend selector that sets the font weight to bold and font size to 1.25em. c. Create a style rule for the label selector that sets the display to a block and sets the top padding to 3%. d. Create a style rule for the form #submit selector that sets the top and bottom margin to zero, left and right margins to auto,color to b7b7e1, and the font size to 1em. 42. In the file, within the tablet media query, insert a comment with the text Tablet Viewport: Style rule for form element below the .map style rule. Then, create a style rule for the form selector that sets the width to 70% and sets top and bottom margin to zero, and left and right margins to auto. 43. In the file, within the desktop media query, insert a comment with the text Desktop Viewport: Style rules for form elements below the table style rule. Then create the following style rules: a. Create a style rule for the form-grid class selector that sets the display to a grid, grid template columns value to auto auto, and sets the grid gap to 20px. b. Create a style rule for the btn class selector that sets the grid column value to 1 / span 2. 44. Use good coding practices by including indents and spacing between style rules. 45. Check your spelling. Validate all HTML and CSS files and correct any errors. Save your changes. 46. Open the file in Google Chrome’s device mode to view the table on the Rentals page in mobile, tablet, and desktop viewports. 47. Open the file in Google Chrome’s device mode to view the form on the Contact page in mobile, tablet, and desktop viewports. 48. Open your music folder and create a new subfolder named media. Copy the Data Files from chapter09/lab1 to your media folder. 49. Open the file in your text editor and update the comment with today’s date. 50. In the piano section, after the paragraph element, insert two new blank lines and then add an h4 element with the text, Piano Spring Performance. 51. Below the h4 element, add an audio element with the controls attribute. 52. Nest a source element within the audio element that specifies the 3 as the source file, located in the media folder, and audio/mp3 as the type. 53. Nest another source element that specifies the as the source file and audio/ogg as the type. 54. Below the source element, provide fallback text for legacy browsers that do not support the audio element. 55. In the guitar section, after the paragraph element, insert two new blank lines and then add an h4 element with the text, Guitar Winter Performance. 56. Below the h4 element, add an audio element with the controls attribute. 57. Nest a source element within the audio element that specifies the 3 as the source file and audio/mp3 as the type. 58. Nest another source element that specifies the as the source file and audio /ogg as the type. 59. Below the source element, provide fallback text for legacy browsers that do not support the audio element. 60. In the violin section, after the paragraph element, insert two new blank lines and then add an h4 element with the text, Violin Spring Performance. 61. Below the h4 element, add an audio element with the controls attribute. 62. Nest a source element within the audio element that specifies the 3 as the source file and audio/mp3 as the type. 63. Nest another source element that specifies the as the source file and audio /ogg as the type. 64. Below the source element, provide fallback text for legacy browsers that do not support the audio element. 65. Check your spelling. Validate your HTML file and correct any errors. Save your changes. 66. Open the file in your browser and test the audio. 67. Submit your assignment in the format specified by your instructor. Submission Requirements • You need to zip the Lab1 folder giving the zipped folder your student number as the name, e.g. • Do NOT use any specialized software to zip the folder • ONLY .zip files can be marked NO other zip type • Once your files have been zipped you need to upload it via CodeGrade in the module site on myUnisa • Feedback will be available immediately after submission • 3 Submission opportunities is available • Last submission result will be captured