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

HTML Basics

Linking to Stuff

Advanced HTML

Publishing Your Site

Appendix

Printable Version (pdf)

Main Site:

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!

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 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   - where "n, b, s, p" stands for "non-breaking space". Consider the following:

&nbsp;&nbsp;&nbsp;&nbsp; this has five blank spaces before it, one with no code 
	which the browser does recognise, but four &nbsp; which you need to get the other four spaces!

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 <Br> tag 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):

<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 <P> tag. Just remember that the "P" element stands for "paragraph" and you'll be fine! 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 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 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">This is the code for left aligning text</FONT></p>

Left aligned text looks like this!

<P ALIGN="right"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">this is the code for right aligning text</FONT></p>

Right aligned text looks like this!

<P ALIGN="center"><FONT SIZE="3" COLOR="#d83281" FACE="Verdana">this is the code for centering text</FONT></p>

Centre aligned text looks like this!

<P ALIGN="justify"><FONT SIZE="3"COLOR="#d83281" FACE="Verdana">this is the code for justifying text</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 DIV Element

This really continues from the above as it is about text alignment. This involves use of the DIV element. Sometimes you don't want to use the "P" element (or <P> tag) because of the carriage return line feed space it leaves between. In that case, and for aligning images and other objects on a page you can use this "DIV" element instead.

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

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:

<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
<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.

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