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.
|SRC||The SRC is used for linking an external url for the iframe|
|FRAME BORDER||This is used to set the frame border|
|NAME||This is used to assign name to the iframe|
|MARGIN WIDTH||This is used to set spaces in the right and left sections of the frame border and the content of the iframe|
|MARGIN HEIGHT||This is used to set space in the top and bottom areas of the frame border and the content of the iframe|
|HEIGHT||This is used to set the iframe height|
|WIDTH||This is used to set the iframe width|
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