HTML TUTORIAL

How To Add IFRAMES on Web Document Using HTML

HTML IFRAMES
Written by ikenna

In this article, you will be learning about Iframes and how you can easily insert them on a web document using HTML. In our previous article, we looked at the several methods of inserting email links to web documents and we explained the process of doing it. if you havent gone through the tutorial, you can do so using the link below

READ PREVIOUS : How To Insert Email Links To Web Document Using HTML

Introduction to IFRAMES IN HTML

IFRAME which is the short name for inline frame, allows developers to insert another well constructed web document inside a different web document. For example, we can simply introduce documents like menus, side bars, categories etc to a web page, and we can achieve this using the iframe tag <iframe>.

Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML IFRAME ILLUSTRATION</title>
   </head>
	
   <body>
         <p>TOP SECTION showing the iframe section</p>
         
      <iframe  src="/htmlframes/themustfeed.html" width="50"  height="72"    >
         oops! browser doesnt suport iframes

      </iframe>

      <p>END body showing the iframe section</p>



   </body>
   
</html>

RESULT ON WEB BROWSER

Please understand that in course of repeating the above example, you might get a different result depending on the source file linked to your web document.

The <iframe> Tag Attributes

The HTML IFRAME have different attributes that can be added to it for the purpose of customization and referencing. The below table shows few attributes that can be added to the <IFRAME> tag.

TAGSATTRIBUTES
SRCThe SRC is used for linking an external url for the iframe
FRAME BORDERThis is used to set the frame border
NAMEThis is used to assign name to the iframe
MARGIN WIDTHThis is used to set spaces  in the right and left sections of the frame border and the content of the iframe
MARGIN HEIGHTThis is used to set space  in the top and bottom areas of the frame border and the content of the iframe
HEIGHTThis is used to set the iframe height
WIDTHThis is used to set the iframe width

Conclusion

The above short article explains fully how the HTML IFRAME works. If you have questions, kindly let us know using the comment section below

NEXT ARTICLE: HTML HEADER

About the author

ikenna

Leave a Comment