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.

Example HTML frames

To create frames you can use the following HTML tags:

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
        COLS
Other attributes of the <frameset>
The <frame> tag
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:

- if the TARGER attribute is not specified, the webpage will open in the current frame
- 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:

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).

- Where "iframe" is the main element that indicates the adding of a frame in the webpage.
- "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).

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Using Frames

Last accessed pages

  1. Logic Perspicacity Games (4721)
  2. Butterfly Kyodai (17106)
  3. Bubbles3 (25088)
  4. Zuma Honey (3507)
  5. Ajax-PHP Chat Script (29240)

Popular pages this month

  1. Qwop (4286)
  2. Bubbles3 (3791)
  3. Butterfly Kyodai (2698)
  4. Zuma Deluxe (2492)
  5. Backgammon (1288)