We have seen that in an
<a> element, the
href attribute use used to give the destination of the link. This destination is a URL, but there is more to say about that, and we should have a look now.
URLs are also used to refer to images so they can be displayed on the page. The
<img> tag is used to insert images into a page like this:
<p><img src="http://example.com/vacation.jpg" alt="My vacation" /></p>
src attribute is used to give the URL of the image. The
alt attribute gives alternate text: text that can be displayed in place of the image if it can't be loaded (because it can't be found on the server, or network problems, or any other reason). Both of these attributes should be specified and the tag is empty, since it just marks the place an image should go, but doesn't have any content.
The URLs that we have seen so far are absolute URLs. Absolute URLs contain a scheme, server, and path as described in the topic The Web and HTTP (but the path may be empty).
Absolute URLs can be used to locate a piece of content on the web with no other information or context.
In HTML, you can also refer to content by giving its position relative to the page you're looking at. These relative URLs give information like “in the same folder, find the page
nextpage.html” or “look in the folder
images for the image
In the same folder
The simplest relative URL is the one that specifies “look in the same folder”. To do that, you simply specify the filename:
<a href="nextpage.html">next page</a> <img src="happy.png" alt="happy face" />
The first line creates a link to the page
nextpage.html in the same folder as the HTML page that contains that link. The second line references an image
happy.png in the same folder.
The nice thing about relative URLs is that they will work between pages on your site, no matter where that site is. You can create a link
<a href="menu.html"> that you want to take you back to your site's menu: it will work when you're editing the files on your computer and it will work after you have uploaded the site to a web server.
Into a folder
Referring to files in the same folder is straightforward enough, but you will often want to organize your files into a folder structure. Suppose we have organized our HTML and images into folders like this:
If we want to link from
about.html like the above:
<a href="about.html">about me</a>.
But what if we want to link into a folder: link from
europe.html in the
vacations folder. We can put code like this in our
<a href="vacations/europe.html">European vacation</a>
What this means to the web browser is “start where the current file (
menu.html) is; move into the
vacations folder and find
europe.html.” Note that the folder and file names are separated by a slash (/), not a backslash (\) or other character. Slash is the only character used to separate folders in URLs.
We can also move in multiple folder levels by giving each folder to enter. Again, if we were adding code to
menu.html, we could link to or include the image
eiffel.jpg like this:
<a href="vacations/pictures/eiffel.jpg">us at the Eiffel Tower</a> <img src="vacations/pictures/eiffel.jpg" alt="Eiffel Tower" />
These would create a link (first line: user clicks the words “us at the Eiffel Tower” to go to the image itself) and embed the image (second line: image appears on the
menu.html page itself).
Remember that relative URLs depend on where the page itself is in the folder structure. If we wanted to do the same thing on the
europe.html page, the code would be this since we start inside the
<a href="pictures/eiffel.jpg">us at the Eiffel Tower</a> <img src="pictures/eiffel.jpg" alt="Eiffel Tower" />
Up a level
The above lets us descend into folders, but we will also need to move up out of them. For example, if we're working on
math.html and want to make a link back to the menu.
What we have to express to the browser is “move up out of this folder (
courses) and find
menu.html.” We can use the special folder name “
..” to do this: the web browser will understand it as “move up a level”. A link to the menu one level up is expressed like this:
We can do the same thing to move up two levels. We could put this on<a href="../menu.html">back to the menu</a>
<a href="../../menu.html">back to the menu</a>
This link will tell the browser to go up a level (out of
last-semester), up again (out of
courses), and find the file
We can combine these to traverse the folder structure. Again, suppose we're working on
geog.html. This would insert the image
<img src="../../vacations/pictures/big-ben.jpg" alt="Big Ben in London" />
The rules of relative URLs may seem complicated at first, but remember that they will save you effort in the long term. All of these relative URLs will work when you're editing the site on your computer, and they will continue to work after you upload everything to a web server (as long as you keep the folder structure the same).
URLs are case sensitive. That means that the URL
page.html is a different URL than
That means that the URLs you use must match your files. This can be difficult since both Windows and Mac computer are case insensitive: the file names
Page.html are considered to be the same.
That means that if you use the HTML
<a href="page.html"> to refer to a file you have named
Page.html, then it will work on your computer but not on a web server. Make sure your URLs and filenames match (probably by using lowercase everywhere).