HTML Frames HTML Frames
HTML Frames Tutorial and Information







HTML Tutorial - HTML Frames

HTML Frames allow web designers to display more than one HTML document or web page in one browser window. A frames page is an "empty" HTML document, which tells the browser which web pages to display in a frame and where these frames are located in the browser window.

How To Create A Frames Page

View a live sample of a frames page

Frames pages are commonly used to contain one or more menus and one or more content pages. When the user clicks on a link in the menu frame, the content frame changes while the menu frame(s) stays the same.

Webmaster Seminar does not recommend the use of frames! Frame pages can not be indexed by most search engines and therefore are not suitable for search engine optimization. HTML Frames are outdated and should be substituted with PHP and CSS!

If you are still interested in how to create frames using HTML, here we go:

Frameset Rows And Frameset Columns

Just like with HTML tables, there are rows and columns which need to be specified in a frameset. The <frameset> tag is used to specify columns and rows. 
<frameset rows="20%,*">
<frameset cols="150,*">
In the HTML frames example above we have set the frames page to have 2 rows (the top row's height is 20% of the browser window), and 2 columns where the right column of the frame has a width of 150 pixels, and the left column of the frame has a dynamic width using the rest of the available width in the browser window.

You may specify as many rows and columns in a fames page as you like. For example, here is a frames page with 3 rows: 

<frameset rows="20%,*,100">
<frameset cols="150,*">
This frames page uses 3 rows, the top row has a height of 20% in the browser window, the bottom row has a height of 150 pixels, and the middle row is dynamic. The columns are the same as in the frames page example before.

Specify Which HTML Page To Display In A Frame

Now you need to specify the HTML documents or web pages you want to display in the frames. How to use the <frame src=""> tag: 
<frameset rows="20%,*">
<frame src="htmlframestop.htm">
<frameset cols="150,*">
<frame src="htmlframesright.htm">
<frame src="htmlframesleft.htm">

Frame Attributes - Border - Frameborder - Framespacing

Just like with HTML tables, you can specify the border width of a frame, the frameborder, and framespacing. 
<frameset border="1" frameborder="1" framespacing="5" rows="20%,*">
<frame src="htmlframestop.htm">
<frameset border="1" frameborder="1" framespacing="5" cols="150,*">
<frame src="htmlframesright.htm">
<frame src="htmlframesleft.htm">

Frame Attributes - The Noresize and Scrolling Attributes

The frames can be resized by the user (click and drag if there is a visible border). In order to prevent users from resizing frames you need to add the noresize attribute to the frame source tag. If you do not want the user to be able to scroll inside a frame you need to add the scrolling attribute with the value "no" scrolling="no". 
<frameset border="1" frameborder="1" framespacing="5" rows="20%,*">
<frame src="htmlframestop.htm" noresize scrolling="no">
<frameset border="1" frameborder="1" framespacing="5" cols="150,*">
<frame src="htmlframesright.htm" scrolling="auto" noresize>
<frame src="htmlframesleft.htm" scrolling="yes" noresize>

NoFrames Tag For Browsers Which Do Not Support Frames

Some browsers might not support frames. In order to let users know that this is a frames page and that the browser does not support frames you need to add the <noframes> tag to the bottom of the frames page's HTML code. Place a <body> element inside the <noframes> element, otherwise the browser will not be able to display your message, and add some text informing the user about the browser not supporting frames: 
<html>
<head>
<title>Frames Page Sample 1 - WebmasterSeminar.com</title>
</head>
<frameset border="1" frameborder="1" framespacing="5" rows="20%,*">
<frame src="htmlframestop.htm" noresize scrolling="no">
<frameset border="1" frameborder="1" framespacing="5" cols="150,*">
<frame src="htmlframesright.htm" scrolling="auto" noresize>
<frame src="htmlframesleft.htm" scrolling="yes" noresize>
  <noframes>
<body>
  <p>This site uses frames. Your browser does not support frames ... </p>
  </body>
  </noframes>
</frameset>
</html>
View a live sample of this frames page

Advantages Of Using Frames

Saving time updating larger web sites.

Disadvantages Of Using Frames

Not indexable by most search engines.
Not suitable for search engine optimization.
Problems with printing a frames page.
The use of frames is outdated. PHP and CSS offer better solutions and search engine friendlier options.



HTML Related Links

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:


Copy the code below and paste into your web page 
<a href="http://www.webmasterseminar.com/htmlframes.php">
Webmaster Seminar</a><br />
HTML Frames - Free Information, Tutorials and HTML Resources



HTML Frames - © WebmasterSeminar 2000 - 2008 Terms Of Use