Overview

Adding media to your site is almost considered as the price of admission for a modern Web site. Identifying or creating contextually compelling media content greatly enhances a Web site.

In this assessment, you will add video, audio, and an image gallery  to your Web site. You can create the images, video, and audio on your  own, or you can use them from an existing source such as YouTube. Make  sure to only use content that does not infringe on copyrights and  include proper credits where applicable.

Note: Content used in the creation of your Web  pages should be original (created by you) or content that is not  restricted by copyright and royalty issues.
 

Directions

Add the following media to your site. Content should be appropriate to the look, feel, and context of your site.

Image Gallery (add to the Gallery page): Create  an image gallery with at least three images. The images should be  displayed as thumbnails that open a larger image in a pop-up window when  clicked. All of the images on your site should use the alt attribute to describe the image.

Video:Can be taken from YouTube or other sources or made by you. Be sure to include player controls.

Audio:Use .mp3, .wav, or .ogg files. Be sure to include player controls.

Make sure to do the following:

Add a functioning video to a Web page.

Add a functioning audio track to a Web page.

• Create a functioning image gallery according to specification.

Write developer comments to describe and explain code.

Notes

• Make a note of the following as you complete this assessment:

Images should ideally be created using JPEG, GIF, and PNG-8 file  formats. Use the online image resizing tools to resize your image to the  intended display size. You want to avoid the browser scale your image  as it can cause color depth and resolution problems.

• Audio and video file sizes can get quite large, so be sure your  file sizes are less than 10 MB to be able to quickly upload and download  them. Your hosting server may limit your file sizes as well, so be sure  to check if there are any limitations.

Hints

A few hints to successfully complete your assessment:

If you are looking for resources around audio and video, make  sure that you are looking specifically for HTML5 resources. The  extensive plugins and browser workarounds are no longer a concern. All  video and audio can be used through the <video> and <audio>  elements.

• It is sometimes useful to put video, audio, and graphics files in a single directory with a name that is descriptive such as media.
• Once completed, view your pages in your selected Web browsers to  see if the content renders appropriately and consistently within each.  Next, ensure that your HTML code is HTML5 compliant and your CSS code is  valid. You may use the Markup Validation Service for testing the former  and CSS Validation Service for testing the latter, both from W3C,  linked in the Resources under the Suggested Resources heading. Important: Take a screen capture of each of your validation results and save it for submission.
• Note: Errors from the validation should be fixed.  However, warnings do not need to be fixed but should be reviewed. Fix  the issues from the top down as one error can cascade into 20 other  errors.
   
• Additional Requirements