Beginners Guide to HTML Part 1

Written By: Kevin Jordan

- 27 Mar 2006 -

Description: This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

1. Creating an HTML Page
2. Paragraphs and Text
3. Links and Images

Introduction

Sure HTML is a markup language, not a programming language, but try designing a website without it. If you're planning on programming in ASP, PHP, of JavaScript, you'll most likely need a little HTML for the client side.

This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

Creating an HTML Page

In order to create a web site, all you need is a simple text editor. In fact, simple is almost a requirement. If you try creating you web site in Microsoft Word, you'll end up with a big mess. Use Notepad instead, or if you want to get really fancy use Notepad++. Notepad++ will add some syntax highlighting to your code and makes organization a little easier (especially when you start nesting tables).

The reason you can't use any fancy writing software is that HTML is very sensitive to the type of characters that you can use. Think letters, numbers, and a couple symbols only. If you start throwing in all the font and paragraph information into that mix, you'll see those control codes rather than the actual change in font.

So you got your text editor. Now what? Save the document with an .htm or .html extension at the end. Now you have a web page. A blank one, but your browser will look at the document and try to interpret an HTML (once we add some). Typically the first page displayed on a browser is called index.htm or index.html. This can be configured from the web server, but we don't really need to worry about this. Also you may be asking, ".htm or .html, which one should I use?" Either will work exactly the same I prefer .html, but back in the old days some operating systems could only handle three characters after the period, so .htm was required.

Basic Document Structure

So you've got a blank indexl now. Let's fill it in a little bit.

Every HTML page should start with . Even though we already told the browser that we're using HTML by naming it with the proper extension, this will distinguish our markup language from any other extras we decide to throw in there like a JavaScript.

Also notice at the end we have the / this is a terminator, and no, not Arnold Schwarzenegger. Everything we create with < and > is called a tag. Every time you start a tag, you've got to finish it with a terminating, or closing, tag. You'll see a lot more as we go along.

        
                
        
        
                Type what ever you want here.
        

Here's the basic structure to every HTML page. Notice how the document starts with and ends with . The rest of the page is divided into two sections the header, , and the body, .

The header is where you put information that is important about the web page, but you won't typically see in your browser window. The