Dress Up Your Links | How to Do Everything with HTML & XHTML

Links can be modified several different ways to affect their appearance and function. They can even be modified to give your visitors feedback. Unfortunately, not all of these work with every browser, so keep in mind that these are bells and whistles; they are nice to use, but don’t make your site dependent on them.

Give Link Details with the title Attribute

The title attribute is a nice little addition that unfortunately has limited browser support. By adding the title attribute to your anchor tag, you can add an explanatory comment to your link. When a visitor’s mouse passes over the link, a small text box will appear with your comment. For example, the Webmaster of the imaginary university referred to earlier could add the title attribute to the biology course link explaining what the link leads to:

<a href="courses.htm#biology103" title="Introductory Biology"> BI-103</a>

Tip

The title attribute is a very useful universal attribute. You can put it inside any element and get the same explanatory box (called a ToolTip) in IE4 and above.

Modify Link Appearance with CSS

If you’ve read Chapter 4, you’ve already covered much of what can be done with links through Cascading Style Sheets. There are a few other things you can do to modify your links, both with inline and embedded style sheets.

Remove Underlines with text-decoration: none

You might decide you’d rather not have the links in your page underlined. You can turn off underlining on a link-by-link basis by using the style attribute with the "text-decoration: none" property, as in the following code listing:

<a href="anypage.htm" style="text-decoration: none"> This link has no underlining.</a>

This particular style affects only the link with which it has been included. To turn off underlining as the default setting for a page, embed a style in the <head> </head> portion of the page:

<style> a:link {text-decoration: none}</style>

Caution

Link underlines are an easy way to identify the links on your page. Many authorities on Web design discourage Web authors from removing these underlines. However, if you choose to remove the underlining, be sure that you make your links easily identifiable by some other means. After all, the purpose of links is to help visitors navigate your site. If they can’t find the links, they can’t navigate.

Change Link Colors Dynamically with a:hover

If you’ve done much Web surfing, you certainly have encountered mouseover effects, in which an image (usually a navigation tool) changes appearance when the cursor moves over it. With Cascading Style Sheets you can easily create that effect in links by using the pseudo-class a:hover (see Chapter 10 for more on pseudo classes). The downside of this effect is that it is not recognized by older versions of Netscape. Your links will still work; they simply won’t be affected by this style. The following code, inserted in the head portion of any page, will alter the links so that they have no underline and change to red when a cursor moves over them:

<style type"text/css">      a:link {text-decoration: none}      a:active {text-decoration: none}      a:visited {text-decoration: none}      a:hover {color: red} </style>

There are many more things you can do with inline and embedded style sheets. If you want to learn more, skip ahead to Chapter 10.

Modify Link Appearance with Text Elements (Discouraged)

Although the W3C discourages this, another way to change the appearance of your links is by using text elements. As always, the preferred method of controlling presentation is through Cascading Style Sheets. However, virtually any of the text elements covered in Chapter 2 can be applied to a link. You are not limited to lines of default, which is basic blue text for links. You can change the size, color, and even the font. Experiment with some of the following possibilities:

<h1><a href="anypage.htm">This is a link inside a heading element.</a></h1> <a href="anypage.htm"><font face="arial" color="red" size="5">This is  a size 5, Arial link.</font></a><br /><br /> <small><a href="anypage.htm">Links in small text are great  for page bottom navigation bars.</a></small> <center><a href="anypage.htm">You can center links, too.</a></center>

click to expand

Check out the text elements in Chapter 2 and create some modified links of your own. The only limitation is that you can’t put a block level element inside the <a> </a> element. You can use most of the block level elements with links, but they must go on the outside of the <a> tags. For example, because <h1> is a block level element, it must go outside the <a> tags. See the following note for more block level elements:

<a href="anypage.htm"><h1>This won't work.</h1></a> <h1><a href="anypage.htm">This will.</a><h1>

Note

Block level elements generally (but not always) insert a line break and space after the element. They are <address>, <blockquote>, <div>, <form>, <h#>, <hr>, <p>, <pre>, <table>, and the list elements.

Project 7: Link Your Pages

If you’ve been working with all the examples thus far in the book, you’ve created quite a few HTML files. In this project you’re going to use what you have learned about hyperlinks to link all of your files together. You will create a simple navigation system that lists all the files you have created and also provides links to them. Additionally, you will create a simple return link that you can insert in each of the pages to bring you back to your home page. As you continue to work through this book, you will take this simple group of files and mold them into a model Web site. So roll up your sleeves and prepare to become a Webmaster.

Select the Files You Want to Link

You may not want to use every file that you have created, but in case you do, Table 5-2 provides a listing of all the files created for the first four chapters of this book. The column on the left is a suggested name for the link you will create; the column on the right is the filename you will use to create the link. Of course, if you used different filenames when you made your own pages, you’ll need to substitute those when you design your links.

Table 5-2: Files Created in Chapters 1–4
Page Description or Link Name	File Name
Home Page	index.htm
Headings	headings.htm
Text Elements	text.htm
Superscript & Subscript	sup.htm
Deleted Text	del.htm
Preformatted Text	pre.htm
Unordered List	ulist.htm
Multi-Level Unordered List	ulist2.htm
Ordered List	olist.htm
Ordered List with Start Attribute	olist2.htm
Outline List	olist3.htm
Definition List	dlist.htm
Text Formatting	text-format.htm
Generic Fonts	generic-fonts.htm
The Color Property	font-colors.htm
The Sixteen Basic Colors	16colors.htm
CSS Color	css-color.htm

Write the HTML to Link Your Pages

When you have identified the files you want to link, all you need to do is to write the HTML markup that will link your index.htm page to these files. Although there are any number of different ways you can do this, for this project you are going to create a simple unordered list, with each list item providing a link to a page. Each list item will also have a short descriptive term that identifies the content of the file you’re going to link to. To create your list of links, follow these steps:

Open index.htm.
Delete the existing sentences between the <body> </body> tags.
Change the <title> to My HTML Reference Guide.
In the <body> of the page, add an <h1> heading that reads Pages I’ve Created.
Below your heading, type an opening unordered list <ul> tag.
On the next line, type an opening list item <li> tag.
Beside the <li> type your opening anchor tag like this: <a href="headings.htm">.
Next, add your link text: Headings, followed by the closing anchor tag </a>.
Finally, add a closing list item </li> tag.
Your completed link should look like the following markup:
```
<li><a href="headings.htm">Headings</li>
```
Create a similar link for each of the remaining files listed in Table 5-2.
When your list is complete, don’t forget to add the closing unordered list tag </ul>.
Add a final link that directs visitors back to Home (your home page). This link should point to index.htm, as in the following code:
```
<a href="index.htm">Home</a>
```
Save index.htm.
If you want to, insert the Home link at the top or bottom of each of the pages you linked to. This will enable visitors to click the link to return to the home page, rather than having to use the Back button on their browsers.

If you created a link for each of the files listed in Table 5-2, then your home page should look something like Figure 5-1 when displayed in a browser.

click to expand
Figure 5-1: Sample “Pages I’ve Created” Page

Congratulations! You’ve taken a big step toward creating your own Web site. If you had some problems with this project, the code is provided for you in the “Quick Reference” section of this chapter, coming up next.