Relative/Absolute Links

Relative/Absolute Links:

Now we will use the anchor tag <a> to add a link to your sample Web page. Links are also called hyperlinks,
hypertext, or hot links. You may link within a single document, as well as linking to other “outside” documents.
You may want to add links within a page if your document becomes lengthy. To do this, you will use the
anchor tag in two places.
First, add the following to the top of your page, before the <h1> tag: <a name=“top”></a> [Note: Do not
forget the quotation marks!]
Then, add the following to your page after the final </p> (the “authored by” statement):
<p>Go to the <a href=“#top”>top</a> of the page.</p>
Whenever you put a URL inside an anchor tag, you must enclose it within quotation marks. Also, don’t forget
that the URL is case-sensitive.
Insert the following sentence into your sample page below the numbered list (after the </ol>) to make a link to
the visitor’s page on the University of Maryland Libraries website. (You can use another site if you know the
URL.)
<p>More information can be found in the University of Maryland Libraries
<a href="http://www.lib.umd.edu/visitors.html">Information For Visitors</a> web
page.</p>
If you were to view your Web page in Netscape, Firefox, or Internet Explorer, this is what you would see:
More information can be found in the University of Maryland Libraries Information For Visitors web page.
When you click on the underlined text, you will go to the UM Libraries’ “visitors” home page.
A Word About Links
There are two ways to link to another document – using “relative” or “absolute” links. If you are making a link
from an HTML file to other files or resources on the same server, it is best to use relative path names. For
example, on the library home page (http://www.lib.umd.edu/index.html) there is a link to the Events calendar.
The link is coded as <a href=”/groups/pr/prcalendar.html”>Events Calendar</a>, and goes directly to the
events calendar in the PR folder. Clicking on this link will take you to the Library events calendar
(prcalendar.html). The coding indicates the calendar is in the “groups” folder and “pr” subfolder on the server.
Absolute links include the full URL address in the link. If the Events Calendar link had been coded as an
absolute link, it would have appeared as: <a href="http://www.lib.umd.edu/groups/pr/prcalendar.html">Events
Calendar</a>. Notice the difference in coding, and the length of the URL.
If you are linking from a page on the UM Libraries’ site to another page on the site, it is preferable to use
relative links.
Introduction to HTML – UM University Libraries 8
You are almost ready to view your new page in a web browser! First, be sure to include these important ending
tags at the bottom of your page. Type these tags before you try to display your page in Mozilla Firefox:
</body>
</html>