Linking Frames 3 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
FRAMES 3 - LINKING FRAMES

LINKING FRAMES

WARNING! You will probably find this section one of the most difficult to master. I have tried to be as clear as possible, but there are certain elements that you will just have to get right by a certain amount of trial and error. If you find your frame pages won't go away or have gone haywire, just close down your browser and restart it.

Now that I've put you right off the whole idea of linking frames, let's have a look at what is so tricky about it.

One of the odd and unusual things about frames is that when you put a link inside a frame, the site you link to will appear in the same frame. To explain this a bit more, let's say you have split your page into two frames, an index in the left frame and the main content in the right frame.There are various links in the main frame page which will replace the main page when the links are activated.

Here is a graphic representation of the above layout.

This is
the index
on the left

Largest frame contains the
content you are featuring
including a few links
to other pages or sites.

The linked pages will
open in this frame.

In the following example, I will use modified versions of some of the HTML tutorial pages to give you an idea of how this works. This is the code for the example:

To see this example, CLICK HERE. Click your BACK button to return, NOT the links in the frame pages.

In this example, if you click on the Tips link at the bottom of the Introduction page, it will be replaced in the same frame by that page. So far so good. But if you click on one of the links on the left side (only the links marked * work), it will either open in the left frame or in a frame of its own, which defeats the whole purpose. What we want here is a way to click on one of these links and get it to open in the right hand frame. To make this happen first you need to NAME each frame, and then use the TARGET tag to point it in the right direction.

NAMING FRAMES

Each frame (frtoc.html and frintro.html) must be named by adding a NAME attribute to the <FRAME> tag. It is probably a good idea to use something similar to the file name, but you can use any alpha-numeric combination you like. For example, for a simple two column page like this you could use the names "leftframe" and "rightframe", or "frame1" and "frame2". The first step is to do the naming process like this:

The next step is to define the TARGETS and a TARGET must be defined for each link. In this case we want the links from the left hand column to appear in the right column. Since we have named the right pane (which contains "frintro.html") as "rightframe" we need to specify that as the TARGET for the links in the document "frtoc2.html". If that sounds confusing the following code might clarify it. Only a part of the code is shown. I will put it in another colour with the target part in bold to help matters:

TARGET="rightframe">

Now the left frame will remain unchanged, while the linked URLs will show up in the right frame. You can test this out by clicking one or more of the links when you have a look at the following example CLICK HERE.

If all the links will be using the same frame as a target, as an alternative to putting TARGET="rightframe" into each link, you can use the <BASE> tag. This will go just after <BODY> in the HTML document. So the code for "frtoc2.html", will now read:

<BASE TARGET="rightframe">

Apart from saving a lot of copying and pasting time, the BASE tag makes it easier if you want to change the target page - just one amendment instead of many.

PREDEFINED TARGET NAMES

If you want to break out of frames and return to a plain or non-frame browser window, you can use one of the predefined tags, such as _top . Note the use of the underscore before the word top - do not omit it or the code will not work. Here is the code:

Click<A HREF="frlinking.html" TARGET="_top">here</A> to return to "Linking Frames".
</CENTER>
</BODY>
</HTML>

Another predefined name you can use is _blank. With this the link will be opened in a new browser window, i.e. the browser will launch a new window while your previous page, which is the frame page, is still open. You can then return to your original page at any time.

A NO FRAMES ALTERNATIVE

People using older browsers may not be able to see your beautifully crafted frame pages. You should always include some sort of message for these poor souls, perhaps encouraging them to update. Just before the final </ FRAMESET> tag (the closing tag), add something like this:

<NOFRAMES>
Your browser appears not to support frames. What a shame as these pages are superb in the frames version! You can either get a nice new browser or click here to view my boring alternative page.
</NOFRAMES>

With a bit of luck they will click over to your non-frame page. Just make sure that it makes sense as a stand alone page, which, of course can mean two versions of the same page. I have not given an example here as it is obvious what is required.

Some frame pages don't have scroll bars at all. If you would prefer this you need to know how to create Invisible Frames.

Next: Frames 4 - Invisible frames

Advanced Index