Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML Frames Overview

Frame is a standard Web Development component and it takes a big role for standardized and modernized page development as per our requirement. In this article we will see the usage of frames in HTML page development.

At the time of creation of Webpages this point should be remembered that pages may be distributed for many parties. These types of criteria is required for using Frame tag because the frame tag is no doubt very useful for splitting up the pages as per column wise or row wise. This is also a concept of business logic. In this circumstance, business system cannot maintain a page without advertising or other social media activities. So when this process is followed, we set up our page 10% for advertising. Through this Advertising we can easily get money that money is used for maintenance of our website pages.

Brief Preamble to HTML (Hypertext Markup Language):

HTML is like the resources that are going to be building blocks of a Webpage. So it is the content that makes up a webpage or website by itself without form or forms. We can easily build up a webpage with just HTML and it will be entirely usable. Though using this process we can gently develop a page but it is not attractive or gorgeous.

Brief Explanation of Frame:

HTML Frame is one part of Good Web Programming because this tag is present to us for various types of programming. Some time it is happened that when we buy a web site then it is very expensive to split up the page to various customer. This procedure is wonderful for all customers. Through frame, we just sell the webpage according to the requirement or percentage of the page. Basically the frame is a part of webpage container. Through the “src” tag we can easily give the source page and call it.

At the time of creation of frame some attributes are present in the frame. These attributes take a serious role for development of a page. Now we will discuss the attributes in the following manner.

Attribute Application
Rows This attribute is generally used to divide the screen into multiple rows. It can be set equal to a list of various values. This value is totally depending on the required size of each row. The value can be as following.··Number of Pixels··Screen resolution expression ··The symbol like * which is denoted the rest of the space.
Cols This attribute is generally used to divide the screen into multiple columns. It is set with equal values. This value is depending upon required size of each column. The values can be as follows.··Number of Pixels··Screen resolution expression ··The symbol like * which is denoted the rest of the space.

Once the browser screen is divided into rows, it means division according to Horizontal Sections and columns means division according to Vertical Sections. Each unique section sharp can be loaded with different HTML documents. This is realized by using the e using the following attributes:

Attribute Application
SRC="url" This indicates the URL (Uniform Resource Locator) of the document to be loaded into the frame.
MARGINHEIGHT=n It is the attribute that specifies the quantity of white space to be left at the top and bottom of the frame.
MARGINWIDTH=n It is the part of the frame that specifies the amount of white space to be left along the sides of the frame.
NAME="name" It gives the frame an exclusive name so it can be targeted by other brochures. The name given must begin with an Alphanumeric character.
NORESIZE It is responsible for disabling the frames resizing capability
SCROLLING When we want to Control the appearance of horizontal and vertical scrollbars in a frame, it generally takes the values YES / NO / AUTO. We use the scrolling option.

Now I will discuss some code that gives us a clear Figure of how we can set the frame tag and what is the procedure to do this tag with proper attributes.

Listing 1: Split up the page vertically in the program

<html>
    <head><title> This is the Example of Frame </title>
    </head>
    <frameset cols="50%, 50%">
	<frame src="one.html">
	<frame src="two.html">
	</frameset>
	<noframes></noframes>
</html>
Showing frame

Figure 1: Showing frame

Listing 2: Split up the page horizontally in the program

<html>
    <head><title>This is the Example of Frame</title>
    </head>
    <frameset rows="20%,30%,25%,25%">
	<frame src="one.html">
	<frame src="two.html">
	<frame src="three.html">
	<frame src="four.html">
	</frameset><noframes></noframes>
</html> 
Showing horizontal split up

Figure 2: Showing horizontal split up

Listing 3: Split up the page vertically and horizontally in the program

html>
    <head><title>This is the Mater Frame Three......... </title>
    </head>
	<frameset cols="40%,*,2*">
		<frameset rows="75,*,2">
		<frame src="forums.gif">
		<frame src="five.html">
		</frameset>
		<frame src="six.html">
		<frame src="two.html">
		<frame src="three.html">
	</frameset><noframes></noframes>
    <body> 
    </body>
</html> 
Showing vertical and horizontal split

Figure 3: Showing vertical and horizontal split

Listing 4: Split up the page with vertical and horizontal nested frame setup in the program

<html>
    <head><title>This is the Master4 Frame </title>
    </head>
	<frameset cols="110, *,2*">
	<frameset rows="100,*,*">
	<frame src="iitb_blue.gif" height="350">
	<frame src="five.html">
	<frame src="six.html">
	</frameset>
	<frame src="two.html">
	<frameset rows="50%,50%">
	<frame src="logo1.jpg">
	<frame src="bn.gif">
	</frameset>
	</frameset><noframes></noframes>
    <body> 
<noframes> Your Browser Does not handle Frame.............</noframes>
    </body>
</html>
howing nested frame

Figure 4: Showing nested frame

Listing 5: Split up the page vertically and horizontally with * value given that indicate rest of page, in the program.

<html>
    <head><title>This is the Master5 Frame  </title>
    </head>
	<frameset rows="*,*" cols="146.*">
	<frameset rows="162,*">
	<frame src="struts-project.gif" width=146 height=162 scrolling="no" marginheight="1" marginwidth="1">
	<frame src="one.html">
	</frameset>
	<frame src="bn.gif"></frameset><noframes></noframes>
</html> 
Showing vertical and horizontal splitting

Figure 5: Showing vertical and horizontal splitting

Creating Complex Frames

In the above example it is very easy to create a simple frame but when we are trying to develop standard and complex frame then we set this frame with proper steps. The key to defining a frame with both columns and rows is to place multiple pairs of <frameset></frameset> tags in our master page and the point should be remembered that each pair enclosing a "cols" or "rows" statement. This can get a little complex and for that reason we must think it and solve it with step by step procedure. This step by step procedure is shown in the following program.

Listing 6: Sample showing complex frame

<html>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="logo1.jpg">
<frame src="page2.htm">
</frameset>
<frame src="struts-project.gif">
</frameset>
</html>

In this program we started out the "framing" by defining cols="50%, 50%" and let us see that what incident will happen if we define the rows first, instead of the other way round:

Listing 7: Sample showing frameset

<html>
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="logo1.jpg">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
</frameset>
</html>
 

Some times when we are confused to develop the Frameset, we slice a frame or the columns or rows.

At first we split up the page with column wise.

Listing 8: Showing creation of Complex frames step-by-step procedure:

<html>
<frameset cols="33%, 17%, 17%, 17%, 17%">
</frameset>
</html>

After that split at rows and give proper source of the requirement files.

<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="logo1.jpg">
<frame src="page2.htm">
</frameset>
<frame src="page3.htm">
<frame src="page4.htm">
</frameset>
</html>

When we observe that the "rows" part is nested within the "cols" part and since the rows are a "subpart" of the columns declaration. After the creation we get the following final result:

<html>
<frameset
cols="33%,17%,17%,17%,17%">
<frameset rows="50%,50%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
<frame src="logo1.jpg">
<frame src="page4.htm">
<frameset rows="50%,50%">
<frame src="5.htm">
<frame src="6.htm">
</frameset>
<frame src="7.htm">
</frameset>
</html> 

This is the final frame that we design after the creation of the above pages and with given proper set of links. In that set the pages are cut down at first column wise and next it is separated row wise.

This is the final Output of the Complex page design

Figure 6: This is the final Output of the Complex page design

Conclusion

Gorgeous page is our motto at the time of Webpage development. Through this process we must think about the different application must be entering in our page. Some time we can set different page in our website or link with another page according our choices. This total procedure is easily maintained by the Frame tag in HTML. This is no doubt that it takes a major role in modern webpage development.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login