This tutorial and others may now be downloaded! Click Here for details.

HTML Basics
Text formatting tags
As we said before, a valid HTML document only needs the html tag. You may type any text between the html start and end tag without any other tags and it will display in the browser just as you typed it. The browser uses it's default text color and font to display your words. But that isn't very exciting. HTML contains a rich set of text formatting tags that you can use to display the text in just about any format you can dream up. We'll cover the common ones here.
Headline tags ( <h1></h1> ... <h6></h6> )
These tags are used to quickly make headers. For instance...

<h3>Chapter 1</h3> looks like this...

Chapter 1

The headline tags range from 1 to 6 in decreasing size and boldness. These tags are what's called line-breaking tags. That is, whatever comes after the header is on the next line in the browser, no matter what.

Paragraph tag (<p>)
Starts a new paragraph or line. This tag does not require an end tag unless you're specifying a style (covered in the next section) for the entire paragraph. Then, you should use it to tell the browser when to end the paragraph.

Boldface tag (<b></b> or <strong></strong>)
The <b> tag is used to make text bold. The <strong> tag is used to give emphasis to text. In almost every case, that means bold. For instance...

<b>This is bold</b> looks like this... This is bold
<strong>This is strong</strong> looks like this... This is strong

This tag does not cause a line break.

Italic tag (<i></i>)
Makes text italic. For example...

<i>Italic text</i> looks like Italic text

This tag does not cause a line break.

Font tag (<font></font>)
This tag is used to specify size, color, and font style of text. For example
<font size="2" color="red" face="Courier">font example</font>
would look like this font example
(Note: The W3C recommends using font style properties instead of this tag.)

This tag does not cause a line break.

Block of text tag (<blockquote></blockquote>)
Creates an indented block of text. I used it in the font tag example above. Notice how the example is indented. This is a line-breaking tag.

Underline tag (<u></u>)
Underlines text.

(Note: The W3C recommends using text style properties instead of this tag.)

This tag does not cause a line break.

As an exercise, try duplicating the following paragraph using the tags just discussed. Put it in a file called texttags.html. No cheating.


Text Formatting Tags Example

This is a very simple exercise to test your comprehension of these common text formatting tags. I'm showing uses of every tag discussed in this section to make this exercise.

I'm being a little Sneaky though, because I'm actually using tags that you haven't learned yet, to create this look. I'm not trying to confuse you though. I'm just hoping you get this on your own.

Good Luck!



Next, we'll discuss how to add color and style in more detail...

Next >>

Copyright © 2004, Chisholm Technologies Inc.