Font tags (attributes: face, size, color).

Hello students, welcome to Kwickprep. Your web page shows every word in the same plain style. How can you change the font, size and colour? Today we will learn the font tag and its three attributes: face, size and color.

First, two terms. A tag is an HTML command written inside angle brackets, like the bold tag. Most tags come in pairs: an opening tag, and a closing tag with a slash. An attribute gives extra details about a tag, and it goes inside the opening tag. It is written as a name, an equals sign, and a value in double quotes.

The font tag changes how the text inside it looks. It opens with font in angle brackets, and closes with slash font. Alone, it changes nothing. We need attributes to tell it what to change.

The font tag has three attributes. Face changes the font type, like Arial. Size changes how big the text is, using a number from one to seven. Color changes the colour of the text, using a colour name or a code.

The face attribute sets the font type. Here, font face equals Arial shows Hello in Arial. You can give a list of fonts separated by commas. The browser uses the first font that the computer has, so if Verdana is missing, it uses Arial.

The size attribute takes a number from one to seven. One is the smallest size. Three is the default, which means the normal size used when you give no size. Seven is the largest. You can also write plus two, which means two steps bigger than normal, so it becomes five.

Here are three font tags with different sizes. Size one shows the word Small in tiny letters. Size three shows Normal at the default size. Size seven shows Big in the largest letters. Notice that HTML sizes are levels, not points like in a word processor.

The color attribute sets the text colour. Note the American spelling, without the letter you. You can use a colour name, like red. Or you can use a hex code, which starts with a hash sign followed by six characters. Here, hash zero zero eight zero zero zero is green.

A hex code is made of numbers and letters, in three pairs for red, green and blue. Hash F F zero zero zero zero is full red. Hash zero zero F F zero zero is bright green, called lime. Hash zero zero zero zero F F is full blue. All zeros make black. All F's make white.

Now let us use all three attributes in one tag. Inside the body, the font tag has face equals Arial, size equals five and color equals blue. Attributes are separated by spaces, and their order does not matter. The browser shows Kwickprep Notes in blue Arial letters, bigger than normal.

Watch out for four common mistakes. If you forget the closing slash font tag, the style spreads to all the text after it. Writing the British spelling, colour, does not work, because the attribute is spelled color. A size bigger than seven is simply shown as seven. Always put the values inside double quotes, to keep your code clean.

One important fact. The font tag is old, and it is not supported in the newest version, H T M L five. Modern websites use CSS, for example style equals color colon red. But browsers still show font tags correctly, and your syllabus asks for it, so learn it well.

Pause and predict. What does font size equals plus four show? Normal size is three, and three plus four is seven. So the text shows at size seven, the largest.

Let us revise what we learned today. The font tag changes how the text inside it looks. Face sets the font type, and can list backup fonts. Size goes from one to seven, the default is three, and plus two means five. Color takes a name like red, or a hex code like hash F F zero zero zero zero. Remember, the font tag is not supported in H T M L five, and modern pages use CSS.