02 Feb The names of the browsers

Unit 04 Assignment 1

Adding Media

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 assignment, 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 assignment:

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 with them if there are any limitations.

Hints

A few hints to successfully complete your assignment:

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

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. 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.

Submission Requirements

Submit your work in the courseroom using a single zip file containing the following:

All page files.

All media files.

image_and_url.doc.­ Include a Word document with:

The URLs for each of your pages.

Each of your media files.

The names of the browsers you used to view the pages.

Pasted images from your validation screen capture.

Any ancillary files such as graphic or photos you may have decided to include.

Upload your Web site files your Web host.

Resources

Adding Media Scoring Guide.

Markup Validation Service.

CSS Validation Service.