HTML Framset Tutorial
This page shows you how to have frames (like split panes) in HTML. Each pane can load a separate HTML page.
If you are not seeing split panes, click here: HTML: Split Windows; Frameset.
Note: frameset is deprecated in HTML5. However, it's still supported by browsers, and likely will be forever for backward compatibility, and it is part of the HTML 4.01 Frameset standard.
Here's a example of split panes.
Create a page with the following content.
<!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</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.
<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.
To remove all frames, create a link with
Clicking on the link will remove all frames. For example:
click Xah HTML Tutorial.
The code is:
<a href="../html_index.html" target="_top">Xah HTML Tutorial</a>
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
Now, just for fun, click on 0.html and witness infinity!
See also: HTML: Iframe
Ask me question on patreon