IFrames Explained

In Using IFrames we looked at the uses and problems of IFrames here we will look at the HTML behind IFrames in more detail.

The basic structure is:

Where the only thing that needs to be specified is the page that should be displayed inside the frame. The result is shown below:

Now there are various things that we can control about the appearance of the frame by adding additional control attributes to the opening IFrame tag.

• Width-width of frame in pixels or as percentage
• Height-width of frame in pixels or as percentage
• scrolling- allowed by default can be set to no, yes, auto
• marginwidth=width in pixels between the frame and the left and right edges of the frame contents
• marginheight=height in pixels between the frame and the top and bottom edges of the frame contents.
• Align -align the frame to the page values are top, bottom, left, right, center
• Name- the name of the frame used for targeting a frame.

Examples-1: no border, no scrolling, height 200 pixels, aligned to center

The Name attribute is what lets you control the contents of the frame. Consider the following which has no source document as default, and so nothing is actually displayed inside the frame, but the frame has a name --- example1.

Now to control what appears inside the frame we create a normal link to the web page questions.htm and tell it to display in the frame example1. The HTML is:

And the same for the answer:

Click for the question and here for the answer.

Web www.build-your-website.co.uk

Related Articles and Resources:

• Using Iframes
• Using IFrames for Calendars