Different Link Types

In this tutorial we are going to learn how to add Links to your pages. Links can come in many different forms. The 2 most common being text and graphic links.

Step 1: We will start with text so open your HTML document and work out where you want your menu or links placed. Type your text. In this case I will add my links in this sentence by saying "please visit my site at Sea Jay Graphics". I want the words "Sea Jay Graphics" to be the link.

Step 2: The code for this will be A HREF="http://www.seajaygraphics.com". This has to go inside these brackets <> and have a closing tag as well.

Place your cursor in front of the word you wish to link. In my case it is the S in front of Sea. Start with your "<" and then type A HREF=, followed by the address you want to link. Below is an example of mine. Note the close at the end of the word "Graphics". All links require a closing tag.

That is how simple it is to add a link to your site and link it to wherever you want your guests to go.

Adding links to Graphics

Most people prefer to use graphics as a link. Graphics allow us to be more individual in displaying our artistic preferences, they make a page look more vibrant and alive. The drawback being graphics take longer to load then text so pages will be slower in opening. If you are like me, I do not care about that. I want my pages to look good and I am a firm believer that graphics on personal pages are what makes or break them.

There is little difference to adding links to graphics as there is to text.

Step 1: You will already have your graphics made or chosen from one of the many excellent Graphic sites online. Work out in your mind where and how you want them positioned on your page. They can be changed later if you are not happy with the end result.

Step 2: You now need to insert your graphic before you can link it. Have a look at my code example below. The name of my graphic is "Cj3" and the Width and Height is the size. The "IMG SRC" is the HTML code to make this image appear on your page. Insert your image name and size in place of mine.

Results in this:

Step 3: If you want that graphic central on your page you need to add the following code. In this example the word "CENTER" is used but can be replaced with "LEFT" or "RIGHT", depending on where you want the graphic placed.

Step: 4 To add your link to this graphic is the same as adding a link to the text menu as described in the above tutorial. Below is an example. Again replace the address with your own.

Step 5: The end result. Note how the end result has a border around the graphic. This spoils the effect. You need to add BORDER="0" after the "200". Leave a space and add the Border code. Look at the example below.

You now have a linked graphic on your page. Whether you are linking to another page on your site or a completely different site, it does not matter. You need only change the address in the code and the name and size of each graphic if different from the first.

Adding an Email link

Adding an email link is very similiar to other links but the code is slightly different. I have added the mailbox graphic and attached my mail link to the graphic. The example code below the mailbox shows you what code you need to add and how to add it. Naturally exchange my email address for your own.

Link opening in a new page

How do you get your link to open in a new page? Simple, again my example below will show you what code to add to achieve this. You need only add target="_blank" at the end of the HREF bracket as pictured below.

I hope this came in useful!