inking together different ideas and content is a basic strength of the Web. The very name “browser” comes from this idea. The browser lets you, from your desktop, browse through pages, images, and data around the world. Hypertext is the term that describes linking together content across many different locations.
Making a link is easy. You create it by adding an HTML anchor tag. The tag looks like this:
| Definitions | |
| Hypertext | Hypertext is text that links to other information, such as another Web page, or another section of the same Web page. |
Linkable Locations
The most common things that people do with links are linking to another location on the Web or linking to their email address. But there are many types of places to which you can link:
- A spot within your current file.
- A file on your server.
- Any file on a WWW server.
- A file you want people to download onto their own computer.
- A file with an email form that sends email to a specified address.
- A file on a gopher server.
- A file on a WAIS server.
- A file on a Usenet newsgroup.
- A file that starts a Telnet connection to server.
In your anchor tag you specify the Uniform Resource Locator, or URL, of the place to which you want to link. The URL describes a file by type and location. It is structured like this:
FILETYPE://server/filename.ext
- FILETYPE describes the file’s protocol. For example, a file on a WWW server uses the “http” protocol.
- The backslashes are directory dividers.
- The server is the name of the server on which the file resides.
- The file name is the name of the file, including the pathname if necessary.
For example, “http://www.devx.com/projectcool/allie.html” takes you via the http protocol to the server named www.projectcool.com and the file named allie.html.
There are several types of files. Each type is described by a short word, followed by a colon. These are the most common:
- http:
- Hypertext Transfer Protocol. This describes a file on a World Wide Web server.
- ftp:
- File Transfer Protocol. This starts a process of downloading a specified file.
- mailto:
- Mail. This starts a process of opening an email message to the designated recipient.
- gopher:
- Gopher. This describes a file on a Gopher server.
- wais:
- Wide Area Internet Search. This describes a file on a WAIS server.
- news:
- Usenet News Group. This describes a file is on a Usenet News Server.
- telnet:
- Telnet. This opens a text connection to the specified server.
The anchor tag tells the browser to set a hypertext link for the designated text. The text will appear in a highlighted color to indicate that it represents a link. When a reader clicks on the link, the browser pulls up the specified page or file.
The anchor tag must have a matching end anchor tag. The text that is linked appears between the start and end tags.
The linked file is described by its Uniform Resource Locator?its URL. The URL describes the type of file and the file’s location by server name and filename.
For example:
Hello World! How Are You?
displays like this in a Web browser:
Hello World! How Are You?
The highlighted color (it should be blue in this example) indicates a link. When your readers click on the link they go to the file described by that link. Most browsers are, by default, configured to underline links as well.
Anchor AttributesThe anchor tag has two attributes that you’ll use for making a link:
- href
- target
It also has a third attribute, that you’ll use by itself when you are marking a spot in your file to jump to later on:
- name
The href attribute defines the hypertext reference?that is, it tells the browser what to link to. Type the URL to which you want to link as the value for the href attribute. Be sure to enclose the URL in quotes.
For example, to link to the Project Cool home page, you’d use this as your anchor:
targetThe target attribute lets you display the linked file within a specific window. If you are working with a feature called frames, this attribute is important. If you aren’t working with frames you may want to use this attribute to open up a new window for the linked file.
You’ll use the target attribute to call the window by name. To create a new window, we usually use an easy-to-remember name like “new” or “new-window.” For example:
Devx!
How Are You?
displays like this in a Web browser. When you click on the link, a new window opens and displays the linked file. Just click on the close button of this new window to put it away:
Hello World!
How Are You?
The name attribute lets you identify a specific location in your file, called an anchor mark. You can then use that mark as part of a URL to jump directly to that spot in the file.
To create an anchor mark:
- Move the cursor to the spot in the file that you want to mark.
- Type
name must be one word without any spaces.- Close the tag.
- Type the ending anchor tag.
For example, you might have a file that summarizes the behavior of the green iguana. You might want to be able to jump to exact sections from this file from other places on your site. You could set an anchor mark named "eating" next to the section of your file that is about the iguana's food preferences. The tag would look like this:
How to Feed Your Iguana
Now you can jump to that exact point in your file from any link.
To link to an anchor mark:
- Move your cursor to the spot where you want to place the link.
- Start the anchor tag as usual, typing the href switch and the URL of the file.
- Now type a pound sign and the name you gave the anchor mark:
- Then close the anchor tag as usual.
For example, this link (if it were a real link) would take you to a specific location within the file, the location that is marked with the name "eating."
There are some important things to remember about feeding your new reptilian friend.
| Definitions | |
| Target | A target is the page or position where the browser displays a file. |
| Frames | Frames break up a browser's display window into sub-windows. |
| Name | A name is the first attribute in a meta tag is either Name or Http-Equiv. It describes what the meta tag's role is. Use the Name attribute if you're using the meta tag as a container for storing information about the page. |
Link Colors
Browsers are set to use their own default colors for links?typically a blue for linked text and purple for linked text that the reader has visited. You aren't stuck with these colors?through attributes in the body tag you can change the color of both links and visited links.
Remember, a start body tag goes at the beginning of your page's content; an ending body tag goes at the end of your file. Everything between the start and end body tags appears in the Web browser.
Some people argue that you should never change the default colors for links and visited links. We don't agree. What is important, however, is that your link and visited link colors are consistent. People will learn pretty quickly that your links are limegreen?so keep them limegreen throughout the section or the site. Don't change them ramdomly on every single page.
Some people also say the links and visited links should never be the same color. We think you should do what makes sense to your site and your readers. For our site we use the same color for links and visited links; that's a style choice on our part. Your link color decisions should be part of your design process.
Setting Link Color
The link attribute sets the color for your linked text. You can specify color either by name or by a hexadecimal value. For example:
produces chocolate-colored links. Instead of appearing the the same color as the rest of the text or in the default blue, the links are a nice goldeny-brown.
Setting Visited Link ColorThe vlink attribute sets the color for links which have already been visited. You can specify color either by name or by a hexadecimal value. For example:
produces chocolate-colored links. Visited links appear in a white, the color value represented by the hex value #ffffff.
Common ProblemsThere are two errors that are really easy to make when you're using the anchor tag.
First, is to forget one of the quotation marks around the URL value. If one of the quotation marks is missing, many browsers ignore the entire area with the anchor tag and it seems that part of your file has just disappeared. Make sure the URL starts with a quote and ends with a quote.
Second, is to forget to use the closing anchor tag, . If you leave off the tag, your link?and your link color?goes on until the end of the file. If half your file suddenly changes color, check to be sure you have a closing anchor tag.
