Patterns of Chaos
» HTML Tutorial » A Simple Page
Logo

A Simple Page

From this point forward, you should have a decent text editor so you can work with the code and samples as you go. Personally, I prefer Crimson Editor, even though it isn't being updated anymore. Other free options include Notepad ++ or TextPad, or check out this List of Windows Text Editors. If you're not using Windows, try this list.

Here is the code for a simple HTML page:

<html>
  <h1>Simple HTML Page</h1>
  <p>This is a simple HTML page</p>
</html>

Copy this code into your text editor, and save it as "1.html". Then open it with your browser. It should look something like this:


 

Let's look at what all this means:

<html>

This is the opening HTML tag. This tells the browser that it should be displaying HTML. (There are other tags, for other types of pages, that browsers understand, but they aren't relevant to this tutorial). The opening HTML tag signals the browser that the HTML for this page is starting.

Let's skip ahead for a moment, and look at the last line:

</html>

This is the closing HTML tag. This indicates that the HTML for this page has ended. Everything on your HTML page should be between these two tags.

Moving on:

<h1>Simple HTML Page</h1>

This is a header tag. It is used to define titles or headers for your page, or for sections of the page. There are a few different sizes of headers you can use - we will get into that a bit later.

Notice that there is both an opening and a closing tag for the header. The look, or styling, of the header is applied to everything between the opening and closing tags. So the text between <h1> and </h1> would be considered the header.

Now consider the next section:

<p>This is a simple HTML page</p>

In this case, the <p> defines a paragraph. Just as with the header tags, there is an opening and closing paragraph tag. The text between them constitutes the paragraph.

Contact