• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

HTML Frames

With HTML frames, you can display more than one HTML document in the same browser window .Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

HTML Frames are not excepted to be supported in future versions of HTML

HTML Frames are difficult to use.(printing the entire page is difficult>

The web developer must keep track of more HTML documents.

The HTML Frame Set Element

The HTML frame set element holds one or more frame elements .Each frame element can hold a separate document.

The frame set element states How many columns or rows there will be in the frame set and how much percentage /pixels of space will occupy each of them.

The HTML frame element

The<frame> tag defines one particular window (frame) with in a frame set.

In the example below we have a frame set with two columns.

The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window.The document “frame_a.htm” is put into the first column, and the document “frame_b.htm” is put into the second column:

<frame set cols=25%,75%>

<frame src=”frame_a.htm”/>

<frame src=”frame_b.htm”/>

</frameset>

Note: The frameset column size can also be set in pixels (cols=”200,500”), and one of the columns can be set to use the remaining space, with an asterisk(cols=”25%,*”).

Basic Notes –Useful tips

Tip: Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However if you add a <noframes> tag containing some text for browsers that do not support frames,you will have to enclose the text in <body</body> tags! See how it is done in the first example below.

How to use the <no frames>tag (for browsers that do not support frames):

<html>

<frameset cols=”25%,50%,25%”>

<frame src=”frame_a.htm”/>

<frame src=”frame_b.htm”/>

<frame src=”frame_c.hmt”/>

<noframes>

<body> Your browser does not handle frames!</body>

</noframes>

</frameset>

</html>

How to create a html frame set with three documents, and how to mix them in rows and column.

<html>

<frameset rows=”50%, 50%”>

<frame src=”frame_a.htm”/>

<frameset cols=”25%, 75%>

<frame src=”frame_b.htm”/>

<frame src=”frame_c.htm”/>

</frameset>

</html>

Frameset with noresize =”noresize”

<html>

<frameset rows=”50%,50%”>

<frame noresize=”noresize” src=”frame_a.htm”/>

<frame noresize=”noresize” src=”frame_b.htm”/>

</frameset>

</html>

Navigation

<html>

<frameset cols=”120,*”>

<frame src=” tryhtml_contents.htm”/>

<frame src=”frame_a.htm” name=”showframe”/>

</frameset>

</html>

Website Layouts

Most websites have put their content in multiple columns(formatted like a magazine or newspaper).

Multiple columns are created by using <table>or <div> tags.Some CSS are normally also added to position elements or to create backgrounds or colourful look for the pages.

HTML Layouts –Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.

The following example uses a table with 3 rows and 2 Columns –the first and last row spans both columns using the colspan attribute.

Example

<html>

<body>

<table width =”500” border=”0”>

<tr>

<td colspan =”2” style =”background-color:#FFA500;”>

<h1> Main Title of WebPage</h1>

</td></tr>

<tr valign=”top”>

<td style =”background-color:#FFD700;width:100px;text-align:top;”>

<b> Menu </b><br/>

HTML <br/>

CSS <br/>

Javascript</td>

<td style=background-color:#EEEEEE;height:200px;width:400px;text-align:top;”>

Content goes here</td>

</tr>

<tr>

<td colspan=”2” style=”background-color:#FFA500;text-align:center;”>

Copyright©2011 W3Schools.com</td>

</tr>

</table>

</body>

</html>

The Html code above will produce the following result:

Main Title of webpage

Menu         Content goes here

HTML

CSS

Javascript

Copyright(c)2011 W3Schools.com

Note: Even though it is possible to create nice laytouts with HTML tables , tables were designed for presenting tabular data-NOT as a layout tool!

HTML Layouts-Using Div Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

Example

<html>

<body>

<div id=”container” style=”width :500px”>

<div id =”header” style =”background-color:#FFA500;”>

<h1 style =”margin-bottm:0;”> Main title of the Webpage</h1></div>

<div id =”menu “ style=”background-color:#FFD700;height:200px;width:100px;float:left;”>

<b> Menu </b> </br>

HTML </br>

CSS </br>

JavaScript</br>

<div id =”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”> content goes here</div>

<div id =”footer” style=”background-color:#FFA500;clear:both;trext-align:center;”>

Copy right (c) 2011 W3 schools.com</div>

</div>

</body>

</html>

The HTML Code above will produce the following result:

Main Title of Web Page

Menu

HTML

CSS
JavaScript

Content goes here

Copyright(c) 2011W3Schools.com

HTML Layout –Useful Tips

Tip

The biggest advantage of using CSS is that,if you can place the CSS code in an external style sheet,your site becomes MUCH EASIER to maintain .You can change the layout of al your pages by editing one file.

Tip: Because advanced layouts take time to create, a quicker option is use to a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

Summary
Review Date
Reviewed Item
HTML Frames
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on HTML Frames"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.