home
Side Bar


Tools


Colors


Testbed


Source

me counter


Side Bars for WebTv/MsnTv Users Explained.


The first order of business is to set up our document properly. The available screen dimensions are 560x387 pixels so we are going to use vspace=0 and hspace=0 in the <body> body tag to acheive this.


<html>
<head>
<title>Your page title</title>
</head>
<body bgcolor="color" text="color" link="color" vlink="color" hspace=0 vspace=0 fontsize=medium>

Hey what is this fontsize=medium stuff. Well using this attribute you can control the size of the text that your viewer sees, regardless of their text setting. The available values are small, medium and large. Notice that there is not a space between font & size.


The <sidebar> Tag

The most important thing to remember here is that the <sidebar> tag must immediately follow the <body> tag. Nothing can precede it for it to function properly. The only attribute used in this tag is width. 100 was used in this tutorial, but any width may be used. However, the width used will be taken from the available screen width of 560. So if you were to use a width of 300, as an example, you would only have 260 pixels remaining for your documents data. Prudence will dictate the width to be used.


<html>
<head>
<title>Your page title</title>
</head>
<body bgcolor="color" text="color" link="color" vlink="color" hspace=0 vspace=0 fontsize=medium>
<sidebar width=100>

Now that we have the tag entered corectly, we will now add some data to it so that it will become functional. This will be accomplished by using a table. The height of the sidebar will never exceed 387 pixels so that is the height we will use for the table. You can set the table height to more than 387, but it will not be displayed. The width of the table will be set to the sidebar width with the cellpadding and cellspacing set at 0.


The <sidebar> Data

<body bgcolor="color" text="color" link="color" vlink="color" hspace=0 vspace=0 fontsize=medium>
<sidebar width=100>
<table cellpadding=0 cellspacing=0 border=0 width=100 height=387>
<tr><td align=center valign=top>
Your data or links here
</td></tr></table>
</sidebar>

There is one very important deviation from the link and vlink colors used in the body tag. They will not work in the side bar. You must therefore set the text links like this

<a href="url"><b><font color="color" size="size">Text</font></b></a>

or you will get the default link colors.


The Prof will now write a small sidebar code summing up what has been shown here so far. Text links will be used and they will be separated by the <hr> Horizontal Rule tag. An invertborder attribute will be used which has the effect of showing the line in relief. Blue will be used for the table color and the links wil be white.


<html>
<head>
<title>Your page title</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff" hspace=0 vspace=0 fontsize=medium>
<sidebar width=100>
<table cellpadding=0 cellspacing=0 border=0 width=100 height=387 bgcolor="#0000ff">
<tr><td align=center valign=top>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 1</font></b></a>
<hr width=90% invertborder>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 2</font></b></a>
<hr width=90% invertborder>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 3</font></b></a>
<hr width=90% invertborder>
<br><br>
</td></tr></table>
</sidebar>


The only thing now left to do is add the coding to present the data that you wish to enter and have displayed to the right of the sidebar. This is the simplest step. Well sorta. Purists will want their page to display the same for PC's and MsnTv. That coding will be shown at the bottom of the page and will not be explained here as this tutorial is designed primarily for the MsnTv user.

After the closing </sidebar> tag, we just add the <div align=center> tag and continue on with our the main body of our document and then close our document in the normal fashion. Neat Huh!!!


The Completed Document

<html>
<head>
<title>Your page title</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffffff" vlink="#ffffff" hspace=0 vspace=0 fontsize=medium>
<sidebar width=100>
<table cellpadding=0 cellspacing=0 border=0 width=100 height=387 bgcolor="#0000ff">
<tr><td align=center valign=top>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 1</font></b></a>
<hr width=90% invertborder>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 2</font></b></a>
<hr width=90% invertborder>
<br><br>
<a href="url"><b><font color="#ffffff" size="3">Link 3</font></b></a>
<hr width=90% invertborder>
<br><br>
</td></tr></table>
</sidebar>
<div align=center>
You main document coding goes here
</div>
</body>
</html>


For The Purists

Essentially what you do is put the whole page in a 2 celled table with the vertical alignment set at top. The opening <sidebar> tag goes after the body tag with the closing </sidebar> tag inserted after the close of the sidebar table. Set the table width at 560. The 1st cell has a width equal to the sidebar width and set the 2nd cell's width at 100%. You can source the page to see how it was done.


Above all, just relax and have fun. You can use the Source Link on the sidebar to see how this page was constructed or use the Testbed to practice any of the coding shown here.
Yes I'am a purist and this page was constructed using the 2 celled table instructions with a few MsnTv tags thrown in.