HTML Frames Navigation

Revised 6 minutes, 59 seconds read By Edward

Display Navigation In Frames Without Reloading Page

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

In order for the navigation links to work, the frames need to be identifiable. The frames will be targeted by links based on their names.

This tutorial uses the HTML named frames and link elements. Once a link is clicked, it will open in the specified frame.

    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>
	<a href="HTML-Frame-Right-Top.html" target="left">click me</a>
</body>

</html>

The file will be loaded into the the top right frame and will display the heading one text “Right Bottom Frame”. The link opens the file in the left 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 Navigation Tutorial

Image Missing
Ojambo.com HTML Frames Navigation 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.

The frame must be named so that it can be targeted by a link. The link can load a web page in a specified frame.

    Recommendations:

  1. Specify the columns needed in a parent frameset tag..
  2. Use the frameset tag before each frame.
  3. Name the frames so that they may be targeted by links
  4. Do not use the body tag with frame tags.