08-11-2010, 12:13 AM
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
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