HTML Tips

------------------------------------------------------------------------------------------

When you pass your mouse over the logo, a new browser window with the site's main page will appear.

<center> 
  <table border="3" BODY BGCOLOR="#000000"> 
  <tr>
    <td><a href="http://bignosebird.com/" onmouseover="window.open ('http://bignosebird.com/index.shtml');" 
                               onMouseOver="status='Go To This Site'; return true" onMouseOut="status='';"> 
           <IMG SRC="http://bignosebird.com/images/minibird.gif" WIDTH="425" HEIGHT="75" BORDER="0"></A> 
    </td>
  </tr> </table> 
</center>

------------------------------------------------------------------------------------------

A popular technique for adding a little spice to your pages is the Image Flip Mouseover. Using JavaScript, 
you can easily install this effect in your pages. 

//insert this in header
<script language="JavaScript"> 
  browsok = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3)) || 
            ((navigator.appName ==  "Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=3))); 
  if(browsok){ 
      // MouseOn // Note: the 88 is for the WIDTH, 25 is for the HEIGHT 
      login1 = new Image(88, 25); login1.src = "LOGONB.GIF"; join1 = new Image(88, 25); join1.src = "JOINB.GIF"; 
      // MouseOff // Note: the 88 is for the WIDTH, 25 is for the HEIGHT 
      login0 = new Image(88, 25); login0.src = "LOGON.GIF"; join0 = new Image(88, 25); join0.src = "JOIN.GIF"; } 
  function BNB_mouseon(n){ if(browsok){ imageON = eval(n + "1.src"); document [n].src = imageON; } } 
  function BNB_mouseoff(n){ if(browsok){ imageOFF = eval(n + "0.src"); document [n].src = imageOFF; } } 
</SCRIPT> 

//insert in body
  <a href="mouse.shtml" 
        onmouseout="BNB_mouseoff('login')" onmouseover="BNB_mouseon('login');return true ">
    <img src="LOGON.GIF" name="login" WIDTH=88 HEIGHT=25 VSPACE=3 border=0 alt=login></a>

  <a href="mouse.shtml" 
        onmouseout="BNB_mouseoff('join')" onmouseover="BNB_mouseon('join');return true ">
    <img src="JOIN.GIF" name="join" WIDTH=88 HEIGHT=25 VSPACE=3 border=0 alt=join></a>

------------------------------------------------------------------------------------------

How can I make a window open up showing a page when a user clicks on a link? 	

<SCRIPT LANGUAGE="JavaScript"> 
  function windy() { window.open('h44a.html','windy','toolbar=no,location=no,            directories=no,status=no,menubar=no,resizable=yes, copyhistory=no,
                                     scrollbars=yes,width=300,height=200'); }
</script> 

<A HREF="JavaScript: windy()" onMouseOver="window.status='Show Secret!'; return true"    onMouseOut="window.status=''; return true"> <B>HERE IS THE SECRET MESSAGE!</B></A> 
	

------------------------------------------------------------------------------------------

To print a message in the status area (at bottom of page), when passing cursor over a link:

<a href="/index.shtml" onmouseover= "window.status=' Return to the HOME Page';return true" 
                            onMouseOut="window.status='';return true"> <B>HOME</B></a> <P>

------------------------------------------------------------------------------------------

Displaying a table, with each entry being a link:

<TABLE WIDTH="550" BORDER="2" BGCOLOR="#FFFF00">
   <FONT FACE="ARIAL">
 <TR ALIGN="CENTER">
   <TD><A HREF="/gentech.shtml"><B>BNB's<BR>Guidelines</B></A></TD>
   <TD><A HREF="/tools.shtml"><B>The Tools<BR>You Need!</B></A></TD>
   <TD><A HREF="/cgi.shtml"><B>Interactive<BR>CGI-BIN</B></A></TD>
   <TD><A HREF="/html.shtml"><B>HTML<BR>Tricks</B></A></TD>
 </TR>
 <TR ALIGN="CENTER">
   <TD><A HREF="/unix.shtml"><B>Basic UNIX</B></A></TD>
   <TD><A HREF="/ssi.shtml"><B>Server Side<BR>Includes</B></A></TD>
   <TD><A HREF="/whois.shtml"><B>Domain Name <BR>Lookup</A></B></TD>
   <TD><A HREF="/colors.shtml"><B>About<BR>Colors</B></A></TD>
 </TR>
</TABLE>

------------------------------------------------------------------------------------------

Splitting up a graffic into parts, with each part being a different link:

  <a href="http://altavista.digital.com/cgi-bin/query?pg=tmpl&v=about.html"> 
         <IMG src="/dimages/av-logo.gif" alt="[AltaVista] "  
         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=204></a>
  <a href="http://altavista.digital.com/cgi-bin/query?pg=aq"> 
         <IMG src="/dimages/av-adv.gif" alt="[Advanced Query]  "  
         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=59></a>
  <a href="http://altavista.digital.com/cgi-bin/query?pg=q"> 
         <IMG src="/dimages/av-sim.gif" alt="[Simple Query] "  
         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=42></a>
  <a href="http://altavista.software.digital.com/products/search/choice.htm">
         <IMG src="/dimages/av-pex.gif" 
         alt="[Private eXtension Products] "  
         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=65></a>
  <a href="http://altavista.digital.com/cgi-bin/query?pg=h"> 
         <IMG src="/dimages/av-help.gif" alt="[Help with Query]  "  
         BORDER=0 ALIGN=middle  HEIGHT=73 WIDTH=35></a>

------------------------------------------------------------------------------------------

A simple pull-down menu:

<form name="navform" method="POST"> 
  <select name="inchoice" size=1> 
    <option value="/navig.shtml"> Navigation Tricks</option> 
    <option value="/index.shtml"> Home Page</option> 
    <option value="/cgi.shtml"> CGI-BIN</option> 
    <option value="/guestbook"> Guestbook</option> 
  </select> 
  <input type=button onClick= "location = '' + document.navform.inchoice.options[ document.navform.inchoice.selectedIndex ].value;
    " value="Take Me There!"> 
</form>

------------------------------------------------------------------------------------------

A pull-down menu, without the "Take Me There" button:

//insert in head:
<SCRIPT LANGUAGE="JavaScript">
  function pagejump(to_url) {
        if (to_url != "") {
        window.location=to_url
        }
  }
</SCRIPT>

//insert in body:
<FORM NAME="navsel"
  ONSUBMIT="pagejump(document.forms[0].whereto.options[document.forms[0].whereto.selectedIndex].value);
  return false">
  <SELECT  NAME="whereto" ONCHANGE="pagejump(this.options[this.selectedIndex].value)">
        <OPTION>please select a page...</OPTION>
        <OPTION>Major Interest Areas</OPTION>
        <OPTION value="/index.shtml" >  Home</OPTION>
        <OPTION value="/cgi.shtml">  CGI Script Archive</OPTION>
        <OPTION value="/ssi.shtml">  Server Side Includes</OPTION>
        <OPTION value="/html.shtml">  HTML Tricks</OPTION>
  </SELECT>
</FORM>

------------------------------------------------------------------------------------------
-----taken from:  www.sitesatlas.com

<p align="center"><font face="Verdana">To get started, choose one of the
        links above or click on your region of interest:<br></font>
<MAP NAME="FrontPageMap">
  <AREA SHAPE="RECT" COORDS="296, 287, 388, 311" HREF="Maps/Maps/Antarctica.htm">
  <AREA SHAPE="RECT" COORDS="568, 181, 646, 224" HREF="Maps/Maps/Oceania.htm">
  <AREA SHAPE="RECT" COORDS="481,  66, 539, 108" HREF="Maps/Maps/Asia.htm">
  <AREA SHAPE="RECT" COORDS="373,  87, 433, 130" HREF="Maps/Maps/MEast.htm">
  <AREA SHAPE="RECT" COORDS="302,  41, 379,  88" HREF="Maps/Maps/Europe.htm">
  <AREA SHAPE="RECT" COORDS="331, 137, 407, 186" HREF="Maps/Maps/Africa.htm">
  <AREA SHAPE="RECT" COORDS="183, 157, 260, 214" HREF="Maps/Maps/SAmer.htm">
  <AREA SHAPE="RECT" COORDS="105,  51, 182, 102" HREF="Maps/Maps/NAmer.htm"></MAP>
<a href="_vti_bin/shtml.exe/index.htm/map"><img ismap usemap="#FrontPageMap" border="0" 
  height="312" alt="WorldPol2.gif(13154 bytes)" src="Maps/Maps/WorldPol2.gif" width="647"> </a></p>

------------------------------------------------------------------------------------------
-----taken from:  www.jetcity.com/~suebee                     ****

A very good general format with two columns:  links on the left and story on the right.

<HTML><HEAD></HEAD><BODY>
<!--header-->
<TABLE WIDTH="100%" CELLPADDING=8 CELLSPACING=0 BORDER=0>
  <TR><TD BGCOLOR="#FFCC00" WIDTH="100%" ALIGN=CENTER><NOBR>
  <FONT FACE="Arial, Helvetica" SIZE=5>Insert your title here</FONT></TD></TR></TABLE>
<P>

<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=100% BORDER=0>
  <TR>
    <!--left_column-->
    <TD BGCOLOR="#FFFFCC" VALIGN=TOP WIDTH=25% ALIGN=LEFT>
      <FONT CLASS=10V FACE="Verdana, Arial, Helvetica" SIZE=2>
      &nbsp;<BR>
      <!--links-->
      <IMG SRC="arrow.gif" WIDTH=10 HEIGHT=15><A HREF=first.html>Chapter I</A><BR>
      <IMG SRC="arrow.gif" WIDTH=10 HEIGHT=15><A HREF=second.html>Chapter II</A><BR>
    </TD>
    <!--filler-->
    <TD BGCOLOR=#FFFFCC" WIDTH=10><TD><IMG SRC="blank.gif" WIDTH=4 HEIGHT=1 BORDER=0></TD>
    <TD><IMG SRC="blank.gif" WIDTH=2 HEIGHT=1 BORDER=0></TD>

    <!--right_column_or_story-->
    <TD VALIGN=TOP><FONT CLASS=10V FACE="Verdana, Arial, Helvetica" SIZE=2>...<P>...<P>...
    </FONT></TD>
  </TR>
</TABLE>               </BODY></HTML>

------------------------------------------------------------------------------------------
-----from HTML - The Definition Guide, page 371, displaying a table:

<table border cellspacing=0 cellpadding=5>
  <caption align=bottom>Eating Onions vs. Pears, by gender</caption>
  <tr><td colspan=2 rowspan=2></td>
      <th colspan=2 align=center>Preference</th> </tr>
  <tr><th>Eating Onions</th>
      <th>Eating Pears</th> </tr>
  <tr align=center>
      <th rowspan=2>Gender</th>
      <th>Male</th>
      <th>73%</th>
      <th>27%</th> </tr>
  <tr align=center>
      <th>Females</th>
      <th>16%</th>
      <th>84%</th> </tr> </table>

------------------------------------------------------------------------------------------
-----Taken from PC Magazine:

GIFs work better for line art and other graphics with limited colors and sharp edges.  JPEGs work better for photographs with lots of colors and smooth gradients.  Remember to Break and Clear All (<BR Clear=All>) after you've wrapped text around an image.  Always include the height and width attributes when using the Image tag.  The browser will then lay out the page before the images fully load.  

If you use the Alternate attribute as well, you can enter text descriptions of your images so that your visitor knows what's coming before it gets displayed.  If you need tight control of clear space, fill that space with an image that is 1 by 1 pixel in size.  Use the height and width tags to stretch the image to the size of the space.  Since the image is only 1 by 1 pixel in size, it will download quickly.

The <DIV> tag is helpful for aligning elements in a table.  It works better than just align=center or align=left, because it's not subject to cell padding, which can throw off a true alignment.  The code will look like this:  <DIV ALIGN=CENTER></DIV>.

The <SPAN> tag lets you define any block of text in a 4.0 browser withou applying any standard formatting:  unlike <DIV> it does not cause a paragraph break.  You can add a STYLE= attribute to apply any specific formatting you choose, or control the formatting of the contents of the tag from a stylesheet.

The No Break tag <NOBR> forces a block of text to remain on a single line, even if it scrolls off the side of the screen.  Within the <NOBR> tag, you can use the <WBR> tag, which tells the browser to insert an optional break at the tag location if needed.

Use the <BLOCKQUOTE> tag to indent a paragraph from the left margin.  Use nested <BLOCKQUOTE> tags for deeper indentations without using tables.

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------