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.
My text link now looks like this. Please visit my site at
Sea Jay Graphics.
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="new window"
at the end of the HREF bracket as pictured below.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.