If Web Design II is a self-driven, independent class that requires every student to watch and listen to videos as you learn new elements of HTML and CSS, then it only makes sense that you should know how to include things on a web page that can be listened to (audio) or watched (visual). The purpose of this lesson is to give you that skill and show you how to make it useful in future designs both inside and outside of class.

Below are some helpful tips and resources that you can use during and after this lesson is over.

Important Points to Remember

• Audio files are designed to add sound to a webpage.
• Video files are designed to include movie clips and streaming videos to a webpage.
• Just like images that end in .jpg, .png, or .gif, all audio and video files have extensions as well.
• Common audio extensions include .mp3, .wma, .wav, .ogg.
• Common video extensions include .mp4, .wmv, .mov, .mpg
• Most web browsers can read these common audio and video extensions, but not all of them, so it’s good to include multiple sources just in case (source tag).
• Other elements, like embed, object, and iframe, also allow designers to insert audio and video files, but usually through other formats like .swf or even online YouTube videos.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called HTML Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many slides you complete and how many questions you answer correctly after each slide segment.

31. The Audio Element
32. The Video Element
33. CHALLENGE: The Progress Element
34. CHALLENGE: Web Storage API
35. CHALLENGE: Geolocation API
36. CHALLENGE: Drag & Drop API

Assignment #2 (1 Point): Audio/Visual Design
Now that you know how to input audio and visual elements into a web page, it’s time to create a page with audio and visual effects. You will be designing a page that looks something like this. Follow the directions below to learn how.

• STEP 1: In your WD2 Folder, create a new subfolder called /av, then download all 10 of these files into your /av folder.
  1. Audio: Doorbell (Right-Click and Choose “Save Link As”)
  2. Audio: Drill (Right-Click and Choose “Save Link As”)
  3. Audio: Noise (Right-Click and Choose “Save Link As”)
  4. Audio: Siren (Right-Click and Choose “Save Link As”)
  5. Audio: UFO (Right-Click and Choose “Save Link As”)
  6. Video: Bloom (Right-Click and Choose “Save Link As”)
  7. Video: Mist (Right-Click and Choose “Save Link As”)
  8. Video: Hike (Right-Click and Choose “Save Link As”)
  9. Video: Ocean (Autosaves in Chrome)
  10. Video: Record (Autosaves in Chrome)
• STEP 2: Open a new document with Notepad or Notepad++ and save it as “5-9_effects.html” in your WD2 folder.
• STEP 3: Using what you learned from the last two lessons, construct a webpage that includes a header, a footer, and at least one section element in between them (div, article, nav, aside, etc). Feel free to copy/paste from one of your other pages, but this one cannot look like those.
• STEP 4: Once you have the basic sections in place, embed two of the videos that you saved, then set them to autoplay and loop.
• STEP 5: After you have embedded two videos, embed two of the audio files that you saved, then set them to autoplay and loop.
• STEP 6: Check to see that your website looks somewhat presentable. Are the videos aligned next to each other or do they look like they’re off balance? Again, here is an example of what it could look like.
• STEP 7: When you have completed the page and feel ready to present it, go on to Assignment #3.

Assignment #3 (1 Point): Discussion Topic
During Assignment #1, you were asked to look at six lessons on SoloLearn. However, four of those lessons were labeled as CHALLENGE slides because they had information that wasn’t very easy to explain. More importantly, those slides (mostly about APIs) were about things that you probably won’t use in this class. Still, that doesn’t mean you were allowed to ignore the information.

Go to the eCampus Discussion Board, find the appropriate Discussion Topic for the lesson, and write a short, 100 word post explaining at least two things that you learned from the four CHALLENGE lessons in Assignment #1 (The Progress Element, Web Storage API, Geolocation API, or the Drag & Drop API). If you decide to investigate the meaning of an API and want to explain it, this would also be acceptable.

Assignment #4 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link.

Assignment #5 (1 Point): Review and Quiz
Look over the 5.9 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 5.9, and take it. This is a way for you to show the teacher that you have finished this lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 5.10. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.