In this tutorial you will learn about the HTML Frames and its application with practical example.
HTML Frames gives us a way to merge multiple HTML Documents in a single HTML Document. HTML Frames splits the browser window into multiple panes or rectangular sections, each pane can contain separate HTML Document.This division process is same as for the HTML Table.
HTML Frameset (<frameset>) element is used instead of HTML Body (<body>) tag to split the browser screen into multiple pane, and each pane is defined by HTML Frame (<frame>) element.
Example:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head><title>W3school Frame Page</title> </head> <frameset cols="30%, 70%"> <frame src="left-pane.html"> <frame src="container.html"> </frameset> </html> |
Output:
HTML Frameset Attributes
| Attribute | Description |
|---|---|
| cols | This attribute specifies the number of columns in frameset along with their width separated by the comma.Width can be specified in percentage or pixels |
| rows | This attribute specifies the number of rows in frameset along with their height separated by the comma.Height can be specified in percentage or pixels |
| border | This attribute specifies the width of the border for the frames. Value “0” means no border. |
Example-1:
|
1 2 3 4 5 6 7 |
<frameset cols="50%,50%"> <frameset rows="50%,50%"> <frame src="col1row1.html"> <frame src="col1row2.html"> </frameset> <frame src="col2.html"> </frameset> |
Output:
| col 1, row 1 | col 2 |
| col 1, row 2 |
Example-2:
|
1 2 3 4 5 6 7 |
<frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="row1col1.html"> <frame src="row1col2.html"> </frameset> <frame src="row2.html"> </frameset> |
Output:
| row 1, col 1 | row 1, col 2 |
| row 2 | |
HTML Frame Attributes
| Attribute | Description |
|---|---|
| src | This attribute specifies URL of the source HTML Document. This can be absolute or relative path. |
| frameborder | This attribute specifies whether or not the frame border shown. Possible values either 1 (yes) or 0 (no). |
| noresize | This attribute specifies whether or not user will be able to resize the frame. |
| scrolling | This attribute specifies whether or not scrollbars will appear for the frame. |
Inline Frames – The HTML <iframe> Element:
We can create an inline frame within the HTML Document using the <iframe> tag. HTML <iframe> gives us a way to call HTML Document inside another HTML Document.HTML <iframe> element defines a rectangular region inside the HTML document in that region browser will render a separate HTML document, including scrollbars and borders.
| Attribute | Description |
|---|---|
| src | This attribute specifies URL of the source HTML Document. This can be absolute or relative path. |
| width | This attribute specifies frame width.Width can be specified in percentage or pixels. |
| Height | This attribute specifies frame height.Height can be specified in percentage or pixels. |
| frameborder | This attribute specifies whether or not the frame border shown. Possible values either 1 (yes) or 0 (no). |
| scrolling | This attribute specifies whether or not scrollbars will appear for the frame. |
