Formatting

OK, so that last page wasn't very exciting. In fact it was rather boring. The problem is that the text hasn't been formatted - so we'll learn how to do that now.

The most basic formatting tools available to you are Bold, Italic and Underline, just like in a word processor. To apply these styles, surround the text with the appropriate tags - B, I or U - it's fairly obvious which is which. Here are some examples - note that I haven't included the P tags, which you of course need to put around any text:

In that last example you can see that I've used 2 formats at once - you could even use all three. It's good practice to close all the tags in reverse order to which you opened them - first in, last out.

Hex Colour Codes

Before we move on to more advanced formatting, I need to tell you about colours in HTML. To refer to any specific colour, you need to use its Hex code - a 6 character string preceeded by a # symbol. For the mathematicians among you, Hex is the base 16 number system, but I won't explain its inner workings here because, frankly, it's boring.

So how do you get the code? There are a number of ways - many graphics applications show you the code in their colour pickers - Paint Shop Pro is a prime example. HTML Editors or some standalone applications will convert colours for you, or you can do it manually.

To do this, find a Windows colour picker - like the one in Paint or the Display Control Panel. Open it up to display the entire palette and you should see the Red, Green and Blue values for the selected colour. Choose the colour you want, then take these numbers (between 0 and 255) in turn and convert them to Hex. You can do this in the Scientific mode of the Windows calculator.

You now should have 3, 2 character, Hex codes. Stick these together and add a # to the beginning and there you have it.

Here are some examples to get you started:

The Font Tag

Now we can start using the Font tag with those codes to really make an impact on your pages. The tag works using several attributes - extra information yu give the browser to customise the tag. The following examples should make things clearer:

<FONT FACE="Times New Roman">Changing the Font</FONT>
<FONT SIZE="+2">Changing the Size</FONT>
<FONT COLOR="#FF0000">Changing the Colour</FONT>

Changing the Font
Changing the Size
Changing the Colour

See how the attributes work now? Just put the name of the attribute, an = sign and then the value in quote marks. You can use as many attributes as you like in one tag, like this:

<FONT FACE="Times New Roman" SIZE="+2" COLOR="#FF0000">Lots of styles at once!</FONT>

Lots of styles at once!

Let me quickly tell you what to put for each attribute. FACE is the name of the font you want to use, spelt exactly as it appears in the Windows font system. You can only use fonts that are available on the site visitor's computer, so stick to common ones like Times, Arial and Helvetica (common on Macs). For SIZE you can either just put a number (1 to 6) to indicate an absolute size, or preferably use relative values like I've done, showing how much bigger or smaller than the default size the text should be. +3 is bigger than +1 which is bigger than -1. And for COLOR (note American spelling) you simply put the Hex code.

One final note on the FONT tag - it does not necessarily have to go within your P tags, so you can surround several paragraphs with a single FONT setting. You can also nest FONT tags within each other, as long as you remember to close them all in the right order.

Alignment

You may have noticed the one major type of formatting that I've not yet mentioned - text alignment. This is really easy - it's an attribute of the P tag, with the options LEFT (default), CENTER (American again) and RIGHT. For example:

<P ALIGN="CENTER">Center Aligned Text!</P>

Formatting with the BODY Tag

You can also apply formatting rules in the BODY tag of your page. It has several attributes which you can use:

All of these attributes just use normal Hex colour codes.

Formatting Your First Page

Let's go back to page we made in the last section and brighten it up. We'll ditch the H1 tags (these aren't used much anymore) and specify the formatting ourself, add some FONT tags and play with the BODY tag a bit. The only thing you won't be able to see are the link colours, as there are no links on the page.

<HTML>

<HEAD>
<TITLE>Welcome to my first page!</TITLE>
</HEAD>

<BODY TEXT="#008000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000" BGCOLOR="#FFF7D3">

<FONT FACE="Arial">

<P ALIGN="CENTER"><FONT SIZE="+3" COLOR="#FF0000"><B>Hello World!</B></FONT></P>

<P>Welcome to my very first web page. I've written the HTML myself!</P>

<P>Soon I'll know how to create <I>entire</I> pages.</P>

</FONT>

</BODY>
</HTML>

Click here to see the result. It's not a masterpiece and I'm pretty sure that the green doesn't go with the background, but it'll do for now. I'm sure you can be more imaginative - why not have a play with this page before moving on to the next section.