Maddog's HTML for Real People Chapter 11, Lesson 8


[INDEX]         Ch 11, L 8 - Simple Clickable Sidebar
In this lesson, we present a web page with a clickable sidebar. This technique is a simple way to graphically enhance your web page, utilizing an uncomplicated borderless table.

Demonstration Follows:

    A Page With a Clickable Sidebar
   
Hi! Know What?
The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie.

First idea
Second Idea
Third Idea
Fourth Idea
 

(Demonstration Ends)

This page was really intended to be used with a background image (remember the 'BACKGROUND' attribute for the 'BODY' tag?), which gives the impression of a divided page with a sidebar of clickable text-links . You can see the same HTML source code (demonstrated above) at work with the background image -here- and return to this page for the description and source code. To spruce the page up even more, the clickable text-links could be replaced with clickable icon images, and/or the caption-text might be replaced with a logo/image.

HTML Source Code Follows:

<HTML>
<HEAD>
<TITLE>Chapter 11, Lesson 8 Example </TITLE>
</HEAD>
<BODY BACKGROUND="paper1.gif">

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=560 >
<TR>
   <TD WIDTH=110 HEIGHT=75> </TD>
   <TD WIDTH=50> </TD>
   <TD WIDTH=400 ALIGN="CENTER" VALIGN="MIDDLE"><FONT COLOR="BLUE" SIZE="+2">A Page With Sidebars</FONT></TD></TR>
<TR>
    <TD WIDTH=110> </TD>
    <TD WIDTH=50> </TD>
    <TD WIDTH=400 ALIGN="LEFT" VALIGN="TOP" ROWSPAN=6>
        <CENTER><FONT COLOR="MAROON" SIZE="+1">Hi!  Know What?</FONT><HR WIDTH=25%></CENTER>The quick brown fox jumps over the lazy stupid doggie.  The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. 
<P>
But <I>really</I>, you know...
<P>
The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie. The quick brown fox jumps over the lazy stupid doggie.
    </TD></TR>
<TR><TD WIDTH=110 HEIGHT=25 ALIGN="RIGHT"><A HREF="idea1.htm">First idea</A></TD></TR>
<TR><TD WIDTH=110 HEIGHT=25  ALIGN="RIGHT"><A HREF="idea2.htm">Second Idea</A></TD></TR>
<TR><TD WIDTH=110 HEIGHT=25  ALIGN="RIGHT"><A HREF="idea3.htm">Third Idea</A></TD></TR>
<TR><TD WIDTH=110 HEIGHT=25  ALIGN="RIGHT"><A HREF="idea4.htm">Fourth Idea</A></TD></TR>
<TR><TD WIDTH=110  HEIGHT=200> </TD></TR>
</TABLE>
</BODY>
</HTML>
(End of HTML Source Code)
-PREVIOUS- -CHAPTER- -INDEX- -NEXT-

Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...