HTML and CSS Reference
In-Depth Information
7.1 Another Look at XHTML Hyperlinks
Hyperlinks make the Web a “web” of interconnected information. In this section you'll
revisit the topic of hyperlinks and explore coding relative links, using the target attrib-
ute to open Web pages in a new browser window, and coding hyperlinks that are inter-
nal to a Web page.
More on Relative Linking
As indicated earlier in Chapter 2, a relative link is used to link to Web pages within
your site. You've been coding relative links to display Web pages within the same folder.
There are times when you need to link to files in other folders on your Web site. Let's
consider the example of a Web site for a dog groomer that highlights services and prod-
ucts. The Web developer for this site created separate folders called services and prod-
ucts in order to organize the site. See the folder and file listing shown in Figure 7.1.
Figure 7.1
The dog groomer
site contains the
images, products,
and services folders
Relative Link Examples
To review, when linking to a file in the same folder or directory, the value of the
href is the name of the file. For example, to link to the contact.html page from
the home page (index.html), code the anchor element as follows:
<a href="contact.html">Contact</a>
When linking to a folder located within the current directory, use both the folder
name and the file name in the relative link. For example, to link to the
collars.html page in the products folder from the home page (index.html), code
the anchor element as follows:
<a href="products/collars.html">Collars</a>
In Figure 7.1 the collars.html page is located in a subfolder of the groomer folder.
The home page for the site, index.html is located in the groomer folder. When
linking to a file that is up one directory level from the current page use "../"
notation. To link to the home page for the site from the collars.html page, code
the anchor element as follows:
<a href="../index.html">Home</a>
Search WWH ::

Custom Search