Monday, February 18, 2008

A Basic HTML Document

What is HTML?

A web page is an HTML (HyperText Markup Language) computer file.

A text document needs Markup Language so a computer knows how to display it.

HTML is the primary markup language that is used to construct Web pages. HTML tells the browser what to display on a page. It can specify images and other objects and can also specify the appearance of text, such as bold or italic text. Basically, it defines how the Web pages will look and how the visitor will be able to move around the Website.

A Markup Language is a way to give guidelines (in this case, to a computer) for adding markup to a text document using special symbols. HTML is a markup language designed for use with Internet documents. Markup is needed because computers are not intuitive when it comes to text, they can't think for themselves, but they can execute instructions (programs) with lighting speed.

A computer cannot tell if a portion of text is an abstract, a title, a heading or a paragraph. So markup "tags" are added to the text in a document to tell the computer how to display the text so it will look the way you want it to look.
Hypertext is a way to format information so readers can choose their own path through the material. Instead of clicking through a document sequentially, a hypertext user can click on specially highlighted text (hyperlinks) to go directly to other related materials.

This page gives a brief overview of what comprises an HTML document but it is not intended to teach you how to program in HTML. That is a major subject in itself.

There are many many HTML books available. If you are new to HTML, you'll want to pick up a book on basic programming in HTML and also a reference book that lists the HTML tags, elements, attributes and functions that are available.

If you have an HTML editing program (or Tool) but haven't used it yet, you'll be much better off learning basic HTML first. These tools will greatly enhance your productivity, but no matter how good you become at using a tool, eventually you will have to tweak or add some HTML code by hand. If you don't understand the code and don't know what you are doing, you could end up causing yourself some real headaches. So learn the basics first.

The Basic Structure of an HTML Document

An HTML document has four basic parts:

Version Information or Document Type Declaration
This information is declared using the name CTYPE, which is short for Document Type. When you declare the HTML DOCTYPE, you tell Web browsers which version of HTML your Web pages are using. Since there are many versions of HTML, browsers use the DOCTYPE declaration to tell them how to display a Web page. An example would be :

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

If you will be using an HTML editing program, it will probably take care of inserting version information at the top of your documents. This version information will be different depending on the specifics of the HTML program you use. If you write HTML by hand and only use the basic and most common HTML, you can get by without declaring the version information because this declaration is actually optional. Your web pages can be displayed without it. But, as your Web pages become more complex, if you don't use a DOCTYPE declaration, then the various browsers will display different things in different ways (this is called "quirks mode").

If your editing program does not insert the version information or you want some more help with DOCTYPE declarations:
- Here is a link to an article that goes into more detail and gives examples of which DOCTYPE should be used.
- Here's the link to the W3C (World Wide Web Consortium) page that has the official templates for various DOCTYPEs.
The HEAD
The HEAD is an element of it's own. It contains descriptive information about the document. Some of that information will be the TITLE tag and META tags that contain Description and Keyword information. The HEAD will also contain information on functions (usually JavaScript) that will run on your page. The Head tags look like this: <HEAD> and </HEAD>. The slash "/" tells the computer this is an ending tag. No slash means it is a beginning tag.
The BODY
The BODY is also an element. Everything else that you put into your HTML document will be in the BODY. The Body tags look like this: <BODY> and </BODY>
The HTML
The HEAD and BODY information will be enclosed inside the HTML tags (which is also an element). The HTML tag is the very first tag after the version information or the DOCTYPE and is the very last tag of the document. The HTML tags look like this: <HTML> and </HTML>.

For guidelines on the proper use of HTML, visit the W3C's home page for HTML. They have pointers and specifications for HTML and XHTML, guidelines on how to use HTML/XHTML to the best effect, and information related to the work at W3C.

So now let's put this together to make a basic web page

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Look at my web page everybody
</body>
</html>

See, it's not that hard! If you were to view this HTML through an Internet browser, you would see the words: "Look at my web page everybody" displayed on a blank white page. To make the text bold, all we have to do is insert bold tags like this:
<b>Look at my web page everybody</b>

What you see here is a valid HTML document that is properly structured. It is the minimum information required for an HTML document. Notice how the HEAD and BODY elements are inside the HTML tags. You can use capital letters to write your HTML tags, but it's much easier to just use small case.

Also, the Title tag is required and the Title information will show up on your search results when you use an Internet search engine like Google or Yahoo! I'll discuss more about this in the topic on the Title Tag.

To learn more about writing HTML, the WC3 organization has a Tutorials page.

In the next topic on Writing HTML I'll tell you a good way to learn HTML, give you a list of common HTML Tags and Attributes and give you some links where you can get some Free HTML Editing Programs.