google yahoo msn youtube aol wikipedia  amazone  facebook twitter


Saturday, September 19, 2009

Home » , , » DISPLAYING HTML CODE / JAVA SCRIPT IN THE POST

DISPLAYING HTML CODE / JAVA SCRIPT IN THE POST

To build a web page, most common tools being use are HTML (Hypertext Markup Language) and JavaScript. HTML or JavaScript, as well as its tag will not be displayed on the web page we see. What we see is normal text as an end user language or human language, whereas HTML as a machine language only works behind the scenes.
Sometimes, when we want to explain about HTML tag, as a way of writing HTML, on web pages; e.g. script package such as widgets script, table script, ordered list script, and so on, we need to show the original form of the HTML Scrip itself. For this purpose, we can not write the original script as in the draft posts, because what we will see in web page is the result of a scripting language, not the tag structure itself. In this case, we will not see what we have written. WYSIWYG (What You See Is What You Get) is not applicable.
Let’s say you have a website about web design. And let’s say you want to display the tag required for creating a horizontal wide 20% rule. Well, if you type the tag <hr width="20%"> into your code, the browser is simply going to render it as it should be (rather than output the actual code example). See example 2.
There are two ways to display HTML tag in the web page:V 1. Encode HTML or Javascript script. This can be done at several online sites such as:
a) http://www.opinionatedgeek.com
b) http://centricle.com/tools/html-entities
and many more.

2. By substituting a few tags that we want to see as it is with character entity references or numeric character references. Basically this method is manual way of the first method.
Example 1:
To display results as in figure 1 in web page, we will write the following script in the HTML template:

Figure 1

If in the code we type:

the result will be in Figure 2:
Figure 2

Example 2:
We will write as:

in the HTML template to below result (Figure 3)in web page

Figure 3
What will displayed if we type below code is shown in Figure 4, horizontal line
Figure 4
Let do your own experiment..!!