Tags
So, we are looking at tags, that's the < and > things in HTML codes, and what goes between them. A basic rule is what you open you must close. For example let's place a line of code on your page that centers everything. By the way, not matter where you come from, 'spell in American' for HTML coding.

Examples include the word colour and color. You MUST use the American spelling of the word otherwise it won't work! Therefore you type center not centre, and so on. There are no spelling mistakes on this page (I hope!), so use the words I do.

Okay, back to the example. If you want to center align text you must open the command with < followed by the command center, followed by the closing tag, >. So it looks like this:

After this command you place the text. You MUST show a 'close' command with a forward slash / before the center word so it looks like this:

If you don't close the centering command then everything following the <center> will be centered too! Yuk! The same is true of the right and left alignment commands. This time though there is a bit more to add.

<center> can also be written as <div align="center">, followed by </div> and perhaps we should use that as right and left alignments are written this way too. So, if you want left aligned text (or right) then the code should look like this:

<div align="left">, or <div align="right">. To close either the left, right or center 'div' tag you must use </div>

When you write text you will want to break up the lines as you see in a book. To do this there are a number of tags to help you, including <BR> and <P>. The <BR> tag is merely a line break and can be likened to a carriage return on a typewriter, the text stops and continues on the next line. The paragraph (<P>) tag add another blank line before continuing with the text.

Adding Emphasis
You can also format the text so that it appears to be:

<B>bolder</B>

<U>underlined</U>

<I>in italics</I>

_{_subscripted}

^{^{superscripted}}

You must remember to close the command! For example a <i>sentence in italics would be written like this</i>. There are others, but we are keeping to the basic commands for the time being. Throughout this website I use BOLD a lot to emphasise statements and examples.

Bullet Points
Another useful item when you are writing a text page is to have bullet points when you are using a list. Let's make a grocery list with bullet points, using unordered items. By 'unordered' I mean that the list items do not have to be in a particular order and are not sequentially numbered, to write a numbered (ordered) list see below.

Grocery List
• Bread
• Butter
• Cheese
• Milk

So how is it done? Let's look at the coding first and then take it apart.

<ul>
<lh><b>Grocery List</b></lh>
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
<li>Milk</li>
</ul>

Line one (<ul>) opens the 'Unordered List' element and tells the browser that a bulleted list follows. Line two is not really required so it can be left out, and is the list heading (in this case also in bold text). Line three, four, five and six contains the list items and are all enclosed in an opening tag <li> and a closing tag </li>. Finally there is the closing of the unordered list (<ul>) - and that's it.

You can specify what sort of bullet point you want if you don't use the default black dot. For example, instead of writing just <ul>, you can write <ul type="square"> which now makes your shopping list look like this:

Grocery List
• Bread
• Butter
• Cheese
• Milk

...or a white circle (<ul type="circle">)

Grocery List
• Bread
• Butter
• Cheese
• Milk

Ordered Lists have the same 'shopping list' items but in a sequential order that can be numbered using Arabic numerals, capital letters, small letters, large Roman numerals and finally small Roman numerals. For example:

The coding is easy to use and all you have to do is change the first line in each case to get a different look. The coding for the first list is:

<ol type="1">
<li>Bread</li>
<li>Butter</li>
<li<Cheese</li>
<li>Milk</li>
</ol>

You will have noticed that the opening line has changed from <ul> (unordered list) to <ol> (ordered list), and it includes the 'type=...'. A numbered list is type 1, capital letters is type A, small letters is type a, large Roman numerals is type I, and finally small Roman numerals is type i.

You can include (for example) large Roman numerals with small Roman numerals for sub-lists. This is called 'nesting'. Here is the list again with a couple of items added in a sub-list:

1. Bread
2. Butter
3. Cheese
1. Edam
2. Cheddar
4. Milk

...and the coding looks like this:

<ol type="I">
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
<ol type="i">
<li>Edam</li>
<li>Cheddar</li></ol>
<li>Milk</li>
</ol>

Colours / Colors
Okay so far? Good! That's the alignments out of the way. Let's look at colours - sorry, colors. Colors can be defined on webpages by name <font color="black">, or by Hexadecimal value <font color="#000000">. There is a third method, called 'RGB color', which means Red Green Blue and is another way of expressing how the three primary colors are mixed. I prefer to use Hexadecimal.

Using the name of a color is okay if you stick more or less to the primary colors. Both Netscape and Explorer recognise over 200 color 'names', but not everyone uses the two primary browsers. Let's say you want to use red. If you note the source code for this page you will notice that I use this extensively. However, if I wanted a subtle shade of red then typing this in will not work. Here we would use the Hexadecimal code and it would look like this, the code is <font color="#ff0066">. Note that to be absolutely accurate you should put the hash mark (#) before the code.

Don't forget the close command! After telling the browser which color to use, you must tell it to stop using it as well. As with the </center> tag, you must use the </font>.

Using a Hexadecimal code ensures there is no confusion between browser types, it works out the code and displays it correctly. But what does the code mean?

The code should be split into three. Let's take the subtle red again (#ff0066), and split it into FF - 00 - 66. The FF, means the color is 'full on' in the RGB scale, so red is fully on. The second set (green) - 00, is fully 'off', and shows none at all. Finally there is the third set (blue) - 66 which is about half (ish) visible. Mix these colors on your palate and you end up with the shade of red.

Let's change to code slightly so we end up with something looking like this.. All I did was change the first two digits (FF) to 66, so the code now read <font color="#660066">. Note the difference? By changing the red input down a bit, the color changed to a much darker red.

Want to see a huge long set of codes for the Hexadecimals? Your HTML Editor should have all the codes as well, but it's worth looking anyway. Click here to look at over 180 colours, including the Hexadecimal codes for you to copy.

The next page deals with hyperlinks.