fbpx
April 2, 2020
html frames

Tutorial 15# Learn How To Create HTML Frames The Easy Way

In this tutorial we will be explaining HTML frames and how you can create them. Sometimes developers intend dividing the web page into different sections. Maybe for the purpose of beautification or functional customization whichever the case maybe HTML gives us that functionality to achieve this easily.

READ PREVIOUS TUTORIAL ON: Tutorial 14# Understanding HTML EMAIL Links and How to Create Them

What are HTML Frames?

HTML frames are used to section web pages into different partitions and each partition can easily load a different HTML content from the other. HTML frames also divides the web page in a similar way tables are divided.

Disadvantages of HTML Frames

Some of the disadvantages of using HTML frames include:

  • HTML frames are not supported by all browsers and they can cause some browsers to misbehave
  • Not a good way of making web page customization
  • Might not open properly on smaller devices or mobile devices

How to create HTML Frames

Irrespective of the fact that frames are not that good for customization we will be looking at how you can create them.

To divide a web page into different frames we use a simple frame tag (<frame> & </frame>) without the body tags (<body> & </body>). The frame tags carries all the content of the framed pages and we use a row and column attribute to place the frames either in rows or columns as shown in the example below. We add the body tags at the end inside the <noframes> elements incase the browser doesnt support frames as shown below.

EXAMPLE WITH ROWS = 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <frameset rows = "30%,30%,30%">
      <frame name = "1st" src = "/html/develoferd1.htm" />
      <frame name = "Second" src = "/html/develoferd2.htm" />
      <frame name = "Third" src = "/html/develoferd3.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

RESULT ON WEB BROWSER

html frames rows

EXAMPLE WITH col = 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <frameset cols = "30%,30%,30%">
      <frame name = "1st" src = "/html/develoferd1.htm" />
      <frame name = "Second" src = "/html/develoferd2.htm" />
      <frame name = "Third" src = "/html/develoferd3.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

RESULT ON WEB BROWSER

html frames columns

Taking a close look at the codes we have rows in percentages. we will be explaining that in the next line

The <frameset> Tag Attributes

There are some attributes we can add to the frameset tag to give it more properties. Some of this attributes are listed below

Attributes Description
col This attribute is used to partition the frames into columns and we use percentages to determine the width of each frame column in respect to the other. For example if we have 3 frames we can set the rows = “30%,30%,30%”. This divides the full frame into 30% equal width partitions.
rows This attribute is used to partition the frames into rows and we use percentages to determine the height of each frame column in respect to the other. For example, if we have 3 frames we can set the rows = “30%,30%,30%”. This divides the full frame into 30% equal height partitions.
border This attribute is used to add border to the width of each frame
frameborder This attribute is use to specify if a three dimensional border should be added between the frames.
framespacing This attribute is used to add spaces between each frame

The <frame> Tag Attributes

While we discussed the frameset attributes, we also have some frame attributes we can add to the HTML frame tag to give a particular frame more additional properties and they include

Tag Description
src This is used to link a source frame you want to be viewed on the web document
Margin width This is used to set the margin width of a particular frame. This specify the space between the frame border and the frame content in the right and left sections
Margin height This is used to set the margin height of a particular frame. This specify the space between the frame border and the frame content in the top and bottom level
noresize   This prevent the frames from been re-sizable when displayed on the web browser.
frameborder This is used to add border to a particular frame
name This is used to name the frame

Browser support for frames

some browsers do not support frames. so we create a <noframes> element which will be displayed on the web browser.

The <body> element must be placed in between the <noframes> element so as to enable the frame non supportive browser read up the content of the <body> element

Conclusion

Now you understand the basics of HTML FRAMES and you are really doing great. Lets move on to the next tutorial on   HTML IFRAMES

Leave a Reply

Your email address will not be published. Required fields are marked *