HTML tutorial by Eni.

Lesson 3

Fiddling the text

A lot of you will already be able to play with text from LJ. The tags for a lot of basic ways to make text exciting are really quite intuitive.

Make a new html file. You could just use one of the ones you've already made and clear out the content, but it's good practice to get used to starting and ending with <html> and so on.

<html>
<head>
<title>Text editing</title>
</head>
<body>

<i>This should be italic</i> <br>
<b>This should be bold</b> <br>
<u>This should be underlined</u> <br>
<s>This should have a strike through it</s> <br>

</body>
</html>

Try it. See what happens. If one of them isn't displaying right, check that you remembered to close each tag.

Fonts can be adjusted more precisely by using the "font" tag. Here's an example: <font color="purple" face="garamond" size="8">Now text can get very fancy!</font>

These three parameters can be in any order, and you don't have to specify all three each time.

You can specify colours in one of two ways. You can use the HTML colour name, like "purple" or "powderblue". These are all one word, and should really be encased in quotes so the browser knows that's exactly what you want. Alternatively, you can look up the HTML colour HEX code. This is a # followed by six letters or numbers. Each pair or letters or numbers is specifying the exact amount of red, green and blue respectively.

This is a better way to do it if you can, as some older browsers can only cope with the eight or so most basic colour names.

This is my own preferred resource for standard colour names and HEX codes.

As seen in the example, here is where you can specify a font as well. Remember, just because your computer has a certain font does not mean the person viewing your webpage has it installed on your computer! A page like this should give you a fair idea of what you can assume everyone else has.

A font name should always be encased in quotes. This is important, as if you specify <font face=times new roman color=#666666>, the browser will assume you want it to use a font called "times". If it doesn't find "times", it will default back to something really boring, depending on its own settings. So... <font face="times new roman"> tells it that "times new roman" is the name it's looking for.

The default size for a webpage is decided by the browser and machine settings, so if you don't specify a font size, everyone will see it in their "normal" size. If you want to increase or decrease the size above or below normal, you can do it with <font size="+2"> and <font size="-3"> and so on. This is probably easiest, really, as then everything is scaled in relation to the "normal" body text in your document. A visually impaired user who has increased the default font size will see everything relatively bigger, whilst someone with a whacko screen resolution who has chosen to decrease their font size down unusually small won't be frightened out of their seat by your giant text!

 

On to lesson 4...