The <iframe> tag specifies an inline frame. An iframe is used to display a web page within a web page.
Syntax for adding an iframe:
<iframe src="URL"></iframe>
When adding width and height:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
SAMPLE
save this project as index. html. You can open a notepad, dreamweaver or anything you want as long as it's compatible in making html or css code.
<html> <head> <style type="text/css"> *{ margin:0px; padding:0px; } #main{ position:relative; margin:10px auto; width:95%; } h3{ text-align:center; background:#fafafa; } #left{ width:25%; background:gold; } #right{ position:relative; float:right; background:maroon; width:75%; text-align:center; } iframe.color{ width:95%; margin:5px; border:1px solid #131313; height: 100%; } li{ padding: 0; margin: 0; border-bottom: 1px solid #1b1b1b; list-style-type:none; } li a{ display: block; padding: 10px; background: black; text-align:center; color: white; text-decoration: none; } li a:hover{ background: red; color: black; } li:nth-child(1) a:hover{ background: red; } li:nth-child(2) a:hover{ background: blue; } li:nth-child(3) a:hover{ background: green; } li:nth-child(4) a:hover{ background: white; } li:nth-child(5) a:hover{ background: yellow; } li:nth-child(6) a:hover{ background: pink; } li:nth-child(7) a:hover{ background: purple; } </style> </head> <body bgcolor="grey"> <div id="main"> <h3>IFRAME SAMPLE</h3> <div id="right"> <iframe class="color" src="red.html" name="sampletarget"> </iframe> </div> <div id="left"> <ul> <li><a href="red.html" target="sampletarget">RED</a></li> <li><a href="blue.html" target="sampletarget">BLUE</a></li> <li><a href="green.html" target="sampletarget">GREEN</a> </li> <li><a href="white.html" target="sampletarget">WHITE</a> </li> <li><a href="yellow.html" target="sampletarget">YELLOW</a> </li> <li><a href="pink.html" target="sampletarget">PINK</a> </li> <li><a href="purple.html" target="sampletarget">PURPLE</a> </li> </ul> </div> </div> </body> </html>
now lets add another page to link it on our index. Name this page as red.html
<html> <head> </head> <body bgcolor="red"> </body> </html>
still confused? you can download the the source code here Click Me
