• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to create and implement an iframe
#1
How to create and implement an iframe

This is a tutorial on how to create an iframe then implement it into a web page.
I've just had to refresh my memory since the last time i did this over a year ago, i remembered the basics but not all of the detail.

Why would you want to use iframes?

The simple answer for me was for a navigation pane, why put the navigation pane containing links on every page separately? because when ever you wanted to change a link or add a new one you'd have to do it several, even a hundred times. Not anymore!

What you're going to need

My website is going to be split up into two main sections, a left and a right. The left will contain the links and the right will contain the web page(s). There are headers and other things but you can add those later if you feel like it.


1) Left sidebar: sidebar.html

Take note of the target, target="sidebar_b", this means that it'll load the url in to your sidebar_b iframe.

[code=html]<html>
<head>
</head>
<body>

Navigation<br /><br />

- <a href="home.html" target="sidebar_b" title="mcompute - home">Home</a><br />
- <a href="aboutme.html" target="sidebar_b" title="mcompute - about me">About me</a><br />
- <a href="contact.html" target="sidebar_b" title="mcompute - contact me">Contact me</a><br />

</body>
</html>[/code]

2) Index page: index.html

[code=html]<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mcompute.co.uk</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<!-- SIDEBAR -->
<div id="sidebar">
<iframe src="sidebar.html" name="sidebar_a" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<!-- END SIDEBAR -->

<!-- MAIN -->
<div id="main">
<iframe src="home.html" name="sidebar_b" frameborder="0" width="810px" height="100%" scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<!-- END MAIN -->

</body>
</html>[/code]

3) Right / main page: home.html

[code=html]<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mcompute.co.uk</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!-- MAIN -->
<div id="main">
<br />
<u><b>mcompute iframe tutorial</b></u><br />
<p>
Writing would go here.
</p>
<!-- END MAIN -->

</body>
</html>[/code]


You'll have to try it out yourself, for a live demo go here http://markwood.co.cc

  Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  How to create a Virtual Directory (folder dir) in IIS Mark 0 9,058 06-10-2012, 09:48 PM
Last Post: Mark
  [CSS] How to create rounded / curved boxes Mark 0 6,124 24-10-2010, 10:04 PM
Last Post: Mark

Forum Jump: