HTML Frame

  • HTML frames are basically used for the division of the page and each section can be used for opening a separate file.
  • To define frames in HTML you can use <frameset> tag.
  • <frameset> tag is used in the head part of html document.
  • Here is the basic syntax of <frameset> tag:

    <frameset rows="percentage/pixels" | cols="percentage/pixels">
    <frame src=filename name=framename>
    : : : : : : : : : : : : : : : : : : : : :
    </frameset>

  • In the above syntax:


  • rows attribute is used for the purpose of horizontally partition of the html page.
  • cols attribute is used for the purpose of vertically partition of the html page.

Partition HTML Page into Horizontal Frames


  • To partition HTML page in horizontal frames we have to use rows attribute of <frameset> tag.
  • Here we are going to discuss an example which will divide the html page horizontally:

    <!DOCTYPE html >
    <html>
    <head>
    <frameset rows="50%,*">
    <frame src="bg.jpg">
    <frame src="HTML-Attributes.html">
    </frameset>
    </head>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • In the above program <frameset rows="50%,*"> will divide the webpage, in two equal parts horizontally.
  • <frame src="bg.jpg"> will display the image "bg.jpg" in first frame.
  • <frame src="HTML-Attributes.html"> will display the contents of the file HTML-Attributes.html in the second frame.

Partition HTML Page into Vertical Frames


  • To partition HTML page in vertical frames we have to use cols attribute of <frameset> tag.
  • Here we are going to discuss an example which will divide the html page vertically:

    <!DOCTYPE html >
    <html>
    <head>
    <frameset cols="50%,*">
    <frame src="bg.jpg">
    <frame src="HTML-Attributes.html">
    </frameset>
    </head>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • In the above program <frameset cols="50%,*"> will divide the webpage, in two equal parts vertically.
  • <frame src="bg.jpg"> will display the image "bg.jpg" in first frame.
  • <frame src="HTML-Attributes.html"> will display the contents of the file HTML-Attributes.html in the second frame.

Partition HTML Page into both Horizontal and Vertical Frames


  • To partition HTML page in both horizotntal and vertical frames we have to use rows and cols attributes respectively of <frameset> tag.
  • Here we are going to discuss an example which will divide the html page both horizontally and vertically:

    <!DOCTYPE html >
    <html>
    <head>
    <frameset rows="30%,*">
    <frame src="bg.jpg">
    <frameset cols="40%,*">
    <frame src="html_tut.jpg">
    <frame src="HTML-Attributes.html">
    </frameset>
    </frameset>
    </head>
    </html>


    To see live output : Visit Try Yourself Editor

    Output





  • In the above program <frameset rows="30%,*"> will divide the html web page into two section or frames.The first frame will occupy the width equivalent to the 30 % of the web page window, and remaining area , that is , 70 % is occupied by the next frame.
  • <frame src="bg.jpg"> will display the image "bg.jpg" in first horizontal frame.
  • <frameset cols ="40%,*"> will again divide the remaining html frame (70%) into two sections, first sub-frame is of 40 % of the second frame and the second sub-frame is of 60% of the second frame.
  • <frame src="html_tut.jpg"> will display the image "html_tut.jpg" in first vertical frame.
  • <frame src="HTML-Attributes.html"> will display the contents of the file HTML-Attributes.html in the second vertical frame.