Module 10
Creating HTML
Frames
FRAME
A framed page is made up of multiple HTML pages.
One HTML document describes how to break up the
single browser window into multiple windowpanes.
Each windowpane is filled with an HTML document.
It is used to divide your browser windows into
multiple sections where each section can load a
separate HTML document. A collection of frames in
the browser is known as a frameset. The window is
divided into frames in a similar way the tables are
organize into rows and columns
FRAME PAGE ARCHITECTURE
The <frameset>
A <frameset>
describes the amount of
element is placed in
screen real estate given
the html document
to each
before the <body>
windowpane by dividing
element.
the screen into ROWS or
COLS.
The <frameset> will then contain <frame> elements, one per division
of the
browser window.
Frameset Container
COLS: Determines the size and number of rectangular columns within a
<frameset>.
They are set from left to right of the display area.
Example syntax for columns:
<frameset cols="50%,50%">
<frame src="iframe1.html">
<frame src="iframe2.html">
</frameset>
Frameset Container
ROWS: Determines the size and number of rectangular rows within a
<frameset>. They are set from top of the display area to the bottom.
Example syntax for rows:
<frameset rows="50%,50%">
<frame src="iframe1.html">
<frame src="iframe2.html">
</frameset>
Frames Attributes
You can use these attributes to modify the overall look of
your webpages, however all of these attributes are just
optional.
noresize: Optional – prevents viewers from resizing the
frame. By default, the user
can stretch or shrink the frame’s display by selecting the
frame’s border and moving it up, down, left, or right.
Ex: <frameset rows="50%,50%", noresize= “noresize”>
Frames Attributes
Border (thickness of the Frame):
This attribute specified in pixels. A setting of zero will create
a borderless frame. Default value is 5.
Ex: <frameset rows="50%,50%", noresize, border=20>
bordercolor: This attribute allows you choose a color for your
border. This attribute is rarely used.
Ex: <frameset rows="50%,50%", noresize, border=20,
bordercolor=red>
Compound FRAMESET Divisions
In this case, a second FRAMESET element will be inserted in
the place of the FRAME element that would describe the
second row.
The second FRAMESET element will divide the remaining
screen real estate into 2 columns.
This nested FRAMESET will then be followed by 2 FRAME
elements to describe each of the subsequent frame divisions
created.
<!Doctype html>
<html>
<head>
<title> Compound Frames
Page</title>
<frameset rows="120,*">
<frame src="banner.html">
<frameset cols="120,*">
<frame src="links.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
FRAMESET TARGET
When you use links for
use in a frames
environment you will
need to specify an
additional attribute
called TARGET.
The TARGET attribute
uses the NAME attribute
of the FRAME element.
To create this simple webpage like this,
you need to create 4 separate pages.
The 1 page we name it as Frame
st
target.
Sample syntax for frame target:
<frameset cols="20%,80%">
<frme src="menu.htm" NORESIZE>
<frame scr="home.htm" name="content" NORESIZE>
<frame src="content.htm" name="content" NORESIZE>
</frameset>
For the 2nd page we name it Menu.
Sample syntax for frame target:
p> MENU </p>
<ul>
<li> <a href="home.htm" target="content"> HOME </a></li>
<li> <a href="content.htm" target="content"> CONTENT </a></li>
</ul>
As you can see in the Menu page, we use <ul> or unordered list to create a
selection between our Home and Content pages. We use also <li> or list item
and <a> tag for the hyperlink, which is used to link from one page to another,
<href> attribute to indicate the link’s destination. Lastly the <target> attribute
use to show the page that you want to show in the bigger frame. The Home and
Content pages is just normal HTML documents that we do, where you can put
any information that you want.
IFRAMES
An iframe is used to display a web page within a web page. An HTML
iframe is defined with the <iframe> tag:
Example:
<iframe src="URL"></iframe>
Iframe - Target for a Link
• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name attribute of the
iframe:
To make this kind of simple iframe HTML
document we need to create 3 separate
pages. First create the main page then we
name it iframe.html.
<body bgcolor="lightblue";>
<center>
<h2>Iframe - Target for a Link</h2>
<iframe height="320px" width= “300%"
src="iframe1.html" name="iframe">
</iframe>
<p><a href="iframe2.html"
target="iframe">click me pliss! </a></p>
<p>When the target of a link matches the
name of an iframe, the link will open in
the iframe. </p>
</center>
</body>
For other pages it is just the same syntax that we use, we name it
iframe1.html and iframe2.html
Sample syntax for iframe1.html:
<body>
<h2>Animated Images</h2>
<p>The GIF standard allows moving images. </p>
<img src="iframe1.gif" style="width:200px;height:185px;">
</body>
As you can see also we modify the width and the height of our iframe pages
so that we can fit the right size that we want.
IFRAME ATTRIBUTES:
• Use the height and width attributes to specify the size of the iframe.
• The attribute values are specified in pixels by default, but they can
also be in percent (like "80%").
Ex. <iframe src="image.html" height="320"
width="300"></iframe>
• By default, an iframe has a border around it.
• To remove the border, add the style attribute and use the
CSS border property:
Ex. <iframe src="demo_iframe.htm"
style="border:none;"></iframe>
