HTML Frames, HTML Tutorial, Global Guideline

Bookmark Bookmark: HTML Frames, HTML Tutorial
Forum | Blog


      Home                    

Basic HTML Guide.      
 HTML Introduction.      
 HTML Entities.             
 HTML Tags Guide.      
 HTML Head.                
 HTML Meta.                
 HTML Styles.               
 HTML Formatting.       
 HTML Backgrounds.     
 HTML Attributes.         
 HTML Links.                
 HTML Tables.             
 HTML Images.            
 HTML Colors.              
 HTML Fonts.               
 HTML Marquee.         
 HTML Forms.             
 HTML Frames. 
 HTML Lists.                
 HTML Scripts.           
 HTML Summary.        

HTML Tutorial >> HTML Frames.


     Back             Next     



HTML Frameset

Syntax for HTML Frame

<FRAMESET>...</FRAMESET>

Attribute Specifications
  • ROWS=MultiLengths (row lengths)
  • COLS=MultiLengths (column lengths)
  • ONLOAD=Script (all html frames have been loaded)
  • ONUNLOAD=Script (all html frames have been removed)
Contents One or more html FRAMESET and html FRAME elements, as well as an optional html NOFRAMES
Contained in web page HTML <html> .... <FRAMESET>...</FRAMESET> .....</html>
 

This HTML Tutorial section of  FRAMESET element is an html frame container for dividing a window into rectangular subspaces called frames. In an html Frameset document, the outermost FRAMESET element takes the place of BODY and immediately follows the HEAD.

Here HTML Tutorial section you will learn that the FRAMESET element contains one or more FRAMESET or FRAME elements, along with an optional NOFRAMES element to provide alternate content for browsers that do not support frames or have frames disabled. A meaningful NOFRAMES element should always be provided and should at the very least contain links to the main frame or frames.

The frame ROWS and html frame COLS attributes define the dimensions of each html frame in the set. Each attribute takes a comma-separated list of lengths, specified in pixels, as a percentage, or as a relative length. A relative length is expressed as i* where i is an integer. For example, an html frameset defined with ROWS="3*,*" (* is equivalent to 1*) will have its first row allotted three times the height of the second row.

The values specified for the ROWS attribute give the height of each row, from top to bottom. The html frame COLS attribute gives the width of each column from left to right. If ROWS or COLS is omitted, the implied value for the attribute is 100%. If both attributes are specified, a grid is defined and filled left-to-right then top-to-bottom.

The following example sets up a grid with two rows and three columns:

HTML Frames Example

<FRAMESET ROWS="70%,30%">
  <FRAMESET COLS="33%,33%,34%">
    <FRAME NAME="Photo1" SRC="Row1_Column1.html">
    <FRAME NAME="Photo2" SRC="Row1_Column2.html">
    <FRAME NAME="Photo3" SRC="Row1_Column3.html">
</FRAMESET>

<FRAMESET COLS="33%,33%,34%">
  <FRAME NAME="Caption1" SRC="Row2_Column1.html">
  <FRAME NAME="Caption2" SRC="Row2_Column2.html">
  <FRAME NAME="Caption3" SRC="Row2_Column3.html">
<NOFRAMES>
<BODY>
  <H1>HTML Tutorial section of HTML Frame Example at Global Guide Line</H1>
  <UL>
    <LI>
      <A HREF="Row1_Column1.html">Photo 1</A>
      (<A HREF="Row2_Column1.html">Caption</A>)
    </LI>
    <LI>
      <A HREF="Row1_Column2.html">Photo 2</A>
      (<A HREF="Row2_Column2.html">Caption</A>)
    </LI>
    <LI>
      <A HREF="Row1_Column3.html">Photo 3</A>
      (<A HREF="Row2_Column3.html">Caption</A>)
    </LI>
  </UL>
</BODY>
</NOFRAMES>
</FRAMESET>

</FRAMESET>
 

HTML Frames Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
  <title>HTML Tutorial section HTML Frame Example</title>
</head>
<frameset cols="40%, 30%, 30%">
<frameset rows="150, *"> <frame src="keyboards.html" name="keyboards" longdesc="keyboardsinfo.html" frameborder="1" marginwidth="2" marginheight="2">
<frame src="monitors.html" name="monitors" longdesc="monitorsinfo.html" frameborder="1" marginwidth="2" marginheight="2">
</frameset>
<frame src="cpus.html" name="cpus" longdesc="cpusinfo.html" frameborder="1" marginwidth="2" marginheight="2">
<frame src="mice.html" name="mice" longdesc="miceinfo.html" frameborder="1" marginwidth="2" marginheight="2">
<noframes>
<body>
  <h1>HTML Tutorial explaining HTML noframes</h1>
  <p>Content of the noframes version.
  <ul>
    <li>Some information
    <li>More information
  </ul>
</body>
</noframes>
</frameset>
</html>
 

HTML Frames Output

 ----------------------------------
|           |         |            |
|           |         |            |
| keyboards |         |            |
|           |         |            |
|           |         |            |
|-----------|         |            |
|           |  cpus   |   mice     |
|           |         |            |
|           |         |            |
|           |         |            |
| monitors  |         |            |
|           |         |            |
|           |         |            |
 ----------------------------------
 

HTML Embedded Framesets Example

You can update two frames with embedded framesets. Instead of creating all of your framesets within the main frameset document you will create some of them and refer to another document that contains information on the remaining frames. If you want the following layout.

 
 ----------------------------------
|           |                      |
|           |      banner          |
|           |                      |
|    n      |----------------------|
|    a      |                      |
|    v      |                      |
|    b      |                      |
|    a      |                      |
|    r      |                      |
|           |      main            |
|           |                      |
|           |                      |
|           |                      |
 ----------------------------------



You would create one frameset to start out with.


HTML Code for Embedded Framesets Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
  <title>HTML Tutorial section of Embedded Frameset</title>
</head>
<frameset cols="150, *">
<frame src="navbar.html" name="nav" longdesc="navbarinfo.html">
<frame src="mainarea.html" name="mainarea" longdesc="mainareainfo.html">
<noframes>
<body>
  <h2>HTML Tutorial example of HTML Embedded Framesets</h2>
  <p>Content of the noframes version.
  <ul>
    <li>Some information
    <li>More information
  </ul>
</body>
</noframes>
</frameset>
</html>


     Back             Next     
 

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 175 visitors are online now