RETURN to the HTML tutorial page.

Reference Table of Simple HTML Tags

Last updated April, 1999
line break       <br>
paragraph break  <p>
rule             <hr>                    Draws a horizontal line across page
Headings         <h3>example</h3>                 h1=largest; h6=smallest
Centering        <center>example</center>               example
Indented         <ul>example</ul>                   example
Preformatted     <pre>     </pre>      

boldface         <b>example</b>                   example
Italic           <i>example </i>                  example
bold italic      <i><b>example</i></b>            example
larger font      <FONT SIZE="+1">example</FONT>   example
larger font      <FONT SIZE="+2">example</FONT>   example
smaller font     <FONT SIZE="-1">example</FONT>   example
Large letter     <FONT SIZE="+3">E</FONT>xample   Example
subscript        H<sub>2</sub>O                   H2O
superscript      cm<sup>2</sup>                   cm2
Symbol font      <font face="symbol;">abcde</font>  abcde
Color text        <font color="#ff0000">example</font>  example

Inline graphics

   Display sun.gif           <img src="sun.gif">             
   Graphic on right          <img align=right src="sun.gif"> 
   Graphic on left           <img align=left src="sun.gif">  
   Display centered image    <center><img src="sun.gif"></center> 
   Graphic in folder         <img src="folder/sun.gif">     
   Display image.jpg         <img src="image.jpg">
   Graphic as hyperlink      <a href="page.html"><img src="sun.gif"></a>


Link to page.html in same directory:
<a href="page.html">LINK TEXT</a>

Link to page.html stored in subdirectory "directoryname":
<a href="directoryname/page.html">LINK TEXT</a>

Link to page.html in higher-level directory:
<a href="../page.html">LINK TEXT</a>

"Absolute" reference to another server (e.g. The White House):
<a href="">The White House</a>

"Absolute" reference to a specific page on another server:
<a href="">Tom O'Haver's Home Page</a>

Link to page.html with sun.gif as a graphic hyperlink:
<a href="page.html"><img src="sun.gif"></a>

Link to sound file "" (or movie file ""):
<a href="">LINK TEXT</a> (or "")

Imbeded controller for sound files:
<embed src="" width=144 height=30 autostart=false>

"Mailto" link to send email to a specified email address:
<a href="">Send email to Tom O'Haver</a>

In each of the above, LINK TEXT is the underlined blue text that you click on.

Indented lists

Bulleted list:
  <li>first item
  <li>second item
Ordered (auto-numbered) list:
  <li>first item
  <li>second item


     <TH></TH>            <TH>Column heading</TH> <TH>Column heading</TH> 
     <TH>Row heading</TH> <TD>cell contents</TD>  <TD>cell contents</TD>
     <TH>Row heading</TH> <TD>cell contents</TD>  <TD>cell contents</TD>
Simply Copy and Paste this template, adding rows and columns as needed, and replacing "Column heading", "Row heading", and "cell contents" with your own contents.

Background and text colors


000000 = black           ffffff = white          404040 = dark gray
808080 = medium gray     B0B0B0 = light gray     ff0000 = red
ff8080 = pink            00ff00 = green          80ff80 = pale green
0000ff = blue            8080ff = pale blue      ffff00 = yellow
ffff80 = pale yellow     ff00ff = magenta        00ffff = cyan
800080 = purple          401000 = brown          ff7000 = orange

Background patterns

To use xxxx.gif as background pattern, replace <BODY> tag with:
<BODY background="xxxx.gif">

RETURN to the Workshop Handouts page.

This page is maintained by Tom O'Haver , Department of Chemistry and Biochemistry, The University of Maryland at College Park. Comments, suggestions and questions should be directed to Prof. O'Haver at Number of unique visits since May 29, 2008: