The HTML Files: A web site design and HTML tutorial brought to you by Didilogix.com.

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 your text editor, 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!

Font Size

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:

<H1>Heading 1</H1>: This one looks like:
The Largest Heading
<H2>Heading 2</H2>: This one looks like:
The Second Largest Heading
<H3>Heading 3</H3>: This one looks like:
The Third Largest Heading
<H4>Heading 4</H4>: This one looks like:
The Fourth Largest Heading
<H5>Heading 5</H5>: This one looks like:
The Nearly Smallest Heading
<H6>Heading 6</H6>: This one looks like:
The Smallest Heading

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 <H1> and at the end of the bit of text you just type the appropriate closing tag, such as </H6>:. Simple!

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 <H1> and for your next heading a <H3>, say. Don't start with, say, a <H4> then follow later with an <H2>! It may work in your browser but may not in other types of browser and is just bad programming practice! Get into the habit of coding properly for simple code like this, then when you come to code more complex pages you will already be really disciplined resulting in less likelihood of coding errors!

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:

<FONT SIZE="4" COLOR="#0000ff">bit of text</FONT>

<FONT> tags can be used anywhere you like as they override any defaults that may have been given in the <BODY> element shown earlier. So, you can use <FONT> and </FONT>tags to surround just one word whilst the rest of the text stays as the default - as in the example above. Or you can use them to surround a sentence or even an entire paragraph. You just have to remember the </FONT> end tag as well otherwise all the text after the initial start tag you put in will have the properties you put in that start tag!

The number after the attribute SIZE is a relative text size with "1" being the smallest. The best thing is to experiment with the numbers and then look at the result in your browser to see which is the size you prefer...

Text Colours

You saw in the lesson on the previous page how you can set up the default text and background colours in the <BODY> tag and you learned about the hex colour codes. I'll remind you by showing that bit of code again - see below:

<BODY BGCOLOR="#000000" TEXT="#ffffff">

In the above, because "BODY" sets the page defaults, any text you type in your page will be black (as in "#000000". How do you change the colour of individual words, sentences or paragraphs of text?

We introduced the <FONT> element in the last part of the section about text size above. Here's that code again:

<FONT SIZE="4" COLOR="#00ff00">bit of text</FONT>

See, there is actually an attribute for colour in there? This is how you can override the default text colour set in the "BODY" tag. So what colour and text size does the above fragment of code result in? Here it is:

It looks like this!

Cool huh!

Typefaces & Fonts

So how do you get your browser to display different font faces? This is again just down to an attribute of the <FONT> element called "FACE". Take the below examples:

<FONT SIZE="4" COLOR="#ff0000" FACE="Arial">This text is in a style called Arial.</FONT>

This text is in a style called Arial.

<FONT SIZE="4" COLOR="#ff0000" FACE="Verdana">This text is in a style called Verdana.</FONT>

This text is in a style called Verdana.

<FONT SIZE="4" COLOR="#ff0000" FACE="Times New Roman">This text is in Times New Roman.</FONT>

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 in the list above is Arial, and it appears above as size 4, red. 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. In fact, most people use the terms "font" and "typeface" (the latter usually abbreviated to "face") interchangeably in reality.

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. Have a look at the "T" in the word "The" in the "Times New Roman" example above compared to the same character on the other typefaces - see how the Times New Roman one has little things - "serifs" - on the T but the T is just a straight unadorned "bar" on the others? Typefaces such as Times New Roman are known because of that as "serif", whereas the Arial and Verdana typefaces 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 which 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 can only display certain ones - and, even more confusingly, some browsers display some typefaces 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!

Paragraphs & Text Alignment

So, we've just looked at typefaces and their characteristics: font size and colour, but what about alignment and spacing?

The most fundamental thing in separating text is to know about <P> tags where the "P" element stands for - you guessed it - "paragraph"! So, if you want to build paragraphs, you simply start each one with a <P> and finish it (usually after a full-stop, say!) with the closing tag </P>. Check out the below:

<FONT SIZE="3" COLOR="#f125e6" FACE="Verdana"> <P>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...</P>

<P>...and here's the next paragraph.</P> </FONT>

What does this code actually look like when used to code a web page? 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 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 P element can have an "ALIGN" attribute. The variable can be "left", "right", "center" or "justify" - see the examples of code below and their results underneath...

<P ALIGN="left"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Left Aligned Text looks like this</FONT></p>

Left aligned text looks like this!

<P ALIGN="right"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Right Aligned Text looks like this</FONT></p>

Right aligned text looks like this!

<P ALIGN="center"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">Centre Aligned Text looks like this</FONT></p>

Centre aligned text looks like this!

<P ALIGN="justify"><FONT SIZE="3"COLOR="#d83281" FACE="Verdana">Justify Aligned Text looks like this</FONT></p>

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 reason the pink text above fits the whole way across the page and kind of looks weird is because we haven't specified indent and margins yet, which could have the effect of making the text start with a bit of a margin on the left and the right - the way this paragraph that I am now typing looks! There is a way to do this and it is by use of the <BLOCKQUOTE> tag. All you do is this:

<BLOCKQUOTE>
<P ALIGN="left"><FONT SIZE="3"COLOR="#d83281" FACE="Verdana">Left Aligned Text where blockquote tag has been used to give it a margin looks like this</FONT></p>
</BLOCKQUOTE>

...which looks like the below:

Left Aligned Text where blockquote tag has been used to give it a margin looks like this - see, there is a nice bit of white space - a "margin" - either side of the block of text!

Breaking Up Lines Of Text

Okay, we've looked at paragraphs. But what about if you want to have a line of text appear on a separate line rather than have it with an entire empty line between the two lines of text as you would have if you were to use the </P>tag introduced above?

Simple - you just use <Br> tags in the part of your page that you want the text to break onto a new line. This tag is interesting in that it doesn' require a closing tag - there is therefore no such thing as </Br>. So, have a look at the below (note that I have changed the font colour to red this time and have applied a fontface as discussed above):

<P ALIGN="left"><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></p>

The above actually looks like the below if you were to code it into a web page:

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! In the code example above, note how I have just written it on lines with no physical breaks. However, when I am coding, I would in fact write it as follows:

<P ALIGN="left">
<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>
</p>

Notice how, in the example given above, the code appears spaced out with the <P ALIGN="left"> tags, for example, written on a separate line and the <br> tags on separate lines also. This is how I write my code and most designers will tend to do something similar as well rather than just have it all on the same lines. This is just to make it easier for me to track down what I have done in my code - not so easy if you nest all the tags within lines of text in your code. In fact, if you view the source of this page, you'll see how neatly spaced out everything is - that way I can easily find a paragraph or a segment of code in order to change or edit the code or the text! So you may want to start thinking about how you space your code out as well.

The DIV Element

As described above, sometimes you don't want to use the "P" element (or <P> tag) because of the carriage return line feed space it leaves between. Yes, you can just use <br> within paragraphs as decribe above, but there is an easier way which avoids having to do that at all and that is to use the "DIV" element instead. This element will become very important later when we want to introduce images to our pages, but it is worth introducing it now since it can also be used to align text.

<div align="left">this one left-aligns text or objects such as images</DIV><br>
<div align="right">this one right-aligns text or objects such as images</DIV><br>
<div align="center">this one centres text or objects such as images</DIV><br>

You just need to remember to use the <BR> tag - like I have in the examples above - to make sure that each bit is on a separate line otherwise you may get unpredictable results in different browsers!

Text Spacing

What about actually spacing out words in a sentence, heading or whatever? Well, 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 of text as opposed to code (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.

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 following:

  - where "n, b, s, p" stands for "non-breaking space".

Consider the following bit of code:

If you were to code the above and then look at it in a web page, it would appear that the "bit of text" text had five spaces before it - one space which the browser does recognise, but four   which you need to use in order to get the other four spaces! In that example I put the no code blank space just before "Bit of text" but I could have put the space at the start of the code and it would still work fine, as in:

You can probably see from the above that each   is not quite the same width as a character, so you often need more  s than you'd think to get the space width you want.

Exclusion Tags

These are rather important - you use exclusion tags when you want something to appear on your source pages but not be seen in the browser window. This is usually called "commenting out" text. I use exlusion tags to break-up the sections of my code into chunks so I can find it easier to find something in a page of code that I may need to edit later! All you do is enclose the text in a tag with an exclamation mark and a certain amount of dashes, as below:

Do remember though, that just coz it don't appear in a browser window it don't mean others can't see it! If you are able to view source, then so is everyone else! You would be surprised at some of the funny stories I have heard where people have received email from others, commenting on the nature of things they had written in their view source pages, simply because they had forgotten that other people can view this! You would also be surprised the other silly stuff people put in their exclusions such as information that could be useful to a hacker. So do be careful what you put in there!

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:

<B>Bold Text</B> which looks like this
<U>Underlined Text</U> which looks like this
<I>Italic Text</I> which looks like this
<STRONG>Strong Text</STRONG> which looks like this
<EM>Emphasised Text</EM> which looks like this
<KBD>Keyboard Text</KBD> which looks like this
<CITE>Cites Titles</CITE> which looks like this
<CODE>For code examples like on this page</CODE> which looks like this
<PRE>For preformatted text</PRE> it makes line spaces, tabs and line-breaks significant in your code which they are not normally as HTML only recognises one space between each word in your text.

Escape Characters

You can see by now that in your code you use symbols like /, =, ", < and >. Well, because these symbols are used in HTML, you can't use them in your text otherwise your browser will think they are codes. In fact, browsers often do allow some of these in your texts - but other browsers do not! So how do you get those characters to display if you can't actually type them in your text? You use what are called HTML escape characters, also known as escape sequences.

How do you type an escape sequence? Well, they always start with an & and end with a ; - you can see that the latter two symbols are also characters that if you want them in your text, you have also to use the escape sequence! For example, to put an & in your text, say in the example "apples & pears", you simply type the text with an escape sequence, thus typing Apples & Pears will sort out the problem - see the escape sequence? It is the bit starting with an "&". Here is a list of the escape sequences for the symbols we have mentioned above:

Symbol	Escape Sequence
&	&
<	<
>	>
"	"
=	=
/	/
:	:
;	;
#	#
£	£
@	@

See the appendix (menu on the left) for a full list of HTML escape sequences.

NEXT: So what about things like lists and other types of formatting?

Didi Barnes is a member of:

The International Webmasters Association

© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.

The Largest Heading

The Second Largest Heading

The Third Largest Heading

The Fourth Largest Heading

The Nearly Smallest Heading

The Smallest Heading