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 music video with its lyrics, images, and perhaps other media.
The music video that you will annotate is for one of the most beloved State songs (source: https://www.youtube.com/watch?v=paMpJZgVP_k):
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/my_old_kentucky_home.mp4" id="music_video" controls> </video>
The sun shines bright in My Old Kentucky Home, 'Tis summer, the people are gay; The corn-top's ripe and the meadow's in the bloom While the birds make music all the day. The young folks roll on the little cabin floor, All merry, all happy and bright; By 'n' by hard times comes a knocking at the door, Then My Old Kentucky Home, good night! Chorus Weep no more my lady Oh weep no more today; We will sing one song For My Old Kentucky Home For My Old Kentucky Home, far away
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>My Old Kentucky Home</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1 id="title">My Old Kentucky Home</h1> <video src="https://www.cs.tufts.edu/comp/20/my_old_kentucky_home.mp4" id="music_video" controls></video> <div id="lyrics"></div> <script> // Complete this section and create a CSS file named style.css </script> </body> </html>
<div id="lyrics">. You are free to annotate the music video any way that you want (e.g., by stanza, line-by-line). You must also use at least two images for your annotation (in any stanza). The only section of the HTML that you shall modify is inside the
<script></script>. Finally, you must provide some styling for the page via
Every assignment and lab shall include a
README file that describes the work. This description must:
README.txt) or in Markdown (
README.md). No other formats will be accepted.
Push all your files to a folder named
my_old_kentucky_home 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
# 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 5 points.
index.htmlpage following all the instructions above