HTML Frames Tutorial
Skip to…
What are frames?
How do I make a frame set?
How do I make a page break out of the frame or go a certain cell?
Adding Rows.
What are inline frames or iFrames?
What are frames?
Frames are distinctly different from any other HTML thing you probably know how to do. If you plan on using frames think of it like sewing two web pages together into one page.
Click here to see an example of a web page using frames.
How do I make a frame set?
Basic frame set code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<HTML>
<TITLE>Title</TITLE>
<FRAMESET COLS=”25%,75%”>
<NOFRAME>
Hi If you’re reading this then you need to upgrade your browser.
<P>
<a href=”http://www.mozilla.org” target=”_blank”>Click here to get Mozilla</A> the open source, free, version of Netscape. It has a built-in pop-up blocker and is far more advanced than Internet Explorer.
</NOFRAME>
<FRAME NAME=”1″ SRC=”page-1frame.html”>
<FRAME NAME=”2″ SRC=”page-2frame.html”>
</FRAMESET>
</HTML>
Click here to see an example of a web page using that code.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
That is a DTD, Document Type Definition, it’s not required but it helps web browsers read and present web pages correctly to the visitor. The above DTD is only used by web pages that use frames.
FRAMESET
FRAMESET tells the browser that there is a frame on the page. It should be the first HTML command after the title.
NAME=”1″
This will come in handy later on go to How do I make a page break out of the frame or go a certain cell? to learn more. What ever you put in the ” ” is the name of that cell of the frame.
COLS=”25%,75%”
The COLS tag sets the widths of the columns. In this example I wanted the left hand column to take up 25% of the screen and the other one to take up 75% of the screen.
<NOFRAME> and </NOFRAME>
If someone with an outdated browser tries to visit your web page, you can put a message in the NOFRAME command to tell them to upgrade their browser. Many older text only browser cannot read and present frames correctly so they will only show a blank page.
Whatever you put in the NOFRAME commands will be shown to any visitor with an outdated browser.
<FRAME SRC=”page name”>
The name of the HTML page that you want to be placed in the frame goes in there. That HTML page is the source of the frame. There are 2 columns so I need 2 web pages to be placed inside the columns. The first web page will always be put in the left hand column then the next one will be placed in the right hand one.
</FRAMESET>
/FRAMESET ends the frame set.
To make a page break out of the frames put TARGET=”_TOP” into the link command.
Example:
<A HREF=”http://build-a-website.cnwcentral.com” TARGET=”_TOP”>
To make a page go to a certain cell add TARGET=”The name of the cell” into the link.
Example if you used the frameset from above and you want the page to appear in the right hand cell; If someone clicks a link from the left hand cell:
<A HREF=”http://build-a-website.cnwcentral.com” TARGET=”2″>
To add rows you need to add a FRAMESET ROWS in between FRAMESET COLS and /FRAMESET.
Example:
<FRAMESET COLS=”50%,50%”>
<FRAMESET ROWS=”50%,50%”>
<FRAME NAME=”1″ SRC=”page-1.html”>
<FRAME NAME=”2″ SRC=”page-2.html”>
</FRAMESET>
<FRAMESET ROWS=”50%,50%”>
<FRAME NAME=”3″ SRC=”page-3.html”>
<FRAME NAME=”4″ SRC=”page-4.html”>
</FRAMESET>
</FRAMESET>
Click Here to see web page using that HTML code.
The FRAMESET ROWS act as the source of the frame. I think that everything else explains itself.
An inline frame is a frame that floats inside of a regular webpage. I’ll make a tutorial after I make a couple CSS ones.