HTML5 and CSS3 Illustrated Complete

2nd Edition Vodnik Solutions Manual

Visit to Download in Full: https://testbankdeal.com/download/html5-and-css3-illustrate
d-complete-2nd-edition-vodnik-solutions-manual/
 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
http://coursecasts.course.com, where they can download the most recent CourseCast onto their
mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State
University Computer Science Department where he is responsible for teaching 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 their time enjoying technology, rather than trying to figure it out. Open or
close your lecture with a discussion based on the latest CourseCast.

TTaabbllee ooff CCoonntteennttss

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

PPT 1.1
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 2 of 14

U
Unniitt O
Obbjjeeccttiivveess
Students will have mastered the material in Unit G when they can:
• Evaluate image file types • Use images as lings
• Insert images • Create an image map
• Insert a background image • Define additional hotspots
• Mark images as figures • Insert a favicon and touch icons
• Create a figure caption
117700:: EEvvaalluuaattee IIm
maaggee FFiillee TTyyppeess
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.
• Provide an overview of JPG, GIF, PNG, and VSG formats, the most commonly used image formats
on the web. Point out that JPG, GIF, and PNG are all types of bitmap encoding, and that VSG is
vector encoding. Explain the differences between the formats and what each format is most suitable
for.
• Explain the importance of making sure that an image in bitmap file format is created and formatted
for use on the web. Point out that all bitmap images are created to be displayed at a set resolution
and size.
• 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
style sheets—that is, by creating external documents in a text editor and linking them to your
web pages. Browser makers are also beginning to incorporate support for SVG code within
HTML documents, meaning that eventually you will have the option to embed graphics like
you embed CSS. SVG is supported by all major browsers, but not IE8, so if it’s important that
your site be compatible with IE8, you should use other graphic formats instead.

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:
a. T/F A bitmap image represents an image as a grid of dots of different colors. (T)
b. T/F A vector graphic represents the appearance of an image as geometric shapes. (T)
c. T/F The GIF format is preferred over the PNG format. (F)
d. T/F The PNG format is most suitable for photographs. (F)

117722:: IInnsseerrtt IIm

maaggeess
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.
2. Quick Tip: When the img element is the only child of a parent element, browsers sometimes
render the image with extra space below it. If removing this space is important, you can use the
declaration display: block; for the img.
3. Quick Tip: Some layouts with images don’t work well on both large and small screens.
Developers sometimes create different layout sizes, a practice known as responsive design.

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F The img element must include a longdesc attribute. (F)
b. T/F You can use an empty value for the alt attribute to let screen readers know they can skip
the image. (T)
c. T/F The text included in the value of the alt attribute is displayed on the screen as a caption
to the image. (F)
d. The value of the __________ attribute is the path and filename of the image to display. (Answer:
src)

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

117744:: IInnsseerrtt aa BBaacckkggrroouunndd IIm

maaggee
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.
• Explain to students that when property-value pairs conflict, the one that occurs later in the rule
takes precedence. Therefore, to ensure that the background image is displayed, place the pair listing
the background color first, and then the pair listing the background image. This ensures the image
will be shown, and if it can’t be rendered by the browser, then the background color will be used.

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.
3. Quick Tip: If your default styles declare a background property that uses an image, then using
background-color in the print style adds a color to the background instead of replacing the
image.
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:
a. A(n) __________ image is designed to look like a single, uninterrupted image when tiled.
(Answer: seamless)
b. T/F When conflicting property-value pairs appear in a style rule, the pair appearing last is
the one that takes precedence. (T)
c. T/F If you use a small image as a web page background image, user agents rendering the web
page on a large screen will display the background image once, and will leave the rest of the
background white. (F)

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.

117766:: M
Maarrkk IIm
maaggeess aass FFiigguurreess
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.
• Remind students to be sure they always have permission to use any images they obtain for a
website. Explain that even in their own images, if there are people in the images, they should be
sure to have permission to post those images to the web.

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
else’s work, it’s a show of respect to photographers and designers to ask for permission to use
their work. For small projects, a photographer or designer may allow use in return for credit and
a link to their site; for larger professional sites, a photographer or designer usually requires a use
fee and agreed-on terms of use. If you’re hiring a designer to create artwork for your website,
make sure your agreement specifies how long and in what context you or your organization
may use the work.

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:
a. You use the __________ element if you want to mark an image as having semantic value.
(Answer: figure)
b. T/F You should use the declaration min-width: 50%; to ensure that an element
automatically scales to fit smaller screens? (F)
c. T/F You must have permission for any images you use on a web site. (T)

117788:: CCrreeaattee aa FFiigguurree CCaappttiioonn

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.
• Explain the difference between alt text and a figure caption.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 8 of 14

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
there are many ways to describe any given image, it’s important to identify what aspect or
aspects of a graphic are relevant to the web page, and then focus on those aspects. Finally, if a
graphic is merely presentational and doesn’t add information to the web page, include the alt
attribute with nothing between the quotes. This lets screen readers know that the element isn’t
conveying information and that they can skip it, which saves blind and visually impaired users
from wasting time listening to text such as “stylized bullet” repeatedly while learning nothing
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
figcaption text for the image. Invite students to share their efforts. Discuss how the descriptions
are different and how they are alike. Use the examples to create a succinct alt text description
and caption. Repeat with other images.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 9 of 14

2. Quick Quiz:
a. In addition to the alt attribute, you can associate text with an image by using the
__________ element. (Answer: figcaption)
b. T/F You place the figcaption element in the opening figure tag. (F)
c. T/F You can create a figure caption as a link. (T)
d. T/F The figcaption element is nested inside the img element. (F)
e. T/F A caption should only be associated with an image that adds information to a web
page. (T)

118800:: U
Ussee IIm
maaggeess aass LLiinnkkss

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
additional declaration using a Microsoft-specific property: filter: alpha(opacity=number); where
number is a percentage from 0 (fully transparent) to 100 (fully opaque). When you decrease the
opacity of an image, you make it partially transparent. This can be useful if you want to increase
the contrast between the image and other page elements or simply to alter the image to more
closely match a site’s design.
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,
to use the background image sky.jpg with a background color of #001848, you would use the
declaration background: url(“sky.jpg”) #001848;. In this case, there’s no need to create a second
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 10 of 14

background declaration, as the specified color automatically serves as a fallback for the
background image.

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.

118822:: CCrreeaattee aann IIm

maaggee M
Maapp
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.
• Tell students each shape in an image map is known as a hotspot.
• Point out that to create an image map, the use a map element and then map a nest an area element
for each hotspot.
• Use TABLE G-3 to discuss attributes of the area element.
• Explain that the usemap attribute specifies the name attribute value for a map element as a hash
link.
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:
a. The linked area in an image map is referred to as a(n) __________. (Answer: hotpsot)
b. To create an image map, you use a(n) __________ element with a nested __________
element for each linked area you want to create. (Answer: map; area)
c. T/F The coordinates for an image map are usually measured from the bottom right corner.
(F)
d. T/F The usemap attribute specifies the hash attribute value for a map element. (F)

118844:: D
Deeffiinnee A
Addddiittiioonnaall H
Hoottssppoottss
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.
• Tell student that to create a circle shape, the specify a value of circle for the shape attribute and
then specify the coordinates for the center point followed by the radius 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
are available that let you point and drag and identify shapes and then provide you with the
shape’s coordinates. GIMP, a free graphic design application, lets you generate an image map in
this way. Adobe Fireworks, a paid application, supports this method as well. Additionally, some
websites provide image map generation utilities for free. To locate them, use a search engine to
search on the terms free image map generator.

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:
a. To create a triangle shape for an image map, use the __________ shape value. (Answer:
poly)
b. To create a poly shape, you must supply the coords value for each shape __________ .
(vertices)
c. T/F To create a circle shape for an image map you need to provide three coords values. (T)
d. T/F The minimum number of coords values you need to provide for a poly shape is six. (T)
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit G Page 13 of 14

118866:: IInnsseerrttiinngg aa FFaavviiccoonn aanndd TToouucchh IIccoonnss

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.
• Explain to students that they can specify additional graphic files to serve as icons for shortcuts that
users create on mobile phones, which are displayed on users’ screens when they create a shortcut
and which are known as touch icons.

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:
a. A graphic used as an icon for shortcuts that users create on mobile phones is known as a(n)
__________. (Answer: touch icon)
b. T/F The .ico format is the only format for a favicon that can be read by modern browsers. (F)
c. T/F To include a favicon in in your HTML document, you use a(n) __________ element.
(Answer: link)
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
Enndd ooff U
Unniitt M
Maatteerriiaall

•• 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.

•• Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.

• Independent Challenge 4: Explore – Using a real world focus to apply the unit skills, students
perform tasks or create documents that will benefit their everyday lives.

•• Visual Workshop – a practical, self-graded capstone project that requires independent problem
solving.

G
Glloossssaarryy ooff K
Keeyy TTeerrm
mss

alt text (172) JPG (170)

tile (174) native (170)
bitmap image (170) pixels (170)
dots per inch (DPI) (170) PNG (170)
DPI (170) resolution
favicon (186) Scalable Vector Graphics (SVG) (170)
GIF (170) SVG (170)
hotspot (182) touch icon (186)
image map (182) vector graphic (170)
JPEG (170)

Top of Document