Romulus 2

x You are here: Home > Guides > Basic HTML


xMichael Price

Basic HTML

Part One | Part Two

Weaving a Web

Part Two: Basic Text

There are two main types of font in HTML: headings and body text (much like any other sort of document really). Both these styles use container tags, and I'll explain headings first:

Headings are often used (as the name suggests) for the titles at the top of pages. The confusing thing about fonts and headings is the way you size them. For headings, the biggest size is 1, and the smallest is 6. See below for an example, with source.

Stick this into a browser (with the surrounding template I showed you before) and you get this:

This is Heading size 1

This is Heading size 6

The header uses the <hx>....</hx> container. The x is the heading size you want to use. To reiterate, biggest is 1, smallest is 6.

You'll notice that when you terminate a header, the next part of your page automatically starts on a new line. Try fiddling with a few of these headings to see what sort of results you get.

Now for fonts, which work quite differently:

This is two sizes up This is font size 2

See the difference? Font sizes go in the opposite direction. And fonts can be sized absolutely or relatively. What this means is you can either specify a font size, or you can add or take away from the current size. In the above example, the first font change (size=+2) adds two to the current font size. So if the page is currently displayed in size 4, the new font would be size 6. Size 1 would become size 3, etc., etc. When a font tag is closed, the text is then displayed in the previous font. If you switch from font size 4 to size 6, when you close the size 6 font, the page would be displayed in font 4 again. Get it? Got it? Good.

Another difference is the lack of an auto line-break after a font change. Watch this:

The result?

R o l l e r c o a s t e r ! ! !

Er, neat, huh? Anyway, changing the size isn't all you can do with fonts. Watch:

Red text
Blue Arial text

The first one (in red) uses the color (yes, no "u") attribute. Using this (as shown above) you can change the colour of your text to any one of 16.7 million colours using hexadecimal values. For now though, stick to using real colour names like red, yellow, blue, green, black or white.

Another attribute is face, which you can use to change the typeface your text is displayed in on the page. However, only use common fonts like Arial or Verdana for this. Using an uncommon font could cause problems for any reader that doesn't have it. Naturally, you can combine the two by just including them both in the same tag (see my example above)

Bold, italic and underline are styles you can apply to your text. You should be getting the hang of container tags by now, so know this:

The containers for bold are <b>....</b>
The containers for italic are <i>....</i>
The containers for underline are <u>....</u>

Now, go forth! Write yourself a newspaper-style article complete with bold first paragraphs, headings, subheadings and italicised names. Good luck!


Back to Top


Views: [an error occurred while processing this directive]

Copyright © 1999-2002 Romulus 2. All rights reserved. Legal Notice / Privacy Policy.