HTML Tutorials

Linking to Other Pages and Inserting Inline Images

Once you've written the basic text for your page, you'll most likely want to add an image or two to make the page more attractive and of course you'll want to add links to other pages, either your own or elsewhere on the web.

There are two types of links that can be used.

You can use an absolute link to link to any location on the web or a relative link to link to another page in your own directory.

Absolute Links

This is a hyperlink to the main menu for Prodigy Personal Web Pages. This is an absolute link because we have used the full path to the URL we are referencing.

(Use "Back" to get back to this page.)

We created this absolute link by using the syntax shown below:

<A HREF = "http://pages.prodigy.com">This is a hyperlink</A>

Relative Links

If you are linking to a page in your own directory, it's a good idea to use a relative link instead of an absolute link. A relative link references the filename only and doesn't use the full path to the URL. Besides being less text to type, this helps make access to the linked page faster and lets you easily test your work offline if you have copies of all of your pages in a local directory.

This is a relative hyperlink to the main menu for Tutorials.

(Use "Back" to get back to this page.)

We created this relative link using the syntax shown below:

<A HREF = "index.htm">This is a relative hyperlink</A>

Inline Images

You can insert an image just to enhance the multimedia ambiance of your page or even use an image as a link to another page!

As you'll see in our samples, we've included some additional HTML code to help the visitor to your page start enjoying your hard work right away.

: We strongly recommend that you use width and height tags in your syntax. These tags act as placeholders and usually allow text to display while the images on your page are still being retrieved and decoded.; If you use the ALT tag to describe your image, some browsers will display this as temporary text until the image itself is able to be displayed, and for users who have turned images off, this acts as an indicator of what the graphic image contains.

You can use any *.gif or *.jpg file as an inline image.

A Basic Inline Image:

This is an inline image displayed on a page that isn't being used as a selectable link to another page. We've used ALIGN=LEFT but you can easily use MIDDLE or RIGHT to create a different effect.

The syntax used to create an inline image is shown below:

Inline Image Used as a Hyperlink:

This is an image that is used as a selectable hyperlink:

(Use "Back" to get back to this page.)

The syntax used to create the selectable link is shown below:

Putting It All Together:

It's usually a good idea to use a text based link along with a graphical link in case the visitor to your page either has images turned off or is using a text based browser.

Here is an image that is a hyperlink to our main Personal Web Page menu, which has text next to it that links to the same thing: ProdStar Personal Web Page Main Menu

The syntax used to create these selectable links is shown below:

<A HREF ="http://pages.prodigy.com"><IMG ALIGN=LEFT ALT="ProdStar" SRC="sample.gif">Personal Web Page Main Menu</IMG></A>