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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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

Close HTML text

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/57/4082-19-2.jpg/v4-728px-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-728px-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-728px-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-728px-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-728px-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-728px-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.

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