Scribd
Upload
2 views

Chap1 HTML n

HTML frames allow for the division of a browser window into multiple sections, each capable of displaying a separate HTML document, organized in a frameset. While frames enable viewing multiple documents simultaneously and loading content from different servers, they have significant drawbacks, including inconsistent display across devices and issues with browser navigation. The <frameset> and <frame> tags are used to create frames, but their use is deprecated in HTML5, and alternatives like <iframe> are recommended for embedding content.

Uploaded by

rutujakhatal1047
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Chap1 HTML n

HTML frames allow for the division of a browser window into multiple sections, each capable of displaying a separate HTML document, organized in a frameset. While frames enable viewing multiple documents simultaneously and loading content from different servers, they have significant drawbacks, including inconsistent display across devices and issues with browser navigation. The <frameset> and <frame> tags are used to create frames, but their use is deprecated in HTML5, and alternatives like <iframe> are recommended for embedding content.

Uploaded by

rutujakhatal1047
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML - Frames

HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document. A
collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.

The advantages of HTML frames include:

 The main advantage of frames is that it allows the user to view multiple
documents within a single Web page.
 It is possible to load pages from different servers in a single frameset.
 The concern that older browsers do not support frames can be addressed using
the <noframe> tag. This tag provides a section in an HTML document to include
alternative content for browsers without support for frames. However, it requires
that the Web designer provide two formats for one page.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use
frames in your webpages −
Some smaller devices cannot copy with frames often because their screen is not
big enough to be divided up.
Sometimes your page will be displayed differently on different computers due to
different screen resolution.
The browser's back button might not work as the user hopes.
There are still few browsers that do not support frame technology.
Creating Frames

To use frames on a page we use <frameset> tag instead of <body>


tag. The <frameset> tag defines, how to divide the window into
frames. The rows attribute of <frameset> tag defines horizontal
frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall
open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this


element.
Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

src
1 This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For
example, src = "/html/top_frame.htm" will load an HTML file available in html directory.

name
2 This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be
loaded into. This is especially important when you want to create links in one frame that load pages into an
another frame, in which case the second frame needs a name to identify itself as the target of the link.

frameborder
3 This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the
frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth
4 This attribute allows you to specify the width of the space between the left and right of the frame's borders
and the frame's content. The value is given in pixels. For example marginwidth = "10".

marginheight
5 This attribute allows you to specify the height of the space between the top and bottom of the frame's
borders and its contents. The value is given in pixels. For example marginheight = "10".

noresize
6 By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize
attribute prevents a user from being able to resize the frame. For example noresize = "noresize".

scrolling
7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either
"yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.

longdesc
8 This attribute allows you to provide a link to another page containing a long description of the contents of
the frame. For example longdesc = "framedescription.htm"
Example

Following is the example to create three horizontal frames −

Live Demo
<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm"
/>
<frame name = "bottom" src =
"/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support
frames.</body>
</noframes>

</frameset>

</html>

The <frameset> Tag Attributes


The <frameset> tag in HTML is used to define the frameset. The <frameset>
element contains one or more frame elements. It is used to specify the number
of rows and columns in frameset with their pixel of spaces. Each element can
hold a separate document.

Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

1 cols
Specifies how many columns are contained in the frameset and the size of each column. You can specify the
width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%,
10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this
case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames, use cols = "3*, 2*,
1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the
window is divided into sixths: the first column takes up half of the window, the second takes one third, and
the third takes one sixth.

rows
2 This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in
the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the
height of each row in the same way as explained above for columns.

border
3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value
of zero means no border.

frameborder
4 This attribute specifies whether a three-dimensional border should be displayed between frames. This
attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border.

framespacing
5 This attribute specifies the amount of space between frames in a frameset. This can take any integer value.
For example framespacing = "10" means there should be 10 pixels spacing between each frames.
The <frame> Tag Attributes

HTML <iframe> Tag


Example
An inline frame is marked up as follows:

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web


Tutorials"></iframe>
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage
The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML
document.

Tip: Use CSS to style the <iframe> (see example below).

Tip: It is a good practice to always include a title attribute for the <iframe>. This
is used by screen readers to read out what the content of the <iframe> is.

Attributes

Attribute Value Description

allow Specifies a feature policy for the <iframe>

allowfullscreen true Set to true if the <iframe> can activate


false fullscreen mode by calling the
requestFullscreen() method

allowpaymentrequest true Set to true if a cross-origin <iframe> should be


false allowed to invoke the Payment Request API

height pixels Specifies the height of an <iframe>. Default


height is 150 pixels
loading eager Specifies whether a browser should load an
lazy iframe immediately or to defer loading of iframes
until some conditions are met

name text Specifies the name of an <iframe>

referrerpolicy no-referrer Specifies which referrer information to send


no-referrer- when fetching the iframe
when-
downgrade
origin
origin-when-
cross-origin
same-origin
strict-origin-
when-cross-
origin
unsafe-url

sandbox allow-forms Enables an extra set of restrictions for the


allow-pointer- content in an <iframe>
lock
allow-popups
allow-same-
origin
allow-scripts
allow-top-
navigation

src URL Specifies the address of the document to embed


in the <iframe>

srcdoc HTML_code Specifies the HTML content of the page to show


in the <iframe>
width pixels Specifies the width of an <iframe>. Default
width is 300 pixels

Examples

How to Create Frames


While frames should not be used for new websites, learning how to use frames can be beneficial for webmasters who are managing older websites.

The Basic Idea Behind Frames


The basic concept behind frames is pretty simple:

 Use the frameset element in place of the body element in an HTML document.
 Use the frame element to create frames for the content of the web page.
 Use the src attribute to identify the resource that should be loaded inside each frame.
 Create a different file with the contents for each frame.

Let’s look at a few examples of how this works. First we need a few HTML documents to work with. Let’s create four different HTML documents. Here’s
what the first will contain:

<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

The first document we’ll save as frame_1.html. The other three documents will have similar contents and follow the same naming sequence.

Creating Vertical Columns


To create a set of four vertical columns, we need to use the frameset element with the cols attribute.

The cols attribute is used to define the number and size of columns the frameset will contain. In our case, we have four files to display, so we need
four frames. To create four frames we need to assign four comma-separated values to the cols attribute.

To make things simple we’re going to assign the value * to each of the frames, this will cause them to be automatically sized to fill the available space.

Here’s what our HTML markup looks like.

<!DOCTYPE html>
<html>
<frameset cols="*,*,*,*">
<frame src="../file_path/frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>

And here’s how that HTML will render.

Creating Horizontal Rows


Rows of frames can be created by using the rows attribute rather than the cols attribute as shown in the HTML below.

<!DOCTYPE html>
<html>
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>

By making that one change, the frames now load as four rows stacked up on top of eachother.
Mixing Columns and Rows
Columns and rows of frames can both appear on the same webpage by nesting one frameset inside of another. To do this, we first create
a frameset and then nest a child frameset within the parent element. Here’s an example of how we could nest two rows within a set of three
columns.

<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>

Here’s the result of that code:


The nested frameset takes the place of the first frame within the parent element. The nested element can be placed in any position. For example, if
we wanted the nested element to appear in the center position we would just rearrange the elements like this.

<frameset cols="*,*,*">
<frame src="frame_1.html">
<frameset rows="*,*">
<frame src="frame_2.html">
<frame src="frame_3.html">
</frameset>
<frame src="frame_4.html">
</frameset>

Here’s how the rearranged frames would render.

Of course, we can also create additional nested frames if we want to.


<frameset cols="*,*">
<frame src="frame_1.html">
<frameset rows="*,*">
<frame src="frame_2.html">
<frameset cols="*,*">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>
</frameset>

That code creates a set of two equally sized columns. We then split the second column into two rows. Finally, we split the second row into two columns.
Here’s what that actually looks like.

One more way to create a combination of rows and columns is to define a grid of columns and rows in a single frameset. For example, if you wanted a
grid of four equally sized frames, you could use the following code.

<frameset rows="*,*" cols="*,*">


<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>

The resulting grid of columns and rows looks like this.


How to Style Frames
When styling the presentation of a webpage that uses frames, there are two different types of styling to consider:

 Styling within each frame.


 Styling the frameset

The presentation of each frame must be defined within the source document. The presentation of the frameset must be defined within the parent
document containing the frameset.

In other words, frame_1.html must be styled by CSS rules contained within frame_1.html or within a stylesheet linked to frame_1.html.

Styling Frame Source Documents


Just as with any webpage, the contents of each frame can be styled with CSS. In order to style the contents of each frame, the styles must be added to
the source document itself either by linking to an external stylesheet within the source document or by adding internal or inline styles to the source
document.

Considering our four source documents, CSS styles have to be applied to each document individually. Applying CSS styles to the webpage that contains
the frameset will not cause those styles to apply to each individual document.

If we want to style frame_1.html we need to add styles directly to the document itself either by linking to an external style sheet or by typing them
directly into the document. Here’s an example of how we might do that:

<!DOCTYPE html>
<html>
<head>
<style>
body {background: gray;}
h1 {color: blue;}
p {margin: 20px;}
</style>
</head>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

If we go back to our original example with four equally-sized columns and load the frameset after making these changes to frame_1.html, we get this:

Styling & Formatting the Frameset


There are a few things you can do to affect the presentation of a frameset beyond styling the documents themselves.

 The size of each frame can be specified and locked.


 The margin between frames can be changed.
 The border around frames can be formatted.

These changes aren’t made with CSS. Instead, they are made by adding attributes and values to the frame elements.

Sizing Frames
Frames can be sized either in pixels or percentages, or they can be set to automatically adjust in size based on the available space. To specify the size of a
frame, insert the desired value in the cols or rows attribute.

By default, unless the attribute noresize is added to a frame, website visitors can use their mouse to drag the border between two frames to resize
the frames. If this is undesirable, the attribute noresize can be applied to a frame element to prevent resizing.

Let’s put both of these ideas into practice.

Let’s create the following layout:

 One full-width row along the top of the webpage.


 Three columns below the top row.
 The first and third columns sizes to create left and right sidebars.
 The middle column sized to create a larger content area.

We can create this layout with the following code.

<frameset rows="150px,*">
<frame noresize src="frame_1.html">
<frameset cols="20%,*,20%">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>

What that code creates is a frameset of two rows.

 The first row is 150px tall. The noresize attribute appearing on the firstframe means that it cannot be resized.
 The styles we applied earlier to frame_1.html are preserved, but only affect the contents of that frame.
 The second row expands to fill the remaining space.
 A second frameset is nested in the second row and includes three columns.
o The first and third columns will each cover 20% of the available browser window.
o The second column will resize to fill the space remaining between the first and third columns.
o Since the we did not use the noresize attribute on the columns, they will initially render based on the sizes included in the code, but a website visitor
will be able to manually resize them.

That code would create a webpage that rendered like this.

Formatting Frame Margins & Borders


Now that we have our layout defined, we can increase or decrease the margin between the frames and also remove the border between the frames if we
wish to do so. Using the layout we created in the previous step, let’s remove the borders between the three columns, but leave the border between the
upper and lower rows. Let’s also add some margin around the contents of the first frame.

<frameset rows="150px,*">
<frame noresize src="frame_1.html" marginheight="15">
<frameset cols="20%,*,20%">
<frame src="frame_2.html" frameborder="0">
<frame src="frame_3.html" frameborder="0">
<frame src="frame_4.html" frameborder="0">
</frameset>
</frameset>

The marginheight attribute applied to the first frame will add 15px of margin above and below the content loaded in the first frame.
The frameborder value of 0 removes the borders from around the three bottom frames.

If we pull up this code in a browser, here’s what it looks like.

Assignment

Q.1 Answer the following question (1/2 marks)

1) Define Frames

2) Enlist Attributes of <frame> tag

3) Give syntax of <iframe>tag

4) Define Frameset.

Q.2 Answer the following question (3/4/5 marks)

1) Write advantages and disadvantages of frames.

2) Explain attributes of <frame> tag

3) Explain attributes of <frameset> tag

4) What is <iframe>tag? Explain Attributes of <iframe> tag

You might also like