HTML5 introduces built-in media support via the
<video> elements, offering the ability to easily embed and manipulate media on web pages (Mozilla.org). In this lab, you will create a web page that annotates a video with text and perhaps other media.
The video that you will annotate is an old song:
You are free to use the following to access the video on your page and there is no need to make a copy of the video onto your computer:
<video src="https://www.cs.tufts.edu/comp/20/butwehavethepower.mp4" id="butwehavethepower" controls> </video>
Lisa: Come gather round, children, It's high time ye learned 'Bout a hero named Homer And a devil named Burns. We'll march 'till we drop The girls and the fellas. We'll fight 'till the death Or else fold like umbrellas. So we'll march day and night By the big cooling tower. They have the plant But we have the power. Lenny: Now do "Classical Gas!" So we'll march day and night By the big cooling tower. They have the plant But we have the power.
Once again, I am going to give you the HTML so you do not have to write it! Copy and paste the following HTML below as your
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Union Strike Folk Song</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1 id="title">Union Strike Folk Song</h1> <video src="https://www.cs.tufts.edu/comp/20/butwehavethepower.mp4" id="butwehavethepower" controls></video> <div id="lyrics"></div> <script> // Complete this section and create a CSS file named style.css </script> </body> </html>
<div id="lyrics">, line by line or by verse. Finally, you must provide some styling for the page via
Each lab shall include a
README file that describes the work. This description must:
README.txt) or in Markdown (
README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for
README.md file must be directly in the folder of the lab.
Push all your files (the HTML, the CSS, the README) to a folder named
butwehavethepower inside of the private GitHub repo I created for you. Say that your private repository is named
comp20-mchow, make sure all the files are pushed to
comp20-mchow/butwehavethepower. Please do not add and push the video to repository!
# Inside your private GitHub repo folder (e.g.,
comp20-mchow) git add . git commit -m "Some good commit message here" git push
This lab is worth 4 points.
index.htmlpage following all the instructions above