This is a short HTML course.


Symbols Used

URL    URL of an external file (or just file name if in the same directory)
?      Arbitrary number (i.e. <H?> means <H1>, <H2>, <H3>, etc.)
%      Arbitrary percentage (i.e. <HR WIDTH="%"> means <HR WIDTH="50%">, etc.)
***    Arbitrary text (i.e. ALT="***" means fill in with text)
$$$$$$ Arbitrary hex (i.e. BGCOLOR="#$$$$$$" means BGCOLOR="#00FF1C", etc.)
,,,    Comma-delimited (i.e. COORDS=",,," means COORDS="0,0,50,50", etc.)
|      Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of these)
[...]  Examples


All HTML documents should have these.
Document Type<HTML></HTML>Mark the beginning and the end of the document.
Title<TITLE></TITLE>Title of the document. Must be in the header.
Header<HEAD></HEAD>The header of the document.
Body<BODY></BODY>Body of the document.

Structural Definitions

Appearance controlled by the browser's preferences.
   Heading          <H?></H?>          (the spec. defines 6 levels)
     Align Heading    <H? ALIGN=LEFT|CENTER|RIGHT></H?>
   Division         <DIV></DIV>
   Block Quote      <BLOCKQUOTE></BLOCKQUOTE>    (usually indented)
   Emphasis         <EM></EM>          (usually displayed as italic)[emphasis text]
   Strong Emphasis  <STRONG></STRONG>  (usually displayed as bold)[strong text]
   Citation         <CITE></CITE>      (usually italics)[citation text]
   Code             <CODE></CODE>      (for source code listings)[code text]
   Sample Output    <SAMP></SAMP>      [sample text]
   Keyboard Input   <KBD></KBD>        [keyboard input text]
   Variable         <VAR></VAR>        [variable text]
   Definition       <DFN></DFN>        (not widely implemented)
   Author's Address <ADDRESS></ADDRESS>
   Large Font Size  <BIG></BIG>        [big text]
   Small Font Size  <SMALL></SMALL>    [small text]

Presentation Formatting

Author specifies text appearance.
  Bold             <B></B>            [bold text]
  Italic           <I></I>            [italic text]
  Underline        <U></U>            (not widely implemented yet)[underlined text]
  Strikeout        <STRIKE></STRIKE>  (not widely implemented yet)[strike text]
  Strikeout        <S></S>            (not widely implemented yet)[strike text]
  Subscript        <SUB></SUB>        [subscript text]
  Superscript      <SUP></SUP>        [superscript text]
  Typewriter       <TT></TT>          (displays in a monospaced font)[typewriter text]
  Preformatted     <PRE></PRE>        (display text spacing as-is)
    Width          <PRE WIDTH=?></PRE>   (in characters)
  Center           <CENTER></CENTER>  (for both text and images)
  Blinking         <BLINK></BLINK>    (the most derided tag ever)[blink text]
  Font Size        <FONT SIZE=?></FONT>       (ranges from 1-7)
  Change Font Size <FONT SIZE="+|-?"></FONT>
  Base Font Size   <BASEFONT SIZE=?>  (from 1-7; default is 3)
  Font Color       <FONT COLOR="#$$$$$$"></FONT>
  Select Font      <FONT FACE="***"></FONT>
  Multi-Column     <MULTICOL COLS=?></MULTICOL>
    Column Gutter    <MULTICOL GUTTER=?></MULTICOL>
    Column Width     <MULTICOL WIDTH=?></MULTICOL>
  Spacer           <SPACER>
    Spacer Type      <SPACER TYPE=horizontal|vertical|block>
    Size             <SPACER SIZE=?>
    Dimensions       <SPACER WIDTH=? HEIGHT=?>
    Alignment        <SPACER ALIGN=left|right|center>

Links and Graphics

       Link Something   <A HREF="URL"></A>
         Link to Target   <A HREF="URL#***"></A>  (if in another document)
                          <A HREF="#***"></A>     (if in current document)
         Target Window    <A HREF="URL" TARGET="***"></A>
       Define Target    <A NAME="***"></A>
       Display Image    <IMG SRC="URL">
         Alignment        <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|
         Alternate        <IMG SRC="URL" ALT="***"> (if image not displayed)
         Dimensions       <IMG SRC="URL" WIDTH=? HEIGHT=?>   (in pixels)
         Border           <IMG SRC="URL" BORDER=?>             (in pixels)
         Runaround Space  <IMG SRC="URL" HSPACE=? VSPACE=?>      (in pixels)
         Low-Res Proxy    <IMG SRC="URL" LOWSRC="URL">
         Imagemap         <IMG SRC="URL" ISMAP>     (requires a script)
         Imagemap         <IMG SRC="URL" USEMAP="URL">
       Map              <MAP NAME="***"></MAP>   (describes the map)
       Section          <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
       Client Pull      <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
       Embed Object     <EMBED SRC="URL">  (insert object into page)
         Object Size      <EMBED SRC="URL" WIDTH=? HEIGHT=?>


       Paragraph        <P></P>            (closing tag often unnecessary)
         Align Text       <P ALIGN=LEFT|CENTER|RIGHT></P>
       Line Break       <BR>               (a single carriage return)
         Clear Textwrap   <BR CLEAR=LEFT|RIGHT|ALL>
       Horizontal Rule  <HR>
         Alignment        <HR ALIGN=LEFT|RIGHT|CENTER>
         Thickness        <HR SIZE=?>      (in pixels)
         Width            <HR WIDTH=?>     (in pixels)
         Width Percent    <HR WIDTH="%">     (as a percentage of page width)
        Solid Line       <HR NOSHADE>     (without the 3D cutout look)
       No Break         <NOBR></NOBR>       (prevents line breaks)
       Word Break       <WBR>              (where to break a line if needed)


Lists can be nested.
  Unordered List   <UL><LI></UL>      (<LI> before each list item)
    Compact          <UL COMPACT></UL>
    Bullet Type      <UL TYPE=DISC|CIRCLE|SQUARE>  (for the whole list)
                     <LI TYPE=DISC|CIRCLE|SQUARE>  (this & subsequent)
  Ordered List     <OL><LI></OL>      (<LI> before each list item)
    Compact          <OL COMPACT></OL>
    Numbering Type <OL TYPE=A|a|I|i|1>      (for the whole list)
                     <LI TYPE=A|a|I|i|1>      (this & subsequent)
    Starting Number  <OL START=?>             (for the whole list)
                     <LI VALUE=?>             (this & subsequent)
  Definition List  <DL><DT><DD></DL>  (<DT>=term, <DD>=definition)
    Compact          <DL COMPACT></DL>
  Menu List        <MENU><LI></MENU>  (<LI> before each list item)
    Compact          <MENU COMPACT></MENU>
  Directory List   <DIR><LI></DIR>    (<LI> before each list item)
    Compact          <DIR COMPACT></DIR>


The browsers that follow the HTML 3.2 specification allow a few attributes to the BODY element that influence the appearance of the background of the document, the text and also the links. Here is an overview of the attributes:
  Tiled Bkground   <BODY BACKGROUND="URL"> (specifies the image that will be used as background of the current document HTML3.0)
  Bkground Color   <BODY BGCOLOR="#$$$$$$"> (specifies the background color HTML3.2) (order is red/green/blue)
    Text Color       <BODY TEXT="#$$$$$$">  (specifies the color of all the normal text HTML3.2)
    Link Color       <BODY LINK="#$$$$$$">  (specifies the coloring of non-visited links (links to documents you've never been) HTML3.2)
    Visited Link     <BODY VLINK="#$$$$$$"> (specifies the coloring of visited links (links to documents where you have been before) HTML3.2)
    Active Link      <BODY ALINK="#$$$$$$"> (specifies the coloring of active links (links you activate by clicking on it) HTML3.2)
More info at

Special Characters

These must all be in lower case.
       Special Character &#?;            (where ? is the ISO 8859-1 code)
       <                 &lt;
       >                 &gt;
       &                 &amp;
       "                 &quot;
       Registered TM     &#174;
       Registered TM     &reg;
       Copyright         &#169;
       Copyright         &copy;
       Non-Breaking Spc  &nbsp;
Complete list at


Generally require a script on your server.
    File Upload      <FORM ENCTYPE="multipart/form-data></FORM>
    Field Name       <INPUT NAME="***">
    Field Value      <INPUT VALUE="***">
    Checked?         <INPUT CHECKED>  (checkboxes and radio boxes)
    Field Size       <INPUT SIZE=?>       (in characters)
    Max Length       <INPUT MAXLENGTH=?>  (in characters)
  Selection List   <SELECT<</SELECT>
    Name of List     <SELECT NAME="***"></SELECT>
    # of Options     <SELECT SIZE=?></SELECT>
    Multiple Choice  <SELECT MULTIPLE>    (can select more than one)
  Option           <OPTION>           (items that can be selected)
    Default Option   <OPTION SELECTED>
  Input Box Size   <TEXTAREA ROWS=? COLS=?></TEXTAREA>
    Name of Box      <TEXTAREA NAME="***"></TEXTAREA>


       Define Table     
Table Border
(either on or off) Table Border
(you can set the value) Cell Spacing Cell Padding
Desired Width
(in pixels) Width Percent
(percentage of page) Table Row Alignment Table Cell (must appear within table rows) Alignment (same as data, except bold centered) Alignment Alignment
No linebreaks Columns to Span Rows to Span Desired Width (in pixels) Width Percent (percentage of table) Cell Color Table Header No Linebreaks Columns to Span Rows to Span Desired Width (in pixels) Width Percent (percentage of table) Cell Color Table Caption
(above/below table)


Define and manipulate specific regions of the screen.
  Frame Document              (instead of )
    Row Heights            (pixels or %)
    Row Heights        (* = relative size)
    Column Widths          (pixels or %)
    Column Widths      (* = relative size)
    Border Width     
    Border Color     
  Define Frame                (contents of an individual frame)
    Display Document 
    Frame Name       
    Margin Width         (left and right margins)
    Margin Height       (top and bottom margins)
    Not Resizable    
    Border Color     
  Unframed Content      (for non-frames browsers)


  Applet           <APPLET></APPLET>
    File Name        <APPLET CODE="***">
    Parameters       <APPLET PARAM NAME="***">
    Location         <APPLET CODEBASE="URL">
    Identifier       <APPLET NAME="***">        (for references)
    Alt Text         <APPLET ALT="***">         (for non-Java browsers)
    Alignment        <APPLET ALIGN="LEFT|RIGHT|CENTER">
    Size             <APPLET WIDTH=? HEIGHT=?>  (in pixels)
    Spacing          <APPLET HSPACE=? VSPACE=?> (in pixels)


  Comment          <!-- *** -->       (not displayed by the browser)
  Prologue         <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  Searchable       <ISINDEX>          (indicates a searchable index)
    Prompt           <ISINDEX PROMPT="***">    (text to prompt input)
  Send Search      <A HREF="URL?***"></a>  (use a real question mark)
  URL of This File <BASE HREF="URL">  (must be in header)
  Base Window Name <BASE TARGET="***">(must be in header)
  Relationship     <LINK REV="***" REL="***" HREF="URL">  (in header)
  Meta Information <META>             (must be in header)
  Style Sheets     <STYLE></STYLE>    (not widely supported yet)
  Scripts          <SCRIPT></SCRIPT>  (not widely supported yet)


Example 1 - a page with two frames

Example 2 - a page with three frames

Include this fragment in your source code:
begin of html...
<FRAMESET COLS="18%,82%">
   <FRAME SRC="tree.htm" SCROLLING="NO" NORESIZE NAME="index">
<FRAMESET ROWS="16%,84%">
   <FRAME SRC="main.htm" SCROLLING="YES" NAME="main">
To view this document, you need a frames-compatible browser such as Netscape Navigator or Microsoft Internet Explorer.
...end of html

Example 3 - Color Examples


Example 4 - Form Examples

Input Text: password Checkbox : Value1 Value2 Radio : Value1 Value2 Choice : Textarea : Button :