We're now going to build a link section for the page. This will be done in the form of a list. First though we give the list a title, which will be indented from the side of the page.

The tag for indenting is <blockquote>. Make the title LINKS:, set the typeface as "Verdana, Arial, Helvetica, sans-serif". the size as 6 and make it bold, not forgetting the endtag.

Save and view, and you should see the word LINKS: set in from the edge

Click the link to see what the page should now look like, and it's source code, in separate frames.

Start the list after the closing tag for the indent. The tag for the ordered list is <ol> and the tag that starts each line is <li>. The ordered list tag needs closing but the line tags don't.

The text for the four lines is:

ON LINE JONES

TABLES 1

TABLES 2

EMAIL ME

TOP

The font face for the whole list should be "Courier New, Courier, mono", the colour should be purple and the size 6. Move the bold end tag from the LINKS title to the end of the list.

Then save and view. If you've managed to sort that lot out... ...WOW!

Click the link to see what the page should now look like, with it's source code, in a separate frame.

It could be that by now you've got some tags positioned slightly differently to me but it's still working, but then again it could be you've missed one little thing and it's all gone pear shaped. Hopefully by now you'll be able to work out why.

As you'll have seen, an ordered list is a numbered list.

An unordered list is a bullet list. The only difference in the code is that the ul changes to ol in the opening and closing tags.

Change your list from an ordered to an unordered list, save and view.

Click the link to see what it look like.

A named anchor is an invisible tag that a link can be set to that will take the viewer to the part of the page the anchor is set at, cutting out all that scrolling.

We're setting one to take the viewer to the top of the page. The code is <a name="top">, top being the name of the tag, and, of course we close it with </a>.

To place it at the top of the page just key the code in after the body tag

The final stage for this page is to set links. In this bit we're going to set four different links, a hyperlink to another site, a link to another page, an email link and a link to the named anchor within the page.

You set the link round the text in just the same way as you set it round the image earlier, using the <a> tag with the href= instruction.

For ON LINE JONES the href should equal "http://www.geocities.com/onlinejones",the web address for this site; also we set a new instruction, target="_blank". This will make the linked page open in a new window, leaving your page still open on the desktop.

We don't need to set a target for the other links, but we do have to set the link.

For TABLES 1the href link the should be "tables1.html" and "tables2.html" for TABLES 2. These are internal links to pages you haven't built yet (unless your one of my current batch of Matthew Boulto students, in which case make sure you tables page is in the same folder and called tables.html)

For EMAIL ME the link should be "mailto="[email protected]" ([email protected] means insert you email address)

For TOP the link should be "#top". This will link it to the named anchor you built earlier.

Now save and view in your browser, testing the links. If you don't need to scroll the left hand frame in your browser window, reduce the size of the window until you do; just so you can see how the link to the top of the page works.

Click this link to see what the new page should look like, and it's source code, in separate frames.