Html Course

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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Using Frames

Last accessed pages

  1. Get and Modify content of an Iframe (31991)
  2. innerHTML and outerHTML to Get and Replace HTML content (30469)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (25925)
  4. Highlight Images on click (6639)
  5. Animation with the Timer class (1714)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (317)
  2. PHP Unzipper - Extract Zip, Rar Archives (108)
  3. Read Excel file data in PHP - PhpExcelReader (101)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)
Chat
Chat or leave a message for the other users
Full screenInchide