Rediff Homepages

Line
Your Homepage
Line

Step 3 : Formating the text in your HTML document.

The next step will be to format the text or information between the BODY tags. In simple words it means that we will learn how to change the font or color of the text, how to make it bold, underlined etc.

For the sake of convenience we will only view the code which comes between the BODY tags. But remember every HTML document has got to have HTML, HEAD, and BODY tags.



Using the <B></B> tags for Bold.

Lets start with Bold

<BODY>
<B>Hello World</B>
</BODY>

Hello World

At the <B> tag we start making things bold, and at the </B> tag we stop making things bold.

Using the <I></I> tags for Italics.

Similiarly we can use <I> and </I> tags for Italics

<BODY>
<I>Hello World</I>
</BODY>

Hello World

Using the <U></U> tags for Underline.

We can use <U> and </U> tags for underlining...

<BODY>
<U>Hello World</U>
</BODY>

Hello World

Top


Using tags in combination.

<BODY>
<U><B>Hello World<B></U>
</BODY>

Hello World

Hello World

When we use tags in combination we have nested tags. If you are going to use tag pairs in combination, then to avoid confusing the browser, they should be nested, not overlapping. For example...

   <THIS><THAT></THIS></THAT>    Overlapping tags.... Wrong
   <THIS><THAT></THAT></THIS>    Nested tags.... Correct

Top


Changing the FONT SIZE

Now lets try to change the font size of the text. This involves using the <FONT> and </FONT> tags.

First add the <FONT> tags...

<BODY>
Something really <FONT>cool</FONT>
</BODY>

Then specify a SIZE attribute.

<BODY>
Something really <FONT SIZE=6>cool</FONT>
</BODY>

The result..

Something really cool

Fonts come in 7 sizes. The default size depends on the browser. If you don't give a font size then it will take the default size.

Size 1 Hello World
Size 2 Hello World
Size 3 Hello World
Size 4 Hello World
Size 5 Hello World
Size 6 Hello World
Size 7 Hello World

You can also specify the font size as..

<BODY>
Something really <FONT SIZE= +2>cool</FONT>
</BODY>

Here the FONT=+2 means that the font size is the default size plus 2. You can also make it negative ie. FONT=-1

Top



Changing the Font

Now lets take a look at changing the actual Font.

Every browser has a default font setting - font name, size and color. The default is usually Times New Roman and it's black. Of course we can specify font names other than the defaults. Like ARIAL and VERDANA.

<BODY>
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>

The font will only display if your viewer has that font installed on their computer. If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can also specify more than one font,

<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hello World</FONT>.

Here are some more common fonts.

Andale Mono       Arial       Arial Black
Comic Sans MS       Courier       Georgia       Impact
Times Rew Roman       Trebuchet MS       Verdana

Top



Changing the Font Color

You can also change the  font  color. The common colors being red, green, cyan, brown, black, white, yellow, grey etc.

<BODY>
<FONT COLOR="red">Hello World</FONT>
</BODY>


We can, of course use more than one ATTRIBUTE in a <FONT> tag...

<BODY>
<FONT COLOR="blue" FACE="ARIAL" SIZE="3">Hello World</FONT>
</BODY>

Hello World


Top

Case Study : Ram Chandran's Homepage
Lets see how our Mr Ram Chandran has used the bold, underline, italics and the font tags in his homepage. To view the code of the example file use the view source option of your browser.

< Creating Your First HTML Document | Index | Formating Blocks Of Text >
Line

   Broadband | Chat | Contest | Movies | E-cards | Weather | Travel | | Romance | Astrology | Shopping
Money | Instant Messenger
| Auctions | Auto | Education | Jobs | TechJobs | Women | Technology

rediff.com
Disclaimer
© 2000 rediff.com India Limited. All Rights Reserved.