HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 1 of 15
HTML5 and CSS3 – Illustrated, 2nd Edition
Unit F: Inserting and Working with Links
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
140: Understand Links
2
142: Create Relative Links
3
144: Create Absolute Links
5
146: Change CSS display type
6
148: Style Links with a Pseudo-Classes
7
150: Style Multiple Links
9
152: Open Links in New Tabs
10
154: Link Within a Document
11
156: Add Navigational Accessibility
12
End of Unit Material
14
Glossary of Key Terms
14
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 2 of 15
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 E when they can:
• Understand links
• Create relative links
• Create absolute links
• Change CSS display type
• Style links with a pseudo-classes
• Style multiple links
• Open links in new tabs
• Link within a document
• Aid navigational accessibility
1
1
14
4
40
0
0:
:
:
U
U
Un
n
nd
d
de
e
er
r
rs
s
st
t
ta
a
an
n
nd
d
di
i
in
n
ng
g
g
L
L
Li
i
in
n
nk
k
ks
s
s
LECTURE NOTES
• Introduce the concept of hypertext, which refers to links in and between text-only documents.
• Explain that, though the World Wide web was built on hypertext, you can create links on any
visible web page element and to any document type, but the underlying power remains the same –
providing users with options for more information while displaying only a small amount of data.
• Provide students with an overview of how a link is created. Make sure to introduce the a element
and explain the importance and functionality of the href attribute and present some of the common
values for this attribute. Use TABLE F-1 as a reference.
• Point out situations in which it is recommended to include a navigation bar that scrolls the user’s
screen to a specific portion of the current web page.
• Introduce the concept of a URL and how it can be used to refer to every document available on the
web.
• Explain the structure of a URL, using FIGURE F-2 as a guide.
TEACHER TIP
Point out to students that they can create links within a document, to other pages, and even to
other documents such as pdfs and excel spreadsheets.
• Introduce students to the term scheme, server name, and path, and explain what each of these terms
refers to. Point out that web servers use the http and https schemes.
FIGURES: F-1, F-2
TABLE F-1: Possible values for the href attribute
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 3 of 15
BOXES:
1. Quick Tip: While several other protocols are in use on the Internet, the web uses only http
and https.
2. Clues to Use: Creating links to documents other than web pages
Most web page links are to other web pages. However, sometimes it’s useful to create a link
to another type of document, such as a PDF file or a CSV file. You can specify any type of
computer-readable document as the value for an href attribute. Although you can link to
documents in almost any format from your web pages, it’s important to keep in mind that
HTML documents are the only ones that your users are guaranteed to be able to access. To
be able to access documents in other formats, users’ computers must have programs installed
of a highly specialized type of software, you’d be safe in making files in that software format
available; however, on a site for the general public, it’s unlikely that most users would be
able to access such files.
Keep in mind that web-focused formats such as HTML and PDF minimize file sizes as
much as possible, meaning that documents usually download quickly. If you are making a
document available in another format, pay attention to the file size and take any steps
available to reduce the size.
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to think of reasons why it is important to include a navigation bar in
a web page, and what elements should be included and/or left out of a navigation bar. For each element
the students mention, they should explain how adding it to or removing it from a nav bar would
enhance the usability of the website.
2. Quick Quiz:
1
1
14
4
42
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
R
R
Re
e
el
l
la
a
at
t
ti
i
iv
v
ve
e
e
L
L
Li
i
in
n
nk
k
ks
s
s
LECTURE NOTES:
• Introduce the terms absolute link and relative link, and give examples of situations when each type
of link would be used.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 4 of 15
• Point out that it is efficient to use relative links when creating a nav bar, since the web pages of
small websites are almost always located in a common folder on the web server.
• Give an example of the HTML code for a relative link. You can use FIGURE F-4 as a guide.
• Point out the importance of creating meaningful links, including providing alternate text for a link
that can be accessed by a screen reader.
TEACHER TIP
Remind students that relative links will continue to work as long as the relationship between the
locations of the web pages remains the same, even if the absolute location of the web pages changes.
FIGURES: F-3, F-4, F-5
BOXES:
1. Quick Tip: Because a web page can contain multiple nav elements, you should include a
class value for each nav element that indicates its role.
2. Quick Tip: If a user selects a link to the current page, the user agent simply reloads the page.
It’s important to include this link in the nav bar for use on other pages in the website.
3. Clues to Use: Creating effective link text
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: Suppose that you have a website that includes a home page, a contact page, and a
picture gallery. The website includes 15 links between different pages in the site. All the documents for
this website are located in the directory C:\myfiles\WWW\mysite. You move the directory mysite
including all the documents for your website to the directory C:\myfiles\WWW\personal\mysite. How
many links would you have to change if all the internal links are listed in the HTML code as relative
links? Where would you make these changes?
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 5 of 15
LAB ACTIVITY
1. Provide students with a list of web pages and their locations in the file system. Ask students to
create a new web page, called index.html, which will include a navigation bar. The navigation bar
should include relative links to all the web pages specified in the list.
1
1
14
4
44
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
A
A
Ab
b
bs
s
so
o
ol
l
lu
u
ut
t
te
e
e
L
L
Li
i
in
n
nk
k
ks
s
s
LECTURE NOTES
• Remind students that in absolute links the href value is the complete URL for the target web page,
not just a listing of a filename or path.
FIGURES: F-6, F-7
BOXES
1. Quick Tip: If the URL you paste contains the & symbol, replace each occurrence with & to
ensure your code validates.
2. Quick Tip: If the URL in the address bar contains no text after the server name, explore the page
for a way to create a link containing the information you’ve entered, such as the “Share or
embed map” option under Settings on the maps.google.com or the Link/Embed link on
mapquest.com, and verify that the link text begins with http.
3. Clues to Use: Understanding mailto links
In addition to creating links that target web pages and other documents, you can construct a
link that creates a new email to a specified recipient. Instead of beginning with http://, these
links start with mailto: and are often referred to as mailto links. Despite their usefulness, mailto
links present both usability and security issues and are not widely used. When a mailto link is
activated, it’s up to the user agent to identify which program should complete the request. This
If communication from your users is important, a few alternatives have replaced mailto
links. Using HTML elements you’ll learn later in this book, you can create a form where users
can enter comments and contact information, and then submit it to you without your email
address being exposed on the web. You can also create a personal or organizational social
network feed and make it available on your website, inviting users to direct feedback or
questions to you through that network instead of via email. If including a mailto link is a
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 6 of 15
CLASSROOM ACTIVITIES
1. Classroom discussion: Ask students to suggest ways to avoid the problem of email harvesting when
using mailto links. Which of the ways the students suggest are things they have seen in websites and
which did they come up with on their own?
2. Quick Quiz:
3. Critical Thinking: Suppose that you have a website that includes a home page, a contact page, and a
picture gallery. The home page includes five links to other pages in the website and ten links to other
websites. You now change the directory location of the home page. How many links in the home page
will you have to change if all the links in the home page are absolute links? How many will you have to
change if only the links to external websites are absolute links?
LAB ACTIVITY
1. Have students adapt their personal home pages to include links to their five favorite or most
frequently used websites. The links to these websites should be absolute links.
1
1
14
4
46
6
6:
:
:
C
C
Ch
h
ha
a
an
n
ng
g
ge
e
e
C
C
CS
S
SS
S
S
D
D
Di
i
is
s
sp
p
pl
l
la
a
ay
y
y
T
T
Ty
y
yp
p
pe
e
e
LECTURE NOTES
• Point out that the main nav bar for a website is usually displayed either horizontally along the top
of a web page or vertically along the left side of a web page.
• Discuss why it is easiest to work with and style each link if the link is a separate block-level
element, especially because this allows the developer to style the element with padding, borders,
and/or margins.
• Remind students that by default a block-level element is rendered with a link break before and after
the element, which they don’t for the elements in a nav bar.
TEACHER TIP
Show different examples of both horizontal and vertical nav bars. Point out how the nav elements
have been styled. If possible, use the browser developer tools to show the display property
associated with the nav bar elements.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 7 of 15
FIGURES: F-8, F-9, F–10
TABLE F-2: Commonly used values of the display property
BOXES:
None
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to define commenting out and to explain a situation when
commenting out might be helpful. Why would they comment out code instead of just deleting
the code?
2. Classroom Discussion: Discuss the commonly used values of the display property. Have students
provide examples of when each value might be used.
2. Quick Quiz:
1
1
14
4
48
8
8:
:
:
S
S
St
t
ty
y
yl
l
le
e
e
L
L
Li
i
in
n
nk
k
ks
s
s
w
w
wi
i
it
t
th
h
h
a
a
a
P
P
Ps
s
se
e
eu
u
ud
d
do
o
o–
–
–C
C
Cl
l
la
a
as
s
ss
s
se
e
es
s
s
LECTURE NOTES
• Point out to students that CSS can be used to style links.
• Define the term pseudo-class as a categorization of a web page element that is based on a
relationship or condition of the element at a given moment, not on a static property value.
• Explain to students that CSS pseudo-classes are used to format the style of a link depending on
which state it is in.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 8 of 15
• Point out the display type for an a element must be either inline-block or block if students want to
change the margins, padding, or borders of the a element, as well as other box-model properties
such as background color.
• Remind students that they must take care not to change elements of an a element that will affect
the page layout when implemented, such as changing the line height of an a element when the
element is hovered over.
FIGURES: F-11, F–12
BOXES
1. Quick Tip: The a:hover pseudo-class is usually not applied when interacting with the
touchscreen or on a device such as a smartphone or tablet.
2. Clues to Use: Styling the :hover pseudo-class
3. You can style the :hover pseudo-class using any property that is valid for an a element.
However, it’s best to avoid changing the values of properties for the :hover pseudo-class that
affect the line height of text, such as line-height, font-size, or font-weight. Changing any of
these properties can affect the page layout—for instance, it can cause the elements below a nav
bar to move down temporarily because the height of the nav bar increases to accommodate the
new value while the mouse pointer is over a link. Instead, properties such as color, background–
color, and text-shadow are commonly used to affect the appearance of links while the mouse
pointer is over them but without affecting the overall layout.
4. Clues to Use: Understanding the difference between pseudo-elements and pseudo-classes
Both pseudo-elements and pseudo-classes are CSS selectors that you specify with a colon
preceding them. However, there are a number of differences between these two features. You
use a pseudo-element to work with part of an element, such as the first letter. As long as the
base element exists in your HTML code, a style rule that uses a pseudo-element selector is
always applied to the page. By contrast, you use a pseudo-class to style an element based on the
status of user interaction with it. This means that styling for a pseudo-class can be applied to a
web page at certain times and not at others—for example, only when the mouse pointer or
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 9 of 15
colon versions of pseudo-elements, so it’s best to continue to use a single colon for both features
until older browsers, such as IE8, are no longer in wide use.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Is the hover state applicable for touch screen devices? Why or why not? Have
they seen the hover state applied to links on their mobile devices? What happened? How did it affect
their browsing experience?
2. Quick Quiz:
1
1
15
5
50
0
0:
:
:
S
S
St
t
ty
y
yl
l
le
e
e
M
M
Mu
u
ul
l
lt
t
ti
i
ip
p
pl
l
le
e
e
L
L
Li
i
in
n
nk
k
k
S
S
St
t
ta
a
at
t
te
e
es
s
s
LECTURE NOTES
• Explain to students that unlike other HTML elements, links have five different possible states.
Provide students with an overview of each of these states, using TABLE F-3 as a guide.
• Point out that there is a pseudo-class for each link state.
• Stress that students do not have to use all five pseudo-classes for a link but that any pseudo-
classes they specify must be in the order shown in TABLE F-3.
FIGURES: F-13, F–14
TABLE F-3: Pseudo-class states for linked elements
BOXES:
1. Quick Tip: You don’t need to specify styles for the :active pseudo-class for the site nave because
it does not require different styling than the default settings.
2. Quick Tip: Although the :link and the :visited pseudo-classes are rendered on all devices, styles
for the :focus and :active pseudo-classes, like those for :hover
CLASSROOM ACTIVITIES
1. Classroom Discussion: Have students discuss the importance of having different link states, and using
formatting to distinguish between these states. Can any of the states be eliminated? Based on their use
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 10 of 15
of the web, have students encountered links which were not formatted to distinguish between some or
all of their different states? How did this affect their web browsing experience?
2. Quick Quiz:
1
1
15
5
52
2
2:
:
:
O
O
Op
p
pe
e
en
n
n
L
L
Li
i
in
n
nk
k
ks
s
s
i
i
in
n
n
N
N
Ne
e
ew
w
w
T
T
Ta
a
ab
b
bs
s
s
LECTURE NOTES
• Explain that by default, clicking a link opens a new web page in the same window and tab as the
source page. This avoids overwhelming the user with windows and tabs and allows for use of the
back buttons in the browsers.
• Point out situations when one might want to open a linked web page in a new window or tab, and
possible motivations for doing this.
TEACHER TIP
Point out to students that setting the value of the target attribute to be “_blank” does not allow them
to control for older browsers or for browsers with custom settings whether the new web page
should open in a new window or in a new tab.
FIGURES: F-15, F–16
TABLE F-4: Common values of the target property of the a element
BOXES
1. Quick Tip: An older browser or a browser with custom settings may open the link in a new
window instead of a new tab.
2. Quick Tip: Copying and pasting corrected code can be quicker than entering changes manually
on multiple pages, and avoids potential typing errors.
3. Clues to Use: Using short links
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 11 of 15
Especially long external links can clutter your web page code. To make your code easier to read,
you can use a link shortener such as bit.ly or tinyurl.com, which are web-based services that
transform large, unwieldy links into manageable URIs. To use these services, you start by
copying the full URI of the web page you want to link to, then navigating to the website of
whichever link shortener you choose. Next you paste your long link into the text box for that
purpose, then click the associated button, which is often labeled “shorten” or something similar.
The web page processes your link and returns a new link that starts with the link shortener’s
name. You then copy the new link to the Clipboard and paste it into your web page.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Have students discuss their experiences with links opening new web pages in
the same window and tab, and in a new window or tab. Which way do they prefer? Do their
preferences depend on the situation in which they are following a link? What do they consider to be
the disadvantages of opening target web pages in new windows or tabs?
2. Quick Quiz:
1
1
15
5
54
4
4:
:
:
L
L
Li
i
in
n
nk
k
k
W
W
Wi
i
it
t
th
h
hi
i
in
n
n
a
a
a
D
D
Do
o
oc
c
cu
u
um
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Explain to students that they can link to locations within the current web page by using the same
elements and attributes as other links, but instead of using URLs or filenames, they link to elements
in the document that have specific values for the id attribute.
• Give examples in which including links to elements in the same document would be useful, such as
when the web page is very long and includes several distinct portions.
• Point out that a unique name must be assigned to elements in the web page using the id attribute,
and that those unique names are referenced in the href attribute by preceding the id with a pound
symbol (#). Use FIGURE F-17 as an example.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 12 of 15
TEACHER TIP
Point out to students that you can use the id attributes you defined in order to create style rules for
specific elements also to define anchors to those elements.
• Explain to students that creating a link within a document using an id attribute is sometimes
referred to as a hash link because the # symbol (also known as the hash symbol) is placed before the
id attribute in the a href declaration.
FIGURES: F-17, F–18
BOXES:
1. Quick Tip: Another common use of hash links involves adding an id value to a page’s main
heading, then creating links to that heading at the bottom of each section of the page, allowing
users to easily return to the top of the page.
2. Quick Tip: If the web page is not long enough to place the element with the target id value at
the top of the window, the element may remain in the middle or at the bottom of the window.
3. Clues to Use: Linking to id values in other documents
You can combine a relative or absolute link with a hash value to link to a specific element in a
different document. When specifying the href value for the link, simply enter the URL or
filename for the target document, add a pound sign (#) to the end, then add the id value. When
the target page opens in a user’s browser, the page scrolls to the element with the specified id
value.
4. Clues to Use: Clearing browser history to retest link sites
When changing properties for link pseudo-classes, you may find that all links in a page are
formatted as :visited due to earlier testing. To reset the appearance of links to their default :link
state, you need to clear your browser history, which is the log your browser maintains of URLs
that you’ve visited. Browsers use browser history to enable features such as autocompleting
addresses that you type in the Address bar. In addition, browsers render a link using
declarations for the :visited pseudo-class if the link target appears in the browser history. Every
browser enables you to clear the history list. Consult your browser documentation or search the
web if you need help clearing your browser history.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 13 of 15
Critical Thinking: Have students consider a web page that contains only a single paragraph. Tell
students there are key words with definitions within this paragraph. Ask if they can create hash links
within this page? Have them describe how they would do this. Then ask them to discuss if there is any
point in creating such hash links.
LAB ACTIVITY
1
1
15
5
56
6
6:
:
:
A
A
Ad
d
dd
d
d
N
N
Na
a
av
v
vi
i
ig
g
ga
a
at
t
ti
i
io
o
on
n
na
a
al
l
l
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
LECTURE NOTES:
• Explain to students that nav bars sometimes present accessibility challenges, particularly when users
experience a web page element by element in sequence. In this situation, a user would have to go
through all the links of the nav bar before getting to the main contents of the page.
• Introduce the concept of a skip link, and explain how it can be implemented and how it solves the
accessibility problem posed by a nav bar.
TEACHER TIP
Make sure students are aware of screen readers and how they work. If possible, demonstrate the use
of one. Use it to read a website that does not have a skip link, then use it to read a website that has a
skip link (perhaps a site you have created). Discuss why the skip link is helpful for those listening to
a website rather than reading one.
FIGURES: F-19, F-20, F-21
BOXES:
1. Quick Tip: If a skip link is positioned off screen using the left property but you want to place it
on the right page using the right property, you must set the left property to auto in addition to
specifying a value for right.
2. Trouble: If you’re using a Mac and pressing [Tab] does not navigate through the pages links,
search the web on mac enable keyboard navigation plus the name of your browser, follow the
instructions, and repeat step 7.
3. Trouble: If your page does not scroll. Reduce the height of your browser window until only the
h1 heading is visible, then repeat steps 8 and 9.
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 14 of 15
readers to identify any issues with your documents that might prevent screen reader users from
accessing all of your content. Free, full-featured screen readers are available for both Windows
and Mac computers. For Windows, you can download the free NVDA screen reader from
nvaccess.org. For Mac, VoiceOver is a screen reader that’s installed by default as part of the
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Classroom discussion: In the chapter, students are exposed to a specific accessibility problem
that is caused by inclusion of a nav bar in a web page. Have students discuss other accessibility
problems that may arise from inclusion of different kinds of links and nav bars. How do they
propose these problems should be solved?
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
absolute link (142)
browser history (155)
HTML5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit F Page 15 of 15
commenting out (146)
email harvester (145)
hash link (154)
http (140)
relative link (142)
scheme (140)
Secure (https) (140)
(http) (140)
hypertext Transfer Protocol
Link (140)
mailto link (145)
skip link (156)
target document(140)
Top of Document
server name (140)
short link (153)
hyperlink (140)
hypertext Transfer Protocol
(140)
URL (140)