A frame is an area on a site (window) in which another web page is visible. Webmasters use this opportunity to showcase the homepage of their friends or partners. The same technique is used to display the search form in the windows and next to its result, etc.
But mostly frames are used in creating large web portals where a considerable number of menu items and submenus are required. They are usually referred to as: "site on frames." To create such a resource requires a good knowledge of the HTML language.
Creating frames in site builder
Some site designers provide for the automatic generation of such code. Usually the button to add a frame is in the main menu of the program. First you need to position the cursor in the right place on the page, then click the button, a window will open (as shown in the screenshot). In it you can set the address of the page that will open in the frame, and adjust the dimensions: width and height.
But mostly frames are used in creating large web portals where a considerable number of menu items and submenus are required. They are usually referred to as: "site on frames." To create such a resource requires a good knowledge of the HTML language.
Using this "service", it is possible to create several frames on a page, but you can’t get only interconnected elements in this way.
Frames in CMS
Many programs for creating sites provide the ability to install the appropriate module. For example, for Joomla, a frame is the Wrapper module.
It can be found and created in the Jumla CMS control panel: "Extensions" - "Module Manager" - "Create" (orange round button with a plus sign inside). In the pop-up window, in the list, you will see the "Wrapper" module.
If he is not here, then he is not included. To use it, you first need to activate it here: the "Extensions" tab, then the "Extension Manager", then the "Management" tab. And looking in the list that opens, you can enter the word: Wrapper in the "Filter" field for a quick search. Opposite this module there should be a green icon with a checkmark inside. A red circle with a dot inside will mean that this plugin is turned off.
After this procedure, you can return to the "Module Manager", create a frame and set its parameters.
As you can see in the picture, the module allows you to set: the title above the frame, the position of the module, select the site pages on which it will be displayed. And also adjust the width, height; Add a frame and a link to a web page. If in the frame you want to display the main page of a site in full width, then 100% set by default will not be enough. You can immediately bet 400%. A height of 200 is usually enough to display the top menu of the page. All other content will be visible if the user (site visitor) uses the scroll bar.
Here is an example of what a frame in Jumla is.
The Juml module for creating a frame is very convenient and easy to use. However, its capabilities are limited, as are the capabilities of the designer.
History and Realities
In the practice of creating sites from frames, this tag (its application) has long faded into the background. They were replaced by modules, settings in design programs that generate code for a web page without the participation of a site builder. However, in some cases this is not enough. For example, when a frame is an integral complex structure of areas displayed in the browser. So its owners of complexly structured sites see it. They go to its creation only in extreme cases, since Framed sites are created exclusively using specialized tags.
Complexly structured sites
For them, the creation of several interconnected frames is the best solution for organizing content on the pages of the resource. These are, as a rule, large portals that grow every year more and more.
How to achieve the same result? How is the frame structure created?
How to enter a frame in the page code
HTML frames are added using tags:
- frame (for a separate window);
- frameset (using it creates an entire structure);
- iframe (floating frame);
- noframes (in case the frame is not displayed in the user's browser).
The first tag you specify always fits in the <frameset> and </frameset> pair. And it replaces <body> and </body>. And with the help of the appropriate attributes, you can adjust the characteristics of each element: name (name =), size (cols = and rows =), the presence of a border (border), the appearance of the scroll bar and, of course, a link to a web page to display.
Design variations
The entire page of the site can be divided into areas. For example, like this:
Such a structure (it is called nested) can be obtained by writing the cols attribute inside the tag, indicating the horizontal position of the frame, and the rows vertically. The = sign is followed by the dimensions. For example, 60%, 40% is the percentage ratio (one window will occupy 60% of the browser space, the other, respectively, 40%). Or 100, 200 - aspect ratio in pixels. The sizes of one of the frames can be omitted at all (set by default). To do this, you must specify the * character after or before the comma.
Inside this pair, frameset registers each frame with the parameters: src =, then in quotation marks gives a link to the web page and name = with the title (for example, Frame 1).
The nesting of each new area is indicated by a new frameset.
Code example: <frameset rows = "50" cols = "80.20"> <frame SRC = "[link to page]" name = "Frame No. 1"> <frameset rows = "80.20"> <frame SRC = "[link to page]" name = "Frame No. 2"> <frame SRC = "[link to page]" name = "Frame No. 3"> </frameset> </frameset>
Note that in our example, for frames of the second and third sizes are prescribed only once.
Many pans allow you to complete frames. Examples of their location in the browser window can be given endlessly (changing the code accordingly). However, this information does not find practical application for a long time. Frames, if they are used today when creating sites, then only as modules in free CMS or as iframes.
Floating frame
It is strange why he got such a name, the word "built-in" is more suitable here. This frame is designed to display the contents of a file. You upload a document or file to the database, use the iframe tags to specify the path to it, and visitors will see the text of the file (video or image). Unfortunately, browsers do not always display content. To do this, web builders enter the phrase: "Your browser does not display content" between the opening and closing tags.
For example, Seopult.ru is a well-known service from promotion masters. Not just his main site, but I.seopult.pro mirror, created for portal customers. The code of the e-frame is written like this: <li> <a HREF="[link to the page 022"> Instruction </a> </li>. Where the <li> tag is created to define a list item. It is supported by all browsers.
On the mirror page itself, you can see the word "Instruction" in the form of a button. When you click on it in the center of the browser window, a presentation opens.
All major sites for watching movies and TV shows are created using iframes (for example, "Imkhonet"), as well as social networks. Even the main page of Yandex contains this tag, and not one pair.
How to prescribe iframe
You can upload a document in the form of a window with a scroll bar to any place. Typically, tags are placed inside the body. In addition to the standard <p> and </p>, as was shown in the example above, the list tag <li> can also be used.
Attributes are added to the iframe:
- width (width) and height (height =);
- alignment align;
- indentation, which you can not prescribe: the default value is 6 - this is quite enough;
- using allowtransparency, you can set the transparency of the frame area so that the page background is visible;
- plus the familiar scr, name, scrolling, border.
IFrame navigation
The most interesting skill in the field of creating frames is writing code that allows you to open content in a window using a link - what the creators of the Seopult mirror did, with just a few links (available simultaneously to the user on one page).
To do this, take an iframe, it additionally prescribes a name through name =. For example, zagolovok. Then in front of it in the <a> and </a> tags are registered links through a HREF = with the obligatory indication after them of the target = zagolovok attribute. Before using the closing tag a, an inscription is indicated that will serve as a link-button. The opening and closing tags "a" are enclosed in the p tag.
You can register several such lines in the code, so that in the end on the site you can get several link buttons in a row, clicking on which different content will be displayed in the window below.
The code will look like this:
<p> <a HREF="[link to the page 022" target= "zagolovok"> Post an Ad </a>
<a HREF ="[link to the page 022" target= "zagolovok"> View Ads </a> </p>
<p> <iframe SRC = "[page link]" name = "zagolovok" width = "100%" height = "200"> </iframe> </p>
How it will look on the site:
How to embed iframe in Jumla website
By default, the Jumla control panel has an "HTML code" module that is turned on (that is, ready to use). Using it, you can insert any code into any place on the site. However, he stubbornly ignores code with an efrem tag. Therefore, we will use the special Jumi module.
First of all, you need to download it from the Internet and install it to yourself through the Jumla admin panel: "Extensions" - "Extension Manager" - "Select File". Specify the path to the downloaded archive and click "Download".
After a successful installation, go to the "Module Manager" and create a new one. Choose the type of Jumi. In the window that opens, in the "Custom Code" field, enter the prepared iphram, as shown in the previous paragraph of the article. Give the module a title, indicate the position of the placement and page of the site. Click save and check what happened.
Browsers and frames
All popular browsers display the contents of frame windows well: Chrome, Safari, Firefox, Android, iOS. Internet Explorer and Opera have a particularly high rate in this regard. And yet there is no guarantee that a visitor to your site will see the contents of all windows. In this case, you should leave a message using the noframe tag (opening and closing). You can enter the following in it: "Your browser is out of date. To display the contents of the site, update the version." If the user's browser displays frames correctly, then he will not see this message.
So, a frame is an area or window of a site that has its own URL. It is used to display several web pages or independent documents with their own URL in one browser field at once. Despite the fact that frames allow you to organize a complex structured site well, they have not been used for a long time, except for iframes. The use of this tag is still relevant for downloading presentations, video player, text documents in a specific window. It is actively used by large and well-known web resources.