A website is a set of webpages. These webpages are being constructed with the use of web programming languages such as HTML. These languages are typed in plain text and rendered by the browser to show the actual page. There are web developing programmes out there that can help you create a website by dragging things around and inserting items through the quick menu. However, there are many things that can be done on a webpage, that the programme might not be able to do. So, it is good to learn HTML and start a website from scratch. Besides, HTML is the most basic and required markup language in order to construct a site. Do note that you do not need to know any background on web development or what so ever to start learning HTML. Some misperceptions that many people tend to have, about constructing a website, are the requirements of expensive programs and the complexity of web programming languages. However, web development is actually easier than you think it is. You might think, I said that because I already knew how to develop a website. Well, lets move on and we will see.

HTML is the acronym of HyperText Markup Language. It is an artificial language created by people and it is used to describe how a web page is supposed to be presented. The browser does not show any HTML language. All you need is a plain text editor such as Notepad where you can get started. You can locate Notepad by clicking on the start menu, all programs, accessories folder.

Basically, the HTML language is made up of tags. Tags are like labels that are enclosed with lesser < and greater > than signs. These labels have defined names which are considered as valid HTML tag and recognized by web browsers. An example of a valid HTML tag would be <br> HTML tags generally has two kinds. One is the opening tag <h1> and the other is the closing tag. Both tags are nearly identical. Only difference is, there is a slash after the lesser than sign in the closing tag </h1>. Such kinds of tag are usually used to surround texts and elements that are to be displayed in the browser. For example, <h1>Text</h1> There are two types of tags that exists in HTML. Tags with opening and closing tag, which I have mentioned, and tags without closing tags, also known as empty elements. <br> is one of them. These means that they do not surround any texts or elements on the page. However as HTML improves and XHTML is introduced, it is good to start closing empty elements. To do that, simply place a space and a slash before the greater than sign <br />.

As I have mentioned in the last segment, one of the two kinds of tags surround texts, elements or other tags. These tags are known as nesting tags. Nesting your tags in HTML in an orderly manner is very important. Browsers may misinterpret your HTML when your tag is improperly nested. Let me give an example. You have a house door, 3 bedroom doors and 2 bedroom toilet doors in 2 of the bedrooms. When you open the house door, a bedroom door and a toilet door in that bedroom, and you are about to leave the house with the intention of closing the doors, you would want to close the toilet door first, followed by the bedroom door and then finally, the house door. By closing the bedroom door or the house door first, you will not be able to close the toilet door or even the bedroom door. Make sense? Let me explain further. When you type an opening tag, <tag>, it is just like opening a door. When you type another opening tag after this opening tag, you are opening another door. At the end of everything you placed after these tags, or when you are done with opening all the doors, you will need to type in closing tags in an orderly manner. You must close the last tag (closing the last opened door), followed by the next all the way to the very first tag (door) you have opened. The two illustrations below shows an example of correct nesting of tags (Fig. 1.1) and incorrect nesting of tags (Fig 1.2). The 'doors' mentioned in the illustrations are representations of tags.

Certain tags allow attributes. Attributes are like labels for specific description of a particular tag. These descriptions are known as the values of the attributes. Attributes are also defined words, means they need to be valid. The values can either be numerical or alphabetical which, some of them also have defined. Every attribute must be accompanied with a value, avoid attribute minimization. Attribute minimization is leaving out value that is identical to/has the same name as the attribute. It is good to avoid attribute minimization since HTML is advancing into XHTML. Do note that the value is to be enclosed with inverted commas and equated to the attribute. A tag can have more than one set of attribute and value. An example of a tag with multiple attributes and values is <img height="20" src="image.gif" width="100" /> The sets of attribute and value may be placed in any order after the tag name in the opening tag. Attributes and values only belong to the opening tag and not the closing tag.

I have mentioned quite a number of tags and acronym. You might understand them, you might not. Do not worry because as you continue learning HTML, you will get to know them all. I highly recommend and encourage you to write your HTML tags in lowercase, and again, for XHTML purposes. Possible syntaxes:

<tagname></tagname>

Opening and closing tags that do not contain anything.

<tagname>Text Here</tagname>

Opening and closing tags surround text

<tagname>Text <tagname>in</tagname> this element.</tagname>

Opening and closing nesting tags.

<tagname attribute1="value1" attribute2="value2" attribute3="value3"></tagname>

Opening tags with multiple attributes and values.

<tagname />

Empty element

<tagname attribute1="value1" attribute2="value2" />

Empty element with multiple sets of attributes and values.

When you start learning something, it is good to learn as a whole rather than just the skeleton of it as you might encouter problems in future like I did in the past. It is just like learning a music instrument. If you start off with bad habits, it is going to stay with you and it will be quite difficult to stop it. So, take the extra mile and learn something extra that will help you be a better coder in future.

Many introductory HTML or webpage articles out there do not teach visitors about doctypes. They just jump straight into the <html> tag. This should not be the way because doctypes are very important and makes your coding much easier. I will not ephasize alot on the tags here. If you want to know what it does, you can simply click on it and it wil bring you to the relevant page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page Title</title>
</head>

<body>
</body>
</html>

Basically, anything that you want to be displayed on your site must be typed in bewtween the <body> tags. It is a common sight for people to dump their snippets or widget codes anywhere in the HTML, the first line, the last line, over here and there. This is a no-no! It makes editing and reading harder and browser might again, interpret it wrongly. All page information and properties are to be typed in between the <head> tags.

Open an web developing programme such as Dreamweaver. You can also use any plain text editor like Notepad. Simply type in your HTML and save it with a .htm or .html extension. There is no difference between these two extensions, for your information. After that, simply use your favourite browser such as Firefox to open the .html file. If you want to edit it, just open the file with your web developing software or plain text editor.

This is just a guide to get you started. The key to web developing is experimenting. Go out there and learn as many tags as you can. Type them into notepad or web developing softwares to see what the tag does. I personally am a big fan of web developing so that's all for now. You've come to the end of the article. I strive to be as specific and detailed as possible. If you think I have left out anything, do contact me with the form on my front page. Oh, do remember that this is just a HTML introduction.