HTML: Text
Ok, so we've talked about the basics and we've looked at the head and body sections of your page. Now your page needs some content.
Type in whatever text it is you want on the page. Maybe you're writing about your family, pets or hobbies. Preview the page in your browser.
Hmmm..... not very attractive, is it?
Even though you've got your backgrounds and your basic font and link colours, there's something about it that just isn't right. What can it be?
The Font.
If you know how to type a letter on a computer, chances are you know how to format your font. HTML isn't any different to selecting a font from the drop-down menu in MS Word, except that you need to do it with code instead of button clicks!
The default MS font is Times New Roman, size 12. It isn't the prettiest of fonts. When it comes to web-authoring, most prefer to use a sans-serif font like Arial, Tahoma or Verdana (which I use), at about font size 10. There's not much difference between them and they are easy to read on a page. To change the font you use the <FONT> tag.
Here's the code to change your font:
<FONT FACE="Verdana,Arial">
The reason why I put two font names in the tag, separated by a comma is because some of your visitor's browsers may not have the Verdana font. If they don't have that they will see the default font (Times New Roman) unless a second font is specified. To prevent users from seeing the default font, I have put the Arial font as my backup choice of font. Most users will have one of the two fonts on their computer, so they probably won't see the atrocity that is Times New Roman.
Don't ever use Script Fonts on your pages! People often fall into the trap of thinking that because they look like handwriting, they make the pages more personal. But they don't. They're hard to read and look amateurish and immature. The best way you can make your pages personal to your audience is to make them as easy to read, navigate and understand as possible, whilst making them stylish and attractive to look at too. Script fonts also vary from computer to computer and what looks good on your computer may look completely awful on another!
Now, in the Head and Body tutorial, I showed you how to set the default colour for your text. Here's the code to remind you:
<body bgcolor="#CCFFFF" text="#0099FF">
Along with the new font formatting, this gives us:
|
This |
But if you want to change the colour of your text mid sentence then you're going to need to know the next bit of code to insert into your <FONT> tag:
<FONT FACE="Verdana,Arial" COLOR="#FF00FF">
Now we have:
|
This |
Awww! Pretty! Now we want it a different size:
<FONT FACE="Verdana,Arial" COLOR="#FF00FF" SIZE="5">
This gives us:
|
This |
The font sizes can be written as their actual font sizes (ie. 6,8,10,12,14 etc), or as their HTML values 1 - 7. The table below shows their relative values and sizes:
| Font (pt) | HTML |
| 8 | 1 |
| 10 | 2 |
| 12 | 3 |
| 14 | 4 |
| 18 | 5 |
| 24 | 6 |
| 36 | 7 |
So, what you do now is write the code, write the text you want to be formatted in that particular colour, size and font, then close the code by typing </FONT>. You do this whenever you want a piece of text to stop being a particular colour, font or size. Here's an example:
I want <FONT FACE="Verdana,Arial" COLOR="#FF00FF" SIZE="5">this text to be larger</FONT> than this.
Here it is:
|
I want this text to be larger than this. |
The attributes within the <FONT> tag can also be used independently of each other. You don't have to change the font face, colour and size all together. Maybe you just want to change the colour, font or size. In which case you can just type this:
<FONT FACE="Arial">Text</FONT>
To get this:
|
Text |
Or this:
<FONT COLOR="#FF00FF">Text</FONT>
To get this:
|
Text |
Or this:
<FONT SIZE="4">Text</FONT>
To get this:
|
Text |
Using CSS, you can even change the default font face, size and colour. See the later tutorials for more information.
Some more text
effects that are commonly used are Bold Text, Underlined Text, Italic
Text and Strikethrough Text. These are single-letter tags that
are extremely easy to use:
Type this:
<B>Text</B>
To get this:
|
Text |
Or this:
<U>Text</U>
To get this:
|
Text |
Or this:
<I>Text</I>
To get this:
|
Text |
Or this:
<S>Text</S>
To get this:
|
|
Just remember to close every tag when you've finished formatting the text you want to or else it will carry on until the end of the document!!! There's nothing worse than a page where all the text is crossed out or italic or underlined because the author forgot to close their tags!
More text formatting tags can be found in the directory.
