Putting Text in your HTML Document

Once you've built your document, you are ready to start putting things onto your page. Undoubtedly, you are going to want to have some text. HTML will, by default, print any text in one continuous line, wrapping at the edge of the browser window to a new line, no matter how many spaces or hard returns you put in the text document from which the browser is reading. It is here that you need the text operators to deal with formatting the text as you want it.

Here are some of the most important text formatting tags that you will use:

<b>text</b> - Make the text BOLD

<i>text</i> - Make the text ITALIC

<u>text</u> - UNDERLINE the text

<pre>text</pre> - PRE-FORMAT the text spacing, that is, keep a fixed width font, and take notice of multiple spaces, and hard returns. This may sound useful, but beware, as variable widths on browser windows, and different default fonts can cause this to look strange.

Note that these tags can all be used in conjunction with eachother, so for example, if you were to have:


Then the word "Text" would appear as a bold, italic, underlined, fixed width font.

Note the use of strict nesting of tags inside one another

Arranging Text

Now that you can format the style of text, you will need to deal with the spacing of the text. Here are the tags that you will need for that:

<br> - Line Break. This has no closing tag. For each BR tag, the browser inserts a line break, and then continues reading the rest of the HTML document.

<p>Text</p> - Paragraph break. This makes the text between the tags into a paragraph, and thus inserts a line break before and after the text.

<center>Text</center> - Centres the text (or any object, for that matter) between the tags.

<h*>Text</h*> - Header Tag, where * stands for a number between 1 and 6, where 1 generates the largest text size, and 6 generates the smallest. This tag also generates a line break when it is turned off.


Note that this tag is Netscape specific, and will have no effect on any other browser

Finally, we can adjust the size, type, and colour of particular bits of text in the document using the following tag:

<font size="*" face="selection1|selection2|selection3" color="colour">

Here, * stands for a number, between 1 and 7. You can also insert a + or - in front of the number, if you want to make the font size relative to the base font of the page.

The face section allows you to define 3 different selections of the type face that you wish to use. If the browser does not have selection 1, then it will look for selection 2, and then selection 3. If none of the font faces are found, then it will revert to the default system font, which can vary from machine to machine, and the user's preferences.

The color section allows you to define the colour of the text between the on and off font tags. It works exactly the same way as we talked about in the last section, with a choice between predefined colours, and hexidecimal declarations of colour. Don't forget to put the "#" before the hex-code though, if you use it.

If you don't define any of these values, then each section will remain as it has already been defined. That is, at default size, and font face, and the same colour as defined in the body tag. As soon as the font tag is ended, then all text after that will revert to this as well.


Finally, as you build larger and larger, and more complex files, you may find it hard to see exactly which section of the page you are looking at, when looking at the source. To help you round this, you can comment as often and as much as you like, and hide all those comments from the browser, so that it does not interpret them:

<!-- Place your comment here -->

Everything between <!-- and --> will be hidden, no matter how far apart then beginning and ending tags are. Get used to commenting often, as it will help other people understand what you've written.

Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.

[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page