Name:
Class:
Date:
1. You add an image to a web page by linking to a separate file.
a.
True
b.
False
True
1
170
2. The GIF file type does not support transparent pixels.
a.
True
b.
False
False
1
170
3. The most widely supported graphics formats are GIF, JPEG, and PNG.
a.
True
b.
False
True
1
170
4. Like span elements, img elements are embedded elements by default.
a.
True
b.
False
False
1
172
5. HTML5 includes the semantic figure element to mark images that add information to a web page.
a.
True
b.
False
True
1
6. You use the background-repeat property when you want to specify one or more properties related to background listed
in a specific order.
a.
True
b.
False
False
1
175
7. An img element can contain text.
Name:
Class:
Date:
a.
True
b.
False
True
1
173
8. Only Firefox supports opacity values for images.
a.
True
b.
False
False
1
180
9. 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.
a.
True
b.
False
True
1
179
10. You can add a link to an image in an HTML document by enclosing the img element in an a element.
a.
True
b.
False
True
1
180
11. The size of a bitmap image is measured in inches, which are the individual dots that make up the image.
_________________________
False – pixels
1
170
12. Images can currently be represented electronically in two ways: as bitmaps or as properties.
_________________________
False – vectors
1
170
13. More recently, the Super Vector Graphics (SVG) format has seen wider support in browsers; it is optimal for encoding
line art. _________________________
False – Scalable
1
Name:
Class:
Date:
14. You add an image to an HTML document using the one-sided img element. _________________________
1
172
15. To apply both a background color and a background image, you can use a single shorthand display property.
_________________________
1
16. The value for the background property always starts with the text “http”. _________________________
False – url
1
17. The 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 is referred to as hotsopt. _________________________
False – image map
1
18. A(n) favicon is a custom icon associated with a web page that appears in the address bar and on the bookmark or
favorites menu and bar.
True
1
19. As a general rule, alt text should describe an image without adding additional information, as this text is intended to
be able to substitute for the image. _________________________
1
178
20. The title attribute is generally used to provide explanation or additional information if a user seeks it out.
_________________________
True
179
21. You can use HTML to incorporate images into your Web pages and specify CSS ____ to affect the way user agents
display the images.
a.
elements
b.
properties
Name:
Class:
Date:
c.
commands
d.
applications
b
1
170
22. A ____ image represents an image as a grid of dots and specifies the color of each dot.
a.
vector
b.
bitmap
c.
layout
d.
static
b
1
170
23. A ____ graphic encodes the appearance of a graphic as geometric shapes.
a.
vector
b.
bitmap
c.
layout
d.
static
1
170
24. The three most widely used image formats on the web are all different types of ____ encoding.
a.
vector
b.
bitmap
c.
Both A and B.
d.
Neither A nor B.
b
1
170
25. The ____ format, named for the Joint Photographic Experts Group that created it, is optimized for images that contain
many colors, such as photographs.
a.
JPEG
b.
JPG
c.
Either A or B.
d.
Neither A nor B.
1
170
26. ____ works best for art that contains limited numbers of colors and areas with defined borders between areas.
a.
PNG
b.
GIF
c.
JPG
d.
JPG
1
170
27. PNG, short for Portable ____ Graphics, was originally designed as a free alternative to GIF when GIF usage required
licensing fees.
a.
Native
b.
Network
Name:
Class:
Date:
c.
New
d.
Natural
b
1
170
28. A(n) ____ file can be displayed at different dimensions with no decrease in quality.
a.
GIF
b.
JPEG
c.
SVG
d.
All of the above.
1
170
29. All bitmap images are created to be displayed at a set ____.
a.
resolution
b.
size
c.
Both A and B.
d.
Neither A nor B.
1
170
30. Resolution, measured in ____, specifies how close the dots in the bitmap should appear on the output.
a.
dots per inch
b.
dots per ion
c.
dots per impression
d.
dots per image
1
170
31. The standard resolution for display on a monitor is ____ dpi.
a.
36
b.
72
c.
144
d.
256
b
1
170
32. The size of a bitmap image is measured in ____, which are the individual dots that make up the image.
a.
ions
b.
pixels
c.
inches
d.
impressions
b
1
170
33. While a vector graphic can be scaled larger or smaller with no change in quality, bitmap graphics display optimally
only at their original, or ____, length and width.
a.
native
b.
natural
c.
intended
d.
final
Name:
Class:
Date:
1
170
34. SVG graphics are written in a(n) ____ language similar to XML.
a.
standard
b.
export
c.
markup
d.
concurrent
1
171
35. You add an image to an HTML document using the one-sided img element. The element must include the ____
attribute whose value is the path and filename of the image file to display.
a.
src
b.
http
c.
html
d.
alt
1
172
36. You add an image to an HTML document using the one-sided img element. The element must include the ____
attribute which specifies text to display in case the image is unavailable or needs to be read in user agents by software
such as screen readers.
a.
utf
b.
alt
c.
src
d.
http
b
1
172
37. Values for the width and height attributes of an img element are always expressed in ____.
a.
centimeters
b.
inches
c.
pixels
d.
percent
1
172
38. The coordinates for an image map are measured from the ____ and _____ edges of the image.
a.
top, right
b.
top, left
c.
bottom, right
d.
bottom, left
b
1
182
39. Each linked area in an image map is know as a(n) ____ .
a.
link
b.
shape
Name:
Class:
Date:
c.
alt image
d.
hotspot
d
1
182
40. In addition to specifying a color as the background for a web page or web page element, you can provide a path and
filename for a background image using the ____ property.
a.
image-filename
b.
background-image
c.
path-filename
d.
path-image
b
1
174
41. By changing the ____ of an image, you can increase its contrast with other page elements or make it more closely
match a site’s design.
a.
size
b.
alignment
c.
opacity
d.
filename
1
180
42. To associate caption text with an img element, you place the text in a ____ element that is nested within the figure
element for the image.
a.
captext
b.
figtext
c.
textcaption
d.
figcaption
d
1
178
43. Hotspots can be ____ shapes.
a.
rectangular
b.
polygonal
c.
circular
d.
All of the above.
d
1
184
44. A favicon is a graphic file 16 pixels in width by ____ pixels in height.
a.
16
b.
32
c.
64
d.
128
1
187
45. You can specify a favicon for all the pages on a Web site by using the ____ format.
Name:
Class:
Date:
a.
.img
b.
.jpg
c.
.txt
d.
.ico
d
1
186
Unholy Vault Designs/Shutterstock.com
Photo/Sasha Vodnik
46. Referring to the figure above, the icon on the tab, next to the words “Lakeland Reeds Bed & Br..” is a(n)____ icon
known as a favicon.
a.
custom
b.
standard
c.
animated
d.
temporary
1
186
47. Referring to the figure above, you know this file was opened _____.
a.
from a local file
b.
from a web server
c.
either a or b
d.
neither a nor b
1
186
48. Referring to the figure above, if you want to specify a different favicon on an individual page you should use the ____
element to reference the appropriate file.
a.
alt
b.
root
c.
path
d.
link
d
1
187
Name:
Class:
Date:
Unholy Vault Designs/Shutterstock.com
49. Referring to the figure above, the text “The Sun Room” under the picture is a ____.
a.
figure caption
b.
figure callout
c.
Web caption
d.
Web callout
50. Referring to the figure above, the linked text “The Sun Room” was created by nesting the ____ element inside a
figcaption element.
a.
link
b.
fig
c.
a
d.
div
Name:
Class:
Date:
Unholy Vault Designs/Shutterstock.com
51. Referring to the figure above, a tall narrow background image was repeated or ____ to fill the entire screen.
a.
tiled
b.
rolled
c.
embedded
d.
reversed
1
Name:
Class:
Date:
52. Referring to the figure above, which figure is displayed at its native length and width?
a.
lower-left image
b.
lower-middle image
c.
lower-right image
d.
none
171
53. Referring to the figure above, the bottom-right picture shows the image displayed ____.
a.
larger than its native size
b.
smaller than its native size
c.
at its native size
d.
on an older browser
1
54. Referring to the figure above, which image(s) would require more data to be downloaded than is needed to display a
quality image?
a.
lower-left image
b.
lower-middle image
c.
lower-right image
d.
both a and c
171
55. Referring to the figure above, which image(s) results in the best balance of file size and quality.
a.
lower-left image
b.
lower-middle image
Name:
Class:
Date:
c.
lower-right image
d.
both a and c
b
1
171
Case-Based Critical Thinking Question
Kristin coaches a high school hockey team and has started a website to showcase the players.
56. Kristin wants to show lots of photographs on the website. The best format for her to use is the ________ format
because it is optimized for colorful images.
a.
JPEG
b.
GIF
c.
PNG
d.
SVG
1
170
Critical Thinking
57. Kristin wants to include drawn diagrams (limited colors, defined borders) illustrating the players and their
positions. She wants the diagrams to be displayed at different dimensions with no decrease in quality. To do this, she
should choose the ____ format.
a.
JPEG
b.
JPG
c.
GIF
d.
SVG
d
1
170
Critical Thinking
58. Before she uses the SVG format, Kristin researches browser support. The following browser offers high support of
SVG: ____.
a.
Chrome
b.
Safari
c.
Opera
d.
All of the above.
d
1
171
Critical Thinking
Case-Based Critical Thinking Question
John wants to add related text to images on his Lawn Care business website.
59. John discovers that most visual users display the title attribute as ____ text that is shown when a user moves the
mouse pointer over the associated element.
a.
hyperlinked
b.
secondary
c.
floating
d.
hovering
60. John also finds out that he can nest an img element inside a(n) ____ element to align it horizontally.
a.
div
b.
block–level
c.
span
d.
alignment
Critical Thinking
61. Referring to the figure above, what was added using the background property?
62. A(n) ________________ image represents an image as a grid of dots and specifies the color of each dot.
63. A(n) ___________________ graphic encodes the appearance of a graphic as geometric shapes.
64. You use the _____ property to set how transparent an image is.
opacity
Critical Thinking
Name:
Class:
Date:
65. To create a multi-sided hotspot, you should set the shape value to _________.
66. User agents have a default behavior of ___________________ small background images, meaning that the images are
displayed repeatedly both across and down a page to fill up the browser window.
67. The standard CSS3 syntax uses the “___________________” property with a decimal value from 0 (fully transparent)
to 1 (fully opaque).
68. Optimizing your use of the figcaption element and the alt and title attributes of the image tag requires examining the
purpose of any image-related text you want to add to your web pages. When are each of the text labeling methods (alt
text, caption, and title) most commonly used?
69. Why is the text you provide using the alt attribute for an image important? Please give three tips for creating useful alt
text.
70. What is the benefit of styling an image with opacity? Using CSS3 syntax, what would be the code to set the “opacity”
property at 50%.
1
REFERENCES:
180
Critical Thinking
Match each term with the appropriate definition.
a.
bitmap image
b.
vector graphic
c.
PNG
d.
JPEG or JPG
e.
GIF
REFERENCES:
170
71. Originally designed as a free alternative to GIF
POINTS:
1
72. Represents an image as a grid of dots and specifies the color for each dot
POINTS:
1
73. Optimal format for photographs
d
POINTS:
1
74. Works best with art with limited colors and defined borders between areas
ANSWER:
1
75. Encodes the appearance of a graphic as geometric shapes
ANSWER:
b
1
REFERENCES:
172
Critical Thinking