Update:- New tutorial added in HTML section. How to Create Responsive Login Page in HTML without Bootstrap?

How to show HTML code on a web page?

In this tutorial you will learn how we can show our HTML, C#, Java, C language etc. code on webpage.

I tried to find the solution of this problem, but I didn’t found any helpful solution on the internet. Here you will get your problem solution in easy way.

If you found any difficulty and mistakes in this tutorial please let me know by posting comment in comment box or send me message in contact us form.

Types of tag to display code on webpage.

The tag that is use to show the coding of html, java c etc on page are given below.

Introduction of <pre> .. </pre> tag

The <pre> .. </pre> tag is use to display or show the all language coding as same on HTML webpage. We will use HTML <pre> .. </pre> tag to display or show the coding on our HTML webpage. With the help of <pre> .. </pre> tag we can do it.

In HTML <pre> .. </pre> tag we write or paste our HTML, C#, Java, C etc. code. It will show or display same code as you written or pasted in <pre> .. </pre> tag.

You can see the output below.


	<html>
		<head>
		<title>Exaple of pre tag.</title>
		</head>
		<body>
		<h1>Campuslife</h1>
		</body>
	</html>

Step 1.

Open your Notepad or Adobe Dreamweaver or any other HTML editor. I am using Adobe Dreamweaver. I am suggesting to you use Notepad for better practice.

To open the Notepad press window + r and type notepad, then press enter. Or you can find in start menu.

Start Menu → All programs → Accessories → Notepad.

Step 2.

Let’s start working with <pre> .. </pre> tag.

In <pre> .. </pre> tag we show the HTML angle brackets (< >) tags with help of &lt; (< less then angle bracket) and &gt; (> greater then angle bracket).

Let suppose you want to display a <html> tag in <pre> .. </pre> tag then we will use above angle brackets.

Example of <pre> .. </pre> tag:


	<pre>
		&lt;html&gt;
	</pre>

Output:


	<html>

I hope now you have understood the concept of <pre> .. </pre> tag. Now our beginning level has been finished.

Now we will work on our different language coding like html, c#, java, etc. which we want to show on webpage.

Step 3.

First create <pre> .. </pre> tag and copy the below html code and paste it in between <pre> .. </pre> tag.

You will see the HTML angle brackets I replaced with &lt; and &gt; angle brackets because we want to display or show it on webpage.

Example:


	&lt;html&gt;
		&lt;head&gt;
		&lt;title&gt;Welcome to campuslife.&lt;/title&gt;
		&lt;/head&gt;
		&lt;body&gt;
		&lt;h1&gt;Campuslife Wesbite&lt;/h1&gt;
		&lt;h2&gt;My first page.&lt;/h2&gt;
		&lt;p&gt;
		  Campuslife is a free learning source website for users.
		&lt;p&gt;  
		&lt;/body&gt;
	&lt;/html&gt;

Step 4.

Now we will apply the css to above HTML code. First create the class of your <pre> .. </pre> tag like below. 

	
	<pre class="mycode"> ..  </pre>

I have created mycode class for my <pre> .. </pre> tag.

Now apply the CSS to your <pre> .. </pre> tag for better presentation. First create CSS <style> .. </style> tag in between <head> .. </head> tag like below. 


    <head>
    <style type="text/css">
    
    all css code come here....
    
    </style>
    </head>

Now copy the below CSS code and paste it in between <style> .. </style> tag. 


 .mycode{
	display: block; 
	padding: 3px 3px 2px; 
	font-size: 14px; 
	line-height: 20px;
	width: 100%;
	background-color: #333;
	font-family: arial;
	color: #f7f7f7;
	font-weight: bold;
}

Step 5. Final Step

Now save your file with any name with .html extension. Like mypage.html. After saving the file open the file by double click on it. It will be open in browser. Now you will see your coding on webpage same as in editor it is.

Output:


	<html>
		<head>
		<title>Welcome to campuslife.</title>
		</head>
		<body>
		<h1>Campuslife Wesbite</h1>
		<h2>My first page.</h2>
		<p>
		  Campuslife is a free learning source website for users.
		<p>  
		</body>
	</html>
PREVIOUS

Watch Tutorial Video on YouTube

Watch and Subscribe Now

Post Your Comment

↑