BACK
HTML for Dummies Chapter 3
(pretty things)
This page is devoted to prettying up (and uglifying) HTML! Most web-page authors seem to achieve the latter more frequently. You will learn how to italicise, embolden, clumsily colour, underline and perhaps even strikethrough text. Different fonts will be explored. (You already know how to change the font size). In addition, we look at aligning text on the page.

1. The above says it all

Well, almost. The bottom line is, use pretty things sparingly, or they end up looking as unappetizing as the above paragraph! The following table gives you some of the common things you (against your better judgement) might wish to do with HTML text:

Tags that pretty up text
Tag What it means
<i> Render text in italics
<b> Embolden something
<u> Underline some text
<strong> See the comment below
<em>
<s> strikethrough - Hardly ever used, except by us in the headers of all of these tutorial pages, heh.
<font face="Verdana, Helvetica"> Change the font. Note that this depends on fonts available on other peoples' machines - often limited. See how choices can be specified, separated by commas. Verdana (or Arial) are common fonts on Windoze-machines, the 'equivalent' on Macs is Helvetica.
<font size="4"> You know what this means. The default size on most browsers is 3. Play around from size 1 up to size 7. Avoid trying to get fancy with fractional font sizes or sizes above seven - it's an unusual browser that will make sense of them.
<h1>

A header

- continues until you use the </h1> closing tag.
<h5>
A much smaller header
- hardly worth the effort. Experiment with various values between 1 and 5.

If you look at the early texts on HTML, you'll see that the authors fervently encourage us to avoid using tags like <b> and <i> - they say you should use other constructs like <em> and <strong>. Almost everyone has (probably wisely) ignored this nonsense. The idea behind HTML was that the individual browser should render the text according to the preferences of the person who set up the browser - <strong> could mean whatever the reader wanted. This is silly, as most readers have neither the skill nor the inclination to philosophize about what <strong> should really mean. It also cocks things up for the website designer, who really wanted an italicised word over there, pretty please, if you don't mind. I hate tags like <strong> and <em>, but you decide. They're all there, making your browser slightly slower and more clumsy!

Be careful using <b> and <i> in combination. Some of the earlier browsers (at least on some machines) gave you tiny little bold italics when you combined them. In addition, always close the last tag first, that is say

<i><b>something</b></i>

and not:
<i><b>something</i></b>

Certain browsers behave unpredictably when you open tag (1) and then tag (2) and then inappropriately close tag (1) before you close tag (2). This applies to all tags. Be warned!

There is another tag. We hesitate to even mention it, it's so ugly. It's called the blink tag, and has two effects:

  • The text blinks irritatingly;
  • Anyone reading the text clutches his forehead and never returns to your page.
Avoid the blink tag.

More pretty stuff - this is fine print

We've already mentioned the <em> and <strong> tags (favoured by the cognoscenti). Other tags that we personally haven't found much use for are:

Minor tags
Tag What it means
<code> A sample of code, usually shown in an ugly Courier typeface
<kbd> "text to be typed in at the keyboard"
<samp> This is a text sample!
<dfn> a definition!
<cite> This is a citation!
<tt> teletype ie typewriter font - the spacing is the same for all letters. This is occasionally useful.
<pre> 
Pre-formatted
   text
   The spacing etc
   should be left as it is!
<big> Make the text a bit bigger
<small> Make things smaller
<strike> Our old friend strikethrough, in a different guise.

We generally avoid using the above, even though almost all browsers should cater for them.

Two most useful tags

Let's conclude our typographical fun with two useful tags. These are <sup> (with its closure </sup>) and <sub> with its closure. These allow you to create superscripts and subscripts.

Different browsers differ subtly. Ones created by microsoft tend to be a bit more primitive. Others allow nested superscripts, using different sized fonts for the different levels of nesting.

You decidewhich browser you prefer! .

(But remember that other users may not have your favourite, so try and write your code for everyone, and check it on a variety of browsers).
 

2. Coloured text - and more!

On the previous page you learnt how to colour (and avoid colouring) links. Here we find out how to colour text. As you suspected, to colour something red we simply say:


This is <font color="red">
red text
</font>

which will appear as:

This is red text.

In the above, we cheated to make things easier for you. There is a whole host of pre-defined colours in HTML but it's a good idea to understand colours in more detail. The first thing you need is to understand how hexadecimal notation works (The name hexadecimal comes from the Latin for 'sixteen' - we often abbreviate it to 'hex'). If you've not yet run screaming for the woods (don't, it's not necessary) the following box briefly explains 'hex' in letters of no more than two syllables (promise).


How HEX works
Have you ever thought why when we are counting, say sheep, we count up from none to nine, and then run out of new numbers, so we put in a one over on the left, follow it by a zero, and then count   1 0    1 1    1 2   1 3    and so on?

Clearly this is because we have ten fingers. Pretend for a moment that you were born with a rare disease that endowed you with sixteen fingers. You would then count

0, 1, 2, 3, .. 9, er-umph what next?

This is how hex works. But instead of going on er-umph what next, which is ugly, we carry on A, B, C, D, E, F. And then we have run out of fingers. So we put a one over on the left, follow it by a zero, (10) and then count 1-1 1-2 1-3 and so on up to 19, 1A, 1B, 1C, 1D, 1E and 1F. We go 20, 21, 22, .. 29, 2A, .. 2F, and so on.

Just to check that you've got the idea, what happens after we reach 99 ? Yep, you guessed it, we go 9A, 9B, .. 9F, A0, A1, A2 etc. And what do we find after FF ? Yes, 100, 101 and so on up to infinity.

Why you need to know hex
For many reasons, numbers that are used by machines can easily be shown as hex numbers. So easy is this that, in fact, the standard is in many cases to use hex! Most machines nowdays can show about 16 million colours. These colours are made up of two hundred and fifty six shades of red, 256 shades of green and 256 shades of blue. We know from very basic high-school physics that white light can be produced if we combine the same amounts of red, green and blue, so it won't surprise you to learn that (red=255, green=255 and blue=255) makes up the colour white.

Here comes the trick. If you followed our note on hex above, you may have worked out that hex FF is the same as plain old 255 (base ten). So a cute way of showing the colour white would then be:
red=FF green=FF blue=FF. In HTML, this is just:

#FFFFFF

The convention is that the first two hex digits tell us about how much red there is, the next two, how much green, and the last two, the amount of blue.

You can also work out why we only count up to 255 when we said that the machines could show 256 colours - we start at zero! And knowing this you can work out what black is:

#000000

Why all this fuss?
Think about it - you can now colour text any one of over sixteen million distinct colours!

The 216-colour cube

Now that you've learnt how to describe millions of colours, you will be distressed to learn that you should really only use just over two hundred of these! In fact, exactly two hundred and sixteen! This is because all web-browsers should be guaranteed to accurately represent these basic colours. An other colours, weeeelll .. they can do more-or-less what they want! What they will often do is to dither the colours. No, we don't mean they are indecisive. The browser is likely to 'make up' the colour it thinks you want, often with hideously clashing results!

If you want your web-pages to be colour fast, you unfortunately have to adhere to the basic 216 colours. Needless to say, almost everyone has ignored this. You just have to look at their web pages. For example, they might have a page with sand as a background. They want to put a picture of say a strawberry on the page in such a way that it looks as if the strawberry is indenting the sand of the page. So they carefully take that same sandy background and make up the strawberry picture. Voila? Not quite, for there is no guarantee that the colours in the page background will be represented in quite the same way as the colours in the picture of the strawberry, so my browser shows the strawberry indenting a slightly differently coloured square patch of sand. The effect is ruined.

Most picture-editing programs leave you helpless when it comes to 216-colour fastness. Just for the record, however, now that you understand hex, you can make the colours at will. Just add 33 hex. Every time. Valid colours are thus, for example, #000000, #330033, #FFCC33, #9966FF. If it doesn't contain 00, 33, 66, 99, CC, or FF, it isn't colour-fast.

Colouring Things
Tag What it means
<font color="#FF0000"> Note that confused Americans spell colour differently. You will have to to, if you want to write HTML. Yes, FF0000 is red.
<body bgcolor="#CCCCFF"> The blueish coloured background of this web page. Must be part of the main <body tag.

Colour Tables

If you're interested, here are some colour tables:

  1. First, the 216 colour-fast colours;

  2. Next, alphabetical colour names, and also, in the same table, colours sorted by grey-scale intensity (may be useful)!

3. Aligning things

You already know that <br> moves the text of your web page to a new line. Try and guess what the <p> tag does?

Yep. It moves to a new paragraph.

There.

There are lots of other ways of moving text around, aligning things and so on. Most of them don't work very well. The reason for this is that when HTML was designed, the authors more-or-less forgot about the most important component of text   - whitespace -   I mean, really forgot! This has crippled everyone subsequently.

Let's say you want to do something really simple - leave two spaces between two words. You want something like:


An extra  gap  between words

Note how the word 'gap' above has some whitespace around it. Unfortunately, to do the above we have to type in the following:


An extra &nbsp;gap&nbsp; between words

Not exactly elegant, is it? There are many characters that can be represented in HTML by an & (ampersand) followed by one or more letters and then a semi-colon, but why, oh why did they choose &nbsp; to represent a space?

Here are some HTML characters that you should type in using an ampersand prefix (or be jolly careful if you don't):

Putting in more space is even more trying. Okay, you can simply have multiple &nbsp;'s, but they become more and more tedious both in the reading and in the typing. In addition, the width of a space is not constant - it depends on both the face and font size you are using!

In later chapters we will discover many ways to overcome the hostile way HTML handles 'white space'. One of the best is to use tables. But first things first - here is a list of ways that you can align text:

Alignment (heh)
Tag What it means
<div align="left"> Left-align everything up to the </div> tag.
<div align="right"> Likewise
<div align="center"> Note the American spelling of centre.
<div align="justify"> Justify text - this can be fairly pretty. Try it!
<center> (See the note below)
<blockquote> Used to indent a section of text. Rather clumsy. (Trick: you can cheat and use <ul> with </ul> to achieve much the same end, with less typing. This is far from kosher).
<address> (Hardly ever) used as a container for the address of the person who wrote the page, or whatever.
<nobr> This prevents the browser from wrapping the text when the right margin is reached. Only use this if you want very very very very very very very very very very very wide pages! (That will confuse everyone).
<wbr> This is used to 'optionally' wrap at a point in a line. It often doesn't work well or predictably, so avoid it!

Note that there are many different instructions for aligning things. Don't become confused. It's perhaps best (and one of the more sane recommendations of the W3 consortium) that you use the <div> tag a lot, and avoid the others if you can. (Later when we come to discuss tables I'll show you a few alignment tags that I simply cannot resist).

ALWAYS remember to close off your tags. I must be honest that I never remember to close off my <p> paragraph tags - mea culpa, mea maxima culpa, he cried, smiting his breast mightily.

4. Putting it together..

Although you are by now bored, try the following:


<html>
<head>
<title>Page Three Demo</title> </head>
<body>
<div align="right">
<h1> A header </h1>
This too is right-aligned
</div>
<font color="#FF0000">
This is all in red </font> but not this!
</body>
</html>

Having uglied-down your page, let's find out how to mess things up even further with images!
Web page author jvs@anaesthetist.com Date of last update: 2001/9/29