Frames Tutorial part 2

Show Me the Code

Before you start writing HTML, you need to decide if frames are appropriate for your site. If they are, then you should plan your layout and what pages will go into each frame.

Here is what the example frameset looks like: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
   <TITLE>First Frame Example</TITLE>
   other header information in META tags
</HEAD>

<FRAMESET COLS="150,*">
  <FRAME SRC="framex1m.html" NAME="menu">
  <FRAME SRC="framex1a.html" NAME="info" SCROLLING="yes">
  <NOFRAMES>
  <BODY>
  Your browser does not support frames.
  <BR>Try this link instead:
  <A HREF="unframed.html">unframed.html</A>
  </BODY>
  </NOFRAMES>
</FRAMESET>
</HTML>

Header Code

Like all other HTML pages, a frameset page starts with a header block: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
   <TITLE>Put A Title Here</TITLE>
</HEAD>
However, to strictly adhere to the World Wide Web Consortium (W3C) standard for HTML 4.01, the DOCTYPE must state the page contains a frameset as shown.

Frameset Code

Next is the frameset code: 
<FRAMESET COLS="150,*">
  <FRAME SRC="framex1m.html" NAME="menu">
  <FRAME SRC="framex1a.html" NAME="info" SCROLLING="yes">
  <NOFRAMES><BODY>
  Put Non-framed Code Here
  </BODY></NOFRAMES>
</FRAMESET>
This example says there will be two columns. The first column is 150 pixels wide, and the second uses whatever is left in the window. (One column should always be an asterisk (*) because you do not know the width of your visitor's browser.)

If you prefer, you may specify the columns as percentages, for example: 

<FRAMESET COLS="25%,*">
You may divide the frameset into ROWS instead of COLS as shown in example2. There may be as many rows or columns as you like, and you may put one frameset inside of another.

A FRAME line is given for each column (or row). The SRC is the HTML file that will be displayed in the column, while the NAME is the name of the frame. (More on names later.)

There are a number of different keywords that may be included in the FRAME line, but they are beyond the scope of this tutorial. I have included SCROLLING because it is used in the actual example. There are keywords to modify (or remove) the border and its colors and the frame's margins. Unfortunately, Netscape and Internet Explorer use different keywords. A keyword they agree on is NORESIZE, which prevents your visitor from resizing the columns, but I think it is a bad idea to use it.

Noframes Code

It is possible that your visitor's browser does not support frames. The NOFRAMES block will be displayed in this case, and ignored if the browser does support frames. 
<NOFRAMES>
<BODY>
Your browser does not support frames.
<BR>Try this link instead:
<A HREF="unframed.html">unframed.html</A>
</BODY>
</NOFRAMES>
</HTML>
Notice that the BODY block appears here, but not in the normal frameset portion. You should tell your visitor what to do if his browser does not support frames. I like to provide a link to a non-framed page. It is considered bad form to tell the visitor to get a new browser.

Note: It is common practice to put the NOFRAMES block after the FRAMESET. The W3C standard says the block belongs inside the FRAMESET. It will work in either location.

< Back to Frame Intro   On to Targets and Menus >  
1