Wednesday, August 8, 2007

Display HTML Code as Text

Posting Sample HTML Code as Ordinary Text


In a prior Post I showed an illustrative sample of HTML code as ordinary text.

That task isn't as simple as it might seem. When displaying a text of HTML code, a Browser probably will EXECTUE the inserted HTML code. . .and hide it from view. . . rather than just show it as text.

In my case, my Post presented the HTML code for the AdSense Section Targeting tags as follows;
(<!-- google_ad_section_start --> and <!-- google_ad_section_end -->)

These tags consist of the texts;
"google_ad_section_start" and "google_ad_section_end"

enclosed in the standard HTML Comment Delimiters . . .
<!--    and    -->

But the Browser interpretes the combinations of text and delimiters as HTML Comments and only displays the "code-free" elements of the desired text as follows:
( and )

To stop the Browser from reading the inserted (or embedded) HTML text as code, the "less than" and "greater than" keyboard symbols in the HTML Comment Delimiters must be replaced by equivalents (HTML Character Entities) that won't be treated as HTML code by the Browser. . .
Use --    & l t ;    for the "less than" keyboard symbol and
Use --    & g t ;    for the "greater than" keyboard symbol

. . .in HTML code to be displayed as text in a Post (where & is the ampersand keyboard symbol).


By the way, now my problem is displaying "& l t ;" (and "& g t ;") as text characters rather than the keyboard "less than" (and "greater than") symbols to which the Browser converts them. Though I know there's a right way to fix it that I've forgotten, my quick solution was to put blank spaces between the characters & l(or g) t and ;. If you use & l t ; (or & g t ;) -- leave out the spaces I added between the characters.


P.S. I found the solution to the & l t ; problem is the same as the "less than" problem. . .HTML Character Entities. To get the & l t ; to display as the intended text, replace the ampersand keyboard symbol with its HTML Character Entity --   &amp;   -- to get   &lt;

Other HTML Character Entities include   &quot;   and   &nbsp;   for the double quote and blank space keyboard symbols, respectively.

AND In HTML, Browsers usually ignore any series of blank spaces after the first, so if you want to        space        things        out        with blank spaces, you will have to use one or more of the blank space HTML Character Entity --   &nbsp;

Plus
DON'T forget the semicolon at the end of these HTML Character Entities.

No comments: