Backgrounds / Fonts & Text / Accents / Lists/ Images / Links / Tables / Frames / Forms /
Introduction

This is a simple tutorial where you basically teach yourself and work at your own pace. All I do is provide you with the coding examples and definitions. It's totally free.

HTML (Hyper Text Markup Language), is the programming language used to create your Web Pages for publication on the Internet. It's not like learning to speak Greek. It's not a complex beast, or a monster. HTML is your friend. It's basically very simple and anyone can do it. Depending on your level of enthusiasm, you can actually publish your first Web Pages in just a day or two. This tutorial will walk you through all the basics and some advanced HTML in several easy steps that will have you beating up your keyboard programming web pages like an expert in no time. Armed with the tricks and code samples you'll find here you will be limited only by your own imagination. So whether you just want to design your own home page or make the big leap to a full blown Web Site you will be able to do it your way. You may want to print this tutorial for later reference while working as it will make it much easier to go through it.
The following is a short list of things you will need to get started.

Getting Started

  • A simple Text Editor, such as Notepad, or Wordpad (Later you can use an HTML Editor if you like)
  • A Web Browser (Microsoft Internet Explorer or Netscape Navigator, versions 4.0 of each recommended)
  • A genuine Desire to learn HTML (Work at your own pace!)
  • A couple of hours to start (A fresh pot of Java will help)

The Basics

HTML is made up of numerous "TAGS" which are always included between the "less than" < or "greater than" > brackets. The text that is in between these brackets tells your Web Browser what to do, and how to recognize and display the content of your Web Page. Your Web Page content is determined solely by your imagination, and your creative use of these "Tags". This tutorial will walk you through these tags in the simplest way possible so that you can quickly get a basic working knowledge of HTML and be on your way to creating your own web pages in short order. More about that later. First you must understand your Browser.

The Browsers

Your Browser is also your friend. It's what you use to surf the net, and to view your HTML work offline before you publish your Web Pages on the Net. Web Browsers are free! So there's no excuse for using a lame old Browser anymore. Before you get serious with this tutorial, check out your Browser. If you are not using the lastest versions of Microsoft Internet Explorer or Netscape Communicator you are missing a lot when you are surfing the Web. Stop now and go get the latest version of your preference.

Recommended Browsers

  • Microsoft Internet Explorer 6.0
  • Mozilla

If you've got a good browser already, you can upgrade later, so for now if you are viewing this in your browser move on. If you are viewing this in your Internet Service Provider's window you may want to switch to viewing it in your browser's window as it will be helpful to you at later references here.

Requirements

All HTML documents require the minimum "tagging" in order to function in your Browser. The minimum HTML document looks like this:

<HTML> This tells your browser that it is reading an HTML document and begins the document
<HEAD> This begins your HTML document heading
<TITLE> This begins your HTML document title
</TITLE> This ends your document's title
</HEAD> This ends your documents heading (The title is allways included within the "head" tags)
<BODY> The "body" of your document. All of the content of your web page is within the "body" tags
</BODY> End of body (end of content)
</HTML> End of HTML document (end of your web page)

This snippet of code will show only a blank gray page. There is no content within the "<BODY> & </BODY>" tags. And a gray background is simply the "default" background when none is specified in your HTML code. Stay with me now.

All HTML Tags are surrounded by these brackets and all sections of an HTML document are noted by a beginning and an ending. The end of the "<TITLE>" is designated by the "/" charactor "</TITLE>".

It is very important to understand that their is a certain "hierarchy" of HTML tags which must be followed. Note that the <BODY> and </BODY> tags are all included within the <HTML> and </HTML> tags. And note that the <HEAD> and </HEAD> tags are also nested within the <HTML> and </HTML> tags. Notice further that the <HEAD> & </HEAD> tags are before the "BODY" tags, and that the "TITLE" tags are nested within the "HEAD". All tags on your page should be nested according to their hierarchy. It gets easy just keep going.

Example of good HTML hierarchy vs. bad:

Good HTML Hierarchy Bad HTML Hierarchy
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE> <TITLE>
</TITLE> </HEAD>
</HEAD> </TITLE>
<BODY> <BODY>
</BODY> </HTML>
</HTML> </BODY>

Can you see the good vs. the bad? Don't worry if you do not yet understand it all. Just make a mental note to yourself about "Hierarchy" and proper "Nesting" of your HTML tags.

Top of Page?

HTML Tags

Now get ready to make your first HTML page. Open up your text editor, wordpad, notepad, or what ever. Create an empty file folder somewhere on your system. Make it easy to get to for faster work, and give the file folder a name. "MyFiles" or whatever you want. In your text editor start with a blank page and type in the minimum requirements as shown above in the first example. You should have this:

<HTML>

<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Got it? Good. Now add some new stuff to what you've already got. (The new code is in Blue).

<HTML>

<HEAD>

<TITLE> My first web page</TITLE>

</HEAD>

<BODY> This is my first web page

</BODY>

</HTML>

Save this in your file folder that you created a minute ago. Give it a name, and save it as an HTML document. Say "Mypage.html". (Windows 3.1 users save it as "Mypage.htm". Skip the last "l".) Now open your browser. Click "Open" Select the file folder you created. Open "Mypage.html" in your browser because you have just created your first Web Page. Congradulations!

Top of Page?