How to Create a Simple Website with HTML

This is an article on how to create a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web and makes up the structure of web pages. After creating a web page, you can save it as HTML text and view it in a web browser. Creating HTML pages is done using a basic text editor on Windows and Mac computers.

Table of Contents

Add headings to HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4b/4082-1-2.jpg/v4-460px-4082-1-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/4/4b/4082-1-2.jpg/v4-728px-4082-1-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open a text editor. You can use Notepad or Notepad++ on Windows computers, TextEdit on macOS and Text on ChromeOS:

Windows – Open Start

{“smallUrl”:”https://www.wikihow.com/images_en/0/07/Windowsstart.png”,”bigUrl”:”https://www.wikihow.com/images/thumb/0/07/ Windowsstart.png/30px-Windowsstart.png”,”smallWidth”:460,”smallHeight”:460,”bigWidth”:30,”bigHeight”:30,”licensing”:”<div class=”mw-parser-output “></div>”}

, type notepad or notepad++ and click Notepad or “Notepad++ or Sublime” at the top of the window.
macOS – Click Spotlight

{“smallUrl”:”https://www.wikihow.com/images_en/e/ea/Macspotlight.png”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/ea/ Macspotlight.png/30px-Macspotlight.png”,”smallWidth”:460,”smallHeight”:460,”bigWidth”:30,”bigHeight”:30,”licensing”:”<div class=”mw-parser-output” “></div>”}

, type textedit , and double-click TextEdit at the top of the list of results.
ChromeOS – Open the launcher, then click Text (the icon with the word Code Pad).

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/54/4082-2-2.jpg/v4-460px-4082-2-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/5/54/4082-2-2.jpg/v4-728px-4082-2-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <!DOCTYPE html> and press ↵ Enter . This tells the web browser that this is HTML text. ^{[1] X Research Source}

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/35/4082-3-2.jpg/v4-460px-4082-3-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/35/4082-3-2.jpg/v4-728px-4082-3-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <html> and press ↵ Enter . This is the HTML code opening tag.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/db/4082-4-2.jpg/v4-460px-4082-4-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/db/4082-4-2.jpg/v4-728px-4082-4-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <head> and press ↵ Enter . This tag opens the HTML preamble – the HTML preamble that is not normally displayed on the web page. This information may include titles, metadata, CSS style pages, and other scripting languages. ^{[2] X Research Source}

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/62/4082-5-2.jpg/v4-460px-4082-5-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/62/4082-5-2.jpg/v4-728px-4082-5-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Enter <title> . This is the tag that adds the title to the page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/8a/4082-6-2.jpg/v4-460px-4082-6-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/8/8a/4082-6-2.jpg/v4-728px-4082-6-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Enter a title for the page. You can give your website any title.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/fe/4082-7-2.jpg/v4-460px-4082-7-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/f/fe/4082-7-2.jpg/v4-728px-4082-7-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </title> and press ↵ Enter . This is the title tag closing tag.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/28/4082-8-2.jpg/v4-460px-4082-8-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/2/28/4082-8-2.jpg/v4-728px-4082-8-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </head> and press ↵ Enter . This is the opening closing tag. Your HTML code should look like this:

 <!DOCTYPE html> < html > < head > < title > My Site </ title > </ head >

Add page body and content to HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a1/4082-9-2.jpg/v4-460px-4082-9-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/a/a1/4082-9-2.jpg/v4-728px-4082-9-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <body> below the closed “Head” tag. This is the tag that opens the body of the HTML text. Anything entered in the HTML body is visible on the web page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/84/4082-10-2.jpg/v4-460px-4082-10-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/8/84/4082-10-2.jpg/v4-728px-4082-10-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <h1> . This is the tag that adds headings to the HTML text. Headings are large bold text usually displayed at the beginning of HTML documents.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0e/4082-11-2.jpg/v4-460px-4082-11-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/0e/4082-11-2.jpg/v4-728px-4082-11-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Enter a title for the page. You can enter a page title or greeting.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3f/4082-12-2.jpg/v4-460px-4082-12-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/3f/4082-12-2.jpg/v4-728px-4082-12-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </h1> after the text of the heading and press ↵ Enter . This is the closing tag.

Add more topics. You can create 6 more headings using the tags from <h1></h1> to <h6></h6> . These tags create headings of different sizes. For example, to create 3 contiguous headings of different sizes, you would write the following command:
```
 < h1 > Welcome to my website! </ h1 > < h2 > I'm Male! </ h2 > < h3 > Hope you enjoy this site! </ h3 >
```
Headings express the priority or importance of the content. However, you don’t need to use a high heading if you just want to use a lower heading. You can immediately use the H3 heading, even if the text doesn’t have an H1 heading.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3d/4082-13-2.jpg/v4-460px-4082-13-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/3d/4082-13-2.jpg/v4-728px-4082-13-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <p> . This is the tag that opens the paragraph. The paragraph is used to display the content in lower case.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/49/4082-14-2.jpg/v4-460px-4082-14-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/4/49/4082-14-2.jpg/v4-728px-4082-14-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Import content. You can enter a website description or any other content that you want to share.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/92/4082-15-2.jpg/v4-460px-4082-15-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/9/92/4082-15-2.jpg/v4-728px-4082-15-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </p> after the text and press ↵ Enter . This is the tag that closes the paragraph. The following is an example of the text in HTML:

 <p> This is my piece of content. </ p >

You can add multiple lines of content consecutively to create multiple paragraphs under one heading.
Change the color of the content by placing it in <font cpor="cpor"> and </font> tags. Enter your favorite color in “cpor” (keep the quotes intact). You can change the color of any content (such as headings) using this group of tags. For example, to make a piece of text blue, you would code: <p><font cpor="blue">Whale is a big animal.</font></p>

You can add bold, italic, and other text formatting using HTML. Here’s an example of how you add text formatting with HTML tags: ^{[3] X Research Sources}

 < b > Bold </ b > < i > Italic </ i > < u > Underline </ u > < sub > Subscript </ sub > < sup > Superscript </ sup >

If you use bold and italic fonts for emphasis instead of just styling, use <strong> and <em> tags instead of <b> and <i> . This makes web pages easier to understand when you use technologies such as screen readers ^{[4] X Research Sources} or reading modes available in some browsers ^{[5] X Research Sources} .

Adding other elements to HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/77/4082-16-2.jpg/v4-460px-4082-16-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/77/4082-16-2.jpg/v4-728px-4082-16-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add images to the page. You can add images to HTML with the following steps:

Type <img src= to open the image tag.
Copy and paste the image path in quotes immediately after the “=”.
Type > after the image’s path to close the image tag. For example, if the image’s path was “http://www.mypicture.com/lake”, you would write the following code:
```
 < img src = "http://www.mypicture.com/lake.jpg" > 
```

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/74/4082-17-2.jpg/v4-460px-4082-17-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/74/4082-17-2.jpg/v4-728px-4082-17-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Link to another site. Here are the steps to add a link to HTML:

Type <a href= to open the path tag.
Copy and paste the URL in quotation marks right after the “=”.
Type > after the URL to close the HTML URL tag.
Enter a name for the path right after the closing bracket.
Type </a> after the path name to close the HTML path. ^{[6] X Research Source} The following is an example of a link to Facebook:
```
 <a href = "https://www.facebook.com" > Facebook < / a > . _ _
```

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d0/4082-18-2.jpg/v4-460px-4082-18-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/d0/4082-18-2.jpg/v4-728px-4082-18-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add horizontal lines to HTML. You can add horizontal lines by typing <br> in the HTML. This creates a horizontal line that is used to separate sections of the page.

Color customization

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b2/4082-19-3.jpg/v4-460px-4082-19-3.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/b2/4082-19-3.jpg/v4-728px-4082-19-3.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

See the official HTML list of names and color codes. The World Wide Web Consortium (W3C for short) manages the official color list, which you can view at https://www.w3.org/wiki/CSS/Properties/cpor/keywords. Each color has an official name with a 6-digit hexadecimal code, and a decimal value. You can use any value to add color to web page elements. For this example, we will use the official color name.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/60/4082-20-3.jpg/v4-460px-4082-20-3.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/60/4082-20-3.jpg/v4-728px-4082-20-3.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Set the background color in the <body> tag. You would do this by adding a style to the tag. Assuming you want the page to have a lavender background color, enter the following:

<body style="background-cpor:lavender;">

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b2/4082-21-3.jpg/v4-460px-4082-21-3.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/b2/4082-21-3.jpg/v4-728px-4082-21-3.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Set text color for every card. You can use style to specify the color you want to create for all text in a certain tag. For example, you want the text in the <p> tag to be midnightblue :

<p style="cpor:midnightblue;">
The color change only applies to text in the <p> tag. If you want to add a <p> tag underneath with midnightblue , you’ll need to add a style to that tag as well.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/35/4082-22-3.jpg/v4-460px-4082-22-3.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/3/35/4082-22-3.jpg/v4-728px-4082-22-3.jpg”,”smallWidth”:460,”smallHeight”:344 ,”bigWidth”:728,”bigHeight”:545,”licensing”:”<div class=”mw-parser-output”></div>”}

Set a background color for a heading or paragraph. You can create background colors for other tags in the same way you would background colors for tags in the body of the page. For example, if you want the <p> tag to be lightgrey , and make the H1 heading lightskyblue , enter the following code:

<p style="background-cpor:lightgrey;">
<h1 style="background-cpor:lightskyblue;">

Close HTML text

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/57/4082-19-2.jpg/v4-460px-4082-19-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/5/57/4082-19-2.jpg/v4-728px-4082-19-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </body> to close the body of the page. After you’re done adding content, images, and other elements to the body of your HTML text, add this tag at the end of the HTML text to close the body of the text.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/16/4082-20-2.jpg/v4-460px-4082-20-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/16/4082-20-2.jpg/v4-728px-4082-20-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type </html> to close the HTML text. This tag needs to be entered below the HTML body closing tag at the end of the text. This is how to tell the browser that there is no more HTML code after this tag. Your entire HTML text should look like this:

 <!DOCTYPE html> < html > < head > < title > wikiHow Fan Page </ title > </ head > < body > < h1 > Welcome to my page! </ h1 > < p > This is a wikiHow fan page. Feel free to explore! </ p > < h2 > Important Dates </ h2 > < p >< i > January 15, 2019 </ i > - wikiHow Birthdays </ p > < h2 > Links </ h2 > < p > Here is the link to the wikiHow: < a href = "http://www.wikihow.com" > wikiHow </ a ></ p > </ body > </ html >

Save and open web page

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b9/4082-21-2.jpg/v4-460px-4082-21-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/b9/4082-21-2.jpg/v4-728px-4082-21-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Convert text to plain text format (Mac users only). Click the Format menu at the top of the screen, and then click Make Plain Text in the menu that appears.

This step is unnecessary and cannot be performed on Windows.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/09/4082-22-2.jpg/v4-460px-4082-22-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/09/4082-22-2.jpg/v4-728px-4082-22-2.jpg”,”smallWidth”:460,”smallHeight”:341 ,”bigWidth”:728,”bigHeight”:539,”licensing”:”<div class=”mw-parser-output”></div>”}

Click File . This is the option in the menu bar at the top of the screen.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0c/4082-23-2.jpg/v4-460px-4082-23-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/0c/4082-23-2.jpg/v4-728px-4082-23-2.jpg”,”smallWidth”:460,”smallHeight”:341 ,”bigWidth”:728,”bigHeight”:539,”licensing”:”<div class=”mw-parser-output”></div>”}

Click Save as . This option is available in the currently displayed “File” menu.

Or, you can press Ctrl + S (on Windows) or ⌘ Command + S (on Mac).

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0c/4082-24-2.jpg/v4-460px-4082-24-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/0c/4082-24-2.jpg/v4-728px-4082-24-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Name the HTML text. Enter any name for the text in the “File name” field on Windows or “Name” on Mac.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/89/4082-25-2.jpg/v4-460px-4082-25-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/8/89/4082-25-2.jpg/v4-728px-4082-25-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Change the format of the file. You need to convert the text file into an HTML file. Here are the steps to change the file format:

Windows – Click the “Save as type” drop-down box, click All Files , and enter .html after the filename.
MacOS – Replace .txt after filename with .html .
ChromeOS – Click the “Save as” button. Enter .html after the filename. You can give the file any name.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/4082-26-2.jpg/v4-460px-4082-26-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/f/f3/4082-26-2.jpg/v4-728px-4082-26-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Click Save . This is the button at the bottom of the window. This will create an HTML file.

HTML files are usually opened with the default web browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d7/4082-27-2.jpg/v4-460px-4082-27-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/d/d7/4082-27-2.jpg/v4-728px-4082-27-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Close the text editor. It’s time to open the HTML file in your browser so you can view your web page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/14/4082-28-2.jpg/v4-460px-4082-28-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/14/4082-28-2.jpg/v4-728px-4082-28-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open HTML documents with a browser. In most cases, you can double-click the HTML text to do this. If double-clicking the text fails, do the following:

Windows – Right-click the text, select Open with , and click the browser you want to use.
Mac – Click the text once, click File , choose Open With , and click the browser you want to use.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b3/4082-29-2.jpg/v4-460px-4082-29-2.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/b3/4082-29-2.jpg/v4-728px-4082-29-2.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Edit the HTML text if necessary. You will probably notice errors on the HTML page. To fix the error, you need to edit the content of the HTML text:

On Windows, you can right-click the text and click Edit in the menu that appears (if you have Notepad++ installed, this option will be Edit with Notepad ++).
On a Mac, you would click to select the text, then click File , choose Open With , and click TextEdit . You can also drag text into TextEdit.
On your Chromebook, close the Text app, open Files, and find and click your file.

Advice

Tags should always be closed with the exact same content as the tag’s opening. For example, the <tag1><tag2> tag is closed by typing </tag2></tag1> .
You can add running text to your web page using the <marquee></marquee> tag, but some browsers may not recognize it.
Many people use Notepad++ to write and compile code.
If you want to put the image in the center of the page, you can enter <class="center"> after the name of the image in the img tag (e.g. <img src="URL" class="center"> ).

Warning

It’s best to save images on Imgur or a similar site if you want to add photos to your site. Posting someone else’s photo may be an act of copyright infringement.

Steps