Popular Pages

Basic HTML Tutorial: How to Create your First Web Page

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.

slide 1 of 6

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.

slide 2 of 6

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>

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>

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

slide 3 of 6

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.

slide 4 of 6

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