HTML Embedded HTML Page

Introduction

The <iframe> tag is used to embed one webpage into another webpage. In this lab, you will learn how to use the <iframe> tag to display another webpage within your current webpage.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Adding the <iframe> tag to your HTML file

To add an <iframe> to your HTML file, you need to use the <iframe> opening and closing tags and include the src attribute, which specifies the URL of the webpage to be displayed. Here is an example of an <iframe> tag:

<iframe src="https://www.example.com"></iframe>

Setting the Height and Width of the <iframe>

You can use the height and width attributes to adjust the size of the <iframe> according to your requirements. The height and width attributes take values in pixels, percentage, or em. Here is an example:

<iframe src="https://www.example.com" height="500" width="500"></iframe>

Controlling Display Features with sandbox and allow attributes

You can use the sandbox and allow attributes to control various features of the <iframe> such as allowing fullscreen display, enabling the execution of scripts within the <iframe>. Here is an example:

<iframe
  src="https://www.example.com"
  sandbox="allow-modals allow-forms"
></iframe>

Using Alternative Content

It is recommended that <iframe> tags be used with an alternative content to be displayed if the browser does not support inline frames. You can add the alternative text between the opening and closing <iframe> tags, which will be displayed if the <iframe> tag is not supported. Here is an example:

<iframe src="https://www.example.com" height="500" width="500"
  >Your browser does not support inline frames.</iframe
>

Summary

Congratulations! You have learned how to use the <iframe> tag to display another webpage within your current webpage. Remember to set the src attribute to the URL of the webpage you want to display, and use the height and width attributes to adjust the display according to your requirements. You can also use the sandbox and allow attributes to control various features of the <iframe>. Additionally, be sure to include alternative content for browsers that do not support the <iframe> tag.