HTML Iframes

HTML Iframes

  • Iframe represents an HTML inline frame that contains another document.
  • An iframe is used to display a web page within a web page.
Syntax:
<iframe src="URL"></iframe>

Example: HTML Iframe

<!DOCTYPE html>
<html>
     <head>
          <title>HTML Iframes Example</title>
     </head>
     <body>
          <iframe src="http://careerride.com/" width="600" height="200"></iframe>
     </body>
</html>


Output:
iframe
<iframe> Attributes
PropertyDescription
srcIt indicates the location of the web page to be loaded into the frame.
alignIt aligns the iframe. Its values can be left, right, top, middle, bottom.
nameIt specifies the name to the frame.
frameborderIt specifies whether or not display a border of an iframe.  Its values can be 0 or 1.
heightIt sets the height in an iframe.
widthIt sets or returns the value of the width attribute in an iframe.
marginheightIt sets the top and bottom margins of the content of an iframe. Its values can be in pixels.
marginwidthIt sets the left and right margin of the content of an iframe. Its values can be in pixels.
longdescIt specifies the link of a page that contains a long description of the content of an iframe.
noresizeIt disables the frame resizing capability.
scrollingIt controls the appearance of horizontal and vertical scrollbars in a frame. Its values can be 'yes', 'no' or 'auto'.

Iframe Targeting

  • An iframe can be used as the target frame for a link.
  • To make this happen the hyperlink tag is used.
  • The href attribute of the hyperlink tag specifies the URL of targeted file.
  • The target attribute of the hyperlink tag must refer to the name attribute of the iframe.

Example: Iframe Targeting

<!DOCTYPE html>
<html>
     <body>
          <iframe width="600" height="200" name="iframe_a"></iframe>
          <p><a href="http://careerride.com/" target="iframe_a">CareerRide.com</a></p>
     </body>
</html>


Output:
iframe targeting
▲