Title: XHTML/CSS 9
Class: Coding
Date: 03.03.2007
XHTML/CSS - Frames and Iframes
Frames are one of those brilliant ideas which don't really work too well in practice, probably because browsers have never been designed for them and the practical realities of our video systems don't allow it. It would be nice if just part of our monitor screen could be 'repainted' leaving the rest intact. That isn't going to happen until we have an entirely new video system invented. Yet that is precisely the idea of frames, so perhaps they came a little too early.
That is not to say that frames aren't workable! Frames can be very useful indeed and can even save a considerable amount of bandwidth if used properly. If you have a top banner and a left menu system that do not change from page to page, then frames may be ideal for you.
Basically, one extra page needs to be made up that defines the frameset. Then each frame consists of a regular page. Your front page then consists of four or more individual pages. Now if your site only has a few pages, then more bandwidth will be used, but if you have dozens of pages, eventually less bandwidth would be consumed since only one of those pages is replaced each time.
This has nothing to do with XHTML so we'll just give a quick example, then move on. This is the frameset page and as you can see, it is written in HTML 4.01 which requires upper case tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="20%,80%">
<FRAME src="top.html" name="top" title="">
<FRAMESET cols="20%,80%">
<FRAME src="left.html" name="left" title="">
<FRAME src="main.html" name="main" title="">
</FRAMESET>
<NOFRAMES>
<H2>Frame Alert</H2>
<P>This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client.<BR>
Link to<A HREF="alternate.html">Non-frame version.</A></P>
</NOFRAMES>
</FRAMESET>
</HTML>
Obviously, the other pages can be written in XHTML. What is more common is the internal frame or iframe. Here is an example which is displaying the previous page in this series, which hopefully is still in your browser's cache.
The traditional code for this iframe is:
<iframe src="http://www.krelay.com/xhtml8.html" align="center" height="100" width="300" name="dog"></iframe>
Rather odd isn't it? It seems that the width and height does not need 'px' added, and in fact Tidy will report an error if you add px! Probably because an iframe is not part of the XHTML specifications or indeed any. This non-standard behaviour is also shown by the alignment. It is centered in Internet Explorer but not in other browsers. Non-standard or not, it is a very useful item. It can be styled to some extent, for example, you could add a coloured border, but more importantly you can set it's position properly. Here it is again.
The code is now:
<iframe src="xhtml8.html" style="position:relative;left: 50px;width:300px;height:100px;border:solid 2px red;" id="cat"></iframe>
I have changed the position to prove that it works, and notice that 'dog' has changed to 'cat' because we cannot have two items with the same name on the page. Thus by using style, we have made a non-standard item behave itself.
Depending on which browser you are using, you might have noticed something else. Internet Explorer places an ugly black border around the iframe, still visible with our red border. Other browsers don't show any border at all unless we put one there. So, apart from IE, an iframe without a border is quite invisibly matched with the other content if the iframe source is small enough so that no scrollbars are needed.
The main use of an iframe is for showing dynamic content. It is ideal for many small PHP scripts such as Horoscopes because the whole page doesn't have to be in PHP. Furthermore, as many of the common PHP scripts all have "index.php" as a starting point, it is difficult for a novice to incorporate two or more such scripts into a single page. Iframes allow each script to be kept seperate from each other. It could also be used for a number of CGI generated pages using perl, python and many other languages.
The iframes showing the previous page isn't coincidental. A form can be placed in an iframe to give many benefits. The return page, or "Thank you" page, returned after the form has been submitted comes direct to the iframe. In other words, the user is still on the main page and his browsing pattern is not disturbed - no clicking browser 'back' buttons or links are required. Isn't that more user friendly?