Choose a link to get started:

ALL NEW!!!

 Scrolling Marquees

The Basics

 The Basics
Manipulating Text
Images
Backgrounds
Links

More Advanced Topics

 The <HEAD> Tag
Tables
Forms
Frames
Lists

Advanced Topics

 Image Maps
CSS - Part 1
CSS - Part 2
CSS - Part 3
CSS - Part 4

Additional Topics

 XML Tag Formatting
XHTML - Part 1
XHTML - Part 2

Links

        Before we get to the actual tutorial, I would like to remind you that this is the last subject on the list of basic tutorials. I would also like to congratulate you, if you went through all of the basic tutorials, for making it this far. I hope you will continue to go through tutorials here and elsewhere and expand your HTML knowledge.

        I saved this tutorial for last because its contents refer back to almost every other basic tutorial, except the backgrounds. You have probably seen those web sites that are just one page. They go on and on forever. This tutorial is to help prevent your site from being like that. This is acheived through links. They, like their name suggests, link one page to another. See the navigation bar at the left of the screen. Those are examples of links. They are rather simple to contruct, and all follow the same basic pattern.

<A HREF="links.html">Links</A>
Using this yields : Links


        Let's get back into the habit of tearing apart the script to make it more understandable.

  • The specific name for the tag is the anchor tag, hence <A>. This tells the browser that there will be another page anchored, or connected to the current one.
  • HREF stands for HyperText Reference. This tells the browser where to get the information to load the specified page. In other words, it points the browser to which page to load.
  • ="links.html" is the part of the script which actually points to the page for the browser. It is mark that tells the browser which page of a directory to load.
  • Links - the text in between the anchor tag and its partner is what will be displayed on the page as the anchor point. Clicking there will take you to the specified page.
  • </A> finishes off the process. Don't forget to use the tag, or the rest of the page after that will be linked and you will get errors.


        >Please remember to use the correct file name, or you will get all kinds of errors.


        Our next subject will be using images as links. Based on what I have already told you, this should be predictable. If you cannot figure it out, then I will give you the syntax now.

<A HREF="page.html"><IMG SRC="torch.gif"></A>


        If you use this code to make the torch a link, you get this :



        As you can see, you get a somewhat distasteful border around the image. To remove it, use an attribute of the image tag. This attribute, known as BORDER sets the border size to 0. Of course, 0 must be the value, but you get the idea. If you use the BORDER=0 attribute on the torch example, you would get this :

  <IMG SRC="torch.gif" BORDER=0>


        Of course, plase remember to surround the image tag with the link tags. The border around the image has now disappeared, but it is still a link, as you can tell when you place your mouse over the image. Image links are very useful.


        Continuing through our topic of links, we come to having links go to someplace on the page : Like This. That takes you to the top of the page, right? Now then, we come to a new attribute of the anchor tag. This attribute designates that a certain section of the page is designated as a link target. Observe below :

<A NAME="top">


         That is a code I put at the top of the page in my HTML script. To link a place on the same page to that place, use the following script :

<A HREF="#top">Top of Page</A>

but to link to that place from a different page, use this script :

<A HREF="links.html#top">Top of Links Page</A>


         Please use the appropriate page and section title for the links also.


        Many people have asked about how to get that ugly green color away from visited, or used links. There are several ways to do this. You could use CSS, JSS, or attributes of the BODY tag, which I prefer for most of my pages. Take a look at a typical link coloring script.

<BODY LINK="blue" ALINK="yellow" VLINK="purple">

Let's look at what the script means, shall we :

  • The BODY part should be self-explanitory. If not please refer to The Basics Page for more details.
  • The LINK designates the color of a normal unused and nonactive link.
  • The ALINK designates the color of a link in use currently while the page is loading, or an active link.
  • The VLINK designates the color of a visited, or used link.


        Equally as many questions have come in asking about how to size links. This is done the same way as sizing text, unless you use a style sheet that designates link size. Well, you have reached the end of the basics section. Please come back again and learn more about HTML. Staying now? Visit another one of the tutorials. Good Luck!!!

Home Page