Lesson 22: Iframes

Overview

In this HTML lesson, we demonstrate how to use iframes to embed HTML pages within other HTML pages. We begin with a simple iframe and show how to open our website inside it. Next, we demonstrate how to recursively include a page within itself. Finally, we show how make a recursive inclusion of three pages and use it to demonstrate the target attribute for links.

A Simple Iframe

We begin with a simple example of an iframe. We have an iframe element with main page of xoax.net as the value of the source attribute. The width and height are set to 1000 pixels and 500 pixels, respectively. This just create a 1000 by 500 pixel frame that holds the main page of xoax.net.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <iframe src="https://xoax.net/" width="1000px" height="500px"></iframe>
  </body>
</html>

Output

Recursive Iframes

The interesting thing about iframes is that we can include a web page within itself. When we do this, the recursive inclusion is limited to one inclusion. The links in the page allow us to see where pages open within a frame when they are linked.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Go to <a href="https://xoax.net/">xoax.net</a></p>
    <iframe src="Example2.html" width="90%" height="500px"></iframe>
  </body>
</html>

Output

The Target Attribute

To illustrate the target attribute, we have a 3 layered recursion with four links in one of the HTML documents with the four target attribute values: _blank, _self, _parent, and _top. We can click on these to see that the _blank value causes the linked page to open in a new tab, the _self value causes the linked page to open in the same frame, the _parent value causes the linked page to open in the frame containing the link, and the _top value causes the linked page to open in the highest level container or the main window.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Example 3</p>
    <iframe src="Example4.html" width="90%" height="500px"></iframe>
  </body>
</html>

Output

A Recursion Layer

This is the middle recursion layer.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Example 4</p>
    <iframe src="Example5.html" width="90%" height="500px"></iframe>
  </body>
</html>

Four Targets

The last recursion layer contains four different values for the target attribute.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Example 5
      <a href="https://xoax.net/" target="_blank">_blank</a>
      <a href="https://xoax.net/" target="_self">_self</a>
      <a href="https://xoax.net/" target="_parent">_parent</a>
      <a href="https://xoax.net/" target="_top">_top</a>
    </p>
    <iframe src="Example3.html" width="90%" height="500px"></iframe>
  </body>
</html>