Adding Audio to the Website for Steve’s Screen Services
Problem: You work for a screening company called Steve’s Screen Services that specializes in
screening, cleaning, and repairing screened patios. You have already created a responsive website,
but now need to enhance the Gallery page with audio. You add and style an audio element for the
Gallery page. The webpage with the audio element is shown in Figure 9–28.

Instructions: Perform the following tasks:
1. Save the lab2\media folder from the Data Files for Students to your lab2 folder.
2. Open the gallery.html document and update the comment at the top of the page to include today’s date.
3. Insert an audio element below the figure element (within the article element) and
     set the element to automatically play the sound and to display the controls.
4. Insert three source elements and reference each audio file within the media folder. Insert
     the appropriate type attribute and value for each source.
5. Create a paragraph element with a fallback message to legacy browser users, notifying them
     that their browser does not support the audio element.
6. Wrap the audio element within a div element with the attribute and value
class=”sound”.
7. In the screenstyles.css file, modify the comment at the top of the page to include today’s date.
8. In the screenstyles.css file, create a new style rule for the sound class above the media
     queries that specifies a center alignment. Include a comment for this new style rule.
9. Save all files and open the gallery.html page within a browser to view the page, as shown in Figure 9–28.
10. Validate your HTML code and fix any errors.
11. Validate your CSS code and fix any errors.
12. Submit your assignment in the format specified by your instructor.

13. Research the Internet to locate free resources for audio files and provide a summary of your
      fndings. Include at least three resource links.