How to work with lists, links, and navigation menus Chapter 7 How to work with lists, links, and navigation menus © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Murach's HTML and CSS, 4th Edition Objectives Applied Create links and lists in all their variations with HTML and with CSS. Knowledge Name and describe the three types of HTML lists. 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. Describe the use of unordered lists and <a> elements for the creation of navigation lists and navigation menus, including 2- and 3-tier menus. Describe the use of these pseudo-classes for formatting links: :link, :visited, :hover, and :focus. Describe the use of these CSS properties for formatting links: text- decoration and border. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

HTML for an unordered list with paragraphs and links <h1>San Joaquin Valley Town Hall Programs</h1> <ul> <li> <p>Join us for a complimentary coffee hour at the <a href="saroyan.html">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> <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> </ul> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The unordered list in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

An ordered list that is continued <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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The ordered list in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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>...</li> <li>...li> </ol> </li> <li>How to create an executable file <ol start="4"> </ul> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The nested lists in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The description list in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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 © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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> CSS that changes the bullets ul.circle { list-style-type: circle; } ul.star { list-style-image: url("../images/star.png"); } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The bullet changes in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Common values for the list-style-type property of an ordered list decimal decimal-leading-zero lower-alpha upper-alpha lower-roman upper-roman © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The ordered list changes in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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> CSS that aligns the list items h2, ul, li { margin: 0; padding: 0; } ul { padding-left: 1em; li { padding-left: .25em; padding-bottom: .25em; © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The aligned list items in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Four attributes of the <a> element href title tabindex accesskey © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A text link, an image link, and a text link with a title attribute <p> <a href="/orders/cart.html" accesskey="c" tabindex="0">Shopping cart</a> <a href="/orders/cart.html"> <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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The text and image links in a web browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Common CSS pseudo-classes for formatting links :visited :hover :focus :active © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The properties for removing underlines and borders text-decoration border-style © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for three links <ul> <li><a href="toobin.html">Jeffrey Toobin</a></li> <li><a href="sorkin.html">Andrew Ross Sorkin</a></li> <li><a href="chua.html">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%; © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The links in a browser with the focus on the third link © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Accessibility guideline for :hover and :focus 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. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

HTML for a link that loads the document in a new window or tab <p>Just go to <a href="http://www.html5test.com/" 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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML in one browser tab © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The html5test.com home page in another tab © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A web page that links to topics on the same page © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The page when the sixth link is clicked © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Linking to placeholders on a page The placeholder 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="8reasons.html#reason6">Complete, real-world applications</a> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Murach's HTML and CSS, 4th Edition Popular media formats PDF WAV MP3 MPG/MPEG © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The PDF file in a browser © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

An HTML link that plays an MP3 file <a href="music/twist_away.mp3" type="audio/mpeg"> MP3 file</a> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

An HTML link that plays a PowerPoint slide show <a href="media/chapter_01.pps" target="_blank">Review the slides for chapter 1</a> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A web page with links for email, phone, and Skype © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Email, phone, and Skype links A link that starts an email message <a href="mailto:support@murach.com">Send us an email</a> An email link with a CC address and a subject <a href="mailto:support@murach.com?cc=ben@murach.com &subject=Web mail">Send us an email</a> A link that calls a phone number <a href="tel:555-555-5555">Call us</a> A link that starts a Skype session <a href="skype:murachsupport">Skype chat with us</a> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A vertical navigation menu © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for the vertical navigation menu <nav id="nav_list"> <ul> <li><a href="index.html">Home</a></li> <li><a href="tickets.html">Get Tickets</a></li> <li><a href="members.html" class="current">Become a Member</a></li> <li><a href="about_us.html">About Us</a></li> </ul> </nav> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for the vertical navigation menu * { margin: 0; padding: 0; } #nav_menu_1 ul { list-style-type: none; margin-left: 1.25em; margin-bottom: 1.5em; } #nav_menu_1 ul li { width: 200px; margin-bottom: .5em; border: 2px solid blue; } #nav_menu_1 ul li a { display: block; padding: .5em 0 .5em 1.5em; text-decoration: none; font-weight: bold; color: blue; } #nav_menu_1 ul li a.current { background-color: silver; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Two horizontal navigation menus © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for the horizontal navigation menus <nav id="nav_menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="tickets.html">Get Tickets</a></li> <li><a href="members.html" class="current">Become a Member</a></li> <li><a href="about_us.html" class="lastitem">About Us</a></li> </ul> </nav> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for the first horizontal 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 a.current { text-decoration: none; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for the second horizontal 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 a.lastitem { border-right: none; } #nav_menu ul li a.current { color: yellow; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A 2-tier navigation menu © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for the 2-tier menu <nav id="nav_menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Speakers</a> <li><a href="#">Jeffrey Toobin</a></li> <li><a href="#">Andrew Ross Sorkin</a></li> ... </ul> </li> <li><a href="members.html" class="current">Become a Member</a></li> <li class="lastitem"><a href="aboutus.html">About Us</a> <li><a href="#">Our History</a></li> <li><a href="#">Board of Directors</a></li> </nav> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for the 2-tier menu #nav_menu ul { list-style: none; position: relative; } #nav_menu ul li { float: left; #nav_menu ul ul { display: none; position: absolute; top: 100%; #nav_menu ul ul li { float: none; #nav_menu ul li:hover > ul { display: block; #nav_menu > ul::after { content: ""; clear: both; © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

A 3-tier navigation menu © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for the 3-tier menu <nav id="nav_menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="speakers.html">Speakers</a> <li><a href="#">...</a></li> <li><a href="#">...Chua</a></li> <li><a href="sampson.html">...</a> </ul> </li> <li><a href="members.html">Become...</a></li> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The HTML for the 3-tier menu (continued) <li class="lastitem"><a href="aboutus.html"> About Us</a> <ul> <li><a href="#">Our History</a></li> <li><a href="#">Board...</a></li> <li><a href="#">Past Speakers</a> <li><a href="#">2017</a></li> <li><a href="#">2016</a></li> <li><a href="#">2015</a></li> </ul> </li> <li><a href="#"> Contact Information</a></li> </nav> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for the operation of the 3-tier menu #nav_menu ul { list-style-type: none; position: relative; } #nav_menu ul li { float: left; } #nav_menu ul ul { display: none; position: absolute; top: 100%; } #nav_menu ul ul li { float: none; #nav_menu ul ul li ul { left: 100%; top: 0; } #nav_menu ul li.lastitem ul li ul { left: -100%; #nav_menu ul li:hover > ul { display: block; } #nav_menu > ul::after { content: ""; clear: both; display: block; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

The CSS for formatting the 3-tier menu #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 li.lastitem a { width: 178px; } #nav_menu ul li a.current { color: yellow; } #nav_menu ul li a:hover, #nav_menu ul li a:focus { background-color: gray; } © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Murach's HTML and CSS, 4th Edition Short 7-1 Start an email © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Short 7-2 Create a vertical navigation menu © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition