What are frames in HTML?

Konfinity
September 19,2020 - 12 min read
What are Frames in HTML?

The Hyper Text Mark-Up Language, also known as HTML is a mark-up language used to build customized websites. The HTML language is made up of tags that are used to build web pages from scratch.

HTML is an essential but valuable skill. Beginners tend to neglect the importance of this language and this might be one of the biggest mistakes they commit in their formative years as developers.

It is an easy to learn language and is responsible for building the structure of most websites you see on the world wide web. HTML is often perceived as a complex language but it’s really not.

If you have the understanding of its basic structure and a sound knowledge of HTML tags then you are more than good to go.

Today we are going to discuss Frames in HTML. While studying web development, developers often neglect this concept but frames are an important feature in our websites.

Frameset is basically a tag in HTML. It is used to create several frames in single web page and each of those frames can contain separate HTML documents. The tag is used to divide the browser window in several frames.

Frames in HTML

When we talk about frames, the first and foremost thing that we encounter is the frameset tag. This tag can be thought of as a collection of frames that are displayed on the browser window. Frameset divides the web pages into frames using help of rows and columns. The frameset tag is used to in the header section and not inside the body tag. The syntax is as follows –

<frameset rows=“10%, 70%, 20%”>

In the syntax above, the frameset divides the web page into three horizontal rows of width 10%, 70% and 20% respectively. The number of rows can be varied accordingly and even the sizes can be set to different values.

Similarly, the window can also be divided vertically by using columns instead of rows as the basis of division. The syntax for the same would be –

<frameset cols=“10%, 50%, 40%”>

Here the frameset divides the web page into three vertical rows of width 10%, 50% and 40% respectively.

Now that we have a fair idea of the frameset tag, let's talk about frames. We earlier discussed that each frame can contain separate HTML document but for that we are required to specify its address. Frames does exactly that, they mention the address of the HTML document that we want to display in that particular frame.

Its basic syntax is –

<frame name="main" src="/html/main_frame.html" />

In the example above, main_frame.html is the HTML document to be displayed in the particular frame.

There are some browsers or versions that do not support the frame tag. In such case, <noframe> tags are used and displayed instead of the frame tag. The framesets that come under the <head> tag is actually a replacement of the <body> tag in HTML. Hence, when frames are not supported, the <noframe> tag is used which also contains within itself the body tag. You can display a message under the <noframe> tag to inform user about the compatibility issue.

Now that we have an overview of both the frameset and the frame tag, let's discuss each of them in detail.

Attributes of Frameset in HTML

  • Rows and Columns

    The first two are rows and columns. We have discussed their functionality in brief but there are a few more point's to be understood before we proceed further.

    As we know ‘col’ is used to specify the number of columns in the web browser. The width of each column can be expressed as absolute values in pixel or it can be expressed as the percentage of browser window to be covered. Another way to specify size is to mention it in terms of relative size. The syntax for the same is

    <frameset cols=“3*, 2*, 1*”>

    Here the browser window is divided into sixths. The first column takes up half of the window, the second takes one third and the third column takes one-sixth.

    Rows work just like columns; the only difference is the orientation. Columns are used to divide the page horizontally whereas rows are used to divide the browser window in vertical frames.

  • Border

    You know that frameset divides the window into boxes that holds different HTML documents. When this kind of division takes place, it is very necessary to make a visible differentiation between two frames. Borders are used to demark the frames from one another.

    The attribute of border is used to specify the width of the border of each frame. The value (width of the border) is expressed in pixels. A border of 0 pixels means that there is no border. The syntax is border= “5”; Here the border of frame is 5 pixels.

  • Frameborder

    This is used when 3D borders are required between the frames. This attribute only takes 2 values, it only accepts 0 and 1. 0 would refer to absence of 3D borders between frames. 1 means exactly the opposite. The syntax is Frameborder = “1”; The code above means that there would be a 3d border between frames.

  • Framespacing

    Framespacing is used to specify the distance between each frame in a frameset. This takes an integer value and the gap is expresses in terms of pixels. For example – Framespacing=”10”; The syntax above would mean a gap of 10 pixels between every frame in the particular frameset.

Attributes of Frames in HTML

  • Name

    This allows you to give a name for each frame. It is not a compulsory attribute but is important for identification of frames. It indicated the frame on which the HTML document is loaded.

  • Src

    This is the most important attribute of frames. It is used to declare the HTML document that one wants to load in a particular frame. The value of this attribute can be any url.

    The next two attribute for frame is relating to the margins of frames. Margins in HTML frames work similar to the margins in CSS. For a better understanding, we suggest you to go through this article.

  • Marginwidth

    This attribute allows you to define space between left and right of the frame borders. The values can be expressed in pixels.

  • Marginheight

    This attribute allows you to define space on the top and the bottom of the frame borders. These values can also be expressed in pixels.

  • Scrolling

    This is used to control the scrollbars within the frames. These take three values, “yes”, “no” or auto. A yes and no means that there would be a scrollbar and there would not be a scrollbar respectively. Auto denotes to automatic allocation of scroll bar, the presence of scroll bar would be determined by its need.

Coding Frames in HTML

Frames divide browser window in frames just like rows and columns in tables. If you are comfortable with the concept of creating tables in HTML then frames won't be difficult. Here's a syntax of creating horizontal and vertical frames in your browser window.

  • <html>
  • <head>
  • <title>A simple frameset document</title>
  • </head>
  • <frameset cols="20%, 80%">
  • <frame src="contents_of_frame3.html">
  • <frame src="contents_of_frame3.html">
  • </frameset>
  • </html>

The code above uses one frameset tag in which it specifies the number and dimension of the columns. According to the code, there would be two columns of width 20% and 80% respectively. The two tags below are frame tags which essentially specify the source of the HTML documents that would be displayed in the respective frames.

Nested Frames in HTML

Another interesting concept is the concept of nested frames. In this we create columns within rows or rows within columns. In order to implement nested frames, we use a combination of frameset tags. Let's look at the code to implement nested frames.

  • <html>
  • <head>
  • <title>A simple frameset document</title>
  • </head>
  • <frameset cols="20%, 80%">
  • <frameset rows="100, 200">
  • <frame src="contents_of_frame1.html">
  • <frame src="contents_of_frame2.gif">
  • </frameset>
  • <frame src="contents_of_frame3.html">
  • </frameset>
  • </html>

In the code above we have used two framesets. Under the first frameset, we called another frameset to define two frames of 100 and 200 pixels respectively. We close this frameset before defining the third frame.

Hence, we have built a frameset under another frameset which makes for a different kind of layout for our webpage. The output would be two vertical Frames. The first frame would contain within itself two horizontal frames.

Nested frames are a very useful concept when building professional websites. It makes for an amazing layout that contributes to the aesthetic value of the website.

We hope you have understood the concept of frames and had fun while learning it. However, if tiny doubts are still hovering around your mind, feel free to ask questions because we'll be more than happy to assist you in your journey of becoming a successful technocrat.

Now that we are done with basic concepts of Frames in HTML and we've also seen their practical implementation, it's time to get your hands dirty. The challenge for this blog is to create a separate navigation bar and the basic web page using Frames.

In most of the professional websites, the navigation bar is another frame containing a separate HTML document and the rest of the web page is a different frame containing another HTML document.

So, the challenge for you is to create a professional looking website in which the navigation bar is part of one frame containing a separate HTML document and the rest of the webpage is another frame containing a separate HTML document. We hope to see interesting web pages built seamlessly with the help of frames in HTML.

We have covered the concepts of frames comprehensively and we hope you are satisfied with the knowledge you have garnered from this article.

HTML forms the basis of web development. If you see yourself as a builder of websites with a solid structure then an in-depth knowledge of HTML is indispensable. We have covered frames in HTML but there remains a stack full of concepts that you need to master before you even begin your journey in the world of web development.

In case you didn’t know, Konfinity ‘s Web Development Course is developed by experts from IIT DELHI in collaboration with tech companies like Google, Amazon and Microsoft. It is trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more.

Join the course to master the art of creating web applications by learning the latest technologies, right from basic HTML to advanced and dynamic websites, in just a span of a few months.

Konfinity is a great platform launching a lucrative tech career. We will get you started by helping you get placed in a high paying job. You know what’s amazing - no prior coding experience is required to take up our courses. Start your free trial here.