CWC index .

So you want to use ASCII-art in your website
and aren't sure of the HTML coding?

revised August 2000, October 2003

        ___    /
      _/   |   \,^%---
     |_____|    <_ \ Fear not. It's quite simple....
       --- ==   >/
     [_____]  __>,^
ejm   |   |  //| |

Warning! I do not claim to be an expert in HTML. But the following instructions work for me. I have checked them in Netscape 4.79, MSIE 6.0, Opera6 and whatever Lynx version the Toronto Freenet uses. This method should work for all the later browsers. (Of course, the colours most definitely do not work in Lynx.)

Here, between the dotted lines, is what you type into your html document:

-------------------------dotted line-------------------------
<pre>    


Your             
                 
  /\ (`/`|| _     +
 /--\,)\,||   (||`|
                 
        goes here

                
</pre>   
-------------------------dotted line-------------------------

To display the following characters > (greaterthan), & (ampersand) and < (lessthan), you should replace them with character entities:

type &gt; instead of >
type &amp; instead of &
type &lt; instead of <

Here is an example of ASCII-art using the characters >, & and <

     "", &&&
     / && * >
    /  && _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            <;___)------
  | ejm    |       oo__   " "
                  <;___)------     oo__
                    " "           <;___)------
                                    " "

To get the above drawing, copy the text below (between the ----line----) into your html document. Don't worry that it looks distorted in your text editor. It will come out correctly on the web.

-------------------------dotted line-------------------------
<pre>
     "", &amp;&amp;&amp;
     / &amp;&amp; * &gt;
    /  &amp;&amp; _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            &lt;;___)------
  | ejm    |       oo__   " "
                  &lt;;___)------     oo__
                    " "           &lt;;___)------
                                    " "
</pre>

-------------------------dotted line-------------------------

Please take a look at a chart of the standard ASCII characters.


If you want to center the whole thing, like this,

! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !

make sure all your lines are the same length. (This will not center in Lynx.)

Here, between ----line---- , is what you should type into your html document.

-------------------------dotted line-------------------------
<center>
<pre>
! Your                !
!                     !
!   /\ (`/`|| _     + !
!  /--\,)\,||   (||`| !
!                     !
!         goes here   !
</pre>
</center>
-------------------------dotted line-------------------------

But as I said, it won't necessarily be centered in all browsers. Why? ... just because.


And if you want to add colour, you can do it with style sheets.

It can only be viewed by the later MSIE and Netscape browsers (version 4 and up) that have "style sheets" enabled. Some code goes between <head> and </head> and there is a little additional coding in the body section as well.

To get the following,


  Your
                 
    /\ (`/`|| _     +
   /--\,)\,||   (||`|
                 
          goes here

Here, between each ----line---- , is what you should type into your html document. Please note that this is a two step process. First, between <head> and </head>, type the following code that you see between the double dotted lines.

-------------------------dotted line-------------------------
<head>
<title>coloured ASCII-art</title>
:::::::::::::::::::double dotted line:::::::::::::::::::

<style type="text/css">
<!--
div.white { background:#fff; color:#000; width:30%;}
#red { background:#fff; color:#f00; }
#green { background:#fff; color:#060; }
#blue { background:#fff; color:#009; }
-->
</style>

:::::::::::::::::::double dotted line:::::::::::::::::::
</head>
-------------------------dotted line------------------------- Secondly, somewhere under <body>, type the following code that you see between the double dotted lines. -------------------------dotted line-------------------------
<body>
[...]

:::::::::::::::::::double dotted line:::::::::::::::::::

<div class="white">
<pre>
  <span id="red">Your</span>
                 
    <span id="green">/\ (`/`|| _     +
   /--\,)\,||   (||`|</span>
                 
          <span id="blue">goes here</span>
</pre>
</div>
:::::::::::::::::::double dotted line:::::::::::::::::::

[...]
</body>

-------------------------dotted line-------------------------

Please consult a colour chart for hexadecimal numbers. Don't forget to put </span> when you want to change colours. Of course, this method may be foiled by people who like to change the background or text colours of any webpage they are viewing. But, it is their loss if they choose not to see your stunningly coloured ASCII-art.

For more information about style sheets, please consult Mulder's Style Sheet Tutorial and CSS Pointers Group.

I hope all that helps you!

 
 

                 \_,^^%---
                  <\_  \ See? It's easy when you know how....
                  >
                  >^^
                 /| 
ejm             | \
 
 

© llizard 1997, 1998, 2000-2001, 2003, 2007 ( last modified 18 August 2008)

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page