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
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:
- Specify the columns needed in a parent frameset tag..
- Use the frameset tag before each frame.
- Do not use the body tag with frame tags.