How to display HTML code in your web pages
This is a Monday afternoon tip, because I have just been asked the question.
If you want to include some HTML source code in your web page, so that someone can cut and paste it into their website, the problem is that it will be treated as part of your web page itself, and will not be displayed as you wish.
Here are two ways to do it.
“Encode” the Source Code Snippet
If you look at the source for the paragraph heading, it looks like this:
<h2>”Encode” the Source Code Snippet</h2>
but normally the <h2> and </h2> would not be displayed, but would make the text be displayed as a “level 2″ heading.
To make the <h2> and </h2> display like this, the source code has been changed to use “symbols”. If you take a look, the code looks like this:
<h2>”Encode” the Source Code Snippet</h2>
< is “Less than” and so on.
And that is all there is too it.
There are a number of characters that need changing to symbol-codes to make this work, but Felgall Internet have a website that does the translation for you. Follow the instructions.
Use a Text File
Personally, I simply create a text file, upload that file and then include a link to the file in the page. This approach is far less palaver.
[tags]web page, encode html source, hint, felgall internet[/tags]
Categories: Hints and Tips, Internet / Technical, Political Blogging
There is another way, Matt – putting minus the spaces around the code you want available works as well, and is even easier than creating and uploading a text file for download.
[For an example of textarea tags in use, see the bottom of the far right sidebar on my blog]
The reason I left textarea tags out was that when you edit them in a blog post in the backoffice (rather than in the sidebar template) the text area can be treated as part of the editing box – so the code that should close the textarea box in your blogpost actually closes the editing box in the backoffice and destroys the layout of the back office web page.
Matt
[...] How to display HTML code in your web pages [...]
No matter what you do, I just found out that you cannot embed html code snippets into MySpace Bulletins.
I tried xmp, code, pre, textarea, html entities, etc…
no luck.
Sorry to hear that.
Time for Wordpress?
Thanks for your guide, but you can also use Window Live Writer.
I have used it to add HTML code on my posts. It works greatly.
infoteksites last blog post..Remove Blogger Navigation Bar.
@infoteksite: Thanks for the visit and suggestion. Much appreciated.
Matt.