How to embed code into an HTML page

Embedding fragments of  program code into a blog post or an HTML page is always a problem because the browser finds it hard to distinguish between the actual code used to render a page and the sample code that you are trying to demo. This causes major mess ups. Here is a simple process that will make this task simpler.

1. If your sample code includes HTML or you have < or > symbols in your code, then you first need to encode your sample code using any of the tools from this list. However the tool that I have used to create this blog post is this HTML encoder from opinionatedgeek.com . This tool will take your raw HTML as an input and generate encoded HTML. 

2. Copy the following code into a text editor.

<pre style="font-family: Andale Mono,Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee; font-size: 12px; border: 1px dashed #999999;line-height: 14px; padding: 5px; overflow: auto; width: 100%">
<code style="color:#000000;word-wrap:normal;">
========================================
   <<<<<<<YOUR encoded CODE HERE>>>>>>>
========================================
</code>
</pre>

3. Insert your encoded sample code into the space indicated to create a block of code. Copy this code from the text editor and place it in your HTML page where you want to display the sample code. If you are using Blogger to post your code, make sure that you are in the "HTML" mode and not the "Compose" mode.

4. That is it. If you are in Blogger, publish your page and your are done.