A Page With a Clickable Sidebar | ||
| ||
First idea | ||
Second Idea | ||
Third Idea | ||
Fourth Idea | ||
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> <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>