Formatting

OK, so that last page wasn't very exciting. 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 we haven't included the P tags, which you need to put around any text:

In that last example you can see that we used 2 formats at once - you could use all three. It's good practice to close all the tags in reverse order to which you opened them - first in, last out as it where. You should never overlap tags and making sure you close them in this way makes sure you never do that.
So <B>Bold<I>Italic Bold</B>overlap</I> is incorrect.
So <B>Bold<I>Italic Bold</I>no overlap</B> is correct.

Hex Colour Codes

Before we move on to more advanced formatting, we should tell you about colours in HTML. To refer to any specific colour, you need to use its Hexadecimal code - a 6 character string preceded by a # symbol. For the mathematicians among you, Hex is the base 16 number system, and relates to the RGB colour value. (RGB usually refers to a colour using values for Red, Green and Blue from 0-255). There is a list of web safe colours here. When we say web safe - what we mean is the colours which will display on all current browsers. Some browsers will interpret other colours slightly differently, so these are the ones we know work exactly.

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 good 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 calculator (Windows or Mac).

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

So if you wanted Black the RGB value is 0,0,0 i.e. no red, no green or blue. The hex for 0 is 00 so you end up with 000000 to represent 0,0,0.

Here are some examples to get you started:

The full list is here.

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 you 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? 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!

FACE is the name of the font you want to use, spelt exactly as it appears in the Windows or Mac font system. You can only use fonts that are available on the site visitor's computer, so stay with common ones like Times, Arial and Helvetica (common on Macs). It's usually good to list a couple in case your first choice is not available on their computer.
For SIZE you can either use a number (1 to 6) to indicate an absolute size, or use relative values like we'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 (NB: American spelling) you simply put the Hex code. Most browsers will understand if you specify a Colour and not a Color, but some may not.

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 we've not yet mentioned - text alignment. This is really easy - it's an attribute of the P tag, with the options LEFT (default), CENTER (NB: American spelling) and RIGHT. For example:

<P ALIGN="CENTER">Centre 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 remove the H1 tags and specify the formatting, 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 yet.

<HTML>

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

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

<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>

You can use the form below to test this code.

Use the form above to see the code or
click here to see the result. It's not a masterpiece, but it will do for now. I'm sure you can be more imaginative - why not have a play with this page by changing the colours in the form above and seeing the results before moving on to the next section.

Move onto the next section Quick Essentials