Here is a typical hyperlink to another site:
This is a Link
to Celestial Graphics
Lets create an HTML document for this:
<HTML>
<head>
<title>My First Link </title>
</head>
<body bkgd="ffffff">
<a href="http://www.celestialgraphics.com"> This
is a link to Celestial Graphics</a>
</body>
</HTML>
|
Pretty Easy! The <a> </a> tag is used to create links.
The <a href="http:/www.celestialgraphics.com"> </a>
is used to modify the text This is a Link to Celestial Graphics.
The href=" " indicates where the browser should go when you
click on the text.
Cut and paste the above HTML into your text editor and save the page
as link1.html. Double click on the file to open it in your browser.
If you tried to the little exercise above, you probably noticed that
the color of the link was different than the one shown on this page.
This is because you're browser displayed the link in it's default link
colors.
Changing Link Colors
You are free to change links colors either individually or for the entire
page (Note: Internet Explorer 3.0, an older version of the Microsoft
Browser, only supports page wide changes to the link colors).
Lets change the link colors for an entire page:
<HTML>
<head>
<title>My First Link </title>
</head>
<body bkgd="ffffff" link="990000" vlink="009900"
>
<a href="http://www.celestialgraphics.com"> This
is a link to Celestial Graphics</a>
<br>
<a href="http://www.aksi.net"> This is a link to
Acquired Knowledge Systems Home Page</a>
</body>
</HTML>
|
The <body> tag's attributes control the properties of the entire
page. The link attribute indicates the normal color of all the links
on the page. The vlink attribute indicates the color of the links after
they are visited. In the above example, <body bkgd="ffffff"
link="990000" vlink="009900"> specifies that
the normal link color is medium red and the visited link color is medium
green for the entire page.
Cut
and paste the above HTML into your text editor and save the page as
link2.html. Double click on the file to open it in your browser.
Next, lets change individual link colors. In order to do this, simply
surround the linked text with the <font color=" "> </font>
tag set. Look at the following example:
<HTML>
<head>
<title>My First Link </title>
</head>
<body bkgd="ffffff" link="990000" vlink="009900"
>
<a href="http://www.celestialgraphics.com"> This
is a link to Celestial Graphics</a>
<br>
<a href="http://www.aksi.net"><font color="336699">This
is a link to Acquired Knowledge Systems Home Page</font></a>
</body>
</HTML>
|
Cut
and paste the above HTML into your text editor and save the page as
link3.html. Double click on the file to open it in your browser.
Notice how the first link stays medium red, while the second link turns
to a blue-grey.
Relative
Links
All of the links in the examples so far are absolute links. This means
that they link to an exact web address (http://www.celestialgraphics.com
or http://www.aksi.net).
There is another type of link called a relative link. These links do
not give an absolute web address, they give a web address relative to
your site.
Relative addresses are ideal for use inside your site because they do
not depend on the absolute location of the pages on the web, only there
position relative to the root or top or your site.
For example, say your site is at www.my-site.com . The root page is
index.html. You also have some sub pages called page1.html page2.html
in addition, you have a folder called more-pages with a page
called page3.html. In order to link to those pages, you would simply
use the <a> </a> tag set with the href= to the relative
location of the pages. Lets look at the following example.
<HTML>
<head>
<title>My First Link </title>
</head>
<body bkgd="ffffff" >
<a href="page1.htm"> Link to Page 1</a>
<br>
<a href="page2.htm">Link to Page 2 </a>
<br>
<a
href="more-pages/page3.htm">Link to Page 3 </a>
</body>
</HTML>
|
Links to the Same Page
Lets
say you wanted to create a link to a different part of this same page.There
are two things you need to do. Create an "anchor" or marker
next to the place you want the link to go and create a link to that
anchor.
You can create an anchor by using the familiar <a></a> tag
pair with the attribute "name=". You can name the anchor anything
you want. For example, lets say you want to create an anchor to a news
story. You could name the anchor "news_story".
<a name="news_story">
</a>
You would place this tag pair just before the news story text. To link
to this from another part of the page simply create the following link:
<a href="#news_story">
</a>
Here
is a complete example of this which you can try out:
<HTML>
<head>
<title>Same Page Link Example</title>
</head>
<body bkgd="ffffff" >
<br><br>
<aname="first_link"> </a> Here is some text.
The first link will come here.
<br><br>
<a
name="second_link" ></a> Here is some more text.
The second link will come here.
Isn't this easy?
<br><br><br><br><br><br><br><br><br><br>
<a href="#first_link"> Link to the First Text </a>
<br>
<a href="#second_link">Link to the Second Text </a>
</body>
</HTML>
|
This
concludes the basics on linking. Next will look at spicing up your website
with images.
 Previous:
Adding Color and Size to Your Text Next:
Images 
|
