HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 1 of 12

SOLUTION MANUAL FOR HTML5 AND CSS COMPLETE 7TH

EDITION WOODS 1133526128 9781133526124
Full download link at:
Solution manual: https://testbankpack.com/p/solution-manual-for-html5-and-css-complete-7th-edition-woods-
1133526128-9781133526124/
Test bank: https://testbankpack.com/p/test-bank-for-html5-and-css-complete-7th-edition-woods-1133526128-
9781133526124/

HTML, XHTML, and CSS, 7th Edition

Chapter Four: Creating Tables in a Web Site
Using an External Style Sheet
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 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 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.

Chapter Objectives 2
HTML 156: Introduction 2
HTML 156: Project – Oceanside Hotel and Sports Club Web Site 2
HTML 158: Plan Ahead Box (Critical Thinking): General Project Guidelines 3
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 2 of 12

HTML 159: Planning and Designing a Multipage Web Site 3

HTML 159: Creating Web Pages with Tables 3
HTML 164: Determining the Need for, Planning, and Coding a Table 4
HTML 168: Plan Ahead Box (Critical Thinking): Identify the Purpose of Various 5
Web Page Elements
HTML 169: Creating a Home Page with Banner Logo and Borderless Navigation 5
Table
HTML 179: External Style Sheets 6
HTML 181: Plan Ahead Box (Critical Thinking): Determine What Type of Style 7
Sheets or Other Formatting to Use in Your Web Pages
HTML 181: Adding an External Style Sheet 7
HTML 181: Plan Ahead Box (Critical Thinking): Create and Link an External Style 8
Sheet
HTML 190: Creating a Second Web Page 8
HTML 192: Plan Ahead Box (Critical Thinking): Determine What Styles Are Needed 8
for the Second Web Page
HTML 198: Adding a Link, Border Spacing, Padding, and Row Color 9
HTML 199: Plan Ahead Box (Critical Thinking) 9
HTML 201: Adding a Caption and Spanning Rows 9
HTML 203: Plan Ahead Box (Critical Thinking) 10
End of Chapter Material 10
Glossary of Key Terms 12

Students will have mastered the material in Chapter Four when they can:
 Define table elements
 Describe the steps used to plan, design, and
code a table
 Create a borderless table for a horizontal
navigation bar with text links
 Create an external style sheet to define
styles across a Web site
 Utilize classes to give you more control over
styles
 Link an external style sheet to Web pages
where you want its styles applied
 Create a table with borders and insert text
 Use the box-shadow property to alter the
appearance of an image
 Alter the spacing between and within cells
using the border spacing and padding
properties
 Utilize inline styles to alter the style of
individual elements on a Web page
 Add background color to rows and cells
 Insert a caption below a table
 Create headings that span rows using the
rowspan attribute

LECTURE NOTES
 Review what students will learn about external (linked) style sheets and tables in this project

TEACHER TIP
Explain that tables are used to present information in a clear, concise way. While students will be
familiar with tables that contain numerical values, for example — as an analogy, use spreadsheets —
students will be less familiar with the use of tables in creating special HTML design effects.
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 3 of 12

CLASSROOM ACTIVITIES
1. Quick Quiz:
1) What are some of the properties and attributes of tables and paragraphs? (Answer: Borders,
colors, spacing, and adding a table caption)

LECTURE NOTES
 Discuss the borderless table on the Web page in Figure 4-1a
 Review the two borderless tables used on the other three Web pages in Figures 4-1b, 4-1c, and 4-1d
 Discuss the relationship between the four pages and how they are linked to one another

FIGURES: 4-1a, 4-1b, 4-1c, 4-1d

LECTURE NOTES
 Review the general guidelines for students to keep in mind as they create a Web page

LECTURE NOTES
 Define external style sheet, reviewing the other kinds of style sheets (inline and embedded)
discussed in Chapters 2 and 3

TEACHER TIP
Explain to students that external style sheets are ideal when the style is applied to many pages. With an
external style sheet, students can change the look of an entire Web site with changes to one file. Each
page must link to the style sheet using the <link> tag. An external style sheet can be written in any text
editor, should not contain any html tags, and should be saved with a .css extension. Any number of
external style sheets can be associated with a document in HTML. The style sheet language defines how
multiple external style sheets interact (for example, the CSS "cascade" rules). Authors may specify a
number of mutually exclusive style sheets called alternate style sheets. Users may select their favorite
among these depending on their preferences. For instance, an author may specify one style sheet
designed for small screens and another for users with weak vision (e.g., large fonts). User agents should
allow users to select from alternate style sheets. The author may specify that one of the alternates is a
preferred style sheet. User agents should apply the author's preferred style sheet unless the user has
selected a different alternate.

CLASSROOM ACTIVITIES
1. Quick Quiz:
1) What is an external style sheet used for? (Answer: To define styles for multiple pages in a Web
site)

LECTURE NOTES
 Introduce tables as resources for organizing information on a Web page
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 4 of 12

 Compare Figures 4-2a and 4-2b to show the range of complexity and formatting available with
tables
 Use Figure 4-3 to show an image and text positioned in the table
 Define all of the following: row, column, cell, heading cell, and data cell
 Use Figures 4-4a, 4-4b, and 4-4c to review examples of all these elements within sample tables
 Use Figures 4-5a, 4-5b, and 4-5c to review the application of styles to table elements
 Define each of the following: table border, table header, and table caption
 Use Figure 4-6 to discuss the table border, table heading, and table caption
 Explain the function of the rules attribute in determining which internal borders to show in a table

FIGURES: 4-2a, 4-2b, 4-3, 4-4a, 4-4b, 4-4c, 4-5a, 4-5b, 4-5c, 4-6

BOXES
1. BTW: Tables. Discuss the uses to which Web page developers put tables on a Web page.

2. BTW: Table Elements. Encourage students to search the Web for HTML Table Elements or HTML
Table Properties in order to learn more about these concepts.

CLASSROOM ACTIVITIES
1. Group Activity: If possible, show students examples of pages that use text-wrapping to control the
positioning of text and images alongside versions of the same pages that use tables to provide more
control over the placement of the Web page elements.

LAB ACTIVITIES
1. Give students the task of finding two tables on different Web pages that feature heading and data
cells.

LECTURE NOTES
 Review the three steps in the table-creation process
 Discuss the circumstances in which a table should be used on a Web page
 Compare and contrast the presentations of the information in Figures 4-7a and 4-7b and assess the
advantages offered by the table in Figure 4-7a
 Discuss the utility of sketching out a table on paper before writing the HTML code
 Discuss Figures 4-8a through 4-8c in conjunction with Figure 4-9 to illustrate the move from a
sketch of a table to its HTML implementation
 Use Table 4-1 to review the four main HTML tags used to create tables, and discuss the use of each
of these tags in an HTML file in Figure 4-10a and in the resulting Web page in Figure 4-10b
 Define the function of each of the following tags: <tr> and </tr>, <th> and </th>, and <td> and </td>
 Use Table 4-2 to review the attributes for the table tags and their functions

FIGURES: 4-7a, 4-7b, 4-8a, 4-8b, 4-8c, 4-9, 4-10a, 4-10b

TABLES: 4-1, 4-2

BOXES
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 5 of 12

1. BTW: Table Tutorial. Encourage students to search the Web for tutorials that will step them through
the process of creating a table.

2. BTW: Table Borders. Encourage students to experiment with table borders in order to see firsthand
what does — and does not — work.

TEACHER TIP
Although the advantages of the use of tables in Web pages are numerous, caution students against
assuming that they must use a table for formatting the contents of their Web pages.

CLASSROOM ACTIVITIES
1. Group Activity: Provide students with types of different content and ask them to determine which of
these can benefit from the use of tables. Also, brainstorm with students other instances in which a table
might be more useful than a bulleted list, and vice versa.

2. Group Activity: Provide students with different content and ask them to sketch out tables that
correspond to the information to be presented.

3. Quick Quiz:
1) Which <table> </table> tags attribute defines space between a cell’s content and its border in
pixels? a) cellspacing b) border spacing c) alignment d) resolution (Answer: b)
2) Creating tables for a Web page is a three-step process. True or false? (Answer: True)

LAB ACTIVITIES
1. Assign students the task of finding one example of a poorly designed table and one example of a well-
designed table on the Web. As an alternative, find one well-designed table and one poorly designed
table on the Web, give students the URLs of each Web page, and give them the assignment of
comparing and contrasting the two tables.

2. Ask students to find examples of Web pages that implement some of the attributes listed in Table 4-2
(e.g., align, bgcolor, border, cellspacing, cellpadding, colspan, rowspan).

LECTURE NOTES
 Review the formatting suggestions, including the decisions about whether to use borders, what
links are needed on a Web page, and what table formatting to use

LECTURE NOTES
 Review the content proposed for the home page of the Oceanside Hotel and Sports Club Web site
 Review the steps to start Notepad++
 Use Table 4-3 to review the HTML tags entered to define the structure of the site's home page
 Review the steps to enter HTML tags to define the Web page structure, and use Figure 4-11 to show
the code entered in Notepad++
 Review the steps to save an HTML file
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 6 of 12

 Use Table 4-4 to review the box-shadow property and use Figures 4-12a through 4-12c to show the
box-shadow property examples
 Use Figure 4-13 in conjunction with Table 4-5 to illustrate inserting and centering an image, and
styling it with a box-shadow
 Use Figure 4-14 to review the image positioned in the home page with a borderless table, and to
show a horizontal menu bar with text links in place
 Use Figure 4-15 in conjunction with Table 4-6 to illustrate creating a horizontal menu bar with
image links
 Use Figure 4-16 in conjunction with Table 4-7 to illustrate adding paragraphs of text to the Web
page
 Review the step to save the HTML file using Figure 4-17
 Use Figure 4-18 to illustrate viewing the Web page, and review the steps to test the links on the
Web page

FIGURES: 4-11, 4-12a, 4-12b, 4-12c, 4-13, 4-14, 4-15, 4-16, 4-17, 4-18

TABLES: 4-3, 4-4, 4-5, 4-6, 4-7

TEACHER TIPS
If possible, demonstrate the importance of setting the width of <td> tags as a percentage by showing the
effect of resizing pages that use percentage widths and pages that use fixed/absolute widths.

Explain that menu bars, also known as navigation bars or nav bars, are important insofar as they give
Web page visitors the option of moving easily from one Web page to another without having to search
for links. The simplest early Web sites often depended on a basic link at the bottom of the Web page,
which stated, “Click here for the next page,” and a link to a list of table of contents hyperlinks, which
was a home page at the beginning of the Web site. As Web-page designers realized that their Web sites
did not need to duplicate the linear quality of a conventional book, however, some designers began to
use “site maps,” which were graphical representations of their Web sites’ material. The earliest Web
page visitors, however, used modems that downloaded images only very slowly; further, Web sites do
not always lend themselves to being mapped. Menu bars have solved the problem of loading quickly
and providing the sense of location that visitors want.

BOXES
1. BTW: Navigation. Discuss the research results about the usability of Web page navigation and
emphasize the need for, above all, options to be easy for users to locate.

CLASSROOM ACTIVITIES
1. Group Activity: Discuss with students experiences they have had with Web sites whose links failed,
and the impression that left in the students’ minds about that site.

2. Critical Thinking: If possible, demonstrate the importance of setting the width of the columns for the
pipe symbols to 1% by showing what happens when the columns are not set to 1% and all of the cells in
the table are spaced evenly. What would the menu bar look like that would result if you did not specify
1% as the WIDTH for the cell containing the | symbol?
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 7 of 12

LAB ACTIVITIES
1. Assign students the task of finding more information on the Web about the studies conducted to
assess the best location on a Web page for navigation bars and lists. Ask them to read one of the studies
and write a brief summary of the findings.

LECTURE NOTES
 Explain the use of external style sheets for controlling the consistency and look of pages across a
Web site
 Review the two steps in the process of creating an external style sheet and linking it to the relevant
Web pages
 Compare the work required to propagate a change across a Web site that uses external style sheets
to the work required to change all of the styles individually inserted into multiple Web pages
across a site
 Review the syntax of the <link /> tag

BOXES
1. BTW: Classes. Point out to students that classes are named with a period after the definition of the
element.

CLASSROOM ACTIVITIES
1. Critical Thinking: The most beneficial feature of the external style sheet is that you can easily change
the appearance of all Web pages into which the style sheet is linked just by changing the external style
sheet. What are some other beneficial features of external style sheets?

LECTURE NOTES
 Review the advice about determining what styles are shared across the Web pages and what styles
(or elements) will differ, and on what pages

LECTURE NOTES
 Discuss the placement of styles in the body element
 Use Figures 4-19 and 4-20 in conjunction with Table 4-8 to illustrate creating an external style sheet
 Suggest to students the insertion of styles in order (body, paragraphs, links, and tables) in the
external style sheet, and review the syntax of the styles on page HTML 184
 Use Figures 4-21 and 4-22 to show the externally defined styles in use
 Review the syntax of the <link /> tag on page HTML 187
 Use Figure 4-23 to illustrate linking to an external style sheet
 Remind students of the importance of validating their HTML file to ensure that it meets current
standards, and review the steps to validate a Web page
 Review the steps to print an HTML file and use Figure 4-24 to show the resulting printout of the
HTML file
 Review the steps to view, test, and print a Web page, and use Figure 4-25 to show the resulting
printout of the Web page
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 8 of 12

FIGURES: 4-19, 4-20, 4-21, 4-22, 4-23, 4-24, 4-25

TABLE: 4-8

TEACHER TIP
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 ultimately is viewed in a browser. It is a good idea to view and test completed pages in Firefox,
Internet Explorer, Chrome, and Safari to make sure that there are no unexpected effects in either
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.

BOXES
1. BTW: Adding Comments. Discuss the use of the comment tags to add information to your code.

2. BTW: Colors. Discuss the use of the eyedropper tool in an image editing software application like
Photoshop to determine the precise color in an image.

3. BTW: External Style Sheet Validator: Refer students to the CSS validator available from the w3.org
validation service.

LECTURE NOTES
 Remind students that the external style sheet is the most powerful and lowest precedence style
sheet, and what the implications of that precedence are

LECTURE NOTES
 Use Figure 4-26 to show the horizontal menu bar of text links that serves on each of the second-
level pages to connect those pages to the rest of the site
 Review the steps to copy and paste HTML code to a new file, and use Figure 4-27 to show the
HTML code for the new file
 Compare and contrast the tables in Figures 4-28a and 4-28b
 Use Table 4-9 to review the HTML tags and text used to create the table with borders and insert text
into cells, and use Figure 4-29 to show the code entered in Notepad++
 Review the steps to save, validate, view, and print a Web page and use Figures 4-30 and 4-31 to
show the resulting printouts
 Use Figures 4-32a and 4-32b to illustrate testing the links on the Web page

FIGURES: 4-26, 4-27, 4-28a, 4-28b, 4-29, 4-30, 4-31, 4-32a, 4-32b

TABLE: 4-9
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 9 of 12

CLASSROOM ACTIVITIES
1. Class Discussion: Show students a variety of tables with and without borders and discuss with them
which ones are effective as they are, and which ones need to have borders added/removed.

LAB ACTIVITIES
1. Give students the task of finding two or three instances of tables on Web pages that either have
borders and should not, or that do not have borders and should.

LECTURE NOTES
 Remind students of the ways in which they can override the styles in an external style sheet (e.g.,
formatting attribute, inline style, embedded style sheet)

LECTURE NOTES
 Define border spacing and padding, and use Figures 4-33a and 4-33b to illustrate the use of the
corresponding properties attribute to affect a table’s appearance
 Review the step to open an HTML file, and use Figure 4-34 to display the HTML file opened in
Notepad
 Review the steps to link to an external style sheet
 Use Figure 4-35 to illustrate adding border spacing, padding, and row color to a table
 Review the steps to save, validate, print, and view the HTML file and print the Web page

FIGURES: 4-33a, 4-33b, 4-34, 4-35

CLASSROOM ACTIVITIES
1. Quick Quiz:
1) What does border spacing specify? (Answer: The distance between the borders of adjacent cells
in a table)

2. Critical Thinking: Under what circumstances are border spacing and padding not useful properties to
apply to a table?

LAB ACTIVITIES
1. Give students a code snippet and the opportunity to experiment with the border spacing and padding
properties, using extreme values with each property to demonstrate the effect of each on the rendering
of the table.

LECTURE NOTES
 Review with students how to determine when to use (or not use) border spacing and padding

LECTURE NOTES
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 10 of 12

 Explain the function of the rowspan and colspan attributes

 Compare and contrast Figures 4-36 and 4-37 to show the Web page as it is saved and how it will
appear after the rowspan attribute is in place
 Use Figure 4-38 to show a table design sketched to include spanned rows
 Review the steps to open an HTML file, and link the external style sheet
 Discuss the syntax for adding a caption to a table, and review both of the attributes used to place
captions in relation to the table
 Use Figure 4-39 to illustrate adding a table caption and use Figures 4-40 and 4-41 to illustrate
creating the headings that span rows
 Use Figure 4-42 to illustrate adding the bolder class to data cells
 Review the steps to save, validate, and print the HTML file, and the steps to view and print the Web
page using Figure 4-43
 Review the steps to quit Notepad++ and a browser

FIGURES: 4-36, 4-37, 4-38, 4-39, 4-40, 4-41, 4-42, 4-43

BOXES
1. BTW: Row and Column Spanning. Refer students to the Web for more information about row and
column spanning.

CLASSROOM ACTIVITIES
1. Class Discussion: Provide students with different content that requires the use of spanning rows and
columns and ask them to sketch out tables that correspond to the information to be presented.

2. Quick Quiz:
1) What does the rowspan attribute of the <td> or <th> tag do? (Answer: It sets the number of
rows spanned by a cell.)

3. Critical Thinking: Are there particular kinds of uses of tables that lend themselves more readily than
others to the spanning of rows and/or columns?

LAB ACTIVITIES
1. Ask students to find two or three examples of tables on Web pages that utilize the colspan and
rowspan attributes.

LECTURE NOTES
 Review the formatting choices to make as you prepare a table for a Web page, including captions,
row and column spanning, and colored backgrounds

 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.
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 11 of 12

 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.
HTML, XHTML, and CSS, 7th Edition Instructor’s Manual Page 12 of 12

 border spacing (HTML 198)

 cell (HTML 161)
 colspan attribute (HTML 201)
 column (HTML 161)
 data cell (HTML 161)
 external style sheet (HTML 159)
 heading cell (HTML 161)
 padding (HTML 198)
 row (HTML 161)
 rowspan attribute (HTML 201)
 table border (HTML 163)
 table caption (HTML 163)
 table header (HTML 163)
 tables (HTML 159)
 <td> and </td> (HTML 166)
 <th> and </th> (HTML 166)
 <tr> and </tr> (HTML 166)

Top of Document