Professional Documents
Culture Documents
New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual
New Perspectives Html5 and Css3 Comprehensive 7th Edition Carey Solutions Manual
This document is organized chronologically and uses the same headings in blue that you see
in the textbook. Under each heading, you will find (in order): Lecture Notes that summarize
the section, Figures and Boxes found in the section (if any), Teacher Tips, Classroom
Activities, and Lab Activities. Pay special attention to teaching tips and activities, which are
geared toward quizzing your students, enhancing their critical thinking skills, and
encouraging experimentation within the software.
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up-to-date with the latest in technology news. Direct your students to
http://coursecasts.course.com, from where they can download the most recent CourseCasts
onto their mp3 player. Ken Baldauf, the host of CourseCasts, is a faculty member of the
Florida State University Computer Science Department. He is responsible for taking
technology classes to thousands of FSU students each year. Ken is an expert in the latest
technology and sorts through and aggregates the most pertinent news and information for
CourseCasts so your students can spend time enjoying technology rather than trying to
figure it out. Open or close your lecture with a discussion based on the latest CourseCasts.
Table of Contents
Tutorial Objectives 2
Introducing Multimedia on the Web 2
Working with the audio Element 3
Exploring Embedded Objects 4
Exploring Digital Video 4
Using the HTML5 video Element 5
Adding a Text Track to Video 6
Using Third-Party Video Players 7
Creating Transitions with CSS 8
Animating Objects with CSS 9
End of Tutorial Material 11
Glossary 12
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 2 of 12
Tutorial Objectives
Students will have mastered the material in Tutorial Eight when they can:
BOXES
• None
FIGURES
• Figure 8-1
TEACHER TIP
Prepare a few examples of lossy and lossless compression. Mention to the students the disadvantage of
lossless compression.
CLASSROOM ACTIVITIES
• Internet Activity: Ask the students to research the advantages and disadvantages of
multimedia.
• Quick Quiz:
o True/False: In lossless compression, data is compressed by removing redundant
information. (Answer: True)
o Fill in the blank: _____ is a computer program that encodes and decodes streams of
data. (Answer: Codec)
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 3 of 12
LAB ACTIVITY
• None
BOXES
• Tip: Because XHTML requires values for every attribute, enter the controls attribute as
controls="controls" to display media player controls on a page written in XHTML
(HTML 591).
• Tip: If no type attribute is provided, the browser will download a section of the file to
determine whether it corresponds to a recognized format (HTML 593).
• Insight: Exploring MIME Types (HTML 593)
• Tip: By default, audio and video elements are displayed in-line with the surrounding page
content (HTML 595).
• Proskills: Verbal Communication: Tips for Effective Web Audio (HTML 598)
FIGURES
• Figure 8-2, Figure 8-3, Figure 8-4, Figure 8-5, Figure 8-6, Figure 8-7, Figure 8-8, Figure 8-9,
Figure 8-10
TEACHER TIP
Remind the students that CSS can be applied to modify the media player’s appearance. Use figure 8-10
to show how a fallback text is displayed within a web page. Gather a few images to show the latest
audio players for different browsers.
CLASSROOM ACTIVITIES
• Class Discussion:
Ask the students to make a list of any four attributes of the HTML audio element.
• Quick Quiz:
o True/False: The mobile version of the Firefox browser supports the AAC audio format.
(Answer: False)
o True/False: Apple devices support all audio formats except AAC. (Answer: False)
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 4 of 12
LAB ACTIVITY
• Have the students open an editor of their choice and create a new file with the extension
.html or take up any file from their previous lab activities. Follow the instructions from the
following section:
o HTML 593 “To add an audio clip”
o HTML 595 “To apply styles to the Media Player”
o HTML 595 “To play the audio clip”
o HTML 597 “To provide alternate text to the audio clip”
BOXES
• Tip: Browsers that don’t support HTML5 ignore the audio and source elements but apply
the embed element to insert the media player via a plug-in (HTML 599).
FIGURES
• None
TEACHER TIP
Have a discussion with the students on the challenges faced with plug-ins. Remind students that plug-
ins use the attributes designed for them and ignore the others. Also, tell them that plug-ins can act as
fallback options for browsers that do not support HTML5.
CLASSROOM ACTIVITIES
• Quick Quiz:
o True/False: Older browsers relied on plug-ins to play audio and video files. (Answer:
True)
o True/False: Plug-ins cannot act as a fallback option for browsers that do not support
the HTML5 multimedia elements. (Answer: False)
LAB ACTIVITY
• None
BOXES
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 5 of 12
• None
FIGURES
• Figure 8-11, Figure 8-12, Figure 8-13
TEACHER TIP
Remind the students to supply multiple versions of the same video to achieve widest cross-browser
support.
Have a discussion with the students on the advantages of embedding a video in a web page.
CLASSROOM ACTIVITIES
• Quick Quiz
o True/False: The most popular video codec is H.264. (Answer: True)
o True/False: The desktop version of Internet Explorer only supports MPEG-4 video
format. (Answer: True)
LAB ACTIVITY
• None
BOXES
• None
FIGURES
• Figure 8-14, Figure 8-15, Figure 8-16, Figure 8-17, Figure 8-18
TEACHER TIP
Mention to the students that a browser uses the first source it finds in a format it supports.
Remind the students that by default, media players show the first video frame as a preview of the
video’s content when the player initially loads a video file.
CLASSROOM ACTIVITIES
Quick Quiz:
• True/False: The poster attribute is used to define the video’s preview image. (Answer: True)
• True/ False: The media player shows the last video frames as a preview of the video’s content
when the player initially loads a video file. (Answer: False)
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 6 of 12
LAB ACTIVITY
• Have the students use an editor of their choice to modify the file they created in the last lab.
Follow the instructions from the following section:
o HTML 604 “To embed a video file into the web page”
o HTML 606 “To set the video’s poster image”
BOXES
• Tip: A WebVTT file has the file extension .vtt (HTML 608).
• Tip: Cue text entered on multiple lines in the WebVTT file will also be displayed on multiple
lines when played back (HTML 608).
• Tip: To center the cue in the video window, set the line and position values to 50% and the
align value to middle (HTML 611).
• Tip: Ruby text refers to annotative characters placed above or to the right of other characters
and is often used with Chinese or Japanese symbols (HTML 613).
FIGURES
• Figure 8-19, Figure 8-20, Figure 8-21, Figure 8-22, Figure 8-23, Figure 8-13, Figure 8-24,
Figure 8-25, Figure 8-26, Figure 8-27, Figure 8-28
TEACHER TIP
Remind the students that the default attribute is required even if the track list contains only one
track. Also, stress that the list of cues is separated by a single blank line after the cue text.
Inform the students that the cue pseudo-element formats all of the cue text in the media clip by
default.
CLASSROOM ACTIVITIES
• Class Discussion:
Ask the students to express their views on the necessity of adding a text track to a
video/image.
• Quick Quiz:
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 7 of 12
o Fill in the blank: Tracks are stored as simple text files written in the _____ language.
(Answer: Web Video Text Tracks or WebVTT)
o True/False: By default, a cue is placed at the top-right corner of a video window.
(Answer: False)
LAB ACTIVITY
• Have the students use an editor of their choice to modify the file they created in the last lab.
Follow the instructions from the following section:
o HTML 608 “To create a track file”
o HTML 609 “To add captions to a video clip”
o HTML 611 “To position the track cues”
o HTML 613 “To format the cue text”
o HTML 614 “To apply styles to the cue text”
BOXES
• Tip: To hide the Flash player, set the width and height values to 0 (HTML 618).
• Proskills: Problem Solving: Tips for Effective Web Video (HTML 620)
FIGURES
• Figure 8-29, Figure 8-30
TEACHER TIP
Inform the students that the most-used plug-in for video playback is the Adobe Flash player. Use
figure 8-29 to discuss about the various parameters recognized by the Adobe Flash player.
CLASSROOM ACTIVITIES
• Class Discussion:
Ask the students to list and describe any three parameters recognized by the Adobe Flash
player.
• Quick Quiz:
o True/False: The most-used plug-in for video playback was the Adobe Flash player.
(Answer: True)
o True/False: The inline-frame element is used to mark iframes. (Answer:
False)
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 8 of 12
LAB ACTIVITY
• None
BOXES
• Tip: To specify a time in milliseconds, use the “ms” unit (HTML 624).
• Insight: Properties Affected by Transitions (HTML 626).
• Tip: You can also set the properties affected by the transition and their duration using the
transition-property and transition-duration styles (HTML 626).
• Tip: You can also define the timing-function using the transition-timing-
function property (HTML 626).
• Tip: You can also define the timing-function using the transition-delay property
(HTML 629).
• Insight: Creating an Asymmetric Transition (HTML 634)
FIGURES
• Figure 8-31, Figure 8-32, Figure 8-33, Figure 8-34, Figure 8-35, Figure 8-36, Figure 8-37,
Figure 8-38, Figure 8-39, Figure 8-40, Figure 8-41, Figure 8-42
TEACHER TIP
Inform the students that two transitions can involve totally different effects and durations. Remind
the students that another way to visualize a timing function is as a graph.
CLASSROOM ACTIVITIES
• Class Discussion:
Ask the students to differentiate between ease-in and ease-in-out keywords.
• Quick Quiz:
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 9 of 12
o True/False: A transition can be run in a loop for an infinite number of times. (Answer:
False)
o True/False: The hover effect is instantaneous with no intermediate steps. (Answer:
True)
LAB ACTIVITY
• Have the students use an editor of their choice to modify the file they created in the last lab.
Follow the instructions from the following section:
o HTML 629 “To define the initial and end state for the navigation links”
o HTML 631 “To define styles for the navigation links”
BOXES
• Insight: Stepping between Key Frames (HTML 640)
• Proskills: Problem Solving: Safe Animation and Motion Sensitivity (HTML 650)
FIGURES
• Figure 8-43, Figure 8-44, Figure 8-45, Figure 8-46, Figure 8-47, Figure 8-48, Figure 8-49,
Figure 8-50, Figure 8-51, Figure 8-52, Figure 8-53, Figure 8-54, Figure 8-55, Figure 8-56,
Figure 8-57, Figure 8-58
TEACHER TIP
Have a discussion with the students about animation and its usage. Remind students that once an
animation has been defined and applied to an object, it will run automatically when the page is
loaded. Have a discussion with the students on how to control an animation using the check box or
playback icons.
Remind the students that any timing value entered for the last key frame is ignored because there are
no key frames to transition to.
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 10 of 12
CLASSROOM ACTIVITIES
• Quick Quiz:
o Fill in the blank: The sequence of changing images is known as _____. (Answer: key
frames)
o True/False: An animation can contain only two styles defined at the initial and end
states. (Answer: False)
LAB ACTIVITY
• Have the students use an editor of their choice to modify the file they created in the last lab.
Follow the instructions from the following section:
o HTML 636 “To create the spin animation”
o HTML 639 “To apply the spin animation”
o HTML 641 “To create the animation check box”
o HTML 643 “To create styles for animation playback”
o HTML 644 “To format the play and pause icons”
o HTML 646 “To revise the spin sequence”
New Perspectives on HTML5 and CSS3, 7th edition Instructor’s Manual Page 11 of 12
Glossary
Top of document