- home |
- workshops |
- tutorials |
- e-portfolio |
- LIS
Module 1: HTML Basics
Creating Hyperlinks
If you want to connect your web page to other web pages that you created or
to other web sites on the Internet, you'll have to create what is called an Anchor
tag <a>. An link or anchor is the highlighted text that you
click on and see highlighted on a web page.
For example this is a hyperlink: LIS WebTeam Home Page
The code for this hyperlink is:
<a href="http://www.hawaii.edu/slis/webteam/">
LIS WebTeam Home Page</a>
An Anchor contains an address (Uniform Resource Locator, or URL) that is required
to tell your browser and the computer that hosts a web site where to locate a
particular file. In the example above, the <a> tag contains
an attribute called the href="http://www.hawaii.edu/slis/webteam/".
The href attribute is followed by an equal sign, =,
and beginning and ending quotes. Enclosed within those quotes is the URL of the
LIS WebTeam home page.
After the beginning <a> tag, you have a descriptive label
for the link. In this case it's the LIS WebTeam Home page. You then close the </a> for the link to work.
Types of Links You Need to Know
There are two types of hyperlinks: Absolute and Relative. An absolute link is described above, and it's used to link to an external web site, or a site that another web author has created and exists on another computer on the Internet. Use absolute links to connect to another web site.
Absolute links look like this:
<A href="http://www.hawaii.edu/slis/webteam/">
LIS WebTeam Home Page</a>
On the other hand, if you want to connect to another web page that you created, (link to your own documents within a given work folder), you should use relative links). A relative link is portable, meaning that if you move your web site to another work folder, your web site will still work. If you used absolute links, you'd have to change all of your absolute links in order for your web site to work.
For example, if I moved the LIS WebTeam home page from the /webteam directory (folder) to a new folder called /liswebteam, I would have
to physically change all the absolute links from http://www.hawaii.edu/slis/webteam/filename.htm to http://www.hawaii.edu/slis/liswebteam/filename.htm
Does this makes sense? Well, many people get confused by this concept and it takes some time for it to sink in, so here's an example of what relative links look like:
Relative Path |
|
Relative Path |
|
Relative Path |
|
Absolute Path |
|
top of page