How to show HTML code on a web page?

Discussion in 'HTML & Website Design' started by MattUK, Nov 1, 2005.

Thread Status:
Not open for further replies.
0
Page 2 of 2
  1. loveisdivine

    loveisdivine Peon

    Messages:
    193
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #21
    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.

    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.

    Code:

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

    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
     
    loveisdivine, May 6, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #22
    ^ if you need to quote someone, type [ quote="name of the person" ]the quoted stuff here [/ quote ] but without the spacing.
     
    Stomme poes, May 6, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #23
    I haven't found that to be the case, at least in IE≤7. (Not checked in IE5, and don't care ;))

    See http://gtwebdev.com/workshop/layout/inline-block-gallery.php for a test case.

    cheers,

    gary
     
    kk5st, May 6, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #24
    Hmmm, you're right, Gary. I went back to the page I did way back when, which had given me problems with pre and I had found on teh googles that my problem was IE stretching the pre box-- looking at it now, the problem was only IE6 stretching the container to fit the lines like it does with all containers, not IE making everything longer line, and word-wrap: break-word was the only solution I needed. I must have run across something else on teh googles while searching for help.

    I took out and put back in <code> here and it didn't seem to matter either way. The only difference I can find between pre and code is that while pre is listed as inline, it makes a new line before and after while code alone does not.
     
    Stomme poes, May 7, 2008 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #25
    Another imaginative 'article'. Two problems with the Haikus; there is no season, implied or explicit, and the verse is not laid out properly.

    Typographic convention calls for verse to be centered on the longest line.

    For example. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title>Healing Haikus</title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
  blockquote.verse {
    border: 1px solid black;
    }

  .verse pre {
    font-family: inherit;
    display: table;
    margin: 0 auto;
    }

  /*]]>*/
  </style><!--[if lte IE 7]>
<style type="text/css">
  .verse pre {
    text-align: center;
    }

  .verse pre span {
    text-align: left;
    display: inline-block;
    white-space: pre;
    }
</style>
<![endif]-->

</head>

<body>
  <blockquote class="verse">
    <pre>
<span>long thin latticed necks
    the hook can rip your throat out
effing dangerous
</span>
</pre>
  </blockquote>
</body>
</html>
    Code (markup):
    :)

    cheers,

    gary
     
    kk5st, May 7, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #26
    "Killing season" doesn't count as a season??

    Roses are red
    violets are blue
    badger badger badger
    badger badger mushroom.
     
    Stomme poes, May 7, 2008 IP
  7. Yankee85

    Yankee85 Peon

    Messages:
    1,067
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #27
    lol?! :) .
     
    Yankee85, May 7, 2008 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #28
    But villainy knows no season.

    Why do I feel like a man who took his knife to a gunfight?

    cheers,

    gary
     
    kk5st, May 7, 2008 IP
  9. blackrosezy

    blackrosezy Banned

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #29
    Put your code between <pre> and </pre> should do the trick :)
     
    blackrosezy, Jan 19, 2009 IP
Page 2 of 2
Thread Status:
Not open for further replies.