R. Craig Collins > Web Page Design > Formatting Options in HTML

Formatting Options in HTML © R. Craig Collins, 2005/6

The book covers basic format options, and many are similar to features in word processing:
<i>text</i> for italic
<b>text</b> for bold
and modifying tags to center text, etc.

The following section covers
spaces, tabs, and form feeds,
In-line formatting with <tag style="..."> </tag>, and
block formatting with <div align="..."> </div>

More fun with spaces and text placement (on screen, or printed)

You know about non-breaking spaces, (&nbsp;), but if your computer reads ASCII (Windows reads ASCII), you might also try the ASCII tab (&#x0009;). Or, if you wish items to print on separate pages, insert the ASCII form feed (&#x000C;)

In-Line Formatting, using <tag style=...> </tag> or <span style=...> </span>
to W3C on Styles

Up until now, if you just wish to change the appearance of a few words, you used <font ...>text</font>.

As mentioned earlier, <font ...></font> has been deprecated; one of the preferred methods now is using in-line formatting, such as <span style="color: red; font-size: 14pt"> text</span>.

That is, you add a style property and value to an existing tag, such as a headline, or a paragraph. I like to use span; like paragraph, it surrounds some text, but does not force the line breaks that <p></p> does.

Style Examples

Style property declarations have the form "property: value" and if there are several options to be used, they are separated by a semi-colon.

<h1 style="text-align: center"> </h1>
<p style="text-align: center"> </p>
<span style="color: red; font-size: 14pt"> </span>
<span style="font-weight:bold; font-family: Arial, Helvetica, sans-serif"> </span>
<img style="float: right" ... > </img>

Your book has been using quite a lot of in-line formatting, but this type of HTML is very rich, with many, many options (See my list of style properties here). So, styles I think are best implemented if you are using an editor, such as Dreamweaver. First your create a style, then you apply the style to what ever text you wish to format. More on creating styles later.

Formatting by dividing your page into blocks, or divisions: <div>

One step up from applying placement to a paragraph or headline, such as <p align="right">Text </p>, is the idea of blocks or divisions. Using <div></div> we can surround a section of a web page, including headlines, horizontal rules, images, and text, and align all of them at once.

DIV Examples

<div align="left">... </div>
<div align="center">... </div>
<div align="right">... </div>
<div align="justify">... </div>