Frames

-

Frames


HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows.

First introduced in Netscape Navigator 2.0.

A framed page is actually made up of multiple HTML pages. There is one HTML document that describes how to break up the single browser window into multiple windowpanes. Each windowpane is filled with an HTML document.

For Example to make a framed page with a windowpane on the left and one on the right requires three HTML pages. Doc1.html and Doc2.html are the pages that contain content. Frames.html is the page that describes the division of the single browser window into two windowpanes.

Frame Page Architecture


A <FRAMESET> element is placed in the html document before the <BODY> element. The <FRAMESET> describes the amount of screen given to each windowpane by dividing the screen into ROWS or COLS.

The <FRAMESET> will then contain <FRAME> elements, one per division of the browser window.

Note: Because there is no BODY container, FRAMESET pages can't have background images and background colors associated with them.

Frame Page Architecture


<HTML>
<HEAD>
<TITLE> Framed Page </TITLE>
</HEAD>
<FRAMESET COLS=“30%,70%”>
<FRAME SRC=“Frame_1.html”>
<FRAME SRC=“Frame_2.html”>
</FRAMESET >
</HTML>

The Diagram below is a graphical view of the document described above






<FRAMESET> Container 


<FRAMESET>: The FRAMESET element creates divisions in the browser window in a single direction. This allows you to define divisions as either rows or columns.

COLS: Determines the size and number of rectangular columns within a <FRAMESET>. They are set from left to right of the display area.

ROWS: Determines the size and number of rectangular rows within a <FRAMESET>. They are set from top of the display area to the bottom.

Creating a Frames Page

Possible values are:
Absolute pixel units, i.e., “360,120”.
A percentage of screen height, e.g. “25%,75%”.
An asterisk (*) will represent all the remaining space. This is often combined with a value in pixels , e.g. “360,*”.
        Example: <Frameset cols=“200,20%,*”>


FRAMEBORDER : Possible values 0, 1. A setting of zero will create a borderless frame.

FRAMESPACING: This attribute is specified in pixels. If you go to borderless frames you will need to set this value to zero as well, or you will have a gap between your frames where the border used to be.

Frameborder  & Framespacing

<frameset rows="50%,40%" frameborder=0 framespacing=0>
  <frame src="frame_a.htm" >
  <frame src="frame_b.htm" >
</frameset>


BORDER (thickness of the Frame): This attribute specified in pixels. A setting of zero will create a borderless frame. Default value is 5.

BORDERCOLOR: This attribute allows you choose a color for your border. This attribute is rarely used.

Border & bordercolor

<frameset cols="30%,70%" border=20 bordercolor="red">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>





<FRAME>


<FRAME>: This element defines a single frame within a frameset. There will be a FRAME element for each division created by the FRAMESET element. This tag has the following attributes:

SRC: Required, as it provides the URL for the page that will be displayed in the frame.
NAME: Required for frames that will allow targeting by other HTML documents.

Example:
<frameset cols="50%,50%">
<frame src="frame_a.htm" name="frame_a">
<frame src="frame_d.htm">
</frameset>

MARGINWIDTH: Optional attribute stated in pixels. Determines horizontal space between the <FRAME> contents and the frame’s borders.

MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical space between the <FRAME> contents and the frame’s borders.

SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
Yes – always display scroll bar(s).
No – never display scroll bar(s).
Auto – browser will decide based on frame contents.
By default: scrolling is auto.

Marginwidth, Marginheight & Scrolling

<frameset cols="50%,50%">
  <frame src="frame_a.htm" marginwidth="50" marginheight="80" scrolling="yes" >
  <frame src="frame_b.htm" marginheight="50">
</frameset>





NORESIZE: Optional – prevents viewers from resizing the frame. By default the user can stretch or shrink the frame’s display by selecting the frame’s border and moving it up, down, left, or right.

Example:
<frameset cols="50%,*,25%">
  <frame src="frame_a.htm" noresize="noresize">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>







Comments

Post a Comment

Popular posts from this blog

-
Image
Top 10 Programming Languages Important To Learn  Financial and enterprise systems need to perform complicated functions and remain highly organized, requiring languages like Java and C#. Media- and design-related webpages and software will require dynamic, versatile and functional languages with minimal code, such as Ruby, PHP, JavaScript and Objective-C. 1. C Language C  is a high-level and general purpose  programming language  that is ideal for developing firmware or portable applications. Originally intended for writing system software,  C  was developed at Bell Labs by Dennis Ritchie for the Unix Operating System (OS) in the early 1970s.  Dennis MacAlistair Ritchie was an American computer scientist. C  is a very powerful and widely  used  language. It is  used  in many scientific programming  situations. It forms (or is the basis for) the core of the modern languages Java and C++. It al...
Read more

A Javascript Program To make (open new window and close that window) button in your web browser.

-
Image
A Javascript Program To make (open new window and close that window) button in your web browser. < html > < head > < script > function openWin() { myWindow=window.open("","","width=200,height=100"); myWindow.document.write(" <p >This is 'myWindow' </ p >"); } function closeWin() { myWindow.close(); } </ script > </ head > < body > < input type =" button " value =" Open 'myWindow' " onclick =" openWin() " / > < input type =" button " value =" Close 'myWindow' " onclick =" closeWin() " / > </ body > </ html >    
Read more

A simple running clock in javascript

-
A simple running clock in javascript Here I show how to code for a simple digital clock in javascript. The advantage of javascript is that it is only a client side scripting language.  Here’s the code… <html> <head> <title></title> <script type=”text/javascript”> function getClock() { var clock = new Date(); var hours12; var ampm = “AM”; var hours24 = clock.getHours(); var minutes = clock.getMinutes(); var seconds = clock.getSeconds(); if (hours24>=13) { hours12 = hours24 – 12; ampm = “PM”; } else if (hours24==12) { hours12 = 12; ampm = “PM”; } else if (hours24==0) { hours12 = 12; } else { hours12 = hours24; } if(hours12<10) { hours12 =”0″+hours12; } if (minutes<10) { minutes = “0” + minutes; } if(seconds<10) { seconds =”0″+seconds; } var ti...
Read more