Linking to Content - HTML5 - page 56

Sites are typically organized as a series of files and folders with everything in
one master folder called the site root.
For targeted pages outside the current folder, you'll need to include the relative path. Say that you
are linking from the home page to a series of gallery pages, which are all contained in a subfolder
called portfolio . In this situation, your links would look like this:
<a href=”portfolio/cats.html”>Cat Photos</a>
<a href=”portfolio/dogs.html”>Dog Photos</a>
<a href=”portfolio/fish.html”>Fish Photos</a>
Should you need to link to a page that is contained in a folder above the current one, use ../ to go
up one level in the folder structure. For example, to create a link from the cats.html page back to
the home page, you code the link like this:
<a href=”../home.html”>Home</a>
Just add another ../ for every folder level you need to ascend.
In addition to document relative links, you can also use root relative links
within a site. A root relative link takes the site structure into account and is
signified with a leading forward slash. For example, a link to a page that is con-
tained within a folder two levels from the site root would look like this:
<a href=”/products/widgets/fancy_widgets.html”>Fancy Widgets</a>
The advantage of using root relative links over document relative links is that
you can use the same link from any page within the site, regardless of location.
Linking to another site
Every accessible element that makes up a website — whether it is the HTML pages, images,
JavaScript files, external style sheets, or anything else — has an absolute URL . A prime example
of an absolute URL is the string of text and characters entered in a browser's address field, such as
http://markofthejoe.com/index.htm , w hich is the home page of the authors' eLearning
consultancy site. To link to this site from any other site on the Web (and you know you should!),
use the following code:
<a href=” http://markofthejoe.com/index.htm”>Th e best eLearning consultants!</a>
If you're linking to a default page in a site or folder, you can leave off the specific page name (that is,
index.html , home.htm , and so on). On the other hand, you can be as specific as necessary to link to