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 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%,*”).
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!
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).
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
