Home | E-mail
HTML Basics - Part 5 of 12 by Matthew Bacon
Hypertext links A powerful feature of HTML is its ability to link text and/or an image to another web page or a different part of the same page (known as a hypertext link). As a rule, no web page should be so long that the reader has to constantly scroll up and down to find the information they require. If it is possible to break a page into more easy-to-digest sections then please do so! (a good example is this tutorial series). To create a hypertext link the `<A>` ... `</A>` tags are used. Whatever appears between these tags becomes the hypertext link (plain-text, image etc.). The destination of the link is determined by its unique URL address (Uniform Resource Locator - every web page has one). If the Web page you are linking to is in the same directory as the current page, only the file name is required. `<A HREF="index.htm">`Goto INDEX.HTM`</A>` However, if you are linking to a web page somewhere other than the directory of the current page, the full URL address should be used. `<A HREF="http://www.myatari.net">` Goto MyAtari magazine`</A>` To create a hypertext link to an E-mail address, all you need to do is substitute the URL address for the E-mail address, like so... `<A HREF="MAILTO:info@myatari.net">`E-mail me`</A>` Hypertext link using text
    <HTML>
       <HEAD>
       <TITLE>Hypertext link example</TITLE>
       </HEAD>
       <BODY>
       Click <A HREF="index.htm">here</A> to goto INDEX.HTM
       </BODY>
       <ADDRESS>
       This page was written by
       <A HREF="MAILTO:info@myatari.net">Matthew Bacon</A>
       </ADDRESS>
    </HTML>
Hypertext link using an image
    <HTML>
       <HEAD>
       <TITLE>Hypertext link example</TITLE>
       </HEAD>
       <BODY>
       Click on the image below to goto INDEX.HTM
       <A HREF="index.htm"><IMG SRC="logo.gif"></A>
       </BODY>
       <ADDRESS>
       This page was written by
       <A HREF="MAILTO:info@myatari.net">Matthew Bacon</A>
       </ADDRESS>
    </HTML>
When you link to another web page, the browser automatically links to the top of the destination page. However, you may not always wish to do this! To link to a specific place within a page, the following HTML code needs to be included in the destination web page. This is called an anchor. `<A NAME="top"></A>` You can include as many of these anchors within a page as you wish. However, when creating anchors please remember that each anchor needs its own unique name and that the name is case sensitive! (i.e. "TOP" is not the same as "top"). The example below shows how to link to an anchor within the current web page. The anchors name used is, "top". `<A HREF="#top"> ... </A>` The example below shows how to link to the anchor, "top", within the page "INDEX.HTM". `<A HREF="index.htm#top"> ... </A>` As an example, at the start of this pages HTML source code, an anchor called "top" can be found. The following example links to this anchor. Go on - try it and see! Click here to jump the top of this page.
Previous | Next
MyAtari magazine - Tutorial #5, April 2001 | Contents Features Reviews Tutorials Regulars Adverts
[ Top of page ]
Copyright © 2001 MyAtari