SOLUTION MANUAL FOR HTML5 AND CSS3

ILLUSTRATED COMPLETE 2ND EDITION VODNIK

1305394046 9781305394049
Full download link at:
Solution manual: https://testbankpack.com/p/solution-manual-for-html5-and-css3-
illustrated-complete-2nd-edition-vodnik-1305394054-9781305394056/
Test bank: https://testbankpack.com/p/test-bank-for-html5-and-css3-illustrated-
complete-2nd-edition-vodnik-1305394046-9781305394049/

HTML5 and CSS3 – Illustrated, 2nd Edition

Unit H: Organizing Content with Lists and Tables

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.

Unit Objectives 2
202: Create an Ordered List 2
204: Create an Unordered List 3
206: Creating a Description List 4
PPT 1.1
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 2 of 12

208: Create a Nav Bar Using a List 5

210: Insert a Table 6
212: Debug tables 7
214: Span Columns and Rows 8
216: Format a Table with CSS 10
218: Apply a Table-Like Structure to Other Elements 11
End of Unit Material 12
Glossary of Key Terms 12

Students will have mastered the material in Unit G when they can:
 Create an ordered list  Debug tables
 Create an unordered list  Span columns and rows
 Create a description list  Format a table with CSS
 Create a navigation bar using a list  Apply a table-like structure to other
 Insert a table elements

LECTURE NOTES
 Introduce the concept of an ordered list.
 Provide an overview of the structure of an ordered list, explaining that this type of list is created
using the <ol> element and that each item in the list is created using the <li> element.
o Point out that all the li elements for a list must be nested within the opening and closing <ol>
tags.
o Point out that the content of each list item is contained between opening and closing <li> tags.
 Explain that the default marker for each list item is determined by the user agent and is typically
Arabic numerals. Point out that a specific marker can be set using the CSS list-style-type property.
Refer to TABLE H-1 to discuss widely supported values for the CSS list-style-type property for the
ol element.
TEACHER TIP
Point out that the start attribute receives a number as a value, which is used to specify the start
number or alphabetical character for the list.

FIGURES: H-1, H-2, H-3

TABLE H-1: Widely supported values for the CSS list-style-type property for the ol element

BOXES:
1. Quick Tip: Note that each h3 heading is grouped with its related elements using the semantic
section element, which helps user agents identify a discrete unit of related content within a
larger document.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 3 of 12

2. Quick Tip: Developers commonly use this rule to ensure consistency in ordered lists across
browsers and devices.
3. Quick Tip: To increase the distance between list item markers and content, add padding to the li
elements.

CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to consider whether it is possible to nest one ordered list in another
ordered list. How can they accomplish this? How should each of the lists be numbered?

2. Quick Quiz:
a. T/F An ordered list is created using the <ol> tag. (T)
b. T/F An ordered list cannot include more than 100 elements. (F)
c. T/F The list-style-type property is used to set the marker for each list item. (T)
d. If you remove the default numbering, you are required to specify the __________ for each
ordered list in your document. (Answer: list-style-type)

LECTURE NOTES:
 Introduce the concept of an unordered list.
 Provide an overview of the structure of an unordered list, explaining that such a list is created using
the <ul> element and that each item in the list is created using the <li> element.
o Point out that all the li elements for a list must be nested within the opening and closing <ul>
tags.
o Point out that the content of each list item is contained between the opening and closing <li>
tags.
 Explain that each list item is displayed with a bullet at the start of each line. Point out that the
default bullet character is a solid circle, but a specific bullet shape can be set using the CSS list-style-
type property.

TEACHER TIP
Point out that the one disadvantage to using custom bullets is that you cannot set the height and
width attributes of the bullet image.

 Use TABLE H-2 to discuss the values of the CSS list-style-type property for the ul element.

FIGURES: H-4, H-5, H-6

TABLE H-2: Values for the CSS list-style-type property for the ul element
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 4 of 12

BOXES:
None

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F The tag used for list items in an unordered list is different from the one used in an
ordered list. (F)
b. T/F The default bullet character is a solid circle. (T)
c. T/F The bullet character can be set to an empty circle by setting the value of the list-style-
type property to disc. (F)

2. Critical Thinking: Suppose that you are creating a website for an organization. They want the site to
include a photo gallery providing links to each of the images. Each link includes the date and context in
which the photo was taken, as well as a thumbnail of the photo. Is it possible to create such a web page
using an unordered list? If not, explain why. Otherwise, explain how you can create the web page.

LAB ACTIVITY
1. Ask students to add their CV to their personal web page. Instruct them that any information on the
CV that has a specific timeline, such as education or work experience, should be listed in a
numbered list, starting with their most recent experience. You can specify the type of marker to
use, or let students pick their own. Any information on the CV that does not have a specific
timeline, such as skills or spoken languages, should be included in a bulleted list. Once again, you
can specify which bullet students should use or let them select their own.

LECTURE NOTES
 Explain the concept of a description list as a list that includes name-value pairs for each list item.
Point out that this was previously known as a definition list due to its originally intended use.
 Provide an overview of the structure of a description list, explaining that such a list is created using
the <dl> element, and that each item in the list contains a term defined using the <dt> element, and
a description defined using the <dd> element.
TEACHER TIP
Explain that you can provide multiple descriptions for each item included in a description list by
including multiple <dd> elements following a <dt> element.
 Point out that the default display layout of description list items has the second line, which is the
description line, indented beneath the first line, which is the term line, and includes an additional
space between each item-description pair.
TEACHER TIP
Tell students that the closing <dt> and <dd> tags aren't required in HTML but these tags are
required in XHTML. Point out that it is considered good practice to include these tags because the
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 5 of 12

tags help the developer and others stay oriented when reading the code. Additionally, the closing
tags are required in order to apply a CSS style sheet to these tags.

FIGURES: H-7, H-8, H-9

BOXES
1. Quick Tip: Starting with HTML5, dl is recommended as a semantic marker for any content that
includes items and descriptions.
2. Quick Tip: A description list item can include multiple dt items (for instance, for a term with
multiple spellings) and/or multiple dd items (for instance, to show multiple definitions of a term).
3. Clues to Use: Specifying custom bullets
In addition to choosing from the standard selection of bullet characters using the list-style-type
property, you can instead choose to specify an image to display as the bullet character using the
list-style-image property. The syntax is the same as that for specifying a background image: the
text url followed by the path and filename of the image file, enclosed in quotes and parentheses.
For instance, the code
ul {
list-style-image:url(“images/browntri.gif”);
}
specifies the file browntri.gif, located in the images folder, as the bullet character for unordered
lists.

CLASSROOM ACTIVITIES
1. Classroom discussion: Have the class brainstorm to name at least fifteen websites that use a
description list. What kind of information does each description list include?
2. Quick Quiz:
a. T/F Each term in a description list must include at least one description. (F)
b. T/F Like ordered and unordered lists, description lists use the li element to mark list items.
(F)
c. Description lists were previously known as lists due to their originally intended use.
(definition)

LAB ACTIVITY
1. Ask students to create a telephone directory of all the students in the class using a description list.
The list may include multiple phone numbers for each student, but the type of phone number
included must be specified in the list.

LECTURE NOTES
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 6 of 12

 Provide examples of situations in which web pages do not appear to include lists, but would benefit
from being marked up using list elements.
 Explain why it may be beneficial to mark a navigation bar as an unordered list.
 Demonstrate to students how the style rule included in Step 6, on Page 208, causes a list of links to
be rendered to look like a navigation bar.

FIGURES: H-10, H-11, H-12, H-13

BOXES:
1. Trouble: This is the <ul> tag you entered in step 1.
2. Clues to Use: Creating nested lists

CLASSROOM ACTIVITIES
1. Critical Thinking: In the lesson, you learned how to use a list to create a navbar. Can you use a list to
create a nav bar placed in a vertical column to the left of the rest of the web page? How can you
accomplish this?
2. Quick Quiz:
a. My marking a nav bar using the ul and li element, you give the __________ meaning to the nav
bar. (Answer: semantic)
b. T/F In order to display multiple elements on a single line the CSS display property should be
set to one_line. (F)
c. T/F An unordered list must always have some graphic representation of a bullet. (F)

LECTURE NOTES
 Explain that HTML information can be presented as a table. Explain the terms row, column, and
cell in terms of how they are applied to HTML tables.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 7 of 12

 Introduce the elements used when creating tables in HTML, including <table>, <th>, <tr> and <td>.
 Explain how to add semantic information to a table by using the thead, tbody, and tfoot elements.
 Point out that the browser calculates the number of columns based on the number of cells you enter
in each row, so the number of columns does not need to be specified.
TEACHER TIP
Point out that all <td> elements must be enclosed within <tr> elements. The width of the table is
determined by the row including the largest number of table data elements. Therefore, if students
wish to create an empty cell which is not at the end of the row, it must be defined by <td></td>
with no content between the tags.

 Explain that the border of tables and other contained elements can be set using the CSS border
property.

FIGURES: H-14, H-15, H-16

TABLE H-3: HTML Table Structuring Elements

BOXES:
1. Quick Tip: Table content is placed between opening and closing table tags.
2. Quick Tip: The thead and tbody elements group table rows into sections.
3. Quick Tip: The number of cells in each row is sufficient for a browser to calculate the number of
columns; therefore, no element is required to specify the number or arrangement of columns.
4. Quick Tip: Specifying a border for the table element creates a border around the outside of a
table, but not around the individual cells within it.

CLASSROOM ACTIVITIES
1. Critical Thinking: Consider creating a web page for a user agent that does not support CSS. Can you
create a multi-column layout on such a web page? How? (Hint: Use tables.)
2. Quick Quiz:
a. T/F The data contained between opening and closing <th> tags is not displayed by a web
browser. (F)
b. T/F The thead, tbody, and tfoot elements, do not add any information to the web page as
rendered by a browser. (T)
c. T/F You must always specify the number of columns in a table using the column attribute.
(F)
d. T/F A table cannot include empty cells. (F)

LECTURE NOTES
 Explain to students that an error in the HTML code for a table can result in some unusual issues
when the table is rendered by a browser.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 8 of 12

 Point out that if too many or too few cells are included in a row when compared to other rows in
the table, then the row with the error could have a blank area if too few cells and a protruding cell
if too many cells.
 Tell students to be sure to always place the closing table tag in the proper location because omitting
or improperly placing the closing tag could result in data that is hard to read when rendered by a
browser.
 Discuss the importance of viewing the web page in a browser in order to troubleshoot errors in
table code. Point out that some errors are easy to recognize as a result of how the error appears in a
browser, making the error easier to fix.

TEACHER TIP
Make sure students understand the structure of the table code. Show students how to read the code
and as you do create a conceptual drawing of the table that will be created by the code.

FIGURES: H-17, H-18, H-19, H-20

BOXES:
1. Quick Tip: You can visualize the role of each element in a table by opening your browser’s
developer tools, then mousing over each element to highlight it on the page.
2. Quick Tip: The extra cell is narrower than the other cells because by default, browsers set width
to fit the content in the widest cell of a column.
3. Trouble: If your table does not match appear as expected, use FIGURE H-14, which shows the
completed code for the table, to correct any errors.
4. Clues to Use: Resisting the temptation to use tables for layout
You can style table borders with all the properties that are available for other web page
elements, including removing borders completely. In the early days of the web, many
developers combined spanned rows and columns with invisible borders to enable the
positioning of text, images, and other elements side by side, and in specific areas of a web page.
However, as CSS grew and user agent support for it matured, the CSS position and float
properties became the preferred method for creating visual layouts. While you can place
elements in arbitrary locations by manipulating the number and sizes of rows and columns in a
table, doing so erroneously assigns semantic meaning to your web page content; this suggests
that user agents should attempt to understand it as a table of related data. In addition, this use of
a table creates particularly strong challenges for non-visual user agents such as screen readers in
conveying the relationships between web page elements. For these reasons, you should restrict
your use of tables only to data whose meaning can be best understood in a grid layout.

CLASSROOM ACTIVITIES
1. Critical Thinking: Why tables were often used to layout web pages? Is this more efficient than using
CSS position and float properties? Why or why not? Explain.
2. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 9 of 12

a. Once a table is rendered in a browser, you can use a browser’s __________ to visualize the role
of each element in a table. (Answer: developer tools)
b. T/F In order for a row to appear as a rectangle, each row must have the same number of
cells as the other rows in the table. (F)
c. T/F You can count the number of columns to figure out how many cells you need in each
row. (F)
d. T/F You can often see errors in a table once the table is rendered in a browser. (T)

LECTURE NOTES:
 Explain to students that you can format a cell to be displayed across multiple rows or columns. Give
examples of situations in which such formatting might make the table more usable.
 Demonstrate how to merge a cell across multiple columns using the colspan attribute and how to
merge a cell across multiple rows using the rowspan attribute.
 Explain to students the math of calculating how many columns a cell should span in order for a row
to occupy the same number of cells as other rows in the table. Do the same for cells spanning
multiple rows.

FIGURES: H-21, H-22, H-23, H-24

BOXES:
1. Clues to Use: Calculating table columns
When you use colspan and rowspan attributes, you still need to confirm that your content fits the table
dimensions. To do so, start by adding the values for all colspan attributes used in the row. Next, add the
number of th or td elements in the row without colspan attributes. Finally, add the number of th or td
cells in earlier rows whose content is part of the current row due to rowspan values. In short:
current row colspan total + cells in current row without colspan + cells spanning from previous rows with
rowspan = total columns
Running this calculation on any row of your table should produce the same value as for any other row.
If one or more rows appear to be shorter or longer than the surrounding rows, it can be helpful to
preview your web page in a browser and inspect the table to identify the cell where the contents of one
row no longer corresponds to the content above or below it. You may simply need to adjust a rowspan
or colspan value, or add or remove a cell.
In a table that doesn’t use colspan or rowspan attributes, you can verify that each row includes
content for every column by ensuring that each row contains the same number of th or td elements.

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F The colspan attribute is included in the tr element. (F)
b. T/F The rowspan attribute is included in the th element. (T)
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 10 of 12

c. T/F The colspan attribute is included in the td element. (T)

d. T/F The rowspan and colspan attributes can receive a percentage value. (F)
2. Classroom discussion: Have students discuss the criteria for making cells span multiple columns or
rows. When is this beneficial to the layout of the table, and when does it make the table more
cumbersome to look at?

LAB ACTIVITY
1. Ask students to add a table representing their weekly schedule to their personal website. Point out
that you only want them to demonstrate use of tables, and that they do not need to include any
private or personal information in this table. Point out that students can define the time units in
their schedule as they wish, and use spanning in order to create longer blocks of time.

LECTURE NOTES:
 Provide an overview of the various aspects of an HTML table that can be formatted using CSS,
including font faces, font and background colors, and borders between cells.
 Point out that when styling borders between cells, you can apply a style to the entire table, a table
section, or individual rows or cells.
 Introduce the HTML colgroup and col elements and explain how they can be used to assign a CSS
style to a specific column or group of columns. Specify that by default, each col element applies to a
single column starting from the left side of the table, but that consecutive columns can be grouped
into a single col element by specifying the number of columns to include as a value to the span
attribute.
 Introduce the border-collapse property, and explain to students how it can be used to merge
adjacent borders into a single line. Explain how the various border properties can be used to style
the borders between cells.
 Point out that the width property for a table element controls the width of the entire table.

TEACHER TIP
Introduce students to the CSS vertical-align property, which allows text to be aligned to the top,
middle, or baseline of a cell.

FIGURES: H-25, H-26, H-27

BOXES:
1. Quick Tip: The border-spacing property has no effect when border-collapse is set to collapse,
but specifying a value of 0 ensures that browsers do not create extra space between the table’s
outermost cells and the border of the table element.
2. Quick Tip: Browsers render only the background (and related), border (and related), visibility,
and width CSS properties applied to colgroup and col elements.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 11 of 12

3. Quick Tip: Whenever you add col elements, they must cover all the columns in the table.
Unless all columns are accounted for in col elements, your code won’t validate.

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F You can modify the colors of the border around any cell or group of cells in a table. (T)
b. T/F A col elements must be contained in a colgroup element. (T)
c. To eliminate the default space between the borders of adjacent cells, set the __________
property to __________. (Answer: border-collapse; collapse)
2. Critical Thinking: You want to create a table listing different universities in your state and their
various features. The university names should be listed as the table headings, and the cell for each
university should be surrounded by exactly two borders in the university colors so that the border in
the darker color is double the width of the border in the lighter color. The borders for the rest of the
table cells should be black, and surround each cell from all four sides. How can you achieve this design?

LECTURE NOTES:
 Give examples of situations in which one might want data to appear visually in a grid, even though
it is not tabular data.
 Explain to students how to use CSS in order to style elements in a grid without marking them
semantically as components of a table. Stress that this is accomplished using block level elements,
such as divs, to create a structure that parallels the nesting of table, tr, th, and td elements.
 Be sure students understand that once the div elements have been created in the HTML document,
they need to set the CSS display property to table-cell for elements contain the table-like content,
table-row for the container elements for each row, and table for the main parent element, as shown
in Figure H-29.

FIGURES: H-28, H-29, H-30

BOXES:
1. Quick Tip: Commenting out code keeps the code available in case you later change your mind
and want to use it.

CLASSROOM ACTIVITIES
1. Quick Quiz:
a. T/F In order to have a grid-like display of HTML elements you must use a table. (F)
b. T/F To achieve a grid-like display of non-tabular data you use semantic elements such as div.
(T)
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 12 of 12

c. T/F Any set of elements can be formatted to have a tabular layout. (T)
2. Classroom discussion: Have students discuss the reasons for making sure that only tabular data be
marked as a table. Ask them to give examples of situations in which using a table would cause problems
in rendering a web page, and where using a grid layout without using a table would not cause such
problems.

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.

cell (210) ordered list (202)

column (210) row (210)
definition list (206) unordered list (204)
description list (206)

Top of Document