Web Programming with html5, css, and JavaScript

268
CHAPTER 6
 
Links and Images 

---

© StationaryTraveller/Getty Images
CHAPTER OBJECTIVES
▸
Position an image at the left or right with 
text displayed at its other border.
▸
Learn how to display a shortcut icon in a 
browser’s tab area.
▸
Implement an 
iframe
element with the 
ability to display a web page or an image 
in it.
▸
Create an image sprite file and use it in a 
web page.
▸
Implement an audio player using the 
audio
element.
▸
Handle different audio file formats.
▸
Cover a web page’s background with an 
image.
▸
Understand how to use web fonts.
▸
Implement a video player using the 
video
element.
▸
Center a web page’s content.
▸
Cover a web page’s background with a 
color gradient.
Image Manipulations, 
Audio, and Video
269
CHAPTER 
7

---

CHAPTER OUTLINE
7.1 
Introduction
7.2 
Positioning Images
7.3 
Shortcut Icon
7.4 
iframe
Element
7.5 
CSS Image Sprites
7.6 
Audio
7.7 
Background Images
7.8 
Web Fonts
7.9 
Video
7.10 
Centering Content Within the Viewport, 
Color Gradients
7.11 
Case Study: Using an Image Map for 
a Small City’s Core Area and Website 
Navigation with a Generic Home Page
7.1 
Introduction
In the previous chapter, you learned about images, but only the basics. Specifically, you learned 
about their formats and how to display them. In this chapter, you’ll learn how to do additional things 
with images, such as position them. By default, images are displayed inline, which means that they 
are positioned in the normal left-to-right, top-down flow of their web page host. As an alternative, 
you can position them at the left or the right of the web page. If you want an icon image to appear in 
the tab at the top of the browser window, you can do that. Or, if you want to display an image within 
a frame within the browser window—yep, you can do that too. In this chapter, you’ll learn how to 
do those things, plus you’ll learn about more advanced image-related topics, such as implementing 
a rollover with an image sprite and implementing a clickable image map with multiple hotspots.
In addition to learning about images, you’ll also learn about other media types—audio and 
video. We start with an introduction to the different audio and video file formats. Then we dig 
into the details of how to implement audio and video players with the 
audio
and 
video
elements 
and their attributes. Along the way, in presenting the audio and video web page example, you’ll 
be introduced to several CSS properties that enable you to spruce things up. With CSS, you can 
import and use customized fonts that are not part of the W3C’s standards, you can use an image 
file as the background for your web page, and you can create a color gradient (a smooth transition 
between two or more colors) and use it as the background for your web page.