HTML Frame Structure

Frame structure in HTML

From the very beginning, it should be said that the technique of using a frame structure, although very convenient in some cases, is nevertheless not advisable for commercial projects.

Frameset element

Syntax for vertical division (into columns):

< FRAMESET cols = "n%,n%" > ... < / FRAMESET >

where nis the width of the frames in percent from left to right

Syntax for horizontal division:

< FRAMESET rows = "n%,n%" > ... < / FRAMESET >

where nis the height of the frames in percent from top to bottom

There may be more than two frames in a structure.

A file with a frame structure is called a layout file and is usually named index.html

Let’s look at an example of how files are loaded into a frame.

Syntax:

< FRAME src = "Filename.html" name = "framename" >

Execution:

< html > 
< head > 
	< title > Example < / title > 
< / head > 
< frameset  cols = "25%, 75%" > 
	< frame  src = "menu.html" > 
	< frame  src = "content.html" > 
< / frameset > 
< / html >

Frameset tag attributes:
frameborder – value 1 or 0 (present or absent)
border – border size value
bordercolor – border color
framespacing – frame border width in pixels (IE only)

< frameset  cols = "25%, 75%"  frameborder = "1" bordercolor = "red"  border = "1" >

Frame element attributes:
name — frame name
noresize — prevents resizing for a specific frame
scrolling — controls scrolling within a single area ( yes, no, auto)
marginheight — sets the amount of frame indentation from the top and bottom edges of the page
marginwidth — creates margins on the left and right
frameborder — specifies whether a border around the frame is needed (0 and 1)
bordercolor — border color

Rules for creating links in frames in HTML

If you imagine a structure in which there is a frame with a site menu on the left, and a frame on the right intended for displaying the contents of the selected menu items, then the following problem becomes obvious:
When you click on a menu item, the content will be loaded into the same frame as the menu, and not into the frame located on the right.

Important: To load a menu item into a specific frame, you must:

1. 1. add the name of the required frame using an attribute name(in the layout file)

Example:

< frame src = "content.html" name = "mainFrame" >

1. 1. In the file with the menu, add the attribute to the hyperlinktarget

Example:

<a href = "glava1.html" target = "mainFrame" rel = "noopener noreferrer" >​​​ ​​​ ​​​​

Let’s look at the full code of both files:
Index.html file

< html >
...
< frameset  cols = "25%, 75%" > 
	< frame  src = "menu.html" > 
	< frame  src = "content.html"  name = "mainFrame" > 
< / frameset > 
< / html >

Menu.html file:

< html >
...
< body > 
	< h2 > Menu : < / h2 > 
< ul > 
< li   > <a href = "glava1.html" target = "mainFrame" rel = "noopener noreferrer" > Chapter 1 < 
/ a > < / li > < li > <a href = "glava2.html" target = "mainFrame" rel = "noopener noreferrer" > Chapter 2 < / a > < /   li >​​​​​​​​​​​
 < / ul > 
< / html >

Nested frames

Working with frames in HTML also requires a more complex structure.
Let’s look at an example: What will the result be?

Inline (floating) frames

It is not advisable to use this type of frame in commercial projects, as they can be blocked by the browser and incorrectly perceived by search engines.
Example of a floating frame:

1
2
3
4
5
6
7
8

< html >
...
< body >
...
< iframe  src = "main.html"  width = " 150"  height = " 100" > </iframe>
...
< / body > 
< / html >

The frame will be inserted as a window of the specified dimensions (attributes width and height).

Additional attributes:

• name — frame name
• frameborder — frame boundary
• scrolling — scroll bar
• hspace — horizontal indents
• vspace — vertical indents
• marginwidth — horizontal indentation of the inner page from the frame border
• marginheight — vertical indentation of the inner page from the frame border

index.html - Main layout with frame structure
shapka.html - Website name
menu.html - Menu
home.html - Main home page
podval.html - Bottom
inner.html - Inline frame
glava1.html - Chapter 1
glava2.html - Chapter 2