Formatting Text

News Flash!: Headlines Grab Attention!

As you look through this Web site, you will notice that there is an outline flow to the document series, and that each major topic appears a certain way, that subtopics are uniform in appearance, and so on. That's because I'm using standard tags to create headers.

There are six levels of predefined headers, and they're very simple to use.

and

will bracket a level one header,

for level two, and so on to level six. Each header will provide some sort of default textual formatting that will distinguish it from regular text on your page. We'll talk about how to customize them later, but for now the standard appearance is good enough.

Here's an example of each type of header, along with the tags that produced them:

Header 1


Header 2


Header 3


Header 4


Header 5

Header 6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

As you can see, they set themselves apart from regular text and are great for use in outlined documents. One of the problems that we'll correct later is that they tend to get very small.

Alterations to the Header Tags

Not all headers must appear the same, and not everything you create will be left-justified. There is extra power in several tags in HTML in the form of properties that can be placed inside tags. They are usually optional, so only put them in if you need or want them, and the order they appear in is not predefined; as long as they appear inside the opening tag, it's a valid property. Here are some examples:

Header Text

Substitute the header level for the "#" in the tag.
The ALIGN option will align the text however you wish. The default is left-aligned, but you can use RIGHT or CENTER to automatically shift the header appropriately.
NOWRAP tells the browser not to wrap the text of the header to fit the browser window. If your headers are long, it is up to you to specifically place line breaks.
CLEAR will tell the browser how to display this text when placed next to a graphic. The values are LEFT, RIGHT, and ALL; the value you provide indicates what margin must be clear for the header to display.
SRC will take the location of an image as a property, and the image will be displayed before the header text.

Line Breaks and Paragraphs

Since most people would prefer to have a Web page look nice, it would be handy to write the page out as if it were a paper you handed in for English class in school, not one long, run-on sentence. There are a couple ways to create a new line in HTML, each with a different purpose.

The
Tag

The
tag is used to create a new line, much like a simple carriage return. This is one of the tags in HTML that requires no closing tag; after all, what's the point of a closing tag for an end-of-line marker? The
tag is essential if you use the NOWRAP option with other text tags, as this is the only way to force your text into appearing how you want it to. There is one option for this tag:

OR
OR

Just the same as the way it works for a header, CLEAR is used to indicate which margin needs to be free of content before the next text will be displayed. Acceptable values are LEFT, RIGHT, and ALL, although simply including the word "CLEAR" will use a value of NONE.

The

Tag

The

tag is used to indicate a paragraph change, and is essentially the same as two consecutive
tags.

has a closing tag,

, but it is only required (OK, not required -- but STRONGLY recommended) if you use the options for this tag. The options are shown below:

Again, the NOWRAP option will prevent the text of this paragraph from wrapping in the browser window. Text wrapping will only occur at points where you have specifically placed a
tag.
The ALIGN option will define how all the text of the paragraph is aligned.

Fun Formatting Options

Well, they're actually more than fun; they can be used to draw attention to keywords or phrases with some simple use. All the text between the opening and closing tag is affected, so it's a good tip for beginners to write the opening and closing tag, then type your text in between. You've seen examples of some of these tags already, but here's a little example of some tags and how they will affect the text you apply them to:

BoldSample Textlooks like...Sample Text
ItalicsSample Textlooks like...Sample Text
Underline (Deprecated)Sample Textlooks like...Sample Text
SubscriptSample Textlooks like...Sample Text
SuperscriptSample Textlooks like...Sample Text
EmphasizedSample Textlooks like...Sample Text
BigSample Textlooks like...Sample Text
SmallSample Textlooks like...Sample Text
Strikethrough (Deprecated)Sample Textlooks like...Sample Text
Code Sample

True Type

Keyboard Input

Sample text

Sample Text

Sample Text

Sample Text

Sample Text

looks like...

looks like...

looks like...

looks like...

Sample Text

Sample Text

Sample Text

Sample Text

Although these tags can do quite a bit to "dress up" your web page, often what makes things stand out are colors, different fonts, and the size of the characters used in your text. For the next part of the tutorial, we'll take a look at the methods HTML uses to identify color patterns, how to apply them, and how to manipulate the look of the standard text on your page.