Tuesday 31 January 2017

Working with Frames in HTML

                                           FRAMES

Definition of frames:

       HTML provides the facility to divide the internet explorer window into many section using frameset. Each frame can contain a different document. A frameset in HTML is a way to display multiple web page in the same internet explorer window, at the same time.
       The contents of one frame can be linked to the contents of another. example of : one frame can contain links that produce a result in another frame.

Attributes of frames:

  1. cols
  2. rows
  3. frameborder
  4. framespacing
1. Cols
     If you want that your internet explorer window divides into vertical section then you can do it by using cols attribute of the <frameset> tag. The cols attribute takes the values in percentage separated by commas.
     Example:  <frameset cols="30%, 40%, 30%">

2. Rows
      If you want that your internet explorer window divides into horizontal section then you can do it by using rows attribute of the <frameset> tag. The rows attribute takes the values in percentage separated by commas.
        Example:  <frameset rows="30%, 40%, 30%">

3. Frameborder
      If you want apply border to your frame using frameborder attribute of <frameset> tag.
         Example:  <frameset  frameborder="10">
                     If you Don't want border to your frame, set the frameborder = "0"

4.Framespacing
     You can also set the thickness of the frame border using the framespacing attribute of the <frameset> tag.
         Example: <frameset frameborder="1" framespacing="10">

Using of <noframes>:

       The <noframes> tag should contain the markup and text to be dispalyed when a browser that doesn't support frames accesses the web page.  The <noframes> tag should be found only within the frameset element.

Creating a frame:

        Frames are created by using <frameset> tag.  You can create multiple <frame> tag inside a <frameset> tag.  The <frame> tag uses an attribute named as src.  The src attribute takes an html file, as a value, which you want to upload to that frame.
       

Example of vertical and horizontal frames:

Creating vertical frames:

Frame.html
<html>
<frameset cols="30%,30%,40%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<noframes></noframes>
</html>     

Frame1.html
<html>
<body>
<h5>Frame 1<h5>
<h6> This is a frame1 <h6>
</body>
</html>

Frame2.html 
<html>
<body>
<h5>Frame 2<h5>
<h6> This is a frame 2 <h6>
</body>
</html>

Output:


Creating horizontal frames:

Frame.html
<html>
<frameset rows="30%,30%,40%">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
<noframes></noframes>
</html>     

Frame3.html
<html>
<body>
<h5>Frame 3<h5>
<h6> This is a frame 3 <h6>
</body>
</html>

Frame4.html 
<html>
<body>
<h5>Frame 4<h5>
<h6> This is a frame 4 <h6>
</body>
</html>

Output:


Using a named frame ad Hyperlink Targets:

       Named frames are those frames for which you assign a name.  When you want to use a named frames as hyperlink target, you have to pass the name of the frame to the target attribute. So when you click the hyperlink, the referenced page opens in the target frame that you assign in the target attribute.  

Example:

Frame.html:

 <html>
<frameset cols="25%,75%">
<frame src="frame1.html">
<frame src="frame2.html" name="hyper">
</frameset>
<noframes></noframes>
</html>


Frame1.html
<html>
<body>
<a href="page1.html" target="hyper">
<h1>page 1</h1>
</a>
<br>
<a href="page2.html" target="hyper">
<h1>page 2</h1>
</a>
<br>
<a href="page3.html" target="hyper">
<h1>page 3</h1>
</a>
<br>
</body>
</html>


Frame2.html<html>
<body>
<h1 align="center">
click a hyperlink
</h1>
</body>
</html>


Output:


No comments:

Post a Comment

s