Formatting text

back to index

Theory:

By default, web pages use a predetermined type of font, in a predetermined size and colour.

This is the default font; it is called "Times New Roman"; the predetermined size is 3, and the predetermined colour is black.

The predermined font sizes range from 1 (the smallest) to 7 (the biggest).
You can choose any colour you like using the RGB colour code.
You can see the fonts available in your computer looking in the "C:\WINDOWS\Fonts" folder.

Below are the main codes that you can use to format text.

	This is the default type.
<b>	This code means "bold".
<i>	*This code means "italics"*.
<u>	*This code means "underline"*.
</b></i></u>	These codes finish the text attributes.

<font face="Arial">	This code starts a new font - Arial.
</font>	This code ends the new font type.

<font color="#FF0000">	This code starts a red font.
</font>	This code ends new new font colour.

<font size="7">	This code uses the biggest font size (7).
<font size="1">	This code uses the smallest font size (1).

<font style="background: #FFFF00; font-family: Comic Sans MS; font-size:15">	This code establishes the background colour, font and font size (in pixels).
</font>	This code finishes using the special style and uses the default font.

Extra help:

You can use the <center> and </center> codes (be careful with the American spelling!) to centre the titles in the middle of the page.
You can use the nbsp; code to leave a blank space.
You can use the <hr> code to draw a horizontal line.

Remember you have more information about html codes in our html crib. For example, here is more information about horizontal lines.

Practice:

Use your web browser to print the Theory section of this page. You can use that printed sheet for reference.

Download the image on the right (mammals.gif) to your computer (right-click on it and select "save image"). Your task is to write a webpage as similar as possible to this screenshot.

Create a file called "mammals.htm".

Open "mammals.htm" with Notepad++.

Go to this text about mammals and copy all the information.

Paste the text into the mammals.htm file.

Download animals.zip, a compressed file with all the necessary images.

Unzip animals.zip in the folder where mammals.htm is.

Use Notepad++ to add all the necessary codes in mammals.htm to make it look as similar as possible to mammals.gif.

Save your mammals.htm file and e-mail it to your teacher (you do not need to send the images).

JJCC