- Level: Intermediate
- Skills Required: Basic JavaScript Object Model
Scenario:
Frames are an alternative to web developers for Server Side Includes and Scripting Languages. Almost every site has a menu of links to navigate that site. This menu appears on almost all pages, but manually copying the code to every HTML page is really a nuisance. Changing an already existing menu on all pages is a bigger trouble.
Today's article and the ones that will follow cover the basics of frames creation in HTML. We also introduce the way to refer frames in JavaScript. For this you will have to understand the object hierarchy in JavaScript.
Creating Frames:
A page having frames is created by defining frames' widths and heights and their source documents. The content of each frame is stored in a separate file. Say, you have three files home.html, aboutus.html and menu.html. The last one has links to all pages on your site. You will create a title page named index.html as explained below:
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="20%, 80%">
<frame name="menu" src="menu.html">
<frame name="content" src="home.html">
</frameset>
</html>
A frameset is actually a collection of frames. This particular frameset defines two frames. The first one will occupy 10% of the available screen space and the second one will occupy 90%. Next we define each frame's source file name. As you can perhaps deduce, each frame can itself contain multiple frames.
Exploring Further:
A regular link in a frame loads the referred page in the current frame only. But how can the menu work then? Read the code for menu.html as given below:
<UL>
<li><a herf="home.html" target="content">Home</a>
<li><a herf="aboutus.html" target="content">About Us</a>
</UL>
As you can see there is one extra attribute in A HREF and that is TARGET. This attribute specifies the frame in which the browser should load the referred page. The TARGET attributes make the connection between the frames of your window. We will go into further details in the coming articles.
Last Words:
Frames are easy to use and make the life easier for a coder. However, they effect the way search engines index your page. More information on how search engines index your page is available at http://www.searchenginewatch.com. Still in some situations, the other alternatives are not worth considering.
Go To Page: 1
