2.3 Text Formatting
So you've set up your basic page structure as shown in the previous lesson. How do you code the content? Easy. You just type whatever you want to put in there, then code it up! Let's have a look at some different things below. It would be good to have your text editor open, then you can play with all these examples, save the file, and see what they look like in your browser and learn as you go along!
There are various ways to code for font - or text - size. Let's first look at headings. In HTML there are six of these, the tags being as follows:
So now you've seen how simple it is to code different sizes of heading. You simply type
the text you want, then at the beginning of the text insert one of the heading tags such as
Coding Note: Headings are supposed to be used sequentially down a page, starting from
level 1 down to whatever - it is bad practice otherwise! So, for your first heading start with a
There's another way (at this point in your learning) to specify font size and it means use of an element you have not yet seen here - the FONT element. This can have a number of different attributes, size colour - all sorts! So is a very useful element to know. Take the below example:
The number after the attribute
You saw in the lesson on the previous page how you can set up the default text and background
colours in the
In the above, because
We introduced the
See, there is actually an attribute for colour in there? This is how you can override the
default text colour set in the
Typefaces & Fonts
So how do you get your browser to display different font faces? This is again just down
to an attribute of the
This text is in a style called Arial.
This text is in a style called Verdana.
This text is in Times New Roman.
In typography, the different categories of look of characters (like those above) are called "typefaces" - which means the style of the letters, in effect. A whole bunch of characters (i.e. A-Z, 0-9) that are of a particular typeface are called fonts. The first typeface above is Arial, and it appears on the web page using a red, size 3 font. You can perhaps now see why the attribute "FACE" is used for the style of text and the attribute "FONT" is used as the element itself, because fonts are to do with modifying the size and colour of a particular typeface.
Anyway, the first two typefaces shown above are members of the typeface family called "sans-serif" and the third is a member of the "serif" typeface family. The word "serif" refers to the little tiny bits on the ends and corners of a typeface. If you look closely at the Times New Roman example above, you can see that it does have those little bits - hence it is a "serif" face, but the first two don't which is why they are "sans-serif" - sans-serif meaning "without serifs".
Sans-serif typefaces tend to be easier to read than serif faces like the third one above. For this reason, I tend to use sans-serif typefaces (like the first two above) for my pages (as in this tutorial) but I use Times New Roman (a serif typeface) for anything with a legal connotation such as the copyright notice at the bottom of this page. In fact, serif typefaces have traditionally always tended to be used for legal stuff (probably because they are not so easy on the eye and put people off reading the "small print"!!).
You do have to be a bit careful when choosing what typefaces to use in your web pages. When you look in, say, Microsoft Word, you will have seen that you can write letters using all sorts of different typefaces. However, browsers do not offer quite as much possibility and only display certain fonts, and even more confusingly, some browsers display some fonts and others don't!
I will put a page in the Appendix on typefaces when I get a bit of time - look at the menu on the left - if there's one for typefaces I've done it, if not then I haven't got around to it yet - sorry!
Text Alignment & Spacing
So, we've looked at font size and colour. How about alignment and spacing? The first
thing to know is that when you are typing a bunch of stuff into your text editor for web coding, if you leave a
space between words (as in this text) your browser will recognise those spaces so your text is spaced out as you'd
expect. However, if you want an extra space - i.e. two spaces - between words, the browser doesn't recognise
if you put an extra space between the words. For example in traditional english it was the thing to do to leave
two spaces after a full-stop and before the capital letter of the next sentence. However, the web browser only
recognises one space even if you do press the spacebar twice! To get around this you just use the
this has five blank spaces before it, one with no code which the browser does recognise, but four which you need to get the other four spaces!
You can probably see from the above that each is not quite the same width as a character, so you often need more than you'd think to get the space width you want.
Okay, we've looked at the code. But how do you break up lines of text?
Well, you simply put a
<FONT SIZE="3" COLOR="#ff0000" FACE="Verdana">here's a bit of text that we want on one line<br> but we want this bit to be on a separate line<br><br> and this bit two lines below it.</FONT>
and it looks like this:Here's a bit of text that we want on one line
but we want this bit to be on a separate line
and this bit two lines below it.
So you can see that we put two <br> tags at the end of the second line to get the third line with a blank line about it. Obviously you can use as many <br> in your code that you need!
Okay, but what about separating chunks of text into paragraphs? Okay, time to introduce you
to another tag - the
What does this code actually do? Check this out:
Here's a bit of text that we want to make into a whole paragraph. So I will just keep typing for a bit so that you can see the effect this has when I end the paragraph - which I will do now...
...and here's the next paragraph.
In the actual example in pink above, you can see that although there is a break between the
paragraphs, the alignment of the text itself looks weird. This is because we didn't tell the browser how to
align it and in this case it just defaults to aligning the text centrally on the page. In fact, the
Left aligned text looks like this!
Right aligned text looks like this!
Centre aligned text looks like this!
Justified text looks like this but I need to write a lot of text to show it because it is to do with how the text wraps at the end of each line - see, all the right hand edge of this bit of text is level with the next line? That is what "justified" means and it can be very useful because it makes everything look neat and tidy! However, some people hate it because it can make everything look too contrived so you need to consider carefully before you use it!
The DIV Element
This really continues from the above as it is about text alignment. This involves use of
You just need to remember to use the <BR> tag to make sure that each bit is on a separate line.
Other text tags
There are all sorts of other text tags that add character to your text as well. These are used in pairs either side of the text you want to apply them to. Here are the main ones:
NEXT: So what about things like lists and other types of formatting?