Frames appeared in the middle-age of the short web history. They became popular because of amateur web sites and they relate to your lower instincts as we'll see. If you look around, you'll come to the conclusion that frames are mainly used in small web sites when the concept of frames is linked to the architecture of large scale sites. Frames are bad, but we'll start to see how they work, what they can be used for and then what the alternatives are.
Frames are a mean to divide the window of a web browser into a certain number of distinct spaces. Each of this zones of the screen that we call frames are filled with a different HTML page. It is a common practice to keep one frame for the navigation menu and one frame for the main content.
Let's imagine you have one page that you want to divide in two frames, one for the menu in a left-hand column and one to place your content in remaining space of the browser's window. You have to write three HTML files. Each of the two zones are filled with basic HTML pages like you know how to generate and there is another file that defines and describes how the browser's window space is divided. This is called the frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>frameset</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <frameset cols="100,*" border=0> <frame src="menu.html" name="menu" title="My menu"> <frame src="main.html" name="main" title="Main content"> <noframes> Your browser does not support frames. Here is the alternative content. </noframes> </frameset> </html>
What we've achieved is easy to understand. The <frameset> line tells that we split the space in two columns, one 100 pixels wide and one with what's left of the space with the star *. Then we have two lines that go <frame> where we tell what we want to see appearing in theses frames. Note that default units are pixels but you might as well use percentage %. We have defined a splittage between 2 frames but you can use as many as you want. It is even possible to imbricate framesets to achive more complicated layouts.
Bellow will you read a page with a left-hand frame, a main frame, a header and a footer:
<frameset rows="100,*,50" border=0>
<frame src="tete.html" name="tete" title="Headers frame">
<frameset cols="100,*" border=0>
<frame src="menu.html" name="menu" title="My menu">
<frame src="main.html" name="main" title="Main content">
<frameset>
<frame src="pied.html" name="pied" title="Footer frame">
</frameset>
When you imbricate framesets, it's just another frameset bloc that gets to replace a frame tag as we've seen.
In our two examples, you have already seen name and title that are self-explanatory and cols and rows. Let's move on to what else you may need.
We have parameters that will sound familiar to anyone who has seen HTML code like border=n and bordercolor="#8844bb". There's also frameborder=1 that can be either 0 or 1 and framespacing=n.
We've already seen what you need to get started, scr="foo.html" that tells the browser the file it has to lead in the frame, name="foo" and title="long foo" that are also self-explanatory. You have to be aware that there's bordercolor="#ffaacc", frameborder="1" that can also be 0, longdesc="url" that gives a long description of the frame's content in case you're intrested in universal accessibility issues, marginwidth="n" and marginheight="n".
By default, the user can resize the frames you create. If you want to prevent that behaviour from happening, add the noresize parameter.
Finally, you can control the way the browser is going to handle the scrollbars, scrolling="value". The default is the auto mode when there's a scrollbar only if it is needed because you content can't fit into the given space. If you write yes there always will be scrollbars and no for never.
The standard behaviour is that a link inside of frame opens in this frame. To change this behaviour, you just have to add target="foo" to your <a> tag where foo is the name of another frame. Easy as that.
There are also what we used to call magic targets : For a link to open in a new window, use target="_blank". To open the link in the whole window space, usetarget="_top". To open the link in the parent, use target="_parent". To open a link in the frame where it is, use target="_self". You may be surprised to see this last behaviour in the list of the magic targets because it is the standard behaviour but that default behaviour can be modified by placing inside your code <base target="foo"> where foo can be anything you want, the name of one of your frames or a magic target. If the name of the name of the frame is not recognized, (spelling mistake or code), the browser will open a new window.
We've seen how it works, now let's figure out the context where you use it. The main idea is that it's a bandwidth investment and the hope that a benefit will occur : When the page is first displayed (a two frame page), the browser has to download 3 HTML files and this means a loss, but there's the hope that further browsing from the user will only generate the download of singular files that will be smaller because part of the content that they should include is already displayed on the screen because of the other frame. An investment means a guess and a risk. You have to evaluate, do your own calculations and think about the profitability in bandwidth with overage visitor session, 2 to 7 clics.
One major problem with frames are URLs. In the address bar of your web browser, the URL that appears is the one of the frameset page and most of the browsers will use this address for their bookmarks. As a result, deep linking won't be possible, and most of the time, your visitors won't be able to properly bookmark the content they want from your site. Frames are also an issue when it comes to web spiders from search engines that will refer to individual frames in their indexes so that when people search for your content, they will end up on your page out of it's frameset context.
Once you know how to make frames, you will discover the deviant uses : you create your own site with a frameset in your HTML and in one of your frames, you display someone else's content. It's a way to try to let your visitors believe that you are the author of the whole thing whereas it is extraneous. This is a very nasty behaviour if you are not explicitly authorized to do so and it can be considered as against the law, there are some famous cases from juridictions about that. Don't forget that if you can frame somebody else, he might do as well.
You never know but your content mau end up in someone else's frames. To prevent that and get out of this situation, use target="_top" in your links or insert this tiny bit of javascript code that will let you take over the browser window :
<script language="JavaScript" type="text/javascript"> if (top.location != location) top.location.href = location.href; <script>
The are so many other options than frames that I can't tell you about all of them. For every reason you may use frames, whatever your motives, there's a way not to use frames. If it's just for bandiwdth sake or to have permanent elements on the screen, study Cascalading Style Sheets (CSS).
If you just want to save time and effort, and there are many people like you, you think you should use frames so that when you change your menu items or the layout of your whole site, you just have to change one file instead of every file, then you'll be interested in Server Side Includes (SSI).
SSI are a smarter way of easy lazy web site administration. Start with a complete HTML page file, containing all the elements you are going to need. Then isolate the elements you want to keep one every page of your site, like your menu and save in another HTML file the code snippet, an distinct HTML file even though this file ain't a complete HTML page. Now change the end of name of your file, the extension, replacing .htm or .html by .shtml and instead of the code you've pasted into the HTML snippets files, write <!--#include file="menu.html"-->. Repeat that action for any element you want to keep permanent, and build all the pages of your site on the same model than your SHTML file. This will save you time, space and bandwidth. Combine that with external CSS and you'll make your life a lot easier.
SSI can be used to other means than just inserting the content of another file once on the server. Here are examples :
The downside to SSI is that it's a bit more demanding for your server and the fact that some administrators diseable them for security reasons (cmd).
Now if you still want to continue using frames, please have at least a decent <noframes> section in your page so that no browser is left behind and use the right doctype (à savoir <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">). If you keep that bad technology ask yourself if you do it because you're lazy or can't manage to do it any other way, knowing there are so many good alternatives.