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

revised August 2000

This page has been moved and should be redirected shortly to the correct location. If not, please use the following link:

http://llizard.etherwork.net/cwc/asciionpage.html

        ___    /
      _/   |   \,^%---
     |_____|    <_ \ Fear not. It's relatively 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.73, MSIE 3.0 and whatever Lynx version the Toronto Freenet uses. This method should work for all the later browsers (as long as the viewers aren't perverse and insist on changing the colours to their own particular preferences...). And of course, the colours most definitely do not work in Lynx.

Between the dotted lines is what you type into your html document:

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


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

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

You should replace all > (greaterthan), & (ampersand) and < (lessthan) with character entities.

> with &#062;
& with &#038;
< with &#060;

Here is an example:

     "", &&&
     / && * >
    /  && _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 is distorted in your text editor. It will come out correctly on the web.

-----------------dotted line----------------- 
<pre>
     "", &#038;&#038;&#038;
     / &#038;&#038; * &#062;
    /  &#038;&#038; _C ,""     EEeeee
    \  )(    /
     \   \__/
      ) (
     (  |
  |   \ |
  |    \|
  |   /_|
  |  /  |
  |__)__)__
  |        |  
  |        |             oo__
  |        |            &#060;;___)------
  | ejm    |       oo__   " "
                  &#060;;___)------     oo__
                    " "           &#060;;___)------
                                    " "
</pre>
-----------------dotted line-----------------

I have made a list of the numbers for the 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.)

Between the ----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

Between each ----line---- is what you should type into your html document:

-------------------------dotted line------------------------- 
<html>
<head>
<title>coloured ASCII-art</title>
<style type="text/css">
<!--
#s1 { background-color:#FFFFFF; color:#FF0000 }
#s2 { background-color:#FFFFFF; color:#006600 }
#s3 { background-color:#FFFFFF; color:#000099 }
-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000">

<pre>
<span id="s1">Your</span>
                 
  <span id="s2">/\ (`/`||     +
 /--\,)\,|| (||`|</span>
                 
        <span id="s3">goes here</span>
</pre>
-------------------------dotted line-------------------------


The background-color should be the same as your bgcolor in your body. 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, I say, what business do they have changing your colour choices in the first place????

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

I hope all that helps you!


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


To very basic html
To character entities
To hexadecimal colour chart
To ASCII-art index
To llinks to ridiculously useless sites
To Home Page



©ejm 1997, 1998, 2000-2001

Crosswinds Webhosting