SlideShare a Scribd company logo

Html frames

•
•
eShikshak
eShikshak

Using this presentation you will learn dividing the browser window into different parts(frame). With frames, several Web pages can be displayed in the same browser window.

Related slideshows

css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Java script
Java scriptJava script
Java script
 
1 of 14
Download to read offline
HTML Frames www.eshikshak.co.in
Introduction • Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. • You can then load and reload single panes without having to reload the entire contents of the browser window. • A collection of frames in the browser window is known as a frameset. www.eshikshak.co.in
Introduction • The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. • The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. www.eshikshak.co.in
Frame Drawbacks • Some browsers do not print well from framesets. • Some smaller devices cannot cope with frames, often because their screen is not big enough to be divided up. • Some time your page will be displayed differently on different computers due to different screen resolution. • The browser's back button might not work as the user hopes. • There are still few browsers who do not support farme technology. www.eshikshak.co.in
• To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. • The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. • Each frame is then represented by a <frame> element. www.eshikshak.co.in
Creating Frames - <frameset> Element • The <frameset> tag replaces the <body> element in frameset documents. • The <frameset> tag defines how to divide the window into frames. • Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical frames are created. • The values of the rows/columns indicate the amount of screen area each row/column will occupy. • Each frame is indicated by <frame> tag and it defines what HTML document to put into the frame. www.eshikshak.co.in
Example <html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%“> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> www.eshikshak.co.in
The <frameset> Element Attributes • cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: – Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". – A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". – Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. – As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. www.eshikshak.co.in
The <frameset> Element Attributes • rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. • border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there. • frameborder: specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border. • framespacing: specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. www.eshikshak.co.in
Loading Content - <frame> Element • The <frame> element indicates what goes in each frame of the frameset. • The <frame> element is always an empty element, and therefore should not have any content, although each <frame> element should always carry one attribute, src, to indicate the page that should represent that frame. www.eshikshak.co.in
Loading Content - <frame> Element <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> www.eshikshak.co.in
The <frame> Element Attributes • src: indicates the file that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in html directory. • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link. • frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> element if one is given, and the possible values are the same. This can take values either 1 (yes) or 0 (no). • marginwidth: allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10". www.eshikshak.co.in
The <frame> Element Attributes • marginheight: allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight=" 10". • noresize: By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize=" noresize". • scrolling: controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars. • longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm" www.eshikshak.co.in
Browser Support - <noframes> Element • If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user. • In XHTML you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand the <frameset> element it should understand what is inside the <body> element contained in the <noframes> element. • You can put some nice message for your user having old browsers. For example Sorry!! your browser does not support frames. www.eshikshak.co.in

More Related Content

Html frames

  • 2. Introduction • Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. • You can then load and reload single panes without having to reload the entire contents of the browser window. • A collection of frames in the browser window is known as a frameset. www.eshikshak.co.in
  • 3. Introduction • The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. • The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. www.eshikshak.co.in
  • 4. Frame Drawbacks • Some browsers do not print well from framesets. • Some smaller devices cannot cope with frames, often because their screen is not big enough to be divided up. • Some time your page will be displayed differently on different computers due to different screen resolution. • The browser's back button might not work as the user hopes. • There are still few browsers who do not support farme technology. www.eshikshak.co.in
  • 5. • To create a frameset document, first you need the <frameset> element, which is used instead of the <body> element. • The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. • Each frame is then represented by a <frame> element. www.eshikshak.co.in
  • 6. Creating Frames - <frameset> Element • The <frameset> tag replaces the <body> element in frameset documents. • The <frameset> tag defines how to divide the window into frames. • Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical frames are created. • The values of the rows/columns indicate the amount of screen area each row/column will occupy. • Each frame is indicated by <frame> tag and it defines what HTML document to put into the frame. www.eshikshak.co.in
  • 7. Example <html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%“> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> www.eshikshak.co.in
  • 8. The <frameset> Element Attributes • cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: – Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". – A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". – Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. – As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. www.eshikshak.co.in
  • 9. The <frameset> Element Attributes • rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns. • border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there. • frameborder: specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border. • framespacing: specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. www.eshikshak.co.in
  • 10. Loading Content - <frame> Element • The <frame> element indicates what goes in each frame of the frameset. • The <frame> element is always an empty element, and therefore should not have any content, although each <frame> element should always carry one attribute, src, to indicate the page that should represent that frame. www.eshikshak.co.in
  • 11. Loading Content - <frame> Element <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> www.eshikshak.co.in
  • 12. The <frame> Element Attributes • src: indicates the file that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in html directory. • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link. • frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> element if one is given, and the possible values are the same. This can take values either 1 (yes) or 0 (no). • marginwidth: allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10". www.eshikshak.co.in
  • 13. The <frame> Element Attributes • marginheight: allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight=" 10". • noresize: By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize=" noresize". • scrolling: controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars. • longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm" www.eshikshak.co.in
  • 14. Browser Support - <noframes> Element • If a user is using any old browser or any browser which does not support frames then <noframes> element should be displayed to the user. • In XHTML you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand the <frameset> element it should understand what is inside the <body> element contained in the <noframes> element. • You can put some nice message for your user having old browsers. For example Sorry!! your browser does not support frames. www.eshikshak.co.in