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

Line Spacing

One thing about HTML is that it ignores extra spaces and carriage returns. Without adding a few tags, everything will end up on the same line.

This is a paragraph.

Paragraphs should be surrounded by

tags. Creating a paragraph puts an extra carriage return above and below the test, separating it and making it easy read. However if you want to add extra lines between sections of your document, blank paragraphs are not the way to go. You need a break...

 />

Breaks are a little different than our previous tags because we open it and close it at the same time. We don't use
and the
. You'll see this in a few other tags, but the main point to get across is that
creates a new line.

creates two new lines.

This is preformatted text.
It will put this on a new line.
Lots of spaces will be added          {-- there.

      

One way to get around the way HTML ignores spaces and carriage returns is by using the

 tag. 
 means the text has be preformatted. Any spaces and carriage returns you type will be displayed on your web page.

      

        
 />
      
      
Another little trick you can use to help split up your web page's layout is the 
 tag. Horizontal rule, 
, adds a line across the screen.

      
Text Formatting
      
So now that we have our paragraphs all divided up and spaced out, we may want the text to look a little different. Let's start by making our text a little bigger.
      

        
Header 1
Header 2
Header 3
All the way to 

      
      
If you want to put the title of the page in big letters, the best way to do it is with 
. Each increment makes the text a little smaller than the last all the way to 
. Adding header tags also helps search engines know what your page is all about.

      

        
Bold
Italics
Underline</u>
Strikethrough
True Type

      

      
This is bold

      This is italics

      This is underline

      This is strikethrough

      This is true type
      
Here's a couple other ways to make your text a little different. As you get a little deeper into you HTML studies, most of your text formatting should be with style sheets, but until then have fun with these.
      
Lists
      
List can be pretty helpful, especially if you want anything bulleted or numbered. The numbered version is called an organized list while you unorganized lists have the bullets. Just to give you something else to look forward to, these can also be changed with style sheets, but using the tags won't change.
      

        

        
Item 1
        
Item 2

      
      
Here's what it will look like:
      

        
Item 1
        
Item 2
      
      

      
There are two basic components to the organized list. First we initiate the list with the 
 tag. Then, for each item on the the list we'll need a 
 or line item. A number will be placed to the left side of each item automatically, starting at 1 and incrementing for each line item.

      

        

        
Item 1
        
Item 2

      
      
Here's what an organized list looks like:
      

        
Item 1
        
Item 2
      
      

      
Unorganized lists aren't too different. Start out with 
 to signify the beginning of the list, and create a line item, 
, for each. Instead of a number being added to the left, a bullet will be next to each item.

      

      
<< Previous
      
Next >>