HTML frameset tag
Note: If you don't know what a tag is and/or how you must use it we recommend you to read our HTML tags and attributes tutorial that you can find in our HTML tutorials section.
The
HTML frameset tag divides the available space in rectangular subspaces, where an individual HTML document can be loaded for each through the
HTML frame tag. The number of frames and their sizes will be defined through the "rows" and "cols" attributes.
Next, a simple example is dividing the screen in two columns, the first with 250 pixels of width and the second with all the remaining space.
Code begin
<frameset cols="250,*">
<frame name="first" noresize="noresize" src="1.html">
<frame name="second" noresize="noresize" src="2.html">
</frameset>Code end
There are unlimited possibilities to divide the screen in frames. Frames can be nested which allows authors to subdivide each one of the frames. Frames are subdivided by replacing a single frame by a frameset.
Code begin
<frameset rows="100,*">
<frame name="title" noresize="noresize" src="title.html">
<frameset cols="150,*>
<frame name="navigation" noresize="noresize" src="navigation.html">
<frame name="content" noresize="noresize" src="index.html">
</frameset>
</frameset>Code end
And there are more possibilities of nesting frames. For example if the "index.html" file in the example above is a frameset document, this will make new divisions to the "content" frame.
The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element.
Example:
Code begin
<p id="paragraph1">This is the first paragraph named as paragraph1. To dynamically change its properties use this identifier.</p>Code end
The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used with style sheets and tells the browser the class to which the element is associated with. A class gives visual attributes to elements.
Example:
Code begin
<p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p>
<p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>Code end
Defines a visual style of this element. Is a better practice to define styles attributes in external style sheets grouping them in classes. Attributes in the "style" parameter must preserve this order "name : value" and be separated by a semi-colon.
If you're writing
XHTML code it's recommended not to use this attribute and try style sheet classes (with the "class" attribute).
Example:
Code begin
<p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style</p>
<p>And this is another text without style.</p>Code end
Indicates a title for the element. Used to give a short description about the element that is usually shown as a "tool tip" when the user put the mouse pointer over the element.
Example:
Code |
View |
<a title="HTMLQuick.com" href="http://www.htmlquick.com">HTML code</a> |
HTML code |
Defines a comma separated list where each value sets the height for a single frame. The number of rows (frames) will be the numbers of elements in this list.
Defines a comma separated list where each value sets the width for a single frame. The number of columns (frames) will be the numbers of elements in this list.
See complete list and information about
events in HTML