Iframes

HTML <iframe>

The <iframe> element in HTML is used to embed an external webpage or document within the current page. This is useful for displaying external content like maps, videos, or other web pages without redirecting users.

Syntax

<iframe src="url" title="description"></iframe>

Common Attributes

• src – Defines the URL of the embedded page.
• title – Provides a description for better accessibility.
• width / height – Sets the size of the iframe.
• name – Assigns a name to the iframe for use with targeted links.
• scrolling – Controls the visibility of scrollbars.
• frameborder – Toggles the iframe's border.

Adjusting Iframe Size

You can control the size of an <iframe> using the height and width attributes. By default, these values are measured in pixels.

<h2>HTML Iframes</h2>  
<p>The `height` and `width` attributes define the iframe's dimensions.</p>  
<iframe src="https://institute.qarpeo.com" height="200" width="300" title="Iframe Example"></iframe>

• Alternatively, CSS can be used to style the iframe:

<h2>HTML Iframes</h2> 
You can adjust the size of an iframe using the CSS height and width properties.
<iframe src="https://institute.qarpeo.com" style="height:200px;width:300px" title="Iframe Example"></iframe>

Removing the Iframe Border

• By default, iframes display a border. You can remove it using the CSS border property.

<h2>Removing Iframe Borders</h2>  
<p>Apply `border: none;` in the `style` attribute to remove the iframe's border.</p>  

<iframe src="https://institute.qarpeo.com" style="border:none;" title="Iframe Example"></iframe>

• You can also customize the border with different styles and colors:

<h2>Custom Iframe Border</h2>
<p>CSS allows you to customize an iframe by adjusting its border size, style, and color.</p>
<iframe src="https://institute.qarpeo.com" style="border:2px solid red;" title="Iframe Example"></iframe>

Linking to an Iframe

An iframe can be used as a target for links. By assigning a name attribute to the iframe, you can open links inside it.

<h2>Iframe as a Link Target</h2>  

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>  

<p><a href="https://institute.qarpeo.com" target="iframe_a">Open in Iframe</a></p>

Conclusion

The HTML <iframe> element is a useful tool for embedding external content, such as web pages, videos, or maps, into a webpage without navigating away. Key attributes like src, title, height, and width help control the iframe's functionality and accessibility.