Frames
- allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame". Frames are very popular because they are one of the few ways to keep part of the page stationary while other parts change. Frames are also one of the most controversial uses of HTML, because of the way the frames concept was designed, and because many web framed web sites are poorly implemented.
- divide up your browser window into separate areas. In each of these a page is loaded. Links in different pages can be made to change the pages in other frames and frames can stay the same when another page changes. This means that you can have one page which has the navigation bar for a whole site on it and it never changes.
| Columns (Two columns with two rows in column #1.)
The basic code:  <frameset cols="50%,50%"><frameset rows="50%,50%"><frame src="col1row1.html"><frame src="col1row2.html"></frameset><frame src="col2.html"></frameset> |
| Rows (Two rows with two columns in row #1.)
The basic code: <frameset rows="50%,50%"><frameset cols="50%,50%"><frame src="row1col1.html"><frame src="row1col2.html"></frameset><frame src="row2.html"></frameset> | ||||
Example Code: <HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD> <FRAMESET ROWS="15%,*"> <FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO> <FRAMESET COLS="20%,*"> <FRAME SRC="recipesidebar.html" NAME=SIDEBAR> <FRAME SRC="recipes.html" NAME=RECIPES> </FRAMESET> <NOFRAMES> <H1>Great Recipes</H1> No frames? No Problem! Take a look at our <A HREF="recipes.html">no-frames</A> version. </NOFRAMES> </FRAMESET> </HTML>
OUTPUT:
from: URL = http://www.manda.com/frames/
Tables
- divide up a web page into separate cells (like in a spreadsheet). This means that you have a lot more control over where text and pictures can be placed. By using the method I described earlier (having a column for a navigation bar and a cell for the page text) you can create complex page structures. A page looking the same could be created with frames and tables.
EXAMPLE CODE:
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
OUTPUT:
| This is a paragraph This is another paragraph | This cell contains a table:
| ||||
| This cell contains a list
| HELLO |
DIV
-allows authors to assign certain attributes to blocks of contents. It's primary used in conjunction with style sheets to give visual styles to portions of content in a document. Also, the "id" attribute gives a way to dynamically change these attributes with or without the user interaction. Browsers usually place a break line before and after a div block .
EXAMPLE CODE:
<html>
<head>
<title>Enter first and last name</title>
<s:head theme="ajax" debug="false"/>
</head>
<body>
<s:div id="maskValue" >
<div style="position:absolute;top:10; left:20; width:300;
height:175;background-color:#E5E5E5;">
<h3>Enter first and last name:</h3>
<s:form theme="ajax" action="doMask">
<s:textfield name="firstname" label="Firstname" />
<s:textfield name="lastname" label="Lastname" />
<s:submit value="Submit" theme="ajax" targets="maskValue" />
</s:form>
</div>
<br>
<div id="8" style="position:absolute;top:10; left:350;
width:300; height:160;background-color:#E5E5E5;">
<h3>Output: </h3>
Firstname : <s:property value="firstname" />
<br><br>
Lastname : <s:property value="lastname" />
</div>
</s:div>
</body>
</html>
<head>
<title>Enter first and last name</title>
<s:head theme="ajax" debug="false"/>
</head>
<body>
<s:div id="maskValue" >
<div style="position:absolute;top:10; left:20; width:300;
height:175;background-color:#E5E5E5;">
<h3>Enter first and last name:</h3>
<s:form theme="ajax" action="doMask">
<s:textfield name="firstname" label="Firstname" />
<s:textfield name="lastname" label="Lastname" />
<s:submit value="Submit" theme="ajax" targets="maskValue" />
</s:form>
</div>
<br>
<div id="8" style="position:absolute;top:10; left:350;
width:300; height:160;background-color:#E5E5E5;">
<h3>Output: </h3>
Firstname : <s:property value="firstname" />
<br><br>
Lastname : <s:property value="lastname" />
</div>
</s:div>
</body>
</html>
OUTPUT:
