Increasingly Nicer HTML Examples

You can use any plain ASCII file as an HTML document, but it will probably look terrible. Here are some tips for making plain text files look good.
                                                              first

Example 1: Plain text

Up is one way                                                 next
Down is another
Left is port
Right is starboard

becomes compressed:

Up is one way Down is another Left is port Right is starboard
















Example 2: Plain text PREserved

<pre>                                                         next
Up is one way
Down is another
Left is port
Right is starboard
</pre>

becomes sort of okay, but uses an ugly font:

Up is one way
Down is another
Left is port
Right is starboard











Example 3: Plain text with paragraph breaks

Up is one way<p>                                              next
Down is another<p>
Left is port<p>
Right is starboard<p>

becomes okay but is too widely spaced:

Up is one way

Down is another

Left is port

Right is starboard










Example 4: Plain text with thinner paragraph breaks

Up is one way<br>                                             next
Down is another<br>
Left is port<br>
Right is starboard<br>

becomes okay but is boring:

Up is one way
Down is another
Left is port
Right is starboard












Example 5: Text with emphasis

<strong>Up</strong> is one way<br>                            next
<strong>Down</strong> is another<br>
<strong>Left</strong> is port<br>
<strong>Right</strong> is starboard<br>

looks good but doesn't do anything:

Up is one way
Down is another
Left is port
Right is starboard












Example 6: Text with images

<img src="images/up.gif"> is one way<br>                      next
<img src="images/down.gif"> is another<br>
<img src="images/left.gif"> is port<br>
<img src="images/right.gif"> is starboard<br>

looks VERY good, but doesn't work on non-image browsers:

is one way
is another
is port
is starboard

[IMAGE] is one way
[IMAGE] is another
[IMAGE] is port
[IMAGE] is starboard








Example 7: Text with images and alternates

<img alt="Up" src="images/up.gif"> is one way<br>
<img alt="Down" src="images/down.gif"> is another<br>
<img alt="Left" src="images/left.gif"> is port<br>
<img alt="Right" src="images/right.gif"> is starboard<br>

looks good, always works, but doesn't do anything:

Up is one way
Down is another
Left is port
Right is starboard







Carnegie Mellon Computer Science mwm@cs.cmu.edu
Next, Up, Prev,