HTML and CSS Reference
In-Depth Information
The horizontal menu bar shown in Figure 5-26b is created using an unordered
bulleted list. You have created several unordered bulleted lists in projects throughout the
topic so far. In each case, your bulleted list displays as shown in Figure 5-26a. Certainly,
that is not an attractive look for this Web page. In later steps, you will convert this
unordered bullet list to display horizontally (inline) by using statements inserted into
the external style sheet.
navigation bar without
external style sheet - list
items display vertically
with bullets on left
(a)
navigation bar with additional space
inserted before and after pipe symbol
using special character
navigation bar displays
horizontally (inline) with no
bullets with (list-style-type
of none)
(b)
Figure 5-26
To Insert a Special Character
The following step inserts a registered trademark symbol.
1
•
Position the insertion
point to the right of
the > in the second
</span> tag on line 18
and type
®
;
and
then press the
s p a c e
bar
as shown in
Figure 5-27.
registered trademark
symbol inserted in
paragraph
Figure 5-27
Text Links
It is very important
to use text links on
all Web pages in
addition to using
an image map for
navigation. You
want to give your
Web site visitors
access to all Web
pages in the Web
site. Text links should
provide that access.
To Create a Horizontal Navigation Bar with Text Links
The next step is to create a horizontal navigation bar of text links at the bottom of
the page that mirror the image map links. As previously discussed, it is important that a
Web page include text links to all URLs in the image map, in the event the image does not
download, a user is using a screen reader, or a user's browser is set to not display images. In
Figure 5-27, you can see that there are three pipe symbols (
|
) inserted between the menu
bar text items. The pipe symbols help to separate the text to make it easy for users to select
a menu item. In addition to those pipe symbols, you use another special character entity, the
nonbreaking space, between the menu options, using the character entity .
