Web Development & Design Foundations with HTML5

Skip to Content 7th Edition

Chapter 11 Web Media and Interactivity

Video and sounds on your web pages can make them more interesting and informative. In this chapter, you’ll work with with multimedia and interactive elements on web pages. Methods to add audio, video, and Flash are introduced. Sources of these media types, the HTML code required to make the media available on a web page, and suggested uses of the media are discussed.

You began to work with interactivity in Chapter 6 when you used CSS pseudo-classes to
respond to mouse movements over hyperlinks. You’ll expand your CSS skill set as you
configure an interactive image gallery and explore CSS3 transition and transform
properties. Adding the right touch of interactivity to a web page can make it engaging and
compelling for your visitors.

Technologies commonly used to add interactivity to web pages include Flash, Java applets,
JavaScript, Ajax, and jQuery. This chapter introduces you to these techniques. Each of
these topics is explored more fully in other books; each technology could be the sole subject of an entire book or college course. As you read this chapter and try the examples, concentrate on learning the features and capabilities of each technology, rather than trying to master the details.

Resources & Chapter Links

Common Browser Plug-ins





Easy Ways to Use Multimedia


CSS3 Transform Property

CSS3 Transition Property

HTML5 Canvas Element

Review Activities

Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • Page 469
    The last sentence in the third paragraph on the page should be, "It is typical to omit the src and type attributes from the video tag and, instead, configure multiple versions of the video file with the source element."

  • Page 481
    The second sentence on the page should be, "Java applets may be used in business applications for functions such as financial calculations and data visualization."

  • Pacific Trails Case Study
    HINT: If the display of the image gallery is not what you expected, try increasing the width for the #gallery ul selector.

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com