Quick HTML




Frames


The frames function is to divide in parts the browser window
in order to present more documents at the same time.

Basic structure

This is basic structure of a page with two frames.

If the browser does not support frames, it will show an alternative content (noframe content).

To build a page using frames, follow these steps:
  1. to split the window in columns, use the <FRAMESET cols="..."> tag;

  2. to split the window in rows, use the <FRAMESET rows="..."> tag;

  3. to split the window in rows and columns as a grid, specify both tags;

  4. specify the width of each frame.

    The width values can be expressed in :
    • fixed number of pixel
    • percentage of the remaining space

  5. list each target file using the <FRAME src="..."> tag;

  6. specify the alternative content using the <NOFRAME> structure as below:
<HTML>

<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>

<FRAMESET cols="20%, 80%">
<FRAME src="pageone.htm">
<FRAME src="pagetwo.htm">

<NOFRAMES>
<BODY>
<P>
(Your browser does not support frames.)
<H1>Contents</H1>
<A href="pageone.htm">Page one</A>
<BR>
<A href="pagetwo.htm">Page two</A>
<BR>
</P>
</BODY>
</NOFRAMES>

</FRAMESET>

</HTML>

The target files specified in the example above: 
<HTML>
<HEAD>
<TITLE>Page one</TITLE>
</HEAD>
<BODY>
<P>
This is "pageone.htm".
It's an example of the use of frames.
You can see more documents into the same window.
</P>
</BODY>
</HTML>


<HTML>
<HEAD>
<TITLE>Page two</TITLE>
</HEAD>
<BODY>
<P>
This is "pagetwo.htm".
This page shows the use of frames.
The browser presents more documents at the same time.
</P>
</BODY>
</HTML>
Try this:
  1. Copy the code of "Frame example" and save it as frame.htm

  2. copy the code of "Page one" and save it as pageone.htm

  3. copy the code of "Page two" and save it as pagetwo.htm

  4. open frame.htm and see the result.

Frame attributes

Frame border

The border of the frame becomes invisible using the frameborder="0" attibute: 
<FRAME src="example.htm" frameborder="0">

No resizeable frame

The frame window becomes no resizeable using the noresize attribute: 
<FRAME src="example.htm" noresize>

Scrolling bar

We can enable or disable the scrolling bar of the frame window using the proper scrolling attribute:
scrolling="auto"
the frame window will have the scrolling bar only when necessary. This is the default value.

scrolling="yes"
the frame window will always have the scrolling bar.

scrolling="no"
the frame window will never have the scrolling bar.

For example, to disable the scroll bar: 
<FRAME src="example.htm" scrolling="no">

Frame margins

We can specify the width in pixels of left and right margin of a frame, using the marginwidth attribute: 
<FRAME src="example.htm" marginwidth="10">
We can specify the width in pixels of top and bottom margin of a frame, using the marginheight attribute: 
<FRAME src="example.htm" marginheight="20">
All these attributes can be used at the same time. For example: 
<FRAME src="example.htm" noresize scrolling="no" marginwidth="10" marginheight="10">

Nested Framesets

We can place a frameset into another frameset.

For example: if we need to place three frames using the following layout....

Frame n°1

pageone.htm
(width: 40%)

Frame n°2

pagetwo.htm (width: 60%)

Frame n°3

pagethree.htm (width: 60%)

...we will use the following code: 
<HTML>
<HEAD>
<TITLE>Nested frameset example</TITLE>
</HEAD>
<FRAMESET cols="40%, 60%">
 <FRAME src="pageone.htm">

 <FRAMESET rows="50%, 50%">
 <FRAME src="pagetwo.htm">
 <FRAME src="pagethree.htm">
 </FRAMESET>

<NOFRAMES>
<BODY>
<P>Your browser does not support frames.</P>
</BODY>
</NOFRAMES>

</FRAMESET>
</HTML>

Target frame

We can assign to a link the property to open the relative document into a target frame identified with a name.

Example:

The following document has two frames; into the left frame there is a document called list.htm, containing a list of links.
Selecting a link from the list, the relative document will always open into the right frame, called chapter. 
<HTML>
<HEAD>
<TITLE>Target Frame example</TITLE>
</HEAD>

<FRAMESET cols="20%, 80%">
<FRAME src="list.htm">
<FRAME name="chapter" src="1.htm">

<NOFRAMES>
<BODY>
<P>Your browser does not support frames.</P>
</BODY>
</NOFRAMES>
</FRAMESET>

</HTML>
This is the code of list.htm: 
<HTML>
<HEAD>
<TITLE>List</TITLE>
</HEAD>
<BODY>
<H1>Index</H1>
<UL>
<LI><A href="1.htm" target="chapter">Page 1</A></LI>
<LI><A href="2.htm" target="chapter">Page 2</A></LI>
<LI><A href="3.htm" target="chapter">Page 3</A></LI>
<UL>
</BODY>
</HTML>


Next page :

how to add doctype definition and meta informations.
Basic structure

Paragraphs and headings

Formatting the text

Lists

Images

Links

Tables

Frames

Standardization

Style sheets

CSS syntax

DIV and SPAN sections

Margin and padding

Width and height

RGB colours

Borders

Fonts

Alignment

Link style

Background

Publishing
|   Back   |   Index   |   Next   |