The formatting of words has always been an integral part of the writing/ reading process: think about hand-written medieval manuscripts with their beautiful illuminated texts, or consider the design of the inside pages of contemporary novels or, indeed, of your essays and dissertations (page size, title page, contents, bibliography, font size, punctuation ...). We have become so familiar with certain print conventions that the medium has become largely transparent or, when it does assert itself we tend to 'feel' it as a sensual artifact ("I like taking books to bed").

A new medium such as the web demands self-conscious attention to the format of its text, and millions of words (print and online) are dedicated to the topic of 'web design'. More precisely, within the genre of web-specific fiction, formatting techniques are used to generate literary/ artistic meaning, and explicit attention to formatting is the first characteristic of web writing.

This lesson will teach you simple formatting:
how to change the colo(u)r of the font and background, how to apply font emphasis such as bold or italic, how to change the size of your font, and how to position text on the page.

BODY COLO(U)R

To change the body colo(u)r you need to add the attribute to the < BODY > tag, like this:

< BODY BGCOLOR="black" >

FONT ATTRIBUTES

You can specify the font colour by using the BODY tag:

< BODY BGCOLOR="black" TEXT="green" >

Or you can stipulate the attributes of different chunks of text throughout the body of the page.
This involves a new tag, the < FONT > tag and its partner < /FONT>.

You type the font tag at the beginning and end of your text to change features such as colour and size. For example:

< FONT COLOR="red" SIZE="4"> This is quite bold and bright < /FONT >
You can use numbers 1-7 inclusive.

< B > bold < /B>

< I > italic < /I >

< U > underline < /U >

< H > Heading tags can be used from a large < H1> down to a very small font < H6 >, and tags must always be closed.
For example:

< H1 > BIG HEADING < /H1 >

Try the out the other sizes, and note the space above and below the typed line.

POSITIONING TEXT

< BR > This forces a line break.
< BR > This tag doesn't need to be closed.

< P > Starts a paragraph. Close like so: < /P >

< P > Then repeat to start the next paragraph, and pay attention to the line spacing that results from this technique. < /P >

< P> Are you getting the hang of this? It is quite a challenge to position text accurately with these basic techniques - not like word processing at all. Later on you can learn how to draw TABLES - a grid which enables the precise setting of web page elements - but, for now, see how much you can do with a few simple tricks. < /P >

< CENTER > puts text in the centre of a page. Close < /CENTER >

< PRE >

		This enables you to have some control
		over the positioning of text.
		BUT
		the font, as you see, is mono-type.

		Remember 
		to
                    close
                           the
			        tag.

< /PRE >

Don't forget - there is no space between the brackets and the text inside.

and just for fun: < HR > draws a horizonal line across the page. No need to close this tag.

EXERCISE

Have some fun and produce a web page that exploits the colour and font attributes you have learnt.
Take a piece of print writing - your own or a found text - and convert it into HTML. Stretch the simple techniques of this lesson. Focus on the process: play and make mistakes and see where such mistakes take you. When you have written something you like, or you get bored and want to move on, save your page in your WEBPAGES folder.

EXTRA

COLOUR: There are more complicated and subtle ways of choosing and writing colo(u)rs than by using their ordinary names. This involves specifying the 'hexadecimal' number of each of the 216 web-safe colo(u)rs. When you are ready, check out these pages by Kaz Madigan (opens in new browser). Click on the 'web safe colours' link.
But everyday names are fine to start with

In the next lesson we look at how to make links to other pages (your own pages and those already on the web).

go to: