All right, it's time to learn how to link to another page. So let's start out by seeing what
tag we use for linking:
<a href="http://www.pageresource.com">The Web Design Resource</a>
It will show up on your page like this:
<a href="http://www.pageresource.com/html/linking.htm">Linking to Other Pages</a>
Which gives us this link:
<a href="linking.htm">Linking to Other Pages</a>
This will create the same link we just did, but we didn't have to write as much.
Changing the Link Color
<body link="blue">
Or the tag might have some other commands as well:
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF">
You may also just have the word body with nothing else there. If so, add the command after
the word body, with a space between the two, like this:
<body link="blue">
Now, to change the link color, you replace the word blue inside the quotes with a
different color name or hex code. For a list of some common color names and hex codes,
click here.
So, if you would like to change the link color to red, you would type the following:
<body link="red">
Or using the hex code:
<body link="#FF0000">
Now, all the links on your page will be colored red rather than blue. You can also do the
same things for active and visited links by adding or editing their commands. The commands
are:
alink="color" For the active link color
vlink="color" For the visited link color
You might have:
<body link="blue" alink="blue" vlink="violet">
To change the other colors, do the same as you did for the link color. If you need to add
the commands, go ahead. Just place a space between each command, and add your
colorsUsing an Image as a Link
<a href="http://www.ncictnotes.blogsspot.com">
Now, don't type any text, and don't close the tag just yet. What we are going to
do is place the image tag right after the opening link tag. The image we are
using here is "next.jpg". So, you would type the following:
<a href="http://www.pageresource.com">
<img src="next.jpg" />
OK, now we are going to close the link tag at the end of the image tag, so that the
image tag is between the opening and closing link tags, like this:
<img src="next.jpg" />
<a href="http://www.pageresource.com">
<img src="next.jpg" />
</a>
Now that the image is between the link tags, it will operate the same way as a normal
link, but now it is a visual image. Here is what the above code would produce:
<img src="next.jpg" />
</a>
Move the mouse over the image, and it will turn into the little pointing hand. If you click on the image, you will end up all the way back at our main page.
Well, that's good, but what's with the border around the image? Well, the border just seems to be added by default on most browsers. To get rid of it, add this command to the image tag:
border="0"
Here is an example:
<a href="http://www.pageresource.com">
<img src="next.jpg" border="0">
</a>
Now, the picture will be a link, and you won't have the extra border around the sides:
<img src="next.jpg" border="0">
</a>
You can also make the border larger in the same way, just use a larger number in there, for instance:
border="5"
The drawback to the border is that it insists on being the color of your link color,
and sometimes this isn't the color you want to use. You can fix this using
style sheets if needed.
0 comments:
Post a Comment