HTML and CSS Reference
to create a travel
guide page with
a video tour.
Case Problem 2
data Files needed for this case Problem: modernizr-1.5.js, roadtxt.htm, rw.css, rwlogo.
jpg, trailridge.mp4, trailridge.swf, trailridge.webm
Roadways Karen Upton loves to travel and spends more than half of the year behind
the wheel exploring byways and roadways for her online travel guide, Roadways. Karen's
Web site is a place where others who share her passion for travel can gather to share
stories, advice, and their love for travel. Karen would like to upgrade her site by adding
video tours of some of her favorite roadways. She's come to you for help in adding this
feature to her site. Karen presents you with a sample page; she already has created the
video and descriptive text for Trail Ridge Road, the highest paved continuous highway in
the United States. A preview of the page you'll create for Karen is shown in Figure 7-46.
roadways web page
Complete the following:
1. Use your text editor to open the roadtxt.htm file from the tutorial.07\case2 folder
included with your Data Files. Enter your name and the date in the comment section
of the file. Save the file as roadways.htm in the same folder.
2. Scroll down to the figure element and within the element insert a video element
for the two source files trailridge.mp4 and trailridge.webm . Display the controls with
the video clip. Set the width and height of the video clip to 320 pixels by 260 pixels.
3. Nest within the video element an object element to display the Flash player file
trailridge.swf . Set the dimensions of the Flash player to 320 pixels wide by
260 pixels high.
4. If the user's browser doesn't support HTML5 video or Shockwave Flash, display the
message, To play this clip you need the Shockwave Player . Include a link to the Web
site where users can download the player.