I wants to show my html code in my web page as normal text. how to do it?

HTML & CSS
5

phani,

As @SamA74 and @dresden_phoenix have shown, it takes a little work to display HTML on a web page.

You can convert the “less-than” and “greater-than” symbols to HTML character entities with a common text editor or with the tool that dresden_phoenix linked to.

If you use the freebits tool, then delete the unnecessary break tags at the end of each line. Your text editor can do this in one swoop. Then surround the converted code with <pre> and </pre> tags. You can style the <pre> tags if you wish.

The HTML code used in the “working page” example.:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test page</title>
</head>
<body>
<div class="outer">
    <p>Lorem Ipsum lives here.</p>
</div>
</body>
</html>

Copy the following “working page” to a file and open it in your browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/i-wants-to-show-my-html-code-in-my-web-page-as-normal-text-how-to-do-it/223244
phani
May 6,2016 8:13 AM
-->
    <style type="text/css">
pre {
    font-weight:bold;
    font-size:1.0625em;
    line-height:1.25;
    font-family:monospace;  /* the default */
}
    </style>
</head>
<body>

<p>Freebit's coversion</p>

&lt;!doctype html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
    &lt;meta charset="utf-8"&gt;<br />
    &lt;title&gt;test page&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div class="outer"&gt;<br />
    &lt;p&gt;Lorem Ipsum lives here.&lt;/p&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

<p>Delete &lt;br /&gt; tags from above conversion (see HTML source) and add  &lt;pre&gt; tags.</p>

<pre>
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;test page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="outer"&gt;
    &lt;p&gt;Lorem Ipsum lives here.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

</body>
</html>

Hope this helps.

1 Like