HTML - Basic Formatting

If you feel you understand the topics covered in the Introduction, the rest is easy.

Basic formatting techniques include the abilities to: bold, italicize, underline, perform the line break and aligning paragraphs.

Bolding uses the <b></b> tags. Italics use the <i></i> tags. And underlining uses the <u></u> tags. It's really quite simple, just place the text you want styled between the tags. Here's a sample paragraph:

<p>Hi! My name is <u>Red Rover</u>. I am a <b>dog</b>. Not a <b>cat</b>. Woof, woof. I will climb on your <i>roof</i>. You can <u>not</u> stop me, Sam I am. I will walk on your <i>roof</i>.</p>

This would display as:

Hi! My name is Red Rover. I am a dog. Not a cat. Woof, woof. I will climb on your roof. You can not stop me, Sam I am. I will walk on your roof.

Now let's try moving the text around a bit. There are two basic ways to do this: the line break (hitting "Enter" in a word processor), and the align attribute. To accomplish a line break (or "Return") just place a break tag <br /> where ever you want one. In case you noticed, this is one of the four exceptions to the rule of tags always travel in pairs. To make up for this, the <br /> tag has a space and a / at the end. This is refered to as a "self-closing" tag. Other self-closing tags that you will encounter in the following lessons are the horizontal rule <hr />, the input tag <input type="text" /> and the image tag <img src="picture.gif" />. Notice the src="picture.gif" on the image tag and the type="text" on the input tag. These are attributes, or characteristics, if you will.

Every tag has a set of attributes that it can use. Some are only for that specific tag, and others can be used on a variety of tags. To see a table with a list of the tags and their attributes, visit the Cheat Sheet.

Let's start working with our first attribute, the align attribute. The align attribute can be used on a variety of tags from the paragraph to an image. We'll start by aligning a paragraph (since this is the formatting section...). <p align="center"></p> The word in quotes, "center", can be replaced by "left", "right" and "justify". Thus performing all the typical alignments of a word processor. Here's an example:

<p align="center">Hi! My name is <u>Red Rover</u>.<br />
I am a <b>dog</b>. Not a <b>cat</b>.<br />
Woof, woof.</p>

<p align="center">I will climb on your <i>roof</i>.<br />
You can <u>not</u> stop me, Sam I am.<br />
I will walk on your <i>roof</i>.</p>

This would display as:

Hi! My name is Red Rover. I am a dog. Not a cat. Woof, woof. I will climb on your roof. You can not stop me, Sam I am. I will walk on your roof.

Try it out!

Practice

Ready for some Images?

Introduction | Basic Formatting | Images | Linking
Additional Formatting | Lists/Bullets | Basic Tables
Advanced Tables | Forms | HTML Cheat Sheet