__ ___ ___ ____ ____ __ ____ ____ /__\ / __) / __)(_ _)(_ _) /__\ ( _ \(_ _) /(__)\ \__ \( (__ _)(_ _)(_ /(__)\ ) / )( (__)(__)(___/ \___)(____)(____) (__)(__)(_)\_) (__) ASCII art is a graphic design technique that uses pictures pieced together from the 95 printable (from a total of 128) characters defined by the ASCII Standard from 1963. Basically, it's a form of graphic design that uses keyboard charecters to form a picture. You can make images, text, logos and whatever you want really. Your imagination is the limit.
ASCII art is a very great way to give your website some flavour, some aesthetic.


Most examples of ASCII art require a fixed-width font (non-proportional fonts, as on a traditional typewriter) such as Courier.



My D Bok drawing also is ASCII art.
This one:

.xH888888Hx. .=*8888x <"?88h. .z@8"` .H8888888888888: X> '8888H> '8888 u. !@88E 888*"""?""*88888X '88h. `8888 8888 ...ue888b '888E u 'f d8x. ^%88k '8888 '8888 "888> 888R Y888r 888E u@8NL '> <88888X '?8 `888 '8888.xH888x. 888R I888> 888E`"88*" `:..:`888888> 8> X" :88*~ `*8888> 888R I888> 888E .dN. `"*88 X ~" !"` "888> 888R I888> 888E~8888 .xHHhx.." ! .H8888h. ?88 u8888cJ888 888E '888& X88888888hx. ..! :"^"88888h. '! "*888*P" 888E 9888. ! "*888888888" ^ "88888hx.+" 'Y" '"888*" 4888" ^"***"` ^"**"" "" ""

You can ofcourse make your own ASCII art and really express your creativness. But, if you just want a quick but still cool looking ASCII logo or text, i suggest you go to ASCII art generators and look through all the fonts they provide, and find something you really like.

These are some good ASCII art generators:


Once you've found the font you like, just copy the text and paste it into your HTML document.
But wait, why does my ASCII drawing look like this??

.xH888888Hx. .=*8888x <"?88h. .z@8"` .H8888888888888: X> '8888H> '8888 u. !@88E 888*"""?""*88888X '88h. `8888 8888 ...ue888b '888E u 'f d8x. ^%88k '8888 '8888 "888> 888R Y888r 888E u@8NL '> <88888X '?8 `888 '8888.xH888x. 888R I888> 888E`"88*" `:..:`888888> 8> X" :88*~ `*8888> 888R I888> 888E .dN. `"*88 X ~" !"` "888> 888R I888> 888E~8888 .xHHhx.." ! .H8888h. ?88 u8888cJ888 888E '888& X88888888hx. ..! :"^"88888h. '! "*888*P" 888E 9888. ! "*888888888" ^ "88888hx.+" 'Y" '"888*" 4888" ^"***"` ^"**"" "" ""


Well, that's because in html all of the white space doesn't really do anything, the browser ignores it. This means that all the white space is no different than just having one space.
To fix this, just put your ASCII art inside a < xmp> tag, like this:

< xmp> .xH888888Hx. .=*8888x <"?88h. .z@8"` .H8888888888888: X> '8888H> '8888 u. !@88E 888*"""?""*88888X '88h. `8888 8888 ...ue888b '888E u 'f d8x. ^%88k '8888 '8888 "888> 888R Y888r 888E u@8NL '> <88888X '?8 `888 '8888.xH888x. 888R I888> 888E`"88*" `:..:`888888> 8> X" :88*~ `*8888> 888R I888> 888E .dN. `"*88 X ~" !"` "888> 888R I888> 888E~8888 .xHHhx.." ! .H8888h. ?88 u8888cJ888 888E '888& X88888888hx. ..! :"^"88888h. '! "*888*P" 888E 9888. ! "*888888888" ^ "88888hx.+" 'Y" '"888*" 4888" ^"***"` ^"**"" "" "" < /xmp>


Now the browser doesn't ignore the white space and it forms the ASCII art that you intended it to.



This was just a quick introduction on ASCII art. If you want more of a deep dive, below i have provided links to some good articles and videos on this topic:
BACK HOME