typing html in html

Discussion in 'HTML & Website Design' started by sky2high, Nov 18, 2007.

  1. #1
    i've done it before, but i can't find anywhere how to type html in html documents. i want it so it shows up like "<html><body></body></html>" and it doesn't think of it as a part of the code. i've tried paragraph, quote, and some other css divs, please help this is annoying me.
     
    sky2high, Nov 18, 2007 IP
  2. jred2002

    jred2002 Well-Known Member

    Messages:
    160
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #2
    You have to change <> to &lt;&gt; and " to &quot; etc. If you have a lot of html to place in a page I would use find and replace in any text editor and you can use <pre></pre> to include all white space so you don't have to use line breaks.

    Good luck
     
    jred2002, Nov 18, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Or use <code> around it... i think that is actually a valid html tag.
     
    Stomme poes, Nov 18, 2007 IP
  4. joebert

    joebert Well-Known Member

    Messages:
    2,150
    Likes Received:
    88
    Best Answers:
    0
    Trophy Points:
    145
    #4
    <pre><code>&lt;?php
    
    	echo "$stuff";
    
    ?&gt;</code></pre>
    Code (markup):
    That will work perfectly fine in most situations, not just for browsers either.

    Replacing <> with their character entities &lt;&gt; will tell the browser or any modern lexical analyser, that they're character data & not tokens.
    For browsers this means they will get displayed as the characters their sequence equates to instead of being considered display elements.
    For modern search engines this means they do not denote elements which alter the context of any information on the page.

    The <code> elements are mainly for semantics.
    I also like to apply CSS for font-style, background, padding, etc to them myself.
    If you had a Javascript syntax highlighter, you could find all the elements which needed to be worked on with somthing like the following to get all the code on the page.
    var codes = document.getElementsByTagName('code');
    Code (markup):
    To preserve whitespace, AKA tabs & newlines the <pre> element is used.
    Note the ordering of <pre><code>, explaining why it's important is beyond the scope of this thread, but it boils down to the type of element <pre> is, not being a valid child element for <code>, yet the type of element <code> is, can be a child of a <pre> element.


    Now, I hope you weren't expecting to see a thread with this much information without seeing somthing about Internet Explorer not playing nice with everyone else, because IE not playing nice is exactly what's about to happen.

    See, IE6 has this little thing where it likes to screw with the whitespace inside the childnodes of a <pre> element. So in the case of <pre><code>, IE6 is going to throw away all of your tabs from the beginning of each line. It will even throw away newlines in some cases.

    The behavior goes away & IE6 renders as expected if you use the order of <code><pre> instead, but that order isn't valid. Not only is that order not valid, it will also cause Firefox to create a box with all the formatting for the <code> element like background-color & border, but FF will render the <pre> element with all the code it contains directly below that <code> box, completely ignoring your formatting.
    It's like FF knows the <pre> element isn't supposed to be inside the <code> element & tosses it out.

    Thankfully getting IE to play nice is simple in this case, it only requires a tiny bit of CSS to get IE to render the elements as expected when they're in the correct order without screwing with whitespace.
    pre code {
       white-space: pre;
    }
    Code (markup):
    That's it, supprisingly simple for once huh ?
     
    joebert, Nov 18, 2007 IP
  5. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #5
    Kerosene, Nov 18, 2007 IP
  6. pylon

    pylon Peon

    Messages:
    88
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    using <pre></pre> tags is probably the easiest. or make a script that replaces the symbols with the character entities.
     
    pylon, Nov 19, 2007 IP
  7. sky2high

    sky2high Guest

    Messages:
    72
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    wow thanks for all that. uhm i don't exactly understand the reasons but i'll try to apply what you told me so it works in all the browsers. thanks a lot. (how did my thread get 5 stars?)
     
    sky2high, Nov 20, 2007 IP
  8. blogosquare

    blogosquare Peon

    Messages:
    41
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0