HTML and CSS Reference
In-Depth Information
Table 5-6 shows the HTML code used to create the horizontal navigation bar. As
shown in lines 20 through 27, the HTML code adds the navigation bar to the bottom of
the Web page beneath the paragraph of text.
Accessibility
Developers should follow
accessibility guidelines
when developing Web
pages. It is important that
the Web page content
is understandable and
navigable. The W3C gives
some good suggestions
for Web site accessibility
issues that should be
reviewed. For more
information about
accessibility, visit the
W3C Web site, or refer to
Appendix C, Accessibility
Standards and the Web.
Table 5-6 HTML Code for Creating a Horizontal Navigation Bar
Line
HTML Tag and Text
<div style="text-align: center">
20
<ul>
21
<li class="navlist"><a href="tahanna.html">Home</a> |
22
<li class="navlist"><a href="skiing.html">Skiing</a> |
23
<li class="navlist"><a href="boating.html">Boating</a> |
24
<li class="navlist"><a href="dining.html">Dining</a>
25
</ul>
26
</div>
27
The following steps create the text links at the bottom of the home page.
1
If necessary, click line 20.
2
Enter the HTML code shown in Table 5-6 and then press the
e n t e r
key twice (Figure 5-28).
I notice that we use a horizontal navigation bar for many projects in the topic. Are there
other ways to display a navigation bar?
The horizontal navigation bar is used because it makes sense aesthetically in these projects,
but there are many other ways to display navigation items. A great idea is to review other
navigation bar options on the Internet and view the HTML source. You can get a lot of ideas
by looking at the Web pages and source code from other Web developers. Remember that
the whole point of the navigation bar is to provide easy navigation for your Web site visitors.
special character nonbreaking
space inserted before and after
pipe symbol
class “navlist” inserted;
is defined in external
style sheet
four text links inserted
into unordered bullet list
insertion point
on line 29
Figure 5-28
