Frames in html

Example frame structure

The browser window can be divided into frames, i.e. into areas located next to each other. You can upload your own HTML pages to each of these areas. It will be clearer with an example, create new file called index.html with the following code:

Frames in html

In the browser window it will look like this:

The browser window is divided into 3 parts. I must say that this is the only case when there are no tags in an html document . Tags are used instead , which tell the browser to split the window into several areas - frames.

How many such areas there will be and how they will be located depends on two tag parameters :

• rows- specifies to split the window into horizontal areas. Moreover, the number of values ​​this parameter has, the number of areas. In our example rows="30%, 10%, 60%", i.e. three horizontal areas: the width of the first is 30% of the screen width, the width of the second is 10%, and the third is 60%.
• cols- specifies to split the window into vertical areas.

Inside tags single tags are located , and there should be as many of them as the specified areas. Without parameters, these tags are useless.

We will look at the tag parameters with examples.

So we looked at all the tag parameters .

The final touch: remove the frame frames. To do this in the tag let's add two parameters border="0" frameborder="0".

Frames in html

Now our page looks like this:

Pros and cons of frames

Now that you have an understanding of frames, it's time to talk about the pros and cons of framed websites.

An undoubted advantage is the reduction in the amount of information downloaded to the user’s computer. After all, the header and menu of the site are loaded only once, and then only the content changes. Of course, this reduces loading times.

But there are many more shortcomings. Firstly, it is easy to get confused in the structure of frames.

Secondly, our menu is in separate file. This means that if the user found, for example, your content.html page via search engine, then he will only be able to read it, because there are no links or menu items on this page.

Finally, not all browsers support frame structure. Therefore the existing tags , they are located inside tags and contain alternative information for browsers that do not support frames. Essentially, you will have to do double the work and create two versions of the site: with and without frames.

Hence the conclusion - do not use frames unless absolutely necessary.

Examples of frame structures

As you remember, two parameters are responsible for dividing into frames: rows And cols. By combining them, you can split the window into frames in any way. We will consider examples of such partitioning.

Example 1:

Frames in html

We get three vertical frames. The width of the first is 150 pixels, the second is 300, and the third is the rest of the window space.

Result:

Example 2:

Frames in html

We get two vertical frames. The width of the first is taken to be equal to one, and the second is taken to be twice as wide as the first (i.e. 33% and 67% of the window width).

Result:

Example 3:

Frames in html

We get two horizontal frames. The height of the first one is 100 pixels, and the second one is the rest of the space.
We will split the second horizontal frame into two vertical ones: one is 200 pixels wide, and the second will take up the rest of the space. This is achieved using nested tags .

So, frames... what are they for and what benefits do they provide? I will try to talk about this in this chapter, and of course about how to implement them and work with them..

Often, when creating a website, it becomes necessary to open several HTML documents at the same time in one browser window... so frames were created to define work areas for each document. Moreover, frames are good tool, with which you can do page layout, they serve as a worthy “alternative” to the tabular method of page layout... I put the word “alternative” in quotes because this is a completely different way of building a site with its own advantages and disadvantages and it is quite difficult to compare it with the hitherto familiar building a website.. but first things first..

Well, shall we begin? Let’s say we need to open three HTML documents at once in one browser window and arrange them, for example, in this way:

What do we need for this? To begin with, naturally, we need to create three separate HTML documents, which we will actually open in one window. Let the first document contain graphic image and will act as a logo, let's call it logotype.html, the second document will be some content... let's call it menu.html, and the third document with a bunch of text. text.html. Of course, you can come up with your own names, as well as the contents of the documents, but for now it’s better to copy mine... it will be more convenient for both me and you.

So, there are three files logotype.html, menu.html and text.html.. which we need to place under one roof, but we don’t have a roof yet..

We write “roof”, the main document to which we will connect our files. Since it will be the main one, we give it the name index.html.

Here is the structure of the document that is familiar to us, which we chewed at the very beginning of our training. Frames break existing stereotypes! The structure of the document frame looks like this:

No tag compensates for the new tag - install a frame or a set of frames.. we will actually work with this guy further.

Tag has attributes rows And cols- these attributes tell the browser how to place frames in the browser window

rows- horizontally cols- vertically

In our case, we need horizontal placement of frames... so we write like this:

rows="15%,15%,70%">

The percentages after the equal sign are nothing more than the sizes of our frame windows in one large browser window; we are supposed to place three windows - therefore, there are also three values ​​separated by commas. Remember how we set the cell sizes for the table, the same principle applies here. As in the case of table cells, frame sizes can be specified as a percentage of the total area and in pixels.

Here are some writing examples:
- this entry indicates that there will be three horizontal windows where the last one will occupy 70% of the browser window area, and the first two will occupy 15%.
- here three windows are located vertically, the width of which is indicated in pixels.
- such an entry means that the first and third windows will have a width of 100 and 180 pixels, respectively, and the second frame will occupy the entire remaining area.

We are done with placing the documents, now all that remains is to connect them and enjoy the first result..

Tag and its attribute src will indicate to the browser the path to the html document which should be opened in the space provided for it. We have three separate documents logotype.html, menu.html and text.html, now we need to specify a path for each, which is what we actually do. (I assume that you have all four files in the same folder and the paths to them have the most simple entry by type: )

index.html file










File logotype.html








File menu.html





Menu:

Champignon soup
Beans in a pot, Italian style
Australian summer salad
... ... ...



File text.html

Champignon soup

a lot of text..

In this example, I laid out all four HTML documents where index.html is the main one, and the other three are plug-in pages, each of which, in principle, can work autonomously and contain anything you want, pictures, tables, texts, links.. I did it This is to give you an understanding of the principle of working with frames. In further examples, I will post only the head file with frames (otherwise they all take up too much space on the page), and you know that I have “somewhere out there” all the other files containing graphics, texts, maybe be something else.. well, don’t lag behind me, slowly edit your own pages for the future training site.. I don’t know what you are going to write yours about, but I promised to help one girl in writing a site dedicated to cooking..)) so that I decided, so to speak, to take aim at two birds with one stone.. the bunny girl and the site..)) something like this..))

In the above example, we positioned all the windows horizontally, changing the attribute rows on cols you can arrange them vertically. But what if you need to place our windows?

like this?: or like this?: or even like this?:

There is a way out. Let's look at examples.

Let's start with the first case... what do we see? And we see two lines, where the second is divided into two columns.

And now, in order:

- divide the browser window into two lines
- load our logo in the first line
- and divide the second row into two columns
- in the first there will be a menu
- and in the second there is a lot of text
- close the column division tag
- close the line division tag

In general, it is incorrect to say columns and rows, since frames have nothing to do with tables other than visual similarity; it is correct to say horizontal and vertical frames... well, I’m saying it this way so that it would be clearer for you...

Okay, let's look at an example:

In the second case, we have two columns in which the second is divided into two lines, so we will write like this:

- divide the window into two columns
- the first one will contain the content
- and divide the second into two lines
- logo
- and main text
- close the line division
- close the division into columns

The third case is a little more complicated, but you shouldn’t be afraid of it... especially since I personally chose this kind of construction for a site about culinary art; I’ll explain why below. What do we have? three columns, and the second column essentially contains our first case..

- divide the window into three columns (note the second column takes up exactly 800 pixels and the two outer ones do not have an exact size and will divide the remaining space in half)
-in the first column we load an html document that will perform a purely decorative function

-
-
- In the second column we insert our “first case”
-
-
-
-

- in the third column we load the same file with decorations
- slam

Look at the example, and then I will explain why I chose the five-window path

So why five windows? I remember that I already wrote about the fact that different users On the Internet, monitors have different resolutions and, accordingly, our site will look different on different screens... and if there are no specific sizes, all our pictures, texts, tables will “float” for those users whose monitor resolutions are different from yours. When we laid out the site using a table, the issue with page sizes was resolved by assigning a specific width and height to this table; unfortunately, this cannot be done with frames... even if you specify the width of the frames not in percentages, but in pixels, it is still the last column will stretch across the remaining width of the browser window and the page, as they say, will lose its “marketable appearance”. So what should we do? We have to resort to little tricks... By setting the central column (in which we actually have the entire page) to a size of 800 pixels, we once and for all determine its width, and the dimensionless first and third columns, in addition to decoration, act as a kind of “springs” on which the central column.. So, for people with a low monitor resolution, these windows/fields will be narrow, and for people with a high resolution, they will be wide, so the central column will not be affected in any way and now we can place any objects in it with complete confidence, with precise reference locally, without worrying about their future fate. Compare the first example, where there are three windows, and the third, where there are already five of them, isn’t that better?

We'll finish with the placement and sizes of frames... and we've been stuck here for a long time... let's move on.

We bring the frames into a neat appearance.

In our last example, the first thing that catches your eye is a whole bunch of scroll bars, which are there where they are needed and where they are not needed.. Let's get rid of them, well, we can leave them somewhere.. This is done using the attribute scrolling- tag , it can have one of three values:

• no
• yes- always show
• auto

scrolling="no">

scrolling="no" >





scrolling="no">

Frame fields, or otherwise the distance from the frame boundaries to the text or image, as in our case, are specified in pixels using attributes marginwidth And marginheight tag

marginwidth="0" marginheight="0">


marginwidth="10" marginheight="10">

Let's talk a little about the framework around our frames.

If you noticed, in the last example, by hovering the cursor over the border of the frame, the cursor, that is, takes on a different appearance (grab and move) and now this border can be dragged in any direction while holding the left mouse button. Sometimes this “mobility” of frame boundaries plays into the hands of the webmaster, but more often it still gets in the way.. In order to prevent the user from playing with the window sizes for the tag came up with an attribute noresize

noresize>

noresize>

noresize>
noresize>


noresize>

But this is an attribute that has been familiar to us for a long time border sets the width in pixels of these very frames between the frames.. it is written inside the tag . Same as before meaning border="0" will completely free us from frameworks.

border="0">

border="0">

border="0">

Frames and links.

It's time to revive our site with links, but here's the problem, the familiar ordinary link Beans in a pot, Italian style will open this document in the same frame where it is located, in our case directly in the frame with the content, and the content itself at the moment of clicking on this link will go into oblivion.. you can look at the clumsy example.. click on any link in it.. To prevent this from happening in the future, it is necessary to indicate to the browser in which frame the document we need should be opened, unless, of course, you really need to open it in the same frame.

I remember we already got acquainted, in the chapter dedicated to links, with attributes name- name and target- goal, they are also used when working with frames, the mechanism is slightly changed and it’s almost the same. First of all, the frame in which we would like to open any documents must be assigned an individual name.

it is written like this:

name="osnovnoe"> you can come up with any name.. the main thing is not to forget it..

It is written like this:

target="osnovnoe">Beans in a pot, Italian style

Well, I think there’s no need to explain to you that before you refer to any documents, you need to create them... in my case, the files (recipes) have the names text.html, text1.html, text2.html...

Look at the example:

index.html file










name="osnovnoe" marginwidth="10" marginheight="10" noresize>





File menu.html





Menu:

---

target="osnovnoe">Champignon soup

---

target="osnovnoe">Beans in a pot, Italian style

---

target="osnovnoe">Australian summer salad

---

... ... ...

Just like before, the document can be opened in a separate window. Let me remind you that it is written like this:

target="_blank">Beans in a pot, Italian style

Or by assigning the attribute target meaning _top open it in the same browser window, but in full screen.. “zeroing” everything that is there.. it is written like this:

target="_top">Beans in a pot, Italian style

This is how the site turned out... of course, there is still work to be done on it... besides, according to my idea, it will have a slightly different structure in terms of navigation around the site, it will have a whole bunch of pages, a beautiful menu, but as for the frame structure, I think she will remain the same..

floating frame

Sometimes it is necessary to insert another HTML document or even a series of such documents into a page containing a non-frame structure in a separate window. To accomplish this purpose there is a tag

Example document with floating frame:

floating frame

The so-called "floating frame" has been introduced into this page.
In a separate window, it opens another html document for display.



… … …

Noframes

Some browsers do not support the document frame structure or interpret it incorrectly; in addition, users often deliberately disable support for the HTML document frame structure in their browser settings. And although the percentage of such browsers and users is small, they nevertheless exist.

Now imagine that you have built your website using a frame structure and some visitors, perhaps without knowing what the problem is, try to open your website, and their browser displays an error! What will they think of your site? I think something like: “Ugh.. some kind of nonsense.. I won’t come here again!”

In order to make it clear to the user that his browser/browser settings do not support frames, there is a tag </b> .</p> <p>Tag <b><noframes> </b> displays the text enclosed in it if the user's browser does not support frames or they are forcibly disabled in its settings. If frames are supported by the user's browser, then this tag is simply ignored.</p> <p> <html> <br> <head> <br> <title>frames</title> <br> </head> <br> <frameset cols="*,800,*" border="0"> <br><b><noframes>Sorry, but your browser does not support frames..

The result of the example will be noticeable if your browser really does not support frames (here I thought for a long time.. :) if this is so, then why read this chapter at all?) or you turned off frame support in your browser as an experiment.

Tag </b> must be located inside a tag <b><frameset> </b></p> <p>With a floating frame, everything is even simpler, just write the desired text between <b><iframe> </iframe> </b> and this message will be displayed on the screen if the browser does not support frames.</p> <p> <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Sorry, but your browser does not support frames..</b></iframe> </p> <ul><p>Before you start creating a page using a frame structure, analyze its layout, the size of each window, the presence or absence of scroll bars in them, etc. After this, you can create plug-in HTML files without particularly worrying about their relative position relative to each other.</p><p>Use tag <b><noframes> </b>. Remember that if in your browser the site works and is displayed as you intended, then for other users things may be different!</p> </ul> <p>At the dawn of website building, web resources widely used frames to display individual parts of pages. But with the arrival <a href="https://freeport-outlet.ru/en/skachat-novuyu-versiyu-kodi-tv-nastroiki-kodi-na-android.html">new version</a> HTML 5 has changed everything. Markup elements<<i>frame</i>>, <<i>frameset</i>> and<<i>noframes</i>> are considered obsolete. They were replaced by a single tag -<<i>iframe</i>>. How to add to html <iframe>? The example below will be clear even to a beginner in programming.</p><h2>What are frames?</h2><p>The frame is the basis of most first web pages. If translated literally, this word means “frame,” that is, a frame is a small part of a page in a browser. The widespread use of frames in the past can be explained by the low quality and high cost of Internet traffic. As a rule, the site was divided into 3-5 parts, each of which served a specific purpose:</p><ul><li>“header” (top frame along the width of the page) - displays the name of the resource;</li><li>left/right “glass” - menu display;</li><li>The central frame is a display of site content.</li> </ul><p>Splitting the page into parts made it possible to overload only a certain part when updating it. For example, the user clicked a menu item, and new content was downloaded to the central frame.</p><h2>Modern Frames in HTML 5</h2><p>Why is it needed in HTML?<<i>iframe</i>>? An example is inserting content from a third-party resource. The classic situation is when a web developer wants to show the location of an object on a map. What should I do? Draw a site plan from scratch? No - there is a simpler solution: embed a Google Map, Yandex Maps or 2GIS element on the page. The problem is solved in four steps.</p><ol><li>You need to go to the website of any mapping service.</li><li>Find the desired object. Once you know the exact address, you can enter it in the search window.</li><li>Using the “Save and get code” button (for Yandex.Maps) or “Done” (for <a href="https://freeport-outlet.ru/en/nuzhen-li-internet-dlya-gugl-karty-kak-ispolzovat-karty-google-bez.html">Google maps</a>) get the embed code.</li><li>All that remains is to enter the generated markup tags onto the page.</li> </ol><p>Additionally, you can select the map size and configure other display options.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/47242/1650473.jpg' width="100%" loading=lazy loading=lazy></p><p>How else can you use it in HTML?<<i>iframe></i>? An example is inserting video materials from the Youtube resource. Multimedia technologies attract Internet users, which is why video content is so popular. The developer will handle the installation of the video quickly.</p><ol><li>Should be downloaded to <a href="https://freeport-outlet.ru/en/sozdat-sobstvennyi-kanal-na-youtube-sozdanie-kanala-na-youtube-menyaem-oformlenie-i.html">Youtube own</a> video or find a third-party file to stream.</li><li>Get the tag by selecting the "HTML Code" button</li><li>The final step is to paste into <iframe>. An example of the resulting tag content will be discussed below.</li> </ol><p>Both examples used automatic code generation, but professional developers should be able to write code themselves. Firstly, this will allow them to understand the layout of the page and, if necessary, modify it. Secondly, the markup of site elements (even though they belong to an external resource) is not always formed without the participation of the webmaster. This is where the high qualifications of the developer come into play.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/47242/1650474.jpg' width="100%" loading=lazy loading=lazy></p><h2>Syntax</h2><p>So, before you start laying out the page, you need to consider the iframe (html) tag: what it is and how to use it correctly.</p><p>First of all, it should be noted that the tag is paired. Between the opening and closing elements, you specify the content that will be displayed in browsers that do not support this markup element. Main tag attributes:</p><ul><li>width(width);</li><li>height(height);</li><li>src (address of the downloaded resource);</li><li>align(align method);</li><li>frameborder;</li><li>allowfullscreen.</li> </ul><p>Thus, the code for <iframe>. The HTML example is demonstrated in full below:</p><p><i><iframe width="560" height="315" src= "https://someserver.com/" frameborder="0" allowfullscreen></iframe> </i></p><p>In the above markup, it is enough to replace the site address with any other one and, if necessary, adjust the frame size.</p> <p><i> </i> 07.12.2015</p> <p>Not yet</p> <br><p>Hi all! <br>We continue to study diligently <a href="https://freeport-outlet.ru/en/chto-takoe-svg-plyusy-i-minusy-ispolzovaniya-chto-takoe-svg-osnovy-vektornaya.html">HTML basics</a>. I'm glad you don't give up your lessons.</p> <p>In this lesson we will look at <b>what are frames</b> and how they are created in HTML. <br>So, let's define what frames are in HTML. <br><b>Frames</b>- This is the division of the browser window into separate areas in which individual HTML documents can be loaded.</p> <p>I think you understand that thanks to frames, you can view several web pages at once in one browser window.</p> <p>As an example, to understand how the frame works in practice, I suggest looking at an example. Make a couple of transitions there:</p> <p>Well, how do you like it? Do you want to learn how to create this? Now we will learn <b>insert frames into html document</b>.</p> <p>A frame on a web page is created using the following layout:</p><p> <frameset> <frame> <frame> </frameset> </p><blockquote><p><b>Attention:</b> the frame code layout is inserted into the html document instead of the tag <bode></body> :</p> </blockquote> <html> <head> <title>Frames</title> </head> <frameset> <frame> <frame> </frameset> </html> <p>○ <b>frameset tag</b></p> <p>This is the main container for creating a frame, within which other elements are contained. <br>The closing tag is required.</p><p> <frameset></frameset> </p><p><i><b>*Attributes of the frameset tag:</b> </i> </p> <ul><li>Cols - vertical</li> <li>Rows - horizontal</li> </ul><p><b>rows</b>- horizontally</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-1.png' height="125" width="181" loading=lazy loading=lazy></p> <p><b>cols</b>- vertically</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-2.png' height="127" width="185" loading=lazy loading=lazy></p> <p>The cols and rows attributes indicate how many parts the browser window should be divided into. For example, to divide the browser window into two vertical parts, you need to write like this:</p><p> <frameset cols="30%,*"> </p><p>The left side of the screen will be 30% in size, and the right side will be 70%.</p> <p>If you want to divide the browser into several more parts, add additional dimensions separated by commas, for example, like this:</p><p> <frameset cols="30%,20%,10%,40%"> </p><p>As a result, the first <span>vertical column</span> will be 30% wide, the second - 20%, the third - 10%, the fourth - 40%.</p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-3.png' width="100%" loading=lazy loading=lazy></p> <p>Got it?</p> <p>The same goes for the horizontal layout:</p><p> <frameset rows="30%,20%,10%,40%"> </p><p>The first horizontal column will be 30% wide, the second - 20%, the third - 10%, the fourth - 40%.</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-4.png' height="199" width="390" loading=lazy loading=lazy></p> <p>○ <b>frame tag</b></p> <p>The frame tag specifies which HTML document should be loaded into the browser window. <br>For example, we need to load three different pages “1.html”, “2.html”, “3.html” in one browser window. The frame tag will look like this:</p><p> <frame src="1.html"> <frame src="2.html"> <frame src="3.html"> </p><p>Let's summarize the knowledge on frames. So, the task: you need to divide the browser window into two parts and load two web pages into these parts - “1.html” by 30%, “2.html” by 70%. <br>Here is the finished code:</p><p> <frameset cols="30%,*"> <frame src="1.html"> <frame src="2.html"> </frameset> </p><p>The result will be like this:</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-5.png' width="100%" loading=lazy loading=lazy></p> <p><i><b>* Frame tag attributes</b> </i> </p> <ul><li>src – web page address. <i>src="1.html"</i> ;</li> <li>marginwidth – margin inside the frame along the width. Example: <i>marginwidth="10"</i> ;</li> <li>marginhight – height margin inside the frame. Example: <i>marginhight="10"</i> ;</li> <li>scrolling – scrolling the frame through the scroll. <br>- yes – the scroll will be present in the frame. Example: <i>scrolling="yes"</i> ;<br>- no – scroll will not be present in the frame. Example: <i>scrolling="no"</i> ;<br>- auto – scroll will be present in the frame if necessary. Example: <i>scrolling="auto"</i> ;</li> <li>noresize – prohibits moving frame borders.</li> <li>name – frame name. Specifies in which window other frames should be opened. Example: <i>name = "site"</i> ;</li> </ul> <p>If you do not specify a name for the frame in the “name” attribute, then when you click on the link, a new frame will open in the window where the link was:</p> <p>Here is an example if you add the “name” attribute:</p> <p>Isn't that better? <br>For any frame, add the “name” attribute where you want other HTML documents to open in it</p><p> <frame src="2.html "name ="сайт"> </p><p>The name in the “name” attribute can be anything. But in the future, if you give names to other “frame” tags, remember that each one must be unique:</p><p> <frame src="2..html "name ="bloggood-ru"> <frame src="3.html "name ="nocrisise-ru"> </p><p>page 2 page 3</p><p>“Page 1”, “Page 2” will open in one window where you specified the name for the frame “name =" <span>website "</span>" and "Page 3" will open in another frame, where the name "name =" <span>bloggood-ru "</span>»</p> <p><b>PRACTICE</b></p> <p>Task: You need to create frames according to this layout:</p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-6.png' width="100%" loading=lazy loading=lazy></p> <p>First, let's create three horizontal frames:</p><p> <frameset rows="15%,*,15%"> </frameset> </p><p>Now let's add "top.html" and "footer.html"</p><p> <frameset rows="15%,*,15%"> <frame src="top.html"> <frame src="footer.html"> </frameset> </p><p>The result so far will be like this:</p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-7.png' width="100%" loading=lazy loading=lazy></p> <p>Now between “top.html” and “footer.html” we will add “menu.html” and “content.html”:</p><p> <frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset> </p><p>Ready code:</p><p> <html> <head> <title>Frames</title> </head> <frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset> </html> </p><p>Save the file as "index.html"</p> <p>Create the pages “top.html”, “footer.html”, “menu.html” and “content.html”:</p> <p>File code "top.html"</p><p> <html> <head> <title>site header</title> </head> <body bgcolor="#b2f2ff" text="#0000FF"> <h1>website</h1> </body> </html> </p><p>File code "footer.html"</p><p> <html> <head> <title>File footer.html</title> </head> <body bgcolor="#b2f2ff" text="#000000">StepkinBlog.com © 2015</body> </html> </p><p>File code "menu.html"</p><p> <html> <head> <title>File menu.html – site menu</title> </head> <body bgcolor="#b2bbff" text="#112cf5"> <ul> <li>Home page</li> <li>About the author</li> </ul> </body> </html> </p><p>Code of the file "content.html":</p><p> <html> <head> <title><a href="https://freeport-outlet.ru/en/facebook-com-vhod-glavnaya-vosstanovlenie-stranicy-facebook-mozhno-li-voiti.html">Home page</a></title> </head> <body bgcolor="#e3e5f8" text="#FF0055"> <h1>Home page</h1>Site content - "Home page (content.html)"</body> </html> </p><p>Code of the file "autor.html":</p><p>This is the result I got:</p> <p>Let’s use the “frame” attributes and disable manual stretching of frames and remove scrolling in the “index.html” file.</p><p> <frameset rows="15%,*,15%"> <frame src="top.html" scrolling ="no" noresize> <frameset cols="25%,75%"> <frame src="menu.html"scrolling ="no" noresize> <frame src="content.html" name="main"scrolling ="no" noresize> </frameset> <frame src="footer.html" noresize> </frameset> </p><p><b>○ what to do if frames are not supported by the browser? <br></b><br>You can display a message to the user that their browser does not support frames. To do this, insert the tag <noframes>inside the structure <frameset> :</p><p> <frameset rows="15%,*,15%"> <noframes>

○ Floating frame

If you need to insert an iframe window directly into a page that does not have a frame structure, there is an "iframe" tag for this.

* “iframe” tag attributes

• src - path to the page to open
• width - width of the floating frame
• height - floating frame height
• scrolling - scroll bar
  - no - never show the scrollbar
  - yes - always show
  - auto - show if necessary
• align - floating frame alignment
  - left – left
  - right – on the right
  - top – higher
  - bottom – below
• frameborder - border around floating frame
  - 1 - turn on the frame
  - 0 - turn off the frame

This is what the “iframe” tag with attributes will look like:

If your browser doesn't support frames, you can insert the text " OOPS! Your browser does not support frames. » between tags .
It will look like this:

For example, let's add an iframe to the "content.html" file:

Home page

Site content - "Home page (content.! Your browser does not support frames.

Previous post
Next entry

In any text editor, make a new text file.

Enter the main tags, not counting the tags , which are not used in the file describing the frames. In tags indicate the title - SD Company:

Instead of tags in the file describing the frames, a pair of tags are used with the rows or cols attributes, which determine how the screen is divided - horizontally or vertically. As the values ​​of these attributes, you can use the numeric value of the height or width of the frame in pixels or as a percentage from 1% to 100%. For example, if you want to divide the browser window horizontally into two equal-sized frames, then the HTML code should be like this:

Please note: attribute values ​​are separated by a comma.

Vertical frame division

To divide the browser window vertically into two frames 200 and 600 pixels wide, you should write:

But the actual width and height of the frame window depends on the current monitor resolution. Therefore, if the user has a resolution set to, for example, 1024 x 768 pixels, in other words, the screen width is 1024 pixels, then part of the screen may remain blank. Therefore, it is recommended to set the frame sizes as percentages so that their sum is equal to 100%. If you still need to specify a fixed size in pixels for one of the windows, then you can not specify the size of the other window, replacing its value with the * logo. In this case, the browser itself will select the appropriate size for the second window.

Let's make two vertical frames to display our WEB site. For the first frame in which the menu will be displayed, we will set a fixed width of 160 pixels, and let the browser find the size of the second, replacing it with an asterisk *.

In the text editor, insert a blank line after the closing tag and enter the following code:

In this way, we specified that the browser window should be split vertically into two frames. Single tags are used to describe each frame individually , which must be inside the element …. An essential tag attribute is src, its value is the address of the document that should be in this frame. Because the first frame will contain the menu.html file, this tag should be written like this:

Insert a blank line after the opening tag and enter the designated tag.

The file other.html must be loaded into the second frame, so the second tag will be like this:

How to make a menu using frames

So that all other pages of the WEB site - list.html and others that may be created - can also be loaded into the second frame, you need to use the name attribute to assign this frame a name, which, being designated in the links of any document as the value of the target attribute will determine which frame the document should be loaded into. Let us recall that in the general case, when following a link new document opens in the same window. Specifically, so that when you follow the links in our menu, the pages open not in the first frame in which the menu is located, but in the second, we used in previous experience in menu links the target attribute with the value "frame": target="frame", where "frame" is the name of the second frame. And now the name “frame” should be assigned to the second frame, in which the other.html file should be expanded. Because the second tag in the final form it should be written like this:

Enter this code by inserting a blank line before the closing tag.

Assembling the main frame

Save the file in the WEB folder under the name index.html.

The name index.html must be assigned to the file with the main page of each WEB site. This particular file is opened by default when accessing a WEB node, unless a different file name is specified. On some WEB sites, the name of the main page may be index.htm, and index.html is displayed not as a page, but as a folder with file names. This needs to be clarified with the site administrator.

Now you can see how the created frames look.

Open the index.html file from the WEB folder in your browser. You will see that the viewer window is split vertically into two frames. The left frame displays the menu, and the right frame displays the other.html file.

Please note that each frame has its own scroll bars. You can cancel their display as needed. For this purpose enough in the tag specify the scrolling=no attribute.

Add the scrolling=no attribute to the tag describing the first frame:

You see, frames are a convenient means for placing information on WEB pages. But when using it, one should not lose a sense of proportion. A very large number of windows on the display does not improve the perception of information. Don't have more than three frames on your display and try not to use them unnecessarily.

The main disadvantages of frames

The main disadvantage of using frames is that such a page cannot actually be found search engines and properly you will not get guests on such a page. This is the main disadvantage. Frames also put a strain on the computer's processing power. Naturally, this is not very relevant in our time, but it is relevant for mobile devices, where the speed of drawing WEB pages still suffers. Let me remind you that at the end of 2010, WEB is used through mobile devices about 10% and this figure is growing every year.

Result

So, the first step of our work is completed - we made a WEB site from two WEB pages. Now, in order for it to become available to everyone, it needs to be placed on the Internet on one of World servers Wide WEB.

How to make a page with frames

In FrontPage, frames are called frames. The easiest way is to create a page with frames based on one of the ready-made templates available in the FrontPage program.

Select the menu command File - Make (File - New). A Task Pane with the active New task will appear in the right part of the program's working window.

In the New page section of the Task Pane, click on the More page templates link. The Page Templates dialog will appear on the display.

Select the Frames Pages tab.

This tab contains a set of templates for creating pages with frames. When you select a template, the initial view of the page is displayed on the right in the Preview field, and a description of the template is displayed in the Description field.

Select one of the templates, for example Contents, and click OK. A new page with frames will be created according to the selected template.

At the bottom of the newly created new_page_1.htm tab (new_page_1.htm) an additional No Frame button will appear. By clicking on it, we will see how the page will look in a browser that does not support working with frames. By default, the message text about the impossibility of displaying frames is placed there.

When a browser loads a page with frames, it reads information about the frames and then loads the original page into each frame. Therefore, after creating a page with frames, you need to set the original pages for the frames.

In the Design editing mode of the Page view, buttons are shown in empty frames.

Click the New Page button in each frame. New pages will be created inside the frames.

Using another button, Set Initial Page, you can select one of the previously made pages for the frame as the initial one.

Select the menu command File - Save (File - Save) to save new pages. The usual file saving dialogs Save As will appear on the display one by one for each page in which you need to specify file names. Specify, for example, the name LeftFrame for the source page of the left frame, the name RightFrame for the source page of the right frame, and the name FrameContainer for the page with frames itself.

If you chose the Contents template when developing a page with frames, then it already contains established connection between frames: activating a link placed in the left frame will cause the pages the link points to to load into the right frame. In this case, the right frame is called a motivated frame (target frame).

To check how the connection between frames works, let's place two text links on the page of the left frame. Let one of them link, for example, to the original page of the right frame, and the other to the main page of the WEB site.

Place the text cursor at the beginning of the page in the left frame and type the phrase Link to main page.

Select the typed phrase using the mouse or keyboard and select the menu command Insert - Hyperlink. The Create Hyperlink dialog box appears on the display.

In the list of WEB site files, select the home page index file and click OK. The entered phrase will be converted into a link.

Select the typed phrase using the mouse or keyboard and click on the add hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears on the display.

In the list of WEB site files, select RightFrame and click OK. The entered phrase will be converted into a link.

Switch to preview mode by clicking the Preview button at the bottom of the FrameContainer.htm tab.

If necessary, you can change the motivated frame for a single link or for all links in the current frame.

In the Design editing mode of the Page view, right-click one of the links in the left frame and in the displayed context menu Select the Hyperlink Properties command. The Edit Hyperlink dialog box appears on the display.

(Target Frame). The Target Frame dialog appears on the display.

In the Target setting field, you can specify a motivated frame or select one of the options in the Common targets list. The Set as page default flag allows you to use a selected motivated frame for all links on a page where no other one is obviously specified.

Click OK to close the Target Frame dialog box, and then click OK on the Edit Hyperlink dialog box.

Although frames do not contain their own visual parts, the page with frames and the frames themselves have a number of options that allow you to control their display.

Right-click anywhere on one of the frames and select Frame Properties from the context menu that appears. The Frame Properties dialog appears on the display.

In the Name field it is indicated internal name frame, it is also used when choosing a motivated frame for reference. The Initial page field specifies the page displayed in the frame when it loads. In the Frame size group of control parts, you can specify the width (Width) and height (Height) of the frame relative to adjacent frames (Relative), relative to the size of the browser window in percentage (Percent) or a fixed size in pixels (Pixels). In the Margins group of control parts, the indentation values ​​from the vertical (Width) and horizontal (Height) boundaries of the frame to the content inside the frame are determined. If the Resizable in browser flag is set, then a WEB site guest can change the frame size by moving the separator between adjacent frames with the mouse. In the Show scrollbars drop-down list, you can set the scrollbar display mode: if needed, in other words, when the page does not completely fit in the frame, never (Never) or always (Always).

Click the Frames Page button. The Page Properties dialog will appear on the display with open tab Frames.

The Show borders flag determines whether the frame's borders will be displayed. If the flag is cleared, the separating stripes between frames will not be visible in the browser. In the Frame Spacing field, you set the width of the borders separating adjacent frames.

Click OK to close the Page Properties dialog and then click OK on the Frame Properties dialog.

You can add new frames or remove existing ones from the page.

In page editing mode, select one of the frames by clicking on it.

Select the menu command Frames - Split Frame

(Frames - Split Frame). The Split Frame dialog box appears on the display.

Using one of the switches, select the split option: Split into columns or Split into rows.

Click OK. The area of ​​the current frame will be divided into two parts, and a new frame will be added to the page.

A new frame can also be created if, in page editing mode, you move the frame separator with the mouse while holding down the Ctrl button.

To delete a frame, select it by clicking on it with the mouse, and in the program menu select the command Frames - Delete Frame. The frame will be deleted.

Deleting a frame does not delete the page that was displayed in it. The last frame on the page cannot be deleted.

In the Save as type drop-down list, select FrontPage Templates.

In the File Name input field, enter the name of the template file and click the Save button. The Save As Template dialog will appear on the display.

In the Title input field, specify the title of the template, which will be displayed in the list of templates when developing a new page. In the Description input field you can briefly describe the purpose and type of the template.

Click OK. The template will be saved.

Now you can use your template when developing a new page with frames by selecting it in the list of templates in the Page Templates dialog. If, when saving the template, the original pages were installed in frames, then they will be used by default for all frames made based on the template.

Frames are convenient to use for navigating a WEB site or a section of a WEB site. A list of links in the form of text or pictures is usually placed in one of the frames, and pages are loaded in the other when links from the first frame are selected. Another option is to implement common borders and navigation menus, which we already covered. It is not immediately recommended to use frames and general boundaries - this can make navigation around the WEB site confusing.