HTML Tutorial Lesson 1

Author: Ian McAllister

Make your creation profitable with html tutorials that show you how to design visitor-friendly pages.

Use a free HTML editor

Use any text editor to write your HTML code, or you can download the free HTML editor that I always use. It just saves me some typing - well, actually, a lot of typing. Click here to get your free HTML editor.

Study head section later

Your pages will start with the head section which is described here but you will not understand it yet, so just come back to it later when you are ready for it.

HTML nesting tags

An HTML tag starts with "<" and closes with ">" with an instruction in between the two angled brackets. See simple template below.

The overall structure of HTML web design is like a picnic-box, in which you have several lunch boxes, and six glasses nested inside each other. You might also have partitions inside the picnic-box.

You can't nest a glass with the the bottom going through the side of another glass. You will get a lot of broken glass if you try. Partitions of course have only one wall, so you don't have to worry about nesting rules...at least you didn't until the html academics got picky!

For example, b stands for bold and i stands for italic. The first version is wrong, and the second is right.

bold italic text
bold italic text

You have to close the last tag you opened before you close the next to last.

Get the start and end tags right

This is vitally important. HTML tags must have the starting and closing tags completely inside any tags in which they are nested. Netscape will not work if you forget to put a closing tag, or if you put the start and closing tags on either side of a closing tag. Explorer will still work sometimes, but you will lose many potential customers who use other browsers.

"Partition" tags

You will learn some tags that are not paired. The most blatantly obvious is the paragraph mark .

The original language just assumed that one paragraph continued until it reached another paragraph mark.

Later versions of html insist on using an end tag for each paragraph and a start tag for the next paragraph, but I don't know if they will ever insist on browsers sticking to the rules. It is a good idea to get into the habit of using
 between paragraphs.

There is an easy way to do this if you are preparing your pages in Word. However you should disable the special characters in Word, or they could ruin your page. For instance Word uses smart quotes and changes three dots...into a special character. You may not want to do this if you want to use Word for something else. Here is how to disable it. Go to Tools - autocorrect - autoformat as you type, and untick all the boxes for replace as you type. Now do the same for AutoFormat.

I no longer use Word for my html pages. I've bought a program that is so much more convenient that there is no comparison. I use it to create my articles for web pages, then use Arachnophilia to change blank lines into html paragraphs by hunting
nn and replacing with nn using the All tab to replace every occurrence in that page (see video).

If I wanted to do 50 articles at once, I would open them all at once then click the global tab instead, and the replacement would be carried out in all the open files.

Hit the return key twice at the end of each paragraph as you write your page.

When you have finished, use the replace all button as above, to replace blank lines with code.

Have you worked it out for yourself yet? The forward slash means end of tag, so what we are adding means "end one paragraph and start another".

The paragraph tag is and the horizontal rule tag is <hr> because the program knows not to keep on ruling past the edge of the page. Some purists now insist on having a closing tag even for a rule!

Since I wrote that, things have only got worse. The latest version of html says that all tags must be closed. But there is a shortened version for tags that have nothing between the start and finish. So instead of writing you write and instead of <hr> you write <hr />

You will learn about lists later, and html now requires you to close a list line. The latest version of html insists that all variable names must be in lower case, so you can't write "COLOR="

How HTML treats capitals and white space

HTML doesn't care whether you use upper or lower case letters (but see last paragraph) so HTML is the same as hTmL. But UNIX does care, and URLs are in UNIX so html1.hTmL is not the same as HTML1.html. Artistic types put all tags in capitals and all values in lower case letters.

HTML ignores white space, so 100 spaces will be shown as one space. That means that the indentation of each line in the HTML code below is only to make it easier for me to read, not the computer.

How to make sure that you pair the tags correctly

A simple way to make sure that you always get correctly paired start and closing tags is to write them first, then insert whatever you need in between them. Doing this, you will start each page like this:

Simplest Web Design Template

Use this only for learning HTML. There are three better example templates in lesson 6 (they're still too simple), and a link where you can get a free template of more modern design, like this page.

For your web page to work with Netscape and Firefox, it must be set out like this. You can't decide that it would be more artistic to put the BODY tags before the HEAD tags.

Better templates are just added in to this basic template, without changing anything important. Modern templates should state the version of HTML before the html tag, as you can see in the video about html editors.

You will notice matching tags are indented to the same amount, except for the title tags. You are meant to insert the title (not the same as a headline) between the title tags. The title is what appears at the top of your browser screen. This is to look more pretty. HTML doesn't care if you write the whole page in one line, and some people do this to prevent you studying their code.

HTML doesn't care if you put a carriage return between the title tags or not - it ignores white space. Here is the simplest template.

<html>

<head>

</head>

<body>

</body>

</html>

How I made the tags nest correctly

I inserted both HTML tags first to tell the computer that this is an HTML program...Even that has got more complicated now - it expects you to state what kind of html. Next I entered both head tags, then both title tags between them. Next I entered both body tags after the closing head tag. At no time was there any chance of me forgetting to use a closing tag because I inserted start and closing tags at the same time.

How to use the different sections

The "HTML" tags simply tell the browser that everything between the start and end tags is HTML code. Some browsers will work if you don't tell them that it is HTML code. Don't lose visitors whose browsers need to be told that it is HTML code.

To see the html statement that I have used, click View in your browser, then choose to view the source code (the exact wording depends on your browser). Look at the first line. When you've seen it you can close the viewer, and you'll return to this page.

The head tags can sometimes contain a lot of material such as meta names, and scripts, and css (cascading style sheets) but they always contain both title tags. At the top of your browser page you will see displayed the title that was entered between the title tags.

The title also appears in search engines so make sure that it will be attractive to visitors. Bookmarks (favorites) in browsers also show the title, so you should make it one that will be meaningful when your visitor looks at it later on.

As you might guess, the body tags start and end the main body of your page - the only part that is seen (apart from the title). So if you type the words "Hello world" (without the quotes)between the body tags, and save and browse your page, you will see a page that just shows the words "Hello world".

Quotes have a special meaning in html, so must be replaced with a special code, which you will learn in lesson 3. Again, the easiest way is to finish your page in Word or Arachnophilia, then search for all the quotes, and replace with the proper code - before you start coding the article.

Try a simple example

The best way to learn is by trying it.

Make a directory (folder) called HTML (somewhere convenient on your computer) where you will put all your HTML learning pages. Later on have one directory for each website with sub-directories for sub-directories on the website.

Copy the above template (from the start HTML tag to the end HTML tag) and paste it into your text editor or HTML editor.

Save the file as try-it.html into your HTML directory.

Copy several pages of any text file (you could even copy this page) and paste it into the space between the body tags in try-it.html.

Save the file.

Use your browser to view try-it.html.

It doesn't look very pleasant, does it? It would be very boring to read that mass of black text. That is the worst that can happen if you make mistakes in your html coding. Not very frightening - is it?!

Next lesson will show you how to make it look better.