Lesson 14 – HTML Frames

What are html Frames?

HTML frames divide a web page into various sections and each section loads its html code separately. This is quite similar to HTML tables, where a webpage is divided into different rows and columns. Each frame has its own content, which load separately. 

How to Create html Frames:

  • Html frames can be created using html <frameset> element.
  • It should be placed after html <header> element.  
  • Html row attribute defines horizontal frame and html column attribute defines vertical frame.
  • Use html src attribute to define source which should be loaded within frame.

(i) Horizontal Frame:

Let’s learn with following example how to create horizontal frames.

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Frame Example</title>
</head>
<frameset rows=”20%,60%,20%”>
   <frame name=”top” src=”/First-frame/” />
   <frame name=”main” src=”/Second-frame/” />
   <frame name=”bottom” src=”/Third-frame/” />
</frameset>
</html>

The result will be displayed as:

 html-horizontal-frame

 

(ii) Vertical Frame:

In order to create a vertical frame, simply replace the html rows attribute with html cols attribute keeping everything same.

Example of html vertical frame :

<!DOCTYPE html>
<html>
<head>
<title>Vertical Frame Example</title>
</head>
<frameset cols=”20%,60%,20%”>
   <frame name=”top” src=”http://www.first-frame.com/” />
   <frame name=”main” src=”http://second-frame.com” />
   <frame name=”bottom” src=”http://third-frame.com” />
</frameset>
</html>

The result will be displayed as:

 html-vertical-frame

 

(iii) Mixing Rows and Columns:

You can mix rows and columns of a webpage by nesting secondary frame into primary one. Let’s understand with following example:

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Frame Example</title>
</head>
<frameset cols=”33%,33%,34%”>
     <frameset rows=”50%, 50%”>
          <frame name=”First” src=”http://www.first-frame.com”/>
          <frame name=”Second” src=”http://www.second-frame.com”/>
    </frameset>
 <frame name=”Third” src=”http://www.third-frame.com”/>
 <frame name=”Fourth” src=”http://www.fourth-frame.com” />
</frameset>
</html>

The result will be displayed as:

 html-mixed-frame

 

Leave a Reply

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

− 2 = 2