HTML for the complete beginner

The Basics

To start making a web page we need a text-based editor like Notepad or WordPad (not Microsoft Word). These can be found by clicking Start/Programs/Accessories/... You may copy and paste if you wish but typing it out will benefit you more, as you'll find it second nature later on. The more you type it, the easier you'll remember it, the easier it will be.

Before we start it's best to create a new folder for your work. To create a new folder we can A) Right click in an existing folder like "My Documents" and choose "New/Folder" or B) Within an open folder (like My Documents), click on "File/New/Folder" from the toolbar (top left). You can call this folder anything you like, but naming it something like "My web page" or "Web page" will make it easier later on to find it.

The first thing we learn is that HTML is made up of tags, these tell the browser what we want to do. All (99%) HTML tags start with an opening tag < > and end with closing a tag </ >, (the / indicates the end).

An HTML document is made up of two parts, the <head> </head> and <body> </body>.
The <head> </head> is for the browser and all that is placed in the head is unseen (except the title) and the <body> </body> is for all your pages content, so lets add the rest of the basic tags, like so:

<html>
<head>
<title> Your page title will go here </title>
</head>
<body>
Your contents will go here
</body>
</html>

Which looks like this:
Your contents will go here

This is your basic HTML page, copy (type) this into your text editor (Notepad or similar), save this as index.html. Choose 'File/Save as', then 'File name' as index.html, save as type 'Any file (*.*)' into your folder you have set aside for your web page. Be careful the file doesn't get saved as index.html.txt If it does, right click on the file and rename, removing the .txt

File/Save as, Save as index.html

The first page of your site is 'index.html' which is the default start page, you may save any other pages anyway you like, i.e. links.html, about_me.html, updates.html, page-1.html etc but you must not use spaces or character symbols like !, @, #, $, %, " etc. Instead of a space, you may use a hyphen - or an underscore _ as a separator. (%20 is not allowed either).

To open/view your new page, just double click on the index.html file in your folder, and the page will open in your default web browser. To edit your content, you just right click on the page and choose 'View source' in Internet Explorer or 'file/Edit Page' in Netscape. This is all done off line. Change your file, click file/save and hit 'Refresh' or 'Reload' to view the updated page on your browser.

What it means
The <html> and </html> tells the computer what sort of file it is.
The <head> and </head> is for JavaScript, Meta tags, title etc which we will cover later.
The <title> and </title> displays the pages title in the very top left of your computer screen, (See graphic below) it's also the name that gets saved when your page is book marked. (This goes in the head tags) So is best to keep the name short but to the point, instead of "Links", use "Your name Links page". You'll see the title for this page is "EZHTML - The Basics".
The <body> and </body> holds all your content of that page.

Right way
Sample of how the tags are layed out

You will notice that all the tags are in order, this is very important to continue this throughout your page, mismatched tags can and will confuse the browser to a point where it wont display the page.

The tags should NEVER cross paths like shown in this example

<1><2><3> text </3></2></1> is the right way

<1><2><3> text </1></2></3> is the wrong way

Some tags are were optional, but now all tags must be complete. To make it work in older and newer browsers the same, always close the tags.

Wrong way
Sample of how the tags should not be layed out

This is the hardest part to learn for now, as these tags are sectioned, all other HTML tags are used within the body section.

Page layout

It is far easier to edit your pages if you keep the tags tidy, this is tidy and easy to edit:

<html>
<head>
<title> Your page title will go here </title>
</head>
<body>
Your contents will go here
</body>
</html>

Below is messy and hard to edit (especially when you add all your contents):

<html> <head> <title> Your page title will go here </title> </head> <body> your contents will go here </body> </html>

HTML is not case sensitive, but the new version of HTML (XHTML) is. File names are, picture.jpg is not the same as PICTURE.jpg or picture.JPG. As a rule I keep everything lowercase including filenames and don't have problems. If/when you advance onto things like JavaScript, DHTML, CSS etc, you will have to be careful with your coding as it is case sensitive, keep it all lower case and you wont have problems.

Content, navigation and layout would be the top three components for a web site, and this is where many people fail.

Important
Content - you have to have something people are interested in.
Navigation - people must be able to get around your whole site within 3 click (3 links) and always find their way out
Layout - if people have to learn a new way of reading, they won't, we are brought up reading from left to right, top to bottom. Why try retrain people when you can use what they already know.

You will see this comment throughout the site, as I want you to start off on the right foot.

Comments

Comments are great little messages that you can add in your HTML code to show where things start, the date you changed something, a reminder ...


(finish).

It can confuse the older browsers using more than the four required dash's (-), so using more inside the comments, should be avoided. Comments can be single lined:

or multi lined:


HTML tags within comment tags should also be avoided

lets try some, copy (type) this into the page you made before

<html>
<head>
<title> Your page title will go here </title>
</head>
<body>

This is typed between the comments

</body>
</html>

Which should look like this:

This is typed between the comments

Now right click on the page (your page) and click "view source", you'll see the comments are there, but not on the screen.

Common errors

The <html> tag is the uppermost tag, only one other tag should ever go above it (DOC type tag, we'll talk about it later as it isn't an important tag).
The </html> tag is the very last tag that should be on your page.
All content should go between the body tags, any content between </head> and <body> can cause problems
Forgetting to include one of the main basic tags will cause display errors
Forgetting to close or not closing a comment tag properly can cause your content to not display
Using a \ instead of a / to end the tag will cause problems
Typos cause problems, it seems to easy a problem but it is very common mistake. ie <hmtl> should be <html>

Summary

We have seen how tags are used in order with opening < > and closing </ > tags
We have learnt .html files contain:
<html>
<head>
<title> </title>
</head>
<body> </body>
</html>
The default file on a web site is called index.html, so http://www.yourwebsite.com/index.html is the same as http://www.yourwebsite.com
Tidy tags are important for future editing.
Comments are your friend and should be used to help future editing.

Exercise

Add your name to the title; example: (Your name)'s new web page.
Add some text between the body tags saying: "I've made my very first web page all by myself."
Save your page and view it, double click on the saved .html file in your new folder.
Add a comment or two. You can say what date you made the page, where your page starts and/or finishes.

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your computer (save your work as you go). HTML is an easy language but trying to filter it down into subjects is hard because every part of it is used within each other but we'll get there.