Menu
homeMicrosoft

Html frameset buttons for opening. The concept of a frame in HTML

Vertical frame arrangement
How to make a column of frames from three different documents.

Horizontal arrangement of frames
How to make a row of frames from three different documents.

(You will find more examples at the bottom of this page).

HTML Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent from the others.

Disadvantages of using frames:

  • Frames may no longer be supported in the future. HTML versions
  • Frames are difficult to use. (It is difficult to print the entire page).
  • A web developer needs to keep an eye on a lot amount of HTML documents.

HTML frameset element

The frameset element contains one or more frame elements. Each frame element can contain a separate document.

The frameset element specifies HOW MANY columns or rows there will be in the frameset, and HOW MANY percent/pixels of space each frame will occupy.

HTML frame element

Tag defines one single window (frame) within a frameset.

In the example below we have a frameset with two columns.

The first column takes up 25% of the browser window width. The second column takes up 75% of the browser window width. The document "frame_a.htm" is placed in the first column, and the document "frame_b.htm" is placed in the second column:

Comment: The size of a column in a frameset can also be specified in pixels (cols="200,500"), and one of the columns can use the remaining space by specifying an asterisk instead of the width (cols="25%,*").

Advice: If the frame has visible borders, the user can resize it by dragging the border. To prevent the frame from being resized this way, you can add noresize="noresize" to the tag .

Comment: Add a tag for browsers that don't support frames.</p> <p><b>Important:</b> You can't use tags <body></body> along with tags <frameset></frameset>! However, if you add the tag <noframes>containing some text for browsers that don't support frames, you enclose that text in tags <body></body>! See how this is done in the first example below.</p> <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" width="48"> </td> <td align="left" valign="middle"><h3>More examples</h3> </td> </tr></table><p>Using a tag <noframes> <br>How to use a tag <noframes>(for browsers that don't support frames).</p> <p>Nested framesets <br>How to create nested framesets.</p> <p>A set of frames with the attribute noresize="noresize" <br>How to use the noresize attribute. Move your mouse to the border between the frames and make sure you can't drag it.</p> <p>Navigation Frame <br>How to make a navigation frame. This frame contains a list of links with a second frame as the destination where those links will be opened. The file "tryhtml_contents.htm" contains three links. <a href="https://viws.ru/en/ishodnyi-kod-klavishi-kak-otkryt-ishodnyi-kod-stranicy.html">Source</a> links: <br> <a href ="https://viws.ru/en/frame_a.htm" target ="showframe">Frame a</a><br><br> <a href ="https://viws.ru/en/frame_b.htm" target ="showframe">Frame b</a><br><br> <a href ="https://viws.ru/en/frame_c.htm" target ="showframe">Frame c</a><br>The second frame shows the linked document.</p> <p>Jump to a specific section within a frame <br>Two frames. One of the frames has a link to a specific section in the file. This section is marked as <a name="C10">in the file "link.htm".</p> <p>A browser window can be divided into parts called frames, sometimes frames; You can also call them sills. In each such part of the browser window, i.e. frame, a separate HTML document can be loaded. Let's look at an example of a browser window with three frames.</p> <p>In this case, for clarity, each frame is loaded with <a href="https://viws.ru/en/shablon-dlya-skachivaniya-prostye-html-shablony-tesselatte---besplatnyi-otzyvchivyi-shablon.html">simple HTML</a> a document that gives the frame number and the name of the file storing its contents. If a real document is loaded into the frame, which does not fit completely in it, then the frame (attention, not the entire window!) will have a vertical and/or <a href="https://viws.ru/en/mercayushchie-chernye-polosy-v-igrah-gorizontalnye-polosy-na-monitore.html">horizontal stripes</a> scrolling depending on whether the contents of the document do not fit horizontally and/or vertically. <br>For example, the design and structure of your site are such that there are the same elements repeated on every page of the site: title, <a href="https://viws.ru/en/navigacionnoe-menyu-vkontakte-kak-sozdat-menyu-dlya-gruppy.html">navigation menu</a>, address at the end of the page or some other similar elements. Only the content of the sections changes. Then the pages can be divided into parts so that the unchangeable parts are placed in separate frames, and another frame can be allocated so that the contents of the desired section are loaded into it after clicking on the corresponding link, for example, from a menu. <br>This saves on loading speed, since identical parts of the site pages are not re-loaded, but are simply displayed all the time in the frames allocated to them.</p> <h2>Creating a frame structure element FRAMESET</h2> <p>The window breakdown structure is stored in <a href="https://viws.ru/en/primenenie-stilei-v-html-vklyuchenie-css-v-html-kod-podklyuchenie-otdelnogo-css-faila.html">separate HTML</a> document, it is called a framed document. The frame structure is formed using a special FRAMESET element. A regular document has one HEAD section and one BODY section, while in a document with frames, the BODY section is replaced by a description of the structure of the frames, i.e. FRAMESET section. <br>A NOFRAME element can be added to the FRAMESET section with alternative content for display in browsers that do not support frames, or in browsers that do not support frames. Such browsers simply will not understand the FRAMESET and NOFRAME structures, but will display the text placed inside them.</p> <HТМL> <HEAD> <span> <TITLE>Simple document with frames</ТIТLЕ> </span> </HEAD> <FRAМESET > <span>...description of frame structure...</span> <NOFRAМES> <span>Alternative content for browsers that don't support frames</span> </NOFRAМES> </FRAМESET> </HТМL> <p>Note that the BODY section is missing entirely from the document, and the NOFRAMES element is contained within the FRAMESET section. <br>The frame structure itself is formed by dividing the browser window into parts - rows and columns; To some extent this doesn't seem to be creating tables. To do this, the FRAMESET element has cols and rows attributes, which specify the division into columns and rows, respectively. <br>The units of measurement in which frame sizes can be set are, as usual, pixels and percentages. There is also the opportunity to set the size in a unit of measurement that is new to us, which can roughly be called a “part” of the window. The values ​​of the cols and rows attributes are specified by listing the sizes of the corresponding areas, separated by commas. Can be combined <a href="https://viws.ru/en/bilain-perevod-deneg-na-drugoi-nomer-raznye-sposoby-kak.html">different ways</a> tasks. Let's look at a few examples, based on the assumption that the browser window size is 800x600 pixels.</p> <FRAМESET rows= "50%, 50%"> </FRAМESET> <p>This code will divide the window horizontally into two frames (rows) of equal height. If you set the cols="50%, 50%" attribute, you will get two columns of equal width.</p> <span><FRAМESET cols= "120, 400. *"> </span> <span>. . . continuing to define the frame structure. . .</span> </FRAМESET> <p>With this code, we get three columns of frames: the left one is 120 pixels wide, the middle one is 400 pixels wide, and the third column contains everything that remains from the first two columns; in the attribute this value is indicated by the asterisk symbol “*”.</p> <FRAМESET cols= "1*, 4*"> <span>. . . continuing to define the frame structure. . .</span> </FRAМESET> <p>This code will create two frame columns. The width of the first is taken as one (this is denoted as 1 * or simply *), the width of the second is four times larger. Thus, the width of the first will be 20%, and the width of the second 80% of the total width of the browser window.</p> <span><FRAМESET cols= "100, 40%, *"> </span> <span>. . . continuing to define the frame structure...</span> </FRAМESET> <p>The above measure combines all three methods of specifying dimensions. The width of the first column will be 100 pixels, the second will be allocated 40% of the remaining width (800 - 100 = 700), and the third will be all that is not occupied by the first and second columns. <br>A FRAMESET section can contain nested FRAMESET sections, allowing you to create a fairly complex frame structure. Let's say we need to divide the window into 4 frames as follows:</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>First you need to organize 2 columns like this:</p> cols= "100, * " <p>Then divide the second column into three lines like this:</p> rows="80, *, 30" <p>A separate frame, or rather its description, is specified by the FRAME element and its attributes: more about it a little later. Let's return to nested FRAMESET elements. Let's look at some example code that creates a frame structure like this:</p> <FRAМESET cols= "100, * "> <span> <FRAМE name= "framel" src= "framel.html"> </span> <span> <FRAМESET rows= "80, *, 30"> </span> <span> <FRAМE name= "frame2" src= "frame2.html"> </span> <span> <FRAМE name= "frame3" src= "frame3.html"> </span> <span> <FRAМE name= "frame4" src= "frame4.html"> </span> </FRAМESET> </FRAМESET> <p>We seem to have figured out how a window is divided into frames. When creating frames, you can make sure that the border between frames is not visible. As you probably already guessed, this is done using the border attribute; its value should be zero. But the fact is that for frames this attribute is not perceived by the browser <a href="https://viws.ru/en/kak-ochistit-vremennye-faily-internet-explorer-kak-pochistit-internet.html">Internet Explorer</a>, but is supported by the Netscape Navigator browser. For Internet Explorer, the border between frames is specified by the frameborder attribute, which is not supported by the Netscape Navigator browser. It turns out that it is necessary to ask <a href="https://viws.ru/en/kak-naiti-odinakovye-znacheniya-v-stolbce-excel-poisk-i-udalenie-dublikatov-v-microsoft.html">same values</a> for both attributes, so that both browsers perceive the HTML code the same and the thickness of the borders between frames is the same. <br>The thickness of the borders or, in other words, the distance between frames can also be adjusted using the framespacing attribute, the value of which is specified in pixels. All attributes of the FRAMESET element are shown in the table.</p> <h2>Element Attributes <FRAMESEТ></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attribute</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Description</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Example</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">rows</td> <td bgcolor="#E7E7E7" width="60%">Defines the number and size of horizontal frames (line frames) in the browser window. The value is a comma-separated list of frame sizes. Methods for setting dimensions: <p>a) as a percentage of height <a href="https://viws.ru/en/skachat-joomla-3-7-russkaya-versiya-obnovlenie-russifikacii-joomla-russian-language.html">work area</a> browser window for example: "30%, 30%, 40%" ;</p> <p>b) in the form of the “*” sign (asterisk), indicating that the frame occupies all the free space of the browser window that is not occupied by other frames with explicit <a href="https://viws.ru/en/gde-na-diskah-ukazan-razmer-shinnyi-kalkulyator-shtampovannye-ili.html">specified sizes</a> for example, an asterisk in the entry "25%, 25%, *" is equivalent to 50%;</p> <p>c) in pixels for example: "75, *" .</p> <p>All three methods can be combined.</p> </td> <td bgcolor="#E7E7E7" width="20%">rows= "25%, 25%, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">cols</td> <td bgcolor="#E7E7E7" width="60%">Determines the number and size of vertical frames (column frames) in the browser window. As a value <br>a comma-separated list of frame sizes is specified. Dimensions are set in the same way as in <a href="https://viws.ru/en/pereproshivka-routera-tp-link-sohranenie-predydushchih-parametrov.html">previous parameter</a> ROWS.</td> <td bgcolor="#E7E7E7" width="20%">cols= "265, *"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">border</td> <td bgcolor="#E7E7E7" width="60%">Specifies the width of the frame borders in pixels. <a href="https://viws.ru/en/kak-otklyuchit-priem-mms-na-androide-ne-poluchaetsya-otpravit-mms.html">This parameter</a> Only works in Netscape browsers.</td> <td bgcolor="#E7E7E7" width="20%">Border="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder</td> <td bgcolor="#E7E7E7" width="60%">This parameter is valid only in Internet Explorer browsers and determines the presence of frames for frames contained within the FRAMESET element. Possible values: Yes display frames; No or 0 do not display frames.</td> <td bgcolor="#E7E7E7" width="20%">Frameborder="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">framespacing</td> <td bgcolor="#E7E7E7" width="60%">Defines the distance (the so-called "gray area") between frames in pixels. This option is also required to create borderless frames.</td> <td bgcolor="#E7E7E7" width="20%">framespacing= "0"</td> </tr></tbody></table><p>Now let's return to the FRAME element, which describes a single frame within the entire structure. A required parameter for it is the src attribute, which specifies the HTML URL of the document or image to be displayed in this frame. It is also better to give the frame a name using <a href="https://viws.ru/en/osnovy-html-rabota-so-ssylkami-teg-a-i-ego-atributy-rel-target.html">name attribute</a>. This will allow you to use <a href="https://viws.ru/en/kak-izmenit-dannye-vkontakte-kak-smenit-imya-v-kontakte.html">given name</a> as a value <a href="https://viws.ru/en/giperssylka-chto-eto-takoe-kak-sdelat-ssylku-i-vstavit-v-html-kod-href-target.html">target attribute</a> element A and control which frame the link should load into. Frame names cannot begin with numbers; only letters of the Latin alphabet (az, AZ) are allowed as initial characters.</p> <p>When a frame structure does not define a border between frames, their contents may be too tightly adjacent to each other, which will not look very nice. If you want to expand the contents of the frames and still not include the display of boundaries between them, then this can be done by setting indents inside the frames. The size of these indents is set in pixels and in pairs: for indents at the top and bottom with the marginheight attribute, <br>and for indents on the right and left with the marginwidth attribute. Then the distance between the contents of adjacent frames will be equal to the sum of the corresponding indents of these frames.</p> <p>Whether a border should be displayed around a particular frame is determined by its frameborder attribute. A value of yes (or 1) indicates that there should be a border, a value of no (or 0) indicates that there should be no border. <br>The user can resize the frames created <a href="https://viws.ru/en/dokument-html-predstavlyaet-soboi-obshchaya-struktura-html-dokumenta.html">HTML document</a>. To do this, just move the mouse cursor to the border of the frames (it doesn’t matter whether these borders are visible or not) and use the standard <a href="https://viws.ru/en/issledovanie-vozmozhnostei-operacionnoi-sistemy-linux-na.html">operating system</a> way to resize the window. <br>IN <a href="https://viws.ru/en/kak-sdelat-svoi-kursor-dlya-windows-7-izmenenie-razmera-kursora-myshi-i.html">Windows cursor</a> mouse button will appear as a double-headed black arrow. Clicking <a href="https://viws.ru/en/chto-delat-esli-slomalas-levaya-knopka-myshi-levaya-knopka-myshi-ne-rabotaet-ili.html">left button</a> mouse, you can move the window border. You can similarly change the size of the frame, since a frame is also a window. If you have calculated the sizes of your frames and do not want the user to change them, set the noresize attribute. As a result, resizing will be prohibited. <br>As we said earlier, scrollbars appear on a frame if its contents do not completely fit within its specified boundaries. The presence of scroll bars is controlled by the scrolling attribute. The three allowed values ​​are yes, no and auto. <br>The auto value matches <a href="https://viws.ru/en/ekran-smerti-chto-delat-chto-delat-pri-poyavlenii-sinego-ekrana-ili.html">automatic appearance</a> scroll bars in cases where it is really necessary. If the content is already visible, there are no scroll bars; if part of the content does not fit, the required scroll bar appears. <br>A value of yes enables both scroll bars whether they are needed or not. Sometimes it may not look very nice. <br>The value no prevents scrollbars from being shown at all. Be careful with this value because specifying it may prevent the user from seeing the entire contents of the frame when it does not fit completely within the frame. All attributes of the FRAME element are shown in the table.</p> <h2>Element Attributes <FRAME></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Attribute</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Description</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Example</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src</td> <td bgcolor="#E7E7E7" width="60%">Required parameter. Specifies the HTL address (URL) <br>file displayed in this frame</td> <td bgcolor="#E7E7E7" width="20%">src="frame2.html"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">name</td> <td bgcolor="#E7E7E7" width="60%">Defines the name of this frame, which will later be used to refer to it from other documents using the target attribute (see element A). The value must be any name without spaces using Latin characters and numbers <br>(initial characters can only be letters of the Latin alphabet: a-z, A-Z). The name must not start with numbers and <a href="https://viws.ru/en/prikolnye-statusy-iz-simvolov-specialnye-simvoly-dlya-nika-zv-zdochki.html">special characters</a>. <a href="https://viws.ru/en/vklyuchenie-i-nastroika-dns-servera-pochemu-poyavlyayutsya-slozhnosti-s-dns-server-i-s.html">Reserved names</a> frames begin with an underscore.</td> <td bgcolor="#E7E7E7" width="20%">name="menu1"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginwidth</td> <td bgcolor="#E7E7E7" width="60%">Specifies the width (in pixels) of the left and right margins of the frame. If the parameter is not specified, the browser will automatically determine <a href="https://viws.ru/en/optimalnyi-razmer-faila-podkachki-windows-7-nastroika-virtualnoi-pamyati.html">optimal size</a> indentation.</td> <td bgcolor="#E7E7E7" width="20%">marginwidth="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginheight</td> <td bgcolor="#E7E7E7" width="60%">Specifies the width (in pixels) of the frame's top and bottom margins. If the parameter is not specified, the browser will automatically determine the optimal indentation size.</td> <td bgcolor="#E7E7E7" width="20%">marginheight="0"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">scrolling</td> <td bgcolor="#E7E7E7" width="60%">Determines whether frame content has scroll bars. Possible values: <br>yes — display scroll bars; <br>no—do not display scroll bars; <br>auto - display scroll bars if necessary (if the document specified in the SRC parameter does not fit in the frame)</td> <td bgcolor="#E7E7E7" width="20%">scrolling= "auto"</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">noresize</td> <td bgcolor="#E7E7E7" width="60%">Does not allow frame resizing. This parameter is a flag and does not require a value.</td> <td bgcolor="#E7E7E7" width="20%">noresize</td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder</td> <td bgcolor="#E7E7E7" width="60%">Determines whether a frame has borders. Possible values: <br>yes or 1 — display frames; <br>no or 0—do not display frames.</td> <td bgcolor="#E7E7E7" width="20%">frameborder= "0"</td> </tr></tbody></table> <p>At times you may have problems with the web viewer in the Yandex. Webmasters metric. You want to see a recording of your site visit, but <a href="https://viws.ru/en/kak-razblokirovat-dostup-k-stranice-v-kontakte-kak-razblokirovat-kontakt.html">for unknown reasons</a> you can not. Most likely, a ban has been set on displaying the page in a frame.</p><h2>What to do if the web viewer does not work through Yandex.Metrica</h2><p>First, you need to check whether your web viewer is enabled at all in the metric (in the counter settings). We go to the website page where the metric counter is installed. We go to view the page code by clicking on (ctrl+u), using the ctrl+f combination we begin the search for the required code fragment, namely webwizor:true. If false is at the end of the fragment, the code will not work correctly. The ban on displaying the page in a frame (web viewer) has been confirmed.</p><p>If the web viewer still does not reproduce user actions in the metric, then there are several options for the problem:</p><ol><li>Blocking from the client browser.</li><li>Blocking by the server on which your site resides.</li> </ol><p>Let's consider both options for solving the problem. The first option: the web viewer does not work due to the client being blocked by the browser, which means there is a ban on displaying the page in the frame.</p><h2>Blocking from the client browser</h2><p>You need to make sure that you have access to any address. If selected in the settings, blocking is enabled. Access to resources may be blocked by an antivirus (check its settings), your system's firewall, or at the subnet level. To fix the problem, simply add them to your list of trusted sites and the problem should go away.</p><p>If the problem with setting a ban on displaying the page in a frame still remains, then just go with <a href="https://viws.ru/en/ochistka-kesha-i-apparatnaya-perezagruzka-v-yandeks-bystrotu-yandeks-brauzera.html">clean browser</a>- this can be Incognito mode or a downloaded browser without plugins, add-ons, extensions (in the case of Google Chrome). This approach fixes the problem 99 times out of 100.</p><h2>Server-side blocking</h2><p>Second option: a ban on displaying pages in a frame is set. This problem is a little more difficult to solve than in the first case.</p><ol><li>Open the "Webvisor" section in "Yandex. Metrica", press f12 (after clicking, the developer tools open).</li><li>"Console" tab, reload the page (F5).</li><li>In the list of errors there will be an underlined red line, the problem will be written there.</li> </ol><p>If your site is blocked from displaying in a frame, then in the “Console” you will see the following line: X-Frame-Options: SAMERIORIGN</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/45814/1574878.jpg' width="100%" loading=lazy loading=lazy></p><p>IN <a href="https://viws.ru/en/ne-pokazyvaet-vremya-poslednego-poseshcheniya-vkontakte-kak-skryt.html">Lately</a> Work is actively underway to solve this problem, but so far most browsers do not support the solution. If you remove this prohibition, it means you are consciously making your own <a href="https://viws.ru/en/nedostatki-sredstv-zashchity-ot-hakerskih-atak-sposoby-obhoda-mezhsetevyh.html">hacker attacks</a> or just hacking.</p><p>Let's give an example: The company "1-C-Bitrix" says: "You <a href="https://viws.ru/en/kak-prochitat-chuzhuyu-perepisku-telegramm-telegramm-bezopasnost.html">safety is more important</a> site or that you cannot see the user’s actions on your site?” In order to make sure that this is the reason why the web viewer is not working and you cannot see what your users are doing on the site, you need to check the server’s response to the request in any <a href="https://viws.ru/en/kak-zashchitit-dannye-v-oblake-ot-krazhi-chto-vam-izvestno-o.html">well-known service</a>. Enter the address of the page with the web viewer installed and get the result as in the screenshot.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/45814/1574879.jpg' width="100%" loading=lazy loading=lazy></p><p>There is a ban on displaying the page in a frame; the screenshot shows this.</p><p>Have you decided to lift the ban? If it is at the server configuration level, and you have installed the site on, contact technical support.</p><p>If the ban is at the script level, <a href="https://viws.ru/en/izvestnye-cms-primery-shablonov-wordpress-woocommerce-skorost-raboty.html">various cms</a> make a request to their security libraries, so the problem will be more difficult to solve than you think. Couldn't open the page in a frame? Contact your CMS developers.</p><p>As you can see, if there is a ban on displaying a page in a frame, you can even solve the problem yourself.</p> <p>Good day to all! Andrey Bernatsky is with you.</p> <p>Before moving directly to the article, I would like to give you a link to the video version of this topic:</p> <p>In this episode we will talk about <b>frames in HTML</b>. <b>Frames</b> in essence they are very similar to tables, but unlike tables, each frame is independent and each of them can have a separate web page with its own address.</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2009/06/frame1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>In the figure we see a fairly common site structure. It can be presented in the form of a table, or all this can be done using frames. In the top frame you can load a page with the logo and menu, in the left - a page with site navigation, in the central frame there will be a page with the main content of the site, in the right frame we will load a page with <a href="https://viws.ru/en/kak-ubrat-reklamnyi-banner-s-kompyutera-variant-resheniya-problemy-dlya.html">advertising banners</a>, and at the bottom - the page with <a href="https://viws.ru/en/kak-boryutsya-s-internet-piratstvom-v-rossii-i-mire-borba-s.html">contact information</a>. Here's what frames are in a nutshell.</p> <p>Now let's look at how all this can be done.</p> <p>The peculiarity of a document containing frames is that it does not contain a container <b>BODY</b>. A container is used instead <b>FRAMESET</b>. The general syntax for frames is as follows:</p> <p>XHTML</p> <p><html> <head>…</head> <frameset>….</frameset> </html></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><html> </p><p><head> … </head> </p><p><frameset> …. </frameset> </p><p></html> </p> </td> </tr></table><p>In a container <b><frameset>….</frameset> </b> tags are located <b><frame /> </b>, which define the contents of frames.</p> <p>At the tag <b><frameset> </b> there are two parameters:</p> <p><b>rows = number</b>– number of lines (horizontal sills).</p> <p><b>cols = number</b>– number of columns (vertical sills).</p> <p>Generally speaking, the values ​​of the rows and cols parameters are specified not exactly by numbers, but by listing the numbers separated by commas. As many numbers as there are, there will be as many rows or columns, and the numbers determine the size of the frame. The main thing is that the sum of these numbers is the entire width of the screen.</p> <p>Let's look at this with an example, and everything will be clear. Now let's create a frame document <a href="https://viws.ru/en/po-principu-deistviya-razlichayut-sleduyushchie-tipy-printerov-kakie-vidy-printerov.html">the following type</a>:</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2009/06/frame2.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>The code that will define this frame structure for us will look like this:</p> <p>XHTML</p> <p><frameset cols="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="http://www.mail.ru" /> <frame src="../Урок11/index.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "30%,*,30%" > </p><p><frame src = "../Урок 13/index.html" /> </p><p><frame src = "//www.mail.ru" /> </p><p><frame src = "../Урок11/index.html" /> </p><p></frameset> </p> </td> </tr></table><p>The first line of the code above opens the frameset container, the cols parameter indicates that there will be three nested frames. The first one will have a width of 30% of the entire screen width. The third one will also have 30% of the entire screen width. And the second frame will take up all the remaining space. Yes symbol <b>"*" </b>(asterisk) means take up all the remaining space on the screen.</p> <p>By the way, let's look at how frames can be set in the cols and rows parameters:</p> <p>You can set the size by simply entering a number. This number will determine the size of the frame in pixels.</p> <p>You can set the width as a percentage. Moreover, if the sum of the percentages of all columns exceeds 100%, then all frames will decrease proportionally, so that <a href="https://viws.ru/en/kak-v-eksele-poschitat-obshchuyu-summu-stolbca-kak-poschitat-v.html">total amount</a> was equal to 100%. The situation will be similar: if the sum of the percentages of all columns is less than 100%, then all frames will increase proportionally so that the total sum is equal to 100%.</p> <p>You can set the frame size with a symbol <b> “*” </b>(star). This means that the frame must take up all the remaining space. If specified, for example <b><frameset cols="20%,*,*"> </b>, that is, two asterisks, then all remaining space will be equally divided between these two frames (in <a href="https://viws.ru/en/aifon-4-razblokirovat-kak-tolko-ekstrennyi-pokazyvaet-s-pomoshchyu.html">in this case</a> 40% each).</p> <p>You can combine options for setting frame sizes in HTML. For example:</p> <p>XHTML</p> <p><frameset cols="70,*,40%"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "70,*,40%" > </p> </td> </tr></table><p>This code means that the first frame will be 70 pixels, the third will be 40% of the screen width, and the second will take up the rest of the space.</p> <p>We completely figured out the first line of code. Go ahead.</p> <p>Tags follow <b><frame src="url" /> </b>. Since separated by commas in the parameter <b>cols</b> tag <b>frameset</b> if three numbers are given (that is, there will be three frames), then tags <b><frame /> </b> there must be three too. The value of the src parameter is the address <a href="https://viws.ru/en/kakoe-rasshirenie-dolzhen-imet-fail-web-stranicy-chto-takoe-veb-stranica-veb.html">web pages</a>, which will be loaded into this frame. The address, as can be seen from the example, can be absolute and relative.</p> <p>And in <a href="https://viws.ru/en/download-and-install-yandex-string-latest-version-yandex.html">last line</a> container closes <b></frameset> </b>.</p> <p>If we replace the cols parameter with rows in the first line of code, we will get the same frame document consisting of three frames. Only the division into frames will be vertical.</p> <p>XHTML</p> <p><frameset rows="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="../Урок 12/index.html" /> <frame src="../Урок 11/index.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset rows = "30%,*,30%" > </p><p><frame src = "../Урок 13/index.html" /> </p><p><frame src = "../Урок 12/index.html" /> </p><p><frame src = "../Урок 11/index.html" /> </p><p></frameset> </p> </td> </tr></table><p>Options <b>rows</b> And <b>cols</b> cannot be used simultaneously. This leads to errors and incorrect display of content.</p> <p>Everyone now has a question about how to create such a structure, which I spoke about at the very beginning of the article. We’ll come back to this a little later, but for now let’s turn to what’s happening in our browser now.</p> <p>In the browser we see three pages, each of which is in its own frame.</p> <p>At the same time, by moving the mouse cursor to the borders of the frames, we can change the size of the frames; scroll bars and borders between frames are also visible. This is not always necessary, in fact it is not necessary at all. And all this can be managed thanks to tag parameters <b>frame</b> And <b>frameset</b>.</p> <p>Tag options <b>frame</b> And <b>frameset</b>:</p> <p><b>src="url"</b>– required parameter. Specifies the address of the page that will be displayed inside the frame. Used only for frame.</p> <p><b>noresize</b>– cancels the ability to resize. Only used for <b>frame</b>.</p> <p><b>scrolling="yes/no/auto"</b>– determines the presence of scroll bars. The value yes – indicates the presence of scroll bars. The value no specifies that there will be no scroll bars. When set to auto, the browser itself determines whether there will be scroll bars. Only used for <b>frame</b>.</p> <p><b>name="frame-name"</b>– frame name. This parameter is used for interaction between frames. We'll talk more about it a little later. Only used for <b>frame</b>.</p> <p><b>border=number</b>– thickness of borders between frames. If it takes the value 0, then the borders between frames are not displayed. Used only for frameset.</p> <p><b>framespacing="number"</b>– distance between frames. Used only for frameset.</p> <p>Using these parameters, you can get a page in which the borders between frames are not displayed, there is no way to change the size of the frames, and scrolling is prohibited for the last two frames. The code for such a page looks like this:</p> <p>XHTML</p> <p><frameset cols="30%,*,30%" border="0"> <frame src="../Урок 13/index.html" noresize="noresize” /> <frame src="../Урок 12/index.html" noresize="noresize" scrolling="no" /> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "30%,*,30%" border = "0" > </p><p><frame src = "../Урок 13/index.html" noresize = "noresize” /> </p><p><frame src=" . . / Урок12/ index. html" noresize=" noresize" scrolling=" no" /> </p><p><frame src=" . . / Урок11/ index. html" noresize=" noresize" scrolling=" no" /> </p><p></frameset> </p> </td> </tr></table><p>There are a few other options, but they don't clearly work, so I think it makes sense not to even mention them in the release.</p> <p>Perhaps that's all with the parameters. We looked at an example of how to use them.</p> <p>Now let's create the frame structure that I talked about at the very beginning of the release.</p> <p>To do this, we create a structure of three frames divided vertically.</p> <p>XHTML</p> <p><frameset rows="100,*,70" border="0"></p> <p>Accordingly, instead of the tag <b><frame /> </b>, we have to insert another container <b><frameset> </b>..<b></frameset> </b> with three columns, and write your page address in each. You see, nothing complicated, we just use a tag instead <b><frame /> </b> insert the new container we need <b><frameset> </b>..<b></frameset> </b>.</p> <p>XHTML</p> <p><frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "20%,*,20%" > </p><p><frame src = "../урок 7/lesson7.html" /> </p><p><frame src = <span>"../lesson3/Untitled-1.html"</span> /> </p><p><frame src = "../урок1/lesson1.html" /> </p><p></frameset> </p> </td> </tr></table><p>After this, we insert our third frame with contact information and close the main container <b></frameset> </b></p> <p>XHTML</p> <p><frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frame src = "../Урок11/index.html" noresize = "noresize" scrolling = "no" /> </p><p></frameset> </p> </td> </tr></table><p>The full code for this page is below:</p> <p>XHTML</p> <p><frameset rows="100,*,70" border="0"> <frame src="../Урок 13/index.html" noresize="noresize" /> <frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset rows = "100,*,70" border = "0" > </p><p><frame src = "../Урок 13/index.html" noresize = "noresize" /> </p><p><frameset cols = "20%,*,20%" > </p><p><frame src = "../урок 7/lesson7.html" /> </p><p><frame src = <span>"../lesson3/Untitled-1.html"</span> /> </p><p><frame src = "../урок1/lesson1.html" /> </p><p></frameset> </p><p><frame src = "../Урок11/index.html" noresize = "noresize" scrolling = "no" /> </p><p></frameset> </p> </td> </tr></table><p>Of course, I took the addresses for the frames from previous issues of the newsletter, and we didn’t see any menu, logo, navigation, etc. here. But we got the structure we needed. But if you create real <a href="https://viws.ru/en/dlya-chego-nuzhna-funkciya-sohraneniya-veb-stranicy-getpocket-kak-sohranit-veb.html">required pages</a>, then you can get a beautiful structure.</p> <p>What we got in the end. Whether this is convenient or inconvenient is up to you to decide, but with a frame structure, all our frames always remain on the page. Regardless of the size of the content, we will always see the site logo and menu, the bottom of the site with contact information, the navigation block and banners. This, in general, is the essence and meaning of frames.</p> <p>There is the possibility of interaction between frames. You can make it so that by clicking on a link in one frame, the information appears in another. Now we will see how this is done.</p> <p>Let's create a frame like this:</p> <p><img src='https://i2.wp.com/webformyself.com/wp-content/uploads/2009/06/frame3.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Our links will be located in the left frame. And on the right are the pages to which these links lead.</p> <p>Let's create a frame like this:</p> <p>XHTML</p> <p><frameset cols="100,*" border="0"> <frame src="ind2.html" noresize="noresize" /> <frame src="ind3.html" name="fram1" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"></td></tr></table> <p>Let's start with the frame structure. What is its essence? We have the ability to organize special window-type areas in the document that we load into the browser. Others can be loaded into these areas. <a href="https://viws.ru/en/kak-razdelit-pdf-fail-na-stranicy-onlain-izvlech-stranicy-iz-pdf.html">individual documents</a>(web pages).</p> <p>Why is this necessary? Since documents are loaded into their own separate areas, they behave independently. That is, you can do something in one document, while other documents remain unchanged.</p> <p>Where can you find such frame structures? These are help files (with the extension .chm).</p> <p>Here's a simple example of a document with frames:</p> <html> <head> <title>Example frames</title> </head> <frameset cols = "25%, 75%" > <frame src = "menu.html" > <frame src = "content.html" > <noframes>You are viewing this page using a browser that does not support frames.

Element frameset. Its job is to cover the viewing area and divide it into separate areas. Those. instruct the browser in what ratio and how (horizontally or vertically) we divide these areas.

Element frame– describes each such individual area. Single tag. It occupies the dimensions specified in the frameset.

Element noframes- displayed if the browser does not support frames.

Notice that there is no body element. The frameset element is used instead. This is one of the reasons why frames are no longer used on websites.

Frameset element attributes

  • cols - vertical division of the page into viewing areas.
  • rows - horizontal division of the page into viewing areas.

frame element

This element describes a single window area. You can upload any document into it - using src attribute. Examples:

Attribute scrolling- scrolling (auto by default). If the document exceeds the viewing area of ​​this frame, scrolling occurs. If the document fits entirely within the frame, then there is no scrolling. Scrolling can be disabled, but it is better to leave it at auto.

Single attribute noresize- prohibits changing the frame size in the browser. By default this is allowed.

Attribute frameborder– frame by frame. Value '1' - draw, value '0' - do not draw. Only these two values ​​are valid. By default, the frame is drawn.

Attribute marginwidth– indicates the distance that the content in a given frame will recede horizontally from the frames of this frame.

Attribute marginheight– vertical indent from the content to the borders of the frame.

Embedded iframe

Element iframe(‘line window’). This element is paired (there is an opening and closing tag). This element serves the same purpose - to organize a window element in the document.

How is it different from the old frames? It is self-sufficient and does not need any additional containers. And it can appear in any documents, so where there is a body element.

The iframe element is inline element with replaced content. Those. an area of ​​line type with any abstract dimensions is formed, and the content of some external document (html file) is loaded into this area.

Iframe has the same attributes as images (since they are of the same type): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.