Links

How do you create a link to either another page on your web site, or a url somewhere else on the web?  This can be done with the <a href="..."> tag, and it ends with an </a> tag.  As I mentioned before, when I discussed the absolute address, and the relative addresses you do not have to put the full url in the link if it is one of your own pages, but if it is an outside web site url, you do need to put the whole thing in, including the http:// on the start of the web address.  Let's put a link to this page on your sample.html page, after the last text that you entered.  After the <a href="..."> your need to enter some text for the link.  The link should look like this:

<a href="http://www.heartcrygraphics.org/tut3.html">Lesson 3</a>

Now save, upload and view your page.  Now, click on the link, and it should take you to this page.  You can link to any url on the web, but you might not always want your visitors to leave your page never to return.  You can make the link open in a new window, and then when they are finished with that page, they can close it out and your site will still be there.  To do that, you need to put in this attribute in the tag:

<a target="blank" href="http://www.heartcrygraphics.org/tut3.html">Lesson 3</a>

Try that in your sample page, and see how the new window opens up.

One very common link is an email link, so that your visitors can email you.  We will now learn how to put a simple mail link in our sample.html page.  This is basically the <a href="..." tag, but instead of a url we will put in your email address.  Like so...

<a href="mailto:diana@heartcrygraphics.org">Email</a>

When you click on the link, your email will come up, with your email address in the "to" section.  If you would like to link your email to an image, like the email image that I have on the bottom of the page here, just put the <img src="..." tag after the <a href="..." tag.  The image can be anything that you want it to be.  Just do not forget the closing </a> tag, or the rest of your page will be linked to your email.  The same thing with a url link...  Just put the image right after the link.  Then, if someone clicks on either the linked text or the linked image, it will take them to either your email or the url on the web.

How about if you just want to link to a specific part of your page?  You can create an anchor on any part of your page, and link to it.  One example of this is the table that I have created at the top and the bottom of this page, that has links to different parts of this page.  If you click on "Links" in the table, it will bring you right to the "Links" section where you are right now.  You do this by placing this code where you want your link:

<a name="#.....">

And then put the name of the anchor after the # in the link. You can name it anything that you want. Then create a link to your anchor somewhere on your page using:

<a href="#...."></a>

That link will bring you right to your anchor on the page. If you want a link to the top of your page, just put in:

Other Body Tag Attributes

We have seen some of the things that you put in the Body Tag, and now we will discuss the other things that normally go in a good Body Tag. Text color for the page and link color are normally included. So, lets give our sample.html page these attributes in the body tag.

<body background="bkg110.jpg" bgcolor="#C0FFC0" text="#000000" link="#0000FF" vlink="#008080" alink="#0000A0">

This will give you bright blue links, purple on a visited link, and dark blue on an active link. Your text will be black. If you do not want to change your font, the text will be formatted in the body tag. You can change your links to whatever you want, but remember that they do need to contrast with the background or the background image in order for them to be readable.