HTML Framset Tutorial

,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

This page shows you how to have split panes in HTML.

If you are not seeing frameset, click here: HTML Split Windows; Frameset Example.

To have split panes, use the “frameset” tag. First you create a page that's the FRAMESET. The FRAMESET page defines how you divide your window into panes. Inside the FRAMESET tag you use the FRAME tag to specify which HTML page shows up in which pane.

In this example, our FRAMESET page is this one: 0.html. The code looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>HTML Split Windows; Frameset Example</title>
</head>

<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>

The first line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> is important. To use frameset, you need to use this doctype.

The line <frameset cols="20%,80%"> means the window is to be divided into 2 columns, left column is 20% width and the right 80% width.

The second line <frame name="lefty" src="a.html"> specifies that “a.html” is the page that should go to the first frame.

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.

In the “frame” tag, it has a “name” attribute. 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 this page you are reading. 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” keyword is part of 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: HTML Split Windows; Frameset Example

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

blog comments powered by Disqus