Now I guess is a good time to yap a bit about syntax. You'll notice here and there I use quotation marks. They are important. Whenever you have an attribute="value", the value should really be in quotes. It's a good habit to get into.

You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than (>) sign . Someday we may be separated from this kind of coding, but for now we just have to be careful.

Also, regarding case, HTML is largely case INsensitive. You could just as well use <FONT> instead of <font>. However, for a couple reasons, one being it's easier, it's a fine idea to keep everything lower case.

All right, back to the fun stuff...

A handy way to make big or small text is the big tag and the small tag.

<body>
<big>Something</big> really <small>cool</small>
</body>
Something really cool

big bumps the text up one size, small bumps it down one size.

You can change the font color if you like.

<body>
Something really <font color="#ff0000">cool</font>
</body>
Something really cool

We can, of course use more than one attribute in a <font> tag...

<body>
Something really <font color="#ff0000" face="arial" size="7">cool</font>
</body>
Something really cool

Oh boy we're on a roll now!

<body bgcolor="#ccffcc">
Something really <u><i><b><font color="#ff0000" face="arial" size="7">cool</font></b></i></u>
</body>
Something really cool

I feel the need to point out once again that multiple tags should be nested...

Nesting example 1 - <tag3><tag2><tag1>Hooha!</tag1></tag2></tag3>

In most instances, it doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as...

Nesting example 2 - <tag2><tag1><tag3>Hooha!</tag3></tag1></tag2>

The fastest way to confuse the browser, not to mention yourself is to overlap the tags...

Nesting example 3 - <tag3><tag2><tag1>Hooha!</tag3></tag1></tag2>

(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)

<< BACK NEXT >>
So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD