Lessons: Intro (HTML Basics)

Intro: HTML Basics
Learn how to make a basic web page. | Lessons Home |

Here you will learn the very basics of HTML. Every HTML page requires a certain set information to tell the browser what it's looking at.

The very first step is to open up a very simple text editor like Notepad. To open Notepad, click Start > Programs > Accessories > Notepad. Right off the bat, I'd recommend saving your work -- or lack thereof. However, saving an HTML page is a little bit different from saving a normal document.

When the Save dialog box pops up, first change "Save as type:" to "All Files." Next, enter the file name for your page. Call this first page index.html. Why? Because that's pretty much always the home page for web sites. When (and if) you ever get around to putting your site on the internet, the browser will search for index.html first -- it knows that's the home page.

Remember where you save your web page. You will most likely want to create an entirely new folder on the computer for it. To view your progress on the page at any time, go to that folder and double-click index.html. That will open it in Internet Explorer, where you see it as others would online.

Now that you have successfully saved your page, we need to tell the browser what it's reading. This, like virtually everything else in HTML, is done using a "tag." A tag is something that doesn't show up on the actual page, but tells the browser how to make things appear. Tags look something like this: <tag>.

The most important tag of all is the HTML tag. It looks like this: <html>. The HTML tag comes at the very beginning of the page. At the very end of the page, you need a closing tag. Closing tags tell a browser when to stop doing what an opening tag told it to do. Closing tags are just like the corresponding opening tag, except with a forward slash added at the beginning: </tag>.

So, at the very end of the page, you need a closing tag for the opening HTML tag. It looks like this: </html>.

Now for the header tag. This contains information about the site. (I might focus more on that in a later lesson.)

The opening header tag looks like this: <head>. The closing one like this: </head>.

You may have noticed that most closing tags are exactly the same as that command's opening tag, except for the slash. This is often true, but not always. You'll run into some exceptions in the next couple of lessons.

In between the two header tags comes the title tag. The title tag tells the browser the title of your page. For example, the title of this page is "Lessons: Intro (HTML Basics)." You can see it at the top of the screen. The opening and closing title tags look like this: <title> and </title>. Put whatever you want in between them.

So far your page should look like this in Notepad:

<html>
<head>
<title>My Page</title>
</head>
</html>

Next comes the body. The body of a webpage is the part that appears on the screen; you are looking at the body of this page right now. The body tag can include instructions concerning how text should appear, what the background color should be, and so on. We'll go into more detail about that in Lesson 1: Formatting.

The body tags, unsurprisingly, look like this: <body> and </body>.

Inside the body tags is where the fun begins. After typing a simple paragraph tag ( -- this one doesn't need a closing tag), begin writing whatever you want to appear on your page! Let's start with something simple. After , type "Hello World."

Your page should now look like this in Notepad:

<html>
<head>
<title>My Page</title>
</head>
<body>
Hello World!
</body>
</html>

Since that's a bit boring, why not write a couple sentences about yourself? When you want a paragraph break, just skip a line and add another  tag just before the new paragraph.

You already know that using the tag starts an entirely new paragraph. But what if you don't want to skip a line? What if you want to go directly to the next line? In that case, use the   tag.

What if you want to make a numbered list? Start off with the <ol> tag. Precede each item in the list with an <li> tag. End the numbered list with the </ol> tag. The code for a numbered list might look something like this:

<ol>
<li>Item Number One
<li>Item Number Two
<li>Item Number Three
<li>And so on...
</ol>

On the actually page, that list would look like this:

Item Number One
Item Number Two
Item Number Three
And so on...

NOTE: To make a bulleted list instead of a numbered list, simply replace the "ol" in the starting and ending tags with "ul."

Your final code might look something like this:

<html>
<head>
<title>My Page</title>
</head>
<body>
Hello World! My name is Christopher Blair Tucker, or Toph. I am fourteen years old.
I like many things. Here is a numbered list of my favorite things:
<ol>
<li>Star Wars
<li>Computers
<li>Books
</ol>
</body>
</html>

To see exactly what that page would look like, click here. Not very exciting, is it? It will be soon I'm sure.

Congratulations! You've just completed the introduction to TophTucker.com Web Authoring 101. Now that you're done with this, go learn about formatting your page in Lesson 1: Formatting!