16 Frames

Content

  1. Introduction to Frames
  2. Frame Location
    1. FRAMESET element
    2. Element FRAME
  3. Defining the purpose of the frame
    1. Setting the default target for links
    2. Semantics of goals
  4. Alternate Content
    1. Element NOFRAMES
    2. Long descriptions of frames
  5. Built-in frames: the IFRAME element

16.1 Introduction to Frames

Frames in HTML allow authors to submit documents in several sections, which can be independent or nested windows. This provides designers with a way to leave some information visible, while other information is scrolled or replaced. For example, in one window a static banner can be displayed in one frame, in the second navigation menu, and in the third - the document itself, which can be scrolled or navigated to the other using navigation in the second frame.

Here is a simple document using frames: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> A simple document with frames </ TITLE>
 </ HEAD>
 <FRAMESET cols = "20%, 80%">
  <FRAMESET rows = "100, 200">
  <FRAME src = "contents_of_frame1.shtml">
  <FRAME src = "contents_of_frame2.gif">
  </ FRAMESET>
  <FRAME src = "contents_of_frame3.shtml">
  <NOFRAMES>
  <P> This document contains:
  <UL>
  <LI> <A href="contents_of_frame1.shtml"> Nice little textile </A>
  <LI> <IMG src = "contents_of_frame2.gif" alt = "Cute picture">
  <LI> <A href="contents_of_frame3.shtml"> Another nice textile </A>
  </ UL>
  </ NOFRAMES>
 </ FRAMESET>
 </ HTML>

This can lead to approximately the following screen structure: 

  ---------------------------------------
 | | |  | | |  | | |
 | | |  | | |  | | |
 | | |  Frame 1 |  | | |
 | | |  | | |  | | |
 | | |  | | |  | | |
 | --------- |  | | |
 | | |  | | |  Frame 3 |
 | | |  | | |  | | |
 | | |  | | |  | | |
 | | |  | | |  | | |
 | | |  Frame 2 |  | | |
 | | |  | | |  | | |
 | | |  | | |  | | |
 | | |  | | |  | | |
 | | |  | | |  | | |
  ---------------------------------------

If the user agent can not represent frames or is configured not to do so, it must generate the contents of the NOFRAMES element.

16.2 Location of frames

An HTML document that describes the layout of frames (called a document with frames ) does not look like an HTML document without frames. The standard document has one HEAD section and one BODY partition. A document with frames has a HEAD section and a FRAMESET section that replaces the BODY partition .

The FRAMESET section specifies the location of the frames in the main window of the user agent. In addition, the FRAMESET section may contain a NOFRAMES element with alternative content for user agents that do not support frames or are configured to not display them.

Elements normally placed in the BODY section must not be present before the first FRAMESET element, otherwise the FRAMESET element will be ignored.

16.2.1 FRAMESET element 

 <! [ % HTML.Frameset;
  [<!  ELEMENT FRAMESET - - ((FRAMESET | FRAME) + & NOFRAMES?) - subdivision of windows -> <! ATTLIST FRAMESET % coreattrs;
  - id , class , style , title - rows % MultiLengths;
  #IMPLIED - length list, default: 100% (1 line) - cols % MultiLengths;
  #IMPLIED - list of lengths, default: 100% (1 column) - onload % Script;
  #IMPLIED - all frames are loaded - onunload % Script;
  #IMPLIED - all frames deleted ->]]>

Attribute definitions

Rows = multi-length-list [CN]
This attribute specifies the location of the horizontal frames. This is a comma-separated list of pixels, percentages, and relative lengths. The default is 100%, which means one line.
Cols = = multi-length-list [CN]
This attribute specifies the location of the vertical frames. This is a comma-separated list of pixels, percentages, and relative lengths. The default is 100%, which means one column.

Attributes defined elsewhere

The FRAMESET element defines the layout of the user's main window in the form of rectangular spaces.

Rows and columns  

Setting the rows attribute specifies the number of horizontal space segments in the frameset. The attribute of the cols attribute defines the number of vertical segments. To create a grid, you can set both attributes simultaneously.

If the rows attribute is not set, each column occupies the entire length of the page. If the cols attribute is not set, each line occupies the entire width of the page. If none of these attributes is set, the frame occupies the entire page.

Frames are created from left to right for columns and from top to bottom for rows. If both attributes are specified, the sections of the windows are created from left to right in the top line, from left to right in the second line, etc.

In the first example, the screen is divided horizontally into two parts (that is, the upper and lower parts are created). 

  <FRAMESET rows = "50%, 50%">
 ... continuation of the definition ...

 </ FRAMESET>

The following example creates three columns: the second has a fixed width of 250 pixels (this is useful, for example, to represent an image of a known width). The first frame receives 25% of the remaining space, and the third - 75%. 

  <FRAMESET cols = "1 *, 250.3 *">
 ... continuation of the definition ...

 </ FRAMESET>

The following example creates a 2x3 grid. 

  <FRAMESET rows = "30%, 70%" cols = "33%, 34%, 33%">
 ... continuation of the definition ...

 </ FRAMESET>

For the following example, suppose that the browser window has a height of exactly 1000 pixels. The first section gets 30% of the total height (300 pixels). The second has a height of exactly 400 pixels. Remains 300 pixels on the other two frames. For the fourth frame, the height "2 *" is given, so it must be twice as high as the third one, for which the height "*" (equivalent to 1 *) is specified. Thus, the third frame will have a height of 100 pixels, and the fourth will have a height of 100 pixels. 

  <FRAMESET rows = "30%, 400, *, 2 *">
 ... continued determination ... </ FRAMESET>

Absolute lengths, if they do not give a total of 100% of the actually available space, must be corrected by the user agent. If the length is less than the actual length, the remaining space should be evenly distributed among all sections. If the specified length is greater than the actual length, each section should decrease depending on how much space it occupies.

Nested frame sets  

The number of levels of nesting frames is unlimited.

In the following example, the external FRAMESET element divides the available space into three equal columns. The internal FRAMESET element divides the second region into two lines of unequal height. 

  <FRAMESET cols = "33%, 33%, 34%">
  ... the content of the first frame ... <FRAMESET rows = "40%, 50%">
  ... the contents of the second frame, the first line ... ... the contents of the second frame, the second line ... </ FRAMESET>
  ... the contents of the third frame ...

 </ FRAMESET>

Separation of data between frames  

Authors can share data between multiple frames, including this data using the OBJECT element. The OBJECT element should be included in the HEAD element of the document with frames and name it using the id attribute. Any document that is the contents of a frame can reference this identifier.

The following example shows how to invoke the script to the OBJECT element defined for the entire set of frames: 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> This is a set of frames with the OBJECT element in the HEAD </ TITLE>
 <! - This OBJECT element is not represented!  ->
 <OBJECT id = "myobject" data = "data.bar"> </ OBJECT>
 </ HEAD>
 <FRAMESET>
  <FRAME src = "bianca.shtml" name = "bianca">
 </ FRAMESET>
 </ HTML>
 <! - In bianca.shtml ->
 <HTML>
 <HEAD>
 <TITLE> Bianchi page </ TITLE>
 </ HEAD>
 <BODY>
 ... the beginning of the document ... <P>
 <SCRIPT type = "text / javascript">
 Parent.myobject.myproperty
 </ SCRIPT>
 ... continuation of the document ... </ BODY>
 </ HTML>

16.2.2 The FRAME element 

  <! [ % HTML.Frameset;
  [
 <! - reserved frame names begin with the symbol "_", the rest with the letter ->
 <!  ELEMENT FRAME - O EMPTY - nested window ->
 <! ATTLIST FRAME
  % Coreattrs;
  - id , class , style , title -
  Longdesc % URI;
  #IMPLIED - link to a long description
  (Supplements the title) -
  Name CDATA #IMPLIED - name of the target frame -
  Src % URI;
  #IMPLIED - the source document for the frame -
  Frameborder (1 | 0) 1 - Do you need frame boundaries ?  -
  Marginwidth % Pixels;
  #IMPLIED - width of fields in pixels -
  Marginheight % Pixels;
  #IMPLIED - height of fields in pixels -
  Noresize (noresize) #IMPLIED - Allow users to resize frames?  -
  Scrolling (yes | no | auto) auto - presence of a scroll bar -
  >
 ]]>

Attribute definitions

Name = cdata [CI]
Assigns a name to the current frame. This name can be used as a target in subsequent links.
Longdesc = uri [CT]
Link to a long description of the frame. This declaration should complement the short description given by the title attribute, and can be especially useful for non-visual user agents.
Src = uri [CT]
Specifies the location of the initial contents of the frame.
Noresize [CI]
If this attribute is present, it informs the user agent that the frame sizes can not be changed.
Scrolling = auto | yes | no [CI]
This attribute specifies the information about frame scrolling. Possible Values
  • Auto: If necessary, provide scrolling capabilities. This is the default value.
  • Yes: Always provide scrolling capabilities.
  • No: Do not provide scrolling capabilities.
Frameborder = 1 | 0 [CN]
This attribute provides the user agent with information about the border of the frame. Possible values ​​are:
  • 1: The user agent must represent the separator between these frames and all adjacent frames. This is the default value.
  • 0: The user agent should not display the delimiter. Note that delimiters can still be displayed if they are specified in other frames.
Marginwidth = pixels [CN]
This attribute specifies the space left in the frame as the left and right fields. The value must be greater than one pixel. The default value depends on the user agent.
Marginheight = pixels [CN]
This attribute specifies the top and bottom fields in the frame. The value must be greater than one pixel. The default value depends on the user agent.

Attributes defined elsewhere

The FRAME element defines the content and appearance of a single frame.

Specifying the original contents of a frame  

The src attribute specifies the source document contained in the frame.

In the following HTML document example: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> Document with frames </ TITLE>
 </ HEAD>
 <FRAMESET cols = "33%, 33%, 33%">
  <FRAMESET rows = "*, 200">
  <FRAME src = "contents_of_frame1.shtml">
  <FRAME src = "contents_of_frame2.gif">
  </ FRAMESET>
  <FRAME src = "contents_of_frame3.shtml">
  <FRAME src = "contents_of_frame4.shtml">
 </ FRAMESET>
 </ HTML>

The following page should be created: 

  ------------------------------------------
 Frame 1 | Frame 3 | Frame 4 |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
 ------------- |  | | |  | | |
 | Frame 2 |  | | |  | | |
 | | |  | | |  | | |  | | |
 | | |  | | |  | | |  | | |
  ------------------------------------------

And the user agent must load each file into a separate section.

The contents of the frame and its definition should not be in the same document.

EXAMPLE OF UNACCEPTABLE USE:
The following definition of frames is not valid in HTML, because the contents of the second frame are in the document that describes the set of frames. 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN" "_THE_LATEST_VERSION_ / frameset.dtd"> <HTML> <HEAD> <TITLE> Frame document </ TITLE> </ HEAD> <FRAMESET Cols = "50%, 50%"> <FRAME src = "contents_of_frame1.shtml"> <FRAME src = "# anchor_in_same_document"> <NOFRAMES> ... some text ... <H2> <A name = "anchor_in_same_document" > Important section </A> </ H2> ... some text ... </ NOFRAMES> </ FRAMESET> </ HTML>

Visual representation of the frame  

The following example shows the use of decorative FRAME attributes. Frame 1 should not contain scroll bars. In frame 2, around the contents (image) there will be an empty space, and the frame size can not be changed. There will be no border between frames 3 and 4. Borders (default) will be present between frames 1, 2 and 3. 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> Document with frames </ TITLE>
 </ HEAD>
 <FRAMESET cols = "33%, 33%, 33%">
  <FRAMESET rows = "*, 200">
  <FRAME src = "contents_of_frame1.shtml" scrolling = "no">
  <FRAME src = "contents_of_frame2.gif" 
  Marginwidth = "10" marginheight = "15"
  Noresize>
  </ FRAMESET>
  <FRAME src = "contents_of_frame3.shtml" frameborder = "0">
  <FRAME src = "contents_of_frame4.shtml" frameborder = "0">
 </ FRAMESET>
 </ HTML>

16.3 Defining the purpose of the frame

Note. About how it is now customary to determine the purpose of a frame, you can find out in the comments about the frames in the application.

Attribute definitions

Target = frame-target [CI]
Specifies the name of the frame in which the document should be opened.
By assigning a name to a frame using the name attribute, authors can refer to it as a "target" for links, defined by other elements. The target attribute can be set for elements that create links ( A , LINK ), navigation maps ( AREA ), and forms ( FORM ).

You can find information about recognizable frame names in the section on names of target frames .

This example shows how targets provide a dynamic change to the contents of a frame. First, we define a set of frames in the frameset.shtml document shown here: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> Document with frames </ TITLE>
 </ HEAD>
 <FRAMESET rows = "50%, 50%">
  <FRAME name = "fixed" src = "init_fixed.shtml">
  <FRAME name = "dynamic" src = "init_dynamic.shtml">
 </ FRAMESET>
 </ HTML>

Then in the file init_dynamic.shtml we will refer to the frame with the name "dynamic". 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> Document with anchors for specific purposes </ TITLE>
 </ HEAD>
 <BODY>
 ... the beginning of the document ... <P> Now you can go to 
  <A href="slide2.shtml" target="dynamic"> slide 2. </A>
 ... the continuation of the document ... <P> Everything is fine.  We pass to 
  <A href="slide3.shtml" target="dynamic"> slide 3. </A>
 </ BODY>
 </ HTML>

Activating any of the links will open a new document in a frame named "dynamic", while in the other frame, "fixed", the original content is saved.

Note. The definition of a set of frames never changes, but the contents of one of the frames can change. If you change the original content of one of the frames, the definition of the frameset no longer reflects the current state of the frames.

It is currently impossible to fully encode the state of a set of frames in a URI. Thus, many user agents do not allow users to make frame sets in bookmarks.

Frame sets can make it difficult to move forward or backward through the list of pages viewed in the user's agent.

16.3.1 Setting the default target for links

If many references in the document use the same goal, you can specify it once and use it everywhere with the target attribute of each element. This is done by using the attribute of the target BASE element.

Let's go back to the previous example and define the target information in the BASE element and remove it from the A elements. 

  <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION_ / frameset.dtd">
 <HTML>
 <HEAD>
 <TITLE> Document with a target definition in the BASE element </ TITLE>
 <BASE href = "http://www.mycom.com/Slides" target = "dynamic">
 </ HEAD>
 <BODY>
 ... the beginning of the document ... <P> Now you can go to the <A href="slide2.shtml"> slide 2. </A>
 ... continuation of the document ...

 <P> Everything is fine.  We pass to 
  <A href="slide3.shtml"> Slide 3. </A>
 </ BODY>
 </ HTML>

16.3.2 Semantics of goals

User agents must define the target frame into which the linked resource is loaded in accordance with the following priorities (from highest to lowest):

  1. If the element has the target attribute and a known frame is used, when the item is activated (that is, clicking on links or processing the form), the resource assigned to the element must be loaded in the specified target frame.
  2. If the target attribute is not set for the element, and it is set in the BASE element, the frame is defined by the target attribute of the BASE element.
  3. If neither the element itself nor the BASE element is specified, the resource assigned by the element should be loaded into the frame in which the element itself is contained.
  4. If an unknown frame F is specified in the target attribute, the user agent must create a new window and frame, assign the name F to the frame, and load the resource assigned by the element into the new frame.

User agents can provide a mechanism for users to override the target attribute.

16.4 Alternate Content

Authors should specify alternative content for user agents that do not support frames or are configured to not display them.

16.4.1 The NOFRAMES Element 

  <! [ % HTML.Frameset;
  [
 <! ENTITY% noframes.content "(BODY) - (NOFRAMES)">
 ]]>
 <! ENTITY% noframes.content "( % flow; ) *">
 <!  ELEMENT NOFRAMES - - % noframes.content;
  - A container of alternative content for presentation without frames ->
 <! ATTLIST NOFRAMES
  % Attrs;
  - % coreattrs , % i18n , % events -
  >

The NOFRAMES element specifies the content that should be displayed only if frames are not displayed. User agents that support frames should display the contents of the NOFRAMES declaration only if they are configured to not display frames. User agents that do not support frames should display the contents of the NOFRAMES element in any case.

The NOFRAMES element can be used in the FRAMESET section of a document with frames.

For example: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION _">
  <HTML>
  <HEAD>
  <TITLE> Documents with frames and NOFRAMES </ TITLE>
  </ HEAD>
  <FRAMESET cols = "50%, 50%">
  <FRAME src = "main.shtml">
  <FRAME src = "table_of_contents.shtml">
  <NOFRAMES>
  <P> This is <A href="main-noframes.shtml">
  Version of the document without frames. </A> 
  </ NOFRAMES>
  </ FRAMESET>
  </ HTML>

16.4.2 Long frame descriptions

The longdesc attribute allows authors to make documents using frames more accessible to people using non-visual agents. This attribute assigns a resource that provides a long description of the frame. Authors should note that long descriptions related to frames are attached to the frame , not to its contents. Because content can change, the original long description will most likely not match the contents of the frame. In particular, you should not include an image as the only frame content.

The next document with frames describes two frames. In the left frame is the content, and in the right-first there is an image of the oyster: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION _">
 <HTML>
 <HEAD>
 <TITLE> Poorly crafted document with frames </ TITLE>
 </ HEAD>
 <FRAMESET cols = "20%, 80%">
  <FRAME src = "table_of_contents.shtml">
  <FRAME src = "ostrich.gif" longdesc = "ostrich-desc.shtml">
 </ FRAMESET>
 </ HTML>

Note that the image is included in the frame, regardless of any HTML element, so the author does not have another option to specify alternative text, other than the longdesc attribute. If the content of the right frame changes (for example, the user selects a snake in the content), the user will not have text access to the new frame content.

Thus, authors do not have to place the image directly in the frame. Instead, the image should be included in a separate HTML document and be provided there with the appropriate alternative text: 

 <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Frameset // EN"
  "_THE_LATEST_VERSION _">
 <HTML>
 <HEAD>
 <TITLE> Well-formed document with frames </ TITLE>
 </ HEAD>
 <FRAMESET cols = "20%, 80%">
  <FRAME src = "table_of_contents.shtml">
  <FRAME src = "ostrich-container.shtml">
 </ FRAMESET>
 </ HTML>

 <! - File ostrich-container.shtml: ->
 <HTML>
 <HEAD>
 <TITLE> Fast and powerful oyster </ TITLE>
 </ HEAD>
 <P>
 <OBJECT data = "ostrich.gif" type = "image / gif">
 These oysters are delicious!
 </ OBJECT>
 </ HTML>

16.5 Built-in frames: the IFRAME element 

  <!  ELEMENT IFRAME - - ( % flow; ) * - the built-in window of the second level ->
 <! ATTLIST IFRAME
  % Coreattrs;
  - id , class , style , title -
  Longdesc % URI;
  #IMPLIED - link to a long description
  (Supplements the title) -
  Name CDATA #IMPLIED - name of the target frame -
  Src % URI;
  #IMPLIED - the source document for the frame -
  Frameborder (1 | 0) 1 - request frame boundaries?  -
  Marginwidth % Pixels;
  #IMPLIED - width of fields in pixels -
  Marginheight % Pixels;
  #IMPLIED - height of fields in pixels -
  Scrolling (yes | no | auto) auto - presence of a scroll bar -
  Align% IAlign;
  #IMPLIED - vertical or horizontal alignment -
  Height % Length;
  #IMPLIED - frame height -
  Width % Length;
  #IMPLIED - frame width -
  >

Attribute definitions

Longdesc = uri [CT]
This attribute specifies a reference to a long frame description. This description should complement the short description given by the title attribute, and is particularly useful for non-visual user agents.
Name = cdata [CI]
This attribute assigns the name of the current frame. The name can be used as a target in the links.
Width = length [CN]
Length of the built-in frame.
Height = length [CN]
Height of the built-in frame.

Attributes defined elsewhere

The IFRAME element allows authors to insert a frame into a block of text. Inserting a built-in frame into a text section is more like inserting an object using the OBJECT element: they both allow you to insert one HTML document into another, both can be aligned with surrounding text, etc.

The inbuilt information is assigned by the src attribute of this element. The contents of the IFRAME , on the other hand, should only be displayed by user agents that do not support frames or are configured to not support them.

For user agents that support frames, in the following example, the embedded frame will be placed in the text. 

  <IFRAME src = "foo.shtml" width = "400" height = "500"
  Scrolling = "auto" frameborder = "1">
  [Your agent does not support frames or is configured to
  Do not display them.  However, you can view
  <A href="foo.shtml"> this document. </A>]
  </ IFRAME>

You can not change the size of the embedded frames (and therefore they do not have the noresize attribute ).

Note. HTML documents can also be embedded in other HTML documents using the OBJECT element. For more details, see the section on embedded documents .

Back next content elements attributes index