HTML iFrames

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document.

Iframe Syntax

<iframe src="<URL>"> </iframe>

src attribute specifies the web address (URL) of the inline frame page.

Why HTML Iframe

If we want to imbed multiple web-pages in a single HTML web page then we can be done by implementation of HTML Iframe. HTML Iframe is created by <iframe>

Iframe Example

<iframe src="https://www.gdatamart.com/html/html_images.aspx"> </iframe>
                                         

Output

  • Iframes are one the best ways to build up a complex, detailed webpage from smaller, more manageable chunks.
  • iframe tags, a developer can include webpages as part of a larger, enompassing parent page.
  • Unlike frames, iframes can be styled through CSS and easily molded to fit seamlessly within the parent page.
  • One neat use of an iframe is to display a custom Google map within the page.
  • This can be done by setting the ‘src’ attribute of the iframe tag to Google Map URL.

iFrame Attributes

According to our requirements we can set several attribute to HTML Iframe in which height, width, frameborder and style attribute are used widely.

Iframe - Set Height and Width Attributes

You can set the width and height of iframe by using "width" and "height" attributes. By default, the attribute's values are specified in pixels but you can also set them in percent & the width of an Iframe element in HTML is 100% of parent Element.

Attributes Example

<iframe src="https://www.gdatamart.com/english-dictionary.aspx" width="100%" height="250"> </iframe>

Output

Iframe - Remove the Border

By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property

If we closely observe Iframe window then we will find that there is a border of 1px surround Iframe dimension. If we want to change the thickness of border then we can define frameborder attribute according to need, if we don’t want any border then we can define frameborder attribute value as 0.

Remove the Border Example

<iframe src=" https://www.gdatamart.com " frameborder="0"  width="100%" height="250" > </iframe>

Output

Style Attribute of Iframe

By using style attribute in Iframe we can set border, border-radius and many more property, let’s see below example.

Style Example

<iframe src=" https://www.gdatamart.com " style="width:100%;height:250px; border:6px solid lime;" > </iframe>
                                         

Output

Note : In HTML Iframe Element we can define global attributes like id, lang, title, scroll ect. And also we can define events attributes like onload, onresize, onerror and much more. How we can make use of global and events attributes it’s totally depends on us.

Iframe - Target for a Link

An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe

<iframe src="<URL>"  name ="iframe_a"> </iframe>
<a href="https://www.gdatamart.com" target ="iframe_a">gdatamart.com</a>

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.

  • The frameborder, marginwidth, longdesc, scrolling, marginheight attributes deprecated in HTML5. Do not use these attributes.

Tag Attributes

Attribute Attribute & Description
src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = "http://www.gdatamart.com/html/html_iframes.aspx" will load an HTML file available in html directory.
name This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.
frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels.
marginheight This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels.
height This attribute specifies the height of <iframe>.
scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto".
longdesc This attribute allows you to provide a link to another page containing a long description of the contents of the frame.
width This attribute specifies the width of <iframe>.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved