HTML 2.0 Example

This page shows a simple HTML 2.0 document broken down into the source code on the left and the results (more or less) on the right.

You may also want to:

(If you are using NCSA Mosaic, see the note to Mosaic users before reading any further.)

When this column is the code...

You will see this column...

 
<HTML>
 
<!-- A comment. -->
 
<!-- Comments can also span 
multiple lines. -->
 
<HEAD>
 
<TITLE>I like learning new 
things</TITLE>
Netscape - [I like learning new things]
 
</HEAD>
 
<BODY>
 
<H1>I like learning!</H1>

I like learning!

 
<HR>
 
<h2>With text...</h2>

With text...

 
<h4>...and other things</h4>

...and other things

 
I can <em>emphasize</em> things, 
and I can make things 
<strong>stronger</strong>.<p>
 I can emphasize things, and I can make things stronger.

 
Extra          spacing     
    doesn’t         
         matter.<p>
 Extra spacing doesn’t matter.

 
An inline image like this <IMG SRC= 
"http://wheel.dcn.davis.ca.us/
~csandvig/ip/flower.gif"
ALIGN=BOTTOM> can be inserted
wherever I want.<P>
 An inline image like this can be inserted wherever I want.

 
The alignment of the image
<IMG SRC="http://wheel.dcn.davis.
ca.us/~csandvig/ip/flower.gif"
ALIGN=TOP> can
be adjusted, too.<P>
 The alignment of the image can be adjusted, too.

 
<DL>
<DT>Definition lists:
<DD>Can be useful.
</DL>
Definition lists:
Can be useful. 
<OL>
<LI>Ordered lists
<LI>Number things
<LI>As you go, automatically.
</OL>
  1. Ordered lists
  2. Number things
  3. As you go, automatically. 
Sometimes text has to line up.<P>
<PRE>
^   ^
O   O
  L
\___/
</PRE>
 Sometimes text has to line up.

^   ^
O   O
  L
\___/

Characters used in HTML code have 
to be specially formated, e.g. 
quotes (&quot;&quot;) and 
ampersands (&amp;).<P>
 Characters used in HTML code have to be specially formated, e.g. quotes ("") and ampersands (&).

 
Lists can be &quot;nested&quot; for 
greater effect:<P>
<MENU>
<LI>Many Topics Have Subtopics
<UL>
<LI>Like this one
<LI>(it has two)
</UL>
<LI>But Some Topics Stand Alone
</MENU>
 Lists can be "nested" for greater effect:

  • Many Topics Have Subtopics
    • Like this one
    • (it has two)
  • But Some Topics Stand Alone 
    • In some cases, a line break is 
better than a paragraph break:<P>
Mr. U. R. Linebreaker<BR>
1 Main St., Davis, CA 95616<P>
    		 In some cases, a line break is better than a paragraph break:

    Mr. U. R. Linebreaker
    1 Main St., Davis, CA 95616

    		 
    Hypertext links are useful, as 
in:<BR>
You can <A HREF="foo.html">return 
to the last section you were in</A> 
from here.<P>
    		 Hypertext links are useful, as in:
    You can return to the last section you were in from here.

    		 
    Local links are useful, too:<BR>
You can <A HREF="#here">go to the 
next sentence</A> now.<P>
    		 Local links are useful, too:
    You can go to the next sentence now.

    		 
    <A NAME="here">The next 
sentence.<P>
    		 The next sentence.

    Pictures may stand alone:<BR>
<IMG SRC="pic.gif" ALT="(a 
plane)"><P>
    		 Pictures may stand alone:
    (a thought)

    		 
    Or be links:<BR>

<A HREF="foo.html"><IMG 
SRC="pic.gif" ALT="(a 
plane)"></A><P>
    		 Or be links:
    (a plane)

    		 
    Always sign your work!
<hr>
<address>imaip@wheel.dcn.davis.ca. 
us</address>
Ima Infoprovider, DCN Member<BR>
Last updated: <EM>5 July 95</EM>
    		 Always sign your work!
    imaip@wheel.dcn.davis.ca. us
    Ima Infoprovider, DCN Member
    Last updated: 5 July 95    		 
    </BODY>
    		 
    </HTML>

    Remember, you can also:

    A note to Mosaic users: At the last update, this document was tested with NCSA Mosaic 2.0.0-beta. Some items in the right column will not display properly or at all, <TITLE> and <HR> will not display at all, and nested lists will not appear nested. In earlier versions of Mosaic than 2.0.0-beta even more will not display as intended. You are highly encouraged to print out the Microsoft Word version of this document instead, or use another browser.

    Ever since someone listed this page in Yahoo under Computers and Internet:Software:Data Formats:HTML:Guides and Tutorials, the positive feedback has been overwhelming. The Davis Community Network appreciates all your comments and input. If you are coming to this page from another system, you may also be interested in the other materials developed for this course. Please direct all comments to the author, Christian Sandvig.