Before getting started, make sure you have an idea of how you want your webpage to look. Design is an important first step to building a great site! We also need to make sure we have the right tools available.

All you need to get started with the basics is an editor to write your pages. You can use HTML editors such as Netscape Composer or Microsoft FrontPage, but do not worry if you don't have access to an HTML editor. Simple text editors like NotePad or WordPad in Windows will work just fine, and we recommend using these text editors to be able to get a better understanding of HTML. **Please note this site does not explain how to use HTML editors**

You will also need a browser like Netscape Navigator or Microsoft Internet Explorer to view your pages. Now that we have the design layout and the right tools, let's get started!

So what exactly is HTML?

HTML stands for HyperText Mark-up Language. HTML uses a series of tags enclosed in <> to "mark-up" text. Browsers interpret the tags to manipulate and format the text, images, etc in a page.

Most tags have an ending tag to show where the mark-up ends. The text or object being marked-up is enclosed between the opening and ending tags. The ending tag is the same as the beginning tag except it starts with a "/".

For example suppose we want to underline a line of text. We'll use the tag to show where to begin the underlining. The ending tag looks like this: . HTML tags are not case-sensitive so and will do the same thing! This is what the line of code will look like for our example:

Some text here

This is what the text will look like:

Some text here

Some HTML tags also include attributes or elements inside the tag to specify size and color, among other things. Tags with attributes are explained in more detail in other tutorials. An example of a tag with an attribute looks like this:

Creating Your Page

All HTML documents must end with ".html" or ".htm". The first page is usually called "index.html". The first line of all pages should be one of the following depending on which version of HTML you will be using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

All this states is that the page conforms to the HTML standards set by The World Wide Web Consortium (W3C). The examples on this site will be using HTML 4.0 Transitional Standards. HTML 4.0 and HTML 4.01 include new features such as style sheets.

HTML 4.0 Transitional and HTML 4.01 Transitional allow the pages to be viewed by older browsers that don't support the new features. 4.0 Final and 4.01 Final strictly follow the standards set and won't be viewed properly in older version browsers. 4.0 Frameset and 4.01 Frameset are used with pages that use frames.

The next tags to be added to our page are <HTML> and </HTML>. These tags are important to show the page is an HTML document. Everything you add to your page will go between these two tags. This is what the page looks like so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

</HTML>

Adding a Title and the Body

Adding a title is pretty easy. The title goes in the header part of the page since it is not part of the actual body of the page. The header includes all the information about the page, such as title, author and description, etc, plus any style sheet definitions and script code. The body contains the actual contents of the page.

This is how the header and title are inserted into the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>My Very First Page!</TITLE>

</HEAD>

</HTML>

The body is where you will be actually writing your page. This is how to insert the body tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

Contents of Page

</BODY>

</HTML>

You will mainly be working between the <BODY> tag and the </BODY> tag when creating your pages. Save the file as "index.html" and open in your web browser.

Congratulations! You have just created your first HTML document. You are now ready to move on to the next tutorial - Adding Backgrounds!

This page has been accessed

times since June 24, 2001

Last Updated March 21, 2001