Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


HTML Basics: Links : Page 4

Learn to link to other pages. Make a link that lets other people email you. Change the color of your links.

Using the Anchor Tag

<a href="URL" target="targetname"> Linked Text </a>

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:

<a href="http://www.gettingstarted.net/basics/links/05a-helloworld2.html">Hello World!</a> 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 Attributes

The 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:

<a href="http://www.devx.com/projectcool>Go to Project Cool's Home Page.</a>

If you are sending mail to an address, use the email address instead of the server and filename, like this:

<a href="mailto:feedback@devx.com">Send Me Mail!</a>


The 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:

<a href="http://www.gettingstarted.net/basics/links/05a-helloworld2.html" target=new>Devx!</a> <br> 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:

  1. Move the cursor to the spot in the file that you want to mark.
  2. Type <a name="
  3. Then type the name you want to give this mark. Make sure you enclose it in quotes. The name must be one word without any spaces.
  4. Close the tag.
  5. 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:

<a name="eating">

<h2>How to Feed Your Iguana</h2>

Now you can jump to that exact point in your file from any link.

To link to an anchor mark:

  1. Move your cursor to the spot where you want to place the link.
  2. Start the anchor tag as usual, typing the href switch and the URL of the file.
  3. Now type a pound sign and the name you gave the anchor mark: <a href=""iguanas/basics#eating"
  4. 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 <a href="iguagnas/basics#eating"> feeding</a> your new reptilian friend.

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date