Using Iframes on your webpage
Posted in HTML | Posted on 25-04-2009-05-2008
In the previous tutorial we learned the concept of frames. In this tutorial we will be introduced to the iframe tag. The concept is somewhat similar to that of frames, the difference being we are displaying another document within our web page.
Let’s work on this example. Copy and Paste the following:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>iframes</title>
</head>
<body>
<p>Checkout Learn HTML Online</p>
<iframe src=”http://www.learnhtmlonline.com” style=”width:800px; height:400px”>
<p>Sorry but your browser doesn’t support iframes.</p>
</iframe>
</body>
</html>
Save this file as iframes.htm, and open it in your browser.
When you open this page in your browser, you should see “Checkout Learn HTML Online”. Beneath that line should be your iframe (inline frame) displaying the actual website of LearnHTMLOnline.com.
Understanding The Code
Our lines of code that we are concerned about is:
<p>Sorry but your browser doesn’t support iframes.</p>
</iframe>
We define the iframe with the <iframe> tag. It’s main attribute, src=”http://www.learnhtmlonline.com”. The src is the web page we want our iframe to display. The width and height simply define the size of our iframe within the web page.
The message, “<p>Sorry but your browser doesn’t support iframes.</p>” is simply a generic output message for browsers that don’t support iframes. Most modern browsers do support iframes.
Final Word
As you can see, there really isn’t much to iframes. You simply define the website you want to display, and then choose the size. If you have to use frames on your website, iframes is another option that you can use. When you want to display the content directly from another site, you will most likely use iframes.