Copyright Michael Karbo, Denmark, Europe.
Chapter 7. Fonts
Notice in Figure 18 that the font is probably Times. Can you see that? We need to change the font.
1. This is important: Place the cursor right after the <BODY> code. If there is not enough room then insert an empty line.
2. Now you need to find the clip named BASEFONT in the HTML library. That is not a quick tag, so you need to go higher up in the list. Double click here:
3. The code does not enter the document directly; in stead the clip opens a dialog box, where you can select font, size and color:
4. Click on the small arrow to the right of the top field (Font name). Select Arial by clicking here:
5. Then click OK. Now the code is inserted in the document:
6. Save the document and test the page in the browser. You can clearly see a new font in the home page.
7. Close all open documents with the keyboard shortcut Control+Shift+F4, and close NoteTab (with Alt+F4).
How does BASEFONT work?
BASEFONT is a code that is typically used in the top of the document. It works ”downwards” so to speak. All text following the code will be formatted from that. If you place a new BASEFONT code further down in the document, then it takes control – and works until you might enter another code etc.
Let us look closer at the code content. You can see that it actually defines more than one font, since the parameter is named:
FACE="Arial, Helvetica, Sans Serif"
The three fonts are actually identical, but they are used on different types of computers. On pc’s with Windows it is called Arial; on other computers it is called Helvetica – etc.
As mentioned, BASEFONT can indicate both font, -size and -color. That is all done with the same code. As an example I can in the BASEFONT dialog box select like this:
That results in this code. The line break that you see in the code is of no significance:
Figure 19. The BASEFONT code with additional parameters to control the font.
The three parameters
The code BASEFONT then has three parameters:
· FACE="Arial, Helvetica, Sans Serif"
We have described the font before. The size is relative, and that is quite unique for HTML. Here it is set to +2, which is larger than +1 and less than +3! That happens to be the essense of relative sizes. When I test this page in the browser, it turns out that the size only governs the body text and not the heading; they do not change size.
I also selected a green color for the text. That is indicated by COLOR="#008000". You can also write COLOR="green", that works in modern browsers.
The data logical value #008000 is understood by all computers and browsers, since the 6 digits are actually three pairs, which refer to the colors red, green, and blue. Here the green value is set at 80. But you will see more about that later in the book.
Relatively few font sizes
If you have worked with fonts in word processing, you will be used to absolute sizes that are measured in points. Here you see a clip from Word, which I often use:
Within regular HTML you can only specify a few font sizes. The HTML codes like BASEFONT that we experiment with here, can only handle font sizes between 1 and 7. Size 3 is the ”normal size”, that is the one use in the body text. In the example in the previous paragraph I inserted the value two.
You can experiment with this yourself. Insert a new BASEFONT code for each line (copy it). Set font size one step down for each text line, so the result looks like this:
Figure 20. There are seven different font sizes for the body text
It is important to understand that the local browser forms the font on the screen. You could for example easily imagine a browser that does not respond to the SIZE=”” parameter at all, so all texts are shown in the same size.
The browser exercises a lot of ”power” over the actual showing of the home page. The home page author can not always control the final formatting the browser does (at least in regular HTML).
How do headings work?
We started this chapter by writing four headings each with their own code. You saw the result in Figure 18 on page 38.
Again you need to be aware that the browser controls the final appearance when you use headings. By using internet Explorer the page will appear as shown in the figure. Another browser could in principle show the page quite differently. Besides the individual user can also select browser settings that dictate the result of the heading codes.
In Figure 18 you see an example that the heading levels 1 to 4 all result in bold print. Heading 1 level gives a rather large print. Heading 2 is slightly smaller and 3 even smaller. With Heading 4 the print is the same size as normal print. Can you see that?
Headings are an excellent formatting tool. But if you want to control font type and size and thus take control of the browsers, then you need to use CSS (Cascading Style Sheets). This is a technique that breaks the traditional HTML limitations. You can for example ”lock” the font sizes with CSS, so neither browser settings or anything else can change them. We will get to that later in the book.