HTML Tutorials
How to Get Frames on Your Web Page
Back to HTML Codes and Questions
Frames are easy once you understand them. The key is to realize that to make simple left and right frames you need three web pages. That is right...three web pages. You need a left (child) web page, a right (child) web page, and a parent web page.
The parent's role is to organize and keep the two children web pages in line. You really never "see" the parent. The parent is only working behind the scenes. Another way to look at the parent is to think of the parent as the glue that holds the two children frames together.
Below you will see the HTML code for three separate web pages. One parent and two children (left and right). And finally, you do not need to type in anything that is contained in the HTML code <!-- yak, yak, yak -->. Those are comment codes and are not necessary to make the code work.
HTML Code for the Parent Web Page
To make the frames work you need to copy all of the red code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
</HEAD>
<!-- This web page, in a sense, does not show up on the browser. It
has the purpose of telling the browser that you would like your
web page to display frames. The frames are named and defined
here. This HTML document organizes the web site. -->
<!-- NOTE: There is no BODY command here!! -->
<!-- The FRAMESET command sets the width of the frames. -->
<!-- You need to give each frame a name -->
<!-- The SRC= command tells the browser what web pages
need to fill each frame when the web page loads. -->
<FRAMESET COLS="25%,75%">
<FRAME NAME="lefty" SRC="L.html">
<FRAME NAME="Righty" SRC="R.html">
</FRAMESET>
</HTML>
<!-- When you save the parent web page, save it as "parent.html". -->
HTML Code for the Left Child Web Page
Start a second web page and save it as "L.html". Use this code on the second web page.
<HTML>
<HEAD>
</HEAD>
<BODY>
<!--The
following are simply some words and a link that will show up on the left web
page -->
<!-- When you save this left web page, be sure to save it as "L.html". There is nothing magical about L.html. It is just a name, but it works in this example. -->
<CENTER><H1> L </H1></CENTER>
<CENTER><H5> This is the Left Frame </H5></CENTER>
<CENTER><H5>
The name of the file is L.html </H5></CENTER>
<A HREF = "http://lefthander.com/" TARGET =
"Righty">
Club for Lefthanders </A>
</BODY>
</HTML>
HTML Code For The Right Child Web Page
Start a third web page and save it as "R.html".
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER><H1> R </H1></CENTER>
<CENTER><H2> This is the Right Frame </H2></CENTER>
<CENTER><H2> The name of the file is R.html </H2></CENTER>
</BODY>
</HTML>
All three web pages should be saved on the same disk and / or in the same directory. When you want to see the frames working together as a unit, open up the parent.html file. If you want to work on the left hand frame or the right hand frame, open up L.html or R.html as appropriate.
Here are Some Advanced Frame Codes
<FRAMESET ROWS = "15%, 85%">
Rather than splitting your web page in vertical fashion, you can split your web page horizontally.
<FRAME SRC = "URL" SCROLLING = "?????">
If you always want to have scroll bars, put "YES" in place of the question marks. If you never want to have scroll bars, type "NO". If you do not specify a setting for scroll bars, the browser will supply them when necessary.
<FRAME SRC = "URL" MARGINHEIGHT = "?????" MARGINWIDTH = "?????">
In place of the question marks you can type in a number of pixels. This will control the amount of space between the content and the frame border.
<A HREF = "URL" TARGET = "frame name">
Use this code when a person clicks on a link and you would like the new web page to appear in a certain frame.
<FRAMESET BORDERCOLOR = "RED"> or <FRAME BORDERCOLOR = "BLUE">
Either code will change the color of the frame border.
<FRAMESET BORDER = "3">
Three (3) means "3" pixels. This will change the width of the borders.