|
If you are looking at a Netscape window with frames, you are actually looking at several HTML documents. The first one is the document that specifies the division of the page into frames and names the source file for each frame. It looks like this:
<HTML><HEAD>
<TITLE>This is a frametest</TITLE>
</HEAD>
<FRAMESET COLS=25%,*>
<FRAMESET ROWS=30%,*,30%>
<FRAME SRC=content_a.html NAME=aaaa SCROLLING=no>
<FRAME SRC=content_b.html NAME=bbbb SCROLLING=yes>
<FRAME SRC=content_c.html NAME=cccc>
</FRAMESET>
<FRAME SRC=content_d.html NAME=dddd SCROLLING=auto>
<NOFRAMES>This document can only be viewed by a browser capable of using Frames.
Sorry. you will have to return to the chapter on <A HREF=../frames.html>Frames</A>.</NOFRAMES>
</FRAMESET>
</HTML>
The first thing you can notice is that the document has the usual <HTML> and <HEAD> tags, but it does not have a <BODY> tag. This tag is replaced by the <FRAMESET> tag.
The first tag to pay attention to, is <NOFRAMES>. This tag is ignored by browsers that can handle frames, but it is the only bit that other browsers display. You can use this to display a message for users of browsers that do not support frames. You can include a link here to a 'frame-less' version or (like I did here) a link back to the referring page.
The <FRAMESET> tag defines two or more frames, in rows or in columns. As you can see, there are two nested sets of frames here. The first one divides the window vertically in two columns. The second, nested, set divides the first column horizontally in three rows. That is why the first <FRAMESET> tag has a COLS attribute and the second one has a ROWS attribute.
Both the ROWS and the COLS attribute can get values in the same way. You can give any number of values, separated by commas. If you give 4 values, that will result in 4 columns or rows. If you give 2 values, that will result in 2 columns or rows. Values can be in percentage (for example 25%), in pixels (simply a number) or just an asterisk (like *). An asterisk means that the size is determined by Netscape, depending on the space available. You can also assign a multiplier to an asterisk. For example, COL=*,*,2* will result in three columns, of which the third one is twice as wide as the first and the second one.
It is also possible to use the values in any combination. For example, COLS=20%,30,2*,* will result in a first column which has 20% of the width of the window and a second column which is 30 pixels wide. The remaining space will be divided between the third and the fourth column, whereby the third column will be twice as wide as the fourth one.
The <FRAME> tag defines the source file for the frame and the name of the frame. The source file for the frame is a normal HTML file.
You can also see that the <FRAME> tags have a SCROLLING attribute. This attribute defines is the frame will get scroll bars. If the value is "no", the frame will not get scroll bars, even if the source document does not fit in. If the value is "yes" the frame will get scroll bars, even if the document is so small that it is not necessary to have them. The final possibility is "auto". This value will give the frame scroll bars only if necessary. This is the default.
If you are using a browser that supports frames, you can now go and see how this example looks.
The first file with contents for the frames has nothing but a link back. It looks like this:
<HTML><HEAD>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<P><A HREF=../frames.html#back TARGET=_top>Back to the HTML guide</A>
<P>This link will bring you back the chapter about frames in the original
window.
</BODY></HTML>
The HREF tag specifies the file to link to. The TARGET tag can be used to specify how the document should be displayed. If you write the name of a frame here (see NAME tag above) the file that is linked to is displayed in that frame. If the value of the TARGET attribute is "_top", as it is here, the new document is displayed in a window without frames. Without the "_top" attribute, the html guide would be displayed in the frame the link is in.
Other possible values for the TARGET attribute are "_blank" and "_self" (which is the default). If the value is "_blank", the document will be displayed in a new window. If the value is "_self", the document will be displayed in the same frame that the link was first in.
This is the source of the file that is displayed in the middle frame of the column on the left. It is an example of the use of the "_blank" value for the TARGET attribute. Clicking the link will open the chapter about frames (the one you are reading now) in a new window.
<HTML><HEAD>
</HEAD>
<BODY BGCOLOR=#FAFC9F>
<P><A HREF=../frames.html#back TARGET=_blank>Back to the HTML guide</A>
<P>This will give you the chapter about frames in a new window! After you
clicked here you can see in Netscape's window menu that you have two
open windows.
</BODY></HTML>
This is the 3rd source file. This one uses the TARGET="dddd" attribute. You will remember that "dddd" is the name given to the right frame. If you click any of the links in this frame they will therefore be displayed in the big frame on the right.
<HTML><HEAD>
</HEAD>
<BODY BGCOLOR=#CCCCCC>
<P>Some chapters of the HTML guide.
<P>* <A HREF=../define.html TARGET=dddd>Introduction</A><BR>
* <A HREF=../body.html TARGET=dddd>Body text, pre-formatted text and font sizes</A><BR>
* <A HREF=../images.html TARGET=dddd>Images</A>
</BODY></HTML>
Finally, this is the 4th source file. You can notice that it is possible to define a different background for each of the frames. You can define a colour or use a graphic (see the chapter on basic HTML).
<HTML><HEAD>
</HEAD>
<BODY BGCOLOR=#A0FAECF>
<CENTER><H1>Frametest</H1></CENTER>
<H3>If you click any of the chapters of the HTML Guide in the lower left
frame, they will appear in this frame.</H3>
<P>Or you can click to get my <A HREF=../../index.shtml TARGET=_self>homepage</A>
displayed in this frame.
</BODY></HTML>
This source file gives an example of the TARGET="_self" attribute. If you click the link, my homepage will be displayed in that frame.
|
The new HTML 4 specification gives the possibility to do inline frames, also called floating frames. Here is a simple example of a floating frame including one of the source files used above:.
<IFRAME SRC=frametest/content_a.html WIDTH=300 HEIGHT=200 ALIGN=center></IFRAME>
The frame looks as follows:
For the SRC attribute you can use absolute and relative links and you can link to documents on any server, just as with normal frames. The WIDTH and HEIGHT attribute set the size of the frame. According to the HTML 4 specification, inline frames may not be resized, hence there is no NORESIZE attribute necessary or possible here. Inline frames have a FRAMEBORDER attribute for setting the size of the border around the frame.
<IFRAME SRC=frametest/content_a.html WIDTH=300 HEIGHT=100 FRAMEBORDER=5 ALIGN=center SCROLLING=yes><B>Sorry, your browser does not support inline frames.</B></IFRAME>
In this example you also see text between the IFRAME opening and closing text. This text is displayed in browsers that do not support inline frames.
The IFRAME tag also accept the CLASS and ID attributes that are related to the use of stylesheets.
The SCROLLING attribute tells the browser whether or not to use scroll bars. In case you specify "auto" there will be scrolling bars if necessary, "yes" means that there will be scroll bars even if that is not necessary -as in this example- and "no" means there will be no scroll bars available even if the contents of the frame cannot be displayed completely.
|