andreas.com FAQ: HTML Guide

Willy the Cat         HTML
GuideText Links
Image Links
Sound Links
Crosslinks
Registars
Bullet Lists
Number Lists
Tables
Characters
Colors        

A quick guide to tags, tables, colors, and so on.

This line is 595 pixels wide. This is max for 14 in. screens. (585×770 pixels for printing)

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)

Go to top

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>

Go to top

Links with Images…

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

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

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

Go to top

Cross Links…

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

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.

Go to top

The Internic…

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

Go to top

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.)
255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00             255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600             255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0 FF9900 FF9933 CC9966 CC6600 996633 663300             255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0 FFCC99 FF9966 FF6600 CC6633 993300 660000             255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0 FF6633 CC3300 FF3300 FF0000 CC0000 999000             255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51 FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033             204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0 CC9999 CC6666 CC3333 993333 990033 330000             255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51 FF6699 FF3366 FF0066 CC3366 996666 663333             255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51 FF99CC FF3399 FF0099 CC0066 993366 660033             255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102 FF66CC FF00CC FF33CC CC6699 CC0099 990066             255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399             204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153 CC99CC CC66CC CC00CC CC33CC 990099 993399             204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102 CC66FF CC33FF CC00FF 9900CC 996699 660066             204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102 CC99FF 9933CC 9933FF 9900FF 660099 663366             153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51 9966CC 9966FF 6600CC 6633CC 663399 330033             204.204.255 153.153.255 102.51.255 102.0.255 55.0.153 51.0.102 CCCCFF 9999FF 6633FF 6600FF 330099 330066             153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102 9999CC 6666FF 6666CC 666699 333399 333366             51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102 3333FF 3300FF 3300CC 3333CC 000099 000066             102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51 6699FF 3366FF 0000FF 0000CC 0033CC 000033             0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102 0066FF 0066CC 3366CC 0033FF 003399 003366             153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153 99CCFF 3399FF 0099FF 6699CC 336699 006699             102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333             153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102 99CCCC 66CCCC 339999 669999 006666 336666             204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC             153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999             102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51 66CC99 33CC99 00CC99 339966 009966 006633             102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51 66FF99 33FF99 00FF99 33CC66 00CC66 009933             153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0 99FF99 66FF66 33FF66 00FF66 339933 006600             204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0 CCFFCC 99CC99 66CC66 669966 336633 003300             51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33             102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0 66FF00 66FF33 33FF00 33CC00 339900 009900             204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0 CCFF99 99FF66 66CC00 66CC33 669933 336600             153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0 99FF00 99FF33 99CC66 99CC00 99CC33 669900             204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300             204.204.102 204.204.51 153.153.51 153.153.102 153.153.0 102.102.0 CCCC66 CCCC33 999966 999933 999900 666600             255.255.255 204.204.104 153.153.153 102.102.102 51.51.51 0.0.0 FFFFFF CCCCCC 999999 666666 333333 000000            

Go to top

Special Characters: ISO 8859-1

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 ” &#34; &quot;Ampersand & &#38; &amp;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.

Go to top

Table Guide…

The basic table

A B C D E F <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

Item 1 Item 2 Item 3 Item 4 Item 5 <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> Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 <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

Item 1 Item 2 Item 3 Item 4 Item 5 <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

Head1 Head2 Head3 A B C D E F <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

Head1 Head2 A B C D E F G H <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

Head1 Head2 Head 3 Head 4 Head 5 Head 6 A B C D E F G H <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…

Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9<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…

Head1 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11 <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…

Average HeightWeight Gender Males1.90.003 Females1.70.002 <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

A 1 2 3 4 C D <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

Item 1 Item 2 Item 3 Item 4 Item 5 <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″

Item 1 Item 2 Item 3 Item 4 <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

A B C D E F <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> A B C D E F <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> A B C D E F <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

January February March This is cell 1 Cell 2 Another cell,
cell 3 Cell 4 and now this
is cell 5 Cell 6 <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

January February March all aligned center Cell 2 Another cell,
cell 3 aligned right aligned to center default,
aligned left <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

January February March all aligned to top and now this
is cell 2 Cell 3 aligned to the top aligned to the bottom default alignment,
center <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”

A top CAPTION January February March This is cell 1 Cell 2 Another cell,
cell 3 <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>A bottom CAPTION January February March This is cell 1 Cell 2 Another cell,
cell 3 <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

1 2 3 A B C D 4 5 6 <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

Width=50%Width=50% 34 <TABLE BORDER WIDTH=”50%”> <TR><TD>Width=50%</TD><TD>Width=50%</TD> </TR> <TR><TD>3</TD><TD>4</TD> </TR></TABLE> Item width affects cell size2 34 <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> WIDTH=100%This is item 2 34 <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

A B C D E F <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

Item 1Item 2 Item AItem B Item 4 <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>

Go to top