Friday, September 1, 2017

Html Frames

 Hello guys, morning , its realy been a while since i made any tutorial post and am realy sorry about that, have been kind of busy lately. Today i wanna talk about Html frames and am guessing you all have an idea of what a frame is.
Html frames are used to divide your browser window into different sections or layers where each section can load a seperate Html document. A collection of various frames in the browser window is known as a frameset.

Disadvantages Of Frames
There are few disadvantages with using frames, so take note that it's never recommended to use frames in your webpages:
     Some smaller devices cannot cope with frames often because thier screen is not big enough to divide up.
     Secondly sometimes your page will be displayed differently on different computers due to different resolutions of the computers.
     The browser's back button might not work as the user hopes.

     And then lastly there are still few browsers that do not support frame technology.

Creating Frame
In other to use a frame on a web page we make use of <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into frames.

Follow the example below to create three horizontal frames
<!DOCTYPE html>
<title>HTML Frames</title>
<framset rows="15%,90%,15%">
<frame name="top" src="/html/top_frame.html"/>
<frame name="main" src="/html/main_frame.html"/>
<frame name="bottom" src="/html/bottom_frame.html"/>
Your browser does not support frames

You can try the above out to see how it looks like on your browser 

Now lets take a look at another example where we replaced rows attribute by cols and changed thier width. In this case all three frames will be created verticaly:

 <!DOCTYPE html>
<title>HTML Frames</title>
<framset cols="20%,60%,20%">
<frame name="left" src="/html/left_frame.html"/>
<frame name="center" src="/html/center_frame.html"/>
<frame name="right" src="/html/right_frame.html"/>
Your browser does not support frames
You can also try the above example out to see the result for your self and feel free to drop your questions in the comment box.

The <frameset> Tag Attribute
 The following are the important sets of attritube of <frameset> tag:

Attribute                                     Description
                            Specifies how many columns are contained in the 
                            frameset and the size of each column. You can 
                            specify the width of each column in one of the 
                            four ways:
                            Absolute values in pixels, for example, to create 
                            three vertical frames, use cols="100,400,100".

                           A percentage values of the browser window. For 
                           example, to create three vertical frames, use 
Cols                           Using a wildcard symbol, for example, to create 
                          three vertical frames, use cols="10%, *,10%". In 
                          this case wildcard takes remainder of the window.

                          As relative widths of the browser window, for 
                          example, to create three vertical frames, use 
                          cols="3*,2*,1*", this is an alternative to 
                          percentage. You can use relative widths of the 
                          browser window. Here the window is divided into 
                          sixths: the first column takes up half of the 
                          window, while the second takes the third, and 
                          finaly the third takes one sixth. 

                          This attribute works just like the cols attribute 
                          discussed above and takes the same values, but 
                          it is used to specify the rows in the frameset. For 
rows                  example, to create two horizontal frames, use 
                          rows="20%, 80%". You can specify the height of 
                          each row in the same way as explained above for 
                          column attribute. 

                          This attribute specifies the width of the border of 
border                each frame in pixels. For example, border="2" 
                          specifies a border with the width of 2 pixels.

                          This attribute specifies whether a three 
                          dimensional border should be displayed between frameborder      frames. This attribute takes value either 1 (yes) or 
                          no (no). Forr example frameborder="0" specifies 
                          no border at all.

                          This attribute specifies the amount of space 
                          between frames in a frameset. This can take any 
framespacing     integer value. For example framespacing="12" 
                          means there should be 12 pixels spacing between 
                          the frames.

The <frame> Tag Attibute
The following are the important attributes of <frame> tag available in HTML:

Attribute                                     Description

src                      This attribute is used to give the file name that 
                           should be loaded in the frame, its value can be 
                           any URL. For example, src="/html
                           /top_frame.html" will load a HTML file available 
                           in html directory.

                           This attribute allows you to give a name to the 
                           frame. It is used to indicate which frame a 
name                  document should be loaded into. This is 
                           especially important when you want to create 
                           links in one frame that loads pages into another 
                           frame, in which case the second frame needs a 
                           name to isentify itself as the target of the link.

                          This attribute specifies whether or not the borders 
                          of the frame are shown; it overrides the 
frameborder      value given in the frameborder attribute on the 
                          <frameset> tag if one is given, and this can take 
                          values either a 1 or a 0.

                           This attribute allows you to specify the width of 
  marginwidth     the space between the left and right of the frame's 
                           borders and the frame's content. The value is 
                           given in pixels, for example marginwidth="14".

                           This attribute allows you to specify the height of 
  marginheight    the space between the top and bottom of the 
                           frame's border and the frame's contents. The value 
                           is givin in pixels. For example marginheight="15".

                           By default, you can resize any frame by clicking 
    noresize          and dragging on the borders of the frame. The 
                           noresize attribute prevents a user from being able 
                           to resize the frame. For example 

                           This attribute controls the appearance of the 
                           scrollbars that appear on the frame. This takes 
  scrolling           values either "yes", "no", or "auto". For example 
                           scrolling="yes" means it should have a scroll bars.

                           This attribute allows you to provide a link to 
                           another page containing a long description of the 
  longdesc           contents of the frame. For example 

Browser Support for Frames
If a user is using any old browser, which does not support frames then <noframes> element should be displayed to the user.
So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understsnd what is inside the <body> element which is contained in a <noframes> element.
You can put some polite message for your user having old browsers. For example, sorry!! your browser does not support frames.

Frame's Name and Target Attribute
One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a seperate frame.

 <!DOCTYPE html>
<title>HTML Target Frames</title>
<framset cols="200, *">
<frame src="/html/menu.html"  name="menu_page"/>
<frame src="/html/main.html"  name="main_page"/>
Your browser does not support frames

Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and willl contain the navigation menu bar implemented by menu.html file. The second column fills in remaining space and will contain the main part of the page and it is implemented by main.html file. For all the three links available in menu bar, we have mentioned target frame as main_page, so whenever you click any of the links in menu bar, available link will open in main page

The target attribute can also take one of the following values:

Option                                      Description

_self              Loads the page into the current frame. 

_blank           Loads a page into a new browser window.opening a 
                      new window.     

_parent         Loads the page into the parent window, which in the   
                     case of a single frameset is the main browser window.

_top              Loads the page into the browser window, replacing 
                     any current frames.     

targetframe  Loads the page into a named targetframe.

Alright guys thats it for HTML frame, in my next tutorial am gonna be talking about HTML Iframes, Until then by for now. 

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image Links


Post a Comment