Html5
- 1. HTML Frames Frames divide a browser window into several pieces or panes, each pane containing a separate HTML document. One of the key advantages that frames offer is that 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.
- 2. • 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. • 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.
- 3. 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>
- 4. <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%".
- 5. • 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. • border: attribute specifies the width of the border of each frame in pixels. • 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.
- 6. <frame> Element Attributes: • src: indicates the file that should be used in the frame. Its value can be any URL. • name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into.. • frameborder: attribute specifies whether or not the borders of that frame are shown. 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".
- 7. • 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.
- 8. The <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.
- 9. Frame's name and target attributes • One of the most popular uses of frames is to place navigation bars in one frame and then load the pages with the content into a separate frame. • <frame> element can carry the name attribute to give each frame a name.This name is used in the links to indicate which frame the new page should load into. <a href=http://www.google.com target="main_page">Google</a>
- 10. Inline Frames - The <iframe> Element: • You can define an inline frame with the <iframe> tag. • The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document. • The <iframe> tag defines a rectangular region within the document in which the browser displays a separate document, including scrollbars and borders. • Use the src attribute with <iframe> to specify the URL of the document that occupies the inline frame.
- 11. Example <html> <head></head> <body> <iframe src=“URL" width="75" height="200" align="right"> </iframe> </body> </html>
- 12. <iframe src="demo_iframe.htm” name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>