More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 273

● When linking to a file that is in a folder on the same level as the current folder,
the href value will use the "../" notation to indicate moving up one level and
then down to the chosen folder. For example, to link to the bathing.html page in
the services folder from the collars.html page in the products folder, code the
anchor element as follows:

<a href="../services/bathing.html">Dog Bathing</a>

Don't worry if the use of "../" notation and linking to files in different folders seems
new and different. In most of the exercises in this topic you will code either absolute
links to other Web sites or relative links to files in the same folder.

Opening a Link in a New Browser Window

The target attribute can be used on the anchor to open a link in a new browser window.
For example,

<a href="http://yahoo.com" target="_blank">Yahoo!</a>

will open Yahoo!'s home page in a new window. Why not create a test page and try it?
The target attribute with the value "_blank" configures the Web page to open in a
new browser window.

By now you should be comfortable with hyperlinks. You may have noticed that these
links display the top of the Web page. Sometimes it is helpful to link to an exact position
on a Web page instead of to the top of the page. Internal links are used for this function.

Linking to Fragment Identifiers

There are times when you need to provide the capability to link to a specific portion
of a Web page. You can accomplish this by coding a hyperlink to a fragment identifier
(sometimes called a named fragment or fragment id) which is simply an XHTML element
assigned to an id. Lists of frequently asked questions (FAQs) often use this technique.
Other applications of fragment identifiers include hyperlinks that skip to the content
of a page or skip back to the top of the page.

There are two components to your coding when using fragment identifiers:

1. The tag that identifies the named fragment of a Web page. The tag must be
assigned to an id. For example, <div id="content"> .
2. The anchor tag that links to the named fragment on a Web page.

Focus on Accessibility To see how these two components are used, consider that to provide for accessibility,

Web pages may have a fragment identifier to indicate the beginning of the actual page
content. When the visitor clicks on the “skip to content” hyperlink, the browser links to
the fragment identifier and shifts focus to the content area of the page. This “skip to
content” or “skip navigation” link provides a way for screen reader users to skip repeti-
tive navigation links (see Figure 7.2). This is accomplished in two steps as follows:

WWW

1. Establish Target. Create the “skip to content” fragment identifier by configuring a
<div> that contains the page content with an id, for example:
<div id="content">
2. Reference Target. At the point of the page where you want to place a hyperlink
to the content, type an anchor element. Use the href attribute and place a #