Computer Infotech

Table of Contents

A Simple Way to Create Web Pages

Creating Hyperlinks

Links provide a quick access from one page or place in your site to another. You can have a word, phrase or image link to another word or phrase in your document, to another page or to another image. Text links look different than the other words on a page. They are usually blue, underlined words, but can be any color and with no underline. Linked images may or may not have a border around them.

Creating a File to Link To

In Note Pad, close the index.htm file. Open basic.htm and then click File/Save As and save the file with the name dog.htm (Make sure it is saving to the same directory that the index.htm file is in). Type the following text in this file:


<font face="arial" size="+1">Dogs are man's best friend. Dogs are loyal and friendly. Everyone needs a good dog for a pet. Every boy needs a dog and every dog needs a boy.</font>

Now save your dog.htm file and close it. Open index.htm.

Creating a Text Link to Another File

At the very top of your index.htm file (right under the body tag), type Read about dogs. Place your cursor before the word Read and type <a href="dog.htm">. Place your cursor after the period in this sentence and type </a>. You have just created a hyperlink to the test page. Save your file and view it in Internet Explorer. You should see

Read about dogs.

at the top of the page. Click on it and your dog.htm page should open. Congratulations! You just created your first hyperlink.

The <a href="?"> always goes before the text you want to mark as a link and the </a> always goes after the text you want to mark was a link. If you forget to include the </a> tag, the link will continue down the entire page or until it encounters an </a>.

Creating an Image Link to Another File

Go back to Note Pad. In your index.htm file, find your image source for the dog image. Right before the image source tag (<img src=...>), type the href from above (<a href="dog.htm"> After the image source, type </a>. Your code should look like this:

<a href="dog.htm"><img src="imgs/dog.gif" width="296" height="364" alt="This is a dog." border="1></a>

This creates an image link from the dog image. Save and view your work. Click on the image. It should take you to the dog page you created.

Creating a Link to Another Place on the Same Page

In your index.htm file, place your cursor in the line above the image source tag. Type <a name="dog"></a>. This creates a bookmark on the page. Scroll to the top of the page and place your cursor just below the body tag. Type <a href="#dog">Dog</a>. You have created a hyperlink to the bookmark on your page. The pound sounds indicates that it is on the same page. Notice there is no file extension specified (no .htm). This is because it is on the same page. Save your file and view it. Click on Dog. Your page should jump down to the picture of the dog (or close to it). If it doesn't seem to work, the page may not be long enough to scroll that far. Add some <br> tags before your </body> tag in Note Pad. Then save and view. Refresh and click on the Dog link again.

Creating an Email Link

You can create a link to email using the href tag and the mailto: attribute. Type:

<a href=""></a> 

Save and view your work. You should see as a hyperlink. Click on the link. If you have a mail program set up for your browser, a message window opens with the email address already entered. This allows someone a quick way to email you. (Go ahead and email me. I love to hear from those who use my pages!)

Note: Some web browsers do not support the email feature. It is always a good idea to spell out your email address in an email link. That way, people can copy and paste your email address into their email programs.

Linking to a URL

You can also create links to URLs or web addresses. When creating these types of links, you must spell out the URL completely, including the http://www. This is what tells the computer that the page is on the World Wide Web. Type the following:

You can view my site at <a href="">Computer Infotech</a>.

Notice I placed the period after the </a> tag. This is to keep it out of the linked portion of the text. Save your work and view it in Internet Explorer.

You should see the following: You can view my site at Computer Infotech®. Click on the link and watch what happens. If you are connected to the Internet, you will go the Computer Infotech® home page.


Adding Images   Working with Tables

This information compliments of
Computer Infotech®
Maine Web Design & Hosting Services
(207) 223-5103
Contact Us

Copyright 2000 by Computer Infotech®

Updated December 2004