PGTUTOR.COM: HTML tutor- Lesson 4

HTML tutor- Lesson 4

In this lesson we'll learn about the font tags. The font tag has been removed from HTML 4.01 and so definitely don't use it on your website.

Why devote the whole lesson to it then? As I said in chapter 2, I personally believe that it will make learning the "font part" of CSS much easier. In the future I will only say "This tag has been removed from HTML 4.01" and you should understand never to use it on your website.

The <font> tag itself alone won't do anyting.

<body>
<font>Hello Dear World!</font>
</body>

View your webpage here

However, the font tag does have three attributes associated with it: size, face, and color. Try the following. By the way, you should manually type these examples into notepad and not just copy them or just take a quick look at them. You won't be efficient at them until you physically practice them yourself. So yeah, type the following into notepad:

<body>
<font size="5">Hello</font> <font color="red">Dear</font>
<font face="impact">World!</font>
</body>

View your webpage here

The size attribute changes the size of the font. Not too surprising. There are seven values- 1 being the smallest and 7 being the biggest. Don't get this confused with the heading tag- heading tag has 6 values not 7 and size 6 is the smallest not biggest.

By the way, the 6 in <h6> is not an attribute. <h1> is a different tag from <h2> which is different from <h3> and so on.

In the color tag, you can either enter a color-name like red, purple, yellow etc. or a color-value like #cc66ff. Ignore the latter for now if you have no idea what hex codes or hex colors are.

In the face attribute you enter the face name like arial, times new roman etc. What happens if the visitor to your website say didn't have so and so font installed on their computer that you used on your website. This is important- they will see the default font.

How do you know what font the visitors have installed on their computer? You don't. So you avoid using a font that you had to download from the internet yourself or you give the customer a download link to the font as soon as they enter your website.

You can also set priority with font face. For example:

<body>
<font face="impact,verdana,arial black">
</body>

In this case if computer can't find impact, it looks for verdana, if no verdana is found, arial black is searched for, and if that fails too, the default font is used.

That's all I got to say about the font tag.

You can also use something called the typewriter or monospaced text.

<body>
<tt>Hello Dear World!</tt>
</body>

Default Text:

Hello Dear World!

Using the <tt> tag:

Hello Dear World!

<< BACK NEXT >>

PgTutor - The easy way to make a website ...

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

PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.

You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.