In this lesson, we'll look at the basics of putting text into an HTML document, and getting it to display in something like the way that we want it.

Let's get right down to it. Open your editor and start a new file. Type in the following, exactly as you see it:

Save your file as "file2.html". When you open it in your browser, it should look like this.

You'll see that in the browser, our text is displayed as two sentences, with no paragraph break, and line breaks occur only where the text has reached the end of the screen and wrapped around.

To control the formatting of text, we have to use particular tags.

To define a paragraph, we enclose the text in a pair of tags: <P> and </P>. Go back to your file again, and enter the additional tags as shown below:

Save your file. When you open it in your browser, it should look like this.

The text has been split into two paragraphs, with some "white space" in between. So all we have to do to divide text into paragraphs is to enclose each paragraph inside <P> and </P> tags. Easy, eh?

That takes care of paragraphs, but what if we want to force a line of text to break at a specific place? For example, going back to our file: what if we wanted to break the lines at the same places as they are broken in the source code?

To achieve this effect, we make use of the BR element, defined by the <BR> tag. This tag is a little different from the others we've seen so far, because it has no closing tag. This will seem quite sensible when you see how it's used. We just put the <BR> tag wherever we want force a line to break.

Go back to the file in your editor again, and enter the <BR> tags as shown:

Save your file. When you open it in your browser, it should look like this.

Now you see the lines are broken at the points we broke them in our source file.

And remember, we could equally well have written our file like this:

and the result in the browser would be just the same. Formatting is controlled by tags and by their location, not by the layout of the text in the source file. Obviously, it makes more sense to lay out the source code in something like the way we did it previously, to make the various elements stand out clearly.

Normal behaviour for text is that each line will flow to the width of your browser window, then wrap around. A line will only break at a convenient space, not in the middle of a word. There is a way to hyphenate words using a "soft hyphen", but not all browsers recognise the soft hyphen so it is better to forget about this -- I certainly do! It's not very useful anyway; you don't know how wide a user's window is going to be, so you can't predict appropriate words for hyphenation.

There are times when you have two words or characters separated by a space, but which you don't want to be separated by a line break under any circumstances. For example, if you were writing a dimension like "2 mm", and you wanted to ensure that you never ended up with the "2" at the end of one line, and the "mm" at the start of the next, there is a way to do it. You just have to make use of the "non-breaking space" in between the two words. The non-breaking space is represented by the code "&nbsp;" in your source file. Just put it between the two words, without any other spaces, like in the example below:

Then, if the text lands at a point where normally it would be caused to break between the "2" and the "mm", both words will be forced on to the next line to keep them together.

Unless your HTML code gives specific instructions to do otherwise, a browser will display text in its default font. The typeface and size of font depends on a number of things, mainly

• the platform on which the browser is running, e.g. Windows, Mac, Unix

• the browser itself, e.g. Netscape Navigator, Internet Explorer, Lynx

• whether the browser permits the user to set the default font, and what the user has set if so.

Generally, the default will be a proportional font, and (on Windows systems at least) is often some flavour of Times Roman. Proportional fonts have variable width characters, unlike monospaced or "fixed width" fonts, where each character occupies the same horizontal space (like the print from a typewriter). Text written in a proportional font is usually more attractive and easier on the eye than text in a monospaced font. But sometimes a proportional font is a nuisance, for example, if you are trying to line up columns of figures. Hold that thought...

Spaces between words and characters aren't without problems either. You've already seen how little attention browsers pay to white space in your source file. This even extends to the space in between words, in that whether you insert one space or ten spaces between two words, the browser will interpret it as only one space when it comes to display the file on screen. Unless you use a series of non-breaking spaces, which will be seen as spaces. But spaces in proportional fonts are unpredictable (especially when you have no idea which font your viewers' browsers are using). So trying to, let's say, line up columns using spaces isn't too effective.

There's a way to get around these problems when the need arises, and that's to use the preformatted text element, enclosed in the <PRE> and </PRE> tags.

Go back to your file for this lesson and open it in your editor. Strip out the <P>, </P>, and <BR> tags you inserted earlier, and enter the <PRE> and </PRE> tags as shown:

Save your file. When you open it in your browser, it should look like this.

There are a couple of points to note here:

1. Browsers will usually display text enclosed in <PRE> and </PRE> tags in a monospaced font such as Courier.

2. Lines are broken where you broke them with a carriage return in your source code -- no <BR> is required.

3. White space is observed -- if you put three plain, ordinary spaces between two words in your source code, you'll get three spaces when displayed in the browser.

As well as what you can see in this example, when you use preformatted text you'll find that automatic word wrapping is disabled. If you don't break a line in your source code, and the line exceeds the width of the browser window, then a horizontal scroll bar will appear in the browser window to let viewers scroll from side to side, to see the whole line.

I mentioned how preformatted text is useful for lining up columns of figures. Look at the code below, designed to show some tabular data:

I have my text editor set to use a monospaced font, so I was able to line up the text easily, just by padding it with spaces. Loaded into the browser, it looks like this.

There are more sophisticated ways to present tabular data which we'll come to in Lesson 11.

Preformatted text is handy for other purposes like putting code examples in your web pages, as it allows you to indent lines simply and consistently.

It's common in books, magazines and newspapers when quoting text from another source to make the text stand out in some way from the rest of the words on the page. HTML provides us with the BLOCKQUOTE element for this purpose. It is bounded by <BLOCKQUOTE> and </BLOCKQUOTE> tags as in the code example below:

Now you can see how this looks in your browser.

Usually, text in a BLOCKQUOTE element will be indented on both sides from the "normal" text.

A formatting element that is often used in association with BLOCKQUOTE is CITE, to cite the source of a quotation. It uses the opening and closing tags <CITE> and </CITE>. An example of BLOCKQUOTE and CITE in action together is shown in the piece of code below:

You can see how this looks in your browser.

You see that because the CITE element was nested inside the BLOCKQUOTE, it follows the same indent pattern. If it had been outside the BLOCKQUOTE, it would not been have indented. Text inside the CITE tags is typically rendered in italic face, but again this depends on the browser in use. How did it work in yours?

HTML provides us with two ways of emphasising text. The "lesser" emphasis is achieved by enclosing the text to be emphasised in <EM> and </EM> tags. Enclose the text between <STRONG> and </STRONG> tags gets you the "stronger" emphasis. How does the text actually appear in the browser? Well, that rather depends on the browser. Usually, graphical browsers render (that's a cute term used to described the browser's process of interpreting and displaying a file) text between EM tags in italic face, and text between STRONG tags in bold face. Here's a code snippet using both:

Notice how you can nest <EM> and </EM> tags inside <STRONG> and </STRONG> tags (or the other way around) to combine both methods of emphasis. You can look at this in your own browser, and see how the EM and STRONG elements are rendered.

If you write a lot of mathematical or scientific formulae, you'll be pleased to know that HTML provides for superscripts and subscripts. To make a piece of text into superscript, simply enclose it in the <SUP> and </SUP> tags. For subscripts, use the <SUB> and </SUB> tags. Examine this piece of code:

See how it looks in your browser.

The Einstein equation example shows again how tags can be nested to combine formatting elements; in this case to emphasise the whole equation, and to make the "2" superscript. Note that I put two non-breaking spaces (&nbsp;) in between the colons and the formulae: this forces an extra space, which wouldn't happen if I had just used two ordinary spaces in the source code.

Paragraphs are defined by putting text between <P> and </P> tags.

Line breaks are forced using the <BR> tag, which has no closing tag.

Line breaks can be prevented at selected points by using the non-breaking space (&nbsp;) between words or characters.

Preformatted text simplifies presenting tabular data by displaying in a fixed-width font, preserving white space and carriage returns inserted in the source code.

Quotations can be pulled out from the surrounding text using the BLOCKQUOTE element, while the CITE element can be used to indicate the source of quoted material.

Two types of emphasis can be lent to text through the EM and STRONG elements.

Superscript and subscript are catered for by the <SUP> and </SUP> tags (for superscript) and <SUB> and </SUB> tags (for subscript).