HTML and CSS Reference
8 Adding Multimedia
Content to Web Pages
In previous chapters, you used HTML tags and CSS code to change the way a Web page
is displayed in a Web browser. You learned how to collect data from Web site visitors
using Web page forms. You also learned advanced CSS techniques to create drop-down
menus and pop-up effects. In this chapter, you will learn how to insert multimedia content
in the form of audio and v i deo clips.
Project — Adding Multimedia to an English
Literature Class Web Site
In your English literature class, you are studying the poems of Henry Wadsworth Longfellow.
To make the 19th century poet seem more real, your class created a Web site that shows the
home where Longfellow lived for almost 50 years. Your instructor, Mr. Angelo Garcia, would
like you to enhance that Web site by including audio and video clips.
The English literature class Web site consists of a home page (Figure 8-1a) and
two linked Web pages (Figures 8-1b and 8-1c). The home page contains a picture of the
Longfellow home together with a horizontal navigation bar. The navigation bar links
to two additional pages. One Web page that you will create has a short video clip of the
historical Longfellow home in Cambridge, Massachusetts. The other Web page contains
an audio of a Longfellow poem that describes changes when revisiting a place after a long
absence. You feel that the addition of multimedia files (one audio and one video) might
help make Mr. Garcia's English literature class Web site more engaging for the students.
It is one thing for a student to see a picture or read a poem, but it may have greater
impact to see a video of the actual home and hear a poem written by Longfellow read
aloud. Multimedia content can provide this type of valuable experience. Because the use
of multimedia content is complex, you must first research how to add multimedia to Web
pages. Mr. Garcia is supportive of the plan and encourages you to start as soon as possible.
As you read this chapter, you will learn how to add the multimedia content to the
two Web pages shown in Figures 8-1b and 8-1c by performing these general tasks:
Plan the use of multimedia in the Web site
Enter the HTML code to insert an audio clip
Enter the HTML code to insert a video clip
Save the files as HTML files
View the Web pages and HTML code in your browser
Validate the Web pages
Test and print the Web pages