HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 1 of 13

HTML, XHTML, and CSS, 7 th Edition

Chapter Three: Creating Web Pages with
Links, Images, and Embedded Style Sheets
A Guide to this Instructors Manual:
We have designed this Instructors 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 red 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, Classroom Activities, and 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 Instructors Manual, our Instructors 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.

Table of Contents
Chapter Objectives 2
HTML 88: Introduction 2
HTML 88: Project Underwater Tours by Eloise Web Site 3
HTML 90: Plan Ahead Box (Critical Thinking): Project Planning Guidelines 3
HTML 91: Using Links on a Web Page 3
HTML 97: Creating a Home Page 4
HTML 100: Plan Ahead Box (Critical Thinking): Identify How to Format Various 7
Elements of the Text
HTML 101: Plan Ahead Box (Critical Thinking): Identify How to Format Text 7
Elements of the Home Page
HTML 103: Plan Ahead Box (Critical Thinking): Plan How and Where to Use the 8
Four Types of Links
HTML 112: Plan Ahead Box (Critical Thinking): Identify Which Level of Style or 8
Style Sheet to Use
HTML 121: Plan Ahead Box (Critical Thinking): Test Your Web Page 8
HTML 123: Editing the Second Web Page 8
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 2 of 13

HTML 126: Plan Ahead Box (Critical Thinking) 8

HTML 126: Working with Classes in Style Statements 8
End of Chapter Material 11
Glossary of Key Terms 12

Chapter Objectives
Students will have mastered the material in Chapter Three when they can:
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 3 of 13

Describe linking terms and definitions
Create a home page and enhance a Web
page using images
Change body and heading format using
embedded (internal) style sheets
Align and add color to text using embedded
and inline styles
Add a text link to a Web page in the same
Web site
Add an e-mail link
Add a text link to a Web page on another
Web site
Use absolute and relative paths
Save, validate, and view an HTML file and
test the links
Use style classes to add an image with
wrapped text
Add links to targets within a Web page
Use an inline style to change the default
bullet list type to square bullets
Copy and paste HTML code
Add an image link to a Web page in the
same Web site

HTML 88: Introduction

LECTURE NOTES
Review the types of links to be added to Web pages in this project, and the kinds of Web page
elements that can serve as hyperlinks, as well as the other enhancements to be added to the
pages
Discuss possible uses of each type of link

TEACHER TIP
Mention that the use of text as a hyperlink often is called hypertext. While the Webs implementation
of hypertext is relatively recent the idea of texts that contain links to other texts, leading readers
along different pathways depending on their selections dates back at least to Memex, a hypermedia
system first described in 1945. A database system called Xanadu invented in the 1960s attempted to
implement hypertext/hypermedia, using text, pictures, sounds, and the like, which all interconnected.
In its modern incarnation on the Web, hypertext uses URLs imbedded in hyperlinks to connect
associated images, texts, and sounds with one another. This use of hypertext has resulted in a re-
envisioning of the linear way in which we always have read books, sparking creative uses of this non-
linear technology.

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)What phases of the Web Development Life Cycle would students have already completed before
they begin the project like this one? (Answer: Web site planning, analysis, and design phases)

HTML 88: Project Underwater Tours by Eloise Web Site

LECTURE NOTES
Discuss the elements of the Web pages in Figures 3-1a and 3-1b, and discuss the relationship
between the two pages and how they are linked to one another
Review the general tasks to be performed to create the Web page shown

FIGURES: 3-1a, 3-1b

TEACHER TIP
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 4 of 13

Refer students to Table 1-4 on page HTML 15 for information on the planning phase of the Web
Development Life Cycle.

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)There are seven basic types of links to use on a Web page. T/F? (Answer: False)

HTML 90: Plan Ahead Box (Critical Thinking): Project Planning Guidelines
LECTURE NOTES
Review the general guidelines for students to keep in mind as they create a Web page
Define home page

CLASSROOM ACTIVITIES
1. Quick Quiz:
1)What is a home page? (Answer: The first page in a Web site)

HTML 91: Using Links on a Web Page

LECTURE NOTES
Use Figure 3-2 to show an example of a text link on a Web page and to show an example of an
image link on a Web page
Review the three states of the text links displayed in Figure 3-3 and the image border and link color
variations in Figure 3-4
Define anchor tag
Discuss the use of styles to change normal, visited, and active link colors from the default, and
review the text-decoration property and its values, cautioning students about the need to make
sure that users are able to immediately recognize text that is used as a link
Use Figure 3-5a in conjunction with Figure 3-5b to show the link between two pages in the same
Web site
Use Figure 3-6a in conjunction with Figure 3-6b to show the link between two pages in different
Web sites
Use Figure 3-7 to show links within a Web page
Explain the function of an e-mail link, and use Figure 3-8a in conjunction with Figure 3-8b to show
an e-mail link and the default e-mail program opened when the e-mail link is clicked

FIGURES: 3-2, 3-3, 3-4, 3-5a, 3-5b, 3-6a, 3-6b, 3-7, 3-8a, 3-8b

BOXES
1. BTW: Link Help. Refer students to the many Web development resources sites available for their use
as they begin their work in Web development in HTML5.

2. BTW: Link Colors. Review the steps to change the link colors in the students browser of choice.

3. BTW: Links on a Web Page. Introduce the use of the id attribute to allow movement from one area to
another on the same Web page.

4. BTW: E-mail Links. Explain how to assign multiple e-mail addresses to a mailto link.
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 5 of 13

CLASSROOM ACTIVITIES
1. Critical Thinking: Why is it useful for the text links to change color as illustrated in Figure 3-3?

LAB ACTIVITIES
1. Ask students to visit a variety of Web pages to see which ones have varied the default link colors for
the normal, visited, and active link states.

2. Ask students to find three Web sites with links between pages on the same site (as opposed to links to
external sites).

3. Ask students to find three Web sites with links to pages on external sites (as opposed to links within
the same site).

4. Ask students to find three Web pages with links within the Web page (as opposed to external links,
or links within the same site).

5. Ask students to find three Web pages with e-mail links.

HTML 97: Creating a Home Page

LECTURE NOTES
Redefine a home page as the main page of a Web site, which site visitors will generally view first
Discuss the special considerations to be given to a home page in terms of design, navigation
requirements, and specific content
Review the steps to start Notepad++ using Figure 3-9
Review the steps to enter initial HTML tags to define the Web page structure, and use Figure 3-10
(in conjunction with Table 3-1) to display the entered HTML code
Review the steps to save an HTML file
Use Figure 3-11 (in conjunction with Table 3-2) to illustrate adding an image
Use Figure 3-12 (in conjunction with Table 3-3) to illustrate adding paragraphs of text
Define anchor tag and discuss the basic form of the <a> tag, used to create links
Use Table 3-4 to review the attributes and functions of the <a> tag
Use Figure 3-13 to illustrate adding a text link to another Web page within the same Web site
Explain that the <a> and </a> tags used to create a text link to a Web page are the same ones used to
create an e-mail link
Review the syntax of the <a> tag, with its unique href attribute, for an e-mail link
Define mailto, and use Figure 3-14 to illustrate adding an e-mail link
Use Figure 3-15 to review the step to add a subject to an e-mail link, and the step to add a subject
together with body message text
Review the step to add a text link to a Web page in another Web site, and use Figure 3-16 to display
the entered HTML code
Define path and root, and differentiate between absolute path and relative path using Figure 3-17 as
an illustration of a complex file structure
Use Table 3-5 in conjunction with Figure 3-18 to show the impact of certain key font styles on your
Web page text
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 6 of 13

Use Table 3-6 in conjunction with Figures 3-19a and 3-19b to show the impact of certain key text
formatting on your Web page text, and differentiate between logical style tags and physical style
tags
Review style sheet precedence and refer students to Chapter 4 for information about the third and
final form of styles: external style sheets
Redefine what an embedded style sheet is and what it controls and use the code on page HTML 113
to review an example, making sure to define the terms selector and declaration using the
example
Use Table 3-7 to review six main properties and related options that are used extensively in CSS,
and explain what the body selector is
Discuss the use of the a:link, a:visited, and a:active selectors
Explain what it means to hover over a link, introduce the a:hover selector, and explain what a
pseudo-class is, walking students through the format on HTML 114 and using Figure 3-20
Use Figure 3-21 (in conjunction with Table 3-8) to illustrate adding embedded style sheet
statements
Use Figure 3-22 to illustrate adding an inline style for color, introducing the <span> </span> tags as
a means of creating a container into which students can add the inline style
Review the step to save an HTML file
Discuss the importance of validating Web pages, and use Figures 3-23 and 3-24 to illustrate
validating a Web page
Use Figure 3-25 to illustrate printing an HTML file
Review the steps to view a Web page and use Figure 3-26 to show the resulting page
Use Figures 3-27 and 3-28 to illustrate testing links on a Web page
Use Figure 3-29 to illustrate printing a Web page

FIGURES: 3-9, 3-10, 3-11, 3-12, 3-13, 3-14, 3-15, 3-16, 3-17, 3-18, 3-19a, 3-19b, 3-20, 3-21, 3-22, 3-23,
3-24, 3-25, 3-26, 3-27, 3-28, 3-29

TABLES: 3-1, 3-2, 3-3, 3-4, 3-5, 3-6, 3-7, 3-8

BOXES
1. BTW: Copy Initial Structure. Discuss the use of a template as the basis for all of your HTML files to
eliminate the need for retyping code each time.

2. BTW: Other Links. Discuss the use of links to connect to FTP sites and newsgroups.

3. BTW: E-mail Links. Caution students about the fact that e-mail clients may not be installed in the
environment in which students are testing the links in this text.

4. BTW: Font Properties. Refer students to Appendix D for a more complete list of CSS font properties
and values than is shown in Table 3-5.

5. BTW: Deprecated and Non-supported Tags. Define deprecated element and explain the problem with
obsolete elements.

6. BTW: Logical versus Physical Tags. Encourage students to read online about the differences between
logical and physical tags.
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 7 of 13

7. BTW: Types of Styles. Review the three styles of CSS styles and the implications some far-
reaching, some only limited to a single element of each.

8. BTW: HTML/CSS Terminology. Differentiate between a tag and a style statement.

9. BTW: Specifying Alternative Fonts. Discuss the use of a list of fonts to govern more fully the way
your Web page displays on computers over which you otherwise have no control.

10. BTW: Common Validation Errors. Review some of the most common sources of errors during the
validation process, using Figure 3-24 as a representative example of the impact a single coding error can
have.

11. BTW: Web Page Testing. Refer students to a good search engine or the World Wide Web
Consortium Web site for more information about link testing.

TEACHER TIPS
As students use styles to change text color and other page attributes, emphasize to them the importance
of making sure that the background and text and link colors work together well, as it is easy to make
the text on a Web page unreadable if the text or links are swallowed up by the background color. Also
remind students to limit the amount of detail in the image, too much of which may compromise
readability once the page is on the Web.

Stress the importance of viewing the completed Web page and testing its links. It is very easy for a
typographical error or a forgotten closing HTML tag to have an unexpected result on your Web page
when it is ultimately viewed in a browser. It is a good idea to view and test completed pages in Firefox,
Safari, and Internet Explorer to make sure that there are no unexpected effects in any browser.
Emphasize the importance of testing the links on a newly created page, especially links to sites on other
servers over which you do not have control.

CLASSROOM ACTIVITIES
1. Group Activity: Present students with a variety of screen shots of home pages or, if possible, present
online demos of the pages. Discuss the degree to which these home pages satisfy the requirements
detailed in this chapter.

2. Group Activity: Give students a series of examples of text that is to serve as the clickable word or
phrase for a text link. Ask them to determine which ones are sufficiently descriptive and indicative of
the purpose of the link, and which ones do not meet those criteria.

3. Assign a Project: Give students the graphic of a file structure like the one in Figure 3-17 and ask them
to determine the relative paths that specify a given file in relation to another.

4. Quick Quiz:
1)What is another name for the <a> tag? (Answer: The anchor tag)
2)What does a path describe? (Answer: The location (folder or external Web site) where the files
can be found)
3)What is a deprecated element or attribute? (Answer: One that has been outdated)
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 8 of 13

4)What do physical style tags specify? (Answer: A particular font change that is interpreted strictly
by all browsers)
5)In CSS, of what is a style statement made up? (Answer: A selector and a declaration)
6)To what is a pseudo-class attached? (Answer: A pseudo-class is attached to a selector with a colon
to specify a state or relation to the selector to give the Web developer more control over that
selector.)

5. Critical Thinking: Why is useful for all of a companys publications including its Web site to
display a consistent logo image? What companies do this particularly well? What is the end result of
this consistency?

6. Critical Thinking: Discuss with students experiences they have had with Web sites whose links
failed. What impression did that leave in the students minds about that site?

LAB ACTIVITIES
1. Assign a Project: Ask students to review the design, structure, and content of three different Web site
home pages against the standards detailed in this chapter.

2. Assign a Project: Ask students to identify some companies or organizations that do a particularly
effective job of applying a consistent logo across all the pages of their Web site.

HTML 100: Plan Ahead Box (Critical Thinking): Identify How to Format Various
Elements of the Text
LECTURE NOTES
Review the formatting suggestions for students to keep in mind as they call attention to topics on a
Web page without overpowering the page or distracting readers
Refer students to Figure 3-1b on page HTML 89 to show the use of the h1 and h2 headings in their
appropriate precedence

HTML 101: Plan Ahead Box (Critical Thinking): Identify How to Format Text
Elements of the Home Page
LECTURE NOTES
Emphasize the need for making a plan before inserting a Web page's text elements
Review the formatting suggestions to make before adding text to the page

HTML 103: Plan Ahead Box (Critical Thinking): Plan How and Where to Use the Four
Types of Links
LECTURE NOTES
Review the four kinds of links and discuss the uses offered in the text

HTML 112: Plan Ahead Box (Critical Thinking): Identify Which Level of Style or Style
Sheet to Use
LECTURE NOTES
Review the strategies for keeping your use of style sheets straight
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 9 of 13

HTML 123: Plan Ahead Box (Critical Thinking): Test Your Web Page
LECTURE NOTES
Review the guidelines for how and what to test on your Web pages

HTML 124: Editing the Second Web Page

LECTURE NOTES
Use Figure 3-30 to discuss the enhancements to be made to the Sample Photographs Home Web
page
Review each of the types of links to be added to the page
Define target as an attribute of the <a> tag used to specify a location within the same Web page file
Review the steps to open an HTML file, and use Figure 3-31 to display the resulting HTML file

FIGURES: 3-30, 3-31

BOXES
1. BTW: Web Page Improvement. Discuss the opportunity to review a Web page you have created,
looking for ways to improve its appearance.

CLASSROOM ACTIVITIES
1. Class Discussion: Give students a series of screen shots (or online demos) of Web pages that use too
much bold, italicized, or other types of formatted text, as a way of reinforcing the legibility problems
that excess formatting can cause.

HTML 126: Plan Ahead Box (Critical Thinking)

LECTURE NOTES
Review the suggestions for formatting graphic images, identifying the necessary links on a long
page, and making sure to have links back to the top of the page and to the home page on each
page

HTML 126: Working with Classes in Style Statements

LECTURE NOTES
Recall the constituent components of a style statement, using the one on page HTML 126 as an
illustration
Define class, and discuss the uses of a class to allow for the selective application of styles to HTML
tags
Review the requirements around naming classes, and discuss the syntax of using class names in a
style statement
Use Figure 3-32a to show an example of HTML code with classes defined for and applied to the
middle and end paragraphs, and use Figure 3-32b to show the resulting Web page
Define floating, and use Figure 3-33 to illustrate the various ways to add an image with wrapped
text
Define thumbnail image, and use Figures 3-34a and 3-34b to illustrate the use of thumbnails, and
use Figures 3-35 through 3-37 (in conjunction with Table 3-9) to illustrate wrapping text
around image using CSS classes
Use Figures 3-38 and 3-39 to illustrate clearing the text wrapping
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 10 of 13

Use Figures 3-40a and 3-40b in a discussion of adding links within a Web page, and use Figures 3-41
and 3-42 to illustrate setting link targets
Use Figure 3-43 (in conjunction with Table 3-10) to illustrate adding links to link targets within a
Web page
Use Figures 3-44 and 3-45 to illustrate adding links to a target at the top of a page, and use Figure 3-
46 to illustrate copying and pasting HTML code
Use Figure 3-47 (in conjunction with Table 3-11) to illustrate adding an image link to a Web page
Review the steps to save, validate, and print the HTML file, and the steps to view and test a Web
page
Review the step to print a Web page and use Figure 3-48 to show the resulting page
Review the steps to quit Notepad++ and a browser

FIGURES: 3-32a, 3-32b, 3-33, 3-34a, 3-34b, 3-35, 3-36, 3-37, 3-38, 3-39, 3-40a, 3-40b, 3-41, 3-42, 3-43,
3-44, 3-45, 3-46, 3-47, 3-48

TABLES: 3-9, 3-10, 3-11

BOXES
1. BTW: Obtaining Images. Discuss the use of the Web to find images for use on your Web pages,
cautioning students to be aware of copyright rules and regulations at all times.

2. BTW: Thumbnail Size. Discuss best practices in terms of thumbnail sizes and caution students about
never using the height and width attributes in HTML code.

3. BTW: Quick Reference. Encourage students to visit Appendix A or the HTML Quick Reference Web
page for a list of HTML tags and their associated attributes, and to visit Appendix D for a list of CSS
properties and values.

TEACHER TIP
Emphasize the copyright considerations with respect to the use of images. Unless you are given
permission to use an image you locate on the Web, or you see a notice indicating that the image is
provided free, it is important to research whether or not your use of that image on your own Web page
constitutes a copyright infringement. Suggestions for sites with free images and images for sale include
webpromotion.com and jupiterimages.com.

CLASSROOM ACTIVITIES
1. Class Discussion: Survey students about their use of images from digital cameras or from image-
editing programs that they have used.

2. Quick Quiz:
1)What is a thumbnail image? (Answer: A smaller version of an image)
2)Alignment is a key consideration when inserting an image. T/F? (Answer: True)

3. Critical Thinking: What kinds of Web sites are well served by thumbnail images that link to full-
sized images?

LAB ACTIVITIES
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 11 of 13

1. Ask students to find an example or two of Web pages that float text around images.

2. Ask students to locate two or three Web sites that make extensive use of thumbnail images.
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 12 of 13

End of Chapter Material

Chapter Summary provides a general survey of the material in the chapter. Students can use these
pages to reinforce their achievement of the chapter objectives.

Learn It Online exercises ask students to visit the Online Companion that offers additional
information, resources, and activities related to the topics presented in the chapter.

The Apply Your Knowledge section includes short exercises and review questions that reinforce
concepts and provide opportunities to practice skills.

Extend Your Knowledge exercises allow students to expand their knowledge by solving practical
problems and experimenting with new skills, using Help.

In the Make It Right exercises, students take the necessary steps to correct all the errors in a
document and/or improve its design.

The In the Lab activities solidify the concepts presented in the chapter with practical application.

Thought-provoking Cases and Places exercises in each chapter exercise students minds and
challenge them to construct creative solutions. These exercises are constructed to allow students to
work independently and collaboratively.

Glossary of Key Terms

a:active (HTML 114)
a:hover (HTML 114)
a:link (HTML 114)
a:visited (HTML 114)
absolute path (HTML 107)
anchor tag (HTML 92)
body (selector) (HTML 114)
class (HTML 126)
declaration (HTML 113)
e-mail link (HTML 96)
floating (HTML 128)
home page (HTML 90)
hovers (HTML 114)
logical style tags (HTML 111)
mailto (HTML 105)
path (HTML 107)
physical style tags (HTML 111)
pseudo-class (HTML 115)
relative paths (HTML 109)
root (HTML 107)
HTML, XHTML, and CSS, 7th Edition Instructors Manual Page 13 of 13

selector (HTML 113)

<span></span> (HTML 117)
target (HTML 123)
text-decoration property (HTML 93)
thumbnail image (HTML 130)

Top of Document