ACME Labs HTML Sampler

HTML is really pretty easy to learn. If you've ever used any sort of text formatting language, such as nroff or Scribe, this is the same idea. Even if you haven't, you should be able to pick this up pretty quick; it's just text with <special codes> interspersed to specify the formatting.

This page gives examples of all the basic HTML formatting codes. Read through it as a tutorial; refer back to it as a reference; use the index at the end.


Basic document:


<html>
  <!-- Sample document skeleton. -->
  <head>
    <title>Elmer's Web Page</title>
  </head>
  <body>
    <h2>Elmer's Web Page</h2>

    <p>
    Text goes here.

    <hr>

    <a href="prevdoc.html">Back to previous document.</a>
    <br>
    <address><a href="mailto:efudd@mail.acme.com">Elmer Fudd &lt;efudd@mail.acme.com&gt;</a></address>
  </body>
</html>
    
The <!-- is a comment. <h2> is a medium-sized header; <h1> is the biggest header and <h4> is the smallest. <p> is a paragraph separator. <hr> is a "horizontal rule" - a dividing line. <br> is a line break.

Basic images and links.

Text link:
Jef's page.
<a href="http://acme.com/jef/">Jef's page.</a>
Image:
smiley
<img src="http://acme.com/resources/smiley.gif">
Image link:
smiley
<a href="http://acme.com/jef/"><img src="http://acme.com/resources/smiley.gif"></a>
Image vertical alignment:

Various text styles:

<em>emphasis</em>
<strong>strong emphasis</strong>
<cite>a book, article, film title</cite>
<code>reference to something computerish, such as a file name</code>
<dfn>a word being defined</dfn>
<kbd>something the user is supposed to type</kbd>
<samp>output from the computer</samp>
<var>a meta-syntactic variable</var>
<b>bold</b>
<i>italic</i>
<tt>fixed-width</tt>
super<sup>script</sup>
sub<sub>script</sub>

Some common special characters and accents:

& &amp; < &lt; > &gt; « &laquo; » &raquo;
© &copy; ® &reg; ¢ &cent; £ &pound; ¥ &yen; µ &micro;
§ &sect; ¶ &para; ° &deg; ± &plusmn; ² &sup2; ³ &sup3;
¼ &frac14; ½ &frac12; ¾ &frac34; × &times; ÷ &divide;
à &agrave; á &aacute; â &acirc; ã &atilde; ä &auml; å &aring;
è &egrave; é &eacute; ê &ecirc; ë &euml;
ì &igrave; í &iacute; î &icirc; ï &iuml;
ò &ograve; ó &oacute; ô &ocirc; õ &otilde; ö &ouml; ø &oslash;
ù &ugrave; ú &uacute; û &ucirc; ü &uuml;
¡ &iexcl; ¿ &iquest; ß &szlig; æ &aelig; ç &ccedil;
ð &eth; ñ &ntilde; ý &yacute; þ &thorn; ÿ &yuml;
Note that unlike other HTML codes, these are case-sensitive.

Bullet lists:


<ul>
  <li>apples</li>
  <li>bananas</li>
</ul>
    

Lists can also specify the bullet type:

<ul type="disc">
<ul type="circle">
<ul type="square">

Numbered lists:

  1. oranges
  2. peaches
  3. grapes

<ol>
  <li>oranges</li>
  <li>peaches</li>
  <li>grapes</li>
</ol>
    
Numbered lists can also specify the numbering type and starting number:
<ol type="A" start="2">
  1. capital letters
<ol type="a" start="3">
  1. small letters
<ol type="I" start="4">
  1. large roman numerals
<ol type="i" start="5">
  1. small roman numerals

Tagged lists:

Tag
Description. Can be multiple lines, paragraphs, sublists, whatever.
Another Tag
Another description.

<dl>
  <dt>Tag</dt>
  <dd>Description.  Can be multiple lines, paragraphs, sublists, whatever.</dd>
  <dt>Another Tag</dt>
  <dd>Another description.</dd>
</dl>
    
You can also leave off the tags:
Description. Can be multiple lines, paragraphs, sublists, whatever.
Another description.

<dl>
  <dd>Description.  Can be multiple lines, paragraphs, sublists, whatever.</dd>
  <dd>Another description.</dd>
</dl>
    

You can use <blockquote> to indent a whole block of text:

This text is indented from the rest.

You can have multiple paragraphs indented too.

Back out again; use </blockquote> to terminate a quote.

You can also turn formatting completely
	off for
    an entire section, using <pre> and </pre>.
    

Simple table:

Caption.
col 1col 2
row 1row 1 col 1row 1 col 2
row 2row 2 col 1row 2 col 2

<table border="1">
  <caption align="bottom">Caption.</caption>
  <tr><td></td><th>col 1</th><th>col 2</th></tr>
  <tr><th>row 1</th><td>row 1 col 1</td><td>row 1 col 2</td></tr>
  <tr><th>row 2</th><td>row 2 col 1</td><td>row 2 col 2</td></tr>
</table>
    

Whitespace options:

cellspacing="10"
row 1 col 1row 1 col 2
row 2 col 1row 2 col 2
cellpadding="10"
row 1 col 1row 1 col 2
row 2 col 1row 2 col 2

Other basic HTML resources:

Plus, whenever you see something interesting and want to know how it was done, do a View Source!

Index to all tags:

<!--> <a> <address> <b> <blockquote>
<body> <br> <caption> <cite> <code>
<dd> <dfn> <dl> <dt> <em>
<h1> <h2> <h3> <h4> <head>
<hr> <html> <i> <img> <kbd>
<li> <ol> <p> <pre> <samp>
<strong> <sub> <sup> <table> <td>
<th> <title> <tr> <tt> <ul>
<var> &entity;

ACME Labs / HTML Sampler
email