Welcome to WebmasterWorld Guest from 54.198.221.13

Forum Moderators: incrediBILL

Message Too Old, No Replies

Special tags to display html code on the page

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

New User

10+ Year Member

joined:Feb 1, 2007
posts:12
votes: 0


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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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]

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

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 989
votes: 31


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
8:34 pm on Feb 1, 2007 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:5007
votes: 21


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]

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

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

Senior Member

joined:Nov 12, 2005
posts:5967
votes: 0


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.

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

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

Senior Member from CA 

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

joined:Aug 31, 2003
posts:9074
votes: 6


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]
9:02 pm on Feb 1, 2007 (gmt 0)

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

Senior Member from CA 

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

joined:Aug 31, 2003
posts:9074
votes: 6


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.
9:20 pm on Feb 1, 2007 (gmt 0)

New User

10+ Year Member

joined:Feb 1, 2007
posts:12
votes: 0


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

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

Senior Member

joined:Nov 12, 2005
posts:5967
votes: 0



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.

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

Senior Member from CA 

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

joined:Aug 31, 2003
posts:9074
votes: 6


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.

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

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

New User

10+ Year Member

joined:Feb 1, 2007
posts: 12
votes: 0


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

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

Preferred Member

10+ Year Member

joined:July 5, 2005
posts:352
votes: 0


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 )
%>

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

Administrator

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

joined:Aug 10, 2004
posts:11086
votes: 107


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;...)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members