Friday, July 26, 2024

HTML Iframes

HTML iframes are used to embed another HTML document within the current page, allowing for the inclusion of external content such as videos, maps, or other web pages. The <iframe> tag defines the inline frame, with attributes like src to specify the source URL, and width and height to set its dimensions. The sandbox attribute can be used to restrict the iframe’s capabilities for security purposes. Iframes are useful for integrating third-party content seamlessly into a webpage.

Examples:

<iframe src="https://www.example.com" width="600" height="400" title="Example Site"></iframe>

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.298589447464!2d-122.41941808468117!3d37.77492927975954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808c1f8f9b7f%3A0x462c709b51a4b8!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1637195976350!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>


HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tutorial</title>
</head>
<body>
    <h1>HTML Iframes</h1>
    <p>An iframe is used to embed another HTML page within the current page.</p>
    <iframe src="https://www.example.com" width="600" height="400" title="Example Site"></iframe>
    
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.298589447464!2d-122.41941808468117!3d37.77492927975954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808c1f8f9b7f%3A0x462c709b51a4b8!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1637195976350!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

    <pre>
        &lt;iframe src="https://www.example.com" width="600" height="400"&gt;
            Your browser does not support iframes.
        &lt;/iframe&gt;
    </pre>
    <nav>
        <h1><a href="https://simplilearnat.blogspot.com/p/html-tutorial.html">Home</a> | <a href="https://simplilearnat.blogspot.com/2024/07/html-meta-tags.html">Back</a> | <a href="https://simplilearnat.blogspot.com/2024/07/html-frames.html">Next</a></h1>
    </nav>
</body>
</html>

The Output of the above code:



HTML Tutorial

HTML Iframes

An iframe is used to embed another HTML page within the current page.

        <iframe src="https://www.example.com" width="600" height="400">
            Your browser does not support iframes.
        </iframe>
at
Labels: