PPT 1.1
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
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
202: Create an Ordered List
2
204: Create an Unordered List
3
206: Creating a Description List
4
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
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 2 of 12
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit G when they can:
• Create an ordered list
• Create an unordered list
• Create a description list
• Create a navigation bar using a list
• Insert a table
• Debug tables
• Span columns and rows
• Format a table with CSS
• Apply a table-like structure to other
elements
2
2
20
0
02
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
O
O
Or
r
rd
d
de
e
er
r
re
e
ed
d
d
L
L
Li
i
is
s
st
t
t
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.
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.
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?
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 3 of 12
2. Quick Quiz:
2
2
20
0
04
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
U
U
Un
n
no
o
or
r
rd
d
de
e
er
r
re
e
ed
d
d
L
L
Li
i
is
s
st
t
t
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
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 4 of 12
CLASSROOM ACTIVITIES
1. Quick Quiz:
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.
2
2
20
0
06
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
D
D
De
e
es
s
sc
c
cr
r
ri
i
ip
p
pt
t
ti
i
io
o
on
n
n
L
L
Li
i
is
s
st
t
t
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.
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
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
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 5 of 12
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
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:
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.
2
2
20
0
08
8
8:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
N
N
Na
a
av
v
v
B
B
Ba
a
ar
r
r
U
U
Us
s
si
i
in
n
ng
g
g
a
a
a
L
L
Li
i
is
s
st
t
t
LECTURE NOTES
• 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.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 6 of 12
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:
2
2
21
1
10
0
0:
:
:
I
I
In
n
ns
s
se
e
er
r
rt
t
t
a
a
a
T
T
Ta
a
ab
b
bl
l
le
e
e
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.
• 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.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 7 of 12
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
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:
2
2
21
1
12
2
2:
:
:
D
D
De
e
eb
b
bu
u
ug
g
g
T
T
Ta
a
ab
b
bl
l
le
e
es
s
s
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.
• 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.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 8 of 12
• 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.
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
2
2
21
1
14
4
4:
:
:
S
S
Sp
p
pa
a
an
n
n
C
C
Co
o
ol
l
lu
u
um
m
mn
n
ns
s
s
a
a
an
n
nd
d
d
R
R
Ro
o
ow
w
ws
s
s
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:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 10 of 12
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.
2
2
21
1
16
6
6:
:
:
F
F
Fo
o
or
r
rm
m
ma
a
at
t
t
a
a
a
T
T
Ta
a
ab
b
bl
l
le
e
e
w
w
wi
i
it
t
th
h
h
C
C
CS
S
SS
S
S
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.
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.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 11 of 12
CLASSROOM ACTIVITIES
1. Quick Quiz:
2
2
21
1
18
8
8:
:
:
A
A
Ap
p
pp
p
pl
l
ly
y
y
a
a
a
T
T
Ta
a
ab
b
bl
l
le
e
e–
–
–L
L
Li
i
ik
k
ke
e
e
S
S
St
t
tr
r
ru
u
uc
c
ct
t
tu
u
ur
r
re
e
e
t
t
to
o
o
O
O
Ot
t
th
h
he
e
er
r
r
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
ts
s
s
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.
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:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit H Page 12 of 12
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
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.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
Top of Document