Scribd
Upload
21 views16 pages

Module 10 Creating HTML Frames

The document explains how to create HTML frames using the <frameset> and <frame> elements to divide a browser window into multiple sections, each capable of displaying different HTML documents. It details the attributes that can be used to customize frames, such as 'noresize', 'border', and 'bordercolor', and introduces the concept of nested framesets. Additionally, it covers the use of iframes to embed a webpage within another webpage, including syntax and attributes for customization.

Uploaded by

kiofujiwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views16 pages

Module 10 Creating HTML Frames

The document explains how to create HTML frames using the <frameset> and <frame> elements to divide a browser window into multiple sections, each capable of displaying different HTML documents. It details the attributes that can be used to customize frames, such as 'noresize', 'border', and 'bordercolor', and introduces the concept of nested framesets. Additionally, it covers the use of iframes to embed a webpage within another webpage, including syntax and attributes for customization.

Uploaded by

kiofujiwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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>

You might also like