Frames and Lists in HTML - Displaying Frame with the Iframe
(Page 3 of 6 )
The Inline frame allows you to create a frame with an HTML page, as opposed to displaying an HTML page within a frame. Here is how you do it:
<html>
<body>
<p> <h1> Here is some code</h1>
<p> blahkhskjhkashdkashksahdkas
<br>hkhsadkhkhsakhkasjhdkjhaskdhaskdhakshdkasjhkdhaskjdhas
<br>kjhdkashdkashdkashkahskhjaskjhaskjdhkasjhdkashdkasjhdk
<br>ashdkasjhkhaskdhaksjhdkashdkashkdhakshkash</p>
<p><h2> Want to see a cool frame?<h2></p>
<iframe src="http://www.devshed.com"></iframe>
</body>
</html>
The line <iframe src=http://www.devshed.com></iframe> creates the inframe inside the page and displays the Developer Shed website within it.
Note that if you want to link to a page outside of your own you must include the http:// portion in the url.
Creating Frames that Cannot Be Resized
You may or may not have noticed that when you hover over the lines that separate certain frames, you can resize them. If you want to ensure that visitors to your website cannot do so, you can program your frames using noresize, like so:
<html>
<frameset rows="20%,80%">
<frame noresize="noresize" src="firstframe.htm">
<frameset cols="20%,80%">
<frame noresize="noresize" src="secondframe.htm">
<frame noresize="noresize" src="thirdframe.htm">
</frameset>
</frameset>
</html>
Arnchors and Links
You may have a table of contents page on your site, similar to our navigation frame, with the content in the right frame. When users click on a link in the Table of Contents section, instead of loading a new page, it goes to a specific section on the Contents page. You can do so in the following manner:
<a href ="contents.htm" target ="contentsframe">Link with No Anchor</a><br>
<a href ="contents.htm#chapter01" target ="contentsframe">Link with an Anchor</a>.
This works like the Anchor tag in our previous tutorial on working with Links in HTML. When the use clicks the link embedded in the text “Link with No Anchor,” it simply loads the contents page. When the user clicks the link stored in the text “Link with an Anchor,” it loads the contents page and takes you to the anchored section (in this case, Chapter 01).
Next: Lists in HTML >>
More HTML Articles
More By James Payne
/ 5 
