Increasingly Nicer HTML Examples

                                                              first

Example 1: Plain text

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

becomes compressed:

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:

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:

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:

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:

[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:

mwm@cs.cmu.edu