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 attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Using Frames

Last accessed pages

  1. PHP OOP - Final Classes and Methods (2767)
  2. Bloons Tower Defense 3 (261)
  3. Butterfly Kyodai (7231)
  4. Zuma Honey (1523)
  5. Working with getElementsByTagName (7917)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47990)
  2. Read Excel file data in PHP - PhpExcelReader (36111)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35689)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32182)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29461)