HTML IFRAMES


  • An HTML Iframe also known as the HTML Inline Frame element represents nested browsing context as it embeds another HTML page into the current page.
  • It can be defined using the <iframe> element.
  • Embedded browsing content created by the <iframe> element is itself a complete document environment therefore it has its own session history.

HTML Iframe Attributes

  • height: specifies the height of the frame in pixels 
  • name: specifies a name for the iframe that can be used as a value of the target attribute of elements like <a> </a> and <form></form>
  •  src: specifies the URL or file path of the page to embed 
  • width: specifies the width of the frame in pixels

Attributes height and width and src:

<! DOCTYPE html> 

<html> 

        <head>

            <title> iframes height and width </title>

        </head>

        <body>

            <iframe src="iframe.html" height="300" width="400".> </iframe>

        <body>

<html>

Attribute name:

<! DOCTYPE html> 

<html> 

        <head>

            <title> iframes attribute name</title>

        </head>

        <body>

               <form action="sample-page-handler.html" target="demo">

                        <input type="submit" />

                </form>

                <iframe name="demo" height="300" width="400"></iframe>                   <body>

<html>

Embedding External Web Site:

<! DOCTYPE html> 

<html> 

        <head>

            <title> iframes embedding external website </title>

        </head>

        <body>

            <iframe src="http://www.example.com" height="300" width=400">                 </iframes>

        <body>

<html>

<iframe src="http://www.example.com" height="300" width=400"> </iframes>

Removing HTML Iframe Border: 

<! DOCTYPE html> 

<html> 

        <head>

            <title> iframes border </title>

        </head>

        <body>

            <iframe src="iframe.html" height="500" width="400" style="border;2px"></iframes>

        <body>

<html>