Displaying HTML Source Code in Web Pages

If you are writing web pages about HTML then there will be times when you want to display HTML codes in your page. If you are not sure how to recode it so that it appears as text instead of being interpreted as code or you are just looking for an easy way to do the conversion without having to make the changes manually then you may want to bookmark this page.

The following form will do all of the work for you. Simply cut a copy of the required section of your web page from your page source and paste it into the top text box and then select the Convert button. The text equivalent of your HTML code fragment suitable for inclusion in your web page as text will appear in the lower text box. Simply copy the code from there and paste it into your page source.

Would you like to see an example of what the form does? Well let's use the paragraph from lower on this page that displays the "back toTop" image (the blue arrow with the word Top next to it that will take you back to the top of the page). Here is what the source code for that paragraph looks like:

<p><a href="#top"><img src="img/top.gif" border="0" width="33" height="16" alt="go to top" /></a></p>

To display that line, I copied that code from the page source and pasted it into the above form and it converted it into the text that I pasted between the horizontal rules above in order to show you what the original code looks like. The code the form gave me to paste into the page to display that code as text looks like this:

&lt;p&gt;&lt;a href="#top"&gt;&lt;img src="img/top.gif" border="0" width="33" height="16" alt="go to top" /&gt;&lt;/a&gt;&lt;/p&gt;

(To show you what the corresponding code generated by the above form looks like I simply fed it through the form a second time)


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow