|
Weaving a Web
Part Two: Basic Text
Fonts
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)
Styles
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!
|
xMichael
Price