Working with Links
by Irene Smith
This tutorial assumes that you know enough about computers to understand what a path is. If you can locate files on your own computer's hard drive, you're fine. If you don't understand this information, you can probably still use the information here by copying the samples and experimenting. This article covers the most basic versions of the linking
tag. In a future tutorial, I'll cover some of the more advanced options, such as linking from within a frameset (for those of you who want to work with frames) and other more advanced link-related topics. There are three basic types of links you will need to use in creating your web pages:
- links to other pages
- links to graphics
- e-mail links
Once you have mastered these tags (and a few others) you will be able to create quite complex web sites.
When you want to link to other pages, you use the link tag. It looks something like this:
<A HREF="address">The text that people click to get to the page.</A>
The word address would be replaced with the address of the page you want to link to. There are two types of link addresses: relative and absolute. Use relative addresses to link to other pages within your own web site. For example, if I had a page called news.html, I could create a link to it like this:
Read the latest <A HREF="news.html">news</A> about this site.
This assumes that the file "news.html" is located in the same directory where the page with the link is stored. You can refer to files in other directories on your site by including the relative path. For example, if I have a directory called "personal", and I want to provide a link to a file in that directory from a file in the main directory, I would use a link tag that looked like this:
Take a look at <A HREF="/personal/myresume.html">my resume.</A>
The second type of link, the absolute link, includes the full internet address of the page to which you are linking. For example, if you wanted to create a link to my site, The Tangled Web, you would create a link tag like this one:
Visit the <A HREF="http://www.fortunecity.com/skyscraper/babbage/158/">Tangled Web</A>
Simple, isn't it? Now for image links. There are two kinds of image file formats you can use. These are: "GIF" and "JPG" and the files will have extensions of ".GIF" and ".JPG" respectively. Referring to image files is quite similar to
referring to other web pages. You have to provide the address of the graphic. You will almost always use relative addresses for graphic files if you are an honest webmaster because netiquette dictates that your graphics be stored in your own web site's directories. The only real exception to this rule would be for web ring graphics or other cases where the owner of the graphic specifically suggests that linking to a graphic directly is all right. Never, never, link to other people's graphics without their permission. If you need an explanation of why this isn't a good thing to do, take a look at the information at: Web
Prestige. Anyway, a graphic link looks like this:
<IMAGE SRC="image.gif">
Of course, you would replace "image.gif" with the name of your own image file. You can use relative addressing here as well, so you can store all of your images in a directory called "images" or "pictures" or whatever. The name would then look like this: "images/image.gif". There are several other pieces of information you should also include in a link tag. One is text that will be displayed for people who have browsers incapable of displaying graphics (or who are surfing the 'net with graphics turned off.) You should also include information about the height and width of the graphic, because it will allow the web browser to display the text on your page more quickly because it can leave an appropriate amount of space for the graphic while the graphic is downloaded to the reader's computer. The
finally parameter you might want to add to your image reference is the width of the border you would like to have around the image. Usually, you will specify that you don't want a border, but you could define a width for your border (in pixels). A full image tag would look like this:
<IMAGE SRC="fido.jpg" WIDTH="150" HEIGHT="150" ALT="Picture of my dog." BORDER="0">
The final type of link that you might want to include in your pages is the "mailto" link. This link allows people to send e-mail to you easily and it uses the same link
tag that is used to link to another web page. The difference is in the way you specify the address. An e-mail link looks like this:
<A HREF="mailto:[email protected]">Send me a message!</A>
Begin the address with "mailto" and then insert the e-mail address of the person to whom the message will be sent. When a reader clicks on this link, it will bring up the person's e-mail program and let them send an e-mail message to the e-mail address listed. It's probably a good idea to list the e-mail address in a form that will be visible to readers as well, just in case their browsers don't support this kind of link. The chances of that happening are getting smaller all the time, but it doesn't hurt to err on the side of caution. In other words, instead of the saying "Send me a message," say something like this:
Send me a message at: <A HREF="mailto:[email protected]">[email protected]</A>
That's it for basic link tags. There are other parameters you can include, but this will give you a start. Watch for Working with Links Part II.
|
