intro | tags | path | tables | attributes

QUICK TUTORIAL - HTML INTRO

Podcast: HTML Basics
If you prefer listening and watching to reading, try the podcast. It will start playing when it is about 10% loaded. The whole thing takes about 30 minutes, but you can jump around a bit.

A web page, or the document which creates a web page, is a text document, really. Even if fancy proprietary software is used to create the page, once it is presented for a browser to interpret, everything in the code is simple text, or ASCII. It might look funny to you if you are not used to seeing html code, but there are letters and numbers in the code, not strange halloween-looking characters of the sort you see if you try to look at binary code in Notepad.

The acronym HTML stands for HyperText Markup Language. To understand what a markup language is, it might help to imagine how a typesetter might use one. Text gets "marked up" by a typesetter to tell the printing press what to do -- "make the text pink and bold starting here", "end the bolding here". Similarly, the HTML document behind a web page gets "marked up" to tell a browser how to display it. [switch to Notepad]

A web page has two main sections, a "head" section, where information about the page is stored, and a "body" section, where the page content is placed. Everything you see in your browser window is in the body section, though it may be highly influenced by what is placed in the head section.

The markup on a web page is placed in "tags". A tag opens with a "less-than" sign, and closes with a "greater-than" sign, like this: <>. Inside the tag are instructions to the computer to render the following content in a specified way. For example, <b> tells the computer to bold the text which follows. Tags almost always come in pairs, and a slash in the tag, </ ...> tells the computer that the specified tag is finished. For example, </b> tells the computer to stop bolding the content.

To make the simplest web page, all you need are four tag pairs, the <html>...</html> pair, the <head>...</head> pair, the <body>...</body> pair, and the <title>...</title> pair. These are all explained below.

Here's how:

  1. Open up Notepad (Start>Programs>Accessories>Notepad)
  2. Type in the tags and content as shown below.
  3. Save the file where you can find it again, giving it a name with a .htm extension, like this: myfile.htm.

To view your page,

  1. Open a browser: Internet Explorer or FireFox or Safari or Opera
  2. Go to File>Open>Browse and find your page (You did put it where you can find it, didn't you?).
  3. Double-click on it to open it.

Keep your browser open to your page so you can go back and forth from Notepad - save your changes in Notepad, then click the "Refresh" button or hit F5 to see your changes.

Play around with adding text content, either silly or serious, in between the opening and closing <body>...</body> tag pair, then move on to the next page to see how you could fix it up a bit.

Tag Pairs:

How They're Used:

<html>

</html>

Place <html> at the beginning of your html page to tell your browser that this page is a web page.

Put</html> at the very end of your html page to tell your browser that the web page is complete.

<body>

</body>

The <body> tag goes INSIDE the <html> tags, but AFTER the <head> tags, like this:

<html>
<head>
</head>

<body>

All of your content goes here, inside the body tags.

</body>
</html>

Type Hello World! in the body of your HTML document, save the file to your desktop as "MyName.htm" or "HelloWorld.htm" Hit OpenWindow-M to display your desktop, and double-click on the file to open it.

<head>

</head>

The first tags which go INSIDE the <html> tags are the <head> tags. Things in the <head> tag are not actually seen on the page, but will affect what is seen.

<html>
<head>
</head>

</html>

Eventually, you'll put lots of different kinds of things in the <head> tags, but for now, only the <title> tag will go inside.

<title>

</title>

Place the <title> tag INSIDE the <head> tags.

Now your page would look like this:

<html>
<head>
<title>Short Descriptive Title of This Web Page
</title>
</head>

<body>

All of your content goes here, inside the body tag.

</body>
</html>

The title of the page shows up in the top border of your browser, though not on the page itself.

Make your title as short as possible, but as descriptive as possible.
We can actually stop here, because you can now put content on the web. It may look funny, all kind of run-together and everything at the left edge, but it will be out there. Read on to learn about some basic tags which can make your pages look better.