PPT 1.1
HTML5 and CSS3 – Illustrated, 2nd Edition
Unit B: Structuring Content in a Web document
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
28: Evaluate Web Accessibility Standards
2
30: Incorporate Attributes
3
32: Implement the div Element
4
34: Add HTML5 Semantic Elements
6
36: Use Special Characters
7
38: Specify the Viewport
8
40: Debug your HTML Code
9
42: Validating Your HTML Code
10
44: Create an XHTML Document
11
End of Unit Material
12
Glossary of Key Terms
13
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 2 of 13
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 C when they can:
• Evaluate web accessibility standards
• Incorporate attributes
• Implement the div element
• Add HTML5 semantic elements
• Use special characters
• Specify the viewport
• Debug your HTML code
• Validate your HTML code
• Create an XHTML document
2
2
28
8
8:
:
:
E
E
Ev
v
va
a
al
l
lu
u
ua
a
at
t
te
e
e
W
W
We
e
eb
b
b
A
A
Ac
c
cc
c
ce
e
es
s
ss
s
si
i
ib
b
bi
i
il
l
li
i
it
t
ty
y
y
S
S
St
t
ta
a
an
n
nd
d
da
a
ar
r
rd
d
ds
s
s
LECTURE NOTES
• Explain to students that a user agent is a program or device that interprets Web documents, such as
a browser or vocal page reader.
• Stress that although most users view Web pages using default settings and popular Web browsers,
some users, such as users with disabilities, may use custom browser settings or specialized software
or hardware to access Web pages.
• Note that although laws generally do not require mandatory accessibility standards for Web sites
that are not government owned, it is still recommended that Web pages have a high level of
accessibility in order to widen the potential audience.
TEACHER TIP
Students may be concerned about the difficulty of making a Web site accessible to all users, since
different users may need very different modifications in order to make a Web site accessible to
them. For example, using icons makes a Web page more accessible to people who do not speak the
language in which the page is written, but less accessible to people who are visually impaired.
Explain that it is important to identify the target audience of the Web site and make the Web site
accessible to that audience.
• Explain the idea of a Web page being operable by users. Give examples of modifications that can be
made to a Web page to make it more readily operable by users, such as limited requirement for use
of the mouse and the ability to make changes to automatic scrolling and refreshing rates.
• Note the importance of avoiding certain designs which may trigger unintended physical reactions,
such as elements known to cause seizures.
• Point out the importance of clearly indicating the navigation between pages within the Web site
and external Web pages.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 3 of 13
• In order for Web pages to be robust, or accessed by the widest variety of programs and devices, they
should be coded according to Web standards.
FIGURE: B-1
BOXES
1. Clues to Use: Understanding your role in web accessibility
In addition to Web developers’ work creating a site, other factors significantly influence Web
accessibility. The developers of user agents make decisions that affect how their software and devices
interact with Web content, which impacts whether users can access content in specific ways. In
addition, some Web content is produced using software that automates the Web development
CLASSROOM ACTIVITIES
1. Critical Thinking: Have students assume that they are designing a Web site for a World War II
veterans’ organization. What special features will they include in the design of the Web site in order to
make it accessible to the veterans?
2. Group Activity: Divide the class into small groups. Provide a project plan for a specific Web site, and
ask each group to design a Web site that is accessible to individuals with different characteristics: hard
of hearing, children, elderly, and visually impaired. What aspects of the design are similar to all the
groups, and what aspects are different?
3
3
30
0
0:
:
:
I
I
In
n
nc
c
co
o
or
r
rp
p
po
o
or
r
ra
a
at
t
te
e
e
A
A
At
t
tt
t
tr
r
ri
i
ib
b
bu
u
ut
t
te
e
es
s
s
LECTURE NOTES
• Tell students that an attribute is additional code within an opening element tag that specifies
information about the element.
• Explain that many but not all HTML elements allow you to set attributes.
• Point out that to use an attribute you must provide two pieces of information: an attribute name
and the value you are assigning to the attribute.
• Use FIGURE B-3 to point out that an attribute is placed within an element’s opening tag and to
point out the syntax for an attribute: <element tag [space] attribute name [equal sign] “attribute
value”>
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 4 of 13
• Explain that, in general, meta elements and attributes added to the html element do not change
how a document is rendered.
TEACHER TIP
Use the figures to point out how the indenting helps make the code more readable. Explain that the
indenting is for cosmetic reasons only, that is, to help the developer quickly see the structure of the
document, but that the indenting has no impact on how the code appears when the page is rendered
in a browser.
FIGURES: B-2, B-3, B-4
TABLE B-1: Basic lang attribute values
BOXES
1. Quick Tip: For most editors, you press [Ctrl][Shift][S] (Win) or [command][shift][S] (Mac), type
the new filename, then press [Enter].
2. Trouble: Be sure to click in the <html> tag and not at the end of the DOCTYPE statement.
3. Trouble: Because some code editors indent automatically, you may not need to press [Spacebar]
to indent. Use the figures to check for and match indenting.
4. Quick Tip: The <meta> tag is a one-sided tag, so it does not require a closing tag.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to explain why it is so important to include the attributes added to
FIGURE B-3 and FIGURE B-4. Have students explain what they think would happen if those attributes
were omitted.
2. Quick Quiz:
3
3
32
2
2:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
t
t
th
h
he
e
e
d
d
di
i
iv
v
v
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES
• Give an example of a situation in a web page when you might want to change the presentation of a
section of a Web page that is not itself a single HTML element, e.g., when putting a box around
your name, picture and e-mail address in your personal Web page.
• Show how you can use the div element to group multiple elements of different types (such as those
shown in your previous example) and how you can use this to assign CSS styles to a section of a
Web page.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 5 of 13
TEACHER TIP
Use the figures to point out how the indenting helps make the code more readable. Explain that the
indenting is for cosmetic reasons only, that is, to help the developer quickly see the structure of the
document, but that the indenting has no impact on how the code appears when the page is rendered
in a browser.
FIGURES: B-5, B-6
BOXES
1. Quick Tip: If your code editor indents new elements automatically, you may not need to press
[Spacebar] at all. Remember to compare your code to the figures to confirm indents.
2. Quick Tip: The h2 element marks a heading that’s at the second-highest heading level in the
document.
3. Clues to Use: Writing for the Web
Many users want a process of finding and consuming web content that is dynamic and fast-paced.
When you write content for the web, you should keep this in mind. Web content should generally
be brief and scannable. A user should be able to get the gist of what your page contains with a quick
glance. This allows users to quickly decide to stay on the page if the page contains the information
they’re looking for, or to navigate elsewhere and keep looking. You can make content scannable by
including a short, descriptive heading at the top, and by breaking the content itself into sections
with headings. After writing the actual content, it can be useful to revise it with the goal of
removing half the words. This helps focus your writing and reduces the content of your web page to
the essentials, which makes it easier for web users to scan and read.
After you publish content online, it’s crucial to keep it up to date—out of date information
makes your website’s content seem unreliable. You can minimize the amount of regular updating
you need to do by reducing or eliminating relative references to dates (such as “5 years ago” or “in
18 months”) or labeling specific dates as being in the future (such as “The building will be
completed in 2013.”)
CLASSROOM ACTIVITIES
1. Critical Thinking: What are the implications of including multiple div elements in a single Web
page? Is there any point in nesting div elements one inside the other in order to give different CSS styles
to different groups of elements? Consider these questions with respect to how to structure your web
page.
2. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 6 of 13
d. T/F The div element is the parent of the elements it encloses. (T)
3
3
34
4
4:
:
:
A
A
Ad
d
dd
d
d
H
H
HT
T
TM
M
ML
L
L5
5
5
S
S
Se
e
em
m
ma
a
an
n
nt
t
ti
i
ic
c
c
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
ts
s
s
LECTURE NOTES
• Explain that all HTML elements have semantic value, which means that HTML elements indicate
the meaning of their content.
• Point out that most HTML elements describe their contents semantically, e.g., h1 elements are
assumed to be headings.
• Tell students that, even though the div element has limited semantic value, HTML5 includes a
number of semantic elements that indicate the role of their content
TEACHER TIP
Remind students that the div element is a generic element and does not imply any semantic
meaning. Explain that the div element is used to group content, but the div element does not
indicate any information about the content being grouped and so that is why it is considered to
have limited semantic value.
FIGURES: B-7, B-8
TABLE B-2: Selected HTML5 semantic elements
BOXES
1. Quick Tip: It’s often possible to mark up web page contents semantically in more than one way.
The choice of which elements to use can vary depending on the developer and the site.
2. Trouble: A warning about blocked content might open, depending on your browser settings. If
so, allow blocked content.
CLASSROOM ACTIVITIES
1. Critical Thinking: Look at any website, such as your school or company website. Point to different
content on the page and explain which semantic element you think is used to enclose that content.
Explain why. If you know how, view the code for the page and see if you were correct.
2. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 7 of 13
3
3
36
6
6:
:
:
U
U
Us
s
se
e
e
S
S
Sp
p
pe
e
ec
c
ci
i
ia
a
al
l
l
C
C
Ch
h
ha
a
ar
r
ra
a
ac
c
ct
t
te
e
er
r
rs
s
s
LECTURE NOTES
• Explain to students that although most Web page text is entered into an HTML document, some
characters may be misinterpreted by user agents as being computer instructions. These characters
include ‘<‘ and ‘>’.
• Introduce the concept of character references, which are specially formatted codes that represent
characters in the HTML document character set. Point out the syntax of character references always
begin with an ampersand (&) and end with a semicolon (;). The rest of the code consists of either a
pound symbol (#) followed by a numeric representation of the associated character or an English
language abbreviation for the associated character name.
BOXES:
1. Quick Tip: If you’re using a code editor, the character reference you type may appear as italic.
This will not affect the content when the page is rendered by your browser.
2. Clues to Use: Finding codes for other characters
UTF-8 is the most commonly used character encoding on the web today. This encoding
supports character references for thousands of characters. These symbols may include characters
in different writing systems and international currency symbols, as well as icons and pictograms
for a variety of themes. You can go to unicode.org/charts or fileformat.info to browse supported
characters by subject. Note that not all symbols are displayed in every browser or operating
system. This is because browsers and operating systems use different default fonts, and a given
font may contain character descriptions for some, but not all, UTF-8 characters. For this reason,
it’s important to test a page containing a less-common special character in all browsers that you
anticipate your audience will use to view the page. This lets you confirm that the character is
recognized and displayed when the page is rendered in a browser, or make adjustments if the
character is not recognized.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 8 of 13
LAB ACTIVITY
1. Give students text that includes multiple occurrences of the characters ‘<‘ and ‘>’. For example, you
can use a demo for an if-else clause in a programming language. Ask students to create a Web page in
which they enter the text directly, and another Web page in which they use character references for ‘<‘
and ‘>’, as well as any other relevant characters. What are the differences between the ways the two
Web pages are displayed? Have students discuss how the user agent interpreted the ‘<‘ and ‘>’ characters
when they are typed directly without use of character references.
3
3
38
8
8:
:
:
S
S
Sp
p
pe
e
ec
c
ci
i
if
f
fy
y
y
t
t
th
h
he
e
e
v
v
vi
i
ie
e
ew
w
wp
p
po
o
or
r
rt
t
t
LECTURE NOTES:
• Point out to students that when a browser opens a web page on a mobile device, the browser needs
to figure out to display the page on the smaller screen.
• Explain that some web pages can scale to fit any browser, which makes the web page useable on any
device.
• Tell students that to instruct browsers to display a page at the width of the browser window
without zooming in, they change the viewport settings using a viewport meta element.
• Explain that the viewport is like looking through the web page through an imaginary window, set
to the size of the display on the device you want the page to appear.
TEACHER TIP
Open a web page. Maximize the screen, then resize the screen until it is as small as it can be on the
device you are using. Ask students to notice if any of the web page features change as the page gets
smaller. Point out to students elements that might change, such as the nav bar (which might be
hidden in one icon), images (which might become stacked instead of side by side, and text (which
might be hidden from view if it is not essential to the meaning of the page).
FIGURES: B-11, B-12, B-13
TABLE B-4: viewport attribute properties
BOXES:
1. Trouble: Consult the documentation for your web server if necessary.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 9 of 13
2. Quick Tip: Even though the meta element supports many content value options for viewport,
you usually only need to use the value that sets the width to device-width as you did in this
step.
CLASSROOM ACTIVITIES
1. Quick Quiz:
4
4
40
0
0:
:
:
D
D
De
e
eb
b
bu
u
ug
g
g
y
y
yo
o
ou
u
ur
r
r
H
H
HT
T
TM
M
ML
L
L
C
C
Co
o
od
d
de
e
e
LECTURE NOTES:
• Explain to students that even the most careful developer writes code from time to time that doesn’t
work.
• Point out that a bug is a problem that results from code that is written incorrectly.
• Explain that the process of finding and fixing or removing a bug is known as debugging.
TEACHER TIP
Open the same web page using several different browsers. Have students point out differences they see
when they compare the web page in the different browsers. Be sure students understand that because a
web page looks awesome in one browser, it may not look the same way in a different browser. Explain
that viewing their web pages this way will help them debug the page for cross-browser issues.
FIGURES: B-14, B-15, B-16
TABLE B-5: Common bugs and causes
BOXES:
1. Trouble: If your page does not display as expected, be sure your correct code matches FIGURE
B-16.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 10 of 13
LAB ACTIVITY
1. Give students code for a simple web page with some common errors in the code. Have students
open the web page in a browser and note the errors. Then have students return to the code and
correct the errors. Tell students to alternate between working with the code and viewing the
web page in the browser until all errors have been corrected.
4
4
42
2
2:
:
:
V
V
Va
a
al
l
li
i
id
d
da
a
at
t
ti
i
in
n
ng
g
g
Y
Y
Yo
o
ou
u
ur
r
r
H
H
HT
T
TM
M
ML
L
L
C
C
Co
o
od
d
de
e
e
LECTURE NOTES:
• Explain to students the importance of spotting problems with HTML code and making sure that
users can view your Web pages as expected.
• Present the idea of validation, an automated process of comparing HTML code against the HTML5
coding standards, as a way of finding errors in your code. Tell students validation is a helpful step in
web page development because it not only shows that there is an error, but may identify the specific
source of the problem.
TEACHER TIP
Validate a web page with known errors and use the results to help students see how the information in
the validator can help them find and correct the errors. Try to include an example where the line
associated with the error is not the line where the error occurs. Show students that the line does not
match where the error occurs and show to use the information in that line of code to find where the
error actually is.
FIGURES: B-17, B-18, B–19
TABLE B-6: Common validation errors and warnings
BOXES:
1. Quick Tip: Errors listed by the validator always specify the line and character (“column”)
numbers where it encountered the error. This is sometimes, but not always, the location of the
code you need to fix.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 11 of 13
CLASSROOM ACTIVITIES
1. Quick Quiz:
LAB ACTIVITY
1. Select a Web page of your choice, and validate it using the “validate by URI” tab of
page, copy the source code of the Web page into a new text document and save it. Make a few
changes to the tags included in the copied source code, and then validate the edited Web page.
How did your changes affect the validity of the Web page?
4
4
44
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
X
X
XH
H
HT
T
TM
M
ML
L
L
D
D
Do
o
oc
c
cu
u
um
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Note that XHTML is a markup language intended to make HTML comply with the rules of XML.
• Point out that the way HTML and XHTML are written is very similar, however XHTML requires
additional code in a number or situations.
• Explain to students that converting an HTML document to an XHTML document requires editing
the code to meet all the requirements of an XHTML document, including replacing the HTML
doctype with the XHTML doctype.
TEACHER TIP
The definition of XHTML as complying with the rules of XML means that all Web pages written in
XHTML are valid according to the requirements of HTML, but not all pages written in HTML are
valid according to the rules of XHTML.
• Explain that HTML is a flexible language, and stress the importance of this flexibility. For example,
if a Web-page author made a minor mistake in writing code, user agents would still be able to
display the Web page correctly.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 12 of 13
• Stress that XML does not tolerate errors, and therefore XHTML, which adheres to XML rules, does
not tolerate errors. Specify that this means that if a user agent encounters a coding error in XHTML
code, it must display an error message.
FIGURES: B-20, B-21
TABLE B-7: Difference between HTML and XHTML
BOXES:
1. Quick Tip: Because an XHTML DOCTYPE is so complex, developers generally either copy it
from an online resource and paste it into their code, or rely on a code editor to generate the
DOCTYPE for it.
2. Trouble: Refer to the steps in the previous lesson “Validate your HTML code” as needed to
complete Step 9.
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom Discussion: Look at TABLE B-7, and discuss possible considerations for using XHTML over
HTML. Try to think of specific types of projects that would benefit from being written in XHTML
rather than HTML. Repeat the exercise for HTML.
LAB ACTIVITY
TABLE
B-2 lists specific differences between HTML and XHTML. Ask students to look at the source
code of an HTML Web page of their choice, and to use the information in TABLE
B-2 to determine
whether or not the Web page complies with XHTML rules.
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
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit B Page 13 of 13
•
•
•
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
attribute (30)
bug (40)
character encoding (30)
character reference (36)
debugging (40)
Extensible Hypertext Markup
Language (XHTML) (44)
numeric character reference (36)
screen reader (28)
semantic (34)
semantic element (34)
user agents (28)
validation (42)
viewport (38)
Top of Document
HTML5 (34)
named character reference (36)
viewport meta element (38)