Frames

Frames allows simultaneously render multiple web pages.

<frameset> element

To define frames on a webpage, replace the <body> block of a standard web page with a <frameset>..</frameset> block. For each page you wan to simultaneously insert, add a <frame> element inside of the <frameset> element. To define the page to be loaded in each frameset, use the src attribute of each <frame> element.

Horizontal Frames

snippet

<html>
<head></head>
<frameset rows="200,*">
<frame src="p1.html">
<frame src="p2.html">
</frameset>
<html>

Vertical Frames

snippet

<html>
<head></head>
<frameset col="200,*,10%">
<frame src="p1.html">
<frame src="p2.html">
<frame src="p3.html">
</frameset>
<html>

Grid of Frames

Grid of frames can be defined by setting both the rows and cols attributes. rows="200, *, 2* cols="30%, *" represents the following

* A grid of frames 3 rows by 2 columns * The top rrow is 200 pixels high and and the rest is divided into 3 equal paryd . the bottom rows cover two thirds. * The left column cover 30% of the width of the browser, the right column cover the rest.

snippet

<html>
<head></head>
<frameset col="200,*,2*" cols="30%,*">
<frame src="p1.html">
<frame src="p2.html">
<frame src="p3.html">
<frame src="p4.html">
<frame src="p5.html">
<frame src="p6.html">
</frameset>
<html>

Nested Frameset

snippet

<html>
<head></head>
<frameset col="150,*,10%">
    <frame src="p1.html">
	<frameset rows="100,*">
	<frame src="logo.gif" noresize>
	<frame src="p1.html">
	<frame src="p2.html">
	</frameset>
    <frame src="p3.html">
</frameset>
<html>

<frameset> attributes

The frameset element accepts attributes to describe the content and thepprearance of the frame cols => +ive integers, % - size as parent frome, n* - where n defines the equal parts of the rest of the space. rows - horizontal division of the frameset border - defines the thickness of the inner frame bordercolor - defines the color of the borders. frameborder - Border visible or not. The possible values are "yes" and "no" framespacing - similar to frameborder (only internet explorer)

snippet

<html>
<head></head>
<frameset rows="150,*,10%,100" cols="*,*,*" frameborder="no">
	<frameset cols="100,5*,*,105" border="15" bordercolor="#ff0000" frameborder="yes">
	<frame src="logo.gif" noresize>
	<frame src="p1.html">
	<frame src="p2.html">
	<frame src="p3.html">
	<frame src="p4.html">
	</frameset>
<frame src="p5.html" marginwidth="100" scrolling="yes">
<frame src="p2.html" marginwidth="100" bordercolor="blue">
</frameset>
<html>

<frame> attributes

border color frameborder margin height marginwidth name noresize scrolling => auto, yes, no src

snippet

<html>
<head></head>
<frameset rows="*,3*" cols="*,*,*" frameborder="yes" bordercolor="green">
<frame src="logo.gif" noresize>
<frame src="p2.html" marginwidth="100" scrolling="yes">
<frame src="p3.html" frameborder="no" longdesc="http://quotefellas.coom">
<frame src="src.pdf">
<frame src="p5.html" marginwidth="100" scrolling="yes">
<frame src="p2.html" marginwidth="100" bordercolor="blue">
</frameset>
<html>

Targets

The link target of the window or the frame. _self _blank _parent _top

In-line Frames

Inline frame can be inserted anywhere inside a web page. To use inline frame, use the <iframe>...</iframe> element.

snippet

<html>
<head></head>
This is the text before the  iframe
<iframe src="page1.html" align="left">iframe1</iframe>
<iframe src="page2.html" align="right" width="350" height="200">iframe2</iframe>
<html>

Output

This is the text before the iframe