Learning Goal #5
Students will be able to construct complex web pages and understand the purpose of every HTML element, attribute, and value that was written into their code.
PART 1: DeadlinesRead More
Below are your deadlines for Learning Goal #5: Mastering the Foundations of HTML. If you complete approximately 1.5 lessons per week, you should be able to keep up with the deadlines.
- January 11, 2019:
Getting Started – Lesson 5.0
- February 1, 2019:
5 Lessons Complete (5.1 through 5.5)
- February 4, 2019:
Quarter Quiz #1 (Questions from 5.1 through 5.5 Only)
- March 1, 2019:
6 Lessons Complete (5.6 through 5.11)
- March 4, 2019:
Quarter Quiz #2 (Questions from 5.1 through 5.11)
- March 4 to March 13, 2019:
Learning Goal Project (Grading on March 13)
REMINDER: In order to earn an A for each lesson, you need to complete each assignment within the lessons. At the end of each lesson, you will take a short quiz on eCampus and confirm that you have done all the assignments. If you only do some of the assignments, you can still do okay, but it is in your best interest to complete them all. Your grade depends on how much you get done within the time you are given.
PART 2: OverviewRead More
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.
PART 3: AssignmentsRead More
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.
- The Audio Element
- The Video Element
- CHALLENGE: The Progress Element
- CHALLENGE: Web Storage API
- CHALLENGE: Geolocation API
- 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.
- Audio: Doorbell (Right-Click and Choose “Save Link As”)
- Audio: Drill (Right-Click and Choose “Save Link As”)
- Audio: Noise (Right-Click and Choose “Save Link As”)
- Audio: Siren (Right-Click and Choose “Save Link As”)
- Audio: UFO (Right-Click and Choose “Save Link As”)
- Video: Bloom (Right-Click and Choose “Save Link As”)
- Video: Mist (Right-Click and Choose “Save Link As”)
- Video: Hike (Right-Click and Choose “Save Link As”)
- Video: Ocean (Autosaves in Chrome)
- 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.