Chapter 7
How to work
with lists and links
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 1
Objectives
Applied
1. Create links and lists in all their variations with HTML and format
them with CSS.
Knowledge
1. Name and describe the three types of HTML lists.
2. Describe the use of <a> elements for linking to another web page,
opening another web page in a new browser window, linking to
placeholders on the same page, linking to media files, starting an
email message, calling a phone number, or starting a Skype session.
3. Describe the use of unordered lists and <a> elements for the
creation of navigation lists and navigation menus, including 2- and
3-tier menus.
4. Describe the use of these pseudo-classes for formatting links: :link,
:visited, :hover, and :focus.
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 2
Objectives (cont.)
5. Describe the use of these CSS properties for formatting links: text-
decoration and border.
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 3
Elements that create unordered lists
• ul
• li
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 4
HTML for an unordered list with text, links,
and paragraphs
<h1>San Joaquin Valley Town Hall Programs</h1>
<ul>
<li>
<p>Join us for a complimentary coffee hour at the
<a href="[Link]">William Saroyan
Theatre</a>, 9:15 to 10:15
a.m. on the day of each lecture. The speakers
usually attend this very special event.</p>
</li>
<li>
<p>Extend the excitement of Town Hall by
purchasing tickets to the post-lecture luncheons.
This unique opportunity allows you to ask
more questions of the speakers--plus spend extra
time meeting new Town Hall friends.</p>
<p>A limited number of tickets are available.
Call (559) 555-1212 for reservations by the
Friday preceding the event.</p>
</li>
</ul>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 5
The list in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 6
Elements that create ordered lists
• ol
• li
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 7
HTML for an ordered list that continues
from another ordered list
<h1>How to use the WinZip Self Extractor</h1>
<h2>Before you start the WinZip Self Extractor</h2>
<ol>
<li>Create a text file that contains the message you
want to be displayed when the executable
starts.</li>
<li>Create a batch file that copies the exercises,
and store it in the main folder for the files to
be zipped.</li>
<li>Create the zip file.</li>
</ol>
<h2>How to create an executable file</h2>
<ol start="4">
<li>Run the WinZip Self Extractor program and click
through the first three dialog boxes.</li>
<li>Enter the name of the zip file in the fourth
dialog box.</li>
<li>Click the Next button to test the
executable.</li>
</ol>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 8
The lists in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 9
HTML for ordered lists nested
within an unordered list
<h1>How to use the WinZip Self Extractor program</h1>
<ul>
<li>Before you start the WinZip Self Extractor
<ol>
<li>Create a text file that contains the
message you want to be displayed when the
executable starts.</li>
<li>Create a batch file that copies the
exercises, and store it in the main
folder for the files to be zipped.</li>
<li>Create the zip file.</li>
</ol>
</li>
<li>How to create an executable file
<ol start="4">
<li>Run the WinZip Self Extractor program and
click through the first three dialog
boxes.</li>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 10
HTML for ordered lists nested
within an unordered list (cont.)
<li>Enter the name of the zip file in the
fourth dialog box.</li>
<li>Click the Next button to test the
executable.</li>
</ol>
</li>
</ul>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 11
The lists in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 12
Elements that create description lists
• dl
• dt
• dd
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 13
HTML for a description list
<h2>Components of the Internet architecture</h2>
<dl>
<dt>client</dt>
<dd>A computer that accesses the web pages of a web
application using a web browser.</dd>
<dt>web server</dt>
<dd>A computer that holds the files for each web
application.</dd>
<dt>local area network (LAN)</dt>
<dd>A small network of computers that are near each
other and can communicate with each other over
short distances.</dd>
<dt>wide area network (WAN)</dt>
<dd>A network that consists of multiple LANs that
have been connected together over long distances
using routers.</dd>
<dt>Internet exchange point</dt>
<dd>Large routers that connect WANs together.</dd>
</dl>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 14
The list in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 15
Properties for formatting unordered lists
• list-style-type
• list-style-image
Values for the list-style-type property
of an unordered list
• disc
• circle
• square
• none
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 16
HTML for two unordered lists
<h2>Popular web browsers include</h2>
<ul class="circle">
<li>Internet Explorer</li>
<li>Firefox</li>
<li>Chrome</li>
</ul>
<h2>Prime skills for web developers are</h2>
<ul class="star">
<li>HTML5 and CSS3</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
CSS that changes the bullets
[Link] { list-style-type: circle; }
[Link] { list-style-image: url("../images/[Link]"); }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 17
The lists in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 18
Common values for the list-style-type property
of an ordered list
Value Example
decimal 1, 2, 3, 4, 5 ...
decimal-leading-zero 01, 02, 03, 04, 05 ...
lower-alpha a, b, c, d, e ...
upper-alpha A, B, C, D, E ...
lower-roman i, ii, iii, iv, v ...
upper-roman I, II, III, IV, V ...
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 19
HTML for an ordered list
<h2>How to create an executable file</h2>
<ol class="lower_alpha">
<li>Run the WinZip Self Extractor program and click
through the first three dialog boxes.</li>
<li>Enter the name of the zip file in the fourth
dialog box.</li>
<li>Click the Next button to test the
executable.</li>
</ol>
CSS that formats the list
ol.lower_alpha { list-style-type: lower-alpha; }
The list in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 20
HTML for an unordered list
<h2>Popular web browsers</h2>
<ul>
<li>Chrome</li>
<li>Internet Explorer</li>
<li>Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 21
CSS that aligns the list items
h2, ul, li {
margin: 0;
padding: 0;
}
h2 {
padding-bottom: .25em;
}
ul {
padding-left: 1em; /* determines left
alignment */
}
li {
padding-left: .25em; /* space between bullet
and text */
padding-bottom: .25em; /* space after line item */
}
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 22
The list in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 23
Four attributes of the <a> element
• href
• title
• tabindex
• accesskey
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 24
A text link, an image link, and a text link
with a title attribute
<p>
<a href="/orders/[Link]" accesskey="c"
tabindex="0">Shopping cart</a>
<a href="/orders/[Link]">
<img src="images/cart_animated.gif"
alt="Shopping cart"></a>
</p>
<p><a href="/books/php_toc.html"
title="Review the complete table of
contents">TOC</a></p>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 25
The text and image links in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 26
Accessibility guidelines for links
• If the text for a link has to be short, code the title attribute to
clarify where the link is going.
• You should also code the title attribute if a link includes an image
with no text.
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 27
Common CSS pseudo-classes for formatting links
• :link
• :visited
• :hover
• :focus
• :active
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 28
The properties for removing underlines
and borders from links
• text-decoration
• border-style
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 29
The HTML for three links
<ul>
<li><a href="[Link]">Jeffrey Toobin</a></li>
<li><a href="[Link]">Andrew Ross Sorkin</a></li>
<li><a href="[Link]">Amy Chua</a></li>
</ul>
The CSS for pseudo-class selectors that apply
to the links
a:link {
color: green;
}
a:hover, a:focus {
text-decoration: none;
font-size: 125%;
}
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 30
The links in a web browser with the focus
on the third link
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 31
Accessibility guideline for formatting links
• Apply the same formatting for the :hover and :focus selectors.
That way, the formatting is the same whether you hover the
mouse over a link or use the keyboard to tab to the link.
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 32
HTML for a link that loads the document
in a new window or tab
<p>Just go to
<a href="[Link] target="_blank">
the HTML5 testing site</a>. It rates your browser as
it loads the page and also has data on how well other
browsers conform to HTML5.
</p>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 33
The HTML in one browser tab
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 34
The [Link] home page in another tab
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 35
A web page that provides links to topics
on the same page
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 36
The portion of the page that’s displayed
when the sixth link is clicked
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 37
The placeholder at the top of the page
<h1><a id="top">8 reasons why trainers like our
books</a></h1>
The placeholder for reason 6
<h2><a id="reason6">Our complete, real-world applications
ensure mastery</a></h2>
Two links that jump to placeholders
on the same page
<p><a href="#reason6">Complete, real-world
applications</a></p>
<p><a href="#top">Return to top</a></p>
A link that jumps to a placeholder on this page
from another page
<a href="[Link]#reason6">Complete, real-world
applications</a>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 38
Popular media formats and MIME types
Format MIME type
PDF application/pdf
WAV audio/x-wave
MP3 audio/mpeg or audio/x-mpeg
MPG/MPEG video/mpeg
SWF application/x-shockwave-flash
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 39
Two of the popular media players
• Adobe Reader
• Adobe Flash Player
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 40
An HTML link that displays a PDF file
in a new window
<a href="documents/instructors_summary.pdf"
type="application/pdf"
target="_blank">Read the Instructor's Summary<a>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 41
The PDF file displayed in a browser
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 42
An HTML link that plays an MP3 file
<a href="music/twist_away.mp3" type="audio/mpeg">
MP3 file</a>
An HTML link that plays a PowerPoint slide show
<a href="media/chapter_01.pps"
target="_blank">Review the slides for chapter 1</a>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 43
A web page with links for email, phone, and Skype
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 44
Prefixes for coding email, phone, and Skype links
Link type Prefix
Email mailto:
Phone tel:
Skype skype:
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 45
A link that starts an email message
<a href="[Link] us an email</a>
An email link with a CC address and a subject
<a href="[Link]
&subject=Web mail">Send us an email</a>
A link that calls a phone number
<a href="[Link] us</a>
A link that starts a Skype session
<a href="skype:murachsupport">Skype chat with us</a>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 46
A vertical navigation menu
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 47
The HTML for the navigation menu
<nav id="nav_list">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Get Tickets</a></li>
<li><a href="[Link]" class="current">Become
a Member</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
</nav>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 48
The CSS for the navigation menu
* { margin: 0;
padding: 0; }
#nav_list ul {
list-style-type: none;
margin-left: 1.25em;
margin-bottom: 1.5em; }
#nav_list ul li {
width: 200px;
margin-bottom: .5em;
border: 2px solid blue; }
#nav_list ul li a {
display: block;
padding: .5em 0 .5em 1.5em;
text-decoration: none;
font-weight: bold;
color: blue; }
#nav_list ul li [Link] {
background-color: silver; }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 49
Two horizontal navigation menus
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 50
The HTML for the navigation menus
<nav id="nav_menu">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Get Tickets</a></li>
<li><a href="[Link]" class="current">Become
a Member</a></li>
<li><a href="about_us.html"
class="lastitem">About Us</a></li>
</ul>
</nav>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 51
The CSS for the first navigation menu
#nav_menu ul {
list-style-type: none;
padding: 1em 0; /* padding above and below li
elements */
text-align: center;
border-top: 2px solid black;
border-bottom: 2px solid black; }
#nav_menu ul li {
display: inline;
padding: 0 1.5em; }
#nav_menu ul li a {
font-weight: bold;
color: blue; }
#nav_menu ul li [Link] { text-decoration: none; }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 52
The CSS for the second navigation menu
#nav_menu ul { list-style-type: none; }
#nav_menu ul li { float: left; }
#nav_menu ul li a {
text-align: center;
display: block;
width: 175px;
padding: 1em 0; /* padding above and below a
elements */
text-decoration: none;
background-color: blue;
color: white;
font-weight: bold;
border-right: 2px solid white; }
#nav_menu ul li [Link] { border-right: none; }
#nav_menu ul li [Link] { color: yellow; }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 53
A 2-tier navigation menu
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 54
The HTML for the menus
<nav id="nav_menu">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="#">Speakers</a>
<ul>
<li><a href="#">Jeffrey Toobin</a></li>
<li><a href="#">Andrew Ross
Sorkin</a></li>
...
</ul>
</li>
<li><a href="[Link]" class="current">Become
a Member</a></li>
<li class="lastitem"><a href="[Link]">About
Us</a>
<ul>
<li><a href="#">Our History</a></li>
<li><a href="#">Board of
Directors</a></li>
</ul>
</li>
</ul>
</nav>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 55
The CSS for the operation of the menus
#nav_menu ul {
list-style: none; /* Remove bullets from
all ul elements */
position: relative; } /* So the submenus can
be positioned */
#nav_menu ul li { float: left; } /* Display items
horizontally */
#nav_menu ul ul {
display: none; /* Don't display submenus
until hover of li */
position: absolute;
top: 100%; /* Position submenu at
bottom of main menu */
}
#nav_menu ul ul li { float: none; } /* Display submenus
vertically */
#nav_menu ul li:hover > ul { /* Select ul child
of li element */
display: block; } /* Display submenu on hover
of li element */
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 56
The CSS for the operation of the menus (cont.)
#nav_menu > ul::after {
content: "";} /* Add empty content to the end
of the first ul */
display: block; /* Display that content as a
block element */
clear: both; } /* Stop the floating of the li
elements */
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 57
A 3-tier navigation menu
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 58
The HTML for the menus
<nav id="nav_menu">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="#">Speakers</a>
<ul>
<li><a href="#">Jeffrey Toobin</a></li>
<li><a href="#">Andrew Ross
Sorkin</a></li>
<li><a href="#">Amy Chua</a></li>
<li><a href="[Link]">Scott
Sampson</a>
<ul>
<li><a href="#">September
2010</a></li>
<li><a href="#">February
2015</a></li>
</ul>
</li>
<li><a href="[Link]">Carlos
Eire</a></li>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 59
The HTML for the menus (cont.)
<li><a href="[Link]">Roman
Tynan</a></li>
</ul>
</li>
<li><a href="[Link]" class="current">Become
a Member</a></li>
<li class="lastitem"><a href="[Link]">
About Us</a>
<ul>
<li><a href="#">Our History</a></li>
<li><a href="#">Board of
Directors</a></li>
<li><a href="#">Past Speakers</a>
<ul>
<li><a href="#">2014</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2012</a></li>
</ul>
</li>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 60
The HTML for the menus (cont.)
<li><a href="#">
Contact Information</a></li>
</ul>
</li>
</ul>
</nav>
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 61
The CSS for the operation of the menus
#nav_menu ul {
list-style-type: none;
position: relative; } /* So the submenus can be
positioned */
#nav_menu ul li { float: left; }
#nav_menu ul ul {
display: none; /* Don't display submenu
until hover of li */
position: absolute;
top: 100%; }
#nav_menu ul ul li {
float: none;
position: relative; }
#nav_menu ul ul li ul {
position: absolute;
left: 100%; /* Display submenu to the right
of the li element */
top: 0; } /* Display submenu at the top of
the li element */
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 62
The CSS for the operation of the menus (cont.)
#nav_menu ul [Link] ul li ul {
position: absolute;
left: -100%; /* Display submenu to the left
of the li element */
top: 0; } /* Display submenu at the top of the li
element /*
#nav_menu ul li:hover > ul { /* Select ul child of li
element */
display: block; } /* Display the submenu on hover
over li */
#nav_menu > ul::after {
content: "";
clear: both;
display: block; }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 63
The CSS for formatting the menus
#nav_menu ul {
margin: 0;
padding: 0; }
#nav_menu ul li a {
text-align: center;
display: block;
width: 176px;
padding: 1em 0;
text-decoration: none;
background-color: blue;
color: white;
font-weight: bold; }
#nav_menu ul [Link] a {
width: 178px; } /* So the navigation bar fills the
706px body width */
#nav_menu ul li [Link] {
color: yellow; }
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
background-color: gray; }
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 64
Exercise 7-1 Enhance the Town Hall home page
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 65
Short 7-1 Start an email
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 66
Short 7-2 Create a vertical navigation menu
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 67
Halloween 7 Add two navigation menus
Murach's HTML5 and CSS3 (3rd Ed.), C7 © 2015, Mike Murach & Associates, Inc. Slide 68
