How to display code

basil and I were e-mailed a question last week asking how to display HTML Code in a post that would allow people could add an image link to their sidebar. Many times we  want to display HTML code in our blog posts; however since the contents of the post are also written in HTML we find ourselves in a wee bit of a conundrum. For example let's say we want to give our readers a simple way to copy this link to The Alliance Headquarters:

If you want the code to display in a window you like this:

<a href="http://gevkaffeegal.typepad.com/the_alliance/"><img src="http://gevkaffeegal.typepad.com/photos/alliance_logos/seal_small_black.jpg" border="0" /></a>       

You'll first want to setup a form and give it a unique id and a name. that's where the:
<form id="LinkForm" name="LinkForm"> line of HTML gets used. Once we've setup a form we'll want to add a text area to display the code <textarea name="LinkData" rows="10" cols="55"> sets up the text area. You can adjust the Height of the Text Box by adjusting the rows value and the width of the text boxy by adjusting the cols value. 

Then you'll enter the information you want available to copy, if our example it's the hyperlink code:
<a href="http://gevkaffeegal.typepad.com/the_alliance/"><img src="http://gevkaffeegal.typepad.com/photos/alliance_logos/seal_small_black.jpg" border="0" /></a>

When the text to be copied has been added we'll close the text area by entering: </textarea> and then we'll close the form with: </form>

To display the Form Above I entered the following code:

<form id="CopyPasteForm" name="CopyPasteForm">
    <textarea name="CopyPasteData" rows="6" cols="75">
      <a href="http://gevkaffeegal.typepad.com/the_alliance/"><img src="http://gevkaffeegal.typepad.com/photos/alliance_logos/seal_small_black.jpg" border="0" /></a>
    </textarea>
</form>

Some folks may choose another option, which would be to display the HTML Code without the Form. This method comes in handy when you're leaving a suggestion for somebody or if you're just providing a quick tip on how you did something in your template. 

We'll Use the Image Link back to the Alliance for our example again.
To display the HTML for the link back to my page we will be required to enter the HTML Code for certain characters, mainly the less than symbol, greater than  symbol and quote marks.

&lt; is used for the less than symbol (<), &gt; is used for the greater than symbol (>) and &quot; is used to display quote marks (").

To display:
<a href="http://gevkaffeegal.typepad.com/the_alliance/"><img src="http://gevkaffeegal.typepad.com/photos/alliance_logos/seal_small_black.jpg" border="0" /></a>

We would replace the portions in blue with the HTML Code, the result looks like this:
&lt;a href=&quot;http://gevkaffeegal.typepad.com/the_alliance/&quot;&gt;&lt;img
src=&quot;http://gevkaffeegal.typepad.com/photos/alliance_logos/seal_small_black.jpg&quot;
border=&quot;0&quot; /&gt;&lt;/a&gt;

Hopefully this helps we'll get a bit more in depth with HTML Code next week, once the cobwebs have had a chance to clear. As always if you have any suggestions or questions please feel free to shoot basil or I an e-mail, heck you might even win a prize from Harvey or something.

Comments

[Brian Wofford]

Beautiful, simply beautiful ... an instrumental piece of code-work art.

Thanks.

~Brian<3

[Elijah Essex]

This was a great tutorial, although I did find a screw up. You didn't make the '&' blue after the alliance/ section. Other than that, it was wonderful.

[IceKat]

Why use all those complicated methods of replacing '<' with &glt; etc when shows code up perfectly? And can someone explain

 to me please!


(I swear I'm not try to be rude I seriously want to know if there are reasons for these things).
		

ok im not a nerd what the hell do i need to do!?