Rediff Homepages

Line
Your Homepage
Line

Step 4 : Formating blocks of text in your HTML document.


Creating a line break with the <BR> tag.

Unless told otherwise a browser displays the characters in a steady stream. If you don't do some sort of formatting then your entire page will be a continous single line.

For example..

<BODY>
Hi!
First Line 
Second Line
Third Line 
Fourth Line
</BODY> 

Will show as..

First Line Second Line Third Line Fourth Line

To skip to a new line we use the <BR> tag. Here is the revised document.

<BODY>
Hi!
<BR>First Line 
<BR>Second Line
<BR>third Line 
<BR>Fourth Line
</BODY> 


First Line
Second Line
Third Line
Fourth Line

The <BR> tag basically says - start a new line. You can also use the <BR> tag to skip one or more lines.

<BODY>
<BR>First Line
<BR>Second Line
<BR>
<BR>Third Line
<BR>
<BR>
<BR>Fourth Line
</BODY>


First Line
Second Line

Third Line


Fourth Line

Top



Formatting entire paragraphs with the <P> tag.

Now lets take a look at formatting entire paragraphs. The tag to mark a paragraph is <P>. Placing this tag at the start of each paragraph demarcates the paragraph. In some browsers the tag has the effect of skipping a line after the paragraph ends.

<BODY>
<P>This is a test paragraph and displays the value of the paragraph tag.</P>
</BODY>

Another thing about the <P> tag... although in the examples we used a closing tag (</P>), it is not entirely necessary. Nearly all browsers will assume that when a new <P>aragraph has begun, the old one must have ended.

<P>First Paragraph
<P>Second Paragraph

is the same as...

<P>First Paragraph</P>
<P>Second Paragraph</P>

Top


Centering text with the <CENTER></CENTER> tags.

Any text placed within <CENTER> and </CENTER> tags will be centered on the page.

<BODY>
<CENTER>Hello World</CENTER>
</BODY>

Hello World

Top



Leaving Spaces in text with &nbsp;.

Have a look at this document...

<BODY>
Rediff        personal        homepages
</BODY>

On the browser it appears as..

Rediff personal homepages

The browser won't recognize more than 1 space. So you have to use the <&nbsp;> tag wherever you would like to have a space.

<BODY>
Rediff&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
personal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
homepages
</BODY>

The browser will dispay your text in a steady stream unless you tell it otherwise with line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use the space code (&nbsp;). If you hit Return (or Enter) while you are typing, most browsers will interpret that as a space... unless there is already a space there.

Top

Case Study : Ram Chandran's Homepage
So far Ram Chandran's page is pretty simple, nothing fancy. Lets see how he formats a block of text on his homepage.
To view the code of the example file use the view source option of your browser.

< Formating Text | Index | Creating Links >
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.