Iframe and Frame - what they are and how best to use frames in Html. Using frames in HTML How to open documents using a link in a frame
The term "frame" came to us from in English. Translated, this word means “frame” and represents a separate area of the window. In its structure, such a section is a completely finished HTML document.
Individual frames divide browser windows into sections that are placed side by side. In this case, each frame is loaded with its own full page. Frame technology still causes a lot of controversy, but it must be said that the peak of its popularity has already passed. IN this moment this technology is deprecated and regular frames are no longer supported in HTML5.
History of technology
Today we can state that the decision to move away from working with frame technology has been finally made. The site https://www.w3.org/TR/html5-diff/#obsolete-elements clearly states that the usual frame, frameset and noframes tags for creating such a structure are deprecated. As an argument, data is provided that the use of such a structure negatively affects the usability of sites and their accessibility on the Internet.
But modern technologies support the IFRAME element. Its use allows you to insert frames into text blocks on pages. Moreover, such elements can be aligned relative to the text itself. An important point: you cannot change the size of built-in frames in principle. They do not have a corresponding attribute for resizing.
In the future, without leaps in technology, further use of frames is unlikely. And it is worth remembering that the leading organization for the standardization of Internet technologies - W3C - has clearly indicated that such structures should not be used by website developers.
That is, frames, in principle, should not be used to structure pages when creating new resources. But with the support and improvement of existing sites, knowledge of the features of the technology and their use will be very useful and productive.
Benefits of Frames
Among the advantages of frame technology are ease of use, high speed, and the ability to accurately position information in certain areas of the window.
The use of frames provides savings on the volume of transmitted traffic while working with the site. After all, when accessing another section of information, usually only one section of the page is updated, and not its entire code.
This structure provides interesting navigation options through resource content. After all, inside the browser window in adjacent frames you can view various information blocks. It is important for users to know that searching within a frame is equivalent to performing such an operation on a separate page.
While working with the site, you can dynamically change the size of a separate section, which is difficult to implement using other technological solutions.
Possible disadvantages
Problems with websites using frames accumulated gradually, but today they have reached a threshold level. Among the main disadvantages are:
Unsatisfactory usability. Today, the share of users of mobile devices and tablets with small screen resolutions is growing and already exceeds the number of those who visit sites from desktop computers and laptops. And here the use of frames creates serious problems with the adaptability of pages when displayed on various devices. This problem has no practical solution today.
Deterioration of site accessibility for various programs. An increase in the number of additional programs (for example, screen readers) reveals much worse accessibility of information for reading.
Pages are not displaying correctly. Often the layout of pages with such a structure looks incorrect in browsers from a design point of view. And this is due to the features of technology. From an SEO point of view, the use of frames in the HTML layout of a page is highly undesirable.
Availability of a single address for the entire structure. As a result, the internal pages of such a site cannot be bookmarked. This leads to inconvenience for users.
Incorrect indexing by search engines. The presence on a website of several full-fledged documents, from which one page is formed, significantly complicates the work of search engines. This leads to significant errors during indexing. As a result, incorrect definition of topics and page addresses leads to loss of critical content from indexing.
Disrespect. This is a rather unusual flaw for resources on the network. And yet it must be said that the fact that the layout of sites on frames is becoming obsolete leads to the fact that the authors and owners of such resources are considered retrogrades. But there are some exceptions. Even modern sites that host chat rooms usually use frames.
Indexing frames by search engines
The information that comes from search engines clearly tells us that sites with frames are indexed noticeably slower. In this case, errors often arise related to the structure itself. After all, each frame displays a full-fledged Internet page. And just such a part of the site may be included in the indexing database.
The negative aspect of such indexing is that when going to the inside of the page, the user usually does not see menus and other navigation mechanisms. And this is not surprising. You need to understand that updating the frame is not a solution to the problem in this case. After all, all navigation mechanisms are placed in another container.
Another problem is that often the main page of a container structure only contains a title, meta description tags, and a FRAMESET tag. And this seems logical - after all, meaningful content is located in separate documents. It is these that the site visitor will see on the page in frames.
But a search robot almost never indexes such a page. He does not find any content on it that is useful to visitors. Search bots are configured in such a way that they try to retrieve and index information placed inside the body tag. This is where the search for useful content for the user occurs. But on the frame page there is no such tag; it is replaced with FRAMESET.
This problem can be partially solved by using NOFRAMES. But on many sites, when accessing it, only information is given that the browser does not support frames. And to view the page you need to use another program.
Such cases create many problems for users who, when visiting a site, do not see the menu and other information that should be displayed. If frames are placed on a website, its parameters from an SEO point of view are reduced. At the same time, user behavior statistics indicate that the authority of the resource among search engines is falling. This definitely has a negative impact on website traffic.
It is especially difficult for search engines and indexing bots to process nested and multiple personnel structures. The fact that each container has all the features of a separate document, but does not contain full navigation and other information, further complicates the situation.
You can make the work of search engines easier by using correct linking on pages. In this case, you need to duplicate all the menu links so that they can be found within each individual part of the page. But this significantly complicates and slows down the work of optimizing the site and updating information on it.
The experience of many optimizers and webmasters also suggests that pages on frames do not receive high rankings in search results. This happens even if they are included in the indexing database.
Features of website promotion in frames
Some search engines index framed files incorrectly or very incorrectly. As a result, the index database is filled not with the addresses of parent resources (as it should be), but with links to child sites.
To minimize the problems of indexing sites based on frames, special tags and parameters are used when describing them. The main element of the container structure is the frameset. It is he who replaces the standard body; in the source code. Each individual container in the structure is described by a frame. Its quantity in the page code corresponds to the number of individual sections displayed in the browser window when viewed.
These tags should be placed on home page site, and then duplicate the content within each of them.
Areas of application of frames
Developers of HTML documents have a fairly wide choice of forms for displaying information on pages. Text and graphic information can be ordered and organized using lists, tables, or simply using alignment options, setting horizontal lines, and dividing into paragraphs. Sometimes these features are not enough and then you have to split the browser window into separate areas or frames. In a number of Russian-language descriptions of the HTML language, the term frames is used instead of the term frames. The frequency of use of both terms is approximately the same.
The choice of a frame structure for displaying information on the WWW is justified in the following cases:
if necessary, manage the loading of documents into one of the subareas of the browser viewing window while working in another subarea;
to locate information in a certain place in the viewing window that must always be on the screen, regardless of the content of other sub-areas of the screen;
to present information that is conveniently arranged in several adjacent sub-areas of the window, each of which can be viewed independently.
The given list does not exhaust all possible cases where frames can be applied, but is of a recommendatory nature.
Let's first consider typical uses of frames using examples of real-life HTML documents, and then turn to the rules for developing documents containing frames.
In Fig. Figure 5.1 shows one of the HTML pages of the Finmarket agency, which specializes in providing information from the financial and stock markets of Russia.
Rice. 5.1. A typical Web document with a frame structure
This page splits the browser window into three frames. Bottom part window occupies 20% of the height of the entire window and contains permanent information, which in this case is a graphical menu that allows you to access the most important sections at any time. This frame cannot change its size based on user commands and does not have scroll bars. Top part window (80% of the height) is divided horizontally into two frames. The left frame contains the table of contents of documents that can be viewed by the user. The right frame, which occupies most of the viewing window, is intended to display the documents themselves. When initially loaded, these two frames split the browser window horizontally at a ratio of 15% to 85%. This ratio can be changed by the user during viewing, which allows you to select the optimal frame sizes taking into account the content of the loaded documents. Each of these frames has its own scroll bar, allowing you to view the entire contents of the frame, regardless of the size of the frame itself, the entire browser window, or the fonts used. When you select any link in the left frame, the corresponding document will be loaded in the right frame. This structure allows you to simultaneously see on the screen both the table of contents of documents and the contents of the selected document.
Here, without explanation, is a fragment of the HTML code used to build a document with this structure:
This example shows the most typical use of frame structures, where one frame serves as a table of contents for documents and another is used to load their contents. Solving such a problem without using frames is usually done as follows. On one of the pages there is a table of contents, consisting of links to other documents or their individual fragments. When you click on such a link, the table of contents disappears, and the required document is loaded in its place, after reading which you usually need to return to the table of contents. When using frames, this return becomes unnecessary, since the table of contents is always located on part of the screen.
You can find it on the Internet
website of the electronic edition of the popular address and telephone directory "All Petersburg" in St. Petersburg.
The electronic version of the directory is available at http://www.allpetersburg.ru and allows you to find the necessary information based on user requests. This document page also has a frame structure and consists of two frames, the first of which is 100 pixels wide, and the second takes up the entire remaining width of the viewport. The frame located on the left side is used for a graphical menu that is constantly present on the screen, and also contains the Nevalink company logo. The second frame contains the document, which in this case is a user request form. The structure of this page is defined by the following HTML code:
Frames are very similar to tables - they both break up the browser window into rectangular areas in which some information is located. However, with the help of frames, you can solve not only the problem of formatting document pages, but also organize the interaction between them. The fundamental difference between frames and tables is that each frame must have its own separate HTML document, but the contents of all table cells are always part of the same document. In addition, the page displayed in the frame can scroll when viewed independently of the others. Each frame is essentially a separate "mini-browser". Unlike frames, the entire structure of which is always presented on the screen, tables may not completely fit in the window and can only be viewed in parts. It follows that if in HTML tables the total number of cells is practically unlimited and can reach several hundred, then the number of frames in a document usually does not exceed several units.
Advice
If you only need to format a document, then it is enough to limit yourself to using tables. If you need to solve more complex problems, for example, organize interaction between window subareas or create subareas that are permanently located on the screen, then it is convenient to use frames.
Ultimately, the choice of document structure - tabular or frame - depends on many factors and cannot be unambiguously predetermined.
There are alsopages that appear to be built similarly to the previous ones. For example, you can take page of a very popular worldwide collection of software products designed primarily for working with the Internet. Server address http://www.tucows.com. Note that the name of the server was determined by an abbreviation derived from the abbreviation of the full name of the collection - The Ultimate Collection of Winsock Software. Since the abbreviation tucows turned out to be consonant with the phrase two cows (two cows), images of cows are often found on the server pages, and the rating of software products is estimated in the number of mooings (“Moo”) and is graphically depicted as a row of the corresponding number of cows. Most of the server pages are built in the same way - on the left side of the window there is a list of available sections, and on the right side there is a list of software products for the selected section. At first glance, the structure of the document should look approximately the same as in the previous examples. However, this document does not use frames! This page is built using a table that consists of just one row with two cells. The table has no frame and only serves the purpose of formatting the page. The impression of a vertically split screen is created by using a background graphic containing vertical line, and not a table grid at all. You can verify this by viewing the page without loading images. The use of a table here is apparently due to considerations of greater accessibility of documents, since frames do not allow display in all browsers.
The disadvantage of this approach in this case is the need to repeat the entire list of sections (left side of the page) in each document, which slightly increases the file size.
A comparison of the examples above shows that the use of tables and frames can sometimes be interchangeable and determined by the wishes of the developers. Note that often when looking at a page with a document displayed on it, it is impossible to determine how it is built. The end user does not need to know the internal structure of the document, but when developing his own Web pages, familiarization with the source code of existing documents would be extremely useful. In the first example (see Fig. 5.1), the frame structure of the document is immediately visible - the presence of two vertical scroll bars already determines the presence of individual frames. The following two examples are very similar in appearance, and it is impossible to determine that the first of them is built using frames, and the second - using tables. Differences will only appear when working with them. In the example of a telephone directory, when scrolling a document, the left part of the window will remain in place, which is only possible if there is a frame structure. In the following example (a collection of software products), scrolling will shift the entire contents of the window.
You can view the document structure when working with the Netscape browser using the Page Info item (in versions 3.x of the Netscape browser this menu item was called Document Info) of the View menu (Fig. 5.2).
Rice. 5. 2
.
Netscape Browser View Menu
In addition, you can always view the HTML source code of the entire document by using the Page Source item of the View menu (or the View Frame Source item of the right-click context menu to view the HTML code of the document loaded in the selected frame).
Advice
You should not unnecessarily abuse the use of frames, and their number should not exceed three or four.
Often on real pages on the Internet you can see the following cases of using frames:two adjacent frames are used to load documents that are convenient to view simultaneously and compare with each other. Each of the two documents loaded into frames uses a tabular form for presenting information. As a result of this organization of data, each of the two tables can be viewed (or printed) separately, or studied in comparison with the other.
All the examples given in this section are taken from the pages of popular WWW servers and, perhaps, can serve as examples of the use of frames in HTML documents.
Subsequent sections of this chapter cover rules for writing documents containing frames.
Rules for describing frames
Let us now move on to consider the rules for writing tags used for documents with frame structures.
Let's first look at the complete HTML code that creates a document with medium complexity frames:
This example creates the framed page shown in Figure. 5.3. As you can see, this HTML code defines four frames. The top frame spans the entire width of the page and contains the heading. Next are two central frames, one of which is located on the left side and takes up 25 percent of the screen width, and the second takes up the remaining space. The last, fourth frame occupies the lower quarter of the screen. A separate HTML document is loaded into each frame, the name of which is determined by the SRC parameter.
As can be seen from the example, tags are used to describe the structure of frames
, And . Let's look at the purpose of these tags.
Rice. 5. 3
.
The result of the Netscape browser displaying the HTML document with frames shown in the example
Tag
Frames are defined in a structure called FRAMESET, which is used for pages containing frames instead of a BODY section regular document. Web pages composed of frames cannot contain a BODY section in their HTML code. In turn, pages with a BODY section cannot use frames.
Advice
Since framed pages do not have a BODY section, there is no way to set a background image and background color for the entire page. Recall that these settings are determined by the BACKGROUND and BGCOLOR parameters written in the BODY tag. However, this does not prevent you from loading documents with their own background settings into each frame.
Container of tags
And frames each frame definition block. Inside the container can only contain tags and nested tags .
Tag
has two parameters: ROWS (rows) and COLS (columns) and is written as follows:
.
Note
Some browsers allow additional tag parameters
You can define values for ROWS or COLS, or both. It is necessary to define at least two values for at least one of these parameters. If another parameter is omitted, its value is assumed to be 100%.
Advice
If in a tag If only one value is defined for ROWS and COLS, then this tag will be considered invalid and the browser will ignore it. In other words, it is impossible to determine , consisting of only one frame.
List of tag ROWS and COLS parameter values
is a comma-separated list of values that can be specified in pixels, percentages, or relative units. The number of rows or columns is determined by the number of values in the corresponding list. For example, record
defines a set of three frames. These values are absolute pixel values. In other words, the first frame (first row) is 100 pixels high, the second is 240 pixels, and the last is 140 pixels high.
Setting frame size values in pixels is not very convenient. This does not take into account the fact that browsers run on different operating systems and with different display resolutions. At the same time, it is possible to define absolute size values for some cases, for example, to display a small image with known dimensions. The best option would be to set the values in percentages or relative units, for example:
.
This example creates three frames that are positioned as rows across the full width of the screen. The top row will take up 25 percent of the available screen height, the middle row will take up 50 percent, and the bottom row will take up 25 percent. If the sum of the specified percentages does not equal 100%, then the values will be scaled proportionally so that the result is exactly 100%.
The values in relative units are as follows:
.
An asterisk (*) is used to divide space proportionally. Each star represents one part of the whole. By adding up all the values of the numbers next to the asterisks (if a number is omitted, then one is assumed), we obtain the denominator of the fraction. In this example, the first column will take up 1/6 of the total width of the window, the second column will take up 2/6 (or 1/3), and the last will take up 3/6 (or 1/2).
Remember that a numeric value without any characters specifies the absolute number of pixels for a row or column. A value with a percentage sign (%) specifies the proportion of the total width (for COLS) or height (for ROWS) of the viewport, and a value with an asterisk (*) specifies the proportional distribution of the remaining space.
Here is an example that uses all three options for setting values:
.
In this example, the first column will be 100 pixels wide. The second column will take up 25 percent of the entire viewport width, the third column will take up 1/3 of the remaining space, and finally the last column will take up 2/3. It is recommended to assign absolute values first in order from left to right. They are followed percentage values of the total size of the space. Finally, values are recorded that determine the proportional division of the remaining space.
Advice
If you use absolute COLS or ROWS values, keep them small so they can fit in any browser window, and pad them as needed. at least, a single value, specified in percentage or relative form, to fill the remaining space.
If the tag is used
, in which both COLS and ROWS values are specified, a grid of frames will be created. For example:
This line of HTML code creates a frame grid with three rows and two columns. The first and last lines take up 1/4 of the height each, and the middle line takes up half. The first column takes up 2/3 of the width, and the second - 1/3.
Container
can be nested inside another similar container, as was shown in the initial example. Let's consider further the use of the tag .
Note
Some sources on the HTML language indicate that the COLS and ROWS parameters of the tag are mutually exclusive. However, both Netscape and Microsoft Internet Explorer allow them to be used together.
Tag
Tag defines a single frame. It must be located inside a pair of tags
And. For example:
Please note that the tag is not a container and unlike
does not have an end tag. The entire definition of a single frame is done with one line of HTML code.
There are so many tags to record how many individual frames are defined when specifying the tag
. In the previous example, the tag two strings were given, so two tags needed to be written . However, this example is essentially useless, since none of the frames have any content!
Tag has six parameters: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING and NORESIZE.
Note
Some browsers allow you to use a number of additional tag parameters . An overview of the capabilities of the Netscape and Microsoft Internet Explorer browsers is given at the end of the chapter.
In practice in the tag Rarely are all parameters used at the same time.
Most important parameter- SRC (short for source). Quite often in the tag a single SRC parameter is specified. For example:
.
The value of the SRC parameter determines the URL of the document that will be loaded initially into this frame. Typically, this address is the name of an HTML file located in the same directory as the main document. Then the frame definition line will look, for example, like this:
.
Note that any HTML file specified in the frame definition must be a complete HTML document, not a fragment. This means that the document must have HTML, HEAD, BODY, etc. tags.
Of course, the SRC value can be any valid URL. If, for example, the frame is used to display a GIF image that is located on the server of the publisher of this book, then you should write:
.
Advice
Do not include any content in the document describing the frame structure.
Plain text, headings, graphics, and other elements cannot be used directly in a document that describes a frame structure. All contents of frames must be defined in separate HTML files, the names of which are specified by the SRC parameter of the tag .
The NAME parameter specifies a frame name that can be used to refer to this frame. Typically the link is set from another frame located on the same page. For example:
.
This entry creates a frame named "Frame_1" that can be referenced. For example:
Click here to download
document other.htm into a frame named Frame_1.
Note the TARGET parameter, which refers to the frame name. If a frame is not given a name, an unnamed frame will be created and it will not be possible to reference it from another frame. Frame names must begin with an alphanumeric character.
The MARGINWIDTH and MARGINHEIGHT parameters allow you to set the width of the frame margins. This is written as follows:
MARGINWIDTH="value",
where "value" is the absolute value in pixels. For example:
This frame has margins at the top and bottom of 5 pixels, and on the left and right - 7 pixels. Remember that we are talking about margins here, not borders. The MARGINWIDTH and MARGINHEIGHT parameters define the space within the frame within which no information will be located. The minimum acceptable value for these parameters is one.
Frames will automatically create and display scrollbars if the frame's contents do not fit entirely within the allocated space. Sometimes this breaks the design of the page, so it would be handy to be able to control the display of scrollbars. The SCROLLING parameter is used for these purposes. Recording format:
.
The SCROLLING parameter can take three values: YES, NO or AUTO. The AUTO value has the same effect as if there was no SCROLLING parameter. The value YES causes scroll bars to appear regardless of whether they are needed, and NO prevents them from appearing. For example:
.
Typically the user can resize frames as they view the page. If you place the mouse cursor on the frame frame, the cursor will take on a shape indicating the possibility of resizing and allow you to move the frame to the desired location. This sometimes breaks the structure of beautifully designed frames. To prevent the user from changing the size of frames, use the NORESIZE parameter:
.
This parameter does not require any values. Naturally, when the NORESIZE parameter is set for one of the frames, then the size of any of the adjacent frames cannot be changed either. Sometimes, depending on the layout of the frames, using the NORESIZE parameter on one of the frames will be enough to prevent any of them from being resized on screen.
Tag
The ability to work with frames was not intended in either the HTML 3.0 or HTML 3.2 standard. Here, until recently, there was a fairly typical situation when actually used features are actively used on many WWW pages, but are not part of the standard. This meant that browsers could legitimately ignore frames. With the advent of the HTML 4.0 standard, the situation has changed - now support for frame structures is enshrined in the standard. Note that most modern browsers recognized frames even before the advent of HTML 4.O. However, it is necessary to provide information to users using browsers that do not support frames. For such browsers, it is possible to provide alternative information that is written between a pair of tags And. It looks like this:
entire HTML document
Everything placed between tags And, will be displayed by browsers that do not have frame support capabilities. Frame-aware browsers will ignore all information between these tags.
Note that in real life, HTML page developers often do not use the tag's capabilities to create pages without frame structures, but simply create two versions of their HTML documents. For this option home page Typically you are offered the choice of loading a document with or without a frame structure. Then, depending on the user’s choice, only one version of the document is loaded.
Features of describing frame structures
One of the most important tags used when describing frame structures is the tag . A tag has a number of parameters, none of which are required or dependent on the others, but there are a number of things to consider when writing them.
It turns out that if you need to create a frame into which a document can later be loaded, for example, by command from another frame, you should use the tag write the SRC parameter. If this
the parameter is omitted, the frame will not be created, although space will be left for it. For example, a record like is quite logical and could define a frame named "B" into which no document is initially loaded. However, due to the absence of the SRC parameter, a frame with that name will not exist, so further attempts to load any document into it will remain unsuccessful, and the space in the window allocated for this frame will be empty. Moreover, some browsers (for example, Microsoft Internet Explorer version 3 for Windows Z.xx) will display an error message and exit when trying to load a document into such a frame.
The requirement for setting the SRC parameter cannot be explained logically, so it is best to simply take note of this fact. Then, even if there is no document that needs to be loaded into this frame from the very beginning, you should specify the name of a file in the SRC parameter. For example, such a file can be called empty.htm (empty), the contents of which will be the minimum possible correct HTML document, namely:
You can reduce this document to two tags: , which will also be a valid HTML document. Following the path of maximally reducing the size of an “empty” document, you can limit yourself to a file whose size is equal to one byte, which stores the space character (or any other non-displayable character). This file will not be a valid HTML document, but will not cause problems with most browsers. Further reducing the size of such a file to zero is not justified, since when it is loaded by the Netscape browser, it will display a warning message (Fig. 5.4) that the document does not contain data.
Rice. 5. 4
.
Warning message when uploading a zero-length file
At the same time, on this message you need to react by pressing a key or mouse button. Any time the document is reloaded or the browser window is resized, the message will appear again.
You can also specify the name of a non-existent file, but in this case the Netscape browser will display a warning message (Fig. 5.5), which will not prevent further work, but will lead to similar inconveniences.
Rice. 5. 5
.
Warning message when trying to download a non-existent file
Advice
Create a file called empty.htm that is one byte in size and contains a space character. Make it a rule when writing a tag always specify SRC=empty.htm if it is impossible to immediately specify the name of a specific file.
Examples of frames
This section provides some typical examples of frame definitions.
Let's return to the example given at the beginning of this section (Fig. 5.3). This example uses a nested structure
. External tag creates three rows of height, respectively 25, 50 and 25 percent of the total height of the viewport:
.
Within this definition scope, the first and last lines are simple frames:
Each of these lines fills the entire width of the screen. The first line at the top of the screen takes up 25 percent of the height, and the third line at the bottom also takes up 25 percent of the height. Between them, however, there is a nested tag
:
This tag defines two columns into which the middle row of the screen is divided. The row containing these two columns takes up 50 percent of the screen height, as defined in the outer tag
. The left column uses 25 percent of the screen width, while the right column takes up the remaining 75 percent of the width.
The frames for these columns are defined within a nested pair of tags
And, while the definition of frames for the first and last line is written outside this pair, but inside the outer in the appropriate order.
The record structure is easy to understand if you think of it as a nested block
as a separate element . In our example, the outer tag defines three lines. Each of them must be completed. In this case, they are filled first with a separate element , then - as a nested block two columns wide and then another element .
Now the question may arise whether the value of the SRC tag parameter can be set the name of the file, which, in turn, contains a description of the frame structure. Yes, this is acceptable. In this case the tag will be used to point to an HTML document that is a frame structure and is used as a separate frame.
Let's go back to the example and replace the nested
to a separate . Naturally, you will need two HTML files instead of one, since nested will now be located in a separate document. Here is the contents of the first (external) file:
Your browser can't display frames
The second file, named frameset.htm, contains the following code:
In this case, the top and bottom lines behave the same. But the second line is now a simple frame like the others. However, the frameset.htm file pointed to by the SRC parameter defines its own frame structure. As a result, the screen will display exactly the same as in the original example.
Note
It is in principle possible to create nested structures , using tags , which refer to the same file describing the frame structure, but this should not be done. This situation will lead to endless recursion and will not allow further work. Some browsers control this situation and prevent the possibility of failure. If the address written to SRC matches one of the previous addresses in the frame hierarchy, then it is ignored, as if the SRC parameter were not present at all.
Advice
Using Nested Structures in various combinations, it is possible to create almost any frame grid imaginable. However, remember to create a user-friendly interface and not just demonstrate your ability to work with frames.
Here's an example of creating a regular rectangular grid of frames:
This example creates a frame grid with two rows and three columns (Figure 5.6). Since a set of six frames is defined, it is also necessary to define six individual frames . Please note that frame definitions are given line by line. That is, the first tag defines the contents of the first column in the first row, the second defines the contents of the second column, and the third finishes defining the data for the last column of the first row. The last three frames then fill the columns of the second row.
Rice. 5. 6
.
2 by 3 frame grid
Note also that the sum of the percentage values in the COLS parameter is not 100, but only 90 percent. There is nothing wrong with this, since the browser will automatically proportionally change the width of the columns to eliminate this contradiction.
Features of navigation when using frames
Working with documents that have a frame structure has some features that you need to know. These features of JB are mainly manifested in navigation when loading documents. Significant differences in navigation are characteristic not only of different browsers, but also different versions the same browser.
The Netscape browser versions 3.x and 4.x, when you click the Back button, returns the document back to the frame that was last acted upon. The same actions will be performed if the Back item is selected when calling the context menu in any of the frames. Let us remind you that the context menu is called up by clicking the right mouse button. Thus, regardless of which frame the context menu was called in, pressing the Back button will cancel the last operation, even if it was performed in another frame.
The Netscape 2.x browser worked completely differently. The context menu contains the Back in Frame command, which returns the document to the current frame rather than undoing the last operation.
In any version of Netscape, you can bookmark a document contained in a selected frame. To do this, you need to select the Add Bookmark mode from the context menu mentioned above. If you simply select the Add Bookmark mode from the main menu of the browser, a bookmark will be made on the document with a description of the frame structure
, which will not accurately point to a specific frame. The ability to create a bookmark on a document of a separate frame does not mean that the same frame structure will arise when you continue to use this bookmark. The document pointed to by the bookmark will be loaded into a full window outside the frame structure.
Interaction between frames
The simplest form of viewing information on the WWW consists of reading pages and following links, in which the current document in the browser window is replaced by another document. When working with frames, you can organize a more user-friendly document loading scheme.
Interaction between frames is the ability to load documents into the selected frame using commands from another frame. For this purpose, the TARGET tag parameter is used<А>. This parameter specifies the name of the frame or browser window into which the document pointed to by this link will be loaded. By default, if there is no TARGET parameter, the document is loaded into the current frame (or window). This default can be overridden by specifying a tag with the desired value of the TARGET parameter. Specifying the name of the default frame to load into is very useful when a large number of links need to direct documents to a specific frame. A typical situation with a table of contents in one frame, links from which load corresponding documents into an adjacent frame, was shown at the beginning of this chapter (Figure 5.1). For this example in the section
file named LIST.htm, it is advisable to write the following line: . Otherwise, you would have to specify a TARGET parameter for each link.
Frame names must begin with a Latin letter or number. The name can be the name of an existing window or frame, or a new name can be specified under which a new window will be opened. There are four reserved names that perform special actions when specified. These names begin with an underscore (_): "_blank", "_self", "_parent", and "_top". Any other name that begins with an underscore is not valid.
TARGET="_blank" - ensures that the document is loaded into a new window. This window will not have a name, and therefore it will not be possible to load another document into it.
TARGET="_self" - the document will be loaded into the current frame (or window). This entry should be used to bypass the default specified by the tag .
TARGET="_top" - causes the document to load into the full window. If the document is already in a full window, then this value has the same effect as"_self".
TARGET="_parent" - causes the document to be loaded into the area occupied by the parent frame of the current frame. If there is no parent frame, this parameter value has the same effect as"_top" .
Note
Some HTML sources erroneously state that if a frame has no parent, the value "_parent" is equivalent to "_self". This statement is not always correct.
Warning
The reserved frame names "_blank", "_self", "_parent" and "_top" must be written in lowercase Latin letters. Note that such exactingness is unique to Netscape. Microsoft Internet Explorer correctly recognizes reserved names written in any case.
Here are examples of interaction between frames and individual browser windows. Consider the following HTML code:
Using Frames
This HTML document describes a structure consisting of three frames named "A", "B" and "C". Frame names will be needed later to organize links between frames. Note that the frame named "A" in in this example there will be no references, so it could have been left without a name at all. When you load the above document into a browser, the frames will display the information contained in the files identified by the SRC parameter. Frame "A" will receive the contents of the frame_a.htm file, and the other two frames will receive data from the empty.htm file, which has no data to display. Let us remind you once again that the HTML document describing the structure of frames does not have a section
This document is a complete HTML document with sections
And and, in turn, has links to a file called test.htm, located in the same directory as the frame_a.htm file.
The text of the test.htm file is extremely simple:
Test document
Test document text
The file frame_a.htm, the contents of which were loaded into frame "A", has six links to the same file test.htm with different values for the TARGET parameter.
Let's consider the actions that will occur when implementing these links. The first link with the value TARGET="B" will load the file test.htm into a frame named "in". Note that after implementing any of the six links, the Netscape browser will automatically color all six of them a different color, since they point to the same file. Microsoft Internet Explorer only marks links that are actually implemented.
The second link will do the same for frame "C". Initially, there is nothing in frames “B” and “C” (more precisely, the contents of the empty file empty.htm are loaded). The implementation of the first and second links will fill these frames.
The third link with the value TARGET=MD" will lead to the formation of a new browser window with the name "D" and loading the test.htm file into it. Note that the form of writing this link is no different from the first two. The difference is that in the first In two cases, references were given to existing frames, the names of which were defined in the file with the frame structure, and in this case the reference was given to a non-existent object. If this reference is made at least once, then a window with the name "D" will be created and repeated clicking on the link will only reload the data into the now existing window "D". Of course, the user can close it at any time and re-create it by selecting this link. Figure 5.7 shows the situation after the first three links have been implemented. Recall that the location and the sizes of windows on the screen are determined by the user.
Rice. 5. 7
.
The situation obtained after sequential implementation of the first three links available in the left frame
The fifth link with the value TARGET="_top" will load the document in the full window instead of the entire frame structure. With this value of the TARGET parameter, a new window is not created. Returning to the frame structure is possible by clicking the Back button.
Note
The names of frames or browser windows should not be confused with the names of downloaded documents. The names of the frames are not visible anywhere when viewed; they are required only to organize interaction and are therefore hidden from the user. You can see them only when viewing the source text of HTML files.
Advice
Let us remind you that the names of downloaded documents are specified by the tag . If a document is loaded in a full window, its name is displayed at the very top of the browser window. If a document is loaded into a frame, then its name is not displayed anywhere, and the title of the document containing a description of the document’s frame structure will still be located in the upper part of the window. Therefore, the names of documents intended to be viewed in frames are not very important. For example, in Fig. 5.7 the same document is loaded into frames “B” and “C”, as well as into a separate window named “D”, while the name of the document is visible only in window “D”. However, it is hardly recommended to omit the names of documents loaded into frames, as they may appear, for example, in the Bookmarks list when creating a bookmark for a document located in a frame or list of viewed documents.
Let's look at another interesting example of organizing interaction between frames and browser windows. Let there be the text of the main loaded HTML document:
Using window names
A document with a frame structure into a new windowА>
Using Frames
Please note that if the main document is a standard HTML document, then the frame.htm file loaded from a link from the main document contains the frame structure and in turn links to the empty.htm file.
After loading the main document, the browser window will look like shown in Fig. 5.8 (left window). The entire document consists of two links. Let's follow the first link. A new window will be created with the name “D”, in which the text of the test.htm file will appear (Fig. 5.8, right window). Repeating this link will only reload the data in window "D".
Rice. 5.8. Example of interacting frame windows
Let's follow the second link. A new window will be formed without a name, into which the frame.htm file will be loaded, defining two frames with the names “C” and “D” (Fig. 5.8, bottom window). There is nothing in both frames (more precisely, an empty document empty.htm is loaded). Notice that there is now an open window named "D" and a window with frames, one of which is also named "D". Let's follow the first link again. Unlike the first case, data will be loaded not into window “D”, but into a frame named “D”. The result of all the described actions is shown in Fig. 5.8.
Note
The appearance of opening windows and their contents can sometimes even depend on the order of user actions. Working with documents whose behavior is difficult to predict usually causes justifiable irritation for the user and indicates a lack of thoughtfulness in the data structure by the developers.
If you change the order of actions, i.e. first execute the second link, and then the first, then the window named “D” will not appear at all! This will happen because after implementing the second link, a frame named "D" will be created and there will be no need to open a new window for the first link.
This example is not a role model at all, but only shows the possible complexity of organizing interaction. On the contrary, you should try not to unnecessarily complicate the organization of data, much less create situations in which the result changes depending on the order of the user’s actions.
Advice
Avoid collisions in frame and window names. Although it is not formally prohibited to have frames with the same names, it can lead to confusion.
Warning
Frame and window names are compared in a case-sensitive manner. So, for example, frames named "frame_1" and "Frame_1" will be different.
Examples of more complex interactions between frames
Quite simple typical examples of interaction between frames were discussed above. The tasks of creating new windows, replacing the contents of individual frames, as well as displaying a document in a full window with the destruction of the entire frame structure were considered. Examples are given of using custom frame names, as well as the reserved names "_blank", "_self" and "_top". Using the last reserved name "_parent" is more complex and will be described below.
This section will look at more complex options for interaction between frames. In particular, replacement of the contents of several adjacent frames will be implemented.
One of the most common uses of frames, which has already been mentioned in this chapter, is the case of two frames, one of which contains a list of links, and the other contains the documents themselves (Fig. 5.1).
Let's try to expand the formulation of the problem. Suppose you want to display on the screen the contents of a fairly large document consisting of chapters divided into sections. A typical example is technical literature on a particular topic. Let us describe the desired presentation of such a document on the screen. Let's divide the screen into three frames, one of which will contain a list of book chapters, the second - a list of sections of the selected chapter, and the third - the text of the selected section. When you select a link in the second frame, the contents of the third frame should change. The implementation of this requirement is trivial. When you select a link in the first frame, the contents of both the second and third frames should change simultaneously. At first glance, implementing this task in HTML is impossible (without using programming in JavaScript or others), since when a link is executed, only one document is loaded, and not two or more. Nevertheless, solving this problem is quite possible.
Let us show a possible solution to such a problem using a simple example. Suppose you want to display three frames on the screen and load some documents into them. Let's set the task of creating links in each of these frames, the implementation of which, for example, swapped the contents of two frames. Let the first frame take up 50% of the window's width and 100% of its height and position it on the left side of the window. The right half of the window is also divided horizontally in half and contains two other frames. This structure is described by the following code:
Using this HTML code, the required structure will be created, but solving the problem is impossible. It is necessary to remove the nested structure
into a separate file, and in this HTML code describe a frame that refers to the created file. Then the text of the source document will look like:
Example of interaction between frames
Created file with nested structure
has the name 1_2.htm and contains the following code:
1-2
At first glance, nothing has changed at all. In both cases there are three frames into which the documents left.htm, 1.htm and 2.htm are loaded respectively. However, when the frames interact, the difference will appear. If in the first case none of the frames has a parent frame, then in the second case for two frames the parent will be a frame named "Two_Frames". Therefore, if in any of two frames you apply a link with a TARGET parameter value equal to "_parent", then the result will be different for the first and second cases. For the first case, implementing such a link will load the document into a full window, replacing the existing frame structure. This is where the "_parent" value property comes into play, which acts like "_top" in the absence of a parent frame. In the second case, a frame named "Two_Frames" will be replaced, which occupies the right half of the screen and essentially consists of two frames.
The second case formally differs from the first also by the presence of a frame named "Two_Frames" to which references can be made. It is precisely this feature that will allow us to solve the problem.
Here is the contents of the left.htm file, which is initially loaded into the first of the frames under consideration:
Left frame
documents in two frames located on the right side of the window.
Note that the text of files 1_2.htm and 2_1.htm differ only in the order of links to files 1.htm and 2.htm.
Let us now consider the construction of a document loaded into the left frame. It contains two links with the TARGET="Two_Frames" parameter. The implementation of any of these links creates two frames at the location of the “Two_Frames” frame (this is the right half of the screen), loading documents 1.htm and 2.htm in one order or another. Thus, when choosing option 1-2, document 1.htm is loaded into the upper right frame, and 2.htm into the lower right frame. When you select option 2-1, the order of the documents changes. As a result, the alternating selection of options creates the impression that the documents in the two frames are changing places. This is exactly the effect we sought to achieve (Fig. 5.9).
The contents of documents 1.htm and 2.htm do not matter for the described example. However, for example, instead of trivial documents, we will create documents with links that implement the same actions.
Text of file 1.htm:
Document 1
Document 1
Option 1 -2
Option 2-1
File 2.htm differs from 1.htm only in the header.
There are two links with the value TARGET="_parent" that point to the parent frame. These links could also be written with an explicit name of the parent frame, i.e. TARGET="Two_Frames", but using an implicit name is usually more convenient. For example, if you exclude links from the left frame (document left.htm), you could omit the frame name "Two_Frames" specified when describing the main frame structure. This would create a frame with no name, but the links from documents 1.htm and 2.htm with TARGET="_parent" would still work correctly.
Advice
Whenever possible, use implicit frame naming. For example, "parent","top","self" instead of specifying specific names.
Rice. 5.9. Interacting frame windows with the effect of changing loaded documents
Difference between frames and browser windows
When working with frames, the question arises about the fundamental difference between organizing the frame structure of a browser window and creating multiple windows. At first glance, it might seem that you could get by with the ability to create multiple windows, since working with windows and frames is very similar. Each frame requires a separate document to be loaded, has the ability to scroll content independently, and can be modified by commands from other frames. These properties of frames are similar to those of browser windows. With a tabular organization of data, it is impossible to achieve such freedom of action.
However, there is a significant difference between frames and windows. With frame organization, the division of the viewing area into frames is performed by the HTML document itself, indicating the dimensions and their location. When viewing, the user can change the size of frames, unless this is prohibited in the description of their structure. The arrangement of windows is determined by the general rules of working with the Windows system - the user can expand any window to full screen, minimize it into an icon, or arbitrarily set its size and location. Windows, unlike frames, can overlap. This wealth of choice has its downside - you need to manually position windows on the screen each time and resize them to achieve the optimal viewing option. In the case of frames, the optimal size ratio is usually specified by the developer in the description of the frame structure and often does not need to be changed.
Advice
Although frames cannot provide all the possibilities for working with individual windows, their rational organization will create maximum convenience for the user.
Working with windows also has other disadvantages. Creating each window requires a lot of memory. In Netscape, each window is essentially another copy of the browser, complete with a full set of buttons and menus. The same situation is typical for Microsoft Internet Explorer.
Note that the organization of individual windows in browsers is done differently. Creating a new window with a document results in the appearance of a separate task in the Windows system, as you can see when viewing the list of running tasks. Therefore, switching between windows can be done in the same way as switching between different tasks, for example by pressing a keyboard shortcut +.
Many popular Windows applications have the concept of a document window. Examples include the Microsoft Word word processor or the graphics program Paint Shop Pro and many others. Each of these applications allows the simultaneous use of several windows with data and, as a rule, there is a Window menu, which provides a list of windows and gives the ability to switch between them. The creation of a new window in such applications usually occurs when opening an existing file or creating a new one. However, in these programs, when a new window is created, a new running task is not created.
Netscape also has a Window menu that lists existing windows. (In Netscape 4.x versions, this feature is provided by the Window item on the Communicator menu.) Let's return to Fig. 5.8. In this example, three windows are open at the same time, each of which is essentially a separate browser. However, for the user, they are all windows of the same browser that can interact with each other. In any of these windows, you can open the Window menu and see a list of three windows. In Fig. Figure 5.10 shows the situation when this is done for the bottom window.
Rice. 5.10. Opening Frame Windows in the Netscape Browser
Each window can be closed separately (using the Close command from the File menu). To finish working with the browser in any window, you can open the File menu and select Exit (Fig. 5.11).
If several windows were open, then all of them will be closed, but before this a warning message will appear (Fig. 5.12).
Each browser window can have its own settings (though not all). Look at fig. 5.11. Two windows are open, one of which is divided into three frames. The same document is loaded in two of the three frames, as well as in a separate window. The ability to independently configure the parameters of each window allows you to display the same document differently. In the example above, the font size of the document in one window is larger than in the other. This effect is achieved by setting different encodings for each window (the Document Encoding item of the Options menu or the Character Set item of the View menu for version 4.x), with both encodings using the same font, but of different sizes. Changing any item in the General Preferences menu affects all windows.
Rice. 5.11. Quitting the Netscape Browser
Rice. 5.12. Warning about closing windows in the Netscape browser
Additional browser features
All of the above frame description tags with the corresponding parameters are implemented almost identically in the Netscape and Microsoft Internet Explorer browsers, however, each of these browsers allows you to additionally use its own unique tags or parameters.
Netscape Browser Features
The Netscape browser, starting with version 3.0, allows three additional options: BORDER, FRAMEBORDER, and BORDERCOLOR. The BORDER parameter applies only to the tag
. The value of the BORDER parameter determines the thickness of the borders between frames in pixels.
The FRAMEBORDER parameter can be used both in the tag
, and in the tag and determines the presence of a frame between frames. This parameter can be Yes or NO. If the parameter is written in the tag , then its effect applies to all frames in this group. For an individual frame, the value can be overridden. The default value is Yes.
Note that the BORDER and FRAMEBORDER parameters operate independently of each other. For example, if FRAMEBORDER is set to NO and BORDER is set to a value other than zero, then the border between frames will not be drawn, but the space specified by the BORDER parameter value will still be allocated for it.
The BORDERCOLOR parameter can be used as in the tag
, and in the tag and defines the border color, which can be specified by the color name or its hexadecimal representation.
Here's an example:
The first line of this HTML code specifies three frames, with space between them for a 10-pixel thick frame (Figure 5.13).
Rice. 5.13. Drawing borders between frames in the Netscape browser
Between frame windows "A" and "B", no frame is drawn due to the NO value of the FRAMEBORDER parameter, however, the color red is defined for the frame. For the last frame "c", the FRAMEBORDER value is set to Yes and overrides the value set on the first line. Therefore, between the frames named “B” and “C”, a red frame with a thickness of 10 pixels will still be drawn.
Note
If borders between frames are not drawn, the Netscape browser will not allow frames to be resized by dragging them with the mouse, even without the NORESIZE parameter. For Microsoft Internet Explorer the situation is different.
Note that frames without borders are not used very rarely. It should be remembered that the absence of frames does not prevent the appearance of scroll bars (Fig. 5.14).
Rice. 5.14. Scrollbars in frame without borders
Microsoft Internet Explorer Browser Features
The Microsoft Internet Explorer browser allows you to use the FRAMEBORDER parameter for the same purposes as described above, but does not allow you to set the color and thickness of the frames. However, only the numeric value "O" can be used as a value for the FRAMEBORDER parameter to cancel drawing a frame, or a non-zero numeric value to draw a frame.
The difference in the rules for setting the values of the FRAMEBORDER parameter for different browsers is very unpleasant. Try, for example, setting FRAMEBORDER=Yes. This entry is correct for Netscape, but for Microsoft Internet Explorer it will result in the absence of a frame. The previous example (Fig. 5.13) when viewed in Microsoft Internet Explorer will be presented without a frame.
Advice
It is recommended to always write the value of the FRAMEBORDER parameter in numeric form, for example, FRAMEBORDER=0. This follows the rules for writing a parameter for Microsoft Internet Explorer, but violates the rules for Netscape (although it is correctly perceived by the latter).
Note
If the frames between frames are not drawn, then the Microsoft Internet Explorer browser (unlike Netscape), in the absence of the NORESIZE parameter, will allow you to “touch” resize the frames by dragging the frames with the mouse. You can find the place where the frame should be by changing the shape of the mouse pointer.
The Microsoft Internet Explorer browser allows the use of an additional FRAMESPACING parameter written in the tag
, the value of which determines the number of pixels between frames to be left blank.
Let us give an example, the display result of which is shown in Fig. 5.15.
Changing the distance between frames
Rice. 5.15. Empty space between frames in Microsoft Internet Explorer
Note
Unfortunately, many HTML language descriptions erroneously state that the FRAMESPACING parameter must be used in the tag . Microsoft Internet Explorer only allows this parameter to be used in a tag .
Floating frames
Microsoft Internet Explorer browser allows the use of a unique tag
In addition, the following additional parameters can be used to set the position and size of the floating frame in the document: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Their purpose and order of use coincides with the corresponding parameters for embedded images, which are specified by the tag .
Here is an example of using floating frames:
Using floating frames
An example of using the concept of floating frames
СЕМТЕК>
Your browser does not allow floating frames to be displayed
Microsoft Internet Explorer is the first browser (and so far the only one) that supports so-called "floating" frames.
These frames can be placed anywhere on the screen, just like graphics and tables.
The frame to the right of this text is placed on the page using a special tag . Right alignment was specified when creating the frame.
The result of displaying this example by the Microsoft Internet Explorer browser is shown in Fig. 5.16. Browsers that do not support the concept of floating frames will, for this example, instead of displaying the contents of the float.htm document, display the text "Your browser does not allow displaying floating frames."
Rice. 5.16. Floating frame in Microsoft Internet Explorer
Note that the concept of floating frames is similar in ideology to embedded images or tables. Here, another HTML document is completely embedded in the desired place in the HTML document.
Advice
Currently, the use of floating frames is limited to a single browser - Microsoft Internet Explorer version 3.0 and higher. Please note that users of other browsers (particularly Netscape) will not be able to see the contents of the iframes.
Tools for creating documents containing frames
An HTML document containing frames, like any other document, can be created or edited manually using any available text editor. Most specialized HTML editors either do not have visual framing capabilities or have very limited capabilities. There are several special editors that are focused on creating frames. Let us briefly describe the capabilities of some of them.
FrameGang frame editor
One such editor is the FrameGang utility, developed by the Australian company Sausage Software, which is better known for its popular HTML editor HotDog.
Information about this software product can be obtained at http://www.sausage.com, as well as from the collection of software products for the Internet (at http://www.tucows.com or any other of several dozen mirror servers scattered around the world).
The FrameGang utility is an addition to any HTML editor or regular text editor running in the Windows environment, which allows you to visually design the necessary frame structure and then generate the corresponding HTML code. The resulting HTML code can be transferred to the HTML editor via the Windows clipboard (Clipboard). The FrameGang program will allow you to quickly build the desired frame structure.
Let's look at the program's capabilities. After installing this program in Windows and launching it, you are asked to select one of two possible frame structures of the first (top) level - columnar arrangement of frames (Columns) or rowwise (Rows), and also determine their number. In the future, each of the first-level frames can, if necessary, be divided into several second-level frames. A larger number of frame levels is not provided, but this is not a significant limitation, since in practice more than two levels are rarely used.
As an example, let us select four frames arranged in columns. Next, you should create a structure of second-level frames, which is done by splitting existing frames in the opposite direction. For this example, frames can only be split horizontally. The creation of second-level frames is performed in the Add menu item, the implementation of which adds the next frame to the current one.
Please note that funny pictures in frames do not carry any meaning and serve only to fill empty space. Their drawing can be canceled in the Options menu. We also note that the very name of the manufacturer (sausage - sausages) and the name of some of its software products (HotDog - does not need translation) determined the interface style of this package - in many menu items there is an image of sausages.
After defining the structure of the frames, you need to set their sizes. This is done by simply moving the borders of the frames with the mouse in the same way as is done to resize Windows windows. The set dimensions for the current frame are displayed as a percentage in the windows named Width and Height. If you need to set frame sizes not in percentages, but in pixels or relative units, you must change the resulting HTML code manually outside the FrameGang program.
Next, for each frame you need to set its name (Name), which can be omitted, the URL of the document initially loaded into this frame (Frame URL), and also select the value of the Resizeable Frame Border parameter and the scrolling parameter for the contents of the frame (Frame Scrolling).
At any time, you can view the frame structure being created in the selected external browser without leaving the FrameGang program. The Preview button is used for this. Setting the browser name is done in the Options menu. After setting all the parameters, you should generate HTML code corresponding to the selected frame structure, which will be written to the Windows clipboard (HTML Compile button). The resulting code can be pasted from the clipboard into the desired place in the HTML file when working in any editor.
The Save and Open file buttons allow you to save and read the file only in a special encoding specific to the FrameGang program and not intended for any other use.
Below is the HTML code generated by FrameGang for the example described:
To obtain a correct HTML document, it is enough to enclose the resulting code between tags And. You can add a document header section
, in which to define the necessary data, for example, the title of the document (remember that the title of the document is written between the tags And). Note that modern browsers can work correctly even if some of the necessary tags are missing. If the above HTML code is saved as a file with the appropriate extension, even without adding any tags, then both Netscape Navigator and Microsoft Internet Explorer will be able to display the document correctly.
The FrameGang program allows you to visually design frames, is quite convenient and easy to use, but is not without some drawbacks. In particular, there is no way to specify the size of frames by writing the required numbers in the Width and Height windows, since they only display the sizes set when moving the frame boundaries with the mouse. The generally accepted frame parameters MARGINWIDTH and MARGINHEIGHT are not set. There is no way to write a file in text format to disk, which makes it impossible to use this program offline.
Frame-It frame editor
Another specialized frame editor is Frame-It, information about which can be found at:
http://www.iinet.net.au/~bwh/frame-it.html
Working with this program is in many ways similar to the previous one. First you need to determine the basic structure of frames and their number. Next, each frame, if necessary, is divided into several, forming second-level structures. Just like the previous program, the number of frame nesting levels is limited to two.
For each frame, all necessary parameters are set by filling in the appropriate fields. Unlike the previous program, it is possible to set the values of the MARGINWIDTH and MARGINHEIGHT parameters. In addition, the Invisible Frame Borders flag has been introduced, which, when set, generates the following code fragment:
FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".
After setting the required frame parameters, you can save the generated HTML code to a file or write it to the Windows clipboard. The generated code will contain not only a description of the frame structure, but also a start tag , as well as a couple of tags And, between which information is written, intended for browsers that do not display frames.
For a specific example, the following code will be generated:
FRAMESACING="0">
with frame structure
If in this example you clear the Invisible Frame Borders checkbox, the generated code will change significantly:
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
Your browser can't show documents
with frame structure
Information about using frames on the WWW
For information about frames, you can refer to the following addresses on the WWW:
How to insert a page into an HTML page? To do this you need to use , which creates an inline frame in the current document that displays another HTML document.
Display
Display block.
Example code
Powerful yet easy to use
Back in the bad old days there was a lot of web design elements that spoil the life of every developer. They were almost always a bad design approach. Fortunately, element has been deprecated in HTML5. But or " inline frame» is still available. Will it be deprecated in the next version? Maybe we should avoid it? There are several valid uses of this element when creating an HTML page. But you need to understand what it is and how it works to avoid mistakes.
Similarities and differences And
Both of these elements allow you to create a separate HTML document. A link to the content of the document referenced by the current web page is specified in the src attribute.
. . . . . .
The main difference between And thing is ensures compliance with the rule that the HTML document is a priority. Content appears inside an element that is part of the current document. As an example, consider this embedded video taken from YouTube:
The video is clearly on the HTML page and not in a separate panel. element broke this paradigm and allowed the document to exercise control over the browser window, breaking it into several small panels (frames), each of which displays a separate document. All other differences between and follow from this basic difference.
Don't remake frame-based layouts with iframes
Someday you may be faced with the task of updating an old website that was built using frames. You might want to use and a fixed layout width to recreate the same nightmare of independent panels and sills. But you won't be able to use the target attribute to open a link in a separate frame. You can start looking for JavaScript solutions. Please, do not do that.
Good (and terrible) uses
There are several valid use cases to create an HTML page:
embedding third-party media content;
embedding your own media content through a cross-platform document;
embedding code examples;
embedding third-party “applets” as forms of payment.
Here are some terrible use cases: :
Photo gallery;
forum or chat.
If you need to embed independent, pre-existing HTML documents into the current one, use . If you're building everything from scratch, there's no reason to split the page design into multiple separate documents. Especially if they aren't actually independent pieces of content.
Sets a number of restrictions on the content loaded into the frame. Set before how to create an HTML page.
scrolling
yes no auto
Determines whether to show scrolls in the frame or not. Deprecated in HTML5. Use CSS instead.
Name
Name
Specifies the name of the frame.
Align
left right top middle bottom
Determines the frame's alignment relative to surrounding elements. Is outdated. Use CSS instead.
frameborder
yes (or 1) no
Used to enable the display of a border around the frame. Deprecated in HTML5. Use CSS instead.
longdesc
URL
Used to specify the URL of a page that contains a long description of the contents of the frame. Is outdated. Use CSS instead.
marginwidth
pixels
Used to control the width of the padding from the content to the frame border. Is outdated. Use CSS instead.
src
URL
Specifies the document URL to display in the IFRAME.
vspace
pixels
Sets the vertical margins from the frame to the surrounding content. Is outdated. Use CSS instead.
width
pixels %
Defines the width of the frame on an HTML page.
This publication is a translation of the article “ ", prepared by the friendly project team
Hello, dear readers of the blog site. Today we will talk about frames in HTML. It’s clear that we’ll start from the beginning, namely with what kind of animal this is. We’ll also talk about the present (Frame) and future (Iframe) of these elements in the current version of the hypertext markup language and in the new Html 5 standard with .
At the end of the article, after a detailed description of the process of creating built-in frames and their classic structure in Html code (already rarely used), we will touch on the relevance of building a site on them, and also discuss possible ways of using them in the current period of time using the example of my blog.
What is it and how does Iframe differ from Frame?
What is it? It turns out that they can be used not only on websites, but also in any applications to programs, but they differ in that the window of a web page or application will be divided into several areas, into each of which a separate document is loaded. Moreover, these frame areas behave independently of each other.
Probably the most obvious example of their use, which almost all of you have encountered, are the so-called help files that many programs installed on your computer have.
The file with the help menu is loaded into the left window, and the document corresponding to the selected menu item is displayed in the right window. It is noteworthy that this structure allows you to avoid re-loading the file with the menu into the left window when opening a new document in the right one. This is exactly what it consists of main advantage of using frames in HTML.
Actually, the very name of these elements should be interpreted as an independent window. With the help of frames, we have the opportunity to split one large window into several fragments, which in turn can serve as receivers for separate documents independent of each other (pages, texts, images, videos, etc.).
How is a frame structure created in hypertext markup language? If we talk about the Html 4.01 standard (according to the classification), which is the main one at the current time, then three elements are used for this - Frame, Frameset and Noframes.
Iframe - built-in frame in the Html 5 standard
If we talk about the Html 5 standard (our future, some elements of which are already supported by many browsers), then there will be no Frame, Frameset and Noframes tags, as well as the classic frame structure; instead, there will be one single Iframe tag (embedded frame) , which we’ll talk about at the beginning, and then we’ll turn our attention to the classic scheme from version 4.01, which is actually in use now.
Iframe, unlike the classics discussed below, does not require replacing the Body tag with Frameset tags. Those. this tag can be inserted on regular pages, for example, inside a paragraph or anywhere else. At its core, this element is very similar to the Img tag we have already considered.
It is an inline element with replaceable content because it behaves exactly like an inline element, but it displays extraneous external content. There are only four such elements in the HTML language - Img, Iframe, Object and Embed. Therefore, our hero implies the presence of an external file that will be loaded into an area whose size is set using the attributes of this tag.
That. An Iframe is a sink element into which an external object (such as a video) is loaded. And to indicate the path to this file, which should be loaded on the page, use the special Src attribute. But unlike Img, the Iframe element is paired, i.e. there is also a closing tag:
This example shows the output on a Youtube video page using an Iframe. In order to limit the area of the frame (window) where the external file will be loaded, attributes are provided Width and Height, whose values are specified in pixels:
Those. this tag creates an area into which some external object is loaded (it doesn’t matter whether it’s from your site or from another resource). The width and height of the area are specified using Width and Height, and the Src attribute specifies the path to this object.
The Iframe element inherited all these attributes from similar inline tags with replaced content (such as the Img already mentioned above). Well, he also took attributes from the pictures Hspace and Vspace, which allow you to set indents from the borders of the frame to the text that wraps around it.
It is also significant that the alignment of the built-in frame is carried out in exactly the same way as we could see when studying images in Html - . All the same Align, but for the Iframe tag with possible values Bottom, Top, Middle, Left and Right.
But this element also took several attributes from the Frame tag from the classic frame structure, which we will talk about in great detail below in the text. These attributes include Name, the value of which can be used as a value so that the document you need when clicking on a link opens in the window of this frame (read more below).
Also in Iframe, the Frameborder attribute migrated from the Frame tag, which has only two values - either 0 (the frame around the frame is not displayed) or 1 (the frame is visible). The default value is Frameborder=1, so to remove it you will need to enter Frameborder="0":
The Scrolling attribute has also been transferred from Frame to this element, which has a default value of Auto - scroll bars in the frame will appear as needed when the content is larger than the size of the window intended to display it.
Well, the Marginwidth and Marginheight attributes also moved from the Frame element. They will be discussed in detail below in the text, but in a nutshell - they allow you to set the indentation in width and height from the edges of the frame to the content that is placed in it.
As I already mentioned, a clear example of using an Iframe is:
By inserting an Iframe directly into a web page, you will receive an output of a video from YouTube. We conclude that this element is a cross between inline elements with replaced content and, in fact, classic frames, which we will now discuss.
Frames based on Frame and Frameset tags - their structure
So, creating a classic frame structure begins with what you write in the Html code instead of the opening and closing Body tag, which usually should be present in any document, replacing it with an element-based container Frameset.
The fundamental point is that the Body element cannot be used in this case - either Body (for a regular document) or Frameset (when creating a document frame structure):
Each frame that we create inside the main one is created using a separate element Frame. This tag is single and in it we set the path to the document that will be loaded into this window.
The third element that we have not yet touched upon is Noframes. It is paired and allows you to write some text inside, which will be processed by the browser and displayed on a web page only if this same browser (or other display device) does not support frames. This can happen, for example, if you are using a browser for mobile devices.
Usually in Noframes they add not only information about the current situation with the impossibility of processing the frame structure, but also add the ability to go to other pages where you can continue working without using them. It’s difficult to say anything else about him, so let’s continue.
It turns out that the Frameset element, used instead of the Body tag, takes up all the space allocated for the viewing area, and frames will be created inside this area using individual Frame elements. In this regard, the question arises - how to divide the viewing area between separate windows or, in other words, how to set the size of each of them.
This is done by adding the appropriate attributes to the Frameset element. There are two of them - Cols and Rows. Cols sets the division of a large window into vertical frames or columns, and Rows allows you to divide it into horizontal windows or rows.
Creating a structure based on Frameset and its Cols and Rows attributes
The values for Cols and Rows of the Html Frameset tag are numbers separated by commas (without spaces). These numbers set the proportions of the windows that we want to get as a result. Therefore, no matter how many comma-separated numbers are written in Cols or Rows, the number of frames we have will be the result.
For example, using this notation we will get three vertical columns whose width will correspond to the proportions 2:5:3.
Since we have set the proportions for three frames, we will have to include three Frame elements between the opening and closing Frameset tags, at least without specifying additional attributes:
As a result, our frame structure, consisting of three empty windows, will look like this:
In this example, we set the window sizes (Frame) using percentages, which are taken from the width of the viewing area (this is the case when using Cols) or from its height (Rows). When changing the viewport, the percentage relationship between frame sizes will be maintained. But instead of percentages, you can also use simply numbers that will mean. Here, I think, no difficulties in understanding should arise either.
But there is also a rather unusual option in the size designations, which looks like asterisk "*". Moreover, it can be either just “*” or an asterisk with a number in front, for example, “3*”. A clever thing that is very similar to percentages and means that we divide the space for the Frame proportionally.
Let's look at an example. Now let's choose to divide the viewport into horizontal rows using Rows:
What does this entry mean? The entire viewing area available to us vertically will be divided into three lines. The height of the first will be taken at 200 pixels, the second - at 500, but the third line will occupy all the remaining space in height, because “*” was used as its size.
What is noteworthy is that the values “*” and “1*” mean the same thing - we divide all the remaining space into one and give this one part to this frame (well, that is, all the remaining space).
But look what happens if you use the value “*” with a number to divide in proportion:
What do you think the dimensions of the Frame will be in this case? It is clear that the second line will definitely have a height of 100 pixels. But how will the remaining space be divided in height between the third and first row?
It’s quite easy to calculate - just add four (4*) to two (2*) and divide by this denominator (remember fractions from the school curriculum) two and four. Those. we get that the first column with a frame will take up one third of the remaining space in height, and the third column will take up two thirds. Or, in other words, the third will be twice as high as the first:
You can use all three ways to size frame windows in one attribute, for example:
As a result, we will get the first Frame column with a width of ten percent of the entire available area, the second - 100 pixels, and the remaining three will have a width in the proportions of four, three and two-ninths of the remaining width space. So everything is simple and clear.
If you want to split the main window not only into horizontal and vertical frames, but, for example, into their combinations, then you can use the nested structure of Frameset elements separately for columns and separately for rows. For example, to get the structure shown in the screenshot below, it is enough to use the following construction:
Those. first, we use “frameset cols=”20%,80%"“ to split all the available space into two columns vertically and set the contents of the right column with the “frame” tag, but instead of adding a “frame” element for the left column, we open a new “frameset rows=“10%,*”".
And with the help of it we split the right column into two lines with frames, the contents of which are set using two “frame” tags, after which we close both “frameset” containers. Everything is simple and logical.
Specify the path in the Src attribute of the Frame element
But we all talked about the Frameset element and its Cols and Rows attributes, with the help of which we form the structure and set their sizes. Now let's figure out how to display the necessary documents in the required frames and how to configure the interaction between their windows.
So how do we control the appearance of the windows we create? All this is contained in the attributes of the Frame tag. The first one worth mentioning is Src. We have already seen it in the Img tag when we looked at inserting images into Html code. Its essence has not changed and it still allows you to specify the path to the document that should be loaded into the frame.
The path to the document in Src can be specified as . Relative paths are usually used for a document that is located on your own resource, but you will need absolute paths when you want to load a document from another site into a frame window.
If the Src attribute indicating the path to the desired document is not specified, then an empty document will be loaded into the window. Personally, I once did a similar thing for my blog (as an additional navigation element) and at the same time created a separate folder for it on the hosting server and placed there not only an Html file with a frame structure (which I called index.html), but also all loaded into various document windows, as well as image files that were used as backgrounds.
Therefore, it was easiest for me to use relative links in the Src attribute of the Frame tag:
What’s noteworthy is that if you replace all the links given in this code from relative to absolute (such as https://site/navigator/joomla.html) and open this file in a browser, then the documents specified in Frame will be loaded from my server and you will see a similar image in your browser. Moreover, it does not matter where your file with the frame structure (index.html) will be located - on your computer or on the hosting.
In the example shown in the figure, a page with a certain menu, which is a regular menu, is loaded into the window of the left frame. But what matters is not how the menu is formed, but what happens after clicking on any of its links.
If you do this, then everything will happen exactly as it should - the document will open in the lower right window. But for this I had to use one small trick, because in the default version the document opened to the entire size of the window, replacing the frame structure, which I did not need at all, because the navigation menu in the left and top frames disappeared.
How to open documents via a link in a frame
So, when we talked about hyperlinks, we mentioned the “A” tag attribute as Target=_blank. Do you remember what it is for? It's correct to open the linked document in a new window. By default, it should open in the same window, which is equivalent to target="_self".
But these are opportunities Target are not limited. It turns out you can add a value to it as a frame name, which is pre-specified in the special Name attribute of the Frame tag. Then the document via this link will not open in the same window, occupying all its space, but in the Frame you specified. It's clear? If not entirely, then it will become clear now when we analyze the example.
So, let's return to our example shown in the figure just above. We need to open pages using links from the left window in the lower right (large) frame. Therefore, first you need to give this large window a name using the Name attribute in the Frame tag.
They made it and called it “ktona”. Now you can safely open the file that is loaded as a menu in the left window and add the Target="ktona" attribute to all A tags in it:
The history of Joomla and the VirtueMart component
Of course, with the help of the search and replace tool it will not be difficult to put it for all hyperlinks, but why load the code unnecessarily when we have a great opportunity to use special Base tag, which we already mentioned in the same article about hyperlinks, when we talked about using Target blank.
It is enough just to place the base target="ktona" element between the opening and closing Head tags and all the links in HTML code of this document will open new pages in the specified frame called "ktona":
By the way, if we consider my once existing tool as an example, then we still need to make sure that all the links from the top horizontal window open their pages in the left vertical frame, which serves as my left menu. What needs to be done for this?
Well, first, you need to give the left vertical frame a name:
And in the file that is loaded into the top window (gor.html), you need to add the base target="gor" element:
That's it, now we've done everything right. All documents following links from the top frame open in the left window, and all links from it will open documents in the central and largest Frame. In my opinion, everything is simple and logical.
Frame tag attributes for customizing the appearance of windows
Let's now see what attributes other than Src and Name can be used in the Frame tag to customize the appearance of frames. Let's start with Scrolling. Using it, we can configure the display of scroll bars for each window of your frame structure separately.
Scrolling has a default value of Auto - the browser will automatically decide, based on the size of the document loaded into the frame, whether to display a scroll bar or not. If the document does not completely fit into the window, a scroll bar will appear, allowing you to view it all to the end.
You can also use the values Yes (scroll bars in the window will always be displayed, even if the document completely fits into it) and No (scroll bars will never appear at all, even if part of the document does not fit) as values for Scrolling.
In my once existing tool, I used the default value of Auto and scroll bars in frames appeared as needed:
The following attribute of the Frame tag is Noresize- is single (it has no values). By registering it, you will thereby prohibit changing its size, which by default is done by simply dragging the border of the frames with the mouse.
When you move the mouse cursor to the border, you will see that the cursor will turn into a double-headed arrow and now, by clicking on left button mouse, you can move the border as you wish. Noresize imposes a ban on this willfulness (when you move the mouse cursor to the border of the windows, you will no longer see the bidirectional arrow).
Another visual attribute is Frameborder. Using it, you can specify whether to draw a frame (border) between frames or not to draw. Frameborder can have only two possible values - either 0 (do not draw a frame) or 1 (show a border). The default value, of course, is 1.
There is one subtlety. If you want to remove the visible border, then you will have to add Frameborder=0 to all Frame tags of the frames between which you want to remove the visible borders.
Well, we still have to consider a couple of attributes of the Frame tag - Marginwidth and Marginheight, which set the padding in width (right and left) and height (top and bottom) from the borders of the window to the content loaded into it (the number means the number of pixels of padding):
Why can't you make a website on frames?
Let's see what the fundamental drawback of classical structures is, which essentially puts an end to their use when creating a website. It consists in the fact that according to this frame structure it is impossible to track her condition.
Complex structures can have thousands of different states (variants of documents opened in different frame windows), but the Url address of this very structure does not change. Because of this there will be Can't use browser bookmarks or send links to your favorite pages to other users. Why?
Because the address remains unchanged even when opening it from browser bookmarks or from an email Email, you will get a page with the starting state of the frame structure, and not the state you would like to save.
Although, of course, this problem can be solved, but not with HTML tools, but with the help of server (for example, Php) or client programming languages (JavaScript), and these solutions will not be one hundred percent efficient. Such solutions, in fact, allow you to add additional data about its current state to the Url address of the frame structure, but this is not easy to do, and the reliability will not be absolute.
This is the first disadvantage of using frames to create websites and a very significant one, but there is another huge disadvantage. Search engines, of course, have long learned to index them and extract from them the addresses of those documents that are loaded into their windows. The problem is different.
When a user goes from Yandex or Google search results to your website built on the basis of a frame structure, only the document that was loaded into one of the frames will open, and not the entire structure. Do you understand what I'm talking about?
The user will see the document and will not see navigation on your site, because it will be protected in other windows, and they are loaded only as part of the entire structure.
As a result, a site built on frames simply becomes unusable. Although, again, there are solutions to this problem based on server scripts, when a redirect will be carried out from the addresses of individual documents to a frame structure that is in the desired state, but this is again very difficult and not always reliable.
In general, the conclusion can be drawn unambiguously - There is no need to create websites on frames. But they are constantly used to create help for various applications, and they can come in handy in other small things.
For example, I created a frame structure, which I called “Navigator” (now it has been temporarily removed) and which has become a kind of expanded external menu for my blog, which, it seems to me, should simplify working with the resource and, therefore, improve the “ no nonsense" have a very, very strong influence on the promotion of the site.
But, however, in order to avoid any problems with search engines, I closed this entire frame structure from view, and also added, just in case, the Rodots meta tag to all its Html files, prohibiting their indexing:
JOOMLA
But all these restrictions apply only to structures on the Frame and Frameset tags, and embedded frames on Iframe tags do not have any visible flaws, and they can and even should be used on your projects, at least for inserting videos from YouTube.
Good luck to you! See you soon on the pages of the blog site
You might be interested
Comment directives and Doctype in Html code, as well as the concept of block and inline elements (tags) Embed and object - Html tags for displaying media content (video, flash, audio) on web pages Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background) What is hypertext markup language Html and how to view a list of all tags in the W3C validatorSelect, Option, Textarea, Label, Fieldset, Legend - tags HTML forms dropdown lists and text field Lists in Html code - UL, OL, LI and DL tags Font (Face, Size and Color), Blockquote and Pre tags - legacy text formatting in pure HTML(without using CSS) How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs