
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.
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.