Creating Links on Your Page
Links allow your visitors to connect to other parts of your page or to other pages alltogether. Those pages can reside on your server, or can be on someone elses server.
Well, we didn't get around to talking about Lists. BUT, I did pass out CDRoms to everyone. I put together an initial toolset for everyone to use. In that bag of tricks is a program called EditPlus. We used that as our text editor of choice. In fact, I am using it right now to create this page. It is very extensible while being easy to use. Let's recap...
General Info on HREF
Absolute Reference
Relative Reference
Using Images
Other Stuff
Hyperlinks are what make the web the WEB. Links are typically bound to words like "read more..." by using an anchor tag. You can also choose to link to a picture. Read more about that in the image section. To create a basic link, you need to understand the anatomy of the hyperlink. So check this out:
<A HREF="http://www.mysite.com/links.htm"> My Links </A>
In the above h4, if you were to click on it on a real page it would take you to a page called links.htm and replace whatever page you were currently viewing. You see the inital Anchor tag with the A. The word HREF tells you that you are making some sort of link here. Links.htm is the page that we are referring to. We defined a link using its absolute reference. That means that we said "www.mysite.com/links.htm"
.
You need to tell the web browser where you want to take them. An absolute reference is exact, but kind of long-winded. This is like telling a salesman leaving your house to "please bother my neighbor living at 134 Link Street in Elkhart, Indiana". The directions are pretty exact. (you could have just said the neighbor to your right, but we are talking absolute right now.)
The http:// used defines to use the HyperText Transfer Protocol. It is the key mode of communication on the Web. If you need to specify FTP, because the file is on an FTP and NOT a web server, you would specify FTP://
This does not refer to Grandpa and Cousin Jim. Relative reference lets you describe a link in relation to where you are in a site/webserver. Like in the salesman example above, you can use your existing page as a reference point. If in the above link example, our links.htm file was located in the same folder as the document that contains that link, we can use
"links.htm"
instead. This assumes that the file links.htm resides in the same folder and on the same webserver that you are viewing the current page from. A neat thing about relative links is that you are not just limited to the current folder. Let's say that you have a website setup with the following structure:
.
Assume that the root folder of your webserver is "html". So
"http://www.mysite.com/index.htm"
will point to a file named index.htm located in the "html" folder shown above. Lets imagine that we need to have a link on that index.htm page to a file called done.htm
done.htm is located on the same server, but under the class/Davenport/cis101 folder. It would have an absolute reference of
"http://www.mysite.com/class/Davenport/cis101/done.htm"
Your link in the index.htm would look as follows:
<A HREF="/class/Davenport/cis101/done.htm"> A link to the Done page </A>
Seems simple enough right? So what if we were looking at the done.htm file and wanted to have a link there that pointed back to the Davenport schedule located at
http://www.mysite.com/class/Davenport/schedule.htm
Using ".." will take you back a directory, so you would simply use the following h4:
<A HREF="../schedule.htm"> Schedule</A>
To get back up one folder and then view the schedule.htm
<A HREF="/class/Davenport/cis101/done.htm"> A link to the Done page </A>
If you want to use an image as a button, simply put the img tag within the anchor. It would look like the following:
<A HREF="http://mail.yahoo.com"> <IMG SRC="email.gif"> </A>
What else can you do? What if you did not want the visitor to click on a link that would have them leave your page to never return? What if you wanted to open the link up into a new window?
Ok, enough questions already! If you specify a target, like
<A HREF="links.htm" target="new"> My Links </A>
, you will have the link open up into a different browser window.
This functionality is actually intended to be used to navigate framesets, so that links from an index column can open links in the main page. You can use it, though to open in a new window without having to use javascript.
Randall Perry Copyright © 2002. All rights reserved.
Revised: 04/22/02.