Wednesday, July 29, 2009

Iframe YouFrame Weframe

image

Part of the connected nature of the web is the ability to embed and display image flash etc. Heath Sawyer aka heheboy showed me what he was doing with iframes in one of the wetpaint wikis he is working with for the Matamata ictpd Cluster. Iframes are a good way to include one webpage in another.

The code looks like this

Basic iFrame HTML Code is in red I just copied it and changed the yourdomain to put the I love learning site in a frame below.

<IFRAME NAME=" my_iframe " SRC=" http://www.yourdomain.com" WIDTH="90%" HEIGHT="300px"> <p> Browsers and spiders that can't read iframe code will see this text instead.</p> </IFRAME>

Here's what each part means:

SRC - The URL of the page that you are including in the iframe.

HEIGHT - The height of the iframe. This can be expressed in pixels or percentages.

WIDTH - The width of the iframe. This can be expressed in pixels or percentages.

NAME - The name of the iframe.

Optional iFrame Properties

If you want more control over the look and behavior of your iframe, you can choose to add the following iframe properties to the code.

  • SCROLLING - Should the iframe content scroll? Possible values are "yes", "no", or "auto".
  • FRAMEBORDER - Would you like a border around the iframe? Possible values are "yes" or"no".
  • ALIGN - How should the iframe be positioned in relation to surrounding content? Possible values are "left", "right","top", "middle" or "bottom". - Note: This setting is depreciated in favor of styles
  • MARGINWIDTH - The horizontal internal margin for the iframe. Must be expressed as pixels.
  • MARGINHEIGHT - The vertical internal margin for the iframe. Must be expressed as pixels.
  • HSPACE - The horizontal spacing around the iframe. Must be expressed as pixels.
  • VSPACE - The vertical spacing around the iframe. Must be expressed as pixels.
  • LONGDESC - The URL of the page with a long description of the iframe contents. Must be expressed as a URL.

Here is an example of an inline frame with many of the optional iframe properties set:

<IFRAME NAME="my_iframe" SRC="http://www.yourdomain.com " WIDTH="90%" HEIGHT="300px" SCROLLING="NO" MARGINWIDTH="10px" MARGINHEIGHT="10px" FRAMEBORDER="0"> <p>Browsers and spiders that can't read iframe code will see this text instead .</p> </IFRAME>

No comments:

Post a Comment