PPT 1.1
HTML5 and CSS3 – Illustrated, 2nd Edition
Unit G: Inserting and Working with Images
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark 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, and Classroom Activities and/or Lab
Activities. Pay special attention to teaching tips, and activities geared towards quizzing your students,
enhancing their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
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
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
170: Evaluate Image File Types
2
172: Insert Images
3
174: Insert a Background Image
5
176: Mark Images as Figures
6
178: Create a Figure Caption
7
180: Use Images as Links
9
182: Create an Image Map
10
184: Define Additional Hotspots
11
186: Insert a Favicon and Touch Icons
13
End of Unit Material
14
Glossary of Key Terms
14
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 2 of 14
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit G when they can:
• Evaluate image file types
• Insert images
• Insert a background image
• Mark images as figures
• Create a figure caption
• Use images as lings
• Create an image map
• Define additional hotspots
• Insert a favicon and touch icons
1
1
17
7
70
0
0:
:
:
E
E
Ev
v
va
a
al
l
lu
u
ua
a
at
t
te
e
e
I
I
Im
m
ma
a
ag
g
ge
e
e
F
F
Fi
i
il
l
le
e
e
T
T
Ty
y
yp
p
pe
e
es
s
s
LECTURE NOTES
• Point out that students can use images in their web pages and that they can use CSS properties to
affect how user agents display their images.
• Introduce the concept of linking an image to a web page by linking to a separate file, as shown in
FIGURE G-1. Explain that process is similar the way they link to an external web page.
• Point out that the web developer is often involved with image aspects such as the file format, the
size, and the resolution of images.
• Explain the difference between rendering an image as a bitmap and rendering it as a vector graphic.
Give examples of file formats used for each type.
• Explain the term image resolution and the units by which it is measured. Explain how changing the
resolution affects the image size, file size, and download time, and how resolution should be
adjusted when creating an image for use on a web page.
• Explain the term image size, and the units by which it is measured. Point out that bitmap images
display best at their original, or native, dimensions, and explain how scaling a bitmap image affects
the quality and the file size, using FIGURE G-2 as your guide.
TEACHER TIP
Point out to students that the terms dots-per-inch (dpi) and pixels-per-inch (ppi) are often used
interchangeably, and explain the difference between the two terms, particularly with respect to
printing devices.
FIGURES: G-1, G-2
BOXES:
1. Quick Tip: Both PNG and GIF support transparent pixels, allowing the page background or
other elements to show through parts of an image. JPEG does not support transparency.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 3 of 14
2. Clues to Use: Assessing the future of SVG
The most widely supported graphics formats—GIF, JPEG, and PNG— require external files
created with image editors. SVG graphics, however, are written in a markup language similar to
XML. As support for the format grows, you will be able to create simple graphics like you create
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to think whether it is possible to maintain the image quality while
changing only the size OR resolution of an image. Can they maintain the image quality by changing
both the size and the resolution of the image? Can the size and resolution be changed in the same way
(i.e., both increased or both decreased) or in opposite ways, and if so, how does that affect the quality of
the image?
2. Quick Quiz:
1
1
17
7
72
2
2:
:
:
I
I
In
n
ns
s
se
e
er
r
rt
t
t
I
I
Im
m
ma
a
ag
g
ge
e
es
s
s
LECTURE NOTES:
• Introduce the img element and its required attributes, and show students a code example for this
element, using FIGURE G-3 as your guide. Provide an overview of all the attributes available for the
img element, use TABLE G-1 as a guide.
• Point out that an img element must have two attributes: the src attribute, the value of which is the
path and filename of the image, and the alt attribute, the value of which is the text to display if the
image is unavailable or is to be read by a screen reader.
TEACHER TIP
Tell students it is OK to leave the value of the alt attribute empty but that it should always be
included, even if there is no text to be associated with the image. Show students how to create an
empty alt attribute.
• Explain that the img element is an inline element by default, but it can be wrapped in its own block
element and aligned using block element alignment techniques.
• Explain that the bottom of an image occurring within a paragraph of text is aligned with the bottom
of the text, known as the text baseline.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 4 of 14
• Point out that it is recommended to use the height and width attributes of the img element to
specify the native dimensions of an image. This ensures that if a user agent cannot display the
image, it can still maintain a corresponding amount of white space and thus preserve the layout of
the web page.
TEACHER TIP
Remind students that although the height and width attributes can be used to scale an image to a
desired size, this is not recommended because it will affect the quality of the image and/or the file
size that a user needs to download.
FIGURES: G-3, G-4, G-5
TABLE G-1: Attributes for the img element
BOXES:
1. Quick Tip: Values for width and height attributes are always in pixels, so you do not specify
units.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Suppose that you are creating a website for an organization that wants the site to
include a photo gallery containing hundreds of high resolution photographs. What would happen to the
page download time if you include all the photographs on one page, in their native size and resolution?
What can you do to change the download time of such a page?
LAB ACTIVITY
Ask students to add a picture of themselves to their web page. Students should also add at least three
additional pictures. Students should be sure to associate alternate text with each image.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 5 of 14
1
1
17
7
74
4
4:
:
:
I
I
In
n
ns
s
se
e
er
r
rt
t
t
a
a
a
B
B
Ba
a
ac
c
ck
k
kg
g
gr
r
ro
o
ou
u
un
n
nd
d
d
I
I
Im
m
ma
a
ag
g
ge
e
e
LECTURE NOTES
• Explain that an image can be used as the background for a web page or web page element by
providing the path and filename for the background image using the background-image property.
• Remind students that, just like with background colors, it is important to choose a background
image that provides contrast with other web page elements, particularly text.
• Provide an overview of the ways to make sure the background image is suitable for different user
agents: minimizing the image, allowing user agents to tile small background images, and specifying
a background color in case background images are not supported. Make sure to point out the
direction and order that images are typically tiled.
TEACHER TIP
Point out to students that in order to ensure that the contrast between the background image and
text is preserved regardless of user agent tiling of the image, it is good practice to select fairly
monochromatic figures as background images, or at least figures that do not contain a large contrast
between portions of the figure.
• Explain to students the syntax of the CSS background property. Use FIGURE G-6 as an example of
how this should be included in a style rule. Make sure to point out how students can use the
background property for a background color as well as a background image, and that these are
distinguished based on the format of the value.
• Discuss the properties that affect an element’s background, using TABLE G-2 as your guide.
FIGURES: -G-6, G-7, G-8
TABLE G-2: Properties that affect an element’s background
BOXES
1. Quick Tip: You can transform a graphic into a seamless image using photo editing software like
GIMP, which you can download free from gimp.org.
2. Quick Tip: If you use a background color declaration and a background image declaration
instead of two background declarations, browsers render both declarations, layering one over
the other, which can cause unexpected results.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 6 of 14
CLASSROOM ACTIVITIES
1. Critical Thinking: Consider an image that must be presented in its entirety for it to look reasonable.
Is there a way to use such an image as a background image for a web page? If not, explain why. If yes,
explain how you can ensure that the image does not get cropped during tiling.
2. Quick Quiz:
LAB ACTIVITY
Ask students to add a background image to their personal web page. Students should make sure that
their web page is still clearly legible following the addition of the background image. Students should
then view the web page using several different user agents with different window or screen sizes, in
order to fully understand the impact of tiling. Then suggest students experiment by using some of the
properties listed in TABLE G-2 to add additional styles to their background image.
1
1
17
7
76
6
6:
:
:
M
M
Ma
a
ar
r
rk
k
k
I
I
Im
m
ma
a
ag
g
ge
e
es
s
s
a
a
as
s
s
F
F
Fi
i
ig
g
gu
u
ur
r
re
e
es
s
s
LECTURE NOTES
• Remind students of the use of semantic elements in HTML5. Then explain that HTML5 includes the
use of the semantic figure element to mark images that add information to a page.
• To decide if an image should be marked as a figure, tell students to ask themselves this question:
Will the basic information about the page still be complete if the image is not shown? If the answer
is yes, then the figure does not need to be marked as a figure element.
TEACHER TIP
Some students may think that if an image is on the web it is theirs for the taking. Make sure
students understand where to find information about permissions and copyright.
FIGURES: G-9, G-10, G–11
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 7 of 14
BOXES:
1. Quick Tip: If the width of a figure element is not specified with a percentage value, you use the
declaration max-width:100% to ensure that the element automatically scales to fit smaller
screens.
2. Clues to Use: Obtaining permission for image use
Although it’s possible to find and copy images from the web for use on your own web pages, it’s
important to make sure you have permission to use a given image before incorporating it into
your designs. In addition to avoiding potential legal action for unauthorized use of someone
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask why would you include an image on a website if it did not have semantic
value? How do you think users react to web pages with images that don’t have semantic value?
2. Quick Quiz:
1
1
17
7
78
8
8:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
F
F
Fi
i
ig
g
gu
u
ur
r
re
e
e
C
C
Ca
a
ap
p
pt
t
ti
i
io
o
on
n
n
LECTURE NOTES
• Remind students that they use the alt attribute to add alternate text for an image so that the image
can be recognized and described by users who are using a screen reader, can’t download images, or
choose to browse without images.
• Point out that they can also associate other types of text with an image.
• Explain that many images benefit from having a figure caption that provides context, explanation,
or credit.
• Point out that a figure caption can also be used to link to another image, web page, document or
other associated content.
• Tell students that to associate an image with a figure caption, they place the text in a figcaption
element that is nested within the figure element for the image.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 8 of 14
• Explain the difference between alt text and a figure caption.
TEACHER TIP
Make sure students understand how to describe an image for alt explain. Explain they should focus
on the main idea of the image and use that information in the at text. The purpose of alt text is to
help the user understand that an image is there and the purpose of the image but it is not to describe
the image in overwhelming detail.
FIGURES: G-12, G-13, G-14
BOXES:
1. Quick Tip: As a general rule, alt text should describe an image without adding additional
information, but figcaption content can add information not provided by surrounding page
content.
2. Clues to Use: Creating useful alt text
The text you provide using the alt attribute for an image is an important accessibility element
for your website. It’s also significant for users who are unable to download the image or who
choose to browse without images. For graphics that include text, that text should be included in
the value of the alt attribute, along with a description if it adds useful information. The alt value
for photos and other graphics without text should include a description of the image. Because
3. Clues to Use: Understanding the title attribute
You can also specify additional information about an image using the title attribute, which is
supported by the img and figure elements as well as most other HTML elements. Most visual
user agents display the value of the title attribute as floating text when a user moves the mouse
pointer over the associated element. However, modern desktop browsers do not provide access
to the title value when navigating with a keyboard. In addition, mobile browsers do not support
the display of the title attribute on touchscreen devices. For this reason, the W3C does not
recommend that web developers use the title attribute until browser makers provide access for
all users.
CLASSROOM ACTIVITIES
1. Classroom discussion: Ask students to explain the difference between alt text and text they
would include in a figure caption. Show a picture and have students write both alt text and
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 9 of 14
2. Quick Quiz:
1
1
18
8
80
0
0:
:
:
U
U
Us
s
se
e
e
I
I
Im
m
ma
a
ag
g
ge
e
es
s
s
a
a
as
s
s
L
L
Li
i
in
n
nk
k
ks
s
s
LECTURE NOTES:
• Explain to students how a link can be added to an image by enclosing the img element in an a
element. Illustrate this using appropriate code, shown in FIGURE G-15.
• Point out that many websites add links to the logo image on each page to return to the main page of
the site.
FIGURES: G-15, G-16, G-17
BOXES:
1. Trouble: If the Rooms page opens but the Sun Room information is not at the top of the
window, the window may be too tall for that section to scroll to the top. Reduce the height of
your browser window, click your browser’s Back button, then repeat Step 9.
2. Clues to Use: Styling an image with opacity
3. Recent versions of all major browsers support the CSS opacity property for img elements. The
opacity property sets how transparent an element is, from 0 (fully transparent) to 1 (fully
opaque, which is the default). For instance, to set 50% opacity, you use the code opacity: 0.5;
IE8 and older versions of Internet Explorer don’t support this syntax, however, and require an
4. Clues to Use: Using a background image and a background color together
When you specify a background color and a background image in separate declarations using
the background property, only one of the declarations is rendered by browsers. However, in
some cases you want to apply both a background color and a background image at the same
time. This is most common when your background image has some transparent pixels and you
want to control the color that’s visible behind the image. To apply both a background color and
a background image, you use a single shorthand background property and specify the
background image name followed by the background color, separated by a space. For instance,
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 10 of 14
CLASSROOM ACTIVITIES
1. Quick Quiz:
a. To link an image to an HTML document, you nest the img element the __________ element .
(a)
b. In order to make it easier for users to return to the main page of a website, many websites add
links to the ____ image on each web page in the site. (logo)
LAB ACTIVITY
Consider this lab activity a continuation of the lab activity for the section regarding inserting images, in
this Unit. Ask students to add a link to each of the pictures they added in that lab activity. Each link
should open a web page providing more information regarding the linked image. For example, if the
linked image is a photograph, then the page that opens up when the link is followed can describe when
and where the photograph was taken.
1
1
18
8
82
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
I
I
Im
m
ma
a
ag
g
ge
e
e
M
M
Ma
a
ap
p
p
LECTURE NOTES
• Explain to students that instead of linking an entire image to a single target document, the can also
link different areas of the same image to different target documents. For example, if they had an
image of the United States, they could link each state to a document about that state.
• Tell students they need to create an image map when they want to link different areas of the same
image to different target documents.
• Define an image map as HTML code associated with an image that specifies one or more shapes
using sets of coordinates and that provides a link target for each shape.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 11 of 14
TEACHER TIP
Remind students that a hash link begins with the # symbol that creates a link to an id property
value. Review with students how they used hash links previously to create links to other areas in
the same document.
FIGURES: G-18, G-19, G-20
TABLE G-3: Attributes of the area element
BOXES:
1. Quick Tip: You include an empty alt attribute for the image because each hotspot you define in
the image map will include its own alt text.
2. Quick Tip: Coordinates are measured from the top and left edges of the image. It’s common to
generate area elements using design software that outputs the code based on the shapes you
draw.
3. Trouble: The image map is not complete because the other two rooms are not yet linked. You’ll
complete the map in the next lesson.
CLASSROOM ACTIVITIES
1. Classroom discussion: Ask students to name examples of when an image map would be an asset to a
web page. What type of image would benefit from an image map? Why? What type of image would be
less like to benefit from an image map? Why? Have students share descriptions of image maps they have
encountered on the web. How did they navigate back to the image map after clicking a link? What is
there overall experience with and reaction to the use of image maps?
2. Quick Quiz:
1
1
18
8
84
4
4:
:
:
D
D
De
e
ef
f
fi
i
in
n
ne
e
e
A
A
Ad
d
dd
d
di
i
it
t
ti
i
io
o
on
n
na
a
al
l
l
H
H
Ho
o
ot
t
ts
s
sp
p
po
o
ot
t
ts
s
s
LECTURE NOTES
• Explain to students that a hotspot can be a rectangle, a circle, or a polygon.
• Remind students that to specify a rectangle shape. they used the shape attribute value of rect and
then provided the coordinates for the top left corner and the bottom right corner for the coords
attribute.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 12 of 14
• Point out that to create a polygonal shape, the specify a value of poly for the shape attribute and
then specify the coordinates for each of the shape’s vertices for the coords attribute.
• Remind students that the poly value can be used to create a triangle or a shape with more than four
sides.
TEACHER TIP
Students may be concerned about how to figure out the coordinates for their shapes. Explain to
students that it is common to generate area elements using design software that outputs the code
based on the shapes they draw. Tell students to find a tool that works for they, they should search
the web using the phrase “free image map generator”.
FIGURES: G-21, G-22, G-23
TABLE G-4: Values of the coords attribute for different hotspot shapes
BOXES:
1. Clues to Use: Generating hotspot coordinates
Identifying the precise coordinates for a hotspot shape can be the most challenging part of
creating an image map. Using graphic design software such as Adobe Photoshop, you can
identify the coordinates of any point in an image. By looking up the coordinates for each point
in your image, you can create the area element for each hotspot manually. However, many tools
CLASSROOM ACTIVITIES
1. Critical Thinking: Have students discuss using a graphic design program versus map generator
software. What are the advantages of each? What are the disadvantages?: Why would they use one over
the other?.
2. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 13 of 14
1
1
18
8
86
6
6:
:
:
I
I
In
n
ns
s
se
e
er
r
rt
t
ti
i
in
n
ng
g
g
a
a
a
F
F
Fa
a
av
v
vi
i
ic
c
co
o
on
n
n
a
a
an
n
nd
d
d
T
T
To
o
ou
u
uc
c
ch
h
h
I
I
Ic
c
co
o
on
n
ns
s
s
LECTURE NOTES:
• Provide an overview of what a favicon is, where it is displayed, and the format for a favicon file.
• Explain to students how they can specify a single favicon for all pages on a website.
• Explain to students how they can specify a different favicon for an individual web page on the
website.
TEACHER TIP
Point out to students that a favicon is most helpful to users if it helps them identify what web page
is open in a window or tab without having to view the web page. Therefore, useful favicons usually
represent some visual aspect of a website, such as the company logo.
• Point out to students that for desktop browsers, the custom favicon is an .ico file and that students
can create a favicon using the name favicon.ico.
• Tell students they can specify a favicon for a web page by adding a link element that references the
appropriate .ico file.
FIGURES: G-24, G-25, G-26
TABLE G-5: Characteristics of favicons and touch icons
BOXES:
1. Quick Tip: The .ico format can contain multiple images, so you can create icons at all sizes listed
in TABLE G-5 and include them all in the same .ico file.
2. Trouble: Note that some browsers show favicons only for websites accessed over the Internet
and don’t look for the icons for local files. If you don’t see the favicon, open the web page from
a web server.
3. Trouble: If you’re using a different smartphone or browser, follow your usual steps for adding
an icon to your home screen.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 14 of 14
2. Classroom discussion: Have students discuss the notion of including a favicon in a web page which is
expected to be read by screen readers. How do you think screen readers would treat the favicon? How
does that affect whether or not you include a favicon in the web page, and/or what type of favicon you
include? Why are touch icons so important? If they have a smartphone, what is their experience with
creating and using touch icons. Do favicons and touch icons serve the same or different purposes?
Explain.
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Visual Workshop – a practical, self-graded capstone project that requires independent problem
solving.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
alt text (172)
tile (174)
bitmap image (170)
dots per inch (DPI) (170)
DPI (170)
favicon (186)
GIF (170)
hotspot (182)
image map (182)
JPEG (170)
JPG (170)
native (170)
pixels (170)
PNG (170)
resolution
Scalable Vector Graphics (SVG) (170)
SVG (170)
touch icon (186)
vector graphic (170)
Top of Document