H5 Computer

HTML5 Hands On Practice 5-Project Instructions.doc

CS 150 HTML5 Assignment 5 (HA 5) / Project Instructions

Purpose : To create a Web site with 4 Web pages with the HTML5 media elements for image, audio, video .

Prerequisite : to know the HTML5 elements covered in the previous HA 1 (a head section and a body section with heading elements, break tag, unordered list, and ordered list) and HA 2 (structural elements and special characters), HA3, and HA 4

Follow-up 1 : The knowledge / skills from HA 1, HA 2, HA 3, and HA 4 you will need for the “Website Case Study” project, which will be due in the last week of classes.

1. Download by right clicking (and then selecting “Save Target As ..” from the pop up menu) the attached file Trillium Media Design.zip, which contains the media.html Web page file and the image, music, video files (stored in the respective folders) that you need to begin this assignment with. Save it under the folder, where you save your html files, e.g., CS150-HTML on your flash drive.

NOTE : Do NOT do left clicking to download this zipped file.

[Note: We assume that you place all the HTML wok under the folder CS150-MyHTML; this is the folder, created firstly in the HTML Assignment # 1; If you don’t have this folder then put the Trillium Media Design folder wherever your store your HTML assignments.]

1.A. Use only Firefox or Chrome browsers to test your Web pages.

2. Extract all the files (unzip them) from Trillium Media Design.zip file. All the extract files will go (be stored) in a folder with the name Trillium Media Design.

· To do this, right click on the file name, and then select Extract All ... from the pop-up menu.

Make sure that you make a distinction between the zipped file named Trillium Media Design and the folder named Trillium Media Design. To see the distinction, in the file manager Explorer, look at the icon on the left of the name which is different for the 2 kinds (folder vs. zipped file)

3. Go in the folder Trillium Media Design in order to work on this assignment When you go in it, firstly change the name of the file media.html inside the Trillium Media Design folder to SmithMedia.html (replace Smith with <your name>)

3.A. Then, find the 3 files, which you created as a result of the HTML5 HA Assignment 3 (files index.html, services.html, and contact.html), and copy them in the folder Trillium Media Design.

3.B. Change the name of the folder Trillium Media Design to Smith Trillium Media Design (replace Smith with <your name>)

3.C. Add link in each of these 3 files (files index.html, services.html, and contact.html), as well as in the 4th file, SmithMedia.html (remember Smith is to be replaced with <your name>, which you used in the step 3. Above to change the name of the file media.html) it is with with the link label Media and hyperlinking each of them to the file SmithMedia.html. How? Open each of these 4 files one by one with the Notepad text editor. Use the following code to replace the nav element in each of these 4 files (be careful to replace Smith with your name):

<nav>

<b><a href=index.html>Home</a> &nbsp;

<a href=services.html>Services</a> &nbsp;

<a href=contact.html>Contact</a> &nbsp;

<a href=SmithMedia.html>Media</a> &nbsp;

</b>

</nav>

4. Change all the media in the file SmithMedia.html: How?

4. A. Change the movie, image, music, and video links (absolute and relative link references) in the file SmithMedia.html to different movie, image, music, and video links that you need to choose in the appropriate HTML elements (<img … >, etc.).

· Do NOT use my media links and media files that are already there. Find the movies from the imdb.com movie Web site, the jpeg images, the mp3 song files, and the mp4 video files somewhere from the Web and/or from your computer / phone: SEE THE APPENDIX BELOW FOR SUGGESTED sources for finding them on the Web.

· Make sure the sizes [measured in MB (Mega Bytes), as you must know by now the purpose of this unit of measuring] of the image/music/video files that you download are not large (so that you can upload the zipped Web site back to Blackboard and submit it for grading: If it is TOOOO LARGE, you canNOT). I.e., make sure the file sizes are less than 2 MBs.

4.B. To do these changes, firstly, find and choose the respective media files and the respective Web addresses that contain the media you want to choose to replace the one I put in the media.html file.

4. C. Secondly, download them: SAVE the jpeg files in the subfolder pictures SAVE the mp3 files in the subfolder music SAVE the mp4 files in the subfolder videos.

PRECAUTIOS : Rename the media files that you download that have space in their names, for example, if the file name you download is Maid with the Flaxen Hair then rename it to MaidwiththeFlaxenHair (i.e., no spaces between the words).

4. D. Thirdly, delete the media files in the original media.html file created by me from the respective subfolders: Delete all jpeg/png/gif files in the subfolder pictures Delete all mp3 files in the subfolder music Delete all mp4 files in the subfolder videos.

4.E. If you replace absolute hyperlink references, then copy the Web address from the Address box of the browser and paste it on the appropriate place in the SmithMedia.html file.

· For example, in the media item with the label Rihanna - Desperado replace the absolute reference https://www.youtube.com/embed/UNY3UXSXOXI with the absolute link reference on your choice.

· Also replace the label of the item between <li> and </li> (from Breath by Piamime | relax and reboot your mind replace with yours).

· Continue with the other similar media items in similar way.

4.F. If you replace relative hyperlink references (an example of it is “services.html”) then type (or copy from the Explorer and paste) the name of the media file that you downloaded on the appropriate place in the SmithMedia.html file (remember Smith is to be replaced with <your name>).

· For example, in the image (media item) with the name Hydrangeas replace Hydrangeas.jpg with the image file name that you chose in step 4C and saved in the subfolder pictures.

NOTE : You need to change the name of the image file, RENAME it, if the image file you downloaded from contains spaces (for example, if you downloaded the image file with a name Hydra ngeas.jpg, you need to rename it to Hydranges.html (no space in the name) before include it in the SmithMedia.html file

· Also replace the label of the item between <li> and </li> (from Hydrangeas to yours, say Bird, if your image is a bird).

· Continue with the other similar media items in the similar way.

5. Change on the name at the very bottom in the footer element (between <footer> and </footer>) of the SmithMedia.html file to your name.

6. Zip (Compress) all the Web site files and folders in ONE file. How?

· To do this, right click on the folder name Smith Trillium Media Design, and then select Send To > Compressed (zipped) folder from the 2 pop-up menus popped up one after the other.

7. Finally, upload that zipped file, Smith Trillium Media Design.zip, to Blackboard under the link of this Assignment for submission and grading.

APPENDIX: Possible Web sites to find and/or download mp3 music / mp4 videos

NOTE : Some of these links might be obsolete. The best source is, of course, youtube for mp3 and mp4.

There are many ways /web sites/ through which one can download mp4 / mp3 from youtube (the site gives you the option to choose what format of the file to download, mp4, mp3, and several other formats). You could search for such a site and download a video or audio in this way. But be careful, since some sites may be not quite safe for your computer.

A. For free mp3 music download you may use:

http://www.last.fm/music/+free-music-downloads/short

B. For mp3 music played directly from the Web you may use:

www.youtube.com

or others

C. For mp4 video download you may search Internet, using the phrase:

Download short mp4 video

D. You can use other Web sources if you wish.

E. You can use mp3 / mp4 files that you may already have on your computer / phone / tablet.

F. You may use YouTube to download videos in mp4 (mp4 must be used in the project) if you have your own YouTube (google) account; search the Web how to download videos in mp4 from youtube.

NOTE : Always be on a lookout for suspicious sites so that you don’t download anything from there or click the links to go to them