iframe and CSS3
Mastering CSS3 - Part 15
Forward: In this part of the series, we look at iframes.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
A Frame
A frame is a rectangular space in a web page that receives an html document. A web page can consist of one or more frames. There are two types of frames: normal frame and iframe. The html frameset element can be used to place normal frames in different positions on the web page (screen). iframe stand for Inline Frame. iframe is an inline element similar to the img (image) element. You do not use the frameset element to position the iframe in a web page. You just fit it in a line (of text) as you do with the img element. You can also say that the iframe is different from the normal frame in the sense that it would fit inside another frame (html document) in a line.
The iframe Element
The iframe is a double tag element. The start and end tags are, <iframe> and </iframe> The iframe has all the properties that the normal frame has. Frame properties can be seen in the first tutorial of this series. The link is given below at the end of this tutorial. The iframe content is an html document with the extension, “.htm” or “.html”, saved as a file in a server, like other html files.
Illustration
Type (copy and paste) and save the following html document with the name, ifr.htm, in a directory. This html document will serve as the content of an iframe.
<DOCTYPE HTML>
<html>
<head>
<title>Content for iframe</title>
</head>
<body>
<p>An html document.</p>
</body>
</html>
Save the following code in the same directory with any name of your choice (with extension, “.htm” or “.html”). It is the web page that will have the iframe as an inline element:
<DOCTYPE HTML>
<html>
<head>
<title>Content for iframe</title>
</head>
<body>
<p>Some text on the left <iframe src="ifr.htm" width="40%" height="40%"></iframe>Some
text on the right</p>
</body>
</html>
An iframe can be floated to the left or to the right, using the CSS float property. An iframe is already an inline element, so you do not have to convert it to an inline element before you float it. Read and try the following code, replacing the web page above with it:
<DOCTYPE HTML>
<html>
<head>
<title>Content for iframe</title>
</head>
<body>
<iframe src="ifr.htm" style="float:right" width="40%" height="40%"></iframe>
<p>A paragraph</p>
<p>Another paragraph</p>
</body>
</html>
Floating Left or Right
A web page is essentially text. So it is good to float an element to the right, so that as the user opens the page, he should see the text first before he sees the floated element, as he reads (scans with his eyes) from left to right.
Content between the iframe Tags
What goes in between the iframe tags is not the web page document. The web page document is downloaded by the src attribute. What goes in between the tags is a message to the user, in case the user’s browser does not support iframes. So if the browser supports iframes, this message will not be displayed. If the browser does not support iframes, this message will be displayed. Read and try the following, code, and you will see the message, if your browser does not support iframes:
<DOCTYPE HTML>
<html>
<head>
<title>Content for iframe</title>
</head>
<body>
<p>Some text on the left
<iframe src="ifr.htm" width="40%" height="40%">
Your browser does not support iframes!
</iframe>
Some text on the right</p>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT