How to place HTML in a Scroll Box, Blog Post or Elsewhere

Creating a scroll box is simple, you can follow this easy tutorial here on making one!

Thus, in this post, I will focus more on how to type HTML (Hypertext Markup Language) code, using HTML entities so that they appear as they are, that is, normal character text and not as markup.

Learning how to do it properly is essential for all of us who'd like to share tutorials on blogging tips and the like, where correct HTML script/codes are needed to be presented as guides.

Some others may simply want to share their blog's buttons and need to display the proper HTML codes so that interested parties can copy and paste to their blogs or websites.

Yet others may want to email some HTML to friends, not realizing that the code will be processed by the web browser as markup in transition.

Hehe, I've faced these related problems before as a greenhorn but have since learned how to overcome them...a steep learning curve it has been for me this past year! Anyway, I'm still at the lower rung of the learning curve. :-)

Here's how to
insert the HTML code in a scroll box
or simply in a blog post or elsewhere
so that the output is displayed as is and not as markup :

Do follow through this tutorial right to the end for a bonus! ;-)

Step 1:
To do this, all the angle brackets, ampersands, quotation marks and apostrophes included in the HTML code within the symbols < and >, have to be converted to HTML character entities beforehand so that the web browser will present them as they are, that is, character data. Otherwise, if the unconverted HTML is typed as is, the browser may mistake them for markup instead and interpret accordingly.

The table below provides the HTML entities to be used for the 5 special characters, reserved in HTML and XHTML. You can use either the entity name or entity number to replace the equivalent characters. (Observed that apostrophe remains undefined in HTML?) Further info at W3Schools.

Description	Character	Entity Name	Entity Number
Less than	<	&lt;	&#60;
Greater than	>	&gt;	&#62;
Ampersand	&	&amp;	&#38;
Quotation mark	"	&quot;	&#34;
Apostrophe	'	&apos;	&#39;

Step 2 :
Testing it out with two examples -

• (i) HTML for a simple URL:
  - if its HTML code is typed as is (highlighted in orange below),
  <a href="http://jacqsbloggertips.blogspot.com/">Jacq's Blogger Tips</a>
  
  the editor or web browser will interpret it as a URL to Jacq's Blogger Tips.
  
  - Whereas, if the HTML code is encoded with HTML entities, like those highlighted in red, using the above table as a guide:
  
  &lt;a href=&quot;http://jacqsbloggertips.blogspot.com/&quot;&gt;Jacq's Blogger Tips&lt;/a&gt;
  
  then, the output will just remain as ordinary text as intended, as seen below:
  <a href="http://jacqsbloggertips.blogspot.com/">Jacq's Blogger Tips</a>
  
  
• (ii) HTML for an image:
  - if its HTML is typed out (or copy and paste) as is (highlighted in orange below),
  
  
  <a href="http://www.flickr.com/photos/jayjayc/4149995398/" title="Collage of flowers and butterflies captured in our garden, November 2009 by jayjayc, on Flickr"><img src="http://farm3.static.flickr.com/2526/4149995398_95d2940297_m.jpg" width="240" height="180" alt="Collage of flowers and butterflies captured in our garden, November 2009" /></a>
  
  then, the editor or web browser will read it as markup and automatically render it as the image as seen here :
  
  
  
  - Whereas, if the same HTML is encoded as character entities instead (as highlighted in red), using the table above as a guide,
  
  &lt;a href=&quot;http://www.flickr.com/photos/jayjayc/4149995398/&quot; title=&quot;Collage of flowers and butterflies captured in our garden, November 2009 by jayjayc, on Flickr&quot;&gt;&lt;img alt=&quot;Collage of flowers and butterflies captured in our garden, November 2009&quot; height=&quot;180&quot; src=&quot;http://farm3.static.flickr.com/2526/4149995398_95d2940297_m.jpg&quot; width=&quot;240&quot; /&gt;&lt;/a&gt;
  
  it will then be converted to normal character text as seen below. This is how it should appear as intended in a blog post, scroll box or anywhere you wish :
  
  <a href="http://www.flickr.com/photos/jayjayc/4149995398/" title="Collage of flowers and butterflies captured in our garden, November 2009 by jayjayc, on Flickr"><img alt="Collage of flowers and butterflies captured in our garden, November 2009" height="180" src="http://farm3.static.flickr.com/2526/4149995398_95d2940297_m.jpg" width="240" /></a>
  

Step3:
When you're done with encoding the HTML into character text, just place the whole encoded HTML in a scroll box if you desire, using the HTML script code for creating one like this :

<div style="border: 1px solid grey; height: 80px; overflow: auto; width: 350px;">PLACE THE ENCODED HTML ENTITIES HERE</div>

and voila...the result below! And, you're done!

<a href="http://www.flickr.com/photos/jayjayc/4149995398/" title="Collage of flowers and butterflies captured in our garden, November 2009 by jayjayc, on Flickr"><img alt="Collage of flowers and butterflies captured in our garden, November 2009" height="180" src="http://farm3.static.flickr.com/2526/4149995398_95d2940297_m.jpg" width="240" /></a>

Tip: Refer to my tutorial on creating easy scroll box if you wish to restyle your scroll box and contents.

A little complex, huh? Don't give up! The encoding can be rather confusing if this is your first attempt, but with practice it becomes easier!

AND DEFINITELY EVEN MUCH MORE EASIER AND QUICKER TOO WITH THIS BONUS TIP BELOW!

I chanced upon this absolutely awesome tool at HTML Entities.net that helps to encode and decode HTML entities! And, truly heaven-sent when I was struggling to encode an exceptionally lengthy HTML scripts for my tutorial on Related Posts Widget for Blogger recently.

My grateful billion thanks to HTML Entities.net for sharing this excellent web tool!

How to encode or decode HTML entities?

1. Just follow the link to HTML Entities.net above;
2. Place your HTML code that you want converted to HTML entities into the Input box provided;
3. Hit the Encode button at bottom of box ....and voila, the Result!
4. Copy and paste the encoded HTML to wherever you wish.
5. To decode, just hit the Decode button.

Work like a breeze! Fantastic, right? :-)

Keep learning~~keep smiling~~keep sharing!!

Update: January 31 2012
Next, learn how to display a blog button with text box for code!

Last edit: June 3, 2013