FRAMES If you want to have a neat side bar with links that stay there so you can flit about pages that populate the main part of the screen frames is one way to do it.
Frames start page will read like this, if you want frames dominant call this index.htm and index homepage. This just means frames will be the default opening and only links going to homepage.htm will be no frames.
<!-- start homepage.htm here -->
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="html code site with frames no.">
<meta name="KeyWords" content="frames,font,image,java,htm,html,web,www,internet,edit">
<meta name="GENERATOR" content="Mozilla/4.8 [en] (Windows NT 5.0; U) [Netscape]">
<meta name="Author" content="nik">
<title>HTLM HOME PAGE (with frames)</title>
<link rel="shortcut icon" href="favicon.ico" >
<frameset BORDER=0 FRAMESPACING=0 FRAMEBORDER=0 COLS="150,*">
<frame NAME="left" SRC="panel.htm" SCROLLING="auto" MARGINWIDTH="2"
MARGINHEIGHT="1" FRAMEBORDER="no" BORDER="1" NORESIZE>
<frame NAME="body" SRC="index.htm" SCROLLING="auto" MARGINWIDTH="2"
MARGINHEIGHT="1">
</frameset>
<noframes>
</head>
<body>
<a href="”index.htm”">no frames version</a></noframes><!-- end homepage.htm here -->
</body>
</html>
<!-- end homepage.htm here -->This sets your frame names, sizes and positions and what will be in them when it starts. As you can see I'm using area down the left side 150 pixels wide called "left" that calls in panel.htm. The rest of the area is a frame called "body" which starts with index.htm
So now you need two files my panel.htm looks like this.
<!-- start panel.htm here -->
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.8 [en] (Windows NT 5.0; U) [Netscape]">
<meta name="Author" content="nik">
<meta name="Description" content="side panel with links">
<title>PANEL</title>
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body text="#000000" bgcolor="#FFFF99" link="#0000EE" vlink="#551A8B" alink="#FF0000"><center><a href="button.htm" TARGET="body"><img SRC="but_butt.gif" ALT="Buttons" BORDER=0 Title="Buttons" height=32 width=128></a>
<br><a href="color.htm" TARGET="body"><img SRC="but_col.gif" ALT="Color Page" BORDER=0 Page" height=32 width=128></a>
<br><a href="content.htm"><img SRC="but_con.gif" ALT="Content and Keywords" BORDER=0 title="Content and Keywords" height=32 width=128></a>
<br><a href="email.htm" TARGET="body"><img SRC="but_ep.gif" ALT="Emails" BORDER=0 title="Emails" height=32 width=128></a>
<br><a href="error.htm" TARGET="body"><img SRC="but_err.gif" ALT="Error Codes" BORDER=0 title="Error Codes" height=32 width=128></a>
<br><a href="font.htm" TARGET="body"><img SRC="but_font.gif" ALT="Fonts" BORDER=0 title="Fonts" height=32 width=128></a>
<br><a href="form.htm" TARGET="body"><img SRC="but_form.gif" ALT="Forms" BORDER=0 title="Forms" height=32 width=128></a>
<br><a href="frames.htm" TARGET="body"><img SRC="but_frm.gif" ALT="Frames" BORDER=0 title="Frames" height=32 width=128></a>
<br><a href="images.htm" TARGET="body"><img SRC="but_img.gif" ALT="Images" BORDER=0 title="Images" height=32 width=128></a>
<br><a href="java.htm" TARGET="body"><img SRC="but_java.gif" ALT="Java" BORDER=0 title="Java" height=32 width=128></a>
<br><a href="links.htm" TARGET="body"><img SRC="but_link.gif" ALT="Links Page" BORDER=0 title="Links Page" height=32 width=128></a>
<br><a href="lists.htm" TARGET="body"><img SRC="but_list.gif" ALT="Lists Page" BORDER=0 title="List Page" height=32 width=128></a>
<br><a href="map.htm" TARGET="body"><img SRC="but_map.gif" ALT="Map Links Page" BORDER=0 title="Map Links Page" height=32 width=128></a>
<br><a href="redirect.htm" TARGET="body"><img SRC="but_goto.gif" ALT="Redirect Page" BORDER=0 title="Redirect Page" height=32 width=128></a>
<br><a href="scroll.htm" TARGET="body"><img SRC="but_scrl.gif" ALT="Scrolling Text Page" BORDER=0 title="Scrolling Text Page" height=32 width=128></a>
<br><a href="start.htm" TARGET="body"><img SRC="but_star.gif" ALT="Start-Up Page" BORDER=0 title="Start-Up Page" height=32 width=128></a>
<br><a href="table.htm" TARGET="body"><img SRC="but_tabl.gif" ALT="Tables Page" BORDER=0 title="Tables Page" height=32 width=128></a>
<br><a href="index.htm" TARGET="_top"><img SRC="but_nf.gif" BORDER=0 height=32 width=128></a>
<br><script type=text/javascript>
var _u = "html";
var _d = "htmlcode.plus.com";
var _l = _u + "@" + _d;
var _m = "CONTACT US";
document.write("<a href='mailto:"+_l+"'>"+_m+"</a>");</script>
</center>
</body>
</html>
<!-- end panel.htm here -->
Most of the links target "body" so the side bar stays and changes what's in "body".
The last link's is target is "_top" which overwrite all frames so in this if use the hompage page you have a side bar or frames and if you use index it all works without the side bar or frames.
You have to go careful that if on the pages that you are going to you have a return to home link it must link back to index.htm not homepage.htm as if it links to homepage that will then set up 2 frames in the "body" frame so you'll have 2 side bars next to each other and this could go on until fill it with side bars.
Probably easier if I'd named homepage as withframes and index as noframes but of course it make it look odd and without and index it wouldn't autoload.
You can also use target "_blank" which will start the page in a new tab.
The target "_blank" command can be used without frames, so the new link starts on a new tab or window.
If your index contains all the links that the side bar does it then means you can give people the choice
with or without frames?
<p><font size=-1><a href="index.htm" TARGET="_top">NO SIDE MENU</a></font>And the third file is index.htm
<!-- start index.htm here -->
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.8 [en] (Windows NT 5.0; U) [Netscape]">
<meta name="Author" content="nik">
<meta name="Description" content="html code site, how to write web pages easily">
<meta name="KeyWords" content="write,htm,html,web,www,internet,edit">
<title>HTML HOME PAGE (no frames)</title><link rel="shortcut icon" href="favicon.ico" >
</head>
<body text="#000000" bgcolor="#FFFF99" link="#0000FF" vlink="#CC33CC" alink="#FF0000" <center>
<table CELLSPACING=5 CELLPADDING=5 WIDTH="80%" >
<caption><i><font color="#FF0000"><font size=+2>Welcome To HTML CODE PAGE</font></font></i></caption><tr>
<td ALIGN=LEFT><a href="button.htm"><img SRC="but_butt.gif" ALT="Buttons" BORDER=0 Title="Buttons" height=32 width=128></a></td><td ALIGN=LEFT><b><i><font size=+1><a href="button.htm">Buttons</a></font></i></b>
<br><font size=+1> - Buttons Hints and Tips</font></td>
</tr><tr>
<td><img SRC="but_con.gif" ALT="Content and Keywords" BORDER=0 title="Content and Keywords" height=32 width=128></td><td><b><i><font size=+1><a href="content.htm">Content and Keyword</a></font></i></b>
<br><font size=+1> - Buttons Hints and Tips</font></td>
</tr><tr>
<td ALIGN=LEFT><a href="color.htm"><img SRC="but_col.gif" ALT="Color Page" BORDER=0 Title="Color Page" title="Color Page" height=32 width=128></a></td><td ALIGN=LEFT><b><i><font size=+1><a href="color.htm">Color Page</a></font></i></b>
<br><font size=+1>(all you wanted to know about Color but were too afraid
to ask)</font></td>
</tr><tr>
<td ALIGN=LEFT><a href="email.htm"><img SRC="but_ep.gif" ALT="Emails" BORDER=0 title="Emails" height=32 width=128></a></td><td ALIGN=LEFT><b><i><font size=+1><a href="email.htm">Emails Page</a></font></i></b>
<br><font size=+1>- All about Emails</font></td>
</tr><tr>
<td><a href="error.htm"><img SRC="but_err.gif" ALT="Error Codes" BORDER=0 title="Error Codes" height=32 width=128></a></td><td><b><i><font size=+1><a href="error.htm">Error Codes</a></font></i></b>
<br><font size=+1>- 404 etc.</font></td>
</tr><tr>
<td><a href="font.htm"><img SRC="but_font.gif" ALT="Fonts" BORDER=0 title="Fonts" height=32 width=128></a></td><td><b><i><font size=+1><a href="font.htm">Font Page</a></font></i></b>
<br><font size=+1>- useful info for Font users. </font></td>
</tr><tr>
<td><a href="form.htm"><img SRC="but_form.gif" ALT="Forms" BORDER=0 title="Forms" height=32 width=128></a></td><td><b><i><font size=+1><a href="form.htm">Forms Page</a></font></i></b>
<br><font size=+1>- useful info for Font users. </font></td>
</tr><tr>
<td><a href="frames.htm"><img SRC="but_frm.gif" ALT="Frames" BORDER=0 title="Frames" height=32 width=128></a></td><td><b><font size=+1><i><a href="frames.htm">Frames Page</a></i> or </font></b>
<br><b><i><font size=+1><a href="homepage.htm">Try the site with frames</a></font></i></b></td>
</tr><tr>
<td><a href="images.htm" title="Images"><img SRC="but_img.gif" ALT="Images" BORDER=0 height=32 width=128></a></td><td><font size=+1><a href="images.htm">Images</a></font>
<br><font size=+1>Photo's, drawings etc. how to put them in a page</font></td>
</tr><tr>
<td><a href="java.htm"><img SRC="but_java.gif" ALT="Java" BORDER=0 title="Java" height=32 width=128></a></td><td><b><i><font size=+1><a href="java.htm">Java</a></font></i></b>
<br><font size=+1>- Last Updated and other codes</font></td>
</tr><tr>
<td><a href="links.htm"><img SRC="but_link.gif" ALT="Links Page" BORDER=0 title="Links Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="links.htm">Link Pages</a></font></i></b>
<br><font size=+1>- links</font></td>
</tr><tr>
<td><a href="lists.htm"><img SRC="but_list.gif" ALT="Lists Page" BORDER=0 title="List Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="lists.htm">Lists</a></font></i></b>
<br><font size=+1>- how to different list types</font></td>
</tr><tr>
<td><a href="map.htm"><img SRC="but_map.gif" ALT="Map Links Page" BORDER=0 title="Map Links Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="map.htm">Map links</a></font></i></b>
<br><font size=+1>- how to write image co-ordinated links </font></td>
</tr><tr>
<td><a href="redirect.htm"><img SRC="but_goto.gif" ALT="Redirect Page" BORDER=0 title="Redirect Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="redirect.htm">ReDirect</a></font></i></b>
<br><font size=+1>- Old Site or Page send people to the new one.</font></td>
</tr><tr>
<td ALIGN=LEFT><a href="scroll.htm"><img SRC="but_scrl.gif" ALT="Scrolling Text Page" BORDER=0 title="Scrolling Text Page" height=32 width=128></a></td><td ALIGN=LEFT><b><i><font size=+1><a href="scroll.htm">Scrolling text</a></font></i></b></td>
</tr><tr>
<td><a href="start.htm"><img SRC="but_star.gif" ALT="Start-Up Page" BORDER=0 title="Start-Up Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="start.htm">Start-Up</a></font></i></b></td>
</tr><tr>
<td><a href="table.htm"><img SRC="but_tabl.gif" ALT="Tables Page" BORDER=0 title="Tables Page" height=32 width=128></a></td><td><b><i><font size=+1><a href="table.htm">Tables</a></font></i></b></td>
</tr><tr>
<td><script type=text/javascript>
var _u = "html";
var _d = "htmlcode.plus.com";
var _l = _u + "@" + _d;var _m = "CONTACT US";
document.write("<a href='mailto:"+_l+"'>"+_m+"</a>");</script>
</td><td><a href="mailto:html@htmlcode.plus.com"><img SRC="email.jpg" ALT="Click to email" BORDER=0 height=37 width=397></a></td>
</tr>
</table><blockquote> </blockquote>
</body>
</html>
<!-- end index.htm here -->