- How to show HTML code on a web page?
- Types of tag to display code on webpage.
- Introduction of .. tag
- You can see the output below.
- Campuslife
- Step 1.
- Step 2.
- Output:
- Step 3.
- Example:
- Step 4.
- Step 5. Final Step
- Output:
- Campuslife Wesbite
- My first page.
- How to Create a Simple Web Page with HTML
- Adding a Head to Your HTML
- Adding a Body and Text to Your HTML
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 ..
tag
The
..
tag is use to display or show the all language coding as same on HTML webpage. We will use HTML
..
tag to display or show the coding on our HTML webpage. With the help of
..
tag we can do it.
In HTML
..
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
..
tag.
You can see the output below.
Campuslife
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
..
tag.
In
..
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 tag in
..
tag then we will use above angle brackets.
Output:
I hope now you have understood the concept of
..
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
..
tag and copy the below html code and paste it in between
..
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:
<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>
Step 4.
Now we will apply the css to above HTML code. First create the class of your
..
tag like below.
I have created mycode class for my
..
tag.
Now apply the CSS to your
..
tag for better presentation. First create CSS
tag in between .. tag like below.
Now copy the below CSS code and paste it in between
tag.
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:
Campuslife Wesbite
My first page.
Campuslife is a free learning source website for users.
How to Create a Simple Web Page with HTML
This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 4,543,787 times.
This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you’ve created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.
Adding a Head to Your HTML
Type in and press ↵ Enter . This tells the web browser that this is an HTML document. [1] X Research source
Type in and press ↵ Enter . This is the tag that opens your HTML head. The HTML head information that is not usually displayed on your web page. This information can include, the title, meta data, CSS style sheets, and other scripting languages. [2] X Research source
Type and press ↵ Enter . This is the tag to close your head. Your HTML code should look something like this.
html> head> title>My Web Pagetitle> head> Adding a Body and Text to Your HTML
Type in below the closed «Head» tag. This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page.
Type in . This is the tag to add a heading to your HTML document. A Heading is large bold text that typically goes at the top of your HTML document.
- Add additional headings as you go. There are six different headings that you can create by using the through tags. These create headings of different sizes. For example, to create three different-sized headings in succession, you might write the following:
h1>Welcome to My Page!h1> h2>My name is Bob.h2> h3>I hope you like it here.h3> 
Type
. This is the tag to open a paragraph. Paragraph text is used to display normal sized text.
Type some text. This can be a description for your web page or any other information you wish to share.
Type
after your text and press ↵ Enter . This the tag to close your paragraph text. The following is an example of paragraph text in HTML:
- You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
- You can change the color of any text by framing the text with the and tags. Make sure to type your preferred color into the «color» section (you’ll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags. For example, to turn a paragraph’s text blue, you would write the following code:
Whales are majestic creatures.
- You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [3] X Research source
b>Bold textb> i>Italic texti> u>Underlined textu> sub>Subscript textsub> sup>Superscript textsup>