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.
This is what the frameset should look like
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.
<frame name="lefty" src="a.html"> specifies that “a.html” is the page that should go to the first column.
For the second column, we have another frameset that split into top and bottom row, like this:
<frameset rows="85%,15%"> <frame name="topy" src="b.html"> <frame name="bottomly" src="c.html"> </frameset>
The overall effect is splitting 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.
When you have a link, you can specify which pane to show it, via the
target= attribute, like this:
<a href="a.html" target="topy">A</a>
In our example,
Remove All Frames
To remove all frames, create a link with
target="_top", like this:
<a href="../html_index.html" target="_top">HTML Tutorial</a>
Click here to remove all frames: HTML Tutorial.
Grid of 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
Now, just for fun, click on 0.html and witness infinity!
See also: HTML: Iframe
If you have a question, put $5 at patreon and message me.