HTML Frames

Display HTML Pages In Frames In One Window

Separate HTML Pages can be displayed in one browser window. Each HTML Page acts independently. With frames, different websites can be viewed at the same time.

Frames are not easy to manipulate because each frame acts independently. The body tag cannot be used with the frame tag. Each frame must have a source which is the location of the web page.

This tutorial uses the HTML frameset and frame elements. The frameset tag holds the frames in rows or columns. The frame tag holds an individual web page.

    Tools are required:

  • Text editor.
  • HTML.
  • Web Pages.

  • Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

HTML-Frames.html file

<!--
  HTML-Frames.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML Frame Demo</title>
</head>

<frameset cols="25%, 75%">
	<frameset rows="*">
	<frame src="HTML-Frame-Left.html" name="left">
	</frameset>

	<frameset rows="50%, 50%">
	<frame src="HTML-Frame-Right-Top.html" name="right-top">
	<frame src="HTML-Frame-Right-Bottom.html" name="right-bottom">
	</frameset>
</frameset>

</html>

The first frameset specifies two columns whose widths are 25% and 75%. The left column has one row frame and source page is HTML-Frame-Left. The right column has two rows which are both 50% of the height and named Right-Top and Right-Bottom respectively.

HTML-Frame-Left.html file

<!--
  HTML-Frame-Left.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML Frame Left Demo</title>
</head>

<body>
	<h1>Left Frame</h1>
</body>

</html>

The file will be loaded into the the left frame and will display the heading one text “Left Frame”.

HTML-Frame-Right-Top.html file

<!--
  HTML-Frame-Right-Top.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML Frame Right Top Demo</title>
</head>

<body>
	<h1>Right Top Frame</h1>
</body>

</html>

The file will be loaded into the the top right frame and will display the heading one text “Right Top Frame”.

HTML-Frame-Right-Bottom.html file

<!--
  HTML-Frame-Right-Bottom.html
  
  Copyright 2011 Edward <http://ojambo.com>
  
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
  
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.
        
        
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com HTML Frame Right Bottom Demo</title>
</head>

<body>
	<h1>Right Bottom Frame</h1>
</body>

</html>

The file will be loaded into the the bottom right frame and will display the heading one text “Right Bottom Frame”.

How to Use:

Run the HTML-Frames.html file in your favourite browser.
You will see that the the three frames have loaded three pages.

Demonstration:

Ojambo.com HTML Frames Tutorial

Image Missing
Ojambo.com HTML Frames Tutorial

Conclusion:

Frames can be used to load different pages into the same browser window. Frameset tag is used to specify the columns or rows needed. The frame tag requires a source which is usually the URL to the web page.

    Recommendations:

  1. Specify the columns needed in a parent frameset tag..
  2. Use the frameset tag before each frame.
  3. Do not use the body tag with frame tags.

Tags: , , , , , , ,

This entry was posted on Wednesday, November 30th, 2011 at 1:17 pm and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 responses to “HTML Frames”

  1. Ojambo HTML Frames Navigation says:
    December 7, 2011 at 1:31 pm

    […] were introduced in the Ojambo.com HTML Frames. To Make the frames more useful, a navigation frame can be […]

  2. Ojambo HTML Frames Video 0041 says:
    September 19, 2012 at 1:13 pm

    […] Video for the Ojambo.com HTML Frames article. Part One of […]

Leave a Reply

Your email address will not be published. Required fields are marked *