How to Create a Simple Web Page with HTML


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.

Part 1
Adding a Head to Your HTML

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

1
On a computer running the Windows operating system, you'll usually use Notepad, or Notepad++ whereas macOS users will use TextEdit: Windows - Open Start , type in notepad, or notepad++and click Notepad or "Notepad++ or sublime" at the top of the window. macOS - Click Spotlight , type in textedit, and double-click TextEdit at the top of the results.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

2
DOCTYPE html> and press ↵ Enter. This tells the web browser that this is an HTML document.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

3
This opening tag for your HTML code.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

4
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. [1]

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

5
This is the tag to add a title to your page.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

6
This can be any title you want to name your web page.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

7
This is the tag to close your title tag.

Adding a Head to Your HTML on How to Create a Simple Web Page with HTML

8
This is the tag to close your head. Your HTML code should look something like this. <!DOCTYPE html> <html> <head> <title>My Web Page</title> </head>

Part 2
Adding a Body and Text to Your HTML

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

1
This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page.

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

2
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.

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

3
This can be the title of your page or a greeting.

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

4
This tag closes your heading. Add additional headings as you go. There are six different headings that you can create by using the <h1></h1> through <h6></h6> 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>

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

5
This is the tag to open a paragraph. Paragraph text is used to display normal sized text.

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

6
This can be a description for your web page or any other information you wish to share.

Adding a Body and Text to Your HTML on How to Create a Simple Web Page with HTML

7
This the tag to close your paragraph text. The following is an example of paragraph text in HTML: <p>This is my paragraph.</p> 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 <font color="color"> and </font> 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: <p><font color="blue">Whales are majestic creatures.</font></p> You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags:[2] <b>Bold text</b> <i>Italic text</i> <u>Underlined text</u> <sub>Subscript text</sub> <sup>Superscript text</sup>

Part 3
Adding Additional Elements to Your HTML

Adding Additional Elements to Your HTML on How to Create a Simple Web Page with HTML

1
You can add an image to your HTML using the following steps: Type <img src= to open your image tag. Copy and paste the image URL after the "=" sign in quotation marks. Type > after the image url to close your image tag. For example, if the image's URL is "http://www.mypicture.com/lake", you would write the following: <img src="http://www.mypicture.com/lake.jpg">

Adding Additional Elements to Your HTML on How to Create a Simple Web Page with HTML

2
You can add a link to your HTML using the following steps: Type <a href= to open your link tag. Copy and paste URL after the "=" sign in quotation marks. Type > after the URL to close the link portion of the HTML. Type a name for the link after the closing bracket. Type </a> after the link name.to close the HTML link.[3] The following is an example of a link to Facebook. <a href="https://www.facebook.com">Facebook</a>.

Adding Additional Elements to Your HTML on How to Create a Simple Web Page with HTML

3
You can add a line break by typing <br> to your HTML. This creates a horizontal line that can be used to divide different sections of your page.

Part 4
Closing Your HTML Document

Closing Your HTML Document on How to Create a Simple Web Page with HTML

1
After you have finished adding all your text, images and other elements to the body of your HTML document, add this tag at the bottom of your HTML document to close the body of your HTML document.

Closing Your HTML Document on How to Create a Simple Web Page with HTML

2
This tag goes below the tag to close your HTML body at the end of your HTML document. This tells the web browser there is no more HTML code after this tag. Your entire HTML document should look something like this: <!DOCTYPE html> <html> <head> <title>wikiHow Fan Page</title> </head> <body> <h1>Welcome to My Page!</h1> <p>This is a fan page for wikiHow. Make yourself at home!</p> <h2>Important Dates</h2> <p><i>January 15, 2019</i> - wikiHow's Birthday</p> <h2>Links</h2> <p>Here is a link to wikiHow: <a href="http://www.wikihow.com">wikiHow</a></p> </body> </html>

Part 5
Saving and Opening Your Web Page

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

1
Click the Format menu item at the top of the screen, then click Make Plain Text in the resulting drop-down menu. This step is neither necessarynor possible on Windows.This step is neither necessary norpossible on Windows.This step is neither necessary nor possibleon Windows.This step is neither necessary nor possible on Windows.This step is neither necessary nor possible on Windows.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

2
It's in the menu bar at the top of the screen.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

3
It's in the drop-down menu below "File". Alternatively, you can press Ctrl+S (Windows) or ⌘ Command+S (Mac) to do so.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

4
Type whatever you want to name your document into the "File name" (Windows) or "Name" (Mac) text box.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

5
You'll need to change the document from a text file to an HTML file. Use the following steps to change the file type: Windows - Click the "Save as type" drop-down box, click All Files, and then type .html at the end of the file's name. Mac - Replace the .txt at the end of the file's name with .html instead.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

6
It's at the bottom of the window. Doing so will create an HTML file. HTML files typically open with your default web browser.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

7
At this point, you're ready to open your HTML file in your browser so that you can view your web page.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

8
In most cases, you'll be able to double-click the HTML document to do this. If double-clicking the document results in an error, do the following: Windows - Right-click the document, select Open with, and click your preferred browser. Mac - Click the document once, click File, select Open With, and click your preferred browser.

Saving and Opening Your Web Page on How to Create a Simple Web Page with HTML

9
You may notice an error in your HTML page. To change it, you can edit the HTML document's text: On Windows, you can right-click the document and click Edit in the resulting drop-down menu (if you have Notepad++ installed, this will say Edit with Notepad++ instead). On Mac, you'll want to click the document to select it, click File, select Open With, and click TextEdit. You can also drag the document into TextEdit.