HTML - iFrames

The <iframe> element in HTML is used to embed another HTML document within the current document. It allows you to display content from another source, such as a different website or a different page on the same site, within a designated area on your web page. Here is a tutorial explaining the usage, attributes, and examples of iframes:

The <iframe> element has an opening tag <iframe> and a closing tag </iframe>. The content to be displayed within the iframe is defined between these tags.

<iframe src="url" " height="height_value" frameborder="frameborder_value" scrolling="scrolling_value"></iframe>

Attributes:

  • src: Specifies the URL of the content to be displayed within the iframe.
  • width: Defines the width of the iframe in pixels or as a percentage of the parent container.
  • height: Defines the height of the iframe in pixels or as a percentage of the parent container.
  • frameborder: Specifies whether or not to display a border around the iframe. Common values are 0 (no border) and 1 (border displayed).
  • scrolling: Defines the scrolling behavior of the iframe. Common values are "auto" (scrollbars appear as needed), "yes" (always show scrollbars), "no" (no scrollbars), and "hidden" (scrollbars hidden).
  • Other optional attributes include name, sandbox, allowfullscreen, allow, etc.
<iframe src="https://www.example.com" " height="300" frameborder="0" scrolling="auto"></iframe>

In this example, an iframe is created with the content sourced from "https://www.example.com". It has a width of 500 pixels, a height of 300 pixels, no border, and scrollbars that appear automatically when needed.

Remember to replace url, width_value, height_value, frameborder_value, and scrolling_value with the appropriate values based on your requirements.

I hope this tutorial helps! If you have any further questions, feel free to ask.