Text

It is very likely you will have used a word processor such as Microsoft Word or similar. If you have, the buttons on the left should be familiar. Button "B" makes text bold, button "I" makes text italic and button "U" makes text underlined.
There are tags which allow us to make the same text formats possible on web pages. Conveniently, they are similar in appearance to the three buttons, and they are all open tags.

The <b> tag makes text bold, as so -

<b>Some bold text!</b>

would create the line -

Some bold text!

The <i> tag makes text italic, as so -

<i>Some italic text!</i>

would create the line -

Some italic text!

The <u> tag makes text underlined, as so -

<u>Some bold text!</u>

would create the line -

Some underlined text!

You can also use combinations to create bold italic, bold underlined, italic underlined or even bold italic underlined as so -

<b><i><u>A combination of text styles!</u></i></b>

would create the line -

A combination of text styles!


Beyond these simple text formatting tags, there are the HEADER tags. They are also open tags, and look like this -

<h1>Largest Header</h1>
<h2>Large Header</h2>
<h3>Medium-Large Header</h3>
<h4>Medium-Small Header</h4>
<h5>Small Header</h5>
<h6>Smallest Header</h6>

Which creates this -

Largest Header

Large Header

Medium-Large Header

Medium-Small Header

Small Header
Smallest Header

By default, HEADERs are bold and have large top and bottom margins. Not very nice, but if you know how to use style sheets, which will be covered in week 12, you can set the HEADERs to any size, colour and style you want! For now, you may use the HEADERs for basic text size control.


An important closed tag is the line BReak or <br> tag. This forces the text after it to start a new row. Another useful closed tag is the Horizontal Rule or <hr> tag. This tag creates the horizontal lines you may see on these pages. An open tag which creates a block of text or PARAGRAPH is the <p> tag. The <p> tag does the job of two <br> tags, but requires a </p> at the end of the block of text. For example, this block of text and the one above are both within a set of their own <p> and </p> tags.

To centre some text, use the <center> open tag. Like the bgcolor attribute of the <body> tag, the spelling of "center" is American. If you have a "<centre>" tag, nothing will happen.

This text has been put between some <center> and </center> tags!

By default, text alignment is to the left. The above paragraph showed you how to align text centrally. It is also possible to align text to the right - that is what I have done here. However, you probably won't need to do this to text very often, it can be useful for images, which we will cover next week.
The difference between this PARAGRAPH and the others on this page is I have specified the "align" attribute as so -

<p align="right">Some text aligned to the right!</p>

Which does this -

Some text aligned to the right!


The most complex and versatile of the text formatting tags is the FONT open tag. <font> does nothing on its own, so it needs attributes. The most often used of these will be "color", "face" and "size". The examples below each use one of these attributes, though they may be combined.

<font color="#ff0000">Some red text!</font>
Some red text!
<font face="arial">Some arial text!</font>
Some arial text!
<font size="8">Some size 8 text!</font>
Some size 8 text!

So, if you feel adventurous, you could create this -

<font color="#0000ff" face="courier" size="6">Some big blue courier text!</font>
Some big blue courier text!

Note that where the "face" attribute is concerned, there may be some fonts which you have but your clients don't. Here is a short list of some common and varied fonts -

"times new roman" (default) ABCXYZ
"arial" ABCXYZ
"arial black" ABCXYZ
"courier" ABCXYZ
"symbol" ABCXYZ
"webdings" ABCXYZ
"westminster" ABCXYZ
"wingdings" ABCXYZ

There are others, but if you stray from these, the client may not have them and the browser will display the default font, usually Times New Roman.
A quick way to format text into a single width font is the Typewriter Text or <tt> open tag. I have been using it to denote HTML code.
This is the effect of the <tt> tag.