The iframe tag, short for "inline frame", enables you to include content from another file on your site, or even from an external URL. For instance, including Google in a window on your website would be as simple as writing an iframe tag, like this:

 

<iframe src="http://www.google.com"></iframe>

 

Now, you can control various aspects of the appearence, as described below, but the above is all you need to see it working. You can leave a message for clients who can't or are not allowed to render an iframe, by writing it within the tags, like this:

 

<iframe src="http://www.google.com">Google would be here, but your browser does not support iframes!</iframe>

The frameborder attribute

The frameborder attribute controls the border appearence of the iframe tag. It only has two possible values: 0 or 1. It's really up to the browser to figure out how the border will look, and therefore it varies from browser to browser, but you can turn it off by setting the property to 0. If you set it to 1, some kind of border will be rendered.

 

Consider these two examples, where the first window has its frameborder set to 1, while the second one has its frameborder set to 0:

 

   

 

The width and height attributes

The width attribute of the iframe tag allows you to specify the width of the rendered frame window. It can be specified as an absolute width, or as a percentage of the parent element by suffixing the number with a percentage sign, e.g. 50%.

 

The height attribute of the iframe tag allows you to specify the height of the rendered frame window. It can be specified as an absolute height, or as a percentage of the parent element by suffixing the number with a percentage sign, e.g. 50%.

 

The scrolling attribute

The scrolling attribute of the iframe tag defines how content that exceeds the frame window should be treated. It has three possible values: yes, no or auto. The no option leaves the window without scrollbars, while the yes options  usually renders the iframe with constant scrollbars, no matter if the content is too big for the window or not. The auto option, which is the default, renders scrollbars only when necessary.

© htmlpedia.net 2008 - 2012