How to show HTML code on a web page?

This is probably very simple, but I'd like to show some HTML code on a web page. Are there any tags that I can use that will prevent the code being executed and will just show the raw code on the page. I'm having real trouble finding out how to do this.

 

You need to encode HTML; that is, < will be converted to &lt; etc. There are special functions that do this encoding. For example, in ASP you would use Server.HTMLEncode. In PHP you could use htmlspecialchars or htmlentities.

J.D.

 

Use the following character conversions:
http://ascii.cl/htmlcodes.htm

A far better way would be to use your scripting language's equivalent of the VBScript Server.HTMLEncode().

Also, pasting HTML in to a WYSIWYG editor will typically sort all the conversions out for you.

- Jamie

 

Right, this is just getting scary...

 

I've tried that with DW but it seems to convert it

 

I gave up on Dreamweaver a while ago, but you should first ensure that you are in design view rather than code view.

There may be an option in the preferences somewhere to enable / disable code conversion - check for it.

Paste the code into notepad and recopy, just to ensure you don't have any weird OLE objects in your clipboard or something.

 

Enclose the html code between xmp tags, for example:

<xmp>insert code here</xmp>

 

In DW, you create a "form" element and then input a "text" area and the code will be put on the page as text without being rendered or executed.

Here's a working example:
http://www.freshdames.com/banners.html

<form name="form1" method="post" action="">
  <textarea name="textarea" cols="72" rows="10"><!--======================== BEGIN COPYING THE HTML HERE ==========================-->
<img name="celebrity_pics2" src="http://www.freshdames.com/babes/banners/celebrity_pics2.gif" width="640" height="90" border="0" usemap="#m_celebrity_pics2" alt=""><map name="m_celebrity_pics2">
<area shape="rect" coords="560,0,640,90" href="http://www.freshdames.com/swank/index.html" target="_blank" title="Hilary Swank pictures, films, biography and more Oscar winning Best Actress Hilary Swank!" alt="Hilary Swank pictures, films, biography and more Oscar winning Best Actress Hilary Swank!" >
<area shape="rect" coords="480,0,560,90" href="http://www.freshdames.com/trachtenberg/gallery1/index.htm" target="_blank" title="Michelle Trachtenberg pictures!" alt="Michelle Trachtenberg pictures!" >
<area shape="rect" coords="400,0,480,90" href="http://www.freshdames.com/kournikova/wallpapers/index.htm" target="_blank" title="Anna Kournikova pictures and wallpapers." alt="Anna Kournikova pictures and wallpapers." >
<area shape="rect" coords="320,0,400,90" href="http://www.freshdames.com/paris-hilton.html" target="_blank" title="Paris Hilton pictures" alt="Paris Hilton pictures" >
<area shape="rect" coords="160,0,240,90" href="http://www.freshdames.com/jessica_simpson.html" target="_blank" title="Jessica Simpson Pictures, Wallpapers and related information." alt="Jessica Simpson Pictures, Wallpapers and related information." >
<area shape="rect" coords="241,0,320,90" href="http://www.freshdames.com/mandy_moore/index.html" target="_blank" title="Mandy Moore pictures, news, and more Mandy Moore at FreshDames" alt="Mandy Moore pictures, news, and more Mandy Moore at FreshDames" >
<area shape="rect" coords="80,0,160,90" href="http://www.freshdames.com/HotKnowles.html" target="_blank" title="Beyonce Knowles hot pictures, wallpapers, biography, music and more Beyonce Knowles." alt="Beyonce Knowles hot pictures, wallpapers, biography, music and more Beyonce Knowles." >
<area shape="rect" coords="0,0,80,90" href="http://www.freshdames.com/EvaLongoria/index.html" target="_blank" title="Desperate House Wife Eva Longoria pictures, news, and links at Fresh Dames!" alt="Desperate House Wife Eva Longoria pictures, news, and links at Fresh Dames!" >
</map>
<!--========================= STOP COPYING THE HTML HERE =========================-->
  </textarea>
  <a href="http://www.freshdames.com/babes/banners/celebrity_pics2.html" title="Example" target="_blank">Fresh
  Dames Banner</a>
</form>

Code (markup):

 

Use Frontpage. You just treat it like normal text with it.

 

In Dreamweaver and Frontpage, you can just type in anything you want and the software will change it automatically. If you need to get input from a form using server side scripts like PHP, a function will convert all the input.

 

You have a few options:
- enclose the code in <pre> </pre>
- enclose the code in <xmp> </xmp> - I think this is the preferred method
- enclose the code in <textarea> </textarea> - just put it in a form textarea box

 

I just put the code in a textarea.

 

I've never actually tried to do this but this is from WebDesignGroup's help file:

 

Use a wysiwyg editor like the free/open-source Mozilla NVU. Copy and paste, it does it all for you.

Sorry about bumping an old thread, but I hate frontpage that much.

If you're into manually converting or a quick lookup, type firefox's "wp [character]" into the address bar, and search for html. It will show you the correct html entity.

like:

wp "

Code (markup):

 

was having trouble doing this and found this in the search

 

Never us xmp. Its not HTML, and I highly doubt it will work in anything other than IE or Fx. A very bad, and very stupid thing to do.

To do it follow these steps:

1. Replace < with &lt;

2. Replace > with &gt;

 

^ take that excellent advice, and then know that both <code> and <pre> will also get the job done (and because of some browser, hmmm, who could that be? can't handle them seperately, you should put <pre> and <code> together).

xmp never quite properly conformed to SGML apparently. Hell, I'd never heard of it before someone mentioned it on another thread on the forums, it's so outdated.

 

You can use the <pre> tag as Stomme poes said.

 

But, not by itself. Also, IE can consider everything inside pre to be a single, long line, so often you need to tell IE word-wrap: break-word to keep it in line.

<pre>
  <code> stuff stuff stuff stuff</code>
</pre>

Code (markup):

Then you would style pre in CSS and let code alone to do its thing. You still use &lt and &gt for brackets, but all indenting, whitespace and newlines are preserved.

 

If you aren't afraid or a little extra work and some JS you should check out syntaxhighlighter: http://code.google.com/p/syntaxhighlighter

There's an example of it on one of my old blog posts if you want to see it in action: http://www.iamjacksdesign.com/blog/a-programmers-alternative-to-bans/