Adding Text and Image Links

Links ... they are what makes the Web the Web. The ability to link from one document to another is one of the most central features of HTML. This tutorial describes text links, e-mail links, anchor links, and using images for links. The <a> can be an anchor and/or link, depending on whether the attribute "name" or "href" is used. A link can point to any resource on the Web including an HTML page, an image, a sound file, a movie, or even to another place on the same Web document.

Text Links

The <a> tag is used to create a link. The href="x" attribute is used to address the document to link to, and the words between the open <a> and close </a> of the anchor tag will be displayed as a hyperlink.

This is a link to another Web document. You should always had a trailing slash to sub folder references, otherwise you will generate two HTTP requests to the server because the server will add the slash and then create a new request. When creating a Web site, your "home" page should be named either "default.html" or "index.html". It is not necessary to use the file name when linking to your Web site. The server will automatically "default" to the opening document. If you want the link to go to a specific page you will need to include the file name and extension.

<a href="http://www.domain.com/">Visit this home page!</a>

<a href="http://www.domain.com/samples/sample_1.html">Sample Page One</a>

With the target="_x" attribute, you can define where the linked document will be opened. The common target attributes include: "_blank" (browser opens document in new window), and "_self" (browser opens document in current window, default setting).

<a href="http://www.domain.com" target="_blank">

E-Mail Links

This is what is known as a "mailto:" command. It follows the same coding scheme as the hypertext link above. You do not use the target attribute when using e-mail links.

<a href="mailto:you@yourmail.com">E-mail me!</a>

If you would like to automatically fill in the subject area you would add ?subject=Your%20Subject%20Here. Spaces between words should be replaced by %20 to ensure that the browser will display your text properly

<a href="mailto:you@yourmail.com?subject=Your%20Subject%20Here">E-mail me!</a>

The Anchor Tag

The name="x" attribute is used to create a named anchor link. When using anchor links we can create links that can jump directly to a specific section on the same Web page, or to a specific section on another Web page. The name of the anchor can be any text you care to use - it works as a label. You do not add any text to the link.

<a name="Go Here"></a>

To create the link add a "#" sign to the href="x" attribute. If the anchor name is on the same Web page as the link, you only need to add the anchor name. If the anchor name is on another Web page, you will need to add the complete URL.

<a href="#Go Here">Go Here</a>

<a href="http://www.domain.com/#Go Here">Go Here</a>

When creating anchor links on eBay, you will always use the complete URL, even if the anchor name and anchor link is on the same page.

Image Links

To use an image as a link, insert an image instead of text, it is that easy! If you do not want a border around the image, add the attribute border="0".

<a href="http://www.domain.com/"><img src="image_name.gif" border="0" alt="image"></a>

Colorizing Your Links

To choose the colors of your links, you use the attributes link="x", vlink="x", and alink="x" in the <body> tag.

<body link="#ff6600" vlink="#ff6600" alink="#7c7e01">

Using a small bit of CSS, you can remove the underlines from your links. Just add style="text-decoration: none;" to the <a> tag. To learn more about CSS and Links, please see Hyperlinks/CSS.

<a href="http://www.domain.com/" style="text-decoration: none;">Visit this home page!</a>

Since you can not add any attributes to the <body> tag, you will need to use some inline Javascript and CSS to make your links match your page:

<a href="http://www.domain.com" style="color: #ff6600; text-decoration: none;" onMouseOver="this.style.color='#7c7e01';" onMouseOut="this.style.color='#ff6600';">This is a link that goes nowhere</a>

This is a link that goes nowhere

To Top TO TOP