There are many times when you need to show some sample C#, or java or any other code in your web page. For proper understanding and readability, these kind of code snippets need proper formatting.
But..by default, browsers collapse all the spacings, tabs and line breaks.
So, for properly formatting such stuffs, what do you do ??
One way is to go through all the lines, and at every occurance.. manually replace the white spaces with , line breaks with <br/> tags. While writing loops, for every ‘ < ’ and ‘ > ’ signs write < and >, etc etc.
Don’t you think all this is a real pain ??
A simple solution to this problem is using HTML pre tag.
Pre tag simply displays the enclosed pre-formatted text. This means that it directs the web browser to render the section of text contained within pre tag, exactly as it is..including the line breaks and white spaces. The <pre> tag is supported in all major browsers.
When you place any paragraph with preformatted text such as some poetry or some lines of code.. directly inside the Body tag of HTML, browser ignores the spacing, tabs and line breaks used in its text formatting. This is because a web browser interprets your html document as being one long line. Sure, you may have tabs and line breaks in notepad aligning your content so it is easier to read for you.. but your browser ignores those tabs and line breaks. So, if you will enclose that preformatted text with HTML pre tag <pre> it will not ruin the formatting of the text and will display with its formatting preserved.
pre tag is a container tag, which means it begins with an opening <pre> element and ends with closing </pre> element. The common attributes such as id, style, class, title etc and the events such as onclick, onmouseover, ondbclick etc as common to most html elements..are applicable to pre tag as well.
This element can be contained inside other elements such as html "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th", etc.
And it may contain any other inline elements except "img", "object", "applet", "big", "small", "sub", sup". "font", and "basefont".
The PRE element is handy for showing program code or part of file content as in the example below:
<pre>
But..by default, browsers collapse all the spacings, tabs and line breaks.
So, for properly formatting such stuffs, what do you do ??
One way is to go through all the lines, and at every occurance.. manually replace the white spaces with , line breaks with <br/> tags. While writing loops, for every ‘ < ’ and ‘ > ’ signs write < and >, etc etc.
Don’t you think all this is a real pain ??
A simple solution to this problem is using HTML pre tag.
Pre tag simply displays the enclosed pre-formatted text. This means that it directs the web browser to render the section of text contained within pre tag, exactly as it is..including the line breaks and white spaces. The <pre> tag is supported in all major browsers.
When you place any paragraph with preformatted text such as some poetry or some lines of code.. directly inside the Body tag of HTML, browser ignores the spacing, tabs and line breaks used in its text formatting. This is because a web browser interprets your html document as being one long line. Sure, you may have tabs and line breaks in notepad aligning your content so it is easier to read for you.. but your browser ignores those tabs and line breaks. So, if you will enclose that preformatted text with HTML pre tag <pre> it will not ruin the formatting of the text and will display with its formatting preserved.
pre tag is a container tag, which means it begins with an opening <pre> element and ends with closing </pre> element. The common attributes such as id, style, class, title etc and the events such as onclick, onmouseover, ondbclick etc as common to most html elements..are applicable to pre tag as well.
This element can be contained inside other elements such as html "applet", "blockquote", "body", "button", "center", "del", "dd", "div", "fieldset", "form", "iframe", "ins", "li", "map", "noframes", "noscript", "object", "td", and "th", etc.
And it may contain any other inline elements except "img", "object", "applet", "big", "small", "sub", sup". "font", and "basefont".
The PRE element is handy for showing program code or part of file content as in the example below:
<pre>
function sayHello(){
int i =0;
for(i=0; i <=10; i++){
System.out.println("Hello World !!");
}</pre>You will see the output in your web page as :
function sayHello(){
int i =0;
for(i=0; i <=10; i++){
System.out.println("Hello World !!");
}NOTE : By default, Pre tag displays the pre-formatted text in Courier font type.A very good example for using pre tag is posting articles using blogger interface. Formatting the articles using blogger UI was a pain for me.. Pre tag really saved my life..
References :• http://htmlhelp.com/reference/html40/block/pre.html
• http://www.codetoad.com/html/text/pre_tag.asp
• http://www.htmlquick.com/reference/tags/pre.html
• http://programming.top54u.com/post/HTML-Pre-Tag-for-Preformatted-
Text.aspx
No comments:
Post a Comment