Frames in HTML are a way of dividing the browser window into multiple sections, each of which can load and display a different HTML document. In this article we will see practical examples of frames in HTML.

Although its use has declined in recent years due to the adoption of more modern and flexible techniques, such as CSS and JavaScript, can still be found on some websites, especially those created in the 1990s and early 1990s. that of 2000.

How do frames or frames work in HTML?

Frames are made up of two elements:

1. Frameset: The element is used to divide the browser window into rectangular sections, each of which can load its own HTML document.

2. frames: The element is used within a to define each of the individual sections. And it sends to call some other document that is loaded inside the frameset.

   instagram story viewer

• Follow with: iFrame Examples

How to Make Frames in HTML

To create an HTML document with frames, follow two very simple steps:

1. Create an HTML document that defines the structure of the frames using the element. For example:

File 1: frameset.html

2. Create one or more HTML documents to be loaded within the frames.

File 2: frame1.html

This is Frame 1

File 3: frame2.html

This is Frame 2

Frame attributes in HTML

Some of the most important element attributes are:

• scrolling: This attribute is used to control the appearance of the scrollbars in the frame. It can have the values ​​"auto", "yes" or "no".

• noresize: This attribute is used to prevent the user from resizing the frame.

• yam: This attribute is used to give the frame a name, which can be useful for referencing the frame in links and scripts.

• src: This attribute is used to specify the URL of the HTML document to be loaded in the frame.

• frameborder: This attribute specifies whether frames should have borders or not. Possible values ​​are "1" (to show borders) or "0" (to show no borders). For example, .

• border: This attribute defines the width of the border between the frames in pixels. For example, will create a 5px border between the frames.

• framespacing: This attribute is similar to border. It also defines the space between the frames in pixels. For example, will set a 10px gap between the frames.

• bordercolor: This attribute allows you to change the border color of the frames. Any valid color can be specified. For example, will make the border of the frames red.

Usage example:

How to link to a specific frame

We can make a link open in a specific frame using the attribute target In the label. The value of target should be the same as the frame name (yam attribute of ). For example:

in menu.html
Page 1
Page 2

In this case, clicking on the "Page 1" or "Page 2" links in the menu frame will load the corresponding page in the "content" frame.

How to break the frames

If you want a link to open a page outside of the frameset (i.e. replace the entire frameset), you can use the special value _top for the attribute target. For example:

in menu.html
go out of frames

When you click "Exit Frames", the browser will load "pageOutofFrames.html" in the full window, replacing the frameset.

Example to divide the screen into two columns with frames

This example divides the screen into two columns of equal size. Each column loads a different HTML page.

Example to create a navigation sidebar with frames

This example creates a sidebar that takes up 25% of the screen and is used for navigation. The rest of the screen is used to display the main content.

Example to divide the screen into rows and columns

This more complex example divides the screen into four equal parts. Each section loads a different HTML page.

Example of top navigation with HTML frames

Create a file that defines two frames in a row. The two files it defines are: one for the navigation (which takes up 20% of the window's width) and one for the main content (which takes up the rest of the window's width).

Next, you would need to create the "navigation.html" and "content.html" files. For example, "navigation.html" might look like this:

Page 1

Page 2

Page 3


And "content.html" could be something like this:

Welcome to our website!

Here will go the content of the page selected in the navigation.

In this case, when you click a link in "navigation.html", the corresponding page is loaded in the "content" frame.