Creating a Web Page with Basic HTML

Written by: pauldb28 • Edited by: Michele McDonough
Published Jan 26, 2009 • Related Guides: Microsoft Windows | HTML

Learn step by step how to create a basic HTML web page. This article will walk you through creating an HTML webpage and how to show and format text in a web page. It was created with the absolute beginner in mind.

Next up: HTML Rules ►

Creating a Basic HTML Web Page

Slide 1 of 3

What’s needed to create a web page with HTML? If you have never used HTML before the author suggests not purchasing or downloading any software at all. If you have Microsoft Windows, you already have everything you need. For those of you who do not have Microsoft Windows, most other operating systems have something similar.

Here’s what you must have (for basic HTML):

A text editor (use notepad if you have Windows)
A web browser (such as Microsoft Internet Explorer)

That’s it!

You use the text editor (notepad) to write the code and then save the code as an HTML file. To save the notepad file as an HTML file follow these steps:

Click “File”
Select “Save As” from the drop down menu
Click the drop down menu for “Save as Type:”
Select “All Files”
In the “File Name” text box type the name of your web page “your webpage” then type “.html”. (Example: yourwebpage.html) (Note: make sure it does not say .txt behind it.)
Click “Save”

And you’re done.

To view your web page:

Find your saved file
Right Click on the file
Select “Open with Internet Explorer”

After following all of these steps you will see a blank HTML Page. Let’s move on to making a simple HTML page.

HTML Rules

Slide 2 of 3

Creating a web page with basic HTML is easy. HTML stands for Hyper Text Markup Language and is used as the basis for almost all web pages you ever have encountered online.

It’s easiest to think of HTML as a set of formatting codes to get text to do stuff for you. There are a set of rules you must always follow when working with HTML.

You must ALWAYS save your documents as a web page, there are many different extensions you can use to save your document, for this article always save your files as .html files.
Tags ALWAYS have a Start Tag <> and an End Tag </>. End Tags always have a slash mark.
You must ALWAYS start your HTML document with the following tag <HTML>
You must ALWAYS end your HTML document with the following tag </HTML>
Capital or Lower Case text is okay for tags

(These rules will make more sense in a few seconds)

To start your first HTML web page:

Open up a new notepad document or use the one you just created. Type the start and end tags for HTML. All the other HTML code will be in between these two tags:

<HTML>

</HTML>

Make sure to save the document as a web page. After you have done this, you will have created a basic HTML web page that you can use over and over again as a template.

Now that you have the HTML Basics to building a web page we can move on to adding content to the page.

Hello World!

Slide 3 of 3

Let’s create a simple page that’s in the programming arena as “Hello World”. Generally as you learn new programming languages the first thing you learn how to do is get the language to say hi to everyone. Let’s start.

Here is the proper way to create a webpage that says “Hello World!”

Type the Start and End HTML tags into a new HTML document you created with notepad.

<HTML>

</HTML>

In between these two tags you will type all of the code related to this page. The proper way to write text in HTML is to use the tag, this stands for paragraph.

<HTML>

Hello World!

</HTML>

Click “Save” after typing this. Then go view it in Internet Explorer!

When you open this up in Internet Explorer, you should see at the top right corner Hello World! Congratulations! Lets move on now to formatting the text.

You have just learned how to create a webpage and add text. What if you wanted the text aligned left, center or right? Here’s how you would do it.

<HTML>

Hello World!

</HTML>

You can change the word "right" to left or center as well. Now you know how to write paragraphs and align text, let’s add some color to the text, bold the text and italicize it.

Adding some color. You must use a new tag called . The below example will show you Hello World! in red. Type any color you want, it knows most common colors. The more complicated colors can be used by adding the rgb number instead of stating the color name.

<HTML>

Hello World!

</HTML>

Bolding the text using the tag.

<HTML>

Hello World!

</HTML>

Italicizing the text using the tag.

<HTML>

Hello World!

</HTML>

Congratulations, you have just learned how to create you own web pages and how to add and format text.

◄ ●●● ►

Creating a Web Page with Basic HTML

Creating a Basic HTML Web Page

HTML Rules

Hello World!

Comment