Learning to write a web page

 __   ____   _ 
|  | |    | | |
|__| |    | | |
     |____| | |
            |_|

Size and shape

 __   ____   _ 
|  | |    | | |
|__| |    | | |
     |____| | |
            |_|

The browser has a standard set of letters and windows (the 'defaults') ready, so that it can always display at least something when it is offered your .html file. But this might not be to your liking. You may want to stress a particular paragraph in your text by making the letters extra big, or you may prefer crazy letters over the almost boring 'Times' and 'Courier' lettering which most browsers use as default.

Font

First we'll deal with the size and shape of letters. We have to use a different word for 'letters', namely 'font'. That is the word the printing trade uses, and it is used for computers too.

There are two ways to change the size of the font: 'absolute' and 'relative'. An absolute font size is where you set the font to a specific size, of which there are seven (1 to 7), e.g. . The default value for most browser is 12 points (size 3), so these letters will be big. However, if somebody has reset the default for their browser to be 5 as standard already (because they can't see very well, or because they want to show a few people something on a screen all at the same time), and you make your important piece of text size="5" (thinking it will be big compared to the rest), it will come out just the same rather than bigger. The way round this, is to use a relative font size where you set the font as follows: . Now your special piece of text will come out 2 steps larger than the rest, whether the default is 3 or 5. You can also use negative numbers to change your font sizes: will make the font 2 sizes smaller than before. Remember to close your tags: will reset the font to the original size as soon as your special piece of text is finished.

Click

here

to have a play with font sizes, in the box below.

Font type

To change the shape of the letters, you change the font type, or rather the font face, as follows: . There are a lot of font faces available. You can find a list of them in various places. I usually peek in the 'Format'-'Font...' section of the menu at the top of a WordPad window. There is one important point to make: a font which works in your setup of computer/browser/etc., might not work in somebody else's. And when a browser cannot find your desired font, it will display your text in default font. So you might have to hunt around for a font which works. So far, I have managed to establish that Courier, Times, Helvetica and Tekton seem to work on just about any machine-browser-combination I could think of. Hardly exciting fonts, though.

Click

here

to see the mentioned font faces, in the box below.

Remember to close the tags!

Combining tags

A tag (and many others) may contain more than one 'parameter' (or rather attribute, as it is called). For example: ..... is as acceptable as ....... And it looks more sensible, too.

Bold and italic

You can put a stress on a piece of text by changing the colour, the size or the face of the font. But you might also want to make your letters fat, or make them lean a bit. This is called bold and italic. The tags for these are simple: and for bold, and and for italic. Some internet boffins claim that these are unjust ways of stressing a piece of text, and that you should use (which usually comes out bold) and (for emphasized, which usually comes out italic). Some browsers (but not many) actually make a difference in how they display these tags, so it is worth remembering. Sometimes you just want to make something fat and you will use , sometimes you will want to make it strong (here I used to show the (non-)difference).

Window shape and size

The shape and size of a browser window are, in principle, determined by the settings of the browser. Most PC-browsers have windows which have the shape of a horizontal rectangle filling just about the whole screen.

There are ways of altering this from inside your web page, but that is hardly ever a good idea. As long as you leave the browser to sort these things out, you can make your documents as big as you want. You will get scroll bars if your document is larger than the browser window. It is usually best to leave it at that. By the time you will want specific sizes and shapes for your windows, you will know what to do to make sure that your readers will see what you want, rather than a chopped-off version of your document which they can't do anything with.

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Scripts Publicising (meta tags) Bits and pieces

Course created by Maria Turkenburg