Today's websites are media-rich; they use images, video and audio to attract reader's attention. Our modern browsers have built-in capabilities that can display different image, audio, and video formats. Thanks to the HTML5 standard, a few media formats are becoming a standard on the WWW, e.g., JPEG, PNG, MP4, MP3, etc.
After you complete this lab, you will be able to
Key concepts to discover are:
Download a copy of this lab here (lab2.zip). Unzip this
compressed archive into your
csc100 folder on your computer, alongside
lab1 folder. There are several files created for you. They are:
part1.html--- this is a sample HTML file for part (1), which is about audio and video;
part2.html--- the second HTML file for part (2), which is about slideshows and Facebook button;
part3.html--- this is part (3) which is about Google Map;
part4.html--- a sample HTML file for part (4), which is about adding audio, maps, slideshows and Facebook button to your part 2 of lab 1;
style.css--- a CSS stylesheet for part 4 of this lab;
part2-js.txt--- this text file explains how to complete part (2);
part3-js.txt--- this text file explains how to complete part (3);
There are many online videos related to lab 2 available here.
All parts must be completed individually. There are four parts in this lab.
part2-js.txtfile carefully; it provides all the instructions how to modify
part2.html. You need to create a slideshow of your personal photos. Resize each image to exactly 800 by 600 pixels. You can use as many images as you like.
part3-js.txtfile carefully. Follow the instructions how on to modify
part3.html, which contains several Google maps. You need to search a few points of interests within BC (e.g., Vancouver, Victoria, UVic, etc.)
Part (1) is designed to show you how to add audio/video inside a simple HTML document.
You will modify the
part1.html content and its images/audio/video to
write a short story about your favorite
hobby/pet/event/activity/concert. You may use any images/audio/video as
long as they are not
copyright-protected. Please use your own images/video if possible. For
MP3 audio, please look for free MP3 music files online, e.g.,
www.mp3juices.cc and include a hyperlink to
the source where you find your MP3 file.
For this part, please keep your video file size under 10 MB (MegaBytes) maximum. If your video is bigger than this, then you need to resize it using Miro Video Convertor, iMovie, or trim it using Apple QuickTime. If you have Windows 10* you can trim your file by opening it in the pre-installed Photos App and click on Edit & Create, then Trim. If you have older versions of Windows you might be able to use Microsoft Movie Maker.
In addition, there should be one MP3 audio and one MP4 video file embedded in this HTML document. They can be added inside a HTML5 document as long as they use the appropriate tags, i.e., <audio> </audio> and <video> </video>.
(Note: <audio> and <video> tags belong to HTML5 standard. So, they only work inside the latest browsers.)
Your part 1 will be evaluated based on the following rubric.
This part is
designed to teach you how to create a slideshow and embed a Facebook
button. Please read the file
part2-js.txt for the
instructions how to complete this part. You can use as many images as
you like in your slideshow (but at least 4 images). Please use your own
and our slideshow container are defined for this size. You can change it
When you use Facebook Button Configuration, after you click
Get Code, choose the
Iframe version. Then,
cut and paste the
<iframe> ... </iframe> into your HTML file.
Your part 2 will be evaluated based on the following rubric.
This part is
designed to teach how to embedded a map and markers in Google Map. Study
part3-js.txt file carefully. It provides all
instructions on how to complete this part by modifying the "part3.html"
You also need to add a few (at least two) Points Of Interests near downtown Vancouver/Victoria so that when a user clicks on the link, it will take its user to the Google Map location of that point of interest.
When you are done with this part, just publish it and test it.
In your file for part 3 you must include at least the following:
Your part 3 will be evaluated based on the following rubric.
It is essentially a revised version of your lab 1 part 2. Basically, we want you to add 4 large images (1000px by 400px each) on the main index page as a slideshow, a Facebook-like button on one of the page, a hyperlink to a Google Map on every page, and one MP3 music with controls on the main Index page. When you are done with this part, just publish it and test it again.
To get started on part 4, you should make a copy of your working part 2
lab1 inside the
lab2 folder. It is easier to copy the entire old
lab1 folder into
lab2 folder. (Note: If you have made some changes to your style.css
in lab1, make sure that you copy it as well.)
UPDATE: As some of you worked on super heroes you could use any pictures for lab 2 Part 4. Under fair dealing, students could display some percentage copyrighted image in their assignments for educational purposes. The recommended practice is to Include the source of your pictures.
Just follow these steps:
part4.htmlcontains partially solution that you can analyze;
lab1folder which contains a working copy of your old lab1, select all files (
command-Ain OS X, or
command-Cin OS X,
lab2folder, paste all files from
command-Vin OS X,
Yes to All.
Now, you should have a working copy of your lab 1 part 2 inside your
lab2 folder. To make sure that it is the case, just double-click your
lab 1 part 2
index.html file. If it doesn't work, then you have missed
some files from
lab1 folder. Repeat the above steps again. (Note: Several old files from part 1 of
lab 1 will also be copied. It is not an issue because we do not use it.
You can safely delete them inside
lab2 folder if you wish. They will not
cause any problem if you just leave them. You may also copy the
lab1 folder into
lab2 folder. This is fine!)
(Important: If you have lost some marks in lab 1, then please correct those mistakes before you start this part. So, you will not lose marks again in lab 2.)
Part 4 should include at least the following features after modifying your part 2 from lab 1:
UPDATE: As some of you worked on super heroes the map could be any place.
Your part 4 will be evaluated based on the following rubric.
Complete and publish all four parts using your NetlinkID account on
Login to Connex. Select
CSC 100 Tab from the top. Choose
Labs & Project from the side bar. Click "Lab 2". Follow the instructions
Submission text box underneath the instructions, for example,
you just enter the following information:
Part 3 and
Part 4 accordingly. Then, click
That is it! You are done. You may update/modify your website as many times as you like before the due date. You do not need to submit again if you only change the content of your published websites.
Lets get in touch. Send me a message: