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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Using Frames

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (4571)
  2. AJAX with POST and PHP (7153)
  3. Zuma Games (1619)
  4. CSS Styles with jQuery (1583)
  5. Lucky Balls (77)

Top accessed pages

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