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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!-- 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"<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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- 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"<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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- 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"<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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!-- 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"<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.