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.

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%.
<title> PAGE TITLE </title>
<frameset cols="23%,77%">
  <frame src="doc1.htm" name="left" scrolling="no">
  <frame src="doc2.htm" name="right" scrolling="yes">

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:
<title> PAGE TITLE </title>
<frameset cols="120,*">
  <frame src="baner.htm">
  <frameset cols="120,*">
    <frame src="Meniu.htm" name="meniu">
    <frame src="Continut.htm" name="date">

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

Which attribute is used in <img> tag for the address of the image?
href src rel
<img src="" width="191" height="63" alt="Courses-Web" />
Which CSS code hides the element on page?
display: none; display: inline; position: relative;
#id {
  display: none;
What instruction stops the execution of a while() or for() statement?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
Indicate the function that can create a constant.
define() include() defined()
define("CONSTANT_NAME", "value");
Using Frames

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (5229)
  2. Diamond shape with CSS (1286)
  3. Register and show online users and visitors (14198)
  4. Zuma Deluxe (20241)
  5. AnythingZoomer - Zoom part of Image or Text Content (1055)

Top accessed pages

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