Inline Frames
Inline frames are cool. They work very much like regular frames, but the frame is embedded in the document like a window. Below is an example.
What you are looking at above is a complete and independent HTML document... just like in regular frames. You can view it normally in your browser here.
The basic coding for inline frames is this...
<iframe src="hello.html"></iframe>
(The technophiles among us might be quick to point out that HTML is markup rather than coding. Technically they are correct. With that settled, let's get back to our coding ;-)
Let's make a page with an inline frame. Copy the following and save it as hello.html.
<html> <head> <title></title> </head> <body bgcolor="#ffccaa"> Hello there!<br> I'm an inline frame! </body> </html>
Then copy the following, save it as inline.html and open it in your browser.
<html>
<head>
<title></title>
</head>
<body>
<iframe src="hello.html"></iframe>
</body>
</html>
Pretty simple, wouldn't you say?
For users of very old browsers, or for the viewers using software that have difficulty with frames in general, it is wise to include some sort of alternate content for them. Much like the <noframes> tag we discussed earlier, any content included within the <iframe> tags will show up for those who cannot view the contents of the inline frame.
<html>
<head>
<title></title>
</head>
<body>
<iframe src="hello.html">This page uses inline frames</iframe>
</body>
</html>
Now of course if you are using a browser that supports the iframe tag, the above page will look fine and you won't see any message. What I'll do is munge the iframe tag... you'll then be able to see how the no-iframes message looks...
<html> <head> <title></title> </head> <body> <xiframe src="hello.html">This page uses inline frames</xiframe> </body> </html>
As you may have guessed, you can use any normal body markup between the iframe tags....
<html> <head> <title></title> </head> <body> <iframe src="hello.html"> <font face="arial,sans-serif" color="#ff0000"> This page uses inline frames and it would<br> seem that your browser doesn't support them.<br> You'll have to <a href="hello.html">click here</a> to see hello.html.</font> </iframe> </body> </html>
VIEW IT
VIEW IT (with the iframe tag munged)
| Frames Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
| Frames Templates HTML 4.0 Reference Barebones HTML Guide |
|
|
|
|
