Lab Assignment

I.  Learning Objectives:

By the end of this assignment, you will be able to:

1. Link and embed different multimedia files and formats

2. Convert audio and video files into different formats

II.  Overview

To see a video explanation of what you need to do, watch: https://youtu.be/PZ8HV2EKdgo

To see a video showing you how to copy/paste youtube iframe information into your web page, view:  https://youtu.be/BkZLCb4enlo

You will be creating your own multimedia page.  The page must include video and audio files in several different formats.  You will be embedding media files and linking to media files.

Part 1:  Create a multimedia page (23 points)

Create a multimedia page (or modify an existing page and place multimedia in it).     Here's an example of what you can create:  multimedia.html. Here is another example of what you can create: multimedia2.html

If you are going to modify an existing page, you should open the file and then save the one you are modifying into the Lesson7 folder (that will keep it separate from the original).  Name the file:  multimedia.html

Specific requirements include:

1)   You need one embedded sound file.  This one file should be saved in 3 different sound formats to ensure anyone viewing the page can hear the sound. You should include an mp3 file, wav file and another sound format of your choice. If you need to convert a file, you can use cloudconvert or audacity.  To see a video showing you how to use cloudconvert work, watch: https://youtu.be/U823Uez2ajM 4 points

2)  You need three links to different sound files.  If you want to use 3 different mp3 sound files, that is OK. If you want to use a single sound file, you will need to save it in 3 different sound formats such as mp3, wav and m4a.  So, you need 3 links to 3 separate sound files. 3 points

3)  You need three video links.  If you are linking to your own video, you can save the video as an mp4, webm and avi or mov file, and then link to each one separately.   If you are linking to youtube or another site, you will need to include 3 separate links (to 3 different videos).

So, if you are linking to your own video and you convert it to 3 different formats, linking to each will count as your three.  If you are not linking to your own video, you need to include 3 links to different web videos.  3 points

4)   You need one embedded video.  You can use <iframe> to embed a youtube video OR you can use the  <video> element and embed one of your own videos.  If you embed one of your own videos, make sure you have saved the video as an mp4, webm and mov, avi or ogv. You should include <source> elements for 3 different video formats to ensure that all users can view your video.   4 points

5)  The text in  the page should flow around the embedded and linked video/sound files (similar to the zoo page).  You can use the traditional box layout or the flexbox layout (it is up to you).  Your elements should also be placed in columns (similar to the zoo page). The Halloween example uses flexbox and has the content in one column.  The Duck example uses flexbox and has the content in two columns. If you modify an existing page, you will probably need to adjust the CSS to accomodate the text flow around the elements in the page   7 points

6)  Make sure you place the page into the CIT180/Lesson7 folder.  All the images, sound and video files for the page should be in a CIT180/Lesson7/media folder    2 points

7) Make sure you view everything offline.  Once it looks good, you can transfer it to the Internet.

Part 2:  Add Links to your Assignment Page  2 points

1.  Add a heading and link for the Lesson 7 textbook assignment similar to the example below:

2.  Add a heading and links to the lab Lesson 7 assignment similar to the example shown below:

To see a video demonstration showing how to transfer files and ensure that the full video has been transferred, watch: https://youtu.be/IrgvZQq2P3E

3.  Transfer the Lesson7/multimedia.html file to the Lesson7 folder on the server.

4.  Transfer the Lesson7/media sound and video files used in this assignment to the Lesson7/media folder on the server.

5.  Transfer the updated assignments.html file to the main directory on the server.

Grading: