HomeHelpSite indexFeedbackSearch
Yenza!

Building a website

Developing a website
General discussion
of site

Learning HTML

Required Tags

Basic layout and
formatting tags

Hypertext links

Images

Tables

Fonts

Planning and building

Going live

HTML editors

Web
development
resources

Ongoing skills
development

Web databases

Learn to use the Internet

Start your research

Yenza! for trainers

The Internet for training

Subject links		 Learning HTML

Hypertext links

This section looks at:

The anchor tag

Hypertext links are created with the <A> tag. The opening tag always contains additional attributes and information about the link. The two most commonly used attributes are HREF and NAME.

HTML Coding Function
HREF The HREF attribute creates links to external web sites, other documents within a web site, sections within a single document, and links which send e-mail messages to a specified address.

 
NAME The NAME attribute "bookmarks" a spot in a document, and allows users to jump to that spot from elsewhere in the same document.

Linking to other web pages in your site

To create a link to another web site, the <A> tag is used with the HREF attribute.

HTML Coding Display
<A HREF="index.htm">Main page</A> Main page

Clicking on the underlined link will take you back to the main web development workshop page.

A link to another page in the same directory of a web site can be broken down as follows:

HTML Coding Function
<A HREF=
"index.htm">
Main page
</A>		 ...shows that this is a hypertext link
...shows which page to link to
...will appear as a "clickable" link
...is the closing tag

Note the quotation marks enclosing the name of the file, and that file names are case sensitive.

Linking to other web sites

Links to other web site are created using a procedure similar to that outlined above:

HTML Coding Display
<A HREF="http://www.nrf.ac.za">NRF</A> NRF

A link to an external web site can be broken down as follows:

HTML Coding Function
<A HREF=
"http://
www.nrf.ac.za">
NRF
</A>
 ...shows that this is a hypertext link
...shows that the link is to a web site
...tells the browser which site to go to
...will appear as a "clickable" link
...is the closing tag

Note the quotation marks enclosing the URL, and that URLs are case sensitive.

Linking to sections within a document

It's often useful to be able to jump from section to section within a long document - for example from an item in a table of contents to the section it refers to.

Step 1.

In order to create links within one document, you need to create "bookmarks" or "targets" within the document. This is done by using the NAME attribute within the <A> tag to mark the place in the page you wish to bookmark:

HTML Coding Function
<A NAME=
"top">
Top of page
</A>		 ...shows that the anchor is marking a bookmark name
...names the bookmark
...marks the text that is bookmarked
...is the closing tag

 

HTML Coding Display
<A NAME="top">Top of page</A> Note that bookmarks are not highlighted or underlined - they appear as normal text or images on your web page.

Step 2.

Once the bookmarks have been created, you can link to them using a format similar to that used to link to other pages and web sites:

HTML Coding Function
<A HREF=
"#top">
Top of page
</A>		 ...shows that this is a hypertext link
...shows where on the page to jump to
...will be the "clickable" linked text
...is the closing tag

 

HTML Coding Display
<A HREF="#top">Top of page</A> Top of page

Clicking on the above link will take you to the top of this page.

"Mailto" links

The <A> tag can also be used to create links which allow you to send e-mail messages directly from a web page:

HTML Coding Display
<A HREF=
"mailto:
Ann.Tothill@pixie.co.za">
Ann Tothill
</A>
 ...shows that this is a hypertext link
...shows that the link is to a new e-mail message
...specifies the address the message will be sent to
...will appear as a "clickable" link
...is the closing tag

 

HTML Coding Display
<A HREF="mailto:reidwaan@nrf.ac.za">Ann Tothill</A> Ann Tothill

If your browser is set up to send e-mail, clicking on the link above will bring up a window in which to compose an e-mail message.

For additional information about linking see the NCSA HTML Primer: http://www.ncsa.uiuc.edu/ General/Internet/WWW/ HTMLPrimerAll.html.


 

 
Top of the Page

Questions? Comments? Contact the site administrator.