SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Saturday, September 4, 2010

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.

Screen shot to illustrate a blog's button and its HTML code in a scroll boxLearning 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.

DescriptionCharacterEntity NameEntity 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 :

    Collage of flowers and butterflies captured in our garden, November 2009

    - 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

6 comments:

  1. Jacqi...you have a new template and this looks great. Thanks for taking the trouble to teach us and guiding us how to install with clear step by step instructions. You have done a great job and do keep it up for we do need your help :)

    ReplyDelete
  2. Hi Elin! Appreciate you dropping by and leaving such wonderful encouragement! Thanks a lot!
    Haha, of course I'm here to stay as I've great passion for learning and sharing! ;-)

    ReplyDelete
  3. Your *sharing* has got me *smiling* as I *learned* so much from you! And now my blog is looking better too. Thank you so very much for de-mystifying e-things :-)

    Blessings...

    ReplyDelete
  4. Hi Wabi-Sabi! Great to know that...you've added some sunshine over here too! :)
    Thanks for your thanks...much appreciated!

    ReplyDelete
  5. thanks buddy.. u saved me.. so valuable post..

    ReplyDelete
  6. My pleasure in sharing, arjun! Glad you've found it helpful.

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search