Web Development and Design Foundations with HTML5

Skip to Content

Chapter 11 Web Media and Interactivity

As the saying goes, "A picture is worth a thousand words." You already are aware that graphics help to make web pages compelling. Other
types of media, such as audio and video, are introduced in this chapter. Appropriate movies and sounds on your web pages can make them more interesting and informative. Sources of these media types, the HTML code needed to place media on a web page, and suggested uses of media are introduced.

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, and Ajax. This chapter introduces you to these techniques.Each technology could be the sole subject of an entire book or college course. This chapter will introduce you to adding interactive components to web pages.

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 454, Hands-On Practice 11.6
    When you are coding the web page, also configure a hyperlink to the podcast.txt file below the audio control.
  • Page 463
    The file path chapter11/gallery/transition.html should be chapter11/transform/transition.html
  • Hands-On Practice 11.10 (pages 466-467)
    Omit Hands-On Practice 11.10. Instead, feel free to explore free Java applets at http://www.echoecho.com/freeapplets.htm and http://www.javaonthebrain.com/
  • Fish Creek Case Study, Page 482, Task 4
    The width of the video should be 200 pixels. Configure the video to display on the right side of the paragraph and description list.

Questions or Comments?

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