#2 HTML page frame

1. HTML page frame:

Frames divide your browser window into several parts that allow you to view multiple web pages at once. You can use frames to create multiple scrollable sections. Each HTML document is called a "frame" and each frame is independent of the others. Frame pages can also be hyperlinks.

Creating a frame

<frameset>---------------</ frameset> Tags:


  • The <frameset> tag is a container tag for all other tags used to create frames.

  • The <frameset> tag replaces the <body> tag in the frameset document.

  • The <frameset> tag defines how to divide the window into frames.

  • Each frameset defines a set of rows or columns. Defining a frame using rows creates a horizontal frame. Defining a frame using columns creates a vertical frame.

  • The row / column value indicates how much screen area each row / column occupies.

  • Each frame is indicated by a <frame> tag and defines the HTML document to put in the frame.

The rows attribute

The rows attribute divides the screen into Horizontal frames.


frame.html


<html> 
  <head> 
    <title> frame </title> 
  </head>
  <frameset rows="25%, 75%"> 
  <frame src = "page1.html">
  <frame src = "page2.html">
  </frameset>
</html>

Output:



In the above example, we have a frameset with 2 rows. The first line is set to 25% of the width of the browser window and the second line is set to 75% of the width of the browser window. The document "page1.html" is placed on the first line and the document "page2.html" is placed on the second line.



NOTE: page1.html and page2.html code is given in below link: web publishing


The column attribute

The cols Attribute The cols attribute divides the browser window into vertical frames according to the defined width. The following example illustrates the concept.


<html>
<head>
<title> frame2 </title> 
</head>
<frameset cols = "100, 45%,*"> 
<frame src = "page1.html"> 
<frame src = "page2.html">
<frame src = "page3.html">
</frameset>
<html>

In the above example, the file page1.html is set to 100 pixels, page2.html is set to 45% of the available space, and page page3.html occupies the remaining space.


The total area of all rows and columns must be defined in pixels or percentage values or relative values using the (*) asterisk symbol


NOTE: page1.html, page2.html and page3.html code is given in link: web publishing


The <frame> tag

The <frame> tag is used to create a frame within a frameset. You can use the attributes of this tag to specify the name of the frame and the HTML page that should be displayed in the frame.

The various attributes of the <frame> tag are:


Src: This attribute is used to specify the HTML page to display in frame <frame src = "URL of HTML page>"


Frame border = 0/1: This attribute indicates the border around the frame. A value of 0 creates a border less frame. A value of 1 indicates a border


Margin width: This attribute sets the left and right frame margins in pixels. For example <frame src ="page1.html" marginwidth = 25>


Margin height:This attribute sets the top and bottom frame margins in pixels. For example <frame src = "page1.html" marginheight = 25>


Resize/ Noresize: This attribute prevents the user from resizing the frame. By default, the user can resize the frame by dragging it to a new position. For example <frame src = "pagel.html" noresize>


Name: Used to assign a name to the frame for targeting and linking purposes. Example: <frame src = "pagel.html" name = "xyz">


Scrolling = "Yes / No / Auto"

Scroll has three values: YES, NO and AUTO.

  • The value YES specifies that the scrollbar will always be displayed in the frame.

  • The value NO specifies that the scrollbar should not be displayed in the frame.

  • The value AUTO tells the browser to automatically show or remove the scrollbar from the frame. This is the default value.

Nested frames

You can nest a <frameset> tag inside another <frames> tag.

See the following code for an example of nested frames.



HTML code:

<html> 
    <head>
        <title>frame </title>
    </head>
<frameset cols = "50%, 50%"> 
    <frame src= "page1.html"> 
    <frameset rows = "50% 50  % "> 
        <frame src= "page2.html "> 
        <frame src= "page3.html "> 
    </frameset> 
</frameset> 
</html> 

Output:





HTML code:

<html> 
    <head> 
        <title> frame </title> 
    </head> 
<frameset cols = "50%, 50%"> 
    <frameset rows = "50%, 50%"> 
        <frame src = "page1.html"> 
        <frame src = "page2.html "> 
    </frameset> 
    <frameset rows =" 50%, 50% "> 
        <frame src ="page3.html "> 
        <frame src ="page4.html "> 
    <frameset> 
<frameset> 
</html>

Output:



38 views0 comments

Recent Posts

See All

#3 HTML page frame

Link frame or target attribute Links are one of the benefits of using frames. Links have a menu / link on the left side of the browser and when I click the link the content is displayed on the right.

 
  • Facebook
  • Instagram
  • Twitter
  • YouTube
  • Pinterest
  • Tumblr Social Icon

© Copyright MH35.ONLINE . All Rights Reserved

Designed by Krushna_005