Beginners guide to HTML

Lesson 3 - Simple Links

Putting Links Between Pages of the Same Site

To put a link in a web page you put <a href="xxxxxx">The linking text</a> in the web page. The linking text is displayed normally, it can be a heading or almost any other block of text. (You can put links inside headings but not headings inside links). The "xxxxxx" is a reference to where you want the link to go. The linked text is typically displayed in a distinctive colour, it may on some browsers be underlined. Links should always be in double quotes "".

Summary

../Up a level
name/Down a level
File Names in links are
usually case sensitive

Link to file in SAME directory

If the referenced page is in the SAME directory and called Henry, then the link you need is:

<a href="Henry.html">Henry's Page</a>

Link to file in Lower directory

If the file is in a directory "boys", which is in the current directory, then the link you need is:

<a href="boys/Henry.html">Henry's Page</a>

Note: The directory separator is "/". (This is the unix standard)

Link to file in Higher directory

If the file is in the parent directory then the link you need is:

<a href="../Daddy.html">Daddy‘s Page</a>

Link to a file in a directory at the same level

Suppose you want to go up one level, then down into Boys to find the file, then you need:

<a href="../boys/Henry.html">Henry's Page</a>

Links Within a Page

Conventionally a link is to the top of page, you can link within a page, or to a location within another page:

To make a Link to another location within the SAME Page

put <a href="#SamePage">As the Link</a>, the '#' means what follows is a local label. Then somewhere else on the SAME page where you want the link to go to, put: <a name="SamePage"></a> The case of the label, and the link MUST be the same.

This can be useful at the top of a large page as an index to parts of the page, then putting the labels for the significant headings.

To Link to a location in another page

Use: <a href="Henry.html#Warhammer">Henry's Warhammer Info</a> to link to the label Warhammer in the page Henry. The labels are put in the same way as above for links within a page.

Next Lesson | Back to the index | Previous Lesson | Exercises

Home | Advice | Hosting

Updated 17th of October 2002