• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Html » Tutorial » HTML frame tag
Next →
← Prev

HTML frame tag

By Dinesh Thakur

A frame is an independent scrolling region or window, of a web page. A framed document divides a browser window into multiple panes or smaller window frames. Each frame may contain a different document. Frames can communicate with each other so that an action performed on a page in one frame can change the contents and behavior of another frame.

Users can view information in one frame while keeping another frame open for reference, instead of moving back and forth between pages. Frames offer many possibilities. They can contain table of contents, site indexes and lists of links. Fixed screen sizes limit how many frames can realistically be used simultaneously. Each frame in a window may be separated from the others with a border, in this way a framed document may resemble a table.

However frames aren’t a fancy form of tables. Because the documents included in a framed region may be much larger than the room available onscreen, each frame may provide a scroll bar or other controls to manipulate the size of the frame. Individual frames are usually named, so that they may be referenced through links or scripting, allowing the contents of one frame to affect the contents of another.

We’ll be covering the following topics in this tutorial:

  • Creating Framed Documents
  • Elastic Frames
  • Nested Frame Sets

Creating Framed Documents

Creating frames is actually quite simple. First of all you need to set a layout in your mind, as how do you want to divide the browser’s window or the web page. Then remember that a framed document is composed of several documents. For example, a page with two frames actually involves three files

1. The framing document or the master document that defines the framing relationship i.e. what does where.

2. The file that contains the contents of frame one

3. The file that contains the contents of frame two.

The two tags which are used for created a framed document are:

This tag is included after <HEAD> tag and it establishes frames within the HTML document. It does all the dividing. It requires a closing tag and there may be any number of <FRAMESET>tags within an HTML document.

Syntax:     <FRAMESETCOLS="Width1, Width2, "Rows="height1, height2,....">  
.......Frame or Frameset definitions.......  </FRAMESET>

Cols: This attribute is used for vertical frames and widths are specified as a comma delimited list of sizes in pixels, percentage or as a proportion of the remaining space by using “*”

Rows: This attribute is used for horizontal frames and height again is specified in pixels, percentage or as a proportion of the remaining space by using “*” <FRAME> TAG

This tag contains the frame content and works same as the <LI> tag for lists. It tells the browser, what to put in each frame. Each Frameset must include a <FRAME> definition for each division; it does not have a closing tag.

Syntax:     <FRAMESRC="URL">

 SRC: This attribute accepts the URL of the frame content.

Example 1: Now, in order to divide the browser window into two frames. Following is the code for the master document.

<html> 
   <head><title>framing tags</title></head> 
    <frameset cols="50%,50 %"> 
      <frame src="frame1.htm. :"> 
      <frame src="frame2.html :"> 
    </frameset> 
</html>

Notice that there is no <BODY>tag. The master page does not use them. If you put <BODY>tag within the master page, the browser won’t be able to divide the browser’s window using a <FRAMESET>tag the page has been vertically divided into two columns each of width 50%of the browser’s window. Also as there are two partitions, so two <FRAME> tags are used for specifying frame content. The codes for the two frames FRAME l and FRAME2 are shown below:

FRAME1.HTML

<html> 
   <head> <title> products pvt ltd</title> </head> 
    <body> 
      <h1 allgn="center"><b>
        <font face="arial black">products pvt ltd.</font></b>
      </h1> <p align="center"> &nbsp; </p> 
       <ul> 
        <li> <p><fontcolor="#990033">computer products</font></li> 
        <li> <p><fontcolor="#990033"> products</font></li> 
        <li> <p><fontcolor="#990033">hardware</font></li> 
        <li> <p><fontcolor="#990033">kitchenware</font></li> 
       </ul> <p> &nbsp; 
       </p> 
</body>
 
FRAME2.HTML

</html> 
  <html> 
    <head><titie> text fieids</titie></head> 
    <body bgcolor="pink"> 
    <p align="center"><b>admission form</b> 
    <form> <p> 
     <input type="text"name="name"value="enter your name:"size="25" maxlength="30"accesskey="n"> 
       <u>n</u>ame<br><br> 
     <input type="password"name="passwd"size="25" maxlength="30"accesskey="p"> 
       <u>p</u>password<br><br> 
     <input type="text"name="address"size="25"maxlength="30" accesskey=" a"> 
       <u>a</u>address<br><br> 
     <input type="radio"name="sex"value="male"accesskey="m"checked>
       <u>m</u>ale<br> 
     <input type="radio"name="sex"value="female"accesskey="f"> 
       <u>f</u>female<br> </form> 
   </body> 
</html> 

Elastic Frames

The height/width of frames can be specified in terms of number of pixels. For example the Frameset definition:

<framesetrows="200, 300, 350"> 
</frameset>

This will produce three horizontal frames of heights 200, 300 and 350 pixels respectively but specifying absolute dimensions may create problem as browser’s window may be opened in different screen resolution. In our example if the browsers window height is greater than 850 pixels, an empty frame will appear whereas for browsers having height less than 500 pixels the third frame won’t be displayed at all.

The solution is use of elastic frames. In elastic frames we use the notation * instead of a number. The “*” means whatever is left over.

Nested Frame Sets

So far we have discussed only vertical or horizontal frames in a window. Sometimes we may require a more complex structure including both the horizontal and vertical frames. We can combine these two types of frames by including a <FRAMESET>tag within another <FRAMESET>tag. This is called a nested Frameset.

Make the first one 20% of the browse window. The rest divide between frames 2 & 3 but make frame 3 twice as big as Frame 2. Place “FRAME1.html” in first frame “FRAME2 html” in frame 2 and divide the third frame further. The third Frame is divided vertically in two equal halves, using a second <FRAMESET> tag. Place FRAME3.HTML & FRAME4.HTML If in these two vertical frames.

You’ll also like:

  1. HTML Anchor Tag
  2. HTML table tag
  3. HTML button tag
  4. HTML fieldset tag
  5. HTML span tag
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

HTML Tutorials

HTML Tutorials

  • HTML - Home
  • HTML - History
  • HTML - Lists
  • HTML - Unordered List
  • HTML - Ordered Lists
  • HTML - Frame Tag
  • HTML - Input Type
  • HTML - Input Type="File"
  • HTML - Input Type="Hidden"
  • HTML - Form Tag
  • HTML - Img Tag
  • HTML - Anchor Tag
  • HTML - Table Tag
  • HTML - Span Tag
  • HTML - Button Tag
  • HTML - Doctype
  • HTML - Fieldset Tag
  • HTML - Links Tag
  • HTML - Drop Down Menu
  • HTML - Accesskey
  • HTML - Cgi
  • HTML - Post Method
  • HTML - Background Image
  • HTML - Text Area
  • HTML - TabIndex
  • HTML - Align Center
  • HTML - Address Tag
  • HTML - Thumbnails
  • HTML - Marquee Tag
  • HTML - Line Break
  • HTML - Blockquote
  • HTML - HR Tag
  • HTML - Image Center
  • HTML - Center Text
  • HTML - Link CSS
  • HTML - Html Vs Html5

Other Links

  • HTML - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2023. All Rights Reserved.