A quick guide to tags, tables, colors, and so on. And a quick List of Web Tools.

Font Faces

Specify the font in the style sheet.

• The cat in the sack jumped over the fox in the box. (Verdana)
• The cat in the sack jumped over the fox in the box. (Comic Sans)
• The cat in the sack jumped over the fox in the box. (Times New Roman)
• The cat in the sack jumped over the fox in the box. (Arial)

Links...

• Link to another site: Here's Google.com
  Here's <A HREF="http://www.google.com">Google.com</A>
• Link to another site and open in a new browser: Here's Google.com
  Here's <A HREF="http://www.google.com" target="_blank">Google.com</A>
• Send e-mail: Send us an e-mail.
  Send us an <A HREF="mailto:andreas@andreas.com?subject=Hello to you">e-mail</A>
• Link a newsgroup: See Willie's newsgroup.
  See Willie's <A HREF="news:alt.willie.the.cat">newsgroup</A>

Links with Images...

Display-only picture (inline image) is Willy the Cat.
<IMG SRC="pixs/cat-icon.gif" ALT="Icon of Dash" WIDTH="132" HEIGHT="89" align="bottom">

Clickable pictures WITH TEXT are Click text or pix.
<IMG SRC="pixs/cat-icon.gif" ALT="Icon of Dash" WIDTH="132" HEIGHT="89" align="bottom">

Clickable pix WITHOUT TEXT are
<IMG SRC="pixs/cat-icon.gif" ALT="Icon of Dash" WIDTH="132" HEIGHT="89" align="bottom">

Links with Sound...

Hear the cats meow! (WAV 13 KB)
<A HREF="pixs/meow.wav">meow<A>

For a cat pix that meows, click
For a cat pix that meows, <A HREF="pixs/meow.wav"><IMG SRC="pixs/cat-icon.gif" border="0"> <A>

Cross Links...

This creates links which leap into a document to the word "WEB" or "how".

• <A HREF="#web">Jump now to read "WEB"</A>
• <A HREF="#how">Jump now to read "How"</A>

Use this to create a table of contents or a "Let's go to top of page," etc.

<A NAME="web">Anchor for Info on Webs.</A>

Lorem ipsum dolor sit amet, con secteteur adipsicing elit, sed diam nonnumy nibh euisnod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wise enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo con sequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.
Vel illum dolor eu feugiat mulla facilsi at vero eos et accusm et ius to odio dignessim qui blandt prae sent luptatum zzril delenit aigue duos dolore et mosestias exceptur sint occaecat cupidtat not simil pro vident tempor sunt in culpa qui officia desrunt mollit aniom ib est abor un et dolor fuga. Et harumd dereud facilis est er expedit distint. Nam liber tempor cum soluta nobis eligent option congue nibil impediet doming id quod maxim plecat facer possum omnis voluptas assumenda est, mnis repellend.

<A NAME="how">Anchor for "How to Find a Site.</A>

Lorem ipsum dolor sit amet, con secteteur adipsicing elit, sed diam nonnumy nibh euisnod tempor inci dunt ut labore et dolore magna ali quam erat volupat. Ut wise enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo con sequat. Duis autem vel eum irure dolor in henderit in vulputate velit esse consequat.
Vel illum dolor eu feugiat mulla facilsi at vero eos et accusm et ius to odio dignessim qui blandt prae sent luptatum zzril delenit aigue duos dolore et mosestias exceptur sint occaecat cupidtat not simil pro vident tempor sunt in culpa qui officia desrunt mollit aniom ib est abor un et dolor fuga. Et harumd dereud facilis est er expedit distint. Nam liber tempor cum soluta nobis eligent option congue nibil impediet doming id quod maxim plecat facer possum omnis voluptas assumenda est, mnis repellend.

The Internic...

Use WhoIsReport.com or WhoIs to see if a domain name is available. ZDNet Register searches domain names and offers available alternatives.

216 Safe Color Palette...

Web colors between various browsers is a mess. Most color values will appear different on various systems. Use the following 216 colors and they will appear the same on all systems. Colors have RGB values (255.255.204) and hex values (CC9933.)

You may often need special characters that are not on your keyboard. Use the following table to create these characters.

There are two systems: Code and Entity. Entity is easier to use. Just remember that you place an ampersand first, the abbreviation for the character (such as "amp" for ampersand), and then a semicolon to close.

For example, to produce an ampersand (&), type &amp; in your HTML and it will appear as & in your browser.

Short Table With the Most Useful Characters:

Description              Char  Code    Entity
_____________________________________________
Quotation                   "  "   "
Ampersand                   &  &   &
Less-than sign              <  &#60;   &lt;
Greater-than sign           >  &#62;   &gt;
Angle quote mark, left      «  &#171;  &laquo;
Angle quote mark, right     »  &#187;  &raquo;
Inverted exclamation        ¡  &#161;  &iexcl;
Inverted question mark      ¿  &#191;  &iquest;
Cent sign                   ¢  &#162;  &cent;
Pound sign                  £  &#163;  &pound;
Currency sign               ¤  &#164;  &curren;
Yen sign                    ¥  &#165;  &yen;
Broken vertical bar         ¦  &#166;  &brvbar;
Section sign                §  &#167;  &sect;
Copyright sign              ©  &#169;  &copy;
Circled R registered sign   ®  &#174;  &reg;
Middle dot                  ·  &#183;  &middot;
Fraction 1/4                ¼  &#188;  &frac14;
Fraction 1/2                ½  &#189;  &frac12;
Fraction 3/4                ¾  &#190;  &frac34; 
Superscript 1               ¹  &#185;  &sup1;
Superscript 2               ²  &#178;  &sup2;
Superscript 3               ³  &#179;  &sup3;
Degree sign                 °  &#176;  &deg;
Multiplication sign         ×  &#215;  &times;
Division sign               ÷  &#247;  &divide;
Plus-or-minus sign          ±  &#177;  &plusmn;

Here's a Complete List of Characters.

Table Guide...

The basic table

<TABLE BORDER>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>

Two examples of row span

<TABLE BORDER>
        <TR>
                <TD>Item 1</TD>
                <TD ROWSPAN=2>Item 2</TD>
                <TD>Item 3</TD>
        </TR>
        <TR>
                <TD>Item 4</TD> <TD>Item 5</TD>
        </TR>
</TABLE>

<TABLE BORDER>
        <TR>
                <TD ROWSPAN=2>Item 1</TD>
                <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
                4</TD>
        </TR>
        <TR>
                <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item
                7</TD>
        </TR>
</TABLE>

ColSpan

<TABLE BORDER>
        <TR>
                <TD>Item 1</TD>
                <TD COLSPAN=2>Item 2</TD>
        </TR>
        <TR>
                <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item
                5</TD>
        </TR>
</TABLE>

Table headers

<TABLE BORDER>
        <TR>
                <TH>Head1</TH> <TH>Head2</TH>
                <TH>Head3</TH>
        </TR>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>  

Colspan and headers

<TABLE BORDER>
        <TR>
                <TH COLSPAN=2>Head1</TH>
                <TH COLSPAN=2>Head2</TH>
        </TR>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
                <TD>D</TD> 
        </TR>
        <TR>      
                <TD>E</TD> <TD>F</TD> <TD>G</TD>
                <TD>H</TD> 
        </TR>
</TABLE>

Multiple headers and colspan

<TABLE BORDER>
        <TR>
                <TH COLSPAN=2>Head1</TH>
                <TH COLSPAN=2>Head2</TH>
        </TR>
        <TR>
                <TH>Head 3</TH> <TH>Head 4</TH> 
                <TH>Head 5</TH> <TH>Head 6</TH> 
        </TR>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
                <TD>D</TD> 
        </TR>
        <TR>
                <TD>E</TD> <TD>F</TD> <TD>G</TD>
                <TD>H</TD> 
        </TR>
</TABLE>

Side headers...

<TABLE BORDER>
        <TR><TH>Head1</TH>
                <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item
                3</TD></TR>
        <TR><TH>Head2</TH>
                <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item
                6</TD></TR>
        <TR><TH>Head3</TH>
                <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item
                9</TD></TR>
</TABLE>

Side headers and rowspan...

<TABLE BORDER>
        <TR><TH ROWSPAN=2>Head1</TH>
            <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item
            3</TD> <TD>Item 4</TD>
        </TR>
        <TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item
        7</TD> <TD>Item 8</TD>
        </TR>
        <TR><TH>Head2</TH>
            <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item
            3</TD> <TD>Item 11</TD>
        </TR>
</TABLE>

Table with everything...

<TABLE BORDER>
        <TR>      <TD><TH ROWSPAN=2></TH>
                <TH COLSPAN=2>Average</TH></TD>
        </TR>
        <TR>     
        <TD><TH>Height</TH><TH>Weight</TH></TD>
        </TR>
        <TR>      <TH ROWSPAN=2>Gender</TH>
                <TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
        </TR>
        <TR>     
        <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
        </TR>
</TABLE>

Examples with rowspan and Colspan

<TABLE BORDER>
        <TR>
                <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
                <TD>1</TD>
                <TD>2</TD>
        </TR>
        <TR>
                <TD>3</TD>
                <TD>4</TD>
        </TR>
        <TR>
                <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
                <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
        </TR>
        <TR>
        </TR>
</TABLE>

Adjusting margins and borders...

Tables without borders

<TABLE>
        <TR>      <TD>Item 1</TD> <TD ROWSPAN=2>Item
        2</TD> <TD>Item 3</TD> 
        </TR>
        <TR>      <TD>Item 4</TD> <TD>Item 5</TD> 
        </TR>
</TABLE>

Table with border="10"

<TABLE BORDER=10>
        <TR>      <TD>Item 1</TD> <TD> Item 2</TD>
        </TR>
        <TR>      <TD>Item 3</TD> <TD>Item 4</TD> 
        </TR>
</TABLE>

Cellpadding and Cellspacing

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>

<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>

A	B	C
D	E	F

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>

Alignment, captions, and subtitles

Multiple lines in a table

<TABLE BORDER>
        <TR>
                <TH>January</TH>
                <TH>February</TH>
                <TH>March</TH>
        </TR>
        <TR>
                <TD>This is cell 1</TD>
                <TD>Cell 2</TD>
                <TD>Another cell,<br> cell 3</TD>
        </TR>
        <TR>
                <TD>Cell 4</TD>
                <TD>and now this<br>is cell 5</TD>
                <TD>Cell 6</TD>
        </TR>
</TABLE>

ALIGN="LEFT|RIGHT|CENTER" can be applied to individual cells or whole rows

<TABLE BORDER>
        <TR>
            <TH>January</TH>
            <TH>February</TH>
            <TH>March</TH>
        </TR>
        <TR ALIGN=center>
            <TD>all aligned center</TD>
            <TD>Cell 2</TD>
            <TD>Another cell,<br> cell 3</TD>
        </TR>
        <TR>
            <TD ALIGN=right>aligned right</TD>
            <TD ALIGN=center>aligned to center</TD>
            <TD>default,<br>aligned left</TD>
        </TR>
</TABLE>

valign="top|middle|bottom" can be applied to individual cells or wholerows

<TABLE BORDER>
        <TR>
                <TH>January</TH>
                <TH>February</TH>
                <TH>March</TH>
        </TR>
        <TR vALIGN="top">
            <TD>all aligned to top</TD>
            <TD>and now this<br>is cell 2</TD>
            <TD>Cell 3</TD>
        </TR>
        <TR>
            <TD vALIGN="top">aligned to the top</TD>
            <TD Valign="bottom">aligned to the bottom</TD>
            <TD>default alignment,<br>center</TD>
        </TR>
</TABLE>

Caption="top|bottom"

<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
        <TR>
                <TH>January</TH>
                <TH>February</TH>
                <TH>March</TH>
        </TR>
        <TR>
                <TD>This is cell 1</TD>
                <TD>Cell 2</TD>
                <TD>Another cell,<br> cell 3</TD>
        </TR>
</TABLE>

<TABLE BORDER>
<CAPTION align="bottom">A bottom CAPTION</CAPTION>
        <TR>
                <TH>January</TH>
                <TH>February</TH>
                <TH>March</TH>
        </TR>
        <TR>
                <TD>This is cell 1</TD>
                <TD>Cell 2</TD>
                <TD>Another cell,<br> cell 3</TD>
        </TR>
</TABLE>

Nested tables: Table ABCD is nested inside table 123456

<TABLE BORDER>
        <TR> <!-- ROW 1, TABLE 1 -->
                <TD>1</TD>
                <TD>2</TD>
                <TD>3
                <TABLE BORDER>
                        <TR> <!-- ROW 1, TABLE 2 -->
                                <TD>A</TD>
                                <TD>B</TD>
                        </TR>
                        <TR> <!-- ROW 2, TABLE 2 -->
                                <TD>C</TD>
                                <TD>D</TD>
                        </TR>
                </TABLE>
                </TD>
        </TR>
        <TR> <!-- ROW 2, TABLE 1 -->
                <TD>4</TD>
                <TD>5</TD>
                <TD>6</TD>
        </TR>
</TABLE>

Table widths

Basic 50% width

<TABLE BORDER WIDTH="50%">
        <TR><TD>Width=50%</TD><TD>Width=50%</TD>
        </TR>
        <TR><TD>3</TD><TD>4</TD>
        </TR>
</TABLE>

<TABLE BORDER WIDTH="50%">
        <TR><TD>Item width affects cell
        size</TD><TD>2</TD>
        </TR>
        <TR><TD>3</TD><TD>4</TD>
        </TR>
</TABLE>

<TABLE BORDER WIDTH="100%">
        <TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
        </TR>
        <TR><TD>3</TD><TD>4</TD>
        </TR>
</TABLE>

Centering a table

<CENTER>
<TABLE BORDER WIDTH="50%">
        <TR>
                <TD>A</TD> <TD>B</TD> <TD>C</TD>
        </TR>
        <TR>
                <TD>D</TD> <TD>E</TD> <TD>F</TD>
        </TR>
</TABLE>
</CENTER>

Table widths and nested tables

<TABLE BORDER WIDTH="50%">
        <TR><TD>Item 1</TD><TD>Item 2</TD>
        </TR>
        <TR><TD>
            <TABLE BORDER WIDTH=100%>
                <TR><TD>Item A</TD><TD>Item B</TD>
                </TR>
            </TABLE>
            </TD>
            <TD>Item 4</TD>
        </TR>
</TABLE>

Is this Page Useful? Vote!

Updates: andreas.com newsletter