How to Create Frames in HTML?

Once upon a time, web designing was all about learning HTML frames. People use frames to divide webpage and create beautiful layouts. Later the concept was moved to HTML tables and then the current trend is to use CSS layouts. However, frames are always an essential learning as part of HTML tutorials.

Related: Learn how to create your first blog with WordPress?

In the Frame

HTML <FRAME> tag is used to divide up the display area of your browser into sections. Each section can display a different document. Haven’t you seen those pages where you click on a link on the left side of a page and the document on the right changes? Well, all that magic was done with frames! It can be used to segregate different parts of the screen e.g. heading, index, content, credits etc.

Simple, isn’t it? Now let us see how this “framing” is done!

Making Frame Structure

First we define the frames i.e. describe how we break the screen into sections. Suppose you wanted your page to look something like this:

Here’s the code to do that (replace the SRC reference to your original page URLs):

<FRAMESET COLS="25%,75%">
<!-- Divides the page into two columns (Col 1 and Col 2) -->
<FRAMESET ROWS="75%,25%"> 
<!-- Divides Col 1 into two parts - Cell 1 (on top) that is three times as large as Cell 2. The size can also be specified in an absolute fashion "100, 50,*" - this is typically in terms of pixels. The * indicates that the remaining area is allocated to the last row However absolute measurement is not preferred since this could lead to unpredictable results due to varying screen resolutions -->
<FRAME SRC="demos.html">
<FRAME SRC="index.html"> 
<!-- The documents Blog and Demos will get loaded in Cell 1 and 2 respectively -->
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<!-- Divides Col 2 into three parts - Cell 3, 4 and 5 - all of the same size -->
<FRAME SRC="privacy.html">
<FRAME SRC="contact.html">
<FRAME SRC="sitemap.html">
<!-- The documents Privacy, Contact and Sitemap will get loaded in Cell 3, 4 and 5 respectively -->
</FRAMESET>
</FRAMESET>

The result on a browser will look like below:

Why don’t you play around with the code to make the frame structure look like this?

Basically you can change the rows and cols attribute values of frameset tag to create different size of frames within the same screen.

Browsers Who Don’t Support Frames

Yes, there are some of the browser brethren that do not support frames at all! They will either get an error message or a blank screen. So how do we deal with them?

Simple! After the first <FRAMESET> tag, put a message for such browsers between <NOFRAMES> and </NOFRAMES> tags. You could also include a link to a non-frames version of the page.

IFRAME

<FRAME> tag is not supported in HTML5 and hence the above details are not really useful in practical world at this point of time. Instead, HTML has a new tag <IFRAME> for embedding one webpage inside another webpage. Iframe is not a replacement for frame tag but an alternate way to insert content within a page from external resources.

Services like YouTube and Google Maps offer iframe embed code to insert any video or map on your site. Below is an example code for an iframe:

<iframe
src="Embed Page URL"
width="600"
height="300"
scrolling="no">
</iframe>

---