In chapter 2 we learned how to change the colour of text. There is a lot more you can do with text. The majority of this chapter will be about how to change the appearance of text. At the end we will talk a little about how to position text, but only a little because we look more closely at positioning text and graphics in chapter 6.
Probably the first thing you will want on your page is a nice big title like the one on the top of this page. The next example shows how this is done.
|
<HTML> <HEAD> <TITLE>Stuff with text.</TITLE> </HEAD> <BODY>
<H1> A Title !! </H1><BR>
</BODY> |
The only bit of the example we are interested in is the middle bit (it should be highlighted in blue but not all browsers will see that). This introduces us to two new tags. I'll explain <BR> first because it's easy. All it does is tell the browser to go onto the next line, it's just the return or carriage return tag. If you look at the example you should see six different titles each on a different line. <BR> is what causes each to be on a separate line. What makes them all different sizes is the <H1> to <H6> part. H stands for header (I think), the number is the size and ranges from 1 to 6, 1 being biggest and 6 being smallest. The <H1> tag says a header size one starts here and the </H1> tag says that that header ends here.
Bold, Italic and Underlined writing.
To make writing bold, italic or underlined is very easy, we use the <B>, <I> and <U> tag. This example should make it clear.
|
<HTML> <HEAD> <TITLE>Stuff with text.</TITLE> </HEAD> <BODY>
This is some normal text,
</BODY> |
This should not be very hard to get your head round but it is easy to forget so you may have to refer back to this chapter. One thing to notice about this example is that although in our file it is all on different lines, when you view the example it is all on one line. This is because we have not used the <BR> tag. The browser ignores returns, and any spaces more than one. The only way you can put a return in is to use the <BR> tag.
If you want to put a list of something on your page like a list of things native to Australia and make it look like this:
|
<HTML> <HEAD> <TITLE>Stuff with text.</TITLE> </HEAD> <BODY>
<UL>
</BODY> |
Here are a few things you can do with text. I've never used any of them but they are there if you want
them.
You can make it look like this, by using the <STRIKE> tag. Remember to
use the </STRIKE> tag or your whole page will look crossed out.
Or, you can make it look like this, by using the <SUP> tag.
Or, you can make it look like this, by using the <SMALL>
If I was you, I'd experiment a little but I wouldn't get too excited.
The font tag is very useful, it lets you change the colour, size and font of the writing anywhere you want. Being able to change the font is limited however because the computer displaying the page also has to have that font. This whole page should be in Arial but if you haven't got that font your computer will pick a replacement. So your page might look great in this new cool font you've just got yourself but if no one else has it, I wouldn't bother. I'd limit yourself to popular well used fonts. Not as much fun, but more practical.
The <FONT> tag by itself does nothing, it has to be extended like we extended the <BODY> tag in chapter 2. We can extend it with one or more of the three commands; COLOR=" ", SIZE= or FACE=" ".
We'll start with colour as we dealt with this in chapter 2, between the " " exactly the same colouring
system is used as before so nothing new to learn.
SIZE= is not like header, 1 is the smallest. You'll have to experiment to find what the other sizes are,
the next example will show a few.
FACE changes the font you are using, just put the font you want to use between the " ".
|
<HTML> <HEAD> <TITLE>Stuff with text.</TITLE> </HEAD> <BODY> This is some normal text.<BR>
</BODY> |
We have already come across the <BR> tag that makes the browser go on to the next line. The <P> tag is used to separate paragraphs. It returns, misses a line and then text will appear on that line when typed. I have used this tag to separate all the paragraphs in this guide.
To centre text or anything else (like pictures which we'll learn how to add them in chapter 4) you use <CENTER> tag. It uses the American spelling of centre, so if you're American that's nothing new. Here is a quick example:
|
<HTML> <HEAD> <TITLE>Stuff with text.</TITLE> </HEAD> <BODY> This is some text that is not centred.
</BODY> |
As you can see the </CENTER> tag is used to show where you want to stop the text being centred. I have also used this example to show the use of the <P> tag.
To put a line across the screen, you use the <HR> tag. This stands for horizontal rule. When used by itself it creates a line that almost fills the width of the screen, you can alter the length of the line by adding a width parameter to the tag like this: <HR WIDTH=100>. The number is the line's length in pixels.
I think we've covered most of the things you can do with text. In the next chapter we look at adding pictures to our web pages.