html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Advanced

Lesson 7 - Inline Frames

In this tutorial we learn how to define an inline window that holds another document.

The iframe Tag

The <iframe> tag and its' closing </iframe> tag are used to define an inline frame.

We will fly in the face of convention here and use the transitional DOCTYPE in this lesson. This is because the <iframe></iframe> element is not allowed in strict mode. This tag is so widely used that we feel it would be a shame to leave it out of our HTML lessons and for this reason it's included here. By using the transitional DOCTYPE this HTML will still validate using the W3C validator.

  • Browsers operate the 'same origin policy', which means we cannot successfully import a document from a different domain, subdomain, or protocol.

Viewing The Tag

Lets see how to use inline frames. Open the file with Notepad we created and tested in Lesson: 6 Advanced Forms

You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_6_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML Tutorials - Advanced HTML Lesson 7 - Inline Frames
</title>
  <base  href="http://htmldoctor.info/" />
</head>
<body>
<!--Inline Frames -->
<h2>Simple Example Of An Inline Frame</h2>
<iframe src="http://htmldoctor.info/htmlbasics/lotsofpies.html" 
        width="100%" height="400">Title here for browsers not supporting iframes
</iframe>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_7_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser something like the following image.

notepad

Reviewing Our Changes

The Inline Frame

The <iframe></iframe> element allows us to import documents into our webpages from the same domain. In our example we are simply importing this page again and it acts the same. Of course as with all the copied code in these lessons this is run locally on your computer and so the 'same origin policy' does not apply.

Page Example

The example below is embedded in the page so you can see an inline frame in real time and is a snapshot of the jQuery Intermediate Tutorials - CSS Other Properties lesson taken from another of my tutorial sites.

The following html code is used to render an iframe inline in real time.


<iframe src="http://learnjavascript.co.uk/jq/reference/ap/position2.html" width="100%" height="300" />
</iframe>



Lesson 7 Complete

Try to create your own inline frames within a web page, using the other attributes for this tag shown in the reference section, to get used to using it.

What's Next?

In the next lesson we bring all we have learnt together in this section in the HTML4 Advanced Summary.



Advanced Forms  << Prev     Next >>  HTML4 Advanced Summary

HTML4 Reference

The <iframe> inline frame tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>