Basic HTML Tutorial: How to Create your First Web Page

Written by: Nicholas • Edited by: Simon Hill
Published Feb 18, 2010 • Related Guides: Html Tags | Web Browser | HTML

Just getting started with creating web pages? It's not at all as difficult as it may seem. If you have a good general knowledge of HTML, you are ready to get started. For the most part, creating basic web pages with HTML is all about structure.

Learning Basic HTML

Before you learn how to create a simple web page with HTML basics, it's crucial that you learn some things about HTML in general. In doing so, not only will you be able to create the web page faster, but you will actually understand what you are doing throughout the entire process. You will also be able to easily create other web pages in the future, if you so choose. Head on over to this page and see if you understand the basic concepts. It's also a good idea to learn some CSS. HTML will lay the foundation for your web page, but CSS is really what makes it look like a web page. To get an overview of how CSS works, check out The Basics of CSS. After you have the basics down, you're ready to get started.

click to enlarge

Learning Structure - Start a HTML Document

One thing that you need before you can learn how to create a simple web page with HTML basics is an HTML editor. You can use Windows Notepad or Mac Text Editor to do the editing for now; but in the future, you may want to consider using an actual HTML editor.

Now that you have a good understanding for HTML and some basic CSS, it's time to learn web page structure. All a web page is, is groups of HTML and CSS grouped within tags, placed in sections. All of these sections eventually come together to make a web page.

Every HTML web page starts with an HTML tag, very easy to remember. An HTML tag looks like this:

<html>

So, the first thing that will go in note pad is: <html>

click to enlarge

You must also close the page with an HTML tag. The closing tag looks like this:

</html>

Skip several lines and type in the close HTML tag: </html>

click to enlarge

Everything else, throughout the rest of this tutorial, will go in between these two HTML tags.

Learning Structure - Insert Head Section

The HTML in the above step lets web browsers, servers, and the Internet know that the code is an HTML document (a web page). Now, it's time to start putting some information within that web page. The first section that you should add, is a head section. Head tags are also very easy to remember. Here is an example:

<head> <------ this opens the head section

</head> <------ this closes the head section

Insert both of the above head tags in between the HTML tags, within your document. It should look something like this:

<html>

<head>

</head>

</html>

You're not quite done with the head section yet. Now you need to add some information into it. One thing to note about the head section - you will not see this on your web page. The head section contains meta info and other details about your web page that browsers and search engines will use. Anything contained within the head tags will not display on your web page itself. There is normally a lot of information that people add to the head section. But for this tutorial, we will just add a simple title:

<html>

<head>

<title>This is the How to Create a Simple Web Page with HTML Basics Bright Hub Tutorial</title>

</head>

</html>

Note the way everything is structured and note the use of the Title tags.

Learning Structure - Insert Body Section

Unlike the head section, the body section is the actual info contained on the web page itself. The body section should go below the head section, within the HTML tags. Here is what the structure should look like:

<html> <--- Starts a HTML Page (web page)

<head> <--- Starts the head section

<title>This is the How to Create a Simple Web Page with HTML Basics Bright Hub Tutorial</title> <--- The title for the web page

</head> <--- Closes the head section

<body> <--- Starts the body

</body> <--- Closes the body

</html> <--- Closes the HTML (web page)

Insert some information into the body section.

<body>

<h1> Bright Hub FTW </h1>

<p>this is just a simple web page html tutorial... </p>

</body>

The above code will give you a h1 title of Bright Hub and a paragraph.

Final Result

Here is the final result of our tutorial:

<html>

<head>

<title>This is the How to Create a Simple Web Page with HTML Basics Bright Hub Tutorial</title>

</head>

<body>

<h1> Bright Hub FTW </h1>

<p>this is just a simple web page html tutorial... </p>

</body>

</html>

If you are using Windows Notepad, click File > Save As. Under save as type: make sure that you select All files. Type in a filename for your web page, and make sure to end it with .html.

click to enlarge

Open up your favorite web browser. Navigate the path File > Open. Find your HTML document and open it. Here is what you should get:

click to enlarge

Learn more HTML

Want to learn more about HTML and CSS? Be sure to check out these other beginner tutorials:

How to Open HTML Files

Seven HTML Editors for Macs

CSS Underline TIps and Basics