Re: Converting Ansi art to Html pages?

Lester5374 wrote:
> El ito wrote:
> >Is there an easy way to do this?
> [ 8< snip of off-topic part 8< ]
>      For ASCII, just paste the pictures onto your page and then make it
> preformatted text.
> 

Not quite as simple as that, but almost.  :)

OK, here's a short description of how to do this so that it works in
everything from Lynx to M$IE4.

------------------------------------------------------------------------------

If you just want the pictures _available_on_the_web_ you can save them
in a plain-text file (usually called "filename.txt" or "filename.asc")
and link to it from your html document. No special codes needed.

An example:

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/simple.txt

This is a very good way to present ascii art on the web. In a sense it is the
only way to present ascii art on the web and still concider it "pure" 
ascii.

------------------------------------------------------------------------------

If you want to put them in an html page you need to do the following:

1. Replace all   &   characters with   &amp;
   Replace all   <   characters with   &lt;
   (if you want to you can also replace all   >   characters with  &gt; )

2. Put <PRE> at the beginning and </PRE> at the end.

An example:

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/plain.html

This is also a very good way to present ascii art on the web. It may not be 
quite as "pure" as a raw text file, but it can easily be "converted back" to
"pure" ascii with a simple copy-and-paste.

------------------------------------------------------------------------------

If you want to move even further away from the "pure" format and add colour to
the images (this is quite ok to do on the web) you want to add a stylesheet.

The first example is very similar to the html page without stylesheet. It just
adds colour to the text, background and links. I also chose to make the text
bold with the stylesheet (note: this way you will get bold in CSS enabled 
browsers without causing lynx to show everything as underlined):

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/with_style1.html

(This is the way I do it on my homepage.)

---------

The second example shows the picture with a different background colour than
the rest of the page (this method requires the picture to be "padded" with
spaces to make a straight right edge. This can be a bit expensive as it adds
a lot of bytes to the file size):

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/with_style2.html

---------

The third example shows the picture with colours:

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/with_style3.html

(note: all three of these examples will look identical to to the first html
example in non-CSS-enabled browsers)

------------------------------------------------------------------------------

The old method of using <font color="#xxyyzz"> and <b> to get the effects
described above is now considered to be outdated and stylesheets ("CSS") 
should be used instead. If you use a text editor with a "find and replace"
function it shouldn't be too difficult to change your coloured html text art
to use stylesheets.

I have also put the example files in a zip file that you can download and
study:

http://www.ludd.luth.se/~vk/pics/ascii/junkyard/techstuff/webpage/webpage.zip


[I'm no expert at CSS. There may be some errors in the CSS in the pages
above. The html is correct though]


-- 
              _    __   __                _             _
  __   ___.--'_`.  \ \ / /__ _ _ ___ _ _ (_)__ __ _   .'_`--.___   __
 ( _`.'. -   'o` )  \ V / -_) '_/ _ \ ' \| / _/ _` | ( 'o`   - .`.'_ )
 _\.'_'      _.-'    \_/\___|_| \___/_||_|_\__\__,_|  `-._      `_`./_
( \`. )    //\`                                         '/\\    ( .'/ )
 \_`-'`---'\\__,      uggc://jjj.yhqq.yhgu.fr/~ix/     ,__//`---'`-'_/
  \`        `-\            r93...@fz.yhgu.fr           /-'        '/
   `  ascii art chat: http://www.ludd.luth.se/~vk/cgi/asciichat/   '

Related ASCII art in the Gallery

Explore these categories from our collection of 11,000+ artworks:

   _______
  |.-----.|
  || jgs ||
  ||_   _||
  `--)-(--`
 __[=== o]___
|:::::::::::|\
`-=========-`() 

     ,sSSs
   ,SSSS_/ ,_
   sS/`))\//
  sS//|_(_/      _,
  SS\\\  `""-.-'` /
sSS` jgs-==-'`'-._\

 ___________
|  _______  |
| |       | |
| |       | |
| |       | |
| |_______| |
|___________|

//O\\

|\/\/\/|
|      |
|      |
| (o)(o)
C      _)
 | ,___|
 |   /
/____\

|HHHHH/"\"\HHHHHHH|
|HH`\|_.-)'|/'dP,H|
|Hb.`\\_/_//'.oddH|
|HHHb|`.\/\,'|HHHH|
|HHHHHb/\/\/|HHHHH|
|"""""""""""""""""|
| |"" /\ \  / |"" |
| |__/--\ \/  __| |

Make your own ASCII art

Turn images, text or 3D into ASCII, or draw your own – right in your browser.