B

Hi, i'm B! I live in the topy pane!

HTML frameset is pretty eeeasy. First you do a page that's FRAMESET, which defines how overall you divide your window into panes. Inside the FRAMESET tag you use the FRAME tag to specify which html shows up in which pane.

Now that's html frames! In our example, our frame set page is this one: 0.html, and it specifies that the window is to be divided into 2 columns. The left column is 20% width and the right 80% width. Now, we nest FRAMESET inside a FRAMESET tag, and specify that on the right column, it is to be divided into top and bottom panels. The top being 85% in height, and bottom 15%. This gives the overall effect of dividing the window into 3 panes. A left pane, and a right top and bottom panes. So, overall the 0.html page looks like this:

<frameset cols="20%,80%">
 <frame name="lefty" src="a.html">
 <frameset rows="85%,15%">
  <frame name="topy" src="b.html">
  <frame name="bottomly" src="c.html">
 </frameset>
</frameset>

Now, usually one of the pane is used as a navigation control panel or Table of Contents, so that a click there will change the content in the main pane. Here's the technology behind this behavior:

When we specify a FRAME, we can give it a NAME. So, we named our 3 panes as “lefty”, “topy”, “bottomly”. The purpose of name is that when we do a link we can specify which pane the linked page should show up. So, in our lefty pane page a.html, it has links to other pages, and each link has a “target=” attribute that says which pane the linked page should show.

In this example, a.html is for Table Of Contents. b.html is for explanation (that's me). c.html is for references.

Often you want a link to not just open in one of the panes, but instead open a new window or bursting all the panes. As we know, each frame (pane) is named. And in general, each window is also named. So, to open a link in any particular frame or window, just use the right name in “target=”. But if you want to always open a new window, use “target=_blank”. The “_blank” is predefined by the HTML standard. Other predefined items for target are: “_self”, “_parent”, “_top”. To burst all frames in the current window, use “target="_top"”. If you click on the references pane's links, you'll burst all frames.

Now, frameset needs not to be only rows or only columns, but can be a grid by specifying both. See this page for example: http://xahlee.org/js/frame2/frameset.html

Now, just for fun, click on 0.html and witness infinity!