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.
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.
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.
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.
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.
In the next lesson we bring all we have learnt together in this section in the HTML4 Advanced Summary.
The <iframe> inline frame tag