Frames
Frames split your browser windows into seperate parts. This lets you display multiple or more than one webpages in a single browser window.
Frames are outdated nowadays because they present no extra ordinary benefit and cause problems with search engines when they try to list a website based on frames. The use of CSS and scripting is nowadays preferred over the use of frames.
However if you are interested in making frames, here is how you do it.
Frameset Element
The frameset element contains the whole definition of other frames. It has as many <frame/> tags as many frames you want to add to the window. A <framset> element is written after the <head> element.
If you want to add two vertical frames i.e divide the page in columns, you'll use the frameset element as,
<frameset cols="40%,60%" >
This tells that the first frame will occupy 40% of screen width and and second one will occupy 60% of the screen width.
If you want to add two horizonatal frames i.e divide the page in rows than you'll use the frameset element as,
<frameset rows="40%,60%" >
This tells that the first frame will occupy 40% of screen width and and second one will occupy 60% of the screen width.
Frame elements
Frame elements are contained in the <frameset > element and they define an individual frame. The src attribute in frame tags defines the source of the frame.
Example
Suppose you want to display two pages, frame_1.html and frame_2.html in a single browser window in two vertical frames (columns). You want the first frame to occupy 20% of page width and second one to occupy 80%. Now you'll define the frameset as,
<html>
<head>
</head>
<frameset cols="20%,80%" >
<frame src="frame_1.html"/>
<frame src="frame_2.html"/>
</frameset>
</html>
The frame width can also be dined in pixels instead of percentages. You can also use a * sign in place of a percentage to specify that the frame can take all available space.
The line,
<frameset rows="20%,*" >
is same as above.
Noresize attribute
If you wnat to prevent the user from resizing the frame width or heights you can add the attribute noresize="noresize" to the frame element.
Frameborder attribute
Frameborder attribute allows you to specify if you want a frame border to appear or not. It can take the values 0 or 1. 1 specifies that a border will be drawn, this is also the default value. 0 sepcifies that a border will not be drawn.
Example
<frame src="frame_1.html" frameborder="0">
gives no border.
Scrolling attribute
With scrolling attrubte you can define if a scrollbar will appear or not. It can take value of auto, yes or no. With the value set to 'auto' the browser will give scrolling when necessary. It is the default value. 'Yes' always provide scrolling and 'no' never allows scrolliing
Example
<frame src="frame_1.html" frameborder="0" scrolling="no">
prevents scrolling.
Name and Target
Specifying a Name and Target allows you to open a new page in a particular frame.
This is useful when you are building a menu and one frame on your page contains the menu and other frame contains the content. If you click a link in the menu frame you will want the new page to open in the content frame and any link clicked in the content frame to open in the content page as well.
You can name a frame by using the name attribute like this,
<frameset cols="20%,80%" >
<frame src="menu.html" name="menu"/>
<frame src="content.html" name="content"/>
</frameset>
Now if you want to open a link in a particular frame say in the content frame, you can place an acnhor link with target="content" as show below,
<a href="example.html" target="content">Link</a>
This will open the page example.html is the content frame.
Targeting many links at once
When you have many links in the same document that needs to be opened in a same frame, you can specify the target for all links at once. In this case you won't have to specify targets for individual links.
To do this you make use of the base element, in which the target can be spcified for the entire document.
For example, refering to the above example, we can specify the base target in the menu.html like this,
<head>
<base target="content"/>
</head>
This target (content) now will be treated as the default target for all the links in the menu.html or menu frame.
Note: You can use the <noframes> element for browsers that do not support frames. The content enclosed the in the <noframes></noframes> element will be rendered by the browser in this case.
Next:
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,