HTML and CSS Reference
In-Depth Information
Listing 6-4.
A sample site structure
Creating a link from one page to another in this example is as easy as setting the link's
href
attribute to
the file name of the page to which you're linking (see Listing 6-5).
Listing 6-5.
An anchor element with a relative URL
<a href="about.html">About Power Outfitters</a>
This example site structure works great for smaller websites. Assume, though, that you are tasked with
creating a much larger website. For this larger web project, you may want to organize your pages in a
series of folders. Using that approach, you might organize your pages in a fashion similar to that shown in
Listing 6-6.
Listing 6-6.
A sample site structure
Let's say you want to add a link from the “links” folder's “index.html” page to the “about” folder's
“history.html” page. To accomplish this, you would create a link like that shown in Listing 6-7.
Listing 6-7.
An anchor element with a relative URL
<a href="../about/history.html">Our History</a>
Including the “
../
”characters at the beginning of the relative URL indicates to the browser that it should
first navigate up a single directory. After that, the browser is instructed to navigate into the "about" folder
and find the file named "history.html." It is possible to chain together several “
../
” characters; each
occurrence will instruct the browser to navigate up another folder within the structure of your website.
Fragment identifiers are the third type of link that you can use with the
href
attribute. In the context of a
web page, a fragment identifier is a specialized reference to a portion of a page. They are placed at the
end of URLs preceded by a hash symbol, as shown in Listing 6-8.
Listing 6-8.
A URL with a fragment identifier
The string "products" that appears after the hash symbol directly correlates to an element on the team.html
page that has an
id
attribute with the value "products." The browser recognizes the fragment identifier in
the URL and automatically scrolls the page to bring the linked portion into view. You've likely seen
fragment identifiers in action if you've ever clicked a "read more" link on a news article.
