Quick and Dirty HTML Reference

Web pages are just plain text files that combine the text content of the page with format tags in greater-than and less-than brackets.
You format some page content between a start tag and a stop tag like this: <TAG>..content..</TAG>.
Some tags such as line breaks, list items and table data cells don't require stop tags.
Some start tags allow you to specify options in double quotes: <TAG OPTION="n"> .more stuff..</TAG>.
Generally tags can be upper- or lower-case, although some option specifications such as file names are case-sensitive.
Always nest formats like this: <OUTER><INNER>..stuff..</INNER></OUTER>
Do not overlap formats. <OUTER><INNER>..stuff..</OUTER></INNER> can yield unpredictable results.

Every page should be begin with an <HTML> tag and end with an </HTML> tag, and should include a HEAD section followed by a BODY section:

<HTML>
  <HEAD>
    ...(optional style sheets, etc.)
  </HEAD>
  <BODY>
    ...(this is where your page content goes)
  </BODY>
</HTML>

Here are some illustrations of basic (old-style) tags used to format content in the BODY section. Some of these formats have been "deprecated" (deprecate: to express mild or regretful disapproval) in favor of style sheets, but they work fine.

<A NAME="explained_below"></A>

ordinary text ordinary text
<CENTER>centered text</CENTER>
centered text
<B>bolded text</B> bolded text
<I>italicized text</I> italicized text
<B><I>bolded and italicized</I></B> bolded and italicized
<FONT SIZE="5">different text sizes (1-6)</FONT> different text sizes (1-6)
<FONT COLOR="red">different text colors</FONT> different text colors
<FONT FACE="arial">different fonts</FONT> different fonts
<I><FONT SIZE="2" color="blue" face="arial">in any combination</FONT></I> in any combination

Extra spaces       and line
    breaks are ignored. Use <BR> to force a line break or <P> to insert a paragraph break.
Extra spaces and line breaks are ignored. Use
to force a line break or

to insert a paragraph break.

Use the &nbsp; special character to insert &nbsp; &nbsp; extra spaces. Use the   special character. to insert     extra spaces
Most special characters can be referenced by name or number, e.g.: &pi; &divide; &mu; &ge; &#188;. There are lots of reference websites for HTML special character codes.
Most special characters can be referenced by name or number, e.g.: π ÷ μ ≥ ¼. There are lots of reference websites for HTML special character codes.

An unordered list contains bulleted list items: <UL>
  <LI>milk
  <LI TYPE="circle">bread
</UL> 		An unordered list contains bulleted list items:
  • milk
  • bread
An ordered list lists items by number or letter: <OL>
  <LI TYPE="1">arrive at work
      <BR>...coffee breaks, lunch...
  <LI VALUE="13">quittin' time!
</OL> 		An ordered list lists items by number or letter.
  1. arrive at work
    ...coffee breaks, lunch...
  2. quittin' time!
<!-- here's a comment that you won't see
      displayed on the right             -->

<IMG SRC="ugly2.gif" ALIGN="right" HSPACE="15">
Here's a sexy picture of me.
The ALIGN option forces this image to the right so that
the text wraps around it.
The HSPACE option keeps a 15 pixel-wide space on either
side.
<BR>
This is GIF image file; the other web-supported image
file formats are JPG (best for photos) and PNG (best for
line graphics).

<!-- damn, I'm good-lookin'!           -->

Here's a sexy picture of me. The ALIGN option forces this image to the right so that the the text wraps around it. The HSPACE option keeps a 15 pixel-wide space on either side.
This is GIF image file; the other web-supported image file formats are JPG (best for photos) and PNG (best for line graphics).

Tables are useful for controlling page layouts. Table Row tags define rows; Table Data tags define table cells: Tables are useful for controlling page layouts. Table Row tags define rows; Table Data tags define table cells:
<CENTER>
<TABLE WIDTH="340" BORDER="0" CELLPADDING="5" BGCOLOR="#FFFF99">
 <TR><TD><IMG SRC="ugly2.gif">
    <TD><IMG SRC="oldlady.gif"></TR>
 <TR><TD>Here's me...
    <TD>...and sweet Marie! </TR>
</TABLE> </CENTER>
Here's me... ...and sweet Marie!
Side by side images look best when they're the same height. <BR>Notice how I suppressed the table border and specified the RGB mix for a soft yellow background...

<!-- ...sorta like Marie's eyes!         -->

Side by side images look best when they're the same height.
Notice how I suppressed the table border and specified the RGB mix for a soft yellow background...
Here's a <A HREF="http://www.udel.edu/johnmack/frec480/index.html"> link to the FREC 480 homepage</A>.

 		Here's a link to the FREC 480 homepage.

You don't have to include the filename "index.html" in the URL; it's the default name the client browser looks for when it is pointed to the <A HREF="http://www.udel.edu/johnmack/frec480/"> "frec480" directory</A>.
You don't have to include the filename "index.html" in the URL; it's the default name the client browser looks for when it is pointed to the "frec480" directory.
Actually the FREC 480 homepage is in the same directory as this page, so we could simply use a <A HREF="index.html">relative reference</A>. <P>If I moved this whole web directory to another server, this link would still work; the absolute links above would still point to the old server.
Actually the FREC 480 homepage is in the same directory as this page, so we could simply use a relative reference.

If I moved this whole web directory to another server, this link would still work; the absolute links above would still point to the old server.

Here's a link to the invisible
<A HREF="#explained_below">"explained_below" anchor</A> at the top of this column. 		Here's a link to the invisible "explained below" anchor at the top of this column.

<A HREF="http://www.gumbopages.com/food/scottish/haggis.html">
<IMG SRC="haggis2.png" ALIGN="right" HSPACE="10" BORDER="0"></A>
Here's a PNG image of a haggis--my favorite food! I used GIMP to give it a transparent background. It's linked to a haggis recipe; click on it and check out the yummy ingredients! A linked image would usually have a blue rectangular border but I suppressed the border in the image tag.

<!-- okay, that's enough of that! --> 		Here's a PNG image of a haggis--my favorite food!
I used GIMP to give it a transparent background.
It's linked to a haggis recipe; click on it and check out the yummy ingredients! An image link would usually have a blue rectangular border but I suppressed the border in the image tag.