Chapter 3 – Creating Web Pages with Links, Images, and Embedded Style Sheets
MULTIPLE CHOICE
1. Using ____, a Web site’s visitors can move from one page to another, and view information in any
order.
a.
indices
c.
attributes
b.
key values
d.
hyperlinks
2. When text identifies a link, it often appears as ____ text.
a.
bold
c.
indexed
b.
embedded
d.
underlined
3. With Internet Explorer, the default color for an active link ____.
a.
is red
c.
has no color
b.
is purple
d.
varies in color
4. A(n) ____ makes an image appear as if it has a frame around it.
a.
index
c.
variance
b.
border
d.
key tag
5. If an image has no ____, no frame will appear around the image.
a.
index
c.
variance
b.
key tag
d.
border
6. An easy way to provide contact information is to include a(n) ____ link on a Web site’s home page, as
well as on other pages in the Web site.
a.
connection
c.
e-mail
b.
user
d.
video
7. A Web developer should design the Web site in such a way that the links from one Web page to
another are apparent and the ____ is clear.
a.
fluidity
c.
concatenation
b.
navigation
d.
indexing
8. If the text elements vary across paragraphs, a(n) ____ style is good to use.
a.
inline
c.
embedded
b.
dynamic
d.
external
9. If you want all of the text in a Web page to be the same, a(n) ____ stylesheet is appropriate.
a.
embedded
c.
inline
b.
dynamic
d.
external
10. If text is common across more than one Web page, a(n) ____ style sheet should be used.
a.
bullet-style
c.
external
b.
bullet-shape
d.
disc
11. The <a> tag also is called the ____ tag.
a.
server
c.
index
b.
anchor
d.
home
12. With an e-mail link, the link text used typically is the ____.
a.
e-mail address
c.
domain name of the e-mail server
b.
Web protocol
d.
e-mail password
13. The ____ tag is used to create anchors for links to another page in the same Web site, to a Web page in
an external Web site, within the same Web page, and for e-mail links.
a.
<a>
c.
<ul>
b.
<ol>
d.
<an>
14. The ____ attribute of the <a> tag indicates a forward relationship from the current document to the
linked document.
a.
rel
c.
rev
b.
fwd
d.
ahead
15. The ____ attribute of the <a> tag specifies what kind of content a linked page or file is, so as to help a
browser determine if it can handle a specific kind of resource.
a.
resource
c.
type
b.
source
d.
content
16. A text link without the ____ tag will not display correctly in the browser.
a.
</ br>
c.
</a>
b.
</p>
d.
</tl>
17. The form of an e-mail link is ____.
a.
<a name=“mailto:address@email.com”>linktext</a>
b.
<a href=“mailto:address@email.com”>linktext</a>
c.
<a mail=“http://www.address@email.com”>linktext</a>
d.
<a href=“http://address@email.com”>linktext</a>
18. ____ paths specify the location of a file, in relation to the location of the file that is currently in use.
a.
Absolute
c.
Located
b.
Relative
d.
Baseline
19. A valid value for the font-size property is any of the following EXCEPT ____.
a.
an actual numeric size
c.
a percentage
b.
the value medium
d.
a hexadecimal value
20. The font-weight property takes all of the following values EXCEPT the ____ value.
a.
oblique
c.
normal
b.
bolder
d.
lighter
21. The ____ tags decrease the font size in comparison to the surrounding text.
a.
<low> </low>
c.
<decr> </decr>
b.
<less> </less>
d.
<small> </small>
22. The ____ tags display text below normal text.
a.
<below> </below>
c.
<sub> </sub>
b.
<under> </under>
d.
<down> </down>
23. The ____ tags display text above normal text.
a.
<above> </above>
c.
<sup> </sup>
b.
<up> </up>
d.
<on> </on>
24. A(n) ____ style sheet is a separate document with a .css extension.
a.
inline
c.
extended
b.
embedded
d.
external
25. In this embedded style
<style type= “text/css”>
<!—
h1 {font-family: Garamond;
font-size: 32pt}
—>
</style>
the h1 element is the ____.
a.
declaration
c.
declamation
b.
anchor
d.
selector
26. Font-families are separated by ____.
a.
periods
c.
semicolons
b.
commas
d.
colons
27. Which of the following is NOT a pseudo-class that can be used when applied to the anchor or link
selector?
a.
link
c.
visited
b.
focus
d.
hover
28. A pseudo-class is attached to a ____ to specify a state or relation and give the Web developer more
control.
a.
declaration with an ampersand
c.
selector with a colon
b.
declaration with an @ sign
d.
selector with a period
29. The code ____ eliminates completely the underline on text links.
a.
a:hover text-underline: none
c.
a:active text-underline: none
b.
a:hover text-decoration: blank
d.
a:hover text-decoration: none
30. The ____ tags create a container into which a user can add an inline style.
a.
<div></div>
c.
<p></p>
b.
<span></span>
d.
<style></style>
31. A(n) ____ path specifies the exact address for the file to which you are linking or displaying a graphic.
a.
absolute
c.
relative
b.
indexed
d.
baseline
32. To make a style of one paragraph to be different from the style of others, you can define specific
elements of an HTML file as a category, or a(n) ____.
a.
area
c.
class
b.
style set
d.
index
33. The part of the style statement that identifies the page elements is called the ____.
a.
anchor
c.
declaration
b.
declamation
d.
selector
34. The tag and the class name are separated by a ____.
a.
colon
c.
period
b.
number sign
d.
comma
35. To establish a class in which text associated with the class name “footer” displays in a 9-point blue
font, you would add a style statement like this one: ____.
a.
class.footer {color: blue;
font-size: 9pt}
b.
footer {color: blue;
text: 9pt}
c.
p.footer {color: blue;
text-size: 9pt}
d.
p[footer] {color: blue;
point: 9pt}
36. Once you have added a style statement with the class name “footer” you can display text in the style of
that class using the ____ tag.
a.
<p.class.footer>
c.
<p>footer</p>
b.
<p class=”footer“>
d.
<p.footer>text here</p>
37. If you find a graphic you want to use, right-click the image, click ____ on the shortcut menu, and then
save the image to your computer.
a.
Store graphic
c.
Save JPEG
b.
Archive JPEG
d.
Save picture as
38. The ____ of an image impacts how long it takes an image to load.
a.
size
c.
subject
b.
complexity
d.
both a and b
39. To create a(n) ____ version of an image, the image can be resized to a smaller size in a paint or image-
editing program and then saved with a different file name.
a.
thumbnail
c.
indexed
b.
pixelated
d.
master
40. To end right-aligned text wrap, enter the ____ tag where the text should stop wrapping to the right.
a.
<br style=“clear: right” />
c.
<br nowrap=“right” />
b.
<br stop=“right” />
d.
<br end=“right” />
MULTIPLE RESPONSE
Modified Multiple Choice
1. _____ can serve as hyperlinks.
a.
Text
c.
Animations
b.
Images
d.
Video
2. A well-designed Web page provides a way for visitors to contact the person responsible for ____.
a.
maintaining the Web site
b.
designing the Web site
c.
maintaining the Web server
d.
addressing customer questions and comments
3. Examples of content types for the <a> tag include ____.
a.
text/html
c.
image/jpeg
b.
video/quicktime
d.
text/css
4. The <pre> tag sets enclosed text as preformatted material, preserving ____.
a.
images
c.
spaces
b.
line breaks
d.
punctuation
5. To create a link to a link target ____.
a.
the name attribute cannot be used
b.
the target name is enclosed in quotation marks
c.
the href attribute is followed by an #
d.
the phrase “Click here” cannot be used
MODIFIED TRUE/FALSE
1. The change of a mouse pointer to a(n) hourglass when moved over text, for example, indicates that a
link is available from the text. _________________________
2. With Internet Explorer, the default color for a visited link is red. _________________________
3. With Internet Explorer, the default color for a normal link that has not been clicked is purple.
_________________________
4. If you want to change the colors of text links to override the browser defaults, you can designate those
changes in the anchor <a> or <html> elements using an embedded or external style sheet, or by using
an inline style. _________________________
5. If you determine that you can effectively turn the underline off on a link, you can change the underline
attribute to none. _________________________
TRUE/FALSE
1. Using hyperlinks, a Web site visitor can move from one page to another, to view information in any
order.
2. When using text links on a Web page, it is recommended that you use the phrase “Click here.”
3. If an image has no border, no frame will appear around the image.
4. Web pages rarely include links to connect one Web page to another page within the same Web site.
5. Links within a Web page allow visitors to move quickly from one section of the Web page to another.
6. With an inter-page link, you insert the ampersand before the target id to indicate that you want to link
to a specific section of a Web page, not necessarily the top of the page.
7. By including links within a Web page, a visitor can click a link to move directly to a section of
interest, rather than scrolling through the entire Web page.
8. The home page should indicate clearly what links the visitors should click to move from one Web page
on the Web site to another.
9. It is unusual for Web developers to utilize images to call attention to a Web page.
10. Using the same graphical image on all marketing materials is a good way to provide a consistent visual
and brand message to customers.
11. The alt attribute provides information about the purpose of an image for assistive technology such as
screen readers.
12. Identifying the width and height attributes of an image can compromise page loading time.
13. The <a> and </a> tags used to create a text link to a Web page within the same Web site are used to
create a link to a Web page in another Web site.
14. The <pre> </pre> tags indent margins on sections of text.
15. To ensure that text appears as bold font, you would enclose it between a start <b> and end </b> tag.
16. In practice, the <strong> and <b> tags usually have the same result when the Web page displays.
17. A good technique for long Web pages is to allow visitors to link back to the top of the Web page easily
from several places on the page.
18. You can add up to 15 classes in a given Web page.
19. The float property indicates in which direction to display an element being inserted on a Web page.
20. Alignment is rarely considered when inserting an image.
21. The Web contains many Web sites with thousands of image files on countless subjects that can be
downloaded free and used for noncommercial purposes.
22. Regardless of where you get an image, always be aware of copyright rules and regulations.
23. If a visitor clicks a thumbnail image to view the larger image, he or she can use the Return button on
the browser’s Standard toolbar to return to the original Web page displaying the thumbnail image.
24. To create links within the same Web page, the targets for the links first must be created.
25. A link target is intended to mark a specific area of the Web page, to which a link can be directed.
COMPLETION
1. When a visitor clicks a(n) ____________________ link, it automatically opens a new message in the
default e-mail program and inserts the appropriate contact e-mail address in the To field.
2. When the browser recognizes a(n) ____________________ URL in a clicked link, it automatically
opens a new message in the default e-mail program and inserts the appropriate contact e-mail address
in the To field.
3. A(n) ____________________ describes the location (folder or external Web site) where the files can
be found.
4. A(n) ____________________ element or attribute is one that has been outdated.
5. The <b> </b> tags are a(n) ____________________ style tag that displays text as bold.
6. The <____________________> tag designates a long quotation.
7. The <____________________> tag is a logical style tag that displays text with emphasis and usually
appears as italicized.
8. The <____________________> tag is a physical style tag that displays text as italicized.
9. The <____________________> tag is often used for text in column format in another document
pasted into HTML code.
10. Text that displays below normal text is called ____________________.
11. Text that displays above normal text is called ____________________.
12. ____________________ style tags allow a browser to interpret the tag based on browser settings,
relative to other text on a Web page.
13. The <h2> heading tag is a(n) ____________________ style that indicates that the heading text should
be larger than regular text but smaller than text formatted using an <h1> heading tag.
14. The <strong> </strong> tags are a(n) ____________________ style, which indicates that the text
should have a strong emphasis, and which most browsers interpret as displaying the text in bold font.
15. ____________________ style tags specify a particular font change that is interpreted strictly by all
browsers.
16. In HTML, a(n) ____________________ is a special instruction to the browser to specify how the Web
page is displayed.
17. In the case of a link within a Web page, the <a> tag specifies a(n) ____________________, or named
location, in the same file.
18. A(n) ____________________ image is a smaller version of the image itself.
19. The <br style=“clear: ____________________” /> tag clears all text alignments.
20. To create links within the same Web page, the ____________________ for the links first must be
created.
MATCHING
Identify the letter of the choice that best matches the phrase or definition.
a.
logo
f.
text-decoration
b.
bold
g.
italicized
c.
floating
h.
physical
d.
thumbnail
i.
logical
e.
clip art
j.
rel
1. This kind of image on a company’s Web site is the same image on the company letterhead and
business cards.
2. The <em> </em> tags are an example of this kind of style tag.
3. The <i> </i> tags are an example of this kind of style tag.
4. Text tagged with the <em> </em> tags usually appear this way.
5. Text tagged with the <strong> </strong> tags usually appear this way.
6. Allows an element to move to the side indicated in the associated statement.
7. Using this kind of image gives a visitor the opportunity to decide whether to view the full-sized image.
8. Property that allows text to be underlined or blink, for example.
9. The value of this <a> attribute is a link type.
10. Many applications come with this, which can be used on Web pages.
ESSAY
1. Discuss in detail two formatting suggestions that will help you call attention to important topics on a
Web page without overpowering the page.
2. Discuss the following statement in detail: Planning how and where to use the four types of links is an
important part of Web page design.
3. Explain how to define unique styles for normal, visited, and active links. Also include an explanation
of the hover pseudo-class, including a definition and the general syntax of a pseudo-class in your
response.
CASE
Critical Thinking Questions
Case 3-1
Patricia has used the <a> tag for a long time in her introductory-level work creating Web pages for
family and friends. However, it was not until she took a course in HTML that she realized that there
were other attributes for the <a> tag of which she could make use.
1. Patricia’s instructor explains to her that if she has Web pages that fall into a linear series (e.g., project
1, project 2, project 3), she can use one of the <a> tag attributes to help her organize those
relationships. Which of the following is a valid attribute-value pairing of which Patricia could make
use?
a. fwd=“this”
c. ahead=“link”
b. rel=“next”
d. Any of the above
2. Patricia’s instructor has also alerted her that she can help support a browser in its work by flagging the
content type of a given linked page, in order to help the browser determine if it can handle that
resource type. Which of the following is NOT an example of a value that Patricia’s instructor gives her
to illustrate how the type attribute works?
a. image/html
c. video/quicktime
b. application/java
d. text/css
Critical Thinking Questions
Case 3-2
To this point, Javier’s Web page development work has been limited to creating individual pages or
very small sites for his own use but he has just started a job in which he will be called upon to develop
more sophisticated sites. As such, the HTML code and graphical images in the sites on which he will
work will be separated into different folders, increasing the complexity of the file structure. For this
reason, he asks his friend Brigette to give him a quick primer on absolute and relative paths so he can
make best use of these concepts.
3. Which of the following is NOT a true statement that Brigette can make to Javier?
a. The beginning location for file paths is
known as root.
c. If the root folder must change for some
reason, the use of relative paths means that
you do not have to change all the addressing.
b. You can use either an absolute or relative
path when identifying the location of files.
d. It is better to use absolute paths for
flexibility wherever feasible.
4. Brigette thinks that it is best to give Javier a real-world example in order to solidify his understanding
of these concepts. Assume that an image called tflogo.gif is stored in the Images subfolder and a Web
page called offerings.html is stored in the HTMLcode subfolder. Which of the following relative path
structures could the offerings.html page use to refer to the tflogo.gif file?
a. \images\tflogo.gif
c. \HTMLcode\Images\tflogo.gif
b. \Images\tflogo.gif
d. It is not possible to make the reference to
this image without the use of an absolute
path.