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.
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.
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 HTML Advanced Summary.
The <iframe> inline frame tag