Scribd
Upload
8 views

HTML-frames

The document explains how to use HTML frames by utilizing the frameset and frame elements to create vertical columns and horizontal rows of frames. It provides examples of HTML markup for creating frames, nesting framesets, and defining a grid layout. Additionally, it notes that frames and framesets have been deprecated in modern web development, suggesting the use of iframes instead.

Uploaded by

Gab Peralta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML-frames

The document explains how to use HTML frames by utilizing the frameset and frame elements to create vertical columns and horizontal rows of frames. It provides examples of HTML markup for creating frames, nesting framesets, and defining a grid layout. Additionally, it notes that frames and framesets have been deprecated in modern web development, suggesting the use of iframes instead.

Uploaded by

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

HTML Frames

 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:

<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.

How it looks in the browser:


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.

<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.

<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.


Related Elements

Element
Attributes Notes
Name

The <noframes> element is used within a parent <frameset> to


provide fallback content for users whose browsers did not support
noframes
<frame> content. Frames have been deprecated, so the <noframes>
element should not be in use on modern websites.

src
name
scrolling The <frame> element was used to break a single browser window into
frame noresize multiple independent browsing contexts. Frames have been
frameborder deprecated and should not used by modern websites.
bordercolor
marginwidth

cols The <frameset> element was used to create a group of frames which
frameset frameborder could be styled and controlled as a unit. Frames have been
bordercolor deprecated and should no longer be used.

sandbox
src
width
name
longdesc The <iframe> creates an inline frame, which embeds an independent
iframe
frameborder HTML document into the current document.
marginwidth
scrolling
align
vspace

You might also like