Inline FramesS2C Home « 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 Tutorials - Advanced HTML Lesson 7 - Inline Frames
</title>
  <base  href="http://server2client.com/" />
</head>
<body>
<!--Inline Frames -->
<h2>Simple Example Of An Inline Frame</h2>
<iframe src="http://server2client.com/jquery1ref/scrolltop.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.

save iframes

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.

iframes

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.

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 HTML Advanced Summary.

HTML4 Reference

The <iframe> inline frame tag

go to home page Homepage go to top of page Top