Using frames on your webpage
Posted in HTML | Posted on 19-04-2009-05-2008
Using frames on a web page gives you the option to display multiple web pages at the same time. In this tutorial we will be introduced to frames.
The concept of frames is similar to two picture frames on a wall. Say you have a picture of your family on the left (one webpage), and a picture of your dog on the right (another web page). The wall would be the web page that the user would see with the two picture frames on it. If things are getting confusing, don’t worry. We will work on a few examples and it will begin to make more sense.
First we will create two web pages:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>navigation</title>
</head>
<body>
<ul>
<li><a href=”http://www.nba.com/lakers/” target=”mainpage”>LA Lakers</a></li>
<li><a href=”http://www.nba.com/bulls/” target=”mainpage”>Chicago Bulls</a></li>
<li><a href=”http://www.nba.com/celtics/” target=”mainpage”>Boston Celtics</a></li>
<li><a href=”http://www.nba.com/pistons/” target=”mainpage”>Detroit Pistons</a></li>
<li><a href=”http://www.nba.com/jazz/” target=”mainpage”>Utah Jazz</a></li>
</ul>
</body>
</html>
Name this file navigation.htm. This file contains links to basketball team websites. Take note of this line of the code:
When a user clicks on one of these links, we do not want the link to open in the same page. So what happens here is when the user clicks a link, the link will open in another frame. It will begin to make sense in a few minutes.
Next we will create our second webpage:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>mainpage</title>
</head>
<body>
<p>select a link from the left</p>
</body>
</html>
Let’s name this file mainpage.htm. There’s nothing special here. When the user clicks on one of the basketball team links from our first page, the NBA team’s website will display on this page.
Now let’s put them together:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>frames</title>
</head>
<frameset cols=”15%,85%”>
<frame src=”navigation.htm” />
<frame src=”mainpage.htm” name=”mainpage” />
</frameset>
<noframes>
<body>
Sorry but your browser doesn’t support frames
</body>
</noframes>
</html>
Name this file frames.htm. Run this file on your browser. You should see the links on the left, and the page that displays “select a link from the left” on the right. Click one of the links on the left. The link to the basketball team’s website should display on the right page.
Understanding The Code
Our first line of code to observe is the Doctype. Recently we have been using XHTML1.0 Transitional in our examples. Since we are using frames on our webpage. We used this Doctype:
Something important to be aware of is that we don’t use the <body> tag when we use frames. Instead we open up our <frameset> tags.
This line of code indicates that we have two webpages within our frame. The frames will be displayed in a column fashion. The first page(navigation.htm) will take up 15% of the browser. The second page(mainpage.htm) will take up 85% of the browser.
These lines indicate which webpages will be displayed within our frameset:
<frame src=”mainpage.htm” name=”mainpage” />
Notice the name attribute. In navigation.htm, all of the links had a target=”mainpage”. We found our target in mainpage.htm.
A last thing to take a look at is the <noframes> tag. We use this tag when the user’s browser does not support frames. Within the <noframes> tag is where we place the <body> tag.
Final Word
If this is your first experience with frames, they might seem like something you want to use on your website. The downside to frames is that search engines such as google, yahoo, etc may or may not index your site. If you decide to use frames on your website, I recommend researching frames and their chances of being indexed in major search engines. I personally prefer to avoid the use of frames. But with some creativity, you might just come up with something that works out all across the board. As for the noframes tag, I do not know of any modern browsers that do not support frames. It’s used just for a backup. In the next tutorial we will look at another frame style that you might use more often on your website.