How to use the PRE and CODE tags

This one is pretty straight forward. I would recommend looking at w3 for this instead of w3 schools.  First off you need need to add this simple tag

<code>  <p>hello ninja</p> </code>

hello ninja

or the pre tags which are “preformatted”.

<pre>                              <p>”hello ninja”</p> </pre>


                   "hello ninja"

Does that makes sense? If you tried to copy and paste the code into some visual editor you might see something like this below appear if you copy the code from the pre tag.

 &lt;code&gt;

&lt;p&gt; $lt;hello ninja &gt;&lt;p&gt;

&lt;/code&gt;

this is crap. do not do try this method.

That looks bad so you know want to show the code tag. I usually the pre tag for creating ascii art cause it’s kinda retro and cool. But use it accordingly with proper formatting and the w3 rules.

<pre>      Some line that looks its floating in space </pre>

The PRE element tells visual user agents that the enclosed text is “preformatted”. When handling preformatted text. It’ll leave the white space intact and it won’t have the automatic word wrap.

<code>

Some code like <img src=”images/coolbeans.jpg”>

</code>

 

So this ascii art will look like shit if you do it without any pre tags.  a motorcyle _  .-.-.=\-. (_)=='(_)   – Yeah that looks like crap. But if you add the pre tags then the user gets to see this.


A motorcycle
               _
          .-.-.=\-.
          (_)=='(_)

But the actual html code might looks like this.


<pre><code>

    a motorcycle
               _
          .-.-.=\-.
          (_)=='(_)


</code></pre>

Well have fun and make some cool ascii art. I copied this from some old school geocities website site thanks to spunk1111.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.