TOPIC - FRAMES

 

separator-blank.png

 

FRAMES

 

Frames allow us to split the browser screen into different sections each containing a different HTML document.

 

EXAMPLE 1 – CBC & BBC

 

Click here to see a browser’s screen be half CBC News and half BBC News.  This is done using frames.

 

In this topic, we will learn how to create such a screen separation.

 

WARNING

 

Frames are no longer widely used on the internet.  The primary reason is that they do not work well with bookmarking (adding to favourites).

 

FRAME SETUP PAGE

Working with frames is quite simple. We need to create a special html document that is dedicated to specifying the way in which the screen is to be split up. 

 

We often refer to this document as the frame setup page.

 

This HTML document is different from typical HTML documents.  It has no body.  Instead, it has a <frameset> tag.

 

Here is example code:

 

<html>

<head></head>

<frameset cols="50%, 50%">

   <frame src="page1.html" name="frame1">

   <frame src="page2.html" name="frame2">

</frameset>

</html>

 

Above, the frameset tag has the attribute cols that gets a list of numbers.  In this case, there are two numbers, both 50%.  This means that the screen will be separated into two columns called frames each getting 50% of the space.

 

Inside the frameset tag, there are two frame tags.  In each frame tag, we specify the HTML document that will fill that frame.  We can also name the frame (which will be useful later).

 

So above, the document page1.html will be in the left frame and the document page2.html will be in the fright frame.

 

EXAMPLE 2 – OUR FIRST FRAMES WEBPAGE

 

Click here to see the document red.html.

Click here to see the document blue.html.

Click here to see the document framesetup.html that displays both red.html and blue.html.

 

You can also download a zipped file with all three documents above if you would like to examine the code more closely.

 

The code for the frameset tag is simple enough:

 

<html>

<head></head>

<frameset rows="50%,50%">

   <frame src="red.html" name="frame1">

   <frame src="blue.html" name="frame2">

</frameset>

</html>

 

Notice that this time, the frameset is separated into two rows instead of two columns.

 

LINKS

 

If you go back to the first example, and you click on any of the links, you will notice that the new page opens up into the same frame.

 

We can change this by using the target attribute inside our href tags (links).  Before we look at how to do this, let’s look at an example.

 

EXAMPLE 3 – TARGETED LINKS

Click here to see the document red.html.

Click here to see the document blue.html.

Click here to see the document green.html.

Click here to see the document yellow.html

Click here to see the document menu.html.

Click here to see the document frameset.html.

 

You are encouraged to download the zipped file with all these HTML documents.

 

To create the above system where the menu on the left would have its link open on the right, we need to do two things:

 

  1. In the frameset tag that is in frameset.html, we need to name all of our frames.
  2. In menu.html, in the href tags that want to affect, we add target="frameName".

 

MORE ABOUT FRAMESET

 

A few more points about the frameset tag:

 

  • The cols attribute separates the screen into columns while the rows attribute separates the screen into rows.

 

  • If you put numbers with % signs, then that represents the percentage of the screen.  However, numbers without any % specify the number of pixels of the frame.


EXAMPLE FRAMESET CODE

 

  • The tag <frameset cols="100,200,200"> creates three columns where the first is half of the width of the other two.

  • The tag <frameset rows="200,100, 100, 100"> creates four rows where the first is twice as high as the others.

 

MORE ADVANCED EXAMPLES

 

  • Click here for more advanced examples regarding frames.


separator-blank.png