TOPIC
- FRAMES 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:
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:
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:
MORE
ABOUT FRAMESET A few more points about the frameset tag:
MORE ADVANCED
EXAMPLES
|