HTML/Frames

A frame is used to divide a web page into different sections. Frames can be used as excellent navigational tools, e.g. one frame can be dedicated to the hyperlinks while the other frame is used to open the contents.

Advantages:

Site maintenance is relatively easier using frames
Using frames, we can display contents of other websites without leting the user to leave your own website

Disadvantages:

Framed sites are not well indexed by search engines. Result of your search may have your documnets display outside the frame, hence losing navigational and other aspects developed using a frame
Older browsers may not support frames.

We make use of </NOFRAMES>...</NOFRAMES>

To design a very good looking website and to maintain it using frames can be a very challenging task.

Frame Tag

Example 1: Dividing a page into two columns

<html>
 <head>
   <title>Frame Example 1</title>
   <frameset cols="20%,80%">
     <frame src="left.html">
     <frame src="main.html">
   </frameset>
 </head>
</html>

Example 2: Dividing a page into two rows

<html>
 <head>
   <title>Frame Example 2</title>
   <frameset rows="20%,80%">
     <frame src="left.html">
     <frame src="main.html">
   </frameset>
 </head>
</html>

Example 3: Dividing a page into rows and columns

<html>
 <head>
   <title>Frame Example 3</title>
   <frameset rows="20%,80%">
     <frame src="top.html">
     <frameset cols="20%,80%">
       <frame src="left.html">
       <frame src="main.html">
   </frameset>
 </head>
</html>

Attributes of frameset

1. border is used to set the border between the frames. The value determines the thickness in pixels.

  <frameset cols="   ", border="2">
  .
  .
  </frameset>

2. bordercolor set the border color. This will only be applicable if the frame border is set. For e.g. bordercolor="blue"

3. frameborder determines whether to display the border or not. Values are "1" or "yes" and "0" or "no". For e.g. frameborder="1"

4. framespacing is used to place some place between the edges of a frame and its content. Value has to be specified in pixel. For e.g. framespacing="10"

5. cols and rows are attributes of frameset,

Attributes of frame

1. src is the location of web page to be opened in the frame

2. bordercolor defines the color of the border

3. frameborder, set to "1" or "yes" to display border and bordercolor

4. marginwidth defines the amount of space in pixels between the left and the right side of the frame and its contents

5. marginheight defines the amount of space in pixels between the top and the bottom side of the frame and its contents

6. name specifies a name for a frame and is used for easy reference. It is normally used when making use of hyperlinks in a frame

7. noresize, you can prevent users to resize your webpage. and it takes no values

8. scrolling it takes three values (yes, no, auto)

  yes  - if you want to allow scrolling and a scrollbar is displayed even through it is not required
  no   - this will prevent any scrollbar even through it is required
  auto - let the browser decide whether the frame requires scrollbar or not

The name attribute

When creating a frame in a webpage while making use of hyperlinks, you need to set the name of the frame. The name attribute is used to specify in which frame to open a web page.

  <a href="http://www.google.com" target="   " >

The name should be place in the target attribute of the anchor tag <a>...</a>

If you want to open all your web pages in a single frame, you can make use of this tag <base target="" />

  <html>
    <head>
     <base target=" " />
    </head>
  </html>

Target is used to specify the name of a frame but also there are standard values that can be used instead of the name of the frame.

_blank

This value creates a new window to display a page that does not contain any frames

_parent

Similar to the first one but normally it is used to specify the parent frame that contains the source name

_self

Loads the page in the same frame

_top

This one indicates a new document window. It is used to break out of frame and load the document in the same window

frame name

Specify where you want to load the page

Resource Window

Opens the document in a new window

Inline Frame

An inline frame is a floating frame that can be used exactly as an image. It is also used just like the image tag

  <iframe></iframe>

Attributes of the Inline frame

1. src specifies the location of the page

2. align aligns the inline frame with respect to the other element of the page. Values are left, right, top, bottom, middle

3. height and width specify the dimension of the iframe in pixels

4. hspace and vspace specify the amount of the horizontal and vertical space to be put around the iframes Values are in pixels.

5. marginheight and marginwidth determine the amount of space in pixels between the left-right and top-bottom edges of the frame and its contents

6. frame border - values are 1 and 0

7. scrolling - values can be yes or no

8. noresize - prevent the user from resizing the frame

9. name - give a name to a frame