Introduction
This week we will look at several other ways to use links in web pages. In previous lessons, we have learned how to link to local pages, to Internet sites, to e-mail addresses, and to anchors. However, there are other useful tools available to you as a web designer.
Targets
One option is to specify a “target”. A target is a piece of information that tells the browser where to load the page you just clicked on. Normal links have a default value of _self, which means that when you click on a link, the new page opens in the same window. However, this is not the only option. A value of _blank will cause a link to open in a new browser window.
Try adding the target property to one of your links in your TableOfContents.html assignment and see what happens:
<a href="url" target="_blank">Link Text</a>
If you did it right, when you click on that link a new browser window will open with the page you clicked on. This can be very helpful in some situations but it can also be very confusing if new windows keep popping up.
Keyboard Shortcuts
Another cool thing you can do with links is to add a keyboard shortcut so you can “click” on a link with the keyboard instead of the mouse. On Assignment 11, add the accesskey property to one of your assignments:
<a href="url" accesskey="x">Label</a>
where X is any number or letter. If you did it right, you should be able to hold down the [Alt] key while you type the Access Key and the browser will select that link for you. You need to then hit Enter to actually go to that link.
Note that this won’t do anyone a bit of good unless you also include some text to tell your visitor about the Access Key.
Example: Nicaragua Christian Academy (Alt+N)
Link Color
You can see that all of your links are automatically blue. That is the browser’s default color for links. But guess what? We can change that. Inside the <body> tag you can add properties for the link colors:
<body link="#xxxxxx" vlink="#xxxxxxx" alink="#xxxxxx">
where the LINK is the color of a normal link, VLINK is the color of a link that’s already been visited, and ALINK is the “active” color, which means the color the link changes to as it’s being clicked. The Xs are the now-familiar HTML color code. These codes will apply to all the links on a particular page. Try it out on your Assignment 11 page.
Image Links
So far you have used text for your links, but did you know that you can also use pictures? Just replace the text with the code for an image. For example:
<a href="url"><img src="picture.jpg"></a>
Now instead of blue underlined text, you should have a blue border around your picture. Remember that you can change the width of this border with border="x" in the img tag. It is also a good idea to use the alt="alternative text" property to let the user know what’s going to happen when they click on the picture.
Anchors on Other Pages
Also, you can include links to anchors on other pages. Your code will look something like this:
<a href="birds.html#parrot">Parrot (Birds page)</a>
In this case the # tells the browser to look for an anchor after going to the birds page.