Frames are used to divide the browser's window so that multiple webpages can be displayed in the same window.
A frame is a part of the aria of the browser's window.
Each frame contains their own document (generaly a HTML document). For example you can create two frames in a window, in the first frame you can load a HTML document (ex. doc1.htm) and in the second frame a different HTML document from a different address.(ex. doc2.htm).
As you can see in the image below.
To create frames you can use the following HTML tags:
- <frameset> and <frame> or <iframe>
Frame configuration
First you add an element <frameset> ... </frameset> inside the HTML document in the section HEAD.
<frameset> determins how much of the window's space is attributed to each frame, using the attributes ROWS or COLS that divide the screen in Lines or Columns.
This will contain <FRAME> elements, one for each division of the browser's window.
ROWS
- Determins the number of lines and the size of the frames that will be placed in a line, starting from up.
- The following values can be used:
- - absolute pixels ; ex.: "360,120"
- percentage of the screens height ; ex.: "75%,25%"
- proportional values, using (*). This one can be combined with percentage or pixels. Ex : "120,*" or "30%,*"
- - absolute pixels ; ex.: "360,120"
COLS
- It determins the number of columns and the size of the frames that will be placed in columns, starting from the left.
- The following values can be used:
- - absolute pixels ; ex : "380,120"
- percentage of the screens length ; ex.: "33%,77%"
- proportional values, using (*). This one can be combined with percentage or pixels. Ex.: "120,*" or "30%,*"
- - absolute pixels ; ex : "380,120"
Other attributes of the <frameset>
- frameborder - Decides if a border is shown around the frames. Possible values: 0, 1 or YES, NO.
- framespacing - This attribute is specified in pixels. If frameborder is 0 then this attribute must also have the value 0
- border - The frames border. Possible values: 0 or 1
- bordercolor - This attribute allows you to choose the border's color.
The <frame> tag
- This element defines a single frame, it's written inside the <frameset>
- For each frame a <frame> element must be written.
- It has the following attributes:
- src - Here you must write the address and the name of the webpage used for the frame
- NAME - Here you must write the frame's identification name.
- MARGINWIDTH - Optional attribute, value is in pixels. Determins the horizontal space between the frame's content and it's border
- MARGINHEIGHT - Optional attribute, value is in pixels. Determins the vertical space between the frame's content and it's border.
- SCROLLING - Displays a Scroll Bar in the frame. Possible values: YES (allows the display of the Scroll Bar), NO (no Scroll Bar will be displayed) and AUTO (the browser decides if the Scroll bar is necessary. This value is recommended)
- NORESIZE - Optional, prevents the user from changing the frame's size, by dragging the border left or right, up or down.
Below you can see how to make a HTML webpage that will contain two frames, the one on the left using 23% of the webpage's space and the other on the right 77%.
<html> <head> <title> PAGE TITLE </title> </head> <frameset cols="23%,77%"> <frame src="doc1.htm" name="left" scrolling="no"> <frame src="doc2.htm" name="right" scrolling="yes"> </frameset> <body> </body> </html>
You can also make a frame design with a combination of lines and columns.
In this case, a second element "<frameset>" will be written instead of the element "<frame>" which represents the second line. The second element <frameset> will divide the remaining space in two columns. For that, the second element "<frameset>" must contains another two "<frame>" tags
- For a better understanding you can study the example below, it creates a webpage that contains three frames:
<html> <head> <title> PAGE TITLE </title> </head> <frameset cols="120,*"> <frame src="baner.htm"> <frameset cols="120,*"> <frame src="Meniu.htm" name="meniu"> <frame src="Continut.htm" name="date"> </frameset> </frameset> <body> </body> </html>
The target attribute
When we make links to be used to open webpages in frames, it is necessary to specify an attribute named target in the link tag "<a>", this tells the browser in which frame to open the webpage.
The attribute target uses as value the text from the attribute NAME of the element frame in which a new webpage will be opened.
For example, if we have a link in Meniu.htm that we want to open the page Doc3.htm in the area of the other frame, for example Continut.htm; the HTML code for the link will look like this in Meniu.htm:
- <a href="Doc3.htm" target="the name of the frame.htm"> The name of the link </a>
- the TARGET attribute must have the same value as in the NAME attribute of the frame in which you wish to display the webpage.
Special Target:
- There are 4 special TARGET values. Each has a special function.
- target="_top"
- - this one will load the link in entire window, therefore the frames will disappear.
- target="_blank"
- - this one will load the link in a new window, the old window will remain opened.
- target="_self"
- - this one will load the link in the same window in which it was clicked.
- target="_parent"
- - the "_parent" frame is the previous frame from which the new frame was opened, if it does not exist then the link will be opened in current window.
Usinng iframes
To create a frame with "<iframe>" you can use, for example, the following syntax (it will be added in the BODY section, in the place where you want the frame to appear).
- <iframe src="page_url" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="name_frame"> </iframe>
- "page_url" is the webpage's address that will be loaded in iframe, "width" and "height" represent the length and hight of the frame (expressed in percentage or pixels)
- "scrolling" sets the permission to scroll the webpage in the frame (yes or no), "frameborder" specifies if a border will be displayed or not for the frame (1=yes, 0=no), and "name_frame" is the name of the frame (necessary for the "TARGET" attribute in links or when the iframe is used by JavaScript).