HTML and CSS Reference
In-Depth Information
href="http://www.nps.gov/state/hi/index.htm" moved to a new Web server, your link
would not work and would therefore have to be changed.
Relative paths
specify the location of a file, relative to the location of the file
that is currently in use. This is analogous to telling someone your house is located four
doors down from the only gas station on that street. Your address in this case is relative
to the beginning point, the gas station. Because your user has a beginning point (the
gas station), you can describe the ending address (the house) relative to the beginning.
A relative path allows you to move up the folder structure. So in the example shown in
Figure 3-17, to display the image underwaterlogo.jpg (stored in the Images subfolder)
from the Web page underwatertours.html (stored in the HTMLcode subfolder) within
the Chapter03\ChapterFiles folder, you would use the following relative path structure:
\Images\underwaterlogo.jpg
Looking at Figure 3-17, you would store the image underwaterlogo.jpg in the
Images subfolder and store the Web page itself, the underwatertours.html file, in the
HTMLcode subfolder. If you moved the image to the HTMLcode subfolder and viewed
the underwatertours.html file, the image underwaterlogo.jpg would not appear because it
is not in the original folder.
Another example is storing one file at the root level and one in a subfolder. If you
stored the underwatertours.html file in the HTMLcode subfolder, but stored the image
underwaterlogo.jpg in the ChapterFiles folder, you would use the following relative path
structure, in which the two dots (..) indicate one directory level up:
..\underwaterlogo.jpg
To display the underwatertours.html file with the underwaterlogo.jpg image, you
would use the following relative path when identifying the image:
<img src="underwaterlogo.jpg" width="581" height="450"
alt="Underwater Tours logo" />
Another example is the relative addressing that you use in this chapter to link to the
second Web page from the home page, and vice versa. The HTML code to link from the
home page, underwatertours.html, to the second Web page is:
<a href=”samplephotos.html”>sample photographs</a>
and to go from the samplephotos.html Web page back to the home page, the HTML code is:
<a href=”underwatertours.html”>home page</a>
You currently have one folder ChapterFiles in the Chapter03 folder. Because
HTML code and images are all in the same folder, your HTML code to access those
images would look like this:
<img src="fish.jpg" width="259" height="387" alt="Frog fish" />
<img src="lobster.jpg" width="387" height="259" alt="Lobster" />
It is better to use relative paths for flexibility whenever feasible. If the root folder
(i.e., the “highest” folder in the hierarchy) must change for some reason, you do not have
to change all addressing if you used relative paths.
