Welcome to WebmasterWorld Guest from 54.226.27.104

Forum Moderators: incrediBILL

Message Too Old, No Replies

Special tags to display html code on the page

     

sanHTM

5:42 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Hi all,

If anyone knows what tags should be used to display HTML tags with the text we write - in another word, the tags that can display other HTML tags in a browser?

Thank you in advance.

Regards

SanHTM

Robin_reala

6:03 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, sanHTM!

This will actually be a combination of two elements and some escaping. To start off with you'd want to set up the following code:

<pre>
<code>
YOUR CODE HERE
</code>
</pre>

This says that you want you whitespace to remain as written (<pre>) - important for computer code. The <code> element is a semantic definition that states that the text inside it is computer code.

If you do just this you'll find that your HTML is still rendered by the browser though. The fix for this is to escape the angle brackets that encompass your tags. This is pretty simple: replace a < symbol with &lt; and a > symbol with &gt;. Your code will then show up inside your page.

[edited by: Robin_reala at 6:04 pm (utc) on Feb. 1, 2007]

sanHTM

8:19 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Thank you for your prompt reply. Your codes won't work as:

<pre></pre> - is used just for recognising the white space
<code></code> - is used just to identify these are the starts of computer codes, etc.

I appreciate help from everyone.

Cheers

birdbrain

8:32 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there sanHTM,

Here is an example of Robin_reala's suggestion...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
width:600px;
height:200px;
border:1px solid #000;
font-family:verdana,arial,sans-serif;
font-size:14px;
overflow:auto;
}
</style>

</head>
<body>

<div id="container">

<pre>

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;

&lt;style type="text/css"&gt;

&lt;/style&gt;

&lt;script type="text/javascript"&gt;

&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

</pre>

</div>

</body>
</html>


birdbrain

Fotiman

8:34 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



You need to escape the < and > character entities using &lt; and &gt;. For example, you might have something like this:

<p>
To create a paragraph, surround your paragraph with &lt;p&gt; and &lt;/p&gt;.
</p>

This would then output this when viewed in a browser:

To create a paragraph, surround your paragraph with <p> and </p>.

You can find the entire list of entities in the HTML spec. [w3.org]

[edited by: encyclo at 8:38 pm (utc) on Feb. 1, 2007]
[edit reason] spliced from duplicate thread [/edit]

sanHTM

8:41 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Thank you for your great help from all of you. I know the entity names: &lt and &gt that can replace < and >. My question is if there is any HTML tags that can be used to display HTML tags in browser?

I do appreciate help from all of you.

Cheers

eelixduppy

8:49 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member eelixduppy is a WebmasterWorld Top Contributor of All Time 5+ Year Member



If you do not want to use the entities directly, you can use a textarea. Something like this should work:

<textarea>
<html><body></body></html>
</textarea>

Of course you can style the textarea however you like to display the code.

sanHTM

8:53 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



The display in the <textarea></textarea> is not similar to the one displayed directly from Browser (without a form).

Any more advice is very appreciated.

Cheers

encyclo

8:55 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld sanHTM.

You can try using

XMP
, but it's so old you may not get decent browser support:

[b]<xmp>[/b] ... your HTML here ... [b]</xmp>[/b]

I believe Firefox (Mozilla) still recognizes the

XMP
element, not sure for IE.
XMP
was included in HTML 2.0 but removed in subsequent versions.

W3C reference for

XMP
(HTML 2.0) [w3.org]

sanHTM

9:02 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Hi encyclo,

You answer my question. Great help. But I never hear of this tags:

<xmp></xmp>

where did you get it from?

Do you know any other similar HTML tags to the above which can display HTML tags in the browser?

appreciate your great help.

Cheers

encyclo

9:05 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Like I said,
XMP
is obscure. :) There are no other HTML elements which function in the same way, if
XMP
won't do it, then you have to use the entities or the
textarea
as mentioned above.

sanHTM

9:20 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



I think there must be a new HTML tag that replaces <xmp> for new versions of Browser?

Or can we use the server-scripting languages to do that without writing entity names?

Cheers

eelixduppy

9:21 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member eelixduppy is a WebmasterWorld Top Contributor of All Time 5+ Year Member




Or can we use the server-scripting languages to do that without writing entity names?

Server-side technologies are a possibility. For example, PHP has its htmlentities [us2.php.net] function.

encyclo

9:23 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



there must be a new HTML tag

There maybe should be one, but there isn't.

Of course if you have access to a server-side scripting language you can use it to escape the HTML and convert it to the entities, as mentioned above.

sanHTM

9:29 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Thank you again for your great help. I have been designing a web pages for a while, but never thought about it. Recently someone asked me if we can display HTML tags in browser, I said No as I was thinking of using server-script languages instead of using HTML tags directly. It was a stupid answer. Never mind, it has been done.

If you have any other options that could be easier than php scripting?

Cheers

sanHTM

8:35 am on Feb 2, 2007 (gmt 0)

5+ Year Member



Of course if you have access to a server-side scripting language you can use it to escape the HTML and convert it to the entities, as mentioned above.

If there any VB codes used inline
along HTML to display HTML tags in the browser?

Cheers

Trace

3:53 pm on Feb 2, 2007 (gmt 0)

10+ Year Member



You mean something like this?

<%
text2display = "<p><b><i>my text</i></b></p>"
text2display = replace(text2display,"<","&lt;")
text2display = replace(text2display,">","&gt;")

response.write( text2display )
%>

phranque

11:46 pm on Feb 2, 2007 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



don't forget to also replace '&' with '&amp;'.

then if you have named or numeric entities in your html you will see them as such rather than as rendered by the browser.
it will also prevent "accidental" entities, for example the following "pure text" string:
drums&sticks;guitar&amp;piano;...

(which the browser would render as: drums&sticks;guitar&piano;...)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month