Submit Your Article Webforumz RegistrationAnnouncements Contact Webforumz StaffContact
Home Resources Blogs Meet the Team Contact Register

Go Back   WebForumz.com > Resources > FAQ > (X)HTML & CSS
Register All Albums Blogs FAQ Members List Calendar Search Today's Posts Mark Forums Read

Author


Jack Franklin
Jack is 15 years old and lives happily in Cornwall, England. Web Design is his passion and he works using xHTML, CSS and PHP to code his websites, with the odd bit of Javascript now and then. In his spare time, Jack enjoys playing Football, rugby, tennis and snooker (but not all at the same time).

RSS Feed

Your Options
I run a site for tutorials and need to be able to display HTML code. How can I do this?

Displaying HTML Code on websites can be a pain. How can you do it? Any code will just be displayed by the browser as code, not actually displaying the code for users to see. Thankfully, there is a way and in this tutorial I explain how.

You need to use HTML Entities. These are a series of small 'codes' which, in a browser, display various objects. In the case of displaying code, the code '<' actually displays as '<' and '>' displays '>'. Each character entity has three parts: An ampersand( &), a name and then a semi colon. So, to display your code, you need to replace all the '<' and '>' with '<' and '>'. There are two ways, I have found, which are the most effective. Firstly, I highly recommend using this site: Simple Bits. Simply enter your code in the top box, and it automatically changes the code for display purposes. Or, the other method, is to use the Find and Replace feature in your program.

Note: Each HTML Entity also has an 'ID', or an Entity Number. '<' can also be typed as '<'. However, most people find it easier to use names, because they are easier to remember. For example, the following code:

<p>A paragraph. The tags will be displayed thanks to Entities!
<p>
© Creative Coding
Will display on the page like so:
<p>A paragraph. The tags will be displayed thanks to Entities!<p>
� Creative Coding
To then style your code you should put and around your display code. You will have noticed that SimpleCode, the first link I posted, also does this for you. Then, to style, it's simply a matter of using CSS. For a full list to HTML Entities check out this link on W3Schools. http://www.w3schools.com/html/html_entities.asp

Related Resources

Members's Comments
Posted at July 5th, 2008 by unitedcraig
I would not recommend using the find and replace.

If, for example, you are replacing all "<" in you sample code with "<", then you are increasing the chances of replacing valid code with the new HTML Entity.

The best way would be to use the tools mentioned above :)
Posted at June 26th, 2008 by moojoo
http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/ is also a good tool for converting the characters quickly.
Page 1 of 1


Search Engine Optimization by vBSEO 3.2.0 RC8