Tutorials - HTML - Lesson 3
Before you start worrying about fonts and colours (that's in a minute!)
there are some basics of formatting your page.
Step 3 - Formatting your Page
The one thing everyone seems to do is forget to set a background colour
to the page, and it's so easy, look:
<html>
<head>
<title>My first Web Page</title>
</head>
<body bgcolor="#FFFFFF">
My page content here
</body>
</html>
See below for an explanation of what the "#FFFFFF" means, all
you need to remember is to set the colour to that of your choice!
The first way to format text is to use paragraphs which is the way that
this page is set up. A paragraph can be started using the <p>
tag and finished with the </p>tag.
This gives the equivalent of 2 lines between paragraphs and makes the page
look nice and even. "But what if I only want one line between
paragraphs" I hear you cry! Simple, you use the <br>
tag which starts a line break. This is an odd tag as it doesn't
require a closing </br> tag.
Try out the following example to see the difference.
<html>
<head>
<title>My first Web Page - Text Formatting</title>
</head>
<body bgcolor="#FFFFFF">
<p>My teacher always told me to use paragraphs</p>
<p>I wonder whether she was right or not<br>
I don't think she was you know!<br>
No She really wasn't!
</body>
</html>
Note that paragraph containing the first <br>
tag does not contain the closing </p>
tag. If we were to include this, the browser would automatically
force a new paragraph (i.e. two line spaces) then add the line break,
giving 3 lines space in total. Got that? Right, it's time to change the
font!
Fonts are changed using the <font>
tag. It's important to note that you should try to use standard fonts on
your web pages, if you use a non-standard font that your visitors don't
have installed they won't see it displayed. If you have to use a
non-standard font then make the text an image or provide a link to
download the font. Right, lecture over let's add a font to the text above:
<html>
<head>
<title>My first Web Page - Text Formatting</title>
</head>
<body bgcolor="#FFFFFF">
<p><font face="comic sans ms">My teacher always
told me to use paragraphs</p>
<p>I wonder whether she was right or not<br>
I don't think she was you know!<br>
No She really wasn't!
</font>
</body>
</html>
If you run the example above you will see that the font face has
changed to look something like this.
Nifty huh? If you want to change the size and colour of the font you
simply add to the font tags:
<html>
<head>
<title>My first Web Page - Text Formatting</title>
</head>
<body bgcolor="#FFFFFF">
<p><font face="comic sans ms" size="3"
color="#C0C0C0">My teacher always told me to use
paragraphs</p>
<p>I wonder whether she was right or not<br>
I don't think she was you know!<br>
No She really wasn't!
</font>
</body>
</html>
Which should give you
something like this. Have a mess about with various fonts, sizes
and colours - remember to use standard fonts though! These include Arial,
Comic Sans MS, Verdana, Times, Trebuchet MS. Have a look on a word
processing program for a list of more fonts. The letter "3" in
the font size portion of the tag refers to the Number of points the font
is, the equivalents are as follows:
1 - 8pt
2 - 10pt
3 - 12pt
4 - 14pt
etc...
Note the the colour is six digits, and a mixture of numbers and letters
preceded by a "#". This is called hexadecimal format and whilst
some colours can be referenced by calling them by proper name such as
"black", "white", "red" etc. the Hexadecimal
format gives us a wider range of colours. Have a look at Link here for
more Hexadecimal codes. Right then, onto Step
4 - More Text formatting!
back
| 
